| [ Index ] |
PHP Cross Reference of WordPress |
[Summary view] [Print] [Text view]
1 /******/ (function() { // webpackBootstrap 2 /******/ var __webpack_modules__ = ({ 3 4 /***/ 5096: 5 /***/ (function(module) { 6 7 "use strict"; 8 9 10 function noop() { 11 return null; 12 } 13 14 noop.isRequired = noop; 15 16 function noopThunk() { 17 return noop; 18 } 19 20 module.exports = { 21 and: noopThunk, 22 between: noopThunk, 23 booleanSome: noopThunk, 24 childrenHavePropXorChildren: noopThunk, 25 childrenOf: noopThunk, 26 childrenOfType: noopThunk, 27 childrenSequenceOf: noopThunk, 28 componentWithName: noopThunk, 29 disallowedIf: noopThunk, 30 elementType: noopThunk, 31 empty: noopThunk, 32 explicitNull: noopThunk, 33 forbidExtraProps: Object, 34 integer: noopThunk, 35 keysOf: noopThunk, 36 mutuallyExclusiveProps: noopThunk, 37 mutuallyExclusiveTrueProps: noopThunk, 38 nChildren: noopThunk, 39 nonNegativeInteger: noop, 40 nonNegativeNumber: noopThunk, 41 numericString: noopThunk, 42 object: noopThunk, 43 or: noopThunk, 44 predicate: noopThunk, 45 range: noopThunk, 46 ref: noopThunk, 47 requiredBy: noopThunk, 48 restrictedProp: noopThunk, 49 sequenceOf: noopThunk, 50 shape: noopThunk, 51 stringEndsWith: noopThunk, 52 stringStartsWith: noopThunk, 53 uniqueArray: noopThunk, 54 uniqueArrayOf: noopThunk, 55 valuesOf: noopThunk, 56 withShape: noopThunk 57 }; 58 59 60 /***/ }), 61 62 /***/ 4882: 63 /***/ (function(module, __unused_webpack_exports, __webpack_require__) { 64 65 module.exports = true ? __webpack_require__(5096) : 0; 66 67 68 69 /***/ }), 70 71 /***/ 4485: 72 /***/ (function(module, __unused_webpack_exports, __webpack_require__) { 73 74 "use strict"; 75 76 77 var ArraySpeciesCreate = __webpack_require__(1539); 78 var FlattenIntoArray = __webpack_require__(6739); 79 var Get = __webpack_require__(6448); 80 var ToIntegerOrInfinity = __webpack_require__(1723); 81 var ToLength = __webpack_require__(6840); 82 var ToObject = __webpack_require__(1283); 83 84 module.exports = function flat() { 85 var O = ToObject(this); 86 var sourceLen = ToLength(Get(O, 'length')); 87 88 var depthNum = 1; 89 if (arguments.length > 0 && typeof arguments[0] !== 'undefined') { 90 depthNum = ToIntegerOrInfinity(arguments[0]); 91 } 92 93 var A = ArraySpeciesCreate(O, 0); 94 FlattenIntoArray(A, O, sourceLen, 0, depthNum); 95 return A; 96 }; 97 98 99 /***/ }), 100 101 /***/ 116: 102 /***/ (function(module, __unused_webpack_exports, __webpack_require__) { 103 104 "use strict"; 105 106 107 var define = __webpack_require__(9170); 108 var callBind = __webpack_require__(9961); 109 110 var implementation = __webpack_require__(4485); 111 var getPolyfill = __webpack_require__(616); 112 var polyfill = getPolyfill(); 113 var shim = __webpack_require__(2059); 114 115 var boundFlat = callBind(polyfill); 116 117 define(boundFlat, { 118 getPolyfill: getPolyfill, 119 implementation: implementation, 120 shim: shim 121 }); 122 123 module.exports = boundFlat; 124 125 126 /***/ }), 127 128 /***/ 9630: 129 /***/ (function(module, __unused_webpack_exports, __webpack_require__) { 130 131 "use strict"; 132 133 134 var GetIntrinsic = __webpack_require__(1801); 135 136 var callBind = __webpack_require__(9961); 137 138 var $indexOf = callBind(GetIntrinsic('String.prototype.indexOf')); 139 140 module.exports = function callBoundIntrinsic(name, allowMissing) { 141 var intrinsic = GetIntrinsic(name, !!allowMissing); 142 if (typeof intrinsic === 'function' && $indexOf(name, '.prototype.') > -1) { 143 return callBind(intrinsic); 144 } 145 return intrinsic; 146 }; 147 148 149 /***/ }), 150 151 /***/ 9961: 152 /***/ (function(module, __unused_webpack_exports, __webpack_require__) { 153 154 "use strict"; 155 156 157 var bind = __webpack_require__(1930); 158 var GetIntrinsic = __webpack_require__(1801); 159 160 var $apply = GetIntrinsic('%Function.prototype.apply%'); 161 var $call = GetIntrinsic('%Function.prototype.call%'); 162 var $reflectApply = GetIntrinsic('%Reflect.apply%', true) || bind.call($call, $apply); 163 164 var $gOPD = GetIntrinsic('%Object.getOwnPropertyDescriptor%', true); 165 var $defineProperty = GetIntrinsic('%Object.defineProperty%', true); 166 var $max = GetIntrinsic('%Math.max%'); 167 168 if ($defineProperty) { 169 try { 170 $defineProperty({}, 'a', { value: 1 }); 171 } catch (e) { 172 // IE 8 has a broken defineProperty 173 $defineProperty = null; 174 } 175 } 176 177 module.exports = function callBind(originalFunction) { 178 var func = $reflectApply(bind, $call, arguments); 179 if ($gOPD && $defineProperty) { 180 var desc = $gOPD(func, 'length'); 181 if (desc.configurable) { 182 // original length, plus the receiver, minus any additional arguments (after the receiver) 183 $defineProperty( 184 func, 185 'length', 186 { value: 1 + $max(0, originalFunction.length - (arguments.length - 1)) } 187 ); 188 } 189 } 190 return func; 191 }; 192 193 var applyBind = function applyBind() { 194 return $reflectApply(bind, $apply, arguments); 195 }; 196 197 if ($defineProperty) { 198 $defineProperty(module.exports, 'apply', { value: applyBind }); 199 } else { 200 module.exports.apply = applyBind; 201 } 202 203 204 /***/ }), 205 206 /***/ 4219: 207 /***/ (function(module, __unused_webpack_exports, __webpack_require__) { 208 209 "use strict"; 210 211 212 var undefined; 213 214 var $SyntaxError = SyntaxError; 215 var $Function = Function; 216 var $TypeError = TypeError; 217 218 // eslint-disable-next-line consistent-return 219 var getEvalledConstructor = function (expressionSyntax) { 220 try { 221 return $Function('"use strict"; return (' + expressionSyntax + ').constructor;')(); 222 } catch (e) {} 223 }; 224 225 var $gOPD = Object.getOwnPropertyDescriptor; 226 if ($gOPD) { 227 try { 228 $gOPD({}, ''); 229 } catch (e) { 230 $gOPD = null; // this is IE 8, which has a broken gOPD 231 } 232 } 233 234 var throwTypeError = function () { 235 throw new $TypeError(); 236 }; 237 var ThrowTypeError = $gOPD 238 ? (function () { 239 try { 240 // eslint-disable-next-line no-unused-expressions, no-caller, no-restricted-properties 241 arguments.callee; // IE 8 does not throw here 242 return throwTypeError; 243 } catch (calleeThrows) { 244 try { 245 // IE 8 throws on Object.getOwnPropertyDescriptor(arguments, '') 246 return $gOPD(arguments, 'callee').get; 247 } catch (gOPDthrows) { 248 return throwTypeError; 249 } 250 } 251 }()) 252 : throwTypeError; 253 254 var hasSymbols = __webpack_require__(9828)(); 255 256 var getProto = Object.getPrototypeOf || function (x) { return x.__proto__; }; // eslint-disable-line no-proto 257 258 var needsEval = {}; 259 260 var TypedArray = typeof Uint8Array === 'undefined' ? undefined : getProto(Uint8Array); 261 262 var INTRINSICS = { 263 '%AggregateError%': typeof AggregateError === 'undefined' ? undefined : AggregateError, 264 '%Array%': Array, 265 '%ArrayBuffer%': typeof ArrayBuffer === 'undefined' ? undefined : ArrayBuffer, 266 '%ArrayIteratorPrototype%': hasSymbols ? getProto([][Symbol.iterator]()) : undefined, 267 '%AsyncFromSyncIteratorPrototype%': undefined, 268 '%AsyncFunction%': needsEval, 269 '%AsyncGenerator%': needsEval, 270 '%AsyncGeneratorFunction%': needsEval, 271 '%AsyncIteratorPrototype%': needsEval, 272 '%Atomics%': typeof Atomics === 'undefined' ? undefined : Atomics, 273 '%BigInt%': typeof BigInt === 'undefined' ? undefined : BigInt, 274 '%Boolean%': Boolean, 275 '%DataView%': typeof DataView === 'undefined' ? undefined : DataView, 276 '%Date%': Date, 277 '%decodeURI%': decodeURI, 278 '%decodeURIComponent%': decodeURIComponent, 279 '%encodeURI%': encodeURI, 280 '%encodeURIComponent%': encodeURIComponent, 281 '%Error%': Error, 282 '%eval%': eval, // eslint-disable-line no-eval 283 '%EvalError%': EvalError, 284 '%Float32Array%': typeof Float32Array === 'undefined' ? undefined : Float32Array, 285 '%Float64Array%': typeof Float64Array === 'undefined' ? undefined : Float64Array, 286 '%FinalizationRegistry%': typeof FinalizationRegistry === 'undefined' ? undefined : FinalizationRegistry, 287 '%Function%': $Function, 288 '%GeneratorFunction%': needsEval, 289 '%Int8Array%': typeof Int8Array === 'undefined' ? undefined : Int8Array, 290 '%Int16Array%': typeof Int16Array === 'undefined' ? undefined : Int16Array, 291 '%Int32Array%': typeof Int32Array === 'undefined' ? undefined : Int32Array, 292 '%isFinite%': isFinite, 293 '%isNaN%': isNaN, 294 '%IteratorPrototype%': hasSymbols ? getProto(getProto([][Symbol.iterator]())) : undefined, 295 '%JSON%': typeof JSON === 'object' ? JSON : undefined, 296 '%Map%': typeof Map === 'undefined' ? undefined : Map, 297 '%MapIteratorPrototype%': typeof Map === 'undefined' || !hasSymbols ? undefined : getProto(new Map()[Symbol.iterator]()), 298 '%Math%': Math, 299 '%Number%': Number, 300 '%Object%': Object, 301 '%parseFloat%': parseFloat, 302 '%parseInt%': parseInt, 303 '%Promise%': typeof Promise === 'undefined' ? undefined : Promise, 304 '%Proxy%': typeof Proxy === 'undefined' ? undefined : Proxy, 305 '%RangeError%': RangeError, 306 '%ReferenceError%': ReferenceError, 307 '%Reflect%': typeof Reflect === 'undefined' ? undefined : Reflect, 308 '%RegExp%': RegExp, 309 '%Set%': typeof Set === 'undefined' ? undefined : Set, 310 '%SetIteratorPrototype%': typeof Set === 'undefined' || !hasSymbols ? undefined : getProto(new Set()[Symbol.iterator]()), 311 '%SharedArrayBuffer%': typeof SharedArrayBuffer === 'undefined' ? undefined : SharedArrayBuffer, 312 '%String%': String, 313 '%StringIteratorPrototype%': hasSymbols ? getProto(''[Symbol.iterator]()) : undefined, 314 '%Symbol%': hasSymbols ? Symbol : undefined, 315 '%SyntaxError%': $SyntaxError, 316 '%ThrowTypeError%': ThrowTypeError, 317 '%TypedArray%': TypedArray, 318 '%TypeError%': $TypeError, 319 '%Uint8Array%': typeof Uint8Array === 'undefined' ? undefined : Uint8Array, 320 '%Uint8ClampedArray%': typeof Uint8ClampedArray === 'undefined' ? undefined : Uint8ClampedArray, 321 '%Uint16Array%': typeof Uint16Array === 'undefined' ? undefined : Uint16Array, 322 '%Uint32Array%': typeof Uint32Array === 'undefined' ? undefined : Uint32Array, 323 '%URIError%': URIError, 324 '%WeakMap%': typeof WeakMap === 'undefined' ? undefined : WeakMap, 325 '%WeakRef%': typeof WeakRef === 'undefined' ? undefined : WeakRef, 326 '%WeakSet%': typeof WeakSet === 'undefined' ? undefined : WeakSet 327 }; 328 329 var doEval = function doEval(name) { 330 var value; 331 if (name === '%AsyncFunction%') { 332 value = getEvalledConstructor('async function () {}'); 333 } else if (name === '%GeneratorFunction%') { 334 value = getEvalledConstructor('function* () {}'); 335 } else if (name === '%AsyncGeneratorFunction%') { 336 value = getEvalledConstructor('async function* () {}'); 337 } else if (name === '%AsyncGenerator%') { 338 var fn = doEval('%AsyncGeneratorFunction%'); 339 if (fn) { 340 value = fn.prototype; 341 } 342 } else if (name === '%AsyncIteratorPrototype%') { 343 var gen = doEval('%AsyncGenerator%'); 344 if (gen) { 345 value = getProto(gen.prototype); 346 } 347 } 348 349 INTRINSICS[name] = value; 350 351 return value; 352 }; 353 354 var LEGACY_ALIASES = { 355 '%ArrayBufferPrototype%': ['ArrayBuffer', 'prototype'], 356 '%ArrayPrototype%': ['Array', 'prototype'], 357 '%ArrayProto_entries%': ['Array', 'prototype', 'entries'], 358 '%ArrayProto_forEach%': ['Array', 'prototype', 'forEach'], 359 '%ArrayProto_keys%': ['Array', 'prototype', 'keys'], 360 '%ArrayProto_values%': ['Array', 'prototype', 'values'], 361 '%AsyncFunctionPrototype%': ['AsyncFunction', 'prototype'], 362 '%AsyncGenerator%': ['AsyncGeneratorFunction', 'prototype'], 363 '%AsyncGeneratorPrototype%': ['AsyncGeneratorFunction', 'prototype', 'prototype'], 364 '%BooleanPrototype%': ['Boolean', 'prototype'], 365 '%DataViewPrototype%': ['DataView', 'prototype'], 366 '%DatePrototype%': ['Date', 'prototype'], 367 '%ErrorPrototype%': ['Error', 'prototype'], 368 '%EvalErrorPrototype%': ['EvalError', 'prototype'], 369 '%Float32ArrayPrototype%': ['Float32Array', 'prototype'], 370 '%Float64ArrayPrototype%': ['Float64Array', 'prototype'], 371 '%FunctionPrototype%': ['Function', 'prototype'], 372 '%Generator%': ['GeneratorFunction', 'prototype'], 373 '%GeneratorPrototype%': ['GeneratorFunction', 'prototype', 'prototype'], 374 '%Int8ArrayPrototype%': ['Int8Array', 'prototype'], 375 '%Int16ArrayPrototype%': ['Int16Array', 'prototype'], 376 '%Int32ArrayPrototype%': ['Int32Array', 'prototype'], 377 '%JSONParse%': ['JSON', 'parse'], 378 '%JSONStringify%': ['JSON', 'stringify'], 379 '%MapPrototype%': ['Map', 'prototype'], 380 '%NumberPrototype%': ['Number', 'prototype'], 381 '%ObjectPrototype%': ['Object', 'prototype'], 382 '%ObjProto_toString%': ['Object', 'prototype', 'toString'], 383 '%ObjProto_valueOf%': ['Object', 'prototype', 'valueOf'], 384 '%PromisePrototype%': ['Promise', 'prototype'], 385 '%PromiseProto_then%': ['Promise', 'prototype', 'then'], 386 '%Promise_all%': ['Promise', 'all'], 387 '%Promise_reject%': ['Promise', 'reject'], 388 '%Promise_resolve%': ['Promise', 'resolve'], 389 '%RangeErrorPrototype%': ['RangeError', 'prototype'], 390 '%ReferenceErrorPrototype%': ['ReferenceError', 'prototype'], 391 '%RegExpPrototype%': ['RegExp', 'prototype'], 392 '%SetPrototype%': ['Set', 'prototype'], 393 '%SharedArrayBufferPrototype%': ['SharedArrayBuffer', 'prototype'], 394 '%StringPrototype%': ['String', 'prototype'], 395 '%SymbolPrototype%': ['Symbol', 'prototype'], 396 '%SyntaxErrorPrototype%': ['SyntaxError', 'prototype'], 397 '%TypedArrayPrototype%': ['TypedArray', 'prototype'], 398 '%TypeErrorPrototype%': ['TypeError', 'prototype'], 399 '%Uint8ArrayPrototype%': ['Uint8Array', 'prototype'], 400 '%Uint8ClampedArrayPrototype%': ['Uint8ClampedArray', 'prototype'], 401 '%Uint16ArrayPrototype%': ['Uint16Array', 'prototype'], 402 '%Uint32ArrayPrototype%': ['Uint32Array', 'prototype'], 403 '%URIErrorPrototype%': ['URIError', 'prototype'], 404 '%WeakMapPrototype%': ['WeakMap', 'prototype'], 405 '%WeakSetPrototype%': ['WeakSet', 'prototype'] 406 }; 407 408 var bind = __webpack_require__(1930); 409 var hasOwn = __webpack_require__(9284); 410 var $concat = bind.call(Function.call, Array.prototype.concat); 411 var $spliceApply = bind.call(Function.apply, Array.prototype.splice); 412 var $replace = bind.call(Function.call, String.prototype.replace); 413 var $strSlice = bind.call(Function.call, String.prototype.slice); 414 415 /* adapted from https://github.com/lodash/lodash/blob/4.17.15/dist/lodash.js#L6735-L6744 */ 416 var rePropName = /[^%.[\]]+|\[(?:(-?\d+(?:\.\d+)?)|(["'])((?:(?!\2)[^\\]|\\.)*?)\2)\]|(?=(?:\.|\[\])(?:\.|\[\]|%$))/g; 417 var reEscapeChar = /\\(\\)?/g; /** Used to match backslashes in property paths. */ 418 var stringToPath = function stringToPath(string) { 419 var first = $strSlice(string, 0, 1); 420 var last = $strSlice(string, -1); 421 if (first === '%' && last !== '%') { 422 throw new $SyntaxError('invalid intrinsic syntax, expected closing `%`'); 423 } else if (last === '%' && first !== '%') { 424 throw new $SyntaxError('invalid intrinsic syntax, expected opening `%`'); 425 } 426 var result = []; 427 $replace(string, rePropName, function (match, number, quote, subString) { 428 result[result.length] = quote ? $replace(subString, reEscapeChar, '$1') : number || match; 429 }); 430 return result; 431 }; 432 /* end adaptation */ 433 434 var getBaseIntrinsic = function getBaseIntrinsic(name, allowMissing) { 435 var intrinsicName = name; 436 var alias; 437 if (hasOwn(LEGACY_ALIASES, intrinsicName)) { 438 alias = LEGACY_ALIASES[intrinsicName]; 439 intrinsicName = '%' + alias[0] + '%'; 440 } 441 442 if (hasOwn(INTRINSICS, intrinsicName)) { 443 var value = INTRINSICS[intrinsicName]; 444 if (value === needsEval) { 445 value = doEval(intrinsicName); 446 } 447 if (typeof value === 'undefined' && !allowMissing) { 448 throw new $TypeError('intrinsic ' + name + ' exists, but is not available. Please file an issue!'); 449 } 450 451 return { 452 alias: alias, 453 name: intrinsicName, 454 value: value 455 }; 456 } 457 458 throw new $SyntaxError('intrinsic ' + name + ' does not exist!'); 459 }; 460 461 module.exports = function GetIntrinsic(name, allowMissing) { 462 if (typeof name !== 'string' || name.length === 0) { 463 throw new $TypeError('intrinsic name must be a non-empty string'); 464 } 465 if (arguments.length > 1 && typeof allowMissing !== 'boolean') { 466 throw new $TypeError('"allowMissing" argument must be a boolean'); 467 } 468 469 var parts = stringToPath(name); 470 var intrinsicBaseName = parts.length > 0 ? parts[0] : ''; 471 472 var intrinsic = getBaseIntrinsic('%' + intrinsicBaseName + '%', allowMissing); 473 var intrinsicRealName = intrinsic.name; 474 var value = intrinsic.value; 475 var skipFurtherCaching = false; 476 477 var alias = intrinsic.alias; 478 if (alias) { 479 intrinsicBaseName = alias[0]; 480 $spliceApply(parts, $concat([0, 1], alias)); 481 } 482 483 for (var i = 1, isOwn = true; i < parts.length; i += 1) { 484 var part = parts[i]; 485 var first = $strSlice(part, 0, 1); 486 var last = $strSlice(part, -1); 487 if ( 488 ( 489 (first === '"' || first === "'" || first === '`') 490 || (last === '"' || last === "'" || last === '`') 491 ) 492 && first !== last 493 ) { 494 throw new $SyntaxError('property names with quotes must have matching quotes'); 495 } 496 if (part === 'constructor' || !isOwn) { 497 skipFurtherCaching = true; 498 } 499 500 intrinsicBaseName += '.' + part; 501 intrinsicRealName = '%' + intrinsicBaseName + '%'; 502 503 if (hasOwn(INTRINSICS, intrinsicRealName)) { 504 value = INTRINSICS[intrinsicRealName]; 505 } else if (value != null) { 506 if (!(part in value)) { 507 if (!allowMissing) { 508 throw new $TypeError('base intrinsic for ' + name + ' exists, but the property is not available.'); 509 } 510 return void undefined; 511 } 512 if ($gOPD && (i + 1) >= parts.length) { 513 var desc = $gOPD(value, part); 514 isOwn = !!desc; 515 516 // By convention, when a data property is converted to an accessor 517 // property to emulate a data property that does not suffer from 518 // the override mistake, that accessor's getter is marked with 519 // an `originalValue` property. Here, when we detect this, we 520 // uphold the illusion by pretending to see that original data 521 // property, i.e., returning the value rather than the getter 522 // itself. 523 if (isOwn && 'get' in desc && !('originalValue' in desc.get)) { 524 value = desc.get; 525 } else { 526 value = value[part]; 527 } 528 } else { 529 isOwn = hasOwn(value, part); 530 value = value[part]; 531 } 532 533 if (isOwn && !skipFurtherCaching) { 534 INTRINSICS[intrinsicRealName] = value; 535 } 536 } 537 } 538 return value; 539 }; 540 541 542 /***/ }), 543 544 /***/ 9828: 545 /***/ (function(module, __unused_webpack_exports, __webpack_require__) { 546 547 "use strict"; 548 549 550 var origSymbol = typeof Symbol !== 'undefined' && Symbol; 551 var hasSymbolSham = __webpack_require__(5960); 552 553 module.exports = function hasNativeSymbols() { 554 if (typeof origSymbol !== 'function') { return false; } 555 if (typeof Symbol !== 'function') { return false; } 556 if (typeof origSymbol('foo') !== 'symbol') { return false; } 557 if (typeof Symbol('bar') !== 'symbol') { return false; } 558 559 return hasSymbolSham(); 560 }; 561 562 563 /***/ }), 564 565 /***/ 5960: 566 /***/ (function(module) { 567 568 "use strict"; 569 570 571 /* eslint complexity: [2, 18], max-statements: [2, 33] */ 572 module.exports = function hasSymbols() { 573 if (typeof Symbol !== 'function' || typeof Object.getOwnPropertySymbols !== 'function') { return false; } 574 if (typeof Symbol.iterator === 'symbol') { return true; } 575 576 var obj = {}; 577 var sym = Symbol('test'); 578 var symObj = Object(sym); 579 if (typeof sym === 'string') { return false; } 580 581 if (Object.prototype.toString.call(sym) !== '[object Symbol]') { return false; } 582 if (Object.prototype.toString.call(symObj) !== '[object Symbol]') { return false; } 583 584 // temp disabled per https://github.com/ljharb/object.assign/issues/17 585 // if (sym instanceof Symbol) { return false; } 586 // temp disabled per https://github.com/WebReflection/get-own-property-symbols/issues/4 587 // if (!(symObj instanceof Symbol)) { return false; } 588 589 // if (typeof Symbol.prototype.toString !== 'function') { return false; } 590 // if (String(sym) !== Symbol.prototype.toString.call(sym)) { return false; } 591 592 var symVal = 42; 593 obj[sym] = symVal; 594 for (sym in obj) { return false; } // eslint-disable-line no-restricted-syntax, no-unreachable-loop 595 if (typeof Object.keys === 'function' && Object.keys(obj).length !== 0) { return false; } 596 597 if (typeof Object.getOwnPropertyNames === 'function' && Object.getOwnPropertyNames(obj).length !== 0) { return false; } 598 599 var syms = Object.getOwnPropertySymbols(obj); 600 if (syms.length !== 1 || syms[0] !== sym) { return false; } 601 602 if (!Object.prototype.propertyIsEnumerable.call(obj, sym)) { return false; } 603 604 if (typeof Object.getOwnPropertyDescriptor === 'function') { 605 var descriptor = Object.getOwnPropertyDescriptor(obj, sym); 606 if (descriptor.value !== symVal || descriptor.enumerable !== true) { return false; } 607 } 608 609 return true; 610 }; 611 612 613 /***/ }), 614 615 /***/ 4363: 616 /***/ (function(module) { 617 618 "use strict"; 619 620 621 var fnToStr = Function.prototype.toString; 622 var reflectApply = typeof Reflect === 'object' && Reflect !== null && Reflect.apply; 623 var badArrayLike; 624 var isCallableMarker; 625 if (typeof reflectApply === 'function' && typeof Object.defineProperty === 'function') { 626 try { 627 badArrayLike = Object.defineProperty({}, 'length', { 628 get: function () { 629 throw isCallableMarker; 630 } 631 }); 632 isCallableMarker = {}; 633 // eslint-disable-next-line no-throw-literal 634 reflectApply(function () { throw 42; }, null, badArrayLike); 635 } catch (_) { 636 if (_ !== isCallableMarker) { 637 reflectApply = null; 638 } 639 } 640 } else { 641 reflectApply = null; 642 } 643 644 var constructorRegex = /^\s*class\b/; 645 var isES6ClassFn = function isES6ClassFunction(value) { 646 try { 647 var fnStr = fnToStr.call(value); 648 return constructorRegex.test(fnStr); 649 } catch (e) { 650 return false; // not a function 651 } 652 }; 653 654 var tryFunctionObject = function tryFunctionToStr(value) { 655 try { 656 if (isES6ClassFn(value)) { return false; } 657 fnToStr.call(value); 658 return true; 659 } catch (e) { 660 return false; 661 } 662 }; 663 var toStr = Object.prototype.toString; 664 var fnClass = '[object Function]'; 665 var genClass = '[object GeneratorFunction]'; 666 var hasToStringTag = typeof Symbol === 'function' && !!Symbol.toStringTag; // better: use `has-tostringtag` 667 /* globals document: false */ 668 var documentDotAll = typeof document === 'object' && typeof document.all === 'undefined' && document.all !== undefined ? document.all : {}; 669 670 module.exports = reflectApply 671 ? function isCallable(value) { 672 if (value === documentDotAll) { return true; } 673 if (!value) { return false; } 674 if (typeof value !== 'function' && typeof value !== 'object') { return false; } 675 if (typeof value === 'function' && !value.prototype) { return true; } 676 try { 677 reflectApply(value, null, badArrayLike); 678 } catch (e) { 679 if (e !== isCallableMarker) { return false; } 680 } 681 return !isES6ClassFn(value); 682 } 683 : function isCallable(value) { 684 if (value === documentDotAll) { return true; } 685 if (!value) { return false; } 686 if (typeof value !== 'function' && typeof value !== 'object') { return false; } 687 if (typeof value === 'function' && !value.prototype) { return true; } 688 if (hasToStringTag) { return tryFunctionObject(value); } 689 if (isES6ClassFn(value)) { return false; } 690 var strClass = toStr.call(value); 691 return strClass === fnClass || strClass === genClass; 692 }; 693 694 695 /***/ }), 696 697 /***/ 4221: 698 /***/ (function(module, __unused_webpack_exports, __webpack_require__) { 699 700 "use strict"; 701 702 703 var callBound = __webpack_require__(9630); 704 var hasToStringTag = __webpack_require__(4111)(); 705 var has; 706 var $exec; 707 var isRegexMarker; 708 var badStringifier; 709 710 if (hasToStringTag) { 711 has = callBound('Object.prototype.hasOwnProperty'); 712 $exec = callBound('RegExp.prototype.exec'); 713 isRegexMarker = {}; 714 715 var throwRegexMarker = function () { 716 throw isRegexMarker; 717 }; 718 badStringifier = { 719 toString: throwRegexMarker, 720 valueOf: throwRegexMarker 721 }; 722 723 if (typeof Symbol.toPrimitive === 'symbol') { 724 badStringifier[Symbol.toPrimitive] = throwRegexMarker; 725 } 726 } 727 728 var $toString = callBound('Object.prototype.toString'); 729 var gOPD = Object.getOwnPropertyDescriptor; 730 var regexClass = '[object RegExp]'; 731 732 module.exports = hasToStringTag 733 // eslint-disable-next-line consistent-return 734 ? function isRegex(value) { 735 if (!value || typeof value !== 'object') { 736 return false; 737 } 738 739 var descriptor = gOPD(value, 'lastIndex'); 740 var hasLastIndexDataProperty = descriptor && has(descriptor, 'value'); 741 if (!hasLastIndexDataProperty) { 742 return false; 743 } 744 745 try { 746 $exec(value, badStringifier); 747 } catch (e) { 748 return e === isRegexMarker; 749 } 750 } 751 : function isRegex(value) { 752 // In older browsers, typeof regex incorrectly returns 'function' 753 if (!value || (typeof value !== 'object' && typeof value !== 'function')) { 754 return false; 755 } 756 757 return $toString(value) === regexClass; 758 }; 759 760 761 /***/ }), 762 763 /***/ 3205: 764 /***/ (function(module, __unused_webpack_exports, __webpack_require__) { 765 766 var hasMap = typeof Map === 'function' && Map.prototype; 767 var mapSizeDescriptor = Object.getOwnPropertyDescriptor && hasMap ? Object.getOwnPropertyDescriptor(Map.prototype, 'size') : null; 768 var mapSize = hasMap && mapSizeDescriptor && typeof mapSizeDescriptor.get === 'function' ? mapSizeDescriptor.get : null; 769 var mapForEach = hasMap && Map.prototype.forEach; 770 var hasSet = typeof Set === 'function' && Set.prototype; 771 var setSizeDescriptor = Object.getOwnPropertyDescriptor && hasSet ? Object.getOwnPropertyDescriptor(Set.prototype, 'size') : null; 772 var setSize = hasSet && setSizeDescriptor && typeof setSizeDescriptor.get === 'function' ? setSizeDescriptor.get : null; 773 var setForEach = hasSet && Set.prototype.forEach; 774 var hasWeakMap = typeof WeakMap === 'function' && WeakMap.prototype; 775 var weakMapHas = hasWeakMap ? WeakMap.prototype.has : null; 776 var hasWeakSet = typeof WeakSet === 'function' && WeakSet.prototype; 777 var weakSetHas = hasWeakSet ? WeakSet.prototype.has : null; 778 var hasWeakRef = typeof WeakRef === 'function' && WeakRef.prototype; 779 var weakRefDeref = hasWeakRef ? WeakRef.prototype.deref : null; 780 var booleanValueOf = Boolean.prototype.valueOf; 781 var objectToString = Object.prototype.toString; 782 var functionToString = Function.prototype.toString; 783 var $match = String.prototype.match; 784 var $slice = String.prototype.slice; 785 var $replace = String.prototype.replace; 786 var $toUpperCase = String.prototype.toUpperCase; 787 var $toLowerCase = String.prototype.toLowerCase; 788 var $test = RegExp.prototype.test; 789 var $concat = Array.prototype.concat; 790 var $join = Array.prototype.join; 791 var $arrSlice = Array.prototype.slice; 792 var $floor = Math.floor; 793 var bigIntValueOf = typeof BigInt === 'function' ? BigInt.prototype.valueOf : null; 794 var gOPS = Object.getOwnPropertySymbols; 795 var symToString = typeof Symbol === 'function' && typeof Symbol.iterator === 'symbol' ? Symbol.prototype.toString : null; 796 var hasShammedSymbols = typeof Symbol === 'function' && typeof Symbol.iterator === 'object'; 797 // ie, `has-tostringtag/shams 798 var toStringTag = typeof Symbol === 'function' && Symbol.toStringTag && (typeof Symbol.toStringTag === hasShammedSymbols ? 'object' : 'symbol') 799 ? Symbol.toStringTag 800 : null; 801 var isEnumerable = Object.prototype.propertyIsEnumerable; 802 803 var gPO = (typeof Reflect === 'function' ? Reflect.getPrototypeOf : Object.getPrototypeOf) || ( 804 [].__proto__ === Array.prototype // eslint-disable-line no-proto 805 ? function (O) { 806 return O.__proto__; // eslint-disable-line no-proto 807 } 808 : null 809 ); 810 811 function addNumericSeparator(num, str) { 812 if ( 813 num === Infinity 814 || num === -Infinity 815 || num !== num 816 || (num && num > -1000 && num < 1000) 817 || $test.call(/e/, str) 818 ) { 819 return str; 820 } 821 var sepRegex = /[0-9](?=(?:[0-9]{3})+(?![0-9]))/g; 822 if (typeof num === 'number') { 823 var int = num < 0 ? -$floor(-num) : $floor(num); // trunc(num) 824 if (int !== num) { 825 var intStr = String(int); 826 var dec = $slice.call(str, intStr.length + 1); 827 return $replace.call(intStr, sepRegex, '$&_') + '.' + $replace.call($replace.call(dec, /([0-9]{3})/g, '$&_'), /_$/, ''); 828 } 829 } 830 return $replace.call(str, sepRegex, '$&_'); 831 } 832 833 var inspectCustom = (__webpack_require__(4080).custom); 834 var inspectSymbol = inspectCustom && isSymbol(inspectCustom) ? inspectCustom : null; 835 836 module.exports = function inspect_(obj, options, depth, seen) { 837 var opts = options || {}; 838 839 if (has(opts, 'quoteStyle') && (opts.quoteStyle !== 'single' && opts.quoteStyle !== 'double')) { 840 throw new TypeError('option "quoteStyle" must be "single" or "double"'); 841 } 842 if ( 843 has(opts, 'maxStringLength') && (typeof opts.maxStringLength === 'number' 844 ? opts.maxStringLength < 0 && opts.maxStringLength !== Infinity 845 : opts.maxStringLength !== null 846 ) 847 ) { 848 throw new TypeError('option "maxStringLength", if provided, must be a positive integer, Infinity, or `null`'); 849 } 850 var customInspect = has(opts, 'customInspect') ? opts.customInspect : true; 851 if (typeof customInspect !== 'boolean' && customInspect !== 'symbol') { 852 throw new TypeError('option "customInspect", if provided, must be `true`, `false`, or `\'symbol\'`'); 853 } 854 855 if ( 856 has(opts, 'indent') 857 && opts.indent !== null 858 && opts.indent !== '\t' 859 && !(parseInt(opts.indent, 10) === opts.indent && opts.indent > 0) 860 ) { 861 throw new TypeError('option "indent" must be "\\t", an integer > 0, or `null`'); 862 } 863 if (has(opts, 'numericSeparator') && typeof opts.numericSeparator !== 'boolean') { 864 throw new TypeError('option "numericSeparator", if provided, must be `true` or `false`'); 865 } 866 var numericSeparator = opts.numericSeparator; 867 868 if (typeof obj === 'undefined') { 869 return 'undefined'; 870 } 871 if (obj === null) { 872 return 'null'; 873 } 874 if (typeof obj === 'boolean') { 875 return obj ? 'true' : 'false'; 876 } 877 878 if (typeof obj === 'string') { 879 return inspectString(obj, opts); 880 } 881 if (typeof obj === 'number') { 882 if (obj === 0) { 883 return Infinity / obj > 0 ? '0' : '-0'; 884 } 885 var str = String(obj); 886 return numericSeparator ? addNumericSeparator(obj, str) : str; 887 } 888 if (typeof obj === 'bigint') { 889 var bigIntStr = String(obj) + 'n'; 890 return numericSeparator ? addNumericSeparator(obj, bigIntStr) : bigIntStr; 891 } 892 893 var maxDepth = typeof opts.depth === 'undefined' ? 5 : opts.depth; 894 if (typeof depth === 'undefined') { depth = 0; } 895 if (depth >= maxDepth && maxDepth > 0 && typeof obj === 'object') { 896 return isArray(obj) ? '[Array]' : '[Object]'; 897 } 898 899 var indent = getIndent(opts, depth); 900 901 if (typeof seen === 'undefined') { 902 seen = []; 903 } else if (indexOf(seen, obj) >= 0) { 904 return '[Circular]'; 905 } 906 907 function inspect(value, from, noIndent) { 908 if (from) { 909 seen = $arrSlice.call(seen); 910 seen.push(from); 911 } 912 if (noIndent) { 913 var newOpts = { 914 depth: opts.depth 915 }; 916 if (has(opts, 'quoteStyle')) { 917 newOpts.quoteStyle = opts.quoteStyle; 918 } 919 return inspect_(value, newOpts, depth + 1, seen); 920 } 921 return inspect_(value, opts, depth + 1, seen); 922 } 923 924 if (typeof obj === 'function') { 925 var name = nameOf(obj); 926 var keys = arrObjKeys(obj, inspect); 927 return '[Function' + (name ? ': ' + name : ' (anonymous)') + ']' + (keys.length > 0 ? ' { ' + $join.call(keys, ', ') + ' }' : ''); 928 } 929 if (isSymbol(obj)) { 930 var symString = hasShammedSymbols ? $replace.call(String(obj), /^(Symbol\(.*\))_[^)]*$/, '$1') : symToString.call(obj); 931 return typeof obj === 'object' && !hasShammedSymbols ? markBoxed(symString) : symString; 932 } 933 if (isElement(obj)) { 934 var s = '<' + $toLowerCase.call(String(obj.nodeName)); 935 var attrs = obj.attributes || []; 936 for (var i = 0; i < attrs.length; i++) { 937 s += ' ' + attrs[i].name + '=' + wrapQuotes(quote(attrs[i].value), 'double', opts); 938 } 939 s += '>'; 940 if (obj.childNodes && obj.childNodes.length) { s += '...'; } 941 s += '</' + $toLowerCase.call(String(obj.nodeName)) + '>'; 942 return s; 943 } 944 if (isArray(obj)) { 945 if (obj.length === 0) { return '[]'; } 946 var xs = arrObjKeys(obj, inspect); 947 if (indent && !singleLineValues(xs)) { 948 return '[' + indentedJoin(xs, indent) + ']'; 949 } 950 return '[ ' + $join.call(xs, ', ') + ' ]'; 951 } 952 if (isError(obj)) { 953 var parts = arrObjKeys(obj, inspect); 954 if ('cause' in obj && !isEnumerable.call(obj, 'cause')) { 955 return '{ [' + String(obj) + '] ' + $join.call($concat.call('[cause]: ' + inspect(obj.cause), parts), ', ') + ' }'; 956 } 957 if (parts.length === 0) { return '[' + String(obj) + ']'; } 958 return '{ [' + String(obj) + '] ' + $join.call(parts, ', ') + ' }'; 959 } 960 if (typeof obj === 'object' && customInspect) { 961 if (inspectSymbol && typeof obj[inspectSymbol] === 'function') { 962 return obj[inspectSymbol](); 963 } else if (customInspect !== 'symbol' && typeof obj.inspect === 'function') { 964 return obj.inspect(); 965 } 966 } 967 if (isMap(obj)) { 968 var mapParts = []; 969 mapForEach.call(obj, function (value, key) { 970 mapParts.push(inspect(key, obj, true) + ' => ' + inspect(value, obj)); 971 }); 972 return collectionOf('Map', mapSize.call(obj), mapParts, indent); 973 } 974 if (isSet(obj)) { 975 var setParts = []; 976 setForEach.call(obj, function (value) { 977 setParts.push(inspect(value, obj)); 978 }); 979 return collectionOf('Set', setSize.call(obj), setParts, indent); 980 } 981 if (isWeakMap(obj)) { 982 return weakCollectionOf('WeakMap'); 983 } 984 if (isWeakSet(obj)) { 985 return weakCollectionOf('WeakSet'); 986 } 987 if (isWeakRef(obj)) { 988 return weakCollectionOf('WeakRef'); 989 } 990 if (isNumber(obj)) { 991 return markBoxed(inspect(Number(obj))); 992 } 993 if (isBigInt(obj)) { 994 return markBoxed(inspect(bigIntValueOf.call(obj))); 995 } 996 if (isBoolean(obj)) { 997 return markBoxed(booleanValueOf.call(obj)); 998 } 999 if (isString(obj)) { 1000 return markBoxed(inspect(String(obj))); 1001 } 1002 if (!isDate(obj) && !isRegExp(obj)) { 1003 var ys = arrObjKeys(obj, inspect); 1004 var isPlainObject = gPO ? gPO(obj) === Object.prototype : obj instanceof Object || obj.constructor === Object; 1005 var protoTag = obj instanceof Object ? '' : 'null prototype'; 1006 var stringTag = !isPlainObject && toStringTag && Object(obj) === obj && toStringTag in obj ? $slice.call(toStr(obj), 8, -1) : protoTag ? 'Object' : ''; 1007 var constructorTag = isPlainObject || typeof obj.constructor !== 'function' ? '' : obj.constructor.name ? obj.constructor.name + ' ' : ''; 1008 var tag = constructorTag + (stringTag || protoTag ? '[' + $join.call($concat.call([], stringTag || [], protoTag || []), ': ') + '] ' : ''); 1009 if (ys.length === 0) { return tag + '{}'; } 1010 if (indent) { 1011 return tag + '{' + indentedJoin(ys, indent) + '}'; 1012 } 1013 return tag + '{ ' + $join.call(ys, ', ') + ' }'; 1014 } 1015 return String(obj); 1016 }; 1017 1018 function wrapQuotes(s, defaultStyle, opts) { 1019 var quoteChar = (opts.quoteStyle || defaultStyle) === 'double' ? '"' : "'"; 1020 return quoteChar + s + quoteChar; 1021 } 1022 1023 function quote(s) { 1024 return $replace.call(String(s), /"/g, '"'); 1025 } 1026 1027 function isArray(obj) { return toStr(obj) === '[object Array]' && (!toStringTag || !(typeof obj === 'object' && toStringTag in obj)); } 1028 function isDate(obj) { return toStr(obj) === '[object Date]' && (!toStringTag || !(typeof obj === 'object' && toStringTag in obj)); } 1029 function isRegExp(obj) { return toStr(obj) === '[object RegExp]' && (!toStringTag || !(typeof obj === 'object' && toStringTag in obj)); } 1030 function isError(obj) { return toStr(obj) === '[object Error]' && (!toStringTag || !(typeof obj === 'object' && toStringTag in obj)); } 1031 function isString(obj) { return toStr(obj) === '[object String]' && (!toStringTag || !(typeof obj === 'object' && toStringTag in obj)); } 1032 function isNumber(obj) { return toStr(obj) === '[object Number]' && (!toStringTag || !(typeof obj === 'object' && toStringTag in obj)); } 1033 function isBoolean(obj) { return toStr(obj) === '[object Boolean]' && (!toStringTag || !(typeof obj === 'object' && toStringTag in obj)); } 1034 1035 // Symbol and BigInt do have Symbol.toStringTag by spec, so that can't be used to eliminate false positives 1036 function isSymbol(obj) { 1037 if (hasShammedSymbols) { 1038 return obj && typeof obj === 'object' && obj instanceof Symbol; 1039 } 1040 if (typeof obj === 'symbol') { 1041 return true; 1042 } 1043 if (!obj || typeof obj !== 'object' || !symToString) { 1044 return false; 1045 } 1046 try { 1047 symToString.call(obj); 1048 return true; 1049 } catch (e) {} 1050 return false; 1051 } 1052 1053 function isBigInt(obj) { 1054 if (!obj || typeof obj !== 'object' || !bigIntValueOf) { 1055 return false; 1056 } 1057 try { 1058 bigIntValueOf.call(obj); 1059 return true; 1060 } catch (e) {} 1061 return false; 1062 } 1063 1064 var hasOwn = Object.prototype.hasOwnProperty || function (key) { return key in this; }; 1065 function has(obj, key) { 1066 return hasOwn.call(obj, key); 1067 } 1068 1069 function toStr(obj) { 1070 return objectToString.call(obj); 1071 } 1072 1073 function nameOf(f) { 1074 if (f.name) { return f.name; } 1075 var m = $match.call(functionToString.call(f), /^function\s*([\w$]+)/); 1076 if (m) { return m[1]; } 1077 return null; 1078 } 1079 1080 function indexOf(xs, x) { 1081 if (xs.indexOf) { return xs.indexOf(x); } 1082 for (var i = 0, l = xs.length; i < l; i++) { 1083 if (xs[i] === x) { return i; } 1084 } 1085 return -1; 1086 } 1087 1088 function isMap(x) { 1089 if (!mapSize || !x || typeof x !== 'object') { 1090 return false; 1091 } 1092 try { 1093 mapSize.call(x); 1094 try { 1095 setSize.call(x); 1096 } catch (s) { 1097 return true; 1098 } 1099 return x instanceof Map; // core-js workaround, pre-v2.5.0 1100 } catch (e) {} 1101 return false; 1102 } 1103 1104 function isWeakMap(x) { 1105 if (!weakMapHas || !x || typeof x !== 'object') { 1106 return false; 1107 } 1108 try { 1109 weakMapHas.call(x, weakMapHas); 1110 try { 1111 weakSetHas.call(x, weakSetHas); 1112 } catch (s) { 1113 return true; 1114 } 1115 return x instanceof WeakMap; // core-js workaround, pre-v2.5.0 1116 } catch (e) {} 1117 return false; 1118 } 1119 1120 function isWeakRef(x) { 1121 if (!weakRefDeref || !x || typeof x !== 'object') { 1122 return false; 1123 } 1124 try { 1125 weakRefDeref.call(x); 1126 return true; 1127 } catch (e) {} 1128 return false; 1129 } 1130 1131 function isSet(x) { 1132 if (!setSize || !x || typeof x !== 'object') { 1133 return false; 1134 } 1135 try { 1136 setSize.call(x); 1137 try { 1138 mapSize.call(x); 1139 } catch (m) { 1140 return true; 1141 } 1142 return x instanceof Set; // core-js workaround, pre-v2.5.0 1143 } catch (e) {} 1144 return false; 1145 } 1146 1147 function isWeakSet(x) { 1148 if (!weakSetHas || !x || typeof x !== 'object') { 1149 return false; 1150 } 1151 try { 1152 weakSetHas.call(x, weakSetHas); 1153 try { 1154 weakMapHas.call(x, weakMapHas); 1155 } catch (s) { 1156 return true; 1157 } 1158 return x instanceof WeakSet; // core-js workaround, pre-v2.5.0 1159 } catch (e) {} 1160 return false; 1161 } 1162 1163 function isElement(x) { 1164 if (!x || typeof x !== 'object') { return false; } 1165 if (typeof HTMLElement !== 'undefined' && x instanceof HTMLElement) { 1166 return true; 1167 } 1168 return typeof x.nodeName === 'string' && typeof x.getAttribute === 'function'; 1169 } 1170 1171 function inspectString(str, opts) { 1172 if (str.length > opts.maxStringLength) { 1173 var remaining = str.length - opts.maxStringLength; 1174 var trailer = '... ' + remaining + ' more character' + (remaining > 1 ? 's' : ''); 1175 return inspectString($slice.call(str, 0, opts.maxStringLength), opts) + trailer; 1176 } 1177 // eslint-disable-next-line no-control-regex 1178 var s = $replace.call($replace.call(str, /(['\\])/g, '\\$1'), /[\x00-\x1f]/g, lowbyte); 1179 return wrapQuotes(s, 'single', opts); 1180 } 1181 1182 function lowbyte(c) { 1183 var n = c.charCodeAt(0); 1184 var x = { 1185 8: 'b', 1186 9: 't', 1187 10: 'n', 1188 12: 'f', 1189 13: 'r' 1190 }[n]; 1191 if (x) { return '\\' + x; } 1192 return '\\x' + (n < 0x10 ? '0' : '') + $toUpperCase.call(n.toString(16)); 1193 } 1194 1195 function markBoxed(str) { 1196 return 'Object(' + str + ')'; 1197 } 1198 1199 function weakCollectionOf(type) { 1200 return type + ' { ? }'; 1201 } 1202 1203 function collectionOf(type, size, entries, indent) { 1204 var joinedEntries = indent ? indentedJoin(entries, indent) : $join.call(entries, ', '); 1205 return type + ' (' + size + ') {' + joinedEntries + '}'; 1206 } 1207 1208 function singleLineValues(xs) { 1209 for (var i = 0; i < xs.length; i++) { 1210 if (indexOf(xs[i], '\n') >= 0) { 1211 return false; 1212 } 1213 } 1214 return true; 1215 } 1216 1217 function getIndent(opts, depth) { 1218 var baseIndent; 1219 if (opts.indent === '\t') { 1220 baseIndent = '\t'; 1221 } else if (typeof opts.indent === 'number' && opts.indent > 0) { 1222 baseIndent = $join.call(Array(opts.indent + 1), ' '); 1223 } else { 1224 return null; 1225 } 1226 return { 1227 base: baseIndent, 1228 prev: $join.call(Array(depth + 1), baseIndent) 1229 }; 1230 } 1231 1232 function indentedJoin(xs, indent) { 1233 if (xs.length === 0) { return ''; } 1234 var lineJoiner = '\n' + indent.prev + indent.base; 1235 return lineJoiner + $join.call(xs, ',' + lineJoiner) + '\n' + indent.prev; 1236 } 1237 1238 function arrObjKeys(obj, inspect) { 1239 var isArr = isArray(obj); 1240 var xs = []; 1241 if (isArr) { 1242 xs.length = obj.length; 1243 for (var i = 0; i < obj.length; i++) { 1244 xs[i] = has(obj, i) ? inspect(obj[i], obj) : ''; 1245 } 1246 } 1247 var syms = typeof gOPS === 'function' ? gOPS(obj) : []; 1248 var symMap; 1249 if (hasShammedSymbols) { 1250 symMap = {}; 1251 for (var k = 0; k < syms.length; k++) { 1252 symMap['$' + syms[k]] = syms[k]; 1253 } 1254 } 1255 1256 for (var key in obj) { // eslint-disable-line no-restricted-syntax 1257 if (!has(obj, key)) { continue; } // eslint-disable-line no-restricted-syntax, no-continue 1258 if (isArr && String(Number(key)) === key && key < obj.length) { continue; } // eslint-disable-line no-restricted-syntax, no-continue 1259 if (hasShammedSymbols && symMap['$' + key] instanceof Symbol) { 1260 // this is to prevent shammed Symbols, which are stored as strings, from being included in the string key section 1261 continue; // eslint-disable-line no-restricted-syntax, no-continue 1262 } else if ($test.call(/[^\w$]/, key)) { 1263 xs.push(inspect(key, obj) + ': ' + inspect(obj[key], obj)); 1264 } else { 1265 xs.push(key + ': ' + inspect(obj[key], obj)); 1266 } 1267 } 1268 if (typeof gOPS === 'function') { 1269 for (var j = 0; j < syms.length; j++) { 1270 if (isEnumerable.call(obj, syms[j])) { 1271 xs.push('[' + inspect(syms[j]) + ']: ' + inspect(obj[syms[j]], obj)); 1272 } 1273 } 1274 } 1275 return xs; 1276 } 1277 1278 1279 /***/ }), 1280 1281 /***/ 616: 1282 /***/ (function(module, __unused_webpack_exports, __webpack_require__) { 1283 1284 "use strict"; 1285 1286 1287 var implementation = __webpack_require__(4485); 1288 1289 module.exports = function getPolyfill() { 1290 return Array.prototype.flat || implementation; 1291 }; 1292 1293 1294 /***/ }), 1295 1296 /***/ 2059: 1297 /***/ (function(module, __unused_webpack_exports, __webpack_require__) { 1298 1299 "use strict"; 1300 1301 1302 var define = __webpack_require__(9170); 1303 var shimUnscopables = __webpack_require__(2505); 1304 1305 var getPolyfill = __webpack_require__(616); 1306 1307 module.exports = function shimFlat() { 1308 var polyfill = getPolyfill(); 1309 1310 define( 1311 Array.prototype, 1312 { flat: polyfill }, 1313 { flat: function () { return Array.prototype.flat !== polyfill; } } 1314 ); 1315 1316 shimUnscopables('flat'); 1317 1318 return polyfill; 1319 }; 1320 1321 1322 /***/ }), 1323 1324 /***/ 7615: 1325 /***/ (function(module, __unused_webpack_exports, __webpack_require__) { 1326 1327 "use strict"; 1328 1329 1330 var GetIntrinsic = __webpack_require__(1801); 1331 1332 var callBind = __webpack_require__(2550); 1333 1334 var $indexOf = callBind(GetIntrinsic('String.prototype.indexOf')); 1335 1336 module.exports = function callBoundIntrinsic(name, allowMissing) { 1337 var intrinsic = GetIntrinsic(name, !!allowMissing); 1338 if (typeof intrinsic === 'function' && $indexOf(name, '.prototype.') > -1) { 1339 return callBind(intrinsic); 1340 } 1341 return intrinsic; 1342 }; 1343 1344 1345 /***/ }), 1346 1347 /***/ 2550: 1348 /***/ (function(module, __unused_webpack_exports, __webpack_require__) { 1349 1350 "use strict"; 1351 1352 1353 var bind = __webpack_require__(1930); 1354 var GetIntrinsic = __webpack_require__(1801); 1355 1356 var $apply = GetIntrinsic('%Function.prototype.apply%'); 1357 var $call = GetIntrinsic('%Function.prototype.call%'); 1358 var $reflectApply = GetIntrinsic('%Reflect.apply%', true) || bind.call($call, $apply); 1359 1360 var $defineProperty = GetIntrinsic('%Object.defineProperty%', true); 1361 1362 if ($defineProperty) { 1363 try { 1364 $defineProperty({}, 'a', { value: 1 }); 1365 } catch (e) { 1366 // IE 8 has a broken defineProperty 1367 $defineProperty = null; 1368 } 1369 } 1370 1371 module.exports = function callBind() { 1372 return $reflectApply(bind, $call, arguments); 1373 }; 1374 1375 var applyBind = function applyBind() { 1376 return $reflectApply(bind, $apply, arguments); 1377 }; 1378 1379 if ($defineProperty) { 1380 $defineProperty(module.exports, 'apply', { value: applyBind }); 1381 } else { 1382 module.exports.apply = applyBind; 1383 } 1384 1385 1386 /***/ }), 1387 1388 /***/ 4403: 1389 /***/ (function(module, exports) { 1390 1391 var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/*! 1392 Copyright (c) 2018 Jed Watson. 1393 Licensed under the MIT License (MIT), see 1394 http://jedwatson.github.io/classnames 1395 */ 1396 /* global define */ 1397 1398 (function () { 1399 'use strict'; 1400 1401 var hasOwn = {}.hasOwnProperty; 1402 1403 function classNames() { 1404 var classes = []; 1405 1406 for (var i = 0; i < arguments.length; i++) { 1407 var arg = arguments[i]; 1408 if (!arg) continue; 1409 1410 var argType = typeof arg; 1411 1412 if (argType === 'string' || argType === 'number') { 1413 classes.push(arg); 1414 } else if (Array.isArray(arg)) { 1415 if (arg.length) { 1416 var inner = classNames.apply(null, arg); 1417 if (inner) { 1418 classes.push(inner); 1419 } 1420 } 1421 } else if (argType === 'object') { 1422 if (arg.toString === Object.prototype.toString) { 1423 for (var key in arg) { 1424 if (hasOwn.call(arg, key) && arg[key]) { 1425 classes.push(key); 1426 } 1427 } 1428 } else { 1429 classes.push(arg.toString()); 1430 } 1431 } 1432 } 1433 1434 return classes.join(' '); 1435 } 1436 1437 if ( true && module.exports) { 1438 classNames.default = classNames; 1439 module.exports = classNames; 1440 } else if (true) { 1441 // register as 'classnames', consistent with npm package name 1442 !(__WEBPACK_AMD_DEFINE_ARRAY__ = [], __WEBPACK_AMD_DEFINE_RESULT__ = (function () { 1443 return classNames; 1444 }).apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__), 1445 __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); 1446 } else {} 1447 }()); 1448 1449 1450 /***/ }), 1451 1452 /***/ 8495: 1453 /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) { 1454 1455 "use strict"; 1456 __webpack_require__.r(__webpack_exports__); 1457 /* harmony export */ __webpack_require__.d(__webpack_exports__, { 1458 /* harmony export */ "addEventListener": function() { return /* binding */ addEventListener; } 1459 /* harmony export */ }); 1460 var CAN_USE_DOM = !!(typeof window !== 'undefined' && window.document && window.document.createElement); 1461 1462 // Adapted from Modernizr 1463 // https://github.com/Modernizr/Modernizr/blob/acb3f0d9/feature-detects/dom/passiveeventlisteners.js#L26-L37 1464 function testPassiveEventListeners() { 1465 if (!CAN_USE_DOM) { 1466 return false; 1467 } 1468 1469 if (!window.addEventListener || !window.removeEventListener || !Object.defineProperty) { 1470 return false; 1471 } 1472 1473 var supportsPassiveOption = false; 1474 try { 1475 var opts = Object.defineProperty({}, 'passive', { 1476 // eslint-disable-next-line getter-return 1477 get: function () { 1478 function get() { 1479 supportsPassiveOption = true; 1480 } 1481 1482 return get; 1483 }() 1484 }); 1485 var noop = function noop() {}; 1486 window.addEventListener('testPassiveEventSupport', noop, opts); 1487 window.removeEventListener('testPassiveEventSupport', noop, opts); 1488 } catch (e) { 1489 // do nothing 1490 } 1491 1492 return supportsPassiveOption; 1493 } 1494 1495 var memoized = void 0; 1496 1497 function canUsePassiveEventListeners() { 1498 if (memoized === undefined) { 1499 memoized = testPassiveEventListeners(); 1500 } 1501 return memoized; 1502 } 1503 1504 function normalizeEventOptions(eventOptions) { 1505 if (!eventOptions) { 1506 return undefined; 1507 } 1508 1509 if (!canUsePassiveEventListeners()) { 1510 // If the browser does not support the passive option, then it is expecting 1511 // a boolean for the options argument to specify whether it should use 1512 // capture or not. In more modern browsers, this is passed via the `capture` 1513 // option, so let's just hoist that value up. 1514 return !!eventOptions.capture; 1515 } 1516 1517 return eventOptions; 1518 } 1519 1520 /* eslint-disable no-bitwise */ 1521 1522 /** 1523 * Generate a unique key for any set of event options 1524 */ 1525 function eventOptionsKey(normalizedEventOptions) { 1526 if (!normalizedEventOptions) { 1527 return 0; 1528 } 1529 1530 // If the browser does not support passive event listeners, the normalized 1531 // event options will be a boolean. 1532 if (normalizedEventOptions === true) { 1533 return 100; 1534 } 1535 1536 // At this point, the browser supports passive event listeners, so we expect 1537 // the event options to be an object with possible properties of capture, 1538 // passive, and once. 1539 // 1540 // We want to consistently return the same value, regardless of the order of 1541 // these properties, so let's use binary maths to assign each property to a 1542 // bit, and then add those together (with an offset to account for the 1543 // booleans at the beginning of this function). 1544 var capture = normalizedEventOptions.capture << 0; 1545 var passive = normalizedEventOptions.passive << 1; 1546 var once = normalizedEventOptions.once << 2; 1547 return capture + passive + once; 1548 } 1549 1550 function ensureCanMutateNextEventHandlers(eventHandlers) { 1551 if (eventHandlers.handlers === eventHandlers.nextHandlers) { 1552 // eslint-disable-next-line no-param-reassign 1553 eventHandlers.nextHandlers = eventHandlers.handlers.slice(); 1554 } 1555 } 1556 1557 function TargetEventHandlers(target) { 1558 this.target = target; 1559 this.events = {}; 1560 } 1561 1562 TargetEventHandlers.prototype.getEventHandlers = function () { 1563 function getEventHandlers(eventName, options) { 1564 var key = String(eventName) + ' ' + String(eventOptionsKey(options)); 1565 1566 if (!this.events[key]) { 1567 this.events[key] = { 1568 handlers: [], 1569 handleEvent: undefined 1570 }; 1571 this.events[key].nextHandlers = this.events[key].handlers; 1572 } 1573 1574 return this.events[key]; 1575 } 1576 1577 return getEventHandlers; 1578 }(); 1579 1580 TargetEventHandlers.prototype.handleEvent = function () { 1581 function handleEvent(eventName, options, event) { 1582 var eventHandlers = this.getEventHandlers(eventName, options); 1583 eventHandlers.handlers = eventHandlers.nextHandlers; 1584 eventHandlers.handlers.forEach(function (handler) { 1585 if (handler) { 1586 // We need to check for presence here because a handler function may 1587 // cause later handlers to get removed. This can happen if you for 1588 // instance have a waypoint that unmounts another waypoint as part of an 1589 // onEnter/onLeave handler. 1590 handler(event); 1591 } 1592 }); 1593 } 1594 1595 return handleEvent; 1596 }(); 1597 1598 TargetEventHandlers.prototype.add = function () { 1599 function add(eventName, listener, options) { 1600 var _this = this; 1601 1602 // options has already been normalized at this point. 1603 var eventHandlers = this.getEventHandlers(eventName, options); 1604 1605 ensureCanMutateNextEventHandlers(eventHandlers); 1606 1607 if (eventHandlers.nextHandlers.length === 0) { 1608 eventHandlers.handleEvent = this.handleEvent.bind(this, eventName, options); 1609 1610 this.target.addEventListener(eventName, eventHandlers.handleEvent, options); 1611 } 1612 1613 eventHandlers.nextHandlers.push(listener); 1614 1615 var isSubscribed = true; 1616 var unsubscribe = function () { 1617 function unsubscribe() { 1618 if (!isSubscribed) { 1619 return; 1620 } 1621 1622 isSubscribed = false; 1623 1624 ensureCanMutateNextEventHandlers(eventHandlers); 1625 var index = eventHandlers.nextHandlers.indexOf(listener); 1626 eventHandlers.nextHandlers.splice(index, 1); 1627 1628 if (eventHandlers.nextHandlers.length === 0) { 1629 // All event handlers have been removed, so we want to remove the event 1630 // listener from the target node. 1631 1632 if (_this.target) { 1633 // There can be a race condition where the target may no longer exist 1634 // when this function is called, e.g. when a React component is 1635 // unmounting. Guarding against this prevents the following error: 1636 // 1637 // Cannot read property 'removeEventListener' of undefined 1638 _this.target.removeEventListener(eventName, eventHandlers.handleEvent, options); 1639 } 1640 1641 eventHandlers.handleEvent = undefined; 1642 } 1643 } 1644 1645 return unsubscribe; 1646 }(); 1647 return unsubscribe; 1648 } 1649 1650 return add; 1651 }(); 1652 1653 var EVENT_HANDLERS_KEY = '__consolidated_events_handlers__'; 1654 1655 // eslint-disable-next-line import/prefer-default-export 1656 function addEventListener(target, eventName, listener, options) { 1657 if (!target[EVENT_HANDLERS_KEY]) { 1658 // eslint-disable-next-line no-param-reassign 1659 target[EVENT_HANDLERS_KEY] = new TargetEventHandlers(target); 1660 } 1661 var normalizedEventOptions = normalizeEventOptions(options); 1662 return target[EVENT_HANDLERS_KEY].add(eventName, listener, normalizedEventOptions); 1663 } 1664 1665 1666 1667 1668 /***/ }), 1669 1670 /***/ 9170: 1671 /***/ (function(module, __unused_webpack_exports, __webpack_require__) { 1672 1673 "use strict"; 1674 1675 1676 var keys = __webpack_require__(806); 1677 var hasSymbols = typeof Symbol === 'function' && typeof Symbol('foo') === 'symbol'; 1678 1679 var toStr = Object.prototype.toString; 1680 var concat = Array.prototype.concat; 1681 var origDefineProperty = Object.defineProperty; 1682 1683 var isFunction = function (fn) { 1684 return typeof fn === 'function' && toStr.call(fn) === '[object Function]'; 1685 }; 1686 1687 var arePropertyDescriptorsSupported = function () { 1688 var obj = {}; 1689 try { 1690 origDefineProperty(obj, 'x', { enumerable: false, value: obj }); 1691 // eslint-disable-next-line no-unused-vars, no-restricted-syntax 1692 for (var _ in obj) { // jscs:ignore disallowUnusedVariables 1693 return false; 1694 } 1695 return obj.x === obj; 1696 } catch (e) { /* this is IE 8. */ 1697 return false; 1698 } 1699 }; 1700 var supportsDescriptors = origDefineProperty && arePropertyDescriptorsSupported(); 1701 1702 var defineProperty = function (object, name, value, predicate) { 1703 if (name in object && (!isFunction(predicate) || !predicate())) { 1704 return; 1705 } 1706 if (supportsDescriptors) { 1707 origDefineProperty(object, name, { 1708 configurable: true, 1709 enumerable: false, 1710 value: value, 1711 writable: true 1712 }); 1713 } else { 1714 object[name] = value; 1715 } 1716 }; 1717 1718 var defineProperties = function (object, map) { 1719 var predicates = arguments.length > 2 ? arguments[2] : {}; 1720 var props = keys(map); 1721 if (hasSymbols) { 1722 props = concat.call(props, Object.getOwnPropertySymbols(map)); 1723 } 1724 for (var i = 0; i < props.length; i += 1) { 1725 defineProperty(object, props[i], map[props[i]], predicates[props[i]]); 1726 } 1727 }; 1728 1729 defineProperties.supportsDescriptors = !!supportsDescriptors; 1730 1731 module.exports = defineProperties; 1732 1733 1734 /***/ }), 1735 1736 /***/ 8110: 1737 /***/ (function(module) { 1738 1739 "use strict"; 1740 1741 1742 module.exports = function contains(other) { 1743 if (arguments.length < 1) { 1744 throw new TypeError('1 argument is required'); 1745 } 1746 if (typeof other !== 'object') { 1747 throw new TypeError('Argument 1 (”other“) to Node.contains must be an instance of Node'); 1748 } 1749 1750 var node = other; 1751 do { 1752 if (this === node) { 1753 return true; 1754 } 1755 if (node) { 1756 node = node.parentNode; 1757 } 1758 } while (node); 1759 1760 return false; 1761 }; 1762 1763 1764 /***/ }), 1765 1766 /***/ 6789: 1767 /***/ (function(module, __unused_webpack_exports, __webpack_require__) { 1768 1769 "use strict"; 1770 1771 1772 var define = __webpack_require__(9170); 1773 1774 var implementation = __webpack_require__(8110); 1775 var getPolyfill = __webpack_require__(8267); 1776 var polyfill = getPolyfill(); 1777 var shim = __webpack_require__(714); 1778 1779 var boundContains = function contains(node, other) { 1780 return polyfill.apply(node, [other]); 1781 }; 1782 1783 define(boundContains, { 1784 getPolyfill: getPolyfill, 1785 implementation: implementation, 1786 shim: shim 1787 }); 1788 1789 module.exports = boundContains; 1790 1791 1792 /***/ }), 1793 1794 /***/ 8267: 1795 /***/ (function(module, __unused_webpack_exports, __webpack_require__) { 1796 1797 "use strict"; 1798 1799 1800 var implementation = __webpack_require__(8110); 1801 1802 module.exports = function getPolyfill() { 1803 if (typeof document !== 'undefined') { 1804 if (document.contains) { 1805 return document.contains; 1806 } 1807 if (document.body && document.body.contains) { 1808 try { 1809 if (typeof document.body.contains.call(document, '') === 'boolean') { 1810 return document.body.contains; 1811 } 1812 } catch (e) { /**/ } 1813 } 1814 } 1815 return implementation; 1816 }; 1817 1818 1819 /***/ }), 1820 1821 /***/ 714: 1822 /***/ (function(module, __unused_webpack_exports, __webpack_require__) { 1823 1824 "use strict"; 1825 1826 1827 var define = __webpack_require__(9170); 1828 var getPolyfill = __webpack_require__(8267); 1829 1830 module.exports = function shimContains() { 1831 var polyfill = getPolyfill(); 1832 if (typeof document !== 'undefined') { 1833 define( 1834 document, 1835 { contains: polyfill }, 1836 { contains: function () { return document.contains !== polyfill; } } 1837 ); 1838 if (typeof Element !== 'undefined') { 1839 define( 1840 Element.prototype, 1841 { contains: polyfill }, 1842 { contains: function () { return Element.prototype.contains !== polyfill; } } 1843 ); 1844 } 1845 } 1846 return polyfill; 1847 }; 1848 1849 1850 /***/ }), 1851 1852 /***/ 1345: 1853 /***/ (function(module, __unused_webpack_exports, __webpack_require__) { 1854 1855 "use strict"; 1856 1857 1858 var util = __webpack_require__(5022); 1859 1860 function scrollIntoView(elem, container, config) { 1861 config = config || {}; 1862 // document 归一化到 window 1863 if (container.nodeType === 9) { 1864 container = util.getWindow(container); 1865 } 1866 1867 var allowHorizontalScroll = config.allowHorizontalScroll; 1868 var onlyScrollIfNeeded = config.onlyScrollIfNeeded; 1869 var alignWithTop = config.alignWithTop; 1870 var alignWithLeft = config.alignWithLeft; 1871 var offsetTop = config.offsetTop || 0; 1872 var offsetLeft = config.offsetLeft || 0; 1873 var offsetBottom = config.offsetBottom || 0; 1874 var offsetRight = config.offsetRight || 0; 1875 1876 allowHorizontalScroll = allowHorizontalScroll === undefined ? true : allowHorizontalScroll; 1877 1878 var isWin = util.isWindow(container); 1879 var elemOffset = util.offset(elem); 1880 var eh = util.outerHeight(elem); 1881 var ew = util.outerWidth(elem); 1882 var containerOffset = undefined; 1883 var ch = undefined; 1884 var cw = undefined; 1885 var containerScroll = undefined; 1886 var diffTop = undefined; 1887 var diffBottom = undefined; 1888 var win = undefined; 1889 var winScroll = undefined; 1890 var ww = undefined; 1891 var wh = undefined; 1892 1893 if (isWin) { 1894 win = container; 1895 wh = util.height(win); 1896 ww = util.width(win); 1897 winScroll = { 1898 left: util.scrollLeft(win), 1899 top: util.scrollTop(win) 1900 }; 1901 // elem 相对 container 可视视窗的距离 1902 diffTop = { 1903 left: elemOffset.left - winScroll.left - offsetLeft, 1904 top: elemOffset.top - winScroll.top - offsetTop 1905 }; 1906 diffBottom = { 1907 left: elemOffset.left + ew - (winScroll.left + ww) + offsetRight, 1908 top: elemOffset.top + eh - (winScroll.top + wh) + offsetBottom 1909 }; 1910 containerScroll = winScroll; 1911 } else { 1912 containerOffset = util.offset(container); 1913 ch = container.clientHeight; 1914 cw = container.clientWidth; 1915 containerScroll = { 1916 left: container.scrollLeft, 1917 top: container.scrollTop 1918 }; 1919 // elem 相对 container 可视视窗的距离 1920 // 注意边框, offset 是边框到根节点 1921 diffTop = { 1922 left: elemOffset.left - (containerOffset.left + (parseFloat(util.css(container, 'borderLeftWidth')) || 0)) - offsetLeft, 1923 top: elemOffset.top - (containerOffset.top + (parseFloat(util.css(container, 'borderTopWidth')) || 0)) - offsetTop 1924 }; 1925 diffBottom = { 1926 left: elemOffset.left + ew - (containerOffset.left + cw + (parseFloat(util.css(container, 'borderRightWidth')) || 0)) + offsetRight, 1927 top: elemOffset.top + eh - (containerOffset.top + ch + (parseFloat(util.css(container, 'borderBottomWidth')) || 0)) + offsetBottom 1928 }; 1929 } 1930 1931 if (diffTop.top < 0 || diffBottom.top > 0) { 1932 // 强制向上 1933 if (alignWithTop === true) { 1934 util.scrollTop(container, containerScroll.top + diffTop.top); 1935 } else if (alignWithTop === false) { 1936 util.scrollTop(container, containerScroll.top + diffBottom.top); 1937 } else { 1938 // 自动调整 1939 if (diffTop.top < 0) { 1940 util.scrollTop(container, containerScroll.top + diffTop.top); 1941 } else { 1942 util.scrollTop(container, containerScroll.top + diffBottom.top); 1943 } 1944 } 1945 } else { 1946 if (!onlyScrollIfNeeded) { 1947 alignWithTop = alignWithTop === undefined ? true : !!alignWithTop; 1948 if (alignWithTop) { 1949 util.scrollTop(container, containerScroll.top + diffTop.top); 1950 } else { 1951 util.scrollTop(container, containerScroll.top + diffBottom.top); 1952 } 1953 } 1954 } 1955 1956 if (allowHorizontalScroll) { 1957 if (diffTop.left < 0 || diffBottom.left > 0) { 1958 // 强制向上 1959 if (alignWithLeft === true) { 1960 util.scrollLeft(container, containerScroll.left + diffTop.left); 1961 } else if (alignWithLeft === false) { 1962 util.scrollLeft(container, containerScroll.left + diffBottom.left); 1963 } else { 1964 // 自动调整 1965 if (diffTop.left < 0) { 1966 util.scrollLeft(container, containerScroll.left + diffTop.left); 1967 } else { 1968 util.scrollLeft(container, containerScroll.left + diffBottom.left); 1969 } 1970 } 1971 } else { 1972 if (!onlyScrollIfNeeded) { 1973 alignWithLeft = alignWithLeft === undefined ? true : !!alignWithLeft; 1974 if (alignWithLeft) { 1975 util.scrollLeft(container, containerScroll.left + diffTop.left); 1976 } else { 1977 util.scrollLeft(container, containerScroll.left + diffBottom.left); 1978 } 1979 } 1980 } 1981 } 1982 } 1983 1984 module.exports = scrollIntoView; 1985 1986 /***/ }), 1987 1988 /***/ 5425: 1989 /***/ (function(module, __unused_webpack_exports, __webpack_require__) { 1990 1991 "use strict"; 1992 1993 1994 module.exports = __webpack_require__(1345); 1995 1996 /***/ }), 1997 1998 /***/ 5022: 1999 /***/ (function(module) { 2000 2001 "use strict"; 2002 2003 2004 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; 2005 2006 var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol ? "symbol" : typeof obj; }; 2007 2008 var RE_NUM = /[\-+]?(?:\d*\.|)\d+(?:[eE][\-+]?\d+|)/.source; 2009 2010 function getClientPosition(elem) { 2011 var box = undefined; 2012 var x = undefined; 2013 var y = undefined; 2014 var doc = elem.ownerDocument; 2015 var body = doc.body; 2016 var docElem = doc && doc.documentElement; 2017 // 根据 GBS 最新数据，A-Grade Browsers 都已支持 getBoundingClientRect 方法，不用再考虑传统的实现方式 2018 box = elem.getBoundingClientRect(); 2019 2020 // 注：jQuery 还考虑减去 docElem.clientLeft/clientTop 2021 // 但测试发现，这样反而会导致当 html 和 body 有边距/边框样式时，获取的值不正确 2022 // 此外，ie6 会忽略 html 的 margin 值，幸运地是没有谁会去设置 html 的 margin 2023 2024 x = box.left; 2025 y = box.top; 2026 2027 // In IE, most of the time, 2 extra pixels are added to the top and left 2028 // due to the implicit 2-pixel inset border. In IE6/7 quirks mode and 2029 // IE6 standards mode, this border can be overridden by setting the 2030 // document element's border to zero -- thus, we cannot rely on the 2031 // offset always being 2 pixels. 2032 2033 // In quirks mode, the offset can be determined by querying the body's 2034 // clientLeft/clientTop, but in standards mode, it is found by querying 2035 // the document element's clientLeft/clientTop. Since we already called 2036 // getClientBoundingRect we have already forced a reflow, so it is not 2037 // too expensive just to query them all. 2038 2039 // ie 下应该减去窗口的边框吧，毕竟默认 absolute 都是相对窗口定位的 2040 // 窗口边框标准是设 documentElement ,quirks 时设置 body 2041 // 最好禁止在 body 和 html 上边框 ，但 ie < 9 html 默认有 2px ，减去 2042 // 但是非 ie 不可能设置窗口边框，body html 也不是窗口 ,ie 可以通过 html,body 设置 2043 // 标准 ie 下 docElem.clientTop 就是 border-top 2044 // ie7 html 即窗口边框改变不了。永远为 2 2045 // 但标准 firefox/chrome/ie9 下 docElem.clientTop 是窗口边框，即使设了 border-top 也为 0 2046 2047 x -= docElem.clientLeft || body.clientLeft || 0; 2048 y -= docElem.clientTop || body.clientTop || 0; 2049 2050 return { 2051 left: x, 2052 top: y 2053 }; 2054 } 2055 2056 function getScroll(w, top) { 2057 var ret = w['page' + (top ? 'Y' : 'X') + 'Offset']; 2058 var method = 'scroll' + (top ? 'Top' : 'Left'); 2059 if (typeof ret !== 'number') { 2060 var d = w.document; 2061 // ie6,7,8 standard mode 2062 ret = d.documentElement[method]; 2063 if (typeof ret !== 'number') { 2064 // quirks mode 2065 ret = d.body[method]; 2066 } 2067 } 2068 return ret; 2069 } 2070 2071 function getScrollLeft(w) { 2072 return getScroll(w); 2073 } 2074 2075 function getScrollTop(w) { 2076 return getScroll(w, true); 2077 } 2078 2079 function getOffset(el) { 2080 var pos = getClientPosition(el); 2081 var doc = el.ownerDocument; 2082 var w = doc.defaultView || doc.parentWindow; 2083 pos.left += getScrollLeft(w); 2084 pos.top += getScrollTop(w); 2085 return pos; 2086 } 2087 function _getComputedStyle(elem, name, computedStyle_) { 2088 var val = ''; 2089 var d = elem.ownerDocument; 2090 var computedStyle = computedStyle_ || d.defaultView.getComputedStyle(elem, null); 2091 2092 // https://github.com/kissyteam/kissy/issues/61 2093 if (computedStyle) { 2094 val = computedStyle.getPropertyValue(name) || computedStyle[name]; 2095 } 2096 2097 return val; 2098 } 2099 2100 var _RE_NUM_NO_PX = new RegExp('^(' + RE_NUM + ')(?!px)[a-z%]+$', 'i'); 2101 var RE_POS = /^(top|right|bottom|left)$/; 2102 var CURRENT_STYLE = 'currentStyle'; 2103 var RUNTIME_STYLE = 'runtimeStyle'; 2104 var LEFT = 'left'; 2105 var PX = 'px'; 2106 2107 function _getComputedStyleIE(elem, name) { 2108 // currentStyle maybe null 2109 // http://msdn.microsoft.com/en-us/library/ms535231.aspx 2110 var ret = elem[CURRENT_STYLE] && elem[CURRENT_STYLE][name]; 2111 2112 // 当 width/height 设置为百分比时，通过 pixelLeft 方式转换的 width/height 值 2113 // 一开始就处理了! CUSTOM_STYLE.height,CUSTOM_STYLE.width ,cssHook 解决@2011-08-19 2114 // 在 ie 下不对，需要直接用 offset 方式 2115 // borderWidth 等值也有问题，但考虑到 borderWidth 设为百分比的概率很小，这里就不考虑了 2116 2117 // From the awesome hack by Dean Edwards 2118 // http://erik.eae.net/archives/2007/07/27/18.54.15/#comment-102291 2119 // If we're not dealing with a regular pixel number 2120 // but a number that has a weird ending, we need to convert it to pixels 2121 // exclude left right for relativity 2122 if (_RE_NUM_NO_PX.test(ret) && !RE_POS.test(name)) { 2123 // Remember the original values 2124 var style = elem.style; 2125 var left = style[LEFT]; 2126 var rsLeft = elem[RUNTIME_STYLE][LEFT]; 2127 2128 // prevent flashing of content 2129 elem[RUNTIME_STYLE][LEFT] = elem[CURRENT_STYLE][LEFT]; 2130 2131 // Put in the new values to get a computed value out 2132 style[LEFT] = name === 'fontSize' ? '1em' : ret || 0; 2133 ret = style.pixelLeft + PX; 2134 2135 // Revert the changed values 2136 style[LEFT] = left; 2137 2138 elem[RUNTIME_STYLE][LEFT] = rsLeft; 2139 } 2140 return ret === '' ? 'auto' : ret; 2141 } 2142 2143 var getComputedStyleX = undefined; 2144 if (typeof window !== 'undefined') { 2145 getComputedStyleX = window.getComputedStyle ? _getComputedStyle : _getComputedStyleIE; 2146 } 2147 2148 function each(arr, fn) { 2149 for (var i = 0; i < arr.length; i++) { 2150 fn(arr[i]); 2151 } 2152 } 2153 2154 function isBorderBoxFn(elem) { 2155 return getComputedStyleX(elem, 'boxSizing') === 'border-box'; 2156 } 2157 2158 var BOX_MODELS = ['margin', 'border', 'padding']; 2159 var CONTENT_INDEX = -1; 2160 var PADDING_INDEX = 2; 2161 var BORDER_INDEX = 1; 2162 var MARGIN_INDEX = 0; 2163 2164 function swap(elem, options, callback) { 2165 var old = {}; 2166 var style = elem.style; 2167 var name = undefined; 2168 2169 // Remember the old values, and insert the new ones 2170 for (name in options) { 2171 if (options.hasOwnProperty(name)) { 2172 old[name] = style[name]; 2173 style[name] = options[name]; 2174 } 2175 } 2176 2177 callback.call(elem); 2178 2179 // Revert the old values 2180 for (name in options) { 2181 if (options.hasOwnProperty(name)) { 2182 style[name] = old[name]; 2183 } 2184 } 2185 } 2186 2187 function getPBMWidth(elem, props, which) { 2188 var value = 0; 2189 var prop = undefined; 2190 var j = undefined; 2191 var i = undefined; 2192 for (j = 0; j < props.length; j++) { 2193 prop = props[j]; 2194 if (prop) { 2195 for (i = 0; i < which.length; i++) { 2196 var cssProp = undefined; 2197 if (prop === 'border') { 2198 cssProp = prop + which[i] + 'Width'; 2199 } else { 2200 cssProp = prop + which[i]; 2201 } 2202 value += parseFloat(getComputedStyleX(elem, cssProp)) || 0; 2203 } 2204 } 2205 } 2206 return value; 2207 } 2208 2209 /** 2210 * A crude way of determining if an object is a window 2211 * @member util 2212 */ 2213 function isWindow(obj) { 2214 // must use == for ie8 2215 /* eslint eqeqeq:0 */ 2216 return obj != null && obj == obj.window; 2217 } 2218 2219 var domUtils = {}; 2220 2221 each(['Width', 'Height'], function (name) { 2222 domUtils['doc' + name] = function (refWin) { 2223 var d = refWin.document; 2224 return Math.max( 2225 // firefox chrome documentElement.scrollHeight< body.scrollHeight 2226 // ie standard mode : documentElement.scrollHeight> body.scrollHeight 2227 d.documentElement['scroll' + name], 2228 // quirks : documentElement.scrollHeight 最大等于可视窗口多一点？ 2229 d.body['scroll' + name], domUtils['viewport' + name](d)); 2230 }; 2231 2232 domUtils['viewport' + name] = function (win) { 2233 // pc browser includes scrollbar in window.innerWidth 2234 var prop = 'client' + name; 2235 var doc = win.document; 2236 var body = doc.body; 2237 var documentElement = doc.documentElement; 2238 var documentElementProp = documentElement[prop]; 2239 // 标准模式取 documentElement 2240 // backcompat 取 body 2241 return doc.compatMode === 'CSS1Compat' && documentElementProp || body && body[prop] || documentElementProp; 2242 }; 2243 }); 2244 2245 /* 2246 得到元素的大小信息 2247 @param elem 2248 @param name 2249 @param {String} [extra] 'padding' : (css width) + padding 2250 'border' : (css width) + padding + border 2251 'margin' : (css width) + padding + border + margin 2252 */ 2253 function getWH(elem, name, extra) { 2254 if (isWindow(elem)) { 2255 return name === 'width' ? domUtils.viewportWidth(elem) : domUtils.viewportHeight(elem); 2256 } else if (elem.nodeType === 9) { 2257 return name === 'width' ? domUtils.docWidth(elem) : domUtils.docHeight(elem); 2258 } 2259 var which = name === 'width' ? ['Left', 'Right'] : ['Top', 'Bottom']; 2260 var borderBoxValue = name === 'width' ? elem.offsetWidth : elem.offsetHeight; 2261 var computedStyle = getComputedStyleX(elem); 2262 var isBorderBox = isBorderBoxFn(elem, computedStyle); 2263 var cssBoxValue = 0; 2264 if (borderBoxValue == null || borderBoxValue <= 0) { 2265 borderBoxValue = undefined; 2266 // Fall back to computed then un computed css if necessary 2267 cssBoxValue = getComputedStyleX(elem, name); 2268 if (cssBoxValue == null || Number(cssBoxValue) < 0) { 2269 cssBoxValue = elem.style[name] || 0; 2270 } 2271 // Normalize '', auto, and prepare for extra 2272 cssBoxValue = parseFloat(cssBoxValue) || 0; 2273 } 2274 if (extra === undefined) { 2275 extra = isBorderBox ? BORDER_INDEX : CONTENT_INDEX; 2276 } 2277 var borderBoxValueOrIsBorderBox = borderBoxValue !== undefined || isBorderBox; 2278 var val = borderBoxValue || cssBoxValue; 2279 if (extra === CONTENT_INDEX) { 2280 if (borderBoxValueOrIsBorderBox) { 2281 return val - getPBMWidth(elem, ['border', 'padding'], which, computedStyle); 2282 } 2283 return cssBoxValue; 2284 } 2285 if (borderBoxValueOrIsBorderBox) { 2286 var padding = extra === PADDING_INDEX ? -getPBMWidth(elem, ['border'], which, computedStyle) : getPBMWidth(elem, ['margin'], which, computedStyle); 2287 return val + (extra === BORDER_INDEX ? 0 : padding); 2288 } 2289 return cssBoxValue + getPBMWidth(elem, BOX_MODELS.slice(extra), which, computedStyle); 2290 } 2291 2292 var cssShow = { 2293 position: 'absolute', 2294 visibility: 'hidden', 2295 display: 'block' 2296 }; 2297 2298 // fix #119 : https://github.com/kissyteam/kissy/issues/119 2299 function getWHIgnoreDisplay(elem) { 2300 var val = undefined; 2301 var args = arguments; 2302 // in case elem is window 2303 // elem.offsetWidth === undefined 2304 if (elem.offsetWidth !== 0) { 2305 val = getWH.apply(undefined, args); 2306 } else { 2307 swap(elem, cssShow, function () { 2308 val = getWH.apply(undefined, args); 2309 }); 2310 } 2311 return val; 2312 } 2313 2314 function css(el, name, v) { 2315 var value = v; 2316 if ((typeof name === 'undefined' ? 'undefined' : _typeof(name)) === 'object') { 2317 for (var i in name) { 2318 if (name.hasOwnProperty(i)) { 2319 css(el, i, name[i]); 2320 } 2321 } 2322 return undefined; 2323 } 2324 if (typeof value !== 'undefined') { 2325 if (typeof value === 'number') { 2326 value += 'px'; 2327 } 2328 el.style[name] = value; 2329 return undefined; 2330 } 2331 return getComputedStyleX(el, name); 2332 } 2333 2334 each(['width', 'height'], function (name) { 2335 var first = name.charAt(0).toUpperCase() + name.slice(1); 2336 domUtils['outer' + first] = function (el, includeMargin) { 2337 return el && getWHIgnoreDisplay(el, name, includeMargin ? MARGIN_INDEX : BORDER_INDEX); 2338 }; 2339 var which = name === 'width' ? ['Left', 'Right'] : ['Top', 'Bottom']; 2340 2341 domUtils[name] = function (elem, val) { 2342 if (val !== undefined) { 2343 if (elem) { 2344 var computedStyle = getComputedStyleX(elem); 2345 var isBorderBox = isBorderBoxFn(elem); 2346 if (isBorderBox) { 2347 val += getPBMWidth(elem, ['padding', 'border'], which, computedStyle); 2348 } 2349 return css(elem, name, val); 2350 } 2351 return undefined; 2352 } 2353 return elem && getWHIgnoreDisplay(elem, name, CONTENT_INDEX); 2354 }; 2355 }); 2356 2357 // 设置 elem 相对 elem.ownerDocument 的坐标 2358 function setOffset(elem, offset) { 2359 // set position first, in-case top/left are set even on static elem 2360 if (css(elem, 'position') === 'static') { 2361 elem.style.position = 'relative'; 2362 } 2363 2364 var old = getOffset(elem); 2365 var ret = {}; 2366 var current = undefined; 2367 var key = undefined; 2368 2369 for (key in offset) { 2370 if (offset.hasOwnProperty(key)) { 2371 current = parseFloat(css(elem, key)) || 0; 2372 ret[key] = current + offset[key] - old[key]; 2373 } 2374 } 2375 css(elem, ret); 2376 } 2377 2378 module.exports = _extends({ 2379 getWindow: function getWindow(node) { 2380 var doc = node.ownerDocument || node; 2381 return doc.defaultView || doc.parentWindow; 2382 }, 2383 offset: function offset(el, value) { 2384 if (typeof value !== 'undefined') { 2385 setOffset(el, value); 2386 } else { 2387 return getOffset(el); 2388 } 2389 }, 2390 2391 isWindow: isWindow, 2392 each: each, 2393 css: css, 2394 clone: function clone(obj) { 2395 var ret = {}; 2396 for (var i in obj) { 2397 if (obj.hasOwnProperty(i)) { 2398 ret[i] = obj[i]; 2399 } 2400 } 2401 var overflow = obj.overflow; 2402 if (overflow) { 2403 for (var i in obj) { 2404 if (obj.hasOwnProperty(i)) { 2405 ret.overflow[i] = obj.overflow[i]; 2406 } 2407 } 2408 } 2409 return ret; 2410 }, 2411 scrollLeft: function scrollLeft(w, v) { 2412 if (isWindow(w)) { 2413 if (v === undefined) { 2414 return getScrollLeft(w); 2415 } 2416 window.scrollTo(v, getScrollTop(w)); 2417 } else { 2418 if (v === undefined) { 2419 return w.scrollLeft; 2420 } 2421 w.scrollLeft = v; 2422 } 2423 }, 2424 scrollTop: function scrollTop(w, v) { 2425 if (isWindow(w)) { 2426 if (v === undefined) { 2427 return getScrollTop(w); 2428 } 2429 window.scrollTo(getScrollLeft(w), v); 2430 } else { 2431 if (v === undefined) { 2432 return w.scrollTop; 2433 } 2434 w.scrollTop = v; 2435 } 2436 }, 2437 2438 viewportWidth: 0, 2439 viewportHeight: 0 2440 }, domUtils); 2441 2442 /***/ }), 2443 2444 /***/ 9214: 2445 /***/ (function(__unused_webpack_module, exports) { 2446 2447 "use strict"; 2448 var __webpack_unused_export__; 2449 /** @license React v17.0.2 2450 * react-is.production.min.js 2451 * 2452 * Copyright (c) Facebook, Inc. and its affiliates. 2453 * 2454 * This source code is licensed under the MIT license found in the 2455 * LICENSE file in the root directory of this source tree. 2456 */ 2457 var b=60103,c=60106,d=60107,e=60108,f=60114,g=60109,h=60110,k=60112,l=60113,m=60120,n=60115,p=60116,q=60121,r=60122,u=60117,v=60129,w=60131; 2458 if("function"===typeof Symbol&&Symbol.for){var x=Symbol.for;b=x("react.element");c=x("react.portal");d=x("react.fragment");e=x("react.strict_mode");f=x("react.profiler");g=x("react.provider");h=x("react.context");k=x("react.forward_ref");l=x("react.suspense");m=x("react.suspense_list");n=x("react.memo");p=x("react.lazy");q=x("react.block");r=x("react.server.block");u=x("react.fundamental");v=x("react.debug_trace_mode");w=x("react.legacy_hidden")} 2459 function y(a){if("object"===typeof a&&null!==a){var t=a.$$typeof;switch(t){case b:switch(a=a.type,a){case d:case f:case e:case l:case m:return a;default:switch(a=a&&a.$$typeof,a){case h:case k:case p:case n:case g:return a;default:return t}}case c:return t}}}var z=g,A=b,B=k,C=d,D=p,E=n,F=c,G=f,H=e,I=l;__webpack_unused_export__=h;__webpack_unused_export__=z;__webpack_unused_export__=A;__webpack_unused_export__=B;__webpack_unused_export__=C;__webpack_unused_export__=D;__webpack_unused_export__=E;__webpack_unused_export__=F;__webpack_unused_export__=G;__webpack_unused_export__=H; 2460 __webpack_unused_export__=I;__webpack_unused_export__=function(){return!1};__webpack_unused_export__=function(){return!1};__webpack_unused_export__=function(a){return y(a)===h};__webpack_unused_export__=function(a){return y(a)===g};__webpack_unused_export__=function(a){return"object"===typeof a&&null!==a&&a.$$typeof===b};__webpack_unused_export__=function(a){return y(a)===k};__webpack_unused_export__=function(a){return y(a)===d};__webpack_unused_export__=function(a){return y(a)===p};__webpack_unused_export__=function(a){return y(a)===n}; 2461 __webpack_unused_export__=function(a){return y(a)===c};__webpack_unused_export__=function(a){return y(a)===f};__webpack_unused_export__=function(a){return y(a)===e};__webpack_unused_export__=function(a){return y(a)===l};__webpack_unused_export__=function(a){return"string"===typeof a||"function"===typeof a||a===d||a===f||a===v||a===e||a===l||a===m||a===w||"object"===typeof a&&null!==a&&(a.$$typeof===p||a.$$typeof===n||a.$$typeof===g||a.$$typeof===h||a.$$typeof===k||a.$$typeof===u||a.$$typeof===q||a[0]===r)?!0:!1}; 2462 __webpack_unused_export__=y; 2463 2464 2465 /***/ }), 2466 2467 /***/ 2797: 2468 /***/ (function(module, __unused_webpack_exports, __webpack_require__) { 2469 2470 "use strict"; 2471 2472 2473 if (true) { 2474 /* unused reexport */ __webpack_require__(9214); 2475 } else {} 2476 2477 2478 /***/ }), 2479 2480 /***/ 2505: 2481 /***/ (function(module, __unused_webpack_exports, __webpack_require__) { 2482 2483 "use strict"; 2484 2485 2486 var has = __webpack_require__(9284); 2487 2488 var hasUnscopables = typeof Symbol === 'function' && typeof Symbol.unscopables === 'symbol'; 2489 2490 var map = hasUnscopables && Array.prototype[Symbol.unscopables]; 2491 2492 var $TypeError = TypeError; 2493 2494 module.exports = function shimUnscopables(method) { 2495 if (typeof method !== 'string' || !method) { 2496 throw new $TypeError('method must be a non-empty string'); 2497 } 2498 if (!has(Array.prototype, method)) { 2499 throw new $TypeError('method must be on Array.prototype'); 2500 } 2501 if (hasUnscopables) { 2502 map[method] = true; 2503 } 2504 }; 2505 2506 2507 /***/ }), 2508 2509 /***/ 5249: 2510 /***/ (function(module, __unused_webpack_exports, __webpack_require__) { 2511 2512 "use strict"; 2513 2514 2515 var hasSymbols = typeof Symbol === 'function' && typeof Symbol.iterator === 'symbol'; 2516 2517 var isPrimitive = __webpack_require__(3777); 2518 var isCallable = __webpack_require__(5443); 2519 var isDate = __webpack_require__(8659); 2520 var isSymbol = __webpack_require__(3082); 2521 2522 var ordinaryToPrimitive = function OrdinaryToPrimitive(O, hint) { 2523 if (typeof O === 'undefined' || O === null) { 2524 throw new TypeError('Cannot call method on ' + O); 2525 } 2526 if (typeof hint !== 'string' || (hint !== 'number' && hint !== 'string')) { 2527 throw new TypeError('hint must be "string" or "number"'); 2528 } 2529 var methodNames = hint === 'string' ? ['toString', 'valueOf'] : ['valueOf', 'toString']; 2530 var method, result, i; 2531 for (i = 0; i < methodNames.length; ++i) { 2532 method = O[methodNames[i]]; 2533 if (isCallable(method)) { 2534 result = method.call(O); 2535 if (isPrimitive(result)) { 2536 return result; 2537 } 2538 } 2539 } 2540 throw new TypeError('No default value'); 2541 }; 2542 2543 var GetMethod = function GetMethod(O, P) { 2544 var func = O[P]; 2545 if (func !== null && typeof func !== 'undefined') { 2546 if (!isCallable(func)) { 2547 throw new TypeError(func + ' returned for property ' + P + ' of object ' + O + ' is not a function'); 2548 } 2549 return func; 2550 } 2551 return void 0; 2552 }; 2553 2554 // http://www.ecma-international.org/ecma-262/6.0/#sec-toprimitive 2555 module.exports = function ToPrimitive(input) { 2556 if (isPrimitive(input)) { 2557 return input; 2558 } 2559 var hint = 'default'; 2560 if (arguments.length > 1) { 2561 if (arguments[1] === String) { 2562 hint = 'string'; 2563 } else if (arguments[1] === Number) { 2564 hint = 'number'; 2565 } 2566 } 2567 2568 var exoticToPrim; 2569 if (hasSymbols) { 2570 if (Symbol.toPrimitive) { 2571 exoticToPrim = GetMethod(input, Symbol.toPrimitive); 2572 } else if (isSymbol(input)) { 2573 exoticToPrim = Symbol.prototype.valueOf; 2574 } 2575 } 2576 if (typeof exoticToPrim !== 'undefined') { 2577 var result = exoticToPrim.call(input, hint); 2578 if (isPrimitive(result)) { 2579 return result; 2580 } 2581 throw new TypeError('unable to convert exotic object to primitive'); 2582 } 2583 if (hint === 'default' && (isDate(input) || isSymbol(input))) { 2584 hint = 'string'; 2585 } 2586 return ordinaryToPrimitive(input, hint === 'default' ? 'number' : hint); 2587 }; 2588 2589 2590 /***/ }), 2591 2592 /***/ 3777: 2593 /***/ (function(module) { 2594 2595 "use strict"; 2596 2597 2598 module.exports = function isPrimitive(value) { 2599 return value === null || (typeof value !== 'function' && typeof value !== 'object'); 2600 }; 2601 2602 2603 /***/ }), 2604 2605 /***/ 9930: 2606 /***/ (function(module) { 2607 2608 "use strict"; 2609 2610 2611 /* eslint no-invalid-this: 1 */ 2612 2613 var ERROR_MESSAGE = 'Function.prototype.bind called on incompatible '; 2614 var slice = Array.prototype.slice; 2615 var toStr = Object.prototype.toString; 2616 var funcType = '[object Function]'; 2617 2618 module.exports = function bind(that) { 2619 var target = this; 2620 if (typeof target !== 'function' || toStr.call(target) !== funcType) { 2621 throw new TypeError(ERROR_MESSAGE + target); 2622 } 2623 var args = slice.call(arguments, 1); 2624 2625 var bound; 2626 var binder = function () { 2627 if (this instanceof bound) { 2628 var result = target.apply( 2629 this, 2630 args.concat(slice.call(arguments)) 2631 ); 2632 if (Object(result) === result) { 2633 return result; 2634 } 2635 return this; 2636 } else { 2637 return target.apply( 2638 that, 2639 args.concat(slice.call(arguments)) 2640 ); 2641 } 2642 }; 2643 2644 var boundLength = Math.max(0, target.length - args.length); 2645 var boundArgs = []; 2646 for (var i = 0; i < boundLength; i++) { 2647 boundArgs.push('$' + i); 2648 } 2649 2650 bound = Function('binder', 'return function (' + boundArgs.join(',') + '){ return binder.apply(this,arguments); }')(binder); 2651 2652 if (target.prototype) { 2653 var Empty = function Empty() {}; 2654 Empty.prototype = target.prototype; 2655 bound.prototype = new Empty(); 2656 Empty.prototype = null; 2657 } 2658 2659 return bound; 2660 }; 2661 2662 2663 /***/ }), 2664 2665 /***/ 1930: 2666 /***/ (function(module, __unused_webpack_exports, __webpack_require__) { 2667 2668 "use strict"; 2669 2670 2671 var implementation = __webpack_require__(9930); 2672 2673 module.exports = Function.prototype.bind || implementation; 2674 2675 2676 /***/ }), 2677 2678 /***/ 1801: 2679 /***/ (function(module, __unused_webpack_exports, __webpack_require__) { 2680 2681 "use strict"; 2682 2683 2684 /* globals 2685 AggregateError, 2686 Atomics, 2687 FinalizationRegistry, 2688 SharedArrayBuffer, 2689 WeakRef, 2690 */ 2691 2692 var undefined; 2693 2694 var $SyntaxError = SyntaxError; 2695 var $Function = Function; 2696 var $TypeError = TypeError; 2697 2698 // eslint-disable-next-line consistent-return 2699 var getEvalledConstructor = function (expressionSyntax) { 2700 try { 2701 // eslint-disable-next-line no-new-func 2702 return Function('"use strict"; return (' + expressionSyntax + ').constructor;')(); 2703 } catch (e) {} 2704 }; 2705 2706 var $gOPD = Object.getOwnPropertyDescriptor; 2707 if ($gOPD) { 2708 try { 2709 $gOPD({}, ''); 2710 } catch (e) { 2711 $gOPD = null; // this is IE 8, which has a broken gOPD 2712 } 2713 } 2714 2715 var throwTypeError = function () { 2716 throw new $TypeError(); 2717 }; 2718 var ThrowTypeError = $gOPD 2719 ? (function () { 2720 try { 2721 // eslint-disable-next-line no-unused-expressions, no-caller, no-restricted-properties 2722 arguments.callee; // IE 8 does not throw here 2723 return throwTypeError; 2724 } catch (calleeThrows) { 2725 try { 2726 // IE 8 throws on Object.getOwnPropertyDescriptor(arguments, '') 2727 return $gOPD(arguments, 'callee').get; 2728 } catch (gOPDthrows) { 2729 return throwTypeError; 2730 } 2731 } 2732 }()) 2733 : throwTypeError; 2734 2735 var hasSymbols = __webpack_require__(9905)(); 2736 2737 var getProto = Object.getPrototypeOf || function (x) { return x.__proto__; }; // eslint-disable-line no-proto 2738 2739 var asyncGenFunction = getEvalledConstructor('async function* () {}'); 2740 var asyncGenFunctionPrototype = asyncGenFunction ? asyncGenFunction.prototype : undefined; 2741 var asyncGenPrototype = asyncGenFunctionPrototype ? asyncGenFunctionPrototype.prototype : undefined; 2742 2743 var TypedArray = typeof Uint8Array === 'undefined' ? undefined : getProto(Uint8Array); 2744 2745 var INTRINSICS = { 2746 '%AggregateError%': typeof AggregateError === 'undefined' ? undefined : AggregateError, 2747 '%Array%': Array, 2748 '%ArrayBuffer%': typeof ArrayBuffer === 'undefined' ? undefined : ArrayBuffer, 2749 '%ArrayIteratorPrototype%': hasSymbols ? getProto([][Symbol.iterator]()) : undefined, 2750 '%AsyncFromSyncIteratorPrototype%': undefined, 2751 '%AsyncFunction%': getEvalledConstructor('async function () {}'), 2752 '%AsyncGenerator%': asyncGenFunctionPrototype, 2753 '%AsyncGeneratorFunction%': asyncGenFunction, 2754 '%AsyncIteratorPrototype%': asyncGenPrototype ? getProto(asyncGenPrototype) : undefined, 2755 '%Atomics%': typeof Atomics === 'undefined' ? undefined : Atomics, 2756 '%BigInt%': typeof BigInt === 'undefined' ? undefined : BigInt, 2757 '%Boolean%': Boolean, 2758 '%DataView%': typeof DataView === 'undefined' ? undefined : DataView, 2759 '%Date%': Date, 2760 '%decodeURI%': decodeURI, 2761 '%decodeURIComponent%': decodeURIComponent, 2762 '%encodeURI%': encodeURI, 2763 '%encodeURIComponent%': encodeURIComponent, 2764 '%Error%': Error, 2765 '%eval%': eval, // eslint-disable-line no-eval 2766 '%EvalError%': EvalError, 2767 '%Float32Array%': typeof Float32Array === 'undefined' ? undefined : Float32Array, 2768 '%Float64Array%': typeof Float64Array === 'undefined' ? undefined : Float64Array, 2769 '%FinalizationRegistry%': typeof FinalizationRegistry === 'undefined' ? undefined : FinalizationRegistry, 2770 '%Function%': $Function, 2771 '%GeneratorFunction%': getEvalledConstructor('function* () {}'), 2772 '%Int8Array%': typeof Int8Array === 'undefined' ? undefined : Int8Array, 2773 '%Int16Array%': typeof Int16Array === 'undefined' ? undefined : Int16Array, 2774 '%Int32Array%': typeof Int32Array === 'undefined' ? undefined : Int32Array, 2775 '%isFinite%': isFinite, 2776 '%isNaN%': isNaN, 2777 '%IteratorPrototype%': hasSymbols ? getProto(getProto([][Symbol.iterator]())) : undefined, 2778 '%JSON%': typeof JSON === 'object' ? JSON : undefined, 2779 '%Map%': typeof Map === 'undefined' ? undefined : Map, 2780 '%MapIteratorPrototype%': typeof Map === 'undefined' || !hasSymbols ? undefined : getProto(new Map()[Symbol.iterator]()), 2781 '%Math%': Math, 2782 '%Number%': Number, 2783 '%Object%': Object, 2784 '%parseFloat%': parseFloat, 2785 '%parseInt%': parseInt, 2786 '%Promise%': typeof Promise === 'undefined' ? undefined : Promise, 2787 '%Proxy%': typeof Proxy === 'undefined' ? undefined : Proxy, 2788 '%RangeError%': RangeError, 2789 '%ReferenceError%': ReferenceError, 2790 '%Reflect%': typeof Reflect === 'undefined' ? undefined : Reflect, 2791 '%RegExp%': RegExp, 2792 '%Set%': typeof Set === 'undefined' ? undefined : Set, 2793 '%SetIteratorPrototype%': typeof Set === 'undefined' || !hasSymbols ? undefined : getProto(new Set()[Symbol.iterator]()), 2794 '%SharedArrayBuffer%': typeof SharedArrayBuffer === 'undefined' ? undefined : SharedArrayBuffer, 2795 '%String%': String, 2796 '%StringIteratorPrototype%': hasSymbols ? getProto(''[Symbol.iterator]()) : undefined, 2797 '%Symbol%': hasSymbols ? Symbol : undefined, 2798 '%SyntaxError%': $SyntaxError, 2799 '%ThrowTypeError%': ThrowTypeError, 2800 '%TypedArray%': TypedArray, 2801 '%TypeError%': $TypeError, 2802 '%Uint8Array%': typeof Uint8Array === 'undefined' ? undefined : Uint8Array, 2803 '%Uint8ClampedArray%': typeof Uint8ClampedArray === 'undefined' ? undefined : Uint8ClampedArray, 2804 '%Uint16Array%': typeof Uint16Array === 'undefined' ? undefined : Uint16Array, 2805 '%Uint32Array%': typeof Uint32Array === 'undefined' ? undefined : Uint32Array, 2806 '%URIError%': URIError, 2807 '%WeakMap%': typeof WeakMap === 'undefined' ? undefined : WeakMap, 2808 '%WeakRef%': typeof WeakRef === 'undefined' ? undefined : WeakRef, 2809 '%WeakSet%': typeof WeakSet === 'undefined' ? undefined : WeakSet 2810 }; 2811 2812 var LEGACY_ALIASES = { 2813 '%ArrayBufferPrototype%': ['ArrayBuffer', 'prototype'], 2814 '%ArrayPrototype%': ['Array', 'prototype'], 2815 '%ArrayProto_entries%': ['Array', 'prototype', 'entries'], 2816 '%ArrayProto_forEach%': ['Array', 'prototype', 'forEach'], 2817 '%ArrayProto_keys%': ['Array', 'prototype', 'keys'], 2818 '%ArrayProto_values%': ['Array', 'prototype', 'values'], 2819 '%AsyncFunctionPrototype%': ['AsyncFunction', 'prototype'], 2820 '%AsyncGenerator%': ['AsyncGeneratorFunction', 'prototype'], 2821 '%AsyncGeneratorPrototype%': ['AsyncGeneratorFunction', 'prototype', 'prototype'], 2822 '%BooleanPrototype%': ['Boolean', 'prototype'], 2823 '%DataViewPrototype%': ['DataView', 'prototype'], 2824 '%DatePrototype%': ['Date', 'prototype'], 2825 '%ErrorPrototype%': ['Error', 'prototype'], 2826 '%EvalErrorPrototype%': ['EvalError', 'prototype'], 2827 '%Float32ArrayPrototype%': ['Float32Array', 'prototype'], 2828 '%Float64ArrayPrototype%': ['Float64Array', 'prototype'], 2829 '%FunctionPrototype%': ['Function', 'prototype'], 2830 '%Generator%': ['GeneratorFunction', 'prototype'], 2831 '%GeneratorPrototype%': ['GeneratorFunction', 'prototype', 'prototype'], 2832 '%Int8ArrayPrototype%': ['Int8Array', 'prototype'], 2833 '%Int16ArrayPrototype%': ['Int16Array', 'prototype'], 2834 '%Int32ArrayPrototype%': ['Int32Array', 'prototype'], 2835 '%JSONParse%': ['JSON', 'parse'], 2836 '%JSONStringify%': ['JSON', 'stringify'], 2837 '%MapPrototype%': ['Map', 'prototype'], 2838 '%NumberPrototype%': ['Number', 'prototype'], 2839 '%ObjectPrototype%': ['Object', 'prototype'], 2840 '%ObjProto_toString%': ['Object', 'prototype', 'toString'], 2841 '%ObjProto_valueOf%': ['Object', 'prototype', 'valueOf'], 2842 '%PromisePrototype%': ['Promise', 'prototype'], 2843 '%PromiseProto_then%': ['Promise', 'prototype', 'then'], 2844 '%Promise_all%': ['Promise', 'all'], 2845 '%Promise_reject%': ['Promise', 'reject'], 2846 '%Promise_resolve%': ['Promise', 'resolve'], 2847 '%RangeErrorPrototype%': ['RangeError', 'prototype'], 2848 '%ReferenceErrorPrototype%': ['ReferenceError', 'prototype'], 2849 '%RegExpPrototype%': ['RegExp', 'prototype'], 2850 '%SetPrototype%': ['Set', 'prototype'], 2851 '%SharedArrayBufferPrototype%': ['SharedArrayBuffer', 'prototype'], 2852 '%StringPrototype%': ['String', 'prototype'], 2853 '%SymbolPrototype%': ['Symbol', 'prototype'], 2854 '%SyntaxErrorPrototype%': ['SyntaxError', 'prototype'], 2855 '%TypedArrayPrototype%': ['TypedArray', 'prototype'], 2856 '%TypeErrorPrototype%': ['TypeError', 'prototype'], 2857 '%Uint8ArrayPrototype%': ['Uint8Array', 'prototype'], 2858 '%Uint8ClampedArrayPrototype%': ['Uint8ClampedArray', 'prototype'], 2859 '%Uint16ArrayPrototype%': ['Uint16Array', 'prototype'], 2860 '%Uint32ArrayPrototype%': ['Uint32Array', 'prototype'], 2861 '%URIErrorPrototype%': ['URIError', 'prototype'], 2862 '%WeakMapPrototype%': ['WeakMap', 'prototype'], 2863 '%WeakSetPrototype%': ['WeakSet', 'prototype'] 2864 }; 2865 2866 var bind = __webpack_require__(1930); 2867 var hasOwn = __webpack_require__(9284); 2868 var $concat = bind.call(Function.call, Array.prototype.concat); 2869 var $spliceApply = bind.call(Function.apply, Array.prototype.splice); 2870 var $replace = bind.call(Function.call, String.prototype.replace); 2871 var $strSlice = bind.call(Function.call, String.prototype.slice); 2872 2873 /* adapted from https://github.com/lodash/lodash/blob/4.17.15/dist/lodash.js#L6735-L6744 */ 2874 var rePropName = /[^%.[\]]+|\[(?:(-?\d+(?:\.\d+)?)|(["'])((?:(?!\2)[^\\]|\\.)*?)\2)\]|(?=(?:\.|\[\])(?:\.|\[\]|%$))/g; 2875 var reEscapeChar = /\\(\\)?/g; /** Used to match backslashes in property paths. */ 2876 var stringToPath = function stringToPath(string) { 2877 var first = $strSlice(string, 0, 1); 2878 var last = $strSlice(string, -1); 2879 if (first === '%' && last !== '%') { 2880 throw new $SyntaxError('invalid intrinsic syntax, expected closing `%`'); 2881 } else if (last === '%' && first !== '%') { 2882 throw new $SyntaxError('invalid intrinsic syntax, expected opening `%`'); 2883 } 2884 var result = []; 2885 $replace(string, rePropName, function (match, number, quote, subString) { 2886 result[result.length] = quote ? $replace(subString, reEscapeChar, '$1') : number || match; 2887 }); 2888 return result; 2889 }; 2890 /* end adaptation */ 2891 2892 var getBaseIntrinsic = function getBaseIntrinsic(name, allowMissing) { 2893 var intrinsicName = name; 2894 var alias; 2895 if (hasOwn(LEGACY_ALIASES, intrinsicName)) { 2896 alias = LEGACY_ALIASES[intrinsicName]; 2897 intrinsicName = '%' + alias[0] + '%'; 2898 } 2899 2900 if (hasOwn(INTRINSICS, intrinsicName)) { 2901 var value = INTRINSICS[intrinsicName]; 2902 if (typeof value === 'undefined' && !allowMissing) { 2903 throw new $TypeError('intrinsic ' + name + ' exists, but is not available. Please file an issue!'); 2904 } 2905 2906 return { 2907 alias: alias, 2908 name: intrinsicName, 2909 value: value 2910 }; 2911 } 2912 2913 throw new $SyntaxError('intrinsic ' + name + ' does not exist!'); 2914 }; 2915 2916 module.exports = function GetIntrinsic(name, allowMissing) { 2917 if (typeof name !== 'string' || name.length === 0) { 2918 throw new $TypeError('intrinsic name must be a non-empty string'); 2919 } 2920 if (arguments.length > 1 && typeof allowMissing !== 'boolean') { 2921 throw new $TypeError('"allowMissing" argument must be a boolean'); 2922 } 2923 2924 var parts = stringToPath(name); 2925 var intrinsicBaseName = parts.length > 0 ? parts[0] : ''; 2926 2927 var intrinsic = getBaseIntrinsic('%' + intrinsicBaseName + '%', allowMissing); 2928 var intrinsicRealName = intrinsic.name; 2929 var value = intrinsic.value; 2930 var skipFurtherCaching = false; 2931 2932 var alias = intrinsic.alias; 2933 if (alias) { 2934 intrinsicBaseName = alias[0]; 2935 $spliceApply(parts, $concat([0, 1], alias)); 2936 } 2937 2938 for (var i = 1, isOwn = true; i < parts.length; i += 1) { 2939 var part = parts[i]; 2940 var first = $strSlice(part, 0, 1); 2941 var last = $strSlice(part, -1); 2942 if ( 2943 ( 2944 (first === '"' || first === "'" || first === '`') 2945 || (last === '"' || last === "'" || last === '`') 2946 ) 2947 && first !== last 2948 ) { 2949 throw new $SyntaxError('property names with quotes must have matching quotes'); 2950 } 2951 if (part === 'constructor' || !isOwn) { 2952 skipFurtherCaching = true; 2953 } 2954 2955 intrinsicBaseName += '.' + part; 2956 intrinsicRealName = '%' + intrinsicBaseName + '%'; 2957 2958 if (hasOwn(INTRINSICS, intrinsicRealName)) { 2959 value = INTRINSICS[intrinsicRealName]; 2960 } else if (value != null) { 2961 if (!(part in value)) { 2962 if (!allowMissing) { 2963 throw new $TypeError('base intrinsic for ' + name + ' exists, but the property is not available.'); 2964 } 2965 return void undefined; 2966 } 2967 if ($gOPD && (i + 1) >= parts.length) { 2968 var desc = $gOPD(value, part); 2969 isOwn = !!desc; 2970 2971 // By convention, when a data property is converted to an accessor 2972 // property to emulate a data property that does not suffer from 2973 // the override mistake, that accessor's getter is marked with 2974 // an `originalValue` property. Here, when we detect this, we 2975 // uphold the illusion by pretending to see that original data 2976 // property, i.e., returning the value rather than the getter 2977 // itself. 2978 if (isOwn && 'get' in desc && !('originalValue' in desc.get)) { 2979 value = desc.get; 2980 } else { 2981 value = value[part]; 2982 } 2983 } else { 2984 isOwn = hasOwn(value, part); 2985 value = value[part]; 2986 } 2987 2988 if (isOwn && !skipFurtherCaching) { 2989 INTRINSICS[intrinsicRealName] = value; 2990 } 2991 } 2992 } 2993 return value; 2994 }; 2995 2996 2997 /***/ }), 2998 2999 /***/ 5371: 3000 /***/ (function(module, __unused_webpack_exports, __webpack_require__) { 3001 3002 "use strict"; 3003 3004 3005 var define = __webpack_require__(9170); 3006 var isSymbol = __webpack_require__(3082); 3007 3008 var globalKey = '__ global cache key __'; 3009 /* istanbul ignore else */ 3010 // eslint-disable-next-line no-restricted-properties 3011 if (typeof Symbol === 'function' && isSymbol(Symbol('foo')) && typeof Symbol['for'] === 'function') { 3012 // eslint-disable-next-line no-restricted-properties 3013 globalKey = Symbol['for'](globalKey); 3014 } 3015 3016 var trueThunk = function () { 3017 return true; 3018 }; 3019 3020 var ensureCache = function ensureCache() { 3021 if (!__webpack_require__.g[globalKey]) { 3022 var properties = {}; 3023 properties[globalKey] = {}; 3024 var predicates = {}; 3025 predicates[globalKey] = trueThunk; 3026 define(__webpack_require__.g, properties, predicates); 3027 } 3028 return __webpack_require__.g[globalKey]; 3029 }; 3030 3031 var cache = ensureCache(); 3032 3033 var isPrimitive = function isPrimitive(val) { 3034 return val === null || (typeof val !== 'object' && typeof val !== 'function'); 3035 }; 3036 3037 var getPrimitiveKey = function getPrimitiveKey(val) { 3038 if (isSymbol(val)) { 3039 return Symbol.prototype.valueOf.call(val); 3040 } 3041 return typeof val + ' | ' + String(val); 3042 }; 3043 3044 var requirePrimitiveKey = function requirePrimitiveKey(val) { 3045 if (!isPrimitive(val)) { 3046 throw new TypeError('key must not be an object'); 3047 } 3048 }; 3049 3050 var globalCache = { 3051 clear: function clear() { 3052 delete __webpack_require__.g[globalKey]; 3053 cache = ensureCache(); 3054 }, 3055 3056 'delete': function deleteKey(key) { 3057 requirePrimitiveKey(key); 3058 delete cache[getPrimitiveKey(key)]; 3059 return !globalCache.has(key); 3060 }, 3061 3062 get: function get(key) { 3063 requirePrimitiveKey(key); 3064 return cache[getPrimitiveKey(key)]; 3065 }, 3066 3067 has: function has(key) { 3068 requirePrimitiveKey(key); 3069 return getPrimitiveKey(key) in cache; 3070 }, 3071 3072 set: function set(key, value) { 3073 requirePrimitiveKey(key); 3074 var primitiveKey = getPrimitiveKey(key); 3075 var props = {}; 3076 props[primitiveKey] = value; 3077 var predicates = {}; 3078 predicates[primitiveKey] = trueThunk; 3079 define(cache, props, predicates); 3080 return globalCache.has(key); 3081 }, 3082 3083 setIfMissingThenGet: function setIfMissingThenGet(key, valueThunk) { 3084 if (globalCache.has(key)) { 3085 return globalCache.get(key); 3086 } 3087 var item = valueThunk(); 3088 globalCache.set(key, item); 3089 return item; 3090 } 3091 }; 3092 3093 module.exports = globalCache; 3094 3095 3096 /***/ }), 3097 3098 /***/ 7115: 3099 /***/ (function(__unused_webpack_module, exports) { 3100 3101 // Copyright (c) 2014 Rafael Caricio. All rights reserved. 3102 // Use of this source code is governed by a BSD-style license that can be 3103 // found in the LICENSE file. 3104 3105 var GradientParser = {}; 3106 3107 GradientParser.parse = (function() { 3108 3109 var tokens = { 3110 linearGradient: /^(\-(webkit|o|ms|moz)\-)?(linear\-gradient)/i, 3111 repeatingLinearGradient: /^(\-(webkit|o|ms|moz)\-)?(repeating\-linear\-gradient)/i, 3112 radialGradient: /^(\-(webkit|o|ms|moz)\-)?(radial\-gradient)/i, 3113 repeatingRadialGradient: /^(\-(webkit|o|ms|moz)\-)?(repeating\-radial\-gradient)/i, 3114 sideOrCorner: /^to (left (top|bottom)|right (top|bottom)|left|right|top|bottom)/i, 3115 extentKeywords: /^(closest\-side|closest\-corner|farthest\-side|farthest\-corner|contain|cover)/, 3116 positionKeywords: /^(left|center|right|top|bottom)/i, 3117 pixelValue: /^(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))px/, 3118 percentageValue: /^(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))\%/, 3119 emValue: /^(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))em/, 3120 angleValue: /^(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))deg/, 3121 startCall: /^\(/, 3122 endCall: /^\)/, 3123 comma: /^,/, 3124 hexColor: /^\#([0-9a-fA-F]+)/, 3125 literalColor: /^([a-zA-Z]+)/, 3126 rgbColor: /^rgb/i, 3127 rgbaColor: /^rgba/i, 3128 number: /^(([0-9]*\.[0-9]+)|([0-9]+\.?))/ 3129 }; 3130 3131 var input = ''; 3132 3133 function error(msg) { 3134 var err = new Error(input + ': ' + msg); 3135 err.source = input; 3136 throw err; 3137 } 3138 3139 function getAST() { 3140 var ast = matchListDefinitions(); 3141 3142 if (input.length > 0) { 3143 error('Invalid input not EOF'); 3144 } 3145 3146 return ast; 3147 } 3148 3149 function matchListDefinitions() { 3150 return matchListing(matchDefinition); 3151 } 3152 3153 function matchDefinition() { 3154 return matchGradient( 3155 'linear-gradient', 3156 tokens.linearGradient, 3157 matchLinearOrientation) || 3158 3159 matchGradient( 3160 'repeating-linear-gradient', 3161 tokens.repeatingLinearGradient, 3162 matchLinearOrientation) || 3163 3164 matchGradient( 3165 'radial-gradient', 3166 tokens.radialGradient, 3167 matchListRadialOrientations) || 3168 3169 matchGradient( 3170 'repeating-radial-gradient', 3171 tokens.repeatingRadialGradient, 3172 matchListRadialOrientations); 3173 } 3174 3175 function matchGradient(gradientType, pattern, orientationMatcher) { 3176 return matchCall(pattern, function(captures) { 3177 3178 var orientation = orientationMatcher(); 3179 if (orientation) { 3180 if (!scan(tokens.comma)) { 3181 error('Missing comma before color stops'); 3182 } 3183 } 3184 3185 return { 3186 type: gradientType, 3187 orientation: orientation, 3188 colorStops: matchListing(matchColorStop) 3189 }; 3190 }); 3191 } 3192 3193 function matchCall(pattern, callback) { 3194 var captures = scan(pattern); 3195 3196 if (captures) { 3197 if (!scan(tokens.startCall)) { 3198 error('Missing ('); 3199 } 3200 3201 result = callback(captures); 3202 3203 if (!scan(tokens.endCall)) { 3204 error('Missing )'); 3205 } 3206 3207 return result; 3208 } 3209 } 3210 3211 function matchLinearOrientation() { 3212 return matchSideOrCorner() || 3213 matchAngle(); 3214 } 3215 3216 function matchSideOrCorner() { 3217 return match('directional', tokens.sideOrCorner, 1); 3218 } 3219 3220 function matchAngle() { 3221 return match('angular', tokens.angleValue, 1); 3222 } 3223 3224 function matchListRadialOrientations() { 3225 var radialOrientations, 3226 radialOrientation = matchRadialOrientation(), 3227 lookaheadCache; 3228 3229 if (radialOrientation) { 3230 radialOrientations = []; 3231 radialOrientations.push(radialOrientation); 3232 3233 lookaheadCache = input; 3234 if (scan(tokens.comma)) { 3235 radialOrientation = matchRadialOrientation(); 3236 if (radialOrientation) { 3237 radialOrientations.push(radialOrientation); 3238 } else { 3239 input = lookaheadCache; 3240 } 3241 } 3242 } 3243 3244 return radialOrientations; 3245 } 3246 3247 function matchRadialOrientation() { 3248 var radialType = matchCircle() || 3249 matchEllipse(); 3250 3251 if (radialType) { 3252 radialType.at = matchAtPosition(); 3253 } else { 3254 var defaultPosition = matchPositioning(); 3255 if (defaultPosition) { 3256 radialType = { 3257 type: 'default-radial', 3258 at: defaultPosition 3259 }; 3260 } 3261 } 3262 3263 return radialType; 3264 } 3265 3266 function matchCircle() { 3267 var circle = match('shape', /^(circle)/i, 0); 3268 3269 if (circle) { 3270 circle.style = matchLength() || matchExtentKeyword(); 3271 } 3272 3273 return circle; 3274 } 3275 3276 function matchEllipse() { 3277 var ellipse = match('shape', /^(ellipse)/i, 0); 3278 3279 if (ellipse) { 3280 ellipse.style = matchDistance() || matchExtentKeyword(); 3281 } 3282 3283 return ellipse; 3284 } 3285 3286 function matchExtentKeyword() { 3287 return match('extent-keyword', tokens.extentKeywords, 1); 3288 } 3289 3290 function matchAtPosition() { 3291 if (match('position', /^at/, 0)) { 3292 var positioning = matchPositioning(); 3293 3294 if (!positioning) { 3295 error('Missing positioning value'); 3296 } 3297 3298 return positioning; 3299 } 3300 } 3301 3302 function matchPositioning() { 3303 var location = matchCoordinates(); 3304 3305 if (location.x || location.y) { 3306 return { 3307 type: 'position', 3308 value: location 3309 }; 3310 } 3311 } 3312 3313 function matchCoordinates() { 3314 return { 3315 x: matchDistance(), 3316 y: matchDistance() 3317 }; 3318 } 3319 3320 function matchListing(matcher) { 3321 var captures = matcher(), 3322 result = []; 3323 3324 if (captures) { 3325 result.push(captures); 3326 while (scan(tokens.comma)) { 3327 captures = matcher(); 3328 if (captures) { 3329 result.push(captures); 3330 } else { 3331 error('One extra comma'); 3332 } 3333 } 3334 } 3335 3336 return result; 3337 } 3338 3339 function matchColorStop() { 3340 var color = matchColor(); 3341 3342 if (!color) { 3343 error('Expected color definition'); 3344 } 3345 3346 color.length = matchDistance(); 3347 return color; 3348 } 3349 3350 function matchColor() { 3351 return matchHexColor() || 3352 matchRGBAColor() || 3353 matchRGBColor() || 3354 matchLiteralColor(); 3355 } 3356 3357 function matchLiteralColor() { 3358 return match('literal', tokens.literalColor, 0); 3359 } 3360 3361 function matchHexColor() { 3362 return match('hex', tokens.hexColor, 1); 3363 } 3364 3365 function matchRGBColor() { 3366 return matchCall(tokens.rgbColor, function() { 3367 return { 3368 type: 'rgb', 3369 value: matchListing(matchNumber) 3370 }; 3371 }); 3372 } 3373 3374 function matchRGBAColor() { 3375 return matchCall(tokens.rgbaColor, function() { 3376 return { 3377 type: 'rgba', 3378 value: matchListing(matchNumber) 3379 }; 3380 }); 3381 } 3382 3383 function matchNumber() { 3384 return scan(tokens.number)[1]; 3385 } 3386 3387 function matchDistance() { 3388 return match('%', tokens.percentageValue, 1) || 3389 matchPositionKeyword() || 3390 matchLength(); 3391 } 3392 3393 function matchPositionKeyword() { 3394 return match('position-keyword', tokens.positionKeywords, 1); 3395 } 3396 3397 function matchLength() { 3398 return match('px', tokens.pixelValue, 1) || 3399 match('em', tokens.emValue, 1); 3400 } 3401 3402 function match(type, pattern, captureIndex) { 3403 var captures = scan(pattern); 3404 if (captures) { 3405 return { 3406 type: type, 3407 value: captures[captureIndex] 3408 }; 3409 } 3410 } 3411 3412 function scan(regexp) { 3413 var captures, 3414 blankCaptures; 3415 3416 blankCaptures = /^[\n\r\t\s]+/.exec(input); 3417 if (blankCaptures) { 3418 consume(blankCaptures[0].length); 3419 } 3420 3421 captures = regexp.exec(input); 3422 if (captures) { 3423 consume(captures[0].length); 3424 } 3425 3426 return captures; 3427 } 3428 3429 function consume(size) { 3430 input = input.substr(size); 3431 } 3432 3433 return function(code) { 3434 input = code.toString(); 3435 return getAST(); 3436 }; 3437 })(); 3438 3439 exports.parse = (GradientParser || {}).parse; 3440 3441 3442 /***/ }), 3443 3444 /***/ 9905: 3445 /***/ (function(module, __unused_webpack_exports, __webpack_require__) { 3446 3447 "use strict"; 3448 3449 3450 var origSymbol = __webpack_require__.g.Symbol; 3451 var hasSymbolSham = __webpack_require__(5682); 3452 3453 module.exports = function hasNativeSymbols() { 3454 if (typeof origSymbol !== 'function') { return false; } 3455 if (typeof Symbol !== 'function') { return false; } 3456 if (typeof origSymbol('foo') !== 'symbol') { return false; } 3457 if (typeof Symbol('bar') !== 'symbol') { return false; } 3458 3459 return hasSymbolSham(); 3460 }; 3461 3462 3463 /***/ }), 3464 3465 /***/ 5682: 3466 /***/ (function(module) { 3467 3468 "use strict"; 3469 3470 3471 /* eslint complexity: [2, 18], max-statements: [2, 33] */ 3472 module.exports = function hasSymbols() { 3473 if (typeof Symbol !== 'function' || typeof Object.getOwnPropertySymbols !== 'function') { return false; } 3474 if (typeof Symbol.iterator === 'symbol') { return true; } 3475 3476 var obj = {}; 3477 var sym = Symbol('test'); 3478 var symObj = Object(sym); 3479 if (typeof sym === 'string') { return false; } 3480 3481 if (Object.prototype.toString.call(sym) !== '[object Symbol]') { return false; } 3482 if (Object.prototype.toString.call(symObj) !== '[object Symbol]') { return false; } 3483 3484 // temp disabled per https://github.com/ljharb/object.assign/issues/17 3485 // if (sym instanceof Symbol) { return false; } 3486 // temp disabled per https://github.com/WebReflection/get-own-property-symbols/issues/4 3487 // if (!(symObj instanceof Symbol)) { return false; } 3488 3489 // if (typeof Symbol.prototype.toString !== 'function') { return false; } 3490 // if (String(sym) !== Symbol.prototype.toString.call(sym)) { return false; } 3491 3492 var symVal = 42; 3493 obj[sym] = symVal; 3494 for (sym in obj) { return false; } // eslint-disable-line no-restricted-syntax 3495 if (typeof Object.keys === 'function' && Object.keys(obj).length !== 0) { return false; } 3496 3497 if (typeof Object.getOwnPropertyNames === 'function' && Object.getOwnPropertyNames(obj).length !== 0) { return false; } 3498 3499 var syms = Object.getOwnPropertySymbols(obj); 3500 if (syms.length !== 1 || syms[0] !== sym) { return false; } 3501 3502 if (!Object.prototype.propertyIsEnumerable.call(obj, sym)) { return false; } 3503 3504 if (typeof Object.getOwnPropertyDescriptor === 'function') { 3505 var descriptor = Object.getOwnPropertyDescriptor(obj, sym); 3506 if (descriptor.value !== symVal || descriptor.enumerable !== true) { return false; } 3507 } 3508 3509 return true; 3510 }; 3511 3512 3513 /***/ }), 3514 3515 /***/ 81: 3516 /***/ (function(module) { 3517 3518 "use strict"; 3519 3520 3521 /* eslint complexity: [2, 18], max-statements: [2, 33] */ 3522 module.exports = function hasSymbols() { 3523 if (typeof Symbol !== 'function' || typeof Object.getOwnPropertySymbols !== 'function') { return false; } 3524 if (typeof Symbol.iterator === 'symbol') { return true; } 3525 3526 var obj = {}; 3527 var sym = Symbol('test'); 3528 var symObj = Object(sym); 3529 if (typeof sym === 'string') { return false; } 3530 3531 if (Object.prototype.toString.call(sym) !== '[object Symbol]') { return false; } 3532 if (Object.prototype.toString.call(symObj) !== '[object Symbol]') { return false; } 3533 3534 // temp disabled per https://github.com/ljharb/object.assign/issues/17 3535 // if (sym instanceof Symbol) { return false; } 3536 // temp disabled per https://github.com/WebReflection/get-own-property-symbols/issues/4 3537 // if (!(symObj instanceof Symbol)) { return false; } 3538 3539 // if (typeof Symbol.prototype.toString !== 'function') { return false; } 3540 // if (String(sym) !== Symbol.prototype.toString.call(sym)) { return false; } 3541 3542 var symVal = 42; 3543 obj[sym] = symVal; 3544 for (sym in obj) { return false; } // eslint-disable-line no-restricted-syntax, no-unreachable-loop 3545 if (typeof Object.keys === 'function' && Object.keys(obj).length !== 0) { return false; } 3546 3547 if (typeof Object.getOwnPropertyNames === 'function' && Object.getOwnPropertyNames(obj).length !== 0) { return false; } 3548 3549 var syms = Object.getOwnPropertySymbols(obj); 3550 if (syms.length !== 1 || syms[0] !== sym) { return false; } 3551 3552 if (!Object.prototype.propertyIsEnumerable.call(obj, sym)) { return false; } 3553 3554 if (typeof Object.getOwnPropertyDescriptor === 'function') { 3555 var descriptor = Object.getOwnPropertyDescriptor(obj, sym); 3556 if (descriptor.value !== symVal || descriptor.enumerable !== true) { return false; } 3557 } 3558 3559 return true; 3560 }; 3561 3562 3563 /***/ }), 3564 3565 /***/ 4111: 3566 /***/ (function(module, __unused_webpack_exports, __webpack_require__) { 3567 3568 "use strict"; 3569 3570 3571 var hasSymbols = __webpack_require__(81); 3572 3573 module.exports = function hasToStringTagShams() { 3574 return hasSymbols() && !!Symbol.toStringTag; 3575 }; 3576 3577 3578 /***/ }), 3579 3580 /***/ 9284: 3581 /***/ (function(module, __unused_webpack_exports, __webpack_require__) { 3582 3583 "use strict"; 3584 3585 3586 var bind = __webpack_require__(1930); 3587 3588 module.exports = bind.call(Function.call, Object.prototype.hasOwnProperty); 3589 3590 3591 /***/ }), 3592 3593 /***/ 3138: 3594 /***/ (function(module) { 3595 3596 module.exports = 3597 /******/ (function(modules) { // webpackBootstrap 3598 /******/ // The module cache 3599 /******/ var installedModules = {}; 3600 /******/ 3601 /******/ // The require function 3602 /******/ function __nested_webpack_require_187__(moduleId) { 3603 /******/ 3604 /******/ // Check if module is in cache 3605 /******/ if(installedModules[moduleId]) 3606 /******/ return installedModules[moduleId].exports; 3607 /******/ 3608 /******/ // Create a new module (and put it into the cache) 3609 /******/ var module = installedModules[moduleId] = { 3610 /******/ exports: {}, 3611 /******/ id: moduleId, 3612 /******/ loaded: false 3613 /******/ }; 3614 /******/ 3615 /******/ // Execute the module function 3616 /******/ modules[moduleId].call(module.exports, module, module.exports, __nested_webpack_require_187__); 3617 /******/ 3618 /******/ // Flag the module as loaded 3619 /******/ module.loaded = true; 3620 /******/ 3621 /******/ // Return the exports of the module 3622 /******/ return module.exports; 3623 /******/ } 3624 /******/ 3625 /******/ 3626 /******/ // expose the modules object (__webpack_modules__) 3627 /******/ __nested_webpack_require_187__.m = modules; 3628 /******/ 3629 /******/ // expose the module cache 3630 /******/ __nested_webpack_require_187__.c = installedModules; 3631 /******/ 3632 /******/ // __webpack_public_path__ 3633 /******/ __nested_webpack_require_187__.p = ""; 3634 /******/ 3635 /******/ // Load entry module and return exports 3636 /******/ return __nested_webpack_require_187__(0); 3637 /******/ }) 3638 /************************************************************************/ 3639 /******/ ([ 3640 /* 0 */ 3641 /***/ (function(module, exports, __nested_webpack_require_1468__) { 3642 3643 module.exports = __nested_webpack_require_1468__(1); 3644 3645 3646 /***/ }), 3647 /* 1 */ 3648 /***/ (function(module, exports, __nested_webpack_require_1587__) { 3649 3650 'use strict'; 3651 3652 Object.defineProperty(exports, "__esModule", { 3653 value: true 3654 }); 3655 3656 var _utils = __nested_webpack_require_1587__(2); 3657 3658 Object.defineProperty(exports, 'combineChunks', { 3659 enumerable: true, 3660 get: function get() { 3661 return _utils.combineChunks; 3662 } 3663 }); 3664 Object.defineProperty(exports, 'fillInChunks', { 3665 enumerable: true, 3666 get: function get() { 3667 return _utils.fillInChunks; 3668 } 3669 }); 3670 Object.defineProperty(exports, 'findAll', { 3671 enumerable: true, 3672 get: function get() { 3673 return _utils.findAll; 3674 } 3675 }); 3676 Object.defineProperty(exports, 'findChunks', { 3677 enumerable: true, 3678 get: function get() { 3679 return _utils.findChunks; 3680 } 3681 }); 3682 3683 /***/ }), 3684 /* 2 */ 3685 /***/ (function(module, exports) { 3686 3687 'use strict'; 3688 3689 Object.defineProperty(exports, "__esModule", { 3690 value: true 3691 }); 3692 3693 3694 /** 3695 * Creates an array of chunk objects representing both higlightable and non highlightable pieces of text that match each search word. 3696 * @return Array of "chunks" (where a Chunk is { start:number, end:number, highlight:boolean }) 3697 */ 3698 var findAll = exports.findAll = function findAll(_ref) { 3699 var autoEscape = _ref.autoEscape, 3700 _ref$caseSensitive = _ref.caseSensitive, 3701 caseSensitive = _ref$caseSensitive === undefined ? false : _ref$caseSensitive, 3702 _ref$findChunks = _ref.findChunks, 3703 findChunks = _ref$findChunks === undefined ? defaultFindChunks : _ref$findChunks, 3704 sanitize = _ref.sanitize, 3705 searchWords = _ref.searchWords, 3706 textToHighlight = _ref.textToHighlight; 3707 return fillInChunks({ 3708 chunksToHighlight: combineChunks({ 3709 chunks: findChunks({ 3710 autoEscape: autoEscape, 3711 caseSensitive: caseSensitive, 3712 sanitize: sanitize, 3713 searchWords: searchWords, 3714 textToHighlight: textToHighlight 3715 }) 3716 }), 3717 totalLength: textToHighlight ? textToHighlight.length : 0 3718 }); 3719 }; 3720 3721 /** 3722 * Takes an array of {start:number, end:number} objects and combines chunks that overlap into single chunks. 3723 * @return {start:number, end:number}[] 3724 */ 3725 3726 3727 var combineChunks = exports.combineChunks = function combineChunks(_ref2) { 3728 var chunks = _ref2.chunks; 3729 3730 chunks = chunks.sort(function (first, second) { 3731 return first.start - second.start; 3732 }).reduce(function (processedChunks, nextChunk) { 3733 // First chunk just goes straight in the array... 3734 if (processedChunks.length === 0) { 3735 return [nextChunk]; 3736 } else { 3737 // ... subsequent chunks get checked to see if they overlap... 3738 var prevChunk = processedChunks.pop(); 3739 if (nextChunk.start <= prevChunk.end) { 3740 // It may be the case that prevChunk completely surrounds nextChunk, so take the 3741 // largest of the end indeces. 3742 var endIndex = Math.max(prevChunk.end, nextChunk.end); 3743 processedChunks.push({ highlight: false, start: prevChunk.start, end: endIndex }); 3744 } else { 3745 processedChunks.push(prevChunk, nextChunk); 3746 } 3747 return processedChunks; 3748 } 3749 }, []); 3750 3751 return chunks; 3752 }; 3753 3754 /** 3755 * Examine text for any matches. 3756 * If we find matches, add them to the returned array as a "chunk" object ({start:number, end:number}). 3757 * @return {start:number, end:number}[] 3758 */ 3759 var defaultFindChunks = function defaultFindChunks(_ref3) { 3760 var autoEscape = _ref3.autoEscape, 3761 caseSensitive = _ref3.caseSensitive, 3762 _ref3$sanitize = _ref3.sanitize, 3763 sanitize = _ref3$sanitize === undefined ? defaultSanitize : _ref3$sanitize, 3764 searchWords = _ref3.searchWords, 3765 textToHighlight = _ref3.textToHighlight; 3766 3767 textToHighlight = sanitize(textToHighlight); 3768 3769 return searchWords.filter(function (searchWord) { 3770 return searchWord; 3771 }) // Remove empty words 3772 .reduce(function (chunks, searchWord) { 3773 searchWord = sanitize(searchWord); 3774 3775 if (autoEscape) { 3776 searchWord = escapeRegExpFn(searchWord); 3777 } 3778 3779 var regex = new RegExp(searchWord, caseSensitive ? 'g' : 'gi'); 3780 3781 var match = void 0; 3782 while (match = regex.exec(textToHighlight)) { 3783 var _start = match.index; 3784 var _end = regex.lastIndex; 3785 // We do not return zero-length matches 3786 if (_end > _start) { 3787 chunks.push({ highlight: false, start: _start, end: _end }); 3788 } 3789 3790 // Prevent browsers like Firefox from getting stuck in an infinite loop 3791 // See http://www.regexguru.com/2008/04/watch-out-for-zero-length-matches/ 3792 if (match.index === regex.lastIndex) { 3793 regex.lastIndex++; 3794 } 3795 } 3796 3797 return chunks; 3798 }, []); 3799 }; 3800 // Allow the findChunks to be overridden in findAll, 3801 // but for backwards compatibility we export as the old name 3802 exports.findChunks = defaultFindChunks; 3803 3804 /** 3805 * Given a set of chunks to highlight, create an additional set of chunks 3806 * to represent the bits of text between the highlighted text. 3807 * @param chunksToHighlight {start:number, end:number}[] 3808 * @param totalLength number 3809 * @return {start:number, end:number, highlight:boolean}[] 3810 */ 3811 3812 var fillInChunks = exports.fillInChunks = function fillInChunks(_ref4) { 3813 var chunksToHighlight = _ref4.chunksToHighlight, 3814 totalLength = _ref4.totalLength; 3815 3816 var allChunks = []; 3817 var append = function append(start, end, highlight) { 3818 if (end - start > 0) { 3819 allChunks.push({ 3820 start: start, 3821 end: end, 3822 highlight: highlight 3823 }); 3824 } 3825 }; 3826 3827 if (chunksToHighlight.length === 0) { 3828 append(0, totalLength, false); 3829 } else { 3830 var lastIndex = 0; 3831 chunksToHighlight.forEach(function (chunk) { 3832 append(lastIndex, chunk.start, false); 3833 append(chunk.start, chunk.end, true); 3834 lastIndex = chunk.end; 3835 }); 3836 append(lastIndex, totalLength, false); 3837 } 3838 return allChunks; 3839 }; 3840 3841 function defaultSanitize(string) { 3842 return string; 3843 } 3844 3845 function escapeRegExpFn(string) { 3846 return string.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, '\\$&'); 3847 } 3848 3849 /***/ }) 3850 /******/ ]); 3851 3852 3853 /***/ }), 3854 3855 /***/ 1281: 3856 /***/ (function(module, __unused_webpack_exports, __webpack_require__) { 3857 3858 "use strict"; 3859 3860 3861 var reactIs = __webpack_require__(338); 3862 3863 /** 3864 * Copyright 2015, Yahoo! Inc. 3865 * Copyrights licensed under the New BSD License. See the accompanying LICENSE file for terms. 3866 */ 3867 var REACT_STATICS = { 3868 childContextTypes: true, 3869 contextType: true, 3870 contextTypes: true, 3871 defaultProps: true, 3872 displayName: true, 3873 getDefaultProps: true, 3874 getDerivedStateFromError: true, 3875 getDerivedStateFromProps: true, 3876 mixins: true, 3877 propTypes: true, 3878 type: true 3879 }; 3880 var KNOWN_STATICS = { 3881 name: true, 3882 length: true, 3883 prototype: true, 3884 caller: true, 3885 callee: true, 3886 arguments: true, 3887 arity: true 3888 }; 3889 var FORWARD_REF_STATICS = { 3890 '$$typeof': true, 3891 render: true, 3892 defaultProps: true, 3893 displayName: true, 3894 propTypes: true 3895 }; 3896 var MEMO_STATICS = { 3897 '$$typeof': true, 3898 compare: true, 3899 defaultProps: true, 3900 displayName: true, 3901 propTypes: true, 3902 type: true 3903 }; 3904 var TYPE_STATICS = {}; 3905 TYPE_STATICS[reactIs.ForwardRef] = FORWARD_REF_STATICS; 3906 TYPE_STATICS[reactIs.Memo] = MEMO_STATICS; 3907 3908 function getStatics(component) { 3909 // React v16.11 and below 3910 if (reactIs.isMemo(component)) { 3911 return MEMO_STATICS; 3912 } // React v16.12 and above 3913 3914 3915 return TYPE_STATICS[component['$$typeof']] || REACT_STATICS; 3916 } 3917 3918 var defineProperty = Object.defineProperty; 3919 var getOwnPropertyNames = Object.getOwnPropertyNames; 3920 var getOwnPropertySymbols = Object.getOwnPropertySymbols; 3921 var getOwnPropertyDescriptor = Object.getOwnPropertyDescriptor; 3922 var getPrototypeOf = Object.getPrototypeOf; 3923 var objectPrototype = Object.prototype; 3924 function hoistNonReactStatics(targetComponent, sourceComponent, blacklist) { 3925 if (typeof sourceComponent !== 'string') { 3926 // don't hoist over string (html) components 3927 if (objectPrototype) { 3928 var inheritedComponent = getPrototypeOf(sourceComponent); 3929 3930 if (inheritedComponent && inheritedComponent !== objectPrototype) { 3931 hoistNonReactStatics(targetComponent, inheritedComponent, blacklist); 3932 } 3933 } 3934 3935 var keys = getOwnPropertyNames(sourceComponent); 3936 3937 if (getOwnPropertySymbols) { 3938 keys = keys.concat(getOwnPropertySymbols(sourceComponent)); 3939 } 3940 3941 var targetStatics = getStatics(targetComponent); 3942 var sourceStatics = getStatics(sourceComponent); 3943 3944 for (var i = 0; i < keys.length; ++i) { 3945 var key = keys[i]; 3946 3947 if (!KNOWN_STATICS[key] && !(blacklist && blacklist[key]) && !(sourceStatics && sourceStatics[key]) && !(targetStatics && targetStatics[key])) { 3948 var descriptor = getOwnPropertyDescriptor(sourceComponent, key); 3949 3950 try { 3951 // Avoid failures from read-only properties 3952 defineProperty(targetComponent, key, descriptor); 3953 } catch (e) {} 3954 } 3955 } 3956 } 3957 3958 return targetComponent; 3959 } 3960 3961 module.exports = hoistNonReactStatics; 3962 3963 3964 /***/ }), 3965 3966 /***/ 5443: 3967 /***/ (function(module) { 3968 3969 "use strict"; 3970 3971 3972 var fnToStr = Function.prototype.toString; 3973 var reflectApply = typeof Reflect === 'object' && Reflect !== null && Reflect.apply; 3974 var badArrayLike; 3975 var isCallableMarker; 3976 if (typeof reflectApply === 'function' && typeof Object.defineProperty === 'function') { 3977 try { 3978 badArrayLike = Object.defineProperty({}, 'length', { 3979 get: function () { 3980 throw isCallableMarker; 3981 } 3982 }); 3983 isCallableMarker = {}; 3984 // eslint-disable-next-line no-throw-literal 3985 reflectApply(function () { throw 42; }, null, badArrayLike); 3986 } catch (_) { 3987 if (_ !== isCallableMarker) { 3988 reflectApply = null; 3989 } 3990 } 3991 } else { 3992 reflectApply = null; 3993 } 3994 3995 var constructorRegex = /^\s*class\b/; 3996 var isES6ClassFn = function isES6ClassFunction(value) { 3997 try { 3998 var fnStr = fnToStr.call(value); 3999 return constructorRegex.test(fnStr); 4000 } catch (e) { 4001 return false; // not a function 4002 } 4003 }; 4004 4005 var tryFunctionObject = function tryFunctionToStr(value) { 4006 try { 4007 if (isES6ClassFn(value)) { return false; } 4008 fnToStr.call(value); 4009 return true; 4010 } catch (e) { 4011 return false; 4012 } 4013 }; 4014 var toStr = Object.prototype.toString; 4015 var fnClass = '[object Function]'; 4016 var genClass = '[object GeneratorFunction]'; 4017 var hasToStringTag = typeof Symbol === 'function' && typeof Symbol.toStringTag === 'symbol'; 4018 4019 module.exports = reflectApply 4020 ? function isCallable(value) { 4021 if (!value) { return false; } 4022 if (typeof value !== 'function' && typeof value !== 'object') { return false; } 4023 if (typeof value === 'function' && !value.prototype) { return true; } 4024 try { 4025 reflectApply(value, null, badArrayLike); 4026 } catch (e) { 4027 if (e !== isCallableMarker) { return false; } 4028 } 4029 return !isES6ClassFn(value); 4030 } 4031 : function isCallable(value) { 4032 if (!value) { return false; } 4033 if (typeof value !== 'function' && typeof value !== 'object') { return false; } 4034 if (typeof value === 'function' && !value.prototype) { return true; } 4035 if (hasToStringTag) { return tryFunctionObject(value); } 4036 if (isES6ClassFn(value)) { return false; } 4037 var strClass = toStr.call(value); 4038 return strClass === fnClass || strClass === genClass; 4039 }; 4040 4041 4042 /***/ }), 4043 4044 /***/ 8659: 4045 /***/ (function(module) { 4046 4047 "use strict"; 4048 4049 4050 var getDay = Date.prototype.getDay; 4051 var tryDateObject = function tryDateGetDayCall(value) { 4052 try { 4053 getDay.call(value); 4054 return true; 4055 } catch (e) { 4056 return false; 4057 } 4058 }; 4059 4060 var toStr = Object.prototype.toString; 4061 var dateClass = '[object Date]'; 4062 var hasToStringTag = typeof Symbol === 'function' && typeof Symbol.toStringTag === 'symbol'; 4063 4064 module.exports = function isDateObject(value) { 4065 if (typeof value !== 'object' || value === null) { 4066 return false; 4067 } 4068 return hasToStringTag ? tryDateObject(value) : toStr.call(value) === dateClass; 4069 }; 4070 4071 4072 /***/ }), 4073 4074 /***/ 3082: 4075 /***/ (function(module, __unused_webpack_exports, __webpack_require__) { 4076 4077 "use strict"; 4078 4079 4080 var toStr = Object.prototype.toString; 4081 var hasSymbols = __webpack_require__(9905)(); 4082 4083 if (hasSymbols) { 4084 var symToStr = Symbol.prototype.toString; 4085 var symStringRegex = /^Symbol\(.*\)$/; 4086 var isSymbolObject = function isRealSymbolObject(value) { 4087 if (typeof value.valueOf() !== 'symbol') { 4088 return false; 4089 } 4090 return symStringRegex.test(symToStr.call(value)); 4091 }; 4092 4093 module.exports = function isSymbol(value) { 4094 if (typeof value === 'symbol') { 4095 return true; 4096 } 4097 if (toStr.call(value) !== '[object Symbol]') { 4098 return false; 4099 } 4100 try { 4101 return isSymbolObject(value); 4102 } catch (e) { 4103 return false; 4104 } 4105 }; 4106 } else { 4107 4108 module.exports = function isSymbol(value) { 4109 // this environment does not support Symbols. 4110 return false && 0; 4111 }; 4112 } 4113 4114 4115 /***/ }), 4116 4117 /***/ 5834: 4118 /***/ (function(module, exports) { 4119 4120 Object.defineProperty(exports, "__esModule", ({ 4121 value: true 4122 })); 4123 exports["default"] = isTouchDevice; 4124 function isTouchDevice() { 4125 return !!(typeof window !== 'undefined' && ('ontouchstart' in window || window.DocumentTouch && typeof document !== 'undefined' && document instanceof window.DocumentTouch)) || !!(typeof navigator !== 'undefined' && (navigator.maxTouchPoints || navigator.msMaxTouchPoints)); 4126 } 4127 module.exports = exports['default']; 4128 4129 /***/ }), 4130 4131 /***/ 4937: 4132 /***/ (function(module, __unused_webpack_exports, __webpack_require__) { 4133 4134 var root = __webpack_require__(158); 4135 4136 /** Built-in value references. */ 4137 var Symbol = root.Symbol; 4138 4139 module.exports = Symbol; 4140 4141 4142 /***/ }), 4143 4144 /***/ 194: 4145 /***/ (function(module, __unused_webpack_exports, __webpack_require__) { 4146 4147 var Symbol = __webpack_require__(4937), 4148 getRawTag = __webpack_require__(5401), 4149 objectToString = __webpack_require__(2445); 4150 4151 /** `Object#toString` result references. */ 4152 var nullTag = '[object Null]', 4153 undefinedTag = '[object Undefined]'; 4154 4155 /** Built-in value references. */ 4156 var symToStringTag = Symbol ? Symbol.toStringTag : undefined; 4157 4158 /** 4159 * The base implementation of `getTag` without fallbacks for buggy environments. 4160 * 4161 * @private 4162 * @param {*} value The value to query. 4163 * @returns {string} Returns the `toStringTag`. 4164 */ 4165 function baseGetTag(value) { 4166 if (value == null) { 4167 return value === undefined ? undefinedTag : nullTag; 4168 } 4169 return (symToStringTag && symToStringTag in Object(value)) 4170 ? getRawTag(value) 4171 : objectToString(value); 4172 } 4173 4174 module.exports = baseGetTag; 4175 4176 4177 /***/ }), 4178 4179 /***/ 2383: 4180 /***/ (function(module, __unused_webpack_exports, __webpack_require__) { 4181 4182 var trimmedEndIndex = __webpack_require__(8725); 4183 4184 /** Used to match leading whitespace. */ 4185 var reTrimStart = /^\s+/; 4186 4187 /** 4188 * The base implementation of `_.trim`. 4189 * 4190 * @private 4191 * @param {string} string The string to trim. 4192 * @returns {string} Returns the trimmed string. 4193 */ 4194 function baseTrim(string) { 4195 return string 4196 ? string.slice(0, trimmedEndIndex(string) + 1).replace(reTrimStart, '') 4197 : string; 4198 } 4199 4200 module.exports = baseTrim; 4201 4202 4203 /***/ }), 4204 4205 /***/ 4528: 4206 /***/ (function(module, __unused_webpack_exports, __webpack_require__) { 4207 4208 /** Detect free variable `global` from Node.js. */ 4209 var freeGlobal = typeof __webpack_require__.g == 'object' && __webpack_require__.g && __webpack_require__.g.Object === Object && __webpack_require__.g; 4210 4211 module.exports = freeGlobal; 4212 4213 4214 /***/ }), 4215 4216 /***/ 5401: 4217 /***/ (function(module, __unused_webpack_exports, __webpack_require__) { 4218 4219 var Symbol = __webpack_require__(4937); 4220 4221 /** Used for built-in method references. */ 4222 var objectProto = Object.prototype; 4223 4224 /** Used to check objects for own properties. */ 4225 var hasOwnProperty = objectProto.hasOwnProperty; 4226 4227 /** 4228 * Used to resolve the 4229 * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring) 4230 * of values. 4231 */ 4232 var nativeObjectToString = objectProto.toString; 4233 4234 /** Built-in value references. */ 4235 var symToStringTag = Symbol ? Symbol.toStringTag : undefined; 4236 4237 /** 4238 * A specialized version of `baseGetTag` which ignores `Symbol.toStringTag` values. 4239 * 4240 * @private 4241 * @param {*} value The value to query. 4242 * @returns {string} Returns the raw `toStringTag`. 4243 */ 4244 function getRawTag(value) { 4245 var isOwn = hasOwnProperty.call(value, symToStringTag), 4246 tag = value[symToStringTag]; 4247 4248 try { 4249 value[symToStringTag] = undefined; 4250 var unmasked = true; 4251 } catch (e) {} 4252 4253 var result = nativeObjectToString.call(value); 4254 if (unmasked) { 4255 if (isOwn) { 4256 value[symToStringTag] = tag; 4257 } else { 4258 delete value[symToStringTag]; 4259 } 4260 } 4261 return result; 4262 } 4263 4264 module.exports = getRawTag; 4265 4266 4267 /***/ }), 4268 4269 /***/ 2445: 4270 /***/ (function(module) { 4271 4272 /** Used for built-in method references. */ 4273 var objectProto = Object.prototype; 4274 4275 /** 4276 * Used to resolve the 4277 * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring) 4278 * of values. 4279 */ 4280 var nativeObjectToString = objectProto.toString; 4281 4282 /** 4283 * Converts `value` to a string using `Object.prototype.toString`. 4284 * 4285 * @private 4286 * @param {*} value The value to convert. 4287 * @returns {string} Returns the converted string. 4288 */ 4289 function objectToString(value) { 4290 return nativeObjectToString.call(value); 4291 } 4292 4293 module.exports = objectToString; 4294 4295 4296 /***/ }), 4297 4298 /***/ 158: 4299 /***/ (function(module, __unused_webpack_exports, __webpack_require__) { 4300 4301 var freeGlobal = __webpack_require__(4528); 4302 4303 /** Detect free variable `self`. */ 4304 var freeSelf = typeof self == 'object' && self && self.Object === Object && self; 4305 4306 /** Used as a reference to the global object. */ 4307 var root = freeGlobal || freeSelf || Function('return this')(); 4308 4309 module.exports = root; 4310 4311 4312 /***/ }), 4313 4314 /***/ 8725: 4315 /***/ (function(module) { 4316 4317 /** Used to match a single whitespace character. */ 4318 var reWhitespace = /\s/; 4319 4320 /** 4321 * Used by `_.trim` and `_.trimEnd` to get the index of the last non-whitespace 4322 * character of `string`. 4323 * 4324 * @private 4325 * @param {string} string The string to inspect. 4326 * @returns {number} Returns the index of the last non-whitespace character. 4327 */ 4328 function trimmedEndIndex(string) { 4329 var index = string.length; 4330 4331 while (index-- && reWhitespace.test(string.charAt(index))) {} 4332 return index; 4333 } 4334 4335 module.exports = trimmedEndIndex; 4336 4337 4338 /***/ }), 4339 4340 /***/ 6897: 4341 /***/ (function(module, __unused_webpack_exports, __webpack_require__) { 4342 4343 var isObject = __webpack_require__(3619), 4344 now = __webpack_require__(8253), 4345 toNumber = __webpack_require__(5053); 4346 4347 /** Error message constants. */ 4348 var FUNC_ERROR_TEXT = 'Expected a function'; 4349 4350 /* Built-in method references for those with the same name as other `lodash` methods. */ 4351 var nativeMax = Math.max, 4352 nativeMin = Math.min; 4353 4354 /** 4355 * Creates a debounced function that delays invoking `func` until after `wait` 4356 * milliseconds have elapsed since the last time the debounced function was 4357 * invoked. The debounced function comes with a `cancel` method to cancel 4358 * delayed `func` invocations and a `flush` method to immediately invoke them. 4359 * Provide `options` to indicate whether `func` should be invoked on the 4360 * leading and/or trailing edge of the `wait` timeout. The `func` is invoked 4361 * with the last arguments provided to the debounced function. Subsequent 4362 * calls to the debounced function return the result of the last `func` 4363 * invocation. 4364 * 4365 * **Note:** If `leading` and `trailing` options are `true`, `func` is 4366 * invoked on the trailing edge of the timeout only if the debounced function 4367 * is invoked more than once during the `wait` timeout. 4368 * 4369 * If `wait` is `0` and `leading` is `false`, `func` invocation is deferred 4370 * until to the next tick, similar to `setTimeout` with a timeout of `0`. 4371 * 4372 * See [David Corbacho's article](https://css-tricks.com/debouncing-throttling-explained-examples/) 4373 * for details over the differences between `_.debounce` and `_.throttle`. 4374 * 4375 * @static 4376 * @memberOf _ 4377 * @since 0.1.0 4378 * @category Function 4379 * @param {Function} func The function to debounce. 4380 * @param {number} [wait=0] The number of milliseconds to delay. 4381 * @param {Object} [options={}] The options object. 4382 * @param {boolean} [options.leading=false] 4383 * Specify invoking on the leading edge of the timeout. 4384 * @param {number} [options.maxWait] 4385 * The maximum time `func` is allowed to be delayed before it's invoked. 4386 * @param {boolean} [options.trailing=true] 4387 * Specify invoking on the trailing edge of the timeout. 4388 * @returns {Function} Returns the new debounced function. 4389 * @example 4390 * 4391 * // Avoid costly calculations while the window size is in flux. 4392 * jQuery(window).on('resize', _.debounce(calculateLayout, 150)); 4393 * 4394 * // Invoke `sendMail` when clicked, debouncing subsequent calls. 4395 * jQuery(element).on('click', _.debounce(sendMail, 300, { 4396 * 'leading': true, 4397 * 'trailing': false 4398 * })); 4399 * 4400 * // Ensure `batchLog` is invoked once after 1 second of debounced calls. 4401 * var debounced = _.debounce(batchLog, 250, { 'maxWait': 1000 }); 4402 * var source = new EventSource('/stream'); 4403 * jQuery(source).on('message', debounced); 4404 * 4405 * // Cancel the trailing debounced invocation. 4406 * jQuery(window).on('popstate', debounced.cancel); 4407 */ 4408 function debounce(func, wait, options) { 4409 var lastArgs, 4410 lastThis, 4411 maxWait, 4412 result, 4413 timerId, 4414 lastCallTime, 4415 lastInvokeTime = 0, 4416 leading = false, 4417 maxing = false, 4418 trailing = true; 4419 4420 if (typeof func != 'function') { 4421 throw new TypeError(FUNC_ERROR_TEXT); 4422 } 4423 wait = toNumber(wait) || 0; 4424 if (isObject(options)) { 4425 leading = !!options.leading; 4426 maxing = 'maxWait' in options; 4427 maxWait = maxing ? nativeMax(toNumber(options.maxWait) || 0, wait) : maxWait; 4428 trailing = 'trailing' in options ? !!options.trailing : trailing; 4429 } 4430 4431 function invokeFunc(time) { 4432 var args = lastArgs, 4433 thisArg = lastThis; 4434 4435 lastArgs = lastThis = undefined; 4436 lastInvokeTime = time; 4437 result = func.apply(thisArg, args); 4438 return result; 4439 } 4440 4441 function leadingEdge(time) { 4442 // Reset any `maxWait` timer. 4443 lastInvokeTime = time; 4444 // Start the timer for the trailing edge. 4445 timerId = setTimeout(timerExpired, wait); 4446 // Invoke the leading edge. 4447 return leading ? invokeFunc(time) : result; 4448 } 4449 4450 function remainingWait(time) { 4451 var timeSinceLastCall = time - lastCallTime, 4452 timeSinceLastInvoke = time - lastInvokeTime, 4453 timeWaiting = wait - timeSinceLastCall; 4454 4455 return maxing 4456 ? nativeMin(timeWaiting, maxWait - timeSinceLastInvoke) 4457 : timeWaiting; 4458 } 4459 4460 function shouldInvoke(time) { 4461 var timeSinceLastCall = time - lastCallTime, 4462 timeSinceLastInvoke = time - lastInvokeTime; 4463 4464 // Either this is the first call, activity has stopped and we're at the 4465 // trailing edge, the system time has gone backwards and we're treating 4466 // it as the trailing edge, or we've hit the `maxWait` limit. 4467 return (lastCallTime === undefined || (timeSinceLastCall >= wait) || 4468 (timeSinceLastCall < 0) || (maxing && timeSinceLastInvoke >= maxWait)); 4469 } 4470 4471 function timerExpired() { 4472 var time = now(); 4473 if (shouldInvoke(time)) { 4474 return trailingEdge(time); 4475 } 4476 // Restart the timer. 4477 timerId = setTimeout(timerExpired, remainingWait(time)); 4478 } 4479 4480 function trailingEdge(time) { 4481 timerId = undefined; 4482 4483 // Only invoke if we have `lastArgs` which means `func` has been 4484 // debounced at least once. 4485 if (trailing && lastArgs) { 4486 return invokeFunc(time); 4487 } 4488 lastArgs = lastThis = undefined; 4489 return result; 4490 } 4491 4492 function cancel() { 4493 if (timerId !== undefined) { 4494 clearTimeout(timerId); 4495 } 4496 lastInvokeTime = 0; 4497 lastArgs = lastCallTime = lastThis = timerId = undefined; 4498 } 4499 4500 function flush() { 4501 return timerId === undefined ? result : trailingEdge(now()); 4502 } 4503 4504 function debounced() { 4505 var time = now(), 4506 isInvoking = shouldInvoke(time); 4507 4508 lastArgs = arguments; 4509 lastThis = this; 4510 lastCallTime = time; 4511 4512 if (isInvoking) { 4513 if (timerId === undefined) { 4514 return leadingEdge(lastCallTime); 4515 } 4516 if (maxing) { 4517 // Handle invocations in a tight loop. 4518 clearTimeout(timerId); 4519 timerId = setTimeout(timerExpired, wait); 4520 return invokeFunc(lastCallTime); 4521 } 4522 } 4523 if (timerId === undefined) { 4524 timerId = setTimeout(timerExpired, wait); 4525 } 4526 return result; 4527 } 4528 debounced.cancel = cancel; 4529 debounced.flush = flush; 4530 return debounced; 4531 } 4532 4533 module.exports = debounce; 4534 4535 4536 /***/ }), 4537 4538 /***/ 3619: 4539 /***/ (function(module) { 4540 4541 /** 4542 * Checks if `value` is the 4543 * [language type](http://www.ecma-international.org/ecma-262/7.0/#sec-ecmascript-language-types) 4544 * of `Object`. (e.g. arrays, functions, objects, regexes, `new Number(0)`, and `new String('')`) 4545 * 4546 * @static 4547 * @memberOf _ 4548 * @since 0.1.0 4549 * @category Lang 4550 * @param {*} value The value to check. 4551 * @returns {boolean} Returns `true` if `value` is an object, else `false`. 4552 * @example 4553 * 4554 * _.isObject({}); 4555 * // => true 4556 * 4557 * _.isObject([1, 2, 3]); 4558 * // => true 4559 * 4560 * _.isObject(_.noop); 4561 * // => true 4562 * 4563 * _.isObject(null); 4564 * // => false 4565 */ 4566 function isObject(value) { 4567 var type = typeof value; 4568 return value != null && (type == 'object' || type == 'function'); 4569 } 4570 4571 module.exports = isObject; 4572 4573 4574 /***/ }), 4575 4576 /***/ 1653: 4577 /***/ (function(module) { 4578 4579 /** 4580 * Checks if `value` is object-like. A value is object-like if it's not `null` 4581 * and has a `typeof` result of "object". 4582 * 4583 * @static 4584 * @memberOf _ 4585 * @since 4.0.0 4586 * @category Lang 4587 * @param {*} value The value to check. 4588 * @returns {boolean} Returns `true` if `value` is object-like, else `false`. 4589 * @example 4590 * 4591 * _.isObjectLike({}); 4592 * // => true 4593 * 4594 * _.isObjectLike([1, 2, 3]); 4595 * // => true 4596 * 4597 * _.isObjectLike(_.noop); 4598 * // => false 4599 * 4600 * _.isObjectLike(null); 4601 * // => false 4602 */ 4603 function isObjectLike(value) { 4604 return value != null && typeof value == 'object'; 4605 } 4606 4607 module.exports = isObjectLike; 4608 4609 4610 /***/ }), 4611 4612 /***/ 1878: 4613 /***/ (function(module, __unused_webpack_exports, __webpack_require__) { 4614 4615 var baseGetTag = __webpack_require__(194), 4616 isObjectLike = __webpack_require__(1653); 4617 4618 /** `Object#toString` result references. */ 4619 var symbolTag = '[object Symbol]'; 4620 4621 /** 4622 * Checks if `value` is classified as a `Symbol` primitive or object. 4623 * 4624 * @static 4625 * @memberOf _ 4626 * @since 4.0.0 4627 * @category Lang 4628 * @param {*} value The value to check. 4629 * @returns {boolean} Returns `true` if `value` is a symbol, else `false`. 4630 * @example 4631 * 4632 * _.isSymbol(Symbol.iterator); 4633 * // => true 4634 * 4635 * _.isSymbol('abc'); 4636 * // => false 4637 */ 4638 function isSymbol(value) { 4639 return typeof value == 'symbol' || 4640 (isObjectLike(value) && baseGetTag(value) == symbolTag); 4641 } 4642 4643 module.exports = isSymbol; 4644 4645 4646 /***/ }), 4647 4648 /***/ 8253: 4649 /***/ (function(module, __unused_webpack_exports, __webpack_require__) { 4650 4651 var root = __webpack_require__(158); 4652 4653 /** 4654 * Gets the timestamp of the number of milliseconds that have elapsed since 4655 * the Unix epoch (1 January 1970 00:00:00 UTC). 4656 * 4657 * @static 4658 * @memberOf _ 4659 * @since 2.4.0 4660 * @category Date 4661 * @returns {number} Returns the timestamp. 4662 * @example 4663 * 4664 * _.defer(function(stamp) { 4665 * console.log(_.now() - stamp); 4666 * }, _.now()); 4667 * // => Logs the number of milliseconds it took for the deferred invocation. 4668 */ 4669 var now = function() { 4670 return root.Date.now(); 4671 }; 4672 4673 module.exports = now; 4674 4675 4676 /***/ }), 4677 4678 /***/ 8172: 4679 /***/ (function(module, __unused_webpack_exports, __webpack_require__) { 4680 4681 var debounce = __webpack_require__(6897), 4682 isObject = __webpack_require__(3619); 4683 4684 /** Error message constants. */ 4685 var FUNC_ERROR_TEXT = 'Expected a function'; 4686 4687 /** 4688 * Creates a throttled function that only invokes `func` at most once per 4689 * every `wait` milliseconds. The throttled function comes with a `cancel` 4690 * method to cancel delayed `func` invocations and a `flush` method to 4691 * immediately invoke them. Provide `options` to indicate whether `func` 4692 * should be invoked on the leading and/or trailing edge of the `wait` 4693 * timeout. The `func` is invoked with the last arguments provided to the 4694 * throttled function. Subsequent calls to the throttled function return the 4695 * result of the last `func` invocation. 4696 * 4697 * **Note:** If `leading` and `trailing` options are `true`, `func` is 4698 * invoked on the trailing edge of the timeout only if the throttled function 4699 * is invoked more than once during the `wait` timeout. 4700 * 4701 * If `wait` is `0` and `leading` is `false`, `func` invocation is deferred 4702 * until to the next tick, similar to `setTimeout` with a timeout of `0`. 4703 * 4704 * See [David Corbacho's article](https://css-tricks.com/debouncing-throttling-explained-examples/) 4705 * for details over the differences between `_.throttle` and `_.debounce`. 4706 * 4707 * @static 4708 * @memberOf _ 4709 * @since 0.1.0 4710 * @category Function 4711 * @param {Function} func The function to throttle. 4712 * @param {number} [wait=0] The number of milliseconds to throttle invocations to. 4713 * @param {Object} [options={}] The options object. 4714 * @param {boolean} [options.leading=true] 4715 * Specify invoking on the leading edge of the timeout. 4716 * @param {boolean} [options.trailing=true] 4717 * Specify invoking on the trailing edge of the timeout. 4718 * @returns {Function} Returns the new throttled function. 4719 * @example 4720 * 4721 * // Avoid excessively updating the position while scrolling. 4722 * jQuery(window).on('scroll', _.throttle(updatePosition, 100)); 4723 * 4724 * // Invoke `renewToken` when the click event is fired, but not more than once every 5 minutes. 4725 * var throttled = _.throttle(renewToken, 300000, { 'trailing': false }); 4726 * jQuery(element).on('click', throttled); 4727 * 4728 * // Cancel the trailing throttled invocation. 4729 * jQuery(window).on('popstate', throttled.cancel); 4730 */ 4731 function throttle(func, wait, options) { 4732 var leading = true, 4733 trailing = true; 4734 4735 if (typeof func != 'function') { 4736 throw new TypeError(FUNC_ERROR_TEXT); 4737 } 4738 if (isObject(options)) { 4739 leading = 'leading' in options ? !!options.leading : leading; 4740 trailing = 'trailing' in options ? !!options.trailing : trailing; 4741 } 4742 return debounce(func, wait, { 4743 'leading': leading, 4744 'maxWait': wait, 4745 'trailing': trailing 4746 }); 4747 } 4748 4749 module.exports = throttle; 4750 4751 4752 /***/ }), 4753 4754 /***/ 5053: 4755 /***/ (function(module, __unused_webpack_exports, __webpack_require__) { 4756 4757 var baseTrim = __webpack_require__(2383), 4758 isObject = __webpack_require__(3619), 4759 isSymbol = __webpack_require__(1878); 4760 4761 /** Used as references for various `Number` constants. */ 4762 var NAN = 0 / 0; 4763 4764 /** Used to detect bad signed hexadecimal string values. */ 4765 var reIsBadHex = /^[-+]0x[0-9a-f]+$/i; 4766 4767 /** Used to detect binary string values. */ 4768 var reIsBinary = /^0b[01]+$/i; 4769 4770 /** Used to detect octal string values. */ 4771 var reIsOctal = /^0o[0-7]+$/i; 4772 4773 /** Built-in method references without a dependency on `root`. */ 4774 var freeParseInt = parseInt; 4775 4776 /** 4777 * Converts `value` to a number. 4778 * 4779 * @static 4780 * @memberOf _ 4781 * @since 4.0.0 4782 * @category Lang 4783 * @param {*} value The value to process. 4784 * @returns {number} Returns the number. 4785 * @example 4786 * 4787 * _.toNumber(3.2); 4788 * // => 3.2 4789 * 4790 * _.toNumber(Number.MIN_VALUE); 4791 * // => 5e-324 4792 * 4793 * _.toNumber(Infinity); 4794 * // => Infinity 4795 * 4796 * _.toNumber('3.2'); 4797 * // => 3.2 4798 */ 4799 function toNumber(value) { 4800 if (typeof value == 'number') { 4801 return value; 4802 } 4803 if (isSymbol(value)) { 4804 return NAN; 4805 } 4806 if (isObject(value)) { 4807 var other = typeof value.valueOf == 'function' ? value.valueOf() : value; 4808 value = isObject(other) ? (other + '') : other; 4809 } 4810 if (typeof value != 'string') { 4811 return value === 0 ? value : +value; 4812 } 4813 value = baseTrim(value); 4814 var isBinary = reIsBinary.test(value); 4815 return (isBinary || reIsOctal.test(value)) 4816 ? freeParseInt(value.slice(2), isBinary ? 2 : 8) 4817 : (reIsBadHex.test(value) ? NAN : +value); 4818 } 4819 4820 module.exports = toNumber; 4821 4822 4823 /***/ }), 4824 4825 /***/ 9756: 4826 /***/ (function(module) { 4827 4828 /** 4829 * Memize options object. 4830 * 4831 * @typedef MemizeOptions 4832 * 4833 * @property {number} [maxSize] Maximum size of the cache. 4834 */ 4835 4836 /** 4837 * Internal cache entry. 4838 * 4839 * @typedef MemizeCacheNode 4840 * 4841 * @property {?MemizeCacheNode|undefined} [prev] Previous node. 4842 * @property {?MemizeCacheNode|undefined} [next] Next node. 4843 * @property {Array<*>} args Function arguments for cache 4844 * entry. 4845 * @property {*} val Function result. 4846 */ 4847 4848 /** 4849 * Properties of the enhanced function for controlling cache. 4850 * 4851 * @typedef MemizeMemoizedFunction 4852 * 4853 * @property {()=>void} clear Clear the cache. 4854 */ 4855 4856 /** 4857 * Accepts a function to be memoized, and returns a new memoized function, with 4858 * optional options. 4859 * 4860 * @template {Function} F 4861 * 4862 * @param {F} fn Function to memoize. 4863 * @param {MemizeOptions} [options] Options object. 4864 * 4865 * @return {F & MemizeMemoizedFunction} Memoized function. 4866 */ 4867 function memize( fn, options ) { 4868 var size = 0; 4869 4870 /** @type {?MemizeCacheNode|undefined} */ 4871 var head; 4872 4873 /** @type {?MemizeCacheNode|undefined} */ 4874 var tail; 4875 4876 options = options || {}; 4877 4878 function memoized( /* ...args */ ) { 4879 var node = head, 4880 len = arguments.length, 4881 args, i; 4882 4883 searchCache: while ( node ) { 4884 // Perform a shallow equality test to confirm that whether the node 4885 // under test is a candidate for the arguments passed. Two arrays 4886 // are shallowly equal if their length matches and each entry is 4887 // strictly equal between the two sets. Avoid abstracting to a 4888 // function which could incur an arguments leaking deoptimization. 4889 4890 // Check whether node arguments match arguments length 4891 if ( node.args.length !== arguments.length ) { 4892 node = node.next; 4893 continue; 4894 } 4895 4896 // Check whether node arguments match arguments values 4897 for ( i = 0; i < len; i++ ) { 4898 if ( node.args[ i ] !== arguments[ i ] ) { 4899 node = node.next; 4900 continue searchCache; 4901 } 4902 } 4903 4904 // At this point we can assume we've found a match 4905 4906 // Surface matched node to head if not already 4907 if ( node !== head ) { 4908 // As tail, shift to previous. Must only shift if not also 4909 // head, since if both head and tail, there is no previous. 4910 if ( node === tail ) { 4911 tail = node.prev; 4912 } 4913 4914 // Adjust siblings to point to each other. If node was tail, 4915 // this also handles new tail's empty `next` assignment. 4916 /** @type {MemizeCacheNode} */ ( node.prev ).next = node.next; 4917 if ( node.next ) { 4918 node.next.prev = node.prev; 4919 } 4920 4921 node.next = head; 4922 node.prev = null; 4923 /** @type {MemizeCacheNode} */ ( head ).prev = node; 4924 head = node; 4925 } 4926 4927 // Return immediately 4928 return node.val; 4929 } 4930 4931 // No cached value found. Continue to insertion phase: 4932 4933 // Create a copy of arguments (avoid leaking deoptimization) 4934 args = new Array( len ); 4935 for ( i = 0; i < len; i++ ) { 4936 args[ i ] = arguments[ i ]; 4937 } 4938 4939 node = { 4940 args: args, 4941 4942 // Generate the result from original function 4943 val: fn.apply( null, args ), 4944 }; 4945 4946 // Don't need to check whether node is already head, since it would 4947 // have been returned above already if it was 4948 4949 // Shift existing head down list 4950 if ( head ) { 4951 head.prev = node; 4952 node.next = head; 4953 } else { 4954 // If no head, follows that there's no tail (at initial or reset) 4955 tail = node; 4956 } 4957 4958 // Trim tail if we're reached max size and are pending cache insertion 4959 if ( size === /** @type {MemizeOptions} */ ( options ).maxSize ) { 4960 tail = /** @type {MemizeCacheNode} */ ( tail ).prev; 4961 /** @type {MemizeCacheNode} */ ( tail ).next = null; 4962 } else { 4963 size++; 4964 } 4965 4966 head = node; 4967 4968 return node.val; 4969 } 4970 4971 memoized.clear = function() { 4972 head = null; 4973 tail = null; 4974 size = 0; 4975 }; 4976 4977 if ( false ) {} 4978 4979 // Ignore reason: There's not a clear solution to create an intersection of 4980 // the function with additional properties, where the goal is to retain the 4981 // function signature of the incoming argument and add control properties 4982 // on the return value. 4983 4984 // @ts-ignore 4985 return memoized; 4986 } 4987 4988 module.exports = memize; 4989 4990 4991 /***/ }), 4992 4993 /***/ 8383: 4994 /***/ (function(module, __unused_webpack_exports, __webpack_require__) { 4995 4996 "use strict"; 4997 4998 4999 var keysShim; 5000 if (!Object.keys) { 5001 // modified from https://github.com/es-shims/es5-shim 5002 var has = Object.prototype.hasOwnProperty; 5003 var toStr = Object.prototype.toString; 5004 var isArgs = __webpack_require__(4418); // eslint-disable-line global-require 5005 var isEnumerable = Object.prototype.propertyIsEnumerable; 5006 var hasDontEnumBug = !isEnumerable.call({ toString: null }, 'toString'); 5007 var hasProtoEnumBug = isEnumerable.call(function () {}, 'prototype'); 5008 var dontEnums = [ 5009 'toString', 5010 'toLocaleString', 5011 'valueOf', 5012 'hasOwnProperty', 5013 'isPrototypeOf', 5014 'propertyIsEnumerable', 5015 'constructor' 5016 ]; 5017 var equalsConstructorPrototype = function (o) { 5018 var ctor = o.constructor; 5019 return ctor && ctor.prototype === o; 5020 }; 5021 var excludedKeys = { 5022 $applicationCache: true, 5023 $console: true, 5024 $external: true, 5025 $frame: true, 5026 $frameElement: true, 5027 $frames: true, 5028 $innerHeight: true, 5029 $innerWidth: true, 5030 $onmozfullscreenchange: true, 5031 $onmozfullscreenerror: true, 5032 $outerHeight: true, 5033 $outerWidth: true, 5034 $pageXOffset: true, 5035 $pageYOffset: true, 5036 $parent: true, 5037 $scrollLeft: true, 5038 $scrollTop: true, 5039 $scrollX: true, 5040 $scrollY: true, 5041 $self: true, 5042 $webkitIndexedDB: true, 5043 $webkitStorageInfo: true, 5044 $window: true 5045 }; 5046 var hasAutomationEqualityBug = (function () { 5047 /* global window */ 5048 if (typeof window === 'undefined') { return false; } 5049 for (var k in window) { 5050 try { 5051 if (!excludedKeys['$' + k] && has.call(window, k) && window[k] !== null && typeof window[k] === 'object') { 5052 try { 5053 equalsConstructorPrototype(window[k]); 5054 } catch (e) { 5055 return true; 5056 } 5057 } 5058 } catch (e) { 5059 return true; 5060 } 5061 } 5062 return false; 5063 }()); 5064 var equalsConstructorPrototypeIfNotBuggy = function (o) { 5065 /* global window */ 5066 if (typeof window === 'undefined' || !hasAutomationEqualityBug) { 5067 return equalsConstructorPrototype(o); 5068 } 5069 try { 5070 return equalsConstructorPrototype(o); 5071 } catch (e) { 5072 return false; 5073 } 5074 }; 5075 5076 keysShim = function keys(object) { 5077 var isObject = object !== null && typeof object === 'object'; 5078 var isFunction = toStr.call(object) === '[object Function]'; 5079 var isArguments = isArgs(object); 5080 var isString = isObject && toStr.call(object) === '[object String]'; 5081 var theKeys = []; 5082 5083 if (!isObject && !isFunction && !isArguments) { 5084 throw new TypeError('Object.keys called on a non-object'); 5085 } 5086 5087 var skipProto = hasProtoEnumBug && isFunction; 5088 if (isString && object.length > 0 && !has.call(object, 0)) { 5089 for (var i = 0; i < object.length; ++i) { 5090 theKeys.push(String(i)); 5091 } 5092 } 5093 5094 if (isArguments && object.length > 0) { 5095 for (var j = 0; j < object.length; ++j) { 5096 theKeys.push(String(j)); 5097 } 5098 } else { 5099 for (var name in object) { 5100 if (!(skipProto && name === 'prototype') && has.call(object, name)) { 5101 theKeys.push(String(name)); 5102 } 5103 } 5104 } 5105 5106 if (hasDontEnumBug) { 5107 var skipConstructor = equalsConstructorPrototypeIfNotBuggy(object); 5108 5109 for (var k = 0; k < dontEnums.length; ++k) { 5110 if (!(skipConstructor && dontEnums[k] === 'constructor') && has.call(object, dontEnums[k])) { 5111 theKeys.push(dontEnums[k]); 5112 } 5113 } 5114 } 5115 return theKeys; 5116 }; 5117 } 5118 module.exports = keysShim; 5119 5120 5121 /***/ }), 5122 5123 /***/ 806: 5124 /***/ (function(module, __unused_webpack_exports, __webpack_require__) { 5125 5126 "use strict"; 5127 5128 5129 var slice = Array.prototype.slice; 5130 var isArgs = __webpack_require__(4418); 5131 5132 var origKeys = Object.keys; 5133 var keysShim = origKeys ? function keys(o) { return origKeys(o); } : __webpack_require__(8383); 5134 5135 var originalKeys = Object.keys; 5136 5137 keysShim.shim = function shimObjectKeys() { 5138 if (Object.keys) { 5139 var keysWorksWithArguments = (function () { 5140 // Safari 5.0 bug 5141 var args = Object.keys(arguments); 5142 return args && args.length === arguments.length; 5143 }(1, 2)); 5144 if (!keysWorksWithArguments) { 5145 Object.keys = function keys(object) { // eslint-disable-line func-name-matching 5146 if (isArgs(object)) { 5147 return originalKeys(slice.call(object)); 5148 } 5149 return originalKeys(object); 5150 }; 5151 } 5152 } else { 5153 Object.keys = keysShim; 5154 } 5155 return Object.keys || keysShim; 5156 }; 5157 5158 module.exports = keysShim; 5159 5160 5161 /***/ }), 5162 5163 /***/ 4418: 5164 /***/ (function(module) { 5165 5166 "use strict"; 5167 5168 5169 var toStr = Object.prototype.toString; 5170 5171 module.exports = function isArguments(value) { 5172 var str = toStr.call(value); 5173 var isArgs = str === '[object Arguments]'; 5174 if (!isArgs) { 5175 isArgs = str !== '[object Array]' && 5176 value !== null && 5177 typeof value === 'object' && 5178 typeof value.length === 'number' && 5179 value.length >= 0 && 5180 toStr.call(value.callee) === '[object Function]'; 5181 } 5182 return isArgs; 5183 }; 5184 5185 5186 /***/ }), 5187 5188 /***/ 2148: 5189 /***/ (function(module, __unused_webpack_exports, __webpack_require__) { 5190 5191 "use strict"; 5192 5193 5194 // modified from https://github.com/es-shims/es6-shim 5195 var keys = __webpack_require__(806); 5196 var canBeObject = function (obj) { 5197 return typeof obj !== 'undefined' && obj !== null; 5198 }; 5199 var hasSymbols = __webpack_require__(5682)(); 5200 var callBound = __webpack_require__(7615); 5201 var toObject = Object; 5202 var $push = callBound('Array.prototype.push'); 5203 var $propIsEnumerable = callBound('Object.prototype.propertyIsEnumerable'); 5204 var originalGetSymbols = hasSymbols ? Object.getOwnPropertySymbols : null; 5205 5206 // eslint-disable-next-line no-unused-vars 5207 module.exports = function assign(target, source1) { 5208 if (!canBeObject(target)) { throw new TypeError('target must be an object'); } 5209 var objTarget = toObject(target); 5210 var s, source, i, props, syms, value, key; 5211 for (s = 1; s < arguments.length; ++s) { 5212 source = toObject(arguments[s]); 5213 props = keys(source); 5214 var getSymbols = hasSymbols && (Object.getOwnPropertySymbols || originalGetSymbols); 5215 if (getSymbols) { 5216 syms = getSymbols(source); 5217 for (i = 0; i < syms.length; ++i) { 5218 key = syms[i]; 5219 if ($propIsEnumerable(source, key)) { 5220 $push(props, key); 5221 } 5222 } 5223 } 5224 for (i = 0; i < props.length; ++i) { 5225 key = props[i]; 5226 value = source[key]; 5227 if ($propIsEnumerable(source, key)) { 5228 objTarget[key] = value; 5229 } 5230 } 5231 } 5232 return objTarget; 5233 }; 5234 5235 5236 /***/ }), 5237 5238 /***/ 4011: 5239 /***/ (function(module, __unused_webpack_exports, __webpack_require__) { 5240 5241 "use strict"; 5242 5243 5244 var defineProperties = __webpack_require__(9170); 5245 var callBind = __webpack_require__(2550); 5246 5247 var implementation = __webpack_require__(2148); 5248 var getPolyfill = __webpack_require__(293); 5249 var shim = __webpack_require__(2666); 5250 5251 var polyfill = callBind.apply(getPolyfill()); 5252 // eslint-disable-next-line no-unused-vars 5253 var bound = function assign(target, source1) { 5254 return polyfill(Object, arguments); 5255 }; 5256 5257 defineProperties(bound, { 5258 getPolyfill: getPolyfill, 5259 implementation: implementation, 5260 shim: shim 5261 }); 5262 5263 module.exports = bound; 5264 5265 5266 /***/ }), 5267 5268 /***/ 293: 5269 /***/ (function(module, __unused_webpack_exports, __webpack_require__) { 5270 5271 "use strict"; 5272 5273 5274 var implementation = __webpack_require__(2148); 5275 5276 var lacksProperEnumerationOrder = function () { 5277 if (!Object.assign) { 5278 return false; 5279 } 5280 /* 5281 * v8, specifically in node 4.x, has a bug with incorrect property enumeration order 5282 * note: this does not detect the bug unless there's 20 characters 5283 */ 5284 var str = 'abcdefghijklmnopqrst'; 5285 var letters = str.split(''); 5286 var map = {}; 5287 for (var i = 0; i < letters.length; ++i) { 5288 map[letters[i]] = letters[i]; 5289 } 5290 var obj = Object.assign({}, map); 5291 var actual = ''; 5292 for (var k in obj) { 5293 actual += k; 5294 } 5295 return str !== actual; 5296 }; 5297 5298 var assignHasPendingExceptions = function () { 5299 if (!Object.assign || !Object.preventExtensions) { 5300 return false; 5301 } 5302 /* 5303 * Firefox 37 still has "pending exception" logic in its Object.assign implementation, 5304 * which is 72% slower than our shim, and Firefox 40's native implementation. 5305 */ 5306 var thrower = Object.preventExtensions({ 1: 2 }); 5307 try { 5308 Object.assign(thrower, 'xy'); 5309 } catch (e) { 5310 return thrower[1] === 'y'; 5311 } 5312 return false; 5313 }; 5314 5315 module.exports = function getPolyfill() { 5316 if (!Object.assign) { 5317 return implementation; 5318 } 5319 if (lacksProperEnumerationOrder()) { 5320 return implementation; 5321 } 5322 if (assignHasPendingExceptions()) { 5323 return implementation; 5324 } 5325 return Object.assign; 5326 }; 5327 5328 5329 /***/ }), 5330 5331 /***/ 2666: 5332 /***/ (function(module, __unused_webpack_exports, __webpack_require__) { 5333 5334 "use strict"; 5335 5336 5337 var define = __webpack_require__(9170); 5338 var getPolyfill = __webpack_require__(293); 5339 5340 module.exports = function shimAssign() { 5341 var polyfill = getPolyfill(); 5342 define( 5343 Object, 5344 { assign: polyfill }, 5345 { assign: function () { return Object.assign !== polyfill; } } 5346 ); 5347 return polyfill; 5348 }; 5349 5350 5351 /***/ }), 5352 5353 /***/ 1631: 5354 /***/ (function(module, __unused_webpack_exports, __webpack_require__) { 5355 5356 "use strict"; 5357 5358 5359 var has = __webpack_require__(9284); 5360 var RequireObjectCoercible = __webpack_require__(604); 5361 var callBound = __webpack_require__(7615); 5362 5363 var $isEnumerable = callBound('Object.prototype.propertyIsEnumerable'); 5364 5365 module.exports = function values(O) { 5366 var obj = RequireObjectCoercible(O); 5367 var vals = []; 5368 for (var key in obj) { 5369 if (has(obj, key) && $isEnumerable(obj, key)) { 5370 vals.push(obj[key]); 5371 } 5372 } 5373 return vals; 5374 }; 5375 5376 5377 /***/ }), 5378 5379 /***/ 5861: 5380 /***/ (function(module, __unused_webpack_exports, __webpack_require__) { 5381 5382 "use strict"; 5383 5384 5385 var define = __webpack_require__(9170); 5386 var callBind = __webpack_require__(2550); 5387 5388 var implementation = __webpack_require__(1631); 5389 var getPolyfill = __webpack_require__(779); 5390 var shim = __webpack_require__(7256); 5391 5392 var polyfill = callBind(getPolyfill(), Object); 5393 5394 define(polyfill, { 5395 getPolyfill: getPolyfill, 5396 implementation: implementation, 5397 shim: shim 5398 }); 5399 5400 module.exports = polyfill; 5401 5402 5403 /***/ }), 5404 5405 /***/ 604: 5406 /***/ (function(module, __unused_webpack_exports, __webpack_require__) { 5407 5408 "use strict"; 5409 5410 5411 module.exports = __webpack_require__(2559); 5412 5413 5414 /***/ }), 5415 5416 /***/ 2559: 5417 /***/ (function(module, __unused_webpack_exports, __webpack_require__) { 5418 5419 "use strict"; 5420 5421 5422 var GetIntrinsic = __webpack_require__(6732); 5423 5424 var $TypeError = GetIntrinsic('%TypeError%'); 5425 5426 // http://www.ecma-international.org/ecma-262/5.1/#sec-9.10 5427 5428 module.exports = function CheckObjectCoercible(value, optMessage) { 5429 if (value == null) { 5430 throw new $TypeError(optMessage || ('Cannot call method on ' + value)); 5431 } 5432 return value; 5433 }; 5434 5435 5436 /***/ }), 5437 5438 /***/ 6732: 5439 /***/ (function(module, __unused_webpack_exports, __webpack_require__) { 5440 5441 "use strict"; 5442 5443 5444 /* globals 5445 AggregateError, 5446 Atomics, 5447 FinalizationRegistry, 5448 SharedArrayBuffer, 5449 WeakRef, 5450 */ 5451 5452 var undefined; 5453 5454 var $SyntaxError = SyntaxError; 5455 var $Function = Function; 5456 var $TypeError = TypeError; 5457 5458 // eslint-disable-next-line consistent-return 5459 var getEvalledConstructor = function (expressionSyntax) { 5460 try { 5461 // eslint-disable-next-line no-new-func 5462 return Function('"use strict"; return (' + expressionSyntax + ').constructor;')(); 5463 } catch (e) {} 5464 }; 5465 5466 var $gOPD = Object.getOwnPropertyDescriptor; 5467 if ($gOPD) { 5468 try { 5469 $gOPD({}, ''); 5470 } catch (e) { 5471 $gOPD = null; // this is IE 8, which has a broken gOPD 5472 } 5473 } 5474 5475 var throwTypeError = function () { throw new $TypeError(); }; 5476 var ThrowTypeError = $gOPD 5477 ? (function () { 5478 try { 5479 // eslint-disable-next-line no-unused-expressions, no-caller, no-restricted-properties 5480 arguments.callee; // IE 8 does not throw here 5481 return throwTypeError; 5482 } catch (calleeThrows) { 5483 try { 5484 // IE 8 throws on Object.getOwnPropertyDescriptor(arguments, '') 5485 return $gOPD(arguments, 'callee').get; 5486 } catch (gOPDthrows) { 5487 return throwTypeError; 5488 } 5489 } 5490 }()) 5491 : throwTypeError; 5492 5493 var hasSymbols = __webpack_require__(9905)(); 5494 5495 var getProto = Object.getPrototypeOf || function (x) { return x.__proto__; }; // eslint-disable-line no-proto 5496 5497 var asyncGenFunction = getEvalledConstructor('async function* () {}'); 5498 var asyncGenFunctionPrototype = asyncGenFunction ? asyncGenFunction.prototype : undefined; 5499 var asyncGenPrototype = asyncGenFunctionPrototype ? asyncGenFunctionPrototype.prototype : undefined; 5500 5501 var TypedArray = typeof Uint8Array === 'undefined' ? undefined : getProto(Uint8Array); 5502 5503 var INTRINSICS = { 5504 '%AggregateError%': typeof AggregateError === 'undefined' ? undefined : AggregateError, 5505 '%Array%': Array, 5506 '%ArrayBuffer%': typeof ArrayBuffer === 'undefined' ? undefined : ArrayBuffer, 5507 '%ArrayIteratorPrototype%': hasSymbols ? getProto([][Symbol.iterator]()) : undefined, 5508 '%AsyncFromSyncIteratorPrototype%': undefined, 5509 '%AsyncFunction%': getEvalledConstructor('async function () {}'), 5510 '%AsyncGenerator%': asyncGenFunctionPrototype, 5511 '%AsyncGeneratorFunction%': asyncGenFunction, 5512 '%AsyncIteratorPrototype%': asyncGenPrototype ? getProto(asyncGenPrototype) : undefined, 5513 '%Atomics%': typeof Atomics === 'undefined' ? undefined : Atomics, 5514 '%BigInt%': typeof BigInt === 'undefined' ? undefined : BigInt, 5515 '%Boolean%': Boolean, 5516 '%DataView%': typeof DataView === 'undefined' ? undefined : DataView, 5517 '%Date%': Date, 5518 '%decodeURI%': decodeURI, 5519 '%decodeURIComponent%': decodeURIComponent, 5520 '%encodeURI%': encodeURI, 5521 '%encodeURIComponent%': encodeURIComponent, 5522 '%Error%': Error, 5523 '%eval%': eval, // eslint-disable-line no-eval 5524 '%EvalError%': EvalError, 5525 '%Float32Array%': typeof Float32Array === 'undefined' ? undefined : Float32Array, 5526 '%Float64Array%': typeof Float64Array === 'undefined' ? undefined : Float64Array, 5527 '%FinalizationRegistry%': typeof FinalizationRegistry === 'undefined' ? undefined : FinalizationRegistry, 5528 '%Function%': $Function, 5529 '%GeneratorFunction%': getEvalledConstructor('function* () {}'), 5530 '%Int8Array%': typeof Int8Array === 'undefined' ? undefined : Int8Array, 5531 '%Int16Array%': typeof Int16Array === 'undefined' ? undefined : Int16Array, 5532 '%Int32Array%': typeof Int32Array === 'undefined' ? undefined : Int32Array, 5533 '%isFinite%': isFinite, 5534 '%isNaN%': isNaN, 5535 '%IteratorPrototype%': hasSymbols ? getProto(getProto([][Symbol.iterator]())) : undefined, 5536 '%JSON%': typeof JSON === 'object' ? JSON : undefined, 5537 '%Map%': typeof Map === 'undefined' ? undefined : Map, 5538 '%MapIteratorPrototype%': typeof Map === 'undefined' || !hasSymbols ? undefined : getProto(new Map()[Symbol.iterator]()), 5539 '%Math%': Math, 5540 '%Number%': Number, 5541 '%Object%': Object, 5542 '%parseFloat%': parseFloat, 5543 '%parseInt%': parseInt, 5544 '%Promise%': typeof Promise === 'undefined' ? undefined : Promise, 5545 '%Proxy%': typeof Proxy === 'undefined' ? undefined : Proxy, 5546 '%RangeError%': RangeError, 5547 '%ReferenceError%': ReferenceError, 5548 '%Reflect%': typeof Reflect === 'undefined' ? undefined : Reflect, 5549 '%RegExp%': RegExp, 5550 '%Set%': typeof Set === 'undefined' ? undefined : Set, 5551 '%SetIteratorPrototype%': typeof Set === 'undefined' || !hasSymbols ? undefined : getProto(new Set()[Symbol.iterator]()), 5552 '%SharedArrayBuffer%': typeof SharedArrayBuffer === 'undefined' ? undefined : SharedArrayBuffer, 5553 '%String%': String, 5554 '%StringIteratorPrototype%': hasSymbols ? getProto(''[Symbol.iterator]()) : undefined, 5555 '%Symbol%': hasSymbols ? Symbol : undefined, 5556 '%SyntaxError%': $SyntaxError, 5557 '%ThrowTypeError%': ThrowTypeError, 5558 '%TypedArray%': TypedArray, 5559 '%TypeError%': $TypeError, 5560 '%Uint8Array%': typeof Uint8Array === 'undefined' ? undefined : Uint8Array, 5561 '%Uint8ClampedArray%': typeof Uint8ClampedArray === 'undefined' ? undefined : Uint8ClampedArray, 5562 '%Uint16Array%': typeof Uint16Array === 'undefined' ? undefined : Uint16Array, 5563 '%Uint32Array%': typeof Uint32Array === 'undefined' ? undefined : Uint32Array, 5564 '%URIError%': URIError, 5565 '%WeakMap%': typeof WeakMap === 'undefined' ? undefined : WeakMap, 5566 '%WeakRef%': typeof WeakRef === 'undefined' ? undefined : WeakRef, 5567 '%WeakSet%': typeof WeakSet === 'undefined' ? undefined : WeakSet 5568 }; 5569 5570 var LEGACY_ALIASES = { 5571 '%ArrayBufferPrototype%': ['ArrayBuffer', 'prototype'], 5572 '%ArrayPrototype%': ['Array', 'prototype'], 5573 '%ArrayProto_entries%': ['Array', 'prototype', 'entries'], 5574 '%ArrayProto_forEach%': ['Array', 'prototype', 'forEach'], 5575 '%ArrayProto_keys%': ['Array', 'prototype', 'keys'], 5576 '%ArrayProto_values%': ['Array', 'prototype', 'values'], 5577 '%AsyncFunctionPrototype%': ['AsyncFunction', 'prototype'], 5578 '%AsyncGenerator%': ['AsyncGeneratorFunction', 'prototype'], 5579 '%AsyncGeneratorPrototype%': ['AsyncGeneratorFunction', 'prototype', 'prototype'], 5580 '%BooleanPrototype%': ['Boolean', 'prototype'], 5581 '%DataViewPrototype%': ['DataView', 'prototype'], 5582 '%DatePrototype%': ['Date', 'prototype'], 5583 '%ErrorPrototype%': ['Error', 'prototype'], 5584 '%EvalErrorPrototype%': ['EvalError', 'prototype'], 5585 '%Float32ArrayPrototype%': ['Float32Array', 'prototype'], 5586 '%Float64ArrayPrototype%': ['Float64Array', 'prototype'], 5587 '%FunctionPrototype%': ['Function', 'prototype'], 5588 '%Generator%': ['GeneratorFunction', 'prototype'], 5589 '%GeneratorPrototype%': ['GeneratorFunction', 'prototype', 'prototype'], 5590 '%Int8ArrayPrototype%': ['Int8Array', 'prototype'], 5591 '%Int16ArrayPrototype%': ['Int16Array', 'prototype'], 5592 '%Int32ArrayPrototype%': ['Int32Array', 'prototype'], 5593 '%JSONParse%': ['JSON', 'parse'], 5594 '%JSONStringify%': ['JSON', 'stringify'], 5595 '%MapPrototype%': ['Map', 'prototype'], 5596 '%NumberPrototype%': ['Number', 'prototype'], 5597 '%ObjectPrototype%': ['Object', 'prototype'], 5598 '%ObjProto_toString%': ['Object', 'prototype', 'toString'], 5599 '%ObjProto_valueOf%': ['Object', 'prototype', 'valueOf'], 5600 '%PromisePrototype%': ['Promise', 'prototype'], 5601 '%PromiseProto_then%': ['Promise', 'prototype', 'then'], 5602 '%Promise_all%': ['Promise', 'all'], 5603 '%Promise_reject%': ['Promise', 'reject'], 5604 '%Promise_resolve%': ['Promise', 'resolve'], 5605 '%RangeErrorPrototype%': ['RangeError', 'prototype'], 5606 '%ReferenceErrorPrototype%': ['ReferenceError', 'prototype'], 5607 '%RegExpPrototype%': ['RegExp', 'prototype'], 5608 '%SetPrototype%': ['Set', 'prototype'], 5609 '%SharedArrayBufferPrototype%': ['SharedArrayBuffer', 'prototype'], 5610 '%StringPrototype%': ['String', 'prototype'], 5611 '%SymbolPrototype%': ['Symbol', 'prototype'], 5612 '%SyntaxErrorPrototype%': ['SyntaxError', 'prototype'], 5613 '%TypedArrayPrototype%': ['TypedArray', 'prototype'], 5614 '%TypeErrorPrototype%': ['TypeError', 'prototype'], 5615 '%Uint8ArrayPrototype%': ['Uint8Array', 'prototype'], 5616 '%Uint8ClampedArrayPrototype%': ['Uint8ClampedArray', 'prototype'], 5617 '%Uint16ArrayPrototype%': ['Uint16Array', 'prototype'], 5618 '%Uint32ArrayPrototype%': ['Uint32Array', 'prototype'], 5619 '%URIErrorPrototype%': ['URIError', 'prototype'], 5620 '%WeakMapPrototype%': ['WeakMap', 'prototype'], 5621 '%WeakSetPrototype%': ['WeakSet', 'prototype'] 5622 }; 5623 5624 var bind = __webpack_require__(1930); 5625 var hasOwn = __webpack_require__(9284); 5626 var $concat = bind.call(Function.call, Array.prototype.concat); 5627 var $spliceApply = bind.call(Function.apply, Array.prototype.splice); 5628 var $replace = bind.call(Function.call, String.prototype.replace); 5629 5630 /* adapted from https://github.com/lodash/lodash/blob/4.17.15/dist/lodash.js#L6735-L6744 */ 5631 var rePropName = /[^%.[\]]+|\[(?:(-?\d+(?:\.\d+)?)|(["'])((?:(?!\2)[^\\]|\\.)*?)\2)\]|(?=(?:\.|\[\])(?:\.|\[\]|%$))/g; 5632 var reEscapeChar = /\\(\\)?/g; /** Used to match backslashes in property paths. */ 5633 var stringToPath = function stringToPath(string) { 5634 var result = []; 5635 $replace(string, rePropName, function (match, number, quote, subString) { 5636 result[result.length] = quote ? $replace(subString, reEscapeChar, '$1') : number || match; 5637 }); 5638 return result; 5639 }; 5640 /* end adaptation */ 5641 5642 var getBaseIntrinsic = function getBaseIntrinsic(name, allowMissing) { 5643 var intrinsicName = name; 5644 var alias; 5645 if (hasOwn(LEGACY_ALIASES, intrinsicName)) { 5646 alias = LEGACY_ALIASES[intrinsicName]; 5647 intrinsicName = '%' + alias[0] + '%'; 5648 } 5649 5650 if (hasOwn(INTRINSICS, intrinsicName)) { 5651 var value = INTRINSICS[intrinsicName]; 5652 if (typeof value === 'undefined' && !allowMissing) { 5653 throw new $TypeError('intrinsic ' + name + ' exists, but is not available. Please file an issue!'); 5654 } 5655 5656 return { 5657 alias: alias, 5658 name: intrinsicName, 5659 value: value 5660 }; 5661 } 5662 5663 throw new $SyntaxError('intrinsic ' + name + ' does not exist!'); 5664 }; 5665 5666 module.exports = function GetIntrinsic(name, allowMissing) { 5667 if (typeof name !== 'string' || name.length === 0) { 5668 throw new $TypeError('intrinsic name must be a non-empty string'); 5669 } 5670 if (arguments.length > 1 && typeof allowMissing !== 'boolean') { 5671 throw new $TypeError('"allowMissing" argument must be a boolean'); 5672 } 5673 5674 var parts = stringToPath(name); 5675 var intrinsicBaseName = parts.length > 0 ? parts[0] : ''; 5676 5677 var intrinsic = getBaseIntrinsic('%' + intrinsicBaseName + '%', allowMissing); 5678 var intrinsicRealName = intrinsic.name; 5679 var value = intrinsic.value; 5680 var skipFurtherCaching = false; 5681 5682 var alias = intrinsic.alias; 5683 if (alias) { 5684 intrinsicBaseName = alias[0]; 5685 $spliceApply(parts, $concat([0, 1], alias)); 5686 } 5687 5688 for (var i = 1, isOwn = true; i < parts.length; i += 1) { 5689 var part = parts[i]; 5690 if (part === 'constructor' || !isOwn) { 5691 skipFurtherCaching = true; 5692 } 5693 5694 intrinsicBaseName += '.' + part; 5695 intrinsicRealName = '%' + intrinsicBaseName + '%'; 5696 5697 if (hasOwn(INTRINSICS, intrinsicRealName)) { 5698 value = INTRINSICS[intrinsicRealName]; 5699 } else if (value != null) { 5700 if ($gOPD && (i + 1) >= parts.length) { 5701 var desc = $gOPD(value, part); 5702 isOwn = !!desc; 5703 5704 if (!allowMissing && !(part in value)) { 5705 throw new $TypeError('base intrinsic for ' + name + ' exists, but the property is not available.'); 5706 } 5707 // By convention, when a data property is converted to an accessor 5708 // property to emulate a data property that does not suffer from 5709 // the override mistake, that accessor's getter is marked with 5710 // an `originalValue` property. Here, when we detect this, we 5711 // uphold the illusion by pretending to see that original data 5712 // property, i.e., returning the value rather than the getter 5713 // itself. 5714 if (isOwn && 'get' in desc && !('originalValue' in desc.get)) { 5715 value = desc.get; 5716 } else { 5717 value = value[part]; 5718 } 5719 } else { 5720 isOwn = hasOwn(value, part); 5721 value = value[part]; 5722 } 5723 5724 if (isOwn && !skipFurtherCaching) { 5725 INTRINSICS[intrinsicRealName] = value; 5726 } 5727 } 5728 } 5729 return value; 5730 }; 5731 5732 5733 /***/ }), 5734 5735 /***/ 779: 5736 /***/ (function(module, __unused_webpack_exports, __webpack_require__) { 5737 5738 "use strict"; 5739 5740 5741 var implementation = __webpack_require__(1631); 5742 5743 module.exports = function getPolyfill() { 5744 return typeof Object.values === 'function' ? Object.values : implementation; 5745 }; 5746 5747 5748 /***/ }), 5749 5750 /***/ 7256: 5751 /***/ (function(module, __unused_webpack_exports, __webpack_require__) { 5752 5753 "use strict"; 5754 5755 5756 var getPolyfill = __webpack_require__(779); 5757 var define = __webpack_require__(9170); 5758 5759 module.exports = function shimValues() { 5760 var polyfill = getPolyfill(); 5761 define(Object, { values: polyfill }, { 5762 values: function testValues() { 5763 return Object.values !== polyfill; 5764 } 5765 }); 5766 return polyfill; 5767 }; 5768 5769 5770 /***/ }), 5771 5772 /***/ 5372: 5773 /***/ (function(module, __unused_webpack_exports, __webpack_require__) { 5774 5775 "use strict"; 5776 /** 5777 * Copyright (c) 2013-present, Facebook, Inc. 5778 * 5779 * This source code is licensed under the MIT license found in the 5780 * LICENSE file in the root directory of this source tree. 5781 */ 5782 5783 5784 5785 var ReactPropTypesSecret = __webpack_require__(9567); 5786 5787 function emptyFunction() {} 5788 function emptyFunctionWithReset() {} 5789 emptyFunctionWithReset.resetWarningCache = emptyFunction; 5790 5791 module.exports = function() { 5792 function shim(props, propName, componentName, location, propFullName, secret) { 5793 if (secret === ReactPropTypesSecret) { 5794 // It is still safe when called from React. 5795 return; 5796 } 5797 var err = new Error( 5798 'Calling PropTypes validators directly is not supported by the `prop-types` package. ' + 5799 'Use PropTypes.checkPropTypes() to call them. ' + 5800 'Read more at http://fb.me/use-check-prop-types' 5801 ); 5802 err.name = 'Invariant Violation'; 5803 throw err; 5804 }; 5805 shim.isRequired = shim; 5806 function getShim() { 5807 return shim; 5808 }; 5809 // Important! 5810 // Keep this list in sync with production version in `./factoryWithTypeCheckers.js`. 5811 var ReactPropTypes = { 5812 array: shim, 5813 bigint: shim, 5814 bool: shim, 5815 func: shim, 5816 number: shim, 5817 object: shim, 5818 string: shim, 5819 symbol: shim, 5820 5821 any: shim, 5822 arrayOf: getShim, 5823 element: shim, 5824 elementType: shim, 5825 instanceOf: getShim, 5826 node: shim, 5827 objectOf: getShim, 5828 oneOf: getShim, 5829 oneOfType: getShim, 5830 shape: getShim, 5831 exact: getShim, 5832 5833 checkPropTypes: emptyFunctionWithReset, 5834 resetWarningCache: emptyFunction 5835 }; 5836 5837 ReactPropTypes.PropTypes = ReactPropTypes; 5838 5839 return ReactPropTypes; 5840 }; 5841 5842 5843 /***/ }), 5844 5845 /***/ 2652: 5846 /***/ (function(module, __unused_webpack_exports, __webpack_require__) { 5847 5848 /** 5849 * Copyright (c) 2013-present, Facebook, Inc. 5850 * 5851 * This source code is licensed under the MIT license found in the 5852 * LICENSE file in the root directory of this source tree. 5853 */ 5854 5855 if (false) { var throwOnDirectAccess, ReactIs; } else { 5856 // By explicitly using `prop-types` you are opting into new production behavior. 5857 // http://fb.me/prop-types-in-prod 5858 module.exports = __webpack_require__(5372)(); 5859 } 5860 5861 5862 /***/ }), 5863 5864 /***/ 9567: 5865 /***/ (function(module) { 5866 5867 "use strict"; 5868 /** 5869 * Copyright (c) 2013-present, Facebook, Inc. 5870 * 5871 * This source code is licensed under the MIT license found in the 5872 * LICENSE file in the root directory of this source tree. 5873 */ 5874 5875 5876 5877 var ReactPropTypesSecret = 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED'; 5878 5879 module.exports = ReactPropTypesSecret; 5880 5881 5882 /***/ }), 5883 5884 /***/ 2541: 5885 /***/ (function(module) { 5886 5887 "use strict"; 5888 /** 5889 * Copyright (c) 2013-present, Facebook, Inc. 5890 * 5891 * This source code is licensed under the MIT license found in the 5892 * LICENSE file in the root directory of this source tree. 5893 * 5894 * @providesModule shallowCompare 5895 */ 5896 5897 5898 5899 var hasOwnProperty = Object.prototype.hasOwnProperty; 5900 5901 /** 5902 * inlined Object.is polyfill to avoid requiring consumers ship their own 5903 * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is 5904 */ 5905 function is(x, y) { 5906 // SameValue algorithm 5907 if (x === y) { 5908 // Steps 1-5, 7-10 5909 // Steps 6.b-6.e: +0 != -0 5910 // Added the nonzero y check to make Flow happy, but it is redundant 5911 return x !== 0 || y !== 0 || 1 / x === 1 / y; 5912 } else { 5913 // Step 6.a: NaN == NaN 5914 return x !== x && y !== y; 5915 } 5916 } 5917 5918 /** 5919 * Performs equality by iterating through keys on an object and returning false 5920 * when any key has values which are not strictly equal between the arguments. 5921 * Returns true when the values of all keys are strictly equal. 5922 */ 5923 function shallowEqual(objA, objB) { 5924 if (is(objA, objB)) { 5925 return true; 5926 } 5927 5928 if (typeof objA !== 'object' || objA === null || typeof objB !== 'object' || objB === null) { 5929 return false; 5930 } 5931 5932 var keysA = Object.keys(objA); 5933 var keysB = Object.keys(objB); 5934 5935 if (keysA.length !== keysB.length) { 5936 return false; 5937 } 5938 5939 // Test for A's keys different from B. 5940 for (var i = 0; i < keysA.length; i++) { 5941 if (!hasOwnProperty.call(objB, keysA[i]) || !is(objA[keysA[i]], objB[keysA[i]])) { 5942 return false; 5943 } 5944 } 5945 5946 return true; 5947 } 5948 5949 /** 5950 * Does a shallow comparison for props and state. 5951 * See ReactComponentWithPureRenderMixin 5952 * See also https://facebook.github.io/react/docs/shallow-compare.html 5953 */ 5954 function shallowCompare(instance, nextProps, nextState) { 5955 return ( 5956 !shallowEqual(instance.props, nextProps) || 5957 !shallowEqual(instance.state, nextState) 5958 ); 5959 } 5960 5961 module.exports = shallowCompare; 5962 5963 5964 /***/ }), 5965 5966 /***/ 4185: 5967 /***/ (function(__unused_webpack_module, __unused_webpack_exports, __webpack_require__) { 5968 5969 // eslint-disable-next-line import/no-unresolved 5970 __webpack_require__(17); 5971 5972 5973 /***/ }), 5974 5975 /***/ 7617: 5976 /***/ (function(__unused_webpack_module, exports, __webpack_require__) { 5977 5978 "use strict"; 5979 5980 5981 Object.defineProperty(exports, "__esModule", ({ 5982 value: true 5983 })); 5984 exports.PureCalendarDay = undefined; 5985 5986 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; 5987 5988 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); 5989 5990 var _object = __webpack_require__(4011); 5991 5992 var _object2 = _interopRequireDefault(_object); 5993 5994 var _react = __webpack_require__(9196); 5995 5996 var _react2 = _interopRequireDefault(_react); 5997 5998 var _propTypes = __webpack_require__(2652); 5999 6000 var _propTypes2 = _interopRequireDefault(_propTypes); 6001 6002 var _reactAddonsShallowCompare = __webpack_require__(2541); 6003 6004 var _reactAddonsShallowCompare2 = _interopRequireDefault(_reactAddonsShallowCompare); 6005 6006 var _reactMomentProptypes = __webpack_require__(6150); 6007 6008 var _reactMomentProptypes2 = _interopRequireDefault(_reactMomentProptypes); 6009 6010 var _airbnbPropTypes = __webpack_require__(4882); 6011 6012 var _reactWithStyles = __webpack_require__(3576); 6013 6014 var _moment = __webpack_require__(6292); 6015 6016 var _moment2 = _interopRequireDefault(_moment); 6017 6018 var _defaultPhrases = __webpack_require__(6030); 6019 6020 var _getPhrasePropTypes = __webpack_require__(2893); 6021 6022 var _getPhrasePropTypes2 = _interopRequireDefault(_getPhrasePropTypes); 6023 6024 var _getCalendarDaySettings = __webpack_require__(7475); 6025 6026 var _getCalendarDaySettings2 = _interopRequireDefault(_getCalendarDaySettings); 6027 6028 var _ModifiersShape = __webpack_require__(6747); 6029 6030 var _ModifiersShape2 = _interopRequireDefault(_ModifiersShape); 6031 6032 var _constants = __webpack_require__(257); 6033 6034 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } 6035 6036 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 6037 6038 function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } 6039 6040 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } 6041 6042 var propTypes = (0, _airbnbPropTypes.forbidExtraProps)((0, _object2['default'])({}, _reactWithStyles.withStylesPropTypes, { 6043 day: _reactMomentProptypes2['default'].momentObj, 6044 daySize: _airbnbPropTypes.nonNegativeInteger, 6045 isOutsideDay: _propTypes2['default'].bool, 6046 modifiers: _ModifiersShape2['default'], 6047 isFocused: _propTypes2['default'].bool, 6048 tabIndex: _propTypes2['default'].oneOf([0, -1]), 6049 onDayClick: _propTypes2['default'].func, 6050 onDayMouseEnter: _propTypes2['default'].func, 6051 onDayMouseLeave: _propTypes2['default'].func, 6052 renderDayContents: _propTypes2['default'].func, 6053 ariaLabelFormat: _propTypes2['default'].string, 6054 6055 // internationalization 6056 phrases: _propTypes2['default'].shape((0, _getPhrasePropTypes2['default'])(_defaultPhrases.CalendarDayPhrases)) 6057 })); 6058 6059 var defaultProps = { 6060 day: (0, _moment2['default'])(), 6061 daySize: _constants.DAY_SIZE, 6062 isOutsideDay: false, 6063 modifiers: new Set(), 6064 isFocused: false, 6065 tabIndex: -1, 6066 onDayClick: function () { 6067 function onDayClick() {} 6068 6069 return onDayClick; 6070 }(), 6071 onDayMouseEnter: function () { 6072 function onDayMouseEnter() {} 6073 6074 return onDayMouseEnter; 6075 }(), 6076 onDayMouseLeave: function () { 6077 function onDayMouseLeave() {} 6078 6079 return onDayMouseLeave; 6080 }(), 6081 6082 renderDayContents: null, 6083 ariaLabelFormat: 'dddd, LL', 6084 6085 // internationalization 6086 phrases: _defaultPhrases.CalendarDayPhrases 6087 }; 6088 6089 var CalendarDay = function (_React$Component) { 6090 _inherits(CalendarDay, _React$Component); 6091 6092 function CalendarDay() { 6093 var _ref; 6094 6095 _classCallCheck(this, CalendarDay); 6096 6097 for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { 6098 args[_key] = arguments[_key]; 6099 } 6100 6101 var _this = _possibleConstructorReturn(this, (_ref = CalendarDay.__proto__ || Object.getPrototypeOf(CalendarDay)).call.apply(_ref, [this].concat(args))); 6102 6103 _this.setButtonRef = _this.setButtonRef.bind(_this); 6104 return _this; 6105 } 6106 6107 _createClass(CalendarDay, [{ 6108 key: 'shouldComponentUpdate', 6109 value: function () { 6110 function shouldComponentUpdate(nextProps, nextState) { 6111 return (0, _reactAddonsShallowCompare2['default'])(this, nextProps, nextState); 6112 } 6113 6114 return shouldComponentUpdate; 6115 }() 6116 }, { 6117 key: 'componentDidUpdate', 6118 value: function () { 6119 function componentDidUpdate(prevProps) { 6120 var _props = this.props, 6121 isFocused = _props.isFocused, 6122 tabIndex = _props.tabIndex; 6123 6124 if (tabIndex === 0) { 6125 if (isFocused || tabIndex !== prevProps.tabIndex) { 6126 this.buttonRef.focus(); 6127 } 6128 } 6129 } 6130 6131 return componentDidUpdate; 6132 }() 6133 }, { 6134 key: 'onDayClick', 6135 value: function () { 6136 function onDayClick(day, e) { 6137 var onDayClick = this.props.onDayClick; 6138 6139 onDayClick(day, e); 6140 } 6141 6142 return onDayClick; 6143 }() 6144 }, { 6145 key: 'onDayMouseEnter', 6146 value: function () { 6147 function onDayMouseEnter(day, e) { 6148 var onDayMouseEnter = this.props.onDayMouseEnter; 6149 6150 onDayMouseEnter(day, e); 6151 } 6152 6153 return onDayMouseEnter; 6154 }() 6155 }, { 6156 key: 'onDayMouseLeave', 6157 value: function () { 6158 function onDayMouseLeave(day, e) { 6159 var onDayMouseLeave = this.props.onDayMouseLeave; 6160 6161 onDayMouseLeave(day, e); 6162 } 6163 6164 return onDayMouseLeave; 6165 }() 6166 }, { 6167 key: 'onKeyDown', 6168 value: function () { 6169 function onKeyDown(day, e) { 6170 var onDayClick = this.props.onDayClick; 6171 var key = e.key; 6172 6173 if (key === 'Enter' || key === ' ') { 6174 onDayClick(day, e); 6175 } 6176 } 6177 6178 return onKeyDown; 6179 }() 6180 }, { 6181 key: 'setButtonRef', 6182 value: function () { 6183 function setButtonRef(ref) { 6184 this.buttonRef = ref; 6185 } 6186 6187 return setButtonRef; 6188 }() 6189 }, { 6190 key: 'render', 6191 value: function () { 6192 function render() { 6193 var _this2 = this; 6194 6195 var _props2 = this.props, 6196 day = _props2.day, 6197 ariaLabelFormat = _props2.ariaLabelFormat, 6198 daySize = _props2.daySize, 6199 isOutsideDay = _props2.isOutsideDay, 6200 modifiers = _props2.modifiers, 6201 renderDayContents = _props2.renderDayContents, 6202 tabIndex = _props2.tabIndex, 6203 styles = _props2.styles, 6204 phrases = _props2.phrases; 6205 6206 6207 if (!day) return _react2['default'].createElement('td', null); 6208 6209 var _getCalendarDaySettin = (0, _getCalendarDaySettings2['default'])(day, ariaLabelFormat, daySize, modifiers, phrases), 6210 daySizeStyles = _getCalendarDaySettin.daySizeStyles, 6211 useDefaultCursor = _getCalendarDaySettin.useDefaultCursor, 6212 selected = _getCalendarDaySettin.selected, 6213 hoveredSpan = _getCalendarDaySettin.hoveredSpan, 6214 isOutsideRange = _getCalendarDaySettin.isOutsideRange, 6215 ariaLabel = _getCalendarDaySettin.ariaLabel; 6216 6217 return _react2['default'].createElement( 6218 'td', 6219 _extends({}, (0, _reactWithStyles.css)(styles.CalendarDay, useDefaultCursor && styles.CalendarDay__defaultCursor, styles.CalendarDay__default, isOutsideDay && styles.CalendarDay__outside, modifiers.has('today') && styles.CalendarDay__today, modifiers.has('first-day-of-week') && styles.CalendarDay__firstDayOfWeek, modifiers.has('last-day-of-week') && styles.CalendarDay__lastDayOfWeek, modifiers.has('hovered-offset') && styles.CalendarDay__hovered_offset, modifiers.has('highlighted-calendar') && styles.CalendarDay__highlighted_calendar, modifiers.has('blocked-minimum-nights') && styles.CalendarDay__blocked_minimum_nights, modifiers.has('blocked-calendar') && styles.CalendarDay__blocked_calendar, hoveredSpan && styles.CalendarDay__hovered_span, modifiers.has('selected-span') && styles.CalendarDay__selected_span, modifiers.has('last-in-range') && styles.CalendarDay__last_in_range, modifiers.has('selected-start') && styles.CalendarDay__selected_start, modifiers.has('selected-end') && styles.CalendarDay__selected_end, selected && styles.CalendarDay__selected, isOutsideRange && styles.CalendarDay__blocked_out_of_range, daySizeStyles), { 6220 role: 'button' // eslint-disable-line jsx-a11y/no-noninteractive-element-to-interactive-role 6221 , ref: this.setButtonRef, 6222 'aria-label': ariaLabel, 6223 onMouseEnter: function () { 6224 function onMouseEnter(e) { 6225 _this2.onDayMouseEnter(day, e); 6226 } 6227 6228 return onMouseEnter; 6229 }(), 6230 onMouseLeave: function () { 6231 function onMouseLeave(e) { 6232 _this2.onDayMouseLeave(day, e); 6233 } 6234 6235 return onMouseLeave; 6236 }(), 6237 onMouseUp: function () { 6238 function onMouseUp(e) { 6239 e.currentTarget.blur(); 6240 } 6241 6242 return onMouseUp; 6243 }(), 6244 onClick: function () { 6245 function onClick(e) { 6246 _this2.onDayClick(day, e); 6247 } 6248 6249 return onClick; 6250 }(), 6251 onKeyDown: function () { 6252 function onKeyDown(e) { 6253 _this2.onKeyDown(day, e); 6254 } 6255 6256 return onKeyDown; 6257 }(), 6258 tabIndex: tabIndex 6259 }), 6260 renderDayContents ? renderDayContents(day, modifiers) : day.format('D') 6261 ); 6262 } 6263 6264 return render; 6265 }() 6266 }]); 6267 6268 return CalendarDay; 6269 }(_react2['default'].Component); 6270 6271 CalendarDay.propTypes = propTypes; 6272 CalendarDay.defaultProps = defaultProps; 6273 6274 exports.PureCalendarDay = CalendarDay; 6275 exports["default"] = (0, _reactWithStyles.withStyles)(function (_ref2) { 6276 var _ref2$reactDates = _ref2.reactDates, 6277 color = _ref2$reactDates.color, 6278 font = _ref2$reactDates.font; 6279 return { 6280 CalendarDay: { 6281 boxSizing: 'border-box', 6282 cursor: 'pointer', 6283 fontSize: font.size, 6284 textAlign: 'center', 6285 6286 ':active': { 6287 outline: 0 6288 } 6289 }, 6290 6291 CalendarDay__defaultCursor: { 6292 cursor: 'default' 6293 }, 6294 6295 CalendarDay__default: { 6296 border: '1px solid ' + String(color.core.borderLight), 6297 color: color.text, 6298 background: color.background, 6299 6300 ':hover': { 6301 background: color.core.borderLight, 6302 border: '1px double ' + String(color.core.borderLight), 6303 color: 'inherit' 6304 } 6305 }, 6306 6307 CalendarDay__hovered_offset: { 6308 background: color.core.borderBright, 6309 border: '1px double ' + String(color.core.borderLight), 6310 color: 'inherit' 6311 }, 6312 6313 CalendarDay__outside: { 6314 border: 0, 6315 background: color.outside.backgroundColor, 6316 color: color.outside.color, 6317 6318 ':hover': { 6319 border: 0 6320 } 6321 }, 6322 6323 CalendarDay__blocked_minimum_nights: { 6324 background: color.minimumNights.backgroundColor, 6325 border: '1px solid ' + String(color.minimumNights.borderColor), 6326 color: color.minimumNights.color, 6327 6328 ':hover': { 6329 background: color.minimumNights.backgroundColor_hover, 6330 color: color.minimumNights.color_active 6331 }, 6332 6333 ':active': { 6334 background: color.minimumNights.backgroundColor_active, 6335 color: color.minimumNights.color_active 6336 } 6337 }, 6338 6339 CalendarDay__highlighted_calendar: { 6340 background: color.highlighted.backgroundColor, 6341 color: color.highlighted.color, 6342 6343 ':hover': { 6344 background: color.highlighted.backgroundColor_hover, 6345 color: color.highlighted.color_active 6346 }, 6347 6348 ':active': { 6349 background: color.highlighted.backgroundColor_active, 6350 color: color.highlighted.color_active 6351 } 6352 }, 6353 6354 CalendarDay__selected_span: { 6355 background: color.selectedSpan.backgroundColor, 6356 border: '1px solid ' + String(color.selectedSpan.borderColor), 6357 color: color.selectedSpan.color, 6358 6359 ':hover': { 6360 background: color.selectedSpan.backgroundColor_hover, 6361 border: '1px solid ' + String(color.selectedSpan.borderColor), 6362 color: color.selectedSpan.color_active 6363 }, 6364 6365 ':active': { 6366 background: color.selectedSpan.backgroundColor_active, 6367 border: '1px solid ' + String(color.selectedSpan.borderColor), 6368 color: color.selectedSpan.color_active 6369 } 6370 }, 6371 6372 CalendarDay__last_in_range: { 6373 borderRight: color.core.primary 6374 }, 6375 6376 CalendarDay__selected: { 6377 background: color.selected.backgroundColor, 6378 border: '1px solid ' + String(color.selected.borderColor), 6379 color: color.selected.color, 6380 6381 ':hover': { 6382 background: color.selected.backgroundColor_hover, 6383 border: '1px solid ' + String(color.selected.borderColor), 6384 color: color.selected.color_active 6385 }, 6386 6387 ':active': { 6388 background: color.selected.backgroundColor_active, 6389 border: '1px solid ' + String(color.selected.borderColor), 6390 color: color.selected.color_active 6391 } 6392 }, 6393 6394 CalendarDay__hovered_span: { 6395 background: color.hoveredSpan.backgroundColor, 6396 border: '1px solid ' + String(color.hoveredSpan.borderColor), 6397 color: color.hoveredSpan.color, 6398 6399 ':hover': { 6400 background: color.hoveredSpan.backgroundColor_hover, 6401 border: '1px solid ' + String(color.hoveredSpan.borderColor), 6402 color: color.hoveredSpan.color_active 6403 }, 6404 6405 ':active': { 6406 background: color.hoveredSpan.backgroundColor_active, 6407 border: '1px solid ' + String(color.hoveredSpan.borderColor), 6408 color: color.hoveredSpan.color_active 6409 } 6410 }, 6411 6412 CalendarDay__blocked_calendar: { 6413 background: color.blocked_calendar.backgroundColor, 6414 border: '1px solid ' + String(color.blocked_calendar.borderColor), 6415 color: color.blocked_calendar.color, 6416 6417 ':hover': { 6418 background: color.blocked_calendar.backgroundColor_hover, 6419 border: '1px solid ' + String(color.blocked_calendar.borderColor), 6420 color: color.blocked_calendar.color_active 6421 }, 6422 6423 ':active': { 6424 background: color.blocked_calendar.backgroundColor_active, 6425 border: '1px solid ' + String(color.blocked_calendar.borderColor), 6426 color: color.blocked_calendar.color_active 6427 } 6428 }, 6429 6430 CalendarDay__blocked_out_of_range: { 6431 background: color.blocked_out_of_range.backgroundColor, 6432 border: '1px solid ' + String(color.blocked_out_of_range.borderColor), 6433 color: color.blocked_out_of_range.color, 6434 6435 ':hover': { 6436 background: color.blocked_out_of_range.backgroundColor_hover, 6437 border: '1px solid ' + String(color.blocked_out_of_range.borderColor), 6438 color: color.blocked_out_of_range.color_active 6439 }, 6440 6441 ':active': { 6442 background: color.blocked_out_of_range.backgroundColor_active, 6443 border: '1px solid ' + String(color.blocked_out_of_range.borderColor), 6444 color: color.blocked_out_of_range.color_active 6445 } 6446 }, 6447 6448 CalendarDay__selected_start: {}, 6449 CalendarDay__selected_end: {}, 6450 CalendarDay__today: {}, 6451 CalendarDay__firstDayOfWeek: {}, 6452 CalendarDay__lastDayOfWeek: {} 6453 }; 6454 })(CalendarDay); 6455 6456 /***/ }), 6457 6458 /***/ 5986: 6459 /***/ (function(__unused_webpack_module, exports, __webpack_require__) { 6460 6461 "use strict"; 6462 6463 6464 Object.defineProperty(exports, "__esModule", ({ 6465 value: true 6466 })); 6467 6468 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; 6469 6470 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); 6471 6472 var _object = __webpack_require__(4011); 6473 6474 var _object2 = _interopRequireDefault(_object); 6475 6476 var _react = __webpack_require__(9196); 6477 6478 var _react2 = _interopRequireDefault(_react); 6479 6480 var _propTypes = __webpack_require__(2652); 6481 6482 var _propTypes2 = _interopRequireDefault(_propTypes); 6483 6484 var _reactAddonsShallowCompare = __webpack_require__(2541); 6485 6486 var _reactAddonsShallowCompare2 = _interopRequireDefault(_reactAddonsShallowCompare); 6487 6488 var _reactMomentProptypes = __webpack_require__(6150); 6489 6490 var _reactMomentProptypes2 = _interopRequireDefault(_reactMomentProptypes); 6491 6492 var _airbnbPropTypes = __webpack_require__(4882); 6493 6494 var _reactWithStyles = __webpack_require__(3576); 6495 6496 var _moment = __webpack_require__(6292); 6497 6498 var _moment2 = _interopRequireDefault(_moment); 6499 6500 var _defaultPhrases = __webpack_require__(6030); 6501 6502 var _getPhrasePropTypes = __webpack_require__(2893); 6503 6504 var _getPhrasePropTypes2 = _interopRequireDefault(_getPhrasePropTypes); 6505 6506 var _CalendarWeek = __webpack_require__(4604); 6507 6508 var _CalendarWeek2 = _interopRequireDefault(_CalendarWeek); 6509 6510 var _CalendarDay = __webpack_require__(7617); 6511 6512 var _CalendarDay2 = _interopRequireDefault(_CalendarDay); 6513 6514 var _calculateDimension = __webpack_require__(8607); 6515 6516 var _calculateDimension2 = _interopRequireDefault(_calculateDimension); 6517 6518 var _getCalendarMonthWeeks = __webpack_require__(5644); 6519 6520 var _getCalendarMonthWeeks2 = _interopRequireDefault(_getCalendarMonthWeeks); 6521 6522 var _isSameDay = __webpack_require__(3923); 6523 6524 var _isSameDay2 = _interopRequireDefault(_isSameDay); 6525 6526 var _toISODateString = __webpack_require__(7310); 6527 6528 var _toISODateString2 = _interopRequireDefault(_toISODateString); 6529 6530 var _ModifiersShape = __webpack_require__(6747); 6531 6532 var _ModifiersShape2 = _interopRequireDefault(_ModifiersShape); 6533 6534 var _ScrollableOrientationShape = __webpack_require__(6553); 6535 6536 var _ScrollableOrientationShape2 = _interopRequireDefault(_ScrollableOrientationShape); 6537 6538 var _DayOfWeekShape = __webpack_require__(243); 6539 6540 var _DayOfWeekShape2 = _interopRequireDefault(_DayOfWeekShape); 6541 6542 var _constants = __webpack_require__(257); 6543 6544 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } 6545 6546 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 6547 6548 function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } 6549 6550 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /* eslint react/no-array-index-key: 0 */ 6551 6552 var propTypes = (0, _airbnbPropTypes.forbidExtraProps)((0, _object2['default'])({}, _reactWithStyles.withStylesPropTypes, { 6553 month: _reactMomentProptypes2['default'].momentObj, 6554 horizontalMonthPadding: _airbnbPropTypes.nonNegativeInteger, 6555 isVisible: _propTypes2['default'].bool, 6556 enableOutsideDays: _propTypes2['default'].bool, 6557 modifiers: _propTypes2['default'].objectOf(_ModifiersShape2['default']), 6558 orientation: _ScrollableOrientationShape2['default'], 6559 daySize: _airbnbPropTypes.nonNegativeInteger, 6560 onDayClick: _propTypes2['default'].func, 6561 onDayMouseEnter: _propTypes2['default'].func, 6562 onDayMouseLeave: _propTypes2['default'].func, 6563 onMonthSelect: _propTypes2['default'].func, 6564 onYearSelect: _propTypes2['default'].func, 6565 renderMonthText: (0, _airbnbPropTypes.mutuallyExclusiveProps)(_propTypes2['default'].func, 'renderMonthText', 'renderMonthElement'), 6566 renderCalendarDay: _propTypes2['default'].func, 6567 renderDayContents: _propTypes2['default'].func, 6568 renderMonthElement: (0, _airbnbPropTypes.mutuallyExclusiveProps)(_propTypes2['default'].func, 'renderMonthText', 'renderMonthElement'), 6569 firstDayOfWeek: _DayOfWeekShape2['default'], 6570 setMonthTitleHeight: _propTypes2['default'].func, 6571 verticalBorderSpacing: _airbnbPropTypes.nonNegativeInteger, 6572 6573 focusedDate: _reactMomentProptypes2['default'].momentObj, // indicates focusable day 6574 isFocused: _propTypes2['default'].bool, // indicates whether or not to move focus to focusable day 6575 6576 // i18n 6577 monthFormat: _propTypes2['default'].string, 6578 phrases: _propTypes2['default'].shape((0, _getPhrasePropTypes2['default'])(_defaultPhrases.CalendarDayPhrases)), 6579 dayAriaLabelFormat: _propTypes2['default'].string 6580 })); 6581 6582 var defaultProps = { 6583 month: (0, _moment2['default'])(), 6584 horizontalMonthPadding: 13, 6585 isVisible: true, 6586 enableOutsideDays: false, 6587 modifiers: {}, 6588 orientation: _constants.HORIZONTAL_ORIENTATION, 6589 daySize: _constants.DAY_SIZE, 6590 onDayClick: function () { 6591 function onDayClick() {} 6592 6593 return onDayClick; 6594 }(), 6595 onDayMouseEnter: function () { 6596 function onDayMouseEnter() {} 6597 6598 return onDayMouseEnter; 6599 }(), 6600 onDayMouseLeave: function () { 6601 function onDayMouseLeave() {} 6602 6603 return onDayMouseLeave; 6604 }(), 6605 onMonthSelect: function () { 6606 function onMonthSelect() {} 6607 6608 return onMonthSelect; 6609 }(), 6610 onYearSelect: function () { 6611 function onYearSelect() {} 6612 6613 return onYearSelect; 6614 }(), 6615 6616 renderMonthText: null, 6617 renderCalendarDay: function () { 6618 function renderCalendarDay(props) { 6619 return _react2['default'].createElement(_CalendarDay2['default'], props); 6620 } 6621 6622 return renderCalendarDay; 6623 }(), 6624 renderDayContents: null, 6625 renderMonthElement: null, 6626 firstDayOfWeek: null, 6627 setMonthTitleHeight: null, 6628 6629 focusedDate: null, 6630 isFocused: false, 6631 6632 // i18n 6633 monthFormat: 'MMMM YYYY', // english locale 6634 phrases: _defaultPhrases.CalendarDayPhrases, 6635 dayAriaLabelFormat: undefined, 6636 verticalBorderSpacing: undefined 6637 }; 6638 6639 var CalendarMonth = function (_React$Component) { 6640 _inherits(CalendarMonth, _React$Component); 6641 6642 function CalendarMonth(props) { 6643 _classCallCheck(this, CalendarMonth); 6644 6645 var _this = _possibleConstructorReturn(this, (CalendarMonth.__proto__ || Object.getPrototypeOf(CalendarMonth)).call(this, props)); 6646 6647 _this.state = { 6648 weeks: (0, _getCalendarMonthWeeks2['default'])(props.month, props.enableOutsideDays, props.firstDayOfWeek == null ? _moment2['default'].localeData().firstDayOfWeek() : props.firstDayOfWeek) 6649 }; 6650 6651 _this.setCaptionRef = _this.setCaptionRef.bind(_this); 6652 _this.setMonthTitleHeight = _this.setMonthTitleHeight.bind(_this); 6653 return _this; 6654 } 6655 6656 _createClass(CalendarMonth, [{ 6657 key: 'componentDidMount', 6658 value: function () { 6659 function componentDidMount() { 6660 this.setMonthTitleHeightTimeout = setTimeout(this.setMonthTitleHeight, 0); 6661 } 6662 6663 return componentDidMount; 6664 }() 6665 }, { 6666 key: 'componentWillReceiveProps', 6667 value: function () { 6668 function componentWillReceiveProps(nextProps) { 6669 var month = nextProps.month, 6670 enableOutsideDays = nextProps.enableOutsideDays, 6671 firstDayOfWeek = nextProps.firstDayOfWeek; 6672 var _props = this.props, 6673 prevMonth = _props.month, 6674 prevEnableOutsideDays = _props.enableOutsideDays, 6675 prevFirstDayOfWeek = _props.firstDayOfWeek; 6676 6677 if (!month.isSame(prevMonth) || enableOutsideDays !== prevEnableOutsideDays || firstDayOfWeek !== prevFirstDayOfWeek) { 6678 this.setState({ 6679 weeks: (0, _getCalendarMonthWeeks2['default'])(month, enableOutsideDays, firstDayOfWeek == null ? _moment2['default'].localeData().firstDayOfWeek() : firstDayOfWeek) 6680 }); 6681 } 6682 } 6683 6684 return componentWillReceiveProps; 6685 }() 6686 }, { 6687 key: 'shouldComponentUpdate', 6688 value: function () { 6689 function shouldComponentUpdate(nextProps, nextState) { 6690 return (0, _reactAddonsShallowCompare2['default'])(this, nextProps, nextState); 6691 } 6692 6693 return shouldComponentUpdate; 6694 }() 6695 }, { 6696 key: 'componentWillUnmount', 6697 value: function () { 6698 function componentWillUnmount() { 6699 if (this.setMonthTitleHeightTimeout) { 6700 clearTimeout(this.setMonthTitleHeightTimeout); 6701 } 6702 } 6703 6704 return componentWillUnmount; 6705 }() 6706 }, { 6707 key: 'setMonthTitleHeight', 6708 value: function () { 6709 function setMonthTitleHeight() { 6710 var setMonthTitleHeight = this.props.setMonthTitleHeight; 6711 6712 if (setMonthTitleHeight) { 6713 var captionHeight = (0, _calculateDimension2['default'])(this.captionRef, 'height', true, true); 6714 setMonthTitleHeight(captionHeight); 6715 } 6716 } 6717 6718 return setMonthTitleHeight; 6719 }() 6720 }, { 6721 key: 'setCaptionRef', 6722 value: function () { 6723 function setCaptionRef(ref) { 6724 this.captionRef = ref; 6725 } 6726 6727 return setCaptionRef; 6728 }() 6729 }, { 6730 key: 'render', 6731 value: function () { 6732 function render() { 6733 var _props2 = this.props, 6734 dayAriaLabelFormat = _props2.dayAriaLabelFormat, 6735 daySize = _props2.daySize, 6736 focusedDate = _props2.focusedDate, 6737 horizontalMonthPadding = _props2.horizontalMonthPadding, 6738 isFocused = _props2.isFocused, 6739 isVisible = _props2.isVisible, 6740 modifiers = _props2.modifiers, 6741 month = _props2.month, 6742 monthFormat = _props2.monthFormat, 6743 onDayClick = _props2.onDayClick, 6744 onDayMouseEnter = _props2.onDayMouseEnter, 6745 onDayMouseLeave = _props2.onDayMouseLeave, 6746 onMonthSelect = _props2.onMonthSelect, 6747 onYearSelect = _props2.onYearSelect, 6748 orientation = _props2.orientation, 6749 phrases = _props2.phrases, 6750 renderCalendarDay = _props2.renderCalendarDay, 6751 renderDayContents = _props2.renderDayContents, 6752 renderMonthElement = _props2.renderMonthElement, 6753 renderMonthText = _props2.renderMonthText, 6754 styles = _props2.styles, 6755 verticalBorderSpacing = _props2.verticalBorderSpacing; 6756 var weeks = this.state.weeks; 6757 6758 var monthTitle = renderMonthText ? renderMonthText(month) : month.format(monthFormat); 6759 6760 var verticalScrollable = orientation === _constants.VERTICAL_SCROLLABLE; 6761 6762 return _react2['default'].createElement( 6763 'div', 6764 _extends({}, (0, _reactWithStyles.css)(styles.CalendarMonth, { padding: '0 ' + String(horizontalMonthPadding) + 'px' }), { 6765 'data-visible': isVisible 6766 }), 6767 _react2['default'].createElement( 6768 'div', 6769 _extends({ 6770 ref: this.setCaptionRef 6771 }, (0, _reactWithStyles.css)(styles.CalendarMonth_caption, verticalScrollable && styles.CalendarMonth_caption__verticalScrollable)), 6772 renderMonthElement ? renderMonthElement({ month: month, onMonthSelect: onMonthSelect, onYearSelect: onYearSelect }) : _react2['default'].createElement( 6773 'strong', 6774 null, 6775 monthTitle 6776 ) 6777 ), 6778 _react2['default'].createElement( 6779 'table', 6780 _extends({}, (0, _reactWithStyles.css)(!verticalBorderSpacing && styles.CalendarMonth_table, verticalBorderSpacing && styles.CalendarMonth_verticalSpacing, verticalBorderSpacing && { borderSpacing: '0px ' + String(verticalBorderSpacing) + 'px' }), { 6781 role: 'presentation' 6782 }), 6783 _react2['default'].createElement( 6784 'tbody', 6785 null, 6786 weeks.map(function (week, i) { 6787 return _react2['default'].createElement( 6788 _CalendarWeek2['default'], 6789 { key: i }, 6790 week.map(function (day, dayOfWeek) { 6791 return renderCalendarDay({ 6792 key: dayOfWeek, 6793 day: day, 6794 daySize: daySize, 6795 isOutsideDay: !day || day.month() !== month.month(), 6796 tabIndex: isVisible && (0, _isSameDay2['default'])(day, focusedDate) ? 0 : -1, 6797 isFocused: isFocused, 6798 onDayMouseEnter: onDayMouseEnter, 6799 onDayMouseLeave: onDayMouseLeave, 6800 onDayClick: onDayClick, 6801 renderDayContents: renderDayContents, 6802 phrases: phrases, 6803 modifiers: modifiers[(0, _toISODateString2['default'])(day)], 6804 ariaLabelFormat: dayAriaLabelFormat 6805 }); 6806 }) 6807 ); 6808 }) 6809 ) 6810 ) 6811 ); 6812 } 6813 6814 return render; 6815 }() 6816 }]); 6817 6818 return CalendarMonth; 6819 }(_react2['default'].Component); 6820 6821 CalendarMonth.propTypes = propTypes; 6822 CalendarMonth.defaultProps = defaultProps; 6823 6824 exports["default"] = (0, _reactWithStyles.withStyles)(function (_ref) { 6825 var _ref$reactDates = _ref.reactDates, 6826 color = _ref$reactDates.color, 6827 font = _ref$reactDates.font, 6828 spacing = _ref$reactDates.spacing; 6829 return { 6830 CalendarMonth: { 6831 background: color.background, 6832 textAlign: 'center', 6833 verticalAlign: 'top', 6834 userSelect: 'none' 6835 }, 6836 6837 CalendarMonth_table: { 6838 borderCollapse: 'collapse', 6839 borderSpacing: 0 6840 }, 6841 6842 CalendarMonth_verticalSpacing: { 6843 borderCollapse: 'separate' 6844 }, 6845 6846 CalendarMonth_caption: { 6847 color: color.text, 6848 fontSize: font.captionSize, 6849 textAlign: 'center', 6850 paddingTop: spacing.captionPaddingTop, 6851 paddingBottom: spacing.captionPaddingBottom, 6852 captionSide: 'initial' 6853 }, 6854 6855 CalendarMonth_caption__verticalScrollable: { 6856 paddingTop: 12, 6857 paddingBottom: 7 6858 } 6859 }; 6860 })(CalendarMonth); 6861 6862 /***/ }), 6863 6864 /***/ 7938: 6865 /***/ (function(__unused_webpack_module, exports, __webpack_require__) { 6866 6867 "use strict"; 6868 6869 6870 Object.defineProperty(exports, "__esModule", ({ 6871 value: true 6872 })); 6873 6874 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; 6875 6876 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); 6877 6878 var _object = __webpack_require__(4011); 6879 6880 var _object2 = _interopRequireDefault(_object); 6881 6882 var _react = __webpack_require__(9196); 6883 6884 var _react2 = _interopRequireDefault(_react); 6885 6886 var _propTypes = __webpack_require__(2652); 6887 6888 var _propTypes2 = _interopRequireDefault(_propTypes); 6889 6890 var _reactAddonsShallowCompare = __webpack_require__(2541); 6891 6892 var _reactAddonsShallowCompare2 = _interopRequireDefault(_reactAddonsShallowCompare); 6893 6894 var _reactMomentProptypes = __webpack_require__(6150); 6895 6896 var _reactMomentProptypes2 = _interopRequireDefault(_reactMomentProptypes); 6897 6898 var _airbnbPropTypes = __webpack_require__(4882); 6899 6900 var _reactWithStyles = __webpack_require__(3576); 6901 6902 var _moment = __webpack_require__(6292); 6903 6904 var _moment2 = _interopRequireDefault(_moment); 6905 6906 var _consolidatedEvents = __webpack_require__(8495); 6907 6908 var _defaultPhrases = __webpack_require__(6030); 6909 6910 var _getPhrasePropTypes = __webpack_require__(2893); 6911 6912 var _getPhrasePropTypes2 = _interopRequireDefault(_getPhrasePropTypes); 6913 6914 var _CalendarMonth = __webpack_require__(5986); 6915 6916 var _CalendarMonth2 = _interopRequireDefault(_CalendarMonth); 6917 6918 var _isTransitionEndSupported = __webpack_require__(7978); 6919 6920 var _isTransitionEndSupported2 = _interopRequireDefault(_isTransitionEndSupported); 6921 6922 var _getTransformStyles = __webpack_require__(8304); 6923 6924 var _getTransformStyles2 = _interopRequireDefault(_getTransformStyles); 6925 6926 var _getCalendarMonthWidth = __webpack_require__(8964); 6927 6928 var _getCalendarMonthWidth2 = _interopRequireDefault(_getCalendarMonthWidth); 6929 6930 var _toISOMonthString = __webpack_require__(2705); 6931 6932 var _toISOMonthString2 = _interopRequireDefault(_toISOMonthString); 6933 6934 var _isPrevMonth = __webpack_require__(3858); 6935 6936 var _isPrevMonth2 = _interopRequireDefault(_isPrevMonth); 6937 6938 var _isNextMonth = __webpack_require__(1310); 6939 6940 var _isNextMonth2 = _interopRequireDefault(_isNextMonth); 6941 6942 var _ModifiersShape = __webpack_require__(6747); 6943 6944 var _ModifiersShape2 = _interopRequireDefault(_ModifiersShape); 6945 6946 var _ScrollableOrientationShape = __webpack_require__(6553); 6947 6948 var _ScrollableOrientationShape2 = _interopRequireDefault(_ScrollableOrientationShape); 6949 6950 var _DayOfWeekShape = __webpack_require__(243); 6951 6952 var _DayOfWeekShape2 = _interopRequireDefault(_DayOfWeekShape); 6953 6954 var _constants = __webpack_require__(257); 6955 6956 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } 6957 6958 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 6959 6960 function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } 6961 6962 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } 6963 6964 var propTypes = (0, _airbnbPropTypes.forbidExtraProps)((0, _object2['default'])({}, _reactWithStyles.withStylesPropTypes, { 6965 enableOutsideDays: _propTypes2['default'].bool, 6966 firstVisibleMonthIndex: _propTypes2['default'].number, 6967 horizontalMonthPadding: _airbnbPropTypes.nonNegativeInteger, 6968 initialMonth: _reactMomentProptypes2['default'].momentObj, 6969 isAnimating: _propTypes2['default'].bool, 6970 numberOfMonths: _propTypes2['default'].number, 6971 modifiers: _propTypes2['default'].objectOf(_propTypes2['default'].objectOf(_ModifiersShape2['default'])), 6972 orientation: _ScrollableOrientationShape2['default'], 6973 onDayClick: _propTypes2['default'].func, 6974 onDayMouseEnter: _propTypes2['default'].func, 6975 onDayMouseLeave: _propTypes2['default'].func, 6976 onMonthTransitionEnd: _propTypes2['default'].func, 6977 onMonthChange: _propTypes2['default'].func, 6978 onYearChange: _propTypes2['default'].func, 6979 renderMonthText: (0, _airbnbPropTypes.mutuallyExclusiveProps)(_propTypes2['default'].func, 'renderMonthText', 'renderMonthElement'), 6980 renderCalendarDay: _propTypes2['default'].func, 6981 renderDayContents: _propTypes2['default'].func, 6982 translationValue: _propTypes2['default'].number, 6983 renderMonthElement: (0, _airbnbPropTypes.mutuallyExclusiveProps)(_propTypes2['default'].func, 'renderMonthText', 'renderMonthElement'), 6984 daySize: _airbnbPropTypes.nonNegativeInteger, 6985 focusedDate: _reactMomentProptypes2['default'].momentObj, // indicates focusable day 6986 isFocused: _propTypes2['default'].bool, // indicates whether or not to move focus to focusable day 6987 firstDayOfWeek: _DayOfWeekShape2['default'], 6988 setMonthTitleHeight: _propTypes2['default'].func, 6989 isRTL: _propTypes2['default'].bool, 6990 transitionDuration: _airbnbPropTypes.nonNegativeInteger, 6991 verticalBorderSpacing: _airbnbPropTypes.nonNegativeInteger, 6992 6993 // i18n 6994 monthFormat: _propTypes2['default'].string, 6995 phrases: _propTypes2['default'].shape((0, _getPhrasePropTypes2['default'])(_defaultPhrases.CalendarDayPhrases)), 6996 dayAriaLabelFormat: _propTypes2['default'].string 6997 })); 6998 6999 var defaultProps = { 7000 enableOutsideDays: false, 7001 firstVisibleMonthIndex: 0, 7002 horizontalMonthPadding: 13, 7003 initialMonth: (0, _moment2['default'])(), 7004 isAnimating: false, 7005 numberOfMonths: 1, 7006 modifiers: {}, 7007 orientation: _constants.HORIZONTAL_ORIENTATION, 7008 onDayClick: function () { 7009 function onDayClick() {} 7010 7011 return onDayClick; 7012 }(), 7013 onDayMouseEnter: function () { 7014 function onDayMouseEnter() {} 7015 7016 return onDayMouseEnter; 7017 }(), 7018 onDayMouseLeave: function () { 7019 function onDayMouseLeave() {} 7020 7021 return onDayMouseLeave; 7022 }(), 7023 onMonthChange: function () { 7024 function onMonthChange() {} 7025 7026 return onMonthChange; 7027 }(), 7028 onYearChange: function () { 7029 function onYearChange() {} 7030 7031 return onYearChange; 7032 }(), 7033 onMonthTransitionEnd: function () { 7034 function onMonthTransitionEnd() {} 7035 7036 return onMonthTransitionEnd; 7037 }(), 7038 7039 renderMonthText: null, 7040 renderCalendarDay: undefined, 7041 renderDayContents: null, 7042 translationValue: null, 7043 renderMonthElement: null, 7044 daySize: _constants.DAY_SIZE, 7045 focusedDate: null, 7046 isFocused: false, 7047 firstDayOfWeek: null, 7048 setMonthTitleHeight: null, 7049 isRTL: false, 7050 transitionDuration: 200, 7051 verticalBorderSpacing: undefined, 7052 7053 // i18n 7054 monthFormat: 'MMMM YYYY', // english locale 7055 phrases: _defaultPhrases.CalendarDayPhrases, 7056 dayAriaLabelFormat: undefined 7057 }; 7058 7059 function getMonths(initialMonth, numberOfMonths, withoutTransitionMonths) { 7060 var month = initialMonth.clone(); 7061 if (!withoutTransitionMonths) month = month.subtract(1, 'month'); 7062 7063 var months = []; 7064 for (var i = 0; i < (withoutTransitionMonths ? numberOfMonths : numberOfMonths + 2); i += 1) { 7065 months.push(month); 7066 month = month.clone().add(1, 'month'); 7067 } 7068 7069 return months; 7070 } 7071 7072 var CalendarMonthGrid = function (_React$Component) { 7073 _inherits(CalendarMonthGrid, _React$Component); 7074 7075 function CalendarMonthGrid(props) { 7076 _classCallCheck(this, CalendarMonthGrid); 7077 7078 var _this = _possibleConstructorReturn(this, (CalendarMonthGrid.__proto__ || Object.getPrototypeOf(CalendarMonthGrid)).call(this, props)); 7079 7080 var withoutTransitionMonths = props.orientation === _constants.VERTICAL_SCROLLABLE; 7081 _this.state = { 7082 months: getMonths(props.initialMonth, props.numberOfMonths, withoutTransitionMonths) 7083 }; 7084 7085 _this.isTransitionEndSupported = (0, _isTransitionEndSupported2['default'])(); 7086 _this.onTransitionEnd = _this.onTransitionEnd.bind(_this); 7087 _this.setContainerRef = _this.setContainerRef.bind(_this); 7088 7089 _this.locale = _moment2['default'].locale(); 7090 _this.onMonthSelect = _this.onMonthSelect.bind(_this); 7091 _this.onYearSelect = _this.onYearSelect.bind(_this); 7092 return _this; 7093 } 7094 7095 _createClass(CalendarMonthGrid, [{ 7096 key: 'componentDidMount', 7097 value: function () { 7098 function componentDidMount() { 7099 this.removeEventListener = (0, _consolidatedEvents.addEventListener)(this.container, 'transitionend', this.onTransitionEnd); 7100 } 7101 7102 return componentDidMount; 7103 }() 7104 }, { 7105 key: 'componentWillReceiveProps', 7106 value: function () { 7107 function componentWillReceiveProps(nextProps) { 7108 var _this2 = this; 7109 7110 var initialMonth = nextProps.initialMonth, 7111 numberOfMonths = nextProps.numberOfMonths, 7112 orientation = nextProps.orientation; 7113 var months = this.state.months; 7114 var _props = this.props, 7115 prevInitialMonth = _props.initialMonth, 7116 prevNumberOfMonths = _props.numberOfMonths; 7117 7118 var hasMonthChanged = !prevInitialMonth.isSame(initialMonth, 'month'); 7119 var hasNumberOfMonthsChanged = prevNumberOfMonths !== numberOfMonths; 7120 var newMonths = months; 7121 7122 if (hasMonthChanged && !hasNumberOfMonthsChanged) { 7123 if ((0, _isNextMonth2['default'])(prevInitialMonth, initialMonth)) { 7124 newMonths = months.slice(1); 7125 newMonths.push(months[months.length - 1].clone().add(1, 'month')); 7126 } else if ((0, _isPrevMonth2['default'])(prevInitialMonth, initialMonth)) { 7127 newMonths = months.slice(0, months.length - 1); 7128 newMonths.unshift(months[0].clone().subtract(1, 'month')); 7129 } else { 7130 var withoutTransitionMonths = orientation === _constants.VERTICAL_SCROLLABLE; 7131 newMonths = getMonths(initialMonth, numberOfMonths, withoutTransitionMonths); 7132 } 7133 } 7134 7135 if (hasNumberOfMonthsChanged) { 7136 var _withoutTransitionMonths = orientation === _constants.VERTICAL_SCROLLABLE; 7137 newMonths = getMonths(initialMonth, numberOfMonths, _withoutTransitionMonths); 7138 } 7139 7140 var momentLocale = _moment2['default'].locale(); 7141 if (this.locale !== momentLocale) { 7142 this.locale = momentLocale; 7143 newMonths = newMonths.map(function (m) { 7144 return m.locale(_this2.locale); 7145 }); 7146 } 7147 7148 this.setState({ 7149 months: newMonths 7150 }); 7151 } 7152 7153 return componentWillReceiveProps; 7154 }() 7155 }, { 7156 key: 'shouldComponentUpdate', 7157 value: function () { 7158 function shouldComponentUpdate(nextProps, nextState) { 7159 return (0, _reactAddonsShallowCompare2['default'])(this, nextProps, nextState); 7160 } 7161 7162 return shouldComponentUpdate; 7163 }() 7164 }, { 7165 key: 'componentDidUpdate', 7166 value: function () { 7167 function componentDidUpdate() { 7168 var _props2 = this.props, 7169 isAnimating = _props2.isAnimating, 7170 transitionDuration = _props2.transitionDuration, 7171 onMonthTransitionEnd = _props2.onMonthTransitionEnd; 7172 7173 // For IE9, immediately call onMonthTransitionEnd instead of 7174 // waiting for the animation to complete. Similarly, if transitionDuration 7175 // is set to 0, also immediately invoke the onMonthTransitionEnd callback 7176 7177 if ((!this.isTransitionEndSupported || !transitionDuration) && isAnimating) { 7178 onMonthTransitionEnd(); 7179 } 7180 } 7181 7182 return componentDidUpdate; 7183 }() 7184 }, { 7185 key: 'componentWillUnmount', 7186 value: function () { 7187 function componentWillUnmount() { 7188 if (this.removeEventListener) this.removeEventListener(); 7189 } 7190 7191 return componentWillUnmount; 7192 }() 7193 }, { 7194 key: 'onTransitionEnd', 7195 value: function () { 7196 function onTransitionEnd() { 7197 var onMonthTransitionEnd = this.props.onMonthTransitionEnd; 7198 7199 onMonthTransitionEnd(); 7200 } 7201 7202 return onTransitionEnd; 7203 }() 7204 }, { 7205 key: 'onMonthSelect', 7206 value: function () { 7207 function onMonthSelect(currentMonth, newMonthVal) { 7208 var newMonth = currentMonth.clone(); 7209 var _props3 = this.props, 7210 onMonthChange = _props3.onMonthChange, 7211 orientation = _props3.orientation; 7212 var months = this.state.months; 7213 7214 var withoutTransitionMonths = orientation === _constants.VERTICAL_SCROLLABLE; 7215 var initialMonthSubtraction = months.indexOf(currentMonth); 7216 if (!withoutTransitionMonths) { 7217 initialMonthSubtraction -= 1; 7218 } 7219 newMonth.set('month', newMonthVal).subtract(initialMonthSubtraction, 'months'); 7220 onMonthChange(newMonth); 7221 } 7222 7223 return onMonthSelect; 7224 }() 7225 }, { 7226 key: 'onYearSelect', 7227 value: function () { 7228 function onYearSelect(currentMonth, newYearVal) { 7229 var newMonth = currentMonth.clone(); 7230 var _props4 = this.props, 7231 onYearChange = _props4.onYearChange, 7232 orientation = _props4.orientation; 7233 var months = this.state.months; 7234 7235 var withoutTransitionMonths = orientation === _constants.VERTICAL_SCROLLABLE; 7236 var initialMonthSubtraction = months.indexOf(currentMonth); 7237 if (!withoutTransitionMonths) { 7238 initialMonthSubtraction -= 1; 7239 } 7240 newMonth.set('year', newYearVal).subtract(initialMonthSubtraction, 'months'); 7241 onYearChange(newMonth); 7242 } 7243 7244 return onYearSelect; 7245 }() 7246 }, { 7247 key: 'setContainerRef', 7248 value: function () { 7249 function setContainerRef(ref) { 7250 this.container = ref; 7251 } 7252 7253 return setContainerRef; 7254 }() 7255 }, { 7256 key: 'render', 7257 value: function () { 7258 function render() { 7259 var _this3 = this; 7260 7261 var _props5 = this.props, 7262 enableOutsideDays = _props5.enableOutsideDays, 7263 firstVisibleMonthIndex = _props5.firstVisibleMonthIndex, 7264 horizontalMonthPadding = _props5.horizontalMonthPadding, 7265 isAnimating = _props5.isAnimating, 7266 modifiers = _props5.modifiers, 7267 numberOfMonths = _props5.numberOfMonths, 7268 monthFormat = _props5.monthFormat, 7269 orientation = _props5.orientation, 7270 translationValue = _props5.translationValue, 7271 daySize = _props5.daySize, 7272 onDayMouseEnter = _props5.onDayMouseEnter, 7273 onDayMouseLeave = _props5.onDayMouseLeave, 7274 onDayClick = _props5.onDayClick, 7275 renderMonthText = _props5.renderMonthText, 7276 renderCalendarDay = _props5.renderCalendarDay, 7277 renderDayContents = _props5.renderDayContents, 7278 renderMonthElement = _props5.renderMonthElement, 7279 onMonthTransitionEnd = _props5.onMonthTransitionEnd, 7280 firstDayOfWeek = _props5.firstDayOfWeek, 7281 focusedDate = _props5.focusedDate, 7282 isFocused = _props5.isFocused, 7283 isRTL = _props5.isRTL, 7284 styles = _props5.styles, 7285 phrases = _props5.phrases, 7286 dayAriaLabelFormat = _props5.dayAriaLabelFormat, 7287 transitionDuration = _props5.transitionDuration, 7288 verticalBorderSpacing = _props5.verticalBorderSpacing, 7289 setMonthTitleHeight = _props5.setMonthTitleHeight; 7290 var months = this.state.months; 7291 7292 var isVertical = orientation === _constants.VERTICAL_ORIENTATION; 7293 var isVerticalScrollable = orientation === _constants.VERTICAL_SCROLLABLE; 7294 var isHorizontal = orientation === _constants.HORIZONTAL_ORIENTATION; 7295 7296 var calendarMonthWidth = (0, _getCalendarMonthWidth2['default'])(daySize, horizontalMonthPadding); 7297 7298 var width = isVertical || isVerticalScrollable ? calendarMonthWidth : (numberOfMonths + 2) * calendarMonthWidth; 7299 7300 var transformType = isVertical || isVerticalScrollable ? 'translateY' : 'translateX'; 7301 var transformValue = transformType + '(' + String(translationValue) + 'px)'; 7302 7303 return _react2['default'].createElement( 7304 'div', 7305 _extends({}, (0, _reactWithStyles.css)(styles.CalendarMonthGrid, isHorizontal && styles.CalendarMonthGrid__horizontal, isVertical && styles.CalendarMonthGrid__vertical, isVerticalScrollable && styles.CalendarMonthGrid__vertical_scrollable, isAnimating && styles.CalendarMonthGrid__animating, isAnimating && transitionDuration && { 7306 transition: 'transform ' + String(transitionDuration) + 'ms ease-in-out' 7307 }, (0, _object2['default'])({}, (0, _getTransformStyles2['default'])(transformValue), { 7308 width: width 7309 })), { 7310 ref: this.setContainerRef, 7311 onTransitionEnd: onMonthTransitionEnd 7312 }), 7313 months.map(function (month, i) { 7314 var isVisible = i >= firstVisibleMonthIndex && i < firstVisibleMonthIndex + numberOfMonths; 7315 var hideForAnimation = i === 0 && !isVisible; 7316 var showForAnimation = i === 0 && isAnimating && isVisible; 7317 var monthString = (0, _toISOMonthString2['default'])(month); 7318 return _react2['default'].createElement( 7319 'div', 7320 _extends({ 7321 key: monthString 7322 }, (0, _reactWithStyles.css)(isHorizontal && styles.CalendarMonthGrid_month__horizontal, hideForAnimation && styles.CalendarMonthGrid_month__hideForAnimation, showForAnimation && !isVertical && !isRTL && { 7323 position: 'absolute', 7324 left: -calendarMonthWidth 7325 }, showForAnimation && !isVertical && isRTL && { 7326 position: 'absolute', 7327 right: 0 7328 }, showForAnimation && isVertical && { 7329 position: 'absolute', 7330 top: -translationValue 7331 }, !isVisible && !isAnimating && styles.CalendarMonthGrid_month__hidden)), 7332 _react2['default'].createElement(_CalendarMonth2['default'], { 7333 month: month, 7334 isVisible: isVisible, 7335 enableOutsideDays: enableOutsideDays, 7336 modifiers: modifiers[monthString], 7337 monthFormat: monthFormat, 7338 orientation: orientation, 7339 onDayMouseEnter: onDayMouseEnter, 7340 onDayMouseLeave: onDayMouseLeave, 7341 onDayClick: onDayClick, 7342 onMonthSelect: _this3.onMonthSelect, 7343 onYearSelect: _this3.onYearSelect, 7344 renderMonthText: renderMonthText, 7345 renderCalendarDay: renderCalendarDay, 7346 renderDayContents: renderDayContents, 7347 renderMonthElement: renderMonthElement, 7348 firstDayOfWeek: firstDayOfWeek, 7349 daySize: daySize, 7350 focusedDate: isVisible ? focusedDate : null, 7351 isFocused: isFocused, 7352 phrases: phrases, 7353 setMonthTitleHeight: setMonthTitleHeight, 7354 dayAriaLabelFormat: dayAriaLabelFormat, 7355 verticalBorderSpacing: verticalBorderSpacing, 7356 horizontalMonthPadding: horizontalMonthPadding 7357 }) 7358 ); 7359 }) 7360 ); 7361 } 7362 7363 return render; 7364 }() 7365 }]); 7366 7367 return CalendarMonthGrid; 7368 }(_react2['default'].Component); 7369 7370 CalendarMonthGrid.propTypes = propTypes; 7371 CalendarMonthGrid.defaultProps = defaultProps; 7372 7373 exports["default"] = (0, _reactWithStyles.withStyles)(function (_ref) { 7374 var _ref$reactDates = _ref.reactDates, 7375 color = _ref$reactDates.color, 7376 noScrollBarOnVerticalScrollable = _ref$reactDates.noScrollBarOnVerticalScrollable, 7377 spacing = _ref$reactDates.spacing, 7378 zIndex = _ref$reactDates.zIndex; 7379 return { 7380 CalendarMonthGrid: { 7381 background: color.background, 7382 textAlign: 'left', 7383 zIndex: zIndex 7384 }, 7385 7386 CalendarMonthGrid__animating: { 7387 zIndex: zIndex + 1 7388 }, 7389 7390 CalendarMonthGrid__horizontal: { 7391 position: 'absolute', 7392 left: spacing.dayPickerHorizontalPadding 7393 }, 7394 7395 CalendarMonthGrid__vertical: { 7396 margin: '0 auto' 7397 }, 7398 7399 CalendarMonthGrid__vertical_scrollable: (0, _object2['default'])({ 7400 margin: '0 auto', 7401 overflowY: 'scroll' 7402 }, noScrollBarOnVerticalScrollable && { 7403 '-webkitOverflowScrolling': 'touch', 7404 '::-webkit-scrollbar': { 7405 '-webkit-appearance': 'none', 7406 display: 'none' 7407 } 7408 }), 7409 7410 CalendarMonthGrid_month__horizontal: { 7411 display: 'inline-block', 7412 verticalAlign: 'top', 7413 minHeight: '100%' 7414 }, 7415 7416 CalendarMonthGrid_month__hideForAnimation: { 7417 position: 'absolute', 7418 zIndex: zIndex - 1, 7419 opacity: 0, 7420 pointerEvents: 'none' 7421 }, 7422 7423 CalendarMonthGrid_month__hidden: { 7424 visibility: 'hidden' 7425 } 7426 }; 7427 })(CalendarMonthGrid); 7428 7429 /***/ }), 7430 7431 /***/ 4604: 7432 /***/ (function(__unused_webpack_module, exports, __webpack_require__) { 7433 7434 "use strict"; 7435 7436 7437 Object.defineProperty(exports, "__esModule", ({ 7438 value: true 7439 })); 7440 exports["default"] = CalendarWeek; 7441 7442 var _react = __webpack_require__(9196); 7443 7444 var _react2 = _interopRequireDefault(_react); 7445 7446 var _airbnbPropTypes = __webpack_require__(4882); 7447 7448 var _CalendarDay = __webpack_require__(7617); 7449 7450 var _CalendarDay2 = _interopRequireDefault(_CalendarDay); 7451 7452 var _CustomizableCalendarDay = __webpack_require__(6698); 7453 7454 var _CustomizableCalendarDay2 = _interopRequireDefault(_CustomizableCalendarDay); 7455 7456 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } 7457 7458 var propTypes = (0, _airbnbPropTypes.forbidExtraProps)({ 7459 children: (0, _airbnbPropTypes.or)([(0, _airbnbPropTypes.childrenOfType)(_CalendarDay2['default']), (0, _airbnbPropTypes.childrenOfType)(_CustomizableCalendarDay2['default'])]).isRequired 7460 }); 7461 7462 function CalendarWeek(_ref) { 7463 var children = _ref.children; 7464 7465 return _react2['default'].createElement( 7466 'tr', 7467 null, 7468 children 7469 ); 7470 } 7471 7472 CalendarWeek.propTypes = propTypes; 7473 7474 /***/ }), 7475 7476 /***/ 9588: 7477 /***/ (function(__unused_webpack_module, exports, __webpack_require__) { 7478 7479 "use strict"; 7480 7481 7482 Object.defineProperty(exports, "__esModule", ({ 7483 value: true 7484 })); 7485 7486 var _react = __webpack_require__(9196); 7487 7488 var _react2 = _interopRequireDefault(_react); 7489 7490 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } 7491 7492 var ChevronDown = function () { 7493 function ChevronDown(props) { 7494 return _react2['default'].createElement( 7495 'svg', 7496 props, 7497 _react2['default'].createElement('path', { 7498 d: 'M967.5 288.5L514.3 740.7c-11 11-21 11-32 0L29.1 288.5c-4-5-6-11-6-16 0-13 10-23 23-23 6 0 11 2 15 7l437.2 436.2 437.2-436.2c4-5 9-7 16-7 6 0 11 2 16 7 9 10.9 9 21 0 32z' 7499 }) 7500 ); 7501 } 7502 7503 return ChevronDown; 7504 }(); 7505 7506 ChevronDown.defaultProps = { 7507 viewBox: '0 0 1000 1000' 7508 }; 7509 exports["default"] = ChevronDown; 7510 7511 /***/ }), 7512 7513 /***/ 1809: 7514 /***/ (function(__unused_webpack_module, exports, __webpack_require__) { 7515 7516 "use strict"; 7517 7518 7519 Object.defineProperty(exports, "__esModule", ({ 7520 value: true 7521 })); 7522 7523 var _react = __webpack_require__(9196); 7524 7525 var _react2 = _interopRequireDefault(_react); 7526 7527 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } 7528 7529 var ChevronUp = function () { 7530 function ChevronUp(props) { 7531 return _react2['default'].createElement( 7532 'svg', 7533 props, 7534 _react2['default'].createElement('path', { 7535 d: 'M32.1 712.6l453.2-452.2c11-11 21-11 32 0l453.2 452.2c4 5 6 10 6 16 0 13-10 23-22 23-7 0-12-2-16-7L501.3 308.5 64.1 744.7c-4 5-9 7-15 7-7 0-12-2-17-7-9-11-9-21 0-32.1z' 7536 }) 7537 ); 7538 } 7539 7540 return ChevronUp; 7541 }(); 7542 7543 ChevronUp.defaultProps = { 7544 viewBox: '0 0 1000 1000' 7545 }; 7546 exports["default"] = ChevronUp; 7547 7548 /***/ }), 7549 7550 /***/ 6973: 7551 /***/ (function(__unused_webpack_module, exports, __webpack_require__) { 7552 7553 "use strict"; 7554 7555 7556 Object.defineProperty(exports, "__esModule", ({ 7557 value: true 7558 })); 7559 7560 var _react = __webpack_require__(9196); 7561 7562 var _react2 = _interopRequireDefault(_react); 7563 7564 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } 7565 7566 var CloseButton = function () { 7567 function CloseButton(props) { 7568 return _react2['default'].createElement( 7569 'svg', 7570 props, 7571 _react2['default'].createElement('path', { 7572 fillRule: 'evenodd', 7573 d: 'M11.53.47a.75.75 0 0 0-1.061 0l-4.47 4.47L1.529.47A.75.75 0 1 0 .468 1.531l4.47 4.47-4.47 4.47a.75.75 0 1 0 1.061 1.061l4.47-4.47 4.47 4.47a.75.75 0 1 0 1.061-1.061l-4.47-4.47 4.47-4.47a.75.75 0 0 0 0-1.061z' 7574 }) 7575 ); 7576 } 7577 7578 return CloseButton; 7579 }(); 7580 7581 CloseButton.defaultProps = { 7582 viewBox: '0 0 12 12' 7583 }; 7584 exports["default"] = CloseButton; 7585 7586 /***/ }), 7587 7588 /***/ 6698: 7589 /***/ (function(__unused_webpack_module, exports, __webpack_require__) { 7590 7591 "use strict"; 7592 7593 7594 Object.defineProperty(exports, "__esModule", ({ 7595 value: true 7596 })); 7597 exports.PureCustomizableCalendarDay = exports.selectedStyles = exports.lastInRangeStyles = exports.selectedSpanStyles = exports.hoveredSpanStyles = exports.blockedOutOfRangeStyles = exports.blockedCalendarStyles = exports.blockedMinNightsStyles = exports.highlightedCalendarStyles = exports.outsideStyles = exports.defaultStyles = undefined; 7598 7599 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; 7600 7601 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); 7602 7603 var _object = __webpack_require__(4011); 7604 7605 var _object2 = _interopRequireDefault(_object); 7606 7607 var _react = __webpack_require__(9196); 7608 7609 var _react2 = _interopRequireDefault(_react); 7610 7611 var _propTypes = __webpack_require__(2652); 7612 7613 var _propTypes2 = _interopRequireDefault(_propTypes); 7614 7615 var _reactAddonsShallowCompare = __webpack_require__(2541); 7616 7617 var _reactAddonsShallowCompare2 = _interopRequireDefault(_reactAddonsShallowCompare); 7618 7619 var _reactMomentProptypes = __webpack_require__(6150); 7620 7621 var _reactMomentProptypes2 = _interopRequireDefault(_reactMomentProptypes); 7622 7623 var _airbnbPropTypes = __webpack_require__(4882); 7624 7625 var _reactWithStyles = __webpack_require__(3576); 7626 7627 var _moment = __webpack_require__(6292); 7628 7629 var _moment2 = _interopRequireDefault(_moment); 7630 7631 var _defaultPhrases = __webpack_require__(6030); 7632 7633 var _getPhrasePropTypes = __webpack_require__(2893); 7634 7635 var _getPhrasePropTypes2 = _interopRequireDefault(_getPhrasePropTypes); 7636 7637 var _getCalendarDaySettings = __webpack_require__(7475); 7638 7639 var _getCalendarDaySettings2 = _interopRequireDefault(_getCalendarDaySettings); 7640 7641 var _constants = __webpack_require__(257); 7642 7643 var _DefaultTheme = __webpack_require__(8158); 7644 7645 var _DefaultTheme2 = _interopRequireDefault(_DefaultTheme); 7646 7647 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } 7648 7649 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 7650 7651 function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } 7652 7653 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } 7654 7655 var color = _DefaultTheme2['default'].reactDates.color; 7656 7657 7658 function getStyles(stylesObj, isHovered) { 7659 if (!stylesObj) return null; 7660 7661 var hover = stylesObj.hover; 7662 7663 if (isHovered && hover) { 7664 return hover; 7665 } 7666 7667 return stylesObj; 7668 } 7669 7670 var DayStyleShape = _propTypes2['default'].shape({ 7671 background: _propTypes2['default'].string, 7672 border: (0, _airbnbPropTypes.or)([_propTypes2['default'].string, _propTypes2['default'].number]), 7673 color: _propTypes2['default'].string, 7674 7675 hover: _propTypes2['default'].shape({ 7676 background: _propTypes2['default'].string, 7677 border: (0, _airbnbPropTypes.or)([_propTypes2['default'].string, _propTypes2['default'].number]), 7678 color: _propTypes2['default'].string 7679 }) 7680 }); 7681 7682 var propTypes = (0, _airbnbPropTypes.forbidExtraProps)((0, _object2['default'])({}, _reactWithStyles.withStylesPropTypes, { 7683 day: _reactMomentProptypes2['default'].momentObj, 7684 daySize: _airbnbPropTypes.nonNegativeInteger, 7685 isOutsideDay: _propTypes2['default'].bool, 7686 modifiers: _propTypes2['default'].instanceOf(Set), 7687 isFocused: _propTypes2['default'].bool, 7688 tabIndex: _propTypes2['default'].oneOf([0, -1]), 7689 onDayClick: _propTypes2['default'].func, 7690 onDayMouseEnter: _propTypes2['default'].func, 7691 onDayMouseLeave: _propTypes2['default'].func, 7692 renderDayContents: _propTypes2['default'].func, 7693 ariaLabelFormat: _propTypes2['default'].string, 7694 7695 // style overrides 7696 defaultStyles: DayStyleShape, 7697 outsideStyles: DayStyleShape, 7698 todayStyles: DayStyleShape, 7699 firstDayOfWeekStyles: DayStyleShape, 7700 lastDayOfWeekStyles: DayStyleShape, 7701 highlightedCalendarStyles: DayStyleShape, 7702 blockedMinNightsStyles: DayStyleShape, 7703 blockedCalendarStyles: DayStyleShape, 7704 blockedOutOfRangeStyles: DayStyleShape, 7705 hoveredSpanStyles: DayStyleShape, 7706 selectedSpanStyles: DayStyleShape, 7707 lastInRangeStyles: DayStyleShape, 7708 selectedStyles: DayStyleShape, 7709 selectedStartStyles: DayStyleShape, 7710 selectedEndStyles: DayStyleShape, 7711 afterHoveredStartStyles: DayStyleShape, 7712 7713 // internationalization 7714 phrases: _propTypes2['default'].shape((0, _getPhrasePropTypes2['default'])(_defaultPhrases.CalendarDayPhrases)) 7715 })); 7716 7717 var defaultStyles = exports.defaultStyles = { 7718 border: '1px solid ' + String(color.core.borderLight), 7719 color: color.text, 7720 background: color.background, 7721 7722 hover: { 7723 background: color.core.borderLight, 7724 border: '1px double ' + String(color.core.borderLight), 7725 color: 'inherit' 7726 } 7727 }; 7728 7729 var outsideStyles = exports.outsideStyles = { 7730 background: color.outside.backgroundColor, 7731 border: 0, 7732 color: color.outside.color 7733 }; 7734 7735 var highlightedCalendarStyles = exports.highlightedCalendarStyles = { 7736 background: color.highlighted.backgroundColor, 7737 color: color.highlighted.color, 7738 7739 hover: { 7740 background: color.highlighted.backgroundColor_hover, 7741 color: color.highlighted.color_active 7742 } 7743 }; 7744 7745 var blockedMinNightsStyles = exports.blockedMinNightsStyles = { 7746 background: color.minimumNights.backgroundColor, 7747 border: '1px solid ' + String(color.minimumNights.borderColor), 7748 color: color.minimumNights.color, 7749 7750 hover: { 7751 background: color.minimumNights.backgroundColor_hover, 7752 color: color.minimumNights.color_active 7753 } 7754 }; 7755 7756 var blockedCalendarStyles = exports.blockedCalendarStyles = { 7757 background: color.blocked_calendar.backgroundColor, 7758 border: '1px solid ' + String(color.blocked_calendar.borderColor), 7759 color: color.blocked_calendar.color, 7760 7761 hover: { 7762 background: color.blocked_calendar.backgroundColor_hover, 7763 border: '1px solid ' + String(color.blocked_calendar.borderColor), 7764 color: color.blocked_calendar.color_active 7765 } 7766 }; 7767 7768 var blockedOutOfRangeStyles = exports.blockedOutOfRangeStyles = { 7769 background: color.blocked_out_of_range.backgroundColor, 7770 border: '1px solid ' + String(color.blocked_out_of_range.borderColor), 7771 color: color.blocked_out_of_range.color, 7772 7773 hover: { 7774 background: color.blocked_out_of_range.backgroundColor_hover, 7775 border: '1px solid ' + String(color.blocked_out_of_range.borderColor), 7776 color: color.blocked_out_of_range.color_active 7777 } 7778 }; 7779 7780 var hoveredSpanStyles = exports.hoveredSpanStyles = { 7781 background: color.hoveredSpan.backgroundColor, 7782 border: '1px solid ' + String(color.hoveredSpan.borderColor), 7783 color: color.hoveredSpan.color, 7784 7785 hover: { 7786 background: color.hoveredSpan.backgroundColor_hover, 7787 border: '1px solid ' + String(color.hoveredSpan.borderColor), 7788 color: color.hoveredSpan.color_active 7789 } 7790 }; 7791 7792 var selectedSpanStyles = exports.selectedSpanStyles = { 7793 background: color.selectedSpan.backgroundColor, 7794 border: '1px solid ' + String(color.selectedSpan.borderColor), 7795 color: color.selectedSpan.color, 7796 7797 hover: { 7798 background: color.selectedSpan.backgroundColor_hover, 7799 border: '1px solid ' + String(color.selectedSpan.borderColor), 7800 color: color.selectedSpan.color_active 7801 } 7802 }; 7803 7804 var lastInRangeStyles = exports.lastInRangeStyles = { 7805 borderRight: color.core.primary 7806 }; 7807 7808 var selectedStyles = exports.selectedStyles = { 7809 background: color.selected.backgroundColor, 7810 border: '1px solid ' + String(color.selected.borderColor), 7811 color: color.selected.color, 7812 7813 hover: { 7814 background: color.selected.backgroundColor_hover, 7815 border: '1px solid ' + String(color.selected.borderColor), 7816 color: color.selected.color_active 7817 } 7818 }; 7819 7820 var defaultProps = { 7821 day: (0, _moment2['default'])(), 7822 daySize: _constants.DAY_SIZE, 7823 isOutsideDay: false, 7824 modifiers: new Set(), 7825 isFocused: false, 7826 tabIndex: -1, 7827 onDayClick: function () { 7828 function onDayClick() {} 7829 7830 return onDayClick; 7831 }(), 7832 onDayMouseEnter: function () { 7833 function onDayMouseEnter() {} 7834 7835 return onDayMouseEnter; 7836 }(), 7837 onDayMouseLeave: function () { 7838 function onDayMouseLeave() {} 7839 7840 return onDayMouseLeave; 7841 }(), 7842 7843 renderDayContents: null, 7844 ariaLabelFormat: 'dddd, LL', 7845 7846 // style defaults 7847 defaultStyles: defaultStyles, 7848 outsideStyles: outsideStyles, 7849 todayStyles: {}, 7850 highlightedCalendarStyles: highlightedCalendarStyles, 7851 blockedMinNightsStyles: blockedMinNightsStyles, 7852 blockedCalendarStyles: blockedCalendarStyles, 7853 blockedOutOfRangeStyles: blockedOutOfRangeStyles, 7854 hoveredSpanStyles: hoveredSpanStyles, 7855 selectedSpanStyles: selectedSpanStyles, 7856 lastInRangeStyles: lastInRangeStyles, 7857 selectedStyles: selectedStyles, 7858 selectedStartStyles: {}, 7859 selectedEndStyles: {}, 7860 afterHoveredStartStyles: {}, 7861 firstDayOfWeekStyles: {}, 7862 lastDayOfWeekStyles: {}, 7863 7864 // internationalization 7865 phrases: _defaultPhrases.CalendarDayPhrases 7866 }; 7867 7868 var CustomizableCalendarDay = function (_React$Component) { 7869 _inherits(CustomizableCalendarDay, _React$Component); 7870 7871 function CustomizableCalendarDay() { 7872 var _ref; 7873 7874 _classCallCheck(this, CustomizableCalendarDay); 7875 7876 for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { 7877 args[_key] = arguments[_key]; 7878 } 7879 7880 var _this = _possibleConstructorReturn(this, (_ref = CustomizableCalendarDay.__proto__ || Object.getPrototypeOf(CustomizableCalendarDay)).call.apply(_ref, [this].concat(args))); 7881 7882 _this.state = { 7883 isHovered: false 7884 }; 7885 7886 _this.setButtonRef = _this.setButtonRef.bind(_this); 7887 return _this; 7888 } 7889 7890 _createClass(CustomizableCalendarDay, [{ 7891 key: 'shouldComponentUpdate', 7892 value: function () { 7893 function shouldComponentUpdate(nextProps, nextState) { 7894 return (0, _reactAddonsShallowCompare2['default'])(this, nextProps, nextState); 7895 } 7896 7897 return shouldComponentUpdate; 7898 }() 7899 }, { 7900 key: 'componentDidUpdate', 7901 value: function () { 7902 function componentDidUpdate(prevProps) { 7903 var _props = this.props, 7904 isFocused = _props.isFocused, 7905 tabIndex = _props.tabIndex; 7906 7907 if (tabIndex === 0) { 7908 if (isFocused || tabIndex !== prevProps.tabIndex) { 7909 this.buttonRef.focus(); 7910 } 7911 } 7912 } 7913 7914 return componentDidUpdate; 7915 }() 7916 }, { 7917 key: 'onDayClick', 7918 value: function () { 7919 function onDayClick(day, e) { 7920 var onDayClick = this.props.onDayClick; 7921 7922 onDayClick(day, e); 7923 } 7924 7925 return onDayClick; 7926 }() 7927 }, { 7928 key: 'onDayMouseEnter', 7929 value: function () { 7930 function onDayMouseEnter(day, e) { 7931 var onDayMouseEnter = this.props.onDayMouseEnter; 7932 7933 this.setState({ isHovered: true }); 7934 onDayMouseEnter(day, e); 7935 } 7936 7937 return onDayMouseEnter; 7938 }() 7939 }, { 7940 key: 'onDayMouseLeave', 7941 value: function () { 7942 function onDayMouseLeave(day, e) { 7943 var onDayMouseLeave = this.props.onDayMouseLeave; 7944 7945 this.setState({ isHovered: false }); 7946 onDayMouseLeave(day, e); 7947 } 7948 7949 return onDayMouseLeave; 7950 }() 7951 }, { 7952 key: 'onKeyDown', 7953 value: function () { 7954 function onKeyDown(day, e) { 7955 var onDayClick = this.props.onDayClick; 7956 var key = e.key; 7957 7958 if (key === 'Enter' || key === ' ') { 7959 onDayClick(day, e); 7960 } 7961 } 7962 7963 return onKeyDown; 7964 }() 7965 }, { 7966 key: 'setButtonRef', 7967 value: function () { 7968 function setButtonRef(ref) { 7969 this.buttonRef = ref; 7970 } 7971 7972 return setButtonRef; 7973 }() 7974 }, { 7975 key: 'render', 7976 value: function () { 7977 function render() { 7978 var _this2 = this; 7979 7980 var _props2 = this.props, 7981 day = _props2.day, 7982 ariaLabelFormat = _props2.ariaLabelFormat, 7983 daySize = _props2.daySize, 7984 isOutsideDay = _props2.isOutsideDay, 7985 modifiers = _props2.modifiers, 7986 tabIndex = _props2.tabIndex, 7987 renderDayContents = _props2.renderDayContents, 7988 styles = _props2.styles, 7989 phrases = _props2.phrases, 7990 defaultStylesWithHover = _props2.defaultStyles, 7991 outsideStylesWithHover = _props2.outsideStyles, 7992 todayStylesWithHover = _props2.todayStyles, 7993 firstDayOfWeekStylesWithHover = _props2.firstDayOfWeekStyles, 7994 lastDayOfWeekStylesWithHover = _props2.lastDayOfWeekStyles, 7995 highlightedCalendarStylesWithHover = _props2.highlightedCalendarStyles, 7996 blockedMinNightsStylesWithHover = _props2.blockedMinNightsStyles, 7997 blockedCalendarStylesWithHover = _props2.blockedCalendarStyles, 7998 blockedOutOfRangeStylesWithHover = _props2.blockedOutOfRangeStyles, 7999 hoveredSpanStylesWithHover = _props2.hoveredSpanStyles, 8000 selectedSpanStylesWithHover = _props2.selectedSpanStyles, 8001 lastInRangeStylesWithHover = _props2.lastInRangeStyles, 8002 selectedStylesWithHover = _props2.selectedStyles, 8003 selectedStartStylesWithHover = _props2.selectedStartStyles, 8004 selectedEndStylesWithHover = _props2.selectedEndStyles, 8005 afterHoveredStartStylesWithHover = _props2.afterHoveredStartStyles; 8006 var isHovered = this.state.isHovered; 8007 8008 8009 if (!day) return _react2['default'].createElement('td', null); 8010 8011 var _getCalendarDaySettin = (0, _getCalendarDaySettings2['default'])(day, ariaLabelFormat, daySize, modifiers, phrases), 8012 daySizeStyles = _getCalendarDaySettin.daySizeStyles, 8013 useDefaultCursor = _getCalendarDaySettin.useDefaultCursor, 8014 selected = _getCalendarDaySettin.selected, 8015 hoveredSpan = _getCalendarDaySettin.hoveredSpan, 8016 isOutsideRange = _getCalendarDaySettin.isOutsideRange, 8017 ariaLabel = _getCalendarDaySettin.ariaLabel; 8018 8019 return _react2['default'].createElement( 8020 'td', 8021 _extends({}, (0, _reactWithStyles.css)(styles.CalendarDay, useDefaultCursor && styles.CalendarDay__defaultCursor, daySizeStyles, getStyles(defaultStylesWithHover, isHovered), isOutsideDay && getStyles(outsideStylesWithHover, isHovered), modifiers.has('today') && getStyles(todayStylesWithHover, isHovered), modifiers.has('first-day-of-week') && getStyles(firstDayOfWeekStylesWithHover, isHovered), modifiers.has('last-day-of-week') && getStyles(lastDayOfWeekStylesWithHover, isHovered), modifiers.has('highlighted-calendar') && getStyles(highlightedCalendarStylesWithHover, isHovered), modifiers.has('blocked-minimum-nights') && getStyles(blockedMinNightsStylesWithHover, isHovered), modifiers.has('blocked-calendar') && getStyles(blockedCalendarStylesWithHover, isHovered), hoveredSpan && getStyles(hoveredSpanStylesWithHover, isHovered), modifiers.has('after-hovered-start') && getStyles(afterHoveredStartStylesWithHover, isHovered), modifiers.has('selected-span') && getStyles(selectedSpanStylesWithHover, isHovered), modifiers.has('last-in-range') && getStyles(lastInRangeStylesWithHover, isHovered), selected && getStyles(selectedStylesWithHover, isHovered), modifiers.has('selected-start') && getStyles(selectedStartStylesWithHover, isHovered), modifiers.has('selected-end') && getStyles(selectedEndStylesWithHover, isHovered), isOutsideRange && getStyles(blockedOutOfRangeStylesWithHover, isHovered)), { 8022 role: 'button' // eslint-disable-line jsx-a11y/no-noninteractive-element-to-interactive-role 8023 , ref: this.setButtonRef, 8024 'aria-label': ariaLabel, 8025 onMouseEnter: function () { 8026 function onMouseEnter(e) { 8027 _this2.onDayMouseEnter(day, e); 8028 } 8029 8030 return onMouseEnter; 8031 }(), 8032 onMouseLeave: function () { 8033 function onMouseLeave(e) { 8034 _this2.onDayMouseLeave(day, e); 8035 } 8036 8037 return onMouseLeave; 8038 }(), 8039 onMouseUp: function () { 8040 function onMouseUp(e) { 8041 e.currentTarget.blur(); 8042 } 8043 8044 return onMouseUp; 8045 }(), 8046 onClick: function () { 8047 function onClick(e) { 8048 _this2.onDayClick(day, e); 8049 } 8050 8051 return onClick; 8052 }(), 8053 onKeyDown: function () { 8054 function onKeyDown(e) { 8055 _this2.onKeyDown(day, e); 8056 } 8057 8058 return onKeyDown; 8059 }(), 8060 tabIndex: tabIndex 8061 }), 8062 renderDayContents ? renderDayContents(day, modifiers) : day.format('D') 8063 ); 8064 } 8065 8066 return render; 8067 }() 8068 }]); 8069 8070 return CustomizableCalendarDay; 8071 }(_react2['default'].Component); 8072 8073 CustomizableCalendarDay.propTypes = propTypes; 8074 CustomizableCalendarDay.defaultProps = defaultProps; 8075 8076 exports.PureCustomizableCalendarDay = CustomizableCalendarDay; 8077 exports["default"] = (0, _reactWithStyles.withStyles)(function (_ref2) { 8078 var font = _ref2.reactDates.font; 8079 return { 8080 CalendarDay: { 8081 boxSizing: 'border-box', 8082 cursor: 'pointer', 8083 fontSize: font.size, 8084 textAlign: 'center', 8085 8086 ':active': { 8087 outline: 0 8088 } 8089 }, 8090 8091 CalendarDay__defaultCursor: { 8092 cursor: 'default' 8093 } 8094 }; 8095 })(CustomizableCalendarDay); 8096 8097 /***/ }), 8098 8099 /***/ 8665: 8100 /***/ (function(__unused_webpack_module, exports, __webpack_require__) { 8101 8102 "use strict"; 8103 8104 8105 Object.defineProperty(exports, "__esModule", ({ 8106 value: true 8107 })); 8108 exports.PureDayPicker = exports.defaultProps = undefined; 8109 8110 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; 8111 8112 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); 8113 8114 var _object = __webpack_require__(4011); 8115 8116 var _object2 = _interopRequireDefault(_object); 8117 8118 var _react = __webpack_require__(9196); 8119 8120 var _react2 = _interopRequireDefault(_react); 8121 8122 var _propTypes = __webpack_require__(2652); 8123 8124 var _propTypes2 = _interopRequireDefault(_propTypes); 8125 8126 var _reactAddonsShallowCompare = __webpack_require__(2541); 8127 8128 var _reactAddonsShallowCompare2 = _interopRequireDefault(_reactAddonsShallowCompare); 8129 8130 var _airbnbPropTypes = __webpack_require__(4882); 8131 8132 var _reactWithStyles = __webpack_require__(3576); 8133 8134 var _moment = __webpack_require__(6292); 8135 8136 var _moment2 = _interopRequireDefault(_moment); 8137 8138 var _throttle = __webpack_require__(8172); 8139 8140 var _throttle2 = _interopRequireDefault(_throttle); 8141 8142 var _isTouchDevice = __webpack_require__(5834); 8143 8144 var _isTouchDevice2 = _interopRequireDefault(_isTouchDevice); 8145 8146 var _reactOutsideClickHandler = __webpack_require__(6606); 8147 8148 var _reactOutsideClickHandler2 = _interopRequireDefault(_reactOutsideClickHandler); 8149 8150 var _defaultPhrases = __webpack_require__(6030); 8151 8152 var _getPhrasePropTypes = __webpack_require__(2893); 8153 8154 var _getPhrasePropTypes2 = _interopRequireDefault(_getPhrasePropTypes); 8155 8156 var _CalendarMonthGrid = __webpack_require__(7938); 8157 8158 var _CalendarMonthGrid2 = _interopRequireDefault(_CalendarMonthGrid); 8159 8160 var _DayPickerNavigation = __webpack_require__(3895); 8161 8162 var _DayPickerNavigation2 = _interopRequireDefault(_DayPickerNavigation); 8163 8164 var _DayPickerKeyboardShortcuts = __webpack_require__(600); 8165 8166 var _DayPickerKeyboardShortcuts2 = _interopRequireDefault(_DayPickerKeyboardShortcuts); 8167 8168 var _getNumberOfCalendarMonthWeeks = __webpack_require__(4112); 8169 8170 var _getNumberOfCalendarMonthWeeks2 = _interopRequireDefault(_getNumberOfCalendarMonthWeeks); 8171 8172 var _getCalendarMonthWidth = __webpack_require__(8964); 8173 8174 var _getCalendarMonthWidth2 = _interopRequireDefault(_getCalendarMonthWidth); 8175 8176 var _calculateDimension = __webpack_require__(8607); 8177 8178 var _calculateDimension2 = _interopRequireDefault(_calculateDimension); 8179 8180 var _getActiveElement = __webpack_require__(5814); 8181 8182 var _getActiveElement2 = _interopRequireDefault(_getActiveElement); 8183 8184 var _isDayVisible = __webpack_require__(5713); 8185 8186 var _isDayVisible2 = _interopRequireDefault(_isDayVisible); 8187 8188 var _ModifiersShape = __webpack_require__(6747); 8189 8190 var _ModifiersShape2 = _interopRequireDefault(_ModifiersShape); 8191 8192 var _ScrollableOrientationShape = __webpack_require__(6553); 8193 8194 var _ScrollableOrientationShape2 = _interopRequireDefault(_ScrollableOrientationShape); 8195 8196 var _DayOfWeekShape = __webpack_require__(243); 8197 8198 var _DayOfWeekShape2 = _interopRequireDefault(_DayOfWeekShape); 8199 8200 var _CalendarInfoPositionShape = __webpack_require__(8182); 8201 8202 var _CalendarInfoPositionShape2 = _interopRequireDefault(_CalendarInfoPositionShape); 8203 8204 var _constants = __webpack_require__(257); 8205 8206 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } 8207 8208 function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } } 8209 8210 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 8211 8212 function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } 8213 8214 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } 8215 8216 var MONTH_PADDING = 23; 8217 var PREV_TRANSITION = 'prev'; 8218 var NEXT_TRANSITION = 'next'; 8219 var MONTH_SELECTION_TRANSITION = 'month_selection'; 8220 var YEAR_SELECTION_TRANSITION = 'year_selection'; 8221 8222 var propTypes = (0, _airbnbPropTypes.forbidExtraProps)((0, _object2['default'])({}, _reactWithStyles.withStylesPropTypes, { 8223 8224 // calendar presentation props 8225 enableOutsideDays: _propTypes2['default'].bool, 8226 numberOfMonths: _propTypes2['default'].number, 8227 orientation: _ScrollableOrientationShape2['default'], 8228 withPortal: _propTypes2['default'].bool, 8229 onOutsideClick: _propTypes2['default'].func, 8230 hidden: _propTypes2['default'].bool, 8231 initialVisibleMonth: _propTypes2['default'].func, 8232 firstDayOfWeek: _DayOfWeekShape2['default'], 8233 renderCalendarInfo: _propTypes2['default'].func, 8234 calendarInfoPosition: _CalendarInfoPositionShape2['default'], 8235 hideKeyboardShortcutsPanel: _propTypes2['default'].bool, 8236 daySize: _airbnbPropTypes.nonNegativeInteger, 8237 isRTL: _propTypes2['default'].bool, 8238 verticalHeight: _airbnbPropTypes.nonNegativeInteger, 8239 noBorder: _propTypes2['default'].bool, 8240 transitionDuration: _airbnbPropTypes.nonNegativeInteger, 8241 verticalBorderSpacing: _airbnbPropTypes.nonNegativeInteger, 8242 horizontalMonthPadding: _airbnbPropTypes.nonNegativeInteger, 8243 8244 // navigation props 8245 navPrev: _propTypes2['default'].node, 8246 navNext: _propTypes2['default'].node, 8247 noNavButtons: _propTypes2['default'].bool, 8248 onPrevMonthClick: _propTypes2['default'].func, 8249 onNextMonthClick: _propTypes2['default'].func, 8250 onMonthChange: _propTypes2['default'].func, 8251 onYearChange: _propTypes2['default'].func, 8252 onMultiplyScrollableMonths: _propTypes2['default'].func, // VERTICAL_SCROLLABLE daypickers only 8253 8254 // month props 8255 renderMonthText: (0, _airbnbPropTypes.mutuallyExclusiveProps)(_propTypes2['default'].func, 'renderMonthText', 'renderMonthElement'), 8256 renderMonthElement: (0, _airbnbPropTypes.mutuallyExclusiveProps)(_propTypes2['default'].func, 'renderMonthText', 'renderMonthElement'), 8257 8258 // day props 8259 modifiers: _propTypes2['default'].objectOf(_propTypes2['default'].objectOf(_ModifiersShape2['default'])), 8260 renderCalendarDay: _propTypes2['default'].func, 8261 renderDayContents: _propTypes2['default'].func, 8262 onDayClick: _propTypes2['default'].func, 8263 onDayMouseEnter: _propTypes2['default'].func, 8264 onDayMouseLeave: _propTypes2['default'].func, 8265 8266 // accessibility props 8267 isFocused: _propTypes2['default'].bool, 8268 getFirstFocusableDay: _propTypes2['default'].func, 8269 onBlur: _propTypes2['default'].func, 8270 showKeyboardShortcuts: _propTypes2['default'].bool, 8271 8272 // internationalization 8273 monthFormat: _propTypes2['default'].string, 8274 weekDayFormat: _propTypes2['default'].string, 8275 phrases: _propTypes2['default'].shape((0, _getPhrasePropTypes2['default'])(_defaultPhrases.DayPickerPhrases)), 8276 dayAriaLabelFormat: _propTypes2['default'].string 8277 })); 8278 8279 var defaultProps = exports.defaultProps = { 8280 // calendar presentation props 8281 enableOutsideDays: false, 8282 numberOfMonths: 2, 8283 orientation: _constants.HORIZONTAL_ORIENTATION, 8284 withPortal: false, 8285 onOutsideClick: function () { 8286 function onOutsideClick() {} 8287 8288 return onOutsideClick; 8289 }(), 8290 8291 hidden: false, 8292 initialVisibleMonth: function () { 8293 function initialVisibleMonth() { 8294 return (0, _moment2['default'])(); 8295 } 8296 8297 return initialVisibleMonth; 8298 }(), 8299 firstDayOfWeek: null, 8300 renderCalendarInfo: null, 8301 calendarInfoPosition: _constants.INFO_POSITION_BOTTOM, 8302 hideKeyboardShortcutsPanel: false, 8303 daySize: _constants.DAY_SIZE, 8304 isRTL: false, 8305 verticalHeight: null, 8306 noBorder: false, 8307 transitionDuration: undefined, 8308 verticalBorderSpacing: undefined, 8309 horizontalMonthPadding: 13, 8310 8311 // navigation props 8312 navPrev: null, 8313 navNext: null, 8314 noNavButtons: false, 8315 onPrevMonthClick: function () { 8316 function onPrevMonthClick() {} 8317 8318 return onPrevMonthClick; 8319 }(), 8320 onNextMonthClick: function () { 8321 function onNextMonthClick() {} 8322 8323 return onNextMonthClick; 8324 }(), 8325 onMonthChange: function () { 8326 function onMonthChange() {} 8327 8328 return onMonthChange; 8329 }(), 8330 onYearChange: function () { 8331 function onYearChange() {} 8332 8333 return onYearChange; 8334 }(), 8335 onMultiplyScrollableMonths: function () { 8336 function onMultiplyScrollableMonths() {} 8337 8338 return onMultiplyScrollableMonths; 8339 }(), 8340 8341 8342 // month props 8343 renderMonthText: null, 8344 renderMonthElement: null, 8345 8346 // day props 8347 modifiers: {}, 8348 renderCalendarDay: undefined, 8349 renderDayContents: null, 8350 onDayClick: function () { 8351 function onDayClick() {} 8352 8353 return onDayClick; 8354 }(), 8355 onDayMouseEnter: function () { 8356 function onDayMouseEnter() {} 8357 8358 return onDayMouseEnter; 8359 }(), 8360 onDayMouseLeave: function () { 8361 function onDayMouseLeave() {} 8362 8363 return onDayMouseLeave; 8364 }(), 8365 8366 8367 // accessibility props 8368 isFocused: false, 8369 getFirstFocusableDay: null, 8370 onBlur: function () { 8371 function onBlur() {} 8372 8373 return onBlur; 8374 }(), 8375 8376 showKeyboardShortcuts: false, 8377 8378 // internationalization 8379 monthFormat: 'MMMM YYYY', 8380 weekDayFormat: 'dd', 8381 phrases: _defaultPhrases.DayPickerPhrases, 8382 dayAriaLabelFormat: undefined 8383 }; 8384 8385 var DayPicker = function (_React$Component) { 8386 _inherits(DayPicker, _React$Component); 8387 8388 function DayPicker(props) { 8389 _classCallCheck(this, DayPicker); 8390 8391 var _this = _possibleConstructorReturn(this, (DayPicker.__proto__ || Object.getPrototypeOf(DayPicker)).call(this, props)); 8392 8393 var currentMonth = props.hidden ? (0, _moment2['default'])() : props.initialVisibleMonth(); 8394 8395 var focusedDate = currentMonth.clone().startOf('month'); 8396 if (props.getFirstFocusableDay) { 8397 focusedDate = props.getFirstFocusableDay(currentMonth); 8398 } 8399 8400 var horizontalMonthPadding = props.horizontalMonthPadding; 8401 8402 8403 var translationValue = props.isRTL && _this.isHorizontal() ? -(0, _getCalendarMonthWidth2['default'])(props.daySize, horizontalMonthPadding) : 0; 8404 8405 _this.hasSetInitialVisibleMonth = !props.hidden; 8406 _this.state = { 8407 currentMonth: currentMonth, 8408 monthTransition: null, 8409 translationValue: translationValue, 8410 scrollableMonthMultiple: 1, 8411 calendarMonthWidth: (0, _getCalendarMonthWidth2['default'])(props.daySize, horizontalMonthPadding), 8412 focusedDate: !props.hidden || props.isFocused ? focusedDate : null, 8413 nextFocusedDate: null, 8414 showKeyboardShortcuts: props.showKeyboardShortcuts, 8415 onKeyboardShortcutsPanelClose: function () { 8416 function onKeyboardShortcutsPanelClose() {} 8417 8418 return onKeyboardShortcutsPanelClose; 8419 }(), 8420 8421 isTouchDevice: (0, _isTouchDevice2['default'])(), 8422 withMouseInteractions: true, 8423 calendarInfoWidth: 0, 8424 monthTitleHeight: null, 8425 hasSetHeight: false 8426 }; 8427 8428 _this.setCalendarMonthWeeks(currentMonth); 8429 8430 _this.calendarMonthGridHeight = 0; 8431 _this.setCalendarInfoWidthTimeout = null; 8432 8433 _this.onKeyDown = _this.onKeyDown.bind(_this); 8434 _this.throttledKeyDown = (0, _throttle2['default'])(_this.onFinalKeyDown, 200, { trailing: false }); 8435 _this.onPrevMonthClick = _this.onPrevMonthClick.bind(_this); 8436 _this.onNextMonthClick = _this.onNextMonthClick.bind(_this); 8437 _this.onMonthChange = _this.onMonthChange.bind(_this); 8438 _this.onYearChange = _this.onYearChange.bind(_this); 8439 8440 _this.multiplyScrollableMonths = _this.multiplyScrollableMonths.bind(_this); 8441 _this.updateStateAfterMonthTransition = _this.updateStateAfterMonthTransition.bind(_this); 8442 8443 _this.openKeyboardShortcutsPanel = _this.openKeyboardShortcutsPanel.bind(_this); 8444 _this.closeKeyboardShortcutsPanel = _this.closeKeyboardShortcutsPanel.bind(_this); 8445 8446 _this.setCalendarInfoRef = _this.setCalendarInfoRef.bind(_this); 8447 _this.setContainerRef = _this.setContainerRef.bind(_this); 8448 _this.setTransitionContainerRef = _this.setTransitionContainerRef.bind(_this); 8449 _this.setMonthTitleHeight = _this.setMonthTitleHeight.bind(_this); 8450 return _this; 8451 } 8452 8453 _createClass(DayPicker, [{ 8454 key: 'componentDidMount', 8455 value: function () { 8456 function componentDidMount() { 8457 var currentMonth = this.state.currentMonth; 8458 8459 if (this.calendarInfo) { 8460 this.setState({ 8461 isTouchDevice: (0, _isTouchDevice2['default'])(), 8462 calendarInfoWidth: (0, _calculateDimension2['default'])(this.calendarInfo, 'width', true, true) 8463 }); 8464 } else { 8465 this.setState({ isTouchDevice: (0, _isTouchDevice2['default'])() }); 8466 } 8467 8468 this.setCalendarMonthWeeks(currentMonth); 8469 } 8470 8471 return componentDidMount; 8472 }() 8473 }, { 8474 key: 'componentWillReceiveProps', 8475 value: function () { 8476 function componentWillReceiveProps(nextProps) { 8477 var hidden = nextProps.hidden, 8478 isFocused = nextProps.isFocused, 8479 showKeyboardShortcuts = nextProps.showKeyboardShortcuts, 8480 onBlur = nextProps.onBlur, 8481 renderMonthText = nextProps.renderMonthText, 8482 horizontalMonthPadding = nextProps.horizontalMonthPadding; 8483 var currentMonth = this.state.currentMonth; 8484 8485 8486 if (!hidden) { 8487 if (!this.hasSetInitialVisibleMonth) { 8488 this.hasSetInitialVisibleMonth = true; 8489 this.setState({ 8490 currentMonth: nextProps.initialVisibleMonth() 8491 }); 8492 } 8493 } 8494 8495 var _props = this.props, 8496 daySize = _props.daySize, 8497 prevIsFocused = _props.isFocused, 8498 prevRenderMonthText = _props.renderMonthText; 8499 8500 8501 if (nextProps.daySize !== daySize) { 8502 this.setState({ 8503 calendarMonthWidth: (0, _getCalendarMonthWidth2['default'])(nextProps.daySize, horizontalMonthPadding) 8504 }); 8505 } 8506 8507 if (isFocused !== prevIsFocused) { 8508 if (isFocused) { 8509 var focusedDate = this.getFocusedDay(currentMonth); 8510 8511 var onKeyboardShortcutsPanelClose = this.state.onKeyboardShortcutsPanelClose; 8512 8513 if (nextProps.showKeyboardShortcuts) { 8514 // the ? shortcut came from the input and we should return input there once it is close 8515 onKeyboardShortcutsPanelClose = onBlur; 8516 } 8517 8518 this.setState({ 8519 showKeyboardShortcuts: showKeyboardShortcuts, 8520 onKeyboardShortcutsPanelClose: onKeyboardShortcutsPanelClose, 8521 focusedDate: focusedDate, 8522 withMouseInteractions: false 8523 }); 8524 } else { 8525 this.setState({ focusedDate: null }); 8526 } 8527 } 8528 8529 if (renderMonthText !== prevRenderMonthText) { 8530 this.setState({ 8531 monthTitleHeight: null 8532 }); 8533 } 8534 } 8535 8536 return componentWillReceiveProps; 8537 }() 8538 }, { 8539 key: 'shouldComponentUpdate', 8540 value: function () { 8541 function shouldComponentUpdate(nextProps, nextState) { 8542 return (0, _reactAddonsShallowCompare2['default'])(this, nextProps, nextState); 8543 } 8544 8545 return shouldComponentUpdate; 8546 }() 8547 }, { 8548 key: 'componentWillUpdate', 8549 value: function () { 8550 function componentWillUpdate() { 8551 var _this2 = this; 8552 8553 var transitionDuration = this.props.transitionDuration; 8554 8555 // Calculating the dimensions trigger a DOM repaint which 8556 // breaks the CSS transition. 8557 // The setTimeout will wait until the transition ends. 8558 8559 if (this.calendarInfo) { 8560 this.setCalendarInfoWidthTimeout = setTimeout(function () { 8561 var calendarInfoWidth = _this2.state.calendarInfoWidth; 8562 8563 var calendarInfoPanelWidth = (0, _calculateDimension2['default'])(_this2.calendarInfo, 'width', true, true); 8564 if (calendarInfoWidth !== calendarInfoPanelWidth) { 8565 _this2.setState({ 8566 calendarInfoWidth: calendarInfoPanelWidth 8567 }); 8568 } 8569 }, transitionDuration); 8570 } 8571 } 8572 8573 return componentWillUpdate; 8574 }() 8575 }, { 8576 key: 'componentDidUpdate', 8577 value: function () { 8578 function componentDidUpdate(prevProps) { 8579 var _props2 = this.props, 8580 orientation = _props2.orientation, 8581 daySize = _props2.daySize, 8582 isFocused = _props2.isFocused, 8583 numberOfMonths = _props2.numberOfMonths; 8584 var _state = this.state, 8585 focusedDate = _state.focusedDate, 8586 monthTitleHeight = _state.monthTitleHeight; 8587 8588 8589 if (this.isHorizontal() && (orientation !== prevProps.orientation || daySize !== prevProps.daySize)) { 8590 var visibleCalendarWeeks = this.calendarMonthWeeks.slice(1, numberOfMonths + 1); 8591 var calendarMonthWeeksHeight = Math.max.apply(Math, [0].concat(_toConsumableArray(visibleCalendarWeeks))) * (daySize - 1); 8592 var newMonthHeight = monthTitleHeight + calendarMonthWeeksHeight + 1; 8593 this.adjustDayPickerHeight(newMonthHeight); 8594 } 8595 8596 if (!prevProps.isFocused && isFocused && !focusedDate) { 8597 this.container.focus(); 8598 } 8599 } 8600 8601 return componentDidUpdate; 8602 }() 8603 }, { 8604 key: 'componentWillUnmount', 8605 value: function () { 8606 function componentWillUnmount() { 8607 clearTimeout(this.setCalendarInfoWidthTimeout); 8608 } 8609 8610 return componentWillUnmount; 8611 }() 8612 }, { 8613 key: 'onKeyDown', 8614 value: function () { 8615 function onKeyDown(e) { 8616 e.stopPropagation(); 8617 if (!_constants.MODIFIER_KEY_NAMES.has(e.key)) { 8618 this.throttledKeyDown(e); 8619 } 8620 } 8621 8622 return onKeyDown; 8623 }() 8624 }, { 8625 key: 'onFinalKeyDown', 8626 value: function () { 8627 function onFinalKeyDown(e) { 8628 this.setState({ withMouseInteractions: false }); 8629 8630 var _props3 = this.props, 8631 onBlur = _props3.onBlur, 8632 isRTL = _props3.isRTL; 8633 var _state2 = this.state, 8634 focusedDate = _state2.focusedDate, 8635 showKeyboardShortcuts = _state2.showKeyboardShortcuts; 8636 8637 if (!focusedDate) return; 8638 8639 var newFocusedDate = focusedDate.clone(); 8640 8641 var didTransitionMonth = false; 8642 8643 // focus might be anywhere when the keyboard shortcuts panel is opened so we want to 8644 // return it to wherever it was before when the panel was opened 8645 var activeElement = (0, _getActiveElement2['default'])(); 8646 var onKeyboardShortcutsPanelClose = function () { 8647 function onKeyboardShortcutsPanelClose() { 8648 if (activeElement) activeElement.focus(); 8649 } 8650 8651 return onKeyboardShortcutsPanelClose; 8652 }(); 8653 8654 switch (e.key) { 8655 case 'ArrowUp': 8656 e.preventDefault(); 8657 newFocusedDate.subtract(1, 'week'); 8658 didTransitionMonth = this.maybeTransitionPrevMonth(newFocusedDate); 8659 break; 8660 case 'ArrowLeft': 8661 e.preventDefault(); 8662 if (isRTL) { 8663 newFocusedDate.add(1, 'day'); 8664 } else { 8665 newFocusedDate.subtract(1, 'day'); 8666 } 8667 didTransitionMonth = this.maybeTransitionPrevMonth(newFocusedDate); 8668 break; 8669 case 'Home': 8670 e.preventDefault(); 8671 newFocusedDate.startOf('week'); 8672 didTransitionMonth = this.maybeTransitionPrevMonth(newFocusedDate); 8673 break; 8674 case 'PageUp': 8675 e.preventDefault(); 8676 newFocusedDate.subtract(1, 'month'); 8677 didTransitionMonth = this.maybeTransitionPrevMonth(newFocusedDate); 8678 break; 8679 8680 case 'ArrowDown': 8681 e.preventDefault(); 8682 newFocusedDate.add(1, 'week'); 8683 didTransitionMonth = this.maybeTransitionNextMonth(newFocusedDate); 8684 break; 8685 case 'ArrowRight': 8686 e.preventDefault(); 8687 if (isRTL) { 8688 newFocusedDate.subtract(1, 'day'); 8689 } else { 8690 newFocusedDate.add(1, 'day'); 8691 } 8692 didTransitionMonth = this.maybeTransitionNextMonth(newFocusedDate); 8693 break; 8694 case 'End': 8695 e.preventDefault(); 8696 newFocusedDate.endOf('week'); 8697 didTransitionMonth = this.maybeTransitionNextMonth(newFocusedDate); 8698 break; 8699 case 'PageDown': 8700 e.preventDefault(); 8701 newFocusedDate.add(1, 'month'); 8702 didTransitionMonth = this.maybeTransitionNextMonth(newFocusedDate); 8703 break; 8704 8705 case '?': 8706 this.openKeyboardShortcutsPanel(onKeyboardShortcutsPanelClose); 8707 break; 8708 8709 case 'Escape': 8710 if (showKeyboardShortcuts) { 8711 this.closeKeyboardShortcutsPanel(); 8712 } else { 8713 onBlur(); 8714 } 8715 break; 8716 8717 default: 8718 break; 8719 } 8720 8721 // If there was a month transition, do not update the focused date until the transition has 8722 // completed. Otherwise, attempting to focus on a DOM node may interrupt the CSS animation. If 8723 // didTransitionMonth is true, the focusedDate gets updated in #updateStateAfterMonthTransition 8724 if (!didTransitionMonth) { 8725 this.setState({ 8726 focusedDate: newFocusedDate 8727 }); 8728 } 8729 } 8730 8731 return onFinalKeyDown; 8732 }() 8733 }, { 8734 key: 'onPrevMonthClick', 8735 value: function () { 8736 function onPrevMonthClick(nextFocusedDate, e) { 8737 var _props4 = this.props, 8738 daySize = _props4.daySize, 8739 isRTL = _props4.isRTL, 8740 numberOfMonths = _props4.numberOfMonths; 8741 var _state3 = this.state, 8742 calendarMonthWidth = _state3.calendarMonthWidth, 8743 monthTitleHeight = _state3.monthTitleHeight; 8744 8745 8746 if (e) e.preventDefault(); 8747 8748 var translationValue = void 0; 8749 if (this.isVertical()) { 8750 var calendarMonthWeeksHeight = this.calendarMonthWeeks[0] * (daySize - 1); 8751 translationValue = monthTitleHeight + calendarMonthWeeksHeight + 1; 8752 } else if (this.isHorizontal()) { 8753 translationValue = calendarMonthWidth; 8754 if (isRTL) { 8755 translationValue = -2 * calendarMonthWidth; 8756 } 8757 8758 var visibleCalendarWeeks = this.calendarMonthWeeks.slice(0, numberOfMonths); 8759 var _calendarMonthWeeksHeight = Math.max.apply(Math, [0].concat(_toConsumableArray(visibleCalendarWeeks))) * (daySize - 1); 8760 var newMonthHeight = monthTitleHeight + _calendarMonthWeeksHeight + 1; 8761 this.adjustDayPickerHeight(newMonthHeight); 8762 } 8763 8764 this.setState({ 8765 monthTransition: PREV_TRANSITION, 8766 translationValue: translationValue, 8767 focusedDate: null, 8768 nextFocusedDate: nextFocusedDate 8769 }); 8770 } 8771 8772 return onPrevMonthClick; 8773 }() 8774 }, { 8775 key: 'onMonthChange', 8776 value: function () { 8777 function onMonthChange(currentMonth) { 8778 this.setCalendarMonthWeeks(currentMonth); 8779 this.calculateAndSetDayPickerHeight(); 8780 8781 // Translation value is a hack to force an invisible transition that 8782 // properly rerenders the CalendarMonthGrid 8783 this.setState({ 8784 monthTransition: MONTH_SELECTION_TRANSITION, 8785 translationValue: 0.00001, 8786 focusedDate: null, 8787 nextFocusedDate: currentMonth, 8788 currentMonth: currentMonth 8789 }); 8790 } 8791 8792 return onMonthChange; 8793 }() 8794 }, { 8795 key: 'onYearChange', 8796 value: function () { 8797 function onYearChange(currentMonth) { 8798 this.setCalendarMonthWeeks(currentMonth); 8799 this.calculateAndSetDayPickerHeight(); 8800 8801 // Translation value is a hack to force an invisible transition that 8802 // properly rerenders the CalendarMonthGrid 8803 this.setState({ 8804 monthTransition: YEAR_SELECTION_TRANSITION, 8805 translationValue: 0.0001, 8806 focusedDate: null, 8807 nextFocusedDate: currentMonth, 8808 currentMonth: currentMonth 8809 }); 8810 } 8811 8812 return onYearChange; 8813 }() 8814 }, { 8815 key: 'onNextMonthClick', 8816 value: function () { 8817 function onNextMonthClick(nextFocusedDate, e) { 8818 var _props5 = this.props, 8819 isRTL = _props5.isRTL, 8820 numberOfMonths = _props5.numberOfMonths, 8821 daySize = _props5.daySize; 8822 var _state4 = this.state, 8823 calendarMonthWidth = _state4.calendarMonthWidth, 8824 monthTitleHeight = _state4.monthTitleHeight; 8825 8826 8827 if (e) e.preventDefault(); 8828 8829 var translationValue = void 0; 8830 8831 if (this.isVertical()) { 8832 var firstVisibleMonthWeeks = this.calendarMonthWeeks[1]; 8833 var calendarMonthWeeksHeight = firstVisibleMonthWeeks * (daySize - 1); 8834 translationValue = -(monthTitleHeight + calendarMonthWeeksHeight + 1); 8835 } 8836 8837 if (this.isHorizontal()) { 8838 translationValue = -calendarMonthWidth; 8839 if (isRTL) { 8840 translationValue = 0; 8841 } 8842 8843 var visibleCalendarWeeks = this.calendarMonthWeeks.slice(2, numberOfMonths + 2); 8844 var _calendarMonthWeeksHeight2 = Math.max.apply(Math, [0].concat(_toConsumableArray(visibleCalendarWeeks))) * (daySize - 1); 8845 var newMonthHeight = monthTitleHeight + _calendarMonthWeeksHeight2 + 1; 8846 this.adjustDayPickerHeight(newMonthHeight); 8847 } 8848 8849 this.setState({ 8850 monthTransition: NEXT_TRANSITION, 8851 translationValue: translationValue, 8852 focusedDate: null, 8853 nextFocusedDate: nextFocusedDate 8854 }); 8855 } 8856 8857 return onNextMonthClick; 8858 }() 8859 }, { 8860 key: 'getFirstDayOfWeek', 8861 value: function () { 8862 function getFirstDayOfWeek() { 8863 var firstDayOfWeek = this.props.firstDayOfWeek; 8864 8865 if (firstDayOfWeek == null) { 8866 return _moment2['default'].localeData().firstDayOfWeek(); 8867 } 8868 8869 return firstDayOfWeek; 8870 } 8871 8872 return getFirstDayOfWeek; 8873 }() 8874 }, { 8875 key: 'getFirstVisibleIndex', 8876 value: function () { 8877 function getFirstVisibleIndex() { 8878 var orientation = this.props.orientation; 8879 var monthTransition = this.state.monthTransition; 8880 8881 8882 if (orientation === _constants.VERTICAL_SCROLLABLE) return 0; 8883 8884 var firstVisibleMonthIndex = 1; 8885 if (monthTransition === PREV_TRANSITION) { 8886 firstVisibleMonthIndex -= 1; 8887 } else if (monthTransition === NEXT_TRANSITION) { 8888 firstVisibleMonthIndex += 1; 8889 } 8890 8891 return firstVisibleMonthIndex; 8892 } 8893 8894 return getFirstVisibleIndex; 8895 }() 8896 }, { 8897 key: 'getFocusedDay', 8898 value: function () { 8899 function getFocusedDay(newMonth) { 8900 var _props6 = this.props, 8901 getFirstFocusableDay = _props6.getFirstFocusableDay, 8902 numberOfMonths = _props6.numberOfMonths; 8903 8904 8905 var focusedDate = void 0; 8906 if (getFirstFocusableDay) { 8907 focusedDate = getFirstFocusableDay(newMonth); 8908 } 8909 8910 if (newMonth && (!focusedDate || !(0, _isDayVisible2['default'])(focusedDate, newMonth, numberOfMonths))) { 8911 focusedDate = newMonth.clone().startOf('month'); 8912 } 8913 8914 return focusedDate; 8915 } 8916 8917 return getFocusedDay; 8918 }() 8919 }, { 8920 key: 'setMonthTitleHeight', 8921 value: function () { 8922 function setMonthTitleHeight(monthTitleHeight) { 8923 var _this3 = this; 8924 8925 this.setState({ 8926 monthTitleHeight: monthTitleHeight 8927 }, function () { 8928 _this3.calculateAndSetDayPickerHeight(); 8929 }); 8930 } 8931 8932 return setMonthTitleHeight; 8933 }() 8934 }, { 8935 key: 'setCalendarMonthWeeks', 8936 value: function () { 8937 function setCalendarMonthWeeks(currentMonth) { 8938 var numberOfMonths = this.props.numberOfMonths; 8939 8940 8941 this.calendarMonthWeeks = []; 8942 var month = currentMonth.clone().subtract(1, 'months'); 8943 var firstDayOfWeek = this.getFirstDayOfWeek(); 8944 for (var i = 0; i < numberOfMonths + 2; i += 1) { 8945 var numberOfWeeks = (0, _getNumberOfCalendarMonthWeeks2['default'])(month, firstDayOfWeek); 8946 this.calendarMonthWeeks.push(numberOfWeeks); 8947 month = month.add(1, 'months'); 8948 } 8949 } 8950 8951 return setCalendarMonthWeeks; 8952 }() 8953 }, { 8954 key: 'setContainerRef', 8955 value: function () { 8956 function setContainerRef(ref) { 8957 this.container = ref; 8958 } 8959 8960 return setContainerRef; 8961 }() 8962 }, { 8963 key: 'setCalendarInfoRef', 8964 value: function () { 8965 function setCalendarInfoRef(ref) { 8966 this.calendarInfo = ref; 8967 } 8968 8969 return setCalendarInfoRef; 8970 }() 8971 }, { 8972 key: 'setTransitionContainerRef', 8973 value: function () { 8974 function setTransitionContainerRef(ref) { 8975 this.transitionContainer = ref; 8976 } 8977 8978 return setTransitionContainerRef; 8979 }() 8980 }, { 8981 key: 'maybeTransitionNextMonth', 8982 value: function () { 8983 function maybeTransitionNextMonth(newFocusedDate) { 8984 var numberOfMonths = this.props.numberOfMonths; 8985 var _state5 = this.state, 8986 currentMonth = _state5.currentMonth, 8987 focusedDate = _state5.focusedDate; 8988 8989 8990 var newFocusedDateMonth = newFocusedDate.month(); 8991 var focusedDateMonth = focusedDate.month(); 8992 var isNewFocusedDateVisible = (0, _isDayVisible2['default'])(newFocusedDate, currentMonth, numberOfMonths); 8993 if (newFocusedDateMonth !== focusedDateMonth && !isNewFocusedDateVisible) { 8994 this.onNextMonthClick(newFocusedDate); 8995 return true; 8996 } 8997 8998 return false; 8999 } 9000 9001 return maybeTransitionNextMonth; 9002 }() 9003 }, { 9004 key: 'maybeTransitionPrevMonth', 9005 value: function () { 9006 function maybeTransitionPrevMonth(newFocusedDate) { 9007 var numberOfMonths = this.props.numberOfMonths; 9008 var _state6 = this.state, 9009 currentMonth = _state6.currentMonth, 9010 focusedDate = _state6.focusedDate; 9011 9012 9013 var newFocusedDateMonth = newFocusedDate.month(); 9014 var focusedDateMonth = focusedDate.month(); 9015 var isNewFocusedDateVisible = (0, _isDayVisible2['default'])(newFocusedDate, currentMonth, numberOfMonths); 9016 if (newFocusedDateMonth !== focusedDateMonth && !isNewFocusedDateVisible) { 9017 this.onPrevMonthClick(newFocusedDate); 9018 return true; 9019 } 9020 9021 return false; 9022 } 9023 9024 return maybeTransitionPrevMonth; 9025 }() 9026 }, { 9027 key: 'multiplyScrollableMonths', 9028 value: function () { 9029 function multiplyScrollableMonths(e) { 9030 var onMultiplyScrollableMonths = this.props.onMultiplyScrollableMonths; 9031 9032 if (e) e.preventDefault(); 9033 9034 if (onMultiplyScrollableMonths) onMultiplyScrollableMonths(e); 9035 9036 this.setState(function (_ref) { 9037 var scrollableMonthMultiple = _ref.scrollableMonthMultiple; 9038 return { 9039 scrollableMonthMultiple: scrollableMonthMultiple + 1 9040 }; 9041 }); 9042 } 9043 9044 return multiplyScrollableMonths; 9045 }() 9046 }, { 9047 key: 'isHorizontal', 9048 value: function () { 9049 function isHorizontal() { 9050 var orientation = this.props.orientation; 9051 9052 return orientation === _constants.HORIZONTAL_ORIENTATION; 9053 } 9054 9055 return isHorizontal; 9056 }() 9057 }, { 9058 key: 'isVertical', 9059 value: function () { 9060 function isVertical() { 9061 var orientation = this.props.orientation; 9062 9063 return orientation === _constants.VERTICAL_ORIENTATION || orientation === _constants.VERTICAL_SCROLLABLE; 9064 } 9065 9066 return isVertical; 9067 }() 9068 }, { 9069 key: 'updateStateAfterMonthTransition', 9070 value: function () { 9071 function updateStateAfterMonthTransition() { 9072 var _this4 = this; 9073 9074 var _props7 = this.props, 9075 onPrevMonthClick = _props7.onPrevMonthClick, 9076 onNextMonthClick = _props7.onNextMonthClick, 9077 numberOfMonths = _props7.numberOfMonths, 9078 onMonthChange = _props7.onMonthChange, 9079 onYearChange = _props7.onYearChange, 9080 isRTL = _props7.isRTL; 9081 var _state7 = this.state, 9082 currentMonth = _state7.currentMonth, 9083 monthTransition = _state7.monthTransition, 9084 focusedDate = _state7.focusedDate, 9085 nextFocusedDate = _state7.nextFocusedDate, 9086 withMouseInteractions = _state7.withMouseInteractions, 9087 calendarMonthWidth = _state7.calendarMonthWidth; 9088 9089 9090 if (!monthTransition) return; 9091 9092 var newMonth = currentMonth.clone(); 9093 var firstDayOfWeek = this.getFirstDayOfWeek(); 9094 if (monthTransition === PREV_TRANSITION) { 9095 newMonth.subtract(1, 'month'); 9096 if (onPrevMonthClick) onPrevMonthClick(newMonth); 9097 var newInvisibleMonth = newMonth.clone().subtract(1, 'month'); 9098 var numberOfWeeks = (0, _getNumberOfCalendarMonthWeeks2['default'])(newInvisibleMonth, firstDayOfWeek); 9099 this.calendarMonthWeeks = [numberOfWeeks].concat(_toConsumableArray(this.calendarMonthWeeks.slice(0, -1))); 9100 } else if (monthTransition === NEXT_TRANSITION) { 9101 newMonth.add(1, 'month'); 9102 if (onNextMonthClick) onNextMonthClick(newMonth); 9103 var _newInvisibleMonth = newMonth.clone().add(numberOfMonths, 'month'); 9104 var _numberOfWeeks = (0, _getNumberOfCalendarMonthWeeks2['default'])(_newInvisibleMonth, firstDayOfWeek); 9105 this.calendarMonthWeeks = [].concat(_toConsumableArray(this.calendarMonthWeeks.slice(1)), [_numberOfWeeks]); 9106 } else if (monthTransition === MONTH_SELECTION_TRANSITION) { 9107 if (onMonthChange) onMonthChange(newMonth); 9108 } else if (monthTransition === YEAR_SELECTION_TRANSITION) { 9109 if (onYearChange) onYearChange(newMonth); 9110 } 9111 9112 var newFocusedDate = null; 9113 if (nextFocusedDate) { 9114 newFocusedDate = nextFocusedDate; 9115 } else if (!focusedDate && !withMouseInteractions) { 9116 newFocusedDate = this.getFocusedDay(newMonth); 9117 } 9118 9119 this.setState({ 9120 currentMonth: newMonth, 9121 monthTransition: null, 9122 translationValue: isRTL && this.isHorizontal() ? -calendarMonthWidth : 0, 9123 nextFocusedDate: null, 9124 focusedDate: newFocusedDate 9125 }, function () { 9126 // we don't want to focus on the relevant calendar day after a month transition 9127 // if the user is navigating around using a mouse 9128 if (withMouseInteractions) { 9129 var activeElement = (0, _getActiveElement2['default'])(); 9130 if (activeElement && activeElement !== document.body && _this4.container.contains(activeElement)) { 9131 activeElement.blur(); 9132 } 9133 } 9134 }); 9135 } 9136 9137 return updateStateAfterMonthTransition; 9138 }() 9139 }, { 9140 key: 'adjustDayPickerHeight', 9141 value: function () { 9142 function adjustDayPickerHeight(newMonthHeight) { 9143 var _this5 = this; 9144 9145 var monthHeight = newMonthHeight + MONTH_PADDING; 9146 if (monthHeight !== this.calendarMonthGridHeight) { 9147 this.transitionContainer.style.height = String(monthHeight) + 'px'; 9148 if (!this.calendarMonthGridHeight) { 9149 setTimeout(function () { 9150 _this5.setState({ hasSetHeight: true }); 9151 }, 0); 9152 } 9153 this.calendarMonthGridHeight = monthHeight; 9154 } 9155 } 9156 9157 return adjustDayPickerHeight; 9158 }() 9159 }, { 9160 key: 'calculateAndSetDayPickerHeight', 9161 value: function () { 9162 function calculateAndSetDayPickerHeight() { 9163 var _props8 = this.props, 9164 daySize = _props8.daySize, 9165 numberOfMonths = _props8.numberOfMonths; 9166 var monthTitleHeight = this.state.monthTitleHeight; 9167 9168 9169 var visibleCalendarWeeks = this.calendarMonthWeeks.slice(1, numberOfMonths + 1); 9170 var calendarMonthWeeksHeight = Math.max.apply(Math, [0].concat(_toConsumableArray(visibleCalendarWeeks))) * (daySize - 1); 9171 var newMonthHeight = monthTitleHeight + calendarMonthWeeksHeight + 1; 9172 9173 if (this.isHorizontal()) { 9174 this.adjustDayPickerHeight(newMonthHeight); 9175 } 9176 } 9177 9178 return calculateAndSetDayPickerHeight; 9179 }() 9180 }, { 9181 key: 'openKeyboardShortcutsPanel', 9182 value: function () { 9183 function openKeyboardShortcutsPanel(onCloseCallBack) { 9184 this.setState({ 9185 showKeyboardShortcuts: true, 9186 onKeyboardShortcutsPanelClose: onCloseCallBack 9187 }); 9188 } 9189 9190 return openKeyboardShortcutsPanel; 9191 }() 9192 }, { 9193 key: 'closeKeyboardShortcutsPanel', 9194 value: function () { 9195 function closeKeyboardShortcutsPanel() { 9196 var onKeyboardShortcutsPanelClose = this.state.onKeyboardShortcutsPanelClose; 9197 9198 9199 if (onKeyboardShortcutsPanelClose) { 9200 onKeyboardShortcutsPanelClose(); 9201 } 9202 9203 this.setState({ 9204 onKeyboardShortcutsPanelClose: null, 9205 showKeyboardShortcuts: false 9206 }); 9207 } 9208 9209 return closeKeyboardShortcutsPanel; 9210 }() 9211 }, { 9212 key: 'renderNavigation', 9213 value: function () { 9214 function renderNavigation() { 9215 var _this6 = this; 9216 9217 var _props9 = this.props, 9218 navPrev = _props9.navPrev, 9219 navNext = _props9.navNext, 9220 noNavButtons = _props9.noNavButtons, 9221 orientation = _props9.orientation, 9222 phrases = _props9.phrases, 9223 isRTL = _props9.isRTL; 9224 9225 9226 if (noNavButtons) { 9227 return null; 9228 } 9229 9230 var onNextMonthClick = void 0; 9231 if (orientation === _constants.VERTICAL_SCROLLABLE) { 9232 onNextMonthClick = this.multiplyScrollableMonths; 9233 } else { 9234 onNextMonthClick = function () { 9235 function onNextMonthClick(e) { 9236 _this6.onNextMonthClick(null, e); 9237 } 9238 9239 return onNextMonthClick; 9240 }(); 9241 } 9242 9243 return _react2['default'].createElement(_DayPickerNavigation2['default'], { 9244 onPrevMonthClick: function () { 9245 function onPrevMonthClick(e) { 9246 _this6.onPrevMonthClick(null, e); 9247 } 9248 9249 return onPrevMonthClick; 9250 }(), 9251 onNextMonthClick: onNextMonthClick, 9252 navPrev: navPrev, 9253 navNext: navNext, 9254 orientation: orientation, 9255 phrases: phrases, 9256 isRTL: isRTL 9257 }); 9258 } 9259 9260 return renderNavigation; 9261 }() 9262 }, { 9263 key: 'renderWeekHeader', 9264 value: function () { 9265 function renderWeekHeader(index) { 9266 var _props10 = this.props, 9267 daySize = _props10.daySize, 9268 horizontalMonthPadding = _props10.horizontalMonthPadding, 9269 orientation = _props10.orientation, 9270 weekDayFormat = _props10.weekDayFormat, 9271 styles = _props10.styles; 9272 var calendarMonthWidth = this.state.calendarMonthWidth; 9273 9274 var verticalScrollable = orientation === _constants.VERTICAL_SCROLLABLE; 9275 var horizontalStyle = { 9276 left: index * calendarMonthWidth 9277 }; 9278 var verticalStyle = { 9279 marginLeft: -calendarMonthWidth / 2 9280 }; 9281 9282 var weekHeaderStyle = {}; // no styles applied to the vertical-scrollable orientation 9283 if (this.isHorizontal()) { 9284 weekHeaderStyle = horizontalStyle; 9285 } else if (this.isVertical() && !verticalScrollable) { 9286 weekHeaderStyle = verticalStyle; 9287 } 9288 9289 var firstDayOfWeek = this.getFirstDayOfWeek(); 9290 9291 var header = []; 9292 for (var i = 0; i < 7; i += 1) { 9293 header.push(_react2['default'].createElement( 9294 'li', 9295 _extends({ key: i }, (0, _reactWithStyles.css)(styles.DayPicker_weekHeader_li, { width: daySize })), 9296 _react2['default'].createElement( 9297 'small', 9298 null, 9299 (0, _moment2['default'])().day((i + firstDayOfWeek) % 7).format(weekDayFormat) 9300 ) 9301 )); 9302 } 9303 9304 return _react2['default'].createElement( 9305 'div', 9306 _extends({}, (0, _reactWithStyles.css)(styles.DayPicker_weekHeader, this.isVertical() && styles.DayPicker_weekHeader__vertical, verticalScrollable && styles.DayPicker_weekHeader__verticalScrollable, weekHeaderStyle, { padding: '0 ' + String(horizontalMonthPadding) + 'px' }), { 9307 key: 'week-' + String(index) 9308 }), 9309 _react2['default'].createElement( 9310 'ul', 9311 (0, _reactWithStyles.css)(styles.DayPicker_weekHeader_ul), 9312 header 9313 ) 9314 ); 9315 } 9316 9317 return renderWeekHeader; 9318 }() 9319 }, { 9320 key: 'render', 9321 value: function () { 9322 function render() { 9323 var _this7 = this; 9324 9325 var _state8 = this.state, 9326 calendarMonthWidth = _state8.calendarMonthWidth, 9327 currentMonth = _state8.currentMonth, 9328 monthTransition = _state8.monthTransition, 9329 translationValue = _state8.translationValue, 9330 scrollableMonthMultiple = _state8.scrollableMonthMultiple, 9331 focusedDate = _state8.focusedDate, 9332 showKeyboardShortcuts = _state8.showKeyboardShortcuts, 9333 isTouch = _state8.isTouchDevice, 9334 hasSetHeight = _state8.hasSetHeight, 9335 calendarInfoWidth = _state8.calendarInfoWidth, 9336 monthTitleHeight = _state8.monthTitleHeight; 9337 var _props11 = this.props, 9338 enableOutsideDays = _props11.enableOutsideDays, 9339 numberOfMonths = _props11.numberOfMonths, 9340 orientation = _props11.orientation, 9341 modifiers = _props11.modifiers, 9342 withPortal = _props11.withPortal, 9343 onDayClick = _props11.onDayClick, 9344 onDayMouseEnter = _props11.onDayMouseEnter, 9345 onDayMouseLeave = _props11.onDayMouseLeave, 9346 firstDayOfWeek = _props11.firstDayOfWeek, 9347 renderMonthText = _props11.renderMonthText, 9348 renderCalendarDay = _props11.renderCalendarDay, 9349 renderDayContents = _props11.renderDayContents, 9350 renderCalendarInfo = _props11.renderCalendarInfo, 9351 renderMonthElement = _props11.renderMonthElement, 9352 calendarInfoPosition = _props11.calendarInfoPosition, 9353 hideKeyboardShortcutsPanel = _props11.hideKeyboardShortcutsPanel, 9354 onOutsideClick = _props11.onOutsideClick, 9355 monthFormat = _props11.monthFormat, 9356 daySize = _props11.daySize, 9357 isFocused = _props11.isFocused, 9358 isRTL = _props11.isRTL, 9359 styles = _props11.styles, 9360 theme = _props11.theme, 9361 phrases = _props11.phrases, 9362 verticalHeight = _props11.verticalHeight, 9363 dayAriaLabelFormat = _props11.dayAriaLabelFormat, 9364 noBorder = _props11.noBorder, 9365 transitionDuration = _props11.transitionDuration, 9366 verticalBorderSpacing = _props11.verticalBorderSpacing, 9367 horizontalMonthPadding = _props11.horizontalMonthPadding; 9368 var dayPickerHorizontalPadding = theme.reactDates.spacing.dayPickerHorizontalPadding; 9369 9370 9371 var isHorizontal = this.isHorizontal(); 9372 9373 var numOfWeekHeaders = this.isVertical() ? 1 : numberOfMonths; 9374 var weekHeaders = []; 9375 for (var i = 0; i < numOfWeekHeaders; i += 1) { 9376 weekHeaders.push(this.renderWeekHeader(i)); 9377 } 9378 9379 var verticalScrollable = orientation === _constants.VERTICAL_SCROLLABLE; 9380 var height = void 0; 9381 if (isHorizontal) { 9382 height = this.calendarMonthGridHeight; 9383 } else if (this.isVertical() && !verticalScrollable && !withPortal) { 9384 // If the user doesn't set a desired height, 9385 // we default back to this kind of made-up value that generally looks good 9386 height = verticalHeight || 1.75 * calendarMonthWidth; 9387 } 9388 9389 var isCalendarMonthGridAnimating = monthTransition !== null; 9390 9391 var shouldFocusDate = !isCalendarMonthGridAnimating && isFocused; 9392 9393 var keyboardShortcutButtonLocation = _DayPickerKeyboardShortcuts.BOTTOM_RIGHT; 9394 if (this.isVertical()) { 9395 keyboardShortcutButtonLocation = withPortal ? _DayPickerKeyboardShortcuts.TOP_LEFT : _DayPickerKeyboardShortcuts.TOP_RIGHT; 9396 } 9397 9398 var shouldAnimateHeight = isHorizontal && hasSetHeight; 9399 9400 var calendarInfoPositionTop = calendarInfoPosition === _constants.INFO_POSITION_TOP; 9401 var calendarInfoPositionBottom = calendarInfoPosition === _constants.INFO_POSITION_BOTTOM; 9402 var calendarInfoPositionBefore = calendarInfoPosition === _constants.INFO_POSITION_BEFORE; 9403 var calendarInfoPositionAfter = calendarInfoPosition === _constants.INFO_POSITION_AFTER; 9404 var calendarInfoIsInline = calendarInfoPositionBefore || calendarInfoPositionAfter; 9405 9406 var calendarInfo = renderCalendarInfo && _react2['default'].createElement( 9407 'div', 9408 _extends({ 9409 ref: this.setCalendarInfoRef 9410 }, (0, _reactWithStyles.css)(calendarInfoIsInline && styles.DayPicker_calendarInfo__horizontal)), 9411 renderCalendarInfo() 9412 ); 9413 9414 var calendarInfoPanelWidth = renderCalendarInfo && calendarInfoIsInline ? calendarInfoWidth : 0; 9415 9416 var firstVisibleMonthIndex = this.getFirstVisibleIndex(); 9417 var wrapperHorizontalWidth = calendarMonthWidth * numberOfMonths + 2 * dayPickerHorizontalPadding; 9418 // Adding `1px` because of whitespace between 2 inline-block 9419 var fullHorizontalWidth = wrapperHorizontalWidth + calendarInfoPanelWidth + 1; 9420 9421 var transitionContainerStyle = { 9422 width: isHorizontal && wrapperHorizontalWidth, 9423 height: height 9424 }; 9425 9426 var dayPickerWrapperStyle = { 9427 width: isHorizontal && wrapperHorizontalWidth 9428 }; 9429 9430 var dayPickerStyle = { 9431 width: isHorizontal && fullHorizontalWidth, 9432 9433 // These values are to center the datepicker (approximately) on the page 9434 marginLeft: isHorizontal && withPortal ? -fullHorizontalWidth / 2 : null, 9435 marginTop: isHorizontal && withPortal ? -calendarMonthWidth / 2 : null 9436 }; 9437 9438 return _react2['default'].createElement( 9439 'div', 9440 _extends({ 9441 role: 'application', 9442 'aria-label': phrases.calendarLabel 9443 }, (0, _reactWithStyles.css)(styles.DayPicker, isHorizontal && styles.DayPicker__horizontal, verticalScrollable && styles.DayPicker__verticalScrollable, isHorizontal && withPortal && styles.DayPicker_portal__horizontal, this.isVertical() && withPortal && styles.DayPicker_portal__vertical, dayPickerStyle, !monthTitleHeight && styles.DayPicker__hidden, !noBorder && styles.DayPicker__withBorder)), 9444 _react2['default'].createElement( 9445 _reactOutsideClickHandler2['default'], 9446 { onOutsideClick: onOutsideClick }, 9447 (calendarInfoPositionTop || calendarInfoPositionBefore) && calendarInfo, 9448 _react2['default'].createElement( 9449 'div', 9450 (0, _reactWithStyles.css)(dayPickerWrapperStyle, calendarInfoIsInline && isHorizontal && styles.DayPicker_wrapper__horizontal), 9451 _react2['default'].createElement( 9452 'div', 9453 _extends({}, (0, _reactWithStyles.css)(styles.DayPicker_weekHeaders, isHorizontal && styles.DayPicker_weekHeaders__horizontal), { 9454 'aria-hidden': 'true', 9455 role: 'presentation' 9456 }), 9457 weekHeaders 9458 ), 9459 _react2['default'].createElement( 9460 'div', 9461 _extends({}, (0, _reactWithStyles.css)(styles.DayPicker_focusRegion), { 9462 ref: this.setContainerRef, 9463 onClick: function () { 9464 function onClick(e) { 9465 e.stopPropagation(); 9466 } 9467 9468 return onClick; 9469 }(), 9470 onKeyDown: this.onKeyDown, 9471 onMouseUp: function () { 9472 function onMouseUp() { 9473 _this7.setState({ withMouseInteractions: true }); 9474 } 9475 9476 return onMouseUp; 9477 }(), 9478 role: 'region', 9479 tabIndex: -1 9480 }), 9481 !verticalScrollable && this.renderNavigation(), 9482 _react2['default'].createElement( 9483 'div', 9484 _extends({}, (0, _reactWithStyles.css)(styles.DayPicker_transitionContainer, shouldAnimateHeight && styles.DayPicker_transitionContainer__horizontal, this.isVertical() && styles.DayPicker_transitionContainer__vertical, verticalScrollable && styles.DayPicker_transitionContainer__verticalScrollable, transitionContainerStyle), { 9485 ref: this.setTransitionContainerRef 9486 }), 9487 _react2['default'].createElement(_CalendarMonthGrid2['default'], { 9488 setMonthTitleHeight: !monthTitleHeight ? this.setMonthTitleHeight : undefined, 9489 translationValue: translationValue, 9490 enableOutsideDays: enableOutsideDays, 9491 firstVisibleMonthIndex: firstVisibleMonthIndex, 9492 initialMonth: currentMonth, 9493 isAnimating: isCalendarMonthGridAnimating, 9494 modifiers: modifiers, 9495 orientation: orientation, 9496 numberOfMonths: numberOfMonths * scrollableMonthMultiple, 9497 onDayClick: onDayClick, 9498 onDayMouseEnter: onDayMouseEnter, 9499 onDayMouseLeave: onDayMouseLeave, 9500 onMonthChange: this.onMonthChange, 9501 onYearChange: this.onYearChange, 9502 renderMonthText: renderMonthText, 9503 renderCalendarDay: renderCalendarDay, 9504 renderDayContents: renderDayContents, 9505 renderMonthElement: renderMonthElement, 9506 onMonthTransitionEnd: this.updateStateAfterMonthTransition, 9507 monthFormat: monthFormat, 9508 daySize: daySize, 9509 firstDayOfWeek: firstDayOfWeek, 9510 isFocused: shouldFocusDate, 9511 focusedDate: focusedDate, 9512 phrases: phrases, 9513 isRTL: isRTL, 9514 dayAriaLabelFormat: dayAriaLabelFormat, 9515 transitionDuration: transitionDuration, 9516 verticalBorderSpacing: verticalBorderSpacing, 9517 horizontalMonthPadding: horizontalMonthPadding 9518 }), 9519 verticalScrollable && this.renderNavigation() 9520 ), 9521 !isTouch && !hideKeyboardShortcutsPanel && _react2['default'].createElement(_DayPickerKeyboardShortcuts2['default'], { 9522 block: this.isVertical() && !withPortal, 9523 buttonLocation: keyboardShortcutButtonLocation, 9524 showKeyboardShortcutsPanel: showKeyboardShortcuts, 9525 openKeyboardShortcutsPanel: this.openKeyboardShortcutsPanel, 9526 closeKeyboardShortcutsPanel: this.closeKeyboardShortcutsPanel, 9527 phrases: phrases 9528 }) 9529 ) 9530 ), 9531 (calendarInfoPositionBottom || calendarInfoPositionAfter) && calendarInfo 9532 ) 9533 ); 9534 } 9535 9536 return render; 9537 }() 9538 }]); 9539 9540 return DayPicker; 9541 }(_react2['default'].Component); 9542 9543 DayPicker.propTypes = propTypes; 9544 DayPicker.defaultProps = defaultProps; 9545 9546 exports.PureDayPicker = DayPicker; 9547 exports["default"] = (0, _reactWithStyles.withStyles)(function (_ref2) { 9548 var _ref2$reactDates = _ref2.reactDates, 9549 color = _ref2$reactDates.color, 9550 font = _ref2$reactDates.font, 9551 noScrollBarOnVerticalScrollable = _ref2$reactDates.noScrollBarOnVerticalScrollable, 9552 spacing = _ref2$reactDates.spacing, 9553 zIndex = _ref2$reactDates.zIndex; 9554 return { 9555 DayPicker: { 9556 background: color.background, 9557 position: 'relative', 9558 textAlign: 'left' 9559 }, 9560 9561 DayPicker__horizontal: { 9562 background: color.background 9563 }, 9564 9565 DayPicker__verticalScrollable: { 9566 height: '100%' 9567 }, 9568 9569 DayPicker__hidden: { 9570 visibility: 'hidden' 9571 }, 9572 9573 DayPicker__withBorder: { 9574 boxShadow: '0 2px 6px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.07)', 9575 borderRadius: 3 9576 }, 9577 9578 DayPicker_portal__horizontal: { 9579 boxShadow: 'none', 9580 position: 'absolute', 9581 left: '50%', 9582 top: '50%' 9583 }, 9584 9585 DayPicker_portal__vertical: { 9586 position: 'initial' 9587 }, 9588 9589 DayPicker_focusRegion: { 9590 outline: 'none' 9591 }, 9592 9593 DayPicker_calendarInfo__horizontal: { 9594 display: 'inline-block', 9595 verticalAlign: 'top' 9596 }, 9597 9598 DayPicker_wrapper__horizontal: { 9599 display: 'inline-block', 9600 verticalAlign: 'top' 9601 }, 9602 9603 DayPicker_weekHeaders: { 9604 position: 'relative' 9605 }, 9606 9607 DayPicker_weekHeaders__horizontal: { 9608 marginLeft: spacing.dayPickerHorizontalPadding 9609 }, 9610 9611 DayPicker_weekHeader: { 9612 color: color.placeholderText, 9613 position: 'absolute', 9614 top: 62, 9615 zIndex: zIndex + 2, 9616 textAlign: 'left' 9617 }, 9618 9619 DayPicker_weekHeader__vertical: { 9620 left: '50%' 9621 }, 9622 9623 DayPicker_weekHeader__verticalScrollable: { 9624 top: 0, 9625 display: 'table-row', 9626 borderBottom: '1px solid ' + String(color.core.border), 9627 background: color.background, 9628 marginLeft: 0, 9629 left: 0, 9630 width: '100%', 9631 textAlign: 'center' 9632 }, 9633 9634 DayPicker_weekHeader_ul: { 9635 listStyle: 'none', 9636 margin: '1px 0', 9637 paddingLeft: 0, 9638 paddingRight: 0, 9639 fontSize: font.size 9640 }, 9641 9642 DayPicker_weekHeader_li: { 9643 display: 'inline-block', 9644 textAlign: 'center' 9645 }, 9646 9647 DayPicker_transitionContainer: { 9648 position: 'relative', 9649 overflow: 'hidden', 9650 borderRadius: 3 9651 }, 9652 9653 DayPicker_transitionContainer__horizontal: { 9654 transition: 'height 0.2s ease-in-out' 9655 }, 9656 9657 DayPicker_transitionContainer__vertical: { 9658 width: '100%' 9659 }, 9660 9661 DayPicker_transitionContainer__verticalScrollable: (0, _object2['default'])({ 9662 paddingTop: 20, 9663 height: '100%', 9664 position: 'absolute', 9665 top: 0, 9666 bottom: 0, 9667 right: 0, 9668 left: 0, 9669 overflowY: 'scroll' 9670 }, noScrollBarOnVerticalScrollable && { 9671 '-webkitOverflowScrolling': 'touch', 9672 '::-webkit-scrollbar': { 9673 '-webkit-appearance': 'none', 9674 display: 'none' 9675 } 9676 }) 9677 }; 9678 })(DayPicker); 9679 9680 /***/ }), 9681 9682 /***/ 600: 9683 /***/ (function(__unused_webpack_module, exports, __webpack_require__) { 9684 9685 "use strict"; 9686 9687 9688 Object.defineProperty(exports, "__esModule", ({ 9689 value: true 9690 })); 9691 exports.BOTTOM_RIGHT = exports.TOP_RIGHT = exports.TOP_LEFT = undefined; 9692 9693 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; 9694 9695 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); 9696 9697 var _object = __webpack_require__(4011); 9698 9699 var _object2 = _interopRequireDefault(_object); 9700 9701 var _react = __webpack_require__(9196); 9702 9703 var _react2 = _interopRequireDefault(_react); 9704 9705 var _propTypes = __webpack_require__(2652); 9706 9707 var _propTypes2 = _interopRequireDefault(_propTypes); 9708 9709 var _airbnbPropTypes = __webpack_require__(4882); 9710 9711 var _reactWithStyles = __webpack_require__(3576); 9712 9713 var _defaultPhrases = __webpack_require__(6030); 9714 9715 var _getPhrasePropTypes = __webpack_require__(2893); 9716 9717 var _getPhrasePropTypes2 = _interopRequireDefault(_getPhrasePropTypes); 9718 9719 var _KeyboardShortcutRow = __webpack_require__(5820); 9720 9721 var _KeyboardShortcutRow2 = _interopRequireDefault(_KeyboardShortcutRow); 9722 9723 var _CloseButton = __webpack_require__(6973); 9724 9725 var _CloseButton2 = _interopRequireDefault(_CloseButton); 9726 9727 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } 9728 9729 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 9730 9731 function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } 9732 9733 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } 9734 9735 var TOP_LEFT = exports.TOP_LEFT = 'top-left'; 9736 var TOP_RIGHT = exports.TOP_RIGHT = 'top-right'; 9737 var BOTTOM_RIGHT = exports.BOTTOM_RIGHT = 'bottom-right'; 9738 9739 var propTypes = (0, _airbnbPropTypes.forbidExtraProps)((0, _object2['default'])({}, _reactWithStyles.withStylesPropTypes, { 9740 block: _propTypes2['default'].bool, 9741 buttonLocation: _propTypes2['default'].oneOf([TOP_LEFT, TOP_RIGHT, BOTTOM_RIGHT]), 9742 showKeyboardShortcutsPanel: _propTypes2['default'].bool, 9743 openKeyboardShortcutsPanel: _propTypes2['default'].func, 9744 closeKeyboardShortcutsPanel: _propTypes2['default'].func, 9745 phrases: _propTypes2['default'].shape((0, _getPhrasePropTypes2['default'])(_defaultPhrases.DayPickerKeyboardShortcutsPhrases)) 9746 })); 9747 9748 var defaultProps = { 9749 block: false, 9750 buttonLocation: BOTTOM_RIGHT, 9751 showKeyboardShortcutsPanel: false, 9752 openKeyboardShortcutsPanel: function () { 9753 function openKeyboardShortcutsPanel() {} 9754 9755 return openKeyboardShortcutsPanel; 9756 }(), 9757 closeKeyboardShortcutsPanel: function () { 9758 function closeKeyboardShortcutsPanel() {} 9759 9760 return closeKeyboardShortcutsPanel; 9761 }(), 9762 9763 phrases: _defaultPhrases.DayPickerKeyboardShortcutsPhrases 9764 }; 9765 9766 function getKeyboardShortcuts(phrases) { 9767 return [{ 9768 unicode: '↵', 9769 label: phrases.enterKey, 9770 action: phrases.selectFocusedDate 9771 }, { 9772 unicode: '←/→', 9773 label: phrases.leftArrowRightArrow, 9774 action: phrases.moveFocusByOneDay 9775 }, { 9776 unicode: '↑/↓', 9777 label: phrases.upArrowDownArrow, 9778 action: phrases.moveFocusByOneWeek 9779 }, { 9780 unicode: 'PgUp/PgDn', 9781 label: phrases.pageUpPageDown, 9782 action: phrases.moveFocusByOneMonth 9783 }, { 9784 unicode: 'Home/End', 9785 label: phrases.homeEnd, 9786 action: phrases.moveFocustoStartAndEndOfWeek 9787 }, { 9788 unicode: 'Esc', 9789 label: phrases.escape, 9790 action: phrases.returnFocusToInput 9791 }, { 9792 unicode: '?', 9793 label: phrases.questionMark, 9794 action: phrases.openThisPanel 9795 }]; 9796 } 9797 9798 var DayPickerKeyboardShortcuts = function (_React$Component) { 9799 _inherits(DayPickerKeyboardShortcuts, _React$Component); 9800 9801 function DayPickerKeyboardShortcuts() { 9802 var _ref; 9803 9804 _classCallCheck(this, DayPickerKeyboardShortcuts); 9805 9806 for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { 9807 args[_key] = arguments[_key]; 9808 } 9809 9810 var _this = _possibleConstructorReturn(this, (_ref = DayPickerKeyboardShortcuts.__proto__ || Object.getPrototypeOf(DayPickerKeyboardShortcuts)).call.apply(_ref, [this].concat(args))); 9811 9812 var phrases = _this.props.phrases; 9813 9814 _this.keyboardShortcuts = getKeyboardShortcuts(phrases); 9815 9816 _this.onShowKeyboardShortcutsButtonClick = _this.onShowKeyboardShortcutsButtonClick.bind(_this); 9817 _this.setShowKeyboardShortcutsButtonRef = _this.setShowKeyboardShortcutsButtonRef.bind(_this); 9818 _this.setHideKeyboardShortcutsButtonRef = _this.setHideKeyboardShortcutsButtonRef.bind(_this); 9819 _this.handleFocus = _this.handleFocus.bind(_this); 9820 _this.onKeyDown = _this.onKeyDown.bind(_this); 9821 return _this; 9822 } 9823 9824 _createClass(DayPickerKeyboardShortcuts, [{ 9825 key: 'componentWillReceiveProps', 9826 value: function () { 9827 function componentWillReceiveProps(nextProps) { 9828 var phrases = this.props.phrases; 9829 9830 if (nextProps.phrases !== phrases) { 9831 this.keyboardShortcuts = getKeyboardShortcuts(nextProps.phrases); 9832 } 9833 } 9834 9835 return componentWillReceiveProps; 9836 }() 9837 }, { 9838 key: 'componentDidUpdate', 9839 value: function () { 9840 function componentDidUpdate() { 9841 this.handleFocus(); 9842 } 9843 9844 return componentDidUpdate; 9845 }() 9846 }, { 9847 key: 'onKeyDown', 9848 value: function () { 9849 function onKeyDown(e) { 9850 e.stopPropagation(); 9851 9852 var closeKeyboardShortcutsPanel = this.props.closeKeyboardShortcutsPanel; 9853 // Because the close button is the only focusable element inside of the panel, this 9854 // amounts to a very basic focus trap. The user can exit the panel by "pressing" the 9855 // close button or hitting escape 9856 9857 switch (e.key) { 9858 case 'Enter': 9859 case ' ': 9860 case 'Spacebar': // for older browsers 9861 case 'Escape': 9862 closeKeyboardShortcutsPanel(); 9863 break; 9864 9865 // do nothing - this allows the up and down arrows continue their 9866 // default behavior of scrolling the content of the Keyboard Shortcuts Panel 9867 // which is needed when only a single month is shown for instance. 9868 case 'ArrowUp': 9869 case 'ArrowDown': 9870 break; 9871 9872 // completely block the rest of the keys that have functionality outside of this panel 9873 case 'Tab': 9874 case 'Home': 9875 case 'End': 9876 case 'PageUp': 9877 case 'PageDown': 9878 case 'ArrowLeft': 9879 case 'ArrowRight': 9880 e.preventDefault(); 9881 break; 9882 9883 default: 9884 break; 9885 } 9886 } 9887 9888 return onKeyDown; 9889 }() 9890 }, { 9891 key: 'onShowKeyboardShortcutsButtonClick', 9892 value: function () { 9893 function onShowKeyboardShortcutsButtonClick() { 9894 var _this2 = this; 9895 9896 var openKeyboardShortcutsPanel = this.props.openKeyboardShortcutsPanel; 9897 9898 // we want to return focus to this button after closing the keyboard shortcuts panel 9899 9900 openKeyboardShortcutsPanel(function () { 9901 _this2.showKeyboardShortcutsButton.focus(); 9902 }); 9903 } 9904 9905 return onShowKeyboardShortcutsButtonClick; 9906 }() 9907 }, { 9908 key: 'setShowKeyboardShortcutsButtonRef', 9909 value: function () { 9910 function setShowKeyboardShortcutsButtonRef(ref) { 9911 this.showKeyboardShortcutsButton = ref; 9912 } 9913 9914 return setShowKeyboardShortcutsButtonRef; 9915 }() 9916 }, { 9917 key: 'setHideKeyboardShortcutsButtonRef', 9918 value: function () { 9919 function setHideKeyboardShortcutsButtonRef(ref) { 9920 this.hideKeyboardShortcutsButton = ref; 9921 } 9922 9923 return setHideKeyboardShortcutsButtonRef; 9924 }() 9925 }, { 9926 key: 'handleFocus', 9927 value: function () { 9928 function handleFocus() { 9929 if (this.hideKeyboardShortcutsButton) { 9930 // automatically move focus into the dialog by moving 9931 // to the only interactive element, the hide button 9932 this.hideKeyboardShortcutsButton.focus(); 9933 } 9934 } 9935 9936 return handleFocus; 9937 }() 9938 }, { 9939 key: 'render', 9940 value: function () { 9941 function render() { 9942 var _this3 = this; 9943 9944 var _props = this.props, 9945 block = _props.block, 9946 buttonLocation = _props.buttonLocation, 9947 showKeyboardShortcutsPanel = _props.showKeyboardShortcutsPanel, 9948 closeKeyboardShortcutsPanel = _props.closeKeyboardShortcutsPanel, 9949 styles = _props.styles, 9950 phrases = _props.phrases; 9951 9952 9953 var toggleButtonText = showKeyboardShortcutsPanel ? phrases.hideKeyboardShortcutsPanel : phrases.showKeyboardShortcutsPanel; 9954 9955 var bottomRight = buttonLocation === BOTTOM_RIGHT; 9956 var topRight = buttonLocation === TOP_RIGHT; 9957 var topLeft = buttonLocation === TOP_LEFT; 9958 9959 return _react2['default'].createElement( 9960 'div', 9961 null, 9962 _react2['default'].createElement( 9963 'button', 9964 _extends({ 9965 ref: this.setShowKeyboardShortcutsButtonRef 9966 }, (0, _reactWithStyles.css)(styles.DayPickerKeyboardShortcuts_buttonReset, styles.DayPickerKeyboardShortcuts_show, bottomRight && styles.DayPickerKeyboardShortcuts_show__bottomRight, topRight && styles.DayPickerKeyboardShortcuts_show__topRight, topLeft && styles.DayPickerKeyboardShortcuts_show__topLeft), { 9967 type: 'button', 9968 'aria-label': toggleButtonText, 9969 onClick: this.onShowKeyboardShortcutsButtonClick, 9970 onKeyDown: function () { 9971 function onKeyDown(e) { 9972 if (e.key === 'Enter') { 9973 e.preventDefault(); 9974 } else if (e.key === 'Space') { 9975 _this3.onShowKeyboardShortcutsButtonClick(e); 9976 } 9977 } 9978 9979 return onKeyDown; 9980 }(), 9981 onMouseUp: function () { 9982 function onMouseUp(e) { 9983 e.currentTarget.blur(); 9984 } 9985 9986 return onMouseUp; 9987 }() 9988 }), 9989 _react2['default'].createElement( 9990 'span', 9991 (0, _reactWithStyles.css)(styles.DayPickerKeyboardShortcuts_showSpan, bottomRight && styles.DayPickerKeyboardShortcuts_showSpan__bottomRight, topRight && styles.DayPickerKeyboardShortcuts_showSpan__topRight, topLeft && styles.DayPickerKeyboardShortcuts_showSpan__topLeft), 9992 '?' 9993 ) 9994 ), 9995 showKeyboardShortcutsPanel && _react2['default'].createElement( 9996 'div', 9997 _extends({}, (0, _reactWithStyles.css)(styles.DayPickerKeyboardShortcuts_panel), { 9998 role: 'dialog', 9999 'aria-labelledby': 'DayPickerKeyboardShortcuts_title', 10000 'aria-describedby': 'DayPickerKeyboardShortcuts_description' 10001 }), 10002 _react2['default'].createElement( 10003 'div', 10004 _extends({}, (0, _reactWithStyles.css)(styles.DayPickerKeyboardShortcuts_title), { 10005 id: 'DayPickerKeyboardShortcuts_title' 10006 }), 10007 phrases.keyboardShortcuts 10008 ), 10009 _react2['default'].createElement( 10010 'button', 10011 _extends({ 10012 ref: this.setHideKeyboardShortcutsButtonRef 10013 }, (0, _reactWithStyles.css)(styles.DayPickerKeyboardShortcuts_buttonReset, styles.DayPickerKeyboardShortcuts_close), { 10014 type: 'button', 10015 tabIndex: '0', 10016 'aria-label': phrases.hideKeyboardShortcutsPanel, 10017 onClick: closeKeyboardShortcutsPanel, 10018 onKeyDown: this.onKeyDown 10019 }), 10020 _react2['default'].createElement(_CloseButton2['default'], (0, _reactWithStyles.css)(styles.DayPickerKeyboardShortcuts_closeSvg)) 10021 ), 10022 _react2['default'].createElement( 10023 'ul', 10024 _extends({}, (0, _reactWithStyles.css)(styles.DayPickerKeyboardShortcuts_list), { 10025 id: 'DayPickerKeyboardShortcuts_description' 10026 }), 10027 this.keyboardShortcuts.map(function (_ref2) { 10028 var unicode = _ref2.unicode, 10029 label = _ref2.label, 10030 action = _ref2.action; 10031 return _react2['default'].createElement(_KeyboardShortcutRow2['default'], { 10032 key: label, 10033 unicode: unicode, 10034 label: label, 10035 action: action, 10036 block: block 10037 }); 10038 }) 10039 ) 10040 ) 10041 ); 10042 } 10043 10044 return render; 10045 }() 10046 }]); 10047 10048 return DayPickerKeyboardShortcuts; 10049 }(_react2['default'].Component); 10050 10051 DayPickerKeyboardShortcuts.propTypes = propTypes; 10052 DayPickerKeyboardShortcuts.defaultProps = defaultProps; 10053 10054 exports["default"] = (0, _reactWithStyles.withStyles)(function (_ref3) { 10055 var _ref3$reactDates = _ref3.reactDates, 10056 color = _ref3$reactDates.color, 10057 font = _ref3$reactDates.font, 10058 zIndex = _ref3$reactDates.zIndex; 10059 return { 10060 DayPickerKeyboardShortcuts_buttonReset: { 10061 background: 'none', 10062 border: 0, 10063 borderRadius: 0, 10064 color: 'inherit', 10065 font: 'inherit', 10066 lineHeight: 'normal', 10067 overflow: 'visible', 10068 padding: 0, 10069 cursor: 'pointer', 10070 fontSize: font.size, 10071 10072 ':active': { 10073 outline: 'none' 10074 } 10075 }, 10076 10077 DayPickerKeyboardShortcuts_show: { 10078 width: 22, 10079 position: 'absolute', 10080 zIndex: zIndex + 2 10081 }, 10082 10083 DayPickerKeyboardShortcuts_show__bottomRight: { 10084 borderTop: '26px solid transparent', 10085 borderRight: '33px solid ' + String(color.core.primary), 10086 bottom: 0, 10087 right: 0, 10088 10089 ':hover': { 10090 borderRight: '33px solid ' + String(color.core.primary_dark) 10091 } 10092 }, 10093 10094 DayPickerKeyboardShortcuts_show__topRight: { 10095 borderBottom: '26px solid transparent', 10096 borderRight: '33px solid ' + String(color.core.primary), 10097 top: 0, 10098 right: 0, 10099 10100 ':hover': { 10101 borderRight: '33px solid ' + String(color.core.primary_dark) 10102 } 10103 }, 10104 10105 DayPickerKeyboardShortcuts_show__topLeft: { 10106 borderBottom: '26px solid transparent', 10107 borderLeft: '33px solid ' + String(color.core.primary), 10108 top: 0, 10109 left: 0, 10110 10111 ':hover': { 10112 borderLeft: '33px solid ' + String(color.core.primary_dark) 10113 } 10114 }, 10115 10116 DayPickerKeyboardShortcuts_showSpan: { 10117 color: color.core.white, 10118 position: 'absolute' 10119 }, 10120 10121 DayPickerKeyboardShortcuts_showSpan__bottomRight: { 10122 bottom: 0, 10123 right: -28 10124 }, 10125 10126 DayPickerKeyboardShortcuts_showSpan__topRight: { 10127 top: 1, 10128 right: -28 10129 }, 10130 10131 DayPickerKeyboardShortcuts_showSpan__topLeft: { 10132 top: 1, 10133 left: -28 10134 }, 10135 10136 DayPickerKeyboardShortcuts_panel: { 10137 overflow: 'auto', 10138 background: color.background, 10139 border: '1px solid ' + String(color.core.border), 10140 borderRadius: 2, 10141 position: 'absolute', 10142 top: 0, 10143 bottom: 0, 10144 right: 0, 10145 left: 0, 10146 zIndex: zIndex + 2, 10147 padding: 22, 10148 margin: 33 10149 }, 10150 10151 DayPickerKeyboardShortcuts_title: { 10152 fontSize: 16, 10153 fontWeight: 'bold', 10154 margin: 0 10155 }, 10156 10157 DayPickerKeyboardShortcuts_list: { 10158 listStyle: 'none', 10159 padding: 0, 10160 fontSize: font.size 10161 }, 10162 10163 DayPickerKeyboardShortcuts_close: { 10164 position: 'absolute', 10165 right: 22, 10166 top: 22, 10167 zIndex: zIndex + 2, 10168 10169 ':active': { 10170 outline: 'none' 10171 } 10172 }, 10173 10174 DayPickerKeyboardShortcuts_closeSvg: { 10175 height: 15, 10176 width: 15, 10177 fill: color.core.grayLighter, 10178 10179 ':hover': { 10180 fill: color.core.grayLight 10181 }, 10182 10183 ':focus': { 10184 fill: color.core.grayLight 10185 } 10186 } 10187 }; 10188 })(DayPickerKeyboardShortcuts); 10189 10190 /***/ }), 10191 10192 /***/ 3895: 10193 /***/ (function(__unused_webpack_module, exports, __webpack_require__) { 10194 10195 "use strict"; 10196 10197 10198 Object.defineProperty(exports, "__esModule", ({ 10199 value: true 10200 })); 10201 10202 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; 10203 10204 var _object = __webpack_require__(4011); 10205 10206 var _object2 = _interopRequireDefault(_object); 10207 10208 var _react = __webpack_require__(9196); 10209 10210 var _react2 = _interopRequireDefault(_react); 10211 10212 var _propTypes = __webpack_require__(2652); 10213 10214 var _propTypes2 = _interopRequireDefault(_propTypes); 10215 10216 var _airbnbPropTypes = __webpack_require__(4882); 10217 10218 var _reactWithStyles = __webpack_require__(3576); 10219 10220 var _defaultPhrases = __webpack_require__(6030); 10221 10222 var _getPhrasePropTypes = __webpack_require__(2893); 10223 10224 var _getPhrasePropTypes2 = _interopRequireDefault(_getPhrasePropTypes); 10225 10226 var _LeftArrow = __webpack_require__(8); 10227 10228 var _LeftArrow2 = _interopRequireDefault(_LeftArrow); 10229 10230 var _RightArrow = __webpack_require__(4921); 10231 10232 var _RightArrow2 = _interopRequireDefault(_RightArrow); 10233 10234 var _ChevronUp = __webpack_require__(1809); 10235 10236 var _ChevronUp2 = _interopRequireDefault(_ChevronUp); 10237 10238 var _ChevronDown = __webpack_require__(9588); 10239 10240 var _ChevronDown2 = _interopRequireDefault(_ChevronDown); 10241 10242 var _ScrollableOrientationShape = __webpack_require__(6553); 10243 10244 var _ScrollableOrientationShape2 = _interopRequireDefault(_ScrollableOrientationShape); 10245 10246 var _constants = __webpack_require__(257); 10247 10248 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } 10249 10250 function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } } 10251 10252 var propTypes = (0, _airbnbPropTypes.forbidExtraProps)((0, _object2['default'])({}, _reactWithStyles.withStylesPropTypes, { 10253 navPrev: _propTypes2['default'].node, 10254 navNext: _propTypes2['default'].node, 10255 orientation: _ScrollableOrientationShape2['default'], 10256 10257 onPrevMonthClick: _propTypes2['default'].func, 10258 onNextMonthClick: _propTypes2['default'].func, 10259 10260 // internationalization 10261 phrases: _propTypes2['default'].shape((0, _getPhrasePropTypes2['default'])(_defaultPhrases.DayPickerNavigationPhrases)), 10262 10263 isRTL: _propTypes2['default'].bool 10264 })); 10265 10266 var defaultProps = { 10267 navPrev: null, 10268 navNext: null, 10269 orientation: _constants.HORIZONTAL_ORIENTATION, 10270 10271 onPrevMonthClick: function () { 10272 function onPrevMonthClick() {} 10273 10274 return onPrevMonthClick; 10275 }(), 10276 onNextMonthClick: function () { 10277 function onNextMonthClick() {} 10278 10279 return onNextMonthClick; 10280 }(), 10281 10282 10283 // internationalization 10284 phrases: _defaultPhrases.DayPickerNavigationPhrases, 10285 isRTL: false 10286 }; 10287 10288 function DayPickerNavigation(_ref) { 10289 var navPrev = _ref.navPrev, 10290 navNext = _ref.navNext, 10291 onPrevMonthClick = _ref.onPrevMonthClick, 10292 onNextMonthClick = _ref.onNextMonthClick, 10293 orientation = _ref.orientation, 10294 phrases = _ref.phrases, 10295 isRTL = _ref.isRTL, 10296 styles = _ref.styles; 10297 10298 var isHorizontal = orientation === _constants.HORIZONTAL_ORIENTATION; 10299 var isVertical = orientation !== _constants.HORIZONTAL_ORIENTATION; 10300 var isVerticalScrollable = orientation === _constants.VERTICAL_SCROLLABLE; 10301 10302 var navPrevIcon = navPrev; 10303 var navNextIcon = navNext; 10304 var isDefaultNavPrev = false; 10305 var isDefaultNavNext = false; 10306 if (!navPrevIcon) { 10307 isDefaultNavPrev = true; 10308 var Icon = isVertical ? _ChevronUp2['default'] : _LeftArrow2['default']; 10309 if (isRTL && !isVertical) { 10310 Icon = _RightArrow2['default']; 10311 } 10312 navPrevIcon = _react2['default'].createElement(Icon, (0, _reactWithStyles.css)(isHorizontal && styles.DayPickerNavigation_svg__horizontal, isVertical && styles.DayPickerNavigation_svg__vertical)); 10313 } 10314 10315 if (!navNextIcon) { 10316 isDefaultNavNext = true; 10317 var _Icon = isVertical ? _ChevronDown2['default'] : _RightArrow2['default']; 10318 if (isRTL && !isVertical) { 10319 _Icon = _LeftArrow2['default']; 10320 } 10321 navNextIcon = _react2['default'].createElement(_Icon, (0, _reactWithStyles.css)(isHorizontal && styles.DayPickerNavigation_svg__horizontal, isVertical && styles.DayPickerNavigation_svg__vertical)); 10322 } 10323 10324 var isDefaultNav = isVerticalScrollable ? isDefaultNavNext : isDefaultNavNext || isDefaultNavPrev; 10325 10326 return _react2['default'].createElement( 10327 'div', 10328 _reactWithStyles.css.apply(undefined, [styles.DayPickerNavigation, isHorizontal && styles.DayPickerNavigation__horizontal].concat(_toConsumableArray(isVertical && [styles.DayPickerNavigation__vertical, isDefaultNav && styles.DayPickerNavigation__verticalDefault]), _toConsumableArray(isVerticalScrollable && [styles.DayPickerNavigation__verticalScrollable, isDefaultNav && styles.DayPickerNavigation__verticalScrollableDefault]))), 10329 !isVerticalScrollable && _react2['default'].createElement( 10330 'div', 10331 _extends({ 10332 role: 'button', 10333 tabIndex: '0' 10334 }, _reactWithStyles.css.apply(undefined, [styles.DayPickerNavigation_button, isDefaultNavPrev && styles.DayPickerNavigation_button__default].concat(_toConsumableArray(isHorizontal && [styles.DayPickerNavigation_button__horizontal].concat(_toConsumableArray(isDefaultNavPrev && [styles.DayPickerNavigation_button__horizontalDefault, !isRTL && styles.DayPickerNavigation_leftButton__horizontalDefault, isRTL && styles.DayPickerNavigation_rightButton__horizontalDefault]))), _toConsumableArray(isVertical && [styles.DayPickerNavigation_button__vertical].concat(_toConsumableArray(isDefaultNavPrev && [styles.DayPickerNavigation_button__verticalDefault, styles.DayPickerNavigation_prevButton__verticalDefault]))))), { 10335 'aria-label': phrases.jumpToPrevMonth, 10336 onClick: onPrevMonthClick, 10337 onKeyUp: function () { 10338 function onKeyUp(e) { 10339 var key = e.key; 10340 10341 if (key === 'Enter' || key === ' ') onPrevMonthClick(e); 10342 } 10343 10344 return onKeyUp; 10345 }(), 10346 onMouseUp: function () { 10347 function onMouseUp(e) { 10348 e.currentTarget.blur(); 10349 } 10350 10351 return onMouseUp; 10352 }() 10353 }), 10354 navPrevIcon 10355 ), 10356 _react2['default'].createElement( 10357 'div', 10358 _extends({ 10359 role: 'button', 10360 tabIndex: '0' 10361 }, _reactWithStyles.css.apply(undefined, [styles.DayPickerNavigation_button, isDefaultNavNext && styles.DayPickerNavigation_button__default].concat(_toConsumableArray(isHorizontal && [styles.DayPickerNavigation_button__horizontal].concat(_toConsumableArray(isDefaultNavNext && [styles.DayPickerNavigation_button__horizontalDefault, isRTL && styles.DayPickerNavigation_leftButton__horizontalDefault, !isRTL && styles.DayPickerNavigation_rightButton__horizontalDefault]))), _toConsumableArray(isVertical && [styles.DayPickerNavigation_button__vertical, styles.DayPickerNavigation_nextButton__vertical].concat(_toConsumableArray(isDefaultNavNext && [styles.DayPickerNavigation_button__verticalDefault, styles.DayPickerNavigation_nextButton__verticalDefault, isVerticalScrollable && styles.DayPickerNavigation_nextButton__verticalScrollableDefault]))))), { 10362 'aria-label': phrases.jumpToNextMonth, 10363 onClick: onNextMonthClick, 10364 onKeyUp: function () { 10365 function onKeyUp(e) { 10366 var key = e.key; 10367 10368 if (key === 'Enter' || key === ' ') onNextMonthClick(e); 10369 } 10370 10371 return onKeyUp; 10372 }(), 10373 onMouseUp: function () { 10374 function onMouseUp(e) { 10375 e.currentTarget.blur(); 10376 } 10377 10378 return onMouseUp; 10379 }() 10380 }), 10381 navNextIcon 10382 ) 10383 ); 10384 } 10385 10386 DayPickerNavigation.propTypes = propTypes; 10387 DayPickerNavigation.defaultProps = defaultProps; 10388 10389 exports["default"] = (0, _reactWithStyles.withStyles)(function (_ref2) { 10390 var _ref2$reactDates = _ref2.reactDates, 10391 color = _ref2$reactDates.color, 10392 zIndex = _ref2$reactDates.zIndex; 10393 return { 10394 DayPickerNavigation: { 10395 position: 'relative', 10396 zIndex: zIndex + 2 10397 }, 10398 10399 DayPickerNavigation__horizontal: { 10400 height: 0 10401 }, 10402 10403 DayPickerNavigation__vertical: {}, 10404 DayPickerNavigation__verticalScrollable: {}, 10405 10406 DayPickerNavigation__verticalDefault: { 10407 position: 'absolute', 10408 width: '100%', 10409 height: 52, 10410 bottom: 0, 10411 left: 0 10412 }, 10413 10414 DayPickerNavigation__verticalScrollableDefault: { 10415 position: 'relative' 10416 }, 10417 10418 DayPickerNavigation_button: { 10419 cursor: 'pointer', 10420 userSelect: 'none', 10421 border: 0, 10422 padding: 0, 10423 margin: 0 10424 }, 10425 10426 DayPickerNavigation_button__default: { 10427 border: '1px solid ' + String(color.core.borderLight), 10428 backgroundColor: color.background, 10429 color: color.placeholderText, 10430 10431 ':focus': { 10432 border: '1px solid ' + String(color.core.borderMedium) 10433 }, 10434 10435 ':hover': { 10436 border: '1px solid ' + String(color.core.borderMedium) 10437 }, 10438 10439 ':active': { 10440 background: color.backgroundDark 10441 } 10442 }, 10443 10444 DayPickerNavigation_button__horizontal: {}, 10445 10446 DayPickerNavigation_button__horizontalDefault: { 10447 position: 'absolute', 10448 top: 18, 10449 lineHeight: 0.78, 10450 borderRadius: 3, 10451 padding: '6px 9px' 10452 }, 10453 10454 DayPickerNavigation_leftButton__horizontalDefault: { 10455 left: 22 10456 }, 10457 10458 DayPickerNavigation_rightButton__horizontalDefault: { 10459 right: 22 10460 }, 10461 10462 DayPickerNavigation_button__vertical: {}, 10463 10464 DayPickerNavigation_button__verticalDefault: { 10465 padding: 5, 10466 background: color.background, 10467 boxShadow: '0 0 5px 2px rgba(0, 0, 0, 0.1)', 10468 position: 'relative', 10469 display: 'inline-block', 10470 height: '100%', 10471 width: '50%' 10472 }, 10473 10474 DayPickerNavigation_prevButton__verticalDefault: {}, 10475 10476 DayPickerNavigation_nextButton__verticalDefault: { 10477 borderLeft: 0 10478 }, 10479 10480 DayPickerNavigation_nextButton__verticalScrollableDefault: { 10481 width: '100%' 10482 }, 10483 10484 DayPickerNavigation_svg__horizontal: { 10485 height: 19, 10486 width: 19, 10487 fill: color.core.grayLight, 10488 display: 'block' 10489 }, 10490 10491 DayPickerNavigation_svg__vertical: { 10492 height: 42, 10493 width: 42, 10494 fill: color.text, 10495 display: 'block' 10496 } 10497 }; 10498 })(DayPickerNavigation); 10499 10500 /***/ }), 10501 10502 /***/ 6302: 10503 /***/ (function(__unused_webpack_module, exports, __webpack_require__) { 10504 10505 "use strict"; 10506 var __webpack_unused_export__; 10507 10508 10509 __webpack_unused_export__ = ({ 10510 value: true 10511 }); 10512 10513 var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }(); 10514 10515 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); 10516 10517 var _object = __webpack_require__(4011); 10518 10519 var _object2 = _interopRequireDefault(_object); 10520 10521 var _react = __webpack_require__(9196); 10522 10523 var _react2 = _interopRequireDefault(_react); 10524 10525 var _propTypes = __webpack_require__(2652); 10526 10527 var _propTypes2 = _interopRequireDefault(_propTypes); 10528 10529 var _reactMomentProptypes = __webpack_require__(6150); 10530 10531 var _reactMomentProptypes2 = _interopRequireDefault(_reactMomentProptypes); 10532 10533 var _airbnbPropTypes = __webpack_require__(4882); 10534 10535 var _moment = __webpack_require__(6292); 10536 10537 var _moment2 = _interopRequireDefault(_moment); 10538 10539 var _object3 = __webpack_require__(5861); 10540 10541 var _object4 = _interopRequireDefault(_object3); 10542 10543 var _isTouchDevice = __webpack_require__(5834); 10544 10545 var _isTouchDevice2 = _interopRequireDefault(_isTouchDevice); 10546 10547 var _defaultPhrases = __webpack_require__(6030); 10548 10549 var _getPhrasePropTypes = __webpack_require__(2893); 10550 10551 var _getPhrasePropTypes2 = _interopRequireDefault(_getPhrasePropTypes); 10552 10553 var _isSameDay = __webpack_require__(3923); 10554 10555 var _isSameDay2 = _interopRequireDefault(_isSameDay); 10556 10557 var _isAfterDay = __webpack_require__(7365); 10558 10559 var _isAfterDay2 = _interopRequireDefault(_isAfterDay); 10560 10561 var _getVisibleDays = __webpack_require__(3268); 10562 10563 var _getVisibleDays2 = _interopRequireDefault(_getVisibleDays); 10564 10565 var _isDayVisible = __webpack_require__(5713); 10566 10567 var _isDayVisible2 = _interopRequireDefault(_isDayVisible); 10568 10569 var _toISODateString = __webpack_require__(7310); 10570 10571 var _toISODateString2 = _interopRequireDefault(_toISODateString); 10572 10573 var _toISOMonthString = __webpack_require__(2705); 10574 10575 var _toISOMonthString2 = _interopRequireDefault(_toISOMonthString); 10576 10577 var _ScrollableOrientationShape = __webpack_require__(6553); 10578 10579 var _ScrollableOrientationShape2 = _interopRequireDefault(_ScrollableOrientationShape); 10580 10581 var _DayOfWeekShape = __webpack_require__(243); 10582 10583 var _DayOfWeekShape2 = _interopRequireDefault(_DayOfWeekShape); 10584 10585 var _CalendarInfoPositionShape = __webpack_require__(8182); 10586 10587 var _CalendarInfoPositionShape2 = _interopRequireDefault(_CalendarInfoPositionShape); 10588 10589 var _constants = __webpack_require__(257); 10590 10591 var _DayPicker = __webpack_require__(8665); 10592 10593 var _DayPicker2 = _interopRequireDefault(_DayPicker); 10594 10595 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } 10596 10597 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } 10598 10599 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 10600 10601 function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } 10602 10603 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } 10604 10605 var propTypes = (0, _airbnbPropTypes.forbidExtraProps)({ 10606 date: _reactMomentProptypes2['default'].momentObj, 10607 onDateChange: _propTypes2['default'].func, 10608 10609 focused: _propTypes2['default'].bool, 10610 onFocusChange: _propTypes2['default'].func, 10611 onClose: _propTypes2['default'].func, 10612 10613 keepOpenOnDateSelect: _propTypes2['default'].bool, 10614 isOutsideRange: _propTypes2['default'].func, 10615 isDayBlocked: _propTypes2['default'].func, 10616 isDayHighlighted: _propTypes2['default'].func, 10617 10618 // DayPicker props 10619 renderMonthText: (0, _airbnbPropTypes.mutuallyExclusiveProps)(_propTypes2['default'].func, 'renderMonthText', 'renderMonthElement'), 10620 renderMonthElement: (0, _airbnbPropTypes.mutuallyExclusiveProps)(_propTypes2['default'].func, 'renderMonthText', 'renderMonthElement'), 10621 enableOutsideDays: _propTypes2['default'].bool, 10622 numberOfMonths: _propTypes2['default'].number, 10623 orientation: _ScrollableOrientationShape2['default'], 10624 withPortal: _propTypes2['default'].bool, 10625 initialVisibleMonth: _propTypes2['default'].func, 10626 firstDayOfWeek: _DayOfWeekShape2['default'], 10627 hideKeyboardShortcutsPanel: _propTypes2['default'].bool, 10628 daySize: _airbnbPropTypes.nonNegativeInteger, 10629 verticalHeight: _airbnbPropTypes.nonNegativeInteger, 10630 noBorder: _propTypes2['default'].bool, 10631 verticalBorderSpacing: _airbnbPropTypes.nonNegativeInteger, 10632 transitionDuration: _airbnbPropTypes.nonNegativeInteger, 10633 horizontalMonthPadding: _airbnbPropTypes.nonNegativeInteger, 10634 10635 navPrev: _propTypes2['default'].node, 10636 navNext: _propTypes2['default'].node, 10637 10638 onPrevMonthClick: _propTypes2['default'].func, 10639 onNextMonthClick: _propTypes2['default'].func, 10640 onOutsideClick: _propTypes2['default'].func, 10641 renderCalendarDay: _propTypes2['default'].func, 10642 renderDayContents: _propTypes2['default'].func, 10643 renderCalendarInfo: _propTypes2['default'].func, 10644 calendarInfoPosition: _CalendarInfoPositionShape2['default'], 10645 10646 // accessibility 10647 onBlur: _propTypes2['default'].func, 10648 isFocused: _propTypes2['default'].bool, 10649 showKeyboardShortcuts: _propTypes2['default'].bool, 10650 10651 // i18n 10652 monthFormat: _propTypes2['default'].string, 10653 weekDayFormat: _propTypes2['default'].string, 10654 phrases: _propTypes2['default'].shape((0, _getPhrasePropTypes2['default'])(_defaultPhrases.DayPickerPhrases)), 10655 dayAriaLabelFormat: _propTypes2['default'].string, 10656 10657 isRTL: _propTypes2['default'].bool 10658 }); 10659 10660 var defaultProps = { 10661 date: undefined, // TODO: use null 10662 onDateChange: function () { 10663 function onDateChange() {} 10664 10665 return onDateChange; 10666 }(), 10667 10668 10669 focused: false, 10670 onFocusChange: function () { 10671 function onFocusChange() {} 10672 10673 return onFocusChange; 10674 }(), 10675 onClose: function () { 10676 function onClose() {} 10677 10678 return onClose; 10679 }(), 10680 10681 10682 keepOpenOnDateSelect: false, 10683 isOutsideRange: function () { 10684 function isOutsideRange() {} 10685 10686 return isOutsideRange; 10687 }(), 10688 isDayBlocked: function () { 10689 function isDayBlocked() {} 10690 10691 return isDayBlocked; 10692 }(), 10693 isDayHighlighted: function () { 10694 function isDayHighlighted() {} 10695 10696 return isDayHighlighted; 10697 }(), 10698 10699 10700 // DayPicker props 10701 renderMonthText: null, 10702 enableOutsideDays: false, 10703 numberOfMonths: 1, 10704 orientation: _constants.HORIZONTAL_ORIENTATION, 10705 withPortal: false, 10706 hideKeyboardShortcutsPanel: false, 10707 initialVisibleMonth: null, 10708 firstDayOfWeek: null, 10709 daySize: _constants.DAY_SIZE, 10710 verticalHeight: null, 10711 noBorder: false, 10712 verticalBorderSpacing: undefined, 10713 transitionDuration: undefined, 10714 horizontalMonthPadding: 13, 10715 10716 navPrev: null, 10717 navNext: null, 10718 10719 onPrevMonthClick: function () { 10720 function onPrevMonthClick() {} 10721 10722 return onPrevMonthClick; 10723 }(), 10724 onNextMonthClick: function () { 10725 function onNextMonthClick() {} 10726 10727 return onNextMonthClick; 10728 }(), 10729 onOutsideClick: function () { 10730 function onOutsideClick() {} 10731 10732 return onOutsideClick; 10733 }(), 10734 10735 10736 renderCalendarDay: undefined, 10737 renderDayContents: null, 10738 renderCalendarInfo: null, 10739 renderMonthElement: null, 10740 calendarInfoPosition: _constants.INFO_POSITION_BOTTOM, 10741 10742 // accessibility 10743 onBlur: function () { 10744 function onBlur() {} 10745 10746 return onBlur; 10747 }(), 10748 10749 isFocused: false, 10750 showKeyboardShortcuts: false, 10751 10752 // i18n 10753 monthFormat: 'MMMM YYYY', 10754 weekDayFormat: 'dd', 10755 phrases: _defaultPhrases.DayPickerPhrases, 10756 dayAriaLabelFormat: undefined, 10757 10758 isRTL: false 10759 }; 10760 10761 var DayPickerSingleDateController = function (_React$Component) { 10762 _inherits(DayPickerSingleDateController, _React$Component); 10763 10764 function DayPickerSingleDateController(props) { 10765 _classCallCheck(this, DayPickerSingleDateController); 10766 10767 var _this = _possibleConstructorReturn(this, (DayPickerSingleDateController.__proto__ || Object.getPrototypeOf(DayPickerSingleDateController)).call(this, props)); 10768 10769 _this.isTouchDevice = false; 10770 _this.today = (0, _moment2['default'])(); 10771 10772 _this.modifiers = { 10773 today: function () { 10774 function today(day) { 10775 return _this.isToday(day); 10776 } 10777 10778 return today; 10779 }(), 10780 blocked: function () { 10781 function blocked(day) { 10782 return _this.isBlocked(day); 10783 } 10784 10785 return blocked; 10786 }(), 10787 'blocked-calendar': function () { 10788 function blockedCalendar(day) { 10789 return props.isDayBlocked(day); 10790 } 10791 10792 return blockedCalendar; 10793 }(), 10794 'blocked-out-of-range': function () { 10795 function blockedOutOfRange(day) { 10796 return props.isOutsideRange(day); 10797 } 10798 10799 return blockedOutOfRange; 10800 }(), 10801 'highlighted-calendar': function () { 10802 function highlightedCalendar(day) { 10803 return props.isDayHighlighted(day); 10804 } 10805 10806 return highlightedCalendar; 10807 }(), 10808 valid: function () { 10809 function valid(day) { 10810 return !_this.isBlocked(day); 10811 } 10812 10813 return valid; 10814 }(), 10815 hovered: function () { 10816 function hovered(day) { 10817 return _this.isHovered(day); 10818 } 10819 10820 return hovered; 10821 }(), 10822 selected: function () { 10823 function selected(day) { 10824 return _this.isSelected(day); 10825 } 10826 10827 return selected; 10828 }(), 10829 'first-day-of-week': function () { 10830 function firstDayOfWeek(day) { 10831 return _this.isFirstDayOfWeek(day); 10832 } 10833 10834 return firstDayOfWeek; 10835 }(), 10836 'last-day-of-week': function () { 10837 function lastDayOfWeek(day) { 10838 return _this.isLastDayOfWeek(day); 10839 } 10840 10841 return lastDayOfWeek; 10842 }() 10843 }; 10844 10845 var _this$getStateForNewM = _this.getStateForNewMonth(props), 10846 currentMonth = _this$getStateForNewM.currentMonth, 10847 visibleDays = _this$getStateForNewM.visibleDays; 10848 10849 _this.state = { 10850 hoverDate: null, 10851 currentMonth: currentMonth, 10852 visibleDays: visibleDays 10853 }; 10854 10855 _this.onDayMouseEnter = _this.onDayMouseEnter.bind(_this); 10856 _this.onDayMouseLeave = _this.onDayMouseLeave.bind(_this); 10857 _this.onDayClick = _this.onDayClick.bind(_this); 10858 10859 _this.onPrevMonthClick = _this.onPrevMonthClick.bind(_this); 10860 _this.onNextMonthClick = _this.onNextMonthClick.bind(_this); 10861 _this.onMonthChange = _this.onMonthChange.bind(_this); 10862 _this.onYearChange = _this.onYearChange.bind(_this); 10863 10864 _this.getFirstFocusableDay = _this.getFirstFocusableDay.bind(_this); 10865 return _this; 10866 } 10867 10868 _createClass(DayPickerSingleDateController, [{ 10869 key: 'componentDidMount', 10870 value: function () { 10871 function componentDidMount() { 10872 this.isTouchDevice = (0, _isTouchDevice2['default'])(); 10873 } 10874 10875 return componentDidMount; 10876 }() 10877 }, { 10878 key: 'componentWillReceiveProps', 10879 value: function () { 10880 function componentWillReceiveProps(nextProps) { 10881 var _this2 = this; 10882 10883 var date = nextProps.date, 10884 focused = nextProps.focused, 10885 isOutsideRange = nextProps.isOutsideRange, 10886 isDayBlocked = nextProps.isDayBlocked, 10887 isDayHighlighted = nextProps.isDayHighlighted, 10888 initialVisibleMonth = nextProps.initialVisibleMonth, 10889 numberOfMonths = nextProps.numberOfMonths, 10890 enableOutsideDays = nextProps.enableOutsideDays; 10891 var _props = this.props, 10892 prevIsOutsideRange = _props.isOutsideRange, 10893 prevIsDayBlocked = _props.isDayBlocked, 10894 prevIsDayHighlighted = _props.isDayHighlighted, 10895 prevNumberOfMonths = _props.numberOfMonths, 10896 prevEnableOutsideDays = _props.enableOutsideDays, 10897 prevInitialVisibleMonth = _props.initialVisibleMonth, 10898 prevFocused = _props.focused, 10899 prevDate = _props.date; 10900 var visibleDays = this.state.visibleDays; 10901 10902 10903 var recomputeOutsideRange = false; 10904 var recomputeDayBlocked = false; 10905 var recomputeDayHighlighted = false; 10906 10907 if (isOutsideRange !== prevIsOutsideRange) { 10908 this.modifiers['blocked-out-of-range'] = function (day) { 10909 return isOutsideRange(day); 10910 }; 10911 recomputeOutsideRange = true; 10912 } 10913 10914 if (isDayBlocked !== prevIsDayBlocked) { 10915 this.modifiers['blocked-calendar'] = function (day) { 10916 return isDayBlocked(day); 10917 }; 10918 recomputeDayBlocked = true; 10919 } 10920 10921 if (isDayHighlighted !== prevIsDayHighlighted) { 10922 this.modifiers['highlighted-calendar'] = function (day) { 10923 return isDayHighlighted(day); 10924 }; 10925 recomputeDayHighlighted = true; 10926 } 10927 10928 var recomputePropModifiers = recomputeOutsideRange || recomputeDayBlocked || recomputeDayHighlighted; 10929 10930 if (numberOfMonths !== prevNumberOfMonths || enableOutsideDays !== prevEnableOutsideDays || initialVisibleMonth !== prevInitialVisibleMonth && !prevFocused && focused) { 10931 var newMonthState = this.getStateForNewMonth(nextProps); 10932 var currentMonth = newMonthState.currentMonth; 10933 visibleDays = newMonthState.visibleDays; 10934 10935 this.setState({ 10936 currentMonth: currentMonth, 10937 visibleDays: visibleDays 10938 }); 10939 } 10940 10941 var didDateChange = date !== prevDate; 10942 var didFocusChange = focused !== prevFocused; 10943 10944 var modifiers = {}; 10945 10946 if (didDateChange) { 10947 modifiers = this.deleteModifier(modifiers, prevDate, 'selected'); 10948 modifiers = this.addModifier(modifiers, date, 'selected'); 10949 } 10950 10951 if (didFocusChange || recomputePropModifiers) { 10952 (0, _object4['default'])(visibleDays).forEach(function (days) { 10953 Object.keys(days).forEach(function (day) { 10954 var momentObj = (0, _moment2['default'])(day); 10955 if (_this2.isBlocked(momentObj)) { 10956 modifiers = _this2.addModifier(modifiers, momentObj, 'blocked'); 10957 } else { 10958 modifiers = _this2.deleteModifier(modifiers, momentObj, 'blocked'); 10959 } 10960 10961 if (didFocusChange || recomputeOutsideRange) { 10962 if (isOutsideRange(momentObj)) { 10963 modifiers = _this2.addModifier(modifiers, momentObj, 'blocked-out-of-range'); 10964 } else { 10965 modifiers = _this2.deleteModifier(modifiers, momentObj, 'blocked-out-of-range'); 10966 } 10967 } 10968 10969 if (didFocusChange || recomputeDayBlocked) { 10970 if (isDayBlocked(momentObj)) { 10971 modifiers = _this2.addModifier(modifiers, momentObj, 'blocked-calendar'); 10972 } else { 10973 modifiers = _this2.deleteModifier(modifiers, momentObj, 'blocked-calendar'); 10974 } 10975 } 10976 10977 if (didFocusChange || recomputeDayHighlighted) { 10978 if (isDayHighlighted(momentObj)) { 10979 modifiers = _this2.addModifier(modifiers, momentObj, 'highlighted-calendar'); 10980 } else { 10981 modifiers = _this2.deleteModifier(modifiers, momentObj, 'highlighted-calendar'); 10982 } 10983 } 10984 }); 10985 }); 10986 } 10987 10988 var today = (0, _moment2['default'])(); 10989 if (!(0, _isSameDay2['default'])(this.today, today)) { 10990 modifiers = this.deleteModifier(modifiers, this.today, 'today'); 10991 modifiers = this.addModifier(modifiers, today, 'today'); 10992 this.today = today; 10993 } 10994 10995 if (Object.keys(modifiers).length > 0) { 10996 this.setState({ 10997 visibleDays: (0, _object2['default'])({}, visibleDays, modifiers) 10998 }); 10999 } 11000 } 11001 11002 return componentWillReceiveProps; 11003 }() 11004 }, { 11005 key: 'componentWillUpdate', 11006 value: function () { 11007 function componentWillUpdate() { 11008 this.today = (0, _moment2['default'])(); 11009 } 11010 11011 return componentWillUpdate; 11012 }() 11013 }, { 11014 key: 'onDayClick', 11015 value: function () { 11016 function onDayClick(day, e) { 11017 if (e) e.preventDefault(); 11018 if (this.isBlocked(day)) return; 11019 var _props2 = this.props, 11020 onDateChange = _props2.onDateChange, 11021 keepOpenOnDateSelect = _props2.keepOpenOnDateSelect, 11022 onFocusChange = _props2.onFocusChange, 11023 onClose = _props2.onClose; 11024 11025 11026 onDateChange(day); 11027 if (!keepOpenOnDateSelect) { 11028 onFocusChange({ focused: false }); 11029 onClose({ date: day }); 11030 } 11031 } 11032 11033 return onDayClick; 11034 }() 11035 }, { 11036 key: 'onDayMouseEnter', 11037 value: function () { 11038 function onDayMouseEnter(day) { 11039 if (this.isTouchDevice) return; 11040 var _state = this.state, 11041 hoverDate = _state.hoverDate, 11042 visibleDays = _state.visibleDays; 11043 11044 11045 var modifiers = this.deleteModifier({}, hoverDate, 'hovered'); 11046 modifiers = this.addModifier(modifiers, day, 'hovered'); 11047 11048 this.setState({ 11049 hoverDate: day, 11050 visibleDays: (0, _object2['default'])({}, visibleDays, modifiers) 11051 }); 11052 } 11053 11054 return onDayMouseEnter; 11055 }() 11056 }, { 11057 key: 'onDayMouseLeave', 11058 value: function () { 11059 function onDayMouseLeave() { 11060 var _state2 = this.state, 11061 hoverDate = _state2.hoverDate, 11062 visibleDays = _state2.visibleDays; 11063 11064 if (this.isTouchDevice || !hoverDate) return; 11065 11066 var modifiers = this.deleteModifier({}, hoverDate, 'hovered'); 11067 11068 this.setState({ 11069 hoverDate: null, 11070 visibleDays: (0, _object2['default'])({}, visibleDays, modifiers) 11071 }); 11072 } 11073 11074 return onDayMouseLeave; 11075 }() 11076 }, { 11077 key: 'onPrevMonthClick', 11078 value: function () { 11079 function onPrevMonthClick() { 11080 var _props3 = this.props, 11081 onPrevMonthClick = _props3.onPrevMonthClick, 11082 numberOfMonths = _props3.numberOfMonths, 11083 enableOutsideDays = _props3.enableOutsideDays; 11084 var _state3 = this.state, 11085 currentMonth = _state3.currentMonth, 11086 visibleDays = _state3.visibleDays; 11087 11088 11089 var newVisibleDays = {}; 11090 Object.keys(visibleDays).sort().slice(0, numberOfMonths + 1).forEach(function (month) { 11091 newVisibleDays[month] = visibleDays[month]; 11092 }); 11093 11094 var prevMonth = currentMonth.clone().subtract(1, 'month'); 11095 var prevMonthVisibleDays = (0, _getVisibleDays2['default'])(prevMonth, 1, enableOutsideDays); 11096 11097 this.setState({ 11098 currentMonth: prevMonth, 11099 visibleDays: (0, _object2['default'])({}, newVisibleDays, this.getModifiers(prevMonthVisibleDays)) 11100 }, function () { 11101 onPrevMonthClick(prevMonth.clone()); 11102 }); 11103 } 11104 11105 return onPrevMonthClick; 11106 }() 11107 }, { 11108 key: 'onNextMonthClick', 11109 value: function () { 11110 function onNextMonthClick() { 11111 var _props4 = this.props, 11112 onNextMonthClick = _props4.onNextMonthClick, 11113 numberOfMonths = _props4.numberOfMonths, 11114 enableOutsideDays = _props4.enableOutsideDays; 11115 var _state4 = this.state, 11116 currentMonth = _state4.currentMonth, 11117 visibleDays = _state4.visibleDays; 11118 11119 11120 var newVisibleDays = {}; 11121 Object.keys(visibleDays).sort().slice(1).forEach(function (month) { 11122 newVisibleDays[month] = visibleDays[month]; 11123 }); 11124 11125 var nextMonth = currentMonth.clone().add(numberOfMonths, 'month'); 11126 var nextMonthVisibleDays = (0, _getVisibleDays2['default'])(nextMonth, 1, enableOutsideDays); 11127 11128 var newCurrentMonth = currentMonth.clone().add(1, 'month'); 11129 this.setState({ 11130 currentMonth: newCurrentMonth, 11131 visibleDays: (0, _object2['default'])({}, newVisibleDays, this.getModifiers(nextMonthVisibleDays)) 11132 }, function () { 11133 onNextMonthClick(newCurrentMonth.clone()); 11134 }); 11135 } 11136 11137 return onNextMonthClick; 11138 }() 11139 }, { 11140 key: 'onMonthChange', 11141 value: function () { 11142 function onMonthChange(newMonth) { 11143 var _props5 = this.props, 11144 numberOfMonths = _props5.numberOfMonths, 11145 enableOutsideDays = _props5.enableOutsideDays, 11146 orientation = _props5.orientation; 11147 11148 var withoutTransitionMonths = orientation === _constants.VERTICAL_SCROLLABLE; 11149 var newVisibleDays = (0, _getVisibleDays2['default'])(newMonth, numberOfMonths, enableOutsideDays, withoutTransitionMonths); 11150 11151 this.setState({ 11152 currentMonth: newMonth.clone(), 11153 visibleDays: this.getModifiers(newVisibleDays) 11154 }); 11155 } 11156 11157 return onMonthChange; 11158 }() 11159 }, { 11160 key: 'onYearChange', 11161 value: function () { 11162 function onYearChange(newMonth) { 11163 var _props6 = this.props, 11164 numberOfMonths = _props6.numberOfMonths, 11165 enableOutsideDays = _props6.enableOutsideDays, 11166 orientation = _props6.orientation; 11167 11168 var withoutTransitionMonths = orientation === _constants.VERTICAL_SCROLLABLE; 11169 var newVisibleDays = (0, _getVisibleDays2['default'])(newMonth, numberOfMonths, enableOutsideDays, withoutTransitionMonths); 11170 11171 this.setState({ 11172 currentMonth: newMonth.clone(), 11173 visibleDays: this.getModifiers(newVisibleDays) 11174 }); 11175 } 11176 11177 return onYearChange; 11178 }() 11179 }, { 11180 key: 'getFirstFocusableDay', 11181 value: function () { 11182 function getFirstFocusableDay(newMonth) { 11183 var _this3 = this; 11184 11185 var _props7 = this.props, 11186 date = _props7.date, 11187 numberOfMonths = _props7.numberOfMonths; 11188 11189 11190 var focusedDate = newMonth.clone().startOf('month'); 11191 if (date) { 11192 focusedDate = date.clone(); 11193 } 11194 11195 if (this.isBlocked(focusedDate)) { 11196 var days = []; 11197 var lastVisibleDay = newMonth.clone().add(numberOfMonths - 1, 'months').endOf('month'); 11198 var currentDay = focusedDate.clone(); 11199 while (!(0, _isAfterDay2['default'])(currentDay, lastVisibleDay)) { 11200 currentDay = currentDay.clone().add(1, 'day'); 11201 days.push(currentDay); 11202 } 11203 11204 var viableDays = days.filter(function (day) { 11205 return !_this3.isBlocked(day) && (0, _isAfterDay2['default'])(day, focusedDate); 11206 }); 11207 if (viableDays.length > 0) { 11208 var _viableDays = _slicedToArray(viableDays, 1); 11209 11210 focusedDate = _viableDays[0]; 11211 } 11212 } 11213 11214 return focusedDate; 11215 } 11216 11217 return getFirstFocusableDay; 11218 }() 11219 }, { 11220 key: 'getModifiers', 11221 value: function () { 11222 function getModifiers(visibleDays) { 11223 var _this4 = this; 11224 11225 var modifiers = {}; 11226 Object.keys(visibleDays).forEach(function (month) { 11227 modifiers[month] = {}; 11228 visibleDays[month].forEach(function (day) { 11229 modifiers[month][(0, _toISODateString2['default'])(day)] = _this4.getModifiersForDay(day); 11230 }); 11231 }); 11232 11233 return modifiers; 11234 } 11235 11236 return getModifiers; 11237 }() 11238 }, { 11239 key: 'getModifiersForDay', 11240 value: function () { 11241 function getModifiersForDay(day) { 11242 var _this5 = this; 11243 11244 return new Set(Object.keys(this.modifiers).filter(function (modifier) { 11245 return _this5.modifiers[modifier](day); 11246 })); 11247 } 11248 11249 return getModifiersForDay; 11250 }() 11251 }, { 11252 key: 'getStateForNewMonth', 11253 value: function () { 11254 function getStateForNewMonth(nextProps) { 11255 var _this6 = this; 11256 11257 var initialVisibleMonth = nextProps.initialVisibleMonth, 11258 date = nextProps.date, 11259 numberOfMonths = nextProps.numberOfMonths, 11260 enableOutsideDays = nextProps.enableOutsideDays; 11261 11262 var initialVisibleMonthThunk = initialVisibleMonth || (date ? function () { 11263 return date; 11264 } : function () { 11265 return _this6.today; 11266 }); 11267 var currentMonth = initialVisibleMonthThunk(); 11268 var visibleDays = this.getModifiers((0, _getVisibleDays2['default'])(currentMonth, numberOfMonths, enableOutsideDays)); 11269 return { currentMonth: currentMonth, visibleDays: visibleDays }; 11270 } 11271 11272 return getStateForNewMonth; 11273 }() 11274 }, { 11275 key: 'addModifier', 11276 value: function () { 11277 function addModifier(updatedDays, day, modifier) { 11278 var _props8 = this.props, 11279 numberOfVisibleMonths = _props8.numberOfMonths, 11280 enableOutsideDays = _props8.enableOutsideDays, 11281 orientation = _props8.orientation; 11282 var _state5 = this.state, 11283 firstVisibleMonth = _state5.currentMonth, 11284 visibleDays = _state5.visibleDays; 11285 11286 11287 var currentMonth = firstVisibleMonth; 11288 var numberOfMonths = numberOfVisibleMonths; 11289 if (orientation === _constants.VERTICAL_SCROLLABLE) { 11290 numberOfMonths = Object.keys(visibleDays).length; 11291 } else { 11292 currentMonth = currentMonth.clone().subtract(1, 'month'); 11293 numberOfMonths += 2; 11294 } 11295 if (!day || !(0, _isDayVisible2['default'])(day, currentMonth, numberOfMonths, enableOutsideDays)) { 11296 return updatedDays; 11297 } 11298 11299 var iso = (0, _toISODateString2['default'])(day); 11300 11301 var updatedDaysAfterAddition = (0, _object2['default'])({}, updatedDays); 11302 if (enableOutsideDays) { 11303 var monthsToUpdate = Object.keys(visibleDays).filter(function (monthKey) { 11304 return Object.keys(visibleDays[monthKey]).indexOf(iso) > -1; 11305 }); 11306 11307 updatedDaysAfterAddition = monthsToUpdate.reduce(function (days, monthIso) { 11308 var month = updatedDays[monthIso] || visibleDays[monthIso]; 11309 var modifiers = new Set(month[iso]); 11310 modifiers.add(modifier); 11311 return (0, _object2['default'])({}, days, _defineProperty({}, monthIso, (0, _object2['default'])({}, month, _defineProperty({}, iso, modifiers)))); 11312 }, updatedDaysAfterAddition); 11313 } else { 11314 var monthIso = (0, _toISOMonthString2['default'])(day); 11315 var month = updatedDays[monthIso] || visibleDays[monthIso]; 11316 11317 var modifiers = new Set(month[iso]); 11318 modifiers.add(modifier); 11319 updatedDaysAfterAddition = (0, _object2['default'])({}, updatedDaysAfterAddition, _defineProperty({}, monthIso, (0, _object2['default'])({}, month, _defineProperty({}, iso, modifiers)))); 11320 } 11321 11322 return updatedDaysAfterAddition; 11323 } 11324 11325 return addModifier; 11326 }() 11327 }, { 11328 key: 'deleteModifier', 11329 value: function () { 11330 function deleteModifier(updatedDays, day, modifier) { 11331 var _props9 = this.props, 11332 numberOfVisibleMonths = _props9.numberOfMonths, 11333 enableOutsideDays = _props9.enableOutsideDays, 11334 orientation = _props9.orientation; 11335 var _state6 = this.state, 11336 firstVisibleMonth = _state6.currentMonth, 11337 visibleDays = _state6.visibleDays; 11338 11339 11340 var currentMonth = firstVisibleMonth; 11341 var numberOfMonths = numberOfVisibleMonths; 11342 if (orientation === _constants.VERTICAL_SCROLLABLE) { 11343 numberOfMonths = Object.keys(visibleDays).length; 11344 } else { 11345 currentMonth = currentMonth.clone().subtract(1, 'month'); 11346 numberOfMonths += 2; 11347 } 11348 if (!day || !(0, _isDayVisible2['default'])(day, currentMonth, numberOfMonths, enableOutsideDays)) { 11349 return updatedDays; 11350 } 11351 11352 var iso = (0, _toISODateString2['default'])(day); 11353 11354 var updatedDaysAfterDeletion = (0, _object2['default'])({}, updatedDays); 11355 if (enableOutsideDays) { 11356 var monthsToUpdate = Object.keys(visibleDays).filter(function (monthKey) { 11357 return Object.keys(visibleDays[monthKey]).indexOf(iso) > -1; 11358 }); 11359 11360 updatedDaysAfterDeletion = monthsToUpdate.reduce(function (days, monthIso) { 11361 var month = updatedDays[monthIso] || visibleDays[monthIso]; 11362 var modifiers = new Set(month[iso]); 11363 modifiers['delete'](modifier); 11364 return (0, _object2['default'])({}, days, _defineProperty({}, monthIso, (0, _object2['default'])({}, month, _defineProperty({}, iso, modifiers)))); 11365 }, updatedDaysAfterDeletion); 11366 } else { 11367 var monthIso = (0, _toISOMonthString2['default'])(day); 11368 var month = updatedDays[monthIso] || visibleDays[monthIso]; 11369 11370 var modifiers = new Set(month[iso]); 11371 modifiers['delete'](modifier); 11372 updatedDaysAfterDeletion = (0, _object2['default'])({}, updatedDaysAfterDeletion, _defineProperty({}, monthIso, (0, _object2['default'])({}, month, _defineProperty({}, iso, modifiers)))); 11373 } 11374 11375 return updatedDaysAfterDeletion; 11376 } 11377 11378 return deleteModifier; 11379 }() 11380 }, { 11381 key: 'isBlocked', 11382 value: function () { 11383 function isBlocked(day) { 11384 var _props10 = this.props, 11385 isDayBlocked = _props10.isDayBlocked, 11386 isOutsideRange = _props10.isOutsideRange; 11387 11388 return isDayBlocked(day) || isOutsideRange(day); 11389 } 11390 11391 return isBlocked; 11392 }() 11393 }, { 11394 key: 'isHovered', 11395 value: function () { 11396 function isHovered(day) { 11397 var _ref = this.state || {}, 11398 hoverDate = _ref.hoverDate; 11399 11400 return (0, _isSameDay2['default'])(day, hoverDate); 11401 } 11402 11403 return isHovered; 11404 }() 11405 }, { 11406 key: 'isSelected', 11407 value: function () { 11408 function isSelected(day) { 11409 var date = this.props.date; 11410 11411 return (0, _isSameDay2['default'])(day, date); 11412 } 11413 11414 return isSelected; 11415 }() 11416 }, { 11417 key: 'isToday', 11418 value: function () { 11419 function isToday(day) { 11420 return (0, _isSameDay2['default'])(day, this.today); 11421 } 11422 11423 return isToday; 11424 }() 11425 }, { 11426 key: 'isFirstDayOfWeek', 11427 value: function () { 11428 function isFirstDayOfWeek(day) { 11429 var firstDayOfWeek = this.props.firstDayOfWeek; 11430 11431 return day.day() === (firstDayOfWeek || _moment2['default'].localeData().firstDayOfWeek()); 11432 } 11433 11434 return isFirstDayOfWeek; 11435 }() 11436 }, { 11437 key: 'isLastDayOfWeek', 11438 value: function () { 11439 function isLastDayOfWeek(day) { 11440 var firstDayOfWeek = this.props.firstDayOfWeek; 11441 11442 return day.day() === ((firstDayOfWeek || _moment2['default'].localeData().firstDayOfWeek()) + 6) % 7; 11443 } 11444 11445 return isLastDayOfWeek; 11446 }() 11447 }, { 11448 key: 'render', 11449 value: function () { 11450 function render() { 11451 var _props11 = this.props, 11452 numberOfMonths = _props11.numberOfMonths, 11453 orientation = _props11.orientation, 11454 monthFormat = _props11.monthFormat, 11455 renderMonthText = _props11.renderMonthText, 11456 navPrev = _props11.navPrev, 11457 navNext = _props11.navNext, 11458 onOutsideClick = _props11.onOutsideClick, 11459 withPortal = _props11.withPortal, 11460 focused = _props11.focused, 11461 enableOutsideDays = _props11.enableOutsideDays, 11462 hideKeyboardShortcutsPanel = _props11.hideKeyboardShortcutsPanel, 11463 daySize = _props11.daySize, 11464 firstDayOfWeek = _props11.firstDayOfWeek, 11465 renderCalendarDay = _props11.renderCalendarDay, 11466 renderDayContents = _props11.renderDayContents, 11467 renderCalendarInfo = _props11.renderCalendarInfo, 11468 renderMonthElement = _props11.renderMonthElement, 11469 calendarInfoPosition = _props11.calendarInfoPosition, 11470 isFocused = _props11.isFocused, 11471 isRTL = _props11.isRTL, 11472 phrases = _props11.phrases, 11473 dayAriaLabelFormat = _props11.dayAriaLabelFormat, 11474 onBlur = _props11.onBlur, 11475 showKeyboardShortcuts = _props11.showKeyboardShortcuts, 11476 weekDayFormat = _props11.weekDayFormat, 11477 verticalHeight = _props11.verticalHeight, 11478 noBorder = _props11.noBorder, 11479 transitionDuration = _props11.transitionDuration, 11480 verticalBorderSpacing = _props11.verticalBorderSpacing, 11481 horizontalMonthPadding = _props11.horizontalMonthPadding; 11482 var _state7 = this.state, 11483 currentMonth = _state7.currentMonth, 11484 visibleDays = _state7.visibleDays; 11485 11486 11487 return _react2['default'].createElement(_DayPicker2['default'], { 11488 orientation: orientation, 11489 enableOutsideDays: enableOutsideDays, 11490 modifiers: visibleDays, 11491 numberOfMonths: numberOfMonths, 11492 onDayClick: this.onDayClick, 11493 onDayMouseEnter: this.onDayMouseEnter, 11494 onDayMouseLeave: this.onDayMouseLeave, 11495 onPrevMonthClick: this.onPrevMonthClick, 11496 onNextMonthClick: this.onNextMonthClick, 11497 onMonthChange: this.onMonthChange, 11498 onYearChange: this.onYearChange, 11499 monthFormat: monthFormat, 11500 withPortal: withPortal, 11501 hidden: !focused, 11502 hideKeyboardShortcutsPanel: hideKeyboardShortcutsPanel, 11503 initialVisibleMonth: function () { 11504 function initialVisibleMonth() { 11505 return currentMonth; 11506 } 11507 11508 return initialVisibleMonth; 11509 }(), 11510 firstDayOfWeek: firstDayOfWeek, 11511 onOutsideClick: onOutsideClick, 11512 navPrev: navPrev, 11513 navNext: navNext, 11514 renderMonthText: renderMonthText, 11515 renderCalendarDay: renderCalendarDay, 11516 renderDayContents: renderDayContents, 11517 renderCalendarInfo: renderCalendarInfo, 11518 renderMonthElement: renderMonthElement, 11519 calendarInfoPosition: calendarInfoPosition, 11520 isFocused: isFocused, 11521 getFirstFocusableDay: this.getFirstFocusableDay, 11522 onBlur: onBlur, 11523 phrases: phrases, 11524 daySize: daySize, 11525 isRTL: isRTL, 11526 showKeyboardShortcuts: showKeyboardShortcuts, 11527 weekDayFormat: weekDayFormat, 11528 dayAriaLabelFormat: dayAriaLabelFormat, 11529 verticalHeight: verticalHeight, 11530 noBorder: noBorder, 11531 transitionDuration: transitionDuration, 11532 verticalBorderSpacing: verticalBorderSpacing, 11533 horizontalMonthPadding: horizontalMonthPadding 11534 }); 11535 } 11536 11537 return render; 11538 }() 11539 }]); 11540 11541 return DayPickerSingleDateController; 11542 }(_react2['default'].Component); 11543 11544 exports.Z = DayPickerSingleDateController; 11545 11546 11547 DayPickerSingleDateController.propTypes = propTypes; 11548 DayPickerSingleDateController.defaultProps = defaultProps; 11549 11550 /***/ }), 11551 11552 /***/ 5820: 11553 /***/ (function(__unused_webpack_module, exports, __webpack_require__) { 11554 11555 "use strict"; 11556 11557 11558 Object.defineProperty(exports, "__esModule", ({ 11559 value: true 11560 })); 11561 11562 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; 11563 11564 var _object = __webpack_require__(4011); 11565 11566 var _object2 = _interopRequireDefault(_object); 11567 11568 var _react = __webpack_require__(9196); 11569 11570 var _react2 = _interopRequireDefault(_react); 11571 11572 var _propTypes = __webpack_require__(2652); 11573 11574 var _propTypes2 = _interopRequireDefault(_propTypes); 11575 11576 var _airbnbPropTypes = __webpack_require__(4882); 11577 11578 var _reactWithStyles = __webpack_require__(3576); 11579 11580 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } 11581 11582 var propTypes = (0, _airbnbPropTypes.forbidExtraProps)((0, _object2['default'])({}, _reactWithStyles.withStylesPropTypes, { 11583 unicode: _propTypes2['default'].string.isRequired, 11584 label: _propTypes2['default'].string.isRequired, 11585 action: _propTypes2['default'].string.isRequired, 11586 block: _propTypes2['default'].bool 11587 })); 11588 11589 var defaultProps = { 11590 block: false 11591 }; 11592 11593 function KeyboardShortcutRow(_ref) { 11594 var unicode = _ref.unicode, 11595 label = _ref.label, 11596 action = _ref.action, 11597 block = _ref.block, 11598 styles = _ref.styles; 11599 11600 return _react2['default'].createElement( 11601 'li', 11602 (0, _reactWithStyles.css)(styles.KeyboardShortcutRow, block && styles.KeyboardShortcutRow__block), 11603 _react2['default'].createElement( 11604 'div', 11605 (0, _reactWithStyles.css)(styles.KeyboardShortcutRow_keyContainer, block && styles.KeyboardShortcutRow_keyContainer__block), 11606 _react2['default'].createElement( 11607 'span', 11608 _extends({}, (0, _reactWithStyles.css)(styles.KeyboardShortcutRow_key), { 11609 role: 'img', 11610 'aria-label': String(label) + ',' // add comma so screen readers will pause before reading action 11611 }), 11612 unicode 11613 ) 11614 ), 11615 _react2['default'].createElement( 11616 'div', 11617 (0, _reactWithStyles.css)(styles.KeyboardShortcutRow_action), 11618 action 11619 ) 11620 ); 11621 } 11622 11623 KeyboardShortcutRow.propTypes = propTypes; 11624 KeyboardShortcutRow.defaultProps = defaultProps; 11625 11626 exports["default"] = (0, _reactWithStyles.withStyles)(function (_ref2) { 11627 var color = _ref2.reactDates.color; 11628 return { 11629 KeyboardShortcutRow: { 11630 listStyle: 'none', 11631 margin: '6px 0' 11632 }, 11633 11634 KeyboardShortcutRow__block: { 11635 marginBottom: 16 11636 }, 11637 11638 KeyboardShortcutRow_keyContainer: { 11639 display: 'inline-block', 11640 whiteSpace: 'nowrap', 11641 textAlign: 'right', 11642 marginRight: 6 11643 }, 11644 11645 KeyboardShortcutRow_keyContainer__block: { 11646 textAlign: 'left', 11647 display: 'inline' 11648 }, 11649 11650 KeyboardShortcutRow_key: { 11651 fontFamily: 'monospace', 11652 fontSize: 12, 11653 textTransform: 'uppercase', 11654 background: color.core.grayLightest, 11655 padding: '2px 6px' 11656 }, 11657 11658 KeyboardShortcutRow_action: { 11659 display: 'inline', 11660 wordBreak: 'break-word', 11661 marginLeft: 8 11662 } 11663 }; 11664 })(KeyboardShortcutRow); 11665 11666 /***/ }), 11667 11668 /***/ 8: 11669 /***/ (function(__unused_webpack_module, exports, __webpack_require__) { 11670 11671 "use strict"; 11672 11673 11674 Object.defineProperty(exports, "__esModule", ({ 11675 value: true 11676 })); 11677 11678 var _react = __webpack_require__(9196); 11679 11680 var _react2 = _interopRequireDefault(_react); 11681 11682 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } 11683 11684 var LeftArrow = function () { 11685 function LeftArrow(props) { 11686 return _react2['default'].createElement( 11687 'svg', 11688 props, 11689 _react2['default'].createElement('path', { 11690 d: 'M336.2 274.5l-210.1 210h805.4c13 0 23 10 23 23s-10 23-23 23H126.1l210.1 210.1c11 11 11 21 0 32-5 5-10 7-16 7s-11-2-16-7l-249.1-249c-11-11-11-21 0-32l249.1-249.1c21-21.1 53 10.9 32 32z' 11691 }) 11692 ); 11693 } 11694 11695 return LeftArrow; 11696 }(); 11697 11698 LeftArrow.defaultProps = { 11699 viewBox: '0 0 1000 1000' 11700 }; 11701 exports["default"] = LeftArrow; 11702 11703 /***/ }), 11704 11705 /***/ 4921: 11706 /***/ (function(__unused_webpack_module, exports, __webpack_require__) { 11707 11708 "use strict"; 11709 11710 11711 Object.defineProperty(exports, "__esModule", ({ 11712 value: true 11713 })); 11714 11715 var _react = __webpack_require__(9196); 11716 11717 var _react2 = _interopRequireDefault(_react); 11718 11719 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } 11720 11721 var RightArrow = function () { 11722 function RightArrow(props) { 11723 return _react2['default'].createElement( 11724 'svg', 11725 props, 11726 _react2['default'].createElement('path', { 11727 d: 'M694.4 242.4l249.1 249.1c11 11 11 21 0 32L694.4 772.7c-5 5-10 7-16 7s-11-2-16-7c-11-11-11-21 0-32l210.1-210.1H67.1c-13 0-23-10-23-23s10-23 23-23h805.4L662.4 274.5c-21-21.1 11-53.1 32-32.1z' 11728 }) 11729 ); 11730 } 11731 11732 return RightArrow; 11733 }(); 11734 11735 RightArrow.defaultProps = { 11736 viewBox: '0 0 1000 1000' 11737 }; 11738 exports["default"] = RightArrow; 11739 11740 /***/ }), 11741 11742 /***/ 257: 11743 /***/ (function(__unused_webpack_module, exports) { 11744 11745 "use strict"; 11746 11747 11748 Object.defineProperty(exports, "__esModule", ({ 11749 value: true 11750 })); 11751 var DISPLAY_FORMAT = exports.DISPLAY_FORMAT = 'L'; 11752 var ISO_FORMAT = exports.ISO_FORMAT = 'YYYY-MM-DD'; 11753 var ISO_MONTH_FORMAT = exports.ISO_MONTH_FORMAT = 'YYYY-MM'; 11754 11755 var START_DATE = exports.START_DATE = 'startDate'; 11756 var END_DATE = exports.END_DATE = 'endDate'; 11757 11758 var HORIZONTAL_ORIENTATION = exports.HORIZONTAL_ORIENTATION = 'horizontal'; 11759 var VERTICAL_ORIENTATION = exports.VERTICAL_ORIENTATION = 'vertical'; 11760 var VERTICAL_SCROLLABLE = exports.VERTICAL_SCROLLABLE = 'verticalScrollable'; 11761 11762 var ICON_BEFORE_POSITION = exports.ICON_BEFORE_POSITION = 'before'; 11763 var ICON_AFTER_POSITION = exports.ICON_AFTER_POSITION = 'after'; 11764 11765 var INFO_POSITION_TOP = exports.INFO_POSITION_TOP = 'top'; 11766 var INFO_POSITION_BOTTOM = exports.INFO_POSITION_BOTTOM = 'bottom'; 11767 var INFO_POSITION_BEFORE = exports.INFO_POSITION_BEFORE = 'before'; 11768 var INFO_POSITION_AFTER = exports.INFO_POSITION_AFTER = 'after'; 11769 11770 var ANCHOR_LEFT = exports.ANCHOR_LEFT = 'left'; 11771 var ANCHOR_RIGHT = exports.ANCHOR_RIGHT = 'right'; 11772 11773 var OPEN_DOWN = exports.OPEN_DOWN = 'down'; 11774 var OPEN_UP = exports.OPEN_UP = 'up'; 11775 11776 var DAY_SIZE = exports.DAY_SIZE = 39; 11777 var BLOCKED_MODIFIER = exports.BLOCKED_MODIFIER = 'blocked'; 11778 var WEEKDAYS = exports.WEEKDAYS = [0, 1, 2, 3, 4, 5, 6]; 11779 11780 var FANG_WIDTH_PX = exports.FANG_WIDTH_PX = 20; 11781 var FANG_HEIGHT_PX = exports.FANG_HEIGHT_PX = 10; 11782 var DEFAULT_VERTICAL_SPACING = exports.DEFAULT_VERTICAL_SPACING = 22; 11783 11784 var MODIFIER_KEY_NAMES = exports.MODIFIER_KEY_NAMES = new Set(['Shift', 'Control', 'Alt', 'Meta']); 11785 11786 /***/ }), 11787 11788 /***/ 6030: 11789 /***/ (function(__unused_webpack_module, exports) { 11790 11791 "use strict"; 11792 11793 11794 Object.defineProperty(exports, "__esModule", ({ 11795 value: true 11796 })); 11797 var calendarLabel = 'Calendar'; 11798 var closeDatePicker = 'Close'; 11799 var focusStartDate = 'Interact with the calendar and add the check-in date for your trip.'; 11800 var clearDate = 'Clear Date'; 11801 var clearDates = 'Clear Dates'; 11802 var jumpToPrevMonth = 'Move backward to switch to the previous month.'; 11803 var jumpToNextMonth = 'Move forward to switch to the next month.'; 11804 var keyboardShortcuts = 'Keyboard Shortcuts'; 11805 var showKeyboardShortcutsPanel = 'Open the keyboard shortcuts panel.'; 11806 var hideKeyboardShortcutsPanel = 'Close the shortcuts panel.'; 11807 var openThisPanel = 'Open this panel.'; 11808 var enterKey = 'Enter key'; 11809 var leftArrowRightArrow = 'Right and left arrow keys'; 11810 var upArrowDownArrow = 'up and down arrow keys'; 11811 var pageUpPageDown = 'page up and page down keys'; 11812 var homeEnd = 'Home and end keys'; 11813 var escape = 'Escape key'; 11814 var questionMark = 'Question mark'; 11815 var selectFocusedDate = 'Select the date in focus.'; 11816 var moveFocusByOneDay = 'Move backward (left) and forward (right) by one day.'; 11817 var moveFocusByOneWeek = 'Move backward (up) and forward (down) by one week.'; 11818 var moveFocusByOneMonth = 'Switch months.'; 11819 var moveFocustoStartAndEndOfWeek = 'Go to the first or last day of a week.'; 11820 var returnFocusToInput = 'Return to the date input field.'; 11821 var keyboardNavigationInstructions = 'Press the down arrow key to interact with the calendar and\n select a date. Press the question mark key to get the keyboard shortcuts for changing dates.'; 11822 11823 var chooseAvailableStartDate = function chooseAvailableStartDate(_ref) { 11824 var date = _ref.date; 11825 return 'Choose ' + String(date) + ' as your check-in date. It\u2019s available.'; 11826 }; 11827 var chooseAvailableEndDate = function chooseAvailableEndDate(_ref2) { 11828 var date = _ref2.date; 11829 return 'Choose ' + String(date) + ' as your check-out date. It\u2019s available.'; 11830 }; 11831 var chooseAvailableDate = function chooseAvailableDate(_ref3) { 11832 var date = _ref3.date; 11833 return date; 11834 }; 11835 var dateIsUnavailable = function dateIsUnavailable(_ref4) { 11836 var date = _ref4.date; 11837 return 'Not available. ' + String(date); 11838 }; 11839 var dateIsSelected = function dateIsSelected(_ref5) { 11840 var date = _ref5.date; 11841 return 'Selected. ' + String(date); 11842 }; 11843 11844 exports["default"] = { 11845 calendarLabel: calendarLabel, 11846 closeDatePicker: closeDatePicker, 11847 focusStartDate: focusStartDate, 11848 clearDate: clearDate, 11849 clearDates: clearDates, 11850 jumpToPrevMonth: jumpToPrevMonth, 11851 jumpToNextMonth: jumpToNextMonth, 11852 keyboardShortcuts: keyboardShortcuts, 11853 showKeyboardShortcutsPanel: showKeyboardShortcutsPanel, 11854 hideKeyboardShortcutsPanel: hideKeyboardShortcutsPanel, 11855 openThisPanel: openThisPanel, 11856 enterKey: enterKey, 11857 leftArrowRightArrow: leftArrowRightArrow, 11858 upArrowDownArrow: upArrowDownArrow, 11859 pageUpPageDown: pageUpPageDown, 11860 homeEnd: homeEnd, 11861 escape: escape, 11862 questionMark: questionMark, 11863 selectFocusedDate: selectFocusedDate, 11864 moveFocusByOneDay: moveFocusByOneDay, 11865 moveFocusByOneWeek: moveFocusByOneWeek, 11866 moveFocusByOneMonth: moveFocusByOneMonth, 11867 moveFocustoStartAndEndOfWeek: moveFocustoStartAndEndOfWeek, 11868 returnFocusToInput: returnFocusToInput, 11869 keyboardNavigationInstructions: keyboardNavigationInstructions, 11870 11871 chooseAvailableStartDate: chooseAvailableStartDate, 11872 chooseAvailableEndDate: chooseAvailableEndDate, 11873 dateIsUnavailable: dateIsUnavailable, 11874 dateIsSelected: dateIsSelected 11875 }; 11876 var DateRangePickerPhrases = exports.DateRangePickerPhrases = { 11877 calendarLabel: calendarLabel, 11878 closeDatePicker: closeDatePicker, 11879 clearDates: clearDates, 11880 focusStartDate: focusStartDate, 11881 jumpToPrevMonth: jumpToPrevMonth, 11882 jumpToNextMonth: jumpToNextMonth, 11883 keyboardShortcuts: keyboardShortcuts, 11884 showKeyboardShortcutsPanel: showKeyboardShortcutsPanel, 11885 hideKeyboardShortcutsPanel: hideKeyboardShortcutsPanel, 11886 openThisPanel: openThisPanel, 11887 enterKey: enterKey, 11888 leftArrowRightArrow: leftArrowRightArrow, 11889 upArrowDownArrow: upArrowDownArrow, 11890 pageUpPageDown: pageUpPageDown, 11891 homeEnd: homeEnd, 11892 escape: escape, 11893 questionMark: questionMark, 11894 selectFocusedDate: selectFocusedDate, 11895 moveFocusByOneDay: moveFocusByOneDay, 11896 moveFocusByOneWeek: moveFocusByOneWeek, 11897 moveFocusByOneMonth: moveFocusByOneMonth, 11898 moveFocustoStartAndEndOfWeek: moveFocustoStartAndEndOfWeek, 11899 returnFocusToInput: returnFocusToInput, 11900 keyboardNavigationInstructions: keyboardNavigationInstructions, 11901 chooseAvailableStartDate: chooseAvailableStartDate, 11902 chooseAvailableEndDate: chooseAvailableEndDate, 11903 dateIsUnavailable: dateIsUnavailable, 11904 dateIsSelected: dateIsSelected 11905 }; 11906 11907 var DateRangePickerInputPhrases = exports.DateRangePickerInputPhrases = { 11908 focusStartDate: focusStartDate, 11909 clearDates: clearDates, 11910 keyboardNavigationInstructions: keyboardNavigationInstructions 11911 }; 11912 11913 var SingleDatePickerPhrases = exports.SingleDatePickerPhrases = { 11914 calendarLabel: calendarLabel, 11915 closeDatePicker: closeDatePicker, 11916 clearDate: clearDate, 11917 jumpToPrevMonth: jumpToPrevMonth, 11918 jumpToNextMonth: jumpToNextMonth, 11919 keyboardShortcuts: keyboardShortcuts, 11920 showKeyboardShortcutsPanel: showKeyboardShortcutsPanel, 11921 hideKeyboardShortcutsPanel: hideKeyboardShortcutsPanel, 11922 openThisPanel: openThisPanel, 11923 enterKey: enterKey, 11924 leftArrowRightArrow: leftArrowRightArrow, 11925 upArrowDownArrow: upArrowDownArrow, 11926 pageUpPageDown: pageUpPageDown, 11927 homeEnd: homeEnd, 11928 escape: escape, 11929 questionMark: questionMark, 11930 selectFocusedDate: selectFocusedDate, 11931 moveFocusByOneDay: moveFocusByOneDay, 11932 moveFocusByOneWeek: moveFocusByOneWeek, 11933 moveFocusByOneMonth: moveFocusByOneMonth, 11934 moveFocustoStartAndEndOfWeek: moveFocustoStartAndEndOfWeek, 11935 returnFocusToInput: returnFocusToInput, 11936 keyboardNavigationInstructions: keyboardNavigationInstructions, 11937 chooseAvailableDate: chooseAvailableDate, 11938 dateIsUnavailable: dateIsUnavailable, 11939 dateIsSelected: dateIsSelected 11940 }; 11941 11942 var SingleDatePickerInputPhrases = exports.SingleDatePickerInputPhrases = { 11943 clearDate: clearDate, 11944 keyboardNavigationInstructions: keyboardNavigationInstructions 11945 }; 11946 11947 var DayPickerPhrases = exports.DayPickerPhrases = { 11948 calendarLabel: calendarLabel, 11949 jumpToPrevMonth: jumpToPrevMonth, 11950 jumpToNextMonth: jumpToNextMonth, 11951 keyboardShortcuts: keyboardShortcuts, 11952 showKeyboardShortcutsPanel: showKeyboardShortcutsPanel, 11953 hideKeyboardShortcutsPanel: hideKeyboardShortcutsPanel, 11954 openThisPanel: openThisPanel, 11955 enterKey: enterKey, 11956 leftArrowRightArrow: leftArrowRightArrow, 11957 upArrowDownArrow: upArrowDownArrow, 11958 pageUpPageDown: pageUpPageDown, 11959 homeEnd: homeEnd, 11960 escape: escape, 11961 questionMark: questionMark, 11962 selectFocusedDate: selectFocusedDate, 11963 moveFocusByOneDay: moveFocusByOneDay, 11964 moveFocusByOneWeek: moveFocusByOneWeek, 11965 moveFocusByOneMonth: moveFocusByOneMonth, 11966 moveFocustoStartAndEndOfWeek: moveFocustoStartAndEndOfWeek, 11967 returnFocusToInput: returnFocusToInput, 11968 chooseAvailableStartDate: chooseAvailableStartDate, 11969 chooseAvailableEndDate: chooseAvailableEndDate, 11970 chooseAvailableDate: chooseAvailableDate, 11971 dateIsUnavailable: dateIsUnavailable, 11972 dateIsSelected: dateIsSelected 11973 }; 11974 11975 var DayPickerKeyboardShortcutsPhrases = exports.DayPickerKeyboardShortcutsPhrases = { 11976 keyboardShortcuts: keyboardShortcuts, 11977 showKeyboardShortcutsPanel: showKeyboardShortcutsPanel, 11978 hideKeyboardShortcutsPanel: hideKeyboardShortcutsPanel, 11979 openThisPanel: openThisPanel, 11980 enterKey: enterKey, 11981 leftArrowRightArrow: leftArrowRightArrow, 11982 upArrowDownArrow: upArrowDownArrow, 11983 pageUpPageDown: pageUpPageDown, 11984 homeEnd: homeEnd, 11985 escape: escape, 11986 questionMark: questionMark, 11987 selectFocusedDate: selectFocusedDate, 11988 moveFocusByOneDay: moveFocusByOneDay, 11989 moveFocusByOneWeek: moveFocusByOneWeek, 11990 moveFocusByOneMonth: moveFocusByOneMonth, 11991 moveFocustoStartAndEndOfWeek: moveFocustoStartAndEndOfWeek, 11992 returnFocusToInput: returnFocusToInput 11993 }; 11994 11995 var DayPickerNavigationPhrases = exports.DayPickerNavigationPhrases = { 11996 jumpToPrevMonth: jumpToPrevMonth, 11997 jumpToNextMonth: jumpToNextMonth 11998 }; 11999 12000 var CalendarDayPhrases = exports.CalendarDayPhrases = { 12001 chooseAvailableDate: chooseAvailableDate, 12002 dateIsUnavailable: dateIsUnavailable, 12003 dateIsSelected: dateIsSelected 12004 }; 12005 12006 /***/ }), 12007 12008 /***/ 17: 12009 /***/ (function(__unused_webpack_module, __unused_webpack_exports, __webpack_require__) { 12010 12011 "use strict"; 12012 12013 12014 var _registerCSSInterfaceWithDefaultTheme = __webpack_require__(9305); 12015 12016 var _registerCSSInterfaceWithDefaultTheme2 = _interopRequireDefault(_registerCSSInterfaceWithDefaultTheme); 12017 12018 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } 12019 12020 (0, _registerCSSInterfaceWithDefaultTheme2['default'])(); 12021 12022 /***/ }), 12023 12024 /***/ 8182: 12025 /***/ (function(__unused_webpack_module, exports, __webpack_require__) { 12026 12027 "use strict"; 12028 12029 12030 Object.defineProperty(exports, "__esModule", ({ 12031 value: true 12032 })); 12033 12034 var _propTypes = __webpack_require__(2652); 12035 12036 var _propTypes2 = _interopRequireDefault(_propTypes); 12037 12038 var _constants = __webpack_require__(257); 12039 12040 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } 12041 12042 exports["default"] = _propTypes2['default'].oneOf([_constants.INFO_POSITION_TOP, _constants.INFO_POSITION_BOTTOM, _constants.INFO_POSITION_BEFORE, _constants.INFO_POSITION_AFTER]); 12043 12044 /***/ }), 12045 12046 /***/ 243: 12047 /***/ (function(__unused_webpack_module, exports, __webpack_require__) { 12048 12049 "use strict"; 12050 12051 12052 Object.defineProperty(exports, "__esModule", ({ 12053 value: true 12054 })); 12055 12056 var _propTypes = __webpack_require__(2652); 12057 12058 var _propTypes2 = _interopRequireDefault(_propTypes); 12059 12060 var _constants = __webpack_require__(257); 12061 12062 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } 12063 12064 exports["default"] = _propTypes2['default'].oneOf(_constants.WEEKDAYS); 12065 12066 /***/ }), 12067 12068 /***/ 6747: 12069 /***/ (function(__unused_webpack_module, exports, __webpack_require__) { 12070 12071 "use strict"; 12072 12073 12074 Object.defineProperty(exports, "__esModule", ({ 12075 value: true 12076 })); 12077 12078 var _propTypes = __webpack_require__(2652); 12079 12080 var _propTypes2 = _interopRequireDefault(_propTypes); 12081 12082 var _airbnbPropTypes = __webpack_require__(4882); 12083 12084 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } 12085 12086 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } 12087 12088 function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } } 12089 12090 exports["default"] = (0, _airbnbPropTypes.and)([_propTypes2['default'].instanceOf(Set), function () { 12091 function modifiers(props, propName) { 12092 for (var _len = arguments.length, rest = Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) { 12093 rest[_key - 2] = arguments[_key]; 12094 } 12095 12096 var propValue = props[propName]; 12097 12098 var firstError = void 0; 12099 [].concat(_toConsumableArray(propValue)).some(function (v, i) { 12100 var _PropTypes$string; 12101 12102 var fakePropName = String(propName) + ': index ' + String(i); 12103 firstError = (_PropTypes$string = _propTypes2['default'].string).isRequired.apply(_PropTypes$string, [_defineProperty({}, fakePropName, v), fakePropName].concat(rest)); 12104 return firstError != null; 12105 }); 12106 return firstError == null ? null : firstError; 12107 } 12108 12109 return modifiers; 12110 }()], 'Modifiers (Set of Strings)'); 12111 12112 /***/ }), 12113 12114 /***/ 6553: 12115 /***/ (function(__unused_webpack_module, exports, __webpack_require__) { 12116 12117 "use strict"; 12118 12119 12120 Object.defineProperty(exports, "__esModule", ({ 12121 value: true 12122 })); 12123 12124 var _propTypes = __webpack_require__(2652); 12125 12126 var _propTypes2 = _interopRequireDefault(_propTypes); 12127 12128 var _constants = __webpack_require__(257); 12129 12130 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } 12131 12132 exports["default"] = _propTypes2['default'].oneOf([_constants.HORIZONTAL_ORIENTATION, _constants.VERTICAL_ORIENTATION, _constants.VERTICAL_SCROLLABLE]); 12133 12134 /***/ }), 12135 12136 /***/ 8158: 12137 /***/ (function(__unused_webpack_module, exports) { 12138 12139 "use strict"; 12140 12141 12142 Object.defineProperty(exports, "__esModule", ({ 12143 value: true 12144 })); 12145 var core = { 12146 white: '#fff', 12147 gray: '#484848', 12148 grayLight: '#82888a', 12149 grayLighter: '#cacccd', 12150 grayLightest: '#f2f2f2', 12151 12152 borderMedium: '#c4c4c4', 12153 border: '#dbdbdb', 12154 borderLight: '#e4e7e7', 12155 borderLighter: '#eceeee', 12156 borderBright: '#f4f5f5', 12157 12158 primary: '#00a699', 12159 primaryShade_1: '#33dacd', 12160 primaryShade_2: '#66e2da', 12161 primaryShade_3: '#80e8e0', 12162 primaryShade_4: '#b2f1ec', 12163 primary_dark: '#008489', 12164 12165 secondary: '#007a87', 12166 12167 yellow: '#ffe8bc', 12168 yellow_dark: '#ffce71' 12169 }; 12170 12171 exports["default"] = { 12172 reactDates: { 12173 zIndex: 0, 12174 border: { 12175 input: { 12176 border: 0, 12177 borderTop: 0, 12178 borderRight: 0, 12179 borderBottom: '2px solid transparent', 12180 borderLeft: 0, 12181 outlineFocused: 0, 12182 borderFocused: 0, 12183 borderTopFocused: 0, 12184 borderLeftFocused: 0, 12185 borderBottomFocused: '2px solid ' + String(core.primary_dark), 12186 borderRightFocused: 0, 12187 borderRadius: 0 12188 }, 12189 pickerInput: { 12190 borderWidth: 1, 12191 borderStyle: 'solid', 12192 borderRadius: 2 12193 } 12194 }, 12195 12196 color: { 12197 core: core, 12198 12199 disabled: core.grayLightest, 12200 12201 background: core.white, 12202 backgroundDark: '#f2f2f2', 12203 backgroundFocused: core.white, 12204 border: 'rgb(219, 219, 219)', 12205 text: core.gray, 12206 textDisabled: core.border, 12207 textFocused: '#007a87', 12208 placeholderText: '#757575', 12209 12210 outside: { 12211 backgroundColor: core.white, 12212 backgroundColor_active: core.white, 12213 backgroundColor_hover: core.white, 12214 color: core.gray, 12215 color_active: core.gray, 12216 color_hover: core.gray 12217 }, 12218 12219 highlighted: { 12220 backgroundColor: core.yellow, 12221 backgroundColor_active: core.yellow_dark, 12222 backgroundColor_hover: core.yellow_dark, 12223 color: core.gray, 12224 color_active: core.gray, 12225 color_hover: core.gray 12226 }, 12227 12228 minimumNights: { 12229 backgroundColor: core.white, 12230 backgroundColor_active: core.white, 12231 backgroundColor_hover: core.white, 12232 borderColor: core.borderLighter, 12233 color: core.grayLighter, 12234 color_active: core.grayLighter, 12235 color_hover: core.grayLighter 12236 }, 12237 12238 hoveredSpan: { 12239 backgroundColor: core.primaryShade_4, 12240 backgroundColor_active: core.primaryShade_3, 12241 backgroundColor_hover: core.primaryShade_4, 12242 borderColor: core.primaryShade_3, 12243 borderColor_active: core.primaryShade_3, 12244 borderColor_hover: core.primaryShade_3, 12245 color: core.secondary, 12246 color_active: core.secondary, 12247 color_hover: core.secondary 12248 }, 12249 12250 selectedSpan: { 12251 backgroundColor: core.primaryShade_2, 12252 backgroundColor_active: core.primaryShade_1, 12253 backgroundColor_hover: core.primaryShade_1, 12254 borderColor: core.primaryShade_1, 12255 borderColor_active: core.primary, 12256 borderColor_hover: core.primary, 12257 color: core.white, 12258 color_active: core.white, 12259 color_hover: core.white 12260 }, 12261 12262 selected: { 12263 backgroundColor: core.primary, 12264 backgroundColor_active: core.primary, 12265 backgroundColor_hover: core.primary, 12266 borderColor: core.primary, 12267 borderColor_active: core.primary, 12268 borderColor_hover: core.primary, 12269 color: core.white, 12270 color_active: core.white, 12271 color_hover: core.white 12272 }, 12273 12274 blocked_calendar: { 12275 backgroundColor: core.grayLighter, 12276 backgroundColor_active: core.grayLighter, 12277 backgroundColor_hover: core.grayLighter, 12278 borderColor: core.grayLighter, 12279 borderColor_active: core.grayLighter, 12280 borderColor_hover: core.grayLighter, 12281 color: core.grayLight, 12282 color_active: core.grayLight, 12283 color_hover: core.grayLight 12284 }, 12285 12286 blocked_out_of_range: { 12287 backgroundColor: core.white, 12288 backgroundColor_active: core.white, 12289 backgroundColor_hover: core.white, 12290 borderColor: core.borderLight, 12291 borderColor_active: core.borderLight, 12292 borderColor_hover: core.borderLight, 12293 color: core.grayLighter, 12294 color_active: core.grayLighter, 12295 color_hover: core.grayLighter 12296 } 12297 }, 12298 12299 spacing: { 12300 dayPickerHorizontalPadding: 9, 12301 captionPaddingTop: 22, 12302 captionPaddingBottom: 37, 12303 inputPadding: 0, 12304 displayTextPaddingVertical: undefined, 12305 displayTextPaddingTop: 11, 12306 displayTextPaddingBottom: 9, 12307 displayTextPaddingHorizontal: undefined, 12308 displayTextPaddingLeft: 11, 12309 displayTextPaddingRight: 11, 12310 displayTextPaddingVertical_small: undefined, 12311 displayTextPaddingTop_small: 7, 12312 displayTextPaddingBottom_small: 5, 12313 displayTextPaddingHorizontal_small: undefined, 12314 displayTextPaddingLeft_small: 7, 12315 displayTextPaddingRight_small: 7 12316 }, 12317 12318 sizing: { 12319 inputWidth: 130, 12320 inputWidth_small: 97, 12321 arrowWidth: 24 12322 }, 12323 12324 noScrollBarOnVerticalScrollable: false, 12325 12326 font: { 12327 size: 14, 12328 captionSize: 18, 12329 input: { 12330 size: 19, 12331 lineHeight: '24px', 12332 size_small: 15, 12333 lineHeight_small: '18px', 12334 letterSpacing_small: '0.2px', 12335 styleDisabled: 'italic' 12336 } 12337 } 12338 } 12339 }; 12340 12341 /***/ }), 12342 12343 /***/ 8607: 12344 /***/ (function(__unused_webpack_module, exports) { 12345 12346 "use strict"; 12347 12348 12349 Object.defineProperty(exports, "__esModule", ({ 12350 value: true 12351 })); 12352 exports["default"] = calculateDimension; 12353 function calculateDimension(el, axis) { 12354 var borderBox = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false; 12355 var withMargin = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false; 12356 12357 if (!el) { 12358 return 0; 12359 } 12360 12361 var axisStart = axis === 'width' ? 'Left' : 'Top'; 12362 var axisEnd = axis === 'width' ? 'Right' : 'Bottom'; 12363 12364 // Only read styles if we need to 12365 var style = !borderBox || withMargin ? window.getComputedStyle(el) : null; 12366 12367 // Offset includes border and padding 12368 var offsetWidth = el.offsetWidth, 12369 offsetHeight = el.offsetHeight; 12370 12371 var size = axis === 'width' ? offsetWidth : offsetHeight; 12372 12373 // Get the inner size 12374 if (!borderBox) { 12375 size -= parseFloat(style['padding' + axisStart]) + parseFloat(style['padding' + axisEnd]) + parseFloat(style['border' + axisStart + 'Width']) + parseFloat(style['border' + axisEnd + 'Width']); 12376 } 12377 12378 // Apply margin 12379 if (withMargin) { 12380 size += parseFloat(style['margin' + axisStart]) + parseFloat(style['margin' + axisEnd]); 12381 } 12382 12383 return size; 12384 } 12385 12386 /***/ }), 12387 12388 /***/ 5814: 12389 /***/ (function(__unused_webpack_module, exports) { 12390 12391 "use strict"; 12392 12393 12394 Object.defineProperty(exports, "__esModule", ({ 12395 value: true 12396 })); 12397 exports["default"] = getActiveElement; 12398 function getActiveElement() { 12399 return typeof document !== 'undefined' && document.activeElement; 12400 } 12401 12402 /***/ }), 12403 12404 /***/ 7475: 12405 /***/ (function(__unused_webpack_module, exports, __webpack_require__) { 12406 12407 "use strict"; 12408 12409 12410 Object.defineProperty(exports, "__esModule", ({ 12411 value: true 12412 })); 12413 exports["default"] = getCalendarDaySettings; 12414 12415 var _getPhrase = __webpack_require__(7098); 12416 12417 var _getPhrase2 = _interopRequireDefault(_getPhrase); 12418 12419 var _constants = __webpack_require__(257); 12420 12421 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } 12422 12423 function getCalendarDaySettings(day, ariaLabelFormat, daySize, modifiers, phrases) { 12424 var chooseAvailableDate = phrases.chooseAvailableDate, 12425 dateIsUnavailable = phrases.dateIsUnavailable, 12426 dateIsSelected = phrases.dateIsSelected; 12427 12428 12429 var daySizeStyles = { 12430 width: daySize, 12431 height: daySize - 1 12432 }; 12433 12434 var useDefaultCursor = modifiers.has('blocked-minimum-nights') || modifiers.has('blocked-calendar') || modifiers.has('blocked-out-of-range'); 12435 12436 var selected = modifiers.has('selected') || modifiers.has('selected-start') || modifiers.has('selected-end'); 12437 12438 var hoveredSpan = !selected && (modifiers.has('hovered-span') || modifiers.has('after-hovered-start')); 12439 12440 var isOutsideRange = modifiers.has('blocked-out-of-range'); 12441 12442 var formattedDate = { date: day.format(ariaLabelFormat) }; 12443 12444 var ariaLabel = (0, _getPhrase2['default'])(chooseAvailableDate, formattedDate); 12445 if (modifiers.has(_constants.BLOCKED_MODIFIER)) { 12446 ariaLabel = (0, _getPhrase2['default'])(dateIsUnavailable, formattedDate); 12447 } else if (selected) { 12448 ariaLabel = (0, _getPhrase2['default'])(dateIsSelected, formattedDate); 12449 } 12450 12451 return { 12452 daySizeStyles: daySizeStyles, 12453 useDefaultCursor: useDefaultCursor, 12454 selected: selected, 12455 hoveredSpan: hoveredSpan, 12456 isOutsideRange: isOutsideRange, 12457 ariaLabel: ariaLabel 12458 }; 12459 } 12460 12461 /***/ }), 12462 12463 /***/ 5644: 12464 /***/ (function(__unused_webpack_module, exports, __webpack_require__) { 12465 12466 "use strict"; 12467 12468 12469 Object.defineProperty(exports, "__esModule", ({ 12470 value: true 12471 })); 12472 exports["default"] = getCalendarMonthWeeks; 12473 12474 var _moment = __webpack_require__(6292); 12475 12476 var _moment2 = _interopRequireDefault(_moment); 12477 12478 var _constants = __webpack_require__(257); 12479 12480 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } 12481 12482 function getCalendarMonthWeeks(month, enableOutsideDays) { 12483 var firstDayOfWeek = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : _moment2['default'].localeData().firstDayOfWeek(); 12484 12485 if (!_moment2['default'].isMoment(month) || !month.isValid()) { 12486 throw new TypeError('`month` must be a valid moment object'); 12487 } 12488 if (_constants.WEEKDAYS.indexOf(firstDayOfWeek) === -1) { 12489 throw new TypeError('`firstDayOfWeek` must be an integer between 0 and 6'); 12490 } 12491 12492 // set utc offset to get correct dates in future (when timezone changes) 12493 var firstOfMonth = month.clone().startOf('month').hour(12); 12494 var lastOfMonth = month.clone().endOf('month').hour(12); 12495 12496 // calculate the exact first and last days to fill the entire matrix 12497 // (considering days outside month) 12498 var prevDays = (firstOfMonth.day() + 7 - firstDayOfWeek) % 7; 12499 var nextDays = (firstDayOfWeek + 6 - lastOfMonth.day()) % 7; 12500 var firstDay = firstOfMonth.clone().subtract(prevDays, 'day'); 12501 var lastDay = lastOfMonth.clone().add(nextDays, 'day'); 12502 12503 var totalDays = lastDay.diff(firstDay, 'days') + 1; 12504 12505 var currentDay = firstDay.clone(); 12506 var weeksInMonth = []; 12507 12508 for (var i = 0; i < totalDays; i += 1) { 12509 if (i % 7 === 0) { 12510 weeksInMonth.push([]); 12511 } 12512 12513 var day = null; 12514 if (i >= prevDays && i < totalDays - nextDays || enableOutsideDays) { 12515 day = currentDay.clone(); 12516 } 12517 12518 weeksInMonth[weeksInMonth.length - 1].push(day); 12519 12520 currentDay.add(1, 'day'); 12521 } 12522 12523 return weeksInMonth; 12524 } 12525 12526 /***/ }), 12527 12528 /***/ 8964: 12529 /***/ (function(__unused_webpack_module, exports) { 12530 12531 "use strict"; 12532 12533 12534 Object.defineProperty(exports, "__esModule", ({ 12535 value: true 12536 })); 12537 exports["default"] = getCalendarMonthWidth; 12538 function getCalendarMonthWidth(daySize, calendarMonthPadding) { 12539 return 7 * daySize + 2 * calendarMonthPadding + 1; 12540 } 12541 12542 /***/ }), 12543 12544 /***/ 4112: 12545 /***/ (function(__unused_webpack_module, exports, __webpack_require__) { 12546 12547 "use strict"; 12548 12549 12550 Object.defineProperty(exports, "__esModule", ({ 12551 value: true 12552 })); 12553 exports["default"] = getNumberOfCalendarMonthWeeks; 12554 12555 var _moment = __webpack_require__(6292); 12556 12557 var _moment2 = _interopRequireDefault(_moment); 12558 12559 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } 12560 12561 function getBlankDaysBeforeFirstDay(firstDayOfMonth, firstDayOfWeek) { 12562 var weekDayDiff = firstDayOfMonth.day() - firstDayOfWeek; 12563 return (weekDayDiff + 7) % 7; 12564 } 12565 12566 function getNumberOfCalendarMonthWeeks(month) { 12567 var firstDayOfWeek = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _moment2['default'].localeData().firstDayOfWeek(); 12568 12569 var firstDayOfMonth = month.clone().startOf('month'); 12570 var numBlankDays = getBlankDaysBeforeFirstDay(firstDayOfMonth, firstDayOfWeek); 12571 return Math.ceil((numBlankDays + month.daysInMonth()) / 7); 12572 } 12573 12574 /***/ }), 12575 12576 /***/ 7098: 12577 /***/ (function(__unused_webpack_module, exports) { 12578 12579 "use strict"; 12580 12581 12582 Object.defineProperty(exports, "__esModule", ({ 12583 value: true 12584 })); 12585 exports["default"] = getPhrase; 12586 function getPhrase(phrase, args) { 12587 if (typeof phrase === 'string') return phrase; 12588 12589 if (typeof phrase === 'function') { 12590 return phrase(args); 12591 } 12592 12593 return ''; 12594 } 12595 12596 /***/ }), 12597 12598 /***/ 2893: 12599 /***/ (function(__unused_webpack_module, exports, __webpack_require__) { 12600 12601 "use strict"; 12602 12603 12604 Object.defineProperty(exports, "__esModule", ({ 12605 value: true 12606 })); 12607 exports["default"] = getPhrasePropTypes; 12608 12609 var _object = __webpack_require__(4011); 12610 12611 var _object2 = _interopRequireDefault(_object); 12612 12613 var _propTypes = __webpack_require__(2652); 12614 12615 var _propTypes2 = _interopRequireDefault(_propTypes); 12616 12617 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } 12618 12619 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } 12620 12621 function getPhrasePropTypes(defaultPhrases) { 12622 return Object.keys(defaultPhrases).reduce(function (phrases, key) { 12623 return (0, _object2['default'])({}, phrases, _defineProperty({}, key, _propTypes2['default'].oneOfType([_propTypes2['default'].string, _propTypes2['default'].func, _propTypes2['default'].node]))); 12624 }, {}); 12625 } 12626 12627 /***/ }), 12628 12629 /***/ 8304: 12630 /***/ (function(__unused_webpack_module, exports) { 12631 12632 "use strict"; 12633 12634 12635 Object.defineProperty(exports, "__esModule", ({ 12636 value: true 12637 })); 12638 exports["default"] = getTransformStyles; 12639 function getTransformStyles(transformValue) { 12640 return { 12641 transform: transformValue, 12642 msTransform: transformValue, 12643 MozTransform: transformValue, 12644 WebkitTransform: transformValue 12645 }; 12646 } 12647 12648 /***/ }), 12649 12650 /***/ 3268: 12651 /***/ (function(__unused_webpack_module, exports, __webpack_require__) { 12652 12653 "use strict"; 12654 12655 12656 Object.defineProperty(exports, "__esModule", ({ 12657 value: true 12658 })); 12659 exports["default"] = getVisibleDays; 12660 12661 var _moment = __webpack_require__(6292); 12662 12663 var _moment2 = _interopRequireDefault(_moment); 12664 12665 var _toISOMonthString = __webpack_require__(2705); 12666 12667 var _toISOMonthString2 = _interopRequireDefault(_toISOMonthString); 12668 12669 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } 12670 12671 function getVisibleDays(month, numberOfMonths, enableOutsideDays, withoutTransitionMonths) { 12672 if (!_moment2['default'].isMoment(month)) return {}; 12673 12674 var visibleDaysByMonth = {}; 12675 var currentMonth = withoutTransitionMonths ? month.clone() : month.clone().subtract(1, 'month'); 12676 for (var i = 0; i < (withoutTransitionMonths ? numberOfMonths : numberOfMonths + 2); i += 1) { 12677 var visibleDays = []; 12678 12679 // set utc offset to get correct dates in future (when timezone changes) 12680 var baseDate = currentMonth.clone(); 12681 var firstOfMonth = baseDate.clone().startOf('month').hour(12); 12682 var lastOfMonth = baseDate.clone().endOf('month').hour(12); 12683 12684 var currentDay = firstOfMonth.clone(); 12685 12686 // days belonging to the previous month 12687 if (enableOutsideDays) { 12688 for (var j = 0; j < currentDay.weekday(); j += 1) { 12689 var prevDay = currentDay.clone().subtract(j + 1, 'day'); 12690 visibleDays.unshift(prevDay); 12691 } 12692 } 12693 12694 while (currentDay < lastOfMonth) { 12695 visibleDays.push(currentDay.clone()); 12696 currentDay.add(1, 'day'); 12697 } 12698 12699 if (enableOutsideDays) { 12700 // weekday() returns the index of the day of the week according to the locale 12701 // this means if the week starts on Monday, weekday() will return 0 for a Monday date, not 1 12702 if (currentDay.weekday() !== 0) { 12703 // days belonging to the next month 12704 for (var k = currentDay.weekday(), count = 0; k < 7; k += 1, count += 1) { 12705 var nextDay = currentDay.clone().add(count, 'day'); 12706 visibleDays.push(nextDay); 12707 } 12708 } 12709 } 12710 12711 visibleDaysByMonth[(0, _toISOMonthString2['default'])(currentMonth)] = visibleDays; 12712 currentMonth = currentMonth.clone().add(1, 'month'); 12713 } 12714 12715 return visibleDaysByMonth; 12716 } 12717 12718 /***/ }), 12719 12720 /***/ 7365: 12721 /***/ (function(__unused_webpack_module, exports, __webpack_require__) { 12722 12723 "use strict"; 12724 12725 12726 Object.defineProperty(exports, "__esModule", ({ 12727 value: true 12728 })); 12729 exports["default"] = isAfterDay; 12730 12731 var _moment = __webpack_require__(6292); 12732 12733 var _moment2 = _interopRequireDefault(_moment); 12734 12735 var _isBeforeDay = __webpack_require__(862); 12736 12737 var _isBeforeDay2 = _interopRequireDefault(_isBeforeDay); 12738 12739 var _isSameDay = __webpack_require__(3923); 12740 12741 var _isSameDay2 = _interopRequireDefault(_isSameDay); 12742 12743 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } 12744 12745 function isAfterDay(a, b) { 12746 if (!_moment2['default'].isMoment(a) || !_moment2['default'].isMoment(b)) return false; 12747 return !(0, _isBeforeDay2['default'])(a, b) && !(0, _isSameDay2['default'])(a, b); 12748 } 12749 12750 /***/ }), 12751 12752 /***/ 862: 12753 /***/ (function(__unused_webpack_module, exports, __webpack_require__) { 12754 12755 "use strict"; 12756 12757 12758 Object.defineProperty(exports, "__esModule", ({ 12759 value: true 12760 })); 12761 exports["default"] = isBeforeDay; 12762 12763 var _moment = __webpack_require__(6292); 12764 12765 var _moment2 = _interopRequireDefault(_moment); 12766 12767 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } 12768 12769 function isBeforeDay(a, b) { 12770 if (!_moment2['default'].isMoment(a) || !_moment2['default'].isMoment(b)) return false; 12771 12772 var aYear = a.year(); 12773 var aMonth = a.month(); 12774 12775 var bYear = b.year(); 12776 var bMonth = b.month(); 12777 12778 var isSameYear = aYear === bYear; 12779 var isSameMonth = aMonth === bMonth; 12780 12781 if (isSameYear && isSameMonth) return a.date() < b.date(); 12782 if (isSameYear) return aMonth < bMonth; 12783 return aYear < bYear; 12784 } 12785 12786 /***/ }), 12787 12788 /***/ 5713: 12789 /***/ (function(__unused_webpack_module, exports, __webpack_require__) { 12790 12791 "use strict"; 12792 12793 12794 Object.defineProperty(exports, "__esModule", ({ 12795 value: true 12796 })); 12797 exports["default"] = isDayVisible; 12798 12799 var _isBeforeDay = __webpack_require__(862); 12800 12801 var _isBeforeDay2 = _interopRequireDefault(_isBeforeDay); 12802 12803 var _isAfterDay = __webpack_require__(7365); 12804 12805 var _isAfterDay2 = _interopRequireDefault(_isAfterDay); 12806 12807 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } 12808 12809 function isDayVisible(day, month, numberOfMonths, enableOutsideDays) { 12810 var firstDayOfFirstMonth = month.clone().startOf('month'); 12811 if (enableOutsideDays) firstDayOfFirstMonth = firstDayOfFirstMonth.startOf('week'); 12812 if ((0, _isBeforeDay2['default'])(day, firstDayOfFirstMonth)) return false; 12813 12814 var lastDayOfLastMonth = month.clone().add(numberOfMonths - 1, 'months').endOf('month'); 12815 if (enableOutsideDays) lastDayOfLastMonth = lastDayOfLastMonth.endOf('week'); 12816 return !(0, _isAfterDay2['default'])(day, lastDayOfLastMonth); 12817 } 12818 12819 /***/ }), 12820 12821 /***/ 1310: 12822 /***/ (function(__unused_webpack_module, exports, __webpack_require__) { 12823 12824 "use strict"; 12825 12826 12827 Object.defineProperty(exports, "__esModule", ({ 12828 value: true 12829 })); 12830 exports["default"] = isNextMonth; 12831 12832 var _moment = __webpack_require__(6292); 12833 12834 var _moment2 = _interopRequireDefault(_moment); 12835 12836 var _isSameMonth = __webpack_require__(4669); 12837 12838 var _isSameMonth2 = _interopRequireDefault(_isSameMonth); 12839 12840 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } 12841 12842 function isNextMonth(a, b) { 12843 if (!_moment2['default'].isMoment(a) || !_moment2['default'].isMoment(b)) return false; 12844 return (0, _isSameMonth2['default'])(a.clone().add(1, 'month'), b); 12845 } 12846 12847 /***/ }), 12848 12849 /***/ 3858: 12850 /***/ (function(__unused_webpack_module, exports, __webpack_require__) { 12851 12852 "use strict"; 12853 12854 12855 Object.defineProperty(exports, "__esModule", ({ 12856 value: true 12857 })); 12858 exports["default"] = isPrevMonth; 12859 12860 var _moment = __webpack_require__(6292); 12861 12862 var _moment2 = _interopRequireDefault(_moment); 12863 12864 var _isSameMonth = __webpack_require__(4669); 12865 12866 var _isSameMonth2 = _interopRequireDefault(_isSameMonth); 12867 12868 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } 12869 12870 function isPrevMonth(a, b) { 12871 if (!_moment2['default'].isMoment(a) || !_moment2['default'].isMoment(b)) return false; 12872 return (0, _isSameMonth2['default'])(a.clone().subtract(1, 'month'), b); 12873 } 12874 12875 /***/ }), 12876 12877 /***/ 3923: 12878 /***/ (function(__unused_webpack_module, exports, __webpack_require__) { 12879 12880 "use strict"; 12881 12882 12883 Object.defineProperty(exports, "__esModule", ({ 12884 value: true 12885 })); 12886 exports["default"] = isSameDay; 12887 12888 var _moment = __webpack_require__(6292); 12889 12890 var _moment2 = _interopRequireDefault(_moment); 12891 12892 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } 12893 12894 function isSameDay(a, b) { 12895 if (!_moment2['default'].isMoment(a) || !_moment2['default'].isMoment(b)) return false; 12896 // Compare least significant, most likely to change units first 12897 // Moment's isSame clones moment inputs and is a tad slow 12898 return a.date() === b.date() && a.month() === b.month() && a.year() === b.year(); 12899 } 12900 12901 /***/ }), 12902 12903 /***/ 4669: 12904 /***/ (function(__unused_webpack_module, exports, __webpack_require__) { 12905 12906 "use strict"; 12907 12908 12909 Object.defineProperty(exports, "__esModule", ({ 12910 value: true 12911 })); 12912 exports["default"] = isSameMonth; 12913 12914 var _moment = __webpack_require__(6292); 12915 12916 var _moment2 = _interopRequireDefault(_moment); 12917 12918 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } 12919 12920 function isSameMonth(a, b) { 12921 if (!_moment2['default'].isMoment(a) || !_moment2['default'].isMoment(b)) return false; 12922 // Compare least significant, most likely to change units first 12923 // Moment's isSame clones moment inputs and is a tad slow 12924 return a.month() === b.month() && a.year() === b.year(); 12925 } 12926 12927 /***/ }), 12928 12929 /***/ 7978: 12930 /***/ (function(__unused_webpack_module, exports) { 12931 12932 "use strict"; 12933 12934 12935 Object.defineProperty(exports, "__esModule", ({ 12936 value: true 12937 })); 12938 exports["default"] = isTransitionEndSupported; 12939 function isTransitionEndSupported() { 12940 return !!(typeof window !== 'undefined' && 'TransitionEvent' in window); 12941 } 12942 12943 /***/ }), 12944 12945 /***/ 9305: 12946 /***/ (function(__unused_webpack_module, exports, __webpack_require__) { 12947 12948 "use strict"; 12949 12950 12951 Object.defineProperty(exports, "__esModule", ({ 12952 value: true 12953 })); 12954 exports["default"] = registerCSSInterfaceWithDefaultTheme; 12955 12956 var _reactWithStylesInterfaceCss = __webpack_require__(5553); 12957 12958 var _reactWithStylesInterfaceCss2 = _interopRequireDefault(_reactWithStylesInterfaceCss); 12959 12960 var _registerInterfaceWithDefaultTheme = __webpack_require__(1980); 12961 12962 var _registerInterfaceWithDefaultTheme2 = _interopRequireDefault(_registerInterfaceWithDefaultTheme); 12963 12964 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } 12965 12966 function registerCSSInterfaceWithDefaultTheme() { 12967 (0, _registerInterfaceWithDefaultTheme2['default'])(_reactWithStylesInterfaceCss2['default']); 12968 } 12969 12970 /***/ }), 12971 12972 /***/ 1980: 12973 /***/ (function(__unused_webpack_module, exports, __webpack_require__) { 12974 12975 "use strict"; 12976 12977 12978 Object.defineProperty(exports, "__esModule", ({ 12979 value: true 12980 })); 12981 exports["default"] = registerInterfaceWithDefaultTheme; 12982 12983 var _ThemedStyleSheet = __webpack_require__(9349); 12984 12985 var _ThemedStyleSheet2 = _interopRequireDefault(_ThemedStyleSheet); 12986 12987 var _DefaultTheme = __webpack_require__(8158); 12988 12989 var _DefaultTheme2 = _interopRequireDefault(_DefaultTheme); 12990 12991 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } 12992 12993 function registerInterfaceWithDefaultTheme(reactWithStylesInterface) { 12994 _ThemedStyleSheet2['default'].registerInterface(reactWithStylesInterface); 12995 _ThemedStyleSheet2['default'].registerTheme(_DefaultTheme2['default']); 12996 } 12997 12998 /***/ }), 12999 13000 /***/ 7310: 13001 /***/ (function(__unused_webpack_module, exports, __webpack_require__) { 13002 13003 "use strict"; 13004 13005 13006 Object.defineProperty(exports, "__esModule", ({ 13007 value: true 13008 })); 13009 exports["default"] = toISODateString; 13010 13011 var _moment = __webpack_require__(6292); 13012 13013 var _moment2 = _interopRequireDefault(_moment); 13014 13015 var _toMomentObject = __webpack_require__(2008); 13016 13017 var _toMomentObject2 = _interopRequireDefault(_toMomentObject); 13018 13019 var _constants = __webpack_require__(257); 13020 13021 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } 13022 13023 function toISODateString(date, currentFormat) { 13024 var dateObj = _moment2['default'].isMoment(date) ? date : (0, _toMomentObject2['default'])(date, currentFormat); 13025 if (!dateObj) return null; 13026 13027 return dateObj.format(_constants.ISO_FORMAT); 13028 } 13029 13030 /***/ }), 13031 13032 /***/ 2705: 13033 /***/ (function(__unused_webpack_module, exports, __webpack_require__) { 13034 13035 "use strict"; 13036 13037 13038 Object.defineProperty(exports, "__esModule", ({ 13039 value: true 13040 })); 13041 exports["default"] = toISOMonthString; 13042 13043 var _moment = __webpack_require__(6292); 13044 13045 var _moment2 = _interopRequireDefault(_moment); 13046 13047 var _toMomentObject = __webpack_require__(2008); 13048 13049 var _toMomentObject2 = _interopRequireDefault(_toMomentObject); 13050 13051 var _constants = __webpack_require__(257); 13052 13053 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } 13054 13055 function toISOMonthString(date, currentFormat) { 13056 var dateObj = _moment2['default'].isMoment(date) ? date : (0, _toMomentObject2['default'])(date, currentFormat); 13057 if (!dateObj) return null; 13058 13059 return dateObj.format(_constants.ISO_MONTH_FORMAT); 13060 } 13061 13062 /***/ }), 13063 13064 /***/ 2008: 13065 /***/ (function(__unused_webpack_module, exports, __webpack_require__) { 13066 13067 "use strict"; 13068 13069 13070 Object.defineProperty(exports, "__esModule", ({ 13071 value: true 13072 })); 13073 exports["default"] = toMomentObject; 13074 13075 var _moment = __webpack_require__(6292); 13076 13077 var _moment2 = _interopRequireDefault(_moment); 13078 13079 var _constants = __webpack_require__(257); 13080 13081 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } 13082 13083 function toMomentObject(dateString, customFormat) { 13084 var dateFormats = customFormat ? [customFormat, _constants.DISPLAY_FORMAT, _constants.ISO_FORMAT] : [_constants.DISPLAY_FORMAT, _constants.ISO_FORMAT]; 13085 13086 var date = (0, _moment2['default'])(dateString, dateFormats, true); 13087 return date.isValid() ? date.hour(12) : null; 13088 } 13089 13090 /***/ }), 13091 13092 /***/ 4821: 13093 /***/ (function(__unused_webpack_module, exports) { 13094 13095 "use strict"; 13096 /** @license React v16.13.1 13097 * react-is.production.min.js 13098 * 13099 * Copyright (c) Facebook, Inc. and its affiliates. 13100 * 13101 * This source code is licensed under the MIT license found in the 13102 * LICENSE file in the root directory of this source tree. 13103 */ 13104 13105 var b="function"===typeof Symbol&&Symbol.for,c=b?Symbol.for("react.element"):60103,d=b?Symbol.for("react.portal"):60106,e=b?Symbol.for("react.fragment"):60107,f=b?Symbol.for("react.strict_mode"):60108,g=b?Symbol.for("react.profiler"):60114,h=b?Symbol.for("react.provider"):60109,k=b?Symbol.for("react.context"):60110,l=b?Symbol.for("react.async_mode"):60111,m=b?Symbol.for("react.concurrent_mode"):60111,n=b?Symbol.for("react.forward_ref"):60112,p=b?Symbol.for("react.suspense"):60113,q=b? 13106 Symbol.for("react.suspense_list"):60120,r=b?Symbol.for("react.memo"):60115,t=b?Symbol.for("react.lazy"):60116,v=b?Symbol.for("react.block"):60121,w=b?Symbol.for("react.fundamental"):60117,x=b?Symbol.for("react.responder"):60118,y=b?Symbol.for("react.scope"):60119; 13107 function z(a){if("object"===typeof a&&null!==a){var u=a.$$typeof;switch(u){case c:switch(a=a.type,a){case l:case m:case e:case g:case f:case p:return a;default:switch(a=a&&a.$$typeof,a){case k:case n:case t:case r:case h:return a;default:return u}}case d:return u}}}function A(a){return z(a)===m}exports.AsyncMode=l;exports.ConcurrentMode=m;exports.ContextConsumer=k;exports.ContextProvider=h;exports.Element=c;exports.ForwardRef=n;exports.Fragment=e;exports.Lazy=t;exports.Memo=r;exports.Portal=d; 13108 exports.Profiler=g;exports.StrictMode=f;exports.Suspense=p;exports.isAsyncMode=function(a){return A(a)||z(a)===l};exports.isConcurrentMode=A;exports.isContextConsumer=function(a){return z(a)===k};exports.isContextProvider=function(a){return z(a)===h};exports.isElement=function(a){return"object"===typeof a&&null!==a&&a.$$typeof===c};exports.isForwardRef=function(a){return z(a)===n};exports.isFragment=function(a){return z(a)===e};exports.isLazy=function(a){return z(a)===t}; 13109 exports.isMemo=function(a){return z(a)===r};exports.isPortal=function(a){return z(a)===d};exports.isProfiler=function(a){return z(a)===g};exports.isStrictMode=function(a){return z(a)===f};exports.isSuspense=function(a){return z(a)===p}; 13110 exports.isValidElementType=function(a){return"string"===typeof a||"function"===typeof a||a===e||a===m||a===g||a===f||a===p||a===q||"object"===typeof a&&null!==a&&(a.$$typeof===t||a.$$typeof===r||a.$$typeof===h||a.$$typeof===k||a.$$typeof===n||a.$$typeof===w||a.$$typeof===x||a.$$typeof===y||a.$$typeof===v)};exports.typeOf=z; 13111 13112 13113 /***/ }), 13114 13115 /***/ 338: 13116 /***/ (function(module, __unused_webpack_exports, __webpack_require__) { 13117 13118 "use strict"; 13119 13120 13121 if (true) { 13122 module.exports = __webpack_require__(4821); 13123 } else {} 13124 13125 13126 /***/ }), 13127 13128 /***/ 9217: 13129 /***/ (function(module) { 13130 13131 var messages = { 13132 invalidPredicate: '`predicate` must be a function', 13133 invalidPropValidator: '`propValidator` must be a function', 13134 requiredCore: 'is marked as required', 13135 invalidTypeCore: 'Invalid input type', 13136 predicateFailureCore: 'Failed to succeed with predicate', 13137 anonymousMessage: '<<anonymous>>', 13138 baseInvalidMessage: 'Invalid ', 13139 }; 13140 13141 function constructPropValidatorVariations(propValidator) { 13142 if (typeof propValidator !== 'function') { 13143 throw new Error(messages.invalidPropValidator); 13144 } 13145 13146 var requiredPropValidator = propValidator.bind(null, false, null); 13147 requiredPropValidator.isRequired = propValidator.bind(null, true, null); 13148 13149 requiredPropValidator.withPredicate = function predicateApplication(predicate) { 13150 if (typeof predicate !== 'function') { 13151 throw new Error(messages.invalidPredicate); 13152 } 13153 var basePropValidator = propValidator.bind(null, false, predicate); 13154 basePropValidator.isRequired = propValidator.bind(null, true, predicate); 13155 return basePropValidator; 13156 }; 13157 13158 return requiredPropValidator; 13159 } 13160 13161 function createInvalidRequiredErrorMessage(propName, componentName, value) { 13162 return new Error( 13163 'The prop `' + propName + '` ' + messages.requiredCore + 13164 ' in `' + componentName + '`, but its value is `' + value + '`.' 13165 ); 13166 } 13167 13168 var independentGuardianValue = -1; 13169 13170 function preValidationRequireCheck(isRequired, componentName, propFullName, propValue) { 13171 var isPropValueUndefined = typeof propValue === 'undefined'; 13172 var isPropValueNull = propValue === null; 13173 13174 if (isRequired) { 13175 if (isPropValueUndefined) { 13176 return createInvalidRequiredErrorMessage(propFullName, componentName, 'undefined'); 13177 } else if (isPropValueNull) { 13178 return createInvalidRequiredErrorMessage(propFullName, componentName, 'null'); 13179 } 13180 } 13181 13182 if (isPropValueUndefined || isPropValueNull) { 13183 return null; 13184 } 13185 13186 return independentGuardianValue; 13187 } 13188 13189 function createMomentChecker(type, typeValidator, validator, momentType) { 13190 13191 function propValidator( 13192 isRequired, // Bound parameter to indicate with the propType is required 13193 predicate, // Bound parameter to allow user to add dynamic validation 13194 props, 13195 propName, 13196 componentName, 13197 location, 13198 propFullName 13199 ) { 13200 var propValue = props[ propName ]; 13201 var propType = typeof propValue; 13202 13203 componentName = componentName || messages.anonymousMessage; 13204 propFullName = propFullName || propName; 13205 13206 var preValidationRequireCheckValue = preValidationRequireCheck( 13207 isRequired, componentName, propFullName, propValue 13208 ); 13209 13210 if (preValidationRequireCheckValue !== independentGuardianValue) { 13211 return preValidationRequireCheckValue; 13212 } 13213 13214 if (typeValidator && !typeValidator(propValue)) { 13215 return new Error( 13216 messages.invalidTypeCore + ': `' + propName + '` of type `' + propType + '` ' + 13217 'supplied to `' + componentName + '`, expected `' + type + '`.' 13218 ); 13219 } 13220 13221 if (!validator(propValue)) { 13222 return new Error( 13223 messages.baseInvalidMessage + location + ' `' + propName + '` of type `' + propType + '` ' + 13224 'supplied to `' + componentName + '`, expected `' + momentType + '`.' 13225 ); 13226 } 13227 13228 if (predicate && !predicate(propValue)) { 13229 var predicateName = predicate.name || messages.anonymousMessage; 13230 return new Error( 13231 messages.baseInvalidMessage + location + ' `' + propName + '` of type `' + propType + '` ' + 13232 'supplied to `' + componentName + '`. ' + messages.predicateFailureCore + ' `' + 13233 predicateName + '`.' 13234 ); 13235 } 13236 13237 return null; 13238 13239 } 13240 13241 return constructPropValidatorVariations(propValidator); 13242 13243 } 13244 13245 module.exports = { 13246 constructPropValidatorVariations: constructPropValidatorVariations, 13247 createMomentChecker: createMomentChecker, 13248 messages: messages, 13249 }; 13250 13251 13252 /***/ }), 13253 13254 /***/ 6150: 13255 /***/ (function(module, __unused_webpack_exports, __webpack_require__) { 13256 13257 var moment = __webpack_require__(6292); 13258 var momentValidationWrapper = __webpack_require__(3416); 13259 var core = __webpack_require__(9217); 13260 13261 module.exports = { 13262 13263 momentObj : core.createMomentChecker( 13264 'object', 13265 function(obj) { 13266 return typeof obj === 'object'; 13267 }, 13268 function isValid(value) { 13269 return momentValidationWrapper.isValidMoment(value); 13270 }, 13271 'Moment' 13272 ), 13273 13274 momentString : core.createMomentChecker( 13275 'string', 13276 function(str) { 13277 return typeof str === 'string'; 13278 }, 13279 function isValid(value) { 13280 return momentValidationWrapper.isValidMoment(moment(value)); 13281 }, 13282 'Moment' 13283 ), 13284 13285 momentDurationObj : core.createMomentChecker( 13286 'object', 13287 function(obj) { 13288 return typeof obj === 'object'; 13289 }, 13290 function isValid(value) { 13291 return moment.isDuration(value); 13292 }, 13293 'Duration' 13294 ), 13295 13296 }; 13297 13298 13299 /***/ }), 13300 13301 /***/ 3416: 13302 /***/ (function(module, __unused_webpack_exports, __webpack_require__) { 13303 13304 var moment = __webpack_require__(6292); 13305 13306 function isValidMoment(testMoment) { 13307 if (typeof moment.isMoment === 'function' && !moment.isMoment(testMoment)) { 13308 return false; 13309 } 13310 13311 /* istanbul ignore else */ 13312 if (typeof testMoment.isValid === 'function') { 13313 // moment 1.7.0+ 13314 return testMoment.isValid(); 13315 } 13316 13317 /* istanbul ignore next */ 13318 return !isNaN(testMoment); 13319 } 13320 13321 module.exports = { 13322 isValidMoment : isValidMoment, 13323 }; 13324 13325 13326 /***/ }), 13327 13328 /***/ 2239: 13329 /***/ (function(__unused_webpack_module, exports, __webpack_require__) { 13330 13331 "use strict"; 13332 13333 13334 Object.defineProperty(exports, "__esModule", ({ 13335 value: true 13336 })); 13337 13338 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); 13339 13340 var _react = __webpack_require__(9196); 13341 13342 var _react2 = _interopRequireDefault(_react); 13343 13344 var _propTypes = __webpack_require__(2652); 13345 13346 var _propTypes2 = _interopRequireDefault(_propTypes); 13347 13348 var _airbnbPropTypes = __webpack_require__(4882); 13349 13350 var _consolidatedEvents = __webpack_require__(8495); 13351 13352 var _object = __webpack_require__(5861); 13353 13354 var _object2 = _interopRequireDefault(_object); 13355 13356 var _document = __webpack_require__(6789); 13357 13358 var _document2 = _interopRequireDefault(_document); 13359 13360 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } 13361 13362 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 13363 13364 function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } 13365 13366 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } 13367 13368 var DISPLAY = { 13369 BLOCK: 'block', 13370 FLEX: 'flex', 13371 INLINE: 'inline', 13372 INLINE_BLOCK: 'inline-block', 13373 CONTENTS: 'contents' 13374 }; 13375 13376 var propTypes = (0, _airbnbPropTypes.forbidExtraProps)({ 13377 children: _propTypes2['default'].node.isRequired, 13378 onOutsideClick: _propTypes2['default'].func.isRequired, 13379 disabled: _propTypes2['default'].bool, 13380 useCapture: _propTypes2['default'].bool, 13381 display: _propTypes2['default'].oneOf((0, _object2['default'])(DISPLAY)) 13382 }); 13383 13384 var defaultProps = { 13385 disabled: false, 13386 13387 // `useCapture` is set to true by default so that a `stopPropagation` in the 13388 // children will not prevent all outside click handlers from firing - maja 13389 useCapture: true, 13390 display: DISPLAY.BLOCK 13391 }; 13392 13393 var OutsideClickHandler = function (_React$Component) { 13394 _inherits(OutsideClickHandler, _React$Component); 13395 13396 function OutsideClickHandler() { 13397 var _ref; 13398 13399 _classCallCheck(this, OutsideClickHandler); 13400 13401 for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { 13402 args[_key] = arguments[_key]; 13403 } 13404 13405 var _this = _possibleConstructorReturn(this, (_ref = OutsideClickHandler.__proto__ || Object.getPrototypeOf(OutsideClickHandler)).call.apply(_ref, [this].concat(args))); 13406 13407 _this.onMouseDown = _this.onMouseDown.bind(_this); 13408 _this.onMouseUp = _this.onMouseUp.bind(_this); 13409 _this.setChildNodeRef = _this.setChildNodeRef.bind(_this); 13410 return _this; 13411 } 13412 13413 _createClass(OutsideClickHandler, [{ 13414 key: 'componentDidMount', 13415 value: function () { 13416 function componentDidMount() { 13417 var _props = this.props, 13418 disabled = _props.disabled, 13419 useCapture = _props.useCapture; 13420 13421 13422 if (!disabled) this.addMouseDownEventListener(useCapture); 13423 } 13424 13425 return componentDidMount; 13426 }() 13427 }, { 13428 key: 'componentDidUpdate', 13429 value: function () { 13430 function componentDidUpdate(_ref2) { 13431 var prevDisabled = _ref2.disabled; 13432 var _props2 = this.props, 13433 disabled = _props2.disabled, 13434 useCapture = _props2.useCapture; 13435 13436 if (prevDisabled !== disabled) { 13437 if (disabled) { 13438 this.removeEventListeners(); 13439 } else { 13440 this.addMouseDownEventListener(useCapture); 13441 } 13442 } 13443 } 13444 13445 return componentDidUpdate; 13446 }() 13447 }, { 13448 key: 'componentWillUnmount', 13449 value: function () { 13450 function componentWillUnmount() { 13451 this.removeEventListeners(); 13452 } 13453 13454 return componentWillUnmount; 13455 }() 13456 13457 // Use mousedown/mouseup to enforce that clicks remain outside the root's 13458 // descendant tree, even when dragged. This should also get triggered on 13459 // touch devices. 13460 13461 }, { 13462 key: 'onMouseDown', 13463 value: function () { 13464 function onMouseDown(e) { 13465 var useCapture = this.props.useCapture; 13466 13467 13468 var isDescendantOfRoot = this.childNode && (0, _document2['default'])(this.childNode, e.target); 13469 if (!isDescendantOfRoot) { 13470 if (this.removeMouseUp) { 13471 this.removeMouseUp(); 13472 this.removeMouseUp = null; 13473 } 13474 this.removeMouseUp = (0, _consolidatedEvents.addEventListener)(document, 'mouseup', this.onMouseUp, { capture: useCapture }); 13475 } 13476 } 13477 13478 return onMouseDown; 13479 }() 13480 13481 // Use mousedown/mouseup to enforce that clicks remain outside the root's 13482 // descendant tree, even when dragged. This should also get triggered on 13483 // touch devices. 13484 13485 }, { 13486 key: 'onMouseUp', 13487 value: function () { 13488 function onMouseUp(e) { 13489 var onOutsideClick = this.props.onOutsideClick; 13490 13491 13492 var isDescendantOfRoot = this.childNode && (0, _document2['default'])(this.childNode, e.target); 13493 if (this.removeMouseUp) { 13494 this.removeMouseUp(); 13495 this.removeMouseUp = null; 13496 } 13497 13498 if (!isDescendantOfRoot) { 13499 onOutsideClick(e); 13500 } 13501 } 13502 13503 return onMouseUp; 13504 }() 13505 }, { 13506 key: 'setChildNodeRef', 13507 value: function () { 13508 function setChildNodeRef(ref) { 13509 this.childNode = ref; 13510 } 13511 13512 return setChildNodeRef; 13513 }() 13514 }, { 13515 key: 'addMouseDownEventListener', 13516 value: function () { 13517 function addMouseDownEventListener(useCapture) { 13518 this.removeMouseDown = (0, _consolidatedEvents.addEventListener)(document, 'mousedown', this.onMouseDown, { capture: useCapture }); 13519 } 13520 13521 return addMouseDownEventListener; 13522 }() 13523 }, { 13524 key: 'removeEventListeners', 13525 value: function () { 13526 function removeEventListeners() { 13527 if (this.removeMouseDown) this.removeMouseDown(); 13528 if (this.removeMouseUp) this.removeMouseUp(); 13529 } 13530 13531 return removeEventListeners; 13532 }() 13533 }, { 13534 key: 'render', 13535 value: function () { 13536 function render() { 13537 var _props3 = this.props, 13538 children = _props3.children, 13539 display = _props3.display; 13540 13541 13542 return _react2['default'].createElement( 13543 'div', 13544 { 13545 ref: this.setChildNodeRef, 13546 style: display !== DISPLAY.BLOCK && (0, _object2['default'])(DISPLAY).includes(display) ? { display: display } : undefined 13547 }, 13548 children 13549 ); 13550 } 13551 13552 return render; 13553 }() 13554 }]); 13555 13556 return OutsideClickHandler; 13557 }(_react2['default'].Component); 13558 13559 exports["default"] = OutsideClickHandler; 13560 13561 13562 OutsideClickHandler.propTypes = propTypes; 13563 OutsideClickHandler.defaultProps = defaultProps; 13564 13565 /***/ }), 13566 13567 /***/ 6606: 13568 /***/ (function(module, __unused_webpack_exports, __webpack_require__) { 13569 13570 // eslint-disable-next-line import/no-unresolved 13571 module.exports = __webpack_require__(2239); 13572 13573 13574 /***/ }), 13575 13576 /***/ 235: 13577 /***/ (function(module, __unused_webpack_exports, __webpack_require__) { 13578 13579 var e=__webpack_require__(9196),n={display:"block",opacity:0,position:"absolute",top:0,left:0,height:"100%",width:"100%",overflow:"hidden",pointerEvents:"none",zIndex:-1},t=function(t){var r=t.onResize,u=e.useRef();return function(n,t){var r=function(){return n.current&&n.current.contentDocument&&n.current.contentDocument.defaultView};function u(){t();var e=r();e&&e.addEventListener("resize",t)}e.useEffect((function(){return r()?u():n.current&&n.current.addEventListener&&n.current.addEventListener("load",u),function(){var e=r();e&&"function"==typeof e.removeEventListener&&e.removeEventListener("resize",t)}}),[])}(u,(function(){return r(u)})),e.createElement("iframe",{style:n,src:"about:blank",ref:u,"aria-hidden":!0,tabIndex:-1,frameBorder:0})},r=function(e){return{width:null!=e?e.offsetWidth:null,height:null!=e?e.offsetHeight:null}};module.exports=function(n){void 0===n&&(n=r);var u=e.useState(n(null)),o=u[0],i=u[1],c=e.useCallback((function(e){return i(n(e.current))}),[n]);return[e.useMemo((function(){return e.createElement(t,{onResize:c})}),[c]),o]}; 13580 13581 13582 /***/ }), 13583 13584 /***/ 5080: 13585 /***/ (function(__unused_webpack_module, exports) { 13586 13587 "use strict"; 13588 13589 13590 Object.defineProperty(exports, "__esModule", ({ 13591 value: true 13592 })); 13593 var CHANNEL = exports.CHANNEL = '__direction__'; 13594 13595 var DIRECTIONS = exports.DIRECTIONS = { 13596 LTR: 'ltr', 13597 RTL: 'rtl' 13598 }; 13599 13600 /***/ }), 13601 13602 /***/ 6640: 13603 /***/ (function(__unused_webpack_module, exports, __webpack_require__) { 13604 13605 "use strict"; 13606 13607 13608 Object.defineProperty(exports, "__esModule", ({ 13609 value: true 13610 })); 13611 13612 var _propTypes = __webpack_require__(2652); 13613 13614 var _propTypes2 = _interopRequireDefault(_propTypes); 13615 13616 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } 13617 13618 exports["default"] = _propTypes2['default'].shape({ 13619 getState: _propTypes2['default'].func, 13620 setState: _propTypes2['default'].func, 13621 subscribe: _propTypes2['default'].func 13622 }); 13623 13624 /***/ }), 13625 13626 /***/ 3688: 13627 /***/ (function(__unused_webpack_module, exports, __webpack_require__) { 13628 13629 var __webpack_unused_export__; 13630 __webpack_unused_export__ = ({ 13631 value: true 13632 }); 13633 13634 var _arrayPrototype = __webpack_require__(116); 13635 13636 var _arrayPrototype2 = _interopRequireDefault(_arrayPrototype); 13637 13638 var _globalCache = __webpack_require__(5371); 13639 13640 var _globalCache2 = _interopRequireDefault(_globalCache); 13641 13642 var _constants = __webpack_require__(6930); 13643 13644 var _getClassName = __webpack_require__(1689); 13645 13646 var _getClassName2 = _interopRequireDefault(_getClassName); 13647 13648 var _separateStyles2 = __webpack_require__(1881); 13649 13650 var _separateStyles3 = _interopRequireDefault(_separateStyles2); 13651 13652 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } 13653 13654 /** 13655 * Function required as part of the react-with-styles interface. Parses the styles provided by 13656 * react-with-styles to produce class names based on the style name and optionally the namespace if 13657 * available. 13658 * 13659 * stylesObject {Object} The styles object passed to withStyles. 13660 * 13661 * Return an object mapping style names to class names. 13662 */ 13663 function create(stylesObject) { 13664 var stylesToClasses = {}; 13665 var styleNames = Object.keys(stylesObject); 13666 var sharedState = _globalCache2['default'].get(_constants.GLOBAL_CACHE_KEY) || {}; 13667 var _sharedState$namespac = sharedState.namespace, 13668 namespace = _sharedState$namespac === undefined ? '' : _sharedState$namespac; 13669 13670 styleNames.forEach(function (styleName) { 13671 var className = (0, _getClassName2['default'])(namespace, styleName); 13672 stylesToClasses[styleName] = className; 13673 }); 13674 return stylesToClasses; 13675 } 13676 13677 /** 13678 * Process styles to be consumed by a component. 13679 * 13680 * stylesArray {Array} Array of the following: values returned by create, plain JavaScript objects 13681 * representing inline styles, or arrays thereof. 13682 * 13683 * Return an object with optional className and style properties to be spread on a component. 13684 */ 13685 function resolve(stylesArray) { 13686 var flattenedStyles = (0, _arrayPrototype2['default'])(stylesArray, Infinity); 13687 13688 var _separateStyles = (0, _separateStyles3['default'])(flattenedStyles), 13689 classNames = _separateStyles.classNames, 13690 hasInlineStyles = _separateStyles.hasInlineStyles, 13691 inlineStyles = _separateStyles.inlineStyles; 13692 13693 var specificClassNames = classNames.map(function (name, index) { 13694 return String(name) + ' ' + String(name) + '_' + String(index + 1); 13695 }); 13696 var className = specificClassNames.join(' '); 13697 13698 var result = { className: className }; 13699 if (hasInlineStyles) result.style = inlineStyles; 13700 return result; 13701 } 13702 13703 exports["default"] = { create: create, resolve: resolve }; 13704 13705 /***/ }), 13706 13707 /***/ 6930: 13708 /***/ (function(__unused_webpack_module, exports) { 13709 13710 Object.defineProperty(exports, "__esModule", ({ 13711 value: true 13712 })); 13713 var GLOBAL_CACHE_KEY = 'reactWithStylesInterfaceCSS'; 13714 var MAX_SPECIFICITY = 20; 13715 13716 exports.GLOBAL_CACHE_KEY = GLOBAL_CACHE_KEY; 13717 exports.MAX_SPECIFICITY = MAX_SPECIFICITY; 13718 13719 /***/ }), 13720 13721 /***/ 1689: 13722 /***/ (function(__unused_webpack_module, exports) { 13723 13724 Object.defineProperty(exports, "__esModule", ({ 13725 value: true 13726 })); 13727 exports["default"] = getClassName; 13728 /** 13729 * Construct a class name. 13730 * 13731 * namespace {String} Used to construct unique class names. 13732 * styleName {String} Name identifying the specific style. 13733 * 13734 * Return the class name. 13735 */ 13736 function getClassName(namespace, styleName) { 13737 var namespaceSegment = namespace.length > 0 ? String(namespace) + '__' : ''; 13738 return '' + namespaceSegment + String(styleName); 13739 } 13740 13741 /***/ }), 13742 13743 /***/ 1881: 13744 /***/ (function(__unused_webpack_module, exports) { 13745 13746 Object.defineProperty(exports, "__esModule", ({ 13747 value: true 13748 })); 13749 // This function takes an array of styles and separates them into styles that 13750 // are handled by Aphrodite and inline styles. 13751 function separateStyles(stylesArray) { 13752 var classNames = []; 13753 13754 // Since determining if an Object is empty requires collecting all of its 13755 // keys, and we want the best performance in this code because we are in the 13756 // render path, we are going to do a little bookkeeping ourselves. 13757 var hasInlineStyles = false; 13758 var inlineStyles = {}; 13759 13760 // This is run on potentially every node in the tree when rendering, where 13761 // performance is critical. Normally we would prefer using `forEach`, but 13762 // old-fashioned for loops are faster so that's what we have chosen here. 13763 for (var i = 0; i < stylesArray.length; i++) { 13764 // eslint-disable-line no-plusplus 13765 var style = stylesArray[i]; 13766 13767 // If this style is falsy, we just want to disregard it. This allows for 13768 // syntax like: 13769 // 13770 // css(isFoo && styles.foo) 13771 if (style) { 13772 if (typeof style === 'string') { 13773 classNames.push(style); 13774 } else { 13775 Object.assign(inlineStyles, style); 13776 hasInlineStyles = true; 13777 } 13778 } 13779 } 13780 13781 return { 13782 classNames: classNames, 13783 hasInlineStyles: hasInlineStyles, 13784 inlineStyles: inlineStyles 13785 }; 13786 } 13787 13788 exports["default"] = separateStyles; 13789 13790 /***/ }), 13791 13792 /***/ 5553: 13793 /***/ (function(module, __unused_webpack_exports, __webpack_require__) { 13794 13795 // eslint-disable-next-line import/no-unresolved 13796 module.exports = __webpack_require__(3688)["default"]; 13797 13798 13799 /***/ }), 13800 13801 /***/ 9349: 13802 /***/ (function(__unused_webpack_module, exports) { 13803 13804 "use strict"; 13805 13806 13807 Object.defineProperty(exports, "__esModule", ({ 13808 value: true 13809 })); 13810 var styleInterface = void 0; 13811 var styleTheme = void 0; 13812 13813 var START_MARK = 'react-with-styles.resolve.start'; 13814 var END_MARK = 'react-with-styles.resolve.end'; 13815 var MEASURE_MARK = '\uD83D\uDC69\u200D\uD83C\uDFA8 [resolve]'; 13816 13817 function registerTheme(theme) { 13818 styleTheme = theme; 13819 } 13820 13821 function registerInterface(interfaceToRegister) { 13822 styleInterface = interfaceToRegister; 13823 } 13824 13825 function create(makeFromTheme, createWithDirection) { 13826 var styles = createWithDirection(makeFromTheme(styleTheme)); 13827 return function () { 13828 return styles; 13829 }; 13830 } 13831 13832 function createLTR(makeFromTheme) { 13833 return create(makeFromTheme, styleInterface.createLTR || styleInterface.create); 13834 } 13835 13836 function createRTL(makeFromTheme) { 13837 return create(makeFromTheme, styleInterface.createRTL || styleInterface.create); 13838 } 13839 13840 function get() { 13841 return styleTheme; 13842 } 13843 13844 function resolve() { 13845 if (false) {} 13846 13847 for (var _len = arguments.length, styles = Array(_len), _key = 0; _key < _len; _key++) { 13848 styles[_key] = arguments[_key]; 13849 } 13850 13851 var result = styleInterface.resolve(styles); 13852 13853 if (false) {} 13854 13855 return result; 13856 } 13857 13858 function resolveLTR() { 13859 for (var _len2 = arguments.length, styles = Array(_len2), _key2 = 0; _key2 < _len2; _key2++) { 13860 styles[_key2] = arguments[_key2]; 13861 } 13862 13863 if (styleInterface.resolveLTR) { 13864 return styleInterface.resolveLTR(styles); 13865 } 13866 13867 return resolve(styles); 13868 } 13869 13870 function resolveRTL() { 13871 for (var _len3 = arguments.length, styles = Array(_len3), _key3 = 0; _key3 < _len3; _key3++) { 13872 styles[_key3] = arguments[_key3]; 13873 } 13874 13875 if (styleInterface.resolveRTL) { 13876 return styleInterface.resolveRTL(styles); 13877 } 13878 13879 return resolve(styles); 13880 } 13881 13882 function flush() { 13883 if (styleInterface.flush) { 13884 styleInterface.flush(); 13885 } 13886 } 13887 13888 exports["default"] = { 13889 registerTheme: registerTheme, 13890 registerInterface: registerInterface, 13891 create: createLTR, 13892 createLTR: createLTR, 13893 createRTL: createRTL, 13894 get: get, 13895 resolve: resolveLTR, 13896 resolveLTR: resolveLTR, 13897 resolveRTL: resolveRTL, 13898 flush: flush 13899 }; 13900 13901 /***/ }), 13902 13903 /***/ 3576: 13904 /***/ (function(__unused_webpack_module, exports, __webpack_require__) { 13905 13906 "use strict"; 13907 13908 13909 Object.defineProperty(exports, "__esModule", ({ 13910 value: true 13911 })); 13912 exports.withStylesPropTypes = exports.css = undefined; 13913 13914 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; 13915 13916 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); 13917 13918 exports.withStyles = withStyles; 13919 13920 var _object = __webpack_require__(4011); 13921 13922 var _object2 = _interopRequireDefault(_object); 13923 13924 var _react = __webpack_require__(9196); 13925 13926 var _react2 = _interopRequireDefault(_react); 13927 13928 var _propTypes = __webpack_require__(2652); 13929 13930 var _propTypes2 = _interopRequireDefault(_propTypes); 13931 13932 var _hoistNonReactStatics = __webpack_require__(1281); 13933 13934 var _hoistNonReactStatics2 = _interopRequireDefault(_hoistNonReactStatics); 13935 13936 var _constants = __webpack_require__(5080); 13937 13938 var _brcast = __webpack_require__(6640); 13939 13940 var _brcast2 = _interopRequireDefault(_brcast); 13941 13942 var _ThemedStyleSheet = __webpack_require__(9349); 13943 13944 var _ThemedStyleSheet2 = _interopRequireDefault(_ThemedStyleSheet); 13945 13946 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } 13947 13948 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } 13949 13950 function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } 13951 13952 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } 13953 13954 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } /* eslint react/forbid-foreign-prop-types: off */ 13955 13956 // Add some named exports to assist in upgrading and for convenience 13957 var css = exports.css = _ThemedStyleSheet2['default'].resolveLTR; 13958 var withStylesPropTypes = exports.withStylesPropTypes = { 13959 styles: _propTypes2['default'].object.isRequired, // eslint-disable-line react/forbid-prop-types 13960 theme: _propTypes2['default'].object.isRequired, // eslint-disable-line react/forbid-prop-types 13961 css: _propTypes2['default'].func.isRequired 13962 }; 13963 13964 var EMPTY_STYLES = {}; 13965 var EMPTY_STYLES_FN = function EMPTY_STYLES_FN() { 13966 return EMPTY_STYLES; 13967 }; 13968 13969 var START_MARK = 'react-with-styles.createStyles.start'; 13970 var END_MARK = 'react-with-styles.createStyles.end'; 13971 13972 function baseClass(pureComponent) { 13973 if (pureComponent) { 13974 if (!_react2['default'].PureComponent) { 13975 throw new ReferenceError('withStyles() pureComponent option requires React 15.3.0 or later'); 13976 } 13977 13978 return _react2['default'].PureComponent; 13979 } 13980 13981 return _react2['default'].Component; 13982 } 13983 13984 var contextTypes = _defineProperty({}, _constants.CHANNEL, _brcast2['default']); 13985 13986 var defaultDirection = _constants.DIRECTIONS.LTR; 13987 13988 function withStyles(styleFn) { 13989 var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}, 13990 _ref$stylesPropName = _ref.stylesPropName, 13991 stylesPropName = _ref$stylesPropName === undefined ? 'styles' : _ref$stylesPropName, 13992 _ref$themePropName = _ref.themePropName, 13993 themePropName = _ref$themePropName === undefined ? 'theme' : _ref$themePropName, 13994 _ref$cssPropName = _ref.cssPropName, 13995 cssPropName = _ref$cssPropName === undefined ? 'css' : _ref$cssPropName, 13996 _ref$flushBefore = _ref.flushBefore, 13997 flushBefore = _ref$flushBefore === undefined ? false : _ref$flushBefore, 13998 _ref$pureComponent = _ref.pureComponent, 13999 pureComponent = _ref$pureComponent === undefined ? false : _ref$pureComponent; 14000 14001 var styleDefLTR = void 0; 14002 var styleDefRTL = void 0; 14003 var currentThemeLTR = void 0; 14004 var currentThemeRTL = void 0; 14005 var BaseClass = baseClass(pureComponent); 14006 14007 function getResolveMethod(direction) { 14008 return direction === _constants.DIRECTIONS.LTR ? _ThemedStyleSheet2['default'].resolveLTR : _ThemedStyleSheet2['default'].resolveRTL; 14009 } 14010 14011 function getCurrentTheme(direction) { 14012 return direction === _constants.DIRECTIONS.LTR ? currentThemeLTR : currentThemeRTL; 14013 } 14014 14015 function getStyleDef(direction, wrappedComponentName) { 14016 var currentTheme = getCurrentTheme(direction); 14017 var styleDef = direction === _constants.DIRECTIONS.LTR ? styleDefLTR : styleDefRTL; 14018 14019 var registeredTheme = _ThemedStyleSheet2['default'].get(); 14020 14021 // Return the existing styles if they've already been defined 14022 // and if the theme used to create them corresponds to the theme 14023 // registered with ThemedStyleSheet 14024 if (styleDef && currentTheme === registeredTheme) { 14025 return styleDef; 14026 } 14027 14028 if (false) {} 14029 14030 var isRTL = direction === _constants.DIRECTIONS.RTL; 14031 14032 if (isRTL) { 14033 styleDefRTL = styleFn ? _ThemedStyleSheet2['default'].createRTL(styleFn) : EMPTY_STYLES_FN; 14034 14035 currentThemeRTL = registeredTheme; 14036 styleDef = styleDefRTL; 14037 } else { 14038 styleDefLTR = styleFn ? _ThemedStyleSheet2['default'].createLTR(styleFn) : EMPTY_STYLES_FN; 14039 14040 currentThemeLTR = registeredTheme; 14041 styleDef = styleDefLTR; 14042 } 14043 14044 if (false) { var measureName; } 14045 14046 return styleDef; 14047 } 14048 14049 function getState(direction, wrappedComponentName) { 14050 return { 14051 resolveMethod: getResolveMethod(direction), 14052 styleDef: getStyleDef(direction, wrappedComponentName) 14053 }; 14054 } 14055 14056 return function () { 14057 function withStylesHOC(WrappedComponent) { 14058 var wrappedComponentName = WrappedComponent.displayName || WrappedComponent.name || 'Component'; 14059 14060 // NOTE: Use a class here so components are ref-able if need be: 14061 // eslint-disable-next-line react/prefer-stateless-function 14062 14063 var WithStyles = function (_BaseClass) { 14064 _inherits(WithStyles, _BaseClass); 14065 14066 function WithStyles(props, context) { 14067 _classCallCheck(this, WithStyles); 14068 14069 var _this = _possibleConstructorReturn(this, (WithStyles.__proto__ || Object.getPrototypeOf(WithStyles)).call(this, props, context)); 14070 14071 var direction = _this.context[_constants.CHANNEL] ? _this.context[_constants.CHANNEL].getState() : defaultDirection; 14072 14073 _this.state = getState(direction, wrappedComponentName); 14074 return _this; 14075 } 14076 14077 _createClass(WithStyles, [{ 14078 key: 'componentDidMount', 14079 value: function () { 14080 function componentDidMount() { 14081 var _this2 = this; 14082 14083 if (this.context[_constants.CHANNEL]) { 14084 // subscribe to future direction changes 14085 this.channelUnsubscribe = this.context[_constants.CHANNEL].subscribe(function (direction) { 14086 _this2.setState(getState(direction, wrappedComponentName)); 14087 }); 14088 } 14089 } 14090 14091 return componentDidMount; 14092 }() 14093 }, { 14094 key: 'componentWillUnmount', 14095 value: function () { 14096 function componentWillUnmount() { 14097 if (this.channelUnsubscribe) { 14098 this.channelUnsubscribe(); 14099 } 14100 } 14101 14102 return componentWillUnmount; 14103 }() 14104 }, { 14105 key: 'render', 14106 value: function () { 14107 function render() { 14108 var _ref2; 14109 14110 // As some components will depend on previous styles in 14111 // the component tree, we provide the option of flushing the 14112 // buffered styles (i.e. to a style tag) **before** the rendering 14113 // cycle begins. 14114 // 14115 // The interfaces provide the optional "flush" method which 14116 // is run in turn by ThemedStyleSheet.flush. 14117 if (flushBefore) { 14118 _ThemedStyleSheet2['default'].flush(); 14119 } 14120 14121 var _state = this.state, 14122 resolveMethod = _state.resolveMethod, 14123 styleDef = _state.styleDef; 14124 14125 14126 return _react2['default'].createElement(WrappedComponent, _extends({}, this.props, (_ref2 = {}, _defineProperty(_ref2, themePropName, _ThemedStyleSheet2['default'].get()), _defineProperty(_ref2, stylesPropName, styleDef()), _defineProperty(_ref2, cssPropName, resolveMethod), _ref2))); 14127 } 14128 14129 return render; 14130 }() 14131 }]); 14132 14133 return WithStyles; 14134 }(BaseClass); 14135 14136 WithStyles.WrappedComponent = WrappedComponent; 14137 WithStyles.displayName = 'withStyles(' + String(wrappedComponentName) + ')'; 14138 WithStyles.contextTypes = contextTypes; 14139 if (WrappedComponent.propTypes) { 14140 WithStyles.propTypes = (0, _object2['default'])({}, WrappedComponent.propTypes); 14141 delete WithStyles.propTypes[stylesPropName]; 14142 delete WithStyles.propTypes[themePropName]; 14143 delete WithStyles.propTypes[cssPropName]; 14144 } 14145 if (WrappedComponent.defaultProps) { 14146 WithStyles.defaultProps = (0, _object2['default'])({}, WrappedComponent.defaultProps); 14147 } 14148 14149 return (0, _hoistNonReactStatics2['default'])(WithStyles, WrappedComponent); 14150 } 14151 14152 return withStylesHOC; 14153 }(); 14154 } 14155 14156 /***/ }), 14157 14158 /***/ 9196: 14159 /***/ (function(module) { 14160 14161 "use strict"; 14162 module.exports = window["React"]; 14163 14164 /***/ }), 14165 14166 /***/ 6292: 14167 /***/ (function(module) { 14168 14169 "use strict"; 14170 module.exports = window["moment"]; 14171 14172 /***/ }), 14173 14174 /***/ 4080: 14175 /***/ (function() { 14176 14177 /* (ignored) */ 14178 14179 /***/ }), 14180 14181 /***/ 7472: 14182 /***/ (function(module, __unused_webpack_exports, __webpack_require__) { 14183 14184 "use strict"; 14185 14186 14187 var GetIntrinsic = __webpack_require__(4219); 14188 14189 var $Array = GetIntrinsic('%Array%'); 14190 14191 // eslint-disable-next-line global-require 14192 var toStr = !$Array.isArray && __webpack_require__(9630)('Object.prototype.toString'); 14193 14194 // https://ecma-international.org/ecma-262/6.0/#sec-isarray 14195 14196 module.exports = $Array.isArray || function IsArray(argument) { 14197 return toStr(argument) === '[object Array]'; 14198 }; 14199 14200 14201 /***/ }), 14202 14203 /***/ 3665: 14204 /***/ (function(module, __unused_webpack_exports, __webpack_require__) { 14205 14206 "use strict"; 14207 14208 14209 var GetIntrinsic = __webpack_require__(4219); 14210 14211 var $ArrayPrototype = GetIntrinsic('%Array.prototype%'); 14212 var $RangeError = GetIntrinsic('%RangeError%'); 14213 var $SyntaxError = GetIntrinsic('%SyntaxError%'); 14214 var $TypeError = GetIntrinsic('%TypeError%'); 14215 14216 var IsIntegralNumber = __webpack_require__(485); 14217 14218 var MAX_ARRAY_LENGTH = Math.pow(2, 32) - 1; 14219 14220 var $setProto = GetIntrinsic('%Object.setPrototypeOf%', true) || ( 14221 // eslint-disable-next-line no-proto, no-negated-condition 14222 [].__proto__ !== $ArrayPrototype 14223 ? null 14224 : function (O, proto) { 14225 O.__proto__ = proto; // eslint-disable-line no-proto, no-param-reassign 14226 return O; 14227 } 14228 ); 14229 14230 // https://www.ecma-international.org/ecma-262/12.0/#sec-arraycreate 14231 14232 module.exports = function ArrayCreate(length) { 14233 if (!IsIntegralNumber(length) || length < 0) { 14234 throw new $TypeError('Assertion failed: `length` must be an integer Number >= 0'); 14235 } 14236 if (length > MAX_ARRAY_LENGTH) { 14237 throw new $RangeError('length is greater than (2**32 - 1)'); 14238 } 14239 var proto = arguments.length > 1 ? arguments[1] : $ArrayPrototype; 14240 var A = []; // steps 3, 5 14241 if (proto !== $ArrayPrototype) { // step 4 14242 if (!$setProto) { 14243 throw new $SyntaxError('ArrayCreate: a `proto` argument that is not `Array.prototype` is not supported in an environment that does not support setting the [[Prototype]]'); 14244 } 14245 $setProto(A, proto); 14246 } 14247 if (length !== 0) { // bypasses the need for step 6 14248 A.length = length; 14249 } 14250 /* step 6, the above as a shortcut for the below 14251 OrdinaryDefineOwnProperty(A, 'length', { 14252 '[[Configurable]]': false, 14253 '[[Enumerable]]': false, 14254 '[[Value]]': length, 14255 '[[Writable]]': true 14256 }); 14257 */ 14258 return A; 14259 }; 14260 14261 14262 /***/ }), 14263 14264 /***/ 1539: 14265 /***/ (function(module, __unused_webpack_exports, __webpack_require__) { 14266 14267 "use strict"; 14268 14269 14270 var GetIntrinsic = __webpack_require__(4219); 14271 14272 var $species = GetIntrinsic('%Symbol.species%', true); 14273 var $TypeError = GetIntrinsic('%TypeError%'); 14274 14275 var ArrayCreate = __webpack_require__(3665); 14276 var Get = __webpack_require__(6448); 14277 var IsArray = __webpack_require__(5971); 14278 var IsConstructor = __webpack_require__(4065); 14279 var IsIntegralNumber = __webpack_require__(485); 14280 var Type = __webpack_require__(9747); 14281 14282 // https://ecma-international.org/ecma-262/12.0/#sec-arrayspeciescreate 14283 14284 module.exports = function ArraySpeciesCreate(originalArray, length) { 14285 if (!IsIntegralNumber(length) || length < 0) { 14286 throw new $TypeError('Assertion failed: length must be an integer >= 0'); 14287 } 14288 14289 var isArray = IsArray(originalArray); 14290 if (!isArray) { 14291 return ArrayCreate(length); 14292 } 14293 14294 var C = Get(originalArray, 'constructor'); 14295 // TODO: figure out how to make a cross-realm normal Array, a same-realm Array 14296 // if (IsConstructor(C)) { 14297 // if C is another realm's Array, C = undefined 14298 // Object.getPrototypeOf(Object.getPrototypeOf(Object.getPrototypeOf(Array))) === null ? 14299 // } 14300 if ($species && Type(C) === 'Object') { 14301 C = Get(C, $species); 14302 if (C === null) { 14303 C = void 0; 14304 } 14305 } 14306 14307 if (typeof C === 'undefined') { 14308 return ArrayCreate(length); 14309 } 14310 if (!IsConstructor(C)) { 14311 throw new $TypeError('C must be a constructor'); 14312 } 14313 return new C(length); // Construct(C, length); 14314 }; 14315 14316 14317 14318 /***/ }), 14319 14320 /***/ 8323: 14321 /***/ (function(module, __unused_webpack_exports, __webpack_require__) { 14322 14323 "use strict"; 14324 14325 14326 var GetIntrinsic = __webpack_require__(4219); 14327 var callBound = __webpack_require__(9630); 14328 14329 var $TypeError = GetIntrinsic('%TypeError%'); 14330 14331 var IsArray = __webpack_require__(5971); 14332 14333 var $apply = GetIntrinsic('%Reflect.apply%', true) || callBound('%Function.prototype.apply%'); 14334 14335 // https://ecma-international.org/ecma-262/6.0/#sec-call 14336 14337 module.exports = function Call(F, V) { 14338 var argumentsList = arguments.length > 2 ? arguments[2] : []; 14339 if (!IsArray(argumentsList)) { 14340 throw new $TypeError('Assertion failed: optional `argumentsList`, if provided, must be a List'); 14341 } 14342 return $apply(F, V, argumentsList); 14343 }; 14344 14345 14346 /***/ }), 14347 14348 /***/ 5597: 14349 /***/ (function(module, __unused_webpack_exports, __webpack_require__) { 14350 14351 "use strict"; 14352 14353 14354 var GetIntrinsic = __webpack_require__(4219); 14355 14356 var $TypeError = GetIntrinsic('%TypeError%'); 14357 14358 var DefineOwnProperty = __webpack_require__(1327); 14359 14360 var FromPropertyDescriptor = __webpack_require__(8487); 14361 var OrdinaryGetOwnProperty = __webpack_require__(6403); 14362 var IsDataDescriptor = __webpack_require__(1392); 14363 var IsExtensible = __webpack_require__(3428); 14364 var IsPropertyKey = __webpack_require__(3290); 14365 var SameValue = __webpack_require__(9836); 14366 var Type = __webpack_require__(9747); 14367 14368 // https://ecma-international.org/ecma-262/6.0/#sec-createdataproperty 14369 14370 module.exports = function CreateDataProperty(O, P, V) { 14371 if (Type(O) !== 'Object') { 14372 throw new $TypeError('Assertion failed: Type(O) is not Object'); 14373 } 14374 if (!IsPropertyKey(P)) { 14375 throw new $TypeError('Assertion failed: IsPropertyKey(P) is not true'); 14376 } 14377 var oldDesc = OrdinaryGetOwnProperty(O, P); 14378 var extensible = !oldDesc || IsExtensible(O); 14379 var nonConfigurable = oldDesc && !oldDesc['[[Configurable]]']; 14380 if (nonConfigurable || !extensible) { 14381 return false; 14382 } 14383 return DefineOwnProperty( 14384 IsDataDescriptor, 14385 SameValue, 14386 FromPropertyDescriptor, 14387 O, 14388 P, 14389 { 14390 '[[Configurable]]': true, 14391 '[[Enumerable]]': true, 14392 '[[Value]]': V, 14393 '[[Writable]]': true 14394 } 14395 ); 14396 }; 14397 14398 14399 /***/ }), 14400 14401 /***/ 3323: 14402 /***/ (function(module, __unused_webpack_exports, __webpack_require__) { 14403 14404 "use strict"; 14405 14406 14407 var GetIntrinsic = __webpack_require__(4219); 14408 14409 var $TypeError = GetIntrinsic('%TypeError%'); 14410 14411 var CreateDataProperty = __webpack_require__(5597); 14412 var IsPropertyKey = __webpack_require__(3290); 14413 var Type = __webpack_require__(9747); 14414 14415 // // https://ecma-international.org/ecma-262/6.0/#sec-createdatapropertyorthrow 14416 14417 module.exports = function CreateDataPropertyOrThrow(O, P, V) { 14418 if (Type(O) !== 'Object') { 14419 throw new $TypeError('Assertion failed: Type(O) is not Object'); 14420 } 14421 if (!IsPropertyKey(P)) { 14422 throw new $TypeError('Assertion failed: IsPropertyKey(P) is not true'); 14423 } 14424 var success = CreateDataProperty(O, P, V); 14425 if (!success) { 14426 throw new $TypeError('unable to create data property'); 14427 } 14428 return success; 14429 }; 14430 14431 14432 /***/ }), 14433 14434 /***/ 6356: 14435 /***/ (function(module, __unused_webpack_exports, __webpack_require__) { 14436 14437 "use strict"; 14438 14439 14440 var GetIntrinsic = __webpack_require__(4219); 14441 14442 var $TypeError = GetIntrinsic('%TypeError%'); 14443 14444 var isPropertyDescriptor = __webpack_require__(8682); 14445 var DefineOwnProperty = __webpack_require__(1327); 14446 14447 var FromPropertyDescriptor = __webpack_require__(8487); 14448 var IsAccessorDescriptor = __webpack_require__(7857); 14449 var IsDataDescriptor = __webpack_require__(1392); 14450 var IsPropertyKey = __webpack_require__(3290); 14451 var SameValue = __webpack_require__(9836); 14452 var ToPropertyDescriptor = __webpack_require__(2402); 14453 var Type = __webpack_require__(9747); 14454 14455 // https://ecma-international.org/ecma-262/6.0/#sec-definepropertyorthrow 14456 14457 module.exports = function DefinePropertyOrThrow(O, P, desc) { 14458 if (Type(O) !== 'Object') { 14459 throw new $TypeError('Assertion failed: Type(O) is not Object'); 14460 } 14461 14462 if (!IsPropertyKey(P)) { 14463 throw new $TypeError('Assertion failed: IsPropertyKey(P) is not true'); 14464 } 14465 14466 var Desc = isPropertyDescriptor({ 14467 Type: Type, 14468 IsDataDescriptor: IsDataDescriptor, 14469 IsAccessorDescriptor: IsAccessorDescriptor 14470 }, desc) ? desc : ToPropertyDescriptor(desc); 14471 if (!isPropertyDescriptor({ 14472 Type: Type, 14473 IsDataDescriptor: IsDataDescriptor, 14474 IsAccessorDescriptor: IsAccessorDescriptor 14475 }, Desc)) { 14476 throw new $TypeError('Assertion failed: Desc is not a valid Property Descriptor'); 14477 } 14478 14479 return DefineOwnProperty( 14480 IsDataDescriptor, 14481 SameValue, 14482 FromPropertyDescriptor, 14483 O, 14484 P, 14485 Desc 14486 ); 14487 }; 14488 14489 14490 /***/ }), 14491 14492 /***/ 6739: 14493 /***/ (function(module, __unused_webpack_exports, __webpack_require__) { 14494 14495 "use strict"; 14496 14497 14498 var GetIntrinsic = __webpack_require__(4219); 14499 14500 var $TypeError = GetIntrinsic('%TypeError%'); 14501 14502 var MAX_SAFE_INTEGER = __webpack_require__(8540); 14503 14504 var Call = __webpack_require__(8323); 14505 var CreateDataPropertyOrThrow = __webpack_require__(3323); 14506 var Get = __webpack_require__(6448); 14507 var HasProperty = __webpack_require__(3059); 14508 var IsArray = __webpack_require__(5971); 14509 var LengthOfArrayLike = __webpack_require__(2151); 14510 var ToString = __webpack_require__(6888); 14511 14512 // https://262.ecma-international.org/11.0/#sec-flattenintoarray 14513 14514 // eslint-disable-next-line max-params 14515 module.exports = function FlattenIntoArray(target, source, sourceLen, start, depth) { 14516 var mapperFunction; 14517 if (arguments.length > 5) { 14518 mapperFunction = arguments[5]; 14519 } 14520 14521 var targetIndex = start; 14522 var sourceIndex = 0; 14523 while (sourceIndex < sourceLen) { 14524 var P = ToString(sourceIndex); 14525 var exists = HasProperty(source, P); 14526 if (exists === true) { 14527 var element = Get(source, P); 14528 if (typeof mapperFunction !== 'undefined') { 14529 if (arguments.length <= 6) { 14530 throw new $TypeError('Assertion failed: thisArg is required when mapperFunction is provided'); 14531 } 14532 element = Call(mapperFunction, arguments[6], [element, sourceIndex, source]); 14533 } 14534 var shouldFlatten = false; 14535 if (depth > 0) { 14536 shouldFlatten = IsArray(element); 14537 } 14538 if (shouldFlatten) { 14539 var elementLen = LengthOfArrayLike(element); 14540 targetIndex = FlattenIntoArray(target, element, elementLen, targetIndex, depth - 1); 14541 } else { 14542 if (targetIndex >= MAX_SAFE_INTEGER) { 14543 throw new $TypeError('index too large'); 14544 } 14545 CreateDataPropertyOrThrow(target, ToString(targetIndex), element); 14546 targetIndex += 1; 14547 } 14548 } 14549 sourceIndex += 1; 14550 } 14551 14552 return targetIndex; 14553 }; 14554 14555 14556 /***/ }), 14557 14558 /***/ 8487: 14559 /***/ (function(module, __unused_webpack_exports, __webpack_require__) { 14560 14561 "use strict"; 14562 14563 14564 var assertRecord = __webpack_require__(5114); 14565 14566 var Type = __webpack_require__(9747); 14567 14568 // https://ecma-international.org/ecma-262/6.0/#sec-frompropertydescriptor 14569 14570 module.exports = function FromPropertyDescriptor(Desc) { 14571 if (typeof Desc === 'undefined') { 14572 return Desc; 14573 } 14574 14575 assertRecord(Type, 'Property Descriptor', 'Desc', Desc); 14576 14577 var obj = {}; 14578 if ('[[Value]]' in Desc) { 14579 obj.value = Desc['[[Value]]']; 14580 } 14581 if ('[[Writable]]' in Desc) { 14582 obj.writable = Desc['[[Writable]]']; 14583 } 14584 if ('[[Get]]' in Desc) { 14585 obj.get = Desc['[[Get]]']; 14586 } 14587 if ('[[Set]]' in Desc) { 14588 obj.set = Desc['[[Set]]']; 14589 } 14590 if ('[[Enumerable]]' in Desc) { 14591 obj.enumerable = Desc['[[Enumerable]]']; 14592 } 14593 if ('[[Configurable]]' in Desc) { 14594 obj.configurable = Desc['[[Configurable]]']; 14595 } 14596 return obj; 14597 }; 14598 14599 14600 /***/ }), 14601 14602 /***/ 6448: 14603 /***/ (function(module, __unused_webpack_exports, __webpack_require__) { 14604 14605 "use strict"; 14606 14607 14608 var GetIntrinsic = __webpack_require__(4219); 14609 14610 var $TypeError = GetIntrinsic('%TypeError%'); 14611 14612 var inspect = __webpack_require__(3205); 14613 14614 var IsPropertyKey = __webpack_require__(3290); 14615 var Type = __webpack_require__(9747); 14616 14617 // https://ecma-international.org/ecma-262/6.0/#sec-get-o-p 14618 14619 module.exports = function Get(O, P) { 14620 // 7.3.1.1 14621 if (Type(O) !== 'Object') { 14622 throw new $TypeError('Assertion failed: Type(O) is not Object'); 14623 } 14624 // 7.3.1.2 14625 if (!IsPropertyKey(P)) { 14626 throw new $TypeError('Assertion failed: IsPropertyKey(P) is not true, got ' + inspect(P)); 14627 } 14628 // 7.3.1.3 14629 return O[P]; 14630 }; 14631 14632 14633 /***/ }), 14634 14635 /***/ 3059: 14636 /***/ (function(module, __unused_webpack_exports, __webpack_require__) { 14637 14638 "use strict"; 14639 14640 14641 var GetIntrinsic = __webpack_require__(4219); 14642 14643 var $TypeError = GetIntrinsic('%TypeError%'); 14644 14645 var IsPropertyKey = __webpack_require__(3290); 14646 var Type = __webpack_require__(9747); 14647 14648 // https://ecma-international.org/ecma-262/6.0/#sec-hasproperty 14649 14650 module.exports = function HasProperty(O, P) { 14651 if (Type(O) !== 'Object') { 14652 throw new $TypeError('Assertion failed: `O` must be an Object'); 14653 } 14654 if (!IsPropertyKey(P)) { 14655 throw new $TypeError('Assertion failed: `P` must be a Property Key'); 14656 } 14657 return P in O; 14658 }; 14659 14660 14661 /***/ }), 14662 14663 /***/ 7857: 14664 /***/ (function(module, __unused_webpack_exports, __webpack_require__) { 14665 14666 "use strict"; 14667 14668 14669 var has = __webpack_require__(9284); 14670 14671 var assertRecord = __webpack_require__(5114); 14672 14673 var Type = __webpack_require__(9747); 14674 14675 // https://ecma-international.org/ecma-262/6.0/#sec-isaccessordescriptor 14676 14677 module.exports = function IsAccessorDescriptor(Desc) { 14678 if (typeof Desc === 'undefined') { 14679 return false; 14680 } 14681 14682 assertRecord(Type, 'Property Descriptor', 'Desc', Desc); 14683 14684 if (!has(Desc, '[[Get]]') && !has(Desc, '[[Set]]')) { 14685 return false; 14686 } 14687 14688 return true; 14689 }; 14690 14691 14692 /***/ }), 14693 14694 /***/ 5971: 14695 /***/ (function(module, __unused_webpack_exports, __webpack_require__) { 14696 14697 "use strict"; 14698 14699 14700 var GetIntrinsic = __webpack_require__(4219); 14701 14702 var $Array = GetIntrinsic('%Array%'); 14703 14704 // eslint-disable-next-line global-require 14705 var toStr = !$Array.isArray && __webpack_require__(9630)('Object.prototype.toString'); 14706 14707 // https://ecma-international.org/ecma-262/6.0/#sec-isarray 14708 14709 module.exports = $Array.isArray || function IsArray(argument) { 14710 return toStr(argument) === '[object Array]'; 14711 }; 14712 14713 14714 /***/ }), 14715 14716 /***/ 1089: 14717 /***/ (function(module, __unused_webpack_exports, __webpack_require__) { 14718 14719 "use strict"; 14720 14721 14722 // http://262.ecma-international.org/5.1/#sec-9.11 14723 14724 module.exports = __webpack_require__(4363); 14725 14726 14727 /***/ }), 14728 14729 /***/ 4065: 14730 /***/ (function(module, __unused_webpack_exports, __webpack_require__) { 14731 14732 "use strict"; 14733 14734 14735 var GetIntrinsic = __webpack_require__(137); 14736 14737 var $construct = GetIntrinsic('%Reflect.construct%', true); 14738 14739 var DefinePropertyOrThrow = __webpack_require__(6356); 14740 try { 14741 DefinePropertyOrThrow({}, '', { '[[Get]]': function () {} }); 14742 } catch (e) { 14743 // Accessor properties aren't supported 14744 DefinePropertyOrThrow = null; 14745 } 14746 14747 // https://ecma-international.org/ecma-262/6.0/#sec-isconstructor 14748 14749 if (DefinePropertyOrThrow && $construct) { 14750 var isConstructorMarker = {}; 14751 var badArrayLike = {}; 14752 DefinePropertyOrThrow(badArrayLike, 'length', { 14753 '[[Get]]': function () { 14754 throw isConstructorMarker; 14755 }, 14756 '[[Enumerable]]': true 14757 }); 14758 14759 module.exports = function IsConstructor(argument) { 14760 try { 14761 // `Reflect.construct` invokes `IsConstructor(target)` before `Get(args, 'length')`: 14762 $construct(argument, badArrayLike); 14763 } catch (err) { 14764 return err === isConstructorMarker; 14765 } 14766 }; 14767 } else { 14768 module.exports = function IsConstructor(argument) { 14769 // unfortunately there's no way to truly check this without try/catch `new argument` in old environments 14770 return typeof argument === 'function' && !!argument.prototype; 14771 }; 14772 } 14773 14774 14775 /***/ }), 14776 14777 /***/ 1392: 14778 /***/ (function(module, __unused_webpack_exports, __webpack_require__) { 14779 14780 "use strict"; 14781 14782 14783 var has = __webpack_require__(9284); 14784 14785 var assertRecord = __webpack_require__(5114); 14786 14787 var Type = __webpack_require__(9747); 14788 14789 // https://ecma-international.org/ecma-262/6.0/#sec-isdatadescriptor 14790 14791 module.exports = function IsDataDescriptor(Desc) { 14792 if (typeof Desc === 'undefined') { 14793 return false; 14794 } 14795 14796 assertRecord(Type, 'Property Descriptor', 'Desc', Desc); 14797 14798 if (!has(Desc, '[[Value]]') && !has(Desc, '[[Writable]]')) { 14799 return false; 14800 } 14801 14802 return true; 14803 }; 14804 14805 14806 /***/ }), 14807 14808 /***/ 3428: 14809 /***/ (function(module, __unused_webpack_exports, __webpack_require__) { 14810 14811 "use strict"; 14812 14813 14814 var GetIntrinsic = __webpack_require__(4219); 14815 14816 var $preventExtensions = GetIntrinsic('%Object.preventExtensions%', true); 14817 var $isExtensible = GetIntrinsic('%Object.isExtensible%', true); 14818 14819 var isPrimitive = __webpack_require__(5019); 14820 14821 // https://ecma-international.org/ecma-262/6.0/#sec-isextensible-o 14822 14823 module.exports = $preventExtensions 14824 ? function IsExtensible(obj) { 14825 return !isPrimitive(obj) && $isExtensible(obj); 14826 } 14827 : function IsExtensible(obj) { 14828 return !isPrimitive(obj); 14829 }; 14830 14831 14832 /***/ }), 14833 14834 /***/ 485: 14835 /***/ (function(module, __unused_webpack_exports, __webpack_require__) { 14836 14837 "use strict"; 14838 14839 14840 var abs = __webpack_require__(13); 14841 var floor = __webpack_require__(5127); 14842 var Type = __webpack_require__(9747); 14843 14844 var $isNaN = __webpack_require__(3234); 14845 var $isFinite = __webpack_require__(7061); 14846 14847 // https://tc39.es/ecma262/#sec-isintegralnumber 14848 14849 module.exports = function IsIntegralNumber(argument) { 14850 if (Type(argument) !== 'Number' || $isNaN(argument) || !$isFinite(argument)) { 14851 return false; 14852 } 14853 var absValue = abs(argument); 14854 return floor(absValue) === absValue; 14855 }; 14856 14857 14858 /***/ }), 14859 14860 /***/ 3290: 14861 /***/ (function(module) { 14862 14863 "use strict"; 14864 14865 14866 // https://ecma-international.org/ecma-262/6.0/#sec-ispropertykey 14867 14868 module.exports = function IsPropertyKey(argument) { 14869 return typeof argument === 'string' || typeof argument === 'symbol'; 14870 }; 14871 14872 14873 /***/ }), 14874 14875 /***/ 1275: 14876 /***/ (function(module, __unused_webpack_exports, __webpack_require__) { 14877 14878 "use strict"; 14879 14880 14881 var GetIntrinsic = __webpack_require__(4219); 14882 14883 var $match = GetIntrinsic('%Symbol.match%', true); 14884 14885 var hasRegExpMatcher = __webpack_require__(4221); 14886 14887 var ToBoolean = __webpack_require__(3704); 14888 14889 // https://ecma-international.org/ecma-262/6.0/#sec-isregexp 14890 14891 module.exports = function IsRegExp(argument) { 14892 if (!argument || typeof argument !== 'object') { 14893 return false; 14894 } 14895 if ($match) { 14896 var isRegExp = argument[$match]; 14897 if (typeof isRegExp !== 'undefined') { 14898 return ToBoolean(isRegExp); 14899 } 14900 } 14901 return hasRegExpMatcher(argument); 14902 }; 14903 14904 14905 /***/ }), 14906 14907 /***/ 2151: 14908 /***/ (function(module, __unused_webpack_exports, __webpack_require__) { 14909 14910 "use strict"; 14911 14912 14913 var GetIntrinsic = __webpack_require__(4219); 14914 14915 var $TypeError = GetIntrinsic('%TypeError%'); 14916 14917 var Get = __webpack_require__(6448); 14918 var ToLength = __webpack_require__(6840); 14919 var Type = __webpack_require__(9747); 14920 14921 // https://262.ecma-international.org/11.0/#sec-lengthofarraylike 14922 14923 module.exports = function LengthOfArrayLike(obj) { 14924 if (Type(obj) !== 'Object') { 14925 throw new $TypeError('Assertion failed: `obj` must be an Object'); 14926 } 14927 return ToLength(Get(obj, 'length')); 14928 }; 14929 14930 // TODO: use this all over 14931 14932 14933 /***/ }), 14934 14935 /***/ 6403: 14936 /***/ (function(module, __unused_webpack_exports, __webpack_require__) { 14937 14938 "use strict"; 14939 14940 14941 var GetIntrinsic = __webpack_require__(4219); 14942 14943 var $gOPD = __webpack_require__(5180); 14944 var $TypeError = GetIntrinsic('%TypeError%'); 14945 14946 var callBound = __webpack_require__(9630); 14947 14948 var $isEnumerable = callBound('Object.prototype.propertyIsEnumerable'); 14949 14950 var has = __webpack_require__(9284); 14951 14952 var IsArray = __webpack_require__(5971); 14953 var IsPropertyKey = __webpack_require__(3290); 14954 var IsRegExp = __webpack_require__(1275); 14955 var ToPropertyDescriptor = __webpack_require__(2402); 14956 var Type = __webpack_require__(9747); 14957 14958 // https://ecma-international.org/ecma-262/6.0/#sec-ordinarygetownproperty 14959 14960 module.exports = function OrdinaryGetOwnProperty(O, P) { 14961 if (Type(O) !== 'Object') { 14962 throw new $TypeError('Assertion failed: O must be an Object'); 14963 } 14964 if (!IsPropertyKey(P)) { 14965 throw new $TypeError('Assertion failed: P must be a Property Key'); 14966 } 14967 if (!has(O, P)) { 14968 return void 0; 14969 } 14970 if (!$gOPD) { 14971 // ES3 / IE 8 fallback 14972 var arrayLength = IsArray(O) && P === 'length'; 14973 var regexLastIndex = IsRegExp(O) && P === 'lastIndex'; 14974 return { 14975 '[[Configurable]]': !(arrayLength || regexLastIndex), 14976 '[[Enumerable]]': $isEnumerable(O, P), 14977 '[[Value]]': O[P], 14978 '[[Writable]]': true 14979 }; 14980 } 14981 return ToPropertyDescriptor($gOPD(O, P)); 14982 }; 14983 14984 14985 /***/ }), 14986 14987 /***/ 6953: 14988 /***/ (function(module, __unused_webpack_exports, __webpack_require__) { 14989 14990 "use strict"; 14991 14992 14993 module.exports = __webpack_require__(3031); 14994 14995 14996 /***/ }), 14997 14998 /***/ 9836: 14999 /***/ (function(module, __unused_webpack_exports, __webpack_require__) { 15000 15001 "use strict"; 15002 15003 15004 var $isNaN = __webpack_require__(3234); 15005 15006 // http://262.ecma-international.org/5.1/#sec-9.12 15007 15008 module.exports = function SameValue(x, y) { 15009 if (x === y) { // 0 === -0, but they are not identical. 15010 if (x === 0) { return 1 / x === 1 / y; } 15011 return true; 15012 } 15013 return $isNaN(x) && $isNaN(y); 15014 }; 15015 15016 15017 /***/ }), 15018 15019 /***/ 3704: 15020 /***/ (function(module) { 15021 15022 "use strict"; 15023 15024 15025 // http://262.ecma-international.org/5.1/#sec-9.2 15026 15027 module.exports = function ToBoolean(value) { return !!value; }; 15028 15029 15030 /***/ }), 15031 15032 /***/ 1723: 15033 /***/ (function(module, __unused_webpack_exports, __webpack_require__) { 15034 15035 "use strict"; 15036 15037 15038 var abs = __webpack_require__(13); 15039 var floor = __webpack_require__(5127); 15040 var ToNumber = __webpack_require__(5541); 15041 15042 var $isNaN = __webpack_require__(3234); 15043 var $isFinite = __webpack_require__(7061); 15044 var $sign = __webpack_require__(2163); 15045 15046 // https://262.ecma-international.org/12.0/#sec-tointegerorinfinity 15047 15048 module.exports = function ToIntegerOrInfinity(value) { 15049 var number = ToNumber(value); 15050 if ($isNaN(number) || number === 0) { return 0; } 15051 if (!$isFinite(number)) { return number; } 15052 return $sign(number) * floor(abs(number)); 15053 }; 15054 15055 15056 /***/ }), 15057 15058 /***/ 6840: 15059 /***/ (function(module, __unused_webpack_exports, __webpack_require__) { 15060 15061 "use strict"; 15062 15063 15064 var MAX_SAFE_INTEGER = __webpack_require__(8540); 15065 15066 var ToIntegerOrInfinity = __webpack_require__(1723); 15067 15068 module.exports = function ToLength(argument) { 15069 var len = ToIntegerOrInfinity(argument); 15070 if (len <= 0) { return 0; } // includes converting -0 to +0 15071 if (len > MAX_SAFE_INTEGER) { return MAX_SAFE_INTEGER; } 15072 return len; 15073 }; 15074 15075 15076 /***/ }), 15077 15078 /***/ 5541: 15079 /***/ (function(module, __unused_webpack_exports, __webpack_require__) { 15080 15081 "use strict"; 15082 15083 15084 var GetIntrinsic = __webpack_require__(4219); 15085 15086 var $TypeError = GetIntrinsic('%TypeError%'); 15087 var $Number = GetIntrinsic('%Number%'); 15088 var $RegExp = GetIntrinsic('%RegExp%'); 15089 var $parseInteger = GetIntrinsic('%parseInt%'); 15090 15091 var callBound = __webpack_require__(9630); 15092 var regexTester = __webpack_require__(8441); 15093 var isPrimitive = __webpack_require__(5019); 15094 15095 var $strSlice = callBound('String.prototype.slice'); 15096 var isBinary = regexTester(/^0b[01]+$/i); 15097 var isOctal = regexTester(/^0o[0-7]+$/i); 15098 var isInvalidHexLiteral = regexTester(/^[-+]0x[0-9a-f]+$/i); 15099 var nonWS = ['\u0085', '\u200b', '\ufffe'].join(''); 15100 var nonWSregex = new $RegExp('[' + nonWS + ']', 'g'); 15101 var hasNonWS = regexTester(nonWSregex); 15102 15103 // whitespace from: https://es5.github.io/#x15.5.4.20 15104 // implementation from https://github.com/es-shims/es5-shim/blob/v3.4.0/es5-shim.js#L1304-L1324 15105 var ws = [ 15106 '\x09\x0A\x0B\x0C\x0D\x20\xA0\u1680\u180E\u2000\u2001\u2002\u2003', 15107 '\u2004\u2005\u2006\u2007\u2008\u2009\u200A\u202F\u205F\u3000\u2028', 15108 '\u2029\uFEFF' 15109 ].join(''); 15110 var trimRegex = new RegExp('(^[' + ws + ']+)|([' + ws + ']+$)', 'g'); 15111 var $replace = callBound('String.prototype.replace'); 15112 var $trim = function (value) { 15113 return $replace(value, trimRegex, ''); 15114 }; 15115 15116 var ToPrimitive = __webpack_require__(6745); 15117 15118 // https://ecma-international.org/ecma-262/6.0/#sec-tonumber 15119 15120 module.exports = function ToNumber(argument) { 15121 var value = isPrimitive(argument) ? argument : ToPrimitive(argument, $Number); 15122 if (typeof value === 'symbol') { 15123 throw new $TypeError('Cannot convert a Symbol value to a number'); 15124 } 15125 if (typeof value === 'bigint') { 15126 throw new $TypeError('Conversion from \'BigInt\' to \'number\' is not allowed.'); 15127 } 15128 if (typeof value === 'string') { 15129 if (isBinary(value)) { 15130 return ToNumber($parseInteger($strSlice(value, 2), 2)); 15131 } else if (isOctal(value)) { 15132 return ToNumber($parseInteger($strSlice(value, 2), 8)); 15133 } else if (hasNonWS(value) || isInvalidHexLiteral(value)) { 15134 return NaN; 15135 } 15136 var trimmed = $trim(value); 15137 if (trimmed !== value) { 15138 return ToNumber(trimmed); 15139 } 15140 15141 } 15142 return $Number(value); 15143 }; 15144 15145 15146 /***/ }), 15147 15148 /***/ 1283: 15149 /***/ (function(module, __unused_webpack_exports, __webpack_require__) { 15150 15151 "use strict"; 15152 15153 15154 var GetIntrinsic = __webpack_require__(4219); 15155 15156 var $Object = GetIntrinsic('%Object%'); 15157 15158 var RequireObjectCoercible = __webpack_require__(6953); 15159 15160 // https://ecma-international.org/ecma-262/6.0/#sec-toobject 15161 15162 module.exports = function ToObject(value) { 15163 RequireObjectCoercible(value); 15164 return $Object(value); 15165 }; 15166 15167 15168 /***/ }), 15169 15170 /***/ 6745: 15171 /***/ (function(module, __unused_webpack_exports, __webpack_require__) { 15172 15173 "use strict"; 15174 15175 15176 var toPrimitive = __webpack_require__(5249); 15177 15178 // https://ecma-international.org/ecma-262/6.0/#sec-toprimitive 15179 15180 module.exports = function ToPrimitive(input) { 15181 if (arguments.length > 1) { 15182 return toPrimitive(input, arguments[1]); 15183 } 15184 return toPrimitive(input); 15185 }; 15186 15187 15188 /***/ }), 15189 15190 /***/ 2402: 15191 /***/ (function(module, __unused_webpack_exports, __webpack_require__) { 15192 15193 "use strict"; 15194 15195 15196 var has = __webpack_require__(9284); 15197 15198 var GetIntrinsic = __webpack_require__(4219); 15199 15200 var $TypeError = GetIntrinsic('%TypeError%'); 15201 15202 var Type = __webpack_require__(9747); 15203 var ToBoolean = __webpack_require__(3704); 15204 var IsCallable = __webpack_require__(1089); 15205 15206 // https://262.ecma-international.org/5.1/#sec-8.10.5 15207 15208 module.exports = function ToPropertyDescriptor(Obj) { 15209 if (Type(Obj) !== 'Object') { 15210 throw new $TypeError('ToPropertyDescriptor requires an object'); 15211 } 15212 15213 var desc = {}; 15214 if (has(Obj, 'enumerable')) { 15215 desc['[[Enumerable]]'] = ToBoolean(Obj.enumerable); 15216 } 15217 if (has(Obj, 'configurable')) { 15218 desc['[[Configurable]]'] = ToBoolean(Obj.configurable); 15219 } 15220 if (has(Obj, 'value')) { 15221 desc['[[Value]]'] = Obj.value; 15222 } 15223 if (has(Obj, 'writable')) { 15224 desc['[[Writable]]'] = ToBoolean(Obj.writable); 15225 } 15226 if (has(Obj, 'get')) { 15227 var getter = Obj.get; 15228 if (typeof getter !== 'undefined' && !IsCallable(getter)) { 15229 throw new $TypeError('getter must be a function'); 15230 } 15231 desc['[[Get]]'] = getter; 15232 } 15233 if (has(Obj, 'set')) { 15234 var setter = Obj.set; 15235 if (typeof setter !== 'undefined' && !IsCallable(setter)) { 15236 throw new $TypeError('setter must be a function'); 15237 } 15238 desc['[[Set]]'] = setter; 15239 } 15240 15241 if ((has(desc, '[[Get]]') || has(desc, '[[Set]]')) && (has(desc, '[[Value]]') || has(desc, '[[Writable]]'))) { 15242 throw new $TypeError('Invalid property descriptor. Cannot both specify accessors and a value or writable attribute'); 15243 } 15244 return desc; 15245 }; 15246 15247 15248 /***/ }), 15249 15250 /***/ 6888: 15251 /***/ (function(module, __unused_webpack_exports, __webpack_require__) { 15252 15253 "use strict"; 15254 15255 15256 var GetIntrinsic = __webpack_require__(4219); 15257 15258 var $String = GetIntrinsic('%String%'); 15259 var $TypeError = GetIntrinsic('%TypeError%'); 15260 15261 // https://ecma-international.org/ecma-262/6.0/#sec-tostring 15262 15263 module.exports = function ToString(argument) { 15264 if (typeof argument === 'symbol') { 15265 throw new $TypeError('Cannot convert a Symbol value to a string'); 15266 } 15267 return $String(argument); 15268 }; 15269 15270 15271 /***/ }), 15272 15273 /***/ 9747: 15274 /***/ (function(module, __unused_webpack_exports, __webpack_require__) { 15275 15276 "use strict"; 15277 15278 15279 var ES5Type = __webpack_require__(290); 15280 15281 // https://262.ecma-international.org/11.0/#sec-ecmascript-data-types-and-values 15282 15283 module.exports = function Type(x) { 15284 if (typeof x === 'symbol') { 15285 return 'Symbol'; 15286 } 15287 if (typeof x === 'bigint') { 15288 return 'BigInt'; 15289 } 15290 return ES5Type(x); 15291 }; 15292 15293 15294 /***/ }), 15295 15296 /***/ 13: 15297 /***/ (function(module, __unused_webpack_exports, __webpack_require__) { 15298 15299 "use strict"; 15300 15301 15302 var GetIntrinsic = __webpack_require__(4219); 15303 15304 var $abs = GetIntrinsic('%Math.abs%'); 15305 15306 // http://262.ecma-international.org/5.1/#sec-5.2 15307 15308 module.exports = function abs(x) { 15309 return $abs(x); 15310 }; 15311 15312 15313 /***/ }), 15314 15315 /***/ 5127: 15316 /***/ (function(module) { 15317 15318 "use strict"; 15319 15320 15321 // var modulo = require('./modulo'); 15322 var $floor = Math.floor; 15323 15324 // http://262.ecma-international.org/5.1/#sec-5.2 15325 15326 module.exports = function floor(x) { 15327 // return x - modulo(x, 1); 15328 return $floor(x); 15329 }; 15330 15331 15332 /***/ }), 15333 15334 /***/ 3031: 15335 /***/ (function(module, __unused_webpack_exports, __webpack_require__) { 15336 15337 "use strict"; 15338 15339 15340 var GetIntrinsic = __webpack_require__(4219); 15341 15342 var $TypeError = GetIntrinsic('%TypeError%'); 15343 15344 // http://262.ecma-international.org/5.1/#sec-9.10 15345 15346 module.exports = function CheckObjectCoercible(value, optMessage) { 15347 if (value == null) { 15348 throw new $TypeError(optMessage || ('Cannot call method on ' + value)); 15349 } 15350 return value; 15351 }; 15352 15353 15354 /***/ }), 15355 15356 /***/ 290: 15357 /***/ (function(module) { 15358 15359 "use strict"; 15360 15361 15362 // https://262.ecma-international.org/5.1/#sec-8 15363 15364 module.exports = function Type(x) { 15365 if (x === null) { 15366 return 'Null'; 15367 } 15368 if (typeof x === 'undefined') { 15369 return 'Undefined'; 15370 } 15371 if (typeof x === 'function' || typeof x === 'object') { 15372 return 'Object'; 15373 } 15374 if (typeof x === 'number') { 15375 return 'Number'; 15376 } 15377 if (typeof x === 'boolean') { 15378 return 'Boolean'; 15379 } 15380 if (typeof x === 'string') { 15381 return 'String'; 15382 } 15383 }; 15384 15385 15386 /***/ }), 15387 15388 /***/ 137: 15389 /***/ (function(module, __unused_webpack_exports, __webpack_require__) { 15390 15391 "use strict"; 15392 15393 15394 // TODO: remove, semver-major 15395 15396 module.exports = __webpack_require__(4219); 15397 15398 15399 /***/ }), 15400 15401 /***/ 1327: 15402 /***/ (function(module, __unused_webpack_exports, __webpack_require__) { 15403 15404 "use strict"; 15405 15406 15407 var GetIntrinsic = __webpack_require__(4219); 15408 15409 var $defineProperty = GetIntrinsic('%Object.defineProperty%', true); 15410 15411 if ($defineProperty) { 15412 try { 15413 $defineProperty({}, 'a', { value: 1 }); 15414 } catch (e) { 15415 // IE 8 has a broken defineProperty 15416 $defineProperty = null; 15417 } 15418 } 15419 15420 // node v0.6 has a bug where array lengths can be Set but not Defined 15421 var hasArrayLengthDefineBug; 15422 try { 15423 hasArrayLengthDefineBug = $defineProperty && $defineProperty([], 'length', { value: 1 }).length === 0; 15424 } catch (e) { 15425 // In Firefox 4-22, defining length on an array throws an exception. 15426 hasArrayLengthDefineBug = true; 15427 } 15428 15429 // eslint-disable-next-line global-require 15430 var isArray = hasArrayLengthDefineBug && __webpack_require__(7472); // this does not depend on any other AOs. 15431 15432 var callBound = __webpack_require__(9630); 15433 15434 var $isEnumerable = callBound('Object.prototype.propertyIsEnumerable'); 15435 15436 // eslint-disable-next-line max-params 15437 module.exports = function DefineOwnProperty(IsDataDescriptor, SameValue, FromPropertyDescriptor, O, P, desc) { 15438 if (!$defineProperty) { 15439 if (!IsDataDescriptor(desc)) { 15440 // ES3 does not support getters/setters 15441 return false; 15442 } 15443 if (!desc['[[Configurable]]'] || !desc['[[Writable]]']) { 15444 return false; 15445 } 15446 15447 // fallback for ES3 15448 if (P in O && $isEnumerable(O, P) !== !!desc['[[Enumerable]]']) { 15449 // a non-enumerable existing property 15450 return false; 15451 } 15452 15453 // property does not exist at all, or exists but is enumerable 15454 var V = desc['[[Value]]']; 15455 // eslint-disable-next-line no-param-reassign 15456 O[P] = V; // will use [[Define]] 15457 return SameValue(O[P], V); 15458 } 15459 if ( 15460 hasArrayLengthDefineBug 15461 && P === 'length' 15462 && '[[Value]]' in desc 15463 && isArray(O) 15464 && O.length !== desc['[[Value]]'] 15465 ) { 15466 // eslint-disable-next-line no-param-reassign 15467 O.length = desc['[[Value]]']; 15468 return O.length === desc['[[Value]]']; 15469 } 15470 15471 $defineProperty(O, P, FromPropertyDescriptor(desc)); 15472 return true; 15473 }; 15474 15475 15476 /***/ }), 15477 15478 /***/ 5114: 15479 /***/ (function(module, __unused_webpack_exports, __webpack_require__) { 15480 15481 "use strict"; 15482 15483 15484 var GetIntrinsic = __webpack_require__(4219); 15485 15486 var $TypeError = GetIntrinsic('%TypeError%'); 15487 var $SyntaxError = GetIntrinsic('%SyntaxError%'); 15488 15489 var has = __webpack_require__(9284); 15490 15491 var predicates = { 15492 // https://262.ecma-international.org/6.0/#sec-property-descriptor-specification-type 15493 'Property Descriptor': function isPropertyDescriptor(Type, Desc) { 15494 if (Type(Desc) !== 'Object') { 15495 return false; 15496 } 15497 var allowed = { 15498 '[[Configurable]]': true, 15499 '[[Enumerable]]': true, 15500 '[[Get]]': true, 15501 '[[Set]]': true, 15502 '[[Value]]': true, 15503 '[[Writable]]': true 15504 }; 15505 15506 for (var key in Desc) { // eslint-disable-line 15507 if (has(Desc, key) && !allowed[key]) { 15508 return false; 15509 } 15510 } 15511 15512 var isData = has(Desc, '[[Value]]'); 15513 var IsAccessor = has(Desc, '[[Get]]') || has(Desc, '[[Set]]'); 15514 if (isData && IsAccessor) { 15515 throw new $TypeError('Property Descriptors may not be both accessor and data descriptors'); 15516 } 15517 return true; 15518 } 15519 }; 15520 15521 module.exports = function assertRecord(Type, recordType, argumentName, value) { 15522 var predicate = predicates[recordType]; 15523 if (typeof predicate !== 'function') { 15524 throw new $SyntaxError('unknown record type: ' + recordType); 15525 } 15526 if (!predicate(Type, value)) { 15527 throw new $TypeError(argumentName + ' must be a ' + recordType); 15528 } 15529 }; 15530 15531 15532 /***/ }), 15533 15534 /***/ 5180: 15535 /***/ (function(module, __unused_webpack_exports, __webpack_require__) { 15536 15537 "use strict"; 15538 15539 15540 var GetIntrinsic = __webpack_require__(4219); 15541 15542 var $gOPD = GetIntrinsic('%Object.getOwnPropertyDescriptor%', true); 15543 if ($gOPD) { 15544 try { 15545 $gOPD([], 'length'); 15546 } catch (e) { 15547 // IE 8 has a broken gOPD 15548 $gOPD = null; 15549 } 15550 } 15551 15552 module.exports = $gOPD; 15553 15554 15555 /***/ }), 15556 15557 /***/ 7061: 15558 /***/ (function(module) { 15559 15560 "use strict"; 15561 15562 15563 var $isNaN = Number.isNaN || function (a) { return a !== a; }; 15564 15565 module.exports = Number.isFinite || function (x) { return typeof x === 'number' && !$isNaN(x) && x !== Infinity && x !== -Infinity; }; 15566 15567 15568 /***/ }), 15569 15570 /***/ 3234: 15571 /***/ (function(module) { 15572 15573 "use strict"; 15574 15575 15576 module.exports = Number.isNaN || function isNaN(a) { 15577 return a !== a; 15578 }; 15579 15580 15581 /***/ }), 15582 15583 /***/ 5019: 15584 /***/ (function(module) { 15585 15586 "use strict"; 15587 15588 15589 module.exports = function isPrimitive(value) { 15590 return value === null || (typeof value !== 'function' && typeof value !== 'object'); 15591 }; 15592 15593 15594 /***/ }), 15595 15596 /***/ 8682: 15597 /***/ (function(module, __unused_webpack_exports, __webpack_require__) { 15598 15599 "use strict"; 15600 15601 15602 var GetIntrinsic = __webpack_require__(4219); 15603 15604 var has = __webpack_require__(9284); 15605 var $TypeError = GetIntrinsic('%TypeError%'); 15606 15607 module.exports = function IsPropertyDescriptor(ES, Desc) { 15608 if (ES.Type(Desc) !== 'Object') { 15609 return false; 15610 } 15611 var allowed = { 15612 '[[Configurable]]': true, 15613 '[[Enumerable]]': true, 15614 '[[Get]]': true, 15615 '[[Set]]': true, 15616 '[[Value]]': true, 15617 '[[Writable]]': true 15618 }; 15619 15620 for (var key in Desc) { // eslint-disable-line no-restricted-syntax 15621 if (has(Desc, key) && !allowed[key]) { 15622 return false; 15623 } 15624 } 15625 15626 if (ES.IsDataDescriptor(Desc) && ES.IsAccessorDescriptor(Desc)) { 15627 throw new $TypeError('Property Descriptors may not be both accessor and data descriptors'); 15628 } 15629 return true; 15630 }; 15631 15632 15633 /***/ }), 15634 15635 /***/ 8540: 15636 /***/ (function(module, __unused_webpack_exports, __webpack_require__) { 15637 15638 "use strict"; 15639 15640 15641 var GetIntrinsic = __webpack_require__(4219); 15642 15643 var $Math = GetIntrinsic('%Math%'); 15644 var $Number = GetIntrinsic('%Number%'); 15645 15646 module.exports = $Number.MAX_SAFE_INTEGER || $Math.pow(2, 53) - 1; 15647 15648 15649 /***/ }), 15650 15651 /***/ 8441: 15652 /***/ (function(module, __unused_webpack_exports, __webpack_require__) { 15653 15654 "use strict"; 15655 15656 15657 var callBound = __webpack_require__(9630); 15658 15659 var $exec = callBound('RegExp.prototype.exec'); 15660 15661 module.exports = function regexTester(regex) { 15662 return function test(s) { return $exec(regex, s) !== null; }; 15663 }; 15664 15665 15666 /***/ }), 15667 15668 /***/ 2163: 15669 /***/ (function(module) { 15670 15671 "use strict"; 15672 15673 15674 module.exports = function sign(number) { 15675 return number >= 0 ? 1 : -1; 15676 }; 15677 15678 15679 /***/ }) 15680 15681 /******/ }); 15682 /************************************************************************/ 15683 /******/ // The module cache 15684 /******/ var __webpack_module_cache__ = {}; 15685 /******/ 15686 /******/ // The require function 15687 /******/ function __webpack_require__(moduleId) { 15688 /******/ // Check if module is in cache 15689 /******/ var cachedModule = __webpack_module_cache__[moduleId]; 15690 /******/ if (cachedModule !== undefined) { 15691 /******/ return cachedModule.exports; 15692 /******/ } 15693 /******/ // Create a new module (and put it into the cache) 15694 /******/ var module = __webpack_module_cache__[moduleId] = { 15695 /******/ // no module.id needed 15696 /******/ // no module.loaded needed 15697 /******/ exports: {} 15698 /******/ }; 15699 /******/ 15700 /******/ // Execute the module function 15701 /******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__); 15702 /******/ 15703 /******/ // Return the exports of the module 15704 /******/ return module.exports; 15705 /******/ } 15706 /******/ 15707 /************************************************************************/ 15708 /******/ /* webpack/runtime/compat get default export */ 15709 /******/ !function() { 15710 /******/ // getDefaultExport function for compatibility with non-harmony modules 15711 /******/ __webpack_require__.n = function(module) { 15712 /******/ var getter = module && module.__esModule ? 15713 /******/ function() { return module['default']; } : 15714 /******/ function() { return module; }; 15715 /******/ __webpack_require__.d(getter, { a: getter }); 15716 /******/ return getter; 15717 /******/ }; 15718 /******/ }(); 15719 /******/ 15720 /******/ /* webpack/runtime/define property getters */ 15721 /******/ !function() { 15722 /******/ // define getter functions for harmony exports 15723 /******/ __webpack_require__.d = function(exports, definition) { 15724 /******/ for(var key in definition) { 15725 /******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) { 15726 /******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] }); 15727 /******/ } 15728 /******/ } 15729 /******/ }; 15730 /******/ }(); 15731 /******/ 15732 /******/ /* webpack/runtime/global */ 15733 /******/ !function() { 15734 /******/ __webpack_require__.g = (function() { 15735 /******/ if (typeof globalThis === 'object') return globalThis; 15736 /******/ try { 15737 /******/ return this || new Function('return this')(); 15738 /******/ } catch (e) { 15739 /******/ if (typeof window === 'object') return window; 15740 /******/ } 15741 /******/ })(); 15742 /******/ }(); 15743 /******/ 15744 /******/ /* webpack/runtime/hasOwnProperty shorthand */ 15745 /******/ !function() { 15746 /******/ __webpack_require__.o = function(obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); } 15747 /******/ }(); 15748 /******/ 15749 /******/ /* webpack/runtime/make namespace object */ 15750 /******/ !function() { 15751 /******/ // define __esModule on exports 15752 /******/ __webpack_require__.r = function(exports) { 15753 /******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) { 15754 /******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' }); 15755 /******/ } 15756 /******/ Object.defineProperty(exports, '__esModule', { value: true }); 15757 /******/ }; 15758 /******/ }(); 15759 /******/ 15760 /************************************************************************/ 15761 var __webpack_exports__ = {}; 15762 // This entry need to be wrapped in an IIFE because it need to be in strict mode. 15763 !function() { 15764 "use strict"; 15765 // ESM COMPAT FLAG 15766 __webpack_require__.r(__webpack_exports__); 15767 15768 // EXPORTS 15769 __webpack_require__.d(__webpack_exports__, { 15770 "AnglePickerControl": function() { return /* reexport */ AnglePickerControl; }, 15771 "Animate": function() { return /* reexport */ Animate; }, 15772 "Autocomplete": function() { return /* reexport */ Autocomplete; }, 15773 "BaseControl": function() { return /* reexport */ base_control; }, 15774 "BlockQuotation": function() { return /* reexport */ external_wp_primitives_namespaceObject.BlockQuotation; }, 15775 "Button": function() { return /* reexport */ build_module_button; }, 15776 "ButtonGroup": function() { return /* reexport */ button_group; }, 15777 "Card": function() { return /* reexport */ card_component; }, 15778 "CardBody": function() { return /* reexport */ card_body_component; }, 15779 "CardDivider": function() { return /* reexport */ card_divider_component; }, 15780 "CardFooter": function() { return /* reexport */ card_footer_component; }, 15781 "CardHeader": function() { return /* reexport */ card_header_component; }, 15782 "CardMedia": function() { return /* reexport */ card_media_component; }, 15783 "CheckboxControl": function() { return /* reexport */ CheckboxControl; }, 15784 "Circle": function() { return /* reexport */ external_wp_primitives_namespaceObject.Circle; }, 15785 "ClipboardButton": function() { return /* reexport */ ClipboardButton; }, 15786 "ColorIndicator": function() { return /* reexport */ color_indicator; }, 15787 "ColorPalette": function() { return /* reexport */ ColorPalette; }, 15788 "ColorPicker": function() { return /* reexport */ LegacyAdapter; }, 15789 "ComboboxControl": function() { return /* reexport */ combobox_control; }, 15790 "CustomGradientPicker": function() { return /* reexport */ CustomGradientPicker; }, 15791 "CustomSelectControl": function() { return /* reexport */ CustomSelectControl; }, 15792 "Dashicon": function() { return /* reexport */ dashicon; }, 15793 "DatePicker": function() { return /* reexport */ date; }, 15794 "DateTimePicker": function() { return /* reexport */ date_time; }, 15795 "Disabled": function() { return /* reexport */ disabled; }, 15796 "Draggable": function() { return /* reexport */ Draggable; }, 15797 "DropZone": function() { return /* reexport */ DropZoneComponent; }, 15798 "DropZoneProvider": function() { return /* reexport */ DropZoneProvider; }, 15799 "Dropdown": function() { return /* reexport */ Dropdown; }, 15800 "DropdownMenu": function() { return /* reexport */ dropdown_menu; }, 15801 "DuotonePicker": function() { return /* reexport */ duotone_picker; }, 15802 "DuotoneSwatch": function() { return /* reexport */ duotone_swatch; }, 15803 "ExternalLink": function() { return /* reexport */ external_link; }, 15804 "Fill": function() { return /* reexport */ slot_fill_Fill; }, 15805 "Flex": function() { return /* reexport */ flex_component; }, 15806 "FlexBlock": function() { return /* reexport */ flex_block_component; }, 15807 "FlexItem": function() { return /* reexport */ flex_item_component; }, 15808 "FocalPointPicker": function() { return /* reexport */ focal_point_picker; }, 15809 "FocusReturnProvider": function() { return /* reexport */ with_focus_return_Provider; }, 15810 "FocusableIframe": function() { return /* reexport */ FocusableIframe; }, 15811 "FontSizePicker": function() { return /* reexport */ font_size_picker; }, 15812 "FormFileUpload": function() { return /* reexport */ form_file_upload; }, 15813 "FormToggle": function() { return /* reexport */ form_toggle; }, 15814 "FormTokenField": function() { return /* reexport */ form_token_field; }, 15815 "G": function() { return /* reexport */ external_wp_primitives_namespaceObject.G; }, 15816 "GradientPicker": function() { return /* reexport */ GradientPicker; }, 15817 "Guide": function() { return /* reexport */ Guide; }, 15818 "GuidePage": function() { return /* reexport */ GuidePage; }, 15819 "HorizontalRule": function() { return /* reexport */ external_wp_primitives_namespaceObject.HorizontalRule; }, 15820 "Icon": function() { return /* reexport */ build_module_icon; }, 15821 "IconButton": function() { return /* reexport */ deprecated; }, 15822 "IsolatedEventContainer": function() { return /* reexport */ isolated_event_container; }, 15823 "KeyboardShortcuts": function() { return /* reexport */ keyboard_shortcuts; }, 15824 "MenuGroup": function() { return /* reexport */ menu_group; }, 15825 "MenuItem": function() { return /* reexport */ menu_item; }, 15826 "MenuItemsChoice": function() { return /* reexport */ MenuItemsChoice; }, 15827 "Modal": function() { return /* reexport */ modal; }, 15828 "NavigableMenu": function() { return /* reexport */ navigable_container_menu; }, 15829 "Notice": function() { return /* reexport */ build_module_notice; }, 15830 "NoticeList": function() { return /* reexport */ list; }, 15831 "Panel": function() { return /* reexport */ panel; }, 15832 "PanelBody": function() { return /* reexport */ body; }, 15833 "PanelHeader": function() { return /* reexport */ panel_header; }, 15834 "PanelRow": function() { return /* reexport */ row; }, 15835 "Path": function() { return /* reexport */ external_wp_primitives_namespaceObject.Path; }, 15836 "Placeholder": function() { return /* reexport */ placeholder; }, 15837 "Polygon": function() { return /* reexport */ external_wp_primitives_namespaceObject.Polygon; }, 15838 "Popover": function() { return /* reexport */ popover; }, 15839 "QueryControls": function() { return /* reexport */ QueryControls; }, 15840 "RadioControl": function() { return /* reexport */ RadioControl; }, 15841 "RangeControl": function() { return /* reexport */ range_control; }, 15842 "Rect": function() { return /* reexport */ external_wp_primitives_namespaceObject.Rect; }, 15843 "ResizableBox": function() { return /* reexport */ resizable_box; }, 15844 "ResponsiveWrapper": function() { return /* reexport */ responsive_wrapper; }, 15845 "SVG": function() { return /* reexport */ external_wp_primitives_namespaceObject.SVG; }, 15846 "SandBox": function() { return /* reexport */ Sandbox; }, 15847 "ScrollLock": function() { return /* reexport */ ScrollLock; }, 15848 "SearchControl": function() { return /* reexport */ search_control; }, 15849 "SelectControl": function() { return /* reexport */ select_control; }, 15850 "Slot": function() { return /* reexport */ slot_fill_Slot; }, 15851 "SlotFillProvider": function() { return /* reexport */ Provider; }, 15852 "Snackbar": function() { return /* reexport */ snackbar; }, 15853 "SnackbarList": function() { return /* reexport */ snackbar_list; }, 15854 "Spinner": function() { return /* reexport */ Spinner; }, 15855 "TabPanel": function() { return /* reexport */ TabPanel; }, 15856 "TabbableContainer": function() { return /* reexport */ tabbable; }, 15857 "TextControl": function() { return /* reexport */ text_control; }, 15858 "TextHighlight": function() { return /* reexport */ text_highlight; }, 15859 "TextareaControl": function() { return /* reexport */ TextareaControl; }, 15860 "TimePicker": function() { return /* reexport */ time; }, 15861 "Tip": function() { return /* reexport */ build_module_tip; }, 15862 "ToggleControl": function() { return /* reexport */ ToggleControl; }, 15863 "Toolbar": function() { return /* reexport */ toolbar; }, 15864 "ToolbarButton": function() { return /* reexport */ toolbar_button; }, 15865 "ToolbarDropdownMenu": function() { return /* reexport */ toolbar_dropdown_menu; }, 15866 "ToolbarGroup": function() { return /* reexport */ toolbar_group; }, 15867 "ToolbarItem": function() { return /* reexport */ toolbar_item; }, 15868 "Tooltip": function() { return /* reexport */ tooltip; }, 15869 "TreeSelect": function() { return /* reexport */ TreeSelect; }, 15870 "VisuallyHidden": function() { return /* reexport */ visually_hidden_component; }, 15871 "__experimentalAlignmentMatrixControl": function() { return /* reexport */ AlignmentMatrixControl; }, 15872 "__experimentalBorderBoxControl": function() { return /* reexport */ border_box_control_component; }, 15873 "__experimentalBorderControl": function() { return /* reexport */ border_control_component; }, 15874 "__experimentalBoxControl": function() { return /* reexport */ BoxControl; }, 15875 "__experimentalConfirmDialog": function() { return /* reexport */ confirm_dialog_component; }, 15876 "__experimentalDimensionControl": function() { return /* reexport */ dimension_control; }, 15877 "__experimentalDivider": function() { return /* reexport */ divider_component; }, 15878 "__experimentalElevation": function() { return /* reexport */ elevation_component; }, 15879 "__experimentalFlyout": function() { return /* reexport */ flyout_component; }, 15880 "__experimentalGrid": function() { return /* reexport */ grid_component; }, 15881 "__experimentalHStack": function() { return /* reexport */ h_stack_component; }, 15882 "__experimentalHasSplitBorders": function() { return /* reexport */ hasSplitBorders; }, 15883 "__experimentalHeading": function() { return /* reexport */ heading_component; }, 15884 "__experimentalInputControl": function() { return /* reexport */ input_control; }, 15885 "__experimentalIsDefinedBorder": function() { return /* reexport */ isDefinedBorder; }, 15886 "__experimentalIsEmptyBorder": function() { return /* reexport */ isEmptyBorder; }, 15887 "__experimentalItem": function() { return /* reexport */ item_component; }, 15888 "__experimentalItemGroup": function() { return /* reexport */ item_group_component; }, 15889 "__experimentalNavigation": function() { return /* reexport */ Navigation; }, 15890 "__experimentalNavigationBackButton": function() { return /* reexport */ back_button; }, 15891 "__experimentalNavigationGroup": function() { return /* reexport */ NavigationGroup; }, 15892 "__experimentalNavigationItem": function() { return /* reexport */ NavigationItem; }, 15893 "__experimentalNavigationMenu": function() { return /* reexport */ NavigationMenu; }, 15894 "__experimentalNavigatorBackButton": function() { return /* reexport */ navigator_back_button_component; }, 15895 "__experimentalNavigatorButton": function() { return /* reexport */ navigator_button_component; }, 15896 "__experimentalNavigatorProvider": function() { return /* reexport */ navigator_provider_component; }, 15897 "__experimentalNavigatorScreen": function() { return /* reexport */ navigator_screen_component; }, 15898 "__experimentalNumberControl": function() { return /* reexport */ number_control; }, 15899 "__experimentalPaletteEdit": function() { return /* reexport */ PaletteEdit; }, 15900 "__experimentalParseQuantityAndUnitFromRawValue": function() { return /* reexport */ parseQuantityAndUnitFromRawValue; }, 15901 "__experimentalRadio": function() { return /* reexport */ build_module_radio; }, 15902 "__experimentalRadioGroup": function() { return /* reexport */ radio_group; }, 15903 "__experimentalScrollable": function() { return /* reexport */ scrollable_component; }, 15904 "__experimentalSpacer": function() { return /* reexport */ spacer_component; }, 15905 "__experimentalStyleProvider": function() { return /* reexport */ StyleProvider; }, 15906 "__experimentalSurface": function() { return /* reexport */ surface_component; }, 15907 "__experimentalText": function() { return /* reexport */ text_component; }, 15908 "__experimentalToggleGroupControl": function() { return /* reexport */ toggle_group_control_component; }, 15909 "__experimentalToggleGroupControlOption": function() { return /* reexport */ ToggleGroupControlOption; }, 15910 "__experimentalToggleGroupControlOptionIcon": function() { return /* reexport */ ToggleGroupControlOptionIcon; }, 15911 "__experimentalToolbarContext": function() { return /* reexport */ toolbar_context; }, 15912 "__experimentalToolsPanel": function() { return /* reexport */ tools_panel_component; }, 15913 "__experimentalToolsPanelContext": function() { return /* reexport */ ToolsPanelContext; }, 15914 "__experimentalToolsPanelItem": function() { return /* reexport */ tools_panel_item_component; }, 15915 "__experimentalTreeGrid": function() { return /* reexport */ tree_grid; }, 15916 "__experimentalTreeGridCell": function() { return /* reexport */ cell; }, 15917 "__experimentalTreeGridItem": function() { return /* reexport */ tree_grid_item; }, 15918 "__experimentalTreeGridRow": function() { return /* reexport */ tree_grid_row; }, 15919 "__experimentalTruncate": function() { return /* reexport */ truncate_component; }, 15920 "__experimentalUnitControl": function() { return /* reexport */ unit_control; }, 15921 "__experimentalUseCustomUnits": function() { return /* reexport */ useCustomUnits; }, 15922 "__experimentalUseNavigator": function() { return /* reexport */ use_navigator; }, 15923 "__experimentalUseSlot": function() { return /* reexport */ use_slot_useSlot; }, 15924 "__experimentalVStack": function() { return /* reexport */ v_stack_component; }, 15925 "__experimentalView": function() { return /* reexport */ component; }, 15926 "__experimentalZStack": function() { return /* reexport */ z_stack_component; }, 15927 "__unstableComposite": function() { return /* reexport */ Composite; }, 15928 "__unstableCompositeGroup": function() { return /* reexport */ CompositeGroup; }, 15929 "__unstableCompositeItem": function() { return /* reexport */ CompositeItem; }, 15930 "__unstableDisclosureContent": function() { return /* reexport */ DisclosureContent; }, 15931 "__unstableGetAnimateClassName": function() { return /* reexport */ getAnimateClassName; }, 15932 "__unstableMotion": function() { return /* reexport */ motion; }, 15933 "__unstableUseAutocompleteProps": function() { return /* reexport */ useAutocompleteProps; }, 15934 "__unstableUseCompositeState": function() { return /* reexport */ useCompositeState; }, 15935 "__unstableUseNavigateRegions": function() { return /* reexport */ useNavigateRegions; }, 15936 "createSlotFill": function() { return /* reexport */ createSlotFill; }, 15937 "navigateRegions": function() { return /* reexport */ navigate_regions; }, 15938 "withConstrainedTabbing": function() { return /* reexport */ with_constrained_tabbing; }, 15939 "withFallbackStyles": function() { return /* reexport */ with_fallback_styles; }, 15940 "withFilters": function() { return /* reexport */ withFilters; }, 15941 "withFocusOutside": function() { return /* reexport */ with_focus_outside; }, 15942 "withFocusReturn": function() { return /* reexport */ with_focus_return; }, 15943 "withNotices": function() { return /* reexport */ with_notices; }, 15944 "withSpokenMessages": function() { return /* reexport */ with_spoken_messages; } 15945 }); 15946 15947 // NAMESPACE OBJECT: ./node_modules/@wordpress/components/build-module/text/styles.js 15948 var text_styles_namespaceObject = {}; 15949 __webpack_require__.r(text_styles_namespaceObject); 15950 __webpack_require__.d(text_styles_namespaceObject, { 15951 "Text": function() { return Text; }, 15952 "block": function() { return styles_block; }, 15953 "destructive": function() { return destructive; }, 15954 "highlighterText": function() { return highlighterText; }, 15955 "muted": function() { return muted; }, 15956 "positive": function() { return positive; }, 15957 "upperCase": function() { return upperCase; } 15958 }); 15959 15960 // NAMESPACE OBJECT: ./node_modules/@wordpress/components/build-module/ui/tooltip/styles.js 15961 var tooltip_styles_namespaceObject = {}; 15962 __webpack_require__.r(tooltip_styles_namespaceObject); 15963 __webpack_require__.d(tooltip_styles_namespaceObject, { 15964 "TooltipContent": function() { return TooltipContent; }, 15965 "TooltipPopoverView": function() { return TooltipPopoverView; }, 15966 "TooltipShortcut": function() { return TooltipShortcut; }, 15967 "noOutline": function() { return noOutline; } 15968 }); 15969 15970 // NAMESPACE OBJECT: ./node_modules/@wordpress/components/build-module/toggle-group-control/toggle-group-control-option-base/styles.js 15971 var toggle_group_control_option_base_styles_namespaceObject = {}; 15972 __webpack_require__.r(toggle_group_control_option_base_styles_namespaceObject); 15973 __webpack_require__.d(toggle_group_control_option_base_styles_namespaceObject, { 15974 "ButtonContentView": function() { return ButtonContentView; }, 15975 "LabelView": function() { return LabelView; }, 15976 "buttonActive": function() { return buttonActive; }, 15977 "buttonView": function() { return buttonView; }, 15978 "labelBlock": function() { return labelBlock; }, 15979 "medium": function() { return medium; }, 15980 "separatorActive": function() { return separatorActive; } 15981 }); 15982 15983 ;// CONCATENATED MODULE: external ["wp","primitives"] 15984 var external_wp_primitives_namespaceObject = window["wp"]["primitives"]; 15985 ;// CONCATENATED MODULE: ./node_modules/@babel/runtime/helpers/esm/extends.js 15986 function extends_extends() { 15987 extends_extends = Object.assign || function (target) { 15988 for (var i = 1; i < arguments.length; i++) { 15989 var source = arguments[i]; 15990 15991 for (var key in source) { 15992 if (Object.prototype.hasOwnProperty.call(source, key)) { 15993 target[key] = source[key]; 15994 } 15995 } 15996 } 15997 15998 return target; 15999 }; 16000 16001 return extends_extends.apply(this, arguments); 16002 } 16003 ;// CONCATENATED MODULE: external ["wp","element"] 16004 var external_wp_element_namespaceObject = window["wp"]["element"]; 16005 ;// CONCATENATED MODULE: external "lodash" 16006 var external_lodash_namespaceObject = window["lodash"]; 16007 // EXTERNAL MODULE: ./node_modules/classnames/index.js 16008 var classnames = __webpack_require__(4403); 16009 var classnames_default = /*#__PURE__*/__webpack_require__.n(classnames); 16010 ;// CONCATENATED MODULE: external ["wp","i18n"] 16011 var external_wp_i18n_namespaceObject = window["wp"]["i18n"]; 16012 ;// CONCATENATED MODULE: external ["wp","compose"] 16013 var external_wp_compose_namespaceObject = window["wp"]["compose"]; 16014 ;// CONCATENATED MODULE: ./node_modules/reakit/es/_rollupPluginBabelHelpers-1f0bf8c2.js 16015 function _defineProperty(obj, key, value) { 16016 if (key in obj) { 16017 Object.defineProperty(obj, key, { 16018 value: value, 16019 enumerable: true, 16020 configurable: true, 16021 writable: true 16022 }); 16023 } else { 16024 obj[key] = value; 16025 } 16026 16027 return obj; 16028 } 16029 16030 function ownKeys(object, enumerableOnly) { 16031 var keys = Object.keys(object); 16032 16033 if (Object.getOwnPropertySymbols) { 16034 var symbols = Object.getOwnPropertySymbols(object); 16035 if (enumerableOnly) symbols = symbols.filter(function (sym) { 16036 return Object.getOwnPropertyDescriptor(object, sym).enumerable; 16037 }); 16038 keys.push.apply(keys, symbols); 16039 } 16040 16041 return keys; 16042 } 16043 16044 function _objectSpread2(target) { 16045 for (var i = 1; i < arguments.length; i++) { 16046 var source = arguments[i] != null ? arguments[i] : {}; 16047 16048 if (i % 2) { 16049 ownKeys(Object(source), true).forEach(function (key) { 16050 _defineProperty(target, key, source[key]); 16051 }); 16052 } else if (Object.getOwnPropertyDescriptors) { 16053 Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); 16054 } else { 16055 ownKeys(Object(source)).forEach(function (key) { 16056 Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); 16057 }); 16058 } 16059 } 16060 16061 return target; 16062 } 16063 16064 function _rollupPluginBabelHelpers_1f0bf8c2_objectWithoutPropertiesLoose(source, excluded) { 16065 if (source == null) return {}; 16066 var target = {}; 16067 var sourceKeys = Object.keys(source); 16068 var key, i; 16069 16070 for (i = 0; i < sourceKeys.length; i++) { 16071 key = sourceKeys[i]; 16072 if (excluded.indexOf(key) >= 0) continue; 16073 target[key] = source[key]; 16074 } 16075 16076 return target; 16077 } 16078 16079 function _unsupportedIterableToArray(o, minLen) { 16080 if (!o) return; 16081 if (typeof o === "string") return _arrayLikeToArray(o, minLen); 16082 var n = Object.prototype.toString.call(o).slice(8, -1); 16083 if (n === "Object" && o.constructor) n = o.constructor.name; 16084 if (n === "Map" || n === "Set") return Array.from(o); 16085 if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); 16086 } 16087 16088 function _arrayLikeToArray(arr, len) { 16089 if (len == null || len > arr.length) len = arr.length; 16090 16091 for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; 16092 16093 return arr2; 16094 } 16095 16096 function _createForOfIteratorHelperLoose(o, allowArrayLike) { 16097 var it; 16098 16099 if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) { 16100 if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { 16101 if (it) o = it; 16102 var i = 0; 16103 return function () { 16104 if (i >= o.length) return { 16105 done: true 16106 }; 16107 return { 16108 done: false, 16109 value: o[i++] 16110 }; 16111 }; 16112 } 16113 16114 throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); 16115 } 16116 16117 it = o[Symbol.iterator](); 16118 return it.next.bind(it); 16119 } 16120 16121 16122 16123 // EXTERNAL MODULE: external "React" 16124 var external_React_ = __webpack_require__(9196); 16125 var external_React_default = /*#__PURE__*/__webpack_require__.n(external_React_); 16126 ;// CONCATENATED MODULE: ./node_modules/reakit-system/es/_rollupPluginBabelHelpers-0c84a174.js 16127 function _rollupPluginBabelHelpers_0c84a174_defineProperty(obj, key, value) { 16128 if (key in obj) { 16129 Object.defineProperty(obj, key, { 16130 value: value, 16131 enumerable: true, 16132 configurable: true, 16133 writable: true 16134 }); 16135 } else { 16136 obj[key] = value; 16137 } 16138 16139 return obj; 16140 } 16141 16142 function _rollupPluginBabelHelpers_0c84a174_ownKeys(object, enumerableOnly) { 16143 var keys = Object.keys(object); 16144 16145 if (Object.getOwnPropertySymbols) { 16146 var symbols = Object.getOwnPropertySymbols(object); 16147 if (enumerableOnly) symbols = symbols.filter(function (sym) { 16148 return Object.getOwnPropertyDescriptor(object, sym).enumerable; 16149 }); 16150 keys.push.apply(keys, symbols); 16151 } 16152 16153 return keys; 16154 } 16155 16156 function _rollupPluginBabelHelpers_0c84a174_objectSpread2(target) { 16157 for (var i = 1; i < arguments.length; i++) { 16158 var source = arguments[i] != null ? arguments[i] : {}; 16159 16160 if (i % 2) { 16161 _rollupPluginBabelHelpers_0c84a174_ownKeys(Object(source), true).forEach(function (key) { 16162 _rollupPluginBabelHelpers_0c84a174_defineProperty(target, key, source[key]); 16163 }); 16164 } else if (Object.getOwnPropertyDescriptors) { 16165 Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); 16166 } else { 16167 _rollupPluginBabelHelpers_0c84a174_ownKeys(Object(source)).forEach(function (key) { 16168 Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); 16169 }); 16170 } 16171 } 16172 16173 return target; 16174 } 16175 16176 function _rollupPluginBabelHelpers_0c84a174_objectWithoutPropertiesLoose(source, excluded) { 16177 if (source == null) return {}; 16178 var target = {}; 16179 var sourceKeys = Object.keys(source); 16180 var key, i; 16181 16182 for (i = 0; i < sourceKeys.length; i++) { 16183 key = sourceKeys[i]; 16184 if (excluded.indexOf(key) >= 0) continue; 16185 target[key] = source[key]; 16186 } 16187 16188 return target; 16189 } 16190 16191 function _rollupPluginBabelHelpers_0c84a174_unsupportedIterableToArray(o, minLen) { 16192 if (!o) return; 16193 if (typeof o === "string") return _rollupPluginBabelHelpers_0c84a174_arrayLikeToArray(o, minLen); 16194 var n = Object.prototype.toString.call(o).slice(8, -1); 16195 if (n === "Object" && o.constructor) n = o.constructor.name; 16196 if (n === "Map" || n === "Set") return Array.from(o); 16197 if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _rollupPluginBabelHelpers_0c84a174_arrayLikeToArray(o, minLen); 16198 } 16199 16200 function _rollupPluginBabelHelpers_0c84a174_arrayLikeToArray(arr, len) { 16201 if (len == null || len > arr.length) len = arr.length; 16202 16203 for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; 16204 16205 return arr2; 16206 } 16207 16208 function _rollupPluginBabelHelpers_0c84a174_createForOfIteratorHelperLoose(o, allowArrayLike) { 16209 var it; 16210 16211 if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) { 16212 if (Array.isArray(o) || (it = _rollupPluginBabelHelpers_0c84a174_unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { 16213 if (it) o = it; 16214 var i = 0; 16215 return function () { 16216 if (i >= o.length) return { 16217 done: true 16218 }; 16219 return { 16220 done: false, 16221 value: o[i++] 16222 }; 16223 }; 16224 } 16225 16226 throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); 16227 } 16228 16229 it = o[Symbol.iterator](); 16230 return it.next.bind(it); 16231 } 16232 16233 16234 16235 ;// CONCATENATED MODULE: ./node_modules/reakit-system/es/SystemContext.js 16236 16237 16238 var SystemContext = /*#__PURE__*/(0,external_React_.createContext)({}); 16239 16240 16241 16242 ;// CONCATENATED MODULE: ./node_modules/reakit-system/es/useCreateElement.js 16243 16244 16245 16246 16247 function isRenderProp(children) { 16248 return typeof children === "function"; 16249 } 16250 16251 /** 16252 * Custom hook that will call `children` if it's a function. If 16253 * `useCreateElement` has been passed to the context, it'll be used instead. 16254 * 16255 * @example 16256 * import React from "react"; 16257 * import { SystemProvider, useCreateElement } from "reakit-system"; 16258 * 16259 * const system = { 16260 * useCreateElement(type, props, children = props.children) { 16261 * // very similar to what `useCreateElement` does already 16262 * if (typeof children === "function") { 16263 * const { children: _, ...rest } = props; 16264 * return children(rest); 16265 * } 16266 * return React.createElement(type, props, children); 16267 * }, 16268 * }; 16269 * 16270 * function Component(props) { 16271 * return useCreateElement("div", props); 16272 * } 16273 * 16274 * function App() { 16275 * return ( 16276 * <SystemProvider unstable_system={system}> 16277 * <Component url="url">{({ url }) => <a href={url}>link</a>}</Component> 16278 * </SystemProvider> 16279 * ); 16280 * } 16281 */ 16282 16283 var useCreateElement = function useCreateElement(type, props, children) { 16284 if (children === void 0) { 16285 children = props.children; 16286 } 16287 16288 var context = (0,external_React_.useContext)(SystemContext); 16289 16290 if (context.useCreateElement) { 16291 return context.useCreateElement(type, props, children); 16292 } 16293 16294 if (typeof type === "string" && isRenderProp(children)) { 16295 var _ = props.children, 16296 rest = _rollupPluginBabelHelpers_0c84a174_objectWithoutPropertiesLoose(props, ["children"]); 16297 16298 return children(rest); 16299 } 16300 16301 return /*#__PURE__*/(0,external_React_.createElement)(type, props, children); 16302 }; 16303 16304 16305 16306 ;// CONCATENATED MODULE: ./node_modules/reakit-utils/es/_rollupPluginBabelHelpers-1f0bf8c2.js 16307 function _rollupPluginBabelHelpers_1f0bf8c2_defineProperty(obj, key, value) { 16308 if (key in obj) { 16309 Object.defineProperty(obj, key, { 16310 value: value, 16311 enumerable: true, 16312 configurable: true, 16313 writable: true 16314 }); 16315 } else { 16316 obj[key] = value; 16317 } 16318 16319 return obj; 16320 } 16321 16322 function _rollupPluginBabelHelpers_1f0bf8c2_ownKeys(object, enumerableOnly) { 16323 var keys = Object.keys(object); 16324 16325 if (Object.getOwnPropertySymbols) { 16326 var symbols = Object.getOwnPropertySymbols(object); 16327 if (enumerableOnly) symbols = symbols.filter(function (sym) { 16328 return Object.getOwnPropertyDescriptor(object, sym).enumerable; 16329 }); 16330 keys.push.apply(keys, symbols); 16331 } 16332 16333 return keys; 16334 } 16335 16336 function _rollupPluginBabelHelpers_1f0bf8c2_objectSpread2(target) { 16337 for (var i = 1; i < arguments.length; i++) { 16338 var source = arguments[i] != null ? arguments[i] : {}; 16339 16340 if (i % 2) { 16341 _rollupPluginBabelHelpers_1f0bf8c2_ownKeys(Object(source), true).forEach(function (key) { 16342 _rollupPluginBabelHelpers_1f0bf8c2_defineProperty(target, key, source[key]); 16343 }); 16344 } else if (Object.getOwnPropertyDescriptors) { 16345 Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); 16346 } else { 16347 _rollupPluginBabelHelpers_1f0bf8c2_ownKeys(Object(source)).forEach(function (key) { 16348 Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); 16349 }); 16350 } 16351 } 16352 16353 return target; 16354 } 16355 16356 function es_rollupPluginBabelHelpers_1f0bf8c2_objectWithoutPropertiesLoose(source, excluded) { 16357 if (source == null) return {}; 16358 var target = {}; 16359 var sourceKeys = Object.keys(source); 16360 var key, i; 16361 16362 for (i = 0; i < sourceKeys.length; i++) { 16363 key = sourceKeys[i]; 16364 if (excluded.indexOf(key) >= 0) continue; 16365 target[key] = source[key]; 16366 } 16367 16368 return target; 16369 } 16370 16371 function _rollupPluginBabelHelpers_1f0bf8c2_unsupportedIterableToArray(o, minLen) { 16372 if (!o) return; 16373 if (typeof o === "string") return _rollupPluginBabelHelpers_1f0bf8c2_arrayLikeToArray(o, minLen); 16374 var n = Object.prototype.toString.call(o).slice(8, -1); 16375 if (n === "Object" && o.constructor) n = o.constructor.name; 16376 if (n === "Map" || n === "Set") return Array.from(o); 16377 if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _rollupPluginBabelHelpers_1f0bf8c2_arrayLikeToArray(o, minLen); 16378 } 16379 16380 function _rollupPluginBabelHelpers_1f0bf8c2_arrayLikeToArray(arr, len) { 16381 if (len == null || len > arr.length) len = arr.length; 16382 16383 for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; 16384 16385 return arr2; 16386 } 16387 16388 function _rollupPluginBabelHelpers_1f0bf8c2_createForOfIteratorHelperLoose(o, allowArrayLike) { 16389 var it; 16390 16391 if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) { 16392 if (Array.isArray(o) || (it = _rollupPluginBabelHelpers_1f0bf8c2_unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { 16393 if (it) o = it; 16394 var i = 0; 16395 return function () { 16396 if (i >= o.length) return { 16397 done: true 16398 }; 16399 return { 16400 done: false, 16401 value: o[i++] 16402 }; 16403 }; 16404 } 16405 16406 throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); 16407 } 16408 16409 it = o[Symbol.iterator](); 16410 return it.next.bind(it); 16411 } 16412 16413 16414 16415 ;// CONCATENATED MODULE: ./node_modules/reakit-utils/es/isObject.js 16416 /** 16417 * Checks whether `arg` is an object or not. 16418 * 16419 * @returns {boolean} 16420 */ 16421 function isObject_isObject(arg) { 16422 return typeof arg === "object" && arg != null; 16423 } 16424 16425 16426 16427 ;// CONCATENATED MODULE: ./node_modules/reakit-utils/es/isPlainObject.js 16428 16429 16430 /** 16431 * Checks whether `arg` is a plain object or not. 16432 * 16433 * @returns {boolean} 16434 */ 16435 16436 function isPlainObject(arg) { 16437 var _proto$constructor; 16438 16439 if (!isObject_isObject(arg)) return false; 16440 var proto = Object.getPrototypeOf(arg); 16441 if (proto == null) return true; 16442 return ((_proto$constructor = proto.constructor) === null || _proto$constructor === void 0 ? void 0 : _proto$constructor.toString()) === Object.toString(); 16443 } 16444 16445 16446 16447 ;// CONCATENATED MODULE: ./node_modules/reakit-utils/es/splitProps.js 16448 16449 16450 16451 16452 /** 16453 * Splits an object (`props`) into a tuple where the first item is an object 16454 * with the passed `keys`, and the second item is an object with these keys 16455 * omitted. 16456 * 16457 * @deprecated will be removed in version 2 16458 * 16459 * @example 16460 * import { splitProps } from "reakit-utils"; 16461 * 16462 * splitProps({ a: "a", b: "b" }, ["a"]); // [{ a: "a" }, { b: "b" }] 16463 */ 16464 16465 function __deprecatedSplitProps(props, keys) { 16466 var propsKeys = Object.keys(props); 16467 var picked = {}; 16468 var omitted = {}; 16469 16470 for (var _i = 0, _propsKeys = propsKeys; _i < _propsKeys.length; _i++) { 16471 var key = _propsKeys[_i]; 16472 16473 if (keys.indexOf(key) >= 0) { 16474 picked[key] = props[key]; 16475 } else { 16476 omitted[key] = props[key]; 16477 } 16478 } 16479 16480 return [picked, omitted]; 16481 } 16482 /** 16483 * Splits an object (`props`) into a tuple where the first item 16484 * is the `state` property, and the second item is the rest of the properties. 16485 * 16486 * It is also backward compatible with version 1. If `keys` are passed then 16487 * splits an object (`props`) into a tuple where the first item is an object 16488 * with the passed `keys`, and the second item is an object with these keys 16489 * omitted. 16490 * 16491 * @example 16492 * import { splitProps } from "reakit-utils"; 16493 * 16494 * splitProps({ a: "a", b: "b" }, ["a"]); // [{ a: "a" }, { b: "b" }] 16495 * 16496 * @example 16497 * import { splitProps } from "reakit-utils"; 16498 * 16499 * splitProps({ state: { a: "a" }, b: "b" }); // [{ a: "a" }, { b: "b" }] 16500 */ 16501 16502 16503 function splitProps(props, keys) { 16504 if (keys === void 0) { 16505 keys = []; 16506 } 16507 16508 if (!isPlainObject(props.state)) { 16509 return __deprecatedSplitProps(props, keys); 16510 } 16511 16512 var _deprecatedSplitProp = __deprecatedSplitProps(props, [].concat(keys, ["state"])), 16513 picked = _deprecatedSplitProp[0], 16514 omitted = _deprecatedSplitProp[1]; 16515 16516 var state = picked.state, 16517 restPicked = es_rollupPluginBabelHelpers_1f0bf8c2_objectWithoutPropertiesLoose(picked, ["state"]); 16518 16519 return [_rollupPluginBabelHelpers_1f0bf8c2_objectSpread2(_rollupPluginBabelHelpers_1f0bf8c2_objectSpread2({}, state), restPicked), omitted]; 16520 } 16521 16522 16523 16524 ;// CONCATENATED MODULE: ./node_modules/reakit-utils/es/shallowEqual.js 16525 /** 16526 * Compares two objects. 16527 * 16528 * @example 16529 * import { shallowEqual } from "reakit-utils"; 16530 * 16531 * shallowEqual({ a: "a" }, {}); // false 16532 * shallowEqual({ a: "a" }, { b: "b" }); // false 16533 * shallowEqual({ a: "a" }, { a: "a" }); // true 16534 * shallowEqual({ a: "a" }, { a: "a", b: "b" }); // false 16535 */ 16536 function shallowEqual(objA, objB) { 16537 if (objA === objB) return true; 16538 if (!objA) return false; 16539 if (!objB) return false; 16540 if (typeof objA !== "object") return false; 16541 if (typeof objB !== "object") return false; 16542 var aKeys = Object.keys(objA); 16543 var bKeys = Object.keys(objB); 16544 var length = aKeys.length; 16545 if (bKeys.length !== length) return false; 16546 16547 for (var _i = 0, _aKeys = aKeys; _i < _aKeys.length; _i++) { 16548 var key = _aKeys[_i]; 16549 16550 if (objA[key] !== objB[key]) { 16551 return false; 16552 } 16553 } 16554 16555 return true; 16556 } 16557 16558 16559 16560 ;// CONCATENATED MODULE: ./node_modules/reakit-utils/es/normalizePropsAreEqual.js 16561 16562 16563 16564 16565 /** 16566 * This higher order functions take `propsAreEqual` function and 16567 * returns a new function which normalizes the props. 16568 * 16569 * Normalizing in our case is making sure the `propsAreEqual` works with 16570 * both version 1 (object spreading) and version 2 (state object) state passing. 16571 * 16572 * To achieve this, the returned function in case of a state object 16573 * will spread the state object in both `prev` and `next props. 16574 * 16575 * Other case it just returns the function as is which makes sure 16576 * that we are still backward compatible 16577 */ 16578 function normalizePropsAreEqual(propsAreEqual) { 16579 if (propsAreEqual.name === "normalizePropsAreEqualInner") { 16580 return propsAreEqual; 16581 } 16582 16583 return function normalizePropsAreEqualInner(prev, next) { 16584 if (!isPlainObject(prev.state) || !isPlainObject(next.state)) { 16585 return propsAreEqual(prev, next); 16586 } 16587 16588 return propsAreEqual(_rollupPluginBabelHelpers_1f0bf8c2_objectSpread2(_rollupPluginBabelHelpers_1f0bf8c2_objectSpread2({}, prev.state), prev), _rollupPluginBabelHelpers_1f0bf8c2_objectSpread2(_rollupPluginBabelHelpers_1f0bf8c2_objectSpread2({}, next.state), next)); 16589 }; 16590 } 16591 16592 16593 16594 ;// CONCATENATED MODULE: ./node_modules/reakit-system/es/createComponent.js 16595 16596 16597 16598 16599 16600 16601 16602 16603 function createComponent_forwardRef(component) { 16604 return /*#__PURE__*/(0,external_React_.forwardRef)(component); 16605 } 16606 16607 function memo(component, propsAreEqual) { 16608 return /*#__PURE__*/(0,external_React_.memo)(component, propsAreEqual); 16609 } 16610 16611 /** 16612 * Creates a React component. 16613 * 16614 * @example 16615 * import { createComponent } from "reakit-system"; 16616 * 16617 * const A = createComponent({ as: "a" }); 16618 * 16619 * @param options 16620 */ 16621 function createComponent(_ref) { 16622 var type = _ref.as, 16623 useHook = _ref.useHook, 16624 shouldMemo = _ref.memo, 16625 _ref$propsAreEqual = _ref.propsAreEqual, 16626 propsAreEqual = _ref$propsAreEqual === void 0 ? useHook === null || useHook === void 0 ? void 0 : useHook.unstable_propsAreEqual : _ref$propsAreEqual, 16627 _ref$keys = _ref.keys, 16628 keys = _ref$keys === void 0 ? (useHook === null || useHook === void 0 ? void 0 : useHook.__keys) || [] : _ref$keys, 16629 _ref$useCreateElement = _ref.useCreateElement, 16630 useCreateElement$1 = _ref$useCreateElement === void 0 ? useCreateElement : _ref$useCreateElement; 16631 16632 var Comp = function Comp(_ref2, ref) { 16633 var _ref2$as = _ref2.as, 16634 as = _ref2$as === void 0 ? type : _ref2$as, 16635 props = _rollupPluginBabelHelpers_0c84a174_objectWithoutPropertiesLoose(_ref2, ["as"]); 16636 16637 if (useHook) { 16638 var _as$render; 16639 16640 var _splitProps = splitProps(props, keys), 16641 _options = _splitProps[0], 16642 htmlProps = _splitProps[1]; 16643 16644 var _useHook = useHook(_options, _rollupPluginBabelHelpers_0c84a174_objectSpread2({ 16645 ref: ref 16646 }, htmlProps)), 16647 wrapElement = _useHook.wrapElement, 16648 elementProps = _rollupPluginBabelHelpers_0c84a174_objectWithoutPropertiesLoose(_useHook, ["wrapElement"]); // @ts-ignore 16649 16650 16651 var asKeys = ((_as$render = as.render) === null || _as$render === void 0 ? void 0 : _as$render.__keys) || as.__keys; 16652 var asOptions = asKeys && splitProps(props, asKeys)[0]; 16653 var allProps = asOptions ? _rollupPluginBabelHelpers_0c84a174_objectSpread2(_rollupPluginBabelHelpers_0c84a174_objectSpread2({}, elementProps), asOptions) : elementProps; 16654 16655 var _element = useCreateElement$1(as, allProps); 16656 16657 if (wrapElement) { 16658 return wrapElement(_element); 16659 } 16660 16661 return _element; 16662 } 16663 16664 return useCreateElement$1(as, _rollupPluginBabelHelpers_0c84a174_objectSpread2({ 16665 ref: ref 16666 }, props)); 16667 }; 16668 16669 if (false) {} 16670 16671 Comp = createComponent_forwardRef(Comp); 16672 16673 if (shouldMemo) { 16674 Comp = memo(Comp, propsAreEqual && normalizePropsAreEqual(propsAreEqual)); 16675 } 16676 16677 Comp.__keys = keys; 16678 Comp.unstable_propsAreEqual = normalizePropsAreEqual(propsAreEqual || shallowEqual); 16679 return Comp; 16680 } 16681 16682 16683 16684 ;// CONCATENATED MODULE: ./node_modules/reakit-system/es/useToken.js 16685 16686 16687 16688 /** 16689 * React custom hook that returns the value of any token defined in the 16690 * SystemContext. It's mainly used internally in [`useOptions`](#useoptions) 16691 * and [`useProps`](#useprops). 16692 * 16693 * @example 16694 * import { SystemProvider, useToken } from "reakit-system"; 16695 * 16696 * const system = { 16697 * token: "value", 16698 * }; 16699 * 16700 * function Component(props) { 16701 * const token = useToken("token", "default value"); 16702 * return <div {...props}>{token}</div>; 16703 * } 16704 * 16705 * function App() { 16706 * return ( 16707 * <SystemProvider unstable_system={system}> 16708 * <Component /> 16709 * </SystemProvider> 16710 * ); 16711 * } 16712 */ 16713 16714 function useToken(token, defaultValue) { 16715 (0,external_React_.useDebugValue)(token); 16716 var context = (0,external_React_.useContext)(SystemContext); 16717 return context[token] != null ? context[token] : defaultValue; 16718 } 16719 16720 16721 16722 ;// CONCATENATED MODULE: ./node_modules/reakit-system/es/useProps.js 16723 16724 16725 16726 16727 /** 16728 * React custom hook that returns the props returned by a given 16729 * `use${name}Props` in the SystemContext. 16730 * 16731 * @example 16732 * import { SystemProvider, useProps } from "reakit-system"; 16733 * 16734 * const system = { 16735 * useAProps(options, htmlProps) { 16736 * return { 16737 * ...htmlProps, 16738 * href: options.url, 16739 * }; 16740 * }, 16741 * }; 16742 * 16743 * function A({ url, ...htmlProps }) { 16744 * const props = useProps("A", { url }, htmlProps); 16745 * return <a {...props} />; 16746 * } 16747 * 16748 * function App() { 16749 * return ( 16750 * <SystemProvider unstable_system={system}> 16751 * <A url="url">It will convert url into href in useAProps</A> 16752 * </SystemProvider> 16753 * ); 16754 * } 16755 */ 16756 16757 function useProps(name, options, htmlProps) { 16758 if (options === void 0) { 16759 options = {}; 16760 } 16761 16762 if (htmlProps === void 0) { 16763 htmlProps = {}; 16764 } 16765 16766 var hookName = "use" + name + "Props"; 16767 (0,external_React_.useDebugValue)(hookName); 16768 var useHook = useToken(hookName); 16769 16770 if (useHook) { 16771 return useHook(options, htmlProps); 16772 } 16773 16774 return htmlProps; 16775 } 16776 16777 16778 16779 ;// CONCATENATED MODULE: ./node_modules/reakit-system/es/useOptions.js 16780 16781 16782 16783 16784 16785 /** 16786 * React custom hook that returns the options returned by a given 16787 * `use${name}Options` in the SystemContext. 16788 * 16789 * @example 16790 * import React from "react"; 16791 * import { SystemProvider, useOptions } from "reakit-system"; 16792 * 16793 * const system = { 16794 * useAOptions(options, htmlProps) { 16795 * return { 16796 * ...options, 16797 * url: htmlProps.href, 16798 * }; 16799 * }, 16800 * }; 16801 * 16802 * function A({ url, ...htmlProps }) { 16803 * const options = useOptions("A", { url }, htmlProps); 16804 * return <a href={options.url} {...htmlProps} />; 16805 * } 16806 * 16807 * function App() { 16808 * return ( 16809 * <SystemProvider unstable_system={system}> 16810 * <A href="url"> 16811 * It will convert href into url in useAOptions and then url into href in A 16812 * </A> 16813 * </SystemProvider> 16814 * ); 16815 * } 16816 */ 16817 16818 function useOptions(name, options, htmlProps) { 16819 if (options === void 0) { 16820 options = {}; 16821 } 16822 16823 if (htmlProps === void 0) { 16824 htmlProps = {}; 16825 } 16826 16827 var hookName = "use" + name + "Options"; 16828 (0,external_React_.useDebugValue)(hookName); 16829 var useHook = useToken(hookName); 16830 16831 if (useHook) { 16832 return _rollupPluginBabelHelpers_0c84a174_objectSpread2(_rollupPluginBabelHelpers_0c84a174_objectSpread2({}, options), useHook(options, htmlProps)); 16833 } 16834 16835 return options; 16836 } 16837 16838 16839 16840 ;// CONCATENATED MODULE: ./node_modules/reakit-utils/es/toArray.js 16841 /** 16842 * Transforms `arg` into an array if it's not already. 16843 * 16844 * @example 16845 * import { toArray } from "reakit-utils"; 16846 * 16847 * toArray("a"); // ["a"] 16848 * toArray(["a"]); // ["a"] 16849 */ 16850 function toArray(arg) { 16851 if (Array.isArray(arg)) { 16852 return arg; 16853 } 16854 16855 return typeof arg !== "undefined" ? [arg] : []; 16856 } 16857 16858 16859 16860 ;// CONCATENATED MODULE: ./node_modules/reakit-system/es/createHook.js 16861 16862 16863 16864 16865 16866 16867 16868 16869 16870 /** 16871 * Creates a React custom hook that will return component props. 16872 * 16873 * @example 16874 * import { createHook } from "reakit-system"; 16875 * 16876 * const useA = createHook({ 16877 * name: "A", 16878 * keys: ["url"], // custom props/options keys 16879 * useProps(options, htmlProps) { 16880 * return { 16881 * ...htmlProps, 16882 * href: options.url, 16883 * }; 16884 * }, 16885 * }); 16886 * 16887 * function A({ url, ...htmlProps }) { 16888 * const props = useA({ url }, htmlProps); 16889 * return <a {...props} />; 16890 * } 16891 * 16892 * @param options 16893 */ 16894 function createHook(options) { 16895 var _options$useState, _composedHooks$; 16896 16897 var composedHooks = toArray(options.compose); 16898 16899 var __useOptions = function __useOptions(hookOptions, htmlProps) { 16900 // Call the current hook's useOptions first 16901 if (options.useOptions) { 16902 hookOptions = options.useOptions(hookOptions, htmlProps); 16903 } // If there's name, call useOptions from the system context 16904 16905 16906 if (options.name) { 16907 hookOptions = useOptions(options.name, hookOptions, htmlProps); 16908 } // Run composed hooks useOptions 16909 16910 16911 if (options.compose) { 16912 for (var _iterator = _rollupPluginBabelHelpers_0c84a174_createForOfIteratorHelperLoose(composedHooks), _step; !(_step = _iterator()).done;) { 16913 var hook = _step.value; 16914 hookOptions = hook.__useOptions(hookOptions, htmlProps); 16915 } 16916 } 16917 16918 return hookOptions; 16919 }; 16920 16921 var useHook = function useHook(hookOptions, htmlProps, unstable_ignoreUseOptions) { 16922 if (hookOptions === void 0) { 16923 hookOptions = {}; 16924 } 16925 16926 if (htmlProps === void 0) { 16927 htmlProps = {}; 16928 } 16929 16930 if (unstable_ignoreUseOptions === void 0) { 16931 unstable_ignoreUseOptions = false; 16932 } 16933 16934 // This won't execute when useHook was called from within another useHook 16935 if (!unstable_ignoreUseOptions) { 16936 hookOptions = __useOptions(hookOptions, htmlProps); 16937 } // Call the current hook's useProps 16938 16939 16940 if (options.useProps) { 16941 htmlProps = options.useProps(hookOptions, htmlProps); 16942 } // If there's name, call useProps from the system context 16943 16944 16945 if (options.name) { 16946 htmlProps = useProps(options.name, hookOptions, htmlProps); 16947 } 16948 16949 if (options.compose) { 16950 if (options.useComposeOptions) { 16951 hookOptions = options.useComposeOptions(hookOptions, htmlProps); 16952 } 16953 16954 if (options.useComposeProps) { 16955 htmlProps = options.useComposeProps(hookOptions, htmlProps); 16956 } else { 16957 for (var _iterator2 = _rollupPluginBabelHelpers_0c84a174_createForOfIteratorHelperLoose(composedHooks), _step2; !(_step2 = _iterator2()).done;) { 16958 var hook = _step2.value; 16959 htmlProps = hook(hookOptions, htmlProps, true); 16960 } 16961 } 16962 } // Remove undefined values from htmlProps 16963 16964 16965 var finalHTMLProps = {}; 16966 var definedHTMLProps = htmlProps || {}; 16967 16968 for (var prop in definedHTMLProps) { 16969 if (definedHTMLProps[prop] !== undefined) { 16970 finalHTMLProps[prop] = definedHTMLProps[prop]; 16971 } 16972 } 16973 16974 return finalHTMLProps; 16975 }; 16976 16977 useHook.__useOptions = __useOptions; 16978 var composedKeys = composedHooks.reduce(function (keys, hook) { 16979 keys.push.apply(keys, hook.__keys || []); 16980 return keys; 16981 }, []); // It's used by createComponent to split option props (keys) and html props 16982 16983 useHook.__keys = [].concat(composedKeys, ((_options$useState = options.useState) === null || _options$useState === void 0 ? void 0 : _options$useState.__keys) || [], options.keys || []); 16984 useHook.unstable_propsAreEqual = options.propsAreEqual || ((_composedHooks$ = composedHooks[0]) === null || _composedHooks$ === void 0 ? void 0 : _composedHooks$.unstable_propsAreEqual) || shallowEqual; 16985 16986 if (false) {} 16987 16988 return useHook; 16989 } 16990 16991 16992 16993 ;// CONCATENATED MODULE: ./node_modules/reakit-utils/es/useForkRef.js 16994 16995 16996 // https://github.com/mui-org/material-ui/blob/2bcc874cf07b81202968f769cb9c2398c7c11311/packages/material-ui/src/utils/useForkRef.js 16997 16998 function setRef(ref, value) { 16999 if (value === void 0) { 17000 value = null; 17001 } 17002 17003 if (!ref) return; 17004 17005 if (typeof ref === "function") { 17006 ref(value); 17007 } else { 17008 ref.current = value; 17009 } 17010 } 17011 /** 17012 * Merges up to two React Refs into a single memoized function React Ref so you 17013 * can pass it to an element. 17014 * 17015 * @example 17016 * import React from "react"; 17017 * import { useForkRef } from "reakit-utils"; 17018 * 17019 * const Component = React.forwardRef((props, ref) => { 17020 * const internalRef = React.useRef(); 17021 * return <div {...props} ref={useForkRef(internalRef, ref)} />; 17022 * }); 17023 */ 17024 17025 17026 function useForkRef(refA, refB) { 17027 return (0,external_React_.useMemo)(function () { 17028 if (refA == null && refB == null) { 17029 return null; 17030 } 17031 17032 return function (value) { 17033 setRef(refA, value); 17034 setRef(refB, value); 17035 }; 17036 }, [refA, refB]); 17037 } 17038 17039 17040 17041 ;// CONCATENATED MODULE: ./node_modules/reakit-warning/es/useWarning.js 17042 17043 17044 17045 17046 17047 function isRefObject(ref) { 17048 return isObject(ref) && "current" in ref; 17049 } 17050 /** 17051 * Logs `messages` to the console using `console.warn` based on a `condition`. 17052 * This should be used inside components. 17053 */ 17054 17055 17056 function useWarning(condition) { 17057 for (var _len = arguments.length, messages = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) { 17058 messages[_key - 1] = arguments[_key]; 17059 } 17060 17061 if (false) {} 17062 } 17063 17064 17065 17066 ;// CONCATENATED MODULE: ./node_modules/reakit-warning/es/index.js 17067 17068 17069 17070 17071 17072 17073 ;// CONCATENATED MODULE: ./node_modules/reakit-utils/es/getDocument.js 17074 /** 17075 * Returns `element.ownerDocument || document`. 17076 */ 17077 function getDocument(element) { 17078 return element ? element.ownerDocument || element : document; 17079 } 17080 17081 17082 17083 ;// CONCATENATED MODULE: ./node_modules/reakit-utils/es/getWindow.js 17084 17085 17086 // Thanks to Fluent UI for doing the [research on IE11 memory leak](https://github.com/microsoft/fluentui/pull/9010#issuecomment-490768427) 17087 17088 var _window; // Note: Accessing "window" in IE11 is somewhat expensive, and calling "typeof window" 17089 // hits a memory leak, whereas aliasing it and calling "typeof _window" does not. 17090 // Caching the window value at the file scope lets us minimize the impact. 17091 17092 17093 try { 17094 _window = window; 17095 } catch (e) { 17096 /* no-op */ 17097 } 17098 /** 17099 * Returns `element.ownerDocument.defaultView || window`. 17100 */ 17101 17102 17103 function getWindow(element) { 17104 if (!element) { 17105 return _window; 17106 } 17107 17108 return getDocument(element).defaultView || _window; 17109 } 17110 17111 17112 17113 ;// CONCATENATED MODULE: ./node_modules/reakit-utils/es/canUseDOM.js 17114 17115 17116 17117 function checkIsBrowser() { 17118 var _window = getWindow(); 17119 17120 return Boolean(typeof _window !== "undefined" && _window.document && _window.document.createElement); 17121 } 17122 /** 17123 * It's `true` if it is running in a browser environment or `false` if it is not (SSR). 17124 * 17125 * @example 17126 * import { canUseDOM } from "reakit-utils"; 17127 * 17128 * const title = canUseDOM ? document.title : ""; 17129 */ 17130 17131 17132 var canUseDOM = checkIsBrowser(); 17133 17134 17135 17136 ;// CONCATENATED MODULE: ./node_modules/reakit-utils/es/useIsomorphicEffect.js 17137 17138 17139 17140 17141 17142 /** 17143 * `React.useLayoutEffect` that fallbacks to `React.useEffect` on server side 17144 * rendering. 17145 */ 17146 17147 var useIsomorphicEffect = !canUseDOM ? external_React_.useEffect : external_React_.useLayoutEffect; 17148 17149 17150 17151 ;// CONCATENATED MODULE: ./node_modules/reakit-utils/es/useLiveRef.js 17152 17153 17154 17155 17156 17157 17158 /** 17159 * A `React.Ref` that keeps track of the passed `value`. 17160 */ 17161 17162 function useLiveRef(value) { 17163 var ref = (0,external_React_.useRef)(value); 17164 useIsomorphicEffect(function () { 17165 ref.current = value; 17166 }); 17167 return ref; 17168 } 17169 17170 17171 17172 ;// CONCATENATED MODULE: ./node_modules/reakit-utils/es/isSelfTarget.js 17173 /** 17174 * Returns `true` if `event.target` and `event.currentTarget` are the same. 17175 */ 17176 function isSelfTarget(event) { 17177 return event.target === event.currentTarget; 17178 } 17179 17180 17181 17182 ;// CONCATENATED MODULE: ./node_modules/reakit-utils/es/getActiveElement.js 17183 17184 17185 /** 17186 * Returns `element.ownerDocument.activeElement`. 17187 */ 17188 17189 function getActiveElement_getActiveElement(element) { 17190 var _getDocument = getDocument(element), 17191 activeElement = _getDocument.activeElement; 17192 17193 if (!(activeElement !== null && activeElement !== void 0 && activeElement.nodeName)) { 17194 // In IE11, activeElement might be an empty object if we're interacting 17195 // with elements inside of an iframe. 17196 return null; 17197 } 17198 17199 return activeElement; 17200 } 17201 17202 17203 17204 ;// CONCATENATED MODULE: ./node_modules/reakit-utils/es/contains.js 17205 /** 17206 * Similar to `Element.prototype.contains`, but a little bit faster when 17207 * `element` is the same as `child`. 17208 * 17209 * @example 17210 * import { contains } from "reakit-utils"; 17211 * 17212 * contains(document.getElementById("parent"), document.getElementById("child")); 17213 */ 17214 function contains(parent, child) { 17215 return parent === child || parent.contains(child); 17216 } 17217 17218 17219 17220 ;// CONCATENATED MODULE: ./node_modules/reakit-utils/es/hasFocusWithin.js 17221 17222 17223 17224 17225 /** 17226 * Checks if `element` has focus within. Elements that are referenced by 17227 * `aria-activedescendant` are also considered. 17228 * 17229 * @example 17230 * import { hasFocusWithin } from "reakit-utils"; 17231 * 17232 * hasFocusWithin(document.getElementById("id")); 17233 */ 17234 17235 function hasFocusWithin(element) { 17236 var activeElement = getActiveElement_getActiveElement(element); 17237 if (!activeElement) return false; 17238 if (contains(element, activeElement)) return true; 17239 var activeDescendant = activeElement.getAttribute("aria-activedescendant"); 17240 if (!activeDescendant) return false; 17241 if (activeDescendant === element.id) return true; 17242 return !!element.querySelector("#" + activeDescendant); 17243 } 17244 17245 17246 17247 ;// CONCATENATED MODULE: ./node_modules/reakit-utils/es/isPortalEvent.js 17248 17249 17250 /** 17251 * Returns `true` if `event` has been fired within a React Portal element. 17252 */ 17253 17254 function isPortalEvent(event) { 17255 return !contains(event.currentTarget, event.target); 17256 } 17257 17258 17259 17260 ;// CONCATENATED MODULE: ./node_modules/reakit-utils/es/isButton.js 17261 var buttonInputTypes = ["button", "color", "file", "image", "reset", "submit"]; 17262 /** 17263 * Checks whether `element` is a native HTML button element. 17264 * 17265 * @example 17266 * import { isButton } from "reakit-utils"; 17267 * 17268 * isButton(document.querySelector("button")); // true 17269 * isButton(document.querySelector("input[type='button']")); // true 17270 * isButton(document.querySelector("div")); // false 17271 * isButton(document.querySelector("input[type='text']")); // false 17272 * isButton(document.querySelector("div[role='button']")); // false 17273 * 17274 * @returns {boolean} 17275 */ 17276 17277 function isButton(element) { 17278 if (element.tagName === "BUTTON") return true; 17279 17280 if (element.tagName === "INPUT") { 17281 var input = element; 17282 return buttonInputTypes.indexOf(input.type) !== -1; 17283 } 17284 17285 return false; 17286 } 17287 17288 17289 17290 ;// CONCATENATED MODULE: ./node_modules/reakit-utils/es/dom.js 17291 17292 17293 17294 17295 /** 17296 * Checks if a given string exists in the user agent string. 17297 */ 17298 17299 function isUA(string) { 17300 if (!canUseDOM) return false; 17301 return window.navigator.userAgent.indexOf(string) !== -1; 17302 } 17303 17304 17305 17306 ;// CONCATENATED MODULE: ./node_modules/reakit-utils/es/matches.js 17307 /** 17308 * Ponyfill for `Element.prototype.matches` 17309 * 17310 * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/matches 17311 */ 17312 function matches(element, selectors) { 17313 if ("matches" in element) { 17314 return element.matches(selectors); 17315 } 17316 17317 if ("msMatchesSelector" in element) { 17318 return element.msMatchesSelector(selectors); 17319 } 17320 17321 return element.webkitMatchesSelector(selectors); 17322 } 17323 17324 17325 17326 ;// CONCATENATED MODULE: ./node_modules/reakit-utils/es/tabbable.js 17327 17328 17329 17330 17331 17332 /** @module tabbable */ 17333 var selector = "input:not([type='hidden']):not([disabled]), select:not([disabled]), " + "textarea:not([disabled]), a[href], button:not([disabled]), [tabindex], " + "iframe, object, embed, area[href], audio[controls], video[controls], " + "[contenteditable]:not([contenteditable='false'])"; 17334 17335 function isVisible(element) { 17336 var htmlElement = element; 17337 return htmlElement.offsetWidth > 0 || htmlElement.offsetHeight > 0 || element.getClientRects().length > 0; 17338 } 17339 17340 function hasNegativeTabIndex(element) { 17341 var tabIndex = parseInt(element.getAttribute("tabindex") || "0", 10); 17342 return tabIndex < 0; 17343 } 17344 /** 17345 * Checks whether `element` is focusable or not. 17346 * 17347 * @memberof tabbable 17348 * 17349 * @example 17350 * import { isFocusable } from "reakit-utils"; 17351 * 17352 * isFocusable(document.querySelector("input")); // true 17353 * isFocusable(document.querySelector("input[tabindex='-1']")); // true 17354 * isFocusable(document.querySelector("input[hidden]")); // false 17355 * isFocusable(document.querySelector("input:disabled")); // false 17356 */ 17357 17358 17359 function isFocusable(element) { 17360 return matches(element, selector) && isVisible(element); 17361 } 17362 /** 17363 * Checks whether `element` is tabbable or not. 17364 * 17365 * @memberof tabbable 17366 * 17367 * @example 17368 * import { isTabbable } from "reakit-utils"; 17369 * 17370 * isTabbable(document.querySelector("input")); // true 17371 * isTabbable(document.querySelector("input[tabindex='-1']")); // false 17372 * isTabbable(document.querySelector("input[hidden]")); // false 17373 * isTabbable(document.querySelector("input:disabled")); // false 17374 */ 17375 17376 function isTabbable(element) { 17377 return isFocusable(element) && !hasNegativeTabIndex(element); 17378 } 17379 /** 17380 * Returns all the focusable elements in `container`. 17381 * 17382 * @memberof tabbable 17383 * 17384 * @param {Element} container 17385 * 17386 * @returns {Element[]} 17387 */ 17388 17389 function getAllFocusableIn(container) { 17390 var allFocusable = Array.from(container.querySelectorAll(selector)); 17391 allFocusable.unshift(container); 17392 return allFocusable.filter(isFocusable); 17393 } 17394 /** 17395 * Returns the first focusable element in `container`. 17396 * 17397 * @memberof tabbable 17398 * 17399 * @param {Element} container 17400 * 17401 * @returns {Element|null} 17402 */ 17403 17404 function getFirstFocusableIn(container) { 17405 var _getAllFocusableIn = getAllFocusableIn(container), 17406 first = _getAllFocusableIn[0]; 17407 17408 return first || null; 17409 } 17410 /** 17411 * Returns all the tabbable elements in `container`, including the container 17412 * itself. 17413 * 17414 * @memberof tabbable 17415 * 17416 * @param {Element} container 17417 * @param fallbackToFocusable If `true`, it'll return focusable elements if there are no tabbable ones. 17418 * 17419 * @returns {Element[]} 17420 */ 17421 17422 function getAllTabbableIn(container, fallbackToFocusable) { 17423 var allFocusable = Array.from(container.querySelectorAll(selector)); 17424 var allTabbable = allFocusable.filter(isTabbable); 17425 17426 if (isTabbable(container)) { 17427 allTabbable.unshift(container); 17428 } 17429 17430 if (!allTabbable.length && fallbackToFocusable) { 17431 return allFocusable; 17432 } 17433 17434 return allTabbable; 17435 } 17436 /** 17437 * Returns the first tabbable element in `container`, including the container 17438 * itself if it's tabbable. 17439 * 17440 * @memberof tabbable 17441 * 17442 * @param {Element} container 17443 * @param fallbackToFocusable If `true`, it'll return the first focusable element if there are no tabbable ones. 17444 * 17445 * @returns {Element|null} 17446 */ 17447 17448 function getFirstTabbableIn(container, fallbackToFocusable) { 17449 var _getAllTabbableIn = getAllTabbableIn(container, fallbackToFocusable), 17450 first = _getAllTabbableIn[0]; 17451 17452 return first || null; 17453 } 17454 /** 17455 * Returns the last tabbable element in `container`, including the container 17456 * itself if it's tabbable. 17457 * 17458 * @memberof tabbable 17459 * 17460 * @param {Element} container 17461 * @param fallbackToFocusable If `true`, it'll return the last focusable element if there are no tabbable ones. 17462 * 17463 * @returns {Element|null} 17464 */ 17465 17466 function getLastTabbableIn(container, fallbackToFocusable) { 17467 var allTabbable = getAllTabbableIn(container, fallbackToFocusable); 17468 return allTabbable[allTabbable.length - 1] || null; 17469 } 17470 /** 17471 * Returns the next tabbable element in `container`. 17472 * 17473 * @memberof tabbable 17474 * 17475 * @param {Element} container 17476 * @param fallbackToFocusable If `true`, it'll return the next focusable element if there are no tabbable ones. 17477 * 17478 * @returns {Element|null} 17479 */ 17480 17481 function getNextTabbableIn(container, fallbackToFocusable) { 17482 var activeElement = getActiveElement(container); 17483 var allFocusable = getAllFocusableIn(container); 17484 var index = allFocusable.indexOf(activeElement); 17485 var slice = allFocusable.slice(index + 1); 17486 return slice.find(isTabbable) || allFocusable.find(isTabbable) || (fallbackToFocusable ? slice[0] : null); 17487 } 17488 /** 17489 * Returns the previous tabbable element in `container`. 17490 * 17491 * @memberof tabbable 17492 * 17493 * @param {Element} container 17494 * @param fallbackToFocusable If `true`, it'll return the previous focusable element if there are no tabbable ones. 17495 * 17496 * @returns {Element|null} 17497 */ 17498 17499 function getPreviousTabbableIn(container, fallbackToFocusable) { 17500 var activeElement = getActiveElement(container); 17501 var allFocusable = getAllFocusableIn(container).reverse(); 17502 var index = allFocusable.indexOf(activeElement); 17503 var slice = allFocusable.slice(index + 1); 17504 return slice.find(isTabbable) || allFocusable.find(isTabbable) || (fallbackToFocusable ? slice[0] : null); 17505 } 17506 /** 17507 * Returns the closest focusable element. 17508 * 17509 * @memberof tabbable 17510 * 17511 * @param {Element} container 17512 * 17513 * @returns {Element|null} 17514 */ 17515 17516 function getClosestFocusable(element) { 17517 while (element && !isFocusable(element)) { 17518 element = closest(element, selector); 17519 } 17520 17521 return element; 17522 } 17523 17524 17525 17526 ;// CONCATENATED MODULE: ./node_modules/reakit/es/Role/Role.js 17527 17528 17529 17530 17531 17532 // Automatically generated 17533 var ROLE_KEYS = ["unstable_system"]; 17534 17535 var useRole = createHook({ 17536 name: "Role", 17537 keys: ROLE_KEYS, 17538 propsAreEqual: function propsAreEqual(prev, next) { 17539 var prevSystem = prev.unstable_system, 17540 prevProps = _rollupPluginBabelHelpers_1f0bf8c2_objectWithoutPropertiesLoose(prev, ["unstable_system"]); 17541 17542 var nextSystem = next.unstable_system, 17543 nextProps = _rollupPluginBabelHelpers_1f0bf8c2_objectWithoutPropertiesLoose(next, ["unstable_system"]); 17544 17545 if (prevSystem !== nextSystem && !shallowEqual(prevSystem, nextSystem)) { 17546 return false; 17547 } 17548 17549 return shallowEqual(prevProps, nextProps); 17550 } 17551 }); 17552 var Role = createComponent({ 17553 as: "div", 17554 useHook: useRole 17555 }); 17556 17557 17558 17559 ;// CONCATENATED MODULE: ./node_modules/reakit/es/Tabbable/Tabbable.js 17560 17561 17562 17563 17564 17565 17566 17567 17568 17569 17570 17571 17572 17573 17574 17575 17576 // Automatically generated 17577 var TABBABLE_KEYS = ["disabled", "focusable"]; 17578 17579 var isSafariOrFirefoxOnMac = isUA("Mac") && !isUA("Chrome") && (isUA("Safari") || isUA("Firefox")); 17580 17581 function focusIfNeeded(element) { 17582 if (!hasFocusWithin(element) && isFocusable(element)) { 17583 element.focus(); 17584 } 17585 } 17586 17587 function isNativeTabbable(element) { 17588 return ["BUTTON", "INPUT", "SELECT", "TEXTAREA", "A"].includes(element.tagName); 17589 } 17590 17591 function supportsDisabledAttribute(element) { 17592 return ["BUTTON", "INPUT", "SELECT", "TEXTAREA"].includes(element.tagName); 17593 } 17594 17595 function getTabIndex(trulyDisabled, nativeTabbable, supportsDisabled, htmlTabIndex) { 17596 if (trulyDisabled) { 17597 if (nativeTabbable && !supportsDisabled) { 17598 // Anchor, audio and video tags don't support the `disabled` attribute. 17599 // We must pass tabIndex={-1} so they don't receive focus on tab. 17600 return -1; 17601 } // Elements that support the `disabled` attribute don't need tabIndex. 17602 17603 17604 return undefined; 17605 } 17606 17607 if (nativeTabbable) { 17608 // If the element is enabled and it's natively tabbable, we don't need to 17609 // specify a tabIndex attribute unless it's explicitly set by the user. 17610 return htmlTabIndex; 17611 } // If the element is enabled and is not natively tabbable, we have to 17612 // fallback tabIndex={0}. 17613 17614 17615 return htmlTabIndex || 0; 17616 } 17617 17618 function useDisableEvent(htmlEventRef, disabled) { 17619 return (0,external_React_.useCallback)(function (event) { 17620 var _htmlEventRef$current; 17621 17622 (_htmlEventRef$current = htmlEventRef.current) === null || _htmlEventRef$current === void 0 ? void 0 : _htmlEventRef$current.call(htmlEventRef, event); 17623 if (event.defaultPrevented) return; 17624 17625 if (disabled) { 17626 event.stopPropagation(); 17627 event.preventDefault(); 17628 } 17629 }, [htmlEventRef, disabled]); 17630 } 17631 17632 var useTabbable = createHook({ 17633 name: "Tabbable", 17634 compose: useRole, 17635 keys: TABBABLE_KEYS, 17636 useOptions: function useOptions(options, _ref) { 17637 var disabled = _ref.disabled; 17638 return _objectSpread2({ 17639 disabled: disabled 17640 }, options); 17641 }, 17642 useProps: function useProps(options, _ref2) { 17643 var htmlRef = _ref2.ref, 17644 htmlTabIndex = _ref2.tabIndex, 17645 htmlOnClickCapture = _ref2.onClickCapture, 17646 htmlOnMouseDownCapture = _ref2.onMouseDownCapture, 17647 htmlOnMouseDown = _ref2.onMouseDown, 17648 htmlOnKeyPressCapture = _ref2.onKeyPressCapture, 17649 htmlStyle = _ref2.style, 17650 htmlProps = _rollupPluginBabelHelpers_1f0bf8c2_objectWithoutPropertiesLoose(_ref2, ["ref", "tabIndex", "onClickCapture", "onMouseDownCapture", "onMouseDown", "onKeyPressCapture", "style"]); 17651 17652 var ref = (0,external_React_.useRef)(null); 17653 var onClickCaptureRef = useLiveRef(htmlOnClickCapture); 17654 var onMouseDownCaptureRef = useLiveRef(htmlOnMouseDownCapture); 17655 var onMouseDownRef = useLiveRef(htmlOnMouseDown); 17656 var onKeyPressCaptureRef = useLiveRef(htmlOnKeyPressCapture); 17657 var trulyDisabled = !!options.disabled && !options.focusable; 17658 17659 var _React$useState = (0,external_React_.useState)(true), 17660 nativeTabbable = _React$useState[0], 17661 setNativeTabbable = _React$useState[1]; 17662 17663 var _React$useState2 = (0,external_React_.useState)(true), 17664 supportsDisabled = _React$useState2[0], 17665 setSupportsDisabled = _React$useState2[1]; 17666 17667 var style = options.disabled ? _objectSpread2({ 17668 pointerEvents: "none" 17669 }, htmlStyle) : htmlStyle; 17670 useIsomorphicEffect(function () { 17671 var tabbable = ref.current; 17672 17673 if (!tabbable) { 17674 false ? 0 : void 0; 17675 return; 17676 } 17677 17678 if (!isNativeTabbable(tabbable)) { 17679 setNativeTabbable(false); 17680 } 17681 17682 if (!supportsDisabledAttribute(tabbable)) { 17683 setSupportsDisabled(false); 17684 } 17685 }, []); 17686 var onClickCapture = useDisableEvent(onClickCaptureRef, options.disabled); 17687 var onMouseDownCapture = useDisableEvent(onMouseDownCaptureRef, options.disabled); 17688 var onKeyPressCapture = useDisableEvent(onKeyPressCaptureRef, options.disabled); 17689 var onMouseDown = (0,external_React_.useCallback)(function (event) { 17690 var _onMouseDownRef$curre; 17691 17692 (_onMouseDownRef$curre = onMouseDownRef.current) === null || _onMouseDownRef$curre === void 0 ? void 0 : _onMouseDownRef$curre.call(onMouseDownRef, event); 17693 var element = event.currentTarget; 17694 if (event.defaultPrevented) return; // Safari and Firefox on MacOS don't focus on buttons on mouse down 17695 // like other browsers/platforms. Instead, they focus on the closest 17696 // focusable ancestor element, which is ultimately the body element. So 17697 // we make sure to give focus to the tabbable element on mouse down so 17698 // it works consistently across browsers. 17699 17700 if (!isSafariOrFirefoxOnMac) return; 17701 if (isPortalEvent(event)) return; 17702 if (!isButton(element)) return; // We can't focus right away after on mouse down, otherwise it would 17703 // prevent drag events from happening. So we schedule the focus to the 17704 // next animation frame. 17705 17706 var raf = requestAnimationFrame(function () { 17707 element.removeEventListener("mouseup", focusImmediately, true); 17708 focusIfNeeded(element); 17709 }); // If mouseUp happens before the next animation frame (which is common 17710 // on touch screens or by just tapping the trackpad on MacBook's), we 17711 // cancel the animation frame and immediately focus on the element. 17712 17713 var focusImmediately = function focusImmediately() { 17714 cancelAnimationFrame(raf); 17715 focusIfNeeded(element); 17716 }; // By listening to the event in the capture phase, we make sure the 17717 // focus event is fired before the onMouseUp and onMouseUpCapture React 17718 // events, which is aligned with the default browser behavior. 17719 17720 17721 element.addEventListener("mouseup", focusImmediately, { 17722 once: true, 17723 capture: true 17724 }); 17725 }, []); 17726 return _objectSpread2({ 17727 ref: useForkRef(ref, htmlRef), 17728 style: style, 17729 tabIndex: getTabIndex(trulyDisabled, nativeTabbable, supportsDisabled, htmlTabIndex), 17730 disabled: trulyDisabled && supportsDisabled ? true : undefined, 17731 "aria-disabled": options.disabled ? true : undefined, 17732 onClickCapture: onClickCapture, 17733 onMouseDownCapture: onMouseDownCapture, 17734 onMouseDown: onMouseDown, 17735 onKeyPressCapture: onKeyPressCapture 17736 }, htmlProps); 17737 } 17738 }); 17739 var Tabbable = createComponent({ 17740 as: "div", 17741 useHook: useTabbable 17742 }); 17743 17744 17745 17746 ;// CONCATENATED MODULE: ./node_modules/reakit/es/Clickable/Clickable.js 17747 17748 17749 17750 17751 17752 17753 17754 17755 17756 17757 17758 17759 17760 17761 17762 17763 17764 17765 // Automatically generated 17766 var CLICKABLE_KEYS = ["unstable_clickOnEnter", "unstable_clickOnSpace"]; 17767 17768 function isNativeClick(event) { 17769 var element = event.currentTarget; 17770 if (!event.isTrusted) return false; // istanbul ignore next: can't test trusted events yet 17771 17772 return isButton(element) || element.tagName === "INPUT" || element.tagName === "TEXTAREA" || element.tagName === "A" || element.tagName === "SELECT"; 17773 } 17774 17775 var useClickable = createHook({ 17776 name: "Clickable", 17777 compose: useTabbable, 17778 keys: CLICKABLE_KEYS, 17779 useOptions: function useOptions(_ref) { 17780 var _ref$unstable_clickOn = _ref.unstable_clickOnEnter, 17781 unstable_clickOnEnter = _ref$unstable_clickOn === void 0 ? true : _ref$unstable_clickOn, 17782 _ref$unstable_clickOn2 = _ref.unstable_clickOnSpace, 17783 unstable_clickOnSpace = _ref$unstable_clickOn2 === void 0 ? true : _ref$unstable_clickOn2, 17784 options = _rollupPluginBabelHelpers_1f0bf8c2_objectWithoutPropertiesLoose(_ref, ["unstable_clickOnEnter", "unstable_clickOnSpace"]); 17785 17786 return _objectSpread2({ 17787 unstable_clickOnEnter: unstable_clickOnEnter, 17788 unstable_clickOnSpace: unstable_clickOnSpace 17789 }, options); 17790 }, 17791 useProps: function useProps(options, _ref2) { 17792 var htmlOnKeyDown = _ref2.onKeyDown, 17793 htmlOnKeyUp = _ref2.onKeyUp, 17794 htmlProps = _rollupPluginBabelHelpers_1f0bf8c2_objectWithoutPropertiesLoose(_ref2, ["onKeyDown", "onKeyUp"]); 17795 17796 var _React$useState = (0,external_React_.useState)(false), 17797 active = _React$useState[0], 17798 setActive = _React$useState[1]; 17799 17800 var onKeyDownRef = useLiveRef(htmlOnKeyDown); 17801 var onKeyUpRef = useLiveRef(htmlOnKeyUp); 17802 var onKeyDown = (0,external_React_.useCallback)(function (event) { 17803 var _onKeyDownRef$current; 17804 17805 (_onKeyDownRef$current = onKeyDownRef.current) === null || _onKeyDownRef$current === void 0 ? void 0 : _onKeyDownRef$current.call(onKeyDownRef, event); 17806 if (event.defaultPrevented) return; 17807 if (options.disabled) return; 17808 if (event.metaKey) return; 17809 if (!isSelfTarget(event)) return; 17810 var isEnter = options.unstable_clickOnEnter && event.key === "Enter"; 17811 var isSpace = options.unstable_clickOnSpace && event.key === " "; 17812 17813 if (isEnter || isSpace) { 17814 if (isNativeClick(event)) return; 17815 event.preventDefault(); 17816 17817 if (isEnter) { 17818 event.currentTarget.click(); 17819 } else if (isSpace) { 17820 setActive(true); 17821 } 17822 } 17823 }, [options.disabled, options.unstable_clickOnEnter, options.unstable_clickOnSpace]); 17824 var onKeyUp = (0,external_React_.useCallback)(function (event) { 17825 var _onKeyUpRef$current; 17826 17827 (_onKeyUpRef$current = onKeyUpRef.current) === null || _onKeyUpRef$current === void 0 ? void 0 : _onKeyUpRef$current.call(onKeyUpRef, event); 17828 if (event.defaultPrevented) return; 17829 if (options.disabled) return; 17830 if (event.metaKey) return; 17831 var isSpace = options.unstable_clickOnSpace && event.key === " "; 17832 17833 if (active && isSpace) { 17834 setActive(false); 17835 event.currentTarget.click(); 17836 } 17837 }, [options.disabled, options.unstable_clickOnSpace, active]); 17838 return _objectSpread2({ 17839 "data-active": active || undefined, 17840 onKeyDown: onKeyDown, 17841 onKeyUp: onKeyUp 17842 }, htmlProps); 17843 } 17844 }); 17845 var Clickable = createComponent({ 17846 as: "button", 17847 memo: true, 17848 useHook: useClickable 17849 }); 17850 17851 17852 17853 ;// CONCATENATED MODULE: ./node_modules/reakit/es/getCurrentId-5aa9849e.js 17854 function findFirstEnabledItem(items, excludeId) { 17855 if (excludeId) { 17856 return items.find(function (item) { 17857 return !item.disabled && item.id !== excludeId; 17858 }); 17859 } 17860 17861 return items.find(function (item) { 17862 return !item.disabled; 17863 }); 17864 } 17865 17866 function getCurrentId(options, passedId) { 17867 var _findFirstEnabledItem; 17868 17869 if (passedId || passedId === null) { 17870 return passedId; 17871 } 17872 17873 if (options.currentId || options.currentId === null) { 17874 return options.currentId; 17875 } 17876 17877 return (_findFirstEnabledItem = findFirstEnabledItem(options.items || [])) === null || _findFirstEnabledItem === void 0 ? void 0 : _findFirstEnabledItem.id; 17878 } 17879 17880 17881 17882 ;// CONCATENATED MODULE: ./node_modules/reakit/es/__keys-6742f591.js 17883 // Automatically generated 17884 var COMPOSITE_STATE_KEYS = ["baseId", "unstable_idCountRef", "setBaseId", "unstable_virtual", "rtl", "orientation", "items", "groups", "currentId", "loop", "wrap", "shift", "unstable_moves", "unstable_hasActiveWidget", "unstable_includesBaseElement", "registerItem", "unregisterItem", "registerGroup", "unregisterGroup", "move", "next", "previous", "up", "down", "first", "last", "sort", "unstable_setVirtual", "setRTL", "setOrientation", "setCurrentId", "setLoop", "setWrap", "setShift", "reset", "unstable_setIncludesBaseElement", "unstable_setHasActiveWidget"]; 17885 var COMPOSITE_KEYS = COMPOSITE_STATE_KEYS; 17886 var COMPOSITE_GROUP_KEYS = COMPOSITE_KEYS; 17887 var COMPOSITE_ITEM_KEYS = COMPOSITE_GROUP_KEYS; 17888 var COMPOSITE_ITEM_WIDGET_KEYS = (/* unused pure expression or super */ null && (COMPOSITE_ITEM_KEYS)); 17889 17890 17891 17892 ;// CONCATENATED MODULE: ./node_modules/reakit/es/userFocus-e16425e3.js 17893 function userFocus(element) { 17894 element.userFocus = true; 17895 element.focus(); 17896 element.userFocus = false; 17897 } 17898 function hasUserFocus(element) { 17899 return !!element.userFocus; 17900 } 17901 function setUserFocus(element, value) { 17902 element.userFocus = value; 17903 } 17904 17905 17906 17907 ;// CONCATENATED MODULE: ./node_modules/reakit-utils/es/isTextField.js 17908 /** 17909 * Check whether the given element is a text field, where text field is defined 17910 * by the ability to select within the input, or that it is contenteditable. 17911 * 17912 * @example 17913 * import { isTextField } from "reakit-utils"; 17914 * 17915 * isTextField(document.querySelector("div")); // false 17916 * isTextField(document.querySelector("input")); // true 17917 * isTextField(document.querySelector("input[type='button']")); // false 17918 * isTextField(document.querySelector("textarea")); // true 17919 * isTextField(document.querySelector("div[contenteditable='true']")); // true 17920 */ 17921 function isTextField(element) { 17922 try { 17923 var isTextInput = element instanceof HTMLInputElement && element.selectionStart !== null; 17924 var isTextArea = element.tagName === "TEXTAREA"; 17925 var isContentEditable = element.contentEditable === "true"; 17926 return isTextInput || isTextArea || isContentEditable || false; 17927 } catch (error) { 17928 // Safari throws an exception when trying to get `selectionStart` 17929 // on non-text <input> elements (which, understandably, don't 17930 // have the text selection API). We catch this via a try/catch 17931 // block, as opposed to a more explicit check of the element's 17932 // input types, because of Safari's non-standard behavior. This 17933 // also means we don't have to worry about the list of input 17934 // types that support `selectionStart` changing as the HTML spec 17935 // evolves over time. 17936 return false; 17937 } 17938 } 17939 17940 17941 17942 ;// CONCATENATED MODULE: ./node_modules/reakit-utils/es/hasFocus.js 17943 17944 17945 17946 /** 17947 * Checks if `element` has focus. Elements that are referenced by 17948 * `aria-activedescendant` are also considered. 17949 * 17950 * @example 17951 * import { hasFocus } from "reakit-utils"; 17952 * 17953 * hasFocus(document.getElementById("id")); 17954 */ 17955 17956 function hasFocus(element) { 17957 var activeElement = getActiveElement_getActiveElement(element); 17958 if (!activeElement) return false; 17959 if (activeElement === element) return true; 17960 var activeDescendant = activeElement.getAttribute("aria-activedescendant"); 17961 if (!activeDescendant) return false; 17962 return activeDescendant === element.id; 17963 } 17964 17965 17966 17967 ;// CONCATENATED MODULE: ./node_modules/reakit-utils/es/ensureFocus.js 17968 17969 17970 17971 17972 /** 17973 * Ensures `element` will receive focus if it's not already. 17974 * 17975 * @example 17976 * import { ensureFocus } from "reakit-utils"; 17977 * 17978 * ensureFocus(document.activeElement); // does nothing 17979 * 17980 * const element = document.querySelector("input"); 17981 * 17982 * ensureFocus(element); // focuses element 17983 * ensureFocus(element, { preventScroll: true }); // focuses element preventing scroll jump 17984 * 17985 * function isActive(el) { 17986 * return el.dataset.active === "true"; 17987 * } 17988 * 17989 * ensureFocus(document.querySelector("[data-active='true']"), { isActive }); // does nothing 17990 * 17991 * @returns {number} `requestAnimationFrame` call ID so it can be passed to `cancelAnimationFrame` if needed. 17992 */ 17993 function ensureFocus(element, _temp) { 17994 var _ref = _temp === void 0 ? {} : _temp, 17995 preventScroll = _ref.preventScroll, 17996 _ref$isActive = _ref.isActive, 17997 isActive = _ref$isActive === void 0 ? hasFocus : _ref$isActive; 17998 17999 if (isActive(element)) return -1; 18000 element.focus({ 18001 preventScroll: preventScroll 18002 }); 18003 if (isActive(element)) return -1; 18004 return requestAnimationFrame(function () { 18005 element.focus({ 18006 preventScroll: preventScroll 18007 }); 18008 }); 18009 } 18010 18011 18012 18013 ;// CONCATENATED MODULE: ./node_modules/reakit/es/Id/IdProvider.js 18014 18015 18016 var defaultPrefix = "id"; 18017 function generateRandomString(prefix) { 18018 if (prefix === void 0) { 18019 prefix = defaultPrefix; 18020 } 18021 18022 return "" + (prefix ? prefix + "-" : "") + Math.random().toString(32).substr(2, 6); 18023 } 18024 18025 var unstable_IdContext = /*#__PURE__*/(0,external_React_.createContext)(generateRandomString); 18026 function unstable_IdProvider(_ref) { 18027 var children = _ref.children, 18028 _ref$prefix = _ref.prefix, 18029 prefix = _ref$prefix === void 0 ? defaultPrefix : _ref$prefix; 18030 var count = useRef(0); 18031 var generateId = useCallback(function (localPrefix) { 18032 if (localPrefix === void 0) { 18033 localPrefix = prefix; 18034 } 18035 18036 return "" + (localPrefix ? localPrefix + "-" : "") + ++count.current; 18037 }, [prefix]); 18038 return /*#__PURE__*/createElement(unstable_IdContext.Provider, { 18039 value: generateId 18040 }, children); 18041 } 18042 18043 18044 18045 ;// CONCATENATED MODULE: ./node_modules/reakit/es/Id/Id.js 18046 18047 18048 18049 18050 18051 18052 // Automatically generated 18053 var ID_STATE_KEYS = ["baseId", "unstable_idCountRef", "setBaseId"]; 18054 var ID_KEYS = [].concat(ID_STATE_KEYS, ["id"]); 18055 18056 var unstable_useId = createHook({ 18057 keys: ID_KEYS, 18058 useOptions: function useOptions(options, htmlProps) { 18059 var generateId = (0,external_React_.useContext)(unstable_IdContext); 18060 18061 var _React$useState = (0,external_React_.useState)(function () { 18062 // This comes from useIdState 18063 if (options.unstable_idCountRef) { 18064 options.unstable_idCountRef.current += 1; 18065 return "-" + options.unstable_idCountRef.current; 18066 } // If there's no useIdState, we check if `baseId` was passed (as a prop, 18067 // not from useIdState). 18068 18069 18070 if (options.baseId) { 18071 return "-" + generateId(""); 18072 } 18073 18074 return ""; 18075 }), 18076 suffix = _React$useState[0]; // `baseId` will be the prop passed directly as a prop or via useIdState. 18077 // If there's neither, then it'll fallback to Context's generateId. 18078 // This generateId can result in a sequential ID (if there's a Provider) 18079 // or a random string (without Provider). 18080 18081 18082 var baseId = (0,external_React_.useMemo)(function () { 18083 return options.baseId || generateId(); 18084 }, [options.baseId, generateId]); 18085 var id = htmlProps.id || options.id || "" + baseId + suffix; 18086 return _objectSpread2(_objectSpread2({}, options), {}, { 18087 id: id 18088 }); 18089 }, 18090 useProps: function useProps(options, htmlProps) { 18091 return _objectSpread2({ 18092 id: options.id 18093 }, htmlProps); 18094 } 18095 }); 18096 var unstable_Id = createComponent({ 18097 as: "div", 18098 useHook: unstable_useId 18099 }); 18100 18101 18102 18103 ;// CONCATENATED MODULE: ./node_modules/reakit-utils/es/createEvent.js 18104 18105 18106 /** 18107 * Creates an `Event` in a way that also works on IE 11. 18108 * 18109 * @example 18110 * import { createEvent } from "reakit-utils"; 18111 * 18112 * const el = document.getElementById("id"); 18113 * el.dispatchEvent(createEvent(el, "blur", { bubbles: false })); 18114 */ 18115 18116 function createEvent(element, type, eventInit) { 18117 if (typeof Event === "function") { 18118 return new Event(type, eventInit); 18119 } // IE 11 doesn't support Event constructors 18120 18121 18122 var event = getDocument(element).createEvent("Event"); 18123 event.initEvent(type, eventInit === null || eventInit === void 0 ? void 0 : eventInit.bubbles, eventInit === null || eventInit === void 0 ? void 0 : eventInit.cancelable); 18124 return event; 18125 } 18126 18127 18128 18129 ;// CONCATENATED MODULE: ./node_modules/reakit-utils/es/fireEvent.js 18130 18131 18132 18133 /** 18134 * Creates and dispatches `Event` in a way that also works on IE 11. 18135 * 18136 * @example 18137 * import { fireEvent } from "reakit-utils"; 18138 * 18139 * fireEvent(document.getElementById("id"), "blur", { 18140 * bubbles: true, 18141 * cancelable: true, 18142 * }); 18143 */ 18144 18145 function fireEvent(element, type, eventInit) { 18146 return element.dispatchEvent(createEvent(element, type, eventInit)); 18147 } 18148 18149 18150 18151 ;// CONCATENATED MODULE: ./node_modules/reakit/es/setTextFieldValue-0a221f4e.js 18152 18153 18154 function setTextFieldValue(element, value) { 18155 if (element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement) { 18156 var _Object$getOwnPropert; 18157 18158 var proto = Object.getPrototypeOf(element); 18159 var setValue = (_Object$getOwnPropert = Object.getOwnPropertyDescriptor(proto, "value")) === null || _Object$getOwnPropert === void 0 ? void 0 : _Object$getOwnPropert.set; 18160 18161 if (setValue) { 18162 setValue.call(element, value); 18163 fireEvent(element, "input", { 18164 bubbles: true 18165 }); 18166 } 18167 } 18168 } 18169 18170 18171 18172 ;// CONCATENATED MODULE: ./node_modules/reakit/es/Composite/CompositeItem.js 18173 18174 18175 18176 18177 18178 18179 18180 18181 18182 18183 18184 18185 18186 18187 18188 18189 18190 18191 18192 18193 18194 18195 18196 18197 18198 18199 18200 18201 18202 function getWidget(itemElement) { 18203 return itemElement.querySelector("[data-composite-item-widget]"); 18204 } 18205 18206 function useItem(options) { 18207 return (0,external_React_.useMemo)(function () { 18208 var _options$items; 18209 18210 return (_options$items = options.items) === null || _options$items === void 0 ? void 0 : _options$items.find(function (item) { 18211 return options.id && item.id === options.id; 18212 }); 18213 }, [options.items, options.id]); 18214 } 18215 18216 function targetIsAnotherItem(event, items) { 18217 if (isSelfTarget(event)) return false; 18218 18219 for (var _iterator = _createForOfIteratorHelperLoose(items), _step; !(_step = _iterator()).done;) { 18220 var item = _step.value; 18221 18222 if (item.ref.current === event.target) { 18223 return true; 18224 } 18225 } 18226 18227 return false; 18228 } 18229 18230 var useCompositeItem = createHook({ 18231 name: "CompositeItem", 18232 compose: [useClickable, unstable_useId], 18233 keys: COMPOSITE_ITEM_KEYS, 18234 propsAreEqual: function propsAreEqual(prev, next) { 18235 if (!next.id || prev.id !== next.id) { 18236 return useClickable.unstable_propsAreEqual(prev, next); 18237 } 18238 18239 var prevCurrentId = prev.currentId, 18240 prevMoves = prev.unstable_moves, 18241 prevProps = _rollupPluginBabelHelpers_1f0bf8c2_objectWithoutPropertiesLoose(prev, ["currentId", "unstable_moves"]); 18242 18243 var nextCurrentId = next.currentId, 18244 nextMoves = next.unstable_moves, 18245 nextProps = _rollupPluginBabelHelpers_1f0bf8c2_objectWithoutPropertiesLoose(next, ["currentId", "unstable_moves"]); 18246 18247 if (nextCurrentId !== prevCurrentId) { 18248 if (next.id === nextCurrentId || next.id === prevCurrentId) { 18249 return false; 18250 } 18251 } else if (prevMoves !== nextMoves) { 18252 return false; 18253 } 18254 18255 return useClickable.unstable_propsAreEqual(prevProps, nextProps); 18256 }, 18257 useOptions: function useOptions(options) { 18258 return _objectSpread2(_objectSpread2({}, options), {}, { 18259 id: options.id, 18260 currentId: getCurrentId(options), 18261 unstable_clickOnSpace: options.unstable_hasActiveWidget ? false : options.unstable_clickOnSpace 18262 }); 18263 }, 18264 useProps: function useProps(options, _ref) { 18265 var _options$items2; 18266 18267 var htmlRef = _ref.ref, 18268 _ref$tabIndex = _ref.tabIndex, 18269 htmlTabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex, 18270 htmlOnMouseDown = _ref.onMouseDown, 18271 htmlOnFocus = _ref.onFocus, 18272 htmlOnBlurCapture = _ref.onBlurCapture, 18273 htmlOnKeyDown = _ref.onKeyDown, 18274 htmlOnClick = _ref.onClick, 18275 htmlProps = _rollupPluginBabelHelpers_1f0bf8c2_objectWithoutPropertiesLoose(_ref, ["ref", "tabIndex", "onMouseDown", "onFocus", "onBlurCapture", "onKeyDown", "onClick"]); 18276 18277 var ref = (0,external_React_.useRef)(null); 18278 var id = options.id; 18279 var trulyDisabled = options.disabled && !options.focusable; 18280 var isCurrentItem = options.currentId === id; 18281 var isCurrentItemRef = useLiveRef(isCurrentItem); 18282 var hasFocusedComposite = (0,external_React_.useRef)(false); 18283 var item = useItem(options); 18284 var onMouseDownRef = useLiveRef(htmlOnMouseDown); 18285 var onFocusRef = useLiveRef(htmlOnFocus); 18286 var onBlurCaptureRef = useLiveRef(htmlOnBlurCapture); 18287 var onKeyDownRef = useLiveRef(htmlOnKeyDown); 18288 var onClickRef = useLiveRef(htmlOnClick); 18289 var shouldTabIndex = !options.unstable_virtual && !options.unstable_hasActiveWidget && isCurrentItem || // We don't want to set tabIndex="-1" when using CompositeItem as a 18290 // standalone component, without state props. 18291 !((_options$items2 = options.items) !== null && _options$items2 !== void 0 && _options$items2.length); 18292 (0,external_React_.useEffect)(function () { 18293 var _options$registerItem; 18294 18295 if (!id) return undefined; 18296 (_options$registerItem = options.registerItem) === null || _options$registerItem === void 0 ? void 0 : _options$registerItem.call(options, { 18297 id: id, 18298 ref: ref, 18299 disabled: !!trulyDisabled 18300 }); 18301 return function () { 18302 var _options$unregisterIt; 18303 18304 (_options$unregisterIt = options.unregisterItem) === null || _options$unregisterIt === void 0 ? void 0 : _options$unregisterIt.call(options, id); 18305 }; 18306 }, [id, trulyDisabled, options.registerItem, options.unregisterItem]); 18307 (0,external_React_.useEffect)(function () { 18308 var element = ref.current; 18309 18310 if (!element) { 18311 false ? 0 : void 0; 18312 return; 18313 } // `moves` will be incremented whenever next, previous, up, down, first, 18314 // last or move have been called. This means that the composite item will 18315 // be focused whenever some of these functions are called. We're using 18316 // isCurrentItemRef instead of isCurrentItem because we don't want to 18317 // focus the item if isCurrentItem changes (and options.moves doesn't). 18318 18319 18320 if (options.unstable_moves && isCurrentItemRef.current) { 18321 userFocus(element); 18322 } 18323 }, [options.unstable_moves]); 18324 var onMouseDown = (0,external_React_.useCallback)(function (event) { 18325 var _onMouseDownRef$curre; 18326 18327 (_onMouseDownRef$curre = onMouseDownRef.current) === null || _onMouseDownRef$curre === void 0 ? void 0 : _onMouseDownRef$curre.call(onMouseDownRef, event); 18328 setUserFocus(event.currentTarget, true); 18329 }, []); 18330 var onFocus = (0,external_React_.useCallback)(function (event) { 18331 var _onFocusRef$current, _options$setCurrentId; 18332 18333 var shouldFocusComposite = hasUserFocus(event.currentTarget); 18334 setUserFocus(event.currentTarget, false); 18335 (_onFocusRef$current = onFocusRef.current) === null || _onFocusRef$current === void 0 ? void 0 : _onFocusRef$current.call(onFocusRef, event); 18336 if (event.defaultPrevented) return; 18337 if (isPortalEvent(event)) return; 18338 if (!id) return; 18339 if (targetIsAnotherItem(event, options.items)) return; 18340 (_options$setCurrentId = options.setCurrentId) === null || _options$setCurrentId === void 0 ? void 0 : _options$setCurrentId.call(options, id); // When using aria-activedescendant, we want to make sure that the 18341 // composite container receives focus, not the composite item. 18342 // But we don't want to do this if the target is another focusable 18343 // element inside the composite item, such as CompositeItemWidget. 18344 18345 if (shouldFocusComposite && options.unstable_virtual && options.baseId && isSelfTarget(event)) { 18346 var target = event.target; 18347 var composite = getDocument(target).getElementById(options.baseId); 18348 18349 if (composite) { 18350 hasFocusedComposite.current = true; 18351 ensureFocus(composite); 18352 } 18353 } 18354 }, [id, options.items, options.setCurrentId, options.unstable_virtual, options.baseId]); 18355 var onBlurCapture = (0,external_React_.useCallback)(function (event) { 18356 var _onBlurCaptureRef$cur; 18357 18358 (_onBlurCaptureRef$cur = onBlurCaptureRef.current) === null || _onBlurCaptureRef$cur === void 0 ? void 0 : _onBlurCaptureRef$cur.call(onBlurCaptureRef, event); 18359 if (event.defaultPrevented) return; 18360 18361 if (options.unstable_virtual && hasFocusedComposite.current) { 18362 // When hasFocusedComposite is true, composite has been focused right 18363 // after focusing this item. This is an intermediate blur event, so 18364 // we ignore it. 18365 hasFocusedComposite.current = false; 18366 event.preventDefault(); 18367 event.stopPropagation(); 18368 } 18369 }, [options.unstable_virtual]); 18370 var onKeyDown = (0,external_React_.useCallback)(function (event) { 18371 var _onKeyDownRef$current; 18372 18373 if (!isSelfTarget(event)) return; 18374 var isVertical = options.orientation !== "horizontal"; 18375 var isHorizontal = options.orientation !== "vertical"; 18376 var isGrid = !!(item !== null && item !== void 0 && item.groupId); 18377 var keyMap = { 18378 ArrowUp: (isGrid || isVertical) && options.up, 18379 ArrowRight: (isGrid || isHorizontal) && options.next, 18380 ArrowDown: (isGrid || isVertical) && options.down, 18381 ArrowLeft: (isGrid || isHorizontal) && options.previous, 18382 Home: function Home() { 18383 if (!isGrid || event.ctrlKey) { 18384 var _options$first; 18385 18386 (_options$first = options.first) === null || _options$first === void 0 ? void 0 : _options$first.call(options); 18387 } else { 18388 var _options$previous; 18389 18390 (_options$previous = options.previous) === null || _options$previous === void 0 ? void 0 : _options$previous.call(options, true); 18391 } 18392 }, 18393 End: function End() { 18394 if (!isGrid || event.ctrlKey) { 18395 var _options$last; 18396 18397 (_options$last = options.last) === null || _options$last === void 0 ? void 0 : _options$last.call(options); 18398 } else { 18399 var _options$next; 18400 18401 (_options$next = options.next) === null || _options$next === void 0 ? void 0 : _options$next.call(options, true); 18402 } 18403 }, 18404 PageUp: function PageUp() { 18405 if (isGrid) { 18406 var _options$up; 18407 18408 (_options$up = options.up) === null || _options$up === void 0 ? void 0 : _options$up.call(options, true); 18409 } else { 18410 var _options$first2; 18411 18412 (_options$first2 = options.first) === null || _options$first2 === void 0 ? void 0 : _options$first2.call(options); 18413 } 18414 }, 18415 PageDown: function PageDown() { 18416 if (isGrid) { 18417 var _options$down; 18418 18419 (_options$down = options.down) === null || _options$down === void 0 ? void 0 : _options$down.call(options, true); 18420 } else { 18421 var _options$last2; 18422 18423 (_options$last2 = options.last) === null || _options$last2 === void 0 ? void 0 : _options$last2.call(options); 18424 } 18425 } 18426 }; 18427 var action = keyMap[event.key]; 18428 18429 if (action) { 18430 event.preventDefault(); 18431 action(); 18432 return; 18433 } 18434 18435 (_onKeyDownRef$current = onKeyDownRef.current) === null || _onKeyDownRef$current === void 0 ? void 0 : _onKeyDownRef$current.call(onKeyDownRef, event); 18436 if (event.defaultPrevented) return; 18437 18438 if (event.key.length === 1 && event.key !== " ") { 18439 var widget = getWidget(event.currentTarget); 18440 18441 if (widget && isTextField(widget)) { 18442 widget.focus(); 18443 setTextFieldValue(widget, ""); 18444 } 18445 } else if (event.key === "Delete" || event.key === "Backspace") { 18446 var _widget = getWidget(event.currentTarget); 18447 18448 if (_widget && isTextField(_widget)) { 18449 event.preventDefault(); 18450 setTextFieldValue(_widget, ""); 18451 } 18452 } 18453 }, [options.orientation, item, options.up, options.next, options.down, options.previous, options.first, options.last]); 18454 var onClick = (0,external_React_.useCallback)(function (event) { 18455 var _onClickRef$current; 18456 18457 (_onClickRef$current = onClickRef.current) === null || _onClickRef$current === void 0 ? void 0 : _onClickRef$current.call(onClickRef, event); 18458 if (event.defaultPrevented) return; 18459 var element = event.currentTarget; 18460 var widget = getWidget(element); 18461 18462 if (widget && !hasFocusWithin(widget)) { 18463 // If there's a widget inside the composite item, we make sure it's 18464 // focused when pressing enter, space or clicking on the composite item. 18465 widget.focus(); 18466 } 18467 }, []); 18468 return _objectSpread2({ 18469 ref: useForkRef(ref, htmlRef), 18470 id: id, 18471 tabIndex: shouldTabIndex ? htmlTabIndex : -1, 18472 "aria-selected": options.unstable_virtual && isCurrentItem ? true : undefined, 18473 onMouseDown: onMouseDown, 18474 onFocus: onFocus, 18475 onBlurCapture: onBlurCapture, 18476 onKeyDown: onKeyDown, 18477 onClick: onClick 18478 }, htmlProps); 18479 } 18480 }); 18481 var CompositeItem = createComponent({ 18482 as: "button", 18483 memo: true, 18484 useHook: useCompositeItem 18485 }); 18486 18487 18488 18489 ;// CONCATENATED MODULE: external ["wp","dom"] 18490 var external_wp_dom_namespaceObject = window["wp"]["dom"]; 18491 ;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/close.js 18492 18493 18494 /** 18495 * WordPress dependencies 18496 */ 18497 18498 const close_close = (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.SVG, { 18499 xmlns: "http://www.w3.org/2000/svg", 18500 viewBox: "0 0 24 24" 18501 }, (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.Path, { 18502 d: "M13 11.8l6.1-6.3-1-1-6.1 6.2-6.1-6.2-1 1 6.1 6.3-6.5 6.7 1 1 6.5-6.6 6.5 6.6 1-1z" 18503 })); 18504 /* harmony default export */ var library_close = (close_close); 18505 18506 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/popover/utils.js 18507 // @ts-nocheck 18508 18509 /** 18510 * WordPress dependencies 18511 */ 18512 18513 /** 18514 * Module constants 18515 */ 18516 18517 const HEIGHT_OFFSET = 10; // Used by the arrow and a bit of empty space. 18518 18519 /** 18520 * Utility used to compute the popover position over the xAxis 18521 * 18522 * @param {Object} anchorRect Anchor Rect. 18523 * @param {Object} contentSize Content Size. 18524 * @param {string} xAxis Desired xAxis. 18525 * @param {string} corner Desired corner. 18526 * @param {boolean} stickyBoundaryElement The boundary element to use when 18527 * switching between sticky and normal 18528 * position. 18529 * @param {string} chosenYAxis yAxis to be used. 18530 * @param {Element} boundaryElement Boundary element. 18531 * @param {boolean} forcePosition Don't adjust position based on anchor. 18532 * @param {boolean} forceXAlignment Don't adjust alignment based on YAxis 18533 * 18534 * @return {Object} Popover xAxis position and constraints. 18535 */ 18536 18537 function computePopoverXAxisPosition(anchorRect, contentSize, xAxis, corner, stickyBoundaryElement, chosenYAxis, boundaryElement, forcePosition, forceXAlignment) { 18538 const { 18539 width 18540 } = contentSize; // Correct xAxis for RTL support. 18541 18542 if (xAxis === 'left' && (0,external_wp_i18n_namespaceObject.isRTL)()) { 18543 xAxis = 'right'; 18544 } else if (xAxis === 'right' && (0,external_wp_i18n_namespaceObject.isRTL)()) { 18545 xAxis = 'left'; 18546 } 18547 18548 if (corner === 'left' && (0,external_wp_i18n_namespaceObject.isRTL)()) { 18549 corner = 'right'; 18550 } else if (corner === 'right' && (0,external_wp_i18n_namespaceObject.isRTL)()) { 18551 corner = 'left'; 18552 } // X axis alignment choices. 18553 18554 18555 const anchorMidPoint = Math.round(anchorRect.left + anchorRect.width / 2); 18556 const centerAlignment = { 18557 popoverLeft: anchorMidPoint, 18558 contentWidth: (anchorMidPoint - width / 2 > 0 ? width / 2 : anchorMidPoint) + (anchorMidPoint + width / 2 > window.innerWidth ? window.innerWidth - anchorMidPoint : width / 2) 18559 }; 18560 let leftAlignmentX = anchorRect.left; 18561 18562 if (corner === 'right') { 18563 leftAlignmentX = anchorRect.right; 18564 } else if (chosenYAxis !== 'middle' && !forceXAlignment) { 18565 leftAlignmentX = anchorMidPoint; 18566 } 18567 18568 let rightAlignmentX = anchorRect.right; 18569 18570 if (corner === 'left') { 18571 rightAlignmentX = anchorRect.left; 18572 } else if (chosenYAxis !== 'middle' && !forceXAlignment) { 18573 rightAlignmentX = anchorMidPoint; 18574 } 18575 18576 const leftAlignment = { 18577 popoverLeft: leftAlignmentX, 18578 contentWidth: leftAlignmentX - width > 0 ? width : leftAlignmentX 18579 }; 18580 const rightAlignment = { 18581 popoverLeft: rightAlignmentX, 18582 contentWidth: rightAlignmentX + width > window.innerWidth ? window.innerWidth - rightAlignmentX : width 18583 }; // Choosing the x axis. 18584 18585 let chosenXAxis = xAxis; 18586 let contentWidth = null; 18587 18588 if (!stickyBoundaryElement && !forcePosition) { 18589 if (xAxis === 'center' && centerAlignment.contentWidth === width) { 18590 chosenXAxis = 'center'; 18591 } else if (xAxis === 'left' && leftAlignment.contentWidth === width) { 18592 chosenXAxis = 'left'; 18593 } else if (xAxis === 'right' && rightAlignment.contentWidth === width) { 18594 chosenXAxis = 'right'; 18595 } else { 18596 chosenXAxis = leftAlignment.contentWidth > rightAlignment.contentWidth ? 'left' : 'right'; 18597 const chosenWidth = chosenXAxis === 'left' ? leftAlignment.contentWidth : rightAlignment.contentWidth; // Limit width of the content to the viewport width 18598 18599 if (width > window.innerWidth) { 18600 contentWidth = window.innerWidth; 18601 } // If we can't find any alignment options that could fit 18602 // our content, then let's fallback to the center of the viewport. 18603 18604 18605 if (chosenWidth !== width) { 18606 chosenXAxis = 'center'; 18607 centerAlignment.popoverLeft = window.innerWidth / 2; 18608 } 18609 } 18610 } 18611 18612 let popoverLeft; 18613 18614 if (chosenXAxis === 'center') { 18615 popoverLeft = centerAlignment.popoverLeft; 18616 } else if (chosenXAxis === 'left') { 18617 popoverLeft = leftAlignment.popoverLeft; 18618 } else { 18619 popoverLeft = rightAlignment.popoverLeft; 18620 } 18621 18622 if (boundaryElement) { 18623 popoverLeft = Math.min(popoverLeft, boundaryElement.offsetLeft + boundaryElement.offsetWidth - width); // Avoid the popover being position beyond the left boundary if the 18624 // direction is left to right. 18625 18626 if (!(0,external_wp_i18n_namespaceObject.isRTL)()) { 18627 popoverLeft = Math.max(popoverLeft, 0); 18628 } 18629 } 18630 18631 return { 18632 xAxis: chosenXAxis, 18633 popoverLeft, 18634 contentWidth 18635 }; 18636 } 18637 /** 18638 * Utility used to compute the popover position over the yAxis 18639 * 18640 * @param {Object} anchorRect Anchor Rect. 18641 * @param {Object} contentSize Content Size. 18642 * @param {string} yAxis Desired yAxis. 18643 * @param {string} corner Desired corner. 18644 * @param {boolean} stickyBoundaryElement The boundary element to use when switching between sticky 18645 * and normal position. 18646 * @param {Element} anchorRef The anchor element. 18647 * @param {Element} relativeOffsetTop If applicable, top offset of the relative positioned 18648 * parent container. 18649 * @param {boolean} forcePosition Don't adjust position based on anchor. 18650 * @param {Element|null} editorWrapper Element that wraps the editor content. Used to access 18651 * scroll position to determine sticky behavior. 18652 * @return {Object} Popover xAxis position and constraints. 18653 */ 18654 18655 function computePopoverYAxisPosition(anchorRect, contentSize, yAxis, corner, stickyBoundaryElement, anchorRef, relativeOffsetTop, forcePosition, editorWrapper) { 18656 const { 18657 height 18658 } = contentSize; 18659 18660 if (stickyBoundaryElement) { 18661 const stickyRect = stickyBoundaryElement.getBoundingClientRect(); 18662 const stickyPositionTop = stickyRect.top + height - relativeOffsetTop; 18663 const stickyPositionBottom = stickyRect.bottom - height - relativeOffsetTop; 18664 18665 if (anchorRect.top <= stickyPositionTop) { 18666 if (editorWrapper) { 18667 // If a popover cannot be positioned above the anchor, even after scrolling, we must 18668 // ensure we use the bottom position instead of the popover slot. This prevents the 18669 // popover from always restricting block content and interaction while selected if the 18670 // block is near the top of the site editor. 18671 const isRoomAboveInCanvas = height + HEIGHT_OFFSET < editorWrapper.scrollTop + anchorRect.top; 18672 18673 if (!isRoomAboveInCanvas) { 18674 return { 18675 yAxis: 'bottom', 18676 // If the bottom of the block is also below the bottom sticky position (ex - 18677 // block is also taller than the editor window), return the bottom sticky 18678 // position instead. We do this instead of the top sticky position both to 18679 // allow a smooth transition and more importantly to ensure every section of 18680 // the block can be free from popover obscuration at some point in the 18681 // scroll position. 18682 popoverTop: Math.min(anchorRect.bottom, stickyPositionBottom) 18683 }; 18684 } 18685 } // Default sticky behavior. 18686 18687 18688 return { 18689 yAxis, 18690 popoverTop: Math.min(anchorRect.bottom, stickyPositionTop) 18691 }; 18692 } 18693 } // Y axis alignment choices. 18694 18695 18696 let anchorMidPoint = anchorRect.top + anchorRect.height / 2; 18697 18698 if (corner === 'bottom') { 18699 anchorMidPoint = anchorRect.bottom; 18700 } else if (corner === 'top') { 18701 anchorMidPoint = anchorRect.top; 18702 } 18703 18704 const middleAlignment = { 18705 popoverTop: anchorMidPoint, 18706 contentHeight: (anchorMidPoint - height / 2 > 0 ? height / 2 : anchorMidPoint) + (anchorMidPoint + height / 2 > window.innerHeight ? window.innerHeight - anchorMidPoint : height / 2) 18707 }; 18708 const topAlignment = { 18709 popoverTop: anchorRect.top, 18710 contentHeight: anchorRect.top - HEIGHT_OFFSET - height > 0 ? height : anchorRect.top - HEIGHT_OFFSET 18711 }; 18712 const bottomAlignment = { 18713 popoverTop: anchorRect.bottom, 18714 contentHeight: anchorRect.bottom + HEIGHT_OFFSET + height > window.innerHeight ? window.innerHeight - HEIGHT_OFFSET - anchorRect.bottom : height 18715 }; // Choosing the y axis. 18716 18717 let chosenYAxis = yAxis; 18718 let contentHeight = null; 18719 18720 if (!stickyBoundaryElement && !forcePosition) { 18721 if (yAxis === 'middle' && middleAlignment.contentHeight === height) { 18722 chosenYAxis = 'middle'; 18723 } else if (yAxis === 'top' && topAlignment.contentHeight === height) { 18724 chosenYAxis = 'top'; 18725 } else if (yAxis === 'bottom' && bottomAlignment.contentHeight === height) { 18726 chosenYAxis = 'bottom'; 18727 } else { 18728 chosenYAxis = topAlignment.contentHeight > bottomAlignment.contentHeight ? 'top' : 'bottom'; 18729 const chosenHeight = chosenYAxis === 'top' ? topAlignment.contentHeight : bottomAlignment.contentHeight; 18730 contentHeight = chosenHeight !== height ? chosenHeight : null; 18731 } 18732 } 18733 18734 let popoverTop; 18735 18736 if (chosenYAxis === 'middle') { 18737 popoverTop = middleAlignment.popoverTop; 18738 } else if (chosenYAxis === 'top') { 18739 popoverTop = topAlignment.popoverTop; 18740 } else { 18741 popoverTop = bottomAlignment.popoverTop; 18742 } 18743 18744 return { 18745 yAxis: chosenYAxis, 18746 popoverTop, 18747 contentHeight 18748 }; 18749 } 18750 /** 18751 * Utility used to compute the popover position and the content max width/height for a popover given 18752 * its anchor rect and its content size. 18753 * 18754 * @param {Object} anchorRect Anchor Rect. 18755 * @param {Object} contentSize Content Size. 18756 * @param {string} position Position. 18757 * @param {boolean} stickyBoundaryElement The boundary element to use when switching between 18758 * sticky and normal position. 18759 * @param {Element} anchorRef The anchor element. 18760 * @param {number} relativeOffsetTop If applicable, top offset of the relative positioned 18761 * parent container. 18762 * @param {Element} boundaryElement Boundary element. 18763 * @param {boolean} forcePosition Don't adjust position based on anchor. 18764 * @param {boolean} forceXAlignment Don't adjust alignment based on YAxis 18765 * @param {Element|null} editorWrapper Element that wraps the editor content. Used to access 18766 * scroll position to determine sticky behavior. 18767 * @return {Object} Popover position and constraints. 18768 */ 18769 18770 function computePopoverPosition(anchorRect, contentSize) { 18771 let position = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'top'; 18772 let stickyBoundaryElement = arguments.length > 3 ? arguments[3] : undefined; 18773 let anchorRef = arguments.length > 4 ? arguments[4] : undefined; 18774 let relativeOffsetTop = arguments.length > 5 ? arguments[5] : undefined; 18775 let boundaryElement = arguments.length > 6 ? arguments[6] : undefined; 18776 let forcePosition = arguments.length > 7 ? arguments[7] : undefined; 18777 let forceXAlignment = arguments.length > 8 ? arguments[8] : undefined; 18778 let editorWrapper = arguments.length > 9 ? arguments[9] : undefined; 18779 const [yAxis, xAxis = 'center', corner] = position.split(' '); 18780 const yAxisPosition = computePopoverYAxisPosition(anchorRect, contentSize, yAxis, corner, stickyBoundaryElement, anchorRef, relativeOffsetTop, forcePosition, editorWrapper); 18781 const xAxisPosition = computePopoverXAxisPosition(anchorRect, contentSize, xAxis, corner, stickyBoundaryElement, yAxisPosition.yAxis, boundaryElement, forcePosition, forceXAlignment); 18782 return { ...xAxisPosition, 18783 ...yAxisPosition 18784 }; 18785 } 18786 /** 18787 * Offsets the given rect by the position of the iframe that contains the 18788 * element. If the owner document is not in an iframe then it returns with the 18789 * original rect. If the popover container document and the anchor document are 18790 * the same, the original rect will also be returned. 18791 * 18792 * @param {DOMRect} rect bounds of the element 18793 * @param {Document} ownerDocument document of the element 18794 * @param {Element} container The popover container to position. 18795 * 18796 * @return {DOMRect} offsetted bounds 18797 */ 18798 18799 function offsetIframe(rect, ownerDocument, container) { 18800 const { 18801 defaultView 18802 } = ownerDocument; 18803 const { 18804 frameElement 18805 } = defaultView; 18806 18807 if (!frameElement || ownerDocument === container.ownerDocument) { 18808 return rect; 18809 } 18810 18811 const iframeRect = frameElement.getBoundingClientRect(); 18812 return new defaultView.DOMRect(rect.left + iframeRect.left, rect.top + iframeRect.top, rect.width, rect.height); 18813 } 18814 18815 ;// CONCATENATED MODULE: external ["wp","deprecated"] 18816 var external_wp_deprecated_namespaceObject = window["wp"]["deprecated"]; 18817 var external_wp_deprecated_default = /*#__PURE__*/__webpack_require__.n(external_wp_deprecated_namespaceObject); 18818 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/dashicon/index.js 18819 18820 18821 18822 /** 18823 * @typedef OwnProps 18824 * 18825 * @property {import('./types').IconKey} icon Icon name 18826 * @property {string} [className] Class name 18827 */ 18828 18829 /** @typedef {import('react').ComponentPropsWithoutRef<'span'> & OwnProps} Props */ 18830 18831 /** 18832 * @param {Props} props 18833 * @return {JSX.Element} Element 18834 */ 18835 function Dashicon(_ref) { 18836 let { 18837 icon, 18838 className, 18839 ...extraProps 18840 } = _ref; 18841 const iconClass = ['dashicon', 'dashicons', 'dashicons-' + icon, className].filter(Boolean).join(' '); 18842 return (0,external_wp_element_namespaceObject.createElement)("span", extends_extends({ 18843 className: iconClass 18844 }, extraProps)); 18845 } 18846 18847 /* harmony default export */ var dashicon = (Dashicon); 18848 18849 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/icon/index.js 18850 18851 18852 /** 18853 * External dependencies 18854 */ 18855 18856 /** 18857 * WordPress dependencies 18858 */ 18859 18860 18861 /** 18862 * Internal dependencies 18863 */ 18864 18865 18866 18867 function Icon(_ref) { 18868 let { 18869 icon = null, 18870 size = 24, 18871 ...additionalProps 18872 } = _ref; 18873 18874 if ('string' === typeof icon) { 18875 return (0,external_wp_element_namespaceObject.createElement)(dashicon, extends_extends({ 18876 icon: icon 18877 }, additionalProps)); 18878 } 18879 18880 if ((0,external_wp_element_namespaceObject.isValidElement)(icon) && dashicon === icon.type) { 18881 return (0,external_wp_element_namespaceObject.cloneElement)(icon, { ...additionalProps 18882 }); 18883 } 18884 18885 if ('function' === typeof icon) { 18886 if (icon.prototype instanceof external_wp_element_namespaceObject.Component) { 18887 return (0,external_wp_element_namespaceObject.createElement)(icon, { 18888 size, 18889 ...additionalProps 18890 }); 18891 } 18892 18893 return icon({ 18894 size, 18895 ...additionalProps 18896 }); 18897 } 18898 18899 if (icon && (icon.type === 'svg' || icon.type === external_wp_primitives_namespaceObject.SVG)) { 18900 const appliedProps = { 18901 width: size, 18902 height: size, 18903 ...icon.props, 18904 ...additionalProps 18905 }; 18906 return (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.SVG, appliedProps); 18907 } 18908 18909 if ((0,external_wp_element_namespaceObject.isValidElement)(icon)) { 18910 return (0,external_wp_element_namespaceObject.cloneElement)(icon, { 18911 // @ts-ignore Just forwarding the size prop along 18912 size, 18913 ...additionalProps 18914 }); 18915 } 18916 18917 return icon; 18918 } 18919 18920 /* harmony default export */ var build_module_icon = (Icon); 18921 18922 ;// CONCATENATED MODULE: external ["wp","warning"] 18923 var external_wp_warning_namespaceObject = window["wp"]["warning"]; 18924 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/ui/context/context-system-provider.js 18925 18926 18927 /** 18928 * External dependencies 18929 */ 18930 18931 /** 18932 * WordPress dependencies 18933 */ 18934 18935 18936 18937 const ComponentsContext = (0,external_wp_element_namespaceObject.createContext)( 18938 /** @type {Record<string, any>} */ 18939 {}); 18940 const useComponentsContext = () => (0,external_wp_element_namespaceObject.useContext)(ComponentsContext); 18941 /** 18942 * Runs an effect only on update (i.e., ignores the first render) 18943 * 18944 * @param {import('react').EffectCallback} effect 18945 * @param {import('react').DependencyList} deps 18946 */ 18947 18948 function useUpdateEffect(effect, deps) { 18949 const mounted = (0,external_wp_element_namespaceObject.useRef)(false); 18950 (0,external_wp_element_namespaceObject.useEffect)(() => { 18951 if (mounted.current) { 18952 return effect(); 18953 } 18954 18955 mounted.current = true; 18956 return undefined; 18957 }, deps); 18958 } 18959 /** 18960 * Consolidates incoming ContextSystem values with a (potential) parent ContextSystem value. 18961 * 18962 * Note: This function will warn if it detects an un-memoized `value` 18963 * 18964 * @param {Object} props 18965 * @param {Record<string, any>} props.value 18966 * @return {Record<string, any>} The consolidated value. 18967 */ 18968 18969 18970 function useContextSystemBridge(_ref) { 18971 let { 18972 value 18973 } = _ref; 18974 const parentContext = useComponentsContext(); 18975 const valueRef = (0,external_wp_element_namespaceObject.useRef)(value); 18976 useUpdateEffect(() => { 18977 if ( // Objects are equivalent. 18978 (0,external_lodash_namespaceObject.isEqual)(valueRef.current, value) && // But not the same reference. 18979 valueRef.current !== value) { 18980 typeof process !== "undefined" && process.env && "production" !== "production" ? 0 : void 0; 18981 } 18982 }, [value]); // `parentContext` will always be memoized (i.e., the result of this hook itself) 18983 // or the default value from when the `ComponentsContext` was originally 18984 // initialized (which will never change, it's a static variable) 18985 // so this memoization will prevent `merge` and `cloneDeep` from rerunning unless 18986 // the references to `value` change OR the `parentContext` has an actual material change 18987 // (because again, it's guaranteed to be memoized or a static reference to the empty object 18988 // so we know that the only changes for `parentContext` are material ones... i.e., why we 18989 // don't have to warn in the `useUpdateEffect` hook above for `parentContext` and we only 18990 // need to bother with the `value`). The `useUpdateEffect` above will ensure that we are 18991 // correctly warning when the `value` isn't being properly memoized. All of that to say 18992 // that this should be super safe to assume that `useMemo` will only run on actual 18993 // changes to the two dependencies, therefore saving us calls to `merge` and `cloneDeep`! 18994 18995 const config = (0,external_wp_element_namespaceObject.useMemo)(() => { 18996 return (0,external_lodash_namespaceObject.merge)((0,external_lodash_namespaceObject.cloneDeep)(parentContext), value); 18997 }, [parentContext, value]); 18998 return config; 18999 } 19000 /** 19001 * A Provider component that can modify props for connected components within 19002 * the Context system. 19003 * 19004 * @example 19005 * ```jsx 19006 * <ContextSystemProvider value={{ Button: { size: 'small' }}}> 19007 * <Button>...</Button> 19008 * </ContextSystemProvider> 19009 * ``` 19010 * 19011 * @template {Record<string, any>} T 19012 * @param {Object} options 19013 * @param {import('react').ReactNode} options.children Children to render. 19014 * @param {T} options.value Props to render into connected components. 19015 * @return {JSX.Element} A Provider wrapped component. 19016 */ 19017 19018 19019 const BaseContextSystemProvider = _ref2 => { 19020 let { 19021 children, 19022 value 19023 } = _ref2; 19024 const contextValue = useContextSystemBridge({ 19025 value 19026 }); 19027 return (0,external_wp_element_namespaceObject.createElement)(ComponentsContext.Provider, { 19028 value: contextValue 19029 }, children); 19030 }; 19031 19032 const ContextSystemProvider = (0,external_wp_element_namespaceObject.memo)(BaseContextSystemProvider); 19033 19034 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/ui/context/constants.js 19035 const REACT_TYPEOF_KEY = '$$typeof'; 19036 const COMPONENT_NAMESPACE = 'data-wp-component'; 19037 const CONNECTED_NAMESPACE = 'data-wp-c16t'; 19038 const CONTEXT_COMPONENT_NAMESPACE = 'data-wp-c5tc8t'; 19039 /** 19040 * Special key where the connected namespaces are stored. 19041 * This is attached to Context connected components as a static property. 19042 */ 19043 19044 const CONNECT_STATIC_NAMESPACE = '__contextSystemKey__'; 19045 19046 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/ui/context/utils.js 19047 /** 19048 * Internal dependencies 19049 */ 19050 19051 /** 19052 * Creates a dedicated context namespace HTML attribute for components. 19053 * ns is short for "namespace" 19054 * 19055 * @example 19056 * ```jsx 19057 * <div {...ns('Container')} /> 19058 * ``` 19059 * 19060 * @param {string} componentName The name for the component. 19061 * @return {Record<string, any>} A props object with the namespaced HTML attribute. 19062 */ 19063 19064 function getNamespace(componentName) { 19065 return { 19066 [COMPONENT_NAMESPACE]: componentName 19067 }; 19068 } 19069 /** 19070 * Creates a dedicated connected context namespace HTML attribute for components. 19071 * ns is short for "namespace" 19072 * 19073 * @example 19074 * ```jsx 19075 * <div {...cns()} /> 19076 * ``` 19077 * 19078 * @return {Record<string, any>} A props object with the namespaced HTML attribute. 19079 */ 19080 19081 function getConnectedNamespace() { 19082 return { 19083 [CONNECTED_NAMESPACE]: true 19084 }; 19085 } 19086 19087 // EXTERNAL MODULE: ./node_modules/memize/index.js 19088 var memize = __webpack_require__(9756); 19089 var memize_default = /*#__PURE__*/__webpack_require__.n(memize); 19090 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/ui/context/get-styled-class-name-from-key.js 19091 /** 19092 * External dependencies 19093 */ 19094 19095 19096 /** 19097 * Generates the connected component CSS className based on the namespace. 19098 * 19099 * @param namespace The name of the connected component. 19100 * @return The generated CSS className. 19101 */ 19102 19103 function getStyledClassName(namespace) { 19104 const kebab = (0,external_lodash_namespaceObject.kebabCase)(namespace); 19105 return `components-$kebab}`; 19106 } 19107 19108 const getStyledClassNameFromKey = memize_default()(getStyledClassName); 19109 19110 ;// CONCATENATED MODULE: ./node_modules/@emotion/sheet/dist/emotion-sheet.browser.esm.js 19111 /* 19112 19113 Based off glamor's StyleSheet, thanks Sunil ❤️ 19114 19115 high performance StyleSheet for css-in-js systems 19116 19117 - uses multiple style tags behind the scenes for millions of rules 19118 - uses `insertRule` for appending in production for *much* faster performance 19119 19120 // usage 19121 19122 import { StyleSheet } from '@emotion/sheet' 19123 19124 let styleSheet = new StyleSheet({ key: '', container: document.head }) 19125 19126 styleSheet.insert('#box { border: 1px solid red; }') 19127 - appends a css rule into the stylesheet 19128 19129 styleSheet.flush() 19130 - empties the stylesheet of all its contents 19131 19132 */ 19133 // $FlowFixMe 19134 function sheetForTag(tag) { 19135 if (tag.sheet) { 19136 // $FlowFixMe 19137 return tag.sheet; 19138 } // this weirdness brought to you by firefox 19139 19140 /* istanbul ignore next */ 19141 19142 19143 for (var i = 0; i < document.styleSheets.length; i++) { 19144 if (document.styleSheets[i].ownerNode === tag) { 19145 // $FlowFixMe 19146 return document.styleSheets[i]; 19147 } 19148 } 19149 } 19150 19151 function createStyleElement(options) { 19152 var tag = document.createElement('style'); 19153 tag.setAttribute('data-emotion', options.key); 19154 19155 if (options.nonce !== undefined) { 19156 tag.setAttribute('nonce', options.nonce); 19157 } 19158 19159 tag.appendChild(document.createTextNode('')); 19160 tag.setAttribute('data-s', ''); 19161 return tag; 19162 } 19163 19164 var StyleSheet = /*#__PURE__*/function () { 19165 function StyleSheet(options) { 19166 var _this = this; 19167 19168 this._insertTag = function (tag) { 19169 var before; 19170 19171 if (_this.tags.length === 0) { 19172 if (_this.insertionPoint) { 19173 before = _this.insertionPoint.nextSibling; 19174 } else if (_this.prepend) { 19175 before = _this.container.firstChild; 19176 } else { 19177 before = _this.before; 19178 } 19179 } else { 19180 before = _this.tags[_this.tags.length - 1].nextSibling; 19181 } 19182 19183 _this.container.insertBefore(tag, before); 19184 19185 _this.tags.push(tag); 19186 }; 19187 19188 this.isSpeedy = options.speedy === undefined ? "production" === 'production' : options.speedy; 19189 this.tags = []; 19190 this.ctr = 0; 19191 this.nonce = options.nonce; // key is the value of the data-emotion attribute, it's used to identify different sheets 19192 19193 this.key = options.key; 19194 this.container = options.container; 19195 this.prepend = options.prepend; 19196 this.insertionPoint = options.insertionPoint; 19197 this.before = null; 19198 } 19199 19200 var _proto = StyleSheet.prototype; 19201 19202 _proto.hydrate = function hydrate(nodes) { 19203 nodes.forEach(this._insertTag); 19204 }; 19205 19206 _proto.insert = function insert(rule) { 19207 // the max length is how many rules we have per style tag, it's 65000 in speedy mode 19208 // it's 1 in dev because we insert source maps that map a single rule to a location 19209 // and you can only have one source map per style tag 19210 if (this.ctr % (this.isSpeedy ? 65000 : 1) === 0) { 19211 this._insertTag(createStyleElement(this)); 19212 } 19213 19214 var tag = this.tags[this.tags.length - 1]; 19215 19216 if (false) { var isImportRule; } 19217 19218 if (this.isSpeedy) { 19219 var sheet = sheetForTag(tag); 19220 19221 try { 19222 // this is the ultrafast version, works across browsers 19223 // the big drawback is that the css won't be editable in devtools 19224 sheet.insertRule(rule, sheet.cssRules.length); 19225 } catch (e) { 19226 if (false) {} 19227 } 19228 } else { 19229 tag.appendChild(document.createTextNode(rule)); 19230 } 19231 19232 this.ctr++; 19233 }; 19234 19235 _proto.flush = function flush() { 19236 // $FlowFixMe 19237 this.tags.forEach(function (tag) { 19238 return tag.parentNode && tag.parentNode.removeChild(tag); 19239 }); 19240 this.tags = []; 19241 this.ctr = 0; 19242 19243 if (false) {} 19244 }; 19245 19246 return StyleSheet; 19247 }(); 19248 19249 19250 19251 ;// CONCATENATED MODULE: ./node_modules/stylis/src/Utility.js 19252 /** 19253 * @param {number} 19254 * @return {number} 19255 */ 19256 var abs = Math.abs 19257 19258 /** 19259 * @param {number} 19260 * @return {string} 19261 */ 19262 var Utility_from = String.fromCharCode 19263 19264 /** 19265 * @param {object} 19266 * @return {object} 19267 */ 19268 var Utility_assign = Object.assign 19269 19270 /** 19271 * @param {string} value 19272 * @param {number} length 19273 * @return {number} 19274 */ 19275 function hash (value, length) { 19276 return (((((((length << 2) ^ Utility_charat(value, 0)) << 2) ^ Utility_charat(value, 1)) << 2) ^ Utility_charat(value, 2)) << 2) ^ Utility_charat(value, 3) 19277 } 19278 19279 /** 19280 * @param {string} value 19281 * @return {string} 19282 */ 19283 function trim (value) { 19284 return value.trim() 19285 } 19286 19287 /** 19288 * @param {string} value 19289 * @param {RegExp} pattern 19290 * @return {string?} 19291 */ 19292 function match (value, pattern) { 19293 return (value = pattern.exec(value)) ? value[0] : value 19294 } 19295 19296 /** 19297 * @param {string} value 19298 * @param {(string|RegExp)} pattern 19299 * @param {string} replacement 19300 * @return {string} 19301 */ 19302 function replace (value, pattern, replacement) { 19303 return value.replace(pattern, replacement) 19304 } 19305 19306 /** 19307 * @param {string} value 19308 * @param {string} search 19309 * @return {number} 19310 */ 19311 function indexof (value, search) { 19312 return value.indexOf(search) 19313 } 19314 19315 /** 19316 * @param {string} value 19317 * @param {number} index 19318 * @return {number} 19319 */ 19320 function Utility_charat (value, index) { 19321 return value.charCodeAt(index) | 0 19322 } 19323 19324 /** 19325 * @param {string} value 19326 * @param {number} begin 19327 * @param {number} end 19328 * @return {string} 19329 */ 19330 function Utility_substr (value, begin, end) { 19331 return value.slice(begin, end) 19332 } 19333 19334 /** 19335 * @param {string} value 19336 * @return {number} 19337 */ 19338 function Utility_strlen (value) { 19339 return value.length 19340 } 19341 19342 /** 19343 * @param {any[]} value 19344 * @return {number} 19345 */ 19346 function Utility_sizeof (value) { 19347 return value.length 19348 } 19349 19350 /** 19351 * @param {any} value 19352 * @param {any[]} array 19353 * @return {any} 19354 */ 19355 function Utility_append (value, array) { 19356 return array.push(value), value 19357 } 19358 19359 /** 19360 * @param {string[]} array 19361 * @param {function} callback 19362 * @return {string} 19363 */ 19364 function Utility_combine (array, callback) { 19365 return array.map(callback).join('') 19366 } 19367 19368 ;// CONCATENATED MODULE: ./node_modules/stylis/src/Tokenizer.js 19369 19370 19371 var line = 1 19372 var column = 1 19373 var Tokenizer_length = 0 19374 var position = 0 19375 var character = 0 19376 var characters = '' 19377 19378 /** 19379 * @param {string} value 19380 * @param {object | null} root 19381 * @param {object | null} parent 19382 * @param {string} type 19383 * @param {string[] | string} props 19384 * @param {object[] | string} children 19385 * @param {number} length 19386 */ 19387 function node (value, root, parent, type, props, children, length) { 19388 return {value: value, root: root, parent: parent, type: type, props: props, children: children, line: line, column: column, length: length, return: ''} 19389 } 19390 19391 /** 19392 * @param {object} root 19393 * @param {object} props 19394 * @return {object} 19395 */ 19396 function copy (root, props) { 19397 return Utility_assign(node('', null, null, '', null, null, 0), root, {length: -root.length}, props) 19398 } 19399 19400 /** 19401 * @return {number} 19402 */ 19403 function Tokenizer_char () { 19404 return character 19405 } 19406 19407 /** 19408 * @return {number} 19409 */ 19410 function prev () { 19411 character = position > 0 ? Utility_charat(characters, --position) : 0 19412 19413 if (column--, character === 10) 19414 column = 1, line-- 19415 19416 return character 19417 } 19418 19419 /** 19420 * @return {number} 19421 */ 19422 function next () { 19423 character = position < Tokenizer_length ? Utility_charat(characters, position++) : 0 19424 19425 if (column++, character === 10) 19426 column = 1, line++ 19427 19428 return character 19429 } 19430 19431 /** 19432 * @return {number} 19433 */ 19434 function peek () { 19435 return Utility_charat(characters, position) 19436 } 19437 19438 /** 19439 * @return {number} 19440 */ 19441 function caret () { 19442 return position 19443 } 19444 19445 /** 19446 * @param {number} begin 19447 * @param {number} end 19448 * @return {string} 19449 */ 19450 function slice (begin, end) { 19451 return Utility_substr(characters, begin, end) 19452 } 19453 19454 /** 19455 * @param {number} type 19456 * @return {number} 19457 */ 19458 function token (type) { 19459 switch (type) { 19460 // \0 \t \n \r \s whitespace token 19461 case 0: case 9: case 10: case 13: case 32: 19462 return 5 19463 // ! + , / > @ ~ isolate token 19464 case 33: case 43: case 44: case 47: case 62: case 64: case 126: 19465 // ; { } breakpoint token 19466 case 59: case 123: case 125: 19467 return 4 19468 // : accompanied token 19469 case 58: 19470 return 3 19471 // " ' ( [ opening delimit token 19472 case 34: case 39: case 40: case 91: 19473 return 2 19474 // ) ] closing delimit token 19475 case 41: case 93: 19476 return 1 19477 } 19478 19479 return 0 19480 } 19481 19482 /** 19483 * @param {string} value 19484 * @return {any[]} 19485 */ 19486 function alloc (value) { 19487 return line = column = 1, Tokenizer_length = Utility_strlen(characters = value), position = 0, [] 19488 } 19489 19490 /** 19491 * @param {any} value 19492 * @return {any} 19493 */ 19494 function dealloc (value) { 19495 return characters = '', value 19496 } 19497 19498 /** 19499 * @param {number} type 19500 * @return {string} 19501 */ 19502 function delimit (type) { 19503 return trim(slice(position - 1, delimiter(type === 91 ? type + 2 : type === 40 ? type + 1 : type))) 19504 } 19505 19506 /** 19507 * @param {string} value 19508 * @return {string[]} 19509 */ 19510 function Tokenizer_tokenize (value) { 19511 return dealloc(tokenizer(alloc(value))) 19512 } 19513 19514 /** 19515 * @param {number} type 19516 * @return {string} 19517 */ 19518 function whitespace (type) { 19519 while (character = peek()) 19520 if (character < 33) 19521 next() 19522 else 19523 break 19524 19525 return token(type) > 2 || token(character) > 3 ? '' : ' ' 19526 } 19527 19528 /** 19529 * @param {string[]} children 19530 * @return {string[]} 19531 */ 19532 function tokenizer (children) { 19533 while (next()) 19534 switch (token(character)) { 19535 case 0: append(identifier(position - 1), children) 19536 break 19537 case 2: append(delimit(character), children) 19538 break 19539 default: append(from(character), children) 19540 } 19541 19542 return children 19543 } 19544 19545 /** 19546 * @param {number} index 19547 * @param {number} count 19548 * @return {string} 19549 */ 19550 function escaping (index, count) { 19551 while (--count && next()) 19552 // not 0-9 A-F a-f 19553 if (character < 48 || character > 102 || (character > 57 && character < 65) || (character > 70 && character < 97)) 19554 break 19555 19556 return slice(index, caret() + (count < 6 && peek() == 32 && next() == 32)) 19557 } 19558 19559 /** 19560 * @param {number} type 19561 * @return {number} 19562 */ 19563 function delimiter (type) { 19564 while (next()) 19565 switch (character) { 19566 // ] ) " ' 19567 case type: 19568 return position 19569 // " ' 19570 case 34: case 39: 19571 if (type !== 34 && type !== 39) 19572 delimiter(character) 19573 break 19574 // ( 19575 case 40: 19576 if (type === 41) 19577 delimiter(type) 19578 break 19579 // \ 19580 case 92: 19581 next() 19582 break 19583 } 19584 19585 return position 19586 } 19587 19588 /** 19589 * @param {number} type 19590 * @param {number} index 19591 * @return {number} 19592 */ 19593 function commenter (type, index) { 19594 while (next()) 19595 // // 19596 if (type + character === 47 + 10) 19597 break 19598 // /* 19599 else if (type + character === 42 + 42 && peek() === 47) 19600 break 19601 19602 return '/*' + slice(index, position - 1) + '*' + Utility_from(type === 47 ? type : next()) 19603 } 19604 19605 /** 19606 * @param {number} index 19607 * @return {string} 19608 */ 19609 function identifier (index) { 19610 while (!token(peek())) 19611 next() 19612 19613 return slice(index, position) 19614 } 19615 19616 ;// CONCATENATED MODULE: ./node_modules/stylis/src/Enum.js 19617 var MS = '-ms-' 19618 var MOZ = '-moz-' 19619 var WEBKIT = '-webkit-' 19620 19621 var COMMENT = 'comm' 19622 var Enum_RULESET = 'rule' 19623 var DECLARATION = 'decl' 19624 19625 var PAGE = '@page' 19626 var MEDIA = '@media' 19627 var IMPORT = '@import' 19628 var CHARSET = '@charset' 19629 var VIEWPORT = '@viewport' 19630 var SUPPORTS = '@supports' 19631 var DOCUMENT = '@document' 19632 var NAMESPACE = '@namespace' 19633 var KEYFRAMES = '@keyframes' 19634 var FONT_FACE = '@font-face' 19635 var COUNTER_STYLE = '@counter-style' 19636 var FONT_FEATURE_VALUES = '@font-feature-values' 19637 19638 ;// CONCATENATED MODULE: ./node_modules/stylis/src/Serializer.js 19639 19640 19641 19642 /** 19643 * @param {object[]} children 19644 * @param {function} callback 19645 * @return {string} 19646 */ 19647 function serialize (children, callback) { 19648 var output = '' 19649 var length = Utility_sizeof(children) 19650 19651 for (var i = 0; i < length; i++) 19652 output += callback(children[i], i, children, callback) || '' 19653 19654 return output 19655 } 19656 19657 /** 19658 * @param {object} element 19659 * @param {number} index 19660 * @param {object[]} children 19661 * @param {function} callback 19662 * @return {string} 19663 */ 19664 function stringify (element, index, children, callback) { 19665 switch (element.type) { 19666 case IMPORT: case DECLARATION: return element.return = element.return || element.value 19667 case COMMENT: return '' 19668 case KEYFRAMES: return element.return = element.value + '{' + serialize(element.children, callback) + '}' 19669 case Enum_RULESET: element.value = element.props.join(',') 19670 } 19671 19672 return Utility_strlen(children = serialize(element.children, callback)) ? element.return = element.value + '{' + children + '}' : '' 19673 } 19674 19675 ;// CONCATENATED MODULE: ./node_modules/stylis/src/Prefixer.js 19676 19677 19678 19679 /** 19680 * @param {string} value 19681 * @param {number} length 19682 * @return {string} 19683 */ 19684 function prefix (value, length) { 19685 switch (hash(value, length)) { 19686 // color-adjust 19687 case 5103: 19688 return WEBKIT + 'print-' + value + value 19689 // animation, animation-(delay|direction|duration|fill-mode|iteration-count|name|play-state|timing-function) 19690 case 5737: case 4201: case 3177: case 3433: case 1641: case 4457: case 2921: 19691 // text-decoration, filter, clip-path, backface-visibility, column, box-decoration-break 19692 case 5572: case 6356: case 5844: case 3191: case 6645: case 3005: 19693 // mask, mask-image, mask-(mode|clip|size), mask-(repeat|origin), mask-position, mask-composite, 19694 case 6391: case 5879: case 5623: case 6135: case 4599: case 4855: 19695 // background-clip, columns, column-(count|fill|gap|rule|rule-color|rule-style|rule-width|span|width) 19696 case 4215: case 6389: case 5109: case 5365: case 5621: case 3829: 19697 return WEBKIT + value + value 19698 // appearance, user-select, transform, hyphens, text-size-adjust 19699 case 5349: case 4246: case 4810: case 6968: case 2756: 19700 return WEBKIT + value + MOZ + value + MS + value + value 19701 // flex, flex-direction 19702 case 6828: case 4268: 19703 return WEBKIT + value + MS + value + value 19704 // order 19705 case 6165: 19706 return WEBKIT + value + MS + 'flex-' + value + value 19707 // align-items 19708 case 5187: 19709 return WEBKIT + value + replace(value, /(\w+).+(:[^]+)/, WEBKIT + 'box-$1$2' + MS + 'flex-$1$2') + value 19710 // align-self 19711 case 5443: 19712 return WEBKIT + value + MS + 'flex-item-' + replace(value, /flex-|-self/, '') + value 19713 // align-content 19714 case 4675: 19715 return WEBKIT + value + MS + 'flex-line-pack' + replace(value, /align-content|flex-|-self/, '') + value 19716 // flex-shrink 19717 case 5548: 19718 return WEBKIT + value + MS + replace(value, 'shrink', 'negative') + value 19719 // flex-basis 19720 case 5292: 19721 return WEBKIT + value + MS + replace(value, 'basis', 'preferred-size') + value 19722 // flex-grow 19723 case 6060: 19724 return WEBKIT + 'box-' + replace(value, '-grow', '') + WEBKIT + value + MS + replace(value, 'grow', 'positive') + value 19725 // transition 19726 case 4554: 19727 return WEBKIT + replace(value, /([^-])(transform)/g, '$1' + WEBKIT + '$2') + value 19728 // cursor 19729 case 6187: 19730 return replace(replace(replace(value, /(zoom-|grab)/, WEBKIT + '$1'), /(image-set)/, WEBKIT + '$1'), value, '') + value 19731 // background, background-image 19732 case 5495: case 3959: 19733 return replace(value, /(image-set\([^]*)/, WEBKIT + '$1' + '$`$1') 19734 // justify-content 19735 case 4968: 19736 return replace(replace(value, /(.+:)(flex-)?(.*)/, WEBKIT + 'box-pack:$3' + MS + 'flex-pack:$3'), /s.+-b[^;]+/, 'justify') + WEBKIT + value + value 19737 // (margin|padding)-inline-(start|end) 19738 case 4095: case 3583: case 4068: case 2532: 19739 return replace(value, /(.+)-inline(.+)/, WEBKIT + '$1$2') + value 19740 // (min|max)?(width|height|inline-size|block-size) 19741 case 8116: case 7059: case 5753: case 5535: 19742 case 5445: case 5701: case 4933: case 4677: 19743 case 5533: case 5789: case 5021: case 4765: 19744 // stretch, max-content, min-content, fill-available 19745 if (Utility_strlen(value) - 1 - length > 6) 19746 switch (Utility_charat(value, length + 1)) { 19747 // (m)ax-content, (m)in-content 19748 case 109: 19749 // - 19750 if (Utility_charat(value, length + 4) !== 45) 19751 break 19752 // (f)ill-available, (f)it-content 19753 case 102: 19754 return replace(value, /(.+:)(.+)-([^]+)/, '$1' + WEBKIT + '$2-$3' + '$1' + MOZ + (Utility_charat(value, length + 3) == 108 ? '$3' : '$2-$3')) + value 19755 // (s)tretch 19756 case 115: 19757 return ~indexof(value, 'stretch') ? prefix(replace(value, 'stretch', 'fill-available'), length) + value : value 19758 } 19759 break 19760 // position: sticky 19761 case 4949: 19762 // (s)ticky? 19763 if (Utility_charat(value, length + 1) !== 115) 19764 break 19765 // display: (flex|inline-flex) 19766 case 6444: 19767 switch (Utility_charat(value, Utility_strlen(value) - 3 - (~indexof(value, '!important') && 10))) { 19768 // stic(k)y 19769 case 107: 19770 return replace(value, ':', ':' + WEBKIT) + value 19771 // (inline-)?fl(e)x 19772 case 101: 19773 return replace(value, /(.+:)([^;!]+)(;|!.+)?/, '$1' + WEBKIT + (Utility_charat(value, 14) === 45 ? 'inline-' : '') + 'box$3' + '$1' + WEBKIT + '$2$3' + '$1' + MS + '$2box$3') + value 19774 } 19775 break 19776 // writing-mode 19777 case 5936: 19778 switch (Utility_charat(value, length + 11)) { 19779 // vertical-l(r) 19780 case 114: 19781 return WEBKIT + value + MS + replace(value, /[svh]\w+-[tblr]{2}/, 'tb') + value 19782 // vertical-r(l) 19783 case 108: 19784 return WEBKIT + value + MS + replace(value, /[svh]\w+-[tblr]{2}/, 'tb-rl') + value 19785 // horizontal(-)tb 19786 case 45: 19787 return WEBKIT + value + MS + replace(value, /[svh]\w+-[tblr]{2}/, 'lr') + value 19788 } 19789 19790 return WEBKIT + value + MS + value + value 19791 } 19792 19793 return value 19794 } 19795 19796 ;// CONCATENATED MODULE: ./node_modules/stylis/src/Middleware.js 19797 19798 19799 19800 19801 19802 19803 /** 19804 * @param {function[]} collection 19805 * @return {function} 19806 */ 19807 function middleware (collection) { 19808 var length = Utility_sizeof(collection) 19809 19810 return function (element, index, children, callback) { 19811 var output = '' 19812 19813 for (var i = 0; i < length; i++) 19814 output += collection[i](element, index, children, callback) || '' 19815 19816 return output 19817 } 19818 } 19819 19820 /** 19821 * @param {function} callback 19822 * @return {function} 19823 */ 19824 function rulesheet (callback) { 19825 return function (element) { 19826 if (!element.root) 19827 if (element = element.return) 19828 callback(element) 19829 } 19830 } 19831 19832 /** 19833 * @param {object} element 19834 * @param {number} index 19835 * @param {object[]} children 19836 * @param {function} callback 19837 */ 19838 function prefixer (element, index, children, callback) { 19839 if (element.length > -1) 19840 if (!element.return) 19841 switch (element.type) { 19842 case DECLARATION: element.return = prefix(element.value, element.length) 19843 break 19844 case KEYFRAMES: 19845 return serialize([copy(element, {value: replace(element.value, '@', '@' + WEBKIT)})], callback) 19846 case Enum_RULESET: 19847 if (element.length) 19848 return Utility_combine(element.props, function (value) { 19849 switch (match(value, /(::plac\w+|:read-\w+)/)) { 19850 // :read-(only|write) 19851 case ':read-only': case ':read-write': 19852 return serialize([copy(element, {props: [replace(value, /:(read-\w+)/, ':' + MOZ + '$1')]})], callback) 19853 // :placeholder 19854 case '::placeholder': 19855 return serialize([ 19856 copy(element, {props: [replace(value, /:(plac\w+)/, ':' + WEBKIT + 'input-$1')]}), 19857 copy(element, {props: [replace(value, /:(plac\w+)/, ':' + MOZ + '$1')]}), 19858 copy(element, {props: [replace(value, /:(plac\w+)/, MS + 'input-$1')]}) 19859 ], callback) 19860 } 19861 19862 return '' 19863 }) 19864 } 19865 } 19866 19867 /** 19868 * @param {object} element 19869 * @param {number} index 19870 * @param {object[]} children 19871 */ 19872 function namespace (element) { 19873 switch (element.type) { 19874 case RULESET: 19875 element.props = element.props.map(function (value) { 19876 return combine(tokenize(value), function (value, index, children) { 19877 switch (charat(value, 0)) { 19878 // \f 19879 case 12: 19880 return substr(value, 1, strlen(value)) 19881 // \0 ( + > ~ 19882 case 0: case 40: case 43: case 62: case 126: 19883 return value 19884 // : 19885 case 58: 19886 if (children[++index] === 'global') 19887 children[index] = '', children[++index] = '\f' + substr(children[index], index = 1, -1) 19888 // \s 19889 case 32: 19890 return index === 1 ? '' : value 19891 default: 19892 switch (index) { 19893 case 0: element = value 19894 return sizeof(children) > 1 ? '' : value 19895 case index = sizeof(children) - 1: case 2: 19896 return index === 2 ? value + element + element : value + element 19897 default: 19898 return value 19899 } 19900 } 19901 }) 19902 }) 19903 } 19904 } 19905 19906 ;// CONCATENATED MODULE: ./node_modules/stylis/src/Parser.js 19907 19908 19909 19910 19911 /** 19912 * @param {string} value 19913 * @return {object[]} 19914 */ 19915 function compile (value) { 19916 return dealloc(parse('', null, null, null, [''], value = alloc(value), 0, [0], value)) 19917 } 19918 19919 /** 19920 * @param {string} value 19921 * @param {object} root 19922 * @param {object?} parent 19923 * @param {string[]} rule 19924 * @param {string[]} rules 19925 * @param {string[]} rulesets 19926 * @param {number[]} pseudo 19927 * @param {number[]} points 19928 * @param {string[]} declarations 19929 * @return {object} 19930 */ 19931 function parse (value, root, parent, rule, rules, rulesets, pseudo, points, declarations) { 19932 var index = 0 19933 var offset = 0 19934 var length = pseudo 19935 var atrule = 0 19936 var property = 0 19937 var previous = 0 19938 var variable = 1 19939 var scanning = 1 19940 var ampersand = 1 19941 var character = 0 19942 var type = '' 19943 var props = rules 19944 var children = rulesets 19945 var reference = rule 19946 var characters = type 19947 19948 while (scanning) 19949 switch (previous = character, character = next()) { 19950 // ( 19951 case 40: 19952 if (previous != 108 && characters.charCodeAt(length - 1) == 58) { 19953 if (indexof(characters += replace(delimit(character), '&', '&\f'), '&\f') != -1) 19954 ampersand = -1 19955 break 19956 } 19957 // " ' [ 19958 case 34: case 39: case 91: 19959 characters += delimit(character) 19960 break 19961 // \t \n \r \s 19962 case 9: case 10: case 13: case 32: 19963 characters += whitespace(previous) 19964 break 19965 // \ 19966 case 92: 19967 characters += escaping(caret() - 1, 7) 19968 continue 19969 // / 19970 case 47: 19971 switch (peek()) { 19972 case 42: case 47: 19973 Utility_append(comment(commenter(next(), caret()), root, parent), declarations) 19974 break 19975 default: 19976 characters += '/' 19977 } 19978 break 19979 // { 19980 case 123 * variable: 19981 points[index++] = Utility_strlen(characters) * ampersand 19982 // } ; \0 19983 case 125 * variable: case 59: case 0: 19984 switch (character) { 19985 // \0 } 19986 case 0: case 125: scanning = 0 19987 // ; 19988 case 59 + offset: 19989 if (property > 0 && (Utility_strlen(characters) - length)) 19990 Utility_append(property > 32 ? declaration(characters + ';', rule, parent, length - 1) : declaration(replace(characters, ' ', '') + ';', rule, parent, length - 2), declarations) 19991 break 19992 // @ ; 19993 case 59: characters += ';' 19994 // { rule/at-rule 19995 default: 19996 Utility_append(reference = ruleset(characters, root, parent, index, offset, rules, points, type, props = [], children = [], length), rulesets) 19997 19998 if (character === 123) 19999 if (offset === 0) 20000 parse(characters, root, reference, reference, props, rulesets, length, points, children) 20001 else 20002 switch (atrule) { 20003 // d m s 20004 case 100: case 109: case 115: 20005 parse(value, reference, reference, rule && Utility_append(ruleset(value, reference, reference, 0, 0, rules, points, type, rules, props = [], length), children), rules, children, length, points, rule ? props : children) 20006 break 20007 default: 20008 parse(characters, reference, reference, reference, [''], children, 0, points, children) 20009 } 20010 } 20011 20012 index = offset = property = 0, variable = ampersand = 1, type = characters = '', length = pseudo 20013 break 20014 // : 20015 case 58: 20016 length = 1 + Utility_strlen(characters), property = previous 20017 default: 20018 if (variable < 1) 20019 if (character == 123) 20020 --variable 20021 else if (character == 125 && variable++ == 0 && prev() == 125) 20022 continue 20023 20024 switch (characters += Utility_from(character), character * variable) { 20025 // & 20026 case 38: 20027 ampersand = offset > 0 ? 1 : (characters += '\f', -1) 20028 break 20029 // , 20030 case 44: 20031 points[index++] = (Utility_strlen(characters) - 1) * ampersand, ampersand = 1 20032 break 20033 // @ 20034 case 64: 20035 // - 20036 if (peek() === 45) 20037 characters += delimit(next()) 20038 20039 atrule = peek(), offset = length = Utility_strlen(type = characters += identifier(caret())), character++ 20040 break 20041 // - 20042 case 45: 20043 if (previous === 45 && Utility_strlen(characters) == 2) 20044 variable = 0 20045 } 20046 } 20047 20048 return rulesets 20049 } 20050 20051 /** 20052 * @param {string} value 20053 * @param {object} root 20054 * @param {object?} parent 20055 * @param {number} index 20056 * @param {number} offset 20057 * @param {string[]} rules 20058 * @param {number[]} points 20059 * @param {string} type 20060 * @param {string[]} props 20061 * @param {string[]} children 20062 * @param {number} length 20063 * @return {object} 20064 */ 20065 function ruleset (value, root, parent, index, offset, rules, points, type, props, children, length) { 20066 var post = offset - 1 20067 var rule = offset === 0 ? rules : [''] 20068 var size = Utility_sizeof(rule) 20069 20070 for (var i = 0, j = 0, k = 0; i < index; ++i) 20071 for (var x = 0, y = Utility_substr(value, post + 1, post = abs(j = points[i])), z = value; x < size; ++x) 20072 if (z = trim(j > 0 ? rule[x] + ' ' + y : replace(y, /&\f/g, rule[x]))) 20073 props[k++] = z 20074 20075 return node(value, root, parent, offset === 0 ? Enum_RULESET : type, props, children, length) 20076 } 20077 20078 /** 20079 * @param {number} value 20080 * @param {object} root 20081 * @param {object?} parent 20082 * @return {object} 20083 */ 20084 function comment (value, root, parent) { 20085 return node(value, root, parent, COMMENT, Utility_from(Tokenizer_char()), Utility_substr(value, 2, -2), 0) 20086 } 20087 20088 /** 20089 * @param {string} value 20090 * @param {object} root 20091 * @param {object?} parent 20092 * @param {number} length 20093 * @return {object} 20094 */ 20095 function declaration (value, root, parent, length) { 20096 return node(value, root, parent, DECLARATION, Utility_substr(value, 0, length), Utility_substr(value, length + 1, -1), length) 20097 } 20098 20099 ;// CONCATENATED MODULE: ./node_modules/@emotion/cache/dist/emotion-cache.browser.esm.js 20100 20101 20102 20103 20104 20105 var last = function last(arr) { 20106 return arr.length ? arr[arr.length - 1] : null; 20107 }; // based on https://github.com/thysultan/stylis.js/blob/e6843c373ebcbbfade25ebcc23f540ed8508da0a/src/Tokenizer.js#L239-L244 20108 20109 20110 var identifierWithPointTracking = function identifierWithPointTracking(begin, points, index) { 20111 var previous = 0; 20112 var character = 0; 20113 20114 while (true) { 20115 previous = character; 20116 character = peek(); // &\f 20117 20118 if (previous === 38 && character === 12) { 20119 points[index] = 1; 20120 } 20121 20122 if (token(character)) { 20123 break; 20124 } 20125 20126 next(); 20127 } 20128 20129 return slice(begin, position); 20130 }; 20131 20132 var toRules = function toRules(parsed, points) { 20133 // pretend we've started with a comma 20134 var index = -1; 20135 var character = 44; 20136 20137 do { 20138 switch (token(character)) { 20139 case 0: 20140 // &\f 20141 if (character === 38 && peek() === 12) { 20142 // this is not 100% correct, we don't account for literal sequences here - like for example quoted strings 20143 // stylis inserts \f after & to know when & where it should replace this sequence with the context selector 20144 // and when it should just concatenate the outer and inner selectors 20145 // it's very unlikely for this sequence to actually appear in a different context, so we just leverage this fact here 20146 points[index] = 1; 20147 } 20148 20149 parsed[index] += identifierWithPointTracking(position - 1, points, index); 20150 break; 20151 20152 case 2: 20153 parsed[index] += delimit(character); 20154 break; 20155 20156 case 4: 20157 // comma 20158 if (character === 44) { 20159 // colon 20160 parsed[++index] = peek() === 58 ? '&\f' : ''; 20161 points[index] = parsed[index].length; 20162 break; 20163 } 20164 20165 // fallthrough 20166 20167 default: 20168 parsed[index] += Utility_from(character); 20169 } 20170 } while (character = next()); 20171 20172 return parsed; 20173 }; 20174 20175 var getRules = function getRules(value, points) { 20176 return dealloc(toRules(alloc(value), points)); 20177 }; // WeakSet would be more appropriate, but only WeakMap is supported in IE11 20178 20179 20180 var fixedElements = /* #__PURE__ */new WeakMap(); 20181 var compat = function compat(element) { 20182 if (element.type !== 'rule' || !element.parent || // positive .length indicates that this rule contains pseudo 20183 // negative .length indicates that this rule has been already prefixed 20184 element.length < 1) { 20185 return; 20186 } 20187 20188 var value = element.value, 20189 parent = element.parent; 20190 var isImplicitRule = element.column === parent.column && element.line === parent.line; 20191 20192 while (parent.type !== 'rule') { 20193 parent = parent.parent; 20194 if (!parent) return; 20195 } // short-circuit for the simplest case 20196 20197 20198 if (element.props.length === 1 && value.charCodeAt(0) !== 58 20199 /* colon */ 20200 && !fixedElements.get(parent)) { 20201 return; 20202 } // if this is an implicitly inserted rule (the one eagerly inserted at the each new nested level) 20203 // then the props has already been manipulated beforehand as they that array is shared between it and its "rule parent" 20204 20205 20206 if (isImplicitRule) { 20207 return; 20208 } 20209 20210 fixedElements.set(element, true); 20211 var points = []; 20212 var rules = getRules(value, points); 20213 var parentRules = parent.props; 20214 20215 for (var i = 0, k = 0; i < rules.length; i++) { 20216 for (var j = 0; j < parentRules.length; j++, k++) { 20217 element.props[k] = points[i] ? rules[i].replace(/&\f/g, parentRules[j]) : parentRules[j] + " " + rules[i]; 20218 } 20219 } 20220 }; 20221 var removeLabel = function removeLabel(element) { 20222 if (element.type === 'decl') { 20223 var value = element.value; 20224 20225 if ( // charcode for l 20226 value.charCodeAt(0) === 108 && // charcode for b 20227 value.charCodeAt(2) === 98) { 20228 // this ignores label 20229 element["return"] = ''; 20230 element.value = ''; 20231 } 20232 } 20233 }; 20234 var ignoreFlag = 'emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason'; 20235 20236 var isIgnoringComment = function isIgnoringComment(element) { 20237 return !!element && element.type === 'comm' && element.children.indexOf(ignoreFlag) > -1; 20238 }; 20239 20240 var createUnsafeSelectorsAlarm = function createUnsafeSelectorsAlarm(cache) { 20241 return function (element, index, children) { 20242 if (element.type !== 'rule') return; 20243 var unsafePseudoClasses = element.value.match(/(:first|:nth|:nth-last)-child/g); 20244 20245 if (unsafePseudoClasses && cache.compat !== true) { 20246 var prevElement = index > 0 ? children[index - 1] : null; 20247 20248 if (prevElement && isIgnoringComment(last(prevElement.children))) { 20249 return; 20250 } 20251 20252 unsafePseudoClasses.forEach(function (unsafePseudoClass) { 20253 console.error("The pseudo class \"" + unsafePseudoClass + "\" is potentially unsafe when doing server-side rendering. Try changing it to \"" + unsafePseudoClass.split('-child')[0] + "-of-type\"."); 20254 }); 20255 } 20256 }; 20257 }; 20258 20259 var isImportRule = function isImportRule(element) { 20260 return element.type.charCodeAt(1) === 105 && element.type.charCodeAt(0) === 64; 20261 }; 20262 20263 var isPrependedWithRegularRules = function isPrependedWithRegularRules(index, children) { 20264 for (var i = index - 1; i >= 0; i--) { 20265 if (!isImportRule(children[i])) { 20266 return true; 20267 } 20268 } 20269 20270 return false; 20271 }; // use this to remove incorrect elements from further processing 20272 // so they don't get handed to the `sheet` (or anything else) 20273 // as that could potentially lead to additional logs which in turn could be overhelming to the user 20274 20275 20276 var nullifyElement = function nullifyElement(element) { 20277 element.type = ''; 20278 element.value = ''; 20279 element["return"] = ''; 20280 element.children = ''; 20281 element.props = ''; 20282 }; 20283 20284 var incorrectImportAlarm = function incorrectImportAlarm(element, index, children) { 20285 if (!isImportRule(element)) { 20286 return; 20287 } 20288 20289 if (element.parent) { 20290 console.error("`@import` rules can't be nested inside other rules. Please move it to the top level and put it before regular rules. Keep in mind that they can only be used within global styles."); 20291 nullifyElement(element); 20292 } else if (isPrependedWithRegularRules(index, children)) { 20293 console.error("`@import` rules can't be after other rules. Please put your `@import` rules before your other rules."); 20294 nullifyElement(element); 20295 } 20296 }; 20297 20298 var defaultStylisPlugins = [prefixer]; 20299 20300 var createCache = function createCache(options) { 20301 var key = options.key; 20302 20303 if (false) {} 20304 20305 if ( key === 'css') { 20306 var ssrStyles = document.querySelectorAll("style[data-emotion]:not([data-s])"); // get SSRed styles out of the way of React's hydration 20307 // document.head is a safe place to move them to(though note document.head is not necessarily the last place they will be) 20308 // note this very very intentionally targets all style elements regardless of the key to ensure 20309 // that creating a cache works inside of render of a React component 20310 20311 Array.prototype.forEach.call(ssrStyles, function (node) { 20312 // we want to only move elements which have a space in the data-emotion attribute value 20313 // because that indicates that it is an Emotion 11 server-side rendered style elements 20314 // while we will already ignore Emotion 11 client-side inserted styles because of the :not([data-s]) part in the selector 20315 // Emotion 10 client-side inserted styles did not have data-s (but importantly did not have a space in their data-emotion attributes) 20316 // so checking for the space ensures that loading Emotion 11 after Emotion 10 has inserted some styles 20317 // will not result in the Emotion 10 styles being destroyed 20318 var dataEmotionAttribute = node.getAttribute('data-emotion'); 20319 20320 if (dataEmotionAttribute.indexOf(' ') === -1) { 20321 return; 20322 } 20323 document.head.appendChild(node); 20324 node.setAttribute('data-s', ''); 20325 }); 20326 } 20327 20328 var stylisPlugins = options.stylisPlugins || defaultStylisPlugins; 20329 20330 if (false) {} 20331 20332 var inserted = {}; // $FlowFixMe 20333 20334 var container; 20335 var nodesToHydrate = []; 20336 20337 { 20338 container = options.container || document.head; 20339 Array.prototype.forEach.call( // this means we will ignore elements which don't have a space in them which 20340 // means that the style elements we're looking at are only Emotion 11 server-rendered style elements 20341 document.querySelectorAll("style[data-emotion^=\"" + key + " \"]"), function (node) { 20342 var attrib = node.getAttribute("data-emotion").split(' '); // $FlowFixMe 20343 20344 for (var i = 1; i < attrib.length; i++) { 20345 inserted[attrib[i]] = true; 20346 } 20347 20348 nodesToHydrate.push(node); 20349 }); 20350 } 20351 20352 var _insert; 20353 20354 var omnipresentPlugins = [compat, removeLabel]; 20355 20356 if (false) {} 20357 20358 { 20359 var currentSheet; 20360 var finalizingPlugins = [stringify, false ? 0 : rulesheet(function (rule) { 20361 currentSheet.insert(rule); 20362 })]; 20363 var serializer = middleware(omnipresentPlugins.concat(stylisPlugins, finalizingPlugins)); 20364 20365 var stylis = function stylis(styles) { 20366 return serialize(compile(styles), serializer); 20367 }; 20368 20369 _insert = function insert(selector, serialized, sheet, shouldCache) { 20370 currentSheet = sheet; 20371 20372 if (false) {} 20373 20374 stylis(selector ? selector + "{" + serialized.styles + "}" : serialized.styles); 20375 20376 if (shouldCache) { 20377 cache.inserted[serialized.name] = true; 20378 } 20379 }; 20380 } 20381 20382 var cache = { 20383 key: key, 20384 sheet: new StyleSheet({ 20385 key: key, 20386 container: container, 20387 nonce: options.nonce, 20388 speedy: options.speedy, 20389 prepend: options.prepend, 20390 insertionPoint: options.insertionPoint 20391 }), 20392 nonce: options.nonce, 20393 inserted: inserted, 20394 registered: {}, 20395 insert: _insert 20396 }; 20397 cache.sheet.hydrate(nodesToHydrate); 20398 return cache; 20399 }; 20400 20401 /* harmony default export */ var emotion_cache_browser_esm = (createCache); 20402 20403 ;// CONCATENATED MODULE: ./node_modules/@emotion/hash/dist/hash.browser.esm.js 20404 /* eslint-disable */ 20405 // Inspired by https://github.com/garycourt/murmurhash-js 20406 // Ported from https://github.com/aappleby/smhasher/blob/61a0530f28277f2e850bfc39600ce61d02b518de/src/MurmurHash2.cpp#L37-L86 20407 function murmur2(str) { 20408 // 'm' and 'r' are mixing constants generated offline. 20409 // They're not really 'magic', they just happen to work well. 20410 // const m = 0x5bd1e995; 20411 // const r = 24; 20412 // Initialize the hash 20413 var h = 0; // Mix 4 bytes at a time into the hash 20414 20415 var k, 20416 i = 0, 20417 len = str.length; 20418 20419 for (; len >= 4; ++i, len -= 4) { 20420 k = str.charCodeAt(i) & 0xff | (str.charCodeAt(++i) & 0xff) << 8 | (str.charCodeAt(++i) & 0xff) << 16 | (str.charCodeAt(++i) & 0xff) << 24; 20421 k = 20422 /* Math.imul(k, m): */ 20423 (k & 0xffff) * 0x5bd1e995 + ((k >>> 16) * 0xe995 << 16); 20424 k ^= 20425 /* k >>> r: */ 20426 k >>> 24; 20427 h = 20428 /* Math.imul(k, m): */ 20429 (k & 0xffff) * 0x5bd1e995 + ((k >>> 16) * 0xe995 << 16) ^ 20430 /* Math.imul(h, m): */ 20431 (h & 0xffff) * 0x5bd1e995 + ((h >>> 16) * 0xe995 << 16); 20432 } // Handle the last few bytes of the input array 20433 20434 20435 switch (len) { 20436 case 3: 20437 h ^= (str.charCodeAt(i + 2) & 0xff) << 16; 20438 20439 case 2: 20440 h ^= (str.charCodeAt(i + 1) & 0xff) << 8; 20441 20442 case 1: 20443 h ^= str.charCodeAt(i) & 0xff; 20444 h = 20445 /* Math.imul(h, m): */ 20446 (h & 0xffff) * 0x5bd1e995 + ((h >>> 16) * 0xe995 << 16); 20447 } // Do a few final mixes of the hash to ensure the last few 20448 // bytes are well-incorporated. 20449 20450 20451 h ^= h >>> 13; 20452 h = 20453 /* Math.imul(h, m): */ 20454 (h & 0xffff) * 0x5bd1e995 + ((h >>> 16) * 0xe995 << 16); 20455 return ((h ^ h >>> 15) >>> 0).toString(36); 20456 } 20457 20458 /* harmony default export */ var hash_browser_esm = (murmur2); 20459 20460 ;// CONCATENATED MODULE: ./node_modules/@emotion/unitless/dist/unitless.browser.esm.js 20461 var unitlessKeys = { 20462 animationIterationCount: 1, 20463 borderImageOutset: 1, 20464 borderImageSlice: 1, 20465 borderImageWidth: 1, 20466 boxFlex: 1, 20467 boxFlexGroup: 1, 20468 boxOrdinalGroup: 1, 20469 columnCount: 1, 20470 columns: 1, 20471 flex: 1, 20472 flexGrow: 1, 20473 flexPositive: 1, 20474 flexShrink: 1, 20475 flexNegative: 1, 20476 flexOrder: 1, 20477 gridRow: 1, 20478 gridRowEnd: 1, 20479 gridRowSpan: 1, 20480 gridRowStart: 1, 20481 gridColumn: 1, 20482 gridColumnEnd: 1, 20483 gridColumnSpan: 1, 20484 gridColumnStart: 1, 20485 msGridRow: 1, 20486 msGridRowSpan: 1, 20487 msGridColumn: 1, 20488 msGridColumnSpan: 1, 20489 fontWeight: 1, 20490 lineHeight: 1, 20491 opacity: 1, 20492 order: 1, 20493 orphans: 1, 20494 tabSize: 1, 20495 widows: 1, 20496 zIndex: 1, 20497 zoom: 1, 20498 WebkitLineClamp: 1, 20499 // SVG-related properties 20500 fillOpacity: 1, 20501 floodOpacity: 1, 20502 stopOpacity: 1, 20503 strokeDasharray: 1, 20504 strokeDashoffset: 1, 20505 strokeMiterlimit: 1, 20506 strokeOpacity: 1, 20507 strokeWidth: 1 20508 }; 20509 20510 /* harmony default export */ var unitless_browser_esm = (unitlessKeys); 20511 20512 ;// CONCATENATED MODULE: ./node_modules/@emotion/memoize/dist/emotion-memoize.browser.esm.js 20513 function memoize(fn) { 20514 var cache = Object.create(null); 20515 return function (arg) { 20516 if (cache[arg] === undefined) cache[arg] = fn(arg); 20517 return cache[arg]; 20518 }; 20519 } 20520 20521 /* harmony default export */ var emotion_memoize_browser_esm = (memoize); 20522 20523 ;// CONCATENATED MODULE: ./node_modules/@emotion/serialize/dist/emotion-serialize.browser.esm.js 20524 20525 20526 20527 20528 var ILLEGAL_ESCAPE_SEQUENCE_ERROR = "You have illegal escape sequence in your template literal, most likely inside content's property value.\nBecause you write your CSS inside a JavaScript string you actually have to do double escaping, so for example \"content: '\\00d7';\" should become \"content: '\\\\00d7';\".\nYou can read more about this here:\nhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#ES2018_revision_of_illegal_escape_sequences"; 20529 var UNDEFINED_AS_OBJECT_KEY_ERROR = "You have passed in falsy value as style object's key (can happen when in example you pass unexported component as computed key)."; 20530 var hyphenateRegex = /[A-Z]|^ms/g; 20531 var animationRegex = /_EMO_([^_]+?)_([^]*?)_EMO_/g; 20532 20533 var isCustomProperty = function isCustomProperty(property) { 20534 return property.charCodeAt(1) === 45; 20535 }; 20536 20537 var isProcessableValue = function isProcessableValue(value) { 20538 return value != null && typeof value !== 'boolean'; 20539 }; 20540 20541 var processStyleName = /* #__PURE__ */emotion_memoize_browser_esm(function (styleName) { 20542 return isCustomProperty(styleName) ? styleName : styleName.replace(hyphenateRegex, '-$&').toLowerCase(); 20543 }); 20544 20545 var processStyleValue = function processStyleValue(key, value) { 20546 switch (key) { 20547 case 'animation': 20548 case 'animationName': 20549 { 20550 if (typeof value === 'string') { 20551 return value.replace(animationRegex, function (match, p1, p2) { 20552 cursor = { 20553 name: p1, 20554 styles: p2, 20555 next: cursor 20556 }; 20557 return p1; 20558 }); 20559 } 20560 } 20561 } 20562 20563 if (unitless_browser_esm[key] !== 1 && !isCustomProperty(key) && typeof value === 'number' && value !== 0) { 20564 return value + 'px'; 20565 } 20566 20567 return value; 20568 }; 20569 20570 if (false) { var hyphenatedCache, hyphenPattern, msPattern, oldProcessStyleValue, contentValues, contentValuePattern; } 20571 20572 function handleInterpolation(mergedProps, registered, interpolation) { 20573 if (interpolation == null) { 20574 return ''; 20575 } 20576 20577 if (interpolation.__emotion_styles !== undefined) { 20578 if (false) {} 20579 20580 return interpolation; 20581 } 20582 20583 switch (typeof interpolation) { 20584 case 'boolean': 20585 { 20586 return ''; 20587 } 20588 20589 case 'object': 20590 { 20591 if (interpolation.anim === 1) { 20592 cursor = { 20593 name: interpolation.name, 20594 styles: interpolation.styles, 20595 next: cursor 20596 }; 20597 return interpolation.name; 20598 } 20599 20600 if (interpolation.styles !== undefined) { 20601 var next = interpolation.next; 20602 20603 if (next !== undefined) { 20604 // not the most efficient thing ever but this is a pretty rare case 20605 // and there will be very few iterations of this generally 20606 while (next !== undefined) { 20607 cursor = { 20608 name: next.name, 20609 styles: next.styles, 20610 next: cursor 20611 }; 20612 next = next.next; 20613 } 20614 } 20615 20616 var styles = interpolation.styles + ";"; 20617 20618 if (false) {} 20619 20620 return styles; 20621 } 20622 20623 return createStringFromObject(mergedProps, registered, interpolation); 20624 } 20625 20626 case 'function': 20627 { 20628 if (mergedProps !== undefined) { 20629 var previousCursor = cursor; 20630 var result = interpolation(mergedProps); 20631 cursor = previousCursor; 20632 return handleInterpolation(mergedProps, registered, result); 20633 } else if (false) {} 20634 20635 break; 20636 } 20637 20638 case 'string': 20639 if (false) { var replaced, matched; } 20640 20641 break; 20642 } // finalize string values (regular strings and functions interpolated into css calls) 20643 20644 20645 if (registered == null) { 20646 return interpolation; 20647 } 20648 20649 var cached = registered[interpolation]; 20650 return cached !== undefined ? cached : interpolation; 20651 } 20652 20653 function createStringFromObject(mergedProps, registered, obj) { 20654 var string = ''; 20655 20656 if (Array.isArray(obj)) { 20657 for (var i = 0; i < obj.length; i++) { 20658 string += handleInterpolation(mergedProps, registered, obj[i]) + ";"; 20659 } 20660 } else { 20661 for (var _key in obj) { 20662 var value = obj[_key]; 20663 20664 if (typeof value !== 'object') { 20665 if (registered != null && registered[value] !== undefined) { 20666 string += _key + "{" + registered[value] + "}"; 20667 } else if (isProcessableValue(value)) { 20668 string += processStyleName(_key) + ":" + processStyleValue(_key, value) + ";"; 20669 } 20670 } else { 20671 if (_key === 'NO_COMPONENT_SELECTOR' && "production" !== 'production') {} 20672 20673 if (Array.isArray(value) && typeof value[0] === 'string' && (registered == null || registered[value[0]] === undefined)) { 20674 for (var _i = 0; _i < value.length; _i++) { 20675 if (isProcessableValue(value[_i])) { 20676 string += processStyleName(_key) + ":" + processStyleValue(_key, value[_i]) + ";"; 20677 } 20678 } 20679 } else { 20680 var interpolated = handleInterpolation(mergedProps, registered, value); 20681 20682 switch (_key) { 20683 case 'animation': 20684 case 'animationName': 20685 { 20686 string += processStyleName(_key) + ":" + interpolated + ";"; 20687 break; 20688 } 20689 20690 default: 20691 { 20692 if (false) {} 20693 20694 string += _key + "{" + interpolated + "}"; 20695 } 20696 } 20697 } 20698 } 20699 } 20700 } 20701 20702 return string; 20703 } 20704 20705 var labelPattern = /label:\s*([^\s;\n{]+)\s*(;|$)/g; 20706 var sourceMapPattern; 20707 20708 if (false) {} // this is the cursor for keyframes 20709 // keyframes are stored on the SerializedStyles object as a linked list 20710 20711 20712 var cursor; 20713 var emotion_serialize_browser_esm_serializeStyles = function serializeStyles(args, registered, mergedProps) { 20714 if (args.length === 1 && typeof args[0] === 'object' && args[0] !== null && args[0].styles !== undefined) { 20715 return args[0]; 20716 } 20717 20718 var stringMode = true; 20719 var styles = ''; 20720 cursor = undefined; 20721 var strings = args[0]; 20722 20723 if (strings == null || strings.raw === undefined) { 20724 stringMode = false; 20725 styles += handleInterpolation(mergedProps, registered, strings); 20726 } else { 20727 if (false) {} 20728 20729 styles += strings[0]; 20730 } // we start at 1 since we've already handled the first arg 20731 20732 20733 for (var i = 1; i < args.length; i++) { 20734 styles += handleInterpolation(mergedProps, registered, args[i]); 20735 20736 if (stringMode) { 20737 if (false) {} 20738 20739 styles += strings[i]; 20740 } 20741 } 20742 20743 var sourceMap; 20744 20745 if (false) {} // using a global regex with .exec is stateful so lastIndex has to be reset each time 20746 20747 20748 labelPattern.lastIndex = 0; 20749 var identifierName = ''; 20750 var match; // https://esbench.com/bench/5b809c2cf2949800a0f61fb5 20751 20752 while ((match = labelPattern.exec(styles)) !== null) { 20753 identifierName += '-' + // $FlowFixMe we know it's not null 20754 match[1]; 20755 } 20756 20757 var name = hash_browser_esm(styles) + identifierName; 20758 20759 if (false) {} 20760 20761 return { 20762 name: name, 20763 styles: styles, 20764 next: cursor 20765 }; 20766 }; 20767 20768 20769 20770 ;// CONCATENATED MODULE: ./node_modules/@emotion/react/dist/emotion-element-cbed451f.browser.esm.js 20771 20772 20773 20774 20775 20776 20777 20778 20779 20780 var emotion_element_cbed451f_browser_esm_hasOwnProperty = {}.hasOwnProperty; 20781 20782 var EmotionCacheContext = /* #__PURE__ */(0,external_React_.createContext)( // we're doing this to avoid preconstruct's dead code elimination in this one case 20783 // because this module is primarily intended for the browser and node 20784 // but it's also required in react native and similar environments sometimes 20785 // and we could have a special build just for that 20786 // but this is much easier and the native packages 20787 // might use a different theme context in the future anyway 20788 typeof HTMLElement !== 'undefined' ? /* #__PURE__ */emotion_cache_browser_esm({ 20789 key: 'css' 20790 }) : null); 20791 20792 if (false) {} 20793 20794 var CacheProvider = EmotionCacheContext.Provider; 20795 var __unsafe_useEmotionCache = function useEmotionCache() { 20796 return (0,external_React_.useContext)(EmotionCacheContext); 20797 }; 20798 20799 var emotion_element_cbed451f_browser_esm_withEmotionCache = function withEmotionCache(func) { 20800 // $FlowFixMe 20801 return /*#__PURE__*/(0,external_React_.forwardRef)(function (props, ref) { 20802 // the cache will never be null in the browser 20803 var cache = (0,external_React_.useContext)(EmotionCacheContext); 20804 return func(props, cache, ref); 20805 }); 20806 }; 20807 20808 var emotion_element_cbed451f_browser_esm_ThemeContext = /* #__PURE__ */(0,external_React_.createContext)({}); 20809 20810 if (false) {} 20811 20812 var useTheme = function useTheme() { 20813 return useContext(emotion_element_cbed451f_browser_esm_ThemeContext); 20814 }; 20815 20816 var getTheme = function getTheme(outerTheme, theme) { 20817 if (typeof theme === 'function') { 20818 var mergedTheme = theme(outerTheme); 20819 20820 if (false) {} 20821 20822 return mergedTheme; 20823 } 20824 20825 if (false) {} 20826 20827 return _extends({}, outerTheme, theme); 20828 }; 20829 20830 var createCacheWithTheme = /* #__PURE__ */(/* unused pure expression or super */ null && (weakMemoize(function (outerTheme) { 20831 return weakMemoize(function (theme) { 20832 return getTheme(outerTheme, theme); 20833 }); 20834 }))); 20835 var ThemeProvider = function ThemeProvider(props) { 20836 var theme = useContext(emotion_element_cbed451f_browser_esm_ThemeContext); 20837 20838 if (props.theme !== theme) { 20839 theme = createCacheWithTheme(theme)(props.theme); 20840 } 20841 20842 return /*#__PURE__*/createElement(emotion_element_cbed451f_browser_esm_ThemeContext.Provider, { 20843 value: theme 20844 }, props.children); 20845 }; 20846 function withTheme(Component) { 20847 var componentName = Component.displayName || Component.name || 'Component'; 20848 20849 var render = function render(props, ref) { 20850 var theme = useContext(emotion_element_cbed451f_browser_esm_ThemeContext); 20851 return /*#__PURE__*/createElement(Component, _extends({ 20852 theme: theme, 20853 ref: ref 20854 }, props)); 20855 }; // $FlowFixMe 20856 20857 20858 var WithTheme = /*#__PURE__*/forwardRef(render); 20859 WithTheme.displayName = "WithTheme(" + componentName + ")"; 20860 return hoistNonReactStatics(WithTheme, Component); 20861 } 20862 20863 var getLastPart = function getLastPart(functionName) { 20864 // The match may be something like 'Object.createEmotionProps' or 20865 // 'Loader.prototype.render' 20866 var parts = functionName.split('.'); 20867 return parts[parts.length - 1]; 20868 }; 20869 20870 var getFunctionNameFromStackTraceLine = function getFunctionNameFromStackTraceLine(line) { 20871 // V8 20872 var match = /^\s+at\s+([A-Za-z0-9$.]+)\s/.exec(line); 20873 if (match) return getLastPart(match[1]); // Safari / Firefox 20874 20875 match = /^([A-Za-z0-9$.]+)@/.exec(line); 20876 if (match) return getLastPart(match[1]); 20877 return undefined; 20878 }; 20879 20880 var internalReactFunctionNames = /* #__PURE__ */new Set(['renderWithHooks', 'processChild', 'finishClassComponent', 'renderToString']); // These identifiers come from error stacks, so they have to be valid JS 20881 // identifiers, thus we only need to replace what is a valid character for JS, 20882 // but not for CSS. 20883 20884 var sanitizeIdentifier = function sanitizeIdentifier(identifier) { 20885 return identifier.replace(/\$/g, '-'); 20886 }; 20887 20888 var getLabelFromStackTrace = function getLabelFromStackTrace(stackTrace) { 20889 if (!stackTrace) return undefined; 20890 var lines = stackTrace.split('\n'); 20891 20892 for (var i = 0; i < lines.length; i++) { 20893 var functionName = getFunctionNameFromStackTraceLine(lines[i]); // The first line of V8 stack traces is just "Error" 20894 20895 if (!functionName) continue; // If we reach one of these, we have gone too far and should quit 20896 20897 if (internalReactFunctionNames.has(functionName)) break; // The component name is the first function in the stack that starts with an 20898 // uppercase letter 20899 20900 if (/^[A-Z]/.test(functionName)) return sanitizeIdentifier(functionName); 20901 } 20902 20903 return undefined; 20904 }; 20905 20906 var useInsertionEffect = external_React_['useInsertion' + 'Effect'] ? external_React_['useInsertion' + 'Effect'] : function useInsertionEffect(create) { 20907 create(); 20908 }; 20909 function emotion_element_cbed451f_browser_esm_useInsertionEffectMaybe(create) { 20910 20911 useInsertionEffect(create); 20912 } 20913 20914 var typePropName = '__EMOTION_TYPE_PLEASE_DO_NOT_USE__'; 20915 var labelPropName = '__EMOTION_LABEL_PLEASE_DO_NOT_USE__'; 20916 var emotion_element_cbed451f_browser_esm_createEmotionProps = function createEmotionProps(type, props) { 20917 if (false) {} 20918 20919 var newProps = {}; 20920 20921 for (var key in props) { 20922 if (emotion_element_cbed451f_browser_esm_hasOwnProperty.call(props, key)) { 20923 newProps[key] = props[key]; 20924 } 20925 } 20926 20927 newProps[typePropName] = type; // For performance, only call getLabelFromStackTrace in development and when 20928 // the label hasn't already been computed 20929 20930 if (false) { var label; } 20931 20932 return newProps; 20933 }; 20934 20935 var Insertion = function Insertion(_ref) { 20936 var cache = _ref.cache, 20937 serialized = _ref.serialized, 20938 isStringTag = _ref.isStringTag; 20939 registerStyles(cache, serialized, isStringTag); 20940 var rules = emotion_element_cbed451f_browser_esm_useInsertionEffectMaybe(function () { 20941 return insertStyles(cache, serialized, isStringTag); 20942 }); 20943 20944 return null; 20945 }; 20946 20947 var emotion_element_cbed451f_browser_esm_Emotion = /* #__PURE__ */(/* unused pure expression or super */ null && (emotion_element_cbed451f_browser_esm_withEmotionCache(function (props, cache, ref) { 20948 var cssProp = props.css; // so that using `css` from `emotion` and passing the result to the css prop works 20949 // not passing the registered cache to serializeStyles because it would 20950 // make certain babel optimisations not possible 20951 20952 if (typeof cssProp === 'string' && cache.registered[cssProp] !== undefined) { 20953 cssProp = cache.registered[cssProp]; 20954 } 20955 20956 var WrappedComponent = props[typePropName]; 20957 var registeredStyles = [cssProp]; 20958 var className = ''; 20959 20960 if (typeof props.className === 'string') { 20961 className = getRegisteredStyles(cache.registered, registeredStyles, props.className); 20962 } else if (props.className != null) { 20963 className = props.className + " "; 20964 } 20965 20966 var serialized = serializeStyles(registeredStyles, undefined, useContext(emotion_element_cbed451f_browser_esm_ThemeContext)); 20967 20968 if (false) { var labelFromStack; } 20969 20970 className += cache.key + "-" + serialized.name; 20971 var newProps = {}; 20972 20973 for (var key in props) { 20974 if (emotion_element_cbed451f_browser_esm_hasOwnProperty.call(props, key) && key !== 'css' && key !== typePropName && ( true || 0)) { 20975 newProps[key] = props[key]; 20976 } 20977 } 20978 20979 newProps.ref = ref; 20980 newProps.className = className; 20981 return /*#__PURE__*/createElement(Fragment, null, /*#__PURE__*/createElement(Insertion, { 20982 cache: cache, 20983 serialized: serialized, 20984 isStringTag: typeof WrappedComponent === 'string' 20985 }), /*#__PURE__*/createElement(WrappedComponent, newProps)); 20986 }))); 20987 20988 if (false) {} 20989 20990 20991 20992 ;// CONCATENATED MODULE: ./node_modules/@emotion/utils/dist/emotion-utils.browser.esm.js 20993 var isBrowser = "object" !== 'undefined'; 20994 function emotion_utils_browser_esm_getRegisteredStyles(registered, registeredStyles, classNames) { 20995 var rawClassName = ''; 20996 classNames.split(' ').forEach(function (className) { 20997 if (registered[className] !== undefined) { 20998 registeredStyles.push(registered[className] + ";"); 20999 } else { 21000 rawClassName += className + " "; 21001 } 21002 }); 21003 return rawClassName; 21004 } 21005 var emotion_utils_browser_esm_insertStyles = function insertStyles(cache, serialized, isStringTag) { 21006 var className = cache.key + "-" + serialized.name; 21007 21008 if ( // we only need to add the styles to the registered cache if the 21009 // class name could be used further down 21010 // the tree but if it's a string tag, we know it won't 21011 // so we don't have to add it to registered cache. 21012 // this improves memory usage since we can avoid storing the whole style string 21013 (isStringTag === false || // we need to always store it if we're in compat mode and 21014 // in node since emotion-server relies on whether a style is in 21015 // the registered cache to know whether a style is global or not 21016 // also, note that this check will be dead code eliminated in the browser 21017 isBrowser === false ) && cache.registered[className] === undefined) { 21018 cache.registered[className] = serialized.styles; 21019 } 21020 21021 if (cache.inserted[serialized.name] === undefined) { 21022 var current = serialized; 21023 21024 do { 21025 var maybeStyles = cache.insert(serialized === current ? "." + className : '', current, cache.sheet, true); 21026 21027 current = current.next; 21028 } while (current !== undefined); 21029 } 21030 }; 21031 21032 21033 21034 ;// CONCATENATED MODULE: ./node_modules/@emotion/css/create-instance/dist/emotion-css-create-instance.esm.js 21035 21036 21037 21038 21039 function insertWithoutScoping(cache, serialized) { 21040 if (cache.inserted[serialized.name] === undefined) { 21041 return cache.insert('', serialized, cache.sheet, true); 21042 } 21043 } 21044 21045 function merge(registered, css, className) { 21046 var registeredStyles = []; 21047 var rawClassName = emotion_utils_browser_esm_getRegisteredStyles(registered, registeredStyles, className); 21048 21049 if (registeredStyles.length < 2) { 21050 return className; 21051 } 21052 21053 return rawClassName + css(registeredStyles); 21054 } 21055 21056 var createEmotion = function createEmotion(options) { 21057 var cache = emotion_cache_browser_esm(options); // $FlowFixMe 21058 21059 cache.sheet.speedy = function (value) { 21060 if (false) {} 21061 21062 this.isSpeedy = value; 21063 }; 21064 21065 cache.compat = true; 21066 21067 var css = function css() { 21068 for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) { 21069 args[_key] = arguments[_key]; 21070 } 21071 21072 var serialized = emotion_serialize_browser_esm_serializeStyles(args, cache.registered, undefined); 21073 emotion_utils_browser_esm_insertStyles(cache, serialized, false); 21074 return cache.key + "-" + serialized.name; 21075 }; 21076 21077 var keyframes = function keyframes() { 21078 for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) { 21079 args[_key2] = arguments[_key2]; 21080 } 21081 21082 var serialized = emotion_serialize_browser_esm_serializeStyles(args, cache.registered); 21083 var animation = "animation-" + serialized.name; 21084 insertWithoutScoping(cache, { 21085 name: serialized.name, 21086 styles: "@keyframes " + animation + "{" + serialized.styles + "}" 21087 }); 21088 return animation; 21089 }; 21090 21091 var injectGlobal = function injectGlobal() { 21092 for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) { 21093 args[_key3] = arguments[_key3]; 21094 } 21095 21096 var serialized = emotion_serialize_browser_esm_serializeStyles(args, cache.registered); 21097 insertWithoutScoping(cache, serialized); 21098 }; 21099 21100 var cx = function cx() { 21101 for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) { 21102 args[_key4] = arguments[_key4]; 21103 } 21104 21105 return merge(cache.registered, css, emotion_css_create_instance_esm_classnames(args)); 21106 }; 21107 21108 return { 21109 css: css, 21110 cx: cx, 21111 injectGlobal: injectGlobal, 21112 keyframes: keyframes, 21113 hydrate: function hydrate(ids) { 21114 ids.forEach(function (key) { 21115 cache.inserted[key] = true; 21116 }); 21117 }, 21118 flush: function flush() { 21119 cache.registered = {}; 21120 cache.inserted = {}; 21121 cache.sheet.flush(); 21122 }, 21123 // $FlowFixMe 21124 sheet: cache.sheet, 21125 cache: cache, 21126 getRegisteredStyles: emotion_utils_browser_esm_getRegisteredStyles.bind(null, cache.registered), 21127 merge: merge.bind(null, cache.registered, css) 21128 }; 21129 }; 21130 21131 var emotion_css_create_instance_esm_classnames = function classnames(args) { 21132 var cls = ''; 21133 21134 for (var i = 0; i < args.length; i++) { 21135 var arg = args[i]; 21136 if (arg == null) continue; 21137 var toAdd = void 0; 21138 21139 switch (typeof arg) { 21140 case 'boolean': 21141 break; 21142 21143 case 'object': 21144 { 21145 if (Array.isArray(arg)) { 21146 toAdd = classnames(arg); 21147 } else { 21148 toAdd = ''; 21149 21150 for (var k in arg) { 21151 if (arg[k] && k) { 21152 toAdd && (toAdd += ' '); 21153 toAdd += k; 21154 } 21155 } 21156 } 21157 21158 break; 21159 } 21160 21161 default: 21162 { 21163 toAdd = arg; 21164 } 21165 } 21166 21167 if (toAdd) { 21168 cls && (cls += ' '); 21169 cls += toAdd; 21170 } 21171 } 21172 21173 return cls; 21174 }; 21175 21176 /* harmony default export */ var emotion_css_create_instance_esm = (createEmotion); 21177 21178 ;// CONCATENATED MODULE: ./node_modules/@emotion/css/dist/emotion-css.esm.js 21179 21180 21181 21182 21183 21184 var _createEmotion = emotion_css_create_instance_esm({ 21185 key: 'css' 21186 }), 21187 flush = _createEmotion.flush, 21188 hydrate = _createEmotion.hydrate, 21189 emotion_css_esm_cx = _createEmotion.cx, 21190 emotion_css_esm_merge = _createEmotion.merge, 21191 emotion_css_esm_getRegisteredStyles = _createEmotion.getRegisteredStyles, 21192 injectGlobal = _createEmotion.injectGlobal, 21193 keyframes = _createEmotion.keyframes, 21194 css = _createEmotion.css, 21195 sheet = _createEmotion.sheet, 21196 cache = _createEmotion.cache; 21197 21198 21199 21200 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/utils/hooks/use-cx.js 21201 /** 21202 * External dependencies 21203 */ 21204 21205 // eslint-disable-next-line no-restricted-imports 21206 21207 21208 /** 21209 * WordPress dependencies 21210 */ 21211 21212 21213 21214 const isSerializedStyles = o => typeof o !== 'undefined' && o !== null && ['name', 'styles'].every(p => typeof o[p] !== 'undefined'); 21215 /** 21216 * Retrieve a `cx` function that knows how to handle `SerializedStyles` 21217 * returned by the `@emotion/react` `css` function in addition to what 21218 * `cx` normally knows how to handle. It also hooks into the Emotion 21219 * Cache, allowing `css` calls to work inside iframes. 21220 * 21221 * @example 21222 * import { css } from '@emotion/react'; 21223 * 21224 * const styles = css` 21225 * color: red 21226 * `; 21227 * 21228 * function RedText( { className, ...props } ) { 21229 * const cx = useCx(); 21230 * 21231 * const classes = cx(styles, className); 21232 * 21233 * return <span className={classes} {...props} />; 21234 * } 21235 */ 21236 21237 21238 const useCx = () => { 21239 const cache = __unsafe_useEmotionCache(); 21240 const cx = (0,external_wp_element_namespaceObject.useCallback)(function () { 21241 if (cache === null) { 21242 throw new Error('The `useCx` hook should be only used within a valid Emotion Cache Context'); 21243 } 21244 21245 for (var _len = arguments.length, classNames = new Array(_len), _key = 0; _key < _len; _key++) { 21246 classNames[_key] = arguments[_key]; 21247 } 21248 21249 return emotion_css_esm_cx(...classNames.map(arg => { 21250 if (isSerializedStyles(arg)) { 21251 emotion_utils_browser_esm_insertStyles(cache, arg, false); 21252 return `$cache.key}-$arg.name}`; 21253 } 21254 21255 return arg; 21256 })); 21257 }, [cache]); 21258 return cx; 21259 }; 21260 21261 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/ui/context/use-context-system.js 21262 /** 21263 * WordPress dependencies 21264 */ 21265 21266 /** 21267 * Internal dependencies 21268 */ 21269 21270 21271 21272 21273 21274 /** 21275 * @template TProps 21276 * @typedef {TProps & { className: string }} ConnectedProps 21277 */ 21278 21279 /** 21280 * Custom hook that derives registered props from the Context system. 21281 * These derived props are then consolidated with incoming component props. 21282 * 21283 * @template {{ className?: string }} P 21284 * @param {P} props Incoming props from the component. 21285 * @param {string} namespace The namespace to register and to derive context props from. 21286 * @return {ConnectedProps<P>} The connected props. 21287 */ 21288 21289 function useContextSystem(props, namespace) { 21290 const contextSystemProps = useComponentsContext(); 21291 21292 if (typeof namespace === 'undefined') { 21293 typeof process !== "undefined" && process.env && "production" !== "production" ? 0 : void 0; 21294 } 21295 21296 const contextProps = (contextSystemProps === null || contextSystemProps === void 0 ? void 0 : contextSystemProps[namespace]) || {}; 21297 /* eslint-disable jsdoc/no-undefined-types */ 21298 21299 /** @type {ConnectedProps<P>} */ 21300 // @ts-ignore We fill in the missing properties below 21301 21302 const finalComponentProps = { ...getConnectedNamespace(), 21303 ...getNamespace(namespace) 21304 }; 21305 /* eslint-enable jsdoc/no-undefined-types */ 21306 21307 const { 21308 _overrides: overrideProps, 21309 ...otherContextProps 21310 } = contextProps; 21311 const initialMergedProps = Object.entries(otherContextProps).length ? Object.assign({}, otherContextProps, props) : props; 21312 const cx = useCx(); 21313 const classes = cx(getStyledClassNameFromKey(namespace), props.className); // Provides the ability to customize the render of the component. 21314 21315 const rendered = typeof initialMergedProps.renderChildren === 'function' ? initialMergedProps.renderChildren(initialMergedProps) : initialMergedProps.children; 21316 21317 for (const key in initialMergedProps) { 21318 // @ts-ignore filling in missing props 21319 finalComponentProps[key] = initialMergedProps[key]; 21320 } 21321 21322 for (const key in overrideProps) { 21323 // @ts-ignore filling in missing props 21324 finalComponentProps[key] = overrideProps[key]; 21325 } // @ts-ignore 21326 21327 21328 finalComponentProps.children = rendered; 21329 finalComponentProps.className = classes; 21330 return finalComponentProps; 21331 } 21332 21333 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/ui/context/context-connect.js 21334 /** 21335 * External dependencies 21336 */ 21337 21338 21339 /** 21340 * WordPress dependencies 21341 */ 21342 21343 21344 /** 21345 * Internal dependencies 21346 */ 21347 21348 21349 21350 21351 /** 21352 * Forwards ref (React.ForwardRef) and "Connects" (or registers) a component 21353 * within the Context system under a specified namespace. 21354 * 21355 * This is an (experimental) evolution of the initial connect() HOC. 21356 * The hope is that we can improve render performance by removing functional 21357 * component wrappers. 21358 * 21359 * @param Component The component to register into the Context system. 21360 * @param namespace The namespace to register the component under. 21361 * @param options 21362 * @return The connected WordPressComponent 21363 */ 21364 function contextConnect(Component, namespace) { 21365 let options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {}; 21366 const { 21367 memo: memoProp = false 21368 } = options; 21369 let WrappedComponent = (0,external_wp_element_namespaceObject.forwardRef)(Component); 21370 21371 if (memoProp) { 21372 // @ts-ignore 21373 WrappedComponent = (0,external_wp_element_namespaceObject.memo)(WrappedComponent); 21374 } 21375 21376 if (typeof namespace === 'undefined') { 21377 typeof process !== "undefined" && process.env && "production" !== "production" ? 0 : void 0; 21378 } // @ts-ignore internal property 21379 21380 21381 let mergedNamespace = WrappedComponent[CONNECT_STATIC_NAMESPACE] || [namespace]; 21382 /** 21383 * Consolidate (merge) namespaces before attaching it to the WrappedComponent. 21384 */ 21385 21386 if (Array.isArray(namespace)) { 21387 mergedNamespace = [...mergedNamespace, ...namespace]; 21388 } 21389 21390 if (typeof namespace === 'string') { 21391 mergedNamespace = [...mergedNamespace, namespace]; 21392 } 21393 21394 WrappedComponent.displayName = namespace; // @ts-ignore internal property 21395 21396 WrappedComponent[CONNECT_STATIC_NAMESPACE] = (0,external_lodash_namespaceObject.uniq)(mergedNamespace); // @ts-ignore WordPressComponent property 21397 21398 WrappedComponent.selector = `.$getStyledClassNameFromKey(namespace)}`; // @ts-ignore 21399 21400 return WrappedComponent; 21401 } 21402 /** 21403 * Attempts to retrieve the connected namespace from a component. 21404 * 21405 * @param Component The component to retrieve a namespace from. 21406 * @return The connected namespaces. 21407 */ 21408 21409 function getConnectNamespace(Component) { 21410 if (!Component) return []; 21411 let namespaces = []; // @ts-ignore internal property 21412 21413 if (Component[CONNECT_STATIC_NAMESPACE]) { 21414 // @ts-ignore internal property 21415 namespaces = Component[CONNECT_STATIC_NAMESPACE]; 21416 } // @ts-ignore 21417 21418 21419 if (Component.type && Component.type[CONNECT_STATIC_NAMESPACE]) { 21420 // @ts-ignore 21421 namespaces = Component.type[CONNECT_STATIC_NAMESPACE]; 21422 } 21423 21424 return namespaces; 21425 } 21426 /** 21427 * Checks to see if a component is connected within the Context system. 21428 * 21429 * @param Component The component to retrieve a namespace from. 21430 * @param match The namespace to check. 21431 */ 21432 21433 function hasConnectNamespace(Component, match) { 21434 if (!Component) return false; 21435 21436 if (typeof match === 'string') { 21437 return getConnectNamespace(Component).includes(match); 21438 } 21439 21440 if (Array.isArray(match)) { 21441 return match.some(result => getConnectNamespace(Component).includes(result)); 21442 } 21443 21444 return false; 21445 } 21446 21447 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/visually-hidden/styles.js 21448 /** @type {import('react').CSSProperties} */ 21449 const visuallyHidden = { 21450 border: 0, 21451 clip: 'rect(1px, 1px, 1px, 1px)', 21452 WebkitClipPath: 'inset( 50% )', 21453 clipPath: 'inset( 50% )', 21454 height: '1px', 21455 margin: '-1px', 21456 overflow: 'hidden', 21457 padding: 0, 21458 position: 'absolute', 21459 width: '1px', 21460 wordWrap: 'normal' 21461 }; 21462 21463 ;// CONCATENATED MODULE: ./node_modules/@emotion/is-prop-valid/dist/emotion-is-prop-valid.browser.esm.js 21464 21465 21466 var reactPropsRegex = /^((children|dangerouslySetInnerHTML|key|ref|autoFocus|defaultValue|defaultChecked|innerHTML|suppressContentEditableWarning|suppressHydrationWarning|valueLink|abbr|accept|acceptCharset|accessKey|action|allow|allowUserMedia|allowPaymentRequest|allowFullScreen|allowTransparency|alt|async|autoComplete|autoPlay|capture|cellPadding|cellSpacing|challenge|charSet|checked|cite|classID|className|cols|colSpan|content|contentEditable|contextMenu|controls|controlsList|coords|crossOrigin|data|dateTime|decoding|default|defer|dir|disabled|disablePictureInPicture|download|draggable|encType|enterKeyHint|form|formAction|formEncType|formMethod|formNoValidate|formTarget|frameBorder|headers|height|hidden|high|href|hrefLang|htmlFor|httpEquiv|id|inputMode|integrity|is|keyParams|keyType|kind|label|lang|list|loading|loop|low|marginHeight|marginWidth|max|maxLength|media|mediaGroup|method|min|minLength|multiple|muted|name|nonce|noValidate|open|optimum|pattern|placeholder|playsInline|poster|preload|profile|radioGroup|readOnly|referrerPolicy|rel|required|reversed|role|rows|rowSpan|sandbox|scope|scoped|scrolling|seamless|selected|shape|size|sizes|slot|span|spellCheck|src|srcDoc|srcLang|srcSet|start|step|style|summary|tabIndex|target|title|translate|type|useMap|value|width|wmode|wrap|about|datatype|inlist|prefix|property|resource|typeof|vocab|autoCapitalize|autoCorrect|autoSave|color|incremental|fallback|inert|itemProp|itemScope|itemType|itemID|itemRef|on|option|results|security|unselectable|accentHeight|accumulate|additive|alignmentBaseline|allowReorder|alphabetic|amplitude|arabicForm|ascent|attributeName|attributeType|autoReverse|azimuth|baseFrequency|baselineShift|baseProfile|bbox|begin|bias|by|calcMode|capHeight|clip|clipPathUnits|clipPath|clipRule|colorInterpolation|colorInterpolationFilters|colorProfile|colorRendering|contentScriptType|contentStyleType|cursor|cx|cy|d|decelerate|descent|diffuseConstant|direction|display|divisor|dominantBaseline|dur|dx|dy|edgeMode|elevation|enableBackground|end|exponent|externalResourcesRequired|fill|fillOpacity|fillRule|filter|filterRes|filterUnits|floodColor|floodOpacity|focusable|fontFamily|fontSize|fontSizeAdjust|fontStretch|fontStyle|fontVariant|fontWeight|format|from|fr|fx|fy|g1|g2|glyphName|glyphOrientationHorizontal|glyphOrientationVertical|glyphRef|gradientTransform|gradientUnits|hanging|horizAdvX|horizOriginX|ideographic|imageRendering|in|in2|intercept|k|k1|k2|k3|k4|kernelMatrix|kernelUnitLength|kerning|keyPoints|keySplines|keyTimes|lengthAdjust|letterSpacing|lightingColor|limitingConeAngle|local|markerEnd|markerMid|markerStart|markerHeight|markerUnits|markerWidth|mask|maskContentUnits|maskUnits|mathematical|mode|numOctaves|offset|opacity|operator|order|orient|orientation|origin|overflow|overlinePosition|overlineThickness|panose1|paintOrder|pathLength|patternContentUnits|patternTransform|patternUnits|pointerEvents|points|pointsAtX|pointsAtY|pointsAtZ|preserveAlpha|preserveAspectRatio|primitiveUnits|r|radius|refX|refY|renderingIntent|repeatCount|repeatDur|requiredExtensions|requiredFeatures|restart|result|rotate|rx|ry|scale|seed|shapeRendering|slope|spacing|specularConstant|specularExponent|speed|spreadMethod|startOffset|stdDeviation|stemh|stemv|stitchTiles|stopColor|stopOpacity|strikethroughPosition|strikethroughThickness|string|stroke|strokeDasharray|strokeDashoffset|strokeLinecap|strokeLinejoin|strokeMiterlimit|strokeOpacity|strokeWidth|surfaceScale|systemLanguage|tableValues|targetX|targetY|textAnchor|textDecoration|textRendering|textLength|to|transform|u1|u2|underlinePosition|underlineThickness|unicode|unicodeBidi|unicodeRange|unitsPerEm|vAlphabetic|vHanging|vIdeographic|vMathematical|values|vectorEffect|version|vertAdvY|vertOriginX|vertOriginY|viewBox|viewTarget|visibility|widths|wordSpacing|writingMode|x|xHeight|x1|x2|xChannelSelector|xlinkActuate|xlinkArcrole|xlinkHref|xlinkRole|xlinkShow|xlinkTitle|xlinkType|xmlBase|xmlns|xmlnsXlink|xmlLang|xmlSpace|y|y1|y2|yChannelSelector|z|zoomAndPan|for|class|autofocus)|(([Dd][Aa][Tt][Aa]|[Aa][Rr][Ii][Aa]|x)-.*))$/; // https://esbench.com/bench/5bfee68a4cd7e6009ef61d23 21467 21468 var isPropValid = /* #__PURE__ */emotion_memoize_browser_esm(function (prop) { 21469 return reactPropsRegex.test(prop) || prop.charCodeAt(0) === 111 21470 /* o */ 21471 && prop.charCodeAt(1) === 110 21472 /* n */ 21473 && prop.charCodeAt(2) < 91; 21474 } 21475 /* Z+1 */ 21476 ); 21477 21478 /* harmony default export */ var emotion_is_prop_valid_browser_esm = (isPropValid); 21479 21480 ;// CONCATENATED MODULE: ./node_modules/@emotion/styled/node_modules/@emotion/utils/dist/emotion-utils.browser.esm.js 21481 var emotion_utils_browser_esm_isBrowser = "object" !== 'undefined'; 21482 function dist_emotion_utils_browser_esm_getRegisteredStyles(registered, registeredStyles, classNames) { 21483 var rawClassName = ''; 21484 classNames.split(' ').forEach(function (className) { 21485 if (registered[className] !== undefined) { 21486 registeredStyles.push(registered[className] + ";"); 21487 } else { 21488 rawClassName += className + " "; 21489 } 21490 }); 21491 return rawClassName; 21492 } 21493 var emotion_utils_browser_esm_registerStyles = function registerStyles(cache, serialized, isStringTag) { 21494 var className = cache.key + "-" + serialized.name; 21495 21496 if ( // we only need to add the styles to the registered cache if the 21497 // class name could be used further down 21498 // the tree but if it's a string tag, we know it won't 21499 // so we don't have to add it to registered cache. 21500 // this improves memory usage since we can avoid storing the whole style string 21501 (isStringTag === false || // we need to always store it if we're in compat mode and 21502 // in node since emotion-server relies on whether a style is in 21503 // the registered cache to know whether a style is global or not 21504 // also, note that this check will be dead code eliminated in the browser 21505 emotion_utils_browser_esm_isBrowser === false ) && cache.registered[className] === undefined) { 21506 cache.registered[className] = serialized.styles; 21507 } 21508 }; 21509 var dist_emotion_utils_browser_esm_insertStyles = function insertStyles(cache, serialized, isStringTag) { 21510 emotion_utils_browser_esm_registerStyles(cache, serialized, isStringTag); 21511 var className = cache.key + "-" + serialized.name; 21512 21513 if (cache.inserted[serialized.name] === undefined) { 21514 var current = serialized; 21515 21516 do { 21517 var maybeStyles = cache.insert(serialized === current ? "." + className : '', current, cache.sheet, true); 21518 21519 current = current.next; 21520 } while (current !== undefined); 21521 } 21522 }; 21523 21524 21525 21526 ;// CONCATENATED MODULE: ./node_modules/@emotion/styled/base/dist/emotion-styled-base.browser.esm.js 21527 21528 21529 21530 21531 21532 21533 21534 21535 var testOmitPropsOnStringTag = emotion_is_prop_valid_browser_esm; 21536 21537 var testOmitPropsOnComponent = function testOmitPropsOnComponent(key) { 21538 return key !== 'theme'; 21539 }; 21540 21541 var getDefaultShouldForwardProp = function getDefaultShouldForwardProp(tag) { 21542 return typeof tag === 'string' && // 96 is one less than the char code 21543 // for "a" so this is checking that 21544 // it's a lowercase character 21545 tag.charCodeAt(0) > 96 ? testOmitPropsOnStringTag : testOmitPropsOnComponent; 21546 }; 21547 var composeShouldForwardProps = function composeShouldForwardProps(tag, options, isReal) { 21548 var shouldForwardProp; 21549 21550 if (options) { 21551 var optionsShouldForwardProp = options.shouldForwardProp; 21552 shouldForwardProp = tag.__emotion_forwardProp && optionsShouldForwardProp ? function (propName) { 21553 return tag.__emotion_forwardProp(propName) && optionsShouldForwardProp(propName); 21554 } : optionsShouldForwardProp; 21555 } 21556 21557 if (typeof shouldForwardProp !== 'function' && isReal) { 21558 shouldForwardProp = tag.__emotion_forwardProp; 21559 } 21560 21561 return shouldForwardProp; 21562 }; 21563 21564 var emotion_styled_base_browser_esm_useInsertionEffect = external_React_['useInsertion' + 'Effect'] ? external_React_['useInsertion' + 'Effect'] : function useInsertionEffect(create) { 21565 create(); 21566 }; 21567 function emotion_styled_base_browser_esm_useInsertionEffectMaybe(create) { 21568 21569 emotion_styled_base_browser_esm_useInsertionEffect(create); 21570 } 21571 21572 var emotion_styled_base_browser_esm_ILLEGAL_ESCAPE_SEQUENCE_ERROR = "You have illegal escape sequence in your template literal, most likely inside content's property value.\nBecause you write your CSS inside a JavaScript string you actually have to do double escaping, so for example \"content: '\\00d7';\" should become \"content: '\\\\00d7';\".\nYou can read more about this here:\nhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#ES2018_revision_of_illegal_escape_sequences"; 21573 21574 var emotion_styled_base_browser_esm_Insertion = function Insertion(_ref) { 21575 var cache = _ref.cache, 21576 serialized = _ref.serialized, 21577 isStringTag = _ref.isStringTag; 21578 emotion_utils_browser_esm_registerStyles(cache, serialized, isStringTag); 21579 var rules = emotion_styled_base_browser_esm_useInsertionEffectMaybe(function () { 21580 return dist_emotion_utils_browser_esm_insertStyles(cache, serialized, isStringTag); 21581 }); 21582 21583 return null; 21584 }; 21585 21586 var createStyled = function createStyled(tag, options) { 21587 if (false) {} 21588 21589 var isReal = tag.__emotion_real === tag; 21590 var baseTag = isReal && tag.__emotion_base || tag; 21591 var identifierName; 21592 var targetClassName; 21593 21594 if (options !== undefined) { 21595 identifierName = options.label; 21596 targetClassName = options.target; 21597 } 21598 21599 var shouldForwardProp = composeShouldForwardProps(tag, options, isReal); 21600 var defaultShouldForwardProp = shouldForwardProp || getDefaultShouldForwardProp(baseTag); 21601 var shouldUseAs = !defaultShouldForwardProp('as'); 21602 return function () { 21603 var args = arguments; 21604 var styles = isReal && tag.__emotion_styles !== undefined ? tag.__emotion_styles.slice(0) : []; 21605 21606 if (identifierName !== undefined) { 21607 styles.push("label:" + identifierName + ";"); 21608 } 21609 21610 if (args[0] == null || args[0].raw === undefined) { 21611 styles.push.apply(styles, args); 21612 } else { 21613 if (false) {} 21614 21615 styles.push(args[0][0]); 21616 var len = args.length; 21617 var i = 1; 21618 21619 for (; i < len; i++) { 21620 if (false) {} 21621 21622 styles.push(args[i], args[0][i]); 21623 } 21624 } // $FlowFixMe: we need to cast StatelessFunctionalComponent to our PrivateStyledComponent class 21625 21626 21627 var Styled = emotion_element_cbed451f_browser_esm_withEmotionCache(function (props, cache, ref) { 21628 var FinalTag = shouldUseAs && props.as || baseTag; 21629 var className = ''; 21630 var classInterpolations = []; 21631 var mergedProps = props; 21632 21633 if (props.theme == null) { 21634 mergedProps = {}; 21635 21636 for (var key in props) { 21637 mergedProps[key] = props[key]; 21638 } 21639 21640 mergedProps.theme = (0,external_React_.useContext)(emotion_element_cbed451f_browser_esm_ThemeContext); 21641 } 21642 21643 if (typeof props.className === 'string') { 21644 className = dist_emotion_utils_browser_esm_getRegisteredStyles(cache.registered, classInterpolations, props.className); 21645 } else if (props.className != null) { 21646 className = props.className + " "; 21647 } 21648 21649 var serialized = emotion_serialize_browser_esm_serializeStyles(styles.concat(classInterpolations), cache.registered, mergedProps); 21650 className += cache.key + "-" + serialized.name; 21651 21652 if (targetClassName !== undefined) { 21653 className += " " + targetClassName; 21654 } 21655 21656 var finalShouldForwardProp = shouldUseAs && shouldForwardProp === undefined ? getDefaultShouldForwardProp(FinalTag) : defaultShouldForwardProp; 21657 var newProps = {}; 21658 21659 for (var _key in props) { 21660 if (shouldUseAs && _key === 'as') continue; 21661 21662 if ( // $FlowFixMe 21663 finalShouldForwardProp(_key)) { 21664 newProps[_key] = props[_key]; 21665 } 21666 } 21667 21668 newProps.className = className; 21669 newProps.ref = ref; 21670 return /*#__PURE__*/(0,external_React_.createElement)(external_React_.Fragment, null, /*#__PURE__*/(0,external_React_.createElement)(emotion_styled_base_browser_esm_Insertion, { 21671 cache: cache, 21672 serialized: serialized, 21673 isStringTag: typeof FinalTag === 'string' 21674 }), /*#__PURE__*/(0,external_React_.createElement)(FinalTag, newProps)); 21675 }); 21676 Styled.displayName = identifierName !== undefined ? identifierName : "Styled(" + (typeof baseTag === 'string' ? baseTag : baseTag.displayName || baseTag.name || 'Component') + ")"; 21677 Styled.defaultProps = tag.defaultProps; 21678 Styled.__emotion_real = Styled; 21679 Styled.__emotion_base = baseTag; 21680 Styled.__emotion_styles = styles; 21681 Styled.__emotion_forwardProp = shouldForwardProp; 21682 Object.defineProperty(Styled, 'toString', { 21683 value: function value() { 21684 if (targetClassName === undefined && "production" !== 'production') {} // $FlowFixMe: coerce undefined to string 21685 21686 21687 return "." + targetClassName; 21688 } 21689 }); 21690 21691 Styled.withComponent = function (nextTag, nextOptions) { 21692 return createStyled(nextTag, extends_extends({}, options, nextOptions, { 21693 shouldForwardProp: composeShouldForwardProps(Styled, nextOptions, true) 21694 })).apply(void 0, styles); 21695 }; 21696 21697 return Styled; 21698 }; 21699 }; 21700 21701 /* harmony default export */ var emotion_styled_base_browser_esm = (createStyled); 21702 21703 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/view/component.js 21704 21705 21706 /** 21707 * External dependencies 21708 */ 21709 21710 /** 21711 * `View` is a core component that renders everything in the library. 21712 * It is the principle component in the entire library. 21713 * 21714 * @example 21715 * ```jsx 21716 * import { View } from `@wordpress/components`; 21717 * 21718 * function Example() { 21719 * return ( 21720 * <View> 21721 * Code is Poetry 21722 * </View> 21723 * ); 21724 * } 21725 * ``` 21726 * 21727 * @type {import('../ui/context').WordPressComponent<'div', { children?: import('react').ReactNode }, true>} 21728 */ 21729 // @ts-ignore 21730 const View = emotion_styled_base_browser_esm("div", true ? { 21731 target: "em57xhy0" 21732 } : 0)( true ? "" : 0); 21733 21734 View.selector = '.components-view'; 21735 View.displayName = 'View'; 21736 /* harmony default export */ var component = (View); 21737 21738 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/visually-hidden/component.js 21739 21740 21741 21742 /** 21743 * Internal dependencies 21744 */ 21745 21746 21747 21748 /** 21749 * @param {import('../ui/context').WordPressComponentProps<{ children: import('react').ReactNode }, 'div'>} props 21750 * @param {import('react').ForwardedRef<any>} forwardedRef 21751 */ 21752 21753 function VisuallyHidden(props, forwardedRef) { 21754 const { 21755 style: styleProp, 21756 ...contextProps 21757 } = useContextSystem(props, 'VisuallyHidden'); 21758 return (0,external_wp_element_namespaceObject.createElement)(component, extends_extends({ 21759 ref: forwardedRef 21760 }, contextProps, { 21761 style: { ...visuallyHidden, 21762 ...(styleProp || {}) 21763 } 21764 })); 21765 } 21766 /** 21767 * `VisuallyHidden` is a component used to render text intended to be visually 21768 * hidden, but will show for alternate devices, for example a screen reader. 21769 * 21770 * @example 21771 * ```jsx 21772 * import { VisuallyHidden } from `@wordpress/components`; 21773 * 21774 * function Example() { 21775 * return ( 21776 * <VisuallyHidden> 21777 * <label>Code is Poetry</label> 21778 * </VisuallyHidden> 21779 * ); 21780 * } 21781 * ``` 21782 */ 21783 21784 21785 const ConnectedVisuallyHidden = contextConnect(VisuallyHidden, 'VisuallyHidden'); 21786 /* harmony default export */ var visually_hidden_component = (ConnectedVisuallyHidden); 21787 21788 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/button/index.js 21789 21790 21791 // @ts-nocheck 21792 21793 /** 21794 * External dependencies 21795 */ 21796 21797 21798 /** 21799 * WordPress dependencies 21800 */ 21801 21802 21803 21804 21805 /** 21806 * Internal dependencies 21807 */ 21808 21809 21810 21811 21812 const disabledEventsOnDisabledButton = ['onMouseDown', 'onClick']; 21813 21814 function useDeprecatedProps(_ref) { 21815 let { 21816 isDefault, 21817 isPrimary, 21818 isSecondary, 21819 isTertiary, 21820 isLink, 21821 variant, 21822 ...otherProps 21823 } = _ref; 21824 let computedVariant = variant; 21825 21826 if (isPrimary) { 21827 var _computedVariant; 21828 21829 (_computedVariant = computedVariant) !== null && _computedVariant !== void 0 ? _computedVariant : computedVariant = 'primary'; 21830 } 21831 21832 if (isTertiary) { 21833 var _computedVariant2; 21834 21835 (_computedVariant2 = computedVariant) !== null && _computedVariant2 !== void 0 ? _computedVariant2 : computedVariant = 'tertiary'; 21836 } 21837 21838 if (isSecondary) { 21839 var _computedVariant3; 21840 21841 (_computedVariant3 = computedVariant) !== null && _computedVariant3 !== void 0 ? _computedVariant3 : computedVariant = 'secondary'; 21842 } 21843 21844 if (isDefault) { 21845 var _computedVariant4; 21846 21847 external_wp_deprecated_default()('Button isDefault prop', { 21848 since: '5.4', 21849 alternative: 'variant="secondary"', 21850 version: '6.2' 21851 }); 21852 (_computedVariant4 = computedVariant) !== null && _computedVariant4 !== void 0 ? _computedVariant4 : computedVariant = 'secondary'; 21853 } 21854 21855 if (isLink) { 21856 var _computedVariant5; 21857 21858 (_computedVariant5 = computedVariant) !== null && _computedVariant5 !== void 0 ? _computedVariant5 : computedVariant = 'link'; 21859 } 21860 21861 return { ...otherProps, 21862 variant: computedVariant 21863 }; 21864 } 21865 21866 function Button(props, ref) { 21867 const { 21868 href, 21869 target, 21870 isSmall, 21871 isPressed, 21872 isBusy, 21873 isDestructive, 21874 className, 21875 disabled, 21876 icon, 21877 iconPosition = 'left', 21878 iconSize, 21879 showTooltip, 21880 tooltipPosition, 21881 shortcut, 21882 label, 21883 children, 21884 text, 21885 variant, 21886 __experimentalIsFocusable: isFocusable, 21887 describedBy, 21888 ...additionalProps 21889 } = useDeprecatedProps(props); 21890 const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(Button, 'components-button__description'); 21891 const classes = classnames_default()('components-button', className, { 21892 'is-secondary': variant === 'secondary', 21893 'is-primary': variant === 'primary', 21894 'is-small': isSmall, 21895 'is-tertiary': variant === 'tertiary', 21896 'is-pressed': isPressed, 21897 'is-busy': isBusy, 21898 'is-link': variant === 'link', 21899 'is-destructive': isDestructive, 21900 'has-text': !!icon && !!children, 21901 'has-icon': !!icon 21902 }); 21903 const trulyDisabled = disabled && !isFocusable; 21904 const Tag = href !== undefined && !trulyDisabled ? 'a' : 'button'; 21905 const tagProps = Tag === 'a' ? { 21906 href, 21907 target 21908 } : { 21909 type: 'button', 21910 disabled: trulyDisabled, 21911 'aria-pressed': isPressed 21912 }; 21913 21914 if (disabled && isFocusable) { 21915 // In this case, the button will be disabled, but still focusable and 21916 // perceivable by screen reader users. 21917 tagProps['aria-disabled'] = true; 21918 21919 for (const disabledEvent of disabledEventsOnDisabledButton) { 21920 additionalProps[disabledEvent] = event => { 21921 event.stopPropagation(); 21922 event.preventDefault(); 21923 }; 21924 } 21925 } // Should show the tooltip if... 21926 21927 21928 const shouldShowTooltip = !trulyDisabled && ( // An explicit tooltip is passed or... 21929 showTooltip && label || // There's a shortcut or... 21930 shortcut || // There's a label and... 21931 !!label && ( // The children are empty and... 21932 !children || (0,external_lodash_namespaceObject.isArray)(children) && !children.length) && // The tooltip is not explicitly disabled. 21933 false !== showTooltip); 21934 const descriptionId = describedBy ? instanceId : null; 21935 const describedById = additionalProps['aria-describedby'] || descriptionId; 21936 const element = (0,external_wp_element_namespaceObject.createElement)(Tag, extends_extends({}, tagProps, additionalProps, { 21937 className: classes, 21938 "aria-label": additionalProps['aria-label'] || label, 21939 "aria-describedby": describedById, 21940 ref: ref 21941 }), icon && iconPosition === 'left' && (0,external_wp_element_namespaceObject.createElement)(build_module_icon, { 21942 icon: icon, 21943 size: iconSize 21944 }), text && (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, text), icon && iconPosition === 'right' && (0,external_wp_element_namespaceObject.createElement)(build_module_icon, { 21945 icon: icon, 21946 size: iconSize 21947 }), children); 21948 21949 if (!shouldShowTooltip) { 21950 return (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, element, describedBy && (0,external_wp_element_namespaceObject.createElement)(visually_hidden_component, null, (0,external_wp_element_namespaceObject.createElement)("span", { 21951 id: descriptionId 21952 }, describedBy))); 21953 } 21954 21955 return (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, (0,external_wp_element_namespaceObject.createElement)(tooltip, { 21956 text: describedBy ? describedBy : label, 21957 shortcut: shortcut, 21958 position: tooltipPosition 21959 }, element), describedBy && (0,external_wp_element_namespaceObject.createElement)(visually_hidden_component, null, (0,external_wp_element_namespaceObject.createElement)("span", { 21960 id: descriptionId 21961 }, describedBy))); 21962 } 21963 /* harmony default export */ var build_module_button = ((0,external_wp_element_namespaceObject.forwardRef)(Button)); 21964 21965 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/scroll-lock/index.js 21966 /** 21967 * WordPress dependencies 21968 */ 21969 21970 /* 21971 * Setting `overflow: hidden` on html and body elements resets body scroll in iOS. 21972 * Save scroll top so we can restore it after locking scroll. 21973 * 21974 * NOTE: It would be cleaner and possibly safer to find a localized solution such 21975 * as preventing default on certain touchmove events. 21976 */ 21977 21978 let previousScrollTop = 0; 21979 /** 21980 * @param {boolean} locked 21981 */ 21982 21983 function setLocked(locked) { 21984 const scrollingElement = document.scrollingElement || document.body; 21985 21986 if (locked) { 21987 previousScrollTop = scrollingElement.scrollTop; 21988 } 21989 21990 const methodName = locked ? 'add' : 'remove'; 21991 scrollingElement.classList[methodName]('lockscroll'); // Adding the class to the document element seems to be necessary in iOS. 21992 21993 document.documentElement.classList[methodName]('lockscroll'); 21994 21995 if (!locked) { 21996 scrollingElement.scrollTop = previousScrollTop; 21997 } 21998 } 21999 22000 let lockCounter = 0; 22001 /** 22002 * A component that will lock scrolling when it is mounted and unlock scrolling when it is unmounted. 22003 * 22004 * @return {null} Render nothing. 22005 */ 22006 22007 function ScrollLock() { 22008 (0,external_wp_element_namespaceObject.useEffect)(() => { 22009 if (lockCounter === 0) { 22010 setLocked(true); 22011 } 22012 22013 ++lockCounter; 22014 return () => { 22015 if (lockCounter === 1) { 22016 setLocked(false); 22017 } 22018 22019 --lockCounter; 22020 }; 22021 }, []); 22022 return null; 22023 } 22024 22025 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/slot-fill/context.js 22026 // @ts-nocheck 22027 22028 /** 22029 * WordPress dependencies 22030 */ 22031 22032 const SlotFillContext = (0,external_wp_element_namespaceObject.createContext)({ 22033 registerSlot: () => {}, 22034 unregisterSlot: () => {}, 22035 registerFill: () => {}, 22036 unregisterFill: () => {}, 22037 getSlot: () => {}, 22038 getFills: () => {}, 22039 subscribe: () => {} 22040 }); 22041 /* harmony default export */ var context = (SlotFillContext); 22042 22043 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/slot-fill/use-slot.js 22044 // @ts-nocheck 22045 22046 /** 22047 * WordPress dependencies 22048 */ 22049 22050 /** 22051 * Internal dependencies 22052 */ 22053 22054 22055 /** 22056 * React hook returning the active slot given a name. 22057 * 22058 * @param {string} name Slot name. 22059 * @return {Object} Slot object. 22060 */ 22061 22062 const useSlot = name => { 22063 const { 22064 getSlot, 22065 subscribe 22066 } = (0,external_wp_element_namespaceObject.useContext)(context); 22067 const [slot, setSlot] = (0,external_wp_element_namespaceObject.useState)(getSlot(name)); 22068 (0,external_wp_element_namespaceObject.useEffect)(() => { 22069 setSlot(getSlot(name)); 22070 const unsubscribe = subscribe(() => { 22071 setSlot(getSlot(name)); 22072 }); 22073 return unsubscribe; 22074 }, [name]); 22075 return slot; 22076 }; 22077 22078 /* harmony default export */ var use_slot = (useSlot); 22079 22080 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/slot-fill/fill.js 22081 22082 22083 // @ts-nocheck 22084 22085 /** 22086 * External dependencies 22087 */ 22088 22089 /** 22090 * WordPress dependencies 22091 */ 22092 22093 22094 /** 22095 * Internal dependencies 22096 */ 22097 22098 22099 22100 22101 function FillComponent(_ref) { 22102 let { 22103 name, 22104 children, 22105 registerFill, 22106 unregisterFill 22107 } = _ref; 22108 const slot = use_slot(name); 22109 const ref = (0,external_wp_element_namespaceObject.useRef)({ 22110 name, 22111 children 22112 }); 22113 (0,external_wp_element_namespaceObject.useLayoutEffect)(() => { 22114 registerFill(name, ref.current); 22115 return () => unregisterFill(name, ref.current); 22116 }, []); 22117 (0,external_wp_element_namespaceObject.useLayoutEffect)(() => { 22118 ref.current.children = children; 22119 22120 if (slot) { 22121 slot.forceUpdate(); 22122 } 22123 }, [children]); 22124 (0,external_wp_element_namespaceObject.useLayoutEffect)(() => { 22125 if (name === ref.current.name) { 22126 // Ignore initial effect. 22127 return; 22128 } 22129 22130 unregisterFill(ref.current.name, ref.current); 22131 ref.current.name = name; 22132 registerFill(name, ref.current); 22133 }, [name]); 22134 22135 if (!slot || !slot.node) { 22136 return null; 22137 } // If a function is passed as a child, provide it with the fillProps. 22138 22139 22140 if ((0,external_lodash_namespaceObject.isFunction)(children)) { 22141 children = children(slot.props.fillProps); 22142 } 22143 22144 return (0,external_wp_element_namespaceObject.createPortal)(children, slot.node); 22145 } 22146 22147 const Fill = props => (0,external_wp_element_namespaceObject.createElement)(context.Consumer, null, _ref2 => { 22148 let { 22149 registerFill, 22150 unregisterFill 22151 } = _ref2; 22152 return (0,external_wp_element_namespaceObject.createElement)(FillComponent, extends_extends({}, props, { 22153 registerFill: registerFill, 22154 unregisterFill: unregisterFill 22155 })); 22156 }); 22157 22158 /* harmony default export */ var fill = (Fill); 22159 22160 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/slot-fill/slot.js 22161 22162 22163 // @ts-nocheck 22164 22165 /** 22166 * External dependencies 22167 */ 22168 22169 /** 22170 * WordPress dependencies 22171 */ 22172 22173 22174 /** 22175 * Internal dependencies 22176 */ 22177 22178 22179 22180 class SlotComponent extends external_wp_element_namespaceObject.Component { 22181 constructor() { 22182 super(...arguments); 22183 this.isUnmounted = false; 22184 this.bindNode = this.bindNode.bind(this); 22185 } 22186 22187 componentDidMount() { 22188 const { 22189 registerSlot 22190 } = this.props; 22191 registerSlot(this.props.name, this); 22192 } 22193 22194 componentWillUnmount() { 22195 const { 22196 unregisterSlot 22197 } = this.props; 22198 this.isUnmounted = true; 22199 unregisterSlot(this.props.name, this); 22200 } 22201 22202 componentDidUpdate(prevProps) { 22203 const { 22204 name, 22205 unregisterSlot, 22206 registerSlot 22207 } = this.props; 22208 22209 if (prevProps.name !== name) { 22210 unregisterSlot(prevProps.name); 22211 registerSlot(name, this); 22212 } 22213 } 22214 22215 bindNode(node) { 22216 this.node = node; 22217 } 22218 22219 forceUpdate() { 22220 if (this.isUnmounted) { 22221 return; 22222 } 22223 22224 super.forceUpdate(); 22225 } 22226 22227 render() { 22228 const { 22229 children, 22230 name, 22231 fillProps = {}, 22232 getFills 22233 } = this.props; 22234 const fills = (0,external_lodash_namespaceObject.map)(getFills(name, this), fill => { 22235 const fillChildren = (0,external_lodash_namespaceObject.isFunction)(fill.children) ? fill.children(fillProps) : fill.children; 22236 return external_wp_element_namespaceObject.Children.map(fillChildren, (child, childIndex) => { 22237 if (!child || (0,external_lodash_namespaceObject.isString)(child)) { 22238 return child; 22239 } 22240 22241 const childKey = child.key || childIndex; 22242 return (0,external_wp_element_namespaceObject.cloneElement)(child, { 22243 key: childKey 22244 }); 22245 }); 22246 }).filter( // In some cases fills are rendered only when some conditions apply. 22247 // This ensures that we only use non-empty fills when rendering, i.e., 22248 // it allows us to render wrappers only when the fills are actually present. 22249 (0,external_lodash_namespaceObject.negate)(external_wp_element_namespaceObject.isEmptyElement)); 22250 return (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, (0,external_lodash_namespaceObject.isFunction)(children) ? children(fills) : fills); 22251 } 22252 22253 } 22254 22255 const Slot = props => (0,external_wp_element_namespaceObject.createElement)(context.Consumer, null, _ref => { 22256 let { 22257 registerSlot, 22258 unregisterSlot, 22259 getFills 22260 } = _ref; 22261 return (0,external_wp_element_namespaceObject.createElement)(SlotComponent, extends_extends({}, props, { 22262 registerSlot: registerSlot, 22263 unregisterSlot: unregisterSlot, 22264 getFills: getFills 22265 })); 22266 }); 22267 22268 /* harmony default export */ var slot = (Slot); 22269 22270 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/slot-fill/bubbles-virtually/slot-fill-context.js 22271 // @ts-nocheck 22272 22273 /** 22274 * WordPress dependencies 22275 */ 22276 22277 22278 const slot_fill_context_SlotFillContext = (0,external_wp_element_namespaceObject.createContext)({ 22279 slots: {}, 22280 fills: {}, 22281 registerSlot: () => { 22282 typeof process !== "undefined" && process.env && "production" !== "production" ? 0 : void 0; 22283 }, 22284 updateSlot: () => {}, 22285 unregisterSlot: () => {}, 22286 registerFill: () => {}, 22287 unregisterFill: () => {} 22288 }); 22289 /* harmony default export */ var slot_fill_context = (slot_fill_context_SlotFillContext); 22290 22291 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/slot-fill/bubbles-virtually/use-slot.js 22292 // @ts-nocheck 22293 22294 /** 22295 * WordPress dependencies 22296 */ 22297 22298 /** 22299 * Internal dependencies 22300 */ 22301 22302 22303 function use_slot_useSlot(name) { 22304 const registry = (0,external_wp_element_namespaceObject.useContext)(slot_fill_context); 22305 const slot = registry.slots[name] || {}; 22306 const slotFills = registry.fills[name]; 22307 const fills = (0,external_wp_element_namespaceObject.useMemo)(() => slotFills || [], [slotFills]); 22308 const updateSlot = (0,external_wp_element_namespaceObject.useCallback)(fillProps => { 22309 registry.updateSlot(name, fillProps); 22310 }, [name, registry.updateSlot]); 22311 const unregisterSlot = (0,external_wp_element_namespaceObject.useCallback)(slotRef => { 22312 registry.unregisterSlot(name, slotRef); 22313 }, [name, registry.unregisterSlot]); 22314 const registerFill = (0,external_wp_element_namespaceObject.useCallback)(fillRef => { 22315 registry.registerFill(name, fillRef); 22316 }, [name, registry.registerFill]); 22317 const unregisterFill = (0,external_wp_element_namespaceObject.useCallback)(fillRef => { 22318 registry.unregisterFill(name, fillRef); 22319 }, [name, registry.unregisterFill]); 22320 return { ...slot, 22321 updateSlot, 22322 unregisterSlot, 22323 fills, 22324 registerFill, 22325 unregisterFill 22326 }; 22327 } 22328 22329 ;// CONCATENATED MODULE: ./node_modules/uuid/dist/esm-browser/rng.js 22330 // Unique ID creation requires a high quality random # generator. In the browser we therefore 22331 // require the crypto API and do not support built-in fallback to lower quality random number 22332 // generators (like Math.random()). 22333 var getRandomValues; 22334 var rnds8 = new Uint8Array(16); 22335 function rng() { 22336 // lazy load so that environments that need to polyfill have a chance to do so 22337 if (!getRandomValues) { 22338 // getRandomValues needs to be invoked in a context where "this" is a Crypto implementation. Also, 22339 // find the complete implementation of crypto (msCrypto) on IE11. 22340 getRandomValues = typeof crypto !== 'undefined' && crypto.getRandomValues && crypto.getRandomValues.bind(crypto) || typeof msCrypto !== 'undefined' && typeof msCrypto.getRandomValues === 'function' && msCrypto.getRandomValues.bind(msCrypto); 22341 22342 if (!getRandomValues) { 22343 throw new Error('crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported'); 22344 } 22345 } 22346 22347 return getRandomValues(rnds8); 22348 } 22349 ;// CONCATENATED MODULE: ./node_modules/uuid/dist/esm-browser/regex.js 22350 /* harmony default export */ var regex = (/^(?:[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}|00000000-0000-0000-0000-000000000000)$/i); 22351 ;// CONCATENATED MODULE: ./node_modules/uuid/dist/esm-browser/validate.js 22352 22353 22354 function validate(uuid) { 22355 return typeof uuid === 'string' && regex.test(uuid); 22356 } 22357 22358 /* harmony default export */ var esm_browser_validate = (validate); 22359 ;// CONCATENATED MODULE: ./node_modules/uuid/dist/esm-browser/stringify.js 22360 22361 /** 22362 * Convert array of 16 byte values to UUID string format of the form: 22363 * XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX 22364 */ 22365 22366 var byteToHex = []; 22367 22368 for (var i = 0; i < 256; ++i) { 22369 byteToHex.push((i + 0x100).toString(16).substr(1)); 22370 } 22371 22372 function stringify_stringify(arr) { 22373 var offset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0; 22374 // Note: Be careful editing this code! It's been tuned for performance 22375 // and works in ways you may not expect. See https://github.com/uuidjs/uuid/pull/434 22376 var uuid = (byteToHex[arr[offset + 0]] + byteToHex[arr[offset + 1]] + byteToHex[arr[offset + 2]] + byteToHex[arr[offset + 3]] + '-' + byteToHex[arr[offset + 4]] + byteToHex[arr[offset + 5]] + '-' + byteToHex[arr[offset + 6]] + byteToHex[arr[offset + 7]] + '-' + byteToHex[arr[offset + 8]] + byteToHex[arr[offset + 9]] + '-' + byteToHex[arr[offset + 10]] + byteToHex[arr[offset + 11]] + byteToHex[arr[offset + 12]] + byteToHex[arr[offset + 13]] + byteToHex[arr[offset + 14]] + byteToHex[arr[offset + 15]]).toLowerCase(); // Consistency check for valid UUID. If this throws, it's likely due to one 22377 // of the following: 22378 // - One or more input array values don't map to a hex octet (leading to 22379 // "undefined" in the uuid) 22380 // - Invalid input values for the RFC `version` or `variant` fields 22381 22382 if (!esm_browser_validate(uuid)) { 22383 throw TypeError('Stringified UUID is invalid'); 22384 } 22385 22386 return uuid; 22387 } 22388 22389 /* harmony default export */ var esm_browser_stringify = (stringify_stringify); 22390 ;// CONCATENATED MODULE: ./node_modules/uuid/dist/esm-browser/v4.js 22391 22392 22393 22394 function v4(options, buf, offset) { 22395 options = options || {}; 22396 var rnds = options.random || (options.rng || rng)(); // Per 4.4, set bits for version and `clock_seq_hi_and_reserved` 22397 22398 rnds[6] = rnds[6] & 0x0f | 0x40; 22399 rnds[8] = rnds[8] & 0x3f | 0x80; // Copy bytes to buffer, if provided 22400 22401 if (buf) { 22402 offset = offset || 0; 22403 22404 for (var i = 0; i < 16; ++i) { 22405 buf[offset + i] = rnds[i]; 22406 } 22407 22408 return buf; 22409 } 22410 22411 return esm_browser_stringify(rnds); 22412 } 22413 22414 /* harmony default export */ var esm_browser_v4 = (v4); 22415 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/style-provider/index.js 22416 22417 // @ts-nocheck 22418 22419 /** 22420 * External dependencies 22421 */ 22422 22423 22424 22425 22426 const uuidCache = new Set(); 22427 const memoizedCreateCacheWithContainer = memize_default()(container => { 22428 // Emotion only accepts alphabetical and hyphenated keys so we just strip the numbers from the UUID. It _should_ be fine. 22429 let key = esm_browser_v4().replace(/[0-9]/g, ''); 22430 22431 while (uuidCache.has(key)) { 22432 key = esm_browser_v4().replace(/[0-9]/g, ''); 22433 } 22434 22435 uuidCache.add(key); 22436 return emotion_cache_browser_esm({ 22437 container, 22438 key 22439 }); 22440 }); 22441 function StyleProvider(_ref) { 22442 let { 22443 children, 22444 document 22445 } = _ref; 22446 22447 if (!document) { 22448 return null; 22449 } 22450 22451 const cache = memoizedCreateCacheWithContainer(document.head); 22452 return (0,external_wp_element_namespaceObject.createElement)(CacheProvider, { 22453 value: cache 22454 }, children); 22455 } 22456 22457 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/slot-fill/bubbles-virtually/fill.js 22458 22459 // @ts-nocheck 22460 22461 /** 22462 * WordPress dependencies 22463 */ 22464 22465 /** 22466 * Internal dependencies 22467 */ 22468 22469 22470 22471 22472 function useForceUpdate() { 22473 const [, setState] = (0,external_wp_element_namespaceObject.useState)({}); 22474 const mounted = (0,external_wp_element_namespaceObject.useRef)(true); 22475 (0,external_wp_element_namespaceObject.useEffect)(() => { 22476 return () => { 22477 mounted.current = false; 22478 }; 22479 }, []); 22480 return () => { 22481 if (mounted.current) { 22482 setState({}); 22483 } 22484 }; 22485 } 22486 22487 function fill_Fill(_ref) { 22488 let { 22489 name, 22490 children 22491 } = _ref; 22492 const slot = use_slot_useSlot(name); 22493 const ref = (0,external_wp_element_namespaceObject.useRef)({ 22494 rerender: useForceUpdate() 22495 }); 22496 (0,external_wp_element_namespaceObject.useEffect)(() => { 22497 // We register fills so we can keep track of their existance. 22498 // Some Slot implementations need to know if there're already fills 22499 // registered so they can choose to render themselves or not. 22500 slot.registerFill(ref); 22501 return () => { 22502 slot.unregisterFill(ref); 22503 }; 22504 }, [slot.registerFill, slot.unregisterFill]); 22505 22506 if (!slot.ref || !slot.ref.current) { 22507 return null; 22508 } 22509 22510 if (typeof children === 'function') { 22511 children = children(slot.fillProps); 22512 } // When using a `Fill`, the `children` will be rendered in the document of the 22513 // `Slot`. This means that we need to wrap the `children` in a `StyleProvider` 22514 // to make sure we're referencing the right document/iframe (instead of the 22515 // context of the `Fill`'s parent). 22516 22517 22518 const wrappedChildren = (0,external_wp_element_namespaceObject.createElement)(StyleProvider, { 22519 document: slot.ref.current.ownerDocument 22520 }, children); 22521 return (0,external_wp_element_namespaceObject.createPortal)(wrappedChildren, slot.ref.current); 22522 } 22523 22524 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/slot-fill/bubbles-virtually/slot.js 22525 22526 22527 // @ts-nocheck 22528 22529 /** 22530 * WordPress dependencies 22531 */ 22532 22533 22534 /** 22535 * Internal dependencies 22536 */ 22537 22538 22539 22540 function slot_Slot(_ref, forwardedRef) { 22541 let { 22542 name, 22543 fillProps = {}, 22544 as: Component = 'div', 22545 ...props 22546 } = _ref; 22547 const registry = (0,external_wp_element_namespaceObject.useContext)(slot_fill_context); 22548 const ref = (0,external_wp_element_namespaceObject.useRef)(); 22549 (0,external_wp_element_namespaceObject.useLayoutEffect)(() => { 22550 registry.registerSlot(name, ref, fillProps); 22551 return () => { 22552 registry.unregisterSlot(name, ref); 22553 }; // We are not including fillProps in the deps because we don't want to 22554 // unregister and register the slot whenever fillProps change, which would 22555 // cause the fill to be re-mounted. We are only considering the initial value 22556 // of fillProps. 22557 }, [registry.registerSlot, registry.unregisterSlot, name]); // fillProps may be an update that interacts with the layout, so we 22558 // useLayoutEffect. 22559 22560 (0,external_wp_element_namespaceObject.useLayoutEffect)(() => { 22561 registry.updateSlot(name, fillProps); 22562 }); 22563 return (0,external_wp_element_namespaceObject.createElement)(Component, extends_extends({ 22564 ref: (0,external_wp_compose_namespaceObject.useMergeRefs)([forwardedRef, ref]) 22565 }, props)); 22566 } 22567 22568 /* harmony default export */ var bubbles_virtually_slot = ((0,external_wp_element_namespaceObject.forwardRef)(slot_Slot)); 22569 22570 ;// CONCATENATED MODULE: external ["wp","isShallowEqual"] 22571 var external_wp_isShallowEqual_namespaceObject = window["wp"]["isShallowEqual"]; 22572 var external_wp_isShallowEqual_default = /*#__PURE__*/__webpack_require__.n(external_wp_isShallowEqual_namespaceObject); 22573 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/slot-fill/bubbles-virtually/slot-fill-provider.js 22574 22575 // @ts-nocheck 22576 22577 /** 22578 * WordPress dependencies 22579 */ 22580 22581 22582 /** 22583 * Internal dependencies 22584 */ 22585 22586 22587 22588 function useSlotRegistry() { 22589 const [slots, setSlots] = (0,external_wp_element_namespaceObject.useState)({}); 22590 const [fills, setFills] = (0,external_wp_element_namespaceObject.useState)({}); 22591 const registerSlot = (0,external_wp_element_namespaceObject.useCallback)((name, ref, fillProps) => { 22592 setSlots(prevSlots => { 22593 const slot = prevSlots[name] || {}; 22594 return { ...prevSlots, 22595 [name]: { ...slot, 22596 ref: ref || slot.ref, 22597 fillProps: fillProps || slot.fillProps || {} 22598 } 22599 }; 22600 }); 22601 }, []); 22602 const unregisterSlot = (0,external_wp_element_namespaceObject.useCallback)((name, ref) => { 22603 setSlots(prevSlots => { 22604 const { 22605 [name]: slot, 22606 ...nextSlots 22607 } = prevSlots; // Make sure we're not unregistering a slot registered by another element 22608 // See https://github.com/WordPress/gutenberg/pull/19242#issuecomment-590295412 22609 22610 if ((slot === null || slot === void 0 ? void 0 : slot.ref) === ref) { 22611 return nextSlots; 22612 } 22613 22614 return prevSlots; 22615 }); 22616 }, []); 22617 const updateSlot = (0,external_wp_element_namespaceObject.useCallback)((name, fillProps) => { 22618 const slot = slots[name]; 22619 22620 if (!slot) { 22621 return; 22622 } 22623 22624 if (!external_wp_isShallowEqual_default()(slot.fillProps, fillProps)) { 22625 slot.fillProps = fillProps; 22626 const slotFills = fills[name]; 22627 22628 if (slotFills) { 22629 // Force update fills. 22630 slotFills.map(fill => fill.current.rerender()); 22631 } 22632 } 22633 }, [slots, fills]); 22634 const registerFill = (0,external_wp_element_namespaceObject.useCallback)((name, ref) => { 22635 setFills(prevFills => ({ ...prevFills, 22636 [name]: [...(prevFills[name] || []), ref] 22637 })); 22638 }, []); 22639 const unregisterFill = (0,external_wp_element_namespaceObject.useCallback)((name, ref) => { 22640 setFills(prevFills => { 22641 if (prevFills[name]) { 22642 return { ...prevFills, 22643 [name]: prevFills[name].filter(fillRef => fillRef !== ref) 22644 }; 22645 } 22646 22647 return prevFills; 22648 }); 22649 }, []); // Memoizing the return value so it can be directly passed to Provider value 22650 22651 const registry = (0,external_wp_element_namespaceObject.useMemo)(() => ({ 22652 slots, 22653 fills, 22654 registerSlot, 22655 updateSlot, 22656 unregisterSlot, 22657 registerFill, 22658 unregisterFill 22659 }), [slots, fills, registerSlot, updateSlot, unregisterSlot, registerFill, unregisterFill]); 22660 return registry; 22661 } 22662 22663 function SlotFillProvider(_ref) { 22664 let { 22665 children 22666 } = _ref; 22667 const registry = useSlotRegistry(); 22668 return (0,external_wp_element_namespaceObject.createElement)(slot_fill_context.Provider, { 22669 value: registry 22670 }, children); 22671 } 22672 22673 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/slot-fill/provider.js 22674 22675 // @ts-nocheck 22676 22677 /** 22678 * External dependencies 22679 */ 22680 22681 /** 22682 * WordPress dependencies 22683 */ 22684 22685 22686 /** 22687 * Internal dependencies 22688 */ 22689 22690 22691 class provider_SlotFillProvider extends external_wp_element_namespaceObject.Component { 22692 constructor() { 22693 super(...arguments); 22694 this.registerSlot = this.registerSlot.bind(this); 22695 this.registerFill = this.registerFill.bind(this); 22696 this.unregisterSlot = this.unregisterSlot.bind(this); 22697 this.unregisterFill = this.unregisterFill.bind(this); 22698 this.getSlot = this.getSlot.bind(this); 22699 this.getFills = this.getFills.bind(this); 22700 this.hasFills = this.hasFills.bind(this); 22701 this.subscribe = this.subscribe.bind(this); 22702 this.slots = {}; 22703 this.fills = {}; 22704 this.listeners = []; 22705 this.contextValue = { 22706 registerSlot: this.registerSlot, 22707 unregisterSlot: this.unregisterSlot, 22708 registerFill: this.registerFill, 22709 unregisterFill: this.unregisterFill, 22710 getSlot: this.getSlot, 22711 getFills: this.getFills, 22712 hasFills: this.hasFills, 22713 subscribe: this.subscribe 22714 }; 22715 } 22716 22717 registerSlot(name, slot) { 22718 const previousSlot = this.slots[name]; 22719 this.slots[name] = slot; 22720 this.triggerListeners(); // Sometimes the fills are registered after the initial render of slot 22721 // But before the registerSlot call, we need to rerender the slot. 22722 22723 this.forceUpdateSlot(name); // If a new instance of a slot is being mounted while another with the 22724 // same name exists, force its update _after_ the new slot has been 22725 // assigned into the instance, such that its own rendering of children 22726 // will be empty (the new Slot will subsume all fills for this name). 22727 22728 if (previousSlot) { 22729 previousSlot.forceUpdate(); 22730 } 22731 } 22732 22733 registerFill(name, instance) { 22734 this.fills[name] = [...(this.fills[name] || []), instance]; 22735 this.forceUpdateSlot(name); 22736 } 22737 22738 unregisterSlot(name, instance) { 22739 // If a previous instance of a Slot by this name unmounts, do nothing, 22740 // as the slot and its fills should only be removed for the current 22741 // known instance. 22742 if (this.slots[name] !== instance) { 22743 return; 22744 } 22745 22746 delete this.slots[name]; 22747 this.triggerListeners(); 22748 } 22749 22750 unregisterFill(name, instance) { 22751 this.fills[name] = (0,external_lodash_namespaceObject.without)(this.fills[name], instance); 22752 this.forceUpdateSlot(name); 22753 } 22754 22755 getSlot(name) { 22756 return this.slots[name]; 22757 } 22758 22759 getFills(name, slotInstance) { 22760 // Fills should only be returned for the current instance of the slot 22761 // in which they occupy. 22762 if (this.slots[name] !== slotInstance) { 22763 return []; 22764 } 22765 22766 return this.fills[name]; 22767 } 22768 22769 hasFills(name) { 22770 return this.fills[name] && !!this.fills[name].length; 22771 } 22772 22773 forceUpdateSlot(name) { 22774 const slot = this.getSlot(name); 22775 22776 if (slot) { 22777 slot.forceUpdate(); 22778 } 22779 } 22780 22781 triggerListeners() { 22782 this.listeners.forEach(listener => listener()); 22783 } 22784 22785 subscribe(listener) { 22786 this.listeners.push(listener); 22787 return () => { 22788 this.listeners = (0,external_lodash_namespaceObject.without)(this.listeners, listener); 22789 }; 22790 } 22791 22792 render() { 22793 return (0,external_wp_element_namespaceObject.createElement)(context.Provider, { 22794 value: this.contextValue 22795 }, this.props.children); 22796 } 22797 22798 } 22799 22800 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/slot-fill/index.js 22801 22802 22803 // @ts-nocheck 22804 22805 /** 22806 * WordPress dependencies 22807 */ 22808 22809 /** 22810 * Internal dependencies 22811 */ 22812 22813 22814 22815 22816 22817 22818 22819 22820 function slot_fill_Fill(props) { 22821 // We're adding both Fills here so they can register themselves before 22822 // their respective slot has been registered. Only the Fill that has a slot 22823 // will render. The other one will return null. 22824 return (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, (0,external_wp_element_namespaceObject.createElement)(fill, props), (0,external_wp_element_namespaceObject.createElement)(fill_Fill, props)); 22825 } 22826 const slot_fill_Slot = (0,external_wp_element_namespaceObject.forwardRef)((_ref, ref) => { 22827 let { 22828 bubblesVirtually, 22829 ...props 22830 } = _ref; 22831 22832 if (bubblesVirtually) { 22833 return (0,external_wp_element_namespaceObject.createElement)(bubbles_virtually_slot, extends_extends({}, props, { 22834 ref: ref 22835 })); 22836 } 22837 22838 return (0,external_wp_element_namespaceObject.createElement)(slot, props); 22839 }); 22840 function Provider(_ref2) { 22841 let { 22842 children, 22843 ...props 22844 } = _ref2; 22845 return (0,external_wp_element_namespaceObject.createElement)(provider_SlotFillProvider, props, (0,external_wp_element_namespaceObject.createElement)(SlotFillProvider, null, children)); 22846 } 22847 function createSlotFill(name) { 22848 const FillComponent = props => (0,external_wp_element_namespaceObject.createElement)(slot_fill_Fill, extends_extends({ 22849 name: name 22850 }, props)); 22851 22852 FillComponent.displayName = name + 'Fill'; 22853 22854 const SlotComponent = props => (0,external_wp_element_namespaceObject.createElement)(slot_fill_Slot, extends_extends({ 22855 name: name 22856 }, props)); 22857 22858 SlotComponent.displayName = name + 'Slot'; 22859 SlotComponent.__unstableName = name; 22860 return { 22861 Fill: FillComponent, 22862 Slot: SlotComponent 22863 }; 22864 } 22865 22866 22867 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/animate/index.js 22868 /** 22869 * External dependencies 22870 */ 22871 22872 /** 22873 * @typedef {'top' | 'top left' | 'top right' | 'middle' | 'middle left' | 'middle right' | 'bottom' | 'bottom left' | 'bottom right'} AppearOrigin 22874 * @typedef {'left' | 'right'} SlideInOrigin 22875 * @typedef {{ type: 'appear'; origin?: AppearOrigin }} AppearOptions 22876 * @typedef {{ type: 'slide-in'; origin?: SlideInOrigin }} SlideInOptions 22877 * @typedef {{ type: 'loading' }} LoadingOptions 22878 * @typedef {AppearOptions | SlideInOptions | LoadingOptions} GetAnimateOptions 22879 */ 22880 22881 /* eslint-disable jsdoc/valid-types */ 22882 22883 /** 22884 * @param {GetAnimateOptions['type']} type The animation type 22885 * @return {'top' | 'left'} Default origin 22886 */ 22887 22888 function getDefaultOrigin(type) { 22889 return type === 'appear' ? 'top' : 'left'; 22890 } 22891 /* eslint-enable jsdoc/valid-types */ 22892 22893 /** 22894 * @param {GetAnimateOptions} options 22895 * 22896 * @return {string | void} ClassName that applies the animations 22897 */ 22898 22899 22900 function getAnimateClassName(options) { 22901 if (options.type === 'loading') { 22902 return classnames_default()('components-animate__loading'); 22903 } 22904 22905 const { 22906 type, 22907 origin = getDefaultOrigin(type) 22908 } = options; 22909 22910 if (type === 'appear') { 22911 const [yAxis, xAxis = 'center'] = origin.split(' '); 22912 return classnames_default()('components-animate__appear', { 22913 ['is-from-' + xAxis]: xAxis !== 'center', 22914 ['is-from-' + yAxis]: yAxis !== 'middle' 22915 }); 22916 } 22917 22918 if (type === 'slide-in') { 22919 return classnames_default()('components-animate__slide-in', 'is-from-' + origin); 22920 } 22921 } // @ts-ignore Reason: Planned for deprecation 22922 22923 function Animate(_ref) { 22924 let { 22925 type, 22926 options = {}, 22927 children 22928 } = _ref; 22929 return children({ 22930 className: getAnimateClassName({ 22931 type, 22932 ...options 22933 }) 22934 }); 22935 } 22936 22937 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/popover/index.js 22938 22939 22940 // @ts-nocheck 22941 22942 /** 22943 * External dependencies 22944 */ 22945 22946 /** 22947 * WordPress dependencies 22948 */ 22949 22950 22951 22952 22953 22954 /** 22955 * Internal dependencies 22956 */ 22957 22958 22959 22960 22961 22962 22963 /** 22964 * Name of slot in which popover should fill. 22965 * 22966 * @type {string} 22967 */ 22968 22969 const SLOT_NAME = 'Popover'; 22970 const slotNameContext = (0,external_wp_element_namespaceObject.createContext)(); 22971 22972 function computeAnchorRect(anchorRefFallback, anchorRect, getAnchorRect) { 22973 let anchorRef = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false; 22974 let shouldAnchorIncludePadding = arguments.length > 4 ? arguments[4] : undefined; 22975 let container = arguments.length > 5 ? arguments[5] : undefined; 22976 22977 if (anchorRect) { 22978 return anchorRect; 22979 } 22980 22981 if (getAnchorRect) { 22982 if (!anchorRefFallback.current) { 22983 return; 22984 } 22985 22986 const rect = getAnchorRect(anchorRefFallback.current); 22987 return offsetIframe(rect, rect.ownerDocument || anchorRefFallback.current.ownerDocument, container); 22988 } 22989 22990 if (anchorRef !== false) { 22991 if (!anchorRef || !window.Range || !window.Element || !window.DOMRect) { 22992 return; 22993 } // Duck-type to check if `anchorRef` is an instance of Range 22994 // `anchorRef instanceof window.Range` checks will break across document boundaries 22995 // such as in an iframe. 22996 22997 22998 if (typeof (anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.cloneRange) === 'function') { 22999 return offsetIframe((0,external_wp_dom_namespaceObject.getRectangleFromRange)(anchorRef), anchorRef.endContainer.ownerDocument, container); 23000 } // Duck-type to check if `anchorRef` is an instance of Element 23001 // `anchorRef instanceof window.Element` checks will break across document boundaries 23002 // such as in an iframe. 23003 23004 23005 if (typeof (anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.getBoundingClientRect) === 'function') { 23006 const rect = offsetIframe(anchorRef.getBoundingClientRect(), anchorRef.ownerDocument, container); 23007 23008 if (shouldAnchorIncludePadding) { 23009 return rect; 23010 } 23011 23012 return withoutPadding(rect, anchorRef); 23013 } 23014 23015 const { 23016 top, 23017 bottom 23018 } = anchorRef; 23019 const topRect = top.getBoundingClientRect(); 23020 const bottomRect = bottom.getBoundingClientRect(); 23021 const rect = offsetIframe(new window.DOMRect(topRect.left, topRect.top, topRect.width, bottomRect.bottom - topRect.top), top.ownerDocument, container); 23022 23023 if (shouldAnchorIncludePadding) { 23024 return rect; 23025 } 23026 23027 return withoutPadding(rect, anchorRef); 23028 } 23029 23030 if (!anchorRefFallback.current) { 23031 return; 23032 } 23033 23034 const { 23035 parentNode 23036 } = anchorRefFallback.current; 23037 const rect = offsetIframe(parentNode.getBoundingClientRect(), parentNode.ownerDocument, container); 23038 23039 if (shouldAnchorIncludePadding) { 23040 return rect; 23041 } 23042 23043 return withoutPadding(rect, parentNode); 23044 } 23045 23046 function popover_getComputedStyle(node) { 23047 return node.ownerDocument.defaultView.getComputedStyle(node); 23048 } 23049 23050 function withoutPadding(rect, element) { 23051 const { 23052 paddingTop, 23053 paddingBottom, 23054 paddingLeft, 23055 paddingRight 23056 } = popover_getComputedStyle(element); 23057 const top = paddingTop ? parseInt(paddingTop, 10) : 0; 23058 const bottom = paddingBottom ? parseInt(paddingBottom, 10) : 0; 23059 const left = paddingLeft ? parseInt(paddingLeft, 10) : 0; 23060 const right = paddingRight ? parseInt(paddingRight, 10) : 0; 23061 return { 23062 x: rect.left + left, 23063 y: rect.top + top, 23064 width: rect.width - left - right, 23065 height: rect.height - top - bottom, 23066 left: rect.left + left, 23067 right: rect.right - right, 23068 top: rect.top + top, 23069 bottom: rect.bottom - bottom 23070 }; 23071 } 23072 /** 23073 * Sets or removes an element attribute. 23074 * 23075 * @param {Element} element The element to modify. 23076 * @param {string} name The attribute name to set or remove. 23077 * @param {?string} value The value to set. A falsy value will remove the 23078 * attribute. 23079 */ 23080 23081 23082 function setAttribute(element, name, value) { 23083 if (!value) { 23084 if (element.hasAttribute(name)) { 23085 element.removeAttribute(name); 23086 } 23087 } else if (element.getAttribute(name) !== value) { 23088 element.setAttribute(name, value); 23089 } 23090 } 23091 /** 23092 * Sets or removes an element style property. 23093 * 23094 * @param {Element} element The element to modify. 23095 * @param {string} property The property to set or remove. 23096 * @param {?string} value The value to set. A falsy value will remove the 23097 * property. 23098 */ 23099 23100 23101 function setStyle(element, property) { 23102 let value = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : ''; 23103 23104 if (element.style[property] !== value) { 23105 element.style[property] = value; 23106 } 23107 } 23108 /** 23109 * Sets or removes an element class. 23110 * 23111 * @param {Element} element The element to modify. 23112 * @param {string} name The class to set or remove. 23113 * @param {boolean} toggle True to set the class, false to remove. 23114 */ 23115 23116 23117 function setClass(element, name, toggle) { 23118 if (toggle) { 23119 if (!element.classList.contains(name)) { 23120 element.classList.add(name); 23121 } 23122 } else if (element.classList.contains(name)) { 23123 element.classList.remove(name); 23124 } 23125 } 23126 23127 function getAnchorDocument(anchor) { 23128 if (!anchor) { 23129 return; 23130 } 23131 23132 if (anchor.endContainer) { 23133 return anchor.endContainer.ownerDocument; 23134 } 23135 23136 if (anchor.top) { 23137 return anchor.top.ownerDocument; 23138 } 23139 23140 return anchor.ownerDocument; 23141 } 23142 23143 const Popover = (_ref, ref) => { 23144 let { 23145 headerTitle, 23146 onClose, 23147 children, 23148 className, 23149 noArrow = true, 23150 isAlternate, 23151 // Disable reason: We generate the `...contentProps` rest as remainder 23152 // of props which aren't explicitly handled by this component. 23153 23154 /* eslint-disable no-unused-vars */ 23155 position = 'bottom right', 23156 range, 23157 focusOnMount = 'firstElement', 23158 anchorRef, 23159 shouldAnchorIncludePadding, 23160 anchorRect, 23161 getAnchorRect, 23162 expandOnMobile, 23163 animate = true, 23164 onFocusOutside, 23165 __unstableStickyBoundaryElement, 23166 __unstableSlotName = SLOT_NAME, 23167 __unstableObserveElement, 23168 __unstableBoundaryParent, 23169 __unstableForcePosition, 23170 __unstableForceXAlignment, 23171 __unstableEditorCanvasWrapper, 23172 23173 /* eslint-enable no-unused-vars */ 23174 ...contentProps 23175 } = _ref; 23176 const anchorRefFallback = (0,external_wp_element_namespaceObject.useRef)(null); 23177 const contentRef = (0,external_wp_element_namespaceObject.useRef)(null); 23178 const containerRef = (0,external_wp_element_namespaceObject.useRef)(); 23179 const isMobileViewport = (0,external_wp_compose_namespaceObject.useViewportMatch)('medium', '<'); 23180 const [animateOrigin, setAnimateOrigin] = (0,external_wp_element_namespaceObject.useState)(); 23181 23182 const slotName = (0,external_wp_element_namespaceObject.useContext)(slotNameContext) || __unstableSlotName; 23183 23184 const slot = use_slot_useSlot(slotName); 23185 const isExpanded = expandOnMobile && isMobileViewport; 23186 const [containerResizeListener, contentSize] = (0,external_wp_compose_namespaceObject.useResizeObserver)(); 23187 noArrow = isExpanded || noArrow; 23188 (0,external_wp_element_namespaceObject.useLayoutEffect)(() => { 23189 if (isExpanded) { 23190 setClass(containerRef.current, 'is-without-arrow', noArrow); 23191 setClass(containerRef.current, 'is-alternate', isAlternate); 23192 setAttribute(containerRef.current, 'data-x-axis'); 23193 setAttribute(containerRef.current, 'data-y-axis'); 23194 setStyle(containerRef.current, 'top'); 23195 setStyle(containerRef.current, 'left'); 23196 setStyle(contentRef.current, 'maxHeight'); 23197 setStyle(contentRef.current, 'maxWidth'); 23198 return; 23199 } 23200 23201 const refresh = () => { 23202 if (!containerRef.current || !contentRef.current) { 23203 return; 23204 } 23205 23206 let anchor = computeAnchorRect(anchorRefFallback, anchorRect, getAnchorRect, anchorRef, shouldAnchorIncludePadding, containerRef.current); 23207 23208 if (!anchor) { 23209 return; 23210 } 23211 23212 const { 23213 offsetParent, 23214 ownerDocument 23215 } = containerRef.current; 23216 let relativeOffsetTop = 0; // If there is a positioned ancestor element that is not the body, 23217 // subtract the position from the anchor rect. If the position of 23218 // the popover is fixed, the offset parent is null or the body 23219 // element, in which case the position is relative to the viewport. 23220 // See https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetParent 23221 23222 if (offsetParent && offsetParent !== ownerDocument.body) { 23223 const offsetParentRect = offsetParent.getBoundingClientRect(); 23224 relativeOffsetTop = offsetParentRect.top; 23225 anchor = new window.DOMRect(anchor.left - offsetParentRect.left, anchor.top - offsetParentRect.top, anchor.width, anchor.height); 23226 } 23227 23228 let boundaryElement; 23229 23230 if (__unstableBoundaryParent) { 23231 boundaryElement = containerRef.current.parentElement; 23232 } 23233 23234 const usedContentSize = !contentSize.height ? contentRef.current.getBoundingClientRect() : contentSize; 23235 const { 23236 popoverTop, 23237 popoverLeft, 23238 xAxis, 23239 yAxis, 23240 contentHeight, 23241 contentWidth 23242 } = computePopoverPosition(anchor, usedContentSize, position, __unstableStickyBoundaryElement, containerRef.current, relativeOffsetTop, boundaryElement, __unstableForcePosition, __unstableForceXAlignment, __unstableEditorCanvasWrapper); 23243 23244 if (typeof popoverTop === 'number' && typeof popoverLeft === 'number') { 23245 setStyle(containerRef.current, 'top', popoverTop + 'px'); 23246 setStyle(containerRef.current, 'left', popoverLeft + 'px'); 23247 } 23248 23249 setClass(containerRef.current, 'is-without-arrow', noArrow || xAxis === 'center' && yAxis === 'middle'); 23250 setClass(containerRef.current, 'is-alternate', isAlternate); 23251 setAttribute(containerRef.current, 'data-x-axis', xAxis); 23252 setAttribute(containerRef.current, 'data-y-axis', yAxis); 23253 setStyle(contentRef.current, 'maxHeight', typeof contentHeight === 'number' ? contentHeight + 'px' : ''); 23254 setStyle(contentRef.current, 'maxWidth', typeof contentWidth === 'number' ? contentWidth + 'px' : ''); // Compute the animation position. 23255 23256 const yAxisMapping = { 23257 top: 'bottom', 23258 bottom: 'top' 23259 }; 23260 const xAxisMapping = { 23261 left: 'right', 23262 right: 'left' 23263 }; 23264 const animateYAxis = yAxisMapping[yAxis] || 'middle'; 23265 const animateXAxis = xAxisMapping[xAxis] || 'center'; 23266 setAnimateOrigin(animateXAxis + ' ' + animateYAxis); 23267 }; 23268 23269 refresh(); 23270 const { 23271 ownerDocument 23272 } = containerRef.current; 23273 const { 23274 defaultView 23275 } = ownerDocument; 23276 /* 23277 * There are sometimes we need to reposition or resize the popover that 23278 * are not handled by the resize/scroll window events (i.e. CSS changes 23279 * in the layout that changes the position of the anchor). 23280 * 23281 * For these situations, we refresh the popover every 0.5s 23282 */ 23283 23284 const intervalHandle = defaultView.setInterval(refresh, 500); 23285 let rafId; 23286 23287 const refreshOnAnimationFrame = () => { 23288 defaultView.cancelAnimationFrame(rafId); 23289 rafId = defaultView.requestAnimationFrame(refresh); 23290 }; // Sometimes a click trigger a layout change that affects the popover 23291 // position. This is an opportunity to immediately refresh rather than 23292 // at the interval. 23293 23294 23295 defaultView.addEventListener('click', refreshOnAnimationFrame); 23296 defaultView.addEventListener('resize', refresh); 23297 defaultView.addEventListener('scroll', refresh, true); 23298 const anchorDocument = getAnchorDocument(anchorRef); // If the anchor is within an iframe, the popover position also needs 23299 // to refrest when the iframe content is scrolled or resized. 23300 23301 if (anchorDocument && anchorDocument !== ownerDocument) { 23302 anchorDocument.defaultView.addEventListener('resize', refresh); 23303 anchorDocument.defaultView.addEventListener('scroll', refresh, true); 23304 } 23305 23306 let observer; 23307 23308 if (__unstableObserveElement) { 23309 observer = new defaultView.MutationObserver(refresh); 23310 observer.observe(__unstableObserveElement, { 23311 attributes: true 23312 }); 23313 } 23314 23315 return () => { 23316 defaultView.clearInterval(intervalHandle); 23317 defaultView.removeEventListener('resize', refresh); 23318 defaultView.removeEventListener('scroll', refresh, true); 23319 defaultView.removeEventListener('click', refreshOnAnimationFrame); 23320 defaultView.cancelAnimationFrame(rafId); 23321 23322 if (anchorDocument && anchorDocument !== ownerDocument) { 23323 var _anchorDocument$defau, _anchorDocument$defau2; 23324 23325 (_anchorDocument$defau = anchorDocument.defaultView) === null || _anchorDocument$defau === void 0 ? void 0 : _anchorDocument$defau.removeEventListener('resize', refresh); 23326 (_anchorDocument$defau2 = anchorDocument.defaultView) === null || _anchorDocument$defau2 === void 0 ? void 0 : _anchorDocument$defau2.removeEventListener('scroll', refresh, true); 23327 } 23328 23329 if (observer) { 23330 observer.disconnect(); 23331 } 23332 }; 23333 }, [isExpanded, anchorRect, getAnchorRect, anchorRef, shouldAnchorIncludePadding, position, contentSize, __unstableStickyBoundaryElement, __unstableObserveElement, __unstableBoundaryParent]); 23334 23335 const onDialogClose = (type, event) => { 23336 // Ideally the popover should have just a single onClose prop and 23337 // not three props that potentially do the same thing. 23338 if (type === 'focus-outside' && onFocusOutside) { 23339 onFocusOutside(event); 23340 } else if (onClose) { 23341 onClose(); 23342 } 23343 }; 23344 23345 const [dialogRef, dialogProps] = (0,external_wp_compose_namespaceObject.__experimentalUseDialog)({ 23346 focusOnMount, 23347 __unstableOnClose: onDialogClose, 23348 onClose: onDialogClose 23349 }); 23350 const mergedRefs = (0,external_wp_compose_namespaceObject.useMergeRefs)([containerRef, dialogRef, ref]); 23351 /** @type {false | string} */ 23352 23353 const animateClassName = Boolean(animate && animateOrigin) && getAnimateClassName({ 23354 type: 'appear', 23355 origin: animateOrigin 23356 }); // Disable reason: We care to capture the _bubbled_ events from inputs 23357 // within popover as inferring close intent. 23358 23359 let content = // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions 23360 // eslint-disable-next-line jsx-a11y/no-static-element-interactions 23361 (0,external_wp_element_namespaceObject.createElement)("div", extends_extends({ 23362 className: classnames_default()('components-popover', className, animateClassName, { 23363 'is-expanded': isExpanded, 23364 'is-without-arrow': noArrow, 23365 'is-alternate': isAlternate 23366 }) 23367 }, contentProps, { 23368 ref: mergedRefs 23369 }, dialogProps, { 23370 tabIndex: "-1" 23371 }), isExpanded && (0,external_wp_element_namespaceObject.createElement)(ScrollLock, null), isExpanded && (0,external_wp_element_namespaceObject.createElement)("div", { 23372 className: "components-popover__header" 23373 }, (0,external_wp_element_namespaceObject.createElement)("span", { 23374 className: "components-popover__header-title" 23375 }, headerTitle), (0,external_wp_element_namespaceObject.createElement)(build_module_button, { 23376 className: "components-popover__close", 23377 icon: library_close, 23378 onClick: onClose 23379 })), (0,external_wp_element_namespaceObject.createElement)("div", { 23380 ref: contentRef, 23381 className: "components-popover__content" 23382 }, (0,external_wp_element_namespaceObject.createElement)("div", { 23383 style: { 23384 position: 'relative' 23385 } 23386 }, containerResizeListener, children))); 23387 23388 if (slot.ref) { 23389 content = (0,external_wp_element_namespaceObject.createElement)(slot_fill_Fill, { 23390 name: slotName 23391 }, content); 23392 } 23393 23394 if (anchorRef || anchorRect) { 23395 return content; 23396 } 23397 23398 return (0,external_wp_element_namespaceObject.createElement)("span", { 23399 ref: anchorRefFallback 23400 }, content); 23401 }; 23402 23403 const PopoverContainer = (0,external_wp_element_namespaceObject.forwardRef)(Popover); 23404 23405 function PopoverSlot(_ref2, ref) { 23406 let { 23407 name = SLOT_NAME 23408 } = _ref2; 23409 return (0,external_wp_element_namespaceObject.createElement)(slot_fill_Slot, { 23410 bubblesVirtually: true, 23411 name: name, 23412 className: "popover-slot", 23413 ref: ref 23414 }); 23415 } 23416 23417 PopoverContainer.Slot = (0,external_wp_element_namespaceObject.forwardRef)(PopoverSlot); 23418 PopoverContainer.__unstableSlotNameProvider = slotNameContext.Provider; 23419 /* harmony default export */ var popover = (PopoverContainer); 23420 23421 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/shortcut/index.js 23422 23423 23424 /** 23425 * External dependencies 23426 */ 23427 23428 /** @typedef {string | { display: string, ariaLabel: string }} Shortcut */ 23429 23430 /** 23431 * @typedef Props 23432 * @property {Shortcut} shortcut Shortcut configuration 23433 * @property {string} [className] Classname 23434 */ 23435 23436 /** 23437 * @param {Props} props Props 23438 * @return {JSX.Element | null} Element 23439 */ 23440 23441 function Shortcut(_ref) { 23442 let { 23443 shortcut, 23444 className 23445 } = _ref; 23446 23447 if (!shortcut) { 23448 return null; 23449 } 23450 23451 let displayText; 23452 let ariaLabel; 23453 23454 if ((0,external_lodash_namespaceObject.isString)(shortcut)) { 23455 displayText = shortcut; 23456 } 23457 23458 if ((0,external_lodash_namespaceObject.isObject)(shortcut)) { 23459 displayText = shortcut.display; 23460 ariaLabel = shortcut.ariaLabel; 23461 } 23462 23463 return (0,external_wp_element_namespaceObject.createElement)("span", { 23464 className: className, 23465 "aria-label": ariaLabel 23466 }, displayText); 23467 } 23468 23469 /* harmony default export */ var build_module_shortcut = (Shortcut); 23470 23471 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/tooltip/index.js 23472 23473 // @ts-nocheck 23474 23475 /** 23476 * External dependencies 23477 */ 23478 23479 /** 23480 * WordPress dependencies 23481 */ 23482 23483 23484 23485 /** 23486 * Internal dependencies 23487 */ 23488 23489 23490 23491 /** 23492 * Time over children to wait before showing tooltip 23493 * 23494 * @type {number} 23495 */ 23496 23497 const TOOLTIP_DELAY = 700; 23498 const eventCatcher = (0,external_wp_element_namespaceObject.createElement)("div", { 23499 className: "event-catcher" 23500 }); 23501 23502 const getDisabledElement = _ref => { 23503 let { 23504 eventHandlers, 23505 child, 23506 childrenWithPopover 23507 } = _ref; 23508 return (0,external_wp_element_namespaceObject.cloneElement)((0,external_wp_element_namespaceObject.createElement)("span", { 23509 className: "disabled-element-wrapper" 23510 }, (0,external_wp_element_namespaceObject.cloneElement)(eventCatcher, eventHandlers), (0,external_wp_element_namespaceObject.cloneElement)(child, { 23511 children: childrenWithPopover 23512 })), eventHandlers); 23513 }; 23514 23515 const getRegularElement = _ref2 => { 23516 let { 23517 child, 23518 eventHandlers, 23519 childrenWithPopover 23520 } = _ref2; 23521 return (0,external_wp_element_namespaceObject.cloneElement)(child, { ...eventHandlers, 23522 children: childrenWithPopover 23523 }); 23524 }; 23525 23526 const addPopoverToGrandchildren = _ref3 => { 23527 let { 23528 grandchildren, 23529 isOver, 23530 position, 23531 text, 23532 shortcut 23533 } = _ref3; 23534 return (0,external_wp_element_namespaceObject.concatChildren)(grandchildren, isOver && (0,external_wp_element_namespaceObject.createElement)(popover, { 23535 focusOnMount: false, 23536 position: position, 23537 className: "components-tooltip", 23538 "aria-hidden": "true", 23539 animate: false, 23540 noArrow: true 23541 }, text, (0,external_wp_element_namespaceObject.createElement)(build_module_shortcut, { 23542 className: "components-tooltip__shortcut", 23543 shortcut: shortcut 23544 }))); 23545 }; 23546 23547 const emitToChild = (children, eventName, event) => { 23548 if (external_wp_element_namespaceObject.Children.count(children) !== 1) { 23549 return; 23550 } 23551 23552 const child = external_wp_element_namespaceObject.Children.only(children); // If the underlying element is disabled, do not emit the event. 23553 23554 if (child.props.disabled) { 23555 return; 23556 } 23557 23558 if (typeof child.props[eventName] === 'function') { 23559 child.props[eventName](event); 23560 } 23561 }; 23562 23563 function Tooltip(props) { 23564 const { 23565 children, 23566 position, 23567 text, 23568 shortcut, 23569 delay = TOOLTIP_DELAY 23570 } = props; 23571 /** 23572 * Whether a mouse is currently pressed, used in determining whether 23573 * to handle a focus event as displaying the tooltip immediately. 23574 * 23575 * @type {boolean} 23576 */ 23577 23578 const [isMouseDown, setIsMouseDown] = (0,external_wp_element_namespaceObject.useState)(false); 23579 const [isOver, setIsOver] = (0,external_wp_element_namespaceObject.useState)(false); 23580 const delayedSetIsOver = (0,external_wp_compose_namespaceObject.useDebounce)(setIsOver, delay); 23581 23582 const createMouseDown = event => { 23583 // Preserve original child callback behavior. 23584 emitToChild(children, 'onMouseDown', event); // On mouse down, the next `mouseup` should revert the value of the 23585 // instance property and remove its own event handler. The bind is 23586 // made on the document since the `mouseup` might not occur within 23587 // the bounds of the element. 23588 23589 document.addEventListener('mouseup', cancelIsMouseDown); 23590 setIsMouseDown(true); 23591 }; 23592 23593 const createMouseUp = event => { 23594 emitToChild(children, 'onMouseUp', event); 23595 document.removeEventListener('mouseup', cancelIsMouseDown); 23596 setIsMouseDown(false); 23597 }; 23598 23599 const createMouseEvent = type => { 23600 if (type === 'mouseUp') return createMouseUp; 23601 if (type === 'mouseDown') return createMouseDown; 23602 }; 23603 /** 23604 * Prebound `isInMouseDown` handler, created as a constant reference to 23605 * assure ability to remove in component unmount. 23606 * 23607 * @type {Function} 23608 */ 23609 23610 23611 const cancelIsMouseDown = createMouseEvent('mouseUp'); 23612 23613 const createToggleIsOver = (eventName, isDelayed) => { 23614 return event => { 23615 // Preserve original child callback behavior. 23616 emitToChild(children, eventName, event); // Mouse events behave unreliably in React for disabled elements, 23617 // firing on mouseenter but not mouseleave. Further, the default 23618 // behavior for disabled elements in some browsers is to ignore 23619 // mouse events. Don't bother trying to to handle them. 23620 // 23621 // See: https://github.com/facebook/react/issues/4251 23622 23623 if (event.currentTarget.disabled) { 23624 return; 23625 } // A focus event will occur as a result of a mouse click, but it 23626 // should be disambiguated between interacting with the button and 23627 // using an explicit focus shift as a cue to display the tooltip. 23628 23629 23630 if ('focus' === event.type && isMouseDown) { 23631 return; 23632 } // Needed in case unsetting is over while delayed set pending, i.e. 23633 // quickly blur/mouseleave before delayedSetIsOver is called. 23634 23635 23636 delayedSetIsOver.cancel(); 23637 23638 const _isOver = (0,external_lodash_namespaceObject.includes)(['focus', 'mouseenter'], event.type); 23639 23640 if (_isOver === isOver) { 23641 return; 23642 } 23643 23644 if (isDelayed) { 23645 delayedSetIsOver(_isOver); 23646 } else { 23647 setIsOver(_isOver); 23648 } 23649 }; 23650 }; 23651 23652 const clearOnUnmount = () => { 23653 delayedSetIsOver.cancel(); 23654 document.removeEventListener('mouseup', cancelIsMouseDown); 23655 }; 23656 23657 (0,external_wp_element_namespaceObject.useEffect)(() => clearOnUnmount, []); 23658 23659 if (external_wp_element_namespaceObject.Children.count(children) !== 1) { 23660 if (false) {} 23661 23662 return children; 23663 } 23664 23665 const eventHandlers = { 23666 onMouseEnter: createToggleIsOver('onMouseEnter', true), 23667 onMouseLeave: createToggleIsOver('onMouseLeave'), 23668 onClick: createToggleIsOver('onClick'), 23669 onFocus: createToggleIsOver('onFocus'), 23670 onBlur: createToggleIsOver('onBlur'), 23671 onMouseDown: createMouseEvent('mouseDown') 23672 }; 23673 const child = external_wp_element_namespaceObject.Children.only(children); 23674 const { 23675 children: grandchildren, 23676 disabled 23677 } = child.props; 23678 const getElementWithPopover = disabled ? getDisabledElement : getRegularElement; 23679 const popoverData = { 23680 isOver, 23681 position, 23682 text, 23683 shortcut 23684 }; 23685 const childrenWithPopover = addPopoverToGrandchildren({ 23686 grandchildren, 23687 ...popoverData 23688 }); 23689 return getElementWithPopover({ 23690 child, 23691 eventHandlers, 23692 childrenWithPopover 23693 }); 23694 } 23695 23696 /* harmony default export */ var tooltip = (Tooltip); 23697 23698 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/alignment-matrix-control/utils.js 23699 /** 23700 * External dependencies 23701 */ 23702 23703 /** 23704 * WordPress dependencies 23705 */ 23706 23707 23708 const GRID = [['top left', 'top center', 'top right'], ['center left', 'center center', 'center right'], ['bottom left', 'bottom center', 'bottom right']]; // Stored as map as i18n __() only accepts strings (not variables) 23709 23710 const ALIGNMENT_LABEL = { 23711 'top left': (0,external_wp_i18n_namespaceObject.__)('Top Left'), 23712 'top center': (0,external_wp_i18n_namespaceObject.__)('Top Center'), 23713 'top right': (0,external_wp_i18n_namespaceObject.__)('Top Right'), 23714 'center left': (0,external_wp_i18n_namespaceObject.__)('Center Left'), 23715 'center center': (0,external_wp_i18n_namespaceObject.__)('Center Center'), 23716 'center right': (0,external_wp_i18n_namespaceObject.__)('Center Right'), 23717 'bottom left': (0,external_wp_i18n_namespaceObject.__)('Bottom Left'), 23718 'bottom center': (0,external_wp_i18n_namespaceObject.__)('Bottom Center'), 23719 'bottom right': (0,external_wp_i18n_namespaceObject.__)('Bottom Right') 23720 }; // Transforms GRID into a flat Array of values. 23721 23722 const ALIGNMENTS = (0,external_lodash_namespaceObject.flattenDeep)(GRID); 23723 /** 23724 * Parses and transforms an incoming value to better match the alignment values 23725 * 23726 * @param {string} value An alignment value to parse. 23727 * 23728 * @return {string} The parsed value. 23729 */ 23730 23731 function transformValue(value) { 23732 const nextValue = value === 'center' ? 'center center' : value; 23733 return nextValue.replace('-', ' '); 23734 } 23735 /** 23736 * Creates an item ID based on a prefix ID and an alignment value. 23737 * 23738 * @param {string} prefixId An ID to prefix. 23739 * @param {string} value An alignment value. 23740 * 23741 * @return {string} The item id. 23742 */ 23743 23744 function getItemId(prefixId, value) { 23745 const valueId = transformValue(value).replace(' ', '-'); 23746 return `$prefixId}-$valueId}`; 23747 } 23748 /** 23749 * Retrieves the alignment index from a value. 23750 * 23751 * @param {string} alignment Value to check. 23752 * 23753 * @return {number} The index of a matching alignment. 23754 */ 23755 23756 function getAlignmentIndex() { 23757 let alignment = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'center'; 23758 const item = transformValue(alignment).replace('-', ' '); 23759 const index = ALIGNMENTS.indexOf(item); 23760 return index > -1 ? index : undefined; 23761 } 23762 23763 // EXTERNAL MODULE: ./node_modules/hoist-non-react-statics/dist/hoist-non-react-statics.cjs.js 23764 var hoist_non_react_statics_cjs = __webpack_require__(1281); 23765 ;// CONCATENATED MODULE: ./node_modules/@emotion/react/dist/emotion-react.browser.esm.js 23766 23767 23768 23769 23770 23771 23772 23773 23774 23775 23776 23777 23778 var pkg = { 23779 name: "@emotion/react", 23780 version: "11.9.0", 23781 main: "dist/emotion-react.cjs.js", 23782 module: "dist/emotion-react.esm.js", 23783 browser: { 23784 "./dist/emotion-react.cjs.js": "./dist/emotion-react.browser.cjs.js", 23785 "./dist/emotion-react.esm.js": "./dist/emotion-react.browser.esm.js" 23786 }, 23787 types: "types/index.d.ts", 23788 files: [ 23789 "src", 23790 "dist", 23791 "jsx-runtime", 23792 "jsx-dev-runtime", 23793 "_isolated-hnrs", 23794 "types/*.d.ts", 23795 "macro.js", 23796 "macro.d.ts", 23797 "macro.js.flow" 23798 ], 23799 sideEffects: false, 23800 author: "Emotion Contributors", 23801 license: "MIT", 23802 scripts: { 23803 "test:typescript": "dtslint types" 23804 }, 23805 dependencies: { 23806 "@babel/runtime": "^7.13.10", 23807 "@emotion/babel-plugin": "^11.7.1", 23808 "@emotion/cache": "^11.7.1", 23809 "@emotion/serialize": "^1.0.3", 23810 "@emotion/utils": "^1.1.0", 23811 "@emotion/weak-memoize": "^0.2.5", 23812 "hoist-non-react-statics": "^3.3.1" 23813 }, 23814 peerDependencies: { 23815 "@babel/core": "^7.0.0", 23816 react: ">=16.8.0" 23817 }, 23818 peerDependenciesMeta: { 23819 "@babel/core": { 23820 optional: true 23821 }, 23822 "@types/react": { 23823 optional: true 23824 } 23825 }, 23826 devDependencies: { 23827 "@babel/core": "^7.13.10", 23828 "@emotion/css": "11.9.0", 23829 "@emotion/css-prettifier": "1.0.1", 23830 "@emotion/server": "11.4.0", 23831 "@emotion/styled": "11.8.1", 23832 "@types/react": "^16.9.11", 23833 dtslint: "^4.2.1", 23834 "html-tag-names": "^1.1.2", 23835 react: "16.14.0", 23836 "svg-tag-names": "^1.1.1", 23837 typescript: "^4.5.5" 23838 }, 23839 repository: "https://github.com/emotion-js/emotion/tree/main/packages/react", 23840 publishConfig: { 23841 access: "public" 23842 }, 23843 "umd:main": "dist/emotion-react.umd.min.js", 23844 preconstruct: { 23845 entrypoints: [ 23846 "./index.js", 23847 "./jsx-runtime.js", 23848 "./jsx-dev-runtime.js", 23849 "./_isolated-hnrs.js" 23850 ], 23851 umdName: "emotionReact" 23852 } 23853 }; 23854 23855 var jsx = function jsx(type, props) { 23856 var args = arguments; 23857 23858 if (props == null || !hasOwnProperty.call(props, 'css')) { 23859 // $FlowFixMe 23860 return createElement.apply(undefined, args); 23861 } 23862 23863 var argsLength = args.length; 23864 var createElementArgArray = new Array(argsLength); 23865 createElementArgArray[0] = Emotion; 23866 createElementArgArray[1] = createEmotionProps(type, props); 23867 23868 for (var i = 2; i < argsLength; i++) { 23869 createElementArgArray[i] = args[i]; 23870 } // $FlowFixMe 23871 23872 23873 return createElement.apply(null, createElementArgArray); 23874 }; 23875 23876 var emotion_react_browser_esm_useInsertionEffect = external_React_['useInsertion' + 'Effect'] ? external_React_['useInsertion' + 'Effect'] : external_React_.useLayoutEffect; 23877 var warnedAboutCssPropForGlobal = false; // maintain place over rerenders. 23878 // initial render from browser, insertBefore context.sheet.tags[0] or if a style hasn't been inserted there yet, appendChild 23879 // initial client-side render from SSR, use place of hydrating tag 23880 23881 var Global = /* #__PURE__ */(/* unused pure expression or super */ null && (withEmotionCache(function (props, cache) { 23882 if (false) {} 23883 23884 var styles = props.styles; 23885 var serialized = serializeStyles([styles], undefined, useContext(ThemeContext)); 23886 // but it is based on a constant that will never change at runtime 23887 // it's effectively like having two implementations and switching them out 23888 // so it's not actually breaking anything 23889 23890 23891 var sheetRef = useRef(); 23892 emotion_react_browser_esm_useInsertionEffect(function () { 23893 var key = cache.key + "-global"; // use case of https://github.com/emotion-js/emotion/issues/2675 23894 23895 var sheet = new cache.sheet.constructor({ 23896 key: key, 23897 nonce: cache.sheet.nonce, 23898 container: cache.sheet.container, 23899 speedy: cache.sheet.isSpeedy 23900 }); 23901 var rehydrating = false; // $FlowFixMe 23902 23903 var node = document.querySelector("style[data-emotion=\"" + key + " " + serialized.name + "\"]"); 23904 23905 if (cache.sheet.tags.length) { 23906 sheet.before = cache.sheet.tags[0]; 23907 } 23908 23909 if (node !== null) { 23910 rehydrating = true; // clear the hash so this node won't be recognizable as rehydratable by other <Global/>s 23911 23912 node.setAttribute('data-emotion', key); 23913 sheet.hydrate([node]); 23914 } 23915 23916 sheetRef.current = [sheet, rehydrating]; 23917 return function () { 23918 sheet.flush(); 23919 }; 23920 }, [cache]); 23921 emotion_react_browser_esm_useInsertionEffect(function () { 23922 var sheetRefCurrent = sheetRef.current; 23923 var sheet = sheetRefCurrent[0], 23924 rehydrating = sheetRefCurrent[1]; 23925 23926 if (rehydrating) { 23927 sheetRefCurrent[1] = false; 23928 return; 23929 } 23930 23931 if (serialized.next !== undefined) { 23932 // insert keyframes 23933 insertStyles(cache, serialized.next, true); 23934 } 23935 23936 if (sheet.tags.length) { 23937 // if this doesn't exist then it will be null so the style element will be appended 23938 var element = sheet.tags[sheet.tags.length - 1].nextElementSibling; 23939 sheet.before = element; 23940 sheet.flush(); 23941 } 23942 23943 cache.insert("", serialized, sheet, false); 23944 }, [cache, serialized.name]); 23945 return null; 23946 }))); 23947 23948 if (false) {} 23949 23950 function emotion_react_browser_esm_css() { 23951 for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) { 23952 args[_key] = arguments[_key]; 23953 } 23954 23955 return emotion_serialize_browser_esm_serializeStyles(args); 23956 } 23957 23958 var emotion_react_browser_esm_keyframes = function keyframes() { 23959 var insertable = emotion_react_browser_esm_css.apply(void 0, arguments); 23960 var name = "animation-" + insertable.name; // $FlowFixMe 23961 23962 return { 23963 name: name, 23964 styles: "@keyframes " + name + "{" + insertable.styles + "}", 23965 anim: 1, 23966 toString: function toString() { 23967 return "_EMO_" + this.name + "_" + this.styles + "_EMO_"; 23968 } 23969 }; 23970 }; 23971 23972 var emotion_react_browser_esm_classnames = function classnames(args) { 23973 var len = args.length; 23974 var i = 0; 23975 var cls = ''; 23976 23977 for (; i < len; i++) { 23978 var arg = args[i]; 23979 if (arg == null) continue; 23980 var toAdd = void 0; 23981 23982 switch (typeof arg) { 23983 case 'boolean': 23984 break; 23985 23986 case 'object': 23987 { 23988 if (Array.isArray(arg)) { 23989 toAdd = classnames(arg); 23990 } else { 23991 if (false) {} 23992 23993 toAdd = ''; 23994 23995 for (var k in arg) { 23996 if (arg[k] && k) { 23997 toAdd && (toAdd += ' '); 23998 toAdd += k; 23999 } 24000 } 24001 } 24002 24003 break; 24004 } 24005 24006 default: 24007 { 24008 toAdd = arg; 24009 } 24010 } 24011 24012 if (toAdd) { 24013 cls && (cls += ' '); 24014 cls += toAdd; 24015 } 24016 } 24017 24018 return cls; 24019 }; 24020 24021 function emotion_react_browser_esm_merge(registered, css, className) { 24022 var registeredStyles = []; 24023 var rawClassName = getRegisteredStyles(registered, registeredStyles, className); 24024 24025 if (registeredStyles.length < 2) { 24026 return className; 24027 } 24028 24029 return rawClassName + css(registeredStyles); 24030 } 24031 24032 var emotion_react_browser_esm_Insertion = function Insertion(_ref) { 24033 var cache = _ref.cache, 24034 serializedArr = _ref.serializedArr; 24035 var rules = useInsertionEffectMaybe(function () { 24036 24037 for (var i = 0; i < serializedArr.length; i++) { 24038 var res = insertStyles(cache, serializedArr[i], false); 24039 } 24040 }); 24041 24042 return null; 24043 }; 24044 24045 var ClassNames = /* #__PURE__ */(/* unused pure expression or super */ null && (withEmotionCache(function (props, cache) { 24046 var hasRendered = false; 24047 var serializedArr = []; 24048 24049 var css = function css() { 24050 if (hasRendered && "production" !== 'production') {} 24051 24052 for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) { 24053 args[_key] = arguments[_key]; 24054 } 24055 24056 var serialized = serializeStyles(args, cache.registered); 24057 serializedArr.push(serialized); // registration has to happen here as the result of this might get consumed by `cx` 24058 24059 registerStyles(cache, serialized, false); 24060 return cache.key + "-" + serialized.name; 24061 }; 24062 24063 var cx = function cx() { 24064 if (hasRendered && "production" !== 'production') {} 24065 24066 for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) { 24067 args[_key2] = arguments[_key2]; 24068 } 24069 24070 return emotion_react_browser_esm_merge(cache.registered, css, emotion_react_browser_esm_classnames(args)); 24071 }; 24072 24073 var content = { 24074 css: css, 24075 cx: cx, 24076 theme: useContext(ThemeContext) 24077 }; 24078 var ele = props.children(content); 24079 hasRendered = true; 24080 return /*#__PURE__*/createElement(Fragment, null, /*#__PURE__*/createElement(emotion_react_browser_esm_Insertion, { 24081 cache: cache, 24082 serializedArr: serializedArr 24083 }), ele); 24084 }))); 24085 24086 if (false) {} 24087 24088 if (false) { var globalKey, globalContext, isJest, emotion_react_browser_esm_isBrowser; } 24089 24090 24091 24092 ;// CONCATENATED MODULE: ./node_modules/colord/index.mjs 24093 var r={grad:.9,turn:360,rad:360/(2*Math.PI)},t=function(r){return"string"==typeof r?r.length>0:"number"==typeof r},colord_n=function(r,t,n){return void 0===t&&(t=0),void 0===n&&(n=Math.pow(10,t)),Math.round(n*r)/n+0},colord_e=function(r,t,n){return void 0===t&&(t=0),void 0===n&&(n=1),r>n?n:r>t?r:t},u=function(r){return(r=isFinite(r)?r%360:0)>0?r:r+360},colord_a=function(r){return{r:colord_e(r.r,0,255),g:colord_e(r.g,0,255),b:colord_e(r.b,0,255),a:colord_e(r.a)}},colord_o=function(r){return{r:colord_n(r.r),g:colord_n(r.g),b:colord_n(r.b),a:colord_n(r.a,3)}},colord_i=/^#([0-9a-f]{3,8})$/i,s=function(r){var t=r.toString(16);return t.length<2?"0"+t:t},h=function(r){var t=r.r,n=r.g,e=r.b,u=r.a,a=Math.max(t,n,e),o=a-Math.min(t,n,e),i=o?a===t?(n-e)/o:a===n?2+(e-t)/o:4+(t-n)/o:0;return{h:60*(i<0?i+6:i),s:a?o/a*100:0,v:a/255*100,a:u}},b=function(r){var t=r.h,n=r.s,e=r.v,u=r.a;t=t/360*6,n/=100,e/=100;var a=Math.floor(t),o=e*(1-n),i=e*(1-(t-a)*n),s=e*(1-(1-t+a)*n),h=a%6;return{r:255*[e,i,o,o,s,e][h],g:255*[s,e,e,i,o,o][h],b:255*[o,o,s,e,e,i][h],a:u}},g=function(r){return{h:u(r.h),s:colord_e(r.s,0,100),l:colord_e(r.l,0,100),a:colord_e(r.a)}},d=function(r){return{h:colord_n(r.h),s:colord_n(r.s),l:colord_n(r.l),a:colord_n(r.a,3)}},f=function(r){return b((n=(t=r).s,{h:t.h,s:(n*=((e=t.l)<50?e:100-e)/100)>0?2*n/(e+n)*100:0,v:e+n,a:t.a}));var t,n,e},c=function(r){return{h:(t=h(r)).h,s:(u=(200-(n=t.s))*(e=t.v)/100)>0&&u<200?n*e/100/(u<=100?u:200-u)*100:0,l:u/2,a:t.a};var t,n,e,u},l=/^hsla?\(\s*([+-]?\d*\.?\d+)(deg|rad|grad|turn)?\s*,\s*([+-]?\d*\.?\d+)%\s*,\s*([+-]?\d*\.?\d+)%\s*(?:,\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i,p=/^hsla?\(\s*([+-]?\d*\.?\d+)(deg|rad|grad|turn)?\s+([+-]?\d*\.?\d+)%\s+([+-]?\d*\.?\d+)%\s*(?:\/\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i,v=/^rgba?\(\s*([+-]?\d*\.?\d+)(%)?\s*,\s*([+-]?\d*\.?\d+)(%)?\s*,\s*([+-]?\d*\.?\d+)(%)?\s*(?:,\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i,m=/^rgba?\(\s*([+-]?\d*\.?\d+)(%)?\s+([+-]?\d*\.?\d+)(%)?\s+([+-]?\d*\.?\d+)(%)?\s*(?:\/\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i,y={string:[[function(r){var t=colord_i.exec(r);return t?(r=t[1]).length<=4?{r:parseInt(r[0]+r[0],16),g:parseInt(r[1]+r[1],16),b:parseInt(r[2]+r[2],16),a:4===r.length?colord_n(parseInt(r[3]+r[3],16)/255,2):1}:6===r.length||8===r.length?{r:parseInt(r.substr(0,2),16),g:parseInt(r.substr(2,2),16),b:parseInt(r.substr(4,2),16),a:8===r.length?colord_n(parseInt(r.substr(6,2),16)/255,2):1}:null:null},"hex"],[function(r){var t=v.exec(r)||m.exec(r);return t?t[2]!==t[4]||t[4]!==t[6]?null:colord_a({r:Number(t[1])/(t[2]?100/255:1),g:Number(t[3])/(t[4]?100/255:1),b:Number(t[5])/(t[6]?100/255:1),a:void 0===t[7]?1:Number(t[7])/(t[8]?100:1)}):null},"rgb"],[function(t){var n=l.exec(t)||p.exec(t);if(!n)return null;var e,u,a=g({h:(e=n[1],u=n[2],void 0===u&&(u="deg"),Number(e)*(r[u]||1)),s:Number(n[3]),l:Number(n[4]),a:void 0===n[5]?1:Number(n[5])/(n[6]?100:1)});return f(a)},"hsl"]],object:[[function(r){var n=r.r,e=r.g,u=r.b,o=r.a,i=void 0===o?1:o;return t(n)&&t(e)&&t(u)?colord_a({r:Number(n),g:Number(e),b:Number(u),a:Number(i)}):null},"rgb"],[function(r){var n=r.h,e=r.s,u=r.l,a=r.a,o=void 0===a?1:a;if(!t(n)||!t(e)||!t(u))return null;var i=g({h:Number(n),s:Number(e),l:Number(u),a:Number(o)});return f(i)},"hsl"],[function(r){var n=r.h,a=r.s,o=r.v,i=r.a,s=void 0===i?1:i;if(!t(n)||!t(a)||!t(o))return null;var h=function(r){return{h:u(r.h),s:colord_e(r.s,0,100),v:colord_e(r.v,0,100),a:colord_e(r.a)}}({h:Number(n),s:Number(a),v:Number(o),a:Number(s)});return b(h)},"hsv"]]},N=function(r,t){for(var n=0;n<t.length;n++){var e=t[n][0](r);if(e)return[e,t[n][1]]}return[null,void 0]},x=function(r){return"string"==typeof r?N(r.trim(),y.string):"object"==typeof r&&null!==r?N(r,y.object):[null,void 0]},I=function(r){return x(r)[1]},M=function(r,t){var n=c(r);return{h:n.h,s:colord_e(n.s+100*t,0,100),l:n.l,a:n.a}},H=function(r){return(299*r.r+587*r.g+114*r.b)/1e3/255},$=function(r,t){var n=c(r);return{h:n.h,s:n.s,l:colord_e(n.l+100*t,0,100),a:n.a}},j=function(){function r(r){this.parsed=x(r)[0],this.rgba=this.parsed||{r:0,g:0,b:0,a:1}}return r.prototype.isValid=function(){return null!==this.parsed},r.prototype.brightness=function(){return colord_n(H(this.rgba),2)},r.prototype.isDark=function(){return H(this.rgba)<.5},r.prototype.isLight=function(){return H(this.rgba)>=.5},r.prototype.toHex=function(){return r=colord_o(this.rgba),t=r.r,e=r.g,u=r.b,i=(a=r.a)<1?s(colord_n(255*a)):"","#"+s(t)+s(e)+s(u)+i;var r,t,e,u,a,i},r.prototype.toRgb=function(){return colord_o(this.rgba)},r.prototype.toRgbString=function(){return r=colord_o(this.rgba),t=r.r,n=r.g,e=r.b,(u=r.a)<1?"rgba("+t+", "+n+", "+e+", "+u+")":"rgb("+t+", "+n+", "+e+")";var r,t,n,e,u},r.prototype.toHsl=function(){return d(c(this.rgba))},r.prototype.toHslString=function(){return r=d(c(this.rgba)),t=r.h,n=r.s,e=r.l,(u=r.a)<1?"hsla("+t+", "+n+"%, "+e+"%, "+u+")":"hsl("+t+", "+n+"%, "+e+"%)";var r,t,n,e,u},r.prototype.toHsv=function(){return r=h(this.rgba),{h:colord_n(r.h),s:colord_n(r.s),v:colord_n(r.v),a:colord_n(r.a,3)};var r},r.prototype.invert=function(){return w({r:255-(r=this.rgba).r,g:255-r.g,b:255-r.b,a:r.a});var r},r.prototype.saturate=function(r){return void 0===r&&(r=.1),w(M(this.rgba,r))},r.prototype.desaturate=function(r){return void 0===r&&(r=.1),w(M(this.rgba,-r))},r.prototype.grayscale=function(){return w(M(this.rgba,-1))},r.prototype.lighten=function(r){return void 0===r&&(r=.1),w($(this.rgba,r))},r.prototype.darken=function(r){return void 0===r&&(r=.1),w($(this.rgba,-r))},r.prototype.rotate=function(r){return void 0===r&&(r=15),this.hue(this.hue()+r)},r.prototype.alpha=function(r){return"number"==typeof r?w({r:(t=this.rgba).r,g:t.g,b:t.b,a:r}):colord_n(this.rgba.a,3);var t},r.prototype.hue=function(r){var t=c(this.rgba);return"number"==typeof r?w({h:r,s:t.s,l:t.l,a:t.a}):colord_n(t.h)},r.prototype.isEqual=function(r){return this.toHex()===w(r).toHex()},r}(),w=function(r){return r instanceof j?r:new j(r)},S=[],k=function(r){r.forEach(function(r){S.indexOf(r)<0&&(r(j,y),S.push(r))})},E=function(){return new j({r:255*Math.random(),g:255*Math.random(),b:255*Math.random()})}; 24094 24095 ;// CONCATENATED MODULE: ./node_modules/colord/plugins/names.mjs 24096 /* harmony default export */ function names(e,f){var a={white:"#ffffff",bisque:"#ffe4c4",blue:"#0000ff",cadetblue:"#5f9ea0",chartreuse:"#7fff00",chocolate:"#d2691e",coral:"#ff7f50",antiquewhite:"#faebd7",aqua:"#00ffff",azure:"#f0ffff",whitesmoke:"#f5f5f5",papayawhip:"#ffefd5",plum:"#dda0dd",blanchedalmond:"#ffebcd",black:"#000000",gold:"#ffd700",goldenrod:"#daa520",gainsboro:"#dcdcdc",cornsilk:"#fff8dc",cornflowerblue:"#6495ed",burlywood:"#deb887",aquamarine:"#7fffd4",beige:"#f5f5dc",crimson:"#dc143c",cyan:"#00ffff",darkblue:"#00008b",darkcyan:"#008b8b",darkgoldenrod:"#b8860b",darkkhaki:"#bdb76b",darkgray:"#a9a9a9",darkgreen:"#006400",darkgrey:"#a9a9a9",peachpuff:"#ffdab9",darkmagenta:"#8b008b",darkred:"#8b0000",darkorchid:"#9932cc",darkorange:"#ff8c00",darkslateblue:"#483d8b",gray:"#808080",darkslategray:"#2f4f4f",darkslategrey:"#2f4f4f",deeppink:"#ff1493",deepskyblue:"#00bfff",wheat:"#f5deb3",firebrick:"#b22222",floralwhite:"#fffaf0",ghostwhite:"#f8f8ff",darkviolet:"#9400d3",magenta:"#ff00ff",green:"#008000",dodgerblue:"#1e90ff",grey:"#808080",honeydew:"#f0fff0",hotpink:"#ff69b4",blueviolet:"#8a2be2",forestgreen:"#228b22",lawngreen:"#7cfc00",indianred:"#cd5c5c",indigo:"#4b0082",fuchsia:"#ff00ff",brown:"#a52a2a",maroon:"#800000",mediumblue:"#0000cd",lightcoral:"#f08080",darkturquoise:"#00ced1",lightcyan:"#e0ffff",ivory:"#fffff0",lightyellow:"#ffffe0",lightsalmon:"#ffa07a",lightseagreen:"#20b2aa",linen:"#faf0e6",mediumaquamarine:"#66cdaa",lemonchiffon:"#fffacd",lime:"#00ff00",khaki:"#f0e68c",mediumseagreen:"#3cb371",limegreen:"#32cd32",mediumspringgreen:"#00fa9a",lightskyblue:"#87cefa",lightblue:"#add8e6",midnightblue:"#191970",lightpink:"#ffb6c1",mistyrose:"#ffe4e1",moccasin:"#ffe4b5",mintcream:"#f5fffa",lightslategray:"#778899",lightslategrey:"#778899",navajowhite:"#ffdead",navy:"#000080",mediumvioletred:"#c71585",powderblue:"#b0e0e6",palegoldenrod:"#eee8aa",oldlace:"#fdf5e6",paleturquoise:"#afeeee",mediumturquoise:"#48d1cc",mediumorchid:"#ba55d3",rebeccapurple:"#663399",lightsteelblue:"#b0c4de",mediumslateblue:"#7b68ee",thistle:"#d8bfd8",tan:"#d2b48c",orchid:"#da70d6",mediumpurple:"#9370db",purple:"#800080",pink:"#ffc0cb",skyblue:"#87ceeb",springgreen:"#00ff7f",palegreen:"#98fb98",red:"#ff0000",yellow:"#ffff00",slateblue:"#6a5acd",lavenderblush:"#fff0f5",peru:"#cd853f",palevioletred:"#db7093",violet:"#ee82ee",teal:"#008080",slategray:"#708090",slategrey:"#708090",aliceblue:"#f0f8ff",darkseagreen:"#8fbc8f",darkolivegreen:"#556b2f",greenyellow:"#adff2f",seagreen:"#2e8b57",seashell:"#fff5ee",tomato:"#ff6347",silver:"#c0c0c0",sienna:"#a0522d",lavender:"#e6e6fa",lightgreen:"#90ee90",orange:"#ffa500",orangered:"#ff4500",steelblue:"#4682b4",royalblue:"#4169e1",turquoise:"#40e0d0",yellowgreen:"#9acd32",salmon:"#fa8072",saddlebrown:"#8b4513",sandybrown:"#f4a460",rosybrown:"#bc8f8f",darksalmon:"#e9967a",lightgoldenrodyellow:"#fafad2",snow:"#fffafa",lightgrey:"#d3d3d3",lightgray:"#d3d3d3",dimgray:"#696969",dimgrey:"#696969",olivedrab:"#6b8e23",olive:"#808000"},r={};for(var d in a)r[a[d]]=d;var l={};e.prototype.toName=function(f){if(!(this.rgba.a||this.rgba.r||this.rgba.g||this.rgba.b))return"transparent";var d,i,n=r[this.toHex()];if(n)return n;if(null==f?void 0:f.closest){var o=this.toRgb(),t=1/0,b="black";if(!l.length)for(var c in a)l[c]=new e(a[c]).toRgb();for(var g in a){var u=(d=o,i=l[g],Math.pow(d.r-i.r,2)+Math.pow(d.g-i.g,2)+Math.pow(d.b-i.b,2));u<t&&(t=u,b=g)}return b}};f.string.push([function(f){var r=f.toLowerCase(),d="transparent"===r?"#0000":a[r];return d?new e(d).toRgb():null},"name"])} 24097 24098 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/utils/colors.js 24099 /** 24100 * External dependencies 24101 */ 24102 24103 24104 k([names]); 24105 /** 24106 * Generating a CSS compliant rgba() color value. 24107 * 24108 * @param {string} hexValue The hex value to convert to rgba(). 24109 * @param {number} alpha The alpha value for opacity. 24110 * @return {string} The converted rgba() color value. 24111 * 24112 * @example 24113 * rgba( '#000000', 0.5 ) 24114 * // rgba(0, 0, 0, 0.5) 24115 */ 24116 24117 function rgba() { 24118 let hexValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : ''; 24119 let alpha = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1; 24120 return w(hexValue).alpha(alpha).toRgbString(); 24121 } 24122 24123 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/utils/colors-values.js 24124 /** 24125 * External dependencies 24126 */ 24127 24128 /** 24129 * Internal dependencies 24130 */ 24131 24132 24133 const BASE = { 24134 black: '#000', 24135 white: '#fff' 24136 }; 24137 /** 24138 * TODO: Continue to update values as "G2" design evolves. 24139 * 24140 * "G2" refers to the movement to advance the interface of the block editor. 24141 * https://github.com/WordPress/gutenberg/issues/18667 24142 */ 24143 24144 const G2 = { 24145 blue: { 24146 medium: { 24147 focus: '#007cba', 24148 focusDark: '#fff' 24149 } 24150 }, 24151 gray: { 24152 900: '#1e1e1e', 24153 700: '#757575', 24154 // Meets 4.6:1 text contrast against white. 24155 600: '#949494', 24156 // Meets 3:1 UI or large text contrast against white. 24157 400: '#ccc', 24158 300: '#ddd', 24159 // Used for most borders. 24160 200: '#e0e0e0', 24161 // Used sparingly for light borders. 24162 100: '#f0f0f0' // Used for light gray backgrounds. 24163 24164 }, 24165 darkGray: { 24166 primary: '#1e1e1e', 24167 heading: '#050505' 24168 }, 24169 mediumGray: { 24170 text: '#757575' 24171 }, 24172 lightGray: { 24173 ui: '#949494', 24174 secondary: '#ccc', 24175 tertiary: '#e7e8e9' 24176 } 24177 }; 24178 const DARK_GRAY = { 24179 900: '#191e23', 24180 800: '#23282d', 24181 700: '#32373c', 24182 600: '#40464d', 24183 500: '#555d66', 24184 // Use this most of the time for dark items. 24185 400: '#606a73', 24186 300: '#6c7781', 24187 // Lightest gray that can be used for AA text contrast. 24188 200: '#7e8993', 24189 150: '#8d96a0', 24190 // Lightest gray that can be used for AA non-text contrast. 24191 100: '#8f98a1', 24192 placeholder: rgba(G2.gray[900], 0.62) 24193 }; 24194 const DARK_OPACITY = { 24195 900: rgba('#000510', 0.9), 24196 800: rgba('#00000a', 0.85), 24197 700: rgba('#06060b', 0.8), 24198 600: rgba('#000913', 0.75), 24199 500: rgba('#0a1829', 0.7), 24200 400: rgba('#0a1829', 0.65), 24201 300: rgba('#0e1c2e', 0.62), 24202 200: rgba('#162435', 0.55), 24203 100: rgba('#223443', 0.5), 24204 backgroundFill: rgba(DARK_GRAY[700], 0.7) 24205 }; 24206 const DARK_OPACITY_LIGHT = { 24207 900: rgba('#304455', 0.45), 24208 800: rgba('#425863', 0.4), 24209 700: rgba('#667886', 0.35), 24210 600: rgba('#7b86a2', 0.3), 24211 500: rgba('#9197a2', 0.25), 24212 400: rgba('#95959c', 0.2), 24213 300: rgba('#829493', 0.15), 24214 200: rgba('#8b8b96', 0.1), 24215 100: rgba('#747474', 0.05) 24216 }; 24217 const LIGHT_GRAY = { 24218 900: '#a2aab2', 24219 800: '#b5bcc2', 24220 700: '#ccd0d4', 24221 600: '#d7dade', 24222 500: '#e2e4e7', 24223 // Good for "grayed" items and borders. 24224 400: '#e8eaeb', 24225 // Good for "readonly" input fields and special text selection. 24226 300: '#edeff0', 24227 200: '#f3f4f5', 24228 100: '#f8f9f9', 24229 placeholder: rgba(BASE.white, 0.65) 24230 }; 24231 const LIGHT_OPACITY_LIGHT = { 24232 900: rgba(BASE.white, 0.5), 24233 800: rgba(BASE.white, 0.45), 24234 700: rgba(BASE.white, 0.4), 24235 600: rgba(BASE.white, 0.35), 24236 500: rgba(BASE.white, 0.3), 24237 400: rgba(BASE.white, 0.25), 24238 300: rgba(BASE.white, 0.2), 24239 200: rgba(BASE.white, 0.15), 24240 100: rgba(BASE.white, 0.1), 24241 backgroundFill: rgba(LIGHT_GRAY[300], 0.8) 24242 }; // Additional colors. 24243 // Some are from https://make.wordpress.org/design/handbook/foundations/colors/. 24244 24245 const BLUE = { 24246 wordpress: { 24247 700: '#00669b' 24248 }, 24249 dark: { 24250 900: '#0071a1' 24251 }, 24252 medium: { 24253 900: '#006589', 24254 800: '#00739c', 24255 700: '#007fac', 24256 600: '#008dbe', 24257 500: '#00a0d2', 24258 400: '#33b3db', 24259 300: '#66c6e4', 24260 200: '#bfe7f3', 24261 100: '#e5f5fa', 24262 highlight: '#b3e7fe', 24263 focus: '#007cba' 24264 } 24265 }; 24266 const ALERT = { 24267 yellow: '#f0b849', 24268 red: '#d94f4f', 24269 green: '#4ab866' 24270 }; 24271 const ADMIN = { 24272 theme: `var( --wp-admin-theme-color, $BLUE.wordpress[700]})`, 24273 themeDark10: `var( --wp-admin-theme-color-darker-10, $BLUE.medium.focus})` 24274 }; // Namespaced values for raw colors hex codes. 24275 24276 const UI = { 24277 theme: ADMIN.theme, 24278 background: BASE.white, 24279 backgroundDisabled: LIGHT_GRAY[200], 24280 border: G2.gray[700], 24281 borderHover: G2.gray[700], 24282 borderFocus: ADMIN.themeDark10, 24283 borderDisabled: G2.gray[400], 24284 borderLight: G2.gray[300], 24285 label: DARK_GRAY[500], 24286 textDisabled: DARK_GRAY[150], 24287 textDark: BASE.white, 24288 textLight: BASE.black 24289 }; // Using Object.assign instead of { ...spread } syntax helps TypeScript 24290 // to extract the correct type defs here. 24291 24292 const COLORS = Object.assign({}, BASE, { 24293 darkGray: (0,external_lodash_namespaceObject.merge)({}, DARK_GRAY, G2.darkGray), 24294 darkOpacity: DARK_OPACITY, 24295 darkOpacityLight: DARK_OPACITY_LIGHT, 24296 mediumGray: G2.mediumGray, 24297 gray: G2.gray, 24298 lightGray: (0,external_lodash_namespaceObject.merge)({}, LIGHT_GRAY, G2.lightGray), 24299 lightGrayLight: LIGHT_OPACITY_LIGHT, 24300 blue: (0,external_lodash_namespaceObject.merge)({}, BLUE, G2.blue), 24301 alert: ALERT, 24302 admin: ADMIN, 24303 ui: UI 24304 }); 24305 /* harmony default export */ var colors_values = ((/* unused pure expression or super */ null && (COLORS))); 24306 24307 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/utils/reduce-motion.js 24308 /** 24309 * Allows users to opt-out of animations via OS-level preferences. 24310 * 24311 * @param {'transition' | 'animation' | string} [prop='transition'] CSS Property name 24312 * @return {string} Generated CSS code for the reduced style 24313 */ 24314 function reduceMotion() { 24315 let prop = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'transition'; 24316 let style; 24317 24318 switch (prop) { 24319 case 'transition': 24320 style = 'transition-duration: 0ms;'; 24321 break; 24322 24323 case 'animation': 24324 style = 'animation-duration: 1ms;'; 24325 break; 24326 24327 default: 24328 style = ` 24329 animation-duration: 1ms; 24330 transition-duration: 0ms; 24331 `; 24332 } 24333 24334 return ` 24335 @media ( prefers-reduced-motion: reduce ) { 24336 $style}; 24337 } 24338 `; 24339 } 24340 24341 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/alignment-matrix-control/styles/alignment-matrix-control-styles.js 24342 24343 24344 function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } 24345 24346 /** 24347 * External dependencies 24348 */ 24349 24350 /** 24351 * Internal dependencies 24352 */ 24353 24354 24355 24356 var _ref = true ? { 24357 name: "lp9rn7", 24358 styles: "border-radius:2px;box-sizing:border-box;display:grid;grid-template-columns:repeat( 3, 1fr );outline:none" 24359 } : 0; 24360 24361 const rootBase = () => { 24362 return _ref; 24363 }; 24364 24365 const rootSize = _ref2 => { 24366 let { 24367 size = 92 24368 } = _ref2; 24369 return /*#__PURE__*/emotion_react_browser_esm_css("grid-template-rows:repeat( 3, calc( ", size, "px / 3 ) );width:", size, "px;" + ( true ? "" : 0), true ? "" : 0); 24370 }; 24371 24372 const Root = emotion_styled_base_browser_esm("div", true ? { 24373 target: "e1od1u4s3" 24374 } : 0)(rootBase, ";border:1px solid transparent;cursor:pointer;grid-template-columns:auto;", rootSize, ";" + ( true ? "" : 0)); 24375 const Row = emotion_styled_base_browser_esm("div", true ? { 24376 target: "e1od1u4s2" 24377 } : 0)( true ? { 24378 name: "1x5gbbj", 24379 styles: "box-sizing:border-box;display:grid;grid-template-columns:repeat( 3, 1fr )" 24380 } : 0); 24381 24382 const pointActive = _ref3 => { 24383 let { 24384 isActive 24385 } = _ref3; 24386 const boxShadow = isActive ? `0 0 0 2px $COLORS.black}` : null; 24387 const pointColor = isActive ? COLORS.black : COLORS.lightGray[800]; 24388 const pointColorHover = isActive ? COLORS.black : COLORS.blue.medium.focus; 24389 return /*#__PURE__*/emotion_react_browser_esm_css("box-shadow:", boxShadow, ";color:", pointColor, ";*:hover>&{color:", pointColorHover, ";}" + ( true ? "" : 0), true ? "" : 0); 24390 }; 24391 24392 const pointBase = props => { 24393 return /*#__PURE__*/emotion_react_browser_esm_css("background:currentColor;box-sizing:border-box;display:grid;margin:auto;transition:all 120ms linear;", reduceMotion('transition'), " ", pointActive(props), ";" + ( true ? "" : 0), true ? "" : 0); 24394 }; 24395 const Point = emotion_styled_base_browser_esm("span", true ? { 24396 target: "e1od1u4s1" 24397 } : 0)("height:6px;width:6px;", pointBase, ";" + ( true ? "" : 0)); 24398 const Cell = emotion_styled_base_browser_esm("span", true ? { 24399 target: "e1od1u4s0" 24400 } : 0)( true ? { 24401 name: "rjf3ub", 24402 styles: "appearance:none;border:none;box-sizing:border-box;margin:0;display:flex;position:relative;outline:none;align-items:center;justify-content:center;padding:0" 24403 } : 0); 24404 24405 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/alignment-matrix-control/cell.js 24406 24407 24408 24409 /** 24410 * Internal dependencies 24411 */ 24412 24413 24414 24415 /** 24416 * Internal dependencies 24417 */ 24418 24419 24420 24421 function cell_Cell(_ref) { 24422 let { 24423 isActive = false, 24424 value, 24425 ...props 24426 } = _ref; 24427 const tooltipText = ALIGNMENT_LABEL[value]; 24428 return (0,external_wp_element_namespaceObject.createElement)(tooltip, { 24429 text: tooltipText 24430 }, (0,external_wp_element_namespaceObject.createElement)(CompositeItem, extends_extends({ 24431 as: Cell, 24432 role: "gridcell" 24433 }, props), (0,external_wp_element_namespaceObject.createElement)(visually_hidden_component, null, value), (0,external_wp_element_namespaceObject.createElement)(Point, { 24434 isActive: isActive, 24435 role: "presentation" 24436 }))); 24437 } 24438 24439 ;// CONCATENATED MODULE: ./node_modules/reakit-utils/es/useSealedState.js 24440 24441 24442 /** 24443 * React custom hook that returns the very first value passed to `initialState`, 24444 * even if it changes between re-renders. 24445 */ 24446 function useSealedState(initialState) { 24447 var _React$useState = (0,external_React_.useState)(initialState), 24448 sealed = _React$useState[0]; 24449 24450 return sealed; 24451 } 24452 24453 24454 24455 ;// CONCATENATED MODULE: ./node_modules/reakit/es/reverse-30eaa122.js 24456 24457 24458 function groupItems(items) { 24459 var groups = [[]]; 24460 24461 var _loop = function _loop() { 24462 var item = _step.value; 24463 var group = groups.find(function (g) { 24464 return !g[0] || g[0].groupId === item.groupId; 24465 }); 24466 24467 if (group) { 24468 group.push(item); 24469 } else { 24470 groups.push([item]); 24471 } 24472 }; 24473 24474 for (var _iterator = _createForOfIteratorHelperLoose(items), _step; !(_step = _iterator()).done;) { 24475 _loop(); 24476 } 24477 24478 return groups; 24479 } 24480 24481 function flatten(grid) { 24482 var flattened = []; 24483 24484 for (var _iterator = _createForOfIteratorHelperLoose(grid), _step; !(_step = _iterator()).done;) { 24485 var row = _step.value; 24486 flattened.push.apply(flattened, row); 24487 } 24488 24489 return flattened; 24490 } 24491 24492 function reverse(array) { 24493 return array.slice().reverse(); 24494 } 24495 24496 24497 24498 ;// CONCATENATED MODULE: ./node_modules/reakit/es/findEnabledItemById-8ddca752.js 24499 function findEnabledItemById(items, id) { 24500 if (!id) return undefined; 24501 return items === null || items === void 0 ? void 0 : items.find(function (item) { 24502 return item.id === id && !item.disabled; 24503 }); 24504 } 24505 24506 24507 24508 ;// CONCATENATED MODULE: ./node_modules/reakit-utils/es/applyState.js 24509 function isUpdater(argument) { 24510 return typeof argument === "function"; 24511 } 24512 /** 24513 * Receives a `setState` argument and calls it with `currentValue` if it's a 24514 * function. Otherwise return the argument as the new value. 24515 * 24516 * @example 24517 * import { applyState } from "reakit-utils"; 24518 * 24519 * applyState((value) => value + 1, 1); // 2 24520 * applyState(2, 1); // 2 24521 */ 24522 24523 24524 function applyState(argument, currentValue) { 24525 if (isUpdater(argument)) { 24526 return argument(currentValue); 24527 } 24528 24529 return argument; 24530 } 24531 24532 24533 24534 ;// CONCATENATED MODULE: ./node_modules/reakit/es/Id/IdState.js 24535 24536 24537 24538 24539 function unstable_useIdState(initialState) { 24540 if (initialState === void 0) { 24541 initialState = {}; 24542 } 24543 24544 var _useSealedState = useSealedState(initialState), 24545 initialBaseId = _useSealedState.baseId; 24546 24547 var generateId = (0,external_React_.useContext)(unstable_IdContext); 24548 var idCountRef = (0,external_React_.useRef)(0); 24549 24550 var _React$useState = (0,external_React_.useState)(function () { 24551 return initialBaseId || generateId(); 24552 }), 24553 baseId = _React$useState[0], 24554 setBaseId = _React$useState[1]; 24555 24556 return { 24557 baseId: baseId, 24558 setBaseId: setBaseId, 24559 unstable_idCountRef: idCountRef 24560 }; 24561 } 24562 24563 24564 24565 ;// CONCATENATED MODULE: ./node_modules/reakit/es/Composite/CompositeState.js 24566 24567 24568 24569 24570 24571 24572 24573 24574 24575 24576 24577 24578 function isElementPreceding(element1, element2) { 24579 return Boolean(element2.compareDocumentPosition(element1) & Node.DOCUMENT_POSITION_PRECEDING); 24580 } 24581 24582 function findDOMIndex(items, item) { 24583 return items.findIndex(function (currentItem) { 24584 if (!currentItem.ref.current || !item.ref.current) { 24585 return false; 24586 } 24587 24588 return isElementPreceding(item.ref.current, currentItem.ref.current); 24589 }); 24590 } 24591 24592 function getMaxLength(rows) { 24593 var maxLength = 0; 24594 24595 for (var _iterator = _createForOfIteratorHelperLoose(rows), _step; !(_step = _iterator()).done;) { 24596 var length = _step.value.length; 24597 24598 if (length > maxLength) { 24599 maxLength = length; 24600 } 24601 } 24602 24603 return maxLength; 24604 } 24605 24606 /** 24607 * Turns [row1, row1, row2, row2] into [row1, row2, row1, row2] 24608 */ 24609 24610 function verticalizeItems(items) { 24611 var groups = groupItems(items); 24612 var maxLength = getMaxLength(groups); 24613 var verticalized = []; 24614 24615 for (var i = 0; i < maxLength; i += 1) { 24616 for (var _iterator = _createForOfIteratorHelperLoose(groups), _step; !(_step = _iterator()).done;) { 24617 var group = _step.value; 24618 24619 if (group[i]) { 24620 verticalized.push(_objectSpread2(_objectSpread2({}, group[i]), {}, { 24621 // If there's no groupId, it means that it's not a grid composite, 24622 // but a single row instead. So, instead of verticalizing it, that 24623 // is, assigning a different groupId based on the column index, we 24624 // keep it undefined so they will be part of the same group. 24625 // It's useful when using up/down on one-dimensional composites. 24626 groupId: group[i].groupId ? "" + i : undefined 24627 })); 24628 } 24629 } 24630 } 24631 24632 return verticalized; 24633 } 24634 24635 function createEmptyItem(groupId) { 24636 return { 24637 id: "__EMPTY_ITEM__", 24638 disabled: true, 24639 ref: { 24640 current: null 24641 }, 24642 groupId: groupId 24643 }; 24644 } 24645 /** 24646 * Turns [[row1, row1], [row2]] into [[row1, row1], [row2, row2]] 24647 */ 24648 24649 24650 function fillGroups(groups, currentId, shift) { 24651 var maxLength = getMaxLength(groups); 24652 24653 for (var _iterator = _createForOfIteratorHelperLoose(groups), _step; !(_step = _iterator()).done;) { 24654 var group = _step.value; 24655 24656 for (var i = 0; i < maxLength; i += 1) { 24657 var item = group[i]; 24658 24659 if (!item || shift && item.disabled) { 24660 var isFrist = i === 0; 24661 var previousItem = isFrist && shift ? findFirstEnabledItem(group) : group[i - 1]; 24662 group[i] = previousItem && currentId !== (previousItem === null || previousItem === void 0 ? void 0 : previousItem.id) && shift ? previousItem : createEmptyItem(previousItem === null || previousItem === void 0 ? void 0 : previousItem.groupId); 24663 } 24664 } 24665 } 24666 24667 return groups; 24668 } 24669 24670 var nullItem = { 24671 id: null, 24672 ref: { 24673 current: null 24674 } 24675 }; 24676 function placeItemsAfter(items, id, shouldInsertNullItem) { 24677 var index = items.findIndex(function (item) { 24678 return item.id === id; 24679 }); 24680 return [].concat(items.slice(index + 1), shouldInsertNullItem ? [nullItem] : [], items.slice(0, index)); 24681 } 24682 24683 function getItemsInGroup(items, groupId) { 24684 return items.filter(function (item) { 24685 return item.groupId === groupId; 24686 }); 24687 } 24688 24689 var map = { 24690 horizontal: "vertical", 24691 vertical: "horizontal" 24692 }; 24693 function getOppositeOrientation(orientation) { 24694 return orientation && map[orientation]; 24695 } 24696 24697 function addItemAtIndex(array, item, index) { 24698 if (!(index in array)) { 24699 return [].concat(array, [item]); 24700 } 24701 24702 return [].concat(array.slice(0, index), [item], array.slice(index)); 24703 } 24704 24705 function sortBasedOnDOMPosition(items) { 24706 var pairs = items.map(function (item, index) { 24707 return [index, item]; 24708 }); 24709 var isOrderDifferent = false; 24710 pairs.sort(function (_ref, _ref2) { 24711 var indexA = _ref[0], 24712 a = _ref[1]; 24713 var indexB = _ref2[0], 24714 b = _ref2[1]; 24715 var elementA = a.ref.current; 24716 var elementB = b.ref.current; 24717 if (!elementA || !elementB) return 0; // a before b 24718 24719 if (isElementPreceding(elementA, elementB)) { 24720 if (indexA > indexB) { 24721 isOrderDifferent = true; 24722 } 24723 24724 return -1; 24725 } // a after b 24726 24727 24728 if (indexA < indexB) { 24729 isOrderDifferent = true; 24730 } 24731 24732 return 1; 24733 }); 24734 24735 if (isOrderDifferent) { 24736 return pairs.map(function (_ref3) { 24737 var _ = _ref3[0], 24738 item = _ref3[1]; 24739 return item; 24740 }); 24741 } 24742 24743 return items; 24744 } 24745 24746 function setItemsBasedOnDOMPosition(items, setItems) { 24747 var sortedItems = sortBasedOnDOMPosition(items); 24748 24749 if (items !== sortedItems) { 24750 setItems(sortedItems); 24751 } 24752 } 24753 24754 function getCommonParent(items) { 24755 var _firstItem$ref$curren; 24756 24757 var firstItem = items[0], 24758 nextItems = items.slice(1); 24759 var parentElement = firstItem === null || firstItem === void 0 ? void 0 : (_firstItem$ref$curren = firstItem.ref.current) === null || _firstItem$ref$curren === void 0 ? void 0 : _firstItem$ref$curren.parentElement; 24760 24761 var _loop = function _loop() { 24762 var parent = parentElement; 24763 24764 if (nextItems.every(function (item) { 24765 return parent.contains(item.ref.current); 24766 })) { 24767 return { 24768 v: parentElement 24769 }; 24770 } 24771 24772 parentElement = parentElement.parentElement; 24773 }; 24774 24775 while (parentElement) { 24776 var _ret = _loop(); 24777 24778 if (typeof _ret === "object") return _ret.v; 24779 } 24780 24781 return getDocument(parentElement).body; 24782 } // istanbul ignore next: JSDOM doesn't support IntersectionObverser 24783 // See https://github.com/jsdom/jsdom/issues/2032 24784 24785 24786 function useIntersectionObserver(items, setItems) { 24787 var previousItems = (0,external_React_.useRef)([]); 24788 (0,external_React_.useEffect)(function () { 24789 var callback = function callback() { 24790 var hasPreviousItems = !!previousItems.current.length; // We don't want to sort items if items have been just registered. 24791 24792 if (hasPreviousItems) { 24793 setItemsBasedOnDOMPosition(items, setItems); 24794 } 24795 24796 previousItems.current = items; 24797 }; 24798 24799 var root = getCommonParent(items); 24800 var observer = new IntersectionObserver(callback, { 24801 root: root 24802 }); 24803 24804 for (var _iterator = _createForOfIteratorHelperLoose(items), _step; !(_step = _iterator()).done;) { 24805 var item = _step.value; 24806 24807 if (item.ref.current) { 24808 observer.observe(item.ref.current); 24809 } 24810 } 24811 24812 return function () { 24813 observer.disconnect(); 24814 }; 24815 }, [items]); 24816 } 24817 24818 function useTimeoutObserver(items, setItems) { 24819 (0,external_React_.useEffect)(function () { 24820 var callback = function callback() { 24821 return setItemsBasedOnDOMPosition(items, setItems); 24822 }; 24823 24824 var timeout = setTimeout(callback, 250); 24825 return function () { 24826 return clearTimeout(timeout); 24827 }; 24828 }); 24829 } 24830 24831 function useSortBasedOnDOMPosition(items, setItems) { 24832 if (typeof IntersectionObserver === "function") { 24833 useIntersectionObserver(items, setItems); 24834 } else { 24835 useTimeoutObserver(items, setItems); 24836 } 24837 } 24838 24839 function reducer(state, action) { 24840 var virtual = state.unstable_virtual, 24841 rtl = state.rtl, 24842 orientation = state.orientation, 24843 items = state.items, 24844 groups = state.groups, 24845 currentId = state.currentId, 24846 loop = state.loop, 24847 wrap = state.wrap, 24848 pastIds = state.pastIds, 24849 shift = state.shift, 24850 moves = state.unstable_moves, 24851 includesBaseElement = state.unstable_includesBaseElement, 24852 initialVirtual = state.initialVirtual, 24853 initialRTL = state.initialRTL, 24854 initialOrientation = state.initialOrientation, 24855 initialCurrentId = state.initialCurrentId, 24856 initialLoop = state.initialLoop, 24857 initialWrap = state.initialWrap, 24858 initialShift = state.initialShift, 24859 hasSetCurrentId = state.hasSetCurrentId; 24860 24861 switch (action.type) { 24862 case "registerGroup": 24863 { 24864 var _group = action.group; // If there are no groups yet, just add it as the first one 24865 24866 if (groups.length === 0) { 24867 return _objectSpread2(_objectSpread2({}, state), {}, { 24868 groups: [_group] 24869 }); 24870 } // Finds the group index based on DOM position 24871 24872 24873 var index = findDOMIndex(groups, _group); 24874 return _objectSpread2(_objectSpread2({}, state), {}, { 24875 groups: addItemAtIndex(groups, _group, index) 24876 }); 24877 } 24878 24879 case "unregisterGroup": 24880 { 24881 var _id = action.id; 24882 var nextGroups = groups.filter(function (group) { 24883 return group.id !== _id; 24884 }); // The group isn't registered, so do nothing 24885 24886 if (nextGroups.length === groups.length) { 24887 return state; 24888 } 24889 24890 return _objectSpread2(_objectSpread2({}, state), {}, { 24891 groups: nextGroups 24892 }); 24893 } 24894 24895 case "registerItem": 24896 { 24897 var _item = action.item; // Finds the item group based on the DOM hierarchy 24898 24899 var _group2 = groups.find(function (r) { 24900 var _r$ref$current; 24901 24902 return (_r$ref$current = r.ref.current) === null || _r$ref$current === void 0 ? void 0 : _r$ref$current.contains(_item.ref.current); 24903 }); // Group will be null if it's a one-dimensional composite 24904 24905 24906 var nextItem = _objectSpread2({ 24907 groupId: _group2 === null || _group2 === void 0 ? void 0 : _group2.id 24908 }, _item); 24909 24910 var _index = findDOMIndex(items, nextItem); 24911 24912 var nextState = _objectSpread2(_objectSpread2({}, state), {}, { 24913 items: addItemAtIndex(items, nextItem, _index) 24914 }); 24915 24916 if (!hasSetCurrentId && !moves && initialCurrentId === undefined) { 24917 var _findFirstEnabledItem; 24918 24919 // Sets currentId to the first enabled item. This runs whenever an item 24920 // is registered because the first enabled item may be registered 24921 // asynchronously. 24922 return _objectSpread2(_objectSpread2({}, nextState), {}, { 24923 currentId: (_findFirstEnabledItem = findFirstEnabledItem(nextState.items)) === null || _findFirstEnabledItem === void 0 ? void 0 : _findFirstEnabledItem.id 24924 }); 24925 } 24926 24927 return nextState; 24928 } 24929 24930 case "unregisterItem": 24931 { 24932 var _id2 = action.id; 24933 var nextItems = items.filter(function (item) { 24934 return item.id !== _id2; 24935 }); // The item isn't registered, so do nothing 24936 24937 if (nextItems.length === items.length) { 24938 return state; 24939 } // Filters out the item that is being removed from the pastIds list 24940 24941 24942 var nextPastIds = pastIds.filter(function (pastId) { 24943 return pastId !== _id2; 24944 }); 24945 24946 var _nextState = _objectSpread2(_objectSpread2({}, state), {}, { 24947 pastIds: nextPastIds, 24948 items: nextItems 24949 }); // If the current item is the item that is being removed, focus pastId 24950 24951 24952 if (currentId && currentId === _id2) { 24953 var nextId = includesBaseElement ? null : getCurrentId(_objectSpread2(_objectSpread2({}, _nextState), {}, { 24954 currentId: nextPastIds[0] 24955 })); 24956 return _objectSpread2(_objectSpread2({}, _nextState), {}, { 24957 currentId: nextId 24958 }); 24959 } 24960 24961 return _nextState; 24962 } 24963 24964 case "move": 24965 { 24966 var _id3 = action.id; // move() does nothing 24967 24968 if (_id3 === undefined) { 24969 return state; 24970 } // Removes the current item and the item that is receiving focus from the 24971 // pastIds list 24972 24973 24974 var filteredPastIds = pastIds.filter(function (pastId) { 24975 return pastId !== currentId && pastId !== _id3; 24976 }); // If there's a currentId, add it to the pastIds list so it can be focused 24977 // if the new item gets removed or disabled 24978 24979 var _nextPastIds = currentId ? [currentId].concat(filteredPastIds) : filteredPastIds; 24980 24981 var _nextState2 = _objectSpread2(_objectSpread2({}, state), {}, { 24982 pastIds: _nextPastIds 24983 }); // move(null) will focus the composite element itself, not an item 24984 24985 24986 if (_id3 === null) { 24987 return _objectSpread2(_objectSpread2({}, _nextState2), {}, { 24988 unstable_moves: moves + 1, 24989 currentId: getCurrentId(_nextState2, _id3) 24990 }); 24991 } 24992 24993 var _item2 = findEnabledItemById(items, _id3); 24994 24995 return _objectSpread2(_objectSpread2({}, _nextState2), {}, { 24996 unstable_moves: _item2 ? moves + 1 : moves, 24997 currentId: getCurrentId(_nextState2, _item2 === null || _item2 === void 0 ? void 0 : _item2.id) 24998 }); 24999 } 25000 25001 case "next": 25002 { 25003 // If there's no item focused, we just move the first one 25004 if (currentId == null) { 25005 return reducer(state, _objectSpread2(_objectSpread2({}, action), {}, { 25006 type: "first" 25007 })); 25008 } // RTL doesn't make sense on vertical navigation 25009 25010 25011 var isHorizontal = orientation !== "vertical"; 25012 var isRTL = rtl && isHorizontal; 25013 var allItems = isRTL ? reverse(items) : items; 25014 var currentItem = allItems.find(function (item) { 25015 return item.id === currentId; 25016 }); // If there's no item focused, we just move the first one 25017 25018 if (!currentItem) { 25019 return reducer(state, _objectSpread2(_objectSpread2({}, action), {}, { 25020 type: "first" 25021 })); 25022 } 25023 25024 var isGrid = !!currentItem.groupId; 25025 var currentIndex = allItems.indexOf(currentItem); 25026 25027 var _nextItems = allItems.slice(currentIndex + 1); 25028 25029 var nextItemsInGroup = getItemsInGroup(_nextItems, currentItem.groupId); // Home, End 25030 25031 if (action.allTheWay) { 25032 // We reverse so we can get the last enabled item in the group. If it's 25033 // RTL, nextItems and nextItemsInGroup are already reversed and don't 25034 // have the items before the current one anymore. So we have to get 25035 // items in group again with allItems. 25036 var _nextItem2 = findFirstEnabledItem(isRTL ? getItemsInGroup(allItems, currentItem.groupId) : reverse(nextItemsInGroup)); 25037 25038 return reducer(state, _objectSpread2(_objectSpread2({}, action), {}, { 25039 type: "move", 25040 id: _nextItem2 === null || _nextItem2 === void 0 ? void 0 : _nextItem2.id 25041 })); 25042 } 25043 25044 var oppositeOrientation = getOppositeOrientation( // If it's a grid and orientation is not set, it's a next/previous 25045 // call, which is inherently horizontal. up/down will call next with 25046 // orientation set to vertical by default (see below on up/down cases). 25047 isGrid ? orientation || "horizontal" : orientation); 25048 var canLoop = loop && loop !== oppositeOrientation; 25049 var canWrap = isGrid && wrap && wrap !== oppositeOrientation; 25050 var hasNullItem = // `previous` and `up` will set action.hasNullItem, but when calling 25051 // next directly, hasNullItem will only be true if it's not a grid and 25052 // loop is set to true, which means that pressing right or down keys on 25053 // grids will never focus the composite element. On one-dimensional 25054 // composites that don't loop, pressing right or down keys also doesn't 25055 // focus the composite element. 25056 action.hasNullItem || !isGrid && canLoop && includesBaseElement; 25057 25058 if (canLoop) { 25059 var loopItems = canWrap && !hasNullItem ? allItems : getItemsInGroup(allItems, currentItem.groupId); // Turns [0, 1, current, 3, 4] into [3, 4, 0, 1] 25060 25061 var sortedItems = placeItemsAfter(loopItems, currentId, hasNullItem); 25062 25063 var _nextItem3 = findFirstEnabledItem(sortedItems, currentId); 25064 25065 return reducer(state, _objectSpread2(_objectSpread2({}, action), {}, { 25066 type: "move", 25067 id: _nextItem3 === null || _nextItem3 === void 0 ? void 0 : _nextItem3.id 25068 })); 25069 } 25070 25071 if (canWrap) { 25072 var _nextItem4 = findFirstEnabledItem( // We can use nextItems, which contains all the next items, including 25073 // items from other groups, to wrap between groups. However, if there 25074 // is a null item (the composite element), we'll only use the next 25075 // items in the group. So moving next from the last item will focus 25076 // the composite element (null). On grid composites, horizontal 25077 // navigation never focuses the composite element, only vertical. 25078 hasNullItem ? nextItemsInGroup : _nextItems, currentId); 25079 25080 var _nextId = hasNullItem ? (_nextItem4 === null || _nextItem4 === void 0 ? void 0 : _nextItem4.id) || null : _nextItem4 === null || _nextItem4 === void 0 ? void 0 : _nextItem4.id; 25081 25082 return reducer(state, _objectSpread2(_objectSpread2({}, action), {}, { 25083 type: "move", 25084 id: _nextId 25085 })); 25086 } 25087 25088 var _nextItem = findFirstEnabledItem(nextItemsInGroup, currentId); 25089 25090 if (!_nextItem && hasNullItem) { 25091 return reducer(state, _objectSpread2(_objectSpread2({}, action), {}, { 25092 type: "move", 25093 id: null 25094 })); 25095 } 25096 25097 return reducer(state, _objectSpread2(_objectSpread2({}, action), {}, { 25098 type: "move", 25099 id: _nextItem === null || _nextItem === void 0 ? void 0 : _nextItem.id 25100 })); 25101 } 25102 25103 case "previous": 25104 { 25105 // If currentId is initially set to null, the composite element will be 25106 // focusable while navigating with arrow keys. But, if it's a grid, we 25107 // don't want to focus the composite element with horizontal navigation. 25108 var _isGrid = !!groups.length; 25109 25110 var _hasNullItem = !_isGrid && includesBaseElement; 25111 25112 var _nextState3 = reducer(_objectSpread2(_objectSpread2({}, state), {}, { 25113 items: reverse(items) 25114 }), _objectSpread2(_objectSpread2({}, action), {}, { 25115 type: "next", 25116 hasNullItem: _hasNullItem 25117 })); 25118 25119 return _objectSpread2(_objectSpread2({}, _nextState3), {}, { 25120 items: items 25121 }); 25122 } 25123 25124 case "down": 25125 { 25126 var shouldShift = shift && !action.allTheWay; // First, we make sure groups have the same number of items by filling it 25127 // with disabled fake items. Then, we reorganize the items list so 25128 // [1-1, 1-2, 2-1, 2-2] becomes [1-1, 2-1, 1-2, 2-2]. 25129 25130 var verticalItems = verticalizeItems(flatten(fillGroups(groupItems(items), currentId, shouldShift))); 25131 25132 var _canLoop = loop && loop !== "horizontal"; // Pressing down arrow key will only focus the composite element if loop 25133 // is true or vertical. 25134 25135 25136 var _hasNullItem2 = _canLoop && includesBaseElement; 25137 25138 var _nextState4 = reducer(_objectSpread2(_objectSpread2({}, state), {}, { 25139 orientation: "vertical", 25140 items: verticalItems 25141 }), _objectSpread2(_objectSpread2({}, action), {}, { 25142 type: "next", 25143 hasNullItem: _hasNullItem2 25144 })); 25145 25146 return _objectSpread2(_objectSpread2({}, _nextState4), {}, { 25147 orientation: orientation, 25148 items: items 25149 }); 25150 } 25151 25152 case "up": 25153 { 25154 var _shouldShift = shift && !action.allTheWay; 25155 25156 var _verticalItems = verticalizeItems(reverse(flatten(fillGroups(groupItems(items), currentId, _shouldShift)))); // If currentId is initially set to null, we'll always focus the 25157 // composite element when the up arrow key is pressed in the first row. 25158 25159 25160 var _hasNullItem3 = includesBaseElement; 25161 25162 var _nextState5 = reducer(_objectSpread2(_objectSpread2({}, state), {}, { 25163 orientation: "vertical", 25164 items: _verticalItems 25165 }), _objectSpread2(_objectSpread2({}, action), {}, { 25166 type: "next", 25167 hasNullItem: _hasNullItem3 25168 })); 25169 25170 return _objectSpread2(_objectSpread2({}, _nextState5), {}, { 25171 orientation: orientation, 25172 items: items 25173 }); 25174 } 25175 25176 case "first": 25177 { 25178 var firstItem = findFirstEnabledItem(items); 25179 return reducer(state, _objectSpread2(_objectSpread2({}, action), {}, { 25180 type: "move", 25181 id: firstItem === null || firstItem === void 0 ? void 0 : firstItem.id 25182 })); 25183 } 25184 25185 case "last": 25186 { 25187 var _nextState6 = reducer(_objectSpread2(_objectSpread2({}, state), {}, { 25188 items: reverse(items) 25189 }), _objectSpread2(_objectSpread2({}, action), {}, { 25190 type: "first" 25191 })); 25192 25193 return _objectSpread2(_objectSpread2({}, _nextState6), {}, { 25194 items: items 25195 }); 25196 } 25197 25198 case "sort": 25199 { 25200 return _objectSpread2(_objectSpread2({}, state), {}, { 25201 items: sortBasedOnDOMPosition(items), 25202 groups: sortBasedOnDOMPosition(groups) 25203 }); 25204 } 25205 25206 case "setVirtual": 25207 return _objectSpread2(_objectSpread2({}, state), {}, { 25208 unstable_virtual: applyState(action.virtual, virtual) 25209 }); 25210 25211 case "setRTL": 25212 return _objectSpread2(_objectSpread2({}, state), {}, { 25213 rtl: applyState(action.rtl, rtl) 25214 }); 25215 25216 case "setOrientation": 25217 return _objectSpread2(_objectSpread2({}, state), {}, { 25218 orientation: applyState(action.orientation, orientation) 25219 }); 25220 25221 case "setCurrentId": 25222 { 25223 var nextCurrentId = getCurrentId(_objectSpread2(_objectSpread2({}, state), {}, { 25224 currentId: applyState(action.currentId, currentId) 25225 })); 25226 return _objectSpread2(_objectSpread2({}, state), {}, { 25227 currentId: nextCurrentId, 25228 hasSetCurrentId: true 25229 }); 25230 } 25231 25232 case "setLoop": 25233 return _objectSpread2(_objectSpread2({}, state), {}, { 25234 loop: applyState(action.loop, loop) 25235 }); 25236 25237 case "setWrap": 25238 return _objectSpread2(_objectSpread2({}, state), {}, { 25239 wrap: applyState(action.wrap, wrap) 25240 }); 25241 25242 case "setShift": 25243 return _objectSpread2(_objectSpread2({}, state), {}, { 25244 shift: applyState(action.shift, shift) 25245 }); 25246 25247 case "setIncludesBaseElement": 25248 { 25249 return _objectSpread2(_objectSpread2({}, state), {}, { 25250 unstable_includesBaseElement: applyState(action.includesBaseElement, includesBaseElement) 25251 }); 25252 } 25253 25254 case "reset": 25255 return _objectSpread2(_objectSpread2({}, state), {}, { 25256 unstable_virtual: initialVirtual, 25257 rtl: initialRTL, 25258 orientation: initialOrientation, 25259 currentId: getCurrentId(_objectSpread2(_objectSpread2({}, state), {}, { 25260 currentId: initialCurrentId 25261 })), 25262 loop: initialLoop, 25263 wrap: initialWrap, 25264 shift: initialShift, 25265 unstable_moves: 0, 25266 pastIds: [] 25267 }); 25268 25269 case "setItems": 25270 { 25271 return _objectSpread2(_objectSpread2({}, state), {}, { 25272 items: action.items 25273 }); 25274 } 25275 25276 default: 25277 throw new Error(); 25278 } 25279 } 25280 25281 function useAction(fn) { 25282 return (0,external_React_.useCallback)(fn, []); 25283 } 25284 25285 function useIsUnmountedRef() { 25286 var isUnmountedRef = (0,external_React_.useRef)(false); 25287 useIsomorphicEffect(function () { 25288 return function () { 25289 isUnmountedRef.current = true; 25290 }; 25291 }, []); 25292 return isUnmountedRef; 25293 } 25294 25295 function useCompositeState(initialState) { 25296 if (initialState === void 0) { 25297 initialState = {}; 25298 } 25299 25300 var _useSealedState = useSealedState(initialState), 25301 _useSealedState$unsta = _useSealedState.unstable_virtual, 25302 virtual = _useSealedState$unsta === void 0 ? false : _useSealedState$unsta, 25303 _useSealedState$rtl = _useSealedState.rtl, 25304 rtl = _useSealedState$rtl === void 0 ? false : _useSealedState$rtl, 25305 orientation = _useSealedState.orientation, 25306 currentId = _useSealedState.currentId, 25307 _useSealedState$loop = _useSealedState.loop, 25308 loop = _useSealedState$loop === void 0 ? false : _useSealedState$loop, 25309 _useSealedState$wrap = _useSealedState.wrap, 25310 wrap = _useSealedState$wrap === void 0 ? false : _useSealedState$wrap, 25311 _useSealedState$shift = _useSealedState.shift, 25312 shift = _useSealedState$shift === void 0 ? false : _useSealedState$shift, 25313 unstable_includesBaseElement = _useSealedState.unstable_includesBaseElement, 25314 sealed = _rollupPluginBabelHelpers_1f0bf8c2_objectWithoutPropertiesLoose(_useSealedState, ["unstable_virtual", "rtl", "orientation", "currentId", "loop", "wrap", "shift", "unstable_includesBaseElement"]); 25315 25316 var idState = unstable_useIdState(sealed); 25317 25318 var _React$useReducer = (0,external_React_.useReducer)(reducer, { 25319 unstable_virtual: virtual, 25320 rtl: rtl, 25321 orientation: orientation, 25322 items: [], 25323 groups: [], 25324 currentId: currentId, 25325 loop: loop, 25326 wrap: wrap, 25327 shift: shift, 25328 unstable_moves: 0, 25329 pastIds: [], 25330 unstable_includesBaseElement: unstable_includesBaseElement != null ? unstable_includesBaseElement : currentId === null, 25331 initialVirtual: virtual, 25332 initialRTL: rtl, 25333 initialOrientation: orientation, 25334 initialCurrentId: currentId, 25335 initialLoop: loop, 25336 initialWrap: wrap, 25337 initialShift: shift 25338 }), 25339 _React$useReducer$ = _React$useReducer[0], 25340 pastIds = _React$useReducer$.pastIds, 25341 initialVirtual = _React$useReducer$.initialVirtual, 25342 initialRTL = _React$useReducer$.initialRTL, 25343 initialOrientation = _React$useReducer$.initialOrientation, 25344 initialCurrentId = _React$useReducer$.initialCurrentId, 25345 initialLoop = _React$useReducer$.initialLoop, 25346 initialWrap = _React$useReducer$.initialWrap, 25347 initialShift = _React$useReducer$.initialShift, 25348 hasSetCurrentId = _React$useReducer$.hasSetCurrentId, 25349 state = _rollupPluginBabelHelpers_1f0bf8c2_objectWithoutPropertiesLoose(_React$useReducer$, ["pastIds", "initialVirtual", "initialRTL", "initialOrientation", "initialCurrentId", "initialLoop", "initialWrap", "initialShift", "hasSetCurrentId"]), 25350 dispatch = _React$useReducer[1]; 25351 25352 var _React$useState = (0,external_React_.useState)(false), 25353 hasActiveWidget = _React$useState[0], 25354 setHasActiveWidget = _React$useState[1]; // register/unregister may be called when this component is unmounted. We 25355 // store the unmounted state here so we don't update the state if it's true. 25356 // This only happens in a very specific situation. 25357 // See https://github.com/reakit/reakit/issues/650 25358 25359 25360 var isUnmountedRef = useIsUnmountedRef(); 25361 var setItems = (0,external_React_.useCallback)(function (items) { 25362 return dispatch({ 25363 type: "setItems", 25364 items: items 25365 }); 25366 }, []); 25367 useSortBasedOnDOMPosition(state.items, setItems); 25368 return _objectSpread2(_objectSpread2(_objectSpread2({}, idState), state), {}, { 25369 unstable_hasActiveWidget: hasActiveWidget, 25370 unstable_setHasActiveWidget: setHasActiveWidget, 25371 registerItem: useAction(function (item) { 25372 if (isUnmountedRef.current) return; 25373 dispatch({ 25374 type: "registerItem", 25375 item: item 25376 }); 25377 }), 25378 unregisterItem: useAction(function (id) { 25379 if (isUnmountedRef.current) return; 25380 dispatch({ 25381 type: "unregisterItem", 25382 id: id 25383 }); 25384 }), 25385 registerGroup: useAction(function (group) { 25386 if (isUnmountedRef.current) return; 25387 dispatch({ 25388 type: "registerGroup", 25389 group: group 25390 }); 25391 }), 25392 unregisterGroup: useAction(function (id) { 25393 if (isUnmountedRef.current) return; 25394 dispatch({ 25395 type: "unregisterGroup", 25396 id: id 25397 }); 25398 }), 25399 move: useAction(function (id) { 25400 return dispatch({ 25401 type: "move", 25402 id: id 25403 }); 25404 }), 25405 next: useAction(function (allTheWay) { 25406 return dispatch({ 25407 type: "next", 25408 allTheWay: allTheWay 25409 }); 25410 }), 25411 previous: useAction(function (allTheWay) { 25412 return dispatch({ 25413 type: "previous", 25414 allTheWay: allTheWay 25415 }); 25416 }), 25417 up: useAction(function (allTheWay) { 25418 return dispatch({ 25419 type: "up", 25420 allTheWay: allTheWay 25421 }); 25422 }), 25423 down: useAction(function (allTheWay) { 25424 return dispatch({ 25425 type: "down", 25426 allTheWay: allTheWay 25427 }); 25428 }), 25429 first: useAction(function () { 25430 return dispatch({ 25431 type: "first" 25432 }); 25433 }), 25434 last: useAction(function () { 25435 return dispatch({ 25436 type: "last" 25437 }); 25438 }), 25439 sort: useAction(function () { 25440 return dispatch({ 25441 type: "sort" 25442 }); 25443 }), 25444 unstable_setVirtual: useAction(function (value) { 25445 return dispatch({ 25446 type: "setVirtual", 25447 virtual: value 25448 }); 25449 }), 25450 setRTL: useAction(function (value) { 25451 return dispatch({ 25452 type: "setRTL", 25453 rtl: value 25454 }); 25455 }), 25456 setOrientation: useAction(function (value) { 25457 return dispatch({ 25458 type: "setOrientation", 25459 orientation: value 25460 }); 25461 }), 25462 setCurrentId: useAction(function (value) { 25463 return dispatch({ 25464 type: "setCurrentId", 25465 currentId: value 25466 }); 25467 }), 25468 setLoop: useAction(function (value) { 25469 return dispatch({ 25470 type: "setLoop", 25471 loop: value 25472 }); 25473 }), 25474 setWrap: useAction(function (value) { 25475 return dispatch({ 25476 type: "setWrap", 25477 wrap: value 25478 }); 25479 }), 25480 setShift: useAction(function (value) { 25481 return dispatch({ 25482 type: "setShift", 25483 shift: value 25484 }); 25485 }), 25486 unstable_setIncludesBaseElement: useAction(function (value) { 25487 return dispatch({ 25488 type: "setIncludesBaseElement", 25489 includesBaseElement: value 25490 }); 25491 }), 25492 reset: useAction(function () { 25493 return dispatch({ 25494 type: "reset" 25495 }); 25496 }) 25497 }); 25498 } 25499 25500 25501 25502 ;// CONCATENATED MODULE: ./node_modules/reakit-utils/es/fireBlurEvent.js 25503 25504 25505 25506 25507 function createFocusEvent(element, type, eventInit) { 25508 if (eventInit === void 0) { 25509 eventInit = {}; 25510 } 25511 25512 if (typeof FocusEvent === "function") { 25513 return new FocusEvent(type, eventInit); 25514 } 25515 25516 return createEvent(element, type, eventInit); 25517 } 25518 /** 25519 * Creates and dispatches a blur event in a way that also works on IE 11. 25520 * 25521 * @example 25522 * import { fireBlurEvent } from "reakit-utils"; 25523 * 25524 * fireBlurEvent(document.getElementById("id")); 25525 */ 25526 25527 25528 function fireBlurEvent(element, eventInit) { 25529 var event = createFocusEvent(element, "blur", eventInit); 25530 var defaultAllowed = element.dispatchEvent(event); 25531 25532 var bubbleInit = _rollupPluginBabelHelpers_1f0bf8c2_objectSpread2(_rollupPluginBabelHelpers_1f0bf8c2_objectSpread2({}, eventInit), {}, { 25533 bubbles: true 25534 }); 25535 25536 element.dispatchEvent(createFocusEvent(element, "focusout", bubbleInit)); 25537 return defaultAllowed; 25538 } 25539 25540 25541 25542 ;// CONCATENATED MODULE: ./node_modules/reakit-utils/es/fireKeyboardEvent.js 25543 25544 25545 25546 function createKeyboardEvent(element, type, eventInit) { 25547 if (eventInit === void 0) { 25548 eventInit = {}; 25549 } 25550 25551 if (typeof KeyboardEvent === "function") { 25552 return new KeyboardEvent(type, eventInit); 25553 } // IE 11 doesn't support Event constructors 25554 25555 25556 var event = getDocument(element).createEvent("KeyboardEvent"); 25557 event.initKeyboardEvent(type, eventInit.bubbles, eventInit.cancelable, getWindow(element), eventInit.key, eventInit.location, eventInit.ctrlKey, eventInit.altKey, eventInit.shiftKey, eventInit.metaKey); 25558 return event; 25559 } 25560 /** 25561 * Creates and dispatches `KeyboardEvent` in a way that also works on IE 11. 25562 * 25563 * @example 25564 * import { fireKeyboardEvent } from "reakit-utils"; 25565 * 25566 * fireKeyboardEvent(document.getElementById("id"), "keydown", { 25567 * key: "ArrowDown", 25568 * shiftKey: true, 25569 * }); 25570 */ 25571 25572 25573 function fireKeyboardEvent(element, type, eventInit) { 25574 return element.dispatchEvent(createKeyboardEvent(element, type, eventInit)); 25575 } 25576 25577 25578 25579 ;// CONCATENATED MODULE: ./node_modules/reakit-utils/es/getNextActiveElementOnBlur.js 25580 25581 25582 25583 25584 25585 var isIE11 = canUseDOM && "msCrypto" in window; 25586 /** 25587 * Cross-browser method that returns the next active element (the element that 25588 * is receiving focus) after a blur event is dispatched. It receives the blur 25589 * event object as the argument. 25590 * 25591 * @example 25592 * import { getNextActiveElementOnBlur } from "reakit-utils"; 25593 * 25594 * const element = document.getElementById("id"); 25595 * element.addEventListener("blur", (event) => { 25596 * const nextActiveElement = getNextActiveElementOnBlur(event); 25597 * }); 25598 */ 25599 25600 function getNextActiveElementOnBlur(event) { 25601 // IE 11 doesn't support event.relatedTarget on blur. 25602 // document.activeElement points the the next active element. 25603 // On modern browsers, document.activeElement points to the current target. 25604 if (isIE11) { 25605 var activeElement = getActiveElement_getActiveElement(event.currentTarget); 25606 return activeElement; 25607 } 25608 25609 return event.relatedTarget; 25610 } 25611 25612 25613 25614 ;// CONCATENATED MODULE: ./node_modules/reakit/es/Composite/Composite.js 25615 25616 25617 25618 25619 25620 25621 25622 25623 25624 25625 25626 25627 25628 25629 25630 25631 25632 25633 25634 25635 25636 25637 25638 25639 25640 25641 25642 25643 25644 var Composite_isIE11 = canUseDOM && "msCrypto" in window; 25645 25646 function canProxyKeyboardEvent(event) { 25647 if (!isSelfTarget(event)) return false; 25648 if (event.metaKey) return false; 25649 if (event.key === "Tab") return false; 25650 return true; 25651 } 25652 25653 function useKeyboardEventProxy(virtual, currentItem, htmlEventHandler) { 25654 var eventHandlerRef = useLiveRef(htmlEventHandler); 25655 return (0,external_React_.useCallback)(function (event) { 25656 var _eventHandlerRef$curr; 25657 25658 (_eventHandlerRef$curr = eventHandlerRef.current) === null || _eventHandlerRef$curr === void 0 ? void 0 : _eventHandlerRef$curr.call(eventHandlerRef, event); 25659 if (event.defaultPrevented) return; 25660 25661 if (virtual && canProxyKeyboardEvent(event)) { 25662 var currentElement = currentItem === null || currentItem === void 0 ? void 0 : currentItem.ref.current; 25663 25664 if (currentElement) { 25665 if (!fireKeyboardEvent(currentElement, event.type, event)) { 25666 event.preventDefault(); 25667 } // The event will be triggered on the composite item and then 25668 // propagated up to this composite element again, so we can pretend 25669 // that it wasn't called on this component in the first place. 25670 25671 25672 if (event.currentTarget.contains(currentElement)) { 25673 event.stopPropagation(); 25674 } 25675 } 25676 } 25677 }, [virtual, currentItem]); 25678 } // istanbul ignore next 25679 25680 25681 function useActiveElementRef(elementRef) { 25682 var activeElementRef = (0,external_React_.useRef)(null); 25683 (0,external_React_.useEffect)(function () { 25684 var document = getDocument(elementRef.current); 25685 25686 var onFocus = function onFocus(event) { 25687 var target = event.target; 25688 activeElementRef.current = target; 25689 }; 25690 25691 document.addEventListener("focus", onFocus, true); 25692 return function () { 25693 document.removeEventListener("focus", onFocus, true); 25694 }; 25695 }, []); 25696 return activeElementRef; 25697 } 25698 25699 function findFirstEnabledItemInTheLastRow(items) { 25700 return findFirstEnabledItem(flatten(reverse(groupItems(items)))); 25701 } 25702 25703 function isItem(items, element) { 25704 return items === null || items === void 0 ? void 0 : items.some(function (item) { 25705 return !!element && item.ref.current === element; 25706 }); 25707 } 25708 25709 function useScheduleUserFocus(currentItem) { 25710 var currentItemRef = useLiveRef(currentItem); 25711 25712 var _React$useReducer = (0,external_React_.useReducer)(function (n) { 25713 return n + 1; 25714 }, 0), 25715 scheduled = _React$useReducer[0], 25716 schedule = _React$useReducer[1]; 25717 25718 (0,external_React_.useEffect)(function () { 25719 var _currentItemRef$curre; 25720 25721 var currentElement = (_currentItemRef$curre = currentItemRef.current) === null || _currentItemRef$curre === void 0 ? void 0 : _currentItemRef$curre.ref.current; 25722 25723 if (scheduled && currentElement) { 25724 userFocus(currentElement); 25725 } 25726 }, [scheduled]); 25727 return schedule; 25728 } 25729 25730 var useComposite = createHook({ 25731 name: "Composite", 25732 compose: [useTabbable], 25733 keys: COMPOSITE_KEYS, 25734 useOptions: function useOptions(options) { 25735 return _objectSpread2(_objectSpread2({}, options), {}, { 25736 currentId: getCurrentId(options) 25737 }); 25738 }, 25739 useProps: function useProps(options, _ref) { 25740 var htmlRef = _ref.ref, 25741 htmlOnFocusCapture = _ref.onFocusCapture, 25742 htmlOnFocus = _ref.onFocus, 25743 htmlOnBlurCapture = _ref.onBlurCapture, 25744 htmlOnKeyDown = _ref.onKeyDown, 25745 htmlOnKeyDownCapture = _ref.onKeyDownCapture, 25746 htmlOnKeyUpCapture = _ref.onKeyUpCapture, 25747 htmlProps = _rollupPluginBabelHelpers_1f0bf8c2_objectWithoutPropertiesLoose(_ref, ["ref", "onFocusCapture", "onFocus", "onBlurCapture", "onKeyDown", "onKeyDownCapture", "onKeyUpCapture"]); 25748 25749 var ref = (0,external_React_.useRef)(null); 25750 var currentItem = findEnabledItemById(options.items, options.currentId); 25751 var previousElementRef = (0,external_React_.useRef)(null); 25752 var onFocusCaptureRef = useLiveRef(htmlOnFocusCapture); 25753 var onFocusRef = useLiveRef(htmlOnFocus); 25754 var onBlurCaptureRef = useLiveRef(htmlOnBlurCapture); 25755 var onKeyDownRef = useLiveRef(htmlOnKeyDown); 25756 var scheduleUserFocus = useScheduleUserFocus(currentItem); // IE 11 doesn't support event.relatedTarget, so we use the active element 25757 // ref instead. 25758 25759 var activeElementRef = Composite_isIE11 ? useActiveElementRef(ref) : undefined; 25760 (0,external_React_.useEffect)(function () { 25761 var element = ref.current; 25762 25763 if (options.unstable_moves && !currentItem) { 25764 false ? 0 : void 0; // If composite.move(null) has been called, the composite container 25765 // will receive focus. 25766 25767 element === null || element === void 0 ? void 0 : element.focus(); 25768 } 25769 }, [options.unstable_moves, currentItem]); 25770 var onKeyDownCapture = useKeyboardEventProxy(options.unstable_virtual, currentItem, htmlOnKeyDownCapture); 25771 var onKeyUpCapture = useKeyboardEventProxy(options.unstable_virtual, currentItem, htmlOnKeyUpCapture); 25772 var onFocusCapture = (0,external_React_.useCallback)(function (event) { 25773 var _onFocusCaptureRef$cu; 25774 25775 (_onFocusCaptureRef$cu = onFocusCaptureRef.current) === null || _onFocusCaptureRef$cu === void 0 ? void 0 : _onFocusCaptureRef$cu.call(onFocusCaptureRef, event); 25776 if (event.defaultPrevented) return; 25777 if (!options.unstable_virtual) return; // IE11 doesn't support event.relatedTarget, so we use the active 25778 // element ref instead. 25779 25780 var previousActiveElement = (activeElementRef === null || activeElementRef === void 0 ? void 0 : activeElementRef.current) || event.relatedTarget; 25781 var previousActiveElementWasItem = isItem(options.items, previousActiveElement); 25782 25783 if (isSelfTarget(event) && previousActiveElementWasItem) { 25784 // Composite has been focused as a result of an item receiving focus. 25785 // The composite item will move focus back to the composite 25786 // container. In this case, we don't want to propagate this 25787 // additional event nor call the onFocus handler passed to 25788 // <Composite onFocus={...} />. 25789 event.stopPropagation(); // We keep track of the previous active item element so we can 25790 // manually fire a blur event on it later when the focus is moved to 25791 // another item on the onBlurCapture event below. 25792 25793 previousElementRef.current = previousActiveElement; 25794 } 25795 }, [options.unstable_virtual, options.items]); 25796 var onFocus = (0,external_React_.useCallback)(function (event) { 25797 var _onFocusRef$current; 25798 25799 (_onFocusRef$current = onFocusRef.current) === null || _onFocusRef$current === void 0 ? void 0 : _onFocusRef$current.call(onFocusRef, event); 25800 if (event.defaultPrevented) return; 25801 25802 if (options.unstable_virtual) { 25803 if (isSelfTarget(event)) { 25804 // This means that the composite element has been focused while the 25805 // composite item has not. For example, by clicking on the 25806 // composite element without touching any item, or by tabbing into 25807 // the composite element. In this case, we want to trigger focus on 25808 // the item, just like it would happen with roving tabindex. 25809 // When it receives focus, the composite item will put focus back 25810 // on the composite element, in which case hasItemWithFocus will be 25811 // true. 25812 scheduleUserFocus(); 25813 } 25814 } else if (isSelfTarget(event)) { 25815 var _options$setCurrentId; 25816 25817 // When the roving tabindex composite gets intentionally focused (for 25818 // example, by clicking directly on it, and not on an item), we make 25819 // sure to set the current id to null (which means the composite 25820 // itself is focused). 25821 (_options$setCurrentId = options.setCurrentId) === null || _options$setCurrentId === void 0 ? void 0 : _options$setCurrentId.call(options, null); 25822 } 25823 }, [options.unstable_virtual, options.setCurrentId]); 25824 var onBlurCapture = (0,external_React_.useCallback)(function (event) { 25825 var _onBlurCaptureRef$cur; 25826 25827 (_onBlurCaptureRef$cur = onBlurCaptureRef.current) === null || _onBlurCaptureRef$cur === void 0 ? void 0 : _onBlurCaptureRef$cur.call(onBlurCaptureRef, event); 25828 if (event.defaultPrevented) return; 25829 if (!options.unstable_virtual) return; // When virtual is set to true, we move focus from the composite 25830 // container (this component) to the composite item that is being 25831 // selected. Then we move focus back to the composite container. This 25832 // is so we can provide the same API as the roving tabindex method, 25833 // which means people can attach onFocus/onBlur handlers on the 25834 // CompositeItem component regardless of whether it's virtual or not. 25835 // This sequence of blurring and focusing items and composite may be 25836 // confusing, so we ignore intermediate focus and blurs by stopping its 25837 // propagation and not calling the passed onBlur handler (htmlOnBlur). 25838 25839 var currentElement = (currentItem === null || currentItem === void 0 ? void 0 : currentItem.ref.current) || null; 25840 var nextActiveElement = getNextActiveElementOnBlur(event); 25841 var nextActiveElementIsItem = isItem(options.items, nextActiveElement); 25842 25843 if (isSelfTarget(event) && nextActiveElementIsItem) { 25844 // This is an intermediate blur event: blurring the composite 25845 // container to focus an item (nextActiveElement). 25846 if (nextActiveElement === currentElement) { 25847 // The next active element will be the same as the current item in 25848 // the state in two scenarios: 25849 // - Moving focus with keyboard: the state is updated before the 25850 // blur event is triggered, so here the current item is already 25851 // pointing to the next active element. 25852 // - Clicking on the current active item with a pointer: this 25853 // will trigger blur on the composite element and then the next 25854 // active element will be the same as the current item. Clicking on 25855 // an item other than the current one doesn't end up here as the 25856 // currentItem state will be updated only after it. 25857 if (previousElementRef.current && previousElementRef.current !== nextActiveElement) { 25858 // If there's a previous active item and it's not a click action, 25859 // then we fire a blur event on it so it will work just like if 25860 // it had DOM focus before (like when using roving tabindex). 25861 fireBlurEvent(previousElementRef.current, event); 25862 } 25863 } else if (currentElement) { 25864 // This will be true when the next active element is not the 25865 // current element, but there's a current item. This will only 25866 // happen when clicking with a pointer on a different item, when 25867 // there's already an item selected, in which case currentElement 25868 // is the item that is getting blurred, and nextActiveElement is 25869 // the item that is being clicked. 25870 fireBlurEvent(currentElement, event); 25871 } // We want to ignore intermediate blur events, so we stop its 25872 // propagation and return early so onFocus will not be called. 25873 25874 25875 event.stopPropagation(); 25876 } else { 25877 var targetIsItem = isItem(options.items, event.target); 25878 25879 if (!targetIsItem && currentElement) { 25880 // If target is not a composite item, it may be the composite 25881 // element itself (isSelfTarget) or a tabbable element inside the 25882 // composite widget. This may be triggered by clicking outside the 25883 // composite widget or by tabbing out of it. In either cases we 25884 // want to fire a blur event on the current item. 25885 fireBlurEvent(currentElement, event); 25886 } 25887 } 25888 }, [options.unstable_virtual, options.items, currentItem]); 25889 var onKeyDown = (0,external_React_.useCallback)(function (event) { 25890 var _onKeyDownRef$current, _options$groups; 25891 25892 (_onKeyDownRef$current = onKeyDownRef.current) === null || _onKeyDownRef$current === void 0 ? void 0 : _onKeyDownRef$current.call(onKeyDownRef, event); 25893 if (event.defaultPrevented) return; 25894 if (options.currentId !== null) return; 25895 if (!isSelfTarget(event)) return; 25896 var isVertical = options.orientation !== "horizontal"; 25897 var isHorizontal = options.orientation !== "vertical"; 25898 var isGrid = !!((_options$groups = options.groups) !== null && _options$groups !== void 0 && _options$groups.length); 25899 25900 var up = function up() { 25901 if (isGrid) { 25902 var item = findFirstEnabledItemInTheLastRow(options.items); 25903 25904 if (item !== null && item !== void 0 && item.id) { 25905 var _options$move; 25906 25907 (_options$move = options.move) === null || _options$move === void 0 ? void 0 : _options$move.call(options, item.id); 25908 } 25909 } else { 25910 var _options$last; 25911 25912 (_options$last = options.last) === null || _options$last === void 0 ? void 0 : _options$last.call(options); 25913 } 25914 }; 25915 25916 var keyMap = { 25917 ArrowUp: (isGrid || isVertical) && up, 25918 ArrowRight: (isGrid || isHorizontal) && options.first, 25919 ArrowDown: (isGrid || isVertical) && options.first, 25920 ArrowLeft: (isGrid || isHorizontal) && options.last, 25921 Home: options.first, 25922 End: options.last, 25923 PageUp: options.first, 25924 PageDown: options.last 25925 }; 25926 var action = keyMap[event.key]; 25927 25928 if (action) { 25929 event.preventDefault(); 25930 action(); 25931 } 25932 }, [options.currentId, options.orientation, options.groups, options.items, options.move, options.last, options.first]); 25933 return _objectSpread2({ 25934 ref: useForkRef(ref, htmlRef), 25935 id: options.baseId, 25936 onFocus: onFocus, 25937 onFocusCapture: onFocusCapture, 25938 onBlurCapture: onBlurCapture, 25939 onKeyDownCapture: onKeyDownCapture, 25940 onKeyDown: onKeyDown, 25941 onKeyUpCapture: onKeyUpCapture, 25942 "aria-activedescendant": options.unstable_virtual ? (currentItem === null || currentItem === void 0 ? void 0 : currentItem.id) || undefined : undefined 25943 }, htmlProps); 25944 }, 25945 useComposeProps: function useComposeProps(options, htmlProps) { 25946 htmlProps = useRole(options, htmlProps, true); 25947 var tabbableHTMLProps = useTabbable(options, htmlProps, true); 25948 25949 if (options.unstable_virtual || options.currentId === null) { 25950 // Composite will only be tabbable by default if the focus is managed 25951 // using aria-activedescendant, which requires DOM focus on the container 25952 // element (the composite) 25953 return _objectSpread2({ 25954 tabIndex: 0 25955 }, tabbableHTMLProps); 25956 } 25957 25958 return _objectSpread2(_objectSpread2({}, htmlProps), {}, { 25959 ref: tabbableHTMLProps.ref 25960 }); 25961 } 25962 }); 25963 var Composite = createComponent({ 25964 as: "div", 25965 useHook: useComposite, 25966 useCreateElement: function useCreateElement$1(type, props, children) { 25967 false ? 0 : void 0; 25968 return useCreateElement(type, props, children); 25969 } 25970 }); 25971 25972 25973 25974 ;// CONCATENATED MODULE: ./node_modules/reakit/es/Group/Group.js 25975 25976 25977 25978 25979 25980 25981 // Automatically generated 25982 var GROUP_KEYS = []; 25983 25984 var useGroup = createHook({ 25985 name: "Group", 25986 compose: useRole, 25987 keys: GROUP_KEYS, 25988 useProps: function useProps(_, htmlProps) { 25989 return _objectSpread2({ 25990 role: "group" 25991 }, htmlProps); 25992 } 25993 }); 25994 var Group = createComponent({ 25995 as: "div", 25996 useHook: useGroup 25997 }); 25998 25999 26000 26001 ;// CONCATENATED MODULE: ./node_modules/reakit/es/Composite/CompositeGroup.js 26002 26003 26004 26005 26006 26007 26008 26009 26010 26011 26012 26013 26014 26015 26016 var useCompositeGroup = createHook({ 26017 name: "CompositeGroup", 26018 compose: [useGroup, unstable_useId], 26019 keys: COMPOSITE_GROUP_KEYS, 26020 propsAreEqual: function propsAreEqual(prev, next) { 26021 if (!next.id || prev.id !== next.id) { 26022 return useGroup.unstable_propsAreEqual(prev, next); 26023 } 26024 26025 var prevCurrentId = prev.currentId, 26026 prevMoves = prev.unstable_moves, 26027 prevProps = _rollupPluginBabelHelpers_1f0bf8c2_objectWithoutPropertiesLoose(prev, ["currentId", "unstable_moves"]); 26028 26029 var nextCurrentId = next.currentId, 26030 nextMoves = next.unstable_moves, 26031 nextProps = _rollupPluginBabelHelpers_1f0bf8c2_objectWithoutPropertiesLoose(next, ["currentId", "unstable_moves"]); 26032 26033 if (prev.items && next.items) { 26034 var prevCurrentItem = findEnabledItemById(prev.items, prevCurrentId); 26035 var nextCurrentItem = findEnabledItemById(next.items, nextCurrentId); 26036 var prevGroupId = prevCurrentItem === null || prevCurrentItem === void 0 ? void 0 : prevCurrentItem.groupId; 26037 var nextGroupId = nextCurrentItem === null || nextCurrentItem === void 0 ? void 0 : nextCurrentItem.groupId; 26038 26039 if (next.id === nextGroupId || next.id === prevGroupId) { 26040 return false; 26041 } 26042 } 26043 26044 return useGroup.unstable_propsAreEqual(prevProps, nextProps); 26045 }, 26046 useProps: function useProps(options, _ref) { 26047 var htmlRef = _ref.ref, 26048 htmlProps = _rollupPluginBabelHelpers_1f0bf8c2_objectWithoutPropertiesLoose(_ref, ["ref"]); 26049 26050 var ref = (0,external_React_.useRef)(null); 26051 var id = options.id; // We need this to be called before CompositeItems' register 26052 26053 useIsomorphicEffect(function () { 26054 var _options$registerGrou; 26055 26056 if (!id) return undefined; 26057 (_options$registerGrou = options.registerGroup) === null || _options$registerGrou === void 0 ? void 0 : _options$registerGrou.call(options, { 26058 id: id, 26059 ref: ref 26060 }); 26061 return function () { 26062 var _options$unregisterGr; 26063 26064 (_options$unregisterGr = options.unregisterGroup) === null || _options$unregisterGr === void 0 ? void 0 : _options$unregisterGr.call(options, id); 26065 }; 26066 }, [id, options.registerGroup, options.unregisterGroup]); 26067 return _objectSpread2({ 26068 ref: useForkRef(ref, htmlRef) 26069 }, htmlProps); 26070 } 26071 }); 26072 var CompositeGroup = createComponent({ 26073 as: "div", 26074 useHook: useCompositeGroup 26075 }); 26076 26077 26078 26079 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/alignment-matrix-control/styles/alignment-matrix-control-icon-styles.js 26080 26081 26082 function alignment_matrix_control_icon_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } 26083 26084 /** 26085 * External dependencies 26086 */ 26087 26088 /** 26089 * Internal dependencies 26090 */ 26091 26092 26093 26094 const alignment_matrix_control_icon_styles_rootSize = () => { 26095 const padding = 1.5; 26096 const size = 24; 26097 return /*#__PURE__*/emotion_react_browser_esm_css({ 26098 gridTemplateRows: `repeat( 3, calc( $size - padding * 2}px / 3))`, 26099 padding, 26100 maxHeight: size, 26101 maxWidth: size 26102 }, true ? "" : 0, true ? "" : 0); 26103 }; 26104 26105 const rootPointerEvents = _ref => { 26106 let { 26107 disablePointerEvents 26108 } = _ref; 26109 return /*#__PURE__*/emotion_react_browser_esm_css({ 26110 pointerEvents: disablePointerEvents ? 'none' : null 26111 }, true ? "" : 0, true ? "" : 0); 26112 }; 26113 26114 const Wrapper = emotion_styled_base_browser_esm("div", true ? { 26115 target: "elqsdmc2" 26116 } : 0)( true ? { 26117 name: "ogl07i", 26118 styles: "box-sizing:border-box;padding:2px" 26119 } : 0); 26120 const alignment_matrix_control_icon_styles_Root = emotion_styled_base_browser_esm("div", true ? { 26121 target: "elqsdmc1" 26122 } : 0)("transform-origin:top left;height:100%;width:100%;", rootBase, ";", alignment_matrix_control_icon_styles_rootSize, ";", rootPointerEvents, ";" + ( true ? "" : 0)); 26123 26124 const alignment_matrix_control_icon_styles_pointActive = _ref2 => { 26125 let { 26126 isActive 26127 } = _ref2; 26128 const boxShadow = isActive ? `0 0 0 1px currentColor` : null; 26129 return /*#__PURE__*/emotion_react_browser_esm_css("box-shadow:", boxShadow, ";color:currentColor;*:hover>&{color:currentColor;}" + ( true ? "" : 0), true ? "" : 0); 26130 }; 26131 26132 const alignment_matrix_control_icon_styles_Point = emotion_styled_base_browser_esm("span", true ? { 26133 target: "elqsdmc0" 26134 } : 0)("height:2px;width:2px;", pointBase, ";", alignment_matrix_control_icon_styles_pointActive, ";" + ( true ? "" : 0)); 26135 const alignment_matrix_control_icon_styles_Cell = Cell; 26136 26137 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/alignment-matrix-control/icon.js 26138 26139 26140 26141 /** 26142 * External dependencies 26143 */ 26144 26145 /** 26146 * Internal dependencies 26147 */ 26148 26149 26150 26151 const BASE_SIZE = 24; 26152 function AlignmentMatrixControlIcon(_ref) { 26153 let { 26154 className, 26155 disablePointerEvents = true, 26156 size = BASE_SIZE, 26157 style = {}, 26158 value = 'center', 26159 ...props 26160 } = _ref; 26161 const alignIndex = getAlignmentIndex(value); 26162 const scale = (size / BASE_SIZE).toFixed(2); 26163 const classes = classnames_default()('component-alignment-matrix-control-icon', className); 26164 const styles = { ...style, 26165 transform: `scale($scale})` 26166 }; 26167 return (0,external_wp_element_namespaceObject.createElement)(alignment_matrix_control_icon_styles_Root, extends_extends({}, props, { 26168 className: classes, 26169 disablePointerEvents: disablePointerEvents, 26170 role: "presentation", 26171 size: size, 26172 style: styles 26173 }), ALIGNMENTS.map((align, index) => { 26174 const isActive = alignIndex === index; 26175 return (0,external_wp_element_namespaceObject.createElement)(alignment_matrix_control_icon_styles_Cell, { 26176 key: align 26177 }, (0,external_wp_element_namespaceObject.createElement)(alignment_matrix_control_icon_styles_Point, { 26178 isActive: isActive 26179 })); 26180 })); 26181 } 26182 26183 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/alignment-matrix-control/index.js 26184 26185 26186 26187 /** 26188 * External dependencies 26189 */ 26190 26191 26192 /** 26193 * WordPress dependencies 26194 */ 26195 26196 26197 26198 26199 /** 26200 * Internal dependencies 26201 */ 26202 26203 26204 26205 26206 26207 26208 26209 function useBaseId(id) { 26210 const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(AlignmentMatrixControl, 'alignment-matrix-control'); 26211 return id || instanceId; 26212 } 26213 26214 function AlignmentMatrixControl(_ref) { 26215 let { 26216 className, 26217 id, 26218 label = (0,external_wp_i18n_namespaceObject.__)('Alignment Matrix Control'), 26219 defaultValue = 'center center', 26220 value, 26221 onChange = external_lodash_namespaceObject.noop, 26222 width = 92, 26223 ...props 26224 } = _ref; 26225 const [immutableDefaultValue] = (0,external_wp_element_namespaceObject.useState)(value !== null && value !== void 0 ? value : defaultValue); 26226 const baseId = useBaseId(id); 26227 const initialCurrentId = getItemId(baseId, immutableDefaultValue); 26228 const composite = useCompositeState({ 26229 baseId, 26230 currentId: initialCurrentId, 26231 rtl: (0,external_wp_i18n_namespaceObject.isRTL)() 26232 }); 26233 26234 const handleOnChange = nextValue => { 26235 onChange(nextValue); 26236 }; 26237 26238 (0,external_wp_element_namespaceObject.useEffect)(() => { 26239 if (typeof value !== 'undefined') { 26240 composite.setCurrentId(getItemId(baseId, value)); 26241 } 26242 }, [value, composite.setCurrentId]); 26243 const classes = classnames_default()('component-alignment-matrix-control', className); 26244 return (0,external_wp_element_namespaceObject.createElement)(Composite, extends_extends({}, props, composite, { 26245 "aria-label": label, 26246 as: Root, 26247 className: classes, 26248 role: "grid", 26249 width: width 26250 }), GRID.map((cells, index) => (0,external_wp_element_namespaceObject.createElement)(CompositeGroup, extends_extends({}, composite, { 26251 as: Row, 26252 role: "row", 26253 key: index 26254 }), cells.map(cell => { 26255 const cellId = getItemId(baseId, cell); 26256 const isActive = composite.currentId === cellId; 26257 return (0,external_wp_element_namespaceObject.createElement)(cell_Cell, extends_extends({}, composite, { 26258 id: cellId, 26259 isActive: isActive, 26260 key: cell, 26261 value: cell, 26262 onFocus: () => handleOnChange(cell), 26263 tabIndex: isActive ? 0 : -1 26264 })); 26265 })))); 26266 } 26267 AlignmentMatrixControl.Icon = AlignmentMatrixControlIcon; 26268 26269 ;// CONCATENATED MODULE: ./node_modules/tslib/tslib.es6.js 26270 /*! ***************************************************************************** 26271 Copyright (c) Microsoft Corporation. 26272 26273 Permission to use, copy, modify, and/or distribute this software for any 26274 purpose with or without fee is hereby granted. 26275 26276 THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH 26277 REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY 26278 AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, 26279 INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM 26280 LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR 26281 OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR 26282 PERFORMANCE OF THIS SOFTWARE. 26283 ***************************************************************************** */ 26284 /* global Reflect, Promise */ 26285 26286 var extendStatics = function(d, b) { 26287 extendStatics = Object.setPrototypeOf || 26288 ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) || 26289 function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; }; 26290 return extendStatics(d, b); 26291 }; 26292 26293 function __extends(d, b) { 26294 if (typeof b !== "function" && b !== null) 26295 throw new TypeError("Class extends value " + String(b) + " is not a constructor or null"); 26296 extendStatics(d, b); 26297 function __() { this.constructor = d; } 26298 d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); 26299 } 26300 26301 var __assign = function() { 26302 __assign = Object.assign || function __assign(t) { 26303 for (var s, i = 1, n = arguments.length; i < n; i++) { 26304 s = arguments[i]; 26305 for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p]; 26306 } 26307 return t; 26308 } 26309 return __assign.apply(this, arguments); 26310 } 26311 26312 function __rest(s, e) { 26313 var t = {}; 26314 for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) 26315 t[p] = s[p]; 26316 if (s != null && typeof Object.getOwnPropertySymbols === "function") 26317 for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) { 26318 if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) 26319 t[p[i]] = s[p[i]]; 26320 } 26321 return t; 26322 } 26323 26324 function __decorate(decorators, target, key, desc) { 26325 var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; 26326 if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); 26327 else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; 26328 return c > 3 && r && Object.defineProperty(target, key, r), r; 26329 } 26330 26331 function __param(paramIndex, decorator) { 26332 return function (target, key) { decorator(target, key, paramIndex); } 26333 } 26334 26335 function __metadata(metadataKey, metadataValue) { 26336 if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(metadataKey, metadataValue); 26337 } 26338 26339 function __awaiter(thisArg, _arguments, P, generator) { 26340 function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); } 26341 return new (P || (P = Promise))(function (resolve, reject) { 26342 function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } } 26343 function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } } 26344 function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); } 26345 step((generator = generator.apply(thisArg, _arguments || [])).next()); 26346 }); 26347 } 26348 26349 function __generator(thisArg, body) { 26350 var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g; 26351 return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g; 26352 function verb(n) { return function (v) { return step([n, v]); }; } 26353 function step(op) { 26354 if (f) throw new TypeError("Generator is already executing."); 26355 while (_) try { 26356 if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t; 26357 if (y = 0, t) op = [op[0] & 2, t.value]; 26358 switch (op[0]) { 26359 case 0: case 1: t = op; break; 26360 case 4: _.label++; return { value: op[1], done: false }; 26361 case 5: _.label++; y = op[1]; op = [0]; continue; 26362 case 7: op = _.ops.pop(); _.trys.pop(); continue; 26363 default: 26364 if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; } 26365 if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; } 26366 if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; } 26367 if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; } 26368 if (t[2]) _.ops.pop(); 26369 _.trys.pop(); continue; 26370 } 26371 op = body.call(thisArg, _); 26372 } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; } 26373 if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true }; 26374 } 26375 } 26376 26377 var __createBinding = Object.create ? (function(o, m, k, k2) { 26378 if (k2 === undefined) k2 = k; 26379 Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } }); 26380 }) : (function(o, m, k, k2) { 26381 if (k2 === undefined) k2 = k; 26382 o[k2] = m[k]; 26383 }); 26384 26385 function __exportStar(m, o) { 26386 for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(o, p)) __createBinding(o, m, p); 26387 } 26388 26389 function __values(o) { 26390 var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0; 26391 if (m) return m.call(o); 26392 if (o && typeof o.length === "number") return { 26393 next: function () { 26394 if (o && i >= o.length) o = void 0; 26395 return { value: o && o[i++], done: !o }; 26396 } 26397 }; 26398 throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined."); 26399 } 26400 26401 function tslib_es6_read(o, n) { 26402 var m = typeof Symbol === "function" && o[Symbol.iterator]; 26403 if (!m) return o; 26404 var i = m.call(o), r, ar = [], e; 26405 try { 26406 while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value); 26407 } 26408 catch (error) { e = { error: error }; } 26409 finally { 26410 try { 26411 if (r && !r.done && (m = i["return"])) m.call(i); 26412 } 26413 finally { if (e) throw e.error; } 26414 } 26415 return ar; 26416 } 26417 26418 /** @deprecated */ 26419 function __spread() { 26420 for (var ar = [], i = 0; i < arguments.length; i++) 26421 ar = ar.concat(tslib_es6_read(arguments[i])); 26422 return ar; 26423 } 26424 26425 /** @deprecated */ 26426 function __spreadArrays() { 26427 for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length; 26428 for (var r = Array(s), k = 0, i = 0; i < il; i++) 26429 for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++) 26430 r[k] = a[j]; 26431 return r; 26432 } 26433 26434 function tslib_es6_spreadArray(to, from, pack) { 26435 if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) { 26436 if (ar || !(i in from)) { 26437 if (!ar) ar = Array.prototype.slice.call(from, 0, i); 26438 ar[i] = from[i]; 26439 } 26440 } 26441 return to.concat(ar || Array.prototype.slice.call(from)); 26442 } 26443 26444 function __await(v) { 26445 return this instanceof __await ? (this.v = v, this) : new __await(v); 26446 } 26447 26448 function __asyncGenerator(thisArg, _arguments, generator) { 26449 if (!Symbol.asyncIterator) throw new TypeError("Symbol.asyncIterator is not defined."); 26450 var g = generator.apply(thisArg, _arguments || []), i, q = []; 26451 return i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i; 26452 function verb(n) { if (g[n]) i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; } 26453 function resume(n, v) { try { step(g[n](v)); } catch (e) { settle(q[0][3], e); } } 26454 function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); } 26455 function fulfill(value) { resume("next", value); } 26456 function reject(value) { resume("throw", value); } 26457 function settle(f, v) { if (f(v), q.shift(), q.length) resume(q[0][0], q[0][1]); } 26458 } 26459 26460 function __asyncDelegator(o) { 26461 var i, p; 26462 return i = {}, verb("next"), verb("throw", function (e) { throw e; }), verb("return"), i[Symbol.iterator] = function () { return this; }, i; 26463 function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: n === "return" } : f ? f(v) : v; } : f; } 26464 } 26465 26466 function __asyncValues(o) { 26467 if (!Symbol.asyncIterator) throw new TypeError("Symbol.asyncIterator is not defined."); 26468 var m = o[Symbol.asyncIterator], i; 26469 return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i); 26470 function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; } 26471 function settle(resolve, reject, d, v) { Promise.resolve(v).then(function(v) { resolve({ value: v, done: d }); }, reject); } 26472 } 26473 26474 function __makeTemplateObject(cooked, raw) { 26475 if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; } 26476 return cooked; 26477 }; 26478 26479 var __setModuleDefault = Object.create ? (function(o, v) { 26480 Object.defineProperty(o, "default", { enumerable: true, value: v }); 26481 }) : function(o, v) { 26482 o["default"] = v; 26483 }; 26484 26485 function __importStar(mod) { 26486 if (mod && mod.__esModule) return mod; 26487 var result = {}; 26488 if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k); 26489 __setModuleDefault(result, mod); 26490 return result; 26491 } 26492 26493 function __importDefault(mod) { 26494 return (mod && mod.__esModule) ? mod : { default: mod }; 26495 } 26496 26497 function __classPrivateFieldGet(receiver, state, kind, f) { 26498 if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter"); 26499 if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it"); 26500 return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver); 26501 } 26502 26503 function __classPrivateFieldSet(receiver, state, value, kind, f) { 26504 if (kind === "m") throw new TypeError("Private method is not writable"); 26505 if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter"); 26506 if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it"); 26507 return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value; 26508 } 26509 26510 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/motion/features/definitions.mjs 26511 var createDefinition = function (propNames) { return ({ 26512 isEnabled: function (props) { return propNames.some(function (name) { return !!props[name]; }); }, 26513 }); }; 26514 var featureDefinitions = { 26515 measureLayout: createDefinition(["layout", "layoutId", "drag"]), 26516 animation: createDefinition([ 26517 "animate", 26518 "exit", 26519 "variants", 26520 "whileHover", 26521 "whileTap", 26522 "whileFocus", 26523 "whileDrag", 26524 "whileInView", 26525 ]), 26526 exit: createDefinition(["exit"]), 26527 drag: createDefinition(["drag", "dragControls"]), 26528 focus: createDefinition(["whileFocus"]), 26529 hover: createDefinition(["whileHover", "onHoverStart", "onHoverEnd"]), 26530 tap: createDefinition(["whileTap", "onTap", "onTapStart", "onTapCancel"]), 26531 pan: createDefinition([ 26532 "onPan", 26533 "onPanStart", 26534 "onPanSessionStart", 26535 "onPanEnd", 26536 ]), 26537 inView: createDefinition([ 26538 "whileInView", 26539 "onViewportEnter", 26540 "onViewportLeave", 26541 ]), 26542 }; 26543 function loadFeatures(features) { 26544 for (var key in features) { 26545 if (features[key] === null) 26546 continue; 26547 if (key === "projectionNodeConstructor") { 26548 featureDefinitions.projectionNodeConstructor = features[key]; 26549 } 26550 else { 26551 featureDefinitions[key].Component = features[key]; 26552 } 26553 } 26554 } 26555 26556 26557 26558 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/context/LazyContext.mjs 26559 26560 26561 var LazyContext = (0,external_React_.createContext)({ strict: false }); 26562 26563 26564 26565 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/motion/features/use-features.mjs 26566 26567 26568 26569 26570 26571 26572 26573 26574 var featureNames = Object.keys(featureDefinitions); 26575 var numFeatures = featureNames.length; 26576 /** 26577 * Load features via renderless components based on the provided MotionProps. 26578 */ 26579 function useFeatures(props, visualElement, preloadedFeatures) { 26580 var features = []; 26581 var lazyContext = (0,external_React_.useContext)(LazyContext); 26582 if (!visualElement) 26583 return null; 26584 /** 26585 * If we're in development mode, check to make sure we're not rendering a motion component 26586 * as a child of LazyMotion, as this will break the file-size benefits of using it. 26587 */ 26588 if (false) {} 26589 for (var i = 0; i < numFeatures; i++) { 26590 var name_1 = featureNames[i]; 26591 var _a = featureDefinitions[name_1], isEnabled = _a.isEnabled, Component = _a.Component; 26592 /** 26593 * It might be possible in the future to use this moment to 26594 * dynamically request functionality. In initial tests this 26595 * was producing a lot of duplication amongst bundles. 26596 */ 26597 if (isEnabled(props) && Component) { 26598 features.push(external_React_.createElement(Component, __assign({ key: name_1 }, props, { visualElement: visualElement }))); 26599 } 26600 } 26601 return features; 26602 } 26603 26604 26605 26606 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/context/MotionConfigContext.mjs 26607 26608 26609 /** 26610 * @public 26611 */ 26612 var MotionConfigContext = (0,external_React_.createContext)({ 26613 transformPagePoint: function (p) { return p; }, 26614 isStatic: false, 26615 reducedMotion: "never", 26616 }); 26617 26618 26619 26620 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/context/MotionContext/index.mjs 26621 26622 26623 var MotionContext = (0,external_React_.createContext)({}); 26624 function useVisualElementContext() { 26625 return (0,external_React_.useContext)(MotionContext).visualElement; 26626 } 26627 26628 26629 26630 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/context/PresenceContext.mjs 26631 26632 26633 /** 26634 * @public 26635 */ 26636 var PresenceContext_PresenceContext = (0,external_React_.createContext)(null); 26637 26638 26639 26640 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/is-browser.mjs 26641 var is_browser_isBrowser = typeof document !== "undefined"; 26642 26643 26644 26645 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/use-isomorphic-effect.mjs 26646 26647 26648 26649 var useIsomorphicLayoutEffect = is_browser_isBrowser ? external_React_.useLayoutEffect : external_React_.useEffect; 26650 26651 26652 26653 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/use-reduced-motion.mjs 26654 26655 26656 26657 26658 26659 // Does this device prefer reduced motion? Returns `null` server-side. 26660 var prefersReducedMotion = { current: null }; 26661 var hasDetected = false; 26662 function initPrefersReducedMotion() { 26663 hasDetected = true; 26664 if (!is_browser_isBrowser) 26665 return; 26666 if (window.matchMedia) { 26667 var motionMediaQuery_1 = window.matchMedia("(prefers-reduced-motion)"); 26668 var setReducedMotionPreferences = function () { 26669 return (prefersReducedMotion.current = motionMediaQuery_1.matches); 26670 }; 26671 motionMediaQuery_1.addListener(setReducedMotionPreferences); 26672 setReducedMotionPreferences(); 26673 } 26674 else { 26675 prefersReducedMotion.current = false; 26676 } 26677 } 26678 /** 26679 * A hook that returns `true` if we should be using reduced motion based on the current device's Reduced Motion setting. 26680 * 26681 * This can be used to implement changes to your UI based on Reduced Motion. For instance, replacing motion-sickness inducing 26682 * `x`/`y` animations with `opacity`, disabling the autoplay of background videos, or turning off parallax motion. 26683 * 26684 * It will actively respond to changes and re-render your components with the latest setting. 26685 * 26686 * ```jsx 26687 * export function Sidebar({ isOpen }) { 26688 * const shouldReduceMotion = useReducedMotion() 26689 * const closedX = shouldReduceMotion ? 0 : "-100%" 26690 * 26691 * return ( 26692 * <motion.div animate={{ 26693 * opacity: isOpen ? 1 : 0, 26694 * x: isOpen ? 0 : closedX 26695 * }} /> 26696 * ) 26697 * } 26698 * ``` 26699 * 26700 * @return boolean 26701 * 26702 * @public 26703 */ 26704 function useReducedMotion() { 26705 /** 26706 * Lazy initialisation of prefersReducedMotion 26707 */ 26708 !hasDetected && initPrefersReducedMotion(); 26709 var _a = tslib_es6_read((0,external_React_.useState)(prefersReducedMotion.current), 1), shouldReduceMotion = _a[0]; 26710 /** 26711 * TODO See if people miss automatically updating shouldReduceMotion setting 26712 */ 26713 return shouldReduceMotion; 26714 } 26715 function useReducedMotionConfig() { 26716 var reducedMotionPreference = useReducedMotion(); 26717 var reducedMotion = (0,external_React_.useContext)(MotionConfigContext).reducedMotion; 26718 if (reducedMotion === "never") { 26719 return false; 26720 } 26721 else if (reducedMotion === "always") { 26722 return true; 26723 } 26724 else { 26725 return reducedMotionPreference; 26726 } 26727 } 26728 26729 26730 26731 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/motion/utils/use-visual-element.mjs 26732 26733 26734 26735 26736 26737 26738 26739 function useVisualElement(Component, visualState, props, createVisualElement) { 26740 var lazyContext = (0,external_React_.useContext)(LazyContext); 26741 var parent = useVisualElementContext(); 26742 var presenceContext = (0,external_React_.useContext)(PresenceContext_PresenceContext); 26743 var shouldReduceMotion = useReducedMotionConfig(); 26744 var visualElementRef = (0,external_React_.useRef)(undefined); 26745 /** 26746 * If we haven't preloaded a renderer, check to see if we have one lazy-loaded 26747 */ 26748 if (!createVisualElement) 26749 createVisualElement = lazyContext.renderer; 26750 if (!visualElementRef.current && createVisualElement) { 26751 visualElementRef.current = createVisualElement(Component, { 26752 visualState: visualState, 26753 parent: parent, 26754 props: props, 26755 presenceId: presenceContext === null || presenceContext === void 0 ? void 0 : presenceContext.id, 26756 blockInitialAnimation: (presenceContext === null || presenceContext === void 0 ? void 0 : presenceContext.initial) === false, 26757 shouldReduceMotion: shouldReduceMotion, 26758 }); 26759 } 26760 var visualElement = visualElementRef.current; 26761 useIsomorphicLayoutEffect(function () { 26762 visualElement === null || visualElement === void 0 ? void 0 : visualElement.syncRender(); 26763 }); 26764 (0,external_React_.useEffect)(function () { 26765 var _a; 26766 (_a = visualElement === null || visualElement === void 0 ? void 0 : visualElement.animationState) === null || _a === void 0 ? void 0 : _a.animateChanges(); 26767 }); 26768 useIsomorphicLayoutEffect(function () { return function () { return visualElement === null || visualElement === void 0 ? void 0 : visualElement.notifyUnmount(); }; }, []); 26769 return visualElement; 26770 } 26771 26772 26773 26774 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/is-ref-object.mjs 26775 function is_ref_object_isRefObject(ref) { 26776 return (typeof ref === "object" && 26777 Object.prototype.hasOwnProperty.call(ref, "current")); 26778 } 26779 26780 26781 26782 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/motion/utils/use-motion-ref.mjs 26783 26784 26785 26786 /** 26787 * Creates a ref function that, when called, hydrates the provided 26788 * external ref and VisualElement. 26789 */ 26790 function useMotionRef(visualState, visualElement, externalRef) { 26791 return (0,external_React_.useCallback)(function (instance) { 26792 var _a; 26793 instance && ((_a = visualState.mount) === null || _a === void 0 ? void 0 : _a.call(visualState, instance)); 26794 if (visualElement) { 26795 instance 26796 ? visualElement.mount(instance) 26797 : visualElement.unmount(); 26798 } 26799 if (externalRef) { 26800 if (typeof externalRef === "function") { 26801 externalRef(instance); 26802 } 26803 else if (is_ref_object_isRefObject(externalRef)) { 26804 externalRef.current = instance; 26805 } 26806 } 26807 }, 26808 /** 26809 * Only pass a new ref callback to React if we've received a visual element 26810 * factory. Otherwise we'll be mounting/remounting every time externalRef 26811 * or other dependencies change. 26812 */ 26813 [visualElement]); 26814 } 26815 26816 26817 26818 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/utils/variants.mjs 26819 /** 26820 * Decides if the supplied variable is an array of variant labels 26821 */ 26822 function isVariantLabels(v) { 26823 return Array.isArray(v); 26824 } 26825 /** 26826 * Decides if the supplied variable is variant label 26827 */ 26828 function isVariantLabel(v) { 26829 return typeof v === "string" || isVariantLabels(v); 26830 } 26831 /** 26832 * Creates an object containing the latest state of every MotionValue on a VisualElement 26833 */ 26834 function getCurrent(visualElement) { 26835 var current = {}; 26836 visualElement.forEachValue(function (value, key) { return (current[key] = value.get()); }); 26837 return current; 26838 } 26839 /** 26840 * Creates an object containing the latest velocity of every MotionValue on a VisualElement 26841 */ 26842 function getVelocity(visualElement) { 26843 var velocity = {}; 26844 visualElement.forEachValue(function (value, key) { return (velocity[key] = value.getVelocity()); }); 26845 return velocity; 26846 } 26847 function resolveVariantFromProps(props, definition, custom, currentValues, currentVelocity) { 26848 var _a; 26849 if (currentValues === void 0) { currentValues = {}; } 26850 if (currentVelocity === void 0) { currentVelocity = {}; } 26851 /** 26852 * If the variant definition is a function, resolve. 26853 */ 26854 if (typeof definition === "function") { 26855 definition = definition(custom !== null && custom !== void 0 ? custom : props.custom, currentValues, currentVelocity); 26856 } 26857 /** 26858 * If the variant definition is a variant label, or 26859 * the function returned a variant label, resolve. 26860 */ 26861 if (typeof definition === "string") { 26862 definition = (_a = props.variants) === null || _a === void 0 ? void 0 : _a[definition]; 26863 } 26864 /** 26865 * At this point we've resolved both functions and variant labels, 26866 * but the resolved variant label might itself have been a function. 26867 * If so, resolve. This can only have returned a valid target object. 26868 */ 26869 if (typeof definition === "function") { 26870 definition = definition(custom !== null && custom !== void 0 ? custom : props.custom, currentValues, currentVelocity); 26871 } 26872 return definition; 26873 } 26874 function resolveVariant(visualElement, definition, custom) { 26875 var props = visualElement.getProps(); 26876 return resolveVariantFromProps(props, definition, custom !== null && custom !== void 0 ? custom : props.custom, getCurrent(visualElement), getVelocity(visualElement)); 26877 } 26878 function checkIfControllingVariants(props) { 26879 var _a; 26880 return (typeof ((_a = props.animate) === null || _a === void 0 ? void 0 : _a.start) === "function" || 26881 isVariantLabel(props.initial) || 26882 isVariantLabel(props.animate) || 26883 isVariantLabel(props.whileHover) || 26884 isVariantLabel(props.whileDrag) || 26885 isVariantLabel(props.whileTap) || 26886 isVariantLabel(props.whileFocus) || 26887 isVariantLabel(props.exit)); 26888 } 26889 function checkIfVariantNode(props) { 26890 return Boolean(checkIfControllingVariants(props) || props.variants); 26891 } 26892 26893 26894 26895 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/context/MotionContext/utils.mjs 26896 26897 26898 function getCurrentTreeVariants(props, context) { 26899 if (checkIfControllingVariants(props)) { 26900 var initial = props.initial, animate = props.animate; 26901 return { 26902 initial: initial === false || isVariantLabel(initial) 26903 ? initial 26904 : undefined, 26905 animate: isVariantLabel(animate) ? animate : undefined, 26906 }; 26907 } 26908 return props.inherit !== false ? context : {}; 26909 } 26910 26911 26912 26913 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/context/MotionContext/create.mjs 26914 26915 26916 26917 26918 function useCreateMotionContext(props) { 26919 var _a = getCurrentTreeVariants(props, (0,external_React_.useContext)(MotionContext)), initial = _a.initial, animate = _a.animate; 26920 return (0,external_React_.useMemo)(function () { return ({ initial: initial, animate: animate }); }, [variantLabelsAsDependency(initial), variantLabelsAsDependency(animate)]); 26921 } 26922 function variantLabelsAsDependency(prop) { 26923 return Array.isArray(prop) ? prop.join(" ") : prop; 26924 } 26925 26926 26927 26928 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/use-constant.mjs 26929 26930 26931 /** 26932 * Creates a constant value over the lifecycle of a component. 26933 * 26934 * Even if `useMemo` is provided an empty array as its final argument, it doesn't offer 26935 * a guarantee that it won't re-run for performance reasons later on. By using `useConstant` 26936 * you can ensure that initialisers don't execute twice or more. 26937 */ 26938 function useConstant(init) { 26939 var ref = (0,external_React_.useRef)(null); 26940 if (ref.current === null) { 26941 ref.current = init(); 26942 } 26943 return ref.current; 26944 } 26945 26946 26947 26948 ;// CONCATENATED MODULE: ./node_modules/framesync/dist/es/on-next-frame.mjs 26949 const defaultTimestep = (1 / 60) * 1000; 26950 const getCurrentTime = typeof performance !== "undefined" 26951 ? () => performance.now() 26952 : () => Date.now(); 26953 const onNextFrame = typeof window !== "undefined" 26954 ? (callback) => window.requestAnimationFrame(callback) 26955 : (callback) => setTimeout(() => callback(getCurrentTime()), defaultTimestep); 26956 26957 26958 26959 ;// CONCATENATED MODULE: ./node_modules/framesync/dist/es/create-render-step.mjs 26960 function createRenderStep(runNextFrame) { 26961 let toRun = []; 26962 let toRunNextFrame = []; 26963 let numToRun = 0; 26964 let isProcessing = false; 26965 let flushNextFrame = false; 26966 const toKeepAlive = new WeakSet(); 26967 const step = { 26968 schedule: (callback, keepAlive = false, immediate = false) => { 26969 const addToCurrentFrame = immediate && isProcessing; 26970 const buffer = addToCurrentFrame ? toRun : toRunNextFrame; 26971 if (keepAlive) 26972 toKeepAlive.add(callback); 26973 if (buffer.indexOf(callback) === -1) { 26974 buffer.push(callback); 26975 if (addToCurrentFrame && isProcessing) 26976 numToRun = toRun.length; 26977 } 26978 return callback; 26979 }, 26980 cancel: (callback) => { 26981 const index = toRunNextFrame.indexOf(callback); 26982 if (index !== -1) 26983 toRunNextFrame.splice(index, 1); 26984 toKeepAlive.delete(callback); 26985 }, 26986 process: (frameData) => { 26987 if (isProcessing) { 26988 flushNextFrame = true; 26989 return; 26990 } 26991 isProcessing = true; 26992 [toRun, toRunNextFrame] = [toRunNextFrame, toRun]; 26993 toRunNextFrame.length = 0; 26994 numToRun = toRun.length; 26995 if (numToRun) { 26996 for (let i = 0; i < numToRun; i++) { 26997 const callback = toRun[i]; 26998 callback(frameData); 26999 if (toKeepAlive.has(callback)) { 27000 step.schedule(callback); 27001 runNextFrame(); 27002 } 27003 } 27004 } 27005 isProcessing = false; 27006 if (flushNextFrame) { 27007 flushNextFrame = false; 27008 step.process(frameData); 27009 } 27010 }, 27011 }; 27012 return step; 27013 } 27014 27015 27016 27017 ;// CONCATENATED MODULE: ./node_modules/framesync/dist/es/index.mjs 27018 27019 27020 27021 const maxElapsed = 40; 27022 let useDefaultElapsed = true; 27023 let runNextFrame = false; 27024 let isProcessing = false; 27025 const es_frame = { 27026 delta: 0, 27027 timestamp: 0, 27028 }; 27029 const stepsOrder = [ 27030 "read", 27031 "update", 27032 "preRender", 27033 "render", 27034 "postRender", 27035 ]; 27036 const steps = stepsOrder.reduce((acc, key) => { 27037 acc[key] = createRenderStep(() => (runNextFrame = true)); 27038 return acc; 27039 }, {}); 27040 const sync = stepsOrder.reduce((acc, key) => { 27041 const step = steps[key]; 27042 acc[key] = (process, keepAlive = false, immediate = false) => { 27043 if (!runNextFrame) 27044 startLoop(); 27045 return step.schedule(process, keepAlive, immediate); 27046 }; 27047 return acc; 27048 }, {}); 27049 const cancelSync = stepsOrder.reduce((acc, key) => { 27050 acc[key] = steps[key].cancel; 27051 return acc; 27052 }, {}); 27053 const flushSync = stepsOrder.reduce((acc, key) => { 27054 acc[key] = () => steps[key].process(es_frame); 27055 return acc; 27056 }, {}); 27057 const processStep = (stepId) => steps[stepId].process(es_frame); 27058 const processFrame = (timestamp) => { 27059 runNextFrame = false; 27060 es_frame.delta = useDefaultElapsed 27061 ? defaultTimestep 27062 : Math.max(Math.min(timestamp - es_frame.timestamp, maxElapsed), 1); 27063 es_frame.timestamp = timestamp; 27064 isProcessing = true; 27065 stepsOrder.forEach(processStep); 27066 isProcessing = false; 27067 if (runNextFrame) { 27068 useDefaultElapsed = false; 27069 onNextFrame(processFrame); 27070 } 27071 }; 27072 const startLoop = () => { 27073 runNextFrame = true; 27074 useDefaultElapsed = true; 27075 if (!isProcessing) 27076 onNextFrame(processFrame); 27077 }; 27078 const getFrameData = () => es_frame; 27079 27080 /* harmony default export */ var es = (sync); 27081 27082 27083 ;// CONCATENATED MODULE: ./node_modules/popmotion/dist/es/utils/mix.mjs 27084 const mix = (from, to, progress) => -progress * from + progress * to + from; 27085 27086 27087 27088 ;// CONCATENATED MODULE: ./node_modules/popmotion/dist/es/utils/velocity-per-second.mjs 27089 function velocityPerSecond(velocity, frameDuration) { 27090 return frameDuration ? velocity * (1000 / frameDuration) : 0; 27091 } 27092 27093 27094 27095 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/array.mjs 27096 27097 27098 function addUniqueItem(arr, item) { 27099 arr.indexOf(item) === -1 && arr.push(item); 27100 } 27101 function removeItem(arr, item) { 27102 var index = arr.indexOf(item); 27103 index > -1 && arr.splice(index, 1); 27104 } 27105 // Adapted from array-move 27106 function moveItem(_a, fromIndex, toIndex) { 27107 var _b = __read(_a), arr = _b.slice(0); 27108 var startIndex = fromIndex < 0 ? arr.length + fromIndex : fromIndex; 27109 if (startIndex >= 0 && startIndex < arr.length) { 27110 var endIndex = toIndex < 0 ? arr.length + toIndex : toIndex; 27111 var _c = __read(arr.splice(fromIndex, 1), 1), item = _c[0]; 27112 arr.splice(endIndex, 0, item); 27113 } 27114 return arr; 27115 } 27116 27117 27118 27119 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/subscription-manager.mjs 27120 27121 27122 var SubscriptionManager = /** @class */ (function () { 27123 function SubscriptionManager() { 27124 this.subscriptions = []; 27125 } 27126 SubscriptionManager.prototype.add = function (handler) { 27127 var _this = this; 27128 addUniqueItem(this.subscriptions, handler); 27129 return function () { return removeItem(_this.subscriptions, handler); }; 27130 }; 27131 SubscriptionManager.prototype.notify = function (a, b, c) { 27132 var numSubscriptions = this.subscriptions.length; 27133 if (!numSubscriptions) 27134 return; 27135 if (numSubscriptions === 1) { 27136 /** 27137 * If there's only a single handler we can just call it without invoking a loop. 27138 */ 27139 this.subscriptions[0](a, b, c); 27140 } 27141 else { 27142 for (var i = 0; i < numSubscriptions; i++) { 27143 /** 27144 * Check whether the handler exists before firing as it's possible 27145 * the subscriptions were modified during this loop running. 27146 */ 27147 var handler = this.subscriptions[i]; 27148 handler && handler(a, b, c); 27149 } 27150 } 27151 }; 27152 SubscriptionManager.prototype.getSize = function () { 27153 return this.subscriptions.length; 27154 }; 27155 SubscriptionManager.prototype.clear = function () { 27156 this.subscriptions.length = 0; 27157 }; 27158 return SubscriptionManager; 27159 }()); 27160 27161 27162 27163 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/value/index.mjs 27164 27165 27166 27167 27168 var isFloat = function (value) { 27169 return !isNaN(parseFloat(value)); 27170 }; 27171 /** 27172 * `MotionValue` is used to track the state and velocity of motion values. 27173 * 27174 * @public 27175 */ 27176 var MotionValue = /** @class */ (function () { 27177 /** 27178 * @param init - The initiating value 27179 * @param config - Optional configuration options 27180 * 27181 * - `transformer`: A function to transform incoming values with. 27182 * 27183 * @internal 27184 */ 27185 function MotionValue(init) { 27186 var _this = this; 27187 /** 27188 * Duration, in milliseconds, since last updating frame. 27189 * 27190 * @internal 27191 */ 27192 this.timeDelta = 0; 27193 /** 27194 * Timestamp of the last time this `MotionValue` was updated. 27195 * 27196 * @internal 27197 */ 27198 this.lastUpdated = 0; 27199 /** 27200 * Functions to notify when the `MotionValue` updates. 27201 * 27202 * @internal 27203 */ 27204 this.updateSubscribers = new SubscriptionManager(); 27205 /** 27206 * Functions to notify when the velocity updates. 27207 * 27208 * @internal 27209 */ 27210 this.velocityUpdateSubscribers = new SubscriptionManager(); 27211 /** 27212 * Functions to notify when the `MotionValue` updates and `render` is set to `true`. 27213 * 27214 * @internal 27215 */ 27216 this.renderSubscribers = new SubscriptionManager(); 27217 /** 27218 * Tracks whether this value can output a velocity. Currently this is only true 27219 * if the value is numerical, but we might be able to widen the scope here and support 27220 * other value types. 27221 * 27222 * @internal 27223 */ 27224 this.canTrackVelocity = false; 27225 this.updateAndNotify = function (v, render) { 27226 if (render === void 0) { render = true; } 27227 _this.prev = _this.current; 27228 _this.current = v; 27229 // Update timestamp 27230 var _a = getFrameData(), delta = _a.delta, timestamp = _a.timestamp; 27231 if (_this.lastUpdated !== timestamp) { 27232 _this.timeDelta = delta; 27233 _this.lastUpdated = timestamp; 27234 es.postRender(_this.scheduleVelocityCheck); 27235 } 27236 // Update update subscribers 27237 if (_this.prev !== _this.current) { 27238 _this.updateSubscribers.notify(_this.current); 27239 } 27240 // Update velocity subscribers 27241 if (_this.velocityUpdateSubscribers.getSize()) { 27242 _this.velocityUpdateSubscribers.notify(_this.getVelocity()); 27243 } 27244 // Update render subscribers 27245 if (render) { 27246 _this.renderSubscribers.notify(_this.current); 27247 } 27248 }; 27249 /** 27250 * Schedule a velocity check for the next frame. 27251 * 27252 * This is an instanced and bound function to prevent generating a new 27253 * function once per frame. 27254 * 27255 * @internal 27256 */ 27257 this.scheduleVelocityCheck = function () { return es.postRender(_this.velocityCheck); }; 27258 /** 27259 * Updates `prev` with `current` if the value hasn't been updated this frame. 27260 * This ensures velocity calculations return `0`. 27261 * 27262 * This is an instanced and bound function to prevent generating a new 27263 * function once per frame. 27264 * 27265 * @internal 27266 */ 27267 this.velocityCheck = function (_a) { 27268 var timestamp = _a.timestamp; 27269 if (timestamp !== _this.lastUpdated) { 27270 _this.prev = _this.current; 27271 _this.velocityUpdateSubscribers.notify(_this.getVelocity()); 27272 } 27273 }; 27274 this.hasAnimated = false; 27275 this.prev = this.current = init; 27276 this.canTrackVelocity = isFloat(this.current); 27277 } 27278 /** 27279 * Adds a function that will be notified when the `MotionValue` is updated. 27280 * 27281 * It returns a function that, when called, will cancel the subscription. 27282 * 27283 * When calling `onChange` inside a React component, it should be wrapped with the 27284 * `useEffect` hook. As it returns an unsubscribe function, this should be returned 27285 * from the `useEffect` function to ensure you don't add duplicate subscribers.. 27286 * 27287 * ```jsx 27288 * export const MyComponent = () => { 27289 * const x = useMotionValue(0) 27290 * const y = useMotionValue(0) 27291 * const opacity = useMotionValue(1) 27292 * 27293 * useEffect(() => { 27294 * function updateOpacity() { 27295 * const maxXY = Math.max(x.get(), y.get()) 27296 * const newOpacity = transform(maxXY, [0, 100], [1, 0]) 27297 * opacity.set(newOpacity) 27298 * } 27299 * 27300 * const unsubscribeX = x.onChange(updateOpacity) 27301 * const unsubscribeY = y.onChange(updateOpacity) 27302 * 27303 * return () => { 27304 * unsubscribeX() 27305 * unsubscribeY() 27306 * } 27307 * }, []) 27308 * 27309 * return <motion.div style={{ x }} /> 27310 * } 27311 * ``` 27312 * 27313 * @internalremarks 27314 * 27315 * We could look into a `useOnChange` hook if the above lifecycle management proves confusing. 27316 * 27317 * ```jsx 27318 * useOnChange(x, () => {}) 27319 * ``` 27320 * 27321 * @param subscriber - A function that receives the latest value. 27322 * @returns A function that, when called, will cancel this subscription. 27323 * 27324 * @public 27325 */ 27326 MotionValue.prototype.onChange = function (subscription) { 27327 return this.updateSubscribers.add(subscription); 27328 }; 27329 MotionValue.prototype.clearListeners = function () { 27330 this.updateSubscribers.clear(); 27331 }; 27332 /** 27333 * Adds a function that will be notified when the `MotionValue` requests a render. 27334 * 27335 * @param subscriber - A function that's provided the latest value. 27336 * @returns A function that, when called, will cancel this subscription. 27337 * 27338 * @internal 27339 */ 27340 MotionValue.prototype.onRenderRequest = function (subscription) { 27341 // Render immediately 27342 subscription(this.get()); 27343 return this.renderSubscribers.add(subscription); 27344 }; 27345 /** 27346 * Attaches a passive effect to the `MotionValue`. 27347 * 27348 * @internal 27349 */ 27350 MotionValue.prototype.attach = function (passiveEffect) { 27351 this.passiveEffect = passiveEffect; 27352 }; 27353 /** 27354 * Sets the state of the `MotionValue`. 27355 * 27356 * @remarks 27357 * 27358 * ```jsx 27359 * const x = useMotionValue(0) 27360 * x.set(10) 27361 * ``` 27362 * 27363 * @param latest - Latest value to set. 27364 * @param render - Whether to notify render subscribers. Defaults to `true` 27365 * 27366 * @public 27367 */ 27368 MotionValue.prototype.set = function (v, render) { 27369 if (render === void 0) { render = true; } 27370 if (!render || !this.passiveEffect) { 27371 this.updateAndNotify(v, render); 27372 } 27373 else { 27374 this.passiveEffect(v, this.updateAndNotify); 27375 } 27376 }; 27377 /** 27378 * Returns the latest state of `MotionValue` 27379 * 27380 * @returns - The latest state of `MotionValue` 27381 * 27382 * @public 27383 */ 27384 MotionValue.prototype.get = function () { 27385 return this.current; 27386 }; 27387 /** 27388 * @public 27389 */ 27390 MotionValue.prototype.getPrevious = function () { 27391 return this.prev; 27392 }; 27393 /** 27394 * Returns the latest velocity of `MotionValue` 27395 * 27396 * @returns - The latest velocity of `MotionValue`. Returns `0` if the state is non-numerical. 27397 * 27398 * @public 27399 */ 27400 MotionValue.prototype.getVelocity = function () { 27401 // This could be isFloat(this.prev) && isFloat(this.current), but that would be wasteful 27402 return this.canTrackVelocity 27403 ? // These casts could be avoided if parseFloat would be typed better 27404 velocityPerSecond(parseFloat(this.current) - 27405 parseFloat(this.prev), this.timeDelta) 27406 : 0; 27407 }; 27408 /** 27409 * Registers a new animation to control this `MotionValue`. Only one 27410 * animation can drive a `MotionValue` at one time. 27411 * 27412 * ```jsx 27413 * value.start() 27414 * ``` 27415 * 27416 * @param animation - A function that starts the provided animation 27417 * 27418 * @internal 27419 */ 27420 MotionValue.prototype.start = function (animation) { 27421 var _this = this; 27422 this.stop(); 27423 return new Promise(function (resolve) { 27424 _this.hasAnimated = true; 27425 _this.stopAnimation = animation(resolve); 27426 }).then(function () { return _this.clearAnimation(); }); 27427 }; 27428 /** 27429 * Stop the currently active animation. 27430 * 27431 * @public 27432 */ 27433 MotionValue.prototype.stop = function () { 27434 if (this.stopAnimation) 27435 this.stopAnimation(); 27436 this.clearAnimation(); 27437 }; 27438 /** 27439 * Returns `true` if this value is currently animating. 27440 * 27441 * @public 27442 */ 27443 MotionValue.prototype.isAnimating = function () { 27444 return !!this.stopAnimation; 27445 }; 27446 MotionValue.prototype.clearAnimation = function () { 27447 this.stopAnimation = null; 27448 }; 27449 /** 27450 * Destroy and clean up subscribers to this `MotionValue`. 27451 * 27452 * The `MotionValue` hooks like `useMotionValue` and `useTransform` automatically 27453 * handle the lifecycle of the returned `MotionValue`, so this method is only necessary if you've manually 27454 * created a `MotionValue` via the `motionValue` function. 27455 * 27456 * @public 27457 */ 27458 MotionValue.prototype.destroy = function () { 27459 this.updateSubscribers.clear(); 27460 this.renderSubscribers.clear(); 27461 this.stop(); 27462 }; 27463 return MotionValue; 27464 }()); 27465 /** 27466 * @internal 27467 */ 27468 function motionValue(init) { 27469 return new MotionValue(init); 27470 } 27471 27472 27473 27474 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/value/utils/is-motion-value.mjs 27475 var isMotionValue = function (value) { 27476 return Boolean(value !== null && typeof value === "object" && value.getVelocity); 27477 }; 27478 27479 27480 27481 ;// CONCATENATED MODULE: ./node_modules/hey-listen/dist/hey-listen.es.js 27482 var warning = function () { }; 27483 var invariant = function () { }; 27484 if (false) {} 27485 27486 27487 27488 ;// CONCATENATED MODULE: ./node_modules/popmotion/dist/es/utils/clamp.mjs 27489 const clamp = (min, max, v) => Math.min(Math.max(v, min), max); 27490 27491 27492 27493 ;// CONCATENATED MODULE: ./node_modules/popmotion/dist/es/animations/utils/find-spring.mjs 27494 27495 27496 27497 const safeMin = 0.001; 27498 const minDuration = 0.01; 27499 const maxDuration = 10.0; 27500 const minDamping = 0.05; 27501 const maxDamping = 1; 27502 function findSpring({ duration = 800, bounce = 0.25, velocity = 0, mass = 1, }) { 27503 let envelope; 27504 let derivative; 27505 warning(duration <= maxDuration * 1000, "Spring duration must be 10 seconds or less"); 27506 let dampingRatio = 1 - bounce; 27507 dampingRatio = clamp(minDamping, maxDamping, dampingRatio); 27508 duration = clamp(minDuration, maxDuration, duration / 1000); 27509 if (dampingRatio < 1) { 27510 envelope = (undampedFreq) => { 27511 const exponentialDecay = undampedFreq * dampingRatio; 27512 const delta = exponentialDecay * duration; 27513 const a = exponentialDecay - velocity; 27514 const b = calcAngularFreq(undampedFreq, dampingRatio); 27515 const c = Math.exp(-delta); 27516 return safeMin - (a / b) * c; 27517 }; 27518 derivative = (undampedFreq) => { 27519 const exponentialDecay = undampedFreq * dampingRatio; 27520 const delta = exponentialDecay * duration; 27521 const d = delta * velocity + velocity; 27522 const e = Math.pow(dampingRatio, 2) * Math.pow(undampedFreq, 2) * duration; 27523 const f = Math.exp(-delta); 27524 const g = calcAngularFreq(Math.pow(undampedFreq, 2), dampingRatio); 27525 const factor = -envelope(undampedFreq) + safeMin > 0 ? -1 : 1; 27526 return (factor * ((d - e) * f)) / g; 27527 }; 27528 } 27529 else { 27530 envelope = (undampedFreq) => { 27531 const a = Math.exp(-undampedFreq * duration); 27532 const b = (undampedFreq - velocity) * duration + 1; 27533 return -safeMin + a * b; 27534 }; 27535 derivative = (undampedFreq) => { 27536 const a = Math.exp(-undampedFreq * duration); 27537 const b = (velocity - undampedFreq) * (duration * duration); 27538 return a * b; 27539 }; 27540 } 27541 const initialGuess = 5 / duration; 27542 const undampedFreq = approximateRoot(envelope, derivative, initialGuess); 27543 duration = duration * 1000; 27544 if (isNaN(undampedFreq)) { 27545 return { 27546 stiffness: 100, 27547 damping: 10, 27548 duration, 27549 }; 27550 } 27551 else { 27552 const stiffness = Math.pow(undampedFreq, 2) * mass; 27553 return { 27554 stiffness, 27555 damping: dampingRatio * 2 * Math.sqrt(mass * stiffness), 27556 duration, 27557 }; 27558 } 27559 } 27560 const rootIterations = 12; 27561 function approximateRoot(envelope, derivative, initialGuess) { 27562 let result = initialGuess; 27563 for (let i = 1; i < rootIterations; i++) { 27564 result = result - envelope(result) / derivative(result); 27565 } 27566 return result; 27567 } 27568 function calcAngularFreq(undampedFreq, dampingRatio) { 27569 return undampedFreq * Math.sqrt(1 - dampingRatio * dampingRatio); 27570 } 27571 27572 27573 27574 ;// CONCATENATED MODULE: ./node_modules/popmotion/dist/es/animations/generators/spring.mjs 27575 27576 27577 27578 const durationKeys = ["duration", "bounce"]; 27579 const physicsKeys = ["stiffness", "damping", "mass"]; 27580 function isSpringType(options, keys) { 27581 return keys.some((key) => options[key] !== undefined); 27582 } 27583 function getSpringOptions(options) { 27584 let springOptions = Object.assign({ velocity: 0.0, stiffness: 100, damping: 10, mass: 1.0, isResolvedFromDuration: false }, options); 27585 if (!isSpringType(options, physicsKeys) && 27586 isSpringType(options, durationKeys)) { 27587 const derived = findSpring(options); 27588 springOptions = Object.assign(Object.assign(Object.assign({}, springOptions), derived), { velocity: 0.0, mass: 1.0 }); 27589 springOptions.isResolvedFromDuration = true; 27590 } 27591 return springOptions; 27592 } 27593 function spring(_a) { 27594 var { from = 0.0, to = 1.0, restSpeed = 2, restDelta } = _a, options = __rest(_a, ["from", "to", "restSpeed", "restDelta"]); 27595 const state = { done: false, value: from }; 27596 let { stiffness, damping, mass, velocity, duration, isResolvedFromDuration, } = getSpringOptions(options); 27597 let resolveSpring = zero; 27598 let resolveVelocity = zero; 27599 function createSpring() { 27600 const initialVelocity = velocity ? -(velocity / 1000) : 0.0; 27601 const initialDelta = to - from; 27602 const dampingRatio = damping / (2 * Math.sqrt(stiffness * mass)); 27603 const undampedAngularFreq = Math.sqrt(stiffness / mass) / 1000; 27604 if (restDelta === undefined) { 27605 restDelta = Math.min(Math.abs(to - from) / 100, 0.4); 27606 } 27607 if (dampingRatio < 1) { 27608 const angularFreq = calcAngularFreq(undampedAngularFreq, dampingRatio); 27609 resolveSpring = (t) => { 27610 const envelope = Math.exp(-dampingRatio * undampedAngularFreq * t); 27611 return (to - 27612 envelope * 27613 (((initialVelocity + 27614 dampingRatio * undampedAngularFreq * initialDelta) / 27615 angularFreq) * 27616 Math.sin(angularFreq * t) + 27617 initialDelta * Math.cos(angularFreq * t))); 27618 }; 27619 resolveVelocity = (t) => { 27620 const envelope = Math.exp(-dampingRatio * undampedAngularFreq * t); 27621 return (dampingRatio * 27622 undampedAngularFreq * 27623 envelope * 27624 ((Math.sin(angularFreq * t) * 27625 (initialVelocity + 27626 dampingRatio * 27627 undampedAngularFreq * 27628 initialDelta)) / 27629 angularFreq + 27630 initialDelta * Math.cos(angularFreq * t)) - 27631 envelope * 27632 (Math.cos(angularFreq * t) * 27633 (initialVelocity + 27634 dampingRatio * 27635 undampedAngularFreq * 27636 initialDelta) - 27637 angularFreq * 27638 initialDelta * 27639 Math.sin(angularFreq * t))); 27640 }; 27641 } 27642 else if (dampingRatio === 1) { 27643 resolveSpring = (t) => to - 27644 Math.exp(-undampedAngularFreq * t) * 27645 (initialDelta + 27646 (initialVelocity + undampedAngularFreq * initialDelta) * 27647 t); 27648 } 27649 else { 27650 const dampedAngularFreq = undampedAngularFreq * Math.sqrt(dampingRatio * dampingRatio - 1); 27651 resolveSpring = (t) => { 27652 const envelope = Math.exp(-dampingRatio * undampedAngularFreq * t); 27653 const freqForT = Math.min(dampedAngularFreq * t, 300); 27654 return (to - 27655 (envelope * 27656 ((initialVelocity + 27657 dampingRatio * undampedAngularFreq * initialDelta) * 27658 Math.sinh(freqForT) + 27659 dampedAngularFreq * 27660 initialDelta * 27661 Math.cosh(freqForT))) / 27662 dampedAngularFreq); 27663 }; 27664 } 27665 } 27666 createSpring(); 27667 return { 27668 next: (t) => { 27669 const current = resolveSpring(t); 27670 if (!isResolvedFromDuration) { 27671 const currentVelocity = resolveVelocity(t) * 1000; 27672 const isBelowVelocityThreshold = Math.abs(currentVelocity) <= restSpeed; 27673 const isBelowDisplacementThreshold = Math.abs(to - current) <= restDelta; 27674 state.done = 27675 isBelowVelocityThreshold && isBelowDisplacementThreshold; 27676 } 27677 else { 27678 state.done = t >= duration; 27679 } 27680 state.value = state.done ? to : current; 27681 return state; 27682 }, 27683 flipTarget: () => { 27684 velocity = -velocity; 27685 [from, to] = [to, from]; 27686 createSpring(); 27687 }, 27688 }; 27689 } 27690 spring.needsInterpolation = (a, b) => typeof a === "string" || typeof b === "string"; 27691 const zero = (_t) => 0; 27692 27693 27694 27695 ;// CONCATENATED MODULE: ./node_modules/popmotion/dist/es/utils/progress.mjs 27696 const progress = (from, to, value) => { 27697 const toFromDifference = to - from; 27698 return toFromDifference === 0 ? 1 : (value - from) / toFromDifference; 27699 }; 27700 27701 27702 27703 ;// CONCATENATED MODULE: ./node_modules/style-value-types/dist/es/utils.mjs 27704 const utils_clamp = (min, max) => (v) => Math.max(Math.min(v, max), min); 27705 const sanitize = (v) => (v % 1 ? Number(v.toFixed(5)) : v); 27706 const floatRegex = /(-)?([\d]*\.?[\d])+/g; 27707 const colorRegex = /(#[0-9a-f]{6}|#[0-9a-f]{3}|#(?:[0-9a-f]{2}){2,4}|(rgb|hsl)a?\((-?[\d\.]+%?[,\s]+){2,3}\s*\/*\s*[\d\.]+%?\))/gi; 27708 const singleColorRegex = /^(#[0-9a-f]{3}|#(?:[0-9a-f]{2}){2,4}|(rgb|hsl)a?\((-?[\d\.]+%?[,\s]+){2,3}\s*\/*\s*[\d\.]+%?\))$/i; 27709 function isString(v) { 27710 return typeof v === 'string'; 27711 } 27712 27713 27714 27715 ;// CONCATENATED MODULE: ./node_modules/style-value-types/dist/es/numbers/index.mjs 27716 27717 27718 const number = { 27719 test: (v) => typeof v === 'number', 27720 parse: parseFloat, 27721 transform: (v) => v, 27722 }; 27723 const alpha = Object.assign(Object.assign({}, number), { transform: utils_clamp(0, 1) }); 27724 const scale = Object.assign(Object.assign({}, number), { default: 1 }); 27725 27726 27727 27728 ;// CONCATENATED MODULE: ./node_modules/style-value-types/dist/es/color/utils.mjs 27729 27730 27731 const isColorString = (type, testProp) => (v) => { 27732 return Boolean((isString(v) && singleColorRegex.test(v) && v.startsWith(type)) || 27733 (testProp && Object.prototype.hasOwnProperty.call(v, testProp))); 27734 }; 27735 const splitColor = (aName, bName, cName) => (v) => { 27736 if (!isString(v)) 27737 return v; 27738 const [a, b, c, alpha] = v.match(floatRegex); 27739 return { 27740 [aName]: parseFloat(a), 27741 [bName]: parseFloat(b), 27742 [cName]: parseFloat(c), 27743 alpha: alpha !== undefined ? parseFloat(alpha) : 1, 27744 }; 27745 }; 27746 27747 27748 27749 ;// CONCATENATED MODULE: ./node_modules/style-value-types/dist/es/color/rgba.mjs 27750 27751 27752 27753 27754 const clampRgbUnit = utils_clamp(0, 255); 27755 const rgbUnit = Object.assign(Object.assign({}, number), { transform: (v) => Math.round(clampRgbUnit(v)) }); 27756 const rgba_rgba = { 27757 test: isColorString('rgb', 'red'), 27758 parse: splitColor('red', 'green', 'blue'), 27759 transform: ({ red, green, blue, alpha: alpha$1 = 1 }) => 'rgba(' + 27760 rgbUnit.transform(red) + 27761 ', ' + 27762 rgbUnit.transform(green) + 27763 ', ' + 27764 rgbUnit.transform(blue) + 27765 ', ' + 27766 sanitize(alpha.transform(alpha$1)) + 27767 ')', 27768 }; 27769 27770 27771 27772 ;// CONCATENATED MODULE: ./node_modules/style-value-types/dist/es/color/hex.mjs 27773 27774 27775 27776 function parseHex(v) { 27777 let r = ''; 27778 let g = ''; 27779 let b = ''; 27780 let a = ''; 27781 if (v.length > 5) { 27782 r = v.substr(1, 2); 27783 g = v.substr(3, 2); 27784 b = v.substr(5, 2); 27785 a = v.substr(7, 2); 27786 } 27787 else { 27788 r = v.substr(1, 1); 27789 g = v.substr(2, 1); 27790 b = v.substr(3, 1); 27791 a = v.substr(4, 1); 27792 r += r; 27793 g += g; 27794 b += b; 27795 a += a; 27796 } 27797 return { 27798 red: parseInt(r, 16), 27799 green: parseInt(g, 16), 27800 blue: parseInt(b, 16), 27801 alpha: a ? parseInt(a, 16) / 255 : 1, 27802 }; 27803 } 27804 const hex = { 27805 test: isColorString('#'), 27806 parse: parseHex, 27807 transform: rgba_rgba.transform, 27808 }; 27809 27810 27811 27812 ;// CONCATENATED MODULE: ./node_modules/style-value-types/dist/es/numbers/units.mjs 27813 27814 27815 const createUnitType = (unit) => ({ 27816 test: (v) => isString(v) && v.endsWith(unit) && v.split(' ').length === 1, 27817 parse: parseFloat, 27818 transform: (v) => `${v}${unit}`, 27819 }); 27820 const degrees = createUnitType('deg'); 27821 const percent = createUnitType('%'); 27822 const px = createUnitType('px'); 27823 const vh = createUnitType('vh'); 27824 const vw = createUnitType('vw'); 27825 const progressPercentage = Object.assign(Object.assign({}, percent), { parse: (v) => percent.parse(v) / 100, transform: (v) => percent.transform(v * 100) }); 27826 27827 27828 27829 ;// CONCATENATED MODULE: ./node_modules/style-value-types/dist/es/color/hsla.mjs 27830 27831 27832 27833 27834 27835 const hsla = { 27836 test: isColorString('hsl', 'hue'), 27837 parse: splitColor('hue', 'saturation', 'lightness'), 27838 transform: ({ hue, saturation, lightness, alpha: alpha$1 = 1 }) => { 27839 return ('hsla(' + 27840 Math.round(hue) + 27841 ', ' + 27842 percent.transform(sanitize(saturation)) + 27843 ', ' + 27844 percent.transform(sanitize(lightness)) + 27845 ', ' + 27846 sanitize(alpha.transform(alpha$1)) + 27847 ')'); 27848 }, 27849 }; 27850 27851 27852 27853 ;// CONCATENATED MODULE: ./node_modules/popmotion/dist/es/utils/hsla-to-rgba.mjs 27854 function hueToRgb(p, q, t) { 27855 if (t < 0) 27856 t += 1; 27857 if (t > 1) 27858 t -= 1; 27859 if (t < 1 / 6) 27860 return p + (q - p) * 6 * t; 27861 if (t < 1 / 2) 27862 return q; 27863 if (t < 2 / 3) 27864 return p + (q - p) * (2 / 3 - t) * 6; 27865 return p; 27866 } 27867 function hslaToRgba({ hue, saturation, lightness, alpha }) { 27868 hue /= 360; 27869 saturation /= 100; 27870 lightness /= 100; 27871 let red = 0; 27872 let green = 0; 27873 let blue = 0; 27874 if (!saturation) { 27875 red = green = blue = lightness; 27876 } 27877 else { 27878 const q = lightness < 0.5 27879 ? lightness * (1 + saturation) 27880 : lightness + saturation - lightness * saturation; 27881 const p = 2 * lightness - q; 27882 red = hueToRgb(p, q, hue + 1 / 3); 27883 green = hueToRgb(p, q, hue); 27884 blue = hueToRgb(p, q, hue - 1 / 3); 27885 } 27886 return { 27887 red: Math.round(red * 255), 27888 green: Math.round(green * 255), 27889 blue: Math.round(blue * 255), 27890 alpha, 27891 }; 27892 } 27893 27894 27895 27896 ;// CONCATENATED MODULE: ./node_modules/popmotion/dist/es/utils/mix-color.mjs 27897 27898 27899 27900 27901 27902 const mixLinearColor = (from, to, v) => { 27903 const fromExpo = from * from; 27904 const toExpo = to * to; 27905 return Math.sqrt(Math.max(0, v * (toExpo - fromExpo) + fromExpo)); 27906 }; 27907 const colorTypes = [hex, rgba_rgba, hsla]; 27908 const getColorType = (v) => colorTypes.find((type) => type.test(v)); 27909 const notAnimatable = (color) => `'${color}' is not an animatable color. Use the equivalent color code instead.`; 27910 const mixColor = (from, to) => { 27911 let fromColorType = getColorType(from); 27912 let toColorType = getColorType(to); 27913 invariant(!!fromColorType, notAnimatable(from)); 27914 invariant(!!toColorType, notAnimatable(to)); 27915 let fromColor = fromColorType.parse(from); 27916 let toColor = toColorType.parse(to); 27917 if (fromColorType === hsla) { 27918 fromColor = hslaToRgba(fromColor); 27919 fromColorType = rgba_rgba; 27920 } 27921 if (toColorType === hsla) { 27922 toColor = hslaToRgba(toColor); 27923 toColorType = rgba_rgba; 27924 } 27925 const blended = Object.assign({}, fromColor); 27926 return (v) => { 27927 for (const key in blended) { 27928 if (key !== "alpha") { 27929 blended[key] = mixLinearColor(fromColor[key], toColor[key], v); 27930 } 27931 } 27932 blended.alpha = mix(fromColor.alpha, toColor.alpha, v); 27933 return fromColorType.transform(blended); 27934 }; 27935 }; 27936 27937 27938 27939 ;// CONCATENATED MODULE: ./node_modules/style-value-types/dist/es/color/index.mjs 27940 27941 27942 27943 27944 27945 const color = { 27946 test: (v) => rgba_rgba.test(v) || hex.test(v) || hsla.test(v), 27947 parse: (v) => { 27948 if (rgba_rgba.test(v)) { 27949 return rgba_rgba.parse(v); 27950 } 27951 else if (hsla.test(v)) { 27952 return hsla.parse(v); 27953 } 27954 else { 27955 return hex.parse(v); 27956 } 27957 }, 27958 transform: (v) => { 27959 return isString(v) 27960 ? v 27961 : v.hasOwnProperty('red') 27962 ? rgba_rgba.transform(v) 27963 : hsla.transform(v); 27964 }, 27965 }; 27966 27967 27968 27969 ;// CONCATENATED MODULE: ./node_modules/style-value-types/dist/es/complex/index.mjs 27970 27971 27972 27973 27974 const colorToken = '${c}'; 27975 const numberToken = '${n}'; 27976 function test(v) { 27977 var _a, _b, _c, _d; 27978 return (isNaN(v) && 27979 isString(v) && 27980 ((_b = (_a = v.match(floatRegex)) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) + ((_d = (_c = v.match(colorRegex)) === null || _c === void 0 ? void 0 : _c.length) !== null && _d !== void 0 ? _d : 0) > 0); 27981 } 27982 function analyse(v) { 27983 if (typeof v === 'number') 27984 v = `${v}`; 27985 const values = []; 27986 let numColors = 0; 27987 const colors = v.match(colorRegex); 27988 if (colors) { 27989 numColors = colors.length; 27990 v = v.replace(colorRegex, colorToken); 27991 values.push(...colors.map(color.parse)); 27992 } 27993 const numbers = v.match(floatRegex); 27994 if (numbers) { 27995 v = v.replace(floatRegex, numberToken); 27996 values.push(...numbers.map(number.parse)); 27997 } 27998 return { values, numColors, tokenised: v }; 27999 } 28000 function complex_parse(v) { 28001 return analyse(v).values; 28002 } 28003 function createTransformer(v) { 28004 const { values, numColors, tokenised } = analyse(v); 28005 const numValues = values.length; 28006 return (v) => { 28007 let output = tokenised; 28008 for (let i = 0; i < numValues; i++) { 28009 output = output.replace(i < numColors ? colorToken : numberToken, i < numColors ? color.transform(v[i]) : sanitize(v[i])); 28010 } 28011 return output; 28012 }; 28013 } 28014 const convertNumbersToZero = (v) => typeof v === 'number' ? 0 : v; 28015 function getAnimatableNone(v) { 28016 const parsed = complex_parse(v); 28017 const transformer = createTransformer(v); 28018 return transformer(parsed.map(convertNumbersToZero)); 28019 } 28020 const complex = { test, parse: complex_parse, createTransformer, getAnimatableNone }; 28021 28022 28023 28024 ;// CONCATENATED MODULE: ./node_modules/popmotion/dist/es/utils/inc.mjs 28025 const zeroPoint = { 28026 x: 0, 28027 y: 0, 28028 z: 0 28029 }; 28030 const isNum = (v) => typeof v === 'number'; 28031 28032 28033 28034 ;// CONCATENATED MODULE: ./node_modules/popmotion/dist/es/utils/pipe.mjs 28035 const combineFunctions = (a, b) => (v) => b(a(v)); 28036 const pipe = (...transformers) => transformers.reduce(combineFunctions); 28037 28038 28039 28040 ;// CONCATENATED MODULE: ./node_modules/popmotion/dist/es/utils/mix-complex.mjs 28041 28042 28043 28044 28045 28046 28047 28048 function getMixer(origin, target) { 28049 if (isNum(origin)) { 28050 return (v) => mix(origin, target, v); 28051 } 28052 else if (color.test(origin)) { 28053 return mixColor(origin, target); 28054 } 28055 else { 28056 return mixComplex(origin, target); 28057 } 28058 } 28059 const mixArray = (from, to) => { 28060 const output = [...from]; 28061 const numValues = output.length; 28062 const blendValue = from.map((fromThis, i) => getMixer(fromThis, to[i])); 28063 return (v) => { 28064 for (let i = 0; i < numValues; i++) { 28065 output[i] = blendValue[i](v); 28066 } 28067 return output; 28068 }; 28069 }; 28070 const mixObject = (origin, target) => { 28071 const output = Object.assign(Object.assign({}, origin), target); 28072 const blendValue = {}; 28073 for (const key in output) { 28074 if (origin[key] !== undefined && target[key] !== undefined) { 28075 blendValue[key] = getMixer(origin[key], target[key]); 28076 } 28077 } 28078 return (v) => { 28079 for (const key in blendValue) { 28080 output[key] = blendValue[key](v); 28081 } 28082 return output; 28083 }; 28084 }; 28085 function mix_complex_analyse(value) { 28086 const parsed = complex.parse(value); 28087 const numValues = parsed.length; 28088 let numNumbers = 0; 28089 let numRGB = 0; 28090 let numHSL = 0; 28091 for (let i = 0; i < numValues; i++) { 28092 if (numNumbers || typeof parsed[i] === "number") { 28093 numNumbers++; 28094 } 28095 else { 28096 if (parsed[i].hue !== undefined) { 28097 numHSL++; 28098 } 28099 else { 28100 numRGB++; 28101 } 28102 } 28103 } 28104 return { parsed, numNumbers, numRGB, numHSL }; 28105 } 28106 const mixComplex = (origin, target) => { 28107 const template = complex.createTransformer(target); 28108 const originStats = mix_complex_analyse(origin); 28109 const targetStats = mix_complex_analyse(target); 28110 const canInterpolate = originStats.numHSL === targetStats.numHSL && 28111 originStats.numRGB === targetStats.numRGB && 28112 originStats.numNumbers >= targetStats.numNumbers; 28113 if (canInterpolate) { 28114 return pipe(mixArray(originStats.parsed, targetStats.parsed), template); 28115 } 28116 else { 28117 warning(true, `Complex values '${origin}' and '${target}' too different to mix. Ensure all colors are of the same type, and that each contains the same quantity of number and color values. Falling back to instant transition.`); 28118 return (p) => `${p > 0 ? target : origin}`; 28119 } 28120 }; 28121 28122 28123 28124 ;// CONCATENATED MODULE: ./node_modules/popmotion/dist/es/utils/interpolate.mjs 28125 28126 28127 28128 28129 28130 28131 28132 28133 28134 const mixNumber = (from, to) => (p) => mix(from, to, p); 28135 function detectMixerFactory(v) { 28136 if (typeof v === 'number') { 28137 return mixNumber; 28138 } 28139 else if (typeof v === 'string') { 28140 if (color.test(v)) { 28141 return mixColor; 28142 } 28143 else { 28144 return mixComplex; 28145 } 28146 } 28147 else if (Array.isArray(v)) { 28148 return mixArray; 28149 } 28150 else if (typeof v === 'object') { 28151 return mixObject; 28152 } 28153 } 28154 function createMixers(output, ease, customMixer) { 28155 const mixers = []; 28156 const mixerFactory = customMixer || detectMixerFactory(output[0]); 28157 const numMixers = output.length - 1; 28158 for (let i = 0; i < numMixers; i++) { 28159 let mixer = mixerFactory(output[i], output[i + 1]); 28160 if (ease) { 28161 const easingFunction = Array.isArray(ease) ? ease[i] : ease; 28162 mixer = pipe(easingFunction, mixer); 28163 } 28164 mixers.push(mixer); 28165 } 28166 return mixers; 28167 } 28168 function fastInterpolate([from, to], [mixer]) { 28169 return (v) => mixer(progress(from, to, v)); 28170 } 28171 function slowInterpolate(input, mixers) { 28172 const inputLength = input.length; 28173 const lastInputIndex = inputLength - 1; 28174 return (v) => { 28175 let mixerIndex = 0; 28176 let foundMixerIndex = false; 28177 if (v <= input[0]) { 28178 foundMixerIndex = true; 28179 } 28180 else if (v >= input[lastInputIndex]) { 28181 mixerIndex = lastInputIndex - 1; 28182 foundMixerIndex = true; 28183 } 28184 if (!foundMixerIndex) { 28185 let i = 1; 28186 for (; i < inputLength; i++) { 28187 if (input[i] > v || i === lastInputIndex) { 28188 break; 28189 } 28190 } 28191 mixerIndex = i - 1; 28192 } 28193 const progressInRange = progress(input[mixerIndex], input[mixerIndex + 1], v); 28194 return mixers[mixerIndex](progressInRange); 28195 }; 28196 } 28197 function interpolate(input, output, { clamp: isClamp = true, ease, mixer } = {}) { 28198 const inputLength = input.length; 28199 invariant(inputLength === output.length, 'Both input and output ranges must be the same length'); 28200 invariant(!ease || !Array.isArray(ease) || ease.length === inputLength - 1, 'Array of easing functions must be of length `input.length - 1`, as it applies to the transitions **between** the defined values.'); 28201 if (input[0] > input[inputLength - 1]) { 28202 input = [].concat(input); 28203 output = [].concat(output); 28204 input.reverse(); 28205 output.reverse(); 28206 } 28207 const mixers = createMixers(output, ease, mixer); 28208 const interpolator = inputLength === 2 28209 ? fastInterpolate(input, mixers) 28210 : slowInterpolate(input, mixers); 28211 return isClamp 28212 ? (v) => interpolator(clamp(input[0], input[inputLength - 1], v)) 28213 : interpolator; 28214 } 28215 28216 28217 28218 ;// CONCATENATED MODULE: ./node_modules/popmotion/dist/es/easing/utils.mjs 28219 const reverseEasing = easing => p => 1 - easing(1 - p); 28220 const mirrorEasing = easing => p => p <= 0.5 ? easing(2 * p) / 2 : (2 - easing(2 * (1 - p))) / 2; 28221 const createExpoIn = (power) => p => Math.pow(p, power); 28222 const createBackIn = (power) => p => p * p * ((power + 1) * p - power); 28223 const createAnticipate = (power) => { 28224 const backEasing = createBackIn(power); 28225 return p => (p *= 2) < 1 28226 ? 0.5 * backEasing(p) 28227 : 0.5 * (2 - Math.pow(2, -10 * (p - 1))); 28228 }; 28229 28230 28231 28232 ;// CONCATENATED MODULE: ./node_modules/popmotion/dist/es/easing/index.mjs 28233 28234 28235 const DEFAULT_OVERSHOOT_STRENGTH = 1.525; 28236 const BOUNCE_FIRST_THRESHOLD = 4.0 / 11.0; 28237 const BOUNCE_SECOND_THRESHOLD = 8.0 / 11.0; 28238 const BOUNCE_THIRD_THRESHOLD = 9.0 / 10.0; 28239 const linear = p => p; 28240 const easeIn = createExpoIn(2); 28241 const easeOut = reverseEasing(easeIn); 28242 const easeInOut = mirrorEasing(easeIn); 28243 const circIn = p => 1 - Math.sin(Math.acos(p)); 28244 const circOut = reverseEasing(circIn); 28245 const circInOut = mirrorEasing(circOut); 28246 const backIn = createBackIn(DEFAULT_OVERSHOOT_STRENGTH); 28247 const backOut = reverseEasing(backIn); 28248 const backInOut = mirrorEasing(backIn); 28249 const anticipate = createAnticipate(DEFAULT_OVERSHOOT_STRENGTH); 28250 const ca = 4356.0 / 361.0; 28251 const cb = 35442.0 / 1805.0; 28252 const cc = 16061.0 / 1805.0; 28253 const bounceOut = (p) => { 28254 if (p === 1 || p === 0) 28255 return p; 28256 const p2 = p * p; 28257 return p < BOUNCE_FIRST_THRESHOLD 28258 ? 7.5625 * p2 28259 : p < BOUNCE_SECOND_THRESHOLD 28260 ? 9.075 * p2 - 9.9 * p + 3.4 28261 : p < BOUNCE_THIRD_THRESHOLD 28262 ? ca * p2 - cb * p + cc 28263 : 10.8 * p * p - 20.52 * p + 10.72; 28264 }; 28265 const bounceIn = reverseEasing(bounceOut); 28266 const bounceInOut = (p) => p < 0.5 28267 ? 0.5 * (1.0 - bounceOut(1.0 - p * 2.0)) 28268 : 0.5 * bounceOut(p * 2.0 - 1.0) + 0.5; 28269 28270 28271 28272 ;// CONCATENATED MODULE: ./node_modules/popmotion/dist/es/animations/generators/keyframes.mjs 28273 28274 28275 28276 function defaultEasing(values, easing) { 28277 return values.map(() => easing || easeInOut).splice(0, values.length - 1); 28278 } 28279 function defaultOffset(values) { 28280 const numValues = values.length; 28281 return values.map((_value, i) => i !== 0 ? i / (numValues - 1) : 0); 28282 } 28283 function convertOffsetToTimes(offset, duration) { 28284 return offset.map((o) => o * duration); 28285 } 28286 function keyframes_keyframes({ from = 0, to = 1, ease, offset, duration = 300, }) { 28287 const state = { done: false, value: from }; 28288 const values = Array.isArray(to) ? to : [from, to]; 28289 const times = convertOffsetToTimes(offset && offset.length === values.length 28290 ? offset 28291 : defaultOffset(values), duration); 28292 function createInterpolator() { 28293 return interpolate(times, values, { 28294 ease: Array.isArray(ease) ? ease : defaultEasing(values, ease), 28295 }); 28296 } 28297 let interpolator = createInterpolator(); 28298 return { 28299 next: (t) => { 28300 state.value = interpolator(t); 28301 state.done = t >= duration; 28302 return state; 28303 }, 28304 flipTarget: () => { 28305 values.reverse(); 28306 interpolator = createInterpolator(); 28307 }, 28308 }; 28309 } 28310 28311 28312 28313 ;// CONCATENATED MODULE: ./node_modules/popmotion/dist/es/animations/generators/decay.mjs 28314 function decay({ velocity = 0, from = 0, power = 0.8, timeConstant = 350, restDelta = 0.5, modifyTarget, }) { 28315 const state = { done: false, value: from }; 28316 let amplitude = power * velocity; 28317 const ideal = from + amplitude; 28318 const target = modifyTarget === undefined ? ideal : modifyTarget(ideal); 28319 if (target !== ideal) 28320 amplitude = target - from; 28321 return { 28322 next: (t) => { 28323 const delta = -amplitude * Math.exp(-t / timeConstant); 28324 state.done = !(delta > restDelta || delta < -restDelta); 28325 state.value = state.done ? target : target + delta; 28326 return state; 28327 }, 28328 flipTarget: () => { }, 28329 }; 28330 } 28331 28332 28333 28334 ;// CONCATENATED MODULE: ./node_modules/popmotion/dist/es/animations/utils/detect-animation-from-options.mjs 28335 28336 28337 28338 28339 const types = { keyframes: keyframes_keyframes, spring: spring, decay: decay }; 28340 function detectAnimationFromOptions(config) { 28341 if (Array.isArray(config.to)) { 28342 return keyframes_keyframes; 28343 } 28344 else if (types[config.type]) { 28345 return types[config.type]; 28346 } 28347 const keys = new Set(Object.keys(config)); 28348 if (keys.has("ease") || 28349 (keys.has("duration") && !keys.has("dampingRatio"))) { 28350 return keyframes_keyframes; 28351 } 28352 else if (keys.has("dampingRatio") || 28353 keys.has("stiffness") || 28354 keys.has("mass") || 28355 keys.has("damping") || 28356 keys.has("restSpeed") || 28357 keys.has("restDelta")) { 28358 return spring; 28359 } 28360 return keyframes_keyframes; 28361 } 28362 28363 28364 28365 ;// CONCATENATED MODULE: ./node_modules/popmotion/dist/es/animations/utils/elapsed.mjs 28366 function loopElapsed(elapsed, duration, delay = 0) { 28367 return elapsed - duration - delay; 28368 } 28369 function reverseElapsed(elapsed, duration, delay = 0, isForwardPlayback = true) { 28370 return isForwardPlayback 28371 ? loopElapsed(duration + -elapsed, duration, delay) 28372 : duration - (elapsed - duration) + delay; 28373 } 28374 function hasRepeatDelayElapsed(elapsed, duration, delay, isForwardPlayback) { 28375 return isForwardPlayback ? elapsed >= duration + delay : elapsed <= -delay; 28376 } 28377 28378 28379 28380 ;// CONCATENATED MODULE: ./node_modules/popmotion/dist/es/animations/index.mjs 28381 28382 28383 28384 28385 28386 28387 const framesync = (update) => { 28388 const passTimestamp = ({ delta }) => update(delta); 28389 return { 28390 start: () => es.update(passTimestamp, true), 28391 stop: () => cancelSync.update(passTimestamp), 28392 }; 28393 }; 28394 function animate(_a) { 28395 var _b, _c; 28396 var { from, autoplay = true, driver = framesync, elapsed = 0, repeat: repeatMax = 0, repeatType = "loop", repeatDelay = 0, onPlay, onStop, onComplete, onRepeat, onUpdate } = _a, options = __rest(_a, ["from", "autoplay", "driver", "elapsed", "repeat", "repeatType", "repeatDelay", "onPlay", "onStop", "onComplete", "onRepeat", "onUpdate"]); 28397 let { to } = options; 28398 let driverControls; 28399 let repeatCount = 0; 28400 let computedDuration = options.duration; 28401 let latest; 28402 let isComplete = false; 28403 let isForwardPlayback = true; 28404 let interpolateFromNumber; 28405 const animator = detectAnimationFromOptions(options); 28406 if ((_c = (_b = animator).needsInterpolation) === null || _c === void 0 ? void 0 : _c.call(_b, from, to)) { 28407 interpolateFromNumber = interpolate([0, 100], [from, to], { 28408 clamp: false, 28409 }); 28410 from = 0; 28411 to = 100; 28412 } 28413 const animation = animator(Object.assign(Object.assign({}, options), { from, to })); 28414 function repeat() { 28415 repeatCount++; 28416 if (repeatType === "reverse") { 28417 isForwardPlayback = repeatCount % 2 === 0; 28418 elapsed = reverseElapsed(elapsed, computedDuration, repeatDelay, isForwardPlayback); 28419 } 28420 else { 28421 elapsed = loopElapsed(elapsed, computedDuration, repeatDelay); 28422 if (repeatType === "mirror") 28423 animation.flipTarget(); 28424 } 28425 isComplete = false; 28426 onRepeat && onRepeat(); 28427 } 28428 function complete() { 28429 driverControls.stop(); 28430 onComplete && onComplete(); 28431 } 28432 function update(delta) { 28433 if (!isForwardPlayback) 28434 delta = -delta; 28435 elapsed += delta; 28436 if (!isComplete) { 28437 const state = animation.next(Math.max(0, elapsed)); 28438 latest = state.value; 28439 if (interpolateFromNumber) 28440 latest = interpolateFromNumber(latest); 28441 isComplete = isForwardPlayback ? state.done : elapsed <= 0; 28442 } 28443 onUpdate === null || onUpdate === void 0 ? void 0 : onUpdate(latest); 28444 if (isComplete) { 28445 if (repeatCount === 0) 28446 computedDuration !== null && computedDuration !== void 0 ? computedDuration : (computedDuration = elapsed); 28447 if (repeatCount < repeatMax) { 28448 hasRepeatDelayElapsed(elapsed, computedDuration, repeatDelay, isForwardPlayback) && repeat(); 28449 } 28450 else { 28451 complete(); 28452 } 28453 } 28454 } 28455 function play() { 28456 onPlay === null || onPlay === void 0 ? void 0 : onPlay(); 28457 driverControls = driver(update); 28458 driverControls.start(); 28459 } 28460 autoplay && play(); 28461 return { 28462 stop: () => { 28463 onStop === null || onStop === void 0 ? void 0 : onStop(); 28464 driverControls.stop(); 28465 }, 28466 }; 28467 } 28468 28469 28470 28471 ;// CONCATENATED MODULE: ./node_modules/popmotion/dist/es/animations/inertia.mjs 28472 28473 28474 28475 28476 function inertia({ from = 0, velocity = 0, min, max, power = 0.8, timeConstant = 750, bounceStiffness = 500, bounceDamping = 10, restDelta = 1, modifyTarget, driver, onUpdate, onComplete, onStop, }) { 28477 let currentAnimation; 28478 function isOutOfBounds(v) { 28479 return (min !== undefined && v < min) || (max !== undefined && v > max); 28480 } 28481 function boundaryNearest(v) { 28482 if (min === undefined) 28483 return max; 28484 if (max === undefined) 28485 return min; 28486 return Math.abs(min - v) < Math.abs(max - v) ? min : max; 28487 } 28488 function startAnimation(options) { 28489 currentAnimation === null || currentAnimation === void 0 ? void 0 : currentAnimation.stop(); 28490 currentAnimation = animate(Object.assign(Object.assign({}, options), { driver, onUpdate: (v) => { 28491 var _a; 28492 onUpdate === null || onUpdate === void 0 ? void 0 : onUpdate(v); 28493 (_a = options.onUpdate) === null || _a === void 0 ? void 0 : _a.call(options, v); 28494 }, onComplete, 28495 onStop })); 28496 } 28497 function startSpring(options) { 28498 startAnimation(Object.assign({ type: "spring", stiffness: bounceStiffness, damping: bounceDamping, restDelta }, options)); 28499 } 28500 if (isOutOfBounds(from)) { 28501 startSpring({ from, velocity, to: boundaryNearest(from) }); 28502 } 28503 else { 28504 let target = power * velocity + from; 28505 if (typeof modifyTarget !== "undefined") 28506 target = modifyTarget(target); 28507 const boundary = boundaryNearest(target); 28508 const heading = boundary === min ? -1 : 1; 28509 let prev; 28510 let current; 28511 const checkBoundary = (v) => { 28512 prev = current; 28513 current = v; 28514 velocity = velocityPerSecond(v - prev, getFrameData().delta); 28515 if ((heading === 1 && v > boundary) || 28516 (heading === -1 && v < boundary)) { 28517 startSpring({ from: v, to: boundary, velocity }); 28518 } 28519 }; 28520 startAnimation({ 28521 type: "decay", 28522 from, 28523 velocity, 28524 timeConstant, 28525 power, 28526 restDelta, 28527 modifyTarget, 28528 onUpdate: isOutOfBounds(target) ? checkBoundary : undefined, 28529 }); 28530 } 28531 return { 28532 stop: () => currentAnimation === null || currentAnimation === void 0 ? void 0 : currentAnimation.stop(), 28533 }; 28534 } 28535 28536 28537 28538 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/time-conversion.mjs 28539 /** 28540 * Converts seconds to milliseconds 28541 * 28542 * @param seconds - Time in seconds. 28543 * @return milliseconds - Converted time in milliseconds. 28544 */ 28545 var secondsToMilliseconds = function (seconds) { return seconds * 1000; }; 28546 28547 28548 28549 ;// CONCATENATED MODULE: ./node_modules/popmotion/dist/es/easing/cubic-bezier.mjs 28550 28551 28552 const cubic_bezier_a = (a1, a2) => 1.0 - 3.0 * a2 + 3.0 * a1; 28553 const cubic_bezier_b = (a1, a2) => 3.0 * a2 - 6.0 * a1; 28554 const cubic_bezier_c = (a1) => 3.0 * a1; 28555 const calcBezier = (t, a1, a2) => ((cubic_bezier_a(a1, a2) * t + cubic_bezier_b(a1, a2)) * t + cubic_bezier_c(a1)) * t; 28556 const getSlope = (t, a1, a2) => 3.0 * cubic_bezier_a(a1, a2) * t * t + 2.0 * cubic_bezier_b(a1, a2) * t + cubic_bezier_c(a1); 28557 const subdivisionPrecision = 0.0000001; 28558 const subdivisionMaxIterations = 10; 28559 function binarySubdivide(aX, aA, aB, mX1, mX2) { 28560 let currentX; 28561 let currentT; 28562 let i = 0; 28563 do { 28564 currentT = aA + (aB - aA) / 2.0; 28565 currentX = calcBezier(currentT, mX1, mX2) - aX; 28566 if (currentX > 0.0) { 28567 aB = currentT; 28568 } 28569 else { 28570 aA = currentT; 28571 } 28572 } while (Math.abs(currentX) > subdivisionPrecision && 28573 ++i < subdivisionMaxIterations); 28574 return currentT; 28575 } 28576 const newtonIterations = 8; 28577 const newtonMinSlope = 0.001; 28578 function newtonRaphsonIterate(aX, aGuessT, mX1, mX2) { 28579 for (let i = 0; i < newtonIterations; ++i) { 28580 const currentSlope = getSlope(aGuessT, mX1, mX2); 28581 if (currentSlope === 0.0) { 28582 return aGuessT; 28583 } 28584 const currentX = calcBezier(aGuessT, mX1, mX2) - aX; 28585 aGuessT -= currentX / currentSlope; 28586 } 28587 return aGuessT; 28588 } 28589 const kSplineTableSize = 11; 28590 const kSampleStepSize = 1.0 / (kSplineTableSize - 1.0); 28591 function cubicBezier(mX1, mY1, mX2, mY2) { 28592 if (mX1 === mY1 && mX2 === mY2) 28593 return linear; 28594 const sampleValues = new Float32Array(kSplineTableSize); 28595 for (let i = 0; i < kSplineTableSize; ++i) { 28596 sampleValues[i] = calcBezier(i * kSampleStepSize, mX1, mX2); 28597 } 28598 function getTForX(aX) { 28599 let intervalStart = 0.0; 28600 let currentSample = 1; 28601 const lastSample = kSplineTableSize - 1; 28602 for (; currentSample !== lastSample && sampleValues[currentSample] <= aX; ++currentSample) { 28603 intervalStart += kSampleStepSize; 28604 } 28605 --currentSample; 28606 const dist = (aX - sampleValues[currentSample]) / 28607 (sampleValues[currentSample + 1] - sampleValues[currentSample]); 28608 const guessForT = intervalStart + dist * kSampleStepSize; 28609 const initialSlope = getSlope(guessForT, mX1, mX2); 28610 if (initialSlope >= newtonMinSlope) { 28611 return newtonRaphsonIterate(aX, guessForT, mX1, mX2); 28612 } 28613 else if (initialSlope === 0.0) { 28614 return guessForT; 28615 } 28616 else { 28617 return binarySubdivide(aX, intervalStart, intervalStart + kSampleStepSize, mX1, mX2); 28618 } 28619 } 28620 return (t) => t === 0 || t === 1 ? t : calcBezier(getTForX(t), mY1, mY2); 28621 } 28622 28623 28624 28625 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/animation/utils/easing.mjs 28626 28627 28628 28629 28630 var easingLookup = { 28631 linear: linear, 28632 easeIn: easeIn, 28633 easeInOut: easeInOut, 28634 easeOut: easeOut, 28635 circIn: circIn, 28636 circInOut: circInOut, 28637 circOut: circOut, 28638 backIn: backIn, 28639 backInOut: backInOut, 28640 backOut: backOut, 28641 anticipate: anticipate, 28642 bounceIn: bounceIn, 28643 bounceInOut: bounceInOut, 28644 bounceOut: bounceOut, 28645 }; 28646 var easingDefinitionToFunction = function (definition) { 28647 if (Array.isArray(definition)) { 28648 // If cubic bezier definition, create bezier curve 28649 invariant(definition.length === 4, "Cubic bezier arrays must contain four numerical values."); 28650 var _a = tslib_es6_read(definition, 4), x1 = _a[0], y1 = _a[1], x2 = _a[2], y2 = _a[3]; 28651 return cubicBezier(x1, y1, x2, y2); 28652 } 28653 else if (typeof definition === "string") { 28654 // Else lookup from table 28655 invariant(easingLookup[definition] !== undefined, "Invalid easing type '".concat(definition, "'")); 28656 return easingLookup[definition]; 28657 } 28658 return definition; 28659 }; 28660 var isEasingArray = function (ease) { 28661 return Array.isArray(ease) && typeof ease[0] !== "number"; 28662 }; 28663 28664 28665 28666 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/animation/utils/is-animatable.mjs 28667 28668 28669 /** 28670 * Check if a value is animatable. Examples: 28671 * 28672 * ✅: 100, "100px", "#fff" 28673 * ❌: "block", "url(2.jpg)" 28674 * @param value 28675 * 28676 * @internal 28677 */ 28678 var isAnimatable = function (key, value) { 28679 // If the list of keys tat might be non-animatable grows, replace with Set 28680 if (key === "zIndex") 28681 return false; 28682 // If it's a number or a keyframes array, we can animate it. We might at some point 28683 // need to do a deep isAnimatable check of keyframes, or let Popmotion handle this, 28684 // but for now lets leave it like this for performance reasons 28685 if (typeof value === "number" || Array.isArray(value)) 28686 return true; 28687 if (typeof value === "string" && // It's animatable if we have a string 28688 complex.test(value) && // And it contains numbers and/or colors 28689 !value.startsWith("url(") // Unless it starts with "url(" 28690 ) { 28691 return true; 28692 } 28693 return false; 28694 }; 28695 28696 28697 28698 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/animation/utils/is-keyframes-target.mjs 28699 var isKeyframesTarget = function (v) { 28700 return Array.isArray(v); 28701 }; 28702 28703 28704 28705 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/animation/utils/default-transitions.mjs 28706 28707 28708 28709 var underDampedSpring = function () { return ({ 28710 type: "spring", 28711 stiffness: 500, 28712 damping: 25, 28713 restSpeed: 10, 28714 }); }; 28715 var criticallyDampedSpring = function (to) { return ({ 28716 type: "spring", 28717 stiffness: 550, 28718 damping: to === 0 ? 2 * Math.sqrt(550) : 30, 28719 restSpeed: 10, 28720 }); }; 28721 var linearTween = function () { return ({ 28722 type: "keyframes", 28723 ease: "linear", 28724 duration: 0.3, 28725 }); }; 28726 var default_transitions_keyframes = function (values) { return ({ 28727 type: "keyframes", 28728 duration: 0.8, 28729 values: values, 28730 }); }; 28731 var defaultTransitions = { 28732 x: underDampedSpring, 28733 y: underDampedSpring, 28734 z: underDampedSpring, 28735 rotate: underDampedSpring, 28736 rotateX: underDampedSpring, 28737 rotateY: underDampedSpring, 28738 rotateZ: underDampedSpring, 28739 scaleX: criticallyDampedSpring, 28740 scaleY: criticallyDampedSpring, 28741 scale: criticallyDampedSpring, 28742 opacity: linearTween, 28743 backgroundColor: linearTween, 28744 color: linearTween, 28745 default: criticallyDampedSpring, 28746 }; 28747 var getDefaultTransition = function (valueKey, to) { 28748 var transitionFactory; 28749 if (isKeyframesTarget(to)) { 28750 transitionFactory = default_transitions_keyframes; 28751 } 28752 else { 28753 transitionFactory = 28754 defaultTransitions[valueKey] || defaultTransitions.default; 28755 } 28756 return __assign({ to: to }, transitionFactory(to)); 28757 }; 28758 28759 28760 28761 ;// CONCATENATED MODULE: ./node_modules/style-value-types/dist/es/complex/filter.mjs 28762 28763 28764 28765 const maxDefaults = new Set(['brightness', 'contrast', 'saturate', 'opacity']); 28766 function applyDefaultFilter(v) { 28767 let [name, value] = v.slice(0, -1).split('('); 28768 if (name === 'drop-shadow') 28769 return v; 28770 const [number] = value.match(floatRegex) || []; 28771 if (!number) 28772 return v; 28773 const unit = value.replace(number, ''); 28774 let defaultValue = maxDefaults.has(name) ? 1 : 0; 28775 if (number !== value) 28776 defaultValue *= 100; 28777 return name + '(' + defaultValue + unit + ')'; 28778 } 28779 const functionRegex = /([a-z-]*)\(.*?\)/g; 28780 const filter = Object.assign(Object.assign({}, complex), { getAnimatableNone: (v) => { 28781 const functions = v.match(functionRegex); 28782 return functions ? functions.map(applyDefaultFilter).join(' ') : v; 28783 } }); 28784 28785 28786 28787 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/dom/value-types/type-int.mjs 28788 28789 28790 28791 var type_int_int = __assign(__assign({}, number), { transform: Math.round }); 28792 28793 28794 28795 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/dom/value-types/number.mjs 28796 28797 28798 28799 var numberValueTypes = { 28800 // Border props 28801 borderWidth: px, 28802 borderTopWidth: px, 28803 borderRightWidth: px, 28804 borderBottomWidth: px, 28805 borderLeftWidth: px, 28806 borderRadius: px, 28807 radius: px, 28808 borderTopLeftRadius: px, 28809 borderTopRightRadius: px, 28810 borderBottomRightRadius: px, 28811 borderBottomLeftRadius: px, 28812 // Positioning props 28813 width: px, 28814 maxWidth: px, 28815 height: px, 28816 maxHeight: px, 28817 size: px, 28818 top: px, 28819 right: px, 28820 bottom: px, 28821 left: px, 28822 // Spacing props 28823 padding: px, 28824 paddingTop: px, 28825 paddingRight: px, 28826 paddingBottom: px, 28827 paddingLeft: px, 28828 margin: px, 28829 marginTop: px, 28830 marginRight: px, 28831 marginBottom: px, 28832 marginLeft: px, 28833 // Transform props 28834 rotate: degrees, 28835 rotateX: degrees, 28836 rotateY: degrees, 28837 rotateZ: degrees, 28838 scale: scale, 28839 scaleX: scale, 28840 scaleY: scale, 28841 scaleZ: scale, 28842 skew: degrees, 28843 skewX: degrees, 28844 skewY: degrees, 28845 distance: px, 28846 translateX: px, 28847 translateY: px, 28848 translateZ: px, 28849 x: px, 28850 y: px, 28851 z: px, 28852 perspective: px, 28853 transformPerspective: px, 28854 opacity: alpha, 28855 originX: progressPercentage, 28856 originY: progressPercentage, 28857 originZ: px, 28858 // Misc 28859 zIndex: type_int_int, 28860 // SVG 28861 fillOpacity: alpha, 28862 strokeOpacity: alpha, 28863 numOctaves: type_int_int, 28864 }; 28865 28866 28867 28868 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/dom/value-types/defaults.mjs 28869 28870 28871 28872 28873 /** 28874 * A map of default value types for common values 28875 */ 28876 var defaultValueTypes = __assign(__assign({}, numberValueTypes), { 28877 // Color props 28878 color: color, backgroundColor: color, outlineColor: color, fill: color, stroke: color, 28879 // Border props 28880 borderColor: color, borderTopColor: color, borderRightColor: color, borderBottomColor: color, borderLeftColor: color, filter: filter, WebkitFilter: filter }); 28881 /** 28882 * Gets the default ValueType for the provided value key 28883 */ 28884 var getDefaultValueType = function (key) { return defaultValueTypes[key]; }; 28885 28886 28887 28888 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/dom/value-types/animatable-none.mjs 28889 28890 28891 28892 function animatable_none_getAnimatableNone(key, value) { 28893 var _a; 28894 var defaultValueType = getDefaultValueType(key); 28895 if (defaultValueType !== filter) 28896 defaultValueType = complex; 28897 // If value is not recognised as animatable, ie "none", create an animatable version origin based on the target 28898 return (_a = defaultValueType.getAnimatableNone) === null || _a === void 0 ? void 0 : _a.call(defaultValueType, value); 28899 } 28900 28901 28902 28903 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/use-instant-transition-state.mjs 28904 var instantAnimationState = { 28905 current: false, 28906 }; 28907 28908 28909 28910 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/resolve-value.mjs 28911 28912 28913 var isCustomValue = function (v) { 28914 return Boolean(v && typeof v === "object" && v.mix && v.toValue); 28915 }; 28916 var resolveFinalValueInKeyframes = function (v) { 28917 // TODO maybe throw if v.length - 1 is placeholder token? 28918 return isKeyframesTarget(v) ? v[v.length - 1] || 0 : v; 28919 }; 28920 28921 28922 28923 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/animation/utils/transitions.mjs 28924 28925 28926 28927 28928 28929 28930 28931 28932 28933 28934 28935 /** 28936 * Decide whether a transition is defined on a given Transition. 28937 * This filters out orchestration options and returns true 28938 * if any options are left. 28939 */ 28940 function isTransitionDefined(_a) { 28941 _a.when; _a.delay; _a.delayChildren; _a.staggerChildren; _a.staggerDirection; _a.repeat; _a.repeatType; _a.repeatDelay; _a.from; var transition = __rest(_a, ["when", "delay", "delayChildren", "staggerChildren", "staggerDirection", "repeat", "repeatType", "repeatDelay", "from"]); 28942 return !!Object.keys(transition).length; 28943 } 28944 var legacyRepeatWarning = false; 28945 /** 28946 * Convert Framer Motion's Transition type into Popmotion-compatible options. 28947 */ 28948 function convertTransitionToAnimationOptions(_a) { 28949 var ease = _a.ease, times = _a.times, yoyo = _a.yoyo, flip = _a.flip, loop = _a.loop, transition = __rest(_a, ["ease", "times", "yoyo", "flip", "loop"]); 28950 var options = __assign({}, transition); 28951 if (times) 28952 options["offset"] = times; 28953 /** 28954 * Convert any existing durations from seconds to milliseconds 28955 */ 28956 if (transition.duration) 28957 options["duration"] = secondsToMilliseconds(transition.duration); 28958 if (transition.repeatDelay) 28959 options.repeatDelay = secondsToMilliseconds(transition.repeatDelay); 28960 /** 28961 * Map easing names to Popmotion's easing functions 28962 */ 28963 if (ease) { 28964 options["ease"] = isEasingArray(ease) 28965 ? ease.map(easingDefinitionToFunction) 28966 : easingDefinitionToFunction(ease); 28967 } 28968 /** 28969 * Support legacy transition API 28970 */ 28971 if (transition.type === "tween") 28972 options.type = "keyframes"; 28973 /** 28974 * TODO: These options are officially removed from the API. 28975 */ 28976 if (yoyo || loop || flip) { 28977 warning(!legacyRepeatWarning, "yoyo, loop and flip have been removed from the API. Replace with repeat and repeatType options."); 28978 legacyRepeatWarning = true; 28979 if (yoyo) { 28980 options.repeatType = "reverse"; 28981 } 28982 else if (loop) { 28983 options.repeatType = "loop"; 28984 } 28985 else if (flip) { 28986 options.repeatType = "mirror"; 28987 } 28988 options.repeat = loop || yoyo || flip || transition.repeat; 28989 } 28990 /** 28991 * TODO: Popmotion 9 has the ability to automatically detect whether to use 28992 * a keyframes or spring animation, but does so by detecting velocity and other spring options. 28993 * It'd be good to introduce a similar thing here. 28994 */ 28995 if (transition.type !== "spring") 28996 options.type = "keyframes"; 28997 return options; 28998 } 28999 /** 29000 * Get the delay for a value by checking Transition with decreasing specificity. 29001 */ 29002 function getDelayFromTransition(transition, key) { 29003 var _a, _b; 29004 var valueTransition = getValueTransition(transition, key) || {}; 29005 return (_b = (_a = valueTransition.delay) !== null && _a !== void 0 ? _a : transition.delay) !== null && _b !== void 0 ? _b : 0; 29006 } 29007 function hydrateKeyframes(options) { 29008 if (Array.isArray(options.to) && options.to[0] === null) { 29009 options.to = tslib_es6_spreadArray([], tslib_es6_read(options.to), false); 29010 options.to[0] = options.from; 29011 } 29012 return options; 29013 } 29014 function getPopmotionAnimationOptions(transition, options, key) { 29015 var _a; 29016 if (Array.isArray(options.to)) { 29017 (_a = transition.duration) !== null && _a !== void 0 ? _a : (transition.duration = 0.8); 29018 } 29019 hydrateKeyframes(options); 29020 /** 29021 * Get a default transition if none is determined to be defined. 29022 */ 29023 if (!isTransitionDefined(transition)) { 29024 transition = __assign(__assign({}, transition), getDefaultTransition(key, options.to)); 29025 } 29026 return __assign(__assign({}, options), convertTransitionToAnimationOptions(transition)); 29027 } 29028 /** 29029 * 29030 */ 29031 function getAnimation(key, value, target, transition, onComplete) { 29032 var _a; 29033 var valueTransition = getValueTransition(transition, key); 29034 var origin = (_a = valueTransition.from) !== null && _a !== void 0 ? _a : value.get(); 29035 var isTargetAnimatable = isAnimatable(key, target); 29036 if (origin === "none" && isTargetAnimatable && typeof target === "string") { 29037 /** 29038 * If we're trying to animate from "none", try and get an animatable version 29039 * of the target. This could be improved to work both ways. 29040 */ 29041 origin = animatable_none_getAnimatableNone(key, target); 29042 } 29043 else if (isZero(origin) && typeof target === "string") { 29044 origin = getZeroUnit(target); 29045 } 29046 else if (!Array.isArray(target) && 29047 isZero(target) && 29048 typeof origin === "string") { 29049 target = getZeroUnit(origin); 29050 } 29051 var isOriginAnimatable = isAnimatable(key, origin); 29052 warning(isOriginAnimatable === isTargetAnimatable, "You are trying to animate ".concat(key, " from \"").concat(origin, "\" to \"").concat(target, "\". ").concat(origin, " is not an animatable value - to enable this animation set ").concat(origin, " to a value animatable to ").concat(target, " via the `style` property.")); 29053 function start() { 29054 var options = { 29055 from: origin, 29056 to: target, 29057 velocity: value.getVelocity(), 29058 onComplete: onComplete, 29059 onUpdate: function (v) { return value.set(v); }, 29060 }; 29061 return valueTransition.type === "inertia" || 29062 valueTransition.type === "decay" 29063 ? inertia(__assign(__assign({}, options), valueTransition)) 29064 : animate(__assign(__assign({}, getPopmotionAnimationOptions(valueTransition, options, key)), { onUpdate: function (v) { 29065 var _a; 29066 options.onUpdate(v); 29067 (_a = valueTransition.onUpdate) === null || _a === void 0 ? void 0 : _a.call(valueTransition, v); 29068 }, onComplete: function () { 29069 var _a; 29070 options.onComplete(); 29071 (_a = valueTransition.onComplete) === null || _a === void 0 ? void 0 : _a.call(valueTransition); 29072 } })); 29073 } 29074 function set() { 29075 var _a, _b; 29076 var finalTarget = resolveFinalValueInKeyframes(target); 29077 value.set(finalTarget); 29078 onComplete(); 29079 (_a = valueTransition === null || valueTransition === void 0 ? void 0 : valueTransition.onUpdate) === null || _a === void 0 ? void 0 : _a.call(valueTransition, finalTarget); 29080 (_b = valueTransition === null || valueTransition === void 0 ? void 0 : valueTransition.onComplete) === null || _b === void 0 ? void 0 : _b.call(valueTransition); 29081 return { stop: function () { } }; 29082 } 29083 return !isOriginAnimatable || 29084 !isTargetAnimatable || 29085 valueTransition.type === false 29086 ? set 29087 : start; 29088 } 29089 function isZero(value) { 29090 return (value === 0 || 29091 (typeof value === "string" && 29092 parseFloat(value) === 0 && 29093 value.indexOf(" ") === -1)); 29094 } 29095 function getZeroUnit(potentialUnitType) { 29096 return typeof potentialUnitType === "number" 29097 ? 0 29098 : animatable_none_getAnimatableNone("", potentialUnitType); 29099 } 29100 function getValueTransition(transition, key) { 29101 return transition[key] || transition["default"] || transition; 29102 } 29103 /** 29104 * Start animation on a MotionValue. This function is an interface between 29105 * Framer Motion and Popmotion 29106 * 29107 * @internal 29108 */ 29109 function startAnimation(key, value, target, transition) { 29110 if (transition === void 0) { transition = {}; } 29111 if (instantAnimationState.current) { 29112 transition = { type: false }; 29113 } 29114 return value.start(function (onComplete) { 29115 var delayTimer; 29116 var controls; 29117 var animation = getAnimation(key, value, target, transition, onComplete); 29118 var delay = getDelayFromTransition(transition, key); 29119 var start = function () { return (controls = animation()); }; 29120 if (delay) { 29121 delayTimer = window.setTimeout(start, secondsToMilliseconds(delay)); 29122 } 29123 else { 29124 start(); 29125 } 29126 return function () { 29127 clearTimeout(delayTimer); 29128 controls === null || controls === void 0 ? void 0 : controls.stop(); 29129 }; 29130 }); 29131 } 29132 29133 29134 29135 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/animation/animate.mjs 29136 29137 29138 29139 29140 /** 29141 * Animate a single value or a `MotionValue`. 29142 * 29143 * The first argument is either a `MotionValue` to animate, or an initial animation value. 29144 * 29145 * The second is either a value to animate to, or an array of keyframes to animate through. 29146 * 29147 * The third argument can be either tween or spring options, and optional lifecycle methods: `onUpdate`, `onPlay`, `onComplete`, `onRepeat` and `onStop`. 29148 * 29149 * Returns `AnimationPlaybackControls`, currently just a `stop` method. 29150 * 29151 * ```javascript 29152 * const x = useMotionValue(0) 29153 * 29154 * useEffect(() => { 29155 * const controls = animate(x, 100, { 29156 * type: "spring", 29157 * stiffness: 2000, 29158 * onComplete: v => {} 29159 * }) 29160 * 29161 * return controls.stop 29162 * }) 29163 * ``` 29164 * 29165 * @public 29166 */ 29167 function animate_animate(from, to, transition) { 29168 if (transition === void 0) { transition = {}; } 29169 var value = isMotionValue(from) ? from : motionValue(from); 29170 startAnimation("", value, to, transition); 29171 return { 29172 stop: function () { return value.stop(); }, 29173 isAnimating: function () { return value.isAnimating(); }, 29174 }; 29175 } 29176 29177 29178 29179 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/projection/animation/mix-values.mjs 29180 29181 29182 29183 var borders = ["TopLeft", "TopRight", "BottomLeft", "BottomRight"]; 29184 var numBorders = borders.length; 29185 var asNumber = function (value) { 29186 return typeof value === "string" ? parseFloat(value) : value; 29187 }; 29188 var isPx = function (value) { 29189 return typeof value === "number" || px.test(value); 29190 }; 29191 function mixValues(target, follow, lead, progress, shouldCrossfadeOpacity, isOnlyMember) { 29192 var _a, _b, _c, _d; 29193 if (shouldCrossfadeOpacity) { 29194 target.opacity = mix(0, 29195 // (follow?.opacity as number) ?? 0, 29196 // TODO Reinstate this if only child 29197 (_a = lead.opacity) !== null && _a !== void 0 ? _a : 1, easeCrossfadeIn(progress)); 29198 target.opacityExit = mix((_b = follow.opacity) !== null && _b !== void 0 ? _b : 1, 0, easeCrossfadeOut(progress)); 29199 } 29200 else if (isOnlyMember) { 29201 target.opacity = mix((_c = follow.opacity) !== null && _c !== void 0 ? _c : 1, (_d = lead.opacity) !== null && _d !== void 0 ? _d : 1, progress); 29202 } 29203 /** 29204 * Mix border radius 29205 */ 29206 for (var i = 0; i < numBorders; i++) { 29207 var borderLabel = "border".concat(borders[i], "Radius"); 29208 var followRadius = getRadius(follow, borderLabel); 29209 var leadRadius = getRadius(lead, borderLabel); 29210 if (followRadius === undefined && leadRadius === undefined) 29211 continue; 29212 followRadius || (followRadius = 0); 29213 leadRadius || (leadRadius = 0); 29214 var canMix = followRadius === 0 || 29215 leadRadius === 0 || 29216 isPx(followRadius) === isPx(leadRadius); 29217 if (canMix) { 29218 target[borderLabel] = Math.max(mix(asNumber(followRadius), asNumber(leadRadius), progress), 0); 29219 if (percent.test(leadRadius) || percent.test(followRadius)) { 29220 target[borderLabel] += "%"; 29221 } 29222 } 29223 else { 29224 target[borderLabel] = leadRadius; 29225 } 29226 } 29227 /** 29228 * Mix rotation 29229 */ 29230 if (follow.rotate || lead.rotate) { 29231 target.rotate = mix(follow.rotate || 0, lead.rotate || 0, progress); 29232 } 29233 } 29234 function getRadius(values, radiusName) { 29235 var _a; 29236 return (_a = values[radiusName]) !== null && _a !== void 0 ? _a : values.borderRadius; 29237 } 29238 // /** 29239 // * We only want to mix the background color if there's a follow element 29240 // * that we're not crossfading opacity between. For instance with switch 29241 // * AnimateSharedLayout animations, this helps the illusion of a continuous 29242 // * element being animated but also cuts down on the number of paints triggered 29243 // * for elements where opacity is doing that work for us. 29244 // */ 29245 // if ( 29246 // !hasFollowElement && 29247 // latestLeadValues.backgroundColor && 29248 // latestFollowValues.backgroundColor 29249 // ) { 29250 // /** 29251 // * This isn't ideal performance-wise as mixColor is creating a new function every frame. 29252 // * We could probably create a mixer that runs at the start of the animation but 29253 // * the idea behind the crossfader is that it runs dynamically between two potentially 29254 // * changing targets (ie opacity or borderRadius may be animating independently via variants) 29255 // */ 29256 // leadState.backgroundColor = followState.backgroundColor = mixColor( 29257 // latestFollowValues.backgroundColor as string, 29258 // latestLeadValues.backgroundColor as string 29259 // )(p) 29260 // } 29261 var easeCrossfadeIn = compress(0, 0.5, circOut); 29262 var easeCrossfadeOut = compress(0.5, 0.95, linear); 29263 function compress(min, max, easing) { 29264 return function (p) { 29265 // Could replace ifs with clamp 29266 if (p < min) 29267 return 0; 29268 if (p > max) 29269 return 1; 29270 return easing(progress(min, max, p)); 29271 }; 29272 } 29273 29274 29275 29276 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/projection/geometry/copy.mjs 29277 /** 29278 * Reset an axis to the provided origin box. 29279 * 29280 * This is a mutative operation. 29281 */ 29282 function copyAxisInto(axis, originAxis) { 29283 axis.min = originAxis.min; 29284 axis.max = originAxis.max; 29285 } 29286 /** 29287 * Reset a box to the provided origin box. 29288 * 29289 * This is a mutative operation. 29290 */ 29291 function copyBoxInto(box, originBox) { 29292 copyAxisInto(box.x, originBox.x); 29293 copyAxisInto(box.y, originBox.y); 29294 } 29295 29296 29297 29298 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/projection/utils/has-transform.mjs 29299 function isIdentityScale(scale) { 29300 return scale === undefined || scale === 1; 29301 } 29302 function hasScale(_a) { 29303 var scale = _a.scale, scaleX = _a.scaleX, scaleY = _a.scaleY; 29304 return (!isIdentityScale(scale) || 29305 !isIdentityScale(scaleX) || 29306 !isIdentityScale(scaleY)); 29307 } 29308 function hasTransform(values) { 29309 return (hasScale(values) || 29310 hasTranslate(values.x) || 29311 hasTranslate(values.y) || 29312 values.z || 29313 values.rotate || 29314 values.rotateX || 29315 values.rotateY); 29316 } 29317 function hasTranslate(value) { 29318 return value && value !== "0%"; 29319 } 29320 29321 29322 29323 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/projection/geometry/delta-apply.mjs 29324 29325 29326 29327 29328 /** 29329 * Scales a point based on a factor and an originPoint 29330 */ 29331 function scalePoint(point, scale, originPoint) { 29332 var distanceFromOrigin = point - originPoint; 29333 var scaled = scale * distanceFromOrigin; 29334 return originPoint + scaled; 29335 } 29336 /** 29337 * Applies a translate/scale delta to a point 29338 */ 29339 function applyPointDelta(point, translate, scale, originPoint, boxScale) { 29340 if (boxScale !== undefined) { 29341 point = scalePoint(point, boxScale, originPoint); 29342 } 29343 return scalePoint(point, scale, originPoint) + translate; 29344 } 29345 /** 29346 * Applies a translate/scale delta to an axis 29347 */ 29348 function applyAxisDelta(axis, translate, scale, originPoint, boxScale) { 29349 if (translate === void 0) { translate = 0; } 29350 if (scale === void 0) { scale = 1; } 29351 axis.min = applyPointDelta(axis.min, translate, scale, originPoint, boxScale); 29352 axis.max = applyPointDelta(axis.max, translate, scale, originPoint, boxScale); 29353 } 29354 /** 29355 * Applies a translate/scale delta to a box 29356 */ 29357 function applyBoxDelta(box, _a) { 29358 var x = _a.x, y = _a.y; 29359 applyAxisDelta(box.x, x.translate, x.scale, x.originPoint); 29360 applyAxisDelta(box.y, y.translate, y.scale, y.originPoint); 29361 } 29362 /** 29363 * Apply a tree of deltas to a box. We do this to calculate the effect of all the transforms 29364 * in a tree upon our box before then calculating how to project it into our desired viewport-relative box 29365 * 29366 * This is the final nested loop within updateLayoutDelta for future refactoring 29367 */ 29368 function applyTreeDeltas(box, treeScale, treePath, isSharedTransition) { 29369 var _a, _b; 29370 if (isSharedTransition === void 0) { isSharedTransition = false; } 29371 var treeLength = treePath.length; 29372 if (!treeLength) 29373 return; 29374 // Reset the treeScale 29375 treeScale.x = treeScale.y = 1; 29376 var node; 29377 var delta; 29378 for (var i = 0; i < treeLength; i++) { 29379 node = treePath[i]; 29380 delta = node.projectionDelta; 29381 if (((_b = (_a = node.instance) === null || _a === void 0 ? void 0 : _a.style) === null || _b === void 0 ? void 0 : _b.display) === "contents") 29382 continue; 29383 if (isSharedTransition && 29384 node.options.layoutScroll && 29385 node.scroll && 29386 node !== node.root) { 29387 transformBox(box, { x: -node.scroll.x, y: -node.scroll.y }); 29388 } 29389 if (delta) { 29390 // Incoporate each ancestor's scale into a culmulative treeScale for this component 29391 treeScale.x *= delta.x.scale; 29392 treeScale.y *= delta.y.scale; 29393 // Apply each ancestor's calculated delta into this component's recorded layout box 29394 applyBoxDelta(box, delta); 29395 } 29396 if (isSharedTransition && hasTransform(node.latestValues)) { 29397 transformBox(box, node.latestValues); 29398 } 29399 } 29400 } 29401 function translateAxis(axis, distance) { 29402 axis.min = axis.min + distance; 29403 axis.max = axis.max + distance; 29404 } 29405 /** 29406 * Apply a transform to an axis from the latest resolved motion values. 29407 * This function basically acts as a bridge between a flat motion value map 29408 * and applyAxisDelta 29409 */ 29410 function transformAxis(axis, transforms, _a) { 29411 var _b = tslib_es6_read(_a, 3), key = _b[0], scaleKey = _b[1], originKey = _b[2]; 29412 var axisOrigin = transforms[originKey] !== undefined ? transforms[originKey] : 0.5; 29413 var originPoint = mix(axis.min, axis.max, axisOrigin); 29414 // Apply the axis delta to the final axis 29415 applyAxisDelta(axis, transforms[key], transforms[scaleKey], originPoint, transforms.scale); 29416 } 29417 /** 29418 * The names of the motion values we want to apply as translation, scale and origin. 29419 */ 29420 var xKeys = ["x", "scaleX", "originX"]; 29421 var yKeys = ["y", "scaleY", "originY"]; 29422 /** 29423 * Apply a transform to a box from the latest resolved motion values. 29424 */ 29425 function transformBox(box, transform) { 29426 transformAxis(box.x, transform, xKeys); 29427 transformAxis(box.y, transform, yKeys); 29428 } 29429 29430 29431 29432 ;// CONCATENATED MODULE: ./node_modules/popmotion/dist/es/utils/is-point.mjs 29433 const isPoint = (point) => point.hasOwnProperty('x') && point.hasOwnProperty('y'); 29434 29435 29436 29437 ;// CONCATENATED MODULE: ./node_modules/popmotion/dist/es/utils/is-point-3d.mjs 29438 29439 29440 const isPoint3D = (point) => isPoint(point) && point.hasOwnProperty('z'); 29441 29442 29443 29444 ;// CONCATENATED MODULE: ./node_modules/popmotion/dist/es/utils/distance.mjs 29445 29446 29447 29448 29449 const distance1D = (a, b) => Math.abs(a - b); 29450 function distance(a, b) { 29451 if (isNum(a) && isNum(b)) { 29452 return distance1D(a, b); 29453 } 29454 else if (isPoint(a) && isPoint(b)) { 29455 const xDelta = distance1D(a.x, b.x); 29456 const yDelta = distance1D(a.y, b.y); 29457 const zDelta = isPoint3D(a) && isPoint3D(b) ? distance1D(a.z, b.z) : 0; 29458 return Math.sqrt(Math.pow(xDelta, 2) + Math.pow(yDelta, 2) + Math.pow(zDelta, 2)); 29459 } 29460 } 29461 29462 29463 29464 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/projection/geometry/delta-calc.mjs 29465 29466 29467 function calcLength(axis) { 29468 return axis.max - axis.min; 29469 } 29470 function isNear(value, target, maxDistance) { 29471 if (target === void 0) { target = 0; } 29472 if (maxDistance === void 0) { maxDistance = 0.01; } 29473 return distance(value, target) < maxDistance; 29474 } 29475 function calcAxisDelta(delta, source, target, origin) { 29476 if (origin === void 0) { origin = 0.5; } 29477 delta.origin = origin; 29478 delta.originPoint = mix(source.min, source.max, delta.origin); 29479 delta.scale = calcLength(target) / calcLength(source); 29480 if (isNear(delta.scale, 1, 0.0001) || isNaN(delta.scale)) 29481 delta.scale = 1; 29482 delta.translate = 29483 mix(target.min, target.max, delta.origin) - delta.originPoint; 29484 if (isNear(delta.translate) || isNaN(delta.translate)) 29485 delta.translate = 0; 29486 } 29487 function calcBoxDelta(delta, source, target, origin) { 29488 calcAxisDelta(delta.x, source.x, target.x, origin === null || origin === void 0 ? void 0 : origin.originX); 29489 calcAxisDelta(delta.y, source.y, target.y, origin === null || origin === void 0 ? void 0 : origin.originY); 29490 } 29491 function calcRelativeAxis(target, relative, parent) { 29492 target.min = parent.min + relative.min; 29493 target.max = target.min + calcLength(relative); 29494 } 29495 function calcRelativeBox(target, relative, parent) { 29496 calcRelativeAxis(target.x, relative.x, parent.x); 29497 calcRelativeAxis(target.y, relative.y, parent.y); 29498 } 29499 function calcRelativeAxisPosition(target, layout, parent) { 29500 target.min = layout.min - parent.min; 29501 target.max = target.min + calcLength(layout); 29502 } 29503 function calcRelativePosition(target, layout, parent) { 29504 calcRelativeAxisPosition(target.x, layout.x, parent.x); 29505 calcRelativeAxisPosition(target.y, layout.y, parent.y); 29506 } 29507 29508 29509 29510 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/projection/geometry/delta-remove.mjs 29511 29512 29513 29514 29515 29516 /** 29517 * Remove a delta from a point. This is essentially the steps of applyPointDelta in reverse 29518 */ 29519 function removePointDelta(point, translate, scale, originPoint, boxScale) { 29520 point -= translate; 29521 point = scalePoint(point, 1 / scale, originPoint); 29522 if (boxScale !== undefined) { 29523 point = scalePoint(point, 1 / boxScale, originPoint); 29524 } 29525 return point; 29526 } 29527 /** 29528 * Remove a delta from an axis. This is essentially the steps of applyAxisDelta in reverse 29529 */ 29530 function removeAxisDelta(axis, translate, scale, origin, boxScale, originAxis, sourceAxis) { 29531 if (translate === void 0) { translate = 0; } 29532 if (scale === void 0) { scale = 1; } 29533 if (origin === void 0) { origin = 0.5; } 29534 if (originAxis === void 0) { originAxis = axis; } 29535 if (sourceAxis === void 0) { sourceAxis = axis; } 29536 if (percent.test(translate)) { 29537 translate = parseFloat(translate); 29538 var relativeProgress = mix(sourceAxis.min, sourceAxis.max, translate / 100); 29539 translate = relativeProgress - sourceAxis.min; 29540 } 29541 if (typeof translate !== "number") 29542 return; 29543 var originPoint = mix(originAxis.min, originAxis.max, origin); 29544 if (axis === originAxis) 29545 originPoint -= translate; 29546 axis.min = removePointDelta(axis.min, translate, scale, originPoint, boxScale); 29547 axis.max = removePointDelta(axis.max, translate, scale, originPoint, boxScale); 29548 } 29549 /** 29550 * Remove a transforms from an axis. This is essentially the steps of applyAxisTransforms in reverse 29551 * and acts as a bridge between motion values and removeAxisDelta 29552 */ 29553 function removeAxisTransforms(axis, transforms, _a, origin, sourceAxis) { 29554 var _b = tslib_es6_read(_a, 3), key = _b[0], scaleKey = _b[1], originKey = _b[2]; 29555 removeAxisDelta(axis, transforms[key], transforms[scaleKey], transforms[originKey], transforms.scale, origin, sourceAxis); 29556 } 29557 /** 29558 * The names of the motion values we want to apply as translation, scale and origin. 29559 */ 29560 var delta_remove_xKeys = ["x", "scaleX", "originX"]; 29561 var delta_remove_yKeys = ["y", "scaleY", "originY"]; 29562 /** 29563 * Remove a transforms from an box. This is essentially the steps of applyAxisBox in reverse 29564 * and acts as a bridge between motion values and removeAxisDelta 29565 */ 29566 function removeBoxTransforms(box, transforms, originBox, sourceBox) { 29567 removeAxisTransforms(box.x, transforms, delta_remove_xKeys, originBox === null || originBox === void 0 ? void 0 : originBox.x, sourceBox === null || sourceBox === void 0 ? void 0 : sourceBox.x); 29568 removeAxisTransforms(box.y, transforms, delta_remove_yKeys, originBox === null || originBox === void 0 ? void 0 : originBox.y, sourceBox === null || sourceBox === void 0 ? void 0 : sourceBox.y); 29569 } 29570 29571 29572 29573 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/projection/geometry/models.mjs 29574 var createAxisDelta = function () { return ({ 29575 translate: 0, 29576 scale: 1, 29577 origin: 0, 29578 originPoint: 0, 29579 }); }; 29580 var createDelta = function () { return ({ 29581 x: createAxisDelta(), 29582 y: createAxisDelta(), 29583 }); }; 29584 var createAxis = function () { return ({ min: 0, max: 0 }); }; 29585 var createBox = function () { return ({ 29586 x: createAxis(), 29587 y: createAxis(), 29588 }); }; 29589 29590 29591 29592 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/projection/geometry/utils.mjs 29593 function isAxisDeltaZero(delta) { 29594 return delta.translate === 0 && delta.scale === 1; 29595 } 29596 function isDeltaZero(delta) { 29597 return isAxisDeltaZero(delta.x) && isAxisDeltaZero(delta.y); 29598 } 29599 function boxEquals(a, b) { 29600 return (a.x.min === b.x.min && 29601 a.x.max === b.x.max && 29602 a.y.min === b.y.min && 29603 a.y.max === b.y.max); 29604 } 29605 29606 29607 29608 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/projection/shared/stack.mjs 29609 29610 29611 var NodeStack = /** @class */ (function () { 29612 function NodeStack() { 29613 this.members = []; 29614 } 29615 NodeStack.prototype.add = function (node) { 29616 addUniqueItem(this.members, node); 29617 node.scheduleRender(); 29618 }; 29619 NodeStack.prototype.remove = function (node) { 29620 removeItem(this.members, node); 29621 if (node === this.prevLead) { 29622 this.prevLead = undefined; 29623 } 29624 if (node === this.lead) { 29625 var prevLead = this.members[this.members.length - 1]; 29626 if (prevLead) { 29627 this.promote(prevLead); 29628 } 29629 } 29630 }; 29631 NodeStack.prototype.relegate = function (node) { 29632 var indexOfNode = this.members.findIndex(function (member) { return node === member; }); 29633 if (indexOfNode === 0) 29634 return false; 29635 /** 29636 * Find the next projection node that is present 29637 */ 29638 var prevLead; 29639 for (var i = indexOfNode; i >= 0; i--) { 29640 var member = this.members[i]; 29641 if (member.isPresent !== false) { 29642 prevLead = member; 29643 break; 29644 } 29645 } 29646 if (prevLead) { 29647 this.promote(prevLead); 29648 return true; 29649 } 29650 else { 29651 return false; 29652 } 29653 }; 29654 NodeStack.prototype.promote = function (node, preserveFollowOpacity) { 29655 var _a; 29656 var prevLead = this.lead; 29657 if (node === prevLead) 29658 return; 29659 this.prevLead = prevLead; 29660 this.lead = node; 29661 node.show(); 29662 if (prevLead) { 29663 prevLead.instance && prevLead.scheduleRender(); 29664 node.scheduleRender(); 29665 node.resumeFrom = prevLead; 29666 if (preserveFollowOpacity) { 29667 node.resumeFrom.preserveOpacity = true; 29668 } 29669 if (prevLead.snapshot) { 29670 node.snapshot = prevLead.snapshot; 29671 node.snapshot.latestValues = 29672 prevLead.animationValues || prevLead.latestValues; 29673 node.snapshot.isShared = true; 29674 } 29675 if ((_a = node.root) === null || _a === void 0 ? void 0 : _a.isUpdating) { 29676 node.isLayoutDirty = true; 29677 } 29678 var crossfade = node.options.crossfade; 29679 if (crossfade === false) { 29680 prevLead.hide(); 29681 } 29682 /** 29683 * TODO: 29684 * - Test border radius when previous node was deleted 29685 * - boxShadow mixing 29686 * - Shared between element A in scrolled container and element B (scroll stays the same or changes) 29687 * - Shared between element A in transformed container and element B (transform stays the same or changes) 29688 * - Shared between element A in scrolled page and element B (scroll stays the same or changes) 29689 * --- 29690 * - Crossfade opacity of root nodes 29691 * - layoutId changes after animation 29692 * - layoutId changes mid animation 29693 */ 29694 } 29695 }; 29696 NodeStack.prototype.exitAnimationComplete = function () { 29697 this.members.forEach(function (node) { 29698 var _a, _b, _c, _d, _e; 29699 (_b = (_a = node.options).onExitComplete) === null || _b === void 0 ? void 0 : _b.call(_a); 29700 (_e = (_c = node.resumingFrom) === null || _c === void 0 ? void 0 : (_d = _c.options).onExitComplete) === null || _e === void 0 ? void 0 : _e.call(_d); 29701 }); 29702 }; 29703 NodeStack.prototype.scheduleRender = function () { 29704 this.members.forEach(function (node) { 29705 node.instance && node.scheduleRender(false); 29706 }); 29707 }; 29708 /** 29709 * Clear any leads that have been removed this render to prevent them from being 29710 * used in future animations and to prevent memory leaks 29711 */ 29712 NodeStack.prototype.removeLeadSnapshot = function () { 29713 if (this.lead && this.lead.snapshot) { 29714 this.lead.snapshot = undefined; 29715 } 29716 }; 29717 return NodeStack; 29718 }()); 29719 29720 29721 29722 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/projection/styles/scale-correction.mjs 29723 var scaleCorrectors = {}; 29724 function addScaleCorrector(correctors) { 29725 Object.assign(scaleCorrectors, correctors); 29726 } 29727 29728 29729 29730 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/projection/styles/transform.mjs 29731 var identityProjection = "translate3d(0px, 0px, 0) scale(1, 1)"; 29732 function buildProjectionTransform(delta, treeScale, latestTransform) { 29733 /** 29734 * The translations we use to calculate are always relative to the viewport coordinate space. 29735 * But when we apply scales, we also scale the coordinate space of an element and its children. 29736 * For instance if we have a treeScale (the culmination of all parent scales) of 0.5 and we need 29737 * to move an element 100 pixels, we actually need to move it 200 in within that scaled space. 29738 */ 29739 var xTranslate = delta.x.translate / treeScale.x; 29740 var yTranslate = delta.y.translate / treeScale.y; 29741 var transform = "translate3d(".concat(xTranslate, "px, ").concat(yTranslate, "px, 0) "); 29742 if (latestTransform) { 29743 var rotate = latestTransform.rotate, rotateX = latestTransform.rotateX, rotateY = latestTransform.rotateY; 29744 if (rotate) 29745 transform += "rotate(".concat(rotate, "deg) "); 29746 if (rotateX) 29747 transform += "rotateX(".concat(rotateX, "deg) "); 29748 if (rotateY) 29749 transform += "rotateY(".concat(rotateY, "deg) "); 29750 } 29751 transform += "scale(".concat(delta.x.scale, ", ").concat(delta.y.scale, ")"); 29752 return transform === identityProjection ? "none" : transform; 29753 } 29754 29755 29756 29757 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/projection/utils/each-axis.mjs 29758 function eachAxis(callback) { 29759 return [callback("x"), callback("y")]; 29760 } 29761 29762 29763 29764 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/html/utils/transform.mjs 29765 /** 29766 * A list of all transformable axes. We'll use this list to generated a version 29767 * of each axes for each transform. 29768 */ 29769 var transformAxes = ["", "X", "Y", "Z"]; 29770 /** 29771 * An ordered array of each transformable value. By default, transform values 29772 * will be sorted to this order. 29773 */ 29774 var order = ["translate", "scale", "rotate", "skew"]; 29775 /** 29776 * Generate a list of every possible transform key. 29777 */ 29778 var transformProps = ["transformPerspective", "x", "y", "z"]; 29779 order.forEach(function (operationKey) { 29780 return transformAxes.forEach(function (axesKey) { 29781 return transformProps.push(operationKey + axesKey); 29782 }); 29783 }); 29784 /** 29785 * A function to use with Array.sort to sort transform keys by their default order. 29786 */ 29787 function sortTransformProps(a, b) { 29788 return transformProps.indexOf(a) - transformProps.indexOf(b); 29789 } 29790 /** 29791 * A quick lookup for transform props. 29792 */ 29793 var transformPropSet = new Set(transformProps); 29794 function isTransformProp(key) { 29795 return transformPropSet.has(key); 29796 } 29797 /** 29798 * A quick lookup for transform origin props 29799 */ 29800 var transformOriginProps = new Set(["originX", "originY", "originZ"]); 29801 function isTransformOriginProp(key) { 29802 return transformOriginProps.has(key); 29803 } 29804 29805 29806 29807 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/utils/compare-by-depth.mjs 29808 var compareByDepth = function (a, b) { 29809 return a.depth - b.depth; 29810 }; 29811 29812 29813 29814 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/utils/flat-tree.mjs 29815 29816 29817 29818 var FlatTree = /** @class */ (function () { 29819 function FlatTree() { 29820 this.children = []; 29821 this.isDirty = false; 29822 } 29823 FlatTree.prototype.add = function (child) { 29824 addUniqueItem(this.children, child); 29825 this.isDirty = true; 29826 }; 29827 FlatTree.prototype.remove = function (child) { 29828 removeItem(this.children, child); 29829 this.isDirty = true; 29830 }; 29831 FlatTree.prototype.forEach = function (callback) { 29832 this.isDirty && this.children.sort(compareByDepth); 29833 this.isDirty = false; 29834 this.children.forEach(callback); 29835 }; 29836 return FlatTree; 29837 }()); 29838 29839 29840 29841 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/value/utils/resolve-motion-value.mjs 29842 29843 29844 29845 /** 29846 * If the provided value is a MotionValue, this returns the actual value, otherwise just the value itself 29847 * 29848 * TODO: Remove and move to library 29849 * 29850 * @internal 29851 */ 29852 function resolveMotionValue(value) { 29853 var unwrappedValue = isMotionValue(value) ? value.get() : value; 29854 return isCustomValue(unwrappedValue) 29855 ? unwrappedValue.toValue() 29856 : unwrappedValue; 29857 } 29858 29859 29860 29861 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/projection/node/create-projection-node.mjs 29862 29863 29864 29865 29866 29867 29868 29869 29870 29871 29872 29873 29874 29875 29876 29877 29878 29879 29880 29881 29882 29883 29884 /** 29885 * We use 1000 as the animation target as 0-1000 maps better to pixels than 0-1 29886 * which has a noticeable difference in spring animations 29887 */ 29888 var animationTarget = 1000; 29889 /** 29890 * This should only ever be modified on the client otherwise it'll 29891 * persist through server requests. If we need instanced states we 29892 * could lazy-init via root. 29893 */ 29894 var globalProjectionState = { 29895 /** 29896 * Global flag as to whether the tree has animated since the last time 29897 * we resized the window 29898 */ 29899 hasAnimatedSinceResize: true, 29900 /** 29901 * We set this to true once, on the first update. Any nodes added to the tree beyond that 29902 * update will be given a `data-projection-id` attribute. 29903 */ 29904 hasEverUpdated: false, 29905 }; 29906 function createProjectionNode(_a) { 29907 var attachResizeListener = _a.attachResizeListener, defaultParent = _a.defaultParent, measureScroll = _a.measureScroll, resetTransform = _a.resetTransform; 29908 return /** @class */ (function () { 29909 function ProjectionNode(id, latestValues, parent) { 29910 var _this = this; 29911 if (latestValues === void 0) { latestValues = {}; } 29912 if (parent === void 0) { parent = defaultParent === null || defaultParent === void 0 ? void 0 : defaultParent(); } 29913 /** 29914 * A Set containing all this component's children. This is used to iterate 29915 * through the children. 29916 * 29917 * TODO: This could be faster to iterate as a flat array stored on the root node. 29918 */ 29919 this.children = new Set(); 29920 /** 29921 * Options for the node. We use this to configure what kind of layout animations 29922 * we should perform (if any). 29923 */ 29924 this.options = {}; 29925 /** 29926 * We use this to detect when its safe to shut down part of a projection tree. 29927 * We have to keep projecting children for scale correction and relative projection 29928 * until all their parents stop performing layout animations. 29929 */ 29930 this.isTreeAnimating = false; 29931 this.isAnimationBlocked = false; 29932 /** 29933 * Flag to true if we think this layout has been changed. We can't always know this, 29934 * currently we set it to true every time a component renders, or if it has a layoutDependency 29935 * if that has changed between renders. Additionally, components can be grouped by LayoutGroup 29936 * and if one node is dirtied, they all are. 29937 */ 29938 this.isLayoutDirty = false; 29939 /** 29940 * Block layout updates for instant layout transitions throughout the tree. 29941 */ 29942 this.updateManuallyBlocked = false; 29943 this.updateBlockedByResize = false; 29944 /** 29945 * Set to true between the start of the first `willUpdate` call and the end of the `didUpdate` 29946 * call. 29947 */ 29948 this.isUpdating = false; 29949 /** 29950 * If this is an SVG element we currently disable projection transforms 29951 */ 29952 this.isSVG = false; 29953 /** 29954 * Flag to true (during promotion) if a node doing an instant layout transition needs to reset 29955 * its projection styles. 29956 */ 29957 this.needsReset = false; 29958 /** 29959 * Flags whether this node should have its transform reset prior to measuring. 29960 */ 29961 this.shouldResetTransform = false; 29962 /** 29963 * An object representing the calculated contextual/accumulated/tree scale. 29964 * This will be used to scale calculcated projection transforms, as these are 29965 * calculated in screen-space but need to be scaled for elements to actually 29966 * make it to their calculated destinations. 29967 * 29968 * TODO: Lazy-init 29969 */ 29970 this.treeScale = { x: 1, y: 1 }; 29971 /** 29972 * 29973 */ 29974 this.eventHandlers = new Map(); 29975 // Note: Currently only running on root node 29976 this.potentialNodes = new Map(); 29977 this.checkUpdateFailed = function () { 29978 if (_this.isUpdating) { 29979 _this.isUpdating = false; 29980 _this.clearAllSnapshots(); 29981 } 29982 }; 29983 this.updateProjection = function () { 29984 _this.nodes.forEach(resolveTargetDelta); 29985 _this.nodes.forEach(calcProjection); 29986 }; 29987 this.hasProjected = false; 29988 this.isVisible = true; 29989 this.animationProgress = 0; 29990 /** 29991 * Shared layout 29992 */ 29993 // TODO Only running on root node 29994 this.sharedNodes = new Map(); 29995 this.id = id; 29996 this.latestValues = latestValues; 29997 this.root = parent ? parent.root || parent : this; 29998 this.path = parent ? tslib_es6_spreadArray(tslib_es6_spreadArray([], tslib_es6_read(parent.path), false), [parent], false) : []; 29999 this.parent = parent; 30000 this.depth = parent ? parent.depth + 1 : 0; 30001 id && this.root.registerPotentialNode(id, this); 30002 for (var i = 0; i < this.path.length; i++) { 30003 this.path[i].shouldResetTransform = true; 30004 } 30005 if (this.root === this) 30006 this.nodes = new FlatTree(); 30007 } 30008 ProjectionNode.prototype.addEventListener = function (name, handler) { 30009 if (!this.eventHandlers.has(name)) { 30010 this.eventHandlers.set(name, new SubscriptionManager()); 30011 } 30012 return this.eventHandlers.get(name).add(handler); 30013 }; 30014 ProjectionNode.prototype.notifyListeners = function (name) { 30015 var args = []; 30016 for (var _i = 1; _i < arguments.length; _i++) { 30017 args[_i - 1] = arguments[_i]; 30018 } 30019 var subscriptionManager = this.eventHandlers.get(name); 30020 subscriptionManager === null || subscriptionManager === void 0 ? void 0 : subscriptionManager.notify.apply(subscriptionManager, tslib_es6_spreadArray([], tslib_es6_read(args), false)); 30021 }; 30022 ProjectionNode.prototype.hasListeners = function (name) { 30023 return this.eventHandlers.has(name); 30024 }; 30025 ProjectionNode.prototype.registerPotentialNode = function (id, node) { 30026 this.potentialNodes.set(id, node); 30027 }; 30028 /** 30029 * Lifecycles 30030 */ 30031 ProjectionNode.prototype.mount = function (instance, isLayoutDirty) { 30032 var _this = this; 30033 var _a; 30034 if (isLayoutDirty === void 0) { isLayoutDirty = false; } 30035 if (this.instance) 30036 return; 30037 this.isSVG = 30038 instance instanceof SVGElement && instance.tagName !== "svg"; 30039 this.instance = instance; 30040 var _b = this.options, layoutId = _b.layoutId, layout = _b.layout, visualElement = _b.visualElement; 30041 if (visualElement && !visualElement.getInstance()) { 30042 visualElement.mount(instance); 30043 } 30044 this.root.nodes.add(this); 30045 (_a = this.parent) === null || _a === void 0 ? void 0 : _a.children.add(this); 30046 this.id && this.root.potentialNodes.delete(this.id); 30047 if (isLayoutDirty && (layout || layoutId)) { 30048 this.isLayoutDirty = true; 30049 } 30050 if (attachResizeListener) { 30051 var unblockTimeout_1; 30052 var resizeUnblockUpdate_1 = function () { 30053 return (_this.root.updateBlockedByResize = false); 30054 }; 30055 attachResizeListener(instance, function () { 30056 _this.root.updateBlockedByResize = true; 30057 clearTimeout(unblockTimeout_1); 30058 unblockTimeout_1 = window.setTimeout(resizeUnblockUpdate_1, 250); 30059 if (globalProjectionState.hasAnimatedSinceResize) { 30060 globalProjectionState.hasAnimatedSinceResize = false; 30061 _this.nodes.forEach(finishAnimation); 30062 } 30063 }); 30064 } 30065 if (layoutId) { 30066 this.root.registerSharedNode(layoutId, this); 30067 } 30068 // Only register the handler if it requires layout animation 30069 if (this.options.animate !== false && 30070 visualElement && 30071 (layoutId || layout)) { 30072 this.addEventListener("didUpdate", function (_a) { 30073 var _b, _c, _d, _e, _f; 30074 var delta = _a.delta, hasLayoutChanged = _a.hasLayoutChanged, hasRelativeTargetChanged = _a.hasRelativeTargetChanged, newLayout = _a.layout; 30075 if (_this.isTreeAnimationBlocked()) { 30076 _this.target = undefined; 30077 _this.relativeTarget = undefined; 30078 return; 30079 } 30080 // TODO: Check here if an animation exists 30081 var layoutTransition = (_c = (_b = _this.options.transition) !== null && _b !== void 0 ? _b : visualElement.getDefaultTransition()) !== null && _c !== void 0 ? _c : defaultLayoutTransition; 30082 var _g = visualElement.getProps(), onLayoutAnimationStart = _g.onLayoutAnimationStart, onLayoutAnimationComplete = _g.onLayoutAnimationComplete; 30083 /** 30084 * The target layout of the element might stay the same, 30085 * but its position relative to its parent has changed. 30086 */ 30087 var targetChanged = !_this.targetLayout || 30088 !boxEquals(_this.targetLayout, newLayout) || 30089 hasRelativeTargetChanged; 30090 /** 30091 * If the layout hasn't seemed to have changed, it might be that the 30092 * element is visually in the same place in the document but its position 30093 * relative to its parent has indeed changed. So here we check for that. 30094 */ 30095 var hasOnlyRelativeTargetChanged = !hasLayoutChanged && hasRelativeTargetChanged; 30096 if (((_d = _this.resumeFrom) === null || _d === void 0 ? void 0 : _d.instance) || 30097 hasOnlyRelativeTargetChanged || 30098 (hasLayoutChanged && 30099 (targetChanged || !_this.currentAnimation))) { 30100 if (_this.resumeFrom) { 30101 _this.resumingFrom = _this.resumeFrom; 30102 _this.resumingFrom.resumingFrom = undefined; 30103 } 30104 _this.setAnimationOrigin(delta, hasOnlyRelativeTargetChanged); 30105 var animationOptions = __assign(__assign({}, getValueTransition(layoutTransition, "layout")), { onPlay: onLayoutAnimationStart, onComplete: onLayoutAnimationComplete }); 30106 if (visualElement.shouldReduceMotion) { 30107 animationOptions.delay = 0; 30108 animationOptions.type = false; 30109 } 30110 _this.startAnimation(animationOptions); 30111 } 30112 else { 30113 /** 30114 * If the layout hasn't changed and we have an animation that hasn't started yet, 30115 * finish it immediately. Otherwise it will be animating from a location 30116 * that was probably never commited to screen and look like a jumpy box. 30117 */ 30118 if (!hasLayoutChanged && 30119 _this.animationProgress === 0) { 30120 _this.finishAnimation(); 30121 } 30122 _this.isLead() && ((_f = (_e = _this.options).onExitComplete) === null || _f === void 0 ? void 0 : _f.call(_e)); 30123 } 30124 _this.targetLayout = newLayout; 30125 }); 30126 } 30127 }; 30128 ProjectionNode.prototype.unmount = function () { 30129 var _a, _b; 30130 this.options.layoutId && this.willUpdate(); 30131 this.root.nodes.remove(this); 30132 (_a = this.getStack()) === null || _a === void 0 ? void 0 : _a.remove(this); 30133 (_b = this.parent) === null || _b === void 0 ? void 0 : _b.children.delete(this); 30134 this.instance = undefined; 30135 cancelSync.preRender(this.updateProjection); 30136 }; 30137 // only on the root 30138 ProjectionNode.prototype.blockUpdate = function () { 30139 this.updateManuallyBlocked = true; 30140 }; 30141 ProjectionNode.prototype.unblockUpdate = function () { 30142 this.updateManuallyBlocked = false; 30143 }; 30144 ProjectionNode.prototype.isUpdateBlocked = function () { 30145 return this.updateManuallyBlocked || this.updateBlockedByResize; 30146 }; 30147 ProjectionNode.prototype.isTreeAnimationBlocked = function () { 30148 var _a; 30149 return (this.isAnimationBlocked || 30150 ((_a = this.parent) === null || _a === void 0 ? void 0 : _a.isTreeAnimationBlocked()) || 30151 false); 30152 }; 30153 // Note: currently only running on root node 30154 ProjectionNode.prototype.startUpdate = function () { 30155 var _a; 30156 if (this.isUpdateBlocked()) 30157 return; 30158 this.isUpdating = true; 30159 (_a = this.nodes) === null || _a === void 0 ? void 0 : _a.forEach(resetRotation); 30160 }; 30161 ProjectionNode.prototype.willUpdate = function (shouldNotifyListeners) { 30162 var _a, _b, _c; 30163 if (shouldNotifyListeners === void 0) { shouldNotifyListeners = true; } 30164 if (this.root.isUpdateBlocked()) { 30165 (_b = (_a = this.options).onExitComplete) === null || _b === void 0 ? void 0 : _b.call(_a); 30166 return; 30167 } 30168 !this.root.isUpdating && this.root.startUpdate(); 30169 if (this.isLayoutDirty) 30170 return; 30171 this.isLayoutDirty = true; 30172 for (var i = 0; i < this.path.length; i++) { 30173 var node = this.path[i]; 30174 node.shouldResetTransform = true; 30175 /** 30176 * TODO: Check we haven't updated the scroll 30177 * since the last didUpdate 30178 */ 30179 node.updateScroll(); 30180 } 30181 var _d = this.options, layoutId = _d.layoutId, layout = _d.layout; 30182 if (layoutId === undefined && !layout) 30183 return; 30184 var transformTemplate = (_c = this.options.visualElement) === null || _c === void 0 ? void 0 : _c.getProps().transformTemplate; 30185 this.prevTransformTemplateValue = transformTemplate === null || transformTemplate === void 0 ? void 0 : transformTemplate(this.latestValues, ""); 30186 this.updateSnapshot(); 30187 shouldNotifyListeners && this.notifyListeners("willUpdate"); 30188 }; 30189 // Note: Currently only running on root node 30190 ProjectionNode.prototype.didUpdate = function () { 30191 var updateWasBlocked = this.isUpdateBlocked(); 30192 // When doing an instant transition, we skip the layout update, 30193 // but should still clean up the measurements so that the next 30194 // snapshot could be taken correctly. 30195 if (updateWasBlocked) { 30196 this.unblockUpdate(); 30197 this.clearAllSnapshots(); 30198 this.nodes.forEach(clearMeasurements); 30199 return; 30200 } 30201 if (!this.isUpdating) 30202 return; 30203 this.isUpdating = false; 30204 /** 30205 * Search for and mount newly-added projection elements. 30206 * 30207 * TODO: Every time a new component is rendered we could search up the tree for 30208 * the closest mounted node and query from there rather than document. 30209 */ 30210 if (this.potentialNodes.size) { 30211 this.potentialNodes.forEach(mountNodeEarly); 30212 this.potentialNodes.clear(); 30213 } 30214 /** 30215 * Write 30216 */ 30217 this.nodes.forEach(resetTransformStyle); 30218 /** 30219 * Read ================== 30220 */ 30221 // Update layout measurements of updated children 30222 this.nodes.forEach(updateLayout); 30223 /** 30224 * Write 30225 */ 30226 // Notify listeners that the layout is updated 30227 this.nodes.forEach(notifyLayoutUpdate); 30228 this.clearAllSnapshots(); 30229 // Flush any scheduled updates 30230 flushSync.update(); 30231 flushSync.preRender(); 30232 flushSync.render(); 30233 }; 30234 ProjectionNode.prototype.clearAllSnapshots = function () { 30235 this.nodes.forEach(clearSnapshot); 30236 this.sharedNodes.forEach(removeLeadSnapshots); 30237 }; 30238 ProjectionNode.prototype.scheduleUpdateProjection = function () { 30239 es.preRender(this.updateProjection, false, true); 30240 }; 30241 ProjectionNode.prototype.scheduleCheckAfterUnmount = function () { 30242 var _this = this; 30243 /** 30244 * If the unmounting node is in a layoutGroup and did trigger a willUpdate, 30245 * we manually call didUpdate to give a chance to the siblings to animate. 30246 * Otherwise, cleanup all snapshots to prevents future nodes from reusing them. 30247 */ 30248 es.postRender(function () { 30249 if (_this.isLayoutDirty) { 30250 _this.root.didUpdate(); 30251 } 30252 else { 30253 _this.root.checkUpdateFailed(); 30254 } 30255 }); 30256 }; 30257 /** 30258 * Update measurements 30259 */ 30260 ProjectionNode.prototype.updateSnapshot = function () { 30261 if (this.snapshot || !this.instance) 30262 return; 30263 var measured = this.measure(); 30264 var layout = this.removeTransform(this.removeElementScroll(measured)); 30265 roundBox(layout); 30266 this.snapshot = { 30267 measured: measured, 30268 layout: layout, 30269 latestValues: {}, 30270 }; 30271 }; 30272 ProjectionNode.prototype.updateLayout = function () { 30273 var _a; 30274 if (!this.instance) 30275 return; 30276 // TODO: Incorporate into a forwarded scroll offset 30277 this.updateScroll(); 30278 if (!(this.options.alwaysMeasureLayout && this.isLead()) && 30279 !this.isLayoutDirty) { 30280 return; 30281 } 30282 /** 30283 * When a node is mounted, it simply resumes from the prevLead's 30284 * snapshot instead of taking a new one, but the ancestors scroll 30285 * might have updated while the prevLead is unmounted. We need to 30286 * update the scroll again to make sure the layout we measure is 30287 * up to date. 30288 */ 30289 if (this.resumeFrom && !this.resumeFrom.instance) { 30290 for (var i = 0; i < this.path.length; i++) { 30291 var node = this.path[i]; 30292 node.updateScroll(); 30293 } 30294 } 30295 var measured = this.measure(); 30296 roundBox(measured); 30297 var prevLayout = this.layout; 30298 this.layout = { 30299 measured: measured, 30300 actual: this.removeElementScroll(measured), 30301 }; 30302 this.layoutCorrected = createBox(); 30303 this.isLayoutDirty = false; 30304 this.projectionDelta = undefined; 30305 this.notifyListeners("measure", this.layout.actual); 30306 (_a = this.options.visualElement) === null || _a === void 0 ? void 0 : _a.notifyLayoutMeasure(this.layout.actual, prevLayout === null || prevLayout === void 0 ? void 0 : prevLayout.actual); 30307 }; 30308 ProjectionNode.prototype.updateScroll = function () { 30309 if (this.options.layoutScroll && this.instance) { 30310 this.scroll = measureScroll(this.instance); 30311 } 30312 }; 30313 ProjectionNode.prototype.resetTransform = function () { 30314 var _a; 30315 if (!resetTransform) 30316 return; 30317 var isResetRequested = this.isLayoutDirty || this.shouldResetTransform; 30318 var hasProjection = this.projectionDelta && !isDeltaZero(this.projectionDelta); 30319 var transformTemplate = (_a = this.options.visualElement) === null || _a === void 0 ? void 0 : _a.getProps().transformTemplate; 30320 var transformTemplateValue = transformTemplate === null || transformTemplate === void 0 ? void 0 : transformTemplate(this.latestValues, ""); 30321 var transformTemplateHasChanged = transformTemplateValue !== this.prevTransformTemplateValue; 30322 if (isResetRequested && 30323 (hasProjection || 30324 hasTransform(this.latestValues) || 30325 transformTemplateHasChanged)) { 30326 resetTransform(this.instance, transformTemplateValue); 30327 this.shouldResetTransform = false; 30328 this.scheduleRender(); 30329 } 30330 }; 30331 ProjectionNode.prototype.measure = function () { 30332 var visualElement = this.options.visualElement; 30333 if (!visualElement) 30334 return createBox(); 30335 var box = visualElement.measureViewportBox(); 30336 // Remove viewport scroll to give page-relative coordinates 30337 var scroll = this.root.scroll; 30338 if (scroll) { 30339 translateAxis(box.x, scroll.x); 30340 translateAxis(box.y, scroll.y); 30341 } 30342 return box; 30343 }; 30344 ProjectionNode.prototype.removeElementScroll = function (box) { 30345 var boxWithoutScroll = createBox(); 30346 copyBoxInto(boxWithoutScroll, box); 30347 /** 30348 * Performance TODO: Keep a cumulative scroll offset down the tree 30349 * rather than loop back up the path. 30350 */ 30351 for (var i = 0; i < this.path.length; i++) { 30352 var node = this.path[i]; 30353 var scroll_1 = node.scroll, options = node.options; 30354 if (node !== this.root && scroll_1 && options.layoutScroll) { 30355 translateAxis(boxWithoutScroll.x, scroll_1.x); 30356 translateAxis(boxWithoutScroll.y, scroll_1.y); 30357 } 30358 } 30359 return boxWithoutScroll; 30360 }; 30361 ProjectionNode.prototype.applyTransform = function (box, transformOnly) { 30362 if (transformOnly === void 0) { transformOnly = false; } 30363 var withTransforms = createBox(); 30364 copyBoxInto(withTransforms, box); 30365 for (var i = 0; i < this.path.length; i++) { 30366 var node = this.path[i]; 30367 if (!transformOnly && 30368 node.options.layoutScroll && 30369 node.scroll && 30370 node !== node.root) { 30371 transformBox(withTransforms, { 30372 x: -node.scroll.x, 30373 y: -node.scroll.y, 30374 }); 30375 } 30376 if (!hasTransform(node.latestValues)) 30377 continue; 30378 transformBox(withTransforms, node.latestValues); 30379 } 30380 if (hasTransform(this.latestValues)) { 30381 transformBox(withTransforms, this.latestValues); 30382 } 30383 return withTransforms; 30384 }; 30385 ProjectionNode.prototype.removeTransform = function (box) { 30386 var _a; 30387 var boxWithoutTransform = createBox(); 30388 copyBoxInto(boxWithoutTransform, box); 30389 for (var i = 0; i < this.path.length; i++) { 30390 var node = this.path[i]; 30391 if (!node.instance) 30392 continue; 30393 if (!hasTransform(node.latestValues)) 30394 continue; 30395 hasScale(node.latestValues) && node.updateSnapshot(); 30396 var sourceBox = createBox(); 30397 var nodeBox = node.measure(); 30398 copyBoxInto(sourceBox, nodeBox); 30399 removeBoxTransforms(boxWithoutTransform, node.latestValues, (_a = node.snapshot) === null || _a === void 0 ? void 0 : _a.layout, sourceBox); 30400 } 30401 if (hasTransform(this.latestValues)) { 30402 removeBoxTransforms(boxWithoutTransform, this.latestValues); 30403 } 30404 return boxWithoutTransform; 30405 }; 30406 /** 30407 * 30408 */ 30409 ProjectionNode.prototype.setTargetDelta = function (delta) { 30410 this.targetDelta = delta; 30411 this.root.scheduleUpdateProjection(); 30412 }; 30413 ProjectionNode.prototype.setOptions = function (options) { 30414 var _a; 30415 this.options = __assign(__assign(__assign({}, this.options), options), { crossfade: (_a = options.crossfade) !== null && _a !== void 0 ? _a : true }); 30416 }; 30417 ProjectionNode.prototype.clearMeasurements = function () { 30418 this.scroll = undefined; 30419 this.layout = undefined; 30420 this.snapshot = undefined; 30421 this.prevTransformTemplateValue = undefined; 30422 this.targetDelta = undefined; 30423 this.target = undefined; 30424 this.isLayoutDirty = false; 30425 }; 30426 /** 30427 * Frame calculations 30428 */ 30429 ProjectionNode.prototype.resolveTargetDelta = function () { 30430 var _a; 30431 var _b = this.options, layout = _b.layout, layoutId = _b.layoutId; 30432 /** 30433 * If we have no layout, we can't perform projection, so early return 30434 */ 30435 if (!this.layout || !(layout || layoutId)) 30436 return; 30437 /** 30438 * If we don't have a targetDelta but do have a layout, we can attempt to resolve 30439 * a relativeParent. This will allow a component to perform scale correction 30440 * even if no animation has started. 30441 */ 30442 // TODO If this is unsuccessful this currently happens every frame 30443 if (!this.targetDelta && !this.relativeTarget) { 30444 // TODO: This is a semi-repetition of further down this function, make DRY 30445 this.relativeParent = this.getClosestProjectingParent(); 30446 if (this.relativeParent && this.relativeParent.layout) { 30447 this.relativeTarget = createBox(); 30448 this.relativeTargetOrigin = createBox(); 30449 calcRelativePosition(this.relativeTargetOrigin, this.layout.actual, this.relativeParent.layout.actual); 30450 copyBoxInto(this.relativeTarget, this.relativeTargetOrigin); 30451 } 30452 } 30453 /** 30454 * If we have no relative target or no target delta our target isn't valid 30455 * for this frame. 30456 */ 30457 if (!this.relativeTarget && !this.targetDelta) 30458 return; 30459 /** 30460 * Lazy-init target data structure 30461 */ 30462 if (!this.target) { 30463 this.target = createBox(); 30464 this.targetWithTransforms = createBox(); 30465 } 30466 /** 30467 * If we've got a relative box for this component, resolve it into a target relative to the parent. 30468 */ 30469 if (this.relativeTarget && 30470 this.relativeTargetOrigin && 30471 ((_a = this.relativeParent) === null || _a === void 0 ? void 0 : _a.target)) { 30472 calcRelativeBox(this.target, this.relativeTarget, this.relativeParent.target); 30473 /** 30474 * If we've only got a targetDelta, resolve it into a target 30475 */ 30476 } 30477 else if (this.targetDelta) { 30478 if (Boolean(this.resumingFrom)) { 30479 // TODO: This is creating a new object every frame 30480 this.target = this.applyTransform(this.layout.actual); 30481 } 30482 else { 30483 copyBoxInto(this.target, this.layout.actual); 30484 } 30485 applyBoxDelta(this.target, this.targetDelta); 30486 } 30487 else { 30488 /** 30489 * If no target, use own layout as target 30490 */ 30491 copyBoxInto(this.target, this.layout.actual); 30492 } 30493 /** 30494 * If we've been told to attempt to resolve a relative target, do so. 30495 */ 30496 if (this.attemptToResolveRelativeTarget) { 30497 this.attemptToResolveRelativeTarget = false; 30498 this.relativeParent = this.getClosestProjectingParent(); 30499 if (this.relativeParent && 30500 Boolean(this.relativeParent.resumingFrom) === 30501 Boolean(this.resumingFrom) && 30502 !this.relativeParent.options.layoutScroll && 30503 this.relativeParent.target) { 30504 this.relativeTarget = createBox(); 30505 this.relativeTargetOrigin = createBox(); 30506 calcRelativePosition(this.relativeTargetOrigin, this.target, this.relativeParent.target); 30507 copyBoxInto(this.relativeTarget, this.relativeTargetOrigin); 30508 } 30509 } 30510 }; 30511 ProjectionNode.prototype.getClosestProjectingParent = function () { 30512 if (!this.parent || hasTransform(this.parent.latestValues)) 30513 return undefined; 30514 if ((this.parent.relativeTarget || this.parent.targetDelta) && 30515 this.parent.layout) { 30516 return this.parent; 30517 } 30518 else { 30519 return this.parent.getClosestProjectingParent(); 30520 } 30521 }; 30522 ProjectionNode.prototype.calcProjection = function () { 30523 var _a; 30524 var _b = this.options, layout = _b.layout, layoutId = _b.layoutId; 30525 /** 30526 * If this section of the tree isn't animating we can 30527 * delete our target sources for the following frame. 30528 */ 30529 this.isTreeAnimating = Boolean(((_a = this.parent) === null || _a === void 0 ? void 0 : _a.isTreeAnimating) || 30530 this.currentAnimation || 30531 this.pendingAnimation); 30532 if (!this.isTreeAnimating) { 30533 this.targetDelta = this.relativeTarget = undefined; 30534 } 30535 if (!this.layout || !(layout || layoutId)) 30536 return; 30537 var lead = this.getLead(); 30538 /** 30539 * Reset the corrected box with the latest values from box, as we're then going 30540 * to perform mutative operations on it. 30541 */ 30542 copyBoxInto(this.layoutCorrected, this.layout.actual); 30543 /** 30544 * Apply all the parent deltas to this box to produce the corrected box. This 30545 * is the layout box, as it will appear on screen as a result of the transforms of its parents. 30546 */ 30547 applyTreeDeltas(this.layoutCorrected, this.treeScale, this.path, Boolean(this.resumingFrom) || this !== lead); 30548 var target = lead.target; 30549 if (!target) 30550 return; 30551 if (!this.projectionDelta) { 30552 this.projectionDelta = createDelta(); 30553 this.projectionDeltaWithTransform = createDelta(); 30554 } 30555 var prevTreeScaleX = this.treeScale.x; 30556 var prevTreeScaleY = this.treeScale.y; 30557 var prevProjectionTransform = this.projectionTransform; 30558 /** 30559 * Update the delta between the corrected box and the target box before user-set transforms were applied. 30560 * This will allow us to calculate the corrected borderRadius and boxShadow to compensate 30561 * for our layout reprojection, but still allow them to be scaled correctly by the user. 30562 * It might be that to simplify this we may want to accept that user-set scale is also corrected 30563 * and we wouldn't have to keep and calc both deltas, OR we could support a user setting 30564 * to allow people to choose whether these styles are corrected based on just the 30565 * layout reprojection or the final bounding box. 30566 */ 30567 calcBoxDelta(this.projectionDelta, this.layoutCorrected, target, this.latestValues); 30568 this.projectionTransform = buildProjectionTransform(this.projectionDelta, this.treeScale); 30569 if (this.projectionTransform !== prevProjectionTransform || 30570 this.treeScale.x !== prevTreeScaleX || 30571 this.treeScale.y !== prevTreeScaleY) { 30572 this.hasProjected = true; 30573 this.scheduleRender(); 30574 this.notifyListeners("projectionUpdate", target); 30575 } 30576 }; 30577 ProjectionNode.prototype.hide = function () { 30578 this.isVisible = false; 30579 // TODO: Schedule render 30580 }; 30581 ProjectionNode.prototype.show = function () { 30582 this.isVisible = true; 30583 // TODO: Schedule render 30584 }; 30585 ProjectionNode.prototype.scheduleRender = function (notifyAll) { 30586 var _a, _b, _c; 30587 if (notifyAll === void 0) { notifyAll = true; } 30588 (_b = (_a = this.options).scheduleRender) === null || _b === void 0 ? void 0 : _b.call(_a); 30589 notifyAll && ((_c = this.getStack()) === null || _c === void 0 ? void 0 : _c.scheduleRender()); 30590 if (this.resumingFrom && !this.resumingFrom.instance) { 30591 this.resumingFrom = undefined; 30592 } 30593 }; 30594 ProjectionNode.prototype.setAnimationOrigin = function (delta, hasOnlyRelativeTargetChanged) { 30595 var _this = this; 30596 var _a; 30597 if (hasOnlyRelativeTargetChanged === void 0) { hasOnlyRelativeTargetChanged = false; } 30598 var snapshot = this.snapshot; 30599 var snapshotLatestValues = (snapshot === null || snapshot === void 0 ? void 0 : snapshot.latestValues) || {}; 30600 var mixedValues = __assign({}, this.latestValues); 30601 var targetDelta = createDelta(); 30602 this.relativeTarget = this.relativeTargetOrigin = undefined; 30603 this.attemptToResolveRelativeTarget = !hasOnlyRelativeTargetChanged; 30604 var relativeLayout = createBox(); 30605 var isSharedLayoutAnimation = snapshot === null || snapshot === void 0 ? void 0 : snapshot.isShared; 30606 var isOnlyMember = (((_a = this.getStack()) === null || _a === void 0 ? void 0 : _a.members.length) || 0) <= 1; 30607 var shouldCrossfadeOpacity = Boolean(isSharedLayoutAnimation && 30608 !isOnlyMember && 30609 this.options.crossfade === true && 30610 !this.path.some(hasOpacityCrossfade)); 30611 this.animationProgress = 0; 30612 this.mixTargetDelta = function (latest) { 30613 var _a; 30614 var progress = latest / 1000; 30615 mixAxisDelta(targetDelta.x, delta.x, progress); 30616 mixAxisDelta(targetDelta.y, delta.y, progress); 30617 _this.setTargetDelta(targetDelta); 30618 if (_this.relativeTarget && 30619 _this.relativeTargetOrigin && 30620 _this.layout && 30621 ((_a = _this.relativeParent) === null || _a === void 0 ? void 0 : _a.layout)) { 30622 calcRelativePosition(relativeLayout, _this.layout.actual, _this.relativeParent.layout.actual); 30623 mixBox(_this.relativeTarget, _this.relativeTargetOrigin, relativeLayout, progress); 30624 } 30625 if (isSharedLayoutAnimation) { 30626 _this.animationValues = mixedValues; 30627 mixValues(mixedValues, snapshotLatestValues, _this.latestValues, progress, shouldCrossfadeOpacity, isOnlyMember); 30628 } 30629 _this.root.scheduleUpdateProjection(); 30630 _this.scheduleRender(); 30631 _this.animationProgress = progress; 30632 }; 30633 this.mixTargetDelta(0); 30634 }; 30635 ProjectionNode.prototype.startAnimation = function (options) { 30636 var _this = this; 30637 var _a, _b; 30638 this.notifyListeners("animationStart"); 30639 (_a = this.currentAnimation) === null || _a === void 0 ? void 0 : _a.stop(); 30640 if (this.resumingFrom) { 30641 (_b = this.resumingFrom.currentAnimation) === null || _b === void 0 ? void 0 : _b.stop(); 30642 } 30643 if (this.pendingAnimation) { 30644 cancelSync.update(this.pendingAnimation); 30645 this.pendingAnimation = undefined; 30646 } 30647 /** 30648 * Start the animation in the next frame to have a frame with progress 0, 30649 * where the target is the same as when the animation started, so we can 30650 * calculate the relative positions correctly for instant transitions. 30651 */ 30652 this.pendingAnimation = es.update(function () { 30653 globalProjectionState.hasAnimatedSinceResize = true; 30654 _this.currentAnimation = animate_animate(0, animationTarget, __assign(__assign({}, options), { onUpdate: function (latest) { 30655 var _a; 30656 _this.mixTargetDelta(latest); 30657 (_a = options.onUpdate) === null || _a === void 0 ? void 0 : _a.call(options, latest); 30658 }, onComplete: function () { 30659 var _a; 30660 (_a = options.onComplete) === null || _a === void 0 ? void 0 : _a.call(options); 30661 _this.completeAnimation(); 30662 } })); 30663 if (_this.resumingFrom) { 30664 _this.resumingFrom.currentAnimation = _this.currentAnimation; 30665 } 30666 _this.pendingAnimation = undefined; 30667 }); 30668 }; 30669 ProjectionNode.prototype.completeAnimation = function () { 30670 var _a; 30671 if (this.resumingFrom) { 30672 this.resumingFrom.currentAnimation = undefined; 30673 this.resumingFrom.preserveOpacity = undefined; 30674 } 30675 (_a = this.getStack()) === null || _a === void 0 ? void 0 : _a.exitAnimationComplete(); 30676 this.resumingFrom = 30677 this.currentAnimation = 30678 this.animationValues = 30679 undefined; 30680 this.notifyListeners("animationComplete"); 30681 }; 30682 ProjectionNode.prototype.finishAnimation = function () { 30683 var _a; 30684 if (this.currentAnimation) { 30685 (_a = this.mixTargetDelta) === null || _a === void 0 ? void 0 : _a.call(this, animationTarget); 30686 this.currentAnimation.stop(); 30687 } 30688 this.completeAnimation(); 30689 }; 30690 ProjectionNode.prototype.applyTransformsToTarget = function () { 30691 var _a = this.getLead(), targetWithTransforms = _a.targetWithTransforms, target = _a.target, layout = _a.layout, latestValues = _a.latestValues; 30692 if (!targetWithTransforms || !target || !layout) 30693 return; 30694 copyBoxInto(targetWithTransforms, target); 30695 /** 30696 * Apply the latest user-set transforms to the targetBox to produce the targetBoxFinal. 30697 * This is the final box that we will then project into by calculating a transform delta and 30698 * applying it to the corrected box. 30699 */ 30700 transformBox(targetWithTransforms, latestValues); 30701 /** 30702 * Update the delta between the corrected box and the final target box, after 30703 * user-set transforms are applied to it. This will be used by the renderer to 30704 * create a transform style that will reproject the element from its actual layout 30705 * into the desired bounding box. 30706 */ 30707 calcBoxDelta(this.projectionDeltaWithTransform, this.layoutCorrected, targetWithTransforms, latestValues); 30708 }; 30709 ProjectionNode.prototype.registerSharedNode = function (layoutId, node) { 30710 var _a, _b, _c; 30711 if (!this.sharedNodes.has(layoutId)) { 30712 this.sharedNodes.set(layoutId, new NodeStack()); 30713 } 30714 var stack = this.sharedNodes.get(layoutId); 30715 stack.add(node); 30716 node.promote({ 30717 transition: (_a = node.options.initialPromotionConfig) === null || _a === void 0 ? void 0 : _a.transition, 30718 preserveFollowOpacity: (_c = (_b = node.options.initialPromotionConfig) === null || _b === void 0 ? void 0 : _b.shouldPreserveFollowOpacity) === null || _c === void 0 ? void 0 : _c.call(_b, node), 30719 }); 30720 }; 30721 ProjectionNode.prototype.isLead = function () { 30722 var stack = this.getStack(); 30723 return stack ? stack.lead === this : true; 30724 }; 30725 ProjectionNode.prototype.getLead = function () { 30726 var _a; 30727 var layoutId = this.options.layoutId; 30728 return layoutId ? ((_a = this.getStack()) === null || _a === void 0 ? void 0 : _a.lead) || this : this; 30729 }; 30730 ProjectionNode.prototype.getPrevLead = function () { 30731 var _a; 30732 var layoutId = this.options.layoutId; 30733 return layoutId ? (_a = this.getStack()) === null || _a === void 0 ? void 0 : _a.prevLead : undefined; 30734 }; 30735 ProjectionNode.prototype.getStack = function () { 30736 var layoutId = this.options.layoutId; 30737 if (layoutId) 30738 return this.root.sharedNodes.get(layoutId); 30739 }; 30740 ProjectionNode.prototype.promote = function (_a) { 30741 var _b = _a === void 0 ? {} : _a, needsReset = _b.needsReset, transition = _b.transition, preserveFollowOpacity = _b.preserveFollowOpacity; 30742 var stack = this.getStack(); 30743 if (stack) 30744 stack.promote(this, preserveFollowOpacity); 30745 if (needsReset) { 30746 this.projectionDelta = undefined; 30747 this.needsReset = true; 30748 } 30749 if (transition) 30750 this.setOptions({ transition: transition }); 30751 }; 30752 ProjectionNode.prototype.relegate = function () { 30753 var stack = this.getStack(); 30754 if (stack) { 30755 return stack.relegate(this); 30756 } 30757 else { 30758 return false; 30759 } 30760 }; 30761 ProjectionNode.prototype.resetRotation = function () { 30762 var visualElement = this.options.visualElement; 30763 if (!visualElement) 30764 return; 30765 // If there's no detected rotation values, we can early return without a forced render. 30766 var hasRotate = false; 30767 // Keep a record of all the values we've reset 30768 var resetValues = {}; 30769 // Check the rotate value of all axes and reset to 0 30770 for (var i = 0; i < transformAxes.length; i++) { 30771 var axis = transformAxes[i]; 30772 var key = "rotate" + axis; 30773 // If this rotation doesn't exist as a motion value, then we don't 30774 // need to reset it 30775 if (!visualElement.getStaticValue(key)) { 30776 continue; 30777 } 30778 hasRotate = true; 30779 // Record the rotation and then temporarily set it to 0 30780 resetValues[key] = visualElement.getStaticValue(key); 30781 visualElement.setStaticValue(key, 0); 30782 } 30783 // If there's no rotation values, we don't need to do any more. 30784 if (!hasRotate) 30785 return; 30786 // Force a render of this element to apply the transform with all rotations 30787 // set to 0. 30788 visualElement === null || visualElement === void 0 ? void 0 : visualElement.syncRender(); 30789 // Put back all the values we reset 30790 for (var key in resetValues) { 30791 visualElement.setStaticValue(key, resetValues[key]); 30792 } 30793 // Schedule a render for the next frame. This ensures we won't visually 30794 // see the element with the reset rotate value applied. 30795 visualElement.scheduleRender(); 30796 }; 30797 ProjectionNode.prototype.getProjectionStyles = function (styleProp) { 30798 var _a, _b, _c, _d, _e, _f; 30799 if (styleProp === void 0) { styleProp = {}; } 30800 // TODO: Return lifecycle-persistent object 30801 var styles = {}; 30802 if (!this.instance || this.isSVG) 30803 return styles; 30804 if (!this.isVisible) { 30805 return { visibility: "hidden" }; 30806 } 30807 else { 30808 styles.visibility = ""; 30809 } 30810 var transformTemplate = (_a = this.options.visualElement) === null || _a === void 0 ? void 0 : _a.getProps().transformTemplate; 30811 if (this.needsReset) { 30812 this.needsReset = false; 30813 styles.opacity = ""; 30814 styles.pointerEvents = 30815 resolveMotionValue(styleProp.pointerEvents) || ""; 30816 styles.transform = transformTemplate 30817 ? transformTemplate(this.latestValues, "") 30818 : "none"; 30819 return styles; 30820 } 30821 var lead = this.getLead(); 30822 if (!this.projectionDelta || !this.layout || !lead.target) { 30823 var emptyStyles = {}; 30824 if (this.options.layoutId) { 30825 emptyStyles.opacity = (_b = this.latestValues.opacity) !== null && _b !== void 0 ? _b : 1; 30826 emptyStyles.pointerEvents = 30827 resolveMotionValue(styleProp.pointerEvents) || ""; 30828 } 30829 if (this.hasProjected && !hasTransform(this.latestValues)) { 30830 emptyStyles.transform = transformTemplate 30831 ? transformTemplate({}, "") 30832 : "none"; 30833 this.hasProjected = false; 30834 } 30835 return emptyStyles; 30836 } 30837 var valuesToRender = lead.animationValues || lead.latestValues; 30838 this.applyTransformsToTarget(); 30839 styles.transform = buildProjectionTransform(this.projectionDeltaWithTransform, this.treeScale, valuesToRender); 30840 if (transformTemplate) { 30841 styles.transform = transformTemplate(valuesToRender, styles.transform); 30842 } 30843 var _g = this.projectionDelta, x = _g.x, y = _g.y; 30844 styles.transformOrigin = "".concat(x.origin * 100, "% ").concat(y.origin * 100, "% 0"); 30845 if (lead.animationValues) { 30846 /** 30847 * If the lead component is animating, assign this either the entering/leaving 30848 * opacity 30849 */ 30850 styles.opacity = 30851 lead === this 30852 ? (_d = (_c = valuesToRender.opacity) !== null && _c !== void 0 ? _c : this.latestValues.opacity) !== null && _d !== void 0 ? _d : 1 30853 : this.preserveOpacity 30854 ? this.latestValues.opacity 30855 : valuesToRender.opacityExit; 30856 } 30857 else { 30858 /** 30859 * Or we're not animating at all, set the lead component to its actual 30860 * opacity and other components to hidden. 30861 */ 30862 styles.opacity = 30863 lead === this 30864 ? (_e = valuesToRender.opacity) !== null && _e !== void 0 ? _e : "" 30865 : (_f = valuesToRender.opacityExit) !== null && _f !== void 0 ? _f : 0; 30866 } 30867 /** 30868 * Apply scale correction 30869 */ 30870 for (var key in scaleCorrectors) { 30871 if (valuesToRender[key] === undefined) 30872 continue; 30873 var _h = scaleCorrectors[key], correct = _h.correct, applyTo = _h.applyTo; 30874 var corrected = correct(valuesToRender[key], lead); 30875 if (applyTo) { 30876 var num = applyTo.length; 30877 for (var i = 0; i < num; i++) { 30878 styles[applyTo[i]] = corrected; 30879 } 30880 } 30881 else { 30882 styles[key] = corrected; 30883 } 30884 } 30885 /** 30886 * Disable pointer events on follow components. This is to ensure 30887 * that if a follow component covers a lead component it doesn't block 30888 * pointer events on the lead. 30889 */ 30890 if (this.options.layoutId) { 30891 styles.pointerEvents = 30892 lead === this 30893 ? resolveMotionValue(styleProp.pointerEvents) || "" 30894 : "none"; 30895 } 30896 return styles; 30897 }; 30898 ProjectionNode.prototype.clearSnapshot = function () { 30899 this.resumeFrom = this.snapshot = undefined; 30900 }; 30901 // Only run on root 30902 ProjectionNode.prototype.resetTree = function () { 30903 this.root.nodes.forEach(function (node) { var _a; return (_a = node.currentAnimation) === null || _a === void 0 ? void 0 : _a.stop(); }); 30904 this.root.nodes.forEach(clearMeasurements); 30905 this.root.sharedNodes.clear(); 30906 }; 30907 return ProjectionNode; 30908 }()); 30909 } 30910 function updateLayout(node) { 30911 node.updateLayout(); 30912 } 30913 function notifyLayoutUpdate(node) { 30914 var _a, _b, _c, _d; 30915 var snapshot = (_b = (_a = node.resumeFrom) === null || _a === void 0 ? void 0 : _a.snapshot) !== null && _b !== void 0 ? _b : node.snapshot; 30916 if (node.isLead() && 30917 node.layout && 30918 snapshot && 30919 node.hasListeners("didUpdate")) { 30920 var _e = node.layout, layout_1 = _e.actual, measuredLayout = _e.measured; 30921 // TODO Maybe we want to also resize the layout snapshot so we don't trigger 30922 // animations for instance if layout="size" and an element has only changed position 30923 if (node.options.animationType === "size") { 30924 eachAxis(function (axis) { 30925 var axisSnapshot = snapshot.isShared 30926 ? snapshot.measured[axis] 30927 : snapshot.layout[axis]; 30928 var length = calcLength(axisSnapshot); 30929 axisSnapshot.min = layout_1[axis].min; 30930 axisSnapshot.max = axisSnapshot.min + length; 30931 }); 30932 } 30933 else if (node.options.animationType === "position") { 30934 eachAxis(function (axis) { 30935 var axisSnapshot = snapshot.isShared 30936 ? snapshot.measured[axis] 30937 : snapshot.layout[axis]; 30938 var length = calcLength(layout_1[axis]); 30939 axisSnapshot.max = axisSnapshot.min + length; 30940 }); 30941 } 30942 var layoutDelta = createDelta(); 30943 calcBoxDelta(layoutDelta, layout_1, snapshot.layout); 30944 var visualDelta = createDelta(); 30945 if (snapshot.isShared) { 30946 calcBoxDelta(visualDelta, node.applyTransform(measuredLayout, true), snapshot.measured); 30947 } 30948 else { 30949 calcBoxDelta(visualDelta, layout_1, snapshot.layout); 30950 } 30951 var hasLayoutChanged = !isDeltaZero(layoutDelta); 30952 var hasRelativeTargetChanged = false; 30953 if (!node.resumeFrom) { 30954 node.relativeParent = node.getClosestProjectingParent(); 30955 /** 30956 * If the relativeParent is itself resuming from a different element then 30957 * the relative snapshot is not relavent 30958 */ 30959 if (node.relativeParent && !node.relativeParent.resumeFrom) { 30960 var _f = node.relativeParent, parentSnapshot = _f.snapshot, parentLayout = _f.layout; 30961 if (parentSnapshot && parentLayout) { 30962 var relativeSnapshot = createBox(); 30963 calcRelativePosition(relativeSnapshot, snapshot.layout, parentSnapshot.layout); 30964 var relativeLayout = createBox(); 30965 calcRelativePosition(relativeLayout, layout_1, parentLayout.actual); 30966 if (!boxEquals(relativeSnapshot, relativeLayout)) { 30967 hasRelativeTargetChanged = true; 30968 } 30969 } 30970 } 30971 } 30972 node.notifyListeners("didUpdate", { 30973 layout: layout_1, 30974 snapshot: snapshot, 30975 delta: visualDelta, 30976 layoutDelta: layoutDelta, 30977 hasLayoutChanged: hasLayoutChanged, 30978 hasRelativeTargetChanged: hasRelativeTargetChanged, 30979 }); 30980 } 30981 else if (node.isLead()) { 30982 (_d = (_c = node.options).onExitComplete) === null || _d === void 0 ? void 0 : _d.call(_c); 30983 } 30984 /** 30985 * Clearing transition 30986 * TODO: Investigate why this transition is being passed in as {type: false } from Framer 30987 * and why we need it at all 30988 */ 30989 node.options.transition = undefined; 30990 } 30991 function clearSnapshot(node) { 30992 node.clearSnapshot(); 30993 } 30994 function clearMeasurements(node) { 30995 node.clearMeasurements(); 30996 } 30997 function resetTransformStyle(node) { 30998 var visualElement = node.options.visualElement; 30999 if (visualElement === null || visualElement === void 0 ? void 0 : visualElement.getProps().onBeforeLayoutMeasure) { 31000 visualElement.notifyBeforeLayoutMeasure(); 31001 } 31002 node.resetTransform(); 31003 } 31004 function finishAnimation(node) { 31005 node.finishAnimation(); 31006 node.targetDelta = node.relativeTarget = node.target = undefined; 31007 } 31008 function resolveTargetDelta(node) { 31009 node.resolveTargetDelta(); 31010 } 31011 function calcProjection(node) { 31012 node.calcProjection(); 31013 } 31014 function resetRotation(node) { 31015 node.resetRotation(); 31016 } 31017 function removeLeadSnapshots(stack) { 31018 stack.removeLeadSnapshot(); 31019 } 31020 function mixAxisDelta(output, delta, p) { 31021 output.translate = mix(delta.translate, 0, p); 31022 output.scale = mix(delta.scale, 1, p); 31023 output.origin = delta.origin; 31024 output.originPoint = delta.originPoint; 31025 } 31026 function mixAxis(output, from, to, p) { 31027 output.min = mix(from.min, to.min, p); 31028 output.max = mix(from.max, to.max, p); 31029 } 31030 function mixBox(output, from, to, p) { 31031 mixAxis(output.x, from.x, to.x, p); 31032 mixAxis(output.y, from.y, to.y, p); 31033 } 31034 function hasOpacityCrossfade(node) { 31035 return (node.animationValues && node.animationValues.opacityExit !== undefined); 31036 } 31037 var defaultLayoutTransition = { 31038 duration: 0.45, 31039 ease: [0.4, 0, 0.1, 1], 31040 }; 31041 function mountNodeEarly(node, id) { 31042 /** 31043 * Rather than searching the DOM from document we can search the 31044 * path for the deepest mounted ancestor and search from there 31045 */ 31046 var searchNode = node.root; 31047 for (var i = node.path.length - 1; i >= 0; i--) { 31048 if (Boolean(node.path[i].instance)) { 31049 searchNode = node.path[i]; 31050 break; 31051 } 31052 } 31053 var searchElement = searchNode && searchNode !== node.root ? searchNode.instance : document; 31054 var element = searchElement.querySelector("[data-projection-id=\"".concat(id, "\"]")); 31055 if (element) 31056 node.mount(element, true); 31057 } 31058 function roundAxis(axis) { 31059 axis.min = Math.round(axis.min); 31060 axis.max = Math.round(axis.max); 31061 } 31062 function roundBox(box) { 31063 roundAxis(box.x); 31064 roundAxis(box.y); 31065 } 31066 31067 31068 31069 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/projection/node/id.mjs 31070 31071 31072 31073 var id = 1; 31074 function useProjectionId() { 31075 return useConstant(function () { 31076 if (globalProjectionState.hasEverUpdated) { 31077 return id++; 31078 } 31079 }); 31080 } 31081 31082 31083 31084 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/context/LayoutGroupContext.mjs 31085 31086 31087 /** 31088 * @internal 31089 */ 31090 var LayoutGroupContext = (0,external_React_.createContext)({}); 31091 31092 31093 31094 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/context/SwitchLayoutGroupContext.mjs 31095 31096 31097 /** 31098 * @internal 31099 */ 31100 var SwitchLayoutGroupContext = (0,external_React_.createContext)({}); 31101 31102 31103 31104 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/motion/features/use-projection.mjs 31105 31106 31107 31108 31109 function useProjection(projectionId, _a, visualElement, ProjectionNodeConstructor) { 31110 var _b; 31111 var layoutId = _a.layoutId, layout = _a.layout, drag = _a.drag, dragConstraints = _a.dragConstraints, layoutScroll = _a.layoutScroll; 31112 var initialPromotionConfig = (0,external_React_.useContext)(SwitchLayoutGroupContext); 31113 if (!ProjectionNodeConstructor || 31114 !visualElement || 31115 (visualElement === null || visualElement === void 0 ? void 0 : visualElement.projection)) { 31116 return; 31117 } 31118 visualElement.projection = new ProjectionNodeConstructor(projectionId, visualElement.getLatestValues(), (_b = visualElement.parent) === null || _b === void 0 ? void 0 : _b.projection); 31119 visualElement.projection.setOptions({ 31120 layoutId: layoutId, 31121 layout: layout, 31122 alwaysMeasureLayout: Boolean(drag) || (dragConstraints && is_ref_object_isRefObject(dragConstraints)), 31123 visualElement: visualElement, 31124 scheduleRender: function () { return visualElement.scheduleRender(); }, 31125 /** 31126 * TODO: Update options in an effect. This could be tricky as it'll be too late 31127 * to update by the time layout animations run. 31128 * We also need to fix this safeToRemove by linking it up to the one returned by usePresence, 31129 * ensuring it gets called if there's no potential layout animations. 31130 * 31131 */ 31132 animationType: typeof layout === "string" ? layout : "both", 31133 initialPromotionConfig: initialPromotionConfig, 31134 layoutScroll: layoutScroll, 31135 }); 31136 } 31137 31138 31139 31140 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/motion/utils/VisualElementHandler.mjs 31141 31142 31143 31144 var VisualElementHandler = /** @class */ (function (_super) { 31145 __extends(VisualElementHandler, _super); 31146 function VisualElementHandler() { 31147 return _super !== null && _super.apply(this, arguments) || this; 31148 } 31149 /** 31150 * Update visual element props as soon as we know this update is going to be commited. 31151 */ 31152 VisualElementHandler.prototype.getSnapshotBeforeUpdate = function () { 31153 this.updateProps(); 31154 return null; 31155 }; 31156 VisualElementHandler.prototype.componentDidUpdate = function () { }; 31157 VisualElementHandler.prototype.updateProps = function () { 31158 var _a = this.props, visualElement = _a.visualElement, props = _a.props; 31159 if (visualElement) 31160 visualElement.setProps(props); 31161 }; 31162 VisualElementHandler.prototype.render = function () { 31163 return this.props.children; 31164 }; 31165 return VisualElementHandler; 31166 }(external_React_.Component)); 31167 31168 31169 31170 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/motion/index.mjs 31171 31172 31173 31174 31175 31176 31177 31178 31179 31180 31181 31182 31183 31184 31185 31186 31187 /** 31188 * Create a `motion` component. 31189 * 31190 * This function accepts a Component argument, which can be either a string (ie "div" 31191 * for `motion.div`), or an actual React component. 31192 * 31193 * Alongside this is a config option which provides a way of rendering the provided 31194 * component "offline", or outside the React render cycle. 31195 * 31196 * @internal 31197 */ 31198 function motion_createMotionComponent(_a) { 31199 var preloadedFeatures = _a.preloadedFeatures, createVisualElement = _a.createVisualElement, projectionNodeConstructor = _a.projectionNodeConstructor, useRender = _a.useRender, useVisualState = _a.useVisualState, Component = _a.Component; 31200 preloadedFeatures && loadFeatures(preloadedFeatures); 31201 function MotionComponent(props, externalRef) { 31202 var layoutId = useLayoutId(props); 31203 props = __assign(__assign({}, props), { layoutId: layoutId }); 31204 /** 31205 * If we're rendering in a static environment, we only visually update the component 31206 * as a result of a React-rerender rather than interactions or animations. This 31207 * means we don't need to load additional memory structures like VisualElement, 31208 * or any gesture/animation features. 31209 */ 31210 var config = (0,external_React_.useContext)(MotionConfigContext); 31211 var features = null; 31212 var context = useCreateMotionContext(props); 31213 /** 31214 * Create a unique projection ID for this component. If a new component is added 31215 * during a layout animation we'll use this to query the DOM and hydrate its ref early, allowing 31216 * us to measure it as soon as any layout effect flushes pending layout animations. 31217 * 31218 * Performance note: It'd be better not to have to search the DOM for these elements. 31219 * For newly-entering components it could be enough to only correct treeScale, in which 31220 * case we could mount in a scale-correction mode. This wouldn't be enough for 31221 * shared element transitions however. Perhaps for those we could revert to a root node 31222 * that gets forceRendered and layout animations are triggered on its layout effect. 31223 */ 31224 var projectionId = config.isStatic ? undefined : useProjectionId(); 31225 /** 31226 * 31227 */ 31228 var visualState = useVisualState(props, config.isStatic); 31229 if (!config.isStatic && is_browser_isBrowser) { 31230 /** 31231 * Create a VisualElement for this component. A VisualElement provides a common 31232 * interface to renderer-specific APIs (ie DOM/Three.js etc) as well as 31233 * providing a way of rendering to these APIs outside of the React render loop 31234 * for more performant animations and interactions 31235 */ 31236 context.visualElement = useVisualElement(Component, visualState, __assign(__assign({}, config), props), createVisualElement); 31237 useProjection(projectionId, props, context.visualElement, projectionNodeConstructor || 31238 featureDefinitions.projectionNodeConstructor); 31239 /** 31240 * Load Motion gesture and animation features. These are rendered as renderless 31241 * components so each feature can optionally make use of React lifecycle methods. 31242 */ 31243 features = useFeatures(props, context.visualElement, preloadedFeatures); 31244 } 31245 /** 31246 * The mount order and hierarchy is specific to ensure our element ref 31247 * is hydrated by the time features fire their effects. 31248 */ 31249 return (external_React_.createElement(VisualElementHandler, { visualElement: context.visualElement, props: __assign(__assign({}, config), props) }, 31250 features, 31251 external_React_.createElement(MotionContext.Provider, { value: context }, useRender(Component, props, projectionId, useMotionRef(visualState, context.visualElement, externalRef), visualState, config.isStatic, context.visualElement)))); 31252 } 31253 return (0,external_React_.forwardRef)(MotionComponent); 31254 } 31255 function useLayoutId(_a) { 31256 var _b; 31257 var layoutId = _a.layoutId; 31258 var layoutGroupId = (_b = (0,external_React_.useContext)(LayoutGroupContext)) === null || _b === void 0 ? void 0 : _b.id; 31259 return layoutGroupId && layoutId !== undefined 31260 ? layoutGroupId + "-" + layoutId 31261 : layoutId; 31262 } 31263 31264 31265 31266 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/dom/motion-proxy.mjs 31267 31268 31269 /** 31270 * Convert any React component into a `motion` component. The provided component 31271 * **must** use `React.forwardRef` to the underlying DOM component you want to animate. 31272 * 31273 * ```jsx 31274 * const Component = React.forwardRef((props, ref) => { 31275 * return <div ref={ref} /> 31276 * }) 31277 * 31278 * const MotionComponent = motion(Component) 31279 * ``` 31280 * 31281 * @public 31282 */ 31283 function createMotionProxy(createConfig) { 31284 function custom(Component, customMotionComponentConfig) { 31285 if (customMotionComponentConfig === void 0) { customMotionComponentConfig = {}; } 31286 return motion_createMotionComponent(createConfig(Component, customMotionComponentConfig)); 31287 } 31288 if (typeof Proxy === "undefined") { 31289 return custom; 31290 } 31291 /** 31292 * A cache of generated `motion` components, e.g `motion.div`, `motion.input` etc. 31293 * Rather than generating them anew every render. 31294 */ 31295 var componentCache = new Map(); 31296 return new Proxy(custom, { 31297 /** 31298 * Called when `motion` is referenced with a prop: `motion.div`, `motion.input` etc. 31299 * The prop name is passed through as `key` and we can use that to generate a `motion` 31300 * DOM component with that name. 31301 */ 31302 get: function (_target, key) { 31303 /** 31304 * If this element doesn't exist in the component cache, create it and cache. 31305 */ 31306 if (!componentCache.has(key)) { 31307 componentCache.set(key, custom(key)); 31308 } 31309 return componentCache.get(key); 31310 }, 31311 }); 31312 } 31313 31314 31315 31316 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/svg/lowercase-elements.mjs 31317 /** 31318 * We keep these listed seperately as we use the lowercase tag names as part 31319 * of the runtime bundle to detect SVG components 31320 */ 31321 var lowercaseSVGElements = [ 31322 "animate", 31323 "circle", 31324 "defs", 31325 "desc", 31326 "ellipse", 31327 "g", 31328 "image", 31329 "line", 31330 "filter", 31331 "marker", 31332 "mask", 31333 "metadata", 31334 "path", 31335 "pattern", 31336 "polygon", 31337 "polyline", 31338 "rect", 31339 "stop", 31340 "svg", 31341 "switch", 31342 "symbol", 31343 "text", 31344 "tspan", 31345 "use", 31346 "view", 31347 ]; 31348 31349 31350 31351 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/dom/utils/is-svg-component.mjs 31352 31353 31354 function isSVGComponent(Component) { 31355 if ( 31356 /** 31357 * If it's not a string, it's a custom React component. Currently we only support 31358 * HTML custom React components. 31359 */ 31360 typeof Component !== "string" || 31361 /** 31362 * If it contains a dash, the element is a custom HTML webcomponent. 31363 */ 31364 Component.includes("-")) { 31365 return false; 31366 } 31367 else if ( 31368 /** 31369 * If it's in our list of lowercase SVG tags, it's an SVG component 31370 */ 31371 lowercaseSVGElements.indexOf(Component) > -1 || 31372 /** 31373 * If it contains a capital letter, it's an SVG component 31374 */ 31375 /[A-Z]/.test(Component)) { 31376 return true; 31377 } 31378 return false; 31379 } 31380 31381 31382 31383 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/motion/utils/is-forced-motion-value.mjs 31384 31385 31386 31387 function isForcedMotionValue(key, _a) { 31388 var layout = _a.layout, layoutId = _a.layoutId; 31389 return (isTransformProp(key) || 31390 isTransformOriginProp(key) || 31391 ((layout || layoutId !== undefined) && 31392 (!!scaleCorrectors[key] || key === "opacity"))); 31393 } 31394 31395 31396 31397 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/html/utils/build-transform.mjs 31398 31399 31400 var translateAlias = { 31401 x: "translateX", 31402 y: "translateY", 31403 z: "translateZ", 31404 transformPerspective: "perspective", 31405 }; 31406 /** 31407 * Build a CSS transform style from individual x/y/scale etc properties. 31408 * 31409 * This outputs with a default order of transforms/scales/rotations, this can be customised by 31410 * providing a transformTemplate function. 31411 */ 31412 function buildTransform(_a, _b, transformIsDefault, transformTemplate) { 31413 var transform = _a.transform, transformKeys = _a.transformKeys; 31414 var _c = _b.enableHardwareAcceleration, enableHardwareAcceleration = _c === void 0 ? true : _c, _d = _b.allowTransformNone, allowTransformNone = _d === void 0 ? true : _d; 31415 // The transform string we're going to build into. 31416 var transformString = ""; 31417 // Transform keys into their default order - this will determine the output order. 31418 transformKeys.sort(sortTransformProps); 31419 // Track whether the defined transform has a defined z so we don't add a 31420 // second to enable hardware acceleration 31421 var transformHasZ = false; 31422 // Loop over each transform and build them into transformString 31423 var numTransformKeys = transformKeys.length; 31424 for (var i = 0; i < numTransformKeys; i++) { 31425 var key = transformKeys[i]; 31426 transformString += "".concat(translateAlias[key] || key, "(").concat(transform[key], ") "); 31427 if (key === "z") 31428 transformHasZ = true; 31429 } 31430 if (!transformHasZ && enableHardwareAcceleration) { 31431 transformString += "translateZ(0)"; 31432 } 31433 else { 31434 transformString = transformString.trim(); 31435 } 31436 // If we have a custom `transform` template, pass our transform values and 31437 // generated transformString to that before returning 31438 if (transformTemplate) { 31439 transformString = transformTemplate(transform, transformIsDefault ? "" : transformString); 31440 } 31441 else if (allowTransformNone && transformIsDefault) { 31442 transformString = "none"; 31443 } 31444 return transformString; 31445 } 31446 /** 31447 * Build a transformOrigin style. Uses the same defaults as the browser for 31448 * undefined origins. 31449 */ 31450 function buildTransformOrigin(_a) { 31451 var _b = _a.originX, originX = _b === void 0 ? "50%" : _b, _c = _a.originY, originY = _c === void 0 ? "50%" : _c, _d = _a.originZ, originZ = _d === void 0 ? 0 : _d; 31452 return "".concat(originX, " ").concat(originY, " ").concat(originZ); 31453 } 31454 31455 31456 31457 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/dom/utils/is-css-variable.mjs 31458 /** 31459 * Returns true if the provided key is a CSS variable 31460 */ 31461 function isCSSVariable(key) { 31462 return key.startsWith("--"); 31463 } 31464 31465 31466 31467 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/dom/value-types/get-as-type.mjs 31468 /** 31469 * Provided a value and a ValueType, returns the value as that value type. 31470 */ 31471 var getValueAsType = function (value, type) { 31472 return type && typeof value === "number" 31473 ? type.transform(value) 31474 : value; 31475 }; 31476 31477 31478 31479 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/html/utils/build-styles.mjs 31480 31481 31482 31483 31484 31485 31486 function buildHTMLStyles(state, latestValues, options, transformTemplate) { 31487 var _a; 31488 var style = state.style, vars = state.vars, transform = state.transform, transformKeys = state.transformKeys, transformOrigin = state.transformOrigin; 31489 // Empty the transformKeys array. As we're throwing out refs to its items 31490 // this might not be as cheap as suspected. Maybe using the array as a buffer 31491 // with a manual incrementation would be better. 31492 transformKeys.length = 0; 31493 // Track whether we encounter any transform or transformOrigin values. 31494 var hasTransform = false; 31495 var hasTransformOrigin = false; 31496 // Does the calculated transform essentially equal "none"? 31497 var transformIsNone = true; 31498 /** 31499 * Loop over all our latest animated values and decide whether to handle them 31500 * as a style or CSS variable. 31501 * 31502 * Transforms and transform origins are kept seperately for further processing. 31503 */ 31504 for (var key in latestValues) { 31505 var value = latestValues[key]; 31506 /** 31507 * If this is a CSS variable we don't do any further processing. 31508 */ 31509 if (isCSSVariable(key)) { 31510 vars[key] = value; 31511 continue; 31512 } 31513 // Convert the value to its default value type, ie 0 -> "0px" 31514 var valueType = numberValueTypes[key]; 31515 var valueAsType = getValueAsType(value, valueType); 31516 if (isTransformProp(key)) { 31517 // If this is a transform, flag to enable further transform processing 31518 hasTransform = true; 31519 transform[key] = valueAsType; 31520 transformKeys.push(key); 31521 // If we already know we have a non-default transform, early return 31522 if (!transformIsNone) 31523 continue; 31524 // Otherwise check to see if this is a default transform 31525 if (value !== ((_a = valueType.default) !== null && _a !== void 0 ? _a : 0)) 31526 transformIsNone = false; 31527 } 31528 else if (isTransformOriginProp(key)) { 31529 transformOrigin[key] = valueAsType; 31530 // If this is a transform origin, flag and enable further transform-origin processing 31531 hasTransformOrigin = true; 31532 } 31533 else { 31534 style[key] = valueAsType; 31535 } 31536 } 31537 if (hasTransform) { 31538 style.transform = buildTransform(state, options, transformIsNone, transformTemplate); 31539 } 31540 else if (transformTemplate) { 31541 style.transform = transformTemplate({}, ""); 31542 } 31543 else if (!latestValues.transform && style.transform) { 31544 style.transform = "none"; 31545 } 31546 if (hasTransformOrigin) { 31547 style.transformOrigin = buildTransformOrigin(transformOrigin); 31548 } 31549 } 31550 31551 31552 31553 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/html/utils/create-render-state.mjs 31554 var createHtmlRenderState = function () { return ({ 31555 style: {}, 31556 transform: {}, 31557 transformKeys: [], 31558 transformOrigin: {}, 31559 vars: {}, 31560 }); }; 31561 31562 31563 31564 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/html/use-props.mjs 31565 31566 31567 31568 31569 31570 31571 31572 function copyRawValuesOnly(target, source, props) { 31573 for (var key in source) { 31574 if (!isMotionValue(source[key]) && !isForcedMotionValue(key, props)) { 31575 target[key] = source[key]; 31576 } 31577 } 31578 } 31579 function useInitialMotionValues(_a, visualState, isStatic) { 31580 var transformTemplate = _a.transformTemplate; 31581 return (0,external_React_.useMemo)(function () { 31582 var state = createHtmlRenderState(); 31583 buildHTMLStyles(state, visualState, { enableHardwareAcceleration: !isStatic }, transformTemplate); 31584 var vars = state.vars, style = state.style; 31585 return __assign(__assign({}, vars), style); 31586 }, [visualState]); 31587 } 31588 function useStyle(props, visualState, isStatic) { 31589 var styleProp = props.style || {}; 31590 var style = {}; 31591 /** 31592 * Copy non-Motion Values straight into style 31593 */ 31594 copyRawValuesOnly(style, styleProp, props); 31595 Object.assign(style, useInitialMotionValues(props, visualState, isStatic)); 31596 if (props.transformValues) { 31597 style = props.transformValues(style); 31598 } 31599 return style; 31600 } 31601 function useHTMLProps(props, visualState, isStatic) { 31602 // The `any` isn't ideal but it is the type of createElement props argument 31603 var htmlProps = {}; 31604 var style = useStyle(props, visualState, isStatic); 31605 if (Boolean(props.drag) && props.dragListener !== false) { 31606 // Disable the ghost element when a user drags 31607 htmlProps.draggable = false; 31608 // Disable text selection 31609 style.userSelect = 31610 style.WebkitUserSelect = 31611 style.WebkitTouchCallout = 31612 "none"; 31613 // Disable scrolling on the draggable direction 31614 style.touchAction = 31615 props.drag === true 31616 ? "none" 31617 : "pan-".concat(props.drag === "x" ? "y" : "x"); 31618 } 31619 htmlProps.style = style; 31620 return htmlProps; 31621 } 31622 31623 31624 31625 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/motion/utils/valid-prop.mjs 31626 /** 31627 * A list of all valid MotionProps. 31628 * 31629 * @internalremarks 31630 * This doesn't throw if a `MotionProp` name is missing - it should. 31631 */ 31632 var validMotionProps = new Set([ 31633 "initial", 31634 "animate", 31635 "exit", 31636 "style", 31637 "variants", 31638 "transition", 31639 "transformTemplate", 31640 "transformValues", 31641 "custom", 31642 "inherit", 31643 "layout", 31644 "layoutId", 31645 "layoutDependency", 31646 "onLayoutAnimationStart", 31647 "onLayoutAnimationComplete", 31648 "onLayoutMeasure", 31649 "onBeforeLayoutMeasure", 31650 "onAnimationStart", 31651 "onAnimationComplete", 31652 "onUpdate", 31653 "onDragStart", 31654 "onDrag", 31655 "onDragEnd", 31656 "onMeasureDragConstraints", 31657 "onDirectionLock", 31658 "onDragTransitionEnd", 31659 "drag", 31660 "dragControls", 31661 "dragListener", 31662 "dragConstraints", 31663 "dragDirectionLock", 31664 "dragSnapToOrigin", 31665 "_dragX", 31666 "_dragY", 31667 "dragElastic", 31668 "dragMomentum", 31669 "dragPropagation", 31670 "dragTransition", 31671 "whileDrag", 31672 "onPan", 31673 "onPanStart", 31674 "onPanEnd", 31675 "onPanSessionStart", 31676 "onTap", 31677 "onTapStart", 31678 "onTapCancel", 31679 "onHoverStart", 31680 "onHoverEnd", 31681 "whileFocus", 31682 "whileTap", 31683 "whileHover", 31684 "whileInView", 31685 "onViewportEnter", 31686 "onViewportLeave", 31687 "viewport", 31688 "layoutScroll", 31689 ]); 31690 /** 31691 * Check whether a prop name is a valid `MotionProp` key. 31692 * 31693 * @param key - Name of the property to check 31694 * @returns `true` is key is a valid `MotionProp`. 31695 * 31696 * @public 31697 */ 31698 function isValidMotionProp(key) { 31699 return validMotionProps.has(key); 31700 } 31701 31702 31703 31704 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/dom/utils/filter-props.mjs 31705 31706 31707 var shouldForward = function (key) { return !isValidMotionProp(key); }; 31708 function loadExternalIsValidProp(isValidProp) { 31709 if (!isValidProp) 31710 return; 31711 // Explicitly filter our events 31712 shouldForward = function (key) { 31713 return key.startsWith("on") ? !isValidMotionProp(key) : isValidProp(key); 31714 }; 31715 } 31716 /** 31717 * Emotion and Styled Components both allow users to pass through arbitrary props to their components 31718 * to dynamically generate CSS. They both use the `@emotion/is-prop-valid` package to determine which 31719 * of these should be passed to the underlying DOM node. 31720 * 31721 * However, when styling a Motion component `styled(motion.div)`, both packages pass through *all* props 31722 * as it's seen as an arbitrary component rather than a DOM node. Motion only allows arbitrary props 31723 * passed through the `custom` prop so it doesn't *need* the payload or computational overhead of 31724 * `@emotion/is-prop-valid`, however to fix this problem we need to use it. 31725 * 31726 * By making it an optionalDependency we can offer this functionality only in the situations where it's 31727 * actually required. 31728 */ 31729 try { 31730 /** 31731 * We attempt to import this package but require won't be defined in esm environments, in that case 31732 * isPropValid will have to be provided via `MotionContext`. In a 6.0.0 this should probably be removed 31733 * in favour of explicit injection. 31734 */ 31735 loadExternalIsValidProp(require("@emotion/is-prop-valid").default); 31736 } 31737 catch (_a) { 31738 // We don't need to actually do anything here - the fallback is the existing `isPropValid`. 31739 } 31740 function filterProps(props, isDom, forwardMotionProps) { 31741 var filteredProps = {}; 31742 for (var key in props) { 31743 if (shouldForward(key) || 31744 (forwardMotionProps === true && isValidMotionProp(key)) || 31745 (!isDom && !isValidMotionProp(key)) || 31746 // If trying to use native HTML drag events, forward drag listeners 31747 (props["draggable"] && key.startsWith("onDrag"))) { 31748 filteredProps[key] = props[key]; 31749 } 31750 } 31751 return filteredProps; 31752 } 31753 31754 31755 31756 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/svg/utils/transform-origin.mjs 31757 31758 31759 function calcOrigin(origin, offset, size) { 31760 return typeof origin === "string" 31761 ? origin 31762 : px.transform(offset + size * origin); 31763 } 31764 /** 31765 * The SVG transform origin defaults are different to CSS and is less intuitive, 31766 * so we use the measured dimensions of the SVG to reconcile these. 31767 */ 31768 function calcSVGTransformOrigin(dimensions, originX, originY) { 31769 var pxOriginX = calcOrigin(originX, dimensions.x, dimensions.width); 31770 var pxOriginY = calcOrigin(originY, dimensions.y, dimensions.height); 31771 return "".concat(pxOriginX, " ").concat(pxOriginY); 31772 } 31773 31774 31775 31776 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/svg/utils/path.mjs 31777 31778 31779 var dashKeys = { 31780 offset: "stroke-dashoffset", 31781 array: "stroke-dasharray", 31782 }; 31783 var camelKeys = { 31784 offset: "strokeDashoffset", 31785 array: "strokeDasharray", 31786 }; 31787 /** 31788 * Build SVG path properties. Uses the path's measured length to convert 31789 * our custom pathLength, pathSpacing and pathOffset into stroke-dashoffset 31790 * and stroke-dasharray attributes. 31791 * 31792 * This function is mutative to reduce per-frame GC. 31793 */ 31794 function buildSVGPath(attrs, length, spacing, offset, useDashCase) { 31795 if (spacing === void 0) { spacing = 1; } 31796 if (offset === void 0) { offset = 0; } 31797 if (useDashCase === void 0) { useDashCase = true; } 31798 // Normalise path length by setting SVG attribute pathLength to 1 31799 attrs.pathLength = 1; 31800 // We use dash case when setting attributes directly to the DOM node and camel case 31801 // when defining props on a React component. 31802 var keys = useDashCase ? dashKeys : camelKeys; 31803 // Build the dash offset 31804 attrs[keys.offset] = px.transform(-offset); 31805 // Build the dash array 31806 var pathLength = px.transform(length); 31807 var pathSpacing = px.transform(spacing); 31808 attrs[keys.array] = "".concat(pathLength, " ").concat(pathSpacing); 31809 } 31810 31811 31812 31813 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/svg/utils/build-attrs.mjs 31814 31815 31816 31817 31818 31819 /** 31820 * Build SVG visual attrbutes, like cx and style.transform 31821 */ 31822 function buildSVGAttrs(state, _a, options, transformTemplate) { 31823 var attrX = _a.attrX, attrY = _a.attrY, originX = _a.originX, originY = _a.originY, pathLength = _a.pathLength, _b = _a.pathSpacing, pathSpacing = _b === void 0 ? 1 : _b, _c = _a.pathOffset, pathOffset = _c === void 0 ? 0 : _c, 31824 // This is object creation, which we try to avoid per-frame. 31825 latest = __rest(_a, ["attrX", "attrY", "originX", "originY", "pathLength", "pathSpacing", "pathOffset"]); 31826 buildHTMLStyles(state, latest, options, transformTemplate); 31827 state.attrs = state.style; 31828 state.style = {}; 31829 var attrs = state.attrs, style = state.style, dimensions = state.dimensions; 31830 /** 31831 * However, we apply transforms as CSS transforms. So if we detect a transform we take it from attrs 31832 * and copy it into style. 31833 */ 31834 if (attrs.transform) { 31835 if (dimensions) 31836 style.transform = attrs.transform; 31837 delete attrs.transform; 31838 } 31839 // Parse transformOrigin 31840 if (dimensions && 31841 (originX !== undefined || originY !== undefined || style.transform)) { 31842 style.transformOrigin = calcSVGTransformOrigin(dimensions, originX !== undefined ? originX : 0.5, originY !== undefined ? originY : 0.5); 31843 } 31844 // Treat x/y not as shortcuts but as actual attributes 31845 if (attrX !== undefined) 31846 attrs.x = attrX; 31847 if (attrY !== undefined) 31848 attrs.y = attrY; 31849 // Build SVG path if one has been defined 31850 if (pathLength !== undefined) { 31851 buildSVGPath(attrs, pathLength, pathSpacing, pathOffset, false); 31852 } 31853 } 31854 31855 31856 31857 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/svg/utils/create-render-state.mjs 31858 31859 31860 31861 var createSvgRenderState = function () { return (__assign(__assign({}, createHtmlRenderState()), { attrs: {} })); }; 31862 31863 31864 31865 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/svg/use-props.mjs 31866 31867 31868 31869 31870 31871 31872 function useSVGProps(props, visualState) { 31873 var visualProps = (0,external_React_.useMemo)(function () { 31874 var state = createSvgRenderState(); 31875 buildSVGAttrs(state, visualState, { enableHardwareAcceleration: false }, props.transformTemplate); 31876 return __assign(__assign({}, state.attrs), { style: __assign({}, state.style) }); 31877 }, [visualState]); 31878 if (props.style) { 31879 var rawStyles = {}; 31880 copyRawValuesOnly(rawStyles, props.style, props); 31881 visualProps.style = __assign(__assign({}, rawStyles), visualProps.style); 31882 } 31883 return visualProps; 31884 } 31885 31886 31887 31888 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/dom/use-render.mjs 31889 31890 31891 31892 31893 31894 31895 31896 function createUseRender(forwardMotionProps) { 31897 if (forwardMotionProps === void 0) { forwardMotionProps = false; } 31898 var useRender = function (Component, props, projectionId, ref, _a, isStatic) { 31899 var latestValues = _a.latestValues; 31900 var useVisualProps = isSVGComponent(Component) 31901 ? useSVGProps 31902 : useHTMLProps; 31903 var visualProps = useVisualProps(props, latestValues, isStatic); 31904 var filteredProps = filterProps(props, typeof Component === "string", forwardMotionProps); 31905 var elementProps = __assign(__assign(__assign({}, filteredProps), visualProps), { ref: ref }); 31906 if (projectionId) { 31907 elementProps["data-projection-id"] = projectionId; 31908 } 31909 return (0,external_React_.createElement)(Component, elementProps); 31910 }; 31911 return useRender; 31912 } 31913 31914 31915 31916 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/dom/utils/camel-to-dash.mjs 31917 var CAMEL_CASE_PATTERN = /([a-z])([A-Z])/g; 31918 var REPLACE_TEMPLATE = "$1-$2"; 31919 /** 31920 * Convert camelCase to dash-case properties. 31921 */ 31922 var camelToDash = function (str) { 31923 return str.replace(CAMEL_CASE_PATTERN, REPLACE_TEMPLATE).toLowerCase(); 31924 }; 31925 31926 31927 31928 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/html/utils/render.mjs 31929 function renderHTML(element, _a, styleProp, projection) { 31930 var style = _a.style, vars = _a.vars; 31931 Object.assign(element.style, style, projection && projection.getProjectionStyles(styleProp)); 31932 // Loop over any CSS variables and assign those. 31933 for (var key in vars) { 31934 element.style.setProperty(key, vars[key]); 31935 } 31936 } 31937 31938 31939 31940 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/svg/utils/camel-case-attrs.mjs 31941 /** 31942 * A set of attribute names that are always read/written as camel case. 31943 */ 31944 var camelCaseAttributes = new Set([ 31945 "baseFrequency", 31946 "diffuseConstant", 31947 "kernelMatrix", 31948 "kernelUnitLength", 31949 "keySplines", 31950 "keyTimes", 31951 "limitingConeAngle", 31952 "markerHeight", 31953 "markerWidth", 31954 "numOctaves", 31955 "targetX", 31956 "targetY", 31957 "surfaceScale", 31958 "specularConstant", 31959 "specularExponent", 31960 "stdDeviation", 31961 "tableValues", 31962 "viewBox", 31963 "gradientTransform", 31964 "pathLength", 31965 ]); 31966 31967 31968 31969 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/svg/utils/render.mjs 31970 31971 31972 31973 31974 function renderSVG(element, renderState, _styleProp, projection) { 31975 renderHTML(element, renderState, undefined, projection); 31976 for (var key in renderState.attrs) { 31977 element.setAttribute(!camelCaseAttributes.has(key) ? camelToDash(key) : key, renderState.attrs[key]); 31978 } 31979 } 31980 31981 31982 31983 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/html/utils/scrape-motion-values.mjs 31984 31985 31986 31987 function scrapeMotionValuesFromProps(props) { 31988 var style = props.style; 31989 var newValues = {}; 31990 for (var key in style) { 31991 if (isMotionValue(style[key]) || isForcedMotionValue(key, props)) { 31992 newValues[key] = style[key]; 31993 } 31994 } 31995 return newValues; 31996 } 31997 31998 31999 32000 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/svg/utils/scrape-motion-values.mjs 32001 32002 32003 32004 function scrape_motion_values_scrapeMotionValuesFromProps(props) { 32005 var newValues = scrapeMotionValuesFromProps(props); 32006 for (var key in props) { 32007 if (isMotionValue(props[key])) { 32008 var targetKey = key === "x" || key === "y" ? "attr" + key.toUpperCase() : key; 32009 newValues[targetKey] = props[key]; 32010 } 32011 } 32012 return newValues; 32013 } 32014 32015 32016 32017 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/animation/utils/is-animation-controls.mjs 32018 function isAnimationControls(v) { 32019 return typeof v === "object" && typeof v.start === "function"; 32020 } 32021 32022 32023 32024 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/motion/utils/use-visual-state.mjs 32025 32026 32027 32028 32029 32030 32031 32032 32033 32034 function makeState(_a, props, context, presenceContext) { 32035 var scrapeMotionValuesFromProps = _a.scrapeMotionValuesFromProps, createRenderState = _a.createRenderState, onMount = _a.onMount; 32036 var state = { 32037 latestValues: makeLatestValues(props, context, presenceContext, scrapeMotionValuesFromProps), 32038 renderState: createRenderState(), 32039 }; 32040 if (onMount) { 32041 state.mount = function (instance) { return onMount(props, instance, state); }; 32042 } 32043 return state; 32044 } 32045 var makeUseVisualState = function (config) { 32046 return function (props, isStatic) { 32047 var context = (0,external_React_.useContext)(MotionContext); 32048 var presenceContext = (0,external_React_.useContext)(PresenceContext_PresenceContext); 32049 return isStatic 32050 ? makeState(config, props, context, presenceContext) 32051 : useConstant(function () { 32052 return makeState(config, props, context, presenceContext); 32053 }); 32054 }; 32055 }; 32056 function makeLatestValues(props, context, presenceContext, scrapeMotionValues) { 32057 var values = {}; 32058 var blockInitialAnimation = (presenceContext === null || presenceContext === void 0 ? void 0 : presenceContext.initial) === false; 32059 var motionValues = scrapeMotionValues(props); 32060 for (var key in motionValues) { 32061 values[key] = resolveMotionValue(motionValues[key]); 32062 } 32063 var initial = props.initial, animate = props.animate; 32064 var isControllingVariants = checkIfControllingVariants(props); 32065 var isVariantNode = checkIfVariantNode(props); 32066 if (context && 32067 isVariantNode && 32068 !isControllingVariants && 32069 props.inherit !== false) { 32070 initial !== null && initial !== void 0 ? initial : (initial = context.initial); 32071 animate !== null && animate !== void 0 ? animate : (animate = context.animate); 32072 } 32073 var initialAnimationIsBlocked = blockInitialAnimation || initial === false; 32074 var variantToSet = initialAnimationIsBlocked ? animate : initial; 32075 if (variantToSet && 32076 typeof variantToSet !== "boolean" && 32077 !isAnimationControls(variantToSet)) { 32078 var list = Array.isArray(variantToSet) ? variantToSet : [variantToSet]; 32079 list.forEach(function (definition) { 32080 var resolved = resolveVariantFromProps(props, definition); 32081 if (!resolved) 32082 return; 32083 var transitionEnd = resolved.transitionEnd; resolved.transition; var target = __rest(resolved, ["transitionEnd", "transition"]); 32084 for (var key in target) { 32085 var valueTarget = target[key]; 32086 if (Array.isArray(valueTarget)) { 32087 /** 32088 * Take final keyframe if the initial animation is blocked because 32089 * we want to initialise at the end of that blocked animation. 32090 */ 32091 var index = initialAnimationIsBlocked 32092 ? valueTarget.length - 1 32093 : 0; 32094 valueTarget = valueTarget[index]; 32095 } 32096 if (valueTarget !== null) { 32097 values[key] = valueTarget; 32098 } 32099 } 32100 for (var key in transitionEnd) 32101 values[key] = transitionEnd[key]; 32102 }); 32103 } 32104 return values; 32105 } 32106 32107 32108 32109 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/svg/config-motion.mjs 32110 32111 32112 32113 32114 32115 32116 var svgMotionConfig = { 32117 useVisualState: makeUseVisualState({ 32118 scrapeMotionValuesFromProps: scrape_motion_values_scrapeMotionValuesFromProps, 32119 createRenderState: createSvgRenderState, 32120 onMount: function (props, instance, _a) { 32121 var renderState = _a.renderState, latestValues = _a.latestValues; 32122 try { 32123 renderState.dimensions = 32124 typeof instance.getBBox === 32125 "function" 32126 ? instance.getBBox() 32127 : instance.getBoundingClientRect(); 32128 } 32129 catch (e) { 32130 // Most likely trying to measure an unrendered element under Firefox 32131 renderState.dimensions = { 32132 x: 0, 32133 y: 0, 32134 width: 0, 32135 height: 0, 32136 }; 32137 } 32138 buildSVGAttrs(renderState, latestValues, { enableHardwareAcceleration: false }, props.transformTemplate); 32139 renderSVG(instance, renderState); 32140 }, 32141 }), 32142 }; 32143 32144 32145 32146 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/html/config-motion.mjs 32147 32148 32149 32150 32151 var htmlMotionConfig = { 32152 useVisualState: makeUseVisualState({ 32153 scrapeMotionValuesFromProps: scrapeMotionValuesFromProps, 32154 createRenderState: createHtmlRenderState, 32155 }), 32156 }; 32157 32158 32159 32160 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/dom/utils/create-config.mjs 32161 32162 32163 32164 32165 32166 32167 function create_config_createDomMotionConfig(Component, _a, preloadedFeatures, createVisualElement, projectionNodeConstructor) { 32168 var _b = _a.forwardMotionProps, forwardMotionProps = _b === void 0 ? false : _b; 32169 var baseConfig = isSVGComponent(Component) 32170 ? svgMotionConfig 32171 : htmlMotionConfig; 32172 return __assign(__assign({}, baseConfig), { preloadedFeatures: preloadedFeatures, useRender: createUseRender(forwardMotionProps), createVisualElement: createVisualElement, projectionNodeConstructor: projectionNodeConstructor, Component: Component }); 32173 } 32174 32175 32176 32177 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/utils/types.mjs 32178 var AnimationType; 32179 (function (AnimationType) { 32180 AnimationType["Animate"] = "animate"; 32181 AnimationType["Hover"] = "whileHover"; 32182 AnimationType["Tap"] = "whileTap"; 32183 AnimationType["Drag"] = "whileDrag"; 32184 AnimationType["Focus"] = "whileFocus"; 32185 AnimationType["InView"] = "whileInView"; 32186 AnimationType["Exit"] = "exit"; 32187 })(AnimationType || (AnimationType = {})); 32188 32189 32190 32191 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/events/use-dom-event.mjs 32192 32193 32194 function addDomEvent(target, eventName, handler, options) { 32195 target.addEventListener(eventName, handler, options); 32196 return function () { return target.removeEventListener(eventName, handler, options); }; 32197 } 32198 /** 32199 * Attaches an event listener directly to the provided DOM element. 32200 * 32201 * Bypassing React's event system can be desirable, for instance when attaching non-passive 32202 * event handlers. 32203 * 32204 * ```jsx 32205 * const ref = useRef(null) 32206 * 32207 * useDomEvent(ref, 'wheel', onWheel, { passive: false }) 32208 * 32209 * return <div ref={ref} /> 32210 * ``` 32211 * 32212 * @param ref - React.RefObject that's been provided to the element you want to bind the listener to. 32213 * @param eventName - Name of the event you want listen for. 32214 * @param handler - Function to fire when receiving the event. 32215 * @param options - Options to pass to `Event.addEventListener`. 32216 * 32217 * @public 32218 */ 32219 function useDomEvent(ref, eventName, handler, options) { 32220 (0,external_React_.useEffect)(function () { 32221 var element = ref.current; 32222 if (handler && element) { 32223 return addDomEvent(element, eventName, handler, options); 32224 } 32225 }, [ref, eventName, handler, options]); 32226 } 32227 32228 32229 32230 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/gestures/use-focus-gesture.mjs 32231 32232 32233 32234 /** 32235 * 32236 * @param props 32237 * @param ref 32238 * @internal 32239 */ 32240 function useFocusGesture(_a) { 32241 var whileFocus = _a.whileFocus, visualElement = _a.visualElement; 32242 var onFocus = function () { 32243 var _a; 32244 (_a = visualElement.animationState) === null || _a === void 0 ? void 0 : _a.setActive(AnimationType.Focus, true); 32245 }; 32246 var onBlur = function () { 32247 var _a; 32248 (_a = visualElement.animationState) === null || _a === void 0 ? void 0 : _a.setActive(AnimationType.Focus, false); 32249 }; 32250 useDomEvent(visualElement, "focus", whileFocus ? onFocus : undefined); 32251 useDomEvent(visualElement, "blur", whileFocus ? onBlur : undefined); 32252 } 32253 32254 32255 32256 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/gestures/utils/event-type.mjs 32257 function isMouseEvent(event) { 32258 // PointerEvent inherits from MouseEvent so we can't use a straight instanceof check. 32259 if (typeof PointerEvent !== "undefined" && event instanceof PointerEvent) { 32260 return !!(event.pointerType === "mouse"); 32261 } 32262 return event instanceof MouseEvent; 32263 } 32264 function isTouchEvent(event) { 32265 var hasTouches = !!event.touches; 32266 return hasTouches; 32267 } 32268 32269 32270 32271 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/events/event-info.mjs 32272 32273 32274 /** 32275 * Filters out events not attached to the primary pointer (currently left mouse button) 32276 * @param eventHandler 32277 */ 32278 function filterPrimaryPointer(eventHandler) { 32279 return function (event) { 32280 var isMouseEvent = event instanceof MouseEvent; 32281 var isPrimaryPointer = !isMouseEvent || 32282 (isMouseEvent && event.button === 0); 32283 if (isPrimaryPointer) { 32284 eventHandler(event); 32285 } 32286 }; 32287 } 32288 var defaultPagePoint = { pageX: 0, pageY: 0 }; 32289 function pointFromTouch(e, pointType) { 32290 if (pointType === void 0) { pointType = "page"; } 32291 var primaryTouch = e.touches[0] || e.changedTouches[0]; 32292 var point = primaryTouch || defaultPagePoint; 32293 return { 32294 x: point[pointType + "X"], 32295 y: point[pointType + "Y"], 32296 }; 32297 } 32298 function pointFromMouse(point, pointType) { 32299 if (pointType === void 0) { pointType = "page"; } 32300 return { 32301 x: point[pointType + "X"], 32302 y: point[pointType + "Y"], 32303 }; 32304 } 32305 function extractEventInfo(event, pointType) { 32306 if (pointType === void 0) { pointType = "page"; } 32307 return { 32308 point: isTouchEvent(event) 32309 ? pointFromTouch(event, pointType) 32310 : pointFromMouse(event, pointType), 32311 }; 32312 } 32313 var wrapHandler = function (handler, shouldFilterPrimaryPointer) { 32314 if (shouldFilterPrimaryPointer === void 0) { shouldFilterPrimaryPointer = false; } 32315 var listener = function (event) { 32316 return handler(event, extractEventInfo(event)); 32317 }; 32318 return shouldFilterPrimaryPointer 32319 ? filterPrimaryPointer(listener) 32320 : listener; 32321 }; 32322 32323 32324 32325 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/events/utils.mjs 32326 32327 32328 // We check for event support via functions in case they've been mocked by a testing suite. 32329 var supportsPointerEvents = function () { 32330 return is_browser_isBrowser && window.onpointerdown === null; 32331 }; 32332 var supportsTouchEvents = function () { 32333 return is_browser_isBrowser && window.ontouchstart === null; 32334 }; 32335 var supportsMouseEvents = function () { 32336 return is_browser_isBrowser && window.onmousedown === null; 32337 }; 32338 32339 32340 32341 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/events/use-pointer-event.mjs 32342 32343 32344 32345 32346 var mouseEventNames = { 32347 pointerdown: "mousedown", 32348 pointermove: "mousemove", 32349 pointerup: "mouseup", 32350 pointercancel: "mousecancel", 32351 pointerover: "mouseover", 32352 pointerout: "mouseout", 32353 pointerenter: "mouseenter", 32354 pointerleave: "mouseleave", 32355 }; 32356 var touchEventNames = { 32357 pointerdown: "touchstart", 32358 pointermove: "touchmove", 32359 pointerup: "touchend", 32360 pointercancel: "touchcancel", 32361 }; 32362 function getPointerEventName(name) { 32363 if (supportsPointerEvents()) { 32364 return name; 32365 } 32366 else if (supportsTouchEvents()) { 32367 return touchEventNames[name]; 32368 } 32369 else if (supportsMouseEvents()) { 32370 return mouseEventNames[name]; 32371 } 32372 return name; 32373 } 32374 function addPointerEvent(target, eventName, handler, options) { 32375 return addDomEvent(target, getPointerEventName(eventName), wrapHandler(handler, eventName === "pointerdown"), options); 32376 } 32377 function usePointerEvent(ref, eventName, handler, options) { 32378 return useDomEvent(ref, getPointerEventName(eventName), handler && wrapHandler(handler, eventName === "pointerdown"), options); 32379 } 32380 32381 32382 32383 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/gestures/drag/utils/lock.mjs 32384 function createLock(name) { 32385 var lock = null; 32386 return function () { 32387 var openLock = function () { 32388 lock = null; 32389 }; 32390 if (lock === null) { 32391 lock = name; 32392 return openLock; 32393 } 32394 return false; 32395 }; 32396 } 32397 var globalHorizontalLock = createLock("dragHorizontal"); 32398 var globalVerticalLock = createLock("dragVertical"); 32399 function getGlobalLock(drag) { 32400 var lock = false; 32401 if (drag === "y") { 32402 lock = globalVerticalLock(); 32403 } 32404 else if (drag === "x") { 32405 lock = globalHorizontalLock(); 32406 } 32407 else { 32408 var openHorizontal_1 = globalHorizontalLock(); 32409 var openVertical_1 = globalVerticalLock(); 32410 if (openHorizontal_1 && openVertical_1) { 32411 lock = function () { 32412 openHorizontal_1(); 32413 openVertical_1(); 32414 }; 32415 } 32416 else { 32417 // Release the locks because we don't use them 32418 if (openHorizontal_1) 32419 openHorizontal_1(); 32420 if (openVertical_1) 32421 openVertical_1(); 32422 } 32423 } 32424 return lock; 32425 } 32426 function isDragActive() { 32427 // Check the gesture lock - if we get it, it means no drag gesture is active 32428 // and we can safely fire the tap gesture. 32429 var openGestureLock = getGlobalLock(true); 32430 if (!openGestureLock) 32431 return true; 32432 openGestureLock(); 32433 return false; 32434 } 32435 32436 32437 32438 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/gestures/use-hover-gesture.mjs 32439 32440 32441 32442 32443 32444 function createHoverEvent(visualElement, isActive, callback) { 32445 return function (event, info) { 32446 var _a; 32447 if (!isMouseEvent(event) || isDragActive()) 32448 return; 32449 /** 32450 * Ensure we trigger animations before firing event callback 32451 */ 32452 (_a = visualElement.animationState) === null || _a === void 0 ? void 0 : _a.setActive(AnimationType.Hover, isActive); 32453 callback === null || callback === void 0 ? void 0 : callback(event, info); 32454 }; 32455 } 32456 function useHoverGesture(_a) { 32457 var onHoverStart = _a.onHoverStart, onHoverEnd = _a.onHoverEnd, whileHover = _a.whileHover, visualElement = _a.visualElement; 32458 usePointerEvent(visualElement, "pointerenter", onHoverStart || whileHover 32459 ? createHoverEvent(visualElement, true, onHoverStart) 32460 : undefined); 32461 usePointerEvent(visualElement, "pointerleave", onHoverEnd || whileHover 32462 ? createHoverEvent(visualElement, false, onHoverEnd) 32463 : undefined); 32464 } 32465 32466 32467 32468 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/gestures/utils/is-node-or-child.mjs 32469 /** 32470 * Recursively traverse up the tree to check whether the provided child node 32471 * is the parent or a descendant of it. 32472 * 32473 * @param parent - Element to find 32474 * @param child - Element to test against parent 32475 */ 32476 var isNodeOrChild = function (parent, child) { 32477 if (!child) { 32478 return false; 32479 } 32480 else if (parent === child) { 32481 return true; 32482 } 32483 else { 32484 return isNodeOrChild(parent, child.parentElement); 32485 } 32486 }; 32487 32488 32489 32490 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/use-unmount-effect.mjs 32491 32492 32493 function useUnmountEffect(callback) { 32494 return (0,external_React_.useEffect)(function () { return function () { return callback(); }; }, []); 32495 } 32496 32497 32498 32499 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/gestures/use-tap-gesture.mjs 32500 32501 32502 32503 32504 32505 32506 32507 32508 /** 32509 * @param handlers - 32510 * @internal 32511 */ 32512 function useTapGesture(_a) { 32513 var onTap = _a.onTap, onTapStart = _a.onTapStart, onTapCancel = _a.onTapCancel, whileTap = _a.whileTap, visualElement = _a.visualElement; 32514 var hasPressListeners = onTap || onTapStart || onTapCancel || whileTap; 32515 var isPressing = (0,external_React_.useRef)(false); 32516 var cancelPointerEndListeners = (0,external_React_.useRef)(null); 32517 function removePointerEndListener() { 32518 var _a; 32519 (_a = cancelPointerEndListeners.current) === null || _a === void 0 ? void 0 : _a.call(cancelPointerEndListeners); 32520 cancelPointerEndListeners.current = null; 32521 } 32522 function checkPointerEnd() { 32523 var _a; 32524 removePointerEndListener(); 32525 isPressing.current = false; 32526 (_a = visualElement.animationState) === null || _a === void 0 ? void 0 : _a.setActive(AnimationType.Tap, false); 32527 return !isDragActive(); 32528 } 32529 function onPointerUp(event, info) { 32530 if (!checkPointerEnd()) 32531 return; 32532 /** 32533 * We only count this as a tap gesture if the event.target is the same 32534 * as, or a child of, this component's element 32535 */ 32536 !isNodeOrChild(visualElement.getInstance(), event.target) 32537 ? onTapCancel === null || onTapCancel === void 0 ? void 0 : onTapCancel(event, info) 32538 : onTap === null || onTap === void 0 ? void 0 : onTap(event, info); 32539 } 32540 function onPointerCancel(event, info) { 32541 if (!checkPointerEnd()) 32542 return; 32543 onTapCancel === null || onTapCancel === void 0 ? void 0 : onTapCancel(event, info); 32544 } 32545 function onPointerDown(event, info) { 32546 var _a; 32547 removePointerEndListener(); 32548 if (isPressing.current) 32549 return; 32550 isPressing.current = true; 32551 cancelPointerEndListeners.current = pipe(addPointerEvent(window, "pointerup", onPointerUp), addPointerEvent(window, "pointercancel", onPointerCancel)); 32552 /** 32553 * Ensure we trigger animations before firing event callback 32554 */ 32555 (_a = visualElement.animationState) === null || _a === void 0 ? void 0 : _a.setActive(AnimationType.Tap, true); 32556 onTapStart === null || onTapStart === void 0 ? void 0 : onTapStart(event, info); 32557 } 32558 usePointerEvent(visualElement, "pointerdown", hasPressListeners ? onPointerDown : undefined); 32559 useUnmountEffect(removePointerEndListener); 32560 } 32561 32562 32563 32564 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/motion/features/viewport/observers.mjs 32565 32566 32567 /** 32568 * Map an IntersectionHandler callback to an element. We only ever make one handler for one 32569 * element, so even though these handlers might all be triggered by different 32570 * observers, we can keep them in the same map. 32571 */ 32572 var observerCallbacks = new WeakMap(); 32573 /** 32574 * Multiple observers can be created for multiple element/document roots. Each with 32575 * different settings. So here we store dictionaries of observers to each root, 32576 * using serialised settings (threshold/margin) as lookup keys. 32577 */ 32578 var observers = new WeakMap(); 32579 var fireObserverCallback = function (entry) { 32580 var _a; 32581 (_a = observerCallbacks.get(entry.target)) === null || _a === void 0 ? void 0 : _a(entry); 32582 }; 32583 var fireAllObserverCallbacks = function (entries) { 32584 entries.forEach(fireObserverCallback); 32585 }; 32586 function initIntersectionObserver(_a) { 32587 var root = _a.root, options = __rest(_a, ["root"]); 32588 var lookupRoot = root || document; 32589 /** 32590 * If we don't have an observer lookup map for this root, create one. 32591 */ 32592 if (!observers.has(lookupRoot)) { 32593 observers.set(lookupRoot, {}); 32594 } 32595 var rootObservers = observers.get(lookupRoot); 32596 var key = JSON.stringify(options); 32597 /** 32598 * If we don't have an observer for this combination of root and settings, 32599 * create one. 32600 */ 32601 if (!rootObservers[key]) { 32602 rootObservers[key] = new IntersectionObserver(fireAllObserverCallbacks, __assign({ root: root }, options)); 32603 } 32604 return rootObservers[key]; 32605 } 32606 function observeIntersection(element, options, callback) { 32607 var rootInteresectionObserver = initIntersectionObserver(options); 32608 observerCallbacks.set(element, callback); 32609 rootInteresectionObserver.observe(element); 32610 return function () { 32611 observerCallbacks.delete(element); 32612 rootInteresectionObserver.unobserve(element); 32613 }; 32614 } 32615 32616 32617 32618 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/motion/features/viewport/use-viewport.mjs 32619 32620 32621 32622 32623 32624 32625 function useViewport(_a) { 32626 var visualElement = _a.visualElement, whileInView = _a.whileInView, onViewportEnter = _a.onViewportEnter, onViewportLeave = _a.onViewportLeave, _b = _a.viewport, viewport = _b === void 0 ? {} : _b; 32627 var state = (0,external_React_.useRef)({ 32628 hasEnteredView: false, 32629 isInView: false, 32630 }); 32631 var shouldObserve = Boolean(whileInView || onViewportEnter || onViewportLeave); 32632 if (viewport.once && state.current.hasEnteredView) 32633 shouldObserve = false; 32634 var useObserver = typeof IntersectionObserver === "undefined" 32635 ? useMissingIntersectionObserver 32636 : use_viewport_useIntersectionObserver; 32637 useObserver(shouldObserve, state.current, visualElement, viewport); 32638 } 32639 var thresholdNames = { 32640 some: 0, 32641 all: 1, 32642 }; 32643 function use_viewport_useIntersectionObserver(shouldObserve, state, visualElement, _a) { 32644 var root = _a.root, rootMargin = _a.margin, _b = _a.amount, amount = _b === void 0 ? "some" : _b, once = _a.once; 32645 (0,external_React_.useEffect)(function () { 32646 if (!shouldObserve) 32647 return; 32648 var options = { 32649 root: root === null || root === void 0 ? void 0 : root.current, 32650 rootMargin: rootMargin, 32651 threshold: typeof amount === "number" ? amount : thresholdNames[amount], 32652 }; 32653 var intersectionCallback = function (entry) { 32654 var _a; 32655 var isIntersecting = entry.isIntersecting; 32656 /** 32657 * If there's been no change in the viewport state, early return. 32658 */ 32659 if (state.isInView === isIntersecting) 32660 return; 32661 state.isInView = isIntersecting; 32662 /** 32663 * Handle hasEnteredView. If this is only meant to run once, and 32664 * element isn't visible, early return. Otherwise set hasEnteredView to true. 32665 */ 32666 if (once && !isIntersecting && state.hasEnteredView) { 32667 return; 32668 } 32669 else if (isIntersecting) { 32670 state.hasEnteredView = true; 32671 } 32672 (_a = visualElement.animationState) === null || _a === void 0 ? void 0 : _a.setActive(AnimationType.InView, isIntersecting); 32673 /** 32674 * Use the latest committed props rather than the ones in scope 32675 * when this observer is created 32676 */ 32677 var props = visualElement.getProps(); 32678 var callback = isIntersecting 32679 ? props.onViewportEnter 32680 : props.onViewportLeave; 32681 callback === null || callback === void 0 ? void 0 : callback(entry); 32682 }; 32683 return observeIntersection(visualElement.getInstance(), options, intersectionCallback); 32684 }, [shouldObserve, root, rootMargin, amount]); 32685 } 32686 /** 32687 * If IntersectionObserver is missing, we activate inView and fire onViewportEnter 32688 * on mount. This way, the page will be in the state the author expects users 32689 * to see it in for everyone. 32690 */ 32691 function useMissingIntersectionObserver(shouldObserve, state, visualElement, _a) { 32692 var _b = _a.fallback, fallback = _b === void 0 ? true : _b; 32693 (0,external_React_.useEffect)(function () { 32694 if (!shouldObserve || !fallback) 32695 return; 32696 if (false) {} 32697 /** 32698 * Fire this in an rAF because, at this point, the animation state 32699 * won't have flushed for the first time and there's certain logic in 32700 * there that behaves differently on the initial animation. 32701 * 32702 * This hook should be quite rarely called so setting this in an rAF 32703 * is preferred to changing the behaviour of the animation state. 32704 */ 32705 requestAnimationFrame(function () { 32706 var _a; 32707 state.hasEnteredView = true; 32708 var onViewportEnter = visualElement.getProps().onViewportEnter; 32709 onViewportEnter === null || onViewportEnter === void 0 ? void 0 : onViewportEnter(null); 32710 (_a = visualElement.animationState) === null || _a === void 0 ? void 0 : _a.setActive(AnimationType.InView, true); 32711 }); 32712 }, [shouldObserve]); 32713 } 32714 32715 32716 32717 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/motion/utils/make-renderless-component.mjs 32718 var makeRenderlessComponent = function (hook) { return function (props) { 32719 hook(props); 32720 return null; 32721 }; }; 32722 32723 32724 32725 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/motion/features/gestures.mjs 32726 32727 32728 32729 32730 32731 32732 var gestureAnimations = { 32733 inView: makeRenderlessComponent(useViewport), 32734 tap: makeRenderlessComponent(useTapGesture), 32735 focus: makeRenderlessComponent(useFocusGesture), 32736 hover: makeRenderlessComponent(useHoverGesture), 32737 }; 32738 32739 32740 32741 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/use-id.mjs 32742 32743 32744 var counter = 0; 32745 var incrementId = function () { return counter++; }; 32746 var useId = function () { return useConstant(incrementId); }; 32747 /** 32748 * Ideally we'd use the following code to support React 18 optionally. 32749 * But this fairly fails in Webpack (otherwise treeshaking wouldn't work at all). 32750 * Need to come up with a different way of figuring this out. 32751 */ 32752 // export const useId = (React as any).useId 32753 // ? (React as any).useId 32754 // : () => useConstant(incrementId) 32755 32756 32757 32758 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/components/AnimatePresence/use-presence.mjs 32759 32760 32761 32762 32763 /** 32764 * When a component is the child of `AnimatePresence`, it can use `usePresence` 32765 * to access information about whether it's still present in the React tree. 32766 * 32767 * ```jsx 32768 * import { usePresence } from "framer-motion" 32769 * 32770 * export const Component = () => { 32771 * const [isPresent, safeToRemove] = usePresence() 32772 * 32773 * useEffect(() => { 32774 * !isPresent && setTimeout(safeToRemove, 1000) 32775 * }, [isPresent]) 32776 * 32777 * return <div /> 32778 * } 32779 * ``` 32780 * 32781 * If `isPresent` is `false`, it means that a component has been removed the tree, but 32782 * `AnimatePresence` won't really remove it until `safeToRemove` has been called. 32783 * 32784 * @public 32785 */ 32786 function usePresence() { 32787 var context = (0,external_React_.useContext)(PresenceContext_PresenceContext); 32788 if (context === null) 32789 return [true, null]; 32790 var isPresent = context.isPresent, onExitComplete = context.onExitComplete, register = context.register; 32791 // It's safe to call the following hooks conditionally (after an early return) because the context will always 32792 // either be null or non-null for the lifespan of the component. 32793 // Replace with useId when released in React 32794 var id = useId(); 32795 (0,external_React_.useEffect)(function () { return register(id); }, []); 32796 var safeToRemove = function () { return onExitComplete === null || onExitComplete === void 0 ? void 0 : onExitComplete(id); }; 32797 return !isPresent && onExitComplete ? [false, safeToRemove] : [true]; 32798 } 32799 /** 32800 * Similar to `usePresence`, except `useIsPresent` simply returns whether or not the component is present. 32801 * There is no `safeToRemove` function. 32802 * 32803 * ```jsx 32804 * import { useIsPresent } from "framer-motion" 32805 * 32806 * export const Component = () => { 32807 * const isPresent = useIsPresent() 32808 * 32809 * useEffect(() => { 32810 * !isPresent && console.log("I've been removed!") 32811 * }, [isPresent]) 32812 * 32813 * return <div /> 32814 * } 32815 * ``` 32816 * 32817 * @public 32818 */ 32819 function useIsPresent() { 32820 return isPresent(useContext(PresenceContext)); 32821 } 32822 function isPresent(context) { 32823 return context === null ? true : context.isPresent; 32824 } 32825 32826 32827 32828 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/shallow-compare.mjs 32829 function shallowCompare(next, prev) { 32830 if (!Array.isArray(prev)) 32831 return false; 32832 var prevLength = prev.length; 32833 if (prevLength !== next.length) 32834 return false; 32835 for (var i = 0; i < prevLength; i++) { 32836 if (prev[i] !== next[i]) 32837 return false; 32838 } 32839 return true; 32840 } 32841 32842 32843 32844 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/is-numerical-string.mjs 32845 /** 32846 * Check if value is a numerical string, ie a string that is purely a number eg "100" or "-100.1" 32847 */ 32848 var isNumericalString = function (v) { return /^\-?\d*\.?\d+$/.test(v); }; 32849 32850 32851 32852 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/is-zero-value-string.mjs 32853 /** 32854 * Check if the value is a zero value string like "0px" or "0%" 32855 */ 32856 var isZeroValueString = function (v) { return /^0[^.\s]+$/.test(v); }; 32857 32858 32859 32860 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/dom/value-types/test.mjs 32861 /** 32862 * Tests a provided value against a ValueType 32863 */ 32864 var testValueType = function (v) { return function (type) { return type.test(v); }; }; 32865 32866 32867 32868 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/dom/value-types/type-auto.mjs 32869 /** 32870 * ValueType for "auto" 32871 */ 32872 var auto = { 32873 test: function (v) { return v === "auto"; }, 32874 parse: function (v) { return v; }, 32875 }; 32876 32877 32878 32879 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/dom/value-types/dimensions.mjs 32880 32881 32882 32883 32884 /** 32885 * A list of value types commonly used for dimensions 32886 */ 32887 var dimensionValueTypes = [number, px, percent, degrees, vw, vh, auto]; 32888 /** 32889 * Tests a dimensional value against the list of dimension ValueTypes 32890 */ 32891 var findDimensionValueType = function (v) { 32892 return dimensionValueTypes.find(testValueType(v)); 32893 }; 32894 32895 32896 32897 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/dom/value-types/find.mjs 32898 32899 32900 32901 32902 32903 /** 32904 * A list of all ValueTypes 32905 */ 32906 var valueTypes = tslib_es6_spreadArray(tslib_es6_spreadArray([], tslib_es6_read(dimensionValueTypes), false), [color, complex], false); 32907 /** 32908 * Tests a value against the list of ValueTypes 32909 */ 32910 var findValueType = function (v) { return valueTypes.find(testValueType(v)); }; 32911 32912 32913 32914 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/utils/setters.mjs 32915 32916 32917 32918 32919 32920 32921 32922 32923 32924 32925 /** 32926 * Set VisualElement's MotionValue, creating a new MotionValue for it if 32927 * it doesn't exist. 32928 */ 32929 function setMotionValue(visualElement, key, value) { 32930 if (visualElement.hasValue(key)) { 32931 visualElement.getValue(key).set(value); 32932 } 32933 else { 32934 visualElement.addValue(key, motionValue(value)); 32935 } 32936 } 32937 function setTarget(visualElement, definition) { 32938 var resolved = resolveVariant(visualElement, definition); 32939 var _a = resolved ? visualElement.makeTargetAnimatable(resolved, false) : {}, _b = _a.transitionEnd, transitionEnd = _b === void 0 ? {} : _b; _a.transition; var target = __rest(_a, ["transitionEnd", "transition"]); 32940 target = __assign(__assign({}, target), transitionEnd); 32941 for (var key in target) { 32942 var value = resolveFinalValueInKeyframes(target[key]); 32943 setMotionValue(visualElement, key, value); 32944 } 32945 } 32946 function setVariants(visualElement, variantLabels) { 32947 var reversedLabels = __spreadArray([], __read(variantLabels), false).reverse(); 32948 reversedLabels.forEach(function (key) { 32949 var _a; 32950 var variant = visualElement.getVariant(key); 32951 variant && setTarget(visualElement, variant); 32952 (_a = visualElement.variantChildren) === null || _a === void 0 ? void 0 : _a.forEach(function (child) { 32953 setVariants(child, variantLabels); 32954 }); 32955 }); 32956 } 32957 function setValues(visualElement, definition) { 32958 if (Array.isArray(definition)) { 32959 return setVariants(visualElement, definition); 32960 } 32961 else if (typeof definition === "string") { 32962 return setVariants(visualElement, [definition]); 32963 } 32964 else { 32965 setTarget(visualElement, definition); 32966 } 32967 } 32968 function checkTargetForNewValues(visualElement, target, origin) { 32969 var _a, _b, _c; 32970 var _d; 32971 var newValueKeys = Object.keys(target).filter(function (key) { return !visualElement.hasValue(key); }); 32972 var numNewValues = newValueKeys.length; 32973 if (!numNewValues) 32974 return; 32975 for (var i = 0; i < numNewValues; i++) { 32976 var key = newValueKeys[i]; 32977 var targetValue = target[key]; 32978 var value = null; 32979 /** 32980 * If the target is a series of keyframes, we can use the first value 32981 * in the array. If this first value is null, we'll still need to read from the DOM. 32982 */ 32983 if (Array.isArray(targetValue)) { 32984 value = targetValue[0]; 32985 } 32986 /** 32987 * If the target isn't keyframes, or the first keyframe was null, we need to 32988 * first check if an origin value was explicitly defined in the transition as "from", 32989 * if not read the value from the DOM. As an absolute fallback, take the defined target value. 32990 */ 32991 if (value === null) { 32992 value = (_b = (_a = origin[key]) !== null && _a !== void 0 ? _a : visualElement.readValue(key)) !== null && _b !== void 0 ? _b : target[key]; 32993 } 32994 /** 32995 * If value is still undefined or null, ignore it. Preferably this would throw, 32996 * but this was causing issues in Framer. 32997 */ 32998 if (value === undefined || value === null) 32999 continue; 33000 if (typeof value === "string" && 33001 (isNumericalString(value) || isZeroValueString(value))) { 33002 // If this is a number read as a string, ie "0" or "200", convert it to a number 33003 value = parseFloat(value); 33004 } 33005 else if (!findValueType(value) && complex.test(targetValue)) { 33006 value = animatable_none_getAnimatableNone(key, targetValue); 33007 } 33008 visualElement.addValue(key, motionValue(value)); 33009 (_c = (_d = origin)[key]) !== null && _c !== void 0 ? _c : (_d[key] = value); 33010 visualElement.setBaseTarget(key, value); 33011 } 33012 } 33013 function getOriginFromTransition(key, transition) { 33014 if (!transition) 33015 return; 33016 var valueTransition = transition[key] || transition["default"] || transition; 33017 return valueTransition.from; 33018 } 33019 function getOrigin(target, transition, visualElement) { 33020 var _a, _b; 33021 var origin = {}; 33022 for (var key in target) { 33023 origin[key] = 33024 (_a = getOriginFromTransition(key, transition)) !== null && _a !== void 0 ? _a : (_b = visualElement.getValue(key)) === null || _b === void 0 ? void 0 : _b.get(); 33025 } 33026 return origin; 33027 } 33028 33029 33030 33031 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/utils/animation.mjs 33032 33033 33034 33035 33036 33037 33038 /** 33039 * @internal 33040 */ 33041 function animateVisualElement(visualElement, definition, options) { 33042 if (options === void 0) { options = {}; } 33043 visualElement.notifyAnimationStart(definition); 33044 var animation; 33045 if (Array.isArray(definition)) { 33046 var animations = definition.map(function (variant) { 33047 return animateVariant(visualElement, variant, options); 33048 }); 33049 animation = Promise.all(animations); 33050 } 33051 else if (typeof definition === "string") { 33052 animation = animateVariant(visualElement, definition, options); 33053 } 33054 else { 33055 var resolvedDefinition = typeof definition === "function" 33056 ? resolveVariant(visualElement, definition, options.custom) 33057 : definition; 33058 animation = animateTarget(visualElement, resolvedDefinition, options); 33059 } 33060 return animation.then(function () { 33061 return visualElement.notifyAnimationComplete(definition); 33062 }); 33063 } 33064 function animateVariant(visualElement, variant, options) { 33065 var _a; 33066 if (options === void 0) { options = {}; } 33067 var resolved = resolveVariant(visualElement, variant, options.custom); 33068 var _b = (resolved || {}).transition, transition = _b === void 0 ? visualElement.getDefaultTransition() || {} : _b; 33069 if (options.transitionOverride) { 33070 transition = options.transitionOverride; 33071 } 33072 /** 33073 * If we have a variant, create a callback that runs it as an animation. 33074 * Otherwise, we resolve a Promise immediately for a composable no-op. 33075 */ 33076 var getAnimation = resolved 33077 ? function () { return animateTarget(visualElement, resolved, options); } 33078 : function () { return Promise.resolve(); }; 33079 /** 33080 * If we have children, create a callback that runs all their animations. 33081 * Otherwise, we resolve a Promise immediately for a composable no-op. 33082 */ 33083 var getChildAnimations = ((_a = visualElement.variantChildren) === null || _a === void 0 ? void 0 : _a.size) 33084 ? function (forwardDelay) { 33085 if (forwardDelay === void 0) { forwardDelay = 0; } 33086 var _a = transition.delayChildren, delayChildren = _a === void 0 ? 0 : _a, staggerChildren = transition.staggerChildren, staggerDirection = transition.staggerDirection; 33087 return animateChildren(visualElement, variant, delayChildren + forwardDelay, staggerChildren, staggerDirection, options); 33088 } 33089 : function () { return Promise.resolve(); }; 33090 /** 33091 * If the transition explicitly defines a "when" option, we need to resolve either 33092 * this animation or all children animations before playing the other. 33093 */ 33094 var when = transition.when; 33095 if (when) { 33096 var _c = tslib_es6_read(when === "beforeChildren" 33097 ? [getAnimation, getChildAnimations] 33098 : [getChildAnimations, getAnimation], 2), first = _c[0], last = _c[1]; 33099 return first().then(last); 33100 } 33101 else { 33102 return Promise.all([getAnimation(), getChildAnimations(options.delay)]); 33103 } 33104 } 33105 /** 33106 * @internal 33107 */ 33108 function animateTarget(visualElement, definition, _a) { 33109 var _b; 33110 var _c = _a === void 0 ? {} : _a, _d = _c.delay, delay = _d === void 0 ? 0 : _d, transitionOverride = _c.transitionOverride, type = _c.type; 33111 var _e = visualElement.makeTargetAnimatable(definition), _f = _e.transition, transition = _f === void 0 ? visualElement.getDefaultTransition() : _f, transitionEnd = _e.transitionEnd, target = __rest(_e, ["transition", "transitionEnd"]); 33112 if (transitionOverride) 33113 transition = transitionOverride; 33114 var animations = []; 33115 var animationTypeState = type && ((_b = visualElement.animationState) === null || _b === void 0 ? void 0 : _b.getState()[type]); 33116 for (var key in target) { 33117 var value = visualElement.getValue(key); 33118 var valueTarget = target[key]; 33119 if (!value || 33120 valueTarget === undefined || 33121 (animationTypeState && 33122 shouldBlockAnimation(animationTypeState, key))) { 33123 continue; 33124 } 33125 var valueTransition = __assign({ delay: delay }, transition); 33126 /** 33127 * Make animation instant if this is a transform prop and we should reduce motion. 33128 */ 33129 if (visualElement.shouldReduceMotion && isTransformProp(key)) { 33130 valueTransition = __assign(__assign({}, valueTransition), { type: false, delay: 0 }); 33131 } 33132 var animation = startAnimation(key, value, valueTarget, valueTransition); 33133 animations.push(animation); 33134 } 33135 return Promise.all(animations).then(function () { 33136 transitionEnd && setTarget(visualElement, transitionEnd); 33137 }); 33138 } 33139 function animateChildren(visualElement, variant, delayChildren, staggerChildren, staggerDirection, options) { 33140 if (delayChildren === void 0) { delayChildren = 0; } 33141 if (staggerChildren === void 0) { staggerChildren = 0; } 33142 if (staggerDirection === void 0) { staggerDirection = 1; } 33143 var animations = []; 33144 var maxStaggerDuration = (visualElement.variantChildren.size - 1) * staggerChildren; 33145 var generateStaggerDuration = staggerDirection === 1 33146 ? function (i) { 33147 if (i === void 0) { i = 0; } 33148 return i * staggerChildren; 33149 } 33150 : function (i) { 33151 if (i === void 0) { i = 0; } 33152 return maxStaggerDuration - i * staggerChildren; 33153 }; 33154 Array.from(visualElement.variantChildren) 33155 .sort(sortByTreeOrder) 33156 .forEach(function (child, i) { 33157 animations.push(animateVariant(child, variant, __assign(__assign({}, options), { delay: delayChildren + generateStaggerDuration(i) })).then(function () { return child.notifyAnimationComplete(variant); })); 33158 }); 33159 return Promise.all(animations); 33160 } 33161 function stopAnimation(visualElement) { 33162 visualElement.forEachValue(function (value) { return value.stop(); }); 33163 } 33164 function sortByTreeOrder(a, b) { 33165 return a.sortNodePosition(b); 33166 } 33167 /** 33168 * Decide whether we should block this animation. Previously, we achieved this 33169 * just by checking whether the key was listed in protectedKeys, but this 33170 * posed problems if an animation was triggered by afterChildren and protectedKeys 33171 * had been set to true in the meantime. 33172 */ 33173 function shouldBlockAnimation(_a, key) { 33174 var protectedKeys = _a.protectedKeys, needsAnimating = _a.needsAnimating; 33175 var shouldBlock = protectedKeys.hasOwnProperty(key) && needsAnimating[key] !== true; 33176 needsAnimating[key] = false; 33177 return shouldBlock; 33178 } 33179 33180 33181 33182 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/utils/animation-state.mjs 33183 33184 33185 33186 33187 33188 33189 33190 33191 var variantPriorityOrder = [ 33192 AnimationType.Animate, 33193 AnimationType.InView, 33194 AnimationType.Focus, 33195 AnimationType.Hover, 33196 AnimationType.Tap, 33197 AnimationType.Drag, 33198 AnimationType.Exit, 33199 ]; 33200 var reversePriorityOrder = tslib_es6_spreadArray([], tslib_es6_read(variantPriorityOrder), false).reverse(); 33201 var numAnimationTypes = variantPriorityOrder.length; 33202 function animateList(visualElement) { 33203 return function (animations) { 33204 return Promise.all(animations.map(function (_a) { 33205 var animation = _a.animation, options = _a.options; 33206 return animateVisualElement(visualElement, animation, options); 33207 })); 33208 }; 33209 } 33210 function createAnimationState(visualElement) { 33211 var animate = animateList(visualElement); 33212 var state = createState(); 33213 var allAnimatedKeys = {}; 33214 var isInitialRender = true; 33215 /** 33216 * This function will be used to reduce the animation definitions for 33217 * each active animation type into an object of resolved values for it. 33218 */ 33219 var buildResolvedTypeValues = function (acc, definition) { 33220 var resolved = resolveVariant(visualElement, definition); 33221 if (resolved) { 33222 resolved.transition; var transitionEnd = resolved.transitionEnd, target = __rest(resolved, ["transition", "transitionEnd"]); 33223 acc = __assign(__assign(__assign({}, acc), target), transitionEnd); 33224 } 33225 return acc; 33226 }; 33227 function isAnimated(key) { 33228 return allAnimatedKeys[key] !== undefined; 33229 } 33230 /** 33231 * This just allows us to inject mocked animation functions 33232 * @internal 33233 */ 33234 function setAnimateFunction(makeAnimator) { 33235 animate = makeAnimator(visualElement); 33236 } 33237 /** 33238 * When we receive new props, we need to: 33239 * 1. Create a list of protected keys for each type. This is a directory of 33240 * value keys that are currently being "handled" by types of a higher priority 33241 * so that whenever an animation is played of a given type, these values are 33242 * protected from being animated. 33243 * 2. Determine if an animation type needs animating. 33244 * 3. Determine if any values have been removed from a type and figure out 33245 * what to animate those to. 33246 */ 33247 function animateChanges(options, changedActiveType) { 33248 var _a; 33249 var props = visualElement.getProps(); 33250 var context = visualElement.getVariantContext(true) || {}; 33251 /** 33252 * A list of animations that we'll build into as we iterate through the animation 33253 * types. This will get executed at the end of the function. 33254 */ 33255 var animations = []; 33256 /** 33257 * Keep track of which values have been removed. Then, as we hit lower priority 33258 * animation types, we can check if they contain removed values and animate to that. 33259 */ 33260 var removedKeys = new Set(); 33261 /** 33262 * A dictionary of all encountered keys. This is an object to let us build into and 33263 * copy it without iteration. Each time we hit an animation type we set its protected 33264 * keys - the keys its not allowed to animate - to the latest version of this object. 33265 */ 33266 var encounteredKeys = {}; 33267 /** 33268 * If a variant has been removed at a given index, and this component is controlling 33269 * variant animations, we want to ensure lower-priority variants are forced to animate. 33270 */ 33271 var removedVariantIndex = Infinity; 33272 var _loop_1 = function (i) { 33273 var type = reversePriorityOrder[i]; 33274 var typeState = state[type]; 33275 var prop = (_a = props[type]) !== null && _a !== void 0 ? _a : context[type]; 33276 var propIsVariant = isVariantLabel(prop); 33277 /** 33278 * If this type has *just* changed isActive status, set activeDelta 33279 * to that status. Otherwise set to null. 33280 */ 33281 var activeDelta = type === changedActiveType ? typeState.isActive : null; 33282 if (activeDelta === false) 33283 removedVariantIndex = i; 33284 /** 33285 * If this prop is an inherited variant, rather than been set directly on the 33286 * component itself, we want to make sure we allow the parent to trigger animations. 33287 * 33288 * TODO: Can probably change this to a !isControllingVariants check 33289 */ 33290 var isInherited = prop === context[type] && prop !== props[type] && propIsVariant; 33291 /** 33292 * 33293 */ 33294 if (isInherited && 33295 isInitialRender && 33296 visualElement.manuallyAnimateOnMount) { 33297 isInherited = false; 33298 } 33299 /** 33300 * Set all encountered keys so far as the protected keys for this type. This will 33301 * be any key that has been animated or otherwise handled by active, higher-priortiy types. 33302 */ 33303 typeState.protectedKeys = __assign({}, encounteredKeys); 33304 // Check if we can skip analysing this prop early 33305 if ( 33306 // If it isn't active and hasn't *just* been set as inactive 33307 (!typeState.isActive && activeDelta === null) || 33308 // If we didn't and don't have any defined prop for this animation type 33309 (!prop && !typeState.prevProp) || 33310 // Or if the prop doesn't define an animation 33311 isAnimationControls(prop) || 33312 typeof prop === "boolean") { 33313 return "continue"; 33314 } 33315 /** 33316 * As we go look through the values defined on this type, if we detect 33317 * a changed value or a value that was removed in a higher priority, we set 33318 * this to true and add this prop to the animation list. 33319 */ 33320 var variantDidChange = checkVariantsDidChange(typeState.prevProp, prop); 33321 var shouldAnimateType = variantDidChange || 33322 // If we're making this variant active, we want to always make it active 33323 (type === changedActiveType && 33324 typeState.isActive && 33325 !isInherited && 33326 propIsVariant) || 33327 // If we removed a higher-priority variant (i is in reverse order) 33328 (i > removedVariantIndex && propIsVariant); 33329 /** 33330 * As animations can be set as variant lists, variants or target objects, we 33331 * coerce everything to an array if it isn't one already 33332 */ 33333 var definitionList = Array.isArray(prop) ? prop : [prop]; 33334 /** 33335 * Build an object of all the resolved values. We'll use this in the subsequent 33336 * animateChanges calls to determine whether a value has changed. 33337 */ 33338 var resolvedValues = definitionList.reduce(buildResolvedTypeValues, {}); 33339 if (activeDelta === false) 33340 resolvedValues = {}; 33341 /** 33342 * Now we need to loop through all the keys in the prev prop and this prop, 33343 * and decide: 33344 * 1. If the value has changed, and needs animating 33345 * 2. If it has been removed, and needs adding to the removedKeys set 33346 * 3. If it has been removed in a higher priority type and needs animating 33347 * 4. If it hasn't been removed in a higher priority but hasn't changed, and 33348 * needs adding to the type's protectedKeys list. 33349 */ 33350 var _b = typeState.prevResolvedValues, prevResolvedValues = _b === void 0 ? {} : _b; 33351 var allKeys = __assign(__assign({}, prevResolvedValues), resolvedValues); 33352 var markToAnimate = function (key) { 33353 shouldAnimateType = true; 33354 removedKeys.delete(key); 33355 typeState.needsAnimating[key] = true; 33356 }; 33357 for (var key in allKeys) { 33358 var next = resolvedValues[key]; 33359 var prev = prevResolvedValues[key]; 33360 // If we've already handled this we can just skip ahead 33361 if (encounteredKeys.hasOwnProperty(key)) 33362 continue; 33363 /** 33364 * If the value has changed, we probably want to animate it. 33365 */ 33366 if (next !== prev) { 33367 /** 33368 * If both values are keyframes, we need to shallow compare them to 33369 * detect whether any value has changed. If it has, we animate it. 33370 */ 33371 if (isKeyframesTarget(next) && isKeyframesTarget(prev)) { 33372 if (!shallowCompare(next, prev) || variantDidChange) { 33373 markToAnimate(key); 33374 } 33375 else { 33376 /** 33377 * If it hasn't changed, we want to ensure it doesn't animate by 33378 * adding it to the list of protected keys. 33379 */ 33380 typeState.protectedKeys[key] = true; 33381 } 33382 } 33383 else if (next !== undefined) { 33384 // If next is defined and doesn't equal prev, it needs animating 33385 markToAnimate(key); 33386 } 33387 else { 33388 // If it's undefined, it's been removed. 33389 removedKeys.add(key); 33390 } 33391 } 33392 else if (next !== undefined && removedKeys.has(key)) { 33393 /** 33394 * If next hasn't changed and it isn't undefined, we want to check if it's 33395 * been removed by a higher priority 33396 */ 33397 markToAnimate(key); 33398 } 33399 else { 33400 /** 33401 * If it hasn't changed, we add it to the list of protected values 33402 * to ensure it doesn't get animated. 33403 */ 33404 typeState.protectedKeys[key] = true; 33405 } 33406 } 33407 /** 33408 * Update the typeState so next time animateChanges is called we can compare the 33409 * latest prop and resolvedValues to these. 33410 */ 33411 typeState.prevProp = prop; 33412 typeState.prevResolvedValues = resolvedValues; 33413 /** 33414 * 33415 */ 33416 if (typeState.isActive) { 33417 encounteredKeys = __assign(__assign({}, encounteredKeys), resolvedValues); 33418 } 33419 if (isInitialRender && visualElement.blockInitialAnimation) { 33420 shouldAnimateType = false; 33421 } 33422 /** 33423 * If this is an inherited prop we want to hard-block animations 33424 * TODO: Test as this should probably still handle animations triggered 33425 * by removed values? 33426 */ 33427 if (shouldAnimateType && !isInherited) { 33428 animations.push.apply(animations, tslib_es6_spreadArray([], tslib_es6_read(definitionList.map(function (animation) { return ({ 33429 animation: animation, 33430 options: __assign({ type: type }, options), 33431 }); })), false)); 33432 } 33433 }; 33434 /** 33435 * Iterate through all animation types in reverse priority order. For each, we want to 33436 * detect which values it's handling and whether or not they've changed (and therefore 33437 * need to be animated). If any values have been removed, we want to detect those in 33438 * lower priority props and flag for animation. 33439 */ 33440 for (var i = 0; i < numAnimationTypes; i++) { 33441 _loop_1(i); 33442 } 33443 allAnimatedKeys = __assign({}, encounteredKeys); 33444 /** 33445 * If there are some removed value that haven't been dealt with, 33446 * we need to create a new animation that falls back either to the value 33447 * defined in the style prop, or the last read value. 33448 */ 33449 if (removedKeys.size) { 33450 var fallbackAnimation_1 = {}; 33451 removedKeys.forEach(function (key) { 33452 var fallbackTarget = visualElement.getBaseTarget(key); 33453 if (fallbackTarget !== undefined) { 33454 fallbackAnimation_1[key] = fallbackTarget; 33455 } 33456 }); 33457 animations.push({ animation: fallbackAnimation_1 }); 33458 } 33459 var shouldAnimate = Boolean(animations.length); 33460 if (isInitialRender && 33461 props.initial === false && 33462 !visualElement.manuallyAnimateOnMount) { 33463 shouldAnimate = false; 33464 } 33465 isInitialRender = false; 33466 return shouldAnimate ? animate(animations) : Promise.resolve(); 33467 } 33468 /** 33469 * Change whether a certain animation type is active. 33470 */ 33471 function setActive(type, isActive, options) { 33472 var _a; 33473 // If the active state hasn't changed, we can safely do nothing here 33474 if (state[type].isActive === isActive) 33475 return Promise.resolve(); 33476 // Propagate active change to children 33477 (_a = visualElement.variantChildren) === null || _a === void 0 ? void 0 : _a.forEach(function (child) { var _a; return (_a = child.animationState) === null || _a === void 0 ? void 0 : _a.setActive(type, isActive); }); 33478 state[type].isActive = isActive; 33479 var animations = animateChanges(options, type); 33480 for (var key in state) { 33481 state[key].protectedKeys = {}; 33482 } 33483 return animations; 33484 } 33485 return { 33486 isAnimated: isAnimated, 33487 animateChanges: animateChanges, 33488 setActive: setActive, 33489 setAnimateFunction: setAnimateFunction, 33490 getState: function () { return state; }, 33491 }; 33492 } 33493 function checkVariantsDidChange(prev, next) { 33494 if (typeof next === "string") { 33495 return next !== prev; 33496 } 33497 else if (isVariantLabels(next)) { 33498 return !shallowCompare(next, prev); 33499 } 33500 return false; 33501 } 33502 function createTypeState(isActive) { 33503 if (isActive === void 0) { isActive = false; } 33504 return { 33505 isActive: isActive, 33506 protectedKeys: {}, 33507 needsAnimating: {}, 33508 prevResolvedValues: {}, 33509 }; 33510 } 33511 function createState() { 33512 var _a; 33513 return _a = {}, 33514 _a[AnimationType.Animate] = createTypeState(true), 33515 _a[AnimationType.InView] = createTypeState(), 33516 _a[AnimationType.Hover] = createTypeState(), 33517 _a[AnimationType.Tap] = createTypeState(), 33518 _a[AnimationType.Drag] = createTypeState(), 33519 _a[AnimationType.Focus] = createTypeState(), 33520 _a[AnimationType.Exit] = createTypeState(), 33521 _a; 33522 } 33523 33524 33525 33526 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/motion/features/animations.mjs 33527 33528 33529 33530 33531 33532 33533 33534 33535 33536 var animations = { 33537 animation: makeRenderlessComponent(function (_a) { 33538 var visualElement = _a.visualElement, animate = _a.animate; 33539 /** 33540 * We dynamically generate the AnimationState manager as it contains a reference 33541 * to the underlying animation library. We only want to load that if we load this, 33542 * so people can optionally code split it out using the `m` component. 33543 */ 33544 visualElement.animationState || (visualElement.animationState = createAnimationState(visualElement)); 33545 /** 33546 * Subscribe any provided AnimationControls to the component's VisualElement 33547 */ 33548 if (isAnimationControls(animate)) { 33549 (0,external_React_.useEffect)(function () { return animate.subscribe(visualElement); }, [animate]); 33550 } 33551 }), 33552 exit: makeRenderlessComponent(function (props) { 33553 var custom = props.custom, visualElement = props.visualElement; 33554 var _a = tslib_es6_read(usePresence(), 2), isPresent = _a[0], safeToRemove = _a[1]; 33555 var presenceContext = (0,external_React_.useContext)(PresenceContext_PresenceContext); 33556 (0,external_React_.useEffect)(function () { 33557 var _a, _b; 33558 visualElement.isPresent = isPresent; 33559 var animation = (_a = visualElement.animationState) === null || _a === void 0 ? void 0 : _a.setActive(AnimationType.Exit, !isPresent, { custom: (_b = presenceContext === null || presenceContext === void 0 ? void 0 : presenceContext.custom) !== null && _b !== void 0 ? _b : custom }); 33560 !isPresent && (animation === null || animation === void 0 ? void 0 : animation.then(safeToRemove)); 33561 }, [isPresent]); 33562 }), 33563 }; 33564 33565 33566 33567 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/gestures/PanSession.mjs 33568 33569 33570 33571 33572 33573 33574 33575 33576 /** 33577 * @internal 33578 */ 33579 var PanSession = /** @class */ (function () { 33580 function PanSession(event, handlers, _a) { 33581 var _this = this; 33582 var _b = _a === void 0 ? {} : _a, transformPagePoint = _b.transformPagePoint; 33583 /** 33584 * @internal 33585 */ 33586 this.startEvent = null; 33587 /** 33588 * @internal 33589 */ 33590 this.lastMoveEvent = null; 33591 /** 33592 * @internal 33593 */ 33594 this.lastMoveEventInfo = null; 33595 /** 33596 * @internal 33597 */ 33598 this.handlers = {}; 33599 this.updatePoint = function () { 33600 if (!(_this.lastMoveEvent && _this.lastMoveEventInfo)) 33601 return; 33602 var info = getPanInfo(_this.lastMoveEventInfo, _this.history); 33603 var isPanStarted = _this.startEvent !== null; 33604 // Only start panning if the offset is larger than 3 pixels. If we make it 33605 // any larger than this we'll want to reset the pointer history 33606 // on the first update to avoid visual snapping to the cursoe. 33607 var isDistancePastThreshold = distance(info.offset, { x: 0, y: 0 }) >= 3; 33608 if (!isPanStarted && !isDistancePastThreshold) 33609 return; 33610 var point = info.point; 33611 var timestamp = getFrameData().timestamp; 33612 _this.history.push(__assign(__assign({}, point), { timestamp: timestamp })); 33613 var _a = _this.handlers, onStart = _a.onStart, onMove = _a.onMove; 33614 if (!isPanStarted) { 33615 onStart && onStart(_this.lastMoveEvent, info); 33616 _this.startEvent = _this.lastMoveEvent; 33617 } 33618 onMove && onMove(_this.lastMoveEvent, info); 33619 }; 33620 this.handlePointerMove = function (event, info) { 33621 _this.lastMoveEvent = event; 33622 _this.lastMoveEventInfo = transformPoint(info, _this.transformPagePoint); 33623 // Because Safari doesn't trigger mouseup events when it's above a `<select>` 33624 if (isMouseEvent(event) && event.buttons === 0) { 33625 _this.handlePointerUp(event, info); 33626 return; 33627 } 33628 // Throttle mouse move event to once per frame 33629 es.update(_this.updatePoint, true); 33630 }; 33631 this.handlePointerUp = function (event, info) { 33632 _this.end(); 33633 var _a = _this.handlers, onEnd = _a.onEnd, onSessionEnd = _a.onSessionEnd; 33634 var panInfo = getPanInfo(transformPoint(info, _this.transformPagePoint), _this.history); 33635 if (_this.startEvent && onEnd) { 33636 onEnd(event, panInfo); 33637 } 33638 onSessionEnd && onSessionEnd(event, panInfo); 33639 }; 33640 // If we have more than one touch, don't start detecting this gesture 33641 if (isTouchEvent(event) && event.touches.length > 1) 33642 return; 33643 this.handlers = handlers; 33644 this.transformPagePoint = transformPagePoint; 33645 var info = extractEventInfo(event); 33646 var initialInfo = transformPoint(info, this.transformPagePoint); 33647 var point = initialInfo.point; 33648 var timestamp = getFrameData().timestamp; 33649 this.history = [__assign(__assign({}, point), { timestamp: timestamp })]; 33650 var onSessionStart = handlers.onSessionStart; 33651 onSessionStart && 33652 onSessionStart(event, getPanInfo(initialInfo, this.history)); 33653 this.removeListeners = pipe(addPointerEvent(window, "pointermove", this.handlePointerMove), addPointerEvent(window, "pointerup", this.handlePointerUp), addPointerEvent(window, "pointercancel", this.handlePointerUp)); 33654 } 33655 PanSession.prototype.updateHandlers = function (handlers) { 33656 this.handlers = handlers; 33657 }; 33658 PanSession.prototype.end = function () { 33659 this.removeListeners && this.removeListeners(); 33660 cancelSync.update(this.updatePoint); 33661 }; 33662 return PanSession; 33663 }()); 33664 function transformPoint(info, transformPagePoint) { 33665 return transformPagePoint ? { point: transformPagePoint(info.point) } : info; 33666 } 33667 function subtractPoint(a, b) { 33668 return { x: a.x - b.x, y: a.y - b.y }; 33669 } 33670 function getPanInfo(_a, history) { 33671 var point = _a.point; 33672 return { 33673 point: point, 33674 delta: subtractPoint(point, lastDevicePoint(history)), 33675 offset: subtractPoint(point, startDevicePoint(history)), 33676 velocity: PanSession_getVelocity(history, 0.1), 33677 }; 33678 } 33679 function startDevicePoint(history) { 33680 return history[0]; 33681 } 33682 function lastDevicePoint(history) { 33683 return history[history.length - 1]; 33684 } 33685 function PanSession_getVelocity(history, timeDelta) { 33686 if (history.length < 2) { 33687 return { x: 0, y: 0 }; 33688 } 33689 var i = history.length - 1; 33690 var timestampedPoint = null; 33691 var lastPoint = lastDevicePoint(history); 33692 while (i >= 0) { 33693 timestampedPoint = history[i]; 33694 if (lastPoint.timestamp - timestampedPoint.timestamp > 33695 secondsToMilliseconds(timeDelta)) { 33696 break; 33697 } 33698 i--; 33699 } 33700 if (!timestampedPoint) { 33701 return { x: 0, y: 0 }; 33702 } 33703 var time = (lastPoint.timestamp - timestampedPoint.timestamp) / 1000; 33704 if (time === 0) { 33705 return { x: 0, y: 0 }; 33706 } 33707 var currentVelocity = { 33708 x: (lastPoint.x - timestampedPoint.x) / time, 33709 y: (lastPoint.y - timestampedPoint.y) / time, 33710 }; 33711 if (currentVelocity.x === Infinity) { 33712 currentVelocity.x = 0; 33713 } 33714 if (currentVelocity.y === Infinity) { 33715 currentVelocity.y = 0; 33716 } 33717 return currentVelocity; 33718 } 33719 33720 33721 33722 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/gestures/drag/utils/constraints.mjs 33723 33724 33725 33726 33727 /** 33728 * Apply constraints to a point. These constraints are both physical along an 33729 * axis, and an elastic factor that determines how much to constrain the point 33730 * by if it does lie outside the defined parameters. 33731 */ 33732 function applyConstraints(point, _a, elastic) { 33733 var min = _a.min, max = _a.max; 33734 if (min !== undefined && point < min) { 33735 // If we have a min point defined, and this is outside of that, constrain 33736 point = elastic ? mix(min, point, elastic.min) : Math.max(point, min); 33737 } 33738 else if (max !== undefined && point > max) { 33739 // If we have a max point defined, and this is outside of that, constrain 33740 point = elastic ? mix(max, point, elastic.max) : Math.min(point, max); 33741 } 33742 return point; 33743 } 33744 /** 33745 * Calculate constraints in terms of the viewport when defined relatively to the 33746 * measured axis. This is measured from the nearest edge, so a max constraint of 200 33747 * on an axis with a max value of 300 would return a constraint of 500 - axis length 33748 */ 33749 function calcRelativeAxisConstraints(axis, min, max) { 33750 return { 33751 min: min !== undefined ? axis.min + min : undefined, 33752 max: max !== undefined 33753 ? axis.max + max - (axis.max - axis.min) 33754 : undefined, 33755 }; 33756 } 33757 /** 33758 * Calculate constraints in terms of the viewport when 33759 * defined relatively to the measured bounding box. 33760 */ 33761 function calcRelativeConstraints(layoutBox, _a) { 33762 var top = _a.top, left = _a.left, bottom = _a.bottom, right = _a.right; 33763 return { 33764 x: calcRelativeAxisConstraints(layoutBox.x, left, right), 33765 y: calcRelativeAxisConstraints(layoutBox.y, top, bottom), 33766 }; 33767 } 33768 /** 33769 * Calculate viewport constraints when defined as another viewport-relative axis 33770 */ 33771 function calcViewportAxisConstraints(layoutAxis, constraintsAxis) { 33772 var _a; 33773 var min = constraintsAxis.min - layoutAxis.min; 33774 var max = constraintsAxis.max - layoutAxis.max; 33775 // If the constraints axis is actually smaller than the layout axis then we can 33776 // flip the constraints 33777 if (constraintsAxis.max - constraintsAxis.min < 33778 layoutAxis.max - layoutAxis.min) { 33779 _a = tslib_es6_read([max, min], 2), min = _a[0], max = _a[1]; 33780 } 33781 return { min: min, max: max }; 33782 } 33783 /** 33784 * Calculate viewport constraints when defined as another viewport-relative box 33785 */ 33786 function calcViewportConstraints(layoutBox, constraintsBox) { 33787 return { 33788 x: calcViewportAxisConstraints(layoutBox.x, constraintsBox.x), 33789 y: calcViewportAxisConstraints(layoutBox.y, constraintsBox.y), 33790 }; 33791 } 33792 /** 33793 * Calculate a transform origin relative to the source axis, between 0-1, that results 33794 * in an asthetically pleasing scale/transform needed to project from source to target. 33795 */ 33796 function constraints_calcOrigin(source, target) { 33797 var origin = 0.5; 33798 var sourceLength = calcLength(source); 33799 var targetLength = calcLength(target); 33800 if (targetLength > sourceLength) { 33801 origin = progress(target.min, target.max - sourceLength, source.min); 33802 } 33803 else if (sourceLength > targetLength) { 33804 origin = progress(source.min, source.max - targetLength, target.min); 33805 } 33806 return clamp(0, 1, origin); 33807 } 33808 /** 33809 * Rebase the calculated viewport constraints relative to the layout.min point. 33810 */ 33811 function rebaseAxisConstraints(layout, constraints) { 33812 var relativeConstraints = {}; 33813 if (constraints.min !== undefined) { 33814 relativeConstraints.min = constraints.min - layout.min; 33815 } 33816 if (constraints.max !== undefined) { 33817 relativeConstraints.max = constraints.max - layout.min; 33818 } 33819 return relativeConstraints; 33820 } 33821 var defaultElastic = 0.35; 33822 /** 33823 * Accepts a dragElastic prop and returns resolved elastic values for each axis. 33824 */ 33825 function resolveDragElastic(dragElastic) { 33826 if (dragElastic === void 0) { dragElastic = defaultElastic; } 33827 if (dragElastic === false) { 33828 dragElastic = 0; 33829 } 33830 else if (dragElastic === true) { 33831 dragElastic = defaultElastic; 33832 } 33833 return { 33834 x: resolveAxisElastic(dragElastic, "left", "right"), 33835 y: resolveAxisElastic(dragElastic, "top", "bottom"), 33836 }; 33837 } 33838 function resolveAxisElastic(dragElastic, minLabel, maxLabel) { 33839 return { 33840 min: resolvePointElastic(dragElastic, minLabel), 33841 max: resolvePointElastic(dragElastic, maxLabel), 33842 }; 33843 } 33844 function resolvePointElastic(dragElastic, label) { 33845 var _a; 33846 return typeof dragElastic === "number" 33847 ? dragElastic 33848 : (_a = dragElastic[label]) !== null && _a !== void 0 ? _a : 0; 33849 } 33850 33851 33852 33853 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/projection/geometry/conversion.mjs 33854 /** 33855 * Bounding boxes tend to be defined as top, left, right, bottom. For various operations 33856 * it's easier to consider each axis individually. This function returns a bounding box 33857 * as a map of single-axis min/max values. 33858 */ 33859 function convertBoundingBoxToBox(_a) { 33860 var top = _a.top, left = _a.left, right = _a.right, bottom = _a.bottom; 33861 return { 33862 x: { min: left, max: right }, 33863 y: { min: top, max: bottom }, 33864 }; 33865 } 33866 function convertBoxToBoundingBox(_a) { 33867 var x = _a.x, y = _a.y; 33868 return { top: y.min, right: x.max, bottom: y.max, left: x.min }; 33869 } 33870 /** 33871 * Applies a TransformPoint function to a bounding box. TransformPoint is usually a function 33872 * provided by Framer to allow measured points to be corrected for device scaling. This is used 33873 * when measuring DOM elements and DOM event points. 33874 */ 33875 function transformBoxPoints(point, transformPoint) { 33876 if (!transformPoint) 33877 return point; 33878 var topLeft = transformPoint({ x: point.left, y: point.top }); 33879 var bottomRight = transformPoint({ x: point.right, y: point.bottom }); 33880 return { 33881 top: topLeft.y, 33882 left: topLeft.x, 33883 bottom: bottomRight.y, 33884 right: bottomRight.x, 33885 }; 33886 } 33887 33888 33889 33890 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/projection/utils/measure.mjs 33891 33892 33893 33894 function measureViewportBox(instance, transformPoint) { 33895 return convertBoundingBoxToBox(transformBoxPoints(instance.getBoundingClientRect(), transformPoint)); 33896 } 33897 function measurePageBox(element, rootProjectionNode, transformPagePoint) { 33898 var viewportBox = measureViewportBox(element, transformPagePoint); 33899 var scroll = rootProjectionNode.scroll; 33900 if (scroll) { 33901 translateAxis(viewportBox.x, scroll.x); 33902 translateAxis(viewportBox.y, scroll.y); 33903 } 33904 return viewportBox; 33905 } 33906 33907 33908 33909 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/gestures/drag/VisualElementDragControls.mjs 33910 33911 33912 33913 33914 33915 33916 33917 33918 33919 33920 33921 33922 33923 33924 33925 33926 33927 33928 33929 var elementDragControls = new WeakMap(); 33930 /** 33931 * 33932 */ 33933 // let latestPointerEvent: AnyPointerEvent 33934 var VisualElementDragControls = /** @class */ (function () { 33935 function VisualElementDragControls(visualElement) { 33936 // This is a reference to the global drag gesture lock, ensuring only one component 33937 // can "capture" the drag of one or both axes. 33938 // TODO: Look into moving this into pansession? 33939 this.openGlobalLock = null; 33940 this.isDragging = false; 33941 this.currentDirection = null; 33942 this.originPoint = { x: 0, y: 0 }; 33943 /** 33944 * The permitted boundaries of travel, in pixels. 33945 */ 33946 this.constraints = false; 33947 this.hasMutatedConstraints = false; 33948 /** 33949 * The per-axis resolved elastic values. 33950 */ 33951 this.elastic = createBox(); 33952 this.visualElement = visualElement; 33953 } 33954 VisualElementDragControls.prototype.start = function (originEvent, _a) { 33955 var _this = this; 33956 var _b = _a === void 0 ? {} : _a, _c = _b.snapToCursor, snapToCursor = _c === void 0 ? false : _c; 33957 /** 33958 * Don't start dragging if this component is exiting 33959 */ 33960 if (this.visualElement.isPresent === false) 33961 return; 33962 var onSessionStart = function (event) { 33963 // Stop any animations on both axis values immediately. This allows the user to throw and catch 33964 // the component. 33965 _this.stopAnimation(); 33966 if (snapToCursor) { 33967 _this.snapToCursor(extractEventInfo(event, "page").point); 33968 } 33969 }; 33970 var onStart = function (event, info) { 33971 var _a; 33972 // Attempt to grab the global drag gesture lock - maybe make this part of PanSession 33973 var _b = _this.getProps(), drag = _b.drag, dragPropagation = _b.dragPropagation, onDragStart = _b.onDragStart; 33974 if (drag && !dragPropagation) { 33975 if (_this.openGlobalLock) 33976 _this.openGlobalLock(); 33977 _this.openGlobalLock = getGlobalLock(drag); 33978 // If we don 't have the lock, don't start dragging 33979 if (!_this.openGlobalLock) 33980 return; 33981 } 33982 _this.isDragging = true; 33983 _this.currentDirection = null; 33984 _this.resolveConstraints(); 33985 if (_this.visualElement.projection) { 33986 _this.visualElement.projection.isAnimationBlocked = true; 33987 _this.visualElement.projection.target = undefined; 33988 } 33989 /** 33990 * Record gesture origin 33991 */ 33992 eachAxis(function (axis) { 33993 var _a, _b; 33994 var current = _this.getAxisMotionValue(axis).get() || 0; 33995 /** 33996 * If the MotionValue is a percentage value convert to px 33997 */ 33998 if (percent.test(current)) { 33999 var measuredAxis = (_b = (_a = _this.visualElement.projection) === null || _a === void 0 ? void 0 : _a.layout) === null || _b === void 0 ? void 0 : _b.actual[axis]; 34000 if (measuredAxis) { 34001 var length_1 = calcLength(measuredAxis); 34002 current = length_1 * (parseFloat(current) / 100); 34003 } 34004 } 34005 _this.originPoint[axis] = current; 34006 }); 34007 // Fire onDragStart event 34008 onDragStart === null || onDragStart === void 0 ? void 0 : onDragStart(event, info); 34009 (_a = _this.visualElement.animationState) === null || _a === void 0 ? void 0 : _a.setActive(AnimationType.Drag, true); 34010 }; 34011 var onMove = function (event, info) { 34012 // latestPointerEvent = event 34013 var _a = _this.getProps(), dragPropagation = _a.dragPropagation, dragDirectionLock = _a.dragDirectionLock, onDirectionLock = _a.onDirectionLock, onDrag = _a.onDrag; 34014 // If we didn't successfully receive the gesture lock, early return. 34015 if (!dragPropagation && !_this.openGlobalLock) 34016 return; 34017 var offset = info.offset; 34018 // Attempt to detect drag direction if directionLock is true 34019 if (dragDirectionLock && _this.currentDirection === null) { 34020 _this.currentDirection = getCurrentDirection(offset); 34021 // If we've successfully set a direction, notify listener 34022 if (_this.currentDirection !== null) { 34023 onDirectionLock === null || onDirectionLock === void 0 ? void 0 : onDirectionLock(_this.currentDirection); 34024 } 34025 return; 34026 } 34027 // Update each point with the latest position 34028 _this.updateAxis("x", info.point, offset); 34029 _this.updateAxis("y", info.point, offset); 34030 /** 34031 * Ideally we would leave the renderer to fire naturally at the end of 34032 * this frame but if the element is about to change layout as the result 34033 * of a re-render we want to ensure the browser can read the latest 34034 * bounding box to ensure the pointer and element don't fall out of sync. 34035 */ 34036 _this.visualElement.syncRender(); 34037 /** 34038 * This must fire after the syncRender call as it might trigger a state 34039 * change which itself might trigger a layout update. 34040 */ 34041 onDrag === null || onDrag === void 0 ? void 0 : onDrag(event, info); 34042 }; 34043 var onSessionEnd = function (event, info) { 34044 return _this.stop(event, info); 34045 }; 34046 this.panSession = new PanSession(originEvent, { 34047 onSessionStart: onSessionStart, 34048 onStart: onStart, 34049 onMove: onMove, 34050 onSessionEnd: onSessionEnd, 34051 }, { transformPagePoint: this.visualElement.getTransformPagePoint() }); 34052 }; 34053 VisualElementDragControls.prototype.stop = function (event, info) { 34054 var isDragging = this.isDragging; 34055 this.cancel(); 34056 if (!isDragging) 34057 return; 34058 var velocity = info.velocity; 34059 this.startAnimation(velocity); 34060 var onDragEnd = this.getProps().onDragEnd; 34061 onDragEnd === null || onDragEnd === void 0 ? void 0 : onDragEnd(event, info); 34062 }; 34063 VisualElementDragControls.prototype.cancel = function () { 34064 var _a, _b; 34065 this.isDragging = false; 34066 if (this.visualElement.projection) { 34067 this.visualElement.projection.isAnimationBlocked = false; 34068 } 34069 (_a = this.panSession) === null || _a === void 0 ? void 0 : _a.end(); 34070 this.panSession = undefined; 34071 var dragPropagation = this.getProps().dragPropagation; 34072 if (!dragPropagation && this.openGlobalLock) { 34073 this.openGlobalLock(); 34074 this.openGlobalLock = null; 34075 } 34076 (_b = this.visualElement.animationState) === null || _b === void 0 ? void 0 : _b.setActive(AnimationType.Drag, false); 34077 }; 34078 VisualElementDragControls.prototype.updateAxis = function (axis, _point, offset) { 34079 var drag = this.getProps().drag; 34080 // If we're not dragging this axis, do an early return. 34081 if (!offset || !shouldDrag(axis, drag, this.currentDirection)) 34082 return; 34083 var axisValue = this.getAxisMotionValue(axis); 34084 var next = this.originPoint[axis] + offset[axis]; 34085 // Apply constraints 34086 if (this.constraints && this.constraints[axis]) { 34087 next = applyConstraints(next, this.constraints[axis], this.elastic[axis]); 34088 } 34089 axisValue.set(next); 34090 }; 34091 VisualElementDragControls.prototype.resolveConstraints = function () { 34092 var _this = this; 34093 var _a = this.getProps(), dragConstraints = _a.dragConstraints, dragElastic = _a.dragElastic; 34094 var layout = (this.visualElement.projection || {}).layout; 34095 var prevConstraints = this.constraints; 34096 if (dragConstraints && is_ref_object_isRefObject(dragConstraints)) { 34097 if (!this.constraints) { 34098 this.constraints = this.resolveRefConstraints(); 34099 } 34100 } 34101 else { 34102 if (dragConstraints && layout) { 34103 this.constraints = calcRelativeConstraints(layout.actual, dragConstraints); 34104 } 34105 else { 34106 this.constraints = false; 34107 } 34108 } 34109 this.elastic = resolveDragElastic(dragElastic); 34110 /** 34111 * If we're outputting to external MotionValues, we want to rebase the measured constraints 34112 * from viewport-relative to component-relative. 34113 */ 34114 if (prevConstraints !== this.constraints && 34115 layout && 34116 this.constraints && 34117 !this.hasMutatedConstraints) { 34118 eachAxis(function (axis) { 34119 if (_this.getAxisMotionValue(axis)) { 34120 _this.constraints[axis] = rebaseAxisConstraints(layout.actual[axis], _this.constraints[axis]); 34121 } 34122 }); 34123 } 34124 }; 34125 VisualElementDragControls.prototype.resolveRefConstraints = function () { 34126 var _a = this.getProps(), constraints = _a.dragConstraints, onMeasureDragConstraints = _a.onMeasureDragConstraints; 34127 if (!constraints || !is_ref_object_isRefObject(constraints)) 34128 return false; 34129 var constraintsElement = constraints.current; 34130 invariant(constraintsElement !== null, "If `dragConstraints` is set as a React ref, that ref must be passed to another component's `ref` prop."); 34131 var projection = this.visualElement.projection; 34132 // TODO 34133 if (!projection || !projection.layout) 34134 return false; 34135 var constraintsBox = measurePageBox(constraintsElement, projection.root, this.visualElement.getTransformPagePoint()); 34136 var measuredConstraints = calcViewportConstraints(projection.layout.actual, constraintsBox); 34137 /** 34138 * If there's an onMeasureDragConstraints listener we call it and 34139 * if different constraints are returned, set constraints to that 34140 */ 34141 if (onMeasureDragConstraints) { 34142 var userConstraints = onMeasureDragConstraints(convertBoxToBoundingBox(measuredConstraints)); 34143 this.hasMutatedConstraints = !!userConstraints; 34144 if (userConstraints) { 34145 measuredConstraints = convertBoundingBoxToBox(userConstraints); 34146 } 34147 } 34148 return measuredConstraints; 34149 }; 34150 VisualElementDragControls.prototype.startAnimation = function (velocity) { 34151 var _this = this; 34152 var _a = this.getProps(), drag = _a.drag, dragMomentum = _a.dragMomentum, dragElastic = _a.dragElastic, dragTransition = _a.dragTransition, dragSnapToOrigin = _a.dragSnapToOrigin, onDragTransitionEnd = _a.onDragTransitionEnd; 34153 var constraints = this.constraints || {}; 34154 var momentumAnimations = eachAxis(function (axis) { 34155 var _a; 34156 if (!shouldDrag(axis, drag, _this.currentDirection)) { 34157 return; 34158 } 34159 var transition = (_a = constraints === null || constraints === void 0 ? void 0 : constraints[axis]) !== null && _a !== void 0 ? _a : {}; 34160 if (dragSnapToOrigin) 34161 transition = { min: 0, max: 0 }; 34162 /** 34163 * Overdamp the boundary spring if `dragElastic` is disabled. There's still a frame 34164 * of spring animations so we should look into adding a disable spring option to `inertia`. 34165 * We could do something here where we affect the `bounceStiffness` and `bounceDamping` 34166 * using the value of `dragElastic`. 34167 */ 34168 var bounceStiffness = dragElastic ? 200 : 1000000; 34169 var bounceDamping = dragElastic ? 40 : 10000000; 34170 var inertia = __assign(__assign({ type: "inertia", velocity: dragMomentum ? velocity[axis] : 0, bounceStiffness: bounceStiffness, bounceDamping: bounceDamping, timeConstant: 750, restDelta: 1, restSpeed: 10 }, dragTransition), transition); 34171 // If we're not animating on an externally-provided `MotionValue` we can use the 34172 // component's animation controls which will handle interactions with whileHover (etc), 34173 // otherwise we just have to animate the `MotionValue` itself. 34174 return _this.startAxisValueAnimation(axis, inertia); 34175 }); 34176 // Run all animations and then resolve the new drag constraints. 34177 return Promise.all(momentumAnimations).then(onDragTransitionEnd); 34178 }; 34179 VisualElementDragControls.prototype.startAxisValueAnimation = function (axis, transition) { 34180 var axisValue = this.getAxisMotionValue(axis); 34181 return startAnimation(axis, axisValue, 0, transition); 34182 }; 34183 VisualElementDragControls.prototype.stopAnimation = function () { 34184 var _this = this; 34185 eachAxis(function (axis) { return _this.getAxisMotionValue(axis).stop(); }); 34186 }; 34187 /** 34188 * Drag works differently depending on which props are provided. 34189 * 34190 * - If _dragX and _dragY are provided, we output the gesture delta directly to those motion values. 34191 * - Otherwise, we apply the delta to the x/y motion values. 34192 */ 34193 VisualElementDragControls.prototype.getAxisMotionValue = function (axis) { 34194 var _a, _b; 34195 var dragKey = "_drag" + axis.toUpperCase(); 34196 var externalMotionValue = this.visualElement.getProps()[dragKey]; 34197 return externalMotionValue 34198 ? externalMotionValue 34199 : this.visualElement.getValue(axis, (_b = (_a = this.visualElement.getProps().initial) === null || _a === void 0 ? void 0 : _a[axis]) !== null && _b !== void 0 ? _b : 0); 34200 }; 34201 VisualElementDragControls.prototype.snapToCursor = function (point) { 34202 var _this = this; 34203 eachAxis(function (axis) { 34204 var drag = _this.getProps().drag; 34205 // If we're not dragging this axis, do an early return. 34206 if (!shouldDrag(axis, drag, _this.currentDirection)) 34207 return; 34208 var projection = _this.visualElement.projection; 34209 var axisValue = _this.getAxisMotionValue(axis); 34210 if (projection && projection.layout) { 34211 var _a = projection.layout.actual[axis], min = _a.min, max = _a.max; 34212 axisValue.set(point[axis] - mix(min, max, 0.5)); 34213 } 34214 }); 34215 }; 34216 /** 34217 * When the viewport resizes we want to check if the measured constraints 34218 * have changed and, if so, reposition the element within those new constraints 34219 * relative to where it was before the resize. 34220 */ 34221 VisualElementDragControls.prototype.scalePositionWithinConstraints = function () { 34222 var _this = this; 34223 var _a; 34224 var _b = this.getProps(), drag = _b.drag, dragConstraints = _b.dragConstraints; 34225 var projection = this.visualElement.projection; 34226 if (!is_ref_object_isRefObject(dragConstraints) || !projection || !this.constraints) 34227 return; 34228 /** 34229 * Stop current animations as there can be visual glitching if we try to do 34230 * this mid-animation 34231 */ 34232 this.stopAnimation(); 34233 /** 34234 * Record the relative position of the dragged element relative to the 34235 * constraints box and save as a progress value. 34236 */ 34237 var boxProgress = { x: 0, y: 0 }; 34238 eachAxis(function (axis) { 34239 var axisValue = _this.getAxisMotionValue(axis); 34240 if (axisValue) { 34241 var latest = axisValue.get(); 34242 boxProgress[axis] = constraints_calcOrigin({ min: latest, max: latest }, _this.constraints[axis]); 34243 } 34244 }); 34245 /** 34246 * Update the layout of this element and resolve the latest drag constraints 34247 */ 34248 var transformTemplate = this.visualElement.getProps().transformTemplate; 34249 this.visualElement.getInstance().style.transform = transformTemplate 34250 ? transformTemplate({}, "") 34251 : "none"; 34252 (_a = projection.root) === null || _a === void 0 ? void 0 : _a.updateScroll(); 34253 projection.updateLayout(); 34254 this.resolveConstraints(); 34255 /** 34256 * For each axis, calculate the current progress of the layout axis 34257 * within the new constraints. 34258 */ 34259 eachAxis(function (axis) { 34260 if (!shouldDrag(axis, drag, null)) 34261 return; 34262 /** 34263 * Calculate a new transform based on the previous box progress 34264 */ 34265 var axisValue = _this.getAxisMotionValue(axis); 34266 var _a = _this.constraints[axis], min = _a.min, max = _a.max; 34267 axisValue.set(mix(min, max, boxProgress[axis])); 34268 }); 34269 }; 34270 VisualElementDragControls.prototype.addListeners = function () { 34271 var _this = this; 34272 var _a; 34273 elementDragControls.set(this.visualElement, this); 34274 var element = this.visualElement.getInstance(); 34275 /** 34276 * Attach a pointerdown event listener on this DOM element to initiate drag tracking. 34277 */ 34278 var stopPointerListener = addPointerEvent(element, "pointerdown", function (event) { 34279 var _a = _this.getProps(), drag = _a.drag, _b = _a.dragListener, dragListener = _b === void 0 ? true : _b; 34280 drag && dragListener && _this.start(event); 34281 }); 34282 var measureDragConstraints = function () { 34283 var dragConstraints = _this.getProps().dragConstraints; 34284 if (is_ref_object_isRefObject(dragConstraints)) { 34285 _this.constraints = _this.resolveRefConstraints(); 34286 } 34287 }; 34288 var projection = this.visualElement.projection; 34289 var stopMeasureLayoutListener = projection.addEventListener("measure", measureDragConstraints); 34290 if (projection && !projection.layout) { 34291 (_a = projection.root) === null || _a === void 0 ? void 0 : _a.updateScroll(); 34292 projection.updateLayout(); 34293 } 34294 measureDragConstraints(); 34295 /** 34296 * Attach a window resize listener to scale the draggable target within its defined 34297 * constraints as the window resizes. 34298 */ 34299 var stopResizeListener = addDomEvent(window, "resize", function () { 34300 _this.scalePositionWithinConstraints(); 34301 }); 34302 /** 34303 * If the element's layout changes, calculate the delta and apply that to 34304 * the drag gesture's origin point. 34305 */ 34306 projection.addEventListener("didUpdate", (function (_a) { 34307 var delta = _a.delta, hasLayoutChanged = _a.hasLayoutChanged; 34308 if (_this.isDragging && hasLayoutChanged) { 34309 eachAxis(function (axis) { 34310 var motionValue = _this.getAxisMotionValue(axis); 34311 if (!motionValue) 34312 return; 34313 _this.originPoint[axis] += delta[axis].translate; 34314 motionValue.set(motionValue.get() + delta[axis].translate); 34315 }); 34316 _this.visualElement.syncRender(); 34317 } 34318 })); 34319 return function () { 34320 stopResizeListener(); 34321 stopPointerListener(); 34322 stopMeasureLayoutListener(); 34323 }; 34324 }; 34325 VisualElementDragControls.prototype.getProps = function () { 34326 var props = this.visualElement.getProps(); 34327 var _a = props.drag, drag = _a === void 0 ? false : _a, _b = props.dragDirectionLock, dragDirectionLock = _b === void 0 ? false : _b, _c = props.dragPropagation, dragPropagation = _c === void 0 ? false : _c, _d = props.dragConstraints, dragConstraints = _d === void 0 ? false : _d, _e = props.dragElastic, dragElastic = _e === void 0 ? defaultElastic : _e, _f = props.dragMomentum, dragMomentum = _f === void 0 ? true : _f; 34328 return __assign(__assign({}, props), { drag: drag, dragDirectionLock: dragDirectionLock, dragPropagation: dragPropagation, dragConstraints: dragConstraints, dragElastic: dragElastic, dragMomentum: dragMomentum }); 34329 }; 34330 return VisualElementDragControls; 34331 }()); 34332 function shouldDrag(direction, drag, currentDirection) { 34333 return ((drag === true || drag === direction) && 34334 (currentDirection === null || currentDirection === direction)); 34335 } 34336 /** 34337 * Based on an x/y offset determine the current drag direction. If both axis' offsets are lower 34338 * than the provided threshold, return `null`. 34339 * 34340 * @param offset - The x/y offset from origin. 34341 * @param lockThreshold - (Optional) - the minimum absolute offset before we can determine a drag direction. 34342 */ 34343 function getCurrentDirection(offset, lockThreshold) { 34344 if (lockThreshold === void 0) { lockThreshold = 10; } 34345 var direction = null; 34346 if (Math.abs(offset.y) > lockThreshold) { 34347 direction = "y"; 34348 } 34349 else if (Math.abs(offset.x) > lockThreshold) { 34350 direction = "x"; 34351 } 34352 return direction; 34353 } 34354 34355 34356 34357 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/gestures/drag/use-drag.mjs 34358 34359 34360 34361 34362 /** 34363 * A hook that allows an element to be dragged. 34364 * 34365 * @internal 34366 */ 34367 function useDrag(props) { 34368 var groupDragControls = props.dragControls, visualElement = props.visualElement; 34369 var dragControls = useConstant(function () { return new VisualElementDragControls(visualElement); }); 34370 // If we've been provided a DragControls for manual control over the drag gesture, 34371 // subscribe this component to it on mount. 34372 (0,external_React_.useEffect)(function () { return groupDragControls && groupDragControls.subscribe(dragControls); }, [dragControls, groupDragControls]); 34373 // Apply the event listeners to the element 34374 (0,external_React_.useEffect)(function () { return dragControls.addListeners(); }, [dragControls]); 34375 } 34376 34377 34378 34379 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/gestures/use-pan-gesture.mjs 34380 34381 34382 34383 34384 34385 34386 /** 34387 * 34388 * @param handlers - 34389 * @param ref - 34390 * 34391 * @internalremarks 34392 * Currently this sets new pan gesture functions every render. The memo route has been explored 34393 * in the past but ultimately we're still creating new functions every render. An optimisation 34394 * to explore is creating the pan gestures and loading them into a `ref`. 34395 * 34396 * @internal 34397 */ 34398 function usePanGesture(_a) { 34399 var onPan = _a.onPan, onPanStart = _a.onPanStart, onPanEnd = _a.onPanEnd, onPanSessionStart = _a.onPanSessionStart, visualElement = _a.visualElement; 34400 var hasPanEvents = onPan || onPanStart || onPanEnd || onPanSessionStart; 34401 var panSession = (0,external_React_.useRef)(null); 34402 var transformPagePoint = (0,external_React_.useContext)(MotionConfigContext).transformPagePoint; 34403 var handlers = { 34404 onSessionStart: onPanSessionStart, 34405 onStart: onPanStart, 34406 onMove: onPan, 34407 onEnd: function (event, info) { 34408 panSession.current = null; 34409 onPanEnd && onPanEnd(event, info); 34410 }, 34411 }; 34412 (0,external_React_.useEffect)(function () { 34413 if (panSession.current !== null) { 34414 panSession.current.updateHandlers(handlers); 34415 } 34416 }); 34417 function onPointerDown(event) { 34418 panSession.current = new PanSession(event, handlers, { 34419 transformPagePoint: transformPagePoint, 34420 }); 34421 } 34422 usePointerEvent(visualElement, "pointerdown", hasPanEvents && onPointerDown); 34423 useUnmountEffect(function () { return panSession.current && panSession.current.end(); }); 34424 } 34425 34426 34427 34428 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/motion/features/drag.mjs 34429 34430 34431 34432 34433 var drag = { 34434 pan: makeRenderlessComponent(usePanGesture), 34435 drag: makeRenderlessComponent(useDrag), 34436 }; 34437 34438 34439 34440 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/utils/lifecycles.mjs 34441 34442 34443 34444 var lifecycles_names = [ 34445 "LayoutMeasure", 34446 "BeforeLayoutMeasure", 34447 "LayoutUpdate", 34448 "ViewportBoxUpdate", 34449 "Update", 34450 "Render", 34451 "AnimationComplete", 34452 "LayoutAnimationComplete", 34453 "AnimationStart", 34454 "LayoutAnimationStart", 34455 "SetAxisTarget", 34456 "Unmount", 34457 ]; 34458 function createLifecycles() { 34459 var managers = lifecycles_names.map(function () { return new SubscriptionManager(); }); 34460 var propSubscriptions = {}; 34461 var lifecycles = { 34462 clearAllListeners: function () { return managers.forEach(function (manager) { return manager.clear(); }); }, 34463 updatePropListeners: function (props) { 34464 lifecycles_names.forEach(function (name) { 34465 var _a; 34466 var on = "on" + name; 34467 var propListener = props[on]; 34468 // Unsubscribe existing subscription 34469 (_a = propSubscriptions[name]) === null || _a === void 0 ? void 0 : _a.call(propSubscriptions); 34470 // Add new subscription 34471 if (propListener) { 34472 propSubscriptions[name] = lifecycles[on](propListener); 34473 } 34474 }); 34475 }, 34476 }; 34477 managers.forEach(function (manager, i) { 34478 lifecycles["on" + lifecycles_names[i]] = function (handler) { return manager.add(handler); }; 34479 lifecycles["notify" + lifecycles_names[i]] = function () { 34480 var args = []; 34481 for (var _i = 0; _i < arguments.length; _i++) { 34482 args[_i] = arguments[_i]; 34483 } 34484 return manager.notify.apply(manager, tslib_es6_spreadArray([], tslib_es6_read(args), false)); 34485 }; 34486 }); 34487 return lifecycles; 34488 } 34489 34490 34491 34492 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/utils/motion-values.mjs 34493 34494 34495 34496 function updateMotionValuesFromProps(element, next, prev) { 34497 var _a; 34498 for (var key in next) { 34499 var nextValue = next[key]; 34500 var prevValue = prev[key]; 34501 if (isMotionValue(nextValue)) { 34502 /** 34503 * If this is a motion value found in props or style, we want to add it 34504 * to our visual element's motion value map. 34505 */ 34506 element.addValue(key, nextValue); 34507 } 34508 else if (isMotionValue(prevValue)) { 34509 /** 34510 * If we're swapping to a new motion value, create a new motion value 34511 * from that 34512 */ 34513 element.addValue(key, motionValue(nextValue)); 34514 } 34515 else if (prevValue !== nextValue) { 34516 /** 34517 * If this is a flat value that has changed, update the motion value 34518 * or create one if it doesn't exist. We only want to do this if we're 34519 * not handling the value with our animation state. 34520 */ 34521 if (element.hasValue(key)) { 34522 var existingValue = element.getValue(key); 34523 // TODO: Only update values that aren't being animated or even looked at 34524 !existingValue.hasAnimated && existingValue.set(nextValue); 34525 } 34526 else { 34527 element.addValue(key, motionValue((_a = element.getStaticValue(key)) !== null && _a !== void 0 ? _a : nextValue)); 34528 } 34529 } 34530 } 34531 // Handle removed values 34532 for (var key in prev) { 34533 if (next[key] === undefined) 34534 element.removeValue(key); 34535 } 34536 return next; 34537 } 34538 34539 34540 34541 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/index.mjs 34542 34543 34544 34545 34546 34547 34548 34549 34550 34551 var visualElement = function (_a) { 34552 var _b = _a.treeType, treeType = _b === void 0 ? "" : _b, build = _a.build, getBaseTarget = _a.getBaseTarget, makeTargetAnimatable = _a.makeTargetAnimatable, measureViewportBox = _a.measureViewportBox, renderInstance = _a.render, readValueFromInstance = _a.readValueFromInstance, removeValueFromRenderState = _a.removeValueFromRenderState, sortNodePosition = _a.sortNodePosition, scrapeMotionValuesFromProps = _a.scrapeMotionValuesFromProps; 34553 return function (_a, options) { 34554 var parent = _a.parent, props = _a.props, presenceId = _a.presenceId, blockInitialAnimation = _a.blockInitialAnimation, visualState = _a.visualState, shouldReduceMotion = _a.shouldReduceMotion; 34555 if (options === void 0) { options = {}; } 34556 var isMounted = false; 34557 var latestValues = visualState.latestValues, renderState = visualState.renderState; 34558 /** 34559 * The instance of the render-specific node that will be hydrated by the 34560 * exposed React ref. So for example, this visual element can host a 34561 * HTMLElement, plain object, or Three.js object. The functions provided 34562 * in VisualElementConfig allow us to interface with this instance. 34563 */ 34564 var instance; 34565 /** 34566 * Manages the subscriptions for a visual element's lifecycle, for instance 34567 * onRender 34568 */ 34569 var lifecycles = createLifecycles(); 34570 /** 34571 * A map of all motion values attached to this visual element. Motion 34572 * values are source of truth for any given animated value. A motion 34573 * value might be provided externally by the component via props. 34574 */ 34575 var values = new Map(); 34576 /** 34577 * A map of every subscription that binds the provided or generated 34578 * motion values onChange listeners to this visual element. 34579 */ 34580 var valueSubscriptions = new Map(); 34581 /** 34582 * A reference to the previously-provided motion values as returned 34583 * from scrapeMotionValuesFromProps. We use the keys in here to determine 34584 * if any motion values need to be removed after props are updated. 34585 */ 34586 var prevMotionValues = {}; 34587 /** 34588 * When values are removed from all animation props we need to search 34589 * for a fallback value to animate to. These values are tracked in baseTarget. 34590 */ 34591 var baseTarget = __assign({}, latestValues); 34592 // Internal methods ======================== 34593 /** 34594 * On mount, this will be hydrated with a callback to disconnect 34595 * this visual element from its parent on unmount. 34596 */ 34597 var removeFromVariantTree; 34598 /** 34599 * Render the element with the latest styles outside of the React 34600 * render lifecycle 34601 */ 34602 function render() { 34603 if (!instance || !isMounted) 34604 return; 34605 triggerBuild(); 34606 renderInstance(instance, renderState, props.style, element.projection); 34607 } 34608 function triggerBuild() { 34609 build(element, renderState, latestValues, options, props); 34610 } 34611 function update() { 34612 lifecycles.notifyUpdate(latestValues); 34613 } 34614 /** 34615 * 34616 */ 34617 function bindToMotionValue(key, value) { 34618 var removeOnChange = value.onChange(function (latestValue) { 34619 latestValues[key] = latestValue; 34620 props.onUpdate && es.update(update, false, true); 34621 }); 34622 var removeOnRenderRequest = value.onRenderRequest(element.scheduleRender); 34623 valueSubscriptions.set(key, function () { 34624 removeOnChange(); 34625 removeOnRenderRequest(); 34626 }); 34627 } 34628 /** 34629 * Any motion values that are provided to the element when created 34630 * aren't yet bound to the element, as this would technically be impure. 34631 * However, we iterate through the motion values and set them to the 34632 * initial values for this component. 34633 * 34634 * TODO: This is impure and we should look at changing this to run on mount. 34635 * Doing so will break some tests but this isn't neccessarily a breaking change, 34636 * more a reflection of the test. 34637 */ 34638 var initialMotionValues = scrapeMotionValuesFromProps(props); 34639 for (var key in initialMotionValues) { 34640 var value = initialMotionValues[key]; 34641 if (latestValues[key] !== undefined && isMotionValue(value)) { 34642 value.set(latestValues[key], false); 34643 } 34644 } 34645 /** 34646 * Determine what role this visual element should take in the variant tree. 34647 */ 34648 var isControllingVariants = checkIfControllingVariants(props); 34649 var isVariantNode = checkIfVariantNode(props); 34650 var element = __assign(__assign({ treeType: treeType, 34651 /** 34652 * This is a mirror of the internal instance prop, which keeps 34653 * VisualElement type-compatible with React's RefObject. 34654 */ 34655 current: null, 34656 /** 34657 * The depth of this visual element within the visual element tree. 34658 */ 34659 depth: parent ? parent.depth + 1 : 0, parent: parent, children: new Set(), 34660 /** 34661 * 34662 */ 34663 presenceId: presenceId, shouldReduceMotion: shouldReduceMotion, 34664 /** 34665 * If this component is part of the variant tree, it should track 34666 * any children that are also part of the tree. This is essentially 34667 * a shadow tree to simplify logic around how to stagger over children. 34668 */ 34669 variantChildren: isVariantNode ? new Set() : undefined, 34670 /** 34671 * Whether this instance is visible. This can be changed imperatively 34672 * by the projection tree, is analogous to CSS's visibility in that 34673 * hidden elements should take up layout, and needs enacting by the configured 34674 * render function. 34675 */ 34676 isVisible: undefined, 34677 /** 34678 * Normally, if a component is controlled by a parent's variants, it can 34679 * rely on that ancestor to trigger animations further down the tree. 34680 * However, if a component is created after its parent is mounted, the parent 34681 * won't trigger that mount animation so the child needs to. 34682 * 34683 * TODO: This might be better replaced with a method isParentMounted 34684 */ 34685 manuallyAnimateOnMount: Boolean(parent === null || parent === void 0 ? void 0 : parent.isMounted()), 34686 /** 34687 * This can be set by AnimatePresence to force components that mount 34688 * at the same time as it to mount as if they have initial={false} set. 34689 */ 34690 blockInitialAnimation: blockInitialAnimation, 34691 /** 34692 * Determine whether this component has mounted yet. This is mostly used 34693 * by variant children to determine whether they need to trigger their 34694 * own animations on mount. 34695 */ 34696 isMounted: function () { return Boolean(instance); }, mount: function (newInstance) { 34697 isMounted = true; 34698 instance = element.current = newInstance; 34699 if (element.projection) { 34700 element.projection.mount(newInstance); 34701 } 34702 if (isVariantNode && parent && !isControllingVariants) { 34703 removeFromVariantTree = parent === null || parent === void 0 ? void 0 : parent.addVariantChild(element); 34704 } 34705 values.forEach(function (value, key) { return bindToMotionValue(key, value); }); 34706 parent === null || parent === void 0 ? void 0 : parent.children.add(element); 34707 element.setProps(props); 34708 }, 34709 /** 34710 * 34711 */ 34712 unmount: function () { 34713 var _a; 34714 (_a = element.projection) === null || _a === void 0 ? void 0 : _a.unmount(); 34715 cancelSync.update(update); 34716 cancelSync.render(render); 34717 valueSubscriptions.forEach(function (remove) { return remove(); }); 34718 removeFromVariantTree === null || removeFromVariantTree === void 0 ? void 0 : removeFromVariantTree(); 34719 parent === null || parent === void 0 ? void 0 : parent.children.delete(element); 34720 lifecycles.clearAllListeners(); 34721 instance = undefined; 34722 isMounted = false; 34723 }, 34724 /** 34725 * Add a child visual element to our set of children. 34726 */ 34727 addVariantChild: function (child) { 34728 var _a; 34729 var closestVariantNode = element.getClosestVariantNode(); 34730 if (closestVariantNode) { 34731 (_a = closestVariantNode.variantChildren) === null || _a === void 0 ? void 0 : _a.add(child); 34732 return function () { 34733 return closestVariantNode.variantChildren.delete(child); 34734 }; 34735 } 34736 }, sortNodePosition: function (other) { 34737 /** 34738 * If these nodes aren't even of the same type we can't compare their depth. 34739 */ 34740 if (!sortNodePosition || treeType !== other.treeType) 34741 return 0; 34742 return sortNodePosition(element.getInstance(), other.getInstance()); 34743 }, 34744 /** 34745 * Returns the closest variant node in the tree starting from 34746 * this visual element. 34747 */ 34748 getClosestVariantNode: function () { 34749 return isVariantNode ? element : parent === null || parent === void 0 ? void 0 : parent.getClosestVariantNode(); 34750 }, 34751 /** 34752 * Expose the latest layoutId prop. 34753 */ 34754 getLayoutId: function () { return props.layoutId; }, 34755 /** 34756 * Returns the current instance. 34757 */ 34758 getInstance: function () { return instance; }, 34759 /** 34760 * Get/set the latest static values. 34761 */ 34762 getStaticValue: function (key) { return latestValues[key]; }, setStaticValue: function (key, value) { return (latestValues[key] = value); }, 34763 /** 34764 * Returns the latest motion value state. Currently only used to take 34765 * a snapshot of the visual element - perhaps this can return the whole 34766 * visual state 34767 */ 34768 getLatestValues: function () { return latestValues; }, 34769 /** 34770 * Set the visiblity of the visual element. If it's changed, schedule 34771 * a render to reflect these changes. 34772 */ 34773 setVisibility: function (visibility) { 34774 if (element.isVisible === visibility) 34775 return; 34776 element.isVisible = visibility; 34777 element.scheduleRender(); 34778 }, 34779 /** 34780 * Make a target animatable by Popmotion. For instance, if we're 34781 * trying to animate width from 100px to 100vw we need to measure 100vw 34782 * in pixels to determine what we really need to animate to. This is also 34783 * pluggable to support Framer's custom value types like Color, 34784 * and CSS variables. 34785 */ 34786 makeTargetAnimatable: function (target, canMutate) { 34787 if (canMutate === void 0) { canMutate = true; } 34788 return makeTargetAnimatable(element, target, props, canMutate); 34789 }, 34790 /** 34791 * Measure the current viewport box with or without transforms. 34792 * Only measures axis-aligned boxes, rotate and skew must be manually 34793 * removed with a re-render to work. 34794 */ 34795 measureViewportBox: function () { 34796 return measureViewportBox(instance, props); 34797 }, 34798 // Motion values ======================== 34799 /** 34800 * Add a motion value and bind it to this visual element. 34801 */ 34802 addValue: function (key, value) { 34803 // Remove existing value if it exists 34804 if (element.hasValue(key)) 34805 element.removeValue(key); 34806 values.set(key, value); 34807 latestValues[key] = value.get(); 34808 bindToMotionValue(key, value); 34809 }, 34810 /** 34811 * Remove a motion value and unbind any active subscriptions. 34812 */ 34813 removeValue: function (key) { 34814 var _a; 34815 values.delete(key); 34816 (_a = valueSubscriptions.get(key)) === null || _a === void 0 ? void 0 : _a(); 34817 valueSubscriptions.delete(key); 34818 delete latestValues[key]; 34819 removeValueFromRenderState(key, renderState); 34820 }, 34821 /** 34822 * Check whether we have a motion value for this key 34823 */ 34824 hasValue: function (key) { return values.has(key); }, 34825 /** 34826 * Get a motion value for this key. If called with a default 34827 * value, we'll create one if none exists. 34828 */ 34829 getValue: function (key, defaultValue) { 34830 var value = values.get(key); 34831 if (value === undefined && defaultValue !== undefined) { 34832 value = motionValue(defaultValue); 34833 element.addValue(key, value); 34834 } 34835 return value; 34836 }, 34837 /** 34838 * Iterate over our motion values. 34839 */ 34840 forEachValue: function (callback) { return values.forEach(callback); }, 34841 /** 34842 * If we're trying to animate to a previously unencountered value, 34843 * we need to check for it in our state and as a last resort read it 34844 * directly from the instance (which might have performance implications). 34845 */ 34846 readValue: function (key) { 34847 var _a; 34848 return (_a = latestValues[key]) !== null && _a !== void 0 ? _a : readValueFromInstance(instance, key, options); 34849 }, 34850 /** 34851 * Set the base target to later animate back to. This is currently 34852 * only hydrated on creation and when we first read a value. 34853 */ 34854 setBaseTarget: function (key, value) { 34855 baseTarget[key] = value; 34856 }, 34857 /** 34858 * Find the base target for a value thats been removed from all animation 34859 * props. 34860 */ 34861 getBaseTarget: function (key) { 34862 if (getBaseTarget) { 34863 var target = getBaseTarget(props, key); 34864 if (target !== undefined && !isMotionValue(target)) 34865 return target; 34866 } 34867 return baseTarget[key]; 34868 } }, lifecycles), { 34869 /** 34870 * Build the renderer state based on the latest visual state. 34871 */ 34872 build: function () { 34873 triggerBuild(); 34874 return renderState; 34875 }, 34876 /** 34877 * Schedule a render on the next animation frame. 34878 */ 34879 scheduleRender: function () { 34880 es.render(render, false, true); 34881 }, 34882 /** 34883 * Synchronously fire render. It's prefered that we batch renders but 34884 * in many circumstances, like layout measurement, we need to run this 34885 * synchronously. However in those instances other measures should be taken 34886 * to batch reads/writes. 34887 */ 34888 syncRender: render, 34889 /** 34890 * Update the provided props. Ensure any newly-added motion values are 34891 * added to our map, old ones removed, and listeners updated. 34892 */ 34893 setProps: function (newProps) { 34894 if (newProps.transformTemplate || props.transformTemplate) { 34895 element.scheduleRender(); 34896 } 34897 props = newProps; 34898 lifecycles.updatePropListeners(newProps); 34899 prevMotionValues = updateMotionValuesFromProps(element, scrapeMotionValuesFromProps(props), prevMotionValues); 34900 }, getProps: function () { return props; }, 34901 // Variants ============================== 34902 /** 34903 * Returns the variant definition with a given name. 34904 */ 34905 getVariant: function (name) { var _a; return (_a = props.variants) === null || _a === void 0 ? void 0 : _a[name]; }, 34906 /** 34907 * Returns the defined default transition on this component. 34908 */ 34909 getDefaultTransition: function () { return props.transition; }, getTransformPagePoint: function () { 34910 return props.transformPagePoint; 34911 }, 34912 /** 34913 * Used by child variant nodes to get the closest ancestor variant props. 34914 */ 34915 getVariantContext: function (startAtParent) { 34916 if (startAtParent === void 0) { startAtParent = false; } 34917 if (startAtParent) 34918 return parent === null || parent === void 0 ? void 0 : parent.getVariantContext(); 34919 if (!isControllingVariants) { 34920 var context_1 = (parent === null || parent === void 0 ? void 0 : parent.getVariantContext()) || {}; 34921 if (props.initial !== undefined) { 34922 context_1.initial = props.initial; 34923 } 34924 return context_1; 34925 } 34926 var context = {}; 34927 for (var i = 0; i < numVariantProps; i++) { 34928 var name_1 = variantProps[i]; 34929 var prop = props[name_1]; 34930 if (isVariantLabel(prop) || prop === false) { 34931 context[name_1] = prop; 34932 } 34933 } 34934 return context; 34935 } }); 34936 return element; 34937 }; 34938 }; 34939 var variantProps = tslib_es6_spreadArray(["initial"], tslib_es6_read(variantPriorityOrder), false); 34940 var numVariantProps = variantProps.length; 34941 34942 34943 34944 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/dom/utils/css-variables-conversion.mjs 34945 34946 34947 34948 function css_variables_conversion_isCSSVariable(value) { 34949 return typeof value === "string" && value.startsWith("var(--"); 34950 } 34951 /** 34952 * Parse Framer's special CSS variable format into a CSS token and a fallback. 34953 * 34954 * ``` 34955 * `var(--foo, #fff)` => [`--foo`, '#fff'] 34956 * ``` 34957 * 34958 * @param current 34959 */ 34960 var cssVariableRegex = /var\((--[a-zA-Z0-9-_]+),? ?([a-zA-Z0-9 ()%#.,-]+)?\)/; 34961 function parseCSSVariable(current) { 34962 var match = cssVariableRegex.exec(current); 34963 if (!match) 34964 return [,]; 34965 var _a = tslib_es6_read(match, 3), token = _a[1], fallback = _a[2]; 34966 return [token, fallback]; 34967 } 34968 var maxDepth = 4; 34969 function getVariableValue(current, element, depth) { 34970 if (depth === void 0) { depth = 1; } 34971 invariant(depth <= maxDepth, "Max CSS variable fallback depth detected in property \"".concat(current, "\". This may indicate a circular fallback dependency.")); 34972 var _a = tslib_es6_read(parseCSSVariable(current), 2), token = _a[0], fallback = _a[1]; 34973 // No CSS variable detected 34974 if (!token) 34975 return; 34976 // Attempt to read this CSS variable off the element 34977 var resolved = window.getComputedStyle(element).getPropertyValue(token); 34978 if (resolved) { 34979 return resolved.trim(); 34980 } 34981 else if (css_variables_conversion_isCSSVariable(fallback)) { 34982 // The fallback might itself be a CSS variable, in which case we attempt to resolve it too. 34983 return getVariableValue(fallback, element, depth + 1); 34984 } 34985 else { 34986 return fallback; 34987 } 34988 } 34989 /** 34990 * Resolve CSS variables from 34991 * 34992 * @internal 34993 */ 34994 function resolveCSSVariables(visualElement, _a, transitionEnd) { 34995 var _b; 34996 var target = __rest(_a, []); 34997 var element = visualElement.getInstance(); 34998 if (!(element instanceof Element)) 34999 return { target: target, transitionEnd: transitionEnd }; 35000 // If `transitionEnd` isn't `undefined`, clone it. We could clone `target` and `transitionEnd` 35001 // only if they change but I think this reads clearer and this isn't a performance-critical path. 35002 if (transitionEnd) { 35003 transitionEnd = __assign({}, transitionEnd); 35004 } 35005 // Go through existing `MotionValue`s and ensure any existing CSS variables are resolved 35006 visualElement.forEachValue(function (value) { 35007 var current = value.get(); 35008 if (!css_variables_conversion_isCSSVariable(current)) 35009 return; 35010 var resolved = getVariableValue(current, element); 35011 if (resolved) 35012 value.set(resolved); 35013 }); 35014 // Cycle through every target property and resolve CSS variables. Currently 35015 // we only read single-var properties like `var(--foo)`, not `calc(var(--foo) + 20px)` 35016 for (var key in target) { 35017 var current = target[key]; 35018 if (!css_variables_conversion_isCSSVariable(current)) 35019 continue; 35020 var resolved = getVariableValue(current, element); 35021 if (!resolved) 35022 continue; 35023 // Clone target if it hasn't already been 35024 target[key] = resolved; 35025 // If the user hasn't already set this key on `transitionEnd`, set it to the unresolved 35026 // CSS variable. This will ensure that after the animation the component will reflect 35027 // changes in the value of the CSS variable. 35028 if (transitionEnd) 35029 (_b = transitionEnd[key]) !== null && _b !== void 0 ? _b : (transitionEnd[key] = current); 35030 } 35031 return { target: target, transitionEnd: transitionEnd }; 35032 } 35033 35034 35035 35036 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/dom/utils/unit-conversion.mjs 35037 35038 35039 35040 35041 35042 35043 35044 var positionalKeys = new Set([ 35045 "width", 35046 "height", 35047 "top", 35048 "left", 35049 "right", 35050 "bottom", 35051 "x", 35052 "y", 35053 ]); 35054 var isPositionalKey = function (key) { return positionalKeys.has(key); }; 35055 var hasPositionalKey = function (target) { 35056 return Object.keys(target).some(isPositionalKey); 35057 }; 35058 var setAndResetVelocity = function (value, to) { 35059 // Looks odd but setting it twice doesn't render, it'll just 35060 // set both prev and current to the latest value 35061 value.set(to, false); 35062 value.set(to); 35063 }; 35064 var isNumOrPxType = function (v) { 35065 return v === number || v === px; 35066 }; 35067 var BoundingBoxDimension; 35068 (function (BoundingBoxDimension) { 35069 BoundingBoxDimension["width"] = "width"; 35070 BoundingBoxDimension["height"] = "height"; 35071 BoundingBoxDimension["left"] = "left"; 35072 BoundingBoxDimension["right"] = "right"; 35073 BoundingBoxDimension["top"] = "top"; 35074 BoundingBoxDimension["bottom"] = "bottom"; 35075 })(BoundingBoxDimension || (BoundingBoxDimension = {})); 35076 var getPosFromMatrix = function (matrix, pos) { 35077 return parseFloat(matrix.split(", ")[pos]); 35078 }; 35079 var getTranslateFromMatrix = function (pos2, pos3) { 35080 return function (_bbox, _a) { 35081 var transform = _a.transform; 35082 if (transform === "none" || !transform) 35083 return 0; 35084 var matrix3d = transform.match(/^matrix3d\((.+)\)$/); 35085 if (matrix3d) { 35086 return getPosFromMatrix(matrix3d[1], pos3); 35087 } 35088 else { 35089 var matrix = transform.match(/^matrix\((.+)\)$/); 35090 if (matrix) { 35091 return getPosFromMatrix(matrix[1], pos2); 35092 } 35093 else { 35094 return 0; 35095 } 35096 } 35097 }; 35098 }; 35099 var transformKeys = new Set(["x", "y", "z"]); 35100 var nonTranslationalTransformKeys = transformProps.filter(function (key) { return !transformKeys.has(key); }); 35101 function removeNonTranslationalTransform(visualElement) { 35102 var removedTransforms = []; 35103 nonTranslationalTransformKeys.forEach(function (key) { 35104 var value = visualElement.getValue(key); 35105 if (value !== undefined) { 35106 removedTransforms.push([key, value.get()]); 35107 value.set(key.startsWith("scale") ? 1 : 0); 35108 } 35109 }); 35110 // Apply changes to element before measurement 35111 if (removedTransforms.length) 35112 visualElement.syncRender(); 35113 return removedTransforms; 35114 } 35115 var positionalValues = { 35116 // Dimensions 35117 width: function (_a, _b) { 35118 var x = _a.x; 35119 var _c = _b.paddingLeft, paddingLeft = _c === void 0 ? "0" : _c, _d = _b.paddingRight, paddingRight = _d === void 0 ? "0" : _d; 35120 return x.max - x.min - parseFloat(paddingLeft) - parseFloat(paddingRight); 35121 }, 35122 height: function (_a, _b) { 35123 var y = _a.y; 35124 var _c = _b.paddingTop, paddingTop = _c === void 0 ? "0" : _c, _d = _b.paddingBottom, paddingBottom = _d === void 0 ? "0" : _d; 35125 return y.max - y.min - parseFloat(paddingTop) - parseFloat(paddingBottom); 35126 }, 35127 top: function (_bbox, _a) { 35128 var top = _a.top; 35129 return parseFloat(top); 35130 }, 35131 left: function (_bbox, _a) { 35132 var left = _a.left; 35133 return parseFloat(left); 35134 }, 35135 bottom: function (_a, _b) { 35136 var y = _a.y; 35137 var top = _b.top; 35138 return parseFloat(top) + (y.max - y.min); 35139 }, 35140 right: function (_a, _b) { 35141 var x = _a.x; 35142 var left = _b.left; 35143 return parseFloat(left) + (x.max - x.min); 35144 }, 35145 // Transform 35146 x: getTranslateFromMatrix(4, 13), 35147 y: getTranslateFromMatrix(5, 14), 35148 }; 35149 var convertChangedValueTypes = function (target, visualElement, changedKeys) { 35150 var originBbox = visualElement.measureViewportBox(); 35151 var element = visualElement.getInstance(); 35152 var elementComputedStyle = getComputedStyle(element); 35153 var display = elementComputedStyle.display; 35154 var origin = {}; 35155 // If the element is currently set to display: "none", make it visible before 35156 // measuring the target bounding box 35157 if (display === "none") { 35158 visualElement.setStaticValue("display", target.display || "block"); 35159 } 35160 /** 35161 * Record origins before we render and update styles 35162 */ 35163 changedKeys.forEach(function (key) { 35164 origin[key] = positionalValues[key](originBbox, elementComputedStyle); 35165 }); 35166 // Apply the latest values (as set in checkAndConvertChangedValueTypes) 35167 visualElement.syncRender(); 35168 var targetBbox = visualElement.measureViewportBox(); 35169 changedKeys.forEach(function (key) { 35170 // Restore styles to their **calculated computed style**, not their actual 35171 // originally set style. This allows us to animate between equivalent pixel units. 35172 var value = visualElement.getValue(key); 35173 setAndResetVelocity(value, origin[key]); 35174 target[key] = positionalValues[key](targetBbox, elementComputedStyle); 35175 }); 35176 return target; 35177 }; 35178 var checkAndConvertChangedValueTypes = function (visualElement, target, origin, transitionEnd) { 35179 if (origin === void 0) { origin = {}; } 35180 if (transitionEnd === void 0) { transitionEnd = {}; } 35181 target = __assign({}, target); 35182 transitionEnd = __assign({}, transitionEnd); 35183 var targetPositionalKeys = Object.keys(target).filter(isPositionalKey); 35184 // We want to remove any transform values that could affect the element's bounding box before 35185 // it's measured. We'll reapply these later. 35186 var removedTransformValues = []; 35187 var hasAttemptedToRemoveTransformValues = false; 35188 var changedValueTypeKeys = []; 35189 targetPositionalKeys.forEach(function (key) { 35190 var value = visualElement.getValue(key); 35191 if (!visualElement.hasValue(key)) 35192 return; 35193 var from = origin[key]; 35194 var fromType = findDimensionValueType(from); 35195 var to = target[key]; 35196 var toType; 35197 // TODO: The current implementation of this basically throws an error 35198 // if you try and do value conversion via keyframes. There's probably 35199 // a way of doing this but the performance implications would need greater scrutiny, 35200 // as it'd be doing multiple resize-remeasure operations. 35201 if (isKeyframesTarget(to)) { 35202 var numKeyframes = to.length; 35203 var fromIndex = to[0] === null ? 1 : 0; 35204 from = to[fromIndex]; 35205 fromType = findDimensionValueType(from); 35206 for (var i = fromIndex; i < numKeyframes; i++) { 35207 if (!toType) { 35208 toType = findDimensionValueType(to[i]); 35209 invariant(toType === fromType || 35210 (isNumOrPxType(fromType) && isNumOrPxType(toType)), "Keyframes must be of the same dimension as the current value"); 35211 } 35212 else { 35213 invariant(findDimensionValueType(to[i]) === toType, "All keyframes must be of the same type"); 35214 } 35215 } 35216 } 35217 else { 35218 toType = findDimensionValueType(to); 35219 } 35220 if (fromType !== toType) { 35221 // If they're both just number or px, convert them both to numbers rather than 35222 // relying on resize/remeasure to convert (which is wasteful in this situation) 35223 if (isNumOrPxType(fromType) && isNumOrPxType(toType)) { 35224 var current = value.get(); 35225 if (typeof current === "string") { 35226 value.set(parseFloat(current)); 35227 } 35228 if (typeof to === "string") { 35229 target[key] = parseFloat(to); 35230 } 35231 else if (Array.isArray(to) && toType === px) { 35232 target[key] = to.map(parseFloat); 35233 } 35234 } 35235 else if ((fromType === null || fromType === void 0 ? void 0 : fromType.transform) && 35236 (toType === null || toType === void 0 ? void 0 : toType.transform) && 35237 (from === 0 || to === 0)) { 35238 // If one or the other value is 0, it's safe to coerce it to the 35239 // type of the other without measurement 35240 if (from === 0) { 35241 value.set(toType.transform(from)); 35242 } 35243 else { 35244 target[key] = fromType.transform(to); 35245 } 35246 } 35247 else { 35248 // If we're going to do value conversion via DOM measurements, we first 35249 // need to remove non-positional transform values that could affect the bbox measurements. 35250 if (!hasAttemptedToRemoveTransformValues) { 35251 removedTransformValues = 35252 removeNonTranslationalTransform(visualElement); 35253 hasAttemptedToRemoveTransformValues = true; 35254 } 35255 changedValueTypeKeys.push(key); 35256 transitionEnd[key] = 35257 transitionEnd[key] !== undefined 35258 ? transitionEnd[key] 35259 : target[key]; 35260 setAndResetVelocity(value, to); 35261 } 35262 } 35263 }); 35264 if (changedValueTypeKeys.length) { 35265 var convertedTarget = convertChangedValueTypes(target, visualElement, changedValueTypeKeys); 35266 // If we removed transform values, reapply them before the next render 35267 if (removedTransformValues.length) { 35268 removedTransformValues.forEach(function (_a) { 35269 var _b = tslib_es6_read(_a, 2), key = _b[0], value = _b[1]; 35270 visualElement.getValue(key).set(value); 35271 }); 35272 } 35273 // Reapply original values 35274 visualElement.syncRender(); 35275 return { target: convertedTarget, transitionEnd: transitionEnd }; 35276 } 35277 else { 35278 return { target: target, transitionEnd: transitionEnd }; 35279 } 35280 }; 35281 /** 35282 * Convert value types for x/y/width/height/top/left/bottom/right 35283 * 35284 * Allows animation between `'auto'` -> `'100%'` or `0` -> `'calc(50% - 10vw)'` 35285 * 35286 * @internal 35287 */ 35288 function unitConversion(visualElement, target, origin, transitionEnd) { 35289 return hasPositionalKey(target) 35290 ? checkAndConvertChangedValueTypes(visualElement, target, origin, transitionEnd) 35291 : { target: target, transitionEnd: transitionEnd }; 35292 } 35293 35294 35295 35296 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/dom/utils/parse-dom-variant.mjs 35297 35298 35299 35300 /** 35301 * Parse a DOM variant to make it animatable. This involves resolving CSS variables 35302 * and ensuring animations like "20%" => "calc(50vw)" are performed in pixels. 35303 */ 35304 var parseDomVariant = function (visualElement, target, origin, transitionEnd) { 35305 var resolved = resolveCSSVariables(visualElement, target, transitionEnd); 35306 target = resolved.target; 35307 transitionEnd = resolved.transitionEnd; 35308 return unitConversion(visualElement, target, origin, transitionEnd); 35309 }; 35310 35311 35312 35313 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/html/visual-element.mjs 35314 35315 35316 35317 35318 35319 35320 35321 35322 35323 35324 35325 35326 function visual_element_getComputedStyle(element) { 35327 return window.getComputedStyle(element); 35328 } 35329 var htmlConfig = { 35330 treeType: "dom", 35331 readValueFromInstance: function (domElement, key) { 35332 if (isTransformProp(key)) { 35333 var defaultType = getDefaultValueType(key); 35334 return defaultType ? defaultType.default || 0 : 0; 35335 } 35336 else { 35337 var computedStyle = visual_element_getComputedStyle(domElement); 35338 return ((isCSSVariable(key) 35339 ? computedStyle.getPropertyValue(key) 35340 : computedStyle[key]) || 0); 35341 } 35342 }, 35343 sortNodePosition: function (a, b) { 35344 /** 35345 * compareDocumentPosition returns a bitmask, by using the bitwise & 35346 * we're returning true if 2 in that bitmask is set to true. 2 is set 35347 * to true if b preceeds a. 35348 */ 35349 return a.compareDocumentPosition(b) & 2 ? 1 : -1; 35350 }, 35351 getBaseTarget: function (props, key) { 35352 var _a; 35353 return (_a = props.style) === null || _a === void 0 ? void 0 : _a[key]; 35354 }, 35355 measureViewportBox: function (element, _a) { 35356 var transformPagePoint = _a.transformPagePoint; 35357 return measureViewportBox(element, transformPagePoint); 35358 }, 35359 /** 35360 * Reset the transform on the current Element. This is called as part 35361 * of a batched process across the entire layout tree. To remove this write 35362 * cycle it'd be interesting to see if it's possible to "undo" all the current 35363 * layout transforms up the tree in the same way this.getBoundingBoxWithoutTransforms 35364 * works 35365 */ 35366 resetTransform: function (element, domElement, props) { 35367 var transformTemplate = props.transformTemplate; 35368 domElement.style.transform = transformTemplate 35369 ? transformTemplate({}, "") 35370 : "none"; 35371 // Ensure that whatever happens next, we restore our transform on the next frame 35372 element.scheduleRender(); 35373 }, 35374 restoreTransform: function (instance, mutableState) { 35375 instance.style.transform = mutableState.style.transform; 35376 }, 35377 removeValueFromRenderState: function (key, _a) { 35378 var vars = _a.vars, style = _a.style; 35379 delete vars[key]; 35380 delete style[key]; 35381 }, 35382 /** 35383 * Ensure that HTML and Framer-specific value types like `px`->`%` and `Color` 35384 * can be animated by Motion. 35385 */ 35386 makeTargetAnimatable: function (element, _a, _b, isMounted) { 35387 var transformValues = _b.transformValues; 35388 if (isMounted === void 0) { isMounted = true; } 35389 var transition = _a.transition, transitionEnd = _a.transitionEnd, target = __rest(_a, ["transition", "transitionEnd"]); 35390 var origin = getOrigin(target, transition || {}, element); 35391 /** 35392 * If Framer has provided a function to convert `Color` etc value types, convert them 35393 */ 35394 if (transformValues) { 35395 if (transitionEnd) 35396 transitionEnd = transformValues(transitionEnd); 35397 if (target) 35398 target = transformValues(target); 35399 if (origin) 35400 origin = transformValues(origin); 35401 } 35402 if (isMounted) { 35403 checkTargetForNewValues(element, target, origin); 35404 var parsed = parseDomVariant(element, target, origin, transitionEnd); 35405 transitionEnd = parsed.transitionEnd; 35406 target = parsed.target; 35407 } 35408 return __assign({ transition: transition, transitionEnd: transitionEnd }, target); 35409 }, 35410 scrapeMotionValuesFromProps: scrapeMotionValuesFromProps, 35411 build: function (element, renderState, latestValues, options, props) { 35412 if (element.isVisible !== undefined) { 35413 renderState.style.visibility = element.isVisible 35414 ? "visible" 35415 : "hidden"; 35416 } 35417 buildHTMLStyles(renderState, latestValues, options, props.transformTemplate); 35418 }, 35419 render: renderHTML, 35420 }; 35421 var htmlVisualElement = visualElement(htmlConfig); 35422 35423 35424 35425 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/svg/visual-element.mjs 35426 35427 35428 35429 35430 35431 35432 35433 35434 35435 35436 35437 var svgVisualElement = visualElement(__assign(__assign({}, htmlConfig), { getBaseTarget: function (props, key) { 35438 return props[key]; 35439 }, readValueFromInstance: function (domElement, key) { 35440 var _a; 35441 if (isTransformProp(key)) { 35442 return ((_a = getDefaultValueType(key)) === null || _a === void 0 ? void 0 : _a.default) || 0; 35443 } 35444 key = !camelCaseAttributes.has(key) ? camelToDash(key) : key; 35445 return domElement.getAttribute(key); 35446 }, scrapeMotionValuesFromProps: scrape_motion_values_scrapeMotionValuesFromProps, build: function (_element, renderState, latestValues, options, props) { 35447 buildSVGAttrs(renderState, latestValues, options, props.transformTemplate); 35448 }, render: renderSVG })); 35449 35450 35451 35452 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/dom/create-visual-element.mjs 35453 35454 35455 35456 35457 var create_visual_element_createDomVisualElement = function (Component, options) { 35458 return isSVGComponent(Component) 35459 ? svgVisualElement(options, { enableHardwareAcceleration: false }) 35460 : htmlVisualElement(options, { enableHardwareAcceleration: true }); 35461 }; 35462 35463 35464 35465 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/projection/styles/scale-border-radius.mjs 35466 35467 35468 function pixelsToPercent(pixels, axis) { 35469 if (axis.max === axis.min) 35470 return 0; 35471 return (pixels / (axis.max - axis.min)) * 100; 35472 } 35473 /** 35474 * We always correct borderRadius as a percentage rather than pixels to reduce paints. 35475 * For example, if you are projecting a box that is 100px wide with a 10px borderRadius 35476 * into a box that is 200px wide with a 20px borderRadius, that is actually a 10% 35477 * borderRadius in both states. If we animate between the two in pixels that will trigger 35478 * a paint each time. If we animate between the two in percentage we'll avoid a paint. 35479 */ 35480 var correctBorderRadius = { 35481 correct: function (latest, node) { 35482 if (!node.target) 35483 return latest; 35484 /** 35485 * If latest is a string, if it's a percentage we can return immediately as it's 35486 * going to be stretched appropriately. Otherwise, if it's a pixel, convert it to a number. 35487 */ 35488 if (typeof latest === "string") { 35489 if (px.test(latest)) { 35490 latest = parseFloat(latest); 35491 } 35492 else { 35493 return latest; 35494 } 35495 } 35496 /** 35497 * If latest is a number, it's a pixel value. We use the current viewportBox to calculate that 35498 * pixel value as a percentage of each axis 35499 */ 35500 var x = pixelsToPercent(latest, node.target.x); 35501 var y = pixelsToPercent(latest, node.target.y); 35502 return "".concat(x, "% ").concat(y, "%"); 35503 }, 35504 }; 35505 35506 35507 35508 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/projection/styles/scale-box-shadow.mjs 35509 35510 35511 35512 35513 var varToken = "_$css"; 35514 var correctBoxShadow = { 35515 correct: function (latest, _a) { 35516 var treeScale = _a.treeScale, projectionDelta = _a.projectionDelta; 35517 var original = latest; 35518 /** 35519 * We need to first strip and store CSS variables from the string. 35520 */ 35521 var containsCSSVariables = latest.includes("var("); 35522 var cssVariables = []; 35523 if (containsCSSVariables) { 35524 latest = latest.replace(cssVariableRegex, function (match) { 35525 cssVariables.push(match); 35526 return varToken; 35527 }); 35528 } 35529 var shadow = complex.parse(latest); 35530 // TODO: Doesn't support multiple shadows 35531 if (shadow.length > 5) 35532 return original; 35533 var template = complex.createTransformer(latest); 35534 var offset = typeof shadow[0] !== "number" ? 1 : 0; 35535 // Calculate the overall context scale 35536 var xScale = projectionDelta.x.scale * treeScale.x; 35537 var yScale = projectionDelta.y.scale * treeScale.y; 35538 shadow[0 + offset] /= xScale; 35539 shadow[1 + offset] /= yScale; 35540 /** 35541 * Ideally we'd correct x and y scales individually, but because blur and 35542 * spread apply to both we have to take a scale average and apply that instead. 35543 * We could potentially improve the outcome of this by incorporating the ratio between 35544 * the two scales. 35545 */ 35546 var averageScale = mix(xScale, yScale, 0.5); 35547 // Blur 35548 if (typeof shadow[2 + offset] === "number") 35549 shadow[2 + offset] /= averageScale; 35550 // Spread 35551 if (typeof shadow[3 + offset] === "number") 35552 shadow[3 + offset] /= averageScale; 35553 var output = template(shadow); 35554 if (containsCSSVariables) { 35555 var i_1 = 0; 35556 output = output.replace(varToken, function () { 35557 var cssVariable = cssVariables[i_1]; 35558 i_1++; 35559 return cssVariable; 35560 }); 35561 } 35562 return output; 35563 }, 35564 }; 35565 35566 35567 35568 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/motion/features/layout/MeasureLayout.mjs 35569 35570 35571 35572 35573 35574 35575 35576 35577 35578 35579 35580 var MeasureLayoutWithContext = /** @class */ (function (_super) { 35581 __extends(MeasureLayoutWithContext, _super); 35582 function MeasureLayoutWithContext() { 35583 return _super !== null && _super.apply(this, arguments) || this; 35584 } 35585 /** 35586 * This only mounts projection nodes for components that 35587 * need measuring, we might want to do it for all components 35588 * in order to incorporate transforms 35589 */ 35590 MeasureLayoutWithContext.prototype.componentDidMount = function () { 35591 var _this = this; 35592 var _a = this.props, visualElement = _a.visualElement, layoutGroup = _a.layoutGroup, switchLayoutGroup = _a.switchLayoutGroup, layoutId = _a.layoutId; 35593 var projection = visualElement.projection; 35594 addScaleCorrector(defaultScaleCorrectors); 35595 if (projection) { 35596 if (layoutGroup === null || layoutGroup === void 0 ? void 0 : layoutGroup.group) 35597 layoutGroup.group.add(projection); 35598 if ((switchLayoutGroup === null || switchLayoutGroup === void 0 ? void 0 : switchLayoutGroup.register) && layoutId) { 35599 switchLayoutGroup.register(projection); 35600 } 35601 projection.root.didUpdate(); 35602 projection.addEventListener("animationComplete", function () { 35603 _this.safeToRemove(); 35604 }); 35605 projection.setOptions(__assign(__assign({}, projection.options), { onExitComplete: function () { return _this.safeToRemove(); } })); 35606 } 35607 globalProjectionState.hasEverUpdated = true; 35608 }; 35609 MeasureLayoutWithContext.prototype.getSnapshotBeforeUpdate = function (prevProps) { 35610 var _this = this; 35611 var _a = this.props, layoutDependency = _a.layoutDependency, visualElement = _a.visualElement, drag = _a.drag, isPresent = _a.isPresent; 35612 var projection = visualElement.projection; 35613 if (!projection) 35614 return null; 35615 /** 35616 * TODO: We use this data in relegate to determine whether to 35617 * promote a previous element. There's no guarantee its presence data 35618 * will have updated by this point - if a bug like this arises it will 35619 * have to be that we markForRelegation and then find a new lead some other way, 35620 * perhaps in didUpdate 35621 */ 35622 projection.isPresent = isPresent; 35623 if (drag || 35624 prevProps.layoutDependency !== layoutDependency || 35625 layoutDependency === undefined) { 35626 projection.willUpdate(); 35627 } 35628 else { 35629 this.safeToRemove(); 35630 } 35631 if (prevProps.isPresent !== isPresent) { 35632 if (isPresent) { 35633 projection.promote(); 35634 } 35635 else if (!projection.relegate()) { 35636 /** 35637 * If there's another stack member taking over from this one, 35638 * it's in charge of the exit animation and therefore should 35639 * be in charge of the safe to remove. Otherwise we call it here. 35640 */ 35641 es.postRender(function () { 35642 var _a; 35643 if (!((_a = projection.getStack()) === null || _a === void 0 ? void 0 : _a.members.length)) { 35644 _this.safeToRemove(); 35645 } 35646 }); 35647 } 35648 } 35649 return null; 35650 }; 35651 MeasureLayoutWithContext.prototype.componentDidUpdate = function () { 35652 var projection = this.props.visualElement.projection; 35653 if (projection) { 35654 projection.root.didUpdate(); 35655 if (!projection.currentAnimation && projection.isLead()) { 35656 this.safeToRemove(); 35657 } 35658 } 35659 }; 35660 MeasureLayoutWithContext.prototype.componentWillUnmount = function () { 35661 var _a = this.props, visualElement = _a.visualElement, layoutGroup = _a.layoutGroup, promoteContext = _a.switchLayoutGroup; 35662 var projection = visualElement.projection; 35663 if (projection) { 35664 projection.scheduleCheckAfterUnmount(); 35665 if (layoutGroup === null || layoutGroup === void 0 ? void 0 : layoutGroup.group) 35666 layoutGroup.group.remove(projection); 35667 if (promoteContext === null || promoteContext === void 0 ? void 0 : promoteContext.deregister) 35668 promoteContext.deregister(projection); 35669 } 35670 }; 35671 MeasureLayoutWithContext.prototype.safeToRemove = function () { 35672 var safeToRemove = this.props.safeToRemove; 35673 safeToRemove === null || safeToRemove === void 0 ? void 0 : safeToRemove(); 35674 }; 35675 MeasureLayoutWithContext.prototype.render = function () { 35676 return null; 35677 }; 35678 return MeasureLayoutWithContext; 35679 }(external_React_.Component)); 35680 function MeasureLayout(props) { 35681 var _a = tslib_es6_read(usePresence(), 2), isPresent = _a[0], safeToRemove = _a[1]; 35682 var layoutGroup = (0,external_React_.useContext)(LayoutGroupContext); 35683 return (external_React_.createElement(MeasureLayoutWithContext, __assign({}, props, { layoutGroup: layoutGroup, switchLayoutGroup: (0,external_React_.useContext)(SwitchLayoutGroupContext), isPresent: isPresent, safeToRemove: safeToRemove }))); 35684 } 35685 var defaultScaleCorrectors = { 35686 borderRadius: __assign(__assign({}, correctBorderRadius), { applyTo: [ 35687 "borderTopLeftRadius", 35688 "borderTopRightRadius", 35689 "borderBottomLeftRadius", 35690 "borderBottomRightRadius", 35691 ] }), 35692 borderTopLeftRadius: correctBorderRadius, 35693 borderTopRightRadius: correctBorderRadius, 35694 borderBottomLeftRadius: correctBorderRadius, 35695 borderBottomRightRadius: correctBorderRadius, 35696 boxShadow: correctBoxShadow, 35697 }; 35698 35699 35700 35701 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/motion/features/layout/index.mjs 35702 35703 35704 var layoutFeatures = { 35705 measureLayout: MeasureLayout, 35706 }; 35707 35708 35709 35710 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/projection/node/DocumentProjectionNode.mjs 35711 35712 35713 var DocumentProjectionNode = createProjectionNode({ 35714 attachResizeListener: function (ref, notify) { 35715 ref.addEventListener("resize", notify, { passive: true }); 35716 return function () { return ref.removeEventListener("resize", notify); }; 35717 }, 35718 measureScroll: function () { return ({ 35719 x: document.documentElement.scrollLeft || document.body.scrollLeft, 35720 y: document.documentElement.scrollTop || document.body.scrollTop, 35721 }); }, 35722 }); 35723 35724 35725 35726 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/projection/node/HTMLProjectionNode.mjs 35727 35728 35729 35730 var rootProjectionNode = { 35731 current: undefined, 35732 }; 35733 var HTMLProjectionNode_HTMLProjectionNode = createProjectionNode({ 35734 measureScroll: function (instance) { return ({ 35735 x: instance.scrollLeft, 35736 y: instance.scrollTop, 35737 }); }, 35738 defaultParent: function () { 35739 if (!rootProjectionNode.current) { 35740 var documentNode = new DocumentProjectionNode(0, {}); 35741 documentNode.mount(window); 35742 documentNode.setOptions({ layoutScroll: true }); 35743 rootProjectionNode.current = documentNode; 35744 } 35745 return rootProjectionNode.current; 35746 }, 35747 resetTransform: function (instance, value) { 35748 instance.style.transform = value !== null && value !== void 0 ? value : "none"; 35749 }, 35750 }); 35751 35752 35753 35754 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/render/dom/motion.mjs 35755 35756 35757 35758 35759 35760 35761 35762 35763 35764 35765 35766 var featureBundle = __assign(__assign(__assign(__assign({}, animations), gestureAnimations), drag), layoutFeatures); 35767 /** 35768 * HTML & SVG components, optimised for use with gestures and animation. These can be used as 35769 * drop-in replacements for any HTML & SVG component, all CSS & SVG properties are supported. 35770 * 35771 * @public 35772 */ 35773 var motion = /*@__PURE__*/ createMotionProxy(function (Component, config) { 35774 return create_config_createDomMotionConfig(Component, config, featureBundle, create_visual_element_createDomVisualElement, HTMLProjectionNode_HTMLProjectionNode); 35775 }); 35776 /** 35777 * Create a DOM `motion` component with the provided string. This is primarily intended 35778 * as a full alternative to `motion` for consumers who have to support environments that don't 35779 * support `Proxy`. 35780 * 35781 * ```javascript 35782 * import { createDomMotionComponent } from "framer-motion" 35783 * 35784 * const motion = { 35785 * div: createDomMotionComponent('div') 35786 * } 35787 * ``` 35788 * 35789 * @public 35790 */ 35791 function createDomMotionComponent(key) { 35792 return createMotionComponent(createDomMotionConfig(key, { forwardMotionProps: false }, featureBundle, createDomVisualElement, HTMLProjectionNode)); 35793 } 35794 35795 35796 35797 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/flex/context.js 35798 /** 35799 * WordPress dependencies 35800 */ 35801 35802 const FlexContext = (0,external_wp_element_namespaceObject.createContext)({ 35803 flexItemDisplay: undefined 35804 }); 35805 const useFlexContext = () => (0,external_wp_element_namespaceObject.useContext)(FlexContext); 35806 35807 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/flex/styles.js 35808 function styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } 35809 35810 /** 35811 * External dependencies 35812 */ 35813 35814 const Flex = true ? { 35815 name: "zjik7", 35816 styles: "display:flex" 35817 } : 0; 35818 const Item = true ? { 35819 name: "qgaee5", 35820 styles: "display:block;max-height:100%;max-width:100%;min-height:0;min-width:0" 35821 } : 0; 35822 const block = true ? { 35823 name: "82a6rk", 35824 styles: "flex:1" 35825 } : 0; 35826 /** 35827 * Workaround to optimize DOM rendering. 35828 * We'll enhance alignment with naive parent flex assumptions. 35829 * 35830 * Trade-off: 35831 * Far less DOM less. However, UI rendering is not as reliable. 35832 */ 35833 35834 /** 35835 * Improves stability of width/height rendering. 35836 * https://github.com/ItsJonQ/g2/pull/149 35837 */ 35838 35839 const ItemsColumn = true ? { 35840 name: "13nosa1", 35841 styles: ">*{min-height:0;}" 35842 } : 0; 35843 const ItemsRow = true ? { 35844 name: "1pwxzk4", 35845 styles: ">*{min-width:0;}" 35846 } : 0; 35847 35848 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/flex/flex-item/hook.js 35849 /** 35850 * External dependencies 35851 */ 35852 35853 /** 35854 * Internal dependencies 35855 */ 35856 35857 35858 35859 35860 35861 /** 35862 * @param {import('../../ui/context').WordPressComponentProps<import('../types').FlexItemProps, 'div'>} props 35863 */ 35864 35865 function useFlexItem(props) { 35866 const { 35867 className, 35868 display: displayProp, 35869 isBlock = false, 35870 ...otherProps 35871 } = useContextSystem(props, 'FlexItem'); 35872 const sx = {}; 35873 const contextDisplay = useFlexContext().flexItemDisplay; 35874 sx.Base = /*#__PURE__*/emotion_react_browser_esm_css({ 35875 display: displayProp || contextDisplay 35876 }, true ? "" : 0, true ? "" : 0); 35877 const cx = useCx(); 35878 const classes = cx(Item, sx.Base, isBlock && block, className); 35879 return { ...otherProps, 35880 className: classes 35881 }; 35882 } 35883 35884 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/flex/flex-block/hook.js 35885 /** 35886 * Internal dependencies 35887 */ 35888 35889 35890 /** 35891 * @param {import('../../ui/context').WordPressComponentProps<import('../types').FlexBlockProps, 'div'>} props 35892 */ 35893 35894 function useFlexBlock(props) { 35895 const otherProps = useContextSystem(props, 'FlexBlock'); 35896 const flexItemProps = useFlexItem({ 35897 isBlock: true, 35898 ...otherProps 35899 }); 35900 return flexItemProps; 35901 } 35902 35903 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/flex/flex-block/component.js 35904 35905 35906 35907 /** 35908 * Internal dependencies 35909 */ 35910 35911 35912 35913 /** 35914 * @param {import('../../ui/context').WordPressComponentProps<import('../types').FlexBlockProps, 'div'>} props 35915 * @param {import('react').ForwardedRef<any>} forwardedRef 35916 */ 35917 35918 function FlexBlock(props, forwardedRef) { 35919 const flexBlockProps = useFlexBlock(props); 35920 return (0,external_wp_element_namespaceObject.createElement)(component, extends_extends({}, flexBlockProps, { 35921 ref: forwardedRef 35922 })); 35923 } 35924 /** 35925 * `FlexBlock` is a primitive layout component that adaptively resizes content within layout containers like `Flex`. 35926 * 35927 * @example 35928 * ```jsx 35929 * <Flex> 35930 * <FlexBlock>...</FlexBlock> 35931 * </Flex> 35932 * ``` 35933 */ 35934 35935 35936 const ConnectedFlexBlock = contextConnect(FlexBlock, 'FlexBlock'); 35937 /* harmony default export */ var flex_block_component = (ConnectedFlexBlock); 35938 35939 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/flex/flex-item/component.js 35940 35941 35942 35943 /** 35944 * Internal dependencies 35945 */ 35946 35947 35948 35949 /** 35950 * @param {import('../../ui/context').WordPressComponentProps<import('../types').FlexItemProps, 'div'>} props 35951 * @param {import('react').ForwardedRef<any>} forwardedRef 35952 */ 35953 35954 function FlexItem(props, forwardedRef) { 35955 const flexItemProps = useFlexItem(props); 35956 return (0,external_wp_element_namespaceObject.createElement)(component, extends_extends({}, flexItemProps, { 35957 ref: forwardedRef 35958 })); 35959 } 35960 /** 35961 * `FlexItem` is a primitive layout component that aligns content within layout containers like `Flex`. 35962 * 35963 * @example 35964 * ```jsx 35965 * <Flex> 35966 * <FlexItem>...</FlexItem> 35967 * </Flex> 35968 * ``` 35969 */ 35970 35971 35972 const ConnectedFlexItem = contextConnect(FlexItem, 'FlexItem'); 35973 /* harmony default export */ var flex_item_component = (ConnectedFlexItem); 35974 35975 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/ui/utils/use-responsive-value.js 35976 /** 35977 * WordPress dependencies 35978 */ 35979 35980 const breakpoints = ['40em', '52em', '64em']; 35981 const useBreakpointIndex = function () { 35982 let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; 35983 const { 35984 defaultIndex = 0 35985 } = options; 35986 35987 if (typeof defaultIndex !== 'number') { 35988 throw new TypeError(`Default breakpoint index should be a number. Got: $defaultIndex}, $typeof defaultIndex}`); 35989 } else if (defaultIndex < 0 || defaultIndex > breakpoints.length - 1) { 35990 throw new RangeError(`Default breakpoint index out of range. Theme has $breakpoints.length} breakpoints, got index $defaultIndex}`); 35991 } 35992 35993 const [value, setValue] = (0,external_wp_element_namespaceObject.useState)(defaultIndex); 35994 (0,external_wp_element_namespaceObject.useEffect)(() => { 35995 const getIndex = () => breakpoints.filter(bp => { 35996 return typeof window !== 'undefined' ? window.matchMedia(`screen and (min-width: $bp})`).matches : false; 35997 }).length; 35998 35999 const onResize = () => { 36000 const newValue = getIndex(); 36001 36002 if (value !== newValue) { 36003 setValue(newValue); 36004 } 36005 }; 36006 36007 onResize(); 36008 36009 if (typeof window !== 'undefined') { 36010 window.addEventListener('resize', onResize); 36011 } 36012 36013 return () => { 36014 if (typeof window !== 'undefined') { 36015 window.removeEventListener('resize', onResize); 36016 } 36017 }; 36018 }, [value]); 36019 return value; 36020 }; 36021 function useResponsiveValue(values) { 36022 let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; 36023 const index = useBreakpointIndex(options); // Allow calling the function with a "normal" value without having to check on the outside. 36024 36025 if (!Array.isArray(values) && typeof values !== 'function') return values; 36026 const array = values || []; 36027 /* eslint-disable jsdoc/no-undefined-types */ 36028 36029 return ( 36030 /** @type {T[]} */ 36031 array[ 36032 /* eslint-enable jsdoc/no-undefined-types */ 36033 index >= array.length ? array.length - 1 : index] 36034 ); 36035 } 36036 36037 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/ui/utils/space.js 36038 /** 36039 * A real number or something parsable as a number 36040 */ 36041 const GRID_BASE = '4px'; 36042 /** 36043 * A function that handles numbers, numeric strings, and unit values. 36044 * 36045 * When given a number or a numeric string, it will return the grid-based 36046 * value as a factor of GRID_BASE, defined above. 36047 * 36048 * When given a unit value or one of the named CSS values like `auto`, 36049 * it will simply return the value back. 36050 * 36051 * @param value A number, numeric string, or a unit value. 36052 */ 36053 36054 function space(value) { 36055 var _window$CSS, _window$CSS$supports; 36056 36057 if (typeof value === 'undefined') { 36058 return undefined; 36059 } // Handle empty strings, if it's the number 0 this still works. 36060 36061 36062 if (!value) { 36063 return '0'; 36064 } 36065 36066 const asInt = typeof value === 'number' ? value : Number(value); // Test if the input has a unit, was NaN, or was one of the named CSS values (like `auto`), in which case just use that value. 36067 36068 if (typeof window !== 'undefined' && (_window$CSS = window.CSS) !== null && _window$CSS !== void 0 && (_window$CSS$supports = _window$CSS.supports) !== null && _window$CSS$supports !== void 0 && _window$CSS$supports.call(_window$CSS, 'margin', value.toString()) || Number.isNaN(asInt)) { 36069 return value.toString(); 36070 } 36071 36072 return `calc($GRID_BASE} * $value})`; 36073 } 36074 36075 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/utils/rtl.js 36076 /** 36077 * External dependencies 36078 */ 36079 36080 36081 /** 36082 * WordPress dependencies 36083 */ 36084 36085 36086 const LOWER_LEFT_REGEXP = new RegExp(/-left/g); 36087 const LOWER_RIGHT_REGEXP = new RegExp(/-right/g); 36088 const UPPER_LEFT_REGEXP = new RegExp(/Left/g); 36089 const UPPER_RIGHT_REGEXP = new RegExp(/Right/g); 36090 /** 36091 * Flips a CSS property from left <-> right. 36092 * 36093 * @param {string} key The CSS property name. 36094 * 36095 * @return {string} The flipped CSS property name, if applicable. 36096 */ 36097 36098 function getConvertedKey(key) { 36099 if (key === 'left') { 36100 return 'right'; 36101 } 36102 36103 if (key === 'right') { 36104 return 'left'; 36105 } 36106 36107 if (LOWER_LEFT_REGEXP.test(key)) { 36108 return key.replace(LOWER_LEFT_REGEXP, '-right'); 36109 } 36110 36111 if (LOWER_RIGHT_REGEXP.test(key)) { 36112 return key.replace(LOWER_RIGHT_REGEXP, '-left'); 36113 } 36114 36115 if (UPPER_LEFT_REGEXP.test(key)) { 36116 return key.replace(UPPER_LEFT_REGEXP, 'Right'); 36117 } 36118 36119 if (UPPER_RIGHT_REGEXP.test(key)) { 36120 return key.replace(UPPER_RIGHT_REGEXP, 'Left'); 36121 } 36122 36123 return key; 36124 } 36125 /** 36126 * An incredibly basic ltr -> rtl converter for style properties 36127 * 36128 * @param {import('react').CSSProperties} ltrStyles 36129 * 36130 * @return {import('react').CSSProperties} Converted ltr -> rtl styles 36131 */ 36132 36133 36134 const convertLTRToRTL = function () { 36135 let ltrStyles = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; 36136 return (0,external_lodash_namespaceObject.mapKeys)(ltrStyles, (_value, key) => getConvertedKey(key)); 36137 }; 36138 /** 36139 * A higher-order function that create an incredibly basic ltr -> rtl style converter for CSS objects. 36140 * 36141 * @param {import('react').CSSProperties} ltrStyles Ltr styles. Converts and renders from ltr -> rtl styles, if applicable. 36142 * @param {import('react').CSSProperties} [rtlStyles] Rtl styles. Renders if provided. 36143 * 36144 * @return {() => import('@emotion/react').SerializedStyles} A function to output CSS styles for Emotion's renderer 36145 */ 36146 36147 function rtl() { 36148 let ltrStyles = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; 36149 let rtlStyles = arguments.length > 1 ? arguments[1] : undefined; 36150 return () => { 36151 if (rtlStyles) { 36152 // @ts-ignore: `css` types are wrong, it can accept an object: https://emotion.sh/docs/object-styles#with-css 36153 return (0,external_wp_i18n_namespaceObject.isRTL)() ? /*#__PURE__*/emotion_react_browser_esm_css(rtlStyles, true ? "" : 0) : /*#__PURE__*/emotion_react_browser_esm_css(ltrStyles, true ? "" : 0); 36154 } // @ts-ignore: `css` types are wrong, it can accept an object: https://emotion.sh/docs/object-styles#with-css 36155 36156 36157 return (0,external_wp_i18n_namespaceObject.isRTL)() ? /*#__PURE__*/emotion_react_browser_esm_css(convertLTRToRTL(ltrStyles), true ? "" : 0) : /*#__PURE__*/emotion_react_browser_esm_css(ltrStyles, true ? "" : 0); 36158 }; 36159 } 36160 /** 36161 * Call this in the `useMemo` dependency array to ensure that subsequent renders will 36162 * cause rtl styles to update based on the `isRTL` return value even if all other dependencies 36163 * remain the same. 36164 * 36165 * @example 36166 * const styles = useMemo( () => { 36167 * return css` 36168 * ${ rtl( { marginRight: '10px' } ) } 36169 * `; 36170 * }, [ rtl.watch() ] ); 36171 */ 36172 36173 rtl.watch = () => (0,external_wp_i18n_namespaceObject.isRTL)(); 36174 36175 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/flex/flex/hook.js 36176 /** 36177 * External dependencies 36178 */ 36179 36180 /** 36181 * WordPress dependencies 36182 */ 36183 36184 36185 36186 /** 36187 * Internal dependencies 36188 */ 36189 36190 36191 36192 36193 36194 36195 /** 36196 * 36197 * @param {import('../../ui/context').WordPressComponentProps<import('../types').FlexProps, 'div'>} props 36198 * @return {import('../../ui/context').WordPressComponentProps<import('../types').FlexProps, 'div'>} Props with the deprecated props removed. 36199 */ 36200 36201 function hook_useDeprecatedProps(_ref) { 36202 let { 36203 isReversed, 36204 ...otherProps 36205 } = _ref; 36206 36207 if (typeof isReversed !== 'undefined') { 36208 external_wp_deprecated_default()('Flex isReversed', { 36209 alternative: 'Flex direction="row-reverse" or "column-reverse"', 36210 since: '5.9' 36211 }); 36212 return { ...otherProps, 36213 direction: isReversed ? 'row-reverse' : 'row' 36214 }; 36215 } 36216 36217 return otherProps; 36218 } 36219 /** 36220 * @param {import('../../ui/context').WordPressComponentProps<import('../types').FlexProps, 'div'>} props 36221 */ 36222 36223 36224 function useFlex(props) { 36225 const { 36226 align = 'center', 36227 className, 36228 direction: directionProp = 'row', 36229 expanded = true, 36230 gap = 2, 36231 justify = 'space-between', 36232 wrap = false, 36233 ...otherProps 36234 } = useContextSystem(hook_useDeprecatedProps(props), 'Flex'); 36235 const directionAsArray = Array.isArray(directionProp) ? directionProp : [directionProp]; 36236 const direction = useResponsiveValue(directionAsArray); 36237 const isColumn = typeof direction === 'string' && !!direction.includes('column'); 36238 const isReverse = typeof direction === 'string' && direction.includes('reverse'); 36239 const cx = useCx(); 36240 const classes = (0,external_wp_element_namespaceObject.useMemo)(() => { 36241 const sx = {}; 36242 sx.Base = /*#__PURE__*/emotion_react_browser_esm_css({ 36243 alignItems: isColumn ? 'normal' : align, 36244 flexDirection: direction, 36245 flexWrap: wrap ? 'wrap' : undefined, 36246 justifyContent: justify, 36247 height: isColumn && expanded ? '100%' : undefined, 36248 width: !isColumn && expanded ? '100%' : undefined, 36249 marginBottom: wrap ? `calc($space(gap)} * -1)` : undefined 36250 }, true ? "" : 0, true ? "" : 0); 36251 /** 36252 * Workaround to optimize DOM rendering. 36253 * We'll enhance alignment with naive parent flex assumptions. 36254 * 36255 * Trade-off: 36256 * Far less DOM less. However, UI rendering is not as reliable. 36257 */ 36258 36259 sx.Items = /*#__PURE__*/emotion_react_browser_esm_css(">*+*:not( marquee ){margin-top:", isColumn ? space(gap) : undefined, ";", rtl({ 36260 marginLeft: !isColumn && !isReverse ? space(gap) : undefined, 36261 marginRight: !isColumn && isReverse ? space(gap) : undefined 36262 })(), ";}" + ( true ? "" : 0), true ? "" : 0); 36263 sx.WrapItems = /*#__PURE__*/emotion_react_browser_esm_css(">*:not( marquee ){margin-bottom:", space(gap), ";", rtl({ 36264 marginLeft: !isColumn && isReverse ? space(gap) : undefined, 36265 marginRight: !isColumn && !isReverse ? space(gap) : undefined 36266 })(), ";}>*:last-child:not( marquee ){", rtl({ 36267 marginLeft: !isColumn && isReverse ? 0 : undefined, 36268 marginRight: !isColumn && !isReverse ? 0 : undefined 36269 })(), ";}" + ( true ? "" : 0), true ? "" : 0); 36270 return cx(Flex, sx.Base, wrap ? sx.WrapItems : sx.Items, isColumn ? ItemsColumn : ItemsRow, className); 36271 }, [align, className, cx, direction, expanded, gap, isColumn, isReverse, justify, wrap, rtl.watch()]); 36272 return { ...otherProps, 36273 className: classes, 36274 isColumn 36275 }; 36276 } 36277 36278 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/flex/flex/component.js 36279 36280 36281 36282 /** 36283 * Internal dependencies 36284 */ 36285 36286 36287 36288 36289 /** 36290 * @param {import('../../ui/context').WordPressComponentProps<import('../types').FlexProps, 'div'>} props 36291 * @param {import('react').ForwardedRef<any>} forwardedRef 36292 */ 36293 36294 function component_Flex(props, forwardedRef) { 36295 const { 36296 children, 36297 isColumn, 36298 ...otherProps 36299 } = useFlex(props); 36300 return (0,external_wp_element_namespaceObject.createElement)(FlexContext.Provider, { 36301 value: { 36302 flexItemDisplay: isColumn ? 'block' : undefined 36303 } 36304 }, (0,external_wp_element_namespaceObject.createElement)(component, extends_extends({}, otherProps, { 36305 ref: forwardedRef 36306 }), children)); 36307 } 36308 /** 36309 * `Flex` is a primitive layout component that adaptively aligns child content 36310 * horizontally or vertically. `Flex` powers components like `HStack` and 36311 * `VStack`. 36312 * 36313 * `Flex` is used with any of it's two sub-components, `FlexItem` and `FlexBlock`. 36314 * 36315 * @example 36316 * ```jsx 36317 * import { 36318 * __experimentalFlex as Flex, 36319 * __experimentalFlexBlock as FlexBlock, 36320 * __experimentalFlexItem as FlexItem, 36321 * __experimentalText as Text 36322 * } from `@wordpress/components`; 36323 * 36324 * function Example() { 36325 * return ( 36326 * <Flex> 36327 * <FlexItem> 36328 * <Text>Code</Text> 36329 * </FlexItem> 36330 * <FlexBlock> 36331 * <Text>Poetry</Text> 36332 * </FlexBlock> 36333 * </Flex> 36334 * ); 36335 * } 36336 * ``` 36337 * 36338 */ 36339 36340 36341 const ConnectedFlex = contextConnect(component_Flex, 'Flex'); 36342 /* harmony default export */ var flex_component = (ConnectedFlex); 36343 36344 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/truncate/styles.js 36345 function truncate_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } 36346 36347 /** 36348 * External dependencies 36349 */ 36350 36351 const Truncate = true ? { 36352 name: "hdknak", 36353 styles: "display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" 36354 } : 0; 36355 36356 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/truncate/utils.js 36357 /** 36358 * External dependencies 36359 */ 36360 36361 const TRUNCATE_ELLIPSIS = '…'; 36362 const TRUNCATE_TYPE = { 36363 auto: 'auto', 36364 head: 'head', 36365 middle: 'middle', 36366 tail: 'tail', 36367 none: 'none' 36368 }; 36369 const TRUNCATE_DEFAULT_PROPS = { 36370 ellipsis: TRUNCATE_ELLIPSIS, 36371 ellipsizeMode: TRUNCATE_TYPE.auto, 36372 limit: 0, 36373 numberOfLines: 0 36374 }; // Source 36375 // https://github.com/kahwee/truncate-middle 36376 36377 /** 36378 * @param {string} word 36379 * @param {number} headLength 36380 * @param {number} tailLength 36381 * @param {string} ellipsis 36382 */ 36383 36384 function truncateMiddle(word, headLength, tailLength, ellipsis) { 36385 if (typeof word !== 'string') { 36386 return ''; 36387 } 36388 36389 const wordLength = word.length; // Setting default values 36390 // eslint-disable-next-line no-bitwise 36391 36392 const frontLength = ~~headLength; // Will cast to integer 36393 // eslint-disable-next-line no-bitwise 36394 36395 const backLength = ~~tailLength; 36396 /* istanbul ignore next */ 36397 36398 const truncateStr = !(0,external_lodash_namespaceObject.isNil)(ellipsis) ? ellipsis : TRUNCATE_ELLIPSIS; 36399 36400 if (frontLength === 0 && backLength === 0 || frontLength >= wordLength || backLength >= wordLength || frontLength + backLength >= wordLength) { 36401 return word; 36402 } else if (backLength === 0) { 36403 return word.slice(0, frontLength) + truncateStr; 36404 } 36405 36406 return word.slice(0, frontLength) + truncateStr + word.slice(wordLength - backLength); 36407 } 36408 /** 36409 * 36410 * @param {string} words 36411 * @param {typeof TRUNCATE_DEFAULT_PROPS} props 36412 */ 36413 36414 function truncateContent() { 36415 let words = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : ''; 36416 let props = arguments.length > 1 ? arguments[1] : undefined; 36417 const mergedProps = { ...TRUNCATE_DEFAULT_PROPS, 36418 ...props 36419 }; 36420 const { 36421 ellipsis, 36422 ellipsizeMode, 36423 limit 36424 } = mergedProps; 36425 36426 if (ellipsizeMode === TRUNCATE_TYPE.none) { 36427 return words; 36428 } 36429 36430 let truncateHead; 36431 let truncateTail; 36432 36433 switch (ellipsizeMode) { 36434 case TRUNCATE_TYPE.head: 36435 truncateHead = 0; 36436 truncateTail = limit; 36437 break; 36438 36439 case TRUNCATE_TYPE.middle: 36440 truncateHead = Math.floor(limit / 2); 36441 truncateTail = Math.floor(limit / 2); 36442 break; 36443 36444 default: 36445 truncateHead = limit; 36446 truncateTail = 0; 36447 } 36448 36449 const truncatedContent = ellipsizeMode !== TRUNCATE_TYPE.auto ? truncateMiddle(words, truncateHead, truncateTail, ellipsis) : words; 36450 return truncatedContent; 36451 } 36452 36453 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/truncate/hook.js 36454 /** 36455 * External dependencies 36456 */ 36457 36458 /** 36459 * WordPress dependencies 36460 */ 36461 36462 36463 /** 36464 * Internal dependencies 36465 */ 36466 36467 36468 36469 36470 36471 /** 36472 * @param {import('../ui/context').WordPressComponentProps<import('./types').Props, 'span'>} props 36473 */ 36474 36475 function useTruncate(props) { 36476 const { 36477 className, 36478 children, 36479 ellipsis = TRUNCATE_ELLIPSIS, 36480 ellipsizeMode = TRUNCATE_TYPE.auto, 36481 limit = 0, 36482 numberOfLines = 0, 36483 ...otherProps 36484 } = useContextSystem(props, 'Truncate'); 36485 const cx = useCx(); 36486 const truncatedContent = truncateContent(typeof children === 'string' ? 36487 /** @type {string} */ 36488 children : '', { 36489 ellipsis, 36490 ellipsizeMode, 36491 limit, 36492 numberOfLines 36493 }); 36494 const shouldTruncate = ellipsizeMode === TRUNCATE_TYPE.auto; 36495 const classes = (0,external_wp_element_namespaceObject.useMemo)(() => { 36496 const sx = {}; 36497 sx.numberOfLines = /*#__PURE__*/emotion_react_browser_esm_css("-webkit-box-orient:vertical;-webkit-line-clamp:", numberOfLines, ";display:-webkit-box;overflow:hidden;" + ( true ? "" : 0), true ? "" : 0); 36498 return cx(shouldTruncate && !numberOfLines && Truncate, shouldTruncate && !!numberOfLines && sx.numberOfLines, className); 36499 }, [className, cx, numberOfLines, shouldTruncate]); 36500 return { ...otherProps, 36501 className: classes, 36502 children: truncatedContent 36503 }; 36504 } 36505 36506 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/ui/utils/colors.js 36507 /** 36508 * External dependencies 36509 */ 36510 36511 36512 36513 /** @type {HTMLDivElement} */ 36514 36515 let colorComputationNode; 36516 k([names]); 36517 /** 36518 * @return {HTMLDivElement | undefined} The HTML element for color computation. 36519 */ 36520 36521 function getColorComputationNode() { 36522 if (typeof document === 'undefined') return; 36523 36524 if (!colorComputationNode) { 36525 // Create a temporary element for style computation. 36526 const el = document.createElement('div'); 36527 el.setAttribute('data-g2-color-computation-node', ''); // Inject for window computed style. 36528 36529 document.body.appendChild(el); 36530 colorComputationNode = el; 36531 } 36532 36533 return colorComputationNode; 36534 } 36535 /** 36536 * @param {string | unknown} value 36537 * 36538 * @return {boolean} Whether the value is a valid color. 36539 */ 36540 36541 36542 function isColor(value) { 36543 if (typeof value !== 'string') return false; 36544 const test = w(value); 36545 return test.isValid(); 36546 } 36547 /** 36548 * Retrieves the computed background color. This is useful for getting the 36549 * value of a CSS variable color. 36550 * 36551 * @param {string | unknown} backgroundColor The background color to compute. 36552 * 36553 * @return {string} The computed background color. 36554 */ 36555 36556 36557 function _getComputedBackgroundColor(backgroundColor) { 36558 var _window; 36559 36560 if (typeof backgroundColor !== 'string') return ''; 36561 if (isColor(backgroundColor)) return backgroundColor; 36562 if (!backgroundColor.includes('var(')) return ''; 36563 if (typeof document === 'undefined') return ''; // Attempts to gracefully handle CSS variables color values. 36564 36565 const el = getColorComputationNode(); 36566 if (!el) return ''; 36567 el.style.background = backgroundColor; // Grab the style. 36568 36569 const computedColor = (_window = window) === null || _window === void 0 ? void 0 : _window.getComputedStyle(el).background; // Reset. 36570 36571 el.style.background = ''; 36572 return computedColor || ''; 36573 } 36574 36575 const getComputedBackgroundColor = memize_default()(_getComputedBackgroundColor); 36576 /** 36577 * Get the text shade optimized for readability, based on a background color. 36578 * 36579 * @param {string | unknown} backgroundColor The background color. 36580 * 36581 * @return {string} The optimized text color (black or white). 36582 */ 36583 36584 function getOptimalTextColor(backgroundColor) { 36585 const background = getComputedBackgroundColor(backgroundColor); 36586 return w(background).isLight() ? '#000000' : '#ffffff'; 36587 } 36588 /** 36589 * Get the text shade optimized for readability, based on a background color. 36590 * 36591 * @param {string | unknown} backgroundColor The background color. 36592 * 36593 * @return {string} The optimized text shade (dark or light). 36594 */ 36595 36596 function getOptimalTextShade(backgroundColor) { 36597 const result = getOptimalTextColor(backgroundColor); 36598 return result === '#000000' ? 'dark' : 'light'; 36599 } 36600 36601 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/utils/config-values.js 36602 /** 36603 * Internal dependencies 36604 */ 36605 36606 36607 const CONTROL_HEIGHT = '36px'; 36608 const CONTROL_PADDING_X = '12px'; 36609 const CONTROL_PROPS = { 36610 controlSurfaceColor: COLORS.white, 36611 controlTextActiveColor: COLORS.ui.theme, 36612 controlPaddingX: CONTROL_PADDING_X, 36613 controlPaddingXLarge: `calc($CONTROL_PADDING_X} * 1.3334)`, 36614 controlPaddingXSmall: `calc($CONTROL_PADDING_X} / 1.3334)`, 36615 controlBackgroundColor: COLORS.white, 36616 controlBorderRadius: '2px', 36617 controlBorderColor: COLORS.gray[700], 36618 controlBoxShadow: 'transparent', 36619 controlBorderColorHover: COLORS.gray[700], 36620 controlBoxShadowFocus: `0 0 0 0.5px $COLORS.admin.theme}`, 36621 controlDestructiveBorderColor: COLORS.alert.red, 36622 controlHeight: CONTROL_HEIGHT, 36623 controlHeightXSmall: `calc( $CONTROL_HEIGHT} * 0.6 )`, 36624 controlHeightSmall: `calc( $CONTROL_HEIGHT} * 0.8 )`, 36625 controlHeightLarge: `calc( $CONTROL_HEIGHT} * 1.2 )`, 36626 controlHeightXLarge: `calc( $CONTROL_HEIGHT} * 1.4 )` 36627 }; 36628 const TOGGLE_GROUP_CONTROL_PROPS = { 36629 toggleGroupControlBackgroundColor: CONTROL_PROPS.controlBackgroundColor, 36630 toggleGroupControlBorderColor: COLORS.ui.border, 36631 toggleGroupControlBackdropBackgroundColor: CONTROL_PROPS.controlSurfaceColor, 36632 toggleGroupControlBackdropBorderColor: COLORS.ui.border, 36633 toggleGroupControlBackdropBoxShadow: 'transparent', 36634 toggleGroupControlButtonColorActive: CONTROL_PROPS.controlBackgroundColor 36635 }; // Using Object.assign to avoid creating circular references when emitting 36636 // TypeScript type declarations. 36637 36638 /* harmony default export */ var config_values = (Object.assign({}, CONTROL_PROPS, TOGGLE_GROUP_CONTROL_PROPS, { 36639 colorDivider: 'rgba(0, 0, 0, 0.1)', 36640 colorScrollbarThumb: 'rgba(0, 0, 0, 0.2)', 36641 colorScrollbarThumbHover: 'rgba(0, 0, 0, 0.5)', 36642 colorScrollbarTrack: 'rgba(0, 0, 0, 0.04)', 36643 elevationIntensity: 1, 36644 radiusBlockUi: '2px', 36645 borderWidth: '1px', 36646 borderWidthFocus: '1.5px', 36647 borderWidthTab: '4px', 36648 spinnerSize: 16, 36649 fontSize: '13px', 36650 fontSizeH1: 'calc(2.44 * 13px)', 36651 fontSizeH2: 'calc(1.95 * 13px)', 36652 fontSizeH3: 'calc(1.56 * 13px)', 36653 fontSizeH4: 'calc(1.25 * 13px)', 36654 fontSizeH5: '13px', 36655 fontSizeH6: 'calc(0.8 * 13px)', 36656 fontSizeInputMobile: '16px', 36657 fontSizeMobile: '15px', 36658 fontSizeSmall: 'calc(0.92 * 13px)', 36659 fontSizeXSmall: 'calc(0.75 * 13px)', 36660 fontLineHeightBase: '1.2', 36661 fontWeight: 'normal', 36662 fontWeightHeading: '600', 36663 gridBase: '4px', 36664 cardBorderRadius: '2px', 36665 cardPaddingXSmall: `$space(2)}`, 36666 cardPaddingSmall: `$space(4)}`, 36667 cardPaddingMedium: `$space(4)} $space(6)}`, 36668 cardPaddingLarge: `$space(6)} $space(8)}`, 36669 surfaceBackgroundColor: COLORS.white, 36670 surfaceBackgroundSubtleColor: '#F3F3F3', 36671 surfaceBackgroundTintColor: '#F5F5F5', 36672 surfaceBorderColor: 'rgba(0, 0, 0, 0.1)', 36673 surfaceBorderBoldColor: 'rgba(0, 0, 0, 0.15)', 36674 surfaceBorderSubtleColor: 'rgba(0, 0, 0, 0.05)', 36675 surfaceBackgroundTertiaryColor: COLORS.white, 36676 surfaceColor: COLORS.white, 36677 transitionDuration: '200ms', 36678 transitionDurationFast: '160ms', 36679 transitionDurationFaster: '120ms', 36680 transitionDurationFastest: '100ms', 36681 transitionTimingFunction: 'cubic-bezier(0.08, 0.52, 0.52, 1)', 36682 transitionTimingFunctionControl: 'cubic-bezier(0.12, 0.8, 0.32, 1)' 36683 })); 36684 36685 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/text/styles.js 36686 function text_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } 36687 36688 /** 36689 * External dependencies 36690 */ 36691 36692 /** 36693 * Internal dependencies 36694 */ 36695 36696 36697 const Text = /*#__PURE__*/emotion_react_browser_esm_css("color:", COLORS.darkGray.primary, ";line-height:", config_values.fontLineHeightBase, ";margin:0;" + ( true ? "" : 0), true ? "" : 0); 36698 const styles_block = true ? { 36699 name: "4zleql", 36700 styles: "display:block" 36701 } : 0; 36702 const positive = /*#__PURE__*/emotion_react_browser_esm_css("color:", COLORS.alert.green, ";" + ( true ? "" : 0), true ? "" : 0); 36703 const destructive = /*#__PURE__*/emotion_react_browser_esm_css("color:", COLORS.alert.red, ";" + ( true ? "" : 0), true ? "" : 0); 36704 const muted = /*#__PURE__*/emotion_react_browser_esm_css("color:", COLORS.mediumGray.text, ";" + ( true ? "" : 0), true ? "" : 0); 36705 const highlighterText = /*#__PURE__*/emotion_react_browser_esm_css("mark{background:", COLORS.alert.yellow, ";border-radius:2px;box-shadow:0 0 0 1px rgba( 0, 0, 0, 0.05 ) inset,0 -1px 0 rgba( 0, 0, 0, 0.1 ) inset;}" + ( true ? "" : 0), true ? "" : 0); 36706 const upperCase = true ? { 36707 name: "50zrmy", 36708 styles: "text-transform:uppercase" 36709 } : 0; 36710 36711 // EXTERNAL MODULE: ./node_modules/highlight-words-core/dist/index.js 36712 var dist = __webpack_require__(3138); 36713 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/text/utils.js 36714 /** 36715 * External dependencies 36716 */ 36717 36718 36719 /** 36720 * WordPress dependencies 36721 */ 36722 36723 36724 /** 36725 * Source: 36726 * https://github.com/bvaughn/react-highlight-words/blob/HEAD/src/Highlighter.js 36727 */ 36728 36729 /* eslint-disable jsdoc/valid-types */ 36730 36731 /** 36732 * @typedef Options 36733 * @property {string} [activeClassName=''] Classname for active highlighted areas. 36734 * @property {number} [activeIndex=-1] The index of the active highlighted area. 36735 * @property {import('react').AllHTMLAttributes<HTMLDivElement>['style']} [activeStyle] Styles to apply to the active highlighted area. 36736 * @property {boolean} [autoEscape] Whether to automatically escape text. 36737 * @property {boolean} [caseSensitive=false] Whether to highlight in a case-sensitive manner. 36738 * @property {string} children Children to highlight. 36739 * @property {import('highlight-words-core').FindAllArgs['findChunks']} [findChunks] Custom `findChunks` function to pass to `highlight-words-core`. 36740 * @property {string | Record<string, unknown>} [highlightClassName=''] Classname to apply to highlighted text or a Record of classnames to apply to given text (which should be the key). 36741 * @property {import('react').AllHTMLAttributes<HTMLDivElement>['style']} [highlightStyle={}] Styles to apply to highlighted text. 36742 * @property {keyof JSX.IntrinsicElements} [highlightTag='mark'] Tag to use for the highlighted text. 36743 * @property {import('highlight-words-core').FindAllArgs['sanitize']} [sanitize] Custom `santize` function to pass to `highlight-words-core`. 36744 * @property {string[]} [searchWords=[]] Words to search for and highlight. 36745 * @property {string} [unhighlightClassName=''] Classname to apply to unhighlighted text. 36746 * @property {import('react').AllHTMLAttributes<HTMLDivElement>['style']} [unhighlightStyle] Style to apply to unhighlighted text. 36747 */ 36748 36749 /** 36750 * Maps props to lowercase names. 36751 * 36752 * @template {Record<string, unknown>} T 36753 * @param {T} object Props to map. 36754 * @return {{[K in keyof T as Lowercase<string & K>]: T[K]}} The mapped props. 36755 */ 36756 36757 /* eslint-enable jsdoc/valid-types */ 36758 36759 const lowercaseProps = object => { 36760 /** @type {any} */ 36761 const mapped = {}; 36762 36763 for (const key in object) { 36764 mapped[key.toLowerCase()] = object[key]; 36765 } 36766 36767 return mapped; 36768 }; 36769 36770 const memoizedLowercaseProps = memize_default()(lowercaseProps); 36771 /** 36772 * 36773 * @param {Options} options 36774 */ 36775 36776 function createHighlighterText(_ref) { 36777 let { 36778 activeClassName = '', 36779 activeIndex = -1, 36780 activeStyle, 36781 autoEscape, 36782 caseSensitive = false, 36783 children, 36784 findChunks, 36785 highlightClassName = '', 36786 highlightStyle = {}, 36787 highlightTag = 'mark', 36788 sanitize, 36789 searchWords = [], 36790 unhighlightClassName = '', 36791 unhighlightStyle 36792 } = _ref; 36793 if (!children) return null; 36794 if (typeof children !== 'string') return children; 36795 const textToHighlight = children; 36796 const chunks = (0,dist.findAll)({ 36797 autoEscape, 36798 caseSensitive, 36799 findChunks, 36800 sanitize, 36801 searchWords, 36802 textToHighlight 36803 }); 36804 const HighlightTag = highlightTag; 36805 let highlightIndex = -1; 36806 let highlightClassNames = ''; 36807 let highlightStyles; 36808 const textContent = chunks.map((chunk, index) => { 36809 const text = textToHighlight.substr(chunk.start, chunk.end - chunk.start); 36810 36811 if (chunk.highlight) { 36812 highlightIndex++; 36813 let highlightClass; 36814 36815 if (typeof highlightClassName === 'object') { 36816 if (!caseSensitive) { 36817 highlightClassName = memoizedLowercaseProps(highlightClassName); 36818 highlightClass = highlightClassName[text.toLowerCase()]; 36819 } else { 36820 highlightClass = highlightClassName[text]; 36821 } 36822 } else { 36823 highlightClass = highlightClassName; 36824 } 36825 36826 const isActive = highlightIndex === +activeIndex; 36827 highlightClassNames = `$highlightClass} $isActive ? activeClassName : ''}`; 36828 highlightStyles = isActive === true && activeStyle !== null ? Object.assign({}, highlightStyle, activeStyle) : highlightStyle; 36829 /** @type {Record<string, any>} */ 36830 36831 const props = { 36832 children: text, 36833 className: highlightClassNames, 36834 key: index, 36835 style: highlightStyles 36836 }; // Don't attach arbitrary props to DOM elements; this triggers React DEV warnings (https://fb.me/react-unknown-prop) 36837 // Only pass through the highlightIndex attribute for custom components. 36838 36839 if (typeof HighlightTag !== 'string') { 36840 props.highlightIndex = highlightIndex; 36841 } 36842 36843 return (0,external_wp_element_namespaceObject.createElement)(HighlightTag, props); 36844 } 36845 36846 return (0,external_wp_element_namespaceObject.createElement)('span', { 36847 children: text, 36848 className: unhighlightClassName, 36849 key: index, 36850 style: unhighlightStyle 36851 }); 36852 }); 36853 return textContent; 36854 } 36855 36856 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/ui/utils/font-size.js 36857 /** 36858 * External dependencies 36859 */ 36860 36861 /** 36862 * Internal dependencies 36863 */ 36864 36865 const BASE_FONT_SIZE = 13; 36866 const PRESET_FONT_SIZES = { 36867 body: BASE_FONT_SIZE, 36868 caption: 10, 36869 footnote: 11, 36870 largeTitle: 28, 36871 subheadline: 12, 36872 title: 20 36873 }; 36874 const HEADING_FONT_SIZES = [1, 2, 3, 4, 5, 6].flatMap(n => [n, n.toString()]); 36875 function getFontSize() { 36876 let size = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : BASE_FONT_SIZE; 36877 36878 if (size in PRESET_FONT_SIZES) { 36879 return getFontSize(PRESET_FONT_SIZES[size]); 36880 } 36881 36882 if (typeof size !== 'number') { 36883 const parsed = parseFloat(size); 36884 if (Number.isNaN(parsed)) return size; 36885 size = parsed; 36886 } 36887 36888 const ratio = `($size} / $BASE_FONT_SIZE})`; 36889 return `calc($ratio} * $config_values.fontSize})`; 36890 } 36891 function getHeadingFontSize() { 36892 let size = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 3; 36893 36894 if (!HEADING_FONT_SIZES.includes(size)) { 36895 return getFontSize(size); 36896 } 36897 36898 const headingSize = `fontSizeH$size}`; 36899 return config_values[headingSize]; 36900 } 36901 36902 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/text/get-line-height.js 36903 /** 36904 * External dependencies 36905 */ 36906 36907 /** 36908 * Internal dependencies 36909 */ 36910 36911 36912 function getLineHeight(adjustLineHeightForInnerControls, lineHeight) { 36913 if (lineHeight) return lineHeight; 36914 if (!adjustLineHeightForInnerControls) return; 36915 let value = `calc($config_values.controlHeight} + $space(2)})`; 36916 36917 switch (adjustLineHeightForInnerControls) { 36918 case 'large': 36919 value = `calc($config_values.controlHeightLarge} + $space(2)})`; 36920 break; 36921 36922 case 'small': 36923 value = `calc($config_values.controlHeightSmall} + $space(2)})`; 36924 break; 36925 36926 case 'xSmall': 36927 value = `calc($config_values.controlHeightXSmall} + $space(2)})`; 36928 break; 36929 36930 default: 36931 break; 36932 } 36933 36934 return value; 36935 } 36936 36937 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/text/hook.js 36938 function hook_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } 36939 36940 /** 36941 * External dependencies 36942 */ 36943 36944 36945 /** 36946 * WordPress dependencies 36947 */ 36948 36949 36950 /** 36951 * Internal dependencies 36952 */ 36953 36954 36955 36956 36957 36958 36959 36960 36961 36962 36963 /** 36964 * @param {import('../ui/context').WordPressComponentProps<import('./types').Props, 'span'>} props 36965 */ 36966 36967 var hook_ref = true ? { 36968 name: "50zrmy", 36969 styles: "text-transform:uppercase" 36970 } : 0; 36971 36972 function useText(props) { 36973 const { 36974 adjustLineHeightForInnerControls, 36975 align, 36976 children, 36977 className, 36978 color, 36979 ellipsizeMode, 36980 isDestructive = false, 36981 display, 36982 highlightEscape = false, 36983 highlightCaseSensitive = false, 36984 highlightWords, 36985 highlightSanitize, 36986 isBlock = false, 36987 letterSpacing, 36988 lineHeight: lineHeightProp, 36989 optimizeReadabilityFor, 36990 size, 36991 truncate = false, 36992 upperCase = false, 36993 variant, 36994 weight = config_values.fontWeight, 36995 ...otherProps 36996 } = useContextSystem(props, 'Text'); 36997 /** @type {import('react').ReactNode} */ 36998 36999 let content = children; 37000 const isHighlighter = Array.isArray(highlightWords); 37001 const isCaption = size === 'caption'; 37002 37003 if (isHighlighter) { 37004 if (typeof children !== 'string') { 37005 throw new TypeError('`children` of `Text` must only be `string` types when `highlightWords` is defined'); 37006 } 37007 37008 content = createHighlighterText({ 37009 autoEscape: highlightEscape, 37010 // Disable reason: We need to disable this otherwise it erases the cast 37011 // eslint-disable-next-line object-shorthand 37012 children: 37013 /** @type {string} */ 37014 children, 37015 caseSensitive: highlightCaseSensitive, 37016 searchWords: highlightWords, 37017 sanitize: highlightSanitize 37018 }); 37019 } 37020 37021 const cx = useCx(); 37022 const classes = (0,external_wp_element_namespaceObject.useMemo)(() => { 37023 const sx = {}; 37024 const lineHeight = getLineHeight(adjustLineHeightForInnerControls, lineHeightProp); 37025 sx.Base = /*#__PURE__*/emotion_react_browser_esm_css({ 37026 color, 37027 display, 37028 fontSize: getFontSize(size), 37029 37030 /* eslint-disable jsdoc/valid-types */ 37031 fontWeight: 37032 /** @type {import('react').CSSProperties['fontWeight']} */ 37033 weight, 37034 37035 /* eslint-enable jsdoc/valid-types */ 37036 lineHeight, 37037 letterSpacing, 37038 textAlign: align 37039 }, true ? "" : 0, true ? "" : 0); 37040 sx.upperCase = hook_ref; 37041 sx.optimalTextColor = null; 37042 37043 if (optimizeReadabilityFor) { 37044 const isOptimalTextColorDark = getOptimalTextShade(optimizeReadabilityFor) === 'dark'; 37045 sx.optimalTextColor = isOptimalTextColorDark ? /*#__PURE__*/emotion_react_browser_esm_css({ 37046 color: COLORS.black 37047 }, true ? "" : 0, true ? "" : 0) : /*#__PURE__*/emotion_react_browser_esm_css({ 37048 color: COLORS.white 37049 }, true ? "" : 0, true ? "" : 0); 37050 } 37051 37052 return cx(Text, sx.Base, sx.optimalTextColor, isDestructive && destructive, !!isHighlighter && highlighterText, isBlock && styles_block, isCaption && muted, variant && text_styles_namespaceObject[variant], upperCase && sx.upperCase, className); 37053 }, [adjustLineHeightForInnerControls, align, className, color, cx, display, isBlock, isCaption, isDestructive, isHighlighter, letterSpacing, lineHeightProp, optimizeReadabilityFor, size, upperCase, variant, weight]); 37054 /** @type {undefined | 'auto' | 'none'} */ 37055 37056 let finalEllipsizeMode; 37057 37058 if (truncate === true) { 37059 finalEllipsizeMode = 'auto'; 37060 } 37061 37062 if (truncate === false) { 37063 finalEllipsizeMode = 'none'; 37064 } 37065 37066 const finalComponentProps = { ...otherProps, 37067 className: classes, 37068 children, 37069 ellipsizeMode: ellipsizeMode || finalEllipsizeMode 37070 }; 37071 const truncateProps = useTruncate(finalComponentProps); 37072 /** 37073 * Enhance child `<Link />` components to inherit font size. 37074 */ 37075 37076 if (!truncate && Array.isArray(children)) { 37077 content = external_wp_element_namespaceObject.Children.map(children, child => { 37078 // @ts-ignore 37079 if (!(0,external_lodash_namespaceObject.isPlainObject)(child) || !('props' in child)) { 37080 return child; 37081 } 37082 37083 const isLink = hasConnectNamespace(child, ['Link']); 37084 37085 if (isLink) { 37086 return (0,external_wp_element_namespaceObject.cloneElement)(child, { 37087 size: child.props.size || 'inherit' 37088 }); 37089 } 37090 37091 return child; 37092 }); 37093 } 37094 37095 return { ...truncateProps, 37096 children: truncate ? truncateProps.children : content 37097 }; 37098 } 37099 37100 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/text/component.js 37101 37102 37103 37104 /** 37105 * Internal dependencies 37106 */ 37107 37108 37109 37110 /** 37111 * @param {import('../ui/context').WordPressComponentProps<import('./types').Props, 'span'>} props 37112 * @param {import('react').ForwardedRef<any>} forwardedRef 37113 */ 37114 37115 function component_Text(props, forwardedRef) { 37116 const textProps = useText(props); 37117 return (0,external_wp_element_namespaceObject.createElement)(component, extends_extends({ 37118 as: "span" 37119 }, textProps, { 37120 ref: forwardedRef 37121 })); 37122 } 37123 /** 37124 * `Text` is a core component that renders text in the library, using the 37125 * library's typography system. 37126 * 37127 * `Text` can be used to render any text-content, like an HTML `p` or `span`. 37128 * 37129 * @example 37130 * 37131 * ```jsx 37132 * import { __experimentalText as Text } from `@wordpress/components`; 37133 * 37134 * function Example() { 37135 * return <Text>Code is Poetry</Text>; 37136 * } 37137 * ``` 37138 */ 37139 37140 37141 const ConnectedText = contextConnect(component_Text, 'Text'); 37142 /* harmony default export */ var text_component = (ConnectedText); 37143 37144 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/input-control/styles/input-control-styles.js 37145 37146 37147 37148 37149 function input_control_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } 37150 37151 /** 37152 * External dependencies 37153 */ 37154 37155 37156 37157 37158 37159 var _ref6 = true ? { 37160 name: "1739oy8", 37161 styles: "z-index:1" 37162 } : 0; 37163 37164 const rootFocusedStyles = _ref7 => { 37165 let { 37166 isFocused 37167 } = _ref7; 37168 if (!isFocused) return ''; 37169 return _ref6; 37170 }; 37171 37172 var _ref3 = true ? { 37173 name: "2o6p8u", 37174 styles: "justify-content:space-between" 37175 } : 0; 37176 37177 var _ref4 = true ? { 37178 name: "14qk3ip", 37179 styles: "align-items:flex-start;flex-direction:column-reverse" 37180 } : 0; 37181 37182 var _ref5 = true ? { 37183 name: "hbng6e", 37184 styles: "align-items:flex-start;flex-direction:column" 37185 } : 0; 37186 37187 const rootLabelPositionStyles = _ref8 => { 37188 let { 37189 labelPosition 37190 } = _ref8; 37191 37192 switch (labelPosition) { 37193 case 'top': 37194 return _ref5; 37195 37196 case 'bottom': 37197 return _ref4; 37198 37199 case 'edge': 37200 return _ref3; 37201 37202 default: 37203 return ''; 37204 } 37205 }; 37206 37207 const input_control_styles_Root = /*#__PURE__*/emotion_styled_base_browser_esm(flex_component, true ? { 37208 target: "em5sgkm7" 37209 } : 0)("position:relative;border-radius:2px;padding-top:0;", rootFocusedStyles, " ", rootLabelPositionStyles, ";" + ( true ? "" : 0)); 37210 37211 const containerDisabledStyles = _ref9 => { 37212 let { 37213 disabled 37214 } = _ref9; 37215 const backgroundColor = disabled ? COLORS.ui.backgroundDisabled : COLORS.ui.background; 37216 return /*#__PURE__*/emotion_react_browser_esm_css({ 37217 backgroundColor 37218 }, true ? "" : 0, true ? "" : 0); 37219 }; // Normalizes the margins from the <Flex /> (components/ui/flex/) container. 37220 37221 37222 var _ref2 = true ? { 37223 name: "wyxldh", 37224 styles: "margin:0 !important" 37225 } : 0; 37226 37227 const containerMarginStyles = _ref10 => { 37228 let { 37229 hideLabel 37230 } = _ref10; 37231 return hideLabel ? _ref2 : null; 37232 }; 37233 37234 var input_control_styles_ref = true ? { 37235 name: "1d3w5wq", 37236 styles: "width:100%" 37237 } : 0; 37238 37239 const containerWidthStyles = _ref11 => { 37240 let { 37241 __unstableInputWidth, 37242 labelPosition 37243 } = _ref11; 37244 if (!__unstableInputWidth) return input_control_styles_ref; 37245 if (labelPosition === 'side') return ''; 37246 37247 if (labelPosition === 'edge') { 37248 return /*#__PURE__*/emotion_react_browser_esm_css({ 37249 flex: `0 0 $__unstableInputWidth}` 37250 }, true ? "" : 0, true ? "" : 0); 37251 } 37252 37253 return /*#__PURE__*/emotion_react_browser_esm_css({ 37254 width: __unstableInputWidth 37255 }, true ? "" : 0, true ? "" : 0); 37256 }; 37257 37258 const Container = emotion_styled_base_browser_esm("div", true ? { 37259 target: "em5sgkm6" 37260 } : 0)("align-items:center;box-sizing:border-box;border-radius:inherit;display:flex;flex:1;position:relative;", containerDisabledStyles, " ", containerMarginStyles, " ", containerWidthStyles, ";" + ( true ? "" : 0)); 37261 37262 const disabledStyles = _ref12 => { 37263 let { 37264 disabled 37265 } = _ref12; 37266 if (!disabled) return ''; 37267 return /*#__PURE__*/emotion_react_browser_esm_css({ 37268 color: COLORS.ui.textDisabled 37269 }, true ? "" : 0, true ? "" : 0); 37270 }; 37271 37272 const fontSizeStyles = _ref13 => { 37273 let { 37274 inputSize: size 37275 } = _ref13; 37276 const sizes = { 37277 default: '13px', 37278 small: '11px', 37279 '__unstable-large': '13px' 37280 }; 37281 const fontSize = sizes[size] || sizes.default; 37282 const fontSizeMobile = '16px'; 37283 if (!fontSize) return ''; 37284 return /*#__PURE__*/emotion_react_browser_esm_css("font-size:", fontSizeMobile, ";@media ( min-width: 600px ){font-size:", fontSize, ";}" + ( true ? "" : 0), true ? "" : 0); 37285 }; 37286 37287 const sizeStyles = _ref14 => { 37288 let { 37289 inputSize: size 37290 } = _ref14; 37291 const sizes = { 37292 default: { 37293 height: 30, 37294 lineHeight: 1, 37295 minHeight: 30, 37296 paddingLeft: 8, 37297 paddingRight: 8 37298 }, 37299 small: { 37300 height: 24, 37301 lineHeight: 1, 37302 minHeight: 24, 37303 paddingLeft: 8, 37304 paddingRight: 8 37305 }, 37306 '__unstable-large': { 37307 height: 40, 37308 lineHeight: 1, 37309 minHeight: 40, 37310 paddingLeft: 16, 37311 paddingRight: 16 37312 } 37313 }; 37314 const style = sizes[size] || sizes.default; 37315 return /*#__PURE__*/emotion_react_browser_esm_css(style, true ? "" : 0, true ? "" : 0); 37316 }; 37317 37318 const dragStyles = _ref15 => { 37319 let { 37320 isDragging, 37321 dragCursor 37322 } = _ref15; 37323 let defaultArrowStyles; 37324 let activeDragCursorStyles; 37325 37326 if (isDragging) { 37327 defaultArrowStyles = /*#__PURE__*/emotion_react_browser_esm_css("cursor:", dragCursor, ";user-select:none;&::-webkit-outer-spin-button,&::-webkit-inner-spin-button{-webkit-appearance:none!important;margin:0!important;}" + ( true ? "" : 0), true ? "" : 0); 37328 } 37329 37330 if (isDragging && dragCursor) { 37331 activeDragCursorStyles = /*#__PURE__*/emotion_react_browser_esm_css("&:active{cursor:", dragCursor, ";}" + ( true ? "" : 0), true ? "" : 0); 37332 } 37333 37334 return /*#__PURE__*/emotion_react_browser_esm_css(defaultArrowStyles, " ", activeDragCursorStyles, ";" + ( true ? "" : 0), true ? "" : 0); 37335 }; // TODO: Resolve need to use &&& to increase specificity 37336 // https://github.com/WordPress/gutenberg/issues/18483 37337 37338 37339 const Input = emotion_styled_base_browser_esm("input", true ? { 37340 target: "em5sgkm5" 37341 } : 0)("&&&{background-color:transparent;box-sizing:border-box;border:none;box-shadow:none!important;color:", COLORS.black, ";display:block;font-family:inherit;margin:0;outline:none;width:100%;", dragStyles, " ", disabledStyles, " ", fontSizeStyles, " ", sizeStyles, " &::-webkit-input-placeholder{line-height:normal;}}" + ( true ? "" : 0)); 37342 37343 const labelMargin = _ref16 => { 37344 let { 37345 labelPosition 37346 } = _ref16; 37347 let marginBottom = 8; 37348 37349 if (labelPosition === 'edge' || labelPosition === 'side') { 37350 marginBottom = 0; 37351 } 37352 37353 return /*#__PURE__*/emotion_react_browser_esm_css({ 37354 marginTop: 0, 37355 marginRight: 0, 37356 marginBottom, 37357 marginLeft: 0 37358 }, true ? "" : 0, true ? "" : 0); 37359 }; 37360 37361 const BaseLabel = /*#__PURE__*/emotion_styled_base_browser_esm(text_component, true ? { 37362 target: "em5sgkm4" 37363 } : 0)("&&&{box-sizing:border-box;color:currentColor;display:block;padding-top:0;padding-bottom:0;max-width:100%;z-index:1;", labelMargin, " overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}" + ( true ? "" : 0)); 37364 37365 const Label = props => (0,external_wp_element_namespaceObject.createElement)(BaseLabel, extends_extends({}, props, { 37366 as: "label" 37367 })); 37368 const LabelWrapper = /*#__PURE__*/emotion_styled_base_browser_esm(flex_item_component, true ? { 37369 target: "em5sgkm3" 37370 } : 0)( true ? { 37371 name: "1b6uupn", 37372 styles: "max-width:calc( 100% - 10px )" 37373 } : 0); 37374 37375 const backdropFocusedStyles = _ref17 => { 37376 let { 37377 disabled, 37378 isFocused 37379 } = _ref17; 37380 let borderColor = isFocused ? COLORS.ui.borderFocus : COLORS.ui.border; 37381 let boxShadow; 37382 37383 if (isFocused) { 37384 boxShadow = `0 0 0 1px $COLORS.ui.borderFocus} inset`; 37385 } 37386 37387 if (disabled) { 37388 borderColor = COLORS.ui.borderDisabled; 37389 } 37390 37391 return /*#__PURE__*/emotion_react_browser_esm_css({ 37392 boxShadow, 37393 borderColor, 37394 borderStyle: 'solid', 37395 borderWidth: 1 37396 }, true ? "" : 0, true ? "" : 0); 37397 }; 37398 37399 const BackdropUI = emotion_styled_base_browser_esm("div", true ? { 37400 target: "em5sgkm2" 37401 } : 0)("&&&{box-sizing:border-box;border-radius:inherit;bottom:0;left:0;margin:0;padding:0;pointer-events:none;position:absolute;right:0;top:0;", backdropFocusedStyles, " ", rtl({ 37402 paddingLeft: 2 37403 }), ";}" + ( true ? "" : 0)); 37404 const Prefix = emotion_styled_base_browser_esm("span", true ? { 37405 target: "em5sgkm1" 37406 } : 0)( true ? { 37407 name: "pvvbxf", 37408 styles: "box-sizing:border-box;display:block" 37409 } : 0); 37410 const Suffix = emotion_styled_base_browser_esm("span", true ? { 37411 target: "em5sgkm0" 37412 } : 0)( true ? { 37413 name: "jgf79h", 37414 styles: "align-items:center;align-self:stretch;box-sizing:border-box;display:flex" 37415 } : 0); 37416 37417 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/input-control/backdrop.js 37418 37419 37420 /** 37421 * WordPress dependencies 37422 */ 37423 37424 /** 37425 * Internal dependencies 37426 */ 37427 37428 37429 37430 function Backdrop(_ref) { 37431 let { 37432 disabled = false, 37433 isFocused = false 37434 } = _ref; 37435 return (0,external_wp_element_namespaceObject.createElement)(BackdropUI, { 37436 "aria-hidden": "true", 37437 className: "components-input-control__backdrop", 37438 disabled: disabled, 37439 isFocused: isFocused 37440 }); 37441 } 37442 37443 const MemoizedBackdrop = (0,external_wp_element_namespaceObject.memo)(Backdrop); 37444 /* harmony default export */ var backdrop = (MemoizedBackdrop); 37445 37446 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/input-control/label.js 37447 37448 37449 37450 /** 37451 * Internal dependencies 37452 */ 37453 37454 37455 function label_Label(_ref) { 37456 let { 37457 children, 37458 hideLabelFromVision, 37459 htmlFor, 37460 ...props 37461 } = _ref; 37462 if (!children) return null; 37463 37464 if (hideLabelFromVision) { 37465 return (0,external_wp_element_namespaceObject.createElement)(visually_hidden_component, { 37466 as: "label", 37467 htmlFor: htmlFor 37468 }, children); 37469 } 37470 37471 return (0,external_wp_element_namespaceObject.createElement)(Label, extends_extends({ 37472 htmlFor: htmlFor 37473 }, props), children); 37474 } 37475 37476 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/input-control/input-base.js 37477 37478 37479 37480 /** 37481 * External dependencies 37482 */ 37483 37484 /** 37485 * WordPress dependencies 37486 */ 37487 37488 37489 /** 37490 * Internal dependencies 37491 */ 37492 37493 37494 37495 37496 37497 function useUniqueId(idProp) { 37498 const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(InputBase); 37499 const id = `input-base-control-$instanceId}`; 37500 return idProp || id; 37501 } // Adapter to map props for the new ui/flex compopnent. 37502 37503 37504 function getUIFlexProps(labelPosition) { 37505 const props = {}; 37506 37507 switch (labelPosition) { 37508 case 'top': 37509 props.direction = 'column'; 37510 props.gap = 0; 37511 break; 37512 37513 case 'bottom': 37514 props.direction = 'column-reverse'; 37515 props.gap = 0; 37516 break; 37517 37518 case 'edge': 37519 props.justify = 'space-between'; 37520 break; 37521 } 37522 37523 return props; 37524 } 37525 37526 function InputBase(_ref, ref) { 37527 let { 37528 __unstableInputWidth, 37529 children, 37530 className, 37531 disabled = false, 37532 hideLabelFromVision = false, 37533 labelPosition, 37534 id: idProp, 37535 isFocused = false, 37536 label, 37537 prefix, 37538 size = 'default', 37539 suffix, 37540 ...props 37541 } = _ref; 37542 const id = useUniqueId(idProp); 37543 const hideLabel = hideLabelFromVision || !label; 37544 return (// @ts-expect-error The `direction` prop from Flex (FlexDirection) conflicts with legacy SVGAttributes `direction` (string) that come from React intrinsic prop definitions. 37545 (0,external_wp_element_namespaceObject.createElement)(input_control_styles_Root, extends_extends({}, props, getUIFlexProps(labelPosition), { 37546 className: className, 37547 isFocused: isFocused, 37548 labelPosition: labelPosition, 37549 ref: ref 37550 }), (0,external_wp_element_namespaceObject.createElement)(LabelWrapper, null, (0,external_wp_element_namespaceObject.createElement)(label_Label, { 37551 className: "components-input-control__label", 37552 hideLabelFromVision: hideLabelFromVision, 37553 labelPosition: labelPosition, 37554 htmlFor: id, 37555 size: size 37556 }, label)), (0,external_wp_element_namespaceObject.createElement)(Container, { 37557 __unstableInputWidth: __unstableInputWidth, 37558 className: "components-input-control__container", 37559 disabled: disabled, 37560 hideLabel: hideLabel, 37561 labelPosition: labelPosition 37562 }, prefix && (0,external_wp_element_namespaceObject.createElement)(Prefix, { 37563 className: "components-input-control__prefix" 37564 }, prefix), children, suffix && (0,external_wp_element_namespaceObject.createElement)(Suffix, { 37565 className: "components-input-control__suffix" 37566 }, suffix), (0,external_wp_element_namespaceObject.createElement)(backdrop, { 37567 disabled: disabled, 37568 isFocused: isFocused 37569 }))) 37570 ); 37571 } 37572 /* harmony default export */ var input_base = ((0,external_wp_element_namespaceObject.forwardRef)(InputBase)); 37573 37574 ;// CONCATENATED MODULE: ./node_modules/@use-gesture/core/dist/maths-b2a210f4.esm.js 37575 function maths_b2a210f4_esm_clamp(v, min, max) { 37576 return Math.max(min, Math.min(v, max)); 37577 } 37578 const V = { 37579 toVector(v, fallback) { 37580 if (v === undefined) v = fallback; 37581 return Array.isArray(v) ? v : [v, v]; 37582 }, 37583 37584 add(v1, v2) { 37585 return [v1[0] + v2[0], v1[1] + v2[1]]; 37586 }, 37587 37588 sub(v1, v2) { 37589 return [v1[0] - v2[0], v1[1] - v2[1]]; 37590 }, 37591 37592 addTo(v1, v2) { 37593 v1[0] += v2[0]; 37594 v1[1] += v2[1]; 37595 }, 37596 37597 subTo(v1, v2) { 37598 v1[0] -= v2[0]; 37599 v1[1] -= v2[1]; 37600 } 37601 37602 }; 37603 37604 function rubberband(distance, dimension, constant) { 37605 if (dimension === 0 || Math.abs(dimension) === Infinity) return Math.pow(distance, constant * 5); 37606 return distance * dimension * constant / (dimension + constant * distance); 37607 } 37608 37609 function rubberbandIfOutOfBounds(position, min, max, constant = 0.15) { 37610 if (constant === 0) return maths_b2a210f4_esm_clamp(position, min, max); 37611 if (position < min) return -rubberband(min - position, max - min, constant) + min; 37612 if (position > max) return +rubberband(position - max, max - min, constant) + max; 37613 return position; 37614 } 37615 function computeRubberband(bounds, [Vx, Vy], [Rx, Ry]) { 37616 const [[X0, X1], [Y0, Y1]] = bounds; 37617 return [rubberbandIfOutOfBounds(Vx, X0, X1, Rx), rubberbandIfOutOfBounds(Vy, Y0, Y1, Ry)]; 37618 } 37619 37620 37621 37622 ;// CONCATENATED MODULE: ./node_modules/@use-gesture/core/dist/actions-8e12537b.esm.js 37623 37624 37625 function actions_8e12537b_esm_defineProperty(obj, key, value) { 37626 if (key in obj) { 37627 Object.defineProperty(obj, key, { 37628 value: value, 37629 enumerable: true, 37630 configurable: true, 37631 writable: true 37632 }); 37633 } else { 37634 obj[key] = value; 37635 } 37636 37637 return obj; 37638 } 37639 37640 function actions_8e12537b_esm_ownKeys(object, enumerableOnly) { 37641 var keys = Object.keys(object); 37642 37643 if (Object.getOwnPropertySymbols) { 37644 var symbols = Object.getOwnPropertySymbols(object); 37645 enumerableOnly && (symbols = symbols.filter(function (sym) { 37646 return Object.getOwnPropertyDescriptor(object, sym).enumerable; 37647 })), keys.push.apply(keys, symbols); 37648 } 37649 37650 return keys; 37651 } 37652 37653 function actions_8e12537b_esm_objectSpread2(target) { 37654 for (var i = 1; i < arguments.length; i++) { 37655 var source = null != arguments[i] ? arguments[i] : {}; 37656 i % 2 ? actions_8e12537b_esm_ownKeys(Object(source), !0).forEach(function (key) { 37657 actions_8e12537b_esm_defineProperty(target, key, source[key]); 37658 }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : actions_8e12537b_esm_ownKeys(Object(source)).forEach(function (key) { 37659 Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); 37660 }); 37661 } 37662 37663 return target; 37664 } 37665 37666 const EVENT_TYPE_MAP = { 37667 pointer: { 37668 start: 'down', 37669 change: 'move', 37670 end: 'up' 37671 }, 37672 mouse: { 37673 start: 'down', 37674 change: 'move', 37675 end: 'up' 37676 }, 37677 touch: { 37678 start: 'start', 37679 change: 'move', 37680 end: 'end' 37681 }, 37682 gesture: { 37683 start: 'start', 37684 change: 'change', 37685 end: 'end' 37686 } 37687 }; 37688 37689 function capitalize(string) { 37690 if (!string) return ''; 37691 return string[0].toUpperCase() + string.slice(1); 37692 } 37693 37694 function toHandlerProp(device, action = '', capture = false) { 37695 const deviceProps = EVENT_TYPE_MAP[device]; 37696 const actionKey = deviceProps ? deviceProps[action] || action : action; 37697 return 'on' + capitalize(device) + capitalize(actionKey) + (capture ? 'Capture' : ''); 37698 } 37699 const pointerCaptureEvents = ['gotpointercapture', 'lostpointercapture']; 37700 function parseProp(prop) { 37701 let eventKey = prop.substring(2).toLowerCase(); 37702 const passive = !!~eventKey.indexOf('passive'); 37703 if (passive) eventKey = eventKey.replace('passive', ''); 37704 const captureKey = pointerCaptureEvents.includes(eventKey) ? 'capturecapture' : 'capture'; 37705 const capture = !!~eventKey.indexOf(captureKey); 37706 if (capture) eventKey = eventKey.replace('capture', ''); 37707 return { 37708 device: eventKey, 37709 capture, 37710 passive 37711 }; 37712 } 37713 function toDomEventType(device, action = '') { 37714 const deviceProps = EVENT_TYPE_MAP[device]; 37715 const actionKey = deviceProps ? deviceProps[action] || action : action; 37716 return device + actionKey; 37717 } 37718 function isTouch(event) { 37719 return 'touches' in event; 37720 } 37721 function getPointerType(event) { 37722 if (isTouch(event)) return 'touch'; 37723 if ('pointerType' in event) return event.pointerType; 37724 return 'mouse'; 37725 } 37726 37727 function getCurrentTargetTouchList(event) { 37728 return Array.from(event.touches).filter(e => { 37729 var _event$currentTarget, _event$currentTarget$; 37730 37731 return e.target === event.currentTarget || ((_event$currentTarget = event.currentTarget) === null || _event$currentTarget === void 0 ? void 0 : (_event$currentTarget$ = _event$currentTarget.contains) === null || _event$currentTarget$ === void 0 ? void 0 : _event$currentTarget$.call(_event$currentTarget, e.target)); 37732 }); 37733 } 37734 37735 function getTouchList(event) { 37736 return event.type === 'touchend' || event.type === 'touchcancel' ? event.changedTouches : event.targetTouches; 37737 } 37738 37739 function getValueEvent(event) { 37740 return isTouch(event) ? getTouchList(event)[0] : event; 37741 } 37742 37743 function distanceAngle(P1, P2) { 37744 const dx = P2.clientX - P1.clientX; 37745 const dy = P2.clientY - P1.clientY; 37746 const cx = (P2.clientX + P1.clientX) / 2; 37747 const cy = (P2.clientY + P1.clientY) / 2; 37748 const distance = Math.hypot(dx, dy); 37749 const angle = -(Math.atan2(dx, dy) * 180) / Math.PI; 37750 const origin = [cx, cy]; 37751 return { 37752 angle, 37753 distance, 37754 origin 37755 }; 37756 } 37757 function touchIds(event) { 37758 return getCurrentTargetTouchList(event).map(touch => touch.identifier); 37759 } 37760 function touchDistanceAngle(event, ids) { 37761 const [P1, P2] = Array.from(event.touches).filter(touch => ids.includes(touch.identifier)); 37762 return distanceAngle(P1, P2); 37763 } 37764 function pointerId(event) { 37765 const valueEvent = getValueEvent(event); 37766 return isTouch(event) ? valueEvent.identifier : valueEvent.pointerId; 37767 } 37768 function pointerValues(event) { 37769 const valueEvent = getValueEvent(event); 37770 return [valueEvent.clientX, valueEvent.clientY]; 37771 } 37772 const LINE_HEIGHT = 40; 37773 const PAGE_HEIGHT = 800; 37774 function wheelValues(event) { 37775 let { 37776 deltaX, 37777 deltaY, 37778 deltaMode 37779 } = event; 37780 37781 if (deltaMode === 1) { 37782 deltaX *= LINE_HEIGHT; 37783 deltaY *= LINE_HEIGHT; 37784 } else if (deltaMode === 2) { 37785 deltaX *= PAGE_HEIGHT; 37786 deltaY *= PAGE_HEIGHT; 37787 } 37788 37789 return [deltaX, deltaY]; 37790 } 37791 function scrollValues(event) { 37792 var _ref, _ref2; 37793 37794 const { 37795 scrollX, 37796 scrollY, 37797 scrollLeft, 37798 scrollTop 37799 } = event.currentTarget; 37800 return [(_ref = scrollX !== null && scrollX !== void 0 ? scrollX : scrollLeft) !== null && _ref !== void 0 ? _ref : 0, (_ref2 = scrollY !== null && scrollY !== void 0 ? scrollY : scrollTop) !== null && _ref2 !== void 0 ? _ref2 : 0]; 37801 } 37802 function getEventDetails(event) { 37803 const payload = {}; 37804 if ('buttons' in event) payload.buttons = event.buttons; 37805 37806 if ('shiftKey' in event) { 37807 const { 37808 shiftKey, 37809 altKey, 37810 metaKey, 37811 ctrlKey 37812 } = event; 37813 Object.assign(payload, { 37814 shiftKey, 37815 altKey, 37816 metaKey, 37817 ctrlKey 37818 }); 37819 } 37820 37821 return payload; 37822 } 37823 37824 function call(v, ...args) { 37825 if (typeof v === 'function') { 37826 return v(...args); 37827 } else { 37828 return v; 37829 } 37830 } 37831 function noop() {} 37832 function chain(...fns) { 37833 if (fns.length === 0) return noop; 37834 if (fns.length === 1) return fns[0]; 37835 return function () { 37836 let result; 37837 37838 for (const fn of fns) { 37839 result = fn.apply(this, arguments) || result; 37840 } 37841 37842 return result; 37843 }; 37844 } 37845 function assignDefault(value, fallback) { 37846 return Object.assign({}, fallback, value || {}); 37847 } 37848 37849 const BEFORE_LAST_KINEMATICS_DELAY = 32; 37850 class Engine { 37851 constructor(ctrl, args, key) { 37852 this.ctrl = ctrl; 37853 this.args = args; 37854 this.key = key; 37855 37856 if (!this.state) { 37857 this.state = {}; 37858 this.computeValues([0, 0]); 37859 this.computeInitial(); 37860 if (this.init) this.init(); 37861 this.reset(); 37862 } 37863 } 37864 37865 get state() { 37866 return this.ctrl.state[this.key]; 37867 } 37868 37869 set state(state) { 37870 this.ctrl.state[this.key] = state; 37871 } 37872 37873 get shared() { 37874 return this.ctrl.state.shared; 37875 } 37876 37877 get eventStore() { 37878 return this.ctrl.gestureEventStores[this.key]; 37879 } 37880 37881 get timeoutStore() { 37882 return this.ctrl.gestureTimeoutStores[this.key]; 37883 } 37884 37885 get config() { 37886 return this.ctrl.config[this.key]; 37887 } 37888 37889 get sharedConfig() { 37890 return this.ctrl.config.shared; 37891 } 37892 37893 get handler() { 37894 return this.ctrl.handlers[this.key]; 37895 } 37896 37897 reset() { 37898 const { 37899 state, 37900 shared, 37901 ingKey, 37902 args 37903 } = this; 37904 shared[ingKey] = state._active = state.active = state._blocked = state._force = false; 37905 state._step = [false, false]; 37906 state.intentional = false; 37907 state._movement = [0, 0]; 37908 state._distance = [0, 0]; 37909 state._direction = [0, 0]; 37910 state._delta = [0, 0]; 37911 state._bounds = [[-Infinity, Infinity], [-Infinity, Infinity]]; 37912 state.args = args; 37913 state.axis = undefined; 37914 state.memo = undefined; 37915 state.elapsedTime = 0; 37916 state.direction = [0, 0]; 37917 state.distance = [0, 0]; 37918 state.overflow = [0, 0]; 37919 state._movementBound = [false, false]; 37920 state.velocity = [0, 0]; 37921 state.movement = [0, 0]; 37922 state.delta = [0, 0]; 37923 state.timeStamp = 0; 37924 } 37925 37926 start(event) { 37927 const state = this.state; 37928 const config = this.config; 37929 37930 if (!state._active) { 37931 this.reset(); 37932 this.computeInitial(); 37933 state._active = true; 37934 state.target = event.target; 37935 state.currentTarget = event.currentTarget; 37936 state.lastOffset = config.from ? call(config.from, state) : state.offset; 37937 state.offset = state.lastOffset; 37938 } 37939 37940 state.startTime = state.timeStamp = event.timeStamp; 37941 } 37942 37943 computeValues(values) { 37944 const state = this.state; 37945 state._values = values; 37946 state.values = this.config.transform(values); 37947 } 37948 37949 computeInitial() { 37950 const state = this.state; 37951 state._initial = state._values; 37952 state.initial = state.values; 37953 } 37954 37955 compute(event) { 37956 const { 37957 state, 37958 config, 37959 shared 37960 } = this; 37961 state.args = this.args; 37962 let dt = 0; 37963 37964 if (event) { 37965 state.event = event; 37966 if (config.preventDefault && event.cancelable) state.event.preventDefault(); 37967 state.type = event.type; 37968 shared.touches = this.ctrl.pointerIds.size || this.ctrl.touchIds.size; 37969 shared.locked = !!document.pointerLockElement; 37970 Object.assign(shared, getEventDetails(event)); 37971 shared.down = shared.pressed = shared.buttons % 2 === 1 || shared.touches > 0; 37972 dt = event.timeStamp - state.timeStamp; 37973 state.timeStamp = event.timeStamp; 37974 state.elapsedTime = state.timeStamp - state.startTime; 37975 } 37976 37977 if (state._active) { 37978 const _absoluteDelta = state._delta.map(Math.abs); 37979 37980 V.addTo(state._distance, _absoluteDelta); 37981 } 37982 37983 if (this.axisIntent) this.axisIntent(event); 37984 const [_m0, _m1] = state._movement; 37985 const [t0, t1] = config.threshold; 37986 const { 37987 _step, 37988 values 37989 } = state; 37990 37991 if (config.hasCustomTransform) { 37992 if (_step[0] === false) _step[0] = Math.abs(_m0) >= t0 && values[0]; 37993 if (_step[1] === false) _step[1] = Math.abs(_m1) >= t1 && values[1]; 37994 } else { 37995 if (_step[0] === false) _step[0] = Math.abs(_m0) >= t0 && Math.sign(_m0) * t0; 37996 if (_step[1] === false) _step[1] = Math.abs(_m1) >= t1 && Math.sign(_m1) * t1; 37997 } 37998 37999 state.intentional = _step[0] !== false || _step[1] !== false; 38000 if (!state.intentional) return; 38001 const movement = [0, 0]; 38002 38003 if (config.hasCustomTransform) { 38004 const [v0, v1] = values; 38005 movement[0] = _step[0] !== false ? v0 - _step[0] : 0; 38006 movement[1] = _step[1] !== false ? v1 - _step[1] : 0; 38007 } else { 38008 movement[0] = _step[0] !== false ? _m0 - _step[0] : 0; 38009 movement[1] = _step[1] !== false ? _m1 - _step[1] : 0; 38010 } 38011 38012 if (this.restrictToAxis && !state._blocked) this.restrictToAxis(movement); 38013 const previousOffset = state.offset; 38014 const gestureIsActive = state._active && !state._blocked || state.active; 38015 38016 if (gestureIsActive) { 38017 state.first = state._active && !state.active; 38018 state.last = !state._active && state.active; 38019 state.active = shared[this.ingKey] = state._active; 38020 38021 if (event) { 38022 if (state.first) { 38023 if ('bounds' in config) state._bounds = call(config.bounds, state); 38024 if (this.setup) this.setup(); 38025 } 38026 38027 state.movement = movement; 38028 this.computeOffset(); 38029 } 38030 } 38031 38032 const [ox, oy] = state.offset; 38033 const [[x0, x1], [y0, y1]] = state._bounds; 38034 state.overflow = [ox < x0 ? -1 : ox > x1 ? 1 : 0, oy < y0 ? -1 : oy > y1 ? 1 : 0]; 38035 state._movementBound[0] = state.overflow[0] ? state._movementBound[0] === false ? state._movement[0] : state._movementBound[0] : false; 38036 state._movementBound[1] = state.overflow[1] ? state._movementBound[1] === false ? state._movement[1] : state._movementBound[1] : false; 38037 const rubberband = state._active ? config.rubberband || [0, 0] : [0, 0]; 38038 state.offset = computeRubberband(state._bounds, state.offset, rubberband); 38039 state.delta = V.sub(state.offset, previousOffset); 38040 this.computeMovement(); 38041 38042 if (gestureIsActive && (!state.last || dt > BEFORE_LAST_KINEMATICS_DELAY)) { 38043 state.delta = V.sub(state.offset, previousOffset); 38044 const absoluteDelta = state.delta.map(Math.abs); 38045 V.addTo(state.distance, absoluteDelta); 38046 state.direction = state.delta.map(Math.sign); 38047 state._direction = state._delta.map(Math.sign); 38048 38049 if (!state.first && dt > 0) { 38050 state.velocity = [absoluteDelta[0] / dt, absoluteDelta[1] / dt]; 38051 } 38052 } 38053 } 38054 38055 emit() { 38056 const state = this.state; 38057 const shared = this.shared; 38058 const config = this.config; 38059 if (!state._active) this.clean(); 38060 if ((state._blocked || !state.intentional) && !state._force && !config.triggerAllEvents) return; 38061 const memo = this.handler(actions_8e12537b_esm_objectSpread2(actions_8e12537b_esm_objectSpread2(actions_8e12537b_esm_objectSpread2({}, shared), state), {}, { 38062 [this.aliasKey]: state.values 38063 })); 38064 if (memo !== undefined) state.memo = memo; 38065 } 38066 38067 clean() { 38068 this.eventStore.clean(); 38069 this.timeoutStore.clean(); 38070 } 38071 38072 } 38073 38074 function selectAxis([dx, dy], threshold) { 38075 const absDx = Math.abs(dx); 38076 const absDy = Math.abs(dy); 38077 38078 if (absDx > absDy && absDx > threshold) { 38079 return 'x'; 38080 } 38081 38082 if (absDy > absDx && absDy > threshold) { 38083 return 'y'; 38084 } 38085 38086 return undefined; 38087 } 38088 38089 class CoordinatesEngine extends Engine { 38090 constructor(...args) { 38091 super(...args); 38092 38093 actions_8e12537b_esm_defineProperty(this, "aliasKey", 'xy'); 38094 } 38095 38096 reset() { 38097 super.reset(); 38098 this.state.axis = undefined; 38099 } 38100 38101 init() { 38102 this.state.offset = [0, 0]; 38103 this.state.lastOffset = [0, 0]; 38104 } 38105 38106 computeOffset() { 38107 this.state.offset = V.add(this.state.lastOffset, this.state.movement); 38108 } 38109 38110 computeMovement() { 38111 this.state.movement = V.sub(this.state.offset, this.state.lastOffset); 38112 } 38113 38114 axisIntent(event) { 38115 const state = this.state; 38116 const config = this.config; 38117 38118 if (!state.axis && event) { 38119 const threshold = typeof config.axisThreshold === 'object' ? config.axisThreshold[getPointerType(event)] : config.axisThreshold; 38120 state.axis = selectAxis(state._movement, threshold); 38121 } 38122 38123 state._blocked = (config.lockDirection || !!config.axis) && !state.axis || !!config.axis && config.axis !== state.axis; 38124 } 38125 38126 restrictToAxis(v) { 38127 if (this.config.axis || this.config.lockDirection) { 38128 switch (this.state.axis) { 38129 case 'x': 38130 v[1] = 0; 38131 break; 38132 38133 case 'y': 38134 v[0] = 0; 38135 break; 38136 } 38137 } 38138 } 38139 38140 } 38141 38142 const identity = v => v; 38143 const DEFAULT_RUBBERBAND = 0.15; 38144 const commonConfigResolver = { 38145 enabled(value = true) { 38146 return value; 38147 }, 38148 38149 preventDefault(value = false) { 38150 return value; 38151 }, 38152 38153 triggerAllEvents(value = false) { 38154 return value; 38155 }, 38156 38157 rubberband(value = 0) { 38158 switch (value) { 38159 case true: 38160 return [DEFAULT_RUBBERBAND, DEFAULT_RUBBERBAND]; 38161 38162 case false: 38163 return [0, 0]; 38164 38165 default: 38166 return V.toVector(value); 38167 } 38168 }, 38169 38170 from(value) { 38171 if (typeof value === 'function') return value; 38172 if (value != null) return V.toVector(value); 38173 }, 38174 38175 transform(value, _k, config) { 38176 const transform = value || config.shared.transform; 38177 this.hasCustomTransform = !!transform; 38178 38179 if (false) {} 38180 38181 return transform || identity; 38182 }, 38183 38184 threshold(value) { 38185 return V.toVector(value, 0); 38186 } 38187 38188 }; 38189 38190 if (false) {} 38191 38192 const DEFAULT_AXIS_THRESHOLD = 0; 38193 const coordinatesConfigResolver = actions_8e12537b_esm_objectSpread2(actions_8e12537b_esm_objectSpread2({}, commonConfigResolver), {}, { 38194 axis(_v, _k, { 38195 axis 38196 }) { 38197 this.lockDirection = axis === 'lock'; 38198 if (!this.lockDirection) return axis; 38199 }, 38200 38201 axisThreshold(value = DEFAULT_AXIS_THRESHOLD) { 38202 return value; 38203 }, 38204 38205 bounds(value = {}) { 38206 if (typeof value === 'function') { 38207 return state => coordinatesConfigResolver.bounds(value(state)); 38208 } 38209 38210 if ('current' in value) { 38211 return () => value.current; 38212 } 38213 38214 if (typeof HTMLElement === 'function' && value instanceof HTMLElement) { 38215 return value; 38216 } 38217 38218 const { 38219 left = -Infinity, 38220 right = Infinity, 38221 top = -Infinity, 38222 bottom = Infinity 38223 } = value; 38224 return [[left, right], [top, bottom]]; 38225 } 38226 38227 }); 38228 38229 const DISPLACEMENT = 10; 38230 const KEYS_DELTA_MAP = { 38231 ArrowRight: (factor = 1) => [DISPLACEMENT * factor, 0], 38232 ArrowLeft: (factor = 1) => [-DISPLACEMENT * factor, 0], 38233 ArrowUp: (factor = 1) => [0, -DISPLACEMENT * factor], 38234 ArrowDown: (factor = 1) => [0, DISPLACEMENT * factor] 38235 }; 38236 class DragEngine extends CoordinatesEngine { 38237 constructor(...args) { 38238 super(...args); 38239 38240 actions_8e12537b_esm_defineProperty(this, "ingKey", 'dragging'); 38241 } 38242 38243 reset() { 38244 super.reset(); 38245 const state = this.state; 38246 state._pointerId = undefined; 38247 state._pointerActive = false; 38248 state._keyboardActive = false; 38249 state._preventScroll = false; 38250 state._delayed = false; 38251 state.swipe = [0, 0]; 38252 state.tap = false; 38253 state.canceled = false; 38254 state.cancel = this.cancel.bind(this); 38255 } 38256 38257 setup() { 38258 const state = this.state; 38259 38260 if (state._bounds instanceof HTMLElement) { 38261 const boundRect = state._bounds.getBoundingClientRect(); 38262 38263 const targetRect = state.currentTarget.getBoundingClientRect(); 38264 const _bounds = { 38265 left: boundRect.left - targetRect.left + state.offset[0], 38266 right: boundRect.right - targetRect.right + state.offset[0], 38267 top: boundRect.top - targetRect.top + state.offset[1], 38268 bottom: boundRect.bottom - targetRect.bottom + state.offset[1] 38269 }; 38270 state._bounds = coordinatesConfigResolver.bounds(_bounds); 38271 } 38272 } 38273 38274 cancel() { 38275 const state = this.state; 38276 if (state.canceled) return; 38277 state.canceled = true; 38278 state._active = false; 38279 setTimeout(() => { 38280 this.compute(); 38281 this.emit(); 38282 }, 0); 38283 } 38284 38285 setActive() { 38286 this.state._active = this.state._pointerActive || this.state._keyboardActive; 38287 } 38288 38289 clean() { 38290 this.pointerClean(); 38291 this.state._pointerActive = false; 38292 this.state._keyboardActive = false; 38293 super.clean(); 38294 } 38295 38296 pointerDown(event) { 38297 const config = this.config; 38298 const state = this.state; 38299 if (event.buttons != null && (Array.isArray(config.pointerButtons) ? !config.pointerButtons.includes(event.buttons) : config.pointerButtons !== -1 && config.pointerButtons !== event.buttons)) return; 38300 this.ctrl.setEventIds(event); 38301 38302 if (config.pointerCapture) { 38303 event.target.setPointerCapture(event.pointerId); 38304 } 38305 38306 if (state._pointerActive) return; 38307 this.start(event); 38308 this.setupPointer(event); 38309 state._pointerId = pointerId(event); 38310 state._pointerActive = true; 38311 this.computeValues(pointerValues(event)); 38312 this.computeInitial(); 38313 38314 if (config.preventScrollAxis && getPointerType(event) !== 'mouse') { 38315 state._active = false; 38316 this.setupScrollPrevention(event); 38317 } else if (config.delay > 0) { 38318 this.setupDelayTrigger(event); 38319 38320 if (config.triggerAllEvents) { 38321 this.compute(event); 38322 this.emit(); 38323 } 38324 } else { 38325 this.startPointerDrag(event); 38326 } 38327 } 38328 38329 startPointerDrag(event) { 38330 const state = this.state; 38331 state._active = true; 38332 state._preventScroll = true; 38333 state._delayed = false; 38334 this.compute(event); 38335 this.emit(); 38336 } 38337 38338 pointerMove(event) { 38339 const state = this.state; 38340 const config = this.config; 38341 if (!state._pointerActive) return; 38342 if (state.type === event.type && event.timeStamp === state.timeStamp) return; 38343 const id = pointerId(event); 38344 if (state._pointerId !== undefined && id !== state._pointerId) return; 38345 38346 const _values = pointerValues(event); 38347 38348 if (document.pointerLockElement === event.target) { 38349 state._delta = [event.movementX, event.movementY]; 38350 } else { 38351 state._delta = V.sub(_values, state._values); 38352 this.computeValues(_values); 38353 } 38354 38355 V.addTo(state._movement, state._delta); 38356 this.compute(event); 38357 38358 if (state._delayed && state.intentional) { 38359 this.timeoutStore.remove('dragDelay'); 38360 state.active = false; 38361 this.startPointerDrag(event); 38362 return; 38363 } 38364 38365 if (config.preventScrollAxis && !state._preventScroll) { 38366 if (state.axis) { 38367 if (state.axis === config.preventScrollAxis || config.preventScrollAxis === 'xy') { 38368 state._active = false; 38369 this.clean(); 38370 return; 38371 } else { 38372 this.timeoutStore.remove('startPointerDrag'); 38373 this.startPointerDrag(event); 38374 return; 38375 } 38376 } else { 38377 return; 38378 } 38379 } 38380 38381 this.emit(); 38382 } 38383 38384 pointerUp(event) { 38385 this.ctrl.setEventIds(event); 38386 38387 try { 38388 if (this.config.pointerCapture && event.target.hasPointerCapture(event.pointerId)) { 38389 ; 38390 event.target.releasePointerCapture(event.pointerId); 38391 } 38392 } catch (_unused) { 38393 if (false) {} 38394 } 38395 38396 const state = this.state; 38397 const config = this.config; 38398 if (!state._active || !state._pointerActive) return; 38399 const id = pointerId(event); 38400 if (state._pointerId !== undefined && id !== state._pointerId) return; 38401 this.state._pointerActive = false; 38402 this.setActive(); 38403 this.compute(event); 38404 const [dx, dy] = state._distance; 38405 state.tap = dx <= config.tapsThreshold && dy <= config.tapsThreshold; 38406 38407 if (state.tap && config.filterTaps) { 38408 state._force = true; 38409 } else { 38410 const [dirx, diry] = state.direction; 38411 const [vx, vy] = state.velocity; 38412 const [mx, my] = state.movement; 38413 const [svx, svy] = config.swipe.velocity; 38414 const [sx, sy] = config.swipe.distance; 38415 const sdt = config.swipe.duration; 38416 38417 if (state.elapsedTime < sdt) { 38418 if (Math.abs(vx) > svx && Math.abs(mx) > sx) state.swipe[0] = dirx; 38419 if (Math.abs(vy) > svy && Math.abs(my) > sy) state.swipe[1] = diry; 38420 } 38421 } 38422 38423 this.emit(); 38424 } 38425 38426 pointerClick(event) { 38427 if (!this.state.tap) { 38428 event.preventDefault(); 38429 event.stopPropagation(); 38430 } 38431 } 38432 38433 setupPointer(event) { 38434 const config = this.config; 38435 const device = config.device; 38436 38437 if (false) {} 38438 38439 if (config.pointerLock) { 38440 event.currentTarget.requestPointerLock(); 38441 } 38442 38443 if (!config.pointerCapture) { 38444 this.eventStore.add(this.sharedConfig.window, device, 'change', this.pointerMove.bind(this)); 38445 this.eventStore.add(this.sharedConfig.window, device, 'end', this.pointerUp.bind(this)); 38446 this.eventStore.add(this.sharedConfig.window, device, 'cancel', this.pointerUp.bind(this)); 38447 } 38448 } 38449 38450 pointerClean() { 38451 if (this.config.pointerLock && document.pointerLockElement === this.state.currentTarget) { 38452 document.exitPointerLock(); 38453 } 38454 } 38455 38456 preventScroll(event) { 38457 if (this.state._preventScroll && event.cancelable) { 38458 event.preventDefault(); 38459 } 38460 } 38461 38462 setupScrollPrevention(event) { 38463 persistEvent(event); 38464 this.eventStore.add(this.sharedConfig.window, 'touch', 'change', this.preventScroll.bind(this), { 38465 passive: false 38466 }); 38467 this.eventStore.add(this.sharedConfig.window, 'touch', 'end', this.clean.bind(this)); 38468 this.eventStore.add(this.sharedConfig.window, 'touch', 'cancel', this.clean.bind(this)); 38469 this.timeoutStore.add('startPointerDrag', this.startPointerDrag.bind(this), this.config.preventScrollDelay, event); 38470 } 38471 38472 setupDelayTrigger(event) { 38473 this.state._delayed = true; 38474 this.timeoutStore.add('dragDelay', () => { 38475 this.state._step = [0, 0]; 38476 this.startPointerDrag(event); 38477 }, this.config.delay); 38478 } 38479 38480 keyDown(event) { 38481 const deltaFn = KEYS_DELTA_MAP[event.key]; 38482 38483 if (deltaFn) { 38484 const state = this.state; 38485 const factor = event.shiftKey ? 10 : event.altKey ? 0.1 : 1; 38486 state._delta = deltaFn(factor); 38487 this.start(event); 38488 state._keyboardActive = true; 38489 V.addTo(state._movement, state._delta); 38490 this.compute(event); 38491 this.emit(); 38492 } 38493 } 38494 38495 keyUp(event) { 38496 if (!(event.key in KEYS_DELTA_MAP)) return; 38497 this.state._keyboardActive = false; 38498 this.setActive(); 38499 this.compute(event); 38500 this.emit(); 38501 } 38502 38503 bind(bindFunction) { 38504 const device = this.config.device; 38505 bindFunction(device, 'start', this.pointerDown.bind(this)); 38506 38507 if (this.config.pointerCapture) { 38508 bindFunction(device, 'change', this.pointerMove.bind(this)); 38509 bindFunction(device, 'end', this.pointerUp.bind(this)); 38510 bindFunction(device, 'cancel', this.pointerUp.bind(this)); 38511 bindFunction('lostPointerCapture', '', this.pointerUp.bind(this)); 38512 } 38513 38514 bindFunction('key', 'down', this.keyDown.bind(this)); 38515 bindFunction('key', 'up', this.keyUp.bind(this)); 38516 38517 if (this.config.filterTaps) { 38518 bindFunction('click', '', this.pointerClick.bind(this), { 38519 capture: true, 38520 passive: false 38521 }); 38522 } 38523 } 38524 38525 } 38526 38527 function persistEvent(event) { 38528 'persist' in event && typeof event.persist === 'function' && event.persist(); 38529 } 38530 38531 const actions_8e12537b_esm_isBrowser = typeof window !== 'undefined' && window.document && window.document.createElement; 38532 38533 function actions_8e12537b_esm_supportsTouchEvents() { 38534 return actions_8e12537b_esm_isBrowser && 'ontouchstart' in window; 38535 } 38536 38537 function isTouchScreen() { 38538 return actions_8e12537b_esm_supportsTouchEvents() || actions_8e12537b_esm_isBrowser && window.navigator.maxTouchPoints > 1; 38539 } 38540 38541 function actions_8e12537b_esm_supportsPointerEvents() { 38542 return actions_8e12537b_esm_isBrowser && 'onpointerdown' in window; 38543 } 38544 38545 function supportsPointerLock() { 38546 return actions_8e12537b_esm_isBrowser && 'exitPointerLock' in window.document; 38547 } 38548 38549 function supportsGestureEvents() { 38550 try { 38551 return 'constructor' in GestureEvent; 38552 } catch (e) { 38553 return false; 38554 } 38555 } 38556 38557 const SUPPORT = { 38558 isBrowser: actions_8e12537b_esm_isBrowser, 38559 gesture: supportsGestureEvents(), 38560 touch: isTouchScreen(), 38561 touchscreen: isTouchScreen(), 38562 pointer: actions_8e12537b_esm_supportsPointerEvents(), 38563 pointerLock: supportsPointerLock() 38564 }; 38565 38566 const DEFAULT_PREVENT_SCROLL_DELAY = 250; 38567 const DEFAULT_DRAG_DELAY = 180; 38568 const DEFAULT_SWIPE_VELOCITY = 0.5; 38569 const DEFAULT_SWIPE_DISTANCE = 50; 38570 const DEFAULT_SWIPE_DURATION = 250; 38571 const DEFAULT_DRAG_AXIS_THRESHOLD = { 38572 mouse: 0, 38573 touch: 0, 38574 pen: 8 38575 }; 38576 const dragConfigResolver = actions_8e12537b_esm_objectSpread2(actions_8e12537b_esm_objectSpread2({}, coordinatesConfigResolver), {}, { 38577 device(_v, _k, { 38578 pointer: { 38579 touch = false, 38580 lock = false, 38581 mouse = false 38582 } = {} 38583 }) { 38584 this.pointerLock = lock && SUPPORT.pointerLock; 38585 if (SUPPORT.touch && touch) return 'touch'; 38586 if (this.pointerLock) return 'mouse'; 38587 if (SUPPORT.pointer && !mouse) return 'pointer'; 38588 if (SUPPORT.touch) return 'touch'; 38589 return 'mouse'; 38590 }, 38591 38592 preventScrollAxis(value, _k, { 38593 preventScroll 38594 }) { 38595 this.preventScrollDelay = typeof preventScroll === 'number' ? preventScroll : preventScroll || preventScroll === undefined && value ? DEFAULT_PREVENT_SCROLL_DELAY : undefined; 38596 if (!SUPPORT.touchscreen || preventScroll === false) return undefined; 38597 return value ? value : preventScroll !== undefined ? 'y' : undefined; 38598 }, 38599 38600 pointerCapture(_v, _k, { 38601 pointer: { 38602 capture = true, 38603 buttons = 1 38604 } = {} 38605 }) { 38606 this.pointerButtons = buttons; 38607 return !this.pointerLock && this.device === 'pointer' && capture; 38608 }, 38609 38610 threshold(value, _k, { 38611 filterTaps = false, 38612 tapsThreshold = 3, 38613 axis = undefined 38614 }) { 38615 const threshold = V.toVector(value, filterTaps ? tapsThreshold : axis ? 1 : 0); 38616 this.filterTaps = filterTaps; 38617 this.tapsThreshold = tapsThreshold; 38618 return threshold; 38619 }, 38620 38621 swipe({ 38622 velocity = DEFAULT_SWIPE_VELOCITY, 38623 distance = DEFAULT_SWIPE_DISTANCE, 38624 duration = DEFAULT_SWIPE_DURATION 38625 } = {}) { 38626 return { 38627 velocity: this.transform(V.toVector(velocity)), 38628 distance: this.transform(V.toVector(distance)), 38629 duration 38630 }; 38631 }, 38632 38633 delay(value = 0) { 38634 switch (value) { 38635 case true: 38636 return DEFAULT_DRAG_DELAY; 38637 38638 case false: 38639 return 0; 38640 38641 default: 38642 return value; 38643 } 38644 }, 38645 38646 axisThreshold(value) { 38647 if (!value) return DEFAULT_DRAG_AXIS_THRESHOLD; 38648 return actions_8e12537b_esm_objectSpread2(actions_8e12537b_esm_objectSpread2({}, DEFAULT_DRAG_AXIS_THRESHOLD), value); 38649 } 38650 38651 }); 38652 38653 if (false) {} 38654 38655 const SCALE_ANGLE_RATIO_INTENT_DEG = 30; 38656 const PINCH_WHEEL_RATIO = 100; 38657 class PinchEngine extends Engine { 38658 constructor(...args) { 38659 super(...args); 38660 38661 actions_8e12537b_esm_defineProperty(this, "ingKey", 'pinching'); 38662 38663 actions_8e12537b_esm_defineProperty(this, "aliasKey", 'da'); 38664 } 38665 38666 init() { 38667 this.state.offset = [1, 0]; 38668 this.state.lastOffset = [1, 0]; 38669 this.state._pointerEvents = new Map(); 38670 } 38671 38672 reset() { 38673 super.reset(); 38674 const state = this.state; 38675 state._touchIds = []; 38676 state.canceled = false; 38677 state.cancel = this.cancel.bind(this); 38678 state.turns = 0; 38679 } 38680 38681 computeOffset() { 38682 const { 38683 type, 38684 movement, 38685 lastOffset 38686 } = this.state; 38687 38688 if (type === 'wheel') { 38689 this.state.offset = V.add(movement, lastOffset); 38690 } else { 38691 this.state.offset = [(1 + movement[0]) * lastOffset[0], movement[1] + lastOffset[1]]; 38692 } 38693 } 38694 38695 computeMovement() { 38696 const { 38697 offset, 38698 lastOffset 38699 } = this.state; 38700 this.state.movement = [offset[0] / lastOffset[0], offset[1] - lastOffset[1]]; 38701 } 38702 38703 axisIntent() { 38704 const state = this.state; 38705 const [_m0, _m1] = state._movement; 38706 38707 if (!state.axis) { 38708 const axisMovementDifference = Math.abs(_m0) * SCALE_ANGLE_RATIO_INTENT_DEG - Math.abs(_m1); 38709 if (axisMovementDifference < 0) state.axis = 'angle';else if (axisMovementDifference > 0) state.axis = 'scale'; 38710 } 38711 } 38712 38713 restrictToAxis(v) { 38714 if (this.config.lockDirection) { 38715 if (this.state.axis === 'scale') v[1] = 0;else if (this.state.axis === 'angle') v[0] = 0; 38716 } 38717 } 38718 38719 cancel() { 38720 const state = this.state; 38721 if (state.canceled) return; 38722 setTimeout(() => { 38723 state.canceled = true; 38724 state._active = false; 38725 this.compute(); 38726 this.emit(); 38727 }, 0); 38728 } 38729 38730 touchStart(event) { 38731 this.ctrl.setEventIds(event); 38732 const state = this.state; 38733 const ctrlTouchIds = this.ctrl.touchIds; 38734 38735 if (state._active) { 38736 if (state._touchIds.every(id => ctrlTouchIds.has(id))) return; 38737 } 38738 38739 if (ctrlTouchIds.size < 2) return; 38740 this.start(event); 38741 state._touchIds = Array.from(ctrlTouchIds).slice(0, 2); 38742 const payload = touchDistanceAngle(event, state._touchIds); 38743 this.pinchStart(event, payload); 38744 } 38745 38746 pointerStart(event) { 38747 if (event.buttons != null && event.buttons % 2 !== 1) return; 38748 this.ctrl.setEventIds(event); 38749 event.target.setPointerCapture(event.pointerId); 38750 const state = this.state; 38751 const _pointerEvents = state._pointerEvents; 38752 const ctrlPointerIds = this.ctrl.pointerIds; 38753 38754 if (state._active) { 38755 if (Array.from(_pointerEvents.keys()).every(id => ctrlPointerIds.has(id))) return; 38756 } 38757 38758 if (_pointerEvents.size < 2) { 38759 _pointerEvents.set(event.pointerId, event); 38760 } 38761 38762 if (state._pointerEvents.size < 2) return; 38763 this.start(event); 38764 const payload = distanceAngle(...Array.from(_pointerEvents.values())); 38765 this.pinchStart(event, payload); 38766 } 38767 38768 pinchStart(event, payload) { 38769 const state = this.state; 38770 state.origin = payload.origin; 38771 this.computeValues([payload.distance, payload.angle]); 38772 this.computeInitial(); 38773 this.compute(event); 38774 this.emit(); 38775 } 38776 38777 touchMove(event) { 38778 if (!this.state._active) return; 38779 const payload = touchDistanceAngle(event, this.state._touchIds); 38780 this.pinchMove(event, payload); 38781 } 38782 38783 pointerMove(event) { 38784 const _pointerEvents = this.state._pointerEvents; 38785 38786 if (_pointerEvents.has(event.pointerId)) { 38787 _pointerEvents.set(event.pointerId, event); 38788 } 38789 38790 if (!this.state._active) return; 38791 const payload = distanceAngle(...Array.from(_pointerEvents.values())); 38792 this.pinchMove(event, payload); 38793 } 38794 38795 pinchMove(event, payload) { 38796 const state = this.state; 38797 const prev_a = state._values[1]; 38798 const delta_a = payload.angle - prev_a; 38799 let delta_turns = 0; 38800 if (Math.abs(delta_a) > 270) delta_turns += Math.sign(delta_a); 38801 this.computeValues([payload.distance, payload.angle - 360 * delta_turns]); 38802 state.origin = payload.origin; 38803 state.turns = delta_turns; 38804 state._movement = [state._values[0] / state._initial[0] - 1, state._values[1] - state._initial[1]]; 38805 this.compute(event); 38806 this.emit(); 38807 } 38808 38809 touchEnd(event) { 38810 this.ctrl.setEventIds(event); 38811 if (!this.state._active) return; 38812 38813 if (this.state._touchIds.some(id => !this.ctrl.touchIds.has(id))) { 38814 this.state._active = false; 38815 this.compute(event); 38816 this.emit(); 38817 } 38818 } 38819 38820 pointerEnd(event) { 38821 const state = this.state; 38822 this.ctrl.setEventIds(event); 38823 38824 try { 38825 event.target.releasePointerCapture(event.pointerId); 38826 } catch (_unused) {} 38827 38828 if (state._pointerEvents.has(event.pointerId)) { 38829 state._pointerEvents.delete(event.pointerId); 38830 } 38831 38832 if (!state._active) return; 38833 38834 if (state._pointerEvents.size < 2) { 38835 state._active = false; 38836 this.compute(event); 38837 this.emit(); 38838 } 38839 } 38840 38841 gestureStart(event) { 38842 if (event.cancelable) event.preventDefault(); 38843 const state = this.state; 38844 if (state._active) return; 38845 this.start(event); 38846 this.computeValues([event.scale, event.rotation]); 38847 state.origin = [event.clientX, event.clientY]; 38848 this.compute(event); 38849 this.emit(); 38850 } 38851 38852 gestureMove(event) { 38853 if (event.cancelable) event.preventDefault(); 38854 if (!this.state._active) return; 38855 const state = this.state; 38856 this.computeValues([event.scale, event.rotation]); 38857 state.origin = [event.clientX, event.clientY]; 38858 const _previousMovement = state._movement; 38859 state._movement = [event.scale - 1, event.rotation]; 38860 state._delta = V.sub(state._movement, _previousMovement); 38861 this.compute(event); 38862 this.emit(); 38863 } 38864 38865 gestureEnd(event) { 38866 if (!this.state._active) return; 38867 this.state._active = false; 38868 this.compute(event); 38869 this.emit(); 38870 } 38871 38872 wheel(event) { 38873 const modifierKey = this.config.modifierKey; 38874 if (modifierKey && !event[modifierKey]) return; 38875 if (!this.state._active) this.wheelStart(event);else this.wheelChange(event); 38876 this.timeoutStore.add('wheelEnd', this.wheelEnd.bind(this)); 38877 } 38878 38879 wheelStart(event) { 38880 this.start(event); 38881 this.wheelChange(event); 38882 } 38883 38884 wheelChange(event) { 38885 const isR3f = ('uv' in event); 38886 38887 if (!isR3f) { 38888 if (event.cancelable) { 38889 event.preventDefault(); 38890 } 38891 38892 if (false) {} 38893 } 38894 38895 const state = this.state; 38896 state._delta = [-wheelValues(event)[1] / PINCH_WHEEL_RATIO * state.offset[0], 0]; 38897 V.addTo(state._movement, state._delta); 38898 this.state.origin = [event.clientX, event.clientY]; 38899 this.compute(event); 38900 this.emit(); 38901 } 38902 38903 wheelEnd() { 38904 if (!this.state._active) return; 38905 this.state._active = false; 38906 this.compute(); 38907 this.emit(); 38908 } 38909 38910 bind(bindFunction) { 38911 const device = this.config.device; 38912 38913 if (!!device) { 38914 bindFunction(device, 'start', this[device + 'Start'].bind(this)); 38915 bindFunction(device, 'change', this[device + 'Move'].bind(this)); 38916 bindFunction(device, 'end', this[device + 'End'].bind(this)); 38917 bindFunction(device, 'cancel', this[device + 'End'].bind(this)); 38918 } else { 38919 bindFunction('wheel', '', this.wheel.bind(this), { 38920 passive: false 38921 }); 38922 } 38923 } 38924 38925 } 38926 38927 const pinchConfigResolver = actions_8e12537b_esm_objectSpread2(actions_8e12537b_esm_objectSpread2({}, commonConfigResolver), {}, { 38928 device(_v, _k, { 38929 shared, 38930 pointer: { 38931 touch = false 38932 } = {} 38933 }) { 38934 const sharedConfig = shared; 38935 if (sharedConfig.target && !SUPPORT.touch && SUPPORT.gesture) return 'gesture'; 38936 if (SUPPORT.touch && touch) return 'touch'; 38937 38938 if (SUPPORT.touchscreen) { 38939 if (SUPPORT.pointer) return 'pointer'; 38940 if (SUPPORT.touch) return 'touch'; 38941 } 38942 }, 38943 38944 bounds(_v, _k, { 38945 scaleBounds = {}, 38946 angleBounds = {} 38947 }) { 38948 const _scaleBounds = state => { 38949 const D = assignDefault(call(scaleBounds, state), { 38950 min: -Infinity, 38951 max: Infinity 38952 }); 38953 return [D.min, D.max]; 38954 }; 38955 38956 const _angleBounds = state => { 38957 const A = assignDefault(call(angleBounds, state), { 38958 min: -Infinity, 38959 max: Infinity 38960 }); 38961 return [A.min, A.max]; 38962 }; 38963 38964 if (typeof scaleBounds !== 'function' && typeof angleBounds !== 'function') return [_scaleBounds(), _angleBounds()]; 38965 return state => [_scaleBounds(state), _angleBounds(state)]; 38966 }, 38967 38968 threshold(value, _k, config) { 38969 this.lockDirection = config.axis === 'lock'; 38970 const threshold = V.toVector(value, this.lockDirection ? [0.1, 3] : 0); 38971 return threshold; 38972 }, 38973 38974 modifierKey(value) { 38975 if (value === undefined) return 'ctrlKey'; 38976 return value; 38977 } 38978 38979 }); 38980 38981 class MoveEngine extends CoordinatesEngine { 38982 constructor(...args) { 38983 super(...args); 38984 38985 actions_8e12537b_esm_defineProperty(this, "ingKey", 'moving'); 38986 } 38987 38988 move(event) { 38989 if (this.config.mouseOnly && event.pointerType !== 'mouse') return; 38990 if (!this.state._active) this.moveStart(event);else this.moveChange(event); 38991 this.timeoutStore.add('moveEnd', this.moveEnd.bind(this)); 38992 } 38993 38994 moveStart(event) { 38995 this.start(event); 38996 this.computeValues(pointerValues(event)); 38997 this.compute(event); 38998 this.computeInitial(); 38999 this.emit(); 39000 } 39001 39002 moveChange(event) { 39003 if (!this.state._active) return; 39004 const values = pointerValues(event); 39005 const state = this.state; 39006 state._delta = V.sub(values, state._values); 39007 V.addTo(state._movement, state._delta); 39008 this.computeValues(values); 39009 this.compute(event); 39010 this.emit(); 39011 } 39012 39013 moveEnd(event) { 39014 if (!this.state._active) return; 39015 this.state._active = false; 39016 this.compute(event); 39017 this.emit(); 39018 } 39019 39020 bind(bindFunction) { 39021 bindFunction('pointer', 'change', this.move.bind(this)); 39022 bindFunction('pointer', 'leave', this.moveEnd.bind(this)); 39023 } 39024 39025 } 39026 39027 const moveConfigResolver = actions_8e12537b_esm_objectSpread2(actions_8e12537b_esm_objectSpread2({}, coordinatesConfigResolver), {}, { 39028 mouseOnly: (value = true) => value 39029 }); 39030 39031 class ScrollEngine extends CoordinatesEngine { 39032 constructor(...args) { 39033 super(...args); 39034 39035 actions_8e12537b_esm_defineProperty(this, "ingKey", 'scrolling'); 39036 } 39037 39038 scroll(event) { 39039 if (!this.state._active) this.start(event); 39040 this.scrollChange(event); 39041 this.timeoutStore.add('scrollEnd', this.scrollEnd.bind(this)); 39042 } 39043 39044 scrollChange(event) { 39045 if (event.cancelable) event.preventDefault(); 39046 const state = this.state; 39047 const values = scrollValues(event); 39048 state._delta = V.sub(values, state._values); 39049 V.addTo(state._movement, state._delta); 39050 this.computeValues(values); 39051 this.compute(event); 39052 this.emit(); 39053 } 39054 39055 scrollEnd() { 39056 if (!this.state._active) return; 39057 this.state._active = false; 39058 this.compute(); 39059 this.emit(); 39060 } 39061 39062 bind(bindFunction) { 39063 bindFunction('scroll', '', this.scroll.bind(this)); 39064 } 39065 39066 } 39067 39068 const scrollConfigResolver = coordinatesConfigResolver; 39069 39070 class WheelEngine extends CoordinatesEngine { 39071 constructor(...args) { 39072 super(...args); 39073 39074 actions_8e12537b_esm_defineProperty(this, "ingKey", 'wheeling'); 39075 } 39076 39077 wheel(event) { 39078 if (!this.state._active) this.start(event); 39079 this.wheelChange(event); 39080 this.timeoutStore.add('wheelEnd', this.wheelEnd.bind(this)); 39081 } 39082 39083 wheelChange(event) { 39084 const state = this.state; 39085 state._delta = wheelValues(event); 39086 V.addTo(state._movement, state._delta); 39087 const [ox, oy] = state.overflow; 39088 const [dx, dy] = state._delta; 39089 const [dirx, diry] = state._direction; 39090 39091 if (ox < 0 && dx > 0 && dirx < 0 || ox > 0 && dx < 0 && dirx > 0) { 39092 state._movement[0] = state._movementBound[0]; 39093 } 39094 39095 if (oy < 0 && dy > 0 && diry < 0 || oy > 0 && dy < 0 && diry > 0) { 39096 state._movement[1] = state._movementBound[1]; 39097 } 39098 39099 this.compute(event); 39100 this.emit(); 39101 } 39102 39103 wheelEnd() { 39104 if (!this.state._active) return; 39105 this.state._active = false; 39106 this.compute(); 39107 this.emit(); 39108 } 39109 39110 bind(bindFunction) { 39111 bindFunction('wheel', '', this.wheel.bind(this)); 39112 } 39113 39114 } 39115 39116 const wheelConfigResolver = coordinatesConfigResolver; 39117 39118 class HoverEngine extends CoordinatesEngine { 39119 constructor(...args) { 39120 super(...args); 39121 39122 actions_8e12537b_esm_defineProperty(this, "ingKey", 'hovering'); 39123 } 39124 39125 enter(event) { 39126 if (this.config.mouseOnly && event.pointerType !== 'mouse') return; 39127 this.start(event); 39128 this.computeValues(pointerValues(event)); 39129 this.compute(event); 39130 this.emit(); 39131 } 39132 39133 leave(event) { 39134 if (this.config.mouseOnly && event.pointerType !== 'mouse') return; 39135 const state = this.state; 39136 if (!state._active) return; 39137 state._active = false; 39138 const values = pointerValues(event); 39139 state._movement = state._delta = V.sub(values, state._values); 39140 this.computeValues(values); 39141 this.compute(event); 39142 state.delta = state.movement; 39143 this.emit(); 39144 } 39145 39146 bind(bindFunction) { 39147 bindFunction('pointer', 'enter', this.enter.bind(this)); 39148 bindFunction('pointer', 'leave', this.leave.bind(this)); 39149 } 39150 39151 } 39152 39153 const hoverConfigResolver = actions_8e12537b_esm_objectSpread2(actions_8e12537b_esm_objectSpread2({}, coordinatesConfigResolver), {}, { 39154 mouseOnly: (value = true) => value 39155 }); 39156 39157 const actions_8e12537b_esm_EngineMap = new Map(); 39158 const ConfigResolverMap = new Map(); 39159 function actions_8e12537b_esm_registerAction(action) { 39160 actions_8e12537b_esm_EngineMap.set(action.key, action.engine); 39161 ConfigResolverMap.set(action.key, action.resolver); 39162 } 39163 const actions_8e12537b_esm_dragAction = { 39164 key: 'drag', 39165 engine: DragEngine, 39166 resolver: dragConfigResolver 39167 }; 39168 const actions_8e12537b_esm_hoverAction = { 39169 key: 'hover', 39170 engine: HoverEngine, 39171 resolver: hoverConfigResolver 39172 }; 39173 const actions_8e12537b_esm_moveAction = { 39174 key: 'move', 39175 engine: MoveEngine, 39176 resolver: moveConfigResolver 39177 }; 39178 const actions_8e12537b_esm_pinchAction = { 39179 key: 'pinch', 39180 engine: PinchEngine, 39181 resolver: pinchConfigResolver 39182 }; 39183 const actions_8e12537b_esm_scrollAction = { 39184 key: 'scroll', 39185 engine: ScrollEngine, 39186 resolver: scrollConfigResolver 39187 }; 39188 const actions_8e12537b_esm_wheelAction = { 39189 key: 'wheel', 39190 engine: WheelEngine, 39191 resolver: wheelConfigResolver 39192 }; 39193 39194 39195 39196 ;// CONCATENATED MODULE: ./node_modules/@use-gesture/core/dist/use-gesture-core.esm.js 39197 39198 39199 39200 function use_gesture_core_esm_objectWithoutPropertiesLoose(source, excluded) { 39201 if (source == null) return {}; 39202 var target = {}; 39203 var sourceKeys = Object.keys(source); 39204 var key, i; 39205 39206 for (i = 0; i < sourceKeys.length; i++) { 39207 key = sourceKeys[i]; 39208 if (excluded.indexOf(key) >= 0) continue; 39209 target[key] = source[key]; 39210 } 39211 39212 return target; 39213 } 39214 39215 function _objectWithoutProperties(source, excluded) { 39216 if (source == null) return {}; 39217 var target = use_gesture_core_esm_objectWithoutPropertiesLoose(source, excluded); 39218 var key, i; 39219 39220 if (Object.getOwnPropertySymbols) { 39221 var sourceSymbolKeys = Object.getOwnPropertySymbols(source); 39222 39223 for (i = 0; i < sourceSymbolKeys.length; i++) { 39224 key = sourceSymbolKeys[i]; 39225 if (excluded.indexOf(key) >= 0) continue; 39226 if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; 39227 target[key] = source[key]; 39228 } 39229 } 39230 39231 return target; 39232 } 39233 39234 const sharedConfigResolver = { 39235 target(value) { 39236 if (value) { 39237 return () => 'current' in value ? value.current : value; 39238 } 39239 39240 return undefined; 39241 }, 39242 39243 enabled(value = true) { 39244 return value; 39245 }, 39246 39247 window(value = SUPPORT.isBrowser ? window : undefined) { 39248 return value; 39249 }, 39250 39251 eventOptions({ 39252 passive = true, 39253 capture = false 39254 } = {}) { 39255 return { 39256 passive, 39257 capture 39258 }; 39259 }, 39260 39261 transform(value) { 39262 return value; 39263 } 39264 39265 }; 39266 39267 const _excluded = ["target", "eventOptions", "window", "enabled", "transform"]; 39268 function resolveWith(config = {}, resolvers) { 39269 const result = {}; 39270 39271 for (const [key, resolver] of Object.entries(resolvers)) { 39272 switch (typeof resolver) { 39273 case 'function': 39274 if (false) {} else { 39275 result[key] = resolver.call(result, config[key], key, config); 39276 } 39277 39278 break; 39279 39280 case 'object': 39281 result[key] = resolveWith(config[key], resolver); 39282 break; 39283 39284 case 'boolean': 39285 if (resolver) result[key] = config[key]; 39286 break; 39287 } 39288 } 39289 39290 return result; 39291 } 39292 function use_gesture_core_esm_parse(config, gestureKey) { 39293 const _ref = config, 39294 { 39295 target, 39296 eventOptions, 39297 window, 39298 enabled, 39299 transform 39300 } = _ref, 39301 rest = _objectWithoutProperties(_ref, _excluded); 39302 39303 const _config = { 39304 shared: resolveWith({ 39305 target, 39306 eventOptions, 39307 window, 39308 enabled, 39309 transform 39310 }, sharedConfigResolver) 39311 }; 39312 39313 if (gestureKey) { 39314 const resolver = ConfigResolverMap.get(gestureKey); 39315 _config[gestureKey] = resolveWith(actions_8e12537b_esm_objectSpread2({ 39316 shared: _config.shared 39317 }, rest), resolver); 39318 } else { 39319 for (const key in rest) { 39320 const resolver = ConfigResolverMap.get(key); 39321 39322 if (resolver) { 39323 _config[key] = resolveWith(actions_8e12537b_esm_objectSpread2({ 39324 shared: _config.shared 39325 }, rest[key]), resolver); 39326 } else if (false) {} 39327 } 39328 } 39329 39330 return _config; 39331 } 39332 39333 class EventStore { 39334 constructor(ctrl) { 39335 actions_8e12537b_esm_defineProperty(this, "_listeners", []); 39336 39337 this._ctrl = ctrl; 39338 } 39339 39340 add(element, device, action, handler, options) { 39341 const type = toDomEventType(device, action); 39342 39343 const eventOptions = actions_8e12537b_esm_objectSpread2(actions_8e12537b_esm_objectSpread2({}, this._ctrl.config.shared.eventOptions), options); 39344 39345 element.addEventListener(type, handler, eventOptions); 39346 39347 this._listeners.push(() => element.removeEventListener(type, handler, eventOptions)); 39348 } 39349 39350 clean() { 39351 this._listeners.forEach(remove => remove()); 39352 39353 this._listeners = []; 39354 } 39355 39356 } 39357 39358 class TimeoutStore { 39359 constructor() { 39360 actions_8e12537b_esm_defineProperty(this, "_timeouts", new Map()); 39361 } 39362 39363 add(key, callback, ms = 140, ...args) { 39364 this.remove(key); 39365 39366 this._timeouts.set(key, window.setTimeout(callback, ms, ...args)); 39367 } 39368 39369 remove(key) { 39370 const timeout = this._timeouts.get(key); 39371 39372 if (timeout) window.clearTimeout(timeout); 39373 } 39374 39375 clean() { 39376 this._timeouts.forEach(timeout => void window.clearTimeout(timeout)); 39377 39378 this._timeouts.clear(); 39379 } 39380 39381 } 39382 39383 class Controller { 39384 constructor(handlers) { 39385 actions_8e12537b_esm_defineProperty(this, "gestures", new Set()); 39386 39387 actions_8e12537b_esm_defineProperty(this, "_targetEventStore", new EventStore(this)); 39388 39389 actions_8e12537b_esm_defineProperty(this, "gestureEventStores", {}); 39390 39391 actions_8e12537b_esm_defineProperty(this, "gestureTimeoutStores", {}); 39392 39393 actions_8e12537b_esm_defineProperty(this, "handlers", {}); 39394 39395 actions_8e12537b_esm_defineProperty(this, "config", {}); 39396 39397 actions_8e12537b_esm_defineProperty(this, "pointerIds", new Set()); 39398 39399 actions_8e12537b_esm_defineProperty(this, "touchIds", new Set()); 39400 39401 actions_8e12537b_esm_defineProperty(this, "state", { 39402 shared: { 39403 shiftKey: false, 39404 metaKey: false, 39405 ctrlKey: false, 39406 altKey: false 39407 } 39408 }); 39409 39410 resolveGestures(this, handlers); 39411 } 39412 39413 setEventIds(event) { 39414 if (isTouch(event)) { 39415 this.touchIds = new Set(touchIds(event)); 39416 } else if ('pointerId' in event) { 39417 if (event.type === 'pointerup' || event.type === 'pointercancel') this.pointerIds.delete(event.pointerId);else if (event.type === 'pointerdown') this.pointerIds.add(event.pointerId); 39418 } 39419 } 39420 39421 applyHandlers(handlers, nativeHandlers) { 39422 this.handlers = handlers; 39423 this.nativeHandlers = nativeHandlers; 39424 } 39425 39426 applyConfig(config, gestureKey) { 39427 this.config = use_gesture_core_esm_parse(config, gestureKey); 39428 } 39429 39430 clean() { 39431 this._targetEventStore.clean(); 39432 39433 for (const key of this.gestures) { 39434 this.gestureEventStores[key].clean(); 39435 this.gestureTimeoutStores[key].clean(); 39436 } 39437 } 39438 39439 effect() { 39440 if (this.config.shared.target) this.bind(); 39441 return () => this._targetEventStore.clean(); 39442 } 39443 39444 bind(...args) { 39445 const sharedConfig = this.config.shared; 39446 const eventOptions = sharedConfig.eventOptions; 39447 const props = {}; 39448 let target; 39449 39450 if (sharedConfig.target) { 39451 target = sharedConfig.target(); 39452 if (!target) return; 39453 } 39454 39455 const bindFunction = bindToProps(props, eventOptions, !!target); 39456 39457 if (sharedConfig.enabled) { 39458 for (const gestureKey of this.gestures) { 39459 if (this.config[gestureKey].enabled) { 39460 const Engine = actions_8e12537b_esm_EngineMap.get(gestureKey); 39461 new Engine(this, args, gestureKey).bind(bindFunction); 39462 } 39463 } 39464 39465 for (const eventKey in this.nativeHandlers) { 39466 bindFunction(eventKey, '', event => this.nativeHandlers[eventKey](actions_8e12537b_esm_objectSpread2(actions_8e12537b_esm_objectSpread2({}, this.state.shared), {}, { 39467 event, 39468 args 39469 })), undefined, true); 39470 } 39471 } 39472 39473 for (const handlerProp in props) { 39474 props[handlerProp] = chain(...props[handlerProp]); 39475 } 39476 39477 if (!target) return props; 39478 39479 for (const handlerProp in props) { 39480 const { 39481 device, 39482 capture, 39483 passive 39484 } = parseProp(handlerProp); 39485 39486 this._targetEventStore.add(target, device, '', props[handlerProp], { 39487 capture, 39488 passive 39489 }); 39490 } 39491 } 39492 39493 } 39494 39495 function setupGesture(ctrl, gestureKey) { 39496 ctrl.gestures.add(gestureKey); 39497 ctrl.gestureEventStores[gestureKey] = new EventStore(ctrl); 39498 ctrl.gestureTimeoutStores[gestureKey] = new TimeoutStore(); 39499 } 39500 39501 function resolveGestures(ctrl, internalHandlers) { 39502 if (internalHandlers.drag) setupGesture(ctrl, 'drag'); 39503 if (internalHandlers.wheel) setupGesture(ctrl, 'wheel'); 39504 if (internalHandlers.scroll) setupGesture(ctrl, 'scroll'); 39505 if (internalHandlers.move) setupGesture(ctrl, 'move'); 39506 if (internalHandlers.pinch) setupGesture(ctrl, 'pinch'); 39507 if (internalHandlers.hover) setupGesture(ctrl, 'hover'); 39508 } 39509 39510 const bindToProps = (props, eventOptions, withPassiveOption) => (device, action, handler, options = {}, isNative = false) => { 39511 var _options$capture, _options$passive; 39512 39513 const capture = (_options$capture = options.capture) !== null && _options$capture !== void 0 ? _options$capture : eventOptions.capture; 39514 const passive = (_options$passive = options.passive) !== null && _options$passive !== void 0 ? _options$passive : eventOptions.passive; 39515 let handlerProp = isNative ? device : toHandlerProp(device, action, capture); 39516 if (withPassiveOption && passive) handlerProp += 'Passive'; 39517 props[handlerProp] = props[handlerProp] || []; 39518 props[handlerProp].push(handler); 39519 }; 39520 39521 const RE_NOT_NATIVE = /^on(Drag|Wheel|Scroll|Move|Pinch|Hover)/; 39522 39523 function sortHandlers(_handlers) { 39524 const native = {}; 39525 const handlers = {}; 39526 const actions = new Set(); 39527 39528 for (let key in _handlers) { 39529 if (RE_NOT_NATIVE.test(key)) { 39530 actions.add(RegExp.lastMatch); 39531 handlers[key] = _handlers[key]; 39532 } else { 39533 native[key] = _handlers[key]; 39534 } 39535 } 39536 39537 return [handlers, native, actions]; 39538 } 39539 39540 function registerGesture(actions, handlers, handlerKey, key, internalHandlers, config) { 39541 if (!actions.has(handlerKey)) return; 39542 39543 if (!EngineMap.has(key)) { 39544 if (false) {} 39545 39546 return; 39547 } 39548 39549 const startKey = handlerKey + 'Start'; 39550 const endKey = handlerKey + 'End'; 39551 39552 const fn = state => { 39553 let memo = undefined; 39554 if (state.first && startKey in handlers) handlers[startKey](state); 39555 if (handlerKey in handlers) memo = handlers[handlerKey](state); 39556 if (state.last && endKey in handlers) handlers[endKey](state); 39557 return memo; 39558 }; 39559 39560 internalHandlers[key] = fn; 39561 config[key] = config[key] || {}; 39562 } 39563 39564 function use_gesture_core_esm_parseMergedHandlers(mergedHandlers, mergedConfig) { 39565 const [handlers, nativeHandlers, actions] = sortHandlers(mergedHandlers); 39566 const internalHandlers = {}; 39567 registerGesture(actions, handlers, 'onDrag', 'drag', internalHandlers, mergedConfig); 39568 registerGesture(actions, handlers, 'onWheel', 'wheel', internalHandlers, mergedConfig); 39569 registerGesture(actions, handlers, 'onScroll', 'scroll', internalHandlers, mergedConfig); 39570 registerGesture(actions, handlers, 'onPinch', 'pinch', internalHandlers, mergedConfig); 39571 registerGesture(actions, handlers, 'onMove', 'move', internalHandlers, mergedConfig); 39572 registerGesture(actions, handlers, 'onHover', 'hover', internalHandlers, mergedConfig); 39573 return { 39574 handlers: internalHandlers, 39575 config: mergedConfig, 39576 nativeHandlers 39577 }; 39578 } 39579 39580 39581 39582 ;// CONCATENATED MODULE: ./node_modules/@use-gesture/react/dist/use-gesture-react.esm.js 39583 39584 39585 39586 39587 39588 39589 39590 function useRecognizers(handlers, config = {}, gestureKey, nativeHandlers) { 39591 const ctrl = external_React_default().useMemo(() => new Controller(handlers), []); 39592 ctrl.applyHandlers(handlers, nativeHandlers); 39593 ctrl.applyConfig(config, gestureKey); 39594 external_React_default().useEffect(ctrl.effect.bind(ctrl)); 39595 external_React_default().useEffect(() => { 39596 return ctrl.clean.bind(ctrl); 39597 }, []); 39598 39599 if (config.target === undefined) { 39600 return ctrl.bind.bind(ctrl); 39601 } 39602 39603 return undefined; 39604 } 39605 39606 function use_gesture_react_esm_useDrag(handler, config) { 39607 actions_8e12537b_esm_registerAction(actions_8e12537b_esm_dragAction); 39608 return useRecognizers({ 39609 drag: handler 39610 }, config || {}, 'drag'); 39611 } 39612 39613 function usePinch(handler, config) { 39614 registerAction(pinchAction); 39615 return useRecognizers({ 39616 pinch: handler 39617 }, config || {}, 'pinch'); 39618 } 39619 39620 function useWheel(handler, config) { 39621 registerAction(wheelAction); 39622 return useRecognizers({ 39623 wheel: handler 39624 }, config || {}, 'wheel'); 39625 } 39626 39627 function useScroll(handler, config) { 39628 registerAction(scrollAction); 39629 return useRecognizers({ 39630 scroll: handler 39631 }, config || {}, 'scroll'); 39632 } 39633 39634 function useMove(handler, config) { 39635 registerAction(moveAction); 39636 return useRecognizers({ 39637 move: handler 39638 }, config || {}, 'move'); 39639 } 39640 39641 function useHover(handler, config) { 39642 actions_8e12537b_esm_registerAction(actions_8e12537b_esm_hoverAction); 39643 return useRecognizers({ 39644 hover: handler 39645 }, config || {}, 'hover'); 39646 } 39647 39648 function createUseGesture(actions) { 39649 actions.forEach(registerAction); 39650 return function useGesture(_handlers, _config) { 39651 const { 39652 handlers, 39653 nativeHandlers, 39654 config 39655 } = parseMergedHandlers(_handlers, _config || {}); 39656 return useRecognizers(handlers, config, undefined, nativeHandlers); 39657 }; 39658 } 39659 39660 function useGesture(handlers, config) { 39661 const hook = createUseGesture([dragAction, pinchAction, scrollAction, wheelAction, moveAction, hoverAction]); 39662 return hook(handlers, config || {}); 39663 } 39664 39665 39666 39667 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/input-control/utils.js 39668 /** 39669 * WordPress dependencies 39670 */ 39671 39672 /** 39673 * Gets a CSS cursor value based on a drag direction. 39674 * 39675 * @param dragDirection The drag direction. 39676 * @return The CSS cursor value. 39677 */ 39678 39679 function getDragCursor(dragDirection) { 39680 let dragCursor = 'ns-resize'; 39681 39682 switch (dragDirection) { 39683 case 'n': 39684 case 's': 39685 dragCursor = 'ns-resize'; 39686 break; 39687 39688 case 'e': 39689 case 'w': 39690 dragCursor = 'ew-resize'; 39691 break; 39692 } 39693 39694 return dragCursor; 39695 } 39696 /** 39697 * Custom hook that renders a drag cursor when dragging. 39698 * 39699 * @param {boolean} isDragging The dragging state. 39700 * @param {string} dragDirection The drag direction. 39701 * 39702 * @return {string} The CSS cursor value. 39703 */ 39704 39705 function useDragCursor(isDragging, dragDirection) { 39706 const dragCursor = getDragCursor(dragDirection); 39707 (0,external_wp_element_namespaceObject.useEffect)(() => { 39708 if (isDragging) { 39709 document.documentElement.style.cursor = dragCursor; 39710 } else { 39711 // @ts-expect-error 39712 document.documentElement.style.cursor = null; 39713 } 39714 }, [isDragging]); 39715 return dragCursor; 39716 } 39717 39718 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/input-control/reducer/state.js 39719 /** 39720 * External dependencies 39721 */ 39722 39723 /** 39724 * Internal dependencies 39725 */ 39726 const initialStateReducer = state => state; 39727 const initialInputControlState = { 39728 _event: {}, 39729 error: null, 39730 initialValue: '', 39731 isDirty: false, 39732 isDragEnabled: false, 39733 isDragging: false, 39734 isPressEnterToChange: false, 39735 value: '' 39736 }; 39737 39738 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/input-control/reducer/actions.js 39739 /** 39740 * External dependencies 39741 */ 39742 39743 /** 39744 * Internal dependencies 39745 */ 39746 const CHANGE = 'CHANGE'; 39747 const COMMIT = 'COMMIT'; 39748 const DRAG_END = 'DRAG_END'; 39749 const DRAG_START = 'DRAG_START'; 39750 const DRAG = 'DRAG'; 39751 const INVALIDATE = 'INVALIDATE'; 39752 const PRESS_DOWN = 'PRESS_DOWN'; 39753 const PRESS_ENTER = 'PRESS_ENTER'; 39754 const PRESS_UP = 'PRESS_UP'; 39755 const RESET = 'RESET'; 39756 39757 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/input-control/reducer/reducer.js 39758 /** 39759 * External dependencies 39760 */ 39761 39762 /** 39763 * WordPress dependencies 39764 */ 39765 39766 /** 39767 * Internal dependencies 39768 */ 39769 39770 39771 39772 /** 39773 * Prepares initialState for the reducer. 39774 * 39775 * @param initialState The initial state. 39776 * @return Prepared initialState for the reducer 39777 */ 39778 39779 function mergeInitialState() { 39780 let initialState = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : initialInputControlState; 39781 const { 39782 value 39783 } = initialState; 39784 return { ...initialInputControlState, 39785 ...initialState, 39786 initialValue: value 39787 }; 39788 } 39789 /** 39790 * Creates a reducer that opens the channel for external state subscription 39791 * and modification. 39792 * 39793 * This technique uses the "stateReducer" design pattern: 39794 * https://kentcdodds.com/blog/the-state-reducer-pattern/ 39795 * 39796 * @param composedStateReducers A custom reducer that can subscribe and modify state. 39797 * @return The reducer. 39798 */ 39799 39800 39801 function inputControlStateReducer(composedStateReducers) { 39802 return (state, action) => { 39803 const nextState = { ...state 39804 }; 39805 39806 switch (action.type) { 39807 /** 39808 * Keyboard events 39809 */ 39810 case PRESS_UP: 39811 nextState.isDirty = false; 39812 break; 39813 39814 case PRESS_DOWN: 39815 nextState.isDirty = false; 39816 break; 39817 39818 /** 39819 * Drag events 39820 */ 39821 39822 case DRAG_START: 39823 nextState.isDragging = true; 39824 break; 39825 39826 case DRAG_END: 39827 nextState.isDragging = false; 39828 break; 39829 39830 /** 39831 * Input events 39832 */ 39833 39834 case CHANGE: 39835 nextState.error = null; 39836 nextState.value = action.payload.value; 39837 39838 if (state.isPressEnterToChange) { 39839 nextState.isDirty = true; 39840 } 39841 39842 break; 39843 39844 case COMMIT: 39845 nextState.value = action.payload.value; 39846 nextState.isDirty = false; 39847 break; 39848 39849 case RESET: 39850 nextState.error = null; 39851 nextState.isDirty = false; 39852 nextState.value = action.payload.value || state.initialValue; 39853 break; 39854 39855 /** 39856 * Validation 39857 */ 39858 39859 case INVALIDATE: 39860 nextState.error = action.payload.error; 39861 break; 39862 } 39863 39864 if (action.payload.event) { 39865 nextState._event = action.payload.event; 39866 } 39867 /** 39868 * Send the nextState + action to the composedReducers via 39869 * this "bridge" mechanism. This allows external stateReducers 39870 * to hook into actions, and modify state if needed. 39871 */ 39872 39873 39874 return composedStateReducers(nextState, action); 39875 }; 39876 } 39877 /** 39878 * A custom hook that connects and external stateReducer with an internal 39879 * reducer. This hook manages the internal state of InputControl. 39880 * However, by connecting an external stateReducer function, other 39881 * components can react to actions as well as modify state before it is 39882 * applied. 39883 * 39884 * This technique uses the "stateReducer" design pattern: 39885 * https://kentcdodds.com/blog/the-state-reducer-pattern/ 39886 * 39887 * @param stateReducer An external state reducer. 39888 * @param initialState The initial state for the reducer. 39889 * @return State, dispatch, and a collection of actions. 39890 */ 39891 39892 39893 function useInputControlStateReducer() { 39894 let stateReducer = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : initialStateReducer; 39895 let initialState = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : initialInputControlState; 39896 const [state, dispatch] = (0,external_wp_element_namespaceObject.useReducer)(inputControlStateReducer(stateReducer), mergeInitialState(initialState)); 39897 39898 const createChangeEvent = type => (nextValue, event) => { 39899 /** 39900 * Persist allows for the (Synthetic) event to be used outside of 39901 * this function call. 39902 * https://reactjs.org/docs/events.html#event-pooling 39903 */ 39904 if (event && event.persist) { 39905 event.persist(); 39906 } 39907 39908 dispatch({ 39909 type, 39910 payload: { 39911 value: nextValue, 39912 event 39913 } 39914 }); 39915 }; 39916 39917 const createKeyEvent = type => event => { 39918 /** 39919 * Persist allows for the (Synthetic) event to be used outside of 39920 * this function call. 39921 * https://reactjs.org/docs/events.html#event-pooling 39922 */ 39923 if (event && event.persist) { 39924 event.persist(); 39925 } 39926 39927 dispatch({ 39928 type, 39929 payload: { 39930 event 39931 } 39932 }); 39933 }; 39934 39935 const createDragEvent = type => payload => { 39936 dispatch({ 39937 type, 39938 payload 39939 }); 39940 }; 39941 /** 39942 * Actions for the reducer 39943 */ 39944 39945 39946 const change = createChangeEvent(CHANGE); 39947 39948 const invalidate = (error, event) => dispatch({ 39949 type: INVALIDATE, 39950 payload: { 39951 error, 39952 event 39953 } 39954 }); 39955 39956 const reset = createChangeEvent(RESET); 39957 const commit = createChangeEvent(COMMIT); 39958 const dragStart = createDragEvent(DRAG_START); 39959 const drag = createDragEvent(DRAG); 39960 const dragEnd = createDragEvent(DRAG_END); 39961 const pressUp = createKeyEvent(PRESS_UP); 39962 const pressDown = createKeyEvent(PRESS_DOWN); 39963 const pressEnter = createKeyEvent(PRESS_ENTER); 39964 return { 39965 change, 39966 commit, 39967 dispatch, 39968 drag, 39969 dragEnd, 39970 dragStart, 39971 invalidate, 39972 pressDown, 39973 pressEnter, 39974 pressUp, 39975 reset, 39976 state 39977 }; 39978 } 39979 39980 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/utils/hooks/use-update-effect.js 39981 /** 39982 * WordPress dependencies 39983 */ 39984 39985 /** 39986 * A `React.useEffect` that will not run on the first render. 39987 * Source: 39988 * https://github.com/reakit/reakit/blob/HEAD/packages/reakit-utils/src/useUpdateEffect.ts 39989 * 39990 * @param {import('react').EffectCallback} effect 39991 * @param {import('react').DependencyList} deps 39992 */ 39993 39994 function use_update_effect_useUpdateEffect(effect, deps) { 39995 const mounted = (0,external_wp_element_namespaceObject.useRef)(false); 39996 (0,external_wp_element_namespaceObject.useEffect)(() => { 39997 if (mounted.current) { 39998 return effect(); 39999 } 40000 40001 mounted.current = true; 40002 return undefined; 40003 }, deps); 40004 } 40005 40006 /* harmony default export */ var use_update_effect = (use_update_effect_useUpdateEffect); 40007 40008 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/input-control/input-field.js 40009 40010 40011 40012 /** 40013 * External dependencies 40014 */ 40015 40016 40017 40018 /** 40019 * WordPress dependencies 40020 */ 40021 40022 /** 40023 * Internal dependencies 40024 */ 40025 40026 40027 40028 40029 40030 40031 function InputField(_ref, ref) { 40032 let { 40033 disabled = false, 40034 dragDirection = 'n', 40035 dragThreshold = 10, 40036 id, 40037 isDragEnabled = false, 40038 isFocused, 40039 isPressEnterToChange = false, 40040 onBlur = external_lodash_namespaceObject.noop, 40041 onChange = external_lodash_namespaceObject.noop, 40042 onDrag = external_lodash_namespaceObject.noop, 40043 onDragEnd = external_lodash_namespaceObject.noop, 40044 onDragStart = external_lodash_namespaceObject.noop, 40045 onFocus = external_lodash_namespaceObject.noop, 40046 onKeyDown = external_lodash_namespaceObject.noop, 40047 onValidate = external_lodash_namespaceObject.noop, 40048 size = 'default', 40049 setIsFocused, 40050 stateReducer = state => state, 40051 value: valueProp, 40052 type, 40053 ...props 40054 } = _ref; 40055 const { 40056 // State. 40057 state, 40058 // Actions. 40059 change, 40060 commit, 40061 drag, 40062 dragEnd, 40063 dragStart, 40064 invalidate, 40065 pressDown, 40066 pressEnter, 40067 pressUp, 40068 reset 40069 } = useInputControlStateReducer(stateReducer, { 40070 isDragEnabled, 40071 value: valueProp, 40072 isPressEnterToChange 40073 }); 40074 const { 40075 _event, 40076 value, 40077 isDragging, 40078 isDirty 40079 } = state; 40080 const wasDirtyOnBlur = (0,external_wp_element_namespaceObject.useRef)(false); 40081 const dragCursor = useDragCursor(isDragging, dragDirection); 40082 /* 40083 * Handles synchronization of external and internal value state. 40084 * If not focused and did not hold a dirty value[1] on blur 40085 * updates the value from the props. Otherwise if not holding 40086 * a dirty value[1] propagates the value and event through onChange. 40087 * [1] value is only made dirty if isPressEnterToChange is true 40088 */ 40089 40090 use_update_effect(() => { 40091 if (valueProp === value) { 40092 return; 40093 } 40094 40095 if (!isFocused && !wasDirtyOnBlur.current) { 40096 commit(valueProp, _event); 40097 } else if (!isDirty) { 40098 onChange(value, { 40099 event: _event 40100 }); 40101 wasDirtyOnBlur.current = false; 40102 } 40103 }, [value, isDirty, isFocused, valueProp]); 40104 40105 const handleOnBlur = event => { 40106 onBlur(event); 40107 setIsFocused === null || setIsFocused === void 0 ? void 0 : setIsFocused(false); 40108 /** 40109 * If isPressEnterToChange is set, this commits the value to 40110 * the onChange callback. 40111 */ 40112 40113 if (isDirty || !event.target.validity.valid) { 40114 wasDirtyOnBlur.current = true; 40115 handleOnCommit(event); 40116 } 40117 }; 40118 40119 const handleOnFocus = event => { 40120 onFocus(event); 40121 setIsFocused === null || setIsFocused === void 0 ? void 0 : setIsFocused(true); 40122 }; 40123 40124 const handleOnChange = event => { 40125 const nextValue = event.target.value; 40126 change(nextValue, event); 40127 }; 40128 40129 const handleOnCommit = event => { 40130 const nextValue = event.currentTarget.value; 40131 40132 try { 40133 onValidate(nextValue); 40134 commit(nextValue, event); 40135 } catch (err) { 40136 invalidate(err, event); 40137 } 40138 }; 40139 40140 const handleOnKeyDown = event => { 40141 const { 40142 key 40143 } = event; 40144 onKeyDown(event); 40145 40146 switch (key) { 40147 case 'ArrowUp': 40148 pressUp(event); 40149 break; 40150 40151 case 'ArrowDown': 40152 pressDown(event); 40153 break; 40154 40155 case 'Enter': 40156 pressEnter(event); 40157 40158 if (isPressEnterToChange) { 40159 event.preventDefault(); 40160 handleOnCommit(event); 40161 } 40162 40163 break; 40164 40165 case 'Escape': 40166 if (isPressEnterToChange && isDirty) { 40167 event.preventDefault(); 40168 reset(valueProp, event); 40169 } 40170 40171 break; 40172 } 40173 }; 40174 40175 const dragGestureProps = use_gesture_react_esm_useDrag(dragProps => { 40176 const { 40177 distance, 40178 dragging, 40179 event, 40180 target 40181 } = dragProps; // The `target` prop always references the `input` element while, by 40182 // default, the `dragProps.event.target` property would reference the real 40183 // event target (i.e. any DOM element that the pointer is hovering while 40184 // dragging). Ensuring that the `target` is always the `input` element 40185 // allows consumers of `InputControl` (or any higher-level control) to 40186 // check the input's validity by accessing `event.target.validity.valid`. 40187 40188 dragProps.event = { ...dragProps.event, 40189 target 40190 }; 40191 if (!distance) return; 40192 event.stopPropagation(); 40193 /** 40194 * Quick return if no longer dragging. 40195 * This prevents unnecessary value calculations. 40196 */ 40197 40198 if (!dragging) { 40199 onDragEnd(dragProps); 40200 dragEnd(dragProps); 40201 return; 40202 } 40203 40204 onDrag(dragProps); 40205 drag(dragProps); 40206 40207 if (!isDragging) { 40208 onDragStart(dragProps); 40209 dragStart(dragProps); 40210 } 40211 }, { 40212 axis: dragDirection === 'e' || dragDirection === 'w' ? 'x' : 'y', 40213 threshold: dragThreshold, 40214 enabled: isDragEnabled, 40215 pointer: { 40216 capture: false 40217 } 40218 }); 40219 const dragProps = isDragEnabled ? dragGestureProps() : {}; 40220 /* 40221 * Works around the odd UA (e.g. Firefox) that does not focus inputs of 40222 * type=number when their spinner arrows are pressed. 40223 */ 40224 40225 let handleOnMouseDown; 40226 40227 if (type === 'number') { 40228 handleOnMouseDown = event => { 40229 var _props$onMouseDown; 40230 40231 (_props$onMouseDown = props.onMouseDown) === null || _props$onMouseDown === void 0 ? void 0 : _props$onMouseDown.call(props, event); 40232 40233 if (event.currentTarget !== event.currentTarget.ownerDocument.activeElement) { 40234 event.currentTarget.focus(); 40235 } 40236 }; 40237 } 40238 40239 return (0,external_wp_element_namespaceObject.createElement)(Input, extends_extends({}, props, dragProps, { 40240 className: "components-input-control__input", 40241 disabled: disabled, 40242 dragCursor: dragCursor, 40243 isDragging: isDragging, 40244 id: id, 40245 onBlur: handleOnBlur, 40246 onChange: handleOnChange, 40247 onFocus: handleOnFocus, 40248 onKeyDown: handleOnKeyDown, 40249 onMouseDown: handleOnMouseDown, 40250 ref: ref, 40251 inputSize: size, 40252 value: value, 40253 type: type 40254 })); 40255 } 40256 40257 const ForwardedComponent = (0,external_wp_element_namespaceObject.forwardRef)(InputField); 40258 /* harmony default export */ var input_field = (ForwardedComponent); 40259 40260 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/input-control/index.js 40261 40262 40263 40264 /** 40265 * External dependencies 40266 */ 40267 40268 40269 40270 /** 40271 * WordPress dependencies 40272 */ 40273 40274 40275 /** 40276 * Internal dependencies 40277 */ 40278 40279 40280 40281 40282 function input_control_useUniqueId(idProp) { 40283 const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(InputControl); 40284 const id = `inspector-input-control-$instanceId}`; 40285 return idProp || id; 40286 } 40287 40288 function InputControl(_ref, ref) { 40289 let { 40290 __unstableStateReducer: stateReducer = state => state, 40291 __unstableInputWidth, 40292 className, 40293 disabled = false, 40294 hideLabelFromVision = false, 40295 id: idProp, 40296 isPressEnterToChange = false, 40297 label, 40298 labelPosition = 'top', 40299 onChange = external_lodash_namespaceObject.noop, 40300 onValidate = external_lodash_namespaceObject.noop, 40301 onKeyDown = external_lodash_namespaceObject.noop, 40302 prefix, 40303 size = 'default', 40304 suffix, 40305 value, 40306 ...props 40307 } = _ref; 40308 const [isFocused, setIsFocused] = (0,external_wp_element_namespaceObject.useState)(false); 40309 const id = input_control_useUniqueId(idProp); 40310 const classes = classnames_default()('components-input-control', className); 40311 return (0,external_wp_element_namespaceObject.createElement)(input_base, { 40312 __unstableInputWidth: __unstableInputWidth, 40313 className: classes, 40314 disabled: disabled, 40315 gap: 3, 40316 hideLabelFromVision: hideLabelFromVision, 40317 id: id, 40318 isFocused: isFocused, 40319 justify: "left", 40320 label: label, 40321 labelPosition: labelPosition, 40322 prefix: prefix, 40323 size: size, 40324 suffix: suffix 40325 }, (0,external_wp_element_namespaceObject.createElement)(input_field, extends_extends({}, props, { 40326 className: "components-input-control__input", 40327 disabled: disabled, 40328 id: id, 40329 isFocused: isFocused, 40330 isPressEnterToChange: isPressEnterToChange, 40331 onChange: onChange, 40332 onKeyDown: onKeyDown, 40333 onValidate: onValidate, 40334 ref: ref, 40335 setIsFocused: setIsFocused, 40336 size: size, 40337 stateReducer: stateReducer, 40338 value: value 40339 }))); 40340 } 40341 const input_control_ForwardedComponent = (0,external_wp_element_namespaceObject.forwardRef)(InputControl); 40342 /* harmony default export */ var input_control = (input_control_ForwardedComponent); 40343 40344 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/angle-picker-control/styles/angle-picker-control-styles.js 40345 40346 40347 function angle_picker_control_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } 40348 40349 /** 40350 * External dependencies 40351 */ 40352 40353 /** 40354 * Internal dependencies 40355 */ 40356 40357 40358 40359 40360 const CIRCLE_SIZE = 32; 40361 const INNER_CIRCLE_SIZE = 3; 40362 const angle_picker_control_styles_Root = /*#__PURE__*/emotion_styled_base_browser_esm(flex_component, true ? { 40363 target: "e65ony43" 40364 } : 0)("margin-bottom:", space(2), ";" + ( true ? "" : 0)); 40365 const CircleRoot = emotion_styled_base_browser_esm("div", true ? { 40366 target: "e65ony42" 40367 } : 0)("border-radius:50%;border:", config_values.borderWidth, " solid ", COLORS.ui.border, ";box-sizing:border-box;cursor:grab;height:", CIRCLE_SIZE, "px;overflow:hidden;width:", CIRCLE_SIZE, "px;" + ( true ? "" : 0)); 40368 const CircleIndicatorWrapper = emotion_styled_base_browser_esm("div", true ? { 40369 target: "e65ony41" 40370 } : 0)( true ? { 40371 name: "1bhd2sw", 40372 styles: "box-sizing:border-box;position:relative;width:100%;height:100%" 40373 } : 0); 40374 const CircleIndicator = emotion_styled_base_browser_esm("div", true ? { 40375 target: "e65ony40" 40376 } : 0)("background:", COLORS.admin.theme, ";border-radius:50%;border:", INNER_CIRCLE_SIZE, "px solid ", COLORS.admin.theme, ";bottom:0;box-sizing:border-box;display:block;height:0px;left:0;margin:auto;position:absolute;right:0;top:-", CIRCLE_SIZE / 2, "px;width:0px;" + ( true ? "" : 0)); 40377 40378 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/angle-picker-control/angle-circle.js 40379 40380 40381 40382 /** 40383 * WordPress dependencies 40384 */ 40385 40386 40387 /** 40388 * Internal dependencies 40389 */ 40390 40391 40392 40393 function AngleCircle(_ref) { 40394 let { 40395 value, 40396 onChange, 40397 ...props 40398 } = _ref; 40399 const angleCircleRef = (0,external_wp_element_namespaceObject.useRef)(); 40400 const angleCircleCenter = (0,external_wp_element_namespaceObject.useRef)(); 40401 const previousCursorValue = (0,external_wp_element_namespaceObject.useRef)(); 40402 40403 const setAngleCircleCenter = () => { 40404 const rect = angleCircleRef.current.getBoundingClientRect(); 40405 angleCircleCenter.current = { 40406 x: rect.x + rect.width / 2, 40407 y: rect.y + rect.height / 2 40408 }; 40409 }; 40410 40411 const changeAngleToPosition = event => { 40412 const { 40413 x: centerX, 40414 y: centerY 40415 } = angleCircleCenter.current; // Prevent (drag) mouse events from selecting and accidentally 40416 // triggering actions from other elements. 40417 40418 event.preventDefault(); // Input control needs to lose focus and by preventDefault above, it doesn't. 40419 40420 event.target.focus(); 40421 onChange(getAngle(centerX, centerY, event.clientX, event.clientY)); 40422 }; 40423 40424 const { 40425 startDrag, 40426 isDragging 40427 } = (0,external_wp_compose_namespaceObject.__experimentalUseDragging)({ 40428 onDragStart: event => { 40429 setAngleCircleCenter(); 40430 changeAngleToPosition(event); 40431 }, 40432 onDragMove: changeAngleToPosition, 40433 onDragEnd: changeAngleToPosition 40434 }); 40435 (0,external_wp_element_namespaceObject.useEffect)(() => { 40436 if (isDragging) { 40437 if (previousCursorValue.current === undefined) { 40438 previousCursorValue.current = document.body.style.cursor; 40439 } 40440 40441 document.body.style.cursor = 'grabbing'; 40442 } else { 40443 document.body.style.cursor = previousCursorValue.current || null; 40444 previousCursorValue.current = undefined; 40445 } 40446 }, [isDragging]); 40447 return ( 40448 /* eslint-disable jsx-a11y/no-static-element-interactions */ 40449 (0,external_wp_element_namespaceObject.createElement)(CircleRoot, extends_extends({ 40450 ref: angleCircleRef, 40451 onMouseDown: startDrag, 40452 className: "components-angle-picker-control__angle-circle", 40453 style: isDragging ? { 40454 cursor: 'grabbing' 40455 } : undefined 40456 }, props), (0,external_wp_element_namespaceObject.createElement)(CircleIndicatorWrapper, { 40457 style: value ? { 40458 transform: `rotate($value}deg)` 40459 } : undefined, 40460 className: "components-angle-picker-control__angle-circle-indicator-wrapper", 40461 tabIndex: -1 40462 }, (0,external_wp_element_namespaceObject.createElement)(CircleIndicator, { 40463 className: "components-angle-picker-control__angle-circle-indicator" 40464 }))) 40465 /* eslint-enable jsx-a11y/no-static-element-interactions */ 40466 40467 ); 40468 } 40469 40470 function getAngle(centerX, centerY, pointX, pointY) { 40471 const y = pointY - centerY; 40472 const x = pointX - centerX; 40473 const angleInRadians = Math.atan2(y, x); 40474 const angleInDeg = Math.round(angleInRadians * (180 / Math.PI)) + 90; 40475 40476 if (angleInDeg < 0) { 40477 return 360 + angleInDeg; 40478 } 40479 40480 return angleInDeg; 40481 } 40482 40483 /* harmony default export */ var angle_circle = (AngleCircle); 40484 40485 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/spacer/hook.js 40486 /** 40487 * External dependencies 40488 */ 40489 40490 /** 40491 * Internal dependencies 40492 */ 40493 40494 40495 40496 40497 40498 const isDefined = o => typeof o !== 'undefined' && o !== null; 40499 40500 function useSpacer(props) { 40501 const { 40502 className, 40503 margin, 40504 marginBottom = 2, 40505 marginLeft, 40506 marginRight, 40507 marginTop, 40508 marginX, 40509 marginY, 40510 padding, 40511 paddingBottom, 40512 paddingLeft, 40513 paddingRight, 40514 paddingTop, 40515 paddingX, 40516 paddingY, 40517 ...otherProps 40518 } = useContextSystem(props, 'Spacer'); 40519 const cx = useCx(); 40520 const classes = cx(isDefined(margin) && /*#__PURE__*/emotion_react_browser_esm_css("margin:", space(margin), ";" + ( true ? "" : 0), true ? "" : 0), isDefined(marginY) && /*#__PURE__*/emotion_react_browser_esm_css("margin-bottom:", space(marginY), ";margin-top:", space(marginY), ";" + ( true ? "" : 0), true ? "" : 0), isDefined(marginX) && /*#__PURE__*/emotion_react_browser_esm_css("margin-left:", space(marginX), ";margin-right:", space(marginX), ";" + ( true ? "" : 0), true ? "" : 0), isDefined(marginTop) && /*#__PURE__*/emotion_react_browser_esm_css("margin-top:", space(marginTop), ";" + ( true ? "" : 0), true ? "" : 0), isDefined(marginBottom) && /*#__PURE__*/emotion_react_browser_esm_css("margin-bottom:", space(marginBottom), ";" + ( true ? "" : 0), true ? "" : 0), isDefined(marginLeft) && /*#__PURE__*/emotion_react_browser_esm_css("margin-left:", space(marginLeft), ";" + ( true ? "" : 0), true ? "" : 0), isDefined(marginRight) && /*#__PURE__*/emotion_react_browser_esm_css("margin-right:", space(marginRight), ";" + ( true ? "" : 0), true ? "" : 0), isDefined(padding) && /*#__PURE__*/emotion_react_browser_esm_css("padding:", space(padding), ";" + ( true ? "" : 0), true ? "" : 0), isDefined(paddingY) && /*#__PURE__*/emotion_react_browser_esm_css("padding-bottom:", space(paddingY), ";padding-top:", space(paddingY), ";" + ( true ? "" : 0), true ? "" : 0), isDefined(paddingX) && /*#__PURE__*/emotion_react_browser_esm_css("padding-left:", space(paddingX), ";padding-right:", space(paddingX), ";" + ( true ? "" : 0), true ? "" : 0), isDefined(paddingTop) && /*#__PURE__*/emotion_react_browser_esm_css("padding-top:", space(paddingTop), ";" + ( true ? "" : 0), true ? "" : 0), isDefined(paddingBottom) && /*#__PURE__*/emotion_react_browser_esm_css("padding-bottom:", space(paddingBottom), ";" + ( true ? "" : 0), true ? "" : 0), isDefined(paddingLeft) && /*#__PURE__*/emotion_react_browser_esm_css("padding-left:", space(paddingLeft), ";" + ( true ? "" : 0), true ? "" : 0), isDefined(paddingRight) && /*#__PURE__*/emotion_react_browser_esm_css("padding-right:", space(paddingRight), ";" + ( true ? "" : 0), true ? "" : 0), className); 40521 return { ...otherProps, 40522 className: classes 40523 }; 40524 } 40525 40526 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/spacer/component.js 40527 40528 40529 40530 /** 40531 * External dependencies 40532 */ 40533 40534 /** 40535 * Internal dependencies 40536 */ 40537 40538 40539 40540 40541 function Spacer(props, forwardedRef) { 40542 const spacerProps = useSpacer(props); 40543 return (0,external_wp_element_namespaceObject.createElement)(component, extends_extends({}, spacerProps, { 40544 ref: forwardedRef 40545 })); 40546 } 40547 /** 40548 * `Spacer` is a primitive layout component that providers inner (`padding`) or outer (`margin`) space in-between components. It can also be used to adaptively provide space within an `HStack` or `VStack`. 40549 * 40550 * `Spacer` comes with a bunch of shorthand props to adjust `margin` and `padding`. The values of these props work as a multiplier to the library's grid system (base of `4px`). 40551 * 40552 * @example 40553 * ```jsx 40554 * import { Spacer } from `@wordpress/components` 40555 * 40556 * function Example() { 40557 * return ( 40558 * <View> 40559 * <Spacer> 40560 * <Heading>WordPress.org</Heading> 40561 * </Spacer> 40562 * <Text> 40563 * Code is Poetry 40564 * </Text> 40565 * </View> 40566 * ); 40567 * } 40568 * ``` 40569 */ 40570 40571 40572 const ConnectedSpacer = contextConnect(Spacer, 'Spacer'); 40573 /* harmony default export */ var spacer_component = (ConnectedSpacer); 40574 40575 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/angle-picker-control/index.js 40576 40577 40578 /** 40579 * External dependencies 40580 */ 40581 40582 /** 40583 * WordPress dependencies 40584 */ 40585 40586 40587 /** 40588 * Internal dependencies 40589 */ 40590 40591 40592 40593 40594 40595 40596 40597 40598 function AnglePickerControl(_ref) { 40599 let { 40600 className, 40601 label = (0,external_wp_i18n_namespaceObject.__)('Angle'), 40602 onChange, 40603 value 40604 } = _ref; 40605 40606 const handleOnNumberChange = unprocessedValue => { 40607 const inputValue = unprocessedValue !== '' ? parseInt(unprocessedValue, 10) : 0; 40608 onChange(inputValue); 40609 }; 40610 40611 const classes = classnames_default()('components-angle-picker-control', className); 40612 return (0,external_wp_element_namespaceObject.createElement)(angle_picker_control_styles_Root, { 40613 className: classes 40614 }, (0,external_wp_element_namespaceObject.createElement)(flex_block_component, null, (0,external_wp_element_namespaceObject.createElement)(input_control, { 40615 label: label, 40616 className: "components-angle-picker-control__input-field", 40617 max: 360, 40618 min: 0, 40619 onChange: handleOnNumberChange, 40620 size: "__unstable-large", 40621 step: "1", 40622 value: value, 40623 hideHTMLArrows: true, 40624 suffix: (0,external_wp_element_namespaceObject.createElement)(spacer_component, { 40625 as: text_component, 40626 marginBottom: 0, 40627 marginRight: space(3), 40628 style: { 40629 color: 'var( --wp-admin-theme-color )' 40630 } 40631 }, "\xB0") 40632 })), (0,external_wp_element_namespaceObject.createElement)(flex_item_component, { 40633 style: { 40634 marginLeft: space(4), 40635 marginBottom: space(1), 40636 marginTop: 'auto' 40637 } 40638 }, (0,external_wp_element_namespaceObject.createElement)(angle_circle, { 40639 "aria-hidden": "true", 40640 value: value, 40641 onChange: onChange 40642 }))); 40643 } 40644 40645 ;// CONCATENATED MODULE: external ["wp","keycodes"] 40646 var external_wp_keycodes_namespaceObject = window["wp"]["keycodes"]; 40647 ;// CONCATENATED MODULE: external ["wp","richText"] 40648 var external_wp_richText_namespaceObject = window["wp"]["richText"]; 40649 ;// CONCATENATED MODULE: external ["wp","a11y"] 40650 var external_wp_a11y_namespaceObject = window["wp"]["a11y"]; 40651 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/autocomplete/get-default-use-items.js 40652 /** 40653 * External dependencies 40654 */ 40655 40656 /** 40657 * WordPress dependencies 40658 */ 40659 40660 40661 40662 function filterOptions(search) { 40663 let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : []; 40664 let maxResults = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 10; 40665 const filtered = []; 40666 40667 for (let i = 0; i < options.length; i++) { 40668 const option = options[i]; // Merge label into keywords. 40669 40670 let { 40671 keywords = [] 40672 } = option; 40673 40674 if ('string' === typeof option.label) { 40675 keywords = [...keywords, option.label]; 40676 } 40677 40678 const isMatch = keywords.some(keyword => search.test((0,external_lodash_namespaceObject.deburr)(keyword))); 40679 40680 if (!isMatch) { 40681 continue; 40682 } 40683 40684 filtered.push(option); // Abort early if max reached. 40685 40686 if (filtered.length === maxResults) { 40687 break; 40688 } 40689 } 40690 40691 return filtered; 40692 } 40693 40694 function getDefaultUseItems(autocompleter) { 40695 return filterValue => { 40696 const [items, setItems] = (0,external_wp_element_namespaceObject.useState)([]); 40697 /* 40698 * We support both synchronous and asynchronous retrieval of completer options 40699 * but internally treat all as async so we maintain a single, consistent code path. 40700 * 40701 * Because networks can be slow, and the internet is wonderfully unpredictable, 40702 * we don't want two promises updating the state at once. This ensures that only 40703 * the most recent promise will act on `optionsData`. This doesn't use the state 40704 * because `setState` is batched, and so there's no guarantee that setting 40705 * `activePromise` in the state would result in it actually being in `this.state` 40706 * before the promise resolves and we check to see if this is the active promise or not. 40707 */ 40708 40709 (0,external_wp_element_namespaceObject.useLayoutEffect)(() => { 40710 const { 40711 options, 40712 isDebounced 40713 } = autocompleter; 40714 const loadOptions = (0,external_lodash_namespaceObject.debounce)(() => { 40715 const promise = Promise.resolve(typeof options === 'function' ? options(filterValue) : options).then(optionsData => { 40716 if (promise.canceled) { 40717 return; 40718 } 40719 40720 const keyedOptions = optionsData.map((optionData, optionIndex) => ({ 40721 key: `$autocompleter.name}-$optionIndex}`, 40722 value: optionData, 40723 label: autocompleter.getOptionLabel(optionData), 40724 keywords: autocompleter.getOptionKeywords ? autocompleter.getOptionKeywords(optionData) : [], 40725 isDisabled: autocompleter.isOptionDisabled ? autocompleter.isOptionDisabled(optionData) : false 40726 })); // Create a regular expression to filter the options. 40727 40728 const search = new RegExp('(?:\\b|\\s|^)' + (0,external_lodash_namespaceObject.escapeRegExp)(filterValue), 'i'); 40729 setItems(filterOptions(search, keyedOptions)); 40730 }); 40731 return promise; 40732 }, isDebounced ? 250 : 0); 40733 const promise = loadOptions(); 40734 return () => { 40735 loadOptions.cancel(); 40736 40737 if (promise) { 40738 promise.canceled = true; 40739 } 40740 }; 40741 }, [filterValue]); 40742 return [items]; 40743 }; 40744 } 40745 40746 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/autocomplete/autocompleter-ui.js 40747 40748 40749 /** 40750 * External dependencies 40751 */ 40752 40753 40754 /** 40755 * WordPress dependencies 40756 */ 40757 40758 40759 40760 /** 40761 * Internal dependencies 40762 */ 40763 40764 40765 40766 40767 function getAutoCompleterUI(autocompleter) { 40768 const useItems = autocompleter.useItems ? autocompleter.useItems : getDefaultUseItems(autocompleter); 40769 40770 function AutocompleterUI(_ref) { 40771 let { 40772 filterValue, 40773 instanceId, 40774 listBoxId, 40775 className, 40776 selectedIndex, 40777 onChangeOptions, 40778 onSelect, 40779 onReset, 40780 value, 40781 contentRef 40782 } = _ref; 40783 const [items] = useItems(filterValue); 40784 const anchorRef = (0,external_wp_richText_namespaceObject.useAnchorRef)({ 40785 ref: contentRef, 40786 value 40787 }); 40788 (0,external_wp_element_namespaceObject.useLayoutEffect)(() => { 40789 onChangeOptions(items); 40790 }, [items]); 40791 40792 if (!items.length > 0) { 40793 return null; 40794 } 40795 40796 return (0,external_wp_element_namespaceObject.createElement)(popover, { 40797 focusOnMount: false, 40798 onClose: onReset, 40799 position: "top right", 40800 className: "components-autocomplete__popover", 40801 anchorRef: anchorRef 40802 }, (0,external_wp_element_namespaceObject.createElement)("div", { 40803 id: listBoxId, 40804 role: "listbox", 40805 className: "components-autocomplete__results" 40806 }, (0,external_lodash_namespaceObject.map)(items, (option, index) => (0,external_wp_element_namespaceObject.createElement)(build_module_button, { 40807 key: option.key, 40808 id: `components-autocomplete-item-$instanceId}-$option.key}`, 40809 role: "option", 40810 "aria-selected": index === selectedIndex, 40811 disabled: option.isDisabled, 40812 className: classnames_default()('components-autocomplete__result', className, { 40813 'is-selected': index === selectedIndex 40814 }), 40815 onClick: () => onSelect(option) 40816 }, option.label)))); 40817 } 40818 40819 return AutocompleterUI; 40820 } 40821 40822 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/autocomplete/index.js 40823 40824 40825 /** 40826 * External dependencies 40827 */ 40828 40829 /** 40830 * WordPress dependencies 40831 */ 40832 40833 40834 40835 40836 40837 40838 40839 /** 40840 * Internal dependencies 40841 */ 40842 40843 40844 /** 40845 * A raw completer option. 40846 * 40847 * @typedef {*} CompleterOption 40848 */ 40849 40850 /** 40851 * @callback FnGetOptions 40852 * 40853 * @return {(CompleterOption[]|Promise.<CompleterOption[]>)} The completer options or a promise for them. 40854 */ 40855 40856 /** 40857 * @callback FnGetOptionKeywords 40858 * @param {CompleterOption} option a completer option. 40859 * 40860 * @return {string[]} list of key words to search. 40861 */ 40862 40863 /** 40864 * @callback FnIsOptionDisabled 40865 * @param {CompleterOption} option a completer option. 40866 * 40867 * @return {string[]} whether or not the given option is disabled. 40868 */ 40869 40870 /** 40871 * @callback FnGetOptionLabel 40872 * @param {CompleterOption} option a completer option. 40873 * 40874 * @return {(string|Array.<(string|WPElement)>)} list of react components to render. 40875 */ 40876 40877 /** 40878 * @callback FnAllowContext 40879 * @param {string} before the string before the auto complete trigger and query. 40880 * @param {string} after the string after the autocomplete trigger and query. 40881 * 40882 * @return {boolean} true if the completer can handle. 40883 */ 40884 40885 /** 40886 * @typedef {Object} OptionCompletion 40887 * @property {'insert-at-caret'|'replace'} action the intended placement of the completion. 40888 * @property {OptionCompletionValue} value the completion value. 40889 */ 40890 40891 /** 40892 * A completion value. 40893 * 40894 * @typedef {(string|WPElement|Object)} OptionCompletionValue 40895 */ 40896 40897 /** 40898 * @callback FnGetOptionCompletion 40899 * @param {CompleterOption} value the value of the completer option. 40900 * @param {string} query the text value of the autocomplete query. 40901 * 40902 * @return {(OptionCompletion|OptionCompletionValue)} the completion for the given option. If an 40903 * OptionCompletionValue is returned, the 40904 * completion action defaults to `insert-at-caret`. 40905 */ 40906 40907 /** 40908 * @typedef {Object} WPCompleter 40909 * @property {string} name a way to identify a completer, useful for selective overriding. 40910 * @property {?string} className A class to apply to the popup menu. 40911 * @property {string} triggerPrefix the prefix that will display the menu. 40912 * @property {(CompleterOption[]|FnGetOptions)} options the completer options or a function to get them. 40913 * @property {?FnGetOptionKeywords} getOptionKeywords get the keywords for a given option. 40914 * @property {?FnIsOptionDisabled} isOptionDisabled get whether or not the given option is disabled. 40915 * @property {FnGetOptionLabel} getOptionLabel get the label for a given option. 40916 * @property {?FnAllowContext} allowContext filter the context under which the autocomplete activates. 40917 * @property {FnGetOptionCompletion} getOptionCompletion get the completion associated with a given option. 40918 */ 40919 40920 function useAutocomplete(_ref) { 40921 let { 40922 record, 40923 onChange, 40924 onReplace, 40925 completers, 40926 contentRef 40927 } = _ref; 40928 const debouncedSpeak = (0,external_wp_compose_namespaceObject.useDebounce)(external_wp_a11y_namespaceObject.speak, 500); 40929 const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(useAutocomplete); 40930 const [selectedIndex, setSelectedIndex] = (0,external_wp_element_namespaceObject.useState)(0); 40931 const [filteredOptions, setFilteredOptions] = (0,external_wp_element_namespaceObject.useState)([]); 40932 const [filterValue, setFilterValue] = (0,external_wp_element_namespaceObject.useState)(''); 40933 const [autocompleter, setAutocompleter] = (0,external_wp_element_namespaceObject.useState)(null); 40934 const [AutocompleterUI, setAutocompleterUI] = (0,external_wp_element_namespaceObject.useState)(null); 40935 const [backspacing, setBackspacing] = (0,external_wp_element_namespaceObject.useState)(false); 40936 40937 function insertCompletion(replacement) { 40938 const end = record.start; 40939 const start = end - autocompleter.triggerPrefix.length - filterValue.length; 40940 const toInsert = (0,external_wp_richText_namespaceObject.create)({ 40941 html: (0,external_wp_element_namespaceObject.renderToString)(replacement) 40942 }); 40943 onChange((0,external_wp_richText_namespaceObject.insert)(record, toInsert, start, end)); 40944 } 40945 40946 function select(option) { 40947 const { 40948 getOptionCompletion 40949 } = autocompleter || {}; 40950 40951 if (option.isDisabled) { 40952 return; 40953 } 40954 40955 if (getOptionCompletion) { 40956 const completion = getOptionCompletion(option.value, filterValue); 40957 const { 40958 action, 40959 value 40960 } = undefined === completion.action || undefined === completion.value ? { 40961 action: 'insert-at-caret', 40962 value: completion 40963 } : completion; 40964 40965 if ('replace' === action) { 40966 onReplace([value]); // When replacing, the component will unmount, so don't reset 40967 // state (below) on an unmounted component. 40968 40969 return; 40970 } else if ('insert-at-caret' === action) { 40971 insertCompletion(value); 40972 } 40973 } // Reset autocomplete state after insertion rather than before 40974 // so insertion events don't cause the completion menu to redisplay. 40975 40976 40977 reset(); 40978 } 40979 40980 function reset() { 40981 setSelectedIndex(0); 40982 setFilteredOptions([]); 40983 setFilterValue(''); 40984 setAutocompleter(null); 40985 setAutocompleterUI(null); 40986 } 40987 40988 function announce(options) { 40989 if (!debouncedSpeak) { 40990 return; 40991 } 40992 40993 if (!!options.length) { 40994 debouncedSpeak((0,external_wp_i18n_namespaceObject.sprintf)( 40995 /* translators: %d: number of results. */ 40996 (0,external_wp_i18n_namespaceObject._n)('%d result found, use up and down arrow keys to navigate.', '%d results found, use up and down arrow keys to navigate.', options.length), options.length), 'assertive'); 40997 } else { 40998 debouncedSpeak((0,external_wp_i18n_namespaceObject.__)('No results.'), 'assertive'); 40999 } 41000 } 41001 /** 41002 * Load options for an autocompleter. 41003 * 41004 * @param {Array} options 41005 */ 41006 41007 41008 function onChangeOptions(options) { 41009 setSelectedIndex(options.length === filteredOptions.length ? selectedIndex : 0); 41010 setFilteredOptions(options); 41011 announce(options); 41012 } 41013 41014 function handleKeyDown(event) { 41015 setBackspacing(event.keyCode === external_wp_keycodes_namespaceObject.BACKSPACE); 41016 41017 if (!autocompleter) { 41018 return; 41019 } 41020 41021 if (filteredOptions.length === 0) { 41022 return; 41023 } 41024 41025 if (event.defaultPrevented) { 41026 return; 41027 } 41028 41029 switch (event.keyCode) { 41030 case external_wp_keycodes_namespaceObject.UP: 41031 setSelectedIndex((selectedIndex === 0 ? filteredOptions.length : selectedIndex) - 1); 41032 break; 41033 41034 case external_wp_keycodes_namespaceObject.DOWN: 41035 setSelectedIndex((selectedIndex + 1) % filteredOptions.length); 41036 break; 41037 41038 case external_wp_keycodes_namespaceObject.ESCAPE: 41039 setAutocompleter(null); 41040 setAutocompleterUI(null); 41041 event.preventDefault(); 41042 break; 41043 41044 case external_wp_keycodes_namespaceObject.ENTER: 41045 select(filteredOptions[selectedIndex]); 41046 break; 41047 41048 case external_wp_keycodes_namespaceObject.LEFT: 41049 case external_wp_keycodes_namespaceObject.RIGHT: 41050 reset(); 41051 return; 41052 41053 default: 41054 return; 41055 } // Any handled keycode should prevent original behavior. This relies on 41056 // the early return in the default case. 41057 41058 41059 event.preventDefault(); 41060 } 41061 41062 let textContent; 41063 41064 if ((0,external_wp_richText_namespaceObject.isCollapsed)(record)) { 41065 textContent = (0,external_wp_richText_namespaceObject.getTextContent)((0,external_wp_richText_namespaceObject.slice)(record, 0)); 41066 } 41067 41068 (0,external_wp_element_namespaceObject.useEffect)(() => { 41069 if (!textContent) { 41070 reset(); 41071 return; 41072 } 41073 41074 const text = (0,external_lodash_namespaceObject.deburr)(textContent); 41075 const textAfterSelection = (0,external_wp_richText_namespaceObject.getTextContent)((0,external_wp_richText_namespaceObject.slice)(record, undefined, (0,external_wp_richText_namespaceObject.getTextContent)(record).length)); 41076 const completer = (0,external_lodash_namespaceObject.find)(completers, _ref2 => { 41077 let { 41078 triggerPrefix, 41079 allowContext 41080 } = _ref2; 41081 const index = text.lastIndexOf(triggerPrefix); 41082 41083 if (index === -1) { 41084 return false; 41085 } 41086 41087 const textWithoutTrigger = text.slice(index + triggerPrefix.length); 41088 const tooDistantFromTrigger = textWithoutTrigger.length > 50; // 50 chars seems to be a good limit. 41089 // This is a final barrier to prevent the effect from completing with 41090 // an extremely long string, which causes the editor to slow-down 41091 // significantly. This could happen, for example, if `matchingWhileBackspacing` 41092 // is true and one of the "words" end up being too long. If that's the case, 41093 // it will be caught by this guard. 41094 41095 if (tooDistantFromTrigger) return false; 41096 const mismatch = filteredOptions.length === 0; 41097 const wordsFromTrigger = textWithoutTrigger.split(/\s/); // We need to allow the effect to run when not backspacing and if there 41098 // was a mismatch. i.e when typing a trigger + the match string or when 41099 // clicking in an existing trigger word on the page. We do that if we 41100 // detect that we have one word from trigger in the current textual context. 41101 // 41102 // Ex.: "Some text @a" <-- "@a" will be detected as the trigger word and 41103 // allow the effect to run. It will run until there's a mismatch. 41104 41105 const hasOneTriggerWord = wordsFromTrigger.length === 1; // This is used to allow the effect to run when backspacing and if 41106 // "touching" a word that "belongs" to a trigger. We consider a "trigger 41107 // word" any word up to the limit of 3 from the trigger character. 41108 // Anything beyond that is ignored if there's a mismatch. This allows 41109 // us to "escape" a mismatch when backspacing, but still imposing some 41110 // sane limits. 41111 // 41112 // Ex: "Some text @marcelo sekkkk" <--- "kkkk" caused a mismatch, but 41113 // if the user presses backspace here, it will show the completion popup again. 41114 41115 const matchingWhileBackspacing = backspacing && textWithoutTrigger.split(/\s/).length <= 3; 41116 41117 if (mismatch && !(matchingWhileBackspacing || hasOneTriggerWord)) { 41118 return false; 41119 } 41120 41121 if (allowContext && !allowContext(text.slice(0, index), textAfterSelection)) { 41122 return false; 41123 } 41124 41125 if (/^\s/.test(textWithoutTrigger) || /\s\s+$/.test(textWithoutTrigger)) { 41126 return false; 41127 } 41128 41129 return /[\u0000-\uFFFF]*$/.test(textWithoutTrigger); 41130 }); 41131 41132 if (!completer) { 41133 reset(); 41134 return; 41135 } 41136 41137 const safeTrigger = (0,external_lodash_namespaceObject.escapeRegExp)(completer.triggerPrefix); 41138 const match = text.slice(text.lastIndexOf(completer.triggerPrefix)).match(new RegExp(`$safeTrigger}([\u0000-\uFFFF]*)$`)); 41139 const query = match && match[1]; 41140 setAutocompleter(completer); 41141 setAutocompleterUI(() => completer !== autocompleter ? getAutoCompleterUI(completer) : AutocompleterUI); 41142 setFilterValue(query); 41143 }, [textContent]); 41144 const { 41145 key: selectedKey = '' 41146 } = filteredOptions[selectedIndex] || {}; 41147 const { 41148 className 41149 } = autocompleter || {}; 41150 const isExpanded = !!autocompleter && filteredOptions.length > 0; 41151 const listBoxId = isExpanded ? `components-autocomplete-listbox-$instanceId}` : null; 41152 const activeId = isExpanded ? `components-autocomplete-item-$instanceId}-$selectedKey}` : null; 41153 const hasSelection = record.start !== undefined; 41154 return { 41155 listBoxId, 41156 activeId, 41157 onKeyDown: handleKeyDown, 41158 popover: hasSelection && AutocompleterUI && (0,external_wp_element_namespaceObject.createElement)(AutocompleterUI, { 41159 className: className, 41160 filterValue: filterValue, 41161 instanceId: instanceId, 41162 listBoxId: listBoxId, 41163 selectedIndex: selectedIndex, 41164 onChangeOptions: onChangeOptions, 41165 onSelect: select, 41166 value: record, 41167 contentRef: contentRef, 41168 reset: reset 41169 }) 41170 }; 41171 } 41172 41173 function useAutocompleteProps(options) { 41174 const ref = (0,external_wp_element_namespaceObject.useRef)(); 41175 const onKeyDownRef = (0,external_wp_element_namespaceObject.useRef)(); 41176 const { 41177 popover, 41178 listBoxId, 41179 activeId, 41180 onKeyDown 41181 } = useAutocomplete({ ...options, 41182 contentRef: ref 41183 }); 41184 onKeyDownRef.current = onKeyDown; 41185 return { 41186 ref: (0,external_wp_compose_namespaceObject.useMergeRefs)([ref, (0,external_wp_compose_namespaceObject.useRefEffect)(element => { 41187 function _onKeyDown(event) { 41188 onKeyDownRef.current(event); 41189 } 41190 41191 element.addEventListener('keydown', _onKeyDown); 41192 return () => { 41193 element.removeEventListener('keydown', _onKeyDown); 41194 }; 41195 }, [])]), 41196 children: popover, 41197 'aria-autocomplete': listBoxId ? 'list' : undefined, 41198 'aria-owns': listBoxId, 41199 'aria-activedescendant': activeId 41200 }; 41201 } 41202 function Autocomplete(_ref3) { 41203 let { 41204 children, 41205 isSelected, 41206 ...options 41207 } = _ref3; 41208 const { 41209 popover, 41210 ...props 41211 } = useAutocomplete(options); 41212 return (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, children(props), isSelected && popover); 41213 } 41214 41215 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/utils/font-values.js 41216 /* harmony default export */ var font_values = ({ 41217 'default.fontFamily': "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif", 41218 'default.fontSize': '13px', 41219 'helpText.fontSize': '12px', 41220 mobileTextMinFontSize: '16px' 41221 }); 41222 41223 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/utils/font.js 41224 /** 41225 * External dependencies 41226 */ 41227 41228 /** 41229 * Internal dependencies 41230 */ 41231 41232 41233 /** 41234 * 41235 * @param {keyof FONT} value Path of value from `FONT` 41236 * @return {string} Font rule value 41237 */ 41238 41239 function font(value) { 41240 return (0,external_lodash_namespaceObject.get)(font_values, value, ''); 41241 } 41242 41243 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/base-control/styles/base-control-styles.js 41244 41245 41246 function base_control_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } 41247 41248 /** 41249 * External dependencies 41250 */ 41251 41252 /** 41253 * Internal dependencies 41254 */ 41255 41256 41257 41258 const base_control_styles_Wrapper = emotion_styled_base_browser_esm("div", true ? { 41259 target: "ej5x27r4" 41260 } : 0)("font-family:", font('default.fontFamily'), ";font-size:", font('default.fontSize'), ";" + ( true ? "" : 0)); 41261 41262 const deprecatedMarginField = _ref2 => { 41263 let { 41264 __nextHasNoMarginBottom = false 41265 } = _ref2; 41266 return !__nextHasNoMarginBottom && /*#__PURE__*/emotion_react_browser_esm_css("margin-bottom:", space(2), ";" + ( true ? "" : 0), true ? "" : 0); 41267 }; 41268 41269 const StyledField = emotion_styled_base_browser_esm("div", true ? { 41270 target: "ej5x27r3" 41271 } : 0)(deprecatedMarginField, " .components-panel__row &{margin-bottom:inherit;}" + ( true ? "" : 0)); 41272 const labelStyles = /*#__PURE__*/emotion_react_browser_esm_css("display:inline-block;margin-bottom:", space(2), ";" + ( true ? "" : 0), true ? "" : 0); 41273 const StyledLabel = emotion_styled_base_browser_esm("label", true ? { 41274 target: "ej5x27r2" 41275 } : 0)(labelStyles, ";" + ( true ? "" : 0)); 41276 41277 var base_control_styles_ref = true ? { 41278 name: "11yad0w", 41279 styles: "margin-bottom:revert" 41280 } : 0; 41281 41282 const deprecatedMarginHelp = _ref3 => { 41283 let { 41284 __nextHasNoMarginBottom = false 41285 } = _ref3; 41286 return !__nextHasNoMarginBottom && base_control_styles_ref; 41287 }; 41288 41289 const StyledHelp = emotion_styled_base_browser_esm("p", true ? { 41290 target: "ej5x27r1" 41291 } : 0)("margin-top:", space(2), ";margin-bottom:0;font-size:", font('helpText.fontSize'), ";font-style:normal;color:", COLORS.mediumGray.text, ";", deprecatedMarginHelp, ";" + ( true ? "" : 0)); 41292 const StyledVisualLabel = emotion_styled_base_browser_esm("span", true ? { 41293 target: "ej5x27r0" 41294 } : 0)(labelStyles, ";" + ( true ? "" : 0)); 41295 41296 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/base-control/index.js 41297 41298 41299 /** 41300 * External dependencies 41301 */ 41302 41303 41304 /** 41305 * Internal dependencies 41306 */ 41307 41308 41309 /** 41310 * `BaseControl` is a component used to generate labels and help text for components handling user inputs. 41311 * 41312 * @example 41313 * // Render a `BaseControl` for a textarea input 41314 * import { BaseControl } from '@wordpress/components'; 41315 * 41316 * // The `id` prop is necessary to accessibly associate the label with the textarea 41317 * const MyBaseControl = () => ( 41318 * <BaseControl id="textarea-1" label="Text" help="Enter some text" __nextHasNoMarginBottom={ true }> 41319 * <textarea id="textarea-1" /> 41320 * </BaseControl> 41321 * ); 41322 */ 41323 41324 const BaseControl = _ref => { 41325 let { 41326 __nextHasNoMarginBottom = false, 41327 id, 41328 label, 41329 hideLabelFromVision = false, 41330 help, 41331 className, 41332 children 41333 } = _ref; 41334 return (0,external_wp_element_namespaceObject.createElement)(base_control_styles_Wrapper, { 41335 className: classnames_default()('components-base-control', className) 41336 }, (0,external_wp_element_namespaceObject.createElement)(StyledField, { 41337 className: "components-base-control__field" // TODO: Official deprecation for this should start after all internal usages have been migrated 41338 , 41339 __nextHasNoMarginBottom: __nextHasNoMarginBottom 41340 }, label && id && (hideLabelFromVision ? (0,external_wp_element_namespaceObject.createElement)(visually_hidden_component, { 41341 as: "label", 41342 htmlFor: id 41343 }, label) : (0,external_wp_element_namespaceObject.createElement)(StyledLabel, { 41344 className: "components-base-control__label", 41345 htmlFor: id 41346 }, label)), label && !id && (hideLabelFromVision ? (0,external_wp_element_namespaceObject.createElement)(visually_hidden_component, { 41347 as: "label" 41348 }, label) : (0,external_wp_element_namespaceObject.createElement)(BaseControl.VisualLabel, null, label)), children), !!help && (0,external_wp_element_namespaceObject.createElement)(StyledHelp, { 41349 id: id ? id + '__help' : undefined, 41350 className: "components-base-control__help", 41351 __nextHasNoMarginBottom: __nextHasNoMarginBottom 41352 }, help)); 41353 }; 41354 /** 41355 * `BaseControl.VisualLabel` is used to render a purely visual label inside a `BaseControl` component. 41356 * 41357 * It should only be used in cases where the children being rendered inside `BaseControl` are already accessibly labeled, 41358 * e.g., a button, but we want an additional visual label for that section equivalent to the labels `BaseControl` would 41359 * otherwise use if the `label` prop was passed. 41360 * 41361 * @example 41362 * import { BaseControl } from '@wordpress/components'; 41363 * 41364 * const MyBaseControl = () => ( 41365 * <BaseControl help="This button is already accessibly labeled."> 41366 * <BaseControl.VisualLabel>Author</BaseControl.VisualLabel> 41367 * <Button>Select an author</Button> 41368 * </BaseControl> 41369 * ); 41370 */ 41371 41372 const VisualLabel = _ref2 => { 41373 let { 41374 className, 41375 children 41376 } = _ref2; 41377 return (0,external_wp_element_namespaceObject.createElement)(StyledVisualLabel, { 41378 className: classnames_default()('components-base-control__label', className) 41379 }, children); 41380 }; 41381 BaseControl.VisualLabel = VisualLabel; 41382 /* harmony default export */ var base_control = (BaseControl); 41383 41384 ;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/link.js 41385 41386 41387 /** 41388 * WordPress dependencies 41389 */ 41390 41391 const link_link = (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.SVG, { 41392 xmlns: "http://www.w3.org/2000/svg", 41393 viewBox: "0 0 24 24" 41394 }, (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.Path, { 41395 d: "M15.6 7.2H14v1.5h1.6c2 0 3.7 1.7 3.7 3.7s-1.7 3.7-3.7 3.7H14v1.5h1.6c2.8 0 5.2-2.3 5.2-5.2 0-2.9-2.3-5.2-5.2-5.2zM4.7 12.4c0-2 1.7-3.7 3.7-3.7H10V7.2H8.4c-2.9 0-5.2 2.3-5.2 5.2 0 2.9 2.3 5.2 5.2 5.2H10v-1.5H8.4c-2 0-3.7-1.7-3.7-3.7zm4.6.9h5.3v-1.5H9.3v1.5z" 41396 })); 41397 /* harmony default export */ var library_link = (link_link); 41398 41399 ;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/link-off.js 41400 41401 41402 /** 41403 * WordPress dependencies 41404 */ 41405 41406 const linkOff = (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.SVG, { 41407 xmlns: "http://www.w3.org/2000/svg", 41408 viewBox: "0 0 24 24" 41409 }, (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.Path, { 41410 d: "M15.6 7.3h-.7l1.6-3.5-.9-.4-3.9 8.5H9v1.5h2l-1.3 2.8H8.4c-2 0-3.7-1.7-3.7-3.7s1.7-3.7 3.7-3.7H10V7.3H8.4c-2.9 0-5.2 2.3-5.2 5.2 0 2.9 2.3 5.2 5.2 5.2H9l-1.4 3.2.9.4 5.7-12.5h1.4c2 0 3.7 1.7 3.7 3.7s-1.7 3.7-3.7 3.7H14v1.5h1.6c2.9 0 5.2-2.3 5.2-5.2 0-2.9-2.4-5.2-5.2-5.2z" 41411 })); 41412 /* harmony default export */ var link_off = (linkOff); 41413 41414 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/border-box-control/styles.js 41415 function border_box_control_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } 41416 41417 /** 41418 * External dependencies 41419 */ 41420 41421 /** 41422 * Internal dependencies 41423 */ 41424 41425 41426 41427 const BorderBoxControl = /*#__PURE__*/emotion_react_browser_esm_css( true ? "" : 0, true ? "" : 0); 41428 const LinkedBorderControl = true ? { 41429 name: "82a6rk", 41430 styles: "flex:1" 41431 } : 0; 41432 const BorderBoxControlLinkedButton = true ? { 41433 name: "3gg0za", 41434 styles: "flex:0;flex-basis:36px;margin-top:7px" 41435 } : 0; 41436 41437 const BorderBoxStyleWithFallback = border => { 41438 const { 41439 color = COLORS.gray[200], 41440 style = 'solid', 41441 width = config_values.borderWidth 41442 } = border || {}; 41443 const clampedWidth = width !== config_values.borderWidth ? `clamp(1px, $width}, 10px)` : width; 41444 const hasVisibleBorder = !!width && width !== '0' || !!color; 41445 const borderStyle = hasVisibleBorder ? style || 'solid' : style; 41446 return `$color} $borderStyle} $clampedWidth}`; 41447 }; 41448 41449 const BorderBoxControlVisualizer = borders => { 41450 return /*#__PURE__*/emotion_react_browser_esm_css("position:absolute;top:20px;right:30px;bottom:20px;left:30px;border-top:", BorderBoxStyleWithFallback(borders === null || borders === void 0 ? void 0 : borders.top), ";border-bottom:", BorderBoxStyleWithFallback(borders === null || borders === void 0 ? void 0 : borders.bottom), ";", rtl({ 41451 borderLeft: BorderBoxStyleWithFallback(borders === null || borders === void 0 ? void 0 : borders.left) 41452 })(), " ", rtl({ 41453 borderRight: BorderBoxStyleWithFallback(borders === null || borders === void 0 ? void 0 : borders.right) 41454 })(), ";" + ( true ? "" : 0), true ? "" : 0); 41455 }; 41456 const BorderBoxControlSplitControls = /*#__PURE__*/emotion_react_browser_esm_css("position:relative;flex:1;", rtl({ 41457 marginRight: space(3) 41458 }, { 41459 marginLeft: space(3) 41460 })(), ";" + ( true ? "" : 0), true ? "" : 0); 41461 const CenteredBorderControl = true ? { 41462 name: "1nwbfnf", 41463 styles: "grid-column:span 2;margin:0 auto" 41464 } : 0; 41465 41466 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/border-box-control/border-box-control-linked-button/hook.js 41467 /** 41468 * WordPress dependencies 41469 */ 41470 41471 /** 41472 * Internal dependencies 41473 */ 41474 41475 41476 41477 41478 function useBorderBoxControlLinkedButton(props) { 41479 const { 41480 className, 41481 ...otherProps 41482 } = useContextSystem(props, 'BorderBoxControlLinkedButton'); // Generate class names. 41483 41484 const cx = useCx(); 41485 const classes = (0,external_wp_element_namespaceObject.useMemo)(() => { 41486 return cx(BorderBoxControlLinkedButton, className); 41487 }, [className]); 41488 return { ...otherProps, 41489 className: classes 41490 }; 41491 } 41492 41493 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/border-box-control/border-box-control-linked-button/component.js 41494 41495 41496 41497 /** 41498 * WordPress dependencies 41499 */ 41500 41501 41502 /** 41503 * Internal dependencies 41504 */ 41505 41506 41507 41508 41509 41510 41511 41512 const component_BorderBoxControlLinkedButton = (props, forwardedRef) => { 41513 const { 41514 className, 41515 isLinked, 41516 ...buttonProps 41517 } = useBorderBoxControlLinkedButton(props); 41518 const label = isLinked ? (0,external_wp_i18n_namespaceObject.__)('Unlink sides') : (0,external_wp_i18n_namespaceObject.__)('Link sides'); 41519 return (0,external_wp_element_namespaceObject.createElement)(tooltip, { 41520 text: label 41521 }, (0,external_wp_element_namespaceObject.createElement)(component, { 41522 className: className 41523 }, (0,external_wp_element_namespaceObject.createElement)(build_module_button, extends_extends({}, buttonProps, { 41524 variant: isLinked ? 'primary' : 'secondary', 41525 isSmall: true, 41526 icon: isLinked ? library_link : link_off, 41527 iconSize: 16, 41528 "aria-label": label, 41529 ref: forwardedRef 41530 })))); 41531 }; 41532 41533 const ConnectedBorderBoxControlLinkedButton = contextConnect(component_BorderBoxControlLinkedButton, 'BorderBoxControlLinkedButton'); 41534 /* harmony default export */ var border_box_control_linked_button_component = (ConnectedBorderBoxControlLinkedButton); 41535 41536 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/border-box-control/border-box-control-visualizer/hook.js 41537 /** 41538 * WordPress dependencies 41539 */ 41540 41541 /** 41542 * Internal dependencies 41543 */ 41544 41545 41546 41547 41548 function useBorderBoxControlVisualizer(props) { 41549 const { 41550 className, 41551 value, 41552 ...otherProps 41553 } = useContextSystem(props, 'BorderBoxControlVisualizer'); // Generate class names. 41554 41555 const cx = useCx(); 41556 const classes = (0,external_wp_element_namespaceObject.useMemo)(() => { 41557 return cx(BorderBoxControlVisualizer(value), className); 41558 }, [className, value, rtl.watch()]); 41559 return { ...otherProps, 41560 className: classes, 41561 value 41562 }; 41563 } 41564 41565 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/border-box-control/border-box-control-visualizer/component.js 41566 41567 41568 41569 /** 41570 * WordPress dependencies 41571 */ 41572 41573 /** 41574 * Internal dependencies 41575 */ 41576 41577 41578 41579 41580 const component_BorderBoxControlVisualizer = (props, forwardedRef) => { 41581 const { 41582 value, 41583 ...otherProps 41584 } = useBorderBoxControlVisualizer(props); 41585 return (0,external_wp_element_namespaceObject.createElement)(component, extends_extends({}, otherProps, { 41586 ref: forwardedRef 41587 })); 41588 }; 41589 41590 const ConnectedBorderBoxControlVisualizer = contextConnect(component_BorderBoxControlVisualizer, 'BorderBoxControlVisualizer'); 41591 /* harmony default export */ var border_box_control_visualizer_component = (ConnectedBorderBoxControlVisualizer); 41592 41593 ;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/close-small.js 41594 41595 41596 /** 41597 * WordPress dependencies 41598 */ 41599 41600 const closeSmall = (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.SVG, { 41601 xmlns: "http://www.w3.org/2000/svg", 41602 viewBox: "0 0 24 24" 41603 }, (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.Path, { 41604 d: "M12 13.06l3.712 3.713 1.061-1.06L13.061 12l3.712-3.712-1.06-1.06L12 10.938 8.288 7.227l-1.061 1.06L10.939 12l-3.712 3.712 1.06 1.061L12 13.061z" 41605 })); 41606 /* harmony default export */ var close_small = (closeSmall); 41607 41608 ;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/line-solid.js 41609 41610 41611 /** 41612 * WordPress dependencies 41613 */ 41614 41615 const lineSolid = (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.SVG, { 41616 xmlns: "http://www.w3.org/2000/svg", 41617 width: "24", 41618 height: "24", 41619 fill: "none" 41620 }, (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.Path, { 41621 d: "M5 11.25h14v1.5H5z" 41622 })); 41623 /* harmony default export */ var line_solid = (lineSolid); 41624 41625 ;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/line-dashed.js 41626 41627 41628 /** 41629 * WordPress dependencies 41630 */ 41631 41632 const lineDashed = (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.SVG, { 41633 xmlns: "http://www.w3.org/2000/svg", 41634 width: "24", 41635 height: "24", 41636 fill: "none" 41637 }, (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.Path, { 41638 fillRule: "evenodd", 41639 d: "M5 11.25h3v1.5H5v-1.5zm5.5 0h3v1.5h-3v-1.5zm8.5 0h-3v1.5h3v-1.5z", 41640 clipRule: "evenodd" 41641 })); 41642 /* harmony default export */ var line_dashed = (lineDashed); 41643 41644 ;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/line-dotted.js 41645 41646 41647 /** 41648 * WordPress dependencies 41649 */ 41650 41651 const lineDotted = (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.SVG, { 41652 xmlns: "http://www.w3.org/2000/svg", 41653 width: "24", 41654 height: "24", 41655 fill: "none" 41656 }, (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.Path, { 41657 fillRule: "evenodd", 41658 d: "M5.25 11.25h1.5v1.5h-1.5v-1.5zm3 0h1.5v1.5h-1.5v-1.5zm4.5 0h-1.5v1.5h1.5v-1.5zm1.5 0h1.5v1.5h-1.5v-1.5zm4.5 0h-1.5v1.5h1.5v-1.5z", 41659 clipRule: "evenodd" 41660 })); 41661 /* harmony default export */ var line_dotted = (lineDotted); 41662 41663 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/number-control/styles/number-control-styles.js 41664 41665 41666 function number_control_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } 41667 41668 // @ts-nocheck 41669 41670 /** 41671 * External dependencies 41672 */ 41673 41674 41675 /** 41676 * Internal dependencies 41677 */ 41678 41679 41680 var number_control_styles_ref = true ? { 41681 name: "euqsgg", 41682 styles: "input[type='number']::-webkit-outer-spin-button,input[type='number']::-webkit-inner-spin-button{-webkit-appearance:none!important;margin:0!important;}input[type='number']{-moz-appearance:textfield;}" 41683 } : 0; 41684 41685 const htmlArrowStyles = _ref2 => { 41686 let { 41687 hideHTMLArrows 41688 } = _ref2; 41689 if (!hideHTMLArrows) return ``; 41690 return number_control_styles_ref; 41691 }; 41692 41693 const number_control_styles_Input = /*#__PURE__*/emotion_styled_base_browser_esm(input_control, true ? { 41694 target: "ep48uk90" 41695 } : 0)(htmlArrowStyles, ";" + ( true ? "" : 0)); 41696 41697 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/utils/math.js 41698 /** 41699 * External dependencies 41700 */ 41701 41702 /** 41703 * Parses and retrieves a number value. 41704 * 41705 * @param {unknown} value The incoming value. 41706 * 41707 * @return {number} The parsed number value. 41708 */ 41709 41710 function getNumber(value) { 41711 const number = Number(value); 41712 return isNaN(number) ? 0 : number; 41713 } 41714 /** 41715 * Safely adds 2 values. 41716 * 41717 * @param {Array<number|string>} args Values to add together. 41718 * 41719 * @return {number} The sum of values. 41720 */ 41721 41722 function add() { 41723 for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) { 41724 args[_key] = arguments[_key]; 41725 } 41726 41727 return args.reduce( 41728 /** @type {(sum:number, arg: number|string) => number} */ 41729 (sum, arg) => sum + getNumber(arg), 0); 41730 } 41731 /** 41732 * Safely subtracts 2 values. 41733 * 41734 * @param {Array<number|string>} args Values to subtract together. 41735 * 41736 * @return {number} The difference of the values. 41737 */ 41738 41739 function subtract() { 41740 for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) { 41741 args[_key2] = arguments[_key2]; 41742 } 41743 41744 return args.reduce( 41745 /** @type {(diff:number, arg: number|string, index:number) => number} */ 41746 (diff, arg, index) => { 41747 const value = getNumber(arg); 41748 return index === 0 ? value : diff - value; 41749 }, 0); 41750 } 41751 /** 41752 * Determines the decimal position of a number value. 41753 * 41754 * @param {number} value The number to evaluate. 41755 * 41756 * @return {number} The number of decimal places. 41757 */ 41758 41759 function getPrecision(value) { 41760 const split = (value + '').split('.'); 41761 return split[1] !== undefined ? split[1].length : 0; 41762 } 41763 /** 41764 * Clamps a value based on a min/max range with rounding 41765 * 41766 * @param {number} value The value. 41767 * @param {number} min The minimum range. 41768 * @param {number} max The maximum range. 41769 * @param {number} step A multiplier for the value. 41770 * 41771 * @return {number} The rounded and clamped value. 41772 */ 41773 41774 41775 function roundClamp() { 41776 let value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0; 41777 let min = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : Infinity; 41778 let max = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : Infinity; 41779 let step = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1; 41780 const baseValue = getNumber(value); 41781 const stepValue = getNumber(step); 41782 const precision = getPrecision(step); 41783 const rounded = Math.round(baseValue / stepValue) * stepValue; 41784 const clampedValue = (0,external_lodash_namespaceObject.clamp)(rounded, min, max); 41785 return precision ? getNumber(clampedValue.toFixed(precision)) : clampedValue; 41786 } 41787 /** 41788 * Clamps a value based on a min/max range with rounding. 41789 * Returns a string. 41790 * 41791 * @param {Parameters<typeof roundClamp>} args Arguments for roundClamp(). 41792 * @return {string} The rounded and clamped value. 41793 */ 41794 41795 function roundClampString() { 41796 return roundClamp(...arguments).toString(); 41797 } 41798 41799 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/utils/values.js 41800 /* eslint-disable jsdoc/valid-types */ 41801 41802 /** 41803 * Determines if a value is null or undefined. 41804 * 41805 * @template T 41806 * 41807 * @param {T | null | undefined} value The value to check. 41808 * @return {value is T} Whether value is not null or undefined. 41809 */ 41810 function isValueDefined(value) { 41811 return value !== undefined && value !== null; 41812 } 41813 /* eslint-enable jsdoc/valid-types */ 41814 41815 /* eslint-disable jsdoc/valid-types */ 41816 41817 /** 41818 * Determines if a value is empty, null, or undefined. 41819 * 41820 * @template T 41821 * 41822 * @param {T | "" | null | undefined} value The value to check. 41823 * @return {value is T} Whether value is empty. 41824 */ 41825 41826 function isValueEmpty(value) { 41827 const isEmptyString = value === ''; 41828 return !isValueDefined(value) || isEmptyString; 41829 } 41830 /* eslint-enable jsdoc/valid-types */ 41831 41832 /** 41833 * Get the first defined/non-null value from an array. 41834 * 41835 * @template T 41836 * 41837 * @param {Array<T | null | undefined>} values Values to derive from. 41838 * @param {T} fallbackValue Fallback value if there are no defined values. 41839 * @return {T} A defined value or the fallback value. 41840 */ 41841 41842 function getDefinedValue() { 41843 var _values$find; 41844 41845 let values = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : []; 41846 let fallbackValue = arguments.length > 1 ? arguments[1] : undefined; 41847 return (_values$find = values.find(isValueDefined)) !== null && _values$find !== void 0 ? _values$find : fallbackValue; 41848 } 41849 /** 41850 * @param {string} [locale] 41851 * @return {[RegExp, RegExp]} The delimiter and decimal regexp 41852 */ 41853 41854 const getDelimiterAndDecimalRegex = locale => { 41855 const formatted = Intl.NumberFormat(locale).format(1000.1); 41856 const delimiter = formatted[1]; 41857 const decimal = formatted[formatted.length - 2]; 41858 return [new RegExp(`\\$delimiter}`, 'g'), new RegExp(`\\$decimal}`, 'g')]; 41859 }; // https://en.wikipedia.org/wiki/Decimal_separator#Current_standards 41860 41861 41862 const INTERNATIONAL_THOUSANDS_DELIMITER = / /g; 41863 const ARABIC_NUMERAL_LOCALES = (/* unused pure expression or super */ null && (['ar', 'fa', 'ur', 'ckb', 'ps'])); 41864 const EASTERN_ARABIC_NUMBERS = /([۰-۹]|[٠-٩])/g; 41865 /** 41866 * Checks to see if a value is a numeric value (`number` or `string`). 41867 * 41868 * Intentionally ignores whether the thousands delimiters are only 41869 * in the thousands marks. 41870 * 41871 * @param {any} value 41872 * @param {string} [locale] 41873 * @return {boolean} Whether value is numeric. 41874 */ 41875 41876 function isValueNumeric(value) { 41877 let locale = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : window.navigator.language; 41878 41879 if (ARABIC_NUMERAL_LOCALES.some(l => locale.startsWith(l))) { 41880 locale = 'en-GB'; 41881 41882 if (EASTERN_ARABIC_NUMBERS.test(value)) { 41883 value = value.replace(/[٠-٩]/g, ( 41884 /** @type {string} */ 41885 d) => '٠١٢٣٤٥٦٧٨٩'.indexOf(d)).replace(/[۰-۹]/g, ( 41886 /** @type {string} */ 41887 d) => '۰۱۲۳۴۵۶۷۸۹'.indexOf(d)).replace(/٬/g, ',').replace(/٫/g, '.'); 41888 } 41889 } 41890 41891 const [delimiterRegexp, decimalRegexp] = getDelimiterAndDecimalRegex(locale); 41892 const valueToCheck = typeof value === 'string' ? value.replace(delimiterRegexp, '').replace(decimalRegexp, '.').replace(INTERNATIONAL_THOUSANDS_DELIMITER, '') : value; 41893 return !isNaN(parseFloat(valueToCheck)) && isFinite(valueToCheck); 41894 } 41895 41896 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/number-control/index.js 41897 41898 41899 // @ts-nocheck 41900 41901 /** 41902 * External dependencies 41903 */ 41904 41905 /** 41906 * WordPress dependencies 41907 */ 41908 41909 41910 41911 /** 41912 * Internal dependencies 41913 */ 41914 41915 41916 41917 41918 41919 function NumberControl(_ref, ref) { 41920 let { 41921 __unstableStateReducer: stateReducerProp, 41922 className, 41923 dragDirection = 'n', 41924 hideHTMLArrows = false, 41925 isDragEnabled = true, 41926 isShiftStepEnabled = true, 41927 label, 41928 max = Infinity, 41929 min = -Infinity, 41930 required = false, 41931 shiftStep = 10, 41932 step = 1, 41933 type: typeProp = 'number', 41934 value: valueProp, 41935 ...props 41936 } = _ref; 41937 const isStepAny = step === 'any'; 41938 const baseStep = isStepAny ? 1 : parseFloat(step); 41939 const baseValue = roundClamp(0, min, max, baseStep); 41940 41941 const constrainValue = (value, stepOverride) => { 41942 // When step is "any" clamp the value, otherwise round and clamp it. 41943 return isStepAny ? Math.min(max, Math.max(min, value)) : roundClamp(value, min, max, stepOverride !== null && stepOverride !== void 0 ? stepOverride : baseStep); 41944 }; 41945 41946 const autoComplete = typeProp === 'number' ? 'off' : null; 41947 const classes = classnames_default()('components-number-control', className); 41948 /** 41949 * "Middleware" function that intercepts updates from InputControl. 41950 * This allows us to tap into actions to transform the (next) state for 41951 * InputControl. 41952 * 41953 * @param {Object} state State from InputControl 41954 * @param {Object} action Action triggering state change 41955 * @return {Object} The updated state to apply to InputControl 41956 */ 41957 41958 const numberControlStateReducer = (state, action) => { 41959 const nextState = { ...state 41960 }; 41961 const { 41962 type, 41963 payload 41964 } = action; 41965 const event = payload === null || payload === void 0 ? void 0 : payload.event; 41966 const currentValue = nextState.value; 41967 /** 41968 * Handles custom UP and DOWN Keyboard events 41969 */ 41970 41971 if (type === PRESS_UP || type === PRESS_DOWN) { 41972 const enableShift = event.shiftKey && isShiftStepEnabled; 41973 const incrementalValue = enableShift ? parseFloat(shiftStep) * baseStep : baseStep; 41974 let nextValue = isValueEmpty(currentValue) ? baseValue : currentValue; 41975 41976 if (event !== null && event !== void 0 && event.preventDefault) { 41977 event.preventDefault(); 41978 } 41979 41980 if (type === PRESS_UP) { 41981 nextValue = add(nextValue, incrementalValue); 41982 } 41983 41984 if (type === PRESS_DOWN) { 41985 nextValue = subtract(nextValue, incrementalValue); 41986 } 41987 41988 nextState.value = constrainValue(nextValue, enableShift ? incrementalValue : null); 41989 } 41990 /** 41991 * Handles drag to update events 41992 */ 41993 41994 41995 if (type === DRAG && isDragEnabled) { 41996 const [x, y] = payload.delta; 41997 const enableShift = payload.shiftKey && isShiftStepEnabled; 41998 const modifier = enableShift ? parseFloat(shiftStep) * baseStep : baseStep; 41999 let directionModifier; 42000 let delta; 42001 42002 switch (dragDirection) { 42003 case 'n': 42004 delta = y; 42005 directionModifier = -1; 42006 break; 42007 42008 case 'e': 42009 delta = x; 42010 directionModifier = (0,external_wp_i18n_namespaceObject.isRTL)() ? -1 : 1; 42011 break; 42012 42013 case 's': 42014 delta = y; 42015 directionModifier = 1; 42016 break; 42017 42018 case 'w': 42019 delta = x; 42020 directionModifier = (0,external_wp_i18n_namespaceObject.isRTL)() ? 1 : -1; 42021 break; 42022 } 42023 42024 if (delta !== 0) { 42025 delta = Math.ceil(Math.abs(delta)) * Math.sign(delta); 42026 const distance = delta * modifier * directionModifier; 42027 nextState.value = constrainValue(add(currentValue, distance), enableShift ? modifier : null); 42028 } 42029 } 42030 /** 42031 * Handles commit (ENTER key press or blur) 42032 */ 42033 42034 42035 if (type === PRESS_ENTER || type === COMMIT) { 42036 const applyEmptyValue = required === false && currentValue === ''; 42037 nextState.value = applyEmptyValue ? currentValue : constrainValue(currentValue); 42038 } 42039 42040 return nextState; 42041 }; 42042 42043 return (0,external_wp_element_namespaceObject.createElement)(number_control_styles_Input, extends_extends({ 42044 autoComplete: autoComplete, 42045 inputMode: "numeric" 42046 }, props, { 42047 className: classes, 42048 dragDirection: dragDirection, 42049 hideHTMLArrows: hideHTMLArrows, 42050 isDragEnabled: isDragEnabled, 42051 label: label, 42052 max: max, 42053 min: min, 42054 ref: ref, 42055 required: required, 42056 step: step, 42057 type: typeProp, 42058 value: valueProp, 42059 __unstableStateReducer: (state, action) => { 42060 var _stateReducerProp; 42061 42062 const baseState = numberControlStateReducer(state, action); 42063 return (_stateReducerProp = stateReducerProp === null || stateReducerProp === void 0 ? void 0 : stateReducerProp(baseState, action)) !== null && _stateReducerProp !== void 0 ? _stateReducerProp : baseState; 42064 } 42065 })); 42066 } 42067 /* harmony default export */ var number_control = ((0,external_wp_element_namespaceObject.forwardRef)(NumberControl)); 42068 42069 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/unit-control/styles/unit-control-styles.js 42070 42071 42072 function unit_control_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } 42073 42074 /** 42075 * External dependencies 42076 */ 42077 42078 42079 /** 42080 * Internal dependencies 42081 */ 42082 42083 42084 const unit_control_styles_Root = emotion_styled_base_browser_esm("div", true ? { 42085 target: "e1bagdl33" 42086 } : 0)( true ? { 42087 name: "100d0a9", 42088 styles: "box-sizing:border-box;position:relative" 42089 } : 0); 42090 42091 const paddingStyles = _ref2 => { 42092 let { 42093 disableUnits, 42094 size 42095 } = _ref2; 42096 const paddings = { 42097 default: { 42098 paddingRight: 8 42099 }, 42100 small: { 42101 paddingRight: 8 42102 }, 42103 '__unstable-large': { 42104 paddingRight: disableUnits ? 16 : 8 42105 } 42106 }; 42107 return /*#__PURE__*/emotion_react_browser_esm_css(rtl(paddings[size])(), ";" + ( true ? "" : 0), true ? "" : 0); 42108 }; 42109 42110 var unit_control_styles_ref = true ? { 42111 name: "1y65o8", 42112 styles: "&::-webkit-outer-spin-button,&::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}" 42113 } : 0; 42114 42115 const arrowStyles = _ref3 => { 42116 let { 42117 disableUnits 42118 } = _ref3; 42119 if (disableUnits) return ''; 42120 return unit_control_styles_ref; 42121 }; // TODO: Resolve need to use &&& to increase specificity 42122 // https://github.com/WordPress/gutenberg/issues/18483 42123 42124 42125 const ValueInput = /*#__PURE__*/emotion_styled_base_browser_esm(number_control, true ? { 42126 target: "e1bagdl32" 42127 } : 0)("&&&{input{appearance:none;-moz-appearance:textfield;display:block;width:100%;", arrowStyles, ";", paddingStyles, ";}}" + ( true ? "" : 0)); 42128 const baseUnitLabelStyles = /*#__PURE__*/emotion_react_browser_esm_css("appearance:none;background:transparent;border-radius:2px;border:none;box-sizing:border-box;color:", COLORS.darkGray[500], ";display:block;font-size:8px;letter-spacing:-0.5px;outline:none;padding:2px 1px;text-align-last:center;text-transform:uppercase;width:20px;", rtl({ 42129 borderTopLeftRadius: 0, 42130 borderBottomLeftRadius: 0 42131 })(), ";" + ( true ? "" : 0), true ? "" : 0); 42132 const UnitLabel = emotion_styled_base_browser_esm("div", true ? { 42133 target: "e1bagdl31" 42134 } : 0)("&&&{pointer-events:none;", baseUnitLabelStyles, ";}" + ( true ? "" : 0)); 42135 const UnitSelect = emotion_styled_base_browser_esm("select", true ? { 42136 target: "e1bagdl30" 42137 } : 0)("&&&{", baseUnitLabelStyles, ";cursor:pointer;border:1px solid transparent;height:100%;&:hover{background-color:", COLORS.lightGray[300], ";}&:focus{border-color:", COLORS.ui.borderFocus, ";outline:2px solid transparent;outline-offset:0;}&:disabled{cursor:initial;&:hover{background-color:transparent;}}}" + ( true ? "" : 0)); 42138 42139 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/border-control/styles.js 42140 function border_control_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } 42141 42142 /** 42143 * External dependencies 42144 */ 42145 42146 42147 /** 42148 * Internal dependencies 42149 */ 42150 42151 42152 42153 42154 42155 const styles_labelStyles = true ? { 42156 name: "f3vz0n", 42157 styles: "font-weight:500" 42158 } : 0; 42159 const borderControl = true ? { 42160 name: "bjn8wh", 42161 styles: "position:relative" 42162 } : 0; 42163 const innerWrapper = () => /*#__PURE__*/emotion_react_browser_esm_css("border:", config_values.borderWidth, " solid ", COLORS.gray[200], ";border-radius:2px;flex:1 0 40%;background:#fff;", unit_control_styles_Root, "{flex:1;", rtl({ 42164 marginLeft: 0 42165 })(), ";}" + ( true ? "" : 0), true ? "" : 0); 42166 const styles_wrapperWidth = width => { 42167 return /*#__PURE__*/emotion_react_browser_esm_css("width:", width, ";flex:0 0 auto;" + ( true ? "" : 0), true ? "" : 0); 42168 }; 42169 const borderControlDropdown = () => /*#__PURE__*/emotion_react_browser_esm_css("background:#fff;", rtl({ 42170 borderRadius: `1px 0 0 1px`, 42171 borderRight: `$config_values.borderWidth} solid $COLORS.gray[200]}` 42172 }, { 42173 borderRadius: `0 1px 1px 0`, 42174 borderLeft: `$config_values.borderWidth} solid $COLORS.gray[200]}` 42175 })(), " &&>button{padding:", space(1), ";border-radius:inherit;}" + ( true ? "" : 0), true ? "" : 0); 42176 const colorIndicatorBorder = border => { 42177 const { 42178 color, 42179 style 42180 } = border || {}; 42181 const fallbackColor = !!style && style !== 'none' ? COLORS.gray[300] : undefined; 42182 return /*#__PURE__*/emotion_react_browser_esm_css("border-style:", style === 'none' ? 'solid' : style, ";border-color:", color || fallbackColor, ";" + ( true ? "" : 0), true ? "" : 0); 42183 }; 42184 const colorIndicatorWrapper = border => { 42185 const { 42186 style 42187 } = border || {}; 42188 return /*#__PURE__*/emotion_react_browser_esm_css("border-radius:9999px;border:2px solid transparent;", style ? colorIndicatorBorder(border) : undefined, " width:28px;height:28px;padding:2px;&>span{background:linear-gradient(\n\t\t\t\t-45deg,\n\t\t\t\ttransparent 48%,\n\t\t\t\trgb( 0 0 0 / 20% ) 48%,\n\t\t\t\trgb( 0 0 0 / 20% ) 52%,\n\t\t\t\ttransparent 52%\n\t\t\t);}" + ( true ? "" : 0), true ? "" : 0); 42189 }; 42190 const borderControlPopover = true ? { 42191 name: "1phacrs", 42192 styles: "&&>div>div{padding:0;}" 42193 } : 0; 42194 const borderControlPopoverControls = /*#__PURE__*/emotion_react_browser_esm_css("padding:", space(2), ";>div:first-of-type>", StyledLabel, "{margin-bottom:0;", styles_labelStyles, ";}&& ", StyledLabel, "+button:not( .has-text ){min-width:24px;padding:0;}" + ( true ? "" : 0), true ? "" : 0); 42195 const borderControlPopoverContent = /*#__PURE__*/emotion_react_browser_esm_css( true ? "" : 0, true ? "" : 0); 42196 const borderColorIndicator = /*#__PURE__*/emotion_react_browser_esm_css( true ? "" : 0, true ? "" : 0); 42197 const resetButton = /*#__PURE__*/emotion_react_browser_esm_css("justify-content:center;width:100%;&&{border-top:", config_values.borderWidth, " solid ", COLORS.gray[200], ";height:46px;}" + ( true ? "" : 0), true ? "" : 0); 42198 const borderWidthControl = () => /*#__PURE__*/emotion_react_browser_esm_css("&&& ", BackdropUI, "{border:none;}&&& input{", rtl({ 42199 paddingRight: 0 42200 })(), ";}" + ( true ? "" : 0), true ? "" : 0); 42201 const borderControlStylePicker = /*#__PURE__*/emotion_react_browser_esm_css(StyledLabel, "{", styles_labelStyles, ";}" + ( true ? "" : 0), true ? "" : 0); 42202 const borderStyleButton = true ? { 42203 name: "1486260", 42204 styles: "&&&&&{min-width:30px;width:30px;height:30px;padding:3px;}" 42205 } : 0; 42206 const borderSlider = () => /*#__PURE__*/emotion_react_browser_esm_css("flex:1 1 60%;", rtl({ 42207 marginRight: space(3) 42208 })(), " ", StyledField, "{margin-bottom:0;font-size:0;display:flex;}" + ( true ? "" : 0), true ? "" : 0); 42209 42210 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/border-control/border-control-style-picker/hook.js 42211 /** 42212 * WordPress dependencies 42213 */ 42214 42215 /** 42216 * Internal dependencies 42217 */ 42218 42219 42220 42221 42222 function useBorderControlStylePicker(props) { 42223 const { 42224 className, 42225 ...otherProps 42226 } = useContextSystem(props, 'BorderControlStylePicker'); // Generate class names. 42227 42228 const cx = useCx(); 42229 const classes = (0,external_wp_element_namespaceObject.useMemo)(() => { 42230 return cx(borderControlStylePicker, className); 42231 }, [className, cx]); 42232 const buttonClassName = (0,external_wp_element_namespaceObject.useMemo)(() => { 42233 return cx(borderStyleButton); 42234 }, [cx]); 42235 return { ...otherProps, 42236 className: classes, 42237 buttonClassName 42238 }; 42239 } 42240 42241 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/border-control/border-control-style-picker/component.js 42242 42243 42244 42245 /** 42246 * WordPress dependencies 42247 */ 42248 42249 42250 /** 42251 * Internal dependencies 42252 */ 42253 42254 42255 42256 42257 42258 42259 42260 42261 const BORDER_STYLES = [{ 42262 label: (0,external_wp_i18n_namespaceObject.__)('Solid'), 42263 icon: line_solid, 42264 value: 'solid' 42265 }, { 42266 label: (0,external_wp_i18n_namespaceObject.__)('Dashed'), 42267 icon: line_dashed, 42268 value: 'dashed' 42269 }, { 42270 label: (0,external_wp_i18n_namespaceObject.__)('Dotted'), 42271 icon: line_dotted, 42272 value: 'dotted' 42273 }]; 42274 42275 const component_Label = props => { 42276 const { 42277 label, 42278 hideLabelFromVision 42279 } = props; 42280 42281 if (!label) { 42282 return null; 42283 } 42284 42285 return hideLabelFromVision ? (0,external_wp_element_namespaceObject.createElement)(visually_hidden_component, { 42286 as: "label" 42287 }, label) : (0,external_wp_element_namespaceObject.createElement)(StyledLabel, null, label); 42288 }; 42289 42290 const BorderControlStylePicker = (props, forwardedRef) => { 42291 const { 42292 buttonClassName, 42293 hideLabelFromVision, 42294 label, 42295 onChange, 42296 value, 42297 ...otherProps 42298 } = useBorderControlStylePicker(props); 42299 return (0,external_wp_element_namespaceObject.createElement)(component, extends_extends({}, otherProps, { 42300 ref: forwardedRef 42301 }), (0,external_wp_element_namespaceObject.createElement)(component_Label, { 42302 label: label, 42303 hideLabelFromVision: hideLabelFromVision 42304 }), (0,external_wp_element_namespaceObject.createElement)(flex_component, { 42305 justify: "flex-start", 42306 gap: 1 42307 }, BORDER_STYLES.map(borderStyle => (0,external_wp_element_namespaceObject.createElement)(build_module_button, { 42308 key: borderStyle.value, 42309 className: buttonClassName, 42310 icon: borderStyle.icon, 42311 isSmall: true, 42312 isPressed: borderStyle.value === value, 42313 onClick: () => onChange(borderStyle.value === value ? undefined : borderStyle.value), 42314 "aria-label": borderStyle.label, 42315 label: borderStyle.label, 42316 showTooltip: true 42317 })))); 42318 }; 42319 42320 const ConnectedBorderControlStylePicker = contextConnect(BorderControlStylePicker, 'BorderControlStylePicker'); 42321 /* harmony default export */ var border_control_style_picker_component = (ConnectedBorderControlStylePicker); 42322 42323 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/color-indicator/index.js 42324 42325 42326 // @ts-nocheck 42327 42328 /** 42329 * External dependencies 42330 */ 42331 42332 42333 const ColorIndicator = _ref => { 42334 let { 42335 className, 42336 colorValue, 42337 ...props 42338 } = _ref; 42339 return (0,external_wp_element_namespaceObject.createElement)("span", extends_extends({ 42340 className: classnames_default()('component-color-indicator', className), 42341 style: { 42342 background: colorValue 42343 } 42344 }, props)); 42345 }; 42346 42347 /* harmony default export */ var color_indicator = (ColorIndicator); 42348 42349 ;// CONCATENATED MODULE: ./node_modules/colord/plugins/a11y.mjs 42350 var a11y_o=function(o){var t=o/255;return t<.04045?t/12.92:Math.pow((t+.055)/1.055,2.4)},a11y_t=function(t){return.2126*a11y_o(t.r)+.7152*a11y_o(t.g)+.0722*a11y_o(t.b)};/* harmony default export */ function a11y(o){o.prototype.luminance=function(){return o=a11y_t(this.rgba),void 0===(r=2)&&(r=0),void 0===n&&(n=Math.pow(10,r)),Math.round(n*o)/n+0;var o,r,n},o.prototype.contrast=function(r){void 0===r&&(r="#FFF");var n,a,i,e,v,u,d,c=r instanceof o?r:new o(r);return e=this.rgba,v=c.toRgb(),u=a11y_t(e),d=a11y_t(v),n=u>d?(u+.05)/(d+.05):(d+.05)/(u+.05),void 0===(a=2)&&(a=0),void 0===i&&(i=Math.pow(10,a)),Math.floor(i*n)/i+0},o.prototype.isReadable=function(o,t){return void 0===o&&(o="#FFF"),void 0===t&&(t={}),this.contrast(o)>=(e=void 0===(i=(r=t).size)?"normal":i,"AAA"===(a=void 0===(n=r.level)?"AA":n)&&"normal"===e?7:"AA"===a&&"large"===e?3:4.5);var r,n,a,i,e}} 42351 42352 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/dropdown/index.js 42353 42354 42355 // @ts-nocheck 42356 42357 /** 42358 * External dependencies 42359 */ 42360 42361 /** 42362 * WordPress dependencies 42363 */ 42364 42365 42366 /** 42367 * Internal dependencies 42368 */ 42369 42370 42371 42372 function useObservableState(initialState, onStateChange) { 42373 const [state, setState] = (0,external_wp_element_namespaceObject.useState)(initialState); 42374 return [state, value => { 42375 setState(value); 42376 42377 if (onStateChange) { 42378 onStateChange(value); 42379 } 42380 }]; 42381 } 42382 42383 function Dropdown(props) { 42384 var _popoverProps$anchorR; 42385 42386 const { 42387 renderContent, 42388 renderToggle, 42389 position = 'bottom right', 42390 className, 42391 contentClassName, 42392 expandOnMobile, 42393 headerTitle, 42394 focusOnMount, 42395 popoverProps, 42396 onClose, 42397 onToggle 42398 } = props; 42399 const containerRef = (0,external_wp_element_namespaceObject.useRef)(); 42400 const [isOpen, setIsOpen] = useObservableState(false, onToggle); 42401 (0,external_wp_element_namespaceObject.useEffect)(() => () => { 42402 if (onToggle) { 42403 onToggle(false); 42404 } 42405 }, []); 42406 42407 function toggle() { 42408 setIsOpen(!isOpen); 42409 } 42410 /** 42411 * Closes the popover when focus leaves it unless the toggle was pressed or 42412 * focus has moved to a separate dialog. The former is to let the toggle 42413 * handle closing the popover and the latter is to preserve presence in 42414 * case a dialog has opened, allowing focus to return when it's dismissed. 42415 */ 42416 42417 42418 function closeIfFocusOutside() { 42419 const { 42420 ownerDocument 42421 } = containerRef.current; 42422 const dialog = ownerDocument.activeElement.closest('[role="dialog"]'); 42423 42424 if (!containerRef.current.contains(ownerDocument.activeElement) && (!dialog || dialog.contains(containerRef.current))) { 42425 close(); 42426 } 42427 } 42428 42429 function close() { 42430 if (onClose) { 42431 onClose(); 42432 } 42433 42434 setIsOpen(false); 42435 } 42436 42437 const args = { 42438 isOpen, 42439 onToggle: toggle, 42440 onClose: close 42441 }; 42442 return (0,external_wp_element_namespaceObject.createElement)("div", { 42443 className: classnames_default()('components-dropdown', className), 42444 ref: containerRef // Some UAs focus the closest focusable parent when the toggle is 42445 // clicked. Making this div focusable ensures such UAs will focus 42446 // it and `closeIfFocusOutside` can tell if the toggle was clicked. 42447 , 42448 tabIndex: "-1" 42449 }, renderToggle(args), isOpen && (0,external_wp_element_namespaceObject.createElement)(popover, extends_extends({ 42450 position: position, 42451 onClose: close, 42452 onFocusOutside: closeIfFocusOutside, 42453 expandOnMobile: expandOnMobile, 42454 headerTitle: headerTitle, 42455 focusOnMount: focusOnMount 42456 }, popoverProps, { 42457 anchorRef: (_popoverProps$anchorR = popoverProps === null || popoverProps === void 0 ? void 0 : popoverProps.anchorRef) !== null && _popoverProps$anchorR !== void 0 ? _popoverProps$anchorR : containerRef.current, 42458 className: classnames_default()('components-dropdown__content', popoverProps ? popoverProps.className : undefined, contentClassName) 42459 }), renderContent(args))); 42460 } 42461 42462 ;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/settings.js 42463 42464 42465 /** 42466 * WordPress dependencies 42467 */ 42468 42469 const settings = (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.SVG, { 42470 xmlns: "http://www.w3.org/2000/svg", 42471 viewBox: "0 0 24 24" 42472 }, (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.Path, { 42473 d: "M14.5 13.8c-1.1 0-2.1.7-2.4 1.8H4V17h8.1c.3 1 1.3 1.8 2.4 1.8s2.1-.7 2.4-1.8H20v-1.5h-3.1c-.3-1-1.3-1.7-2.4-1.7zM11.9 7c-.3-1-1.3-1.8-2.4-1.8S7.4 6 7.1 7H4v1.5h3.1c.3 1 1.3 1.8 2.4 1.8s2.1-.7 2.4-1.8H20V7h-8.1z" 42474 })); 42475 /* harmony default export */ var library_settings = (settings); 42476 42477 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/h-stack/utils.js 42478 /** 42479 * External dependencies 42480 */ 42481 42482 /** @type {import('./types').Alignments} */ 42483 42484 const utils_ALIGNMENTS = { 42485 bottom: { 42486 align: 'flex-end', 42487 justify: 'center' 42488 }, 42489 bottomLeft: { 42490 align: 'flex-start', 42491 justify: 'flex-end' 42492 }, 42493 bottomRight: { 42494 align: 'flex-end', 42495 justify: 'flex-end' 42496 }, 42497 center: { 42498 align: 'center', 42499 justify: 'center' 42500 }, 42501 edge: { 42502 align: 'center', 42503 justify: 'space-between' 42504 }, 42505 left: { 42506 align: 'center', 42507 justify: 'flex-start' 42508 }, 42509 right: { 42510 align: 'center', 42511 justify: 'flex-end' 42512 }, 42513 stretch: { 42514 align: 'stretch' 42515 }, 42516 top: { 42517 align: 'flex-start', 42518 justify: 'center' 42519 }, 42520 topLeft: { 42521 align: 'flex-start', 42522 justify: 'flex-start' 42523 }, 42524 topRight: { 42525 align: 'flex-start', 42526 justify: 'flex-end' 42527 } 42528 }; 42529 /** @type {import('./types').Alignments} */ 42530 42531 const V_ALIGNMENTS = { 42532 bottom: { 42533 justify: 'flex-end', 42534 align: 'center' 42535 }, 42536 bottomLeft: { 42537 justify: 'flex-start', 42538 align: 'flex-end' 42539 }, 42540 bottomRight: { 42541 justify: 'flex-end', 42542 align: 'flex-end' 42543 }, 42544 center: { 42545 justify: 'center', 42546 align: 'center' 42547 }, 42548 edge: { 42549 justify: 'space-between', 42550 align: 'center' 42551 }, 42552 left: { 42553 justify: 'center', 42554 align: 'flex-start' 42555 }, 42556 right: { 42557 justify: 'center', 42558 align: 'flex-end' 42559 }, 42560 stretch: { 42561 justify: 'stretch' 42562 }, 42563 top: { 42564 justify: 'flex-start', 42565 align: 'center' 42566 }, 42567 topLeft: { 42568 justify: 'flex-start', 42569 align: 'flex-start' 42570 }, 42571 topRight: { 42572 justify: 'flex-start', 42573 align: 'flex-end' 42574 } 42575 }; 42576 /* eslint-disable jsdoc/valid-types */ 42577 42578 /** 42579 * @param {import('./types').HStackAlignment | import('react').CSSProperties[ 'alignItems' ]} alignment Where to align. 42580 * @param {import('../flex/types').FlexDirection} [direction='row'] Direction to align. 42581 * @return {import('./types').AlignmentProps} Alignment props. 42582 */ 42583 42584 /* eslint-enable jsdoc/valid-types */ 42585 42586 function getAlignmentProps(alignment) { 42587 let direction = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'row'; 42588 42589 if ((0,external_lodash_namespaceObject.isNil)(alignment)) { 42590 return {}; 42591 } 42592 42593 const isVertical = direction === 'column'; 42594 const props = isVertical ? V_ALIGNMENTS : utils_ALIGNMENTS; 42595 const alignmentProps = alignment in props ? props[ 42596 /** @type {keyof typeof ALIGNMENTS} */ 42597 alignment] : { 42598 align: alignment 42599 }; 42600 return alignmentProps; 42601 } 42602 42603 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/ui/utils/get-valid-children.js 42604 /** 42605 * External dependencies 42606 */ 42607 42608 /** 42609 * WordPress dependencies 42610 */ 42611 42612 /** 42613 * Gets a collection of available children elements from a React component's children prop. 42614 * 42615 * @param children 42616 * 42617 * @return An array of available children. 42618 */ 42619 42620 function getValidChildren(children) { 42621 if (typeof children === 'string') return [children]; 42622 return external_wp_element_namespaceObject.Children.toArray(children).filter(child => (0,external_wp_element_namespaceObject.isValidElement)(child)); 42623 } 42624 42625 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/h-stack/hook.js 42626 42627 42628 42629 /** 42630 * Internal dependencies 42631 */ 42632 42633 42634 42635 42636 /** 42637 * 42638 * @param {import('../ui/context').WordPressComponentProps<import('./types').Props, 'div'>} props 42639 */ 42640 42641 function useHStack(props) { 42642 const { 42643 alignment = 'edge', 42644 children, 42645 direction, 42646 spacing = 2, 42647 ...otherProps 42648 } = useContextSystem(props, 'HStack'); 42649 const align = getAlignmentProps(alignment, direction); 42650 const validChildren = getValidChildren(children); 42651 const clonedChildren = validChildren.map( // @ts-ignore 42652 ( 42653 /** @type {import('react').ReactElement} */ 42654 child, index) => { 42655 const _key = child.key || `hstack-$index}`; 42656 42657 const _isSpacer = hasConnectNamespace(child, ['Spacer']); 42658 42659 if (_isSpacer) { 42660 return (0,external_wp_element_namespaceObject.createElement)(flex_item_component, extends_extends({ 42661 isBlock: true, 42662 key: _key 42663 }, child.props)); 42664 } 42665 42666 return child; 42667 }); 42668 const propsForFlex = { 42669 children: clonedChildren, 42670 direction, 42671 justify: 'center', 42672 ...align, 42673 ...otherProps, 42674 gap: spacing 42675 }; 42676 const flexProps = useFlex(propsForFlex); 42677 return flexProps; 42678 } 42679 42680 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/h-stack/component.js 42681 42682 42683 42684 /** 42685 * Internal dependencies 42686 */ 42687 42688 42689 42690 /** 42691 * @param {import('../ui/context').WordPressComponentProps<import('./types').Props, 'div'>} props 42692 * @param {import('react').ForwardedRef<any>} forwardedRef 42693 */ 42694 42695 function HStack(props, forwardedRef) { 42696 const hStackProps = useHStack(props); 42697 return (0,external_wp_element_namespaceObject.createElement)(component, extends_extends({}, hStackProps, { 42698 ref: forwardedRef 42699 })); 42700 } 42701 /** 42702 * `HStack` (Horizontal Stack) arranges child elements in a horizontal line. 42703 * 42704 * `HStack` can render anything inside. 42705 * 42706 * @example 42707 * ```jsx 42708 * import { 42709 * __experimentalHStack as HStack, 42710 * __experimentalText as Text, 42711 * } from `@wordpress/components`; 42712 * 42713 * function Example() { 42714 * return ( 42715 * <HStack> 42716 * <Text>Code</Text> 42717 * <Text>is</Text> 42718 * <Text>Poetry</Text> 42719 * </HStack> 42720 * ); 42721 * } 42722 * ``` 42723 */ 42724 42725 42726 const ConnectedHStack = contextConnect(HStack, 'HStack'); 42727 /* harmony default export */ var h_stack_component = (ConnectedHStack); 42728 42729 ;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/icon/index.js 42730 /** 42731 * WordPress dependencies 42732 */ 42733 42734 /** @typedef {{icon: JSX.Element, size?: number} & import('@wordpress/primitives').SVGProps} IconProps */ 42735 42736 /** 42737 * Return an SVG icon. 42738 * 42739 * @param {IconProps} props icon is the SVG component to render 42740 * size is a number specifiying the icon size in pixels 42741 * Other props will be passed to wrapped SVG component 42742 * 42743 * @return {JSX.Element} Icon component 42744 */ 42745 42746 function icon_Icon(_ref) { 42747 let { 42748 icon, 42749 size = 24, 42750 ...props 42751 } = _ref; 42752 return (0,external_wp_element_namespaceObject.cloneElement)(icon, { 42753 width: size, 42754 height: size, 42755 ...props 42756 }); 42757 } 42758 42759 /* harmony default export */ var icons_build_module_icon = (icon_Icon); 42760 42761 ;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/chevron-down.js 42762 42763 42764 /** 42765 * WordPress dependencies 42766 */ 42767 42768 const chevronDown = (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.SVG, { 42769 viewBox: "0 0 24 24", 42770 xmlns: "http://www.w3.org/2000/svg" 42771 }, (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.Path, { 42772 d: "M17.5 11.6L12 16l-5.5-4.4.9-1.2L12 14l4.5-3.6 1 1.2z" 42773 })); 42774 /* harmony default export */ var chevron_down = (chevronDown); 42775 42776 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/select-control/styles/select-control-styles.js 42777 42778 42779 /** 42780 * External dependencies 42781 */ 42782 42783 42784 /** 42785 * Internal dependencies 42786 */ 42787 42788 42789 const select_control_styles_disabledStyles = _ref => { 42790 let { 42791 disabled 42792 } = _ref; 42793 if (!disabled) return ''; 42794 return /*#__PURE__*/emotion_react_browser_esm_css({ 42795 color: COLORS.ui.textDisabled 42796 }, true ? "" : 0, true ? "" : 0); 42797 }; 42798 42799 const select_control_styles_fontSizeStyles = _ref2 => { 42800 let { 42801 selectSize 42802 } = _ref2; 42803 const sizes = { 42804 default: '13px', 42805 small: '11px', 42806 '__unstable-large': '13px' 42807 }; 42808 const fontSize = sizes[selectSize]; 42809 const fontSizeMobile = '16px'; 42810 if (!fontSize) return ''; 42811 return /*#__PURE__*/emotion_react_browser_esm_css("font-size:", fontSizeMobile, ";@media ( min-width: 600px ){font-size:", fontSize, ";}" + ( true ? "" : 0), true ? "" : 0); 42812 }; 42813 42814 const select_control_styles_sizeStyles = _ref3 => { 42815 let { 42816 selectSize 42817 } = _ref3; 42818 const sizes = { 42819 default: { 42820 height: 30, 42821 lineHeight: 1, 42822 minHeight: 30 42823 }, 42824 small: { 42825 height: 24, 42826 lineHeight: 1, 42827 minHeight: 24 42828 }, 42829 '__unstable-large': { 42830 height: 40, 42831 lineHeight: 1, 42832 minHeight: 40 42833 } 42834 }; 42835 const style = sizes[selectSize] || sizes.default; 42836 return /*#__PURE__*/emotion_react_browser_esm_css(style, true ? "" : 0, true ? "" : 0); 42837 }; 42838 42839 const sizePaddings = _ref4 => { 42840 let { 42841 selectSize = 'default' 42842 } = _ref4; 42843 const sizes = { 42844 default: { 42845 paddingLeft: 8, 42846 paddingRight: 24 42847 }, 42848 small: { 42849 paddingLeft: 8, 42850 paddingRight: 24 42851 }, 42852 '__unstable-large': { 42853 paddingLeft: 16, 42854 paddingRight: 32 42855 } 42856 }; 42857 return rtl(sizes[selectSize]); 42858 }; // TODO: Resolve need to use &&& to increase specificity 42859 // https://github.com/WordPress/gutenberg/issues/18483 42860 42861 42862 const Select = emotion_styled_base_browser_esm("select", true ? { 42863 target: "e1mv6sxx1" 42864 } : 0)("&&&{appearance:none;background:transparent;box-sizing:border-box;border:none;box-shadow:none!important;color:", COLORS.black, ";display:block;font-family:inherit;margin:0;width:100%;", select_control_styles_disabledStyles, ";", select_control_styles_fontSizeStyles, ";", select_control_styles_sizeStyles, ";", sizePaddings, ";}" + ( true ? "" : 0)); 42865 const DownArrowWrapper = emotion_styled_base_browser_esm("div", true ? { 42866 target: "e1mv6sxx0" 42867 } : 0)("align-items:center;bottom:0;box-sizing:border-box;display:flex;padding:0 4px;pointer-events:none;position:absolute;top:0;", rtl({ 42868 right: 0 42869 }), " svg{display:block;}" + ( true ? "" : 0)); 42870 42871 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/select-control/index.js 42872 42873 42874 42875 /** 42876 * External dependencies 42877 */ 42878 42879 42880 42881 /** 42882 * WordPress dependencies 42883 */ 42884 42885 42886 42887 /** 42888 * Internal dependencies 42889 */ 42890 42891 42892 42893 42894 42895 function select_control_useUniqueId(idProp) { 42896 const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(SelectControl); 42897 const id = `inspector-select-control-$instanceId}`; 42898 return idProp || id; 42899 } 42900 42901 function SelectControl(_ref, ref) { 42902 let { 42903 className, 42904 disabled = false, 42905 help, 42906 hideLabelFromVision, 42907 id: idProp, 42908 label, 42909 multiple = false, 42910 onBlur = external_lodash_namespaceObject.noop, 42911 onChange = external_lodash_namespaceObject.noop, 42912 onFocus = external_lodash_namespaceObject.noop, 42913 options = [], 42914 size = 'default', 42915 value: valueProp, 42916 labelPosition = 'top', 42917 children, 42918 prefix, 42919 suffix, 42920 ...props 42921 } = _ref; 42922 const [isFocused, setIsFocused] = (0,external_wp_element_namespaceObject.useState)(false); 42923 const id = select_control_useUniqueId(idProp); 42924 const helpId = help ? `$id}__help` : undefined; // Disable reason: A select with an onchange throws a warning. 42925 42926 if ((0,external_lodash_namespaceObject.isEmpty)(options) && !children) return null; 42927 42928 const handleOnBlur = event => { 42929 onBlur(event); 42930 setIsFocused(false); 42931 }; 42932 42933 const handleOnFocus = event => { 42934 onFocus(event); 42935 setIsFocused(true); 42936 }; 42937 42938 const handleOnChange = event => { 42939 if (multiple) { 42940 const selectedOptions = Array.from(event.target.options).filter(_ref2 => { 42941 let { 42942 selected 42943 } = _ref2; 42944 return selected; 42945 }); 42946 const newValues = selectedOptions.map(_ref3 => { 42947 let { 42948 value 42949 } = _ref3; 42950 return value; 42951 }); 42952 onChange(newValues); 42953 return; 42954 } 42955 42956 onChange(event.target.value, { 42957 event 42958 }); 42959 }; 42960 42961 const classes = classnames_default()('components-select-control', className); 42962 /* eslint-disable jsx-a11y/no-onchange */ 42963 42964 return (0,external_wp_element_namespaceObject.createElement)(base_control, { 42965 help: help, 42966 id: id 42967 }, (0,external_wp_element_namespaceObject.createElement)(input_base, { 42968 className: classes, 42969 disabled: disabled, 42970 hideLabelFromVision: hideLabelFromVision, 42971 id: id, 42972 isFocused: isFocused, 42973 label: label, 42974 size: size, 42975 suffix: suffix || (0,external_wp_element_namespaceObject.createElement)(DownArrowWrapper, null, (0,external_wp_element_namespaceObject.createElement)(icons_build_module_icon, { 42976 icon: chevron_down, 42977 size: 18 42978 })), 42979 prefix: prefix, 42980 labelPosition: labelPosition 42981 }, (0,external_wp_element_namespaceObject.createElement)(Select, extends_extends({}, props, { 42982 "aria-describedby": helpId, 42983 className: "components-select-control__input", 42984 disabled: disabled, 42985 id: id, 42986 multiple: multiple, 42987 onBlur: handleOnBlur, 42988 onChange: handleOnChange, 42989 onFocus: handleOnFocus, 42990 ref: ref, 42991 selectSize: size, 42992 value: valueProp 42993 }), children || options.map((option, index) => { 42994 const key = option.id || `$option.label}-$option.value}-$index}`; 42995 return (0,external_wp_element_namespaceObject.createElement)("option", { 42996 key: key, 42997 value: option.value, 42998 disabled: option.disabled 42999 }, option.label); 43000 })))); 43001 /* eslint-enable jsx-a11y/no-onchange */ 43002 } 43003 43004 const select_control_ForwardedComponent = (0,external_wp_element_namespaceObject.forwardRef)(SelectControl); 43005 /* harmony default export */ var select_control = (select_control_ForwardedComponent); 43006 43007 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/utils/hooks/use-controlled-state.js 43008 /** 43009 * WordPress dependencies 43010 */ 43011 43012 /** 43013 * Internal dependencies 43014 */ 43015 43016 43017 /** 43018 * @template T 43019 * @typedef Options 43020 * @property {T | undefined} initial Initial value 43021 * @property {T | ""} fallback Fallback value 43022 */ 43023 43024 /** @type {Readonly<{ initial: undefined, fallback: '' }>} */ 43025 43026 const defaultOptions = { 43027 initial: undefined, 43028 43029 /** 43030 * Defaults to empty string, as that is preferred for usage with 43031 * <input />, <textarea />, and <select /> form elements. 43032 */ 43033 fallback: '' 43034 }; 43035 /** 43036 * Custom hooks for "controlled" components to track and consolidate internal 43037 * state and incoming values. This is useful for components that render 43038 * `input`, `textarea`, or `select` HTML elements. 43039 * 43040 * https://reactjs.org/docs/forms.html#controlled-components 43041 * 43042 * At first, a component using useControlledState receives an initial prop 43043 * value, which is used as initial internal state. 43044 * 43045 * This internal state can be maintained and updated without 43046 * relying on new incoming prop values. 43047 * 43048 * Unlike the basic useState hook, useControlledState's state can 43049 * be updated if a new incoming prop value is changed. 43050 * 43051 * @template T 43052 * 43053 * @param {T | undefined} currentState The current value. 43054 * @param {Options<T>} [options=defaultOptions] Additional options for the hook. 43055 * 43056 * @return {[T | "", (nextState: T) => void]} The controlled value and the value setter. 43057 */ 43058 43059 function useControlledState(currentState) { 43060 let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultOptions; 43061 const { 43062 initial, 43063 fallback 43064 } = { ...defaultOptions, 43065 ...options 43066 }; 43067 const [internalState, setInternalState] = (0,external_wp_element_namespaceObject.useState)(currentState); 43068 const hasCurrentState = isValueDefined(currentState); 43069 /* 43070 * Resets internal state if value every changes from uncontrolled <-> controlled. 43071 */ 43072 43073 (0,external_wp_element_namespaceObject.useEffect)(() => { 43074 if (hasCurrentState && internalState) { 43075 setInternalState(undefined); 43076 } 43077 }, [hasCurrentState, internalState]); 43078 const state = getDefinedValue([currentState, internalState, initial], fallback); 43079 /* eslint-disable jsdoc/no-undefined-types */ 43080 43081 /** @type {(nextState: T) => void} */ 43082 43083 const setState = nextState => { 43084 if (!hasCurrentState) { 43085 setInternalState(nextState); 43086 } 43087 }; 43088 /* eslint-enable jsdoc/no-undefined-types */ 43089 43090 43091 return [state, setState]; 43092 } 43093 43094 /* harmony default export */ var use_controlled_state = (useControlledState); 43095 43096 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/range-control/utils.js 43097 // @ts-nocheck 43098 43099 /** 43100 * External dependencies 43101 */ 43102 43103 /** 43104 * WordPress dependencies 43105 */ 43106 43107 43108 /** 43109 * Internal dependencies 43110 */ 43111 43112 43113 /** 43114 * A float supported clamp function for a specific value. 43115 * 43116 * @param {number|null} value The value to clamp. 43117 * @param {number} min The minimum value. 43118 * @param {number} max The maximum value. 43119 * 43120 * @return {number} A (float) number 43121 */ 43122 43123 function floatClamp(value, min, max) { 43124 if (typeof value !== 'number') { 43125 return null; 43126 } 43127 43128 return parseFloat((0,external_lodash_namespaceObject.clamp)(value, min, max)); 43129 } 43130 /** 43131 * Hook to store a clamped value, derived from props. 43132 * 43133 * @param {Object} settings Hook settings. 43134 * @param {number} settings.min The minimum value. 43135 * @param {number} settings.max The maximum value. 43136 * @param {number} settings.value The current value. 43137 * @param {any} settings.initial The initial value. 43138 * 43139 * @return {[*, Function]} The controlled value and the value setter. 43140 */ 43141 43142 function useControlledRangeValue(_ref) { 43143 let { 43144 min, 43145 max, 43146 value: valueProp, 43147 initial 43148 } = _ref; 43149 const [state, setInternalState] = use_controlled_state(floatClamp(valueProp, min, max), { 43150 initial, 43151 fallback: null 43152 }); 43153 const setState = (0,external_wp_element_namespaceObject.useCallback)(nextValue => { 43154 if (nextValue === null) { 43155 setInternalState(null); 43156 } else { 43157 setInternalState(floatClamp(nextValue, min, max)); 43158 } 43159 }, [min, max]); 43160 return [state, setState]; 43161 } 43162 /** 43163 * Hook to encapsulate the debouncing "hover" to better handle the showing 43164 * and hiding of the Tooltip. 43165 * 43166 * @param {Object} settings Hook settings. 43167 * @param {Function} [settings.onShow=noop] A callback function invoked when the element is shown. 43168 * @param {Function} [settings.onHide=noop] A callback function invoked when the element is hidden. 43169 * @param {Function} [settings.onMouseMove=noop] A callback function invoked when the mouse is moved. 43170 * @param {Function} [settings.onMouseLeave=noop] A callback function invoked when the mouse is moved out of the element. 43171 * @param {number} [settings.timeout=300] Timeout before the element is shown or hidden. 43172 * 43173 * @return {Object} Bound properties for use on a React.Node. 43174 */ 43175 43176 function useDebouncedHoverInteraction(_ref2) { 43177 let { 43178 onHide = external_lodash_namespaceObject.noop, 43179 onMouseLeave = external_lodash_namespaceObject.noop, 43180 onMouseMove = external_lodash_namespaceObject.noop, 43181 onShow = external_lodash_namespaceObject.noop, 43182 timeout = 300 43183 } = _ref2; 43184 const [show, setShow] = (0,external_wp_element_namespaceObject.useState)(false); 43185 const timeoutRef = (0,external_wp_element_namespaceObject.useRef)(); 43186 const setDebouncedTimeout = (0,external_wp_element_namespaceObject.useCallback)(callback => { 43187 window.clearTimeout(timeoutRef.current); 43188 timeoutRef.current = setTimeout(callback, timeout); 43189 }, [timeout]); 43190 const handleOnMouseMove = (0,external_wp_element_namespaceObject.useCallback)(event => { 43191 onMouseMove(event); 43192 setDebouncedTimeout(() => { 43193 if (!show) { 43194 setShow(true); 43195 onShow(); 43196 } 43197 }); 43198 }, []); 43199 const handleOnMouseLeave = (0,external_wp_element_namespaceObject.useCallback)(event => { 43200 onMouseLeave(event); 43201 setDebouncedTimeout(() => { 43202 setShow(false); 43203 onHide(); 43204 }); 43205 }, []); 43206 (0,external_wp_element_namespaceObject.useEffect)(() => { 43207 return () => { 43208 window.clearTimeout(timeoutRef.current); 43209 }; 43210 }); 43211 return { 43212 onMouseMove: handleOnMouseMove, 43213 onMouseLeave: handleOnMouseLeave 43214 }; 43215 } 43216 43217 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/range-control/styles/range-control-styles.js 43218 43219 43220 function range_control_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } 43221 43222 // @ts-nocheck 43223 43224 /** 43225 * External dependencies 43226 */ 43227 43228 43229 /** 43230 * Internal dependencies 43231 */ 43232 43233 43234 43235 const rangeHeightValue = 30; 43236 const railHeight = 4; 43237 43238 const rangeHeight = () => /*#__PURE__*/emotion_react_browser_esm_css({ 43239 height: rangeHeightValue, 43240 minHeight: rangeHeightValue 43241 }, true ? "" : 0, true ? "" : 0); 43242 43243 const thumbSize = 12; 43244 const range_control_styles_Root = emotion_styled_base_browser_esm("div", true ? { 43245 target: "exqw8y214" 43246 } : 0)( true ? { 43247 name: "17z6zai", 43248 styles: "-webkit-tap-highlight-color:transparent;box-sizing:border-box;align-items:flex-start;display:inline-flex;justify-content:flex-start;padding:0;position:relative;touch-action:none;width:100%" 43249 } : 0); 43250 43251 const wrapperColor = _ref4 => { 43252 let { 43253 color: colorProp = COLORS.ui.borderFocus 43254 } = _ref4; 43255 return /*#__PURE__*/emotion_react_browser_esm_css({ 43256 color: colorProp 43257 }, true ? "" : 0, true ? "" : 0); 43258 }; 43259 43260 const wrapperMargin = _ref5 => { 43261 let { 43262 marks 43263 } = _ref5; 43264 return /*#__PURE__*/emotion_react_browser_esm_css({ 43265 marginBottom: marks ? 16 : null 43266 }, true ? "" : 0, true ? "" : 0); 43267 }; 43268 43269 const range_control_styles_Wrapper = emotion_styled_base_browser_esm("div", true ? { 43270 target: "exqw8y213" 43271 } : 0)("box-sizing:border-box;color:", COLORS.blue.medium.focus, ";display:block;flex:1;position:relative;width:100%;", wrapperColor, ";", rangeHeight, ";", wrapperMargin, ";" + ( true ? "" : 0)); 43272 const BeforeIconWrapper = emotion_styled_base_browser_esm("span", true ? { 43273 target: "exqw8y212" 43274 } : 0)("margin-top:", railHeight, "px;", rtl({ 43275 marginRight: 6 43276 }), ";" + ( true ? "" : 0)); 43277 const AfterIconWrapper = emotion_styled_base_browser_esm("span", true ? { 43278 target: "exqw8y211" 43279 } : 0)("margin-top:", railHeight, "px;", rtl({ 43280 marginLeft: 6 43281 }), ";" + ( true ? "" : 0)); 43282 43283 const railBackgroundColor = _ref6 => { 43284 let { 43285 disabled, 43286 railColor 43287 } = _ref6; 43288 let background = railColor || null; 43289 43290 if (disabled) { 43291 background = COLORS.lightGray[400]; 43292 } 43293 43294 return /*#__PURE__*/emotion_react_browser_esm_css({ 43295 background 43296 }, true ? "" : 0, true ? "" : 0); 43297 }; 43298 43299 const Rail = emotion_styled_base_browser_esm("span", true ? { 43300 target: "exqw8y210" 43301 } : 0)("background-color:", COLORS.lightGray[600], ";box-sizing:border-box;left:0;pointer-events:none;right:0;display:block;height:", railHeight, "px;position:absolute;margin-top:", (rangeHeightValue - railHeight) / 2, "px;top:0;border-radius:", railHeight, "px;", railBackgroundColor, ";" + ( true ? "" : 0)); 43302 43303 const trackBackgroundColor = _ref7 => { 43304 let { 43305 disabled, 43306 trackColor 43307 } = _ref7; 43308 let background = trackColor || 'currentColor'; 43309 43310 if (disabled) { 43311 background = COLORS.lightGray[800]; 43312 } 43313 43314 return /*#__PURE__*/emotion_react_browser_esm_css({ 43315 background 43316 }, true ? "" : 0, true ? "" : 0); 43317 }; 43318 43319 const Track = emotion_styled_base_browser_esm("span", true ? { 43320 target: "exqw8y29" 43321 } : 0)("background-color:currentColor;border-radius:", railHeight, "px;box-sizing:border-box;height:", railHeight, "px;pointer-events:none;display:block;position:absolute;margin-top:", (rangeHeightValue - railHeight) / 2, "px;top:0;", trackBackgroundColor, ";" + ( true ? "" : 0)); 43322 const MarksWrapper = emotion_styled_base_browser_esm("span", true ? { 43323 target: "exqw8y28" 43324 } : 0)( true ? { 43325 name: "1xuuvmv", 43326 styles: "box-sizing:border-box;display:block;pointer-events:none;position:relative;width:100%;user-select:none" 43327 } : 0); 43328 43329 const markFill = _ref8 => { 43330 let { 43331 disabled, 43332 isFilled 43333 } = _ref8; 43334 let backgroundColor = isFilled ? 'currentColor' : COLORS.lightGray[600]; 43335 43336 if (disabled) { 43337 backgroundColor = COLORS.lightGray[800]; 43338 } 43339 43340 return /*#__PURE__*/emotion_react_browser_esm_css({ 43341 backgroundColor 43342 }, true ? "" : 0, true ? "" : 0); 43343 }; 43344 43345 const Mark = emotion_styled_base_browser_esm("span", true ? { 43346 target: "exqw8y27" 43347 } : 0)("box-sizing:border-box;height:", thumbSize, "px;left:0;position:absolute;top:-4px;width:1px;", markFill, ";" + ( true ? "" : 0)); 43348 43349 const markLabelFill = _ref9 => { 43350 let { 43351 isFilled 43352 } = _ref9; 43353 return /*#__PURE__*/emotion_react_browser_esm_css({ 43354 color: isFilled ? COLORS.darkGray[300] : COLORS.lightGray[600] 43355 }, true ? "" : 0, true ? "" : 0); 43356 }; 43357 43358 const MarkLabel = emotion_styled_base_browser_esm("span", true ? { 43359 target: "exqw8y26" 43360 } : 0)("box-sizing:border-box;color:", COLORS.lightGray[600], ";left:0;font-size:11px;position:absolute;top:12px;transform:translateX( -50% );white-space:nowrap;", markLabelFill, ";" + ( true ? "" : 0)); 43361 43362 var range_control_styles_ref3 = true ? { 43363 name: "1sb75b3", 43364 styles: "background-color:var( --wp-admin-theme-color )" 43365 } : 0; 43366 43367 const thumbColor = _ref10 => { 43368 let { 43369 disabled 43370 } = _ref10; 43371 return disabled ? /*#__PURE__*/emotion_react_browser_esm_css("background-color:", COLORS.lightGray[800], ";" + ( true ? "" : 0), true ? "" : 0) : range_control_styles_ref3; 43372 }; 43373 43374 const ThumbWrapper = emotion_styled_base_browser_esm("span", true ? { 43375 target: "exqw8y25" 43376 } : 0)("align-items:center;box-sizing:border-box;display:flex;height:", thumbSize, "px;justify-content:center;margin-top:", (rangeHeightValue - thumbSize) / 2, "px;outline:0;pointer-events:none;position:absolute;top:0;user-select:none;width:", thumbSize, "px;border-radius:50%;", thumbColor, ";", rtl({ 43377 marginLeft: -10 43378 }), ";", rtl({ 43379 transform: 'translateX( 4.5px )' 43380 }, { 43381 transform: 'translateX( -4.5px )' 43382 }), ";" + ( true ? "" : 0)); 43383 43384 const thumbFocus = _ref11 => { 43385 let { 43386 isFocused 43387 } = _ref11; 43388 return isFocused ? /*#__PURE__*/emotion_react_browser_esm_css("&::before{content:' ';position:absolute;background-color:var( --wp-admin-theme-color );opacity:0.4;border-radius:50%;height:", thumbSize + 8, "px;width:", thumbSize + 8, "px;top:-4px;left:-4px;}" + ( true ? "" : 0), true ? "" : 0) : ''; 43389 }; 43390 43391 const Thumb = emotion_styled_base_browser_esm("span", true ? { 43392 target: "exqw8y24" 43393 } : 0)("align-items:center;border-radius:50%;box-sizing:border-box;height:100%;outline:0;position:absolute;user-select:none;width:100%;", thumbColor, ";", thumbFocus, ";" + ( true ? "" : 0)); 43394 const InputRange = emotion_styled_base_browser_esm("input", true ? { 43395 target: "exqw8y23" 43396 } : 0)("box-sizing:border-box;cursor:pointer;display:block;height:100%;left:0;margin:0 -", thumbSize / 2, "px;opacity:0;outline:none;position:absolute;right:0;top:0;width:calc( 100% + ", thumbSize, "px );" + ( true ? "" : 0)); 43397 43398 const tooltipShow = _ref12 => { 43399 let { 43400 show 43401 } = _ref12; 43402 return /*#__PURE__*/emotion_react_browser_esm_css({ 43403 opacity: show ? 1 : 0 43404 }, true ? "" : 0, true ? "" : 0); 43405 }; 43406 43407 var range_control_styles_ref = true ? { 43408 name: "1cypxip", 43409 styles: "top:-80%" 43410 } : 0; 43411 43412 var range_control_styles_ref2 = true ? { 43413 name: "1lr98c4", 43414 styles: "bottom:-80%" 43415 } : 0; 43416 43417 const tooltipPosition = _ref13 => { 43418 let { 43419 position 43420 } = _ref13; 43421 const isBottom = position === 'bottom'; 43422 43423 if (isBottom) { 43424 return range_control_styles_ref2; 43425 } 43426 43427 return range_control_styles_ref; 43428 }; 43429 43430 const range_control_styles_Tooltip = emotion_styled_base_browser_esm("span", true ? { 43431 target: "exqw8y22" 43432 } : 0)("background:rgba( 0, 0, 0, 0.8 );border-radius:2px;box-sizing:border-box;color:white;display:inline-block;font-size:12px;min-width:32px;opacity:0;padding:4px 8px;pointer-events:none;position:absolute;text-align:center;transition:opacity 120ms ease;user-select:none;line-height:1.4;", tooltipShow, ";", tooltipPosition, ";", reduceMotion('transition'), ";", rtl({ 43433 transform: 'translateX(-50%)' 43434 }, { 43435 transform: 'translateX(50%)' 43436 }), ";" + ( true ? "" : 0)); // @todo: Refactor RangeControl with latest HStack configuration 43437 // @wordpress/components/ui/hstack. 43438 43439 const InputNumber = /*#__PURE__*/emotion_styled_base_browser_esm(number_control, true ? { 43440 target: "exqw8y21" 43441 } : 0)("box-sizing:border-box;display:inline-block;font-size:13px;margin-top:0;width:", space(16), "!important;input[type='number']&{", rangeHeight, ";}", rtl({ 43442 marginLeft: `$space(4)} !important` 43443 }), ";" + ( true ? "" : 0)); 43444 const ActionRightWrapper = emotion_styled_base_browser_esm("span", true ? { 43445 target: "exqw8y20" 43446 } : 0)("box-sizing:border-box;display:block;margin-top:0;button,button.is-small{margin-left:0;", rangeHeight, ";}", rtl({ 43447 marginLeft: 8 43448 }), ";" + ( true ? "" : 0)); 43449 43450 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/range-control/input-range.js 43451 43452 43453 // @ts-nocheck 43454 43455 /** 43456 * External dependencies 43457 */ 43458 43459 /** 43460 * WordPress dependencies 43461 */ 43462 43463 43464 /** 43465 * Internal dependencies 43466 */ 43467 43468 43469 43470 43471 function input_range_InputRange(_ref, ref) { 43472 let { 43473 describedBy, 43474 label, 43475 onHideTooltip = external_lodash_namespaceObject.noop, 43476 onMouseLeave = external_lodash_namespaceObject.noop, 43477 onMouseMove = external_lodash_namespaceObject.noop, 43478 onShowTooltip = external_lodash_namespaceObject.noop, 43479 value, 43480 ...props 43481 } = _ref; 43482 const hoverInteractions = useDebouncedHoverInteraction({ 43483 onHide: onHideTooltip, 43484 onMouseLeave, 43485 onMouseMove, 43486 onShow: onShowTooltip 43487 }); 43488 return (0,external_wp_element_namespaceObject.createElement)(InputRange, extends_extends({}, props, hoverInteractions, { 43489 "aria-describedby": describedBy, 43490 "aria-label": label, 43491 "aria-hidden": false, 43492 ref: ref, 43493 tabIndex: 0, 43494 type: "range", 43495 value: value 43496 })); 43497 } 43498 43499 const input_range_ForwardedComponent = (0,external_wp_element_namespaceObject.forwardRef)(input_range_InputRange); 43500 /* harmony default export */ var input_range = (input_range_ForwardedComponent); 43501 43502 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/range-control/mark.js 43503 43504 43505 // @ts-nocheck 43506 43507 /** 43508 * External dependencies 43509 */ 43510 43511 /** 43512 * Internal dependencies 43513 */ 43514 43515 43516 function RangeMark(_ref) { 43517 let { 43518 className, 43519 isFilled = false, 43520 label, 43521 style = {}, 43522 ...props 43523 } = _ref; 43524 const classes = classnames_default()('components-range-control__mark', isFilled && 'is-filled', className); 43525 const labelClasses = classnames_default()('components-range-control__mark-label', isFilled && 'is-filled'); 43526 return (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, (0,external_wp_element_namespaceObject.createElement)(Mark, extends_extends({}, props, { 43527 "aria-hidden": "true", 43528 className: classes, 43529 isFilled: isFilled, 43530 style: style 43531 })), label && (0,external_wp_element_namespaceObject.createElement)(MarkLabel, { 43532 "aria-hidden": "true", 43533 className: labelClasses, 43534 isFilled: isFilled, 43535 style: style 43536 }, label)); 43537 } 43538 43539 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/range-control/rail.js 43540 43541 43542 // @ts-nocheck 43543 43544 /** 43545 * WordPress dependencies 43546 */ 43547 43548 /** 43549 * Internal dependencies 43550 */ 43551 43552 43553 43554 function RangeRail(_ref) { 43555 let { 43556 disabled = false, 43557 marks = false, 43558 min = 0, 43559 max = 100, 43560 step = 1, 43561 value = 0, 43562 ...restProps 43563 } = _ref; 43564 return (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, (0,external_wp_element_namespaceObject.createElement)(Rail, extends_extends({ 43565 disabled: disabled 43566 }, restProps)), marks && (0,external_wp_element_namespaceObject.createElement)(Marks, { 43567 disabled: disabled, 43568 marks: marks, 43569 min: min, 43570 max: max, 43571 step: step, 43572 value: value 43573 })); 43574 } 43575 43576 function Marks(_ref2) { 43577 let { 43578 disabled = false, 43579 marks = false, 43580 min = 0, 43581 max = 100, 43582 step = 1, 43583 value = 0 43584 } = _ref2; 43585 43586 if (step === 'any') { 43587 step = 1; 43588 } 43589 43590 const marksData = useMarks({ 43591 marks, 43592 min, 43593 max, 43594 step, 43595 value 43596 }); 43597 return (0,external_wp_element_namespaceObject.createElement)(MarksWrapper, { 43598 "aria-hidden": "true", 43599 className: "components-range-control__marks" 43600 }, marksData.map(mark => (0,external_wp_element_namespaceObject.createElement)(RangeMark, extends_extends({}, mark, { 43601 key: mark.key, 43602 "aria-hidden": "true", 43603 disabled: disabled 43604 })))); 43605 } 43606 43607 function useMarks(_ref3) { 43608 let { 43609 marks, 43610 min = 0, 43611 max = 100, 43612 step = 1, 43613 value = 0 43614 } = _ref3; 43615 43616 if (!marks) { 43617 return []; 43618 } 43619 43620 const range = max - min; 43621 43622 if (!Array.isArray(marks)) { 43623 marks = []; 43624 const count = 1 + Math.round(range / step); 43625 43626 while (count > marks.push({ 43627 value: step * marks.length + min 43628 })); 43629 } 43630 43631 const placedMarks = []; 43632 marks.forEach((mark, index) => { 43633 if (mark.value < min || mark.value > max) { 43634 return; 43635 } 43636 43637 const key = `mark-$index}`; 43638 const isFilled = mark.value <= value; 43639 const offset = `${(mark.value - min) / range * 100}%`; 43640 const offsetStyle = { 43641 [(0,external_wp_i18n_namespaceObject.isRTL)() ? 'right' : 'left']: offset 43642 }; 43643 placedMarks.push({ ...mark, 43644 isFilled, 43645 key, 43646 style: offsetStyle 43647 }); 43648 }); 43649 return placedMarks; 43650 } 43651 43652 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/range-control/tooltip.js 43653 43654 43655 // @ts-nocheck 43656 43657 /** 43658 * External dependencies 43659 */ 43660 43661 /** 43662 * WordPress dependencies 43663 */ 43664 43665 43666 /** 43667 * Internal dependencies 43668 */ 43669 43670 43671 function SimpleTooltip(_ref) { 43672 let { 43673 className, 43674 inputRef, 43675 tooltipPosition, 43676 show = false, 43677 style = {}, 43678 value = 0, 43679 renderTooltipContent = v => v, 43680 zIndex = 100, 43681 ...restProps 43682 } = _ref; 43683 const position = useTooltipPosition({ 43684 inputRef, 43685 tooltipPosition 43686 }); 43687 const classes = classnames_default()('components-simple-tooltip', className); 43688 const styles = { ...style, 43689 zIndex 43690 }; 43691 return (0,external_wp_element_namespaceObject.createElement)(range_control_styles_Tooltip, extends_extends({}, restProps, { 43692 "aria-hidden": show, 43693 className: classes, 43694 position: position, 43695 show: show, 43696 role: "tooltip", 43697 style: styles 43698 }), renderTooltipContent(value)); 43699 } 43700 43701 function useTooltipPosition(_ref2) { 43702 let { 43703 inputRef, 43704 tooltipPosition 43705 } = _ref2; 43706 const [position, setPosition] = (0,external_wp_element_namespaceObject.useState)(); 43707 const setTooltipPosition = (0,external_wp_element_namespaceObject.useCallback)(() => { 43708 if (inputRef && inputRef.current) { 43709 setPosition(tooltipPosition); 43710 } 43711 }, [tooltipPosition]); 43712 (0,external_wp_element_namespaceObject.useEffect)(() => { 43713 setTooltipPosition(); 43714 }, [setTooltipPosition]); 43715 (0,external_wp_element_namespaceObject.useEffect)(() => { 43716 window.addEventListener('resize', setTooltipPosition); 43717 return () => { 43718 window.removeEventListener('resize', setTooltipPosition); 43719 }; 43720 }); 43721 return position; 43722 } 43723 43724 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/range-control/index.js 43725 43726 43727 // @ts-nocheck 43728 43729 /** 43730 * External dependencies 43731 */ 43732 43733 43734 /** 43735 * WordPress dependencies 43736 */ 43737 43738 43739 43740 43741 /** 43742 * Internal dependencies 43743 */ 43744 43745 43746 43747 43748 43749 43750 43751 43752 43753 43754 43755 function RangeControl(_ref, ref) { 43756 var _inputRef$current; 43757 43758 let { 43759 afterIcon, 43760 allowReset = false, 43761 beforeIcon, 43762 className, 43763 currentInput, 43764 color: colorProp = COLORS.ui.theme, 43765 disabled = false, 43766 help, 43767 initialPosition, 43768 isShiftStepEnabled = true, 43769 label, 43770 hideLabelFromVision = false, 43771 marks = false, 43772 max = 100, 43773 min = 0, 43774 onBlur = external_lodash_namespaceObject.noop, 43775 onChange = external_lodash_namespaceObject.noop, 43776 onFocus = external_lodash_namespaceObject.noop, 43777 onMouseMove = external_lodash_namespaceObject.noop, 43778 onMouseLeave = external_lodash_namespaceObject.noop, 43779 railColor, 43780 resetFallbackValue, 43781 renderTooltipContent = v => v, 43782 showTooltip: showTooltipProp, 43783 shiftStep = 10, 43784 step = 1, 43785 trackColor, 43786 value: valueProp, 43787 withInputField = true, 43788 ...props 43789 } = _ref; 43790 const [value, setValue] = useControlledRangeValue({ 43791 min, 43792 max, 43793 value: valueProp, 43794 initial: initialPosition 43795 }); 43796 const isResetPendent = (0,external_wp_element_namespaceObject.useRef)(false); 43797 43798 if (step === 'any') { 43799 // The tooltip and number input field are hidden when the step is "any" 43800 // because the decimals get too lengthy to fit well. 43801 showTooltipProp = false; 43802 withInputField = false; 43803 } 43804 43805 const [showTooltip, setShowTooltip] = (0,external_wp_element_namespaceObject.useState)(showTooltipProp); 43806 const [isFocused, setIsFocused] = (0,external_wp_element_namespaceObject.useState)(false); 43807 const inputRef = (0,external_wp_element_namespaceObject.useRef)(); 43808 43809 const setRef = nodeRef => { 43810 inputRef.current = nodeRef; 43811 43812 if (ref) { 43813 ref(nodeRef); 43814 } 43815 }; 43816 43817 const isCurrentlyFocused = (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.matches(':focus'); 43818 const isThumbFocused = !disabled && isFocused; 43819 const isValueReset = value === null; 43820 const currentValue = value !== undefined ? value : currentInput; 43821 const inputSliderValue = isValueReset ? '' : currentValue; 43822 const rangeFillValue = isValueReset ? (max - min) / 2 + min : value; 43823 const calculatedFillValue = (value - min) / (max - min) * 100; 43824 const fillValue = isValueReset ? 50 : calculatedFillValue; 43825 const fillValueOffset = `${(0,external_lodash_namespaceObject.clamp)(fillValue, 0, 100)}%`; 43826 const classes = classnames_default()('components-range-control', className); 43827 const wrapperClasses = classnames_default()('components-range-control__wrapper', !!marks && 'is-marked'); 43828 const id = (0,external_wp_compose_namespaceObject.useInstanceId)(RangeControl, 'inspector-range-control'); 43829 const describedBy = !!help ? `$id}__help` : undefined; 43830 const enableTooltip = showTooltipProp !== false && (0,external_lodash_namespaceObject.isFinite)(value); 43831 43832 const handleOnRangeChange = event => { 43833 const nextValue = parseFloat(event.target.value); 43834 setValue(nextValue); 43835 onChange(nextValue); 43836 }; 43837 43838 const handleOnChange = nextValue => { 43839 nextValue = parseFloat(nextValue); 43840 setValue(nextValue); 43841 /* 43842 * Calls onChange only when nextValue is numeric 43843 * otherwise may queue a reset for the blur event. 43844 */ 43845 43846 if (!isNaN(nextValue)) { 43847 if (nextValue < min || nextValue > max) { 43848 nextValue = floatClamp(nextValue, min, max); 43849 } 43850 43851 onChange(nextValue); 43852 isResetPendent.current = false; 43853 } else if (allowReset) { 43854 isResetPendent.current = true; 43855 } 43856 }; 43857 43858 const handleOnInputNumberBlur = () => { 43859 if (isResetPendent.current) { 43860 handleOnReset(); 43861 isResetPendent.current = false; 43862 } 43863 }; 43864 43865 const handleOnReset = () => { 43866 let resetValue = parseFloat(resetFallbackValue); 43867 let onChangeResetValue = resetValue; 43868 43869 if (isNaN(resetValue)) { 43870 resetValue = null; 43871 onChangeResetValue = undefined; 43872 } 43873 43874 setValue(resetValue); 43875 /** 43876 * Previously, this callback would always receive undefined as 43877 * an argument. This behavior is unexpected, specifically 43878 * when resetFallbackValue is defined. 43879 * 43880 * The value of undefined is not ideal. Passing it through 43881 * to internal <input /> elements would change it from a 43882 * controlled component to an uncontrolled component. 43883 * 43884 * For now, to minimize unexpected regressions, we're going to 43885 * preserve the undefined callback argument, except when a 43886 * resetFallbackValue is defined. 43887 */ 43888 43889 onChange(onChangeResetValue); 43890 }; 43891 43892 const handleShowTooltip = () => setShowTooltip(true); 43893 43894 const handleHideTooltip = () => setShowTooltip(false); 43895 43896 const handleOnBlur = event => { 43897 onBlur(event); 43898 setIsFocused(false); 43899 handleHideTooltip(); 43900 }; 43901 43902 const handleOnFocus = event => { 43903 onFocus(event); 43904 setIsFocused(true); 43905 handleShowTooltip(); 43906 }; 43907 43908 const offsetStyle = { 43909 [(0,external_wp_i18n_namespaceObject.isRTL)() ? 'right' : 'left']: fillValueOffset 43910 }; 43911 return (0,external_wp_element_namespaceObject.createElement)(base_control, { 43912 className: classes, 43913 label: label, 43914 hideLabelFromVision: hideLabelFromVision, 43915 id: id, 43916 help: help 43917 }, (0,external_wp_element_namespaceObject.createElement)(range_control_styles_Root, { 43918 className: "components-range-control__root" 43919 }, beforeIcon && (0,external_wp_element_namespaceObject.createElement)(BeforeIconWrapper, null, (0,external_wp_element_namespaceObject.createElement)(build_module_icon, { 43920 icon: beforeIcon 43921 })), (0,external_wp_element_namespaceObject.createElement)(range_control_styles_Wrapper, { 43922 className: wrapperClasses, 43923 color: colorProp, 43924 marks: !!marks 43925 }, (0,external_wp_element_namespaceObject.createElement)(input_range, extends_extends({}, props, { 43926 className: "components-range-control__slider", 43927 describedBy: describedBy, 43928 disabled: disabled, 43929 id: id, 43930 label: label, 43931 max: max, 43932 min: min, 43933 onBlur: handleOnBlur, 43934 onChange: handleOnRangeChange, 43935 onFocus: handleOnFocus, 43936 onMouseMove: onMouseMove, 43937 onMouseLeave: onMouseLeave, 43938 ref: setRef, 43939 step: step, 43940 value: inputSliderValue 43941 })), (0,external_wp_element_namespaceObject.createElement)(RangeRail, { 43942 "aria-hidden": true, 43943 disabled: disabled, 43944 marks: marks, 43945 max: max, 43946 min: min, 43947 railColor: railColor, 43948 step: step, 43949 value: rangeFillValue 43950 }), (0,external_wp_element_namespaceObject.createElement)(Track, { 43951 "aria-hidden": true, 43952 className: "components-range-control__track", 43953 disabled: disabled, 43954 style: { 43955 width: fillValueOffset 43956 }, 43957 trackColor: trackColor 43958 }), (0,external_wp_element_namespaceObject.createElement)(ThumbWrapper, { 43959 style: offsetStyle, 43960 disabled: disabled 43961 }, (0,external_wp_element_namespaceObject.createElement)(Thumb, { 43962 "aria-hidden": true, 43963 isFocused: isThumbFocused, 43964 disabled: disabled 43965 })), enableTooltip && (0,external_wp_element_namespaceObject.createElement)(SimpleTooltip, { 43966 className: "components-range-control__tooltip", 43967 inputRef: inputRef, 43968 tooltipPosition: "bottom", 43969 renderTooltipContent: renderTooltipContent, 43970 show: isCurrentlyFocused || showTooltip, 43971 style: offsetStyle, 43972 value: value 43973 })), afterIcon && (0,external_wp_element_namespaceObject.createElement)(AfterIconWrapper, null, (0,external_wp_element_namespaceObject.createElement)(build_module_icon, { 43974 icon: afterIcon 43975 })), withInputField && (0,external_wp_element_namespaceObject.createElement)(InputNumber, { 43976 "aria-label": label, 43977 className: "components-range-control__number", 43978 disabled: disabled, 43979 inputMode: "decimal", 43980 isShiftStepEnabled: isShiftStepEnabled, 43981 max: max, 43982 min: min, 43983 onBlur: handleOnInputNumberBlur, 43984 onChange: handleOnChange, 43985 shiftStep: shiftStep, 43986 step: step, 43987 value: inputSliderValue 43988 }), allowReset && (0,external_wp_element_namespaceObject.createElement)(ActionRightWrapper, null, (0,external_wp_element_namespaceObject.createElement)(build_module_button, { 43989 className: "components-range-control__reset", 43990 disabled: disabled || value === undefined, 43991 variant: "secondary", 43992 isSmall: true, 43993 onClick: handleOnReset 43994 }, (0,external_wp_i18n_namespaceObject.__)('Reset'))))); 43995 } 43996 43997 const range_control_ForwardedComponent = (0,external_wp_element_namespaceObject.forwardRef)(RangeControl); 43998 /* harmony default export */ var range_control = (range_control_ForwardedComponent); 43999 44000 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/color-picker/styles.js 44001 44002 44003 function color_picker_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } 44004 44005 /** 44006 * External dependencies 44007 */ 44008 44009 /** 44010 * Internal dependencies 44011 */ 44012 44013 44014 44015 44016 44017 44018 44019 44020 44021 const NumberControlWrapper = /*#__PURE__*/emotion_styled_base_browser_esm(number_control, true ? { 44022 target: "ez9hsf46" 44023 } : 0)(Container, "{width:", space(24), ";}" + ( true ? "" : 0)); 44024 const styles_SelectControl = /*#__PURE__*/emotion_styled_base_browser_esm(select_control, true ? { 44025 target: "ez9hsf45" 44026 } : 0)("margin-left:", space(-2), ";width:5em;", BackdropUI, "{display:none;}" + ( true ? "" : 0)); 44027 const styles_RangeControl = /*#__PURE__*/emotion_styled_base_browser_esm(range_control, true ? { 44028 target: "ez9hsf44" 44029 } : 0)("flex:1;", StyledField, "{margin-bottom:0;}" + ( true ? "" : 0)); // All inputs should be the same height so this should be changed at the component level. 44030 // That involves changing heights of multiple input types probably buttons too etc. 44031 // So until that is done we are already using the new height on the color picker so it matches the mockups. 44032 44033 const inputHeightStyle = ` 44034 &&& $Input} { 44035 height: 40px; 44036 }`; // Make the Hue circle picker not go out of the bar. 44037 44038 const interactiveHueStyles = ` 44039 .react-colorful__interactive { 44040 width: calc( 100% - $space(2)} ); 44041 margin-left: $space(1)}; 44042 }`; 44043 const AuxiliaryColorArtefactWrapper = emotion_styled_base_browser_esm("div", true ? { 44044 target: "ez9hsf43" 44045 } : 0)("padding:", space(2), " ", space(4), ";" + ( true ? "" : 0)); 44046 const ColorfulWrapper = emotion_styled_base_browser_esm("div", true ? { 44047 target: "ez9hsf42" 44048 } : 0)("width:216px;.react-colorful{display:flex;flex-direction:column;align-items:center;width:216px;height:auto;}.react-colorful__saturation{width:100%;border-radius:0;height:216px;margin-bottom:", space(4), ";border-bottom:none;}.react-colorful__hue,.react-colorful__alpha{width:184px;height:16px;border-radius:16px;margin-bottom:", space(2), ";}.react-colorful__pointer{height:16px;width:16px;border:none;box-shadow:0 0 2px 0 rgba( 0, 0, 0, 0.25 );outline:2px solid transparent;}.react-colorful__pointer-fill{box-shadow:inset 0 0 0 ", config_values.borderWidthFocus, " #fff;}", interactiveHueStyles, " ", StyledField, "{margin-bottom:0;}", inputHeightStyle, ";" + ( true ? "" : 0)); 44049 const DetailsControlButton = /*#__PURE__*/emotion_styled_base_browser_esm(build_module_button, true ? { 44050 target: "ez9hsf41" 44051 } : 0)("&&&&&{min-width:", space(6), ";padding:0;}" + ( true ? "" : 0)); 44052 const ColorHexInputControl = /*#__PURE__*/emotion_styled_base_browser_esm(input_control, true ? { 44053 target: "ez9hsf40" 44054 } : 0)( true ? { 44055 name: "1287a6j", 44056 styles: "width:8em" 44057 } : 0); 44058 44059 ;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getWindow.js 44060 function getWindow_getWindow(node) { 44061 if (node == null) { 44062 return window; 44063 } 44064 44065 if (node.toString() !== '[object Window]') { 44066 var ownerDocument = node.ownerDocument; 44067 return ownerDocument ? ownerDocument.defaultView || window : window; 44068 } 44069 44070 return node; 44071 } 44072 ;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/instanceOf.js 44073 44074 44075 function isElement(node) { 44076 var OwnElement = getWindow_getWindow(node).Element; 44077 return node instanceof OwnElement || node instanceof Element; 44078 } 44079 44080 function isHTMLElement(node) { 44081 var OwnElement = getWindow_getWindow(node).HTMLElement; 44082 return node instanceof OwnElement || node instanceof HTMLElement; 44083 } 44084 44085 function isShadowRoot(node) { 44086 // IE 11 has no ShadowRoot 44087 if (typeof ShadowRoot === 'undefined') { 44088 return false; 44089 } 44090 44091 var OwnElement = getWindow_getWindow(node).ShadowRoot; 44092 return node instanceof OwnElement || node instanceof ShadowRoot; 44093 } 44094 44095 44096 ;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/utils/math.js 44097 var math_max = Math.max; 44098 var math_min = Math.min; 44099 var round = Math.round; 44100 ;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getBoundingClientRect.js 44101 44102 44103 function getBoundingClientRect(element, includeScale) { 44104 if (includeScale === void 0) { 44105 includeScale = false; 44106 } 44107 44108 var rect = element.getBoundingClientRect(); 44109 var scaleX = 1; 44110 var scaleY = 1; 44111 44112 if (isHTMLElement(element) && includeScale) { 44113 var offsetHeight = element.offsetHeight; 44114 var offsetWidth = element.offsetWidth; // Do not attempt to divide by 0, otherwise we get `Infinity` as scale 44115 // Fallback to 1 in case both values are `0` 44116 44117 if (offsetWidth > 0) { 44118 scaleX = round(rect.width) / offsetWidth || 1; 44119 } 44120 44121 if (offsetHeight > 0) { 44122 scaleY = round(rect.height) / offsetHeight || 1; 44123 } 44124 } 44125 44126 return { 44127 width: rect.width / scaleX, 44128 height: rect.height / scaleY, 44129 top: rect.top / scaleY, 44130 right: rect.right / scaleX, 44131 bottom: rect.bottom / scaleY, 44132 left: rect.left / scaleX, 44133 x: rect.left / scaleX, 44134 y: rect.top / scaleY 44135 }; 44136 } 44137 ;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getWindowScroll.js 44138 44139 function getWindowScroll(node) { 44140 var win = getWindow_getWindow(node); 44141 var scrollLeft = win.pageXOffset; 44142 var scrollTop = win.pageYOffset; 44143 return { 44144 scrollLeft: scrollLeft, 44145 scrollTop: scrollTop 44146 }; 44147 } 44148 ;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getHTMLElementScroll.js 44149 function getHTMLElementScroll(element) { 44150 return { 44151 scrollLeft: element.scrollLeft, 44152 scrollTop: element.scrollTop 44153 }; 44154 } 44155 ;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getNodeScroll.js 44156 44157 44158 44159 44160 function getNodeScroll(node) { 44161 if (node === getWindow_getWindow(node) || !isHTMLElement(node)) { 44162 return getWindowScroll(node); 44163 } else { 44164 return getHTMLElementScroll(node); 44165 } 44166 } 44167 ;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getNodeName.js 44168 function getNodeName(element) { 44169 return element ? (element.nodeName || '').toLowerCase() : null; 44170 } 44171 ;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getDocumentElement.js 44172 44173 function getDocumentElement(element) { 44174 // $FlowFixMe[incompatible-return]: assume body is always available 44175 return ((isElement(element) ? element.ownerDocument : // $FlowFixMe[prop-missing] 44176 element.document) || window.document).documentElement; 44177 } 44178 ;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getWindowScrollBarX.js 44179 44180 44181 44182 function getWindowScrollBarX(element) { 44183 // If <html> has a CSS width greater than the viewport, then this will be 44184 // incorrect for RTL. 44185 // Popper 1 is broken in this case and never had a bug report so let's assume 44186 // it's not an issue. I don't think anyone ever specifies width on <html> 44187 // anyway. 44188 // Browsers where the left scrollbar doesn't cause an issue report `0` for 44189 // this (e.g. Edge 2019, IE11, Safari) 44190 return getBoundingClientRect(getDocumentElement(element)).left + getWindowScroll(element).scrollLeft; 44191 } 44192 ;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getComputedStyle.js 44193 44194 function getComputedStyle_getComputedStyle(element) { 44195 return getWindow_getWindow(element).getComputedStyle(element); 44196 } 44197 ;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/isScrollParent.js 44198 44199 function isScrollParent(element) { 44200 // Firefox wants us to check `-x` and `-y` variations as well 44201 var _getComputedStyle = getComputedStyle_getComputedStyle(element), 44202 overflow = _getComputedStyle.overflow, 44203 overflowX = _getComputedStyle.overflowX, 44204 overflowY = _getComputedStyle.overflowY; 44205 44206 return /auto|scroll|overlay|hidden/.test(overflow + overflowY + overflowX); 44207 } 44208 ;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getCompositeRect.js 44209 44210 44211 44212 44213 44214 44215 44216 44217 44218 function isElementScaled(element) { 44219 var rect = element.getBoundingClientRect(); 44220 var scaleX = round(rect.width) / element.offsetWidth || 1; 44221 var scaleY = round(rect.height) / element.offsetHeight || 1; 44222 return scaleX !== 1 || scaleY !== 1; 44223 } // Returns the composite rect of an element relative to its offsetParent. 44224 // Composite means it takes into account transforms as well as layout. 44225 44226 44227 function getCompositeRect(elementOrVirtualElement, offsetParent, isFixed) { 44228 if (isFixed === void 0) { 44229 isFixed = false; 44230 } 44231 44232 var isOffsetParentAnElement = isHTMLElement(offsetParent); 44233 var offsetParentIsScaled = isHTMLElement(offsetParent) && isElementScaled(offsetParent); 44234 var documentElement = getDocumentElement(offsetParent); 44235 var rect = getBoundingClientRect(elementOrVirtualElement, offsetParentIsScaled); 44236 var scroll = { 44237 scrollLeft: 0, 44238 scrollTop: 0 44239 }; 44240 var offsets = { 44241 x: 0, 44242 y: 0 44243 }; 44244 44245 if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) { 44246 if (getNodeName(offsetParent) !== 'body' || // https://github.com/popperjs/popper-core/issues/1078 44247 isScrollParent(documentElement)) { 44248 scroll = getNodeScroll(offsetParent); 44249 } 44250 44251 if (isHTMLElement(offsetParent)) { 44252 offsets = getBoundingClientRect(offsetParent, true); 44253 offsets.x += offsetParent.clientLeft; 44254 offsets.y += offsetParent.clientTop; 44255 } else if (documentElement) { 44256 offsets.x = getWindowScrollBarX(documentElement); 44257 } 44258 } 44259 44260 return { 44261 x: rect.left + scroll.scrollLeft - offsets.x, 44262 y: rect.top + scroll.scrollTop - offsets.y, 44263 width: rect.width, 44264 height: rect.height 44265 }; 44266 } 44267 ;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getLayoutRect.js 44268 // Returns the layout rect of an element relative to its offsetParent. Layout 44269 // means it doesn't take into account transforms. 44270 44271 function getLayoutRect(element) { 44272 var clientRect = getBoundingClientRect(element); // Use the clientRect sizes if it's not been transformed. 44273 // Fixes https://github.com/popperjs/popper-core/issues/1223 44274 44275 var width = element.offsetWidth; 44276 var height = element.offsetHeight; 44277 44278 if (Math.abs(clientRect.width - width) <= 1) { 44279 width = clientRect.width; 44280 } 44281 44282 if (Math.abs(clientRect.height - height) <= 1) { 44283 height = clientRect.height; 44284 } 44285 44286 return { 44287 x: element.offsetLeft, 44288 y: element.offsetTop, 44289 width: width, 44290 height: height 44291 }; 44292 } 44293 ;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getParentNode.js 44294 44295 44296 44297 function getParentNode(element) { 44298 if (getNodeName(element) === 'html') { 44299 return element; 44300 } 44301 44302 return (// this is a quicker (but less type safe) way to save quite some bytes from the bundle 44303 // $FlowFixMe[incompatible-return] 44304 // $FlowFixMe[prop-missing] 44305 element.assignedSlot || // step into the shadow DOM of the parent of a slotted node 44306 element.parentNode || ( // DOM Element detected 44307 isShadowRoot(element) ? element.host : null) || // ShadowRoot detected 44308 // $FlowFixMe[incompatible-call]: HTMLElement is a Node 44309 getDocumentElement(element) // fallback 44310 44311 ); 44312 } 44313 ;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getScrollParent.js 44314 44315 44316 44317 44318 function getScrollParent(node) { 44319 if (['html', 'body', '#document'].indexOf(getNodeName(node)) >= 0) { 44320 // $FlowFixMe[incompatible-return]: assume body is always available 44321 return node.ownerDocument.body; 44322 } 44323 44324 if (isHTMLElement(node) && isScrollParent(node)) { 44325 return node; 44326 } 44327 44328 return getScrollParent(getParentNode(node)); 44329 } 44330 ;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/listScrollParents.js 44331 44332 44333 44334 44335 /* 44336 given a DOM element, return the list of all scroll parents, up the list of ancesors 44337 until we get to the top window object. This list is what we attach scroll listeners 44338 to, because if any of these parent elements scroll, we'll need to re-calculate the 44339 reference element's position. 44340 */ 44341 44342 function listScrollParents(element, list) { 44343 var _element$ownerDocumen; 44344 44345 if (list === void 0) { 44346 list = []; 44347 } 44348 44349 var scrollParent = getScrollParent(element); 44350 var isBody = scrollParent === ((_element$ownerDocumen = element.ownerDocument) == null ? void 0 : _element$ownerDocumen.body); 44351 var win = getWindow_getWindow(scrollParent); 44352 var target = isBody ? [win].concat(win.visualViewport || [], isScrollParent(scrollParent) ? scrollParent : []) : scrollParent; 44353 var updatedList = list.concat(target); 44354 return isBody ? updatedList : // $FlowFixMe[incompatible-call]: isBody tells us target will be an HTMLElement here 44355 updatedList.concat(listScrollParents(getParentNode(target))); 44356 } 44357 ;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/isTableElement.js 44358 44359 function isTableElement(element) { 44360 return ['table', 'td', 'th'].indexOf(getNodeName(element)) >= 0; 44361 } 44362 ;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getOffsetParent.js 44363 44364 44365 44366 44367 44368 44369 44370 function getTrueOffsetParent(element) { 44371 if (!isHTMLElement(element) || // https://github.com/popperjs/popper-core/issues/837 44372 getComputedStyle_getComputedStyle(element).position === 'fixed') { 44373 return null; 44374 } 44375 44376 return element.offsetParent; 44377 } // `.offsetParent` reports `null` for fixed elements, while absolute elements 44378 // return the containing block 44379 44380 44381 function getContainingBlock(element) { 44382 var isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') !== -1; 44383 var isIE = navigator.userAgent.indexOf('Trident') !== -1; 44384 44385 if (isIE && isHTMLElement(element)) { 44386 // In IE 9, 10 and 11 fixed elements containing block is always established by the viewport 44387 var elementCss = getComputedStyle_getComputedStyle(element); 44388 44389 if (elementCss.position === 'fixed') { 44390 return null; 44391 } 44392 } 44393 44394 var currentNode = getParentNode(element); 44395 44396 if (isShadowRoot(currentNode)) { 44397 currentNode = currentNode.host; 44398 } 44399 44400 while (isHTMLElement(currentNode) && ['html', 'body'].indexOf(getNodeName(currentNode)) < 0) { 44401 var css = getComputedStyle_getComputedStyle(currentNode); // This is non-exhaustive but covers the most common CSS properties that 44402 // create a containing block. 44403 // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block 44404 44405 if (css.transform !== 'none' || css.perspective !== 'none' || css.contain === 'paint' || ['transform', 'perspective'].indexOf(css.willChange) !== -1 || isFirefox && css.willChange === 'filter' || isFirefox && css.filter && css.filter !== 'none') { 44406 return currentNode; 44407 } else { 44408 currentNode = currentNode.parentNode; 44409 } 44410 } 44411 44412 return null; 44413 } // Gets the closest ancestor positioned element. Handles some edge cases, 44414 // such as table ancestors and cross browser bugs. 44415 44416 44417 function getOffsetParent(element) { 44418 var window = getWindow_getWindow(element); 44419 var offsetParent = getTrueOffsetParent(element); 44420 44421 while (offsetParent && isTableElement(offsetParent) && getComputedStyle_getComputedStyle(offsetParent).position === 'static') { 44422 offsetParent = getTrueOffsetParent(offsetParent); 44423 } 44424 44425 if (offsetParent && (getNodeName(offsetParent) === 'html' || getNodeName(offsetParent) === 'body' && getComputedStyle_getComputedStyle(offsetParent).position === 'static')) { 44426 return window; 44427 } 44428 44429 return offsetParent || getContainingBlock(element) || window; 44430 } 44431 ;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/enums.js 44432 var enums_top = 'top'; 44433 var bottom = 'bottom'; 44434 var right = 'right'; 44435 var left = 'left'; 44436 var enums_auto = 'auto'; 44437 var basePlacements = [enums_top, bottom, right, left]; 44438 var start = 'start'; 44439 var end = 'end'; 44440 var clippingParents = 'clippingParents'; 44441 var viewport = 'viewport'; 44442 var popper = 'popper'; 44443 var reference = 'reference'; 44444 var variationPlacements = /*#__PURE__*/basePlacements.reduce(function (acc, placement) { 44445 return acc.concat([placement + "-" + start, placement + "-" + end]); 44446 }, []); 44447 var enums_placements = /*#__PURE__*/[].concat(basePlacements, [enums_auto]).reduce(function (acc, placement) { 44448 return acc.concat([placement, placement + "-" + start, placement + "-" + end]); 44449 }, []); // modifiers that need to read the DOM 44450 44451 var beforeRead = 'beforeRead'; 44452 var read = 'read'; 44453 var afterRead = 'afterRead'; // pure-logic modifiers 44454 44455 var beforeMain = 'beforeMain'; 44456 var main = 'main'; 44457 var afterMain = 'afterMain'; // modifier with the purpose to write to the DOM (or write into a framework state) 44458 44459 var beforeWrite = 'beforeWrite'; 44460 var write = 'write'; 44461 var afterWrite = 'afterWrite'; 44462 var modifierPhases = [beforeRead, read, afterRead, beforeMain, main, afterMain, beforeWrite, write, afterWrite]; 44463 ;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/utils/orderModifiers.js 44464 // source: https://stackoverflow.com/questions/49875255 44465 44466 function orderModifiers_order(modifiers) { 44467 var map = new Map(); 44468 var visited = new Set(); 44469 var result = []; 44470 modifiers.forEach(function (modifier) { 44471 map.set(modifier.name, modifier); 44472 }); // On visiting object, check for its dependencies and visit them recursively 44473 44474 function sort(modifier) { 44475 visited.add(modifier.name); 44476 var requires = [].concat(modifier.requires || [], modifier.requiresIfExists || []); 44477 requires.forEach(function (dep) { 44478 if (!visited.has(dep)) { 44479 var depModifier = map.get(dep); 44480 44481 if (depModifier) { 44482 sort(depModifier); 44483 } 44484 } 44485 }); 44486 result.push(modifier); 44487 } 44488 44489 modifiers.forEach(function (modifier) { 44490 if (!visited.has(modifier.name)) { 44491 // check for visited object 44492 sort(modifier); 44493 } 44494 }); 44495 return result; 44496 } 44497 44498 function orderModifiers(modifiers) { 44499 // order based on dependencies 44500 var orderedModifiers = orderModifiers_order(modifiers); // order based on phase 44501 44502 return modifierPhases.reduce(function (acc, phase) { 44503 return acc.concat(orderedModifiers.filter(function (modifier) { 44504 return modifier.phase === phase; 44505 })); 44506 }, []); 44507 } 44508 ;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/utils/debounce.js 44509 function debounce(fn) { 44510 var pending; 44511 return function () { 44512 if (!pending) { 44513 pending = new Promise(function (resolve) { 44514 Promise.resolve().then(function () { 44515 pending = undefined; 44516 resolve(fn()); 44517 }); 44518 }); 44519 } 44520 44521 return pending; 44522 }; 44523 } 44524 ;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/utils/mergeByName.js 44525 function mergeByName(modifiers) { 44526 var merged = modifiers.reduce(function (merged, current) { 44527 var existing = merged[current.name]; 44528 merged[current.name] = existing ? Object.assign({}, existing, current, { 44529 options: Object.assign({}, existing.options, current.options), 44530 data: Object.assign({}, existing.data, current.data) 44531 }) : current; 44532 return merged; 44533 }, {}); // IE11 does not support Object.values 44534 44535 return Object.keys(merged).map(function (key) { 44536 return merged[key]; 44537 }); 44538 } 44539 ;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/createPopper.js 44540 44541 44542 44543 44544 44545 44546 44547 44548 44549 44550 44551 44552 44553 44554 var INVALID_ELEMENT_ERROR = 'Popper: Invalid reference or popper argument provided. They must be either a DOM element or virtual element.'; 44555 var INFINITE_LOOP_ERROR = 'Popper: An infinite loop in the modifiers cycle has been detected! The cycle has been interrupted to prevent a browser crash.'; 44556 var DEFAULT_OPTIONS = { 44557 placement: 'bottom', 44558 modifiers: [], 44559 strategy: 'absolute' 44560 }; 44561 44562 function areValidElements() { 44563 for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) { 44564 args[_key] = arguments[_key]; 44565 } 44566 44567 return !args.some(function (element) { 44568 return !(element && typeof element.getBoundingClientRect === 'function'); 44569 }); 44570 } 44571 44572 function popperGenerator(generatorOptions) { 44573 if (generatorOptions === void 0) { 44574 generatorOptions = {}; 44575 } 44576 44577 var _generatorOptions = generatorOptions, 44578 _generatorOptions$def = _generatorOptions.defaultModifiers, 44579 defaultModifiers = _generatorOptions$def === void 0 ? [] : _generatorOptions$def, 44580 _generatorOptions$def2 = _generatorOptions.defaultOptions, 44581 defaultOptions = _generatorOptions$def2 === void 0 ? DEFAULT_OPTIONS : _generatorOptions$def2; 44582 return function createPopper(reference, popper, options) { 44583 if (options === void 0) { 44584 options = defaultOptions; 44585 } 44586 44587 var state = { 44588 placement: 'bottom', 44589 orderedModifiers: [], 44590 options: Object.assign({}, DEFAULT_OPTIONS, defaultOptions), 44591 modifiersData: {}, 44592 elements: { 44593 reference: reference, 44594 popper: popper 44595 }, 44596 attributes: {}, 44597 styles: {} 44598 }; 44599 var effectCleanupFns = []; 44600 var isDestroyed = false; 44601 var instance = { 44602 state: state, 44603 setOptions: function setOptions(setOptionsAction) { 44604 var options = typeof setOptionsAction === 'function' ? setOptionsAction(state.options) : setOptionsAction; 44605 cleanupModifierEffects(); 44606 state.options = Object.assign({}, defaultOptions, state.options, options); 44607 state.scrollParents = { 44608 reference: isElement(reference) ? listScrollParents(reference) : reference.contextElement ? listScrollParents(reference.contextElement) : [], 44609 popper: listScrollParents(popper) 44610 }; // Orders the modifiers based on their dependencies and `phase` 44611 // properties 44612 44613 var orderedModifiers = orderModifiers(mergeByName([].concat(defaultModifiers, state.options.modifiers))); // Strip out disabled modifiers 44614 44615 state.orderedModifiers = orderedModifiers.filter(function (m) { 44616 return m.enabled; 44617 }); // Validate the provided modifiers so that the consumer will get warned 44618 // if one of the modifiers is invalid for any reason 44619 44620 if (false) { var _getComputedStyle, marginTop, marginRight, marginBottom, marginLeft, flipModifier, modifiers; } 44621 44622 runModifierEffects(); 44623 return instance.update(); 44624 }, 44625 // Sync update – it will always be executed, even if not necessary. This 44626 // is useful for low frequency updates where sync behavior simplifies the 44627 // logic. 44628 // For high frequency updates (e.g. `resize` and `scroll` events), always 44629 // prefer the async Popper#update method 44630 forceUpdate: function forceUpdate() { 44631 if (isDestroyed) { 44632 return; 44633 } 44634 44635 var _state$elements = state.elements, 44636 reference = _state$elements.reference, 44637 popper = _state$elements.popper; // Don't proceed if `reference` or `popper` are not valid elements 44638 // anymore 44639 44640 if (!areValidElements(reference, popper)) { 44641 if (false) {} 44642 44643 return; 44644 } // Store the reference and popper rects to be read by modifiers 44645 44646 44647 state.rects = { 44648 reference: getCompositeRect(reference, getOffsetParent(popper), state.options.strategy === 'fixed'), 44649 popper: getLayoutRect(popper) 44650 }; // Modifiers have the ability to reset the current update cycle. The 44651 // most common use case for this is the `flip` modifier changing the 44652 // placement, which then needs to re-run all the modifiers, because the 44653 // logic was previously ran for the previous placement and is therefore 44654 // stale/incorrect 44655 44656 state.reset = false; 44657 state.placement = state.options.placement; // On each update cycle, the `modifiersData` property for each modifier 44658 // is filled with the initial data specified by the modifier. This means 44659 // it doesn't persist and is fresh on each update. 44660 // To ensure persistent data, use `${name}#persistent` 44661 44662 state.orderedModifiers.forEach(function (modifier) { 44663 return state.modifiersData[modifier.name] = Object.assign({}, modifier.data); 44664 }); 44665 var __debug_loops__ = 0; 44666 44667 for (var index = 0; index < state.orderedModifiers.length; index++) { 44668 if (false) {} 44669 44670 if (state.reset === true) { 44671 state.reset = false; 44672 index = -1; 44673 continue; 44674 } 44675 44676 var _state$orderedModifie = state.orderedModifiers[index], 44677 fn = _state$orderedModifie.fn, 44678 _state$orderedModifie2 = _state$orderedModifie.options, 44679 _options = _state$orderedModifie2 === void 0 ? {} : _state$orderedModifie2, 44680 name = _state$orderedModifie.name; 44681 44682 if (typeof fn === 'function') { 44683 state = fn({ 44684 state: state, 44685 options: _options, 44686 name: name, 44687 instance: instance 44688 }) || state; 44689 } 44690 } 44691 }, 44692 // Async and optimistically optimized update – it will not be executed if 44693 // not necessary (debounced to run at most once-per-tick) 44694 update: debounce(function () { 44695 return new Promise(function (resolve) { 44696 instance.forceUpdate(); 44697 resolve(state); 44698 }); 44699 }), 44700 destroy: function destroy() { 44701 cleanupModifierEffects(); 44702 isDestroyed = true; 44703 } 44704 }; 44705 44706 if (!areValidElements(reference, popper)) { 44707 if (false) {} 44708 44709 return instance; 44710 } 44711 44712 instance.setOptions(options).then(function (state) { 44713 if (!isDestroyed && options.onFirstUpdate) { 44714 options.onFirstUpdate(state); 44715 } 44716 }); // Modifiers have the ability to execute arbitrary code before the first 44717 // update cycle runs. They will be executed in the same order as the update 44718 // cycle. This is useful when a modifier adds some persistent data that 44719 // other modifiers need to use, but the modifier is run after the dependent 44720 // one. 44721 44722 function runModifierEffects() { 44723 state.orderedModifiers.forEach(function (_ref3) { 44724 var name = _ref3.name, 44725 _ref3$options = _ref3.options, 44726 options = _ref3$options === void 0 ? {} : _ref3$options, 44727 effect = _ref3.effect; 44728 44729 if (typeof effect === 'function') { 44730 var cleanupFn = effect({ 44731 state: state, 44732 name: name, 44733 instance: instance, 44734 options: options 44735 }); 44736 44737 var noopFn = function noopFn() {}; 44738 44739 effectCleanupFns.push(cleanupFn || noopFn); 44740 } 44741 }); 44742 } 44743 44744 function cleanupModifierEffects() { 44745 effectCleanupFns.forEach(function (fn) { 44746 return fn(); 44747 }); 44748 effectCleanupFns = []; 44749 } 44750 44751 return instance; 44752 }; 44753 } 44754 var createPopper = /*#__PURE__*/(/* unused pure expression or super */ null && (popperGenerator())); // eslint-disable-next-line import/no-unused-modules 44755 44756 44757 ;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/modifiers/eventListeners.js 44758 // eslint-disable-next-line import/no-unused-modules 44759 44760 var passive = { 44761 passive: true 44762 }; 44763 44764 function effect(_ref) { 44765 var state = _ref.state, 44766 instance = _ref.instance, 44767 options = _ref.options; 44768 var _options$scroll = options.scroll, 44769 scroll = _options$scroll === void 0 ? true : _options$scroll, 44770 _options$resize = options.resize, 44771 resize = _options$resize === void 0 ? true : _options$resize; 44772 var window = getWindow_getWindow(state.elements.popper); 44773 var scrollParents = [].concat(state.scrollParents.reference, state.scrollParents.popper); 44774 44775 if (scroll) { 44776 scrollParents.forEach(function (scrollParent) { 44777 scrollParent.addEventListener('scroll', instance.update, passive); 44778 }); 44779 } 44780 44781 if (resize) { 44782 window.addEventListener('resize', instance.update, passive); 44783 } 44784 44785 return function () { 44786 if (scroll) { 44787 scrollParents.forEach(function (scrollParent) { 44788 scrollParent.removeEventListener('scroll', instance.update, passive); 44789 }); 44790 } 44791 44792 if (resize) { 44793 window.removeEventListener('resize', instance.update, passive); 44794 } 44795 }; 44796 } // eslint-disable-next-line import/no-unused-modules 44797 44798 44799 /* harmony default export */ var eventListeners = ({ 44800 name: 'eventListeners', 44801 enabled: true, 44802 phase: 'write', 44803 fn: function fn() {}, 44804 effect: effect, 44805 data: {} 44806 }); 44807 ;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/utils/getBasePlacement.js 44808 44809 function getBasePlacement(placement) { 44810 return placement.split('-')[0]; 44811 } 44812 ;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/utils/getVariation.js 44813 function getVariation(placement) { 44814 return placement.split('-')[1]; 44815 } 44816 ;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/utils/getMainAxisFromPlacement.js 44817 function getMainAxisFromPlacement(placement) { 44818 return ['top', 'bottom'].indexOf(placement) >= 0 ? 'x' : 'y'; 44819 } 44820 ;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/utils/computeOffsets.js 44821 44822 44823 44824 44825 function computeOffsets(_ref) { 44826 var reference = _ref.reference, 44827 element = _ref.element, 44828 placement = _ref.placement; 44829 var basePlacement = placement ? getBasePlacement(placement) : null; 44830 var variation = placement ? getVariation(placement) : null; 44831 var commonX = reference.x + reference.width / 2 - element.width / 2; 44832 var commonY = reference.y + reference.height / 2 - element.height / 2; 44833 var offsets; 44834 44835 switch (basePlacement) { 44836 case enums_top: 44837 offsets = { 44838 x: commonX, 44839 y: reference.y - element.height 44840 }; 44841 break; 44842 44843 case bottom: 44844 offsets = { 44845 x: commonX, 44846 y: reference.y + reference.height 44847 }; 44848 break; 44849 44850 case right: 44851 offsets = { 44852 x: reference.x + reference.width, 44853 y: commonY 44854 }; 44855 break; 44856 44857 case left: 44858 offsets = { 44859 x: reference.x - element.width, 44860 y: commonY 44861 }; 44862 break; 44863 44864 default: 44865 offsets = { 44866 x: reference.x, 44867 y: reference.y 44868 }; 44869 } 44870 44871 var mainAxis = basePlacement ? getMainAxisFromPlacement(basePlacement) : null; 44872 44873 if (mainAxis != null) { 44874 var len = mainAxis === 'y' ? 'height' : 'width'; 44875 44876 switch (variation) { 44877 case start: 44878 offsets[mainAxis] = offsets[mainAxis] - (reference[len] / 2 - element[len] / 2); 44879 break; 44880 44881 case end: 44882 offsets[mainAxis] = offsets[mainAxis] + (reference[len] / 2 - element[len] / 2); 44883 break; 44884 44885 default: 44886 } 44887 } 44888 44889 return offsets; 44890 } 44891 ;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/modifiers/popperOffsets.js 44892 44893 44894 function popperOffsets(_ref) { 44895 var state = _ref.state, 44896 name = _ref.name; 44897 // Offsets are the actual position the popper needs to have to be 44898 // properly positioned near its reference element 44899 // This is the most basic placement, and will be adjusted by 44900 // the modifiers in the next step 44901 state.modifiersData[name] = computeOffsets({ 44902 reference: state.rects.reference, 44903 element: state.rects.popper, 44904 strategy: 'absolute', 44905 placement: state.placement 44906 }); 44907 } // eslint-disable-next-line import/no-unused-modules 44908 44909 44910 /* harmony default export */ var modifiers_popperOffsets = ({ 44911 name: 'popperOffsets', 44912 enabled: true, 44913 phase: 'read', 44914 fn: popperOffsets, 44915 data: {} 44916 }); 44917 ;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/modifiers/computeStyles.js 44918 44919 44920 44921 44922 44923 44924 44925 // eslint-disable-next-line import/no-unused-modules 44926 44927 var unsetSides = { 44928 top: 'auto', 44929 right: 'auto', 44930 bottom: 'auto', 44931 left: 'auto' 44932 }; // Round the offsets to the nearest suitable subpixel based on the DPR. 44933 // Zooming can change the DPR, but it seems to report a value that will 44934 // cleanly divide the values into the appropriate subpixels. 44935 44936 function roundOffsetsByDPR(_ref) { 44937 var x = _ref.x, 44938 y = _ref.y; 44939 var win = window; 44940 var dpr = win.devicePixelRatio || 1; 44941 return { 44942 x: round(x * dpr) / dpr || 0, 44943 y: round(y * dpr) / dpr || 0 44944 }; 44945 } 44946 44947 function mapToStyles(_ref2) { 44948 var _Object$assign2; 44949 44950 var popper = _ref2.popper, 44951 popperRect = _ref2.popperRect, 44952 placement = _ref2.placement, 44953 variation = _ref2.variation, 44954 offsets = _ref2.offsets, 44955 position = _ref2.position, 44956 gpuAcceleration = _ref2.gpuAcceleration, 44957 adaptive = _ref2.adaptive, 44958 roundOffsets = _ref2.roundOffsets, 44959 isFixed = _ref2.isFixed; 44960 var _offsets$x = offsets.x, 44961 x = _offsets$x === void 0 ? 0 : _offsets$x, 44962 _offsets$y = offsets.y, 44963 y = _offsets$y === void 0 ? 0 : _offsets$y; 44964 44965 var _ref3 = typeof roundOffsets === 'function' ? roundOffsets({ 44966 x: x, 44967 y: y 44968 }) : { 44969 x: x, 44970 y: y 44971 }; 44972 44973 x = _ref3.x; 44974 y = _ref3.y; 44975 var hasX = offsets.hasOwnProperty('x'); 44976 var hasY = offsets.hasOwnProperty('y'); 44977 var sideX = left; 44978 var sideY = enums_top; 44979 var win = window; 44980 44981 if (adaptive) { 44982 var offsetParent = getOffsetParent(popper); 44983 var heightProp = 'clientHeight'; 44984 var widthProp = 'clientWidth'; 44985 44986 if (offsetParent === getWindow_getWindow(popper)) { 44987 offsetParent = getDocumentElement(popper); 44988 44989 if (getComputedStyle_getComputedStyle(offsetParent).position !== 'static' && position === 'absolute') { 44990 heightProp = 'scrollHeight'; 44991 widthProp = 'scrollWidth'; 44992 } 44993 } // $FlowFixMe[incompatible-cast]: force type refinement, we compare offsetParent with window above, but Flow doesn't detect it 44994 44995 44996 offsetParent = offsetParent; 44997 44998 if (placement === enums_top || (placement === left || placement === right) && variation === end) { 44999 sideY = bottom; 45000 var offsetY = isFixed && offsetParent === win && win.visualViewport ? win.visualViewport.height : // $FlowFixMe[prop-missing] 45001 offsetParent[heightProp]; 45002 y -= offsetY - popperRect.height; 45003 y *= gpuAcceleration ? 1 : -1; 45004 } 45005 45006 if (placement === left || (placement === enums_top || placement === bottom) && variation === end) { 45007 sideX = right; 45008 var offsetX = isFixed && offsetParent === win && win.visualViewport ? win.visualViewport.width : // $FlowFixMe[prop-missing] 45009 offsetParent[widthProp]; 45010 x -= offsetX - popperRect.width; 45011 x *= gpuAcceleration ? 1 : -1; 45012 } 45013 } 45014 45015 var commonStyles = Object.assign({ 45016 position: position 45017 }, adaptive && unsetSides); 45018 45019 var _ref4 = roundOffsets === true ? roundOffsetsByDPR({ 45020 x: x, 45021 y: y 45022 }) : { 45023 x: x, 45024 y: y 45025 }; 45026 45027 x = _ref4.x; 45028 y = _ref4.y; 45029 45030 if (gpuAcceleration) { 45031 var _Object$assign; 45032 45033 return Object.assign({}, commonStyles, (_Object$assign = {}, _Object$assign[sideY] = hasY ? '0' : '', _Object$assign[sideX] = hasX ? '0' : '', _Object$assign.transform = (win.devicePixelRatio || 1) <= 1 ? "translate(" + x + "px, " + y + "px)" : "translate3d(" + x + "px, " + y + "px, 0)", _Object$assign)); 45034 } 45035 45036 return Object.assign({}, commonStyles, (_Object$assign2 = {}, _Object$assign2[sideY] = hasY ? y + "px" : '', _Object$assign2[sideX] = hasX ? x + "px" : '', _Object$assign2.transform = '', _Object$assign2)); 45037 } 45038 45039 function computeStyles(_ref5) { 45040 var state = _ref5.state, 45041 options = _ref5.options; 45042 var _options$gpuAccelerat = options.gpuAcceleration, 45043 gpuAcceleration = _options$gpuAccelerat === void 0 ? true : _options$gpuAccelerat, 45044 _options$adaptive = options.adaptive, 45045 adaptive = _options$adaptive === void 0 ? true : _options$adaptive, 45046 _options$roundOffsets = options.roundOffsets, 45047 roundOffsets = _options$roundOffsets === void 0 ? true : _options$roundOffsets; 45048 45049 if (false) { var transitionProperty; } 45050 45051 var commonStyles = { 45052 placement: getBasePlacement(state.placement), 45053 variation: getVariation(state.placement), 45054 popper: state.elements.popper, 45055 popperRect: state.rects.popper, 45056 gpuAcceleration: gpuAcceleration, 45057 isFixed: state.options.strategy === 'fixed' 45058 }; 45059 45060 if (state.modifiersData.popperOffsets != null) { 45061 state.styles.popper = Object.assign({}, state.styles.popper, mapToStyles(Object.assign({}, commonStyles, { 45062 offsets: state.modifiersData.popperOffsets, 45063 position: state.options.strategy, 45064 adaptive: adaptive, 45065 roundOffsets: roundOffsets 45066 }))); 45067 } 45068 45069 if (state.modifiersData.arrow != null) { 45070 state.styles.arrow = Object.assign({}, state.styles.arrow, mapToStyles(Object.assign({}, commonStyles, { 45071 offsets: state.modifiersData.arrow, 45072 position: 'absolute', 45073 adaptive: false, 45074 roundOffsets: roundOffsets 45075 }))); 45076 } 45077 45078 state.attributes.popper = Object.assign({}, state.attributes.popper, { 45079 'data-popper-placement': state.placement 45080 }); 45081 } // eslint-disable-next-line import/no-unused-modules 45082 45083 45084 /* harmony default export */ var modifiers_computeStyles = ({ 45085 name: 'computeStyles', 45086 enabled: true, 45087 phase: 'beforeWrite', 45088 fn: computeStyles, 45089 data: {} 45090 }); 45091 ;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/modifiers/applyStyles.js 45092 45093 // This modifier takes the styles prepared by the `computeStyles` modifier 45094 // and applies them to the HTMLElements such as popper and arrow 45095 45096 function applyStyles(_ref) { 45097 var state = _ref.state; 45098 Object.keys(state.elements).forEach(function (name) { 45099 var style = state.styles[name] || {}; 45100 var attributes = state.attributes[name] || {}; 45101 var element = state.elements[name]; // arrow is optional + virtual elements 45102 45103 if (!isHTMLElement(element) || !getNodeName(element)) { 45104 return; 45105 } // Flow doesn't support to extend this property, but it's the most 45106 // effective way to apply styles to an HTMLElement 45107 // $FlowFixMe[cannot-write] 45108 45109 45110 Object.assign(element.style, style); 45111 Object.keys(attributes).forEach(function (name) { 45112 var value = attributes[name]; 45113 45114 if (value === false) { 45115 element.removeAttribute(name); 45116 } else { 45117 element.setAttribute(name, value === true ? '' : value); 45118 } 45119 }); 45120 }); 45121 } 45122 45123 function applyStyles_effect(_ref2) { 45124 var state = _ref2.state; 45125 var initialStyles = { 45126 popper: { 45127 position: state.options.strategy, 45128 left: '0', 45129 top: '0', 45130 margin: '0' 45131 }, 45132 arrow: { 45133 position: 'absolute' 45134 }, 45135 reference: {} 45136 }; 45137 Object.assign(state.elements.popper.style, initialStyles.popper); 45138 state.styles = initialStyles; 45139 45140 if (state.elements.arrow) { 45141 Object.assign(state.elements.arrow.style, initialStyles.arrow); 45142 } 45143 45144 return function () { 45145 Object.keys(state.elements).forEach(function (name) { 45146 var element = state.elements[name]; 45147 var attributes = state.attributes[name] || {}; 45148 var styleProperties = Object.keys(state.styles.hasOwnProperty(name) ? state.styles[name] : initialStyles[name]); // Set all values to an empty string to unset them 45149 45150 var style = styleProperties.reduce(function (style, property) { 45151 style[property] = ''; 45152 return style; 45153 }, {}); // arrow is optional + virtual elements 45154 45155 if (!isHTMLElement(element) || !getNodeName(element)) { 45156 return; 45157 } 45158 45159 Object.assign(element.style, style); 45160 Object.keys(attributes).forEach(function (attribute) { 45161 element.removeAttribute(attribute); 45162 }); 45163 }); 45164 }; 45165 } // eslint-disable-next-line import/no-unused-modules 45166 45167 45168 /* harmony default export */ var modifiers_applyStyles = ({ 45169 name: 'applyStyles', 45170 enabled: true, 45171 phase: 'write', 45172 fn: applyStyles, 45173 effect: applyStyles_effect, 45174 requires: ['computeStyles'] 45175 }); 45176 ;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/modifiers/offset.js 45177 45178 // eslint-disable-next-line import/no-unused-modules 45179 45180 function distanceAndSkiddingToXY(placement, rects, offset) { 45181 var basePlacement = getBasePlacement(placement); 45182 var invertDistance = [left, enums_top].indexOf(basePlacement) >= 0 ? -1 : 1; 45183 45184 var _ref = typeof offset === 'function' ? offset(Object.assign({}, rects, { 45185 placement: placement 45186 })) : offset, 45187 skidding = _ref[0], 45188 distance = _ref[1]; 45189 45190 skidding = skidding || 0; 45191 distance = (distance || 0) * invertDistance; 45192 return [left, right].indexOf(basePlacement) >= 0 ? { 45193 x: distance, 45194 y: skidding 45195 } : { 45196 x: skidding, 45197 y: distance 45198 }; 45199 } 45200 45201 function offset(_ref2) { 45202 var state = _ref2.state, 45203 options = _ref2.options, 45204 name = _ref2.name; 45205 var _options$offset = options.offset, 45206 offset = _options$offset === void 0 ? [0, 0] : _options$offset; 45207 var data = enums_placements.reduce(function (acc, placement) { 45208 acc[placement] = distanceAndSkiddingToXY(placement, state.rects, offset); 45209 return acc; 45210 }, {}); 45211 var _data$state$placement = data[state.placement], 45212 x = _data$state$placement.x, 45213 y = _data$state$placement.y; 45214 45215 if (state.modifiersData.popperOffsets != null) { 45216 state.modifiersData.popperOffsets.x += x; 45217 state.modifiersData.popperOffsets.y += y; 45218 } 45219 45220 state.modifiersData[name] = data; 45221 } // eslint-disable-next-line import/no-unused-modules 45222 45223 45224 /* harmony default export */ var modifiers_offset = ({ 45225 name: 'offset', 45226 enabled: true, 45227 phase: 'main', 45228 requires: ['popperOffsets'], 45229 fn: offset 45230 }); 45231 ;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/utils/getOppositePlacement.js 45232 var getOppositePlacement_hash = { 45233 left: 'right', 45234 right: 'left', 45235 bottom: 'top', 45236 top: 'bottom' 45237 }; 45238 function getOppositePlacement(placement) { 45239 return placement.replace(/left|right|bottom|top/g, function (matched) { 45240 return getOppositePlacement_hash[matched]; 45241 }); 45242 } 45243 ;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/utils/getOppositeVariationPlacement.js 45244 var getOppositeVariationPlacement_hash = { 45245 start: 'end', 45246 end: 'start' 45247 }; 45248 function getOppositeVariationPlacement(placement) { 45249 return placement.replace(/start|end/g, function (matched) { 45250 return getOppositeVariationPlacement_hash[matched]; 45251 }); 45252 } 45253 ;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getViewportRect.js 45254 45255 45256 45257 function getViewportRect(element) { 45258 var win = getWindow_getWindow(element); 45259 var html = getDocumentElement(element); 45260 var visualViewport = win.visualViewport; 45261 var width = html.clientWidth; 45262 var height = html.clientHeight; 45263 var x = 0; 45264 var y = 0; // NB: This isn't supported on iOS <= 12. If the keyboard is open, the popper 45265 // can be obscured underneath it. 45266 // Also, `html.clientHeight` adds the bottom bar height in Safari iOS, even 45267 // if it isn't open, so if this isn't available, the popper will be detected 45268 // to overflow the bottom of the screen too early. 45269 45270 if (visualViewport) { 45271 width = visualViewport.width; 45272 height = visualViewport.height; // Uses Layout Viewport (like Chrome; Safari does not currently) 45273 // In Chrome, it returns a value very close to 0 (+/-) but contains rounding 45274 // errors due to floating point numbers, so we need to check precision. 45275 // Safari returns a number <= 0, usually < -1 when pinch-zoomed 45276 // Feature detection fails in mobile emulation mode in Chrome. 45277 // Math.abs(win.innerWidth / visualViewport.scale - visualViewport.width) < 45278 // 0.001 45279 // Fallback here: "Not Safari" userAgent 45280 45281 if (!/^((?!chrome|android).)*safari/i.test(navigator.userAgent)) { 45282 x = visualViewport.offsetLeft; 45283 y = visualViewport.offsetTop; 45284 } 45285 } 45286 45287 return { 45288 width: width, 45289 height: height, 45290 x: x + getWindowScrollBarX(element), 45291 y: y 45292 }; 45293 } 45294 ;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getDocumentRect.js 45295 45296 45297 45298 45299 // Gets the entire size of the scrollable document area, even extending outside 45300 // of the `<html>` and `<body>` rect bounds if horizontally scrollable 45301 45302 function getDocumentRect(element) { 45303 var _element$ownerDocumen; 45304 45305 var html = getDocumentElement(element); 45306 var winScroll = getWindowScroll(element); 45307 var body = (_element$ownerDocumen = element.ownerDocument) == null ? void 0 : _element$ownerDocumen.body; 45308 var width = math_max(html.scrollWidth, html.clientWidth, body ? body.scrollWidth : 0, body ? body.clientWidth : 0); 45309 var height = math_max(html.scrollHeight, html.clientHeight, body ? body.scrollHeight : 0, body ? body.clientHeight : 0); 45310 var x = -winScroll.scrollLeft + getWindowScrollBarX(element); 45311 var y = -winScroll.scrollTop; 45312 45313 if (getComputedStyle_getComputedStyle(body || html).direction === 'rtl') { 45314 x += math_max(html.clientWidth, body ? body.clientWidth : 0) - width; 45315 } 45316 45317 return { 45318 width: width, 45319 height: height, 45320 x: x, 45321 y: y 45322 }; 45323 } 45324 ;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/contains.js 45325 45326 function contains_contains(parent, child) { 45327 var rootNode = child.getRootNode && child.getRootNode(); // First, attempt with faster native method 45328 45329 if (parent.contains(child)) { 45330 return true; 45331 } // then fallback to custom implementation with Shadow DOM support 45332 else if (rootNode && isShadowRoot(rootNode)) { 45333 var next = child; 45334 45335 do { 45336 if (next && parent.isSameNode(next)) { 45337 return true; 45338 } // $FlowFixMe[prop-missing]: need a better way to handle this... 45339 45340 45341 next = next.parentNode || next.host; 45342 } while (next); 45343 } // Give up, the result is false 45344 45345 45346 return false; 45347 } 45348 ;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/utils/rectToClientRect.js 45349 function rectToClientRect(rect) { 45350 return Object.assign({}, rect, { 45351 left: rect.x, 45352 top: rect.y, 45353 right: rect.x + rect.width, 45354 bottom: rect.y + rect.height 45355 }); 45356 } 45357 ;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getClippingRect.js 45358 45359 45360 45361 45362 45363 45364 45365 45366 45367 45368 45369 45370 45371 45372 45373 function getInnerBoundingClientRect(element) { 45374 var rect = getBoundingClientRect(element); 45375 rect.top = rect.top + element.clientTop; 45376 rect.left = rect.left + element.clientLeft; 45377 rect.bottom = rect.top + element.clientHeight; 45378 rect.right = rect.left + element.clientWidth; 45379 rect.width = element.clientWidth; 45380 rect.height = element.clientHeight; 45381 rect.x = rect.left; 45382 rect.y = rect.top; 45383 return rect; 45384 } 45385 45386 function getClientRectFromMixedType(element, clippingParent) { 45387 return clippingParent === viewport ? rectToClientRect(getViewportRect(element)) : isElement(clippingParent) ? getInnerBoundingClientRect(clippingParent) : rectToClientRect(getDocumentRect(getDocumentElement(element))); 45388 } // A "clipping parent" is an overflowable container with the characteristic of 45389 // clipping (or hiding) overflowing elements with a position different from 45390 // `initial` 45391 45392 45393 function getClippingParents(element) { 45394 var clippingParents = listScrollParents(getParentNode(element)); 45395 var canEscapeClipping = ['absolute', 'fixed'].indexOf(getComputedStyle_getComputedStyle(element).position) >= 0; 45396 var clipperElement = canEscapeClipping && isHTMLElement(element) ? getOffsetParent(element) : element; 45397 45398 if (!isElement(clipperElement)) { 45399 return []; 45400 } // $FlowFixMe[incompatible-return]: https://github.com/facebook/flow/issues/1414 45401 45402 45403 return clippingParents.filter(function (clippingParent) { 45404 return isElement(clippingParent) && contains_contains(clippingParent, clipperElement) && getNodeName(clippingParent) !== 'body'; 45405 }); 45406 } // Gets the maximum area that the element is visible in due to any number of 45407 // clipping parents 45408 45409 45410 function getClippingRect(element, boundary, rootBoundary) { 45411 var mainClippingParents = boundary === 'clippingParents' ? getClippingParents(element) : [].concat(boundary); 45412 var clippingParents = [].concat(mainClippingParents, [rootBoundary]); 45413 var firstClippingParent = clippingParents[0]; 45414 var clippingRect = clippingParents.reduce(function (accRect, clippingParent) { 45415 var rect = getClientRectFromMixedType(element, clippingParent); 45416 accRect.top = math_max(rect.top, accRect.top); 45417 accRect.right = math_min(rect.right, accRect.right); 45418 accRect.bottom = math_min(rect.bottom, accRect.bottom); 45419 accRect.left = math_max(rect.left, accRect.left); 45420 return accRect; 45421 }, getClientRectFromMixedType(element, firstClippingParent)); 45422 clippingRect.width = clippingRect.right - clippingRect.left; 45423 clippingRect.height = clippingRect.bottom - clippingRect.top; 45424 clippingRect.x = clippingRect.left; 45425 clippingRect.y = clippingRect.top; 45426 return clippingRect; 45427 } 45428 ;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/utils/getFreshSideObject.js 45429 function getFreshSideObject() { 45430 return { 45431 top: 0, 45432 right: 0, 45433 bottom: 0, 45434 left: 0 45435 }; 45436 } 45437 ;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/utils/mergePaddingObject.js 45438 45439 function mergePaddingObject(paddingObject) { 45440 return Object.assign({}, getFreshSideObject(), paddingObject); 45441 } 45442 ;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/utils/expandToHashMap.js 45443 function expandToHashMap(value, keys) { 45444 return keys.reduce(function (hashMap, key) { 45445 hashMap[key] = value; 45446 return hashMap; 45447 }, {}); 45448 } 45449 ;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/utils/detectOverflow.js 45450 45451 45452 45453 45454 45455 45456 45457 45458 // eslint-disable-next-line import/no-unused-modules 45459 45460 function detectOverflow(state, options) { 45461 if (options === void 0) { 45462 options = {}; 45463 } 45464 45465 var _options = options, 45466 _options$placement = _options.placement, 45467 placement = _options$placement === void 0 ? state.placement : _options$placement, 45468 _options$boundary = _options.boundary, 45469 boundary = _options$boundary === void 0 ? clippingParents : _options$boundary, 45470 _options$rootBoundary = _options.rootBoundary, 45471 rootBoundary = _options$rootBoundary === void 0 ? viewport : _options$rootBoundary, 45472 _options$elementConte = _options.elementContext, 45473 elementContext = _options$elementConte === void 0 ? popper : _options$elementConte, 45474 _options$altBoundary = _options.altBoundary, 45475 altBoundary = _options$altBoundary === void 0 ? false : _options$altBoundary, 45476 _options$padding = _options.padding, 45477 padding = _options$padding === void 0 ? 0 : _options$padding; 45478 var paddingObject = mergePaddingObject(typeof padding !== 'number' ? padding : expandToHashMap(padding, basePlacements)); 45479 var altContext = elementContext === popper ? reference : popper; 45480 var popperRect = state.rects.popper; 45481 var element = state.elements[altBoundary ? altContext : elementContext]; 45482 var clippingClientRect = getClippingRect(isElement(element) ? element : element.contextElement || getDocumentElement(state.elements.popper), boundary, rootBoundary); 45483 var referenceClientRect = getBoundingClientRect(state.elements.reference); 45484 var popperOffsets = computeOffsets({ 45485 reference: referenceClientRect, 45486 element: popperRect, 45487 strategy: 'absolute', 45488 placement: placement 45489 }); 45490 var popperClientRect = rectToClientRect(Object.assign({}, popperRect, popperOffsets)); 45491 var elementClientRect = elementContext === popper ? popperClientRect : referenceClientRect; // positive = overflowing the clipping rect 45492 // 0 or negative = within the clipping rect 45493 45494 var overflowOffsets = { 45495 top: clippingClientRect.top - elementClientRect.top + paddingObject.top, 45496 bottom: elementClientRect.bottom - clippingClientRect.bottom + paddingObject.bottom, 45497 left: clippingClientRect.left - elementClientRect.left + paddingObject.left, 45498 right: elementClientRect.right - clippingClientRect.right + paddingObject.right 45499 }; 45500 var offsetData = state.modifiersData.offset; // Offsets can be applied only to the popper element 45501 45502 if (elementContext === popper && offsetData) { 45503 var offset = offsetData[placement]; 45504 Object.keys(overflowOffsets).forEach(function (key) { 45505 var multiply = [right, bottom].indexOf(key) >= 0 ? 1 : -1; 45506 var axis = [enums_top, bottom].indexOf(key) >= 0 ? 'y' : 'x'; 45507 overflowOffsets[key] += offset[axis] * multiply; 45508 }); 45509 } 45510 45511 return overflowOffsets; 45512 } 45513 ;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/utils/computeAutoPlacement.js 45514 45515 45516 45517 45518 function computeAutoPlacement(state, options) { 45519 if (options === void 0) { 45520 options = {}; 45521 } 45522 45523 var _options = options, 45524 placement = _options.placement, 45525 boundary = _options.boundary, 45526 rootBoundary = _options.rootBoundary, 45527 padding = _options.padding, 45528 flipVariations = _options.flipVariations, 45529 _options$allowedAutoP = _options.allowedAutoPlacements, 45530 allowedAutoPlacements = _options$allowedAutoP === void 0 ? enums_placements : _options$allowedAutoP; 45531 var variation = getVariation(placement); 45532 var placements = variation ? flipVariations ? variationPlacements : variationPlacements.filter(function (placement) { 45533 return getVariation(placement) === variation; 45534 }) : basePlacements; 45535 var allowedPlacements = placements.filter(function (placement) { 45536 return allowedAutoPlacements.indexOf(placement) >= 0; 45537 }); 45538 45539 if (allowedPlacements.length === 0) { 45540 allowedPlacements = placements; 45541 45542 if (false) {} 45543 } // $FlowFixMe[incompatible-type]: Flow seems to have problems with two array unions... 45544 45545 45546 var overflows = allowedPlacements.reduce(function (acc, placement) { 45547 acc[placement] = detectOverflow(state, { 45548 placement: placement, 45549 boundary: boundary, 45550 rootBoundary: rootBoundary, 45551 padding: padding 45552 })[getBasePlacement(placement)]; 45553 return acc; 45554 }, {}); 45555 return Object.keys(overflows).sort(function (a, b) { 45556 return overflows[a] - overflows[b]; 45557 }); 45558 } 45559 ;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/modifiers/flip.js 45560 45561 45562 45563 45564 45565 45566 // eslint-disable-next-line import/no-unused-modules 45567 45568 function getExpandedFallbackPlacements(placement) { 45569 if (getBasePlacement(placement) === enums_auto) { 45570 return []; 45571 } 45572 45573 var oppositePlacement = getOppositePlacement(placement); 45574 return [getOppositeVariationPlacement(placement), oppositePlacement, getOppositeVariationPlacement(oppositePlacement)]; 45575 } 45576 45577 function flip(_ref) { 45578 var state = _ref.state, 45579 options = _ref.options, 45580 name = _ref.name; 45581 45582 if (state.modifiersData[name]._skip) { 45583 return; 45584 } 45585 45586 var _options$mainAxis = options.mainAxis, 45587 checkMainAxis = _options$mainAxis === void 0 ? true : _options$mainAxis, 45588 _options$altAxis = options.altAxis, 45589 checkAltAxis = _options$altAxis === void 0 ? true : _options$altAxis, 45590 specifiedFallbackPlacements = options.fallbackPlacements, 45591 padding = options.padding, 45592 boundary = options.boundary, 45593 rootBoundary = options.rootBoundary, 45594 altBoundary = options.altBoundary, 45595 _options$flipVariatio = options.flipVariations, 45596 flipVariations = _options$flipVariatio === void 0 ? true : _options$flipVariatio, 45597 allowedAutoPlacements = options.allowedAutoPlacements; 45598 var preferredPlacement = state.options.placement; 45599 var basePlacement = getBasePlacement(preferredPlacement); 45600 var isBasePlacement = basePlacement === preferredPlacement; 45601 var fallbackPlacements = specifiedFallbackPlacements || (isBasePlacement || !flipVariations ? [getOppositePlacement(preferredPlacement)] : getExpandedFallbackPlacements(preferredPlacement)); 45602 var placements = [preferredPlacement].concat(fallbackPlacements).reduce(function (acc, placement) { 45603 return acc.concat(getBasePlacement(placement) === enums_auto ? computeAutoPlacement(state, { 45604 placement: placement, 45605 boundary: boundary, 45606 rootBoundary: rootBoundary, 45607 padding: padding, 45608 flipVariations: flipVariations, 45609 allowedAutoPlacements: allowedAutoPlacements 45610 }) : placement); 45611 }, []); 45612 var referenceRect = state.rects.reference; 45613 var popperRect = state.rects.popper; 45614 var checksMap = new Map(); 45615 var makeFallbackChecks = true; 45616 var firstFittingPlacement = placements[0]; 45617 45618 for (var i = 0; i < placements.length; i++) { 45619 var placement = placements[i]; 45620 45621 var _basePlacement = getBasePlacement(placement); 45622 45623 var isStartVariation = getVariation(placement) === start; 45624 var isVertical = [enums_top, bottom].indexOf(_basePlacement) >= 0; 45625 var len = isVertical ? 'width' : 'height'; 45626 var overflow = detectOverflow(state, { 45627 placement: placement, 45628 boundary: boundary, 45629 rootBoundary: rootBoundary, 45630 altBoundary: altBoundary, 45631 padding: padding 45632 }); 45633 var mainVariationSide = isVertical ? isStartVariation ? right : left : isStartVariation ? bottom : enums_top; 45634 45635 if (referenceRect[len] > popperRect[len]) { 45636 mainVariationSide = getOppositePlacement(mainVariationSide); 45637 } 45638 45639 var altVariationSide = getOppositePlacement(mainVariationSide); 45640 var checks = []; 45641 45642 if (checkMainAxis) { 45643 checks.push(overflow[_basePlacement] <= 0); 45644 } 45645 45646 if (checkAltAxis) { 45647 checks.push(overflow[mainVariationSide] <= 0, overflow[altVariationSide] <= 0); 45648 } 45649 45650 if (checks.every(function (check) { 45651 return check; 45652 })) { 45653 firstFittingPlacement = placement; 45654 makeFallbackChecks = false; 45655 break; 45656 } 45657 45658 checksMap.set(placement, checks); 45659 } 45660 45661 if (makeFallbackChecks) { 45662 // `2` may be desired in some cases – research later 45663 var numberOfChecks = flipVariations ? 3 : 1; 45664 45665 var _loop = function _loop(_i) { 45666 var fittingPlacement = placements.find(function (placement) { 45667 var checks = checksMap.get(placement); 45668 45669 if (checks) { 45670 return checks.slice(0, _i).every(function (check) { 45671 return check; 45672 }); 45673 } 45674 }); 45675 45676 if (fittingPlacement) { 45677 firstFittingPlacement = fittingPlacement; 45678 return "break"; 45679 } 45680 }; 45681 45682 for (var _i = numberOfChecks; _i > 0; _i--) { 45683 var _ret = _loop(_i); 45684 45685 if (_ret === "break") break; 45686 } 45687 } 45688 45689 if (state.placement !== firstFittingPlacement) { 45690 state.modifiersData[name]._skip = true; 45691 state.placement = firstFittingPlacement; 45692 state.reset = true; 45693 } 45694 } // eslint-disable-next-line import/no-unused-modules 45695 45696 45697 /* harmony default export */ var modifiers_flip = ({ 45698 name: 'flip', 45699 enabled: true, 45700 phase: 'main', 45701 fn: flip, 45702 requiresIfExists: ['offset'], 45703 data: { 45704 _skip: false 45705 } 45706 }); 45707 ;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/utils/getAltAxis.js 45708 function getAltAxis(axis) { 45709 return axis === 'x' ? 'y' : 'x'; 45710 } 45711 ;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/utils/within.js 45712 45713 function within(min, value, max) { 45714 return math_max(min, math_min(value, max)); 45715 } 45716 function withinMaxClamp(min, value, max) { 45717 var v = within(min, value, max); 45718 return v > max ? max : v; 45719 } 45720 ;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/modifiers/preventOverflow.js 45721 45722 45723 45724 45725 45726 45727 45728 45729 45730 45731 45732 45733 function preventOverflow(_ref) { 45734 var state = _ref.state, 45735 options = _ref.options, 45736 name = _ref.name; 45737 var _options$mainAxis = options.mainAxis, 45738 checkMainAxis = _options$mainAxis === void 0 ? true : _options$mainAxis, 45739 _options$altAxis = options.altAxis, 45740 checkAltAxis = _options$altAxis === void 0 ? false : _options$altAxis, 45741 boundary = options.boundary, 45742 rootBoundary = options.rootBoundary, 45743 altBoundary = options.altBoundary, 45744 padding = options.padding, 45745 _options$tether = options.tether, 45746 tether = _options$tether === void 0 ? true : _options$tether, 45747 _options$tetherOffset = options.tetherOffset, 45748 tetherOffset = _options$tetherOffset === void 0 ? 0 : _options$tetherOffset; 45749 var overflow = detectOverflow(state, { 45750 boundary: boundary, 45751 rootBoundary: rootBoundary, 45752 padding: padding, 45753 altBoundary: altBoundary 45754 }); 45755 var basePlacement = getBasePlacement(state.placement); 45756 var variation = getVariation(state.placement); 45757 var isBasePlacement = !variation; 45758 var mainAxis = getMainAxisFromPlacement(basePlacement); 45759 var altAxis = getAltAxis(mainAxis); 45760 var popperOffsets = state.modifiersData.popperOffsets; 45761 var referenceRect = state.rects.reference; 45762 var popperRect = state.rects.popper; 45763 var tetherOffsetValue = typeof tetherOffset === 'function' ? tetherOffset(Object.assign({}, state.rects, { 45764 placement: state.placement 45765 })) : tetherOffset; 45766 var normalizedTetherOffsetValue = typeof tetherOffsetValue === 'number' ? { 45767 mainAxis: tetherOffsetValue, 45768 altAxis: tetherOffsetValue 45769 } : Object.assign({ 45770 mainAxis: 0, 45771 altAxis: 0 45772 }, tetherOffsetValue); 45773 var offsetModifierState = state.modifiersData.offset ? state.modifiersData.offset[state.placement] : null; 45774 var data = { 45775 x: 0, 45776 y: 0 45777 }; 45778 45779 if (!popperOffsets) { 45780 return; 45781 } 45782 45783 if (checkMainAxis) { 45784 var _offsetModifierState$; 45785 45786 var mainSide = mainAxis === 'y' ? enums_top : left; 45787 var altSide = mainAxis === 'y' ? bottom : right; 45788 var len = mainAxis === 'y' ? 'height' : 'width'; 45789 var offset = popperOffsets[mainAxis]; 45790 var min = offset + overflow[mainSide]; 45791 var max = offset - overflow[altSide]; 45792 var additive = tether ? -popperRect[len] / 2 : 0; 45793 var minLen = variation === start ? referenceRect[len] : popperRect[len]; 45794 var maxLen = variation === start ? -popperRect[len] : -referenceRect[len]; // We need to include the arrow in the calculation so the arrow doesn't go 45795 // outside the reference bounds 45796 45797 var arrowElement = state.elements.arrow; 45798 var arrowRect = tether && arrowElement ? getLayoutRect(arrowElement) : { 45799 width: 0, 45800 height: 0 45801 }; 45802 var arrowPaddingObject = state.modifiersData['arrow#persistent'] ? state.modifiersData['arrow#persistent'].padding : getFreshSideObject(); 45803 var arrowPaddingMin = arrowPaddingObject[mainSide]; 45804 var arrowPaddingMax = arrowPaddingObject[altSide]; // If the reference length is smaller than the arrow length, we don't want 45805 // to include its full size in the calculation. If the reference is small 45806 // and near the edge of a boundary, the popper can overflow even if the 45807 // reference is not overflowing as well (e.g. virtual elements with no 45808 // width or height) 45809 45810 var arrowLen = within(0, referenceRect[len], arrowRect[len]); 45811 var minOffset = isBasePlacement ? referenceRect[len] / 2 - additive - arrowLen - arrowPaddingMin - normalizedTetherOffsetValue.mainAxis : minLen - arrowLen - arrowPaddingMin - normalizedTetherOffsetValue.mainAxis; 45812 var maxOffset = isBasePlacement ? -referenceRect[len] / 2 + additive + arrowLen + arrowPaddingMax + normalizedTetherOffsetValue.mainAxis : maxLen + arrowLen + arrowPaddingMax + normalizedTetherOffsetValue.mainAxis; 45813 var arrowOffsetParent = state.elements.arrow && getOffsetParent(state.elements.arrow); 45814 var clientOffset = arrowOffsetParent ? mainAxis === 'y' ? arrowOffsetParent.clientTop || 0 : arrowOffsetParent.clientLeft || 0 : 0; 45815 var offsetModifierValue = (_offsetModifierState$ = offsetModifierState == null ? void 0 : offsetModifierState[mainAxis]) != null ? _offsetModifierState$ : 0; 45816 var tetherMin = offset + minOffset - offsetModifierValue - clientOffset; 45817 var tetherMax = offset + maxOffset - offsetModifierValue; 45818 var preventedOffset = within(tether ? math_min(min, tetherMin) : min, offset, tether ? math_max(max, tetherMax) : max); 45819 popperOffsets[mainAxis] = preventedOffset; 45820 data[mainAxis] = preventedOffset - offset; 45821 } 45822 45823 if (checkAltAxis) { 45824 var _offsetModifierState$2; 45825 45826 var _mainSide = mainAxis === 'x' ? enums_top : left; 45827 45828 var _altSide = mainAxis === 'x' ? bottom : right; 45829 45830 var _offset = popperOffsets[altAxis]; 45831 45832 var _len = altAxis === 'y' ? 'height' : 'width'; 45833 45834 var _min = _offset + overflow[_mainSide]; 45835 45836 var _max = _offset - overflow[_altSide]; 45837 45838 var isOriginSide = [enums_top, left].indexOf(basePlacement) !== -1; 45839 45840 var _offsetModifierValue = (_offsetModifierState$2 = offsetModifierState == null ? void 0 : offsetModifierState[altAxis]) != null ? _offsetModifierState$2 : 0; 45841 45842 var _tetherMin = isOriginSide ? _min : _offset - referenceRect[_len] - popperRect[_len] - _offsetModifierValue + normalizedTetherOffsetValue.altAxis; 45843 45844 var _tetherMax = isOriginSide ? _offset + referenceRect[_len] + popperRect[_len] - _offsetModifierValue - normalizedTetherOffsetValue.altAxis : _max; 45845 45846 var _preventedOffset = tether && isOriginSide ? withinMaxClamp(_tetherMin, _offset, _tetherMax) : within(tether ? _tetherMin : _min, _offset, tether ? _tetherMax : _max); 45847 45848 popperOffsets[altAxis] = _preventedOffset; 45849 data[altAxis] = _preventedOffset - _offset; 45850 } 45851 45852 state.modifiersData[name] = data; 45853 } // eslint-disable-next-line import/no-unused-modules 45854 45855 45856 /* harmony default export */ var modifiers_preventOverflow = ({ 45857 name: 'preventOverflow', 45858 enabled: true, 45859 phase: 'main', 45860 fn: preventOverflow, 45861 requiresIfExists: ['offset'] 45862 }); 45863 ;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/modifiers/arrow.js 45864 45865 45866 45867 45868 45869 45870 45871 45872 45873 // eslint-disable-next-line import/no-unused-modules 45874 45875 var toPaddingObject = function toPaddingObject(padding, state) { 45876 padding = typeof padding === 'function' ? padding(Object.assign({}, state.rects, { 45877 placement: state.placement 45878 })) : padding; 45879 return mergePaddingObject(typeof padding !== 'number' ? padding : expandToHashMap(padding, basePlacements)); 45880 }; 45881 45882 function arrow(_ref) { 45883 var _state$modifiersData$; 45884 45885 var state = _ref.state, 45886 name = _ref.name, 45887 options = _ref.options; 45888 var arrowElement = state.elements.arrow; 45889 var popperOffsets = state.modifiersData.popperOffsets; 45890 var basePlacement = getBasePlacement(state.placement); 45891 var axis = getMainAxisFromPlacement(basePlacement); 45892 var isVertical = [left, right].indexOf(basePlacement) >= 0; 45893 var len = isVertical ? 'height' : 'width'; 45894 45895 if (!arrowElement || !popperOffsets) { 45896 return; 45897 } 45898 45899 var paddingObject = toPaddingObject(options.padding, state); 45900 var arrowRect = getLayoutRect(arrowElement); 45901 var minProp = axis === 'y' ? enums_top : left; 45902 var maxProp = axis === 'y' ? bottom : right; 45903 var endDiff = state.rects.reference[len] + state.rects.reference[axis] - popperOffsets[axis] - state.rects.popper[len]; 45904 var startDiff = popperOffsets[axis] - state.rects.reference[axis]; 45905 var arrowOffsetParent = getOffsetParent(arrowElement); 45906 var clientSize = arrowOffsetParent ? axis === 'y' ? arrowOffsetParent.clientHeight || 0 : arrowOffsetParent.clientWidth || 0 : 0; 45907 var centerToReference = endDiff / 2 - startDiff / 2; // Make sure the arrow doesn't overflow the popper if the center point is 45908 // outside of the popper bounds 45909 45910 var min = paddingObject[minProp]; 45911 var max = clientSize - arrowRect[len] - paddingObject[maxProp]; 45912 var center = clientSize / 2 - arrowRect[len] / 2 + centerToReference; 45913 var offset = within(min, center, max); // Prevents breaking syntax highlighting... 45914 45915 var axisProp = axis; 45916 state.modifiersData[name] = (_state$modifiersData$ = {}, _state$modifiersData$[axisProp] = offset, _state$modifiersData$.centerOffset = offset - center, _state$modifiersData$); 45917 } 45918 45919 function arrow_effect(_ref2) { 45920 var state = _ref2.state, 45921 options = _ref2.options; 45922 var _options$element = options.element, 45923 arrowElement = _options$element === void 0 ? '[data-popper-arrow]' : _options$element; 45924 45925 if (arrowElement == null) { 45926 return; 45927 } // CSS selector 45928 45929 45930 if (typeof arrowElement === 'string') { 45931 arrowElement = state.elements.popper.querySelector(arrowElement); 45932 45933 if (!arrowElement) { 45934 return; 45935 } 45936 } 45937 45938 if (false) {} 45939 45940 if (!contains_contains(state.elements.popper, arrowElement)) { 45941 if (false) {} 45942 45943 return; 45944 } 45945 45946 state.elements.arrow = arrowElement; 45947 } // eslint-disable-next-line import/no-unused-modules 45948 45949 45950 /* harmony default export */ var modifiers_arrow = ({ 45951 name: 'arrow', 45952 enabled: true, 45953 phase: 'main', 45954 fn: arrow, 45955 effect: arrow_effect, 45956 requires: ['popperOffsets'], 45957 requiresIfExists: ['preventOverflow'] 45958 }); 45959 ;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/modifiers/hide.js 45960 45961 45962 45963 function getSideOffsets(overflow, rect, preventedOffsets) { 45964 if (preventedOffsets === void 0) { 45965 preventedOffsets = { 45966 x: 0, 45967 y: 0 45968 }; 45969 } 45970 45971 return { 45972 top: overflow.top - rect.height - preventedOffsets.y, 45973 right: overflow.right - rect.width + preventedOffsets.x, 45974 bottom: overflow.bottom - rect.height + preventedOffsets.y, 45975 left: overflow.left - rect.width - preventedOffsets.x 45976 }; 45977 } 45978 45979 function isAnySideFullyClipped(overflow) { 45980 return [enums_top, right, bottom, left].some(function (side) { 45981 return overflow[side] >= 0; 45982 }); 45983 } 45984 45985 function hide(_ref) { 45986 var state = _ref.state, 45987 name = _ref.name; 45988 var referenceRect = state.rects.reference; 45989 var popperRect = state.rects.popper; 45990 var preventedOffsets = state.modifiersData.preventOverflow; 45991 var referenceOverflow = detectOverflow(state, { 45992 elementContext: 'reference' 45993 }); 45994 var popperAltOverflow = detectOverflow(state, { 45995 altBoundary: true 45996 }); 45997 var referenceClippingOffsets = getSideOffsets(referenceOverflow, referenceRect); 45998 var popperEscapeOffsets = getSideOffsets(popperAltOverflow, popperRect, preventedOffsets); 45999 var isReferenceHidden = isAnySideFullyClipped(referenceClippingOffsets); 46000 var hasPopperEscaped = isAnySideFullyClipped(popperEscapeOffsets); 46001 state.modifiersData[name] = { 46002 referenceClippingOffsets: referenceClippingOffsets, 46003 popperEscapeOffsets: popperEscapeOffsets, 46004 isReferenceHidden: isReferenceHidden, 46005 hasPopperEscaped: hasPopperEscaped 46006 }; 46007 state.attributes.popper = Object.assign({}, state.attributes.popper, { 46008 'data-popper-reference-hidden': isReferenceHidden, 46009 'data-popper-escaped': hasPopperEscaped 46010 }); 46011 } // eslint-disable-next-line import/no-unused-modules 46012 46013 46014 /* harmony default export */ var modifiers_hide = ({ 46015 name: 'hide', 46016 enabled: true, 46017 phase: 'main', 46018 requiresIfExists: ['preventOverflow'], 46019 fn: hide 46020 }); 46021 ;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/popper.js 46022 46023 46024 46025 46026 46027 46028 46029 46030 46031 46032 var defaultModifiers = [eventListeners, modifiers_popperOffsets, modifiers_computeStyles, modifiers_applyStyles, modifiers_offset, modifiers_flip, modifiers_preventOverflow, modifiers_arrow, modifiers_hide]; 46033 var popper_createPopper = /*#__PURE__*/popperGenerator({ 46034 defaultModifiers: defaultModifiers 46035 }); // eslint-disable-next-line import/no-unused-modules 46036 46037 // eslint-disable-next-line import/no-unused-modules 46038 46039 // eslint-disable-next-line import/no-unused-modules 46040 46041 46042 ;// CONCATENATED MODULE: ./node_modules/reakit/es/Disclosure/DisclosureState.js 46043 46044 46045 46046 46047 46048 46049 46050 46051 function useLastValue(value) { 46052 var lastValue = (0,external_React_.useRef)(null); 46053 useIsomorphicEffect(function () { 46054 lastValue.current = value; 46055 }, [value]); 46056 return lastValue; 46057 } 46058 46059 function useDisclosureState(initialState) { 46060 if (initialState === void 0) { 46061 initialState = {}; 46062 } 46063 46064 var _useSealedState = useSealedState(initialState), 46065 _useSealedState$visib = _useSealedState.visible, 46066 initialVisible = _useSealedState$visib === void 0 ? false : _useSealedState$visib, 46067 _useSealedState$anima = _useSealedState.animated, 46068 initialAnimated = _useSealedState$anima === void 0 ? false : _useSealedState$anima, 46069 sealed = _rollupPluginBabelHelpers_1f0bf8c2_objectWithoutPropertiesLoose(_useSealedState, ["visible", "animated"]); 46070 46071 var id = unstable_useIdState(sealed); 46072 46073 var _React$useState = (0,external_React_.useState)(initialVisible), 46074 visible = _React$useState[0], 46075 setVisible = _React$useState[1]; 46076 46077 var _React$useState2 = (0,external_React_.useState)(initialAnimated), 46078 animated = _React$useState2[0], 46079 setAnimated = _React$useState2[1]; 46080 46081 var _React$useState3 = (0,external_React_.useState)(false), 46082 animating = _React$useState3[0], 46083 setAnimating = _React$useState3[1]; 46084 46085 var lastVisible = useLastValue(visible); 46086 var visibleHasChanged = lastVisible.current != null && lastVisible.current !== visible; 46087 46088 if (animated && !animating && visibleHasChanged) { 46089 // Sets animating to true when when visible is updated 46090 setAnimating(true); 46091 } 46092 46093 (0,external_React_.useEffect)(function () { 46094 if (typeof animated === "number" && animating) { 46095 var timeout = setTimeout(function () { 46096 return setAnimating(false); 46097 }, animated); 46098 return function () { 46099 clearTimeout(timeout); 46100 }; 46101 } 46102 46103 if (animated && animating && "production" === "development") { var _timeout; } 46104 46105 return function () {}; 46106 }, [animated, animating]); 46107 var show = (0,external_React_.useCallback)(function () { 46108 return setVisible(true); 46109 }, []); 46110 var hide = (0,external_React_.useCallback)(function () { 46111 return setVisible(false); 46112 }, []); 46113 var toggle = (0,external_React_.useCallback)(function () { 46114 return setVisible(function (v) { 46115 return !v; 46116 }); 46117 }, []); 46118 var stopAnimation = (0,external_React_.useCallback)(function () { 46119 return setAnimating(false); 46120 }, []); 46121 return _objectSpread2(_objectSpread2({}, id), {}, { 46122 visible: visible, 46123 animated: animated, 46124 animating: animating, 46125 show: show, 46126 hide: hide, 46127 toggle: toggle, 46128 setVisible: setVisible, 46129 setAnimated: setAnimated, 46130 stopAnimation: stopAnimation 46131 }); 46132 } 46133 46134 46135 46136 ;// CONCATENATED MODULE: ./node_modules/reakit/es/Dialog/DialogState.js 46137 46138 46139 46140 46141 46142 46143 46144 46145 46146 function useDialogState(initialState) { 46147 if (initialState === void 0) { 46148 initialState = {}; 46149 } 46150 46151 var _useSealedState = useSealedState(initialState), 46152 _useSealedState$modal = _useSealedState.modal, 46153 initialModal = _useSealedState$modal === void 0 ? true : _useSealedState$modal, 46154 sealed = _rollupPluginBabelHelpers_1f0bf8c2_objectWithoutPropertiesLoose(_useSealedState, ["modal"]); 46155 46156 var disclosure = useDisclosureState(sealed); 46157 46158 var _React$useState = (0,external_React_.useState)(initialModal), 46159 modal = _React$useState[0], 46160 setModal = _React$useState[1]; 46161 46162 var disclosureRef = (0,external_React_.useRef)(null); 46163 return _objectSpread2(_objectSpread2({}, disclosure), {}, { 46164 modal: modal, 46165 setModal: setModal, 46166 unstable_disclosureRef: disclosureRef 46167 }); 46168 } 46169 46170 46171 46172 ;// CONCATENATED MODULE: ./node_modules/reakit/es/Popover/PopoverState.js 46173 46174 46175 46176 46177 46178 46179 46180 46181 46182 46183 46184 46185 46186 var isSafari = isUA("Mac") && !isUA("Chrome") && isUA("Safari"); 46187 46188 function PopoverState_applyStyles(styles) { 46189 return function (prevStyles) { 46190 if (styles && !shallowEqual(prevStyles, styles)) { 46191 return styles; 46192 } 46193 46194 return prevStyles; 46195 }; 46196 } 46197 46198 function usePopoverState(initialState) { 46199 if (initialState === void 0) { 46200 initialState = {}; 46201 } 46202 46203 var _useSealedState = useSealedState(initialState), 46204 _useSealedState$gutte = _useSealedState.gutter, 46205 gutter = _useSealedState$gutte === void 0 ? 12 : _useSealedState$gutte, 46206 _useSealedState$place = _useSealedState.placement, 46207 sealedPlacement = _useSealedState$place === void 0 ? "bottom" : _useSealedState$place, 46208 _useSealedState$unsta = _useSealedState.unstable_flip, 46209 flip = _useSealedState$unsta === void 0 ? true : _useSealedState$unsta, 46210 sealedOffset = _useSealedState.unstable_offset, 46211 _useSealedState$unsta2 = _useSealedState.unstable_preventOverflow, 46212 preventOverflow = _useSealedState$unsta2 === void 0 ? true : _useSealedState$unsta2, 46213 _useSealedState$unsta3 = _useSealedState.unstable_fixed, 46214 fixed = _useSealedState$unsta3 === void 0 ? false : _useSealedState$unsta3, 46215 _useSealedState$modal = _useSealedState.modal, 46216 modal = _useSealedState$modal === void 0 ? false : _useSealedState$modal, 46217 sealed = _rollupPluginBabelHelpers_1f0bf8c2_objectWithoutPropertiesLoose(_useSealedState, ["gutter", "placement", "unstable_flip", "unstable_offset", "unstable_preventOverflow", "unstable_fixed", "modal"]); 46218 46219 var popper = (0,external_React_.useRef)(null); 46220 var referenceRef = (0,external_React_.useRef)(null); 46221 var popoverRef = (0,external_React_.useRef)(null); 46222 var arrowRef = (0,external_React_.useRef)(null); 46223 46224 var _React$useState = (0,external_React_.useState)(sealedPlacement), 46225 originalPlacement = _React$useState[0], 46226 place = _React$useState[1]; 46227 46228 var _React$useState2 = (0,external_React_.useState)(sealedPlacement), 46229 placement = _React$useState2[0], 46230 setPlacement = _React$useState2[1]; 46231 46232 var _React$useState3 = (0,external_React_.useState)(sealedOffset || [0, gutter]), 46233 offset = _React$useState3[0]; 46234 46235 var _React$useState4 = (0,external_React_.useState)({ 46236 position: "fixed", 46237 left: "100%", 46238 top: "100%" 46239 }), 46240 popoverStyles = _React$useState4[0], 46241 setPopoverStyles = _React$useState4[1]; 46242 46243 var _React$useState5 = (0,external_React_.useState)({}), 46244 arrowStyles = _React$useState5[0], 46245 setArrowStyles = _React$useState5[1]; 46246 46247 var dialog = useDialogState(_objectSpread2({ 46248 modal: modal 46249 }, sealed)); 46250 var update = (0,external_React_.useCallback)(function () { 46251 if (popper.current) { 46252 popper.current.forceUpdate(); 46253 return true; 46254 } 46255 46256 return false; 46257 }, []); 46258 var updateState = (0,external_React_.useCallback)(function (state) { 46259 if (state.placement) { 46260 setPlacement(state.placement); 46261 } 46262 46263 if (state.styles) { 46264 setPopoverStyles(PopoverState_applyStyles(state.styles.popper)); 46265 46266 if (arrowRef.current) { 46267 setArrowStyles(PopoverState_applyStyles(state.styles.arrow)); 46268 } 46269 } 46270 }, []); 46271 useIsomorphicEffect(function () { 46272 if (referenceRef.current && popoverRef.current) { 46273 popper.current = popper_createPopper(referenceRef.current, popoverRef.current, { 46274 // https://popper.js.org/docs/v2/constructors/#options 46275 placement: originalPlacement, 46276 strategy: fixed ? "fixed" : "absolute", 46277 // Safari needs styles to be applied in the first render, otherwise 46278 // hovering over the popover when it gets visible for the first time 46279 // will change its dimensions unexpectedly. 46280 onFirstUpdate: isSafari ? updateState : undefined, 46281 modifiers: [{ 46282 // https://popper.js.org/docs/v2/modifiers/event-listeners/ 46283 name: "eventListeners", 46284 enabled: dialog.visible 46285 }, { 46286 // https://popper.js.org/docs/v2/modifiers/apply-styles/ 46287 name: "applyStyles", 46288 enabled: false 46289 }, { 46290 // https://popper.js.org/docs/v2/modifiers/flip/ 46291 name: "flip", 46292 enabled: flip, 46293 options: { 46294 padding: 8 46295 } 46296 }, { 46297 // https://popper.js.org/docs/v2/modifiers/offset/ 46298 name: "offset", 46299 options: { 46300 offset: offset 46301 } 46302 }, { 46303 // https://popper.js.org/docs/v2/modifiers/prevent-overflow/ 46304 name: "preventOverflow", 46305 enabled: preventOverflow, 46306 options: { 46307 tetherOffset: function tetherOffset() { 46308 var _arrowRef$current; 46309 46310 return ((_arrowRef$current = arrowRef.current) === null || _arrowRef$current === void 0 ? void 0 : _arrowRef$current.clientWidth) || 0; 46311 } 46312 } 46313 }, { 46314 // https://popper.js.org/docs/v2/modifiers/arrow/ 46315 name: "arrow", 46316 enabled: !!arrowRef.current, 46317 options: { 46318 element: arrowRef.current 46319 } 46320 }, { 46321 // https://popper.js.org/docs/v2/modifiers/#custom-modifiers 46322 name: "updateState", 46323 phase: "write", 46324 requires: ["computeStyles"], 46325 enabled: dialog.visible && "production" !== "test", 46326 fn: function fn(_ref) { 46327 var state = _ref.state; 46328 return updateState(state); 46329 } 46330 }] 46331 }); 46332 } 46333 46334 return function () { 46335 if (popper.current) { 46336 popper.current.destroy(); 46337 popper.current = null; 46338 } 46339 }; 46340 }, [originalPlacement, fixed, dialog.visible, flip, offset, preventOverflow]); // Ensure that the popover will be correctly positioned with an additional 46341 // update. 46342 46343 (0,external_React_.useEffect)(function () { 46344 if (!dialog.visible) return undefined; 46345 var id = window.requestAnimationFrame(function () { 46346 var _popper$current; 46347 46348 (_popper$current = popper.current) === null || _popper$current === void 0 ? void 0 : _popper$current.forceUpdate(); 46349 }); 46350 return function () { 46351 window.cancelAnimationFrame(id); 46352 }; 46353 }, [dialog.visible]); 46354 return _objectSpread2(_objectSpread2({}, dialog), {}, { 46355 unstable_referenceRef: referenceRef, 46356 unstable_popoverRef: popoverRef, 46357 unstable_arrowRef: arrowRef, 46358 unstable_popoverStyles: popoverStyles, 46359 unstable_arrowStyles: arrowStyles, 46360 unstable_update: update, 46361 unstable_originalPlacement: originalPlacement, 46362 placement: placement, 46363 place: place 46364 }); 46365 } 46366 46367 46368 46369 ;// CONCATENATED MODULE: ./node_modules/reakit/es/__globalState-300469f0.js 46370 var globalState = { 46371 currentTooltipId: null, 46372 listeners: new Set(), 46373 subscribe: function subscribe(listener) { 46374 var _this = this; 46375 46376 this.listeners.add(listener); 46377 return function () { 46378 _this.listeners.delete(listener); 46379 }; 46380 }, 46381 show: function show(id) { 46382 this.currentTooltipId = id; 46383 this.listeners.forEach(function (listener) { 46384 return listener(id); 46385 }); 46386 }, 46387 hide: function hide(id) { 46388 if (this.currentTooltipId === id) { 46389 this.currentTooltipId = null; 46390 this.listeners.forEach(function (listener) { 46391 return listener(null); 46392 }); 46393 } 46394 } 46395 }; 46396 46397 46398 46399 ;// CONCATENATED MODULE: ./node_modules/reakit/es/Tooltip/TooltipState.js 46400 46401 46402 46403 46404 46405 46406 46407 46408 46409 46410 46411 46412 46413 46414 46415 function useTooltipState(initialState) { 46416 if (initialState === void 0) { 46417 initialState = {}; 46418 } 46419 46420 var _useSealedState = useSealedState(initialState), 46421 _useSealedState$place = _useSealedState.placement, 46422 placement = _useSealedState$place === void 0 ? "top" : _useSealedState$place, 46423 _useSealedState$unsta = _useSealedState.unstable_timeout, 46424 initialTimeout = _useSealedState$unsta === void 0 ? 0 : _useSealedState$unsta, 46425 sealed = _rollupPluginBabelHelpers_1f0bf8c2_objectWithoutPropertiesLoose(_useSealedState, ["placement", "unstable_timeout"]); 46426 46427 var _React$useState = (0,external_React_.useState)(initialTimeout), 46428 timeout = _React$useState[0], 46429 setTimeout = _React$useState[1]; 46430 46431 var showTimeout = (0,external_React_.useRef)(null); 46432 var hideTimeout = (0,external_React_.useRef)(null); 46433 46434 var _usePopoverState = usePopoverState(_objectSpread2(_objectSpread2({}, sealed), {}, { 46435 placement: placement 46436 })), 46437 modal = _usePopoverState.modal, 46438 setModal = _usePopoverState.setModal, 46439 popover = _rollupPluginBabelHelpers_1f0bf8c2_objectWithoutPropertiesLoose(_usePopoverState, ["modal", "setModal"]); 46440 46441 var clearTimeouts = (0,external_React_.useCallback)(function () { 46442 if (showTimeout.current !== null) { 46443 window.clearTimeout(showTimeout.current); 46444 } 46445 46446 if (hideTimeout.current !== null) { 46447 window.clearTimeout(hideTimeout.current); 46448 } 46449 }, []); 46450 var hide = (0,external_React_.useCallback)(function () { 46451 clearTimeouts(); 46452 popover.hide(); // Let's give some time so people can move from a reference to another 46453 // and still show tooltips immediately 46454 46455 hideTimeout.current = window.setTimeout(function () { 46456 globalState.hide(popover.baseId); 46457 }, timeout); 46458 }, [clearTimeouts, popover.hide, timeout, popover.baseId]); 46459 var show = (0,external_React_.useCallback)(function () { 46460 clearTimeouts(); 46461 46462 if (!timeout || globalState.currentTooltipId) { 46463 // If there's no timeout or a tooltip visible already, we can show this 46464 // immediately 46465 globalState.show(popover.baseId); 46466 popover.show(); 46467 } else { 46468 // There may be a reference with focus whose tooltip is still not visible 46469 // In this case, we want to update it before it gets shown. 46470 globalState.show(null); // Otherwise, wait a little bit to show the tooltip 46471 46472 showTimeout.current = window.setTimeout(function () { 46473 globalState.show(popover.baseId); 46474 popover.show(); 46475 }, timeout); 46476 } 46477 }, [clearTimeouts, timeout, popover.show, popover.baseId]); 46478 (0,external_React_.useEffect)(function () { 46479 return globalState.subscribe(function (id) { 46480 if (id !== popover.baseId) { 46481 clearTimeouts(); 46482 46483 if (popover.visible) { 46484 // Make sure there will be only one tooltip visible 46485 popover.hide(); 46486 } 46487 } 46488 }); 46489 }, [popover.baseId, clearTimeouts, popover.visible, popover.hide]); 46490 (0,external_React_.useEffect)(function () { 46491 return function () { 46492 clearTimeouts(); 46493 globalState.hide(popover.baseId); 46494 }; 46495 }, [clearTimeouts, popover.baseId]); 46496 return _objectSpread2(_objectSpread2({}, popover), {}, { 46497 hide: hide, 46498 show: show, 46499 unstable_timeout: timeout, 46500 unstable_setTimeout: setTimeout 46501 }); 46502 } 46503 46504 46505 46506 ;// CONCATENATED MODULE: ./node_modules/reakit/es/__keys-d101cb3b.js 46507 // Automatically generated 46508 var TOOLTIP_STATE_KEYS = ["baseId", "unstable_idCountRef", "visible", "animated", "animating", "setBaseId", "show", "hide", "toggle", "setVisible", "setAnimated", "stopAnimation", "unstable_disclosureRef", "unstable_referenceRef", "unstable_popoverRef", "unstable_arrowRef", "unstable_popoverStyles", "unstable_arrowStyles", "unstable_originalPlacement", "unstable_update", "placement", "place", "unstable_timeout", "unstable_setTimeout"]; 46509 var TOOLTIP_KEYS = [].concat(TOOLTIP_STATE_KEYS, ["unstable_portal"]); 46510 var TOOLTIP_ARROW_KEYS = TOOLTIP_STATE_KEYS; 46511 var TOOLTIP_REFERENCE_KEYS = TOOLTIP_ARROW_KEYS; 46512 46513 46514 46515 ;// CONCATENATED MODULE: ./node_modules/reakit/es/Tooltip/TooltipReference.js 46516 46517 46518 46519 46520 46521 46522 46523 46524 46525 46526 var useTooltipReference = createHook({ 46527 name: "TooltipReference", 46528 compose: useRole, 46529 keys: TOOLTIP_REFERENCE_KEYS, 46530 useProps: function useProps(options, _ref) { 46531 var htmlRef = _ref.ref, 46532 htmlOnFocus = _ref.onFocus, 46533 htmlOnBlur = _ref.onBlur, 46534 htmlOnMouseEnter = _ref.onMouseEnter, 46535 htmlOnMouseLeave = _ref.onMouseLeave, 46536 htmlProps = _rollupPluginBabelHelpers_1f0bf8c2_objectWithoutPropertiesLoose(_ref, ["ref", "onFocus", "onBlur", "onMouseEnter", "onMouseLeave"]); 46537 46538 var onFocusRef = useLiveRef(htmlOnFocus); 46539 var onBlurRef = useLiveRef(htmlOnBlur); 46540 var onMouseEnterRef = useLiveRef(htmlOnMouseEnter); 46541 var onMouseLeaveRef = useLiveRef(htmlOnMouseLeave); 46542 var onFocus = (0,external_React_.useCallback)(function (event) { 46543 var _onFocusRef$current, _options$show; 46544 46545 (_onFocusRef$current = onFocusRef.current) === null || _onFocusRef$current === void 0 ? void 0 : _onFocusRef$current.call(onFocusRef, event); 46546 if (event.defaultPrevented) return; 46547 (_options$show = options.show) === null || _options$show === void 0 ? void 0 : _options$show.call(options); 46548 }, [options.show]); 46549 var onBlur = (0,external_React_.useCallback)(function (event) { 46550 var _onBlurRef$current, _options$hide; 46551 46552 (_onBlurRef$current = onBlurRef.current) === null || _onBlurRef$current === void 0 ? void 0 : _onBlurRef$current.call(onBlurRef, event); 46553 if (event.defaultPrevented) return; 46554 (_options$hide = options.hide) === null || _options$hide === void 0 ? void 0 : _options$hide.call(options); 46555 }, [options.hide]); 46556 var onMouseEnter = (0,external_React_.useCallback)(function (event) { 46557 var _onMouseEnterRef$curr, _options$show2; 46558 46559 (_onMouseEnterRef$curr = onMouseEnterRef.current) === null || _onMouseEnterRef$curr === void 0 ? void 0 : _onMouseEnterRef$curr.call(onMouseEnterRef, event); 46560 if (event.defaultPrevented) return; 46561 (_options$show2 = options.show) === null || _options$show2 === void 0 ? void 0 : _options$show2.call(options); 46562 }, [options.show]); 46563 var onMouseLeave = (0,external_React_.useCallback)(function (event) { 46564 var _onMouseLeaveRef$curr, _options$hide2; 46565 46566 (_onMouseLeaveRef$curr = onMouseLeaveRef.current) === null || _onMouseLeaveRef$curr === void 0 ? void 0 : _onMouseLeaveRef$curr.call(onMouseLeaveRef, event); 46567 if (event.defaultPrevented) return; 46568 (_options$hide2 = options.hide) === null || _options$hide2 === void 0 ? void 0 : _options$hide2.call(options); 46569 }, [options.hide]); 46570 return _objectSpread2({ 46571 ref: useForkRef(options.unstable_referenceRef, htmlRef), 46572 tabIndex: 0, 46573 onFocus: onFocus, 46574 onBlur: onBlur, 46575 onMouseEnter: onMouseEnter, 46576 onMouseLeave: onMouseLeave, 46577 "aria-describedby": options.baseId 46578 }, htmlProps); 46579 } 46580 }); 46581 var TooltipReference = createComponent({ 46582 as: "div", 46583 useHook: useTooltipReference 46584 }); 46585 46586 46587 46588 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/ui/tooltip/context.js 46589 /** 46590 * WordPress dependencies 46591 */ 46592 46593 /** 46594 * @type {import('react').Context<{ tooltip?: import('reakit').TooltipState }>} 46595 */ 46596 46597 const TooltipContext = (0,external_wp_element_namespaceObject.createContext)({}); 46598 const useTooltipContext = () => (0,external_wp_element_namespaceObject.useContext)(TooltipContext); 46599 46600 ;// CONCATENATED MODULE: ./node_modules/reakit/es/__keys-e6a5cfbe.js 46601 // Automatically generated 46602 var DISCLOSURE_STATE_KEYS = ["baseId", "unstable_idCountRef", "visible", "animated", "animating", "setBaseId", "show", "hide", "toggle", "setVisible", "setAnimated", "stopAnimation"]; 46603 var DISCLOSURE_KEYS = DISCLOSURE_STATE_KEYS; 46604 var DISCLOSURE_CONTENT_KEYS = DISCLOSURE_KEYS; 46605 46606 46607 46608 ;// CONCATENATED MODULE: ./node_modules/reakit/es/Disclosure/DisclosureContent.js 46609 46610 46611 46612 46613 46614 46615 46616 46617 46618 46619 var useDisclosureContent = createHook({ 46620 name: "DisclosureContent", 46621 compose: useRole, 46622 keys: DISCLOSURE_CONTENT_KEYS, 46623 useProps: function useProps(options, _ref) { 46624 var htmlOnTransitionEnd = _ref.onTransitionEnd, 46625 htmlOnAnimationEnd = _ref.onAnimationEnd, 46626 htmlStyle = _ref.style, 46627 htmlProps = _rollupPluginBabelHelpers_1f0bf8c2_objectWithoutPropertiesLoose(_ref, ["onTransitionEnd", "onAnimationEnd", "style"]); 46628 46629 var animating = options.animated && options.animating; 46630 46631 var _React$useState = (0,external_React_.useState)(null), 46632 transition = _React$useState[0], 46633 setTransition = _React$useState[1]; 46634 46635 var hidden = !options.visible && !animating; 46636 var style = hidden ? _objectSpread2({ 46637 display: "none" 46638 }, htmlStyle) : htmlStyle; 46639 var onTransitionEndRef = useLiveRef(htmlOnTransitionEnd); 46640 var onAnimationEndRef = useLiveRef(htmlOnAnimationEnd); 46641 var raf = (0,external_React_.useRef)(0); 46642 (0,external_React_.useEffect)(function () { 46643 if (!options.animated) return undefined; // Double RAF is needed so the browser has enough time to paint the 46644 // default styles before processing the `data-enter` attribute. Otherwise 46645 // it wouldn't be considered a transition. 46646 // See https://github.com/reakit/reakit/issues/643 46647 46648 raf.current = window.requestAnimationFrame(function () { 46649 raf.current = window.requestAnimationFrame(function () { 46650 if (options.visible) { 46651 setTransition("enter"); 46652 } else if (animating) { 46653 setTransition("leave"); 46654 } else { 46655 setTransition(null); 46656 } 46657 }); 46658 }); 46659 return function () { 46660 return window.cancelAnimationFrame(raf.current); 46661 }; 46662 }, [options.animated, options.visible, animating]); 46663 var onEnd = (0,external_React_.useCallback)(function (event) { 46664 if (!isSelfTarget(event)) return; 46665 if (!animating) return; // Ignores number animated 46666 46667 if (options.animated === true) { 46668 var _options$stopAnimatio; 46669 46670 (_options$stopAnimatio = options.stopAnimation) === null || _options$stopAnimatio === void 0 ? void 0 : _options$stopAnimatio.call(options); 46671 } 46672 }, [options.animated, animating, options.stopAnimation]); 46673 var onTransitionEnd = (0,external_React_.useCallback)(function (event) { 46674 var _onTransitionEndRef$c; 46675 46676 (_onTransitionEndRef$c = onTransitionEndRef.current) === null || _onTransitionEndRef$c === void 0 ? void 0 : _onTransitionEndRef$c.call(onTransitionEndRef, event); 46677 onEnd(event); 46678 }, [onEnd]); 46679 var onAnimationEnd = (0,external_React_.useCallback)(function (event) { 46680 var _onAnimationEndRef$cu; 46681 46682 (_onAnimationEndRef$cu = onAnimationEndRef.current) === null || _onAnimationEndRef$cu === void 0 ? void 0 : _onAnimationEndRef$cu.call(onAnimationEndRef, event); 46683 onEnd(event); 46684 }, [onEnd]); 46685 return _objectSpread2({ 46686 id: options.baseId, 46687 "data-enter": transition === "enter" ? "" : undefined, 46688 "data-leave": transition === "leave" ? "" : undefined, 46689 onTransitionEnd: onTransitionEnd, 46690 onAnimationEnd: onAnimationEnd, 46691 hidden: hidden, 46692 style: style 46693 }, htmlProps); 46694 } 46695 }); 46696 var DisclosureContent = createComponent({ 46697 as: "div", 46698 useHook: useDisclosureContent 46699 }); 46700 46701 46702 46703 ;// CONCATENATED MODULE: external "ReactDOM" 46704 var external_ReactDOM_namespaceObject = window["ReactDOM"]; 46705 ;// CONCATENATED MODULE: ./node_modules/reakit/es/Portal/Portal.js 46706 46707 46708 46709 46710 46711 function getBodyElement() { 46712 return canUseDOM ? document.body : null; 46713 } 46714 46715 var PortalContext = /*#__PURE__*/(0,external_React_.createContext)(getBodyElement()); 46716 function Portal(_ref) { 46717 var children = _ref.children; 46718 // if it's a nested portal, context is the parent portal 46719 // otherwise it's document.body 46720 // https://github.com/reakit/reakit/issues/513 46721 var context = (0,external_React_.useContext)(PortalContext) || getBodyElement(); 46722 46723 var _React$useState = (0,external_React_.useState)(function () { 46724 if (canUseDOM) { 46725 var element = document.createElement("div"); 46726 element.className = Portal.__className; 46727 return element; 46728 } // ssr 46729 46730 46731 return null; 46732 }), 46733 hostNode = _React$useState[0]; 46734 46735 useIsomorphicEffect(function () { 46736 if (!hostNode || !context) return undefined; 46737 context.appendChild(hostNode); 46738 return function () { 46739 context.removeChild(hostNode); 46740 }; 46741 }, [hostNode, context]); 46742 46743 if (hostNode) { 46744 return /*#__PURE__*/(0,external_ReactDOM_namespaceObject.createPortal)( /*#__PURE__*/(0,external_React_.createElement)(PortalContext.Provider, { 46745 value: hostNode 46746 }, children), hostNode); 46747 } // ssr 46748 46749 46750 return null; 46751 } 46752 Portal.__className = "__reakit-portal"; 46753 Portal.__selector = "." + Portal.__className; 46754 46755 46756 46757 ;// CONCATENATED MODULE: ./node_modules/reakit/es/Tooltip/Tooltip.js 46758 46759 46760 46761 46762 46763 46764 46765 46766 46767 46768 46769 46770 46771 46772 46773 46774 46775 46776 46777 function globallyHideTooltipOnEscape(event) { 46778 if (event.defaultPrevented) return; 46779 46780 if (event.key === "Escape") { 46781 globalState.show(null); 46782 } 46783 } 46784 46785 var useTooltip = createHook({ 46786 name: "Tooltip", 46787 compose: useDisclosureContent, 46788 keys: TOOLTIP_KEYS, 46789 useOptions: function useOptions(_ref) { 46790 var _ref$unstable_portal = _ref.unstable_portal, 46791 unstable_portal = _ref$unstable_portal === void 0 ? true : _ref$unstable_portal, 46792 options = _rollupPluginBabelHelpers_1f0bf8c2_objectWithoutPropertiesLoose(_ref, ["unstable_portal"]); 46793 46794 return _objectSpread2({ 46795 unstable_portal: unstable_portal 46796 }, options); 46797 }, 46798 useProps: function useProps(options, _ref2) { 46799 var htmlRef = _ref2.ref, 46800 htmlStyle = _ref2.style, 46801 htmlWrapElement = _ref2.wrapElement, 46802 htmlProps = _rollupPluginBabelHelpers_1f0bf8c2_objectWithoutPropertiesLoose(_ref2, ["ref", "style", "wrapElement"]); 46803 46804 (0,external_React_.useEffect)(function () { 46805 var _options$unstable_pop; 46806 46807 var document = getDocument((_options$unstable_pop = options.unstable_popoverRef) === null || _options$unstable_pop === void 0 ? void 0 : _options$unstable_pop.current); 46808 document.addEventListener("keydown", globallyHideTooltipOnEscape); 46809 }, []); 46810 var wrapElement = (0,external_React_.useCallback)(function (element) { 46811 if (options.unstable_portal) { 46812 element = /*#__PURE__*/(0,external_React_.createElement)(Portal, null, element); 46813 } 46814 46815 if (htmlWrapElement) { 46816 return htmlWrapElement(element); 46817 } 46818 46819 return element; 46820 }, [options.unstable_portal, htmlWrapElement]); 46821 return _objectSpread2({ 46822 ref: useForkRef(options.unstable_popoverRef, htmlRef), 46823 role: "tooltip", 46824 style: _objectSpread2(_objectSpread2({}, options.unstable_popoverStyles), {}, { 46825 pointerEvents: "none" 46826 }, htmlStyle), 46827 wrapElement: wrapElement 46828 }, htmlProps); 46829 } 46830 }); 46831 var Tooltip_Tooltip = createComponent({ 46832 as: "div", 46833 memo: true, 46834 useHook: useTooltip 46835 }); 46836 46837 46838 46839 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/ui/shortcut/component.js 46840 46841 46842 46843 /** 46844 * External dependencies 46845 */ 46846 46847 /** 46848 * Internal dependencies 46849 */ 46850 46851 46852 46853 function component_Shortcut(props, forwardedRef) { 46854 const { 46855 as: asProp = 'span', 46856 shortcut, 46857 className, 46858 ...otherProps 46859 } = useContextSystem(props, 'Shortcut'); 46860 46861 if (!shortcut) { 46862 return null; 46863 } 46864 46865 let displayText; 46866 let ariaLabel; 46867 46868 if (typeof shortcut === 'string') { 46869 displayText = shortcut; 46870 } else { 46871 displayText = shortcut.display; 46872 ariaLabel = shortcut.ariaLabel; 46873 } 46874 46875 return (0,external_wp_element_namespaceObject.createElement)(component, extends_extends({ 46876 as: asProp, 46877 className: className, 46878 "aria-label": ariaLabel, 46879 ref: forwardedRef 46880 }, otherProps), displayText); 46881 } 46882 46883 const ConnectedShortcut = contextConnect(component_Shortcut, 'Shortcut'); 46884 /* harmony default export */ var shortcut_component = (ConnectedShortcut); 46885 46886 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/utils/z-index.js 46887 const Flyout = 10000; 46888 const z_index_Tooltip = 1000002; 46889 46890 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/ui/tooltip/styles.js 46891 46892 46893 function tooltip_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } 46894 46895 /** 46896 * External dependencies 46897 */ 46898 46899 46900 /** 46901 * Internal dependencies 46902 */ 46903 46904 46905 46906 46907 46908 const TooltipContent = /*#__PURE__*/emotion_react_browser_esm_css("z-index:", z_index_Tooltip, ";box-sizing:border-box;opacity:0;outline:none;transform-origin:top center;transition:opacity ", config_values.transitionDurationFastest, " ease;&[data-enter]{opacity:1;}" + ( true ? "" : 0), true ? "" : 0); 46909 const TooltipPopoverView = emotion_styled_base_browser_esm("div", true ? { 46910 target: "e7tfjmw1" 46911 } : 0)("background:rgba( 0, 0, 0, 0.8 );border-radius:2px;box-shadow:0 0 0 1px rgba( 255, 255, 255, 0.04 );color:", COLORS.white, ";padding:4px 8px;" + ( true ? "" : 0)); 46912 const noOutline = true ? { 46913 name: "12mkfdx", 46914 styles: "outline:none" 46915 } : 0; 46916 const TooltipShortcut = /*#__PURE__*/emotion_styled_base_browser_esm(shortcut_component, true ? { 46917 target: "e7tfjmw0" 46918 } : 0)("display:inline-block;margin-left:", space(1), ";" + ( true ? "" : 0)); 46919 46920 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/ui/tooltip/content.js 46921 46922 46923 46924 /** 46925 * External dependencies 46926 */ 46927 // eslint-disable-next-line no-restricted-imports 46928 46929 /** 46930 * Internal dependencies 46931 */ 46932 46933 46934 46935 46936 46937 46938 const { 46939 TooltipPopoverView: content_TooltipPopoverView 46940 } = tooltip_styles_namespaceObject; 46941 /** 46942 * 46943 * @param {import('../context').WordPressComponentProps<import('./types').ContentProps, 'div'>} props 46944 * @param {import('react').ForwardedRef<any>} forwardedRef 46945 */ 46946 46947 function content_TooltipContent(props, forwardedRef) { 46948 const { 46949 children, 46950 className, 46951 ...otherProps 46952 } = useContextSystem(props, 'TooltipContent'); 46953 const { 46954 tooltip 46955 } = useTooltipContext(); 46956 const cx = useCx(); 46957 const classes = cx(TooltipContent, className); 46958 return (0,external_wp_element_namespaceObject.createElement)(Tooltip_Tooltip, extends_extends({ 46959 as: component 46960 }, otherProps, tooltip, { 46961 className: classes, 46962 ref: forwardedRef 46963 }), (0,external_wp_element_namespaceObject.createElement)(content_TooltipPopoverView, null, children)); 46964 } 46965 46966 /* harmony default export */ var tooltip_content = (contextConnect(content_TooltipContent, 'TooltipContent')); 46967 46968 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/ui/tooltip/component.js 46969 46970 46971 46972 /** 46973 * External dependencies 46974 */ 46975 // eslint-disable-next-line no-restricted-imports 46976 46977 /** 46978 * WordPress dependencies 46979 */ 46980 46981 46982 /** 46983 * Internal dependencies 46984 */ 46985 46986 46987 46988 46989 46990 /** 46991 * @param {import('../context').WordPressComponentProps<import('./types').Props, 'div'>} props 46992 * @param {import('react').ForwardedRef<any>} forwardedRef 46993 */ 46994 46995 function component_Tooltip(props, forwardedRef) { 46996 const { 46997 animated = true, 46998 animationDuration = 160, 46999 baseId, 47000 children, 47001 content, 47002 focusable = true, 47003 gutter = 4, 47004 id, 47005 modal = true, 47006 placement, 47007 visible = false, 47008 shortcut, 47009 ...otherProps 47010 } = useContextSystem(props, 'Tooltip'); 47011 const tooltip = useTooltipState({ 47012 animated: animated ? animationDuration : undefined, 47013 baseId: baseId || id, 47014 gutter, 47015 placement, 47016 visible, 47017 ...otherProps 47018 }); 47019 const contextProps = (0,external_wp_element_namespaceObject.useMemo)(() => ({ 47020 tooltip 47021 }), [tooltip]); 47022 return (0,external_wp_element_namespaceObject.createElement)(TooltipContext.Provider, { 47023 value: contextProps 47024 }, content && (0,external_wp_element_namespaceObject.createElement)(tooltip_content, { 47025 unstable_portal: modal, 47026 ref: forwardedRef 47027 }, content, shortcut && (0,external_wp_element_namespaceObject.createElement)(TooltipShortcut, { 47028 shortcut: shortcut 47029 })), children && (0,external_wp_element_namespaceObject.createElement)(TooltipReference, extends_extends({}, tooltip, children.props, { 47030 // @ts-ignore If ref doesn't exist that's fine with us, it'll just be undefined, but it can exist on ReactElement and there's no reason to try to scope this (it'll just overcomplicate things) 47031 ref: children === null || children === void 0 ? void 0 : children.ref 47032 }), referenceProps => { 47033 if (!focusable) { 47034 referenceProps.tabIndex = undefined; 47035 } 47036 47037 return (0,external_wp_element_namespaceObject.cloneElement)(children, referenceProps); 47038 })); 47039 } 47040 /** 47041 * `Tooltip` is a component that provides context for a user interface element. 47042 * 47043 * @example 47044 * ```jsx 47045 * import { Tooltip, Text } from `@wordpress/components/ui`; 47046 * 47047 * function Example() { 47048 * return ( 47049 * <Tooltip content="Code is Poetry"> 47050 * <Text>WordPress.org</Text> 47051 * </Tooltip> 47052 * ) 47053 * } 47054 * ``` 47055 */ 47056 47057 47058 const ConnectedTooltip = contextConnect(component_Tooltip, 'Tooltip'); 47059 /* harmony default export */ var tooltip_component = (ConnectedTooltip); 47060 47061 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/color-picker/color-display.js 47062 47063 47064 /** 47065 * External dependencies 47066 */ 47067 47068 /** 47069 * WordPress dependencies 47070 */ 47071 47072 47073 47074 /** 47075 * Internal dependencies 47076 */ 47077 47078 47079 47080 47081 47082 47083 47084 const ValueDisplay = _ref => { 47085 let { 47086 values 47087 } = _ref; 47088 return (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, values.map(_ref2 => { 47089 let [value, abbreviation] = _ref2; 47090 return (0,external_wp_element_namespaceObject.createElement)(flex_item_component, { 47091 key: abbreviation, 47092 isBlock: true, 47093 display: "flex" 47094 }, (0,external_wp_element_namespaceObject.createElement)(text_component, { 47095 color: COLORS.ui.theme 47096 }, abbreviation), (0,external_wp_element_namespaceObject.createElement)(text_component, null, value)); 47097 })); 47098 }; 47099 47100 const HslDisplay = _ref3 => { 47101 let { 47102 color, 47103 enableAlpha 47104 } = _ref3; 47105 const { 47106 h, 47107 s, 47108 l, 47109 a 47110 } = color.toHsl(); 47111 const values = [[Math.floor(h), 'H'], [Math.round(s * 100), 'S'], [Math.round(l * 100), 'L']]; 47112 47113 if (enableAlpha) { 47114 values.push([Math.round(a * 100), 'A']); 47115 } 47116 47117 return (0,external_wp_element_namespaceObject.createElement)(ValueDisplay, { 47118 values: values 47119 }); 47120 }; 47121 47122 const RgbDisplay = _ref4 => { 47123 let { 47124 color, 47125 enableAlpha 47126 } = _ref4; 47127 const { 47128 r, 47129 g, 47130 b, 47131 a 47132 } = color.toRgb(); 47133 const values = [[r, 'R'], [g, 'G'], [b, 'B']]; 47134 47135 if (enableAlpha) { 47136 values.push([Math.round(a * 100), 'A']); 47137 } 47138 47139 return (0,external_wp_element_namespaceObject.createElement)(ValueDisplay, { 47140 values: values 47141 }); 47142 }; 47143 47144 const HexDisplay = _ref5 => { 47145 let { 47146 color 47147 } = _ref5; 47148 const colorWithoutHash = color.toHex().slice(1).toUpperCase(); 47149 return (0,external_wp_element_namespaceObject.createElement)(flex_item_component, null, (0,external_wp_element_namespaceObject.createElement)(text_component, { 47150 color: COLORS.ui.theme 47151 }, "#"), (0,external_wp_element_namespaceObject.createElement)(text_component, null, colorWithoutHash)); 47152 }; 47153 47154 const getComponent = colorType => { 47155 switch (colorType) { 47156 case 'hsl': 47157 return HslDisplay; 47158 47159 case 'rgb': 47160 return RgbDisplay; 47161 47162 default: 47163 case 'hex': 47164 return HexDisplay; 47165 } 47166 }; 47167 47168 const ColorDisplay = _ref6 => { 47169 let { 47170 color, 47171 colorType, 47172 enableAlpha 47173 } = _ref6; 47174 const [copiedColor, setCopiedColor] = (0,external_wp_element_namespaceObject.useState)(null); 47175 const copyTimer = (0,external_wp_element_namespaceObject.useRef)(); 47176 const props = { 47177 color, 47178 enableAlpha 47179 }; 47180 const Component = getComponent(colorType); 47181 const copyRef = (0,external_wp_compose_namespaceObject.useCopyToClipboard)(() => { 47182 switch (colorType) { 47183 case 'hsl': 47184 { 47185 return color.toHslString(); 47186 } 47187 47188 case 'rgb': 47189 { 47190 return color.toRgbString(); 47191 } 47192 47193 default: 47194 case 'hex': 47195 { 47196 return color.toHex(); 47197 } 47198 } 47199 }, () => { 47200 if (copyTimer.current) { 47201 clearTimeout(copyTimer.current); 47202 } 47203 47204 setCopiedColor(color.toHex()); 47205 copyTimer.current = setTimeout(() => { 47206 setCopiedColor(null); 47207 copyTimer.current = undefined; 47208 }, 3000); 47209 }); 47210 (0,external_wp_element_namespaceObject.useEffect)(() => { 47211 // Clear copyTimer on component unmount. 47212 return () => { 47213 if (copyTimer.current) { 47214 clearTimeout(copyTimer.current); 47215 } 47216 }; 47217 }, []); 47218 return (0,external_wp_element_namespaceObject.createElement)(tooltip_component, { 47219 content: (0,external_wp_element_namespaceObject.createElement)(text_component, { 47220 color: "white" 47221 }, copiedColor === color.toHex() ? (0,external_wp_i18n_namespaceObject.__)('Copied!') : (0,external_wp_i18n_namespaceObject.__)('Copy')) 47222 }, (0,external_wp_element_namespaceObject.createElement)(flex_component, { 47223 justify: "flex-start", 47224 gap: space(1), 47225 ref: copyRef, 47226 style: { 47227 height: 30 47228 } 47229 }, (0,external_wp_element_namespaceObject.createElement)(Component, props))); 47230 }; 47231 47232 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/color-picker/input-with-slider.js 47233 47234 47235 /** 47236 * Internal dependencies 47237 */ 47238 47239 47240 47241 47242 47243 47244 const InputWithSlider = _ref => { 47245 let { 47246 min, 47247 max, 47248 label, 47249 abbreviation, 47250 onChange, 47251 value 47252 } = _ref; 47253 return (0,external_wp_element_namespaceObject.createElement)(spacer_component, { 47254 as: h_stack_component, 47255 spacing: 4 47256 }, (0,external_wp_element_namespaceObject.createElement)(NumberControlWrapper, { 47257 min: min, 47258 max: max, 47259 label: label, 47260 hideLabelFromVision: true, 47261 value: value, 47262 onChange: onChange, 47263 prefix: (0,external_wp_element_namespaceObject.createElement)(spacer_component, { 47264 as: text_component, 47265 paddingLeft: space(3.5), 47266 color: COLORS.ui.theme, 47267 lineHeight: 1 47268 }, abbreviation), 47269 hideHTMLArrows: true 47270 }), (0,external_wp_element_namespaceObject.createElement)(styles_RangeControl, { 47271 label: label, 47272 hideLabelFromVision: true, 47273 min: min, 47274 max: max, 47275 value: value, 47276 onChange: onChange, 47277 withInputField: false 47278 })); 47279 }; 47280 47281 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/color-picker/rgb-input.js 47282 47283 47284 /** 47285 * External dependencies 47286 */ 47287 47288 /** 47289 * Internal dependencies 47290 */ 47291 47292 47293 const RgbInput = _ref => { 47294 let { 47295 color, 47296 onChange, 47297 enableAlpha 47298 } = _ref; 47299 const { 47300 r, 47301 g, 47302 b, 47303 a 47304 } = color.toRgb(); 47305 return (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, (0,external_wp_element_namespaceObject.createElement)(InputWithSlider, { 47306 min: 0, 47307 max: 255, 47308 label: "Red", 47309 abbreviation: "R", 47310 value: r, 47311 onChange: nextR => onChange(w({ 47312 r: nextR, 47313 g, 47314 b, 47315 a 47316 })) 47317 }), (0,external_wp_element_namespaceObject.createElement)(InputWithSlider, { 47318 min: 0, 47319 max: 255, 47320 label: "Green", 47321 abbreviation: "G", 47322 value: g, 47323 onChange: nextG => onChange(w({ 47324 r, 47325 g: nextG, 47326 b, 47327 a 47328 })) 47329 }), (0,external_wp_element_namespaceObject.createElement)(InputWithSlider, { 47330 min: 0, 47331 max: 255, 47332 label: "Blue", 47333 abbreviation: "B", 47334 value: b, 47335 onChange: nextB => onChange(w({ 47336 r, 47337 g, 47338 b: nextB, 47339 a 47340 })) 47341 }), enableAlpha && (0,external_wp_element_namespaceObject.createElement)(InputWithSlider, { 47342 min: 0, 47343 max: 100, 47344 label: "Alpha", 47345 abbreviation: "A", 47346 value: Math.trunc(a * 100), 47347 onChange: nextA => onChange(w({ 47348 r, 47349 g, 47350 b, 47351 a: nextA / 100 47352 })) 47353 })); 47354 }; 47355 47356 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/color-picker/hsl-input.js 47357 47358 47359 /** 47360 * External dependencies 47361 */ 47362 47363 /** 47364 * Internal dependencies 47365 */ 47366 47367 47368 const HslInput = _ref => { 47369 let { 47370 color, 47371 onChange, 47372 enableAlpha 47373 } = _ref; 47374 const { 47375 h, 47376 s, 47377 l, 47378 a 47379 } = color.toHsl(); 47380 return (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, (0,external_wp_element_namespaceObject.createElement)(InputWithSlider, { 47381 min: 0, 47382 max: 359, 47383 label: "Hue", 47384 abbreviation: "H", 47385 value: h, 47386 onChange: nextH => { 47387 onChange(w({ 47388 h: nextH, 47389 s, 47390 l, 47391 a 47392 })); 47393 } 47394 }), (0,external_wp_element_namespaceObject.createElement)(InputWithSlider, { 47395 min: 0, 47396 max: 100, 47397 label: "Saturation", 47398 abbreviation: "S", 47399 value: s, 47400 onChange: nextS => { 47401 onChange(w({ 47402 h, 47403 s: nextS, 47404 l, 47405 a 47406 })); 47407 } 47408 }), (0,external_wp_element_namespaceObject.createElement)(InputWithSlider, { 47409 min: 0, 47410 max: 100, 47411 label: "Lightness", 47412 abbreviation: "L", 47413 value: l, 47414 onChange: nextL => { 47415 onChange(w({ 47416 h, 47417 s, 47418 l: nextL, 47419 a 47420 })); 47421 } 47422 }), enableAlpha && (0,external_wp_element_namespaceObject.createElement)(InputWithSlider, { 47423 min: 0, 47424 max: 100, 47425 label: "Alpha", 47426 abbreviation: "A", 47427 value: Math.trunc(100 * a), 47428 onChange: nextA => { 47429 onChange(w({ 47430 h, 47431 s, 47432 l, 47433 a: nextA / 100 47434 })); 47435 } 47436 })); 47437 }; 47438 47439 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/color-picker/hex-input.js 47440 47441 47442 /** 47443 * External dependencies 47444 */ 47445 47446 /** 47447 * WordPress dependencies 47448 */ 47449 47450 47451 /** 47452 * Internal dependencies 47453 */ 47454 47455 47456 47457 47458 47459 47460 const HexInput = _ref => { 47461 let { 47462 color, 47463 onChange, 47464 enableAlpha 47465 } = _ref; 47466 47467 const handleChange = nextValue => { 47468 if (!nextValue) return; 47469 const hexValue = nextValue.startsWith('#') ? nextValue : '#' + nextValue; 47470 onChange(w(hexValue)); 47471 }; 47472 47473 return (0,external_wp_element_namespaceObject.createElement)(ColorHexInputControl, { 47474 prefix: (0,external_wp_element_namespaceObject.createElement)(spacer_component, { 47475 as: text_component, 47476 marginLeft: space(3.5), 47477 color: COLORS.ui.theme, 47478 lineHeight: 1 47479 }, "#"), 47480 value: color.toHex().slice(1).toUpperCase(), 47481 onChange: handleChange, 47482 maxLength: enableAlpha ? 9 : 7, 47483 label: (0,external_wp_i18n_namespaceObject.__)('Hex color'), 47484 hideLabelFromVision: true 47485 }); 47486 }; 47487 47488 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/color-picker/color-input.js 47489 47490 47491 /** 47492 * External dependencies 47493 */ 47494 47495 /** 47496 * Internal dependencies 47497 */ 47498 47499 47500 47501 const ColorInput = _ref => { 47502 let { 47503 colorType, 47504 color, 47505 onChange, 47506 enableAlpha 47507 } = _ref; 47508 const props = { 47509 color, 47510 onChange, 47511 enableAlpha 47512 }; 47513 47514 switch (colorType) { 47515 case 'hsl': 47516 return (0,external_wp_element_namespaceObject.createElement)(HslInput, props); 47517 47518 case 'rgb': 47519 return (0,external_wp_element_namespaceObject.createElement)(RgbInput, props); 47520 47521 default: 47522 case 'hex': 47523 return (0,external_wp_element_namespaceObject.createElement)(HexInput, props); 47524 } 47525 }; 47526 47527 ;// CONCATENATED MODULE: ./node_modules/react-colorful/dist/index.module.js 47528 function index_module_u(){return(index_module_u=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])}return e}).apply(this,arguments)}function index_module_c(e,r){if(null==e)return{};var t,n,o={},a=Object.keys(e);for(n=0;n<a.length;n++)r.indexOf(t=a[n])>=0||(o[t]=e[t]);return o}function index_module_i(e){var t=(0,external_React_.useRef)(e),n=(0,external_React_.useRef)(function(e){t.current&&t.current(e)});return t.current=e,n.current}var index_module_s=function(e,r,t){return void 0===r&&(r=0),void 0===t&&(t=1),e>t?t:e<r?r:e},index_module_f=function(e){return"touches"in e},index_module_v=function(e){return e&&e.ownerDocument.defaultView||self},index_module_d=function(e,r,t){var n=e.getBoundingClientRect(),o=index_module_f(r)?function(e,r){for(var t=0;t<e.length;t++)if(e[t].identifier===r)return e[t];return e[0]}(r.touches,t):r;return{left:index_module_s((o.pageX-(n.left+index_module_v(e).pageXOffset))/n.width),top:index_module_s((o.pageY-(n.top+index_module_v(e).pageYOffset))/n.height)}},index_module_h=function(e){!index_module_f(e)&&e.preventDefault()},index_module_m=external_React_default().memo(function(o){var a=o.onMove,l=o.onKey,s=index_module_c(o,["onMove","onKey"]),m=(0,external_React_.useRef)(null),g=index_module_i(a),p=index_module_i(l),b=(0,external_React_.useRef)(null),_=(0,external_React_.useRef)(!1),x=(0,external_React_.useMemo)(function(){var e=function(e){index_module_h(e),(index_module_f(e)?e.touches.length>0:e.buttons>0)&&m.current?g(index_module_d(m.current,e,b.current)):t(!1)},r=function(){return t(!1)};function t(t){var n=_.current,o=index_module_v(m.current),a=t?o.addEventListener:o.removeEventListener;a(n?"touchmove":"mousemove",e),a(n?"touchend":"mouseup",r)}return[function(e){var r=e.nativeEvent,n=m.current;if(n&&(index_module_h(r),!function(e,r){return r&&!index_module_f(e)}(r,_.current)&&n)){if(index_module_f(r)){_.current=!0;var o=r.changedTouches||[];o.length&&(b.current=o[0].identifier)}n.focus(),g(index_module_d(n,r,b.current)),t(!0)}},function(e){var r=e.which||e.keyCode;r<37||r>40||(e.preventDefault(),p({left:39===r?.05:37===r?-.05:0,top:40===r?.05:38===r?-.05:0}))},t]},[p,g]),C=x[0],E=x[1],H=x[2];return (0,external_React_.useEffect)(function(){return H},[H]),external_React_default().createElement("div",index_module_u({},s,{onTouchStart:C,onMouseDown:C,className:"react-colorful__interactive",ref:m,onKeyDown:E,tabIndex:0,role:"slider"}))}),index_module_g=function(e){return e.filter(Boolean).join(" ")},index_module_p=function(r){var t=r.color,n=r.left,o=r.top,a=void 0===o?.5:o,l=index_module_g(["react-colorful__pointer",r.className]);return external_React_default().createElement("div",{className:l,style:{top:100*a+"%",left:100*n+"%"}},external_React_default().createElement("div",{className:"react-colorful__pointer-fill",style:{backgroundColor:t}}))},index_module_b=function(e,r,t){return void 0===r&&(r=0),void 0===t&&(t=Math.pow(10,r)),Math.round(t*e)/t},_={grad:.9,turn:360,rad:360/(2*Math.PI)},index_module_x=function(e){return"#"===e[0]&&(e=e.substr(1)),e.length<6?{r:parseInt(e[0]+e[0],16),g:parseInt(e[1]+e[1],16),b:parseInt(e[2]+e[2],16),a:1}:{r:parseInt(e.substr(0,2),16),g:parseInt(e.substr(2,2),16),b:parseInt(e.substr(4,2),16),a:1}},C=function(e,r){return void 0===r&&(r="deg"),Number(e)*(_[r]||1)},index_module_E=function(e){var r=/hsla?\(?\s*(-?\d*\.?\d+)(deg|rad|grad|turn)?[,\s]+(-?\d*\.?\d+)%?[,\s]+(-?\d*\.?\d+)%?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i.exec(e);return r?index_module_M({h:C(r[1],r[2]),s:Number(r[3]),l:Number(r[4]),a:void 0===r[5]?1:Number(r[5])/(r[6]?100:1)}):{h:0,s:0,v:0,a:1}},index_module_H=index_module_E,index_module_M=function(e){var r=e.s,t=e.l;return{h:e.h,s:(r*=(t<50?t:100-t)/100)>0?2*r/(t+r)*100:0,v:t+r,a:e.a}},index_module_N=function(e){var r=e.s,t=e.v,n=e.a,o=(200-r)*t/100;return{h:index_module_b(e.h),s:index_module_b(o>0&&o<200?r*t/100/(o<=100?o:200-o)*100:0),l:index_module_b(o/2),a:index_module_b(n,2)}},index_module_w=function(e){var r=index_module_N(e);return"hsl("+r.h+", "+r.s+"%, "+r.l+"%)"},index_module_y=function(e){var r=index_module_N(e);return"hsla("+r.h+", "+r.s+"%, "+r.l+"%, "+r.a+")"},q=function(e){var r=e.h,t=e.s,n=e.v,o=e.a;r=r/360*6,t/=100,n/=100;var a=Math.floor(r),l=n*(1-t),u=n*(1-(r-a)*t),c=n*(1-(1-r+a)*t),i=a%6;return{r:index_module_b(255*[n,u,l,l,c,n][i]),g:index_module_b(255*[c,n,n,u,l,l][i]),b:index_module_b(255*[l,l,c,n,n,u][i]),a:index_module_b(o,2)}},index_module_k=function(e){var r=/hsva?\(?\s*(-?\d*\.?\d+)(deg|rad|grad|turn)?[,\s]+(-?\d*\.?\d+)%?[,\s]+(-?\d*\.?\d+)%?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i.exec(e);return r?D({h:C(r[1],r[2]),s:Number(r[3]),v:Number(r[4]),a:void 0===r[5]?1:Number(r[5])/(r[6]?100:1)}):{h:0,s:0,v:0,a:1}},O=index_module_k,index_module_I=function(e){var r=/rgba?\(?\s*(-?\d*\.?\d+)(%)?[,\s]+(-?\d*\.?\d+)(%)?[,\s]+(-?\d*\.?\d+)(%)?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i.exec(e);return r?B({r:Number(r[1])/(r[2]?100/255:1),g:Number(r[3])/(r[4]?100/255:1),b:Number(r[5])/(r[6]?100/255:1),a:void 0===r[7]?1:Number(r[7])/(r[8]?100:1)}):{h:0,s:0,v:0,a:1}},index_module_j=index_module_I,z=function(e){var r=e.toString(16);return r.length<2?"0"+r:r},B=function(e){var r=e.r,t=e.g,n=e.b,o=e.a,a=Math.max(r,t,n),l=a-Math.min(r,t,n),u=l?a===r?(t-n)/l:a===t?2+(n-r)/l:4+(r-t)/l:0;return{h:index_module_b(60*(u<0?u+6:u)),s:index_module_b(a?l/a*100:0),v:index_module_b(a/255*100),a:o}},D=function(e){return{h:index_module_b(e.h),s:index_module_b(e.s),v:index_module_b(e.v),a:index_module_b(e.a,2)}},K=external_React_default().memo(function(r){var t=r.hue,n=r.onChange,o=index_module_g(["react-colorful__hue",r.className]);return external_React_default().createElement("div",{className:o},external_React_default().createElement(index_module_m,{onMove:function(e){n({h:360*e.left})},onKey:function(e){n({h:index_module_s(t+360*e.left,0,360)})},"aria-label":"Hue","aria-valuetext":index_module_b(t)},external_React_default().createElement(index_module_p,{className:"react-colorful__hue-pointer",left:t/360,color:index_module_w({h:t,s:100,v:100,a:1})})))}),L=external_React_default().memo(function(r){var t=r.hsva,n=r.onChange,o={backgroundColor:index_module_w({h:t.h,s:100,v:100,a:1})};return external_React_default().createElement("div",{className:"react-colorful__saturation",style:o},external_React_default().createElement(index_module_m,{onMove:function(e){n({s:100*e.left,v:100-100*e.top})},onKey:function(e){n({s:index_module_s(t.s+100*e.left,0,100),v:index_module_s(t.v-100*e.top,0,100)})},"aria-label":"Color","aria-valuetext":"Saturation "+index_module_b(t.s)+"%, Brightness "+index_module_b(t.v)+"%"},external_React_default().createElement(index_module_p,{className:"react-colorful__saturation-pointer",top:1-t.v/100,left:t.s/100,color:index_module_w(t)})))}),A=function(e,r){if(e===r)return!0;for(var t in e)if(e[t]!==r[t])return!1;return!0},index_module_S=function(e,r){return e.replace(/\s/g,"")===r.replace(/\s/g,"")};function T(e,t,l){var u=index_module_i(l),c=(0,external_React_.useState)(function(){return e.toHsva(t)}),s=c[0],f=c[1],v=(0,external_React_.useRef)({color:t,hsva:s});(0,external_React_.useEffect)(function(){if(!e.equal(t,v.current.color)){var r=e.toHsva(t);v.current={hsva:r,color:t},f(r)}},[t,e]),(0,external_React_.useEffect)(function(){var r;A(s,v.current.hsva)||e.equal(r=e.fromHsva(s),v.current.color)||(v.current={hsva:s,color:r},u(r))},[s,e,u]);var d=(0,external_React_.useCallback)(function(e){f(function(r){return Object.assign({},r,e)})},[]);return[s,d]}var F,P="undefined"!=typeof window?external_React_.useLayoutEffect:external_React_.useEffect,X=function(){return F||( true?__webpack_require__.nc:0)},Y=function(e){F=e},R=new Map,index_module_V=function(e){P(function(){var r=e.current?e.current.ownerDocument:document;if(void 0!==r&&!R.has(r)){var t=r.createElement("style");t.innerHTML='.react-colorful{position:relative;display:flex;flex-direction:column;width:200px;height:200px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default}.react-colorful__saturation{position:relative;flex-grow:1;border-color:transparent;border-bottom:12px solid #000;border-radius:8px 8px 0 0;background-image:linear-gradient(0deg,#000,transparent),linear-gradient(90deg,#fff,hsla(0,0%,100%,0))}.react-colorful__alpha-gradient,.react-colorful__pointer-fill{content:"";position:absolute;left:0;top:0;right:0;bottom:0;pointer-events:none;border-radius:inherit}.react-colorful__alpha-gradient,.react-colorful__saturation{box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}.react-colorful__alpha,.react-colorful__hue{position:relative;height:24px}.react-colorful__hue{background:linear-gradient(90deg,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red)}.react-colorful__last-control{border-radius:0 0 8px 8px}.react-colorful__interactive{position:absolute;left:0;top:0;right:0;bottom:0;border-radius:inherit;outline:none;touch-action:none}.react-colorful__pointer{position:absolute;z-index:1;box-sizing:border-box;width:28px;height:28px;transform:translate(-50%,-50%);background-color:#fff;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2)}.react-colorful__interactive:focus .react-colorful__pointer{transform:translate(-50%,-50%) scale(1.1)}.react-colorful__alpha,.react-colorful__alpha-pointer{background-color:#fff;background-image:url(\'data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill-opacity=".05"><path d="M8 0h8v8H8zM0 8h8v8H0z"/></svg>\')}.react-colorful__saturation-pointer{z-index:3}.react-colorful__hue-pointer{z-index:2}',R.set(r,t);var n=X();n&&t.setAttribute("nonce",n),r.head.appendChild(t)}},[])},index_module_$=function(t){var n=t.className,o=t.colorModel,a=t.color,l=void 0===a?o.defaultColor:a,i=t.onChange,s=index_module_c(t,["className","colorModel","color","onChange"]),f=(0,external_React_.useRef)(null);index_module_V(f);var v=T(o,l,i),d=v[0],h=v[1],m=index_module_g(["react-colorful",n]);return external_React_default().createElement("div",index_module_u({},s,{ref:f,className:m}),external_React_default().createElement(L,{hsva:d,onChange:h}),external_React_default().createElement(K,{hue:d.h,onChange:h,className:"react-colorful__last-control"}))},G={defaultColor:"000",toHsva:function(e){return B(index_module_x(e))},fromHsva:function(e){return t=(r=q(e)).g,n=r.b,"#"+z(r.r)+z(t)+z(n);var r,t,n},equal:function(e,r){return e.toLowerCase()===r.toLowerCase()||A(index_module_x(e),index_module_x(r))}},J=function(r){return e.createElement(index_module_$,index_module_u({},r,{colorModel:G}))},Q=function(r){var t=r.className,n=r.hsva,o=r.onChange,a={backgroundImage:"linear-gradient(90deg, "+index_module_y(Object.assign({},n,{a:0}))+", "+index_module_y(Object.assign({},n,{a:1}))+")"},l=index_module_g(["react-colorful__alpha",t]);return external_React_default().createElement("div",{className:l},external_React_default().createElement("div",{className:"react-colorful__alpha-gradient",style:a}),external_React_default().createElement(index_module_m,{onMove:function(e){o({a:e.left})},onKey:function(e){o({a:index_module_s(n.a+e.left)})},"aria-label":"Alpha","aria-valuetext":index_module_b(100*n.a)+"%"},external_React_default().createElement(index_module_p,{className:"react-colorful__alpha-pointer",left:n.a,color:index_module_y(n)})))},U=function(t){var n=t.className,o=t.colorModel,a=t.color,l=void 0===a?o.defaultColor:a,i=t.onChange,s=index_module_c(t,["className","colorModel","color","onChange"]),f=(0,external_React_.useRef)(null);index_module_V(f);var v=T(o,l,i),d=v[0],h=v[1],m=index_module_g(["react-colorful",n]);return external_React_default().createElement("div",index_module_u({},s,{ref:f,className:m}),external_React_default().createElement(L,{hsva:d,onChange:h}),external_React_default().createElement(K,{hue:d.h,onChange:h}),external_React_default().createElement(Q,{hsva:d,onChange:h,className:"react-colorful__last-control"}))},W={defaultColor:{h:0,s:0,l:0,a:1},toHsva:index_module_M,fromHsva:index_module_N,equal:A},Z=function(r){return e.createElement(U,index_module_u({},r,{colorModel:W}))},ee={defaultColor:"hsla(0, 0%, 0%, 1)",toHsva:index_module_E,fromHsva:index_module_y,equal:index_module_S},re=function(r){return e.createElement(U,index_module_u({},r,{colorModel:ee}))},te={defaultColor:{h:0,s:0,l:0},toHsva:function(e){return index_module_M({h:e.h,s:e.s,l:e.l,a:1})},fromHsva:function(e){return{h:(r=index_module_N(e)).h,s:r.s,l:r.l};var r},equal:A},ne=function(r){return e.createElement(index_module_$,index_module_u({},r,{colorModel:te}))},oe={defaultColor:"hsl(0, 0%, 0%)",toHsva:index_module_H,fromHsva:index_module_w,equal:index_module_S},ae=function(r){return e.createElement(index_module_$,index_module_u({},r,{colorModel:oe}))},le={defaultColor:{h:0,s:0,v:0,a:1},toHsva:function(e){return e},fromHsva:D,equal:A},ue=function(r){return e.createElement(U,index_module_u({},r,{colorModel:le}))},ce={defaultColor:"hsva(0, 0%, 0%, 1)",toHsva:index_module_k,fromHsva:function(e){var r=D(e);return"hsva("+r.h+", "+r.s+"%, "+r.v+"%, "+r.a+")"},equal:index_module_S},ie=function(r){return e.createElement(U,index_module_u({},r,{colorModel:ce}))},se={defaultColor:{h:0,s:0,v:0},toHsva:function(e){return{h:e.h,s:e.s,v:e.v,a:1}},fromHsva:function(e){var r=D(e);return{h:r.h,s:r.s,v:r.v}},equal:A},fe=function(r){return e.createElement(index_module_$,index_module_u({},r,{colorModel:se}))},ve={defaultColor:"hsv(0, 0%, 0%)",toHsva:O,fromHsva:function(e){var r=D(e);return"hsv("+r.h+", "+r.s+"%, "+r.v+"%)"},equal:index_module_S},de=function(r){return e.createElement(index_module_$,index_module_u({},r,{colorModel:ve}))},he={defaultColor:{r:0,g:0,b:0,a:1},toHsva:B,fromHsva:q,equal:A},me=function(r){return e.createElement(U,index_module_u({},r,{colorModel:he}))},ge={defaultColor:"rgba(0, 0, 0, 1)",toHsva:index_module_I,fromHsva:function(e){var r=q(e);return"rgba("+r.r+", "+r.g+", "+r.b+", "+r.a+")"},equal:index_module_S},pe=function(r){return external_React_default().createElement(U,index_module_u({},r,{colorModel:ge}))},be={defaultColor:{r:0,g:0,b:0},toHsva:function(e){return B({r:e.r,g:e.g,b:e.b,a:1})},fromHsva:function(e){return{r:(r=q(e)).r,g:r.g,b:r.b};var r},equal:A},_e=function(r){return e.createElement(index_module_$,index_module_u({},r,{colorModel:be}))},xe={defaultColor:"rgb(0, 0, 0)",toHsva:index_module_j,fromHsva:function(e){var r=q(e);return"rgb("+r.r+", "+r.g+", "+r.b+")"},equal:index_module_S},Ce=function(r){return external_React_default().createElement(index_module_$,index_module_u({},r,{colorModel:xe}))},Ee=/^#?([0-9A-F]{3,8})$/i,He=function(r){var t=r.color,l=void 0===t?"":t,s=r.onChange,f=r.onBlur,v=r.escape,d=r.validate,h=r.format,m=r.process,g=index_module_c(r,["color","onChange","onBlur","escape","validate","format","process"]),p=o(function(){return v(l)}),b=p[0],_=p[1],x=index_module_i(s),C=index_module_i(f),E=a(function(e){var r=v(e.target.value);_(r),d(r)&&x(m?m(r):r)},[v,m,d,x]),H=a(function(e){d(e.target.value)||_(v(l)),C(e)},[l,v,d,C]);return n(function(){_(v(l))},[l,v]),e.createElement("input",index_module_u({},g,{value:h?h(b):b,spellCheck:"false",onChange:E,onBlur:H}))},Me=function(e){return"#"+e},Ne=function(r){var t=r.prefixed,n=r.alpha,o=index_module_c(r,["prefixed","alpha"]),l=a(function(e){return e.replace(/([^0-9A-F]+)/gi,"").substr(0,n?8:6)},[n]),i=a(function(e){return function(e,r){var t=Ee.exec(e),n=t?t[1].length:0;return 3===n||6===n||!!r&&4===n||!!r&&8===n}(e,n)},[n]);return e.createElement(He,index_module_u({},o,{escape:l,format:t?Me:void 0,process:Me,validate:i}))}; 47529 47530 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/color-picker/picker.js 47531 47532 47533 /** 47534 * External dependencies 47535 */ 47536 47537 47538 /** 47539 * WordPress dependencies 47540 */ 47541 47542 47543 const Picker = _ref => { 47544 let { 47545 color, 47546 enableAlpha, 47547 onChange 47548 } = _ref; 47549 const Component = enableAlpha ? pe : Ce; 47550 const rgbColor = (0,external_wp_element_namespaceObject.useMemo)(() => color.toRgbString(), [color]); 47551 return (0,external_wp_element_namespaceObject.createElement)(Component, { 47552 color: rgbColor, 47553 onChange: nextColor => { 47554 onChange(w(nextColor)); 47555 } 47556 }); 47557 }; 47558 47559 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/utils/hooks/use-controlled-value.js 47560 /** 47561 * WordPress dependencies 47562 */ 47563 47564 47565 /** 47566 * Simplified and improved implementation of useControlledState. 47567 * 47568 * @param props 47569 * @param props.defaultValue 47570 * @param props.value 47571 * @param props.onChange 47572 * @return The controlled value and the value setter. 47573 */ 47574 function useControlledValue(_ref) { 47575 let { 47576 defaultValue, 47577 onChange, 47578 value: valueProp 47579 } = _ref; 47580 const hasValue = typeof valueProp !== 'undefined'; 47581 const initialValue = hasValue ? valueProp : defaultValue; 47582 const [state, setState] = (0,external_wp_element_namespaceObject.useState)(initialValue); 47583 const value = hasValue ? valueProp : state; 47584 let setValue; 47585 47586 if (hasValue && typeof onChange === 'function') { 47587 setValue = onChange; 47588 } else if (!hasValue && typeof onChange === 'function') { 47589 setValue = nextValue => { 47590 onChange(nextValue); 47591 setState(nextValue); 47592 }; 47593 } else { 47594 setValue = setState; 47595 } 47596 47597 return [value, setValue]; 47598 } 47599 47600 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/color-picker/component.js 47601 47602 47603 47604 /** 47605 * External dependencies 47606 */ 47607 47608 47609 /** 47610 * WordPress dependencies 47611 */ 47612 47613 47614 47615 47616 47617 /** 47618 * Internal dependencies 47619 */ 47620 47621 47622 47623 47624 47625 47626 47627 47628 47629 k([names]); 47630 const options = [{ 47631 label: 'RGB', 47632 value: 'rgb' 47633 }, { 47634 label: 'HSL', 47635 value: 'hsl' 47636 }, { 47637 label: 'Hex', 47638 value: 'hex' 47639 }]; 47640 47641 const ColorPicker = (props, forwardedRef) => { 47642 const { 47643 enableAlpha = false, 47644 color: colorProp, 47645 onChange, 47646 defaultValue = '#fff', 47647 copyFormat, 47648 ...divProps 47649 } = useContextSystem(props, 'ColorPicker'); // Use a safe default value for the color and remove the possibility of `undefined`. 47650 47651 const [color, setColor] = useControlledValue({ 47652 onChange, 47653 value: colorProp, 47654 defaultValue 47655 }); 47656 const safeColordColor = (0,external_wp_element_namespaceObject.useMemo)(() => { 47657 return w(color || ''); 47658 }, [color]); 47659 const debouncedSetColor = (0,external_wp_compose_namespaceObject.useDebounce)(setColor); 47660 const handleChange = (0,external_wp_element_namespaceObject.useCallback)(nextValue => { 47661 debouncedSetColor(nextValue.toHex()); 47662 }, [debouncedSetColor]); 47663 const [showInputs, setShowInputs] = (0,external_wp_element_namespaceObject.useState)(false); 47664 const [colorType, setColorType] = (0,external_wp_element_namespaceObject.useState)(copyFormat || 'hex'); 47665 return (0,external_wp_element_namespaceObject.createElement)(ColorfulWrapper, extends_extends({ 47666 ref: forwardedRef 47667 }, divProps), (0,external_wp_element_namespaceObject.createElement)(Picker, { 47668 onChange: handleChange, 47669 color: safeColordColor, 47670 enableAlpha: enableAlpha 47671 }), (0,external_wp_element_namespaceObject.createElement)(AuxiliaryColorArtefactWrapper, null, (0,external_wp_element_namespaceObject.createElement)(h_stack_component, { 47672 justify: "space-between" 47673 }, showInputs ? (0,external_wp_element_namespaceObject.createElement)(styles_SelectControl, { 47674 options: options, 47675 value: colorType, 47676 onChange: nextColorType => setColorType(nextColorType), 47677 label: (0,external_wp_i18n_namespaceObject.__)('Color format'), 47678 hideLabelFromVision: true 47679 }) : (0,external_wp_element_namespaceObject.createElement)(ColorDisplay, { 47680 color: safeColordColor, 47681 colorType: copyFormat || colorType, 47682 enableAlpha: enableAlpha 47683 }), (0,external_wp_element_namespaceObject.createElement)(DetailsControlButton, { 47684 isSmall: true, 47685 onClick: () => setShowInputs(!showInputs), 47686 icon: library_settings, 47687 isPressed: showInputs, 47688 label: showInputs ? (0,external_wp_i18n_namespaceObject.__)('Hide detailed inputs') : (0,external_wp_i18n_namespaceObject.__)('Show detailed inputs') 47689 })), (0,external_wp_element_namespaceObject.createElement)(spacer_component, { 47690 margin: 4 47691 }), showInputs && (0,external_wp_element_namespaceObject.createElement)(ColorInput, { 47692 colorType: colorType, 47693 color: safeColordColor, 47694 onChange: handleChange, 47695 enableAlpha: enableAlpha 47696 }))); 47697 }; 47698 47699 const ConnectedColorPicker = contextConnect(ColorPicker, 'ColorPicker'); 47700 /* harmony default export */ var color_picker_component = (ConnectedColorPicker); 47701 47702 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/color-picker/use-deprecated-props.js 47703 /** 47704 * External dependencies 47705 */ 47706 47707 47708 /** 47709 * WordPress dependencies 47710 */ 47711 47712 47713 /** 47714 * Internal dependencies 47715 */ 47716 47717 function isLegacyProps(props) { 47718 var _props$color; 47719 47720 return typeof props.onChangeComplete !== 'undefined' || typeof props.disableAlpha !== 'undefined' || typeof ((_props$color = props.color) === null || _props$color === void 0 ? void 0 : _props$color.hex) === 'string'; 47721 } 47722 47723 function getColorFromLegacyProps(props) { 47724 if (typeof (props === null || props === void 0 ? void 0 : props.color) === 'undefined') { 47725 return undefined; 47726 } 47727 47728 if (typeof props.color === 'string') { 47729 return props.color; 47730 } 47731 47732 if (props.color.hex) { 47733 return props.color.hex; 47734 } 47735 47736 return undefined; 47737 } 47738 47739 const transformColorStringToLegacyColor = memize_default()(color => { 47740 const colordColor = w(color); 47741 const hex = colordColor.toHex(); 47742 const rgb = colordColor.toRgb(); 47743 const hsv = colordColor.toHsv(); 47744 const hsl = colordColor.toHsl(); 47745 return { 47746 hex, 47747 rgb, 47748 hsv, 47749 hsl, 47750 source: 'hex', 47751 oldHue: hsl.h 47752 }; 47753 }); 47754 function use_deprecated_props_useDeprecatedProps(props) { 47755 const onChange = (0,external_wp_element_namespaceObject.useCallback)(color => { 47756 var _props$onChange; 47757 47758 if (isLegacyProps(props)) { 47759 return props.onChangeComplete(transformColorStringToLegacyColor(color)); 47760 } 47761 47762 return (_props$onChange = props.onChange) === null || _props$onChange === void 0 ? void 0 : _props$onChange.call(props, color); 47763 }, [props.onChangeComplete, props.onChange]); 47764 const color = (0,external_wp_element_namespaceObject.useMemo)(() => { 47765 return isLegacyProps(props) ? getColorFromLegacyProps(props) : props.color; 47766 }, [props.color]); 47767 const enableAlpha = (0,external_wp_element_namespaceObject.useMemo)(() => { 47768 return isLegacyProps(props) ? !props.disableAlpha : props.enableAlpha; 47769 }, [props.disableAlpha, props.enableAlpha]); 47770 return { ...(isLegacyProps(props) ? {} : props), 47771 onChange, 47772 color, 47773 enableAlpha 47774 }; 47775 } 47776 47777 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/color-picker/legacy-adapter.js 47778 47779 47780 /** 47781 * Internal dependencies 47782 */ 47783 47784 47785 const LegacyAdapter = props => { 47786 return (0,external_wp_element_namespaceObject.createElement)(color_picker_component, use_deprecated_props_useDeprecatedProps(props)); 47787 }; 47788 47789 ;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/check.js 47790 47791 47792 /** 47793 * WordPress dependencies 47794 */ 47795 47796 const check = (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.SVG, { 47797 xmlns: "http://www.w3.org/2000/svg", 47798 viewBox: "0 0 24 24" 47799 }, (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.Path, { 47800 d: "M16.7 7.1l-6.3 8.5-3.3-2.5-.9 1.2 4.5 3.4L17.9 8z" 47801 })); 47802 /* harmony default export */ var library_check = (check); 47803 47804 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/circular-option-picker/index.js 47805 47806 47807 // @ts-nocheck 47808 47809 /** 47810 * External dependencies 47811 */ 47812 47813 /** 47814 * WordPress dependencies 47815 */ 47816 47817 47818 /** 47819 * Internal dependencies 47820 */ 47821 47822 47823 47824 47825 47826 function Option(_ref) { 47827 let { 47828 className, 47829 isSelected, 47830 selectedIconProps, 47831 tooltipText, 47832 ...additionalProps 47833 } = _ref; 47834 const optionButton = (0,external_wp_element_namespaceObject.createElement)(build_module_button, extends_extends({ 47835 isPressed: isSelected, 47836 className: "components-circular-option-picker__option" 47837 }, additionalProps)); 47838 return (0,external_wp_element_namespaceObject.createElement)("div", { 47839 className: classnames_default()(className, 'components-circular-option-picker__option-wrapper') 47840 }, tooltipText ? (0,external_wp_element_namespaceObject.createElement)(tooltip, { 47841 text: tooltipText 47842 }, optionButton) : optionButton, isSelected && (0,external_wp_element_namespaceObject.createElement)(icons_build_module_icon, extends_extends({ 47843 icon: library_check 47844 }, selectedIconProps ? selectedIconProps : {}))); 47845 } 47846 47847 function DropdownLinkAction(_ref2) { 47848 let { 47849 buttonProps, 47850 className, 47851 dropdownProps, 47852 linkText 47853 } = _ref2; 47854 return (0,external_wp_element_namespaceObject.createElement)(Dropdown, extends_extends({ 47855 className: classnames_default()('components-circular-option-picker__dropdown-link-action', className), 47856 renderToggle: _ref3 => { 47857 let { 47858 isOpen, 47859 onToggle 47860 } = _ref3; 47861 return (0,external_wp_element_namespaceObject.createElement)(build_module_button, extends_extends({ 47862 "aria-expanded": isOpen, 47863 "aria-haspopup": "true", 47864 onClick: onToggle, 47865 variant: "link" 47866 }, buttonProps), linkText); 47867 } 47868 }, dropdownProps)); 47869 } 47870 47871 function ButtonAction(_ref4) { 47872 let { 47873 className, 47874 children, 47875 ...additionalProps 47876 } = _ref4; 47877 return (0,external_wp_element_namespaceObject.createElement)(build_module_button, extends_extends({ 47878 className: classnames_default()('components-circular-option-picker__clear', className), 47879 isSmall: true, 47880 variant: "secondary" 47881 }, additionalProps), children); 47882 } 47883 47884 function CircularOptionPicker(_ref5) { 47885 let { 47886 actions, 47887 className, 47888 options, 47889 children 47890 } = _ref5; 47891 return (0,external_wp_element_namespaceObject.createElement)("div", { 47892 className: classnames_default()('components-circular-option-picker', className) 47893 }, (0,external_wp_element_namespaceObject.createElement)("div", { 47894 className: "components-circular-option-picker__swatches" 47895 }, options), children, actions && (0,external_wp_element_namespaceObject.createElement)("div", { 47896 className: "components-circular-option-picker__custom-clear-wrapper" 47897 }, actions)); 47898 } 47899 CircularOptionPicker.Option = Option; 47900 CircularOptionPicker.ButtonAction = ButtonAction; 47901 CircularOptionPicker.DropdownLinkAction = DropdownLinkAction; 47902 47903 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/v-stack/hook.js 47904 /** 47905 * Internal dependencies 47906 */ 47907 47908 47909 /** 47910 * 47911 * @param {import('../ui/context').WordPressComponentProps<import('./types').Props, 'div'>} props 47912 */ 47913 47914 function useVStack(props) { 47915 const { 47916 expanded = false, 47917 ...otherProps 47918 } = useContextSystem(props, 'VStack'); 47919 const hStackProps = useHStack({ 47920 direction: 'column', 47921 expanded, 47922 ...otherProps 47923 }); 47924 return hStackProps; 47925 } 47926 47927 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/v-stack/component.js 47928 47929 47930 47931 /** 47932 * Internal dependencies 47933 */ 47934 47935 47936 47937 /** 47938 * @param {import('../ui/context').WordPressComponentProps<import('./types').Props, 'div'>} props 47939 * @param {import('react').ForwardedRef<any>} forwardedRef 47940 */ 47941 47942 function VStack(props, forwardedRef) { 47943 const vStackProps = useVStack(props); 47944 return (0,external_wp_element_namespaceObject.createElement)(component, extends_extends({}, vStackProps, { 47945 ref: forwardedRef 47946 })); 47947 } 47948 /** 47949 * `VStack` (or Vertical Stack) is a layout component that arranges child elements in a vertical line. 47950 * 47951 * `VStack` can render anything inside. 47952 * 47953 * @example 47954 * ```jsx 47955 * import { 47956 * __experimentalText as Text, 47957 * __experimentalVStack as VStack, 47958 * } from `@wordpress/components`; 47959 * 47960 * function Example() { 47961 * return ( 47962 * <VStack> 47963 * <Text>Code</Text> 47964 * <Text>is</Text> 47965 * <Text>Poetry</Text> 47966 * </VStack> 47967 * ); 47968 * } 47969 * ``` 47970 */ 47971 47972 47973 const ConnectedVStack = contextConnect(VStack, 'VStack'); 47974 /* harmony default export */ var v_stack_component = (ConnectedVStack); 47975 47976 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/truncate/component.js 47977 47978 47979 47980 /** 47981 * Internal dependencies 47982 */ 47983 47984 47985 47986 /** 47987 * @param {import('../ui/context').WordPressComponentProps<import('./types').Props, 'span'>} props 47988 * @param {import('react').ForwardedRef<any>} forwardedRef 47989 */ 47990 47991 function component_Truncate(props, forwardedRef) { 47992 const truncateProps = useTruncate(props); 47993 return (0,external_wp_element_namespaceObject.createElement)(component, extends_extends({ 47994 as: "span" 47995 }, truncateProps, { 47996 ref: forwardedRef 47997 })); 47998 } 47999 /** 48000 * `Truncate` is a typography primitive that trims text content. 48001 * For almost all cases, it is recommended that `Text`, `Heading`, or 48002 * `Subheading` is used to render text content. However,`Truncate` is 48003 * available for custom implementations. 48004 * 48005 * @example 48006 * ```jsx 48007 * import { __experimentalTruncate as Truncate } from `@wordpress/components`; 48008 * 48009 * function Example() { 48010 * return ( 48011 * <Truncate> 48012 * Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ex 48013 * neque, vulputate a diam et, luctus convallis lacus. Vestibulum ac 48014 * mollis mi. Morbi id elementum massa. 48015 * </Truncate> 48016 * ); 48017 * } 48018 * ``` 48019 */ 48020 48021 48022 const ConnectedTruncate = contextConnect(component_Truncate, 'Truncate'); 48023 /* harmony default export */ var truncate_component = (ConnectedTruncate); 48024 48025 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/heading/hook.js 48026 /** 48027 * Internal dependencies 48028 */ 48029 48030 48031 48032 48033 function useHeading(props) { 48034 const { 48035 as: asProp, 48036 level = 2, 48037 ...otherProps 48038 } = useContextSystem(props, 'Heading'); 48039 const as = asProp || `h$level}`; 48040 const a11yProps = {}; 48041 48042 if (typeof as === 'string' && as[0] !== 'h') { 48043 // If not a semantic `h` element, add a11y props: 48044 a11yProps.role = 'heading'; 48045 a11yProps['aria-level'] = typeof level === 'string' ? parseInt(level) : level; 48046 } 48047 48048 const textProps = useText({ 48049 color: COLORS.darkGray.heading, 48050 size: getHeadingFontSize(level), 48051 isBlock: true, 48052 weight: config_values.fontWeightHeading, 48053 ...otherProps 48054 }); 48055 return { ...textProps, 48056 ...a11yProps, 48057 as 48058 }; 48059 } 48060 48061 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/heading/component.js 48062 48063 48064 48065 /** 48066 * External dependencies 48067 */ 48068 48069 /** 48070 * Internal dependencies 48071 */ 48072 48073 48074 48075 48076 function UnconnectedHeading(props, forwardedRef) { 48077 const headerProps = useHeading(props); 48078 return (0,external_wp_element_namespaceObject.createElement)(component, extends_extends({}, headerProps, { 48079 ref: forwardedRef 48080 })); 48081 } 48082 /** 48083 * `Heading` renders headings and titles using the library's typography system. 48084 * 48085 * @example 48086 * ```jsx 48087 * import { __experimentalHeading as Heading } from "@wordpress/components"; 48088 * 48089 * function Example() { 48090 * return <Heading>Code is Poetry</Heading>; 48091 * } 48092 * ``` 48093 */ 48094 48095 48096 const Heading = contextConnect(UnconnectedHeading, 'Heading'); 48097 /* harmony default export */ var heading_component = (Heading); 48098 48099 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/color-palette/styles.js 48100 48101 48102 function color_palette_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } 48103 48104 /** 48105 * External dependencies 48106 */ 48107 48108 /** 48109 * Internal dependencies 48110 */ 48111 48112 const ColorHeading = /*#__PURE__*/emotion_styled_base_browser_esm(heading_component, true ? { 48113 target: "e1uu5br00" 48114 } : 0)( true ? { 48115 name: "13lxv2o", 48116 styles: "text-transform:uppercase;line-height:24px;font-weight:500;&&&{font-size:11px;margin-bottom:0;}" 48117 } : 0); 48118 48119 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/color-palette/index.js 48120 48121 48122 // @ts-nocheck 48123 48124 /** 48125 * External dependencies 48126 */ 48127 48128 48129 48130 48131 48132 /** 48133 * WordPress dependencies 48134 */ 48135 48136 48137 48138 /** 48139 * Internal dependencies 48140 */ 48141 48142 48143 48144 48145 48146 48147 48148 48149 k([names, a11y]); 48150 48151 function SinglePalette(_ref) { 48152 let { 48153 className, 48154 clearColor, 48155 colors, 48156 onChange, 48157 value, 48158 actions 48159 } = _ref; 48160 const colorOptions = (0,external_wp_element_namespaceObject.useMemo)(() => { 48161 return (0,external_lodash_namespaceObject.map)(colors, _ref2 => { 48162 let { 48163 color, 48164 name 48165 } = _ref2; 48166 const colordColor = w(color); 48167 return (0,external_wp_element_namespaceObject.createElement)(CircularOptionPicker.Option, { 48168 key: color, 48169 isSelected: value === color, 48170 selectedIconProps: value === color ? { 48171 fill: colordColor.contrast() > colordColor.contrast('#000') ? '#fff' : '#000' 48172 } : {}, 48173 tooltipText: name || // translators: %s: color hex code e.g: "#f00". 48174 (0,external_wp_i18n_namespaceObject.sprintf)((0,external_wp_i18n_namespaceObject.__)('Color code: %s'), color), 48175 style: { 48176 backgroundColor: color, 48177 color 48178 }, 48179 onClick: value === color ? clearColor : () => onChange(color), 48180 "aria-label": name ? // translators: %s: The name of the color e.g: "vivid red". 48181 (0,external_wp_i18n_namespaceObject.sprintf)((0,external_wp_i18n_namespaceObject.__)('Color: %s'), name) : // translators: %s: color hex code e.g: "#f00". 48182 (0,external_wp_i18n_namespaceObject.sprintf)((0,external_wp_i18n_namespaceObject.__)('Color code: %s'), color) 48183 }); 48184 }); 48185 }, [colors, value, onChange, clearColor]); 48186 return (0,external_wp_element_namespaceObject.createElement)(CircularOptionPicker, { 48187 className: className, 48188 options: colorOptions, 48189 actions: actions 48190 }); 48191 } 48192 48193 function MultiplePalettes(_ref3) { 48194 let { 48195 className, 48196 clearColor, 48197 colors, 48198 onChange, 48199 value, 48200 actions 48201 } = _ref3; 48202 return (0,external_wp_element_namespaceObject.createElement)(v_stack_component, { 48203 spacing: 3, 48204 className: className 48205 }, colors.map((_ref4, index) => { 48206 let { 48207 name, 48208 colors: colorPalette 48209 } = _ref4; 48210 return (0,external_wp_element_namespaceObject.createElement)(v_stack_component, { 48211 spacing: 2, 48212 key: index 48213 }, (0,external_wp_element_namespaceObject.createElement)(ColorHeading, null, name), (0,external_wp_element_namespaceObject.createElement)(SinglePalette, { 48214 clearColor: clearColor, 48215 colors: colorPalette, 48216 onChange: onChange, 48217 value: value, 48218 actions: colors.length === index + 1 ? actions : null 48219 })); 48220 })); 48221 } 48222 48223 function CustomColorPickerDropdown(_ref5) { 48224 let { 48225 isRenderedInSidebar, 48226 ...props 48227 } = _ref5; 48228 return (0,external_wp_element_namespaceObject.createElement)(Dropdown, extends_extends({ 48229 contentClassName: classnames_default()('components-color-palette__custom-color-dropdown-content', { 48230 'is-rendered-in-sidebar': isRenderedInSidebar 48231 }) 48232 }, props)); 48233 } 48234 48235 const extractColorNameFromCurrentValue = function (currentValue) { 48236 let colors = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : []; 48237 let showMultiplePalettes = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false; 48238 48239 if (!currentValue) { 48240 return ''; 48241 } // Normalize format of `colors` to simplify the following loop 48242 48243 48244 const colorPalettes = showMultiplePalettes ? colors : [{ 48245 colors 48246 }]; 48247 48248 for (const { 48249 colors: paletteColors 48250 } of colorPalettes) { 48251 for (const { 48252 name: colorName, 48253 color: colorValue 48254 } of paletteColors) { 48255 if (w(currentValue).toHex() === w(colorValue).toHex()) { 48256 return colorName; 48257 } 48258 } 48259 } // translators: shown when the user has picked a custom color (i.e not in the palette of colors). 48260 48261 48262 return (0,external_wp_i18n_namespaceObject.__)('Custom'); 48263 }; 48264 48265 function ColorPalette(_ref6) { 48266 let { 48267 clearable = true, 48268 className, 48269 colors, 48270 disableCustomColors = false, 48271 enableAlpha, 48272 onChange, 48273 value, 48274 __experimentalHasMultipleOrigins = false, 48275 __experimentalIsRenderedInSidebar = false 48276 } = _ref6; 48277 const clearColor = (0,external_wp_element_namespaceObject.useCallback)(() => onChange(undefined), [onChange]); 48278 const showMultiplePalettes = __experimentalHasMultipleOrigins && (colors === null || colors === void 0 ? void 0 : colors.length); 48279 const Component = showMultiplePalettes ? MultiplePalettes : SinglePalette; 48280 48281 const renderCustomColorPicker = () => (0,external_wp_element_namespaceObject.createElement)(LegacyAdapter, { 48282 color: value, 48283 onChange: color => onChange(color), 48284 enableAlpha: enableAlpha 48285 }); 48286 48287 let dropdownPosition; 48288 48289 if (__experimentalIsRenderedInSidebar) { 48290 dropdownPosition = 'bottom left'; 48291 } 48292 48293 const colordColor = w(value); 48294 const valueWithoutLeadingHash = value !== null && value !== void 0 && value.startsWith('#') ? value.substring(1) : value !== null && value !== void 0 ? value : ''; 48295 const buttonLabelName = (0,external_wp_element_namespaceObject.useMemo)(() => extractColorNameFromCurrentValue(value, colors, showMultiplePalettes), [value, colors, showMultiplePalettes]); 48296 const customColorAccessibleLabel = !!valueWithoutLeadingHash ? (0,external_wp_i18n_namespaceObject.sprintf)( // translators: %1$s: The name of the color e.g: "vivid red". %2$s: The color's hex code e.g: "#f00". 48297 (0,external_wp_i18n_namespaceObject.__)('Custom color picker. The currently selected color is called "%1$s" and has a value of "%2$s".'), buttonLabelName, valueWithoutLeadingHash) : (0,external_wp_i18n_namespaceObject.__)('Custom color picker.'); 48298 return (0,external_wp_element_namespaceObject.createElement)(v_stack_component, { 48299 spacing: 3, 48300 className: className 48301 }, !disableCustomColors && (0,external_wp_element_namespaceObject.createElement)(CustomColorPickerDropdown, { 48302 position: dropdownPosition, 48303 isRenderedInSidebar: __experimentalIsRenderedInSidebar, 48304 renderContent: renderCustomColorPicker, 48305 renderToggle: _ref7 => { 48306 let { 48307 isOpen, 48308 onToggle 48309 } = _ref7; 48310 return (0,external_wp_element_namespaceObject.createElement)(flex_component, { 48311 as: 'button', 48312 justify: "space-between", 48313 align: "flex-start", 48314 className: "components-color-palette__custom-color", 48315 "aria-expanded": isOpen, 48316 "aria-haspopup": "true", 48317 onClick: onToggle, 48318 "aria-label": customColorAccessibleLabel, 48319 style: { 48320 background: value, 48321 color: colordColor.contrast() > colordColor.contrast('#000') ? '#fff' : '#000' 48322 } 48323 }, (0,external_wp_element_namespaceObject.createElement)(flex_item_component, { 48324 isBlock: true, 48325 as: truncate_component, 48326 className: "components-color-palette__custom-color-name" 48327 }, buttonLabelName), (0,external_wp_element_namespaceObject.createElement)(flex_item_component, { 48328 as: "span", 48329 className: "components-color-palette__custom-color-value" 48330 }, valueWithoutLeadingHash)); 48331 } 48332 }), (0,external_wp_element_namespaceObject.createElement)(Component, { 48333 clearable: clearable, 48334 clearColor: clearColor, 48335 colors: colors, 48336 onChange: onChange, 48337 value: value, 48338 actions: !!clearable && (0,external_wp_element_namespaceObject.createElement)(CircularOptionPicker.ButtonAction, { 48339 onClick: clearColor 48340 }, (0,external_wp_i18n_namespaceObject.__)('Clear')) 48341 })); 48342 } 48343 48344 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/unit-control/utils.js 48345 /** 48346 * WordPress dependencies 48347 */ 48348 48349 48350 /** 48351 * Internal dependencies 48352 */ 48353 48354 const isWeb = external_wp_element_namespaceObject.Platform.OS === 'web'; 48355 const allUnits = { 48356 px: { 48357 value: 'px', 48358 label: isWeb ? 'px' : (0,external_wp_i18n_namespaceObject.__)('Pixels (px)'), 48359 a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Pixels (px)'), 48360 step: 1 48361 }, 48362 '%': { 48363 value: '%', 48364 label: isWeb ? '%' : (0,external_wp_i18n_namespaceObject.__)('Percentage (%)'), 48365 a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Percent (%)'), 48366 step: 0.1 48367 }, 48368 em: { 48369 value: 'em', 48370 label: isWeb ? 'em' : (0,external_wp_i18n_namespaceObject.__)('Relative to parent font size (em)'), 48371 a11yLabel: (0,external_wp_i18n_namespaceObject._x)('ems', 'Relative to parent font size (em)'), 48372 step: 0.01 48373 }, 48374 rem: { 48375 value: 'rem', 48376 label: isWeb ? 'rem' : (0,external_wp_i18n_namespaceObject.__)('Relative to root font size (rem)'), 48377 a11yLabel: (0,external_wp_i18n_namespaceObject._x)('rems', 'Relative to root font size (rem)'), 48378 step: 0.01 48379 }, 48380 vw: { 48381 value: 'vw', 48382 label: isWeb ? 'vw' : (0,external_wp_i18n_namespaceObject.__)('Viewport width (vw)'), 48383 a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Viewport width (vw)'), 48384 step: 0.1 48385 }, 48386 vh: { 48387 value: 'vh', 48388 label: isWeb ? 'vh' : (0,external_wp_i18n_namespaceObject.__)('Viewport height (vh)'), 48389 a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Viewport height (vh)'), 48390 step: 0.1 48391 }, 48392 vmin: { 48393 value: 'vmin', 48394 label: isWeb ? 'vmin' : (0,external_wp_i18n_namespaceObject.__)('Viewport smallest dimension (vmin)'), 48395 a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Viewport smallest dimension (vmin)'), 48396 step: 0.1 48397 }, 48398 vmax: { 48399 value: 'vmax', 48400 label: isWeb ? 'vmax' : (0,external_wp_i18n_namespaceObject.__)('Viewport largest dimension (vmax)'), 48401 a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Viewport largest dimension (vmax)'), 48402 step: 0.1 48403 }, 48404 ch: { 48405 value: 'ch', 48406 label: isWeb ? 'ch' : (0,external_wp_i18n_namespaceObject.__)('Width of the zero (0) character (ch)'), 48407 a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Width of the zero (0) character (ch)'), 48408 step: 0.01 48409 }, 48410 ex: { 48411 value: 'ex', 48412 label: isWeb ? 'ex' : (0,external_wp_i18n_namespaceObject.__)('x-height of the font (ex)'), 48413 a11yLabel: (0,external_wp_i18n_namespaceObject.__)('x-height of the font (ex)'), 48414 step: 0.01 48415 }, 48416 cm: { 48417 value: 'cm', 48418 label: isWeb ? 'cm' : (0,external_wp_i18n_namespaceObject.__)('Centimeters (cm)'), 48419 a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Centimeters (cm)'), 48420 step: 0.001 48421 }, 48422 mm: { 48423 value: 'mm', 48424 label: isWeb ? 'mm' : (0,external_wp_i18n_namespaceObject.__)('Millimeters (mm)'), 48425 a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Millimeters (mm)'), 48426 step: 0.1 48427 }, 48428 in: { 48429 value: 'in', 48430 label: isWeb ? 'in' : (0,external_wp_i18n_namespaceObject.__)('Inches (in)'), 48431 a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Inches (in)'), 48432 step: 0.001 48433 }, 48434 pc: { 48435 value: 'pc', 48436 label: isWeb ? 'pc' : (0,external_wp_i18n_namespaceObject.__)('Picas (pc)'), 48437 a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Picas (pc)'), 48438 step: 1 48439 }, 48440 pt: { 48441 value: 'pt', 48442 label: isWeb ? 'pt' : (0,external_wp_i18n_namespaceObject.__)('Points (pt)'), 48443 a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Points (pt)'), 48444 step: 1 48445 } 48446 }; 48447 /** 48448 * An array of all available CSS length units. 48449 */ 48450 48451 const ALL_CSS_UNITS = Object.values(allUnits); 48452 /** 48453 * Units of measurements. `a11yLabel` is used by screenreaders. 48454 */ 48455 48456 const CSS_UNITS = [allUnits.px, allUnits['%'], allUnits.em, allUnits.rem, allUnits.vw, allUnits.vh]; 48457 const DEFAULT_UNIT = allUnits.px; 48458 /** 48459 * Handles legacy value + unit handling. 48460 * This component use to manage both incoming value and units separately. 48461 * 48462 * Moving forward, ideally the value should be a string that contains both 48463 * the value and unit, example: '10px' 48464 * 48465 * @param rawValue The raw value as a string (may or may not contain the unit) 48466 * @param fallbackUnit The unit used as a fallback, if not unit is detected in the `value` 48467 * @param allowedUnits Units to derive from. 48468 * @return The extracted quantity and unit. The quantity can be `undefined` in case the raw value 48469 * could not be parsed to a number correctly. The unit can be `undefined` in case the unit parse 48470 * from the raw value could not be matched against the list of allowed units. 48471 */ 48472 48473 function getParsedQuantityAndUnit(rawValue, fallbackUnit, allowedUnits) { 48474 const initialValue = fallbackUnit ? `$rawValue !== null && rawValue !== void 0 ? rawValue : ''}$fallbackUnit}` : rawValue; 48475 return parseQuantityAndUnitFromRawValue(initialValue, allowedUnits); 48476 } 48477 /** 48478 * Checks if units are defined. 48479 * 48480 * @param units List of units. 48481 * @return Whether the list actually contains any units. 48482 */ 48483 48484 function hasUnits(units) { 48485 // Although the `isArray` check shouldn't be necessary (given the signature of 48486 // this typed function), it's better to stay on the side of caution, since 48487 // this function may be called from un-typed environments. 48488 return Array.isArray(units) && !!units.length; 48489 } 48490 /** 48491 * Parses a quantity and unit from a raw string value, given a list of allowed 48492 * units and otherwise falling back to the default unit. 48493 * 48494 * @param rawValue The raw value as a string (may or may not contain the unit) 48495 * @param allowedUnits Units to derive from. 48496 * @return The extracted quantity and unit. The quantity can be `undefined` in case the raw value 48497 * could not be parsed to a number correctly. The unit can be `undefined` in case the unit parsed 48498 * from the raw value could not be matched against the list of allowed units. 48499 */ 48500 48501 function parseQuantityAndUnitFromRawValue(rawValue) { 48502 var _trimmedValue, _unitMatch$; 48503 48504 let allowedUnits = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : ALL_CSS_UNITS; 48505 let trimmedValue; 48506 let quantityToReturn; 48507 48508 if (typeof rawValue !== 'undefined' || rawValue === null) { 48509 trimmedValue = `$rawValue}`.trim(); 48510 const parsedQuantity = parseFloat(trimmedValue); 48511 quantityToReturn = !isFinite(parsedQuantity) ? undefined : parsedQuantity; 48512 } 48513 48514 const unitMatch = (_trimmedValue = trimmedValue) === null || _trimmedValue === void 0 ? void 0 : _trimmedValue.match(/[\d.\-\+]*\s*(.*)/); 48515 const matchedUnit = unitMatch === null || unitMatch === void 0 ? void 0 : (_unitMatch$ = unitMatch[1]) === null || _unitMatch$ === void 0 ? void 0 : _unitMatch$.toLowerCase(); 48516 let unitToReturn; 48517 48518 if (hasUnits(allowedUnits)) { 48519 const match = allowedUnits.find(item => item.value === matchedUnit); 48520 unitToReturn = match === null || match === void 0 ? void 0 : match.value; 48521 } else { 48522 unitToReturn = DEFAULT_UNIT.value; 48523 } 48524 48525 return [quantityToReturn, unitToReturn]; 48526 } 48527 /** 48528 * Parses quantity and unit from a raw value. Validates parsed value, using fallback 48529 * value if invalid. 48530 * 48531 * @param rawValue The next value. 48532 * @param allowedUnits Units to derive from. 48533 * @param fallbackQuantity The fallback quantity, used in case it's not possible to parse a valid quantity from the raw value. 48534 * @param fallbackUnit The fallback unit, used in case it's not possible to parse a valid unit from the raw value. 48535 * @return The extracted quantity and unit. The quantity can be `undefined` in case the raw value 48536 * could not be parsed to a number correctly, and the `fallbackQuantity` was also `undefined`. The 48537 * unit can be `undefined` only if the unit parsed from the raw value could not be matched against 48538 * the list of allowed units, the `fallbackQuantity` is also `undefined` and the list of 48539 * `allowedUnits` is passed empty. 48540 */ 48541 48542 function getValidParsedQuantityAndUnit(rawValue, allowedUnits, fallbackQuantity, fallbackUnit) { 48543 const [parsedQuantity, parsedUnit] = parseQuantityAndUnitFromRawValue(rawValue, allowedUnits); // The parsed value from `parseQuantityAndUnitFromRawValue` should now be 48544 // either a real number or undefined. If undefined, use the fallback value. 48545 48546 const quantityToReturn = parsedQuantity !== null && parsedQuantity !== void 0 ? parsedQuantity : fallbackQuantity; // If no unit is parsed from the raw value, or if the fallback unit is not 48547 // defined, use the first value from the list of allowed units as fallback. 48548 48549 let unitToReturn = parsedUnit || fallbackUnit; 48550 48551 if (!unitToReturn && hasUnits(allowedUnits)) { 48552 unitToReturn = allowedUnits[0].value; 48553 } 48554 48555 return [quantityToReturn, unitToReturn]; 48556 } 48557 /** 48558 * Takes a unit value and finds the matching accessibility label for the 48559 * unit abbreviation. 48560 * 48561 * @param unit Unit value (example: `px`) 48562 * @return a11y label for the unit abbreviation 48563 */ 48564 48565 function getAccessibleLabelForUnit(unit) { 48566 const match = ALL_CSS_UNITS.find(item => item.value === unit); 48567 return match !== null && match !== void 0 && match.a11yLabel ? match === null || match === void 0 ? void 0 : match.a11yLabel : match === null || match === void 0 ? void 0 : match.value; 48568 } 48569 /** 48570 * Filters available units based on values defined a list of allowed unit values. 48571 * 48572 * @param allowedUnitValues Collection of allowed unit value strings. 48573 * @param availableUnits Collection of available unit objects. 48574 * @return Filtered units. 48575 */ 48576 48577 function filterUnitsWithSettings() { 48578 let allowedUnitValues = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : []; 48579 let availableUnits = arguments.length > 1 ? arguments[1] : undefined; 48580 // Although the `isArray` check shouldn't be necessary (given the signature of 48581 // this typed function), it's better to stay on the side of caution, since 48582 // this function may be called from un-typed environments. 48583 return Array.isArray(availableUnits) ? availableUnits.filter(unit => allowedUnitValues.includes(unit.value)) : []; 48584 } 48585 /** 48586 * Custom hook to retrieve and consolidate units setting from add_theme_support(). 48587 * TODO: ideally this hook shouldn't be needed 48588 * https://github.com/WordPress/gutenberg/pull/31822#discussion_r633280823 48589 * 48590 * @param args An object containing units, settingPath & defaultUnits. 48591 * @param args.units Collection of all potentially available units. 48592 * @param args.availableUnits Collection of unit value strings for filtering available units. 48593 * @param args.defaultValues Collection of default values for defined units. Example: `{ px: 350, em: 15 }`. 48594 * 48595 * @return Filtered list of units, with their default values updated following the `defaultValues` 48596 * argument's property. 48597 */ 48598 48599 const useCustomUnits = _ref => { 48600 let { 48601 units = ALL_CSS_UNITS, 48602 availableUnits = [], 48603 defaultValues 48604 } = _ref; 48605 const customUnitsToReturn = filterUnitsWithSettings(availableUnits, units); 48606 48607 if (defaultValues) { 48608 customUnitsToReturn.forEach((unit, i) => { 48609 if (defaultValues[unit.value]) { 48610 const [parsedDefaultValue] = parseQuantityAndUnitFromRawValue(defaultValues[unit.value]); 48611 customUnitsToReturn[i].default = parsedDefaultValue; 48612 } 48613 }); 48614 } 48615 48616 return customUnitsToReturn; 48617 }; 48618 /** 48619 * Get available units with the unit for the currently selected value 48620 * prepended if it is not available in the list of units. 48621 * 48622 * This is useful to ensure that the current value's unit is always 48623 * accurately displayed in the UI, even if the intention is to hide 48624 * the availability of that unit. 48625 * 48626 * @param rawValue Selected value to parse. 48627 * @param legacyUnit Legacy unit value, if rawValue needs it appended. 48628 * @param units List of available units. 48629 * 48630 * @return A collection of units containing the unit for the current value. 48631 */ 48632 48633 function getUnitsWithCurrentUnit(rawValue, legacyUnit) { 48634 let units = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : ALL_CSS_UNITS; 48635 const unitsToReturn = Array.isArray(units) ? [...units] : []; 48636 const [, currentUnit] = getParsedQuantityAndUnit(rawValue, legacyUnit, ALL_CSS_UNITS); 48637 48638 if (currentUnit && !unitsToReturn.some(unit => unit.value === currentUnit)) { 48639 if (allUnits[currentUnit]) { 48640 unitsToReturn.unshift(allUnits[currentUnit]); 48641 } 48642 } 48643 48644 return unitsToReturn; 48645 } 48646 48647 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/border-control/border-control-dropdown/hook.js 48648 /** 48649 * WordPress dependencies 48650 */ 48651 48652 /** 48653 * Internal dependencies 48654 */ 48655 48656 48657 48658 48659 48660 function useBorderControlDropdown(props) { 48661 const { 48662 border, 48663 className, 48664 colors, 48665 contentClassName, 48666 onChange, 48667 previousStyleSelection, 48668 ...otherProps 48669 } = useContextSystem(props, 'BorderControlDropdown'); 48670 const [widthValue] = parseQuantityAndUnitFromRawValue(border === null || border === void 0 ? void 0 : border.width); 48671 const hasZeroWidth = widthValue === 0; 48672 48673 const onColorChange = color => { 48674 const style = (border === null || border === void 0 ? void 0 : border.style) === 'none' ? previousStyleSelection : border === null || border === void 0 ? void 0 : border.style; 48675 const width = hasZeroWidth && !!color ? '1px' : border === null || border === void 0 ? void 0 : border.width; 48676 onChange({ 48677 color, 48678 style, 48679 width 48680 }); 48681 }; 48682 48683 const onStyleChange = style => { 48684 const width = hasZeroWidth && !!style ? '1px' : border === null || border === void 0 ? void 0 : border.width; 48685 onChange({ ...border, 48686 style, 48687 width 48688 }); 48689 }; 48690 48691 const onReset = () => { 48692 onChange({ ...border, 48693 color: undefined, 48694 style: undefined 48695 }); 48696 }; // Generate class names. 48697 48698 48699 const cx = useCx(); 48700 const classes = (0,external_wp_element_namespaceObject.useMemo)(() => { 48701 return cx(borderControlDropdown(), className); 48702 }, [className, cx]); 48703 const indicatorClassName = (0,external_wp_element_namespaceObject.useMemo)(() => { 48704 return cx(borderColorIndicator); 48705 }, [cx]); 48706 const indicatorWrapperClassName = (0,external_wp_element_namespaceObject.useMemo)(() => { 48707 return cx(colorIndicatorWrapper(border)); 48708 }, [border, cx]); 48709 const popoverClassName = (0,external_wp_element_namespaceObject.useMemo)(() => { 48710 return cx(borderControlPopover, contentClassName); 48711 }, [cx, contentClassName]); 48712 const popoverControlsClassName = (0,external_wp_element_namespaceObject.useMemo)(() => { 48713 return cx(borderControlPopoverControls); 48714 }, [cx]); 48715 const popoverContentClassName = (0,external_wp_element_namespaceObject.useMemo)(() => { 48716 return cx(borderControlPopoverContent); 48717 }, [cx]); 48718 const resetButtonClassName = (0,external_wp_element_namespaceObject.useMemo)(() => { 48719 return cx(resetButton); 48720 }, [cx]); 48721 return { ...otherProps, 48722 border, 48723 className: classes, 48724 colors, 48725 indicatorClassName, 48726 indicatorWrapperClassName, 48727 onColorChange, 48728 onStyleChange, 48729 onReset, 48730 popoverClassName, 48731 popoverContentClassName, 48732 popoverControlsClassName, 48733 resetButtonClassName 48734 }; 48735 } 48736 48737 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/border-control/border-control-dropdown/component.js 48738 48739 48740 48741 /** 48742 * External dependencies 48743 */ 48744 48745 /** 48746 * WordPress dependencies 48747 */ 48748 48749 48750 /** 48751 * Internal dependencies 48752 */ 48753 48754 48755 48756 48757 48758 48759 48760 48761 48762 48763 48764 48765 const component_noop = () => undefined; 48766 48767 const getColorObject = (colorValue, colors, hasMultipleColorOrigins) => { 48768 if (!colorValue || !colors) { 48769 return; 48770 } 48771 48772 if (hasMultipleColorOrigins) { 48773 let matchedColor; 48774 colors.some(origin => origin.colors.some(color => { 48775 if (color.color === colorValue) { 48776 matchedColor = color; 48777 return true; 48778 } 48779 48780 return false; 48781 })); 48782 return matchedColor; 48783 } 48784 48785 return colors.find(color => color.color === colorValue); 48786 }; 48787 48788 const getToggleAriaLabel = (colorValue, colorObject, style, isStyleEnabled) => { 48789 if (isStyleEnabled) { 48790 if (colorObject) { 48791 return style ? (0,external_wp_i18n_namespaceObject.sprintf)( // translators: %1$s: The name of the color e.g. "vivid red". %2$s: The color's hex code e.g.: "#f00:". %3$s: The current border style selection e.g. "solid". 48792 'Border color and style picker. The currently selected color is called "%1$s" and has a value of "%2$s". The currently selected style is "%3$s".', colorObject.name, colorObject.color, style) : (0,external_wp_i18n_namespaceObject.sprintf)( // translators: %1$s: The name of the color e.g. "vivid red". %2$s: The color's hex code e.g.: "#f00:". 48793 'Border color and style picker. The currently selected color is called "%1$s" and has a value of "%2$s".', colorObject.name, colorObject.color); 48794 } 48795 48796 if (colorValue) { 48797 return style ? (0,external_wp_i18n_namespaceObject.sprintf)( // translators: %1$s: The color's hex code e.g.: "#f00:". %2$s: The current border style selection e.g. "solid". 48798 'Border color and style picker. The currently selected color has a value of "%1$s". The currently selected style is "%2$s".', colorValue, style) : (0,external_wp_i18n_namespaceObject.sprintf)( // translators: %1$s: The color's hex code e.g.: "#f00:". 48799 'Border color and style picker. The currently selected color has a value of "%1$s".', colorValue); 48800 } 48801 48802 return (0,external_wp_i18n_namespaceObject.__)('Border color and style picker.'); 48803 } 48804 48805 if (colorObject) { 48806 return (0,external_wp_i18n_namespaceObject.sprintf)( // translators: %1$s: The name of the color e.g. "vivid red". %2$s: The color's hex code e.g.: "#f00:". 48807 'Border color picker. The currently selected color is called "%1$s" and has a value of "%2$s".', colorObject.name, colorObject.color); 48808 } 48809 48810 if (colorValue) { 48811 return (0,external_wp_i18n_namespaceObject.sprintf)( // translators: %1$s: The color's hex code e.g.: "#f00:". 48812 'Border color picker. The currently selected color has a value of "%1$s".', colorValue); 48813 } 48814 48815 return (0,external_wp_i18n_namespaceObject.__)('Border color picker.'); 48816 }; 48817 48818 const BorderControlDropdown = (props, forwardedRef) => { 48819 const { 48820 __experimentalHasMultipleOrigins, 48821 __experimentalIsRenderedInSidebar, 48822 border, 48823 colors, 48824 disableCustomColors, 48825 enableAlpha, 48826 indicatorClassName, 48827 indicatorWrapperClassName, 48828 onReset, 48829 onColorChange, 48830 onStyleChange, 48831 popoverClassName, 48832 popoverContentClassName, 48833 popoverControlsClassName, 48834 resetButtonClassName, 48835 showDropdownHeader, 48836 enableStyle = true, 48837 ...otherProps 48838 } = useBorderControlDropdown(props); 48839 const { 48840 color, 48841 style 48842 } = border || {}; 48843 const colorObject = getColorObject(color, colors, !!__experimentalHasMultipleOrigins); 48844 const toggleAriaLabel = getToggleAriaLabel(color, colorObject, style, enableStyle); 48845 const dropdownPosition = __experimentalIsRenderedInSidebar ? 'bottom left' : undefined; 48846 48847 const renderToggle = _ref => { 48848 let { 48849 onToggle = component_noop 48850 } = _ref; 48851 return (0,external_wp_element_namespaceObject.createElement)(build_module_button, { 48852 onClick: onToggle, 48853 variant: "tertiary", 48854 "aria-label": toggleAriaLabel, 48855 position: dropdownPosition 48856 }, (0,external_wp_element_namespaceObject.createElement)("span", { 48857 className: indicatorWrapperClassName 48858 }, (0,external_wp_element_namespaceObject.createElement)(color_indicator, { 48859 className: indicatorClassName, 48860 colorValue: color 48861 }))); 48862 }; 48863 48864 const renderContent = _ref2 => { 48865 let { 48866 onClose 48867 } = _ref2; 48868 return (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, (0,external_wp_element_namespaceObject.createElement)(v_stack_component, { 48869 className: popoverControlsClassName, 48870 spacing: 6 48871 }, showDropdownHeader ? (0,external_wp_element_namespaceObject.createElement)(h_stack_component, null, (0,external_wp_element_namespaceObject.createElement)(StyledLabel, null, (0,external_wp_i18n_namespaceObject.__)('Border color')), (0,external_wp_element_namespaceObject.createElement)(build_module_button, { 48872 isSmall: true, 48873 label: (0,external_wp_i18n_namespaceObject.__)('Close border color'), 48874 icon: close_small, 48875 onClick: onClose 48876 })) : undefined, (0,external_wp_element_namespaceObject.createElement)(ColorPalette, { 48877 className: popoverContentClassName, 48878 value: color, 48879 onChange: onColorChange, 48880 colors, 48881 disableCustomColors, 48882 __experimentalHasMultipleOrigins: __experimentalHasMultipleOrigins, 48883 __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar, 48884 clearable: false, 48885 enableAlpha: enableAlpha 48886 }), enableStyle && (0,external_wp_element_namespaceObject.createElement)(border_control_style_picker_component, { 48887 label: (0,external_wp_i18n_namespaceObject.__)('Style'), 48888 value: style, 48889 onChange: onStyleChange 48890 })), (0,external_wp_element_namespaceObject.createElement)(build_module_button, { 48891 className: resetButtonClassName, 48892 variant: "tertiary", 48893 onClick: () => { 48894 onReset(); 48895 onClose(); 48896 } 48897 }, (0,external_wp_i18n_namespaceObject.__)('Reset to default'))); 48898 }; 48899 48900 return (0,external_wp_element_namespaceObject.createElement)(Dropdown, extends_extends({ 48901 renderToggle: renderToggle, 48902 renderContent: renderContent, 48903 contentClassName: popoverClassName 48904 }, otherProps, { 48905 ref: forwardedRef 48906 })); 48907 }; 48908 48909 const ConnectedBorderControlDropdown = contextConnect(BorderControlDropdown, 'BorderControlDropdown'); 48910 /* harmony default export */ var border_control_dropdown_component = (ConnectedBorderControlDropdown); 48911 48912 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/unit-control/unit-select-control.js 48913 48914 48915 48916 /** 48917 * External dependencies 48918 */ 48919 48920 48921 48922 function UnitSelectControl(_ref) { 48923 let { 48924 className, 48925 isUnitSelectTabbable: isTabbable = true, 48926 onChange, 48927 size = 'default', 48928 unit = 'px', 48929 units = CSS_UNITS, 48930 ...props 48931 } = _ref; 48932 48933 if (!hasUnits(units) || (units === null || units === void 0 ? void 0 : units.length) === 1) { 48934 return (0,external_wp_element_namespaceObject.createElement)(UnitLabel, { 48935 className: "components-unit-control__unit-label", 48936 selectSize: size 48937 }, unit); 48938 } 48939 48940 const handleOnChange = event => { 48941 const { 48942 value: unitValue 48943 } = event.target; 48944 const data = units.find(option => option.value === unitValue); 48945 onChange === null || onChange === void 0 ? void 0 : onChange(unitValue, { 48946 event, 48947 data 48948 }); 48949 }; 48950 48951 const classes = classnames_default()('components-unit-control__select', className); 48952 return (0,external_wp_element_namespaceObject.createElement)(UnitSelect, extends_extends({ 48953 className: classes, 48954 onChange: handleOnChange, 48955 selectSize: size, 48956 tabIndex: isTabbable ? undefined : -1, 48957 value: unit 48958 }, props), units.map(option => (0,external_wp_element_namespaceObject.createElement)("option", { 48959 value: option.value, 48960 key: option.value 48961 }, option.label))); 48962 } 48963 48964 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/unit-control/index.js 48965 48966 48967 48968 /** 48969 * External dependencies 48970 */ 48971 48972 48973 /** 48974 * WordPress dependencies 48975 */ 48976 48977 48978 48979 48980 /** 48981 * Internal dependencies 48982 */ 48983 48984 48985 48986 48987 48988 48989 48990 function UnforwardedUnitControl(unitControlProps, forwardedRef) { 48991 const { 48992 __unstableStateReducer: stateReducerProp, 48993 autoComplete = 'off', 48994 className, 48995 disabled = false, 48996 disableUnits = false, 48997 isPressEnterToChange = false, 48998 isResetValueOnUnitChange = false, 48999 isUnitSelectTabbable = true, 49000 label, 49001 onChange: onChangeProp, 49002 onUnitChange, 49003 size = 'default', 49004 style, 49005 unit: unitProp, 49006 units: unitsProp = CSS_UNITS, 49007 value: valueProp, 49008 onBlur: onBlurProp, 49009 ...props 49010 } = unitControlProps; 49011 49012 if ('unit' in unitControlProps) { 49013 external_wp_deprecated_default()('UnitControl unit prop', { 49014 since: '5.6', 49015 hint: 'The unit should be provided within the `value` prop.', 49016 version: '6.2' 49017 }); 49018 } // The `value` prop, in theory, should not be `null`, but the following line 49019 // ensures it fallback to `undefined` in case a consumer of `UnitControl` 49020 // still passes `null` as a `value`. 49021 49022 49023 const nonNullValueProp = valueProp !== null && valueProp !== void 0 ? valueProp : undefined; 49024 const units = (0,external_wp_element_namespaceObject.useMemo)(() => getUnitsWithCurrentUnit(nonNullValueProp, unitProp, unitsProp), [nonNullValueProp, unitProp, unitsProp]); 49025 const [parsedQuantity, parsedUnit] = getParsedQuantityAndUnit(nonNullValueProp, unitProp, units); 49026 const [unit, setUnit] = use_controlled_state(unitProp, { 49027 initial: parsedUnit, 49028 fallback: '' 49029 }); 49030 (0,external_wp_element_namespaceObject.useEffect)(() => { 49031 if (parsedUnit !== undefined) { 49032 setUnit(parsedUnit); 49033 } 49034 }, [parsedUnit]); // Stores parsed value for hand-off in state reducer. 49035 49036 const refParsedQuantity = (0,external_wp_element_namespaceObject.useRef)(undefined); 49037 const classes = classnames_default()('components-unit-control', className); 49038 49039 const handleOnQuantityChange = (nextQuantityValue, changeProps) => { 49040 if (nextQuantityValue === '' || typeof nextQuantityValue === 'undefined' || nextQuantityValue === null) { 49041 onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp('', changeProps); 49042 return; 49043 } 49044 /* 49045 * Customizing the onChange callback. 49046 * This allows as to broadcast a combined value+unit to onChange. 49047 */ 49048 49049 49050 const onChangeValue = getValidParsedQuantityAndUnit(nextQuantityValue, units, parsedQuantity, unit).join(''); 49051 onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(onChangeValue, changeProps); 49052 }; 49053 49054 const handleOnUnitChange = (nextUnitValue, changeProps) => { 49055 const { 49056 data 49057 } = changeProps; 49058 let nextValue = `$parsedQuantity !== null && parsedQuantity !== void 0 ? parsedQuantity : ''}$nextUnitValue}`; 49059 49060 if (isResetValueOnUnitChange && (data === null || data === void 0 ? void 0 : data.default) !== undefined) { 49061 nextValue = `$data.default}$nextUnitValue}`; 49062 } 49063 49064 onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(nextValue, changeProps); 49065 onUnitChange === null || onUnitChange === void 0 ? void 0 : onUnitChange(nextUnitValue, changeProps); 49066 setUnit(nextUnitValue); 49067 }; 49068 49069 const mayUpdateUnit = event => { 49070 if (!isNaN(Number(event.currentTarget.value))) { 49071 refParsedQuantity.current = undefined; 49072 return; 49073 } 49074 49075 const [validParsedQuantity, validParsedUnit] = getValidParsedQuantityAndUnit(event.currentTarget.value, units, parsedQuantity, unit); 49076 refParsedQuantity.current = validParsedQuantity; 49077 49078 if (isPressEnterToChange && validParsedUnit !== unit) { 49079 const data = Array.isArray(units) ? units.find(option => option.value === validParsedUnit) : undefined; 49080 const changeProps = { 49081 event, 49082 data 49083 }; 49084 onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(`$validParsedQuantity !== null && validParsedQuantity !== void 0 ? validParsedQuantity : ''}$validParsedUnit}`, changeProps); 49085 onUnitChange === null || onUnitChange === void 0 ? void 0 : onUnitChange(validParsedUnit, changeProps); 49086 setUnit(validParsedUnit); 49087 } 49088 }; 49089 49090 const handleOnBlur = event => { 49091 mayUpdateUnit(event); 49092 onBlurProp === null || onBlurProp === void 0 ? void 0 : onBlurProp(event); 49093 }; 49094 49095 const handleOnKeyDown = event => { 49096 const { 49097 key 49098 } = event; 49099 49100 if (key === 'Enter') { 49101 mayUpdateUnit(event); 49102 } 49103 }; 49104 /** 49105 * "Middleware" function that intercepts updates from InputControl. 49106 * This allows us to tap into actions to transform the (next) state for 49107 * InputControl. 49108 * 49109 * @param state State from InputControl 49110 * @param action Action triggering state change 49111 * @return The updated state to apply to InputControl 49112 */ 49113 49114 49115 const unitControlStateReducer = (state, action) => { 49116 const nextState = { ...state 49117 }; 49118 /* 49119 * On commits (when pressing ENTER and on blur if 49120 * isPressEnterToChange is true), if a parse has been performed 49121 * then use that result to update the state. 49122 */ 49123 49124 if (action.type === COMMIT) { 49125 if (refParsedQuantity.current !== undefined) { 49126 var _refParsedQuantity$cu; 49127 49128 nextState.value = ((_refParsedQuantity$cu = refParsedQuantity.current) !== null && _refParsedQuantity$cu !== void 0 ? _refParsedQuantity$cu : '').toString(); 49129 refParsedQuantity.current = undefined; 49130 } 49131 } 49132 49133 return nextState; 49134 }; 49135 49136 let stateReducer = unitControlStateReducer; 49137 49138 if (stateReducerProp) { 49139 stateReducer = (state, action) => { 49140 const baseState = unitControlStateReducer(state, action); 49141 return stateReducerProp(baseState, action); 49142 }; 49143 } 49144 49145 const inputSuffix = !disableUnits ? (0,external_wp_element_namespaceObject.createElement)(UnitSelectControl, { 49146 "aria-label": (0,external_wp_i18n_namespaceObject.__)('Select unit'), 49147 disabled: disabled, 49148 isUnitSelectTabbable: isUnitSelectTabbable, 49149 onChange: handleOnUnitChange, 49150 size: size, 49151 unit: unit, 49152 units: units, 49153 onBlur: onBlurProp 49154 }) : null; 49155 let step = props.step; 49156 /* 49157 * If no step prop has been passed, lookup the active unit and 49158 * try to get step from `units`, or default to a value of `1` 49159 */ 49160 49161 if (!step && units) { 49162 var _activeUnit$step; 49163 49164 const activeUnit = units.find(option => option.value === unit); 49165 step = (_activeUnit$step = activeUnit === null || activeUnit === void 0 ? void 0 : activeUnit.step) !== null && _activeUnit$step !== void 0 ? _activeUnit$step : 1; 49166 } 49167 49168 return (0,external_wp_element_namespaceObject.createElement)(unit_control_styles_Root, { 49169 className: "components-unit-control-wrapper", 49170 style: style 49171 }, (0,external_wp_element_namespaceObject.createElement)(ValueInput, extends_extends({ 49172 "aria-label": label, 49173 type: isPressEnterToChange ? 'text' : 'number' 49174 }, (0,external_lodash_namespaceObject.omit)(props, ['children']), { 49175 autoComplete: autoComplete, 49176 className: classes, 49177 disabled: disabled, 49178 disableUnits: disableUnits, 49179 isPressEnterToChange: isPressEnterToChange, 49180 label: label, 49181 onBlur: handleOnBlur, 49182 onKeyDown: handleOnKeyDown, 49183 onChange: handleOnQuantityChange, 49184 ref: forwardedRef, 49185 size: size, 49186 suffix: inputSuffix, 49187 value: parsedQuantity !== null && parsedQuantity !== void 0 ? parsedQuantity : '', 49188 step: step, 49189 __unstableStateReducer: stateReducer 49190 }))); 49191 } 49192 /** 49193 * `UnitControl` allows the user to set a numeric quantity as well as a unit (e.g. `px`). 49194 * 49195 * 49196 * @example 49197 * ```jsx 49198 * import { __experimentalUnitControl as UnitControl } from '@wordpress/components'; 49199 * import { useState } from '@wordpress/element'; 49200 * 49201 * const Example = () => { 49202 * const [ value, setValue ] = useState( '10px' ); 49203 * 49204 * return <UnitControl onChange={ setValue } value={ value } />; 49205 * }; 49206 * ``` 49207 */ 49208 49209 49210 const UnitControl = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedUnitControl); 49211 49212 /* harmony default export */ var unit_control = (UnitControl); 49213 49214 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/border-control/border-control/hook.js 49215 /** 49216 * WordPress dependencies 49217 */ 49218 49219 /** 49220 * Internal dependencies 49221 */ 49222 49223 49224 49225 49226 49227 49228 const sanitizeBorder = border => { 49229 const hasNoWidth = (border === null || border === void 0 ? void 0 : border.width) === undefined || border.width === ''; 49230 const hasNoColor = (border === null || border === void 0 ? void 0 : border.color) === undefined; // If width and color are undefined, unset any style selection as well. 49231 49232 if (hasNoWidth && hasNoColor) { 49233 return undefined; 49234 } 49235 49236 return border; 49237 }; 49238 49239 function useBorderControl(props) { 49240 const { 49241 className, 49242 isCompact, 49243 onChange, 49244 shouldSanitizeBorder = true, 49245 value: border, 49246 width, 49247 ...otherProps 49248 } = useContextSystem(props, 'BorderControl'); 49249 const [widthValue, originalWidthUnit] = parseQuantityAndUnitFromRawValue(border === null || border === void 0 ? void 0 : border.width); 49250 const widthUnit = originalWidthUnit || 'px'; 49251 const hadPreviousZeroWidth = widthValue === 0; 49252 const [colorSelection, setColorSelection] = (0,external_wp_element_namespaceObject.useState)(); 49253 const [styleSelection, setStyleSelection] = (0,external_wp_element_namespaceObject.useState)(); 49254 const onBorderChange = (0,external_wp_element_namespaceObject.useCallback)(newBorder => { 49255 if (shouldSanitizeBorder) { 49256 return onChange(sanitizeBorder(newBorder)); 49257 } 49258 49259 onChange(newBorder); 49260 }, [onChange, shouldSanitizeBorder, sanitizeBorder]); 49261 const onWidthChange = (0,external_wp_element_namespaceObject.useCallback)(newWidth => { 49262 const newWidthValue = newWidth === '' ? undefined : newWidth; 49263 const [parsedValue] = parseQuantityAndUnitFromRawValue(newWidth); 49264 const hasZeroWidth = parsedValue === 0; 49265 const updatedBorder = { ...border, 49266 width: newWidthValue 49267 }; // Setting the border width explicitly to zero will also set the 49268 // border style to `none` and clear the border color. 49269 49270 if (hasZeroWidth && !hadPreviousZeroWidth) { 49271 // Before clearing the color and style selections, keep track of 49272 // the current selections so they can be restored when the width 49273 // changes to a non-zero value. 49274 setColorSelection(border === null || border === void 0 ? void 0 : border.color); 49275 setStyleSelection(border === null || border === void 0 ? void 0 : border.style); // Clear the color and style border properties. 49276 49277 updatedBorder.color = undefined; 49278 updatedBorder.style = 'none'; 49279 } // Selection has changed from zero border width to non-zero width. 49280 49281 49282 if (!hasZeroWidth && hadPreviousZeroWidth) { 49283 // Restore previous border color and style selections if width 49284 // is now not zero. 49285 if (updatedBorder.color === undefined) { 49286 updatedBorder.color = colorSelection; 49287 } 49288 49289 if (updatedBorder.style === 'none') { 49290 updatedBorder.style = styleSelection; 49291 } 49292 } 49293 49294 onBorderChange(updatedBorder); 49295 }, [border, hadPreviousZeroWidth, onBorderChange]); 49296 const onSliderChange = (0,external_wp_element_namespaceObject.useCallback)(value => { 49297 onWidthChange(`$value}$widthUnit}`); 49298 }, [onWidthChange, widthUnit]); // Generate class names. 49299 49300 const cx = useCx(); 49301 const classes = (0,external_wp_element_namespaceObject.useMemo)(() => { 49302 return cx(borderControl, className); 49303 }, [className, cx]); 49304 const innerWrapperClassName = (0,external_wp_element_namespaceObject.useMemo)(() => { 49305 const wrapperWidth = isCompact ? '90px' : width; 49306 const widthStyle = !!wrapperWidth && styles_wrapperWidth(wrapperWidth); 49307 return cx(innerWrapper(), widthStyle); 49308 }, [isCompact, width, cx]); 49309 const widthControlClassName = (0,external_wp_element_namespaceObject.useMemo)(() => { 49310 return cx(borderWidthControl()); 49311 }, [cx]); 49312 const sliderClassName = (0,external_wp_element_namespaceObject.useMemo)(() => { 49313 return cx(borderSlider()); 49314 }, [cx]); 49315 return { ...otherProps, 49316 className: classes, 49317 innerWrapperClassName, 49318 onBorderChange, 49319 onSliderChange, 49320 onWidthChange, 49321 previousStyleSelection: styleSelection, 49322 sliderClassName, 49323 value: border, 49324 widthControlClassName, 49325 widthUnit, 49326 widthValue 49327 }; 49328 } 49329 49330 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/border-control/border-control/component.js 49331 49332 49333 49334 /** 49335 * Internal dependencies 49336 */ 49337 49338 49339 49340 49341 49342 49343 49344 49345 49346 49347 const BorderLabel = props => { 49348 const { 49349 label, 49350 hideLabelFromVision 49351 } = props; 49352 49353 if (!label) { 49354 return null; 49355 } 49356 49357 return hideLabelFromVision ? (0,external_wp_element_namespaceObject.createElement)(visually_hidden_component, { 49358 as: "label" 49359 }, label) : (0,external_wp_element_namespaceObject.createElement)(StyledLabel, null, label); 49360 }; 49361 49362 const BorderControl = (props, forwardedRef) => { 49363 const { 49364 colors, 49365 disableCustomColors, 49366 enableAlpha, 49367 enableStyle = true, 49368 hideLabelFromVision, 49369 innerWrapperClassName, 49370 label, 49371 onBorderChange, 49372 onSliderChange, 49373 onWidthChange, 49374 placeholder, 49375 popoverContentClassName, 49376 previousStyleSelection, 49377 showDropdownHeader, 49378 sliderClassName, 49379 value: border, 49380 widthControlClassName, 49381 widthUnit, 49382 widthValue, 49383 withSlider, 49384 __experimentalHasMultipleOrigins, 49385 __experimentalIsRenderedInSidebar, 49386 ...otherProps 49387 } = useBorderControl(props); 49388 return (0,external_wp_element_namespaceObject.createElement)(component, extends_extends({}, otherProps, { 49389 ref: forwardedRef 49390 }), (0,external_wp_element_namespaceObject.createElement)(BorderLabel, { 49391 label: label, 49392 hideLabelFromVision: hideLabelFromVision 49393 }), (0,external_wp_element_namespaceObject.createElement)(h_stack_component, { 49394 spacing: 3 49395 }, (0,external_wp_element_namespaceObject.createElement)(h_stack_component, { 49396 className: innerWrapperClassName, 49397 alignment: "stretch" 49398 }, (0,external_wp_element_namespaceObject.createElement)(border_control_dropdown_component, { 49399 border: border, 49400 colors: colors, 49401 contentClassName: popoverContentClassName, 49402 disableCustomColors: disableCustomColors, 49403 enableAlpha: enableAlpha, 49404 enableStyle: enableStyle, 49405 onChange: onBorderChange, 49406 previousStyleSelection: previousStyleSelection, 49407 showDropdownHeader: showDropdownHeader, 49408 __experimentalHasMultipleOrigins: __experimentalHasMultipleOrigins, 49409 __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar 49410 }), (0,external_wp_element_namespaceObject.createElement)(unit_control, { 49411 className: widthControlClassName, 49412 min: 0, 49413 onChange: onWidthChange, 49414 value: (border === null || border === void 0 ? void 0 : border.width) || '', 49415 placeholder: placeholder 49416 })), withSlider && (0,external_wp_element_namespaceObject.createElement)(range_control, { 49417 className: sliderClassName, 49418 initialPosition: 0, 49419 max: 100, 49420 min: 0, 49421 onChange: onSliderChange, 49422 step: ['px', '%'].includes(widthUnit) ? 1 : 0.1, 49423 value: widthValue || undefined, 49424 withInputField: false 49425 }))); 49426 }; 49427 49428 const ConnectedBorderControl = contextConnect(BorderControl, 'BorderControl'); 49429 /* harmony default export */ var border_control_component = (ConnectedBorderControl); 49430 49431 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/grid/utils.js 49432 const grid_utils_ALIGNMENTS = { 49433 bottom: { 49434 alignItems: 'flex-end', 49435 justifyContent: 'center' 49436 }, 49437 bottomLeft: { 49438 alignItems: 'flex-start', 49439 justifyContent: 'flex-end' 49440 }, 49441 bottomRight: { 49442 alignItems: 'flex-end', 49443 justifyContent: 'flex-end' 49444 }, 49445 center: { 49446 alignItems: 'center', 49447 justifyContent: 'center' 49448 }, 49449 spaced: { 49450 alignItems: 'center', 49451 justifyContent: 'space-between' 49452 }, 49453 left: { 49454 alignItems: 'center', 49455 justifyContent: 'flex-start' 49456 }, 49457 right: { 49458 alignItems: 'center', 49459 justifyContent: 'flex-end' 49460 }, 49461 stretch: { 49462 alignItems: 'stretch' 49463 }, 49464 top: { 49465 alignItems: 'flex-start', 49466 justifyContent: 'center' 49467 }, 49468 topLeft: { 49469 alignItems: 'flex-start', 49470 justifyContent: 'flex-start' 49471 }, 49472 topRight: { 49473 alignItems: 'flex-start', 49474 justifyContent: 'flex-end' 49475 } 49476 }; 49477 /* eslint-disable jsdoc/valid-types */ 49478 49479 /** 49480 * @param {keyof typeof ALIGNMENTS | undefined} alignment 49481 * @return {{ alignItems?: import('react').CSSProperties['alignItems'], justifyContent?: import('react').CSSProperties['justifyContent']}} CSS props for alignment 49482 */ 49483 49484 function utils_getAlignmentProps(alignment) { 49485 const alignmentProps = alignment ? grid_utils_ALIGNMENTS[alignment] : {}; 49486 return alignmentProps; 49487 } 49488 /* eslint-enable jsdoc/valid-types */ 49489 49490 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/grid/hook.js 49491 /** 49492 * External dependencies 49493 */ 49494 49495 /** 49496 * WordPress dependencies 49497 */ 49498 49499 49500 /** 49501 * Internal dependencies 49502 */ 49503 49504 49505 49506 49507 49508 49509 /** 49510 * @param {import('../ui/context').WordPressComponentProps<import('./types').Props, 'div'>} props 49511 */ 49512 49513 function useGrid(props) { 49514 const { 49515 align, 49516 alignment, 49517 className, 49518 columnGap, 49519 columns = 2, 49520 gap = 3, 49521 isInline = false, 49522 justify, 49523 rowGap, 49524 rows, 49525 templateColumns, 49526 templateRows, 49527 ...otherProps 49528 } = useContextSystem(props, 'Grid'); 49529 const columnsAsArray = Array.isArray(columns) ? columns : [columns]; 49530 const column = useResponsiveValue(columnsAsArray); 49531 const rowsAsArray = Array.isArray(rows) ? rows : [rows]; 49532 const row = useResponsiveValue(rowsAsArray); 49533 const gridTemplateColumns = templateColumns || !!columns && `repeat( $column}, 1fr )`; 49534 const gridTemplateRows = templateRows || !!rows && `repeat( $row}, 1fr )`; 49535 const cx = useCx(); 49536 const classes = (0,external_wp_element_namespaceObject.useMemo)(() => { 49537 const alignmentProps = utils_getAlignmentProps(alignment); 49538 const gridClasses = /*#__PURE__*/emotion_react_browser_esm_css({ 49539 alignItems: align, 49540 display: isInline ? 'inline-grid' : 'grid', 49541 gap: `calc( $config_values.gridBase} * $gap} )`, 49542 gridTemplateColumns: gridTemplateColumns || undefined, 49543 gridTemplateRows: gridTemplateRows || undefined, 49544 gridRowGap: rowGap, 49545 gridColumnGap: columnGap, 49546 justifyContent: justify, 49547 verticalAlign: isInline ? 'middle' : undefined, 49548 ...alignmentProps 49549 }, true ? "" : 0, true ? "" : 0); 49550 return cx(gridClasses, className); 49551 }, [align, alignment, className, columnGap, cx, gap, gridTemplateColumns, gridTemplateRows, isInline, justify, rowGap]); 49552 return { ...otherProps, 49553 className: classes 49554 }; 49555 } 49556 49557 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/grid/component.js 49558 49559 49560 49561 /** 49562 * Internal dependencies 49563 */ 49564 49565 49566 49567 /** 49568 * @param {import('../ui/context').WordPressComponentProps<import('./types').Props, 'div'>} props 49569 * @param {import('react').ForwardedRef<any>} forwardedRef 49570 */ 49571 49572 function Grid(props, forwardedRef) { 49573 const gridProps = useGrid(props); 49574 return (0,external_wp_element_namespaceObject.createElement)(component, extends_extends({}, gridProps, { 49575 ref: forwardedRef 49576 })); 49577 } 49578 /** 49579 * `Grid` is a primitive layout component that can arrange content in a grid configuration. 49580 * 49581 * @example 49582 * ```jsx 49583 * import { 49584 * __experimentalGrid as Grid, 49585 * __experimentalText as Text 49586 * } from `@wordpress/components`; 49587 * 49588 * function Example() { 49589 * return ( 49590 * <Grid columns={ 3 }> 49591 * <Text>Code</Text> 49592 * <Text>is</Text> 49593 * <Text>Poetry</Text> 49594 * </Grid> 49595 * ); 49596 * } 49597 * ``` 49598 */ 49599 49600 49601 const ConnectedGrid = contextConnect(Grid, 'Grid'); 49602 /* harmony default export */ var grid_component = (ConnectedGrid); 49603 49604 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/border-box-control/border-box-control-split-controls/hook.js 49605 /** 49606 * WordPress dependencies 49607 */ 49608 49609 /** 49610 * Internal dependencies 49611 */ 49612 49613 49614 49615 49616 function useBorderBoxControlSplitControls(props) { 49617 const { 49618 className, 49619 ...otherProps 49620 } = useContextSystem(props, 'BorderBoxControlSplitControls'); // Generate class names. 49621 49622 const cx = useCx(); 49623 const classes = (0,external_wp_element_namespaceObject.useMemo)(() => { 49624 return cx(BorderBoxControlSplitControls, className); 49625 }, [className, rtl.watch()]); 49626 const centeredClassName = (0,external_wp_element_namespaceObject.useMemo)(() => { 49627 return cx(CenteredBorderControl, className); 49628 }, []); 49629 return { ...otherProps, 49630 centeredClassName, 49631 className: classes 49632 }; 49633 } 49634 49635 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/border-box-control/border-box-control-split-controls/component.js 49636 49637 49638 49639 /** 49640 * WordPress dependencies 49641 */ 49642 49643 /** 49644 * Internal dependencies 49645 */ 49646 49647 49648 49649 49650 49651 49652 49653 const component_BorderBoxControlSplitControls = (props, forwardedRef) => { 49654 const { 49655 centeredClassName, 49656 colors, 49657 disableCustomColors, 49658 enableAlpha, 49659 enableStyle, 49660 onChange, 49661 popoverClassNames, 49662 value, 49663 __experimentalHasMultipleOrigins, 49664 __experimentalIsRenderedInSidebar, 49665 ...otherProps 49666 } = useBorderBoxControlSplitControls(props); 49667 const sharedBorderControlProps = { 49668 colors, 49669 disableCustomColors, 49670 enableAlpha, 49671 enableStyle, 49672 isCompact: true, 49673 __experimentalHasMultipleOrigins, 49674 __experimentalIsRenderedInSidebar 49675 }; 49676 return (0,external_wp_element_namespaceObject.createElement)(grid_component, extends_extends({}, otherProps, { 49677 ref: forwardedRef, 49678 gap: 4 49679 }), (0,external_wp_element_namespaceObject.createElement)(border_box_control_visualizer_component, { 49680 value: value 49681 }), (0,external_wp_element_namespaceObject.createElement)(border_control_component, extends_extends({ 49682 className: centeredClassName, 49683 hideLabelFromVision: true, 49684 label: (0,external_wp_i18n_namespaceObject.__)('Top border'), 49685 onChange: newBorder => onChange(newBorder, 'top'), 49686 popoverContentClassName: popoverClassNames === null || popoverClassNames === void 0 ? void 0 : popoverClassNames.top, 49687 value: value === null || value === void 0 ? void 0 : value.top 49688 }, sharedBorderControlProps)), (0,external_wp_element_namespaceObject.createElement)(border_control_component, extends_extends({ 49689 hideLabelFromVision: true, 49690 label: (0,external_wp_i18n_namespaceObject.__)('Left border'), 49691 onChange: newBorder => onChange(newBorder, 'left'), 49692 popoverContentClassName: popoverClassNames === null || popoverClassNames === void 0 ? void 0 : popoverClassNames.left, 49693 value: value === null || value === void 0 ? void 0 : value.left 49694 }, sharedBorderControlProps)), (0,external_wp_element_namespaceObject.createElement)(border_control_component, extends_extends({ 49695 hideLabelFromVision: true, 49696 label: (0,external_wp_i18n_namespaceObject.__)('Right border'), 49697 onChange: newBorder => onChange(newBorder, 'right'), 49698 popoverContentClassName: popoverClassNames === null || popoverClassNames === void 0 ? void 0 : popoverClassNames.right, 49699 value: value === null || value === void 0 ? void 0 : value.right 49700 }, sharedBorderControlProps)), (0,external_wp_element_namespaceObject.createElement)(border_control_component, extends_extends({ 49701 className: centeredClassName, 49702 hideLabelFromVision: true, 49703 label: (0,external_wp_i18n_namespaceObject.__)('Bottom border'), 49704 onChange: newBorder => onChange(newBorder, 'bottom'), 49705 popoverContentClassName: popoverClassNames === null || popoverClassNames === void 0 ? void 0 : popoverClassNames.bottom, 49706 value: value === null || value === void 0 ? void 0 : value.bottom 49707 }, sharedBorderControlProps))); 49708 }; 49709 49710 const ConnectedBorderBoxControlSplitControls = contextConnect(component_BorderBoxControlSplitControls, 'BorderBoxControlSplitControls'); 49711 /* harmony default export */ var border_box_control_split_controls_component = (ConnectedBorderBoxControlSplitControls); 49712 49713 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/border-box-control/utils.js 49714 /** 49715 * External dependencies 49716 */ 49717 49718 /** 49719 * Internal dependencies 49720 */ 49721 const sides = ['top', 'right', 'bottom', 'left']; 49722 const borderProps = ['color', 'style', 'width']; 49723 const isEmptyBorder = border => { 49724 if (!border) { 49725 return true; 49726 } 49727 49728 return !borderProps.some(prop => border[prop] !== undefined); 49729 }; 49730 const isDefinedBorder = border => { 49731 // No border, no worries :) 49732 if (!border) { 49733 return false; 49734 } // If we have individual borders per side within the border object we 49735 // need to check whether any of those side borders have been set. 49736 49737 49738 if (hasSplitBorders(border)) { 49739 const allSidesEmpty = sides.every(side => isEmptyBorder(border[side])); 49740 return !allSidesEmpty; 49741 } // If we have a top-level border only, check if that is empty. e.g. 49742 // { color: undefined, style: undefined, width: undefined } 49743 // Border radius can still be set within the border object as it is 49744 // handled separately. 49745 49746 49747 return !isEmptyBorder(border); 49748 }; 49749 const isCompleteBorder = border => { 49750 if (!border) { 49751 return false; 49752 } 49753 49754 return borderProps.every(prop => border[prop] !== undefined); 49755 }; 49756 const hasSplitBorders = function () { 49757 let border = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; 49758 return Object.keys(border).some(side => sides.indexOf(side) !== -1); 49759 }; 49760 const hasMixedBorders = borders => { 49761 if (!hasSplitBorders(borders)) { 49762 return false; 49763 } 49764 49765 const shorthandBorders = sides.map(side => getShorthandBorderStyle(borders === null || borders === void 0 ? void 0 : borders[side])); 49766 return !shorthandBorders.every(border => border === shorthandBorders[0]); 49767 }; 49768 const getSplitBorders = border => { 49769 if (!border || isEmptyBorder(border)) { 49770 return undefined; 49771 } 49772 49773 return { 49774 top: border, 49775 right: border, 49776 bottom: border, 49777 left: border 49778 }; 49779 }; 49780 const getBorderDiff = (original, updated) => { 49781 const diff = {}; 49782 49783 if (original.color !== updated.color) { 49784 diff.color = updated.color; 49785 } 49786 49787 if (original.style !== updated.style) { 49788 diff.style = updated.style; 49789 } 49790 49791 if (original.width !== updated.width) { 49792 diff.width = updated.width; 49793 } 49794 49795 return diff; 49796 }; 49797 const getCommonBorder = borders => { 49798 if (!borders) { 49799 return undefined; 49800 } 49801 49802 const colors = []; 49803 const styles = []; 49804 const widths = []; 49805 sides.forEach(side => { 49806 var _borders$side, _borders$side2, _borders$side3; 49807 49808 colors.push((_borders$side = borders[side]) === null || _borders$side === void 0 ? void 0 : _borders$side.color); 49809 styles.push((_borders$side2 = borders[side]) === null || _borders$side2 === void 0 ? void 0 : _borders$side2.style); 49810 widths.push((_borders$side3 = borders[side]) === null || _borders$side3 === void 0 ? void 0 : _borders$side3.width); 49811 }); 49812 const allColorsMatch = colors.every(value => value === colors[0]); 49813 const allStylesMatch = styles.every(value => value === styles[0]); 49814 const allWidthsMatch = widths.every(value => value === widths[0]); 49815 return { 49816 color: allColorsMatch ? colors[0] : undefined, 49817 style: allStylesMatch ? styles[0] : undefined, 49818 width: allWidthsMatch ? widths[0] : undefined 49819 }; 49820 }; 49821 const getShorthandBorderStyle = (border, fallbackBorder) => { 49822 if (isEmptyBorder(border)) { 49823 return fallbackBorder; 49824 } 49825 49826 const { 49827 color: fallbackColor, 49828 style: fallbackStyle, 49829 width: fallbackWidth 49830 } = fallbackBorder || {}; 49831 const { 49832 color = fallbackColor, 49833 style = fallbackStyle, 49834 width = fallbackWidth 49835 } = border; 49836 const hasVisibleBorder = !!width && width !== '0' || !!color; 49837 const borderStyle = hasVisibleBorder ? style || 'solid' : style; 49838 return [width, borderStyle, color].filter(Boolean).join(' '); 49839 }; 49840 49841 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/border-box-control/border-box-control/hook.js 49842 /** 49843 * WordPress dependencies 49844 */ 49845 49846 /** 49847 * Internal dependencies 49848 */ 49849 49850 49851 49852 49853 49854 function useBorderBoxControl(props) { 49855 const { 49856 className, 49857 onChange, 49858 value, 49859 ...otherProps 49860 } = useContextSystem(props, 'BorderBoxControl'); 49861 const mixedBorders = hasMixedBorders(value); 49862 const splitBorders = hasSplitBorders(value); 49863 const linkedValue = splitBorders ? getCommonBorder(value) : value; 49864 const splitValue = splitBorders ? value : getSplitBorders(value); 49865 const [isLinked, setIsLinked] = (0,external_wp_element_namespaceObject.useState)(!mixedBorders); 49866 49867 const toggleLinked = () => setIsLinked(!isLinked); 49868 49869 const onLinkedChange = newBorder => { 49870 if (!newBorder) { 49871 return onChange(undefined); 49872 } // If we have all props defined on the new border apply it. 49873 49874 49875 if (!mixedBorders || isCompleteBorder(newBorder)) { 49876 return onChange(isEmptyBorder(newBorder) ? undefined : newBorder); 49877 } // If we had mixed borders we might have had some shared border props 49878 // that we need to maintain. For example; we could have mixed borders 49879 // with all the same color but different widths. Then from the linked 49880 // control we change the color. We should keep the separate widths. 49881 49882 49883 const changes = getBorderDiff(linkedValue, newBorder); 49884 const updatedBorders = { 49885 top: { ...(value === null || value === void 0 ? void 0 : value.top), 49886 ...changes 49887 }, 49888 right: { ...(value === null || value === void 0 ? void 0 : value.right), 49889 ...changes 49890 }, 49891 bottom: { ...(value === null || value === void 0 ? void 0 : value.bottom), 49892 ...changes 49893 }, 49894 left: { ...(value === null || value === void 0 ? void 0 : value.left), 49895 ...changes 49896 } 49897 }; 49898 49899 if (hasMixedBorders(updatedBorders)) { 49900 return onChange(updatedBorders); 49901 } 49902 49903 const filteredResult = isEmptyBorder(updatedBorders.top) ? undefined : updatedBorders.top; 49904 onChange(filteredResult); 49905 }; 49906 49907 const onSplitChange = (newBorder, side) => { 49908 const updatedBorders = { ...splitValue, 49909 [side]: newBorder 49910 }; 49911 49912 if (hasMixedBorders(updatedBorders)) { 49913 onChange(updatedBorders); 49914 } else { 49915 onChange(newBorder); 49916 } 49917 }; 49918 49919 const cx = useCx(); 49920 const classes = (0,external_wp_element_namespaceObject.useMemo)(() => { 49921 return cx(BorderBoxControl, className); 49922 }, [className]); 49923 const linkedControlClassName = (0,external_wp_element_namespaceObject.useMemo)(() => { 49924 return cx(LinkedBorderControl); 49925 }, []); 49926 return { ...otherProps, 49927 className: classes, 49928 hasMixedBorders: mixedBorders, 49929 isLinked, 49930 linkedControlClassName, 49931 onLinkedChange, 49932 onSplitChange, 49933 toggleLinked, 49934 linkedValue, 49935 splitValue 49936 }; 49937 } 49938 49939 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/border-box-control/border-box-control/component.js 49940 49941 49942 49943 /** 49944 * WordPress dependencies 49945 */ 49946 49947 /** 49948 * Internal dependencies 49949 */ 49950 49951 49952 49953 49954 49955 49956 49957 49958 49959 49960 49961 const component_BorderLabel = props => { 49962 const { 49963 label, 49964 hideLabelFromVision 49965 } = props; 49966 49967 if (!label) { 49968 return null; 49969 } 49970 49971 return hideLabelFromVision ? (0,external_wp_element_namespaceObject.createElement)(visually_hidden_component, { 49972 as: "label" 49973 }, label) : (0,external_wp_element_namespaceObject.createElement)(StyledLabel, null, label); 49974 }; 49975 49976 const component_BorderBoxControl = (props, forwardedRef) => { 49977 const { 49978 className, 49979 colors, 49980 disableCustomColors, 49981 enableAlpha, 49982 enableStyle, 49983 hasMixedBorders, 49984 hideLabelFromVision, 49985 isLinked, 49986 label, 49987 linkedControlClassName, 49988 linkedValue, 49989 onLinkedChange, 49990 onSplitChange, 49991 popoverClassNames, 49992 splitValue, 49993 toggleLinked, 49994 __experimentalHasMultipleOrigins, 49995 __experimentalIsRenderedInSidebar, 49996 ...otherProps 49997 } = useBorderBoxControl(props); 49998 return (0,external_wp_element_namespaceObject.createElement)(component, extends_extends({ 49999 className: className 50000 }, otherProps, { 50001 ref: forwardedRef 50002 }), (0,external_wp_element_namespaceObject.createElement)(component_BorderLabel, { 50003 label: label, 50004 hideLabelFromVision: hideLabelFromVision 50005 }), (0,external_wp_element_namespaceObject.createElement)(h_stack_component, { 50006 alignment: 'start', 50007 expanded: true, 50008 spacing: 0 50009 }, isLinked ? (0,external_wp_element_namespaceObject.createElement)(border_control_component, { 50010 className: linkedControlClassName, 50011 colors: colors, 50012 disableCustomColors: disableCustomColors, 50013 enableAlpha: enableAlpha, 50014 enableStyle: enableStyle, 50015 onChange: onLinkedChange, 50016 placeholder: hasMixedBorders ? (0,external_wp_i18n_namespaceObject.__)('Mixed') : undefined, 50017 popoverContentClassName: popoverClassNames === null || popoverClassNames === void 0 ? void 0 : popoverClassNames.linked, 50018 shouldSanitizeBorder: false // This component will handle that. 50019 , 50020 value: linkedValue, 50021 withSlider: true, 50022 width: '110px', 50023 __experimentalHasMultipleOrigins: __experimentalHasMultipleOrigins, 50024 __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar 50025 }) : (0,external_wp_element_namespaceObject.createElement)(border_box_control_split_controls_component, { 50026 colors: colors, 50027 disableCustomColors: disableCustomColors, 50028 enableAlpha: enableAlpha, 50029 enableStyle: enableStyle, 50030 onChange: onSplitChange, 50031 popoverClassNames: popoverClassNames, 50032 value: splitValue, 50033 __experimentalHasMultipleOrigins: __experimentalHasMultipleOrigins, 50034 __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar 50035 }), (0,external_wp_element_namespaceObject.createElement)(border_box_control_linked_button_component, { 50036 onClick: toggleLinked, 50037 isLinked: isLinked 50038 }))); 50039 }; 50040 50041 const ConnectedBorderBoxControl = contextConnect(component_BorderBoxControl, 'BorderBoxControl'); 50042 /* harmony default export */ var border_box_control_component = (ConnectedBorderBoxControl); 50043 50044 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/box-control/styles/box-control-styles.js 50045 50046 50047 function box_control_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } 50048 50049 /** 50050 * External dependencies 50051 */ 50052 50053 50054 /** 50055 * Internal dependencies 50056 */ 50057 50058 50059 50060 const box_control_styles_Root = emotion_styled_base_browser_esm("div", true ? { 50061 target: "e7pk0lh6" 50062 } : 0)( true ? { 50063 name: "14bvcyk", 50064 styles: "box-sizing:border-box;max-width:235px;padding-bottom:12px;width:100%" 50065 } : 0); 50066 const Header = /*#__PURE__*/emotion_styled_base_browser_esm(flex_component, true ? { 50067 target: "e7pk0lh5" 50068 } : 0)("color:", COLORS.ui.label, ";margin-bottom:8px;" + ( true ? "" : 0)); 50069 const HeaderControlWrapper = /*#__PURE__*/emotion_styled_base_browser_esm(flex_component, true ? { 50070 target: "e7pk0lh4" 50071 } : 0)( true ? { 50072 name: "aujtid", 50073 styles: "min-height:30px;gap:0" 50074 } : 0); 50075 const UnitControlWrapper = emotion_styled_base_browser_esm("div", true ? { 50076 target: "e7pk0lh3" 50077 } : 0)( true ? { 50078 name: "112jwab", 50079 styles: "box-sizing:border-box;max-width:80px" 50080 } : 0); 50081 const LayoutContainer = /*#__PURE__*/emotion_styled_base_browser_esm(flex_component, true ? { 50082 target: "e7pk0lh2" 50083 } : 0)( true ? { 50084 name: "xy18ro", 50085 styles: "justify-content:center;padding-top:8px" 50086 } : 0); 50087 const Layout = /*#__PURE__*/emotion_styled_base_browser_esm(flex_component, true ? { 50088 target: "e7pk0lh1" 50089 } : 0)( true ? { 50090 name: "3tw5wk", 50091 styles: "position:relative;height:100%;width:100%;justify-content:flex-start" 50092 } : 0); 50093 50094 var box_control_styles_ref = true ? { 50095 name: "1ch9yvl", 50096 styles: "border-radius:0" 50097 } : 0; 50098 50099 var box_control_styles_ref2 = true ? { 50100 name: "tg3mx0", 50101 styles: "border-radius:2px" 50102 } : 0; 50103 50104 const unitControlBorderRadiusStyles = _ref3 => { 50105 let { 50106 isFirst, 50107 isLast, 50108 isOnly 50109 } = _ref3; 50110 50111 if (isFirst) { 50112 return rtl({ 50113 borderTopRightRadius: 0, 50114 borderBottomRightRadius: 0 50115 })(); 50116 } 50117 50118 if (isLast) { 50119 return rtl({ 50120 borderTopLeftRadius: 0, 50121 borderBottomLeftRadius: 0 50122 })(); 50123 } 50124 50125 if (isOnly) { 50126 return box_control_styles_ref2; 50127 } 50128 50129 return box_control_styles_ref; 50130 }; 50131 50132 const unitControlMarginStyles = _ref4 => { 50133 let { 50134 isFirst, 50135 isOnly 50136 } = _ref4; 50137 const marginLeft = isFirst || isOnly ? 0 : -1; 50138 return rtl({ 50139 marginLeft 50140 })(); 50141 }; 50142 50143 const box_control_styles_UnitControl = /*#__PURE__*/emotion_styled_base_browser_esm(unit_control, true ? { 50144 target: "e7pk0lh0" 50145 } : 0)("max-width:60px;", unitControlBorderRadiusStyles, ";", unitControlMarginStyles, ";" + ( true ? "" : 0)); 50146 50147 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/box-control/unit-control.js 50148 50149 50150 50151 /** 50152 * External dependencies 50153 */ 50154 50155 50156 /** 50157 * Internal dependencies 50158 */ 50159 50160 50161 50162 function BoxUnitControl(_ref) { 50163 let { 50164 isFirst, 50165 isLast, 50166 isOnly, 50167 onHoverOn = external_lodash_namespaceObject.noop, 50168 onHoverOff = external_lodash_namespaceObject.noop, 50169 label, 50170 value, 50171 ...props 50172 } = _ref; 50173 const bindHoverGesture = useHover(_ref2 => { 50174 let { 50175 event, 50176 ...state 50177 } = _ref2; 50178 50179 if (state.hovering) { 50180 onHoverOn(event, state); 50181 } else { 50182 onHoverOff(event, state); 50183 } 50184 }); 50185 return (0,external_wp_element_namespaceObject.createElement)(UnitControlWrapper, bindHoverGesture(), (0,external_wp_element_namespaceObject.createElement)(unit_control_Tooltip, { 50186 text: label 50187 }, (0,external_wp_element_namespaceObject.createElement)(box_control_styles_UnitControl, extends_extends({ 50188 "aria-label": label, 50189 className: "component-box-control__unit-control", 50190 hideHTMLArrows: true, 50191 isFirst: isFirst, 50192 isLast: isLast, 50193 isOnly: isOnly, 50194 isPressEnterToChange: true, 50195 isResetValueOnUnitChange: false, 50196 value: value 50197 }, props)))); 50198 } 50199 50200 function unit_control_Tooltip(_ref3) { 50201 let { 50202 children, 50203 text 50204 } = _ref3; 50205 if (!text) return children; 50206 /** 50207 * Wrapping the children in a `<div />` as Tooltip as it attempts 50208 * to render the <UnitControl />. Using a plain `<div />` appears to 50209 * resolve this issue. 50210 * 50211 * Originally discovered and referenced here: 50212 * https://github.com/WordPress/gutenberg/pull/24966#issuecomment-685875026 50213 */ 50214 50215 return (0,external_wp_element_namespaceObject.createElement)(tooltip, { 50216 text: text, 50217 position: "top" 50218 }, (0,external_wp_element_namespaceObject.createElement)("div", null, children)); 50219 } 50220 50221 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/box-control/utils.js 50222 /** 50223 * External dependencies 50224 */ 50225 50226 /** 50227 * WordPress dependencies 50228 */ 50229 50230 50231 /** 50232 * Internal dependencies 50233 */ 50234 50235 50236 const LABELS = { 50237 all: (0,external_wp_i18n_namespaceObject.__)('All'), 50238 top: (0,external_wp_i18n_namespaceObject.__)('Top'), 50239 bottom: (0,external_wp_i18n_namespaceObject.__)('Bottom'), 50240 left: (0,external_wp_i18n_namespaceObject.__)('Left'), 50241 right: (0,external_wp_i18n_namespaceObject.__)('Right'), 50242 mixed: (0,external_wp_i18n_namespaceObject.__)('Mixed'), 50243 vertical: (0,external_wp_i18n_namespaceObject.__)('Vertical'), 50244 horizontal: (0,external_wp_i18n_namespaceObject.__)('Horizontal') 50245 }; 50246 const DEFAULT_VALUES = { 50247 top: undefined, 50248 right: undefined, 50249 bottom: undefined, 50250 left: undefined 50251 }; 50252 const DEFAULT_VISUALIZER_VALUES = { 50253 top: false, 50254 right: false, 50255 bottom: false, 50256 left: false 50257 }; 50258 const ALL_SIDES = ['top', 'right', 'bottom', 'left']; 50259 /** 50260 * Gets an items with the most occurrence within an array 50261 * https://stackoverflow.com/a/20762713 50262 * 50263 * @param {Array<any>} arr Array of items to check. 50264 * @return {any} The item with the most occurrences. 50265 */ 50266 50267 function mode(arr) { 50268 return arr.sort((a, b) => arr.filter(v => v === a).length - arr.filter(v => v === b).length).pop(); 50269 } 50270 /** 50271 * Gets the 'all' input value and unit from values data. 50272 * 50273 * @param {Object} values Box values. 50274 * @param {Object} selectedUnits Box units. 50275 * @param {Array} availableSides Available box sides to evaluate. 50276 * 50277 * @return {string} A value + unit for the 'all' input. 50278 */ 50279 50280 50281 function getAllValue() { 50282 let values = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; 50283 let selectedUnits = arguments.length > 1 ? arguments[1] : undefined; 50284 let availableSides = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : ALL_SIDES; 50285 const sides = normalizeSides(availableSides); 50286 const parsedQuantitiesAndUnits = sides.map(side => parseQuantityAndUnitFromRawValue(values[side])); 50287 const allParsedQuantities = parsedQuantitiesAndUnits.map(value => { 50288 var _value$; 50289 50290 return (_value$ = value[0]) !== null && _value$ !== void 0 ? _value$ : ''; 50291 }); 50292 const allParsedUnits = parsedQuantitiesAndUnits.map(value => value[1]); 50293 const commonQuantity = allParsedQuantities.every(v => v === allParsedQuantities[0]) ? allParsedQuantities[0] : ''; 50294 /** 50295 * The isNumber check is important. On reset actions, the incoming value 50296 * may be null or an empty string. 50297 * 50298 * Also, the value may also be zero (0), which is considered a valid unit value. 50299 * 50300 * isNumber() is more specific for these cases, rather than relying on a 50301 * simple truthy check. 50302 */ 50303 50304 let commonUnit; 50305 50306 if ((0,external_lodash_namespaceObject.isNumber)(commonQuantity)) { 50307 commonUnit = mode(allParsedUnits); 50308 } else { 50309 var _getAllUnitFallback; 50310 50311 // Set meaningful unit selection if no commonQuantity and user has previously 50312 // selected units without assigning values while controls were unlinked. 50313 commonUnit = (_getAllUnitFallback = getAllUnitFallback(selectedUnits)) !== null && _getAllUnitFallback !== void 0 ? _getAllUnitFallback : mode(allParsedUnits); 50314 } 50315 50316 return [commonQuantity, commonUnit].join(''); 50317 } 50318 /** 50319 * Determine the most common unit selection to use as a fallback option. 50320 * 50321 * @param {Object} selectedUnits Current unit selections for individual sides. 50322 * @return {string} Most common unit selection. 50323 */ 50324 50325 function getAllUnitFallback(selectedUnits) { 50326 if (!selectedUnits || typeof selectedUnits !== 'object') { 50327 return undefined; 50328 } 50329 50330 const filteredUnits = Object.values(selectedUnits).filter(Boolean); 50331 return mode(filteredUnits); 50332 } 50333 /** 50334 * Checks to determine if values are mixed. 50335 * 50336 * @param {Object} values Box values. 50337 * @param {Object} selectedUnits Box units. 50338 * @param {Array} sides Available box sides to evaluate. 50339 * 50340 * @return {boolean} Whether values are mixed. 50341 */ 50342 50343 function isValuesMixed() { 50344 let values = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; 50345 let selectedUnits = arguments.length > 1 ? arguments[1] : undefined; 50346 let sides = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : ALL_SIDES; 50347 const allValue = getAllValue(values, selectedUnits, sides); 50348 const isMixed = isNaN(parseFloat(allValue)); 50349 return isMixed; 50350 } 50351 /** 50352 * Checks to determine if values are defined. 50353 * 50354 * @param {Object} values Box values. 50355 * 50356 * @return {boolean} Whether values are mixed. 50357 */ 50358 50359 function isValuesDefined(values) { 50360 return values !== undefined && !(0,external_lodash_namespaceObject.isEmpty)(Object.values(values).filter( // Switching units when input is empty causes values only 50361 // containing units. This gives false positive on mixed values 50362 // unless filtered. 50363 value => !!value && /\d/.test(value))); 50364 } 50365 /** 50366 * Get initial selected side, factoring in whether the sides are linked, 50367 * and whether the vertical / horizontal directions are grouped via splitOnAxis. 50368 * 50369 * @param {boolean} isLinked Whether the box control's fields are linked. 50370 * @param {boolean} splitOnAxis Whether splitting by horizontal or vertical axis. 50371 * @return {string} The initial side. 50372 */ 50373 50374 function getInitialSide(isLinked, splitOnAxis) { 50375 let initialSide = 'all'; 50376 50377 if (!isLinked) { 50378 initialSide = splitOnAxis ? 'vertical' : 'top'; 50379 } 50380 50381 return initialSide; 50382 } 50383 /** 50384 * Normalizes provided sides configuration to an array containing only top, 50385 * right, bottom and left. This essentially just maps `horizontal` or `vertical` 50386 * to their appropriate sides to facilitate correctly determining value for 50387 * all input control. 50388 * 50389 * @param {Array} sides Available sides for box control. 50390 * @return {Array} Normalized sides configuration. 50391 */ 50392 50393 function normalizeSides(sides) { 50394 const filteredSides = []; 50395 50396 if (!(sides !== null && sides !== void 0 && sides.length)) { 50397 return ALL_SIDES; 50398 } 50399 50400 if (sides.includes('vertical')) { 50401 filteredSides.push(...['top', 'bottom']); 50402 } else if (sides.includes('horizontal')) { 50403 filteredSides.push(...['left', 'right']); 50404 } else { 50405 const newSides = ALL_SIDES.filter(side => sides.includes(side)); 50406 filteredSides.push(...newSides); 50407 } 50408 50409 return filteredSides; 50410 } 50411 50412 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/box-control/all-input-control.js 50413 50414 50415 50416 /** 50417 * External dependencies 50418 */ 50419 50420 /** 50421 * Internal dependencies 50422 */ 50423 50424 50425 50426 function AllInputControl(_ref) { 50427 let { 50428 onChange = external_lodash_namespaceObject.noop, 50429 onFocus = external_lodash_namespaceObject.noop, 50430 onHoverOn = external_lodash_namespaceObject.noop, 50431 onHoverOff = external_lodash_namespaceObject.noop, 50432 values, 50433 sides, 50434 selectedUnits, 50435 setSelectedUnits, 50436 ...props 50437 } = _ref; 50438 const allValue = getAllValue(values, selectedUnits, sides); 50439 const hasValues = isValuesDefined(values); 50440 const isMixed = hasValues && isValuesMixed(values, selectedUnits, sides); 50441 const allPlaceholder = isMixed ? LABELS.mixed : null; 50442 50443 const handleOnFocus = event => { 50444 onFocus(event, { 50445 side: 'all' 50446 }); 50447 }; // Applies a value to an object representing top, right, bottom and left 50448 // sides while taking into account any custom side configuration. 50449 50450 50451 const applyValueToSides = (currentValues, newValue) => { 50452 const newValues = { ...currentValues 50453 }; 50454 50455 if (sides !== null && sides !== void 0 && sides.length) { 50456 sides.forEach(side => { 50457 if (side === 'vertical') { 50458 newValues.top = newValue; 50459 newValues.bottom = newValue; 50460 } else if (side === 'horizontal') { 50461 newValues.left = newValue; 50462 newValues.right = newValue; 50463 } else { 50464 newValues[side] = newValue; 50465 } 50466 }); 50467 } else { 50468 ALL_SIDES.forEach(side => newValues[side] = newValue); 50469 } 50470 50471 return newValues; 50472 }; 50473 50474 const handleOnChange = next => { 50475 const isNumeric = !isNaN(parseFloat(next)); 50476 const nextValue = isNumeric ? next : undefined; 50477 const nextValues = applyValueToSides(values, nextValue); 50478 onChange(nextValues); 50479 }; // Set selected unit so it can be used as fallback by unlinked controls 50480 // when individual sides do not have a value containing a unit. 50481 50482 50483 const handleOnUnitChange = unit => { 50484 const newUnits = applyValueToSides(selectedUnits, unit); 50485 setSelectedUnits(newUnits); 50486 }; 50487 50488 const handleOnHoverOn = () => { 50489 onHoverOn({ 50490 top: true, 50491 bottom: true, 50492 left: true, 50493 right: true 50494 }); 50495 }; 50496 50497 const handleOnHoverOff = () => { 50498 onHoverOff({ 50499 top: false, 50500 bottom: false, 50501 left: false, 50502 right: false 50503 }); 50504 }; 50505 50506 return (0,external_wp_element_namespaceObject.createElement)(BoxUnitControl, extends_extends({}, props, { 50507 disableUnits: isMixed, 50508 isOnly: true, 50509 value: allValue, 50510 onChange: handleOnChange, 50511 onUnitChange: handleOnUnitChange, 50512 onFocus: handleOnFocus, 50513 onHoverOn: handleOnHoverOn, 50514 onHoverOff: handleOnHoverOff, 50515 placeholder: allPlaceholder 50516 })); 50517 } 50518 50519 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/box-control/input-controls.js 50520 50521 50522 50523 /** 50524 * External dependencies 50525 */ 50526 50527 /** 50528 * Internal dependencies 50529 */ 50530 50531 50532 50533 50534 50535 function BoxInputControls(_ref) { 50536 let { 50537 onChange = external_lodash_namespaceObject.noop, 50538 onFocus = external_lodash_namespaceObject.noop, 50539 onHoverOn = external_lodash_namespaceObject.noop, 50540 onHoverOff = external_lodash_namespaceObject.noop, 50541 values, 50542 selectedUnits, 50543 setSelectedUnits, 50544 sides, 50545 ...props 50546 } = _ref; 50547 50548 const createHandleOnFocus = side => event => { 50549 onFocus(event, { 50550 side 50551 }); 50552 }; 50553 50554 const createHandleOnHoverOn = side => () => { 50555 onHoverOn({ 50556 [side]: true 50557 }); 50558 }; 50559 50560 const createHandleOnHoverOff = side => () => { 50561 onHoverOff({ 50562 [side]: false 50563 }); 50564 }; 50565 50566 const handleOnChange = nextValues => { 50567 onChange(nextValues); 50568 }; 50569 50570 const createHandleOnChange = side => (next, _ref2) => { 50571 let { 50572 event 50573 } = _ref2; 50574 const { 50575 altKey 50576 } = event; 50577 const nextValues = { ...values 50578 }; 50579 const isNumeric = !isNaN(parseFloat(next)); 50580 const nextValue = isNumeric ? next : undefined; 50581 nextValues[side] = nextValue; 50582 /** 50583 * Supports changing pair sides. For example, holding the ALT key 50584 * when changing the TOP will also update BOTTOM. 50585 */ 50586 50587 if (altKey) { 50588 switch (side) { 50589 case 'top': 50590 nextValues.bottom = nextValue; 50591 break; 50592 50593 case 'bottom': 50594 nextValues.top = nextValue; 50595 break; 50596 50597 case 'left': 50598 nextValues.right = nextValue; 50599 break; 50600 50601 case 'right': 50602 nextValues.left = nextValue; 50603 break; 50604 } 50605 } 50606 50607 handleOnChange(nextValues); 50608 }; 50609 50610 const createHandleOnUnitChange = side => next => { 50611 const newUnits = { ...selectedUnits 50612 }; 50613 newUnits[side] = next; 50614 setSelectedUnits(newUnits); 50615 }; // Filter sides if custom configuration provided, maintaining default order. 50616 50617 50618 const filteredSides = sides !== null && sides !== void 0 && sides.length ? ALL_SIDES.filter(side => sides.includes(side)) : ALL_SIDES; 50619 const first = filteredSides[0]; 50620 const last = filteredSides[filteredSides.length - 1]; 50621 const only = first === last && first; 50622 return (0,external_wp_element_namespaceObject.createElement)(LayoutContainer, { 50623 className: "component-box-control__input-controls-wrapper" 50624 }, (0,external_wp_element_namespaceObject.createElement)(Layout, { 50625 gap: 0, 50626 align: "top", 50627 className: "component-box-control__input-controls" 50628 }, filteredSides.map(side => { 50629 const [parsedQuantity, parsedUnit] = parseQuantityAndUnitFromRawValue(values[side]); 50630 const computedUnit = values[side] ? parsedUnit : selectedUnits[side]; 50631 return (0,external_wp_element_namespaceObject.createElement)(BoxUnitControl, extends_extends({}, props, { 50632 isFirst: first === side, 50633 isLast: last === side, 50634 isOnly: only === side, 50635 value: [parsedQuantity, computedUnit].join(''), 50636 onChange: createHandleOnChange(side), 50637 onUnitChange: createHandleOnUnitChange(side), 50638 onFocus: createHandleOnFocus(side), 50639 onHoverOn: createHandleOnHoverOn(side), 50640 onHoverOff: createHandleOnHoverOff(side), 50641 label: LABELS[side], 50642 key: `box-control-$side}` 50643 })); 50644 }))); 50645 } 50646 50647 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/box-control/axial-input-controls.js 50648 50649 50650 50651 /** 50652 * Internal dependencies 50653 */ 50654 50655 50656 50657 50658 const groupedSides = ['vertical', 'horizontal']; 50659 function AxialInputControls(_ref) { 50660 let { 50661 onChange, 50662 onFocus, 50663 onHoverOn, 50664 onHoverOff, 50665 values, 50666 selectedUnits, 50667 setSelectedUnits, 50668 sides, 50669 ...props 50670 } = _ref; 50671 50672 const createHandleOnFocus = side => event => { 50673 if (!onFocus) { 50674 return; 50675 } 50676 50677 onFocus(event, { 50678 side 50679 }); 50680 }; 50681 50682 const createHandleOnHoverOn = side => () => { 50683 if (!onHoverOn) { 50684 return; 50685 } 50686 50687 if (side === 'vertical') { 50688 onHoverOn({ 50689 top: true, 50690 bottom: true 50691 }); 50692 } 50693 50694 if (side === 'horizontal') { 50695 onHoverOn({ 50696 left: true, 50697 right: true 50698 }); 50699 } 50700 }; 50701 50702 const createHandleOnHoverOff = side => () => { 50703 if (!onHoverOff) { 50704 return; 50705 } 50706 50707 if (side === 'vertical') { 50708 onHoverOff({ 50709 top: false, 50710 bottom: false 50711 }); 50712 } 50713 50714 if (side === 'horizontal') { 50715 onHoverOff({ 50716 left: false, 50717 right: false 50718 }); 50719 } 50720 }; 50721 50722 const createHandleOnChange = side => next => { 50723 if (!onChange) { 50724 return; 50725 } 50726 50727 const nextValues = { ...values 50728 }; 50729 const isNumeric = !isNaN(parseFloat(next)); 50730 const nextValue = isNumeric ? next : undefined; 50731 50732 if (side === 'vertical') { 50733 nextValues.top = nextValue; 50734 nextValues.bottom = nextValue; 50735 } 50736 50737 if (side === 'horizontal') { 50738 nextValues.left = nextValue; 50739 nextValues.right = nextValue; 50740 } 50741 50742 onChange(nextValues); 50743 }; 50744 50745 const createHandleOnUnitChange = side => next => { 50746 const newUnits = { ...selectedUnits 50747 }; 50748 50749 if (side === 'vertical') { 50750 newUnits.top = next; 50751 newUnits.bottom = next; 50752 } 50753 50754 if (side === 'horizontal') { 50755 newUnits.left = next; 50756 newUnits.right = next; 50757 } 50758 50759 setSelectedUnits(newUnits); 50760 }; // Filter sides if custom configuration provided, maintaining default order. 50761 50762 50763 const filteredSides = sides !== null && sides !== void 0 && sides.length ? groupedSides.filter(side => sides.includes(side)) : groupedSides; 50764 const first = filteredSides[0]; 50765 const last = filteredSides[filteredSides.length - 1]; 50766 const only = first === last; 50767 return (0,external_wp_element_namespaceObject.createElement)(Layout, { 50768 gap: 0, 50769 align: "top", 50770 className: "component-box-control__vertical-horizontal-input-controls" 50771 }, filteredSides.map(side => { 50772 const [parsedQuantity, parsedUnit] = parseQuantityAndUnitFromRawValue(side === 'vertical' ? values.top : values.left); 50773 const selectedUnit = side === 'vertical' ? selectedUnits.top : selectedUnits.left; 50774 return (0,external_wp_element_namespaceObject.createElement)(BoxUnitControl, extends_extends({}, props, { 50775 isFirst: first === side, 50776 isLast: last === side, 50777 isOnly: only === side, 50778 value: [parsedQuantity, selectedUnit !== null && selectedUnit !== void 0 ? selectedUnit : parsedUnit].join(''), 50779 onChange: createHandleOnChange(side), 50780 onUnitChange: createHandleOnUnitChange(side), 50781 onFocus: createHandleOnFocus(side), 50782 onHoverOn: createHandleOnHoverOn(side), 50783 onHoverOff: createHandleOnHoverOff(side), 50784 label: LABELS[side], 50785 key: side 50786 })); 50787 })); 50788 } 50789 50790 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/box-control/styles/box-control-icon-styles.js 50791 50792 50793 function box_control_icon_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } 50794 50795 /** 50796 * External dependencies 50797 */ 50798 50799 const box_control_icon_styles_Root = emotion_styled_base_browser_esm("span", true ? { 50800 target: "eaw9yqk8" 50801 } : 0)( true ? { 50802 name: "1w884gc", 50803 styles: "box-sizing:border-box;display:block;width:24px;height:24px;position:relative;padding:4px" 50804 } : 0); 50805 const Viewbox = emotion_styled_base_browser_esm("span", true ? { 50806 target: "eaw9yqk7" 50807 } : 0)( true ? { 50808 name: "i6vjox", 50809 styles: "box-sizing:border-box;display:block;position:relative;width:100%;height:100%" 50810 } : 0); 50811 50812 const strokeFocus = _ref => { 50813 let { 50814 isFocused 50815 } = _ref; 50816 return /*#__PURE__*/emotion_react_browser_esm_css({ 50817 backgroundColor: 'currentColor', 50818 opacity: isFocused ? 1 : 0.3 50819 }, true ? "" : 0, true ? "" : 0); 50820 }; 50821 50822 const Stroke = emotion_styled_base_browser_esm("span", true ? { 50823 target: "eaw9yqk6" 50824 } : 0)("box-sizing:border-box;display:block;pointer-events:none;position:absolute;", strokeFocus, ";" + ( true ? "" : 0)); 50825 50826 const VerticalStroke = /*#__PURE__*/emotion_styled_base_browser_esm(Stroke, true ? { 50827 target: "eaw9yqk5" 50828 } : 0)( true ? { 50829 name: "1k2w39q", 50830 styles: "bottom:3px;top:3px;width:2px" 50831 } : 0); 50832 50833 const HorizontalStroke = /*#__PURE__*/emotion_styled_base_browser_esm(Stroke, true ? { 50834 target: "eaw9yqk4" 50835 } : 0)( true ? { 50836 name: "1q9b07k", 50837 styles: "height:2px;left:3px;right:3px" 50838 } : 0); 50839 50840 const TopStroke = /*#__PURE__*/emotion_styled_base_browser_esm(HorizontalStroke, true ? { 50841 target: "eaw9yqk3" 50842 } : 0)( true ? { 50843 name: "abcix4", 50844 styles: "top:0" 50845 } : 0); 50846 const RightStroke = /*#__PURE__*/emotion_styled_base_browser_esm(VerticalStroke, true ? { 50847 target: "eaw9yqk2" 50848 } : 0)( true ? { 50849 name: "1wf8jf", 50850 styles: "right:0" 50851 } : 0); 50852 const BottomStroke = /*#__PURE__*/emotion_styled_base_browser_esm(HorizontalStroke, true ? { 50853 target: "eaw9yqk1" 50854 } : 0)( true ? { 50855 name: "8tapst", 50856 styles: "bottom:0" 50857 } : 0); 50858 const LeftStroke = /*#__PURE__*/emotion_styled_base_browser_esm(VerticalStroke, true ? { 50859 target: "eaw9yqk0" 50860 } : 0)( true ? { 50861 name: "1ode3cm", 50862 styles: "left:0" 50863 } : 0); 50864 50865 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/box-control/icon.js 50866 50867 50868 50869 /** 50870 * Internal dependencies 50871 */ 50872 50873 const BASE_ICON_SIZE = 24; 50874 function BoxControlIcon(_ref) { 50875 let { 50876 size = 24, 50877 side = 'all', 50878 sides, 50879 ...props 50880 } = _ref; 50881 50882 const isSideDisabled = value => (sides === null || sides === void 0 ? void 0 : sides.length) && !sides.includes(value); 50883 50884 const hasSide = value => { 50885 if (isSideDisabled(value)) { 50886 return false; 50887 } 50888 50889 return side === 'all' || side === value; 50890 }; 50891 50892 const top = hasSide('top') || hasSide('vertical'); 50893 const right = hasSide('right') || hasSide('horizontal'); 50894 const bottom = hasSide('bottom') || hasSide('vertical'); 50895 const left = hasSide('left') || hasSide('horizontal'); // Simulates SVG Icon scaling. 50896 50897 const scale = size / BASE_ICON_SIZE; 50898 return (0,external_wp_element_namespaceObject.createElement)(box_control_icon_styles_Root, extends_extends({ 50899 style: { 50900 transform: `scale($scale})` 50901 } 50902 }, props), (0,external_wp_element_namespaceObject.createElement)(Viewbox, null, (0,external_wp_element_namespaceObject.createElement)(TopStroke, { 50903 isFocused: top 50904 }), (0,external_wp_element_namespaceObject.createElement)(RightStroke, { 50905 isFocused: right 50906 }), (0,external_wp_element_namespaceObject.createElement)(BottomStroke, { 50907 isFocused: bottom 50908 }), (0,external_wp_element_namespaceObject.createElement)(LeftStroke, { 50909 isFocused: left 50910 }))); 50911 } 50912 50913 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/box-control/linked-button.js 50914 50915 50916 50917 /** 50918 * WordPress dependencies 50919 */ 50920 50921 50922 /** 50923 * Internal dependencies 50924 */ 50925 50926 50927 50928 function LinkedButton(_ref) { 50929 let { 50930 isLinked, 50931 ...props 50932 } = _ref; 50933 const label = isLinked ? (0,external_wp_i18n_namespaceObject.__)('Unlink Sides') : (0,external_wp_i18n_namespaceObject.__)('Link Sides'); 50934 return (0,external_wp_element_namespaceObject.createElement)(tooltip, { 50935 text: label 50936 }, (0,external_wp_element_namespaceObject.createElement)("span", null, (0,external_wp_element_namespaceObject.createElement)(build_module_button, extends_extends({}, props, { 50937 className: "component-box-control__linked-button", 50938 variant: isLinked ? 'primary' : 'secondary', 50939 isSmall: true, 50940 icon: isLinked ? library_link : link_off, 50941 iconSize: 16, 50942 "aria-label": label 50943 })))); 50944 } 50945 50946 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/box-control/styles/box-control-visualizer-styles.js 50947 50948 50949 function box_control_visualizer_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } 50950 50951 /** 50952 * External dependencies 50953 */ 50954 50955 50956 /** 50957 * Internal dependencies 50958 */ 50959 50960 50961 var box_control_visualizer_styles_ref = true ? { 50962 name: "11f5o9n", 50963 styles: "bottom:0;left:0;pointer-events:none;position:absolute;right:0;top:0;z-index:1" 50964 } : 0; 50965 50966 const containerPositionStyles = _ref2 => { 50967 let { 50968 isPositionAbsolute 50969 } = _ref2; 50970 if (!isPositionAbsolute) return ''; 50971 return box_control_visualizer_styles_ref; 50972 }; 50973 50974 const box_control_visualizer_styles_Container = emotion_styled_base_browser_esm("div", true ? { 50975 target: "e1df9b4q5" 50976 } : 0)("box-sizing:border-box;position:relative;", containerPositionStyles, ";" + ( true ? "" : 0)); 50977 const Side = emotion_styled_base_browser_esm("div", true ? { 50978 target: "e1df9b4q4" 50979 } : 0)("box-sizing:border-box;background:", COLORS.blue.wordpress[700], ";background:", COLORS.ui.theme, ";filter:brightness( 1 );opacity:0;position:absolute;pointer-events:none;transition:opacity 120ms linear;z-index:1;", _ref3 => { 50980 let { 50981 isActive 50982 } = _ref3; 50983 return isActive && ` 50984 opacity: 0.3; 50985 `; 50986 }, ";" + ( true ? "" : 0)); 50987 const TopView = /*#__PURE__*/emotion_styled_base_browser_esm(Side, true ? { 50988 target: "e1df9b4q3" 50989 } : 0)( true ? { 50990 name: "5i97ct", 50991 styles: "top:0;left:0;right:0" 50992 } : 0); 50993 const RightView = /*#__PURE__*/emotion_styled_base_browser_esm(Side, true ? { 50994 target: "e1df9b4q2" 50995 } : 0)("top:0;bottom:0;", rtl({ 50996 right: 0 50997 }), ";" + ( true ? "" : 0)); 50998 const BottomView = /*#__PURE__*/emotion_styled_base_browser_esm(Side, true ? { 50999 target: "e1df9b4q1" 51000 } : 0)( true ? { 51001 name: "8cxke2", 51002 styles: "bottom:0;left:0;right:0" 51003 } : 0); 51004 const LeftView = /*#__PURE__*/emotion_styled_base_browser_esm(Side, true ? { 51005 target: "e1df9b4q0" 51006 } : 0)("top:0;bottom:0;", rtl({ 51007 left: 0 51008 }), ";" + ( true ? "" : 0)); 51009 51010 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/box-control/visualizer.js 51011 51012 51013 51014 /** 51015 * WordPress dependencies 51016 */ 51017 51018 /** 51019 * Internal dependencies 51020 */ 51021 51022 51023 51024 function BoxControlVisualizer(_ref) { 51025 let { 51026 children, 51027 showValues = DEFAULT_VISUALIZER_VALUES, 51028 values: valuesProp = DEFAULT_VALUES, 51029 ...props 51030 } = _ref; 51031 const isPositionAbsolute = !children; 51032 return (0,external_wp_element_namespaceObject.createElement)(box_control_visualizer_styles_Container, extends_extends({}, props, { 51033 isPositionAbsolute: isPositionAbsolute, 51034 "aria-hidden": "true" 51035 }), (0,external_wp_element_namespaceObject.createElement)(Sides, { 51036 showValues: showValues, 51037 values: valuesProp 51038 }), children); 51039 } 51040 51041 function Sides(_ref2) { 51042 let { 51043 showValues = DEFAULT_VISUALIZER_VALUES, 51044 values 51045 } = _ref2; 51046 const { 51047 top, 51048 right, 51049 bottom, 51050 left 51051 } = values; 51052 return (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, (0,external_wp_element_namespaceObject.createElement)(Top, { 51053 isVisible: showValues.top, 51054 value: top 51055 }), (0,external_wp_element_namespaceObject.createElement)(Right, { 51056 isVisible: showValues.right, 51057 value: right 51058 }), (0,external_wp_element_namespaceObject.createElement)(Bottom, { 51059 isVisible: showValues.bottom, 51060 value: bottom 51061 }), (0,external_wp_element_namespaceObject.createElement)(Left, { 51062 isVisible: showValues.left, 51063 value: left 51064 })); 51065 } 51066 51067 function Top(_ref3) { 51068 let { 51069 isVisible = false, 51070 value 51071 } = _ref3; 51072 const height = value; 51073 const animationProps = useSideAnimation(height); 51074 const isActive = animationProps.isActive || isVisible; 51075 return (0,external_wp_element_namespaceObject.createElement)(TopView, { 51076 isActive: isActive, 51077 style: { 51078 height 51079 } 51080 }); 51081 } 51082 51083 function Right(_ref4) { 51084 let { 51085 isVisible = false, 51086 value 51087 } = _ref4; 51088 const width = value; 51089 const animationProps = useSideAnimation(width); 51090 const isActive = animationProps.isActive || isVisible; 51091 return (0,external_wp_element_namespaceObject.createElement)(RightView, { 51092 isActive: isActive, 51093 style: { 51094 width 51095 } 51096 }); 51097 } 51098 51099 function Bottom(_ref5) { 51100 let { 51101 isVisible = false, 51102 value 51103 } = _ref5; 51104 const height = value; 51105 const animationProps = useSideAnimation(height); 51106 const isActive = animationProps.isActive || isVisible; 51107 return (0,external_wp_element_namespaceObject.createElement)(BottomView, { 51108 isActive: isActive, 51109 style: { 51110 height 51111 } 51112 }); 51113 } 51114 51115 function Left(_ref6) { 51116 let { 51117 isVisible = false, 51118 value 51119 } = _ref6; 51120 const width = value; 51121 const animationProps = useSideAnimation(width); 51122 const isActive = animationProps.isActive || isVisible; 51123 return (0,external_wp_element_namespaceObject.createElement)(LeftView, { 51124 isActive: isActive, 51125 style: { 51126 width 51127 } 51128 }); 51129 } 51130 /** 51131 * Custom hook that renders the "flash" animation whenever the value changes. 51132 * 51133 * @param {string} value Value of (box) side. 51134 */ 51135 51136 51137 function useSideAnimation(value) { 51138 const [isActive, setIsActive] = (0,external_wp_element_namespaceObject.useState)(false); 51139 const valueRef = (0,external_wp_element_namespaceObject.useRef)(value); 51140 const timeoutRef = (0,external_wp_element_namespaceObject.useRef)(); 51141 51142 const clearTimer = () => { 51143 if (timeoutRef.current) { 51144 window.clearTimeout(timeoutRef.current); 51145 } 51146 }; 51147 51148 (0,external_wp_element_namespaceObject.useEffect)(() => { 51149 if (value !== valueRef.current) { 51150 setIsActive(true); 51151 valueRef.current = value; 51152 clearTimer(); 51153 timeoutRef.current = setTimeout(() => { 51154 setIsActive(false); 51155 }, 400); 51156 } 51157 51158 return () => clearTimer(); 51159 }, [value]); 51160 return { 51161 isActive 51162 }; 51163 } 51164 51165 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/box-control/index.js 51166 51167 51168 51169 /** 51170 * External dependencies 51171 */ 51172 51173 /** 51174 * WordPress dependencies 51175 */ 51176 51177 51178 51179 51180 /** 51181 * Internal dependencies 51182 */ 51183 51184 51185 51186 51187 51188 51189 51190 51191 51192 51193 51194 51195 51196 51197 const defaultInputProps = { 51198 min: 0 51199 }; 51200 51201 function box_control_useUniqueId(idProp) { 51202 const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(BoxControl, 'inspector-box-control'); 51203 return idProp || instanceId; 51204 } 51205 51206 function BoxControl(_ref) { 51207 let { 51208 id: idProp, 51209 inputProps = defaultInputProps, 51210 onChange = external_lodash_namespaceObject.noop, 51211 onChangeShowVisualizer = external_lodash_namespaceObject.noop, 51212 label = (0,external_wp_i18n_namespaceObject.__)('Box Control'), 51213 values: valuesProp, 51214 units, 51215 sides, 51216 splitOnAxis = false, 51217 allowReset = true, 51218 resetValues = DEFAULT_VALUES 51219 } = _ref; 51220 const [values, setValues] = use_controlled_state(valuesProp, { 51221 fallback: DEFAULT_VALUES 51222 }); 51223 const inputValues = values || DEFAULT_VALUES; 51224 const hasInitialValue = isValuesDefined(valuesProp); 51225 const hasOneSide = (sides === null || sides === void 0 ? void 0 : sides.length) === 1; 51226 const [isDirty, setIsDirty] = (0,external_wp_element_namespaceObject.useState)(hasInitialValue); 51227 const [isLinked, setIsLinked] = (0,external_wp_element_namespaceObject.useState)(!hasInitialValue || !isValuesMixed(inputValues) || hasOneSide); 51228 const [side, setSide] = (0,external_wp_element_namespaceObject.useState)(getInitialSide(isLinked, splitOnAxis)); // Tracking selected units via internal state allows filtering of CSS unit 51229 // only values from being saved while maintaining preexisting unit selection 51230 // behaviour. Filtering CSS only values prevents invalid style values. 51231 51232 const [selectedUnits, setSelectedUnits] = (0,external_wp_element_namespaceObject.useState)({ 51233 top: parseQuantityAndUnitFromRawValue(valuesProp === null || valuesProp === void 0 ? void 0 : valuesProp.top)[1], 51234 right: parseQuantityAndUnitFromRawValue(valuesProp === null || valuesProp === void 0 ? void 0 : valuesProp.right)[1], 51235 bottom: parseQuantityAndUnitFromRawValue(valuesProp === null || valuesProp === void 0 ? void 0 : valuesProp.bottom)[1], 51236 left: parseQuantityAndUnitFromRawValue(valuesProp === null || valuesProp === void 0 ? void 0 : valuesProp.left)[1] 51237 }); 51238 const id = box_control_useUniqueId(idProp); 51239 const headingId = `$id}-heading`; 51240 51241 const toggleLinked = () => { 51242 setIsLinked(!isLinked); 51243 setSide(getInitialSide(!isLinked, splitOnAxis)); 51244 }; 51245 51246 const handleOnFocus = (event, _ref2) => { 51247 let { 51248 side: nextSide 51249 } = _ref2; 51250 setSide(nextSide); 51251 }; 51252 51253 const handleOnChange = nextValues => { 51254 onChange(nextValues); 51255 setValues(nextValues); 51256 setIsDirty(true); 51257 }; 51258 51259 const handleOnHoverOn = function () { 51260 let next = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; 51261 onChangeShowVisualizer({ ...DEFAULT_VISUALIZER_VALUES, 51262 ...next 51263 }); 51264 }; 51265 51266 const handleOnHoverOff = function () { 51267 let next = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; 51268 onChangeShowVisualizer({ ...DEFAULT_VISUALIZER_VALUES, 51269 ...next 51270 }); 51271 }; 51272 51273 const handleOnReset = () => { 51274 onChange(resetValues); 51275 setValues(resetValues); 51276 setSelectedUnits(resetValues); 51277 setIsDirty(false); 51278 }; 51279 51280 const inputControlProps = { ...inputProps, 51281 onChange: handleOnChange, 51282 onFocus: handleOnFocus, 51283 onHoverOn: handleOnHoverOn, 51284 onHoverOff: handleOnHoverOff, 51285 isLinked, 51286 units, 51287 selectedUnits, 51288 setSelectedUnits, 51289 sides, 51290 values: inputValues 51291 }; 51292 return (0,external_wp_element_namespaceObject.createElement)(box_control_styles_Root, { 51293 id: id, 51294 role: "region", 51295 "aria-labelledby": headingId 51296 }, (0,external_wp_element_namespaceObject.createElement)(Header, { 51297 className: "component-box-control__header" 51298 }, (0,external_wp_element_namespaceObject.createElement)(flex_item_component, null, (0,external_wp_element_namespaceObject.createElement)(text_component, { 51299 id: headingId, 51300 className: "component-box-control__label" 51301 }, label)), allowReset && (0,external_wp_element_namespaceObject.createElement)(flex_item_component, null, (0,external_wp_element_namespaceObject.createElement)(build_module_button, { 51302 className: "component-box-control__reset-button", 51303 isSecondary: true, 51304 isSmall: true, 51305 onClick: handleOnReset, 51306 disabled: !isDirty 51307 }, (0,external_wp_i18n_namespaceObject.__)('Reset')))), (0,external_wp_element_namespaceObject.createElement)(HeaderControlWrapper, { 51308 className: "component-box-control__header-control-wrapper" 51309 }, (0,external_wp_element_namespaceObject.createElement)(flex_item_component, null, (0,external_wp_element_namespaceObject.createElement)(BoxControlIcon, { 51310 side: side, 51311 sides: sides 51312 })), isLinked && (0,external_wp_element_namespaceObject.createElement)(flex_block_component, null, (0,external_wp_element_namespaceObject.createElement)(AllInputControl, extends_extends({ 51313 "aria-label": label 51314 }, inputControlProps))), !isLinked && splitOnAxis && (0,external_wp_element_namespaceObject.createElement)(flex_block_component, null, (0,external_wp_element_namespaceObject.createElement)(AxialInputControls, inputControlProps)), !hasOneSide && (0,external_wp_element_namespaceObject.createElement)(flex_item_component, null, (0,external_wp_element_namespaceObject.createElement)(LinkedButton, { 51315 onClick: toggleLinked, 51316 isLinked: isLinked 51317 }))), !isLinked && !splitOnAxis && (0,external_wp_element_namespaceObject.createElement)(BoxInputControls, inputControlProps)); 51318 } 51319 BoxControl.__Visualizer = BoxControlVisualizer; 51320 51321 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/button-group/index.js 51322 51323 51324 51325 /** 51326 * External dependencies 51327 */ 51328 51329 /** 51330 * WordPress dependencies 51331 */ 51332 51333 51334 51335 function ButtonGroup(_ref, ref) { 51336 let { 51337 className, 51338 ...props 51339 } = _ref; 51340 const classes = classnames_default()('components-button-group', className); 51341 return (0,external_wp_element_namespaceObject.createElement)("div", extends_extends({ 51342 ref: ref, 51343 role: "group", 51344 className: classes 51345 }, props)); 51346 } 51347 51348 /* harmony default export */ var button_group = ((0,external_wp_element_namespaceObject.forwardRef)(ButtonGroup)); 51349 51350 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/elevation/styles.js 51351 function elevation_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } 51352 51353 /** 51354 * External dependencies 51355 */ 51356 51357 const Elevation = true ? { 51358 name: "12ip69d", 51359 styles: "background:transparent;display:block;margin:0!important;pointer-events:none;position:absolute;will-change:box-shadow" 51360 } : 0; 51361 51362 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/elevation/hook.js 51363 /** 51364 * External dependencies 51365 */ 51366 51367 51368 /** 51369 * WordPress dependencies 51370 */ 51371 51372 51373 /** 51374 * Internal dependencies 51375 */ 51376 51377 51378 51379 51380 51381 /** 51382 * @param {number} value 51383 * @return {string} The box shadow value. 51384 */ 51385 51386 function getBoxShadow(value) { 51387 const boxShadowColor = `rgba(0 ,0, 0, $value / 20})`; 51388 const boxShadow = `0 $value}px $value * 2}px 0 51389 $boxShadowColor}`; 51390 return boxShadow; 51391 } 51392 /** 51393 * @param {import('../ui/context').WordPressComponentProps<import('./types').Props, 'div'>} props 51394 */ 51395 51396 function useElevation(props) { 51397 const { 51398 active, 51399 borderRadius = 'inherit', 51400 className, 51401 focus, 51402 hover, 51403 isInteractive = false, 51404 offset = 0, 51405 value = 0, 51406 ...otherProps 51407 } = useContextSystem(props, 'Elevation'); 51408 const cx = useCx(); 51409 const classes = (0,external_wp_element_namespaceObject.useMemo)(() => { 51410 /** @type {number | undefined} */ 51411 let hoverValue = !(0,external_lodash_namespaceObject.isNil)(hover) ? hover : value * 2; 51412 /** @type {number | undefined} */ 51413 51414 let activeValue = !(0,external_lodash_namespaceObject.isNil)(active) ? active : value / 2; 51415 51416 if (!isInteractive) { 51417 hoverValue = !(0,external_lodash_namespaceObject.isNil)(hover) ? hover : undefined; 51418 activeValue = !(0,external_lodash_namespaceObject.isNil)(active) ? active : undefined; 51419 } 51420 51421 const transition = `box-shadow $config_values.transitionDuration} $config_values.transitionTimingFunction}`; 51422 const sx = {}; 51423 sx.Base = /*#__PURE__*/emotion_react_browser_esm_css({ 51424 borderRadius, 51425 bottom: offset, 51426 boxShadow: getBoxShadow(value), 51427 opacity: config_values.elevationIntensity, 51428 left: offset, 51429 right: offset, 51430 top: offset, 51431 transition 51432 }, reduceMotion('transition'), true ? "" : 0, true ? "" : 0); 51433 51434 if (!(0,external_lodash_namespaceObject.isNil)(hoverValue)) { 51435 sx.hover = /*#__PURE__*/emotion_react_browser_esm_css("*:hover>&{box-shadow:", getBoxShadow(hoverValue), ";}" + ( true ? "" : 0), true ? "" : 0); 51436 } 51437 51438 if (!(0,external_lodash_namespaceObject.isNil)(activeValue)) { 51439 sx.active = /*#__PURE__*/emotion_react_browser_esm_css("*:active>&{box-shadow:", getBoxShadow(activeValue), ";}" + ( true ? "" : 0), true ? "" : 0); 51440 } 51441 51442 if (!(0,external_lodash_namespaceObject.isNil)(focus)) { 51443 sx.focus = /*#__PURE__*/emotion_react_browser_esm_css("*:focus>&{box-shadow:", getBoxShadow(focus), ";}" + ( true ? "" : 0), true ? "" : 0); 51444 } 51445 51446 return cx(Elevation, sx.Base, sx.hover && sx.hover, sx.focus && sx.focus, sx.active && sx.active, className); 51447 }, [active, borderRadius, className, cx, focus, hover, isInteractive, offset, value]); 51448 return { ...otherProps, 51449 className: classes, 51450 'aria-hidden': true 51451 }; 51452 } 51453 51454 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/elevation/component.js 51455 51456 51457 51458 /** 51459 * Internal dependencies 51460 */ 51461 51462 51463 51464 /** 51465 * @param {import('../ui/context').WordPressComponentProps<import('./types').Props, 'div'>} props 51466 * @param {import('react').ForwardedRef<any>} forwardedRef 51467 */ 51468 51469 function component_Elevation(props, forwardedRef) { 51470 const elevationProps = useElevation(props); 51471 return (0,external_wp_element_namespaceObject.createElement)(component, extends_extends({}, elevationProps, { 51472 ref: forwardedRef 51473 })); 51474 } 51475 /** 51476 * `Elevation` is a core component that renders shadow, using the library's shadow system. 51477 * 51478 * The shadow effect is generated using the `value` prop. 51479 * 51480 * @example 51481 * ```jsx 51482 * import { 51483 * __experimentalElevation as Elevation, 51484 * __experimentalSurface as Surface, 51485 * __experimentalText as Text, 51486 * } from '@wordpress/components'; 51487 * 51488 * function Example() { 51489 * return ( 51490 * <Surface> 51491 * <Text>Code is Poetry</Text> 51492 * <Elevation value={ 5 } /> 51493 * </Surface> 51494 * ); 51495 * } 51496 * ``` 51497 */ 51498 51499 51500 const ConnectedElevation = contextConnect(component_Elevation, 'Elevation'); 51501 /* harmony default export */ var elevation_component = (ConnectedElevation); 51502 51503 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/card/styles.js 51504 function card_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } 51505 51506 /** 51507 * External dependencies 51508 */ 51509 51510 /** 51511 * Internal dependencies 51512 */ 51513 51514 // Since the border for `Card` is rendered via the `box-shadow` property 51515 // (as opposed to the `border` property), the value of the border radius needs 51516 // to be adjusted by removing 1px (this is because the `box-shadow` renders 51517 // as an "outer radius"). 51518 51519 const adjustedBorderRadius = `calc($config_values.cardBorderRadius} - 1px)`; 51520 const Card = /*#__PURE__*/emotion_react_browser_esm_css("box-shadow:0 0 0 1px ", config_values.surfaceBorderColor, ";outline:none;" + ( true ? "" : 0), true ? "" : 0); 51521 const styles_Header = true ? { 51522 name: "1showjb", 51523 styles: "border-bottom:1px solid;box-sizing:border-box;&:last-child{border-bottom:none;}" 51524 } : 0; 51525 const Footer = true ? { 51526 name: "14n5oej", 51527 styles: "border-top:1px solid;box-sizing:border-box;&:first-of-type{border-top:none;}" 51528 } : 0; 51529 const Content = true ? { 51530 name: "13udsys", 51531 styles: "height:100%" 51532 } : 0; 51533 const Body = true ? { 51534 name: "6ywzd", 51535 styles: "box-sizing:border-box;height:auto;max-height:100%" 51536 } : 0; 51537 const Media = true ? { 51538 name: "dq805e", 51539 styles: "box-sizing:border-box;overflow:hidden;&>img,&>iframe{display:block;height:auto;max-width:100%;width:100%;}" 51540 } : 0; 51541 const Divider = true ? { 51542 name: "c990dr", 51543 styles: "box-sizing:border-box;display:block;width:100%" 51544 } : 0; 51545 const borderRadius = /*#__PURE__*/emotion_react_browser_esm_css("&:first-of-type{border-top-left-radius:", adjustedBorderRadius, ";border-top-right-radius:", adjustedBorderRadius, ";}&:last-of-type{border-bottom-left-radius:", adjustedBorderRadius, ";border-bottom-right-radius:", adjustedBorderRadius, ";}" + ( true ? "" : 0), true ? "" : 0); 51546 const borderColor = /*#__PURE__*/emotion_react_browser_esm_css("border-color:", config_values.colorDivider, ";" + ( true ? "" : 0), true ? "" : 0); 51547 const boxShadowless = true ? { 51548 name: "1t90u8d", 51549 styles: "box-shadow:none" 51550 } : 0; 51551 const borderless = true ? { 51552 name: "1e1ncky", 51553 styles: "border:none" 51554 } : 0; 51555 const rounded = /*#__PURE__*/emotion_react_browser_esm_css("border-radius:", adjustedBorderRadius, ";" + ( true ? "" : 0), true ? "" : 0); 51556 const xSmallCardPadding = /*#__PURE__*/emotion_react_browser_esm_css("padding:", config_values.cardPaddingXSmall, ";" + ( true ? "" : 0), true ? "" : 0); 51557 const cardPaddings = { 51558 large: /*#__PURE__*/emotion_react_browser_esm_css("padding:", config_values.cardPaddingLarge, ";" + ( true ? "" : 0), true ? "" : 0), 51559 medium: /*#__PURE__*/emotion_react_browser_esm_css("padding:", config_values.cardPaddingMedium, ";" + ( true ? "" : 0), true ? "" : 0), 51560 small: /*#__PURE__*/emotion_react_browser_esm_css("padding:", config_values.cardPaddingSmall, ";" + ( true ? "" : 0), true ? "" : 0), 51561 xSmall: xSmallCardPadding, 51562 // The `extraSmall` size is not officially documented, but the following styles 51563 // are kept for legacy reasons to support older values of the `size` prop. 51564 extraSmall: xSmallCardPadding 51565 }; 51566 const shady = /*#__PURE__*/emotion_react_browser_esm_css("background-color:", COLORS.lightGray[200], ";" + ( true ? "" : 0), true ? "" : 0); 51567 51568 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/surface/styles.js 51569 /** 51570 * External dependencies 51571 */ 51572 51573 /** 51574 * Internal dependencies 51575 */ 51576 51577 51578 const Surface = /*#__PURE__*/emotion_react_browser_esm_css("background-color:", config_values.surfaceColor, ";color:", COLORS.darkGray.primary, ";position:relative;" + ( true ? "" : 0), true ? "" : 0); 51579 const background = /*#__PURE__*/emotion_react_browser_esm_css("background-color:", config_values.surfaceBackgroundColor, ";" + ( true ? "" : 0), true ? "" : 0); 51580 /** 51581 * @param {Object} props 51582 * @param {boolean} [props.borderBottom] 51583 * @param {boolean} [props.borderLeft] 51584 * @param {boolean} [props.borderRight] 51585 * @param {boolean} [props.borderTop] 51586 */ 51587 51588 function getBorders(_ref) { 51589 let { 51590 borderBottom, 51591 borderLeft, 51592 borderRight, 51593 borderTop 51594 } = _ref; 51595 const borderStyle = `1px solid $config_values.surfaceBorderColor}`; 51596 return /*#__PURE__*/emotion_react_browser_esm_css({ 51597 borderBottom: borderBottom ? borderStyle : undefined, 51598 borderLeft: borderLeft ? borderStyle : undefined, 51599 borderRight: borderRight ? borderStyle : undefined, 51600 borderTop: borderTop ? borderStyle : undefined 51601 }, true ? "" : 0, true ? "" : 0); 51602 } 51603 const primary = /*#__PURE__*/emotion_react_browser_esm_css( true ? "" : 0, true ? "" : 0); 51604 const secondary = /*#__PURE__*/emotion_react_browser_esm_css("background:", config_values.surfaceBackgroundTintColor, ";" + ( true ? "" : 0), true ? "" : 0); 51605 const tertiary = /*#__PURE__*/emotion_react_browser_esm_css("background:", config_values.surfaceBackgroundTertiaryColor, ";" + ( true ? "" : 0), true ? "" : 0); 51606 /** 51607 * @param {string} surfaceBackgroundSize 51608 */ 51609 51610 const customBackgroundSize = surfaceBackgroundSize => [surfaceBackgroundSize, surfaceBackgroundSize].join(' '); 51611 /** 51612 * @param {string} surfaceBackgroundSizeDotted 51613 */ 51614 51615 51616 const dottedBackground1 = surfaceBackgroundSizeDotted => ['90deg', [config_values.surfaceBackgroundColor, surfaceBackgroundSizeDotted].join(' '), 'transparent 1%'].join(','); 51617 /** 51618 * @param {string} surfaceBackgroundSizeDotted 51619 */ 51620 51621 51622 const dottedBackground2 = surfaceBackgroundSizeDotted => [[config_values.surfaceBackgroundColor, surfaceBackgroundSizeDotted].join(' '), 'transparent 1%'].join(','); 51623 /** 51624 * @param {string} surfaceBackgroundSizeDotted 51625 */ 51626 51627 51628 const dottedBackgroundCombined = surfaceBackgroundSizeDotted => [`linear-gradient( $dottedBackground1(surfaceBackgroundSizeDotted)} ) center`, `linear-gradient( $dottedBackground2(surfaceBackgroundSizeDotted)} ) center`, config_values.surfaceBorderBoldColor].join(','); 51629 /** 51630 * 51631 * @param {string} surfaceBackgroundSize 51632 * @param {string} surfaceBackgroundSizeDotted 51633 */ 51634 51635 51636 const getDotted = (surfaceBackgroundSize, surfaceBackgroundSizeDotted) => /*#__PURE__*/emotion_react_browser_esm_css("background:", dottedBackgroundCombined(surfaceBackgroundSizeDotted), ";background-size:", customBackgroundSize(surfaceBackgroundSize), ";" + ( true ? "" : 0), true ? "" : 0); 51637 const gridBackground1 = [`$config_values.surfaceBorderSubtleColor} 1px`, 'transparent 1px'].join(','); 51638 const gridBackground2 = ['90deg', `$config_values.surfaceBorderSubtleColor} 1px`, 'transparent 1px'].join(','); 51639 const gridBackgroundCombined = [`linear-gradient( $gridBackground1} )`, `linear-gradient( $gridBackground2} )`].join(','); 51640 /** 51641 * @param {string} surfaceBackgroundSize 51642 * @return {import('@emotion/react').SerializedStyles} CSS. 51643 */ 51644 51645 const getGrid = surfaceBackgroundSize => { 51646 return /*#__PURE__*/emotion_react_browser_esm_css("background:", config_values.surfaceBackgroundColor, ";background-image:", gridBackgroundCombined, ";background-size:", customBackgroundSize(surfaceBackgroundSize), ";" + ( true ? "" : 0), true ? "" : 0); 51647 }; 51648 /** 51649 * @param {'dotted' | 'grid' | 'primary' | 'secondary' | 'tertiary'} variant 51650 * @param {string} surfaceBackgroundSize 51651 * @param {string} surfaceBackgroundSizeDotted 51652 */ 51653 51654 const getVariant = (variant, surfaceBackgroundSize, surfaceBackgroundSizeDotted) => { 51655 switch (variant) { 51656 case 'dotted': 51657 { 51658 return getDotted(surfaceBackgroundSize, surfaceBackgroundSizeDotted); 51659 } 51660 51661 case 'grid': 51662 { 51663 return getGrid(surfaceBackgroundSize); 51664 } 51665 51666 case 'primary': 51667 { 51668 return primary; 51669 } 51670 51671 case 'secondary': 51672 { 51673 return secondary; 51674 } 51675 51676 case 'tertiary': 51677 { 51678 return tertiary; 51679 } 51680 } 51681 }; 51682 51683 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/surface/hook.js 51684 /** 51685 * WordPress dependencies 51686 */ 51687 51688 /** 51689 * Internal dependencies 51690 */ 51691 51692 51693 51694 51695 /** 51696 * @param {import('../ui/context').WordPressComponentProps<import('./types').Props, 'div'>} props 51697 */ 51698 51699 function useSurface(props) { 51700 const { 51701 backgroundSize = 12, 51702 borderBottom = false, 51703 borderLeft = false, 51704 borderRight = false, 51705 borderTop = false, 51706 className, 51707 variant = 'primary', 51708 ...otherProps 51709 } = useContextSystem(props, 'Surface'); 51710 const cx = useCx(); 51711 const classes = (0,external_wp_element_namespaceObject.useMemo)(() => { 51712 const sx = {}; 51713 sx.borders = getBorders({ 51714 borderBottom, 51715 borderLeft, 51716 borderRight, 51717 borderTop 51718 }); 51719 return cx(Surface, sx.borders, getVariant(variant, `$backgroundSize}px`, `$backgroundSize - 1}px`), className); 51720 }, [backgroundSize, borderBottom, borderLeft, borderRight, borderTop, className, cx, variant]); 51721 return { ...otherProps, 51722 className: classes 51723 }; 51724 } 51725 51726 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/card/card/hook.js 51727 /** 51728 * WordPress dependencies 51729 */ 51730 51731 51732 /** 51733 * Internal dependencies 51734 */ 51735 51736 51737 51738 51739 51740 /** 51741 * @param {import('../../ui/context').WordPressComponentProps<import('../types').Props, 'div'>} props 51742 */ 51743 51744 function card_hook_useDeprecatedProps(_ref) { 51745 let { 51746 elevation, 51747 isElevated, 51748 ...otherProps 51749 } = _ref; 51750 51751 /**@type {import('../../ui/context').WordPressComponentProps<import('../types').Props, 'div'>} */ 51752 const propsToReturn = { ...otherProps 51753 }; 51754 let computedElevation = elevation; 51755 51756 if (isElevated) { 51757 var _computedElevation; 51758 51759 external_wp_deprecated_default()('Card isElevated prop', { 51760 since: '5.9', 51761 alternative: 'elevation' 51762 }); 51763 (_computedElevation = computedElevation) !== null && _computedElevation !== void 0 ? _computedElevation : computedElevation = 2; 51764 } // The `elevation` prop should only be passed when it's not `undefined`, 51765 // otherwise it will override the value that gets derived from `useContextSystem`. 51766 51767 51768 if (typeof computedElevation !== 'undefined') { 51769 propsToReturn.elevation = computedElevation; 51770 } 51771 51772 return propsToReturn; 51773 } 51774 /** 51775 * @param {import('../../ui/context').WordPressComponentProps<import('../types').Props, 'div'>} props 51776 */ 51777 51778 51779 function useCard(props) { 51780 const { 51781 className, 51782 elevation = 0, 51783 isBorderless = false, 51784 isRounded = true, 51785 size = 'medium', 51786 ...otherProps 51787 } = useContextSystem(card_hook_useDeprecatedProps(props), 'Card'); 51788 const cx = useCx(); 51789 const classes = (0,external_wp_element_namespaceObject.useMemo)(() => { 51790 return cx(Card, isBorderless && boxShadowless, isRounded && rounded, className); 51791 }, [className, cx, isBorderless, isRounded]); 51792 const surfaceProps = useSurface({ ...otherProps, 51793 className: classes 51794 }); 51795 return { ...surfaceProps, 51796 elevation, 51797 isBorderless, 51798 isRounded, 51799 size 51800 }; 51801 } 51802 51803 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/card/card/component.js 51804 51805 51806 51807 /** 51808 * External dependencies 51809 */ 51810 51811 /** 51812 * WordPress dependencies 51813 */ 51814 51815 51816 /** 51817 * Internal dependencies 51818 */ 51819 51820 51821 51822 51823 51824 51825 51826 51827 /** 51828 * @param {import('../../ui/context').WordPressComponentProps<import('../types').Props, 'div'>} props 51829 * @param {import('react').ForwardedRef<any>} forwardedRef 51830 */ 51831 51832 function component_Card(props, forwardedRef) { 51833 const { 51834 children, 51835 elevation, 51836 isBorderless, 51837 isRounded, 51838 size, 51839 ...otherProps 51840 } = useCard(props); 51841 const elevationBorderRadius = isRounded ? config_values.cardBorderRadius : 0; 51842 const cx = useCx(); 51843 const elevationClassName = (0,external_wp_element_namespaceObject.useMemo)(() => cx( /*#__PURE__*/emotion_react_browser_esm_css({ 51844 borderRadius: elevationBorderRadius 51845 }, true ? "" : 0, true ? "" : 0)), [cx, elevationBorderRadius]); 51846 const contextProviderValue = (0,external_wp_element_namespaceObject.useMemo)(() => { 51847 const contextProps = { 51848 size, 51849 isBorderless 51850 }; 51851 return { 51852 CardBody: contextProps, 51853 CardHeader: contextProps, 51854 CardFooter: contextProps 51855 }; 51856 }, [isBorderless, size]); 51857 return (0,external_wp_element_namespaceObject.createElement)(ContextSystemProvider, { 51858 value: contextProviderValue 51859 }, (0,external_wp_element_namespaceObject.createElement)(component, extends_extends({}, otherProps, { 51860 ref: forwardedRef 51861 }), (0,external_wp_element_namespaceObject.createElement)(component, { 51862 className: cx(Content) 51863 }, children), (0,external_wp_element_namespaceObject.createElement)(elevation_component, { 51864 className: elevationClassName, 51865 isInteractive: false, 51866 value: elevation ? 1 : 0 51867 }), (0,external_wp_element_namespaceObject.createElement)(elevation_component, { 51868 className: elevationClassName, 51869 isInteractive: false, 51870 value: elevation 51871 }))); 51872 } 51873 /** 51874 * `Card` provides a flexible and extensible content container. 51875 * `Card` also provides a convenient set of sub-components such as `CardBody`, 51876 * `CardHeader`, `CardFooter`, and more. 51877 * 51878 * @example 51879 * ```jsx 51880 * import { 51881 * Card, 51882 * CardHeader, 51883 * CardBody, 51884 * CardFooter, 51885 * Text, 51886 * Heading, 51887 * } from `@wordpress/components`; 51888 * 51889 * function Example() { 51890 * return ( 51891 * <Card> 51892 * <CardHeader> 51893 * <Heading size={ 4 }>Card Title</Heading> 51894 * </CardHeader> 51895 * <CardBody> 51896 * <Text>Card Content</Text> 51897 * </CardBody> 51898 * <CardFooter> 51899 * <Text>Card Footer</Text> 51900 * </CardFooter> 51901 * </Card> 51902 * ); 51903 * } 51904 * ``` 51905 */ 51906 51907 51908 const ConnectedCard = contextConnect(component_Card, 'Card'); 51909 /* harmony default export */ var card_component = (ConnectedCard); 51910 51911 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/scrollable/styles.js 51912 function scrollable_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } 51913 51914 /** 51915 * External dependencies 51916 */ 51917 51918 /** 51919 * Internal dependencies 51920 */ 51921 51922 51923 const scrollableScrollbar = /*#__PURE__*/emotion_react_browser_esm_css("@media only screen and ( min-device-width: 40em ){&::-webkit-scrollbar{height:12px;width:12px;}&::-webkit-scrollbar-track{background-color:transparent;}&::-webkit-scrollbar-track{background:", config_values.colorScrollbarTrack, ";border-radius:8px;}&::-webkit-scrollbar-thumb{background-clip:padding-box;background-color:", config_values.colorScrollbarThumb, ";border:2px solid rgba( 0, 0, 0, 0 );border-radius:7px;}&:hover::-webkit-scrollbar-thumb{background-color:", config_values.colorScrollbarThumbHover, ";}}" + ( true ? "" : 0), true ? "" : 0); 51924 const Scrollable = true ? { 51925 name: "13udsys", 51926 styles: "height:100%" 51927 } : 0; 51928 const styles_Content = true ? { 51929 name: "bjn8wh", 51930 styles: "position:relative" 51931 } : 0; 51932 const styles_smoothScroll = true ? { 51933 name: "7zq9w", 51934 styles: "scroll-behavior:smooth" 51935 } : 0; 51936 const scrollX = true ? { 51937 name: "q33xhg", 51938 styles: "overflow-x:auto;overflow-y:hidden" 51939 } : 0; 51940 const scrollY = true ? { 51941 name: "103x71s", 51942 styles: "overflow-x:hidden;overflow-y:auto" 51943 } : 0; 51944 const scrollAuto = true ? { 51945 name: "umwchj", 51946 styles: "overflow-y:auto" 51947 } : 0; 51948 51949 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/scrollable/hook.js 51950 /** 51951 * WordPress dependencies 51952 */ 51953 51954 /** 51955 * Internal dependencies 51956 */ 51957 51958 51959 51960 51961 /* eslint-disable jsdoc/valid-types */ 51962 51963 /** 51964 * @param {import('../ui/context').WordPressComponentProps<import('./types').Props, 'div'>} props 51965 */ 51966 51967 /* eslint-enable jsdoc/valid-types */ 51968 51969 function useScrollable(props) { 51970 const { 51971 className, 51972 scrollDirection = 'y', 51973 smoothScroll = false, 51974 ...otherProps 51975 } = useContextSystem(props, 'Scrollable'); 51976 const cx = useCx(); 51977 const classes = (0,external_wp_element_namespaceObject.useMemo)(() => cx(Scrollable, scrollableScrollbar, smoothScroll && styles_smoothScroll, scrollDirection === 'x' && scrollX, scrollDirection === 'y' && scrollY, scrollDirection === 'auto' && scrollAuto, className), [className, cx, scrollDirection, smoothScroll]); 51978 return { ...otherProps, 51979 className: classes 51980 }; 51981 } 51982 51983 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/scrollable/component.js 51984 51985 51986 51987 /** 51988 * Internal dependencies 51989 */ 51990 51991 51992 51993 /** 51994 * @param {import('../ui/context').WordPressComponentProps<import('./types').Props, 'div'>} props 51995 * @param {import('react').ForwardedRef<any>} forwardedRef 51996 */ 51997 51998 function component_Scrollable(props, forwardedRef) { 51999 const scrollableProps = useScrollable(props); 52000 return (0,external_wp_element_namespaceObject.createElement)(component, extends_extends({}, scrollableProps, { 52001 ref: forwardedRef 52002 })); 52003 } 52004 /** 52005 * `Scrollable` is a layout component that content in a scrollable container. 52006 * 52007 * @example 52008 * ```jsx 52009 * import { __experimentalScrollable as Scrollable } from `@wordpress/components`; 52010 * 52011 * function Example() { 52012 * return ( 52013 * <Scrollable style={ { maxHeight: 200 } }> 52014 * <div style={ { height: 500 } }>...</div> 52015 * </Scrollable> 52016 * ); 52017 * } 52018 * ``` 52019 */ 52020 52021 52022 const ConnectedScrollable = contextConnect(component_Scrollable, 'Scrollable'); 52023 /* harmony default export */ var scrollable_component = (ConnectedScrollable); 52024 52025 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/card/card-body/hook.js 52026 /** 52027 * WordPress dependencies 52028 */ 52029 52030 /** 52031 * Internal dependencies 52032 */ 52033 52034 52035 52036 52037 /** 52038 * @param {import('../../ui/context').WordPressComponentProps<import('../types').BodyProps, 'div'>} props 52039 */ 52040 52041 function useCardBody(props) { 52042 const { 52043 className, 52044 isScrollable = false, 52045 isShady = false, 52046 size = 'medium', 52047 ...otherProps 52048 } = useContextSystem(props, 'CardBody'); 52049 const cx = useCx(); 52050 const classes = (0,external_wp_element_namespaceObject.useMemo)(() => cx(Body, borderRadius, cardPaddings[size], isShady && shady, // This classname is added for legacy compatibility reasons. 52051 'components-card__body', className), [className, cx, isShady, size]); 52052 return { ...otherProps, 52053 className: classes, 52054 isScrollable 52055 }; 52056 } 52057 52058 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/card/card-body/component.js 52059 52060 52061 52062 /** 52063 * Internal dependencies 52064 */ 52065 52066 52067 52068 52069 /** 52070 * @param {import('../../ui/context').WordPressComponentProps<import('../types').BodyProps, 'div'>} props 52071 * @param {import('react').ForwardedRef<any>} forwardedRef 52072 */ 52073 52074 function CardBody(props, forwardedRef) { 52075 const { 52076 isScrollable, 52077 ...otherProps 52078 } = useCardBody(props); 52079 52080 if (isScrollable) { 52081 return (0,external_wp_element_namespaceObject.createElement)(scrollable_component, extends_extends({}, otherProps, { 52082 ref: forwardedRef 52083 })); 52084 } 52085 52086 return (0,external_wp_element_namespaceObject.createElement)(component, extends_extends({}, otherProps, { 52087 ref: forwardedRef 52088 })); 52089 } 52090 /** 52091 * `CardBody` renders an optional content area for a `Card`. 52092 * Multiple `CardBody` components can be used within `Card` if needed. 52093 * 52094 * @example 52095 * ```jsx 52096 * import { Card, CardBody } from `@wordpress/components`; 52097 * 52098 * <Card> 52099 * <CardBody> 52100 * ... 52101 * </CardBody> 52102 * </Card> 52103 * ``` 52104 */ 52105 52106 52107 const ConnectedCardBody = contextConnect(CardBody, 'CardBody'); 52108 /* harmony default export */ var card_body_component = (ConnectedCardBody); 52109 52110 ;// CONCATENATED MODULE: ./node_modules/reakit/es/Separator/Separator.js 52111 52112 52113 52114 52115 52116 52117 // Automatically generated 52118 var SEPARATOR_KEYS = ["orientation"]; 52119 52120 var useSeparator = createHook({ 52121 name: "Separator", 52122 compose: useRole, 52123 keys: SEPARATOR_KEYS, 52124 useOptions: function useOptions(_ref) { 52125 var _ref$orientation = _ref.orientation, 52126 orientation = _ref$orientation === void 0 ? "horizontal" : _ref$orientation, 52127 options = _rollupPluginBabelHelpers_1f0bf8c2_objectWithoutPropertiesLoose(_ref, ["orientation"]); 52128 52129 return _objectSpread2({ 52130 orientation: orientation 52131 }, options); 52132 }, 52133 useProps: function useProps(options, htmlProps) { 52134 return _objectSpread2({ 52135 role: "separator", 52136 "aria-orientation": options.orientation 52137 }, htmlProps); 52138 } 52139 }); 52140 var Separator = createComponent({ 52141 as: "hr", 52142 memo: true, 52143 useHook: useSeparator 52144 }); 52145 52146 52147 52148 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/divider/styles.js 52149 52150 52151 function divider_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } 52152 52153 /** 52154 * External dependencies 52155 */ 52156 52157 /** 52158 * Internal dependencies 52159 */ 52160 52161 52162 52163 const MARGIN_DIRECTIONS = { 52164 vertical: { 52165 start: 'marginLeft', 52166 end: 'marginRight' 52167 }, 52168 horizontal: { 52169 start: 'marginTop', 52170 end: 'marginBottom' 52171 } 52172 }; // Renders the correct margins given the Divider's `orientation` and the writing direction. 52173 // When both the generic `margin` and the specific `marginStart|marginEnd` props are defined, 52174 // the latter will take priority. 52175 52176 const renderMargin = _ref2 => { 52177 let { 52178 'aria-orientation': orientation = 'horizontal', 52179 margin, 52180 marginStart, 52181 marginEnd 52182 } = _ref2; 52183 return /*#__PURE__*/emotion_react_browser_esm_css(rtl({ 52184 [MARGIN_DIRECTIONS[orientation].start]: space(marginStart !== null && marginStart !== void 0 ? marginStart : margin), 52185 [MARGIN_DIRECTIONS[orientation].end]: space(marginEnd !== null && marginEnd !== void 0 ? marginEnd : margin) 52186 })(), true ? "" : 0, true ? "" : 0); 52187 }; 52188 52189 var styles_ref = true ? { 52190 name: "1u4hpl4", 52191 styles: "display:inline" 52192 } : 0; 52193 52194 const renderDisplay = _ref3 => { 52195 let { 52196 'aria-orientation': orientation = 'horizontal' 52197 } = _ref3; 52198 return orientation === 'vertical' ? styles_ref : undefined; 52199 }; 52200 52201 const renderBorder = _ref4 => { 52202 let { 52203 'aria-orientation': orientation = 'horizontal' 52204 } = _ref4; 52205 return /*#__PURE__*/emotion_react_browser_esm_css({ 52206 [orientation === 'vertical' ? 'borderRight' : 'borderBottom']: '1px solid currentColor' 52207 }, true ? "" : 0, true ? "" : 0); 52208 }; 52209 52210 const renderSize = _ref5 => { 52211 let { 52212 'aria-orientation': orientation = 'horizontal' 52213 } = _ref5; 52214 return /*#__PURE__*/emotion_react_browser_esm_css({ 52215 height: orientation === 'vertical' ? 'auto' : 0, 52216 width: orientation === 'vertical' ? 0 : 'auto' 52217 }, true ? "" : 0, true ? "" : 0); 52218 }; 52219 52220 const DividerView = emotion_styled_base_browser_esm("hr", true ? { 52221 target: "e19on6iw0" 52222 } : 0)("border:0;margin:0;", renderDisplay, " ", renderBorder, " ", renderSize, " ", renderMargin, ";" + ( true ? "" : 0)); 52223 52224 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/divider/component.js 52225 52226 52227 52228 /** 52229 * External dependencies 52230 */ 52231 // eslint-disable-next-line no-restricted-imports 52232 52233 52234 /** 52235 * Internal dependencies 52236 */ 52237 52238 52239 52240 function UnconnectedDivider(props, forwardedRef) { 52241 const contextProps = useContextSystem(props, 'Divider'); 52242 return (0,external_wp_element_namespaceObject.createElement)(Separator, extends_extends({ 52243 as: DividerView 52244 }, contextProps, { 52245 ref: forwardedRef 52246 })); 52247 } 52248 /** 52249 * `Divider` is a layout component that separates groups of related content. 52250 * 52251 * @example 52252 * ```js 52253 * import { 52254 * __experimentalDivider as Divider, 52255 * __experimentalText as Text, 52256 * __experimentalVStack as VStack, 52257 * } from `@wordpress/components`; 52258 * 52259 * function Example() { 52260 * return ( 52261 * <VStack spacing={4}> 52262 * <Text>Some text here</Text> 52263 * <Divider /> 52264 * <Text>Some more text here</Text> 52265 * </VStack> 52266 * ); 52267 * } 52268 * ``` 52269 */ 52270 52271 52272 const component_Divider = contextConnect(UnconnectedDivider, 'Divider'); 52273 /* harmony default export */ var divider_component = (component_Divider); 52274 52275 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/card/card-divider/hook.js 52276 /** 52277 * WordPress dependencies 52278 */ 52279 52280 /** 52281 * Internal dependencies 52282 */ 52283 52284 52285 52286 52287 /** 52288 * @param {import('../../ui/context').WordPressComponentProps<import('../../divider').DividerProps, 'hr', false>} props 52289 */ 52290 52291 function useCardDivider(props) { 52292 const { 52293 className, 52294 ...otherProps 52295 } = useContextSystem(props, 'CardDivider'); 52296 const cx = useCx(); 52297 const classes = (0,external_wp_element_namespaceObject.useMemo)(() => cx(Divider, borderColor, // This classname is added for legacy compatibility reasons. 52298 'components-card__divider', className), [className, cx]); 52299 return { ...otherProps, 52300 className: classes 52301 }; 52302 } 52303 52304 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/card/card-divider/component.js 52305 52306 52307 52308 /** 52309 * Internal dependencies 52310 */ 52311 52312 52313 52314 /** 52315 * @param {import('../../ui/context').WordPressComponentProps<import('../../divider').DividerProps, 'hr', false>} props 52316 * @param {import('react').ForwardedRef<any>} forwardedRef 52317 */ 52318 52319 function CardDivider(props, forwardedRef) { 52320 const dividerProps = useCardDivider(props); 52321 return (0,external_wp_element_namespaceObject.createElement)(divider_component, extends_extends({}, dividerProps, { 52322 ref: forwardedRef 52323 })); 52324 } 52325 /** 52326 * `CardDivider` renders an optional divider within a `Card`. 52327 * It is typically used to divide multiple `CardBody` components from each other. 52328 * 52329 * @example 52330 * ```jsx 52331 * import { Card, CardBody, CardDivider } from `@wordpress/components`; 52332 * 52333 * <Card> 52334 * <CardBody>...</CardBody> 52335 * <CardDivider /> 52336 * <CardBody>...</CardBody> 52337 * </Card> 52338 * ``` 52339 */ 52340 52341 52342 const ConnectedCardDivider = contextConnect(CardDivider, 'CardDivider'); 52343 /* harmony default export */ var card_divider_component = (ConnectedCardDivider); 52344 52345 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/card/card-footer/hook.js 52346 /** 52347 * WordPress dependencies 52348 */ 52349 52350 /** 52351 * Internal dependencies 52352 */ 52353 52354 52355 52356 52357 /** 52358 * @param {import('../../ui/context').WordPressComponentProps<import('../types').FooterProps, 'div'>} props 52359 */ 52360 52361 function useCardFooter(props) { 52362 const { 52363 className, 52364 justify, 52365 isBorderless = false, 52366 isShady = false, 52367 size = 'medium', 52368 ...otherProps 52369 } = useContextSystem(props, 'CardFooter'); 52370 const cx = useCx(); 52371 const classes = (0,external_wp_element_namespaceObject.useMemo)(() => cx(Footer, borderRadius, borderColor, cardPaddings[size], isBorderless && borderless, isShady && shady, // This classname is added for legacy compatibility reasons. 52372 'components-card__footer', className), [className, cx, isBorderless, isShady, size]); 52373 return { ...otherProps, 52374 className: classes, 52375 justify 52376 }; 52377 } 52378 52379 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/card/card-footer/component.js 52380 52381 52382 52383 /** 52384 * Internal dependencies 52385 */ 52386 52387 52388 52389 /** 52390 * @param {import('../../ui/context').WordPressComponentProps<import('../types').FooterProps, 'div'>} props 52391 * @param {import('react').ForwardedRef<any>} forwardedRef 52392 */ 52393 52394 function CardFooter(props, forwardedRef) { 52395 const footerProps = useCardFooter(props); 52396 return (0,external_wp_element_namespaceObject.createElement)(flex_component, extends_extends({}, footerProps, { 52397 ref: forwardedRef 52398 })); 52399 } 52400 /** 52401 * `CardFooter` renders an optional footer within a `Card`. 52402 * 52403 * @example 52404 * ```jsx 52405 * import { Card, CardBody, CardFooter } from `@wordpress/components`; 52406 * 52407 * <Card> 52408 * <CardBody>...</CardBody> 52409 * <CardFooter>...</CardFooter> 52410 * </Card> 52411 * ``` 52412 */ 52413 52414 52415 const ConnectedCardFooter = contextConnect(CardFooter, 'CardFooter'); 52416 /* harmony default export */ var card_footer_component = (ConnectedCardFooter); 52417 52418 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/card/card-header/hook.js 52419 /** 52420 * WordPress dependencies 52421 */ 52422 52423 /** 52424 * Internal dependencies 52425 */ 52426 52427 52428 52429 52430 /** 52431 * @param {import('../../ui/context').WordPressComponentProps<import('../types').HeaderProps, 'div'>} props 52432 */ 52433 52434 function useCardHeader(props) { 52435 const { 52436 className, 52437 isBorderless = false, 52438 isShady = false, 52439 size = 'medium', 52440 ...otherProps 52441 } = useContextSystem(props, 'CardHeader'); 52442 const cx = useCx(); 52443 const classes = (0,external_wp_element_namespaceObject.useMemo)(() => cx(styles_Header, borderRadius, borderColor, cardPaddings[size], isBorderless && borderless, isShady && shady, // This classname is added for legacy compatibility reasons. 52444 'components-card__header', className), [className, cx, isBorderless, isShady, size]); 52445 return { ...otherProps, 52446 className: classes 52447 }; 52448 } 52449 52450 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/card/card-header/component.js 52451 52452 52453 52454 /** 52455 * Internal dependencies 52456 */ 52457 52458 52459 52460 /** 52461 * @param {import('../../ui/context').WordPressComponentProps<import('../types').HeaderProps, 'div'>} props 52462 * @param {import('react').ForwardedRef<any>} forwardedRef 52463 */ 52464 52465 function CardHeader(props, forwardedRef) { 52466 const headerProps = useCardHeader(props); 52467 return (0,external_wp_element_namespaceObject.createElement)(flex_component, extends_extends({}, headerProps, { 52468 ref: forwardedRef 52469 })); 52470 } 52471 /** 52472 * `CardHeader` renders an optional header within a `Card`. 52473 * 52474 * @example 52475 * ```jsx 52476 * import { Card, CardBody, CardHeader } from `@wordpress/components`; 52477 * 52478 * <Card> 52479 * <CardHeader>...</CardHeader> 52480 * <CardBody>...</CardBody> 52481 * </Card> 52482 * ``` 52483 */ 52484 52485 52486 const ConnectedCardHeader = contextConnect(CardHeader, 'CardHeader'); 52487 /* harmony default export */ var card_header_component = (ConnectedCardHeader); 52488 52489 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/card/card-media/hook.js 52490 /** 52491 * WordPress dependencies 52492 */ 52493 52494 /** 52495 * Internal dependencies 52496 */ 52497 52498 52499 52500 52501 /** 52502 * @param {import('../../ui/context').WordPressComponentProps<{ children: import('react').ReactNode }, 'div'>} props 52503 */ 52504 52505 function useCardMedia(props) { 52506 const { 52507 className, 52508 ...otherProps 52509 } = useContextSystem(props, 'CardMedia'); 52510 const cx = useCx(); 52511 const classes = (0,external_wp_element_namespaceObject.useMemo)(() => cx(Media, borderRadius, // This classname is added for legacy compatibility reasons. 52512 'components-card__media', className), [className, cx]); 52513 return { ...otherProps, 52514 className: classes 52515 }; 52516 } 52517 52518 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/card/card-media/component.js 52519 52520 52521 52522 /** 52523 * Internal dependencies 52524 */ 52525 52526 52527 52528 /** 52529 * @param {import('../../ui/context').WordPressComponentProps<{ children: import('react').ReactNode }, 'div'>} props 52530 * @param {import('react').ForwardedRef<any>} forwardedRef 52531 */ 52532 52533 function CardMedia(props, forwardedRef) { 52534 const cardMediaProps = useCardMedia(props); 52535 return (0,external_wp_element_namespaceObject.createElement)(component, extends_extends({}, cardMediaProps, { 52536 ref: forwardedRef 52537 })); 52538 } 52539 /** 52540 * `CardMedia` provides a container for media elements within a `Card`. 52541 * 52542 * @example 52543 * ```jsx 52544 * import { Card, CardBody, CardMedia } from '@wordpress/components'; 52545 * 52546 * const Example = () => ( 52547 * <Card> 52548 * <CardMedia> 52549 * <img src="..." /> 52550 * </CardMedia> 52551 * <CardBody>...</CardBody> 52552 * </Card> 52553 * ); 52554 * ``` 52555 */ 52556 52557 52558 const ConnectedCardMedia = contextConnect(CardMedia, 'CardMedia'); 52559 /* harmony default export */ var card_media_component = (ConnectedCardMedia); 52560 52561 ;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/reset.js 52562 52563 52564 /** 52565 * WordPress dependencies 52566 */ 52567 52568 const reset_reset = (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.SVG, { 52569 xmlns: "http://www.w3.org/2000/svg", 52570 viewBox: "0 0 24 24" 52571 }, (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.Path, { 52572 d: "M7 11.5h10V13H7z" 52573 })); 52574 /* harmony default export */ var library_reset = (reset_reset); 52575 52576 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/checkbox-control/index.js 52577 52578 52579 52580 /** 52581 * External dependencies 52582 */ 52583 52584 /** 52585 * WordPress dependencies 52586 */ 52587 52588 52589 52590 52591 52592 /** 52593 * Internal dependencies 52594 */ 52595 52596 52597 function CheckboxControl(_ref) { 52598 let { 52599 label, 52600 className, 52601 heading, 52602 checked, 52603 indeterminate, 52604 help, 52605 onChange, 52606 ...props 52607 } = _ref; 52608 52609 if (heading) { 52610 external_wp_deprecated_default()('`heading` prop in `CheckboxControl`', { 52611 alternative: 'a separate element to implement a heading', 52612 since: '5.8' 52613 }); 52614 } 52615 52616 const [showCheckedIcon, setShowCheckedIcon] = (0,external_wp_element_namespaceObject.useState)(false); 52617 const [showIndeterminateIcon, setShowIndeterminateIcon] = (0,external_wp_element_namespaceObject.useState)(false); // Run the following callback everytime the `ref` (and the additional 52618 // dependencies) change. 52619 52620 const ref = (0,external_wp_compose_namespaceObject.useRefEffect)(node => { 52621 if (!node) { 52622 return; 52623 } // It cannot be set using an HTML attribute. 52624 52625 52626 node.indeterminate = !!indeterminate; 52627 setShowCheckedIcon(node.matches(':checked')); 52628 setShowIndeterminateIcon(node.matches(':indeterminate')); 52629 }, [checked, indeterminate]); 52630 const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(CheckboxControl); 52631 const id = `inspector-checkbox-control-$instanceId}`; 52632 52633 const onChangeValue = event => onChange(event.target.checked); 52634 52635 return (0,external_wp_element_namespaceObject.createElement)(base_control, { 52636 label: heading, 52637 id: id, 52638 help: help, 52639 className: classnames_default()('components-checkbox-control', className) 52640 }, (0,external_wp_element_namespaceObject.createElement)("span", { 52641 className: "components-checkbox-control__input-container" 52642 }, (0,external_wp_element_namespaceObject.createElement)("input", extends_extends({ 52643 ref: ref, 52644 id: id, 52645 className: "components-checkbox-control__input", 52646 type: "checkbox", 52647 value: "1", 52648 onChange: onChangeValue, 52649 checked: checked, 52650 "aria-describedby": !!help ? id + '__help' : undefined 52651 }, props)), showIndeterminateIcon ? (0,external_wp_element_namespaceObject.createElement)(icons_build_module_icon, { 52652 icon: library_reset, 52653 className: "components-checkbox-control__indeterminate", 52654 role: "presentation" 52655 }) : null, showCheckedIcon ? (0,external_wp_element_namespaceObject.createElement)(icons_build_module_icon, { 52656 icon: library_check, 52657 className: "components-checkbox-control__checked", 52658 role: "presentation" 52659 }) : null), (0,external_wp_element_namespaceObject.createElement)("label", { 52660 className: "components-checkbox-control__label", 52661 htmlFor: id 52662 }, label)); 52663 } 52664 52665 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/clipboard-button/index.js 52666 52667 52668 52669 /** 52670 * External dependencies 52671 */ 52672 52673 /** 52674 * WordPress dependencies 52675 */ 52676 52677 52678 52679 52680 /** 52681 * Internal dependencies 52682 */ 52683 52684 52685 const TIMEOUT = 4000; 52686 function ClipboardButton(_ref) { 52687 let { 52688 className, 52689 children, 52690 onCopy, 52691 onFinishCopy, 52692 text, 52693 ...buttonProps 52694 } = _ref; 52695 external_wp_deprecated_default()('wp.components.ClipboardButton', { 52696 since: '5.8', 52697 alternative: 'wp.compose.useCopyToClipboard' 52698 }); 52699 const timeoutId = (0,external_wp_element_namespaceObject.useRef)(); 52700 const ref = (0,external_wp_compose_namespaceObject.useCopyToClipboard)(text, () => { 52701 onCopy(); 52702 clearTimeout(timeoutId.current); 52703 52704 if (onFinishCopy) { 52705 timeoutId.current = setTimeout(() => onFinishCopy(), TIMEOUT); 52706 } 52707 }); 52708 (0,external_wp_element_namespaceObject.useEffect)(() => { 52709 clearTimeout(timeoutId.current); 52710 }, []); 52711 const classes = classnames_default()('components-clipboard-button', className); // Workaround for inconsistent behavior in Safari, where <textarea> is not 52712 // the document.activeElement at the moment when the copy event fires. 52713 // This causes documentHasSelection() in the copy-handler component to 52714 // mistakenly override the ClipboardButton, and copy a serialized string 52715 // of the current block instead. 52716 52717 const focusOnCopyEventTarget = event => { 52718 event.target.focus(); 52719 }; 52720 52721 return (0,external_wp_element_namespaceObject.createElement)(build_module_button, extends_extends({}, buttonProps, { 52722 className: classes, 52723 ref: ref, 52724 onCopy: focusOnCopyEventTarget 52725 }), children); 52726 } 52727 52728 ;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/plus.js 52729 52730 52731 /** 52732 * WordPress dependencies 52733 */ 52734 52735 const plus = (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.SVG, { 52736 xmlns: "http://www.w3.org/2000/svg", 52737 viewBox: "0 0 24 24" 52738 }, (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.Path, { 52739 d: "M18 11.2h-5.2V6h-1.6v5.2H6v1.6h5.2V18h1.6v-5.2H18z" 52740 })); 52741 /* harmony default export */ var library_plus = (plus); 52742 52743 ;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/more-vertical.js 52744 52745 52746 /** 52747 * WordPress dependencies 52748 */ 52749 52750 const moreVertical = (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.SVG, { 52751 xmlns: "http://www.w3.org/2000/svg", 52752 viewBox: "0 0 24 24" 52753 }, (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.Path, { 52754 d: "M13 19h-2v-2h2v2zm0-6h-2v-2h2v2zm0-6h-2V5h2v2z" 52755 })); 52756 /* harmony default export */ var more_vertical = (moreVertical); 52757 52758 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/item-group/styles.js 52759 function item_group_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } 52760 52761 /** 52762 * External dependencies 52763 */ 52764 52765 /** 52766 * Internal dependencies 52767 */ 52768 52769 52770 const unstyledButton = /*#__PURE__*/emotion_react_browser_esm_css("appearance:none;border:1px solid transparent;cursor:pointer;background:none;text-align:left;&:hover{color:", COLORS.admin.theme, ";}&:focus{background-color:transparent;color:", COLORS.admin.theme, ";border-color:", COLORS.admin.theme, ";outline:3px solid transparent;}" + ( true ? "" : 0), true ? "" : 0); 52771 const itemWrapper = true ? { 52772 name: "1bcj5ek", 52773 styles: "width:100%;display:block" 52774 } : 0; 52775 const item = true ? { 52776 name: "a5hqs6", 52777 styles: "width:100%;display:block;margin:0;color:inherit" 52778 } : 0; 52779 const bordered = /*#__PURE__*/emotion_react_browser_esm_css("border:1px solid ", config_values.surfaceBorderColor, ";" + ( true ? "" : 0), true ? "" : 0); 52780 const separated = /*#__PURE__*/emotion_react_browser_esm_css(">*:not( marquee )>*{border-bottom:1px solid ", config_values.surfaceBorderColor, ";}>*:last-of-type>*:not( :focus ){border-bottom-color:transparent;}" + ( true ? "" : 0), true ? "" : 0); 52781 const styles_borderRadius = config_values.controlBorderRadius; 52782 const styles_spacedAround = /*#__PURE__*/emotion_react_browser_esm_css("border-radius:", styles_borderRadius, ";" + ( true ? "" : 0), true ? "" : 0); 52783 const styles_rounded = /*#__PURE__*/emotion_react_browser_esm_css("border-radius:", styles_borderRadius, ";>*:first-of-type>*{border-top-left-radius:", styles_borderRadius, ";border-top-right-radius:", styles_borderRadius, ";}>*:last-of-type>*{border-bottom-left-radius:", styles_borderRadius, ";border-bottom-right-radius:", styles_borderRadius, ";}" + ( true ? "" : 0), true ? "" : 0); 52784 const baseFontHeight = `calc($config_values.fontSize} * $config_values.fontLineHeightBase})`; 52785 /* 52786 * Math: 52787 * - Use the desired height as the base value 52788 * - Subtract the computed height of (default) text 52789 * - Subtract the effects of border 52790 * - Divide the calculated number by 2, in order to get an individual top/bottom padding 52791 */ 52792 52793 const paddingY = `calc(($config_values.controlHeight} - $baseFontHeight} - 2px) / 2)`; 52794 const paddingYSmall = `calc(($config_values.controlHeightSmall} - $baseFontHeight} - 2px) / 2)`; 52795 const paddingYLarge = `calc(($config_values.controlHeightLarge} - $baseFontHeight} - 2px) / 2)`; 52796 const itemSizes = { 52797 small: /*#__PURE__*/emotion_react_browser_esm_css("padding:", paddingYSmall, " ", config_values.controlPaddingXSmall, ";" + ( true ? "" : 0), true ? "" : 0), 52798 medium: /*#__PURE__*/emotion_react_browser_esm_css("padding:", paddingY, " ", config_values.controlPaddingX, ";" + ( true ? "" : 0), true ? "" : 0), 52799 large: /*#__PURE__*/emotion_react_browser_esm_css("padding:", paddingYLarge, " ", config_values.controlPaddingXLarge, ";" + ( true ? "" : 0), true ? "" : 0) 52800 }; 52801 52802 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/item-group/item-group/hook.js 52803 /** 52804 * Internal dependencies 52805 */ 52806 52807 /** 52808 * Internal dependencies 52809 */ 52810 52811 52812 52813 function useItemGroup(props) { 52814 const { 52815 className, 52816 isBordered = false, 52817 isRounded = true, 52818 isSeparated = false, 52819 role = 'list', 52820 ...otherProps 52821 } = useContextSystem(props, 'ItemGroup'); 52822 const cx = useCx(); 52823 const classes = cx(isBordered && bordered, isSeparated && separated, isRounded && styles_rounded, className); 52824 return { 52825 isBordered, 52826 className: classes, 52827 role, 52828 isSeparated, 52829 ...otherProps 52830 }; 52831 } 52832 52833 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/item-group/context.js 52834 /** 52835 * WordPress dependencies 52836 */ 52837 52838 /** 52839 * Internal dependencies 52840 */ 52841 52842 const ItemGroupContext = (0,external_wp_element_namespaceObject.createContext)({ 52843 size: 'medium' 52844 }); 52845 const useItemGroupContext = () => (0,external_wp_element_namespaceObject.useContext)(ItemGroupContext); 52846 52847 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/item-group/item-group/component.js 52848 52849 52850 52851 /** 52852 * External dependencies 52853 */ 52854 52855 /** 52856 * Internal dependencies 52857 */ 52858 52859 52860 52861 52862 52863 function ItemGroup(props, forwardedRef) { 52864 const { 52865 isBordered, 52866 isSeparated, 52867 size: sizeProp, 52868 ...otherProps 52869 } = useItemGroup(props); 52870 const { 52871 size: contextSize 52872 } = useItemGroupContext(); 52873 const spacedAround = !isBordered && !isSeparated; 52874 const size = sizeProp || contextSize; 52875 const contextValue = { 52876 spacedAround, 52877 size 52878 }; 52879 return (0,external_wp_element_namespaceObject.createElement)(ItemGroupContext.Provider, { 52880 value: contextValue 52881 }, (0,external_wp_element_namespaceObject.createElement)(component, extends_extends({}, otherProps, { 52882 ref: forwardedRef 52883 }))); 52884 } 52885 52886 /* harmony default export */ var item_group_component = (contextConnect(ItemGroup, 'ItemGroup')); 52887 52888 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/custom-gradient-bar/constants.js 52889 const GRADIENT_MARKERS_WIDTH = 16; 52890 const INSERT_POINT_WIDTH = 16; 52891 const MINIMUM_ABSOLUTE_LEFT_POSITION = 5; 52892 const MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT = 10; 52893 const MINIMUM_DISTANCE_BETWEEN_POINTS = 0; 52894 const MINIMUM_SIGNIFICANT_MOVE = 5; 52895 const KEYBOARD_CONTROL_POINT_VARIATION = MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT; 52896 const MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_MARKER = (INSERT_POINT_WIDTH + GRADIENT_MARKERS_WIDTH) / 2; 52897 52898 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/custom-gradient-bar/utils.js 52899 /** 52900 * Internal dependencies 52901 */ 52902 52903 /** 52904 * Control point for the gradient bar. 52905 * 52906 * @typedef {Object} ControlPoint 52907 * @property {string} color Color of the control point. 52908 * @property {number} position Integer position of the control point as a percentage. 52909 */ 52910 52911 /** 52912 * Color as parsed from the gradient by gradient-parser. 52913 * 52914 * @typedef {Object} Color 52915 * @property {string} r Red component. 52916 * @property {string} g Green component. 52917 * @property {string} b Green component. 52918 * @property {string} [a] Optional alpha component. 52919 */ 52920 52921 /** 52922 * Clamps a number between 0 and 100. 52923 * 52924 * @param {number} value Value to clamp. 52925 * 52926 * @return {number} Value clamped between 0 and 100. 52927 */ 52928 52929 function clampPercent(value) { 52930 return Math.max(0, Math.min(100, value)); 52931 } 52932 /** 52933 * Check if a control point is overlapping with another. 52934 * 52935 * @param {ControlPoint[]} value Array of control points. 52936 * @param {number} initialIndex Index of the position to test. 52937 * @param {number} newPosition New position of the control point. 52938 * @param {number} minDistance Distance considered to be overlapping. 52939 * 52940 * @return {boolean} True if the point is overlapping. 52941 */ 52942 52943 function isOverlapping(value, initialIndex, newPosition) { 52944 let minDistance = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : MINIMUM_DISTANCE_BETWEEN_POINTS; 52945 const initialPosition = value[initialIndex].position; 52946 const minPosition = Math.min(initialPosition, newPosition); 52947 const maxPosition = Math.max(initialPosition, newPosition); 52948 return value.some((_ref, index) => { 52949 let { 52950 position 52951 } = _ref; 52952 return index !== initialIndex && (Math.abs(position - newPosition) < minDistance || minPosition < position && position < maxPosition); 52953 }); 52954 } 52955 /** 52956 * Adds a control point from an array and returns the new array. 52957 * 52958 * @param {ControlPoint[]} points Array of control points. 52959 * @param {number} position Position to insert the new point. 52960 * @param {Color} color Color to update the control point at index. 52961 * 52962 * @return {ControlPoint[]} New array of control points. 52963 */ 52964 52965 function addControlPoint(points, position, color) { 52966 const nextIndex = points.findIndex(point => point.position > position); 52967 const newPoint = { 52968 color, 52969 position 52970 }; 52971 const newPoints = points.slice(); 52972 newPoints.splice(nextIndex - 1, 0, newPoint); 52973 return newPoints; 52974 } 52975 /** 52976 * Removes a control point from an array and returns the new array. 52977 * 52978 * @param {ControlPoint[]} points Array of control points. 52979 * @param {number} index Index to remove. 52980 * 52981 * @return {ControlPoint[]} New array of control points. 52982 */ 52983 52984 function removeControlPoint(points, index) { 52985 return points.filter((point, pointIndex) => { 52986 return pointIndex !== index; 52987 }); 52988 } 52989 /** 52990 * Updates a control point from an array and returns the new array. 52991 * 52992 * @param {ControlPoint[]} points Array of control points. 52993 * @param {number} index Index to update. 52994 * @param {ControlPoint[]} newPoint New control point to replace the index. 52995 * 52996 * @return {ControlPoint[]} New array of control points. 52997 */ 52998 52999 function updateControlPoint(points, index, newPoint) { 53000 const newValue = points.slice(); 53001 newValue[index] = newPoint; 53002 return newValue; 53003 } 53004 /** 53005 * Updates the position of a control point from an array and returns the new array. 53006 * 53007 * @param {ControlPoint[]} points Array of control points. 53008 * @param {number} index Index to update. 53009 * @param {number} newPosition Position to move the control point at index. 53010 * 53011 * @return {ControlPoint[]} New array of control points. 53012 */ 53013 53014 function updateControlPointPosition(points, index, newPosition) { 53015 if (isOverlapping(points, index, newPosition)) { 53016 return points; 53017 } 53018 53019 const newPoint = { ...points[index], 53020 position: newPosition 53021 }; 53022 return updateControlPoint(points, index, newPoint); 53023 } 53024 /** 53025 * Updates the position of a control point from an array and returns the new array. 53026 * 53027 * @param {ControlPoint[]} points Array of control points. 53028 * @param {number} index Index to update. 53029 * @param {Color} newColor Color to update the control point at index. 53030 * 53031 * @return {ControlPoint[]} New array of control points. 53032 */ 53033 53034 function updateControlPointColor(points, index, newColor) { 53035 const newPoint = { ...points[index], 53036 color: newColor 53037 }; 53038 return updateControlPoint(points, index, newPoint); 53039 } 53040 /** 53041 * Updates the position of a control point from an array and returns the new array. 53042 * 53043 * @param {ControlPoint[]} points Array of control points. 53044 * @param {number} position Position of the color stop. 53045 * @param {string} newColor Color to update the control point at index. 53046 * 53047 * @return {ControlPoint[]} New array of control points. 53048 */ 53049 53050 function updateControlPointColorByPosition(points, position, newColor) { 53051 const index = points.findIndex(point => point.position === position); 53052 return updateControlPointColor(points, index, newColor); 53053 } 53054 /** 53055 * Gets the horizontal coordinate when dragging a control point with the mouse. 53056 * 53057 * @param {number} mouseXCoordinate Horizontal coordinate of the mouse position. 53058 * @param {Element} containerElement Container for the gradient picker. 53059 * @param {number} positionedElementWidth Width of the positioned element. 53060 * 53061 * @return {number} Whole number percentage from the left. 53062 */ 53063 53064 function getHorizontalRelativeGradientPosition(mouseXCoordinate, containerElement, positionedElementWidth) { 53065 if (!containerElement) { 53066 return; 53067 } 53068 53069 const { 53070 x, 53071 width 53072 } = containerElement.getBoundingClientRect(); 53073 const absolutePositionValue = mouseXCoordinate - x - MINIMUM_ABSOLUTE_LEFT_POSITION - positionedElementWidth / 2; 53074 const availableWidth = width - MINIMUM_ABSOLUTE_LEFT_POSITION - INSERT_POINT_WIDTH; 53075 return Math.round(clampPercent(absolutePositionValue * 100 / availableWidth)); 53076 } 53077 53078 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/custom-gradient-bar/control-points.js 53079 53080 53081 53082 /** 53083 * External dependencies 53084 */ 53085 53086 53087 /** 53088 * WordPress dependencies 53089 */ 53090 53091 53092 53093 53094 53095 53096 /** 53097 * Internal dependencies 53098 */ 53099 53100 53101 53102 53103 53104 53105 53106 53107 function ControlPointButton(_ref) { 53108 let { 53109 isOpen, 53110 position, 53111 color, 53112 ...additionalProps 53113 } = _ref; 53114 const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(ControlPointButton); 53115 const descriptionId = `components-custom-gradient-picker__control-point-button-description-$instanceId}`; 53116 return (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, (0,external_wp_element_namespaceObject.createElement)(build_module_button, extends_extends({ 53117 "aria-label": (0,external_wp_i18n_namespaceObject.sprintf)( // translators: %1$s: gradient position e.g: 70, %2$s: gradient color code e.g: rgb(52,121,151). 53118 (0,external_wp_i18n_namespaceObject.__)('Gradient control point at position %1$s%% with color code %2$s.'), position, color), 53119 "aria-describedby": descriptionId, 53120 "aria-haspopup": "true", 53121 "aria-expanded": isOpen, 53122 className: classnames_default()('components-custom-gradient-picker__control-point-button', { 53123 'is-active': isOpen 53124 }), 53125 style: { 53126 left: `$position}%` 53127 } 53128 }, additionalProps)), (0,external_wp_element_namespaceObject.createElement)(visually_hidden_component, { 53129 id: descriptionId 53130 }, (0,external_wp_i18n_namespaceObject.__)('Use your left or right arrow keys or drag and drop with the mouse to change the gradient position. Press the button to change the color or remove the control point.'))); 53131 } 53132 53133 function GradientColorPickerDropdown(_ref2) { 53134 let { 53135 isRenderedInSidebar, 53136 gradientPickerDomRef, 53137 ...props 53138 } = _ref2; 53139 const popoverProps = (0,external_wp_element_namespaceObject.useMemo)(() => { 53140 const result = { 53141 className: 'components-custom-gradient-picker__color-picker-popover', 53142 position: 'top' 53143 }; 53144 53145 if (isRenderedInSidebar) { 53146 result.anchorRef = gradientPickerDomRef.current; 53147 result.position = 'bottom left'; 53148 } 53149 53150 return result; 53151 }, [gradientPickerDomRef.current, isRenderedInSidebar]); 53152 return (0,external_wp_element_namespaceObject.createElement)(CustomColorPickerDropdown, extends_extends({ 53153 isRenderedInSidebar: isRenderedInSidebar, 53154 popoverProps: popoverProps 53155 }, props)); 53156 } 53157 53158 function ControlPoints(_ref3) { 53159 let { 53160 disableRemove, 53161 disableAlpha, 53162 gradientPickerDomRef, 53163 ignoreMarkerPosition, 53164 value: controlPoints, 53165 onChange, 53166 onStartControlPointChange, 53167 onStopControlPointChange, 53168 __experimentalIsRenderedInSidebar 53169 } = _ref3; 53170 const controlPointMoveState = (0,external_wp_element_namespaceObject.useRef)(); 53171 53172 const onMouseMove = event => { 53173 const relativePosition = getHorizontalRelativeGradientPosition(event.clientX, gradientPickerDomRef.current, GRADIENT_MARKERS_WIDTH); 53174 const { 53175 initialPosition, 53176 index, 53177 significantMoveHappened 53178 } = controlPointMoveState.current; 53179 53180 if (!significantMoveHappened && Math.abs(initialPosition - relativePosition) >= MINIMUM_SIGNIFICANT_MOVE) { 53181 controlPointMoveState.current.significantMoveHappened = true; 53182 } 53183 53184 onChange(updateControlPointPosition(controlPoints, index, relativePosition)); 53185 }; 53186 53187 const cleanEventListeners = () => { 53188 if (window && window.removeEventListener && controlPointMoveState.current && controlPointMoveState.current.listenersActivated) { 53189 window.removeEventListener('mousemove', onMouseMove); 53190 window.removeEventListener('mouseup', cleanEventListeners); 53191 onStopControlPointChange(); 53192 controlPointMoveState.current.listenersActivated = false; 53193 } 53194 }; 53195 53196 (0,external_wp_element_namespaceObject.useEffect)(() => { 53197 return () => { 53198 cleanEventListeners(); 53199 }; 53200 }, []); 53201 return controlPoints.map((point, index) => { 53202 const initialPosition = point === null || point === void 0 ? void 0 : point.position; 53203 return ignoreMarkerPosition !== initialPosition && (0,external_wp_element_namespaceObject.createElement)(GradientColorPickerDropdown, { 53204 gradientPickerDomRef: gradientPickerDomRef, 53205 isRenderedInSidebar: __experimentalIsRenderedInSidebar, 53206 key: index, 53207 onClose: onStopControlPointChange, 53208 renderToggle: _ref4 => { 53209 let { 53210 isOpen, 53211 onToggle 53212 } = _ref4; 53213 return (0,external_wp_element_namespaceObject.createElement)(ControlPointButton, { 53214 key: index, 53215 onClick: () => { 53216 if (controlPointMoveState.current && controlPointMoveState.current.significantMoveHappened) { 53217 return; 53218 } 53219 53220 if (isOpen) { 53221 onStopControlPointChange(); 53222 } else { 53223 onStartControlPointChange(); 53224 } 53225 53226 onToggle(); 53227 }, 53228 onMouseDown: () => { 53229 if (window && window.addEventListener) { 53230 controlPointMoveState.current = { 53231 initialPosition, 53232 index, 53233 significantMoveHappened: false, 53234 listenersActivated: true 53235 }; 53236 onStartControlPointChange(); 53237 window.addEventListener('mousemove', onMouseMove); 53238 window.addEventListener('mouseup', cleanEventListeners); 53239 } 53240 }, 53241 onKeyDown: event => { 53242 if (event.keyCode === external_wp_keycodes_namespaceObject.LEFT) { 53243 // Stop propagation of the key press event to avoid focus moving 53244 // to another editor area. 53245 event.stopPropagation(); 53246 onChange(updateControlPointPosition(controlPoints, index, clampPercent(point.position - KEYBOARD_CONTROL_POINT_VARIATION))); 53247 } else if (event.keyCode === external_wp_keycodes_namespaceObject.RIGHT) { 53248 // Stop propagation of the key press event to avoid focus moving 53249 // to another editor area. 53250 event.stopPropagation(); 53251 onChange(updateControlPointPosition(controlPoints, index, clampPercent(point.position + KEYBOARD_CONTROL_POINT_VARIATION))); 53252 } 53253 }, 53254 isOpen: isOpen, 53255 position: point.position, 53256 color: point.color 53257 }); 53258 }, 53259 renderContent: _ref5 => { 53260 let { 53261 onClose 53262 } = _ref5; 53263 return (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, (0,external_wp_element_namespaceObject.createElement)(LegacyAdapter, { 53264 enableAlpha: !disableAlpha, 53265 color: point.color, 53266 onChange: color => { 53267 onChange(updateControlPointColor(controlPoints, index, w(color).toRgbString())); 53268 } 53269 }), !disableRemove && controlPoints.length > 2 && (0,external_wp_element_namespaceObject.createElement)(build_module_button, { 53270 className: "components-custom-gradient-picker__remove-control-point", 53271 onClick: () => { 53272 onChange(removeControlPoint(controlPoints, index)); 53273 onClose(); 53274 }, 53275 variant: "link" 53276 }, (0,external_wp_i18n_namespaceObject.__)('Remove Control Point'))); 53277 } 53278 }); 53279 }); 53280 } 53281 53282 function InsertPoint(_ref6) { 53283 let { 53284 value: controlPoints, 53285 onChange, 53286 onOpenInserter, 53287 onCloseInserter, 53288 insertPosition, 53289 disableAlpha, 53290 __experimentalIsRenderedInSidebar, 53291 gradientPickerDomRef 53292 } = _ref6; 53293 const [alreadyInsertedPoint, setAlreadyInsertedPoint] = (0,external_wp_element_namespaceObject.useState)(false); 53294 return (0,external_wp_element_namespaceObject.createElement)(GradientColorPickerDropdown, { 53295 gradientPickerDomRef: gradientPickerDomRef, 53296 isRenderedInSidebar: __experimentalIsRenderedInSidebar, 53297 className: "components-custom-gradient-picker__inserter", 53298 onClose: () => { 53299 onCloseInserter(); 53300 }, 53301 renderToggle: _ref7 => { 53302 let { 53303 isOpen, 53304 onToggle 53305 } = _ref7; 53306 return (0,external_wp_element_namespaceObject.createElement)(build_module_button, { 53307 "aria-expanded": isOpen, 53308 "aria-haspopup": "true", 53309 onClick: () => { 53310 if (isOpen) { 53311 onCloseInserter(); 53312 } else { 53313 setAlreadyInsertedPoint(false); 53314 onOpenInserter(); 53315 } 53316 53317 onToggle(); 53318 }, 53319 className: "components-custom-gradient-picker__insert-point", 53320 icon: library_plus, 53321 style: { 53322 left: insertPosition !== null ? `$insertPosition}%` : undefined 53323 } 53324 }); 53325 }, 53326 renderContent: () => (0,external_wp_element_namespaceObject.createElement)(LegacyAdapter, { 53327 enableAlpha: !disableAlpha, 53328 onChange: color => { 53329 if (!alreadyInsertedPoint) { 53330 onChange(addControlPoint(controlPoints, insertPosition, w(color).toRgbString())); 53331 setAlreadyInsertedPoint(true); 53332 } else { 53333 onChange(updateControlPointColorByPosition(controlPoints, insertPosition, w(color).toRgbString())); 53334 } 53335 } 53336 }) 53337 }); 53338 } 53339 53340 ControlPoints.InsertPoint = InsertPoint; 53341 /* harmony default export */ var control_points = (ControlPoints); 53342 53343 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/custom-gradient-bar/index.js 53344 53345 53346 /** 53347 * External dependencies 53348 */ 53349 53350 53351 /** 53352 * WordPress dependencies 53353 */ 53354 53355 53356 /** 53357 * Internal dependencies 53358 */ 53359 53360 53361 53362 53363 53364 function customGradientBarReducer(state, action) { 53365 switch (action.type) { 53366 case 'MOVE_INSERTER': 53367 if (state.id === 'IDLE' || state.id === 'MOVING_INSERTER') { 53368 return { 53369 id: 'MOVING_INSERTER', 53370 insertPosition: action.insertPosition 53371 }; 53372 } 53373 53374 break; 53375 53376 case 'STOP_INSERTER_MOVE': 53377 if (state.id === 'MOVING_INSERTER') { 53378 return { 53379 id: 'IDLE' 53380 }; 53381 } 53382 53383 break; 53384 53385 case 'OPEN_INSERTER': 53386 if (state.id === 'MOVING_INSERTER') { 53387 return { 53388 id: 'INSERTING_CONTROL_POINT', 53389 insertPosition: state.insertPosition 53390 }; 53391 } 53392 53393 break; 53394 53395 case 'CLOSE_INSERTER': 53396 if (state.id === 'INSERTING_CONTROL_POINT') { 53397 return { 53398 id: 'IDLE' 53399 }; 53400 } 53401 53402 break; 53403 53404 case 'START_CONTROL_CHANGE': 53405 if (state.id === 'IDLE') { 53406 return { 53407 id: 'MOVING_CONTROL_POINT' 53408 }; 53409 } 53410 53411 break; 53412 53413 case 'STOP_CONTROL_CHANGE': 53414 if (state.id === 'MOVING_CONTROL_POINT') { 53415 return { 53416 id: 'IDLE' 53417 }; 53418 } 53419 53420 break; 53421 } 53422 53423 return state; 53424 } 53425 53426 const customGradientBarReducerInitialState = { 53427 id: 'IDLE' 53428 }; 53429 function CustomGradientBar(_ref) { 53430 let { 53431 background, 53432 hasGradient, 53433 value: controlPoints, 53434 onChange, 53435 disableInserter = false, 53436 disableAlpha = false, 53437 __experimentalIsRenderedInSidebar 53438 } = _ref; 53439 const gradientPickerDomRef = (0,external_wp_element_namespaceObject.useRef)(); 53440 const [gradientBarState, gradientBarStateDispatch] = (0,external_wp_element_namespaceObject.useReducer)(customGradientBarReducer, customGradientBarReducerInitialState); 53441 53442 const onMouseEnterAndMove = event => { 53443 const insertPosition = getHorizontalRelativeGradientPosition(event.clientX, gradientPickerDomRef.current, INSERT_POINT_WIDTH); // If the insert point is close to an existing control point don't show it. 53444 53445 if ((0,external_lodash_namespaceObject.some)(controlPoints, _ref2 => { 53446 let { 53447 position 53448 } = _ref2; 53449 return Math.abs(insertPosition - position) < MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT; 53450 })) { 53451 if (gradientBarState.id === 'MOVING_INSERTER') { 53452 gradientBarStateDispatch({ 53453 type: 'STOP_INSERTER_MOVE' 53454 }); 53455 } 53456 53457 return; 53458 } 53459 53460 gradientBarStateDispatch({ 53461 type: 'MOVE_INSERTER', 53462 insertPosition 53463 }); 53464 }; 53465 53466 const onMouseLeave = () => { 53467 gradientBarStateDispatch({ 53468 type: 'STOP_INSERTER_MOVE' 53469 }); 53470 }; 53471 53472 const isMovingInserter = gradientBarState.id === 'MOVING_INSERTER'; 53473 const isInsertingControlPoint = gradientBarState.id === 'INSERTING_CONTROL_POINT'; 53474 return (0,external_wp_element_namespaceObject.createElement)("div", { 53475 ref: gradientPickerDomRef, 53476 className: classnames_default()('components-custom-gradient-picker__gradient-bar', { 53477 'has-gradient': hasGradient 53478 }), 53479 onMouseEnter: onMouseEnterAndMove, 53480 onMouseMove: onMouseEnterAndMove, 53481 style: { 53482 background 53483 }, 53484 onMouseLeave: onMouseLeave 53485 }, (0,external_wp_element_namespaceObject.createElement)("div", { 53486 className: "components-custom-gradient-picker__markers-container" 53487 }, !disableInserter && (isMovingInserter || isInsertingControlPoint) && (0,external_wp_element_namespaceObject.createElement)(control_points.InsertPoint, { 53488 __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar, 53489 gradientPickerDomRef: gradientPickerDomRef, 53490 disableAlpha: disableAlpha, 53491 insertPosition: gradientBarState.insertPosition, 53492 value: controlPoints, 53493 onChange: onChange, 53494 onOpenInserter: () => { 53495 gradientBarStateDispatch({ 53496 type: 'OPEN_INSERTER' 53497 }); 53498 }, 53499 onCloseInserter: () => { 53500 gradientBarStateDispatch({ 53501 type: 'CLOSE_INSERTER' 53502 }); 53503 } 53504 }), (0,external_wp_element_namespaceObject.createElement)(control_points, { 53505 __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar, 53506 disableAlpha: disableAlpha, 53507 disableRemove: disableInserter, 53508 gradientPickerDomRef: gradientPickerDomRef, 53509 ignoreMarkerPosition: isInsertingControlPoint ? gradientBarState.insertPosition : undefined, 53510 value: controlPoints, 53511 onChange: onChange, 53512 onStartControlPointChange: () => { 53513 gradientBarStateDispatch({ 53514 type: 'START_CONTROL_CHANGE' 53515 }); 53516 }, 53517 onStopControlPointChange: () => { 53518 gradientBarStateDispatch({ 53519 type: 'STOP_CONTROL_CHANGE' 53520 }); 53521 } 53522 }))); 53523 } 53524 53525 // EXTERNAL MODULE: ./node_modules/gradient-parser/build/node.js 53526 var build_node = __webpack_require__(7115); 53527 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/custom-gradient-picker/constants.js 53528 /** 53529 * WordPress dependencies 53530 */ 53531 53532 const DEFAULT_GRADIENT = 'linear-gradient(135deg, rgba(6, 147, 227, 1) 0%, rgb(155, 81, 224) 100%)'; 53533 const DEFAULT_LINEAR_GRADIENT_ANGLE = 180; 53534 const HORIZONTAL_GRADIENT_ORIENTATION = { 53535 type: 'angular', 53536 value: 90 53537 }; 53538 const GRADIENT_OPTIONS = [{ 53539 value: 'linear-gradient', 53540 label: (0,external_wp_i18n_namespaceObject.__)('Linear') 53541 }, { 53542 value: 'radial-gradient', 53543 label: (0,external_wp_i18n_namespaceObject.__)('Radial') 53544 }]; 53545 const DIRECTIONAL_ORIENTATION_ANGLE_MAP = { 53546 top: 0, 53547 'top right': 45, 53548 'right top': 45, 53549 right: 90, 53550 'right bottom': 135, 53551 'bottom right': 135, 53552 bottom: 180, 53553 'bottom left': 225, 53554 'left bottom': 225, 53555 left: 270, 53556 'top left': 315, 53557 'left top': 315 53558 }; 53559 53560 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/custom-gradient-picker/serializer.js 53561 /** 53562 * External dependencies 53563 */ 53564 53565 function serializeGradientColor(_ref) { 53566 let { 53567 type, 53568 value 53569 } = _ref; 53570 53571 if (type === 'literal') { 53572 return value; 53573 } 53574 53575 if (type === 'hex') { 53576 return `#$value}`; 53577 } 53578 53579 return `$type}($value.join(',')})`; 53580 } 53581 function serializeGradientPosition(position) { 53582 if (!position) { 53583 return ''; 53584 } 53585 53586 const { 53587 value, 53588 type 53589 } = position; 53590 return `$value}$type}`; 53591 } 53592 function serializeGradientColorStop(_ref2) { 53593 let { 53594 type, 53595 value, 53596 length 53597 } = _ref2; 53598 return `$serializeGradientColor({ 53599 type, 53600 value 53601 })} $serializeGradientPosition(length)}`; 53602 } 53603 function serializeGradientOrientation(orientation) { 53604 if (!orientation || orientation.type !== 'angular') { 53605 return; 53606 } 53607 53608 return `$orientation.value}deg`; 53609 } 53610 function serializeGradient(_ref3) { 53611 let { 53612 type, 53613 orientation, 53614 colorStops 53615 } = _ref3; 53616 const serializedOrientation = serializeGradientOrientation(orientation); 53617 const serializedColorStops = colorStops.sort((colorStop1, colorStop2) => { 53618 return (0,external_lodash_namespaceObject.get)(colorStop1, ['length', 'value'], 0) - (0,external_lodash_namespaceObject.get)(colorStop2, ['length', 'value'], 0); 53619 }).map(serializeGradientColorStop); 53620 return `$type}(${(0,external_lodash_namespaceObject.compact)([serializedOrientation, ...serializedColorStops]).join(',')})`; 53621 } 53622 53623 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/custom-gradient-picker/utils.js 53624 /** 53625 * External dependencies 53626 */ 53627 53628 53629 53630 /** 53631 * Internal dependencies 53632 */ 53633 53634 53635 53636 k([names]); 53637 function getLinearGradientRepresentation(gradientAST) { 53638 return serializeGradient({ 53639 type: 'linear-gradient', 53640 orientation: HORIZONTAL_GRADIENT_ORIENTATION, 53641 colorStops: gradientAST.colorStops 53642 }); 53643 } 53644 53645 function hasUnsupportedLength(item) { 53646 return item.length === undefined || item.length.type !== '%'; 53647 } 53648 53649 function getGradientAstWithDefault(value) { 53650 var _gradientAST$orientat; 53651 53652 // gradientAST will contain the gradient AST as parsed by gradient-parser npm module. 53653 // More information of its structure available at https://www.npmjs.com/package/gradient-parser#ast. 53654 let gradientAST; 53655 53656 try { 53657 gradientAST = build_node.parse(value)[0]; 53658 gradientAST.value = value; 53659 } catch (error) { 53660 gradientAST = build_node.parse(DEFAULT_GRADIENT)[0]; 53661 gradientAST.value = DEFAULT_GRADIENT; 53662 } 53663 53664 if (((_gradientAST$orientat = gradientAST.orientation) === null || _gradientAST$orientat === void 0 ? void 0 : _gradientAST$orientat.type) === 'directional') { 53665 gradientAST.orientation.type = 'angular'; 53666 gradientAST.orientation.value = DIRECTIONAL_ORIENTATION_ANGLE_MAP[gradientAST.orientation.value].toString(); 53667 } 53668 53669 if (gradientAST.colorStops.some(hasUnsupportedLength)) { 53670 const { 53671 colorStops 53672 } = gradientAST; 53673 const step = 100 / (colorStops.length - 1); 53674 colorStops.forEach((stop, index) => { 53675 stop.length = { 53676 value: step * index, 53677 type: '%' 53678 }; 53679 }); 53680 gradientAST.value = serializeGradient(gradientAST); 53681 } 53682 53683 return gradientAST; 53684 } 53685 function getGradientAstWithControlPoints(gradientAST, newControlPoints) { 53686 return { ...gradientAST, 53687 colorStops: newControlPoints.map(_ref => { 53688 let { 53689 position, 53690 color 53691 } = _ref; 53692 const { 53693 r, 53694 g, 53695 b, 53696 a 53697 } = w(color).toRgb(); 53698 return { 53699 length: { 53700 type: '%', 53701 value: position.toString() 53702 }, 53703 type: a < 1 ? 'rgba' : 'rgb', 53704 value: a < 1 ? [r, g, b, a] : [r, g, b] 53705 }; 53706 }) 53707 }; 53708 } 53709 function getStopCssColor(colorStop) { 53710 switch (colorStop.type) { 53711 case 'hex': 53712 return `#$colorStop.value}`; 53713 53714 case 'literal': 53715 return colorStop.value; 53716 53717 case 'rgb': 53718 case 'rgba': 53719 return `$colorStop.type}($colorStop.value.join(',')})`; 53720 53721 default: 53722 // Should be unreachable if passing an AST from gradient-parser. 53723 // See https://github.com/rafaelcaricio/gradient-parser#ast. 53724 return 'transparent'; 53725 } 53726 } 53727 53728 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/custom-gradient-picker/styles/custom-gradient-picker-styles.js 53729 53730 53731 function custom_gradient_picker_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } 53732 53733 /** 53734 * External dependencies 53735 */ 53736 53737 /** 53738 * Internal dependencies 53739 */ 53740 53741 const SelectWrapper = /*#__PURE__*/emotion_styled_base_browser_esm(flex_block_component, true ? { 53742 target: "e99xvul1" 53743 } : 0)( true ? { 53744 name: "1gvx10y", 53745 styles: "flex-grow:5" 53746 } : 0); 53747 const AccessoryWrapper = /*#__PURE__*/emotion_styled_base_browser_esm(flex_block_component, true ? { 53748 target: "e99xvul0" 53749 } : 0)( true ? { 53750 name: "1gvx10y", 53751 styles: "flex-grow:5" 53752 } : 0); 53753 53754 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/custom-gradient-picker/index.js 53755 53756 53757 /** 53758 * External dependencies 53759 */ 53760 53761 /** 53762 * WordPress dependencies 53763 */ 53764 53765 53766 /** 53767 * Internal dependencies 53768 */ 53769 53770 53771 53772 53773 53774 53775 53776 53777 53778 53779 const GradientAnglePicker = _ref => { 53780 let { 53781 gradientAST, 53782 hasGradient, 53783 onChange 53784 } = _ref; 53785 const angle = (0,external_lodash_namespaceObject.get)(gradientAST, ['orientation', 'value'], DEFAULT_LINEAR_GRADIENT_ANGLE); 53786 53787 const onAngleChange = newAngle => { 53788 onChange(serializeGradient({ ...gradientAST, 53789 orientation: { 53790 type: 'angular', 53791 value: newAngle 53792 } 53793 })); 53794 }; 53795 53796 return (0,external_wp_element_namespaceObject.createElement)(AnglePickerControl, { 53797 onChange: onAngleChange, 53798 labelPosition: "top", 53799 value: hasGradient ? angle : '' 53800 }); 53801 }; 53802 53803 const GradientTypePicker = _ref2 => { 53804 let { 53805 gradientAST, 53806 hasGradient, 53807 onChange 53808 } = _ref2; 53809 const { 53810 type 53811 } = gradientAST; 53812 53813 const onSetLinearGradient = () => { 53814 onChange(serializeGradient({ ...gradientAST, 53815 ...(gradientAST.orientation ? {} : { 53816 orientation: HORIZONTAL_GRADIENT_ORIENTATION 53817 }), 53818 type: 'linear-gradient' 53819 })); 53820 }; 53821 53822 const onSetRadialGradient = () => { 53823 onChange(serializeGradient({ ...(0,external_lodash_namespaceObject.omit)(gradientAST, ['orientation']), 53824 type: 'radial-gradient' 53825 })); 53826 }; 53827 53828 const handleOnChange = next => { 53829 if (next === 'linear-gradient') { 53830 onSetLinearGradient(); 53831 } 53832 53833 if (next === 'radial-gradient') { 53834 onSetRadialGradient(); 53835 } 53836 }; 53837 53838 return (0,external_wp_element_namespaceObject.createElement)(select_control, { 53839 className: "components-custom-gradient-picker__type-picker", 53840 label: (0,external_wp_i18n_namespaceObject.__)('Type'), 53841 labelPosition: "top", 53842 onChange: handleOnChange, 53843 options: GRADIENT_OPTIONS, 53844 size: "__unstable-large", 53845 value: hasGradient && type 53846 }); 53847 }; 53848 53849 function CustomGradientPicker(_ref3) { 53850 let { 53851 value, 53852 onChange, 53853 __experimentalIsRenderedInSidebar 53854 } = _ref3; 53855 const gradientAST = getGradientAstWithDefault(value); // On radial gradients the bar should display a linear gradient. 53856 // On radial gradients the bar represents a slice of the gradient from the center until the outside. 53857 // On liner gradients the bar represents the color stops from left to right independently of the angle. 53858 53859 const background = getLinearGradientRepresentation(gradientAST); 53860 const hasGradient = gradientAST.value !== DEFAULT_GRADIENT; // Control points color option may be hex from presets, custom colors will be rgb. 53861 // The position should always be a percentage. 53862 53863 const controlPoints = gradientAST.colorStops.map(colorStop => ({ 53864 color: getStopCssColor(colorStop), 53865 position: parseInt(colorStop.length.value) 53866 })); 53867 return (0,external_wp_element_namespaceObject.createElement)("div", { 53868 className: "components-custom-gradient-picker" 53869 }, (0,external_wp_element_namespaceObject.createElement)(CustomGradientBar, { 53870 __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar, 53871 background: background, 53872 hasGradient: hasGradient, 53873 value: controlPoints, 53874 onChange: newControlPoints => { 53875 onChange(serializeGradient(getGradientAstWithControlPoints(gradientAST, newControlPoints))); 53876 } 53877 }), (0,external_wp_element_namespaceObject.createElement)(flex_component, { 53878 gap: 3, 53879 className: "components-custom-gradient-picker__ui-line" 53880 }, (0,external_wp_element_namespaceObject.createElement)(SelectWrapper, null, (0,external_wp_element_namespaceObject.createElement)(GradientTypePicker, { 53881 gradientAST: gradientAST, 53882 hasGradient: hasGradient, 53883 onChange: onChange 53884 })), (0,external_wp_element_namespaceObject.createElement)(AccessoryWrapper, null, gradientAST.type === 'linear-gradient' && (0,external_wp_element_namespaceObject.createElement)(GradientAnglePicker, { 53885 gradientAST: gradientAST, 53886 hasGradient: hasGradient, 53887 onChange: onChange 53888 })))); 53889 } 53890 53891 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/gradient-picker/index.js 53892 53893 53894 53895 /** 53896 * External dependencies 53897 */ 53898 53899 /** 53900 * WordPress dependencies 53901 */ 53902 53903 53904 53905 /** 53906 * Internal dependencies 53907 */ 53908 53909 53910 53911 53912 53913 53914 function SingleOrigin(_ref) { 53915 let { 53916 className, 53917 clearGradient, 53918 gradients, 53919 onChange, 53920 value, 53921 actions, 53922 content 53923 } = _ref; 53924 const gradientOptions = (0,external_wp_element_namespaceObject.useMemo)(() => { 53925 return (0,external_lodash_namespaceObject.map)(gradients, _ref2 => { 53926 let { 53927 gradient, 53928 name 53929 } = _ref2; 53930 return (0,external_wp_element_namespaceObject.createElement)(CircularOptionPicker.Option, { 53931 key: gradient, 53932 value: gradient, 53933 isSelected: value === gradient, 53934 tooltipText: name || // translators: %s: gradient code e.g: "linear-gradient(90deg, rgba(98,16,153,1) 0%, rgba(172,110,22,1) 100%);". 53935 (0,external_wp_i18n_namespaceObject.sprintf)((0,external_wp_i18n_namespaceObject.__)('Gradient code: %s'), gradient), 53936 style: { 53937 color: 'rgba( 0,0,0,0 )', 53938 background: gradient 53939 }, 53940 onClick: value === gradient ? clearGradient : () => onChange(gradient), 53941 "aria-label": name ? // translators: %s: The name of the gradient e.g: "Angular red to blue". 53942 (0,external_wp_i18n_namespaceObject.sprintf)((0,external_wp_i18n_namespaceObject.__)('Gradient: %s'), name) : // translators: %s: gradient code e.g: "linear-gradient(90deg, rgba(98,16,153,1) 0%, rgba(172,110,22,1) 100%);". 53943 (0,external_wp_i18n_namespaceObject.sprintf)((0,external_wp_i18n_namespaceObject.__)('Gradient code: %s'), gradient) 53944 }); 53945 }); 53946 }, [gradients, value, onChange, clearGradient]); 53947 return (0,external_wp_element_namespaceObject.createElement)(CircularOptionPicker, { 53948 className: className, 53949 options: gradientOptions, 53950 actions: actions 53951 }, content); 53952 } 53953 53954 function MultipleOrigin(_ref3) { 53955 let { 53956 className, 53957 clearGradient, 53958 gradients, 53959 onChange, 53960 value, 53961 actions, 53962 content 53963 } = _ref3; 53964 return (0,external_wp_element_namespaceObject.createElement)(v_stack_component, { 53965 spacing: 3, 53966 className: className 53967 }, gradients.map((_ref4, index) => { 53968 let { 53969 name, 53970 gradients: gradientSet 53971 } = _ref4; 53972 return (0,external_wp_element_namespaceObject.createElement)(v_stack_component, { 53973 spacing: 2, 53974 key: index 53975 }, (0,external_wp_element_namespaceObject.createElement)(ColorHeading, null, name), (0,external_wp_element_namespaceObject.createElement)(SingleOrigin, extends_extends({ 53976 clearGradient: clearGradient, 53977 gradients: gradientSet, 53978 onChange: onChange, 53979 value: value 53980 }, gradients.length === index + 1 ? { 53981 actions, 53982 content 53983 } : {}))); 53984 })); 53985 } 53986 53987 function GradientPicker(_ref5) { 53988 let { 53989 className, 53990 gradients, 53991 onChange, 53992 value, 53993 clearable = true, 53994 disableCustomGradients = false, 53995 __experimentalHasMultipleOrigins, 53996 __experimentalIsRenderedInSidebar 53997 } = _ref5; 53998 const clearGradient = (0,external_wp_element_namespaceObject.useCallback)(() => onChange(undefined), [onChange]); 53999 const Component = __experimentalHasMultipleOrigins && gradients !== null && gradients !== void 0 && gradients.length ? MultipleOrigin : SingleOrigin; 54000 return (0,external_wp_element_namespaceObject.createElement)(Component, { 54001 className: className, 54002 clearable: clearable, 54003 clearGradient: clearGradient, 54004 gradients: gradients, 54005 onChange: onChange, 54006 value: value, 54007 actions: clearable && ((gradients === null || gradients === void 0 ? void 0 : gradients.length) || !disableCustomGradients) && (0,external_wp_element_namespaceObject.createElement)(CircularOptionPicker.ButtonAction, { 54008 onClick: clearGradient 54009 }, (0,external_wp_i18n_namespaceObject.__)('Clear')), 54010 content: !disableCustomGradients && (0,external_wp_element_namespaceObject.createElement)(CustomGradientPicker, { 54011 __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar, 54012 value: value, 54013 onChange: onChange 54014 }) 54015 }); 54016 } 54017 54018 ;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/menu.js 54019 54020 54021 /** 54022 * WordPress dependencies 54023 */ 54024 54025 const menu = (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.SVG, { 54026 xmlns: "http://www.w3.org/2000/svg", 54027 viewBox: "0 0 24 24" 54028 }, (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.Path, { 54029 d: "M5 5v1.5h14V5H5zm0 7.8h14v-1.5H5v1.5zM5 19h14v-1.5H5V19z" 54030 })); 54031 /* harmony default export */ var library_menu = (menu); 54032 54033 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/navigable-container/container.js 54034 54035 54036 // @ts-nocheck 54037 54038 /** 54039 * External dependencies 54040 */ 54041 54042 /** 54043 * WordPress dependencies 54044 */ 54045 54046 54047 54048 const MENU_ITEM_ROLES = ['menuitem', 'menuitemradio', 'menuitemcheckbox']; 54049 54050 function cycleValue(value, total, offset) { 54051 const nextValue = value + offset; 54052 54053 if (nextValue < 0) { 54054 return total + nextValue; 54055 } else if (nextValue >= total) { 54056 return nextValue - total; 54057 } 54058 54059 return nextValue; 54060 } 54061 54062 class NavigableContainer extends external_wp_element_namespaceObject.Component { 54063 constructor() { 54064 super(...arguments); 54065 this.onKeyDown = this.onKeyDown.bind(this); 54066 this.bindContainer = this.bindContainer.bind(this); 54067 this.getFocusableContext = this.getFocusableContext.bind(this); 54068 this.getFocusableIndex = this.getFocusableIndex.bind(this); 54069 } 54070 54071 componentDidMount() { 54072 // We use DOM event listeners instead of React event listeners 54073 // because we want to catch events from the underlying DOM tree 54074 // The React Tree can be different from the DOM tree when using 54075 // portals. Block Toolbars for instance are rendered in a separate 54076 // React Trees. 54077 this.container.addEventListener('keydown', this.onKeyDown); 54078 this.container.addEventListener('focus', this.onFocus); 54079 } 54080 54081 componentWillUnmount() { 54082 this.container.removeEventListener('keydown', this.onKeyDown); 54083 this.container.removeEventListener('focus', this.onFocus); 54084 } 54085 54086 bindContainer(ref) { 54087 const { 54088 forwardedRef 54089 } = this.props; 54090 this.container = ref; 54091 54092 if ((0,external_lodash_namespaceObject.isFunction)(forwardedRef)) { 54093 forwardedRef(ref); 54094 } else if (forwardedRef && 'current' in forwardedRef) { 54095 forwardedRef.current = ref; 54096 } 54097 } 54098 54099 getFocusableContext(target) { 54100 const { 54101 onlyBrowserTabstops 54102 } = this.props; 54103 const finder = onlyBrowserTabstops ? external_wp_dom_namespaceObject.focus.tabbable : external_wp_dom_namespaceObject.focus.focusable; 54104 const focusables = finder.find(this.container); 54105 const index = this.getFocusableIndex(focusables, target); 54106 54107 if (index > -1 && target) { 54108 return { 54109 index, 54110 target, 54111 focusables 54112 }; 54113 } 54114 54115 return null; 54116 } 54117 54118 getFocusableIndex(focusables, target) { 54119 const directIndex = focusables.indexOf(target); 54120 54121 if (directIndex !== -1) { 54122 return directIndex; 54123 } 54124 } 54125 54126 onKeyDown(event) { 54127 if (this.props.onKeyDown) { 54128 this.props.onKeyDown(event); 54129 } 54130 54131 const { 54132 getFocusableContext 54133 } = this; 54134 const { 54135 cycle = true, 54136 eventToOffset, 54137 onNavigate = external_lodash_namespaceObject.noop, 54138 stopNavigationEvents 54139 } = this.props; 54140 const offset = eventToOffset(event); // eventToOffset returns undefined if the event is not handled by the component. 54141 54142 if (offset !== undefined && stopNavigationEvents) { 54143 // Prevents arrow key handlers bound to the document directly interfering. 54144 event.stopImmediatePropagation(); // When navigating a collection of items, prevent scroll containers 54145 // from scrolling. The preventDefault also prevents Voiceover from 54146 // 'handling' the event, as voiceover will try to use arrow keys 54147 // for highlighting text. 54148 54149 const targetRole = event.target.getAttribute('role'); 54150 54151 if (MENU_ITEM_ROLES.includes(targetRole)) { 54152 event.preventDefault(); 54153 } 54154 } 54155 54156 if (!offset) { 54157 return; 54158 } 54159 54160 const context = getFocusableContext(event.target.ownerDocument.activeElement); 54161 54162 if (!context) { 54163 return; 54164 } 54165 54166 const { 54167 index, 54168 focusables 54169 } = context; 54170 const nextIndex = cycle ? cycleValue(index, focusables.length, offset) : index + offset; 54171 54172 if (nextIndex >= 0 && nextIndex < focusables.length) { 54173 focusables[nextIndex].focus(); 54174 onNavigate(nextIndex, focusables[nextIndex]); 54175 } 54176 } 54177 54178 render() { 54179 const { 54180 children, 54181 ...props 54182 } = this.props; 54183 return (0,external_wp_element_namespaceObject.createElement)("div", extends_extends({ 54184 ref: this.bindContainer 54185 }, (0,external_lodash_namespaceObject.omit)(props, ['stopNavigationEvents', 'eventToOffset', 'onNavigate', 'onKeyDown', 'cycle', 'onlyBrowserTabstops', 'forwardedRef'])), children); 54186 } 54187 54188 } 54189 54190 const forwardedNavigableContainer = (props, ref) => { 54191 return (0,external_wp_element_namespaceObject.createElement)(NavigableContainer, extends_extends({}, props, { 54192 forwardedRef: ref 54193 })); 54194 }; 54195 54196 forwardedNavigableContainer.displayName = 'NavigableContainer'; 54197 /* harmony default export */ var container = ((0,external_wp_element_namespaceObject.forwardRef)(forwardedNavigableContainer)); 54198 54199 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/navigable-container/menu.js 54200 54201 54202 // @ts-nocheck 54203 54204 /** 54205 * External dependencies 54206 */ 54207 54208 /** 54209 * WordPress dependencies 54210 */ 54211 54212 54213 54214 /** 54215 * Internal dependencies 54216 */ 54217 54218 54219 function NavigableMenu(_ref, ref) { 54220 let { 54221 role = 'menu', 54222 orientation = 'vertical', 54223 ...rest 54224 } = _ref; 54225 54226 const eventToOffset = evt => { 54227 const { 54228 keyCode 54229 } = evt; 54230 let next = [external_wp_keycodes_namespaceObject.DOWN]; 54231 let previous = [external_wp_keycodes_namespaceObject.UP]; 54232 54233 if (orientation === 'horizontal') { 54234 next = [external_wp_keycodes_namespaceObject.RIGHT]; 54235 previous = [external_wp_keycodes_namespaceObject.LEFT]; 54236 } 54237 54238 if (orientation === 'both') { 54239 next = [external_wp_keycodes_namespaceObject.RIGHT, external_wp_keycodes_namespaceObject.DOWN]; 54240 previous = [external_wp_keycodes_namespaceObject.LEFT, external_wp_keycodes_namespaceObject.UP]; 54241 } 54242 54243 if ((0,external_lodash_namespaceObject.includes)(next, keyCode)) { 54244 return 1; 54245 } else if ((0,external_lodash_namespaceObject.includes)(previous, keyCode)) { 54246 return -1; 54247 } else if ((0,external_lodash_namespaceObject.includes)([external_wp_keycodes_namespaceObject.DOWN, external_wp_keycodes_namespaceObject.UP, external_wp_keycodes_namespaceObject.LEFT, external_wp_keycodes_namespaceObject.RIGHT], keyCode)) { 54248 // Key press should be handled, e.g. have event propagation and 54249 // default behavior handled by NavigableContainer but not result 54250 // in an offset. 54251 return 0; 54252 } 54253 }; 54254 54255 return (0,external_wp_element_namespaceObject.createElement)(container, extends_extends({ 54256 ref: ref, 54257 stopNavigationEvents: true, 54258 onlyBrowserTabstops: false, 54259 role: role, 54260 "aria-orientation": role === 'presentation' ? null : orientation, 54261 eventToOffset: eventToOffset 54262 }, rest)); 54263 } 54264 /* harmony default export */ var navigable_container_menu = ((0,external_wp_element_namespaceObject.forwardRef)(NavigableMenu)); 54265 54266 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/dropdown-menu/index.js 54267 54268 54269 // @ts-nocheck 54270 54271 /** 54272 * External dependencies 54273 */ 54274 54275 54276 /** 54277 * WordPress dependencies 54278 */ 54279 54280 54281 54282 /** 54283 * Internal dependencies 54284 */ 54285 54286 54287 54288 54289 54290 function mergeProps() { 54291 let defaultProps = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; 54292 let props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; 54293 const mergedProps = { ...defaultProps, 54294 ...props 54295 }; 54296 54297 if (props.className && defaultProps.className) { 54298 mergedProps.className = classnames_default()(props.className, defaultProps.className); 54299 } 54300 54301 return mergedProps; 54302 } 54303 54304 function DropdownMenu(dropdownMenuProps) { 54305 const { 54306 children, 54307 className, 54308 controls, 54309 icon = library_menu, 54310 label, 54311 popoverProps, 54312 toggleProps, 54313 menuProps, 54314 disableOpenOnArrowDown = false, 54315 text, 54316 noIcons 54317 } = dropdownMenuProps; 54318 54319 if ((0,external_lodash_namespaceObject.isEmpty)(controls) && !(0,external_lodash_namespaceObject.isFunction)(children)) { 54320 return null; 54321 } // Normalize controls to nested array of objects (sets of controls) 54322 54323 54324 let controlSets; 54325 54326 if (!(0,external_lodash_namespaceObject.isEmpty)(controls)) { 54327 controlSets = controls; 54328 54329 if (!Array.isArray(controlSets[0])) { 54330 controlSets = [controlSets]; 54331 } 54332 } 54333 54334 const mergedPopoverProps = mergeProps({ 54335 className: 'components-dropdown-menu__popover' 54336 }, popoverProps); 54337 return (0,external_wp_element_namespaceObject.createElement)(Dropdown, { 54338 className: classnames_default()('components-dropdown-menu', className), 54339 popoverProps: mergedPopoverProps, 54340 renderToggle: _ref => { 54341 var _toggleProps$showTool; 54342 54343 let { 54344 isOpen, 54345 onToggle 54346 } = _ref; 54347 54348 const openOnArrowDown = event => { 54349 if (disableOpenOnArrowDown) { 54350 return; 54351 } 54352 54353 if (!isOpen && event.keyCode === external_wp_keycodes_namespaceObject.DOWN) { 54354 event.preventDefault(); 54355 onToggle(); 54356 } 54357 }; 54358 54359 const mergedToggleProps = mergeProps({ 54360 className: classnames_default()('components-dropdown-menu__toggle', { 54361 'is-opened': isOpen 54362 }) 54363 }, toggleProps); 54364 return (0,external_wp_element_namespaceObject.createElement)(build_module_button, extends_extends({}, mergedToggleProps, { 54365 icon: icon, 54366 onClick: event => { 54367 onToggle(event); 54368 54369 if (mergedToggleProps.onClick) { 54370 mergedToggleProps.onClick(event); 54371 } 54372 }, 54373 onKeyDown: event => { 54374 openOnArrowDown(event); 54375 54376 if (mergedToggleProps.onKeyDown) { 54377 mergedToggleProps.onKeyDown(event); 54378 } 54379 }, 54380 "aria-haspopup": "true", 54381 "aria-expanded": isOpen, 54382 label: label, 54383 text: text, 54384 showTooltip: (_toggleProps$showTool = toggleProps === null || toggleProps === void 0 ? void 0 : toggleProps.showTooltip) !== null && _toggleProps$showTool !== void 0 ? _toggleProps$showTool : true 54385 }), mergedToggleProps.children); 54386 }, 54387 renderContent: props => { 54388 const mergedMenuProps = mergeProps({ 54389 'aria-label': label, 54390 className: classnames_default()('components-dropdown-menu__menu', { 54391 'no-icons': noIcons 54392 }) 54393 }, menuProps); 54394 return (0,external_wp_element_namespaceObject.createElement)(navigable_container_menu, extends_extends({}, mergedMenuProps, { 54395 role: "menu" 54396 }), (0,external_lodash_namespaceObject.isFunction)(children) ? children(props) : null, (0,external_lodash_namespaceObject.flatMap)(controlSets, (controlSet, indexOfSet) => controlSet.map((control, indexOfControl) => (0,external_wp_element_namespaceObject.createElement)(build_module_button, { 54397 key: [indexOfSet, indexOfControl].join(), 54398 onClick: event => { 54399 event.stopPropagation(); 54400 props.onClose(); 54401 54402 if (control.onClick) { 54403 control.onClick(); 54404 } 54405 }, 54406 className: classnames_default()('components-dropdown-menu__menu-item', { 54407 'has-separator': indexOfSet > 0 && indexOfControl === 0, 54408 'is-active': control.isActive, 54409 'is-icon-only': !control.title 54410 }), 54411 icon: control.icon, 54412 label: control.label, 54413 "aria-checked": control.role === 'menuitemcheckbox' || control.role === 'menuitemradio' ? control.isActive : undefined, 54414 role: control.role === 'menuitemcheckbox' || control.role === 'menuitemradio' ? control.role : 'menuitem', 54415 disabled: control.isDisabled 54416 }, control.title)))); 54417 } 54418 }); 54419 } 54420 54421 /* harmony default export */ var dropdown_menu = (DropdownMenu); 54422 54423 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/palette-edit/styles.js 54424 54425 54426 function palette_edit_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } 54427 54428 /** 54429 * External dependencies 54430 */ 54431 54432 /** 54433 * Internal dependencies 54434 */ 54435 54436 54437 54438 54439 54440 54441 54442 54443 54444 const IndicatorStyled = /*#__PURE__*/emotion_styled_base_browser_esm(CircularOptionPicker.Option, true ? { 54445 target: "e5bw3229" 54446 } : 0)("width:", space(6), ";height:", space(6), ";pointer-events:none;" + ( true ? "" : 0)); 54447 const NameInputControl = /*#__PURE__*/emotion_styled_base_browser_esm(input_control, true ? { 54448 target: "e5bw3228" 54449 } : 0)(Container, "{background:", COLORS.gray[100], ";border-radius:", config_values.controlBorderRadius, ";}", Input, Input, Input, Input, "{height:", space(8), ";}", BackdropUI, BackdropUI, BackdropUI, "{border-color:transparent;box-shadow:none;}" + ( true ? "" : 0)); 54450 const PaletteItem = /*#__PURE__*/emotion_styled_base_browser_esm(component, true ? { 54451 target: "e5bw3227" 54452 } : 0)("padding:3px 0 3px ", space(3), ";height:calc( 40px - ", config_values.borderWidth, " );border:1px solid ", config_values.surfaceBorderColor, ";border-bottom-color:transparent;&:first-of-type{border-top-left-radius:", config_values.controlBorderRadius, ";border-top-right-radius:", config_values.controlBorderRadius, ";}&:last-of-type{border-bottom-left-radius:", config_values.controlBorderRadius, ";border-bottom-right-radius:", config_values.controlBorderRadius, ";border-bottom-color:", config_values.surfaceBorderColor, ";}&.is-selected+&{border-top-color:transparent;}&.is-selected{border-color:", COLORS.blue.wordpress[700], ";}" + ( true ? "" : 0)); 54453 const NameContainer = emotion_styled_base_browser_esm("div", true ? { 54454 target: "e5bw3226" 54455 } : 0)("line-height:", space(8), ";margin-left:", space(2), ";margin-right:", space(2), ";white-space:nowrap;overflow:hidden;", PaletteItem, ":hover &{color:var( --wp-admin-theme-color, ", COLORS.blue.wordpress[700], " );}" + ( true ? "" : 0)); 54456 const PaletteHeading = /*#__PURE__*/emotion_styled_base_browser_esm(heading_component, true ? { 54457 target: "e5bw3225" 54458 } : 0)("text-transform:uppercase;line-height:", space(6), ";font-weight:500;&&&{font-size:11px;margin-bottom:0;}" + ( true ? "" : 0)); 54459 const PaletteActionsContainer = /*#__PURE__*/emotion_styled_base_browser_esm(component, true ? { 54460 target: "e5bw3224" 54461 } : 0)("height:", space(6), ";display:flex;" + ( true ? "" : 0)); 54462 const PaletteHStackHeader = /*#__PURE__*/emotion_styled_base_browser_esm(h_stack_component, true ? { 54463 target: "e5bw3223" 54464 } : 0)("margin-bottom:", space(2), ";" + ( true ? "" : 0)); 54465 const PaletteEditStyles = /*#__PURE__*/emotion_styled_base_browser_esm(component, true ? { 54466 target: "e5bw3222" 54467 } : 0)( true ? { 54468 name: "u6wnko", 54469 styles: "&&&{.components-button.has-icon{min-width:0;padding:0;}}" 54470 } : 0); 54471 const DoneButton = /*#__PURE__*/emotion_styled_base_browser_esm(build_module_button, true ? { 54472 target: "e5bw3221" 54473 } : 0)("&&{color:", COLORS.ui.theme, ";}" + ( true ? "" : 0)); 54474 const RemoveButton = /*#__PURE__*/emotion_styled_base_browser_esm(build_module_button, true ? { 54475 target: "e5bw3220" 54476 } : 0)("&&{margin-top:", space(1), ";}" + ( true ? "" : 0)); 54477 54478 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/palette-edit/index.js 54479 54480 54481 54482 /** 54483 * External dependencies 54484 */ 54485 54486 /** 54487 * WordPress dependencies 54488 */ 54489 54490 54491 54492 54493 54494 /** 54495 * Internal dependencies 54496 */ 54497 54498 54499 54500 54501 54502 54503 54504 54505 54506 54507 54508 54509 54510 54511 54512 const DEFAULT_COLOR = '#000'; 54513 54514 function NameInput(_ref) { 54515 let { 54516 value, 54517 onChange, 54518 label 54519 } = _ref; 54520 return (0,external_wp_element_namespaceObject.createElement)(NameInputControl, { 54521 label: label, 54522 hideLabelFromVision: true, 54523 value: value, 54524 onChange: onChange 54525 }); 54526 } 54527 54528 function getNameForPosition(position) { 54529 return (0,external_wp_i18n_namespaceObject.sprintf)( 54530 /* translators: %s: is a temporary id for a custom color */ 54531 (0,external_wp_i18n_namespaceObject.__)('Color %s '), position + 1); 54532 } 54533 54534 function palette_edit_Option(_ref2) { 54535 let { 54536 canOnlyChangeValues, 54537 element, 54538 onChange, 54539 isEditing, 54540 onStartEditing, 54541 onRemove, 54542 onStopEditing, 54543 slugPrefix, 54544 isGradient 54545 } = _ref2; 54546 const focusOutsideProps = (0,external_wp_compose_namespaceObject.__experimentalUseFocusOutside)(onStopEditing); 54547 const value = isGradient ? element.gradient : element.color; 54548 return (0,external_wp_element_namespaceObject.createElement)(PaletteItem, extends_extends({ 54549 className: isEditing ? 'is-selected' : undefined, 54550 as: "div", 54551 onClick: onStartEditing 54552 }, isEditing ? { ...focusOutsideProps 54553 } : { 54554 style: { 54555 cursor: 'pointer' 54556 } 54557 }), (0,external_wp_element_namespaceObject.createElement)(h_stack_component, { 54558 justify: "flex-start" 54559 }, (0,external_wp_element_namespaceObject.createElement)(flex_item_component, null, (0,external_wp_element_namespaceObject.createElement)(IndicatorStyled, { 54560 style: { 54561 background: value, 54562 color: 'transparent' 54563 } 54564 })), (0,external_wp_element_namespaceObject.createElement)(flex_item_component, null, isEditing && !canOnlyChangeValues ? (0,external_wp_element_namespaceObject.createElement)(NameInput, { 54565 label: isGradient ? (0,external_wp_i18n_namespaceObject.__)('Gradient name') : (0,external_wp_i18n_namespaceObject.__)('Color name'), 54566 value: element.name, 54567 onChange: nextName => onChange({ ...element, 54568 name: nextName, 54569 slug: slugPrefix + (0,external_lodash_namespaceObject.kebabCase)(nextName) 54570 }) 54571 }) : (0,external_wp_element_namespaceObject.createElement)(NameContainer, null, element.name)), isEditing && !canOnlyChangeValues && (0,external_wp_element_namespaceObject.createElement)(flex_item_component, null, (0,external_wp_element_namespaceObject.createElement)(RemoveButton, { 54572 isSmall: true, 54573 icon: line_solid, 54574 label: (0,external_wp_i18n_namespaceObject.__)('Remove color'), 54575 onClick: onRemove 54576 }))), isEditing && (0,external_wp_element_namespaceObject.createElement)(popover, { 54577 position: "bottom left", 54578 className: "components-palette-edit__popover" 54579 }, !isGradient && (0,external_wp_element_namespaceObject.createElement)(LegacyAdapter, { 54580 color: value, 54581 onChange: newColor => onChange({ ...element, 54582 color: newColor 54583 }) 54584 }), isGradient && (0,external_wp_element_namespaceObject.createElement)(CustomGradientPicker, { 54585 __experimentalIsRenderedInSidebar: true, 54586 value: value, 54587 onChange: newGradient => onChange({ ...element, 54588 gradient: newGradient 54589 }) 54590 }))); 54591 } 54592 54593 function isTemporaryElement(slugPrefix, _ref3, index) { 54594 let { 54595 slug, 54596 color, 54597 gradient 54598 } = _ref3; 54599 return slug === slugPrefix + (0,external_lodash_namespaceObject.kebabCase)(getNameForPosition(index)) && (!!color && color === DEFAULT_COLOR || !!gradient && gradient === DEFAULT_GRADIENT); 54600 } 54601 54602 function PaletteEditListView(_ref4) { 54603 let { 54604 elements, 54605 onChange, 54606 editingElement, 54607 setEditingElement, 54608 canOnlyChangeValues, 54609 slugPrefix, 54610 isGradient 54611 } = _ref4; 54612 // When unmounting the component if there are empty elements (the user did not complete the insertion) clean them. 54613 const elementsReference = (0,external_wp_element_namespaceObject.useRef)(); 54614 (0,external_wp_element_namespaceObject.useEffect)(() => { 54615 elementsReference.current = elements; 54616 }, [elements]); 54617 (0,external_wp_element_namespaceObject.useEffect)(() => { 54618 return () => { 54619 if (elementsReference.current.some((element, index) => isTemporaryElement(slugPrefix, element, index))) { 54620 const newElements = elementsReference.current.filter((element, index) => !isTemporaryElement(slugPrefix, element, index)); 54621 onChange(newElements.length ? newElements : undefined); 54622 } 54623 }; 54624 }, []); 54625 const debounceOnChange = (0,external_wp_compose_namespaceObject.useDebounce)(onChange, 100); 54626 return (0,external_wp_element_namespaceObject.createElement)(v_stack_component, { 54627 spacing: 3 54628 }, (0,external_wp_element_namespaceObject.createElement)(item_group_component, { 54629 isRounded: true 54630 }, elements.map((element, index) => (0,external_wp_element_namespaceObject.createElement)(palette_edit_Option, { 54631 isGradient: isGradient, 54632 canOnlyChangeValues: canOnlyChangeValues, 54633 key: index, 54634 element: element, 54635 onStartEditing: () => { 54636 if (editingElement !== index) { 54637 setEditingElement(index); 54638 } 54639 }, 54640 onChange: newElement => { 54641 debounceOnChange(elements.map((currentElement, currentIndex) => { 54642 if (currentIndex === index) { 54643 return newElement; 54644 } 54645 54646 return currentElement; 54647 })); 54648 }, 54649 onRemove: () => { 54650 setEditingElement(null); 54651 const newElements = elements.filter((_currentElement, currentIndex) => { 54652 if (currentIndex === index) { 54653 return false; 54654 } 54655 54656 return true; 54657 }); 54658 onChange(newElements.length ? newElements : undefined); 54659 }, 54660 isEditing: index === editingElement, 54661 onStopEditing: () => { 54662 if (index === editingElement) { 54663 setEditingElement(null); 54664 } 54665 }, 54666 slugPrefix: slugPrefix 54667 })))); 54668 } 54669 54670 const EMPTY_ARRAY = []; 54671 function PaletteEdit(_ref5) { 54672 let { 54673 gradients, 54674 colors = EMPTY_ARRAY, 54675 onChange, 54676 paletteLabel, 54677 emptyMessage, 54678 canOnlyChangeValues, 54679 canReset, 54680 slugPrefix = '' 54681 } = _ref5; 54682 const isGradient = !!gradients; 54683 const elements = isGradient ? gradients : colors; 54684 const [isEditing, setIsEditing] = (0,external_wp_element_namespaceObject.useState)(false); 54685 const [editingElement, setEditingElement] = (0,external_wp_element_namespaceObject.useState)(null); 54686 const isAdding = isEditing && editingElement && elements[editingElement] && !elements[editingElement].slug; 54687 const elementsLength = elements.length; 54688 const hasElements = elementsLength > 0; 54689 return (0,external_wp_element_namespaceObject.createElement)(PaletteEditStyles, null, (0,external_wp_element_namespaceObject.createElement)(PaletteHStackHeader, null, (0,external_wp_element_namespaceObject.createElement)(PaletteHeading, null, paletteLabel), (0,external_wp_element_namespaceObject.createElement)(PaletteActionsContainer, null, isEditing && (0,external_wp_element_namespaceObject.createElement)(DoneButton, { 54690 isSmall: true, 54691 onClick: () => { 54692 setIsEditing(false); 54693 setEditingElement(null); 54694 } 54695 }, (0,external_wp_i18n_namespaceObject.__)('Done')), !canOnlyChangeValues && (0,external_wp_element_namespaceObject.createElement)(build_module_button, { 54696 isSmall: true, 54697 isPressed: isAdding, 54698 icon: library_plus, 54699 label: isGradient ? (0,external_wp_i18n_namespaceObject.__)('Add gradient') : (0,external_wp_i18n_namespaceObject.__)('Add color'), 54700 onClick: () => { 54701 const tempOptionName = getNameForPosition(elementsLength); 54702 onChange([...elements, { ...(isGradient ? { 54703 gradient: DEFAULT_GRADIENT 54704 } : { 54705 color: DEFAULT_COLOR 54706 }), 54707 name: tempOptionName, 54708 slug: slugPrefix + (0,external_lodash_namespaceObject.kebabCase)(tempOptionName) 54709 }]); 54710 setIsEditing(true); 54711 setEditingElement(elements.length); 54712 } 54713 }), hasElements && (!isEditing || !canOnlyChangeValues || canReset) && (0,external_wp_element_namespaceObject.createElement)(dropdown_menu, { 54714 icon: more_vertical, 54715 label: isGradient ? (0,external_wp_i18n_namespaceObject.__)('Gradient options') : (0,external_wp_i18n_namespaceObject.__)('Color options'), 54716 toggleProps: { 54717 isSmall: true 54718 } 54719 }, _ref6 => { 54720 let { 54721 onClose 54722 } = _ref6; 54723 return (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, (0,external_wp_element_namespaceObject.createElement)(navigable_container_menu, { 54724 role: "menu" 54725 }, !isEditing && (0,external_wp_element_namespaceObject.createElement)(build_module_button, { 54726 variant: "tertiary", 54727 onClick: () => { 54728 setIsEditing(true); 54729 onClose(); 54730 }, 54731 className: "components-palette-edit__menu-button" 54732 }, isGradient ? (0,external_wp_i18n_namespaceObject.__)('Edit gradients') : (0,external_wp_i18n_namespaceObject.__)('Edit colors')), !canOnlyChangeValues && (0,external_wp_element_namespaceObject.createElement)(build_module_button, { 54733 variant: "tertiary", 54734 onClick: () => { 54735 setEditingElement(null); 54736 setIsEditing(false); 54737 onChange(); 54738 onClose(); 54739 }, 54740 className: "components-palette-edit__menu-button" 54741 }, isGradient ? (0,external_wp_i18n_namespaceObject.__)('Remove all gradients') : (0,external_wp_i18n_namespaceObject.__)('Remove all colors')), canReset && (0,external_wp_element_namespaceObject.createElement)(build_module_button, { 54742 variant: "tertiary", 54743 onClick: () => { 54744 setEditingElement(null); 54745 onChange(); 54746 onClose(); 54747 } 54748 }, isGradient ? (0,external_wp_i18n_namespaceObject.__)('Reset gradient') : (0,external_wp_i18n_namespaceObject.__)('Reset colors')))); 54749 }))), hasElements && (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, isEditing && (0,external_wp_element_namespaceObject.createElement)(PaletteEditListView, { 54750 canOnlyChangeValues: canOnlyChangeValues, 54751 elements: elements, 54752 onChange: onChange, 54753 editingElement: editingElement, 54754 setEditingElement: setEditingElement, 54755 slugPrefix: slugPrefix, 54756 isGradient: isGradient 54757 }), !isEditing && (isGradient ? (0,external_wp_element_namespaceObject.createElement)(GradientPicker, { 54758 gradients: gradients, 54759 onChange: () => {}, 54760 clearable: false, 54761 disableCustomGradients: true 54762 }) : (0,external_wp_element_namespaceObject.createElement)(ColorPalette, { 54763 colors: colors, 54764 onChange: () => {}, 54765 clearable: false, 54766 disableCustomColors: true 54767 }))), !hasElements && emptyMessage); 54768 } 54769 54770 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/form-token-field/token-input.js 54771 54772 54773 54774 /** 54775 * External dependencies 54776 */ 54777 54778 /** 54779 * WordPress dependencies 54780 */ 54781 54782 54783 54784 class TokenInput extends external_wp_element_namespaceObject.Component { 54785 constructor() { 54786 super(...arguments); 54787 this.onChange = this.onChange.bind(this); 54788 this.bindInput = this.bindInput.bind(this); 54789 } 54790 54791 focus() { 54792 this.input.focus(); 54793 } 54794 54795 hasFocus() { 54796 return this.input === this.input.ownerDocument.activeElement; 54797 } 54798 54799 bindInput(ref) { 54800 this.input = ref; 54801 } 54802 54803 onChange(event) { 54804 this.props.onChange({ 54805 value: event.target.value 54806 }); 54807 } 54808 54809 render() { 54810 const { 54811 value, 54812 isExpanded, 54813 instanceId, 54814 selectedSuggestionIndex, 54815 className, 54816 onChange, 54817 ...props 54818 } = this.props; 54819 const size = value ? value.length + 1 : 0; 54820 return (0,external_wp_element_namespaceObject.createElement)("input", extends_extends({ 54821 ref: this.bindInput, 54822 id: `components-form-token-input-$instanceId}`, 54823 type: "text" 54824 }, props, { 54825 value: value || '', 54826 onChange: onChange ? this.onChange : undefined, 54827 size: size, 54828 className: classnames_default()(className, 'components-form-token-field__input'), 54829 autoComplete: "off", 54830 role: "combobox", 54831 "aria-expanded": isExpanded, 54832 "aria-autocomplete": "list", 54833 "aria-owns": isExpanded ? `components-form-token-suggestions-$instanceId}` : undefined, 54834 "aria-activedescendant": selectedSuggestionIndex !== -1 ? `components-form-token-suggestions-$instanceId}-$selectedSuggestionIndex}` : undefined, 54835 "aria-describedby": `components-form-token-suggestions-howto-$instanceId}` 54836 })); 54837 } 54838 54839 } 54840 54841 /* harmony default export */ var token_input = (TokenInput); 54842 54843 // EXTERNAL MODULE: ./node_modules/dom-scroll-into-view/lib/index.js 54844 var lib = __webpack_require__(5425); 54845 var lib_default = /*#__PURE__*/__webpack_require__.n(lib); 54846 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/form-token-field/suggestions-list.js 54847 54848 54849 /** 54850 * External dependencies 54851 */ 54852 54853 54854 54855 /** 54856 * WordPress dependencies 54857 */ 54858 54859 54860 54861 const emptyList = Object.freeze([]); 54862 54863 const handleMouseDown = e => { 54864 // By preventing default here, we will not lose focus of <input> when clicking a suggestion. 54865 e.preventDefault(); 54866 }; 54867 54868 function SuggestionsList(_ref) { 54869 let { 54870 selectedIndex, 54871 scrollIntoView, 54872 match = '', 54873 onHover, 54874 onSelect, 54875 suggestions = emptyList, 54876 displayTransform, 54877 instanceId, 54878 setTimeout 54879 } = _ref; 54880 const [scrollingIntoView, setScrollingIntoView] = (0,external_wp_element_namespaceObject.useState)(false); 54881 const listRef = (0,external_wp_compose_namespaceObject.useRefEffect)(listNode => { 54882 // only have to worry about scrolling selected suggestion into view 54883 // when already expanded. 54884 if (selectedIndex > -1 && scrollIntoView && listNode.children[selectedIndex]) { 54885 setScrollingIntoView(true); 54886 lib_default()(listNode.children[selectedIndex], listNode, { 54887 onlyScrollIfNeeded: true 54888 }); 54889 setTimeout(() => { 54890 setScrollingIntoView(false); 54891 }, 100); 54892 } 54893 }, [selectedIndex, scrollIntoView]); 54894 54895 const handleHover = suggestion => { 54896 return () => { 54897 if (!scrollingIntoView) { 54898 onHover === null || onHover === void 0 ? void 0 : onHover(suggestion); 54899 } 54900 }; 54901 }; 54902 54903 const handleClick = suggestion => { 54904 return () => { 54905 onSelect === null || onSelect === void 0 ? void 0 : onSelect(suggestion); 54906 }; 54907 }; 54908 54909 const computeSuggestionMatch = suggestion => { 54910 const matchText = displayTransform(match || '').toLocaleLowerCase(); 54911 54912 if (matchText.length === 0) { 54913 return null; 54914 } 54915 54916 suggestion = displayTransform(suggestion); 54917 const indexOfMatch = suggestion.toLocaleLowerCase().indexOf(matchText); 54918 return { 54919 suggestionBeforeMatch: suggestion.substring(0, indexOfMatch), 54920 suggestionMatch: suggestion.substring(indexOfMatch, indexOfMatch + matchText.length), 54921 suggestionAfterMatch: suggestion.substring(indexOfMatch + matchText.length) 54922 }; 54923 }; // We set `tabIndex` here because otherwise Firefox sets focus on this 54924 // div when tabbing off of the input in `TokenField` -- not really sure 54925 // why, since usually a div isn't focusable by default 54926 // TODO does this still apply now that it's a <ul> and not a <div>? 54927 54928 54929 return (0,external_wp_element_namespaceObject.createElement)("ul", { 54930 ref: listRef, 54931 className: "components-form-token-field__suggestions-list", 54932 id: `components-form-token-suggestions-$instanceId}`, 54933 role: "listbox" 54934 }, (0,external_lodash_namespaceObject.map)(suggestions, (suggestion, index) => { 54935 const matchText = computeSuggestionMatch(suggestion); 54936 const className = classnames_default()('components-form-token-field__suggestion', { 54937 'is-selected': index === selectedIndex 54938 }); 54939 /* eslint-disable jsx-a11y/click-events-have-key-events */ 54940 54941 return (0,external_wp_element_namespaceObject.createElement)("li", { 54942 id: `components-form-token-suggestions-$instanceId}-$index}`, 54943 role: "option", 54944 className: className, 54945 key: suggestion !== null && suggestion !== void 0 && suggestion.value ? suggestion.value : displayTransform(suggestion), 54946 onMouseDown: handleMouseDown, 54947 onClick: handleClick(suggestion), 54948 onMouseEnter: handleHover(suggestion), 54949 "aria-selected": index === selectedIndex 54950 }, matchText ? (0,external_wp_element_namespaceObject.createElement)("span", { 54951 "aria-label": displayTransform(suggestion) 54952 }, matchText.suggestionBeforeMatch, (0,external_wp_element_namespaceObject.createElement)("strong", { 54953 className: "components-form-token-field__suggestion-match" 54954 }, matchText.suggestionMatch), matchText.suggestionAfterMatch) : displayTransform(suggestion)); 54955 /* eslint-enable jsx-a11y/click-events-have-key-events */ 54956 })); 54957 } 54958 54959 /* harmony default export */ var suggestions_list = ((0,external_wp_compose_namespaceObject.withSafeTimeout)(SuggestionsList)); 54960 54961 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/higher-order/with-focus-outside/index.js 54962 54963 54964 //@ts-nocheck 54965 54966 /** 54967 * WordPress dependencies 54968 */ 54969 54970 54971 /* harmony default export */ var with_focus_outside = ((0,external_wp_compose_namespaceObject.createHigherOrderComponent)(WrappedComponent => props => { 54972 const [handleFocusOutside, setHandleFocusOutside] = (0,external_wp_element_namespaceObject.useState)(); 54973 const bindFocusOutsideHandler = (0,external_wp_element_namespaceObject.useCallback)(node => setHandleFocusOutside(() => node !== null && node !== void 0 && node.handleFocusOutside ? node.handleFocusOutside.bind(node) : undefined), []); 54974 return (0,external_wp_element_namespaceObject.createElement)("div", (0,external_wp_compose_namespaceObject.__experimentalUseFocusOutside)(handleFocusOutside), (0,external_wp_element_namespaceObject.createElement)(WrappedComponent, extends_extends({ 54975 ref: bindFocusOutsideHandler 54976 }, props))); 54977 }, 'withFocusOutside')); 54978 54979 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/combobox-control/index.js 54980 54981 54982 /** 54983 * External dependencies 54984 */ 54985 54986 54987 /** 54988 * WordPress dependencies 54989 */ 54990 54991 54992 54993 54994 54995 54996 54997 /** 54998 * Internal dependencies 54999 */ 55000 55001 55002 55003 55004 55005 55006 55007 const DetectOutside = with_focus_outside(class extends external_wp_element_namespaceObject.Component { 55008 handleFocusOutside(event) { 55009 this.props.onFocusOutside(event); 55010 } 55011 55012 render() { 55013 return this.props.children; 55014 } 55015 55016 }); 55017 55018 function ComboboxControl(_ref) { 55019 var _currentOption$label; 55020 55021 let { 55022 value, 55023 label, 55024 options, 55025 onChange, 55026 onFilterValueChange = external_lodash_namespaceObject.noop, 55027 hideLabelFromVision, 55028 help, 55029 allowReset = true, 55030 className, 55031 messages = { 55032 selected: (0,external_wp_i18n_namespaceObject.__)('Item selected.') 55033 } 55034 } = _ref; 55035 const currentOption = options.find(option => option.value === value); 55036 const currentLabel = (_currentOption$label = currentOption === null || currentOption === void 0 ? void 0 : currentOption.label) !== null && _currentOption$label !== void 0 ? _currentOption$label : ''; 55037 const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(ComboboxControl); 55038 const [selectedSuggestion, setSelectedSuggestion] = (0,external_wp_element_namespaceObject.useState)(currentOption || null); 55039 const [isExpanded, setIsExpanded] = (0,external_wp_element_namespaceObject.useState)(false); 55040 const [inputHasFocus, setInputHasFocus] = (0,external_wp_element_namespaceObject.useState)(false); 55041 const [inputValue, setInputValue] = (0,external_wp_element_namespaceObject.useState)(''); 55042 const inputContainer = (0,external_wp_element_namespaceObject.useRef)(); 55043 const matchingSuggestions = (0,external_wp_element_namespaceObject.useMemo)(() => { 55044 const startsWithMatch = []; 55045 const containsMatch = []; 55046 const match = (0,external_lodash_namespaceObject.deburr)(inputValue.toLocaleLowerCase()); 55047 options.forEach(option => { 55048 const index = (0,external_lodash_namespaceObject.deburr)(option.label).toLocaleLowerCase().indexOf(match); 55049 55050 if (index === 0) { 55051 startsWithMatch.push(option); 55052 } else if (index > 0) { 55053 containsMatch.push(option); 55054 } 55055 }); 55056 return startsWithMatch.concat(containsMatch); 55057 }, [inputValue, options, value]); 55058 55059 const onSuggestionSelected = newSelectedSuggestion => { 55060 onChange(newSelectedSuggestion.value); 55061 (0,external_wp_a11y_namespaceObject.speak)(messages.selected, 'assertive'); 55062 setSelectedSuggestion(newSelectedSuggestion); 55063 setInputValue(''); 55064 setIsExpanded(false); 55065 }; 55066 55067 const handleArrowNavigation = function () { 55068 let offset = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1; 55069 const index = matchingSuggestions.indexOf(selectedSuggestion); 55070 let nextIndex = index + offset; 55071 55072 if (nextIndex < 0) { 55073 nextIndex = matchingSuggestions.length - 1; 55074 } else if (nextIndex >= matchingSuggestions.length) { 55075 nextIndex = 0; 55076 } 55077 55078 setSelectedSuggestion(matchingSuggestions[nextIndex]); 55079 setIsExpanded(true); 55080 }; 55081 55082 const onKeyDown = event => { 55083 let preventDefault = false; 55084 55085 if (event.defaultPrevented) { 55086 return; 55087 } 55088 55089 switch (event.keyCode) { 55090 case external_wp_keycodes_namespaceObject.ENTER: 55091 if (selectedSuggestion) { 55092 onSuggestionSelected(selectedSuggestion); 55093 preventDefault = true; 55094 } 55095 55096 break; 55097 55098 case external_wp_keycodes_namespaceObject.UP: 55099 handleArrowNavigation(-1); 55100 preventDefault = true; 55101 break; 55102 55103 case external_wp_keycodes_namespaceObject.DOWN: 55104 handleArrowNavigation(1); 55105 preventDefault = true; 55106 break; 55107 55108 case external_wp_keycodes_namespaceObject.ESCAPE: 55109 setIsExpanded(false); 55110 setSelectedSuggestion(null); 55111 preventDefault = true; 55112 break; 55113 55114 default: 55115 break; 55116 } 55117 55118 if (preventDefault) { 55119 event.preventDefault(); 55120 } 55121 }; 55122 55123 const onBlur = () => { 55124 setInputHasFocus(false); 55125 }; 55126 55127 const onFocus = () => { 55128 setInputHasFocus(true); 55129 setIsExpanded(true); 55130 onFilterValueChange(''); 55131 setInputValue(''); 55132 }; 55133 55134 const onFocusOutside = () => { 55135 setIsExpanded(false); 55136 }; 55137 55138 const onInputChange = event => { 55139 const text = event.value; 55140 setInputValue(text); 55141 onFilterValueChange(text); 55142 55143 if (inputHasFocus) { 55144 setIsExpanded(true); 55145 } 55146 }; 55147 55148 const handleOnReset = () => { 55149 onChange(null); 55150 inputContainer.current.input.focus(); 55151 }; // Update current selections when the filter input changes. 55152 55153 55154 (0,external_wp_element_namespaceObject.useEffect)(() => { 55155 const hasMatchingSuggestions = matchingSuggestions.length > 0; 55156 const hasSelectedMatchingSuggestions = matchingSuggestions.indexOf(selectedSuggestion) > 0; 55157 55158 if (hasMatchingSuggestions && !hasSelectedMatchingSuggestions) { 55159 // If the current selection isn't present in the list of suggestions, then automatically select the first item from the list of suggestions. 55160 setSelectedSuggestion(matchingSuggestions[0]); 55161 } 55162 }, [matchingSuggestions, selectedSuggestion]); // Announcements. 55163 55164 (0,external_wp_element_namespaceObject.useEffect)(() => { 55165 const hasMatchingSuggestions = matchingSuggestions.length > 0; 55166 55167 if (isExpanded) { 55168 const message = hasMatchingSuggestions ? (0,external_wp_i18n_namespaceObject.sprintf)( 55169 /* translators: %d: number of results. */ 55170 (0,external_wp_i18n_namespaceObject._n)('%d result found, use up and down arrow keys to navigate.', '%d results found, use up and down arrow keys to navigate.', matchingSuggestions.length), matchingSuggestions.length) : (0,external_wp_i18n_namespaceObject.__)('No results.'); 55171 (0,external_wp_a11y_namespaceObject.speak)(message, 'polite'); 55172 } 55173 }, [matchingSuggestions, isExpanded]); // Disable reason: There is no appropriate role which describes the 55174 // input container intended accessible usability. 55175 // TODO: Refactor click detection to use blur to stop propagation. 55176 55177 /* eslint-disable jsx-a11y/no-static-element-interactions */ 55178 55179 return (0,external_wp_element_namespaceObject.createElement)(DetectOutside, { 55180 onFocusOutside: onFocusOutside 55181 }, (0,external_wp_element_namespaceObject.createElement)(base_control, { 55182 className: classnames_default()(className, 'components-combobox-control'), 55183 tabIndex: "-1", 55184 label: label, 55185 id: `components-form-token-input-$instanceId}`, 55186 hideLabelFromVision: hideLabelFromVision, 55187 help: help 55188 }, (0,external_wp_element_namespaceObject.createElement)("div", { 55189 className: "components-combobox-control__suggestions-container", 55190 tabIndex: "-1", 55191 onKeyDown: onKeyDown 55192 }, (0,external_wp_element_namespaceObject.createElement)(flex_component, null, (0,external_wp_element_namespaceObject.createElement)(flex_block_component, null, (0,external_wp_element_namespaceObject.createElement)(token_input, { 55193 className: "components-combobox-control__input", 55194 instanceId: instanceId, 55195 ref: inputContainer, 55196 value: isExpanded ? inputValue : currentLabel, 55197 "aria-label": currentLabel ? `$currentLabel}, $label}` : null, 55198 onFocus: onFocus, 55199 onBlur: onBlur, 55200 isExpanded: isExpanded, 55201 selectedSuggestionIndex: matchingSuggestions.indexOf(selectedSuggestion), 55202 onChange: onInputChange 55203 })), allowReset && (0,external_wp_element_namespaceObject.createElement)(flex_item_component, null, (0,external_wp_element_namespaceObject.createElement)(build_module_button, { 55204 className: "components-combobox-control__reset", 55205 icon: close_small, 55206 disabled: !value, 55207 onClick: handleOnReset, 55208 label: (0,external_wp_i18n_namespaceObject.__)('Reset') 55209 }))), isExpanded && (0,external_wp_element_namespaceObject.createElement)(suggestions_list, { 55210 instanceId: instanceId, 55211 match: { 55212 label: inputValue 55213 }, 55214 displayTransform: suggestion => suggestion.label, 55215 suggestions: matchingSuggestions, 55216 selectedIndex: matchingSuggestions.indexOf(selectedSuggestion), 55217 onHover: setSelectedSuggestion, 55218 onSelect: onSuggestionSelected, 55219 scrollIntoView: true 55220 })))); 55221 /* eslint-enable jsx-a11y/no-static-element-interactions */ 55222 } 55223 55224 /* harmony default export */ var combobox_control = (ComboboxControl); 55225 55226 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/modal/aria-helper.js 55227 // @ts-nocheck 55228 55229 /** 55230 * External dependencies 55231 */ 55232 55233 const LIVE_REGION_ARIA_ROLES = new Set(['alert', 'status', 'log', 'marquee', 'timer']); 55234 let hiddenElements = [], 55235 isHidden = false; 55236 /** 55237 * Hides all elements in the body element from screen-readers except 55238 * the provided element and elements that should not be hidden from 55239 * screen-readers. 55240 * 55241 * The reason we do this is because `aria-modal="true"` currently is bugged 55242 * in Safari, and support is spotty in other browsers overall. In the future 55243 * we should consider removing these helper functions in favor of 55244 * `aria-modal="true"`. 55245 * 55246 * @param {Element} unhiddenElement The element that should not be hidden. 55247 */ 55248 55249 function hideApp(unhiddenElement) { 55250 if (isHidden) { 55251 return; 55252 } 55253 55254 const elements = document.body.children; 55255 (0,external_lodash_namespaceObject.forEach)(elements, element => { 55256 if (element === unhiddenElement) { 55257 return; 55258 } 55259 55260 if (elementShouldBeHidden(element)) { 55261 element.setAttribute('aria-hidden', 'true'); 55262 hiddenElements.push(element); 55263 } 55264 }); 55265 isHidden = true; 55266 } 55267 /** 55268 * Determines if the passed element should not be hidden from screen readers. 55269 * 55270 * @param {HTMLElement} element The element that should be checked. 55271 * 55272 * @return {boolean} Whether the element should not be hidden from screen-readers. 55273 */ 55274 55275 function elementShouldBeHidden(element) { 55276 const role = element.getAttribute('role'); 55277 return !(element.tagName === 'SCRIPT' || element.hasAttribute('aria-hidden') || element.hasAttribute('aria-live') || LIVE_REGION_ARIA_ROLES.has(role)); 55278 } 55279 /** 55280 * Makes all elements in the body that have been hidden by `hideApp` 55281 * visible again to screen-readers. 55282 */ 55283 55284 function showApp() { 55285 if (!isHidden) { 55286 return; 55287 } 55288 55289 (0,external_lodash_namespaceObject.forEach)(hiddenElements, element => { 55290 element.removeAttribute('aria-hidden'); 55291 }); 55292 hiddenElements = []; 55293 isHidden = false; 55294 } 55295 55296 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/modal/index.js 55297 55298 55299 // @ts-nocheck 55300 55301 /** 55302 * External dependencies 55303 */ 55304 55305 /** 55306 * WordPress dependencies 55307 */ 55308 55309 55310 55311 55312 55313 55314 /** 55315 * Internal dependencies 55316 */ 55317 55318 55319 55320 // Used to count the number of open modals. 55321 55322 let openModalCount = 0; 55323 55324 function Modal(props, forwardedRef) { 55325 const { 55326 bodyOpenClassName = 'modal-open', 55327 role = 'dialog', 55328 title = null, 55329 focusOnMount = true, 55330 shouldCloseOnEsc = true, 55331 shouldCloseOnClickOutside = true, 55332 isDismissible = true, 55333 55334 /* Accessibility. */ 55335 aria = { 55336 labelledby: null, 55337 describedby: null 55338 }, 55339 onRequestClose, 55340 icon, 55341 closeButtonLabel, 55342 children, 55343 style, 55344 overlayClassName, 55345 className, 55346 contentLabel, 55347 onKeyDown, 55348 isFullScreen = false, 55349 __experimentalHideHeader = false 55350 } = props; 55351 const ref = (0,external_wp_element_namespaceObject.useRef)(); 55352 const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(Modal); 55353 const headingId = title ? `components-modal-header-$instanceId}` : aria.labelledby; 55354 const focusOnMountRef = (0,external_wp_compose_namespaceObject.useFocusOnMount)(focusOnMount); 55355 const constrainedTabbingRef = (0,external_wp_compose_namespaceObject.useConstrainedTabbing)(); 55356 const focusReturnRef = (0,external_wp_compose_namespaceObject.useFocusReturn)(); 55357 const focusOutsideProps = (0,external_wp_compose_namespaceObject.__experimentalUseFocusOutside)(onRequestClose); 55358 (0,external_wp_element_namespaceObject.useEffect)(() => { 55359 openModalCount++; 55360 55361 if (openModalCount === 1) { 55362 hideApp(ref.current); 55363 document.body.classList.add(bodyOpenClassName); 55364 } 55365 55366 return () => { 55367 openModalCount--; 55368 55369 if (openModalCount === 0) { 55370 document.body.classList.remove(bodyOpenClassName); 55371 showApp(); 55372 } 55373 }; 55374 }, []); 55375 55376 function handleEscapeKeyDown(event) { 55377 if (shouldCloseOnEsc && event.keyCode === external_wp_keycodes_namespaceObject.ESCAPE && !event.defaultPrevented) { 55378 event.preventDefault(); 55379 55380 if (onRequestClose) { 55381 onRequestClose(event); 55382 } 55383 } 55384 } 55385 55386 return (0,external_wp_element_namespaceObject.createPortal)( // eslint-disable-next-line jsx-a11y/no-static-element-interactions 55387 (0,external_wp_element_namespaceObject.createElement)("div", { 55388 ref: (0,external_wp_compose_namespaceObject.useMergeRefs)([ref, forwardedRef]), 55389 className: classnames_default()('components-modal__screen-overlay', overlayClassName), 55390 onKeyDown: handleEscapeKeyDown 55391 }, (0,external_wp_element_namespaceObject.createElement)(StyleProvider, { 55392 document: document 55393 }, (0,external_wp_element_namespaceObject.createElement)("div", extends_extends({ 55394 className: classnames_default()('components-modal__frame', className, { 55395 'is-full-screen': isFullScreen 55396 }), 55397 style: style, 55398 ref: (0,external_wp_compose_namespaceObject.useMergeRefs)([constrainedTabbingRef, focusReturnRef, focusOnMountRef]), 55399 role: role, 55400 "aria-label": contentLabel, 55401 "aria-labelledby": contentLabel ? null : headingId, 55402 "aria-describedby": aria.describedby, 55403 tabIndex: "-1" 55404 }, shouldCloseOnClickOutside ? focusOutsideProps : {}, { 55405 onKeyDown: onKeyDown 55406 }), (0,external_wp_element_namespaceObject.createElement)("div", { 55407 className: classnames_default()('components-modal__content', { 55408 'hide-header': __experimentalHideHeader 55409 }), 55410 role: "document" 55411 }, !__experimentalHideHeader && (0,external_wp_element_namespaceObject.createElement)("div", { 55412 className: "components-modal__header" 55413 }, (0,external_wp_element_namespaceObject.createElement)("div", { 55414 className: "components-modal__header-heading-container" 55415 }, icon && (0,external_wp_element_namespaceObject.createElement)("span", { 55416 className: "components-modal__icon-container", 55417 "aria-hidden": true 55418 }, icon), title && (0,external_wp_element_namespaceObject.createElement)("h1", { 55419 id: headingId, 55420 className: "components-modal__header-heading" 55421 }, title)), isDismissible && (0,external_wp_element_namespaceObject.createElement)(build_module_button, { 55422 onClick: onRequestClose, 55423 icon: close_small, 55424 label: closeButtonLabel || (0,external_wp_i18n_namespaceObject.__)('Close dialog') 55425 })), children)))), document.body); 55426 } 55427 55428 /* harmony default export */ var modal = ((0,external_wp_element_namespaceObject.forwardRef)(Modal)); 55429 55430 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/confirm-dialog/styles.js 55431 function confirm_dialog_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } 55432 55433 /** 55434 * External dependencies 55435 */ 55436 55437 /** 55438 * The z-index for ConfirmDialog is being set here instead of in 55439 * packages/base-styles/_z-index.scss, because this component uses 55440 * emotion instead of sass. 55441 * 55442 * ConfirmDialog needs this higher z-index to ensure it renders on top of 55443 * any parent Popover component. 55444 */ 55445 55446 const wrapper = true ? { 55447 name: "7g5ii0", 55448 styles: "&&{z-index:1000001;}" 55449 } : 0; 55450 55451 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/confirm-dialog/component.js 55452 55453 55454 55455 /** 55456 * External dependencies 55457 */ 55458 55459 /** 55460 * WordPress dependencies 55461 */ 55462 55463 55464 /** 55465 * Internal dependencies 55466 */ 55467 55468 55469 55470 55471 55472 55473 55474 55475 55476 55477 function ConfirmDialog(props, forwardedRef) { 55478 const { 55479 isOpen: isOpenProp, 55480 onConfirm, 55481 onCancel, 55482 children, 55483 confirmButtonText, 55484 cancelButtonText, 55485 ...otherProps 55486 } = useContextSystem(props, 'ConfirmDialog'); 55487 const cx = useCx(); 55488 const wrapperClassName = cx(wrapper); 55489 const [isOpen, setIsOpen] = (0,external_wp_element_namespaceObject.useState)(); 55490 const [shouldSelfClose, setShouldSelfClose] = (0,external_wp_element_namespaceObject.useState)(); 55491 (0,external_wp_element_namespaceObject.useEffect)(() => { 55492 // We only allow the dialog to close itself if `isOpenProp` is *not* set. 55493 // If `isOpenProp` is set, then it (probably) means it's controlled by a 55494 // parent component. In that case, `shouldSelfClose` might do more harm than 55495 // good, so we disable it. 55496 const isIsOpenSet = typeof isOpenProp !== 'undefined'; 55497 setIsOpen(isIsOpenSet ? isOpenProp : true); 55498 setShouldSelfClose(!isIsOpenSet); 55499 }, [isOpenProp]); 55500 const handleEvent = (0,external_wp_element_namespaceObject.useCallback)(callback => event => { 55501 callback === null || callback === void 0 ? void 0 : callback(event); 55502 55503 if (shouldSelfClose) { 55504 setIsOpen(false); 55505 } 55506 }, [shouldSelfClose, setIsOpen]); 55507 const handleEnter = (0,external_wp_element_namespaceObject.useCallback)(event => { 55508 if (event.key === 'Enter') { 55509 handleEvent(onConfirm)(event); 55510 } 55511 }, [handleEvent, onConfirm]); 55512 const cancelLabel = cancelButtonText !== null && cancelButtonText !== void 0 ? cancelButtonText : (0,external_wp_i18n_namespaceObject.__)('Cancel'); 55513 const confirmLabel = confirmButtonText !== null && confirmButtonText !== void 0 ? confirmButtonText : (0,external_wp_i18n_namespaceObject.__)('OK'); 55514 return (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, isOpen && (0,external_wp_element_namespaceObject.createElement)(modal, extends_extends({ 55515 onRequestClose: handleEvent(onCancel), 55516 onKeyDown: handleEnter, 55517 closeButtonLabel: cancelLabel, 55518 isDismissible: true, 55519 ref: forwardedRef, 55520 overlayClassName: wrapperClassName, 55521 __experimentalHideHeader: true 55522 }, otherProps), (0,external_wp_element_namespaceObject.createElement)(v_stack_component, { 55523 spacing: 8 55524 }, (0,external_wp_element_namespaceObject.createElement)(text_component, null, children), (0,external_wp_element_namespaceObject.createElement)(flex_component, { 55525 direction: "row", 55526 justify: "flex-end" 55527 }, (0,external_wp_element_namespaceObject.createElement)(build_module_button, { 55528 variant: "tertiary", 55529 onClick: handleEvent(onCancel) 55530 }, cancelLabel), (0,external_wp_element_namespaceObject.createElement)(build_module_button, { 55531 variant: "primary", 55532 onClick: handleEvent(onConfirm) 55533 }, confirmLabel))))); 55534 } 55535 55536 /* harmony default export */ var confirm_dialog_component = (contextConnect(ConfirmDialog, 'ConfirmDialog')); 55537 55538 ;// CONCATENATED MODULE: ./node_modules/@babel/runtime/helpers/esm/objectWithoutPropertiesLoose.js 55539 function objectWithoutPropertiesLoose_objectWithoutPropertiesLoose(source, excluded) { 55540 if (source == null) return {}; 55541 var target = {}; 55542 var sourceKeys = Object.keys(source); 55543 var key, i; 55544 55545 for (i = 0; i < sourceKeys.length; i++) { 55546 key = sourceKeys[i]; 55547 if (excluded.indexOf(key) >= 0) continue; 55548 target[key] = source[key]; 55549 } 55550 55551 return target; 55552 } 55553 // EXTERNAL MODULE: ./node_modules/prop-types/index.js 55554 var prop_types = __webpack_require__(2652); 55555 var prop_types_default = /*#__PURE__*/__webpack_require__.n(prop_types); 55556 // EXTERNAL MODULE: ./node_modules/downshift/node_modules/react-is/index.js 55557 var react_is = __webpack_require__(2797); 55558 ;// CONCATENATED MODULE: ./node_modules/compute-scroll-into-view/dist/index.module.js 55559 function index_module_t(t){return"object"==typeof t&&null!=t&&1===t.nodeType}function index_module_e(t,e){return(!e||"hidden"!==t)&&"visible"!==t&&"clip"!==t}function index_module_n(t,n){if(t.clientHeight<t.scrollHeight||t.clientWidth<t.scrollWidth){var r=getComputedStyle(t,null);return index_module_e(r.overflowY,n)||index_module_e(r.overflowX,n)||function(t){var e=function(t){if(!t.ownerDocument||!t.ownerDocument.defaultView)return null;try{return t.ownerDocument.defaultView.frameElement}catch(t){return null}}(t);return!!e&&(e.clientHeight<t.scrollHeight||e.clientWidth<t.scrollWidth)}(t)}return!1}function index_module_r(t,e,n,r,i,o,l,d){return o<t&&l>e||o>t&&l<e?0:o<=t&&d<=n||l>=e&&d>=n?o-t-r:l>e&&d<n||o<t&&d>n?l-e+i:0}/* harmony default export */ function index_module(e,i){var o=window,l=i.scrollMode,d=i.block,u=i.inline,h=i.boundary,a=i.skipOverflowHiddenElements,c="function"==typeof h?h:function(t){return t!==h};if(!index_module_t(e))throw new TypeError("Invalid target");for(var f=document.scrollingElement||document.documentElement,s=[],p=e;index_module_t(p)&&c(p);){if((p=p.parentElement)===f){s.push(p);break}null!=p&&p===document.body&&index_module_n(p)&&!index_module_n(document.documentElement)||null!=p&&index_module_n(p,a)&&s.push(p)}for(var m=o.visualViewport?o.visualViewport.width:innerWidth,g=o.visualViewport?o.visualViewport.height:innerHeight,w=window.scrollX||pageXOffset,v=window.scrollY||pageYOffset,W=e.getBoundingClientRect(),b=W.height,H=W.width,y=W.top,E=W.right,M=W.bottom,V=W.left,x="start"===d||"nearest"===d?y:"end"===d?M:y+b/2,I="center"===u?V+H/2:"end"===u?E:V,C=[],T=0;T<s.length;T++){var k=s[T],B=k.getBoundingClientRect(),D=B.height,O=B.width,R=B.top,X=B.right,Y=B.bottom,L=B.left;if("if-needed"===l&&y>=0&&V>=0&&M<=g&&E<=m&&y>=R&&M<=Y&&V>=L&&E<=X)return C;var S=getComputedStyle(k),j=parseInt(S.borderLeftWidth,10),q=parseInt(S.borderTopWidth,10),z=parseInt(S.borderRightWidth,10),A=parseInt(S.borderBottomWidth,10),F=0,G=0,J="offsetWidth"in k?k.offsetWidth-k.clientWidth-j-z:0,K="offsetHeight"in k?k.offsetHeight-k.clientHeight-q-A:0;if(f===k)F="start"===d?x:"end"===d?x-g:"nearest"===d?index_module_r(v,v+g,g,q,A,v+x,v+x+b,b):x-g/2,G="start"===u?I:"center"===u?I-m/2:"end"===u?I-m:index_module_r(w,w+m,m,j,z,w+I,w+I+H,H),F=Math.max(0,F+v),G=Math.max(0,G+w);else{F="start"===d?x-R-q:"end"===d?x-Y+A+K:"nearest"===d?index_module_r(R,Y,D,q,A+K,x,x+b,b):x-(R+D/2)+K/2,G="start"===u?I-L-j:"center"===u?I-(L+O/2)+J/2:"end"===u?I-X+z+J:index_module_r(L,X,O,j,z+J,I,I+H,H);var N=k.scrollLeft,P=k.scrollTop;x+=P-(F=Math.max(0,Math.min(P+F,k.scrollHeight-D+K))),I+=N-(G=Math.max(0,Math.min(N+G,k.scrollWidth-O+J)))}C.push({el:k,top:F,left:G})}return C} 55560 55561 ;// CONCATENATED MODULE: ./node_modules/downshift/dist/downshift.esm.js 55562 55563 55564 55565 55566 55567 55568 55569 55570 55571 55572 var idCounter = 0; 55573 /** 55574 * Accepts a parameter and returns it if it's a function 55575 * or a noop function if it's not. This allows us to 55576 * accept a callback, but not worry about it if it's not 55577 * passed. 55578 * @param {Function} cb the callback 55579 * @return {Function} a function 55580 */ 55581 55582 function cbToCb(cb) { 55583 return typeof cb === 'function' ? cb : downshift_esm_noop; 55584 } 55585 55586 function downshift_esm_noop() {} 55587 /** 55588 * Scroll node into view if necessary 55589 * @param {HTMLElement} node the element that should scroll into view 55590 * @param {HTMLElement} menuNode the menu element of the component 55591 */ 55592 55593 55594 function scrollIntoView(node, menuNode) { 55595 if (!node) { 55596 return; 55597 } 55598 55599 var actions = index_module(node, { 55600 boundary: menuNode, 55601 block: 'nearest', 55602 scrollMode: 'if-needed' 55603 }); 55604 actions.forEach(function (_ref) { 55605 var el = _ref.el, 55606 top = _ref.top, 55607 left = _ref.left; 55608 el.scrollTop = top; 55609 el.scrollLeft = left; 55610 }); 55611 } 55612 /** 55613 * @param {HTMLElement} parent the parent node 55614 * @param {HTMLElement} child the child node 55615 * @param {Window} environment The window context where downshift renders. 55616 * @return {Boolean} whether the parent is the child or the child is in the parent 55617 */ 55618 55619 55620 function isOrContainsNode(parent, child, environment) { 55621 var result = parent === child || child instanceof environment.Node && parent.contains && parent.contains(child); 55622 return result; 55623 } 55624 /** 55625 * Simple debounce implementation. Will call the given 55626 * function once after the time given has passed since 55627 * it was last called. 55628 * @param {Function} fn the function to call after the time 55629 * @param {Number} time the time to wait 55630 * @return {Function} the debounced function 55631 */ 55632 55633 55634 function downshift_esm_debounce(fn, time) { 55635 var timeoutId; 55636 55637 function cancel() { 55638 if (timeoutId) { 55639 clearTimeout(timeoutId); 55640 } 55641 } 55642 55643 function wrapper() { 55644 for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) { 55645 args[_key] = arguments[_key]; 55646 } 55647 55648 cancel(); 55649 timeoutId = setTimeout(function () { 55650 timeoutId = null; 55651 fn.apply(void 0, args); 55652 }, time); 55653 } 55654 55655 wrapper.cancel = cancel; 55656 return wrapper; 55657 } 55658 /** 55659 * This is intended to be used to compose event handlers. 55660 * They are executed in order until one of them sets 55661 * `event.preventDownshiftDefault = true`. 55662 * @param {...Function} fns the event handler functions 55663 * @return {Function} the event handler to add to an element 55664 */ 55665 55666 55667 function callAllEventHandlers() { 55668 for (var _len2 = arguments.length, fns = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) { 55669 fns[_key2] = arguments[_key2]; 55670 } 55671 55672 return function (event) { 55673 for (var _len3 = arguments.length, args = new Array(_len3 > 1 ? _len3 - 1 : 0), _key3 = 1; _key3 < _len3; _key3++) { 55674 args[_key3 - 1] = arguments[_key3]; 55675 } 55676 55677 return fns.some(function (fn) { 55678 if (fn) { 55679 fn.apply(void 0, [event].concat(args)); 55680 } 55681 55682 return event.preventDownshiftDefault || event.hasOwnProperty('nativeEvent') && event.nativeEvent.preventDownshiftDefault; 55683 }); 55684 }; 55685 } 55686 55687 function handleRefs() { 55688 for (var _len4 = arguments.length, refs = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) { 55689 refs[_key4] = arguments[_key4]; 55690 } 55691 55692 return function (node) { 55693 refs.forEach(function (ref) { 55694 if (typeof ref === 'function') { 55695 ref(node); 55696 } else if (ref) { 55697 ref.current = node; 55698 } 55699 }); 55700 }; 55701 } 55702 /** 55703 * This generates a unique ID for an instance of Downshift 55704 * @return {String} the unique ID 55705 */ 55706 55707 55708 function generateId() { 55709 return String(idCounter++); 55710 } 55711 /** 55712 * Resets idCounter to 0. Used for SSR. 55713 */ 55714 55715 55716 function resetIdCounter() { 55717 idCounter = 0; 55718 } 55719 /** 55720 * Default implementation for status message. Only added when menu is open. 55721 * Will specify if there are results in the list, and if so, how many, 55722 * and what keys are relevant. 55723 * 55724 * @param {Object} param the downshift state and other relevant properties 55725 * @return {String} the a11y status message 55726 */ 55727 55728 55729 function getA11yStatusMessage$1(_ref2) { 55730 var isOpen = _ref2.isOpen, 55731 resultCount = _ref2.resultCount, 55732 previousResultCount = _ref2.previousResultCount; 55733 55734 if (!isOpen) { 55735 return ''; 55736 } 55737 55738 if (!resultCount) { 55739 return 'No results are available.'; 55740 } 55741 55742 if (resultCount !== previousResultCount) { 55743 return resultCount + " result" + (resultCount === 1 ? ' is' : 's are') + " available, use up and down arrow keys to navigate. Press Enter key to select."; 55744 } 55745 55746 return ''; 55747 } 55748 /** 55749 * Takes an argument and if it's an array, returns the first item in the array 55750 * otherwise returns the argument 55751 * @param {*} arg the maybe-array 55752 * @param {*} defaultValue the value if arg is falsey not defined 55753 * @return {*} the arg or it's first item 55754 */ 55755 55756 55757 function unwrapArray(arg, defaultValue) { 55758 arg = Array.isArray(arg) ? 55759 /* istanbul ignore next (preact) */ 55760 arg[0] : arg; 55761 55762 if (!arg && defaultValue) { 55763 return defaultValue; 55764 } else { 55765 return arg; 55766 } 55767 } 55768 /** 55769 * @param {Object} element (P)react element 55770 * @return {Boolean} whether it's a DOM element 55771 */ 55772 55773 55774 function isDOMElement(element) { 55775 55776 55777 return typeof element.type === 'string'; 55778 } 55779 /** 55780 * @param {Object} element (P)react element 55781 * @return {Object} the props 55782 */ 55783 55784 55785 function getElementProps(element) { 55786 55787 return element.props; 55788 } 55789 /** 55790 * Throws a helpful error message for required properties. Useful 55791 * to be used as a default in destructuring or object params. 55792 * @param {String} fnName the function name 55793 * @param {String} propName the prop name 55794 */ 55795 55796 55797 function requiredProp(fnName, propName) { 55798 // eslint-disable-next-line no-console 55799 console.error("The property \"" + propName + "\" is required in \"" + fnName + "\""); 55800 } 55801 55802 var stateKeys = (/* unused pure expression or super */ null && (['highlightedIndex', 'inputValue', 'isOpen', 'selectedItem', 'type'])); 55803 /** 55804 * @param {Object} state the state object 55805 * @return {Object} state that is relevant to downshift 55806 */ 55807 55808 function pickState(state) { 55809 if (state === void 0) { 55810 state = {}; 55811 } 55812 55813 var result = {}; 55814 stateKeys.forEach(function (k) { 55815 if (state.hasOwnProperty(k)) { 55816 result[k] = state[k]; 55817 } 55818 }); 55819 return result; 55820 } 55821 /** 55822 * This will perform a shallow merge of the given state object 55823 * with the state coming from props 55824 * (for the controlled component scenario) 55825 * This is used in state updater functions so they're referencing 55826 * the right state regardless of where it comes from. 55827 * 55828 * @param {Object} state The state of the component/hook. 55829 * @param {Object} props The props that may contain controlled values. 55830 * @returns {Object} The merged controlled state. 55831 */ 55832 55833 55834 function getState(state, props) { 55835 return Object.keys(state).reduce(function (prevState, key) { 55836 prevState[key] = isControlledProp(props, key) ? props[key] : state[key]; 55837 return prevState; 55838 }, {}); 55839 } 55840 /** 55841 * This determines whether a prop is a "controlled prop" meaning it is 55842 * state which is controlled by the outside of this component rather 55843 * than within this component. 55844 * 55845 * @param {Object} props The props that may contain controlled values. 55846 * @param {String} key the key to check 55847 * @return {Boolean} whether it is a controlled controlled prop 55848 */ 55849 55850 55851 function isControlledProp(props, key) { 55852 return props[key] !== undefined; 55853 } 55854 /** 55855 * Normalizes the 'key' property of a KeyboardEvent in IE/Edge 55856 * @param {Object} event a keyboardEvent object 55857 * @return {String} keyboard key 55858 */ 55859 55860 55861 function normalizeArrowKey(event) { 55862 var key = event.key, 55863 keyCode = event.keyCode; 55864 /* istanbul ignore next (ie) */ 55865 55866 if (keyCode >= 37 && keyCode <= 40 && key.indexOf('Arrow') !== 0) { 55867 return "Arrow" + key; 55868 } 55869 55870 return key; 55871 } 55872 /** 55873 * Simple check if the value passed is object literal 55874 * @param {*} obj any things 55875 * @return {Boolean} whether it's object literal 55876 */ 55877 55878 55879 function downshift_esm_isPlainObject(obj) { 55880 return Object.prototype.toString.call(obj) === '[object Object]'; 55881 } 55882 /** 55883 * Returns the new index in the list, in a circular way. If next value is out of bonds from the total, 55884 * it will wrap to either 0 or itemCount - 1. 55885 * 55886 * @param {number} moveAmount Number of positions to move. Negative to move backwards, positive forwards. 55887 * @param {number} baseIndex The initial position to move from. 55888 * @param {number} itemCount The total number of items. 55889 * @param {Function} getItemNodeFromIndex Used to check if item is disabled. 55890 * @param {boolean} circular Specify if navigation is circular. Default is true. 55891 * @returns {number} The new index after the move. 55892 */ 55893 55894 55895 function getNextWrappingIndex(moveAmount, baseIndex, itemCount, getItemNodeFromIndex, circular) { 55896 if (circular === void 0) { 55897 circular = true; 55898 } 55899 55900 if (itemCount === 0) { 55901 return -1; 55902 } 55903 55904 var itemsLastIndex = itemCount - 1; 55905 55906 if (typeof baseIndex !== 'number' || baseIndex < 0 || baseIndex >= itemCount) { 55907 baseIndex = moveAmount > 0 ? -1 : itemsLastIndex + 1; 55908 } 55909 55910 var newIndex = baseIndex + moveAmount; 55911 55912 if (newIndex < 0) { 55913 newIndex = circular ? itemsLastIndex : 0; 55914 } else if (newIndex > itemsLastIndex) { 55915 newIndex = circular ? 0 : itemsLastIndex; 55916 } 55917 55918 var nonDisabledNewIndex = getNextNonDisabledIndex(moveAmount, newIndex, itemCount, getItemNodeFromIndex, circular); 55919 55920 if (nonDisabledNewIndex === -1) { 55921 return baseIndex >= itemCount ? -1 : baseIndex; 55922 } 55923 55924 return nonDisabledNewIndex; 55925 } 55926 /** 55927 * Returns the next index in the list of an item that is not disabled. 55928 * 55929 * @param {number} moveAmount Number of positions to move. Negative to move backwards, positive forwards. 55930 * @param {number} baseIndex The initial position to move from. 55931 * @param {number} itemCount The total number of items. 55932 * @param {Function} getItemNodeFromIndex Used to check if item is disabled. 55933 * @param {boolean} circular Specify if navigation is circular. Default is true. 55934 * @returns {number} The new index. Returns baseIndex if item is not disabled. Returns next non-disabled item otherwise. If no non-disabled found it will return -1. 55935 */ 55936 55937 55938 function getNextNonDisabledIndex(moveAmount, baseIndex, itemCount, getItemNodeFromIndex, circular) { 55939 var currentElementNode = getItemNodeFromIndex(baseIndex); 55940 55941 if (!currentElementNode || !currentElementNode.hasAttribute('disabled')) { 55942 return baseIndex; 55943 } 55944 55945 if (moveAmount > 0) { 55946 for (var index = baseIndex + 1; index < itemCount; index++) { 55947 if (!getItemNodeFromIndex(index).hasAttribute('disabled')) { 55948 return index; 55949 } 55950 } 55951 } else { 55952 for (var _index = baseIndex - 1; _index >= 0; _index--) { 55953 if (!getItemNodeFromIndex(_index).hasAttribute('disabled')) { 55954 return _index; 55955 } 55956 } 55957 } 55958 55959 if (circular) { 55960 return moveAmount > 0 ? getNextNonDisabledIndex(1, 0, itemCount, getItemNodeFromIndex, false) : getNextNonDisabledIndex(-1, itemCount - 1, itemCount, getItemNodeFromIndex, false); 55961 } 55962 55963 return -1; 55964 } 55965 /** 55966 * Checks if event target is within the downshift elements. 55967 * 55968 * @param {EventTarget} target Target to check. 55969 * @param {HTMLElement[]} downshiftElements The elements that form downshift (list, toggle button etc). 55970 * @param {Window} environment The window context where downshift renders. 55971 * @param {boolean} checkActiveElement Whether to also check activeElement. 55972 * 55973 * @returns {boolean} Whether or not the target is within downshift elements. 55974 */ 55975 55976 55977 function targetWithinDownshift(target, downshiftElements, environment, checkActiveElement) { 55978 if (checkActiveElement === void 0) { 55979 checkActiveElement = true; 55980 } 55981 55982 return downshiftElements.some(function (contextNode) { 55983 return contextNode && (isOrContainsNode(contextNode, target, environment) || checkActiveElement && isOrContainsNode(contextNode, environment.document.activeElement, environment)); 55984 }); 55985 } // eslint-disable-next-line import/no-mutable-exports 55986 55987 55988 var validateControlledUnchanged = (/* unused pure expression or super */ null && (downshift_esm_noop)); 55989 /* istanbul ignore next */ 55990 55991 if (false) {} 55992 55993 var cleanupStatus = downshift_esm_debounce(function (documentProp) { 55994 getStatusDiv(documentProp).textContent = ''; 55995 }, 500); 55996 /** 55997 * @param {String} status the status message 55998 * @param {Object} documentProp document passed by the user. 55999 */ 56000 56001 function setStatus(status, documentProp) { 56002 var div = getStatusDiv(documentProp); 56003 56004 if (!status) { 56005 return; 56006 } 56007 56008 div.textContent = status; 56009 cleanupStatus(documentProp); 56010 } 56011 /** 56012 * Get the status node or create it if it does not already exist. 56013 * @param {Object} documentProp document passed by the user. 56014 * @return {HTMLElement} the status node. 56015 */ 56016 56017 56018 function getStatusDiv(documentProp) { 56019 if (documentProp === void 0) { 56020 documentProp = document; 56021 } 56022 56023 var statusDiv = documentProp.getElementById('a11y-status-message'); 56024 56025 if (statusDiv) { 56026 return statusDiv; 56027 } 56028 56029 statusDiv = documentProp.createElement('div'); 56030 statusDiv.setAttribute('id', 'a11y-status-message'); 56031 statusDiv.setAttribute('role', 'status'); 56032 statusDiv.setAttribute('aria-live', 'polite'); 56033 statusDiv.setAttribute('aria-relevant', 'additions text'); 56034 Object.assign(statusDiv.style, { 56035 border: '0', 56036 clip: 'rect(0 0 0 0)', 56037 height: '1px', 56038 margin: '-1px', 56039 overflow: 'hidden', 56040 padding: '0', 56041 position: 'absolute', 56042 width: '1px' 56043 }); 56044 documentProp.body.appendChild(statusDiv); 56045 return statusDiv; 56046 } 56047 56048 var unknown = false ? 0 : 0; 56049 var mouseUp = false ? 0 : 1; 56050 var itemMouseEnter = false ? 0 : 2; 56051 var keyDownArrowUp = false ? 0 : 3; 56052 var keyDownArrowDown = false ? 0 : 4; 56053 var keyDownEscape = false ? 0 : 5; 56054 var keyDownEnter = false ? 0 : 6; 56055 var keyDownHome = false ? 0 : 7; 56056 var keyDownEnd = false ? 0 : 8; 56057 var clickItem = false ? 0 : 9; 56058 var blurInput = false ? 0 : 10; 56059 var changeInput = false ? 0 : 11; 56060 var keyDownSpaceButton = false ? 0 : 12; 56061 var clickButton = false ? 0 : 13; 56062 var blurButton = false ? 0 : 14; 56063 var controlledPropUpdatedSelectedItem = false ? 0 : 15; 56064 var touchEnd = false ? 0 : 16; 56065 56066 var stateChangeTypes$3 = /*#__PURE__*/Object.freeze({ 56067 __proto__: null, 56068 unknown: unknown, 56069 mouseUp: mouseUp, 56070 itemMouseEnter: itemMouseEnter, 56071 keyDownArrowUp: keyDownArrowUp, 56072 keyDownArrowDown: keyDownArrowDown, 56073 keyDownEscape: keyDownEscape, 56074 keyDownEnter: keyDownEnter, 56075 keyDownHome: keyDownHome, 56076 keyDownEnd: keyDownEnd, 56077 clickItem: clickItem, 56078 blurInput: blurInput, 56079 changeInput: changeInput, 56080 keyDownSpaceButton: keyDownSpaceButton, 56081 clickButton: clickButton, 56082 blurButton: blurButton, 56083 controlledPropUpdatedSelectedItem: controlledPropUpdatedSelectedItem, 56084 touchEnd: touchEnd 56085 }); 56086 56087 var _excluded$4 = (/* unused pure expression or super */ null && (["refKey", "ref"])), 56088 _excluded2$3 = (/* unused pure expression or super */ null && (["onClick", "onPress", "onKeyDown", "onKeyUp", "onBlur"])), 56089 _excluded3$2 = (/* unused pure expression or super */ null && (["onKeyDown", "onBlur", "onChange", "onInput", "onChangeText"])), 56090 _excluded4$1 = (/* unused pure expression or super */ null && (["refKey", "ref"])), 56091 _excluded5$1 = (/* unused pure expression or super */ null && (["onMouseMove", "onMouseDown", "onClick", "onPress", "index", "item"])); 56092 56093 var Downshift = /*#__PURE__*/(/* unused pure expression or super */ null && (function () { 56094 var Downshift = /*#__PURE__*/function (_Component) { 56095 _inheritsLoose(Downshift, _Component); 56096 56097 function Downshift(_props) { 56098 var _this; 56099 56100 _this = _Component.call(this, _props) || this; // fancy destructuring + defaults + aliases 56101 // this basically says each value of state should either be set to 56102 // the initial value or the default value if the initial value is not provided 56103 56104 _this.id = _this.props.id || "downshift-" + generateId(); 56105 _this.menuId = _this.props.menuId || _this.id + "-menu"; 56106 _this.labelId = _this.props.labelId || _this.id + "-label"; 56107 _this.inputId = _this.props.inputId || _this.id + "-input"; 56108 56109 _this.getItemId = _this.props.getItemId || function (index) { 56110 return _this.id + "-item-" + index; 56111 }; 56112 56113 _this.input = null; 56114 _this.items = []; 56115 _this.itemCount = null; 56116 _this.previousResultCount = 0; 56117 _this.timeoutIds = []; 56118 56119 _this.internalSetTimeout = function (fn, time) { 56120 var id = setTimeout(function () { 56121 _this.timeoutIds = _this.timeoutIds.filter(function (i) { 56122 return i !== id; 56123 }); 56124 fn(); 56125 }, time); 56126 56127 _this.timeoutIds.push(id); 56128 }; 56129 56130 _this.setItemCount = function (count) { 56131 _this.itemCount = count; 56132 }; 56133 56134 _this.unsetItemCount = function () { 56135 _this.itemCount = null; 56136 }; 56137 56138 _this.setHighlightedIndex = function (highlightedIndex, otherStateToSet) { 56139 if (highlightedIndex === void 0) { 56140 highlightedIndex = _this.props.defaultHighlightedIndex; 56141 } 56142 56143 if (otherStateToSet === void 0) { 56144 otherStateToSet = {}; 56145 } 56146 56147 otherStateToSet = pickState(otherStateToSet); 56148 56149 _this.internalSetState(_extends({ 56150 highlightedIndex: highlightedIndex 56151 }, otherStateToSet)); 56152 }; 56153 56154 _this.clearSelection = function (cb) { 56155 _this.internalSetState({ 56156 selectedItem: null, 56157 inputValue: '', 56158 highlightedIndex: _this.props.defaultHighlightedIndex, 56159 isOpen: _this.props.defaultIsOpen 56160 }, cb); 56161 }; 56162 56163 _this.selectItem = function (item, otherStateToSet, cb) { 56164 otherStateToSet = pickState(otherStateToSet); 56165 56166 _this.internalSetState(_extends({ 56167 isOpen: _this.props.defaultIsOpen, 56168 highlightedIndex: _this.props.defaultHighlightedIndex, 56169 selectedItem: item, 56170 inputValue: _this.props.itemToString(item) 56171 }, otherStateToSet), cb); 56172 }; 56173 56174 _this.selectItemAtIndex = function (itemIndex, otherStateToSet, cb) { 56175 var item = _this.items[itemIndex]; 56176 56177 if (item == null) { 56178 return; 56179 } 56180 56181 _this.selectItem(item, otherStateToSet, cb); 56182 }; 56183 56184 _this.selectHighlightedItem = function (otherStateToSet, cb) { 56185 return _this.selectItemAtIndex(_this.getState().highlightedIndex, otherStateToSet, cb); 56186 }; 56187 56188 _this.internalSetState = function (stateToSet, cb) { 56189 var isItemSelected, onChangeArg; 56190 var onStateChangeArg = {}; 56191 var isStateToSetFunction = typeof stateToSet === 'function'; // we want to call `onInputValueChange` before the `setState` call 56192 // so someone controlling the `inputValue` state gets notified of 56193 // the input change as soon as possible. This avoids issues with 56194 // preserving the cursor position. 56195 // See https://github.com/downshift-js/downshift/issues/217 for more info. 56196 56197 if (!isStateToSetFunction && stateToSet.hasOwnProperty('inputValue')) { 56198 _this.props.onInputValueChange(stateToSet.inputValue, _extends({}, _this.getStateAndHelpers(), stateToSet)); 56199 } 56200 56201 return _this.setState(function (state) { 56202 state = _this.getState(state); 56203 var newStateToSet = isStateToSetFunction ? stateToSet(state) : stateToSet; // Your own function that could modify the state that will be set. 56204 56205 newStateToSet = _this.props.stateReducer(state, newStateToSet); // checks if an item is selected, regardless of if it's different from 56206 // what was selected before 56207 // used to determine if onSelect and onChange callbacks should be called 56208 56209 isItemSelected = newStateToSet.hasOwnProperty('selectedItem'); // this keeps track of the object we want to call with setState 56210 56211 var nextState = {}; // this is just used to tell whether the state changed 56212 56213 var nextFullState = {}; // we need to call on change if the outside world is controlling any of our state 56214 // and we're trying to update that state. OR if the selection has changed and we're 56215 // trying to update the selection 56216 56217 if (isItemSelected && newStateToSet.selectedItem !== state.selectedItem) { 56218 onChangeArg = newStateToSet.selectedItem; 56219 } 56220 56221 newStateToSet.type = newStateToSet.type || unknown; 56222 Object.keys(newStateToSet).forEach(function (key) { 56223 // onStateChangeArg should only have the state that is 56224 // actually changing 56225 if (state[key] !== newStateToSet[key]) { 56226 onStateChangeArg[key] = newStateToSet[key]; 56227 } // the type is useful for the onStateChangeArg 56228 // but we don't actually want to set it in internal state. 56229 // this is an undocumented feature for now... Not all internalSetState 56230 // calls support it and I'm not certain we want them to yet. 56231 // But it enables users controlling the isOpen state to know when 56232 // the isOpen state changes due to mouseup events which is quite handy. 56233 56234 56235 if (key === 'type') { 56236 return; 56237 } 56238 56239 nextFullState[key] = newStateToSet[key]; // if it's coming from props, then we don't care to set it internally 56240 56241 if (!isControlledProp(_this.props, key)) { 56242 nextState[key] = newStateToSet[key]; 56243 } 56244 }); // if stateToSet is a function, then we weren't able to call onInputValueChange 56245 // earlier, so we'll call it now that we know what the inputValue state will be. 56246 56247 if (isStateToSetFunction && newStateToSet.hasOwnProperty('inputValue')) { 56248 _this.props.onInputValueChange(newStateToSet.inputValue, _extends({}, _this.getStateAndHelpers(), newStateToSet)); 56249 } 56250 56251 return nextState; 56252 }, function () { 56253 // call the provided callback if it's a function 56254 cbToCb(cb)(); // only call the onStateChange and onChange callbacks if 56255 // we have relevant information to pass them. 56256 56257 var hasMoreStateThanType = Object.keys(onStateChangeArg).length > 1; 56258 56259 if (hasMoreStateThanType) { 56260 _this.props.onStateChange(onStateChangeArg, _this.getStateAndHelpers()); 56261 } 56262 56263 if (isItemSelected) { 56264 _this.props.onSelect(stateToSet.selectedItem, _this.getStateAndHelpers()); 56265 } 56266 56267 if (onChangeArg !== undefined) { 56268 _this.props.onChange(onChangeArg, _this.getStateAndHelpers()); 56269 } // this is currently undocumented and therefore subject to change 56270 // We'll try to not break it, but just be warned. 56271 56272 56273 _this.props.onUserAction(onStateChangeArg, _this.getStateAndHelpers()); 56274 }); 56275 }; 56276 56277 _this.rootRef = function (node) { 56278 return _this._rootNode = node; 56279 }; 56280 56281 _this.getRootProps = function (_temp, _temp2) { 56282 var _extends2; 56283 56284 var _ref = _temp === void 0 ? {} : _temp, 56285 _ref$refKey = _ref.refKey, 56286 refKey = _ref$refKey === void 0 ? 'ref' : _ref$refKey, 56287 ref = _ref.ref, 56288 rest = _objectWithoutPropertiesLoose(_ref, _excluded$4); 56289 56290 var _ref2 = _temp2 === void 0 ? {} : _temp2, 56291 _ref2$suppressRefErro = _ref2.suppressRefError, 56292 suppressRefError = _ref2$suppressRefErro === void 0 ? false : _ref2$suppressRefErro; 56293 56294 // this is used in the render to know whether the user has called getRootProps. 56295 // It uses that to know whether to apply the props automatically 56296 _this.getRootProps.called = true; 56297 _this.getRootProps.refKey = refKey; 56298 _this.getRootProps.suppressRefError = suppressRefError; 56299 56300 var _this$getState = _this.getState(), 56301 isOpen = _this$getState.isOpen; 56302 56303 return _extends((_extends2 = {}, _extends2[refKey] = handleRefs(ref, _this.rootRef), _extends2.role = 'combobox', _extends2['aria-expanded'] = isOpen, _extends2['aria-haspopup'] = 'listbox', _extends2['aria-owns'] = isOpen ? _this.menuId : null, _extends2['aria-labelledby'] = _this.labelId, _extends2), rest); 56304 }; 56305 56306 _this.keyDownHandlers = { 56307 ArrowDown: function ArrowDown(event) { 56308 var _this2 = this; 56309 56310 event.preventDefault(); 56311 56312 if (this.getState().isOpen) { 56313 var amount = event.shiftKey ? 5 : 1; 56314 this.moveHighlightedIndex(amount, { 56315 type: keyDownArrowDown 56316 }); 56317 } else { 56318 this.internalSetState({ 56319 isOpen: true, 56320 type: keyDownArrowDown 56321 }, function () { 56322 var itemCount = _this2.getItemCount(); 56323 56324 if (itemCount > 0) { 56325 var _this2$getState = _this2.getState(), 56326 highlightedIndex = _this2$getState.highlightedIndex; 56327 56328 var nextHighlightedIndex = getNextWrappingIndex(1, highlightedIndex, itemCount, function (index) { 56329 return _this2.getItemNodeFromIndex(index); 56330 }); 56331 56332 _this2.setHighlightedIndex(nextHighlightedIndex, { 56333 type: keyDownArrowDown 56334 }); 56335 } 56336 }); 56337 } 56338 }, 56339 ArrowUp: function ArrowUp(event) { 56340 var _this3 = this; 56341 56342 event.preventDefault(); 56343 56344 if (this.getState().isOpen) { 56345 var amount = event.shiftKey ? -5 : -1; 56346 this.moveHighlightedIndex(amount, { 56347 type: keyDownArrowUp 56348 }); 56349 } else { 56350 this.internalSetState({ 56351 isOpen: true, 56352 type: keyDownArrowUp 56353 }, function () { 56354 var itemCount = _this3.getItemCount(); 56355 56356 if (itemCount > 0) { 56357 var _this3$getState = _this3.getState(), 56358 highlightedIndex = _this3$getState.highlightedIndex; 56359 56360 var nextHighlightedIndex = getNextWrappingIndex(-1, highlightedIndex, itemCount, function (index) { 56361 return _this3.getItemNodeFromIndex(index); 56362 }); 56363 56364 _this3.setHighlightedIndex(nextHighlightedIndex, { 56365 type: keyDownArrowUp 56366 }); 56367 } 56368 }); 56369 } 56370 }, 56371 Enter: function Enter(event) { 56372 if (event.which === 229) { 56373 return; 56374 } 56375 56376 var _this$getState2 = this.getState(), 56377 isOpen = _this$getState2.isOpen, 56378 highlightedIndex = _this$getState2.highlightedIndex; 56379 56380 if (isOpen && highlightedIndex != null) { 56381 event.preventDefault(); 56382 var item = this.items[highlightedIndex]; 56383 var itemNode = this.getItemNodeFromIndex(highlightedIndex); 56384 56385 if (item == null || itemNode && itemNode.hasAttribute('disabled')) { 56386 return; 56387 } 56388 56389 this.selectHighlightedItem({ 56390 type: keyDownEnter 56391 }); 56392 } 56393 }, 56394 Escape: function Escape(event) { 56395 event.preventDefault(); 56396 this.reset(_extends({ 56397 type: keyDownEscape 56398 }, !this.state.isOpen && { 56399 selectedItem: null, 56400 inputValue: '' 56401 })); 56402 } 56403 }; 56404 _this.buttonKeyDownHandlers = _extends({}, _this.keyDownHandlers, { 56405 ' ': function _(event) { 56406 event.preventDefault(); 56407 this.toggleMenu({ 56408 type: keyDownSpaceButton 56409 }); 56410 } 56411 }); 56412 _this.inputKeyDownHandlers = _extends({}, _this.keyDownHandlers, { 56413 Home: function Home(event) { 56414 var _this4 = this; 56415 56416 var _this$getState3 = this.getState(), 56417 isOpen = _this$getState3.isOpen; 56418 56419 if (!isOpen) { 56420 return; 56421 } 56422 56423 event.preventDefault(); 56424 var itemCount = this.getItemCount(); 56425 56426 if (itemCount <= 0 || !isOpen) { 56427 return; 56428 } // get next non-disabled starting downwards from 0 if that's disabled. 56429 56430 56431 var newHighlightedIndex = getNextNonDisabledIndex(1, 0, itemCount, function (index) { 56432 return _this4.getItemNodeFromIndex(index); 56433 }, false); 56434 this.setHighlightedIndex(newHighlightedIndex, { 56435 type: keyDownHome 56436 }); 56437 }, 56438 End: function End(event) { 56439 var _this5 = this; 56440 56441 var _this$getState4 = this.getState(), 56442 isOpen = _this$getState4.isOpen; 56443 56444 if (!isOpen) { 56445 return; 56446 } 56447 56448 event.preventDefault(); 56449 var itemCount = this.getItemCount(); 56450 56451 if (itemCount <= 0 || !isOpen) { 56452 return; 56453 } // get next non-disabled starting upwards from last index if that's disabled. 56454 56455 56456 var newHighlightedIndex = getNextNonDisabledIndex(-1, itemCount - 1, itemCount, function (index) { 56457 return _this5.getItemNodeFromIndex(index); 56458 }, false); 56459 this.setHighlightedIndex(newHighlightedIndex, { 56460 type: keyDownEnd 56461 }); 56462 } 56463 }); 56464 56465 _this.getToggleButtonProps = function (_temp3) { 56466 var _ref3 = _temp3 === void 0 ? {} : _temp3, 56467 onClick = _ref3.onClick; 56468 _ref3.onPress; 56469 var onKeyDown = _ref3.onKeyDown, 56470 onKeyUp = _ref3.onKeyUp, 56471 onBlur = _ref3.onBlur, 56472 rest = _objectWithoutPropertiesLoose(_ref3, _excluded2$3); 56473 56474 var _this$getState5 = _this.getState(), 56475 isOpen = _this$getState5.isOpen; 56476 56477 var enabledEventHandlers = { 56478 onClick: callAllEventHandlers(onClick, _this.buttonHandleClick), 56479 onKeyDown: callAllEventHandlers(onKeyDown, _this.buttonHandleKeyDown), 56480 onKeyUp: callAllEventHandlers(onKeyUp, _this.buttonHandleKeyUp), 56481 onBlur: callAllEventHandlers(onBlur, _this.buttonHandleBlur) 56482 }; 56483 var eventHandlers = rest.disabled ? {} : enabledEventHandlers; 56484 return _extends({ 56485 type: 'button', 56486 role: 'button', 56487 'aria-label': isOpen ? 'close menu' : 'open menu', 56488 'aria-haspopup': true, 56489 'data-toggle': true 56490 }, eventHandlers, rest); 56491 }; 56492 56493 _this.buttonHandleKeyUp = function (event) { 56494 // Prevent click event from emitting in Firefox 56495 event.preventDefault(); 56496 }; 56497 56498 _this.buttonHandleKeyDown = function (event) { 56499 var key = normalizeArrowKey(event); 56500 56501 if (_this.buttonKeyDownHandlers[key]) { 56502 _this.buttonKeyDownHandlers[key].call(_assertThisInitialized(_this), event); 56503 } 56504 }; 56505 56506 _this.buttonHandleClick = function (event) { 56507 event.preventDefault(); // handle odd case for Safari and Firefox which 56508 // don't give the button the focus properly. 56509 56510 /* istanbul ignore if (can't reasonably test this) */ 56511 56512 if (_this.props.environment.document.activeElement === _this.props.environment.document.body) { 56513 event.target.focus(); 56514 } // to simplify testing components that use downshift, we'll not wrap this in a setTimeout 56515 // if the NODE_ENV is test. With the proper build system, this should be dead code eliminated 56516 // when building for production and should therefore have no impact on production code. 56517 56518 56519 if (false) {} else { 56520 // Ensure that toggle of menu occurs after the potential blur event in iOS 56521 _this.internalSetTimeout(function () { 56522 return _this.toggleMenu({ 56523 type: clickButton 56524 }); 56525 }); 56526 } 56527 }; 56528 56529 _this.buttonHandleBlur = function (event) { 56530 var blurTarget = event.target; // Save blur target for comparison with activeElement later 56531 // Need setTimeout, so that when the user presses Tab, the activeElement is the next focused element, not body element 56532 56533 _this.internalSetTimeout(function () { 56534 if (!_this.isMouseDown && (_this.props.environment.document.activeElement == null || _this.props.environment.document.activeElement.id !== _this.inputId) && _this.props.environment.document.activeElement !== blurTarget // Do nothing if we refocus the same element again (to solve issue in Safari on iOS) 56535 ) { 56536 _this.reset({ 56537 type: blurButton 56538 }); 56539 } 56540 }); 56541 }; 56542 56543 _this.getLabelProps = function (props) { 56544 return _extends({ 56545 htmlFor: _this.inputId, 56546 id: _this.labelId 56547 }, props); 56548 }; 56549 56550 _this.getInputProps = function (_temp4) { 56551 var _ref4 = _temp4 === void 0 ? {} : _temp4, 56552 onKeyDown = _ref4.onKeyDown, 56553 onBlur = _ref4.onBlur, 56554 onChange = _ref4.onChange, 56555 onInput = _ref4.onInput; 56556 _ref4.onChangeText; 56557 var rest = _objectWithoutPropertiesLoose(_ref4, _excluded3$2); 56558 56559 var onChangeKey; 56560 var eventHandlers = {}; 56561 /* istanbul ignore next (preact) */ 56562 56563 { 56564 onChangeKey = 'onChange'; 56565 } 56566 56567 var _this$getState6 = _this.getState(), 56568 inputValue = _this$getState6.inputValue, 56569 isOpen = _this$getState6.isOpen, 56570 highlightedIndex = _this$getState6.highlightedIndex; 56571 56572 if (!rest.disabled) { 56573 var _eventHandlers; 56574 56575 eventHandlers = (_eventHandlers = {}, _eventHandlers[onChangeKey] = callAllEventHandlers(onChange, onInput, _this.inputHandleChange), _eventHandlers.onKeyDown = callAllEventHandlers(onKeyDown, _this.inputHandleKeyDown), _eventHandlers.onBlur = callAllEventHandlers(onBlur, _this.inputHandleBlur), _eventHandlers); 56576 } 56577 56578 return _extends({ 56579 'aria-autocomplete': 'list', 56580 'aria-activedescendant': isOpen && typeof highlightedIndex === 'number' && highlightedIndex >= 0 ? _this.getItemId(highlightedIndex) : null, 56581 'aria-controls': isOpen ? _this.menuId : null, 56582 'aria-labelledby': _this.labelId, 56583 // https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion 56584 // revert back since autocomplete="nope" is ignored on latest Chrome and Opera 56585 autoComplete: 'off', 56586 value: inputValue, 56587 id: _this.inputId 56588 }, eventHandlers, rest); 56589 }; 56590 56591 _this.inputHandleKeyDown = function (event) { 56592 var key = normalizeArrowKey(event); 56593 56594 if (key && _this.inputKeyDownHandlers[key]) { 56595 _this.inputKeyDownHandlers[key].call(_assertThisInitialized(_this), event); 56596 } 56597 }; 56598 56599 _this.inputHandleChange = function (event) { 56600 _this.internalSetState({ 56601 type: changeInput, 56602 isOpen: true, 56603 inputValue: event.target.value, 56604 highlightedIndex: _this.props.defaultHighlightedIndex 56605 }); 56606 }; 56607 56608 _this.inputHandleBlur = function () { 56609 // Need setTimeout, so that when the user presses Tab, the activeElement is the next focused element, not the body element 56610 _this.internalSetTimeout(function () { 56611 var downshiftButtonIsActive = _this.props.environment.document && !!_this.props.environment.document.activeElement && !!_this.props.environment.document.activeElement.dataset && _this.props.environment.document.activeElement.dataset.toggle && _this._rootNode && _this._rootNode.contains(_this.props.environment.document.activeElement); 56612 56613 if (!_this.isMouseDown && !downshiftButtonIsActive) { 56614 _this.reset({ 56615 type: blurInput 56616 }); 56617 } 56618 }); 56619 }; 56620 56621 _this.menuRef = function (node) { 56622 _this._menuNode = node; 56623 }; 56624 56625 _this.getMenuProps = function (_temp5, _temp6) { 56626 var _extends3; 56627 56628 var _ref5 = _temp5 === void 0 ? {} : _temp5, 56629 _ref5$refKey = _ref5.refKey, 56630 refKey = _ref5$refKey === void 0 ? 'ref' : _ref5$refKey, 56631 ref = _ref5.ref, 56632 props = _objectWithoutPropertiesLoose(_ref5, _excluded4$1); 56633 56634 var _ref6 = _temp6 === void 0 ? {} : _temp6, 56635 _ref6$suppressRefErro = _ref6.suppressRefError, 56636 suppressRefError = _ref6$suppressRefErro === void 0 ? false : _ref6$suppressRefErro; 56637 56638 _this.getMenuProps.called = true; 56639 _this.getMenuProps.refKey = refKey; 56640 _this.getMenuProps.suppressRefError = suppressRefError; 56641 return _extends((_extends3 = {}, _extends3[refKey] = handleRefs(ref, _this.menuRef), _extends3.role = 'listbox', _extends3['aria-labelledby'] = props && props['aria-label'] ? null : _this.labelId, _extends3.id = _this.menuId, _extends3), props); 56642 }; 56643 56644 _this.getItemProps = function (_temp7) { 56645 var _enabledEventHandlers; 56646 56647 var _ref7 = _temp7 === void 0 ? {} : _temp7, 56648 onMouseMove = _ref7.onMouseMove, 56649 onMouseDown = _ref7.onMouseDown, 56650 onClick = _ref7.onClick; 56651 _ref7.onPress; 56652 var index = _ref7.index, 56653 _ref7$item = _ref7.item, 56654 item = _ref7$item === void 0 ? true ? 56655 /* istanbul ignore next */ 56656 undefined : 0 : _ref7$item, 56657 rest = _objectWithoutPropertiesLoose(_ref7, _excluded5$1); 56658 56659 if (index === undefined) { 56660 _this.items.push(item); 56661 56662 index = _this.items.indexOf(item); 56663 } else { 56664 _this.items[index] = item; 56665 } 56666 56667 var onSelectKey = 'onClick'; 56668 var customClickHandler = onClick; 56669 var enabledEventHandlers = (_enabledEventHandlers = { 56670 // onMouseMove is used over onMouseEnter here. onMouseMove 56671 // is only triggered on actual mouse movement while onMouseEnter 56672 // can fire on DOM changes, interrupting keyboard navigation 56673 onMouseMove: callAllEventHandlers(onMouseMove, function () { 56674 if (index === _this.getState().highlightedIndex) { 56675 return; 56676 } 56677 56678 _this.setHighlightedIndex(index, { 56679 type: itemMouseEnter 56680 }); // We never want to manually scroll when changing state based 56681 // on `onMouseMove` because we will be moving the element out 56682 // from under the user which is currently scrolling/moving the 56683 // cursor 56684 56685 56686 _this.avoidScrolling = true; 56687 56688 _this.internalSetTimeout(function () { 56689 return _this.avoidScrolling = false; 56690 }, 250); 56691 }), 56692 onMouseDown: callAllEventHandlers(onMouseDown, function (event) { 56693 // This prevents the activeElement from being changed 56694 // to the item so it can remain with the current activeElement 56695 // which is a more common use case. 56696 event.preventDefault(); 56697 }) 56698 }, _enabledEventHandlers[onSelectKey] = callAllEventHandlers(customClickHandler, function () { 56699 _this.selectItemAtIndex(index, { 56700 type: clickItem 56701 }); 56702 }), _enabledEventHandlers); // Passing down the onMouseDown handler to prevent redirect 56703 // of the activeElement if clicking on disabled items 56704 56705 var eventHandlers = rest.disabled ? { 56706 onMouseDown: enabledEventHandlers.onMouseDown 56707 } : enabledEventHandlers; 56708 return _extends({ 56709 id: _this.getItemId(index), 56710 role: 'option', 56711 'aria-selected': _this.getState().highlightedIndex === index 56712 }, eventHandlers, rest); 56713 }; 56714 56715 _this.clearItems = function () { 56716 _this.items = []; 56717 }; 56718 56719 _this.reset = function (otherStateToSet, cb) { 56720 if (otherStateToSet === void 0) { 56721 otherStateToSet = {}; 56722 } 56723 56724 otherStateToSet = pickState(otherStateToSet); 56725 56726 _this.internalSetState(function (_ref8) { 56727 var selectedItem = _ref8.selectedItem; 56728 return _extends({ 56729 isOpen: _this.props.defaultIsOpen, 56730 highlightedIndex: _this.props.defaultHighlightedIndex, 56731 inputValue: _this.props.itemToString(selectedItem) 56732 }, otherStateToSet); 56733 }, cb); 56734 }; 56735 56736 _this.toggleMenu = function (otherStateToSet, cb) { 56737 if (otherStateToSet === void 0) { 56738 otherStateToSet = {}; 56739 } 56740 56741 otherStateToSet = pickState(otherStateToSet); 56742 56743 _this.internalSetState(function (_ref9) { 56744 var isOpen = _ref9.isOpen; 56745 return _extends({ 56746 isOpen: !isOpen 56747 }, isOpen && { 56748 highlightedIndex: _this.props.defaultHighlightedIndex 56749 }, otherStateToSet); 56750 }, function () { 56751 var _this$getState7 = _this.getState(), 56752 isOpen = _this$getState7.isOpen, 56753 highlightedIndex = _this$getState7.highlightedIndex; 56754 56755 if (isOpen) { 56756 if (_this.getItemCount() > 0 && typeof highlightedIndex === 'number') { 56757 _this.setHighlightedIndex(highlightedIndex, otherStateToSet); 56758 } 56759 } 56760 56761 cbToCb(cb)(); 56762 }); 56763 }; 56764 56765 _this.openMenu = function (cb) { 56766 _this.internalSetState({ 56767 isOpen: true 56768 }, cb); 56769 }; 56770 56771 _this.closeMenu = function (cb) { 56772 _this.internalSetState({ 56773 isOpen: false 56774 }, cb); 56775 }; 56776 56777 _this.updateStatus = downshift_esm_debounce(function () { 56778 var state = _this.getState(); 56779 56780 var item = _this.items[state.highlightedIndex]; 56781 56782 var resultCount = _this.getItemCount(); 56783 56784 var status = _this.props.getA11yStatusMessage(_extends({ 56785 itemToString: _this.props.itemToString, 56786 previousResultCount: _this.previousResultCount, 56787 resultCount: resultCount, 56788 highlightedItem: item 56789 }, state)); 56790 56791 _this.previousResultCount = resultCount; 56792 setStatus(status, _this.props.environment.document); 56793 }, 200); 56794 56795 var _this$props = _this.props, 56796 defaultHighlightedIndex = _this$props.defaultHighlightedIndex, 56797 _this$props$initialHi = _this$props.initialHighlightedIndex, 56798 _highlightedIndex = _this$props$initialHi === void 0 ? defaultHighlightedIndex : _this$props$initialHi, 56799 defaultIsOpen = _this$props.defaultIsOpen, 56800 _this$props$initialIs = _this$props.initialIsOpen, 56801 _isOpen = _this$props$initialIs === void 0 ? defaultIsOpen : _this$props$initialIs, 56802 _this$props$initialIn = _this$props.initialInputValue, 56803 _inputValue = _this$props$initialIn === void 0 ? '' : _this$props$initialIn, 56804 _this$props$initialSe = _this$props.initialSelectedItem, 56805 _selectedItem = _this$props$initialSe === void 0 ? null : _this$props$initialSe; 56806 56807 var _state = _this.getState({ 56808 highlightedIndex: _highlightedIndex, 56809 isOpen: _isOpen, 56810 inputValue: _inputValue, 56811 selectedItem: _selectedItem 56812 }); 56813 56814 if (_state.selectedItem != null && _this.props.initialInputValue === undefined) { 56815 _state.inputValue = _this.props.itemToString(_state.selectedItem); 56816 } 56817 56818 _this.state = _state; 56819 return _this; 56820 } 56821 56822 var _proto = Downshift.prototype; 56823 56824 /** 56825 * Clear all running timeouts 56826 */ 56827 _proto.internalClearTimeouts = function internalClearTimeouts() { 56828 this.timeoutIds.forEach(function (id) { 56829 clearTimeout(id); 56830 }); 56831 this.timeoutIds = []; 56832 } 56833 /** 56834 * Gets the state based on internal state or props 56835 * If a state value is passed via props, then that 56836 * is the value given, otherwise it's retrieved from 56837 * stateToMerge 56838 * 56839 * @param {Object} stateToMerge defaults to this.state 56840 * @return {Object} the state 56841 */ 56842 ; 56843 56844 _proto.getState = function getState$1(stateToMerge) { 56845 if (stateToMerge === void 0) { 56846 stateToMerge = this.state; 56847 } 56848 56849 return getState(stateToMerge, this.props); 56850 }; 56851 56852 _proto.getItemCount = function getItemCount() { 56853 // things read better this way. They're in priority order: 56854 // 1. `this.itemCount` 56855 // 2. `this.props.itemCount` 56856 // 3. `this.items.length` 56857 var itemCount = this.items.length; 56858 56859 if (this.itemCount != null) { 56860 itemCount = this.itemCount; 56861 } else if (this.props.itemCount !== undefined) { 56862 itemCount = this.props.itemCount; 56863 } 56864 56865 return itemCount; 56866 }; 56867 56868 _proto.getItemNodeFromIndex = function getItemNodeFromIndex(index) { 56869 return this.props.environment.document.getElementById(this.getItemId(index)); 56870 }; 56871 56872 _proto.scrollHighlightedItemIntoView = function scrollHighlightedItemIntoView() { 56873 /* istanbul ignore else (react-native) */ 56874 { 56875 var node = this.getItemNodeFromIndex(this.getState().highlightedIndex); 56876 this.props.scrollIntoView(node, this._menuNode); 56877 } 56878 }; 56879 56880 _proto.moveHighlightedIndex = function moveHighlightedIndex(amount, otherStateToSet) { 56881 var _this6 = this; 56882 56883 var itemCount = this.getItemCount(); 56884 56885 var _this$getState8 = this.getState(), 56886 highlightedIndex = _this$getState8.highlightedIndex; 56887 56888 if (itemCount > 0) { 56889 var nextHighlightedIndex = getNextWrappingIndex(amount, highlightedIndex, itemCount, function (index) { 56890 return _this6.getItemNodeFromIndex(index); 56891 }); 56892 this.setHighlightedIndex(nextHighlightedIndex, otherStateToSet); 56893 } 56894 }; 56895 56896 _proto.getStateAndHelpers = function getStateAndHelpers() { 56897 var _this$getState9 = this.getState(), 56898 highlightedIndex = _this$getState9.highlightedIndex, 56899 inputValue = _this$getState9.inputValue, 56900 selectedItem = _this$getState9.selectedItem, 56901 isOpen = _this$getState9.isOpen; 56902 56903 var itemToString = this.props.itemToString; 56904 var id = this.id; 56905 var getRootProps = this.getRootProps, 56906 getToggleButtonProps = this.getToggleButtonProps, 56907 getLabelProps = this.getLabelProps, 56908 getMenuProps = this.getMenuProps, 56909 getInputProps = this.getInputProps, 56910 getItemProps = this.getItemProps, 56911 openMenu = this.openMenu, 56912 closeMenu = this.closeMenu, 56913 toggleMenu = this.toggleMenu, 56914 selectItem = this.selectItem, 56915 selectItemAtIndex = this.selectItemAtIndex, 56916 selectHighlightedItem = this.selectHighlightedItem, 56917 setHighlightedIndex = this.setHighlightedIndex, 56918 clearSelection = this.clearSelection, 56919 clearItems = this.clearItems, 56920 reset = this.reset, 56921 setItemCount = this.setItemCount, 56922 unsetItemCount = this.unsetItemCount, 56923 setState = this.internalSetState; 56924 return { 56925 // prop getters 56926 getRootProps: getRootProps, 56927 getToggleButtonProps: getToggleButtonProps, 56928 getLabelProps: getLabelProps, 56929 getMenuProps: getMenuProps, 56930 getInputProps: getInputProps, 56931 getItemProps: getItemProps, 56932 // actions 56933 reset: reset, 56934 openMenu: openMenu, 56935 closeMenu: closeMenu, 56936 toggleMenu: toggleMenu, 56937 selectItem: selectItem, 56938 selectItemAtIndex: selectItemAtIndex, 56939 selectHighlightedItem: selectHighlightedItem, 56940 setHighlightedIndex: setHighlightedIndex, 56941 clearSelection: clearSelection, 56942 clearItems: clearItems, 56943 setItemCount: setItemCount, 56944 unsetItemCount: unsetItemCount, 56945 setState: setState, 56946 // props 56947 itemToString: itemToString, 56948 // derived 56949 id: id, 56950 // state 56951 highlightedIndex: highlightedIndex, 56952 inputValue: inputValue, 56953 isOpen: isOpen, 56954 selectedItem: selectedItem 56955 }; 56956 } //////////////////////////// ROOT 56957 ; 56958 56959 _proto.componentDidMount = function componentDidMount() { 56960 var _this7 = this; 56961 56962 /* istanbul ignore if (react-native) */ 56963 if (false) {} 56964 /* istanbul ignore if (react-native) */ 56965 56966 56967 { 56968 // this.isMouseDown helps us track whether the mouse is currently held down. 56969 // This is useful when the user clicks on an item in the list, but holds the mouse 56970 // down long enough for the list to disappear (because the blur event fires on the input) 56971 // this.isMouseDown is used in the blur handler on the input to determine whether the blur event should 56972 // trigger hiding the menu. 56973 var onMouseDown = function onMouseDown() { 56974 _this7.isMouseDown = true; 56975 }; 56976 56977 var onMouseUp = function onMouseUp(event) { 56978 _this7.isMouseDown = false; // if the target element or the activeElement is within a downshift node 56979 // then we don't want to reset downshift 56980 56981 var contextWithinDownshift = targetWithinDownshift(event.target, [_this7._rootNode, _this7._menuNode], _this7.props.environment); 56982 56983 if (!contextWithinDownshift && _this7.getState().isOpen) { 56984 _this7.reset({ 56985 type: mouseUp 56986 }, function () { 56987 return _this7.props.onOuterClick(_this7.getStateAndHelpers()); 56988 }); 56989 } 56990 }; // Touching an element in iOS gives focus and hover states, but touching out of 56991 // the element will remove hover, and persist the focus state, resulting in the 56992 // blur event not being triggered. 56993 // this.isTouchMove helps us track whether the user is tapping or swiping on a touch screen. 56994 // If the user taps outside of Downshift, the component should be reset, 56995 // but not if the user is swiping 56996 56997 56998 var onTouchStart = function onTouchStart() { 56999 _this7.isTouchMove = false; 57000 }; 57001 57002 var onTouchMove = function onTouchMove() { 57003 _this7.isTouchMove = true; 57004 }; 57005 57006 var onTouchEnd = function onTouchEnd(event) { 57007 var contextWithinDownshift = targetWithinDownshift(event.target, [_this7._rootNode, _this7._menuNode], _this7.props.environment, false); 57008 57009 if (!_this7.isTouchMove && !contextWithinDownshift && _this7.getState().isOpen) { 57010 _this7.reset({ 57011 type: touchEnd 57012 }, function () { 57013 return _this7.props.onOuterClick(_this7.getStateAndHelpers()); 57014 }); 57015 } 57016 }; 57017 57018 var environment = this.props.environment; 57019 environment.addEventListener('mousedown', onMouseDown); 57020 environment.addEventListener('mouseup', onMouseUp); 57021 environment.addEventListener('touchstart', onTouchStart); 57022 environment.addEventListener('touchmove', onTouchMove); 57023 environment.addEventListener('touchend', onTouchEnd); 57024 57025 this.cleanup = function () { 57026 _this7.internalClearTimeouts(); 57027 57028 _this7.updateStatus.cancel(); 57029 57030 environment.removeEventListener('mousedown', onMouseDown); 57031 environment.removeEventListener('mouseup', onMouseUp); 57032 environment.removeEventListener('touchstart', onTouchStart); 57033 environment.removeEventListener('touchmove', onTouchMove); 57034 environment.removeEventListener('touchend', onTouchEnd); 57035 }; 57036 } 57037 }; 57038 57039 _proto.shouldScroll = function shouldScroll(prevState, prevProps) { 57040 var _ref10 = this.props.highlightedIndex === undefined ? this.getState() : this.props, 57041 currentHighlightedIndex = _ref10.highlightedIndex; 57042 57043 var _ref11 = prevProps.highlightedIndex === undefined ? prevState : prevProps, 57044 prevHighlightedIndex = _ref11.highlightedIndex; 57045 57046 var scrollWhenOpen = currentHighlightedIndex && this.getState().isOpen && !prevState.isOpen; 57047 var scrollWhenNavigating = currentHighlightedIndex !== prevHighlightedIndex; 57048 return scrollWhenOpen || scrollWhenNavigating; 57049 }; 57050 57051 _proto.componentDidUpdate = function componentDidUpdate(prevProps, prevState) { 57052 if (false) {} 57053 57054 if (isControlledProp(this.props, 'selectedItem') && this.props.selectedItemChanged(prevProps.selectedItem, this.props.selectedItem)) { 57055 this.internalSetState({ 57056 type: controlledPropUpdatedSelectedItem, 57057 inputValue: this.props.itemToString(this.props.selectedItem) 57058 }); 57059 } 57060 57061 if (!this.avoidScrolling && this.shouldScroll(prevState, prevProps)) { 57062 this.scrollHighlightedItemIntoView(); 57063 } 57064 /* istanbul ignore else (react-native) */ 57065 57066 57067 { 57068 this.updateStatus(); 57069 } 57070 }; 57071 57072 _proto.componentWillUnmount = function componentWillUnmount() { 57073 this.cleanup(); // avoids memory leak 57074 }; 57075 57076 _proto.render = function render() { 57077 var children = unwrapArray(this.props.children, downshift_esm_noop); // because the items are rerendered every time we call the children 57078 // we clear this out each render and it will be populated again as 57079 // getItemProps is called. 57080 57081 this.clearItems(); // we reset this so we know whether the user calls getRootProps during 57082 // this render. If they do then we don't need to do anything, 57083 // if they don't then we need to clone the element they return and 57084 // apply the props for them. 57085 57086 this.getRootProps.called = false; 57087 this.getRootProps.refKey = undefined; 57088 this.getRootProps.suppressRefError = undefined; // we do something similar for getMenuProps 57089 57090 this.getMenuProps.called = false; 57091 this.getMenuProps.refKey = undefined; 57092 this.getMenuProps.suppressRefError = undefined; // we do something similar for getLabelProps 57093 57094 this.getLabelProps.called = false; // and something similar for getInputProps 57095 57096 this.getInputProps.called = false; 57097 var element = unwrapArray(children(this.getStateAndHelpers())); 57098 57099 if (!element) { 57100 return null; 57101 } 57102 57103 if (this.getRootProps.called || this.props.suppressRefError) { 57104 if (false) {} 57105 57106 return element; 57107 } else if (isDOMElement(element)) { 57108 // they didn't apply the root props, but we can clone 57109 // this and apply the props ourselves 57110 return /*#__PURE__*/cloneElement(element, this.getRootProps(getElementProps(element))); 57111 } 57112 /* istanbul ignore else */ 57113 57114 57115 if (false) {} 57116 /* istanbul ignore next */ 57117 57118 57119 return undefined; 57120 }; 57121 57122 return Downshift; 57123 }(Component); 57124 57125 Downshift.defaultProps = { 57126 defaultHighlightedIndex: null, 57127 defaultIsOpen: false, 57128 getA11yStatusMessage: getA11yStatusMessage$1, 57129 itemToString: function itemToString(i) { 57130 if (i == null) { 57131 return ''; 57132 } 57133 57134 if (false) {} 57135 57136 return String(i); 57137 }, 57138 onStateChange: downshift_esm_noop, 57139 onInputValueChange: downshift_esm_noop, 57140 onUserAction: downshift_esm_noop, 57141 onChange: downshift_esm_noop, 57142 onSelect: downshift_esm_noop, 57143 onOuterClick: downshift_esm_noop, 57144 selectedItemChanged: function selectedItemChanged(prevItem, item) { 57145 return prevItem !== item; 57146 }, 57147 environment: 57148 /* istanbul ignore next (ssr) */ 57149 typeof window === 'undefined' ? {} : window, 57150 stateReducer: function stateReducer(state, stateToSet) { 57151 return stateToSet; 57152 }, 57153 suppressRefError: false, 57154 scrollIntoView: scrollIntoView 57155 }; 57156 Downshift.stateChangeTypes = stateChangeTypes$3; 57157 return Downshift; 57158 }())); 57159 57160 false ? 0 : void 0; 57161 var Downshift$1 = (/* unused pure expression or super */ null && (Downshift)); 57162 57163 function validateGetMenuPropsCalledCorrectly(node, _ref12) { 57164 var refKey = _ref12.refKey; 57165 57166 if (!node) { 57167 // eslint-disable-next-line no-console 57168 console.error("downshift: The ref prop \"" + refKey + "\" from getMenuProps was not applied correctly on your menu element."); 57169 } 57170 } 57171 57172 function validateGetRootPropsCalledCorrectly(element, _ref13) { 57173 var refKey = _ref13.refKey; 57174 var refKeySpecified = refKey !== 'ref'; 57175 var isComposite = !isDOMElement(element); 57176 57177 if (isComposite && !refKeySpecified && !isForwardRef(element)) { 57178 // eslint-disable-next-line no-console 57179 console.error('downshift: You returned a non-DOM element. You must specify a refKey in getRootProps'); 57180 } else if (!isComposite && refKeySpecified) { 57181 // eslint-disable-next-line no-console 57182 console.error("downshift: You returned a DOM element. You should not specify a refKey in getRootProps. You specified \"" + refKey + "\""); 57183 } 57184 57185 if (!isForwardRef(element) && !getElementProps(element)[refKey]) { 57186 // eslint-disable-next-line no-console 57187 console.error("downshift: You must apply the ref prop \"" + refKey + "\" from getRootProps onto your root element."); 57188 } 57189 } 57190 57191 var _excluded$3 = ["isInitialMount", "highlightedIndex", "items", "environment"]; 57192 var dropdownDefaultStateValues = { 57193 highlightedIndex: -1, 57194 isOpen: false, 57195 selectedItem: null, 57196 inputValue: '' 57197 }; 57198 57199 function callOnChangeProps(action, state, newState) { 57200 var props = action.props, 57201 type = action.type; 57202 var changes = {}; 57203 Object.keys(state).forEach(function (key) { 57204 invokeOnChangeHandler(key, action, state, newState); 57205 57206 if (newState[key] !== state[key]) { 57207 changes[key] = newState[key]; 57208 } 57209 }); 57210 57211 if (props.onStateChange && Object.keys(changes).length) { 57212 props.onStateChange(extends_extends({ 57213 type: type 57214 }, changes)); 57215 } 57216 } 57217 57218 function invokeOnChangeHandler(key, action, state, newState) { 57219 var props = action.props, 57220 type = action.type; 57221 var handler = "on" + capitalizeString(key) + "Change"; 57222 57223 if (props[handler] && newState[key] !== undefined && newState[key] !== state[key]) { 57224 props[handler](extends_extends({ 57225 type: type 57226 }, newState)); 57227 } 57228 } 57229 /** 57230 * Default state reducer that returns the changes. 57231 * 57232 * @param {Object} s state. 57233 * @param {Object} a action with changes. 57234 * @returns {Object} changes. 57235 */ 57236 57237 57238 function stateReducer(s, a) { 57239 return a.changes; 57240 } 57241 /** 57242 * Returns a message to be added to aria-live region when item is selected. 57243 * 57244 * @param {Object} selectionParameters Parameters required to build the message. 57245 * @returns {string} The a11y message. 57246 */ 57247 57248 57249 function getA11ySelectionMessage(selectionParameters) { 57250 var selectedItem = selectionParameters.selectedItem, 57251 itemToStringLocal = selectionParameters.itemToString; 57252 return selectedItem ? itemToStringLocal(selectedItem) + " has been selected." : ''; 57253 } 57254 /** 57255 * Debounced call for updating the a11y message. 57256 */ 57257 57258 57259 var updateA11yStatus = downshift_esm_debounce(function (getA11yMessage, document) { 57260 setStatus(getA11yMessage(), document); 57261 }, 200); // istanbul ignore next 57262 57263 var downshift_esm_useIsomorphicLayoutEffect = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined' ? external_React_.useLayoutEffect : external_React_.useEffect; 57264 57265 function useElementIds(_ref) { 57266 var _ref$id = _ref.id, 57267 id = _ref$id === void 0 ? "downshift-" + generateId() : _ref$id, 57268 labelId = _ref.labelId, 57269 menuId = _ref.menuId, 57270 getItemId = _ref.getItemId, 57271 toggleButtonId = _ref.toggleButtonId, 57272 inputId = _ref.inputId; 57273 var elementIdsRef = (0,external_React_.useRef)({ 57274 labelId: labelId || id + "-label", 57275 menuId: menuId || id + "-menu", 57276 getItemId: getItemId || function (index) { 57277 return id + "-item-" + index; 57278 }, 57279 toggleButtonId: toggleButtonId || id + "-toggle-button", 57280 inputId: inputId || id + "-input" 57281 }); 57282 return elementIdsRef.current; 57283 } 57284 57285 function getItemIndex(index, item, items) { 57286 if (index !== undefined) { 57287 return index; 57288 } 57289 57290 if (items.length === 0) { 57291 return -1; 57292 } 57293 57294 return items.indexOf(item); 57295 } 57296 57297 function itemToString(item) { 57298 return item ? String(item) : ''; 57299 } 57300 57301 function isAcceptedCharacterKey(key) { 57302 return /^\S{1}$/.test(key); 57303 } 57304 57305 function capitalizeString(string) { 57306 return "" + string.slice(0, 1).toUpperCase() + string.slice(1); 57307 } 57308 57309 function useLatestRef(val) { 57310 var ref = (0,external_React_.useRef)(val); // technically this is not "concurrent mode safe" because we're manipulating 57311 // the value during render (so it's not idempotent). However, the places this 57312 // hook is used is to support memoizing callbacks which will be called 57313 // *during* render, so we need the latest values *during* render. 57314 // If not for this, then we'd probably want to use useLayoutEffect instead. 57315 57316 ref.current = val; 57317 return ref; 57318 } 57319 /** 57320 * Computes the controlled state using a the previous state, props, 57321 * two reducers, one from downshift and an optional one from the user. 57322 * Also calls the onChange handlers for state values that have changed. 57323 * 57324 * @param {Function} reducer Reducer function from downshift. 57325 * @param {Object} initialState Initial state of the hook. 57326 * @param {Object} props The hook props. 57327 * @returns {Array} An array with the state and an action dispatcher. 57328 */ 57329 57330 57331 function useEnhancedReducer(reducer, initialState, props) { 57332 var prevStateRef = (0,external_React_.useRef)(); 57333 var actionRef = (0,external_React_.useRef)(); 57334 var enhancedReducer = (0,external_React_.useCallback)(function (state, action) { 57335 actionRef.current = action; 57336 state = getState(state, action.props); 57337 var changes = reducer(state, action); 57338 var newState = action.props.stateReducer(state, extends_extends({}, action, { 57339 changes: changes 57340 })); 57341 return newState; 57342 }, [reducer]); 57343 57344 var _useReducer = (0,external_React_.useReducer)(enhancedReducer, initialState), 57345 state = _useReducer[0], 57346 dispatch = _useReducer[1]; 57347 57348 var propsRef = useLatestRef(props); 57349 var dispatchWithProps = (0,external_React_.useCallback)(function (action) { 57350 return dispatch(extends_extends({ 57351 props: propsRef.current 57352 }, action)); 57353 }, [propsRef]); 57354 var action = actionRef.current; 57355 (0,external_React_.useEffect)(function () { 57356 if (action && prevStateRef.current && prevStateRef.current !== state) { 57357 callOnChangeProps(action, getState(prevStateRef.current, action.props), state); 57358 } 57359 57360 prevStateRef.current = state; 57361 }, [state, props, action]); 57362 return [state, dispatchWithProps]; 57363 } 57364 /** 57365 * Wraps the useEnhancedReducer and applies the controlled prop values before 57366 * returning the new state. 57367 * 57368 * @param {Function} reducer Reducer function from downshift. 57369 * @param {Object} initialState Initial state of the hook. 57370 * @param {Object} props The hook props. 57371 * @returns {Array} An array with the state and an action dispatcher. 57372 */ 57373 57374 57375 function useControlledReducer$1(reducer, initialState, props) { 57376 var _useEnhancedReducer = useEnhancedReducer(reducer, initialState, props), 57377 state = _useEnhancedReducer[0], 57378 dispatch = _useEnhancedReducer[1]; 57379 57380 return [getState(state, props), dispatch]; 57381 } 57382 57383 var defaultProps$3 = { 57384 itemToString: itemToString, 57385 stateReducer: stateReducer, 57386 getA11ySelectionMessage: getA11ySelectionMessage, 57387 scrollIntoView: scrollIntoView, 57388 circularNavigation: false, 57389 environment: 57390 /* istanbul ignore next (ssr) */ 57391 typeof window === 'undefined' ? {} : window 57392 }; 57393 57394 function getDefaultValue$1(props, propKey, defaultStateValues) { 57395 if (defaultStateValues === void 0) { 57396 defaultStateValues = dropdownDefaultStateValues; 57397 } 57398 57399 var defaultPropKey = "default" + capitalizeString(propKey); 57400 57401 if (defaultPropKey in props) { 57402 return props[defaultPropKey]; 57403 } 57404 57405 return defaultStateValues[propKey]; 57406 } 57407 57408 function getInitialValue$1(props, propKey, defaultStateValues) { 57409 if (defaultStateValues === void 0) { 57410 defaultStateValues = dropdownDefaultStateValues; 57411 } 57412 57413 if (propKey in props) { 57414 return props[propKey]; 57415 } 57416 57417 var initialPropKey = "initial" + capitalizeString(propKey); 57418 57419 if (initialPropKey in props) { 57420 return props[initialPropKey]; 57421 } 57422 57423 return getDefaultValue$1(props, propKey, defaultStateValues); 57424 } 57425 57426 function getInitialState$2(props) { 57427 var selectedItem = getInitialValue$1(props, 'selectedItem'); 57428 var isOpen = getInitialValue$1(props, 'isOpen'); 57429 var highlightedIndex = getInitialValue$1(props, 'highlightedIndex'); 57430 var inputValue = getInitialValue$1(props, 'inputValue'); 57431 return { 57432 highlightedIndex: highlightedIndex < 0 && selectedItem && isOpen ? props.items.indexOf(selectedItem) : highlightedIndex, 57433 isOpen: isOpen, 57434 selectedItem: selectedItem, 57435 inputValue: inputValue 57436 }; 57437 } 57438 57439 function getHighlightedIndexOnOpen(props, state, offset, getItemNodeFromIndex) { 57440 var items = props.items, 57441 initialHighlightedIndex = props.initialHighlightedIndex, 57442 defaultHighlightedIndex = props.defaultHighlightedIndex; 57443 var selectedItem = state.selectedItem, 57444 highlightedIndex = state.highlightedIndex; 57445 57446 if (items.length === 0) { 57447 return -1; 57448 } // initialHighlightedIndex will give value to highlightedIndex on initial state only. 57449 57450 57451 if (initialHighlightedIndex !== undefined && highlightedIndex === initialHighlightedIndex) { 57452 return initialHighlightedIndex; 57453 } 57454 57455 if (defaultHighlightedIndex !== undefined) { 57456 return defaultHighlightedIndex; 57457 } 57458 57459 if (selectedItem) { 57460 if (offset === 0) { 57461 return items.indexOf(selectedItem); 57462 } 57463 57464 return getNextWrappingIndex(offset, items.indexOf(selectedItem), items.length, getItemNodeFromIndex, false); 57465 } 57466 57467 if (offset === 0) { 57468 return -1; 57469 } 57470 57471 return offset < 0 ? items.length - 1 : 0; 57472 } 57473 /** 57474 * Reuse the movement tracking of mouse and touch events. 57475 * 57476 * @param {boolean} isOpen Whether the dropdown is open or not. 57477 * @param {Array<Object>} downshiftElementRefs Downshift element refs to track movement (toggleButton, menu etc.) 57478 * @param {Object} environment Environment where component/hook exists. 57479 * @param {Function} handleBlur Handler on blur from mouse or touch. 57480 * @returns {Object} Ref containing whether mouseDown or touchMove event is happening 57481 */ 57482 57483 57484 function useMouseAndTouchTracker(isOpen, downshiftElementRefs, environment, handleBlur) { 57485 var mouseAndTouchTrackersRef = (0,external_React_.useRef)({ 57486 isMouseDown: false, 57487 isTouchMove: false 57488 }); 57489 (0,external_React_.useEffect)(function () { 57490 // The same strategy for checking if a click occurred inside or outside downsift 57491 // as in downshift.js. 57492 var onMouseDown = function onMouseDown() { 57493 mouseAndTouchTrackersRef.current.isMouseDown = true; 57494 }; 57495 57496 var onMouseUp = function onMouseUp(event) { 57497 mouseAndTouchTrackersRef.current.isMouseDown = false; 57498 57499 if (isOpen && !targetWithinDownshift(event.target, downshiftElementRefs.map(function (ref) { 57500 return ref.current; 57501 }), environment)) { 57502 handleBlur(); 57503 } 57504 }; 57505 57506 var onTouchStart = function onTouchStart() { 57507 mouseAndTouchTrackersRef.current.isTouchMove = false; 57508 }; 57509 57510 var onTouchMove = function onTouchMove() { 57511 mouseAndTouchTrackersRef.current.isTouchMove = true; 57512 }; 57513 57514 var onTouchEnd = function onTouchEnd(event) { 57515 if (isOpen && !mouseAndTouchTrackersRef.current.isTouchMove && !targetWithinDownshift(event.target, downshiftElementRefs.map(function (ref) { 57516 return ref.current; 57517 }), environment, false)) { 57518 handleBlur(); 57519 } 57520 }; 57521 57522 environment.addEventListener('mousedown', onMouseDown); 57523 environment.addEventListener('mouseup', onMouseUp); 57524 environment.addEventListener('touchstart', onTouchStart); 57525 environment.addEventListener('touchmove', onTouchMove); 57526 environment.addEventListener('touchend', onTouchEnd); 57527 return function cleanup() { 57528 environment.removeEventListener('mousedown', onMouseDown); 57529 environment.removeEventListener('mouseup', onMouseUp); 57530 environment.removeEventListener('touchstart', onTouchStart); 57531 environment.removeEventListener('touchmove', onTouchMove); 57532 environment.removeEventListener('touchend', onTouchEnd); 57533 }; // eslint-disable-next-line react-hooks/exhaustive-deps 57534 }, [isOpen, environment]); 57535 return mouseAndTouchTrackersRef; 57536 } 57537 /* istanbul ignore next */ 57538 // eslint-disable-next-line import/no-mutable-exports 57539 57540 57541 var useGetterPropsCalledChecker = function useGetterPropsCalledChecker() { 57542 return downshift_esm_noop; 57543 }; 57544 /** 57545 * Custom hook that checks if getter props are called correctly. 57546 * 57547 * @param {...any} propKeys Getter prop names to be handled. 57548 * @returns {Function} Setter function called inside getter props to set call information. 57549 */ 57550 57551 /* istanbul ignore next */ 57552 57553 57554 if (false) {} 57555 57556 function useA11yMessageSetter(getA11yMessage, dependencyArray, _ref2) { 57557 var isInitialMount = _ref2.isInitialMount, 57558 highlightedIndex = _ref2.highlightedIndex, 57559 items = _ref2.items, 57560 environment = _ref2.environment, 57561 rest = objectWithoutPropertiesLoose_objectWithoutPropertiesLoose(_ref2, _excluded$3); 57562 57563 // Sets a11y status message on changes in state. 57564 (0,external_React_.useEffect)(function () { 57565 if (isInitialMount || false) { 57566 return; 57567 } 57568 57569 updateA11yStatus(function () { 57570 return getA11yMessage(extends_extends({ 57571 highlightedIndex: highlightedIndex, 57572 highlightedItem: items[highlightedIndex], 57573 resultCount: items.length 57574 }, rest)); 57575 }, environment.document); // eslint-disable-next-line react-hooks/exhaustive-deps 57576 }, dependencyArray); 57577 } 57578 57579 function useScrollIntoView(_ref3) { 57580 var highlightedIndex = _ref3.highlightedIndex, 57581 isOpen = _ref3.isOpen, 57582 itemRefs = _ref3.itemRefs, 57583 getItemNodeFromIndex = _ref3.getItemNodeFromIndex, 57584 menuElement = _ref3.menuElement, 57585 scrollIntoViewProp = _ref3.scrollIntoView; 57586 // used not to scroll on highlight by mouse. 57587 var shouldScrollRef = (0,external_React_.useRef)(true); // Scroll on highlighted item if change comes from keyboard. 57588 57589 downshift_esm_useIsomorphicLayoutEffect(function () { 57590 if (highlightedIndex < 0 || !isOpen || !Object.keys(itemRefs.current).length) { 57591 return; 57592 } 57593 57594 if (shouldScrollRef.current === false) { 57595 shouldScrollRef.current = true; 57596 } else { 57597 scrollIntoViewProp(getItemNodeFromIndex(highlightedIndex), menuElement); 57598 } // eslint-disable-next-line react-hooks/exhaustive-deps 57599 57600 }, [highlightedIndex]); 57601 return shouldScrollRef; 57602 } // eslint-disable-next-line import/no-mutable-exports 57603 57604 57605 var useControlPropsValidator = downshift_esm_noop; 57606 /* istanbul ignore next */ 57607 57608 if (false) {} 57609 57610 /* eslint-disable complexity */ 57611 57612 function downshiftCommonReducer(state, action, stateChangeTypes) { 57613 var type = action.type, 57614 props = action.props; 57615 var changes; 57616 57617 switch (type) { 57618 case stateChangeTypes.ItemMouseMove: 57619 changes = { 57620 highlightedIndex: action.index 57621 }; 57622 break; 57623 57624 case stateChangeTypes.MenuMouseLeave: 57625 changes = { 57626 highlightedIndex: -1 57627 }; 57628 break; 57629 57630 case stateChangeTypes.ToggleButtonClick: 57631 case stateChangeTypes.FunctionToggleMenu: 57632 changes = { 57633 isOpen: !state.isOpen, 57634 highlightedIndex: state.isOpen ? -1 : getHighlightedIndexOnOpen(props, state, 0) 57635 }; 57636 break; 57637 57638 case stateChangeTypes.FunctionOpenMenu: 57639 changes = { 57640 isOpen: true, 57641 highlightedIndex: getHighlightedIndexOnOpen(props, state, 0) 57642 }; 57643 break; 57644 57645 case stateChangeTypes.FunctionCloseMenu: 57646 changes = { 57647 isOpen: false 57648 }; 57649 break; 57650 57651 case stateChangeTypes.FunctionSetHighlightedIndex: 57652 changes = { 57653 highlightedIndex: action.highlightedIndex 57654 }; 57655 break; 57656 57657 case stateChangeTypes.FunctionSetInputValue: 57658 changes = { 57659 inputValue: action.inputValue 57660 }; 57661 break; 57662 57663 case stateChangeTypes.FunctionReset: 57664 changes = { 57665 highlightedIndex: getDefaultValue$1(props, 'highlightedIndex'), 57666 isOpen: getDefaultValue$1(props, 'isOpen'), 57667 selectedItem: getDefaultValue$1(props, 'selectedItem'), 57668 inputValue: getDefaultValue$1(props, 'inputValue') 57669 }; 57670 break; 57671 57672 default: 57673 throw new Error('Reducer called without proper action type.'); 57674 } 57675 57676 return extends_extends({}, state, changes); 57677 } 57678 /* eslint-enable complexity */ 57679 57680 function getItemIndexByCharacterKey(_a) { 57681 var keysSoFar = _a.keysSoFar, highlightedIndex = _a.highlightedIndex, items = _a.items, itemToString = _a.itemToString, getItemNodeFromIndex = _a.getItemNodeFromIndex; 57682 var lowerCasedKeysSoFar = keysSoFar.toLowerCase(); 57683 for (var index = 0; index < items.length; index++) { 57684 var offsetIndex = (index + highlightedIndex + 1) % items.length; 57685 var item = items[offsetIndex]; 57686 if (item !== undefined && 57687 itemToString(item) 57688 .toLowerCase() 57689 .startsWith(lowerCasedKeysSoFar)) { 57690 var element = getItemNodeFromIndex(offsetIndex); 57691 if (!(element === null || element === void 0 ? void 0 : element.hasAttribute('disabled'))) { 57692 return offsetIndex; 57693 } 57694 } 57695 } 57696 return highlightedIndex; 57697 } 57698 var propTypes$2 = { 57699 items: (prop_types_default()).array.isRequired, 57700 itemToString: (prop_types_default()).func, 57701 getA11yStatusMessage: (prop_types_default()).func, 57702 getA11ySelectionMessage: (prop_types_default()).func, 57703 circularNavigation: (prop_types_default()).bool, 57704 highlightedIndex: (prop_types_default()).number, 57705 defaultHighlightedIndex: (prop_types_default()).number, 57706 initialHighlightedIndex: (prop_types_default()).number, 57707 isOpen: (prop_types_default()).bool, 57708 defaultIsOpen: (prop_types_default()).bool, 57709 initialIsOpen: (prop_types_default()).bool, 57710 selectedItem: (prop_types_default()).any, 57711 initialSelectedItem: (prop_types_default()).any, 57712 defaultSelectedItem: (prop_types_default()).any, 57713 id: (prop_types_default()).string, 57714 labelId: (prop_types_default()).string, 57715 menuId: (prop_types_default()).string, 57716 getItemId: (prop_types_default()).func, 57717 toggleButtonId: (prop_types_default()).string, 57718 stateReducer: (prop_types_default()).func, 57719 onSelectedItemChange: (prop_types_default()).func, 57720 onHighlightedIndexChange: (prop_types_default()).func, 57721 onStateChange: (prop_types_default()).func, 57722 onIsOpenChange: (prop_types_default()).func, 57723 environment: prop_types_default().shape({ 57724 addEventListener: (prop_types_default()).func, 57725 removeEventListener: (prop_types_default()).func, 57726 document: prop_types_default().shape({ 57727 getElementById: (prop_types_default()).func, 57728 activeElement: (prop_types_default()).any, 57729 body: (prop_types_default()).any 57730 }) 57731 }) 57732 }; 57733 /** 57734 * Default implementation for status message. Only added when menu is open. 57735 * Will specift if there are results in the list, and if so, how many, 57736 * and what keys are relevant. 57737 * 57738 * @param {Object} param the downshift state and other relevant properties 57739 * @return {String} the a11y status message 57740 */ 57741 function getA11yStatusMessage(_a) { 57742 var isOpen = _a.isOpen, resultCount = _a.resultCount, previousResultCount = _a.previousResultCount; 57743 if (!isOpen) { 57744 return ''; 57745 } 57746 if (!resultCount) { 57747 return 'No results are available.'; 57748 } 57749 if (resultCount !== previousResultCount) { 57750 return resultCount + " result" + (resultCount === 1 ? ' is' : 's are') + " available, use up and down arrow keys to navigate. Press Enter or Space Bar keys to select."; 57751 } 57752 return ''; 57753 } 57754 var defaultProps$2 = __assign(__assign({}, defaultProps$3), { getA11yStatusMessage: getA11yStatusMessage }); 57755 // eslint-disable-next-line import/no-mutable-exports 57756 var validatePropTypes$2 = downshift_esm_noop; 57757 /* istanbul ignore next */ 57758 if (false) {} 57759 57760 var MenuKeyDownArrowDown = false ? 0 : 0; 57761 var MenuKeyDownArrowUp = false ? 0 : 1; 57762 var MenuKeyDownEscape = false ? 0 : 2; 57763 var MenuKeyDownHome = false ? 0 : 3; 57764 var MenuKeyDownEnd = false ? 0 : 4; 57765 var MenuKeyDownEnter = false ? 0 : 5; 57766 var MenuKeyDownSpaceButton = false ? 0 : 6; 57767 var MenuKeyDownCharacter = false ? 0 : 7; 57768 var MenuBlur = false ? 0 : 8; 57769 var MenuMouseLeave$1 = false ? 0 : 9; 57770 var ItemMouseMove$1 = false ? 0 : 10; 57771 var ItemClick$1 = false ? 0 : 11; 57772 var ToggleButtonClick$1 = false ? 0 : 12; 57773 var ToggleButtonKeyDownArrowDown = false ? 0 : 13; 57774 var ToggleButtonKeyDownArrowUp = false ? 0 : 14; 57775 var ToggleButtonKeyDownCharacter = false ? 0 : 15; 57776 var FunctionToggleMenu$1 = false ? 0 : 16; 57777 var FunctionOpenMenu$1 = false ? 0 : 17; 57778 var FunctionCloseMenu$1 = false ? 0 : 18; 57779 var FunctionSetHighlightedIndex$1 = false ? 0 : 19; 57780 var FunctionSelectItem$1 = false ? 0 : 20; 57781 var FunctionSetInputValue$1 = false ? 0 : 21; 57782 var FunctionReset$2 = false ? 0 : 22; 57783 57784 var stateChangeTypes$2 = /*#__PURE__*/Object.freeze({ 57785 __proto__: null, 57786 MenuKeyDownArrowDown: MenuKeyDownArrowDown, 57787 MenuKeyDownArrowUp: MenuKeyDownArrowUp, 57788 MenuKeyDownEscape: MenuKeyDownEscape, 57789 MenuKeyDownHome: MenuKeyDownHome, 57790 MenuKeyDownEnd: MenuKeyDownEnd, 57791 MenuKeyDownEnter: MenuKeyDownEnter, 57792 MenuKeyDownSpaceButton: MenuKeyDownSpaceButton, 57793 MenuKeyDownCharacter: MenuKeyDownCharacter, 57794 MenuBlur: MenuBlur, 57795 MenuMouseLeave: MenuMouseLeave$1, 57796 ItemMouseMove: ItemMouseMove$1, 57797 ItemClick: ItemClick$1, 57798 ToggleButtonClick: ToggleButtonClick$1, 57799 ToggleButtonKeyDownArrowDown: ToggleButtonKeyDownArrowDown, 57800 ToggleButtonKeyDownArrowUp: ToggleButtonKeyDownArrowUp, 57801 ToggleButtonKeyDownCharacter: ToggleButtonKeyDownCharacter, 57802 FunctionToggleMenu: FunctionToggleMenu$1, 57803 FunctionOpenMenu: FunctionOpenMenu$1, 57804 FunctionCloseMenu: FunctionCloseMenu$1, 57805 FunctionSetHighlightedIndex: FunctionSetHighlightedIndex$1, 57806 FunctionSelectItem: FunctionSelectItem$1, 57807 FunctionSetInputValue: FunctionSetInputValue$1, 57808 FunctionReset: FunctionReset$2 57809 }); 57810 57811 /* eslint-disable complexity */ 57812 57813 function downshiftSelectReducer(state, action) { 57814 var type = action.type, 57815 props = action.props, 57816 shiftKey = action.shiftKey; 57817 var changes; 57818 57819 switch (type) { 57820 case ItemClick$1: 57821 changes = { 57822 isOpen: getDefaultValue$1(props, 'isOpen'), 57823 highlightedIndex: getDefaultValue$1(props, 'highlightedIndex'), 57824 selectedItem: props.items[action.index] 57825 }; 57826 break; 57827 57828 case ToggleButtonKeyDownCharacter: 57829 { 57830 var lowercasedKey = action.key; 57831 var inputValue = "" + state.inputValue + lowercasedKey; 57832 var itemIndex = getItemIndexByCharacterKey({ 57833 keysSoFar: inputValue, 57834 highlightedIndex: state.selectedItem ? props.items.indexOf(state.selectedItem) : -1, 57835 items: props.items, 57836 itemToString: props.itemToString, 57837 getItemNodeFromIndex: action.getItemNodeFromIndex 57838 }); 57839 changes = extends_extends({ 57840 inputValue: inputValue 57841 }, itemIndex >= 0 && { 57842 selectedItem: props.items[itemIndex] 57843 }); 57844 } 57845 break; 57846 57847 case ToggleButtonKeyDownArrowDown: 57848 changes = { 57849 highlightedIndex: getHighlightedIndexOnOpen(props, state, 1, action.getItemNodeFromIndex), 57850 isOpen: true 57851 }; 57852 break; 57853 57854 case ToggleButtonKeyDownArrowUp: 57855 changes = { 57856 highlightedIndex: getHighlightedIndexOnOpen(props, state, -1, action.getItemNodeFromIndex), 57857 isOpen: true 57858 }; 57859 break; 57860 57861 case MenuKeyDownEnter: 57862 case MenuKeyDownSpaceButton: 57863 changes = extends_extends({ 57864 isOpen: getDefaultValue$1(props, 'isOpen'), 57865 highlightedIndex: getDefaultValue$1(props, 'highlightedIndex') 57866 }, state.highlightedIndex >= 0 && { 57867 selectedItem: props.items[state.highlightedIndex] 57868 }); 57869 break; 57870 57871 case MenuKeyDownHome: 57872 changes = { 57873 highlightedIndex: getNextNonDisabledIndex(1, 0, props.items.length, action.getItemNodeFromIndex, false) 57874 }; 57875 break; 57876 57877 case MenuKeyDownEnd: 57878 changes = { 57879 highlightedIndex: getNextNonDisabledIndex(-1, props.items.length - 1, props.items.length, action.getItemNodeFromIndex, false) 57880 }; 57881 break; 57882 57883 case MenuKeyDownEscape: 57884 changes = { 57885 isOpen: false, 57886 highlightedIndex: -1 57887 }; 57888 break; 57889 57890 case MenuBlur: 57891 changes = { 57892 isOpen: false, 57893 highlightedIndex: -1 57894 }; 57895 break; 57896 57897 case MenuKeyDownCharacter: 57898 { 57899 var _lowercasedKey = action.key; 57900 57901 var _inputValue = "" + state.inputValue + _lowercasedKey; 57902 57903 var highlightedIndex = getItemIndexByCharacterKey({ 57904 keysSoFar: _inputValue, 57905 highlightedIndex: state.highlightedIndex, 57906 items: props.items, 57907 itemToString: props.itemToString, 57908 getItemNodeFromIndex: action.getItemNodeFromIndex 57909 }); 57910 changes = extends_extends({ 57911 inputValue: _inputValue 57912 }, highlightedIndex >= 0 && { 57913 highlightedIndex: highlightedIndex 57914 }); 57915 } 57916 break; 57917 57918 case MenuKeyDownArrowDown: 57919 changes = { 57920 highlightedIndex: getNextWrappingIndex(shiftKey ? 5 : 1, state.highlightedIndex, props.items.length, action.getItemNodeFromIndex, props.circularNavigation) 57921 }; 57922 break; 57923 57924 case MenuKeyDownArrowUp: 57925 changes = { 57926 highlightedIndex: getNextWrappingIndex(shiftKey ? -5 : -1, state.highlightedIndex, props.items.length, action.getItemNodeFromIndex, props.circularNavigation) 57927 }; 57928 break; 57929 57930 case FunctionSelectItem$1: 57931 changes = { 57932 selectedItem: action.selectedItem 57933 }; 57934 break; 57935 57936 default: 57937 return downshiftCommonReducer(state, action, stateChangeTypes$2); 57938 } 57939 57940 return extends_extends({}, state, changes); 57941 } 57942 /* eslint-enable complexity */ 57943 57944 var _excluded$2 = ["onMouseLeave", "refKey", "onKeyDown", "onBlur", "ref"], 57945 _excluded2$2 = ["onClick", "onKeyDown", "refKey", "ref"], 57946 _excluded3$1 = ["item", "index", "onMouseMove", "onClick", "refKey", "ref"]; 57947 useSelect.stateChangeTypes = stateChangeTypes$2; 57948 57949 function useSelect(userProps) { 57950 if (userProps === void 0) { 57951 userProps = {}; 57952 } 57953 57954 validatePropTypes$2(userProps, useSelect); // Props defaults and destructuring. 57955 57956 var props = extends_extends({}, defaultProps$2, userProps); 57957 57958 var items = props.items, 57959 scrollIntoView = props.scrollIntoView, 57960 environment = props.environment, 57961 initialIsOpen = props.initialIsOpen, 57962 defaultIsOpen = props.defaultIsOpen, 57963 itemToString = props.itemToString, 57964 getA11ySelectionMessage = props.getA11ySelectionMessage, 57965 getA11yStatusMessage = props.getA11yStatusMessage; // Initial state depending on controlled props. 57966 57967 var initialState = getInitialState$2(props); 57968 57969 var _useControlledReducer = useControlledReducer$1(downshiftSelectReducer, initialState, props), 57970 state = _useControlledReducer[0], 57971 dispatch = _useControlledReducer[1]; 57972 57973 var isOpen = state.isOpen, 57974 highlightedIndex = state.highlightedIndex, 57975 selectedItem = state.selectedItem, 57976 inputValue = state.inputValue; // Element efs. 57977 57978 var toggleButtonRef = (0,external_React_.useRef)(null); 57979 var menuRef = (0,external_React_.useRef)(null); 57980 var itemRefs = (0,external_React_.useRef)({}); // used not to trigger menu blur action in some scenarios. 57981 57982 var shouldBlurRef = (0,external_React_.useRef)(true); // used to keep the inputValue clearTimeout object between renders. 57983 57984 var clearTimeoutRef = (0,external_React_.useRef)(null); // prevent id re-generation between renders. 57985 57986 var elementIds = useElementIds(props); // used to keep track of how many items we had on previous cycle. 57987 57988 var previousResultCountRef = (0,external_React_.useRef)(); 57989 var isInitialMountRef = (0,external_React_.useRef)(true); // utility callback to get item element. 57990 57991 var latest = useLatestRef({ 57992 state: state, 57993 props: props 57994 }); // Some utils. 57995 57996 var getItemNodeFromIndex = (0,external_React_.useCallback)(function (index) { 57997 return itemRefs.current[elementIds.getItemId(index)]; 57998 }, [elementIds]); // Effects. 57999 // Sets a11y status message on changes in state. 58000 58001 useA11yMessageSetter(getA11yStatusMessage, [isOpen, highlightedIndex, inputValue, items], extends_extends({ 58002 isInitialMount: isInitialMountRef.current, 58003 previousResultCount: previousResultCountRef.current, 58004 items: items, 58005 environment: environment, 58006 itemToString: itemToString 58007 }, state)); // Sets a11y status message on changes in selectedItem. 58008 58009 useA11yMessageSetter(getA11ySelectionMessage, [selectedItem], extends_extends({ 58010 isInitialMount: isInitialMountRef.current, 58011 previousResultCount: previousResultCountRef.current, 58012 items: items, 58013 environment: environment, 58014 itemToString: itemToString 58015 }, state)); // Scroll on highlighted item if change comes from keyboard. 58016 58017 var shouldScrollRef = useScrollIntoView({ 58018 menuElement: menuRef.current, 58019 highlightedIndex: highlightedIndex, 58020 isOpen: isOpen, 58021 itemRefs: itemRefs, 58022 scrollIntoView: scrollIntoView, 58023 getItemNodeFromIndex: getItemNodeFromIndex 58024 }); // Sets cleanup for the keysSoFar callback, debounded after 500ms. 58025 58026 (0,external_React_.useEffect)(function () { 58027 // init the clean function here as we need access to dispatch. 58028 clearTimeoutRef.current = downshift_esm_debounce(function (outerDispatch) { 58029 outerDispatch({ 58030 type: FunctionSetInputValue$1, 58031 inputValue: '' 58032 }); 58033 }, 500); // Cancel any pending debounced calls on mount 58034 58035 return function () { 58036 clearTimeoutRef.current.cancel(); 58037 }; 58038 }, []); // Invokes the keysSoFar callback set up above. 58039 58040 (0,external_React_.useEffect)(function () { 58041 if (!inputValue) { 58042 return; 58043 } 58044 58045 clearTimeoutRef.current(dispatch); 58046 }, [dispatch, inputValue]); 58047 useControlPropsValidator({ 58048 isInitialMount: isInitialMountRef.current, 58049 props: props, 58050 state: state 58051 }); 58052 /* Controls the focus on the menu or the toggle button. */ 58053 58054 (0,external_React_.useEffect)(function () { 58055 // Don't focus menu on first render. 58056 if (isInitialMountRef.current) { 58057 // Unless it was initialised as open. 58058 if ((initialIsOpen || defaultIsOpen || isOpen) && menuRef.current) { 58059 menuRef.current.focus(); 58060 } 58061 58062 return; 58063 } // Focus menu on open. 58064 58065 58066 if (isOpen) { 58067 // istanbul ignore else 58068 if (menuRef.current) { 58069 menuRef.current.focus(); 58070 } 58071 58072 return; 58073 } // Focus toggleButton on close, but not if it was closed with (Shift+)Tab. 58074 58075 58076 if (environment.document.activeElement === menuRef.current) { 58077 // istanbul ignore else 58078 if (toggleButtonRef.current) { 58079 shouldBlurRef.current = false; 58080 toggleButtonRef.current.focus(); 58081 } 58082 } // eslint-disable-next-line react-hooks/exhaustive-deps 58083 58084 }, [isOpen]); 58085 (0,external_React_.useEffect)(function () { 58086 if (isInitialMountRef.current) { 58087 return; 58088 } 58089 58090 previousResultCountRef.current = items.length; 58091 }); // Add mouse/touch events to document. 58092 58093 var mouseAndTouchTrackersRef = useMouseAndTouchTracker(isOpen, [menuRef, toggleButtonRef], environment, function () { 58094 dispatch({ 58095 type: MenuBlur 58096 }); 58097 }); 58098 var setGetterPropCallInfo = useGetterPropsCalledChecker('getMenuProps', 'getToggleButtonProps'); // Make initial ref false. 58099 58100 (0,external_React_.useEffect)(function () { 58101 isInitialMountRef.current = false; 58102 }, []); // Reset itemRefs on close. 58103 58104 (0,external_React_.useEffect)(function () { 58105 if (!isOpen) { 58106 itemRefs.current = {}; 58107 } 58108 }, [isOpen]); // Event handler functions. 58109 58110 var toggleButtonKeyDownHandlers = (0,external_React_.useMemo)(function () { 58111 return { 58112 ArrowDown: function ArrowDown(event) { 58113 event.preventDefault(); 58114 dispatch({ 58115 type: ToggleButtonKeyDownArrowDown, 58116 getItemNodeFromIndex: getItemNodeFromIndex, 58117 shiftKey: event.shiftKey 58118 }); 58119 }, 58120 ArrowUp: function ArrowUp(event) { 58121 event.preventDefault(); 58122 dispatch({ 58123 type: ToggleButtonKeyDownArrowUp, 58124 getItemNodeFromIndex: getItemNodeFromIndex, 58125 shiftKey: event.shiftKey 58126 }); 58127 } 58128 }; 58129 }, [dispatch, getItemNodeFromIndex]); 58130 var menuKeyDownHandlers = (0,external_React_.useMemo)(function () { 58131 return { 58132 ArrowDown: function ArrowDown(event) { 58133 event.preventDefault(); 58134 dispatch({ 58135 type: MenuKeyDownArrowDown, 58136 getItemNodeFromIndex: getItemNodeFromIndex, 58137 shiftKey: event.shiftKey 58138 }); 58139 }, 58140 ArrowUp: function ArrowUp(event) { 58141 event.preventDefault(); 58142 dispatch({ 58143 type: MenuKeyDownArrowUp, 58144 getItemNodeFromIndex: getItemNodeFromIndex, 58145 shiftKey: event.shiftKey 58146 }); 58147 }, 58148 Home: function Home(event) { 58149 event.preventDefault(); 58150 dispatch({ 58151 type: MenuKeyDownHome, 58152 getItemNodeFromIndex: getItemNodeFromIndex 58153 }); 58154 }, 58155 End: function End(event) { 58156 event.preventDefault(); 58157 dispatch({ 58158 type: MenuKeyDownEnd, 58159 getItemNodeFromIndex: getItemNodeFromIndex 58160 }); 58161 }, 58162 Escape: function Escape() { 58163 dispatch({ 58164 type: MenuKeyDownEscape 58165 }); 58166 }, 58167 Enter: function Enter(event) { 58168 event.preventDefault(); 58169 dispatch({ 58170 type: MenuKeyDownEnter 58171 }); 58172 }, 58173 ' ': function _(event) { 58174 event.preventDefault(); 58175 dispatch({ 58176 type: MenuKeyDownSpaceButton 58177 }); 58178 } 58179 }; 58180 }, [dispatch, getItemNodeFromIndex]); // Action functions. 58181 58182 var toggleMenu = (0,external_React_.useCallback)(function () { 58183 dispatch({ 58184 type: FunctionToggleMenu$1 58185 }); 58186 }, [dispatch]); 58187 var closeMenu = (0,external_React_.useCallback)(function () { 58188 dispatch({ 58189 type: FunctionCloseMenu$1 58190 }); 58191 }, [dispatch]); 58192 var openMenu = (0,external_React_.useCallback)(function () { 58193 dispatch({ 58194 type: FunctionOpenMenu$1 58195 }); 58196 }, [dispatch]); 58197 var setHighlightedIndex = (0,external_React_.useCallback)(function (newHighlightedIndex) { 58198 dispatch({ 58199 type: FunctionSetHighlightedIndex$1, 58200 highlightedIndex: newHighlightedIndex 58201 }); 58202 }, [dispatch]); 58203 var selectItem = (0,external_React_.useCallback)(function (newSelectedItem) { 58204 dispatch({ 58205 type: FunctionSelectItem$1, 58206 selectedItem: newSelectedItem 58207 }); 58208 }, [dispatch]); 58209 var reset = (0,external_React_.useCallback)(function () { 58210 dispatch({ 58211 type: FunctionReset$2 58212 }); 58213 }, [dispatch]); 58214 var setInputValue = (0,external_React_.useCallback)(function (newInputValue) { 58215 dispatch({ 58216 type: FunctionSetInputValue$1, 58217 inputValue: newInputValue 58218 }); 58219 }, [dispatch]); // Getter functions. 58220 58221 var getLabelProps = (0,external_React_.useCallback)(function (labelProps) { 58222 return extends_extends({ 58223 id: elementIds.labelId, 58224 htmlFor: elementIds.toggleButtonId 58225 }, labelProps); 58226 }, [elementIds]); 58227 var getMenuProps = (0,external_React_.useCallback)(function (_temp, _temp2) { 58228 var _extends2; 58229 58230 var _ref = _temp === void 0 ? {} : _temp, 58231 onMouseLeave = _ref.onMouseLeave, 58232 _ref$refKey = _ref.refKey, 58233 refKey = _ref$refKey === void 0 ? 'ref' : _ref$refKey, 58234 onKeyDown = _ref.onKeyDown, 58235 onBlur = _ref.onBlur, 58236 ref = _ref.ref, 58237 rest = objectWithoutPropertiesLoose_objectWithoutPropertiesLoose(_ref, _excluded$2); 58238 58239 var _ref2 = _temp2 === void 0 ? {} : _temp2, 58240 _ref2$suppressRefErro = _ref2.suppressRefError, 58241 suppressRefError = _ref2$suppressRefErro === void 0 ? false : _ref2$suppressRefErro; 58242 58243 var latestState = latest.current.state; 58244 58245 var menuHandleKeyDown = function menuHandleKeyDown(event) { 58246 var key = normalizeArrowKey(event); 58247 58248 if (key && menuKeyDownHandlers[key]) { 58249 menuKeyDownHandlers[key](event); 58250 } else if (isAcceptedCharacterKey(key)) { 58251 dispatch({ 58252 type: MenuKeyDownCharacter, 58253 key: key, 58254 getItemNodeFromIndex: getItemNodeFromIndex 58255 }); 58256 } 58257 }; 58258 58259 var menuHandleBlur = function menuHandleBlur() { 58260 // if the blur was a result of selection, we don't trigger this action. 58261 if (shouldBlurRef.current === false) { 58262 shouldBlurRef.current = true; 58263 return; 58264 } 58265 58266 var shouldBlur = !mouseAndTouchTrackersRef.current.isMouseDown; 58267 /* istanbul ignore else */ 58268 58269 if (shouldBlur) { 58270 dispatch({ 58271 type: MenuBlur 58272 }); 58273 } 58274 }; 58275 58276 var menuHandleMouseLeave = function menuHandleMouseLeave() { 58277 dispatch({ 58278 type: MenuMouseLeave$1 58279 }); 58280 }; 58281 58282 setGetterPropCallInfo('getMenuProps', suppressRefError, refKey, menuRef); 58283 return extends_extends((_extends2 = {}, _extends2[refKey] = handleRefs(ref, function (menuNode) { 58284 menuRef.current = menuNode; 58285 }), _extends2.id = elementIds.menuId, _extends2.role = 'listbox', _extends2['aria-labelledby'] = elementIds.labelId, _extends2.tabIndex = -1, _extends2), latestState.isOpen && latestState.highlightedIndex > -1 && { 58286 'aria-activedescendant': elementIds.getItemId(latestState.highlightedIndex) 58287 }, { 58288 onMouseLeave: callAllEventHandlers(onMouseLeave, menuHandleMouseLeave), 58289 onKeyDown: callAllEventHandlers(onKeyDown, menuHandleKeyDown), 58290 onBlur: callAllEventHandlers(onBlur, menuHandleBlur) 58291 }, rest); 58292 }, [dispatch, latest, menuKeyDownHandlers, mouseAndTouchTrackersRef, setGetterPropCallInfo, elementIds, getItemNodeFromIndex]); 58293 var getToggleButtonProps = (0,external_React_.useCallback)(function (_temp3, _temp4) { 58294 var _extends3; 58295 58296 var _ref3 = _temp3 === void 0 ? {} : _temp3, 58297 onClick = _ref3.onClick, 58298 onKeyDown = _ref3.onKeyDown, 58299 _ref3$refKey = _ref3.refKey, 58300 refKey = _ref3$refKey === void 0 ? 'ref' : _ref3$refKey, 58301 ref = _ref3.ref, 58302 rest = objectWithoutPropertiesLoose_objectWithoutPropertiesLoose(_ref3, _excluded2$2); 58303 58304 var _ref4 = _temp4 === void 0 ? {} : _temp4, 58305 _ref4$suppressRefErro = _ref4.suppressRefError, 58306 suppressRefError = _ref4$suppressRefErro === void 0 ? false : _ref4$suppressRefErro; 58307 58308 var toggleButtonHandleClick = function toggleButtonHandleClick() { 58309 dispatch({ 58310 type: ToggleButtonClick$1 58311 }); 58312 }; 58313 58314 var toggleButtonHandleKeyDown = function toggleButtonHandleKeyDown(event) { 58315 var key = normalizeArrowKey(event); 58316 58317 if (key && toggleButtonKeyDownHandlers[key]) { 58318 toggleButtonKeyDownHandlers[key](event); 58319 } else if (isAcceptedCharacterKey(key)) { 58320 dispatch({ 58321 type: ToggleButtonKeyDownCharacter, 58322 key: key, 58323 getItemNodeFromIndex: getItemNodeFromIndex 58324 }); 58325 } 58326 }; 58327 58328 var toggleProps = extends_extends((_extends3 = {}, _extends3[refKey] = handleRefs(ref, function (toggleButtonNode) { 58329 toggleButtonRef.current = toggleButtonNode; 58330 }), _extends3.id = elementIds.toggleButtonId, _extends3['aria-haspopup'] = 'listbox', _extends3['aria-expanded'] = latest.current.state.isOpen, _extends3['aria-labelledby'] = elementIds.labelId + " " + elementIds.toggleButtonId, _extends3), rest); 58331 58332 if (!rest.disabled) { 58333 toggleProps.onClick = callAllEventHandlers(onClick, toggleButtonHandleClick); 58334 toggleProps.onKeyDown = callAllEventHandlers(onKeyDown, toggleButtonHandleKeyDown); 58335 } 58336 58337 setGetterPropCallInfo('getToggleButtonProps', suppressRefError, refKey, toggleButtonRef); 58338 return toggleProps; 58339 }, [dispatch, latest, toggleButtonKeyDownHandlers, setGetterPropCallInfo, elementIds, getItemNodeFromIndex]); 58340 var getItemProps = (0,external_React_.useCallback)(function (_temp5) { 58341 var _extends4; 58342 58343 var _ref5 = _temp5 === void 0 ? {} : _temp5, 58344 item = _ref5.item, 58345 index = _ref5.index, 58346 onMouseMove = _ref5.onMouseMove, 58347 onClick = _ref5.onClick, 58348 _ref5$refKey = _ref5.refKey, 58349 refKey = _ref5$refKey === void 0 ? 'ref' : _ref5$refKey, 58350 ref = _ref5.ref, 58351 rest = objectWithoutPropertiesLoose_objectWithoutPropertiesLoose(_ref5, _excluded3$1); 58352 58353 var _latest$current = latest.current, 58354 latestState = _latest$current.state, 58355 latestProps = _latest$current.props; 58356 58357 var itemHandleMouseMove = function itemHandleMouseMove() { 58358 if (index === latestState.highlightedIndex) { 58359 return; 58360 } 58361 58362 shouldScrollRef.current = false; 58363 dispatch({ 58364 type: ItemMouseMove$1, 58365 index: index 58366 }); 58367 }; 58368 58369 var itemHandleClick = function itemHandleClick() { 58370 dispatch({ 58371 type: ItemClick$1, 58372 index: index 58373 }); 58374 }; 58375 58376 var itemIndex = getItemIndex(index, item, latestProps.items); 58377 58378 if (itemIndex < 0) { 58379 throw new Error('Pass either item or item index in getItemProps!'); 58380 } 58381 58382 var itemProps = extends_extends((_extends4 = { 58383 role: 'option', 58384 'aria-selected': "" + (itemIndex === latestState.highlightedIndex), 58385 id: elementIds.getItemId(itemIndex) 58386 }, _extends4[refKey] = handleRefs(ref, function (itemNode) { 58387 if (itemNode) { 58388 itemRefs.current[elementIds.getItemId(itemIndex)] = itemNode; 58389 } 58390 }), _extends4), rest); 58391 58392 if (!rest.disabled) { 58393 itemProps.onMouseMove = callAllEventHandlers(onMouseMove, itemHandleMouseMove); 58394 itemProps.onClick = callAllEventHandlers(onClick, itemHandleClick); 58395 } 58396 58397 return itemProps; 58398 }, [dispatch, latest, shouldScrollRef, elementIds]); 58399 return { 58400 // prop getters. 58401 getToggleButtonProps: getToggleButtonProps, 58402 getLabelProps: getLabelProps, 58403 getMenuProps: getMenuProps, 58404 getItemProps: getItemProps, 58405 // actions. 58406 toggleMenu: toggleMenu, 58407 openMenu: openMenu, 58408 closeMenu: closeMenu, 58409 setHighlightedIndex: setHighlightedIndex, 58410 selectItem: selectItem, 58411 reset: reset, 58412 setInputValue: setInputValue, 58413 // state. 58414 highlightedIndex: highlightedIndex, 58415 isOpen: isOpen, 58416 selectedItem: selectedItem, 58417 inputValue: inputValue 58418 }; 58419 } 58420 58421 var InputKeyDownArrowDown = false ? 0 : 0; 58422 var InputKeyDownArrowUp = false ? 0 : 1; 58423 var InputKeyDownEscape = false ? 0 : 2; 58424 var InputKeyDownHome = false ? 0 : 3; 58425 var InputKeyDownEnd = false ? 0 : 4; 58426 var InputKeyDownEnter = false ? 0 : 5; 58427 var InputChange = false ? 0 : 6; 58428 var InputBlur = false ? 0 : 7; 58429 var MenuMouseLeave = false ? 0 : 8; 58430 var ItemMouseMove = false ? 0 : 9; 58431 var ItemClick = false ? 0 : 10; 58432 var ToggleButtonClick = false ? 0 : 11; 58433 var FunctionToggleMenu = false ? 0 : 12; 58434 var FunctionOpenMenu = false ? 0 : 13; 58435 var FunctionCloseMenu = false ? 0 : 14; 58436 var FunctionSetHighlightedIndex = false ? 0 : 15; 58437 var FunctionSelectItem = false ? 0 : 16; 58438 var FunctionSetInputValue = false ? 0 : 17; 58439 var FunctionReset$1 = false ? 0 : 18; 58440 var ControlledPropUpdatedSelectedItem = false ? 0 : 19; 58441 58442 var stateChangeTypes$1 = /*#__PURE__*/Object.freeze({ 58443 __proto__: null, 58444 InputKeyDownArrowDown: InputKeyDownArrowDown, 58445 InputKeyDownArrowUp: InputKeyDownArrowUp, 58446 InputKeyDownEscape: InputKeyDownEscape, 58447 InputKeyDownHome: InputKeyDownHome, 58448 InputKeyDownEnd: InputKeyDownEnd, 58449 InputKeyDownEnter: InputKeyDownEnter, 58450 InputChange: InputChange, 58451 InputBlur: InputBlur, 58452 MenuMouseLeave: MenuMouseLeave, 58453 ItemMouseMove: ItemMouseMove, 58454 ItemClick: ItemClick, 58455 ToggleButtonClick: ToggleButtonClick, 58456 FunctionToggleMenu: FunctionToggleMenu, 58457 FunctionOpenMenu: FunctionOpenMenu, 58458 FunctionCloseMenu: FunctionCloseMenu, 58459 FunctionSetHighlightedIndex: FunctionSetHighlightedIndex, 58460 FunctionSelectItem: FunctionSelectItem, 58461 FunctionSetInputValue: FunctionSetInputValue, 58462 FunctionReset: FunctionReset$1, 58463 ControlledPropUpdatedSelectedItem: ControlledPropUpdatedSelectedItem 58464 }); 58465 58466 function getInitialState$1(props) { 58467 var initialState = getInitialState$2(props); 58468 var selectedItem = initialState.selectedItem; 58469 var inputValue = initialState.inputValue; 58470 58471 if (inputValue === '' && selectedItem && props.defaultInputValue === undefined && props.initialInputValue === undefined && props.inputValue === undefined) { 58472 inputValue = props.itemToString(selectedItem); 58473 } 58474 58475 return extends_extends({}, initialState, { 58476 inputValue: inputValue 58477 }); 58478 } 58479 58480 var propTypes$1 = { 58481 items: (prop_types_default()).array.isRequired, 58482 itemToString: (prop_types_default()).func, 58483 getA11yStatusMessage: (prop_types_default()).func, 58484 getA11ySelectionMessage: (prop_types_default()).func, 58485 circularNavigation: (prop_types_default()).bool, 58486 highlightedIndex: (prop_types_default()).number, 58487 defaultHighlightedIndex: (prop_types_default()).number, 58488 initialHighlightedIndex: (prop_types_default()).number, 58489 isOpen: (prop_types_default()).bool, 58490 defaultIsOpen: (prop_types_default()).bool, 58491 initialIsOpen: (prop_types_default()).bool, 58492 selectedItem: (prop_types_default()).any, 58493 initialSelectedItem: (prop_types_default()).any, 58494 defaultSelectedItem: (prop_types_default()).any, 58495 inputValue: (prop_types_default()).string, 58496 defaultInputValue: (prop_types_default()).string, 58497 initialInputValue: (prop_types_default()).string, 58498 id: (prop_types_default()).string, 58499 labelId: (prop_types_default()).string, 58500 menuId: (prop_types_default()).string, 58501 getItemId: (prop_types_default()).func, 58502 inputId: (prop_types_default()).string, 58503 toggleButtonId: (prop_types_default()).string, 58504 stateReducer: (prop_types_default()).func, 58505 onSelectedItemChange: (prop_types_default()).func, 58506 onHighlightedIndexChange: (prop_types_default()).func, 58507 onStateChange: (prop_types_default()).func, 58508 onIsOpenChange: (prop_types_default()).func, 58509 onInputValueChange: (prop_types_default()).func, 58510 environment: prop_types_default().shape({ 58511 addEventListener: (prop_types_default()).func, 58512 removeEventListener: (prop_types_default()).func, 58513 document: prop_types_default().shape({ 58514 getElementById: (prop_types_default()).func, 58515 activeElement: (prop_types_default()).any, 58516 body: (prop_types_default()).any 58517 }) 58518 }) 58519 }; 58520 /** 58521 * The useCombobox version of useControlledReducer, which also 58522 * checks if the controlled prop selectedItem changed between 58523 * renders. If so, it will also update inputValue with its 58524 * string equivalent. It uses the common useEnhancedReducer to 58525 * compute the rest of the state. 58526 * 58527 * @param {Function} reducer Reducer function from downshift. 58528 * @param {Object} initialState Initial state of the hook. 58529 * @param {Object} props The hook props. 58530 * @returns {Array} An array with the state and an action dispatcher. 58531 */ 58532 58533 function useControlledReducer(reducer, initialState, props) { 58534 var previousSelectedItemRef = (0,external_React_.useRef)(); 58535 58536 var _useEnhancedReducer = useEnhancedReducer(reducer, initialState, props), 58537 state = _useEnhancedReducer[0], 58538 dispatch = _useEnhancedReducer[1]; // ToDo: if needed, make same approach as selectedItemChanged from Downshift. 58539 58540 58541 (0,external_React_.useEffect)(function () { 58542 if (isControlledProp(props, 'selectedItem')) { 58543 if (previousSelectedItemRef.current !== props.selectedItem) { 58544 dispatch({ 58545 type: ControlledPropUpdatedSelectedItem, 58546 inputValue: props.itemToString(props.selectedItem) 58547 }); 58548 } 58549 58550 previousSelectedItemRef.current = state.selectedItem === previousSelectedItemRef.current ? props.selectedItem : state.selectedItem; 58551 } 58552 }); 58553 return [getState(state, props), dispatch]; 58554 } // eslint-disable-next-line import/no-mutable-exports 58555 58556 58557 var validatePropTypes$1 = downshift_esm_noop; 58558 /* istanbul ignore next */ 58559 58560 if (false) {} 58561 58562 var defaultProps$1 = extends_extends({}, defaultProps$3, { 58563 getA11yStatusMessage: getA11yStatusMessage$1, 58564 circularNavigation: true 58565 }); 58566 58567 /* eslint-disable complexity */ 58568 58569 function downshiftUseComboboxReducer(state, action) { 58570 var type = action.type, 58571 props = action.props, 58572 shiftKey = action.shiftKey; 58573 var changes; 58574 58575 switch (type) { 58576 case ItemClick: 58577 changes = { 58578 isOpen: getDefaultValue$1(props, 'isOpen'), 58579 highlightedIndex: getDefaultValue$1(props, 'highlightedIndex'), 58580 selectedItem: props.items[action.index], 58581 inputValue: props.itemToString(props.items[action.index]) 58582 }; 58583 break; 58584 58585 case InputKeyDownArrowDown: 58586 if (state.isOpen) { 58587 changes = { 58588 highlightedIndex: getNextWrappingIndex(shiftKey ? 5 : 1, state.highlightedIndex, props.items.length, action.getItemNodeFromIndex, props.circularNavigation) 58589 }; 58590 } else { 58591 changes = { 58592 highlightedIndex: getHighlightedIndexOnOpen(props, state, 1, action.getItemNodeFromIndex), 58593 isOpen: props.items.length >= 0 58594 }; 58595 } 58596 58597 break; 58598 58599 case InputKeyDownArrowUp: 58600 if (state.isOpen) { 58601 changes = { 58602 highlightedIndex: getNextWrappingIndex(shiftKey ? -5 : -1, state.highlightedIndex, props.items.length, action.getItemNodeFromIndex, props.circularNavigation) 58603 }; 58604 } else { 58605 changes = { 58606 highlightedIndex: getHighlightedIndexOnOpen(props, state, -1, action.getItemNodeFromIndex), 58607 isOpen: props.items.length >= 0 58608 }; 58609 } 58610 58611 break; 58612 58613 case InputKeyDownEnter: 58614 changes = extends_extends({}, state.isOpen && state.highlightedIndex >= 0 && { 58615 selectedItem: props.items[state.highlightedIndex], 58616 isOpen: getDefaultValue$1(props, 'isOpen'), 58617 highlightedIndex: getDefaultValue$1(props, 'highlightedIndex'), 58618 inputValue: props.itemToString(props.items[state.highlightedIndex]) 58619 }); 58620 break; 58621 58622 case InputKeyDownEscape: 58623 changes = extends_extends({ 58624 isOpen: false, 58625 highlightedIndex: -1 58626 }, !state.isOpen && { 58627 selectedItem: null, 58628 inputValue: '' 58629 }); 58630 break; 58631 58632 case InputKeyDownHome: 58633 changes = { 58634 highlightedIndex: getNextNonDisabledIndex(1, 0, props.items.length, action.getItemNodeFromIndex, false) 58635 }; 58636 break; 58637 58638 case InputKeyDownEnd: 58639 changes = { 58640 highlightedIndex: getNextNonDisabledIndex(-1, props.items.length - 1, props.items.length, action.getItemNodeFromIndex, false) 58641 }; 58642 break; 58643 58644 case InputBlur: 58645 changes = extends_extends({ 58646 isOpen: false, 58647 highlightedIndex: -1 58648 }, state.highlightedIndex >= 0 && action.selectItem && { 58649 selectedItem: props.items[state.highlightedIndex], 58650 inputValue: props.itemToString(props.items[state.highlightedIndex]) 58651 }); 58652 break; 58653 58654 case InputChange: 58655 changes = { 58656 isOpen: true, 58657 highlightedIndex: getDefaultValue$1(props, 'highlightedIndex'), 58658 inputValue: action.inputValue 58659 }; 58660 break; 58661 58662 case FunctionSelectItem: 58663 changes = { 58664 selectedItem: action.selectedItem, 58665 inputValue: props.itemToString(action.selectedItem) 58666 }; 58667 break; 58668 58669 case ControlledPropUpdatedSelectedItem: 58670 changes = { 58671 inputValue: action.inputValue 58672 }; 58673 break; 58674 58675 default: 58676 return downshiftCommonReducer(state, action, stateChangeTypes$1); 58677 } 58678 58679 return extends_extends({}, state, changes); 58680 } 58681 /* eslint-enable complexity */ 58682 58683 var _excluded$1 = ["onMouseLeave", "refKey", "ref"], 58684 _excluded2$1 = ["item", "index", "refKey", "ref", "onMouseMove", "onClick", "onPress"], 58685 _excluded3 = ["onClick", "onPress", "refKey", "ref"], 58686 _excluded4 = ["onKeyDown", "onChange", "onInput", "onBlur", "onChangeText", "refKey", "ref"], 58687 _excluded5 = ["refKey", "ref"]; 58688 useCombobox.stateChangeTypes = stateChangeTypes$1; 58689 58690 function useCombobox(userProps) { 58691 if (userProps === void 0) { 58692 userProps = {}; 58693 } 58694 58695 validatePropTypes$1(userProps, useCombobox); // Props defaults and destructuring. 58696 58697 var props = extends_extends({}, defaultProps$1, userProps); 58698 58699 var initialIsOpen = props.initialIsOpen, 58700 defaultIsOpen = props.defaultIsOpen, 58701 items = props.items, 58702 scrollIntoView = props.scrollIntoView, 58703 environment = props.environment, 58704 getA11yStatusMessage = props.getA11yStatusMessage, 58705 getA11ySelectionMessage = props.getA11ySelectionMessage, 58706 itemToString = props.itemToString; // Initial state depending on controlled props. 58707 58708 var initialState = getInitialState$1(props); 58709 58710 var _useControlledReducer = useControlledReducer(downshiftUseComboboxReducer, initialState, props), 58711 state = _useControlledReducer[0], 58712 dispatch = _useControlledReducer[1]; 58713 58714 var isOpen = state.isOpen, 58715 highlightedIndex = state.highlightedIndex, 58716 selectedItem = state.selectedItem, 58717 inputValue = state.inputValue; // Element refs. 58718 58719 var menuRef = (0,external_React_.useRef)(null); 58720 var itemRefs = (0,external_React_.useRef)({}); 58721 var inputRef = (0,external_React_.useRef)(null); 58722 var toggleButtonRef = (0,external_React_.useRef)(null); 58723 var comboboxRef = (0,external_React_.useRef)(null); 58724 var isInitialMountRef = (0,external_React_.useRef)(true); // prevent id re-generation between renders. 58725 58726 var elementIds = useElementIds(props); // used to keep track of how many items we had on previous cycle. 58727 58728 var previousResultCountRef = (0,external_React_.useRef)(); // utility callback to get item element. 58729 58730 var latest = useLatestRef({ 58731 state: state, 58732 props: props 58733 }); 58734 var getItemNodeFromIndex = (0,external_React_.useCallback)(function (index) { 58735 return itemRefs.current[elementIds.getItemId(index)]; 58736 }, [elementIds]); // Effects. 58737 // Sets a11y status message on changes in state. 58738 58739 useA11yMessageSetter(getA11yStatusMessage, [isOpen, highlightedIndex, inputValue, items], extends_extends({ 58740 isInitialMount: isInitialMountRef.current, 58741 previousResultCount: previousResultCountRef.current, 58742 items: items, 58743 environment: environment, 58744 itemToString: itemToString 58745 }, state)); // Sets a11y status message on changes in selectedItem. 58746 58747 useA11yMessageSetter(getA11ySelectionMessage, [selectedItem], extends_extends({ 58748 isInitialMount: isInitialMountRef.current, 58749 previousResultCount: previousResultCountRef.current, 58750 items: items, 58751 environment: environment, 58752 itemToString: itemToString 58753 }, state)); // Scroll on highlighted item if change comes from keyboard. 58754 58755 var shouldScrollRef = useScrollIntoView({ 58756 menuElement: menuRef.current, 58757 highlightedIndex: highlightedIndex, 58758 isOpen: isOpen, 58759 itemRefs: itemRefs, 58760 scrollIntoView: scrollIntoView, 58761 getItemNodeFromIndex: getItemNodeFromIndex 58762 }); 58763 useControlPropsValidator({ 58764 isInitialMount: isInitialMountRef.current, 58765 props: props, 58766 state: state 58767 }); // Focus the input on first render if required. 58768 58769 (0,external_React_.useEffect)(function () { 58770 var focusOnOpen = initialIsOpen || defaultIsOpen || isOpen; 58771 58772 if (focusOnOpen && inputRef.current) { 58773 inputRef.current.focus(); 58774 } // eslint-disable-next-line react-hooks/exhaustive-deps 58775 58776 }, []); 58777 (0,external_React_.useEffect)(function () { 58778 if (isInitialMountRef.current) { 58779 return; 58780 } 58781 58782 previousResultCountRef.current = items.length; 58783 }); // Add mouse/touch events to document. 58784 58785 var mouseAndTouchTrackersRef = useMouseAndTouchTracker(isOpen, [comboboxRef, menuRef, toggleButtonRef], environment, function () { 58786 dispatch({ 58787 type: InputBlur, 58788 selectItem: false 58789 }); 58790 }); 58791 var setGetterPropCallInfo = useGetterPropsCalledChecker('getInputProps', 'getComboboxProps', 'getMenuProps'); // Make initial ref false. 58792 58793 (0,external_React_.useEffect)(function () { 58794 isInitialMountRef.current = false; 58795 }, []); // Reset itemRefs on close. 58796 58797 (0,external_React_.useEffect)(function () { 58798 if (!isOpen) { 58799 itemRefs.current = {}; 58800 } 58801 }, [isOpen]); 58802 /* Event handler functions */ 58803 58804 var inputKeyDownHandlers = (0,external_React_.useMemo)(function () { 58805 return { 58806 ArrowDown: function ArrowDown(event) { 58807 event.preventDefault(); 58808 dispatch({ 58809 type: InputKeyDownArrowDown, 58810 shiftKey: event.shiftKey, 58811 getItemNodeFromIndex: getItemNodeFromIndex 58812 }); 58813 }, 58814 ArrowUp: function ArrowUp(event) { 58815 event.preventDefault(); 58816 dispatch({ 58817 type: InputKeyDownArrowUp, 58818 shiftKey: event.shiftKey, 58819 getItemNodeFromIndex: getItemNodeFromIndex 58820 }); 58821 }, 58822 Home: function Home(event) { 58823 if (!latest.current.state.isOpen) { 58824 return; 58825 } 58826 58827 event.preventDefault(); 58828 dispatch({ 58829 type: InputKeyDownHome, 58830 getItemNodeFromIndex: getItemNodeFromIndex 58831 }); 58832 }, 58833 End: function End(event) { 58834 if (!latest.current.state.isOpen) { 58835 return; 58836 } 58837 58838 event.preventDefault(); 58839 dispatch({ 58840 type: InputKeyDownEnd, 58841 getItemNodeFromIndex: getItemNodeFromIndex 58842 }); 58843 }, 58844 Escape: function Escape() { 58845 var latestState = latest.current.state; 58846 58847 if (latestState.isOpen || latestState.inputValue || latestState.selectedItem || latestState.highlightedIndex > -1) { 58848 dispatch({ 58849 type: InputKeyDownEscape 58850 }); 58851 } 58852 }, 58853 Enter: function Enter(event) { 58854 var latestState = latest.current.state; // if closed or no highlighted index, do nothing. 58855 58856 if (!latestState.isOpen || latestState.highlightedIndex < 0 || event.which === 229 // if IME composing, wait for next Enter keydown event. 58857 ) { 58858 return; 58859 } 58860 58861 event.preventDefault(); 58862 dispatch({ 58863 type: InputKeyDownEnter, 58864 getItemNodeFromIndex: getItemNodeFromIndex 58865 }); 58866 } 58867 }; 58868 }, [dispatch, latest, getItemNodeFromIndex]); // Getter props. 58869 58870 var getLabelProps = (0,external_React_.useCallback)(function (labelProps) { 58871 return extends_extends({ 58872 id: elementIds.labelId, 58873 htmlFor: elementIds.inputId 58874 }, labelProps); 58875 }, [elementIds]); 58876 var getMenuProps = (0,external_React_.useCallback)(function (_temp, _temp2) { 58877 var _extends2; 58878 58879 var _ref = _temp === void 0 ? {} : _temp, 58880 onMouseLeave = _ref.onMouseLeave, 58881 _ref$refKey = _ref.refKey, 58882 refKey = _ref$refKey === void 0 ? 'ref' : _ref$refKey, 58883 ref = _ref.ref, 58884 rest = objectWithoutPropertiesLoose_objectWithoutPropertiesLoose(_ref, _excluded$1); 58885 58886 var _ref2 = _temp2 === void 0 ? {} : _temp2, 58887 _ref2$suppressRefErro = _ref2.suppressRefError, 58888 suppressRefError = _ref2$suppressRefErro === void 0 ? false : _ref2$suppressRefErro; 58889 58890 setGetterPropCallInfo('getMenuProps', suppressRefError, refKey, menuRef); 58891 return extends_extends((_extends2 = {}, _extends2[refKey] = handleRefs(ref, function (menuNode) { 58892 menuRef.current = menuNode; 58893 }), _extends2.id = elementIds.menuId, _extends2.role = 'listbox', _extends2['aria-labelledby'] = elementIds.labelId, _extends2.onMouseLeave = callAllEventHandlers(onMouseLeave, function () { 58894 dispatch({ 58895 type: MenuMouseLeave 58896 }); 58897 }), _extends2), rest); 58898 }, [dispatch, setGetterPropCallInfo, elementIds]); 58899 var getItemProps = (0,external_React_.useCallback)(function (_temp3) { 58900 var _extends3, _ref4; 58901 58902 var _ref3 = _temp3 === void 0 ? {} : _temp3, 58903 item = _ref3.item, 58904 index = _ref3.index, 58905 _ref3$refKey = _ref3.refKey, 58906 refKey = _ref3$refKey === void 0 ? 'ref' : _ref3$refKey, 58907 ref = _ref3.ref, 58908 onMouseMove = _ref3.onMouseMove, 58909 onClick = _ref3.onClick; 58910 _ref3.onPress; 58911 var rest = objectWithoutPropertiesLoose_objectWithoutPropertiesLoose(_ref3, _excluded2$1); 58912 58913 var _latest$current = latest.current, 58914 latestProps = _latest$current.props, 58915 latestState = _latest$current.state; 58916 var itemIndex = getItemIndex(index, item, latestProps.items); 58917 58918 if (itemIndex < 0) { 58919 throw new Error('Pass either item or item index in getItemProps!'); 58920 } 58921 58922 var onSelectKey = 'onClick'; 58923 var customClickHandler = onClick; 58924 58925 var itemHandleMouseMove = function itemHandleMouseMove() { 58926 if (index === latestState.highlightedIndex) { 58927 return; 58928 } 58929 58930 shouldScrollRef.current = false; 58931 dispatch({ 58932 type: ItemMouseMove, 58933 index: index 58934 }); 58935 }; 58936 58937 var itemHandleClick = function itemHandleClick() { 58938 dispatch({ 58939 type: ItemClick, 58940 index: index 58941 }); 58942 58943 if (inputRef.current) { 58944 inputRef.current.focus(); 58945 } 58946 }; 58947 58948 return extends_extends((_extends3 = {}, _extends3[refKey] = handleRefs(ref, function (itemNode) { 58949 if (itemNode) { 58950 itemRefs.current[elementIds.getItemId(itemIndex)] = itemNode; 58951 } 58952 }), _extends3.role = 'option', _extends3['aria-selected'] = "" + (itemIndex === latestState.highlightedIndex), _extends3.id = elementIds.getItemId(itemIndex), _extends3), !rest.disabled && (_ref4 = { 58953 onMouseMove: callAllEventHandlers(onMouseMove, itemHandleMouseMove) 58954 }, _ref4[onSelectKey] = callAllEventHandlers(customClickHandler, itemHandleClick), _ref4), rest); 58955 }, [dispatch, latest, shouldScrollRef, elementIds]); 58956 var getToggleButtonProps = (0,external_React_.useCallback)(function (_temp4) { 58957 var _extends4; 58958 58959 var _ref5 = _temp4 === void 0 ? {} : _temp4, 58960 onClick = _ref5.onClick; 58961 _ref5.onPress; 58962 var _ref5$refKey = _ref5.refKey, 58963 refKey = _ref5$refKey === void 0 ? 'ref' : _ref5$refKey, 58964 ref = _ref5.ref, 58965 rest = objectWithoutPropertiesLoose_objectWithoutPropertiesLoose(_ref5, _excluded3); 58966 58967 var toggleButtonHandleClick = function toggleButtonHandleClick() { 58968 dispatch({ 58969 type: ToggleButtonClick 58970 }); 58971 58972 if (!latest.current.state.isOpen && inputRef.current) { 58973 inputRef.current.focus(); 58974 } 58975 }; 58976 58977 return extends_extends((_extends4 = {}, _extends4[refKey] = handleRefs(ref, function (toggleButtonNode) { 58978 toggleButtonRef.current = toggleButtonNode; 58979 }), _extends4.id = elementIds.toggleButtonId, _extends4.tabIndex = -1, _extends4), !rest.disabled && extends_extends({}, { 58980 onClick: callAllEventHandlers(onClick, toggleButtonHandleClick) 58981 }), rest); 58982 }, [dispatch, latest, elementIds]); 58983 var getInputProps = (0,external_React_.useCallback)(function (_temp5, _temp6) { 58984 var _extends5; 58985 58986 var _ref6 = _temp5 === void 0 ? {} : _temp5, 58987 onKeyDown = _ref6.onKeyDown, 58988 onChange = _ref6.onChange, 58989 onInput = _ref6.onInput, 58990 onBlur = _ref6.onBlur; 58991 _ref6.onChangeText; 58992 var _ref6$refKey = _ref6.refKey, 58993 refKey = _ref6$refKey === void 0 ? 'ref' : _ref6$refKey, 58994 ref = _ref6.ref, 58995 rest = objectWithoutPropertiesLoose_objectWithoutPropertiesLoose(_ref6, _excluded4); 58996 58997 var _ref7 = _temp6 === void 0 ? {} : _temp6, 58998 _ref7$suppressRefErro = _ref7.suppressRefError, 58999 suppressRefError = _ref7$suppressRefErro === void 0 ? false : _ref7$suppressRefErro; 59000 59001 setGetterPropCallInfo('getInputProps', suppressRefError, refKey, inputRef); 59002 var latestState = latest.current.state; 59003 59004 var inputHandleKeyDown = function inputHandleKeyDown(event) { 59005 var key = normalizeArrowKey(event); 59006 59007 if (key && inputKeyDownHandlers[key]) { 59008 inputKeyDownHandlers[key](event); 59009 } 59010 }; 59011 59012 var inputHandleChange = function inputHandleChange(event) { 59013 dispatch({ 59014 type: InputChange, 59015 inputValue: event.target.value 59016 }); 59017 }; 59018 59019 var inputHandleBlur = function inputHandleBlur() { 59020 /* istanbul ignore else */ 59021 if (latestState.isOpen && !mouseAndTouchTrackersRef.current.isMouseDown) { 59022 dispatch({ 59023 type: InputBlur, 59024 selectItem: true 59025 }); 59026 } 59027 }; 59028 /* istanbul ignore next (preact) */ 59029 59030 59031 var onChangeKey = 'onChange'; 59032 var eventHandlers = {}; 59033 59034 if (!rest.disabled) { 59035 var _eventHandlers; 59036 59037 eventHandlers = (_eventHandlers = {}, _eventHandlers[onChangeKey] = callAllEventHandlers(onChange, onInput, inputHandleChange), _eventHandlers.onKeyDown = callAllEventHandlers(onKeyDown, inputHandleKeyDown), _eventHandlers.onBlur = callAllEventHandlers(onBlur, inputHandleBlur), _eventHandlers); 59038 } 59039 59040 return extends_extends((_extends5 = {}, _extends5[refKey] = handleRefs(ref, function (inputNode) { 59041 inputRef.current = inputNode; 59042 }), _extends5.id = elementIds.inputId, _extends5['aria-autocomplete'] = 'list', _extends5['aria-controls'] = elementIds.menuId, _extends5), latestState.isOpen && latestState.highlightedIndex > -1 && { 59043 'aria-activedescendant': elementIds.getItemId(latestState.highlightedIndex) 59044 }, { 59045 'aria-labelledby': elementIds.labelId, 59046 // https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion 59047 // revert back since autocomplete="nope" is ignored on latest Chrome and Opera 59048 autoComplete: 'off', 59049 value: latestState.inputValue 59050 }, eventHandlers, rest); 59051 }, [dispatch, inputKeyDownHandlers, latest, mouseAndTouchTrackersRef, setGetterPropCallInfo, elementIds]); 59052 var getComboboxProps = (0,external_React_.useCallback)(function (_temp7, _temp8) { 59053 var _extends6; 59054 59055 var _ref8 = _temp7 === void 0 ? {} : _temp7, 59056 _ref8$refKey = _ref8.refKey, 59057 refKey = _ref8$refKey === void 0 ? 'ref' : _ref8$refKey, 59058 ref = _ref8.ref, 59059 rest = objectWithoutPropertiesLoose_objectWithoutPropertiesLoose(_ref8, _excluded5); 59060 59061 var _ref9 = _temp8 === void 0 ? {} : _temp8, 59062 _ref9$suppressRefErro = _ref9.suppressRefError, 59063 suppressRefError = _ref9$suppressRefErro === void 0 ? false : _ref9$suppressRefErro; 59064 59065 setGetterPropCallInfo('getComboboxProps', suppressRefError, refKey, comboboxRef); 59066 return extends_extends((_extends6 = {}, _extends6[refKey] = handleRefs(ref, function (comboboxNode) { 59067 comboboxRef.current = comboboxNode; 59068 }), _extends6.role = 'combobox', _extends6['aria-haspopup'] = 'listbox', _extends6['aria-owns'] = elementIds.menuId, _extends6['aria-expanded'] = latest.current.state.isOpen, _extends6), rest); 59069 }, [latest, setGetterPropCallInfo, elementIds]); // returns 59070 59071 var toggleMenu = (0,external_React_.useCallback)(function () { 59072 dispatch({ 59073 type: FunctionToggleMenu 59074 }); 59075 }, [dispatch]); 59076 var closeMenu = (0,external_React_.useCallback)(function () { 59077 dispatch({ 59078 type: FunctionCloseMenu 59079 }); 59080 }, [dispatch]); 59081 var openMenu = (0,external_React_.useCallback)(function () { 59082 dispatch({ 59083 type: FunctionOpenMenu 59084 }); 59085 }, [dispatch]); 59086 var setHighlightedIndex = (0,external_React_.useCallback)(function (newHighlightedIndex) { 59087 dispatch({ 59088 type: FunctionSetHighlightedIndex, 59089 highlightedIndex: newHighlightedIndex 59090 }); 59091 }, [dispatch]); 59092 var selectItem = (0,external_React_.useCallback)(function (newSelectedItem) { 59093 dispatch({ 59094 type: FunctionSelectItem, 59095 selectedItem: newSelectedItem 59096 }); 59097 }, [dispatch]); 59098 var setInputValue = (0,external_React_.useCallback)(function (newInputValue) { 59099 dispatch({ 59100 type: FunctionSetInputValue, 59101 inputValue: newInputValue 59102 }); 59103 }, [dispatch]); 59104 var reset = (0,external_React_.useCallback)(function () { 59105 dispatch({ 59106 type: FunctionReset$1 59107 }); 59108 }, [dispatch]); 59109 return { 59110 // prop getters. 59111 getItemProps: getItemProps, 59112 getLabelProps: getLabelProps, 59113 getMenuProps: getMenuProps, 59114 getInputProps: getInputProps, 59115 getComboboxProps: getComboboxProps, 59116 getToggleButtonProps: getToggleButtonProps, 59117 // actions. 59118 toggleMenu: toggleMenu, 59119 openMenu: openMenu, 59120 closeMenu: closeMenu, 59121 setHighlightedIndex: setHighlightedIndex, 59122 setInputValue: setInputValue, 59123 selectItem: selectItem, 59124 reset: reset, 59125 // state. 59126 highlightedIndex: highlightedIndex, 59127 isOpen: isOpen, 59128 selectedItem: selectedItem, 59129 inputValue: inputValue 59130 }; 59131 } 59132 59133 var defaultStateValues = { 59134 activeIndex: -1, 59135 selectedItems: [] 59136 }; 59137 /** 59138 * Returns the initial value for a state key in the following order: 59139 * 1. controlled prop, 2. initial prop, 3. default prop, 4. default 59140 * value from Downshift. 59141 * 59142 * @param {Object} props Props passed to the hook. 59143 * @param {string} propKey Props key to generate the value for. 59144 * @returns {any} The initial value for that prop. 59145 */ 59146 59147 function getInitialValue(props, propKey) { 59148 return getInitialValue$1(props, propKey, defaultStateValues); 59149 } 59150 /** 59151 * Returns the default value for a state key in the following order: 59152 * 1. controlled prop, 2. default prop, 3. default value from Downshift. 59153 * 59154 * @param {Object} props Props passed to the hook. 59155 * @param {string} propKey Props key to generate the value for. 59156 * @returns {any} The initial value for that prop. 59157 */ 59158 59159 59160 function getDefaultValue(props, propKey) { 59161 return getDefaultValue$1(props, propKey, defaultStateValues); 59162 } 59163 /** 59164 * Gets the initial state based on the provided props. It uses initial, default 59165 * and controlled props related to state in order to compute the initial value. 59166 * 59167 * @param {Object} props Props passed to the hook. 59168 * @returns {Object} The initial state. 59169 */ 59170 59171 59172 function getInitialState(props) { 59173 var activeIndex = getInitialValue(props, 'activeIndex'); 59174 var selectedItems = getInitialValue(props, 'selectedItems'); 59175 return { 59176 activeIndex: activeIndex, 59177 selectedItems: selectedItems 59178 }; 59179 } 59180 /** 59181 * Returns true if dropdown keydown operation is permitted. Should not be 59182 * allowed on keydown with modifier keys (ctrl, alt, shift, meta), on 59183 * input element with text content that is either highlighted or selection 59184 * cursor is not at the starting position. 59185 * 59186 * @param {KeyboardEvent} event The event from keydown. 59187 * @returns {boolean} Whether the operation is allowed. 59188 */ 59189 59190 59191 function isKeyDownOperationPermitted(event) { 59192 if (event.shiftKey || event.metaKey || event.ctrlKey || event.altKey) { 59193 return false; 59194 } 59195 59196 var element = event.target; 59197 59198 if (element instanceof HTMLInputElement && // if element is a text input 59199 element.value !== '' && (element.selectionStart !== 0 || element.selectionEnd !== 0)) { 59200 return false; 59201 } 59202 59203 return true; 59204 } 59205 /** 59206 * Returns a message to be added to aria-live region when item is removed. 59207 * 59208 * @param {Object} selectionParameters Parameters required to build the message. 59209 * @returns {string} The a11y message. 59210 */ 59211 59212 59213 function getA11yRemovalMessage(selectionParameters) { 59214 var removedSelectedItem = selectionParameters.removedSelectedItem, 59215 itemToStringLocal = selectionParameters.itemToString; 59216 return itemToStringLocal(removedSelectedItem) + " has been removed."; 59217 } 59218 59219 var propTypes = { 59220 selectedItems: (prop_types_default()).array, 59221 initialSelectedItems: (prop_types_default()).array, 59222 defaultSelectedItems: (prop_types_default()).array, 59223 itemToString: (prop_types_default()).func, 59224 getA11yRemovalMessage: (prop_types_default()).func, 59225 stateReducer: (prop_types_default()).func, 59226 activeIndex: (prop_types_default()).number, 59227 initialActiveIndex: (prop_types_default()).number, 59228 defaultActiveIndex: (prop_types_default()).number, 59229 onActiveIndexChange: (prop_types_default()).func, 59230 onSelectedItemsChange: (prop_types_default()).func, 59231 keyNavigationNext: (prop_types_default()).string, 59232 keyNavigationPrevious: (prop_types_default()).string, 59233 environment: prop_types_default().shape({ 59234 addEventListener: (prop_types_default()).func, 59235 removeEventListener: (prop_types_default()).func, 59236 document: prop_types_default().shape({ 59237 getElementById: (prop_types_default()).func, 59238 activeElement: (prop_types_default()).any, 59239 body: (prop_types_default()).any 59240 }) 59241 }) 59242 }; 59243 var defaultProps = { 59244 itemToString: defaultProps$3.itemToString, 59245 stateReducer: defaultProps$3.stateReducer, 59246 environment: defaultProps$3.environment, 59247 getA11yRemovalMessage: getA11yRemovalMessage, 59248 keyNavigationNext: 'ArrowRight', 59249 keyNavigationPrevious: 'ArrowLeft' 59250 }; // eslint-disable-next-line import/no-mutable-exports 59251 59252 var validatePropTypes = downshift_esm_noop; 59253 /* istanbul ignore next */ 59254 59255 if (false) {} 59256 59257 var SelectedItemClick = false ? 0 : 0; 59258 var SelectedItemKeyDownDelete = false ? 0 : 1; 59259 var SelectedItemKeyDownBackspace = false ? 0 : 2; 59260 var SelectedItemKeyDownNavigationNext = false ? 0 : 3; 59261 var SelectedItemKeyDownNavigationPrevious = false ? 0 : 4; 59262 var DropdownKeyDownNavigationPrevious = false ? 0 : 5; 59263 var DropdownKeyDownBackspace = false ? 0 : 6; 59264 var DropdownClick = false ? 0 : 7; 59265 var FunctionAddSelectedItem = false ? 0 : 8; 59266 var FunctionRemoveSelectedItem = false ? 0 : 9; 59267 var FunctionSetSelectedItems = false ? 0 : 10; 59268 var FunctionSetActiveIndex = false ? 0 : 11; 59269 var FunctionReset = false ? 0 : 12; 59270 59271 var stateChangeTypes = /*#__PURE__*/Object.freeze({ 59272 __proto__: null, 59273 SelectedItemClick: SelectedItemClick, 59274 SelectedItemKeyDownDelete: SelectedItemKeyDownDelete, 59275 SelectedItemKeyDownBackspace: SelectedItemKeyDownBackspace, 59276 SelectedItemKeyDownNavigationNext: SelectedItemKeyDownNavigationNext, 59277 SelectedItemKeyDownNavigationPrevious: SelectedItemKeyDownNavigationPrevious, 59278 DropdownKeyDownNavigationPrevious: DropdownKeyDownNavigationPrevious, 59279 DropdownKeyDownBackspace: DropdownKeyDownBackspace, 59280 DropdownClick: DropdownClick, 59281 FunctionAddSelectedItem: FunctionAddSelectedItem, 59282 FunctionRemoveSelectedItem: FunctionRemoveSelectedItem, 59283 FunctionSetSelectedItems: FunctionSetSelectedItems, 59284 FunctionSetActiveIndex: FunctionSetActiveIndex, 59285 FunctionReset: FunctionReset 59286 }); 59287 59288 /* eslint-disable complexity */ 59289 59290 function downshiftMultipleSelectionReducer(state, action) { 59291 var type = action.type, 59292 index = action.index, 59293 props = action.props, 59294 selectedItem = action.selectedItem; 59295 var activeIndex = state.activeIndex, 59296 selectedItems = state.selectedItems; 59297 var changes; 59298 59299 switch (type) { 59300 case SelectedItemClick: 59301 changes = { 59302 activeIndex: index 59303 }; 59304 break; 59305 59306 case SelectedItemKeyDownNavigationPrevious: 59307 changes = { 59308 activeIndex: activeIndex - 1 < 0 ? 0 : activeIndex - 1 59309 }; 59310 break; 59311 59312 case SelectedItemKeyDownNavigationNext: 59313 changes = { 59314 activeIndex: activeIndex + 1 >= selectedItems.length ? -1 : activeIndex + 1 59315 }; 59316 break; 59317 59318 case SelectedItemKeyDownBackspace: 59319 case SelectedItemKeyDownDelete: 59320 { 59321 var newActiveIndex = activeIndex; 59322 59323 if (selectedItems.length === 1) { 59324 newActiveIndex = -1; 59325 } else if (activeIndex === selectedItems.length - 1) { 59326 newActiveIndex = selectedItems.length - 2; 59327 } 59328 59329 changes = extends_extends({ 59330 selectedItems: [].concat(selectedItems.slice(0, activeIndex), selectedItems.slice(activeIndex + 1)) 59331 }, { 59332 activeIndex: newActiveIndex 59333 }); 59334 break; 59335 } 59336 59337 case DropdownKeyDownNavigationPrevious: 59338 changes = { 59339 activeIndex: selectedItems.length - 1 59340 }; 59341 break; 59342 59343 case DropdownKeyDownBackspace: 59344 changes = { 59345 selectedItems: selectedItems.slice(0, selectedItems.length - 1) 59346 }; 59347 break; 59348 59349 case FunctionAddSelectedItem: 59350 changes = { 59351 selectedItems: [].concat(selectedItems, [selectedItem]) 59352 }; 59353 break; 59354 59355 case DropdownClick: 59356 changes = { 59357 activeIndex: -1 59358 }; 59359 break; 59360 59361 case FunctionRemoveSelectedItem: 59362 { 59363 var _newActiveIndex = activeIndex; 59364 var selectedItemIndex = selectedItems.indexOf(selectedItem); 59365 59366 if (selectedItems.length === 1) { 59367 _newActiveIndex = -1; 59368 } else if (selectedItemIndex === selectedItems.length - 1) { 59369 _newActiveIndex = selectedItems.length - 2; 59370 } 59371 59372 changes = extends_extends({ 59373 selectedItems: [].concat(selectedItems.slice(0, selectedItemIndex), selectedItems.slice(selectedItemIndex + 1)) 59374 }, { 59375 activeIndex: _newActiveIndex 59376 }); 59377 break; 59378 } 59379 59380 case FunctionSetSelectedItems: 59381 { 59382 var newSelectedItems = action.selectedItems; 59383 changes = { 59384 selectedItems: newSelectedItems 59385 }; 59386 break; 59387 } 59388 59389 case FunctionSetActiveIndex: 59390 { 59391 var _newActiveIndex2 = action.activeIndex; 59392 changes = { 59393 activeIndex: _newActiveIndex2 59394 }; 59395 break; 59396 } 59397 59398 case FunctionReset: 59399 changes = { 59400 activeIndex: getDefaultValue(props, 'activeIndex'), 59401 selectedItems: getDefaultValue(props, 'selectedItems') 59402 }; 59403 break; 59404 59405 default: 59406 throw new Error('Reducer called without proper action type.'); 59407 } 59408 59409 return extends_extends({}, state, changes); 59410 } 59411 59412 var downshift_esm_excluded = ["refKey", "ref", "onClick", "onKeyDown", "selectedItem", "index"], 59413 _excluded2 = ["refKey", "ref", "onKeyDown", "onClick", "preventKeyAction"]; 59414 useMultipleSelection.stateChangeTypes = stateChangeTypes; 59415 59416 function useMultipleSelection(userProps) { 59417 if (userProps === void 0) { 59418 userProps = {}; 59419 } 59420 59421 validatePropTypes(userProps, useMultipleSelection); // Props defaults and destructuring. 59422 59423 var props = extends_extends({}, defaultProps, userProps); 59424 59425 var getA11yRemovalMessage = props.getA11yRemovalMessage, 59426 itemToString = props.itemToString, 59427 environment = props.environment, 59428 keyNavigationNext = props.keyNavigationNext, 59429 keyNavigationPrevious = props.keyNavigationPrevious; // Reducer init. 59430 59431 var _useControlledReducer = useControlledReducer$1(downshiftMultipleSelectionReducer, getInitialState(props), props), 59432 state = _useControlledReducer[0], 59433 dispatch = _useControlledReducer[1]; 59434 59435 var activeIndex = state.activeIndex, 59436 selectedItems = state.selectedItems; // Refs. 59437 59438 var isInitialMountRef = (0,external_React_.useRef)(true); 59439 var dropdownRef = (0,external_React_.useRef)(null); 59440 var previousSelectedItemsRef = (0,external_React_.useRef)(selectedItems); 59441 var selectedItemRefs = (0,external_React_.useRef)(); 59442 selectedItemRefs.current = []; 59443 var latest = useLatestRef({ 59444 state: state, 59445 props: props 59446 }); // Effects. 59447 59448 /* Sets a11y status message on changes in selectedItem. */ 59449 59450 (0,external_React_.useEffect)(function () { 59451 if (isInitialMountRef.current) { 59452 return; 59453 } 59454 59455 if (selectedItems.length < previousSelectedItemsRef.current.length) { 59456 var removedSelectedItem = previousSelectedItemsRef.current.find(function (item) { 59457 return selectedItems.indexOf(item) < 0; 59458 }); 59459 setStatus(getA11yRemovalMessage({ 59460 itemToString: itemToString, 59461 resultCount: selectedItems.length, 59462 removedSelectedItem: removedSelectedItem, 59463 activeIndex: activeIndex, 59464 activeSelectedItem: selectedItems[activeIndex] 59465 }), environment.document); 59466 } 59467 59468 previousSelectedItemsRef.current = selectedItems; // eslint-disable-next-line react-hooks/exhaustive-deps 59469 }, [selectedItems.length]); // Sets focus on active item. 59470 59471 (0,external_React_.useEffect)(function () { 59472 if (isInitialMountRef.current) { 59473 return; 59474 } 59475 59476 if (activeIndex === -1 && dropdownRef.current) { 59477 dropdownRef.current.focus(); 59478 } else if (selectedItemRefs.current[activeIndex]) { 59479 selectedItemRefs.current[activeIndex].focus(); 59480 } 59481 }, [activeIndex]); 59482 useControlPropsValidator({ 59483 isInitialMount: isInitialMountRef.current, 59484 props: props, 59485 state: state 59486 }); 59487 var setGetterPropCallInfo = useGetterPropsCalledChecker('getDropdownProps'); // Make initial ref false. 59488 59489 (0,external_React_.useEffect)(function () { 59490 isInitialMountRef.current = false; 59491 }, []); // Event handler functions. 59492 59493 var selectedItemKeyDownHandlers = (0,external_React_.useMemo)(function () { 59494 var _ref; 59495 59496 return _ref = {}, _ref[keyNavigationPrevious] = function () { 59497 dispatch({ 59498 type: SelectedItemKeyDownNavigationPrevious 59499 }); 59500 }, _ref[keyNavigationNext] = function () { 59501 dispatch({ 59502 type: SelectedItemKeyDownNavigationNext 59503 }); 59504 }, _ref.Delete = function Delete() { 59505 dispatch({ 59506 type: SelectedItemKeyDownDelete 59507 }); 59508 }, _ref.Backspace = function Backspace() { 59509 dispatch({ 59510 type: SelectedItemKeyDownBackspace 59511 }); 59512 }, _ref; 59513 }, [dispatch, keyNavigationNext, keyNavigationPrevious]); 59514 var dropdownKeyDownHandlers = (0,external_React_.useMemo)(function () { 59515 var _ref2; 59516 59517 return _ref2 = {}, _ref2[keyNavigationPrevious] = function (event) { 59518 if (isKeyDownOperationPermitted(event)) { 59519 dispatch({ 59520 type: DropdownKeyDownNavigationPrevious 59521 }); 59522 } 59523 }, _ref2.Backspace = function Backspace(event) { 59524 if (isKeyDownOperationPermitted(event)) { 59525 dispatch({ 59526 type: DropdownKeyDownBackspace 59527 }); 59528 } 59529 }, _ref2; 59530 }, [dispatch, keyNavigationPrevious]); // Getter props. 59531 59532 var getSelectedItemProps = (0,external_React_.useCallback)(function (_temp) { 59533 var _extends2; 59534 59535 var _ref3 = _temp === void 0 ? {} : _temp, 59536 _ref3$refKey = _ref3.refKey, 59537 refKey = _ref3$refKey === void 0 ? 'ref' : _ref3$refKey, 59538 ref = _ref3.ref, 59539 onClick = _ref3.onClick, 59540 onKeyDown = _ref3.onKeyDown, 59541 selectedItem = _ref3.selectedItem, 59542 index = _ref3.index, 59543 rest = objectWithoutPropertiesLoose_objectWithoutPropertiesLoose(_ref3, downshift_esm_excluded); 59544 59545 var latestState = latest.current.state; 59546 var itemIndex = getItemIndex(index, selectedItem, latestState.selectedItems); 59547 59548 if (itemIndex < 0) { 59549 throw new Error('Pass either selectedItem or index in getSelectedItemProps!'); 59550 } 59551 59552 var selectedItemHandleClick = function selectedItemHandleClick() { 59553 dispatch({ 59554 type: SelectedItemClick, 59555 index: index 59556 }); 59557 }; 59558 59559 var selectedItemHandleKeyDown = function selectedItemHandleKeyDown(event) { 59560 var key = normalizeArrowKey(event); 59561 59562 if (key && selectedItemKeyDownHandlers[key]) { 59563 selectedItemKeyDownHandlers[key](event); 59564 } 59565 }; 59566 59567 return extends_extends((_extends2 = {}, _extends2[refKey] = handleRefs(ref, function (selectedItemNode) { 59568 if (selectedItemNode) { 59569 selectedItemRefs.current.push(selectedItemNode); 59570 } 59571 }), _extends2.tabIndex = index === latestState.activeIndex ? 0 : -1, _extends2.onClick = callAllEventHandlers(onClick, selectedItemHandleClick), _extends2.onKeyDown = callAllEventHandlers(onKeyDown, selectedItemHandleKeyDown), _extends2), rest); 59572 }, [dispatch, latest, selectedItemKeyDownHandlers]); 59573 var getDropdownProps = (0,external_React_.useCallback)(function (_temp2, _temp3) { 59574 var _extends3; 59575 59576 var _ref4 = _temp2 === void 0 ? {} : _temp2, 59577 _ref4$refKey = _ref4.refKey, 59578 refKey = _ref4$refKey === void 0 ? 'ref' : _ref4$refKey, 59579 ref = _ref4.ref, 59580 onKeyDown = _ref4.onKeyDown, 59581 onClick = _ref4.onClick, 59582 _ref4$preventKeyActio = _ref4.preventKeyAction, 59583 preventKeyAction = _ref4$preventKeyActio === void 0 ? false : _ref4$preventKeyActio, 59584 rest = objectWithoutPropertiesLoose_objectWithoutPropertiesLoose(_ref4, _excluded2); 59585 59586 var _ref5 = _temp3 === void 0 ? {} : _temp3, 59587 _ref5$suppressRefErro = _ref5.suppressRefError, 59588 suppressRefError = _ref5$suppressRefErro === void 0 ? false : _ref5$suppressRefErro; 59589 59590 setGetterPropCallInfo('getDropdownProps', suppressRefError, refKey, dropdownRef); 59591 59592 var dropdownHandleKeyDown = function dropdownHandleKeyDown(event) { 59593 var key = normalizeArrowKey(event); 59594 59595 if (key && dropdownKeyDownHandlers[key]) { 59596 dropdownKeyDownHandlers[key](event); 59597 } 59598 }; 59599 59600 var dropdownHandleClick = function dropdownHandleClick() { 59601 dispatch({ 59602 type: DropdownClick 59603 }); 59604 }; 59605 59606 return extends_extends((_extends3 = {}, _extends3[refKey] = handleRefs(ref, function (dropdownNode) { 59607 if (dropdownNode) { 59608 dropdownRef.current = dropdownNode; 59609 } 59610 }), _extends3), !preventKeyAction && { 59611 onKeyDown: callAllEventHandlers(onKeyDown, dropdownHandleKeyDown), 59612 onClick: callAllEventHandlers(onClick, dropdownHandleClick) 59613 }, rest); 59614 }, [dispatch, dropdownKeyDownHandlers, setGetterPropCallInfo]); // returns 59615 59616 var addSelectedItem = (0,external_React_.useCallback)(function (selectedItem) { 59617 dispatch({ 59618 type: FunctionAddSelectedItem, 59619 selectedItem: selectedItem 59620 }); 59621 }, [dispatch]); 59622 var removeSelectedItem = (0,external_React_.useCallback)(function (selectedItem) { 59623 dispatch({ 59624 type: FunctionRemoveSelectedItem, 59625 selectedItem: selectedItem 59626 }); 59627 }, [dispatch]); 59628 var setSelectedItems = (0,external_React_.useCallback)(function (newSelectedItems) { 59629 dispatch({ 59630 type: FunctionSetSelectedItems, 59631 selectedItems: newSelectedItems 59632 }); 59633 }, [dispatch]); 59634 var setActiveIndex = (0,external_React_.useCallback)(function (newActiveIndex) { 59635 dispatch({ 59636 type: FunctionSetActiveIndex, 59637 activeIndex: newActiveIndex 59638 }); 59639 }, [dispatch]); 59640 var reset = (0,external_React_.useCallback)(function () { 59641 dispatch({ 59642 type: FunctionReset 59643 }); 59644 }, [dispatch]); 59645 return { 59646 getSelectedItemProps: getSelectedItemProps, 59647 getDropdownProps: getDropdownProps, 59648 addSelectedItem: addSelectedItem, 59649 removeSelectedItem: removeSelectedItem, 59650 setSelectedItems: setSelectedItems, 59651 setActiveIndex: setActiveIndex, 59652 reset: reset, 59653 selectedItems: selectedItems, 59654 activeIndex: activeIndex 59655 }; 59656 } 59657 59658 59659 59660 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/custom-select-control/index.js 59661 59662 59663 59664 /** 59665 * External dependencies 59666 */ 59667 59668 59669 /** 59670 * WordPress dependencies 59671 */ 59672 59673 59674 59675 59676 /** 59677 * Internal dependencies 59678 */ 59679 59680 59681 59682 const custom_select_control_itemToString = item => item === null || item === void 0 ? void 0 : item.name; // This is needed so that in Windows, where 59683 // the menu does not necessarily open on 59684 // key up/down, you can still switch between 59685 // options with the menu closed. 59686 59687 59688 const custom_select_control_stateReducer = (_ref, _ref2) => { 59689 let { 59690 selectedItem 59691 } = _ref; 59692 let { 59693 type, 59694 changes, 59695 props: { 59696 items 59697 } 59698 } = _ref2; 59699 59700 switch (type) { 59701 case useSelect.stateChangeTypes.ToggleButtonKeyDownArrowDown: 59702 // If we already have a selected item, try to select the next one, 59703 // without circular navigation. Otherwise, select the first item. 59704 return { 59705 selectedItem: items[selectedItem ? Math.min(items.indexOf(selectedItem) + 1, items.length - 1) : 0] 59706 }; 59707 59708 case useSelect.stateChangeTypes.ToggleButtonKeyDownArrowUp: 59709 // If we already have a selected item, try to select the previous one, 59710 // without circular navigation. Otherwise, select the last item. 59711 return { 59712 selectedItem: items[selectedItem ? Math.max(items.indexOf(selectedItem) - 1, 0) : items.length - 1] 59713 }; 59714 59715 default: 59716 return changes; 59717 } 59718 }; 59719 59720 function CustomSelectControl(_ref3) { 59721 var _menuProps$ariaActiv; 59722 59723 let { 59724 /** Start opting into the larger default height that will become the default size in a future version. */ 59725 __next36pxDefaultSize = false, 59726 className, 59727 hideLabelFromVision, 59728 label, 59729 describedBy, 59730 options: items, 59731 onChange: onSelectedItemChange, 59732 value: _selectedItem 59733 } = _ref3; 59734 const { 59735 getLabelProps, 59736 getToggleButtonProps, 59737 getMenuProps, 59738 getItemProps, 59739 isOpen, 59740 highlightedIndex, 59741 selectedItem 59742 } = useSelect({ 59743 initialSelectedItem: items[0], 59744 items, 59745 itemToString: custom_select_control_itemToString, 59746 onSelectedItemChange, 59747 ...(typeof _selectedItem !== 'undefined' && _selectedItem !== null ? { 59748 selectedItem: _selectedItem 59749 } : undefined), 59750 stateReducer: custom_select_control_stateReducer 59751 }); 59752 59753 function getDescribedBy() { 59754 if (describedBy) { 59755 return describedBy; 59756 } 59757 59758 if (!selectedItem) { 59759 return (0,external_wp_i18n_namespaceObject.__)('No selection'); 59760 } // translators: %s: The selected option. 59761 59762 59763 return (0,external_wp_i18n_namespaceObject.sprintf)((0,external_wp_i18n_namespaceObject.__)('Currently selected: %s'), selectedItem.name); 59764 } 59765 59766 const menuProps = getMenuProps({ 59767 className: 'components-custom-select-control__menu', 59768 'aria-hidden': !isOpen 59769 }); 59770 const onKeyDownHandler = (0,external_wp_element_namespaceObject.useCallback)(e => { 59771 var _menuProps$onKeyDown; 59772 59773 e.stopPropagation(); 59774 menuProps === null || menuProps === void 0 ? void 0 : (_menuProps$onKeyDown = menuProps.onKeyDown) === null || _menuProps$onKeyDown === void 0 ? void 0 : _menuProps$onKeyDown.call(menuProps, e); 59775 }, [menuProps]); // We need this here, because the null active descendant is not fully ARIA compliant. 59776 59777 if ((_menuProps$ariaActiv = menuProps['aria-activedescendant']) !== null && _menuProps$ariaActiv !== void 0 && _menuProps$ariaActiv.startsWith('downshift-null')) { 59778 delete menuProps['aria-activedescendant']; 59779 } 59780 59781 return (0,external_wp_element_namespaceObject.createElement)("div", { 59782 className: classnames_default()('components-custom-select-control', className) 59783 }, hideLabelFromVision ? (0,external_wp_element_namespaceObject.createElement)(visually_hidden_component, extends_extends({ 59784 as: "label" 59785 }, getLabelProps()), label) : 59786 /* eslint-disable-next-line jsx-a11y/label-has-associated-control, jsx-a11y/label-has-for */ 59787 (0,external_wp_element_namespaceObject.createElement)("label", getLabelProps({ 59788 className: 'components-custom-select-control__label' 59789 }), label), (0,external_wp_element_namespaceObject.createElement)(build_module_button, getToggleButtonProps({ 59790 // This is needed because some speech recognition software don't support `aria-labelledby`. 59791 'aria-label': label, 59792 'aria-labelledby': undefined, 59793 className: classnames_default()('components-custom-select-control__button', { 59794 'is-next-36px-default-size': __next36pxDefaultSize 59795 }), 59796 isSmall: !__next36pxDefaultSize, 59797 describedBy: getDescribedBy() 59798 }), custom_select_control_itemToString(selectedItem), (0,external_wp_element_namespaceObject.createElement)(icons_build_module_icon, { 59799 icon: chevron_down, 59800 className: classnames_default()('components-custom-select-control__button-icon', { 59801 'is-next-36px-default-size': __next36pxDefaultSize 59802 }), 59803 size: 18 59804 })), (0,external_wp_element_namespaceObject.createElement)("ul", extends_extends({}, menuProps, { 59805 onKeyDown: onKeyDownHandler 59806 }), isOpen && items.map((item, index) => // eslint-disable-next-line react/jsx-key 59807 (0,external_wp_element_namespaceObject.createElement)("li", getItemProps({ 59808 item, 59809 index, 59810 key: item.key, 59811 className: classnames_default()(item.className, 'components-custom-select-control__item', { 59812 'is-highlighted': index === highlightedIndex, 59813 'has-hint': !!item.__experimentalHint, 59814 'is-next-36px-default-size': __next36pxDefaultSize 59815 }), 59816 style: item.style 59817 }), item.name, item.__experimentalHint && (0,external_wp_element_namespaceObject.createElement)("span", { 59818 className: "components-custom-select-control__item-hint" 59819 }, item.__experimentalHint), item === selectedItem && (0,external_wp_element_namespaceObject.createElement)(icons_build_module_icon, { 59820 icon: library_check, 59821 className: "components-custom-select-control__item-icon" 59822 }))))); 59823 } 59824 59825 // EXTERNAL MODULE: ./node_modules/react-dates/initialize.js 59826 var initialize = __webpack_require__(4185); 59827 // EXTERNAL MODULE: external "moment" 59828 var external_moment_ = __webpack_require__(6292); 59829 var external_moment_default = /*#__PURE__*/__webpack_require__.n(external_moment_); 59830 // EXTERNAL MODULE: ./node_modules/react-dates/lib/components/DayPickerSingleDateController.js 59831 var DayPickerSingleDateController = __webpack_require__(6302); 59832 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/date-time/utils.js 59833 /** 59834 * External dependencies 59835 */ 59836 59837 /** 59838 * Create a Moment object from a date string. With no date supplied, default to a Moment 59839 * object representing now. If a null value is passed, return a null value. 59840 * 59841 * @param {?string} date Date representing the currently selected date or null to signify no selection. 59842 * @return {?moment.Moment} Moment object for selected date or null. 59843 */ 59844 59845 const getMomentDate = date => { 59846 if (null === date) { 59847 return null; 59848 } 59849 59850 return date ? external_moment_default()(date) : external_moment_default()(); 59851 }; 59852 59853 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/date-time/date.js 59854 59855 59856 /** 59857 * External dependencies 59858 */ 59859 59860 // react-dates doesn't tree-shake correctly, so we import from the individual 59861 // component here, to avoid including too much of the library 59862 59863 59864 /** 59865 * WordPress dependencies 59866 */ 59867 59868 59869 59870 /** 59871 * Internal dependencies 59872 */ 59873 59874 59875 /** 59876 * Module Constants 59877 */ 59878 59879 const TIMEZONELESS_FORMAT = 'YYYY-MM-DDTHH:mm:ss'; 59880 const ARIAL_LABEL_TIME_FORMAT = 'dddd, LL'; 59881 59882 function DatePickerDay(_ref) { 59883 let { 59884 day, 59885 events = [] 59886 } = _ref; 59887 const ref = (0,external_wp_element_namespaceObject.useRef)(); 59888 /* 59889 * a11y hack to make the `There is/are n events` string 59890 * available speaking for readers, 59891 * re-defining the aria-label attribute. 59892 * This attribute is handled by the react-dates component. 59893 */ 59894 59895 (0,external_wp_element_namespaceObject.useEffect)(() => { 59896 var _ref$current; 59897 59898 // Bail when no parent node. 59899 if (!(ref !== null && ref !== void 0 && (_ref$current = ref.current) !== null && _ref$current !== void 0 && _ref$current.parentNode)) { 59900 return; 59901 } 59902 59903 const { 59904 parentNode 59905 } = ref.current; 59906 const dayAriaLabel = external_moment_default()(day).format(ARIAL_LABEL_TIME_FORMAT); 59907 59908 if (!events.length) { 59909 // Set aria-label without event description. 59910 parentNode.setAttribute('aria-label', dayAriaLabel); 59911 return; 59912 } 59913 59914 const dayWithEventsDescription = (0,external_wp_i18n_namespaceObject.sprintf)( // translators: 1: Calendar day format, 2: Calendar event number. 59915 (0,external_wp_i18n_namespaceObject._n)('%1$s. There is %2$d event.', '%1$s. There are %2$d events.', events.length), dayAriaLabel, events.length); 59916 parentNode.setAttribute('aria-label', dayWithEventsDescription); 59917 }, [events.length]); 59918 return (0,external_wp_element_namespaceObject.createElement)("div", { 59919 ref: ref, 59920 className: classnames_default()('components-datetime__date__day', { 59921 'has-events': events === null || events === void 0 ? void 0 : events.length 59922 }) 59923 }, day.format('D')); 59924 } 59925 59926 function DatePicker(_ref2) { 59927 let { 59928 currentDate, 59929 onChange, 59930 events, 59931 isInvalidDate, 59932 onMonthPreviewed 59933 } = _ref2; 59934 const nodeRef = (0,external_wp_element_namespaceObject.useRef)(); 59935 59936 const onMonthPreviewedHandler = newMonthDate => { 59937 onMonthPreviewed === null || onMonthPreviewed === void 0 ? void 0 : onMonthPreviewed(newMonthDate.toISOString()); 59938 keepFocusInside(); 59939 }; 59940 /* 59941 * Todo: We should remove this function ASAP. 59942 * It is kept because focus is lost when we click on the previous and next month buttons. 59943 * This focus loss closes the date picker popover. 59944 * Ideally we should add an upstream commit on react-dates to fix this issue. 59945 */ 59946 59947 59948 const keepFocusInside = () => { 59949 if (!nodeRef.current) { 59950 return; 59951 } 59952 59953 const { 59954 ownerDocument 59955 } = nodeRef.current; 59956 const { 59957 activeElement 59958 } = ownerDocument; // If focus was lost. 59959 59960 if (!activeElement || !nodeRef.current.contains(ownerDocument.activeElement)) { 59961 // Retrieve the focus region div. 59962 const focusRegion = nodeRef.current.querySelector('.DayPicker_focusRegion'); 59963 59964 if (!focusRegion) { 59965 return; 59966 } // Keep the focus on focus region. 59967 59968 59969 focusRegion.focus(); 59970 } 59971 }; 59972 59973 const onChangeMoment = newDate => { 59974 // If currentDate is null, use now as momentTime to designate hours, minutes, seconds. 59975 const momentDate = currentDate ? external_moment_default()(currentDate) : external_moment_default()(); 59976 const momentTime = { 59977 hours: momentDate.hours(), 59978 minutes: momentDate.minutes(), 59979 seconds: 0 59980 }; 59981 onChange(newDate.set(momentTime).format(TIMEZONELESS_FORMAT)); // Keep focus on the date picker. 59982 59983 keepFocusInside(); 59984 }; 59985 59986 const getEventsPerDay = day => { 59987 if (!(events !== null && events !== void 0 && events.length)) { 59988 return []; 59989 } 59990 59991 return events.filter(eventDay => day.isSame(eventDay.date, 'day')); 59992 }; 59993 59994 const momentDate = getMomentDate(currentDate); 59995 return (0,external_wp_element_namespaceObject.createElement)("div", { 59996 className: "components-datetime__date", 59997 ref: nodeRef 59998 }, (0,external_wp_element_namespaceObject.createElement)(DayPickerSingleDateController/* default */.Z, { 59999 date: momentDate, 60000 daySize: 30, 60001 focused: true, 60002 hideKeyboardShortcutsPanel: true // This is a hack to force the calendar to update on month or year change 60003 // https://github.com/airbnb/react-dates/issues/240#issuecomment-361776665 60004 , 60005 key: `datepicker-controller-$momentDate ? momentDate.format('MM-YYYY') : 'null'}`, 60006 noBorder: true, 60007 numberOfMonths: 1, 60008 onDateChange: onChangeMoment, 60009 transitionDuration: 0, 60010 weekDayFormat: "ddd", 60011 dayAriaLabelFormat: ARIAL_LABEL_TIME_FORMAT, 60012 isRTL: (0,external_wp_i18n_namespaceObject.isRTL)(), 60013 isOutsideRange: date => { 60014 return isInvalidDate && isInvalidDate(date.toDate()); 60015 }, 60016 onPrevMonthClick: onMonthPreviewedHandler, 60017 onNextMonthClick: onMonthPreviewedHandler, 60018 renderDayContents: day => (0,external_wp_element_namespaceObject.createElement)(DatePickerDay, { 60019 day: day, 60020 events: getEventsPerDay(day) 60021 }) 60022 })); 60023 } 60024 60025 /* harmony default export */ var date = (DatePicker); 60026 60027 ;// CONCATENATED MODULE: external ["wp","date"] 60028 var external_wp_date_namespaceObject = window["wp"]["date"]; 60029 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/date-time/timezone.js 60030 60031 60032 /** 60033 * WordPress dependencies 60034 */ 60035 60036 60037 /** 60038 * Internal dependencies 60039 */ 60040 60041 60042 /** 60043 * Displays timezone information when user timezone is different from site timezone. 60044 */ 60045 60046 const TimeZone = () => { 60047 const { 60048 timezone 60049 } = (0,external_wp_date_namespaceObject.__experimentalGetSettings)(); // Convert timezone offset to hours. 60050 60051 const userTimezoneOffset = -1 * (new Date().getTimezoneOffset() / 60); // System timezone and user timezone match, nothing needed. 60052 // Compare as numbers because it comes over as string. 60053 60054 if (Number(timezone.offset) === userTimezoneOffset) { 60055 return null; 60056 } 60057 60058 const offsetSymbol = timezone.offset >= 0 ? '+' : ''; 60059 const zoneAbbr = '' !== timezone.abbr && isNaN(timezone.abbr) ? timezone.abbr : `UTC$offsetSymbol}$timezone.offset}`; 60060 const timezoneDetail = 'UTC' === timezone.string ? (0,external_wp_i18n_namespaceObject.__)('Coordinated Universal Time') : `($zoneAbbr}) $timezone.string.replace('_', ' ')}`; 60061 return (0,external_wp_element_namespaceObject.createElement)(tooltip, { 60062 position: "top center", 60063 text: timezoneDetail 60064 }, (0,external_wp_element_namespaceObject.createElement)("div", { 60065 className: "components-datetime__timezone" 60066 }, zoneAbbr)); 60067 }; 60068 60069 /* harmony default export */ var timezone = (TimeZone); 60070 60071 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/date-time/time.js 60072 60073 60074 /** 60075 * External dependencies 60076 */ 60077 60078 60079 60080 /** 60081 * WordPress dependencies 60082 */ 60083 60084 60085 60086 /** 60087 * Internal dependencies 60088 */ 60089 60090 60091 60092 60093 /** 60094 * Module Constants 60095 */ 60096 60097 const time_TIMEZONELESS_FORMAT = 'YYYY-MM-DDTHH:mm:ss'; 60098 60099 function from12hTo24h(hours, isPm) { 60100 return isPm ? (hours % 12 + 12) % 24 : hours % 12; 60101 } 60102 /** 60103 * <UpdateOnBlurAsIntegerField> 60104 * A shared component to parse, validate, and handle remounting of the underlying form field element like <input> and <select>. 60105 * 60106 * @param {Object} props Component props. 60107 * @param {string} props.as Render the component as specific element tag, defaults to "input". 60108 * @param {number|string} props.value The default value of the component which will be parsed to integer. 60109 * @param {Function} props.onUpdate Call back when blurred and validated. 60110 * @param {string} [props.className] 60111 */ 60112 60113 60114 function UpdateOnBlurAsIntegerField(_ref) { 60115 let { 60116 as, 60117 value, 60118 onUpdate, 60119 className, 60120 ...props 60121 } = _ref; 60122 60123 function handleBlur(event) { 60124 const { 60125 target 60126 } = event; 60127 60128 if (value === target.value) { 60129 return; 60130 } 60131 60132 const parsedValue = parseInt(target.value, 10); // Run basic number validation on the input. 60133 60134 if (!(0,external_lodash_namespaceObject.isInteger)(parsedValue) || typeof props.max !== 'undefined' && parsedValue > props.max || typeof props.min !== 'undefined' && parsedValue < props.min) { 60135 // If validation failed, reset the value to the previous valid value. 60136 target.value = value; 60137 } else { 60138 // Otherwise, it's valid, call onUpdate. 60139 onUpdate(target.name, parsedValue); 60140 } 60141 } 60142 60143 return (0,external_wp_element_namespaceObject.createElement)(as || 'input', { 60144 // Re-mount the input value to accept the latest value as the defaultValue. 60145 key: value, 60146 defaultValue: value, 60147 onBlur: handleBlur, 60148 className: classnames_default()('components-datetime__time-field-integer-field', className), 60149 ...props 60150 }); 60151 } 60152 /** 60153 * <TimePicker> 60154 * 60155 * @typedef {Date|string|number} WPValidDateTimeFormat 60156 * 60157 * @param {Object} props Component props. 60158 * @param {boolean} props.is12Hour Should the time picker showed in 12 hour format or 24 hour format. 60159 * @param {WPValidDateTimeFormat} props.currentTime The initial current time the time picker should render. 60160 * @param {Function} props.onChange Callback function when the date changed. 60161 */ 60162 60163 60164 function TimePicker(_ref2) { 60165 let { 60166 is12Hour, 60167 currentTime, 60168 onChange 60169 } = _ref2; 60170 const [date, setDate] = (0,external_wp_element_namespaceObject.useState)(() => // Truncate the date at the minutes, see: #15495. 60171 external_moment_default()(currentTime).startOf('minutes')); // Reset the state when currentTime changed. 60172 60173 (0,external_wp_element_namespaceObject.useEffect)(() => { 60174 setDate(currentTime ? external_moment_default()(currentTime).startOf('minutes') : external_moment_default()()); 60175 }, [currentTime]); 60176 const { 60177 day, 60178 month, 60179 year, 60180 minutes, 60181 hours, 60182 am 60183 } = (0,external_wp_element_namespaceObject.useMemo)(() => ({ 60184 day: date.format('DD'), 60185 month: date.format('MM'), 60186 year: date.format('YYYY'), 60187 minutes: date.format('mm'), 60188 hours: date.format(is12Hour ? 'hh' : 'HH'), 60189 am: date.format('H') <= 11 ? 'AM' : 'PM' 60190 }), [date, is12Hour]); 60191 /** 60192 * Function that sets the date state and calls the onChange with a new date. 60193 * The date is truncated at the minutes. 60194 * 60195 * @param {Object} newDate The date object. 60196 */ 60197 60198 function changeDate(newDate) { 60199 setDate(newDate); 60200 onChange(newDate.format(time_TIMEZONELESS_FORMAT)); 60201 } 60202 60203 function update(name, value) { 60204 // If the 12-hour format is being used and the 'PM' period is selected, then 60205 // the incoming value (which ranges 1-12) should be increased by 12 to match 60206 // the expected 24-hour format. 60207 let adjustedValue = value; 60208 60209 if (name === 'hours' && is12Hour) { 60210 adjustedValue = from12hTo24h(value, am === 'PM'); 60211 } // Clone the date and call the specific setter function according to `name`. 60212 60213 60214 const newDate = date.clone()[name](adjustedValue); 60215 changeDate(newDate); 60216 } 60217 60218 function updateAmPm(value) { 60219 return () => { 60220 if (am === value) { 60221 return; 60222 } 60223 60224 const parsedHours = parseInt(hours, 10); 60225 const newDate = date.clone().hours(from12hTo24h(parsedHours, value === 'PM')); 60226 changeDate(newDate); 60227 }; 60228 } 60229 60230 const dayFormat = (0,external_wp_element_namespaceObject.createElement)("div", { 60231 className: "components-datetime__time-field components-datetime__time-field-day" 60232 }, (0,external_wp_element_namespaceObject.createElement)(UpdateOnBlurAsIntegerField, { 60233 "aria-label": (0,external_wp_i18n_namespaceObject.__)('Day'), 60234 className: "components-datetime__time-field-day-input", 60235 type: "number" // The correct function to call in moment.js is "date" not "day". 60236 , 60237 name: "date", 60238 value: day, 60239 step: 1, 60240 min: 1, 60241 max: 31, 60242 onUpdate: update 60243 })); 60244 const monthFormat = (0,external_wp_element_namespaceObject.createElement)("div", { 60245 className: "components-datetime__time-field components-datetime__time-field-month" 60246 }, (0,external_wp_element_namespaceObject.createElement)(UpdateOnBlurAsIntegerField, { 60247 as: "select", 60248 "aria-label": (0,external_wp_i18n_namespaceObject.__)('Month'), 60249 className: "components-datetime__time-field-month-select", 60250 name: "month", 60251 value: month // The value starts from 0, so we have to -1 when setting month. 60252 , 60253 onUpdate: (key, value) => update(key, value - 1) 60254 }, (0,external_wp_element_namespaceObject.createElement)("option", { 60255 value: "01" 60256 }, (0,external_wp_i18n_namespaceObject.__)('January')), (0,external_wp_element_namespaceObject.createElement)("option", { 60257 value: "02" 60258 }, (0,external_wp_i18n_namespaceObject.__)('February')), (0,external_wp_element_namespaceObject.createElement)("option", { 60259 value: "03" 60260 }, (0,external_wp_i18n_namespaceObject.__)('March')), (0,external_wp_element_namespaceObject.createElement)("option", { 60261 value: "04" 60262 }, (0,external_wp_i18n_namespaceObject.__)('April')), (0,external_wp_element_namespaceObject.createElement)("option", { 60263 value: "05" 60264 }, (0,external_wp_i18n_namespaceObject.__)('May')), (0,external_wp_element_namespaceObject.createElement)("option", { 60265 value: "06" 60266 }, (0,external_wp_i18n_namespaceObject.__)('June')), (0,external_wp_element_namespaceObject.createElement)("option", { 60267 value: "07" 60268 }, (0,external_wp_i18n_namespaceObject.__)('July')), (0,external_wp_element_namespaceObject.createElement)("option", { 60269 value: "08" 60270 }, (0,external_wp_i18n_namespaceObject.__)('August')), (0,external_wp_element_namespaceObject.createElement)("option", { 60271 value: "09" 60272 }, (0,external_wp_i18n_namespaceObject.__)('September')), (0,external_wp_element_namespaceObject.createElement)("option", { 60273 value: "10" 60274 }, (0,external_wp_i18n_namespaceObject.__)('October')), (0,external_wp_element_namespaceObject.createElement)("option", { 60275 value: "11" 60276 }, (0,external_wp_i18n_namespaceObject.__)('November')), (0,external_wp_element_namespaceObject.createElement)("option", { 60277 value: "12" 60278 }, (0,external_wp_i18n_namespaceObject.__)('December')))); 60279 const dayMonthFormat = is12Hour ? (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, monthFormat, dayFormat) : (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, dayFormat, monthFormat); 60280 return (0,external_wp_element_namespaceObject.createElement)("div", { 60281 className: classnames_default()('components-datetime__time') 60282 }, (0,external_wp_element_namespaceObject.createElement)("fieldset", null, (0,external_wp_element_namespaceObject.createElement)("legend", { 60283 className: "components-datetime__time-legend invisible" 60284 }, (0,external_wp_i18n_namespaceObject.__)('Date')), (0,external_wp_element_namespaceObject.createElement)("div", { 60285 className: "components-datetime__time-wrapper" 60286 }, dayMonthFormat, (0,external_wp_element_namespaceObject.createElement)("div", { 60287 className: "components-datetime__time-field components-datetime__time-field-year" 60288 }, (0,external_wp_element_namespaceObject.createElement)(UpdateOnBlurAsIntegerField, { 60289 "aria-label": (0,external_wp_i18n_namespaceObject.__)('Year'), 60290 className: "components-datetime__time-field-year-input", 60291 type: "number", 60292 name: "year", 60293 step: 1, 60294 min: 0, 60295 max: 9999, 60296 value: year, 60297 onUpdate: update 60298 })))), (0,external_wp_element_namespaceObject.createElement)("fieldset", null, (0,external_wp_element_namespaceObject.createElement)("legend", { 60299 className: "components-datetime__time-legend invisible" 60300 }, (0,external_wp_i18n_namespaceObject.__)('Time')), (0,external_wp_element_namespaceObject.createElement)("div", { 60301 className: "components-datetime__time-wrapper" 60302 }, (0,external_wp_element_namespaceObject.createElement)("div", { 60303 className: "components-datetime__time-field components-datetime__time-field-time" 60304 }, (0,external_wp_element_namespaceObject.createElement)(UpdateOnBlurAsIntegerField, { 60305 "aria-label": (0,external_wp_i18n_namespaceObject.__)('Hours'), 60306 className: "components-datetime__time-field-hours-input", 60307 type: "number", 60308 name: "hours", 60309 step: 1, 60310 min: is12Hour ? 1 : 0, 60311 max: is12Hour ? 12 : 23, 60312 value: hours, 60313 onUpdate: update 60314 }), (0,external_wp_element_namespaceObject.createElement)("span", { 60315 className: "components-datetime__time-separator", 60316 "aria-hidden": "true" 60317 }, ":"), (0,external_wp_element_namespaceObject.createElement)(UpdateOnBlurAsIntegerField, { 60318 "aria-label": (0,external_wp_i18n_namespaceObject.__)('Minutes'), 60319 className: "components-datetime__time-field-minutes-input", 60320 type: "number", 60321 name: "minutes", 60322 step: 1, 60323 min: 0, 60324 max: 59, 60325 value: minutes, 60326 onUpdate: update 60327 })), is12Hour && (0,external_wp_element_namespaceObject.createElement)(button_group, { 60328 className: "components-datetime__time-field components-datetime__time-field-am-pm" 60329 }, (0,external_wp_element_namespaceObject.createElement)(build_module_button, { 60330 variant: am === 'AM' ? 'primary' : 'secondary', 60331 onClick: updateAmPm('AM'), 60332 className: "components-datetime__time-am-button" 60333 }, (0,external_wp_i18n_namespaceObject.__)('AM')), (0,external_wp_element_namespaceObject.createElement)(build_module_button, { 60334 variant: am === 'PM' ? 'primary' : 'secondary', 60335 onClick: updateAmPm('PM'), 60336 className: "components-datetime__time-pm-button" 60337 }, (0,external_wp_i18n_namespaceObject.__)('PM'))), (0,external_wp_element_namespaceObject.createElement)(timezone, null)))); 60338 } 60339 /* harmony default export */ var time = (TimePicker); 60340 60341 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/date-time/index.js 60342 60343 60344 /** 60345 * External dependencies 60346 */ 60347 // Needed to initialise the default datepicker styles. 60348 // See: https://github.com/airbnb/react-dates#initialize 60349 60350 60351 /** 60352 * WordPress dependencies 60353 */ 60354 60355 60356 60357 /** 60358 * Internal dependencies 60359 */ 60360 60361 60362 60363 60364 60365 60366 function DateTimePicker(_ref, ref) { 60367 let { 60368 currentDate, 60369 is12Hour, 60370 isInvalidDate, 60371 onMonthPreviewed = external_lodash_namespaceObject.noop, 60372 onChange, 60373 events 60374 } = _ref; 60375 const [calendarHelpIsVisible, setCalendarHelpIsVisible] = (0,external_wp_element_namespaceObject.useState)(false); 60376 60377 function onClickDescriptionToggle() { 60378 setCalendarHelpIsVisible(!calendarHelpIsVisible); 60379 } 60380 60381 return (0,external_wp_element_namespaceObject.createElement)("div", { 60382 ref: ref, 60383 className: "components-datetime" 60384 }, !calendarHelpIsVisible && (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, (0,external_wp_element_namespaceObject.createElement)(time, { 60385 currentTime: currentDate, 60386 onChange: onChange, 60387 is12Hour: is12Hour 60388 }), (0,external_wp_element_namespaceObject.createElement)(date, { 60389 currentDate: currentDate, 60390 onChange: onChange, 60391 isInvalidDate: isInvalidDate, 60392 events: events, 60393 onMonthPreviewed: onMonthPreviewed 60394 })), calendarHelpIsVisible && (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, (0,external_wp_element_namespaceObject.createElement)("div", { 60395 className: "components-datetime__calendar-help" 60396 }, (0,external_wp_element_namespaceObject.createElement)("h4", null, (0,external_wp_i18n_namespaceObject.__)('Click to Select')), (0,external_wp_element_namespaceObject.createElement)("ul", null, (0,external_wp_element_namespaceObject.createElement)("li", null, (0,external_wp_i18n_namespaceObject.__)('Click the right or left arrows to select other months in the past or the future.')), (0,external_wp_element_namespaceObject.createElement)("li", null, (0,external_wp_i18n_namespaceObject.__)('Click the desired day to select it.'))), (0,external_wp_element_namespaceObject.createElement)("h4", null, (0,external_wp_i18n_namespaceObject.__)('Navigating with a keyboard')), (0,external_wp_element_namespaceObject.createElement)("ul", null, (0,external_wp_element_namespaceObject.createElement)("li", null, (0,external_wp_element_namespaceObject.createElement)("abbr", { 60397 "aria-label": (0,external_wp_i18n_namespaceObject._x)('Enter', 'keyboard button') 60398 }, "\u21B5"), ' ' 60399 /* JSX removes whitespace, but a space is required for screen readers. */ 60400 , (0,external_wp_element_namespaceObject.createElement)("span", null, (0,external_wp_i18n_namespaceObject.__)('Select the date in focus.'))), (0,external_wp_element_namespaceObject.createElement)("li", null, (0,external_wp_element_namespaceObject.createElement)("abbr", { 60401 "aria-label": (0,external_wp_i18n_namespaceObject.__)('Left and Right Arrows') 60402 }, "\u2190/\u2192"), ' ' 60403 /* JSX removes whitespace, but a space is required for screen readers. */ 60404 , (0,external_wp_i18n_namespaceObject.__)('Move backward (left) or forward (right) by one day.')), (0,external_wp_element_namespaceObject.createElement)("li", null, (0,external_wp_element_namespaceObject.createElement)("abbr", { 60405 "aria-label": (0,external_wp_i18n_namespaceObject.__)('Up and Down Arrows') 60406 }, "\u2191/\u2193"), ' ' 60407 /* JSX removes whitespace, but a space is required for screen readers. */ 60408 , (0,external_wp_i18n_namespaceObject.__)('Move backward (up) or forward (down) by one week.')), (0,external_wp_element_namespaceObject.createElement)("li", null, (0,external_wp_element_namespaceObject.createElement)("abbr", { 60409 "aria-label": (0,external_wp_i18n_namespaceObject.__)('Page Up and Page Down') 60410 }, (0,external_wp_i18n_namespaceObject.__)('PgUp/PgDn')), ' ' 60411 /* JSX removes whitespace, but a space is required for screen readers. */ 60412 , (0,external_wp_i18n_namespaceObject.__)('Move backward (PgUp) or forward (PgDn) by one month.')), (0,external_wp_element_namespaceObject.createElement)("li", null, (0,external_wp_element_namespaceObject.createElement)("abbr", { 60413 "aria-label": (0,external_wp_i18n_namespaceObject.__)('Home and End') 60414 }, (0,external_wp_i18n_namespaceObject.__)('Home/End')), ' ' 60415 /* JSX removes whitespace, but a space is required for screen readers. */ 60416 , (0,external_wp_i18n_namespaceObject.__)('Go to the first (Home) or last (End) day of a week.'))))), (0,external_wp_element_namespaceObject.createElement)("div", { 60417 className: "components-datetime__buttons" 60418 }, !calendarHelpIsVisible && currentDate && (0,external_wp_element_namespaceObject.createElement)(build_module_button, { 60419 className: "components-datetime__date-reset-button", 60420 variant: "link", 60421 onClick: () => onChange(null) 60422 }, (0,external_wp_i18n_namespaceObject.__)('Reset')), (0,external_wp_element_namespaceObject.createElement)(build_module_button, { 60423 className: "components-datetime__date-help-toggle", 60424 variant: "link", 60425 onClick: onClickDescriptionToggle 60426 }, calendarHelpIsVisible ? (0,external_wp_i18n_namespaceObject.__)('Close') : (0,external_wp_i18n_namespaceObject.__)('Calendar Help')))); 60427 } 60428 60429 /* harmony default export */ var date_time = ((0,external_wp_element_namespaceObject.forwardRef)(DateTimePicker)); 60430 60431 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/dimension-control/sizes.js 60432 /** 60433 * Sizes 60434 * 60435 * defines the sizes used in dimension controls 60436 * all hardcoded `size` values are based on the value of 60437 * the Sass variable `$block-padding` from 60438 * `packages/block-editor/src/components/dimension-control/sizes.js`. 60439 */ 60440 60441 /** 60442 * WordPress dependencies 60443 */ 60444 60445 /** 60446 * Finds the correct size object from the provided sizes 60447 * table by size slug (eg: `medium`) 60448 * 60449 * @param {Array} sizes containing objects for each size definition. 60450 * @param {string} slug a string representation of the size (eg: `medium`). 60451 * 60452 * @return {Object} the matching size definition. 60453 */ 60454 60455 const findSizeBySlug = (sizes, slug) => sizes.find(size => slug === size.slug); 60456 /* harmony default export */ var dimension_control_sizes = ([{ 60457 name: (0,external_wp_i18n_namespaceObject._x)('None', 'Size of a UI element'), 60458 slug: 'none' 60459 }, { 60460 name: (0,external_wp_i18n_namespaceObject._x)('Small', 'Size of a UI element'), 60461 slug: 'small' 60462 }, { 60463 name: (0,external_wp_i18n_namespaceObject._x)('Medium', 'Size of a UI element'), 60464 slug: 'medium' 60465 }, { 60466 name: (0,external_wp_i18n_namespaceObject._x)('Large', 'Size of a UI element'), 60467 slug: 'large' 60468 }, { 60469 name: (0,external_wp_i18n_namespaceObject._x)('Extra Large', 'Size of a UI element'), 60470 slug: 'xlarge' 60471 }]); 60472 60473 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/dimension-control/index.js 60474 60475 60476 /** 60477 * External dependencies 60478 */ 60479 60480 60481 /** 60482 * WordPress dependencies 60483 */ 60484 60485 /** 60486 * Internal dependencies 60487 */ 60488 60489 60490 60491 60492 /** 60493 * Internal dependencies 60494 */ 60495 60496 60497 function DimensionControl(props) { 60498 const { 60499 label, 60500 value, 60501 sizes = dimension_control_sizes, 60502 icon, 60503 onChange, 60504 className = '' 60505 } = props; 60506 60507 const onChangeSpacingSize = val => { 60508 const theSize = findSizeBySlug(sizes, val); 60509 60510 if (!theSize || value === theSize.slug) { 60511 onChange(undefined); 60512 } else if ((0,external_lodash_namespaceObject.isFunction)(onChange)) { 60513 onChange(theSize.slug); 60514 } 60515 }; 60516 60517 const formatSizesAsOptions = theSizes => { 60518 const options = theSizes.map(_ref => { 60519 let { 60520 name, 60521 slug 60522 } = _ref; 60523 return { 60524 label: name, 60525 value: slug 60526 }; 60527 }); 60528 return [{ 60529 label: (0,external_wp_i18n_namespaceObject.__)('Default'), 60530 value: '' 60531 }].concat(options); 60532 }; 60533 60534 const selectLabel = (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, icon && (0,external_wp_element_namespaceObject.createElement)(build_module_icon, { 60535 icon: icon 60536 }), label); 60537 return (0,external_wp_element_namespaceObject.createElement)(select_control, { 60538 className: classnames_default()(className, 'block-editor-dimension-control'), 60539 label: selectLabel, 60540 hideLabelFromVision: false, 60541 value: value, 60542 onChange: onChangeSpacingSize, 60543 options: formatSizesAsOptions(sizes) 60544 }); 60545 } 60546 /* harmony default export */ var dimension_control = (DimensionControl); 60547 60548 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/disabled/styles/disabled-styles.js 60549 60550 60551 function disabled_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } 60552 60553 /** 60554 * External dependencies 60555 */ 60556 const StyledWrapper = emotion_styled_base_browser_esm("div", true ? { 60557 target: "e1ac3xxk0" 60558 } : 0)( true ? { 60559 name: "u2jump", 60560 styles: "position:relative;pointer-events:none;&::after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;}*{pointer-events:none;}" 60561 } : 0); 60562 60563 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/disabled/index.js 60564 60565 60566 60567 /** 60568 * External dependencies 60569 */ 60570 60571 60572 /** 60573 * WordPress dependencies 60574 */ 60575 60576 60577 60578 /** 60579 * Internal dependencies 60580 */ 60581 60582 60583 const Context = (0,external_wp_element_namespaceObject.createContext)(false); 60584 const { 60585 Consumer, 60586 Provider: disabled_Provider 60587 } = Context; 60588 /** 60589 * Names of control nodes which qualify for disabled behavior. 60590 * 60591 * See WHATWG HTML Standard: 4.10.18.5: "Enabling and disabling form controls: the disabled attribute". 60592 * 60593 * @see https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#enabling-and-disabling-form-controls:-the-disabled-attribute 60594 * 60595 * @type {string[]} 60596 */ 60597 60598 const DISABLED_ELIGIBLE_NODE_NAMES = ['BUTTON', 'FIELDSET', 'INPUT', 'OPTGROUP', 'OPTION', 'SELECT', 'TEXTAREA']; 60599 /** 60600 * @typedef OwnProps 60601 * @property {string} [className] Classname for the disabled element. 60602 * @property {import('react').ReactNode} children Children to disable. 60603 * @property {boolean} [isDisabled=true] Whether to disable the children. 60604 */ 60605 60606 /** 60607 * @param {OwnProps & import('react').HTMLAttributes<HTMLDivElement>} props 60608 * @return {JSX.Element} Element wrapping the children to disable them when isDisabled is true. 60609 */ 60610 60611 function Disabled(_ref) { 60612 let { 60613 className, 60614 children, 60615 isDisabled = true, 60616 ...props 60617 } = _ref; 60618 60619 /** @type {import('react').RefObject<HTMLDivElement>} */ 60620 const node = (0,external_wp_element_namespaceObject.useRef)(null); 60621 60622 const disable = () => { 60623 if (!node.current) { 60624 return; 60625 } 60626 60627 external_wp_dom_namespaceObject.focus.focusable.find(node.current).forEach(focusable => { 60628 if ((0,external_lodash_namespaceObject.includes)(DISABLED_ELIGIBLE_NODE_NAMES, focusable.nodeName)) { 60629 focusable.setAttribute('disabled', ''); 60630 } 60631 60632 if (focusable.nodeName === 'A') { 60633 focusable.setAttribute('tabindex', '-1'); 60634 } 60635 60636 const tabIndex = focusable.getAttribute('tabindex'); 60637 60638 if (tabIndex !== null && tabIndex !== '-1') { 60639 focusable.removeAttribute('tabindex'); 60640 } 60641 60642 if (focusable.hasAttribute('contenteditable')) { 60643 focusable.setAttribute('contenteditable', 'false'); 60644 } 60645 }); 60646 }; // Debounce re-disable since disabling process itself will incur 60647 // additional mutations which should be ignored. 60648 60649 60650 const debouncedDisable = (0,external_wp_element_namespaceObject.useCallback)((0,external_lodash_namespaceObject.debounce)(disable, undefined, { 60651 leading: true 60652 }), []); 60653 (0,external_wp_element_namespaceObject.useLayoutEffect)(() => { 60654 if (!isDisabled) { 60655 return; 60656 } 60657 60658 disable(); 60659 /** @type {MutationObserver | undefined} */ 60660 60661 let observer; 60662 60663 if (node.current) { 60664 observer = new window.MutationObserver(debouncedDisable); 60665 observer.observe(node.current, { 60666 childList: true, 60667 attributes: true, 60668 subtree: true 60669 }); 60670 } 60671 60672 return () => { 60673 if (observer) { 60674 observer.disconnect(); 60675 } 60676 60677 debouncedDisable.cancel(); 60678 }; 60679 }, []); 60680 60681 if (!isDisabled) { 60682 return (0,external_wp_element_namespaceObject.createElement)(disabled_Provider, { 60683 value: false 60684 }, children); 60685 } 60686 60687 return (0,external_wp_element_namespaceObject.createElement)(disabled_Provider, { 60688 value: true 60689 }, (0,external_wp_element_namespaceObject.createElement)(StyledWrapper, extends_extends({ 60690 ref: node, 60691 className: classnames_default()(className, 'components-disabled') 60692 }, props), children)); 60693 } 60694 60695 Disabled.Context = Context; 60696 Disabled.Consumer = Consumer; 60697 /* harmony default export */ var disabled = (Disabled); 60698 60699 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/draggable/index.js 60700 60701 60702 /** 60703 * WordPress dependencies 60704 */ 60705 60706 /** 60707 * External dependencies 60708 */ 60709 60710 60711 const dragImageClass = 'components-draggable__invisible-drag-image'; 60712 const cloneWrapperClass = 'components-draggable__clone'; 60713 const clonePadding = 0; 60714 const bodyClass = 'is-dragging-components-draggable'; 60715 /** 60716 * @typedef RenderProp 60717 * @property {(event: import('react').DragEvent) => void} onDraggableStart `onDragStart` handler. 60718 * @property {(event: import('react').DragEvent) => void} onDraggableEnd `onDragEnd` handler. 60719 */ 60720 60721 /** 60722 * @typedef Props 60723 * @property {(props: RenderProp) => JSX.Element | null} children Children. 60724 * @property {(event: import('react').DragEvent) => void} [onDragStart] Callback when dragging starts. 60725 * @property {(event: import('react').DragEvent) => void} [onDragOver] Callback when dragging happens over the document. 60726 * @property {(event: import('react').DragEvent) => void} [onDragEnd] Callback when dragging ends. 60727 * @property {string} [cloneClassname] Classname for the cloned element. 60728 * @property {string} [elementId] ID for the element. 60729 * @property {any} [transferData] Transfer data for the drag event. 60730 * @property {string} [__experimentalTransferDataType] The transfer data type to set. 60731 * @property {import('react').ReactNode} __experimentalDragComponent Component to show when dragging. 60732 */ 60733 60734 /** 60735 * @param {Props} props 60736 * @return {JSX.Element} A draggable component. 60737 */ 60738 60739 function Draggable(_ref) { 60740 let { 60741 children, 60742 onDragStart, 60743 onDragOver, 60744 onDragEnd, 60745 cloneClassname, 60746 elementId, 60747 transferData, 60748 __experimentalTransferDataType: transferDataType = 'text', 60749 __experimentalDragComponent: dragComponent 60750 } = _ref; 60751 60752 /** @type {import('react').MutableRefObject<HTMLDivElement | null>} */ 60753 const dragComponentRef = (0,external_wp_element_namespaceObject.useRef)(null); 60754 const cleanup = (0,external_wp_element_namespaceObject.useRef)(() => {}); 60755 /** 60756 * Removes the element clone, resets cursor, and removes drag listener. 60757 * 60758 * @param {import('react').DragEvent} event The non-custom DragEvent. 60759 */ 60760 60761 function end(event) { 60762 event.preventDefault(); 60763 cleanup.current(); 60764 60765 if (onDragEnd) { 60766 onDragEnd(event); 60767 } 60768 } 60769 /** 60770 * This method does a couple of things: 60771 * 60772 * - Clones the current element and spawns clone over original element. 60773 * - Adds a fake temporary drag image to avoid browser defaults. 60774 * - Sets transfer data. 60775 * - Adds dragover listener. 60776 * 60777 * @param {import('react').DragEvent} event The non-custom DragEvent. 60778 */ 60779 60780 60781 function start(event) { 60782 // @ts-ignore We know that ownerDocument does exist on an Element 60783 const { 60784 ownerDocument 60785 } = event.target; 60786 event.dataTransfer.setData(transferDataType, JSON.stringify(transferData)); 60787 const cloneWrapper = ownerDocument.createElement('div'); // Reset position to 0,0. Natural stacking order will position this lower, even with a transform otherwise. 60788 60789 cloneWrapper.style.top = 0; 60790 cloneWrapper.style.left = 0; 60791 const dragImage = ownerDocument.createElement('div'); // Set a fake drag image to avoid browser defaults. Remove from DOM 60792 // right after. event.dataTransfer.setDragImage is not supported yet in 60793 // IE, we need to check for its existence first. 60794 60795 if ('function' === typeof event.dataTransfer.setDragImage) { 60796 dragImage.classList.add(dragImageClass); 60797 ownerDocument.body.appendChild(dragImage); 60798 event.dataTransfer.setDragImage(dragImage, 0, 0); 60799 } 60800 60801 cloneWrapper.classList.add(cloneWrapperClass); 60802 60803 if (cloneClassname) { 60804 cloneWrapper.classList.add(cloneClassname); 60805 } 60806 60807 let x = 0; 60808 let y = 0; // If a dragComponent is defined, the following logic will clone the 60809 // HTML node and inject it into the cloneWrapper. 60810 60811 if (dragComponentRef.current) { 60812 // Position dragComponent at the same position as the cursor. 60813 x = event.clientX; 60814 y = event.clientY; 60815 cloneWrapper.style.transform = `translate( $x}px, $y}px )`; 60816 const clonedDragComponent = ownerDocument.createElement('div'); 60817 clonedDragComponent.innerHTML = dragComponentRef.current.innerHTML; 60818 cloneWrapper.appendChild(clonedDragComponent); // Inject the cloneWrapper into the DOM. 60819 60820 ownerDocument.body.appendChild(cloneWrapper); 60821 } else { 60822 const element = ownerDocument.getElementById(elementId); // Prepare element clone and append to element wrapper. 60823 60824 const elementRect = element.getBoundingClientRect(); 60825 const elementWrapper = element.parentNode; 60826 const elementTopOffset = parseInt(elementRect.top, 10); 60827 const elementLeftOffset = parseInt(elementRect.left, 10); 60828 cloneWrapper.style.width = `$elementRect.width + clonePadding * 2}px`; 60829 const clone = element.cloneNode(true); 60830 clone.id = `clone-$elementId}`; // Position clone right over the original element (20px padding). 60831 60832 x = elementLeftOffset - clonePadding; 60833 y = elementTopOffset - clonePadding; 60834 cloneWrapper.style.transform = `translate( $x}px, $y}px )`; // Hack: Remove iFrames as it's causing the embeds drag clone to freeze. 60835 60836 Array.from(clone.querySelectorAll('iframe')).forEach(child => child.parentNode.removeChild(child)); 60837 cloneWrapper.appendChild(clone); // Inject the cloneWrapper into the DOM. 60838 60839 elementWrapper.appendChild(cloneWrapper); 60840 } // Mark the current cursor coordinates. 60841 60842 60843 let cursorLeft = event.clientX; 60844 let cursorTop = event.clientY; 60845 /** 60846 * @param {import('react').DragEvent<Element>} e 60847 */ 60848 60849 function over(e) { 60850 // Skip doing any work if mouse has not moved. 60851 if (cursorLeft === e.clientX && cursorTop === e.clientY) { 60852 return; 60853 } 60854 60855 const nextX = x + e.clientX - cursorLeft; 60856 const nextY = y + e.clientY - cursorTop; 60857 cloneWrapper.style.transform = `translate( $nextX}px, $nextY}px )`; 60858 cursorLeft = e.clientX; 60859 cursorTop = e.clientY; 60860 x = nextX; 60861 y = nextY; 60862 60863 if (onDragOver) { 60864 onDragOver(e); 60865 } 60866 } // Aim for 60fps (16 ms per frame) for now. We can potentially use requestAnimationFrame (raf) instead, 60867 // note that browsers may throttle raf below 60fps in certain conditions. 60868 60869 60870 const throttledDragOver = (0,external_lodash_namespaceObject.throttle)(over, 16); 60871 ownerDocument.addEventListener('dragover', throttledDragOver); // Update cursor to 'grabbing', document wide. 60872 60873 ownerDocument.body.classList.add(bodyClass); // Allow the Synthetic Event to be accessed from asynchronous code. 60874 // https://reactjs.org/docs/events.html#event-pooling 60875 60876 event.persist(); 60877 /** @type {number | undefined} */ 60878 60879 let timerId; 60880 60881 if (onDragStart) { 60882 timerId = setTimeout(() => onDragStart(event)); 60883 } 60884 60885 cleanup.current = () => { 60886 // Remove drag clone. 60887 if (cloneWrapper && cloneWrapper.parentNode) { 60888 cloneWrapper.parentNode.removeChild(cloneWrapper); 60889 } 60890 60891 if (dragImage && dragImage.parentNode) { 60892 dragImage.parentNode.removeChild(dragImage); 60893 } // Reset cursor. 60894 60895 60896 ownerDocument.body.classList.remove(bodyClass); 60897 ownerDocument.removeEventListener('dragover', throttledDragOver); 60898 clearTimeout(timerId); 60899 }; 60900 } 60901 60902 (0,external_wp_element_namespaceObject.useEffect)(() => () => { 60903 cleanup.current(); 60904 }, []); 60905 return (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, children({ 60906 onDraggableStart: start, 60907 onDraggableEnd: end 60908 }), dragComponent && (0,external_wp_element_namespaceObject.createElement)("div", { 60909 className: "components-draggable-drag-component-root", 60910 style: { 60911 display: 'none' 60912 }, 60913 ref: dragComponentRef 60914 }, dragComponent)); 60915 } 60916 60917 ;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/upload.js 60918 60919 60920 /** 60921 * WordPress dependencies 60922 */ 60923 60924 const upload = (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.SVG, { 60925 xmlns: "http://www.w3.org/2000/svg", 60926 viewBox: "0 0 24 24" 60927 }, (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.Path, { 60928 d: "M18.5 15v3.5H13V6.7l4.5 4.1 1-1.1-6.2-5.8-5.8 5.8 1 1.1 4-4v11.7h-6V15H4v5h16v-5z" 60929 })); 60930 /* harmony default export */ var library_upload = (upload); 60931 60932 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/use-is-mounted.mjs 60933 60934 60935 60936 function useIsMounted() { 60937 var isMounted = (0,external_React_.useRef)(false); 60938 useIsomorphicLayoutEffect(function () { 60939 isMounted.current = true; 60940 return function () { 60941 isMounted.current = false; 60942 }; 60943 }, []); 60944 return isMounted; 60945 } 60946 60947 60948 60949 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/utils/use-force-update.mjs 60950 60951 60952 60953 60954 60955 function use_force_update_useForceUpdate() { 60956 var isMounted = useIsMounted(); 60957 var _a = tslib_es6_read((0,external_React_.useState)(0), 2), forcedRenderCount = _a[0], setForcedRenderCount = _a[1]; 60958 var forceRender = (0,external_React_.useCallback)(function () { 60959 isMounted.current && setForcedRenderCount(forcedRenderCount + 1); 60960 }, [forcedRenderCount]); 60961 /** 60962 * Defer this to the end of the next animation frame in case there are multiple 60963 * synchronous calls. 60964 */ 60965 var deferredForceRender = (0,external_React_.useCallback)(function () { return es.postRender(forceRender); }, [forceRender]); 60966 return [deferredForceRender, forcedRenderCount]; 60967 } 60968 60969 60970 60971 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/components/AnimatePresence/PresenceChild.mjs 60972 60973 60974 60975 60976 60977 60978 60979 var PresenceChild = function (_a) { 60980 var children = _a.children, initial = _a.initial, isPresent = _a.isPresent, onExitComplete = _a.onExitComplete, custom = _a.custom, presenceAffectsLayout = _a.presenceAffectsLayout; 60981 var presenceChildren = useConstant(newChildrenMap); 60982 var id = useId(); 60983 var context = (0,external_React_.useMemo)(function () { return ({ 60984 id: id, 60985 initial: initial, 60986 isPresent: isPresent, 60987 custom: custom, 60988 onExitComplete: function (childId) { 60989 var e_1, _a; 60990 presenceChildren.set(childId, true); 60991 try { 60992 for (var _b = __values(presenceChildren.values()), _c = _b.next(); !_c.done; _c = _b.next()) { 60993 var isComplete = _c.value; 60994 if (!isComplete) 60995 return; // can stop searching when any is incomplete 60996 } 60997 } 60998 catch (e_1_1) { e_1 = { error: e_1_1 }; } 60999 finally { 61000 try { 61001 if (_c && !_c.done && (_a = _b.return)) _a.call(_b); 61002 } 61003 finally { if (e_1) throw e_1.error; } 61004 } 61005 onExitComplete === null || onExitComplete === void 0 ? void 0 : onExitComplete(); 61006 }, 61007 register: function (childId) { 61008 presenceChildren.set(childId, false); 61009 return function () { return presenceChildren.delete(childId); }; 61010 }, 61011 }); }, 61012 /** 61013 * If the presence of a child affects the layout of the components around it, 61014 * we want to make a new context value to ensure they get re-rendered 61015 * so they can detect that layout change. 61016 */ 61017 presenceAffectsLayout ? undefined : [isPresent]); 61018 (0,external_React_.useMemo)(function () { 61019 presenceChildren.forEach(function (_, key) { return presenceChildren.set(key, false); }); 61020 }, [isPresent]); 61021 /** 61022 * If there's no `motion` components to fire exit animations, we want to remove this 61023 * component immediately. 61024 */ 61025 external_React_.useEffect(function () { 61026 !isPresent && !presenceChildren.size && (onExitComplete === null || onExitComplete === void 0 ? void 0 : onExitComplete()); 61027 }, [isPresent]); 61028 return (external_React_.createElement(PresenceContext_PresenceContext.Provider, { value: context }, children)); 61029 }; 61030 function newChildrenMap() { 61031 return new Map(); 61032 } 61033 61034 61035 61036 ;// CONCATENATED MODULE: ./node_modules/framer-motion/dist/es/components/AnimatePresence/index.mjs 61037 61038 61039 61040 61041 61042 61043 61044 61045 61046 61047 61048 var getChildKey = function (child) { return child.key || ""; }; 61049 var isDev = "production" !== "production"; 61050 function updateChildLookup(children, allChildren) { 61051 var seenChildren = isDev ? new Set() : null; 61052 children.forEach(function (child) { 61053 var key = getChildKey(child); 61054 if (isDev && seenChildren && seenChildren.has(key)) { 61055 console.warn("Children of AnimatePresence require unique keys. \"".concat(key, "\" is a duplicate.")); 61056 seenChildren.add(key); 61057 } 61058 allChildren.set(key, child); 61059 }); 61060 } 61061 function onlyElements(children) { 61062 var filtered = []; 61063 // We use forEach here instead of map as map mutates the component key by preprending `.$` 61064 external_React_.Children.forEach(children, function (child) { 61065 if ((0,external_React_.isValidElement)(child)) 61066 filtered.push(child); 61067 }); 61068 return filtered; 61069 } 61070 /** 61071 * `AnimatePresence` enables the animation of components that have been removed from the tree. 61072 * 61073 * When adding/removing more than a single child, every child **must** be given a unique `key` prop. 61074 * 61075 * Any `motion` components that have an `exit` property defined will animate out when removed from 61076 * the tree. 61077 * 61078 * ```jsx 61079 * import { motion, AnimatePresence } from 'framer-motion' 61080 * 61081 * export const Items = ({ items }) => ( 61082 * <AnimatePresence> 61083 * {items.map(item => ( 61084 * <motion.div 61085 * key={item.id} 61086 * initial={{ opacity: 0 }} 61087 * animate={{ opacity: 1 }} 61088 * exit={{ opacity: 0 }} 61089 * /> 61090 * ))} 61091 * </AnimatePresence> 61092 * ) 61093 * ``` 61094 * 61095 * You can sequence exit animations throughout a tree using variants. 61096 * 61097 * If a child contains multiple `motion` components with `exit` props, it will only unmount the child 61098 * once all `motion` components have finished animating out. Likewise, any components using 61099 * `usePresence` all need to call `safeToRemove`. 61100 * 61101 * @public 61102 */ 61103 var AnimatePresence = function (_a) { 61104 var children = _a.children, custom = _a.custom, _b = _a.initial, initial = _b === void 0 ? true : _b, onExitComplete = _a.onExitComplete, exitBeforeEnter = _a.exitBeforeEnter, _c = _a.presenceAffectsLayout, presenceAffectsLayout = _c === void 0 ? true : _c; 61105 // We want to force a re-render once all exiting animations have finished. We 61106 // either use a local forceRender function, or one from a parent context if it exists. 61107 var _d = tslib_es6_read(use_force_update_useForceUpdate(), 1), forceRender = _d[0]; 61108 var forceRenderLayoutGroup = (0,external_React_.useContext)(LayoutGroupContext).forceRender; 61109 if (forceRenderLayoutGroup) 61110 forceRender = forceRenderLayoutGroup; 61111 var isMounted = useIsMounted(); 61112 // Filter out any children that aren't ReactElements. We can only track ReactElements with a props.key 61113 var filteredChildren = onlyElements(children); 61114 var childrenToRender = filteredChildren; 61115 var exiting = new Set(); 61116 // Keep a living record of the children we're actually rendering so we 61117 // can diff to figure out which are entering and exiting 61118 var presentChildren = (0,external_React_.useRef)(childrenToRender); 61119 // A lookup table to quickly reference components by key 61120 var allChildren = (0,external_React_.useRef)(new Map()).current; 61121 // If this is the initial component render, just deal with logic surrounding whether 61122 // we play onMount animations or not. 61123 var isInitialRender = (0,external_React_.useRef)(true); 61124 useIsomorphicLayoutEffect(function () { 61125 isInitialRender.current = false; 61126 updateChildLookup(filteredChildren, allChildren); 61127 presentChildren.current = childrenToRender; 61128 }); 61129 useUnmountEffect(function () { 61130 isInitialRender.current = true; 61131 allChildren.clear(); 61132 exiting.clear(); 61133 }); 61134 if (isInitialRender.current) { 61135 return (external_React_.createElement(external_React_.Fragment, null, childrenToRender.map(function (child) { return (external_React_.createElement(PresenceChild, { key: getChildKey(child), isPresent: true, initial: initial ? undefined : false, presenceAffectsLayout: presenceAffectsLayout }, child)); }))); 61136 } 61137 // If this is a subsequent render, deal with entering and exiting children 61138 childrenToRender = tslib_es6_spreadArray([], tslib_es6_read(childrenToRender), false); 61139 // Diff the keys of the currently-present and target children to update our 61140 // exiting list. 61141 var presentKeys = presentChildren.current.map(getChildKey); 61142 var targetKeys = filteredChildren.map(getChildKey); 61143 // Diff the present children with our target children and mark those that are exiting 61144 var numPresent = presentKeys.length; 61145 for (var i = 0; i < numPresent; i++) { 61146 var key = presentKeys[i]; 61147 if (targetKeys.indexOf(key) === -1) { 61148 exiting.add(key); 61149 } 61150 } 61151 // If we currently have exiting children, and we're deferring rendering incoming children 61152 // until after all current children have exiting, empty the childrenToRender array 61153 if (exitBeforeEnter && exiting.size) { 61154 childrenToRender = []; 61155 } 61156 // Loop through all currently exiting components and clone them to overwrite `animate` 61157 // with any `exit` prop they might have defined. 61158 exiting.forEach(function (key) { 61159 // If this component is actually entering again, early return 61160 if (targetKeys.indexOf(key) !== -1) 61161 return; 61162 var child = allChildren.get(key); 61163 if (!child) 61164 return; 61165 var insertionIndex = presentKeys.indexOf(key); 61166 var onExit = function () { 61167 allChildren.delete(key); 61168 exiting.delete(key); 61169 // Remove this child from the present children 61170 var removeIndex = presentChildren.current.findIndex(function (presentChild) { return presentChild.key === key; }); 61171 presentChildren.current.splice(removeIndex, 1); 61172 // Defer re-rendering until all exiting children have indeed left 61173 if (!exiting.size) { 61174 presentChildren.current = filteredChildren; 61175 if (isMounted.current === false) 61176 return; 61177 forceRender(); 61178 onExitComplete && onExitComplete(); 61179 } 61180 }; 61181 childrenToRender.splice(insertionIndex, 0, external_React_.createElement(PresenceChild, { key: getChildKey(child), isPresent: false, onExitComplete: onExit, custom: custom, presenceAffectsLayout: presenceAffectsLayout }, child)); 61182 }); 61183 // Add `MotionContext` even to children that don't need it to ensure we're rendering 61184 // the same tree between renders 61185 childrenToRender = childrenToRender.map(function (child) { 61186 var key = child.key; 61187 return exiting.has(key) ? (child) : (external_React_.createElement(PresenceChild, { key: getChildKey(child), isPresent: true, presenceAffectsLayout: presenceAffectsLayout }, child)); 61188 }); 61189 if (false) {} 61190 return (external_React_.createElement(external_React_.Fragment, null, exiting.size 61191 ? childrenToRender 61192 : childrenToRender.map(function (child) { return (0,external_React_.cloneElement)(child); }))); 61193 }; 61194 61195 61196 61197 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/drop-zone/index.js 61198 61199 61200 /** 61201 * External dependencies 61202 */ 61203 61204 61205 /** 61206 * WordPress dependencies 61207 */ 61208 61209 61210 61211 61212 61213 61214 /** 61215 * Internal dependencies 61216 */ 61217 61218 61219 function DropZoneComponent(_ref) { 61220 let { 61221 className, 61222 label, 61223 onFilesDrop, 61224 onHTMLDrop, 61225 onDrop 61226 } = _ref; 61227 const [isDraggingOverDocument, setIsDraggingOverDocument] = (0,external_wp_element_namespaceObject.useState)(); 61228 const [isDraggingOverElement, setIsDraggingOverElement] = (0,external_wp_element_namespaceObject.useState)(); 61229 const [type, setType] = (0,external_wp_element_namespaceObject.useState)(); 61230 const ref = (0,external_wp_compose_namespaceObject.__experimentalUseDropZone)({ 61231 onDrop(event) { 61232 const files = (0,external_wp_dom_namespaceObject.getFilesFromDataTransfer)(event.dataTransfer); 61233 const html = event.dataTransfer.getData('text/html'); 61234 /** 61235 * From Windows Chrome 96, the `event.dataTransfer` returns both file object and HTML. 61236 * The order of the checks is important to recognise the HTML drop. 61237 */ 61238 61239 if (html && onHTMLDrop) { 61240 onHTMLDrop(html); 61241 } else if (files.length && onFilesDrop) { 61242 onFilesDrop(files); 61243 } else if (onDrop) { 61244 onDrop(event); 61245 } 61246 }, 61247 61248 onDragStart(event) { 61249 setIsDraggingOverDocument(true); 61250 let _type = 'default'; 61251 /** 61252 * From Windows Chrome 96, the `event.dataTransfer` returns both file object and HTML. 61253 * The order of the checks is important to recognise the HTML drop. 61254 */ 61255 61256 if ((0,external_lodash_namespaceObject.includes)(event.dataTransfer.types, 'text/html')) { 61257 _type = 'html'; 61258 } else if ( // Check for the types because sometimes the files themselves 61259 // are only available on drop. 61260 (0,external_lodash_namespaceObject.includes)(event.dataTransfer.types, 'Files') || (0,external_wp_dom_namespaceObject.getFilesFromDataTransfer)(event.dataTransfer).length > 0) { 61261 _type = 'file'; 61262 } 61263 61264 setType(_type); 61265 }, 61266 61267 onDragEnd() { 61268 setIsDraggingOverDocument(false); 61269 setType(); 61270 }, 61271 61272 onDragEnter() { 61273 setIsDraggingOverElement(true); 61274 }, 61275 61276 onDragLeave() { 61277 setIsDraggingOverElement(false); 61278 } 61279 61280 }); 61281 const disableMotion = (0,external_wp_compose_namespaceObject.useReducedMotion)(); 61282 let children; 61283 const backdrop = { 61284 hidden: { 61285 scaleY: 0, 61286 opacity: 0 61287 }, 61288 show: { 61289 scaleY: 1, 61290 opacity: 1, 61291 transition: { 61292 type: 'tween', 61293 duration: 0.2, 61294 delay: 0.1, 61295 delayChildren: 0.2 61296 } 61297 }, 61298 exit: { 61299 scaleY: 1, 61300 opacity: 0, 61301 transition: { 61302 duration: 0.3, 61303 delayChildren: 0 61304 } 61305 } 61306 }; 61307 const foreground = { 61308 hidden: { 61309 opacity: 0, 61310 scale: 0.75 61311 }, 61312 show: { 61313 opacity: 1, 61314 scale: 1 61315 }, 61316 exit: { 61317 opacity: 0, 61318 scale: 0.9 61319 } 61320 }; 61321 61322 if (isDraggingOverElement) { 61323 children = (0,external_wp_element_namespaceObject.createElement)(motion.div, { 61324 variants: backdrop, 61325 initial: disableMotion ? 'show' : 'hidden', 61326 animate: "show", 61327 exit: disableMotion ? 'show' : 'exit', 61328 className: "components-drop-zone__content" 61329 }, (0,external_wp_element_namespaceObject.createElement)(motion.div, { 61330 variants: foreground 61331 }, (0,external_wp_element_namespaceObject.createElement)(icons_build_module_icon, { 61332 icon: library_upload, 61333 className: "components-drop-zone__content-icon" 61334 }), (0,external_wp_element_namespaceObject.createElement)("span", { 61335 className: "components-drop-zone__content-text" 61336 }, label ? label : (0,external_wp_i18n_namespaceObject.__)('Drop files to upload')))); 61337 } 61338 61339 const classes = classnames_default()('components-drop-zone', className, { 61340 'is-active': (isDraggingOverDocument || isDraggingOverElement) && (type === 'file' && onFilesDrop || type === 'html' && onHTMLDrop || type === 'default' && onDrop), 61341 'is-dragging-over-document': isDraggingOverDocument, 61342 'is-dragging-over-element': isDraggingOverElement, 61343 [`is-dragging-$type}`]: !!type 61344 }); 61345 return (0,external_wp_element_namespaceObject.createElement)("div", { 61346 ref: ref, 61347 className: classes 61348 }, disableMotion ? children : (0,external_wp_element_namespaceObject.createElement)(AnimatePresence, null, children)); 61349 } 61350 61351 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/drop-zone/provider.js 61352 /** 61353 * WordPress dependencies 61354 */ 61355 61356 function DropZoneProvider(_ref) { 61357 let { 61358 children 61359 } = _ref; 61360 external_wp_deprecated_default()('wp.components.DropZoneProvider', { 61361 since: '5.8', 61362 hint: 'wp.component.DropZone no longer needs a provider. wp.components.DropZoneProvider is safe to remove from your code.' 61363 }); 61364 return children; 61365 } 61366 61367 ;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/swatch.js 61368 61369 61370 /** 61371 * WordPress dependencies 61372 */ 61373 61374 const swatch = (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.SVG, { 61375 xmlns: "http://www.w3.org/2000/svg", 61376 viewBox: "0 0 24 24" 61377 }, (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.Path, { 61378 d: "M5 17.7c.4.5.8.9 1.2 1.2l1.1-1.4c-.4-.3-.7-.6-1-1L5 17.7zM5 6.3l1.4 1.1c.3-.4.6-.7 1-1L6.3 5c-.5.4-.9.8-1.3 1.3zm.1 7.8l-1.7.5c.2.6.4 1.1.7 1.6l1.5-.8c-.2-.4-.4-.8-.5-1.3zM4.8 12v-.7L3 11.1v1.8l1.7-.2c.1-.2.1-.5.1-.7zm3 7.9c.5.3 1.1.5 1.6.7l.5-1.7c-.5-.1-.9-.3-1.3-.5l-.8 1.5zM19 6.3c-.4-.5-.8-.9-1.2-1.2l-1.1 1.4c.4.3.7.6 1 1L19 6.3zm-.1 3.6l1.7-.5c-.2-.6-.4-1.1-.7-1.6l-1.5.8c.2.4.4.8.5 1.3zM5.6 8.6l-1.5-.8c-.3.5-.5 1-.7 1.6l1.7.5c.1-.5.3-.9.5-1.3zm2.2-4.5l.8 1.5c.4-.2.8-.4 1.3-.5l-.5-1.7c-.6.2-1.1.4-1.6.7zm8.8 13.5l1.1 1.4c.5-.4.9-.8 1.2-1.2l-1.4-1.1c-.2.3-.5.6-.9.9zm1.8-2.2l1.5.8c.3-.5.5-1.1.7-1.6l-1.7-.5c-.1.5-.3.9-.5 1.3zm2.6-4.3l-1.7.2v1.4l1.7.2V12v-.9zM11.1 3l.2 1.7h1.4l.2-1.7h-1.8zm3 2.1c.5.1.9.3 1.3.5l.8-1.5c-.5-.3-1.1-.5-1.6-.7l-.5 1.7zM12 19.2h-.7l-.2 1.8h1.8l-.2-1.7c-.2-.1-.5-.1-.7-.1zm2.1-.3l.5 1.7c.6-.2 1.1-.4 1.6-.7l-.8-1.5c-.4.2-.8.4-1.3.5z" 61379 })); 61380 /* harmony default export */ var library_swatch = (swatch); 61381 61382 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/swatch/index.js 61383 61384 61385 /** 61386 * WordPress dependencies 61387 */ 61388 61389 /** 61390 * Internal dependencies 61391 */ 61392 61393 61394 61395 function Swatch(_ref) { 61396 let { 61397 fill 61398 } = _ref; 61399 return fill ? (0,external_wp_element_namespaceObject.createElement)("span", { 61400 className: "components-swatch", 61401 style: { 61402 background: fill 61403 } 61404 }) : (0,external_wp_element_namespaceObject.createElement)(build_module_icon, { 61405 icon: library_swatch 61406 }); 61407 } 61408 61409 /* harmony default export */ var build_module_swatch = (Swatch); 61410 61411 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/duotone-picker/utils.js 61412 /** 61413 * External dependencies 61414 */ 61415 61416 61417 k([names]); 61418 /** 61419 * Object representation for a color. 61420 * 61421 * @typedef {Object} RGBColor 61422 * @property {number} r Red component of the color in the range [0,1]. 61423 * @property {number} g Green component of the color in the range [0,1]. 61424 * @property {number} b Blue component of the color in the range [0,1]. 61425 */ 61426 61427 /** 61428 * Calculate the brightest and darkest values from a color palette. 61429 * 61430 * @param {Object[]} palette Color palette for the theme. 61431 * 61432 * @return {string[]} Tuple of the darkest color and brightest color. 61433 */ 61434 61435 function getDefaultColors(palette) { 61436 // A default dark and light color are required. 61437 if (!palette || palette.length < 2) return ['#000', '#fff']; 61438 return palette.map(_ref => { 61439 let { 61440 color 61441 } = _ref; 61442 return { 61443 color, 61444 brightness: w(color).brightness() 61445 }; 61446 }).reduce((_ref2, current) => { 61447 let [min, max] = _ref2; 61448 return [current.brightness <= min.brightness ? current : min, current.brightness >= max.brightness ? current : max]; 61449 }, [{ 61450 brightness: 1 61451 }, { 61452 brightness: 0 61453 }]).map(_ref3 => { 61454 let { 61455 color 61456 } = _ref3; 61457 return color; 61458 }); 61459 } 61460 /** 61461 * Generate a duotone gradient from a list of colors. 61462 * 61463 * @param {string[]} colors CSS color strings. 61464 * @param {string} angle CSS gradient angle. 61465 * 61466 * @return {string} CSS gradient string for the duotone swatch. 61467 */ 61468 61469 function getGradientFromCSSColors() { 61470 let colors = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : []; 61471 let angle = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '90deg'; 61472 const l = 100 / colors.length; 61473 const stops = colors.map((c, i) => `$c} $i * l}%, $c} ${(i + 1) * l}%`).join(', '); 61474 return `linear-gradient( $angle}, $stops} )`; 61475 } 61476 /** 61477 * Convert a color array to an array of color stops. 61478 * 61479 * @param {string[]} colors CSS colors array 61480 * 61481 * @return {Object[]} Color stop information. 61482 */ 61483 61484 function getColorStopsFromColors(colors) { 61485 return colors.map((color, i) => ({ 61486 position: i * 100 / (colors.length - 1), 61487 color 61488 })); 61489 } 61490 /** 61491 * Convert a color stop array to an array colors. 61492 * 61493 * @param {Object[]} colorStops Color stop information. 61494 * 61495 * @return {string[]} CSS colors array. 61496 */ 61497 61498 function getColorsFromColorStops() { 61499 let colorStops = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : []; 61500 return colorStops.map(_ref4 => { 61501 let { 61502 color 61503 } = _ref4; 61504 return color; 61505 }); 61506 } 61507 61508 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/duotone-picker/duotone-swatch.js 61509 61510 61511 /** 61512 * Internal dependencies 61513 */ 61514 61515 61516 61517 function DuotoneSwatch(_ref) { 61518 let { 61519 values 61520 } = _ref; 61521 return (0,external_wp_element_namespaceObject.createElement)(build_module_swatch, { 61522 fill: values && getGradientFromCSSColors(values, '135deg') 61523 }); 61524 } 61525 61526 /* harmony default export */ var duotone_swatch = (DuotoneSwatch); 61527 61528 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/color-list-picker/index.js 61529 61530 61531 /** 61532 * WordPress dependencies 61533 */ 61534 61535 /** 61536 * Internal dependencies 61537 */ 61538 61539 61540 61541 61542 61543 function ColorOption(_ref) { 61544 let { 61545 label, 61546 value, 61547 colors, 61548 disableCustomColors, 61549 enableAlpha, 61550 onChange 61551 } = _ref; 61552 const [isOpen, setIsOpen] = (0,external_wp_element_namespaceObject.useState)(false); 61553 return (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, (0,external_wp_element_namespaceObject.createElement)(build_module_button, { 61554 className: "components-color-list-picker__swatch-button", 61555 icon: (0,external_wp_element_namespaceObject.createElement)(build_module_swatch, { 61556 fill: value 61557 }), 61558 onClick: () => setIsOpen(prev => !prev) 61559 }, label), isOpen && (0,external_wp_element_namespaceObject.createElement)(ColorPalette, { 61560 className: "components-color-list-picker__color-picker", 61561 colors: colors, 61562 value: value, 61563 clearable: false, 61564 onChange: onChange, 61565 disableCustomColors: disableCustomColors, 61566 enableAlpha: enableAlpha 61567 })); 61568 } 61569 61570 function ColorListPicker(_ref2) { 61571 let { 61572 colors, 61573 labels, 61574 value = [], 61575 disableCustomColors, 61576 enableAlpha, 61577 onChange 61578 } = _ref2; 61579 return (0,external_wp_element_namespaceObject.createElement)("div", { 61580 className: "components-color-list-picker" 61581 }, labels.map((label, index) => (0,external_wp_element_namespaceObject.createElement)(ColorOption, { 61582 key: index, 61583 label: label, 61584 value: value[index], 61585 colors: colors, 61586 disableCustomColors: disableCustomColors, 61587 enableAlpha: enableAlpha, 61588 onChange: newColor => { 61589 const newColors = value.slice(); 61590 newColors[index] = newColor; 61591 onChange(newColors); 61592 } 61593 }))); 61594 } 61595 61596 /* harmony default export */ var color_list_picker = (ColorListPicker); 61597 61598 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/duotone-picker/custom-duotone-bar.js 61599 61600 61601 /** 61602 * Internal dependencies 61603 */ 61604 61605 61606 const PLACEHOLDER_VALUES = ['#333', '#CCC']; 61607 function CustomDuotoneBar(_ref) { 61608 let { 61609 value, 61610 onChange 61611 } = _ref; 61612 const hasGradient = !!value; 61613 const values = hasGradient ? value : PLACEHOLDER_VALUES; 61614 const background = getGradientFromCSSColors(values); 61615 const controlPoints = getColorStopsFromColors(values); 61616 return (0,external_wp_element_namespaceObject.createElement)(CustomGradientBar, { 61617 disableInserter: true, 61618 background: background, 61619 hasGradient: hasGradient, 61620 value: controlPoints, 61621 onChange: newColorStops => { 61622 const newValue = getColorsFromColorStops(newColorStops); 61623 onChange(newValue); 61624 } 61625 }); 61626 } 61627 61628 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/duotone-picker/duotone-picker.js 61629 61630 61631 /** 61632 * External dependencies 61633 */ 61634 61635 /** 61636 * WordPress dependencies 61637 */ 61638 61639 61640 61641 /** 61642 * Internal dependencies 61643 */ 61644 61645 61646 61647 61648 61649 61650 function DuotonePicker(_ref) { 61651 let { 61652 clearable = true, 61653 colorPalette, 61654 duotonePalette, 61655 disableCustomColors, 61656 disableCustomDuotone, 61657 value, 61658 onChange 61659 } = _ref; 61660 const [defaultDark, defaultLight] = (0,external_wp_element_namespaceObject.useMemo)(() => getDefaultColors(colorPalette), [colorPalette]); 61661 return (0,external_wp_element_namespaceObject.createElement)(CircularOptionPicker, { 61662 options: duotonePalette.map(_ref2 => { 61663 let { 61664 colors, 61665 slug, 61666 name 61667 } = _ref2; 61668 const style = { 61669 background: getGradientFromCSSColors(colors, '135deg'), 61670 color: 'transparent' 61671 }; 61672 const tooltipText = name !== null && name !== void 0 ? name : (0,external_wp_i18n_namespaceObject.sprintf)( // translators: %s: duotone code e.g: "dark-grayscale" or "7f7f7f-ffffff". 61673 (0,external_wp_i18n_namespaceObject.__)('Duotone code: %s'), slug); 61674 const label = name ? (0,external_wp_i18n_namespaceObject.sprintf)( // translators: %s: The name of the option e.g: "Dark grayscale". 61675 (0,external_wp_i18n_namespaceObject.__)('Duotone: %s'), name) : tooltipText; 61676 const isSelected = (0,external_lodash_namespaceObject.isEqual)(colors, value); 61677 return (0,external_wp_element_namespaceObject.createElement)(CircularOptionPicker.Option, { 61678 key: slug, 61679 value: colors, 61680 isSelected: isSelected, 61681 "aria-label": label, 61682 tooltipText: tooltipText, 61683 style: style, 61684 onClick: () => { 61685 onChange(isSelected ? undefined : colors); 61686 } 61687 }); 61688 }), 61689 actions: !!clearable && (0,external_wp_element_namespaceObject.createElement)(CircularOptionPicker.ButtonAction, { 61690 onClick: () => onChange(undefined) 61691 }, (0,external_wp_i18n_namespaceObject.__)('Clear')) 61692 }, !disableCustomColors && !disableCustomDuotone && (0,external_wp_element_namespaceObject.createElement)(CustomDuotoneBar, { 61693 value: value, 61694 onChange: onChange 61695 }), !disableCustomDuotone && (0,external_wp_element_namespaceObject.createElement)(color_list_picker, { 61696 labels: [(0,external_wp_i18n_namespaceObject.__)('Shadows'), (0,external_wp_i18n_namespaceObject.__)('Highlights')], 61697 colors: colorPalette, 61698 value: value, 61699 disableCustomColors: disableCustomColors, 61700 enableAlpha: true, 61701 onChange: newColors => { 61702 if (!newColors[0]) { 61703 newColors[0] = defaultDark; 61704 } 61705 61706 if (!newColors[1]) { 61707 newColors[1] = defaultLight; 61708 } 61709 61710 const newValue = newColors.length >= 2 ? newColors : undefined; 61711 onChange(newValue); 61712 } 61713 })); 61714 } 61715 61716 /* harmony default export */ var duotone_picker = (DuotonePicker); 61717 61718 ;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/external.js 61719 61720 61721 /** 61722 * WordPress dependencies 61723 */ 61724 61725 const external = (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.SVG, { 61726 xmlns: "http://www.w3.org/2000/svg", 61727 viewBox: "0 0 24 24" 61728 }, (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.Path, { 61729 d: "M18.2 17c0 .7-.6 1.2-1.2 1.2H7c-.7 0-1.2-.6-1.2-1.2V7c0-.7.6-1.2 1.2-1.2h3.2V4.2H7C5.5 4.2 4.2 5.5 4.2 7v10c0 1.5 1.2 2.8 2.8 2.8h10c1.5 0 2.8-1.2 2.8-2.8v-3.6h-1.5V17zM14.9 3v1.5h3.7l-6.4 6.4 1.1 1.1 6.4-6.4v3.7h1.5V3h-6.3z" 61730 })); 61731 /* harmony default export */ var library_external = (external); 61732 61733 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/external-link/styles/external-link-styles.js 61734 61735 61736 function external_link_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } 61737 61738 /** 61739 * External dependencies 61740 */ 61741 61742 /** 61743 * WordPress dependencies 61744 */ 61745 61746 const StyledIcon = /*#__PURE__*/emotion_styled_base_browser_esm(icons_build_module_icon, true ? { 61747 target: "etxm6pv0" 61748 } : 0)( true ? { 61749 name: "rvs7bx", 61750 styles: "width:1em;height:1em;margin:0;vertical-align:middle;fill:currentColor" 61751 } : 0); 61752 61753 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/external-link/index.js 61754 61755 61756 61757 /** 61758 * External dependencies 61759 */ 61760 61761 61762 /** 61763 * WordPress dependencies 61764 */ 61765 61766 61767 61768 61769 /** 61770 * Internal dependencies 61771 */ 61772 61773 61774 61775 function ExternalLink(_ref, ref) { 61776 let { 61777 href, 61778 children, 61779 className, 61780 rel = '', 61781 ...additionalProps 61782 } = _ref; 61783 rel = (0,external_lodash_namespaceObject.uniq)((0,external_lodash_namespaceObject.compact)([...rel.split(' '), 'external', 'noreferrer', 'noopener'])).join(' '); 61784 const classes = classnames_default()('components-external-link', className); 61785 return ( 61786 /* eslint-disable react/jsx-no-target-blank */ 61787 (0,external_wp_element_namespaceObject.createElement)("a", extends_extends({}, additionalProps, { 61788 className: classes, 61789 href: href, 61790 target: "_blank", 61791 rel: rel, 61792 ref: ref 61793 }), children, (0,external_wp_element_namespaceObject.createElement)(visually_hidden_component, { 61794 as: "span" 61795 }, 61796 /* translators: accessibility text */ 61797 (0,external_wp_i18n_namespaceObject.__)('(opens in a new tab)')), (0,external_wp_element_namespaceObject.createElement)(StyledIcon, { 61798 icon: library_external, 61799 className: "components-external-link__icon" 61800 })) 61801 /* eslint-enable react/jsx-no-target-blank */ 61802 61803 ); 61804 } 61805 /* harmony default export */ var external_link = ((0,external_wp_element_namespaceObject.forwardRef)(ExternalLink)); 61806 61807 ;// CONCATENATED MODULE: ./node_modules/reakit/es/__keys-26bb1730.js 61808 // Automatically generated 61809 var POPOVER_STATE_KEYS = ["baseId", "unstable_idCountRef", "visible", "animated", "animating", "setBaseId", "show", "hide", "toggle", "setVisible", "setAnimated", "stopAnimation", "modal", "unstable_disclosureRef", "setModal", "unstable_referenceRef", "unstable_popoverRef", "unstable_arrowRef", "unstable_popoverStyles", "unstable_arrowStyles", "unstable_originalPlacement", "unstable_update", "placement", "place"]; 61810 var POPOVER_KEYS = POPOVER_STATE_KEYS; 61811 var POPOVER_ARROW_KEYS = [].concat(POPOVER_KEYS, ["size"]); 61812 var POPOVER_BACKDROP_KEYS = POPOVER_KEYS; 61813 var POPOVER_DISCLOSURE_KEYS = POPOVER_BACKDROP_KEYS; 61814 61815 61816 61817 ;// CONCATENATED MODULE: ./node_modules/reakit/es/__keys-ed7b48af.js 61818 // Automatically generated 61819 var DIALOG_STATE_KEYS = ["baseId", "unstable_idCountRef", "visible", "animated", "animating", "setBaseId", "show", "hide", "toggle", "setVisible", "setAnimated", "stopAnimation", "modal", "unstable_disclosureRef", "setModal"]; 61820 var DIALOG_KEYS = [].concat(DIALOG_STATE_KEYS, ["hideOnEsc", "hideOnClickOutside", "preventBodyScroll", "unstable_initialFocusRef", "unstable_finalFocusRef", "unstable_orphan", "unstable_autoFocusOnShow", "unstable_autoFocusOnHide"]); 61821 var DIALOG_BACKDROP_KEYS = DIALOG_STATE_KEYS; 61822 var DIALOG_DISCLOSURE_KEYS = DIALOG_BACKDROP_KEYS; 61823 61824 61825 61826 ;// CONCATENATED MODULE: ./node_modules/reakit/es/Button/Button.js 61827 61828 61829 61830 61831 61832 61833 61834 61835 61836 61837 61838 61839 61840 61841 61842 61843 61844 61845 61846 // Automatically generated 61847 var BUTTON_KEYS = []; 61848 61849 var useButton = createHook({ 61850 name: "Button", 61851 compose: useClickable, 61852 keys: BUTTON_KEYS, 61853 useProps: function useProps(_, _ref) { 61854 var htmlRef = _ref.ref, 61855 htmlProps = _rollupPluginBabelHelpers_1f0bf8c2_objectWithoutPropertiesLoose(_ref, ["ref"]); 61856 61857 var ref = (0,external_React_.useRef)(null); 61858 61859 var _React$useState = (0,external_React_.useState)(undefined), 61860 role = _React$useState[0], 61861 setRole = _React$useState[1]; 61862 61863 var _React$useState2 = (0,external_React_.useState)("button"), 61864 type = _React$useState2[0], 61865 setType = _React$useState2[1]; 61866 61867 (0,external_React_.useEffect)(function () { 61868 var element = ref.current; 61869 61870 if (!element) { 61871 false ? 0 : void 0; 61872 return; 61873 } 61874 61875 if (!isButton(element)) { 61876 if (element.tagName !== "A") { 61877 setRole("button"); 61878 } 61879 61880 setType(undefined); 61881 } 61882 }, []); 61883 return _objectSpread2({ 61884 ref: useForkRef(ref, htmlRef), 61885 role: role, 61886 type: type 61887 }, htmlProps); 61888 } 61889 }); 61890 var Button_Button = createComponent({ 61891 as: "button", 61892 memo: true, 61893 useHook: useButton 61894 }); 61895 61896 61897 61898 ;// CONCATENATED MODULE: ./node_modules/reakit/es/Disclosure/Disclosure.js 61899 61900 61901 61902 61903 61904 61905 61906 61907 61908 61909 61910 61911 61912 61913 61914 61915 61916 61917 61918 61919 61920 var useDisclosure = createHook({ 61921 name: "Disclosure", 61922 compose: useButton, 61923 keys: DISCLOSURE_KEYS, 61924 useProps: function useProps(options, _ref) { 61925 var htmlOnClick = _ref.onClick, 61926 ariaControls = _ref["aria-controls"], 61927 htmlProps = _rollupPluginBabelHelpers_1f0bf8c2_objectWithoutPropertiesLoose(_ref, ["onClick", "aria-controls"]); 61928 61929 var onClickRef = useLiveRef(htmlOnClick); 61930 var controls = ariaControls ? ariaControls + " " + options.baseId : options.baseId; 61931 var onClick = (0,external_React_.useCallback)(function (event) { 61932 var _onClickRef$current, _options$toggle; 61933 61934 (_onClickRef$current = onClickRef.current) === null || _onClickRef$current === void 0 ? void 0 : _onClickRef$current.call(onClickRef, event); 61935 if (event.defaultPrevented) return; 61936 (_options$toggle = options.toggle) === null || _options$toggle === void 0 ? void 0 : _options$toggle.call(options); 61937 }, [options.toggle]); 61938 return _objectSpread2({ 61939 "aria-expanded": !!options.visible, 61940 "aria-controls": controls, 61941 onClick: onClick 61942 }, htmlProps); 61943 } 61944 }); 61945 var Disclosure = createComponent({ 61946 as: "button", 61947 memo: true, 61948 useHook: useDisclosure 61949 }); 61950 61951 61952 61953 ;// CONCATENATED MODULE: ./node_modules/reakit/es/Dialog/DialogDisclosure.js 61954 61955 61956 61957 61958 61959 61960 61961 61962 61963 61964 61965 61966 61967 61968 61969 61970 61971 61972 61973 61974 61975 61976 61977 var useDialogDisclosure = createHook({ 61978 name: "DialogDisclosure", 61979 compose: useDisclosure, 61980 keys: DIALOG_DISCLOSURE_KEYS, 61981 useProps: function useProps(options, _ref) { 61982 var htmlRef = _ref.ref, 61983 htmlOnClick = _ref.onClick, 61984 htmlProps = _rollupPluginBabelHelpers_1f0bf8c2_objectWithoutPropertiesLoose(_ref, ["ref", "onClick"]); 61985 61986 var ref = (0,external_React_.useRef)(null); 61987 var onClickRef = useLiveRef(htmlOnClick); 61988 61989 var _React$useState = (0,external_React_.useState)(false), 61990 expanded = _React$useState[0], 61991 setExpanded = _React$useState[1]; 61992 61993 var disclosureRef = options.unstable_disclosureRef; // aria-expanded may be used for styling purposes, so we useLayoutEffect 61994 61995 useIsomorphicEffect(function () { 61996 var element = ref.current; 61997 false ? 0 : void 0; 61998 61999 if (disclosureRef && !disclosureRef.current) { 62000 disclosureRef.current = element; 62001 } 62002 62003 var isCurrentDisclosure = !(disclosureRef !== null && disclosureRef !== void 0 && disclosureRef.current) || disclosureRef.current === element; 62004 setExpanded(!!options.visible && isCurrentDisclosure); 62005 }, [options.visible, disclosureRef]); 62006 var onClick = (0,external_React_.useCallback)(function (event) { 62007 var _onClickRef$current; 62008 62009 (_onClickRef$current = onClickRef.current) === null || _onClickRef$current === void 0 ? void 0 : _onClickRef$current.call(onClickRef, event); 62010 if (event.defaultPrevented) return; 62011 62012 if (disclosureRef) { 62013 disclosureRef.current = event.currentTarget; 62014 } 62015 }, [disclosureRef]); 62016 return _objectSpread2({ 62017 ref: useForkRef(ref, htmlRef), 62018 "aria-haspopup": "dialog", 62019 "aria-expanded": expanded, 62020 onClick: onClick 62021 }, htmlProps); 62022 } 62023 }); 62024 var DialogDisclosure = createComponent({ 62025 as: "button", 62026 memo: true, 62027 useHook: useDialogDisclosure 62028 }); 62029 62030 62031 62032 ;// CONCATENATED MODULE: ./node_modules/reakit/es/Popover/PopoverDisclosure.js 62033 62034 62035 62036 62037 62038 62039 62040 62041 62042 62043 62044 62045 62046 62047 62048 62049 62050 62051 62052 62053 62054 62055 62056 62057 62058 var usePopoverDisclosure = createHook({ 62059 name: "PopoverDisclosure", 62060 compose: useDialogDisclosure, 62061 keys: POPOVER_DISCLOSURE_KEYS, 62062 useProps: function useProps(options, _ref) { 62063 var htmlRef = _ref.ref, 62064 htmlProps = _rollupPluginBabelHelpers_1f0bf8c2_objectWithoutPropertiesLoose(_ref, ["ref"]); 62065 62066 return _objectSpread2({ 62067 ref: useForkRef(options.unstable_referenceRef, htmlRef) 62068 }, htmlProps); 62069 } 62070 }); 62071 var PopoverDisclosure = createComponent({ 62072 as: "button", 62073 memo: true, 62074 useHook: usePopoverDisclosure 62075 }); 62076 62077 62078 62079 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/flyout/context.js 62080 /** 62081 * WordPress dependencies 62082 */ 62083 62084 /** 62085 * @type {import('react').Context<import('./types').Context>} 62086 */ 62087 62088 const FlyoutContext = (0,external_wp_element_namespaceObject.createContext)({}); 62089 const useFlyoutContext = () => (0,external_wp_element_namespaceObject.useContext)(FlyoutContext); 62090 62091 // EXTERNAL MODULE: ./node_modules/react-resize-aware/dist/index.js 62092 var react_resize_aware_dist = __webpack_require__(235); 62093 var react_resize_aware_dist_default = /*#__PURE__*/__webpack_require__.n(react_resize_aware_dist); 62094 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/flyout/utils.js 62095 /** 62096 * External dependencies 62097 */ 62098 62099 /** 62100 * WordPress dependencies 62101 */ 62102 62103 62104 /** 62105 * 62106 * @param { { onResize?: () => any } } onResize 62107 */ 62108 62109 function useFlyoutResizeUpdater(_ref) { 62110 let { 62111 onResize 62112 } = _ref; 62113 const [resizeListener, sizes] = react_resize_aware_dist_default()(); 62114 (0,external_wp_compose_namespaceObject.useIsomorphicLayoutEffect)(() => { 62115 onResize === null || onResize === void 0 ? void 0 : onResize(); 62116 }, [sizes.width, sizes.height]); 62117 return resizeListener; 62118 } 62119 62120 ;// CONCATENATED MODULE: ./node_modules/reakit-utils/es/useUpdateEffect.js 62121 62122 62123 /** 62124 * A `React.useEffect` that will not run on the first render. 62125 */ 62126 62127 function useUpdateEffect_useUpdateEffect(effect, deps) { 62128 var mounted = (0,external_React_.useRef)(false); 62129 (0,external_React_.useEffect)(function () { 62130 if (mounted.current) { 62131 return effect(); 62132 } 62133 62134 mounted.current = true; 62135 return undefined; 62136 }, deps); 62137 } 62138 62139 62140 62141 ;// CONCATENATED MODULE: ./node_modules/reakit-utils/es/removeIndexFromArray.js 62142 /** 62143 * Immutably removes an index from an array. 62144 * 62145 * @example 62146 * import { removeIndexFromArray } from "reakit-utils"; 62147 * 62148 * removeIndexFromArray(["a", "b", "c"], 1); // ["a", "c"] 62149 * 62150 * @returns {Array} A new array without the item in the passed index. 62151 */ 62152 function removeIndexFromArray(array, index) { 62153 if (index === -1) return array; 62154 return [].concat(array.slice(0, index), array.slice(index + 1)); 62155 } 62156 62157 62158 62159 ;// CONCATENATED MODULE: ./node_modules/reakit-utils/es/removeItemFromArray.js 62160 62161 62162 /** 62163 * Immutably removes an item from an array. 62164 * 62165 * @example 62166 * import { removeItemFromArray } from "reakit-utils"; 62167 * 62168 * removeItemFromArray(["a", "b", "c"], "b"); // ["a", "c"] 62169 * 62170 * // This only works by reference 62171 * const obj = {}; 62172 * removeItemFromArray([obj], {}); // [obj] 62173 * removeItemFromArray([obj], obj); // [] 62174 * 62175 * @returns {Array} A new array without the passed item. 62176 */ 62177 62178 function removeItemFromArray_removeItemFromArray(array, item) { 62179 var index = array.indexOf(item); 62180 return removeIndexFromArray(array, index); 62181 } 62182 62183 62184 62185 ;// CONCATENATED MODULE: ./node_modules/reakit/es/MenuContext-6af6cf92.js 62186 62187 62188 62189 var MenuContext = /*#__PURE__*/(0,external_React_.createContext)(null); 62190 function useMenuContext(menuRef, role, options) { 62191 var orphan = "unstable_orphan" in options && options.unstable_orphan; 62192 var parent = useContext(MenuContext); 62193 62194 var _React$useState = useState([]), 62195 children = _React$useState[0], 62196 setChildren = _React$useState[1]; 62197 62198 var _ref = parent || {}, 62199 addChildToParent = _ref.addChild, 62200 removeChildFromParent = _ref.removeChild; 62201 62202 var addChild = useCallback(function (ref) { 62203 return setChildren(function (refs) { 62204 return [].concat(refs, [ref]); 62205 }); 62206 }, []); 62207 var removeChild = useCallback(function (ref) { 62208 return setChildren(function (refs) { 62209 return removeItemFromArray(refs, ref); 62210 }); 62211 }, []); // If it's a nested menu, add it to parent 62212 62213 useEffect(function () { 62214 if (!addChildToParent || orphan) return undefined; 62215 addChildToParent(menuRef); 62216 return function () { 62217 removeChildFromParent === null || removeChildFromParent === void 0 ? void 0 : removeChildFromParent(menuRef); 62218 }; 62219 }, [menuRef, addChildToParent, removeChildFromParent, orphan]); 62220 var providerValue = useMemo(function () { 62221 return { 62222 orientation: options.orientation, 62223 next: options.next, 62224 previous: options.previous, 62225 ref: menuRef, 62226 role: role, 62227 parent: parent, 62228 children: children, 62229 addChild: addChild, 62230 removeChild: removeChild 62231 }; 62232 }, [options.orientation, options.next, options.previous, menuRef, role, parent, children, addChild, removeChild]); 62233 var wrapElement = useCallback(function (element) { 62234 return /*#__PURE__*/createElement(MenuContext.Provider, { 62235 value: providerValue 62236 }, element); 62237 }, [providerValue]); 62238 return wrapElement; 62239 } 62240 62241 62242 62243 ;// CONCATENATED MODULE: ./node_modules/body-scroll-lock/lib/bodyScrollLock.esm.js 62244 function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } } 62245 62246 // Older browsers don't support event options, feature detect it. 62247 62248 // Adopted and modified solution from Bohdan Didukh (2017) 62249 // https://stackoverflow.com/questions/41594997/ios-10-safari-prevent-scrolling-behind-a-fixed-overlay-and-maintain-scroll-posi 62250 62251 var hasPassiveEvents = false; 62252 if (typeof window !== 'undefined') { 62253 var passiveTestOptions = { 62254 get passive() { 62255 hasPassiveEvents = true; 62256 return undefined; 62257 } 62258 }; 62259 window.addEventListener('testPassive', null, passiveTestOptions); 62260 window.removeEventListener('testPassive', null, passiveTestOptions); 62261 } 62262 62263 var isIosDevice = typeof window !== 'undefined' && window.navigator && window.navigator.platform && (/iP(ad|hone|od)/.test(window.navigator.platform) || window.navigator.platform === 'MacIntel' && window.navigator.maxTouchPoints > 1); 62264 62265 62266 var locks = []; 62267 var documentListenerAdded = false; 62268 var initialClientY = -1; 62269 var previousBodyOverflowSetting = void 0; 62270 var previousBodyPaddingRight = void 0; 62271 62272 // returns true if `el` should be allowed to receive touchmove events. 62273 var allowTouchMove = function allowTouchMove(el) { 62274 return locks.some(function (lock) { 62275 if (lock.options.allowTouchMove && lock.options.allowTouchMove(el)) { 62276 return true; 62277 } 62278 62279 return false; 62280 }); 62281 }; 62282 62283 var preventDefault = function preventDefault(rawEvent) { 62284 var e = rawEvent || window.event; 62285 62286 // For the case whereby consumers adds a touchmove event listener to document. 62287 // Recall that we do document.addEventListener('touchmove', preventDefault, { passive: false }) 62288 // in disableBodyScroll - so if we provide this opportunity to allowTouchMove, then 62289 // the touchmove event on document will break. 62290 if (allowTouchMove(e.target)) { 62291 return true; 62292 } 62293 62294 // Do not prevent if the event has more than one touch (usually meaning this is a multi touch gesture like pinch to zoom). 62295 if (e.touches.length > 1) return true; 62296 62297 if (e.preventDefault) e.preventDefault(); 62298 62299 return false; 62300 }; 62301 62302 var setOverflowHidden = function setOverflowHidden(options) { 62303 // If previousBodyPaddingRight is already set, don't set it again. 62304 if (previousBodyPaddingRight === undefined) { 62305 var _reserveScrollBarGap = !!options && options.reserveScrollBarGap === true; 62306 var scrollBarGap = window.innerWidth - document.documentElement.clientWidth; 62307 62308 if (_reserveScrollBarGap && scrollBarGap > 0) { 62309 previousBodyPaddingRight = document.body.style.paddingRight; 62310 document.body.style.paddingRight = scrollBarGap + 'px'; 62311 } 62312 } 62313 62314 // If previousBodyOverflowSetting is already set, don't set it again. 62315 if (previousBodyOverflowSetting === undefined) { 62316 previousBodyOverflowSetting = document.body.style.overflow; 62317 document.body.style.overflow = 'hidden'; 62318 } 62319 }; 62320 62321 var restoreOverflowSetting = function restoreOverflowSetting() { 62322 if (previousBodyPaddingRight !== undefined) { 62323 document.body.style.paddingRight = previousBodyPaddingRight; 62324 62325 // Restore previousBodyPaddingRight to undefined so setOverflowHidden knows it 62326 // can be set again. 62327 previousBodyPaddingRight = undefined; 62328 } 62329 62330 if (previousBodyOverflowSetting !== undefined) { 62331 document.body.style.overflow = previousBodyOverflowSetting; 62332 62333 // Restore previousBodyOverflowSetting to undefined 62334 // so setOverflowHidden knows it can be set again. 62335 previousBodyOverflowSetting = undefined; 62336 } 62337 }; 62338 62339 // https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight#Problems_and_solutions 62340 var isTargetElementTotallyScrolled = function isTargetElementTotallyScrolled(targetElement) { 62341 return targetElement ? targetElement.scrollHeight - targetElement.scrollTop <= targetElement.clientHeight : false; 62342 }; 62343 62344 var handleScroll = function handleScroll(event, targetElement) { 62345 var clientY = event.targetTouches[0].clientY - initialClientY; 62346 62347 if (allowTouchMove(event.target)) { 62348 return false; 62349 } 62350 62351 if (targetElement && targetElement.scrollTop === 0 && clientY > 0) { 62352 // element is at the top of its scroll. 62353 return preventDefault(event); 62354 } 62355 62356 if (isTargetElementTotallyScrolled(targetElement) && clientY < 0) { 62357 // element is at the bottom of its scroll. 62358 return preventDefault(event); 62359 } 62360 62361 event.stopPropagation(); 62362 return true; 62363 }; 62364 62365 var disableBodyScroll = function disableBodyScroll(targetElement, options) { 62366 // targetElement must be provided 62367 if (!targetElement) { 62368 // eslint-disable-next-line no-console 62369 console.error('disableBodyScroll unsuccessful - targetElement must be provided when calling disableBodyScroll on IOS devices.'); 62370 return; 62371 } 62372 62373 // disableBodyScroll must not have been called on this targetElement before 62374 if (locks.some(function (lock) { 62375 return lock.targetElement === targetElement; 62376 })) { 62377 return; 62378 } 62379 62380 var lock = { 62381 targetElement: targetElement, 62382 options: options || {} 62383 }; 62384 62385 locks = [].concat(_toConsumableArray(locks), [lock]); 62386 62387 if (isIosDevice) { 62388 targetElement.ontouchstart = function (event) { 62389 if (event.targetTouches.length === 1) { 62390 // detect single touch. 62391 initialClientY = event.targetTouches[0].clientY; 62392 } 62393 }; 62394 targetElement.ontouchmove = function (event) { 62395 if (event.targetTouches.length === 1) { 62396 // detect single touch. 62397 handleScroll(event, targetElement); 62398 } 62399 }; 62400 62401 if (!documentListenerAdded) { 62402 document.addEventListener('touchmove', preventDefault, hasPassiveEvents ? { passive: false } : undefined); 62403 documentListenerAdded = true; 62404 } 62405 } else { 62406 setOverflowHidden(options); 62407 } 62408 }; 62409 62410 var clearAllBodyScrollLocks = function clearAllBodyScrollLocks() { 62411 if (isIosDevice) { 62412 // Clear all locks ontouchstart/ontouchmove handlers, and the references. 62413 locks.forEach(function (lock) { 62414 lock.targetElement.ontouchstart = null; 62415 lock.targetElement.ontouchmove = null; 62416 }); 62417 62418 if (documentListenerAdded) { 62419 document.removeEventListener('touchmove', preventDefault, hasPassiveEvents ? { passive: false } : undefined); 62420 documentListenerAdded = false; 62421 } 62422 62423 // Reset initial clientY. 62424 initialClientY = -1; 62425 } else { 62426 restoreOverflowSetting(); 62427 } 62428 62429 locks = []; 62430 }; 62431 62432 var enableBodyScroll = function enableBodyScroll(targetElement) { 62433 if (!targetElement) { 62434 // eslint-disable-next-line no-console 62435 console.error('enableBodyScroll unsuccessful - targetElement must be provided when calling enableBodyScroll on IOS devices.'); 62436 return; 62437 } 62438 62439 locks = locks.filter(function (lock) { 62440 return lock.targetElement !== targetElement; 62441 }); 62442 62443 if (isIosDevice) { 62444 targetElement.ontouchstart = null; 62445 targetElement.ontouchmove = null; 62446 62447 if (documentListenerAdded && locks.length === 0) { 62448 document.removeEventListener('touchmove', preventDefault, hasPassiveEvents ? { passive: false } : undefined); 62449 documentListenerAdded = false; 62450 } 62451 } else if (!locks.length) { 62452 restoreOverflowSetting(); 62453 } 62454 }; 62455 62456 62457 ;// CONCATENATED MODULE: ./node_modules/reakit-utils/es/closest.js 62458 62459 62460 /** 62461 * Ponyfill for `Element.prototype.closest` 62462 * 62463 * @example 62464 * import { closest } from "reakit-utils"; 62465 * 62466 * closest(document.getElementById("id"), "div"); 62467 * // same as 62468 * document.getElementById("id").closest("div"); 62469 */ 62470 function closest_closest(element, selectors) { 62471 if ("closest" in element) return element.closest(selectors); 62472 62473 do { 62474 if (matches(element, selectors)) return element; 62475 element = element.parentElement || element.parentNode; 62476 } while (element !== null && element.nodeType === 1); 62477 62478 return null; 62479 } 62480 62481 62482 62483 ;// CONCATENATED MODULE: ./node_modules/reakit/es/DialogBackdropContext-8775f78b.js 62484 62485 62486 var DialogBackdropContext = /*#__PURE__*/(0,external_React_.createContext)(undefined); 62487 62488 62489 62490 ;// CONCATENATED MODULE: ./node_modules/reakit-utils/es/isEmpty.js 62491 62492 62493 /** 62494 * Checks whether `arg` is empty or not. 62495 * 62496 * @example 62497 * import { isEmpty } from "reakit-utils"; 62498 * 62499 * isEmpty([]); // true 62500 * isEmpty(["a"]); // false 62501 * isEmpty({}); // true 62502 * isEmpty({ a: "a" }); // false 62503 * isEmpty(); // true 62504 * isEmpty(null); // true 62505 * isEmpty(undefined); // true 62506 * isEmpty(""); // true 62507 */ 62508 62509 function isEmpty(arg) { 62510 if (Array.isArray(arg)) return !arg.length; 62511 if (isObject_isObject(arg)) return !Object.keys(arg).length; 62512 if (arg == null) return true; 62513 if (arg === "") return true; 62514 return false; 62515 } 62516 62517 62518 62519 ;// CONCATENATED MODULE: ./node_modules/reakit/es/Dialog/Dialog.js 62520 62521 62522 62523 62524 62525 62526 62527 62528 62529 62530 62531 62532 62533 62534 62535 62536 62537 62538 62539 62540 62541 62542 62543 62544 62545 62546 62547 62548 62549 62550 62551 62552 62553 62554 function useDisclosureRef(dialogRef, options) { 62555 var ref = (0,external_React_.useRef)(null); 62556 var animating = !!(options.animated && options.animating); 62557 (0,external_React_.useEffect)(function () { 62558 if (options.visible || animating) return undefined; // We get the last focused element before the dialog opens, so we can move 62559 // focus back to it when the dialog closes. 62560 62561 var onFocus = function onFocus(event) { 62562 var target = event.target; 62563 62564 if ("focus" in target) { 62565 ref.current = target; 62566 62567 if (options.unstable_disclosureRef) { 62568 options.unstable_disclosureRef.current = target; 62569 } 62570 } 62571 }; 62572 62573 var document = getDocument(dialogRef.current); 62574 document.addEventListener("focusin", onFocus); 62575 return function () { 62576 return document.removeEventListener("focusin", onFocus); 62577 }; 62578 }, [options.visible, animating, options.unstable_disclosureRef, dialogRef]); 62579 (0,external_React_.useEffect)(function () { 62580 var _options$unstable_dis; 62581 62582 if (!options.visible || animating) return undefined; // Safari and Firefox on MacOS don't focus on buttons on mouse down. 62583 // Instead, they focus on the closest focusable parent (ultimately, the 62584 // body element). This works around that by preventing that behavior and 62585 // forcing focus on the disclosure button. Otherwise, we wouldn't be able 62586 // to close the dialog by clicking again on the disclosure. 62587 62588 var onMouseDown = function onMouseDown(event) { 62589 var element = event.currentTarget; 62590 if (!isButton(element)) return; 62591 event.preventDefault(); 62592 element.focus(); 62593 }; 62594 62595 var disclosure = ((_options$unstable_dis = options.unstable_disclosureRef) === null || _options$unstable_dis === void 0 ? void 0 : _options$unstable_dis.current) || ref.current; 62596 disclosure === null || disclosure === void 0 ? void 0 : disclosure.addEventListener("mousedown", onMouseDown); 62597 return function () { 62598 return disclosure === null || disclosure === void 0 ? void 0 : disclosure.removeEventListener("mousedown", onMouseDown); 62599 }; 62600 }, [options.visible, animating, options.unstable_disclosureRef]); 62601 return options.unstable_disclosureRef || ref; 62602 } 62603 62604 function usePreventBodyScroll(targetRef, options) { 62605 var shouldPrevent = Boolean(options.preventBodyScroll && options.visible); 62606 (0,external_React_.useEffect)(function () { 62607 var element = targetRef.current; 62608 if (!element || !shouldPrevent) return undefined; 62609 disableBodyScroll(element, { 62610 reserveScrollBarGap: true 62611 }); 62612 return function () { 62613 return enableBodyScroll(element); 62614 }; 62615 }, [targetRef, shouldPrevent]); 62616 } 62617 62618 function useFocusOnShow(dialogRef, nestedDialogs, options) { 62619 var initialFocusRef = options.unstable_initialFocusRef; 62620 var shouldFocus = options.visible && options.unstable_autoFocusOnShow; 62621 var animating = !!(options.animated && options.animating); 62622 useUpdateEffect_useUpdateEffect(function () { 62623 var dialog = dialogRef.current; 62624 false ? 0 : void 0; 62625 if (!shouldFocus) return; 62626 if (!dialog) return; 62627 if (animating) return; // If there're nested open dialogs, let them handle focus 62628 62629 if (nestedDialogs.some(function (child) { 62630 return child.current && !child.current.hidden; 62631 })) { 62632 return; 62633 } 62634 62635 if (initialFocusRef !== null && initialFocusRef !== void 0 && initialFocusRef.current) { 62636 initialFocusRef.current.focus({ 62637 preventScroll: true 62638 }); 62639 } else { 62640 var tabbable = getFirstTabbableIn(dialog, true); 62641 62642 var isActive = function isActive() { 62643 return hasFocusWithin(dialog); 62644 }; 62645 62646 if (tabbable) { 62647 ensureFocus(tabbable, { 62648 preventScroll: true, 62649 isActive: isActive 62650 }); 62651 } else { 62652 ensureFocus(dialog, { 62653 preventScroll: true, 62654 isActive: isActive 62655 }); 62656 false ? 0 : void 0; 62657 } 62658 } 62659 }, [dialogRef, shouldFocus, animating, nestedDialogs, initialFocusRef]); 62660 } 62661 62662 function usePortalRef(dialogRef, options) { 62663 var portalRef = (0,external_React_.useRef)(null); 62664 (0,external_React_.useEffect)(function () { 62665 var dialog = dialogRef.current; 62666 if (!dialog || !options.visible) return; 62667 portalRef.current = closest_closest(dialog, Portal.__selector); 62668 }, [dialogRef, options.visible]); 62669 return portalRef; 62670 } 62671 62672 function removeFromDOM(element) { 62673 if (element.parentNode == null) return; 62674 element.parentNode.removeChild(element); 62675 } 62676 62677 var focusTrapClassName = "__reakit-focus-trap"; 62678 function isFocusTrap(element) { 62679 var _element$classList; 62680 62681 return (_element$classList = element.classList) === null || _element$classList === void 0 ? void 0 : _element$classList.contains(focusTrapClassName); 62682 } 62683 function useFocusTrap(dialogRef, visibleModals, options) { 62684 var portalRef = usePortalRef(dialogRef, options); 62685 var shouldTrap = options.visible && options.modal; 62686 var beforeElement = (0,external_React_.useRef)(null); 62687 var afterElement = (0,external_React_.useRef)(null); // Create before and after elements 62688 // https://github.com/w3c/aria-practices/issues/545 62689 62690 (0,external_React_.useEffect)(function () { 62691 if (!shouldTrap) return undefined; 62692 var portal = portalRef.current; 62693 62694 if (!portal) { 62695 false ? 0 : void 0; 62696 return undefined; 62697 } 62698 62699 if (!beforeElement.current) { 62700 var document = getDocument(portal); 62701 beforeElement.current = document.createElement("div"); 62702 beforeElement.current.className = focusTrapClassName; 62703 beforeElement.current.tabIndex = 0; 62704 beforeElement.current.style.position = "fixed"; 62705 beforeElement.current.setAttribute("aria-hidden", "true"); 62706 } 62707 62708 if (!afterElement.current) { 62709 afterElement.current = beforeElement.current.cloneNode(); 62710 } 62711 62712 portal.insertAdjacentElement("beforebegin", beforeElement.current); 62713 portal.insertAdjacentElement("afterend", afterElement.current); 62714 return function () { 62715 if (beforeElement.current) removeFromDOM(beforeElement.current); 62716 if (afterElement.current) removeFromDOM(afterElement.current); 62717 }; 62718 }, [portalRef, shouldTrap]); // Focus trap 62719 62720 (0,external_React_.useEffect)(function () { 62721 var before = beforeElement.current; 62722 var after = afterElement.current; 62723 if (!shouldTrap || !before || !after) return undefined; 62724 62725 var handleFocus = function handleFocus(event) { 62726 var dialog = dialogRef.current; 62727 if (!dialog || visibleModals.length) return; 62728 event.preventDefault(); 62729 var isAfter = event.target === after; 62730 var tabbable = isAfter ? getFirstTabbableIn(dialog) : getLastTabbableIn(dialog); 62731 62732 if (tabbable) { 62733 tabbable.focus(); 62734 } else { 62735 // fallback to dialog 62736 dialog.focus(); 62737 } 62738 }; 62739 62740 before.addEventListener("focus", handleFocus); 62741 after.addEventListener("focus", handleFocus); 62742 return function () { 62743 before.removeEventListener("focus", handleFocus); 62744 after.removeEventListener("focus", handleFocus); 62745 }; 62746 }, [dialogRef, visibleModals, shouldTrap]); 62747 } 62748 62749 function hidByFocusingAnotherElement(dialogRef) { 62750 var dialog = dialogRef.current; 62751 if (!dialog) return false; 62752 var activeElement = getActiveElement_getActiveElement(dialog); 62753 if (!activeElement) return false; 62754 if (contains(dialog, activeElement)) return false; 62755 if (isTabbable(activeElement)) return true; 62756 if (activeElement.getAttribute("data-dialog") === "true") return true; 62757 return false; 62758 } 62759 62760 function useFocusOnHide(dialogRef, disclosureRef, options) { 62761 var shouldFocus = options.unstable_autoFocusOnHide && !options.visible; 62762 var animating = !!(options.animated && options.animating); 62763 useUpdateEffect_useUpdateEffect(function () { 62764 var _options$unstable_fin; 62765 62766 if (!shouldFocus) return; 62767 if (animating) return; // Hide was triggered by a click/focus on a tabbable element outside 62768 // the dialog or on another dialog. We won't change focus then. 62769 62770 if (hidByFocusingAnotherElement(dialogRef)) { 62771 return; 62772 } 62773 62774 var finalFocusEl = ((_options$unstable_fin = options.unstable_finalFocusRef) === null || _options$unstable_fin === void 0 ? void 0 : _options$unstable_fin.current) || disclosureRef.current; 62775 62776 if (finalFocusEl) { 62777 if (finalFocusEl.id) { 62778 var document = getDocument(finalFocusEl); 62779 var compositeElement = document.querySelector("[aria-activedescendant='" + finalFocusEl.id + "']"); 62780 62781 if (compositeElement) { 62782 ensureFocus(compositeElement); 62783 return; 62784 } 62785 } 62786 62787 ensureFocus(finalFocusEl); 62788 return; 62789 } 62790 62791 false ? 0 : void 0; 62792 }, [shouldFocus, animating, dialogRef, disclosureRef]); 62793 } 62794 62795 var DialogContext = /*#__PURE__*/(0,external_React_.createContext)({}); 62796 function useNestedDialogs(dialogRef, options) { 62797 var context = (0,external_React_.useContext)(DialogContext); 62798 62799 var _React$useState = (0,external_React_.useState)([]), 62800 dialogs = _React$useState[0], 62801 setDialogs = _React$useState[1]; 62802 62803 var _React$useState2 = (0,external_React_.useState)(dialogs), 62804 visibleModals = _React$useState2[0], 62805 setVisibleModals = _React$useState2[1]; 62806 62807 var addDialog = (0,external_React_.useCallback)(function (ref) { 62808 var _context$addDialog; 62809 62810 (_context$addDialog = context.addDialog) === null || _context$addDialog === void 0 ? void 0 : _context$addDialog.call(context, ref); 62811 setDialogs(function (prevDialogs) { 62812 return [].concat(prevDialogs, [ref]); 62813 }); 62814 }, [context.addDialog]); 62815 var removeDialog = (0,external_React_.useCallback)(function (ref) { 62816 var _context$removeDialog; 62817 62818 (_context$removeDialog = context.removeDialog) === null || _context$removeDialog === void 0 ? void 0 : _context$removeDialog.call(context, ref); 62819 setDialogs(function (prevDialogs) { 62820 return removeItemFromArray_removeItemFromArray(prevDialogs, ref); 62821 }); 62822 }, [context.removeDialog]); 62823 var showDialog = (0,external_React_.useCallback)(function (ref) { 62824 var _context$showDialog; 62825 62826 (_context$showDialog = context.showDialog) === null || _context$showDialog === void 0 ? void 0 : _context$showDialog.call(context, ref); 62827 setVisibleModals(function (prevDialogs) { 62828 return [].concat(prevDialogs, [ref]); 62829 }); 62830 }, [context.showDialog]); 62831 var hideDialog = (0,external_React_.useCallback)(function (ref) { 62832 var _context$hideDialog; 62833 62834 (_context$hideDialog = context.hideDialog) === null || _context$hideDialog === void 0 ? void 0 : _context$hideDialog.call(context, ref); 62835 setVisibleModals(function (prevDialogs) { 62836 return removeItemFromArray_removeItemFromArray(prevDialogs, ref); 62837 }); 62838 }, [context.hideDialog]); // If it's a nested dialog, add it to context 62839 62840 (0,external_React_.useEffect)(function () { 62841 var _context$addDialog2; 62842 62843 if (options.unstable_orphan) return undefined; 62844 (_context$addDialog2 = context.addDialog) === null || _context$addDialog2 === void 0 ? void 0 : _context$addDialog2.call(context, dialogRef); 62845 return function () { 62846 var _context$removeDialog2; 62847 62848 (_context$removeDialog2 = context.removeDialog) === null || _context$removeDialog2 === void 0 ? void 0 : _context$removeDialog2.call(context, dialogRef); 62849 }; 62850 }, [options.unstable_orphan, context.addDialog, dialogRef, context.removeDialog]); 62851 (0,external_React_.useEffect)(function () { 62852 var _context$showDialog2; 62853 62854 if (options.unstable_orphan) return undefined; 62855 if (!options.modal) return undefined; 62856 if (!options.visible) return undefined; 62857 (_context$showDialog2 = context.showDialog) === null || _context$showDialog2 === void 0 ? void 0 : _context$showDialog2.call(context, dialogRef); 62858 return function () { 62859 var _context$hideDialog2; 62860 62861 (_context$hideDialog2 = context.hideDialog) === null || _context$hideDialog2 === void 0 ? void 0 : _context$hideDialog2.call(context, dialogRef); 62862 }; 62863 }, [options.unstable_orphan, options.modal, options.visible, context.showDialog, dialogRef, context.hideDialog]); // Close all nested dialogs when parent dialog closes 62864 62865 (0,external_React_.useEffect)(function () { 62866 if (context.visible === false && options.visible && !options.unstable_orphan) { 62867 var _options$hide; 62868 62869 (_options$hide = options.hide) === null || _options$hide === void 0 ? void 0 : _options$hide.call(options); 62870 } 62871 }, [context.visible, options.visible, options.hide, options.unstable_orphan]); // Provider 62872 62873 var providerValue = (0,external_React_.useMemo)(function () { 62874 return { 62875 visible: options.visible, 62876 addDialog: addDialog, 62877 removeDialog: removeDialog, 62878 showDialog: showDialog, 62879 hideDialog: hideDialog 62880 }; 62881 }, [options.visible, addDialog, removeDialog, showDialog, hideDialog]); 62882 var wrap = (0,external_React_.useCallback)(function (element) { 62883 return /*#__PURE__*/(0,external_React_.createElement)(DialogContext.Provider, { 62884 value: providerValue 62885 }, element); 62886 }, [providerValue]); 62887 return { 62888 dialogs: dialogs, 62889 visibleModals: visibleModals, 62890 wrap: wrap 62891 }; 62892 } 62893 62894 function dialogContains(target) { 62895 return function (dialogRef) { 62896 var dialog = dialogRef.current; 62897 if (!dialog) return false; 62898 if (contains(dialog, target)) return true; 62899 var document = getDocument(dialog); 62900 var backdrop = document.querySelector("[data-dialog-ref=\"" + dialog.id + "\"]"); 62901 62902 if (backdrop) { 62903 return contains(backdrop, target); 62904 } 62905 62906 return false; 62907 }; 62908 } 62909 62910 function isDisclosure(target, disclosure) { 62911 return contains(disclosure, target); 62912 } 62913 62914 function isInDocument(target) { 62915 var document = getDocument(target); 62916 62917 if (target.tagName === "HTML") { 62918 return true; 62919 } 62920 62921 return contains(document.body, target); 62922 } 62923 62924 function useEventListenerOutside(containerRef, disclosureRef, nestedDialogs, eventType, listener, shouldListen, capture) { 62925 var listenerRef = useLiveRef(listener); 62926 (0,external_React_.useEffect)(function () { 62927 if (!shouldListen) return undefined; 62928 62929 var onEvent = function onEvent(event) { 62930 if (!listenerRef.current) return; 62931 var container = containerRef.current; 62932 var disclosure = disclosureRef.current; 62933 var target = event.target; 62934 62935 if (!container) { 62936 false ? 0 : void 0; 62937 return; 62938 } // When an element is unmounted right after it receives focus, the focus 62939 // event is triggered after that, when the element isn't part of the 62940 // current document anymore. So we ignore it. 62941 62942 62943 if (!isInDocument(target)) return; // Event inside dialog 62944 62945 if (contains(container, target)) return; // Event on disclosure 62946 62947 if (disclosure && isDisclosure(target, disclosure)) return; // Event inside a nested dialog or focus trap 62948 62949 if (isFocusTrap(target) || nestedDialogs.some(dialogContains(target))) { 62950 return; 62951 } 62952 62953 listenerRef.current(event); 62954 }; 62955 62956 var document = getDocument(containerRef.current); 62957 document.addEventListener(eventType, onEvent, capture); 62958 return function () { 62959 return document.removeEventListener(eventType, onEvent, capture); 62960 }; 62961 }, [containerRef, disclosureRef, nestedDialogs, eventType, shouldListen, listenerRef]); 62962 } 62963 62964 function useMouseDownRef(dialogRef, options) { 62965 var mouseDownRef = (0,external_React_.useRef)(); 62966 (0,external_React_.useEffect)(function () { 62967 if (!options.visible) return undefined; 62968 if (!options.hideOnClickOutside) return undefined; 62969 var document = getDocument(dialogRef.current); 62970 62971 var onMouseDown = function onMouseDown(event) { 62972 mouseDownRef.current = event.target; 62973 }; 62974 62975 document.addEventListener("mousedown", onMouseDown); 62976 return function () { 62977 return document.removeEventListener("mousedown", onMouseDown); 62978 }; 62979 }, [options.visible, options.hideOnClickOutside, dialogRef]); 62980 return mouseDownRef; 62981 } 62982 62983 function useHideOnClickOutside(dialogRef, disclosureRef, nestedDialogs, options) { 62984 var mouseDownRef = useMouseDownRef(dialogRef, options); 62985 useEventListenerOutside(dialogRef, disclosureRef, nestedDialogs, "click", function (event) { 62986 // Make sure the element that has been clicked is the same that last 62987 // triggered the mousedown event. This prevents the dialog from closing 62988 // by dragging the cursor (for example, selecting some text inside the 62989 // dialog and releasing the mouse outside of it). 62990 if (mouseDownRef.current === event.target) { 62991 var _options$hide; 62992 62993 (_options$hide = options.hide) === null || _options$hide === void 0 ? void 0 : _options$hide.call(options); 62994 } 62995 }, options.visible && options.hideOnClickOutside); 62996 useEventListenerOutside(dialogRef, disclosureRef, nestedDialogs, "focusin", function (event) { 62997 var document = getDocument(dialogRef.current); // Fix for https://github.com/reakit/reakit/issues/619 62998 // On IE11, calling element.blur() triggers the focus event on 62999 // document.body, so we make sure to ignore it as well. 63000 63001 if (event.target !== document && event.target !== document.body) { 63002 var _options$hide2; 63003 63004 (_options$hide2 = options.hide) === null || _options$hide2 === void 0 ? void 0 : _options$hide2.call(options); 63005 } 63006 }, options.visible && options.hideOnClickOutside); 63007 } 63008 63009 function useDisableHoverOutside(portalRef, nestedDialogs, options) { 63010 var useEvent = function useEvent(eventType) { 63011 return useEventListenerOutside(portalRef, { 63012 current: null 63013 }, nestedDialogs, eventType, function (event) { 63014 event.stopPropagation(); 63015 event.preventDefault(); 63016 }, options.visible && options.modal, true); 63017 }; 63018 63019 useEvent("mouseover"); 63020 useEvent("mousemove"); 63021 useEvent("mouseout"); 63022 } 63023 63024 /** 63025 * When the focused child gets removed from the DOM, we make sure to move focus 63026 * to the dialog. 63027 */ 63028 function useFocusOnChildUnmount(dialogRef, options) { 63029 (0,external_React_.useEffect)(function () { 63030 var dialog = dialogRef.current; 63031 if (!options.visible || !dialog) return undefined; 63032 var observer = new MutationObserver(function (mutations) { 63033 var target = mutations[0].target; // If target is not this dialog, then this observer was triggered by a 63034 // nested dialog, so we just ignore it here and let the nested dialog 63035 // handle it there. 63036 63037 if (target !== dialog) return; 63038 var document = getDocument(dialog); 63039 var activeElement = getActiveElement_getActiveElement(dialog); // We can check if the current focused element is the document body. On 63040 // IE 11, it's an empty object when the current document is in a frame or 63041 // iframe. 63042 63043 if (activeElement === document.body || isEmpty(activeElement)) { 63044 dialog.focus(); 63045 } 63046 }); 63047 observer.observe(dialog, { 63048 childList: true, 63049 subtree: true 63050 }); 63051 return function () { 63052 observer.disconnect(); 63053 }; 63054 }, [options.visible, dialogRef]); 63055 } 63056 63057 function isActualElement(element) { 63058 return element && element.tagName && element.tagName !== "HTML" && element !== getDocument(element).body; 63059 } 63060 63061 function useFocusOnBlur(dialogRef, options) { 63062 var _React$useReducer = (0,external_React_.useReducer)(function (n) { 63063 return n + 1; 63064 }, 0), 63065 blurred = _React$useReducer[0], 63066 scheduleFocus = _React$useReducer[1]; 63067 63068 useIsomorphicEffect(function () { 63069 var dialog = dialogRef.current; 63070 if (!options.visible) return; 63071 if (!blurred) return; // After blur, if the active element isn't an actual element, this probably 63072 // means that element.blur() was called on an element inside the dialog. 63073 // In this case, the browser will automatically focus the body element. 63074 // So we move focus back to the dialog. 63075 63076 if (!isActualElement(getActiveElement_getActiveElement(dialog))) { 63077 false ? 0 : void 0; 63078 dialog === null || dialog === void 0 ? void 0 : dialog.focus(); 63079 } 63080 }, [blurred, dialogRef]); 63081 var onBlur = (0,external_React_.useCallback)(function (event) { 63082 if (!options.visible) return; 63083 var nextActiveElement = getNextActiveElementOnBlur(event); 63084 63085 if (!isActualElement(nextActiveElement)) { 63086 scheduleFocus(); 63087 } 63088 }, [options.visible]); 63089 return onBlur; 63090 } 63091 63092 var useDialog = createHook({ 63093 name: "Dialog", 63094 compose: useDisclosureContent, 63095 keys: DIALOG_KEYS, 63096 useOptions: function useOptions(_ref) { 63097 var _ref$modal = _ref.modal, 63098 modal = _ref$modal === void 0 ? true : _ref$modal, 63099 _ref$hideOnEsc = _ref.hideOnEsc, 63100 hideOnEsc = _ref$hideOnEsc === void 0 ? true : _ref$hideOnEsc, 63101 _ref$hideOnClickOutsi = _ref.hideOnClickOutside, 63102 hideOnClickOutside = _ref$hideOnClickOutsi === void 0 ? true : _ref$hideOnClickOutsi, 63103 _ref$preventBodyScrol = _ref.preventBodyScroll, 63104 preventBodyScroll = _ref$preventBodyScrol === void 0 ? modal : _ref$preventBodyScrol, 63105 _ref$unstable_autoFoc = _ref.unstable_autoFocusOnShow, 63106 unstable_autoFocusOnShow = _ref$unstable_autoFoc === void 0 ? true : _ref$unstable_autoFoc, 63107 _ref$unstable_autoFoc2 = _ref.unstable_autoFocusOnHide, 63108 unstable_autoFocusOnHide = _ref$unstable_autoFoc2 === void 0 ? true : _ref$unstable_autoFoc2, 63109 unstable_orphan = _ref.unstable_orphan, 63110 options = _rollupPluginBabelHelpers_1f0bf8c2_objectWithoutPropertiesLoose(_ref, ["modal", "hideOnEsc", "hideOnClickOutside", "preventBodyScroll", "unstable_autoFocusOnShow", "unstable_autoFocusOnHide", "unstable_orphan"]); 63111 63112 return _objectSpread2({ 63113 modal: modal, 63114 hideOnEsc: hideOnEsc, 63115 hideOnClickOutside: hideOnClickOutside, 63116 preventBodyScroll: modal && preventBodyScroll, 63117 unstable_autoFocusOnShow: unstable_autoFocusOnShow, 63118 unstable_autoFocusOnHide: unstable_autoFocusOnHide, 63119 unstable_orphan: modal && unstable_orphan 63120 }, options); 63121 }, 63122 useProps: function useProps(options, _ref2) { 63123 var htmlRef = _ref2.ref, 63124 htmlOnKeyDown = _ref2.onKeyDown, 63125 htmlOnBlur = _ref2.onBlur, 63126 htmlWrapElement = _ref2.wrapElement, 63127 tabIndex = _ref2.tabIndex, 63128 htmlProps = _rollupPluginBabelHelpers_1f0bf8c2_objectWithoutPropertiesLoose(_ref2, ["ref", "onKeyDown", "onBlur", "wrapElement", "tabIndex"]); 63129 63130 var dialog = (0,external_React_.useRef)(null); 63131 var backdrop = (0,external_React_.useContext)(DialogBackdropContext); 63132 var hasBackdrop = backdrop && backdrop === options.baseId; 63133 var disclosure = useDisclosureRef(dialog, options); 63134 var onKeyDownRef = useLiveRef(htmlOnKeyDown); 63135 var onBlurRef = useLiveRef(htmlOnBlur); 63136 var focusOnBlur = useFocusOnBlur(dialog, options); 63137 63138 var _useNestedDialogs = useNestedDialogs(dialog, options), 63139 dialogs = _useNestedDialogs.dialogs, 63140 visibleModals = _useNestedDialogs.visibleModals, 63141 wrap = _useNestedDialogs.wrap; // VoiceOver/Safari accepts only one `aria-modal` container, so if there 63142 // are visible child modals, then we don't want to set aria-modal on the 63143 // parent modal (this component). 63144 63145 63146 var modal = options.modal && !visibleModals.length ? true : undefined; 63147 usePreventBodyScroll(dialog, options); 63148 useFocusTrap(dialog, visibleModals, options); 63149 useFocusOnChildUnmount(dialog, options); 63150 useFocusOnShow(dialog, dialogs, options); 63151 useFocusOnHide(dialog, disclosure, options); 63152 useHideOnClickOutside(dialog, disclosure, dialogs, options); 63153 useDisableHoverOutside(dialog, dialogs, options); 63154 var onKeyDown = (0,external_React_.useCallback)(function (event) { 63155 var _onKeyDownRef$current; 63156 63157 (_onKeyDownRef$current = onKeyDownRef.current) === null || _onKeyDownRef$current === void 0 ? void 0 : _onKeyDownRef$current.call(onKeyDownRef, event); 63158 if (event.defaultPrevented) return; 63159 if (event.key !== "Escape") return; 63160 if (!options.hideOnEsc) return; 63161 63162 if (!options.hide) { 63163 false ? 0 : void 0; 63164 return; 63165 } 63166 63167 event.stopPropagation(); 63168 options.hide(); 63169 }, [options.hideOnEsc, options.hide]); 63170 var onBlur = (0,external_React_.useCallback)(function (event) { 63171 var _onBlurRef$current; 63172 63173 (_onBlurRef$current = onBlurRef.current) === null || _onBlurRef$current === void 0 ? void 0 : _onBlurRef$current.call(onBlurRef, event); 63174 focusOnBlur(event); 63175 }, [focusOnBlur]); 63176 var wrapElement = (0,external_React_.useCallback)(function (element) { 63177 element = wrap(element); 63178 63179 if (options.modal && !hasBackdrop) { 63180 element = /*#__PURE__*/(0,external_React_.createElement)(Portal, null, element); 63181 } 63182 63183 if (htmlWrapElement) { 63184 element = htmlWrapElement(element); 63185 } 63186 63187 return ( 63188 /*#__PURE__*/ 63189 // Prevents Menu > Dialog > Menu to behave as a sub menu 63190 (0,external_React_.createElement)(MenuContext.Provider, { 63191 value: null 63192 }, element) 63193 ); 63194 }, [wrap, options.modal, hasBackdrop, htmlWrapElement]); 63195 return _objectSpread2({ 63196 ref: useForkRef(dialog, htmlRef), 63197 role: "dialog", 63198 tabIndex: tabIndex != null ? tabIndex : -1, 63199 "aria-modal": modal, 63200 "data-dialog": true, 63201 onKeyDown: onKeyDown, 63202 onBlur: onBlur, 63203 wrapElement: wrapElement 63204 }, htmlProps); 63205 } 63206 }); 63207 var Dialog = createComponent({ 63208 as: "div", 63209 useHook: useDialog, 63210 useCreateElement: function useCreateElement$1(type, props, children) { 63211 false ? 0 : void 0; 63212 return useCreateElement(type, props, children); 63213 } 63214 }); 63215 63216 63217 63218 ;// CONCATENATED MODULE: ./node_modules/reakit/es/Popover/Popover.js 63219 63220 63221 63222 63223 63224 63225 63226 63227 63228 63229 63230 63231 63232 63233 63234 63235 63236 63237 63238 63239 63240 63241 63242 63243 63244 63245 63246 63247 63248 63249 63250 63251 63252 63253 63254 63255 var usePopover = createHook({ 63256 name: "Popover", 63257 compose: useDialog, 63258 keys: POPOVER_KEYS, 63259 useOptions: function useOptions(_ref) { 63260 var _ref$modal = _ref.modal, 63261 modal = _ref$modal === void 0 ? false : _ref$modal, 63262 options = _rollupPluginBabelHelpers_1f0bf8c2_objectWithoutPropertiesLoose(_ref, ["modal"]); 63263 63264 return _objectSpread2({ 63265 modal: modal 63266 }, options); 63267 }, 63268 useProps: function useProps(options, _ref2) { 63269 var htmlRef = _ref2.ref, 63270 htmlStyle = _ref2.style, 63271 htmlProps = _rollupPluginBabelHelpers_1f0bf8c2_objectWithoutPropertiesLoose(_ref2, ["ref", "style"]); 63272 63273 return _objectSpread2({ 63274 ref: useForkRef(options.unstable_popoverRef, htmlRef), 63275 style: _objectSpread2(_objectSpread2({}, options.unstable_popoverStyles), htmlStyle) 63276 }, htmlProps); 63277 } 63278 }); 63279 var Popover_Popover = createComponent({ 63280 as: "div", 63281 useHook: usePopover, 63282 useCreateElement: function useCreateElement$1(type, props, children) { 63283 false ? 0 : void 0; 63284 return useCreateElement(type, props, children); 63285 } 63286 }); 63287 63288 63289 63290 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/flyout/styles.js 63291 63292 63293 /** 63294 * External dependencies 63295 */ 63296 // eslint-disable-next-line no-restricted-imports 63297 63298 /** 63299 * Internal dependencies 63300 */ 63301 63302 63303 63304 63305 const FlyoutContentView = /*#__PURE__*/emotion_styled_base_browser_esm(Popover_Popover, true ? { 63306 target: "e1vtu5161" 63307 } : 0)("z-index:", Flyout, ";box-sizing:border-box;opacity:0;outline:none;position:relative;transform-origin:center center;transition:opacity ", config_values.transitionDurationFastest, " linear;width:100%;&[data-enter]{opacity:1;}&::before,&::after{display:none;}" + ( true ? "" : 0)); 63308 const CardView = /*#__PURE__*/emotion_styled_base_browser_esm(card_component, true ? { 63309 target: "e1vtu5160" 63310 } : 0)(card_body_component.selector, "{max-height:80vh;}" + ( true ? "" : 0)); 63311 63312 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/flyout/flyout-content/component.js 63313 63314 63315 63316 /** 63317 * Internal dependencies 63318 */ 63319 63320 63321 63322 /** 63323 * 63324 * @param {import('../../ui/context').WordPressComponentProps<import('../types').ContentProps, 'div', false>} props 63325 * @param {import('react').ForwardedRef<any>} forwardedRef forwardedRef 63326 */ 63327 63328 function FlyoutContent(props, forwardedRef) { 63329 const { 63330 children, 63331 elevation, 63332 maxWidth, 63333 style = {}, 63334 ...otherProps 63335 } = useContextSystem(props, 'FlyoutContent'); 63336 const { 63337 label, 63338 flyoutState 63339 } = useFlyoutContext(); 63340 63341 if (!flyoutState) { 63342 throw new Error('`FlyoutContent` must only be used inside a `Flyout`.'); 63343 } 63344 63345 const showContent = flyoutState.visible || flyoutState.animating; 63346 return (0,external_wp_element_namespaceObject.createElement)(FlyoutContentView, extends_extends({ 63347 "aria-label": label // maxWidth is applied via inline styles in order to avoid the `React does 63348 // not recognize the maxWidth prop on a DOM element` error that comes from 63349 // passing `maxWidth` as a prop to `FlyoutContentView` 63350 , 63351 style: { 63352 maxWidth, 63353 ...style 63354 } 63355 }, otherProps, flyoutState), showContent && (0,external_wp_element_namespaceObject.createElement)(CardView, { 63356 elevation: elevation, 63357 ref: forwardedRef 63358 }, children)); 63359 } 63360 63361 const ConnectedFlyoutContent = contextConnect(FlyoutContent, 'FlyoutContent'); 63362 /* harmony default export */ var flyout_content_component = (ConnectedFlyoutContent); 63363 63364 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/flyout/flyout/hook.js 63365 /** 63366 * External dependencies 63367 */ 63368 // eslint-disable-next-line no-restricted-imports 63369 63370 /** 63371 * Internal dependencies 63372 */ 63373 63374 63375 /** 63376 * @param {import('../../ui/context').WordPressComponentProps<import('../types').Props, 'div', false>} props 63377 */ 63378 63379 function useFlyout(props) { 63380 const { 63381 animated = true, 63382 animationDuration = 160, 63383 baseId, 63384 elevation = 5, 63385 id, 63386 maxWidth = 360, 63387 placement, 63388 state, 63389 visible, 63390 ...otherProps 63391 } = useContextSystem(props, 'Flyout'); 63392 63393 const _flyoutState = usePopoverState({ 63394 animated: animated ? animationDuration : undefined, 63395 baseId: baseId || id, 63396 placement, 63397 visible, 63398 ...otherProps 63399 }); 63400 63401 const flyoutState = state || _flyoutState; 63402 return { ...otherProps, 63403 elevation, 63404 maxWidth, 63405 flyoutState 63406 }; 63407 } 63408 63409 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/flyout/flyout/component.js 63410 63411 63412 63413 /** 63414 * External dependencies 63415 */ 63416 // eslint-disable-next-line no-restricted-imports 63417 63418 /** 63419 * WordPress dependencies 63420 */ 63421 63422 63423 /** 63424 * Internal dependencies 63425 */ 63426 63427 63428 63429 63430 63431 63432 63433 /** 63434 * 63435 * @param {import('../../ui/context').WordPressComponentProps<import('../types').Props, 'div', false>} props 63436 * @param {import('react').ForwardedRef<any>} forwardedRef 63437 */ 63438 63439 function component_Flyout(props, forwardedRef) { 63440 const { 63441 children, 63442 elevation, 63443 label, 63444 maxWidth, 63445 onVisibleChange, 63446 trigger, 63447 flyoutState, 63448 ...otherProps 63449 } = useFlyout(props); 63450 const resizeListener = useFlyoutResizeUpdater({ 63451 onResize: flyoutState.unstable_update 63452 }); 63453 const uniqueId = `flyout-$flyoutState.baseId}`; 63454 const labelId = label || uniqueId; 63455 const contextProps = (0,external_wp_element_namespaceObject.useMemo)(() => ({ 63456 label: labelId, 63457 flyoutState 63458 }), [labelId, flyoutState]); 63459 const triggerContent = (0,external_wp_element_namespaceObject.useCallback)(triggerProps => { 63460 return (0,external_wp_element_namespaceObject.cloneElement)(trigger, triggerProps); 63461 }, [trigger]); 63462 use_update_effect(() => { 63463 onVisibleChange === null || onVisibleChange === void 0 ? void 0 : onVisibleChange(flyoutState.visible); 63464 }, [flyoutState.visible]); 63465 return (0,external_wp_element_namespaceObject.createElement)(FlyoutContext.Provider, { 63466 value: contextProps 63467 }, trigger && (0,external_wp_element_namespaceObject.createElement)(PopoverDisclosure, extends_extends({}, flyoutState, { 63468 ref: trigger.ref 63469 }, trigger.props), triggerContent), (0,external_wp_element_namespaceObject.createElement)(Portal, null, (0,external_wp_element_namespaceObject.createElement)(flyout_content_component, extends_extends({ 63470 ref: forwardedRef 63471 }, otherProps, { 63472 elevation: elevation, 63473 maxWidth: maxWidth 63474 }), resizeListener, children))); 63475 } 63476 /** 63477 * `Flyout` is a component to render a floating content modal. 63478 * It is similar in purpose to a tooltip, but renders content of any sort, 63479 * not only simple text. 63480 * 63481 * @example 63482 * ```jsx 63483 * import { Button, __experimentalFlyout as Flyout, __experimentalText as } from '@wordpress/components'; 63484 * 63485 * function Example() { 63486 * return ( 63487 * <Flyout trigger={ <Button>Show/Hide content</Button> }> 63488 * <Text>Code is Poetry</Text> 63489 * </Flyout> 63490 * ); 63491 * } 63492 * ``` 63493 */ 63494 63495 63496 const ConnectedFlyout = contextConnect(component_Flyout, 'Flyout'); 63497 /* harmony default export */ var flyout_component = (ConnectedFlyout); 63498 63499 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/focal-point-picker/styles/focal-point-picker-style.js 63500 63501 63502 function focal_point_picker_style_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } 63503 63504 /** 63505 * External dependencies 63506 */ 63507 63508 /** 63509 * Internal dependencies 63510 */ 63511 63512 63513 63514 const MediaWrapper = emotion_styled_base_browser_esm("div", true ? { 63515 target: "e11wezi78" 63516 } : 0)( true ? { 63517 name: "1g31405", 63518 styles: "background-color:transparent;box-sizing:border-box;text-align:center;width:100%" 63519 } : 0); 63520 const MediaContainer = emotion_styled_base_browser_esm("div", true ? { 63521 target: "e11wezi77" 63522 } : 0)( true ? { 63523 name: "v0nrlz", 63524 styles: "align-items:center;box-sizing:border-box;box-shadow:0 0 0 1px rgba( 0, 0, 0, 0.2 );cursor:pointer;display:inline-flex;justify-content:center;margin:auto;position:relative;height:100%;img,video{box-sizing:border-box;display:block;height:auto;margin:0;max-height:100%;max-width:100%;pointer-events:none;user-select:none;width:auto;}" 63525 } : 0); 63526 const MediaPlaceholder = emotion_styled_base_browser_esm("div", true ? { 63527 target: "e11wezi76" 63528 } : 0)("background:", COLORS.lightGray[300], ";box-sizing:border-box;height:170px;max-width:280px;min-width:200px;width:100%;" + ( true ? "" : 0)); 63529 const focal_point_picker_style_UnitControl = /*#__PURE__*/emotion_styled_base_browser_esm(unit_control, true ? { 63530 target: "e11wezi75" 63531 } : 0)( true ? { 63532 name: "1pzk433", 63533 styles: "width:100px" 63534 } : 0); 63535 const ControlWrapper = /*#__PURE__*/emotion_styled_base_browser_esm(flex_component, true ? { 63536 target: "e11wezi74" 63537 } : 0)( true ? { 63538 name: "ox4xcy", 63539 styles: "max-width:320px;padding:1em 0" 63540 } : 0); 63541 const GridView = emotion_styled_base_browser_esm("div", true ? { 63542 target: "e11wezi73" 63543 } : 0)("box-sizing:border-box;left:50%;opacity:0;overflow:hidden;pointer-events:none;position:absolute;top:50%;transform:translate3d( -50%, -50%, 0 );transition:opacity 120ms linear;z-index:1;", _ref => { 63544 let { 63545 isActive 63546 } = _ref; 63547 return isActive && ` 63548 opacity: 1; 63549 `; 63550 }, ";" + ( true ? "" : 0)); 63551 const GridLine = emotion_styled_base_browser_esm("div", true ? { 63552 target: "e11wezi72" 63553 } : 0)( true ? { 63554 name: "1sy4ch9", 63555 styles: "box-sizing:border-box;background:white;box-shadow:0 0 2px rgba( 0, 0, 0, 0.6 );position:absolute;opacity:0.4;transform:translateZ( 0 )" 63556 } : 0); 63557 const GridLineX = /*#__PURE__*/emotion_styled_base_browser_esm(GridLine, true ? { 63558 target: "e11wezi71" 63559 } : 0)( true ? { 63560 name: "1qp910y", 63561 styles: "height:1px;left:0;right:0" 63562 } : 0); 63563 const GridLineY = /*#__PURE__*/emotion_styled_base_browser_esm(GridLine, true ? { 63564 target: "e11wezi70" 63565 } : 0)( true ? { 63566 name: "1oz3zka", 63567 styles: "width:1px;top:0;bottom:0" 63568 } : 0); 63569 63570 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/focal-point-picker/utils.js 63571 const INITIAL_BOUNDS = { 63572 top: 0, 63573 left: 0, 63574 bottom: 0, 63575 right: 0, 63576 width: 0, 63577 height: 0 63578 }; 63579 const VIDEO_EXTENSIONS = ['avi', 'mpg', 'mpeg', 'mov', 'mp4', 'm4v', 'ogg', 'ogv', 'webm', 'wmv']; 63580 /** 63581 * Gets the extension of a file name. 63582 * 63583 * @param {string} filename The file name. 63584 * @return {string} The extension of the file name. 63585 */ 63586 63587 function getExtension() { 63588 let filename = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : ''; 63589 const parts = filename.split('.'); 63590 return parts[parts.length - 1]; 63591 } 63592 /** 63593 * Checks if a file is a video. 63594 * 63595 * @param {string} filename The file name. 63596 * @return {boolean} Whether the file is a video. 63597 */ 63598 63599 function isVideoType() { 63600 let filename = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : ''; 63601 if (!filename) return false; 63602 return VIDEO_EXTENSIONS.includes(getExtension(filename)); 63603 } 63604 /** 63605 * Transforms a fraction value to a percentage value. 63606 * 63607 * @param {number} fraction The fraction value. 63608 * @return {number} A percentage value. 63609 */ 63610 63611 function fractionToPercentage(fraction) { 63612 return Math.round(fraction * 100); 63613 } 63614 63615 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/focal-point-picker/controls.js 63616 63617 63618 63619 /** 63620 * External dependencies 63621 */ 63622 63623 /** 63624 * WordPress dependencies 63625 */ 63626 63627 63628 /** 63629 * Internal dependencies 63630 */ 63631 63632 63633 63634 const TEXTCONTROL_MIN = 0; 63635 const TEXTCONTROL_MAX = 100; 63636 function FocalPointPickerControls(_ref) { 63637 let { 63638 onChange = external_lodash_namespaceObject.noop, 63639 percentages = { 63640 x: 0.5, 63641 y: 0.5 63642 } 63643 } = _ref; 63644 const valueX = fractionToPercentage(percentages.x); 63645 const valueY = fractionToPercentage(percentages.y); 63646 63647 const handleChange = (value, axis) => { 63648 const num = parseInt(value, 10); 63649 63650 if (!isNaN(num)) { 63651 onChange({ ...percentages, 63652 [axis]: num / 100 63653 }); 63654 } 63655 }; 63656 63657 return (0,external_wp_element_namespaceObject.createElement)(ControlWrapper, { 63658 className: "focal-point-picker__controls" 63659 }, (0,external_wp_element_namespaceObject.createElement)(controls_UnitControl, { 63660 label: (0,external_wp_i18n_namespaceObject.__)('Left'), 63661 value: [valueX, '%'].join(''), 63662 onChange: next => handleChange(next, 'x'), 63663 dragDirection: "e" 63664 }), (0,external_wp_element_namespaceObject.createElement)(controls_UnitControl, { 63665 label: (0,external_wp_i18n_namespaceObject.__)('Top'), 63666 value: [valueY, '%'].join(''), 63667 onChange: next => handleChange(next, 'y'), 63668 dragDirection: "s" 63669 })); 63670 } 63671 63672 function controls_UnitControl(props) { 63673 return (0,external_wp_element_namespaceObject.createElement)(focal_point_picker_style_UnitControl, extends_extends({ 63674 className: "focal-point-picker__controls-position-unit-control", 63675 labelPosition: "top", 63676 max: TEXTCONTROL_MAX, 63677 min: TEXTCONTROL_MIN, 63678 units: [{ 63679 value: '%', 63680 label: '%' 63681 }] 63682 }, props)); 63683 } 63684 63685 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/focal-point-picker/styles/focal-point-style.js 63686 63687 63688 function focal_point_style_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } 63689 63690 /** 63691 * External dependencies 63692 */ 63693 63694 /** 63695 * WordPress dependencies 63696 */ 63697 63698 /** 63699 * Internal dependencies 63700 */ 63701 63702 63703 const FocalPointWrapper = emotion_styled_base_browser_esm("div", true ? { 63704 target: "eas61re3" 63705 } : 0)("background-color:transparent;box-sizing:border-box;cursor:grab;height:30px;margin:-15px 0 0 -15px;opacity:0.8;position:absolute;user-select:none;width:30px;will-change:transform;z-index:10000;", _ref => { 63706 let { 63707 isDragging 63708 } = _ref; 63709 return isDragging && 'cursor: grabbing;'; 63710 }, ";" + ( true ? "" : 0)); 63711 const PointerIconSVG = /*#__PURE__*/emotion_styled_base_browser_esm(external_wp_primitives_namespaceObject.SVG, true ? { 63712 target: "eas61re2" 63713 } : 0)( true ? { 63714 name: "qkx60y", 63715 styles: "display:block;height:100%;left:0;position:absolute;top:0;width:100%" 63716 } : 0); 63717 const PointerIconPathOutline = /*#__PURE__*/emotion_styled_base_browser_esm(external_wp_primitives_namespaceObject.Path, true ? { 63718 target: "eas61re1" 63719 } : 0)( true ? { 63720 name: "1b3qpiw", 63721 styles: "fill:white" 63722 } : 0); 63723 const PointerIconPathFill = /*#__PURE__*/emotion_styled_base_browser_esm(external_wp_primitives_namespaceObject.Path, true ? { 63724 target: "eas61re0" 63725 } : 0)("fill:", COLORS.blue.wordpress[700], ";fill:", COLORS.ui.theme, ";" + ( true ? "" : 0)); 63726 63727 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/focal-point-picker/focal-point.js 63728 63729 63730 63731 /** 63732 * Internal dependencies 63733 */ 63734 63735 /** 63736 * External dependencies 63737 */ 63738 63739 63740 function FocalPoint(_ref) { 63741 let { 63742 coordinates = { 63743 left: '50%', 63744 top: '50%' 63745 }, 63746 ...props 63747 } = _ref; 63748 const classes = classnames_default()('components-focal-point-picker__icon_container'); 63749 const style = { 63750 left: coordinates.left, 63751 top: coordinates.top 63752 }; 63753 return (0,external_wp_element_namespaceObject.createElement)(FocalPointWrapper, extends_extends({}, props, { 63754 className: classes, 63755 style: style 63756 }), (0,external_wp_element_namespaceObject.createElement)(PointerIconSVG, { 63757 className: "components-focal-point-picker__icon", 63758 xmlns: "http://www.w3.org/2000/svg", 63759 viewBox: "0 0 30 30" 63760 }, (0,external_wp_element_namespaceObject.createElement)(PointerIconPathOutline, { 63761 className: "components-focal-point-picker__icon-outline", 63762 d: "M15 1C7.3 1 1 7.3 1 15s6.3 14 14 14 14-6.3 14-14S22.7 1 15 1zm0 22c-4.4 0-8-3.6-8-8s3.6-8 8-8 8 3.6 8 8-3.6 8-8 8z" 63763 }), (0,external_wp_element_namespaceObject.createElement)(PointerIconPathFill, { 63764 className: "components-focal-point-picker__icon-fill", 63765 d: "M15 3C8.4 3 3 8.4 3 15s5.4 12 12 12 12-5.4 12-12S21.6 3 15 3zm0 22C9.5 25 5 20.5 5 15S9.5 5 15 5s10 4.5 10 10-4.5 10-10 10z" 63766 }))); 63767 } 63768 63769 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/focal-point-picker/grid.js 63770 63771 63772 63773 /** 63774 * WordPress dependencies 63775 */ 63776 63777 /** 63778 * Internal dependencies 63779 */ 63780 63781 63782 63783 const { 63784 clearTimeout: grid_clearTimeout, 63785 setTimeout: grid_setTimeout 63786 } = typeof window !== 'undefined' ? window : {}; 63787 function FocalPointPickerGrid(_ref) { 63788 let { 63789 bounds = {}, 63790 value, 63791 ...props 63792 } = _ref; 63793 const animationProps = useRevealAnimation(value); 63794 const style = { 63795 width: bounds.width, 63796 height: bounds.height 63797 }; 63798 return (0,external_wp_element_namespaceObject.createElement)(GridView, extends_extends({}, props, animationProps, { 63799 className: "components-focal-point-picker__grid", 63800 style: style 63801 }), (0,external_wp_element_namespaceObject.createElement)(GridLineX, { 63802 style: { 63803 top: '33%' 63804 } 63805 }), (0,external_wp_element_namespaceObject.createElement)(GridLineX, { 63806 style: { 63807 top: '66%' 63808 } 63809 }), (0,external_wp_element_namespaceObject.createElement)(GridLineY, { 63810 style: { 63811 left: '33%' 63812 } 63813 }), (0,external_wp_element_namespaceObject.createElement)(GridLineY, { 63814 style: { 63815 left: '66%' 63816 } 63817 })); 63818 } 63819 /** 63820 * Custom hook that renders the "flash" animation whenever the value changes. 63821 * 63822 * @param {string} value Value of (box) side. 63823 */ 63824 63825 function useRevealAnimation(value) { 63826 const [isActive, setIsActive] = (0,external_wp_element_namespaceObject.useState)(false); 63827 use_update_effect(() => { 63828 setIsActive(true); 63829 const timeout = grid_setTimeout(() => { 63830 setIsActive(false); 63831 }, 600); 63832 return () => grid_clearTimeout(timeout); 63833 }, [value]); 63834 return { 63835 isActive 63836 }; 63837 } 63838 63839 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/focal-point-picker/media.js 63840 63841 63842 63843 /** 63844 * External dependencies 63845 */ 63846 63847 /** 63848 * WordPress dependencies 63849 */ 63850 63851 63852 /** 63853 * Internal dependencies 63854 */ 63855 63856 63857 63858 function media_Media(_ref) { 63859 let { 63860 alt, 63861 autoPlay, 63862 src, 63863 onLoad = external_lodash_namespaceObject.noop, 63864 mediaRef, 63865 // Exposing muted prop for test rendering purposes 63866 // https://github.com/testing-library/react-testing-library/issues/470 63867 muted = true, 63868 ...props 63869 } = _ref; 63870 63871 if (!src) { 63872 return (0,external_wp_element_namespaceObject.createElement)(MediaPlaceholderElement, { 63873 className: "components-focal-point-picker__media components-focal-point-picker__media--placeholder", 63874 onLoad: onLoad, 63875 mediaRef: mediaRef 63876 }); 63877 } 63878 63879 const isVideo = isVideoType(src); 63880 return isVideo ? (0,external_wp_element_namespaceObject.createElement)("video", extends_extends({}, props, { 63881 autoPlay: autoPlay, 63882 className: "components-focal-point-picker__media components-focal-point-picker__media--video", 63883 loop: true, 63884 muted: muted, 63885 onLoadedData: onLoad, 63886 ref: mediaRef, 63887 src: src 63888 })) : (0,external_wp_element_namespaceObject.createElement)("img", extends_extends({}, props, { 63889 alt: alt, 63890 className: "components-focal-point-picker__media components-focal-point-picker__media--image", 63891 onLoad: onLoad, 63892 ref: mediaRef, 63893 src: src 63894 })); 63895 } 63896 63897 function MediaPlaceholderElement(_ref2) { 63898 let { 63899 mediaRef, 63900 onLoad = external_lodash_namespaceObject.noop, 63901 ...props 63902 } = _ref2; 63903 const onLoadRef = (0,external_wp_element_namespaceObject.useRef)(onLoad); 63904 /** 63905 * This async callback mimics the onLoad (img) / onLoadedData (video) callback 63906 * for media elements. It is used in the main <FocalPointPicker /> component 63907 * to calculate the dimensions + boundaries for positioning. 63908 */ 63909 63910 (0,external_wp_element_namespaceObject.useLayoutEffect)(() => { 63911 window.requestAnimationFrame(() => { 63912 onLoadRef.current(); 63913 }); 63914 }, []); 63915 return (0,external_wp_element_namespaceObject.createElement)(MediaPlaceholder, extends_extends({ 63916 ref: mediaRef 63917 }, props)); 63918 } 63919 63920 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/focal-point-picker/index.js 63921 63922 63923 /** 63924 * External dependencies 63925 */ 63926 63927 /** 63928 * WordPress dependencies 63929 */ 63930 63931 63932 63933 63934 63935 /** 63936 * Internal dependencies 63937 */ 63938 63939 63940 63941 63942 63943 63944 63945 63946 63947 class FocalPointPicker extends external_wp_element_namespaceObject.Component { 63948 constructor(props) { 63949 super(...arguments); 63950 this.state = { 63951 isDragging: false, 63952 bounds: INITIAL_BOUNDS, 63953 percentages: props.value 63954 }; 63955 this.containerRef = (0,external_wp_element_namespaceObject.createRef)(); 63956 this.mediaRef = (0,external_wp_element_namespaceObject.createRef)(); 63957 this.onMouseDown = this.startDrag.bind(this); 63958 this.onMouseUp = this.stopDrag.bind(this); 63959 this.onKeyDown = this.onKeyDown.bind(this); 63960 this.onMouseMove = this.doDrag.bind(this); 63961 63962 this.ifDraggingStop = () => { 63963 if (this.state.isDragging) { 63964 this.stopDrag(); 63965 } 63966 }; 63967 63968 this.onChangeAtControls = value => { 63969 this.updateValue(value, () => { 63970 this.props.onChange(this.state.percentages); 63971 }); 63972 }; 63973 63974 this.updateBounds = this.updateBounds.bind(this); 63975 this.updateValue = this.updateValue.bind(this); 63976 } 63977 63978 componentDidMount() { 63979 const { 63980 defaultView 63981 } = this.containerRef.current.ownerDocument; 63982 defaultView.addEventListener('resize', this.updateBounds); 63983 /* 63984 * Set initial bound values. 63985 * 63986 * This is necessary for Safari: 63987 * https://github.com/WordPress/gutenberg/issues/25814 63988 */ 63989 63990 this.updateBounds(); 63991 } 63992 63993 componentDidUpdate(prevProps) { 63994 if (prevProps.url !== this.props.url) { 63995 this.ifDraggingStop(); 63996 } 63997 /* 63998 * Handles cases where the incoming value changes. 63999 * An example is the values resetting based on an UNDO action. 64000 */ 64001 64002 64003 const { 64004 isDragging, 64005 percentages: { 64006 x, 64007 y 64008 } 64009 } = this.state; 64010 const { 64011 value 64012 } = this.props; 64013 64014 if (!isDragging && (value.x !== x || value.y !== y)) { 64015 this.setState({ 64016 percentages: this.props.value 64017 }); 64018 } 64019 } 64020 64021 componentWillUnmount() { 64022 const { 64023 defaultView 64024 } = this.containerRef.current.ownerDocument; 64025 defaultView.removeEventListener('resize', this.updateBounds); 64026 this.ifDraggingStop(); 64027 } 64028 64029 calculateBounds() { 64030 const bounds = INITIAL_BOUNDS; 64031 64032 if (!this.mediaRef.current) { 64033 return bounds; 64034 } // Prevent division by zero when updateBounds runs in componentDidMount 64035 64036 64037 if (this.mediaRef.current.clientWidth === 0 || this.mediaRef.current.clientHeight === 0) { 64038 return bounds; 64039 } 64040 64041 const dimensions = { 64042 width: this.mediaRef.current.clientWidth, 64043 height: this.mediaRef.current.clientHeight 64044 }; 64045 const pickerDimensions = this.pickerDimensions(); 64046 const widthRatio = pickerDimensions.width / dimensions.width; 64047 const heightRatio = pickerDimensions.height / dimensions.height; 64048 64049 if (heightRatio >= widthRatio) { 64050 bounds.width = bounds.right = pickerDimensions.width; 64051 bounds.height = dimensions.height * widthRatio; 64052 bounds.top = (pickerDimensions.height - bounds.height) / 2; 64053 bounds.bottom = bounds.top + bounds.height; 64054 } else { 64055 bounds.height = bounds.bottom = pickerDimensions.height; 64056 bounds.width = dimensions.width * heightRatio; 64057 bounds.left = (pickerDimensions.width - bounds.width) / 2; 64058 bounds.right = bounds.left + bounds.width; 64059 } 64060 64061 return bounds; 64062 } 64063 64064 updateValue() { 64065 var _this$props$resolvePo, _this$props$resolvePo2, _this$props; 64066 64067 let nextValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; 64068 let callback = arguments.length > 1 ? arguments[1] : undefined; 64069 const resolvedValue = (_this$props$resolvePo = (_this$props$resolvePo2 = (_this$props = this.props).resolvePoint) === null || _this$props$resolvePo2 === void 0 ? void 0 : _this$props$resolvePo2.call(_this$props, nextValue)) !== null && _this$props$resolvePo !== void 0 ? _this$props$resolvePo : nextValue; 64070 const { 64071 x, 64072 y 64073 } = resolvedValue; 64074 const nextPercentage = { 64075 x: parseFloat(x).toFixed(2), 64076 y: parseFloat(y).toFixed(2) 64077 }; 64078 this.setState({ 64079 percentages: nextPercentage 64080 }, callback); 64081 } 64082 64083 updateBounds() { 64084 this.setState({ 64085 bounds: this.calculateBounds() 64086 }); 64087 } 64088 64089 startDrag(event) { 64090 var _this$props$onDragSta, _this$props2; 64091 64092 event.persist(); 64093 this.containerRef.current.focus(); 64094 this.setState({ 64095 isDragging: true 64096 }); 64097 const { 64098 ownerDocument 64099 } = this.containerRef.current; 64100 ownerDocument.addEventListener('mouseup', this.onMouseUp); 64101 ownerDocument.addEventListener('mousemove', this.onMouseMove); 64102 const value = this.getValueFromPoint({ 64103 x: event.pageX, 64104 y: event.pageY 64105 }, event.shiftKey); 64106 this.updateValue(value); 64107 (_this$props$onDragSta = (_this$props2 = this.props).onDragStart) === null || _this$props$onDragSta === void 0 ? void 0 : _this$props$onDragSta.call(_this$props2, value, event); 64108 } 64109 64110 stopDrag(event) { 64111 var _this$props$onDragEnd, _this$props3; 64112 64113 const { 64114 ownerDocument 64115 } = this.containerRef.current; 64116 ownerDocument.removeEventListener('mouseup', this.onMouseUp); 64117 ownerDocument.removeEventListener('mousemove', this.onMouseMove); 64118 this.setState({ 64119 isDragging: false 64120 }, () => { 64121 this.props.onChange(this.state.percentages); 64122 }); 64123 (_this$props$onDragEnd = (_this$props3 = this.props).onDragEnd) === null || _this$props$onDragEnd === void 0 ? void 0 : _this$props$onDragEnd.call(_this$props3, event); 64124 } 64125 64126 onKeyDown(event) { 64127 const { 64128 keyCode, 64129 shiftKey 64130 } = event; 64131 if (![external_wp_keycodes_namespaceObject.UP, external_wp_keycodes_namespaceObject.DOWN, external_wp_keycodes_namespaceObject.LEFT, external_wp_keycodes_namespaceObject.RIGHT].includes(keyCode)) return; 64132 event.preventDefault(); 64133 const next = { ...this.state.percentages 64134 }; 64135 const step = shiftKey ? 0.1 : 0.01; 64136 const delta = keyCode === external_wp_keycodes_namespaceObject.UP || keyCode === external_wp_keycodes_namespaceObject.LEFT ? -1 * step : step; 64137 const axis = keyCode === external_wp_keycodes_namespaceObject.UP || keyCode === external_wp_keycodes_namespaceObject.DOWN ? 'y' : 'x'; 64138 const value = parseFloat(next[axis]) + delta; 64139 next[axis] = roundClamp(value, 0, 1, step); 64140 this.updateValue(next, () => { 64141 this.props.onChange(this.state.percentages); 64142 }); 64143 } 64144 64145 doDrag(event) { 64146 var _this$props$onDrag, _this$props4; 64147 64148 // Prevents text-selection when dragging. 64149 event.preventDefault(); 64150 const value = this.getValueFromPoint({ 64151 x: event.pageX, 64152 y: event.pageY 64153 }, event.shiftKey); 64154 this.updateValue(value); 64155 (_this$props$onDrag = (_this$props4 = this.props).onDrag) === null || _this$props$onDrag === void 0 ? void 0 : _this$props$onDrag.call(_this$props4, value, event); 64156 } 64157 64158 getValueFromPoint(point, byTenths) { 64159 const { 64160 bounds 64161 } = this.state; 64162 const pickerDimensions = this.pickerDimensions(); 64163 const relativePoint = { 64164 left: point.x - pickerDimensions.left, 64165 top: point.y - pickerDimensions.top 64166 }; 64167 const left = Math.max(bounds.left, Math.min(relativePoint.left, bounds.right)); 64168 const top = Math.max(bounds.top, Math.min(relativePoint.top, bounds.bottom)); 64169 let nextX = (left - bounds.left) / (pickerDimensions.width - bounds.left * 2); 64170 let nextY = (top - bounds.top) / (pickerDimensions.height - bounds.top * 2); // Enables holding shift to jump values by 10% 64171 64172 const step = byTenths ? 0.1 : 0.01; 64173 nextX = roundClamp(nextX, 0, 1, step); 64174 nextY = roundClamp(nextY, 0, 1, step); 64175 return { 64176 x: nextX, 64177 y: nextY 64178 }; 64179 } 64180 64181 pickerDimensions() { 64182 const containerNode = this.containerRef.current; 64183 64184 if (!containerNode) { 64185 return { 64186 width: 0, 64187 height: 0, 64188 left: 0, 64189 top: 0 64190 }; 64191 } 64192 64193 const { 64194 clientHeight, 64195 clientWidth 64196 } = containerNode; 64197 const { 64198 top, 64199 left 64200 } = containerNode.getBoundingClientRect(); 64201 return { 64202 width: clientWidth, 64203 height: clientHeight, 64204 top: top + document.body.scrollTop, 64205 left 64206 }; 64207 } 64208 64209 iconCoordinates() { 64210 const { 64211 bounds, 64212 percentages: { 64213 x, 64214 y 64215 } 64216 } = this.state; 64217 64218 if (bounds.left === undefined || bounds.top === undefined) { 64219 return { 64220 left: '50%', 64221 top: '50%' 64222 }; 64223 } 64224 64225 const { 64226 width, 64227 height 64228 } = this.pickerDimensions(); 64229 return { 64230 left: x * (width - bounds.left * 2) + bounds.left, 64231 top: y * (height - bounds.top * 2) + bounds.top 64232 }; 64233 } 64234 64235 render() { 64236 const { 64237 autoPlay, 64238 className, 64239 help, 64240 instanceId, 64241 label, 64242 url 64243 } = this.props; 64244 const { 64245 bounds, 64246 isDragging, 64247 percentages 64248 } = this.state; 64249 const iconCoordinates = this.iconCoordinates(); 64250 const classes = classnames_default()('components-focal-point-picker-control', className); 64251 const id = `inspector-focal-point-picker-control-$instanceId}`; 64252 return (0,external_wp_element_namespaceObject.createElement)(base_control, { 64253 label: label, 64254 id: id, 64255 help: help, 64256 className: classes 64257 }, (0,external_wp_element_namespaceObject.createElement)(MediaWrapper, { 64258 className: "components-focal-point-picker-wrapper" 64259 }, (0,external_wp_element_namespaceObject.createElement)(MediaContainer, { 64260 className: "components-focal-point-picker", 64261 onKeyDown: this.onKeyDown, 64262 onMouseDown: this.onMouseDown, 64263 onBlur: this.ifDraggingStop, 64264 ref: this.containerRef, 64265 role: "button", 64266 tabIndex: "-1" 64267 }, (0,external_wp_element_namespaceObject.createElement)(FocalPointPickerGrid, { 64268 bounds: bounds, 64269 value: percentages.x + percentages.y 64270 }), (0,external_wp_element_namespaceObject.createElement)(media_Media, { 64271 alt: (0,external_wp_i18n_namespaceObject.__)('Media preview'), 64272 autoPlay: autoPlay, 64273 mediaRef: this.mediaRef, 64274 onLoad: this.updateBounds, 64275 src: url 64276 }), (0,external_wp_element_namespaceObject.createElement)(FocalPoint, { 64277 coordinates: iconCoordinates, 64278 isDragging: isDragging 64279 }))), (0,external_wp_element_namespaceObject.createElement)(FocalPointPickerControls, { 64280 percentages: percentages, 64281 onChange: this.onChangeAtControls 64282 })); 64283 } 64284 64285 } 64286 FocalPointPicker.defaultProps = { 64287 autoPlay: true, 64288 value: { 64289 x: 0.5, 64290 y: 0.5 64291 }, 64292 url: null 64293 }; 64294 /* harmony default export */ var focal_point_picker = ((0,external_wp_compose_namespaceObject.withInstanceId)(FocalPointPicker)); 64295 64296 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/focusable-iframe/index.js 64297 64298 64299 64300 /** 64301 * WordPress dependencies 64302 */ 64303 64304 64305 function FocusableIframe(_ref) { 64306 let { 64307 iframeRef, 64308 ...props 64309 } = _ref; 64310 const ref = (0,external_wp_compose_namespaceObject.useMergeRefs)([iframeRef, (0,external_wp_compose_namespaceObject.useFocusableIframe)()]); 64311 external_wp_deprecated_default()('wp.components.FocusableIframe', { 64312 since: '5.9', 64313 alternative: 'wp.compose.useFocusableIframe' 64314 }); // Disable reason: The rendered iframe is a pass-through component, 64315 // assigning props inherited from the rendering parent. It's the 64316 // responsibility of the parent to assign a title. 64317 // eslint-disable-next-line jsx-a11y/iframe-has-title 64318 64319 return (0,external_wp_element_namespaceObject.createElement)("iframe", extends_extends({ 64320 ref: ref 64321 }, props)); 64322 } 64323 64324 ;// CONCATENATED MODULE: ./node_modules/reakit/es/Radio/RadioState.js 64325 64326 64327 64328 64329 64330 64331 64332 64333 64334 64335 64336 64337 64338 function useRadioState(initialState) { 64339 if (initialState === void 0) { 64340 initialState = {}; 64341 } 64342 64343 var _useSealedState = useSealedState(initialState), 64344 initialValue = _useSealedState.state, 64345 _useSealedState$loop = _useSealedState.loop, 64346 loop = _useSealedState$loop === void 0 ? true : _useSealedState$loop, 64347 sealed = _rollupPluginBabelHelpers_1f0bf8c2_objectWithoutPropertiesLoose(_useSealedState, ["state", "loop"]); 64348 64349 var _React$useState = (0,external_React_.useState)(initialValue), 64350 state = _React$useState[0], 64351 setState = _React$useState[1]; 64352 64353 var composite = useCompositeState(_objectSpread2(_objectSpread2({}, sealed), {}, { 64354 loop: loop 64355 })); 64356 return _objectSpread2(_objectSpread2({}, composite), {}, { 64357 state: state, 64358 setState: setState 64359 }); 64360 } 64361 64362 64363 64364 ;// CONCATENATED MODULE: ./node_modules/reakit/es/__keys-d251e56b.js 64365 // Automatically generated 64366 var RADIO_STATE_KEYS = ["baseId", "unstable_idCountRef", "unstable_virtual", "rtl", "orientation", "items", "groups", "currentId", "loop", "wrap", "shift", "unstable_moves", "unstable_hasActiveWidget", "unstable_includesBaseElement", "state", "setBaseId", "registerItem", "unregisterItem", "registerGroup", "unregisterGroup", "move", "next", "previous", "up", "down", "first", "last", "sort", "unstable_setVirtual", "setRTL", "setOrientation", "setCurrentId", "setLoop", "setWrap", "setShift", "reset", "unstable_setIncludesBaseElement", "unstable_setHasActiveWidget", "setState"]; 64367 var RADIO_KEYS = [].concat(RADIO_STATE_KEYS, ["value", "checked", "unstable_checkOnFocus"]); 64368 var RADIO_GROUP_KEYS = RADIO_STATE_KEYS; 64369 64370 64371 64372 ;// CONCATENATED MODULE: ./node_modules/reakit/es/Radio/RadioGroup.js 64373 64374 64375 64376 64377 64378 64379 64380 64381 64382 64383 64384 64385 64386 64387 64388 64389 64390 64391 64392 64393 64394 64395 64396 64397 64398 64399 64400 64401 64402 64403 64404 var useRadioGroup = createHook({ 64405 name: "RadioGroup", 64406 compose: useComposite, 64407 keys: RADIO_GROUP_KEYS, 64408 useProps: function useProps(_, htmlProps) { 64409 return _objectSpread2({ 64410 role: "radiogroup" 64411 }, htmlProps); 64412 } 64413 }); 64414 var RadioGroup = createComponent({ 64415 as: "div", 64416 useHook: useRadioGroup, 64417 useCreateElement: function useCreateElement$1(type, props, children) { 64418 false ? 0 : void 0; 64419 return useCreateElement(type, props, children); 64420 } 64421 }); 64422 64423 64424 64425 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/toggle-group-control/toggle-group-control/styles.js 64426 64427 64428 function toggle_group_control_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } 64429 64430 /** 64431 * External dependencies 64432 */ 64433 64434 64435 /** 64436 * Internal dependencies 64437 */ 64438 64439 const ToggleGroupControl = /*#__PURE__*/emotion_react_browser_esm_css("background:", COLORS.ui.background, ";border:1px solid;border-color:", COLORS.ui.border, ";border-radius:", config_values.controlBorderRadius, ";display:inline-flex;min-height:", config_values.controlHeight, ";min-width:0;padding:2px;position:relative;transition:transform ", config_values.transitionDurationFastest, " linear;", reduceMotion('transition'), " &:hover{border-color:", COLORS.ui.borderHover, ";}&:focus-within{border-color:", COLORS.ui.borderFocus, ";box-shadow:", config_values.controlBoxShadowFocus, ";outline:none;z-index:1;}" + ( true ? "" : 0), true ? "" : 0); 64440 const toggle_group_control_styles_block = true ? { 64441 name: "7whenc", 64442 styles: "display:flex;width:100%" 64443 } : 0; 64444 const BackdropView = emotion_styled_base_browser_esm("div", true ? { 64445 target: "eakva830" 64446 } : 0)("background:", COLORS.gray[900], ";border-radius:", config_values.controlBorderRadius, ";box-shadow:", config_values.toggleGroupControlBackdropBoxShadow, ";left:0;position:absolute;top:2px;bottom:2px;transition:transform ", config_values.transitionDurationFast, " ease;", reduceMotion('transition'), " z-index:1;" + ( true ? "" : 0)); 64447 64448 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/toggle-group-control/toggle-group-control/toggle-group-control-backdrop.js 64449 64450 64451 /** 64452 * WordPress dependencies 64453 */ 64454 64455 /** 64456 * Internal dependencies 64457 */ 64458 64459 64460 64461 function ToggleGroupControlBackdrop(_ref) { 64462 let { 64463 containerRef, 64464 containerWidth, 64465 isAdaptiveWidth, 64466 state 64467 } = _ref; 64468 const [left, setLeft] = (0,external_wp_element_namespaceObject.useState)(0); 64469 const [width, setWidth] = (0,external_wp_element_namespaceObject.useState)(0); 64470 const [canAnimate, setCanAnimate] = (0,external_wp_element_namespaceObject.useState)(false); 64471 const [renderBackdrop, setRenderBackdrop] = (0,external_wp_element_namespaceObject.useState)(false); 64472 (0,external_wp_element_namespaceObject.useEffect)(() => { 64473 const containerNode = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current; 64474 if (!containerNode) return; 64475 /** 64476 * Workaround for Reakit 64477 */ 64478 64479 const targetNode = containerNode.querySelector(`[data-value="$state}"]`); 64480 setRenderBackdrop(!!targetNode); 64481 64482 if (!targetNode) { 64483 return; 64484 } 64485 64486 const computeDimensions = () => { 64487 const { 64488 width: offsetWidth, 64489 x 64490 } = targetNode.getBoundingClientRect(); 64491 const { 64492 x: parentX 64493 } = containerNode.getBoundingClientRect(); 64494 const borderWidth = 1; 64495 const offsetLeft = x - parentX - borderWidth; 64496 setLeft(offsetLeft); 64497 setWidth(offsetWidth); 64498 }; // Fix to make the component appear as expected inside popovers. 64499 // If the targetNode width is 0 it means the element was not yet rendered we should allow 64500 // some time for the render to happen. 64501 // requestAnimationFrame instead of setTimeout with a small time does not seems to work. 64502 64503 64504 const dimensionsRequestId = window.setTimeout(computeDimensions, 100); 64505 let animationRequestId; 64506 64507 if (!canAnimate) { 64508 animationRequestId = window.requestAnimationFrame(() => { 64509 setCanAnimate(true); 64510 }); 64511 } 64512 64513 return () => { 64514 window.clearTimeout(dimensionsRequestId); 64515 window.cancelAnimationFrame(animationRequestId); 64516 }; 64517 }, [canAnimate, containerRef, containerWidth, state, isAdaptiveWidth]); 64518 64519 if (!renderBackdrop) { 64520 return null; 64521 } 64522 64523 return (0,external_wp_element_namespaceObject.createElement)(BackdropView, { 64524 role: "presentation", 64525 style: { 64526 transform: `translateX($left}px)`, 64527 transition: canAnimate ? undefined : 'none', 64528 width 64529 } 64530 }); 64531 } 64532 64533 /* harmony default export */ var toggle_group_control_backdrop = ((0,external_wp_element_namespaceObject.memo)(ToggleGroupControlBackdrop)); 64534 64535 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/toggle-group-control/context.js 64536 /** 64537 * WordPress dependencies 64538 */ 64539 64540 /** 64541 * Internal dependencies 64542 */ 64543 64544 const ToggleGroupControlContext = (0,external_wp_element_namespaceObject.createContext)({}); 64545 const useToggleGroupControlContext = () => (0,external_wp_element_namespaceObject.useContext)(ToggleGroupControlContext); 64546 /* harmony default export */ var toggle_group_control_context = (ToggleGroupControlContext); 64547 64548 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/toggle-group-control/toggle-group-control/component.js 64549 64550 64551 64552 /** 64553 * External dependencies 64554 */ 64555 // eslint-disable-next-line no-restricted-imports 64556 64557 64558 /** 64559 * WordPress dependencies 64560 */ 64561 64562 64563 64564 /** 64565 * Internal dependencies 64566 */ 64567 64568 64569 64570 64571 64572 64573 64574 64575 64576 const toggle_group_control_component_noop = () => {}; 64577 64578 function component_ToggleGroupControl(props, forwardedRef) { 64579 const { 64580 className, 64581 isAdaptiveWidth = false, 64582 isBlock = false, 64583 label, 64584 hideLabelFromVision = false, 64585 help, 64586 onChange = toggle_group_control_component_noop, 64587 value, 64588 children, 64589 ...otherProps 64590 } = useContextSystem(props, 'ToggleGroupControl'); 64591 const cx = useCx(); 64592 const containerRef = (0,external_wp_element_namespaceObject.useRef)(); 64593 const [resizeListener, sizes] = react_resize_aware_dist_default()(); 64594 const baseId = (0,external_wp_compose_namespaceObject.useInstanceId)(component_ToggleGroupControl, 'toggle-group-control').toString(); 64595 const radio = useRadioState({ 64596 baseId, 64597 state: value 64598 }); 64599 const previousValue = (0,external_wp_compose_namespaceObject.usePrevious)(value); // Propagate radio.state change. 64600 64601 use_update_effect(() => { 64602 // Avoid calling onChange if radio state changed 64603 // from incoming value. 64604 if (previousValue !== radio.state) { 64605 onChange(radio.state); 64606 } 64607 }, [radio.state]); // Sync incoming value with radio.state. 64608 64609 use_update_effect(() => { 64610 if (value !== radio.state) { 64611 radio.setState(value); 64612 } 64613 }, [value]); 64614 const classes = (0,external_wp_element_namespaceObject.useMemo)(() => cx(ToggleGroupControl, isBlock && toggle_group_control_styles_block, 'medium', className), [className, cx, isBlock]); 64615 return (0,external_wp_element_namespaceObject.createElement)(base_control, { 64616 help: help 64617 }, (0,external_wp_element_namespaceObject.createElement)(toggle_group_control_context.Provider, { 64618 value: { ...radio, 64619 isBlock: !isAdaptiveWidth 64620 } 64621 }, !hideLabelFromVision && (0,external_wp_element_namespaceObject.createElement)("div", null, (0,external_wp_element_namespaceObject.createElement)(base_control.VisualLabel, null, label)), (0,external_wp_element_namespaceObject.createElement)(RadioGroup, extends_extends({}, radio, { 64622 "aria-label": label, 64623 as: component, 64624 className: classes 64625 }, otherProps, { 64626 ref: (0,external_wp_compose_namespaceObject.useMergeRefs)([containerRef, forwardedRef]) 64627 }), resizeListener, (0,external_wp_element_namespaceObject.createElement)(toggle_group_control_backdrop, extends_extends({}, radio, { 64628 containerRef: containerRef, 64629 containerWidth: sizes.width, 64630 isAdaptiveWidth: isAdaptiveWidth 64631 })), children))); 64632 } 64633 /** 64634 * `ToggleGroupControl` is a form component that lets users choose options 64635 * represented in horizontal segments. To render options for this control use 64636 * `ToggleGroupControlOption` component. 64637 * 64638 * Only use this control when you know for sure the labels of items inside won't 64639 * wrap. For items with longer labels, you can consider a `SelectControl` or a 64640 * `CustomSelectControl` component instead. 64641 * 64642 * @example 64643 * ```jsx 64644 * import { 64645 * __experimentalToggleGroupControl as ToggleGroupControl, 64646 * __experimentalToggleGroupControlOption as ToggleGroupControlOption, 64647 * } from '@wordpress/components'; 64648 * 64649 * function Example() { 64650 * return ( 64651 * <ToggleGroupControl label="my label" value="vertical" isBlock> 64652 * <ToggleGroupControlOption value="horizontal" label="Horizontal" /> 64653 * <ToggleGroupControlOption value="vertical" label="Vertical" /> 64654 * </ToggleGroupControl> 64655 * ); 64656 * } 64657 * ``` 64658 */ 64659 64660 64661 const ConnectedToggleGroupControl = contextConnect(component_ToggleGroupControl, 'ToggleGroupControl'); 64662 /* harmony default export */ var toggle_group_control_component = (ConnectedToggleGroupControl); 64663 64664 ;// CONCATENATED MODULE: ./node_modules/reakit/es/Radio/Radio.js 64665 64666 64667 64668 64669 64670 64671 64672 64673 64674 64675 64676 64677 64678 64679 64680 64681 64682 64683 64684 64685 64686 64687 64688 64689 64690 64691 64692 64693 64694 64695 64696 64697 64698 function getChecked(options) { 64699 if (typeof options.checked !== "undefined") { 64700 return options.checked; 64701 } 64702 64703 return typeof options.value !== "undefined" && options.state === options.value; 64704 } 64705 64706 function useInitialChecked(options) { 64707 var _React$useState = (0,external_React_.useState)(function () { 64708 return getChecked(options); 64709 }), 64710 initialChecked = _React$useState[0]; 64711 64712 var _React$useState2 = (0,external_React_.useState)(options.currentId), 64713 initialCurrentId = _React$useState2[0]; 64714 64715 var id = options.id, 64716 setCurrentId = options.setCurrentId; 64717 (0,external_React_.useEffect)(function () { 64718 if (initialChecked && id && initialCurrentId !== id) { 64719 setCurrentId === null || setCurrentId === void 0 ? void 0 : setCurrentId(id); 64720 } 64721 }, [initialChecked, id, setCurrentId, initialCurrentId]); 64722 } 64723 64724 function fireChange(element, onChange) { 64725 var event = createEvent(element, "change"); 64726 Object.defineProperties(event, { 64727 type: { 64728 value: "change" 64729 }, 64730 target: { 64731 value: element 64732 }, 64733 currentTarget: { 64734 value: element 64735 } 64736 }); 64737 onChange === null || onChange === void 0 ? void 0 : onChange(event); 64738 } 64739 64740 var useRadio = createHook({ 64741 name: "Radio", 64742 compose: useCompositeItem, 64743 keys: RADIO_KEYS, 64744 useOptions: function useOptions(_ref, _ref2) { 64745 var _options$value; 64746 64747 var value = _ref2.value, 64748 checked = _ref2.checked; 64749 64750 var _ref$unstable_clickOn = _ref.unstable_clickOnEnter, 64751 unstable_clickOnEnter = _ref$unstable_clickOn === void 0 ? false : _ref$unstable_clickOn, 64752 _ref$unstable_checkOn = _ref.unstable_checkOnFocus, 64753 unstable_checkOnFocus = _ref$unstable_checkOn === void 0 ? true : _ref$unstable_checkOn, 64754 options = _rollupPluginBabelHelpers_1f0bf8c2_objectWithoutPropertiesLoose(_ref, ["unstable_clickOnEnter", "unstable_checkOnFocus"]); 64755 64756 return _objectSpread2(_objectSpread2({ 64757 checked: checked, 64758 unstable_clickOnEnter: unstable_clickOnEnter, 64759 unstable_checkOnFocus: unstable_checkOnFocus 64760 }, options), {}, { 64761 value: (_options$value = options.value) != null ? _options$value : value 64762 }); 64763 }, 64764 useProps: function useProps(options, _ref3) { 64765 var htmlRef = _ref3.ref, 64766 htmlOnChange = _ref3.onChange, 64767 htmlOnClick = _ref3.onClick, 64768 htmlProps = _rollupPluginBabelHelpers_1f0bf8c2_objectWithoutPropertiesLoose(_ref3, ["ref", "onChange", "onClick"]); 64769 64770 var ref = (0,external_React_.useRef)(null); 64771 64772 var _React$useState3 = (0,external_React_.useState)(true), 64773 isNativeRadio = _React$useState3[0], 64774 setIsNativeRadio = _React$useState3[1]; 64775 64776 var checked = getChecked(options); 64777 var isCurrentItemRef = useLiveRef(options.currentId === options.id); 64778 var onChangeRef = useLiveRef(htmlOnChange); 64779 var onClickRef = useLiveRef(htmlOnClick); 64780 useInitialChecked(options); 64781 (0,external_React_.useEffect)(function () { 64782 var element = ref.current; 64783 64784 if (!element) { 64785 false ? 0 : void 0; 64786 return; 64787 } 64788 64789 if (element.tagName !== "INPUT" || element.type !== "radio") { 64790 setIsNativeRadio(false); 64791 } 64792 }, []); 64793 var onChange = (0,external_React_.useCallback)(function (event) { 64794 var _onChangeRef$current, _options$setState; 64795 64796 (_onChangeRef$current = onChangeRef.current) === null || _onChangeRef$current === void 0 ? void 0 : _onChangeRef$current.call(onChangeRef, event); 64797 if (event.defaultPrevented) return; 64798 if (options.disabled) return; 64799 (_options$setState = options.setState) === null || _options$setState === void 0 ? void 0 : _options$setState.call(options, options.value); 64800 }, [options.disabled, options.setState, options.value]); 64801 var onClick = (0,external_React_.useCallback)(function (event) { 64802 var _onClickRef$current; 64803 64804 (_onClickRef$current = onClickRef.current) === null || _onClickRef$current === void 0 ? void 0 : _onClickRef$current.call(onClickRef, event); 64805 if (event.defaultPrevented) return; 64806 if (isNativeRadio) return; 64807 fireChange(event.currentTarget, onChange); 64808 }, [onChange, isNativeRadio]); 64809 (0,external_React_.useEffect)(function () { 64810 var element = ref.current; 64811 if (!element) return; 64812 64813 if (options.unstable_moves && isCurrentItemRef.current && options.unstable_checkOnFocus) { 64814 fireChange(element, onChange); 64815 } 64816 }, [options.unstable_moves, options.unstable_checkOnFocus, onChange]); 64817 return _objectSpread2({ 64818 ref: useForkRef(ref, htmlRef), 64819 role: !isNativeRadio ? "radio" : undefined, 64820 type: isNativeRadio ? "radio" : undefined, 64821 value: isNativeRadio ? options.value : undefined, 64822 name: isNativeRadio ? options.baseId : undefined, 64823 "aria-checked": checked, 64824 checked: checked, 64825 onChange: onChange, 64826 onClick: onClick 64827 }, htmlProps); 64828 } 64829 }); 64830 var Radio = createComponent({ 64831 as: "input", 64832 memo: true, 64833 useHook: useRadio 64834 }); 64835 64836 64837 64838 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/toggle-group-control/toggle-group-control-option-base/styles.js 64839 64840 64841 function toggle_group_control_option_base_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } 64842 64843 /** 64844 * External dependencies 64845 */ 64846 64847 64848 /** 64849 * Internal dependencies 64850 */ 64851 64852 const LabelView = emotion_styled_base_browser_esm("div", true ? { 64853 target: "et6ln9s1" 64854 } : 0)( true ? { 64855 name: "sln1fl", 64856 styles: "display:inline-flex;max-width:100%;min-width:0;position:relative" 64857 } : 0); 64858 const labelBlock = true ? { 64859 name: "82a6rk", 64860 styles: "flex:1" 64861 } : 0; 64862 const buttonView = /*#__PURE__*/emotion_react_browser_esm_css("align-items:center;appearance:none;background:transparent;border:none;border-radius:", config_values.controlBorderRadius, ";color:", COLORS.gray[700], ";fill:currentColor;cursor:pointer;display:flex;font-family:inherit;height:100%;justify-content:center;line-height:100%;outline:none;padding:0 12px;position:relative;text-align:center;transition:background ", config_values.transitionDurationFast, " linear,color ", config_values.transitionDurationFast, " linear,font-weight 60ms linear;", reduceMotion('transition'), " user-select:none;width:100%;z-index:2;&::-moz-focus-inner{border:0;}&:active{background:", config_values.toggleGroupControlBackgroundColor, ";}" + ( true ? "" : 0), true ? "" : 0); 64863 const buttonActive = /*#__PURE__*/emotion_react_browser_esm_css("color:", COLORS.white, ";&:active{background:transparent;}" + ( true ? "" : 0), true ? "" : 0); 64864 const ButtonContentView = emotion_styled_base_browser_esm("div", true ? { 64865 target: "et6ln9s0" 64866 } : 0)("font-size:", config_values.fontSize, ";line-height:1;" + ( true ? "" : 0)); 64867 const separatorActive = true ? { 64868 name: "1qsuvl4", 64869 styles: "background:transparent" 64870 } : 0; 64871 const medium = /*#__PURE__*/emotion_react_browser_esm_css("min-height:", config_values.controlHeight, ";" + ( true ? "" : 0), true ? "" : 0); 64872 64873 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/toggle-group-control/toggle-group-control-option-base/component.js 64874 64875 64876 64877 /** 64878 * External dependencies 64879 */ 64880 // eslint-disable-next-line no-restricted-imports 64881 64882 /** 64883 * WordPress dependencies 64884 */ 64885 64886 64887 /** 64888 * Internal dependencies 64889 */ 64890 64891 64892 64893 64894 64895 64896 const { 64897 ButtonContentView: component_ButtonContentView, 64898 LabelView: component_LabelView 64899 } = toggle_group_control_option_base_styles_namespaceObject; 64900 64901 const WithToolTip = _ref => { 64902 let { 64903 showTooltip, 64904 text, 64905 children 64906 } = _ref; 64907 64908 if (showTooltip && text) { 64909 return (0,external_wp_element_namespaceObject.createElement)(tooltip, { 64910 text: text, 64911 position: "top center" 64912 }, children); 64913 } 64914 64915 return (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, children); 64916 }; 64917 64918 function ToggleGroupControlOptionBase(props, forwardedRef) { 64919 const toggleGroupControlContext = useToggleGroupControlContext(); 64920 const id = (0,external_wp_compose_namespaceObject.useInstanceId)(ToggleGroupControlOptionBase, toggleGroupControlContext.baseId || 'toggle-group-control-option-base'); 64921 const buttonProps = useContextSystem({ ...props, 64922 id 64923 }, 'ToggleGroupControlOptionBase'); 64924 const { 64925 className, 64926 isBlock = false, 64927 value, 64928 children, 64929 showTooltip = false, 64930 ...radioProps 64931 } = { ...toggleGroupControlContext, 64932 ...buttonProps 64933 }; 64934 const isActive = radioProps.state === value; 64935 const cx = useCx(); 64936 const labelViewClasses = cx(isBlock && labelBlock); 64937 const classes = cx(buttonView, className, isActive && buttonActive); 64938 return (0,external_wp_element_namespaceObject.createElement)(component_LabelView, { 64939 className: labelViewClasses, 64940 "data-active": isActive 64941 }, (0,external_wp_element_namespaceObject.createElement)(WithToolTip, { 64942 showTooltip: showTooltip, 64943 text: radioProps['aria-label'] 64944 }, (0,external_wp_element_namespaceObject.createElement)(Radio, extends_extends({}, radioProps, { 64945 as: "button", 64946 "aria-label": radioProps['aria-label'], 64947 className: classes, 64948 "data-value": value, 64949 ref: forwardedRef, 64950 value: value 64951 }), (0,external_wp_element_namespaceObject.createElement)(component_ButtonContentView, null, children)))); 64952 } 64953 /** 64954 * `ToggleGroupControlOptionBase` is a form component and is meant to be used as an internal, 64955 * generic component for any children of `ToggleGroupControl`. 64956 * 64957 * @example 64958 * ```jsx 64959 * import { 64960 * __experimentalToggleGroupControl as ToggleGroupControl, 64961 * __experimentalToggleGroupControlOptionBase as ToggleGroupControlOptionBase, 64962 * } from '@wordpress/components'; 64963 * 64964 * function Example() { 64965 * return ( 64966 * <ToggleGroupControl label="my label" value="vertical" isBlock> 64967 * <ToggleGroupControlOption value="horizontal" label="Horizontal" /> 64968 * <ToggleGroupControlOption value="vertical" label="Vertical" /> 64969 * </ToggleGroupControl> 64970 * ); 64971 * } 64972 * ``` 64973 */ 64974 64975 64976 const ConnectedToggleGroupControlOptionBase = contextConnect(ToggleGroupControlOptionBase, 'ToggleGroupControlOptionBase'); 64977 /* harmony default export */ var toggle_group_control_option_base_component = (ConnectedToggleGroupControlOptionBase); 64978 64979 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/toggle-group-control/toggle-group-control-option/component.js 64980 64981 64982 64983 /** 64984 * Internal dependencies 64985 */ 64986 64987 function ToggleGroupControlOption(props) { 64988 const { 64989 label, 64990 ...restProps 64991 } = props; 64992 const optionLabel = restProps['aria-label'] || label; 64993 return (0,external_wp_element_namespaceObject.createElement)(toggle_group_control_option_base_component, extends_extends({}, restProps, { 64994 "aria-label": optionLabel 64995 }), label); 64996 } 64997 /** 64998 * `ToggleGroupControlOption` is a form component and is meant to be used as a 64999 * child of `ToggleGroupControl`. 65000 * 65001 * @example 65002 * ```jsx 65003 * import { 65004 * __experimentalToggleGroupControl as ToggleGroupControl, 65005 * __experimentalToggleGroupControlOption as ToggleGroupControlOption, 65006 * } from '@wordpress/components'; 65007 * 65008 * function Example() { 65009 * return ( 65010 * <ToggleGroupControl label="my label" value="vertical" isBlock> 65011 * <ToggleGroupControlOption value="horizontal" label="Horizontal" /> 65012 * <ToggleGroupControlOption value="vertical" label="Vertical" /> 65013 * </ToggleGroupControl> 65014 * ); 65015 * } 65016 * ``` 65017 */ 65018 65019 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/font-size-picker/utils.js 65020 /** 65021 * WordPress dependencies 65022 */ 65023 65024 const DEFAULT_FONT_SIZE = 'default'; 65025 const DEFAULT_FONT_SIZE_OPTION = { 65026 slug: DEFAULT_FONT_SIZE, 65027 name: (0,external_wp_i18n_namespaceObject.__)('Default') 65028 }; 65029 const CUSTOM_FONT_SIZE = 'custom'; 65030 const CUSTOM_FONT_SIZE_OPTION = { 65031 slug: CUSTOM_FONT_SIZE, 65032 name: (0,external_wp_i18n_namespaceObject.__)('Custom') 65033 }; 65034 /** 65035 * In case we have at most five font sizes, where at least one the them 65036 * contain a complex css value(clamp, var, etc..) show a incremental sequence 65037 * of numbers as a label of the font size. We do this because complex css values 65038 * cannot be caluclated properly and the incremental sequence of numbers as labels 65039 * can help the user better mentally map the different available font sizes. 65040 */ 65041 65042 const FONT_SIZES_ALIASES = ['1', '2', '3', '4', '5']; 65043 /** 65044 * Helper util to split a font size to its numeric value 65045 * and its `unit`, if exists. 65046 * 65047 * @param {string|number} size Font size. 65048 * @return {[number, string]} An array with the numeric value and the unit if exists. 65049 */ 65050 65051 function splitValueAndUnitFromSize(size) { 65052 const [numericValue, unit] = `$size}`.match(/[\d\.]+|\D+/g); 65053 65054 if (!isNaN(parseFloat(numericValue)) && isFinite(numericValue)) { 65055 return [numericValue, unit]; 65056 } 65057 65058 return []; 65059 } 65060 /** 65061 * Some themes use css vars for their font sizes, so until we 65062 * have the way of calculating them don't display them. 65063 * 65064 * @param {string|number} value The value that is checked. 65065 * @return {boolean} Whether the value is a simple css value. 65066 */ 65067 65068 function isSimpleCssValue(value) { 65069 const sizeRegex = /^[\d\.]+(px|em|rem|vw|vh|%)?$/i; 65070 return sizeRegex.test(value); 65071 } 65072 /** 65073 * Return font size options in the proper format depending 65074 * on the currently used control (select, toggle group). 65075 * 65076 * @param {boolean} useSelectControl Whether to use a select control. 65077 * @param {Object[]} optionsArray Array of available font sizes objects. 65078 * @param {*} disableCustomFontSizes Flag that indicates if custom font sizes are disabled. 65079 * @param {boolean} optionsContainComplexCssValues Whether font sizes contain at least one complex css value(clamp, var, etc..). 65080 * @return {Object[]|null} Array of font sizes in proper format for the used control. 65081 */ 65082 65083 function getFontSizeOptions(useSelectControl, optionsArray, disableCustomFontSizes, optionsContainComplexCssValues) { 65084 if (disableCustomFontSizes && !optionsArray.length) { 65085 return null; 65086 } 65087 65088 return useSelectControl ? getSelectOptions(optionsArray, disableCustomFontSizes) : getToggleGroupOptions(optionsArray, optionsContainComplexCssValues); 65089 } 65090 65091 function getSelectOptions(optionsArray, disableCustomFontSizes) { 65092 const options = [DEFAULT_FONT_SIZE_OPTION, ...optionsArray, ...(disableCustomFontSizes ? [] : [CUSTOM_FONT_SIZE_OPTION])]; 65093 return options.map(_ref => { 65094 let { 65095 slug, 65096 name, 65097 size 65098 } = _ref; 65099 return { 65100 key: slug, 65101 name, 65102 size, 65103 __experimentalHint: size && isSimpleCssValue(size) && parseFloat(size) 65104 }; 65105 }); 65106 } 65107 65108 function getToggleGroupOptions(optionsArray, optionsContainComplexCssValues) { 65109 return optionsArray.map((_ref2, index) => { 65110 let { 65111 slug, 65112 size, 65113 name 65114 } = _ref2; 65115 let label = optionsContainComplexCssValues ? FONT_SIZES_ALIASES[index] : size; 65116 65117 if (!optionsContainComplexCssValues && typeof size === 'string') { 65118 const [numericValue] = splitValueAndUnitFromSize(size); 65119 label = numericValue; 65120 } 65121 65122 return { 65123 key: slug, 65124 value: size, 65125 label, 65126 name 65127 }; 65128 }); 65129 } 65130 65131 function getSelectedOption(fontSizes, value) { 65132 if (!value) { 65133 return DEFAULT_FONT_SIZE_OPTION; 65134 } 65135 65136 return fontSizes.find(font => font.size === value) || CUSTOM_FONT_SIZE_OPTION; 65137 } 65138 65139 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/font-size-picker/index.js 65140 65141 65142 65143 /** 65144 * WordPress dependencies 65145 */ 65146 65147 65148 65149 /** 65150 * Internal dependencies 65151 */ 65152 65153 65154 65155 65156 65157 65158 65159 65160 65161 65162 function FontSizePicker(_ref, ref) { 65163 var _fontSizes$, _value$endsWith; 65164 65165 let { 65166 fallbackFontSize, 65167 fontSizes = [], 65168 disableCustomFontSizes = false, 65169 onChange, 65170 value, 65171 withSlider = false, 65172 withReset = true 65173 } = _ref; 65174 const hasUnits = [typeof value, typeof (fontSizes === null || fontSizes === void 0 ? void 0 : (_fontSizes$ = fontSizes[0]) === null || _fontSizes$ === void 0 ? void 0 : _fontSizes$.size)].includes('string'); 65175 const noUnitsValue = !hasUnits ? value : parseInt(value); 65176 const isPixelValue = typeof value === 'number' || (value === null || value === void 0 ? void 0 : (_value$endsWith = value.endsWith) === null || _value$endsWith === void 0 ? void 0 : _value$endsWith.call(value, 'px')); 65177 const units = useCustomUnits({ 65178 availableUnits: ['px', 'em', 'rem'] 65179 }); 65180 /** 65181 * The main font size UI displays a toggle group when the presets are less 65182 * than six and a select control when they are more. 65183 */ 65184 65185 const fontSizesContainComplexValues = fontSizes.some(_ref2 => { 65186 let { 65187 size 65188 } = _ref2; 65189 return !isSimpleCssValue(size); 65190 }); 65191 const shouldUseSelectControl = fontSizes.length > 5; 65192 const options = (0,external_wp_element_namespaceObject.useMemo)(() => getFontSizeOptions(shouldUseSelectControl, fontSizes, disableCustomFontSizes, fontSizesContainComplexValues), [shouldUseSelectControl, fontSizes, disableCustomFontSizes, fontSizesContainComplexValues]); 65193 const selectedOption = getSelectedOption(fontSizes, value); 65194 const isCustomValue = selectedOption.slug === CUSTOM_FONT_SIZE; 65195 const [showCustomValueControl, setShowCustomValueControl] = (0,external_wp_element_namespaceObject.useState)(!disableCustomFontSizes && isCustomValue); 65196 const headerHint = (0,external_wp_element_namespaceObject.useMemo)(() => { 65197 if (showCustomValueControl) { 65198 return `(${(0,external_wp_i18n_namespaceObject.__)('Custom')})`; 65199 } // If we have a custom value that is not available in the font sizes, 65200 // show it as a hint as long as it's a simple CSS value. 65201 65202 65203 if (isCustomValue) { 65204 return isSimpleCssValue(value) && `($value})`; 65205 } 65206 65207 if (shouldUseSelectControl) { 65208 return isSimpleCssValue(selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.size) && `($selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.size})`; 65209 } // Calculate the `hint` for toggle group control. 65210 65211 65212 let hint = selectedOption.name; 65213 65214 if (!fontSizesContainComplexValues && typeof selectedOption.size === 'string') { 65215 const [, unit] = splitValueAndUnitFromSize(selectedOption.size); 65216 hint += `($unit})`; 65217 } 65218 65219 return hint; 65220 }, [showCustomValueControl, selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.slug, value, isCustomValue, fontSizesContainComplexValues]); 65221 65222 if (!options) { 65223 return null; 65224 } // This is used for select control only. We need to add support 65225 // for ToggleGroupControl. 65226 65227 65228 const currentFontSizeSR = (0,external_wp_i18n_namespaceObject.sprintf)( // translators: %s: Currently selected font size. 65229 (0,external_wp_i18n_namespaceObject.__)('Currently selected font size: %s'), selectedOption.name); 65230 const baseClassName = 'components-font-size-picker'; 65231 return (0,external_wp_element_namespaceObject.createElement)("fieldset", extends_extends({ 65232 className: baseClassName 65233 }, ref ? {} : { 65234 ref 65235 }), (0,external_wp_element_namespaceObject.createElement)(visually_hidden_component, { 65236 as: "legend" 65237 }, (0,external_wp_i18n_namespaceObject.__)('Font size')), (0,external_wp_element_namespaceObject.createElement)(flex_component, { 65238 justify: "space-between", 65239 className: `$baseClassName}__header` 65240 }, (0,external_wp_element_namespaceObject.createElement)(flex_item_component, null, (0,external_wp_i18n_namespaceObject.__)('Size'), headerHint && (0,external_wp_element_namespaceObject.createElement)("span", { 65241 className: `$baseClassName}__header__hint` 65242 }, headerHint)), !disableCustomFontSizes && (0,external_wp_element_namespaceObject.createElement)(flex_item_component, null, (0,external_wp_element_namespaceObject.createElement)(build_module_button, { 65243 label: showCustomValueControl ? (0,external_wp_i18n_namespaceObject.__)('Use size preset') : (0,external_wp_i18n_namespaceObject.__)('Set custom size'), 65244 icon: library_settings, 65245 onClick: () => { 65246 setShowCustomValueControl(!showCustomValueControl); 65247 }, 65248 isPressed: showCustomValueControl, 65249 isSmall: true 65250 }))), (0,external_wp_element_namespaceObject.createElement)("div", { 65251 className: `$baseClassName}__controls` 65252 }, !!fontSizes.length && shouldUseSelectControl && !showCustomValueControl && (0,external_wp_element_namespaceObject.createElement)(CustomSelectControl, { 65253 className: `$baseClassName}__select`, 65254 label: (0,external_wp_i18n_namespaceObject.__)('Font size'), 65255 hideLabelFromVision: true, 65256 describedBy: currentFontSizeSR, 65257 options: options, 65258 value: options.find(option => option.key === selectedOption.slug), 65259 onChange: _ref3 => { 65260 let { 65261 selectedItem 65262 } = _ref3; 65263 onChange(hasUnits ? selectedItem.size : Number(selectedItem.size)); 65264 65265 if (selectedItem.key === CUSTOM_FONT_SIZE) { 65266 setShowCustomValueControl(true); 65267 } 65268 } 65269 }), !shouldUseSelectControl && !showCustomValueControl && (0,external_wp_element_namespaceObject.createElement)(toggle_group_control_component, { 65270 label: (0,external_wp_i18n_namespaceObject.__)('Font size'), 65271 hideLabelFromVision: true, 65272 value: value, 65273 onChange: newValue => { 65274 onChange(hasUnits ? newValue : Number(newValue)); 65275 }, 65276 isBlock: true 65277 }, options.map(option => (0,external_wp_element_namespaceObject.createElement)(ToggleGroupControlOption, { 65278 key: option.key, 65279 value: option.value, 65280 label: option.label, 65281 "aria-label": option.name, 65282 showTooltip: true 65283 }))), !withSlider && !disableCustomFontSizes && showCustomValueControl && (0,external_wp_element_namespaceObject.createElement)(flex_component, { 65284 justify: "space-between", 65285 className: `$baseClassName}__custom-size-control` 65286 }, (0,external_wp_element_namespaceObject.createElement)(flex_item_component, { 65287 isBlock: true 65288 }, (0,external_wp_element_namespaceObject.createElement)(unit_control, { 65289 label: (0,external_wp_i18n_namespaceObject.__)('Custom'), 65290 labelPosition: "top", 65291 hideLabelFromVision: true, 65292 value: value, 65293 onChange: nextSize => { 65294 if (0 === parseFloat(nextSize) || !nextSize) { 65295 onChange(undefined); 65296 } else { 65297 onChange(hasUnits ? nextSize : parseInt(nextSize, 10)); 65298 } 65299 }, 65300 units: hasUnits ? units : [] 65301 })), withReset && (0,external_wp_element_namespaceObject.createElement)(flex_item_component, { 65302 isBlock: true 65303 }, (0,external_wp_element_namespaceObject.createElement)(build_module_button, { 65304 className: "components-color-palette__clear", 65305 disabled: value === undefined, 65306 onClick: () => { 65307 onChange(undefined); 65308 }, 65309 isSmall: true, 65310 variant: "secondary" 65311 }, (0,external_wp_i18n_namespaceObject.__)('Reset'))))), withSlider && (0,external_wp_element_namespaceObject.createElement)(range_control, { 65312 className: `$baseClassName}__custom-input`, 65313 label: (0,external_wp_i18n_namespaceObject.__)('Custom Size'), 65314 value: isPixelValue && noUnitsValue || '', 65315 initialPosition: fallbackFontSize, 65316 onChange: newValue => { 65317 onChange(hasUnits ? newValue + 'px' : newValue); 65318 }, 65319 min: 12, 65320 max: 100 65321 })); 65322 } 65323 65324 /* harmony default export */ var font_size_picker = ((0,external_wp_element_namespaceObject.forwardRef)(FontSizePicker)); 65325 65326 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/form-file-upload/index.js 65327 65328 65329 65330 /** 65331 * WordPress dependencies 65332 */ 65333 65334 /** 65335 * Internal dependencies 65336 */ 65337 65338 65339 65340 function FormFileUpload(_ref) { 65341 let { 65342 accept, 65343 children, 65344 multiple = false, 65345 onChange, 65346 onClick, 65347 render, 65348 ...props 65349 } = _ref; 65350 const ref = (0,external_wp_element_namespaceObject.useRef)(); 65351 65352 const openFileDialog = () => { 65353 ref.current.click(); 65354 }; 65355 65356 const ui = render ? render({ 65357 openFileDialog 65358 }) : (0,external_wp_element_namespaceObject.createElement)(build_module_button, extends_extends({ 65359 onClick: openFileDialog 65360 }, props), children); 65361 return (0,external_wp_element_namespaceObject.createElement)("div", { 65362 className: "components-form-file-upload" 65363 }, ui, (0,external_wp_element_namespaceObject.createElement)("input", { 65364 type: "file", 65365 ref: ref, 65366 multiple: multiple, 65367 style: { 65368 display: 'none' 65369 }, 65370 accept: accept, 65371 onChange: onChange, 65372 onClick: onClick, 65373 "data-testid": "form-file-upload-input" 65374 })); 65375 } 65376 65377 /* harmony default export */ var form_file_upload = (FormFileUpload); 65378 65379 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/form-toggle/index.js 65380 65381 65382 65383 /** 65384 * External dependencies 65385 */ 65386 65387 65388 65389 function FormToggle(_ref) { 65390 let { 65391 className, 65392 checked, 65393 id, 65394 disabled, 65395 onChange = external_lodash_namespaceObject.noop, 65396 ...props 65397 } = _ref; 65398 const wrapperClasses = classnames_default()('components-form-toggle', className, { 65399 'is-checked': checked, 65400 'is-disabled': disabled 65401 }); 65402 return (0,external_wp_element_namespaceObject.createElement)("span", { 65403 className: wrapperClasses 65404 }, (0,external_wp_element_namespaceObject.createElement)("input", extends_extends({ 65405 className: "components-form-toggle__input", 65406 id: id, 65407 type: "checkbox", 65408 checked: checked, 65409 onChange: onChange, 65410 disabled: disabled 65411 }, props)), (0,external_wp_element_namespaceObject.createElement)("span", { 65412 className: "components-form-toggle__track" 65413 }), (0,external_wp_element_namespaceObject.createElement)("span", { 65414 className: "components-form-toggle__thumb" 65415 })); 65416 } 65417 65418 /* harmony default export */ var form_toggle = (FormToggle); 65419 65420 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/form-token-field/token.js 65421 65422 65423 /** 65424 * External dependencies 65425 */ 65426 65427 65428 /** 65429 * WordPress dependencies 65430 */ 65431 65432 65433 65434 65435 /** 65436 * Internal dependencies 65437 */ 65438 65439 65440 65441 function Token(_ref) { 65442 let { 65443 value, 65444 status, 65445 title, 65446 displayTransform, 65447 isBorderless = false, 65448 disabled = false, 65449 onClickRemove = external_lodash_namespaceObject.noop, 65450 onMouseEnter, 65451 onMouseLeave, 65452 messages, 65453 termPosition, 65454 termsCount 65455 } = _ref; 65456 const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(Token); 65457 const tokenClasses = classnames_default()('components-form-token-field__token', { 65458 'is-error': 'error' === status, 65459 'is-success': 'success' === status, 65460 'is-validating': 'validating' === status, 65461 'is-borderless': isBorderless, 65462 'is-disabled': disabled 65463 }); 65464 65465 const onClick = () => onClickRemove({ 65466 value 65467 }); 65468 65469 const transformedValue = displayTransform(value); 65470 const termPositionAndCount = (0,external_wp_i18n_namespaceObject.sprintf)( 65471 /* translators: 1: term name, 2: term position in a set of terms, 3: total term set count. */ 65472 (0,external_wp_i18n_namespaceObject.__)('%1$s (%2$s of %3$s)'), transformedValue, termPosition, termsCount); 65473 return (0,external_wp_element_namespaceObject.createElement)("span", { 65474 className: tokenClasses, 65475 onMouseEnter: onMouseEnter, 65476 onMouseLeave: onMouseLeave, 65477 title: title 65478 }, (0,external_wp_element_namespaceObject.createElement)("span", { 65479 className: "components-form-token-field__token-text", 65480 id: `components-form-token-field__token-text-$instanceId}` 65481 }, (0,external_wp_element_namespaceObject.createElement)(visually_hidden_component, { 65482 as: "span" 65483 }, termPositionAndCount), (0,external_wp_element_namespaceObject.createElement)("span", { 65484 "aria-hidden": "true" 65485 }, transformedValue)), (0,external_wp_element_namespaceObject.createElement)(build_module_button, { 65486 className: "components-form-token-field__remove-token", 65487 icon: close_small, 65488 onClick: !disabled && onClick, 65489 label: messages.remove, 65490 "aria-describedby": `components-form-token-field__token-text-$instanceId}` 65491 })); 65492 } 65493 65494 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/higher-order/with-spoken-messages/index.js 65495 65496 65497 65498 /** 65499 * WordPress dependencies 65500 */ 65501 65502 65503 /** 65504 * A Higher Order Component used to be provide speak and debounced speak 65505 * functions. 65506 * 65507 * @see https://developer.wordpress.org/block-editor/packages/packages-a11y/#speak 65508 * 65509 * @param {WPComponent} Component The component to be wrapped. 65510 * 65511 * @return {WPComponent} The wrapped component. 65512 */ 65513 65514 /* harmony default export */ var with_spoken_messages = ((0,external_wp_compose_namespaceObject.createHigherOrderComponent)(Component => props => (0,external_wp_element_namespaceObject.createElement)(Component, extends_extends({}, props, { 65515 speak: external_wp_a11y_namespaceObject.speak, 65516 debouncedSpeak: (0,external_wp_compose_namespaceObject.useDebounce)(external_wp_a11y_namespaceObject.speak, 500) 65517 })), 'withSpokenMessages')); 65518 65519 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/form-token-field/index.js 65520 65521 65522 /** 65523 * External dependencies 65524 */ 65525 65526 65527 /** 65528 * WordPress dependencies 65529 */ 65530 65531 65532 65533 65534 65535 65536 /** 65537 * Internal dependencies 65538 */ 65539 65540 65541 65542 65543 65544 const initialState = { 65545 incompleteTokenValue: '', 65546 inputOffsetFromEnd: 0, 65547 isActive: false, 65548 isExpanded: false, 65549 selectedSuggestionIndex: -1, 65550 selectedSuggestionScroll: false 65551 }; 65552 65553 class FormTokenField extends external_wp_element_namespaceObject.Component { 65554 constructor() { 65555 super(...arguments); 65556 this.state = initialState; 65557 this.onKeyDown = this.onKeyDown.bind(this); 65558 this.onKeyPress = this.onKeyPress.bind(this); 65559 this.onFocus = this.onFocus.bind(this); 65560 this.onBlur = this.onBlur.bind(this); 65561 this.deleteTokenBeforeInput = this.deleteTokenBeforeInput.bind(this); 65562 this.deleteTokenAfterInput = this.deleteTokenAfterInput.bind(this); 65563 this.addCurrentToken = this.addCurrentToken.bind(this); 65564 this.onContainerTouched = this.onContainerTouched.bind(this); 65565 this.renderToken = this.renderToken.bind(this); 65566 this.onTokenClickRemove = this.onTokenClickRemove.bind(this); 65567 this.onSuggestionHovered = this.onSuggestionHovered.bind(this); 65568 this.onSuggestionSelected = this.onSuggestionSelected.bind(this); 65569 this.onInputChange = this.onInputChange.bind(this); 65570 this.bindInput = this.bindInput.bind(this); 65571 this.bindTokensAndInput = this.bindTokensAndInput.bind(this); 65572 this.updateSuggestions = this.updateSuggestions.bind(this); 65573 } 65574 65575 componentDidUpdate(prevProps) { 65576 // Make sure to focus the input when the isActive state is true. 65577 if (this.state.isActive && !this.input.hasFocus()) { 65578 this.input.focus(); 65579 } 65580 65581 const { 65582 suggestions, 65583 value 65584 } = this.props; 65585 const suggestionsDidUpdate = !external_wp_isShallowEqual_default()(suggestions, prevProps.suggestions); 65586 65587 if (suggestionsDidUpdate || value !== prevProps.value) { 65588 this.updateSuggestions(suggestionsDidUpdate); 65589 } 65590 } 65591 65592 static getDerivedStateFromProps(props, state) { 65593 if (!props.disabled || !state.isActive) { 65594 return null; 65595 } 65596 65597 return { 65598 isActive: false, 65599 incompleteTokenValue: '' 65600 }; 65601 } 65602 65603 bindInput(ref) { 65604 this.input = ref; 65605 } 65606 65607 bindTokensAndInput(ref) { 65608 this.tokensAndInput = ref; 65609 } 65610 65611 onFocus(event) { 65612 const { 65613 __experimentalExpandOnFocus 65614 } = this.props; // If focus is on the input or on the container, set the isActive state to true. 65615 65616 if (this.input.hasFocus() || event.target === this.tokensAndInput) { 65617 this.setState({ 65618 isActive: true, 65619 isExpanded: !!__experimentalExpandOnFocus || this.state.isExpanded 65620 }); 65621 } else { 65622 /* 65623 * Otherwise, focus is on one of the token "remove" buttons and we 65624 * set the isActive state to false to prevent the input to be 65625 * re-focused, see componentDidUpdate(). 65626 */ 65627 this.setState({ 65628 isActive: false 65629 }); 65630 } 65631 65632 if ('function' === typeof this.props.onFocus) { 65633 this.props.onFocus(event); 65634 } 65635 } 65636 65637 onBlur() { 65638 if (this.inputHasValidValue()) { 65639 this.setState({ 65640 isActive: false 65641 }); 65642 } else { 65643 this.setState(initialState); 65644 } 65645 } 65646 65647 onKeyDown(event) { 65648 let preventDefault = false; 65649 65650 if (event.defaultPrevented) { 65651 return; 65652 } 65653 65654 switch (event.keyCode) { 65655 case external_wp_keycodes_namespaceObject.BACKSPACE: 65656 preventDefault = this.handleDeleteKey(this.deleteTokenBeforeInput); 65657 break; 65658 65659 case external_wp_keycodes_namespaceObject.ENTER: 65660 preventDefault = this.addCurrentToken(); 65661 break; 65662 65663 case external_wp_keycodes_namespaceObject.LEFT: 65664 preventDefault = this.handleLeftArrowKey(); 65665 break; 65666 65667 case external_wp_keycodes_namespaceObject.UP: 65668 preventDefault = this.handleUpArrowKey(); 65669 break; 65670 65671 case external_wp_keycodes_namespaceObject.RIGHT: 65672 preventDefault = this.handleRightArrowKey(); 65673 break; 65674 65675 case external_wp_keycodes_namespaceObject.DOWN: 65676 preventDefault = this.handleDownArrowKey(); 65677 break; 65678 65679 case external_wp_keycodes_namespaceObject.DELETE: 65680 preventDefault = this.handleDeleteKey(this.deleteTokenAfterInput); 65681 break; 65682 65683 case external_wp_keycodes_namespaceObject.SPACE: 65684 if (this.props.tokenizeOnSpace) { 65685 preventDefault = this.addCurrentToken(); 65686 } 65687 65688 break; 65689 65690 case external_wp_keycodes_namespaceObject.ESCAPE: 65691 preventDefault = this.handleEscapeKey(event); 65692 break; 65693 65694 default: 65695 break; 65696 } 65697 65698 if (preventDefault) { 65699 event.preventDefault(); 65700 } 65701 } 65702 65703 onKeyPress(event) { 65704 let preventDefault = false; 65705 65706 switch (event.charCode) { 65707 case 44: 65708 // Comma. 65709 preventDefault = this.handleCommaKey(); 65710 break; 65711 65712 default: 65713 break; 65714 } 65715 65716 if (preventDefault) { 65717 event.preventDefault(); 65718 } 65719 } 65720 65721 onContainerTouched(event) { 65722 // Prevent clicking/touching the tokensAndInput container from blurring 65723 // the input and adding the current token. 65724 if (event.target === this.tokensAndInput && this.state.isActive) { 65725 event.preventDefault(); 65726 } 65727 } 65728 65729 onTokenClickRemove(event) { 65730 this.deleteToken(event.value); 65731 this.input.focus(); 65732 } 65733 65734 onSuggestionHovered(suggestion) { 65735 const index = this.getMatchingSuggestions().indexOf(suggestion); 65736 65737 if (index >= 0) { 65738 this.setState({ 65739 selectedSuggestionIndex: index, 65740 selectedSuggestionScroll: false 65741 }); 65742 } 65743 } 65744 65745 onSuggestionSelected(suggestion) { 65746 this.addNewToken(suggestion); 65747 } 65748 65749 onInputChange(event) { 65750 const text = event.value; 65751 const separator = this.props.tokenizeOnSpace ? /[ ,\t]+/ : /[,\t]+/; 65752 const items = text.split(separator); 65753 const tokenValue = (0,external_lodash_namespaceObject.last)(items) || ''; 65754 65755 if (items.length > 1) { 65756 this.addNewTokens(items.slice(0, -1)); 65757 } 65758 65759 this.setState({ 65760 incompleteTokenValue: tokenValue 65761 }, this.updateSuggestions); 65762 this.props.onInputChange(tokenValue); 65763 } 65764 65765 handleDeleteKey(deleteToken) { 65766 let preventDefault = false; 65767 65768 if (this.input.hasFocus() && this.isInputEmpty()) { 65769 deleteToken(); 65770 preventDefault = true; 65771 } 65772 65773 return preventDefault; 65774 } 65775 65776 handleLeftArrowKey() { 65777 let preventDefault = false; 65778 65779 if (this.isInputEmpty()) { 65780 this.moveInputBeforePreviousToken(); 65781 preventDefault = true; 65782 } 65783 65784 return preventDefault; 65785 } 65786 65787 handleRightArrowKey() { 65788 let preventDefault = false; 65789 65790 if (this.isInputEmpty()) { 65791 this.moveInputAfterNextToken(); 65792 preventDefault = true; 65793 } 65794 65795 return preventDefault; 65796 } 65797 65798 handleUpArrowKey() { 65799 this.setState((state, props) => ({ 65800 selectedSuggestionIndex: (state.selectedSuggestionIndex === 0 ? this.getMatchingSuggestions(state.incompleteTokenValue, props.suggestions, props.value, props.maxSuggestions, props.saveTransform).length : state.selectedSuggestionIndex) - 1, 65801 selectedSuggestionScroll: true 65802 })); 65803 return true; // PreventDefault. 65804 } 65805 65806 handleDownArrowKey() { 65807 this.setState((state, props) => ({ 65808 selectedSuggestionIndex: (state.selectedSuggestionIndex + 1) % this.getMatchingSuggestions(state.incompleteTokenValue, props.suggestions, props.value, props.maxSuggestions, props.saveTransform).length, 65809 selectedSuggestionScroll: true 65810 })); 65811 return true; // PreventDefault. 65812 } 65813 65814 handleEscapeKey(event) { 65815 this.setState({ 65816 incompleteTokenValue: event.target.value, 65817 isExpanded: false, 65818 selectedSuggestionIndex: -1, 65819 selectedSuggestionScroll: false 65820 }); 65821 return true; // PreventDefault. 65822 } 65823 65824 handleCommaKey() { 65825 if (this.inputHasValidValue()) { 65826 this.addNewToken(this.state.incompleteTokenValue); 65827 } 65828 65829 return true; // PreventDefault. 65830 } 65831 65832 moveInputToIndex(index) { 65833 this.setState((state, props) => ({ 65834 inputOffsetFromEnd: props.value.length - Math.max(index, -1) - 1 65835 })); 65836 } 65837 65838 moveInputBeforePreviousToken() { 65839 this.setState((state, props) => ({ 65840 inputOffsetFromEnd: Math.min(state.inputOffsetFromEnd + 1, props.value.length) 65841 })); 65842 } 65843 65844 moveInputAfterNextToken() { 65845 this.setState(state => ({ 65846 inputOffsetFromEnd: Math.max(state.inputOffsetFromEnd - 1, 0) 65847 })); 65848 } 65849 65850 deleteTokenBeforeInput() { 65851 const index = this.getIndexOfInput() - 1; 65852 65853 if (index > -1) { 65854 this.deleteToken(this.props.value[index]); 65855 } 65856 } 65857 65858 deleteTokenAfterInput() { 65859 const index = this.getIndexOfInput(); 65860 65861 if (index < this.props.value.length) { 65862 this.deleteToken(this.props.value[index]); // Update input offset since it's the offset from the last token. 65863 65864 this.moveInputToIndex(index); 65865 } 65866 } 65867 65868 addCurrentToken() { 65869 let preventDefault = false; 65870 const selectedSuggestion = this.getSelectedSuggestion(); 65871 65872 if (selectedSuggestion) { 65873 this.addNewToken(selectedSuggestion); 65874 preventDefault = true; 65875 } else if (this.inputHasValidValue()) { 65876 this.addNewToken(this.state.incompleteTokenValue); 65877 preventDefault = true; 65878 } 65879 65880 return preventDefault; 65881 } 65882 65883 addNewTokens(tokens) { 65884 const tokensToAdd = (0,external_lodash_namespaceObject.uniq)(tokens.map(this.props.saveTransform).filter(Boolean).filter(token => !this.valueContainsToken(token))); 65885 65886 if (tokensToAdd.length > 0) { 65887 const newValue = (0,external_lodash_namespaceObject.clone)(this.props.value); 65888 newValue.splice.apply(newValue, [this.getIndexOfInput(), 0].concat(tokensToAdd)); 65889 this.props.onChange(newValue); 65890 } 65891 } 65892 65893 addNewToken(token) { 65894 const { 65895 __experimentalExpandOnFocus, 65896 __experimentalValidateInput 65897 } = this.props; 65898 65899 if (!__experimentalValidateInput(token)) { 65900 this.props.speak(this.props.messages.__experimentalInvalid, 'assertive'); 65901 return; 65902 } 65903 65904 this.addNewTokens([token]); 65905 this.props.speak(this.props.messages.added, 'assertive'); 65906 this.setState({ 65907 incompleteTokenValue: '', 65908 selectedSuggestionIndex: -1, 65909 selectedSuggestionScroll: false, 65910 isExpanded: !__experimentalExpandOnFocus 65911 }); 65912 65913 if (this.state.isActive) { 65914 this.input.focus(); 65915 } 65916 } 65917 65918 deleteToken(token) { 65919 const newTokens = this.props.value.filter(item => { 65920 return this.getTokenValue(item) !== this.getTokenValue(token); 65921 }); 65922 this.props.onChange(newTokens); 65923 this.props.speak(this.props.messages.removed, 'assertive'); 65924 } 65925 65926 getTokenValue(token) { 65927 if ('object' === typeof token) { 65928 return token.value; 65929 } 65930 65931 return token; 65932 } 65933 65934 getMatchingSuggestions() { 65935 let searchValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.state.incompleteTokenValue; 65936 let suggestions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : this.props.suggestions; 65937 let value = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : this.props.value; 65938 let maxSuggestions = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : this.props.maxSuggestions; 65939 let saveTransform = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : this.props.saveTransform; 65940 let match = saveTransform(searchValue); 65941 const startsWithMatch = []; 65942 const containsMatch = []; 65943 65944 if (match.length === 0) { 65945 suggestions = (0,external_lodash_namespaceObject.difference)(suggestions, value); 65946 } else { 65947 match = match.toLocaleLowerCase(); 65948 (0,external_lodash_namespaceObject.each)(suggestions, suggestion => { 65949 const index = suggestion.toLocaleLowerCase().indexOf(match); 65950 65951 if (value.indexOf(suggestion) === -1) { 65952 if (index === 0) { 65953 startsWithMatch.push(suggestion); 65954 } else if (index > 0) { 65955 containsMatch.push(suggestion); 65956 } 65957 } 65958 }); 65959 suggestions = startsWithMatch.concat(containsMatch); 65960 } 65961 65962 return (0,external_lodash_namespaceObject.take)(suggestions, maxSuggestions); 65963 } 65964 65965 getSelectedSuggestion() { 65966 if (this.state.selectedSuggestionIndex !== -1) { 65967 return this.getMatchingSuggestions()[this.state.selectedSuggestionIndex]; 65968 } 65969 } 65970 65971 valueContainsToken(token) { 65972 return (0,external_lodash_namespaceObject.some)(this.props.value, item => { 65973 return this.getTokenValue(token) === this.getTokenValue(item); 65974 }); 65975 } 65976 65977 getIndexOfInput() { 65978 return this.props.value.length - this.state.inputOffsetFromEnd; 65979 } 65980 65981 isInputEmpty() { 65982 return this.state.incompleteTokenValue.length === 0; 65983 } 65984 65985 inputHasValidValue() { 65986 return this.props.saveTransform(this.state.incompleteTokenValue).length > 0; 65987 } 65988 65989 updateSuggestions() { 65990 let resetSelectedSuggestion = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true; 65991 const { 65992 __experimentalExpandOnFocus 65993 } = this.props; 65994 const { 65995 incompleteTokenValue 65996 } = this.state; 65997 const inputHasMinimumChars = incompleteTokenValue.trim().length > 1; 65998 const matchingSuggestions = this.getMatchingSuggestions(incompleteTokenValue); 65999 const hasMatchingSuggestions = matchingSuggestions.length > 0; 66000 const newState = { 66001 isExpanded: __experimentalExpandOnFocus || inputHasMinimumChars && hasMatchingSuggestions 66002 }; 66003 66004 if (resetSelectedSuggestion) { 66005 newState.selectedSuggestionIndex = -1; 66006 newState.selectedSuggestionScroll = false; 66007 } 66008 66009 this.setState(newState); 66010 66011 if (inputHasMinimumChars) { 66012 const { 66013 debouncedSpeak 66014 } = this.props; 66015 const message = hasMatchingSuggestions ? (0,external_wp_i18n_namespaceObject.sprintf)( 66016 /* translators: %d: number of results. */ 66017 (0,external_wp_i18n_namespaceObject._n)('%d result found, use up and down arrow keys to navigate.', '%d results found, use up and down arrow keys to navigate.', matchingSuggestions.length), matchingSuggestions.length) : (0,external_wp_i18n_namespaceObject.__)('No results.'); 66018 debouncedSpeak(message, 'assertive'); 66019 } 66020 } 66021 66022 renderTokensAndInput() { 66023 const components = (0,external_lodash_namespaceObject.map)(this.props.value, this.renderToken); 66024 components.splice(this.getIndexOfInput(), 0, this.renderInput()); 66025 return components; 66026 } 66027 66028 renderToken(token, index, tokens) { 66029 const value = this.getTokenValue(token); 66030 const status = token.status ? token.status : undefined; 66031 const termPosition = index + 1; 66032 const termsCount = tokens.length; 66033 return (0,external_wp_element_namespaceObject.createElement)(Token, { 66034 key: 'token-' + value, 66035 value: value, 66036 status: status, 66037 title: token.title, 66038 displayTransform: this.props.displayTransform, 66039 onClickRemove: this.onTokenClickRemove, 66040 isBorderless: token.isBorderless || this.props.isBorderless, 66041 onMouseEnter: token.onMouseEnter, 66042 onMouseLeave: token.onMouseLeave, 66043 disabled: 'error' !== status && this.props.disabled, 66044 messages: this.props.messages, 66045 termsCount: termsCount, 66046 termPosition: termPosition 66047 }); 66048 } 66049 66050 renderInput() { 66051 const { 66052 autoCapitalize, 66053 autoComplete, 66054 maxLength, 66055 placeholder, 66056 value, 66057 instanceId 66058 } = this.props; 66059 let props = { 66060 instanceId, 66061 autoCapitalize, 66062 autoComplete, 66063 placeholder: value.length === 0 ? placeholder : '', 66064 ref: this.bindInput, 66065 key: 'input', 66066 disabled: this.props.disabled, 66067 value: this.state.incompleteTokenValue, 66068 onBlur: this.onBlur, 66069 isExpanded: this.state.isExpanded, 66070 selectedSuggestionIndex: this.state.selectedSuggestionIndex 66071 }; 66072 66073 if (!(maxLength && value.length >= maxLength)) { 66074 props = { ...props, 66075 onChange: this.onInputChange 66076 }; 66077 } 66078 66079 return (0,external_wp_element_namespaceObject.createElement)(token_input, props); 66080 } 66081 66082 render() { 66083 const { 66084 disabled, 66085 label = (0,external_wp_i18n_namespaceObject.__)('Add item'), 66086 instanceId, 66087 className, 66088 __experimentalShowHowTo 66089 } = this.props; 66090 const { 66091 isExpanded 66092 } = this.state; 66093 const classes = classnames_default()(className, 'components-form-token-field__input-container', { 66094 'is-active': this.state.isActive, 66095 'is-disabled': disabled 66096 }); 66097 let tokenFieldProps = { 66098 className: 'components-form-token-field', 66099 tabIndex: '-1' 66100 }; 66101 const matchingSuggestions = this.getMatchingSuggestions(); 66102 66103 if (!disabled) { 66104 tokenFieldProps = Object.assign({}, tokenFieldProps, { 66105 onKeyDown: this.onKeyDown, 66106 onKeyPress: this.onKeyPress, 66107 onFocus: this.onFocus 66108 }); 66109 } // Disable reason: There is no appropriate role which describes the 66110 // input container intended accessible usability. 66111 // TODO: Refactor click detection to use blur to stop propagation. 66112 66113 /* eslint-disable jsx-a11y/no-static-element-interactions */ 66114 66115 66116 return (0,external_wp_element_namespaceObject.createElement)("div", tokenFieldProps, (0,external_wp_element_namespaceObject.createElement)("label", { 66117 htmlFor: `components-form-token-input-$instanceId}`, 66118 className: "components-form-token-field__label" 66119 }, label), (0,external_wp_element_namespaceObject.createElement)("div", { 66120 ref: this.bindTokensAndInput, 66121 className: classes, 66122 tabIndex: "-1", 66123 onMouseDown: this.onContainerTouched, 66124 onTouchStart: this.onContainerTouched 66125 }, this.renderTokensAndInput(), isExpanded && (0,external_wp_element_namespaceObject.createElement)(suggestions_list, { 66126 instanceId: instanceId, 66127 match: this.props.saveTransform(this.state.incompleteTokenValue), 66128 displayTransform: this.props.displayTransform, 66129 suggestions: matchingSuggestions, 66130 selectedIndex: this.state.selectedSuggestionIndex, 66131 scrollIntoView: this.state.selectedSuggestionScroll, 66132 onHover: this.onSuggestionHovered, 66133 onSelect: this.onSuggestionSelected 66134 })), __experimentalShowHowTo && (0,external_wp_element_namespaceObject.createElement)("p", { 66135 id: `components-form-token-suggestions-howto-$instanceId}`, 66136 className: "components-form-token-field__help" 66137 }, this.props.tokenizeOnSpace ? (0,external_wp_i18n_namespaceObject.__)('Separate with commas, spaces, or the Enter key.') : (0,external_wp_i18n_namespaceObject.__)('Separate with commas or the Enter key.'))); 66138 /* eslint-enable jsx-a11y/no-static-element-interactions */ 66139 } 66140 66141 } 66142 66143 FormTokenField.defaultProps = { 66144 suggestions: Object.freeze([]), 66145 maxSuggestions: 100, 66146 value: Object.freeze([]), 66147 displayTransform: external_lodash_namespaceObject.identity, 66148 saveTransform: token => token.trim(), 66149 onChange: () => {}, 66150 onInputChange: () => {}, 66151 isBorderless: false, 66152 disabled: false, 66153 tokenizeOnSpace: false, 66154 messages: { 66155 added: (0,external_wp_i18n_namespaceObject.__)('Item added.'), 66156 removed: (0,external_wp_i18n_namespaceObject.__)('Item removed.'), 66157 remove: (0,external_wp_i18n_namespaceObject.__)('Remove item'), 66158 __experimentalInvalid: (0,external_wp_i18n_namespaceObject.__)('Invalid item') 66159 }, 66160 __experimentalExpandOnFocus: false, 66161 __experimentalValidateInput: () => true, 66162 __experimentalShowHowTo: true 66163 }; 66164 /* harmony default export */ var form_token_field = (with_spoken_messages((0,external_wp_compose_namespaceObject.withInstanceId)(FormTokenField))); 66165 66166 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/guide/icons.js 66167 66168 66169 /** 66170 * WordPress dependencies 66171 */ 66172 66173 const PageControlIcon = _ref => { 66174 let { 66175 isSelected 66176 } = _ref; 66177 return (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.SVG, { 66178 width: "8", 66179 height: "8", 66180 fill: "none", 66181 xmlns: "http://www.w3.org/2000/svg" 66182 }, (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.Circle, { 66183 cx: "4", 66184 cy: "4", 66185 r: "4", 66186 fill: isSelected ? '#419ECD' : '#E1E3E6' 66187 })); 66188 }; 66189 66190 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/guide/page-control.js 66191 66192 66193 /** 66194 * External dependencies 66195 */ 66196 66197 /** 66198 * WordPress dependencies 66199 */ 66200 66201 66202 /** 66203 * Internal dependencies 66204 */ 66205 66206 66207 66208 function PageControl(_ref) { 66209 let { 66210 currentPage, 66211 numberOfPages, 66212 setCurrentPage 66213 } = _ref; 66214 return (0,external_wp_element_namespaceObject.createElement)("ul", { 66215 className: "components-guide__page-control", 66216 "aria-label": (0,external_wp_i18n_namespaceObject.__)('Guide controls') 66217 }, (0,external_lodash_namespaceObject.times)(numberOfPages, page => (0,external_wp_element_namespaceObject.createElement)("li", { 66218 key: page // Set aria-current="step" on the active page, see https://www.w3.org/TR/wai-aria-1.1/#aria-current 66219 , 66220 "aria-current": page === currentPage ? 'step' : undefined 66221 }, (0,external_wp_element_namespaceObject.createElement)(build_module_button, { 66222 key: page, 66223 icon: (0,external_wp_element_namespaceObject.createElement)(PageControlIcon, { 66224 isSelected: page === currentPage 66225 }), 66226 "aria-label": (0,external_wp_i18n_namespaceObject.sprintf)( 66227 /* translators: 1: current page number 2: total number of pages */ 66228 (0,external_wp_i18n_namespaceObject.__)('Page %1$d of %2$d'), page + 1, numberOfPages), 66229 onClick: () => setCurrentPage(page) 66230 })))); 66231 } 66232 66233 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/guide/index.js 66234 66235 66236 /** 66237 * External dependencies 66238 */ 66239 66240 /** 66241 * WordPress dependencies 66242 */ 66243 66244 66245 66246 66247 66248 66249 /** 66250 * Internal dependencies 66251 */ 66252 66253 66254 66255 66256 function Guide(_ref) { 66257 let { 66258 children, 66259 className, 66260 contentLabel, 66261 finishButtonText, 66262 onFinish, 66263 pages = [] 66264 } = _ref; 66265 const guideContainer = (0,external_wp_element_namespaceObject.useRef)(); 66266 const [currentPage, setCurrentPage] = (0,external_wp_element_namespaceObject.useState)(0); 66267 (0,external_wp_element_namespaceObject.useEffect)(() => { 66268 if (external_wp_element_namespaceObject.Children.count(children)) { 66269 external_wp_deprecated_default()('Passing children to <Guide>', { 66270 since: '5.5', 66271 alternative: 'the `pages` prop' 66272 }); 66273 } 66274 }, [children]); 66275 (0,external_wp_element_namespaceObject.useEffect)(() => { 66276 var _focus$tabbable$find, _focus$tabbable$find$; 66277 66278 // Each time we change the current page, start from the first element of the page. 66279 // This also solves any focus loss that can happen. 66280 (_focus$tabbable$find = external_wp_dom_namespaceObject.focus.tabbable.find(guideContainer.current)) === null || _focus$tabbable$find === void 0 ? void 0 : (_focus$tabbable$find$ = _focus$tabbable$find[0]) === null || _focus$tabbable$find$ === void 0 ? void 0 : _focus$tabbable$find$.focus(); 66281 }, [currentPage]); 66282 66283 if (external_wp_element_namespaceObject.Children.count(children)) { 66284 pages = external_wp_element_namespaceObject.Children.map(children, child => ({ 66285 content: child 66286 })); 66287 } 66288 66289 const canGoBack = currentPage > 0; 66290 const canGoForward = currentPage < pages.length - 1; 66291 66292 const goBack = () => { 66293 if (canGoBack) { 66294 setCurrentPage(currentPage - 1); 66295 } 66296 }; 66297 66298 const goForward = () => { 66299 if (canGoForward) { 66300 setCurrentPage(currentPage + 1); 66301 } 66302 }; 66303 66304 if (pages.length === 0) { 66305 return null; 66306 } 66307 66308 return (0,external_wp_element_namespaceObject.createElement)(modal, { 66309 className: classnames_default()('components-guide', className), 66310 contentLabel: contentLabel, 66311 onRequestClose: onFinish, 66312 onKeyDown: event => { 66313 if (event.keyCode === external_wp_keycodes_namespaceObject.LEFT) { 66314 goBack(); 66315 } else if (event.keyCode === external_wp_keycodes_namespaceObject.RIGHT) { 66316 goForward(); 66317 } 66318 }, 66319 ref: guideContainer 66320 }, (0,external_wp_element_namespaceObject.createElement)("div", { 66321 className: "components-guide__container" 66322 }, (0,external_wp_element_namespaceObject.createElement)("div", { 66323 className: "components-guide__page" 66324 }, pages[currentPage].image, pages.length > 1 && (0,external_wp_element_namespaceObject.createElement)(PageControl, { 66325 currentPage: currentPage, 66326 numberOfPages: pages.length, 66327 setCurrentPage: setCurrentPage 66328 }), pages[currentPage].content), (0,external_wp_element_namespaceObject.createElement)("div", { 66329 className: "components-guide__footer" 66330 }, canGoBack && (0,external_wp_element_namespaceObject.createElement)(build_module_button, { 66331 className: "components-guide__back-button", 66332 onClick: goBack 66333 }, (0,external_wp_i18n_namespaceObject.__)('Previous')), canGoForward && (0,external_wp_element_namespaceObject.createElement)(build_module_button, { 66334 className: "components-guide__forward-button", 66335 onClick: goForward 66336 }, (0,external_wp_i18n_namespaceObject.__)('Next')), !canGoForward && (0,external_wp_element_namespaceObject.createElement)(build_module_button, { 66337 className: "components-guide__finish-button", 66338 onClick: onFinish 66339 }, finishButtonText || (0,external_wp_i18n_namespaceObject.__)('Finish'))))); 66340 } 66341 66342 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/guide/page.js 66343 66344 66345 /** 66346 * WordPress dependencies 66347 */ 66348 66349 66350 function GuidePage(props) { 66351 (0,external_wp_element_namespaceObject.useEffect)(() => { 66352 external_wp_deprecated_default()('<GuidePage>', { 66353 since: '5.5', 66354 alternative: 'the `pages` prop in <Guide>' 66355 }); 66356 }, []); 66357 return (0,external_wp_element_namespaceObject.createElement)("div", props); 66358 } 66359 66360 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/button/deprecated.js 66361 66362 66363 // @ts-nocheck 66364 66365 /** 66366 * WordPress dependencies 66367 */ 66368 66369 66370 /** 66371 * Internal dependencies 66372 */ 66373 66374 66375 66376 function IconButton(_ref, ref) { 66377 let { 66378 labelPosition, 66379 size, 66380 tooltip, 66381 label, 66382 ...props 66383 } = _ref; 66384 external_wp_deprecated_default()('wp.components.IconButton', { 66385 since: '5.4', 66386 alternative: 'wp.components.Button', 66387 version: '6.2' 66388 }); 66389 return (0,external_wp_element_namespaceObject.createElement)(build_module_button, extends_extends({}, props, { 66390 ref: ref, 66391 tooltipPosition: labelPosition, 66392 iconSize: size, 66393 showTooltip: tooltip !== undefined ? !!tooltip : undefined, 66394 label: tooltip || label 66395 })); 66396 } 66397 66398 /* harmony default export */ var deprecated = ((0,external_wp_element_namespaceObject.forwardRef)(IconButton)); 66399 66400 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/item-group/item/hook.js 66401 /** 66402 * External dependencies 66403 */ 66404 66405 /** 66406 * WordPress dependencies 66407 */ 66408 66409 /** 66410 * Internal dependencies 66411 */ 66412 66413 66414 66415 66416 66417 function hook_useItem(props) { 66418 const { 66419 as: asProp, 66420 className, 66421 onClick, 66422 role = 'listitem', 66423 size: sizeProp, 66424 ...otherProps 66425 } = useContextSystem(props, 'Item'); 66426 const { 66427 spacedAround, 66428 size: contextSize 66429 } = useItemGroupContext(); 66430 const size = sizeProp || contextSize; 66431 const as = asProp || (typeof onClick !== 'undefined' ? 'button' : 'div'); 66432 const cx = useCx(); 66433 const classes = (0,external_wp_element_namespaceObject.useMemo)(() => cx(as === 'button' && unstyledButton, itemSizes[size] || itemSizes.medium, item, spacedAround && styles_spacedAround, className), [as, className, cx, size, spacedAround]); 66434 const wrapperClassName = cx(itemWrapper); 66435 return { 66436 as, 66437 className: classes, 66438 onClick, 66439 wrapperClassName, 66440 role, 66441 ...otherProps 66442 }; 66443 } 66444 66445 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/item-group/item/component.js 66446 66447 66448 66449 /** 66450 * External dependencies 66451 */ 66452 66453 /** 66454 * Internal dependencies 66455 */ 66456 66457 66458 66459 66460 function component_Item(props, forwardedRef) { 66461 const { 66462 role, 66463 wrapperClassName, 66464 ...otherProps 66465 } = hook_useItem(props); 66466 return (0,external_wp_element_namespaceObject.createElement)("div", { 66467 role: role, 66468 className: wrapperClassName 66469 }, (0,external_wp_element_namespaceObject.createElement)(component, extends_extends({}, otherProps, { 66470 ref: forwardedRef 66471 }))); 66472 } 66473 66474 /* harmony default export */ var item_component = (contextConnect(component_Item, 'Item')); 66475 66476 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/keyboard-shortcuts/index.js 66477 66478 66479 /** 66480 * External dependencies 66481 */ 66482 66483 /** 66484 * WordPress dependencies 66485 */ 66486 66487 66488 66489 66490 function KeyboardShortcut(_ref) { 66491 let { 66492 target, 66493 callback, 66494 shortcut, 66495 bindGlobal, 66496 eventName 66497 } = _ref; 66498 (0,external_wp_compose_namespaceObject.useKeyboardShortcut)(shortcut, callback, { 66499 bindGlobal, 66500 target, 66501 eventName 66502 }); 66503 return null; 66504 } 66505 66506 function KeyboardShortcuts(_ref2) { 66507 let { 66508 children, 66509 shortcuts, 66510 bindGlobal, 66511 eventName 66512 } = _ref2; 66513 const target = (0,external_wp_element_namespaceObject.useRef)(); 66514 const element = (0,external_lodash_namespaceObject.map)(shortcuts, (callback, shortcut) => (0,external_wp_element_namespaceObject.createElement)(KeyboardShortcut, { 66515 key: shortcut, 66516 shortcut: shortcut, 66517 callback: callback, 66518 bindGlobal: bindGlobal, 66519 eventName: eventName, 66520 target: target 66521 })); // Render as non-visual if there are no children pressed. Keyboard 66522 // events will be bound to the document instead. 66523 66524 if (!external_wp_element_namespaceObject.Children.count(children)) { 66525 return element; 66526 } 66527 66528 return (0,external_wp_element_namespaceObject.createElement)("div", { 66529 ref: target 66530 }, element, children); 66531 } 66532 66533 /* harmony default export */ var keyboard_shortcuts = (KeyboardShortcuts); 66534 66535 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/menu-group/index.js 66536 66537 // @ts-nocheck 66538 66539 /** 66540 * External dependencies 66541 */ 66542 66543 /** 66544 * WordPress dependencies 66545 */ 66546 66547 66548 66549 function MenuGroup(props) { 66550 const { 66551 children, 66552 className = '', 66553 label, 66554 hideSeparator 66555 } = props; 66556 const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(MenuGroup); 66557 66558 if (!external_wp_element_namespaceObject.Children.count(children)) { 66559 return null; 66560 } 66561 66562 const labelId = `components-menu-group-label-$instanceId}`; 66563 const classNames = classnames_default()(className, 'components-menu-group', { 66564 'has-hidden-separator': hideSeparator 66565 }); 66566 return (0,external_wp_element_namespaceObject.createElement)("div", { 66567 className: classNames 66568 }, label && (0,external_wp_element_namespaceObject.createElement)("div", { 66569 className: "components-menu-group__label", 66570 id: labelId, 66571 "aria-hidden": "true" 66572 }, label), (0,external_wp_element_namespaceObject.createElement)("div", { 66573 role: "group", 66574 "aria-labelledby": label ? labelId : null 66575 }, children)); 66576 } 66577 /* harmony default export */ var menu_group = (MenuGroup); 66578 66579 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/menu-item/index.js 66580 66581 66582 // @ts-nocheck 66583 66584 /** 66585 * External dependencies 66586 */ 66587 66588 66589 /** 66590 * WordPress dependencies 66591 */ 66592 66593 66594 /** 66595 * Internal dependencies 66596 */ 66597 66598 66599 66600 66601 function MenuItem(props, ref) { 66602 let { 66603 children, 66604 info, 66605 className, 66606 icon, 66607 iconPosition = 'right', 66608 shortcut, 66609 isSelected, 66610 role = 'menuitem', 66611 ...buttonProps 66612 } = props; 66613 className = classnames_default()('components-menu-item__button', className); 66614 66615 if (info) { 66616 children = (0,external_wp_element_namespaceObject.createElement)("span", { 66617 className: "components-menu-item__info-wrapper" 66618 }, (0,external_wp_element_namespaceObject.createElement)("span", { 66619 className: "components-menu-item__item" 66620 }, children), (0,external_wp_element_namespaceObject.createElement)("span", { 66621 className: "components-menu-item__info" 66622 }, info)); 66623 } 66624 66625 if (icon && !(0,external_lodash_namespaceObject.isString)(icon)) { 66626 icon = (0,external_wp_element_namespaceObject.cloneElement)(icon, { 66627 className: classnames_default()('components-menu-items__item-icon', { 66628 'has-icon-right': iconPosition === 'right' 66629 }) 66630 }); 66631 } 66632 66633 return (0,external_wp_element_namespaceObject.createElement)(build_module_button, extends_extends({ 66634 ref: ref // Make sure aria-checked matches spec https://www.w3.org/TR/wai-aria-1.1/#aria-checked 66635 , 66636 "aria-checked": role === 'menuitemcheckbox' || role === 'menuitemradio' ? isSelected : undefined, 66637 role: role, 66638 icon: iconPosition === 'left' ? icon : undefined, 66639 className: className 66640 }, buttonProps), (0,external_wp_element_namespaceObject.createElement)("span", { 66641 className: "components-menu-item__item" 66642 }, children), (0,external_wp_element_namespaceObject.createElement)(build_module_shortcut, { 66643 className: "components-menu-item__shortcut", 66644 shortcut: shortcut 66645 }), icon && iconPosition === 'right' && (0,external_wp_element_namespaceObject.createElement)(build_module_icon, { 66646 icon: icon 66647 })); 66648 } 66649 /* harmony default export */ var menu_item = ((0,external_wp_element_namespaceObject.forwardRef)(MenuItem)); 66650 66651 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/menu-items-choice/index.js 66652 66653 66654 /** 66655 * External dependencies 66656 */ 66657 66658 /** 66659 * WordPress dependencies 66660 */ 66661 66662 66663 /** 66664 * Internal dependencies 66665 */ 66666 66667 66668 function MenuItemsChoice(_ref) { 66669 let { 66670 choices = [], 66671 onHover = external_lodash_namespaceObject.noop, 66672 onSelect, 66673 value 66674 } = _ref; 66675 return choices.map(item => { 66676 const isSelected = value === item.value; 66677 return (0,external_wp_element_namespaceObject.createElement)(menu_item, { 66678 key: item.value, 66679 role: "menuitemradio", 66680 icon: isSelected && library_check, 66681 info: item.info, 66682 isSelected: isSelected, 66683 shortcut: item.shortcut, 66684 className: "components-menu-items-choice", 66685 onClick: () => { 66686 if (!isSelected) { 66687 onSelect(item.value); 66688 } 66689 }, 66690 onMouseEnter: () => onHover(item.value), 66691 onMouseLeave: () => onHover(null), 66692 "aria-label": item['aria-label'] 66693 }, item.label); 66694 }); 66695 } 66696 66697 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/navigable-container/tabbable.js 66698 66699 66700 // @ts-nocheck 66701 66702 /** 66703 * WordPress dependencies 66704 */ 66705 66706 66707 /** 66708 * Internal dependencies 66709 */ 66710 66711 66712 function TabbableContainer(_ref, ref) { 66713 let { 66714 eventToOffset, 66715 ...props 66716 } = _ref; 66717 66718 const innerEventToOffset = evt => { 66719 const { 66720 keyCode, 66721 shiftKey 66722 } = evt; 66723 66724 if (external_wp_keycodes_namespaceObject.TAB === keyCode) { 66725 return shiftKey ? -1 : 1; 66726 } // Allow custom handling of keys besides Tab. 66727 // 66728 // By default, TabbableContainer will move focus forward on Tab and 66729 // backward on Shift+Tab. The handler below will be used for all other 66730 // events. The semantics for `eventToOffset`'s return 66731 // values are the following: 66732 // 66733 // - +1: move focus forward 66734 // - -1: move focus backward 66735 // - 0: don't move focus, but acknowledge event and thus stop it 66736 // - undefined: do nothing, let the event propagate. 66737 66738 66739 if (eventToOffset) { 66740 return eventToOffset(evt); 66741 } 66742 }; 66743 66744 return (0,external_wp_element_namespaceObject.createElement)(container, extends_extends({ 66745 ref: ref, 66746 stopNavigationEvents: true, 66747 onlyBrowserTabstops: true, 66748 eventToOffset: innerEventToOffset 66749 }, props)); 66750 } 66751 /* harmony default export */ var tabbable = ((0,external_wp_element_namespaceObject.forwardRef)(TabbableContainer)); 66752 66753 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/navigation/constants.js 66754 const ROOT_MENU = 'root'; 66755 const SEARCH_FOCUS_DELAY = 100; 66756 66757 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/navigation/context.js 66758 /** 66759 * External dependencies 66760 */ 66761 66762 /** 66763 * WordPress dependencies 66764 */ 66765 66766 66767 /** 66768 * Internal dependencies 66769 */ 66770 66771 66772 const NavigationContext = (0,external_wp_element_namespaceObject.createContext)({ 66773 activeItem: undefined, 66774 activeMenu: ROOT_MENU, 66775 setActiveMenu: external_lodash_namespaceObject.noop, 66776 isMenuEmpty: external_lodash_namespaceObject.noop, 66777 navigationTree: { 66778 items: {}, 66779 getItem: external_lodash_namespaceObject.noop, 66780 addItem: external_lodash_namespaceObject.noop, 66781 removeItem: external_lodash_namespaceObject.noop, 66782 menus: {}, 66783 getMenu: external_lodash_namespaceObject.noop, 66784 addMenu: external_lodash_namespaceObject.noop, 66785 removeMenu: external_lodash_namespaceObject.noop, 66786 childMenu: {}, 66787 traverseMenu: external_lodash_namespaceObject.noop, 66788 isMenuEmpty: external_lodash_namespaceObject.noop 66789 } 66790 }); 66791 const useNavigationContext = () => (0,external_wp_element_namespaceObject.useContext)(NavigationContext); 66792 66793 ;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/search.js 66794 66795 66796 /** 66797 * WordPress dependencies 66798 */ 66799 66800 const search = (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.SVG, { 66801 xmlns: "http://www.w3.org/2000/svg", 66802 viewBox: "0 0 24 24" 66803 }, (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.Path, { 66804 d: "M13.5 6C10.5 6 8 8.5 8 11.5c0 1.1.3 2.1.9 3l-3.4 3 1 1.1 3.4-2.9c1 .9 2.2 1.4 3.6 1.4 3 0 5.5-2.5 5.5-5.5C19 8.5 16.5 6 13.5 6zm0 9.5c-2.2 0-4-1.8-4-4s1.8-4 4-4 4 1.8 4 4-1.8 4-4 4z" 66805 })); 66806 /* harmony default export */ var library_search = (search); 66807 66808 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/utils/hooks/use-combined-ref.js 66809 /** 66810 * WordPress dependencies 66811 */ 66812 66813 /** 66814 * External dependencies 66815 */ 66816 66817 function useCombinedRef() { 66818 for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) { 66819 refs[_key] = arguments[_key]; 66820 } 66821 66822 const targetRef = (0,external_wp_element_namespaceObject.useRef)(null); 66823 (0,external_wp_element_namespaceObject.useEffect)(() => { 66824 refs.forEach(ref => { 66825 if (!ref) return; 66826 66827 if (typeof ref === 'function') { 66828 ref(targetRef.current); 66829 } else { 66830 ref.current = targetRef.current; 66831 } 66832 }); 66833 }, [refs]); 66834 return targetRef; 66835 } 66836 66837 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/search-control/index.js 66838 66839 66840 /** 66841 * External dependencies 66842 */ 66843 66844 /** 66845 * WordPress dependencies 66846 */ 66847 66848 66849 66850 66851 66852 /** 66853 * Internal dependencies 66854 */ 66855 66856 66857 66858 66859 66860 function SearchControl(_ref, ref) { 66861 let { 66862 className, 66863 onChange, 66864 onKeyDown, 66865 value, 66866 label, 66867 placeholder = (0,external_wp_i18n_namespaceObject.__)('Search'), 66868 hideLabelFromVision = true, 66869 help, 66870 onClose 66871 } = _ref; 66872 const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(SearchControl); 66873 const searchInput = useCombinedRef(ref); 66874 const id = `components-search-control-$instanceId}`; 66875 66876 const renderRightButton = () => { 66877 if (onClose) { 66878 return (0,external_wp_element_namespaceObject.createElement)(build_module_button, { 66879 icon: close_small, 66880 label: (0,external_wp_i18n_namespaceObject.__)('Close search'), 66881 onClick: onClose 66882 }); 66883 } 66884 66885 if (!!value) { 66886 return (0,external_wp_element_namespaceObject.createElement)(build_module_button, { 66887 icon: close_small, 66888 label: (0,external_wp_i18n_namespaceObject.__)('Reset search'), 66889 onClick: () => { 66890 onChange(''); 66891 searchInput.current.focus(); 66892 } 66893 }); 66894 } 66895 66896 return (0,external_wp_element_namespaceObject.createElement)(icons_build_module_icon, { 66897 icon: library_search 66898 }); 66899 }; 66900 66901 return (0,external_wp_element_namespaceObject.createElement)(base_control, { 66902 label: label, 66903 id: id, 66904 hideLabelFromVision: hideLabelFromVision, 66905 help: help, 66906 className: classnames_default()(className, 'components-search-control') 66907 }, (0,external_wp_element_namespaceObject.createElement)("div", { 66908 className: "components-search-control__input-wrapper" 66909 }, (0,external_wp_element_namespaceObject.createElement)("input", { 66910 ref: searchInput, 66911 className: "components-search-control__input", 66912 id: id, 66913 type: "search", 66914 placeholder: placeholder, 66915 onChange: event => onChange(event.target.value), 66916 onKeyDown: onKeyDown, 66917 autoComplete: "off", 66918 value: value || '' 66919 }), (0,external_wp_element_namespaceObject.createElement)("div", { 66920 className: "components-search-control__icon" 66921 }, renderRightButton()))); 66922 } 66923 66924 /* harmony default export */ var search_control = ((0,external_wp_element_namespaceObject.forwardRef)(SearchControl)); 66925 66926 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/navigation/styles/navigation-styles.js 66927 66928 66929 function navigation_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } 66930 66931 /** 66932 * External dependencies 66933 */ 66934 66935 /** 66936 * WordPress dependencies 66937 */ 66938 66939 /** 66940 * Internal dependencies 66941 */ 66942 66943 66944 66945 66946 66947 66948 66949 66950 const NavigationUI = emotion_styled_base_browser_esm("div", true ? { 66951 target: "ejwewyf11" 66952 } : 0)("width:100%;box-sizing:border-box;padding:0 ", space(4), ";overflow:hidden;" + ( true ? "" : 0)); 66953 const MenuUI = emotion_styled_base_browser_esm("div", true ? { 66954 target: "ejwewyf10" 66955 } : 0)("margin-top:", space(6), ";margin-bottom:", space(6), ";display:flex;flex-direction:column;ul{padding:0;margin:0;list-style:none;}.components-navigation__back-button{margin-bottom:", space(6), ";}.components-navigation__group+.components-navigation__group{margin-top:", space(6), ";}" + ( true ? "" : 0)); 66956 const MenuBackButtonUI = /*#__PURE__*/emotion_styled_base_browser_esm(build_module_button, true ? { 66957 target: "ejwewyf9" 66958 } : 0)( true ? { 66959 name: "26l0q2", 66960 styles: "&.is-tertiary{color:inherit;opacity:0.7;&:hover:not( :disabled ){opacity:1;box-shadow:none;color:inherit;}&:active:not( :disabled ){background:transparent;opacity:1;color:inherit;}}" 66961 } : 0); 66962 const MenuTitleUI = emotion_styled_base_browser_esm("div", true ? { 66963 target: "ejwewyf8" 66964 } : 0)( true ? { 66965 name: "1aubja5", 66966 styles: "overflow:hidden;width:100%" 66967 } : 0); 66968 const MenuTitleActionsUI = emotion_styled_base_browser_esm("span", true ? { 66969 target: "ejwewyf7" 66970 } : 0)("height:", space(6), ";.components-button.is-small{color:inherit;opacity:0.7;margin-right:", space(1), ";padding:0;&:active:not( :disabled ){background:none;opacity:1;color:inherit;}&:hover:not( :disabled ){box-shadow:none;opacity:1;color:inherit;}}" + ( true ? "" : 0)); 66971 const MenuTitleSearchUI = /*#__PURE__*/emotion_styled_base_browser_esm(search_control, true ? { 66972 target: "ejwewyf6" 66973 } : 0)( true ? { 66974 name: "za3n3e", 66975 styles: "input[type='search'].components-search-control__input{margin:0;background:#303030;color:#fff;&:focus{background:#434343;color:#fff;}&::placeholder{color:rgba( 255, 255, 255, 0.6 );}}svg{fill:white;}.components-button.has-icon{padding:0;min-width:auto;}" 66976 } : 0); 66977 const GroupTitleUI = /*#__PURE__*/emotion_styled_base_browser_esm(heading_component, true ? { 66978 target: "ejwewyf5" 66979 } : 0)("min-height:", space(12), ";align-items:center;color:inherit;display:flex;justify-content:space-between;margin-bottom:", space(2), ";padding:", () => (0,external_wp_i18n_namespaceObject.isRTL)() ? `$space(1)} $space(4)} $space(1)} $space(2)}` : `$space(1)} $space(2)} $space(1)} $space(4)}`, ";" + ( true ? "" : 0)); 66980 const ItemBaseUI = emotion_styled_base_browser_esm("li", true ? { 66981 target: "ejwewyf4" 66982 } : 0)("border-radius:2px;color:inherit;margin-bottom:0;>button,>a.components-button,>a{width:100%;color:inherit;opacity:0.7;padding:", space(2), " ", space(4), ";", rtl({ 66983 textAlign: 'left' 66984 }, { 66985 textAlign: 'right' 66986 }), " &:hover,&:focus:not( [aria-disabled='true'] ):active,&:active:not( [aria-disabled='true'] ):active{color:inherit;opacity:1;}}&.is-active{background-color:", UI.theme, ";color:", BASE.white, ";>button,>a{color:", BASE.white, ";opacity:1;}}>svg path{color:", G2.lightGray.ui, ";}" + ( true ? "" : 0)); 66987 const ItemUI = emotion_styled_base_browser_esm("div", true ? { 66988 target: "ejwewyf3" 66989 } : 0)("display:flex;align-items:center;height:auto;min-height:40px;margin:0;padding:", space(1.5), " ", space(4), ";font-weight:400;line-height:20px;width:100%;color:inherit;opacity:0.7;" + ( true ? "" : 0)); 66990 const ItemIconUI = emotion_styled_base_browser_esm("span", true ? { 66991 target: "ejwewyf2" 66992 } : 0)("display:flex;margin-right:", space(2), ";" + ( true ? "" : 0)); 66993 const ItemBadgeUI = emotion_styled_base_browser_esm("span", true ? { 66994 target: "ejwewyf1" 66995 } : 0)("margin-left:", () => (0,external_wp_i18n_namespaceObject.isRTL)() ? '0' : space(2), ";margin-right:", () => (0,external_wp_i18n_namespaceObject.isRTL)() ? space(2) : '0', ";display:inline-flex;padding:", space(1), " ", space(3), ";border-radius:2px;animation:fade-in 250ms ease-out;@keyframes fade-in{from{opacity:0;}to{opacity:1;}}", reduceMotion('animation'), ";" + ( true ? "" : 0)); 66996 const ItemTitleUI = /*#__PURE__*/emotion_styled_base_browser_esm(text_component, true ? { 66997 target: "ejwewyf0" 66998 } : 0)(() => (0,external_wp_i18n_namespaceObject.isRTL)() ? 'margin-left: auto;' : 'margin-right: auto;', " font-size:14px;line-height:20px;color:inherit;" + ( true ? "" : 0)); 66999 67000 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/navigation/use-navigation-tree-nodes.js 67001 /** 67002 * External dependencies 67003 */ 67004 67005 /** 67006 * WordPress dependencies 67007 */ 67008 67009 67010 const useNavigationTreeNodes = () => { 67011 const [nodes, setNodes] = (0,external_wp_element_namespaceObject.useState)({}); 67012 67013 const getNode = key => nodes[key]; 67014 67015 const addNode = (key, value) => setNodes(original => ({ ...original, 67016 [key]: (0,external_lodash_namespaceObject.omit)(value, 'children') 67017 })); 67018 67019 const removeNode = key => setNodes(original => (0,external_lodash_namespaceObject.omit)(original, key)); 67020 67021 return { 67022 nodes, 67023 getNode, 67024 addNode, 67025 removeNode 67026 }; 67027 }; 67028 67029 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/navigation/use-create-navigation-tree.js 67030 /** 67031 * WordPress dependencies 67032 */ 67033 67034 /** 67035 * Internal dependencies 67036 */ 67037 67038 67039 const useCreateNavigationTree = () => { 67040 const { 67041 nodes: items, 67042 getNode: getItem, 67043 addNode: addItem, 67044 removeNode: removeItem 67045 } = useNavigationTreeNodes(); 67046 const { 67047 nodes: menus, 67048 getNode: getMenu, 67049 addNode: addMenu, 67050 removeNode: removeMenu 67051 } = useNavigationTreeNodes(); 67052 /** 67053 * Stores direct nested menus of menus 67054 * This makes it easy to traverse menu tree 67055 * 67056 * Key is the menu prop of the menu 67057 * Value is an array of menu keys 67058 */ 67059 67060 const [childMenu, setChildMenu] = (0,external_wp_element_namespaceObject.useState)({}); 67061 67062 const getChildMenu = menu => childMenu[menu] || []; 67063 67064 const traverseMenu = (startMenu, callback) => { 67065 const visited = []; 67066 let queue = [startMenu]; 67067 let current; 67068 67069 while (queue.length > 0) { 67070 current = getMenu(queue.shift()); 67071 67072 if (!current || visited.includes(current.menu)) { 67073 continue; 67074 } 67075 67076 visited.push(current.menu); 67077 queue = [...queue, ...getChildMenu(current.menu)]; 67078 67079 if (callback(current) === false) { 67080 break; 67081 } 67082 } 67083 }; 67084 67085 const isMenuEmpty = menuToCheck => { 67086 let isEmpty = true; 67087 traverseMenu(menuToCheck, current => { 67088 if (!current.isEmpty) { 67089 isEmpty = false; 67090 return false; 67091 } 67092 }); 67093 return isEmpty; 67094 }; 67095 67096 return { 67097 items, 67098 getItem, 67099 addItem, 67100 removeItem, 67101 menus, 67102 getMenu, 67103 addMenu: (key, value) => { 67104 setChildMenu(state => { 67105 const newState = { ...state 67106 }; 67107 67108 if (!newState[value.parentMenu]) { 67109 newState[value.parentMenu] = []; 67110 } 67111 67112 newState[value.parentMenu].push(key); 67113 return newState; 67114 }); 67115 addMenu(key, value); 67116 }, 67117 removeMenu, 67118 childMenu, 67119 traverseMenu, 67120 isMenuEmpty 67121 }; 67122 }; 67123 67124 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/navigation/index.js 67125 67126 67127 /** 67128 * External dependencies 67129 */ 67130 67131 67132 /** 67133 * WordPress dependencies 67134 */ 67135 67136 67137 67138 /** 67139 * Internal dependencies 67140 */ 67141 67142 67143 67144 67145 67146 67147 function Navigation(_ref) { 67148 let { 67149 activeItem, 67150 activeMenu = ROOT_MENU, 67151 children, 67152 className, 67153 onActivateMenu = external_lodash_namespaceObject.noop 67154 } = _ref; 67155 const [menu, setMenu] = (0,external_wp_element_namespaceObject.useState)(activeMenu); 67156 const [slideOrigin, setSlideOrigin] = (0,external_wp_element_namespaceObject.useState)(); 67157 const navigationTree = useCreateNavigationTree(); 67158 const defaultSlideOrigin = (0,external_wp_i18n_namespaceObject.isRTL)() ? 'right' : 'left'; 67159 67160 const setActiveMenu = function (menuId) { 67161 let slideInOrigin = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultSlideOrigin; 67162 67163 if (!navigationTree.getMenu(menuId)) { 67164 return; 67165 } 67166 67167 setSlideOrigin(slideInOrigin); 67168 setMenu(menuId); 67169 onActivateMenu(menuId); 67170 }; // Used to prevent the sliding animation on mount 67171 67172 67173 const isMounted = (0,external_wp_element_namespaceObject.useRef)(false); 67174 (0,external_wp_element_namespaceObject.useEffect)(() => { 67175 if (!isMounted.current) { 67176 isMounted.current = true; 67177 } 67178 }, []); 67179 (0,external_wp_element_namespaceObject.useEffect)(() => { 67180 if (activeMenu !== menu) { 67181 setActiveMenu(activeMenu); 67182 } 67183 }, [activeMenu]); 67184 const context = { 67185 activeItem, 67186 activeMenu: menu, 67187 setActiveMenu, 67188 navigationTree 67189 }; 67190 const classes = classnames_default()('components-navigation', className); 67191 const animateClassName = getAnimateClassName({ 67192 type: 'slide-in', 67193 origin: slideOrigin 67194 }); 67195 return (0,external_wp_element_namespaceObject.createElement)(NavigationUI, { 67196 className: classes 67197 }, (0,external_wp_element_namespaceObject.createElement)("div", { 67198 key: menu, 67199 className: classnames_default()({ 67200 [animateClassName]: isMounted.current && slideOrigin 67201 }) 67202 }, (0,external_wp_element_namespaceObject.createElement)(NavigationContext.Provider, { 67203 value: context 67204 }, children))); 67205 } 67206 67207 ;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/chevron-right.js 67208 67209 67210 /** 67211 * WordPress dependencies 67212 */ 67213 67214 const chevronRight = (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.SVG, { 67215 xmlns: "http://www.w3.org/2000/svg", 67216 viewBox: "0 0 24 24" 67217 }, (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.Path, { 67218 d: "M10.6 6L9.4 7l4.6 5-4.6 5 1.2 1 5.4-6z" 67219 })); 67220 /* harmony default export */ var chevron_right = (chevronRight); 67221 67222 ;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/chevron-left.js 67223 67224 67225 /** 67226 * WordPress dependencies 67227 */ 67228 67229 const chevronLeft = (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.SVG, { 67230 xmlns: "http://www.w3.org/2000/svg", 67231 viewBox: "0 0 24 24" 67232 }, (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.Path, { 67233 d: "M14.6 7l-1.2-1L8 12l5.4 6 1.2-1-4.6-5z" 67234 })); 67235 /* harmony default export */ var chevron_left = (chevronLeft); 67236 67237 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/navigation/back-button/index.js 67238 67239 67240 /** 67241 * External dependencies 67242 */ 67243 67244 /** 67245 * WordPress dependencies 67246 */ 67247 67248 67249 67250 67251 /** 67252 * Internal dependencies 67253 */ 67254 67255 67256 67257 67258 function NavigationBackButton(_ref, ref) { 67259 var _navigationTree$getMe; 67260 67261 let { 67262 backButtonLabel, 67263 className, 67264 href, 67265 onClick, 67266 parentMenu 67267 } = _ref; 67268 const { 67269 setActiveMenu, 67270 navigationTree 67271 } = useNavigationContext(); 67272 const classes = classnames_default()('components-navigation__back-button', className); 67273 const parentMenuTitle = (_navigationTree$getMe = navigationTree.getMenu(parentMenu)) === null || _navigationTree$getMe === void 0 ? void 0 : _navigationTree$getMe.title; 67274 67275 const handleOnClick = event => { 67276 if (typeof onClick === 'function') { 67277 onClick(event); 67278 } 67279 67280 const animationDirection = (0,external_wp_i18n_namespaceObject.isRTL)() ? 'left' : 'right'; 67281 67282 if (parentMenu && !event.defaultPrevented) { 67283 setActiveMenu(parentMenu, animationDirection); 67284 } 67285 }; 67286 67287 const icon = (0,external_wp_i18n_namespaceObject.isRTL)() ? chevron_right : chevron_left; 67288 return (0,external_wp_element_namespaceObject.createElement)(MenuBackButtonUI, { 67289 className: classes, 67290 href: href, 67291 variant: "tertiary", 67292 ref: ref, 67293 onClick: handleOnClick 67294 }, (0,external_wp_element_namespaceObject.createElement)(icons_build_module_icon, { 67295 icon: icon 67296 }), backButtonLabel || parentMenuTitle || (0,external_wp_i18n_namespaceObject.__)('Back')); 67297 } 67298 67299 /* harmony default export */ var back_button = ((0,external_wp_element_namespaceObject.forwardRef)(NavigationBackButton)); 67300 67301 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/navigation/group/context.js 67302 /** 67303 * WordPress dependencies 67304 */ 67305 67306 const NavigationGroupContext = (0,external_wp_element_namespaceObject.createContext)({ 67307 group: undefined 67308 }); 67309 const useNavigationGroupContext = () => (0,external_wp_element_namespaceObject.useContext)(NavigationGroupContext); 67310 67311 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/navigation/group/index.js 67312 67313 67314 /** 67315 * External dependencies 67316 */ 67317 67318 67319 /** 67320 * WordPress dependencies 67321 */ 67322 67323 67324 /** 67325 * Internal dependencies 67326 */ 67327 67328 67329 67330 67331 function NavigationGroup(_ref) { 67332 let { 67333 children, 67334 className, 67335 title 67336 } = _ref; 67337 const [groupId] = (0,external_wp_element_namespaceObject.useState)((0,external_lodash_namespaceObject.uniqueId)('group-')); 67338 const { 67339 navigationTree: { 67340 items 67341 } 67342 } = useNavigationContext(); 67343 const context = { 67344 group: groupId 67345 }; // Keep the children rendered to make sure invisible items are included in the navigation tree. 67346 67347 if (!(0,external_lodash_namespaceObject.find)(items, { 67348 group: groupId, 67349 _isVisible: true 67350 })) { 67351 return (0,external_wp_element_namespaceObject.createElement)(NavigationGroupContext.Provider, { 67352 value: context 67353 }, children); 67354 } 67355 67356 const groupTitleId = `components-navigation__group-title-$groupId}`; 67357 const classes = classnames_default()('components-navigation__group', className); 67358 return (0,external_wp_element_namespaceObject.createElement)(NavigationGroupContext.Provider, { 67359 value: context 67360 }, (0,external_wp_element_namespaceObject.createElement)("li", { 67361 className: classes 67362 }, title && (0,external_wp_element_namespaceObject.createElement)(GroupTitleUI, { 67363 className: "components-navigation__group-title", 67364 id: groupTitleId, 67365 level: 3 67366 }, title), (0,external_wp_element_namespaceObject.createElement)("ul", { 67367 "aria-labelledby": groupTitleId, 67368 role: "group" 67369 }, children))); 67370 } 67371 67372 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/navigation/item/base-content.js 67373 67374 67375 /** 67376 * Internal dependencies 67377 */ 67378 67379 function NavigationItemBaseContent(props) { 67380 const { 67381 badge, 67382 title 67383 } = props; 67384 return (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, title && (0,external_wp_element_namespaceObject.createElement)(ItemTitleUI, { 67385 className: "components-navigation__item-title", 67386 variant: "body.small", 67387 as: "span" 67388 }, title), badge && (0,external_wp_element_namespaceObject.createElement)(ItemBadgeUI, { 67389 className: "components-navigation__item-badge" 67390 }, badge)); 67391 } 67392 67393 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/navigation/menu/context.js 67394 /** 67395 * WordPress dependencies 67396 */ 67397 67398 const NavigationMenuContext = (0,external_wp_element_namespaceObject.createContext)({ 67399 menu: undefined, 67400 search: '' 67401 }); 67402 const useNavigationMenuContext = () => (0,external_wp_element_namespaceObject.useContext)(NavigationMenuContext); 67403 67404 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/navigation/utils.js 67405 /** 67406 * External dependencies 67407 */ 67408 // @see packages/block-editor/src/components/inserter/search-items.js 67409 67410 const normalizeInput = input => (0,external_lodash_namespaceObject.deburr)(input).replace(/^\//, '').toLowerCase(); 67411 const normalizedSearch = (title, search) => -1 !== normalizeInput(title).indexOf(normalizeInput(search)); 67412 67413 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/navigation/item/use-navigation-tree-item.js 67414 /** 67415 * WordPress dependencies 67416 */ 67417 67418 /** 67419 * Internal dependencies 67420 */ 67421 67422 67423 67424 67425 67426 const useNavigationTreeItem = (itemId, props) => { 67427 const { 67428 activeMenu, 67429 navigationTree: { 67430 addItem, 67431 removeItem 67432 } 67433 } = useNavigationContext(); 67434 const { 67435 group 67436 } = useNavigationGroupContext(); 67437 const { 67438 menu, 67439 search 67440 } = useNavigationMenuContext(); 67441 (0,external_wp_element_namespaceObject.useEffect)(() => { 67442 const isMenuActive = activeMenu === menu; 67443 const isItemVisible = !search || normalizedSearch(props.title, search); 67444 addItem(itemId, { ...props, 67445 group, 67446 menu, 67447 _isVisible: isMenuActive && isItemVisible 67448 }); 67449 return () => { 67450 removeItem(itemId); 67451 }; 67452 }, [activeMenu, search]); 67453 }; 67454 67455 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/navigation/item/base.js 67456 67457 67458 67459 /** 67460 * External dependencies 67461 */ 67462 67463 67464 /** 67465 * WordPress dependencies 67466 */ 67467 67468 67469 /** 67470 * Internal dependencies 67471 */ 67472 67473 67474 67475 67476 function NavigationItemBase(props) { 67477 var _navigationTree$getIt; 67478 67479 const { 67480 children, 67481 className, 67482 ...restProps 67483 } = props; 67484 const [itemId] = (0,external_wp_element_namespaceObject.useState)((0,external_lodash_namespaceObject.uniqueId)('item-')); 67485 useNavigationTreeItem(itemId, props); 67486 const { 67487 navigationTree 67488 } = useNavigationContext(); 67489 67490 if (!((_navigationTree$getIt = navigationTree.getItem(itemId)) !== null && _navigationTree$getIt !== void 0 && _navigationTree$getIt._isVisible)) { 67491 return null; 67492 } 67493 67494 const classes = classnames_default()('components-navigation__item', className); 67495 return (0,external_wp_element_namespaceObject.createElement)(ItemBaseUI, extends_extends({ 67496 className: classes 67497 }, restProps), children); 67498 } 67499 67500 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/navigation/item/index.js 67501 67502 67503 67504 /** 67505 * External dependencies 67506 */ 67507 67508 67509 /** 67510 * WordPress dependencies 67511 */ 67512 67513 67514 67515 /** 67516 * Internal dependencies 67517 */ 67518 67519 67520 67521 67522 67523 67524 function NavigationItem(props) { 67525 const { 67526 badge, 67527 children, 67528 className, 67529 href, 67530 item, 67531 navigateToMenu, 67532 onClick = external_lodash_namespaceObject.noop, 67533 title, 67534 icon, 67535 hideIfTargetMenuEmpty, 67536 isText, 67537 ...restProps 67538 } = props; 67539 const { 67540 activeItem, 67541 setActiveMenu, 67542 navigationTree: { 67543 isMenuEmpty 67544 } 67545 } = useNavigationContext(); // If hideIfTargetMenuEmpty prop is true 67546 // And the menu we are supposed to navigate to 67547 // Is marked as empty, then we skip rendering the item. 67548 67549 if (hideIfTargetMenuEmpty && navigateToMenu && isMenuEmpty(navigateToMenu)) { 67550 return null; 67551 } 67552 67553 const isActive = item && activeItem === item; 67554 const classes = classnames_default()(className, { 67555 'is-active': isActive 67556 }); 67557 67558 const onItemClick = event => { 67559 if (navigateToMenu) { 67560 setActiveMenu(navigateToMenu); 67561 } 67562 67563 onClick(event); 67564 }; 67565 67566 const navigationIcon = (0,external_wp_i18n_namespaceObject.isRTL)() ? chevron_left : chevron_right; 67567 const baseProps = children ? props : { ...props, 67568 onClick: undefined 67569 }; 67570 const itemProps = isText ? restProps : { 67571 as: build_module_button, 67572 href, 67573 onClick: onItemClick, 67574 'aria-current': isActive ? 'page' : undefined, 67575 ...restProps 67576 }; 67577 return (0,external_wp_element_namespaceObject.createElement)(NavigationItemBase, extends_extends({}, baseProps, { 67578 className: classes 67579 }), children || (0,external_wp_element_namespaceObject.createElement)(ItemUI, itemProps, icon && (0,external_wp_element_namespaceObject.createElement)(ItemIconUI, null, (0,external_wp_element_namespaceObject.createElement)(icons_build_module_icon, { 67580 icon: icon 67581 })), (0,external_wp_element_namespaceObject.createElement)(NavigationItemBaseContent, { 67582 title: title, 67583 badge: badge 67584 }), navigateToMenu && (0,external_wp_element_namespaceObject.createElement)(icons_build_module_icon, { 67585 icon: navigationIcon 67586 }))); 67587 } 67588 67589 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/navigation/menu/use-navigation-tree-menu.js 67590 /** 67591 * WordPress dependencies 67592 */ 67593 67594 /** 67595 * Internal dependencies 67596 */ 67597 67598 67599 67600 const useNavigationTreeMenu = props => { 67601 const { 67602 navigationTree: { 67603 addMenu, 67604 removeMenu 67605 } 67606 } = useNavigationContext(); 67607 const key = props.menu || ROOT_MENU; 67608 (0,external_wp_element_namespaceObject.useEffect)(() => { 67609 addMenu(key, { ...props, 67610 menu: key 67611 }); 67612 return () => { 67613 removeMenu(key); 67614 }; 67615 }, []); 67616 }; 67617 67618 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/navigation/menu/menu-title-search.js 67619 67620 67621 /** 67622 * External dependencies 67623 */ 67624 67625 /** 67626 * WordPress dependencies 67627 */ 67628 67629 67630 67631 67632 /** 67633 * Internal dependencies 67634 */ 67635 67636 67637 67638 67639 67640 67641 67642 function MenuTitleSearch(_ref) { 67643 let { 67644 debouncedSpeak, 67645 onCloseSearch, 67646 onSearch, 67647 search, 67648 title 67649 } = _ref; 67650 const { 67651 navigationTree: { 67652 items 67653 } 67654 } = useNavigationContext(); 67655 const { 67656 menu 67657 } = useNavigationMenuContext(); 67658 const inputRef = (0,external_wp_element_namespaceObject.useRef)(); // Wait for the slide-in animation to complete before autofocusing the input. 67659 // This prevents scrolling to the input during the animation. 67660 67661 (0,external_wp_element_namespaceObject.useEffect)(() => { 67662 const delayedFocus = setTimeout(() => { 67663 inputRef.current.focus(); 67664 }, SEARCH_FOCUS_DELAY); 67665 return () => { 67666 clearTimeout(delayedFocus); 67667 }; 67668 }, []); 67669 (0,external_wp_element_namespaceObject.useEffect)(() => { 67670 if (!search) { 67671 return; 67672 } 67673 67674 const count = (0,external_lodash_namespaceObject.filter)(items, '_isVisible').length; 67675 const resultsFoundMessage = (0,external_wp_i18n_namespaceObject.sprintf)( 67676 /* translators: %d: number of results. */ 67677 (0,external_wp_i18n_namespaceObject._n)('%d result found.', '%d results found.', count), count); 67678 debouncedSpeak(resultsFoundMessage); 67679 }, [items, search]); 67680 67681 const onClose = () => { 67682 onSearch(''); 67683 onCloseSearch(); 67684 }; 67685 67686 function onKeyDown(event) { 67687 if (event.keyCode === external_wp_keycodes_namespaceObject.ESCAPE && !event.defaultPrevented) { 67688 event.preventDefault(); 67689 onClose(); 67690 } 67691 } 67692 67693 const inputId = `components-navigation__menu-title-search-$menu}`; 67694 const placeholder = (0,external_wp_i18n_namespaceObject.sprintf)( 67695 /* translators: placeholder for menu search box. %s: menu title */ 67696 (0,external_wp_i18n_namespaceObject.__)('Search %s'), title === null || title === void 0 ? void 0 : title.toLowerCase()).trim(); 67697 return (0,external_wp_element_namespaceObject.createElement)("div", { 67698 className: "components-navigation__menu-title-search" 67699 }, (0,external_wp_element_namespaceObject.createElement)(MenuTitleSearchUI, { 67700 autoComplete: "off", 67701 className: "components-navigation__menu-search-input", 67702 id: inputId, 67703 onChange: value => onSearch(value), 67704 onKeyDown: onKeyDown, 67705 placeholder: placeholder, 67706 onClose: onClose, 67707 ref: inputRef, 67708 type: "search", 67709 value: search 67710 })); 67711 } 67712 67713 /* harmony default export */ var menu_title_search = (with_spoken_messages(MenuTitleSearch)); 67714 67715 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/navigation/menu/menu-title.js 67716 67717 67718 /** 67719 * WordPress dependencies 67720 */ 67721 67722 67723 67724 /** 67725 * Internal dependencies 67726 */ 67727 67728 67729 67730 67731 67732 67733 67734 function NavigationMenuTitle(_ref) { 67735 let { 67736 hasSearch, 67737 onSearch, 67738 search, 67739 title, 67740 titleAction 67741 } = _ref; 67742 const [isSearching, setIsSearching] = (0,external_wp_element_namespaceObject.useState)(false); 67743 const { 67744 menu 67745 } = useNavigationMenuContext(); 67746 const searchButtonRef = (0,external_wp_element_namespaceObject.useRef)(); 67747 67748 if (!title) { 67749 return null; 67750 } 67751 67752 const onCloseSearch = () => { 67753 setIsSearching(false); // Wait for the slide-in animation to complete before focusing the search button. 67754 // eslint-disable-next-line @wordpress/react-no-unsafe-timeout 67755 67756 setTimeout(() => { 67757 searchButtonRef.current.focus(); 67758 }, SEARCH_FOCUS_DELAY); 67759 }; 67760 67761 const menuTitleId = `components-navigation__menu-title-$menu}`; 67762 /* translators: search button label for menu search box. %s: menu title */ 67763 67764 const searchButtonLabel = (0,external_wp_i18n_namespaceObject.sprintf)((0,external_wp_i18n_namespaceObject.__)('Search in %s'), title); 67765 return (0,external_wp_element_namespaceObject.createElement)(MenuTitleUI, { 67766 className: "components-navigation__menu-title" 67767 }, !isSearching && (0,external_wp_element_namespaceObject.createElement)(GroupTitleUI, { 67768 as: "h2", 67769 className: "components-navigation__menu-title-heading", 67770 level: 3 67771 }, (0,external_wp_element_namespaceObject.createElement)("span", { 67772 id: menuTitleId 67773 }, title), (hasSearch || titleAction) && (0,external_wp_element_namespaceObject.createElement)(MenuTitleActionsUI, null, titleAction, hasSearch && (0,external_wp_element_namespaceObject.createElement)(build_module_button, { 67774 isSmall: true, 67775 variant: "tertiary", 67776 label: searchButtonLabel, 67777 onClick: () => setIsSearching(true), 67778 ref: searchButtonRef 67779 }, (0,external_wp_element_namespaceObject.createElement)(icons_build_module_icon, { 67780 icon: library_search 67781 })))), isSearching && (0,external_wp_element_namespaceObject.createElement)("div", { 67782 className: getAnimateClassName({ 67783 type: 'slide-in', 67784 origin: 'left' 67785 }) 67786 }, (0,external_wp_element_namespaceObject.createElement)(menu_title_search, { 67787 onCloseSearch: onCloseSearch, 67788 onSearch: onSearch, 67789 search: search, 67790 title: title 67791 }))); 67792 } 67793 67794 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/navigation/menu/search-no-results-found.js 67795 67796 67797 /** 67798 * External dependencies 67799 */ 67800 67801 /** 67802 * WordPress dependencies 67803 */ 67804 67805 67806 /** 67807 * Internal dependencies 67808 */ 67809 67810 67811 67812 function NavigationSearchNoResultsFound(_ref) { 67813 let { 67814 search 67815 } = _ref; 67816 const { 67817 navigationTree: { 67818 items 67819 } 67820 } = useNavigationContext(); 67821 const resultsCount = (0,external_lodash_namespaceObject.filter)(items, '_isVisible').length; 67822 67823 if (!search || !!resultsCount) { 67824 return null; 67825 } 67826 67827 return (0,external_wp_element_namespaceObject.createElement)(ItemBaseUI, null, (0,external_wp_element_namespaceObject.createElement)(ItemUI, null, (0,external_wp_i18n_namespaceObject.__)('No results found.'), " ")); 67828 } 67829 67830 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/navigation/menu/index.js 67831 67832 67833 /** 67834 * External dependencies 67835 */ 67836 67837 /** 67838 * WordPress dependencies 67839 */ 67840 67841 67842 /** 67843 * Internal dependencies 67844 */ 67845 67846 67847 67848 67849 67850 67851 67852 67853 67854 67855 function NavigationMenu(props) { 67856 const { 67857 backButtonLabel, 67858 children, 67859 className, 67860 hasSearch, 67861 menu = ROOT_MENU, 67862 onBackButtonClick, 67863 onSearch: setControlledSearch, 67864 parentMenu, 67865 search: controlledSearch, 67866 isSearchDebouncing, 67867 title, 67868 titleAction 67869 } = props; 67870 const [uncontrolledSearch, setUncontrolledSearch] = (0,external_wp_element_namespaceObject.useState)(''); 67871 useNavigationTreeMenu(props); 67872 const { 67873 activeMenu 67874 } = useNavigationContext(); 67875 const context = { 67876 menu, 67877 search: uncontrolledSearch 67878 }; // Keep the children rendered to make sure invisible items are included in the navigation tree. 67879 67880 if (activeMenu !== menu) { 67881 return (0,external_wp_element_namespaceObject.createElement)(NavigationMenuContext.Provider, { 67882 value: context 67883 }, children); 67884 } 67885 67886 const isControlledSearch = !!setControlledSearch; 67887 const search = isControlledSearch ? controlledSearch : uncontrolledSearch; 67888 const onSearch = isControlledSearch ? setControlledSearch : setUncontrolledSearch; 67889 const menuTitleId = `components-navigation__menu-title-$menu}`; 67890 const classes = classnames_default()('components-navigation__menu', className); 67891 return (0,external_wp_element_namespaceObject.createElement)(NavigationMenuContext.Provider, { 67892 value: context 67893 }, (0,external_wp_element_namespaceObject.createElement)(MenuUI, { 67894 className: classes 67895 }, (parentMenu || onBackButtonClick) && (0,external_wp_element_namespaceObject.createElement)(back_button, { 67896 backButtonLabel: backButtonLabel, 67897 parentMenu: parentMenu, 67898 onClick: onBackButtonClick 67899 }), title && (0,external_wp_element_namespaceObject.createElement)(NavigationMenuTitle, { 67900 hasSearch: hasSearch, 67901 onSearch: onSearch, 67902 search: search, 67903 title: title, 67904 titleAction: titleAction 67905 }), (0,external_wp_element_namespaceObject.createElement)(navigable_container_menu, null, (0,external_wp_element_namespaceObject.createElement)("ul", { 67906 "aria-labelledby": menuTitleId 67907 }, children, search && !isSearchDebouncing && (0,external_wp_element_namespaceObject.createElement)(NavigationSearchNoResultsFound, { 67908 search: search 67909 }))))); 67910 } 67911 67912 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/navigator/context.js 67913 /** 67914 * WordPress dependencies 67915 */ 67916 67917 /** 67918 * Internal dependencies 67919 */ 67920 67921 const initialContextValue = { 67922 location: {}, 67923 goTo: () => {}, 67924 goBack: () => {} 67925 }; 67926 const NavigatorContext = (0,external_wp_element_namespaceObject.createContext)(initialContextValue); 67927 67928 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/navigator/navigator-provider/component.js 67929 67930 67931 67932 function component_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } 67933 67934 /** 67935 * External dependencies 67936 */ 67937 67938 /** 67939 * WordPress dependencies 67940 */ 67941 67942 67943 /** 67944 * Internal dependencies 67945 */ 67946 67947 67948 67949 67950 67951 67952 var component_ref = true ? { 67953 name: "15bx5k", 67954 styles: "overflow-x:hidden" 67955 } : 0; 67956 67957 function NavigatorProvider(props, forwardedRef) { 67958 const { 67959 initialPath, 67960 children, 67961 className, 67962 ...otherProps 67963 } = useContextSystem(props, 'NavigatorProvider'); 67964 const [locationHistory, setLocationHistory] = (0,external_wp_element_namespaceObject.useState)([{ 67965 path: initialPath 67966 }]); 67967 const goTo = (0,external_wp_element_namespaceObject.useCallback)(function (path) { 67968 let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; 67969 setLocationHistory([...locationHistory, { ...options, 67970 path, 67971 isBack: false 67972 }]); 67973 }, [locationHistory]); 67974 const goBack = (0,external_wp_element_namespaceObject.useCallback)(() => { 67975 if (locationHistory.length > 1) { 67976 setLocationHistory([...locationHistory.slice(0, -2), { ...locationHistory[locationHistory.length - 2], 67977 isBack: true 67978 }]); 67979 } 67980 }, [locationHistory]); 67981 const navigatorContextValue = (0,external_wp_element_namespaceObject.useMemo)(() => ({ 67982 location: { ...locationHistory[locationHistory.length - 1], 67983 isInitial: locationHistory.length === 1 67984 }, 67985 goTo, 67986 goBack 67987 }), [locationHistory, goTo, goBack]); 67988 const cx = useCx(); 67989 const classes = (0,external_wp_element_namespaceObject.useMemo)( // Prevents horizontal overflow while animating screen transitions. 67990 () => cx(component_ref, className), [className, cx]); 67991 return (0,external_wp_element_namespaceObject.createElement)(component, extends_extends({ 67992 ref: forwardedRef, 67993 className: classes 67994 }, otherProps), (0,external_wp_element_namespaceObject.createElement)(NavigatorContext.Provider, { 67995 value: navigatorContextValue 67996 }, children)); 67997 } 67998 /** 67999 * The `NavigatorProvider` component allows rendering nested views/panels/menus 68000 * (via the `NavigatorScreen` component and navigate between these different 68001 * view (via the `NavigatorButton` and `NavigatorBackButton` components or the 68002 * `useNavigator` hook). 68003 * 68004 * @example 68005 * ```jsx 68006 * import { 68007 * __experimentalNavigatorProvider as NavigatorProvider, 68008 * __experimentalNavigatorScreen as NavigatorScreen, 68009 * __experimentalNavigatorButton as NavigatorButton, 68010 * __experimentalNavigatorBackButton as NavigatorBackButton, 68011 * } from '@wordpress/components'; 68012 * 68013 * const MyNavigation = () => ( 68014 * <NavigatorProvider initialPath="/"> 68015 * <NavigatorScreen path="/"> 68016 * <p>This is the home screen.</p> 68017 * <NavigatorButton path="/child"> 68018 * Navigate to child screen. 68019 * </NavigatorButton> 68020 * </NavigatorScreen> 68021 * 68022 * <NavigatorScreen path="/child"> 68023 * <p>This is the child screen.</p> 68024 * <NavigatorBackButton> 68025 * Go back 68026 * </NavigatorBackButton> 68027 * </NavigatorScreen> 68028 * </NavigatorProvider> 68029 * ); 68030 * ``` 68031 */ 68032 68033 68034 const ConnectedNavigatorProvider = contextConnect(NavigatorProvider, 'NavigatorProvider'); 68035 /* harmony default export */ var navigator_provider_component = (ConnectedNavigatorProvider); 68036 68037 ;// CONCATENATED MODULE: external ["wp","escapeHtml"] 68038 var external_wp_escapeHtml_namespaceObject = window["wp"]["escapeHtml"]; 68039 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/navigator/navigator-screen/component.js 68040 68041 68042 68043 function navigator_screen_component_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } 68044 68045 /** 68046 * External dependencies 68047 */ 68048 // eslint-disable-next-line no-restricted-imports 68049 68050 68051 /** 68052 * WordPress dependencies 68053 */ 68054 68055 68056 68057 68058 68059 68060 /** 68061 * Internal dependencies 68062 */ 68063 68064 68065 68066 68067 68068 const animationEnterDelay = 0; 68069 const animationEnterDuration = 0.14; 68070 const animationExitDuration = 0.14; 68071 const animationExitDelay = 0; // Props specific to `framer-motion` can't be currently passed to `NavigatorScreen`, 68072 // as some of them would overlap with HTML props (e.g. `onAnimationStart`, ...) 68073 68074 var navigator_screen_component_ref = true ? { 68075 name: "14x3t6z", 68076 styles: "overflow-x:auto;max-height:100%" 68077 } : 0; 68078 68079 function NavigatorScreen(props, forwardedRef) { 68080 const { 68081 children, 68082 className, 68083 path, 68084 ...otherProps 68085 } = useContextSystem(props, 'NavigatorScreen'); 68086 const prefersReducedMotion = (0,external_wp_compose_namespaceObject.useReducedMotion)(); 68087 const { 68088 location 68089 } = (0,external_wp_element_namespaceObject.useContext)(NavigatorContext); 68090 const isMatch = location.path === (0,external_wp_escapeHtml_namespaceObject.escapeAttribute)(path); 68091 const wrapperRef = (0,external_wp_element_namespaceObject.useRef)(null); 68092 const previousLocation = (0,external_wp_compose_namespaceObject.usePrevious)(location); 68093 const cx = useCx(); 68094 const classes = (0,external_wp_element_namespaceObject.useMemo)(() => cx(navigator_screen_component_ref, className), [className, cx]); // Focus restoration 68095 68096 const isInitialLocation = location.isInitial && !location.isBack; 68097 (0,external_wp_element_namespaceObject.useEffect)(() => { 68098 // Only attempt to restore focus: 68099 // - if the current location is not the initial one (to avoid moving focus on page load) 68100 // - when the screen becomes visible 68101 // - if the wrapper ref has been assigned 68102 if (isInitialLocation || !isMatch || !wrapperRef.current) { 68103 return; 68104 } 68105 68106 let elementToFocus = null; // When navigating back, if a selector is provided, use it to look for the 68107 // target element (assumed to be a node inside the current NavigatorScreen) 68108 68109 if (location.isBack && previousLocation !== null && previousLocation !== void 0 && previousLocation.focusTargetSelector) { 68110 elementToFocus = wrapperRef.current.querySelector(previousLocation.focusTargetSelector); 68111 } // If the previous query didn't run or find any element to focus, fallback 68112 // to the first tabbable element in the screen (or the screen itself). 68113 68114 68115 if (!elementToFocus) { 68116 const firstTabbable = external_wp_dom_namespaceObject.focus.tabbable.find(wrapperRef.current)[0]; 68117 elementToFocus = firstTabbable !== null && firstTabbable !== void 0 ? firstTabbable : wrapperRef.current; 68118 } 68119 68120 elementToFocus.focus(); 68121 }, [isInitialLocation, isMatch]); 68122 const mergedWrapperRef = (0,external_wp_compose_namespaceObject.useMergeRefs)([forwardedRef, wrapperRef]); 68123 68124 if (!isMatch) { 68125 return null; 68126 } 68127 68128 if (prefersReducedMotion) { 68129 return (0,external_wp_element_namespaceObject.createElement)(component, extends_extends({ 68130 ref: mergedWrapperRef, 68131 className: classes 68132 }, otherProps), children); 68133 } 68134 68135 const animate = { 68136 opacity: 1, 68137 transition: { 68138 delay: animationEnterDelay, 68139 duration: animationEnterDuration, 68140 ease: 'easeInOut' 68141 }, 68142 x: 0 68143 }; 68144 const initial = { 68145 opacity: 0, 68146 x: (0,external_wp_i18n_namespaceObject.isRTL)() && location.isBack || !(0,external_wp_i18n_namespaceObject.isRTL)() && !location.isBack ? 50 : -50 68147 }; 68148 const exit = { 68149 delay: animationExitDelay, 68150 opacity: 0, 68151 x: !(0,external_wp_i18n_namespaceObject.isRTL)() && location.isBack || (0,external_wp_i18n_namespaceObject.isRTL)() && !location.isBack ? 50 : -50, 68152 transition: { 68153 duration: animationExitDuration, 68154 ease: 'easeInOut' 68155 } 68156 }; 68157 const animatedProps = { 68158 animate, 68159 exit, 68160 initial 68161 }; 68162 return (0,external_wp_element_namespaceObject.createElement)(motion.div, extends_extends({ 68163 ref: mergedWrapperRef, 68164 className: classes 68165 }, otherProps, animatedProps), children); 68166 } 68167 /** 68168 * The `NavigatorScreen` component represents a single view/screen/panel and 68169 * should be used in combination with the `NavigatorProvider`, the 68170 * `NavigatorButton` and the `NavigatorBackButton` components (or the `useNavigator` 68171 * hook). 68172 * 68173 * @example 68174 * ```jsx 68175 * import { 68176 * __experimentalNavigatorProvider as NavigatorProvider, 68177 * __experimentalNavigatorScreen as NavigatorScreen, 68178 * __experimentalNavigatorButton as NavigatorButton, 68179 * __experimentalNavigatorBackButton as NavigatorBackButton, 68180 * } from '@wordpress/components'; 68181 * 68182 * const MyNavigation = () => ( 68183 * <NavigatorProvider initialPath="/"> 68184 * <NavigatorScreen path="/"> 68185 * <p>This is the home screen.</p> 68186 * <NavigatorButton path="/child"> 68187 * Navigate to child screen. 68188 * </NavigatorButton> 68189 * </NavigatorScreen> 68190 * 68191 * <NavigatorScreen path="/child"> 68192 * <p>This is the child screen.</p> 68193 * <NavigatorBackButton> 68194 * Go back 68195 * </NavigatorBackButton> 68196 * </NavigatorScreen> 68197 * </NavigatorProvider> 68198 * ); 68199 * ``` 68200 */ 68201 68202 68203 const ConnectedNavigatorScreen = contextConnect(NavigatorScreen, 'NavigatorScreen'); 68204 /* harmony default export */ var navigator_screen_component = (ConnectedNavigatorScreen); 68205 68206 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/navigator/use-navigator.js 68207 /** 68208 * WordPress dependencies 68209 */ 68210 68211 /** 68212 * Internal dependencies 68213 */ 68214 68215 68216 68217 /** 68218 * Retrieves a `navigator` instance. 68219 */ 68220 function useNavigator() { 68221 const { 68222 location, 68223 goTo, 68224 goBack 68225 } = (0,external_wp_element_namespaceObject.useContext)(NavigatorContext); 68226 return { 68227 location, 68228 goTo, 68229 goBack 68230 }; 68231 } 68232 68233 /* harmony default export */ var use_navigator = (useNavigator); 68234 68235 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/navigator/navigator-button/hook.js 68236 /** 68237 * WordPress dependencies 68238 */ 68239 68240 68241 /** 68242 * Internal dependencies 68243 */ 68244 68245 /** 68246 * Internal dependencies 68247 */ 68248 68249 68250 68251 68252 68253 const cssSelectorForAttribute = (attrName, attrValue) => `[$attrName}="$attrValue}"]`; 68254 68255 function useNavigatorButton(props) { 68256 const { 68257 path, 68258 onClick, 68259 as = build_module_button, 68260 attributeName = 'id', 68261 ...otherProps 68262 } = useContextSystem(props, 'NavigatorButton'); 68263 const escapedPath = (0,external_wp_escapeHtml_namespaceObject.escapeAttribute)(path); 68264 const { 68265 goTo 68266 } = use_navigator(); 68267 const handleClick = (0,external_wp_element_namespaceObject.useCallback)(e => { 68268 e.preventDefault(); 68269 goTo(escapedPath, { 68270 focusTargetSelector: cssSelectorForAttribute(attributeName, escapedPath) 68271 }); 68272 onClick === null || onClick === void 0 ? void 0 : onClick(e); 68273 }, [goTo, onClick]); 68274 return { 68275 as, 68276 onClick: handleClick, 68277 ...otherProps, 68278 [attributeName]: escapedPath 68279 }; 68280 } 68281 68282 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/navigator/navigator-button/component.js 68283 68284 68285 68286 /** 68287 * External dependencies 68288 */ 68289 68290 /** 68291 * Internal dependencies 68292 */ 68293 68294 68295 68296 68297 function NavigatorButton(props, forwardedRef) { 68298 const navigatorButtonProps = useNavigatorButton(props); 68299 return (0,external_wp_element_namespaceObject.createElement)(component, extends_extends({ 68300 ref: forwardedRef 68301 }, navigatorButtonProps)); 68302 } 68303 /** 68304 * The `NavigatorButton` component can be used to navigate to a screen and should 68305 * be used in combination with the `NavigatorProvider`, the `NavigatorScreen` 68306 * and the `NavigatorBackButton` components (or the `useNavigator` hook). 68307 * 68308 * @example 68309 * ```jsx 68310 * import { 68311 * __experimentalNavigatorProvider as NavigatorProvider, 68312 * __experimentalNavigatorScreen as NavigatorScreen, 68313 * __experimentalNavigatorButton as NavigatorButton, 68314 * __experimentalNavigatorBackButton as NavigatorBackButton, 68315 * } from '@wordpress/components'; 68316 * 68317 * const MyNavigation = () => ( 68318 * <NavigatorProvider initialPath="/"> 68319 * <NavigatorScreen path="/"> 68320 * <p>This is the home screen.</p> 68321 * <NavigatorButton path="/child"> 68322 * Navigate to child screen. 68323 * </NavigatorButton> 68324 * </NavigatorScreen> 68325 * 68326 * <NavigatorScreen path="/child"> 68327 * <p>This is the child screen.</p> 68328 * <NavigatorBackButton> 68329 * Go back 68330 * </NavigatorBackButton> 68331 * </NavigatorScreen> 68332 * </NavigatorProvider> 68333 * ); 68334 * ``` 68335 */ 68336 68337 68338 const ConnectedNavigatorButton = contextConnect(NavigatorButton, 'NavigatorButton'); 68339 /* harmony default export */ var navigator_button_component = (ConnectedNavigatorButton); 68340 68341 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/navigator/navigator-back-button/hook.js 68342 /** 68343 * WordPress dependencies 68344 */ 68345 68346 /** 68347 * Internal dependencies 68348 */ 68349 68350 /** 68351 * Internal dependencies 68352 */ 68353 68354 68355 68356 68357 function useNavigatorBackButton(props) { 68358 const { 68359 onClick, 68360 as = build_module_button, 68361 ...otherProps 68362 } = useContextSystem(props, 'NavigatorBackButton'); 68363 const { 68364 goBack 68365 } = use_navigator(); 68366 const handleClick = (0,external_wp_element_namespaceObject.useCallback)(e => { 68367 e.preventDefault(); 68368 goBack(); 68369 onClick === null || onClick === void 0 ? void 0 : onClick(e); 68370 }, [goBack, onClick]); 68371 return { 68372 as, 68373 onClick: handleClick, 68374 ...otherProps 68375 }; 68376 } 68377 68378 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/navigator/navigator-back-button/component.js 68379 68380 68381 68382 /** 68383 * External dependencies 68384 */ 68385 68386 /** 68387 * Internal dependencies 68388 */ 68389 68390 68391 68392 68393 function NavigatorBackButton(props, forwardedRef) { 68394 const navigatorBackButtonProps = useNavigatorBackButton(props); 68395 return (0,external_wp_element_namespaceObject.createElement)(component, extends_extends({ 68396 ref: forwardedRef 68397 }, navigatorBackButtonProps)); 68398 } 68399 /** 68400 * The `NavigatorBackButton` component can be used to navigate to a screen and 68401 * should be used in combination with the `NavigatorProvider`, the 68402 * `NavigatorScreen` and the `NavigatorButton` components (or the `useNavigator` 68403 * hook). 68404 * 68405 * @example 68406 * ```jsx 68407 * import { 68408 * __experimentalNavigatorProvider as NavigatorProvider, 68409 * __experimentalNavigatorScreen as NavigatorScreen, 68410 * __experimentalNavigatorButton as NavigatorButton, 68411 * __experimentalNavigatorBackButton as NavigatorBackButton, 68412 * } from '@wordpress/components'; 68413 * 68414 * const MyNavigation = () => ( 68415 * <NavigatorProvider initialPath="/"> 68416 * <NavigatorScreen path="/"> 68417 * <p>This is the home screen.</p> 68418 * <NavigatorButton path="/child"> 68419 * Navigate to child screen. 68420 * </NavigatorButton> 68421 * </NavigatorScreen> 68422 * 68423 * <NavigatorScreen path="/child"> 68424 * <p>This is the child screen.</p> 68425 * <NavigatorBackButton> 68426 * Go back 68427 * </NavigatorBackButton> 68428 * </NavigatorScreen> 68429 * </NavigatorProvider> 68430 * ); 68431 * ``` 68432 */ 68433 68434 68435 const ConnectedNavigatorBackButton = contextConnect(NavigatorBackButton, 'NavigatorBackButton'); 68436 /* harmony default export */ var navigator_back_button_component = (ConnectedNavigatorBackButton); 68437 68438 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/notice/index.js 68439 68440 68441 /** 68442 * External dependencies 68443 */ 68444 68445 68446 /** 68447 * WordPress dependencies 68448 */ 68449 68450 68451 68452 68453 68454 /** 68455 * Internal dependencies 68456 */ 68457 68458 68459 /** @typedef {import('@wordpress/element').WPElement} WPElement */ 68460 68461 /** 68462 * Custom hook which announces the message with the given politeness, if a 68463 * valid message is provided. 68464 * 68465 * @param {string|WPElement} [message] Message to announce. 68466 * @param {'polite'|'assertive'} politeness Politeness to announce. 68467 */ 68468 68469 function useSpokenMessage(message, politeness) { 68470 const spokenMessage = typeof message === 'string' ? message : (0,external_wp_element_namespaceObject.renderToString)(message); 68471 (0,external_wp_element_namespaceObject.useEffect)(() => { 68472 if (spokenMessage) { 68473 (0,external_wp_a11y_namespaceObject.speak)(spokenMessage, politeness); 68474 } 68475 }, [spokenMessage, politeness]); 68476 } 68477 /** 68478 * Given a notice status, returns an assumed default politeness for the status. 68479 * Defaults to 'assertive'. 68480 * 68481 * @param {string} [status] Notice status. 68482 * 68483 * @return {'polite'|'assertive'} Notice politeness. 68484 */ 68485 68486 68487 function getDefaultPoliteness(status) { 68488 switch (status) { 68489 case 'success': 68490 case 'warning': 68491 case 'info': 68492 return 'polite'; 68493 68494 case 'error': 68495 default: 68496 return 'assertive'; 68497 } 68498 } 68499 68500 function Notice(_ref) { 68501 let { 68502 className, 68503 status = 'info', 68504 children, 68505 spokenMessage = children, 68506 onRemove = external_lodash_namespaceObject.noop, 68507 isDismissible = true, 68508 actions = [], 68509 politeness = getDefaultPoliteness(status), 68510 __unstableHTML, 68511 // onDismiss is a callback executed when the notice is dismissed. 68512 // It is distinct from onRemove, which _looks_ like a callback but is 68513 // actually the function to call to remove the notice from the UI. 68514 onDismiss = external_lodash_namespaceObject.noop 68515 } = _ref; 68516 useSpokenMessage(spokenMessage, politeness); 68517 const classes = classnames_default()(className, 'components-notice', 'is-' + status, { 68518 'is-dismissible': isDismissible 68519 }); 68520 68521 if (__unstableHTML) { 68522 children = (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.RawHTML, null, children); 68523 } 68524 68525 const onDismissNotice = event => { 68526 var _event$preventDefault; 68527 68528 event === null || event === void 0 ? void 0 : (_event$preventDefault = event.preventDefault) === null || _event$preventDefault === void 0 ? void 0 : _event$preventDefault.call(event); 68529 onDismiss(); 68530 onRemove(); 68531 }; 68532 68533 return (0,external_wp_element_namespaceObject.createElement)("div", { 68534 className: classes 68535 }, (0,external_wp_element_namespaceObject.createElement)("div", { 68536 className: "components-notice__content" 68537 }, children, (0,external_wp_element_namespaceObject.createElement)("div", { 68538 className: "components-notice__actions" 68539 }, actions.map((_ref2, index) => { 68540 let { 68541 className: buttonCustomClasses, 68542 label, 68543 isPrimary, 68544 variant, 68545 noDefaultClasses = false, 68546 onClick, 68547 url 68548 } = _ref2; 68549 let computedVariant = variant; 68550 68551 if (variant !== 'primary' && !noDefaultClasses) { 68552 computedVariant = !url ? 'secondary' : 'link'; 68553 } 68554 68555 if (typeof computedVariant === 'undefined' && isPrimary) { 68556 computedVariant = 'primary'; 68557 } 68558 68559 return (0,external_wp_element_namespaceObject.createElement)(build_module_button, { 68560 key: index, 68561 href: url, 68562 variant: computedVariant, 68563 onClick: url ? undefined : onClick, 68564 className: classnames_default()('components-notice__action', buttonCustomClasses) 68565 }, label); 68566 }))), isDismissible && (0,external_wp_element_namespaceObject.createElement)(build_module_button, { 68567 className: "components-notice__dismiss", 68568 icon: library_close, 68569 label: (0,external_wp_i18n_namespaceObject.__)('Dismiss this notice'), 68570 onClick: onDismissNotice, 68571 showTooltip: false 68572 })); 68573 } 68574 68575 /* harmony default export */ var build_module_notice = (Notice); 68576 68577 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/notice/list.js 68578 68579 68580 68581 /** 68582 * External dependencies 68583 */ 68584 68585 68586 /** 68587 * Internal dependencies 68588 */ 68589 68590 68591 /** 68592 * Renders a list of notices. 68593 * 68594 * @param {Object} $0 Props passed to the component. 68595 * @param {Array} $0.notices Array of notices to render. 68596 * @param {Function} $0.onRemove Function called when a notice should be removed / dismissed. 68597 * @param {Object} $0.className Name of the class used by the component. 68598 * @param {Object} $0.children Array of children to be rendered inside the notice list. 68599 * 68600 * @return {Object} The rendered notices list. 68601 */ 68602 68603 function NoticeList(_ref) { 68604 let { 68605 notices, 68606 onRemove = external_lodash_namespaceObject.noop, 68607 className, 68608 children 68609 } = _ref; 68610 68611 const removeNotice = id => () => onRemove(id); 68612 68613 className = classnames_default()('components-notice-list', className); 68614 return (0,external_wp_element_namespaceObject.createElement)("div", { 68615 className: className 68616 }, children, [...notices].reverse().map(notice => (0,external_wp_element_namespaceObject.createElement)(build_module_notice, extends_extends({}, (0,external_lodash_namespaceObject.omit)(notice, ['content']), { 68617 key: notice.id, 68618 onRemove: removeNotice(notice.id) 68619 }), notice.content))); 68620 } 68621 68622 /* harmony default export */ var list = (NoticeList); 68623 68624 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/panel/header.js 68625 68626 68627 function PanelHeader(_ref) { 68628 let { 68629 label, 68630 children 68631 } = _ref; 68632 return (0,external_wp_element_namespaceObject.createElement)("div", { 68633 className: "components-panel__header" 68634 }, label && (0,external_wp_element_namespaceObject.createElement)("h2", null, label), children); 68635 } 68636 68637 /* harmony default export */ var panel_header = (PanelHeader); 68638 68639 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/panel/index.js 68640 68641 68642 /** 68643 * External dependencies 68644 */ 68645 68646 /** 68647 * WordPress dependencies 68648 */ 68649 68650 68651 /** 68652 * Internal dependencies 68653 */ 68654 68655 68656 68657 function Panel(_ref, ref) { 68658 let { 68659 header, 68660 className, 68661 children 68662 } = _ref; 68663 const classNames = classnames_default()(className, 'components-panel'); 68664 return (0,external_wp_element_namespaceObject.createElement)("div", { 68665 className: classNames, 68666 ref: ref 68667 }, header && (0,external_wp_element_namespaceObject.createElement)(panel_header, { 68668 label: header 68669 }), children); 68670 } 68671 68672 /* harmony default export */ var panel = ((0,external_wp_element_namespaceObject.forwardRef)(Panel)); 68673 68674 ;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/chevron-up.js 68675 68676 68677 /** 68678 * WordPress dependencies 68679 */ 68680 68681 const chevronUp = (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.SVG, { 68682 viewBox: "0 0 24 24", 68683 xmlns: "http://www.w3.org/2000/svg" 68684 }, (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.Path, { 68685 d: "M6.5 12.4L12 8l5.5 4.4-.9 1.2L12 10l-4.5 3.6-1-1.2z" 68686 })); 68687 /* harmony default export */ var chevron_up = (chevronUp); 68688 68689 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/panel/body.js 68690 68691 68692 68693 /** 68694 * External dependencies 68695 */ 68696 68697 68698 /** 68699 * WordPress dependencies 68700 */ 68701 68702 68703 68704 68705 /** 68706 * Internal dependencies 68707 */ 68708 68709 68710 68711 68712 function PanelBody(_ref, ref) { 68713 let { 68714 buttonProps = {}, 68715 children, 68716 className, 68717 icon, 68718 initialOpen, 68719 onToggle = external_lodash_namespaceObject.noop, 68720 opened, 68721 title, 68722 scrollAfterOpen = true 68723 } = _ref; 68724 const [isOpened, setIsOpened] = use_controlled_state(opened, { 68725 initial: initialOpen === undefined ? true : initialOpen 68726 }); 68727 const nodeRef = (0,external_wp_element_namespaceObject.useRef)(); // Defaults to 'smooth' scrolling 68728 // https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView 68729 68730 const scrollBehavior = (0,external_wp_compose_namespaceObject.useReducedMotion)() ? 'auto' : 'smooth'; 68731 68732 const handleOnToggle = event => { 68733 event.preventDefault(); 68734 const next = !isOpened; 68735 setIsOpened(next); 68736 onToggle(next); 68737 }; // Ref is used so that the effect does not re-run upon scrollAfterOpen changing value. 68738 68739 68740 const scrollAfterOpenRef = (0,external_wp_element_namespaceObject.useRef)(); 68741 scrollAfterOpenRef.current = scrollAfterOpen; // Runs after initial render. 68742 68743 use_update_effect(() => { 68744 var _nodeRef$current; 68745 68746 if (isOpened && scrollAfterOpenRef.current && (_nodeRef$current = nodeRef.current) !== null && _nodeRef$current !== void 0 && _nodeRef$current.scrollIntoView) { 68747 /* 68748 * Scrolls the content into view when visible. 68749 * This improves the UX when there are multiple stacking <PanelBody /> 68750 * components in a scrollable container. 68751 */ 68752 nodeRef.current.scrollIntoView({ 68753 inline: 'nearest', 68754 block: 'nearest', 68755 behavior: scrollBehavior 68756 }); 68757 } 68758 }, [isOpened, scrollBehavior]); 68759 const classes = classnames_default()('components-panel__body', className, { 68760 'is-opened': isOpened 68761 }); 68762 return (0,external_wp_element_namespaceObject.createElement)("div", { 68763 className: classes, 68764 ref: (0,external_wp_compose_namespaceObject.useMergeRefs)([nodeRef, ref]) 68765 }, (0,external_wp_element_namespaceObject.createElement)(PanelBodyTitle, extends_extends({ 68766 icon: icon, 68767 isOpened: isOpened, 68768 onClick: handleOnToggle, 68769 title: title 68770 }, buttonProps)), typeof children === 'function' ? children({ 68771 opened: isOpened 68772 }) : isOpened && children); 68773 } 68774 const PanelBodyTitle = (0,external_wp_element_namespaceObject.forwardRef)((_ref2, ref) => { 68775 let { 68776 isOpened, 68777 icon, 68778 title, 68779 ...props 68780 } = _ref2; 68781 if (!title) return null; 68782 return (0,external_wp_element_namespaceObject.createElement)("h2", { 68783 className: "components-panel__body-title" 68784 }, (0,external_wp_element_namespaceObject.createElement)(build_module_button, extends_extends({ 68785 className: "components-panel__body-toggle", 68786 "aria-expanded": isOpened, 68787 ref: ref 68788 }, props), (0,external_wp_element_namespaceObject.createElement)("span", { 68789 "aria-hidden": "true" 68790 }, (0,external_wp_element_namespaceObject.createElement)(build_module_icon, { 68791 className: "components-panel__arrow", 68792 icon: isOpened ? chevron_up : chevron_down 68793 })), title, icon && (0,external_wp_element_namespaceObject.createElement)(build_module_icon, { 68794 icon: icon, 68795 className: "components-panel__icon", 68796 size: 20 68797 }))); 68798 }); 68799 const body_ForwardedComponent = (0,external_wp_element_namespaceObject.forwardRef)(PanelBody); 68800 body_ForwardedComponent.displayName = 'PanelBody'; 68801 /* harmony default export */ var body = (body_ForwardedComponent); 68802 68803 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/panel/row.js 68804 68805 68806 /** 68807 * External dependencies 68808 */ 68809 68810 /** 68811 * WordPress dependencies 68812 */ 68813 68814 68815 const PanelRow = (0,external_wp_element_namespaceObject.forwardRef)((_ref, ref) => { 68816 let { 68817 className, 68818 children 68819 } = _ref; 68820 return (0,external_wp_element_namespaceObject.createElement)("div", { 68821 className: classnames_default()('components-panel__row', className), 68822 ref: ref 68823 }, children); 68824 }); 68825 /* harmony default export */ var row = (PanelRow); 68826 68827 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/placeholder/index.js 68828 68829 68830 68831 /** 68832 * External dependencies 68833 */ 68834 68835 /** 68836 * WordPress dependencies 68837 */ 68838 68839 68840 /** 68841 * Internal dependencies 68842 */ 68843 68844 68845 /** 68846 * Renders a placeholder. Normally used by blocks to render their empty state. 68847 * 68848 * @param {Object} props The component props. 68849 * @param {WPIcon} props.icon An icon rendered before the label. 68850 * @param {WPElement} props.children Children to be rendered. 68851 * @param {string} props.label Title of the placeholder. 68852 * @param {string} props.instructions Instructions of the placeholder. 68853 * @param {string} props.className Class to set on the container div. 68854 * @param {Object} props.notices A rendered notices list. 68855 * @param {Object} props.preview Preview to be rendered in the placeholder. 68856 * @param {boolean} props.isColumnLayout Whether a column layout should be used. 68857 * 68858 * @return {Object} The rendered placeholder. 68859 */ 68860 68861 function Placeholder(_ref) { 68862 let { 68863 icon, 68864 children, 68865 label, 68866 instructions, 68867 className, 68868 notices, 68869 preview, 68870 isColumnLayout, 68871 ...additionalProps 68872 } = _ref; 68873 const [resizeListener, { 68874 width 68875 }] = (0,external_wp_compose_namespaceObject.useResizeObserver)(); // Since `useResizeObserver` will report a width of `null` until after the 68876 // first render, avoid applying any modifier classes until width is known. 68877 68878 let modifierClassNames; 68879 68880 if (typeof width === 'number') { 68881 modifierClassNames = { 68882 'is-large': width >= 480, 68883 'is-medium': width >= 160 && width < 480, 68884 'is-small': width < 160 68885 }; 68886 } 68887 68888 const classes = classnames_default()('components-placeholder', className, modifierClassNames); 68889 const fieldsetClasses = classnames_default()('components-placeholder__fieldset', { 68890 'is-column-layout': isColumnLayout 68891 }); 68892 return (0,external_wp_element_namespaceObject.createElement)("div", extends_extends({}, additionalProps, { 68893 className: classes 68894 }), resizeListener, notices, preview && (0,external_wp_element_namespaceObject.createElement)("div", { 68895 className: "components-placeholder__preview" 68896 }, preview), (0,external_wp_element_namespaceObject.createElement)("div", { 68897 className: "components-placeholder__label" 68898 }, (0,external_wp_element_namespaceObject.createElement)(build_module_icon, { 68899 icon: icon 68900 }), label), (0,external_wp_element_namespaceObject.createElement)("fieldset", { 68901 className: fieldsetClasses 68902 }, !!instructions && (0,external_wp_element_namespaceObject.createElement)("legend", { 68903 className: "components-placeholder__instructions" 68904 }, instructions), children)); 68905 } 68906 68907 /* harmony default export */ var placeholder = (Placeholder); 68908 68909 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/query-controls/terms.js 68910 /** 68911 * External dependencies 68912 */ 68913 68914 /** 68915 * Returns terms in a tree form. 68916 * 68917 * @param {Array} flatTerms Array of terms in flat format. 68918 * 68919 * @return {Array} Array of terms in tree format. 68920 */ 68921 68922 function buildTermsTree(flatTerms) { 68923 const flatTermsWithParentAndChildren = flatTerms.map(term => { 68924 return { 68925 children: [], 68926 parent: null, 68927 ...term 68928 }; 68929 }); 68930 const termsByParent = (0,external_lodash_namespaceObject.groupBy)(flatTermsWithParentAndChildren, 'parent'); 68931 68932 if (termsByParent.null && termsByParent.null.length) { 68933 return flatTermsWithParentAndChildren; 68934 } 68935 68936 const fillWithChildren = terms => { 68937 return terms.map(term => { 68938 const children = termsByParent[term.id]; 68939 return { ...term, 68940 children: children && children.length ? fillWithChildren(children) : [] 68941 }; 68942 }); 68943 }; 68944 68945 return fillWithChildren(termsByParent['0'] || []); 68946 } 68947 68948 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/tree-select/index.js 68949 68950 68951 68952 /** 68953 * External dependencies 68954 */ 68955 68956 /** 68957 * WordPress dependencies 68958 */ 68959 68960 68961 /** 68962 * Internal dependencies 68963 */ 68964 68965 68966 68967 function tree_select_getSelectOptions(tree) { 68968 let level = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0; 68969 return (0,external_lodash_namespaceObject.flatMap)(tree, treeNode => [{ 68970 value: treeNode.id, 68971 label: (0,external_lodash_namespaceObject.repeat)('\u00A0', level * 3) + (0,external_lodash_namespaceObject.unescape)(treeNode.name) 68972 }, ...tree_select_getSelectOptions(treeNode.children || [], level + 1)]); 68973 } 68974 68975 function TreeSelect(_ref) { 68976 let { 68977 label, 68978 noOptionLabel, 68979 onChange, 68980 selectedId, 68981 tree, 68982 ...props 68983 } = _ref; 68984 const options = (0,external_wp_element_namespaceObject.useMemo)(() => { 68985 return (0,external_lodash_namespaceObject.compact)([noOptionLabel && { 68986 value: '', 68987 label: noOptionLabel 68988 }, ...tree_select_getSelectOptions(tree)]); 68989 }, [noOptionLabel, tree]); 68990 return (0,external_wp_element_namespaceObject.createElement)(select_control, extends_extends({ 68991 label, 68992 options, 68993 onChange, 68994 value: selectedId 68995 }, props)); 68996 } 68997 68998 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/query-controls/category-select.js 68999 69000 69001 69002 /** 69003 * Internal dependencies 69004 */ 69005 69006 69007 /** 69008 * WordPress dependencies 69009 */ 69010 69011 69012 function CategorySelect(_ref) { 69013 let { 69014 label, 69015 noOptionLabel, 69016 categoriesList, 69017 selectedCategoryId, 69018 onChange, 69019 ...props 69020 } = _ref; 69021 const termsTree = (0,external_wp_element_namespaceObject.useMemo)(() => { 69022 return buildTermsTree(categoriesList); 69023 }, [categoriesList]); 69024 return (0,external_wp_element_namespaceObject.createElement)(TreeSelect, extends_extends({ 69025 label, 69026 noOptionLabel, 69027 onChange, 69028 tree: termsTree, 69029 selectedId: selectedCategoryId 69030 }, props)); 69031 } 69032 69033 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/query-controls/author-select.js 69034 69035 69036 /** 69037 * Internal dependencies 69038 */ 69039 69040 69041 function AuthorSelect(_ref) { 69042 let { 69043 label, 69044 noOptionLabel, 69045 authorList, 69046 selectedAuthorId, 69047 onChange 69048 } = _ref; 69049 if (!authorList) return null; 69050 const termsTree = buildTermsTree(authorList); 69051 return (0,external_wp_element_namespaceObject.createElement)(TreeSelect, { 69052 label, 69053 noOptionLabel, 69054 onChange, 69055 tree: termsTree, 69056 selectedId: selectedAuthorId 69057 }); 69058 } 69059 69060 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/query-controls/index.js 69061 69062 69063 /** 69064 * WordPress dependencies 69065 */ 69066 69067 /** 69068 * Internal dependencies 69069 */ 69070 69071 69072 69073 69074 const DEFAULT_MIN_ITEMS = 1; 69075 const DEFAULT_MAX_ITEMS = 100; 69076 const MAX_CATEGORIES_SUGGESTIONS = 20; 69077 function QueryControls(_ref) { 69078 let { 69079 authorList, 69080 selectedAuthorId, 69081 categoriesList, 69082 selectedCategoryId, 69083 categorySuggestions, 69084 selectedCategories, 69085 numberOfItems, 69086 order, 69087 orderBy, 69088 maxItems = DEFAULT_MAX_ITEMS, 69089 minItems = DEFAULT_MIN_ITEMS, 69090 onCategoryChange, 69091 onAuthorChange, 69092 onNumberOfItemsChange, 69093 onOrderChange, 69094 onOrderByChange 69095 } = _ref; 69096 return [onOrderChange && onOrderByChange && (0,external_wp_element_namespaceObject.createElement)(select_control, { 69097 key: "query-controls-order-select", 69098 label: (0,external_wp_i18n_namespaceObject.__)('Order by'), 69099 value: `$orderBy}/$order}`, 69100 options: [{ 69101 label: (0,external_wp_i18n_namespaceObject.__)('Newest to oldest'), 69102 value: 'date/desc' 69103 }, { 69104 label: (0,external_wp_i18n_namespaceObject.__)('Oldest to newest'), 69105 value: 'date/asc' 69106 }, { 69107 /* translators: label for ordering posts by title in ascending order */ 69108 label: (0,external_wp_i18n_namespaceObject.__)('A → Z'), 69109 value: 'title/asc' 69110 }, { 69111 /* translators: label for ordering posts by title in descending order */ 69112 label: (0,external_wp_i18n_namespaceObject.__)('Z → A'), 69113 value: 'title/desc' 69114 }], 69115 onChange: value => { 69116 const [newOrderBy, newOrder] = value.split('/'); 69117 69118 if (newOrder !== order) { 69119 onOrderChange(newOrder); 69120 } 69121 69122 if (newOrderBy !== orderBy) { 69123 onOrderByChange(newOrderBy); 69124 } 69125 } 69126 }), categoriesList && onCategoryChange && (0,external_wp_element_namespaceObject.createElement)(CategorySelect, { 69127 key: "query-controls-category-select", 69128 categoriesList: categoriesList, 69129 label: (0,external_wp_i18n_namespaceObject.__)('Category'), 69130 noOptionLabel: (0,external_wp_i18n_namespaceObject.__)('All'), 69131 selectedCategoryId: selectedCategoryId, 69132 onChange: onCategoryChange 69133 }), categorySuggestions && onCategoryChange && (0,external_wp_element_namespaceObject.createElement)(form_token_field, { 69134 key: "query-controls-categories-select", 69135 label: (0,external_wp_i18n_namespaceObject.__)('Categories'), 69136 value: selectedCategories && selectedCategories.map(item => ({ 69137 id: item.id, 69138 value: item.name || item.value 69139 })), 69140 suggestions: Object.keys(categorySuggestions), 69141 onChange: onCategoryChange, 69142 maxSuggestions: MAX_CATEGORIES_SUGGESTIONS 69143 }), onAuthorChange && (0,external_wp_element_namespaceObject.createElement)(AuthorSelect, { 69144 key: "query-controls-author-select", 69145 authorList: authorList, 69146 label: (0,external_wp_i18n_namespaceObject.__)('Author'), 69147 noOptionLabel: (0,external_wp_i18n_namespaceObject.__)('All'), 69148 selectedAuthorId: selectedAuthorId, 69149 onChange: onAuthorChange 69150 }), onNumberOfItemsChange && (0,external_wp_element_namespaceObject.createElement)(range_control, { 69151 key: "query-controls-range-control", 69152 label: (0,external_wp_i18n_namespaceObject.__)('Number of items'), 69153 value: numberOfItems, 69154 onChange: onNumberOfItemsChange, 69155 min: minItems, 69156 max: maxItems, 69157 required: true 69158 })]; 69159 } 69160 69161 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/radio-context/index.js 69162 /** 69163 * WordPress dependencies 69164 */ 69165 69166 const RadioContext = (0,external_wp_element_namespaceObject.createContext)({ 69167 state: null, 69168 setState: () => {} 69169 }); 69170 /* harmony default export */ var radio_context = (RadioContext); 69171 69172 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/radio/index.js 69173 69174 69175 69176 /** 69177 * External dependencies 69178 */ 69179 69180 /** 69181 * WordPress dependencies 69182 */ 69183 69184 69185 /** 69186 * Internal dependencies 69187 */ 69188 69189 69190 69191 69192 function radio_Radio(_ref, ref) { 69193 let { 69194 children, 69195 value, 69196 ...props 69197 } = _ref; 69198 const radioContext = (0,external_wp_element_namespaceObject.useContext)(radio_context); 69199 const checked = radioContext.state === value; 69200 return (0,external_wp_element_namespaceObject.createElement)(Radio, extends_extends({ 69201 ref: ref, 69202 as: build_module_button, 69203 variant: checked ? 'primary' : 'secondary', 69204 value: value 69205 }, radioContext, props), children || value); 69206 } 69207 69208 /* harmony default export */ var build_module_radio = ((0,external_wp_element_namespaceObject.forwardRef)(radio_Radio)); 69209 69210 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/radio-group/index.js 69211 69212 69213 69214 /** 69215 * External dependencies 69216 */ 69217 69218 /** 69219 * WordPress dependencies 69220 */ 69221 69222 69223 /** 69224 * Internal dependencies 69225 */ 69226 69227 69228 69229 69230 function radio_group_RadioGroup(_ref, ref) { 69231 let { 69232 label, 69233 checked, 69234 defaultChecked, 69235 disabled, 69236 onChange, 69237 ...props 69238 } = _ref; 69239 const radioState = useRadioState({ 69240 state: defaultChecked, 69241 baseId: props.id 69242 }); 69243 const radioContext = { ...radioState, 69244 disabled, 69245 // Controlled or uncontrolled. 69246 state: checked !== null && checked !== void 0 ? checked : radioState.state, 69247 setState: onChange !== null && onChange !== void 0 ? onChange : radioState.setState 69248 }; 69249 return (0,external_wp_element_namespaceObject.createElement)(radio_context.Provider, { 69250 value: radioContext 69251 }, (0,external_wp_element_namespaceObject.createElement)(RadioGroup, extends_extends({ 69252 ref: ref, 69253 as: button_group, 69254 "aria-label": label 69255 }, radioState, props))); 69256 } 69257 69258 /* harmony default export */ var radio_group = ((0,external_wp_element_namespaceObject.forwardRef)(radio_group_RadioGroup)); 69259 69260 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/radio-control/index.js 69261 69262 69263 69264 /** 69265 * External dependencies 69266 */ 69267 69268 69269 /** 69270 * WordPress dependencies 69271 */ 69272 69273 69274 /** 69275 * Internal dependencies 69276 */ 69277 69278 69279 function RadioControl(_ref) { 69280 let { 69281 label, 69282 className, 69283 selected, 69284 help, 69285 onChange, 69286 hideLabelFromVision, 69287 options = [], 69288 ...props 69289 } = _ref; 69290 const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(RadioControl); 69291 const id = `inspector-radio-control-$instanceId}`; 69292 69293 const onChangeValue = event => onChange(event.target.value); 69294 69295 return !(0,external_lodash_namespaceObject.isEmpty)(options) && (0,external_wp_element_namespaceObject.createElement)(base_control, { 69296 label: label, 69297 id: id, 69298 hideLabelFromVision: hideLabelFromVision, 69299 help: help, 69300 className: classnames_default()(className, 'components-radio-control') 69301 }, options.map((option, index) => (0,external_wp_element_namespaceObject.createElement)("div", { 69302 key: `$id}-$index}`, 69303 className: "components-radio-control__option" 69304 }, (0,external_wp_element_namespaceObject.createElement)("input", extends_extends({ 69305 id: `$id}-$index}`, 69306 className: "components-radio-control__input", 69307 type: "radio", 69308 name: id, 69309 value: option.value, 69310 onChange: onChangeValue, 69311 checked: option.value === selected, 69312 "aria-describedby": !!help ? `$id}__help` : undefined 69313 }, props)), (0,external_wp_element_namespaceObject.createElement)("label", { 69314 htmlFor: `$id}-$index}` 69315 }, option.label)))); 69316 } 69317 69318 ;// CONCATENATED MODULE: ./node_modules/re-resizable/lib/resizer.js 69319 var resizer_extends = (undefined && undefined.__extends) || (function () { 69320 var extendStatics = function (d, b) { 69321 extendStatics = Object.setPrototypeOf || 69322 ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) || 69323 function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; }; 69324 return extendStatics(d, b); 69325 }; 69326 return function (d, b) { 69327 extendStatics(d, b); 69328 function __() { this.constructor = d; } 69329 d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); 69330 }; 69331 })(); 69332 var resizer_assign = (undefined && undefined.__assign) || function () { 69333 resizer_assign = Object.assign || function(t) { 69334 for (var s, i = 1, n = arguments.length; i < n; i++) { 69335 s = arguments[i]; 69336 for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) 69337 t[p] = s[p]; 69338 } 69339 return t; 69340 }; 69341 return resizer_assign.apply(this, arguments); 69342 }; 69343 69344 var rowSizeBase = { 69345 width: '100%', 69346 height: '10px', 69347 top: '0px', 69348 left: '0px', 69349 cursor: 'row-resize', 69350 }; 69351 var colSizeBase = { 69352 width: '10px', 69353 height: '100%', 69354 top: '0px', 69355 left: '0px', 69356 cursor: 'col-resize', 69357 }; 69358 var edgeBase = { 69359 width: '20px', 69360 height: '20px', 69361 position: 'absolute', 69362 }; 69363 var styles = { 69364 top: resizer_assign(resizer_assign({}, rowSizeBase), { top: '-5px' }), 69365 right: resizer_assign(resizer_assign({}, colSizeBase), { left: undefined, right: '-5px' }), 69366 bottom: resizer_assign(resizer_assign({}, rowSizeBase), { top: undefined, bottom: '-5px' }), 69367 left: resizer_assign(resizer_assign({}, colSizeBase), { left: '-5px' }), 69368 topRight: resizer_assign(resizer_assign({}, edgeBase), { right: '-10px', top: '-10px', cursor: 'ne-resize' }), 69369 bottomRight: resizer_assign(resizer_assign({}, edgeBase), { right: '-10px', bottom: '-10px', cursor: 'se-resize' }), 69370 bottomLeft: resizer_assign(resizer_assign({}, edgeBase), { left: '-10px', bottom: '-10px', cursor: 'sw-resize' }), 69371 topLeft: resizer_assign(resizer_assign({}, edgeBase), { left: '-10px', top: '-10px', cursor: 'nw-resize' }), 69372 }; 69373 var Resizer = /** @class */ (function (_super) { 69374 resizer_extends(Resizer, _super); 69375 function Resizer() { 69376 var _this = _super !== null && _super.apply(this, arguments) || this; 69377 _this.onMouseDown = function (e) { 69378 _this.props.onResizeStart(e, _this.props.direction); 69379 }; 69380 _this.onTouchStart = function (e) { 69381 _this.props.onResizeStart(e, _this.props.direction); 69382 }; 69383 return _this; 69384 } 69385 Resizer.prototype.render = function () { 69386 return (external_React_.createElement("div", { className: this.props.className || '', style: resizer_assign(resizer_assign({ position: 'absolute', userSelect: 'none' }, styles[this.props.direction]), (this.props.replaceStyles || {})), onMouseDown: this.onMouseDown, onTouchStart: this.onTouchStart }, this.props.children)); 69387 }; 69388 return Resizer; 69389 }(external_React_.PureComponent)); 69390 69391 69392 ;// CONCATENATED MODULE: ./node_modules/re-resizable/lib/index.js 69393 var lib_extends = (undefined && undefined.__extends) || (function () { 69394 var extendStatics = function (d, b) { 69395 extendStatics = Object.setPrototypeOf || 69396 ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) || 69397 function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; }; 69398 return extendStatics(d, b); 69399 }; 69400 return function (d, b) { 69401 extendStatics(d, b); 69402 function __() { this.constructor = d; } 69403 d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); 69404 }; 69405 })(); 69406 var lib_assign = (undefined && undefined.__assign) || function () { 69407 lib_assign = Object.assign || function(t) { 69408 for (var s, i = 1, n = arguments.length; i < n; i++) { 69409 s = arguments[i]; 69410 for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) 69411 t[p] = s[p]; 69412 } 69413 return t; 69414 }; 69415 return lib_assign.apply(this, arguments); 69416 }; 69417 69418 69419 69420 var DEFAULT_SIZE = { 69421 width: 'auto', 69422 height: 'auto', 69423 }; 69424 var lib_clamp = function (n, min, max) { return Math.max(Math.min(n, max), min); }; 69425 var snap = function (n, size) { return Math.round(n / size) * size; }; 69426 var hasDirection = function (dir, target) { 69427 return new RegExp(dir, 'i').test(target); 69428 }; 69429 // INFO: In case of window is a Proxy and does not porxy Events correctly, use isTouchEvent & isMouseEvent to distinguish event type instead of `instanceof`. 69430 var lib_isTouchEvent = function (event) { 69431 return Boolean(event.touches && event.touches.length); 69432 }; 69433 var lib_isMouseEvent = function (event) { 69434 return Boolean((event.clientX || event.clientX === 0) && 69435 (event.clientY || event.clientY === 0)); 69436 }; 69437 var findClosestSnap = function (n, snapArray, snapGap) { 69438 if (snapGap === void 0) { snapGap = 0; } 69439 var closestGapIndex = snapArray.reduce(function (prev, curr, index) { return (Math.abs(curr - n) < Math.abs(snapArray[prev] - n) ? index : prev); }, 0); 69440 var gap = Math.abs(snapArray[closestGapIndex] - n); 69441 return snapGap === 0 || gap < snapGap ? snapArray[closestGapIndex] : n; 69442 }; 69443 var getStringSize = function (n) { 69444 n = n.toString(); 69445 if (n === 'auto') { 69446 return n; 69447 } 69448 if (n.endsWith('px')) { 69449 return n; 69450 } 69451 if (n.endsWith('%')) { 69452 return n; 69453 } 69454 if (n.endsWith('vh')) { 69455 return n; 69456 } 69457 if (n.endsWith('vw')) { 69458 return n; 69459 } 69460 if (n.endsWith('vmax')) { 69461 return n; 69462 } 69463 if (n.endsWith('vmin')) { 69464 return n; 69465 } 69466 return n + "px"; 69467 }; 69468 var getPixelSize = function (size, parentSize, innerWidth, innerHeight) { 69469 if (size && typeof size === 'string') { 69470 if (size.endsWith('px')) { 69471 return Number(size.replace('px', '')); 69472 } 69473 if (size.endsWith('%')) { 69474 var ratio = Number(size.replace('%', '')) / 100; 69475 return parentSize * ratio; 69476 } 69477 if (size.endsWith('vw')) { 69478 var ratio = Number(size.replace('vw', '')) / 100; 69479 return innerWidth * ratio; 69480 } 69481 if (size.endsWith('vh')) { 69482 var ratio = Number(size.replace('vh', '')) / 100; 69483 return innerHeight * ratio; 69484 } 69485 } 69486 return size; 69487 }; 69488 var calculateNewMax = function (parentSize, innerWidth, innerHeight, maxWidth, maxHeight, minWidth, minHeight) { 69489 maxWidth = getPixelSize(maxWidth, parentSize.width, innerWidth, innerHeight); 69490 maxHeight = getPixelSize(maxHeight, parentSize.height, innerWidth, innerHeight); 69491 minWidth = getPixelSize(minWidth, parentSize.width, innerWidth, innerHeight); 69492 minHeight = getPixelSize(minHeight, parentSize.height, innerWidth, innerHeight); 69493 return { 69494 maxWidth: typeof maxWidth === 'undefined' ? undefined : Number(maxWidth), 69495 maxHeight: typeof maxHeight === 'undefined' ? undefined : Number(maxHeight), 69496 minWidth: typeof minWidth === 'undefined' ? undefined : Number(minWidth), 69497 minHeight: typeof minHeight === 'undefined' ? undefined : Number(minHeight), 69498 }; 69499 }; 69500 var definedProps = [ 69501 'as', 69502 'style', 69503 'className', 69504 'grid', 69505 'snap', 69506 'bounds', 69507 'boundsByDirection', 69508 'size', 69509 'defaultSize', 69510 'minWidth', 69511 'minHeight', 69512 'maxWidth', 69513 'maxHeight', 69514 'lockAspectRatio', 69515 'lockAspectRatioExtraWidth', 69516 'lockAspectRatioExtraHeight', 69517 'enable', 69518 'handleStyles', 69519 'handleClasses', 69520 'handleWrapperStyle', 69521 'handleWrapperClass', 69522 'children', 69523 'onResizeStart', 69524 'onResize', 69525 'onResizeStop', 69526 'handleComponent', 69527 'scale', 69528 'resizeRatio', 69529 'snapGap', 69530 ]; 69531 // HACK: This class is used to calculate % size. 69532 var baseClassName = '__resizable_base__'; 69533 var Resizable = /** @class */ (function (_super) { 69534 lib_extends(Resizable, _super); 69535 function Resizable(props) { 69536 var _this = _super.call(this, props) || this; 69537 _this.ratio = 1; 69538 _this.resizable = null; 69539 // For parent boundary 69540 _this.parentLeft = 0; 69541 _this.parentTop = 0; 69542 // For boundary 69543 _this.resizableLeft = 0; 69544 _this.resizableRight = 0; 69545 _this.resizableTop = 0; 69546 _this.resizableBottom = 0; 69547 // For target boundary 69548 _this.targetLeft = 0; 69549 _this.targetTop = 0; 69550 _this.appendBase = function () { 69551 if (!_this.resizable || !_this.window) { 69552 return null; 69553 } 69554 var parent = _this.parentNode; 69555 if (!parent) { 69556 return null; 69557 } 69558 var element = _this.window.document.createElement('div'); 69559 element.style.width = '100%'; 69560 element.style.height = '100%'; 69561 element.style.position = 'absolute'; 69562 element.style.transform = 'scale(0, 0)'; 69563 element.style.left = '0'; 69564 element.style.flex = '0 0 100%'; 69565 if (element.classList) { 69566 element.classList.add(baseClassName); 69567 } 69568 else { 69569 element.className += baseClassName; 69570 } 69571 parent.appendChild(element); 69572 return element; 69573 }; 69574 _this.removeBase = function (base) { 69575 var parent = _this.parentNode; 69576 if (!parent) { 69577 return; 69578 } 69579 parent.removeChild(base); 69580 }; 69581 _this.ref = function (c) { 69582 if (c) { 69583 _this.resizable = c; 69584 } 69585 }; 69586 _this.state = { 69587 isResizing: false, 69588 width: typeof (_this.propsSize && _this.propsSize.width) === 'undefined' 69589 ? 'auto' 69590 : _this.propsSize && _this.propsSize.width, 69591 height: typeof (_this.propsSize && _this.propsSize.height) === 'undefined' 69592 ? 'auto' 69593 : _this.propsSize && _this.propsSize.height, 69594 direction: 'right', 69595 original: { 69596 x: 0, 69597 y: 0, 69598 width: 0, 69599 height: 0, 69600 }, 69601 backgroundStyle: { 69602 height: '100%', 69603 width: '100%', 69604 backgroundColor: 'rgba(0,0,0,0)', 69605 cursor: 'auto', 69606 opacity: 0, 69607 position: 'fixed', 69608 zIndex: 9999, 69609 top: '0', 69610 left: '0', 69611 bottom: '0', 69612 right: '0', 69613 }, 69614 flexBasis: undefined, 69615 }; 69616 _this.onResizeStart = _this.onResizeStart.bind(_this); 69617 _this.onMouseMove = _this.onMouseMove.bind(_this); 69618 _this.onMouseUp = _this.onMouseUp.bind(_this); 69619 return _this; 69620 } 69621 Object.defineProperty(Resizable.prototype, "parentNode", { 69622 get: function () { 69623 if (!this.resizable) { 69624 return null; 69625 } 69626 return this.resizable.parentNode; 69627 }, 69628 enumerable: false, 69629 configurable: true 69630 }); 69631 Object.defineProperty(Resizable.prototype, "window", { 69632 get: function () { 69633 if (!this.resizable) { 69634 return null; 69635 } 69636 if (!this.resizable.ownerDocument) { 69637 return null; 69638 } 69639 return this.resizable.ownerDocument.defaultView; 69640 }, 69641 enumerable: false, 69642 configurable: true 69643 }); 69644 Object.defineProperty(Resizable.prototype, "propsSize", { 69645 get: function () { 69646 return this.props.size || this.props.defaultSize || DEFAULT_SIZE; 69647 }, 69648 enumerable: false, 69649 configurable: true 69650 }); 69651 Object.defineProperty(Resizable.prototype, "size", { 69652 get: function () { 69653 var width = 0; 69654 var height = 0; 69655 if (this.resizable && this.window) { 69656 var orgWidth = this.resizable.offsetWidth; 69657 var orgHeight = this.resizable.offsetHeight; 69658 // HACK: Set position `relative` to get parent size. 69659 // This is because when re-resizable set `absolute`, I can not get base width correctly. 69660 var orgPosition = this.resizable.style.position; 69661 if (orgPosition !== 'relative') { 69662 this.resizable.style.position = 'relative'; 69663 } 69664 // INFO: Use original width or height if set auto. 69665 width = this.resizable.style.width !== 'auto' ? this.resizable.offsetWidth : orgWidth; 69666 height = this.resizable.style.height !== 'auto' ? this.resizable.offsetHeight : orgHeight; 69667 // Restore original position 69668 this.resizable.style.position = orgPosition; 69669 } 69670 return { width: width, height: height }; 69671 }, 69672 enumerable: false, 69673 configurable: true 69674 }); 69675 Object.defineProperty(Resizable.prototype, "sizeStyle", { 69676 get: function () { 69677 var _this = this; 69678 var size = this.props.size; 69679 var getSize = function (key) { 69680 if (typeof _this.state[key] === 'undefined' || _this.state[key] === 'auto') { 69681 return 'auto'; 69682 } 69683 if (_this.propsSize && _this.propsSize[key] && _this.propsSize[key].toString().endsWith('%')) { 69684 if (_this.state[key].toString().endsWith('%')) { 69685 return _this.state[key].toString(); 69686 } 69687 var parentSize = _this.getParentSize(); 69688 var value = Number(_this.state[key].toString().replace('px', '')); 69689 var percent = (value / parentSize[key]) * 100; 69690 return percent + "%"; 69691 } 69692 return getStringSize(_this.state[key]); 69693 }; 69694 var width = size && typeof size.width !== 'undefined' && !this.state.isResizing 69695 ? getStringSize(size.width) 69696 : getSize('width'); 69697 var height = size && typeof size.height !== 'undefined' && !this.state.isResizing 69698 ? getStringSize(size.height) 69699 : getSize('height'); 69700 return { width: width, height: height }; 69701 }, 69702 enumerable: false, 69703 configurable: true 69704 }); 69705 Resizable.prototype.getParentSize = function () { 69706 if (!this.parentNode) { 69707 if (!this.window) { 69708 return { width: 0, height: 0 }; 69709 } 69710 return { width: this.window.innerWidth, height: this.window.innerHeight }; 69711 } 69712 var base = this.appendBase(); 69713 if (!base) { 69714 return { width: 0, height: 0 }; 69715 } 69716 // INFO: To calculate parent width with flex layout 69717 var wrapChanged = false; 69718 var wrap = this.parentNode.style.flexWrap; 69719 if (wrap !== 'wrap') { 69720 wrapChanged = true; 69721 this.parentNode.style.flexWrap = 'wrap'; 69722 // HACK: Use relative to get parent padding size 69723 } 69724 base.style.position = 'relative'; 69725 base.style.minWidth = '100%'; 69726 base.style.minHeight = '100%'; 69727 var size = { 69728 width: base.offsetWidth, 69729 height: base.offsetHeight, 69730 }; 69731 if (wrapChanged) { 69732 this.parentNode.style.flexWrap = wrap; 69733 } 69734 this.removeBase(base); 69735 return size; 69736 }; 69737 Resizable.prototype.bindEvents = function () { 69738 if (this.window) { 69739 this.window.addEventListener('mouseup', this.onMouseUp); 69740 this.window.addEventListener('mousemove', this.onMouseMove); 69741 this.window.addEventListener('mouseleave', this.onMouseUp); 69742 this.window.addEventListener('touchmove', this.onMouseMove, { 69743 capture: true, 69744 passive: false, 69745 }); 69746 this.window.addEventListener('touchend', this.onMouseUp); 69747 } 69748 }; 69749 Resizable.prototype.unbindEvents = function () { 69750 if (this.window) { 69751 this.window.removeEventListener('mouseup', this.onMouseUp); 69752 this.window.removeEventListener('mousemove', this.onMouseMove); 69753 this.window.removeEventListener('mouseleave', this.onMouseUp); 69754 this.window.removeEventListener('touchmove', this.onMouseMove, true); 69755 this.window.removeEventListener('touchend', this.onMouseUp); 69756 } 69757 }; 69758 Resizable.prototype.componentDidMount = function () { 69759 if (!this.resizable || !this.window) { 69760 return; 69761 } 69762 var computedStyle = this.window.getComputedStyle(this.resizable); 69763 this.setState({ 69764 width: this.state.width || this.size.width, 69765 height: this.state.height || this.size.height, 69766 flexBasis: computedStyle.flexBasis !== 'auto' ? computedStyle.flexBasis : undefined, 69767 }); 69768 }; 69769 Resizable.prototype.componentWillUnmount = function () { 69770 if (this.window) { 69771 this.unbindEvents(); 69772 } 69773 }; 69774 Resizable.prototype.createSizeForCssProperty = function (newSize, kind) { 69775 var propsSize = this.propsSize && this.propsSize[kind]; 69776 return this.state[kind] === 'auto' && 69777 this.state.original[kind] === newSize && 69778 (typeof propsSize === 'undefined' || propsSize === 'auto') 69779 ? 'auto' 69780 : newSize; 69781 }; 69782 Resizable.prototype.calculateNewMaxFromBoundary = function (maxWidth, maxHeight) { 69783 var boundsByDirection = this.props.boundsByDirection; 69784 var direction = this.state.direction; 69785 var widthByDirection = boundsByDirection && hasDirection('left', direction); 69786 var heightByDirection = boundsByDirection && hasDirection('top', direction); 69787 var boundWidth; 69788 var boundHeight; 69789 if (this.props.bounds === 'parent') { 69790 var parent_1 = this.parentNode; 69791 if (parent_1) { 69792 boundWidth = widthByDirection 69793 ? this.resizableRight - this.parentLeft 69794 : parent_1.offsetWidth + (this.parentLeft - this.resizableLeft); 69795 boundHeight = heightByDirection 69796 ? this.resizableBottom - this.parentTop 69797 : parent_1.offsetHeight + (this.parentTop - this.resizableTop); 69798 } 69799 } 69800 else if (this.props.bounds === 'window') { 69801 if (this.window) { 69802 boundWidth = widthByDirection ? this.resizableRight : this.window.innerWidth - this.resizableLeft; 69803 boundHeight = heightByDirection ? this.resizableBottom : this.window.innerHeight - this.resizableTop; 69804 } 69805 } 69806 else if (this.props.bounds) { 69807 boundWidth = widthByDirection 69808 ? this.resizableRight - this.targetLeft 69809 : this.props.bounds.offsetWidth + (this.targetLeft - this.resizableLeft); 69810 boundHeight = heightByDirection 69811 ? this.resizableBottom - this.targetTop 69812 : this.props.bounds.offsetHeight + (this.targetTop - this.resizableTop); 69813 } 69814 if (boundWidth && Number.isFinite(boundWidth)) { 69815 maxWidth = maxWidth && maxWidth < boundWidth ? maxWidth : boundWidth; 69816 } 69817 if (boundHeight && Number.isFinite(boundHeight)) { 69818 maxHeight = maxHeight && maxHeight < boundHeight ? maxHeight : boundHeight; 69819 } 69820 return { maxWidth: maxWidth, maxHeight: maxHeight }; 69821 }; 69822 Resizable.prototype.calculateNewSizeFromDirection = function (clientX, clientY) { 69823 var scale = this.props.scale || 1; 69824 var resizeRatio = this.props.resizeRatio || 1; 69825 var _a = this.state, direction = _a.direction, original = _a.original; 69826 var _b = this.props, lockAspectRatio = _b.lockAspectRatio, lockAspectRatioExtraHeight = _b.lockAspectRatioExtraHeight, lockAspectRatioExtraWidth = _b.lockAspectRatioExtraWidth; 69827 var newWidth = original.width; 69828 var newHeight = original.height; 69829 var extraHeight = lockAspectRatioExtraHeight || 0; 69830 var extraWidth = lockAspectRatioExtraWidth || 0; 69831 if (hasDirection('right', direction)) { 69832 newWidth = original.width + ((clientX - original.x) * resizeRatio) / scale; 69833 if (lockAspectRatio) { 69834 newHeight = (newWidth - extraWidth) / this.ratio + extraHeight; 69835 } 69836 } 69837 if (hasDirection('left', direction)) { 69838 newWidth = original.width - ((clientX - original.x) * resizeRatio) / scale; 69839 if (lockAspectRatio) { 69840 newHeight = (newWidth - extraWidth) / this.ratio + extraHeight; 69841 } 69842 } 69843 if (hasDirection('bottom', direction)) { 69844 newHeight = original.height + ((clientY - original.y) * resizeRatio) / scale; 69845 if (lockAspectRatio) { 69846 newWidth = (newHeight - extraHeight) * this.ratio + extraWidth; 69847 } 69848 } 69849 if (hasDirection('top', direction)) { 69850 newHeight = original.height - ((clientY - original.y) * resizeRatio) / scale; 69851 if (lockAspectRatio) { 69852 newWidth = (newHeight - extraHeight) * this.ratio + extraWidth; 69853 } 69854 } 69855 return { newWidth: newWidth, newHeight: newHeight }; 69856 }; 69857 Resizable.prototype.calculateNewSizeFromAspectRatio = function (newWidth, newHeight, max, min) { 69858 var _a = this.props, lockAspectRatio = _a.lockAspectRatio, lockAspectRatioExtraHeight = _a.lockAspectRatioExtraHeight, lockAspectRatioExtraWidth = _a.lockAspectRatioExtraWidth; 69859 var computedMinWidth = typeof min.width === 'undefined' ? 10 : min.width; 69860 var computedMaxWidth = typeof max.width === 'undefined' || max.width < 0 ? newWidth : max.width; 69861 var computedMinHeight = typeof min.height === 'undefined' ? 10 : min.height; 69862 var computedMaxHeight = typeof max.height === 'undefined' || max.height < 0 ? newHeight : max.height; 69863 var extraHeight = lockAspectRatioExtraHeight || 0; 69864 var extraWidth = lockAspectRatioExtraWidth || 0; 69865 if (lockAspectRatio) { 69866 var extraMinWidth = (computedMinHeight - extraHeight) * this.ratio + extraWidth; 69867 var extraMaxWidth = (computedMaxHeight - extraHeight) * this.ratio + extraWidth; 69868 var extraMinHeight = (computedMinWidth - extraWidth) / this.ratio + extraHeight; 69869 var extraMaxHeight = (computedMaxWidth - extraWidth) / this.ratio + extraHeight; 69870 var lockedMinWidth = Math.max(computedMinWidth, extraMinWidth); 69871 var lockedMaxWidth = Math.min(computedMaxWidth, extraMaxWidth); 69872 var lockedMinHeight = Math.max(computedMinHeight, extraMinHeight); 69873 var lockedMaxHeight = Math.min(computedMaxHeight, extraMaxHeight); 69874 newWidth = lib_clamp(newWidth, lockedMinWidth, lockedMaxWidth); 69875 newHeight = lib_clamp(newHeight, lockedMinHeight, lockedMaxHeight); 69876 } 69877 else { 69878 newWidth = lib_clamp(newWidth, computedMinWidth, computedMaxWidth); 69879 newHeight = lib_clamp(newHeight, computedMinHeight, computedMaxHeight); 69880 } 69881 return { newWidth: newWidth, newHeight: newHeight }; 69882 }; 69883 Resizable.prototype.setBoundingClientRect = function () { 69884 // For parent boundary 69885 if (this.props.bounds === 'parent') { 69886 var parent_2 = this.parentNode; 69887 if (parent_2) { 69888 var parentRect = parent_2.getBoundingClientRect(); 69889 this.parentLeft = parentRect.left; 69890 this.parentTop = parentRect.top; 69891 } 69892 } 69893 // For target(html element) boundary 69894 if (this.props.bounds && typeof this.props.bounds !== 'string') { 69895 var targetRect = this.props.bounds.getBoundingClientRect(); 69896 this.targetLeft = targetRect.left; 69897 this.targetTop = targetRect.top; 69898 } 69899 // For boundary 69900 if (this.resizable) { 69901 var _a = this.resizable.getBoundingClientRect(), left = _a.left, top_1 = _a.top, right = _a.right, bottom = _a.bottom; 69902 this.resizableLeft = left; 69903 this.resizableRight = right; 69904 this.resizableTop = top_1; 69905 this.resizableBottom = bottom; 69906 } 69907 }; 69908 Resizable.prototype.onResizeStart = function (event, direction) { 69909 if (!this.resizable || !this.window) { 69910 return; 69911 } 69912 var clientX = 0; 69913 var clientY = 0; 69914 if (event.nativeEvent && lib_isMouseEvent(event.nativeEvent)) { 69915 clientX = event.nativeEvent.clientX; 69916 clientY = event.nativeEvent.clientY; 69917 } 69918 else if (event.nativeEvent && lib_isTouchEvent(event.nativeEvent)) { 69919 clientX = event.nativeEvent.touches[0].clientX; 69920 clientY = event.nativeEvent.touches[0].clientY; 69921 } 69922 if (this.props.onResizeStart) { 69923 if (this.resizable) { 69924 var startResize = this.props.onResizeStart(event, direction, this.resizable); 69925 if (startResize === false) { 69926 return; 69927 } 69928 } 69929 } 69930 // Fix #168 69931 if (this.props.size) { 69932 if (typeof this.props.size.height !== 'undefined' && this.props.size.height !== this.state.height) { 69933 this.setState({ height: this.props.size.height }); 69934 } 69935 if (typeof this.props.size.width !== 'undefined' && this.props.size.width !== this.state.width) { 69936 this.setState({ width: this.props.size.width }); 69937 } 69938 } 69939 // For lockAspectRatio case 69940 this.ratio = 69941 typeof this.props.lockAspectRatio === 'number' ? this.props.lockAspectRatio : this.size.width / this.size.height; 69942 var flexBasis; 69943 var computedStyle = this.window.getComputedStyle(this.resizable); 69944 if (computedStyle.flexBasis !== 'auto') { 69945 var parent_3 = this.parentNode; 69946 if (parent_3) { 69947 var dir = this.window.getComputedStyle(parent_3).flexDirection; 69948 this.flexDir = dir.startsWith('row') ? 'row' : 'column'; 69949 flexBasis = computedStyle.flexBasis; 69950 } 69951 } 69952 // For boundary 69953 this.setBoundingClientRect(); 69954 this.bindEvents(); 69955 var state = { 69956 original: { 69957 x: clientX, 69958 y: clientY, 69959 width: this.size.width, 69960 height: this.size.height, 69961 }, 69962 isResizing: true, 69963 backgroundStyle: lib_assign(lib_assign({}, this.state.backgroundStyle), { cursor: this.window.getComputedStyle(event.target).cursor || 'auto' }), 69964 direction: direction, 69965 flexBasis: flexBasis, 69966 }; 69967 this.setState(state); 69968 }; 69969 Resizable.prototype.onMouseMove = function (event) { 69970 var _this = this; 69971 if (!this.state.isResizing || !this.resizable || !this.window) { 69972 return; 69973 } 69974 if (this.window.TouchEvent && lib_isTouchEvent(event)) { 69975 try { 69976 event.preventDefault(); 69977 event.stopPropagation(); 69978 } 69979 catch (e) { 69980 // Ignore on fail 69981 } 69982 } 69983 var _a = this.props, maxWidth = _a.maxWidth, maxHeight = _a.maxHeight, minWidth = _a.minWidth, minHeight = _a.minHeight; 69984 var clientX = lib_isTouchEvent(event) ? event.touches[0].clientX : event.clientX; 69985 var clientY = lib_isTouchEvent(event) ? event.touches[0].clientY : event.clientY; 69986 var _b = this.state, direction = _b.direction, original = _b.original, width = _b.width, height = _b.height; 69987 var parentSize = this.getParentSize(); 69988 var max = calculateNewMax(parentSize, this.window.innerWidth, this.window.innerHeight, maxWidth, maxHeight, minWidth, minHeight); 69989 maxWidth = max.maxWidth; 69990 maxHeight = max.maxHeight; 69991 minWidth = max.minWidth; 69992 minHeight = max.minHeight; 69993 // Calculate new size 69994 var _c = this.calculateNewSizeFromDirection(clientX, clientY), newHeight = _c.newHeight, newWidth = _c.newWidth; 69995 // Calculate max size from boundary settings 69996 var boundaryMax = this.calculateNewMaxFromBoundary(maxWidth, maxHeight); 69997 if (this.props.snap && this.props.snap.x) { 69998 newWidth = findClosestSnap(newWidth, this.props.snap.x, this.props.snapGap); 69999 } 70000 if (this.props.snap && this.props.snap.y) { 70001 newHeight = findClosestSnap(newHeight, this.props.snap.y, this.props.snapGap); 70002 } 70003 // Calculate new size from aspect ratio 70004 var newSize = this.calculateNewSizeFromAspectRatio(newWidth, newHeight, { width: boundaryMax.maxWidth, height: boundaryMax.maxHeight }, { width: minWidth, height: minHeight }); 70005 newWidth = newSize.newWidth; 70006 newHeight = newSize.newHeight; 70007 if (this.props.grid) { 70008 var newGridWidth = snap(newWidth, this.props.grid[0]); 70009 var newGridHeight = snap(newHeight, this.props.grid[1]); 70010 var gap = this.props.snapGap || 0; 70011 newWidth = gap === 0 || Math.abs(newGridWidth - newWidth) <= gap ? newGridWidth : newWidth; 70012 newHeight = gap === 0 || Math.abs(newGridHeight - newHeight) <= gap ? newGridHeight : newHeight; 70013 } 70014 var delta = { 70015 width: newWidth - original.width, 70016 height: newHeight - original.height, 70017 }; 70018 if (width && typeof width === 'string') { 70019 if (width.endsWith('%')) { 70020 var percent = (newWidth / parentSize.width) * 100; 70021 newWidth = percent + "%"; 70022 } 70023 else if (width.endsWith('vw')) { 70024 var vw = (newWidth / this.window.innerWidth) * 100; 70025 newWidth = vw + "vw"; 70026 } 70027 else if (width.endsWith('vh')) { 70028 var vh = (newWidth / this.window.innerHeight) * 100; 70029 newWidth = vh + "vh"; 70030 } 70031 } 70032 if (height && typeof height === 'string') { 70033 if (height.endsWith('%')) { 70034 var percent = (newHeight / parentSize.height) * 100; 70035 newHeight = percent + "%"; 70036 } 70037 else if (height.endsWith('vw')) { 70038 var vw = (newHeight / this.window.innerWidth) * 100; 70039 newHeight = vw + "vw"; 70040 } 70041 else if (height.endsWith('vh')) { 70042 var vh = (newHeight / this.window.innerHeight) * 100; 70043 newHeight = vh + "vh"; 70044 } 70045 } 70046 var newState = { 70047 width: this.createSizeForCssProperty(newWidth, 'width'), 70048 height: this.createSizeForCssProperty(newHeight, 'height'), 70049 }; 70050 if (this.flexDir === 'row') { 70051 newState.flexBasis = newState.width; 70052 } 70053 else if (this.flexDir === 'column') { 70054 newState.flexBasis = newState.height; 70055 } 70056 // For v18, update state sync 70057 (0,external_ReactDOM_namespaceObject.flushSync)(function () { 70058 _this.setState(newState); 70059 }); 70060 if (this.props.onResize) { 70061 this.props.onResize(event, direction, this.resizable, delta); 70062 } 70063 }; 70064 Resizable.prototype.onMouseUp = function (event) { 70065 var _a = this.state, isResizing = _a.isResizing, direction = _a.direction, original = _a.original; 70066 if (!isResizing || !this.resizable) { 70067 return; 70068 } 70069 var delta = { 70070 width: this.size.width - original.width, 70071 height: this.size.height - original.height, 70072 }; 70073 if (this.props.onResizeStop) { 70074 this.props.onResizeStop(event, direction, this.resizable, delta); 70075 } 70076 if (this.props.size) { 70077 this.setState(this.props.size); 70078 } 70079 this.unbindEvents(); 70080 this.setState({ 70081 isResizing: false, 70082 backgroundStyle: lib_assign(lib_assign({}, this.state.backgroundStyle), { cursor: 'auto' }), 70083 }); 70084 }; 70085 Resizable.prototype.updateSize = function (size) { 70086 this.setState({ width: size.width, height: size.height }); 70087 }; 70088 Resizable.prototype.renderResizer = function () { 70089 var _this = this; 70090 var _a = this.props, enable = _a.enable, handleStyles = _a.handleStyles, handleClasses = _a.handleClasses, handleWrapperStyle = _a.handleWrapperStyle, handleWrapperClass = _a.handleWrapperClass, handleComponent = _a.handleComponent; 70091 if (!enable) { 70092 return null; 70093 } 70094 var resizers = Object.keys(enable).map(function (dir) { 70095 if (enable[dir] !== false) { 70096 return (external_React_.createElement(Resizer, { key: dir, direction: dir, onResizeStart: _this.onResizeStart, replaceStyles: handleStyles && handleStyles[dir], className: handleClasses && handleClasses[dir] }, handleComponent && handleComponent[dir] ? handleComponent[dir] : null)); 70097 } 70098 return null; 70099 }); 70100 // #93 Wrap the resize box in span (will not break 100% width/height) 70101 return (external_React_.createElement("div", { className: handleWrapperClass, style: handleWrapperStyle }, resizers)); 70102 }; 70103 Resizable.prototype.render = function () { 70104 var _this = this; 70105 var extendsProps = Object.keys(this.props).reduce(function (acc, key) { 70106 if (definedProps.indexOf(key) !== -1) { 70107 return acc; 70108 } 70109 acc[key] = _this.props[key]; 70110 return acc; 70111 }, {}); 70112 var style = lib_assign(lib_assign(lib_assign({ position: 'relative', userSelect: this.state.isResizing ? 'none' : 'auto' }, this.props.style), this.sizeStyle), { maxWidth: this.props.maxWidth, maxHeight: this.props.maxHeight, minWidth: this.props.minWidth, minHeight: this.props.minHeight, boxSizing: 'border-box', flexShrink: 0 }); 70113 if (this.state.flexBasis) { 70114 style.flexBasis = this.state.flexBasis; 70115 } 70116 var Wrapper = this.props.as || 'div'; 70117 return (external_React_.createElement(Wrapper, lib_assign({ ref: this.ref, style: style, className: this.props.className }, extendsProps), 70118 this.state.isResizing && external_React_.createElement("div", { style: this.state.backgroundStyle }), 70119 this.props.children, 70120 this.renderResizer())); 70121 }; 70122 Resizable.defaultProps = { 70123 as: 'div', 70124 onResizeStart: function () { }, 70125 onResize: function () { }, 70126 onResizeStop: function () { }, 70127 enable: { 70128 top: true, 70129 right: true, 70130 bottom: true, 70131 left: true, 70132 topRight: true, 70133 bottomRight: true, 70134 bottomLeft: true, 70135 topLeft: true, 70136 }, 70137 style: {}, 70138 grid: [1, 1], 70139 lockAspectRatio: false, 70140 lockAspectRatioExtraWidth: 0, 70141 lockAspectRatioExtraHeight: 0, 70142 scale: 1, 70143 resizeRatio: 1, 70144 snapGap: 0, 70145 }; 70146 return Resizable; 70147 }(external_React_.PureComponent)); 70148 70149 70150 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/resizable-box/resize-tooltip/utils.js 70151 /** 70152 * External dependencies 70153 */ 70154 70155 70156 /** 70157 * WordPress dependencies 70158 */ 70159 70160 70161 const { 70162 clearTimeout: utils_clearTimeout, 70163 setTimeout: utils_setTimeout 70164 } = window; 70165 const POSITIONS = { 70166 bottom: 'bottom', 70167 corner: 'corner' 70168 }; 70169 70170 /** 70171 * Custom hook that manages resize listener events. It also provides a label 70172 * based on current resize width x height values. 70173 * 70174 * @param props 70175 * @param props.axis Only shows the label corresponding to the axis. 70176 * @param props.fadeTimeout Duration (ms) before deactivating the resize label. 70177 * @param props.onResize Callback when a resize occurs. Provides { width, height } callback. 70178 * @param props.position Adjusts label value. 70179 * @param props.showPx Whether to add `PX` to the label. 70180 * 70181 * @return Properties for hook. 70182 */ 70183 function useResizeLabel(_ref) { 70184 let { 70185 axis, 70186 fadeTimeout = 180, 70187 onResize = external_lodash_namespaceObject.noop, 70188 position = POSITIONS.bottom, 70189 showPx = false 70190 } = _ref; 70191 70192 /* 70193 * The width/height values derive from this special useResizeAware hook. 70194 * This custom hook uses injects an iFrame into the element, allowing it 70195 * to tap into the onResize (window) callback events. 70196 */ 70197 const [resizeListener, sizes] = react_resize_aware_dist_default()(); 70198 /* 70199 * Indicates if the x/y axis is preferred. 70200 * If set, we will avoid resetting the moveX and moveY values. 70201 * This will allow for the preferred axis values to persist in the label. 70202 */ 70203 70204 const isAxisControlled = !!axis; 70205 /* 70206 * The moveX and moveY values are used to track whether the label should 70207 * display width, height, or width x height. 70208 */ 70209 70210 const [moveX, setMoveX] = (0,external_wp_element_namespaceObject.useState)(false); 70211 const [moveY, setMoveY] = (0,external_wp_element_namespaceObject.useState)(false); 70212 /* 70213 * Cached dimension values to check for width/height updates from the 70214 * sizes property from useResizeAware() 70215 */ 70216 70217 const { 70218 width, 70219 height 70220 } = sizes; 70221 const heightRef = (0,external_wp_element_namespaceObject.useRef)(height); 70222 const widthRef = (0,external_wp_element_namespaceObject.useRef)(width); 70223 /* 70224 * This timeout is used with setMoveX and setMoveY to determine of 70225 * both width and height values have changed at (roughly) the same time. 70226 */ 70227 70228 const moveTimeoutRef = (0,external_wp_element_namespaceObject.useRef)(); 70229 70230 const unsetMoveXY = () => { 70231 /* 70232 * If axis is controlled, we will avoid resetting the moveX and moveY values. 70233 * This will allow for the preferred axis values to persist in the label. 70234 */ 70235 if (isAxisControlled) return; 70236 setMoveX(false); 70237 setMoveY(false); 70238 }; 70239 70240 const debounceUnsetMoveXY = () => { 70241 if (moveTimeoutRef.current) { 70242 utils_clearTimeout(moveTimeoutRef.current); 70243 } 70244 70245 moveTimeoutRef.current = utils_setTimeout(unsetMoveXY, fadeTimeout); 70246 }; 70247 70248 (0,external_wp_element_namespaceObject.useEffect)(() => { 70249 /* 70250 * On the initial render of useResizeAware, the height and width values are 70251 * null. They are calculated then set using via an internal useEffect hook. 70252 */ 70253 const isRendered = width !== null || height !== null; 70254 if (!isRendered) return; 70255 const didWidthChange = width !== widthRef.current; 70256 const didHeightChange = height !== heightRef.current; 70257 if (!didWidthChange && !didHeightChange) return; 70258 /* 70259 * After the initial render, the useResizeAware will set the first 70260 * width and height values. We'll sync those values with our 70261 * width and height refs. However, we shouldn't render our Tooltip 70262 * label on this first cycle. 70263 */ 70264 70265 if (width && !widthRef.current && height && !heightRef.current) { 70266 widthRef.current = width; 70267 heightRef.current = height; 70268 return; 70269 } 70270 /* 70271 * After the first cycle, we can track width and height changes. 70272 */ 70273 70274 70275 if (didWidthChange) { 70276 setMoveX(true); 70277 widthRef.current = width; 70278 } 70279 70280 if (didHeightChange) { 70281 setMoveY(true); 70282 heightRef.current = height; 70283 } 70284 70285 onResize({ 70286 width, 70287 height 70288 }); 70289 debounceUnsetMoveXY(); 70290 }, [width, height]); 70291 const label = getSizeLabel({ 70292 axis, 70293 height, 70294 moveX, 70295 moveY, 70296 position, 70297 showPx, 70298 width 70299 }); 70300 return { 70301 label, 70302 resizeListener 70303 }; 70304 } 70305 70306 /** 70307 * Gets the resize label based on width and height values (as well as recent changes). 70308 * 70309 * @param props 70310 * @param props.axis Only shows the label corresponding to the axis. 70311 * @param props.height Height value. 70312 * @param props.moveX Recent width (x axis) changes. 70313 * @param props.moveY Recent width (y axis) changes. 70314 * @param props.position Adjusts label value. 70315 * @param props.showPx Whether to add `PX` to the label. 70316 * @param props.width Width value. 70317 * 70318 * @return The rendered label. 70319 */ 70320 function getSizeLabel(_ref2) { 70321 let { 70322 axis, 70323 height, 70324 moveX = false, 70325 moveY = false, 70326 position = POSITIONS.bottom, 70327 showPx = false, 70328 width 70329 } = _ref2; 70330 if (!moveX && !moveY) return undefined; 70331 /* 70332 * Corner position... 70333 * We want the label to appear like width x height. 70334 */ 70335 70336 if (position === POSITIONS.corner) { 70337 return `$width} x $height}`; 70338 } 70339 /* 70340 * Other POSITIONS... 70341 * The label will combine both width x height values if both 70342 * values have recently been changed. 70343 * 70344 * Otherwise, only width or height will be displayed. 70345 * The `PX` unit will be added, if specified by the `showPx` prop. 70346 */ 70347 70348 70349 const labelUnit = showPx ? ' px' : ''; 70350 70351 if (axis) { 70352 if (axis === 'x' && moveX) { 70353 return `$width}$labelUnit}`; 70354 } 70355 70356 if (axis === 'y' && moveY) { 70357 return `$height}$labelUnit}`; 70358 } 70359 } 70360 70361 if (moveX && moveY) { 70362 return `$width} x $height}`; 70363 } 70364 70365 if (moveX) { 70366 return `$width}$labelUnit}`; 70367 } 70368 70369 if (moveY) { 70370 return `$height}$labelUnit}`; 70371 } 70372 70373 return undefined; 70374 } 70375 70376 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/resizable-box/resize-tooltip/styles/resize-tooltip.styles.js 70377 70378 70379 function resize_tooltip_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } 70380 70381 /** 70382 * External dependencies 70383 */ 70384 70385 /** 70386 * Internal dependencies 70387 */ 70388 70389 70390 const resize_tooltip_styles_Root = emotion_styled_base_browser_esm("div", true ? { 70391 target: "ekdag503" 70392 } : 0)( true ? { 70393 name: "1cd7zoc", 70394 styles: "bottom:0;box-sizing:border-box;left:0;pointer-events:none;position:absolute;right:0;top:0" 70395 } : 0); 70396 const TooltipWrapper = emotion_styled_base_browser_esm("div", true ? { 70397 target: "ekdag502" 70398 } : 0)( true ? { 70399 name: "ajymcs", 70400 styles: "align-items:center;box-sizing:border-box;display:inline-flex;justify-content:center;opacity:0;pointer-events:none;transition:opacity 120ms linear" 70401 } : 0); 70402 const resize_tooltip_styles_Tooltip = emotion_styled_base_browser_esm("div", true ? { 70403 target: "ekdag501" 70404 } : 0)("background:", COLORS.ui.border, ";border-radius:2px;box-sizing:border-box;font-size:12px;color:", COLORS.ui.textDark, ";padding:4px 8px;position:relative;" + ( true ? "" : 0)); // TODO: Resolve need to use &&& to increase specificity 70405 // https://github.com/WordPress/gutenberg/issues/18483 70406 70407 const LabelText = /*#__PURE__*/emotion_styled_base_browser_esm(text_component, true ? { 70408 target: "ekdag500" 70409 } : 0)("&&&{color:", COLORS.ui.textDark, ";display:block;font-size:13px;line-height:1.4;white-space:nowrap;}" + ( true ? "" : 0)); 70410 70411 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/resizable-box/resize-tooltip/label.js 70412 70413 70414 70415 /** 70416 * External dependencies 70417 */ 70418 70419 /** 70420 * WordPress dependencies 70421 */ 70422 70423 70424 /** 70425 * Internal dependencies 70426 */ 70427 70428 70429 70430 const CORNER_OFFSET = 4; 70431 const CURSOR_OFFSET_TOP = CORNER_OFFSET * 2.5; 70432 70433 function resize_tooltip_label_Label(_ref, ref) { 70434 let { 70435 label, 70436 position = POSITIONS.corner, 70437 zIndex = 1000, 70438 ...props 70439 } = _ref; 70440 const showLabel = !!label; 70441 const isBottom = position === POSITIONS.bottom; 70442 const isCorner = position === POSITIONS.corner; 70443 if (!showLabel) return null; 70444 let style = { 70445 opacity: showLabel ? 1 : undefined, 70446 zIndex 70447 }; 70448 let labelStyle = {}; 70449 70450 if (isBottom) { 70451 style = { ...style, 70452 position: 'absolute', 70453 bottom: CURSOR_OFFSET_TOP * -1, 70454 left: '50%', 70455 transform: 'translate(-50%, 0)' 70456 }; 70457 labelStyle = { 70458 transform: `translate(0, 100%)` 70459 }; 70460 } 70461 70462 if (isCorner) { 70463 style = { ...style, 70464 position: 'absolute', 70465 top: CORNER_OFFSET, 70466 right: (0,external_wp_i18n_namespaceObject.isRTL)() ? undefined : CORNER_OFFSET, 70467 left: (0,external_wp_i18n_namespaceObject.isRTL)() ? CORNER_OFFSET : undefined 70468 }; 70469 } 70470 70471 return (0,external_wp_element_namespaceObject.createElement)(TooltipWrapper, extends_extends({ 70472 "aria-hidden": "true", 70473 className: "components-resizable-tooltip__tooltip-wrapper", 70474 ref: ref, 70475 style: style 70476 }, props), (0,external_wp_element_namespaceObject.createElement)(resize_tooltip_styles_Tooltip, { 70477 className: "components-resizable-tooltip__tooltip", 70478 style: labelStyle 70479 }, (0,external_wp_element_namespaceObject.createElement)(LabelText, { 70480 as: "span" 70481 }, label))); 70482 } 70483 70484 const label_ForwardedComponent = (0,external_wp_element_namespaceObject.forwardRef)(resize_tooltip_label_Label); 70485 /* harmony default export */ var resize_tooltip_label = (label_ForwardedComponent); 70486 70487 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/resizable-box/resize-tooltip/index.js 70488 70489 70490 70491 /** 70492 * External dependencies 70493 */ 70494 70495 70496 70497 /** 70498 * WordPress dependencies 70499 */ 70500 70501 /** 70502 * Internal dependencies 70503 */ 70504 70505 70506 70507 70508 70509 function ResizeTooltip(_ref, ref) { 70510 let { 70511 axis, 70512 className, 70513 fadeTimeout = 180, 70514 isVisible = true, 70515 labelRef, 70516 onResize = external_lodash_namespaceObject.noop, 70517 position = POSITIONS.bottom, 70518 showPx = true, 70519 zIndex = 1000, 70520 ...props 70521 } = _ref; 70522 const { 70523 label, 70524 resizeListener 70525 } = useResizeLabel({ 70526 axis, 70527 fadeTimeout, 70528 onResize, 70529 showPx, 70530 position 70531 }); 70532 if (!isVisible) return null; 70533 const classes = classnames_default()('components-resize-tooltip', className); 70534 return (0,external_wp_element_namespaceObject.createElement)(resize_tooltip_styles_Root, extends_extends({ 70535 "aria-hidden": "true", 70536 className: classes, 70537 ref: ref 70538 }, props), resizeListener, (0,external_wp_element_namespaceObject.createElement)(resize_tooltip_label, { 70539 "aria-hidden": props['aria-hidden'], 70540 label: label, 70541 position: position, 70542 ref: labelRef, 70543 zIndex: zIndex 70544 })); 70545 } 70546 70547 const resize_tooltip_ForwardedComponent = (0,external_wp_element_namespaceObject.forwardRef)(ResizeTooltip); 70548 /* harmony default export */ var resize_tooltip = (resize_tooltip_ForwardedComponent); 70549 70550 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/resizable-box/index.js 70551 70552 70553 70554 /** 70555 * WordPress dependencies 70556 */ 70557 70558 /** 70559 * External dependencies 70560 */ 70561 70562 70563 70564 70565 /** 70566 * Internal dependencies 70567 */ 70568 70569 const HANDLE_CLASS_NAME = 'components-resizable-box__handle'; 70570 const SIDE_HANDLE_CLASS_NAME = 'components-resizable-box__side-handle'; 70571 const CORNER_HANDLE_CLASS_NAME = 'components-resizable-box__corner-handle'; 70572 const HANDLE_CLASSES = { 70573 top: classnames_default()(HANDLE_CLASS_NAME, SIDE_HANDLE_CLASS_NAME, 'components-resizable-box__handle-top'), 70574 right: classnames_default()(HANDLE_CLASS_NAME, SIDE_HANDLE_CLASS_NAME, 'components-resizable-box__handle-right'), 70575 bottom: classnames_default()(HANDLE_CLASS_NAME, SIDE_HANDLE_CLASS_NAME, 'components-resizable-box__handle-bottom'), 70576 left: classnames_default()(HANDLE_CLASS_NAME, SIDE_HANDLE_CLASS_NAME, 'components-resizable-box__handle-left'), 70577 topLeft: classnames_default()(HANDLE_CLASS_NAME, CORNER_HANDLE_CLASS_NAME, 'components-resizable-box__handle-top', 'components-resizable-box__handle-left'), 70578 topRight: classnames_default()(HANDLE_CLASS_NAME, CORNER_HANDLE_CLASS_NAME, 'components-resizable-box__handle-top', 'components-resizable-box__handle-right'), 70579 bottomRight: classnames_default()(HANDLE_CLASS_NAME, CORNER_HANDLE_CLASS_NAME, 'components-resizable-box__handle-bottom', 'components-resizable-box__handle-right'), 70580 bottomLeft: classnames_default()(HANDLE_CLASS_NAME, CORNER_HANDLE_CLASS_NAME, 'components-resizable-box__handle-bottom', 'components-resizable-box__handle-left') 70581 }; // Removes the inline styles in the drag handles. 70582 70583 const HANDLE_STYLES_OVERRIDES = { 70584 width: undefined, 70585 height: undefined, 70586 top: undefined, 70587 right: undefined, 70588 bottom: undefined, 70589 left: undefined 70590 }; 70591 const HANDLE_STYLES = { 70592 top: HANDLE_STYLES_OVERRIDES, 70593 right: HANDLE_STYLES_OVERRIDES, 70594 bottom: HANDLE_STYLES_OVERRIDES, 70595 left: HANDLE_STYLES_OVERRIDES, 70596 topLeft: HANDLE_STYLES_OVERRIDES, 70597 topRight: HANDLE_STYLES_OVERRIDES, 70598 bottomRight: HANDLE_STYLES_OVERRIDES, 70599 bottomLeft: HANDLE_STYLES_OVERRIDES 70600 }; 70601 70602 function ResizableBox(_ref, ref) { 70603 let { 70604 className, 70605 children, 70606 showHandle = true, 70607 __experimentalShowTooltip: showTooltip = false, 70608 __experimentalTooltipProps: tooltipProps = {}, 70609 ...props 70610 } = _ref; 70611 return (0,external_wp_element_namespaceObject.createElement)(Resizable, extends_extends({ 70612 className: classnames_default()('components-resizable-box__container', showHandle && 'has-show-handle', className), 70613 handleClasses: HANDLE_CLASSES, 70614 handleStyles: HANDLE_STYLES, 70615 ref: ref 70616 }, props), children, showTooltip && (0,external_wp_element_namespaceObject.createElement)(resize_tooltip, tooltipProps)); 70617 } 70618 70619 /* harmony default export */ var resizable_box = ((0,external_wp_element_namespaceObject.forwardRef)(ResizableBox)); 70620 70621 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/responsive-wrapper/index.js 70622 70623 70624 /** 70625 * External dependencies 70626 */ 70627 70628 /** 70629 * WordPress dependencies 70630 */ 70631 70632 70633 70634 70635 function ResponsiveWrapper(_ref) { 70636 let { 70637 naturalWidth, 70638 naturalHeight, 70639 children, 70640 isInline = false 70641 } = _ref; 70642 const [containerResizeListener, { 70643 width: containerWidth 70644 }] = (0,external_wp_compose_namespaceObject.useResizeObserver)(); 70645 70646 if (external_wp_element_namespaceObject.Children.count(children) !== 1) { 70647 return null; 70648 } 70649 70650 const imageStyle = { 70651 paddingBottom: naturalWidth < containerWidth ? naturalHeight : naturalHeight / naturalWidth * 100 + '%' 70652 }; 70653 const TagName = isInline ? 'span' : 'div'; 70654 return (0,external_wp_element_namespaceObject.createElement)(TagName, { 70655 className: "components-responsive-wrapper" 70656 }, containerResizeListener, (0,external_wp_element_namespaceObject.createElement)(TagName, { 70657 style: imageStyle 70658 }), (0,external_wp_element_namespaceObject.cloneElement)(children, { 70659 className: classnames_default()('components-responsive-wrapper__content', children.props.className) 70660 })); 70661 } 70662 70663 /* harmony default export */ var responsive_wrapper = (ResponsiveWrapper); 70664 70665 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/sandbox/index.js 70666 70667 70668 /** 70669 * WordPress dependencies 70670 */ 70671 70672 70673 const observeAndResizeJS = ` 70674 ( function() { 70675 var observer; 70676 70677 if ( ! window.MutationObserver || ! document.body || ! window.parent ) { 70678 return; 70679 } 70680 70681 function sendResize() { 70682 var clientBoundingRect = document.body.getBoundingClientRect(); 70683 70684 window.parent.postMessage( { 70685 action: 'resize', 70686 width: clientBoundingRect.width, 70687 height: clientBoundingRect.height, 70688 }, '*' ); 70689 } 70690 70691 observer = new MutationObserver( sendResize ); 70692 observer.observe( document.body, { 70693 attributes: true, 70694 attributeOldValue: false, 70695 characterData: true, 70696 characterDataOldValue: false, 70697 childList: true, 70698 subtree: true 70699 } ); 70700 70701 window.addEventListener( 'load', sendResize, true ); 70702 70703 // Hack: Remove viewport unit styles, as these are relative 70704 // the iframe root and interfere with our mechanism for 70705 // determining the unconstrained page bounds. 70706 function removeViewportStyles( ruleOrNode ) { 70707 if( ruleOrNode.style ) { 70708 [ 'width', 'height', 'minHeight', 'maxHeight' ].forEach( function( style ) { 70709 if ( /^\\d+(vmin|vmax|vh|vw)$/.test( ruleOrNode.style[ style ] ) ) { 70710 ruleOrNode.style[ style ] = ''; 70711 } 70712 } ); 70713 } 70714 } 70715 70716 Array.prototype.forEach.call( document.querySelectorAll( '[style]' ), removeViewportStyles ); 70717 Array.prototype.forEach.call( document.styleSheets, function( stylesheet ) { 70718 Array.prototype.forEach.call( stylesheet.cssRules || stylesheet.rules, removeViewportStyles ); 70719 } ); 70720 70721 document.body.style.position = 'absolute'; 70722 document.body.style.width = '100%'; 70723 document.body.setAttribute( 'data-resizable-iframe-connected', '' ); 70724 70725 sendResize(); 70726 70727 // Resize events can change the width of elements with 100% width, but we don't 70728 // get an DOM mutations for that, so do the resize when the window is resized, too. 70729 window.addEventListener( 'resize', sendResize, true ); 70730 } )();`; 70731 const style = ` 70732 body { 70733 margin: 0; 70734 } 70735 html, 70736 body, 70737 body > div, 70738 body > div iframe { 70739 width: 100%; 70740 } 70741 html.wp-has-aspect-ratio, 70742 body.wp-has-aspect-ratio, 70743 body.wp-has-aspect-ratio > div, 70744 body.wp-has-aspect-ratio > div iframe { 70745 height: 100%; 70746 overflow: hidden; /* If it has an aspect ratio, it shouldn't scroll. */ 70747 } 70748 body > div > * { 70749 margin-top: 0 !important; /* Has to have !important to override inline styles. */ 70750 margin-bottom: 0 !important; 70751 } 70752 `; 70753 function Sandbox(_ref) { 70754 let { 70755 html = '', 70756 title = '', 70757 type, 70758 styles = [], 70759 scripts = [], 70760 onFocus 70761 } = _ref; 70762 const ref = (0,external_wp_element_namespaceObject.useRef)(); 70763 const [width, setWidth] = (0,external_wp_element_namespaceObject.useState)(0); 70764 const [height, setHeight] = (0,external_wp_element_namespaceObject.useState)(0); 70765 70766 function isFrameAccessible() { 70767 try { 70768 return !!ref.current.contentDocument.body; 70769 } catch (e) { 70770 return false; 70771 } 70772 } 70773 70774 function trySandbox() { 70775 let forceRerender = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false; 70776 70777 if (!isFrameAccessible()) { 70778 return; 70779 } 70780 70781 const { 70782 contentDocument, 70783 ownerDocument 70784 } = ref.current; 70785 const { 70786 body 70787 } = contentDocument; 70788 70789 if (!forceRerender && null !== body.getAttribute('data-resizable-iframe-connected')) { 70790 return; 70791 } // Put the html snippet into a html document, and then write it to the iframe's document 70792 // we can use this in the future to inject custom styles or scripts. 70793 // Scripts go into the body rather than the head, to support embedded content such as Instagram 70794 // that expect the scripts to be part of the body. 70795 70796 70797 const htmlDoc = (0,external_wp_element_namespaceObject.createElement)("html", { 70798 lang: ownerDocument.documentElement.lang, 70799 className: type 70800 }, (0,external_wp_element_namespaceObject.createElement)("head", null, (0,external_wp_element_namespaceObject.createElement)("title", null, title), (0,external_wp_element_namespaceObject.createElement)("style", { 70801 dangerouslySetInnerHTML: { 70802 __html: style 70803 } 70804 }), styles.map((rules, i) => (0,external_wp_element_namespaceObject.createElement)("style", { 70805 key: i, 70806 dangerouslySetInnerHTML: { 70807 __html: rules 70808 } 70809 }))), (0,external_wp_element_namespaceObject.createElement)("body", { 70810 "data-resizable-iframe-connected": "data-resizable-iframe-connected", 70811 className: type 70812 }, (0,external_wp_element_namespaceObject.createElement)("div", { 70813 dangerouslySetInnerHTML: { 70814 __html: html 70815 } 70816 }), (0,external_wp_element_namespaceObject.createElement)("script", { 70817 type: "text/javascript", 70818 dangerouslySetInnerHTML: { 70819 __html: observeAndResizeJS 70820 } 70821 }), scripts.map(src => (0,external_wp_element_namespaceObject.createElement)("script", { 70822 key: src, 70823 src: src 70824 })))); // Writing the document like this makes it act in the same way as if it was 70825 // loaded over the network, so DOM creation and mutation, script execution, etc. 70826 // all work as expected. 70827 70828 contentDocument.open(); 70829 contentDocument.write('<!DOCTYPE html>' + (0,external_wp_element_namespaceObject.renderToString)(htmlDoc)); 70830 contentDocument.close(); 70831 } 70832 70833 (0,external_wp_element_namespaceObject.useEffect)(() => { 70834 trySandbox(); 70835 70836 function tryNoForceSandbox() { 70837 trySandbox(false); 70838 } 70839 70840 function checkMessageForResize(event) { 70841 const iframe = ref.current; // Verify that the mounted element is the source of the message. 70842 70843 if (!iframe || iframe.contentWindow !== event.source) { 70844 return; 70845 } // Attempt to parse the message data as JSON if passed as string. 70846 70847 70848 let data = event.data || {}; 70849 70850 if ('string' === typeof data) { 70851 try { 70852 data = JSON.parse(data); 70853 } catch (e) {} 70854 } // Update the state only if the message is formatted as we expect, 70855 // i.e. as an object with a 'resize' action. 70856 70857 70858 if ('resize' !== data.action) { 70859 return; 70860 } 70861 70862 setWidth(data.width); 70863 setHeight(data.height); 70864 } 70865 70866 const { 70867 ownerDocument 70868 } = ref.current; 70869 const { 70870 defaultView 70871 } = ownerDocument; // This used to be registered using <iframe onLoad={} />, but it made the iframe blank 70872 // after reordering the containing block. See these two issues for more details: 70873 // https://github.com/WordPress/gutenberg/issues/6146 70874 // https://github.com/facebook/react/issues/18752 70875 70876 ref.current.addEventListener('load', tryNoForceSandbox, false); 70877 defaultView.addEventListener('message', checkMessageForResize); 70878 return () => { 70879 var _ref$current; 70880 70881 (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.removeEventListener('load', tryNoForceSandbox, false); 70882 defaultView.addEventListener('message', checkMessageForResize); 70883 }; 70884 }, []); 70885 (0,external_wp_element_namespaceObject.useEffect)(() => { 70886 trySandbox(); 70887 }, [title, type, styles, scripts]); 70888 (0,external_wp_element_namespaceObject.useEffect)(() => { 70889 trySandbox(true); 70890 }, [html]); 70891 return (0,external_wp_element_namespaceObject.createElement)("iframe", { 70892 ref: (0,external_wp_compose_namespaceObject.useMergeRefs)([ref, (0,external_wp_compose_namespaceObject.useFocusableIframe)()]), 70893 title: title, 70894 className: "components-sandbox", 70895 sandbox: "allow-scripts allow-same-origin allow-presentation", 70896 onFocus: onFocus, 70897 width: Math.ceil(width), 70898 height: Math.ceil(height) 70899 }); 70900 } 70901 70902 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/snackbar/index.js 70903 70904 70905 /** 70906 * External dependencies 70907 */ 70908 70909 70910 /** 70911 * WordPress dependencies 70912 */ 70913 70914 70915 70916 70917 70918 /** 70919 * Internal dependencies 70920 */ 70921 70922 70923 const NOTICE_TIMEOUT = 10000; 70924 /** @typedef {import('@wordpress/element').WPElement} WPElement */ 70925 70926 /** 70927 * Custom hook which announces the message with the given politeness, if a 70928 * valid message is provided. 70929 * 70930 * @param {string|WPElement} [message] Message to announce. 70931 * @param {'polite'|'assertive'} politeness Politeness to announce. 70932 */ 70933 70934 function snackbar_useSpokenMessage(message, politeness) { 70935 const spokenMessage = typeof message === 'string' ? message : (0,external_wp_element_namespaceObject.renderToString)(message); 70936 (0,external_wp_element_namespaceObject.useEffect)(() => { 70937 if (spokenMessage) { 70938 (0,external_wp_a11y_namespaceObject.speak)(spokenMessage, politeness); 70939 } 70940 }, [spokenMessage, politeness]); 70941 } 70942 70943 function Snackbar(_ref, ref) { 70944 let { 70945 className, 70946 children, 70947 spokenMessage = children, 70948 politeness = 'polite', 70949 actions = [], 70950 onRemove = external_lodash_namespaceObject.noop, 70951 icon = null, 70952 explicitDismiss = false, 70953 // onDismiss is a callback executed when the snackbar is dismissed. 70954 // It is distinct from onRemove, which _looks_ like a callback but is 70955 // actually the function to call to remove the snackbar from the UI. 70956 onDismiss = external_lodash_namespaceObject.noop, 70957 listRef 70958 } = _ref; 70959 onDismiss = onDismiss || external_lodash_namespaceObject.noop; 70960 70961 function dismissMe(event) { 70962 if (event && event.preventDefault) { 70963 event.preventDefault(); 70964 } // Prevent focus loss by moving it to the list element. 70965 70966 70967 listRef.current.focus(); 70968 onDismiss(); 70969 onRemove(); 70970 } 70971 70972 function onActionClick(event, onClick) { 70973 event.stopPropagation(); 70974 onRemove(); 70975 70976 if (onClick) { 70977 onClick(event); 70978 } 70979 } 70980 70981 snackbar_useSpokenMessage(spokenMessage, politeness); // Only set up the timeout dismiss if we're not explicitly dismissing. 70982 70983 (0,external_wp_element_namespaceObject.useEffect)(() => { 70984 const timeoutHandle = setTimeout(() => { 70985 if (!explicitDismiss) { 70986 onDismiss(); 70987 onRemove(); 70988 } 70989 }, NOTICE_TIMEOUT); 70990 return () => clearTimeout(timeoutHandle); 70991 }, [onDismiss, onRemove]); 70992 const classes = classnames_default()(className, 'components-snackbar', { 70993 'components-snackbar-explicit-dismiss': !!explicitDismiss 70994 }); 70995 70996 if (actions && actions.length > 1) { 70997 // We need to inform developers that snackbar only accepts 1 action. 70998 typeof process !== "undefined" && process.env && "production" !== "production" ? 0 : void 0; // return first element only while keeping it inside an array 70999 71000 actions = [actions[0]]; 71001 } 71002 71003 const snackbarContentClassnames = classnames_default()('components-snackbar__content', { 71004 'components-snackbar__content-with-icon': !!icon 71005 }); 71006 return (0,external_wp_element_namespaceObject.createElement)("div", { 71007 ref: ref, 71008 className: classes, 71009 onClick: !explicitDismiss ? dismissMe : external_lodash_namespaceObject.noop, 71010 tabIndex: "0", 71011 role: !explicitDismiss ? 'button' : '', 71012 onKeyPress: !explicitDismiss ? dismissMe : external_lodash_namespaceObject.noop, 71013 "aria-label": !explicitDismiss ? (0,external_wp_i18n_namespaceObject.__)('Dismiss this notice') : '' 71014 }, (0,external_wp_element_namespaceObject.createElement)("div", { 71015 className: snackbarContentClassnames 71016 }, icon && (0,external_wp_element_namespaceObject.createElement)("div", { 71017 className: "components-snackbar__icon" 71018 }, icon), children, actions.map((_ref2, index) => { 71019 let { 71020 label, 71021 onClick, 71022 url 71023 } = _ref2; 71024 return (0,external_wp_element_namespaceObject.createElement)(build_module_button, { 71025 key: index, 71026 href: url, 71027 variant: "tertiary", 71028 onClick: event => onActionClick(event, onClick), 71029 className: "components-snackbar__action" 71030 }, label); 71031 }), explicitDismiss && (0,external_wp_element_namespaceObject.createElement)("span", { 71032 role: "button", 71033 "aria-label": "Dismiss this notice", 71034 tabIndex: "0", 71035 className: "components-snackbar__dismiss-button", 71036 onClick: dismissMe, 71037 onKeyPress: dismissMe 71038 }, "\u2715"))); 71039 } 71040 71041 /* harmony default export */ var snackbar = ((0,external_wp_element_namespaceObject.forwardRef)(Snackbar)); 71042 71043 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/snackbar/list.js 71044 71045 71046 71047 /** 71048 * External dependencies 71049 */ 71050 71051 71052 /** 71053 * WordPress dependencies 71054 */ 71055 71056 71057 71058 /** 71059 * Internal dependencies 71060 */ 71061 71062 71063 71064 const SNACKBAR_VARIANTS = { 71065 init: { 71066 height: 0, 71067 opacity: 0 71068 }, 71069 open: { 71070 height: 'auto', 71071 opacity: 1, 71072 transition: { 71073 height: { 71074 stiffness: 1000, 71075 velocity: -100 71076 } 71077 } 71078 }, 71079 exit: { 71080 opacity: 0, 71081 transition: { 71082 duration: 0.5 71083 } 71084 } 71085 }; 71086 const SNACKBAR_REDUCE_MOTION_VARIANTS = { 71087 init: false, 71088 open: false, 71089 exit: false 71090 }; 71091 /** 71092 * Renders a list of notices. 71093 * 71094 * @param {Object} $0 Props passed to the component. 71095 * @param {Array} $0.notices Array of notices to render. 71096 * @param {Function} $0.onRemove Function called when a notice should be removed / dismissed. 71097 * @param {Object} $0.className Name of the class used by the component. 71098 * @param {Object} $0.children Array of children to be rendered inside the notice list. 71099 * 71100 * @return {Object} The rendered notices list. 71101 */ 71102 71103 function SnackbarList(_ref) { 71104 let { 71105 notices, 71106 className, 71107 children, 71108 onRemove = external_lodash_namespaceObject.noop 71109 } = _ref; 71110 const listRef = (0,external_wp_element_namespaceObject.useRef)(); 71111 const isReducedMotion = (0,external_wp_compose_namespaceObject.useReducedMotion)(); 71112 className = classnames_default()('components-snackbar-list', className); 71113 71114 const removeNotice = notice => () => onRemove(notice.id); 71115 71116 return (0,external_wp_element_namespaceObject.createElement)("div", { 71117 className: className, 71118 tabIndex: -1, 71119 ref: listRef 71120 }, children, (0,external_wp_element_namespaceObject.createElement)(AnimatePresence, null, notices.map(notice => { 71121 return (0,external_wp_element_namespaceObject.createElement)(motion.div, { 71122 layout: !isReducedMotion // See https://www.framer.com/docs/animation/#layout-animations 71123 , 71124 initial: 'init', 71125 animate: 'open', 71126 exit: 'exit', 71127 key: notice.id, 71128 variants: isReducedMotion ? SNACKBAR_REDUCE_MOTION_VARIANTS : SNACKBAR_VARIANTS 71129 }, (0,external_wp_element_namespaceObject.createElement)("div", { 71130 className: "components-snackbar-list__notice-container" 71131 }, (0,external_wp_element_namespaceObject.createElement)(snackbar, extends_extends({}, (0,external_lodash_namespaceObject.omit)(notice, ['content']), { 71132 onRemove: removeNotice(notice), 71133 listRef: listRef 71134 }), notice.content))); 71135 }))); 71136 } 71137 71138 /* harmony default export */ var snackbar_list = (SnackbarList); 71139 71140 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/spinner/styles.js 71141 71142 71143 function spinner_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } 71144 71145 /** 71146 * External dependencies 71147 */ 71148 71149 /** 71150 * Internal dependencies 71151 */ 71152 71153 71154 const spinAnimation = emotion_react_browser_esm_keyframes` 71155 from { 71156 transform: rotate(0deg); 71157 } 71158 to { 71159 transform: rotate(360deg); 71160 } 71161 `; 71162 const StyledSpinner = emotion_styled_base_browser_esm("svg", true ? { 71163 target: "e1bj2jdf2" 71164 } : 0)("width:", config_values.spinnerSize, "px;height:", config_values.spinnerSize, "px;display:inline-block;margin:5px 11px 0;position:relative;color:var( --wp-admin-theme-color );overflow:visible;" + ( true ? "" : 0)); 71165 const commonPathProps = true ? { 71166 name: "9s4963", 71167 styles: "fill:transparent;stroke-width:1.5px" 71168 } : 0; 71169 const SpinnerTrack = emotion_styled_base_browser_esm("circle", true ? { 71170 target: "e1bj2jdf1" 71171 } : 0)(commonPathProps, ";stroke:", COLORS.gray[300], ";" + ( true ? "" : 0)); 71172 const SpinnerIndicator = emotion_styled_base_browser_esm("path", true ? { 71173 target: "e1bj2jdf0" 71174 } : 0)(commonPathProps, ";stroke:currentColor;stroke-linecap:round;transform-origin:50% 50%;animation:1.4s linear infinite both ", spinAnimation, ";" + ( true ? "" : 0)); 71175 71176 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/spinner/index.js 71177 71178 71179 71180 /** 71181 * External dependencies 71182 */ 71183 71184 /** 71185 * Internal dependencies 71186 */ 71187 71188 71189 /** 71190 * @typedef OwnProps 71191 * 71192 * @property {string} [className] Class name 71193 */ 71194 71195 /** @typedef {import('react').ComponentPropsWithoutRef<'svg'> & OwnProps} Props */ 71196 71197 /** 71198 * @param {Props} props 71199 * @return {JSX.Element} Element 71200 */ 71201 71202 function Spinner(_ref) { 71203 let { 71204 className, 71205 ...props 71206 } = _ref; 71207 return (0,external_wp_element_namespaceObject.createElement)(StyledSpinner, extends_extends({ 71208 className: classnames_default()('components-spinner', className), 71209 viewBox: "0 0 100 100", 71210 xmlns: "http://www.w3.org/2000/svg", 71211 role: "presentation", 71212 focusable: "false" 71213 }, props), (0,external_wp_element_namespaceObject.createElement)(SpinnerTrack, { 71214 cx: "50", 71215 cy: "50", 71216 r: "50", 71217 vectorEffect: "non-scaling-stroke" 71218 }), (0,external_wp_element_namespaceObject.createElement)(SpinnerIndicator, { 71219 d: "m 50 0 a 50 50 0 0 1 50 50", 71220 vectorEffect: "non-scaling-stroke" 71221 })); 71222 } 71223 71224 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/surface/component.js 71225 71226 71227 71228 /** 71229 * Internal dependencies 71230 */ 71231 71232 71233 71234 /** 71235 * @param {import('../ui/context').WordPressComponentProps<import('./types').Props, 'div'>} props 71236 * @param {import('react').ForwardedRef<any>} forwardedRef 71237 */ 71238 71239 function component_Surface(props, forwardedRef) { 71240 const surfaceProps = useSurface(props); 71241 return (0,external_wp_element_namespaceObject.createElement)(component, extends_extends({}, surfaceProps, { 71242 ref: forwardedRef 71243 })); 71244 } 71245 /** 71246 * `Surface` is a core component that renders a primary background color. 71247 * 71248 * In the example below, notice how the `Surface` renders in white (or dark gray if in dark mode). 71249 * 71250 * ```jsx 71251 * import { 71252 * __experimentalSurface as Surface, 71253 * __experimentalText as Text, 71254 * } from '@wordpress/components'; 71255 * 71256 * function Example() { 71257 * return ( 71258 * <Surface> 71259 * <Text>Code is Poetry</Text> 71260 * </Surface> 71261 * ); 71262 * } 71263 * ``` 71264 */ 71265 71266 71267 const ConnectedSurface = contextConnect(component_Surface, 'Surface'); 71268 /* harmony default export */ var surface_component = (ConnectedSurface); 71269 71270 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/tab-panel/index.js 71271 71272 71273 71274 /** 71275 * External dependencies 71276 */ 71277 71278 71279 /** 71280 * WordPress dependencies 71281 */ 71282 71283 71284 71285 /** 71286 * Internal dependencies 71287 */ 71288 71289 71290 71291 71292 const TabButton = _ref => { 71293 let { 71294 tabId, 71295 onClick, 71296 children, 71297 selected, 71298 ...rest 71299 } = _ref; 71300 return (0,external_wp_element_namespaceObject.createElement)(build_module_button, extends_extends({ 71301 role: "tab", 71302 tabIndex: selected ? null : -1, 71303 "aria-selected": selected, 71304 id: tabId, 71305 onClick: onClick 71306 }, rest), children); 71307 }; 71308 71309 function TabPanel(_ref2) { 71310 var _selectedTab$name; 71311 71312 let { 71313 className, 71314 children, 71315 tabs, 71316 initialTabName, 71317 orientation = 'horizontal', 71318 activeClass = 'is-active', 71319 onSelect = external_lodash_namespaceObject.noop 71320 } = _ref2; 71321 const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(TabPanel, 'tab-panel'); 71322 const [selected, setSelected] = (0,external_wp_element_namespaceObject.useState)(null); 71323 71324 const handleClick = tabKey => { 71325 setSelected(tabKey); 71326 onSelect(tabKey); 71327 }; 71328 71329 const onNavigate = (childIndex, child) => { 71330 child.click(); 71331 }; 71332 71333 const selectedTab = (0,external_lodash_namespaceObject.find)(tabs, { 71334 name: selected 71335 }); 71336 const selectedId = `$instanceId}-${(_selectedTab$name = selectedTab === null || selectedTab === void 0 ? void 0 : selectedTab.name) !== null && _selectedTab$name !== void 0 ? _selectedTab$name : 'none'}`; 71337 (0,external_wp_element_namespaceObject.useEffect)(() => { 71338 const newSelectedTab = (0,external_lodash_namespaceObject.find)(tabs, { 71339 name: selected 71340 }); 71341 71342 if (!newSelectedTab) { 71343 setSelected(initialTabName || (tabs.length > 0 ? tabs[0].name : null)); 71344 } 71345 }, [tabs]); 71346 return (0,external_wp_element_namespaceObject.createElement)("div", { 71347 className: className 71348 }, (0,external_wp_element_namespaceObject.createElement)(navigable_container_menu, { 71349 role: "tablist", 71350 orientation: orientation, 71351 onNavigate: onNavigate, 71352 className: "components-tab-panel__tabs" 71353 }, tabs.map(tab => (0,external_wp_element_namespaceObject.createElement)(TabButton, { 71354 className: classnames_default()('components-tab-panel__tabs-item', tab.className, { 71355 [activeClass]: tab.name === selected 71356 }), 71357 tabId: `$instanceId}-$tab.name}`, 71358 "aria-controls": `$instanceId}-$tab.name}-view`, 71359 selected: tab.name === selected, 71360 key: tab.name, 71361 onClick: (0,external_lodash_namespaceObject.partial)(handleClick, tab.name) 71362 }, tab.title))), selectedTab && (0,external_wp_element_namespaceObject.createElement)("div", { 71363 key: selectedId, 71364 "aria-labelledby": selectedId, 71365 role: "tabpanel", 71366 id: `$selectedId}-view`, 71367 className: "components-tab-panel__tab-content" 71368 }, children(selectedTab))); 71369 } 71370 71371 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/text-control/index.js 71372 71373 71374 71375 /** 71376 * WordPress dependencies 71377 */ 71378 71379 71380 /** 71381 * Internal dependencies 71382 */ 71383 71384 71385 /** 71386 * @typedef OwnProps 71387 * @property {string} label Label for the control. 71388 * @property {boolean} [hideLabelFromVision] Whether to accessibly hide the label. 71389 * @property {string} value Value of the input. 71390 * @property {string} [help] Optional help text for the control. 71391 * @property {string} [className] Classname passed to BaseControl wrapper 71392 * @property {(value: string) => void} onChange Handle changes. 71393 * @property {string} [type='text'] Type of the input. 71394 */ 71395 71396 /** @typedef {OwnProps & import('react').ComponentProps<'input'>} Props */ 71397 71398 /** 71399 * 71400 * @param {Props} props Props 71401 * @param {import('react').ForwardedRef<HTMLInputElement>} ref 71402 */ 71403 71404 function TextControl(_ref, ref) { 71405 let { 71406 label, 71407 hideLabelFromVision, 71408 value, 71409 help, 71410 className, 71411 onChange, 71412 type = 'text', 71413 ...props 71414 } = _ref; 71415 const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(TextControl); 71416 const id = `inspector-text-control-$instanceId}`; 71417 71418 const onChangeValue = ( 71419 /** @type {import('react').ChangeEvent<HTMLInputElement>} */ 71420 event) => onChange(event.target.value); 71421 71422 return (0,external_wp_element_namespaceObject.createElement)(base_control, { 71423 label: label, 71424 hideLabelFromVision: hideLabelFromVision, 71425 id: id, 71426 help: help, 71427 className: className 71428 }, (0,external_wp_element_namespaceObject.createElement)("input", extends_extends({ 71429 className: "components-text-control__input", 71430 type: type, 71431 id: id, 71432 value: value, 71433 onChange: onChangeValue, 71434 "aria-describedby": !!help ? id + '__help' : undefined, 71435 ref: ref 71436 }, props))); 71437 } 71438 71439 /* harmony default export */ var text_control = ((0,external_wp_element_namespaceObject.forwardRef)(TextControl)); 71440 71441 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/utils/input/base.js 71442 /** 71443 * External dependencies 71444 */ 71445 71446 /** 71447 * Internal dependencies 71448 */ 71449 71450 71451 71452 71453 const inputStyleNeutral = /*#__PURE__*/emotion_react_browser_esm_css("box-shadow:0 0 0 transparent;transition:box-shadow 0.1s linear;border-radius:", config_values.radiusBlockUi, ";border:", config_values.borderWidth, " solid ", COLORS.ui.border, ";" + ( true ? "" : 0), true ? "" : 0); 71454 const inputStyleFocus = /*#__PURE__*/emotion_react_browser_esm_css("border-color:var( --wp-admin-theme-color );box-shadow:0 0 0 calc( ", config_values.borderWidthFocus, " - ", config_values.borderWidth, " ) var( --wp-admin-theme-color );outline:2px solid transparent;" + ( true ? "" : 0), true ? "" : 0); 71455 71456 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/utils/breakpoint-values.js 71457 /* harmony default export */ var breakpoint_values = ({ 71458 huge: '1440px', 71459 wide: '1280px', 71460 'x-large': '1080px', 71461 large: '960px', 71462 // admin sidebar auto folds 71463 medium: '782px', 71464 // Adminbar goes big. 71465 small: '600px', 71466 mobile: '480px', 71467 'zoomed-in': '280px' 71468 }); 71469 71470 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/utils/breakpoint.js 71471 /** 71472 * Internal dependencies 71473 */ 71474 71475 /** 71476 * @param {keyof breakpoints} point 71477 * @return {string} Media query declaration. 71478 */ 71479 71480 const breakpoint = point => `@media (min-width: $breakpoint_values[point]})`; 71481 71482 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/utils/input/input-control.js 71483 /** 71484 * External dependencies 71485 */ 71486 71487 /** 71488 * Internal dependencies 71489 */ 71490 71491 71492 71493 71494 71495 const inputControl = /*#__PURE__*/emotion_react_browser_esm_css("font-family:", font('default.fontFamily'), ";padding:6px 8px;", inputStyleNeutral, ";font-size:", font('mobileTextMinFontSize'), ";line-height:normal;", breakpoint('small'), "{font-size:", font('default.fontSize'), ";line-height:normal;}&:focus{", inputStyleFocus, ";}&::-webkit-input-placeholder{color:", COLORS.darkGray.placeholder, ";}&::-moz-placeholder{opacity:1;color:", COLORS.darkGray.placeholder, ";}&:-ms-input-placeholder{color:", COLORS.darkGray.placeholder, ";}.is-dark-theme &{&::-webkit-input-placeholder{color:", COLORS.lightGray.placeholder, ";}&::-moz-placeholder{opacity:1;color:", COLORS.lightGray.placeholder, ";}&:-ms-input-placeholder{color:", COLORS.lightGray.placeholder, ";}}" + ( true ? "" : 0), true ? "" : 0); 71496 71497 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/textarea-control/styles/textarea-control-styles.js 71498 71499 71500 /** 71501 * External dependencies 71502 */ 71503 71504 /** 71505 * Internal dependencies 71506 */ 71507 71508 const StyledTextarea = emotion_styled_base_browser_esm("textarea", true ? { 71509 target: "ebk7yr50" 71510 } : 0)("width:100%;", inputControl, ";" + ( true ? "" : 0)); 71511 71512 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/textarea-control/index.js 71513 71514 71515 71516 /** 71517 * WordPress dependencies 71518 */ 71519 71520 /** 71521 * Internal dependencies 71522 */ 71523 71524 71525 71526 function TextareaControl(_ref) { 71527 let { 71528 label, 71529 hideLabelFromVision, 71530 value, 71531 help, 71532 onChange, 71533 rows = 4, 71534 className, 71535 ...props 71536 } = _ref; 71537 const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(TextareaControl); 71538 const id = `inspector-textarea-control-$instanceId}`; 71539 71540 const onChangeValue = event => onChange(event.target.value); 71541 71542 return (0,external_wp_element_namespaceObject.createElement)(base_control, { 71543 label: label, 71544 hideLabelFromVision: hideLabelFromVision, 71545 id: id, 71546 help: help, 71547 className: className 71548 }, (0,external_wp_element_namespaceObject.createElement)(StyledTextarea, extends_extends({ 71549 className: "components-textarea-control__input", 71550 id: id, 71551 rows: rows, 71552 onChange: onChangeValue, 71553 "aria-describedby": !!help ? id + '__help' : undefined, 71554 value: value 71555 }, props))); 71556 } 71557 71558 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/text-highlight/index.js 71559 71560 71561 /** 71562 * External dependencies 71563 */ 71564 71565 /** 71566 * WordPress dependencies 71567 */ 71568 71569 71570 71571 const TextHighlight = _ref => { 71572 let { 71573 text = '', 71574 highlight = '' 71575 } = _ref; 71576 const trimmedHighlightText = highlight.trim(); 71577 71578 if (!trimmedHighlightText) { 71579 return text; 71580 } 71581 71582 const regex = new RegExp(`(${(0,external_lodash_namespaceObject.escapeRegExp)(trimmedHighlightText)})`, 'gi'); 71583 return (0,external_wp_element_namespaceObject.createInterpolateElement)(text.replace(regex, '<mark>$&</mark>'), { 71584 mark: (0,external_wp_element_namespaceObject.createElement)("mark", null) 71585 }); 71586 }; 71587 71588 /* harmony default export */ var text_highlight = (TextHighlight); 71589 71590 ;// CONCATENATED MODULE: ./node_modules/@wordpress/icons/build-module/library/tip.js 71591 71592 71593 /** 71594 * WordPress dependencies 71595 */ 71596 71597 const tip = (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.SVG, { 71598 xmlns: "http://www.w3.org/2000/svg", 71599 viewBox: "0 0 24 24" 71600 }, (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.Path, { 71601 d: "M12 15.8c-3.7 0-6.8-3-6.8-6.8s3-6.8 6.8-6.8c3.7 0 6.8 3 6.8 6.8s-3.1 6.8-6.8 6.8zm0-12C9.1 3.8 6.8 6.1 6.8 9s2.4 5.2 5.2 5.2c2.9 0 5.2-2.4 5.2-5.2S14.9 3.8 12 3.8zM8 17.5h8V19H8zM10 20.5h4V22h-4z" 71602 })); 71603 /* harmony default export */ var library_tip = (tip); 71604 71605 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/tip/index.js 71606 71607 71608 /** 71609 * WordPress dependencies 71610 */ 71611 71612 /** 71613 * @typedef Props 71614 * @property {import('react').ReactNode} children Children to render in the tip. 71615 */ 71616 71617 /** 71618 * @param {Props} props 71619 * @return {JSX.Element} Element 71620 */ 71621 71622 function Tip(props) { 71623 return (0,external_wp_element_namespaceObject.createElement)("div", { 71624 className: "components-tip" 71625 }, (0,external_wp_element_namespaceObject.createElement)(icons_build_module_icon, { 71626 icon: library_tip 71627 }), (0,external_wp_element_namespaceObject.createElement)("p", null, props.children)); 71628 } 71629 71630 /* harmony default export */ var build_module_tip = (Tip); 71631 71632 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/toggle-control/index.js 71633 71634 71635 /** 71636 * External dependencies 71637 */ 71638 71639 71640 /** 71641 * WordPress dependencies 71642 */ 71643 71644 71645 /** 71646 * Internal dependencies 71647 */ 71648 71649 71650 71651 function ToggleControl(_ref) { 71652 let { 71653 label, 71654 checked, 71655 help, 71656 className, 71657 onChange, 71658 disabled 71659 } = _ref; 71660 71661 function onChangeToggle(event) { 71662 onChange(event.target.checked); 71663 } 71664 71665 const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(ToggleControl); 71666 const id = `inspector-toggle-control-$instanceId}`; 71667 let describedBy, helpLabel; 71668 71669 if (help) { 71670 describedBy = id + '__help'; 71671 helpLabel = (0,external_lodash_namespaceObject.isFunction)(help) ? help(checked) : help; 71672 } 71673 71674 return (0,external_wp_element_namespaceObject.createElement)(base_control, { 71675 id: id, 71676 help: helpLabel, 71677 className: classnames_default()('components-toggle-control', className) 71678 }, (0,external_wp_element_namespaceObject.createElement)(form_toggle, { 71679 id: id, 71680 checked: checked, 71681 onChange: onChangeToggle, 71682 "aria-describedby": describedBy, 71683 disabled: disabled 71684 }), (0,external_wp_element_namespaceObject.createElement)("label", { 71685 htmlFor: id, 71686 className: "components-toggle-control__label" 71687 }, label)); 71688 } 71689 71690 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/toggle-group-control/toggle-group-control-option-icon/component.js 71691 71692 71693 /** 71694 * WordPress dependencies 71695 */ 71696 71697 /** 71698 * Internal dependencies 71699 */ 71700 71701 71702 function ToggleGroupControlOptionIcon(props) { 71703 const { 71704 icon, 71705 ...restProps 71706 } = props; 71707 return (0,external_wp_element_namespaceObject.createElement)(toggle_group_control_option_base_component, restProps, (0,external_wp_element_namespaceObject.createElement)(icons_build_module_icon, { 71708 icon: icon 71709 })); 71710 } 71711 /** 71712 * `ToggleGroupControlOptionIcon` is a form component which is meant to be used as a 71713 * child of `ToggleGroupControl` and displays an icon. 71714 * 71715 * @example 71716 * ```jsx 71717 * 71718 * import { 71719 * __experimentalToggleGroupControl as ToggleGroupControl, 71720 * __experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon, 71721 * from '@wordpress/components'; 71722 * import { formatLowercase, formatUppercase } from '@wordpress/icons'; 71723 * 71724 * function Example() { 71725 * return ( 71726 * <ToggleGroupControl label="my label" value="vertical" isBlock> 71727 * <ToggleGroupControlOptionIcon 71728 * value="uppercase" 71729 * icon={ formatUppercase } 71730 * /> 71731 * <ToggleGroupControlOptionIcon 71732 * value="lowercase" 71733 * icon={ formatLowercase } 71734 * /> 71735 * </ToggleGroupControl> 71736 * ); 71737 * } 71738 ** ``` 71739 */ 71740 71741 ;// CONCATENATED MODULE: ./node_modules/reakit/es/__keys-ae468c11.js 71742 // Automatically generated 71743 var TOOLBAR_STATE_KEYS = ["baseId", "unstable_idCountRef", "unstable_virtual", "rtl", "orientation", "items", "groups", "currentId", "loop", "wrap", "shift", "unstable_moves", "unstable_hasActiveWidget", "unstable_includesBaseElement", "setBaseId", "registerItem", "unregisterItem", "registerGroup", "unregisterGroup", "move", "next", "previous", "up", "down", "first", "last", "sort", "unstable_setVirtual", "setRTL", "setOrientation", "setCurrentId", "setLoop", "setWrap", "setShift", "reset", "unstable_setIncludesBaseElement", "unstable_setHasActiveWidget"]; 71744 var TOOLBAR_KEYS = TOOLBAR_STATE_KEYS; 71745 var TOOLBAR_ITEM_KEYS = TOOLBAR_KEYS; 71746 var TOOLBAR_SEPARATOR_KEYS = (/* unused pure expression or super */ null && (TOOLBAR_ITEM_KEYS)); 71747 71748 71749 71750 ;// CONCATENATED MODULE: ./node_modules/reakit/es/Toolbar/ToolbarItem.js 71751 71752 71753 71754 71755 71756 71757 71758 71759 71760 71761 71762 71763 71764 71765 71766 71767 71768 71769 71770 71771 71772 71773 71774 71775 71776 71777 71778 71779 71780 71781 71782 var useToolbarItem = createHook({ 71783 name: "ToolbarItem", 71784 compose: useCompositeItem, 71785 keys: TOOLBAR_ITEM_KEYS 71786 }); 71787 var ToolbarItem = createComponent({ 71788 as: "button", 71789 memo: true, 71790 useHook: useToolbarItem 71791 }); 71792 71793 71794 71795 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/toolbar-context/index.js 71796 /** 71797 * WordPress dependencies 71798 */ 71799 71800 const ToolbarContext = (0,external_wp_element_namespaceObject.createContext)(); 71801 /* harmony default export */ var toolbar_context = (ToolbarContext); 71802 71803 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/toolbar-item/index.js 71804 71805 71806 71807 /** 71808 * External dependencies 71809 */ 71810 71811 /** 71812 * WordPress dependencies 71813 */ 71814 71815 71816 71817 /** 71818 * Internal dependencies 71819 */ 71820 71821 71822 71823 function toolbar_item_ToolbarItem(_ref, ref) { 71824 let { 71825 children, 71826 as: Component, 71827 ...props 71828 } = _ref; 71829 const accessibleToolbarState = (0,external_wp_element_namespaceObject.useContext)(toolbar_context); 71830 71831 if (typeof children !== 'function' && !Component) { 71832 typeof process !== "undefined" && process.env && "production" !== "production" ? 0 : void 0; 71833 return null; 71834 } 71835 71836 const allProps = { ...props, 71837 ref, 71838 'data-toolbar-item': true 71839 }; 71840 71841 if (!accessibleToolbarState) { 71842 if (Component) { 71843 return (0,external_wp_element_namespaceObject.createElement)(Component, allProps, children); 71844 } 71845 71846 return children(allProps); 71847 } 71848 71849 return (0,external_wp_element_namespaceObject.createElement)(ToolbarItem, extends_extends({}, accessibleToolbarState, allProps, { 71850 as: Component 71851 }), children); 71852 } 71853 71854 /* harmony default export */ var toolbar_item = ((0,external_wp_element_namespaceObject.forwardRef)(toolbar_item_ToolbarItem)); 71855 71856 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/toolbar-button/toolbar-button-container.js 71857 71858 71859 const ToolbarButtonContainer = props => (0,external_wp_element_namespaceObject.createElement)("div", { 71860 className: props.className 71861 }, props.children); 71862 71863 /* harmony default export */ var toolbar_button_container = (ToolbarButtonContainer); 71864 71865 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/toolbar-button/index.js 71866 71867 71868 71869 /** 71870 * External dependencies 71871 */ 71872 71873 /** 71874 * WordPress dependencies 71875 */ 71876 71877 71878 /** 71879 * Internal dependencies 71880 */ 71881 71882 71883 71884 71885 71886 71887 function ToolbarButton(_ref, ref) { 71888 let { 71889 containerClassName, 71890 className, 71891 extraProps, 71892 children, 71893 title, 71894 isActive, 71895 isDisabled, 71896 ...props 71897 } = _ref; 71898 const accessibleToolbarState = (0,external_wp_element_namespaceObject.useContext)(toolbar_context); 71899 71900 if (!accessibleToolbarState) { 71901 return (0,external_wp_element_namespaceObject.createElement)(toolbar_button_container, { 71902 className: containerClassName 71903 }, (0,external_wp_element_namespaceObject.createElement)(build_module_button, extends_extends({ 71904 ref: ref, 71905 icon: props.icon, 71906 label: title, 71907 shortcut: props.shortcut, 71908 "data-subscript": props.subscript, 71909 onClick: event => { 71910 event.stopPropagation(); 71911 71912 if (props.onClick) { 71913 props.onClick(event); 71914 } 71915 }, 71916 className: classnames_default()('components-toolbar__control', className), 71917 isPressed: isActive, 71918 disabled: isDisabled, 71919 "data-toolbar-item": true 71920 }, extraProps, props), children)); 71921 } // ToobarItem will pass all props to the render prop child, which will pass 71922 // all props to Button. This means that ToolbarButton has the same API as 71923 // Button. 71924 71925 71926 return (0,external_wp_element_namespaceObject.createElement)(toolbar_item, extends_extends({ 71927 className: classnames_default()('components-toolbar-button', className) 71928 }, extraProps, props, { 71929 ref: ref 71930 }), toolbarItemProps => (0,external_wp_element_namespaceObject.createElement)(build_module_button, extends_extends({ 71931 label: title, 71932 isPressed: isActive, 71933 disabled: isDisabled 71934 }, toolbarItemProps), children)); 71935 } 71936 71937 /* harmony default export */ var toolbar_button = ((0,external_wp_element_namespaceObject.forwardRef)(ToolbarButton)); 71938 71939 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/toolbar-group/toolbar-group-container.js 71940 71941 71942 71943 const ToolbarGroupContainer = _ref => { 71944 let { 71945 className, 71946 children, 71947 ...props 71948 } = _ref; 71949 return (0,external_wp_element_namespaceObject.createElement)("div", extends_extends({ 71950 className: className 71951 }, props), children); 71952 }; 71953 71954 /* harmony default export */ var toolbar_group_container = (ToolbarGroupContainer); 71955 71956 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/toolbar-group/toolbar-group-collapsed.js 71957 71958 71959 71960 /** 71961 * WordPress dependencies 71962 */ 71963 71964 /** 71965 * Internal dependencies 71966 */ 71967 71968 71969 71970 71971 71972 function ToolbarGroupCollapsed(_ref) { 71973 let { 71974 controls = [], 71975 toggleProps, 71976 ...props 71977 } = _ref; 71978 // It'll contain state if `ToolbarGroup` is being used within 71979 // `<Toolbar label="label" />` 71980 const accessibleToolbarState = (0,external_wp_element_namespaceObject.useContext)(toolbar_context); 71981 71982 const renderDropdownMenu = internalToggleProps => (0,external_wp_element_namespaceObject.createElement)(dropdown_menu, extends_extends({ 71983 controls: controls, 71984 toggleProps: { ...internalToggleProps, 71985 'data-toolbar-item': true 71986 } 71987 }, props)); 71988 71989 if (accessibleToolbarState) { 71990 return (0,external_wp_element_namespaceObject.createElement)(toolbar_item, toggleProps, renderDropdownMenu); 71991 } 71992 71993 return renderDropdownMenu(toggleProps); 71994 } 71995 71996 /* harmony default export */ var toolbar_group_collapsed = (ToolbarGroupCollapsed); 71997 71998 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/toolbar-group/index.js 71999 72000 72001 72002 /** 72003 * External dependencies 72004 */ 72005 72006 72007 /** 72008 * WordPress dependencies 72009 */ 72010 72011 72012 /** 72013 * Internal dependencies 72014 */ 72015 72016 72017 72018 72019 72020 /** 72021 * Renders a collapsible group of controls 72022 * 72023 * The `controls` prop accepts an array of sets. A set is an array of controls. 72024 * Controls have the following shape: 72025 * 72026 * ``` 72027 * { 72028 * icon: string, 72029 * title: string, 72030 * subscript: string, 72031 * onClick: Function, 72032 * isActive: boolean, 72033 * isDisabled: boolean 72034 * } 72035 * ``` 72036 * 72037 * For convenience it is also possible to pass only an array of controls. It is 72038 * then assumed this is the only set. 72039 * 72040 * Either `controls` or `children` is required, otherwise this components 72041 * renders nothing. 72042 * 72043 * @param {Object} props Component props. 72044 * @param {Array} [props.controls] The controls to render in this toolbar. 72045 * @param {WPElement} [props.children] Any other things to render inside the toolbar besides the controls. 72046 * @param {string} [props.className] Class to set on the container div. 72047 * @param {boolean} [props.isCollapsed] Turns ToolbarGroup into a dropdown menu. 72048 * @param {string} [props.title] ARIA label for dropdown menu if is collapsed. 72049 */ 72050 72051 function ToolbarGroup(_ref) { 72052 let { 72053 controls = [], 72054 children, 72055 className, 72056 isCollapsed, 72057 title, 72058 ...props 72059 } = _ref; 72060 // It'll contain state if `ToolbarGroup` is being used within 72061 // `<Toolbar label="label" />` 72062 const accessibleToolbarState = (0,external_wp_element_namespaceObject.useContext)(toolbar_context); 72063 72064 if ((!controls || !controls.length) && !children) { 72065 return null; 72066 } 72067 72068 const finalClassName = classnames_default()( // Unfortunately, there's legacy code referencing to `.components-toolbar` 72069 // So we can't get rid of it 72070 accessibleToolbarState ? 'components-toolbar-group' : 'components-toolbar', className); // Normalize controls to nested array of objects (sets of controls) 72071 72072 let controlSets = controls; 72073 72074 if (!Array.isArray(controlSets[0])) { 72075 controlSets = [controlSets]; 72076 } 72077 72078 if (isCollapsed) { 72079 return (0,external_wp_element_namespaceObject.createElement)(toolbar_group_collapsed, extends_extends({ 72080 label: title, 72081 controls: controlSets, 72082 className: finalClassName, 72083 children: children 72084 }, props)); 72085 } 72086 72087 return (0,external_wp_element_namespaceObject.createElement)(toolbar_group_container, extends_extends({ 72088 className: finalClassName 72089 }, props), (0,external_lodash_namespaceObject.flatMap)(controlSets, (controlSet, indexOfSet) => controlSet.map((control, indexOfControl) => (0,external_wp_element_namespaceObject.createElement)(toolbar_button, extends_extends({ 72090 key: [indexOfSet, indexOfControl].join(), 72091 containerClassName: indexOfSet > 0 && indexOfControl === 0 ? 'has-left-divider' : null 72092 }, control)))), children); 72093 } 72094 72095 /* harmony default export */ var toolbar_group = (ToolbarGroup); 72096 72097 ;// CONCATENATED MODULE: ./node_modules/reakit/es/Toolbar/ToolbarState.js 72098 72099 72100 72101 72102 72103 72104 72105 72106 72107 72108 72109 72110 72111 function useToolbarState(initialState) { 72112 if (initialState === void 0) { 72113 initialState = {}; 72114 } 72115 72116 var _useSealedState = useSealedState(initialState), 72117 _useSealedState$orien = _useSealedState.orientation, 72118 orientation = _useSealedState$orien === void 0 ? "horizontal" : _useSealedState$orien, 72119 sealed = _rollupPluginBabelHelpers_1f0bf8c2_objectWithoutPropertiesLoose(_useSealedState, ["orientation"]); 72120 72121 return useCompositeState(_objectSpread2({ 72122 orientation: orientation 72123 }, sealed)); 72124 } 72125 72126 72127 72128 ;// CONCATENATED MODULE: ./node_modules/reakit/es/Toolbar/Toolbar.js 72129 72130 72131 72132 72133 72134 72135 72136 72137 72138 72139 72140 72141 72142 72143 72144 72145 72146 72147 72148 72149 72150 72151 72152 72153 72154 72155 72156 72157 72158 72159 72160 var useToolbar = createHook({ 72161 name: "Toolbar", 72162 compose: useComposite, 72163 keys: TOOLBAR_KEYS, 72164 useProps: function useProps(options, htmlProps) { 72165 return _objectSpread2({ 72166 role: "toolbar", 72167 "aria-orientation": options.orientation 72168 }, htmlProps); 72169 } 72170 }); 72171 var Toolbar = createComponent({ 72172 as: "div", 72173 useHook: useToolbar, 72174 useCreateElement: function useCreateElement$1(type, props, children) { 72175 false ? 0 : void 0; 72176 return useCreateElement(type, props, children); 72177 } 72178 }); 72179 72180 72181 72182 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/toolbar/toolbar-container.js 72183 72184 72185 72186 /** 72187 * External dependencies 72188 */ 72189 72190 /** 72191 * WordPress dependencies 72192 */ 72193 72194 72195 72196 /** 72197 * Internal dependencies 72198 */ 72199 72200 72201 72202 function ToolbarContainer(_ref, ref) { 72203 let { 72204 label, 72205 ...props 72206 } = _ref; 72207 // https://reakit.io/docs/basic-concepts/#state-hooks 72208 // Passing baseId for server side rendering (which includes snapshots) 72209 // If an id prop is passed to Toolbar, toolbar items will use it as a base for their ids 72210 const toolbarState = useToolbarState({ 72211 loop: true, 72212 baseId: props.id, 72213 rtl: (0,external_wp_i18n_namespaceObject.isRTL)() 72214 }); 72215 return (// This will provide state for `ToolbarButton`'s 72216 (0,external_wp_element_namespaceObject.createElement)(toolbar_context.Provider, { 72217 value: toolbarState 72218 }, (0,external_wp_element_namespaceObject.createElement)(Toolbar, extends_extends({ 72219 ref: ref, 72220 "aria-label": label 72221 }, toolbarState, props))) 72222 ); 72223 } 72224 72225 /* harmony default export */ var toolbar_container = ((0,external_wp_element_namespaceObject.forwardRef)(ToolbarContainer)); 72226 72227 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/toolbar/index.js 72228 72229 72230 72231 /** 72232 * External dependencies 72233 */ 72234 72235 /** 72236 * WordPress dependencies 72237 */ 72238 72239 72240 72241 /** 72242 * Internal dependencies 72243 */ 72244 72245 72246 72247 /** 72248 * Renders a toolbar. 72249 * 72250 * To add controls, simply pass `ToolbarButton` components as children. 72251 * 72252 * @param {Object} props Component props. 72253 * @param {string} [props.className] Class to set on the container div. 72254 * @param {string} [props.label] ARIA label for toolbar container. 72255 * @param {Object} ref React Element ref. 72256 */ 72257 72258 function toolbar_Toolbar(_ref, ref) { 72259 let { 72260 className, 72261 label, 72262 ...props 72263 } = _ref; 72264 72265 if (!label) { 72266 external_wp_deprecated_default()('Using Toolbar without label prop', { 72267 since: '5.6', 72268 alternative: 'ToolbarGroup component', 72269 link: 'https://developer.wordpress.org/block-editor/components/toolbar/' 72270 }); 72271 return (0,external_wp_element_namespaceObject.createElement)(toolbar_group, extends_extends({}, props, { 72272 className: className 72273 })); 72274 } // `ToolbarGroup` already uses components-toolbar for compatibility reasons. 72275 72276 72277 const finalClassName = classnames_default()('components-accessible-toolbar', className); 72278 return (0,external_wp_element_namespaceObject.createElement)(toolbar_container, extends_extends({ 72279 className: finalClassName, 72280 label: label, 72281 ref: ref 72282 }, props)); 72283 } 72284 72285 /* harmony default export */ var toolbar = ((0,external_wp_element_namespaceObject.forwardRef)(toolbar_Toolbar)); 72286 72287 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/toolbar-dropdown-menu/index.js 72288 72289 72290 72291 /** 72292 * WordPress dependencies 72293 */ 72294 72295 /** 72296 * Internal dependencies 72297 */ 72298 72299 72300 72301 72302 72303 function ToolbarDropdownMenu(props, ref) { 72304 const accessibleToolbarState = (0,external_wp_element_namespaceObject.useContext)(toolbar_context); 72305 72306 if (!accessibleToolbarState) { 72307 return (0,external_wp_element_namespaceObject.createElement)(dropdown_menu, props); 72308 } // ToobarItem will pass all props to the render prop child, which will pass 72309 // all props to the toggle of DropdownMenu. This means that ToolbarDropdownMenu 72310 // has the same API as DropdownMenu. 72311 72312 72313 return (0,external_wp_element_namespaceObject.createElement)(toolbar_item, extends_extends({ 72314 ref: ref 72315 }, props.toggleProps), toolbarItemProps => (0,external_wp_element_namespaceObject.createElement)(dropdown_menu, extends_extends({}, props, { 72316 popoverProps: { 72317 isAlternate: true, 72318 ...props.popoverProps 72319 }, 72320 toggleProps: toolbarItemProps 72321 }))); 72322 } 72323 72324 /* harmony default export */ var toolbar_dropdown_menu = ((0,external_wp_element_namespaceObject.forwardRef)(ToolbarDropdownMenu)); 72325 72326 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/tools-panel/styles.js 72327 function tools_panel_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } 72328 72329 /** 72330 * External dependencies 72331 */ 72332 72333 /** 72334 * Internal dependencies 72335 */ 72336 72337 72338 72339 72340 72341 const toolsPanelGrid = { 72342 spacing: /*#__PURE__*/emotion_react_browser_esm_css("column-gap:", space(4), ";row-gap:", space(6), ";" + ( true ? "" : 0), true ? "" : 0), 72343 item: { 72344 fullWidth: true ? { 72345 name: "18iuzk9", 72346 styles: "grid-column:1/-1" 72347 } : 0 72348 } 72349 }; 72350 const ToolsPanel = /*#__PURE__*/emotion_react_browser_esm_css(toolsPanelGrid.spacing, ";border-top:", config_values.borderWidth, " solid ", COLORS.gray[300], ";margin-top:-1px;padding:", space(4), ";" + ( true ? "" : 0), true ? "" : 0); 72351 /** 72352 * Items injected into a ToolsPanel via a virtual bubbling slot will require 72353 * an inner dom element to be injected. The following rule allows for the 72354 * CSS grid display to be re-established. 72355 */ 72356 72357 const ToolsPanelWithInnerWrapper = columns => { 72358 return /*#__PURE__*/emotion_react_browser_esm_css(">div:not( :first-of-type ){display:grid;grid-template-columns:", `repeat( $columns}, 1fr )`, ";", toolsPanelGrid.spacing, " ", toolsPanelGrid.item.fullWidth, ";}" + ( true ? "" : 0), true ? "" : 0); 72359 }; 72360 const ToolsPanelHiddenInnerWrapper = true ? { 72361 name: "huufmu", 72362 styles: ">div:not( :first-of-type ){display:none;}" 72363 } : 0; 72364 const ToolsPanelHeader = /*#__PURE__*/emotion_react_browser_esm_css(toolsPanelGrid.item.fullWidth, " gap:", space(2), ";.components-dropdown-menu{margin:", space(-1), " 0;line-height:0;}&&&& .components-dropdown-menu__toggle{padding:0;min-width:", space(6), ";}" + ( true ? "" : 0), true ? "" : 0); 72365 const ToolsPanelHeading = true ? { 72366 name: "1pmxm02", 72367 styles: "font-size:inherit;font-weight:500;line-height:normal;&&{margin:0;}" 72368 } : 0; 72369 const ToolsPanelItem = /*#__PURE__*/emotion_react_browser_esm_css(toolsPanelGrid.item.fullWidth, "&>div,&>fieldset{padding-bottom:0;margin-bottom:0;max-width:100%;}&& ", base_control_styles_Wrapper, "{margin-bottom:0;", StyledField, ":last-child{margin-bottom:0;}}", StyledHelp, "{margin-bottom:0;}&& ", LabelWrapper, "{label{line-height:1.4em;}}.components-custom-select-control__label,", StyledLabel, "{line-height:1.4em;}" + ( true ? "" : 0), true ? "" : 0); 72370 const ToolsPanelItemPlaceholder = true ? { 72371 name: "eivff4", 72372 styles: "display:none" 72373 } : 0; 72374 const styles_DropdownMenu = true ? { 72375 name: "16gsvie", 72376 styles: "min-width:200px" 72377 } : 0; 72378 72379 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/tools-panel/context.js 72380 /** 72381 * WordPress dependencies 72382 */ 72383 72384 /** 72385 * Internal dependencies 72386 */ 72387 72388 const context_noop = () => undefined; 72389 72390 const ToolsPanelContext = (0,external_wp_element_namespaceObject.createContext)({ 72391 menuItems: { 72392 default: {}, 72393 optional: {} 72394 }, 72395 hasMenuItems: false, 72396 isResetting: false, 72397 shouldRenderPlaceholderItems: false, 72398 registerPanelItem: context_noop, 72399 deregisterPanelItem: context_noop, 72400 flagItemCustomization: context_noop, 72401 areAllOptionalControlsHidden: true 72402 }); 72403 const useToolsPanelContext = () => (0,external_wp_element_namespaceObject.useContext)(ToolsPanelContext); 72404 72405 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/tools-panel/tools-panel-header/hook.js 72406 /** 72407 * WordPress dependencies 72408 */ 72409 72410 /** 72411 * Internal dependencies 72412 */ 72413 72414 72415 72416 72417 72418 function useToolsPanelHeader(props) { 72419 const { 72420 className, 72421 ...otherProps 72422 } = useContextSystem(props, 'ToolsPanelHeader'); 72423 const cx = useCx(); 72424 const classes = (0,external_wp_element_namespaceObject.useMemo)(() => { 72425 return cx(ToolsPanelHeader, className); 72426 }, [className, cx]); 72427 const dropdownMenuClassName = (0,external_wp_element_namespaceObject.useMemo)(() => { 72428 return cx(styles_DropdownMenu); 72429 }, [cx]); 72430 const headingClassName = (0,external_wp_element_namespaceObject.useMemo)(() => { 72431 return cx(ToolsPanelHeading); 72432 }, [cx]); 72433 const { 72434 menuItems, 72435 hasMenuItems, 72436 areAllOptionalControlsHidden 72437 } = useToolsPanelContext(); 72438 return { ...otherProps, 72439 areAllOptionalControlsHidden, 72440 dropdownMenuClassName, 72441 hasMenuItems, 72442 headingClassName, 72443 menuItems, 72444 className: classes 72445 }; 72446 } 72447 72448 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/tools-panel/tools-panel-header/component.js 72449 72450 72451 72452 /** 72453 * External dependencies 72454 */ 72455 72456 /** 72457 * WordPress dependencies 72458 */ 72459 72460 72461 /** 72462 * Internal dependencies 72463 */ 72464 72465 72466 72467 72468 72469 72470 72471 72472 72473 const tools_panel_header_component_noop = () => {}; 72474 72475 const DefaultControlsGroup = _ref => { 72476 let { 72477 items, 72478 onClose, 72479 toggleItem 72480 } = _ref; 72481 72482 if (!items.length) { 72483 return null; 72484 } 72485 72486 return (0,external_wp_element_namespaceObject.createElement)(menu_group, null, items.map(_ref2 => { 72487 let [label, hasValue] = _ref2; 72488 const icon = hasValue ? library_reset : library_check; 72489 const itemLabel = hasValue ? (0,external_wp_i18n_namespaceObject.sprintf)( // translators: %s: The name of the control being reset e.g. "Padding". 72490 (0,external_wp_i18n_namespaceObject.__)('Reset %s'), label) : undefined; 72491 return (0,external_wp_element_namespaceObject.createElement)(menu_item, { 72492 key: label, 72493 icon: icon, 72494 isSelected: true, 72495 disabled: !hasValue, 72496 label: itemLabel, 72497 onClick: () => { 72498 toggleItem(label); 72499 onClose(); 72500 }, 72501 role: "menuitemcheckbox" 72502 }, label); 72503 })); 72504 }; 72505 72506 const OptionalControlsGroup = _ref3 => { 72507 let { 72508 items, 72509 onClose, 72510 toggleItem 72511 } = _ref3; 72512 72513 if (!items.length) { 72514 return null; 72515 } 72516 72517 return (0,external_wp_element_namespaceObject.createElement)(menu_group, null, items.map(_ref4 => { 72518 let [label, isSelected] = _ref4; 72519 const itemLabel = isSelected ? (0,external_wp_i18n_namespaceObject.sprintf)( // translators: %s: The name of the control being hidden and reset e.g. "Padding". 72520 (0,external_wp_i18n_namespaceObject.__)('Hide and reset %s'), label) : (0,external_wp_i18n_namespaceObject.sprintf)( // translators: %s: The name of the control to display e.g. "Padding". 72521 (0,external_wp_i18n_namespaceObject.__)('Show %s'), label); 72522 return (0,external_wp_element_namespaceObject.createElement)(menu_item, { 72523 key: label, 72524 icon: isSelected && library_check, 72525 isSelected: isSelected, 72526 label: itemLabel, 72527 onClick: () => { 72528 toggleItem(label); 72529 onClose(); 72530 }, 72531 role: "menuitemcheckbox" 72532 }, label); 72533 })); 72534 }; 72535 72536 const component_ToolsPanelHeader = (props, forwardedRef) => { 72537 const { 72538 areAllOptionalControlsHidden, 72539 dropdownMenuClassName, 72540 hasMenuItems, 72541 headingClassName, 72542 label: labelText, 72543 menuItems, 72544 resetAll, 72545 toggleItem, 72546 ...headerProps 72547 } = useToolsPanelHeader(props); 72548 72549 if (!labelText) { 72550 return null; 72551 } 72552 72553 const defaultItems = Object.entries((menuItems === null || menuItems === void 0 ? void 0 : menuItems.default) || {}); 72554 const optionalItems = Object.entries((menuItems === null || menuItems === void 0 ? void 0 : menuItems.optional) || {}); 72555 const dropDownMenuIcon = areAllOptionalControlsHidden ? library_plus : more_vertical; 72556 const dropDownMenuLabelText = areAllOptionalControlsHidden ? (0,external_wp_i18n_namespaceObject._x)('View and add options', 'Button label to reveal tool panel options') : (0,external_wp_i18n_namespaceObject._x)('View options', 'Button label to reveal tool panel options'); 72557 return (0,external_wp_element_namespaceObject.createElement)(h_stack_component, extends_extends({}, headerProps, { 72558 ref: forwardedRef 72559 }), (0,external_wp_element_namespaceObject.createElement)(heading_component, { 72560 level: 2, 72561 className: headingClassName 72562 }, labelText), hasMenuItems && (0,external_wp_element_namespaceObject.createElement)(dropdown_menu, { 72563 icon: dropDownMenuIcon, 72564 label: dropDownMenuLabelText, 72565 menuProps: { 72566 className: dropdownMenuClassName 72567 }, 72568 toggleProps: { 72569 isSmall: true 72570 } 72571 }, _ref5 => { 72572 let { 72573 onClose = tools_panel_header_component_noop 72574 } = _ref5; 72575 return (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, (0,external_wp_element_namespaceObject.createElement)(DefaultControlsGroup, { 72576 items: defaultItems, 72577 onClose: onClose, 72578 toggleItem: toggleItem 72579 }), (0,external_wp_element_namespaceObject.createElement)(OptionalControlsGroup, { 72580 items: optionalItems, 72581 onClose: onClose, 72582 toggleItem: toggleItem 72583 }), (0,external_wp_element_namespaceObject.createElement)(menu_group, null, (0,external_wp_element_namespaceObject.createElement)(menu_item, { 72584 variant: 'tertiary', 72585 onClick: () => { 72586 resetAll(); 72587 onClose(); 72588 } 72589 }, (0,external_wp_i18n_namespaceObject.__)('Reset all')))); 72590 })); 72591 }; 72592 72593 const ConnectedToolsPanelHeader = contextConnect(component_ToolsPanelHeader, 'ToolsPanelHeader'); 72594 /* harmony default export */ var tools_panel_header_component = (ConnectedToolsPanelHeader); 72595 72596 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/tools-panel/tools-panel/hook.js 72597 /** 72598 * WordPress dependencies 72599 */ 72600 72601 /** 72602 * Internal dependencies 72603 */ 72604 72605 72606 72607 72608 const DEFAULT_COLUMNS = 2; 72609 72610 const generateMenuItems = _ref => { 72611 let { 72612 panelItems, 72613 shouldReset, 72614 currentMenuItems 72615 } = _ref; 72616 const menuItems = { 72617 default: {}, 72618 optional: {} 72619 }; 72620 panelItems.forEach(_ref2 => { 72621 var _currentMenuItems$gro; 72622 72623 let { 72624 hasValue, 72625 isShownByDefault, 72626 label 72627 } = _ref2; 72628 const group = isShownByDefault ? 'default' : 'optional'; // If a menu item for this label already exists, do not overwrite its value. 72629 // This can cause default controls that have been flagged as customized to 72630 // lose their value. 72631 72632 const existingItemValue = currentMenuItems === null || currentMenuItems === void 0 ? void 0 : (_currentMenuItems$gro = currentMenuItems[group]) === null || _currentMenuItems$gro === void 0 ? void 0 : _currentMenuItems$gro[label]; 72633 const value = existingItemValue !== undefined ? existingItemValue : hasValue(); 72634 menuItems[group][label] = shouldReset ? false : value; 72635 }); 72636 return menuItems; 72637 }; 72638 72639 const isMenuItemTypeEmpty = obj => obj && Object.keys(obj).length === 0; 72640 72641 function useToolsPanel(props) { 72642 const { 72643 className, 72644 resetAll, 72645 panelId, 72646 hasInnerWrapper, 72647 shouldRenderPlaceholderItems, 72648 __experimentalFirstVisibleItemClass, 72649 __experimentalLastVisibleItemClass, 72650 ...otherProps 72651 } = useContextSystem(props, 'ToolsPanel'); 72652 const isResetting = (0,external_wp_element_namespaceObject.useRef)(false); 72653 const wasResetting = isResetting.current; // `isResetting` is cleared via this hook to effectively batch together 72654 // the resetAll task. Without this, the flag is cleared after the first 72655 // control updates and forces a rerender with subsequent controls then 72656 // believing they need to reset, unfortunately using stale data. 72657 72658 (0,external_wp_element_namespaceObject.useEffect)(() => { 72659 if (wasResetting) { 72660 isResetting.current = false; 72661 } 72662 }, [wasResetting]); // Allow panel items to register themselves. 72663 72664 const [panelItems, setPanelItems] = (0,external_wp_element_namespaceObject.useState)([]); 72665 const registerPanelItem = (0,external_wp_element_namespaceObject.useCallback)(item => { 72666 setPanelItems(items => { 72667 const newItems = [...items]; // If an item with this label has already been registered, remove it 72668 // first. This can happen when an item is moved between the default 72669 // and optional groups. 72670 72671 const existingIndex = newItems.findIndex(oldItem => oldItem.label === item.label); 72672 72673 if (existingIndex !== -1) { 72674 newItems.splice(existingIndex, 1); 72675 } 72676 72677 return [...newItems, item]; 72678 }); 72679 }, [setPanelItems]); // Panels need to deregister on unmount to avoid orphans in menu state. 72680 // This is an issue when panel items are being injected via SlotFills. 72681 72682 const deregisterPanelItem = (0,external_wp_element_namespaceObject.useCallback)(label => { 72683 // When switching selections between components injecting matching 72684 // controls, e.g. both panels have a "padding" control, the 72685 // deregistration of the first panel doesn't occur until after the 72686 // registration of the next. 72687 setPanelItems(items => { 72688 const newItems = [...items]; 72689 const index = newItems.findIndex(item => item.label === label); 72690 72691 if (index !== -1) { 72692 newItems.splice(index, 1); 72693 } 72694 72695 return newItems; 72696 }); 72697 }, [setPanelItems]); // Manage and share display state of menu items representing child controls. 72698 72699 const [menuItems, setMenuItems] = (0,external_wp_element_namespaceObject.useState)({ 72700 default: {}, 72701 optional: {} 72702 }); // Setup menuItems state as panel items register themselves. 72703 72704 (0,external_wp_element_namespaceObject.useEffect)(() => { 72705 setMenuItems(prevState => { 72706 const items = generateMenuItems({ 72707 panelItems, 72708 shouldReset: false, 72709 currentMenuItems: prevState 72710 }); 72711 return items; 72712 }); 72713 }, [generateMenuItems, panelItems, setMenuItems]); // Force a menu item to be checked. 72714 // This is intended for use with default panel items. They are displayed 72715 // separately to optional items and have different display states, 72716 // we need to update that when their value is customized. 72717 72718 const flagItemCustomization = (0,external_wp_element_namespaceObject.useCallback)(function (label) { 72719 let group = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'default'; 72720 setMenuItems(items => { 72721 const newState = { ...items, 72722 [group]: { ...items[group], 72723 [label]: true 72724 } 72725 }; 72726 return newState; 72727 }); 72728 }, [setMenuItems]); // Whether all optional menu items are hidden or not must be tracked 72729 // in order to later determine if the panel display is empty and handle 72730 // conditional display of a plus icon to indicate the presence of further 72731 // menu items. 72732 72733 const [areAllOptionalControlsHidden, setAreAllOptionalControlsHidden] = (0,external_wp_element_namespaceObject.useState)(false); 72734 (0,external_wp_element_namespaceObject.useEffect)(() => { 72735 if (isMenuItemTypeEmpty(menuItems === null || menuItems === void 0 ? void 0 : menuItems.default) && !isMenuItemTypeEmpty(menuItems === null || menuItems === void 0 ? void 0 : menuItems.optional)) { 72736 const allControlsHidden = !Object.entries(menuItems.optional).some(_ref3 => { 72737 let [, isSelected] = _ref3; 72738 return isSelected; 72739 }); 72740 setAreAllOptionalControlsHidden(allControlsHidden); 72741 } 72742 }, [menuItems, setAreAllOptionalControlsHidden]); 72743 const cx = useCx(); 72744 const classes = (0,external_wp_element_namespaceObject.useMemo)(() => { 72745 const wrapperStyle = hasInnerWrapper && ToolsPanelWithInnerWrapper(DEFAULT_COLUMNS); 72746 const emptyStyle = isMenuItemTypeEmpty(menuItems === null || menuItems === void 0 ? void 0 : menuItems.default) && areAllOptionalControlsHidden && ToolsPanelHiddenInnerWrapper; 72747 return cx(ToolsPanel, wrapperStyle, emptyStyle, className); 72748 }, [areAllOptionalControlsHidden, className, cx, hasInnerWrapper, menuItems]); // Toggle the checked state of a menu item which is then used to determine 72749 // display of the item within the panel. 72750 72751 const toggleItem = (0,external_wp_element_namespaceObject.useCallback)(label => { 72752 const currentItem = panelItems.find(item => item.label === label); 72753 72754 if (!currentItem) { 72755 return; 72756 } 72757 72758 const menuGroup = currentItem.isShownByDefault ? 'default' : 'optional'; 72759 const newMenuItems = { ...menuItems, 72760 [menuGroup]: { ...menuItems[menuGroup], 72761 [label]: !menuItems[menuGroup][label] 72762 } 72763 }; 72764 setMenuItems(newMenuItems); 72765 }, [menuItems, panelItems, setMenuItems]); // Resets display of children and executes resetAll callback if available. 72766 72767 const resetAllItems = (0,external_wp_element_namespaceObject.useCallback)(() => { 72768 if (typeof resetAll === 'function') { 72769 isResetting.current = true; // Collect available reset filters from panel items. 72770 72771 const filters = []; 72772 panelItems.forEach(item => { 72773 if (item.resetAllFilter) { 72774 filters.push(item.resetAllFilter); 72775 } 72776 }); 72777 resetAll(filters); 72778 } // Turn off display of all non-default items. 72779 72780 72781 const resetMenuItems = generateMenuItems({ 72782 panelItems, 72783 shouldReset: true 72784 }); 72785 setMenuItems(resetMenuItems); 72786 }, [generateMenuItems, isResetting.current, panelItems, resetAll, setMenuItems]); // Assist ItemGroup styling when there are potentially hidden placeholder 72787 // items by identifying first & last items that are toggled on for display. 72788 72789 const getFirstVisibleItemLabel = items => { 72790 const optionalItems = menuItems.optional || {}; 72791 const firstItem = items.find(item => item.isShownByDefault || !!optionalItems[item.label]); 72792 return firstItem === null || firstItem === void 0 ? void 0 : firstItem.label; 72793 }; 72794 72795 const firstDisplayedItem = getFirstVisibleItemLabel(panelItems); 72796 const lastDisplayedItem = getFirstVisibleItemLabel([...panelItems].reverse()); 72797 const panelContext = (0,external_wp_element_namespaceObject.useMemo)(() => ({ 72798 areAllOptionalControlsHidden, 72799 deregisterPanelItem, 72800 firstDisplayedItem, 72801 flagItemCustomization, 72802 hasMenuItems: !!panelItems.length, 72803 isResetting: isResetting.current, 72804 lastDisplayedItem, 72805 menuItems, 72806 panelId, 72807 registerPanelItem, 72808 shouldRenderPlaceholderItems, 72809 __experimentalFirstVisibleItemClass, 72810 __experimentalLastVisibleItemClass 72811 }), [areAllOptionalControlsHidden, deregisterPanelItem, firstDisplayedItem, flagItemCustomization, isResetting.current, lastDisplayedItem, menuItems, panelId, panelItems, registerPanelItem, shouldRenderPlaceholderItems, __experimentalFirstVisibleItemClass, __experimentalLastVisibleItemClass]); 72812 return { ...otherProps, 72813 panelContext, 72814 resetAllItems, 72815 toggleItem, 72816 className: classes 72817 }; 72818 } 72819 72820 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/tools-panel/tools-panel/component.js 72821 72822 72823 72824 /** 72825 * External dependencies 72826 */ 72827 72828 /** 72829 * Internal dependencies 72830 */ 72831 72832 72833 72834 72835 72836 72837 const component_ToolsPanel = (props, forwardedRef) => { 72838 const { 72839 children, 72840 label, 72841 panelContext, 72842 resetAllItems, 72843 toggleItem, 72844 ...toolsPanelProps 72845 } = useToolsPanel(props); 72846 return (0,external_wp_element_namespaceObject.createElement)(grid_component, extends_extends({}, toolsPanelProps, { 72847 columns: 2, 72848 ref: forwardedRef 72849 }), (0,external_wp_element_namespaceObject.createElement)(ToolsPanelContext.Provider, { 72850 value: panelContext 72851 }, (0,external_wp_element_namespaceObject.createElement)(tools_panel_header_component, { 72852 label: label, 72853 resetAll: resetAllItems, 72854 toggleItem: toggleItem 72855 }), children)); 72856 }; 72857 72858 const ConnectedToolsPanel = contextConnect(component_ToolsPanel, 'ToolsPanel'); 72859 /* harmony default export */ var tools_panel_component = (ConnectedToolsPanel); 72860 72861 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/tools-panel/tools-panel-item/hook.js 72862 /** 72863 * WordPress dependencies 72864 */ 72865 72866 72867 /** 72868 * Internal dependencies 72869 */ 72870 72871 72872 72873 72874 72875 function useToolsPanelItem(props) { 72876 var _menuItems$menuGroup, _menuItems$menuGroup2; 72877 72878 const { 72879 className, 72880 hasValue, 72881 isShownByDefault, 72882 label, 72883 panelId, 72884 resetAllFilter, 72885 onDeselect, 72886 onSelect, 72887 ...otherProps 72888 } = useContextSystem(props, 'ToolsPanelItem'); 72889 const { 72890 panelId: currentPanelId, 72891 menuItems, 72892 registerPanelItem, 72893 deregisterPanelItem, 72894 flagItemCustomization, 72895 isResetting, 72896 shouldRenderPlaceholderItems: shouldRenderPlaceholder, 72897 firstDisplayedItem, 72898 lastDisplayedItem, 72899 __experimentalFirstVisibleItemClass, 72900 __experimentalLastVisibleItemClass 72901 } = useToolsPanelContext(); 72902 const hasValueCallback = (0,external_wp_element_namespaceObject.useCallback)(hasValue, [panelId]); 72903 const resetAllFilterCallback = (0,external_wp_element_namespaceObject.useCallback)(resetAllFilter, [panelId]); 72904 const previousPanelId = (0,external_wp_compose_namespaceObject.usePrevious)(currentPanelId); 72905 const hasMatchingPanel = currentPanelId === panelId || currentPanelId === null; // Registering the panel item allows the panel to include it in its 72906 // automatically generated menu and determine its initial checked status. 72907 72908 (0,external_wp_element_namespaceObject.useEffect)(() => { 72909 if (hasMatchingPanel && previousPanelId !== null) { 72910 registerPanelItem({ 72911 hasValue: hasValueCallback, 72912 isShownByDefault, 72913 label, 72914 resetAllFilter: resetAllFilterCallback, 72915 panelId 72916 }); 72917 } 72918 72919 return () => { 72920 if (previousPanelId === null && !!currentPanelId || currentPanelId === panelId) { 72921 deregisterPanelItem(label); 72922 } 72923 }; 72924 }, [currentPanelId, hasMatchingPanel, isShownByDefault, label, hasValueCallback, panelId, previousPanelId, resetAllFilterCallback]); 72925 const isValueSet = hasValue(); 72926 const wasValueSet = (0,external_wp_compose_namespaceObject.usePrevious)(isValueSet); // If this item represents a default control it will need to notify the 72927 // panel when a custom value has been set. 72928 72929 (0,external_wp_element_namespaceObject.useEffect)(() => { 72930 if (isShownByDefault && isValueSet && !wasValueSet) { 72931 flagItemCustomization(label); 72932 } 72933 }, [isValueSet, wasValueSet, isShownByDefault, label]); // Note: `label` is used as a key when building menu item state in 72934 // `ToolsPanel`. 72935 72936 const menuGroup = isShownByDefault ? 'default' : 'optional'; 72937 const isMenuItemChecked = menuItems === null || menuItems === void 0 ? void 0 : (_menuItems$menuGroup = menuItems[menuGroup]) === null || _menuItems$menuGroup === void 0 ? void 0 : _menuItems$menuGroup[label]; 72938 const wasMenuItemChecked = (0,external_wp_compose_namespaceObject.usePrevious)(isMenuItemChecked); // Determine if the panel item's corresponding menu is being toggled and 72939 // trigger appropriate callback if it is. 72940 72941 (0,external_wp_element_namespaceObject.useEffect)(() => { 72942 if (isResetting || !hasMatchingPanel) { 72943 return; 72944 } 72945 72946 if (isMenuItemChecked && !isValueSet && !wasMenuItemChecked) { 72947 onSelect === null || onSelect === void 0 ? void 0 : onSelect(); 72948 } 72949 72950 if (!isMenuItemChecked && wasMenuItemChecked) { 72951 onDeselect === null || onDeselect === void 0 ? void 0 : onDeselect(); 72952 } 72953 }, [hasMatchingPanel, isMenuItemChecked, isResetting, isValueSet, wasMenuItemChecked]); // The item is shown if it is a default control regardless of whether it 72954 // has a value. Optional items are shown when they are checked or have 72955 // a value. 72956 72957 const isShown = isShownByDefault ? (menuItems === null || menuItems === void 0 ? void 0 : (_menuItems$menuGroup2 = menuItems[menuGroup]) === null || _menuItems$menuGroup2 === void 0 ? void 0 : _menuItems$menuGroup2[label]) !== undefined : isMenuItemChecked; 72958 const cx = useCx(); 72959 const classes = (0,external_wp_element_namespaceObject.useMemo)(() => { 72960 const placeholderStyle = shouldRenderPlaceholder && !isShown && ToolsPanelItemPlaceholder; 72961 const firstItemStyle = firstDisplayedItem === label && __experimentalFirstVisibleItemClass; 72962 const lastItemStyle = lastDisplayedItem === label && __experimentalLastVisibleItemClass; 72963 return cx(ToolsPanelItem, placeholderStyle, className, firstItemStyle, lastItemStyle); 72964 }, [isShown, shouldRenderPlaceholder, className, cx, firstDisplayedItem, lastDisplayedItem, __experimentalFirstVisibleItemClass, __experimentalLastVisibleItemClass]); 72965 return { ...otherProps, 72966 isShown, 72967 shouldRenderPlaceholder, 72968 className: classes 72969 }; 72970 } 72971 72972 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/tools-panel/tools-panel-item/component.js 72973 72974 72975 72976 /** 72977 * External dependencies 72978 */ 72979 72980 /** 72981 * Internal dependencies 72982 */ 72983 72984 72985 72986 72987 // This wraps controls to be conditionally displayed within a tools panel. It 72988 // prevents props being applied to HTML elements that would make them invalid. 72989 const component_ToolsPanelItem = (props, forwardedRef) => { 72990 const { 72991 children, 72992 isShown, 72993 shouldRenderPlaceholder, 72994 ...toolsPanelItemProps 72995 } = useToolsPanelItem(props); 72996 72997 if (!isShown) { 72998 return shouldRenderPlaceholder ? (0,external_wp_element_namespaceObject.createElement)(component, extends_extends({}, toolsPanelItemProps, { 72999 ref: forwardedRef 73000 })) : null; 73001 } 73002 73003 return (0,external_wp_element_namespaceObject.createElement)(component, extends_extends({}, toolsPanelItemProps, { 73004 ref: forwardedRef 73005 }), children); 73006 }; 73007 73008 const ConnectedToolsPanelItem = contextConnect(component_ToolsPanelItem, 'ToolsPanelItem'); 73009 /* harmony default export */ var tools_panel_item_component = (ConnectedToolsPanelItem); 73010 73011 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/tree-grid/roving-tab-index-context.js 73012 /** 73013 * WordPress dependencies 73014 */ 73015 73016 const RovingTabIndexContext = (0,external_wp_element_namespaceObject.createContext)(); 73017 const useRovingTabIndexContext = () => (0,external_wp_element_namespaceObject.useContext)(RovingTabIndexContext); 73018 const RovingTabIndexProvider = RovingTabIndexContext.Provider; 73019 73020 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/tree-grid/roving-tab-index.js 73021 73022 73023 /** 73024 * WordPress dependencies 73025 */ 73026 73027 /** 73028 * Internal dependencies 73029 */ 73030 73031 73032 /** 73033 * Provider for adding roving tab index behaviors to tree grid structures. 73034 * 73035 * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/components/src/tree-grid/README.md 73036 * 73037 * @param {Object} props Component props. 73038 * @param {WPElement} props.children Children to be rendered 73039 */ 73040 73041 function RovingTabIndex(_ref) { 73042 let { 73043 children 73044 } = _ref; 73045 const [lastFocusedElement, setLastFocusedElement] = (0,external_wp_element_namespaceObject.useState)(); // Use `useMemo` to avoid creation of a new object for the providerValue 73046 // on every render. Only create a new object when the `lastFocusedElement` 73047 // value changes. 73048 73049 const providerValue = (0,external_wp_element_namespaceObject.useMemo)(() => ({ 73050 lastFocusedElement, 73051 setLastFocusedElement 73052 }), [lastFocusedElement]); 73053 return (0,external_wp_element_namespaceObject.createElement)(RovingTabIndexProvider, { 73054 value: providerValue 73055 }, children); 73056 } 73057 73058 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/tree-grid/index.js 73059 73060 73061 73062 /** 73063 * External dependencies 73064 */ 73065 73066 /** 73067 * WordPress dependencies 73068 */ 73069 73070 73071 73072 73073 /** 73074 * Internal dependencies 73075 */ 73076 73077 73078 /** 73079 * Return focusables in a row element, excluding those from other branches 73080 * nested within the row. 73081 * 73082 * @param {Element} rowElement The DOM element representing the row. 73083 * 73084 * @return {?Array} The array of focusables in the row. 73085 */ 73086 73087 function getRowFocusables(rowElement) { 73088 const focusablesInRow = external_wp_dom_namespaceObject.focus.focusable.find(rowElement, { 73089 sequential: true 73090 }); 73091 73092 if (!focusablesInRow || !focusablesInRow.length) { 73093 return; 73094 } 73095 73096 return focusablesInRow.filter(focusable => { 73097 return focusable.closest('[role="row"]') === rowElement; 73098 }); 73099 } 73100 /** 73101 * Renders both a table and tbody element, used to create a tree hierarchy. 73102 * 73103 * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/components/src/tree-grid/README.md 73104 * @param {Object} props Component props. 73105 * @param {WPElement} props.children Children to be rendered. 73106 * @param {Function} props.onExpandRow Callback to fire when row is expanded. 73107 * @param {Function} props.onCollapseRow Callback to fire when row is collapsed. 73108 * @param {Function} props.onFocusRow Callback to fire when moving focus to a different row. 73109 * @param {Object} ref A ref to the underlying DOM table element. 73110 */ 73111 73112 73113 function TreeGrid(_ref, ref) { 73114 let { 73115 children, 73116 onExpandRow = () => {}, 73117 onCollapseRow = () => {}, 73118 onFocusRow = () => {}, 73119 ...props 73120 } = _ref; 73121 const onKeyDown = (0,external_wp_element_namespaceObject.useCallback)(event => { 73122 const { 73123 keyCode, 73124 metaKey, 73125 ctrlKey, 73126 altKey 73127 } = event; // The shift key is intentionally absent from the following list, 73128 // to enable shift + up/down to select items from the list. 73129 73130 const hasModifierKeyPressed = metaKey || ctrlKey || altKey; 73131 73132 if (hasModifierKeyPressed || !(0,external_lodash_namespaceObject.includes)([external_wp_keycodes_namespaceObject.UP, external_wp_keycodes_namespaceObject.DOWN, external_wp_keycodes_namespaceObject.LEFT, external_wp_keycodes_namespaceObject.RIGHT, external_wp_keycodes_namespaceObject.HOME, external_wp_keycodes_namespaceObject.END], keyCode)) { 73133 return; 73134 } // The event will be handled, stop propagation. 73135 73136 73137 event.stopPropagation(); 73138 const { 73139 activeElement 73140 } = document; 73141 const { 73142 currentTarget: treeGridElement 73143 } = event; 73144 73145 if (!treeGridElement.contains(activeElement)) { 73146 return; 73147 } // Calculate the columnIndex of the active element. 73148 73149 73150 const activeRow = activeElement.closest('[role="row"]'); 73151 const focusablesInRow = getRowFocusables(activeRow); 73152 const currentColumnIndex = focusablesInRow.indexOf(activeElement); 73153 const canExpandCollapse = 0 === currentColumnIndex; 73154 const cannotFocusNextColumn = canExpandCollapse && activeRow.getAttribute('aria-expanded') === 'false' && keyCode === external_wp_keycodes_namespaceObject.RIGHT; 73155 73156 if ((0,external_lodash_namespaceObject.includes)([external_wp_keycodes_namespaceObject.LEFT, external_wp_keycodes_namespaceObject.RIGHT], keyCode)) { 73157 // Calculate to the next element. 73158 let nextIndex; 73159 73160 if (keyCode === external_wp_keycodes_namespaceObject.LEFT) { 73161 nextIndex = Math.max(0, currentColumnIndex - 1); 73162 } else { 73163 nextIndex = Math.min(currentColumnIndex + 1, focusablesInRow.length - 1); 73164 } // Focus is at the left most column. 73165 73166 73167 if (canExpandCollapse) { 73168 if (keyCode === external_wp_keycodes_namespaceObject.LEFT) { 73169 var _activeRow$getAttribu, _getRowFocusables, _getRowFocusables$; 73170 73171 // Left: 73172 // If a row is focused, and it is expanded, collapses the current row. 73173 if (activeRow.getAttribute('aria-expanded') === 'true') { 73174 onCollapseRow(activeRow); 73175 event.preventDefault(); 73176 return; 73177 } // If a row is focused, and it is collapsed, moves to the parent row (if there is one). 73178 73179 73180 const level = Math.max(parseInt((_activeRow$getAttribu = activeRow === null || activeRow === void 0 ? void 0 : activeRow.getAttribute('aria-level')) !== null && _activeRow$getAttribu !== void 0 ? _activeRow$getAttribu : 1, 10) - 1, 1); 73181 const rows = Array.from(treeGridElement.querySelectorAll('[role="row"]')); 73182 let parentRow = activeRow; 73183 const currentRowIndex = rows.indexOf(activeRow); 73184 73185 for (let i = currentRowIndex; i >= 0; i--) { 73186 if (parseInt(rows[i].getAttribute('aria-level'), 10) === level) { 73187 parentRow = rows[i]; 73188 break; 73189 } 73190 } 73191 73192 (_getRowFocusables = getRowFocusables(parentRow)) === null || _getRowFocusables === void 0 ? void 0 : (_getRowFocusables$ = _getRowFocusables[0]) === null || _getRowFocusables$ === void 0 ? void 0 : _getRowFocusables$.focus(); 73193 } 73194 73195 if (keyCode === external_wp_keycodes_namespaceObject.RIGHT) { 73196 // Right: 73197 // If a row is focused, and it is collapsed, expands the current row. 73198 if (activeRow.getAttribute('aria-expanded') === 'false') { 73199 onExpandRow(activeRow); 73200 event.preventDefault(); 73201 return; 73202 } // If a row is focused, and it is expanded, focuses the rightmost cell in the row. 73203 73204 73205 const focusableItems = getRowFocusables(activeRow); 73206 73207 if (focusableItems.length > 0) { 73208 var _focusableItems; 73209 73210 (_focusableItems = focusableItems[focusableItems.length - 1]) === null || _focusableItems === void 0 ? void 0 : _focusableItems.focus(); 73211 } 73212 } // Prevent key use for anything else. For example, Voiceover 73213 // will start reading text on continued use of left/right arrow 73214 // keys. 73215 73216 73217 event.preventDefault(); 73218 return; 73219 } // Focus the next element. If at most left column and row is collapsed, moving right is not allowed as this will expand. However, if row is collapsed, moving left is allowed. 73220 73221 73222 if (cannotFocusNextColumn) { 73223 return; 73224 } 73225 73226 focusablesInRow[nextIndex].focus(); // Prevent key use for anything else. This ensures Voiceover 73227 // doesn't try to handle key navigation. 73228 73229 event.preventDefault(); 73230 } else if ((0,external_lodash_namespaceObject.includes)([external_wp_keycodes_namespaceObject.UP, external_wp_keycodes_namespaceObject.DOWN], keyCode)) { 73231 // Calculate the rowIndex of the next row. 73232 const rows = Array.from(treeGridElement.querySelectorAll('[role="row"]')); 73233 const currentRowIndex = rows.indexOf(activeRow); 73234 let nextRowIndex; 73235 73236 if (keyCode === external_wp_keycodes_namespaceObject.UP) { 73237 nextRowIndex = Math.max(0, currentRowIndex - 1); 73238 } else { 73239 nextRowIndex = Math.min(currentRowIndex + 1, rows.length - 1); 73240 } // Focus is either at the top or bottom edge of the grid. Do nothing. 73241 73242 73243 if (nextRowIndex === currentRowIndex) { 73244 // Prevent key use for anything else. For example, Voiceover 73245 // will start navigating horizontally when reaching the vertical 73246 // bounds of a table. 73247 event.preventDefault(); 73248 return; 73249 } // Get the focusables in the next row. 73250 73251 73252 const focusablesInNextRow = getRowFocusables(rows[nextRowIndex]); // If for some reason there are no focusables in the next row, do nothing. 73253 73254 if (!focusablesInNextRow || !focusablesInNextRow.length) { 73255 // Prevent key use for anything else. For example, Voiceover 73256 // will still focus text when using arrow keys, while this 73257 // component should limit navigation to focusables. 73258 event.preventDefault(); 73259 return; 73260 } // Try to focus the element in the next row that's at a similar column to the activeElement. 73261 73262 73263 const nextIndex = Math.min(currentColumnIndex, focusablesInNextRow.length - 1); 73264 focusablesInNextRow[nextIndex].focus(); // Let consumers know the row that was originally focused, 73265 // and the row that is now in focus. 73266 73267 onFocusRow(event, activeRow, rows[nextRowIndex]); // Prevent key use for anything else. This ensures Voiceover 73268 // doesn't try to handle key navigation. 73269 73270 event.preventDefault(); 73271 } else if ((0,external_lodash_namespaceObject.includes)([external_wp_keycodes_namespaceObject.HOME, external_wp_keycodes_namespaceObject.END], keyCode)) { 73272 // Calculate the rowIndex of the next row. 73273 const rows = Array.from(treeGridElement.querySelectorAll('[role="row"]')); 73274 const currentRowIndex = rows.indexOf(activeRow); 73275 let nextRowIndex; 73276 73277 if (keyCode === external_wp_keycodes_namespaceObject.HOME) { 73278 nextRowIndex = 0; 73279 } else { 73280 nextRowIndex = rows.length - 1; 73281 } // Focus is either at the top or bottom edge of the grid. Do nothing. 73282 73283 73284 if (nextRowIndex === currentRowIndex) { 73285 // Prevent key use for anything else. For example, Voiceover 73286 // will start navigating horizontally when reaching the vertical 73287 // bounds of a table. 73288 event.preventDefault(); 73289 return; 73290 } // Get the focusables in the next row. 73291 73292 73293 const focusablesInNextRow = getRowFocusables(rows[nextRowIndex]); // If for some reason there are no focusables in the next row, do nothing. 73294 73295 if (!focusablesInNextRow || !focusablesInNextRow.length) { 73296 // Prevent key use for anything else. For example, Voiceover 73297 // will still focus text when using arrow keys, while this 73298 // component should limit navigation to focusables. 73299 event.preventDefault(); 73300 return; 73301 } // Try to focus the element in the next row that's at a similar column to the activeElement. 73302 73303 73304 const nextIndex = Math.min(currentColumnIndex, focusablesInNextRow.length - 1); 73305 focusablesInNextRow[nextIndex].focus(); // Let consumers know the row that was originally focused, 73306 // and the row that is now in focus. 73307 73308 onFocusRow(event, activeRow, rows[nextRowIndex]); // Prevent key use for anything else. This ensures Voiceover 73309 // doesn't try to handle key navigation. 73310 73311 event.preventDefault(); 73312 } 73313 }, [onExpandRow, onCollapseRow, onFocusRow]); 73314 /* Disable reason: A treegrid is implemented using a table element. */ 73315 73316 /* eslint-disable jsx-a11y/no-noninteractive-element-to-interactive-role */ 73317 73318 return (0,external_wp_element_namespaceObject.createElement)(RovingTabIndex, null, (0,external_wp_element_namespaceObject.createElement)("table", extends_extends({}, props, { 73319 role: "treegrid", 73320 onKeyDown: onKeyDown, 73321 ref: ref 73322 }), (0,external_wp_element_namespaceObject.createElement)("tbody", null, children))); 73323 /* eslint-enable jsx-a11y/no-noninteractive-element-to-interactive-role */ 73324 } 73325 73326 /* harmony default export */ var tree_grid = ((0,external_wp_element_namespaceObject.forwardRef)(TreeGrid)); 73327 73328 73329 73330 73331 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/tree-grid/row.js 73332 73333 73334 73335 /** 73336 * WordPress dependencies 73337 */ 73338 73339 73340 function TreeGridRow(_ref, ref) { 73341 let { 73342 children, 73343 level, 73344 positionInSet, 73345 setSize, 73346 isExpanded, 73347 ...props 73348 } = _ref; 73349 return (// Disable reason: Due to an error in the ARIA 1.1 specification, the 73350 // aria-posinset and aria-setsize properties are not supported on row 73351 // elements. This is being corrected in ARIA 1.2. Consequently, the 73352 // linting rule fails when validating this markup. 73353 // 73354 // eslint-disable-next-line jsx-a11y/role-supports-aria-props 73355 (0,external_wp_element_namespaceObject.createElement)("tr", extends_extends({}, props, { 73356 ref: ref, 73357 role: "row", 73358 "aria-level": level, 73359 "aria-posinset": positionInSet, 73360 "aria-setsize": setSize, 73361 "aria-expanded": isExpanded 73362 }), children) 73363 ); 73364 } 73365 73366 /* harmony default export */ var tree_grid_row = ((0,external_wp_element_namespaceObject.forwardRef)(TreeGridRow)); 73367 73368 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/tree-grid/roving-tab-index-item.js 73369 73370 73371 /** 73372 * WordPress dependencies 73373 */ 73374 73375 /** 73376 * Internal dependencies 73377 */ 73378 73379 73380 /* harmony default export */ var roving_tab_index_item = ((0,external_wp_element_namespaceObject.forwardRef)(function RovingTabIndexItem(_ref, forwardedRef) { 73381 let { 73382 children, 73383 as: Component, 73384 ...props 73385 } = _ref; 73386 const localRef = (0,external_wp_element_namespaceObject.useRef)(); 73387 const ref = forwardedRef || localRef; 73388 const { 73389 lastFocusedElement, 73390 setLastFocusedElement 73391 } = useRovingTabIndexContext(); 73392 let tabIndex; 73393 73394 if (lastFocusedElement) { 73395 tabIndex = lastFocusedElement === ref.current ? 0 : -1; 73396 } 73397 73398 const onFocus = event => setLastFocusedElement(event.target); 73399 73400 const allProps = { 73401 ref, 73402 tabIndex, 73403 onFocus, 73404 ...props 73405 }; 73406 73407 if (typeof children === 'function') { 73408 return children(allProps); 73409 } 73410 73411 return (0,external_wp_element_namespaceObject.createElement)(Component, allProps, children); 73412 })); 73413 73414 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/tree-grid/item.js 73415 73416 73417 73418 /** 73419 * WordPress dependencies 73420 */ 73421 73422 /** 73423 * Internal dependencies 73424 */ 73425 73426 73427 /* harmony default export */ var tree_grid_item = ((0,external_wp_element_namespaceObject.forwardRef)(function TreeGridItem(_ref, ref) { 73428 let { 73429 children, 73430 ...props 73431 } = _ref; 73432 return (0,external_wp_element_namespaceObject.createElement)(roving_tab_index_item, extends_extends({ 73433 ref: ref 73434 }, props), children); 73435 })); 73436 73437 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/tree-grid/cell.js 73438 73439 73440 73441 /** 73442 * WordPress dependencies 73443 */ 73444 73445 /** 73446 * Internal dependencies 73447 */ 73448 73449 73450 /* harmony default export */ var cell = ((0,external_wp_element_namespaceObject.forwardRef)(function TreeGridCell(_ref, ref) { 73451 let { 73452 children, 73453 withoutGridItem = false, 73454 ...props 73455 } = _ref; 73456 return (0,external_wp_element_namespaceObject.createElement)("td", extends_extends({}, props, { 73457 role: "gridcell" 73458 }), withoutGridItem ? children : (0,external_wp_element_namespaceObject.createElement)(tree_grid_item, { 73459 ref: ref 73460 }, children)); 73461 })); 73462 73463 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/isolated-event-container/index.js 73464 73465 73466 73467 /** 73468 * WordPress dependencies 73469 */ 73470 73471 73472 73473 function stopPropagation(event) { 73474 event.stopPropagation(); 73475 } 73476 73477 /* harmony default export */ var isolated_event_container = ((0,external_wp_element_namespaceObject.forwardRef)((_ref, ref) => { 73478 let { 73479 children, 73480 ...props 73481 } = _ref; 73482 external_wp_deprecated_default()('wp.components.IsolatedEventContainer', { 73483 since: '5.7' 73484 }); // Disable reason: this stops certain events from propagating outside of the component. 73485 // - onMouseDown is disabled as this can cause interactions with other DOM elements. 73486 73487 /* eslint-disable jsx-a11y/no-static-element-interactions */ 73488 73489 return (0,external_wp_element_namespaceObject.createElement)("div", extends_extends({}, props, { 73490 ref: ref, 73491 onMouseDown: stopPropagation 73492 }), children); 73493 /* eslint-enable jsx-a11y/no-static-element-interactions */ 73494 })); 73495 73496 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/z-stack/styles.js 73497 73498 73499 function z_stack_styles_EMOTION_STRINGIFIED_CSS_ERROR_() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } 73500 73501 /** 73502 * External dependencies 73503 */ 73504 73505 73506 /** 73507 * Internal dependencies 73508 */ 73509 73510 const ZStackView = emotion_styled_base_browser_esm("div", true ? { 73511 target: "ebn2ljm1" 73512 } : 0)( true ? { 73513 name: "5ob2ly", 73514 styles: "display:flex;position:relative" 73515 } : 0); 73516 const ZStackChildView = emotion_styled_base_browser_esm("div", true ? { 73517 target: "ebn2ljm0" 73518 } : 0)(_ref => { 73519 let { 73520 isLayered, 73521 offsetAmount 73522 } = _ref; 73523 return isLayered ? /*#__PURE__*/emotion_react_browser_esm_css(rtl({ 73524 marginLeft: offsetAmount 73525 })(), true ? "" : 0, true ? "" : 0) : /*#__PURE__*/emotion_react_browser_esm_css(rtl({ 73526 right: offsetAmount * -1 73527 })(), true ? "" : 0, true ? "" : 0); 73528 }, " ", _ref2 => { 73529 let { 73530 isLayered 73531 } = _ref2; 73532 return isLayered ? positionAbsolute : positionRelative; 73533 }, " ", _ref3 => { 73534 let { 73535 zIndex 73536 } = _ref3; 73537 return /*#__PURE__*/emotion_react_browser_esm_css({ 73538 zIndex 73539 }, true ? "" : 0, true ? "" : 0); 73540 }, ";" + ( true ? "" : 0)); 73541 const positionAbsolute = true ? { 73542 name: "a4hmbt", 73543 styles: "position:absolute" 73544 } : 0; 73545 const positionRelative = true ? { 73546 name: "bjn8wh", 73547 styles: "position:relative" 73548 } : 0; 73549 73550 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/z-stack/component.js 73551 73552 73553 73554 /** 73555 * External dependencies 73556 */ 73557 73558 /** 73559 * WordPress dependencies 73560 */ 73561 73562 /** 73563 * Internal dependencies 73564 */ 73565 73566 73567 73568 73569 73570 function ZStack(props, forwardedRef) { 73571 const { 73572 children, 73573 className, 73574 isLayered = true, 73575 isReversed = false, 73576 offset = 0, 73577 ...otherProps 73578 } = useContextSystem(props, 'ZStack'); 73579 const validChildren = getValidChildren(children); 73580 const childrenLastIndex = validChildren.length - 1; 73581 const clonedChildren = validChildren.map((child, index) => { 73582 const zIndex = isReversed ? childrenLastIndex - index : index; 73583 const offsetAmount = offset * index; 73584 const key = (0,external_wp_element_namespaceObject.isValidElement)(child) ? child.key : index; 73585 return (0,external_wp_element_namespaceObject.createElement)(ZStackChildView, { 73586 isLayered: isLayered, 73587 offsetAmount: offsetAmount, 73588 zIndex: zIndex, 73589 key: key 73590 }, child); 73591 }); 73592 return (0,external_wp_element_namespaceObject.createElement)(ZStackView, extends_extends({}, otherProps, { 73593 className: className, 73594 ref: forwardedRef 73595 }), clonedChildren); 73596 } 73597 73598 /* harmony default export */ var z_stack_component = (contextConnect(ZStack, 'ZStack')); 73599 73600 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/higher-order/navigate-regions/index.js 73601 73602 73603 /** 73604 * WordPress dependencies 73605 */ 73606 73607 73608 73609 const defaultShortcuts = { 73610 previous: [{ 73611 modifier: 'ctrlShift', 73612 character: '`' 73613 }, { 73614 modifier: 'access', 73615 character: 'p' 73616 }], 73617 next: [{ 73618 modifier: 'ctrl', 73619 character: '`' 73620 }, { 73621 modifier: 'access', 73622 character: 'n' 73623 }] 73624 }; 73625 function useNavigateRegions() { 73626 let shortcuts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : defaultShortcuts; 73627 const ref = (0,external_wp_element_namespaceObject.useRef)(); 73628 const [isFocusingRegions, setIsFocusingRegions] = (0,external_wp_element_namespaceObject.useState)(false); 73629 73630 function focusRegion(offset) { 73631 const regions = Array.from(ref.current.querySelectorAll('[role="region"]')); 73632 73633 if (!regions.length) { 73634 return; 73635 } 73636 73637 let nextRegion = regions[0]; 73638 const selectedIndex = regions.indexOf(ref.current.ownerDocument.activeElement); 73639 73640 if (selectedIndex !== -1) { 73641 let nextIndex = selectedIndex + offset; 73642 nextIndex = nextIndex === -1 ? regions.length - 1 : nextIndex; 73643 nextIndex = nextIndex === regions.length ? 0 : nextIndex; 73644 nextRegion = regions[nextIndex]; 73645 } 73646 73647 nextRegion.focus(); 73648 setIsFocusingRegions(true); 73649 } 73650 73651 const clickRef = (0,external_wp_compose_namespaceObject.useRefEffect)(element => { 73652 function onClick() { 73653 setIsFocusingRegions(false); 73654 } 73655 73656 element.addEventListener('click', onClick); 73657 return () => { 73658 element.removeEventListener('click', onClick); 73659 }; 73660 }, [setIsFocusingRegions]); 73661 return { 73662 ref: (0,external_wp_compose_namespaceObject.useMergeRefs)([ref, clickRef]), 73663 className: isFocusingRegions ? 'is-focusing-regions' : '', 73664 73665 onKeyDown(event) { 73666 if (shortcuts.previous.some(_ref => { 73667 let { 73668 modifier, 73669 character 73670 } = _ref; 73671 return external_wp_keycodes_namespaceObject.isKeyboardEvent[modifier](event, character); 73672 })) { 73673 focusRegion(-1); 73674 } else if (shortcuts.next.some(_ref2 => { 73675 let { 73676 modifier, 73677 character 73678 } = _ref2; 73679 return external_wp_keycodes_namespaceObject.isKeyboardEvent[modifier](event, character); 73680 })) { 73681 focusRegion(1); 73682 } 73683 } 73684 73685 }; 73686 } 73687 /* harmony default export */ var navigate_regions = ((0,external_wp_compose_namespaceObject.createHigherOrderComponent)(Component => _ref3 => { 73688 let { 73689 shortcuts, 73690 ...props 73691 } = _ref3; 73692 return (0,external_wp_element_namespaceObject.createElement)("div", useNavigateRegions(shortcuts), (0,external_wp_element_namespaceObject.createElement)(Component, props)); 73693 }, 'navigateRegions')); 73694 73695 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/higher-order/with-constrained-tabbing/index.js 73696 73697 73698 /** 73699 * WordPress dependencies 73700 */ 73701 73702 const withConstrainedTabbing = (0,external_wp_compose_namespaceObject.createHigherOrderComponent)(WrappedComponent => function ComponentWithConstrainedTabbing(props) { 73703 const ref = (0,external_wp_compose_namespaceObject.useConstrainedTabbing)(); 73704 return (0,external_wp_element_namespaceObject.createElement)("div", { 73705 ref: ref, 73706 tabIndex: "-1" 73707 }, (0,external_wp_element_namespaceObject.createElement)(WrappedComponent, props)); 73708 }, 'withConstrainedTabbing'); 73709 /* harmony default export */ var with_constrained_tabbing = (withConstrainedTabbing); 73710 73711 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/higher-order/with-fallback-styles/index.js 73712 73713 73714 73715 /** 73716 * External dependencies 73717 */ 73718 73719 /** 73720 * WordPress dependencies 73721 */ 73722 73723 73724 73725 /* harmony default export */ var with_fallback_styles = (mapNodeToProps => (0,external_wp_compose_namespaceObject.createHigherOrderComponent)(WrappedComponent => { 73726 return class extends external_wp_element_namespaceObject.Component { 73727 constructor() { 73728 super(...arguments); 73729 this.nodeRef = this.props.node; 73730 this.state = { 73731 fallbackStyles: undefined, 73732 grabStylesCompleted: false 73733 }; 73734 this.bindRef = this.bindRef.bind(this); 73735 } 73736 73737 bindRef(node) { 73738 if (!node) { 73739 return; 73740 } 73741 73742 this.nodeRef = node; 73743 } 73744 73745 componentDidMount() { 73746 this.grabFallbackStyles(); 73747 } 73748 73749 componentDidUpdate() { 73750 this.grabFallbackStyles(); 73751 } 73752 73753 grabFallbackStyles() { 73754 const { 73755 grabStylesCompleted, 73756 fallbackStyles 73757 } = this.state; 73758 73759 if (this.nodeRef && !grabStylesCompleted) { 73760 const newFallbackStyles = mapNodeToProps(this.nodeRef, this.props); 73761 73762 if (!(0,external_lodash_namespaceObject.isEqual)(newFallbackStyles, fallbackStyles)) { 73763 this.setState({ 73764 fallbackStyles: newFallbackStyles, 73765 grabStylesCompleted: !!(0,external_lodash_namespaceObject.every)(newFallbackStyles) 73766 }); 73767 } 73768 } 73769 } 73770 73771 render() { 73772 const wrappedComponent = (0,external_wp_element_namespaceObject.createElement)(WrappedComponent, extends_extends({}, this.props, this.state.fallbackStyles)); 73773 return this.props.node ? wrappedComponent : (0,external_wp_element_namespaceObject.createElement)("div", { 73774 ref: this.bindRef 73775 }, " ", wrappedComponent, " "); 73776 } 73777 73778 }; 73779 }, 'withFallbackStyles')); 73780 73781 ;// CONCATENATED MODULE: external ["wp","hooks"] 73782 var external_wp_hooks_namespaceObject = window["wp"]["hooks"]; 73783 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/higher-order/with-filters/index.js 73784 73785 73786 /** 73787 * External dependencies 73788 */ 73789 73790 /** 73791 * WordPress dependencies 73792 */ 73793 73794 73795 73796 73797 const ANIMATION_FRAME_PERIOD = 16; 73798 /** 73799 * Creates a higher-order component which adds filtering capability to the 73800 * wrapped component. Filters get applied when the original component is about 73801 * to be mounted. When a filter is added or removed that matches the hook name, 73802 * the wrapped component re-renders. 73803 * 73804 * @param {string} hookName Hook name exposed to be used by filters. 73805 * 73806 * @return {Function} Higher-order component factory. 73807 */ 73808 73809 function withFilters(hookName) { 73810 return (0,external_wp_compose_namespaceObject.createHigherOrderComponent)(OriginalComponent => { 73811 const namespace = 'core/with-filters/' + hookName; 73812 /** 73813 * The component definition with current filters applied. Each instance 73814 * reuse this shared reference as an optimization to avoid excessive 73815 * calls to `applyFilters` when many instances exist. 73816 * 73817 * @type {?Component} 73818 */ 73819 73820 let FilteredComponent; 73821 /** 73822 * Initializes the FilteredComponent variable once, if not already 73823 * assigned. Subsequent calls are effectively a noop. 73824 */ 73825 73826 function ensureFilteredComponent() { 73827 if (FilteredComponent === undefined) { 73828 FilteredComponent = (0,external_wp_hooks_namespaceObject.applyFilters)(hookName, OriginalComponent); 73829 } 73830 } 73831 73832 class FilteredComponentRenderer extends external_wp_element_namespaceObject.Component { 73833 constructor() { 73834 super(...arguments); 73835 ensureFilteredComponent(); 73836 } 73837 73838 componentDidMount() { 73839 FilteredComponentRenderer.instances.push(this); // If there were previously no mounted instances for components 73840 // filtered on this hook, add the hook handler. 73841 73842 if (FilteredComponentRenderer.instances.length === 1) { 73843 (0,external_wp_hooks_namespaceObject.addAction)('hookRemoved', namespace, onHooksUpdated); 73844 (0,external_wp_hooks_namespaceObject.addAction)('hookAdded', namespace, onHooksUpdated); 73845 } 73846 } 73847 73848 componentWillUnmount() { 73849 FilteredComponentRenderer.instances = (0,external_lodash_namespaceObject.without)(FilteredComponentRenderer.instances, this); // If this was the last of the mounted components filtered on 73850 // this hook, remove the hook handler. 73851 73852 if (FilteredComponentRenderer.instances.length === 0) { 73853 (0,external_wp_hooks_namespaceObject.removeAction)('hookRemoved', namespace); 73854 (0,external_wp_hooks_namespaceObject.removeAction)('hookAdded', namespace); 73855 } 73856 } 73857 73858 render() { 73859 return (0,external_wp_element_namespaceObject.createElement)(FilteredComponent, this.props); 73860 } 73861 73862 } 73863 73864 FilteredComponentRenderer.instances = []; 73865 /** 73866 * Updates the FilteredComponent definition, forcing a render for each 73867 * mounted instance. This occurs a maximum of once per animation frame. 73868 */ 73869 73870 const throttledForceUpdate = (0,external_lodash_namespaceObject.debounce)(() => { 73871 // Recreate the filtered component, only after delay so that it's 73872 // computed once, even if many filters added. 73873 FilteredComponent = (0,external_wp_hooks_namespaceObject.applyFilters)(hookName, OriginalComponent); // Force each instance to render. 73874 73875 FilteredComponentRenderer.instances.forEach(instance => { 73876 instance.forceUpdate(); 73877 }); 73878 }, ANIMATION_FRAME_PERIOD); 73879 /** 73880 * When a filter is added or removed for the matching hook name, each 73881 * mounted instance should re-render with the new filters having been 73882 * applied to the original component. 73883 * 73884 * @param {string} updatedHookName Name of the hook that was updated. 73885 */ 73886 73887 function onHooksUpdated(updatedHookName) { 73888 if (updatedHookName === hookName) { 73889 throttledForceUpdate(); 73890 } 73891 } 73892 73893 return FilteredComponentRenderer; 73894 }, 'withFilters'); 73895 } 73896 73897 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/higher-order/with-focus-return/index.js 73898 73899 73900 /** 73901 * WordPress dependencies 73902 */ 73903 73904 73905 73906 /** 73907 * Returns true if the given object is component-like. An object is component- 73908 * like if it is an instance of wp.element.Component, or is a function. 73909 * 73910 * @param {*} object Object to test. 73911 * 73912 * @return {boolean} Whether object is component-like. 73913 */ 73914 73915 function isComponentLike(object) { 73916 return object instanceof external_wp_element_namespaceObject.Component || typeof object === 'function'; 73917 } 73918 /** 73919 * Higher Order Component used to be used to wrap disposable elements like 73920 * sidebars, modals, dropdowns. When mounting the wrapped component, we track a 73921 * reference to the current active element so we know where to restore focus 73922 * when the component is unmounted. 73923 * 73924 * @param {(WPComponent|Object)} options The component to be enhanced with 73925 * focus return behavior, or an object 73926 * describing the component and the 73927 * focus return characteristics. 73928 * 73929 * @return {Function} Higher Order Component with the focus restauration behaviour. 73930 */ 73931 73932 73933 /* harmony default export */ var with_focus_return = ((0,external_wp_compose_namespaceObject.createHigherOrderComponent)(options => { 73934 const HoC = function () { 73935 let { 73936 onFocusReturn 73937 } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; 73938 return WrappedComponent => { 73939 const WithFocusReturn = props => { 73940 const ref = (0,external_wp_compose_namespaceObject.useFocusReturn)(onFocusReturn); 73941 return (0,external_wp_element_namespaceObject.createElement)("div", { 73942 ref: ref 73943 }, (0,external_wp_element_namespaceObject.createElement)(WrappedComponent, props)); 73944 }; 73945 73946 return WithFocusReturn; 73947 }; 73948 }; 73949 73950 if (isComponentLike(options)) { 73951 const WrappedComponent = options; 73952 return HoC()(WrappedComponent); 73953 } 73954 73955 return HoC(options); 73956 }, 'withFocusReturn')); 73957 const with_focus_return_Provider = _ref => { 73958 let { 73959 children 73960 } = _ref; 73961 external_wp_deprecated_default()('wp.components.FocusReturnProvider component', { 73962 since: '5.7', 73963 hint: 'This provider is not used anymore. You can just remove it from your codebase' 73964 }); 73965 return children; 73966 }; 73967 73968 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/higher-order/with-notices/index.js 73969 73970 73971 73972 /** 73973 * External dependencies 73974 */ 73975 73976 /** 73977 * WordPress dependencies 73978 */ 73979 73980 73981 73982 /** 73983 * Internal dependencies 73984 */ 73985 73986 73987 /** 73988 * Override the default edit UI to include notices if supported. 73989 * 73990 * @param {WPComponent} OriginalComponent Original component. 73991 * 73992 * @return {WPComponent} Wrapped component. 73993 */ 73994 73995 /* harmony default export */ var with_notices = ((0,external_wp_compose_namespaceObject.createHigherOrderComponent)(OriginalComponent => { 73996 function Component(props, ref) { 73997 const [noticeList, setNoticeList] = (0,external_wp_element_namespaceObject.useState)([]); 73998 const noticeOperations = (0,external_wp_element_namespaceObject.useMemo)(() => { 73999 /** 74000 * Function passed down as a prop that adds a new notice. 74001 * 74002 * @param {Object} notice Notice to add. 74003 */ 74004 const createNotice = notice => { 74005 const noticeToAdd = notice.id ? notice : { ...notice, 74006 id: esm_browser_v4() 74007 }; 74008 setNoticeList(current => [...current, noticeToAdd]); 74009 }; 74010 74011 return { 74012 createNotice, 74013 74014 /** 74015 * Function passed as a prop that adds a new error notice. 74016 * 74017 * @param {string} msg Error message of the notice. 74018 */ 74019 createErrorNotice: msg => { 74020 createNotice({ 74021 status: 'error', 74022 content: msg 74023 }); 74024 }, 74025 74026 /** 74027 * Removes a notice by id. 74028 * 74029 * @param {string} id Id of the notice to remove. 74030 */ 74031 removeNotice: id => { 74032 setNoticeList(current => current.filter(notice => notice.id !== id)); 74033 }, 74034 74035 /** 74036 * Removes all notices 74037 */ 74038 removeAllNotices: () => { 74039 setNoticeList([]); 74040 } 74041 }; 74042 }, []); 74043 const propsOut = { ...props, 74044 noticeList, 74045 noticeOperations, 74046 noticeUI: noticeList.length > 0 && (0,external_wp_element_namespaceObject.createElement)(list, { 74047 className: "components-with-notices-ui", 74048 notices: noticeList, 74049 onRemove: noticeOperations.removeNotice 74050 }) 74051 }; 74052 return isForwardRef ? (0,external_wp_element_namespaceObject.createElement)(OriginalComponent, extends_extends({}, propsOut, { 74053 ref: ref 74054 })) : (0,external_wp_element_namespaceObject.createElement)(OriginalComponent, propsOut); 74055 } 74056 74057 let isForwardRef; 74058 const { 74059 render 74060 } = OriginalComponent; // Returns a forwardRef if OriginalComponent appears to be a forwardRef. 74061 74062 if (typeof render === 'function') { 74063 isForwardRef = true; 74064 return (0,external_wp_element_namespaceObject.forwardRef)(Component); 74065 } 74066 74067 return Component; 74068 })); 74069 74070 ;// CONCATENATED MODULE: ./node_modules/@wordpress/components/build-module/index.js 74071 // Primitives. 74072 // Components. 74073 74074 74075 74076 74077 74078 74079 74080 74081 74082 74083 74084 74085 74086 74087 74088 74089 74090 74091 74092 74093 74094 74095 74096 74097 74098 74099 74100 74101 74102 74103 74104 74105 74106 74107 74108 74109 74110 74111 74112 74113 74114 74115 74116 74117 74118 74119 74120 74121 74122 74123 74124 74125 74126 74127 74128 74129 74130 74131 74132 74133 74134 74135 74136 74137 74138 74139 74140 74141 74142 74143 74144 74145 74146 74147 74148 74149 74150 74151 74152 74153 74154 74155 74156 74157 74158 74159 74160 74161 74162 74163 74164 74165 74166 74167 74168 74169 74170 74171 74172 74173 74174 74175 74176 74177 74178 74179 74180 74181 74182 74183 74184 74185 74186 74187 74188 74189 74190 74191 74192 74193 // Higher-Order Components. 74194 74195 74196 74197 74198 74199 74200 74201 74202 74203 74204 }(); 74205 (window.wp = window.wp || {}).components = __webpack_exports__; 74206 /******/ })() 74207 ;
title
Description
Body
title
Description
Body
title
Description
Body
title
Body
| Generated: Sun May 11 01:00:02 2025 | Cross-referenced by PHPXref 0.7.1 |