1/******/ (() => { // webpackBootstrap 2/******/ var __webpack_modules__ = ({ 3 4/***/ 4403: 5/***/ ((module, exports) => { 6 7var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/*! 8 Copyright (c) 2018 Jed Watson. 9 Licensed under the MIT License (MIT), see 10 http://jedwatson.github.io/classnames 11*/ 12/* global define */ 13 14(function () { 15 'use strict'; 16 17 var hasOwn = {}.hasOwnProperty; 18 19 function classNames() { 20 var classes = []; 21 22 for (var i = 0; i < arguments.length; i++) { 23 var arg = arguments[i]; 24 if (!arg) continue; 25 26 var argType = typeof arg; 27 28 if (argType === 'string' || argType === 'number') { 29 classes.push(arg); 30 } else if (Array.isArray(arg)) { 31 if (arg.length) { 32 var inner = classNames.apply(null, arg); 33 if (inner) { 34 classes.push(inner); 35 } 36 } 37 } else if (argType === 'object') { 38 if (arg.toString === Object.prototype.toString) { 39 for (var key in arg) { 40 if (hasOwn.call(arg, key) && arg[key]) { 41 classes.push(key); 42 } 43 } 44 } else { 45 classes.push(arg.toString()); 46 } 47 } 48 } 49 50 return classes.join(' '); 51 } 52 53 if ( true && module.exports) { 54 classNames.default = classNames; 55 module.exports = classNames; 56 } else if (true) { 57 // register as 'classnames', consistent with npm package name 58 !(__WEBPACK_AMD_DEFINE_ARRAY__ = [], __WEBPACK_AMD_DEFINE_RESULT__ = (function () { 59 return classNames; 60 }).apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__), 61 __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); 62 } else {} 63}()); 64 65 66/***/ }), 67 68/***/ 1919: 69/***/ ((module) => { 70 71"use strict"; 72 73 74var isMergeableObject = function isMergeableObject(value) { 75 return isNonNullObject(value) 76 && !isSpecial(value) 77}; 78 79function isNonNullObject(value) { 80 return !!value && typeof value === 'object' 81} 82 83function isSpecial(value) { 84 var stringValue = Object.prototype.toString.call(value); 85 86 return stringValue === '[object RegExp]' 87 || stringValue === '[object Date]' 88 || isReactElement(value) 89} 90 91// see https://github.com/facebook/react/blob/b5ac963fb791d1298e7f396236383bc955f916c1/src/isomorphic/classic/element/ReactElement.js#L21-L25 92var canUseSymbol = typeof Symbol === 'function' && Symbol.for; 93var REACT_ELEMENT_TYPE = canUseSymbol ? Symbol.for('react.element') : 0xeac7; 94 95function isReactElement(value) { 96 return value.$$typeof === REACT_ELEMENT_TYPE 97} 98 99function emptyTarget(val) { 100 return Array.isArray(val) ? [] : {} 101} 102 103function cloneUnlessOtherwiseSpecified(value, options) { 104 return (options.clone !== false && options.isMergeableObject(value)) 105 ? deepmerge(emptyTarget(value), value, options) 106 : value 107} 108 109function defaultArrayMerge(target, source, options) { 110 return target.concat(source).map(function(element) { 111 return cloneUnlessOtherwiseSpecified(element, options) 112 }) 113} 114 115function getMergeFunction(key, options) { 116 if (!options.customMerge) { 117 return deepmerge 118 } 119 var customMerge = options.customMerge(key); 120 return typeof customMerge === 'function' ? customMerge : deepmerge 121} 122 123function getEnumerableOwnPropertySymbols(target) { 124 return Object.getOwnPropertySymbols 125 ? Object.getOwnPropertySymbols(target).filter(function(symbol) { 126 return Object.propertyIsEnumerable.call(target, symbol) 127 }) 128 : [] 129} 130 131function getKeys(target) { 132 return Object.keys(target).concat(getEnumerableOwnPropertySymbols(target)) 133} 134 135function propertyIsOnObject(object, property) { 136 try { 137 return property in object 138 } catch(_) { 139 return false 140 } 141} 142 143// Protects from prototype poisoning and unexpected merging up the prototype chain. 144function propertyIsUnsafe(target, key) { 145 return propertyIsOnObject(target, key) // Properties are safe to merge if they don't exist in the target yet, 146 && !(Object.hasOwnProperty.call(target, key) // unsafe if they exist up the prototype chain, 147 && Object.propertyIsEnumerable.call(target, key)) // and also unsafe if they're nonenumerable. 148} 149 150function mergeObject(target, source, options) { 151 var destination = {}; 152 if (options.isMergeableObject(target)) { 153 getKeys(target).forEach(function(key) { 154 destination[key] = cloneUnlessOtherwiseSpecified(target[key], options); 155 }); 156 } 157 getKeys(source).forEach(function(key) { 158 if (propertyIsUnsafe(target, key)) { 159 return 160 } 161 162 if (propertyIsOnObject(target, key) && options.isMergeableObject(source[key])) { 163 destination[key] = getMergeFunction(key, options)(target[key], source[key], options); 164 } else { 165 destination[key] = cloneUnlessOtherwiseSpecified(source[key], options); 166 } 167 }); 168 return destination 169} 170 171function deepmerge(target, source, options) { 172 options = options || {}; 173 options.arrayMerge = options.arrayMerge || defaultArrayMerge; 174 options.isMergeableObject = options.isMergeableObject || isMergeableObject; 175 // cloneUnlessOtherwiseSpecified is added to `options` so that custom arrayMerge() 176 // implementations can use it. The caller may not replace it. 177 options.cloneUnlessOtherwiseSpecified = cloneUnlessOtherwiseSpecified; 178 179 var sourceIsArray = Array.isArray(source); 180 var targetIsArray = Array.isArray(target); 181 var sourceAndTargetTypesMatch = sourceIsArray === targetIsArray; 182 183 if (!sourceAndTargetTypesMatch) { 184 return cloneUnlessOtherwiseSpecified(source, options) 185 } else if (sourceIsArray) { 186 return options.arrayMerge(target, source, options) 187 } else { 188 return mergeObject(target, source, options) 189 } 190} 191 192deepmerge.all = function deepmergeAll(array, options) { 193 if (!Array.isArray(array)) { 194 throw new Error('first argument should be an array') 195 } 196 197 return array.reduce(function(prev, next) { 198 return deepmerge(prev, next, options) 199 }, {}) 200}; 201 202var deepmerge_1 = deepmerge; 203 204module.exports = deepmerge_1; 205 206 207/***/ }), 208 209/***/ 1345: 210/***/ ((module, __unused_webpack_exports, __webpack_require__) => { 211 212"use strict"; 213 214 215var util = __webpack_require__(5022); 216 217function scrollIntoView(elem, container, config) { 218 config = config || {}; 219 // document å½ä¸åå° window 220 if (container.nodeType === 9) { 221 container = util.getWindow(container); 222 } 223 224 var allowHorizontalScroll = config.allowHorizontalScroll; 225 var onlyScrollIfNeeded = config.onlyScrollIfNeeded; 226 var alignWithTop = config.alignWithTop; 227 var alignWithLeft = config.alignWithLeft; 228 var offsetTop = config.offsetTop || 0; 229 var offsetLeft = config.offsetLeft || 0; 230 var offsetBottom = config.offsetBottom || 0; 231 var offsetRight = config.offsetRight || 0; 232 233 allowHorizontalScroll = allowHorizontalScroll === undefined ? true : allowHorizontalScroll; 234 235 var isWin = util.isWindow(container); 236 var isFramed = !!(isWin && container.frameElement); 237 var elemOffset = util.offset(elem); 238 var eh = util.outerHeight(elem); 239 var ew = util.outerWidth(elem); 240 var containerOffset = undefined; 241 var ch = undefined; 242 var cw = undefined; 243 var containerScroll = undefined; 244 var diffTop = undefined; 245 var diffBottom = undefined; 246 var win = undefined; 247 var winScroll = undefined; 248 var ww = undefined; 249 var wh = undefined; 250 251 if (isFramed) { 252 container = container.document.scrollingElement || container.document.body; 253 } 254 255 if (isWin || isFramed) { 256 win = container; 257 wh = util.height(win); 258 ww = util.width(win); 259 winScroll = { 260 left: util.scrollLeft(win), 261 top: util.scrollTop(win) 262 }; 263 // elem ç¸å¯¹ container å¯è§è§çªçè·ç¦» 264 diffTop = { 265 left: elemOffset.left - winScroll.left - offsetLeft, 266 top: elemOffset.top - winScroll.top - offsetTop 267 }; 268 diffBottom = { 269 left: elemOffset.left + ew - (winScroll.left + ww) + offsetRight, 270 top: elemOffset.top + eh - (winScroll.top + wh) + offsetBottom 271 }; 272 containerScroll = winScroll; 273 } else { 274 containerOffset = util.offset(container); 275 ch = container.clientHeight; 276 cw = container.clientWidth; 277 containerScroll = { 278 left: container.scrollLeft, 279 top: container.scrollTop 280 }; 281 // elem ç¸å¯¹ container å¯è§è§çªçè·ç¦» 282 // 注æè¾¹æ¡, offset æ¯è¾¹æ¡å°æ ¹èç¹ 283 diffTop = { 284 left: elemOffset.left - (containerOffset.left + (parseFloat(util.css(container, 'borderLeftWidth')) || 0)) - offsetLeft, 285 top: elemOffset.top - (containerOffset.top + (parseFloat(util.css(container, 'borderTopWidth')) || 0)) - offsetTop 286 }; 287 diffBottom = { 288 left: elemOffset.left + ew - (containerOffset.left + cw + (parseFloat(util.css(container, 'borderRightWidth')) || 0)) + offsetRight, 289 top: elemOffset.top + eh - (containerOffset.top + ch + (parseFloat(util.css(container, 'borderBottomWidth')) || 0)) + offsetBottom 290 }; 291 } 292 293 if (diffTop.top < 0 || diffBottom.top > 0) { 294 // 强å¶åä¸ 295 if (alignWithTop === true) { 296 util.scrollTop(container, containerScroll.top + diffTop.top); 297 } else if (alignWithTop === false) { 298 util.scrollTop(container, containerScroll.top + diffBottom.top); 299 } else { 300 // èªå¨è°æ´ 301 if (diffTop.top < 0) { 302 util.scrollTop(container, containerScroll.top + diffTop.top); 303 } else { 304 util.scrollTop(container, containerScroll.top + diffBottom.top); 305 } 306 } 307 } else { 308 if (!onlyScrollIfNeeded) { 309 alignWithTop = alignWithTop === undefined ? true : !!alignWithTop; 310 if (alignWithTop) { 311 util.scrollTop(container, containerScroll.top + diffTop.top); 312 } else { 313 util.scrollTop(container, containerScroll.top + diffBottom.top); 314 } 315 } 316 } 317 318 if (allowHorizontalScroll) { 319 if (diffTop.left < 0 || diffBottom.left > 0) { 320 // 强å¶åä¸ 321 if (alignWithLeft === true) { 322 util.scrollLeft(container, containerScroll.left + diffTop.left); 323 } else if (alignWithLeft === false) { 324 util.scrollLeft(container, containerScroll.left + diffBottom.left); 325 } else { 326 // èªå¨è°æ´ 327 if (diffTop.left < 0) { 328 util.scrollLeft(container, containerScroll.left + diffTop.left); 329 } else { 330 util.scrollLeft(container, containerScroll.left + diffBottom.left); 331 } 332 } 333 } else { 334 if (!onlyScrollIfNeeded) { 335 alignWithLeft = alignWithLeft === undefined ? true : !!alignWithLeft; 336 if (alignWithLeft) { 337 util.scrollLeft(container, containerScroll.left + diffTop.left); 338 } else { 339 util.scrollLeft(container, containerScroll.left + diffBottom.left); 340 } 341 } 342 } 343 } 344} 345 346module.exports = scrollIntoView; 347 348/***/ }), 349 350/***/ 5425:
351/***/ ((module, __unused_webpack_exports, __webpack_require__) => { 352 353"use strict"; 354 355 356module.exports = __webpack_require__(1345); 357 358/***/ }), 359 360/***/ 5022: 361/***/ ((module) => { 362 363"use strict"; 364 365 366var _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; }; 367 368var _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; }; 369 370var RE_NUM = /[\-+]?(?:\d*\.|)\d+(?:[eE][\-+]?\d+|)/.source; 371 372function getClientPosition(elem) { 373 var box = undefined; 374 var x = undefined; 375 var y = undefined; 376 var doc = elem.ownerDocument; 377 var body = doc.body; 378 var docElem = doc && doc.documentElement; 379 // æ ¹æ® GBS ææ°æ°æ®ï¼A-Grade Browsers é½å·²æ¯æ getBoundingClientRect æ¹æ³ï¼ä¸ç¨åèèä¼ ç»çå®ç°æ¹å¼ 380 box = elem.getBoundingClientRect(); 381 382 // 注ï¼jQuery è¿èèåå» docElem.clientLeft/clientTop 383 // 使µè¯åç°ï¼è¿æ ·åèä¼å¯¼è´å½ html å body æè¾¹è·/è¾¹æ¡æ ·å¼æ¶ï¼è·åçå¼ä¸æ£ç¡® 384 // æ¤å¤ï¼ie6 ä¼å¿½ç¥ html ç margin å¼ï¼å¹¸è¿å°æ¯æ²¡æè°ä¼å»è®¾ç½® html ç margin 385 386 x = box.left; 387 y = box.top; 388 389 // In IE, most of the time, 2 extra pixels are added to the top and left 390 // due to the implicit 2-pixel inset border. In IE6/7 quirks mode and 391 // IE6 standards mode, this border can be overridden by setting the 392 // document element's border to zero -- thus, we cannot rely on the 393 // offset always being 2 pixels. 394 395 // In quirks mode, the offset can be determined by querying the body's 396 // clientLeft/clientTop, but in standards mode, it is found by querying 397 // the document element's clientLeft/clientTop. Since we already called 398 // getClientBoundingRect we have already forced a reflow, so it is not 399 // too expensive just to query them all. 400 401 // ie ä¸åºè¯¥åå»çªå£çè¾¹æ¡å§ï¼æ¯ç«é»è®¤ absolute 齿¯ç¸å¯¹çªå£å®ä½ç 402 // çªå£è¾¹æ¡æ åæ¯è®¾ documentElement ,quirks æ¶è®¾ç½® body 403 // æå¥½ç¦æ¢å¨ body å html ä¸è¾¹æ¡ ï¼ä½ ie < 9 html é»è®¤æ 2px ï¼åå» 404 // 使¯é ie ä¸å¯è½è®¾ç½®çªå£è¾¹æ¡ï¼body html ä¹ä¸æ¯çªå£ ,ie å¯ä»¥éè¿ html,body 设置 405 // æ å ie ä¸ docElem.clientTop å°±æ¯ border-top 406 // ie7 html å³çªå£è¾¹æ¡æ¹åä¸äºãæ°¸è¿ä¸º 2 407 // 使 å firefox/chrome/ie9 ä¸ docElem.clientTop æ¯çªå£è¾¹æ¡ï¼å³ä½¿è®¾äº border-top ä¹ä¸º 0 408 409 x -= docElem.clientLeft || body.clientLeft || 0; 410 y -= docElem.clientTop || body.clientTop || 0; 411 412 return { 413 left: x, 414 top: y 415 }; 416} 417 418function getScroll(w, top) { 419 var ret = w['page' + (top ? 'Y' : 'X') + 'Offset']; 420 var method = 'scroll' + (top ? 'Top' : 'Left'); 421 if (typeof ret !== 'number') { 422 var d = w.document; 423 // ie6,7,8 standard mode 424 ret = d.documentElement[method]; 425 if (typeof ret !== 'number') { 426 // quirks mode 427 ret = d.body[method]; 428 } 429 } 430 return ret; 431} 432 433function getScrollLeft(w) { 434 return getScroll(w); 435} 436 437function getScrollTop(w) { 438 return getScroll(w, true); 439} 440 441function getOffset(el) { 442 var pos = getClientPosition(el); 443 var doc = el.ownerDocument; 444 var w = doc.defaultView || doc.parentWindow; 445 pos.left += getScrollLeft(w); 446 pos.top += getScrollTop(w); 447 return pos; 448} 449function _getComputedStyle(elem, name, computedStyle_) { 450 var val = ''; 451 var d = elem.ownerDocument; 452 var computedStyle = computedStyle_ || d.defaultView.getComputedStyle(elem, null); 453 454 // https://github.com/kissyteam/kissy/issues/61 455 if (computedStyle) { 456 val = computedStyle.getPropertyValue(name) || computedStyle[name]; 457 } 458 459 return val; 460} 461 462var _RE_NUM_NO_PX = new RegExp('^(' + RE_NUM + ')(?!px)[a-z%]+$', 'i'); 463var RE_POS = /^(top|right|bottom|left)$/; 464var CURRENT_STYLE = 'currentStyle'; 465var RUNTIME_STYLE = 'runtimeStyle'; 466var LEFT = 'left'; 467var PX = 'px'; 468 469function _getComputedStyleIE(elem, name) { 470 // currentStyle maybe null
471 // http://msdn.microsoft.com/en-us/library/ms535231.aspx 472 var ret = elem[CURRENT_STYLE] && elem[CURRENT_STYLE][name]; 473 474 // å½ width/height 设置为ç¾åæ¯æ¶ï¼éè¿ pixelLeft æ¹å¼è½¬æ¢ç width/height å¼ 475 // ä¸å¼å§å°±å¤çäº! CUSTOM_STYLE.height,CUSTOM_STYLE.width ,cssHook è§£å³@2011-08-19 476 // å¨ ie ä¸ä¸å¯¹ï¼éè¦ç´æ¥ç¨ offset æ¹å¼ 477 // borderWidth çå¼ä¹æé®é¢ï¼ä½èèå° borderWidth 设为ç¾åæ¯çæ¦çå¾å°ï¼è¿éå°±ä¸èèäº 478 479 // From the awesome hack by Dean Edwards 480 // http://erik.eae.net/archives/2007/07/27/18.54.15/#comment-102291 481 // If we're not dealing with a regular pixel number 482 // but a number that has a weird ending, we need to convert it to pixels 483 // exclude left right for relativity 484 if (_RE_NUM_NO_PX.test(ret) && !RE_POS.test(name)) { 485 // Remember the original values 486 var style = elem.style; 487 var left = style[LEFT]; 488 var rsLeft = elem[RUNTIME_STYLE][LEFT]; 489 490 // prevent flashing of content 491 elem[RUNTIME_STYLE][LEFT] = elem[CURRENT_STYLE][LEFT]; 492 493 // Put in the new values to get a computed value out 494 style[LEFT] = name === 'fontSize' ? '1em' : ret || 0; 495 ret = style.pixelLeft + PX; 496 497 // Revert the changed values 498 style[LEFT] = left; 499 500 elem[RUNTIME_STYLE][LEFT] = rsLeft; 501 } 502 return ret === '' ? 'auto' : ret; 503} 504 505var getComputedStyleX = undefined; 506if (typeof window !== 'undefined') { 507 getComputedStyleX = window.getComputedStyle ? _getComputedStyle : _getComputedStyleIE; 508} 509 510function each(arr, fn) { 511 for (var i = 0; i < arr.length; i++) { 512 fn(arr[i]); 513 } 514} 515 516function isBorderBoxFn(elem) { 517 return getComputedStyleX(elem, 'boxSizing') === 'border-box'; 518} 519 520var BOX_MODELS = ['margin', 'border', 'padding']; 521var CONTENT_INDEX = -1; 522var PADDING_INDEX = 2; 523var BORDER_INDEX = 1; 524var MARGIN_INDEX = 0; 525 526function swap(elem, options, callback) { 527 var old = {}; 528 var style = elem.style; 529 var name = undefined; 530 531 // Remember the old values, and insert the new ones 532 for (name in options) { 533 if (options.hasOwnProperty(name)) { 534 old[name] = style[name]; 535 style[name] = options[name]; 536 } 537 } 538 539 callback.call(elem); 540 541 // Revert the old values 542 for (name in options) { 543 if (options.hasOwnProperty(name)) { 544 style[name] = old[name]; 545 } 546 } 547} 548 549function getPBMWidth(elem, props, which) { 550 var value = 0; 551 var prop = undefined; 552 var j = undefined; 553 var i = undefined; 554 for (j = 0; j < props.length; j++) { 555 prop = props[j]; 556 if (prop) { 557 for (i = 0; i < which.length; i++) { 558 var cssProp = undefined; 559 if (prop === 'border') { 560 cssProp = prop + which[i] + 'Width'; 561 } else { 562 cssProp = prop + which[i]; 563 } 564 value += parseFloat(getComputedStyleX(elem, cssProp)) || 0; 565 } 566 } 567 } 568 return value; 569} 570 571/** 572 * A crude way of determining if an object is a window 573 * @member util 574 */ 575function isWindow(obj) { 576 // must use == for ie8 577 /* eslint eqeqeq:0 */ 578 return obj != null && obj == obj.window; 579} 580 581var domUtils = {}; 582 583each(['Width', 'Height'], function (name) { 584 domUtils['doc' + name] = function (refWin) { 585 var d = refWin.document; 586 return Math.max( 587 // firefox chrome documentElement.scrollHeight< body.scrollHeight 588 // ie standard mode : documentElement.scrollHeight> body.scrollHeight 589 d.documentElement['scroll' + name], 590 // quirks : documentElement.scrollHeight æå¤§çäºå¯è§çªå£å¤ä¸ç¹ï¼ 591 d.body['scroll' + name], domUtils['viewport' + name](d)); 592 }; 593 594 domUtils['viewport' + name] = function (win) { 595 // pc browser includes scrollbar in window.innerWidth 596 var prop = 'client' + name; 597 var doc = win.document; 598 var body = doc.body; 599 var documentElement = doc.documentElement; 600 var documentElementProp = documentElement[prop]; 601 // æ 忍¡å¼å documentElement 602 // backcompat å body 603 return doc.compatMode === 'CSS1Compat' && documentElementProp || body && body[prop] || documentElementProp; 604 }; 605}); 606 607/* 608 å¾å°å ç´ ç大å°ä¿¡æ¯ 609 @param elem 610 @param name 611 @param {String} [extra] 'padding' : (css width) + padding 612 'border' : (css width) + padding + border 613 'margin' : (css width) + padding + border + margin 614 */ 615function getWH(elem, name, extra) { 616 if (isWindow(elem)) { 617 return name === 'width' ? domUtils.viewportWidth(elem) : domUtils.viewportHe
617ight(elem); 618 } else if (elem.nodeType === 9) { 619 return name === 'width' ? domUtils.docWidth(elem) : domUtils.docHeight(elem); 620 } 621 var which = name === 'width' ? ['Left', 'Right'] : ['Top', 'Bottom']; 622 var borderBoxValue = name === 'width' ? elem.offsetWidth : elem.offsetHeight; 623 var computedStyle = getComputedStyleX(elem); 624 var isBorderBox = isBorderBoxFn(elem, computedStyle); 625 var cssBoxValue = 0; 626 if (borderBoxValue == null || borderBoxValue <= 0) { 627 borderBoxValue = undefined; 628 // Fall back to computed then un computed css if necessary 629 cssBoxValue = getComputedStyleX(elem, name); 630 if (cssBoxValue == null || Number(cssBoxValue) < 0) { 631 cssBoxValue = elem.style[name] || 0; 632 } 633 // Normalize '', auto, and prepare for extra 634 cssBoxValue = parseFloat(cssBoxValue) || 0; 635 } 636 if (extra === undefined) { 637 extra = isBorderBox ? BORDER_INDEX : CONTENT_INDEX; 638 } 639 var borderBoxValueOrIsBorderBox = borderBoxValue !== undefined || isBorderBox; 640 var val = borderBoxValue || cssBoxValue; 641 if (extra === CONTENT_INDEX) { 642 if (borderBoxValueOrIsBorderBox) { 643 return val - getPBMWidth(elem, ['border', 'padding'], which, computedStyle); 644 } 645 return cssBoxValue; 646 } 647 if (borderBoxValueOrIsBorderBox) { 648 var padding = extra === PADDING_INDEX ? -getPBMWidth(elem, ['border'], which, computedStyle) : getPBMWidth(elem, ['margin'], which, computedStyle); 649 return val + (extra === BORDER_INDEX ? 0 : padding); 650 } 651 return cssBoxValue + getPBMWidth(elem, BOX_MODELS.slice(extra), which, computedStyle); 652} 653 654var cssShow = { 655 position: 'absolute', 656 visibility: 'hidden', 657 display: 'block' 658}; 659 660// fix #119 : https://github.com/kissyteam/kissy/issues/119 661function getWHIgnoreDisplay(elem) { 662 var val = undefined; 663 var args = arguments; 664 // in case elem is window 665 // elem.offsetWidth === undefined 666 if (elem.offsetWidth !== 0) { 667 val = getWH.apply(undefined, args); 668 } else { 669 swap(elem, cssShow, function () { 670 val = getWH.apply(undefined, args); 671 }); 672 } 673 return val; 674} 675 676function css(el, name, v) { 677 var value = v; 678 if ((typeof name === 'undefined' ? 'undefined' : _typeof(name)) === 'object') { 679 for (var i in name) { 680 if (name.hasOwnProperty(i)) { 681 css(el, i, name[i]); 682 } 683 } 684 return undefined; 685 } 686 if (typeof value !== 'undefined') { 687 if (typeof value === 'number') { 688 value += 'px'; 689 } 690 el.style[name] = value; 691 return undefined; 692 } 693 return getComputedStyleX(el, name); 694} 695 696each(['width', 'height'], function (name) { 697 var first = name.charAt(0).toUpperCase() + name.slice(1); 698 domUtils['outer' + first] = function (el, includeMargin) { 699 return el && getWHIgnoreDisplay(el, name, includeMargin ? MARGIN_INDEX : BORDER_INDEX); 700 }; 701 var which = name === 'width' ? ['Left', 'Right'] : ['Top', 'Bottom']; 702 703 domUtils[name] = function (elem, val) { 704 if (val !== undefined) { 705 if (elem) { 706 var computedStyle = getComputedStyleX(elem); 707 var isBorderBox = isBorderBoxFn(elem); 708 if (isBorderBox) { 709 val += getPBMWidth(elem, ['padding', 'border'], which, computedStyle); 710 } 711 return css(elem, name, val); 712 } 713 return undefined; 714 } 715 return elem && getWHIgnoreDisplay(elem, name, CONTENT_INDEX); 716 }; 717}); 718 719// 设置 elem ç¸å¯¹ elem.ownerDocument çåæ 720function setOffset(elem, offset) { 721 // set position first, in-case top/left are set even on static elem 722 if (css(elem, 'position') === 'static') { 723 elem.style.position = 'relative'; 724 } 725 726 var old = getOffset(elem); 727 var ret = {}; 728 var current = undefined; 729 var key = undefined; 730 731 for (key in offset) { 732 if (offset.hasOwnProperty(key)) { 733 current = parseFloat(css(elem, key)) || 0; 734 ret[key] = current + offset[key] - old[key]; 735 } 736 } 737 css(elem, ret); 738} 739 740module.exports = _extends({ 741 getWindow: function getWindow(node) { 742 var doc = node.ownerDocument || node; 743 return doc.defaultView || doc.parentWindow; 744 }, 745 offset: function offset(el, value) { 746 if (typeof value !== 'undefined') { 747 setOffset(el, value); 748 } else { 749 return getOffset(el); 750 } 751 }, 752 753 isWindow: isWindow, 754 each: each, 755 css: css, 756 clone: function clone(obj) { 757 var ret = {}; 758 for (var i in obj) { 759 if (obj.hasOwnProperty(i)) { 760 ret[i] = obj[i]; 761 } 762 } 763 var overflow = obj.overflow; 764 if (overflow) { 765 for (var i in obj) { 766 if (obj.hasOwnProperty(i)) { 767 ret.overflow[i] = obj.overflow[i]; 768 } 769 } 770 } 771 return ret; 772 }, 773 scrollLeft: function scrollLeft(w, v) { 774 if (isWindow(w)) { 775 if (v === undefined) { 776 return getScrollLeft(w); 777 } 778 window.scrollTo(v, getScrollTop(w)); 779 } else { 780 if (v === undefined) { 781 return w.scrollLeft; 782 } 783 w.scrollLeft = v; 784 } 785 }, 786 scrollTop: function scrollTop(w, v) { 787 if (isWindow(w)) { 788 if (v === undefined) { 789 return getScrollTop(w); 790 } 791 window.scrollTo(getScrollLeft(w), v); 792 } else { 793 if (v === undefined) { 794 return w.scrollTop; 795 } 796 w.scrollTop = v; 797 } 798 }, 799 800 viewportWidth: 0,
801 viewportHeight: 0 802}, domUtils); 803 804/***/ }), 805 806/***/ 9214: 807/***/ ((__unused_webpack_module, exports) => { 808 809"use strict"; 810var __webpack_unused_export__; 811/** @license React v17.0.2 812 * react-is.production.min.js 813 * 814 * Copyright (c) Facebook, Inc. and its affiliates. 815 * 816 * This source code is licensed under the MIT license found in the 817 * LICENSE file in the root directory of this source tree. 818 */ 819var 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; 820if("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")} 821function 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; 822__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}; 823__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}; 824__webpack_unused_export__=y; 825 826 827/***/ }), 828 829/***/ 2797: 830/***/ ((module, __unused_webpack_exports, __webpack_require__) => { 831 832"use strict"; 833 834 835if (true) { 836 /* unused reexport */ __webpack_require__(9214); 837} else {} 838 839 840/***/ }), 841 842/***/ 5619: 843/***/ ((module) => { 844 845"use strict"; 846 847 848// do not edit .js files directly - edit src/index.jst 849 850 851 var envHasBigInt64Array = typeof BigInt64Array !== 'undefined'; 852 853 854module.exports = function equal(a, b) { 855 if (a === b) return true; 856 857 if (a && b && typeof a == 'object' && typeof b == 'object') { 858 if (a.constructor !== b.constructor) return false; 859 860 var length, i, keys; 861 if (Array.isArray(a)) { 862 length = a.length; 863 if (length != b.length) return false; 864 for (i = length; i-- !== 0;) 865 if (!equal(a[i], b[i])) return false; 866 return true; 867 } 868 869 870 if ((a instanceof Map) && (b instanceof Map)) { 871 if (a.size !== b.size) return false; 872 for (i of a.entries()) 873 if (!b.has(i[0])) return false; 874 for (i of a.entries()) 875 if (!equal(i[1], b.get(i[0]))) return false; 876 return true; 877 } 878 879 if ((a instanceof Set) && (b instanceof Set)) { 880 if (a.size !== b.size) return false; 881 for (i of a.entries()) 882 if (!b.has(i[0])) return false; 883 return true; 884 } 885 886 if (ArrayBuffer.isView(a) && ArrayBuffer.isView(b)) { 887 length = a.length; 888 if (length != b.length) return false; 889 for (i = length; i-- !== 0;) 890 if (a[i] !== b[i]) return false;
891 return true; 892 } 893 894 895 if (a.constructor === RegExp) return a.source === b.source && a.flags === b.flags; 896 if (a.valueOf !== Object.prototype.valueOf) return a.valueOf() === b.valueOf(); 897 if (a.toString !== Object.prototype.toString) return a.toString() === b.toString(); 898 899 keys = Object.keys(a); 900 length = keys.length; 901 if (length !== Object.keys(b).length) return false; 902 903 for (i = length; i-- !== 0;) 904 if (!Object.prototype.hasOwnProperty.call(b, keys[i])) return false; 905 906 for (i = length; i-- !== 0;) { 907 var key = keys[i]; 908 909 if (!equal(a[key], b[key])) return false; 910 } 911 912 return true; 913 } 914 915 // true if both NaN, false otherwise 916 return a!==a && b!==b; 917}; 918 919 920/***/ }), 921 922/***/ 2920: 923/***/ ((module) => { 924 925// 926// Main 927// 928 929function memoize (fn, options) { 930 var cache = options && options.cache 931 ? options.cache 932 : cacheDefault 933 934 var serializer = options && options.serializer 935 ? options.serializer 936 : serializerDefault 937 938 var strategy = options && options.strategy 939 ? options.strategy 940 : strategyDefault 941 942 return strategy(fn, { 943 cache: cache, 944 serializer: serializer 945 }) 946} 947 948// 949// Strategy 950// 951 952function isPrimitive (value) { 953 return value == null || typeof value === 'number' || typeof value === 'boolean' // || typeof value === "string" 'unsafe' primitive for our needs 954} 955 956function monadic (fn, cache, serializer, arg) { 957 var cacheKey = isPrimitive(arg) ? arg : serializer(arg) 958 959 var computedValue = cache.get(cacheKey) 960 if (typeof computedValue === 'undefined') { 961 computedValue = fn.call(this, arg) 962 cache.set(cacheKey, computedValue) 963 } 964 965 return computedValue 966} 967 968function variadic (fn, cache, serializer) { 969 var args = Array.prototype.slice.call(arguments, 3) 970 var cacheKey = serializer(args) 971 972 var computedValue = cache.get(cacheKey) 973 if (typeof computedValue === 'undefined') { 974 computedValue = fn.apply(this, args) 975 cache.set(cacheKey, computedValue) 976 } 977 978 return computedValue 979} 980 981function assemble (fn, context, strategy, cache, serialize) { 982 return strategy.bind( 983 context, 984 fn, 985 cache, 986 serialize 987 ) 988} 989 990function strategyDefault (fn, options) { 991 var strategy = fn.length === 1 ? monadic : variadic 992 993 return assemble( 994 fn, 995 this, 996 strategy, 997 options.cache.create(), 998 options.serializer 999 ) 1000} 1001 1002function strategyVariadic (fn, options) { 1003 var strategy = variadic 1004 1005 return assemble( 1006 fn, 1007 this, 1008 strategy, 1009 options.cache.create(), 1010 options.serializer 1011 ) 1012} 1013 1014function strategyMonadic (fn, options) { 1015 var strategy = monadic 1016 1017 return assemble( 1018 fn, 1019 this, 1020 strategy, 1021 options.cache.create(), 1022 options.serializer 1023 ) 1024} 1025 1026// 1027// Serializer 1028// 1029 1030function serializerDefault () { 1031 return JSON.stringify(arguments) 1032} 1033 1034// 1035// Cache 1036// 1037 1038function ObjectWithoutPrototypeCache () { 1039 this.cache = Object.create(null) 1040} 1041 1042ObjectWithoutPrototypeCache.prototype.has = function (key) { 1043 return (key in this.cache) 1044} 1045 1046ObjectWithoutPrototypeCache.prototype.get = function (key) { 1047 return this.cache[key] 1048} 1049 1050ObjectWithoutPrototypeCache.prototype.set = function (key, value) { 1051 this.cache[key] = value 1052} 1053 1054var cacheDefault = { 1055 create: function create () { 1056 return new ObjectWithoutPrototypeCache() 1057 } 1058} 1059 1060// 1061// API 1062// 1063 1064module.exports = memoize 1065module.exports.strategies = { 1066 variadic: strategyVariadic, 1067 monadic: strategyMonadic 1068} 1069 1070 1071/***/ }), 1072 1073/***/ 7115: 1074/***/ ((__unused_webpack_module, exports) => { 1075 1076// Copyright (c) 2014 Rafael Caricio. All rights reserved. 1077// Use of this source code is governed by a BSD-style license that can be 1078// found in the LICENSE file. 1079 1080var GradientParser = {}; 1081 1082GradientParser.parse = (function() { 1083 1084 var tokens = { 1085 linearGradient: /^(\-(webkit|o|ms|moz)\-)?(linear\-gradient)/i, 1086 repeatingLinearGradient: /^(\-(webkit|o|ms|moz)\-)?(repeating\-linear\-gradient)/i, 1087 radialGradient: /^(\-(webkit|o|ms|moz)\-)?(radial\-gradient)/i, 1088 repeatingRadialGradient: /^(\-(webkit|o|ms|moz)\-)?(repeating\-radial\-gradient)/i, 1089 sideOrCorner: /^to (left (top|bottom)|right (top|bottom)|left|right|top|bottom)/i, 1090 extentKeywords: /^(closest\-side|closest\-corner|farthest\-side|farthest\-corner|contain|cover)/,
1091 positionKeywords: /^(left|center|right|top|bottom)/i, 1092 pixelValue: /^(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))px/, 1093 percentageValue: /^(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))\%/, 1094 emValue: /^(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))em/, 1095 angleValue: /^(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))deg/, 1096 startCall: /^\(/, 1097 endCall: /^\)/, 1098 comma: /^,/, 1099 hexColor: /^\#([0-9a-fA-F]+)/, 1100 literalColor: /^([a-zA-Z]+)/, 1101 rgbColor: /^rgb/i, 1102 rgbaColor: /^rgba/i, 1103 number: /^(([0-9]*\.[0-9]+)|([0-9]+\.?))/ 1104 }; 1105 1106 var input = ''; 1107 1108 function error(msg) { 1109 var err = new Error(input + ': ' + msg); 1110 err.source = input; 1111 throw err; 1112 } 1113 1114 function getAST() { 1115 var ast = matchListDefinitions(); 1116 1117 if (input.length > 0) { 1118 error('Invalid input not EOF'); 1119 } 1120 1121 return ast; 1122 } 1123 1124 function matchListDefinitions() { 1125 return matchListing(matchDefinition); 1126 } 1127 1128 function matchDefinition() { 1129 return matchGradient( 1130 'linear-gradient', 1131 tokens.linearGradient, 1132 matchLinearOrientation) || 1133 1134 matchGradient( 1135 'repeating-linear-gradient', 1136 tokens.repeatingLinearGradient, 1137 matchLinearOrientation) || 1138 1139 matchGradient( 1140 'radial-gradient', 1141 tokens.radialGradient, 1142 matchListRadialOrientations) || 1143 1144 matchGradient( 1145 'repeating-radial-gradient', 1146 tokens.repeatingRadialGradient, 1147 matchListRadialOrientations); 1148 } 1149 1150 function matchGradient(gradientType, pattern, orientationMatcher) { 1151 return matchCall(pattern, function(captures) { 1152 1153 var orientation = orientationMatcher(); 1154 if (orientation) { 1155 if (!scan(tokens.comma)) { 1156 error('Missing comma before color stops'); 1157 } 1158 } 1159 1160 return { 1161 type: gradientType, 1162 orientation: orientation, 1163 colorStops: matchListing(matchColorStop) 1164 }; 1165 }); 1166 } 1167 1168 function matchCall(pattern, callback) { 1169 var captures = scan(pattern); 1170 1171 if (captures) { 1172 if (!scan(tokens.startCall)) { 1173 error('Missing ('); 1174 } 1175 1176 result = callback(captures); 1177 1178 if (!scan(tokens.endCall)) { 1179 error('Missing )'); 1180 } 1181 1182 return result; 1183 } 1184 } 1185 1186 function matchLinearOrientation() { 1187 return matchSideOrCorner() || 1188 matchAngle(); 1189 } 1190 1191 function matchSideOrCorner() { 1192 return match('directional', tokens.sideOrCorner, 1); 1193 } 1194 1195 function matchAngle() { 1196 return match('angular', tokens.angleValue, 1); 1197 } 1198 1199 function matchListRadialOrientations() { 1200 var radialOrientations, 1201 radialOrientation = matchRadialOrientation(), 1202 lookaheadCache; 1203 1204 if (radialOrientation) { 1205 radialOrientations = []; 1206 radialOrientations.push(radialOrientation); 1207 1208 lookaheadCache = input; 1209 if (scan(tokens.comma)) { 1210 radialOrientation = matchRadialOrientation(); 1211 if (radialOrientation) { 1212 radialOrientations.push(radialOrientation); 1213 } else { 1214 input = lookaheadCache; 1215 } 1216 } 1217 } 1218 1219 return radialOrientations; 1220 } 1221 1222 function matchRadialOrientation() { 1223 var radialType = matchCircle() || 1224 matchEllipse(); 1225 1226 if (radialType) { 1227 radialType.at = matchAtPosition(); 1228 } else { 1229 var defaultPosition = matchPositioning(); 1230 if (defaultPosition) { 1231 radialType = { 1232 type: 'default-radial', 1233 at: defaultPosition 1234 }; 1235 } 1236 } 1237 1238 return radialType; 1239 } 1240 1241 function matchCircle() { 1242 var circle = match('shape', /^(circle)/i, 0); 1243 1244 if (circle) { 1245 circle.style = matchLength() || matchExtentKeyword(); 1246 } 1247 1248 return circle; 1249 } 1250 1251 function matchEllipse() { 1252 var ellipse = match('shape', /^(ellipse)/i, 0); 1253 1254 if (ellipse) { 1255 ellipse.style = matchDistance() || matchExtentKeyword(); 1256 } 1257 1258 return ellipse; 1259 } 1260 1261 function matchExtentKeyword() { 1262 return match('extent-keyword', tokens.extentKeywords, 1); 1263 } 1264 1265 function matchAtPosition() { 1266 if (match('position', /^at/, 0)) { 1267 var positioning = matchPositioning(); 1268 1269 if (!positioning) { 1270 error('Missing positioning value'); 1271 } 1272 1273 return positioning; 1274 } 1275 } 1276 1277 function matchPositioning() { 1278 var location = matchCoordinates(); 1279 1280 if (location.x || location.y) { 1281 return { 1282 type: 'position', 1283 value: location 1284 }; 1285 } 1286 } 1287 1288 function matchCoordinates() { 1289 return { 1290 x: matchDistance(),
1291 y: matchDistance() 1292 }; 1293 } 1294 1295 function matchListing(matcher) { 1296 var captures = matcher(), 1297 result = []; 1298 1299 if (captures) { 1300 result.push(captures); 1301 while (scan(tokens.comma)) { 1302 captures = matcher(); 1303 if (captures) { 1304 result.push(captures); 1305 } else { 1306 error('One extra comma'); 1307 } 1308 } 1309 } 1310 1311 return result; 1312 } 1313 1314 function matchColorStop() { 1315 var color = matchColor(); 1316 1317 if (!color) { 1318 error('Expected color definition'); 1319 } 1320 1321 color.length = matchDistance(); 1322 return color; 1323 } 1324 1325 function matchColor() { 1326 return matchHexColor() || 1327 matchRGBAColor() || 1328 matchRGBColor() || 1329 matchLiteralColor(); 1330 } 1331 1332 function matchLiteralColor() { 1333 return match('literal', tokens.literalColor, 0); 1334 } 1335 1336 function matchHexColor() { 1337 return match('hex', tokens.hexColor, 1); 1338 } 1339 1340 function matchRGBColor() { 1341 return matchCall(tokens.rgbColor, function() { 1342 return { 1343 type: 'rgb', 1344 value: matchListing(matchNumber) 1345 }; 1346 }); 1347 } 1348 1349 function matchRGBAColor() { 1350 return matchCall(tokens.rgbaColor, function() { 1351 return { 1352 type: 'rgba', 1353 value: matchListing(matchNumber) 1354 }; 1355 }); 1356 } 1357 1358 function matchNumber() { 1359 return scan(tokens.number)[1]; 1360 } 1361 1362 function matchDistance() { 1363 return match('%', tokens.percentageValue, 1) || 1364 matchPositionKeyword() || 1365 matchLength(); 1366 } 1367 1368 function matchPositionKeyword() { 1369 return match('position-keyword', tokens.positionKeywords, 1); 1370 } 1371 1372 function matchLength() { 1373 return match('px', tokens.pixelValue, 1) || 1374 match('em', tokens.emValue, 1); 1375 } 1376 1377 function match(type, pattern, captureIndex) { 1378 var captures = scan(pattern); 1379 if (captures) { 1380 return { 1381 type: type, 1382 value: captures[captureIndex] 1383 }; 1384 } 1385 } 1386 1387 function scan(regexp) { 1388 var captures, 1389 blankCaptures; 1390 1391 blankCaptures = /^[\n\r\t\s]+/.exec(input); 1392 if (blankCaptures) { 1393 consume(blankCaptures[0].length); 1394 } 1395 1396 captures = regexp.exec(input); 1397 if (captures) { 1398 consume(captures[0].length); 1399 } 1400 1401 return captures; 1402 } 1403 1404 function consume(size) { 1405 input = input.substr(size); 1406 } 1407 1408 return function(code) { 1409 input = code.toString(); 1410 return getAST(); 1411 }; 1412})(); 1413 1414exports.parse = (GradientParser || {}).parse; 1415 1416 1417/***/ }), 1418 1419/***/ 3138: 1420/***/ ((module) => { 1421 1422module.exports = 1423/******/ (function(modules) { // webpackBootstrap 1424/******/ // The module cache 1425/******/ var installedModules = {}; 1426/******/ 1427/******/ // The require function 1428/******/ function __nested_webpack_require_187__(moduleId) { 1429/******/ 1430/******/ // Check if module is in cache 1431/******/ if(installedModules[moduleId]) 1432/******/ return installedModules[moduleId].exports; 1433/******/ 1434/******/ // Create a new module (and put it into the cache) 1435/******/ var module = installedModules[moduleId] = { 1436/******/ exports: {}, 1437/******/ id: moduleId, 1438/******/ loaded: false 1439/******/ }; 1440/******/ 1441/******/ // Execute the module function 1442/******/ modules[moduleId].call(module.exports, module, module.exports, __nested_webpack_require_187__); 1443/******/ 1444/******/ // Flag the module as loaded 1445/******/ module.loaded = true; 1446/******/ 1447/******/ // Return the exports of the module 1448/******/ return module.exports; 1449/******/ } 1450/******/ 1451/******/ 1452/******/ // expose the modules object (__webpack_modules__) 1453/******/ __nested_webpack_require_187__.m = modules; 1454/******/ 1455/******/ // expose the module cache 1456/******/ __nested_webpack_require_187__.c = installedModules; 1457/******/ 1458/******/ // __webpack_public_path__ 1459/******/ __nested_webpack_require_187__.p = ""; 1460/******/ 1461/******/ // Load entry module and return exports 1462/******/ return __nested_webpack_require_187__(0); 1463/******/ }) 1464/************************************************************************/ 1465/******/ ([ 1466/* 0 */ 1467/***/ (function(module, exports, __nested_webpack_require_1468__) { 1468 1469 module.exports = __nested_webpack_require_1468__(1); 1470 1471 1472/***/ }), 1473/* 1 */ 1474/***/ (function(module, exports, __nested_webpack_require_1587__) { 1475 1476 'use strict'; 1477 1478 Object.defineProperty(exports, "__esModule", { 1479 value: true 1480 }); 1481 1482 var _utils = __nested_webpack_require_1587__(2); 1483 1484 Object.defineProperty(exports, 'combineChunks', { 1485 enumerable: true, 1486 get: function get() { 1487 return _utils.combineChunks; 1488 } 1489 }); 1490 Object.defineProperty(exports, 'fillInChunks', { 1491 enumerable: true, 1492 get: function get() { 1493 return _utils.fillInChunks; 1494 } 1495 }); 1496 Object.defineProperty(exports, 'findAll', { 1497 enumerable: true, 1498 get: function get() { 1499 return _utils.findAll; 1500 } 1501 }); 1502 Object.defineProperty(exports, 'findChunks', { 1503 enumerable: true, 1504 get: function get() { 1505 return _utils.findChunks; 1506 } 1507 }); 1508 1509/***/ }), 1510/* 2 */
1511/***/ (function(module, exports) { 1512 1513 'use strict'; 1514 1515 Object.defineProperty(exports, "__esModule", { 1516 value: true 1517 }); 1518 1519 1520 /** 1521 * Creates an array of chunk objects representing both higlightable and non highlightable pieces of text that match each search word. 1522 * @return Array of "chunks" (where a Chunk is { start:number, end:number, highlight:boolean }) 1523 */ 1524 var findAll = exports.findAll = function findAll(_ref) { 1525 var autoEscape = _ref.autoEscape, 1526 _ref$caseSensitive = _ref.caseSensitive, 1527 caseSensitive = _ref$caseSensitive === undefined ? false : _ref$caseSensitive, 1528 _ref$findChunks = _ref.findChunks, 1529 findChunks = _ref$findChunks === undefined ? defaultFindChunks : _ref$findChunks, 1530 sanitize = _ref.sanitize, 1531 searchWords = _ref.searchWords, 1532 textToHighlight = _ref.textToHighlight; 1533 return fillInChunks({ 1534 chunksToHighlight: combineChunks({ 1535 chunks: findChunks({ 1536 autoEscape: autoEscape, 1537 caseSensitive: caseSensitive, 1538 sanitize: sanitize, 1539 searchWords: searchWords, 1540 textToHighlight: textToHighlight 1541 }) 1542 }), 1543 totalLength: textToHighlight ? textToHighlight.length : 0 1544 }); 1545 }; 1546 1547 /** 1548 * Takes an array of {start:number, end:number} objects and combines chunks that overlap into single chunks. 1549 * @return {start:number, end:number}[] 1550 */ 1551 1552 1553 var combineChunks = exports.combineChunks = function combineChunks(_ref2) { 1554 var chunks = _ref2.chunks; 1555 1556 chunks = chunks.sort(function (first, second) { 1557 return first.start - second.start; 1558 }).reduce(function (processedChunks, nextChunk) { 1559 // First chunk just goes straight in the array... 1560 if (processedChunks.length === 0) { 1561 return [nextChunk]; 1562 } else { 1563 // ... subsequent chunks get checked to see if they overlap... 1564 var prevChunk = processedChunks.pop(); 1565 if (nextChunk.start <= prevChunk.end) { 1566 // It may be the case that prevChunk completely surrounds nextChunk, so take the 1567 // largest of the end indeces. 1568 var endIndex = Math.max(prevChunk.end, nextChunk.end); 1569 processedChunks.push({ highlight: false, start: prevChunk.start, end: endIndex }); 1570 } else { 1571 processedChunks.push(prevChunk, nextChunk); 1572 } 1573 return processedChunks; 1574 } 1575 }, []); 1576 1577 return chunks; 1578 }; 1579 1580 /** 1581 * Examine text for any matches. 1582 * If we find matches, add them to the returned array as a "chunk" object ({start:number, end:number}). 1583 * @return {start:number, end:number}[] 1584 */ 1585 var defaultFindChunks = function defaultFindChunks(_ref3) { 1586 var autoEscape = _ref3.autoEscape, 1587 caseSensitive = _ref3.caseSensitive, 1588 _ref3$sanitize = _ref3.sanitize, 1589 sanitize = _ref3$sanitize === undefined ? defaultSanitize : _ref3$sanitize, 1590 searchWords = _ref3.searchWords, 1591 textToHighlight = _ref3.textToHighlight; 1592 1593 textToHighlight = sanitize(textToHighlight); 1594 1595 return searchWords.filter(function (searchWord) { 1596 return searchWord; 1597 }) // Remove empty words 1598 .reduce(function (chunks, searchWord) { 1599 searchWord = sanitize(searchWord); 1600 1601 if (autoEscape) { 1602 searchWord = escapeRegExpFn(searchWord); 1603 } 1604 1605 var regex = new RegExp(searchWord, caseSensitive ? 'g' : 'gi'); 1606 1607 var match = void 0; 1608 while (match = regex.exec(textToHighlight)) { 1609 var _start = match.index; 1610 var _end = regex.lastIndex; 1611 // We do not return zero-length matches 1612 if (_end > _start) { 1613 chunks.push({ highlight: false, start: _start, end: _end }); 1614 } 1615 1616 // Prevent browsers like Firefox from getting stuck in an infinite loop 1617 // See http://www.regexguru.com/2008/04/watch-out-for-zero-length-matches/ 1618 if (match.index === regex.lastIndex) { 1619 regex.lastIndex++; 1620 } 1621 } 1622 1623 return chunks; 1624 }, []); 1625 }; 1626 // Allow the findChunks to be overridden in findAll, 1627 // but for backwards compatibility we export as the old name 1628 exports.findChunks = defaultFindChunks; 1629 1630 /** 1631 * Given a set of chunks to highlight, create an additional set of chunks 1632 * to represent the bits of text between the highlighted text. 1633 * @param chunksToHighlight {start:number, end:number}[] 1634 * @param totalLength number 1635 * @return {start:number, end:number, highlight:boolean}[] 1636 */ 1637 1638 var fillInChunks = exports.fillInChunks = function fillInChunks(_ref4) { 1639 var chunksToHighlight = _ref4.chunksToHighlight, 1640 totalLength = _ref4.totalLength; 1641 1642 var allChunks = []; 1643 var append = function append(start, end, highlight) { 1644 if (end - start > 0) { 1645 allChunks.push({ 1646 start: start, 1647 end: end, 1648 highlight: highlight 1649 }); 1650 } 1651 }; 1652 1653 if (chunksToHighlight.length === 0) { 1654 append(0, totalLength, false); 1655 } else { 1656 var lastIndex = 0; 1657 chunksToHighlight.forEach(function (chunk) { 1658 append(lastIndex, chunk.start, false); 1659 append(chunk.start, chunk.end, true); 1660 lastIndex = chunk.end; 1661 }); 1662 append(lastIndex, totalLength, false); 1663 } 1664 return allChunks; 1665 }; 1666 1667 function defaultSanitize(string) { 1668 return string; 1669 } 1670 1671 function escapeRegExpFn(string) { 1672 return string.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, '\\$&'); 1673 } 1674 1675/***/ }) 1676/******/ ]); 1677 1678 1679/***/ }), 1680 1681/***/ 1281: 1682/***/ ((module, __unused_webpack_exports, __webpack_require__) => { 1683 1684"use strict"; 1685 1686 1687var reactIs = __webpack_require__(338); 1688 1689/** 1690 * Copyright 2015, Yahoo! Inc. 1691 * Copyrights licensed under the New BSD License. See the accompanying LICENSE file for terms. 1692 */ 1693var REACT_STATICS = { 1694 childContextTypes: true, 1695 contextType: true, 1696 contextTypes: true, 1697 defaultProps: true, 1698 displayName: true, 1699 getDefaultProps: true, 1700 getDerivedStateFromError: true, 1701 getDerivedStateFromProps: true, 1702 mixins: true, 1703 propTypes: true,
vendor: 4,890 bytes, lines 1704-1903
1704 type: true 1705}; 1706var KNOWN_STATICS = { 1707 name: true, 1708 length: true, 1709 prototype: true, 1710 caller: true, 1711 callee: true, 1712 arguments: true, 1713 arity: true 1714}; 1715var FORWARD_REF_STATICS = { 1716 '$$typeof': true, 1717 render: true, 1718 defaultProps: true, 1719 displayName: true, 1720 propTypes: true 1721}; 1722var MEMO_STATICS = { 1723 '$$typeof': true, 1724 compare: true, 1725 defaultProps: true, 1726 displayName: true, 1727 propTypes: true, 1728 type: true 1729}; 1730var TYPE_STATICS = {}; 1731TYPE_STATICS[reactIs.ForwardRef] = FORWARD_REF_STATICS; 1732TYPE_STATICS[reactIs.Memo] = MEMO_STATICS; 1733 1734function getStatics(component) { 1735 // React v16.11 and below 1736 if (reactIs.isMemo(component)) { 1737 return MEMO_STATICS; 1738 } // React v16.12 and above 1739 1740 1741 return TYPE_STATICS[component['$$typeof']] || REACT_STATICS; 1742} 1743 1744var defineProperty = Object.defineProperty; 1745var getOwnPropertyNames = Object.getOwnPropertyNames; 1746var getOwnPropertySymbols = Object.getOwnPropertySymbols; 1747var getOwnPropertyDescriptor = Object.getOwnPropertyDescriptor; 1748var getPrototypeOf = Object.getPrototypeOf; 1749var objectPrototype = Object.prototype; 1750function hoistNonReactStatics(targetComponent, sourceComponent, blacklist) { 1751 if (typeof sourceComponent !== 'string') { 1752 // don't hoist over string (html) components 1753 if (objectPrototype) { 1754 var inheritedComponent = getPrototypeOf(sourceComponent); 1755 1756 if (inheritedComponent && inheritedComponent !== objectPrototype) { 1757 hoistNonReactStatics(targetComponent, inheritedComponent, blacklist); 1758 } 1759 } 1760 1761 var keys = getOwnPropertyNames(sourceComponent); 1762 1763 if (getOwnPropertySymbols) { 1764 keys = keys.concat(getOwnPropertySymbols(sourceComponent)); 1765 } 1766 1767 var targetStatics = getStatics(targetComponent); 1768 var sourceStatics = getStatics(sourceComponent); 1769 1770 for (var i = 0; i < keys.length; ++i) { 1771 var key = keys[i]; 1772 1773 if (!KNOWN_STATICS[key] && !(blacklist && blacklist[key]) && !(sourceStatics && sourceStatics[key]) && !(targetStatics && targetStatics[key])) { 1774 var descriptor = getOwnPropertyDescriptor(sourceComponent, key); 1775 1776 try { 1777 // Avoid failures from read-only properties 1778 defineProperty(targetComponent, key, descriptor); 1779 } catch (e) {} 1780 } 1781 } 1782 } 1783 1784 return targetComponent; 1785} 1786 1787module.exports = hoistNonReactStatics; 1788 1789 1790/***/ }), 1791 1792/***/ 5372: 1793/***/ ((module, __unused_webpack_exports, __webpack_require__) => { 1794 1795"use strict"; 1796/** 1797 * Copyright (c) 2013-present, Facebook, Inc. 1798 * 1799 * This source code is licensed under the MIT license found in the 1800 * LICENSE file in the root directory of this source tree. 1801 */ 1802 1803 1804 1805var ReactPropTypesSecret = __webpack_require__(9567); 1806 1807function emptyFunction() {} 1808function emptyFunctionWithReset() {} 1809emptyFunctionWithReset.resetWarningCache = emptyFunction; 1810 1811module.exports = function() { 1812 function shim(props, propName, componentName, location, propFullName, secret) { 1813 if (secret === ReactPropTypesSecret) { 1814 // It is still safe when called from React. 1815 return; 1816 } 1817 var err = new Error( 1818 'Calling PropTypes validators directly is not supported by the `prop-types` package. ' + 1819 'Use PropTypes.checkPropTypes() to call them. ' + 1820 'Read more at http://fb.me/use-check-prop-types' 1821 ); 1822 err.name = 'Invariant Violation'; 1823 throw err; 1824 }; 1825 shim.isRequired = shim; 1826 function getShim() { 1827 return shim; 1828 }; 1829 // Important! 1830 // Keep this list in sync with production version in `./factoryWithTypeCheckers.js`. 1831 var ReactPropTypes = { 1832 array: shim, 1833 bool: shim, 1834 func: shim, 1835 number: shim, 1836 object: shim, 1837 string: shim, 1838 symbol: shim, 1839 1840 any: shim, 1841 arrayOf: getShim, 1842 element: shim, 1843 elementType: shim, 1844 instanceOf: getShim, 1845 node: shim, 1846 objectOf: getShim, 1847 oneOf: getShim, 1848 oneOfType: getShim, 1849 shape: getShim, 1850 exact: getShim, 1851 1852 checkPropTypes: emptyFunctionWithReset, 1853 resetWarningCache: emptyFunction 1854 }; 1855 1856 ReactPropTypes.PropTypes = ReactPropTypes; 1857 1858 return ReactPropTypes; 1859}; 1860 1861 1862/***/ }), 1863 1864/***/ 2652: 1865/***/ ((module, __unused_webpack_exports, __webpack_require__) => { 1866 1867/** 1868 * Copyright (c) 2013-present, Facebook, Inc. 1869 * 1870 * This source code is licensed under the MIT license found in the 1871 * LICENSE file in the root directory of this source tree. 1872 */ 1873 1874if (false) { var throwOnDirectAccess, ReactIs; } else { 1875 // By explicitly using `prop-types` you are opting into new production behavior. 1876 // http://fb.me/prop-types-in-prod 1877 module.exports = __webpack_require__(5372)(); 1878} 1879 1880 1881/***/ }), 1882 1883/***/ 9567: 1884/***/ ((module) => { 1885 1886"use strict"; 1887/** 1888 * Copyright (c) 2013-present, Facebook, Inc. 1889 * 1890 * This source code is licensed under the MIT license found in the 1891 * LICENSE file in the root directory of this source tree. 1892 */ 1893 1894 1895 1896var ReactPropTypesSecret = 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED'; 1897 1898module.exports = ReactPropTypesSecret; 1899 1900 1901/***/ }), 1902 1903/***/ 4821:
vendor: 4,341 bytes, lines 1904-2002
1904/***/ ((__unused_webpack_module, exports) => { 1905 1906"use strict"; 1907/** @license React v16.13.1 1908 * react-is.production.min.js 1909 * 1910 * Copyright (c) Facebook, Inc. and its affiliates. 1911 * 1912 * This source code is licensed under the MIT license found in the 1913 * LICENSE file in the root directory of this source tree. 1914 */ 1915 1916var 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? 1917Symbol.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; 1918function 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; 1919exports.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}; 1920exports.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}; 1921exports.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; 1922 1923 1924/***/ }), 1925 1926/***/ 338: 1927/***/ ((module, __unused_webpack_exports, __webpack_require__) => { 1928 1929"use strict"; 1930 1931 1932if (true) { 1933 module.exports = __webpack_require__(4821); 1934} else {} 1935 1936 1937/***/ }), 1938 1939/***/ 2455: 1940/***/ ((__unused_webpack_module, exports, __webpack_require__) => { 1941 1942"use strict"; 1943/** 1944 * @license React 1945 * react-jsx-runtime.production.min.js 1946 * 1947 * Copyright (c) Facebook, Inc. and its affiliates. 1948 * 1949 * This source code is licensed under the MIT license found in the 1950 * LICENSE file in the root directory of this source tree. 1951 */ 1952var f=__webpack_require__(9196),k=Symbol.for("react.element"),l=Symbol.for("react.fragment"),m=Object.prototype.hasOwnProperty,n=f.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,p={key:!0,ref:!0,__self:!0,__source:!0}; 1953function q(c,a,g){var b,d={},e=null,h=null;void 0!==g&&(e=""+g);void 0!==a.key&&(e=""+a.key);void 0!==a.ref&&(h=a.ref);for(b in a)m.call(a,b)&&!p.hasOwnProperty(b)&&(d[b]=a[b]);if(c&&c.defaultProps)for(b in a=c.defaultProps,a)void 0===d[b]&&(d[b]=a[b]);return{$$typeof:k,type:c,key:e,ref:h,props:d,_owner:n.current}}exports.Fragment=l;exports.jsx=q;exports.jsxs=q; 1954 1955 1956/***/ }), 1957 1958/***/ 7557: 1959/***/ ((module, __unused_webpack_exports, __webpack_require__) => { 1960 1961"use strict"; 1962 1963 1964if (true) { 1965 module.exports = __webpack_require__(2455); 1966} else {} 1967 1968 1969/***/ }), 1970 1971/***/ 4793: 1972/***/ ((module) => { 1973 1974var characterMap = { 1975 "Ã": "A", 1976 "Ã": "A", 1977 "Ã": "A", 1978 "Ã": "A", 1979 "Ã": "A", 1980 "à ": "A", 1981 "Ấ": "A", 1982 "Ắ": "A", 1983 "Ẳ": "A", 1984 "Ẵ": "A", 1985 "Ặ": "A", 1986 "Ã": "AE", 1987 "Ầ": "A", 1988 "Ằ": "A", 1989 "È": "A", 1990 "Ả": "A", 1991 "Ạ": "A", 1992 "Ẩ": "A", 1993 "Ẫ": "A", 1994 "Ậ": "A", 1995 "Ã": "C", 1996 "á¸": "C", 1997 "Ã": "E", 1998 "Ã": "E", 1999 "Ã": "E", 2000 "Ã": "E", 2001 "Ế": "E", 2002 "á¸": "E",
2003 "á»": "E", 2004 "á¸": "E", 2005 "á¸": "E", 2006 "È": "E", 2007 "Ẻ": "E", 2008 "Ẽ": "E", 2009 "Ẹ": "E", 2010 "á»": "E", 2011 "á»": "E", 2012 "á»": "E", 2013 "Ã": "I", 2014 "Ã": "I", 2015 "Ã": "I", 2016 "Ã": "I", 2017 "Ḯ": "I", 2018 "È": "I", 2019 "á»": "I", 2020 "á»": "I", 2021 "Ã": "D", 2022 "Ã": "N", 2023 "Ã": "O", 2024 "Ã": "O", 2025 "Ã": "O", 2026 "Ã": "O", 2027 "Ã": "O", 2028 "Ã": "O", 2029 "á»": "O", 2030 "á¹": "O", 2031 "á¹": "O", 2032 "È": "O", 2033 "á»": "O", 2034 "á»": "O", 2035 "á»": "O", 2036 "á»": "O", 2037 "á»": "O", 2038 "á»": "O", 2039 "á»": "O", 2040 "á» ": "O", 2041 "á»": "O", 2042 "Ợ": "O", 2043 "Ã": "U", 2044 "Ã": "U", 2045 "Ã": "U", 2046 "Ã": "U", 2047 "Ủ": "U", 2048 "Ụ": "U", 2049 "Ử": "U", 2050 "á»®": "U", 2051 "á»°": "U", 2052 "Ã": "Y", 2053 "à ": "a", 2054 "á": "a", 2055 "â": "a", 2056 "ã": "a", 2057 "ä": "a", 2058 "Ã¥": "a", 2059 "ấ": "a", 2060 "ắ": "a", 2061 "ẳ": "a", 2062 "ẵ": "a", 2063 "ặ": "a", 2064 "æ": "ae", 2065 "ầ": "a", 2066 "ằ": "a", 2067 "È": "a", 2068 "ả": "a", 2069 "ạ": "a", 2070 "ẩ": "a", 2071 "ẫ": "a", 2072 "áº": "a", 2073 "ç": "c", 2074 "á¸": "c", 2075 "è": "e", 2076 "é": "e", 2077 "ê": "e", 2078 "ë": "e", 2079 "ế": "e", 2080 "á¸": "e", 2081 "á»": "e", 2082 "á¸": "e", 2083 "á¸": "e", 2084 "È": "e", 2085 "ẻ": "e", 2086 "ẽ": "e", 2087 "ẹ": "e", 2088 "á»": "e", 2089 "á» ": "e", 2090 "á»": "e", 2091 "ì": "i", 2092 "Ã": "i", 2093 "î": "i", 2094 "ï": "i", 2095 "ḯ": "i", 2096 "È": "i", 2097 "á»": "i", 2098 "á»": "i", 2099 "ð": "d", 2100 "ñ": "n", 2101 "ò": "o", 2102 "ó": "o", 2103 "ô": "o", 2104 "õ": "o", 2105 "ö": "o", 2106 "ø": "o", 2107 "á»": "o", 2108 "á¹": "o", 2109 "á¹": "o", 2110 "È": "o", 2111 "á»": "o", 2112 "á»": "o", 2113 "á»": "o", 2114 "á»": "o", 2115 "á»": "o", 2116 "á»": "o", 2117 "á»": "o", 2118 "ỡ": "o", 2119 "á»": "o", 2120 "ợ": "o", 2121 "ù": "u", 2122 "ú": "u", 2123 "û": "u", 2124 "ü": "u", 2125 "á»§": "u", 2126 "ụ": "u", 2127 "á»": "u", 2128 "ữ": "u", 2129 "á»±": "u", 2130 "ý": "y", 2131 "ÿ": "y", 2132 "Ä": "A", 2133 "Ä": "a", 2134 "Ä": "A", 2135 "Ä": "a", 2136 "Ä": "A", 2137 "Ä ": "a", 2138 "Ä": "C", 2139 "Ä": "c", 2140 "Ä": "C", 2141 "Ä": "c", 2142 "Ä": "C", 2143 "Ä": "c", 2144 "Ä": "C", 2145 "Ä": "c", 2146 "CÌ": "C", 2147 "cÌ": "c", 2148 "Ä": "D", 2149 "Ä": "d", 2150 "Ä": "D", 2151 "Ä": "d", 2152 "Ä": "E", 2153 "Ä": "e", 2154 "Ä": "E", 2155 "Ä": "e", 2156 "Ä": "E", 2157 "Ä": "e", 2158 "Ä": "E", 2159 "Ä": "e", 2160 "Ä": "E", 2161 "Ä": "e", 2162 "Ä": "G", 2163 "Ç´": "G", 2164 "Ä": "g", 2165 "ǵ": "g", 2166 "Ä": "G", 2167 "Ä": "g", 2168 "Ä ": "G", 2169 "Ä¡": "g", 2170 "Ä¢": "G", 2171 "Ä£": "g", 2172 "Ĥ": "H", 2173 "Ä¥": "h", 2174 "Ħ": "H", 2175 "ħ": "h", 2176 "Ḫ": "H", 2177 "ḫ": "h", 2178 "Ĩ": "I", 2179 "Ä©": "i", 2180 "Ī": "I", 2181 "Ä«": "i", 2182 "Ĭ": "I", 2183 "Ä": "i", 2184 "Ä®": "I", 2185 "į": "i", 2186 "İ": "I", 2187 "ı": "i", 2188 "IJ": "IJ", 2189 "ij": "ij", 2190 "Ä´": "J", 2191 "ĵ": "j", 2192 "Ķ": "K", 2193 "Ä·": "k", 2194 "Ḱ": "K", 2195 "ḱ": "k", 2196 "KÌ": "K", 2197 "kÌ": "k", 2198 "Ĺ": "L", 2199 "ĺ": "l", 2200 "Ä»": "L", 2201 "ļ": "l", 2202 "Ľ": "L", 2203 "ľ": "l", 2204 "Ä¿": "L", 2205 "Å": "l", 2206 "Å": "l", 2207 "Å": "l", 2208 "Ḿ": "M", 2209 "ḿ": "m", 2210 "MÌ": "M", 2211 "mÌ": "m", 2212 "Å": "N", 2213 "Å": "n", 2214 "Å ": "N", 2215 "Å": "n", 2216 "Å": "N", 2217 "Å": "n", 2218 "Å": "n", 2219 "NÌ": "N", 2220 "nÌ": "n", 2221 "Å": "O", 2222 "Å": "o", 2223 "Å": "O", 2224 "Å": "o", 2225 "Å": "O", 2226 "Å": "o", 2227 "Å": "OE", 2228 "Å": "oe", 2229 "PÌ": "P", 2230 "pÌ": "p", 2231 "Å": "R", 2232 "Å": "r", 2233 "Å": "R", 2234 "Å": "r", 2235 "Å": "R", 2236 "Å": "r", 2237 "RÌ": "R", 2238 "rÌ": "r", 2239 "È": "R", 2240 "È": "r", 2241 "Å": "S", 2242 "Å": "s", 2243 "Å": "S", 2244 "Å": "s", 2245 "Å": "S", 2246 "È": "S", 2247 "È": "s", 2248 "Å": "s", 2249 "Å ": "S", 2250 "Å¡": "s", 2251 "Å¢": "T", 2252 "Å£": "t", 2253 "È": "t", 2254 "È": "T", 2255 "Ť": "T", 2256 "Å¥": "t", 2257 "Ŧ": "T", 2258 "ŧ": "t", 2259 "TÌ": "T", 2260 "tÌ": "t", 2261 "Ũ": "U", 2262 "Å©": "u", 2263 "Ū": "U", 2264 "Å«": "u", 2265 "Ŭ": "U", 2266 "Å": "u", 2267 "Å®": "U", 2268 "ů": "u", 2269 "Ű": "U", 2270 "ű": "u", 2271 "Ų": "U", 2272 "ų": "u", 2273 "È": "U", 2274 "È": "u", 2275 "VÌ": "V", 2276 "vÌ": "v", 2277 "Å´": "W", 2278 "ŵ": "w", 2279 "áº": "W", 2280 "áº": "w", 2281 "XÌ": "X", 2282 "xÌ": "x", 2283 "Ŷ": "Y", 2284 "Å·": "y", 2285 "Ÿ": "Y", 2286 "YÌ": "Y", 2287 "yÌ": "y", 2288 "Ź": "Z", 2289 "ź": "z", 2290 "Å»": "Z", 2291 "ż": "z", 2292 "Ž": "Z", 2293 "ž": "z", 2294 "Å¿": "s", 2295 "Æ": "f", 2296 "Æ ": "O", 2297 "Æ¡": "o", 2298 "Ư": "U", 2299 "ư": "u", 2300 "Ç": "A", 2301 "Ç": "a", 2302 "Ç": "I", 2303 "Ç": "i", 2304 "Ç": "O", 2305 "Ç": "o", 2306 "Ç": "U", 2307 "Ç": "u", 2308 "Ç": "U", 2309 "Ç": "u", 2310 "Ç": "U", 2311 "Ç": "u", 2312 "Ç": "U", 2313 "Ç": "u", 2314 "Ç": "U", 2315 "Ç": "u", 2316 "Ứ": "U", 2317 "ứ": "u", 2318 "Ṹ": "U", 2319 "á¹¹": "u", 2320 "Ǻ": "A", 2321 "Ç»": "a", 2322 "Ǽ": "AE", 2323 "ǽ": "ae", 2324 "Ǿ": "O", 2325 "Ç¿": "o", 2326 "Ã": "TH", 2327 "þ": "th", 2328 "á¹": "P", 2329 "á¹": "p", 2330 "Ṥ": "S", 2331 "á¹¥": "s", 2332 "XÌ": "X", 2333 "xÌ": "x", 2334 "Ð": "Ð", 2335 "Ñ": "г", 2336 "Ð": "Ð", 2337 "Ñ": "к", 2338 "AÌ": "A", 2339 "aÌ": "a", 2340 "EÌ": "E", 2341 "eÌ": "e", 2342 "IÌ": "I", 2343 "iÌ": "i", 2344 "Ǹ": "N", 2345 "ǹ": "n", 2346 "á»": "O", 2347 "á»": "o", 2348 "á¹": "O", 2349 "á¹": "o", 2350 "Ừ": "U", 2351 "ừ": "u", 2352 "áº": "W", 2353 "áº": "w", 2354 "Ỳ": "Y", 2355 "ỳ": "y", 2356 "È": "A", 2357 "È": "a", 2358 "È": "E", 2359 "È ": "e", 2360 "È": "I", 2361 "È": "i", 2362 "È": "O", 2363 "È": "o", 2364 "È": "R", 2365 "È": "r", 2366 "È": "U", 2367 "È": "u", 2368 "BÌ": "B", 2369 "bÌ": "b", 2370 "ÄÌ£": "C", 2371 "ÄÌ£": "c", 2372 "ÃÌ": "E", 2373 "êÌ": "e", 2374 "FÌ": "F", 2375 "fÌ": "f", 2376 "Ǧ": "G", 2377 "ǧ": "g", 2378 "È": "H", 2379 "È": "h", 2380 "JÌ": "J", 2381 "ǰ": "j", 2382 "Ǩ": "K", 2383 "Ç©": "k", 2384 "MÌ": "M", 2385 "mÌ": "m", 2386 "PÌ": "P", 2387 "pÌ": "p", 2388 "QÌ": "Q", 2389 "qÌ": "q", 2390 "ÅÌ©": "R", 2391 "ÅÌ©": "r", 2392 "Ṧ": "S", 2393 "á¹§": "s", 2394 "VÌ": "V", 2395 "vÌ": "v", 2396 "WÌ": "W", 2397 "wÌ": "w", 2398 "XÌ": "X", 2399 "xÌ": "x", 2400 "YÌ": "Y", 2401 "yÌ": "y", 2402 "A̧": "A", 2403 "a̧": "a", 2404 "B̧": "B", 2405 "b̧": "b", 2406 "á¸": "D", 2407 "á¸": "d", 2408 "Ȩ": "E", 2409 "È©": "e", 2410 "ÆÌ§": "E", 2411 "Ȩ́": "e", 2412 "Ḩ": "H", 2413 "ḩ": "h", 2414 "I̧": "I", 2415 "i̧": "i", 2416 "ÆÌ§": "I", 2417 "ɨ̧": "i", 2418 "M̧": "M", 2419 "m̧": "m", 2420 "O̧": "O", 2421 "o̧": "o", 2422 "Q̧": "Q", 2423 "q̧": "q", 2424 "U̧": "U", 2425 "u̧": "u", 2426 "X̧": "X", 2427 "x̧": "x", 2428 "Z̧": "Z", 2429 "z̧": "z", 2430 "й":"и", 2431 "Ð":"Ð", 2432 "Ñ":"е", 2433 "Ð":"Ð", 2434}; 2435 2436var chars = Object.keys(characterMap).join('|'); 2437var allAccents = new RegExp(chars, 'g'); 2438var firstAccent = new RegExp(chars, ''); 2439 2440function matcher(match) { 2441 return characterMap[match]; 2442} 2443 2444var removeAccents = function(string) { 2445 return string.replace(allAccents, matcher); 2446}; 2447 2448var hasAccents = function(string) { 2449 return !!string.match(firstAccent); 2450}; 2451 2452module.exports = removeAccents; 2453module.exports.has = hasAccents; 2454module.exports.remove = removeAccents; 2455 2456 2457/***/ }), 2458 2459/***/ 7755: 2460/***/ ((__unused_webpack_module, exports, __webpack_require__) => { 2461 2462"use strict"; 2463/** 2464 * @license React 2465 * use-sync-external-store-shim.production.min.js 2466 * 2467 * Copyright (c) Facebook, Inc. and its affiliates. 2468 * 2469 * This source code is licensed under the MIT license found in the 2470 * LICENSE file in the root directory of this source tree. 2471 */ 2472var e=__webpack_require__(9196);function h(a,b){return a===b&&(0!==a||1/a===1/b)||a!==a&&b!==b}var k="function"===typeof Object.is?Object.is:h,l=e.useState,m=e.useEffect,n=e.useLayoutEffect,p=e.useDebugValue;function q(a,b){var d=b(),f=l({inst:{value:d,getSnapshot:b}}),c=f[0].inst,g=f[1];n(function(){c.value=d;c.getSnapshot=b;r(c)&&g({inst:c})},[a,d,b]);m(function(){r(c)&&g({inst:c});return a(function(){r(c)&&g({inst:c})})},[a]);p(d);return d} 2473function r(a){var b=a.getSnapshot;a=a.value;try{var d=b();return!k(a,d)}catch(f){return!0}}function t(a,b){return b()}var u="undefined"===typeof window||"undefined"===typeof window.document||"undefined"===typeof window.document.createElement?t:q;exports.useSyncExternalStore=void 0!==e.useSyncExternalStore?e.useSyncExternalStore:u; 2474 2475 2476/***/ }), 2477 2478/***/ 635: 2479/***/ ((module, __unused_webpack_exports, __webpack_require__) => { 2480 2481"use strict"; 2482 2483 2484if (true) { 2485 module.exports = __webpack_require__(7755); 2486} else {} 2487 2488 2489/***/ }), 2490 2491/***/ 9196: 2492/***/ ((module) => { 2493 2494"use strict"; 2495module.exports = window["React"]; 2496 2497/***/ }) 2498 2499/******/ }); 2500/************************************************************************/ 2501/******/ // The module cache 2502/******/ var __webpack_module_cache__ = {}; 2503/******/ 2504/******/ // The require function 2505/******/ function __webpack_require__(moduleId) { 2506/******/ // Check if module is in cache 2507/******/ var cachedModule = __webpack_module_cache__[moduleId]; 2508/******/ if (cachedModule !== undefined) { 2509/******/ return cachedModule.exports; 2510/******/ } 2511/******/ // Create a new module (and put it into the cache) 2512/******/ var module = __webpack_module_cache__[moduleId] = { 2513/******/ // no module.id needed 2514/******/ // no module.loaded needed 2515/******/ exports: {} 2516/******/ }; 2517/******/ 2518/******/ // Execute the module function 2519/******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__); 2520/******/ 2521/******/ // Return the exports of the module 2522/******/ return module.exports; 2523/******/ } 2524/******/ 2525/************************************************************************/ 2526/******/ /* webpack/runtime/compat get default export */ 2527/******/ (() => { 2528/******/ // getDefaultExport function for compatibility with non-harmony modules 2529/******/ __webpack_require__.n = (module) => {
vendor: 3,281 bytes, lines 2530-2605
2530/******/ var getter = module && module.__esModule ? 2531/******/ () => (module['default']) : 2532/******/ () => (module); 2533/******/ __webpack_require__.d(getter, { a: getter }); 2534/******/ return getter; 2535/******/ }; 2536/******/ })(); 2537/******/ 2538/******/ /* webpack/runtime/create fake namespace object */ 2539/******/ (() => { 2540/******/ var getProto = Object.getPrototypeOf ? (obj) => (Object.getPrototypeOf(obj)) : (obj) => (obj.__proto__); 2541/******/ var leafPrototypes; 2542/******/ // create a fake namespace object 2543/******/ // mode & 1: value is a module id, require it 2544/******/ // mode & 2: merge all properties of value into the ns 2545/******/ // mode & 4: return value when already ns object 2546/******/ // mode & 16: return value when it's Promise-like 2547/******/ // mode & 8|1: behave like require 2548/******/ __webpack_require__.t = function(value, mode) { 2549/******/ if(mode & 1) value = this(value); 2550/******/ if(mode & 8) return value; 2551/******/ if(typeof value === 'object' && value) { 2552/******/ if((mode & 4) && value.__esModule) return value; 2553/******/ if((mode & 16) && typeof value.then === 'function') return value; 2554/******/ } 2555/******/ var ns = Object.create(null); 2556/******/ __webpack_require__.r(ns); 2557/******/ var def = {}; 2558/******/ leafPrototypes = leafPrototypes || [null, getProto({}), getProto([]), getProto(getProto)]; 2559/******/ for(var current = mode & 2 && value; typeof current == 'object' && !~leafPrototypes.indexOf(current); current = getProto(current)) { 2560/******/ Object.getOwnPropertyNames(current).forEach((key) => (def[key] = () => (value[key]))); 2561/******/ } 2562/******/ def['default'] = () => (value); 2563/******/ __webpack_require__.d(ns, def); 2564/******/ return ns; 2565/******/ }; 2566/******/ })(); 2567/******/ 2568/******/ /* webpack/runtime/define property getters */ 2569/******/ (() => { 2570/******/ // define getter functions for harmony exports 2571/******/ __webpack_require__.d = (exports, definition) => { 2572/******/ for(var key in definition) { 2573/******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) { 2574/******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] }); 2575/******/ } 2576/******/ } 2577/******/ }; 2578/******/ })(); 2579/******/ 2580/******/ /* webpack/runtime/hasOwnProperty shorthand */ 2581/******/ (() => { 2582/******/ __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop)) 2583/******/ })(); 2584/******/ 2585/******/ /* webpack/runtime/make namespace object */ 2586/******/ (() => { 2587/******/ // define __esModule on exports 2588/******/ __webpack_require__.r = (exports) => { 2589/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) { 2590/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' }); 2591/******/ } 2592/******/ Object.defineProperty(exports, '__esModule', { value: true }); 2593/******/ }; 2594/******/ })(); 2595/******/ 2596/******/ /* webpack/runtime/nonce */ 2597/******/ (() => { 2598/******/ __webpack_require__.nc = undefined; 2599/******/ })(); 2600/******/ 2601/************************************************************************/ 2602var __webpack_exports__ = {}; 2603// This entry need to be wrapped in an IIFE because it need to be in strict mode. 2604(() => { 2605"use strict";
2606// ESM COMPAT FLAG 2607__webpack_require__.r(__webpack_exports__); 2608 2609// EXPORTS 2610__webpack_require__.d(__webpack_exports__, { 2611 "AnglePickerControl": () => (/* reexport */ angle_picker_control), 2612 "Animate": () => (/* reexport */ animate), 2613 "Autocomplete": () => (/* reexport */ Autocomplete), 2614 "BaseControl": () => (/* reexport */ base_control), 2615 "BlockQuotation": () => (/* reexport */ external_wp_primitives_namespaceObject.BlockQuotation), 2616 "Button": () => (/* reexport */ build_module_button), 2617 "ButtonGroup": () => (/* reexport */ button_group), 2618 "Card": () => (/* reexport */ card_component), 2619 "CardBody": () => (/* reexport */ card_body_component), 2620 "CardDivider": () => (/* reexport */ card_divider_component), 2621 "CardFooter": () => (/* reexport */ card_footer_component), 2622 "CardHeader": () => (/* reexport */ card_header_component), 2623 "CardMedia": () => (/* reexport */ card_media_component), 2624 "CheckboxControl": () => (/* reexport */ checkbox_control), 2625 "Circle": () => (/* reexport */ external_wp_primitives_namespaceObject.Circle), 2626 "ClipboardButton": () => (/* reexport */ ClipboardButton), 2627 "ColorIndicator": () => (/* reexport */ color_indicator), 2628 "ColorPalette": () => (/* reexport */ color_palette), 2629 "ColorPicker": () => (/* reexport */ LegacyAdapter), 2630 "ComboboxControl": () => (/* reexport */ combobox_control), 2631 "CustomGradientPicker": () => (/* reexport */ custom_gradient_picker), 2632 "CustomSelectControl": () => (/* reexport */ StableCustomSelectControl), 2633 "Dashicon": () => (/* reexport */ dashicon), 2634 "DatePicker": () => (/* reexport */ date), 2635 "DateTimePicker": () => (/* reexport */ build_module_date_time), 2636 "Disabled": () => (/* reexport */ disabled), 2637 "Draggable": () => (/* reexport */ draggable), 2638 "DropZone": () => (/* reexport */ drop_zone), 2639 "DropZoneProvider": () => (/* reexport */ DropZoneProvider), 2640 "Dropdown": () => (/* reexport */ dropdown), 2641 "DropdownMenu": () => (/* reexport */ dropdown_menu), 2642 "DuotonePicker": () => (/* reexport */ duotone_picker), 2643 "DuotoneSwatch": () => (/* reexport */ duotone_swatch), 2644 "ExternalLink": () => (/* reexport */ external_link), 2645 "Fill": () => (/* reexport */ slot_fill_Fill), 2646 "Flex": () => (/* reexport */ flex_component), 2647 "FlexBlock": () => (/* reexport */ flex_block_component), 2648 "FlexItem": () => (/* reexport */ flex_item_component), 2649 "FocalPointPicker": () => (/* reexport */ focal_point_picker), 2650 "FocusReturnProvider": () => (/* reexport */ with_focus_return_Provider), 2651 "FocusableIframe": () => (/* reexport */ FocusableIframe), 2652 "FontSizePicker": () => (/* reexport */ font_size_picker), 2653 "FormFileUpload": () => (/* reexport */ form_file_upload), 2654 "FormToggle": () => (/* reexport */ form_toggle), 2655 "FormTokenField": () => (/* reexport */ form_token_field), 2656 "G": () => (/* reexport */ external_wp_primitives_namespaceObject.G), 2657 "GradientPicker": () => (/* reexport */ gradient_picker), 2658 "Guide": () => (/* reexport */ guide), 2659 "GuidePage": () => (/* reexport */ GuidePage), 2660 "HorizontalRule": () => (/* reexport */ external_wp_primitives_namespaceObject.HorizontalRule), 2661 "Icon": () => (/* reexport */ build_module_icon), 2662 "IconButton": () => (/* reexport */ deprecated), 2663 "IsolatedEventContainer": () => (/* reexport */ isolated_event_container), 2664 "KeyboardShortcuts": () => (/* reexport */ keyboard_shortcuts), 2665 "Line": () => (/* reexport */ external_wp_primitives_namespaceObject.Line), 2666 "MenuGroup": () => (/* reexport */ menu_group), 2667 "MenuItem": () => (/* reexport */ menu_item), 2668 "MenuItemsChoice": () => (/* reexport */ menu_items_choice), 2669 "Modal": () => (/* reexport */ modal), 2670 "NavigableMenu": () => (/* reexport */ navigable_container_menu), 2671 "Notice": () => (/* reexport */ build_module_notice), 2672 "NoticeList": () => (/* reexport */ list), 2673 "Panel": () => (/* reexport */ panel), 2674 "PanelBody": () => (/* reexport */ body), 2675 "PanelHeader": () => (/* reexport */ panel_header), 2676 "PanelRow": () => (/* reexport */ row), 2677 "Path": () => (/* reexport */ external_wp_primitives_namespaceObject.Path), 2678 "Placeholder": () => (/* reexport */ placeholder), 2679 "Polygon": () => (/* reexport */ external_wp_primitives_namespaceObject.Polygon), 2680 "Popover": () => (/* reexport */ popover),
2681 "QueryControls": () => (/* reexport */ query_controls), 2682 "RadioControl": () => (/* reexport */ radio_control), 2683 "RangeControl": () => (/* reexport */ range_control), 2684 "Rect": () => (/* reexport */ external_wp_primitives_namespaceObject.Rect), 2685 "ResizableBox": () => (/* reexport */ resizable_box), 2686 "ResponsiveWrapper": () => (/* reexport */ responsive_wrapper), 2687 "SVG": () => (/* reexport */ external_wp_primitives_namespaceObject.SVG), 2688 "SandBox": () => (/* reexport */ sandbox), 2689 "ScrollLock": () => (/* reexport */ scroll_lock), 2690 "SearchControl": () => (/* reexport */ search_control), 2691 "SelectControl": () => (/* reexport */ select_control), 2692 "Slot": () => (/* reexport */ slot_fill_Slot), 2693 "SlotFillProvider": () => (/* reexport */ Provider), 2694 "Snackbar": () => (/* reexport */ snackbar), 2695 "SnackbarList": () => (/* reexport */ snackbar_list), 2696 "Spinner": () => (/* reexport */ spinner), 2697 "TabPanel": () => (/* reexport */ tab_panel), 2698 "TabbableContainer": () => (/* reexport */ tabbable), 2699 "TextControl": () => (/* reexport */ text_control), 2700 "TextHighlight": () => (/* reexport */ text_highlight), 2701 "TextareaControl": () => (/* reexport */ textarea_control), 2702 "TimePicker": () => (/* reexport */ time), 2703 "Tip": () => (/* reexport */ build_module_tip), 2704 "ToggleControl": () => (/* reexport */ toggle_control), 2705 "Toolbar": () => (/* reexport */ toolbar), 2706 "ToolbarButton": () => (/* reexport */ toolbar_button), 2707 "ToolbarDropdownMenu": () => (/* reexport */ toolbar_dropdown_menu), 2708 "ToolbarGroup": () => (/* reexport */ toolbar_group), 2709 "ToolbarItem": () => (/* reexport */ toolbar_item), 2710 "Tooltip": () => (/* reexport */ tooltip), 2711 "TreeSelect": () => (/* reexport */ tree_select), 2712 "VisuallyHidden": () => (/* reexport */ visually_hidden_component), 2713 "__experimentalAlignmentMatrixControl": () => (/* reexport */ alignment_matrix_control), 2714 "__experimentalApplyValueToSides": () => (/* reexport */ applyValueToSides), 2715 "__experimentalBorderBoxControl": () => (/* reexport */ border_box_control_component), 2716 "__experimentalBorderControl": () => (/* reexport */ border_control_component), 2717 "__experimentalBoxControl": () => (/* reexport */ box_control), 2718 "__experimentalConfirmDialog": () => (/* reexport */ confirm_dialog_component), 2719 "__experimentalDimensionControl": () => (/* reexport */ dimension_control), 2720 "__experimentalDivider": () => (/* reexport */ divider_component), 2721 "__experimentalDropdownContentWrapper": () => (/* reexport */ dropdown_content_wrapper), 2722 "__experimentalElevation": () => (/* reexport */ elevation_component), 2723 "__experimentalGrid": () => (/* reexport */ grid_component), 2724 "__experimentalHStack": () => (/* reexport */ h_stack_component), 2725 "__experimentalHasSplitBorders": () => (/* reexport */ hasSplitBorders), 2726 "__experimentalHeading": () => (/* reexport */ heading_component), 2727 "__experimentalInputControl": () => (/* reexport */ input_control), 2728 "__experimentalInputControlPrefixWrapper": () => (/* reexport */ input_prefix_wrapper), 2729 "__experimentalInputControlSuffixWrapper": () => (/* reexport */ input_suffix_wrapper), 2730 "__experimentalIsDefinedBorder": () => (/* reexport */ isDefinedBorder), 2731 "__experimentalIsEmptyBorder": () => (/* reexport */ isEmptyBorder), 2732 "__experimentalItem": () => (/* reexport */ item_component), 2733 "__experimentalItemGroup": () => (/* reexport */ item_group_component), 2734 "__experimentalNavigation": () => (/* reexport */ navigation), 2735 "__experimentalNavigationBackButton": () => (/* reexport */ back_button), 2736 "__experimentalNavigationGroup": () => (/* reexport */ group), 2737 "__experimentalNavigationItem": () => (/* reexport */ navigation_item), 2738 "__experimentalNavigationMenu": () => (/* reexport */ navigation_menu), 2739 "__experimentalNavigatorBackButton": () => (/* reexport */ navigator_back_button_component), 2740 "__experimentalNavigatorButton": () => (/* reexport */ navigator_button_component), 2741 "__experimentalNavigatorProvider": () => (/* reexport */ navigator_provider_component), 2742 "__experimentalNavigatorScreen": () => (/* reexport */ navigator_screen_component), 2743 "__experimentalNavigatorToParentButton": () => (/* reexport */ navigator_to_parent_button_component), 2744 "__experimentalNumberControl": () => (/* reexport */ number_control), 2745 "__experimentalPaletteEdit": () => (/* reexport */ palette_edit), 2746 "__experimentalParseQuantityAndUnitFromRawValue": () => (/* reexport */ parseQuantityAndUnitFromRawValue), 2747 "__experimentalRadio": () => (/* reexport */ radio_group_radio), 2748 "__experimentalRadioGroup": () => (/* reexport */ radio_group), 2749 "__experimentalScrollable": () => (/* reexport */ scrollable_component), 2750 "__experimentalSpacer": () => (/* reexport */ spacer_component), 2751 "__experimentalStyleProvider": () => (/* reexport */ style_provider), 2752 "__experimentalSurface": () => (/* reexport */ surface_component), 2753 "__experimentalText": () => (/* reexport */ text_component), 2754 "__experimentalToggleGroupControl": () => (/* reexport */ toggle_group_control_component), 2755 "__experimentalToggleGroupControlOption": () => (/* reexport */ toggle_group_control_option_component), 2756 "__experimentalToggleGroupControlOptionIcon": () => (/* reexport */ toggle_group_control_option_icon_component), 2757 "__experimentalToolbarContext": () => (/* reexport */ toolbar_context), 2758 "__experimentalToolsPanel": () => (/* reexport */ tools_panel_component), 2759 "__experimentalToolsPanelContext": () => (/* reexport */ ToolsPanelContext), 2760 "__experimentalToolsPanelItem": () => (/* reexport */ tools_panel_item_component), 2761 "__experimentalTreeGrid": () => (/* reexport */ tree_grid), 2762 "__experimentalTreeGridCell": () => (/* reexport */ cell), 2763 "__experimentalTreeGridItem": () => (/* reexport */ tree_grid_item), 2764 "__experimentalTreeGridRow": () => (/* reexport */ tree_grid_row), 2765 "__experimentalTruncate": () => (/* reexport */ truncate_component), 2766 "__experimentalUnitControl": () => (/* reexport */ unit_control), 2767 "__experimentalUseCustomUnits": () => (/* reexport */ useCustomUnits),
2768 "__experimentalUseNavigator": () => (/* reexport */ use_navigator), 2769 "__experimentalUseSlot": () => (/* reexport */ useSlot), 2770 "__experimentalUseSlotFills": () => (/* reexport */ useSlotFills), 2771 "__experimentalVStack": () => (/* reexport */ v_stack_component), 2772 "__experimentalView": () => (/* reexport */ component), 2773 "__experimentalZStack": () => (/* reexport */ z_stack_component), 2774 "__unstableAnimatePresence": () => (/* reexport */ AnimatePresence), 2775 "__unstableComposite": () => (/* reexport */ Composite), 2776 "__unstableCompositeGroup": () => (/* reexport */ CompositeGroup), 2777 "__unstableCompositeItem": () => (/* reexport */ CompositeItem), 2778 "__unstableDisclosureContent": () => (/* reexport */ DisclosureContent_DisclosureContent), 2779 "__unstableGetAnimateClassName": () => (/* reexport */ getAnimateClassName), 2780 "__unstableMotion": () => (/* reexport */ motion), 2781 "__unstableMotionContext": () => (/* reexport */ MotionContext), 2782 "__unstableUseAutocompleteProps": () => (/* reexport */ useAutocompleteProps), 2783 "__unstableUseCompositeState": () => (/* reexport */ useCompositeState), 2784 "__unstableUseNavigateRegions": () => (/* reexport */ useNavigateRegions), 2785 "createSlotFill": () => (/* reexport */ createSlotFill), 2786 "navigateRegions": () => (/* reexport */ navigate_regions), 2787 "privateApis": () => (/* reexport */ privateApis), 2788 "useBaseControlProps": () => (/* reexport */ useBaseControlProps), 2789 "withConstrainedTabbing": () => (/* reexport */ with_constrained_tabbing), 2790 "withFallbackStyles": () => (/* reexport */ with_fallback_styles), 2791 "withFilters": () => (/* reexport */ withFilters), 2792 "withFocusOutside": () => (/* reexport */ with_focus_outside), 2793 "withFocusReturn": () => (/* reexport */ with_focus_return), 2794 "withNotices": () => (/* reexport */ with_notices), 2795 "withSpokenMessages": () => (/* reexport */ with_spoken_messages) 2796}); 2797 2798// NAMESPACE OBJECT: ./packages/components/build-module/text/styles.js 2799var text_styles_namespaceObject = {}; 2800__webpack_require__.r(text_styles_namespaceObject); 2801__webpack_require__.d(text_styles_namespaceObject, { 2802 "Text": () => (Text), 2803 "block": () => (styles_block), 2804 "destructive": () => (destructive), 2805 "highlighterText": () => (highlighterText), 2806 "muted": () => (muted), 2807 "positive": () => (positive), 2808 "upperCase": () => (upperCase) 2809}); 2810 2811// NAMESPACE OBJECT: ./packages/components/build-module/ui/tooltip/styles.js 2812var tooltip_styles_namespaceObject = {}; 2813__webpack_require__.r(tooltip_styles_namespaceObject); 2814__webpack_require__.d(tooltip_styles_namespaceObject, { 2815 "TooltipContent": () => (TooltipContent), 2816 "TooltipPopoverView": () => (TooltipPopoverView), 2817 "TooltipShortcut": () => (TooltipShortcut), 2818 "noOutline": () => (noOutline) 2819}); 2820 2821// NAMESPACE OBJECT: ./packages/components/build-module/toggle-group-control/toggle-group-control-option-base/styles.js 2822var toggle_group_control_option_base_styles_namespaceObject = {}; 2823__webpack_require__.r(toggle_group_control_option_base_styles_namespaceObject); 2824__webpack_require__.d(toggle_group_control_option_base_styles_namespaceObject, { 2825 "ButtonContentView": () => (ButtonContentView), 2826 "LabelView": () => (LabelView), 2827 "backdropView": () => (backdropView), 2828 "buttonView": () => (buttonView), 2829 "labelBlock": () => (labelBlock) 2830}); 2831 2832;// CONCATENATED MODULE: external ["wp","primitives"] 2833const external_wp_primitives_namespaceObject = window["wp"]["primitives"]; 2834;// CONCATENATED MODULE: external ["wp","element"] 2835const external_wp_element_namespaceObject = window["wp"]["element"]; 2836// EXTERNAL MODULE: ./node_modules/classnames/index.js 2837var classnames = __webpack_require__(4403); 2838var classnames_default = /*#__PURE__*/__webpack_require__.n(classnames); 2839;// CONCATENATED MODULE: external ["wp","i18n"] 2840const external_wp_i18n_namespaceObject = window["wp"]["i18n"]; 2841;// CONCATENATED MODULE: external ["wp","compose"] 2842const external_wp_compose_namespaceObject = window["wp"]["compose"]; 2843;// CONCATENATED MODULE: ./node_modules/reakit/es/_rollupPluginBabelHelpers-1f0bf8c2.js 2844function _defineProperty(obj, key, value) { 2845 if (key in obj) { 2846 Object.defineProperty(obj, key, { 2847 value: value, 2848 enumerable: true, 2849 configurable: true, 2850 writable: true 2851 }); 2852 } else { 2853 obj[key] = value; 2854 } 2855 2856 return obj; 2857} 2858 2859function ownKeys(object, enumerableOnly) { 2860 var keys = Object.keys(object); 2861 2862 if (Object.getOwnPropertySymbols) { 2863 var symbols = Object.getOwnPropertySymbols(object); 2864 if (enumerableOnly) symbols = symbols.filter(function (sym) { 2865 return Object.getOwnPropertyDescriptor(object, sym).enumerable; 2866 }); 2867 keys.push.apply(keys, symbols); 2868 } 2869 2870 return keys; 2871} 2872
2873function _objectSpread2(target) { 2874 for (var i = 1; i < arguments.length; i++) { 2875 var source = arguments[i] != null ? arguments[i] : {}; 2876 2877 if (i % 2) { 2878 ownKeys(Object(source), true).forEach(function (key) { 2879 _defineProperty(target, key, source[key]); 2880 }); 2881 } else if (Object.getOwnPropertyDescriptors) { 2882 Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); 2883 } else { 2884 ownKeys(Object(source)).forEach(function (key) { 2885 Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); 2886 }); 2887 } 2888 } 2889 2890 return target; 2891} 2892 2893function _rollupPluginBabelHelpers_1f0bf8c2_objectWithoutPropertiesLoose(source, excluded) { 2894 if (source == null) return {}; 2895 var target = {}; 2896 var sourceKeys = Object.keys(source); 2897 var key, i; 2898 2899 for (i = 0; i < sourceKeys.length; i++) { 2900 key = sourceKeys[i]; 2901 if (excluded.indexOf(key) >= 0) continue; 2902 target[key] = source[key]; 2903 } 2904 2905 return target; 2906} 2907 2908function _unsupportedIterableToArray(o, minLen) { 2909 if (!o) return; 2910 if (typeof o === "string") return _arrayLikeToArray(o, minLen); 2911 var n = Object.prototype.toString.call(o).slice(8, -1); 2912 if (n === "Object" && o.constructor) n = o.constructor.name; 2913 if (n === "Map" || n === "Set") return Array.from(o); 2914 if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); 2915} 2916 2917function _arrayLikeToArray(arr, len) { 2918 if (len == null || len > arr.length) len = arr.length; 2919 2920 for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; 2921 2922 return arr2; 2923} 2924 2925function _createForOfIteratorHelperLoose(o, allowArrayLike) { 2926 var it; 2927 2928 if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) { 2929 if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { 2930 if (it) o = it; 2931 var i = 0; 2932 return function () { 2933 if (i >= o.length) return { 2934 done: true 2935 }; 2936 return { 2937 done: false, 2938 value: o[i++] 2939 }; 2940 }; 2941 } 2942 2943 throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); 2944 } 2945 2946 it = o[Symbol.iterator](); 2947 return it.next.bind(it); 2948} 2949 2950 2951 2952// EXTERNAL MODULE: external "React" 2953var external_React_ = __webpack_require__(9196); 2954var external_React_namespaceObject = /*#__PURE__*/__webpack_require__.t(external_React_, 2); 2955var external_React_default = /*#__PURE__*/__webpack_require__.n(external_React_); 2956;// CONCATENATED MODULE: ./node_modules/reakit-system/es/_rollupPluginBabelHelpers-0c84a174.js 2957function _rollupPluginBabelHelpers_0c84a174_defineProperty(obj, key, value) { 2958 if (key in obj) { 2959 Object.defineProperty(obj, key, { 2960 value: value, 2961 enumerable: true, 2962 configurable: true, 2963 writable: true 2964 }); 2965 } else { 2966 obj[key] = value; 2967 } 2968 2969 return obj; 2970} 2971 2972function _rollupPluginBabelHelpers_0c84a174_ownKeys(object, enumerableOnly) { 2973 var keys = Object.keys(object); 2974 2975 if (Object.getOwnPropertySymbols) { 2976 var symbols = Object.getOwnPropertySymbols(object); 2977 if (enumerableOnly) symbols = symbols.filter(function (sym) { 2978 return Object.getOwnPropertyDescriptor(object, sym).enumerable; 2979 }); 2980 keys.push.apply(keys, symbols); 2981 } 2982 2983 return keys; 2984} 2985 2986function _rollupPluginBabelHelpers_0c84a174_objectSpread2(target) { 2987 for (var i = 1; i < arguments.length; i++) { 2988 var source = arguments[i] != null ? arguments[i] : {}; 2989 2990 if (i % 2) { 2991 _rollupPluginBabelHelpers_0c84a174_ownKeys(Object(source), true).forEach(function (key) { 2992 _rollupPluginBabelHelpers_0c84a174_defineProperty(target, key, source[key]); 2993 }); 2994 } else if (Object.getOwnPropertyDescriptors) { 2995 Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); 2996 } else { 2997 _rollupPluginBabelHelpers_0c84a174_ownKeys(Object(source)).forEach(function (key) { 2998 Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); 2999 }); 3000 } 3001 } 3002 3003 return target; 3004} 3005 3006function _rollupPluginBabelHelpers_0c84a174_objectWithoutPropertiesLoose(source, excluded) { 3007 if (source == null) return {}; 3008 var target = {}; 3009 var sourceKeys = Object.keys(source); 3010 var key, i; 3011 3012 for (i = 0; i < sourceKeys.length; i++) { 3013 key = sourceKeys[i]; 3014 if (excluded.indexOf(key) >= 0) continue; 3015 target[key] = source[key]; 3016 } 3017 3018 return target; 3019} 3020 3021function _rollupPluginBabelHelpers_0c84a174_unsupportedIterableToArray(o, minLen) { 3022 if (!o) return; 3023 if (typeof o === "string") return _rollupPluginBabelHelpers_0c84a174_arrayLikeToArray(o, minLen); 3024 var n = Object.prototype.toString.call(o).slice(8, -1); 3025 if (n === "Object" && o.constructor) n = o.constructor.name; 3026 if (n === "Map" || n === "Set") return Array.from(o); 3027 if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _rollupPluginBabelHelpers_0c84a174_arrayLikeToArray(o, minLen); 3028} 3029 3030function _rollupPluginBabelHelpers_0c84a174_arrayLikeToArray(arr, len) { 3031 if (len == null || len > arr.length) len = arr.length; 3032 3033 for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; 3034 3035 return arr2; 3036} 3037 3038function _rollupPluginBabelHelpers_0c84a174_createForOfIteratorHelperLoose(o, allowArrayLike) { 3039 var it; 3040 3041 if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) { 3042 if (Array.isArray(o) || (it = _rollupPluginBabelHelpers_0c84a174_unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { 3043 if (it) o = it; 3044 var i = 0; 3045 return function () { 3046 if (i >= o.length) return { 3047 done: true 3048 }; 3049 return { 3050 done: false, 3051 value: o[i++] 3052 }; 3053 }; 3054 } 3055 3056 throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); 3057 } 3058 3059 it = o[Symbol.iterator](); 3060 return it.next.bind(it); 3061} 3062 3063 3064 3065;// CONCATENATED MODULE: ./node_modules/reakit-system/es/SystemContext.js 3066 3067 3068var SystemContext = /*#__PURE__*/(0,external_React_.createContext)({}); 3069 3070 3071 3072;// CONCATENATED MODULE: ./node_modules/reakit-system/es/useCreateElement.js 3073 3074 3075 3076 3077function isRenderProp(children) { 3078 return typeof children === "function"; 3079} 3080 3081/** 3082 * Custom hook that will call `children` if it's a function. If 3083 * `useCreateElement` has been passed to the context, it'll be used instead. 3084 * 3085 * @example 3086 * import React from "react"; 3087 * import { SystemProvider, useCreateElement } from "reakit-system"; 3088 * 3089 * const system = { 3090 * useCreateElement(type, props, children = props.children) { 3091 * // very similar to what `useCreateElement` does already 3092 * if (typeof children === "function") { 3093 * const { children: _, ...rest } = props; 3094 * return children(rest); 3095 * } 3096 * return React.createElement(type, props, children); 3097 * }, 3098 * }; 3099 * 3100 * function Component(props) { 3101 * return useCreateElement("div", props); 3102 * } 3103 * 3104 * function App() { 3105 * return ( 3106 * <SystemProvider unstable_system={system}> 3107 * <Component url="url">{({ url }) => <a href={url}>link</a>}</Component> 3108 * </SystemProvider> 3109 * ); 3110 * } 3111 */ 3112 3113var useCreateElement = function useCreateElement(type, props, children) { 3114 if (children === void 0) { 3115 children = props.children; 3116 } 3117 3118 var context = (0,external_React_.useContext)(SystemContext); 3119 3120 if (context.useCreateElement) { 3121 return context.useCreateElement(type, props, children); 3122 } 3123 3124 if (typeof type === "string" && isRenderProp(children)) { 3125 var _ = props.children, 3126 rest = _rollupPluginBabelHelpers_0c84a174_objectWithoutPropertiesLoose(props, ["children"]); 3127 3128 return children(rest); 3129 } 3130 3131 return /*#__PURE__*/(0,external_React_.createElement)(type, props, children); 3132}; 3133 3134 3135 3136;// CONCATENATED MODULE: ./node_modules/reakit-utils/es/_rollupPluginBabelHelpers-1f0bf8c2.js 3137function _rollupPluginBabelHelpers_1f0bf8c2_defineProperty(obj, key, value) { 3138 if (key in obj) { 3139 Object.defineProperty(obj, key, { 3140 value: value, 3141 enumerable: true, 3142 configurable: true, 3143 writable: true 3144 }); 3145 } else { 3146 obj[key] = value; 3147 } 3148 3149 return obj; 3150} 3151 3152function _rollupPluginBabelHelpers_1f0bf8c2_ownKeys(object, enumerableOnly) { 3153 var keys = Object.keys(object); 3154 3155 if (Object.getOwnPropertySymbols) { 3156 var symbols = Object.getOwnPropertySymbols(object); 3157 if (enumerableOnly) symbols = symbols.filter(function (sym) { 3158 return Object.getOwnPropertyDescriptor(object, sym).enumerable; 3159 }); 3160 keys.push.apply(keys, symbols); 3161 } 3162 3163 return keys; 3164} 3165
3166function _rollupPluginBabelHelpers_1f0bf8c2_objectSpread2(target) { 3167 for (var i = 1; i < arguments.length; i++) { 3168 var source = arguments[i] != null ? arguments[i] : {}; 3169 3170 if (i % 2) { 3171 _rollupPluginBabelHelpers_1f0bf8c2_ownKeys(Object(source), true).forEach(function (key) { 3172 _rollupPluginBabelHelpers_1f0bf8c2_defineProperty(target, key, source[key]); 3173 }); 3174 } else if (Object.getOwnPropertyDescriptors) { 3175 Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); 3176 } else { 3177 _rollupPluginBabelHelpers_1f0bf8c2_ownKeys(Object(source)).forEach(function (key) { 3178 Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); 3179 }); 3180 } 3181 } 3182 3183 return target; 3184} 3185 3186function es_rollupPluginBabelHelpers_1f0bf8c2_objectWithoutPropertiesLoose(source, excluded) { 3187 if (source == null) return {}; 3188 var target = {}; 3189 var sourceKeys = Object.keys(source); 3190 var key, i; 3191 3192 for (i = 0; i < sourceKeys.length; i++) { 3193 key = sourceKeys[i]; 3194 if (excluded.indexOf(key) >= 0) continue; 3195 target[key] = source[key]; 3196 } 3197 3198 return target; 3199} 3200 3201function _rollupPluginBabelHelpers_1f0bf8c2_unsupportedIterableToArray(o, minLen) { 3202 if (!o) return; 3203 if (typeof o === "string") return _rollupPluginBabelHelpers_1f0bf8c2_arrayLikeToArray(o, minLen); 3204 var n = Object.prototype.toString.call(o).slice(8, -1); 3205 if (n === "Object" && o.constructor) n = o.constructor.name; 3206 if (n === "Map" || n === "Set") return Array.from(o); 3207 if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _rollupPluginBabelHelpers_1f0bf8c2_arrayLikeToArray(o, minLen); 3208} 3209 3210function _rollupPluginBabelHelpers_1f0bf8c2_arrayLikeToArray(arr, len) { 3211 if (len == null || len > arr.length) len = arr.length; 3212 3213 for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; 3214 3215 return arr2; 3216} 3217 3218function _rollupPluginBabelHelpers_1f0bf8c2_createForOfIteratorHelperLoose(o, allowArrayLike) { 3219 var it; 3220 3221 if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) { 3222 if (Array.isArray(o) || (it = _rollupPluginBabelHelpers_1f0bf8c2_unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { 3223 if (it) o = it; 3224 var i = 0; 3225 return function () { 3226 if (i >= o.length) return { 3227 done: true 3228 }; 3229 return { 3230 done: false, 3231 value: o[i++] 3232 }; 3233 }; 3234 } 3235 3236 throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); 3237 } 3238 3239 it = o[Symbol.iterator](); 3240 return it.next.bind(it); 3241} 3242 3243 3244 3245;// CONCATENATED MODULE: ./node_modules/reakit-utils/es/isObject.js 3246/** 3247 * Checks whether `arg` is an object or not. 3248 * 3249 * @returns {boolean} 3250 */ 3251function isObject_isObject(arg) { 3252 return typeof arg === "object" && arg != null; 3253} 3254 3255 3256 3257;// CONCATENATED MODULE: ./node_modules/reakit-utils/es/isPlainObject.js 3258 3259 3260/** 3261 * Checks whether `arg` is a plain object or not. 3262 * 3263 * @returns {boolean} 3264 */ 3265 3266function isPlainObject(arg) { 3267 var _proto$constructor; 3268 3269 if (!isObject_isObject(arg)) return false; 3270 var proto = Object.getPrototypeOf(arg); 3271 if (proto == null) return true; 3272 return ((_proto$constructor = proto.constructor) === null || _proto$constructor === void 0 ? void 0 : _proto$constructor.toString()) === Object.toString(); 3273} 3274 3275 3276 3277;// CONCATENATED MODULE: ./node_modules/reakit-utils/es/splitProps.js 3278 3279 3280 3281 3282/** 3283 * Splits an object (`props`) into a tuple where the first item is an object 3284 * with the passed `keys`, and the second item is an object with these keys 3285 * omitted. 3286 * 3287 * @deprecated will be removed in version 2 3288 * 3289 * @example 3290 * import { splitProps } from "reakit-utils"; 3291 * 3292 * splitProps({ a: "a", b: "b" }, ["a"]); // [{ a: "a" }, { b: "b" }] 3293 */ 3294 3295function __deprecatedSplitProps(props, keys) { 3296 var propsKeys = Object.keys(props); 3297 var picked = {}; 3298 var omitted = {}; 3299 3300 for (var _i = 0, _propsKeys = propsKeys; _i < _propsKeys.length; _i++) { 3301 var key = _propsKeys[_i]; 3302 3303 if (keys.indexOf(key) >= 0) { 3304 picked[key] = props[key]; 3305 } else { 3306 omitted[key] = props[key]; 3307 } 3308 } 3309 3310 return [picked, omitted]; 3311} 3312/** 3313 * Splits an object (`props`) into a tuple where the first item 3314 * is the `state` property, and the second item is the rest of the properties. 3315 * 3316 * It is also backward compatible with version 1. If `keys` are passed then 3317 * splits an object (`props`) into a tuple where the first item is an object 3318 * with the passed `keys`, and the second item is an object with these keys 3319 * omitted. 3320 * 3321 * @example 3322 * import { splitProps } from "reakit-utils"; 3323 * 3324 * splitProps({ a: "a", b: "b" }, ["a"]); // [{ a: "a" }, { b: "b" }] 3325 * 3326 * @example 3327 * import { splitProps } from "reakit-utils"; 3328 * 3329 * splitProps({ state: { a: "a" }, b: "b" }); // [{ a: "a" }, { b: "b" }] 3330 */ 3331 3332 3333function splitProps(props, keys) { 3334 if (keys === void 0) { 3335 keys = []; 3336 } 3337 3338 if (!isPlainObject(props.state)) { 3339 return __deprecatedSplitProps(props, keys); 3340 } 3341 3342 var _deprecatedSplitProp = __deprecatedSplitProps(props, [].concat(keys, ["state"])), 3343 picked = _deprecatedSplitProp[0], 3344 omitted = _deprecatedSplitProp[1]; 3345 3346 var state = picked.state, 3347 restPicked = es_rollupPluginBabelHelpers_1f0bf8c2_objectWithoutPropertiesLoose(picked, ["state"]); 3348
3349 return [_rollupPluginBabelHelpers_1f0bf8c2_objectSpread2(_rollupPluginBabelHelpers_1f0bf8c2_objectSpread2({}, state), restPicked), omitted]; 3350} 3351 3352 3353 3354;// CONCATENATED MODULE: ./node_modules/reakit-utils/es/shallowEqual.js 3355/** 3356 * Compares two objects. 3357 * 3358 * @example 3359 * import { shallowEqual } from "reakit-utils"; 3360 * 3361 * shallowEqual({ a: "a" }, {}); // false 3362 * shallowEqual({ a: "a" }, { b: "b" }); // false 3363 * shallowEqual({ a: "a" }, { a: "a" }); // true 3364 * shallowEqual({ a: "a" }, { a: "a", b: "b" }); // false 3365 */ 3366function shallowEqual(objA, objB) { 3367 if (objA === objB) return true; 3368 if (!objA) return false; 3369 if (!objB) return false; 3370 if (typeof objA !== "object") return false; 3371 if (typeof objB !== "object") return false; 3372 var aKeys = Object.keys(objA); 3373 var bKeys = Object.keys(objB); 3374 var length = aKeys.length; 3375 if (bKeys.length !== length) return false; 3376 3377 for (var _i = 0, _aKeys = aKeys; _i < _aKeys.length; _i++) { 3378 var key = _aKeys[_i]; 3379 3380 if (objA[key] !== objB[key]) { 3381 return false; 3382 } 3383 } 3384 3385 return true; 3386} 3387 3388 3389 3390;// CONCATENATED MODULE: ./node_modules/reakit-utils/es/normalizePropsAreEqual.js 3391 3392 3393 3394 3395/** 3396 * This higher order functions take `propsAreEqual` function and 3397 * returns a new function which normalizes the props. 3398 * 3399 * Normalizing in our case is making sure the `propsAreEqual` works with 3400 * both version 1 (object spreading) and version 2 (state object) state passing. 3401 * 3402 * To achieve this, the returned function in case of a state object 3403 * will spread the state object in both `prev` and `next props. 3404 * 3405 * Other case it just returns the function as is which makes sure 3406 * that we are still backward compatible 3407 */ 3408function normalizePropsAreEqual(propsAreEqual) { 3409 if (propsAreEqual.name === "normalizePropsAreEqualInner") { 3410 return propsAreEqual; 3411 } 3412 3413 return function normalizePropsAreEqualInner(prev, next) { 3414 if (!isPlainObject(prev.state) || !isPlainObject(next.state)) { 3415 return propsAreEqual(prev, next); 3416 } 3417 3418 return propsAreEqual(_rollupPluginBabelHelpers_1f0bf8c2_objectSpread2(_rollupPluginBabelHelpers_1f0bf8c2_objectSpread2({}, prev.state), prev), _rollupPluginBabelHelpers_1f0bf8c2_objectSpread2(_rollupPluginBabelHelpers_1f0bf8c2_objectSpread2({}, next.state), next)); 3419 }; 3420} 3421 3422 3423 3424;// CONCATENATED MODULE: ./node_modules/reakit-system/es/createComponent.js 3425 3426 3427 3428 3429 3430 3431 3432 3433function createComponent_forwardRef(component) { 3434 return /*#__PURE__*/(0,external_React_.forwardRef)(component); 3435} 3436 3437function memo(component, propsAreEqual) { 3438 return /*#__PURE__*/(0,external_React_.memo)(component, propsAreEqual); 3439} 3440 3441/** 3442 * Creates a React component. 3443 * 3444 * @example 3445 * import { createComponent } from "reakit-system"; 3446 * 3447 * const A = createComponent({ as: "a" }); 3448 * 3449 * @param options 3450 */ 3451function createComponent(_ref) { 3452 var type = _ref.as, 3453 useHook = _ref.useHook, 3454 shouldMemo = _ref.memo, 3455 _ref$propsAreEqual = _ref.propsAreEqual, 3456 propsAreEqual = _ref$propsAreEqual === void 0 ? useHook === null || useHook === void 0 ? void 0 : useHook.unstable_propsAreEqual : _ref$propsAreEqual, 3457 _ref$keys = _ref.keys, 3458 keys = _ref$keys === void 0 ? (useHook === null || useHook === void 0 ? void 0 : useHook.__keys) || [] : _ref$keys, 3459 _ref$useCreateElement = _ref.useCreateElement, 3460 useCreateElement$1 = _ref$useCreateElement === void 0 ? useCreateElement : _ref$useCreateElement; 3461 3462 var Comp = function Comp(_ref2, ref) { 3463 var _ref2$as = _ref2.as, 3464 as = _ref2$as === void 0 ? type : _ref2$as, 3465 props = _rollupPluginBabelHelpers_0c84a174_objectWithoutPropertiesLoose(_ref2, ["as"]); 3466 3467 if (useHook) { 3468 var _as$render; 3469 3470 var _splitProps = splitProps(props, keys), 3471 _options = _splitProps[0], 3472 htmlProps = _splitProps[1]; 3473 3474 var _useHook = useHook(_options, _rollupPluginBabelHelpers_0c84a174_objectSpread2({ 3475 ref: ref 3476 }, htmlProps)), 3477 wrapElement = _useHook.wrapElement, 3478 elementProps = _rollupPluginBabelHelpers_0c84a174_objectWithoutPropertiesLoose(_useHook, ["wrapElement"]); // @ts-ignore 3479 3480 3481 var asKeys = ((_as$render = as.render) === null || _as$render === void 0 ? void 0 : _as$render.__keys) || as.__keys; 3482 var asOptions = asKeys && splitProps(props, asKeys)[0]; 3483 var allProps = asOptions ? _rollupPluginBabelHelpers_0c84a174_objectSpread2
3483(_rollupPluginBabelHelpers_0c84a174_objectSpread2({}, elementProps), asOptions) : elementProps; 3484 3485 var _element = useCreateElement$1(as, allProps); 3486 3487 if (wrapElement) { 3488 return wrapElement(_element); 3489 } 3490 3491 return _element; 3492 } 3493 3494 return useCreateElement$1(as, _rollupPluginBabelHelpers_0c84a174_objectSpread2({ 3495 ref: ref 3496 }, props)); 3497 }; 3498 3499 if (false) {} 3500 3501 Comp = createComponent_forwardRef(Comp); 3502 3503 if (shouldMemo) { 3504 Comp = memo(Comp, propsAreEqual && normalizePropsAreEqual(propsAreEqual)); 3505 } 3506 3507 Comp.__keys = keys; 3508 Comp.unstable_propsAreEqual = normalizePropsAreEqual(propsAreEqual || shallowEqual); 3509 return Comp; 3510} 3511 3512 3513 3514;// CONCATENATED MODULE: ./node_modules/reakit-system/es/useToken.js 3515 3516 3517 3518/** 3519 * React custom hook that returns the value of any token defined in the 3520 * SystemContext. It's mainly used internally in [`useOptions`](#useoptions) 3521 * and [`useProps`](#useprops). 3522 * 3523 * @example 3524 * import { SystemProvider, useToken } from "reakit-system"; 3525 * 3526 * const system = { 3527 * token: "value", 3528 * }; 3529 * 3530 * function Component(props) { 3531 * const token = useToken("token", "default value"); 3532 * return <div {...props}>{token}</div>; 3533 * } 3534 * 3535 * function App() { 3536 * return ( 3537 * <SystemProvider unstable_system={system}> 3538 * <Component /> 3539 * </SystemProvider> 3540 * ); 3541 * } 3542 */ 3543 3544function useToken(token, defaultValue) { 3545 (0,external_React_.useDebugValue)(token); 3546 var context = (0,external_React_.useContext)(SystemContext); 3547 return context[token] != null ? context[token] : defaultValue; 3548} 3549 3550 3551 3552;// CONCATENATED MODULE: ./node_modules/reakit-system/es/useProps.js 3553 3554 3555 3556 3557/** 3558 * React custom hook that returns the props returned by a given 3559 * `use${name}Props` in the SystemContext. 3560 * 3561 * @example 3562 * import { SystemProvider, useProps } from "reakit-system"; 3563 * 3564 * const system = { 3565 * useAProps(options, htmlProps) { 3566 * return { 3567 * ...htmlProps, 3568 * href: options.url, 3569 * }; 3570 * }, 3571 * }; 3572 * 3573 * function A({ url, ...htmlProps }) { 3574 * const props = useProps("A", { url }, htmlProps); 3575 * return <a {...props} />; 3576 * } 3577 * 3578 * function App() { 3579 * return ( 3580 * <SystemProvider unstable_system={system}> 3581 * <A url="url">It will convert url into href in useAProps</A> 3582 * </SystemProvider> 3583 * ); 3584 * } 3585 */ 3586 3587function useProps(name, options, htmlProps) { 3588 if (options === void 0) { 3589 options = {}; 3590 } 3591 3592 if (htmlProps === void 0) { 3593 htmlProps = {}; 3594 } 3595 3596 var hookName = "use" + name + "Props"; 3597 (0,external_React_.useDebugValue)(hookName); 3598 var useHook = useToken(hookName); 3599 3600 if (useHook) { 3601 return useHook(options, htmlProps); 3602 } 3603 3604 return htmlProps; 3605} 3606 3607 3608 3609;// CONCATENATED MODULE: ./node_modules/reakit-system/es/useOptions.js 3610 3611 3612 3613 3614 3615/** 3616 * React custom hook that returns the options returned by a given 3617 * `use${name}Options` in the SystemContext. 3618 * 3619 * @example 3620 * import React from "react"; 3621 * import { SystemProvider, useOptions } from "reakit-system"; 3622 * 3623 * const system = { 3624 * useAOptions(options, htmlProps) { 3625 * return { 3626 * ...options, 3627 * url: htmlProps.href, 3628 * }; 3629 * }, 3630 * }; 3631 * 3632 * function A({ url, ...htmlProps }) { 3633 * const options = useOptions("A", { url }, htmlProps); 3634 * return <a href={options.url} {...htmlProps} />; 3635 * } 3636 * 3637 * function App() { 3638 * return ( 3639 * <SystemProvider unstable_system={system}> 3640 * <A href="url"> 3641 * It will convert href into url in useAOptions and then url into href in A 3642 * </A> 3643 * </SystemProvider> 3644 * ); 3645 * } 3646 */ 3647 3648function useOptions(name, options, htmlProps) { 3649 if (options === void 0) { 3650 options = {}; 3651 } 3652 3653 if (htmlProps === void 0) { 3654 htmlProps = {}; 3655 } 3656 3657 var hookName = "use" + name + "Options"; 3658 (0,external_React_.useDebugValue)(hookName); 3659 var useHook = useToken(hookName); 3660 3661 if (useHook) { 3662 return _rollupPluginBabelHelpers_0c84a174_objectSpread2(_rollupPluginBabelHelpers_0c84a174_objectSpread2({}, options), useHook(options, htmlProps)); 3663 } 3664 3665 return options; 3666} 3667 3668 3669 3670;// CONCATENATED MODULE: ./node_modules/reakit-utils/es/toArray.js 3671/** 3672 * Transforms `arg` into an array if it's not already. 3673 * 3674 * @example 3675 * import { toArray } from "reakit-utils"; 3676 * 3677 * toArray("a"); // ["a"] 3678 * toArray(["a"]); // ["a"] 3679 */ 3680function toArray(arg) { 3681 if (Array.isArray(arg)) { 3682 return arg; 3683 } 3684 3685 return typeof arg !== "undefined" ? [arg] : []; 3686} 3687 3688 3689 3690;// CONCATENATED MODULE: ./node_modules/reakit-system/es/createHook.js 3691 3692 3693 3694 3695 3696 3697 3698 3699 3700/** 3701 * Creates a React custom hook that will return component props. 3702 * 3703 * @example 3704 * import { createHook } from "reakit-system"; 3705 * 3706 * const useA = createHook({ 3707 * name: "A", 3708 * keys: ["url"], // custom props/options keys 3709 * useProps(options, htmlProps) { 3710 * return { 3711 * ...htmlProps, 3712 * href: options.url, 3713 * }; 3714 * }, 3715 * }); 3716 * 3717 * function A({ url, ...htmlProps }) { 3718 * const props = useA({ url }, htmlProps); 3719 * return <a {...props} />; 3720 * } 3721 * 3722 * @param options 3723 */ 3724function createHook(options) { 3725 var _options$useState, _composedHooks$; 3726 3727 var composedHooks = toArray(options.compose); 3728 3729 var __useOptions = function __useOptions(hookOptions, htmlProps) { 3730 // Call the current hook's useOptions first 3731 if (options.useOptions) { 3732 hookOptions = options.useOptions(hookOptions, htmlProps); 3733 } // If there's name, call useOptions from the system context 3734 3735 3736 if (options.name) { 3737 hookOptions = useOptions(options.name, hookOptions, htmlProps); 3738 } // Run composed hooks useOptions 3739 3740 3741 if (options.compose) { 3742 for (var _iterator = _rollupPluginBabelHelpers_0c84a174_createForOfIteratorHelperLoose(composedHooks), _step; !(_step = _iterator()).done;) { 3743 var hook = _step.value; 3744 hookOptions = hook.__useOptions(hookOptions, htmlProps); 3745 } 3746 } 3747 3748 return hookOptions; 3749 }; 3750 3751 var useHook = function useHook(hookOptions, htmlProps, unstable_ignoreUseOptions) { 3752 if (hookOptions === void 0) { 3753 hookOptions = {}; 3754 } 3755 3756 if (htmlProps === void 0) { 3757 htmlProps = {}; 3758 } 3759 3760 if (unstable_ignoreUseOptions === void 0) { 3761 unstable_ignoreUseOptions = false;
3762 } 3763 3764 // This won't execute when useHook was called from within another useHook 3765 if (!unstable_ignoreUseOptions) { 3766 hookOptions = __useOptions(hookOptions, htmlProps); 3767 } // Call the current hook's useProps 3768 3769 3770 if (options.useProps) { 3771 htmlProps = options.useProps(hookOptions, htmlProps); 3772 } // If there's name, call useProps from the system context 3773 3774 3775 if (options.name) { 3776 htmlProps = useProps(options.name, hookOptions, htmlProps); 3777 } 3778 3779 if (options.compose) { 3780 if (options.useComposeOptions) { 3781 hookOptions = options.useComposeOptions(hookOptions, htmlProps); 3782 } 3783 3784 if (options.useComposeProps) { 3785 htmlProps = options.useComposeProps(hookOptions, htmlProps); 3786 } else { 3787 for (var _iterator2 = _rollupPluginBabelHelpers_0c84a174_createForOfIteratorHelperLoose(composedHooks), _step2; !(_step2 = _iterator2()).done;) { 3788 var hook = _step2.value; 3789 htmlProps = hook(hookOptions, htmlProps, true); 3790 } 3791 } 3792 } // Remove undefined values from htmlProps 3793 3794 3795 var finalHTMLProps = {}; 3796 var definedHTMLProps = htmlProps || {}; 3797 3798 for (var prop in definedHTMLProps) { 3799 if (definedHTMLProps[prop] !== undefined) { 3800 finalHTMLProps[prop] = definedHTMLProps[prop]; 3801 } 3802 } 3803 3804 return finalHTMLProps; 3805 }; 3806 3807 useHook.__useOptions = __useOptions; 3808 var composedKeys = composedHooks.reduce(function (keys, hook) { 3809 keys.push.apply(keys, hook.__keys || []); 3810 return keys; 3811 }, []); // It's used by createComponent to split option props (keys) and html props 3812 3813 useHook.__keys = [].concat(composedKeys, ((_options$useState = options.useState) === null || _options$useState === void 0 ? void 0 : _options$useState.__keys) || [], options.keys || []); 3814 useHook.unstable_propsAreEqual = options.propsAreEqual || ((_composedHooks$ = composedHooks[0]) === null || _composedHooks$ === void 0 ? void 0 : _composedHooks$.unstable_propsAreEqual) || shallowEqual; 3815 3816 if (false) {} 3817 3818 return useHook; 3819} 3820 3821 3822 3823;// CONCATENATED MODULE: ./node_modules/reakit-utils/es/useForkRef.js 3824 3825 3826// https://github.com/mui-org/material-ui/blob/2bcc874cf07b81202968f769cb9c2398c7c11311/packages/material-ui/src/utils/useForkRef.js 3827 3828function setRef(ref, value) { 3829 if (value === void 0) { 3830 value = null; 3831 } 3832 3833 if (!ref) return; 3834 3835 if (typeof ref === "function") { 3836 ref(value); 3837 } else { 3838 ref.current = value; 3839 } 3840} 3841/** 3842 * Merges up to two React Refs into a single memoized function React Ref so you 3843 * can pass it to an element. 3844 * 3845 * @example 3846 * import React from "react"; 3847 * import { useForkRef } from "reakit-utils"; 3848 * 3849 * const Component = React.forwardRef((props, ref) => { 3850 * const internalRef = React.useRef(); 3851 * return <div {...props} ref={useForkRef(internalRef, ref)} />; 3852 * }); 3853 */ 3854 3855 3856function useForkRef(refA, refB) { 3857 return (0,external_React_.useMemo)(function () { 3858 if (refA == null && refB == null) { 3859 return null; 3860 } 3861 3862 return function (value) { 3863 setRef(refA, value); 3864 setRef(refB, value); 3865 }; 3866 }, [refA, refB]); 3867} 3868 3869 3870 3871;// CONCATENATED MODULE: ./node_modules/reakit-warning/es/useWarning.js 3872 3873 3874 3875 3876 3877function isRefObject(ref) { 3878 return isObject(ref) && "current" in ref; 3879} 3880/** 3881 * Logs `messages` to the console using `console.warn` based on a `condition`. 3882 * This should be used inside components. 3883 */ 3884 3885 3886function useWarning(condition) { 3887 for (var _len = arguments.length, messages = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) { 3888 messages[_key - 1] = arguments[_key]; 3889 } 3890 3891 if (false) {} 3892} 3893 3894 3895 3896;// CONCATENATED MODULE: ./node_modules/reakit-warning/es/index.js 3897 3898 3899 3900 3901 3902 3903;// CONCATENATED MODULE: ./node_modules/reakit-utils/es/getDocument.js 3904/** 3905 * Returns `element.ownerDocument || document`. 3906 */ 3907function getDocument_getDocument(element) { 3908 return element ? element.ownerDocument || element : document; 3909} 3910 3911 3912 3913;// CONCATENATED MODULE: ./node_modules/reakit-utils/es/getWindow.js 3914 3915 3916// Thanks to Fluent UI for doing the [research on IE11 memory leak](https://github.com/microsoft/fluentui/pull/9010#issuecomment-490768427) 3917 3918var _window; // Note: Accessing "window" in IE11 is somewhat expensive, and calling "typeof window" 3919// hits a memory leak, whereas aliasing it and calling "typeof _window" does not. 3920// Caching the window value at the file scope lets us minimize the impact. 3921 3922 3923try { 3924 _window = window; 3925} catch (e) { 3926 /* no-op */ 3927} 3928/** 3929 * Returns `element.ownerDocument.defaultView || window`. 3930 */ 3931 3932 3933function getWindow(element) { 3934 if (!element) { 3935 return _window; 3936 } 3937 3938 return getDocument_getDocument(element).defaultView || _window; 3939} 3940 3941 3942 3943;// CONCATENATED MODULE: ./node_modules/reakit-utils/es/canUseDOM.js 3944 3945 3946 3947function checkIsBrowser() { 3948 var _window = getWindow(); 3949 3950 return Boolean(typeof _window !== "undefined" && _window.document && _window.document.createElement); 3951} 3952/** 3953 * It's `true` if it is running in a browser environment or `false` if it is not (SSR). 3954 * 3955 * @example 3956 * import { canUseDOM } from "reakit-utils"; 3957 * 3958 * const title = canUseDOM ? document.title : ""; 3959 */ 3960 3961 3962var canUseDOM = checkIsBrowser(); 3963 3964 3965 3966;// CONCATENATED MODULE: ./node_modules/reakit-utils/es/useIsomorphicEffect.js 3967 3968 3969 3970 3971 3972/** 3973 * `React.useLayoutEffect` that fallbacks to `React.useEffect` on server side 3974 * rendering. 3975 */ 3976 3977var useIsomorphicEffect = !canUseDOM ? external_React_.useEffect : external_React_.useLayoutEffect; 3978 3979 3980 3981;// CONCATENATED MODULE: ./node_modules/reakit-utils/es/useLiveRef.js 3982 3983 3984 3985 3986 3987 3988/** 3989 * A `React.Ref` that keeps track of the passed `value`. 3990 */ 3991 3992function useLiveRef(value) { 3993 var ref = (0,external_React_.useRef)(value); 3994 useIsomorphicEffect(function () { 3995 ref.current = value; 3996 }); 3997 return ref; 3998} 3999 4000 4001 4002;// CONCATENATED MODULE: ./node_modules/reakit-utils/es/isSelfTarget.js 4003/** 4004 * Returns `true` if `event.target` and `event.currentTarget` are the same. 4005 */ 4006function isSelfTarget(event) { 4007 return event.target === event.currentTarget; 4008} 4009 4010 4011 4012;// CONCATENATED MODULE: ./node_modules/reakit-utils/es/getActiveElement.js 4013 4014 4015/** 4016 * Returns `element.ownerDocument.activeElement`. 4017 */ 4018 4019function getActiveElement_getActiveElement(element) { 4020 var _getDocument = getDocument_getDocument(element), 4021 activeElement = _getDocument.activeElement; 4022 4023 if (!(activeElement !== null && activeElement !== void 0 && activeElement.nodeName)) { 4024 // In IE11, activeElement might be an empty object if we're interacting 4025 // with elements inside of an iframe. 4026 return null; 4027 } 4028 4029 return activeElement; 4030} 4031 4032 4033 4034;// CONCATENATED MODULE: ./node_modules/reakit-utils/es/contains.js 4035/** 4036 * Similar to `Element.prototype.contains`, but a little bit faster when 4037 * `element` is the same as `child`. 4038 * 4039 * @example 4040 * import { contains } from "reakit-utils"; 4041 * 4042 * contains(document.getElementById("parent"), document.getElementById("child")); 4043 */ 4044function contains(parent, child) { 4045 return parent === child || parent.contains(child); 4046} 4047 4048 4049 4050;// CONCATENATED MODULE: ./node_modules/reakit-utils/es/hasFocusWithin.js 4051 4052 4053 4054 4055/** 4056 * Checks if `element` has focus within. Elements that are referenced by 4057 * `aria-activedescendant` are also considered. 4058 * 4059 * @example 4060 * import { hasFocusWithin } from "reakit-utils"; 4061 * 4062 * hasFocusWithin(document.getElementById("id")); 4063 */ 4064 4065function hasFocusWithin(element) { 4066 var activeElement = getActiveElement_getActiveElement(element); 4067 if (!activeElement) return false;
4068 if (contains(element, activeElement)) return true; 4069 var activeDescendant = activeElement.getAttribute("aria-activedescendant"); 4070 if (!activeDescendant) return false; 4071 if (activeDescendant === element.id) return true; 4072 return !!element.querySelector("#" + activeDescendant); 4073} 4074 4075 4076 4077;// CONCATENATED MODULE: ./node_modules/reakit-utils/es/isPortalEvent.js 4078 4079 4080/** 4081 * Returns `true` if `event` has been fired within a React Portal element. 4082 */ 4083 4084function isPortalEvent(event) { 4085 return !contains(event.currentTarget, event.target); 4086} 4087 4088 4089 4090;// CONCATENATED MODULE: ./node_modules/reakit-utils/es/isButton.js 4091var buttonInputTypes = ["button", "color", "file", "image", "reset", "submit"]; 4092/** 4093 * Checks whether `element` is a native HTML button element. 4094 * 4095 * @example 4096 * import { isButton } from "reakit-utils"; 4097 * 4098 * isButton(document.querySelector("button")); // true 4099 * isButton(document.querySelector("input[type='button']")); // true 4100 * isButton(document.querySelector("div")); // false 4101 * isButton(document.querySelector("input[type='text']")); // false 4102 * isButton(document.querySelector("div[role='button']")); // false 4103 * 4104 * @returns {boolean} 4105 */ 4106 4107function isButton(element) { 4108 if (element.tagName === "BUTTON") return true; 4109 4110 if (element.tagName === "INPUT") { 4111 var input = element; 4112 return buttonInputTypes.indexOf(input.type) !== -1; 4113 } 4114 4115 return false; 4116} 4117 4118 4119 4120;// CONCATENATED MODULE: ./node_modules/reakit-utils/es/dom.js 4121 4122 4123 4124 4125/** 4126 * Checks if a given string exists in the user agent string. 4127 */ 4128 4129function isUA(string) { 4130 if (!canUseDOM) return false; 4131 return window.navigator.userAgent.indexOf(string) !== -1; 4132} 4133 4134 4135 4136;// CONCATENATED MODULE: ./node_modules/reakit-utils/es/matches.js 4137/** 4138 * Ponyfill for `Element.prototype.matches` 4139 * 4140 * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/matches 4141 */ 4142function matches(element, selectors) { 4143 if ("matches" in element) { 4144 return element.matches(selectors); 4145 } 4146 4147 if ("msMatchesSelector" in element) { 4148 return element.msMatchesSelector(selectors); 4149 } 4150 4151 return element.webkitMatchesSelector(selectors); 4152} 4153 4154 4155 4156;// CONCATENATED MODULE: ./node_modules/reakit-utils/es/tabbable.js 4157 4158 4159 4160 4161 4162/** @module tabbable */ 4163var 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'])"; 4164 4165function isVisible(element) { 4166 var htmlElement = element; 4167 return htmlElement.offsetWidth > 0 || htmlElement.offsetHeight > 0 || element.getClientRects().length > 0; 4168} 4169 4170function hasNegativeTabIndex(element) { 4171 var tabIndex = parseInt(element.getAttribute("tabindex") || "0", 10); 4172 return tabIndex < 0; 4173} 4174/** 4175 * Checks whether `element` is focusable or not. 4176 * 4177 * @memberof tabbable 4178 * 4179 * @example 4180 * import { isFocusable } from "reakit-utils"; 4181 * 4182 * isFocusable(document.querySelector("input")); // true 4183 * isFocusable(document.querySelector("input[tabindex='-1']")); // true 4184 * isFocusable(document.querySelector("input[hidden]")); // false 4185 * isFocusable(document.querySelector("input:disabled")); // false 4186 */ 4187 4188 4189function isFocusable(element) { 4190 return matches(element, selector) && isVisible(element); 4191} 4192/** 4193 * Checks whether `element` is tabbable or not. 4194 * 4195 * @memberof tabbable 4196 * 4197 * @example 4198 * import { isTabbable } from "reakit-utils"; 4199 * 4200 * isTabbable(document.querySelector("input")); // true 4201 * isTabbable(document.querySelector("input[tabindex='-1']")); // false 4202 * isTabbable(document.querySelector("input[hidden]")); // false 4203 * isTabbable(document.querySelector("input:disabled")); // false 4204 */ 4205 4206function isTabbable(element) { 4207 return isFocusable(element) && !hasNegativeTabIndex(element); 4208} 4209/** 4210 * Returns all the focusable elements in `container`. 4211 * 4212 * @memberof tabbable 4213 * 4214 * @param {Element} container 4215 * 4216 * @returns {Element[]} 4217 */ 4218 4219function getAllFocusableIn(container) { 4220 var allFocusable = Array.from(container.querySelectorAll(selector)); 4221 allFocusable.unshift(container); 4222 return allFocusable.filter(isFocusable); 4223} 4224/** 4225 * Returns the first focusable element in `container`. 4226 * 4227 * @memberof tabbable 4228 * 4229 * @param {Element} container 4230 * 4231 * @returns {Element|null} 4232 */ 4233 4234function getFirstFocusableIn(container) { 4235 var _getAllFocusableIn = getAllFocusableIn(container), 4236 first = _getAllFocusableIn[0]; 4237 4238 return first || null; 4239} 4240/** 4241 * Returns all the tabbable elements in `container`, including the container 4242 * itself. 4243 * 4244 * @memberof tabbable 4245 * 4246 * @param {Element} container 4247 * @param fallbackToFocusable If `true`, it'll return focusable elements if there are no tabbable ones. 4248 * 4249 * @returns {Element[]} 4250 */ 4251 4252function getAllTabbableIn(container, fallbackToFocusable) { 4253 var allFocusable = Array.from(container.querySelectorAll(selector)); 4254 var allTabbable = allFocusable.filter(isTabbable); 4255 4256 if (isTabbable(container)) { 4257 allTabbable.unshift(container); 4258 } 4259 4260 if (!allTabbable.length && fallbackToFocusable) { 4261 return allFocusable; 4262 } 4263 4264 return allTabbable; 4265} 4266/** 4267 * Returns the first tabbable element in `container`, including the container 4268 * itself if it's tabbable. 4269 * 4270 * @memberof tabbable 4271 * 4272 * @param {Element} container 4273 * @param fallbackToFocusable If `true`, it'll return the first focusable element if there are no tabbable ones. 4274 * 4275 * @returns {Element|null} 4276 */ 4277 4278function getFirstTabbableIn(container, fallbackToFocusable) { 4279 var _getAllTabbableIn = getAllTabbableIn(container, fallbackToFocusable), 4280 first = _getAllTabbableIn[0]; 4281 4282 return first || null; 4283} 4284/** 4285 * Returns the last tabbable element in `container`, including the container 4286 * itself if it's tabbable. 4287 * 4288 * @memberof tabbable 4289 * 4290 * @param {Element} container 4291 * @param fallbackToFocusable If `true`, it'll return the last focusable element if there are no tabbable ones. 4292 * 4293 * @returns {Element|null} 4294 */ 4295 4296function getLastTabbableIn(container, fallbackToFocusable) { 4297 var allTabbable = getAllTabbableIn(container, fallbackToFocusable); 4298 return allTabbable[allTabbable.length - 1] || null; 4299} 4300/** 4301 * Returns the next tabbable element in `container`. 4302 * 4303 * @memberof tabbable 4304 * 4305 * @param {Element} container 4306 * @param fallbackToFocusable If `true`, it'll return the next focusable element if there are no tabbable ones. 4307 * 4308 * @returns {Element|null} 4309 */ 4310 4311function getNextTabbableIn(container, fallbackToFocusable) { 4312 var activeElement = getActiveElement(container); 4313 var allFocusable = getAllFocusableIn(container); 4314 var index = allFocusable.indexOf(activeElement); 4315 var slice = allFocusable.slice(index + 1); 4316 return slice.find(isTabbable) || allFocusable.find(isTabbable) || (fallbackToFocusable ? slice[0] : null); 4317} 4318/** 4319 * Returns the previous tabbable element in `container`. 4320 * 4321 * @memberof tabbable 4322 * 4323 * @param {Element} container 4324 * @param fallbackToFocusable If `true`, it'll return the previous focu
4324sable element if there are no tabbable ones. 4325 * 4326 * @returns {Element|null} 4327 */ 4328 4329function getPreviousTabbableIn(container, fallbackToFocusable) { 4330 var activeElement = getActiveElement(container); 4331 var allFocusable = getAllFocusableIn(container).reverse(); 4332 var index = allFocusable.indexOf(activeElement); 4333 var slice = allFocusable.slice(index + 1); 4334 return slice.find(isTabbable) || allFocusable.find(isTabbable) || (fallbackToFocusable ? slice[0] : null); 4335} 4336/** 4337 * Returns the closest focusable element. 4338 * 4339 * @memberof tabbable 4340 * 4341 * @param {Element} container 4342 * 4343 * @returns {Element|null} 4344 */ 4345 4346function getClosestFocusable(element) { 4347 while (element && !isFocusable(element)) { 4348 element = closest(element, selector); 4349 } 4350 4351 return element; 4352} 4353 4354 4355 4356;// CONCATENATED MODULE: ./node_modules/reakit/es/Role/Role.js 4357 4358 4359 4360 4361 4362// Automatically generated 4363var ROLE_KEYS = ["unstable_system"]; 4364 4365var useRole = createHook({ 4366 name: "Role", 4367 keys: ROLE_KEYS, 4368 propsAreEqual: function propsAreEqual(prev, next) { 4369 var prevSystem = prev.unstable_system, 4370 prevProps = _rollupPluginBabelHelpers_1f0bf8c2_objectWithoutPropertiesLoose(prev, ["unstable_system"]); 4371 4372 var nextSystem = next.unstable_system, 4373 nextProps = _rollupPluginBabelHelpers_1f0bf8c2_objectWithoutPropertiesLoose(next, ["unstable_system"]); 4374 4375 if (prevSystem !== nextSystem && !shallowEqual(prevSystem, nextSystem)) { 4376 return false; 4377 } 4378 4379 return shallowEqual(prevProps, nextProps); 4380 } 4381}); 4382var Role = createComponent({ 4383 as: "div", 4384 useHook: useRole 4385}); 4386 4387 4388 4389;// CONCATENATED MODULE: ./node_modules/reakit/es/Tabbable/Tabbable.js 4390 4391 4392 4393 4394 4395 4396 4397 4398 4399 4400 4401 4402 4403 4404 4405 4406// Automatically generated 4407var TABBABLE_KEYS = ["disabled", "focusable"]; 4408 4409var isSafariOrFirefoxOnMac = isUA("Mac") && !isUA("Chrome") && (isUA("Safari") || isUA("Firefox")); 4410 4411function focusIfNeeded(element) { 4412 if (!hasFocusWithin(element) && isFocusable(element)) { 4413 element.focus(); 4414 } 4415} 4416 4417function isNativeTabbable(element) { 4418 return ["BUTTON", "INPUT", "SELECT", "TEXTAREA", "A"].includes(element.tagName); 4419} 4420 4421function supportsDisabledAttribute(element) { 4422 return ["BUTTON", "INPUT", "SELECT", "TEXTAREA"].includes(element.tagName); 4423} 4424 4425function getTabIndex(trulyDisabled, nativeTabbable, supportsDisabled, htmlTabIndex) { 4426 if (trulyDisabled) { 4427 if (nativeTabbable && !supportsDisabled) { 4428 // Anchor, audio and video tags don't support the `disabled` attribute. 4429 // We must pass tabIndex={-1} so they don't receive focus on tab. 4430 return -1; 4431 } // Elements that support the `disabled` attribute don't need tabIndex. 4432 4433 4434 return undefined; 4435 } 4436 4437 if (nativeTabbable) { 4438 // If the element is enabled and it's natively tabbable, we don't need to 4439 // specify a tabIndex attribute unless it's explicitly set by the user. 4440 return htmlTabIndex; 4441 } // If the element is enabled and is not natively tabbable, we have to 4442 // fallback tabIndex={0}. 4443 4444 4445 return htmlTabIndex || 0; 4446} 4447 4448function useDisableEvent(htmlEventRef, disabled) { 4449 return (0,external_React_.useCallback)(function (event) { 4450 var _htmlEventRef$current; 4451 4452 (_htmlEventRef$current = htmlEventRef.current) === null || _htmlEventRef$current === void 0 ? void 0 : _htmlEventRef$current.call(htmlEventRef, event); 4453 if (event.defaultPrevented) return; 4454 4455 if (disabled) { 4456 event.stopPropagation(); 4457 event.preventDefault(); 4458 } 4459 }, [htmlEventRef, disabled]); 4460} 4461 4462var useTabbable = createHook({ 4463 name: "Tabbable", 4464 compose: useRole, 4465 keys: TABBABLE_KEYS, 4466 useOptions: function useOptions(options, _ref) { 4467 var disabled = _ref.disabled; 4468 return _objectSpread2({ 4469 disabled: disabled 4470 }, options); 4471 }, 4472 useProps: function useProps(options, _ref2) { 4473 var htmlRef = _ref2.ref, 4474 htmlTabIndex = _ref2.tabIndex, 4475 htmlOnClickCapture = _ref2.onClickCapture, 4476 htmlOnMouseDownCapture = _ref2.onMouseDownCapture, 4477 htmlOnMouseDown = _ref2.onMouseDown, 4478 htmlOnKeyPressCapture = _ref2.onKeyPressCapture, 4479 htmlStyle = _ref2.style, 4480 htmlProps = _rollupPluginBabelHelpers_1f0bf8c2_objectWithoutPropertiesLoose(_ref2, ["ref", "tabIndex", "onClickCapture", "onMouseDownCapture", "onMouseDown", "onKeyPressCapture", "style"]); 4481 4482 var ref = (0,external_React_.useRef)(null); 4483 var onClickCaptureRef = useLiveRef(htmlOnClickCapture); 4484 var onMouseDownCaptureRef = useLiveRef(htmlOnMouseDownCapture); 4485 var onMouseDownRef = useLiveRef(htmlOnMouseDown); 4486 var onKeyPressCaptureRef = useLiveRef(htmlOnKeyPressCapture); 4487 var trulyDisabled = !!options.disabled && !options.focusable; 4488 4489 var _React$useState = (0,external_React_.useState)(true), 4490 nativeTabbable = _React$useState[0], 4491 setNativeTabbable = _React$useState[1]; 4492 4493 var _React$useState2 = (0,external_React_.useState)(true), 4494 supportsDisabled = _React$useState2[0], 4495 setSupportsDisabled = _React$useState2[1]; 4496
4497 var style = options.disabled ? _objectSpread2({ 4498 pointerEvents: "none" 4499 }, htmlStyle) : htmlStyle; 4500 useIsomorphicEffect(function () { 4501 var tabbable = ref.current; 4502 4503 if (!tabbable) { 4504 false ? 0 : void 0; 4505 return; 4506 } 4507 4508 if (!isNativeTabbable(tabbable)) { 4509 setNativeTabbable(false); 4510 } 4511 4512 if (!supportsDisabledAttribute(tabbable)) { 4513 setSupportsDisabled(false); 4514 } 4515 }, []); 4516 var onClickCapture = useDisableEvent(onClickCaptureRef, options.disabled); 4517 var onMouseDownCapture = useDisableEvent(onMouseDownCaptureRef, options.disabled); 4518 var onKeyPressCapture = useDisableEvent(onKeyPressCaptureRef, options.disabled); 4519 var onMouseDown = (0,external_React_.useCallback)(function (event) { 4520 var _onMouseDownRef$curre; 4521 4522 (_onMouseDownRef$curre = onMouseDownRef.current) === null || _onMouseDownRef$curre === void 0 ? void 0 : _onMouseDownRef$curre.call(onMouseDownRef, event); 4523 var element = event.currentTarget; 4524 if (event.defaultPrevented) return; // Safari and Firefox on MacOS don't focus on buttons on mouse down 4525 // like other browsers/platforms. Instead, they focus on the closest 4526 // focusable ancestor element, which is ultimately the body element. So 4527 // we make sure to give focus to the tabbable element on mouse down so 4528 // it works consistently across browsers. 4529 4530 if (!isSafariOrFirefoxOnMac) return; 4531 if (isPortalEvent(event)) return; 4532 if (!isButton(element)) return; // We can't focus right away after on mouse down, otherwise it would 4533 // prevent drag events from happening. So we schedule the focus to the 4534 // next animation frame. 4535 4536 var raf = requestAnimationFrame(function () { 4537 element.removeEventListener("mouseup", focusImmediately, true); 4538 focusIfNeeded(element); 4539 }); // If mouseUp happens before the next animation frame (which is common 4540 // on touch screens or by just tapping the trackpad on MacBook's), we 4541 // cancel the animation frame and immediately focus on the element. 4542 4543 var focusImmediately = function focusImmediately() { 4544 cancelAnimationFrame(raf); 4545 focusIfNeeded(element); 4546 }; // By listening to the event in the capture phase, we make sure the 4547 // focus event is fired before the onMouseUp and onMouseUpCapture React 4548 // events, which is aligned with the default browser behavior. 4549 4550 4551 element.addEventListener("mouseup", focusImmediately, { 4552 once: true, 4553 capture: true 4554 }); 4555 }, []); 4556 return _objectSpread2({ 4557 ref: useForkRef(ref, htmlRef), 4558 style: style, 4559 tabIndex: getTabIndex(trulyDisabled, nativeTabbable, supportsDisabled, htmlTabIndex), 4560 disabled: trulyDisabled && supportsDisabled ? true : undefined, 4561 "aria-disabled": options.disabled ? true : undefined, 4562 onClickCapture: onClickCapture, 4563 onMouseDownCapture: onMouseDownCapture, 4564 onMouseDown: onMouseDown, 4565 onKeyPressCapture: onKeyPressCapture 4566 }, htmlProps); 4567 } 4568}); 4569var Tabbable = createComponent({ 4570 as: "div", 4571 useHook: useTabbable 4572}); 4573 4574 4575 4576;// CONCATENATED MODULE: ./node_modules/reakit/es/Clickable/Clickable.js 4577 4578 4579 4580 4581 4582 4583 4584 4585 4586 4587 4588 4589 4590 4591 4592 4593 4594 4595// Automatically generated 4596var CLICKABLE_KEYS = ["unstable_clickOnEnter", "unstable_clickOnSpace"]; 4597 4598function isNativeClick(event) { 4599 var element = event.currentTarget; 4600 if (!event.isTrusted) return false; // istanbul ignore next: can't test trusted events yet 4601 4602 return isButton(element) || element.tagName === "INPUT" || element.tagName === "TEXTAREA" || element.tagName === "A" || element.tagName === "SELECT"; 4603} 4604 4605var useClickable = createHook({ 4606 name: "Clickable", 4607 compose: useTabbable, 4608 keys: CLICKABLE_KEYS, 4609 useOptions: function useOptions(_ref) { 4610 var _ref$unstable_clickOn = _ref.unstable_clickOnEnter, 4611 unstable_clickOnEnter = _ref$unstable_clickOn === void 0 ? true : _ref$unstable_clickOn, 4612 _ref$unstable_clickOn2 = _ref.unstable_clickOnSpace, 4613 unstable_clickOnSpace = _ref$unstable_clickOn2 === void 0 ? true : _ref$unstable_clickOn2, 4614 options = _rollupPluginBabelHelpers_1f0bf8c2_objectWithoutPropertiesLoose(_ref, ["unstable_clickOnEnter", "unstable_clickOnSpace"]); 4615
4616 return _objectSpread2({ 4617 unstable_clickOnEnter: unstable_clickOnEnter, 4618 unstable_clickOnSpace: unstable_clickOnSpace 4619 }, options); 4620 }, 4621 useProps: function useProps(options, _ref2) { 4622 var htmlOnKeyDown = _ref2.onKeyDown, 4623 htmlOnKeyUp = _ref2.onKeyUp, 4624 htmlProps = _rollupPluginBabelHelpers_1f0bf8c2_objectWithoutPropertiesLoose(_ref2, ["onKeyDown", "onKeyUp"]); 4625 4626 var _React$useState = (0,external_React_.useState)(false), 4627 active = _React$useState[0], 4628 setActive = _React$useState[1]; 4629 4630 var onKeyDownRef = useLiveRef(htmlOnKeyDown); 4631 var onKeyUpRef = useLiveRef(htmlOnKeyUp); 4632 var onKeyDown = (0,external_React_.useCallback)(function (event) { 4633 var _onKeyDownRef$current; 4634 4635 (_onKeyDownRef$current = onKeyDownRef.current) === null || _onKeyDownRef$current === void 0 ? void 0 : _onKeyDownRef$current.call(onKeyDownRef, event); 4636 if (event.defaultPrevented) return; 4637 if (options.disabled) return; 4638 if (event.metaKey) return; 4639 if (!isSelfTarget(event)) return; 4640 var isEnter = options.unstable_clickOnEnter && event.key === "Enter"; 4641 var isSpace = options.unstable_clickOnSpace && event.key === " "; 4642 4643 if (isEnter || isSpace) { 4644 if (isNativeClick(event)) return; 4645 event.preventDefault(); 4646 4647 if (isEnter) { 4648 event.currentTarget.click(); 4649 } else if (isSpace) {
4650 setActive(true); 4651 } 4652 } 4653 }, [options.disabled, options.unstable_clickOnEnter, options.unstable_clickOnSpace]); 4654 var onKeyUp = (0,external_React_.useCallback)(function (event) { 4655 var _onKeyUpRef$current; 4656 4657 (_onKeyUpRef$current = onKeyUpRef.current) === null || _onKeyUpRef$current === void 0 ? void 0 : _onKeyUpRef$current.call(onKeyUpRef, event); 4658 if (event.defaultPrevented) return; 4659 if (options.disabled) return; 4660 if (event.metaKey) return; 4661 var isSpace = options.unstable_clickOnSpace && event.key === " "; 4662 4663 if (active && isSpace) { 4664 setActive(false); 4665 event.currentTarget.click(); 4666 } 4667 }, [options.disabled, options.unstable_clickOnSpace, active]); 4668 return _objectSpread2({ 4669 "data-active": active || undefined, 4670 onKeyDown: onKeyDown, 4671 onKeyUp: onKeyUp 4672 }, htmlProps); 4673 } 4674}); 4675var Clickable = createComponent({ 4676 as: "button", 4677 memo: true, 4678 useHook: useClickable 4679}); 4680 4681 4682 4683;// CONCATENATED MODULE: ./node_modules/reakit/es/getCurrentId-5aa9849e.js 4684function findFirstEnabledItem(items, excludeId) { 4685 if (excludeId) { 4686 return items.find(function (item) { 4687 return !item.disabled && item.id !== excludeId; 4688 }); 4689 } 4690 4691 return items.find(function (item) { 4692 return !item.disabled; 4693 }); 4694} 4695 4696function getCurrentId(options, passedId) { 4697 var _findFirstEnabledItem; 4698 4699 if (passedId || passedId === null) { 4700 return passedId; 4701 } 4702 4703 if (options.currentId || options.currentId === null) { 4704 return options.currentId; 4705 } 4706 4707 return (_findFirstEnabledItem = findFirstEnabledItem(options.items || [])) === null || _findFirstEnabledItem === void 0 ? void 0 : _findFirstEnabledItem.id; 4708} 4709 4710 4711 4712;// CONCATENATED MODULE: ./node_modules/reakit/es/__keys-6742f591.js 4713// Automatically generated 4714var 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"]; 4715var COMPOSITE_KEYS = COMPOSITE_STATE_KEYS; 4716var COMPOSITE_GROUP_KEYS = COMPOSITE_KEYS; 4717var COMPOSITE_ITEM_KEYS = COMPOSITE_GROUP_KEYS; 4718var COMPOSITE_ITEM_WIDGET_KEYS = (/* unused pure expression or super */ null && (COMPOSITE_ITEM_KEYS)); 4719 4720 4721 4722;// CONCATENATED MODULE: ./node_modules/reakit/es/userFocus-e16425e3.js 4723function userFocus(element) { 4724 element.userFocus = true; 4725 element.focus(); 4726 element.userFocus = false; 4727} 4728function hasUserFocus(element) { 4729 return !!element.userFocus; 4730} 4731function setUserFocus(element, value) { 4732 element.userFocus = value; 4733} 4734 4735 4736 4737;// CONCATENATED MODULE: ./node_modules/reakit-utils/es/isTextField.js 4738/** 4739 * Check whether the given element is a text field, where text field is defined 4740 * by the ability to select within the input, or that it is contenteditable. 4741 * 4742 * @example 4743 * import { isTextField } from "reakit-utils"; 4744 * 4745 * isTextField(document.querySelector("div")); // false 4746 * isTextField(document.querySelector("input")); // true 4747 * isTextField(document.querySelector("input[type='button']")); // false 4748 * isTextField(document.querySelector("textarea")); // true 4749 * isTextField(document.querySelector("div[contenteditable='true']")); // true 4750 */ 4751function isTextField_isTextField(element) { 4752 try { 4753 var isTextInput = element instanceof HTMLInputElement && element.selectionStart !== null; 4754 var isTextArea = element.tagName === "TEXTAREA"; 4755 var isContentEditable = element.contentEditable === "true"; 4756 return isTextInput || isTextArea || isContentEditable || false; 4757 } catch (error) { 4758 // Safari throws an exception when trying to get `selectionStart` 4759 // on non-text <input> elements (which, understandably, don't 4760 // have the text selection API). We catch this via a try/catch 4761 // block, as opposed to a more explicit check of the element's 4762 // input types, because of Safari's non-standard behavior. This 4763 // also means we don't have to worry about the list of input 4764 // types that support `selectionStart` changing as the HTML spec 4765 // evolves over time. 4766 return false;
4767 } 4768} 4769 4770 4771 4772;// CONCATENATED MODULE: ./node_modules/reakit-utils/es/hasFocus.js 4773 4774 4775 4776/** 4777 * Checks if `element` has focus. Elements that are referenced by 4778 * `aria-activedescendant` are also considered. 4779 * 4780 * @example 4781 * import { hasFocus } from "reakit-utils"; 4782 * 4783 * hasFocus(document.getElementById("id")); 4784 */ 4785 4786function hasFocus(element) { 4787 var activeElement = getActiveElement_getActiveElement(element); 4788 if (!activeElement) return false; 4789 if (activeElement === element) return true; 4790 var activeDescendant = activeElement.getAttribute("aria-activedescendant"); 4791 if (!activeDescendant) return false; 4792 return activeDescendant === element.id; 4793} 4794 4795 4796 4797;// CONCATENATED MODULE: ./node_modules/reakit-utils/es/ensureFocus.js 4798 4799 4800 4801 4802/** 4803 * Ensures `element` will receive focus if it's not already. 4804 * 4805 * @example 4806 * import { ensureFocus } from "reakit-utils"; 4807 * 4808 * ensureFocus(document.activeElement); // does nothing 4809 * 4810 * const element = document.querySelector("input"); 4811 * 4812 * ensureFocus(element); // focuses element 4813 * ensureFocus(element, { preventScroll: true }); // focuses element preventing scroll jump 4814 * 4815 * function isActive(el) { 4816 * return el.dataset.active === "true"; 4817 * } 4818 * 4819 * ensureFocus(document.querySelector("[data-active='true']"), { isActive }); // does nothing 4820 * 4821 * @returns {number} `requestAnimationFrame` call ID so it can be passed to `cancelAnimationFrame` if needed. 4822 */ 4823function ensureFocus(element, _temp) { 4824 var _ref = _temp === void 0 ? {} : _temp, 4825 preventScroll = _ref.preventScroll, 4826 _ref$isActive = _ref.isActive, 4827 isActive = _ref$isActive === void 0 ? hasFocus : _ref$isActive; 4828 4829 if (isActive(element)) return -1; 4830 element.focus({ 4831 preventScroll: preventScroll 4832 }); 4833 if (isActive(element)) return -1; 4834 return requestAnimationFrame(function () { 4835 element.focus({ 4836 preventScroll: preventScroll 4837 }); 4838 }); 4839} 4840 4841 4842 4843;// CONCATENATED MODULE: ./node_modules/reakit/es/Id/IdProvider.js 4844 4845 4846var defaultPrefix = "id"; 4847function generateRandomString(prefix) { 4848 if (prefix === void 0) { 4849 prefix = defaultPrefix; 4850 } 4851 4852 return "" + (prefix ? prefix + "-" : "") + Math.random().toString(32).substr(2, 6); 4853} 4854 4855var unstable_IdContext = /*#__PURE__*/(0,external_React_.createContext)(generateRandomString); 4856function unstable_IdProvider(_ref) { 4857 var children = _ref.children, 4858 _ref$prefix = _ref.prefix, 4859 prefix = _ref$prefix === void 0 ? defaultPrefix : _ref$prefix; 4860 var count = useRef(0); 4861 var generateId = useCallback(function (localPrefix) { 4862 if (localPrefix === void 0) { 4863 localPrefix = prefix; 4864 } 4865 4866 return "" + (localPrefix ? localPrefix + "-" : "") + ++count.current; 4867 }, [prefix]); 4868 return /*#__PURE__*/createElement(unstable_IdContext.Provider, { 4869 value: generateId 4870 }, children); 4871} 4872 4873 4874 4875;// CONCATENATED MODULE: ./node_modules/reakit/es/Id/Id.js 4876 4877 4878 4879 4880 4881 4882// Automatically generated 4883var ID_STATE_KEYS = ["baseId", "unstable_idCountRef", "setBaseId"]; 4884var ID_KEYS = [].concat(ID_STATE_KEYS, ["id"]); 4885 4886var unstable_useId = createHook({ 4887 keys: ID_KEYS, 4888 useOptions: function useOptions(options, htmlProps) { 4889 var generateId = (0,external_React_.useContext)(unstable_IdContext); 4890 4891 var _React$useState = (0,external_React_.useState)(function () { 4892 // This comes from useIdState 4893 if (options.unstable_idCountRef) { 4894 options.unstable_idCountRef.current += 1; 4895 return "-" + options.unstable_idCountRef.current; 4896 } // If there's no useIdState, we check if `baseId` was passed (as a prop, 4897 // not from useIdState). 4898 4899 4900 if (options.baseId) { 4901 return "-" + generateId(""); 4902 } 4903 4904 return ""; 4905 }), 4906 suffix = _React$useState[0]; // `baseId` will be the prop passed directly as a prop or via useIdState. 4907 // If there's neither, then it'll fallback to Context's generateId. 4908 // This generateId can result in a sequential ID (if there's a Provider) 4909 // or a random string (without Provider). 4910 4911 4912 var baseId = (0,external_React_.useMemo)(function () { 4913 return options.baseId || generateId(); 4914 }, [options.baseId, generateId]); 4915 var id = htmlProps.id || options.id || "" + baseId + suffix;
4916 return _objectSpread2(_objectSpread2({}, options), {}, { 4917 id: id 4918 }); 4919 }, 4920 useProps: function useProps(options, htmlProps) { 4921 return _objectSpread2({ 4922 id: options.id 4923 }, htmlProps); 4924 } 4925}); 4926var unstable_Id = createComponent({ 4927 as: "div", 4928 useHook: unstable_useId 4929}); 4930 4931 4932 4933;// CONCATENATED MODULE: ./node_modules/reakit-utils/es/createEvent.js 4934 4935 4936/** 4937 * Creates an `Event` in a way that also works on IE 11. 4938 * 4939 * @example 4940 * import { createEvent } from "reakit-utils"; 4941 * 4942 * const el = document.getElementById("id"); 4943 * el.dispatchEvent(createEvent(el, "blur", { bubbles: false })); 4944 */ 4945 4946function createEvent(element, type, eventInit) { 4947 if (typeof Event === "function") { 4948 return new Event(type, eventInit); 4949 } // IE 11 doesn't support Event constructors 4950 4951 4952 var event = getDocument_getDocument(element).createEvent("Event"); 4953 event.initEvent(type, eventInit === null || eventInit === void 0 ? void 0 : eventInit.bubbles, eventInit === null || eventInit === void 0 ? void 0 : eventInit.cancelable); 4954 return event; 4955} 4956 4957 4958 4959;// CONCATENATED MODULE: ./node_modules/reakit-utils/es/fireEvent.js 4960 4961 4962 4963/** 4964 * Creates and dispatches `Event` in a way that also works on IE 11.
4965 * 4966 * @example 4967 * import { fireEvent } from "reakit-utils"; 4968 * 4969 * fireEvent(document.getElementById("id"), "blur", { 4970 * bubbles: true, 4971 * cancelable: true, 4972 * }); 4973 */ 4974 4975function fireEvent(element, type, eventInit) { 4976 return element.dispatchEvent(createEvent(element, type, eventInit)); 4977} 4978 4979 4980 4981;// CONCATENATED MODULE: ./node_modules/reakit/es/setTextFieldValue-0a221f4e.js 4982 4983 4984function setTextFieldValue(element, value) { 4985 if (element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement) { 4986 var _Object$getOwnPropert; 4987 4988 var proto = Object.getPrototypeOf(element); 4989 var setValue = (_Object$getOwnPropert = Object.getOwnPropertyDescriptor(proto, "value")) === null || _Object$getOwnPropert === void 0 ? void 0 : _Object$getOwnPropert.set; 4990 4991 if (setValue) { 4992 setValue.call(element, value); 4993 fireEvent(element, "input", { 4994 bubbles: true 4995 }); 4996 } 4997 } 4998} 4999 5000 5001 5002;// CONCATENATED MODULE: ./node_modules/reakit/es/Composite/CompositeItem.js 5003 5004 5005 5006 5007 5008 5009 5010 5011 5012 5013 5014 5015 5016 5017 5018 5019 5020 5021 5022 5023 5024 5025 5026 5027 5028 5029 5030 5031 5032function getWidget(itemElement) { 5033 return itemElement.querySelector("[data-composite-item-widget]"); 5034} 5035 5036function useItem(options) { 5037 return (0,external_React_.useMemo)(function () { 5038 var _options$items; 5039 5040 return (_options$items = options.items) === null || _options$items === void 0 ? void 0 : _options$items.find(function (item) { 5041 return options.id && item.id === options.id; 5042 }); 5043 }, [options.items, options.id]); 5044} 5045 5046function targetIsAnotherItem(event, items) { 5047 if (isSelfTarget(event)) return false; 5048 5049 for (var _iterator = _createForOfIteratorHelperLoose(items), _step; !(_step = _iterator()).done;) { 5050 var item = _step.value; 5051 5052 if (item.ref.current === event.target) { 5053 return true; 5054 } 5055 } 5056 5057 return false; 5058} 5059 5060var useCompositeItem = createHook({ 5061 name: "CompositeItem", 5062 compose: [useClickable, unstable_useId], 5063 keys: COMPOSITE_ITEM_KEYS, 5064 propsAreEqual: function propsAreEqual(prev, next) { 5065 if (!next.id || prev.id !== next.id) { 5066 return useClickable.unstable_propsAreEqual(prev, next); 5067 } 5068 5069 var prevCurrentId = prev.currentId, 5070 prevMoves = prev.unstable_moves, 5071 prevProps = _rollupPluginBabelHelpers_1f0bf8c2_objectWithoutPropertiesLoose(prev, ["currentId", "unstable_moves"]); 5072 5073 var nextCurrentId = next.currentId, 5074 nextMoves = next.unstable_moves, 5075 nextProps = _rollupPluginBabelHelpers_1f0bf8c2_objectWithoutPropertiesLoose(next, ["currentId", "unstable_moves"]); 5076 5077 if (nextCurrentId !== prevCurrentId) { 5078 if (next.id === nextCurrentId || next.id === prevCurrentId) { 5079 return false; 5080 } 5081 } else if (prevMoves !== nextMoves) { 5082 return false; 5083 } 5084 5085 return useClickable.unstable_propsAreEqual(prevProps, nextProps); 5086 }, 5087 useOptions: function useOptions(options) { 5088 return _objectSpread2(_objectSpread2({}, options), {}, { 5089 id: options.id, 5090 currentId: getCurrentId(options), 5091 unstable_clickOnSpace: options.unstable_hasActiveWidget ? false : options.unstable_clickOnSpace 5092 }); 5093 }, 5094 useProps: function useProps(options, _ref) { 5095 var _options$items2; 5096 5097 var htmlRef = _ref.ref, 5098 _ref$tabIndex = _ref.tabIndex, 5099 htmlTabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex, 5100 htmlOnMouseDown = _ref.onMouseDown, 5101 htmlOnFocus = _ref.onFocus, 5102 htmlOnBlurCapture = _ref.onBlurCapture, 5103 htmlOnKeyDown = _ref.onKeyDown, 5104 htmlOnClick = _ref.onClick, 5105 htmlProps = _rollupPluginBabelHelpers_1f0bf8c2_objectWithoutPropertiesLoose(_ref, ["ref", "tabIndex", "onMouseDown", "onFocus", "onBlurCapture", "onKeyDown", "onClick"]); 5106 5107 var ref = (0,external_React_.useRef)(null); 5108 var id = options.id; 5109 var trulyDisabled = options.disabled && !options.focusable; 5110 var isCurrentItem = options.currentId === id; 5111 var isCurrentItemRef = useLiveRef(isCurrentItem); 5112 var hasFocusedComposite = (0,external_React_.useRef)(false); 5113 var item = useItem(options); 5114 var onMouseDownRef = useLiveRef(htmlOnMouseDown); 5115 var onFocusRef = useLiveRef(htmlOnFocus); 5116 var onBlurCaptureRef = useLiveRef(htmlOnBlurCapture); 5117 var onKeyDownRef = useLiveRef(htmlOnKeyDown); 5118 var onClickRef = useLiveRef(htmlOnClick); 5119 var shouldTabIndex = !options.unstable_virtual && !options.unstable_hasActiveWidget && isCurrentItem || // We don't want to set tabIndex="-1" when using CompositeItem as a 5120 // standalone component, without state props. 5121 !((_options$items2 = options.items) !== null && _options$items2 !== void 0 && _options$items2.length); 5122 (0,external_React_.useEffect)(function () { 5123 var _options$registerItem; 5124 5125 if (!id) return undefined; 5126 (_options$registerItem = options.registerItem) === null || _options$registerItem === void 0 ? void 0 : _options$registerItem.call(options, { 5127 id: id, 5128 ref: ref, 5129 disabled: !!trulyDisabled 5130 }); 5131 return function () { 5132 var _options$unregisterIt; 5133 5134 (_options$unregisterIt = options.unregisterItem) === null || _options$unregisterIt === void 0 ? void 0 : _options$unregisterIt.call(options, id); 5135 }; 5136 }, [id, trulyDisabled, options.registerItem, options.unregisterItem]); 5137 (0,external_React_.useEffect)(function () { 5138 var element = ref.current; 5139 5140 if (!element) { 5141 false ? 0 : void 0; 5142 return; 5143 } // `moves` will be incremented whenever next, previous, up, down, first, 5144 // last or move have been called. This means that the composite item will 5145 // be focused whenever some of these functions are called. We're using 5146 // isCurrentItemRef instead of isCurrentItem because we don't want to 5147 // focus the item if isCurrentItem changes (and options.moves doesn't). 5148 5149 5150 if (options.unstable_moves && isCurrentItemRef.current) { 5151 userFocus(element); 5152 } 5153 }, [options.unstable_moves]); 5154 var onMouseDown = (0,external_React_.useCallback)(function (event) { 5155 var _onMouseDownRef$curre; 5156 5157 (_onMouseDownRef$curre = onMouseDownRef.current) === null || _onMouseDownRef$curre === void 0 ? void 0 : _onMouseDownRef$curre.call(onMouseDownRef, event); 5158 setUserFocus(event.currentTarget, true); 5159 }, []); 5160 var onFocus = (0,external_React_.useCallback)(function (event) { 5161 var _onFocusRef$current, _options$setCurrentId; 5162 5163 var shouldFocusComposite = hasUserFocus(event.currentTarget); 5164 setUserFocus(event.currentTarget, false);
5165 (_onFocusRef$current = onFocusRef.current) === null || _onFocusRef$current === void 0 ? void 0 : _onFocusRef$current.call(onFocusRef, event); 5166 if (event.defaultPrevented) return; 5167 if (isPortalEvent(event)) return; 5168 if (!id) return; 5169 if (targetIsAnotherItem(event, options.items)) return; 5170 (_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 5171 // composite container receives focus, not the composite item. 5172 // But we don't want to do this if the target is another focusable 5173 // element inside the composite item, such as CompositeItemWidget. 5174 5175 if (shouldFocusComposite && options.unstable_virtual && options.baseId && isSelfTarget(event)) { 5176 var target = event.target; 5177 var composite = getDocument_getDocument(target).getElementById(options.baseId); 5178 5179 if (composite) { 5180 hasFocusedComposite.current = true; 5181 ensureFocus(composite); 5182 } 5183 } 5184 }, [id, options.items, options.setCurrentId, options.unstable_virtual, options.baseId]); 5185 var onBlurCapture = (0,external_React_.useCallback)(function (event) { 5186 var _onBlurCaptureRef$cur; 5187 5188 (_onBlurCaptureRef$cur = onBlurCaptureRef.current) === null || _onBlurCaptureRef$cur === void 0 ? void 0 : _onBlurCaptureRef$cur.call(onBlurCaptureRef, event); 5189 if (event.defaultPrevented) return; 5190 5191 if (options.unstable_virtual && hasFocusedComposite.current) { 5192 // When hasFocusedComposite is true, composite has been focused right 5193 // after focusing this item. This is an intermediate blur event, so 5194 // we ignore it. 5195 hasFocusedComposite.current = false; 5196 event.preventDefault(); 5197 event.stopPropagation(); 5198 } 5199 }, [options.unstable_virtual]); 5200 var onKeyDown = (0,external_React_.useCallback)(function (event) { 5201 var _onKeyDownRef$current; 5202 5203 if (!isSelfTarget(event)) return; 5204 var isVertical = options.orientation !== "horizontal"; 5205 var isHorizontal = options.orientation !== "vertical"; 5206 var isGrid = !!(item !== null && item !== void 0 && item.groupId); 5207 var keyMap = { 5208 ArrowUp: (isGrid || isVertical) && options.up, 5209 ArrowRight: (isGrid || isHorizontal) && options.next,
5210 ArrowDown: (isGrid || isVertical) && options.down, 5211 ArrowLeft: (isGrid || isHorizontal) && options.previous, 5212 Home: function Home() { 5213 if (!isGrid || event.ctrlKey) { 5214 var _options$first; 5215 5216 (_options$first = options.first) === null || _options$first === void 0 ? void 0 : _options$first.call(options); 5217 } else { 5218 var _options$previous; 5219 5220 (_options$previous = options.previous) === null || _options$previous === void 0 ? void 0 : _options$previous.call(options, true); 5221 } 5222 }, 5223 End: function End() { 5224 if (!isGrid || event.ctrlKey) { 5225 var _options$last; 5226 5227 (_options$last = options.last) === null || _options$last === void 0 ? void 0 : _options$last.call(options); 5228 } else { 5229 var _options$next; 5230 5231 (_options$next = options.next) === null || _options$next === void 0 ? void 0 : _options$next.call(options, true); 5232 } 5233 }, 5234 PageUp: function PageUp() { 5235 if (isGrid) { 5236 var _options$up; 5237 5238 (_options$up = options.up) === null || _options$up === void 0 ? void 0 : _options$up.call(options, true); 5239 } else { 5240 var _options$first2; 5241 5242 (_options$first2 = options.first) === null || _options$first2 === void 0 ? void 0 : _options$first2.call(options); 5243 } 5244 }, 5245 PageDown: function PageDown() { 5246 if (isGrid) { 5247 var _options$down; 5248 5249 (_options$down = options.down) === null || _options$down === void 0 ? void 0 : _options$down.call(options, true); 5250 } else { 5251 var _options$last2; 5252 5253 (_options$last2 = options.last) === null || _options$last2 === void 0 ? void 0 : _options$last2.call(options); 5254 } 5255 } 5256 }; 5257 var action = keyMap[event.key]; 5258 5259 if (action) { 5260 event.preventDefault(); 5261 action(); 5262 return; 5263 } 5264 5265 (_onKeyDownRef$current = onKeyDownRef.current) === null || _onKeyDownRef$current === void 0 ? void 0 : _onKeyDownRef$current.call(onKeyDownRef, event); 5266 if (event.defaultPrevented) return; 5267 5268 if (event.key.length === 1 && event.key !== " ") { 5269 var widget = getWidget(event.currentTarget); 5270 5271 if (widget && isTextField_isTextField(widget)) { 5272 widget.focus(); 5273 setTextFieldValue(widget, ""); 5274 } 5275 } else if (event.key === "Delete" || event.key === "Backspace") { 5276 var _widget = getWidget(event.currentTarget); 5277 5278 if (_widget && isTextField_isTextField(_widget)) { 5279 event.preventDefault(); 5280 setTextFieldValue(_widget, ""); 5281 } 5282 } 5283 }, [options.orientation, item, options.up, options.next, options.down, options.previous, options.first, options.last]); 5284 var onClick = (0,external_React_.useCallback)(function (event) { 5285 var _onClickRef$current; 5286 5287 (_onClickRef$current = onClickRef.current) === null || _onClickRef$current === void 0 ? void 0 : _onClickRef$current.call(onClickRef, event); 5288 if (event.defaultPrevented) return; 5289 var element = event.currentTarget; 5290 var widget = getWidget(element); 5291 5292 if (widget && !hasFocusWithin(widget)) { 5293 // If there's a widget inside the composite item, we make sure it's 5294 // focused when pressing enter, space or clicking on the composite item. 5295 widget.focus(); 5296 } 5297 }, []); 5298 return _objectSpread2({ 5299 ref: useForkRef(ref, htmlRef), 5300 id: id, 5301 tabIndex: shouldTabIndex ? htmlTabIndex : -1, 5302 "aria-selected": options.unstable_virtual && isCurrentItem ? true : undefined, 5303 onMouseDown: onMouseDown, 5304 onFocus: onFocus, 5305 onBlurCapture: onBlurCapture, 5306 onKeyDown: onKeyDown, 5307 onClick: onClick 5308 }, htmlProps); 5309 } 5310}); 5311var CompositeItem = createComponent({ 5312 as: "button", 5313 memo: true, 5314 useHook: useCompositeItem 5315}); 5316 5317 5318 5319;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/PNRLI7OV.js 5320var __defProp = Object.defineProperty; 5321var __defProps = Object.defineProperties; 5322var __getOwnPropDescs = Object.getOwnPropertyDescriptors; 5323var __getOwnPropSymbols = Object.getOwnPropertySymbols; 5324var __hasOwnProp = Object.prototype.hasOwnProperty; 5325var __propIsEnum = Object.prototype.propertyIsEnumerable; 5326var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value; 5327var PNRLI7OV_spreadValues = (a, b) => { 5328 for (var prop in b || (b = {})) 5329 if (__hasOwnProp.call(b, prop)) 5330 __defNormalProp(a, prop, b[prop]); 5331 if (__getOwnPropSymbols) 5332 for (var prop of __getOwnPropSymbols(b)) { 5333 if (__propIsEnum.call(b, prop)) 5334 __defNormalProp(a, prop, b[prop]); 5335 } 5336 return a; 5337}; 5338var PNRLI7OV_spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b)); 5339var __objRest = (source, exclude) => { 5340 var target = {}; 5341 for (var prop in source) 5342 if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0) 5343 target[prop] = source[prop]; 5344 if (source != null && __getOwnPropSymbols) 5345 for (var prop of __getOwnPropSymbols(source)) { 5346 if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop)) 5347 target[prop] = source[prop]; 5348 } 5349 return target; 5350}; 5351 5352 5353 5354;// CONCATENATED MODULE: ./node_modules/@ariakit/core/esm/__chunks/PNRLI7OV.js 5355var PNRLI7OV_defProp = Object.defineProperty; 5356var PNRLI7OV_defProps = Object.defineProperties; 5357var PNRLI7OV_getOwnPropDescs = Object.getOwnPropertyDescriptors; 5358var PNRLI7OV_getOwnPropSymbols = Object.getOwnPropertySymbols; 5359var PNRLI7OV_hasOwnProp = Object.prototype.hasOwnProperty; 5360var PNRLI7OV_propIsEnum = Object.prototype.propertyIsEnumerable; 5361var PNRLI7OV_defNormalProp = (obj, key, value) => key in obj ? PNRLI7OV_defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value; 5362var _chunks_PNRLI7OV_spreadValues = (a, b) => { 5363 for (var prop in b || (b = {})) 5364 if (PNRLI7OV_hasOwnProp.call(b, prop)) 5365 PNRLI7OV_defNormalProp(a, prop, b[prop]); 5366 if (PNRLI7OV_getOwnPropSymbols) 5367 for (var prop of PNRLI7OV_getOwnPropSymbols(b)) { 5368 if (PNRLI7OV_propIsEnum.call(b, prop)) 5369 PNRLI7OV_defNormalProp(a, prop, b[prop]); 5370 } 5371 return a; 5372}; 5373var _chunks_PNRLI7OV_spreadProps = (a, b) => PNRLI7OV_defProps(a, PNRLI7OV_getOwnPropDescs(b)); 5374var PNRLI7OV_objRest = (source, exclude) => { 5375 var target = {}; 5376 for (var prop in source) 5377 if (PNRLI7OV_hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0) 5378 target[prop] = source[prop]; 5379 if (source != null && PNRLI7OV_getOwnPropSymbols) 5380 for (var prop of PNRLI7OV_getOwnPropSymbols(source)) {
5381 if (exclude.indexOf(prop) < 0 && PNRLI7OV_propIsEnum.call(source, prop)) 5382 target[prop] = source[prop]; 5383 } 5384 return target; 5385}; 5386 5387 5388 5389;// CONCATENATED MODULE: ./node_modules/@ariakit/core/esm/__chunks/WVTCK5PV.js 5390 5391
5392// src/utils/misc.ts 5393function noop(..._) { 5394} 5395function WVTCK5PV_shallowEqual(a, b) { 5396 if (a === b) 5397 return true; 5398 if (!a) 5399 return false; 5400 if (!b) 5401 return false; 5402 if (typeof a !== "object") 5403 return false; 5404 if (typeof b !== "object") 5405 return false; 5406 const aKeys = Object.keys(a); 5407 const bKeys = Object.keys(b); 5408 const { length } = aKeys; 5409 if (bKeys.length !== length) 5410 return false; 5411 for (const key of aKeys) { 5412 if (a[key] !== b[key]) { 5413 return false; 5414 } 5415 } 5416 return true; 5417} 5418function WVTCK5PV_applyState(argument, currentValue) { 5419 if (isUpdater(argument)) { 5420 const value = isLazyValue(currentValue) ? currentValue() : currentValue; 5421 return argument(value); 5422 } 5423 return argument; 5424} 5425function isUpdater(argument) { 5426 return typeof argument === "function"; 5427} 5428function isLazyValue(value) { 5429 return typeof value === "function"; 5430} 5431function WVTCK5PV_isObject(arg) { 5432 return typeof arg === "object" && arg != null; 5433} 5434function isEmpty(arg) { 5435 if (Array.isArray(arg)) 5436 return !arg.length; 5437 if (WVTCK5PV_isObject(arg)) 5438 return !Object.keys(arg).length; 5439 if (arg == null) 5440 return true; 5441 if (arg === "") 5442 return true; 5443 return false; 5444} 5445function isInteger(arg) { 5446 if (typeof arg === "number") { 5447 return Math.floor(arg) === arg; 5448 } 5449 return String(Math.floor(Number(arg))) === arg; 5450} 5451function WVTCK5PV_hasOwnProperty(object, prop) { 5452 return Object.prototype.hasOwnProperty.call(object, prop); 5453} 5454function chain(...fns) { 5455 return (...args) => { 5456 for (const fn of fns) { 5457 if (typeof fn === "function") { 5458 fn(...args); 5459 } 5460 } 5461 }; 5462} 5463function cx(...args) { 5464 return args.filter(Boolean).join(" ") || void 0; 5465} 5466function normalizeString(str) { 5467 return str.normalize("NFD").replace(/[\u0300-\u036f]/g, ""); 5468} 5469function omit(object, keys) { 5470 const result = _chunks_PNRLI7OV_spreadValues({}, object); 5471 for (const key of keys) { 5472 if (WVTCK5PV_hasOwnProperty(result, key)) { 5473 delete result[key]; 5474 } 5475 } 5476 return result; 5477} 5478function pick(object, paths) { 5479 const result = {}; 5480 for (const key of paths) { 5481 if (WVTCK5PV_hasOwnProperty(object, key)) { 5482 result[key] = object[key]; 5483 } 5484 } 5485 return result; 5486} 5487function identity(value) { 5488 return value; 5489} 5490function beforePaint(cb = noop) { 5491 const raf = requestAnimationFrame(cb); 5492 return () => cancelAnimationFrame(raf); 5493} 5494function afterPaint(cb = noop) { 5495 let raf = requestAnimationFrame(() => { 5496 raf = requestAnimationFrame(cb); 5497 }); 5498 return () => cancelAnimationFrame(raf); 5499} 5500function invariant(condition, message) { 5501 if (condition) 5502 return; 5503 if (typeof message !== "string") 5504 throw new Error("Invariant failed"); 5505 throw new Error(message); 5506} 5507function getKeys(obj) { 5508 return Object.keys(obj); 5509} 5510function isFalsyBooleanCallback(booleanOrCallback, ...args) { 5511 const result = typeof booleanOrCallback === "function" ? booleanOrCallback(...args) : booleanOrCallback; 5512 if (result == null) 5513 return false; 5514 return !result; 5515} 5516function defaultValue(...values) { 5517 for (const value of values) { 5518 if (value !== void 0) 5519 return value; 5520 } 5521 return void 0; 5522} 5523 5524 5525 5526;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/CP3U4HPL.js 5527 5528
vendor: 1,525 bytes, lines 5529-5586
5529// src/utils/misc.ts 5530 5531 5532function CP3U4HPL_setRef(ref, value) { 5533 if (typeof ref === "function") { 5534 ref(value); 5535 } else if (ref) { 5536 ref.current = value; 5537 } 5538} 5539function isValidElementWithRef(element) { 5540 if (!element) 5541 return false; 5542 if (!(0,external_React_.isValidElement)(element)) 5543 return false; 5544 if (!("ref" in element)) 5545 return false; 5546 return true; 5547} 5548function getRefProperty(element) { 5549 if (!isValidElementWithRef(element)) 5550 return null; 5551 return element.ref; 5552} 5553function mergeProps(base, overrides) { 5554 const props = PNRLI7OV_spreadValues({}, base); 5555 for (const key in overrides) { 5556 if (!WVTCK5PV_hasOwnProperty(overrides, key)) 5557 continue; 5558 if (key === "className") { 5559 const prop = "className"; 5560 props[prop] = base[prop] ? `${base[prop]} ${overrides[prop]}` : overrides[prop]; 5561 continue; 5562 } 5563 if (key === "style") { 5564 const prop = "style"; 5565 props[prop] = base[prop] ? PNRLI7OV_spreadValues(PNRLI7OV_spreadValues({}, base[prop]), overrides[prop]) : overrides[prop]; 5566 continue; 5567 } 5568 const overrideValue = overrides[key]; 5569 if (typeof overrideValue === "function" && key.startsWith("on")) { 5570 const baseValue = base[key]; 5571 if (typeof baseValue === "function") { 5572 props[key] = (...args) => { 5573 overrideValue(...args); 5574 baseValue(...args); 5575 }; 5576 continue; 5577 } 5578 } 5579 props[key] = overrideValue; 5580 } 5581 return props; 5582} 5583 5584 5585 5586;// CONCATENATED MODULE: ./node_modules/@ariakit/core/esm/__chunks/O35LWD4W.js
vendor: 5,236 bytes, lines 5587-5743
5587// src/utils/dom.ts 5588var O35LWD4W_canUseDOM = O35LWD4W_checkIsBrowser(); 5589function O35LWD4W_checkIsBrowser() { 5590 var _a; 5591 return typeof window !== "undefined" && !!((_a = window.document) == null ? void 0 : _a.createElement); 5592} 5593function O35LWD4W_getDocument(node) { 5594 return node ? node.ownerDocument || node : document; 5595} 5596function O35LWD4W_getWindow(node) { 5597 return O35LWD4W_getDocument(node).defaultView || window; 5598} 5599function O35LWD4W_getActiveElement(node, activeDescendant = false) { 5600 const { activeElement } = O35LWD4W_getDocument(node); 5601 if (!(activeElement == null ? void 0 : activeElement.nodeName)) { 5602 return null; 5603 } 5604 if (isFrame(activeElement) && activeElement.contentDocument) { 5605 return O35LWD4W_getActiveElement( 5606 activeElement.contentDocument.body, 5607 activeDescendant 5608 ); 5609 } 5610 if (activeDescendant) { 5611 const id = activeElement.getAttribute("aria-activedescendant"); 5612 if (id) { 5613 const element = O35LWD4W_getDocument(activeElement).getElementById(id); 5614 if (element) { 5615 return element; 5616 } 5617 } 5618 } 5619 return activeElement; 5620} 5621function O35LWD4W_contains(parent, child) { 5622 return parent === child || parent.contains(child); 5623} 5624function isFrame(element) { 5625 return element.tagName === "IFRAME"; 5626} 5627function O35LWD4W_isButton(element) { 5628 const tagName = element.tagName.toLowerCase(); 5629 if (tagName === "button") 5630 return true; 5631 if (tagName === "input" && element.type) { 5632 return O35LWD4W_buttonInputTypes.indexOf(element.type) !== -1; 5633 } 5634 return false; 5635} 5636var O35LWD4W_buttonInputTypes = [ 5637 "button", 5638 "color", 5639 "file", 5640 "image", 5641 "reset", 5642 "submit" 5643]; 5644function O35LWD4W_matches(element, selectors) { 5645 if ("matches" in element) { 5646 return element.matches(selectors); 5647 } 5648 if ("msMatchesSelector" in element) { 5649 return element.msMatchesSelector(selectors); 5650 } 5651 return element.webkitMatchesSelector(selectors); 5652} 5653function O35LWD4W_isVisible(element) { 5654 const htmlElement = element; 5655 return htmlElement.offsetWidth > 0 || htmlElement.offsetHeight > 0 || element.getClientRects().length > 0; 5656} 5657function O35LWD4W_closest(element, selectors) { 5658 if ("closest" in element) 5659 return element.closest(selectors); 5660 do { 5661 if (O35LWD4W_matches(element, selectors)) 5662 return element; 5663 element = element.parentElement || element.parentNode; 5664 } while (element !== null && element.nodeType === 1); 5665 return null; 5666} 5667function O35LWD4W_isTextField(element) { 5668 try { 5669 const isTextInput = element instanceof HTMLInputElement && element.selectionStart !== null; 5670 const isTextArea = element.tagName === "TEXTAREA"; 5671 return isTextInput || isTextArea || false; 5672 } catch (error) { 5673 return false; 5674 } 5675} 5676function getPopupRole(element, fallback) { 5677 const allowedPopupRoles = ["dialog", "menu", "listbox", "tree", "grid"]; 5678 const role = element == null ? void 0 : element.getAttribute("role"); 5679 if (role && allowedPopupRoles.indexOf(role) !== -1) { 5680 return role; 5681 } 5682 return fallback; 5683} 5684function getPopupItemRole(element, fallback) { 5685 var _a; 5686 const itemRoleByPopupRole = { 5687 menu: "menuitem", 5688 listbox: "option", 5689 tree: "treeitem", 5690 grid: "gridcell" 5691 }; 5692 const popupRole = getPopupRole(element); 5693 if (!popupRole) 5694 return fallback; 5695 const key = popupRole; 5696 return (_a = itemRoleByPopupRole[key]) != null ? _a : fallback; 5697} 5698function getTextboxSelection(element) { 5699 let start = 0; 5700 let end = 0; 5701 if (O35LWD4W_isTextField(element)) { 5702 start = element.selectionStart || 0; 5703 end = element.selectionEnd || 0; 5704 } else if (element.isContentEditable) { 5705 const selection = O35LWD4W_getDocument(element).getSelection(); 5706 if ((selection == null ? void 0 : selection.rangeCount) && selection.anchorNode && O35LWD4W_contains(element, selection.anchorNode) && selection.focusNode && O35LWD4W_contains(element, selection.focusNode)) { 5707 const range = selection.getRangeAt(0); 5708 const nextRange = range.cloneRange(); 5709 nextRange.selectNodeContents(element); 5710 nextRange.setEnd(range.startContainer, range.startOffset); 5711 start = nextRange.toString().length; 5712 nextRange.setEnd(range.endContainer, range.endOffset); 5713 end = nextRange.toString().length; 5714 } 5715 } 5716 return { start, end }; 5717} 5718function scrollIntoViewIfNeeded(element, arg) { 5719 if (isPartiallyHidden(element) && "scrollIntoView" in element) { 5720 element.scrollIntoView(arg); 5721 } 5722} 5723function getScrollingElement(element) { 5724 if (!element) 5725 return null; 5726 if (element.clientHeight && element.scrollHeight > element.clientHeight) { 5727 const { overflowY } = getComputedStyle(element); 5728 const isScrollable = overflowY !== "visible" && overflowY !== "hidden"; 5729 if (isScrollable) 5730 return element; 5731 } else if (element.clientWidth && element.scrollWidth > element.clientWidth) { 5732 const { overflowX } = getComputedStyle(element); 5733 const isScrollable = overflowX !== "visible" && overflowX !== "hidden"; 5734 if (isScrollable) 5735 return element; 5736 } 5737 return getScrollingElement(element.parentElement) || document.scrollingElement || document.body; 5738} 5739function isPartiallyHidden(element) { 5740 const elementRect = element.getBoundingClientRect(); 5741 const scroller = getScrollingElement(element); 5742 if (!scroller) 5743 return false;
5744 const scrollerRect = scroller.getBoundingClientRect(); 5745 const isHTML = scroller.tagName === "HTML"; 5746 const scrollerTop = isHTML ? scrollerRect.top + scroller.scrollTop : scrollerRect.top; 5747 const scrollerBottom = isHTML ? scroller.clientHeight : scrollerRect.bottom; 5748 const scrollerLeft = isHTML ? scrollerRect.left + scroller.scrollLeft : scrollerRect.left; 5749 const scrollerRight = isHTML ? scroller.clientWidth : scrollerRect.right; 5750 const top = elementRect.top < scrollerTop; 5751 const left = elementRect.left < scrollerLeft; 5752 const bottom = elementRect.bottom > scrollerBottom; 5753 const right = elementRect.right > scrollerRight; 5754 return top || left || bottom || right; 5755} 5756 5757 5758 5759;// CONCATENATED MODULE: ./node_modules/@ariakit/core/esm/utils/events.js 5760 5761 5762 5763
5764// src/utils/events.ts 5765function events_isPortalEvent(event) { 5766 return Boolean( 5767 event.currentTarget && !O35LWD4W_contains(event.currentTarget, event.target) 5768 ); 5769} 5770function events_isSelfTarget(event) { 5771 return event.target === event.currentTarget; 5772} 5773function isOpeningInNewTab(event) { 5774 const element = event.currentTarget; 5775 if (!element) 5776 return false; 5777 const isAppleDevice = isApple(); 5778 if (isAppleDevice && !event.metaKey) 5779 return false; 5780 if (!isAppleDevice && !event.ctrlKey) 5781 return false; 5782 const tagName = element.tagName.toLowerCase(); 5783 if (tagName === "a") 5784 return true; 5785 if (tagName === "button" && element.type === "submit") 5786 return true; 5787 if (tagName === "input" && element.type === "submit") 5788 return true; 5789 return false; 5790} 5791function isDownloading(event) { 5792 const element = event.currentTarget; 5793 if (!element) 5794 return false; 5795 const tagName = element.tagName.toLowerCase(); 5796 if (!event.altKey) 5797 return false; 5798 if (tagName === "a") 5799 return true; 5800 if (tagName === "button" && element.type === "submit") 5801 return true; 5802 if (tagName === "input" && element.type === "submit") 5803 return true; 5804 return false; 5805} 5806function events_fireEvent(element, type, eventInit) { 5807 const event = new Event(type, eventInit); 5808 return element.dispatchEvent(event); 5809} 5810function fireBlurEvent(element, eventInit) { 5811 const event = new FocusEvent("blur", eventInit); 5812 const defaultAllowed = element.dispatchEvent(event); 5813 const bubbleInit = _chunks_PNRLI7OV_spreadProps(_chunks_PNRLI7OV_spreadValues({}, eventInit), { bubbles: true }); 5814 element.dispatchEvent(new FocusEvent("focusout", bubbleInit)); 5815 return defaultAllowed; 5816} 5817function fireFocusEvent(element, eventInit) { 5818 const event = new FocusEvent("focus", eventInit); 5819 const defaultAllowed = element.dispatchEvent(event); 5820 const bubbleInit = _chunks_PNRLI7OV_spreadProps(_chunks_PNRLI7OV_spreadValues({}, eventInit), { bubbles: true }); 5821 element.dispatchEvent(new FocusEvent("focusin", bubbleInit)); 5822 return defaultAllowed; 5823} 5824function fireKeyboardEvent(element, type, eventInit) { 5825 const event = new KeyboardEvent(type, eventInit); 5826 return element.dispatchEvent(event); 5827} 5828function fireClickEvent(element, eventInit) { 5829 const event = new MouseEvent("click", eventInit); 5830 return element.dispatchEvent(event); 5831} 5832function isFocusEventOutside(event, container) { 5833 const containerElement = container || event.currentTarget; 5834 const relatedTarget = event.relatedTarget; 5835 return !relatedTarget || !O35LWD4W_contains(containerElement, relatedTarget); 5836} 5837function queueBeforeEvent(element, type, callback) { 5838 const raf = requestAnimationFrame(() => { 5839 element.removeEventListener(type, callImmediately, true); 5840 callback(); 5841 }); 5842 const callImmediately = () => { 5843 cancelAnimationFrame(raf); 5844 callback(); 5845 }; 5846 element.addEventListener(type, callImmediately, { 5847 once: true, 5848 capture: true 5849 }); 5850 return raf; 5851} 5852function addGlobalEventListener(type, listener, options, scope = window) { 5853 var _a; 5854 try { 5855 scope.document.addEventListener(type, listener, options); 5856 } catch (e) { 5857 } 5858 const listeners = []; 5859 for (let i = 0; i < ((_a = scope.frames) == null ? void 0 : _a.length); i += 1) { 5860 const frameWindow = scope.frames[i]; 5861 if (frameWindow) { 5862 listeners.push( 5863 addGlobalEventListener(type, listener, options, frameWindow) 5864 ); 5865 } 5866 } 5867 const removeEventListener = () => { 5868 try { 5869 scope.document.removeEventListener(type, listener, options); 5870 } catch (e) { 5871 } 5872 listeners.forEach((listener2) => listener2()); 5873 }; 5874 return removeEventListener; 5875} 5876 5877 5878;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/J7Q2EO23.js 5879 5880 5881
5882// src/utils/hooks.ts 5883 5884 5885 5886 5887 5888var _React = PNRLI7OV_spreadValues({}, external_React_namespaceObject); 5889var useReactId = _React.useId; 5890var useReactDeferredValue = _React.useDeferredValue; 5891var useReactInsertionEffect = _React.useInsertionEffect; 5892var useSafeLayoutEffect = O35LWD4W_canUseDOM ? external_React_.useLayoutEffect : external_React_.useEffect; 5893function useInitialValue(value) { 5894 const [initialValue] = useState(value); 5895 return initialValue; 5896} 5897function useLazyValue(init) { 5898 const ref = (0,external_React_.useRef)(); 5899 if (ref.current === void 0) { 5900 ref.current = init(); 5901 } 5902 return ref.current; 5903} 5904function J7Q2EO23_useLiveRef(value) { 5905 const ref = (0,external_React_.useRef)(value); 5906 useSafeLayoutEffect(() => { 5907 ref.current = value; 5908 }); 5909 return ref; 5910} 5911function usePreviousValue(value) { 5912 const [previousValue, setPreviousValue] = useState(value); 5913 if (value !== previousValue) { 5914 setPreviousValue(value); 5915 } 5916 return previousValue; 5917} 5918function useEvent(callback) { 5919 const ref = (0,external_React_.useRef)(() => { 5920 throw new Error("Cannot call an event handler while rendering."); 5921 }); 5922 if (useReactInsertionEffect) { 5923 useReactInsertionEffect(() => { 5924 ref.current = callback; 5925 }); 5926 } else { 5927 ref.current = callback; 5928 } 5929 return (0,external_React_.useCallback)((...args) => { 5930 var _a; 5931 return (_a = ref.current) == null ? void 0 : _a.call(ref, ...args); 5932 }, []); 5933} 5934function useMergeRefs(...refs) { 5935 return (0,external_React_.useMemo)(() => { 5936 if (!refs.some(Boolean)) 5937 return; 5938 return (value) => { 5939 refs.forEach((ref) => CP3U4HPL_setRef(ref, value)); 5940 }; 5941 }, refs); 5942} 5943function useRefId(ref, deps) { 5944 const [id, setId] = useState(void 0); 5945 useSafeLayoutEffect(() => { 5946 var _a; 5947 setId((_a = ref == null ? void 0 : ref.current) == null ? void 0 : _a.id); 5948 }, deps); 5949 return id; 5950} 5951function useId(defaultId) { 5952 if (useReactId) { 5953 const reactId = useReactId(); 5954 if (defaultId) 5955 return defaultId; 5956 return reactId; 5957 } 5958 const [id, setId] = (0,external_React_.useState)(defaultId); 5959 useSafeLayoutEffect(() => { 5960 if (defaultId || id) 5961 return; 5962 const random = Math.random().toString(36).substr(2, 6); 5963 setId(`id-${random}`); 5964 }, [defaultId, id]); 5965 return defaultId || id; 5966} 5967function useDeferredValue(value) { 5968 if (useReactDeferredValue) { 5969 return useReactDeferredValue(value); 5970 } 5971 const [deferredValue, setDeferredValue] = useState(value); 5972 useEffect(() => { 5973 const raf = requestAnimationFrame(() => setDeferredValue(value)); 5974 return () => cancelAnimationFrame(raf); 5975 }, [value]); 5976 return deferredValue; 5977} 5978function useTagName(refOrElement, type) { 5979 const stringOrUndefined = (type2) => { 5980 if (typeof type2 !== "string") 5981 return; 5982 return type2; 5983 }; 5984 const [tagName, setTagName] = (0,external_React_.useState)(() => stringOrUndefined(type)); 5985 useSafeLayoutEffect(() => { 5986 const element = refOrElement && "current" in refOrElement ? refOrElement.current : refOrElement; 5987 setTagName((element == null ? void 0 : element.tagName.toLowerCase()) || stringOrUndefined(type)); 5988 }, [refOrElement, type]); 5989 return tagName; 5990} 5991function useAttribute(refOrElement, attributeName, defaultValue) { 5992 const [attribute, setAttribute] = useState(defaultValue); 5993 useSafeLayoutEffect(() => { 5994 const element = refOrElement && "current" in refOrElement ? refOrElement.current : refOrElement; 5995 const value = element == null ? void 0 : element.getAttribute(attributeName); 5996 if (value == null) 5997 return; 5998 setAttribute(value); 5999 }, [refOrElement, attributeName]); 6000 return attribute; 6001} 6002function useUpdateEffect(effect, deps) { 6003 const mounted = useRef(false); 6004 useEffect(() => { 6005 if (mounted.current) { 6006 return effect(); 6007 } 6008 mounted.current = true; 6009 }, deps); 6010 useEffect( 6011 () => () => { 6012 mounted.current = false; 6013 }, 6014 [] 6015 ); 6016} 6017function useUpdateLayoutEffect(effect, deps) { 6018 const mounted = useRef(false); 6019 useSafeLayoutEffect(() => { 6020 if (mounted.current) { 6021 return effect(); 6022 } 6023 mounted.current = true; 6024 }, deps); 6025 useSafeLayoutEffect( 6026 () => () => { 6027 mounted.current = false;
6028 }, 6029 [] 6030 ); 6031} 6032function useControlledState(defaultState, state, setState) { 6033 const [localState, setLocalState] = useState(defaultState); 6034 const nextState = state !== void 0 ? state : localState; 6035 const stateRef = J7Q2EO23_useLiveRef(state); 6036 const setStateRef = J7Q2EO23_useLiveRef(setState); 6037 const nextStateRef = J7Q2EO23_useLiveRef(nextState); 6038 const setNextState = useCallback((prevValue) => { 6039 const setStateProp = setStateRef.current; 6040 if (setStateProp) { 6041 if (isSetNextState(setStateProp)) { 6042 setStateProp(prevValue); 6043 } else { 6044 const nextValue = applyState(prevValue, nextStateRef.current); 6045 nextStateRef.current = nextValue; 6046 setStateProp(nextValue); 6047 } 6048 } 6049 if (stateRef.current === void 0) { 6050 setLocalState(prevValue); 6051 } 6052 }, []); 6053 defineSetNextState(setNextState); 6054 return [nextState, setNextState]; 6055} 6056var SET_NEXT_STATE = Symbol("setNextState"); 6057function isSetNextState(arg) { 6058 return arg[SET_NEXT_STATE] === true; 6059} 6060function defineSetNextState(arg) { 6061 if (!isSetNextState(arg)) { 6062 Object.defineProperty(arg, SET_NEXT_STATE, { value: true }); 6063 } 6064} 6065function useForceUpdate() { 6066 return (0,external_React_.useReducer)(() => [], []); 6067} 6068function useBooleanEvent(booleanOrCallback) { 6069 return useEvent( 6070 typeof booleanOrCallback === "function" ? booleanOrCallback : () => booleanOrCallback 6071 ); 6072} 6073function useWrapElement(props, callback, deps = []) { 6074 const wrapElement = (0,external_React_.useCallback)( 6075 (element) => { 6076 if (props.wrapElement) { 6077 element = props.wrapElement(element); 6078 } 6079 return callback(element); 6080 }, 6081 [...deps, props.wrapElement] 6082 ); 6083 return PNRLI7OV_spreadProps(PNRLI7OV_spreadValues({}, props), { wrapElement }); 6084} 6085function usePortalRef(portalProp = false, portalRefProp) { 6086 const [portalNode, setPortalNode] = (0,external_React_.useState)(null); 6087 const portalRef = useMergeRefs(setPortalNode, portalRefProp); 6088 const domReady = !portalProp || portalNode; 6089 return { portalRef, portalNode, domReady }; 6090} 6091function useIsMouseMoving() { 6092 (0,external_React_.useEffect)(() => { 6093 addGlobalEventListener("mousemove", setMouseMoving, true); 6094 addGlobalEventListener("mousedown", resetMouseMoving, true); 6095 addGlobalEventListener("mouseup", resetMouseMoving, true); 6096 addGlobalEventListener("keydown", resetMouseMoving, true); 6097 addGlobalEventListener("scroll", resetMouseMoving, true); 6098 }, []); 6099 const isMouseMoving = useEvent(() => mouseMoving); 6100 return isMouseMoving; 6101} 6102var mouseMoving = false; 6103var previousScreenX = 0; 6104var previousScreenY = 0; 6105function hasMouseMovement(event) { 6106 const movementX = event.movementX || event.screenX - previousScreenX; 6107 const movementY = event.movementY || event.screenY - previousScreenY; 6108 previousScreenX = event.screenX; 6109 previousScreenY = event.screenY; 6110 return movementX || movementY || "production" === "test"; 6111} 6112function setMouseMoving(event) { 6113 if (!hasMouseMovement(event)) 6114 return; 6115 mouseMoving = true; 6116} 6117function resetMouseMoving() { 6118 mouseMoving = false; 6119} 6120 6121 6122 6123// EXTERNAL MODULE: ./node_modules/use-sync-external-store/shim/index.js 6124var shim = __webpack_require__(635); 6125;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/FHQZ2KRN.js 6126 6127 6128
6129// src/utils/store.tsx 6130 6131 6132 6133var noopSubscribe = () => () => { 6134}; 6135function useStoreState(store, keyOrSelector = identity) { 6136 const getSnapshot = () => { 6137 if (!store) 6138 return; 6139 const state = store.getState(); 6140 const selector = typeof keyOrSelector === "function" ? keyOrSelector : null; 6141 const key = typeof keyOrSelector === "string" ? keyOrSelector : null; 6142 if (selector) 6143 return selector(state); 6144 if (!key) 6145 return; 6146 if (!WVTCK5PV_hasOwnProperty(state, key)) 6147 return; 6148 return state[key]; 6149 }; 6150 return (0,shim.useSyncExternalStore)( 6151 (store == null ? void 0 : store.subscribe) || noopSubscribe, 6152 getSnapshot, 6153 getSnapshot 6154 ); 6155} 6156function useStoreProps(store, props, key, setKey) { 6157 const value = WVTCK5PV_hasOwnProperty(props, key) ? props[key] : void 0; 6158 const propsRef = J7Q2EO23_useLiveRef({ 6159 value, 6160 setValue: setKey ? props[setKey] : void 0 6161 }); 6162 useSafeLayoutEffect(() => { 6163 return store.sync( 6164 (state, prev) => { 6165 const { value: value2, setValue } = propsRef.current; 6166 if (!setValue) 6167 return; 6168 if (state[key] === prev[key]) 6169 return; 6170 if (state[key] === value2) 6171 return; 6172 setValue(state[key]); 6173 }, 6174 [key] 6175 ); 6176 }, [store, key]); 6177 useSafeLayoutEffect(() => { 6178 return store.sync(() => { 6179 if (value === void 0) 6180 return; 6181 store.setState(key, value); 6182 }, [key]); 6183 }, [store, key, value]); 6184} 6185function FHQZ2KRN_useStore(createStore) { 6186 const store = useLazyValue(createStore); 6187 useSafeLayoutEffect(() => store.init(), [store]); 6188 const useState = (0,external_React_.useCallback)( 6189 (keyOrSelector) => useStoreState(store, keyOrSelector), 6190 [store] 6191 ); 6192 return (0,external_React_.useMemo)(() => PNRLI7OV_spreadProps(PNRLI7OV_spreadValues({}, store), { useState }), [store, useState]); 6193} 6194 6195 6196 6197;// CONCATENATED MODULE: ./node_modules/@ariakit/core/esm/__chunks/FQL4TRMX.js 6198 6199 6200
6201// src/utils/store.ts 6202function createStore(initialState, ...stores) { 6203 let state = initialState; 6204 let prevStateBatch = state; 6205 let lastUpdate = Symbol(); 6206 let initialized = false; 6207 const updatedKeys = /* @__PURE__ */ new Set(); 6208 const setups = /* @__PURE__ */ new Set(); 6209 const listeners = /* @__PURE__ */ new Set(); 6210 const listenersBatch = /* @__PURE__ */ new Set(); 6211 const disposables = /* @__PURE__ */ new WeakMap(); 6212 const listenerKeys = /* @__PURE__ */ new WeakMap(); 6213 const setup = (callback) => { 6214 setups.add(callback); 6215 return () => setups.delete(callback); 6216 }; 6217 const init = () => { 6218 if (initialized) 6219 return noop; 6220 if (!stores.length) 6221 return noop; 6222 initialized = true; 6223 const desyncs = getKeys(state).map( 6224 (key) => chain( 6225 ...stores.map((store) => { 6226 var _a, _b; 6227 const storeState = (_a = store == null ? void 0 : store.getState) == null ? void 0 : _a.call(store); 6228 if (!storeState) 6229 return; 6230 if (!WVTCK5PV_hasOwnProperty(storeState, key)) 6231 return; 6232 return (_b = store == null ? void 0 : store.sync) == null ? void 0 : _b.call(store, (state2) => setState(key, state2[key]), [key]); 6233 }) 6234 ) 6235 ); 6236 const teardowns = []; 6237 setups.forEach((setup2) => teardowns.push(setup2())); 6238 const cleanups = stores.map((store) => { 6239 var _a; 6240 return (_a = store == null ? void 0 : store.init) == null ? void 0 : _a.call(store); 6241 }); 6242 return chain(...desyncs, ...teardowns, ...cleanups, () => { 6243 initialized = false; 6244 }); 6245 }; 6246 const sub = (listener, keys, batch = false) => { 6247 const set = batch ? listenersBatch : listeners; 6248 set.add(listener); 6249 listenerKeys.set(listener, keys); 6250 return () => { 6251 var _a; 6252 (_a = disposables.get(listener)) == null ? void 0 : _a(); 6253 disposables.delete(listener); 6254 listenerKeys.delete(listener); 6255 set.delete(listener); 6256 }; 6257 }; 6258 const subscribe = (listener, keys) => sub(listener, keys); 6259 const sync = (listener, keys) => { 6260 disposables.set(listener, listener(state, state)); 6261 return sub(listener, keys); 6262 }; 6263 const syncBatch = (listener, keys) => { 6264 disposables.set(listener, listener(state, prevStateBatch)); 6265 return sub(listener, keys, true); 6266 }; 6267 const getState = () => state; 6268 const setState = (key, value) => { 6269 if (!WVTCK5PV_hasOwnProperty(state, key)) 6270 return; 6271 const nextValue = WVTCK5PV_applyState(value, state[key]);
6272 if (nextValue === state[key]) 6273 return; 6274 stores.forEach((store) => { 6275 var _a; 6276 (_a = store == null ? void 0 : store.setState) == null ? void 0 : _a.call(store, key, nextValue); 6277 }); 6278 const prevState = state; 6279 state = _chunks_PNRLI7OV_spreadProps(_chunks_PNRLI7OV_spreadValues({}, state), { [key]: nextValue }); 6280 const thisUpdate = Symbol(); 6281 lastUpdate = thisUpdate; 6282 updatedKeys.add(key); 6283 const run = (listener, prev, uKeys) => { 6284 var _a; 6285 const keys = listenerKeys.get(listener); 6286 const updated = (k) => uKeys ? uKeys.has(k) : k === key; 6287 if (!keys || keys.some(updated)) { 6288 (_a = disposables.get(listener)) == null ? void 0 : _a(); 6289 disposables.set(listener, listener(state, prev)); 6290 } 6291 }; 6292 listeners.forEach((listener) => run(listener, prevState)); 6293 queueMicrotask(() => { 6294 if (lastUpdate !== thisUpdate) 6295 return; 6296 const snapshot = state; 6297 listenersBatch.forEach((listener) => { 6298 run(listener, prevStateBatch, updatedKeys); 6299 }); 6300 prevStateBatch = snapshot; 6301 updatedKeys.clear(); 6302 }); 6303 }; 6304 const pick2 = (...keys) => createStore(pick(state, keys), finalStore); 6305 const omit2 = (...keys) => createStore(omit(state, keys), finalStore); 6306 const finalStore = { 6307 setup, 6308 init, 6309 subscribe, 6310 sync, 6311 syncBatch, 6312 getState, 6313 setState, 6314 pick: pick2, 6315 omit: omit2 6316 }; 6317 return finalStore; 6318} 6319function mergeStore(...stores) { 6320 const initialState = stores.reduce((state, store2) => { 6321 var _a; 6322 const nextState = (_a = store2 == null ? void 0 : store2.getState) == null ? void 0 : _a.call(store2); 6323 if (!nextState) 6324 return state; 6325 return _chunks_PNRLI7OV_spreadValues(_chunks_PNRLI7OV_spreadValues({}, state), nextState); 6326 }, {}); 6327 const store = createStore(initialState, ...stores); 6328 return store; 6329} 6330 6331 6332 6333;// CONCATENATED MODULE: ./node_modules/@ariakit/core/esm/__chunks/L5RO76KW.js 6334 6335 6336 6337
6338// src/disclosure/disclosure-store.ts 6339function createDisclosureStore(props = {}) { 6340 var _a; 6341 const store = mergeStore( 6342 props.store, 6343 (_a = props.disclosure) == null ? void 0 : _a.omit("contentElement", "disclosureElement") 6344 ); 6345 const syncState = store == null ? void 0 : store.getState(); 6346 const open = defaultValue( 6347 props.open, 6348 syncState == null ? void 0 : syncState.open, 6349 props.defaultOpen, 6350 false 6351 ); 6352 const animated = defaultValue(props.animated, syncState == null ? void 0 : syncState.animated, false); 6353 const initialState = { 6354 open, 6355 animated, 6356 animating: !!animated && open, 6357 mounted: open, 6358 contentElement: defaultValue(syncState == null ? void 0 : syncState.contentElement, null), 6359 disclosureElement: defaultValue(syncState == null ? void 0 : syncState.disclosureElement, null) 6360 }; 6361 const disclosure = createStore(initialState, store); 6362 disclosure.setup( 6363 () => disclosure.sync( 6364 (state) => { 6365 if (state.animated) 6366 return; 6367 disclosure.setState("animating", false); 6368 }, 6369 ["animated", "animating"] 6370 ) 6371 ); 6372 disclosure.setup( 6373 () => disclosure.sync( 6374 (state, prev) => { 6375 if (!state.animated) 6376 return; 6377 const mounting = state === prev; 6378 const animating = mounting ? state.open : state.open !== prev.open; 6379 disclosure.setState("animating", animating); 6380 }, 6381 ["open", "animated"] 6382 ) 6383 ); 6384 disclosure.setup( 6385 () => disclosure.sync( 6386 (state) => { 6387 disclosure.setState("mounted", state.open || state.animating); 6388 }, 6389 ["open", "animating"] 6390 ) 6391 ); 6392 return _chunks_PNRLI7OV_spreadProps(_chunks_PNRLI7OV_spreadValues({}, disclosure), { 6393 setOpen: (value) => disclosure.setState("open", value), 6394 show: () => disclosure.setState("open", true), 6395 hide: () => disclosure.setState("open", false), 6396 toggle: () => disclosure.setState("open", (open2) => !open2), 6397 stopAnimation: () => disclosure.setState("animating", false), 6398 setContentElement: (value) => disclosure.setState("contentElement", value), 6399 setDisclosureElement: (value) => disclosure.setState("disclosureElement", value) 6400 }); 6401} 6402 6403 6404 6405;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/54LBRJ55.js 6406 6407 6408
6409// src/disclosure/disclosure-store.ts 6410 6411function useDisclosureStoreOptions(_props) { 6412 return {}; 6413} 6414function useDisclosureStoreProps(store, props) { 6415 useStoreProps(store, props, "open", "setOpen"); 6416 useStoreProps(store, props, "animated"); 6417 return store; 6418} 6419function useDisclosureStore(props = {}) { 6420 const options = useDisclosureStoreOptions(props); 6421 const store = FHQZ2KRN_useStore( 6422 () => createDisclosureStore(PNRLI7OV_spreadValues(PNRLI7OV_spreadValues({}, props), options)) 6423 ); 6424 return useDisclosureStoreProps(store, props); 6425} 6426 6427 6428 6429;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/TALTYI5G.js 6430 6431 6432 6433
6434// src/dialog/dialog-store.ts 6435 6436function useDialogStoreOptions(props) { 6437 return useDisclosureStoreOptions(props); 6438} 6439function useDialogStoreProps(store, props) { 6440 return useDisclosureStoreProps(store, props); 6441} 6442function useDialogStore(props = {}) { 6443 const options = useDialogStoreOptions(props); 6444 const store = useStore( 6445 () => Core.createDialogStore(__spreadValues(__spreadValues({}, props), options)) 6446 ); 6447 return useDialogStoreProps(store, props); 6448} 6449 6450 6451 6452;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/5QJYOWLQ.js 6453 6454 6455 6456
6457// src/popover/popover-store.ts 6458 6459function usePopoverStoreOptions(props) { 6460 return useDialogStoreOptions(props); 6461} 6462function usePopoverStoreProps(store, props) { 6463 store = useDialogStoreProps(store, props); 6464 useStoreProps(store, props, "placement"); 6465 return store; 6466} 6467function usePopoverStore(props = {}) { 6468 const options = usePopoverStoreOptions(props); 6469 const store = useStore( 6470 () => Core.createPopoverStore(__spreadValues(__spreadValues({}, props), options)) 6471 ); 6472 return usePopoverStoreProps(store, props); 6473} 6474 6475 6476 6477;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/JFHRFFJJ.js 6478 6479 6480 6481
6482// src/hovercard/hovercard-store.ts 6483 6484function useHovercardStoreOptions(props) { 6485 return usePopoverStoreOptions(props); 6486} 6487function useHovercardStoreProps(store, props) { 6488 store = usePopoverStoreProps(store, props); 6489 useStoreProps(store, props, "timeout"); 6490 useStoreProps(store, props, "showTimeout"); 6491 useStoreProps(store, props, "hideTimeout"); 6492 return store; 6493} 6494function useHovercardStore(props = {}) { 6495 const options = useHovercardStoreOptions(props); 6496 const store = useStore( 6497 () => Core.createHovercardStore(__spreadValues(__spreadValues({}, props), options)) 6498 ); 6499 return useHovercardStoreProps(store, props); 6500} 6501 6502 6503 6504;// CONCATENATED MODULE: ./node_modules/@ariakit/core/esm/__chunks/UWW2ZP3K.js 6505 6506
6507// src/dialog/dialog-store.ts 6508function createDialogStore(props = {}) { 6509 return createDisclosureStore(props); 6510} 6511 6512 6513 6514;// CONCATENATED MODULE: ./node_modules/@ariakit/core/esm/__chunks/LM4QG55U.js 6515 6516 6517 6518 6519
vendor: 4,179 bytes, lines 6520-6634
6520// src/popover/popover-store.ts 6521function createPopoverStore(_a = {}) { 6522 var _b = _a, { 6523 popover: otherPopover 6524 } = _b, props = PNRLI7OV_objRest(_b, [ 6525 "popover" 6526 ]); 6527 const store = mergeStore( 6528 props.store, 6529 otherPopover == null ? void 0 : otherPopover.omit( 6530 "arrowElement", 6531 "anchorElement", 6532 "contentElement", 6533 "popoverElement", 6534 "disclosureElement" 6535 ) 6536 ); 6537 const syncState = store == null ? void 0 : store.getState(); 6538 const dialog = createDialogStore(_chunks_PNRLI7OV_spreadProps(_chunks_PNRLI7OV_spreadValues({}, props), { store })); 6539 const placement = defaultValue( 6540 props.placement, 6541 syncState == null ? void 0 : syncState.placement, 6542 "bottom" 6543 ); 6544 const initialState = _chunks_PNRLI7OV_spreadProps(_chunks_PNRLI7OV_spreadValues({}, dialog.getState()), { 6545 placement, 6546 currentPlacement: placement, 6547 anchorElement: defaultValue(syncState == null ? void 0 : syncState.anchorElement, null), 6548 popoverElement: defaultValue(syncState == null ? void 0 : syncState.popoverElement, null), 6549 arrowElement: defaultValue(syncState == null ? void 0 : syncState.arrowElement, null), 6550 rendered: Symbol("rendered") 6551 }); 6552 const popover = createStore(initialState, dialog, store); 6553 return _chunks_PNRLI7OV_spreadProps(_chunks_PNRLI7OV_spreadValues(_chunks_PNRLI7OV_spreadValues({}, dialog), popover), { 6554 setAnchorElement: (element) => popover.setState("anchorElement", element), 6555 setPopoverElement: (element) => popover.setState("popoverElement", element), 6556 setArrowElement: (element) => popover.setState("arrowElement", element), 6557 render: () => popover.setState("rendered", Symbol("rendered")) 6558 }); 6559} 6560 6561 6562 6563;// CONCATENATED MODULE: ./node_modules/@ariakit/core/esm/__chunks/XJGRXN57.js 6564 6565 6566 6567 6568 6569// src/hovercard/hovercard-store.ts 6570function createHovercardStore(props = {}) { 6571 var _a; 6572 const syncState = (_a = props.store) == null ? void 0 : _a.getState(); 6573 const popover = createPopoverStore(_chunks_PNRLI7OV_spreadProps(_chunks_PNRLI7OV_spreadValues({}, props), { 6574 placement: defaultValue( 6575 props.placement, 6576 syncState == null ? void 0 : syncState.placement, 6577 "bottom" 6578 ) 6579 })); 6580 const timeout = defaultValue(props.timeout, syncState == null ? void 0 : syncState.timeout, 500); 6581 const initialState = _chunks_PNRLI7OV_spreadProps(_chunks_PNRLI7OV_spreadValues({}, popover.getState()), { 6582 timeout, 6583 showTimeout: defaultValue(props.showTimeout, syncState == null ? void 0 : syncState.showTimeout), 6584 hideTimeout: defaultValue(props.hideTimeout, syncState == null ? void 0 : syncState.hideTimeout), 6585 autoFocusOnShow: defaultValue(syncState == null ? void 0 : syncState.autoFocusOnShow, false) 6586 }); 6587 const hovercard = createStore(initialState, popover, props.store); 6588 return _chunks_PNRLI7OV_spreadProps(_chunks_PNRLI7OV_spreadValues(_chunks_PNRLI7OV_spreadValues({}, popover), hovercard), { 6589 setAutoFocusOnShow: (value) => hovercard.setState("autoFocusOnShow", value) 6590 }); 6591} 6592 6593 6594 6595;// CONCATENATED MODULE: ./node_modules/@ariakit/core/esm/tooltip/tooltip-store.js 6596 6597 6598 6599 6600 6601 6602 6603 6604// src/tooltip/tooltip-store.ts 6605function createTooltipStore(props = {}) { 6606 var _a; 6607 const syncState = (_a = props.store) == null ? void 0 : _a.getState(); 6608 const hovercard = createHovercardStore(_chunks_PNRLI7OV_spreadProps(_chunks_PNRLI7OV_spreadValues({}, props), { 6609 placement: defaultValue( 6610 props.placement, 6611 syncState == null ? void 0 : syncState.placement, 6612 "top" 6613 ), 6614 hideTimeout: defaultValue(props.hideTimeout, syncState == null ? void 0 : syncState.hideTimeout, 0) 6615 })); 6616 const initialState = _chunks_PNRLI7OV_spreadProps(_chunks_PNRLI7OV_spreadValues({}, hovercard.getState()), { 6617 type: defaultValue(props.type, syncState == null ? void 0 : syncState.type, "description"), 6618 skipTimeout: defaultValue(props.skipTimeout, syncState == null ? void 0 : syncState.skipTimeout, 300) 6619 }); 6620 const tooltip = createStore(initialState, hovercard, props.store); 6621 return _chunks_PNRLI7OV_spreadValues(_chunks_PNRLI7OV_spreadValues({}, hovercard), tooltip); 6622} 6623 6624 6625;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/tooltip/tooltip-store.js 6626 6627 6628 6629 6630 6631 6632 6633 6634
6635// src/tooltip/tooltip-store.ts 6636 6637function useTooltipStoreOptions(props) { 6638 return useHovercardStoreOptions(props); 6639} 6640function useTooltipStoreProps(store, props) { 6641 store = useHovercardStoreProps(store, props); 6642 useStoreProps(store, props, "type"); 6643 useStoreProps(store, props, "skipTimeout"); 6644 return store; 6645} 6646function useTooltipStore(props = {}) { 6647 const options = useTooltipStoreOptions(props); 6648 const store = FHQZ2KRN_useStore( 6649 () => createTooltipStore(PNRLI7OV_spreadValues(PNRLI7OV_spreadValues({}, props), options)) 6650 ); 6651 return useTooltipStoreProps(store, props); 6652} 6653 6654 6655;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/BMLNRUFQ.js
6656// src/focusable/focusable-context.ts 6657 6658var FocusableContext = (0,external_React_.createContext)(true); 6659 6660 6661 6662// EXTERNAL MODULE: ./node_modules/react/jsx-runtime.js 6663var jsx_runtime = __webpack_require__(7557); 6664;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/NQJBHION.js 6665 6666 6667 6668
6669// src/utils/system.tsx 6670 6671 6672 6673function NQJBHION_isRenderProp(children) { 6674 return typeof children === "function"; 6675} 6676function forwardRef2(render) { 6677 const Role = React.forwardRef((props, ref) => render(__spreadProps(__spreadValues({}, props), { ref }))); 6678 Role.displayName = render.displayName || render.name; 6679 return Role; 6680} 6681function memo2(Component, propsAreEqual) { 6682 const Role = React.memo(Component, propsAreEqual); 6683 Role.displayName = Component.displayName || Component.name; 6684 return Role; 6685} 6686function NQJBHION_createComponent(render) { 6687 const Role = (props, ref) => render(PNRLI7OV_spreadValues({ ref }, props)); 6688 return external_React_.forwardRef(Role); 6689} 6690function createMemoComponent(render) { 6691 const Role = NQJBHION_createComponent(render); 6692 return external_React_.memo(Role); 6693} 6694function NQJBHION_createElement(Type, props) { 6695 const _a = props, { as: As, wrapElement, render } = _a, rest = __objRest(_a, ["as", "wrapElement", "render"]); 6696 let element; 6697 const mergedRef = useMergeRefs(props.ref, getRefProperty(render)); 6698 if (As && typeof As !== "string") { 6699 element = /* @__PURE__ */ (0,jsx_runtime.jsx)(As, PNRLI7OV_spreadProps(PNRLI7OV_spreadValues({}, rest), { render })); 6700 } else if (external_React_.isValidElement(render)) { 6701 const renderProps = PNRLI7OV_spreadProps(PNRLI7OV_spreadValues({}, render.props), { ref: mergedRef }); 6702 element = external_React_.cloneElement(render, mergeProps(rest, renderProps)); 6703 } else if (render) { 6704 element = render(rest); 6705 } else if (NQJBHION_isRenderProp(props.children)) { 6706 const _b = rest, { children } = _b, otherProps = __objRest(_b, ["children"]); 6707 element = props.children(otherProps); 6708 } else if (As) { 6709 element = /* @__PURE__ */ (0,jsx_runtime.jsx)(As, PNRLI7OV_spreadValues({}, rest)); 6710 } else { 6711 element = /* @__PURE__ */ (0,jsx_runtime.jsx)(Type, PNRLI7OV_spreadValues({}, rest)); 6712 } 6713 if (wrapElement) { 6714 return wrapElement(element); 6715 } 6716 return element; 6717} 6718function NQJBHION_createHook(useProps) { 6719 const useRole = (props = {}) => { 6720 const htmlProps = useProps(props); 6721 const copy = {}; 6722 for (const prop in htmlProps) { 6723 if (WVTCK5PV_hasOwnProperty(htmlProps, prop) && htmlProps[prop] !== void 0) { 6724 copy[prop] = htmlProps[prop]; 6725 } 6726 } 6727 return copy; 6728 }; 6729 return useRole; 6730} 6731 6732 6733 6734;// CONCATENATED MODULE: ./node_modules/@ariakit/core/esm/utils/focus.js 6735 6736 6737
vendor: 7,116 bytes, lines 6738-6933
6738// src/utils/focus.ts 6739var focus_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'])"; 6740function focus_hasNegativeTabIndex(element) { 6741 const tabIndex = parseInt(element.getAttribute("tabindex") || "0", 10); 6742 return tabIndex < 0; 6743} 6744function focus_isFocusable(element) { 6745 if (!O35LWD4W_matches(element, focus_selector)) 6746 return false; 6747 if (!O35LWD4W_isVisible(element)) 6748 return false; 6749 if (O35LWD4W_closest(element, "[inert]")) 6750 return false; 6751 return true; 6752} 6753function focus_isTabbable(element) { 6754 if (!focus_isFocusable(element)) 6755 return false; 6756 if (focus_hasNegativeTabIndex(element)) 6757 return false; 6758 if (!("form" in element)) 6759 return true; 6760 if (!element.form) 6761 return true; 6762 if (element.checked) 6763 return true; 6764 if (element.type !== "radio") 6765 return true; 6766 const radioGroup = element.form.elements.namedItem(element.name); 6767 if (!radioGroup) 6768 return true; 6769 if (!("length" in radioGroup)) 6770 return true; 6771 const activeElement = O35LWD4W_getActiveElement(element); 6772 if (!activeElement) 6773 return true; 6774 if (activeElement === element) 6775 return true; 6776 if (!("form" in activeElement)) 6777 return true; 6778 if (activeElement.form !== element.form) 6779 return true; 6780 if (activeElement.name !== element.name) 6781 return true; 6782 return false; 6783} 6784function focus_getAllFocusableIn(container, includeContainer) { 6785 const elements = Array.from( 6786 container.querySelectorAll(focus_selector) 6787 ); 6788 if (includeContainer) { 6789 elements.unshift(container); 6790 } 6791 const focusableElements = elements.filter(focus_isFocusable); 6792 focusableElements.forEach((element, i) => { 6793 if (isFrame(element) && element.contentDocument) { 6794 const frameBody = element.contentDocument.body; 6795 focusableElements.splice(i, 1, ...focus_getAllFocusableIn(frameBody)); 6796 } 6797 }); 6798 return focusableElements; 6799} 6800function getAllFocusable(includeBody) { 6801 return focus_getAllFocusableIn(document.body, includeBody); 6802} 6803function focus_getFirstFocusableIn(container, includeContainer) { 6804 const [first] = focus_getAllFocusableIn(container, includeContainer); 6805 return first || null; 6806} 6807function getFirstFocusable(includeBody) { 6808 return focus_getFirstFocusableIn(document.body, includeBody); 6809} 6810function focus_getAllTabbableIn(container, includeContainer, fallbackToFocusable) { 6811 const elements = Array.from( 6812 container.querySelectorAll(focus_selector) 6813 ); 6814 const tabbableElements = elements.filter(focus_isTabbable); 6815 if (includeContainer && focus_isTabbable(container)) { 6816 tabbableElements.unshift(container); 6817 } 6818 tabbableElements.forEach((element, i) => { 6819 if (isFrame(element) && element.contentDocument) { 6820 const frameBody = element.contentDocument.body; 6821 const allFrameTabbable = focus_getAllTabbableIn( 6822 frameBody, 6823 false, 6824 fallbackToFocusable 6825 ); 6826 tabbableElements.splice(i, 1, ...allFrameTabbable); 6827 } 6828 }); 6829 if (!tabbableElements.length && fallbackToFocusable) { 6830 return elements; 6831 } 6832 return tabbableElements; 6833} 6834function getAllTabbable(fallbackToFocusable) { 6835 return focus_getAllTabbableIn(document.body, false, fallbackToFocusable); 6836} 6837function focus_getFirstTabbableIn(container, includeContainer, fallbackToFocusable) { 6838 const [first] = focus_getAllTabbableIn( 6839 container, 6840 includeContainer, 6841 fallbackToFocusable 6842 ); 6843 return first || null; 6844} 6845function getFirstTabbable(fallbackToFocusable) { 6846 return focus_getFirstTabbableIn(document.body, false, fallbackToFocusable); 6847} 6848function focus_getLastTabbableIn(container, includeContainer, fallbackToFocusable) { 6849 const allTabbable = focus_getAllTabbableIn( 6850 container, 6851 includeContainer, 6852 fallbackToFocusable 6853 ); 6854 return allTabbable[allTabbable.length - 1] || null; 6855} 6856function getLastTabbable(fallbackToFocusable) { 6857 return focus_getLastTabbableIn(document.body, false, fallbackToFocusable); 6858} 6859function focus_getNextTabbableIn(container, includeContainer, fallbackToFirst, fallbackToFocusable) { 6860 const activeElement = O35LWD4W_getActiveElement(container); 6861 const allFocusable = focus_getAllFocusableIn(container, includeContainer); 6862 const activeIndex = allFocusable.indexOf(activeElement); 6863 const nextFocusableElements = allFocusable.slice(activeIndex + 1); 6864 return nextFocusableElements.find(focus_isTabbable) || (fallbackToFirst ? allFocusable.find(focus_isTabbable) : null) || (fallbackToFocusable ? nextFocusableElements[0] : null) || null; 6865} 6866function getNextTabbable(fallbackToFirst, fallbackToFocusable) { 6867 return focus_getNextTabbableIn( 6868 document.body, 6869 false, 6870 fallbackToFirst, 6871 fallbackToFocusable 6872 ); 6873} 6874function focus_getPreviousTabbableIn(container, includeContainer, fallbackToLast, fallbackToFocusable) { 6875 const activeElement = O35LWD4W_getActiveElement(container); 6876 const allFocusable = focus_getAllFocusableIn(container, includeContainer).reverse(); 6877 const activeIndex = allFocusable.indexOf(activeElement); 6878 const previousFocusableElements = allFocusable.slice(activeIndex + 1); 6879 return previousFocusableElements.find(focus_isTabbable) || (fallbackToLast ? allFocusable.find(focus_isTabbable) : null) || (fallbackToFocusable ? previousFocusableElements[0] : null) || null; 6880} 6881function getPreviousTabbable(fallbackToFirst, fallbackToFocusable) { 6882 return focus_getPreviousTabbableIn( 6883 document.body, 6884 false, 6885 fallbackToFirst, 6886 fallbackToFocusable 6887 ); 6888} 6889function focus_getClosestFocusable(element) { 6890 while (element && !focus_isFocusable(element)) { 6891 element = closest(element, focus_selector); 6892 } 6893 return element || null; 6894} 6895function focus_hasFocus(element) { 6896 const activeElement = O35LWD4W_getActiveElement(element); 6897 if (!activeElement) 6898 return false; 6899 if (activeElement === element) 6900 return true; 6901 const activeDescendant = activeElement.getAttribute("aria-activedescendant"); 6902 if (!activeDescendant) 6903 return false; 6904 return activeDescendant === element.id; 6905} 6906function focus_hasFocusWithin(element) { 6907 const activeElement = O35LWD4W_getActiveElement(element); 6908 if (!activeElement) 6909 return false; 6910 if (O35LWD4W_contains(element, activeElement)) 6911 return true; 6912 const activeDescendant = activeElement.getAttribute("aria-activedescendant"); 6913 if (!activeDescendant) 6914 return false; 6915 if (!("id" in element)) 6916 return false; 6917 if (activeDescendant === element.id) 6918 return true; 6919 return !!element.querySelector(`#${CSS.escape(activeDescendant)}`); 6920} 6921function focus_focusIfNeeded(element) { 6922 if (!focus_hasFocusWithin(element) && focus_isFocusable(element)) { 6923 element.focus(); 6924 } 6925} 6926function disableFocus(element) { 6927 var _a; 6928 const currentTabindex = (_a = element.getAttribute("tabindex")) != null ? _a : ""; 6929 element.setAttribute("data-tabindex", currentTabindex); 6930 element.setAttribute("tabindex", "-1"); 6931} 6932function disableFocusIn(container, includeContainer) { 6933 const tabbableElements = focus_getAllTabbableIn(container, includeContainer);
6934 tabbableElements.forEach(disableFocus); 6935} 6936function restoreFocusIn(container) { 6937 const elements = container.querySelectorAll("[data-tabindex]"); 6938 const restoreTabIndex = (element) => { 6939 const tabindex = element.getAttribute("data-tabindex"); 6940 element.removeAttribute("data-tabindex"); 6941 if (tabindex) { 6942 element.setAttribute("tabindex", tabindex); 6943 } else { 6944 element.removeAttribute("tabindex"); 6945 } 6946 }; 6947 if (container.hasAttribute("data-tabindex")) { 6948 restoreTabIndex(container); 6949 } 6950 elements.forEach(restoreTabIndex); 6951} 6952function focusIntoView(element, options) { 6953 if (!("scrollIntoView" in element)) { 6954 element.focus(); 6955 } else { 6956 element.focus({ preventScroll: true }); 6957 element.scrollIntoView(_chunks_PNRLI7OV_spreadValues({ block: "nearest", inline: "nearest" }, options)); 6958 } 6959} 6960 6961 6962;// CONCATENATED MODULE: ./node_modules/@ariakit/core/esm/__chunks/UCFCIHEU.js 6963 6964
6965// src/utils/platform.ts 6966function isTouchDevice() { 6967 return O35LWD4W_canUseDOM && !!navigator.maxTouchPoints; 6968} 6969function UCFCIHEU_isApple() { 6970 if (!O35LWD4W_canUseDOM) 6971 return false; 6972 return /mac|iphone|ipad|ipod/i.test(navigator.platform); 6973} 6974function isSafari() { 6975 return O35LWD4W_canUseDOM && UCFCIHEU_isApple() && /apple/i.test(navigator.vendor); 6976} 6977function isFirefox() { 6978 return O35LWD4W_canUseDOM && /firefox\//i.test(navigator.userAgent); 6979} 6980function isMac() { 6981 return O35LWD4W_canUseDOM && navigator.platform.startsWith("Mac") && !isTouchDevice(); 6982} 6983 6984 6985 6986;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/MYID4V27.js 6987 6988 6989 6990 6991
vendor: 5,566 bytes, lines 6992-7192
6992// src/focusable/focusable.ts 6993 6994 6995 6996 6997 6998var isSafariBrowser = isSafari(); 6999var alwaysFocusVisibleInputTypes = [ 7000 "text", 7001 "search", 7002 "url", 7003 "tel", 7004 "email", 7005 "password", 7006 "number", 7007 "date", 7008 "month", 7009 "week", 7010 "time", 7011 "datetime", 7012 "datetime-local" 7013]; 7014function isAlwaysFocusVisible(element) { 7015 const { tagName, readOnly, type } = element; 7016 if (tagName === "TEXTAREA" && !readOnly) 7017 return true; 7018 if (tagName === "SELECT" && !readOnly) 7019 return true; 7020 if (tagName === "INPUT" && !readOnly) { 7021 return alwaysFocusVisibleInputTypes.includes(type); 7022 } 7023 if (element.isContentEditable) 7024 return true; 7025 return false; 7026} 7027function isAlwaysFocusVisibleDelayed(element) { 7028 const role = element.getAttribute("role"); 7029 if (role !== "combobox") 7030 return false; 7031 return !!element.dataset.name; 7032} 7033function getLabels(element) { 7034 if ("labels" in element) { 7035 return element.labels; 7036 } 7037 return null; 7038} 7039function isNativeCheckboxOrRadio(element) { 7040 const tagName = element.tagName.toLowerCase(); 7041 if (tagName === "input" && element.type) { 7042 return element.type === "radio" || element.type === "checkbox"; 7043 } 7044 return false; 7045} 7046function MYID4V27_isNativeTabbable(tagName) { 7047 if (!tagName) 7048 return true; 7049 return tagName === "button" || tagName === "input" || tagName === "select" || tagName === "textarea" || tagName === "a"; 7050} 7051function MYID4V27_supportsDisabledAttribute(tagName) { 7052 if (!tagName) 7053 return true; 7054 return tagName === "button" || tagName === "input" || tagName === "select" || tagName === "textarea"; 7055} 7056function MYID4V27_getTabIndex(focusable, trulyDisabled, nativeTabbable, supportsDisabled, tabIndexProp) { 7057 if (!focusable) { 7058 return tabIndexProp; 7059 } 7060 if (trulyDisabled) { 7061 if (nativeTabbable && !supportsDisabled) { 7062 return -1; 7063 } 7064 return; 7065 } 7066 if (nativeTabbable) { 7067 return tabIndexProp; 7068 } 7069 return tabIndexProp || 0; 7070} 7071function MYID4V27_useDisableEvent(onEvent, disabled) { 7072 return useEvent((event) => { 7073 onEvent == null ? void 0 : onEvent(event); 7074 if (event.defaultPrevented) 7075 return; 7076 if (disabled) { 7077 event.stopPropagation(); 7078 event.preventDefault(); 7079 } 7080 }); 7081} 7082var isKeyboardModality = true; 7083function onGlobalMouseDown(event) { 7084 const target = event.target; 7085 if (target && "hasAttribute" in target) { 7086 if (!target.hasAttribute("data-focus-visible")) { 7087 isKeyboardModality = false; 7088 } 7089 } 7090} 7091function onGlobalKeyDown(event) { 7092 if (event.metaKey) 7093 return; 7094 if (event.ctrlKey) 7095 return; 7096 if (event.altKey) 7097 return; 7098 isKeyboardModality = true; 7099} 7100var useFocusable = NQJBHION_createHook( 7101 (_a) => { 7102 var _b = _a, { 7103 focusable = true, 7104 accessibleWhenDisabled, 7105 autoFocus, 7106 onFocusVisible 7107 } = _b, props = __objRest(_b, [ 7108 "focusable", 7109 "accessibleWhenDisabled", 7110 "autoFocus", 7111 "onFocusVisible" 7112 ]); 7113 const ref = (0,external_React_.useRef)(null); 7114 (0,external_React_.useEffect)(() => { 7115 if (!focusable) 7116 return; 7117 addGlobalEventListener("mousedown", onGlobalMouseDown, true); 7118 addGlobalEventListener("keydown", onGlobalKeyDown, true); 7119 }, [focusable]); 7120 if (isSafariBrowser) { 7121 (0,external_React_.useEffect)(() => { 7122 if (!focusable) 7123 return; 7124 const element = ref.current; 7125 if (!element) 7126 return; 7127 if (!isNativeCheckboxOrRadio(element)) 7128 return; 7129 const labels = getLabels(element); 7130 if (!labels) 7131 return; 7132 const onMouseUp = () => queueMicrotask(() => element.focus()); 7133 labels.forEach((label) => label.addEventListener("mouseup", onMouseUp)); 7134 return () => { 7135 labels.forEach( 7136 (label) => label.removeEventListener("mouseup", onMouseUp) 7137 ); 7138 }; 7139 }, [focusable]); 7140 } 7141 const disabled = focusable && props.disabled; 7142 const trulyDisabled = !!disabled && !accessibleWhenDisabled; 7143 const [focusVisible, setFocusVisible] = (0,external_React_.useState)(false); 7144 (0,external_React_.useEffect)(() => { 7145 if (!focusable) 7146 return; 7147 if (trulyDisabled && focusVisible) { 7148 setFocusVisible(false); 7149 } 7150 }, [focusable, trulyDisabled, focusVisible]); 7151 (0,external_React_.useEffect)(() => { 7152 if (!focusable) 7153 return; 7154 if (!focusVisible) 7155 return; 7156 const element = ref.current; 7157 if (!element) 7158 return; 7159 if (typeof IntersectionObserver === "undefined") 7160 return; 7161 const observer = new IntersectionObserver(() => { 7162 if (!focus_isFocusable(element)) { 7163 setFocusVisible(false); 7164 } 7165 }); 7166 observer.observe(element); 7167 return () => observer.disconnect(); 7168 }, [focusable, focusVisible]); 7169 const onKeyPressCapture = MYID4V27_useDisableEvent( 7170 props.onKeyPressCapture, 7171 disabled 7172 ); 7173 const onMouseDownCapture = MYID4V27_useDisableEvent( 7174 props.onMouseDownCapture, 7175 disabled 7176 ); 7177 const onClickCapture = MYID4V27_useDisableEvent(props.onClickCapture, disabled); 7178 const onMouseDownProp = props.onMouseDown; 7179 const onMouseDown = useEvent((event) => { 7180 onMouseDownProp == null ? void 0 : onMouseDownProp(event); 7181 if (event.defaultPrevented) 7182 return; 7183 if (!focusable) 7184 return; 7185 const element = event.currentTarget; 7186 if (!isSafariBrowser) 7187 return; 7188 if (events_isPortalEvent(event)) 7189 return; 7190 if (!O35LWD4W_isButton(element) && !isNativeCheckboxOrRadio(element)) 7191 return; 7192 let receivedFocus = false;
7193 const onFocus = () => { 7194 receivedFocus = true; 7195 }; 7196 const options = { capture: true, once: true }; 7197 element.addEventListener("focusin", onFocus, options); 7198 queueBeforeEvent(element, "mouseup", () => { 7199 element.removeEventListener("focusin", onFocus, true); 7200 if (receivedFocus) 7201 return; 7202 focus_focusIfNeeded(element); 7203 }); 7204 }); 7205 const handleFocusVisible = (event, currentTarget) => { 7206 if (currentTarget) { 7207 event.currentTarget = currentTarget; 7208 } 7209 onFocusVisible == null ? void 0 : onFocusVisible(event); 7210 if (event.defaultPrevented) 7211 return; 7212 if (!focusable) 7213 return; 7214 const element = event.currentTarget; 7215 if (!element) 7216 return; 7217 if (!focus_hasFocus(element)) 7218 return; 7219 setFocusVisible(true); 7220 }; 7221 const onKeyDownCaptureProp = props.onKeyDownCapture; 7222 const onKeyDownCapture = useEvent( 7223 (event) => { 7224 onKeyDownCaptureProp == null ? void 0 : onKeyDownCaptureProp(event); 7225 if (event.defaultPrevented) 7226 return; 7227 if (!focusable) 7228 return; 7229 if (focusVisible) 7230 return; 7231 if (event.metaKey) 7232 return; 7233 if (event.altKey) 7234 return; 7235 if (event.ctrlKey) 7236 return; 7237 if (!events_isSelfTarget(event)) 7238 return; 7239 const element = event.currentTarget; 7240 queueMicrotask(() => handleFocusVisible(event, element)); 7241 } 7242 ); 7243 const onFocusCaptureProp = props.onFocusCapture; 7244 const onFocusCapture = useEvent((event) => { 7245 onFocusCaptureProp == null ? void 0 : onFocusCaptureProp(event); 7246 if (event.defaultPrevented) 7247 return; 7248 if (!focusable) 7249 return; 7250 if (!events_isSelfTarget(event)) { 7251 setFocusVisible(false); 7252 return; 7253 } 7254 const element = event.currentTarget; 7255 const applyFocusVisible = () => handleFocusVisible(event, element); 7256 if (isKeyboardModality || isAlwaysFocusVisible(event.target)) { 7257 queueMicrotask(applyFocusVisible); 7258 } else if (isAlwaysFocusVisibleDelayed(event.target)) { 7259 queueBeforeEvent(event.target, "focusout", applyFocusVisible); 7260 } else { 7261 setFocusVisible(false); 7262 } 7263 }); 7264 const onBlurProp = props.onBlur; 7265 const onBlur = useEvent((event) => { 7266 onBlurProp == null ? void 0 : onBlurProp(event); 7267 if (!focusable) 7268 return; 7269 if (!isFocusEventOutside(event)) 7270 return; 7271 setFocusVisible(false); 7272 }); 7273 const autoFocusOnShow = (0,external_React_.useContext)(FocusableContext); 7274 const autoFocusRef = useEvent((element) => { 7275 if (!focusable) 7276 return; 7277 if (!autoFocus) 7278 return; 7279 if (!element) 7280 return; 7281 if (!autoFocusOnShow) 7282 return; 7283 queueMicrotask(() => { 7284 if (focus_hasFocus(element)) 7285 return; 7286 if (!focus_isFocusable(element)) 7287 return; 7288 element.focus(); 7289 }); 7290 }); 7291 const tagName = useTagName(ref, props.as); 7292 const nativeTabbable = focusable && MYID4V27_isNativeTabbable(tagName); 7293 const supportsDisabled = focusable && MYID4V27_supportsDisabledAttribute(tagName); 7294 const style = trulyDisabled ? PNRLI7OV_spreadValues({ pointerEvents: "none" }, props.style) : props.style; 7295 props = PNRLI7OV_spreadProps(PNRLI7OV_spreadValues({ 7296 "data-focus-visible": focusable && focusVisible ? "" : void 0, 7297 "data-autofocus": autoFocus ? true : void 0, 7298 "aria-disabled": disabled ? true : void 0 7299 }, props), { 7300 ref: useMergeRefs(ref, autoFocusRef, props.ref), 7301 style, 7302 tabIndex: MYID4V27_getTabIndex( 7303 focusable, 7304 trulyDisabled, 7305 nativeTabbable, 7306 supportsDisabled, 7307 props.tabIndex 7308 ),
7309 disabled: supportsDisabled && trulyDisabled ? true : void 0, 7310 // TODO: Test Focusable contentEditable. 7311 contentEditable: disabled ? void 0 : props.contentEditable, 7312 onKeyPressCapture, 7313 onClickCapture, 7314 onMouseDownCapture, 7315 onMouseDown, 7316 onKeyDownCapture, 7317 onFocusCapture, 7318 onBlur 7319 }); 7320 return props; 7321 } 7322); 7323var Focusable = NQJBHION_createComponent((props) => { 7324 props = useFocusable(props); 7325 return NQJBHION_createElement("div", props); 7326}); 7327if (false) {} 7328 7329 7330 7331;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/I3PXTXPI.js 7332 7333 7334 7335 7336
7337// src/hovercard/hovercard-anchor.ts 7338 7339 7340var useHovercardAnchor = NQJBHION_createHook( 7341 (_a) => { 7342 var _b = _a, { store, showOnHover = true } = _b, props = __objRest(_b, ["store", "showOnHover"]); 7343 const disabled = props.disabled || props["aria-disabled"] === true || props["aria-disabled"] === "true"; 7344 const showTimeoutRef = (0,external_React_.useRef)(0); 7345 (0,external_React_.useEffect)(() => () => window.clearTimeout(showTimeoutRef.current), []); 7346 (0,external_React_.useEffect)(() => { 7347 const onMouseLeave = (event) => { 7348 const { anchorElement } = store.getState(); 7349 if (!anchorElement) 7350 return; 7351 if (event.target !== anchorElement) 7352 return; 7353 window.clearTimeout(showTimeoutRef.current); 7354 showTimeoutRef.current = 0; 7355 }; 7356 return addGlobalEventListener("mouseleave", onMouseLeave, true); 7357 }, [store]); 7358 const onMouseMoveProp = props.onMouseMove; 7359 const showOnHoverProp = useBooleanEvent(showOnHover); 7360 const isMouseMoving = useIsMouseMoving(); 7361 const onMouseMove = useEvent( 7362 (event) => { 7363 store.setAnchorElement(event.currentTarget); 7364 onMouseMoveProp == null ? void 0 : onMouseMoveProp(event); 7365 if (disabled) 7366 return; 7367 if (event.defaultPrevented) 7368 return; 7369 if (showTimeoutRef.current) 7370 return; 7371 if (!isMouseMoving()) 7372 return; 7373 if (!showOnHoverProp(event)) 7374 return; 7375 const { showTimeout, timeout } = store.getState(); 7376 showTimeoutRef.current = window.setTimeout(() => { 7377 showTimeoutRef.current = 0; 7378 if (!isMouseMoving()) 7379 return; 7380 store.show(); 7381 }, showTimeout != null ? showTimeout : timeout); 7382 } 7383 ); 7384 props = PNRLI7OV_spreadProps(PNRLI7OV_spreadValues({}, props), { 7385 ref: useMergeRefs(store.setAnchorElement, props.ref), 7386 onMouseMove 7387 }); 7388 props = useFocusable(props); 7389 return props; 7390 } 7391); 7392var HovercardAnchor = NQJBHION_createComponent( 7393 (props) => { 7394 const htmlProps = useHovercardAnchor(props); 7395 return NQJBHION_createElement("a", htmlProps); 7396 } 7397); 7398if (false) {} 7399 7400 7401 7402;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/tooltip/tooltip-anchor.js 7403 7404 7405 7406 7407 7408 7409 7410
7411// src/tooltip/tooltip-anchor.ts 7412 7413 7414 7415var globalStore = createStore({ 7416 activeStore: null 7417}); 7418var useTooltipAnchor = NQJBHION_createHook( 7419 (_a) => { 7420 var _b = _a, { store, showOnHover = true } = _b, props = __objRest(_b, ["store", "showOnHover"]); 7421 (0,external_React_.useEffect)(() => { 7422 return store.sync( 7423 (state) => { 7424 if (state.mounted) { 7425 const { activeStore } = globalStore.getState(); 7426 if (activeStore !== store) { 7427 activeStore == null ? void 0 : activeStore.hide(); 7428 } 7429 return globalStore.setState("activeStore", store); 7430 } 7431 const id = setTimeout(() => { 7432 const { activeStore } = globalStore.getState(); 7433 if (activeStore !== store) 7434 return; 7435 globalStore.setState("activeStore", null); 7436 }, state.skipTimeout); 7437 return () => clearTimeout(id); 7438 }, 7439 ["mounted", "skipTimeout"] 7440 ); 7441 }, [store]); 7442 const onFocusVisibleProp = props.onFocusVisible; 7443 const onFocusVisible = useEvent((event) => { 7444 onFocusVisibleProp == null ? void 0 : onFocusVisibleProp(event); 7445 if (event.defaultPrevented) 7446 return; 7447 store.setAnchorElement(event.currentTarget); 7448 store.show(); 7449 }); 7450 const onBlurProp = props.onBlur; 7451 const onBlur = useEvent((event) => { 7452 onBlurProp == null ? void 0 : onBlurProp(event); 7453 if (event.defaultPrevented) 7454 return; 7455 const { activeStore } = globalStore.getState(); 7456 if (activeStore === store) { 7457 globalStore.setState("activeStore", null); 7458 } 7459 }); 7460 const type = store.useState("type"); 7461 const contentId = store.useState((state) => { 7462 var _a2; 7463 return (_a2 = state.contentElement) == null ? void 0 : _a2.id; 7464 }); 7465 props = PNRLI7OV_spreadProps(PNRLI7OV_spreadValues({ 7466 "aria-labelledby": type === "label" ? contentId : void 0, 7467 "aria-describedby": type === "description" ? contentId : void 0 7468 }, props), { 7469 onFocusVisible, 7470 onBlur 7471 }); 7472 props = useHovercardAnchor(PNRLI7OV_spreadValues({ 7473 store, 7474 showOnHover: (event) => { 7475 if (isFalsyBooleanCallback(showOnHover, event)) 7476 return false; 7477 const { activeStore } = globalStore.getState(); 7478 if (!activeStore) 7479 return true; 7480 store.show(); 7481 return false; 7482 } 7483 }, props)); 7484 return props; 7485 } 7486); 7487var TooltipAnchor = NQJBHION_createComponent((props) => { 7488 const htmlProps = useTooltipAnchor(props); 7489 return NQJBHION_createElement("div", htmlProps); 7490}); 7491if (false) {} 7492 7493 7494;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/X7FKJQME.js
vendor: 2,458 bytes, lines 7495-7579
7495// src/hovercard/utils/polygon.ts 7496function getEventPoint(event) { 7497 return [event.clientX, event.clientY]; 7498} 7499function isPointInPolygon(point, polygon) { 7500 const [x, y] = point; 7501 let inside = false; 7502 const length = polygon.length; 7503 for (let l = length, i = 0, j = l - 1; i < l; j = i++) { 7504 const [xi, yi] = polygon[i]; 7505 const [xj, yj] = polygon[j]; 7506 const [, vy] = polygon[j === 0 ? l - 1 : j - 1] || [0, 0]; 7507 const where = (yi - yj) * (x - xi) - (xi - xj) * (y - yi); 7508 if (yj < yi) { 7509 if (y >= yj && y < yi) { 7510 if (where === 0) 7511 return true; 7512 if (where > 0) { 7513 if (y === yj) { 7514 if (y > vy) { 7515 inside = !inside; 7516 } 7517 } else { 7518 inside = !inside; 7519 } 7520 } 7521 } 7522 } else if (yi < yj) { 7523 if (y > yi && y <= yj) { 7524 if (where === 0) 7525 return true; 7526 if (where < 0) { 7527 if (y === yj) { 7528 if (y < vy) { 7529 inside = !inside; 7530 } 7531 } else { 7532 inside = !inside; 7533 } 7534 } 7535 } 7536 } else if (y == yi && (x >= xj && x <= xi || x >= xi && x <= xj)) { 7537 return true; 7538 } 7539 } 7540 return inside; 7541} 7542function getEnterPointPlacement(enterPoint, rect) { 7543 const { top, right, bottom, left } = rect; 7544 const [x, y] = enterPoint; 7545 const placementX = x < left ? "left" : x > right ? "right" : null; 7546 const placementY = y < top ? "top" : y > bottom ? "bottom" : null; 7547 return [placementX, placementY]; 7548} 7549function getElementPolygon(element, enterPoint) { 7550 const rect = element.getBoundingClientRect(); 7551 const { top, right, bottom, left } = rect; 7552 const [x, y] = getEnterPointPlacement(enterPoint, rect); 7553 const polygon = [enterPoint]; 7554 if (x) { 7555 if (y !== "top") { 7556 polygon.push([x === "left" ? left : right, top]); 7557 } 7558 polygon.push([x === "left" ? right : left, top]); 7559 polygon.push([x === "left" ? right : left, bottom]); 7560 if (y !== "bottom") { 7561 polygon.push([x === "left" ? left : right, bottom]); 7562 } 7563 } else if (y === "top") { 7564 polygon.push([left, top]); 7565 polygon.push([left, bottom]); 7566 polygon.push([right, bottom]); 7567 polygon.push([right, top]); 7568 } else { 7569 polygon.push([left, bottom]); 7570 polygon.push([left, top]); 7571 polygon.push([right, top]); 7572 polygon.push([right, bottom]); 7573 } 7574 return polygon; 7575} 7576 7577 7578 7579;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/IXXFVVA2.js
7580// src/dialog/utils/is-backdrop.ts 7581function isBackdrop(element, ...ids) { 7582 if (!element) 7583 return false; 7584 const backdrop = element.getAttribute("data-backdrop"); 7585 if (backdrop == null) 7586 return false; 7587 if (backdrop === "") 7588 return true; 7589 if (backdrop === "true") 7590 return true; 7591 if (!ids.length) 7592 return true; 7593 return ids.some((id) => backdrop === id); 7594} 7595 7596 7597 7598;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/FW6QFGFT.js
vendor: 2,517 bytes, lines 7599-7692
7599// src/dialog/utils/orchestrate.ts 7600var cleanups = /* @__PURE__ */ new WeakMap(); 7601function orchestrate(element, key, setup) { 7602 if (!cleanups.has(element)) { 7603 cleanups.set(element, /* @__PURE__ */ new Map()); 7604 } 7605 const elementCleanups = cleanups.get(element); 7606 const prevCleanup = elementCleanups.get(key); 7607 if (!prevCleanup) { 7608 elementCleanups.set(key, setup()); 7609 return () => { 7610 var _a; 7611 (_a = elementCleanups.get(key)) == null ? void 0 : _a(); 7612 elementCleanups.delete(key); 7613 }; 7614 } 7615 const cleanup = setup(); 7616 const nextCleanup = () => { 7617 cleanup(); 7618 prevCleanup(); 7619 elementCleanups.delete(key); 7620 }; 7621 elementCleanups.set(key, nextCleanup); 7622 return () => { 7623 const isCurrent = elementCleanups.get(key) === nextCleanup; 7624 if (!isCurrent) 7625 return; 7626 cleanup(); 7627 elementCleanups.set(key, prevCleanup); 7628 }; 7629} 7630function setAttribute(element, attr, value) { 7631 const setup = () => { 7632 const previousValue = element.getAttribute(attr); 7633 element.setAttribute(attr, value); 7634 return () => { 7635 if (previousValue == null) { 7636 element.removeAttribute(attr); 7637 } else { 7638 element.setAttribute(attr, previousValue); 7639 } 7640 }; 7641 }; 7642 return orchestrate(element, attr, setup); 7643} 7644function setProperty(element, property, value) { 7645 const setup = () => { 7646 const exists = property in element; 7647 const previousValue = element[property]; 7648 element[property] = value; 7649 return () => { 7650 if (!exists) { 7651 delete element[property]; 7652 } else { 7653 element[property] = previousValue; 7654 } 7655 }; 7656 }; 7657 return orchestrate(element, property, setup); 7658} 7659function assignStyle(element, style) { 7660 if (!element) 7661 return () => { 7662 }; 7663 const setup = () => { 7664 const prevStyle = element.style.cssText; 7665 Object.assign(element.style, style); 7666 return () => { 7667 element.style.cssText = prevStyle; 7668 }; 7669 }; 7670 return orchestrate(element, "style", setup); 7671} 7672function setCSSProperty(element, property, value) { 7673 if (!element) 7674 return () => { 7675 }; 7676 const setup = () => { 7677 const previousValue = element.style.getPropertyValue(property); 7678 element.style.setProperty(property, value); 7679 return () => { 7680 if (previousValue) { 7681 element.style.setProperty(property, previousValue); 7682 } else { 7683 element.style.removeProperty(property); 7684 } 7685 }; 7686 }; 7687 return orchestrate(element, property, setup); 7688} 7689 7690 7691 7692;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/FV23EKJL.js
7693// src/dialog/utils/walk-tree-outside.ts 7694 7695var ignoreTags = ["SCRIPT", "STYLE"]; 7696function isValidElement(element, ignoredElements) { 7697 if (ignoreTags.includes(element.tagName)) 7698 return false; 7699 return !ignoredElements.some( 7700 (enabledElement) => enabledElement && O35LWD4W_contains(element, enabledElement) 7701 ); 7702} 7703function walkTreeOutside(elements, callback, ancestorCallback) { 7704 for (let element of elements) { 7705 if (!(element == null ? void 0 : element.isConnected)) 7706 continue; 7707 const hasAncestorAlready = elements.some((maybeAncestor) => { 7708 if (!maybeAncestor) 7709 return false; 7710 if (maybeAncestor === element) 7711 return false; 7712 return maybeAncestor.contains(element); 7713 }); 7714 const doc = O35LWD4W_getDocument(element); 7715 while (element.parentElement && element !== doc.body) { 7716 ancestorCallback == null ? void 0 : ancestorCallback(element.parentElement); 7717 if (!hasAncestorAlready) { 7718 for (const child of element.parentElement.children) { 7719 if (isValidElement(child, elements)) { 7720 callback(child); 7721 } 7722 } 7723 } 7724 element = element.parentElement; 7725 } 7726 } 7727} 7728 7729 7730 7731;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/HCZMY53N.js 7732 7733 7734 7735
7736// src/dialog/utils/mark-tree-outside.ts 7737 7738function getPropertyName(id = "", ancestor = false) { 7739 return `__ariakit-dialog-${ancestor ? "ancestor" : "outside"}${id ? `-${id}` : ""}`; 7740} 7741function markElement(element, id = "") { 7742 return chain( 7743 setProperty(element, getPropertyName(), true), 7744 setProperty(element, getPropertyName(id), true) 7745 ); 7746} 7747function markAncestor(element, id = "") { 7748 return chain( 7749 setProperty(element, getPropertyName("", true), true), 7750 setProperty(element, getPropertyName(id, true), true) 7751 ); 7752} 7753function isElementMarked(element, id) { 7754 const ancestorProperty = getPropertyName(id, true); 7755 if (element[ancestorProperty]) 7756 return true; 7757 const elementProperty = getPropertyName(id); 7758 do { 7759 if (element[elementProperty]) 7760 return true; 7761 if (!element.parentElement) 7762 return false; 7763 element = element.parentElement; 7764 } while (true); 7765} 7766function markTreeOutside(dialogId, ...elements) { 7767 const cleanups = []; 7768 const ids = elements.map((el) => el == null ? void 0 : el.id); 7769 walkTreeOutside( 7770 elements, 7771 (element) => { 7772 if (isBackdrop(element, ...ids)) 7773 return; 7774 cleanups.unshift(markElement(element, dialogId)); 7775 }, 7776 (ancestor) => cleanups.unshift(markAncestor(ancestor, dialogId)) 7777 ); 7778 const restoreAccessibilityTree = () => { 7779 cleanups.forEach((fn) => fn()); 7780 }; 7781 return restoreAccessibilityTree; 7782} 7783 7784 7785 7786;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/4PKIGBPJ.js 7787 7788
7789// src/role/role.ts 7790var _4PKIGBPJ_useRole = NQJBHION_createHook((props) => { 7791 return props; 7792}); 7793var _4PKIGBPJ_Role = NQJBHION_createComponent((props) => { 7794 return NQJBHION_createElement("div", props); 7795}); 7796if (false) {} 7797 7798 7799 7800;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/WHEEIXMF.js 7801 7802 7803 7804
7805// src/disclosure/disclosure-content.ts 7806 7807function afterTimeout(timeoutMs, cb) { 7808 const timeoutId = setTimeout(cb, timeoutMs); 7809 return () => clearTimeout(timeoutId); 7810} 7811function WHEEIXMF_afterPaint(cb) { 7812 let raf = requestAnimationFrame(() => { 7813 raf = requestAnimationFrame(cb); 7814 }); 7815 return () => cancelAnimationFrame(raf); 7816} 7817function parseCSSTime(...times) { 7818 return times.join(", ").split(", ").reduce((longestTime, currentTimeString) => { 7819 const currentTime = parseFloat(currentTimeString || "0s") * 1e3; 7820 if (currentTime > longestTime) 7821 return currentTime; 7822 return longestTime; 7823 }, 0); 7824} 7825function isHidden(mounted, hidden, alwaysVisible) { 7826 return !alwaysVisible && hidden !== false && (!mounted || !!hidden); 7827} 7828var useDisclosureContent = NQJBHION_createHook( 7829 (_a) => { 7830 var _b = _a, { store, alwaysVisible } = _b, props = __objRest(_b, ["store", "alwaysVisible"]); 7831 const id = useId(props.id); 7832 const [transition, setTransition] = (0,external_React_.useState)(null); 7833 const open = store.useState("open"); 7834 const mounted = store.useState("mounted"); 7835 const animated = store.useState("animated"); 7836 const contentElement = store.useState("contentElement"); 7837 useSafeLayoutEffect(() => { 7838 if (!animated) 7839 return; 7840 if (!(contentElement == null ? void 0 : contentElement.isConnected)) { 7841 setTransition(null); 7842 return; 7843 } 7844 return WHEEIXMF_afterPaint(() => { 7845 setTransition(open ? "enter" : "leave"); 7846 }); 7847 }, [animated, contentElement, open]); 7848 useSafeLayoutEffect(() => { 7849 if (!animated) 7850 return; 7851 if (!contentElement) 7852 return; 7853 if (!transition) 7854 return; 7855 if (transition === "enter" && !open) 7856 return; 7857 if (transition === "leave" && open) 7858 return; 7859 if (typeof animated === "number") { 7860 const timeoutMs2 = animated; 7861 return afterTimeout(timeoutMs2, store.stopAnimation); 7862 } 7863 const { 7864 transitionDuration, 7865 animationDuration, 7866 transitionDelay, 7867 animationDelay 7868 } = getComputedStyle(contentElement); 7869 const delay = parseCSSTime(transitionDelay, animationDelay); 7870 const duration = parseCSSTime(transitionDuration, animationDuration); 7871 const timeoutMs = delay + duration; 7872 if (!timeoutMs) 7873 return; 7874 return afterTimeout(timeoutMs, store.stopAnimation); 7875 }, [animated, contentElement, open, transition]); 7876 const hidden = isHidden(mounted, props.hidden, alwaysVisible); 7877 const style = hidden ? PNRLI7OV_spreadProps(PNRLI7OV_spreadValues({}, props.style), { display: "none" }) : props.style; 7878 props = PNRLI7OV_spreadProps(PNRLI7OV_spreadValues({ 7879 id, 7880 "data-enter": transition === "enter" ? "" : void 0, 7881 "data-leave": transition === "leave" ? "" : void 0, 7882 hidden 7883 }, props), { 7884 ref: useMergeRefs(id ? store.setContentElement : null, props.ref), 7885 style 7886 }); 7887 return props; 7888 } 7889); 7890var DisclosureContent = NQJBHION_createComponent( 7891 (props) => { 7892 const htmlProps = useDisclosureContent(props); 7893 return NQJBHION_createElement("div", htmlProps); 7894 } 7895); 7896if (false) {} 7897 7898 7899 7900;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/53MSBYTF.js 7901 7902 7903 7904 7905 7906 7907
7908// src/dialog/dialog-backdrop.tsx 7909 7910 7911function DialogBackdrop({ 7912 store, 7913 backdrop, 7914 backdropProps, 7915 alwaysVisible, 7916 hidden 7917}) { 7918 const ref = (0,external_React_.useRef)(null); 7919 const disclosure = useDisclosureStore({ disclosure: store }); 7920 const contentElement = store.useState("contentElement"); 7921 useSafeLayoutEffect(() => { 7922 const backdrop2 = ref.current; 7923 const dialog = contentElement; 7924 if (!backdrop2) 7925 return; 7926 if (!dialog) 7927 return; 7928 backdrop2.style.zIndex = getComputedStyle(dialog).zIndex; 7929 }, [contentElement]); 7930 useSafeLayoutEffect(() => { 7931 const id = contentElement == null ? void 0 : contentElement.id; 7932 if (!id) 7933 return; 7934 const backdrop2 = ref.current; 7935 if (!backdrop2) 7936 return; 7937 return markAncestor(backdrop2, id); 7938 }, [contentElement]); 7939 if (hidden != null) { 7940 backdropProps = PNRLI7OV_spreadProps(PNRLI7OV_spreadValues({}, backdropProps), { hidden }); 7941 } 7942 const props = useDisclosureContent(PNRLI7OV_spreadProps(PNRLI7OV_spreadValues({ 7943 store: disclosure, 7944 role: "presentation", 7945 "data-backdrop": (contentElement == null ? void 0 : contentElement.id) || "", 7946 alwaysVisible 7947 }, backdropProps), { 7948 ref: useMergeRefs(backdropProps == null ? void 0 : backdropProps.ref, ref), 7949 style: PNRLI7OV_spreadValues({ 7950 position: "fixed", 7951 top: 0, 7952 right: 0, 7953 bottom: 0, 7954 left: 0 7955 }, backdropProps == null ? void 0 : backdropProps.style) 7956 })); 7957 if (!backdrop) 7958 return null; 7959 if ((0,external_React_.isValidElement)(backdrop)) { 7960 return /* @__PURE__ */ (0,jsx_runtime.jsx)(_4PKIGBPJ_Role, PNRLI7OV_spreadProps(PNRLI7OV_spreadValues({}, props), { render: backdrop })); 7961 } 7962 const Component = typeof backdrop !== "boolean" ? backdrop : "div"; 7963 return /* @__PURE__ */ (0,jsx_runtime.jsx)(_4PKIGBPJ_Role, PNRLI7OV_spreadProps(PNRLI7OV_spreadValues({}, props), { render: /* @__PURE__ */ (0,jsx_runtime.jsx)(Component, {}) })); 7964} 7965 7966 7967 7968;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/CYJJUQU3.js 7969 7970 7971 7972
7973// src/dialog/utils/disable-accessibility-tree-outside.ts 7974function hideElementFromAccessibilityTree(element) { 7975 return setAttribute(element, "aria-hidden", "true"); 7976} 7977function disableAccessibilityTreeOutside(...elements) { 7978 const cleanups = []; 7979 const ids = elements.map((el) => el == null ? void 0 : el.id); 7980 walkTreeOutside(elements, (element) => { 7981 if (isBackdrop(element, ...ids)) 7982 return; 7983 cleanups.unshift(hideElementFromAccessibilityTree(element)); 7984 }); 7985 const restoreAccessibilityTree = () => { 7986 cleanups.forEach((fn) => fn()); 7987 }; 7988 return restoreAccessibilityTree; 7989} 7990 7991 7992 7993;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/KOVUJERF.js
7994// src/dialog/utils/supports-inert.ts 7995function supportsInert() { 7996 return "inert" in HTMLElement.prototype; 7997} 7998 7999 8000 8001;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/AR6DTI3S.js 8002 8003 8004 8005 8006 8007
8008// src/dialog/utils/disable-tree-outside.ts 8009 8010 8011 8012function disableElement(element) { 8013 if (!("style" in element)) 8014 return noop; 8015 if (supportsInert()) { 8016 return setProperty(element, "inert", true); 8017 } 8018 return chain( 8019 hideElementFromAccessibilityTree(element), 8020 assignStyle(element, { 8021 pointerEvents: "none", 8022 userSelect: "none", 8023 cursor: "default" 8024 }) 8025 ); 8026} 8027function disableTreeOutside(...elements) { 8028 const cleanups = []; 8029 const ids = elements.map((el) => el == null ? void 0 : el.id); 8030 if (!supportsInert()) { 8031 getAllTabbable().forEach((element) => { 8032 if (elements.some((el) => el && O35LWD4W_contains(el, element))) 8033 return; 8034 cleanups.unshift(setAttribute(element, "tabindex", "-1")); 8035 }); 8036 } 8037 walkTreeOutside(elements, (element) => { 8038 if (isBackdrop(element, ...ids)) 8039 return; 8040 cleanups.unshift(disableElement(element)); 8041 }); 8042 const restoreTreeOutside = () => { 8043 cleanups.forEach((fn) => fn()); 8044 }; 8045 return restoreTreeOutside; 8046} 8047 8048 8049 8050;// CONCATENATED MODULE: external "ReactDOM" 8051const external_ReactDOM_namespaceObject = window["ReactDOM"]; 8052var external_ReactDOM_default = /*#__PURE__*/__webpack_require__.n(external_ReactDOM_namespaceObject); 8053;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/CJI67A3R.js 8054 8055
vendor: 2,801 bytes, lines 8056-8141
8056// src/dialog/utils/use-root-dialog.ts 8057 8058 8059 8060function useRootDialog({ 8061 attribute, 8062 contentId, 8063 contentElement, 8064 enabled 8065}) { 8066 const [updated, retry] = useForceUpdate(); 8067 const isRootDialog = (0,external_React_.useCallback)(() => { 8068 if (!enabled) 8069 return false; 8070 if (!contentElement) 8071 return false; 8072 const { body } = O35LWD4W_getDocument(contentElement); 8073 const id = body.getAttribute(attribute); 8074 return !id || id === contentId; 8075 }, [updated, enabled, contentElement, attribute, contentId]); 8076 (0,external_React_.useEffect)(() => { 8077 if (!enabled) 8078 return; 8079 if (!contentId) 8080 return; 8081 if (!contentElement) 8082 return; 8083 const { body } = O35LWD4W_getDocument(contentElement); 8084 if (isRootDialog()) { 8085 body.setAttribute(attribute, contentId); 8086 return () => body.removeAttribute(attribute); 8087 } 8088 const observer = new MutationObserver(() => (0,external_ReactDOM_namespaceObject.flushSync)(retry)); 8089 observer.observe(body, { attributeFilter: [attribute] }); 8090 return () => observer.disconnect(); 8091 }, [updated, enabled, contentId, contentElement, isRootDialog, attribute]); 8092 return isRootDialog; 8093} 8094 8095 8096 8097;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/3LAWLNOX.js 8098 8099 8100 8101// src/dialog/utils/use-prevent-body-scroll.ts 8102 8103 8104 8105 8106function getPaddingProperty(documentElement) { 8107 const documentLeft = documentElement.getBoundingClientRect().left; 8108 const scrollbarX = Math.round(documentLeft) + documentElement.scrollLeft; 8109 return scrollbarX ? "paddingLeft" : "paddingRight"; 8110} 8111function usePreventBodyScroll(contentElement, contentId, enabled) { 8112 const isRootDialog = useRootDialog({ 8113 attribute: "data-dialog-prevent-body-scroll", 8114 contentElement, 8115 contentId, 8116 enabled 8117 }); 8118 (0,external_React_.useEffect)(() => { 8119 if (!isRootDialog()) 8120 return; 8121 if (!contentElement) 8122 return; 8123 const doc = O35LWD4W_getDocument(contentElement); 8124 const win = O35LWD4W_getWindow(contentElement); 8125 const { documentElement, body } = doc; 8126 const cssScrollbarWidth = documentElement.style.getPropertyValue("--scrollbar-width"); 8127 const scrollbarWidth = cssScrollbarWidth ? parseInt(cssScrollbarWidth) : win.innerWidth - documentElement.clientWidth; 8128 const setScrollbarWidthProperty = () => setCSSProperty( 8129 documentElement, 8130 "--scrollbar-width", 8131 `${scrollbarWidth}px` 8132 ); 8133 const paddingProperty = getPaddingProperty(documentElement); 8134 const setStyle = () => assignStyle(body, { 8135 overflow: "hidden", 8136 [paddingProperty]: `${scrollbarWidth}px` 8137 }); 8138 const setIOSStyle = () => { 8139 var _a, _b; 8140 const { scrollX, scrollY, visualViewport } = win; 8141 const offsetLeft = (_a = visualViewport == null ? void 0 : visualViewport.offsetLeft) != null ? _a : 0;
8142 const offsetTop = (_b = visualViewport == null ? void 0 : visualViewport.offsetTop) != null ? _b : 0; 8143 const restoreStyle = assignStyle(body, { 8144 position: "fixed", 8145 overflow: "hidden", 8146 top: `${-(scrollY - Math.floor(offsetTop))}px`, 8147 left: `${-(scrollX - Math.floor(offsetLeft))}px`, 8148 right: "0", 8149 [paddingProperty]: `${scrollbarWidth}px` 8150 }); 8151 return () => { 8152 restoreStyle(); 8153 if (true) { 8154 win.scrollTo(scrollX, scrollY); 8155 } 8156 }; 8157 }; 8158 const isIOS = UCFCIHEU_isApple() && !isMac(); 8159 return chain( 8160 setScrollbarWidthProperty(), 8161 isIOS ? setIOSStyle() : setStyle() 8162 ); 8163 }, [isRootDialog, contentElement]); 8164} 8165 8166 8167 8168;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/OEA63YXU.js 8169 8170
8171// src/dialog/utils/use-nested-dialogs.tsx 8172 8173 8174 8175var NestedDialogsContext = (0,external_React_.createContext)({}); 8176function useNestedDialogs(store) { 8177 const context = (0,external_React_.useContext)(NestedDialogsContext); 8178 const [dialogs, setDialogs] = (0,external_React_.useState)([]); 8179 const add = (0,external_React_.useCallback)( 8180 (dialog) => { 8181 var _a; 8182 setDialogs((dialogs2) => [...dialogs2, dialog]); 8183 return chain((_a = context.add) == null ? void 0 : _a.call(context, dialog), () => { 8184 setDialogs((dialogs2) => dialogs2.filter((d) => d !== dialog)); 8185 }); 8186 }, 8187 [context] 8188 ); 8189 useSafeLayoutEffect(() => { 8190 return store.sync( 8191 (state) => { 8192 var _a; 8193 if (!state.open) 8194 return; 8195 if (!state.contentElement) 8196 return; 8197 return (_a = context.add) == null ? void 0 : _a.call(context, store); 8198 }, 8199 ["open", "contentElement"] 8200 ); 8201 }, [store, context]); 8202 useSafeLayoutEffect(() => { 8203 var _a; 8204 return (_a = context.store) == null ? void 0 : _a.sync( 8205 (state) => { 8206 if (state.open) 8207 return; 8208 store.hide(); 8209 }, 8210 ["open"] 8211 ); 8212 }, [context, store]); 8213 const providerValue = (0,external_React_.useMemo)(() => ({ store, add }), [store, add]); 8214 const wrapElement = (0,external_React_.useCallback)( 8215 (element) => /* @__PURE__ */ (0,jsx_runtime.jsx)(NestedDialogsContext.Provider, { value: providerValue, children: element }), 8216 [providerValue] 8217 ); 8218 return { wrapElement, nestedDialogs: dialogs }; 8219} 8220 8221 8222 8223;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/7JNF6I52.js
8224// src/dialog/utils/use-previous-mouse-down-ref.ts 8225 8226 8227function usePreviousMouseDownRef(enabled) { 8228 const previousMouseDownRef = (0,external_React_.useRef)(); 8229 (0,external_React_.useEffect)(() => { 8230 if (!enabled) { 8231 previousMouseDownRef.current = null; 8232 return; 8233 } 8234 const onMouseDown = (event) => { 8235 previousMouseDownRef.current = event.target; 8236 }; 8237 return addGlobalEventListener("mousedown", onMouseDown, true); 8238 }, [enabled]); 8239 return previousMouseDownRef; 8240} 8241 8242 8243 8244;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/4XWTU3WN.js 8245 8246 8247 8248 8249
vendor: 3,686 bytes, lines 8250-8367
8250// src/dialog/utils/use-hide-on-interact-outside.ts 8251 8252 8253 8254function isInDocument(target) { 8255 if (target.tagName === "HTML") 8256 return true; 8257 return O35LWD4W_contains(O35LWD4W_getDocument(target).body, target); 8258} 8259function isDisclosure(disclosure, target) { 8260 if (!disclosure) 8261 return false; 8262 if (O35LWD4W_contains(disclosure, target)) 8263 return true; 8264 const activeId = target.getAttribute("aria-activedescendant"); 8265 if (activeId) { 8266 const activeElement = O35LWD4W_getDocument(disclosure).getElementById(activeId); 8267 if (activeElement) { 8268 return O35LWD4W_contains(disclosure, activeElement); 8269 } 8270 } 8271 return false; 8272} 8273function isMouseEventOnDialog(event, dialog) { 8274 if (!("clientY" in event)) 8275 return false; 8276 const rect = dialog.getBoundingClientRect(); 8277 if (rect.width === 0 || rect.height === 0) 8278 return false; 8279 return rect.top <= event.clientY && event.clientY <= rect.top + rect.height && rect.left <= event.clientX && event.clientX <= rect.left + rect.width; 8280} 8281function useEventOutside({ 8282 store, 8283 type, 8284 listener, 8285 capture 8286}) { 8287 const callListener = useEvent(listener); 8288 const open = store.useState("open"); 8289 (0,external_React_.useEffect)(() => { 8290 if (!open) 8291 return; 8292 const onEvent = (event) => { 8293 const { contentElement, disclosureElement } = store.getState(); 8294 const target = event.target; 8295 if (!contentElement) 8296 return; 8297 if (!target) 8298 return; 8299 if (!isInDocument(target)) 8300 return; 8301 if (O35LWD4W_contains(contentElement, target)) 8302 return; 8303 if (isDisclosure(disclosureElement, target)) 8304 return; 8305 if (target.hasAttribute("data-focus-trap")) 8306 return; 8307 if (isMouseEventOnDialog(event, contentElement)) 8308 return; 8309 if (!isElementMarked(target, contentElement.id)) 8310 return; 8311 callListener(event); 8312 }; 8313 return addGlobalEventListener(type, onEvent, capture); 8314 }, [open, capture]); 8315} 8316function shouldHideOnInteractOutside(hideOnInteractOutside, event) { 8317 if (typeof hideOnInteractOutside === "function") { 8318 return hideOnInteractOutside(event); 8319 } 8320 return !!hideOnInteractOutside; 8321} 8322function useHideOnInteractOutside(store, hideOnInteractOutside) { 8323 const open = store.useState("open"); 8324 const previousMouseDownRef = usePreviousMouseDownRef(open); 8325 const props = { store, capture: true }; 8326 useEventOutside(PNRLI7OV_spreadProps(PNRLI7OV_spreadValues({}, props), { 8327 type: "click", 8328 listener: (event) => { 8329 const { contentElement } = store.getState(); 8330 const previousMouseDown = previousMouseDownRef.current; 8331 if (!previousMouseDown) 8332 return; 8333 if (!O35LWD4W_isVisible(previousMouseDown)) 8334 return; 8335 if (!isElementMarked(previousMouseDown, contentElement == null ? void 0 : contentElement.id)) 8336 return; 8337 if (!shouldHideOnInteractOutside(hideOnInteractOutside, event)) 8338 return; 8339 store.hide(); 8340 } 8341 })); 8342 useEventOutside(PNRLI7OV_spreadProps(PNRLI7OV_spreadValues({}, props), { 8343 type: "focusin", 8344 listener: (event) => { 8345 const { contentElement } = store.getState(); 8346 if (!contentElement) 8347 return; 8348 if (event.target === O35LWD4W_getDocument(contentElement)) 8349 return; 8350 if (!shouldHideOnInteractOutside(hideOnInteractOutside, event)) 8351 return; 8352 store.hide(); 8353 } 8354 })); 8355 useEventOutside(PNRLI7OV_spreadProps(PNRLI7OV_spreadValues({}, props), { 8356 type: "contextmenu", 8357 listener: (event) => { 8358 if (!shouldHideOnInteractOutside(hideOnInteractOutside, event)) 8359 return; 8360 store.hide(); 8361 } 8362 })); 8363} 8364 8365 8366 8367;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/62DFK33R.js
8368// src/dialog/utils/prepend-hidden-dismiss.ts 8369 8370function prependHiddenDismiss(container, onClick) { 8371 const document = O35LWD4W_getDocument(container); 8372 const button = document.createElement("button"); 8373 button.type = "button"; 8374 button.tabIndex = -1; 8375 button.textContent = "Dismiss popup"; 8376 Object.assign(button.style, { 8377 border: "0px", 8378 clip: "rect(0 0 0 0)", 8379 height: "1px", 8380 margin: "-1px", 8381 overflow: "hidden", 8382 padding: "0px", 8383 position: "absolute", 8384 whiteSpace: "nowrap", 8385 width: "1px" 8386 }); 8387 button.addEventListener("click", onClick); 8388 container.prepend(button); 8389 const removeHiddenDismiss = () => { 8390 button.removeEventListener("click", onClick); 8391 button.remove(); 8392 }; 8393 return removeHiddenDismiss; 8394} 8395 8396 8397 8398;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/IYNN2ZO5.js 8399 8400 8401 8402 8403
8404// src/focusable/focusable-container.tsx 8405 8406var useFocusableContainer = NQJBHION_createHook( 8407 (_a) => { 8408 var _b = _a, { autoFocusOnShow = true } = _b, props = __objRest(_b, ["autoFocusOnShow"]); 8409 props = useWrapElement( 8410 props, 8411 (element) => /* @__PURE__ */ (0,jsx_runtime.jsx)(FocusableContext.Provider, { value: autoFocusOnShow, children: element }), 8412 [autoFocusOnShow] 8413 ); 8414 return props; 8415 } 8416); 8417var FocusableContainer = NQJBHION_createComponent( 8418 (props) => { 8419 const htmlProps = useFocusableContainer(props); 8420 return NQJBHION_createElement("div", htmlProps); 8421 } 8422); 8423if (false) {} 8424 8425 8426 8427;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/COQHFAEN.js
8428// src/heading/heading-context.ts 8429 8430var HeadingContext = (0,external_React_.createContext)(0); 8431 8432 8433 8434;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/6OMX4H3W.js 8435 8436
8437// src/heading/heading-level.tsx 8438 8439 8440function HeadingLevel({ level, children }) { 8441 const contextLevel = (0,external_React_.useContext)(HeadingContext); 8442 const nextLevel = Math.max( 8443 Math.min(level || contextLevel + 1, 6), 8444 1 8445 ); 8446 return /* @__PURE__ */ (0,jsx_runtime.jsx)(HeadingContext.Provider, { value: nextLevel, children }); 8447} 8448 8449 8450 8451;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/FL2AU7YJ.js 8452 8453 8454
8455// src/visually-hidden/visually-hidden.ts 8456var useVisuallyHidden = NQJBHION_createHook((props) => { 8457 props = PNRLI7OV_spreadProps(PNRLI7OV_spreadValues({}, props), { 8458 style: PNRLI7OV_spreadValues({ 8459 border: 0, 8460 clip: "rect(0 0 0 0)", 8461 height: "1px", 8462 margin: "-1px", 8463 overflow: "hidden", 8464 padding: 0, 8465 position: "absolute", 8466 whiteSpace: "nowrap", 8467 width: "1px" 8468 }, props.style) 8469 }); 8470 return props; 8471}); 8472var VisuallyHidden = NQJBHION_createComponent( 8473 (props) => { 8474 const htmlProps = useVisuallyHidden(props); 8475 return NQJBHION_createElement("span", htmlProps); 8476 } 8477); 8478if (false) {} 8479 8480 8481 8482;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/EJ3GIT5B.js 8483 8484 8485 8486
8487// src/focus-trap/focus-trap.ts 8488var useFocusTrap = NQJBHION_createHook((props) => { 8489 props = PNRLI7OV_spreadProps(PNRLI7OV_spreadValues({ 8490 "data-focus-trap": "", 8491 tabIndex: 0, 8492 "aria-hidden": true 8493 }, props), { 8494 style: PNRLI7OV_spreadValues({ 8495 // Prevents unintended scroll jumps. 8496 position: "fixed", 8497 top: 0, 8498 left: 0 8499 }, props.style) 8500 }); 8501 props = useVisuallyHidden(props); 8502 return props; 8503}); 8504var FocusTrap = NQJBHION_createComponent((props) => { 8505 const htmlProps = useFocusTrap(props); 8506 return NQJBHION_createElement("span", htmlProps); 8507}); 8508if (false) {} 8509 8510 8511 8512;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/LDDPB3PY.js
8513// src/portal/portal-context.ts 8514 8515var PortalContext = (0,external_React_.createContext)(null); 8516 8517 8518 8519;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/LL3AE4N4.js 8520 8521 8522 8523 8524 8525 8526
vendor: 3,286 bytes, lines 8527-8622
8527// src/portal/portal.tsx 8528 8529 8530 8531 8532 8533 8534function getRootElement(element) { 8535 return O35LWD4W_getDocument(element).body; 8536} 8537function getPortalElement(element, portalElement) { 8538 if (!portalElement) { 8539 return O35LWD4W_getDocument(element).createElement("div"); 8540 } 8541 if (typeof portalElement === "function") { 8542 return portalElement(element); 8543 } 8544 return portalElement; 8545} 8546function getRandomId(prefix = "id") { 8547 return `${prefix ? `${prefix}-` : ""}${Math.random().toString(36).substr(2, 6)}`; 8548} 8549function queueFocus(element) { 8550 queueMicrotask(() => { 8551 element == null ? void 0 : element.focus(); 8552 }); 8553} 8554var usePortal = NQJBHION_createHook( 8555 (_a) => { 8556 var _b = _a, { preserveTabOrder, portalElement, portalRef, portal = true } = _b, props = __objRest(_b, ["preserveTabOrder", "portalElement", "portalRef", "portal"]); 8557 const ref = (0,external_React_.useRef)(null); 8558 const refProp = useMergeRefs(ref, props.ref); 8559 const context = (0,external_React_.useContext)(PortalContext); 8560 const [portalNode, setPortalNode] = (0,external_React_.useState)(null); 8561 const outerBeforeRef = (0,external_React_.useRef)(null); 8562 const innerBeforeRef = (0,external_React_.useRef)(null); 8563 const innerAfterRef = (0,external_React_.useRef)(null); 8564 const outerAfterRef = (0,external_React_.useRef)(null); 8565 useSafeLayoutEffect(() => { 8566 const element = ref.current; 8567 if (!element || !portal) { 8568 setPortalNode(null); 8569 return; 8570 } 8571 const portalEl = getPortalElement(element, portalElement); 8572 if (!portalEl) { 8573 setPortalNode(null); 8574 return; 8575 } 8576 const isPortalInDocument = portalEl.isConnected; 8577 if (!isPortalInDocument) { 8578 const rootElement = context || getRootElement(element); 8579 rootElement.appendChild(portalEl); 8580 } 8581 if (!portalEl.id) { 8582 portalEl.id = element.id ? `portal/${element.id}` : getRandomId(); 8583 } 8584 setPortalNode(portalEl); 8585 CP3U4HPL_setRef(portalRef, portalEl); 8586 if (isPortalInDocument) 8587 return; 8588 return () => { 8589 portalEl.remove(); 8590 CP3U4HPL_setRef(portalRef, null); 8591 }; 8592 }, [portal, portalElement, context, portalRef]); 8593 (0,external_React_.useEffect)(() => { 8594 if (!portalNode) 8595 return; 8596 if (!preserveTabOrder) 8597 return; 8598 let raf = 0; 8599 const onFocus = (event) => { 8600 if (!isFocusEventOutside(event)) 8601 return; 8602 const focusing = event.type === "focusin"; 8603 if (focusing) 8604 return restoreFocusIn(portalNode); 8605 cancelAnimationFrame(raf); 8606 raf = requestAnimationFrame(() => { 8607 disableFocusIn(portalNode, true); 8608 }); 8609 }; 8610 portalNode.addEventListener("focusin", onFocus, true); 8611 portalNode.addEventListener("focusout", onFocus, true); 8612 return () => { 8613 portalNode.removeEventListener("focusin", onFocus, true); 8614 portalNode.removeEventListener("focusout", onFocus, true); 8615 }; 8616 }, [portalNode, preserveTabOrder]); 8617 props = useWrapElement( 8618 props, 8619 (element) => { 8620 element = // While the portal node is not in the DOM, we need to pass the 8621 // current context to the portal context, otherwise it's going to 8622 // reset to the body element on nested portals.
8623 /* @__PURE__ */ (0,jsx_runtime.jsx)(PortalContext.Provider, { value: portalNode || context, children: element }); 8624 if (!portal) 8625 return element; 8626 if (!portalNode) { 8627 return /* @__PURE__ */ (0,jsx_runtime.jsx)( 8628 "span", 8629 { 8630 ref: refProp, 8631 id: props.id, 8632 style: { position: "fixed" }, 8633 hidden: true 8634 } 8635 ); 8636 } 8637 element = /* @__PURE__ */ (0,jsx_runtime.jsxs)(jsx_runtime.Fragment, { children: [ 8638 preserveTabOrder && portalNode && /* @__PURE__ */ (0,jsx_runtime.jsx)( 8639 FocusTrap, 8640 { 8641 ref: innerBeforeRef, 8642 className: "__focus-trap-inner-before", 8643 onFocus: (event) => { 8644 if (isFocusEventOutside(event, portalNode)) { 8645 queueFocus(getNextTabbable()); 8646 } else { 8647 queueFocus(outerBeforeRef.current); 8648 } 8649 } 8650 } 8651 ), 8652 element, 8653 preserveTabOrder && portalNode && /* @__PURE__ */ (0,jsx_runtime.jsx)( 8654 FocusTrap, 8655 { 8656 ref: innerAfterRef, 8657 className: "__focus-trap-inner-after", 8658 onFocus: (event) => { 8659 if (isFocusEventOutside(event, portalNode)) { 8660 queueFocus(getPreviousTabbable()); 8661 } else { 8662 queueFocus(outerAfterRef.current); 8663 } 8664 } 8665 } 8666 ) 8667 ] }); 8668 if (portalNode) { 8669 element = (0,external_ReactDOM_namespaceObject.createPortal)(element, portalNode); 8670 } 8671 element = /* @__PURE__ */ (0,jsx_runtime.jsxs)(jsx_runtime.Fragment, { children: [ 8672 preserveTabOrder && portalNode && /* @__PURE__ */ (0,jsx_runtime.jsx)( 8673 FocusTrap, 8674 { 8675 ref: outerBeforeRef, 8676 className: "__focus-trap-outer-before", 8677 onFocus: (event) => { 8678 const fromOuter = event.relatedTarget === outerAfterRef.current; 8679 if (!fromOuter && isFocusEventOutside(event, portalNode)) { 8680 queueFocus(innerBeforeRef.current); 8681 } else { 8682 queueFocus(getPreviousTabbable()); 8683 } 8684 } 8685 } 8686 ), 8687 preserveTabOrder && // We're using position: fixed here so that the browser doesn't 8688 // add margin to the element when setting gap on a parent element.
8689 /* @__PURE__ */ (0,jsx_runtime.jsx)("span", { "aria-owns": portalNode == null ? void 0 : portalNode.id, style: { position: "fixed" } }), 8690 element, 8691 preserveTabOrder && portalNode && /* @__PURE__ */ (0,jsx_runtime.jsx)( 8692 FocusTrap, 8693 { 8694 ref: outerAfterRef, 8695 className: "__focus-trap-outer-after", 8696 onFocus: (event) => { 8697 if (isFocusEventOutside(event, portalNode)) { 8698 queueFocus(innerAfterRef.current); 8699 } else { 8700 const nextTabbable = getNextTabbable(); 8701 if (nextTabbable === innerBeforeRef.current) { 8702 requestAnimationFrame(() => { 8703 var _a2; 8704 return (_a2 = getNextTabbable()) == null ? void 0 : _a2.focus(); 8705 }); 8706 return; 8707 } 8708 queueFocus(nextTabbable); 8709 } 8710 } 8711 } 8712 ) 8713 ] }); 8714 return element; 8715 }, 8716 [portalNode, context, portal, props.id, preserveTabOrder] 8717 ); 8718 props = PNRLI7OV_spreadProps(PNRLI7OV_spreadValues({}, props), { 8719 ref: refProp 8720 }); 8721 return props; 8722 } 8723); 8724var Portal = NQJBHION_createComponent((props) => { 8725 const htmlProps = usePortal(props); 8726 return NQJBHION_createElement("div", htmlProps); 8727}); 8728if (false) {} 8729 8730 8731 8732;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/LNHZLQEK.js
8733// src/dialog/dialog-context.ts 8734 8735var DialogContext = (0,external_React_.createContext)(void 0); 8736var DialogHeadingContext = (0,external_React_.createContext)(void 0); 8737var DialogDescriptionContext = (0,external_React_.createContext)(void 0); 8738 8739 8740 8741;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/DTAO6DRL.js 8742 8743 8744 8745 8746 8747 8748 8749 8750 8751 8752 8753 8754 8755 8756 8757 8758 8759
vendor: 7,342 bytes, lines 8760-8970
8760// src/dialog/dialog.tsx 8761 8762 8763 8764 8765 8766 8767 8768var DTAO6DRL_isSafariBrowser = isSafari(); 8769function isAlreadyFocusingAnotherElement(dialog) { 8770 const activeElement = O35LWD4W_getActiveElement(); 8771 if (!activeElement) 8772 return false; 8773 if (dialog && O35LWD4W_contains(dialog, activeElement)) 8774 return false; 8775 if (focus_isFocusable(activeElement)) 8776 return true; 8777 return false; 8778} 8779function getElementFromProp(prop, focusable = false) { 8780 if (!prop) 8781 return null; 8782 const element = "current" in prop ? prop.current : prop; 8783 if (!element) 8784 return null; 8785 if (focusable) 8786 return focus_isFocusable(element) ? element : null; 8787 return element; 8788} 8789var useDialog = NQJBHION_createHook( 8790 (_a) => { 8791 var _b = _a, { 8792 store, 8793 focusable = true, 8794 modal = true, 8795 portal = !!modal, 8796 backdrop = !!modal, 8797 backdropProps, 8798 hideOnEscape = true, 8799 hideOnInteractOutside = true, 8800 getPersistentElements, 8801 preventBodyScroll = !!modal, 8802 autoFocusOnShow = true, 8803 autoFocusOnHide = true, 8804 initialFocus, 8805 finalFocus 8806 } = _b, props = __objRest(_b, [ 8807 "store", 8808 "focusable", 8809 "modal", 8810 "portal", 8811 "backdrop", 8812 "backdropProps", 8813 "hideOnEscape", 8814 "hideOnInteractOutside", 8815 "getPersistentElements", 8816 "preventBodyScroll", 8817 "autoFocusOnShow", 8818 "autoFocusOnHide", 8819 "initialFocus", 8820 "finalFocus" 8821 ]); 8822 const ref = (0,external_React_.useRef)(null); 8823 const { portalRef, domReady } = usePortalRef(portal, props.portalRef); 8824 const preserveTabOrderProp = props.preserveTabOrder; 8825 const preserveTabOrder = store.useState( 8826 (state) => preserveTabOrderProp && !modal && state.mounted 8827 ); 8828 const id = useId(props.id); 8829 const open = store.useState("open"); 8830 const mounted = store.useState("mounted"); 8831 const contentElement = store.useState("contentElement"); 8832 const hidden = isHidden(mounted, props.hidden, props.alwaysVisible); 8833 usePreventBodyScroll(contentElement, id, preventBodyScroll && !hidden); 8834 useHideOnInteractOutside(store, hideOnInteractOutside); 8835 const { wrapElement, nestedDialogs } = useNestedDialogs(store); 8836 props = useWrapElement(props, wrapElement, [wrapElement]); 8837 useSafeLayoutEffect(() => { 8838 if (!open) 8839 return; 8840 const dialog = ref.current; 8841 const activeElement = O35LWD4W_getActiveElement(dialog, true); 8842 if (!activeElement) 8843 return; 8844 if (activeElement.tagName === "BODY") 8845 return; 8846 if (dialog && O35LWD4W_contains(dialog, activeElement)) 8847 return; 8848 store.setDisclosureElement(activeElement); 8849 }, [open]); 8850 if (DTAO6DRL_isSafariBrowser) { 8851 (0,external_React_.useEffect)(() => { 8852 if (!mounted) 8853 return; 8854 const { disclosureElement } = store.getState(); 8855 if (!disclosureElement) 8856 return; 8857 if (!O35LWD4W_isButton(disclosureElement)) 8858 return; 8859 const onMouseDown = () => { 8860 let receivedFocus = false; 8861 const onFocus = () => { 8862 receivedFocus = true; 8863 }; 8864 const options = { capture: true, once: true }; 8865 disclosureElement.addEventListener("focusin", onFocus, options); 8866 queueBeforeEvent(disclosureElement, "mouseup", () => { 8867 disclosureElement.removeEventListener("focusin", onFocus, true); 8868 if (receivedFocus) 8869 return; 8870 focus_focusIfNeeded(disclosureElement); 8871 }); 8872 }; 8873 disclosureElement.addEventListener("mousedown", onMouseDown); 8874 return () => { 8875 disclosureElement.removeEventListener("mousedown", onMouseDown); 8876 }; 8877 }, [mounted]); 8878 } 8879 const shouldDisableAccessibilityTree = modal || // Usually, we only want to disable the accessibility tree outside if the 8880 // dialog is a modal. But the Portal component can't preserve the tab 8881 // order on Safari/VoiceOver. By allowing only the dialog/portal to be 8882 // accessible, we provide a similar tab order flow. We don't need to 8883 // disable pointer events because it's just for screen readers. 8884 portal && preserveTabOrder && isSafari(); 8885 (0,external_React_.useEffect)(() => { 8886 if (!mounted) 8887 return; 8888 if (!domReady) 8889 return; 8890 const dialog = ref.current; 8891 if (!dialog) 8892 return; 8893 if (!shouldDisableAccessibilityTree) 8894 return; 8895 const existingDismiss = dialog.querySelector("[data-dialog-dismiss]"); 8896 if (existingDismiss) 8897 return; 8898 return prependHiddenDismiss(dialog, store.hide); 8899 }, [mounted, domReady, shouldDisableAccessibilityTree]); 8900 const getPersistentElementsProp = useEvent(getPersistentElements); 8901 useSafeLayoutEffect(() => { 8902 if (!domReady) 8903 return; 8904 if (!id) 8905 return; 8906 if (!open) 8907 return; 8908 const { disclosureElement } = store.getState(); 8909 const dialog = ref.current; 8910 const persistentElements = getPersistentElementsProp() || []; 8911 const allElements = [ 8912 dialog, 8913 ...persistentElements, 8914 ...nestedDialogs.map((dialog2) => dialog2.getState().contentElement) 8915 ]; 8916 if (!shouldDisableAccessibilityTree) { 8917 return markTreeOutside(id, disclosureElement, ...allElements); 8918 } 8919 if (modal) { 8920 return chain( 8921 markTreeOutside(id, ...allElements), 8922 disableTreeOutside(...allElements) 8923 ); 8924 } 8925 return chain( 8926 markTreeOutside(id, disclosureElement, ...allElements), 8927 disableAccessibilityTreeOutside(...allElements) 8928 ); 8929 }, [ 8930 domReady, 8931 id, 8932 open, 8933 store, 8934 getPersistentElementsProp, 8935 nestedDialogs, 8936 shouldDisableAccessibilityTree, 8937 modal 8938 ]); 8939 const mayAutoFocusOnShow = !!autoFocusOnShow; 8940 const autoFocusOnShowProp = useBooleanEvent(autoFocusOnShow); 8941 const [autoFocusEnabled, setAutoFocusEnabled] = (0,external_React_.useState)(false); 8942 (0,external_React_.useEffect)(() => { 8943 if (!open) 8944 return; 8945 if (!mayAutoFocusOnShow) 8946 return; 8947 if (!domReady) 8948 return; 8949 if (!(contentElement == null ? void 0 : contentElement.isConnected)) 8950 return; 8951 const element = getElementFromProp(initialFocus, true) || // If no initial focus is specified, we try to focus the first element 8952 // with the autofocus attribute. If it's an Ariakit component, the 8953 // Focusable component will consume the autoFocus prop and add the 8954 // data-autofocus attribute to the element instead. 8955 contentElement.querySelector( 8956 "[data-autofocus=true],[autofocus]" 8957 ) || // We have to fallback to the first focusable element otherwise portaled 8958 // dialogs with preserveTabOrder set to true will not receive focus 8959 // properly because the elements aren't tabbable until the dialog 8960 // receives focus. 8961 focus_getFirstTabbableIn(contentElement, true, portal && preserveTabOrder) || // Finally, we fallback to the dialog element itself. 8962 contentElement; 8963 const isElementFocusable = focus_isFocusable(element); 8964 if (!autoFocusOnShowProp(isElementFocusable ? element : null)) 8965 return; 8966 setAutoFocusEnabled(true); 8967 queueMicrotask(() => { 8968 element.focus(); 8969 if (!DTAO6DRL_isSafariBrowser) 8970 return;
8971 element.scrollIntoView({ block: "nearest", inline: "nearest" }); 8972 }); 8973 }, [ 8974 open, 8975 mayAutoFocusOnShow, 8976 domReady, 8977 contentElement, 8978 initialFocus, 8979 portal, 8980 preserveTabOrder, 8981 autoFocusOnShowProp 8982 ]); 8983 const mayAutoFocusOnHide = !!autoFocusOnHide; 8984 const autoFocusOnHideProp = useBooleanEvent(autoFocusOnHide); 8985 const [hasOpened, setHasOpened] = (0,external_React_.useState)(false); 8986 (0,external_React_.useEffect)(() => { 8987 if (!open) 8988 return; 8989 setHasOpened(true); 8990 return () => setHasOpened(false); 8991 }, [open]); 8992 useSafeLayoutEffect(() => { 8993 if (!hasOpened) 8994 return; 8995 if (!mayAutoFocusOnHide) 8996 return; 8997 const dialog = ref.current; 8998 const focusOnHide = (retry = true) => { 8999 if (isAlreadyFocusingAnotherElement(dialog)) 9000 return; 9001 const { disclosureElement } = store.getState(); 9002 let element = getElementFromProp(finalFocus) || disclosureElement; 9003 if (element == null ? void 0 : element.id) { 9004 const doc = O35LWD4W_getDocument(element); 9005 const selector = `[aria-activedescendant="${element.id}"]`; 9006 const composite = doc.querySelector(selector); 9007 if (composite) { 9008 element = composite; 9009 } 9010 } 9011 if (element && !focus_isFocusable(element)) { 9012 const maybeParentDialog = O35LWD4W_closest(element, "[data-dialog]"); 9013 if (maybeParentDialog && maybeParentDialog.id) { 9014 const doc = O35LWD4W_getDocument(maybeParentDialog); 9015 const selector = `[aria-controls~="${maybeParentDialog.id}"]`; 9016 const control = doc.querySelector(selector); 9017 if (control) { 9018 element = control; 9019 } 9020 } 9021 } 9022 const isElementFocusable = element && focus_isFocusable(element); 9023 if (!isElementFocusable && retry) { 9024 requestAnimationFrame(() => focusOnHide(false)); 9025 return; 9026 } 9027 if (!autoFocusOnHideProp(isElementFocusable ? element : null)) 9028 return; 9029 if (!isElementFocusable) 9030 return; 9031 element == null ? void 0 : element.focus(); 9032 }; 9033 if (!open) { 9034 return focusOnHide(); 9035 } 9036 return focusOnHide; 9037 }, [hasOpened, open, mayAutoFocusOnHide, finalFocus, autoFocusOnHideProp]); 9038 const hideOnEscapeProp = useBooleanEvent(hideOnEscape); 9039 (0,external_React_.useEffect)(() => { 9040 if (!domReady) 9041 return; 9042 if (!mounted) 9043 return; 9044 const onKeyDown = (event) => { 9045 if (event.key !== "Escape") 9046 return; 9047 if (event.defaultPrevented) 9048 return; 9049 const dialog = ref.current; 9050 if (!dialog) 9051 return; 9052 if (isElementMarked(dialog)) 9053 return; 9054 const target = event.target; 9055 if (!target) 9056 return; 9057 const { disclosureElement } = store.getState(); 9058 const isValidTarget = () => { 9059 if (target.tagName === "BODY") 9060 return true; 9061 if (O35LWD4W_contains(dialog, target)) 9062 return true; 9063 if (!disclosureElement) 9064 return false; 9065 if (O35LWD4W_contains(disclosureElement, target)) 9066 return true; 9067 return false; 9068 }; 9069 if (!isValidTarget()) 9070 return; 9071 if (!hideOnEscapeProp(event)) 9072 return; 9073 store.hide(); 9074 }; 9075 return addGlobalEventListener("keydown", onKeyDown); 9076 }, [mounted, domReady, hideOnEscapeProp]); 9077 props = useWrapElement( 9078 props, 9079 (element) => /* @__PURE__ */ (0,jsx_runtime.jsx)(HeadingLevel, { level: modal ? 1 : void 0, children: element }), 9080 [modal] 9081 ); 9082 const hiddenProp = props.hidden; 9083 const alwaysVisible = props.alwaysVisible; 9084 props = useWrapElement( 9085 props, 9086 (element) => { 9087 if (!backdrop) 9088 return element; 9089 return /* @__PURE__ */ (0,jsx_runtime.jsxs)(jsx_runtime.Fragment, { children: [
9090 /* @__PURE__ */ (0,jsx_runtime.jsx)( 9091 DialogBackdrop, 9092 { 9093 store, 9094 backdrop, 9095 backdropProps, 9096 hidden: hiddenProp, 9097 alwaysVisible 9098 } 9099 ), 9100 element 9101 ] }); 9102 }, 9103 [store, backdrop, backdropProps, hiddenProp, alwaysVisible] 9104 ); 9105 const [headingId, setHeadingId] = (0,external_React_.useState)(); 9106 const [descriptionId, setDescriptionId] = (0,external_React_.useState)(); 9107 props = useWrapElement( 9108 props, 9109 (element) => /* @__PURE__ */ (0,jsx_runtime.jsx)(DialogContext.Provider, { value: store, children: /* @__PURE__ */ (0,jsx_runtime.jsx)(DialogHeadingContext.Provider, { value: setHeadingId, children: /* @__PURE__ */ (0,jsx_runtime.jsx)(DialogDescriptionContext.Provider, { value: setDescriptionId, children: element }) }) }), 9110 [store] 9111 ); 9112 props = PNRLI7OV_spreadProps(PNRLI7OV_spreadValues({ 9113 id, 9114 "data-dialog": "", 9115 role: "dialog", 9116 tabIndex: focusable ? -1 : void 0, 9117 "aria-labelledby": headingId, 9118 "aria-describedby": descriptionId 9119 }, props), { 9120 ref: useMergeRefs(ref, props.ref) 9121 }); 9122 props = useFocusableContainer(PNRLI7OV_spreadProps(PNRLI7OV_spreadValues({}, props), { 9123 autoFocusOnShow: autoFocusEnabled 9124 })); 9125 props = useDisclosureContent(PNRLI7OV_spreadValues({ store }, props)); 9126 props = useFocusable(PNRLI7OV_spreadProps(PNRLI7OV_spreadValues({}, props), { focusable })); 9127 props = usePortal(PNRLI7OV_spreadProps(PNRLI7OV_spreadValues({ portal }, props), { portalRef, preserveTabOrder })); 9128 return props; 9129 } 9130); 9131var Dialog = NQJBHION_createComponent((props) => { 9132 const htmlProps = useDialog(props); 9133 return NQJBHION_createElement("div", htmlProps); 9134}); 9135if (false) {} 9136 9137 9138 9139;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/6GS36SYX.js
vendor: 5,954 bytes, lines 9140-9335
9140// src/popover/popover-context.ts 9141 9142var PopoverContext = (0,external_React_.createContext)( 9143 void 0 9144); 9145 9146 9147 9148;// CONCATENATED MODULE: ./node_modules/@floating-ui/utils/dist/floating-ui.utils.mjs 9149const floating_ui_utils_sides = (/* unused pure expression or super */ null && (['top', 'right', 'bottom', 'left'])); 9150const alignments = (/* unused pure expression or super */ null && (['start', 'end'])); 9151const floating_ui_utils_placements = /*#__PURE__*/(/* unused pure expression or super */ null && (floating_ui_utils_sides.reduce((acc, side) => acc.concat(side, side + "-" + alignments[0], side + "-" + alignments[1]), []))); 9152const floating_ui_utils_min = Math.min; 9153const floating_ui_utils_max = Math.max; 9154const round = Math.round; 9155const floor = Math.floor; 9156const createCoords = v => ({ 9157 x: v, 9158 y: v 9159}); 9160const oppositeSideMap = { 9161 left: 'right', 9162 right: 'left', 9163 bottom: 'top', 9164 top: 'bottom' 9165}; 9166const oppositeAlignmentMap = { 9167 start: 'end', 9168 end: 'start' 9169}; 9170function clamp(start, value, end) { 9171 return floating_ui_utils_max(start, floating_ui_utils_min(value, end)); 9172} 9173function floating_ui_utils_evaluate(value, param) { 9174 return typeof value === 'function' ? value(param) : value; 9175} 9176function floating_ui_utils_getSide(placement) { 9177 return placement.split('-')[0]; 9178} 9179function floating_ui_utils_getAlignment(placement) { 9180 return placement.split('-')[1]; 9181} 9182function getOppositeAxis(axis) { 9183 return axis === 'x' ? 'y' : 'x'; 9184} 9185function getAxisLength(axis) { 9186 return axis === 'y' ? 'height' : 'width'; 9187} 9188function floating_ui_utils_getSideAxis(placement) { 9189 return ['top', 'bottom'].includes(floating_ui_utils_getSide(placement)) ? 'y' : 'x'; 9190} 9191function getAlignmentAxis(placement) { 9192 return getOppositeAxis(floating_ui_utils_getSideAxis(placement)); 9193} 9194function floating_ui_utils_getAlignmentSides(placement, rects, rtl) { 9195 if (rtl === void 0) { 9196 rtl = false; 9197 } 9198 const alignment = floating_ui_utils_getAlignment(placement); 9199 const alignmentAxis = getAlignmentAxis(placement); 9200 const length = getAxisLength(alignmentAxis); 9201 let mainAlignmentSide = alignmentAxis === 'x' ? alignment === (rtl ? 'end' : 'start') ? 'right' : 'left' : alignment === 'start' ? 'bottom' : 'top'; 9202 if (rects.reference[length] > rects.floating[length]) { 9203 mainAlignmentSide = getOppositePlacement(mainAlignmentSide); 9204 } 9205 return [mainAlignmentSide, getOppositePlacement(mainAlignmentSide)]; 9206} 9207function getExpandedPlacements(placement) { 9208 const oppositePlacement = getOppositePlacement(placement); 9209 return [floating_ui_utils_getOppositeAlignmentPlacement(placement), oppositePlacement, floating_ui_utils_getOppositeAlignmentPlacement(oppositePlacement)]; 9210} 9211function floating_ui_utils_getOppositeAlignmentPlacement(placement) { 9212 return placement.replace(/start|end/g, alignment => oppositeAlignmentMap[alignment]); 9213} 9214function getSideList(side, isStart, rtl) { 9215 const lr = ['left', 'right']; 9216 const rl = ['right', 'left']; 9217 const tb = ['top', 'bottom']; 9218 const bt = ['bottom', 'top']; 9219 switch (side) { 9220 case 'top': 9221 case 'bottom': 9222 if (rtl) return isStart ? rl : lr; 9223 return isStart ? lr : rl; 9224 case 'left': 9225 case 'right': 9226 return isStart ? tb : bt; 9227 default: 9228 return []; 9229 } 9230} 9231function getOppositeAxisPlacements(placement, flipAlignment, direction, rtl) { 9232 const alignment = floating_ui_utils_getAlignment(placement); 9233 let list = getSideList(floating_ui_utils_getSide(placement), direction === 'start', rtl); 9234 if (alignment) { 9235 list = list.map(side => side + "-" + alignment); 9236 if (flipAlignment) { 9237 list = list.concat(list.map(floating_ui_utils_getOppositeAlignmentPlacement)); 9238 } 9239 } 9240 return list; 9241} 9242function getOppositePlacement(placement) { 9243 return placement.replace(/left|right|bottom|top/g, side => oppositeSideMap[side]); 9244} 9245function expandPaddingObject(padding) { 9246 return { 9247 top: 0, 9248 right: 0, 9249 bottom: 0, 9250 left: 0, 9251 ...padding 9252 }; 9253} 9254function floating_ui_utils_getPaddingObject(padding) { 9255 return typeof padding !== 'number' ? expandPaddingObject(padding) : { 9256 top: padding, 9257 right: padding, 9258 bottom: padding, 9259 left: padding 9260 }; 9261} 9262function floating_ui_utils_rectToClientRect(rect) { 9263 return { 9264 ...rect, 9265 top: rect.y, 9266 left: rect.x, 9267 right: rect.x + rect.width, 9268 bottom: rect.y + rect.height 9269 }; 9270} 9271 9272 9273 9274;// CONCATENATED MODULE: ./node_modules/@floating-ui/core/dist/floating-ui.core.mjs 9275 9276 9277 9278function computeCoordsFromPlacement(_ref, placement, rtl) { 9279 let { 9280 reference, 9281 floating 9282 } = _ref; 9283 const sideAxis = floating_ui_utils_getSideAxis(placement); 9284 const alignmentAxis = getAlignmentAxis(placement); 9285 const alignLength = getAxisLength(alignmentAxis); 9286 const side = floating_ui_utils_getSide(placement); 9287 const isVertical = sideAxis === 'y'; 9288 const commonX = reference.x + reference.width / 2 - floating.width / 2; 9289 const commonY = reference.y + reference.height / 2 - floating.height / 2; 9290 const commonAlign = reference[alignLength] / 2 - floating[alignLength] / 2; 9291 let coords; 9292 switch (side) { 9293 case 'top': 9294 coords = { 9295 x: commonX, 9296 y: reference.y - floating.height 9297 }; 9298 break; 9299 case 'bottom': 9300 coords = { 9301 x: commonX, 9302 y: reference.y + reference.height 9303 }; 9304 break; 9305 case 'right': 9306 coords = { 9307 x: reference.x + reference.width, 9308 y: commonY 9309 }; 9310 break; 9311 case 'left': 9312 coords = { 9313 x: reference.x - floating.width, 9314 y: commonY 9315 }; 9316 break; 9317 default: 9318 coords = { 9319 x: reference.x, 9320 y: reference.y 9321 }; 9322 } 9323 switch (floating_ui_utils_getAlignment(placement)) { 9324 case 'start': 9325 coords[alignmentAxis] -= commonAlign * (rtl && isVertical ? -1 : 1); 9326 break; 9327 case 'end': 9328 coords[alignmentAxis] += commonAlign * (rtl && isVertical ? -1 : 1); 9329 break; 9330 } 9331 return coords; 9332} 9333 9334/** 9335 * Computes the `x` and `y` coordinates that will place the floating element
vendor: 5,244 bytes, lines 9336-9513
9336 * next to a reference element when it is given a certain positioning strategy. 9337 * 9338 * This export does not have any `platform` interface logic. You will need to 9339 * write one for the platform you are using Floating UI with. 9340 */ 9341const computePosition = async (reference, floating, config) => { 9342 const { 9343 placement = 'bottom', 9344 strategy = 'absolute', 9345 middleware = [], 9346 platform 9347 } = config; 9348 const validMiddleware = middleware.filter(Boolean); 9349 const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(floating)); 9350 let rects = await platform.getElementRects({ 9351 reference, 9352 floating, 9353 strategy 9354 }); 9355 let { 9356 x, 9357 y 9358 } = computeCoordsFromPlacement(rects, placement, rtl); 9359 let statefulPlacement = placement; 9360 let middlewareData = {}; 9361 let resetCount = 0; 9362 for (let i = 0; i < validMiddleware.length; i++) { 9363 const { 9364 name, 9365 fn 9366 } = validMiddleware[i]; 9367 const { 9368 x: nextX, 9369 y: nextY, 9370 data, 9371 reset 9372 } = await fn({ 9373 x, 9374 y, 9375 initialPlacement: placement, 9376 placement: statefulPlacement, 9377 strategy, 9378 middlewareData, 9379 rects, 9380 platform, 9381 elements: { 9382 reference, 9383 floating 9384 } 9385 }); 9386 x = nextX != null ? nextX : x; 9387 y = nextY != null ? nextY : y; 9388 middlewareData = { 9389 ...middlewareData, 9390 [name]: { 9391 ...middlewareData[name], 9392 ...data 9393 } 9394 }; 9395 if (reset && resetCount <= 50) { 9396 resetCount++; 9397 if (typeof reset === 'object') { 9398 if (reset.placement) { 9399 statefulPlacement = reset.placement; 9400 } 9401 if (reset.rects) { 9402 rects = reset.rects === true ? await platform.getElementRects({ 9403 reference, 9404 floating, 9405 strategy 9406 }) : reset.rects; 9407 } 9408 ({ 9409 x, 9410 y 9411 } = computeCoordsFromPlacement(rects, statefulPlacement, rtl)); 9412 } 9413 i = -1; 9414 continue; 9415 } 9416 } 9417 return { 9418 x, 9419 y, 9420 placement: statefulPlacement, 9421 strategy, 9422 middlewareData 9423 }; 9424}; 9425 9426/** 9427 * Resolves with an object of overflow side offsets that determine how much the 9428 * element is overflowing a given clipping boundary on each side. 9429 * - positive = overflowing the boundary by that number of pixels 9430 * - negative = how many pixels left before it will overflow 9431 * - 0 = lies flush with the boundary 9432 * @see https://floating-ui.com/docs/detectOverflow 9433 */ 9434async function detectOverflow(state, options) { 9435 var _await$platform$isEle; 9436 if (options === void 0) { 9437 options = {}; 9438 } 9439 const { 9440 x, 9441 y, 9442 platform, 9443 rects, 9444 elements, 9445 strategy 9446 } = state; 9447 const { 9448 boundary = 'clippingAncestors', 9449 rootBoundary = 'viewport', 9450 elementContext = 'floating', 9451 altBoundary = false, 9452 padding = 0 9453 } = floating_ui_utils_evaluate(options, state); 9454 const paddingObject = floating_ui_utils_getPaddingObject(padding); 9455 const altContext = elementContext === 'floating' ? 'reference' : 'floating'; 9456 const element = elements[altBoundary ? altContext : elementContext]; 9457 const clippingClientRect = floating_ui_utils_rectToClientRect(await platform.getClippingRect({ 9458 element: ((_await$platform$isEle = await (platform.isElement == null ? void 0 : platform.isElement(element))) != null ? _await$platform$isEle : true) ? element : element.contextElement || (await (platform.getDocumentElement == null ? void 0 : platform.getDocumentElement(elements.floating))), 9459 boundary, 9460 rootBoundary, 9461 strategy 9462 })); 9463 const rect = elementContext === 'floating' ? { 9464 ...rects.floating, 9465 x, 9466 y 9467 } : rects.reference; 9468 const offsetParent = await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(elements.floating)); 9469 const offsetScale = (await (platform.isElement == null ? void 0 : platform.isElement(offsetParent))) ? (await (platform.getScale == null ? void 0 : platform.getScale(offsetParent))) || { 9470 x: 1, 9471 y: 1 9472 } : { 9473 x: 1, 9474 y: 1 9475 }; 9476 const elementClientRect = floating_ui_utils_rectToClientRect(platform.convertOffsetParentRelativeRectToViewportRelativeRect ? await platform.convertOffsetParentRelativeRectToViewportRelativeRect({ 9477 rect, 9478 offsetParent, 9479 strategy 9480 }) : rect); 9481 return { 9482 top: (clippingClientRect.top - elementClientRect.top + paddingObject.top) / offsetScale.y, 9483 bottom: (elementClientRect.bottom - clippingClientRect.bottom + paddingObject.bottom) / offsetScale.y, 9484 left: (clippingClientRect.left - elementClientRect.left + paddingObject.left) / offsetScale.x, 9485 right: (elementClientRect.right - clippingClientRect.right + paddingObject.right) / offsetScale.x 9486 }; 9487} 9488 9489/** 9490 * Provides data to position an inner element of the floating element so that it 9491 * appears centered to the reference element. 9492 * @see https://floating-ui.com/docs/arrow 9493 */ 9494const arrow = options => ({ 9495 name: 'arrow', 9496 options, 9497 async fn(state) { 9498 const { 9499 x, 9500 y, 9501 placement, 9502 rects, 9503 platform, 9504 elements 9505 } = state; 9506 // Since `element` is required, we don't Partial<> the type. 9507 const { 9508 element, 9509 padding = 0 9510 } = floating_ui_utils_evaluate(options, state) || {}; 9511 if (element == null) { 9512 return {}; 9513 }
vendor: 28,475 bytes, lines 9514-10304
9514 const paddingObject = floating_ui_utils_getPaddingObject(padding); 9515 const coords = { 9516 x, 9517 y 9518 }; 9519 const axis = getAlignmentAxis(placement); 9520 const length = getAxisLength(axis); 9521 const arrowDimensions = await platform.getDimensions(element); 9522 const isYAxis = axis === 'y'; 9523 const minProp = isYAxis ? 'top' : 'left'; 9524 const maxProp = isYAxis ? 'bottom' : 'right'; 9525 const clientProp = isYAxis ? 'clientHeight' : 'clientWidth'; 9526 const endDiff = rects.reference[length] + rects.reference[axis] - coords[axis] - rects.floating[length]; 9527 const startDiff = coords[axis] - rects.reference[axis]; 9528 const arrowOffsetParent = await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(element)); 9529 let clientSize = arrowOffsetParent ? arrowOffsetParent[clientProp] : 0; 9530 9531 // DOM platform can return `window` as the `offsetParent`. 9532 if (!clientSize || !(await (platform.isElement == null ? void 0 : platform.isElement(arrowOffsetParent)))) { 9533 clientSize = elements.floating[clientProp] || rects.floating[length]; 9534 } 9535 const centerToReference = endDiff / 2 - startDiff / 2; 9536 9537 // If the padding is large enough that it causes the arrow to no longer be 9538 // centered, modify the padding so that it is centered. 9539 const largestPossiblePadding = clientSize / 2 - arrowDimensions[length] / 2 - 1; 9540 const minPadding = floating_ui_utils_min(paddingObject[minProp], largestPossiblePadding); 9541 const maxPadding = floating_ui_utils_min(paddingObject[maxProp], largestPossiblePadding); 9542 9543 // Make sure the arrow doesn't overflow the floating element if the center 9544 // point is outside the floating element's bounds. 9545 const min$1 = minPadding; 9546 const max = clientSize - arrowDimensions[length] - maxPadding; 9547 const center = clientSize / 2 - arrowDimensions[length] / 2 + centerToReference; 9548 const offset = clamp(min$1, center, max); 9549 9550 // If the reference is small enough that the arrow's padding causes it to 9551 // to point to nothing for an aligned placement, adjust the offset of the 9552 // floating element itself. This stops `shift()` from taking action, but can 9553 // be worked around by calling it again after the `arrow()` if desired. 9554 const shouldAddOffset = floating_ui_utils_getAlignment(placement) != null && center != offset && rects.reference[length] / 2 - (center < min$1 ? minPadding : maxPadding) - arrowDimensions[length] / 2 < 0; 9555 const alignmentOffset = shouldAddOffset ? center < min$1 ? min$1 - center : max - center : 0; 9556 return { 9557 [axis]: coords[axis] - alignmentOffset, 9558 data: { 9559 [axis]: offset, 9560 centerOffset: center - offset + alignmentOffset 9561 } 9562 }; 9563 } 9564}); 9565 9566function getPlacementList(alignment, autoAlignment, allowedPlacements) { 9567 const allowedPlacementsSortedByAlignment = alignment ? [...allowedPlacements.filter(placement => getAlignment(placement) === alignment), ...allowedPlacements.filter(placement => getAlignment(placement) !== alignment)] : allowedPlacements.filter(placement => getSide(placement) === placement); 9568 return allowedPlacementsSortedByAlignment.filter(placement => { 9569 if (alignment) { 9570 return getAlignment(placement) === alignment || (autoAlignment ? getOppositeAlignmentPlacement(placement) !== placement : false); 9571 } 9572 return true; 9573 }); 9574} 9575/** 9576 * Optimizes the visibility of the floating element by choosing the placement 9577 * that has the most space available automatically, without needing to specify a 9578 * preferred placement. Alternative to `flip`. 9579 * @see https://floating-ui.com/docs/autoPlacement 9580 */ 9581const autoPlacement = function (options) { 9582 if (options === void 0) { 9583 options = {}; 9584 } 9585 return { 9586 name: 'autoPlacement', 9587 options, 9588 async fn(state) { 9589 var _middlewareData$autoP, _middlewareData$autoP2, _placementsThatFitOnE; 9590 const { 9591 rects, 9592 middlewareData, 9593 placement, 9594 platform, 9595 elements 9596 } = state; 9597 const { 9598 crossAxis = false, 9599 alignment, 9600 allowedPlacements = placements, 9601 autoAlignment = true, 9602 ...detectOverflowOptions 9603 } = evaluate(options, state); 9604 const placements$1 = alignment !== undefined || allowedPlacements === placements ? getPlacementList(alignment || null, autoAlignment, allowedPlacements) : allowedPlacements; 9605 const overflow = await detectOverflow(state, detectOverflowOptions); 9606 const currentIndex = ((_middlewareData$autoP = middlewareData.autoPlacement) == null ? void 0 : _middlewareData$autoP.index) || 0; 9607 const currentPlacement = placements$1[currentIndex]; 9608 if (currentPlacement == null) { 9609 return {}; 9610 } 9611 const alignmentSides = getAlignmentSides(currentPlacement, rects, await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating))); 9612 9613 // Make `computeCoords` start from the right place. 9614 if (placement !== currentPlacement) { 9615 return { 9616 reset: { 9617 placement: placements$1[0] 9618 } 9619 }; 9620 } 9621 const currentOverflows = [overflow[getSide(currentPlacement)], overflow[alignmentSides[0]], overflow[alignmentSides[1]]]; 9622 const allOverflows = [...(((_middlewareData$autoP2 = middlewareData.autoPlacement) == null ? void 0 : _middlewareData$autoP2.overflows) || []), { 9623 placement: currentPlacement, 9624 overflows: currentOverflows 9625 }]; 9626 const nextPlacement = placements$1[currentIndex + 1]; 9627 9628 // There are more placements to check. 9629 if (nextPlacement) { 9630 return { 9631 data: { 9632 index: currentIndex + 1, 9633 overflows: allOverflows 9634 }, 9635 reset: { 9636 placement: nextPlacement 9637 } 9638 }; 9639 } 9640 const placementsSortedByMostSpace = allOverflows.map(d => { 9641 const alignment = getAlignment(d.placement); 9642 return [d.placement, alignment && crossAxis ? 9643 // Check along the mainAxis and main crossAxis side. 9644 d.overflows.slice(0, 2).reduce((acc, v) => acc + v, 0) : 9645 // Check only the mainAxis. 9646 d.overflows[0], d.overflows]; 9647 }).sort((a, b) => a[1] - b[1]); 9648 const placementsThatFitOnEachSide = placementsSortedByMostSpace.filter(d => d[2].slice(0, 9649 // Aligned placements should not check their opposite crossAxis 9650 // side. 9651 getAlignment(d[0]) ? 2 : 3).every(v => v <= 0)); 9652 const resetPlacement = ((_placementsThatFitOnE = placementsThatFitOnEachSide[0]) == null ? void 0 : _placementsThatFitOnE[0]) || placementsSortedByMostSpace[0][0]; 9653 if (resetPlacement !== placement) { 9654 return { 9655 data: { 9656 index: currentIndex + 1, 9657 overflows: allOverflows 9658 }, 9659 reset: { 9660 placement: resetPlacement 9661 } 9662 }; 9663 } 9664 return {}; 9665 } 9666 }; 9667}; 9668 9669/** 9670 * Optimizes the visibility of the floating element by flipping the `placement` 9671 * in order to keep it in view when the preferred placement(s) will overflow the 9672 * clipping boundary. Alternative to `autoPlacement`. 9673 * @see https://floating-ui.com/docs/flip 9674 */ 9675const floating_ui_core_flip = function (options) { 9676 if (options === void 0) { 9677 options = {}; 9678 } 9679 return { 9680 name: 'flip', 9681 options, 9682 async fn(state) { 9683 var _middlewareData$flip; 9684 const { 9685 placement, 9686 middlewareData, 9687 rects, 9688 initialPlacement, 9689 platform, 9690 elements 9691 } = state; 9692 const { 9693 mainAxis: checkMainAxis = true, 9694 crossAxis: checkCrossAxis = true, 9695 fallbackPlacements: specifiedFallbackPlacements, 9696 fallbackStrategy = 'bestFit', 9697 fallbackAxisSideDirection = 'none', 9698 flipAlignment = true, 9699 ...detectOverflowOptions 9700 } = floating_ui_utils_evaluate(options, state); 9701 const side = floating_ui_utils_getSide(placement); 9702 const isBasePlacement = floating_ui_utils_getSide(initialPlacement) === initialPlacement; 9703 const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating)); 9704 const fallbackPlacements = specifiedFallbackPlacements || (isBasePlacement || !flipAlignment ? [getOppositePlacement(initialPlacement)] : getExpandedPlacements(initialPlacement)); 9705 if (!specifiedFallbackPlacements && fallbackAxisSideDirection !== 'none') { 9706 fallbackPlacements.push(...getOppositeAxisPlacements(initialPlacement, flipAlignment, fallbackAxisSideDirection, rtl)); 9707 } 9708 const placements = [initialPlacement, ...fallbackPlacements]; 9709 const overflow = await detectOverflow(state, detectOverflowOptions); 9710 const overflows = []; 9711 let overflowsData = ((_middlewareData$flip = middlewareData.flip) == null ? void 0 : _middlewareData$flip.overflows) || []; 9712 if (checkMainAxis) { 9713 overflows.push(overflow[side]); 9714 } 9715 if (checkCrossAxis) { 9716 const sides = floating_ui_utils_getAlignmentSides(placement, rects, rtl); 9717 overflows.push(overflow[sides[0]], overflow[sides[1]]); 9718 } 9719 overflowsData = [...overflowsData, { 9720 placement, 9721 overflows 9722 }]; 9723 9724 // One or more sides is overflowing. 9725 if (!overflows.every(side => side <= 0)) { 9726 var _middlewareData$flip2, _overflowsData$filter; 9727 const nextIndex = (((_middlewareData$flip2 = middlewareData.flip) == null ? void 0 : _middlewareData$flip2.index) || 0) + 1; 9728 const nextPlacement = placements[nextIndex]; 9729 if (nextPlacement) { 9730 // Try next placement and re-run the lifecycle. 9731 return { 9732 data: { 9733 index: nextIndex, 9734 overflows: overflowsData 9735 }, 9736 reset: { 9737 placement: nextPlacement 9738 } 9739 }; 9740 } 9741 9742 // First, find the candidates that fit on the mainAxis side of overflow, 9743 // then find the placement that fits the best on the main crossAxis side. 9744 let resetPlacement = (_overflowsData$filter = overflowsData.filter(d => d.overflows[0] <= 0).sort((a, b) => a.overflows[1] - b.overflows[1])[0]) == null ? void 0 : _overflowsData$filter.placement; 9745 9746 // Otherwise fallback. 9747 if (!resetPlacement) { 9748 switch (fallbackStrategy) { 9749 case 'bestFit': 9750 { 9751 var _overflowsData$map$so; 9752 const placement = (_overflowsData$map$so = overflowsData.map(d => [d.placement, d.overflows.filter(overflow => overflow > 0).reduce((acc, overflow) => acc + overflow, 0)]).sort((a, b) => a[1] - b[1])[0]) == null ? void 0 : _overflowsData$map$so[0]; 9753 if (placement) { 9754 resetPlacement = placement; 9755 } 9756 break; 9757 } 9758 case 'initialPlacement': 9759 resetPlacement = initialPlacement; 9760 break; 9761 } 9762 } 9763 if (placement !== resetPlacement) { 9764 return { 9765 reset: { 9766 placement: resetPlacement 9767 } 9768 }; 9769 } 9770 } 9771 return {}; 9772 } 9773 }; 9774}; 9775 9776function getSideOffsets(overflow, rect) { 9777 return { 9778 top: overflow.top - rect.height, 9779 right: overflow.right - rect.width, 9780 bottom: overflow.bottom - rect.height, 9781 left: overflow.left - rect.width 9782 }; 9783} 9784function isAnySideFullyClipped(overflow) { 9785 return sides.some(side => overflow[side] >= 0); 9786} 9787/** 9788 * Provides data to hide the floating element in applicable situations, such as 9789 * when it is not in the same clipping context as the reference element. 9790 * @see https://floating-ui.com/docs/hide 9791 */ 9792const hide = function (options) { 9793 if (options === void 0) { 9794 options = {}; 9795 } 9796 return { 9797 name: 'hide', 9798 options, 9799 async fn(state) { 9800 const { 9801 rects 9802 } = state; 9803 const { 9804 strategy = 'referenceHidden', 9805 ...detectOverflowOptions 9806 } = evaluate(options, state); 9807 switch (strategy) { 9808 case 'referenceHidden': 9809 { 9810 const overflow = await detectOverflow(state, { 9811 ...detectOverflowOptions, 9812 elementContext: 'reference' 9813 }); 9814 const offsets = getSideOffsets(overflow, rects.reference); 9815 return { 9816 data: { 9817 referenceHiddenOffsets: offsets, 9818 referenceHidden: isAnySideFullyClipped(offsets) 9819 } 9820 }; 9821 } 9822 case 'escaped': 9823 { 9824 const overflow = await detectOverflow(state, { 9825 ...detectOverflowOptions, 9826 altBoundary: true 9827 }); 9828 const offsets = getSideOffsets(overflow, rects.floating); 9829 return { 9830 data: { 9831 escapedOffsets: offsets, 9832 escaped: isAnySideFullyClipped(offsets) 9833 } 9834 }; 9835 } 9836 default: 9837 { 9838 return {}; 9839 } 9840 } 9841 } 9842 }; 9843}; 9844 9845function getBoundingRect(rects) { 9846 const minX = min(...rects.map(rect => rect.left)); 9847 const minY = min(...rects.map(rect => rect.top)); 9848 const maxX = max(...rects.map(rect => rect.right)); 9849 const maxY = max(...rects.map(rect => rect.bottom)); 9850 return { 9851 x: minX, 9852 y: minY, 9853 width: maxX - minX, 9854 height: maxY - minY 9855 }; 9856} 9857function getRectsByLine(rects) { 9858 const sortedRects = rects.slice().sort((a, b) => a.y - b.y); 9859 const groups = []; 9860 let prevRect = null; 9861 for (let i = 0; i < sortedRects.length; i++) { 9862 const rect = sortedRects[i]; 9863 if (!prevRect || rect.y - prevRect.y > prevRect.height / 2) { 9864 groups.push([rect]); 9865 } else { 9866 groups[groups.length - 1].push(rect); 9867 } 9868 prevRect = rect; 9869 } 9870 return groups.map(rect => rectToClientRect(getBoundingRect(rect))); 9871} 9872/** 9873 * Provides improved positioning for inline reference elements that can span 9874 * over multiple lines, such as hyperlinks or range selections. 9875 * @see https://floating-ui.com/docs/inline 9876 */ 9877const inline = function (options) { 9878 if (options === void 0) { 9879 options = {}; 9880 } 9881 return { 9882 name: 'inline', 9883 options, 9884 async fn(state) { 9885 const { 9886 placement, 9887 elements, 9888 rects, 9889 platform, 9890 strategy 9891 } = state; 9892 // A MouseEvent's client{X,Y} coords can be up to 2 pixels off a 9893 // ClientRect's bounds, despite the event listener being triggered. A 9894 // padding of 2 seems to handle this issue. 9895 const { 9896 padding = 2, 9897 x, 9898 y 9899 } = evaluate(options, state); 9900 const nativeClientRects = Array.from((await (platform.getClientRects == null ? void 0 : platform.getClientRects(elements.reference))) || []); 9901 const clientRects = getRectsByLine(nativeClientRects); 9902 const fallback = rectToClientRect(getBoundingRect(nativeClientRects)); 9903 const paddingObject = getPaddingObject(padding); 9904 function getBoundingClientRect() { 9905 // There are two rects and they are disjoined. 9906 if (clientRects.length === 2 && clientRects[0].left > clientRects[1].right && x != null && y != null) { 9907 // Find the first rect in which the point is fully inside. 9908 return clientRects.find(rect => x > rect.left - paddingObject.left && x < rect.right + paddingObject.right && y > rect.top - paddingObject.top && y < rect.bottom + paddingObject.bottom) || fallback; 9909 } 9910 9911 // There are 2 or more connected rects. 9912 if (clientRects.length >= 2) { 9913 if (getSideAxis(placement) === 'y') { 9914 const firstRect = clientRects[0]; 9915 const lastRect = clientRects[clientRects.length - 1]; 9916 const isTop = getSide(placement) === 'top'; 9917 const top = firstRect.top; 9918 const bottom = lastRect.bottom; 9919 const left = isTop ? firstRect.left : lastRect.left; 9920 const right = isTop ? firstRect.right : lastRect.right; 9921 const width = right - left; 9922 const height = bottom - top; 9923 return { 9924 top, 9925 bottom, 9926 left, 9927 right, 9928 width, 9929 height, 9930 x: left, 9931 y: top 9932 }; 9933 } 9934 const isLeftSide = getSide(placement) === 'left'; 9935 const maxRight = max(...clientRects.map(rect => rect.right)); 9936 const minLeft = min(...clientRects.map(rect => rect.left)); 9937 const measureRects = clientRects.filter(rect => isLeftSide ? rect.left === minLeft : rect.right === maxRight); 9938 const top = measureRects[0].top; 9939 const bottom = measureRects[measureRects.length - 1].bottom; 9940 const left = minLeft; 9941 const right = maxRight; 9942 const width = right - left; 9943 const height = bottom - top; 9944 return { 9945 top, 9946 bottom, 9947 left, 9948 right, 9949 width, 9950 height, 9951 x: left, 9952 y: top 9953 }; 9954 } 9955 return fallback; 9956 } 9957 const resetRects = await platform.getElementRects({ 9958 reference: { 9959 getBoundingClientRect 9960 }, 9961 floating: elements.floating, 9962 strategy 9963 }); 9964 if (rects.reference.x !== resetRects.reference.x || rects.reference.y !== resetRects.reference.y || rects.reference.width !== resetRects.reference.width || rects.reference.height !== resetRects.reference.height) { 9965 return { 9966 reset: { 9967 rects: resetRects 9968 } 9969 }; 9970 } 9971 return {}; 9972 } 9973 }; 9974}; 9975 9976// For type backwards-compatibility, the `OffsetOptions` type was also 9977// Derivable. 9978async function convertValueToCoords(state, options) { 9979 const { 9980 placement, 9981 platform, 9982 elements 9983 } = state; 9984 const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating)); 9985 const side = floating_ui_utils_getSide(placement); 9986 const alignment = floating_ui_utils_getAlignment(placement); 9987 const isVertical = floating_ui_utils_getSideAxis(placement) === 'y'; 9988 const mainAxisMulti = ['left', 'top'].includes(side) ? -1 : 1; 9989 const crossAxisMulti = rtl && isVertical ? -1 : 1; 9990 const rawValue = floating_ui_utils_evaluate(options, state); 9991 9992 // eslint-disable-next-line prefer-const 9993 let { 9994 mainAxis, 9995 crossAxis, 9996 alignmentAxis 9997 } = typeof rawValue === 'number' ? { 9998 mainAxis: rawValue, 9999 crossAxis: 0, 10000 alignmentAxis: null 10001 } : { 10002 mainAxis: 0, 10003 crossAxis: 0, 10004 alignmentAxis: null, 10005 ...rawValue 10006 }; 10007 if (alignment && typeof alignmentAxis === 'number') { 10008 crossAxis = alignment === 'end' ? alignmentAxis * -1 : alignmentAxis; 10009 } 10010 return isVertical ? { 10011 x: crossAxis * crossAxisMulti, 10012 y: mainAxis * mainAxisMulti 10013 } : { 10014 x: mainAxis * mainAxisMulti, 10015 y: crossAxis * crossAxisMulti 10016 }; 10017} 10018 10019/** 10020 * Modifies the placement by translating the floating element along the 10021 * specified axes. 10022 * A number (shorthand for `mainAxis` or distance), or an axes configuration 10023 * object may be passed. 10024 * @see https://floating-ui.com/docs/offset 10025 */ 10026const offset = function (options) { 10027 if (options === void 0) { 10028 options = 0; 10029 } 10030 return { 10031 name: 'offset', 10032 options, 10033 async fn(state) { 10034 const { 10035 x, 10036 y 10037 } = state; 10038 const diffCoords = await convertValueToCoords(state, options); 10039 return { 10040 x: x + diffCoords.x, 10041 y: y + diffCoords.y, 10042 data: diffCoords 10043 }; 10044 } 10045 }; 10046}; 10047 10048/** 10049 * Optimizes the visibility of the floating element by shifting it in order to 10050 * keep it in view when it will overflow the clipping boundary. 10051 * @see https://floating-ui.com/docs/shift 10052 */ 10053const floating_ui_core_shift = function (options) { 10054 if (options === void 0) { 10055 options = {}; 10056 } 10057 return { 10058 name: 'shift', 10059 options, 10060 async fn(state) { 10061 const { 10062 x, 10063 y, 10064 placement 10065 } = state; 10066 const { 10067 mainAxis: checkMainAxis = true, 10068 crossAxis: checkCrossAxis = false, 10069 limiter = { 10070 fn: _ref => { 10071 let { 10072 x, 10073 y 10074 } = _ref; 10075 return { 10076 x, 10077 y 10078 }; 10079 } 10080 }, 10081 ...detectOverflowOptions 10082 } = floating_ui_utils_evaluate(options, state); 10083 const coords = { 10084 x, 10085 y 10086 }; 10087 const overflow = await detectOverflow(state, detectOverflowOptions); 10088 const crossAxis = floating_ui_utils_getSideAxis(floating_ui_utils_getSide(placement)); 10089 const mainAxis = getOppositeAxis(crossAxis); 10090 let mainAxisCoord = coords[mainAxis]; 10091 let crossAxisCoord = coords[crossAxis]; 10092 if (checkMainAxis) { 10093 const minSide = mainAxis === 'y' ? 'top' : 'left'; 10094 const maxSide = mainAxis === 'y' ? 'bottom' : 'right'; 10095 const min = mainAxisCoord + overflow[minSide]; 10096 const max = mainAxisCoord - overflow[maxSide]; 10097 mainAxisCoord = clamp(min, mainAxisCoord, max); 10098 } 10099 if (checkCrossAxis) { 10100 const minSide = crossAxis === 'y' ? 'top' : 'left'; 10101 const maxSide = crossAxis === 'y' ? 'bottom' : 'right'; 10102 const min = crossAxisCoord + overflow[minSide]; 10103 const max = crossAxisCoord - overflow[maxSide]; 10104 crossAxisCoord = clamp(min, crossAxisCoord, max); 10105 } 10106 const limitedCoords = limiter.fn({ 10107 ...state, 10108 [mainAxis]: mainAxisCoord, 10109 [crossAxis]: crossAxisCoord 10110 }); 10111 return { 10112 ...limitedCoords, 10113 data: { 10114 x: limitedCoords.x - x, 10115 y: limitedCoords.y - y 10116 } 10117 }; 10118 } 10119 }; 10120}; 10121/** 10122 * Built-in `limiter` that will stop `shift()` at a certain point. 10123 */ 10124const limitShift = function (options) { 10125 if (options === void 0) { 10126 options = {}; 10127 } 10128 return { 10129 options, 10130 fn(state) { 10131 const { 10132 x, 10133 y, 10134 placement, 10135 rects, 10136 middlewareData 10137 } = state; 10138 const { 10139 offset = 0, 10140 mainAxis: checkMainAxis = true, 10141 crossAxis: checkCrossAxis = true 10142 } = floating_ui_utils_evaluate(options, state); 10143 const coords = { 10144 x, 10145 y 10146 }; 10147 const crossAxis = floating_ui_utils_getSideAxis(placement); 10148 const mainAxis = getOppositeAxis(crossAxis); 10149 let mainAxisCoord = coords[mainAxis]; 10150 let crossAxisCoord = coords[crossAxis]; 10151 const rawOffset = floating_ui_utils_evaluate(offset, state); 10152 const computedOffset = typeof rawOffset === 'number' ? { 10153 mainAxis: rawOffset, 10154 crossAxis: 0 10155 } : { 10156 mainAxis: 0, 10157 crossAxis: 0, 10158 ...rawOffset 10159 }; 10160 if (checkMainAxis) { 10161 const len = mainAxis === 'y' ? 'height' : 'width'; 10162 const limitMin = rects.reference[mainAxis] - rects.floating[len] + computedOffset.mainAxis; 10163 const limitMax = rects.reference[mainAxis] + rects.reference[len] - computedOffset.mainAxis; 10164 if (mainAxisCoord < limitMin) { 10165 mainAxisCoord = limitMin; 10166 } else if (mainAxisCoord > limitMax) { 10167 mainAxisCoord = limitMax; 10168 } 10169 } 10170 if (checkCrossAxis) { 10171 var _middlewareData$offse, _middlewareData$offse2; 10172 const len = mainAxis === 'y' ? 'width' : 'height'; 10173 const isOriginSide = ['top', 'left'].includes(floating_ui_utils_getSide(placement)); 10174 const limitMin = rects.reference[crossAxis] - rects.floating[len] + (isOriginSide ? ((_middlewareData$offse = middlewareData.offset) == null ? void 0 : _middlewareData$offse[crossAxis]) || 0 : 0) + (isOriginSide ? 0 : computedOffset.crossAxis); 10175 const limitMax = rects.reference[crossAxis] + rects.reference[len] + (isOriginSide ? 0 : ((_middlewareData$offse2 = middlewareData.offset) == null ? void 0 : _middlewareData$offse2[crossAxis]) || 0) - (isOriginSide ? computedOffset.crossAxis : 0); 10176 if (crossAxisCoord < limitMin) { 10177 crossAxisCoord = limitMin; 10178 } else if (crossAxisCoord > limitMax) { 10179 crossAxisCoord = limitMax; 10180 } 10181 } 10182 return { 10183 [mainAxis]: mainAxisCoord, 10184 [crossAxis]: crossAxisCoord 10185 }; 10186 } 10187 }; 10188}; 10189 10190/** 10191 * Provides data that allows you to change the size of the floating element â 10192 * for instance, prevent it from overflowing the clipping boundary or match the 10193 * width of the reference element. 10194 * @see https://floating-ui.com/docs/size 10195 */ 10196const size = function (options) { 10197 if (options === void 0) { 10198 options = {}; 10199 } 10200 return { 10201 name: 'size', 10202 options, 10203 async fn(state) { 10204 const { 10205 placement, 10206 rects, 10207 platform, 10208 elements 10209 } = state; 10210 const { 10211 apply = () => {}, 10212 ...detectOverflowOptions 10213 } = floating_ui_utils_evaluate(options, state); 10214 const overflow = await detectOverflow(state, detectOverflowOptions); 10215 const side = floating_ui_utils_getSide(placement); 10216 const alignment = floating_ui_utils_getAlignment(placement); 10217 const isYAxis = floating_ui_utils_getSideAxis(placement) === 'y'; 10218 const { 10219 width, 10220 height 10221 } = rects.floating; 10222 let heightSide; 10223 let widthSide; 10224 if (side === 'top' || side === 'bottom') { 10225 heightSide = side; 10226 widthSide = alignment === ((await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating))) ? 'start' : 'end') ? 'left' : 'right'; 10227 } else { 10228 widthSide = side; 10229 heightSide = alignment === 'end' ? 'top' : 'bottom'; 10230 } 10231 const overflowAvailableHeight = height - overflow[heightSide]; 10232 const overflowAvailableWidth = width - overflow[widthSide]; 10233 const noShift = !state.middlewareData.shift; 10234 let availableHeight = overflowAvailableHeight; 10235 let availableWidth = overflowAvailableWidth; 10236 if (isYAxis) { 10237 const maximumClippingWidth = width - overflow.left - overflow.right; 10238 availableWidth = alignment || noShift ? floating_ui_utils_min(overflowAvailableWidth, maximumClippingWidth) : maximumClippingWidth; 10239 } else { 10240 const maximumClippingHeight = height - overflow.top - overflow.bottom; 10241 availableHeight = alignment || noShift ? floating_ui_utils_min(overflowAvailableHeight, maximumClippingHeight) : maximumClippingHeight; 10242 } 10243 if (noShift && !alignment) { 10244 const xMin = floating_ui_utils_max(overflow.left, 0); 10245 const xMax = floating_ui_utils_max(overflow.right, 0); 10246 const yMin = floating_ui_utils_max(overflow.top, 0); 10247 const yMax = floating_ui_utils_max(overflow.bottom, 0); 10248 if (isYAxis) { 10249 availableWidth = width - 2 * (xMin !== 0 || xMax !== 0 ? xMin + xMax : floating_ui_utils_max(overflow.left, overflow.right)); 10250 } else { 10251 availableHeight = height - 2 * (yMin !== 0 || yMax !== 0 ? yMin + yMax : floating_ui_utils_max(overflow.top, overflow.bottom)); 10252 } 10253 } 10254 await apply({ 10255 ...state, 10256 availableWidth, 10257 availableHeight 10258 }); 10259 const nextDimensions = await platform.getDimensions(elements.floating); 10260 if (width !== nextDimensions.width || height !== nextDimensions.height) { 10261 return { 10262 reset: { 10263 rects: true 10264 } 10265 }; 10266 } 10267 return {}; 10268 } 10269 }; 10270}; 10271 10272 10273 10274;// CONCATENATED MODULE: ./node_modules/@floating-ui/utils/dom/dist/floating-ui.utils.dom.mjs 10275function getNodeName(node) { 10276 if (isNode(node)) { 10277 return (node.nodeName || '').toLowerCase(); 10278 } 10279 // Mocked nodes in testing environments may not be instances of Node. By 10280 // returning `#document` an infinite loop won't occur. 10281 // https://github.com/floating-ui/floating-ui/issues/2317 10282 return '#document'; 10283} 10284function floating_ui_utils_dom_getWindow(node) { 10285 var _node$ownerDocument; 10286 return (node == null ? void 0 : (_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.defaultView) || window; 10287} 10288function getDocumentElement(node) { 10289 var _ref; 10290 return (_ref = (isNode(node) ? node.ownerDocument : node.document) || window.document) == null ? void 0 : _ref.documentElement; 10291} 10292function isNode(value) { 10293 return value instanceof Node || value instanceof floating_ui_utils_dom_getWindow(value).Node; 10294} 10295function isElement(value) { 10296 return value instanceof Element || value instanceof floating_ui_utils_dom_getWindow(value).Element; 10297} 10298function isHTMLElement(value) { 10299 return value instanceof HTMLElement || value instanceof floating_ui_utils_dom_getWindow(value).HTMLElement; 10300} 10301function isShadowRoot(value) { 10302 // Browsers without `ShadowRoot` support. 10303 if (typeof ShadowRoot === 'undefined') { 10304 return false;
vendor: 4,745 bytes, lines 10305-10443
10305 } 10306 return value instanceof ShadowRoot || value instanceof floating_ui_utils_dom_getWindow(value).ShadowRoot; 10307} 10308function isOverflowElement(element) { 10309 const { 10310 overflow, 10311 overflowX, 10312 overflowY, 10313 display 10314 } = floating_ui_utils_dom_getComputedStyle(element); 10315 return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !['inline', 'contents'].includes(display); 10316} 10317function isTableElement(element) { 10318 return ['table', 'td', 'th'].includes(getNodeName(element)); 10319} 10320function isContainingBlock(element) { 10321 const webkit = isWebKit(); 10322 const css = floating_ui_utils_dom_getComputedStyle(element); 10323 10324 // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block 10325 return css.transform !== 'none' || css.perspective !== 'none' || (css.containerType ? css.containerType !== 'normal' : false) || !webkit && (css.backdropFilter ? css.backdropFilter !== 'none' : false) || !webkit && (css.filter ? css.filter !== 'none' : false) || ['transform', 'perspective', 'filter'].some(value => (css.willChange || '').includes(value)) || ['paint', 'layout', 'strict', 'content'].some(value => (css.contain || '').includes(value)); 10326} 10327function getContainingBlock(element) { 10328 let currentNode = getParentNode(element); 10329 while (isHTMLElement(currentNode) && !isLastTraversableNode(currentNode)) { 10330 if (isContainingBlock(currentNode)) { 10331 return currentNode; 10332 } else { 10333 currentNode = getParentNode(currentNode); 10334 } 10335 } 10336 return null; 10337} 10338function isWebKit() { 10339 if (typeof CSS === 'undefined' || !CSS.supports) return false; 10340 return CSS.supports('-webkit-backdrop-filter', 'none'); 10341} 10342function isLastTraversableNode(node) { 10343 return ['html', 'body', '#document'].includes(getNodeName(node)); 10344} 10345function floating_ui_utils_dom_getComputedStyle(element) { 10346 return floating_ui_utils_dom_getWindow(element).getComputedStyle(element); 10347} 10348function getNodeScroll(element) { 10349 if (isElement(element)) { 10350 return { 10351 scrollLeft: element.scrollLeft, 10352 scrollTop: element.scrollTop 10353 }; 10354 } 10355 return { 10356 scrollLeft: element.pageXOffset, 10357 scrollTop: element.pageYOffset 10358 }; 10359} 10360function getParentNode(node) { 10361 if (getNodeName(node) === 'html') { 10362 return node; 10363 } 10364 const result = 10365 // Step into the shadow DOM of the parent of a slotted node. 10366 node.assignedSlot || 10367 // DOM Element detected. 10368 node.parentNode || 10369 // ShadowRoot detected. 10370 isShadowRoot(node) && node.host || 10371 // Fallback. 10372 getDocumentElement(node); 10373 return isShadowRoot(result) ? result.host : result; 10374} 10375function getNearestOverflowAncestor(node) { 10376 const parentNode = getParentNode(node); 10377 if (isLastTraversableNode(parentNode)) { 10378 return node.ownerDocument ? node.ownerDocument.body : node.body; 10379 } 10380 if (isHTMLElement(parentNode) && isOverflowElement(parentNode)) { 10381 return parentNode; 10382 } 10383 return getNearestOverflowAncestor(parentNode); 10384} 10385function getOverflowAncestors(node, list) { 10386 var _node$ownerDocument2; 10387 if (list === void 0) { 10388 list = []; 10389 } 10390 const scrollableAncestor = getNearestOverflowAncestor(node); 10391 const isBody = scrollableAncestor === ((_node$ownerDocument2 = node.ownerDocument) == null ? void 0 : _node$ownerDocument2.body); 10392 const win = floating_ui_utils_dom_getWindow(scrollableAncestor); 10393 if (isBody) { 10394 return list.concat(win, win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : [], win.frameElement ? getOverflowAncestors(win.frameElement) : []); 10395 } 10396 return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor)); 10397} 10398 10399 10400 10401;// CONCATENATED MODULE: ./node_modules/@floating-ui/dom/dist/floating-ui.dom.mjs 10402 10403 10404 10405 10406 10407 10408function getCssDimensions(element) { 10409 const css = floating_ui_utils_dom_getComputedStyle(element); 10410 // In testing environments, the `width` and `height` properties are empty 10411 // strings for SVG elements, returning NaN. Fallback to `0` in this case. 10412 let width = parseFloat(css.width) || 0; 10413 let height = parseFloat(css.height) || 0; 10414 const hasOffset = isHTMLElement(element); 10415 const offsetWidth = hasOffset ? element.offsetWidth : width; 10416 const offsetHeight = hasOffset ? element.offsetHeight : height; 10417 const shouldFallback = round(width) !== offsetWidth || round(height) !== offsetHeight; 10418 if (shouldFallback) { 10419 width = offsetWidth; 10420 height = offsetHeight; 10421 } 10422 return { 10423 width, 10424 height, 10425 $: shouldFallback 10426 }; 10427} 10428 10429function unwrapElement(element) { 10430 return !isElement(element) ? element.contextElement : element; 10431} 10432 10433function getScale(element) { 10434 const domElement = unwrapElement(element); 10435 if (!isHTMLElement(domElement)) { 10436 return createCoords(1); 10437 } 10438 const rect = domElement.getBoundingClientRect(); 10439 const { 10440 width, 10441 height, 10442 $ 10443 }
vendor: 2,002 bytes, lines 10443-10508
10443 = getCssDimensions(domElement); 10444 let x = ($ ? round(rect.width) : rect.width) / width; 10445 let y = ($ ? round(rect.height) : rect.height) / height; 10446 10447 // 0, NaN, or Infinity should always fallback to 1. 10448 10449 if (!x || !Number.isFinite(x)) { 10450 x = 1; 10451 } 10452 if (!y || !Number.isFinite(y)) { 10453 y = 1; 10454 } 10455 return { 10456 x, 10457 y 10458 }; 10459} 10460 10461const noOffsets = /*#__PURE__*/createCoords(0); 10462function getVisualOffsets(element) { 10463 const win = floating_ui_utils_dom_getWindow(element); 10464 if (!isWebKit() || !win.visualViewport) { 10465 return noOffsets; 10466 } 10467 return { 10468 x: win.visualViewport.offsetLeft, 10469 y: win.visualViewport.offsetTop 10470 }; 10471} 10472function shouldAddVisualOffsets(element, isFixed, floatingOffsetParent) { 10473 if (isFixed === void 0) { 10474 isFixed = false; 10475 } 10476 if (!floatingOffsetParent || isFixed && floatingOffsetParent !== floating_ui_utils_dom_getWindow(element)) { 10477 return false; 10478 } 10479 return isFixed; 10480} 10481 10482function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetParent) { 10483 if (includeScale === void 0) { 10484 includeScale = false; 10485 } 10486 if (isFixedStrategy === void 0) { 10487 isFixedStrategy = false; 10488 } 10489 const clientRect = element.getBoundingClientRect(); 10490 const domElement = unwrapElement(element); 10491 let scale = createCoords(1); 10492 if (includeScale) { 10493 if (offsetParent) { 10494 if (isElement(offsetParent)) { 10495 scale = getScale(offsetParent); 10496 } 10497 } else { 10498 scale = getScale(element); 10499 } 10500 } 10501 const visualOffsets = shouldAddVisualOffsets(domElement, isFixedStrategy, offsetParent) ? getVisualOffsets(domElement) : createCoords(0); 10502 let x = (clientRect.left + visualOffsets.x) / scale.x; 10503 let y = (clientRect.top + visualOffsets.y) / scale.y; 10504 let width = clientRect.width / scale.x; 10505 let height = clientRect.height / scale.y; 10506 if (domElement) { 10507 const win = floating_ui_utils_dom_getWindow(domElement); 10508 const offsetWin = offsetParent && isElement(offsetParent) ? floating_ui_utils_dom_getWindow(offsetParent) : offsetParent;
vendor: 11,964 bytes, lines 10509-10838
10509 let currentIFrame = win.frameElement; 10510 while (currentIFrame && offsetParent && offsetWin !== win) { 10511 const iframeScale = getScale(currentIFrame); 10512 const iframeRect = currentIFrame.getBoundingClientRect(); 10513 const css = floating_ui_utils_dom_getComputedStyle(currentIFrame); 10514 const left = iframeRect.left + (currentIFrame.clientLeft + parseFloat(css.paddingLeft)) * iframeScale.x; 10515 const top = iframeRect.top + (currentIFrame.clientTop + parseFloat(css.paddingTop)) * iframeScale.y; 10516 x *= iframeScale.x; 10517 y *= iframeScale.y; 10518 width *= iframeScale.x; 10519 height *= iframeScale.y; 10520 x += left; 10521 y += top; 10522 currentIFrame = floating_ui_utils_dom_getWindow(currentIFrame).frameElement; 10523 } 10524 } 10525 return floating_ui_utils_rectToClientRect({ 10526 width, 10527 height, 10528 x, 10529 y 10530 }); 10531} 10532 10533function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) { 10534 let { 10535 rect, 10536 offsetParent, 10537 strategy 10538 } = _ref; 10539 const isOffsetParentAnElement = isHTMLElement(offsetParent); 10540 const documentElement = getDocumentElement(offsetParent); 10541 if (offsetParent === documentElement) { 10542 return rect; 10543 } 10544 let scroll = { 10545 scrollLeft: 0, 10546 scrollTop: 0 10547 }; 10548 let scale = createCoords(1); 10549 const offsets = createCoords(0); 10550 if (isOffsetParentAnElement || !isOffsetParentAnElement && strategy !== 'fixed') { 10551 if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) { 10552 scroll = getNodeScroll(offsetParent); 10553 } 10554 if (isHTMLElement(offsetParent)) { 10555 const offsetRect = getBoundingClientRect(offsetParent); 10556 scale = getScale(offsetParent); 10557 offsets.x = offsetRect.x + offsetParent.clientLeft; 10558 offsets.y = offsetRect.y + offsetParent.clientTop; 10559 } 10560 } 10561 return { 10562 width: rect.width * scale.x, 10563 height: rect.height * scale.y, 10564 x: rect.x * scale.x - scroll.scrollLeft * scale.x + offsets.x, 10565 y: rect.y * scale.y - scroll.scrollTop * scale.y + offsets.y 10566 }; 10567} 10568 10569function getClientRects(element) { 10570 return Array.from(element.getClientRects()); 10571} 10572 10573function getWindowScrollBarX(element) { 10574 // If <html> has a CSS width greater than the viewport, then this will be 10575 // incorrect for RTL. 10576 return getBoundingClientRect(getDocumentElement(element)).left + getNodeScroll(element).scrollLeft; 10577} 10578 10579// Gets the entire size of the scrollable document area, even extending outside 10580// of the `<html>` and `<body>` rect bounds if horizontally scrollable. 10581function getDocumentRect(element) { 10582 const html = getDocumentElement(element); 10583 const scroll = getNodeScroll(element); 10584 const body = element.ownerDocument.body; 10585 const width = floating_ui_utils_max(html.scrollWidth, html.clientWidth, body.scrollWidth, body.clientWidth); 10586 const height = floating_ui_utils_max(html.scrollHeight, html.clientHeight, body.scrollHeight, body.clientHeight); 10587 let x = -scroll.scrollLeft + getWindowScrollBarX(element); 10588 const y = -scroll.scrollTop; 10589 if (floating_ui_utils_dom_getComputedStyle(body).direction === 'rtl') { 10590 x += floating_ui_utils_max(html.clientWidth, body.clientWidth) - width; 10591 } 10592 return { 10593 width, 10594 height, 10595 x, 10596 y 10597 }; 10598} 10599 10600function getViewportRect(element, strategy) { 10601 const win = floating_ui_utils_dom_getWindow(element); 10602 const html = getDocumentElement(element); 10603 const visualViewport = win.visualViewport; 10604 let width = html.clientWidth; 10605 let height = html.clientHeight; 10606 let x = 0; 10607 let y = 0; 10608 if (visualViewport) { 10609 width = visualViewport.width; 10610 height = visualViewport.height; 10611 const visualViewportBased = isWebKit(); 10612 if (!visualViewportBased || visualViewportBased && strategy === 'fixed') { 10613 x = visualViewport.offsetLeft; 10614 y = visualViewport.offsetTop; 10615 } 10616 } 10617 return { 10618 width, 10619 height, 10620 x, 10621 y 10622 }; 10623} 10624 10625// Returns the inner client rect, subtracting scrollbars if present. 10626function getInnerBoundingClientRect(element, strategy) { 10627 const clientRect = getBoundingClientRect(element, true, strategy === 'fixed'); 10628 const top = clientRect.top + element.clientTop; 10629 const left = clientRect.left + element.clientLeft; 10630 const scale = isHTMLElement(element) ? getScale(element) : createCoords(1); 10631 const width = element.clientWidth * scale.x; 10632 const height = element.clientHeight * scale.y; 10633 const x = left * scale.x; 10634 const y = top * scale.y; 10635 return { 10636 width, 10637 height, 10638 x, 10639 y 10640 }; 10641} 10642function getClientRectFromClippingAncestor(element, clippingAncestor, strategy) { 10643 let rect; 10644 if (clippingAncestor === 'viewport') { 10645 rect = getViewportRect(element, strategy); 10646 } else if (clippingAncestor === 'document') { 10647 rect = getDocumentRect(getDocumentElement(element)); 10648 } else if (isElement(clippingAncestor)) { 10649 rect = getInnerBoundingClientRect(clippingAncestor, strategy); 10650 } else { 10651 const visualOffsets = getVisualOffsets(element); 10652 rect = { 10653 ...clippingAncestor, 10654 x: clippingAncestor.x - visualOffsets.x, 10655 y: clippingAncestor.y - visualOffsets.y 10656 }; 10657 } 10658 return floating_ui_utils_rectToClientRect(rect); 10659} 10660function hasFixedPositionAncestor(element, stopNode) { 10661 const parentNode = getParentNode(element); 10662 if (parentNode === stopNode || !isElement(parentNode) || isLastTraversableNode(parentNode)) { 10663 return false; 10664 } 10665 return floating_ui_utils_dom_getComputedStyle(parentNode).position === 'fixed' || hasFixedPositionAncestor(parentNode, stopNode); 10666} 10667 10668// A "clipping ancestor" is an `overflow` element with the characteristic of 10669// clipping (or hiding) child elements. This returns all clipping ancestors 10670// of the given element up the tree. 10671function getClippingElementAncestors(element, cache) { 10672 const cachedResult = cache.get(element); 10673 if (cachedResult) { 10674 return cachedResult; 10675 } 10676 let result = getOverflowAncestors(element).filter(el => isElement(el) && getNodeName(el) !== 'body'); 10677 let currentContainingBlockComputedStyle = null; 10678 const elementIsFixed = floating_ui_utils_dom_getComputedStyle(element).position === 'fixed'; 10679 let currentNode = elementIsFixed ? getParentNode(element) : element; 10680 10681 // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block 10682 while (isElement(currentNode) && !isLastTraversableNode(currentNode)) { 10683 const computedStyle = floating_ui_utils_dom_getComputedStyle(currentNode); 10684 const currentNodeIsContaining = isContainingBlock(currentNode); 10685 if (!currentNodeIsContaining && computedStyle.position === 'fixed') { 10686 currentContainingBlockComputedStyle = null; 10687 } 10688 const shouldDropCurrentNode = elementIsFixed ? !currentNodeIsContaining && !currentContainingBlockComputedStyle : !currentNodeIsContaining && computedStyle.position === 'static' && !!currentContainingBlockComputedStyle && ['absolute', 'fixed'].includes(currentContainingBlockComputedStyle.position) || isOverflowElement(currentNode) && !currentNodeIsContaining && hasFixedPositionAncestor(element, currentNode); 10689 if (shouldDropCurrentNode) { 10690 // Drop non-containing blocks. 10691 result = result.filter(ancestor => ancestor !== currentNode); 10692 } else { 10693 // Record last containing block for next iteration. 10694 currentContainingBlockComputedStyle = computedStyle; 10695 } 10696 currentNode = getParentNode(currentNode); 10697 } 10698 cache.set(element, result); 10699 return result; 10700} 10701 10702// Gets the maximum area that the element is visible in due to any number of 10703// clipping ancestors. 10704function getClippingRect(_ref) { 10705 let { 10706 element, 10707 boundary, 10708 rootBoundary, 10709 strategy 10710 } = _ref; 10711 const elementClippingAncestors = boundary === 'clippingAncestors' ? getClippingElementAncestors(element, this._c) : [].concat(boundary); 10712 const clippingAncestors = [...elementClippingAncestors, rootBoundary]; 10713 const firstClippingAncestor = clippingAncestors[0]; 10714 const clippingRect = clippingAncestors.reduce((accRect, clippingAncestor) => { 10715 const rect = getClientRectFromClippingAncestor(element, clippingAncestor, strategy); 10716 accRect.top = floating_ui_utils_max(rect.top, accRect.top); 10717 accRect.right = floating_ui_utils_min(rect.right, accRect.right); 10718 accRect.bottom = floating_ui_utils_min(rect.bottom, accRect.bottom); 10719 accRect.left = floating_ui_utils_max(rect.left, accRect.left); 10720 return accRect; 10721 }, getClientRectFromClippingAncestor(element, firstClippingAncestor, strategy)); 10722 return { 10723 width: clippingRect.right - clippingRect.left, 10724 height: clippingRect.bottom - clippingRect.top, 10725 x: clippingRect.left, 10726 y: clippingRect.top 10727 }; 10728} 10729 10730function getDimensions(element) { 10731 return getCssDimensions(element); 10732} 10733 10734function getRectRelativeToOffsetParent(element, offsetParent, strategy) { 10735 const isOffsetParentAnElement = isHTMLElement(offsetParent); 10736 const documentElement = getDocumentElement(offsetParent); 10737 const isFixed = strategy === 'fixed'; 10738 const rect = getBoundingClientRect(element, true, isFixed, offsetParent); 10739 let scroll = { 10740 scrollLeft: 0, 10741 scrollTop: 0 10742 }; 10743 const offsets = createCoords(0); 10744 if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) { 10745 if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) { 10746 scroll = getNodeScroll(offsetParent); 10747 } 10748 if (isOffsetParentAnElement) { 10749 const offsetRect = getBoundingClientRect(offsetParent, true, isFixed, offsetParent); 10750 offsets.x = offsetRect.x + offsetParent.clientLeft; 10751 offsets.y = offsetRect.y + offsetParent.clientTop; 10752 } else if (documentElement) { 10753 offsets.x = getWindowScrollBarX(documentElement); 10754 } 10755 } 10756 return { 10757 x: rect.left + scroll.scrollLeft - offsets.x, 10758 y: rect.top + scroll.scrollTop - offsets.y, 10759 width: rect.width, 10760 height: rect.height 10761 }; 10762} 10763 10764function getTrueOffsetParent(element, polyfill) { 10765 if (!isHTMLElement(element) || floating_ui_utils_dom_getComputedStyle(element).position === 'fixed') { 10766 return null; 10767 } 10768 if (polyfill) { 10769 return polyfill(element); 10770 } 10771 return element.offsetParent; 10772} 10773 10774// Gets the closest ancestor positioned element. Handles some edge cases, 10775// such as table ancestors and cross browser bugs. 10776function getOffsetParent(element, polyfill) { 10777 const window = floating_ui_utils_dom_getWindow(element); 10778 if (!isHTMLElement(element)) { 10779 return window; 10780 } 10781 let offsetParent = getTrueOffsetParent(element, polyfill); 10782 while (offsetParent && isTableElement(offsetParent) && floating_ui_utils_dom_getComputedStyle(offsetParent).position === 'static') { 10783 offsetParent = getTrueOffsetParent(offsetParent, polyfill); 10784 } 10785 if (offsetParent && (getNodeName(offsetParent) === 'html' || getNodeName(offsetParent) === 'body' && floating_ui_utils_dom_getComputedStyle(offsetParent).position === 'static' && !isContainingBlock(offsetParent))) { 10786 return window; 10787 } 10788 return offsetParent || getContainingBlock(element) || window; 10789} 10790 10791const getElementRects = async function (_ref) { 10792 let { 10793 reference, 10794 floating, 10795 strategy 10796 } = _ref; 10797 const getOffsetParentFn = this.getOffsetParent || getOffsetParent; 10798 const getDimensionsFn = this.getDimensions; 10799 return { 10800 reference: getRectRelativeToOffsetParent(reference, await getOffsetParentFn(floating), strategy), 10801 floating: { 10802 x: 0, 10803 y: 0, 10804 ...(await getDimensionsFn(floating)) 10805 } 10806 }; 10807}; 10808 10809function isRTL(element) { 10810 return floating_ui_utils_dom_getComputedStyle(element).direction === 'rtl'; 10811} 10812 10813const platform = { 10814 convertOffsetParentRelativeRectToViewportRelativeRect, 10815 getDocumentElement: getDocumentElement, 10816 getClippingRect, 10817 getOffsetParent, 10818 getElementRects, 10819 getClientRects, 10820 getDimensions, 10821 getScale, 10822 isElement: isElement, 10823 isRTL 10824}; 10825 10826// https://samthor.au/2021/observing-dom/ 10827function observeMove(element, onMove) { 10828 let io = null; 10829 let timeoutId; 10830 const root = getDocumentElement(element); 10831 function cleanup() { 10832 clearTimeout(timeoutId); 10833 io && io.disconnect(); 10834 io = null; 10835 } 10836 function refresh(skip, threshold) { 10837 if (skip === void 0) { 10838 skip = false;
vendor: 4,494 bytes, lines 10839-10978
10839 } 10840 if (threshold === void 0) { 10841 threshold = 1; 10842 } 10843 cleanup(); 10844 const { 10845 left, 10846 top, 10847 width, 10848 height 10849 } = element.getBoundingClientRect(); 10850 if (!skip) { 10851 onMove(); 10852 } 10853 if (!width || !height) { 10854 return; 10855 } 10856 const insetTop = floor(top); 10857 const insetRight = floor(root.clientWidth - (left + width)); 10858 const insetBottom = floor(root.clientHeight - (top + height)); 10859 const insetLeft = floor(left); 10860 const rootMargin = -insetTop + "px " + -insetRight + "px " + -insetBottom + "px " + -insetLeft + "px"; 10861 const options = { 10862 rootMargin, 10863 threshold: floating_ui_utils_max(0, floating_ui_utils_min(1, threshold)) || 1 10864 }; 10865 let isFirstUpdate = true; 10866 function handleObserve(entries) { 10867 const ratio = entries[0].intersectionRatio; 10868 if (ratio !== threshold) { 10869 if (!isFirstUpdate) { 10870 return refresh(); 10871 } 10872 if (!ratio) { 10873 timeoutId = setTimeout(() => { 10874 refresh(false, 1e-7); 10875 }, 100); 10876 } else { 10877 refresh(false, ratio); 10878 } 10879 } 10880 isFirstUpdate = false; 10881 } 10882 10883 // Older browsers don't support a `document` as the root and will throw an 10884 // error. 10885 try { 10886 io = new IntersectionObserver(handleObserve, { 10887 ...options, 10888 // Handle <iframe>s 10889 root: root.ownerDocument 10890 }); 10891 } catch (e) { 10892 io = new IntersectionObserver(handleObserve, options); 10893 } 10894 io.observe(element); 10895 } 10896 refresh(true); 10897 return cleanup; 10898} 10899 10900/** 10901 * Automatically updates the position of the floating element when necessary. 10902 * Should only be called when the floating element is mounted on the DOM or 10903 * visible on the screen. 10904 * @returns cleanup function that should be invoked when the floating element is 10905 * removed from the DOM or hidden from the screen. 10906 * @see https://floating-ui.com/docs/autoUpdate 10907 */ 10908function autoUpdate(reference, floating, update, options) { 10909 if (options === void 0) { 10910 options = {}; 10911 } 10912 const { 10913 ancestorScroll = true, 10914 ancestorResize = true, 10915 elementResize = typeof ResizeObserver === 'function', 10916 layoutShift = typeof IntersectionObserver === 'function', 10917 animationFrame = false 10918 } = options; 10919 const referenceEl = unwrapElement(reference); 10920 const ancestors = ancestorScroll || ancestorResize ? [...(referenceEl ? getOverflowAncestors(referenceEl) : []), ...getOverflowAncestors(floating)] : []; 10921 ancestors.forEach(ancestor => { 10922 ancestorScroll && ancestor.addEventListener('scroll', update, { 10923 passive: true 10924 }); 10925 ancestorResize && ancestor.addEventListener('resize', update); 10926 }); 10927 const cleanupIo = referenceEl && layoutShift ? observeMove(referenceEl, update) : null; 10928 let reobserveFrame = -1; 10929 let resizeObserver = null; 10930 if (elementResize) { 10931 resizeObserver = new ResizeObserver(_ref => { 10932 let [firstEntry] = _ref; 10933 if (firstEntry && firstEntry.target === referenceEl && resizeObserver) { 10934 // Prevent update loops when using the `size` middleware. 10935 // https://github.com/floating-ui/floating-ui/issues/1740 10936 resizeObserver.unobserve(floating); 10937 cancelAnimationFrame(reobserveFrame); 10938 reobserveFrame = requestAnimationFrame(() => { 10939 resizeObserver && resizeObserver.observe(floating); 10940 }); 10941 } 10942 update(); 10943 }); 10944 if (referenceEl && !animationFrame) { 10945 resizeObserver.observe(referenceEl); 10946 } 10947 resizeObserver.observe(floating); 10948 } 10949 let frameId; 10950 let prevRefRect = animationFrame ? getBoundingClientRect(reference) : null; 10951 if (animationFrame) { 10952 frameLoop(); 10953 } 10954 function frameLoop() { 10955 const nextRefRect = getBoundingClientRect(reference); 10956 if (prevRefRect && (nextRefRect.x !== prevRefRect.x || nextRefRect.y !== prevRefRect.y || nextRefRect.width !== prevRefRect.width || nextRefRect.height !== prevRefRect.height)) { 10957 update(); 10958 } 10959 prevRefRect = nextRefRect; 10960 frameId = requestAnimationFrame(frameLoop); 10961 } 10962 update(); 10963 return () => { 10964 ancestors.forEach(ancestor => { 10965 ancestorScroll && ancestor.removeEventListener('scroll', update); 10966 ancestorResize && ancestor.removeEventListener('resize', update); 10967 }); 10968 cleanupIo && cleanupIo(); 10969 resizeObserver && resizeObserver.disconnect(); 10970 resizeObserver = null; 10971 if (animationFrame) { 10972 cancelAnimationFrame(frameId); 10973 } 10974 }; 10975} 10976 10977/** 10978 * Computes the `x` and `y` coordinates that will place the floating element
10979 * next to a reference element when it is given a certain CSS positioning 10980 * strategy. 10981 */ 10982const floating_ui_dom_computePosition = (reference, floating, options) => { 10983 // This caches the expensive `getClippingElementAncestors` function so that 10984 // multiple lifecycle resets re-use the same result. It only lives for a 10985 // single call. If other functions become expensive, we can add them as well. 10986 const cache = new Map(); 10987 const mergedOptions = { 10988 platform, 10989 ...options 10990 }; 10991 const platformWithCache = { 10992 ...mergedOptions.platform, 10993 _c: cache 10994 }; 10995 return computePosition(reference, floating, { 10996 ...mergedOptions, 10997 platform: platformWithCache 10998 }); 10999}; 11000 11001 11002 11003;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/SAES3ZFU.js 11004 11005 11006 11007 11008 11009
vendor: 4,395 bytes, lines 11010-11172
11010// src/popover/popover.tsx 11011 11012 11013 11014 11015function createDOMRect(x = 0, y = 0, width = 0, height = 0) { 11016 if (typeof DOMRect === "function") { 11017 return new DOMRect(x, y, width, height); 11018 } 11019 const rect = { 11020 x, 11021 y, 11022 width, 11023 height, 11024 top: y, 11025 right: x + width, 11026 bottom: y + height, 11027 left: x 11028 }; 11029 return PNRLI7OV_spreadProps(PNRLI7OV_spreadValues({}, rect), { toJSON: () => rect }); 11030} 11031function getDOMRect(anchorRect) { 11032 if (!anchorRect) 11033 return createDOMRect(); 11034 const { x, y, width, height } = anchorRect; 11035 return createDOMRect(x, y, width, height); 11036} 11037function getAnchorElement(anchorElement, getAnchorRect) { 11038 const contextElement = anchorElement || void 0; 11039 return { 11040 contextElement, 11041 getBoundingClientRect: () => { 11042 const anchor = anchorElement; 11043 const anchorRect = getAnchorRect == null ? void 0 : getAnchorRect(anchor); 11044 if (anchorRect || !anchor) { 11045 return getDOMRect(anchorRect); 11046 } 11047 return anchor.getBoundingClientRect(); 11048 } 11049 }; 11050} 11051function isValidPlacement(flip2) { 11052 return /^(?:top|bottom|left|right)(?:-(?:start|end))?$/.test(flip2); 11053} 11054function roundByDPR(value) { 11055 const dpr = window.devicePixelRatio || 1; 11056 return Math.round(value * dpr) / dpr; 11057} 11058function getOffsetMiddleware(arrowElement, props) { 11059 return offset(({ placement }) => { 11060 var _a; 11061 const arrowOffset = ((arrowElement == null ? void 0 : arrowElement.clientHeight) || 0) / 2; 11062 const finalGutter = typeof props.gutter === "number" ? props.gutter + arrowOffset : (_a = props.gutter) != null ? _a : arrowOffset; 11063 const hasAlignment = !!placement.split("-")[1]; 11064 return { 11065 crossAxis: !hasAlignment ? props.shift : void 0, 11066 mainAxis: finalGutter, 11067 alignmentAxis: props.shift 11068 }; 11069 }); 11070} 11071function getFlipMiddleware(props) { 11072 if (props.flip === false) 11073 return; 11074 const fallbackPlacements = typeof props.flip === "string" ? props.flip.split(" ") : void 0; 11075 invariant( 11076 !fallbackPlacements || fallbackPlacements.every(isValidPlacement), 11077 false && 0 11078 ); 11079 return floating_ui_core_flip({ 11080 padding: props.overflowPadding, 11081 fallbackPlacements 11082 }); 11083} 11084function getShiftMiddleware(props) { 11085 if (!props.slide && !props.overlap) 11086 return; 11087 return floating_ui_core_shift({ 11088 mainAxis: props.slide, 11089 crossAxis: props.overlap, 11090 padding: props.overflowPadding 11091 }); 11092} 11093function getSizeMiddleware(props) { 11094 return size({ 11095 padding: props.overflowPadding, 11096 apply({ elements, availableWidth, availableHeight, rects }) { 11097 const wrapper = elements.floating; 11098 const referenceWidth = Math.round(rects.reference.width); 11099 availableWidth = Math.floor(availableWidth); 11100 availableHeight = Math.floor(availableHeight); 11101 wrapper.style.setProperty( 11102 "--popover-anchor-width", 11103 `${referenceWidth}px` 11104 ); 11105 wrapper.style.setProperty( 11106 "--popover-available-width", 11107 `${availableWidth}px` 11108 ); 11109 wrapper.style.setProperty( 11110 "--popover-available-height", 11111 `${availableHeight}px` 11112 ); 11113 if (props.sameWidth) { 11114 wrapper.style.width = `${referenceWidth}px`; 11115 } 11116 if (props.fitViewport) { 11117 wrapper.style.maxWidth = `${availableWidth}px`; 11118 wrapper.style.maxHeight = `${availableHeight}px`; 11119 } 11120 } 11121 }); 11122} 11123function getArrowMiddleware(arrowElement, props) { 11124 if (!arrowElement) 11125 return; 11126 return arrow({ 11127 element: arrowElement, 11128 padding: props.arrowPadding 11129 }); 11130} 11131var usePopover = NQJBHION_createHook( 11132 (_a) => { 11133 var _b = _a, { 11134 store, 11135 modal = false, 11136 portal = !!modal, 11137 preserveTabOrder = true, 11138 autoFocusOnShow = true, 11139 wrapperProps, 11140 fixed = false, 11141 flip: flip2 = true, 11142 shift: shift2 = 0, 11143 slide = true, 11144 overlap = false, 11145 sameWidth = false, 11146 fitViewport = false, 11147 gutter, 11148 arrowPadding = 4, 11149 overflowPadding = 8, 11150 getAnchorRect, 11151 updatePosition 11152 } = _b, props = __objRest(_b, [ 11153 "store", 11154 "modal", 11155 "portal", 11156 "preserveTabOrder", 11157 "autoFocusOnShow", 11158 "wrapperProps", 11159 "fixed", 11160 "flip", 11161 "shift", 11162 "slide", 11163 "overlap", 11164 "sameWidth", 11165 "fitViewport", 11166 "gutter", 11167 "arrowPadding", 11168 "overflowPadding", 11169 "getAnchorRect", 11170 "updatePosition" 11171 ]); 11172 const arrowElement = store.useState("arrowElement");
vendor: 5,834 bytes, lines 11173-11351
11173 const anchorElement = store.useState("anchorElement"); 11174 const popoverElement = store.useState("popoverElement"); 11175 const contentElement = store.useState("contentElement"); 11176 const placement = store.useState("placement"); 11177 const mounted = store.useState("mounted"); 11178 const rendered = store.useState("rendered"); 11179 const [positioned, setPositioned] = (0,external_React_.useState)(false); 11180 const { portalRef, domReady } = usePortalRef(portal, props.portalRef); 11181 const getAnchorRectProp = useEvent(getAnchorRect); 11182 const updatePositionProp = useEvent(updatePosition); 11183 const hasCustomUpdatePosition = !!updatePosition; 11184 useSafeLayoutEffect(() => { 11185 if (!(popoverElement == null ? void 0 : popoverElement.isConnected)) 11186 return; 11187 popoverElement.style.setProperty( 11188 "--popover-overflow-padding", 11189 `${overflowPadding}px` 11190 ); 11191 const anchor = getAnchorElement(anchorElement, getAnchorRectProp); 11192 const updatePosition2 = async () => { 11193 if (!mounted) 11194 return; 11195 const middleware = [ 11196 getOffsetMiddleware(arrowElement, { gutter, shift: shift2 }), 11197 getFlipMiddleware({ flip: flip2, overflowPadding }), 11198 getShiftMiddleware({ slide, overlap, overflowPadding }), 11199 getArrowMiddleware(arrowElement, { arrowPadding }), 11200 getSizeMiddleware({ 11201 sameWidth, 11202 fitViewport, 11203 overflowPadding 11204 }) 11205 ]; 11206 const pos = await floating_ui_dom_computePosition(anchor, popoverElement, { 11207 placement, 11208 strategy: fixed ? "fixed" : "absolute", 11209 middleware 11210 }); 11211 store.setState("currentPlacement", pos.placement); 11212 setPositioned(true); 11213 const x = roundByDPR(pos.x); 11214 const y = roundByDPR(pos.y); 11215 Object.assign(popoverElement.style, { 11216 top: "0", 11217 left: "0", 11218 transform: `translate3d(${x}px,${y}px,0)` 11219 }); 11220 if (arrowElement && pos.middlewareData.arrow) { 11221 const { x: arrowX, y: arrowY } = pos.middlewareData.arrow; 11222 const dir = pos.placement.split("-")[0]; 11223 Object.assign(arrowElement.style, { 11224 left: arrowX != null ? `${arrowX}px` : "", 11225 top: arrowY != null ? `${arrowY}px` : "", 11226 [dir]: "100%" 11227 }); 11228 } 11229 }; 11230 const update = async () => { 11231 if (hasCustomUpdatePosition) { 11232 await updatePositionProp({ updatePosition: updatePosition2 }); 11233 setPositioned(true); 11234 } else { 11235 await updatePosition2(); 11236 } 11237 }; 11238 const cancelAutoUpdate = autoUpdate(anchor, popoverElement, update, { 11239 // JSDOM doesn't support ResizeObserver 11240 elementResize: typeof ResizeObserver === "function" 11241 }); 11242 return () => { 11243 setPositioned(false); 11244 cancelAutoUpdate(); 11245 }; 11246 }, [ 11247 store, 11248 rendered, 11249 popoverElement, 11250 arrowElement, 11251 anchorElement, 11252 popoverElement, 11253 placement, 11254 mounted, 11255 domReady, 11256 fixed, 11257 flip2, 11258 shift2, 11259 slide, 11260 overlap, 11261 sameWidth, 11262 fitViewport, 11263 gutter, 11264 arrowPadding, 11265 overflowPadding, 11266 getAnchorRectProp, 11267 hasCustomUpdatePosition, 11268 updatePositionProp 11269 ]); 11270 useSafeLayoutEffect(() => { 11271 if (!mounted) 11272 return; 11273 if (!domReady) 11274 return; 11275 if (!(popoverElement == null ? void 0 : popoverElement.isConnected)) 11276 return; 11277 if (!(contentElement == null ? void 0 : contentElement.isConnected)) 11278 return; 11279 const applyZIndex = () => { 11280 popoverElement.style.zIndex = getComputedStyle(contentElement).zIndex; 11281 }; 11282 applyZIndex(); 11283 let raf = requestAnimationFrame(() => { 11284 raf = requestAnimationFrame(applyZIndex); 11285 }); 11286 return () => cancelAnimationFrame(raf); 11287 }, [mounted, domReady, popoverElement, contentElement]); 11288 const position = fixed ? "fixed" : "absolute"; 11289 props = useWrapElement( 11290 props, 11291 (element) => /* @__PURE__ */ (0,jsx_runtime.jsx)( 11292 "div", 11293 PNRLI7OV_spreadProps(PNRLI7OV_spreadValues({ 11294 role: "presentation" 11295 }, wrapperProps), { 11296 style: PNRLI7OV_spreadValues({ 11297 // https://floating-ui.com/docs/computeposition#initial-layout 11298 position, 11299 top: 0, 11300 left: 0, 11301 width: "max-content" 11302 }, wrapperProps == null ? void 0 : wrapperProps.style), 11303 ref: store.setPopoverElement, 11304 children: element 11305 }) 11306 ), 11307 [store, position, wrapperProps] 11308 ); 11309 props = useWrapElement( 11310 props, 11311 (element) => /* @__PURE__ */ (0,jsx_runtime.jsx)(PopoverContext.Provider, { value: store, children: element }), 11312 [store] 11313 ); 11314 props = PNRLI7OV_spreadProps(PNRLI7OV_spreadValues({ 11315 // data-placing is not part of the public API. We're setting this here so 11316 // we can wait for the popover to be positioned before other components 11317 // move focus into it. For example, this attribute is observed by the 11318 // Combobox component with the autoSelect behavior. 11319 "data-placing": !positioned ? "" : void 0 11320 }, props), { 11321 style: PNRLI7OV_spreadValues({ 11322 position: "relative" 11323 }, props.style) 11324 }); 11325 props = useDialog(PNRLI7OV_spreadProps(PNRLI7OV_spreadValues({ 11326 store, 11327 modal, 11328 preserveTabOrder, 11329 portal, 11330 autoFocusOnShow: positioned && autoFocusOnShow 11331 }, props), { 11332 portalRef 11333 })); 11334 return props; 11335 } 11336); 11337var Popover = NQJBHION_createComponent((props) => { 11338 const htmlProps = usePopover(props); 11339 return NQJBHION_createElement("div", htmlProps); 11340}); 11341if (false) {} 11342 11343 11344 11345;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/BB7NHN6A.js 11346 11347 11348 11349 11350 11351
11352// src/hovercard/hovercard.tsx 11353 11354 11355 11356 11357 11358 11359function isMovingOnHovercard(target, card, anchor, nested) { 11360 if (focus_hasFocusWithin(card)) 11361 return true; 11362 if (!target) 11363 return false; 11364 if (O35LWD4W_contains(card, target)) 11365 return true; 11366 if (anchor && O35LWD4W_contains(anchor, target)) 11367 return true; 11368 if (nested == null ? void 0 : nested.some((card2) => isMovingOnHovercard(target, card2, anchor))) { 11369 return true; 11370 } 11371 return false; 11372} 11373function useAutoFocusOnShow(_a) { 11374 var _b = _a, { store } = _b, props = __objRest(_b, ["store"]); 11375 const open = store.useState("open"); 11376 const openRef = J7Q2EO23_useLiveRef(open); 11377 (0,external_React_.useEffect)(() => { 11378 if (!open) { 11379 store.setAutoFocusOnShow(false); 11380 } 11381 }, [open, store]); 11382 (0,external_React_.useEffect)( 11383 () => () => { 11384 if (!openRef.current) { 11385 store.setAutoFocusOnShow(false); 11386 } 11387 }, 11388 [store] 11389 ); 11390 const modal = !!props.modal; 11391 const autoFocusOnShow = store.useState( 11392 (state) => modal || state.autoFocusOnShow 11393 ); 11394 return PNRLI7OV_spreadValues({ autoFocusOnShow }, props); 11395} 11396function useAutoFocusOnHide(_a) { 11397 var _b = _a, { store } = _b, props = __objRest(_b, ["store"]); 11398 const [autoFocusOnHide, setAutoFocusOnHide] = (0,external_React_.useState)(false); 11399 const mounted = store.useState("mounted"); 11400 (0,external_React_.useEffect)(() => { 11401 if (!mounted) { 11402 setAutoFocusOnHide(false); 11403 } 11404 }, [mounted]); 11405 const onFocusProp = props.onFocus; 11406 const onFocus = useEvent((event) => { 11407 onFocusProp == null ? void 0 : onFocusProp(event); 11408 if (event.defaultPrevented) 11409 return; 11410 setAutoFocusOnHide(true); 11411 }); 11412 const finalFocusRef = (0,external_React_.useRef)(null); 11413 (0,external_React_.useEffect)(() => { 11414 return store.sync( 11415 (state) => { 11416 finalFocusRef.current = state.anchorElement; 11417 }, 11418 ["anchorElement"] 11419 ); 11420 }, []); 11421 props = PNRLI7OV_spreadProps(PNRLI7OV_spreadValues({ 11422 autoFocusOnHide, 11423 finalFocus: finalFocusRef 11424 }, props), { 11425 onFocus 11426 }); 11427 return props; 11428} 11429var NestedHovercardContext = (0,external_React_.createContext)(null); 11430var useHovercard = NQJBHION_createHook( 11431 (_a) => { 11432 var _b = _a, { 11433 store, 11434 modal = false, 11435 portal = !!modal, 11436 hideOnEscape = true, 11437 hideOnHoverOutside = true, 11438 disablePointerEventsOnApproach = !!hideOnHoverOutside 11439 } = _b, props = __objRest(_b, [ 11440 "store", 11441 "modal", 11442 "portal", 11443 "hideOnEscape", 11444 "hideOnHoverOutside", 11445 "disablePointerEventsOnApproach" 11446 ]); 11447 const ref = (0,external_React_.useRef)(null); 11448 const [nestedHovercards, setNestedHovercards] = (0,external_React_.useState)([]); 11449 const hideTimeoutRef = (0,external_React_.useRef)(0); 11450 const enterPointRef = (0,external_React_.useRef)(null); 11451 const { portalRef, domReady } = usePortalRef(portal, props.portalRef); 11452 const mayHideOnHoverOutside = !!hideOnHoverOutside; 11453 const hideOnHoverOutsideProp = useBooleanEvent(hideOnHoverOutside); 11454 const mayDisablePointerEvents = !!disablePointerEventsOnApproach; 11455 const disablePointerEventsProp = useBooleanEvent( 11456 disablePointerEventsOnApproach 11457 ); 11458 const mounted = store.useState("mounted"); 11459 (0,external_React_.useEffect)(() => { 11460 if (!domReady) 11461 return; 11462 if (!mounted) 11463 return; 11464 if (!mayHideOnHoverOutside && !mayDisablePointerEvents) 11465 return; 11466 const element = ref.current; 11467 if (!element) 11468 return; 11469 const onMouseMove = (event) => { 11470 const { anchorElement, hideTimeout, timeout } = store.getState(); 11471 const enterPoint = enterPointRef.current; 11472 const target = event.target; 11473 const anchor = anchorElement; 11474 if (isMovingOnHovercard(target, element, anchor, nestedHovercards)) { 11475 enterPointRef.current = target && anchor && O35LWD4W_contains(anchor, target) ? getEventPoint(event) : null; 11476 window.clearTimeout(hideTimeoutRef.current); 11477 hideTimeoutRef.current = 0; 11478 return; 11479 } 11480 if (hideTimeoutRef.current) 11481 return; 11482 if (enterPoint) { 11483 const currentPoint = getEventPoint(event); 11484 const polygon = getElementPolygon(element, enterPoint); 11485 if (isPointInPolygon(currentPoint, polygon)) { 11486 enterPointRef.current = currentPoint; 11487 if (!disablePointerEventsProp(event)) 11488 return; 11489 event.preventDefault(); 11490 event.stopPropagation(); 11491 return; 11492 } 11493 } 11494 if (!hideOnHoverOutsideProp(event)) 11495 return; 11496 hideTimeoutRef.current = window.setTimeout(() => { 11497 hideTimeoutRef.current = 0; 11498 store.hide(); 11499 }, hideTimeout != null ? hideTimeout : timeout); 11500 }; 11501 return chain( 11502 addGlobalEventListener("mousemove", onMouseMove, true), 11503 () => clearTimeout(hideTimeoutRef.current) 11504 ); 11505 }, [ 11506 store, 11507 domReady, 11508 mounted, 11509 mayHideOnHoverOutside, 11510 mayDisablePointerEvents, 11511 nestedHovercards, 11512 disablePointerEventsProp, 11513 hideOnHoverOutsideProp 11514 ]); 11515 (0,external_React_.useEffect)(() => { 11516 if (!domReady) 11517 return; 11518 if (!mounted) 11519 return; 11520 if (!mayDisablePointerEvents) 11521 return; 11522 const disableEvent = (event) => { 11523 const element = ref.current; 11524 if (!element) 11525 return; 11526 const enterPoint = enterPointRef.current; 11527 if (!enterPoint) 11528 return; 11529 const polygon = getElementPolygon(element, enterPoint); 11530 if (isPointInPolygon(getEventPoint(event), polygon)) { 11531 if (!disablePointerEventsProp(event)) 11532 return; 11533 event.preventDefault(); 11534 event.stopPropagation(); 11535 } 11536 }; 11537 return chain( 11538 // Note: we may need to add pointer events here in the future. 11539 addGlobalEventListener("mouseenter", disableEvent, true), 11540 addGlobalEventListener("mouseover", disableEvent, true), 11541 addGlobalEventListener("mouseout", disableEvent, true), 11542 addGlobalEventListener("mouseleave", disableEvent, true) 11543 ); 11544 }, [domReady, mounted, mayDisablePointerEvents, disablePointerEventsProp]);
11545 const registerOnParent = (0,external_React_.useContext)(NestedHovercardContext); 11546 useSafeLayoutEffect(() => { 11547 if (modal) 11548 return; 11549 if (!portal) 11550 return; 11551 if (!mounted) 11552 return; 11553 if (!domReady) 11554 return; 11555 const element = ref.current; 11556 if (!element) 11557 return; 11558 return registerOnParent == null ? void 0 : registerOnParent(element); 11559 }, [modal, portal, mounted, domReady]); 11560 const registerNestedHovercard = (0,external_React_.useCallback)( 11561 (element) => { 11562 setNestedHovercards((prevElements) => [...prevElements, element]); 11563 const parentUnregister = registerOnParent == null ? void 0 : registerOnParent(element); 11564 return () => { 11565 setNestedHovercards( 11566 (prevElements) => prevElements.filter((item) => item !== element) 11567 ); 11568 parentUnregister == null ? void 0 : parentUnregister(); 11569 }; 11570 }, 11571 [registerOnParent] 11572 ); 11573 props = useWrapElement( 11574 props, 11575 (element) => /* @__PURE__ */ (0,jsx_runtime.jsx)(NestedHovercardContext.Provider, { value: registerNestedHovercard, children: element }), 11576 [registerNestedHovercard] 11577 ); 11578 props = PNRLI7OV_spreadProps(PNRLI7OV_spreadValues({}, props), { 11579 ref: useMergeRefs(ref, props.ref) 11580 }); 11581 props = useAutoFocusOnHide(PNRLI7OV_spreadValues({ store }, props)); 11582 props = useAutoFocusOnShow(PNRLI7OV_spreadValues({ store, modal }, props)); 11583 props = usePopover(PNRLI7OV_spreadProps(PNRLI7OV_spreadValues({ 11584 store, 11585 modal, 11586 portal 11587 }, props), { 11588 portalRef, 11589 hideOnEscape(event) { 11590 if (isFalsyBooleanCallback(hideOnEscape, event)) 11591 return false; 11592 requestAnimationFrame(() => requestAnimationFrame(store.hide)); 11593 return true; 11594 } 11595 })); 11596 return props; 11597 } 11598); 11599var Hovercard = NQJBHION_createComponent((props) => { 11600 const htmlProps = useHovercard(props); 11601 return NQJBHION_createElement("div", htmlProps); 11602}); 11603if (false) {} 11604 11605 11606 11607;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/Z5BJMNGY.js
11608// src/tooltip/tooltip-context.ts 11609 11610var TooltipContext = (0,external_React_.createContext)( 11611 void 0 11612); 11613 11614 11615 11616;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/tooltip/tooltip.js 11617 11618 11619 11620 11621 11622 11623 11624 11625 11626 11627 11628 11629 11630 11631 11632 11633 11634 11635 11636 11637 11638 11639 11640 11641 11642 11643 11644 11645 11646 11647 11648 11649 11650 11651 11652 11653 11654 11655
11656// src/tooltip/tooltip.tsx 11657 11658 11659 11660var useTooltip = NQJBHION_createHook( 11661 (_a) => { 11662 var _b = _a, { 11663 store, 11664 portal = true, 11665 gutter = 8, 11666 preserveTabOrder = false, 11667 hideOnHoverOutside = true, 11668 hideOnInteractOutside = true 11669 } = _b, props = __objRest(_b, [ 11670 "store", 11671 "portal", 11672 "gutter", 11673 "preserveTabOrder", 11674 "hideOnHoverOutside", 11675 "hideOnInteractOutside" 11676 ]); 11677 props = useWrapElement( 11678 props, 11679 (element) => /* @__PURE__ */ (0,jsx_runtime.jsx)(TooltipContext.Provider, { value: store, children: element }), 11680 [store] 11681 ); 11682 const role = store.useState( 11683 (state) => state.type === "description" ? "tooltip" : "none" 11684 ); 11685 props = PNRLI7OV_spreadValues({ role }, props); 11686 props = useHovercard(PNRLI7OV_spreadProps(PNRLI7OV_spreadValues({}, props), { 11687 store, 11688 portal, 11689 gutter, 11690 preserveTabOrder, 11691 hideOnHoverOutside: (event) => { 11692 if (isFalsyBooleanCallback(hideOnHoverOutside, event)) 11693 return false; 11694 const { anchorElement } = store.getState(); 11695 if (!anchorElement) 11696 return true; 11697 if ("focusVisible" in anchorElement.dataset) 11698 return false; 11699 return true; 11700 }, 11701 hideOnInteractOutside: (event) => { 11702 if (isFalsyBooleanCallback(hideOnInteractOutside, event)) 11703 return false; 11704 const { anchorElement } = store.getState(); 11705 if (!anchorElement) 11706 return true; 11707 if (O35LWD4W_contains(anchorElement, event.target)) 11708 return false; 11709 return true; 11710 } 11711 })); 11712 return props; 11713 } 11714); 11715var Tooltip = NQJBHION_createComponent((props) => { 11716 const htmlProps = useTooltip(props); 11717 return NQJBHION_createElement("div", htmlProps); 11718}); 11719if (false) {} 11720 11721 11722;// CONCATENATED MODULE: external ["wp","deprecated"] 11723const external_wp_deprecated_namespaceObject = window["wp"]["deprecated"]; 11724var external_wp_deprecated_default = /*#__PURE__*/__webpack_require__.n(external_wp_deprecated_namespaceObject); 11725;// CONCATENATED MODULE: ./packages/components/build-module/shortcut/index.js 11726 11727/** 11728 * Internal dependencies 11729 */ 11730 11731/** 11732 * Shortcut component is used to display keyboard shortcuts, and it can be customized with a custom display and aria label if needed. 11733 * 11734 * ```jsx 11735 * import { Shortcut } from '@wordpress/components'; 11736 * 11737 * const MyShortcut = () => { 11738 * return ( 11739 * <Shortcut shortcut={{ display: 'Ctrl + S', ariaLabel: 'Save' }} /> 11740 * ); 11741 * }; 11742 * ``` 11743 */ 11744function Shortcut(props) { 11745 const { 11746 shortcut, 11747 className 11748 } = props; 11749 if (!shortcut) { 11750 return null; 11751 } 11752 let displayText; 11753 let ariaLabel; 11754 if (typeof shortcut === 'string') { 11755 displayText = shortcut; 11756 } 11757 if (shortcut !== null && typeof shortcut === 'object') { 11758 displayText = shortcut.display; 11759 ariaLabel = shortcut.ariaLabel; 11760 } 11761 return (0,external_wp_element_namespaceObject.createElement)("span", { 11762 className: className, 11763 "aria-label": ariaLabel 11764 }, displayText); 11765} 11766/* harmony default export */ const build_module_shortcut = (Shortcut); 11767 11768;// CONCATENATED MODULE: ./packages/components/build-module/popover/utils.js 11769/** 11770 * External dependencies 11771 */ 11772// eslint-disable-next-line no-restricted-imports 11773 11774/** 11775 * Internal dependencies 11776 */ 11777 11778const POSITION_TO_PLACEMENT = { 11779 bottom: 'bottom', 11780 top: 'top', 11781 'middle left': 'left', 11782 'middle right': 'right', 11783 'bottom left': 'bottom-end', 11784 'bottom center': 'bottom', 11785 'bottom right': 'bottom-start', 11786 'top left': 'top-end', 11787 'top center': 'top', 11788 'top right': 'top-start', 11789 'middle left left': 'left', 11790 'middle left right': 'left', 11791 'middle left bottom': 'left-end', 11792 'middle left top': 'left-start', 11793 'middle right left': 'right', 11794 'middle right right': 'right', 11795 'middle right bottom': 'right-end', 11796 'middle right top': 'right-start', 11797 'bottom left left': 'bottom-end', 11798 'bottom left right': 'bottom-end', 11799 'bottom left bottom': 'bottom-end', 11800 'bottom left top': 'bottom-end', 11801 'bottom center left': 'bottom', 11802 'bottom center right': 'bottom', 11803 'bottom center bottom': 'bottom', 11804 'bottom center top': 'bottom', 11805 'bottom right left': 'bottom-start', 11806 'bottom right right': 'bottom-start', 11807 'bottom right bottom': 'bottom-start', 11808 'bottom right top': 'bottom-start', 11809 'top left left': 'top-end', 11810 'top left right': 'top-end', 11811 'top left bottom': 'top-end', 11812 'top left top': 'top-end', 11813 'top center left': 'top', 11814 'top center right': 'top', 11815 'top center bottom': 'top', 11816 'top center top': 'top', 11817 'top right left': 'top-start', 11818 'top right right': 'top-start', 11819 'top right bottom': 'top-start', 11820 'top right top': 'top-start', 11821 // `middle`/`middle center [corner?]` positions are associated to a fallback 11822 // `bottom` placement because there aren't any corresponding placement values. 11823 middle: 'bottom', 11824 'middle center': 'bottom', 11825 'middle center bottom': 'bottom', 11826 'middle center left': 'bottom', 11827 'middle center right': 'bottom', 11828 'middle center top': 'bottom' 11829}; 11830 11831/** 11832 * Converts the `Popover`'s legacy "position" prop to the new "placement" prop 11833 * (used by `floating-ui`). 11834 * 11835 * @param position The legacy position 11836 * @return The corresponding placement 11837 */ 11838const positionToPlacement = position => { 11839 var _POSITION_TO_PLACEMEN; 11840 return (_POSITION_TO_PLACEMEN = POSITION_TO_PLACEMENT[position]) !== null && _POSITION_TO_PLACEMEN !== void 0 ? _POSITION_TO_PLACEMEN : 'bottom'; 11841}; 11842 11843/** 11844 * @typedef AnimationOrigin 11845 * @type {Object} 11846 * @property {number} originX A number between 0 and 1 (in CSS logical properties jargon, 0 is "start", 0.5 is "center", and 1 is "end") 11847 * @property {number} originY A number between 0 and 1 (0 is top, 0.5 is center, and 1 is bottom) 11848 */ 11849 11850const PLACEMENT_TO_ANIMATION_ORIGIN = { 11851 top: { 11852 originX: 0.5, 11853 originY: 1 11854 }, 11855 // open from bottom, center 11856 'top-start': { 11857 originX: 0, 11858 originY: 1 11859 }, 11860 // open from bottom, left 11861 'top-end': { 11862 originX: 1, 11863 originY: 1 11864 }, 11865 // open from bottom, right 11866 right: { 11867 originX: 0, 11868 originY: 0.5 11869 }, 11870 // open from middle, left 11871 'right-start': { 11872 originX: 0, 11873 originY: 0 11874 }, 11875 // open from top, left 11876 'right-end': { 11877 originX: 0, 11878 originY: 1 11879 }, 11880 // open from bottom, left 11881 bottom: { 11882 originX: 0.5, 11883 originY: 0 11884 }, 11885 // open from top, center 11886 'bottom-start': { 11887 originX: 0, 11888 originY: 0 11889 }, 11890 // open from top, left 11891 'bottom-end': { 11892 originX: 1, 11893 originY: 0 11894 }, 11895 // open from top, right 11896 left: { 11897 originX: 1, 11898 originY: 0.5 11899 }, 11900 // open from middle, right 11901 'left-start': { 11902 originX: 1, 11903 originY: 0 11904 }, 11905 // open from top, right 11906 'left-end': { 11907 originX: 1, 11908 originY: 1 11909 }, 11910 // open from bottom, right 11911 overlay: { 11912 originX: 0.5, 11913 originY: 0.5 11914 } // open from center, center 11915}; 11916 11917/** 11918 * Given the floating-ui `placement`, compute the framer-motion props for the 11919 * popover's entry animation. 11920 * 11921 * @param placement A placement string from floating ui
11922 * @return The object containing the motion props 11923 */ 11924const placementToMotionAnimationProps = placement => { 11925 const translateProp = placement.startsWith('top') || placement.startsWith('bottom') ? 'translateY' : 'translateX'; 11926 const translateDirection = placement.startsWith('top') || placement.startsWith('left') ? 1 : -1; 11927 return { 11928 style: PLACEMENT_TO_ANIMATION_ORIGIN[placement], 11929 initial: { 11930 opacity: 0, 11931 scale: 0, 11932 [translateProp]: `${2 * translateDirection}em` 11933 }, 11934 animate: { 11935 opacity: 1, 11936 scale: 1, 11937 [translateProp]: 0 11938 }, 11939 transition: { 11940 duration: 0.1, 11941 ease: [0, 0, 0.2, 1] 11942 } 11943 }; 11944}; 11945function isTopBottom(anchorRef) { 11946 return !!anchorRef?.top; 11947} 11948function isRef(anchorRef) { 11949 return !!anchorRef?.current; 11950} 11951const getReferenceElement = ({ 11952 anchor, 11953 anchorRef, 11954 anchorRect, 11955 getAnchorRect, 11956 fallbackReferenceElement 11957}) => { 11958 var _referenceElement; 11959 let referenceElement = null; 11960 if (anchor) { 11961 referenceElement = anchor; 11962 } else if (isTopBottom(anchorRef)) { 11963 // Create a virtual element for the ref. The expectation is that 11964 // if anchorRef.top is defined, then anchorRef.bottom is defined too. 11965 // Seems to be used by the block toolbar, when multiple blocks are selected 11966 // (top and bottom blocks are used to calculate the resulting rect). 11967 referenceElement = { 11968 getBoundingClientRect() { 11969 const topRect = anchorRef.top.getBoundingClientRect(); 11970 const bottomRect = anchorRef.bottom.getBoundingClientRect(); 11971 return new window.DOMRect(topRect.x, topRect.y, topRect.width, bottomRect.bottom - topRect.top); 11972 } 11973 }; 11974 } else if (isRef(anchorRef)) { 11975 // Standard React ref. 11976 referenceElement = anchorRef.current; 11977 } else if (anchorRef) { 11978 // If `anchorRef` holds directly the element's value (no `current` key) 11979 // This is a weird scenario and should be deprecated. 11980 referenceElement = anchorRef; 11981 } else if (anchorRect) { 11982 // Create a virtual element for the ref. 11983 referenceElement = { 11984 getBoundingClientRect() { 11985 return anchorRect; 11986 } 11987 }; 11988 } else if (getAnchorRect) { 11989 // Create a virtual element for the ref. 11990 referenceElement = { 11991 getBoundingClientRect() { 11992 var _rect$x, _rect$y, _rect$width, _rect$height; 11993 const rect = getAnchorRect(fallbackReferenceElement); 11994 return new window.DOMRect((_rect$x = rect.x) !== null && _rect$x !== void 0 ? _rect$x : rect.left, (_rect$y = rect.y) !== null && _rect$y !== void 0 ? _rect$y : rect.top, (_rect$width = rect.width) !== null && _rect$width !== void 0 ? _rect$width : rect.right - rect.left, (_rect$height = rect.height) !== null && _rect$height !== void 0 ? _rect$height : rect.bottom - rect.top); 11995 } 11996 }; 11997 } else if (fallbackReferenceElement) { 11998 // If no explicit ref is passed via props, fall back to 11999 // anchoring to the popover's parent node. 12000 referenceElement = fallbackReferenceElement.parentElement; 12001 } 12002 12003 // Convert any `undefined` value to `null`. 12004 return (_referenceElement = referenceElement) !== null && _referenceElement !== void 0 ? _referenceElement : null; 12005}; 12006 12007/** 12008 * Computes the final coordinate that needs to be applied to the floating 12009 * element when applying transform inline styles, defaulting to `undefined` 12010 * if the provided value is `null` or `NaN`. 12011 * 12012 * @param c input coordinate (usually as returned from floating-ui) 12013 * @return The coordinate's value to be used for inline styles. An `undefined` 12014 * return value means "no style set" for this coordinate. 12015 */ 12016const computePopoverPosition = c => c === null || Number.isNaN(c) ? undefined : Math.round(c); 12017 12018;// CONCATENATED MODULE: ./packages/components/build-module/tooltip/index.js 12019 12020/** 12021 * External dependencies 12022 */ 12023 12024 12025/** 12026 * WordPress dependencies 12027 */ 12028 12029 12030 12031 12032/** 12033 * Internal dependencies 12034 */ 12035 12036 12037 12038 12039/** 12040 * Time over anchor to wait before showing tooltip 12041 */ 12042const TOOLTIP_DELAY = 700; 12043function tooltip_Tooltip(props) { 12044 const { 12045 children,
12046 delay = TOOLTIP_DELAY, 12047 hideOnClick = true, 12048 placement, 12049 position, 12050 shortcut, 12051 text 12052 } = props; 12053 const baseId = (0,external_wp_compose_namespaceObject.useInstanceId)(tooltip_Tooltip, 'tooltip'); 12054 const describedById = text || shortcut ? baseId : undefined; 12055 const isOnlyChild = external_wp_element_namespaceObject.Children.count(children) === 1; 12056 // console error if more than one child element is added 12057 if (!isOnlyChild) { 12058 if (false) {} 12059 } 12060 12061 // Compute tooltip's placement: 12062 // - give priority to `placement` prop, if defined 12063 // - otherwise, compute it from the legacy `position` prop (if defined) 12064 // - finally, fallback to the default placement: 'bottom' 12065 let computedPlacement; 12066 if (placement !== undefined) { 12067 computedPlacement = placement; 12068 } else if (position !== undefined) { 12069 computedPlacement = positionToPlacement(position); 12070 external_wp_deprecated_default()('`position` prop in wp.components.tooltip', { 12071 since: '6.4', 12072 alternative: '`placement` prop' 12073 }); 12074 } 12075 computedPlacement = computedPlacement || 'bottom'; 12076 const tooltipStore = useTooltipStore({ 12077 placement: computedPlacement, 12078 timeout: delay 12079 }); 12080 const isTooltipOpen = tooltipStore.useState('open'); 12081 return (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, (0,external_wp_element_namespaceObject.createElement)(TooltipAnchor, { 12082 onBlur: tooltipStore.hide, 12083 onClick: hideOnClick ? tooltipStore.hide : undefined, 12084 store: tooltipStore, 12085 render: isOnlyChild ? children : undefined 12086 }, isOnlyChild ? undefined : children), isOnlyChild && (text || shortcut) && isTooltipOpen && (0,external_wp_element_namespaceObject.createElement)(Tooltip, { 12087 className: "components-tooltip", 12088 gutter: 4, 12089 id: describedById, 12090 overflowPadding: 0.5, 12091 store: tooltipStore 12092 }, text, shortcut && (0,external_wp_element_namespaceObject.createElement)(build_module_shortcut, { 12093 className: text ? 'components-tooltip__shortcut' : '', 12094 shortcut: shortcut 12095 }))); 12096} 12097/* harmony default export */ const tooltip = (tooltip_Tooltip); 12098 12099;// CONCATENATED MODULE: external ["wp","warning"] 12100const external_wp_warning_namespaceObject = window["wp"]["warning"]; 12101// EXTERNAL MODULE: ./node_modules/deepmerge/dist/cjs.js 12102var cjs = __webpack_require__(1919); 12103var cjs_default = /*#__PURE__*/__webpack_require__.n(cjs); 12104// EXTERNAL MODULE: ./node_modules/fast-deep-equal/es6/index.js 12105var es6 = __webpack_require__(5619); 12106var es6_default = /*#__PURE__*/__webpack_require__.n(es6); 12107;// CONCATENATED MODULE: ./node_modules/is-plain-object/dist/is-plain-object.mjs 12108/*! 12109 * is-plain-object <https://github.com/jonschlinkert/is-plain-object> 12110 * 12111 * Copyright (c) 2014-2017, Jon Schlinkert. 12112 * Released under the MIT License. 12113 */ 12114 12115function is_plain_object_isObject(o) { 12116 return Object.prototype.toString.call(o) === '[object Object]'; 12117} 12118 12119function is_plain_object_isPlainObject(o) { 12120 var ctor,prot; 12121 12122 if (is_plain_object_isObject(o) === false) return false; 12123 12124 // If has modified constructor 12125 ctor = o.constructor; 12126 if (ctor === undefined) return true; 12127 12128 // If has modified prototype 12129 prot = ctor.prototype; 12130 if (is_plain_object_isObject(prot) === false) return false; 12131 12132 // If constructor does not have an Object-specific method 12133 if (prot.hasOwnProperty('isPrototypeOf') === false) { 12134 return false; 12135 } 12136 12137 // Most likely a plain Object 12138 return true; 12139} 12140 12141 12142 12143;// CONCATENATED MODULE: ./packages/components/build-module/utils/hooks/use-update-effect.js 12144/** 12145 * WordPress dependencies 12146 */ 12147 12148 12149/** 12150 * A `React.useEffect` that will not run on the first render. 12151 * Source: 12152 * https://github.com/reakit/reakit/blob/HEAD/packages/reakit-utils/src/useUpdateEffect.ts 12153 * 12154 * @param {import('react').EffectCallback} effect 12155 * @param {import('react').DependencyList} deps 12156 */ 12157function use_update_effect_useUpdateEffect(effect, deps) { 12158 const mounted = (0,external_wp_element_namespaceObject.useRef)(false); 12159 (0,external_wp_element_namespaceObject.useEffect)(() => { 12160 if (mounted.current) { 12161 return effect(); 12162 } 12163 mounted.current = true; 12164 return undefined; 12165 // Disable reasons: 12166 // 1. This hook needs to pass a dep list that isn't an array literal 12167 // 2. `effect` is missing from the array, and will need to be added carefully to avoid additional warnings 12168 // see https://github.com/WordPress/gutenberg/pull/41166 12169 // eslint-disable-next-line react-hooks/exhaustive-deps 12170 }, deps); 12171} 12172/* harmony default export */ const use_update_effect = (use_update_effect_useUpdateEffect); 12173 12174;// CONCATENATED MODULE: ./packages/components/build-module/ui/context/context-system-provider.js 12175 12176/** 12177 * External dependencies 12178 */ 12179 12180 12181 12182 12183/** 12184 * WordPress dependencies 12185 */ 12186 12187 12188 12189/** 12190 * Internal dependencies 12191 */ 12192 12193const ComponentsContext = (0,external_wp_element_namespaceObject.createContext)( /** @type {Record<string, any>} */{}); 12194const useComponentsContext = () => (0,external_wp_element_namespaceObject.useContext)(ComponentsContext); 12195 12196/** 12197 * Consolidates incoming ContextSystem values with a (potential) parent ContextSystem value. 12198 *
12199 * Note: This function will warn if it detects an un-memoized `value` 12200 * 12201 * @param {Object} props 12202 * @param {Record<string, any>} props.value 12203 * @return {Record<string, any>} The consolidated value. 12204 */ 12205function useContextSystemBridge({ 12206 value 12207}) { 12208 const parentContext = useComponentsContext(); 12209 const valueRef = (0,external_wp_element_namespaceObject.useRef)(value); 12210 use_update_effect(() => { 12211 if ( 12212 // Objects are equivalent. 12213 es6_default()(valueRef.current, value) && 12214 // But not the same reference. 12215 valueRef.current !== value) { 12216 false ? 0 : void 0; 12217 } 12218 }, [value]); 12219 12220 // `parentContext` will always be memoized (i.e., the result of this hook itself) 12221 // or the default value from when the `ComponentsContext` was originally 12222 // initialized (which will never change, it's a static variable) 12223 // so this memoization will prevent `deepmerge()` from rerunning unless 12224 // the references to `value` change OR the `parentContext` has an actual material change 12225 // (because again, it's guaranteed to be memoized or a static reference to the empty object 12226 // so we know that the only changes for `parentContext` are material ones... i.e., why we 12227 // don't have to warn in the `useUpdateEffect` hook above for `parentContext` and we only 12228 // need to bother with the `value`). The `useUpdateEffect` above will ensure that we are 12229 // correctly warning when the `value` isn't being properly memoized. All of that to say 12230 // that this should be super safe to assume that `useMemo` will only run on actual 12231 // changes to the two dependencies, therefore saving us calls to `deepmerge()`! 12232 const config = (0,external_wp_element_namespaceObject.useMemo)(() => { 12233 // Deep clone `parentContext` to avoid mutating it later. 12234 return cjs_default()(parentContext !== null && parentContext !== void 0 ? parentContext : {}, value !== null && value !== void 0 ? value : {}, { 12235 isMergeableObject: is_plain_object_isPlainObject 12236 }); 12237 }, [parentContext, value]); 12238 return config; 12239} 12240 12241/** 12242 * A Provider component that can modify props for connected components within 12243 * the Context system. 12244 * 12245 * @example 12246 * ```jsx 12247 * <ContextSystemProvider value={{ Button: { size: 'small' }}}> 12248 * <Button>...</Button> 12249 * </ContextSystemProvider> 12250 * ``` 12251 * 12252 * @template {Record<string, any>} T 12253 * @param {Object} options 12254 * @param {import('react').ReactNode} options.children Children to render. 12255 * @param {T} options.value Props to render into connected components. 12256 * @return {JSX.Element} A Provider wrapped component. 12257 */ 12258const BaseContextSystemProvider = ({ 12259 children, 12260 value 12261}) => { 12262 const contextValue = useContextSystemBridge({ 12263 value 12264 }); 12265 return (0,external_wp_element_namespaceObject.createElement)(ComponentsContext.Provider, { 12266 value: contextValue 12267 }, children); 12268}; 12269const ContextSystemProvider = (0,external_wp_element_namespaceObject.memo)(BaseContextSystemProvider); 12270 12271;// CONCATENATED MODULE: ./packages/components/build-module/ui/context/constants.js 12272const COMPONENT_NAMESPACE = 'data-wp-component'; 12273const CONNECTED_NAMESPACE = 'data-wp-c16t'; 12274 12275/** 12276 * Special key where the connected namespaces are stored. 12277 * This is attached to Context connected components as a static property. 12278 */ 12279const CONNECT_STATIC_NAMESPACE = '__contextSystemKey__'; 12280 12281;// CONCATENATED MODULE: ./packages/components/build-module/ui/context/utils.js 12282/** 12283 * Internal dependencies 12284 */ 12285 12286 12287/** 12288 * Creates a dedicated context namespace HTML attribute for components. 12289 * ns is short for "namespace" 12290 * 12291 * @example 12292 * ```jsx 12293 * <div {...ns('Container')} /> 12294 * ``` 12295 * 12296 * @param {string} componentName The name for the component. 12297 * @return {Record<string, any>} A props object with the namespaced HTML attribute. 12298 */ 12299function getNamespace(componentName) { 12300 return { 12301 [COMPONENT_NAMESPACE]: componentName 12302 }; 12303} 12304 12305/** 12306 * Creates a dedicated connected context namespace HTML attribute for components. 12307 * ns is short for "namespace" 12308 * 12309 * @example 12310 * ```jsx 12311 * <div {...cns()} /> 12312 * ``` 12313 * 12314 * @return {Record<string, any>} A props object with the namespaced HTML attribute. 12315 */ 12316function getConnectedNamespace() { 12317 return { 12318 [CONNECTED_NAMESPACE]: true 12319 }; 12320} 12321 12322;// CONCATENATED MODULE: .
vendor: 14,781 bytes, lines 12322-12638
12322/node_modules/tslib/tslib.es6.mjs 12323/****************************************************************************** 12324Copyright (c) Microsoft Corporation. 12325 12326Permission to use, copy, modify, and/or distribute this software for any 12327purpose with or without fee is hereby granted. 12328 12329THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH 12330REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY 12331AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, 12332INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM 12333LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR 12334OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR 12335PERFORMANCE OF THIS SOFTWARE. 12336***************************************************************************** */ 12337/* global Reflect, Promise, SuppressedError, Symbol */ 12338 12339var extendStatics = function(d, b) { 12340 extendStatics = Object.setPrototypeOf || 12341 ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) || 12342 function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; }; 12343 return extendStatics(d, b); 12344}; 12345 12346function __extends(d, b) { 12347 if (typeof b !== "function" && b !== null) 12348 throw new TypeError("Class extends value " + String(b) + " is not a constructor or null"); 12349 extendStatics(d, b); 12350 function __() { this.constructor = d; } 12351 d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); 12352} 12353 12354var __assign = function() { 12355 __assign = Object.assign || function __assign(t) { 12356 for (var s, i = 1, n = arguments.length; i < n; i++) { 12357 s = arguments[i]; 12358 for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p]; 12359 } 12360 return t; 12361 } 12362 return __assign.apply(this, arguments); 12363} 12364 12365function __rest(s, e) { 12366 var t = {}; 12367 for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) 12368 t[p] = s[p]; 12369 if (s != null && typeof Object.getOwnPropertySymbols === "function") 12370 for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) { 12371 if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) 12372 t[p[i]] = s[p[i]]; 12373 } 12374 return t; 12375} 12376 12377function __decorate(decorators, target, key, desc) { 12378 var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; 12379 if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); 12380 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; 12381 return c > 3 && r && Object.defineProperty(target, key, r), r; 12382} 12383 12384function __param(paramIndex, decorator) { 12385 return function (target, key) { decorator(target, key, paramIndex); } 12386} 12387 12388function __esDecorate(ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) { 12389 function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; } 12390 var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value"; 12391 var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null; 12392 var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {}); 12393 var _, done = false; 12394 for (var i = decorators.length - 1; i >= 0; i--) { 12395 var context = {}; 12396 for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p]; 12397 for (var p in contextIn.access) context.access[p] = contextIn.access[p]; 12398 context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); }; 12399 var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context); 12400 if (kind === "accessor") { 12401 if (result === void 0) continue; 12402 if (result === null || typeof result !== "object") throw new TypeError("Object expected"); 12403 if (_ = accept(result.get)) descriptor.get = _; 12404 if (_ = accept(result.set)) descriptor.set = _; 12405 if (_ = accept(result.init)) initializers.unshift(_); 12406 } 12407 else if (_ = accept(result)) { 12408 if (kind === "field") initializers.unshift(_); 12409 else descriptor[key] = _; 12410 } 12411 } 12412 if (target) Object.defineProperty(target, contextIn.name, descriptor); 12413 done = true; 12414}; 12415 12416function __runInitializers(thisArg, initializers, value) { 12417 var useValue = arguments.length > 2; 12418 for (var i = 0; i < initializers.length; i++) { 12419 value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg); 12420 } 12421 return useValue ? value : void 0; 12422}; 12423 12424function __propKey(x) { 12425 return typeof x === "symbol" ? x : "".concat(x); 12426}; 12427 12428function __setFunctionName(f, name, prefix) { 12429 if (typeof name === "symbol") name = name.description ? "[".concat(name.description, "]") : ""; 12430 return Object.defineProperty(f, "name", { configurable: true, value: prefix ? "".concat(prefix, " ", name) : name }); 12431}; 12432 12433function __metadata(metadataKey, metadataValue) { 12434 if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(metadataKey, metadataValue); 12435} 12436 12437function __awaiter(thisArg, _arguments, P, generator) { 12438 function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); } 12439 return new (P || (P = Promise))(function (resolve, reject) { 12440 function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } } 12441 function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } } 12442 function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); } 12443 step((generator = generator.apply(thisArg, _arguments || [])).next()); 12444 }); 12445} 12446 12447function __generator(thisArg, body) { 12448 var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g; 12449 return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g; 12450 function verb(n) { return function (v) { return step([n, v]); }; } 12451 function step(op) { 12452 if (f) throw new TypeError("Generator is already executing."); 12453 while (g && (g = 0, op[0] && (_ = 0)), _) try { 12454 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; 12455 if (y = 0, t) op = [op[0] & 2, t.value]; 12456 switch (op[0]) { 12457 case 0: case 1: t = op; break; 12458 case 4: _.label++; return { value: op[1], done: false }; 12459 case 5: _.label++; y = op[1]; op = [0]; continue; 12460 case 7: op = _.ops.pop(); _.trys.pop(); continue; 12461 default: 12462 if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; } 12463 if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; } 12464 if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; } 12465 if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; } 12466 if (t[2]) _.ops.pop(); 12467 _.trys.pop(); continue; 12468 } 12469 op = body.call(thisArg, _); 12470 } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; } 12471 if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true }; 12472 } 12473} 12474 12475var __createBinding = Object.create ? (function(o, m, k, k2) { 12476 if (k2 === undefined) k2 = k; 12477 var desc = Object.getOwnPropertyDescriptor(m, k); 12478 if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) { 12479 desc = { enumerable: true, get: function() { return m[k]; } }; 12480 } 12481 Object.defineProperty(o, k2, desc); 12482}) : (function(o, m, k, k2) { 12483 if (k2 === undefined) k2 = k; 12484 o[k2] = m[k]; 12485}); 12486 12487function __exportStar(m, o) { 12488 for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(o, p)) __createBinding(o, m, p); 12489} 12490 12491function __values(o) { 12492 var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0; 12493 if (m) return m.call(o); 12494 if (o && typeof o.length === "number") return { 12495 next: function () { 12496 if (o && i >= o.length) o = void 0; 12497 return { value: o && o[i++], done: !o }; 12498 } 12499 }; 12500 throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined."); 12501} 12502 12503function __read(o, n) { 12504 var m = typeof Symbol === "function" && o[Symbol.iterator]; 12505 if (!m) return o; 12506 var i = m.call(o), r, ar = [], e; 12507 try { 12508 while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value); 12509 } 12510 catch (error) { e = { error: error }; } 12511 finally { 12512 try { 12513 if (r && !r.done && (m = i["return"])) m.call(i); 12514 } 12515 finally { if (e) throw e.error; } 12516 } 12517 return ar; 12518} 12519 12520/** @deprecated */ 12521function __spread() { 12522 for (var ar = [], i = 0; i < arguments.length; i++) 12523 ar = ar.concat(__read(arguments[i])); 12524 return ar; 12525} 12526 12527/** @deprecated */ 12528function __spreadArrays() { 12529 for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length; 12530 for (var r = Array(s), k = 0, i = 0; i < il; i++) 12531 for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++) 12532 r[k] = a[j]; 12533 return r; 12534} 12535 12536function __spreadArray(to, from, pack) { 12537 if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) { 12538 if (ar || !(i in from)) { 12539 if (!ar) ar = Array.prototype.slice.call(from, 0, i); 12540 ar[i] = from[i]; 12541 } 12542 } 12543 return to.concat(ar || Array.prototype.slice.call(from)); 12544} 12545 12546function __await(v) { 12547 return this instanceof __await ? (this.v = v, this) : new __await(v); 12548} 12549 12550function __asyncGenerator(thisArg, _arguments, generator) { 12551 if (!Symbol.asyncIterator) throw new TypeError("Symbol.asyncIterator is not defined."); 12552 var g = generator.apply(thisArg, _arguments || []), i, q = []; 12553 return i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i; 12554 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); }); }; } 12555 function resume(n, v) { try { step(g[n](v)); } catch (e) { settle(q[0][3], e); } } 12556 function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); } 12557 function fulfill(value) { resume("next", value); } 12558 function reject(value) { resume("throw", value); } 12559 function settle(f, v) { if (f(v), q.shift(), q.length) resume(q[0][0], q[0][1]); } 12560} 12561 12562function __asyncDelegator(o) { 12563 var i, p; 12564 return i = {}, verb("next"), verb("throw", function (e) { throw e; }), verb("return"), i[Symbol.iterator] = function () { return this; }, i; 12565 function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: false } : f ? f(v) : v; } : f; } 12566} 12567 12568function __asyncValues(o) { 12569 if (!Symbol.asyncIterator) throw new TypeError("Symbol.asyncIterator is not defined."); 12570 var m = o[Symbol.asyncIterator], i; 12571 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); 12572 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); }); }; } 12573 function settle(resolve, reject, d, v) { Promise.resolve(v).then(function(v) { resolve({ value: v, done: d }); }, reject); } 12574} 12575 12576function __makeTemplateObject(cooked, raw) { 12577 if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; } 12578 return cooked; 12579}; 12580 12581var __setModuleDefault = Object.create ? (function(o, v) { 12582 Object.defineProperty(o, "default", { enumerable: true, value: v }); 12583}) : function(o, v) { 12584 o["default"] = v; 12585}; 12586 12587function __importStar(mod) { 12588 if (mod && mod.__esModule) return mod; 12589 var result = {}; 12590 if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k); 12591 __setModuleDefault(result, mod); 12592 return result; 12593} 12594 12595function __importDefault(mod) { 12596 return (mod && mod.__esModule) ? mod : { default: mod }; 12597} 12598 12599function __classPrivateFieldGet(receiver, state, kind, f) { 12600 if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter"); 12601 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"); 12602 return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver); 12603} 12604 12605function __classPrivateFieldSet(receiver, state, value, kind, f) { 12606 if (kind === "m") throw new TypeError("Private method is not writable"); 12607 if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter"); 12608 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"); 12609 return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value; 12610} 12611 12612function __classPrivateFieldIn(state, receiver) { 12613 if (receiver === null || (typeof receiver !== "object" && typeof receiver !== "function")) throw new TypeError("Cannot use 'in' operator on non-object"); 12614 return typeof state === "function" ? receiver === state : state.has(receiver); 12615} 12616 12617function __addDisposableResource(env, value, async) { 12618 if (value !== null && value !== void 0) { 12619 if (typeof value !== "object" && typeof value !== "function") throw new TypeError("Object expected."); 12620 var dispose; 12621 if (async) { 12622 if (!Symbol.asyncDispose) throw new TypeError("Symbol.asyncDispose is not defined."); 12623 dispose = value[Symbol.asyncDispose]; 12624 } 12625 if (dispose === void 0) { 12626 if (!Symbol.dispose) throw new TypeError("Symbol.dispose is not defined."); 12627 dispose = value[Symbol.dispose]; 12628 } 12629 if (typeof dispose !== "function") throw new TypeError("Object not disposable."); 12630 env.stack.push({ value: value, dispose: dispose, async: async }); 12631 } 12632 else if (async) { 12633 env.stack.push({ async: true }); 12634 } 12635 return value; 12636} 12637 12638var _SuppressedError =
vendor: 1,130 bytes, lines 12638-12683
12638typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) { 12639 var e = new Error(message); 12640 return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e; 12641}; 12642 12643function __disposeResources(env) { 12644 function fail(e) { 12645 env.error = env.hasError ? new _SuppressedError(e, env.error, "An error was suppressed during disposal.") : e; 12646 env.hasError = true; 12647 } 12648 function next() { 12649 while (env.stack.length) { 12650 var rec = env.stack.pop(); 12651 try { 12652 var result = rec.dispose && rec.dispose.call(rec.value); 12653 if (rec.async) return Promise.resolve(result).then(next, function(e) { fail(e); return next(); }); 12654 } 12655 catch (e) { 12656 fail(e); 12657 } 12658 } 12659 if (env.hasError) throw env.error; 12660 } 12661 return next(); 12662} 12663 12664/* harmony default export */ const tslib_es6 = ({ 12665 __extends, 12666 __assign, 12667 __rest, 12668 __decorate, 12669 __param, 12670 __metadata, 12671 __awaiter, 12672 __generator, 12673 __createBinding, 12674 __exportStar, 12675 __values, 12676 __read, 12677 __spread, 12678 __spreadArrays, 12679 __spreadArray, 12680 __await, 12681 __asyncGenerator, 12682 __asyncDelegator, 12683 __asyncValues,
12684 __makeTemplateObject, 12685 __importStar, 12686 __importDefault, 12687 __classPrivateFieldGet, 12688 __classPrivateFieldSet, 12689 __classPrivateFieldIn, 12690 __addDisposableResource, 12691 __disposeResources, 12692}); 12693 12694;// CONCATENATED MODULE: ./node_modules/lower-case/dist.es2015/index.js 12695/** 12696 * Source: ftp://ftp.unicode.org/Public/UCD/latest/ucd/SpecialCasing.txt 12697 */ 12698var SUPPORTED_LOCALE = { 12699 tr: { 12700 regexp: /\u0130|\u0049|\u0049\u0307/g, 12701 map: { 12702 İ: "\u0069", 12703 I: "\u0131", 12704 IÌ: "\u0069", 12705 }, 12706 }, 12707 az: { 12708 regexp: /\u0130/g, 12709 map: { 12710 İ: "\u0069", 12711 I: "\u0131", 12712 IÌ: "\u0069", 12713 }, 12714 }, 12715 lt: { 12716 regexp: /\u0049|\u004A|\u012E|\u00CC|\u00CD|\u0128/g, 12717 map: { 12718 I: "\u0069\u0307", 12719 J: "\u006A\u0307", 12720 Ä®: "\u012F\u0307", 12721 Ã: "\u0069\u0307\u0300", 12722 Ã: "\u0069\u0307\u0301", 12723 Ĩ: "\u0069\u0307\u0303", 12724 }, 12725 }, 12726}; 12727/** 12728 * Localized lower case. 12729 */ 12730function localeLowerCase(str, locale) {
12731 var lang = SUPPORTED_LOCALE[locale.toLowerCase()]; 12732 if (lang) 12733 return lowerCase(str.replace(lang.regexp, function (m) { return lang.map[m]; })); 12734 return lowerCase(str); 12735} 12736/** 12737 * Lower case as a function. 12738 */ 12739function lowerCase(str) { 12740 return str.toLowerCase(); 12741} 12742 12743;// CONCATENATED MODULE: ./node_modules/no-case/dist.es2015/index.js 12744 12745// Support camel case ("camelCase" -> "camel Case" and "CAMELCase" -> "CAMEL Case"). 12746var DEFAULT_SPLIT_REGEXP = [/([a-z0-9])([A-Z])/g, /([A-Z])([A-Z][a-z])/g]; 12747// Remove all non-word characters. 12748var DEFAULT_STRIP_REGEXP = /[^A-Z0-9]+/gi; 12749/** 12750 * Normalize the string into something other libraries can manipulate easier. 12751 */ 12752function noCase(input, options) { 12753 if (options === void 0) { options = {}; } 12754 var _a = options.splitRegexp, splitRegexp = _a === void 0 ? DEFAULT_SPLIT_REGEXP : _a, _b = options.stripRegexp, stripRegexp = _b === void 0 ? DEFAULT_STRIP_REGEXP : _b, _c = options.transform, transform = _c === void 0 ? lowerCase : _c, _d = options.delimiter, delimiter = _d === void 0 ? " " : _d; 12755 var result = replace(replace(input, splitRegexp, "$1\0$2"), stripRegexp, "\0"); 12756 var start = 0; 12757 var end = result.length; 12758 // Trim the delimiter from around the output string. 12759 while (result.charAt(start) === "\0") 12760 start++; 12761 while (result.charAt(end - 1) === "\0") 12762 end--; 12763 // Transform each token independently. 12764 return result.slice(start, end).split("\0").map(transform).join(delimiter); 12765} 12766/** 12767 * Replace `re` in the input string with the replacement value. 12768 */ 12769function replace(input, re, value) { 12770 if (re instanceof RegExp) 12771 return input.replace(re, value); 12772 return re.reduce(function (input, re) { return input.replace(re, value); }, input); 12773} 12774 12775;// CONCATENATED MODULE: ./node_modules/dot-case/dist.es2015/index.js 12776 12777 12778function dotCase(input, options) { 12779 if (options === void 0) { options = {}; } 12780 return noCase(input, __assign({ delimiter: "." }, options)); 12781} 12782 12783;// CONCATENATED MODULE: ./node_modules/param-case/dist.es2015/index.js 12784 12785 12786function paramCase(input, options) { 12787 if (options === void 0) { options = {}; } 12788 return dotCase(input, __assign({ delimiter: "-" }, options)); 12789} 12790 12791;// CONCATENATED MODULE: ./node_modules/memize/dist/index.js 12792/** 12793 * Memize options object. 12794 * 12795 * @typedef MemizeOptions 12796 * 12797 * @property {number} [maxSize] Maximum size of the cache. 12798 */ 12799 12800/** 12801 * Internal cache entry. 12802 * 12803 * @typedef MemizeCacheNode 12804 * 12805 * @property {?MemizeCacheNode|undefined} [prev] Previous node. 12806 * @property {?MemizeCacheNode|undefined} [next] Next node. 12807 * @property {Array<*>} args Function arguments for cache 12808 * entry. 12809 * @property {*} val Function result. 12810 */ 12811 12812/** 12813 * Properties of the enhanced function for controlling cache. 12814 * 12815 * @typedef MemizeMemoizedFunction 12816 * 12817 * @property {()=>void} clear Clear the cache. 12818 */ 12819 12820/** 12821 * Accepts a function to be memoized, and returns a new memoized function, with 12822 * optional options. 12823 * 12824 * @template {(...args: any[]) => any} F 12825 * 12826 * @param {F} fn Function to memoize. 12827 * @param {MemizeOptions} [options] Options object. 12828 * 12829 * @return {((...args: Parameters<F>) => ReturnType<F>) & MemizeMemoizedFunction} Memoized function. 12830 */ 12831function memize(fn, options) { 12832 var size = 0; 12833 12834 /** @type {?MemizeCacheNode|undefined} */ 12835 var head; 12836 12837 /** @type {?MemizeCacheNode|undefined} */ 12838 var tail; 12839 12840 options = options || {}; 12841 12842 function memoized(/* ...args */) { 12843 var node = head, 12844 len = arguments.length, 12845 args, 12846 i; 12847 12848 searchCache: while (node) { 12849 // Perform a shallow equality test to confirm that whether the node 12850 // under test is a candidate for the arguments passed. Two arrays 12851 // are shallowly equal if their length matches and each entry is 12852 // strictly equal between the two sets. Avoid abstracting to a 12853 // function which could incur an arguments leaking deoptimization. 12854 12855 // Check whether node arguments match arguments length 12856 if (node.args.length !== arguments.length) { 12857 node = node.next; 12858 continue; 12859 } 12860 12861 // Check whether node arguments match arguments values 12862 for (i = 0; i < len; i++) { 12863 if (node.args[i] !== arguments[i]) { 12864 node = node.next; 12865 continue searchCache; 12866 } 12867 } 12868 12869 // At this point we can assume we've found a match 12870 12871 // Surface matched node to head if not already 12872 if (node !== head) { 12873 // As tail, shift to previous. Must only shift if not also 12874 // head, since if both head and tail, there is no previous. 12875 if (node === tail) { 12876 tail = node.prev; 12877 } 12878 12879 // Adjust siblings to point to each other. If node was tail, 12880 // this also handles new tail's empty `next` assignment. 12881 /** @type {MemizeCacheNode} */ (node.prev).next = node.next; 12882 if (node.next) { 12883 node.next.prev = node.prev; 12884 } 12885 12886 node.next = head; 12887 node.prev = null; 12888 /** @type {MemizeCacheNode} */ (head).prev = node; 12889 head = node; 12890 } 12891 12892 // Return immediately 12893 return node.val; 12894 } 12895 12896 // No cached value found. Continue to insertion phase: 12897 12898 // Create a copy of arguments (avoid leaking deoptimization) 12899 args = new Array(len); 12900 for (i = 0; i < len; i++) { 12901 args[i] = arguments[i]; 12902 } 12903 12904 node = { 12905 args: args, 12906 12907 // Generate the result from original function
12908 val: fn.apply(null, args), 12909 }; 12910 12911 // Don't need to check whether node is already head, since it would 12912 // have been returned above already if it was 12913 12914 // Shift existing head down list 12915 if (head) { 12916 head.prev = node; 12917 node.next = head; 12918 } else { 12919 // If no head, follows that there's no tail (at initial or reset) 12920 tail = node; 12921 } 12922 12923 // Trim tail if we're reached max size and are pending cache insertion 12924 if (size === /** @type {MemizeOptions} */ (options).maxSize) { 12925 tail = /** @type {MemizeCacheNode} */ (tail).prev; 12926 /** @type {MemizeCacheNode} */ (tail).next = null; 12927 } else { 12928 size++; 12929 } 12930 12931 head = node; 12932 12933 return node.val; 12934 } 12935 12936 memoized.clear = function () { 12937 head = null; 12938 tail = null; 12939 size = 0; 12940 }; 12941 12942 // Ignore reason: There's not a clear solution to create an intersection of 12943 // the function with additional properties, where the goal is to retain the 12944 // function signature of the incoming argument and add control properties 12945 // on the return value. 12946 12947 // @ts-ignore 12948 return memoized; 12949} 12950 12951 12952 12953;// CONCATENATED MODULE: ./packages/components/build-module/ui/context/get-styled-class-name-from-key.js 12954/** 12955 * External dependencies 12956 */ 12957 12958 12959 12960/** 12961 * Generates the connected component CSS className based on the namespace. 12962 * 12963 * @param namespace The name of the connected component. 12964 * @return The generated CSS className. 12965 */ 12966function getStyledClassName(namespace) { 12967 const kebab = paramCase(namespace); 12968 return `components-${kebab}`; 12969} 12970const getStyledClassNameFromKey = memize(getStyledClassName); 12971 12972;// CONCATENATED MODULE: ./node_modules/@emotion/sheet/dist/emotion-sheet.browser.esm.js 12973/* 12974 12975Based off glamor's StyleSheet, thanks Sunil â¤ï¸ 12976 12977high performance StyleSheet for css-in-js systems 12978 12979- uses multiple style tags behind the scenes for millions of rules 12980- uses `insertRule` for appending in production for *much* faster performance 12981 12982// usage 12983 12984import { StyleSheet } from '@emotion/sheet' 12985 12986let styleSheet = new StyleSheet({ key: '', container: document.head }) 12987 12988styleSheet.insert('#box { border: 1px solid red; }') 12989- appends a css rule into the stylesheet 12990 12991styleSheet.flush() 12992- empties the stylesheet of all its contents 12993 12994*/ 12995// $FlowFixMe 12996function sheetForTag(tag) { 12997 if (tag.sheet) { 12998 // $FlowFixMe 12999 return tag.sheet; 13000 } // this weirdness brought to you by firefox 13001 13002 /* istanbul ignore next */ 13003 13004 13005 for (var i = 0; i < document.styleSheets.length; i++) { 13006 if (document.styleSheets[i].ownerNode === tag) { 13007 // $FlowFixMe 13008 return document.styleSheets[i]; 13009 } 13010 } 13011} 13012 13013function createStyleElement(options) { 13014 var tag = document.createElement('style'); 13015 tag.setAttribute('data-emotion', options.key); 13016 13017 if (options.nonce !== undefined) { 13018 tag.setAttribute('nonce', options.nonce); 13019 } 13020 13021 tag.appendChild(document.createTextNode('')); 13022 tag.setAttribute('data-s', ''); 13023 return tag; 13024} 13025 13026var emotion_sheet_browser_esm_StyleSheet = /*#__PURE__*/function () { 13027 function StyleSheet(options) { 13028 var _this = this; 13029 13030 this._insertTag = function (tag) { 13031 var before; 13032 13033 if (_this.tags.length === 0) { 13034 if (_this.insertionPoint) { 13035 before = _this.insertionPoint.nextSibling; 13036 } else if (_this.prepend) { 13037 before = _this.container.firstChild; 13038 } else { 13039 before = _this.before; 13040 } 13041 } else { 13042 before = _this.tags[_this.tags.length - 1].nextSibling; 13043 } 13044 13045 _this.container.insertBefore(tag, before); 13046 13047 _this.tags.push(tag); 13048 }; 13049 13050 this.isSpeedy = options.speedy === undefined ? "production" === 'production' : options.speedy; 13051 this.tags = []; 13052 this.ctr = 0; 13053 this.nonce = options.nonce; // key is the value of the data-emotion attribute, it's used to identify different sheets 13054 13055 this.key = options.key; 13056 this.container = options.container; 13057 this.prepend = options.prepend; 13058 this.insertionPoint = options.insertionPoint; 13059 this.before = null; 13060 } 13061 13062 var _proto = StyleSheet.prototype; 13063 13064 _proto.hydrate = function hydrate(nodes) { 13065 nodes.forEach(this._insertTag); 13066 }; 13067 13068 _proto.insert = function insert(rule) { 13069 // the max length is how many rules we have per style tag, it's 65000 in speedy mode 13070 // it's 1 in dev because we insert source maps that map a single rule to a location 13071 // and you can only have one source map per style tag 13072 if (this.ctr % (this.isSpeedy ? 65000 : 1) === 0) { 13073 this._insertTag(createStyleElement(this)); 13074 } 13075 13076 var tag = this.tags[this.tags.length - 1]; 13077 13078 if (false) { var isImportRule; } 13079 13080 if (this.isSpeedy) { 13081 var sheet = sheetForTag(tag); 13082
13083 try { 13084 // this is the ultrafast version, works across browsers 13085 // the big drawback is that the css won't be editable in devtools 13086 sheet.insertRule(rule, sheet.cssRules.length); 13087 } catch (e) { 13088 if (false) {} 13089 } 13090 } else { 13091 tag.appendChild(document.createTextNode(rule)); 13092 } 13093 13094 this.ctr++; 13095 }; 13096 13097 _proto.flush = function flush() { 13098 // $FlowFixMe 13099 this.tags.forEach(function (tag) { 13100 return tag.parentNode && tag.parentNode.removeChild(tag); 13101 }); 13102 this.tags = []; 13103 this.ctr = 0; 13104 13105 if (false) {} 13106 }; 13107 13108 return StyleSheet; 13109}(); 13110 13111 13112 13113;// CONCATENATED MODULE: ./node_modules/stylis/src/Utility.js 13114/** 13115 * @param {number} 13116 * @return {number} 13117 */ 13118var abs = Math.abs 13119 13120/** 13121 * @param {number} 13122 * @return {string} 13123 */ 13124var Utility_from = String.fromCharCode 13125 13126/** 13127 * @param {object} 13128 * @return {object} 13129 */ 13130var Utility_assign = Object.assign 13131 13132/** 13133 * @param {string} value 13134 * @param {number} length 13135 * @return {number} 13136 */ 13137function hash (value, length) { 13138 return (((((((length << 2) ^ Utility_charat(value, 0)) << 2) ^ Utility_charat(value, 1)) << 2) ^ Utility_charat(value, 2)) << 2) ^ Utility_charat(value, 3) 13139} 13140 13141/** 13142 * @param {string} value 13143 * @return {string} 13144 */ 13145function trim (value) { 13146 return value.trim() 13147} 13148 13149/** 13150 * @param {string} value 13151 * @param {RegExp} pattern 13152 * @return {string?} 13153 */ 13154function match (value, pattern) { 13155 return (value = pattern.exec(value)) ? value[0] : value 13156} 13157 13158/** 13159 * @param {string} value 13160 * @param {(string|RegExp)} pattern 13161 * @param {string} replacement 13162 * @return {string} 13163 */ 13164function Utility_replace (value, pattern, replacement) { 13165 return value.replace(pattern, replacement) 13166} 13167 13168/** 13169 * @param {string} value 13170 * @param {string} search 13171 * @return {number} 13172 */ 13173function indexof (value, search) { 13174 return value.indexOf(search) 13175} 13176 13177/** 13178 * @param {string} value 13179 * @param {number} index 13180 * @return {number} 13181 */ 13182function Utility_charat (value, index) { 13183 return value.charCodeAt(index) | 0 13184} 13185 13186/** 13187 * @param {string} value 13188 * @param {number} begin 13189 * @param {number} end 13190 * @return {string} 13191 */ 13192function Utility_substr (value, begin, end) { 13193 return value.slice(begin, end) 13194} 13195 13196/** 13197 * @param {string} value 13198 * @return {number} 13199 */ 13200function Utility_strlen (value) { 13201 return value.length 13202} 13203 13204/** 13205 * @param {any[]} value 13206 * @return {number} 13207 */ 13208function Utility_sizeof (value) { 13209 return value.length 13210} 13211 13212/** 13213 * @param {any} value 13214 * @param {any[]} array 13215 * @return {any} 13216 */ 13217function Utility_append (value, array) { 13218 return array.push(value), value 13219} 13220 13221/** 13222 * @param {string[]} array 13223 * @param {function} callback 13224 * @return {string} 13225 */ 13226function Utility_combine (array, callback) { 13227 return array.map(callback).join('') 13228} 13229 13230;// CONCATENATED MODULE: ./node_modules/stylis/src/Tokenizer.js 13231 13232 13233var line = 1 13234var column = 1 13235var Tokenizer_length = 0 13236var position = 0 13237var character = 0 13238var characters = '' 13239 13240/** 13241 * @param {string} value 13242 * @param {object | null} root 13243 * @param {object | null} parent 13244 * @param {string} type 13245 * @param {string[] | string} props 13246 * @param {object[] | string} children 13247 * @param {number} length 13248 */ 13249function node (value, root, parent, type, props, children, length) { 13250 return {value: value, root: root, parent: parent, type: type, props: props, children: children, line: line, column: column, length: length, return: ''} 13251} 13252 13253/** 13254 * @param {object} root 13255 * @param {object} props 13256 * @return {object} 13257 */ 13258function copy (root, props) { 13259 return Utility_assign(node('', null, null, '', null, null, 0), root, {length: -root.length}, props) 13260} 13261 13262/** 13263 * @return {number} 13264 */ 13265function Tokenizer_char () { 13266 return character 13267} 13268 13269/** 13270 * @return {number} 13271 */ 13272function prev () { 13273 character = position > 0 ? Utility_charat(characters, --position) : 0 13274 13275 if (column--, character === 10) 13276 column = 1, line-- 13277 13278 return character 13279} 13280 13281/** 13282 * @return {number} 13283 */ 13284function next () { 13285 character = position < Tokenizer_length ? Utility_charat(characters, position++) : 0 13286 13287 if (column++, character === 10) 13288 column = 1, line++ 13289 13290 return character 13291} 13292 13293/** 13294 * @return {number} 13295 */ 13296function peek () { 13297 return Utility_charat(characters, position) 13298} 13299 13300/** 13301 * @return {number} 13302 */ 13303function caret () { 13304 return position 13305} 13306 13307/** 13308 * @param {number} begin 13309 * @param {number} end 13310 * @return {string} 13311 */ 13312function slice (begin, end) { 13313 return Utility_substr(characters, begin, end) 13314} 13315 13316/** 13317 * @param {number} type 13318 * @return {number} 13319 */ 13320function token (type) { 13321 switch (type) { 13322 // \0 \t \n \r \s whitespace token 13323 case 0: case 9: case 10: case 13: case 32: 13324 return 5 13325 // ! + , / > @ ~ isolate token 13326 case 33: case 43: case 44: case 47: case 62: case 64: case 126: 13327 // ; { } breakpoint token 13328 case 59: case 123: case 125: 13329 return 4 13330 // : accompanied token 13331 case 58: 13332 return 3 13333 // " ' ( [ opening delimit token 13334 case 34: case 39: case 40: case 91: 13335 return 2 13336 // ) ] closing delimit token 13337 case 41: case 93: 13338 return 1 13339 } 13340 13341 return 0 13342} 13343 13344/** 13345 * @param {string} value 13346 * @return {any[]} 13347 */ 13348function alloc (value) { 13349 return line = column = 1, Tokenizer_length = Utility_strlen(characters = value), position = 0, [] 13350}
13350 13351 13352/** 13353 * @param {any} value 13354 * @return {any} 13355 */ 13356function dealloc (value) { 13357 return characters = '', value 13358} 13359 13360/** 13361 * @param {number} type 13362 * @return {string} 13363 */ 13364function delimit (type) { 13365 return trim(slice(position - 1, delimiter(type === 91 ? type + 2 : type === 40 ? type + 1 : type))) 13366} 13367 13368/** 13369 * @param {string} value 13370 * @return {string[]} 13371 */ 13372function Tokenizer_tokenize (value) { 13373 return dealloc(tokenizer(alloc(value))) 13374} 13375 13376/** 13377 * @param {number} type 13378 * @return {string} 13379 */ 13380function whitespace (type) { 13381 while (character = peek()) 13382 if (character < 33) 13383 next() 13384 else 13385 break 13386 13387 return token(type) > 2 || token(character) > 3 ? '' : ' ' 13388} 13389 13390/** 13391 * @param {string[]} children 13392 * @return {string[]} 13393 */ 13394function tokenizer (children) { 13395 while (next()) 13396 switch (token(character)) { 13397 case 0: append(identifier(position - 1), children) 13398 break 13399 case 2: append(delimit(character), children) 13400 break 13401 default: append(from(character), children) 13402 } 13403 13404 return children 13405} 13406 13407/** 13408 * @param {number} index 13409 * @param {number} count 13410 * @return {string} 13411 */ 13412function escaping (index, count) { 13413 while (--count && next()) 13414 // not 0-9 A-F a-f 13415 if (character < 48 || character > 102 || (character > 57 && character < 65) || (character > 70 && character < 97)) 13416 break 13417 13418 return slice(index, caret() + (count < 6 && peek() == 32 && next() == 32)) 13419} 13420 13421/** 13422 * @param {number} type 13423 * @return {number} 13424 */ 13425function delimiter (type) { 13426 while (next()) 13427 switch (character) { 13428 // ] ) " ' 13429 case type: 13430 return position 13431 // " ' 13432 case 34: case 39: 13433 if (type !== 34 && type !== 39) 13434 delimiter(character) 13435 break 13436 // ( 13437 case 40: 13438 if (type === 41) 13439 delimiter(type) 13440 break 13441 // \ 13442 case 92: 13443 next() 13444 break 13445 } 13446 13447 return position 13448} 13449 13450/** 13451 * @param {number} type 13452 * @param {number} index 13453 * @return {number} 13454 */ 13455function commenter (type, index) { 13456 while (next()) 13457 // // 13458 if (type + character === 47 + 10) 13459 break 13460 // /* 13461 else if (type + character === 42 + 42 && peek() === 47) 13462 break 13463 13464 return '/*' + slice(index, position - 1) + '*' + Utility_from(type === 47 ? type : next()) 13465} 13466 13467/** 13468 * @param {number} index 13469 * @return {string} 13470 */ 13471function identifier (index) { 13472 while (!token(peek())) 13473 next() 13474 13475 return slice(index, position) 13476} 13477 13478;// CONCATENATED MODULE: ./node_modules/stylis/src/Enum.js
vendor: 5,717 bytes, lines 13479-13633
13479var MS = '-ms-' 13480var MOZ = '-moz-' 13481var WEBKIT = '-webkit-' 13482 13483var COMMENT = 'comm' 13484var Enum_RULESET = 'rule' 13485var DECLARATION = 'decl' 13486 13487var PAGE = '@page' 13488var MEDIA = '@media' 13489var IMPORT = '@import' 13490var CHARSET = '@charset' 13491var VIEWPORT = '@viewport' 13492var SUPPORTS = '@supports' 13493var DOCUMENT = '@document' 13494var NAMESPACE = '@namespace' 13495var KEYFRAMES = '@keyframes' 13496var FONT_FACE = '@font-face' 13497var COUNTER_STYLE = '@counter-style' 13498var FONT_FEATURE_VALUES = '@font-feature-values' 13499 13500;// CONCATENATED MODULE: ./node_modules/stylis/src/Serializer.js 13501 13502 13503 13504/** 13505 * @param {object[]} children 13506 * @param {function} callback 13507 * @return {string} 13508 */ 13509function serialize (children, callback) { 13510 var output = '' 13511 var length = Utility_sizeof(children) 13512 13513 for (var i = 0; i < length; i++) 13514 output += callback(children[i], i, children, callback) || '' 13515 13516 return output 13517} 13518 13519/** 13520 * @param {object} element 13521 * @param {number} index 13522 * @param {object[]} children 13523 * @param {function} callback 13524 * @return {string} 13525 */ 13526function stringify (element, index, children, callback) { 13527 switch (element.type) { 13528 case IMPORT: case DECLARATION: return element.return = element.return || element.value 13529 case COMMENT: return '' 13530 case KEYFRAMES: return element.return = element.value + '{' + serialize(element.children, callback) + '}' 13531 case Enum_RULESET: element.value = element.props.join(',') 13532 } 13533 13534 return Utility_strlen(children = serialize(element.children, callback)) ? element.return = element.value + '{' + children + '}' : '' 13535} 13536 13537;// CONCATENATED MODULE: ./node_modules/stylis/src/Prefixer.js 13538 13539 13540 13541/** 13542 * @param {string} value 13543 * @param {number} length 13544 * @return {string} 13545 */ 13546function prefix (value, length) { 13547 switch (hash(value, length)) { 13548 // color-adjust 13549 case 5103: 13550 return WEBKIT + 'print-' + value + value 13551 // animation, animation-(delay|direction|duration|fill-mode|iteration-count|name|play-state|timing-function) 13552 case 5737: case 4201: case 3177: case 3433: case 1641: case 4457: case 2921: 13553 // text-decoration, filter, clip-path, backface-visibility, column, box-decoration-break 13554 case 5572: case 6356: case 5844: case 3191: case 6645: case 3005: 13555 // mask, mask-image, mask-(mode|clip|size), mask-(repeat|origin), mask-position, mask-composite, 13556 case 6391: case 5879: case 5623: case 6135: case 4599: case 4855: 13557 // background-clip, columns, column-(count|fill|gap|rule|rule-color|rule-style|rule-width|span|width) 13558 case 4215: case 6389: case 5109: case 5365: case 5621: case 3829: 13559 return WEBKIT + value + value 13560 // appearance, user-select, transform, hyphens, text-size-adjust 13561 case 5349: case 4246: case 4810: case 6968: case 2756: 13562 return WEBKIT + value + MOZ + value + MS + value + value 13563 // flex, flex-direction 13564 case 6828: case 4268: 13565 return WEBKIT + value + MS + value + value 13566 // order 13567 case 6165: 13568 return WEBKIT + value + MS + 'flex-' + value + value 13569 // align-items 13570 case 5187: 13571 return WEBKIT + value + Utility_replace(value, /(\w+).+(:[^]+)/, WEBKIT + 'box-$1$2' + MS + 'flex-$1$2') + value 13572 // align-self 13573 case 5443: 13574 return WEBKIT + value + MS + 'flex-item-' + Utility_replace(value, /flex-|-self/, '') + value 13575 // align-content 13576 case 4675: 13577 return WEBKIT + value + MS + 'flex-line-pack' + Utility_replace(value, /align-content|flex-|-self/, '') + value 13578 // flex-shrink 13579 case 5548: 13580 return WEBKIT + value + MS + Utility_replace(value, 'shrink', 'negative') + value 13581 // flex-basis 13582 case 5292: 13583 return WEBKIT + value + MS + Utility_replace(value, 'basis', 'preferred-size') + value 13584 // flex-grow 13585 case 6060: 13586 return WEBKIT + 'box-' + Utility_replace(value, '-grow', '') + WEBKIT + value + MS + Utility_replace(value, 'grow', 'positive') + value 13587 // transition 13588 case 4554: 13589 return WEBKIT + Utility_replace(value, /([^-])(transform)/g, '$1' + WEBKIT + '$2') + value 13590 // cursor 13591 case 6187: 13592 return Utility_replace(Utility_replace(Utility_replace(value, /(zoom-|grab)/, WEBKIT + '$1'), /(image-set)/, WEBKIT + '$1'), value, '') + value 13593 // background, background-image 13594 case 5495: case 3959: 13595 return Utility_replace(value, /(image-set\([^]*)/, WEBKIT + '$1' + '$`$1') 13596 // justify-content 13597 case 4968: 13598 return Utility_replace(Utility_replace(value, /(.+:)(flex-)?(.*)/, WEBKIT + 'box-pack:$3' + MS + 'flex-pack:$3'), /s.+-b[^;]+/, 'justify') + WEBKIT + value + value 13599 // (margin|padding)-inline-(start|end) 13600 case 4095: case 3583: case 4068: case 2532: 13601 return Utility_replace(value, /(.+)-inline(.+)/, WEBKIT + '$1$2') + value 13602 // (min|max)?(width|height|inline-size|block-size) 13603 case 8116: case 7059: case 5753: case 5535: 13604 case 5445: case 5701: case 4933: case 4677: 13605 case 5533: case 5789: case 5021: case 4765: 13606 // stretch, max-content, min-content, fill-available 13607 if (Utility_strlen(value) - 1 - length > 6) 13608 switch (Utility_charat(value, length + 1)) { 13609 // (m)ax-content, (m)in-content 13610 case 109: 13611 // - 13612 if (Utility_charat(value, length + 4) !== 45) 13613 break 13614 // (f)ill-available, (f)it-content 13615 case 102: 13616 return Utility_replace(value, /(.+:)(.+)-([^]+)/, '$1' + WEBKIT + '$2-$3' + '$1' + MOZ + (Utility_charat(value, length + 3) == 108 ? '$3' : '$2-$3')) + value 13617 // (s)tretch 13618 case 115: 13619 return ~indexof(value, 'stretch') ? prefix(Utility_replace(value, 'stretch', 'fill-available'), length) + value : value 13620 } 13621 break 13622 // position: sticky 13623 case 4949: 13624 // (s)ticky? 13625 if (Utility_charat(value, length + 1) !== 115) 13626 break 13627 // display: (flex|inline-flex) 13628 case 6444: 13629 switch (Utility_charat(value, Utility_strlen(value) - 3 - (~indexof(value, '!important') && 10))) { 13630 // stic(k)y 13631 case 107: 13632 return Utility_replace(value, ':', ':' + WEBKIT) + value 13633 // (inline-)?fl(e)x
13634 case 101: 13635 return Utility_replace(value, /(.+:)([^;!]+)(;|!.+)?/, '$1' + WEBKIT + (Utility_charat(value, 14) === 45 ? 'inline-' : '') + 'box$3' + '$1' + WEBKIT + '$2$3' + '$1' + MS + '$2box$3') + value 13636 } 13637 break 13638 // writing-mode 13639 case 5936: 13640 switch (Utility_charat(value, length + 11)) { 13641 // vertical-l(r) 13642 case 114: 13643 return WEBKIT + value + MS + Utility_replace(value, /[svh]\w+-[tblr]{2}/, 'tb') + value 13644 // vertical-r(l) 13645 case 108: 13646 return WEBKIT + value + MS + Utility_replace(value, /[svh]\w+-[tblr]{2}/, 'tb-rl') + value 13647 // horizontal(-)tb 13648 case 45: 13649 return WEBKIT + value + MS + Utility_replace(value, /[svh]\w+-[tblr]{2}/, 'lr') + value 13650 } 13651 13652 return WEBKIT + value + MS + value + value 13653 } 13654 13655 return value 13656} 13657 13658;// CONCATENATED MODULE: ./node_modules/stylis/src/Middleware.js 13659 13660 13661 13662 13663 13664 13665/** 13666 * @param {function[]} collection 13667 * @return {function} 13668 */ 13669function middleware (collection) { 13670 var length = Utility_sizeof(collection) 13671 13672 return function (element, index, children, callback) { 13673 var output = '' 13674 13675 for (var i = 0; i < length; i++) 13676 output += collection[i](element, index, children, callback) || '' 13677 13678 return output 13679 } 13680} 13681 13682/** 13683 * @param {function} callback 13684 * @return {function} 13685 */ 13686function rulesheet (callback) { 13687 return function (element) { 13688 if (!element.root) 13689 if (element = element.return) 13690 callback(element) 13691 } 13692} 13693 13694/** 13695 * @param {object} element 13696 * @param {number} index 13697 * @param {object[]} children 13698 * @param {function} callback 13699 */ 13700function prefixer (element, index, children, callback) { 13701 if (element.length > -1) 13702 if (!element.return) 13703 switch (element.type) { 13704 case DECLARATION: element.return = prefix(element.value, element.length) 13705 break 13706 case KEYFRAMES: 13707 return serialize([copy(element, {value: Utility_replace(element.value, '@', '@' + WEBKIT)})], callback) 13708 case Enum_RULESET: 13709 if (element.length) 13710 return Utility_combine(element.props, function (value) { 13711 switch (match(value, /(::plac\w+|:read-\w+)/)) { 13712 // :read-(only|write) 13713 case ':read-only': case ':read-write': 13714 return serialize([copy(element, {props: [Utility_replace(value, /:(read-\w+)/, ':' + MOZ + '$1')]})], callback) 13715 // :placeholder 13716 case '::placeholder': 13717 return serialize([ 13718 copy(element, {props: [Utility_replace(value, /:(plac\w+)/, ':' + WEBKIT + 'input-$1')]}), 13719 copy(element, {props: [Utility_replace(value, /:(plac\w+)/, ':' + MOZ + '$1')]}), 13720 copy(element, {props: [Utility_replace(value, /:(plac\w+)/, MS + 'input-$1')]}) 13721 ], callback) 13722 } 13723 13724 return '' 13725 }) 13726 } 13727} 13728 13729/** 13730 * @param {object} element 13731 * @param {number} index 13732 * @param {object[]} children 13733 */ 13734function namespace (element) { 13735 switch (element.type) { 13736 case RULESET: 13737 element.props = element.props.map(function (value) { 13738 return combine(tokenize(value), function (value, index, children) { 13739 switch (charat(value, 0)) { 13740 // \f 13741 case 12: 13742 return substr(value, 1, strlen(value)) 13743 // \0 ( + > ~ 13744 case 0: case 40: case 43: case 62: case 126: 13745 return value 13746 // : 13747 case 58: 13748 if (children[++index] === 'global') 13749 children[index] = '', children[++index] = '\f' + substr(children[index], index = 1, -1) 13750 // \s 13751 case 32: 13752 return index === 1 ? '' : value 13753 default: 13754 switch (index) { 13755 case 0: element = value 13756 return sizeof(children) > 1 ? '' : value 13757 case index = sizeof(children) - 1: case 2: 13758 return index === 2 ? value + element + element : value + element 13759 default: 13760 return value 13761 } 13762 } 13763 }) 13764 }) 13765 } 13766} 13767 13768;// CONCATENATED MODULE: ./node_modules/stylis/src/Parser.js 13769 13770 13771 13772 13773/** 13774 * @param {string} value 13775 * @return {object[]} 13776 */ 13777function compile (value) { 13778 return dealloc(parse('', null, null, null, [''], value = alloc(value), 0, [0], value)) 13779} 13780 13781/** 13782 * @param {string} value 13783 * @param {object} root 13784 * @param {object?} parent 13785 * @param {string[]} rule 13786 * @param {string[]} rules 13787 * @param {string[]} rulesets 13788 * @param {number[]} pseudo 13789 * @param {number[]} points 13790 * @param {string[]} declarations 13791 * @return {object} 13792 */ 13793function parse (value, root, parent, rule, rules, rulesets, pseudo, points, declarations) { 13794 var index = 0 13795 var offset = 0 13796 var length = pseudo 13797 var atrule = 0 13798 var property = 0 13799 var previous = 0 13800 var variable = 1 13801 var scanning = 1 13802 var ampersand = 1 13803 var character = 0 13804 var type = '' 13805 var props = rules 13806 var children = rulesets 13807 var reference = rule 13808 var characters = type 13809 13810 while (scanning) 13811 switch (previous = character, character = next()) { 13812 // ( 13813 case 40:
13814 if (previous != 108 && characters.charCodeAt(length - 1) == 58) { 13815 if (indexof(characters += Utility_replace(delimit(character), '&', '&\f'), '&\f') != -1) 13816 ampersand = -1 13817 break 13818 } 13819 // " ' [ 13820 case 34: case 39: case 91: 13821 characters += delimit(character) 13822 break 13823 // \t \n \r \s 13824 case 9: case 10: case 13: case 32: 13825 characters += whitespace(previous) 13826 break 13827 // \ 13828 case 92: 13829 characters += escaping(caret() - 1, 7) 13830 continue 13831 // / 13832 case 47: 13833 switch (peek()) { 13834 case 42: case 47: 13835 Utility_append(comment(commenter(next(), caret()), root, parent), declarations) 13836 break 13837 default: 13838 characters += '/' 13839 } 13840 break 13841 // { 13842 case 123 * variable: 13843 points[index++] = Utility_strlen(characters) * ampersand 13844 // } ; \0 13845 case 125 * variable: case 59: case 0: 13846 switch (character) { 13847 // \0 } 13848 case 0: case 125: scanning = 0 13849 // ; 13850 case 59 + offset: 13851 if (property > 0 && (Utility_strlen(characters) - length)) 13852 Utility_append(property >
13852 32 ? declaration(characters + ';', rule, parent, length - 1) : declaration(Utility_replace(characters, ' ', '') + ';', rule, parent, length - 2), declarations) 13853 break 13854 // @ ; 13855 case 59: characters += ';' 13856 // { rule/at-rule 13857 default: 13858 Utility_append(reference = ruleset(characters, root, parent, index, offset, rules, points, type, props = [], children = [], length), rulesets) 13859 13860 if (character === 123) 13861 if (offset === 0) 13862 parse(characters, root, reference, reference, props, rulesets, length, points, children) 13863 else 13864 switch (atrule) { 13865 // d m s 13866 case 100: case 109: case 115: 13867 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) 13868 break 13869 default: 13870 parse(characters, reference, reference, reference, [''], children, 0, points, children) 13871 } 13872 } 13873 13874 index = offset = property = 0, variable = ampersand = 1, type = characters = '', length = pseudo 13875 break 13876 // : 13877 case 58: 13878 length = 1 + Utility_strlen(characters), property = previous 13879 default: 13880 if (variable < 1) 13881 if (character == 123) 13882 --variable 13883 else if (character == 125 && variable++ == 0 && prev() == 125) 13884 continue 13885 13886 switch (characters += Utility_from(character), character * variable) { 13887 // & 13888 case 38: 13889 ampersand = offset > 0 ? 1 : (characters += '\f', -1) 13890 break 13891 // , 13892 case 44: 13893 points[index++] = (Utility_strlen(characters) - 1) * ampersand, ampersand = 1 13894 break 13895 // @ 13896 case 64: 13897 // - 13898 if (peek() === 45) 13899 characters += delimit(next()) 13900 13901 atrule = peek(), offset = length = Utility_strlen(type = characters += identifier(caret())), character++ 13902 break 13903 // - 13904 case 45: 13905 if (previous === 45 && Utility_strlen(characters) == 2) 13906 variable = 0 13907 } 13908 } 13909 13910 return rulesets 13911} 13912 13913/** 13914 * @param {string} value 13915 * @param {object} root 13916 * @param {object?} parent 13917 * @param {number} index 13918 * @param {number} offset 13919 * @param {string[]} rules 13920 * @param {number[]} points 13921 * @param {string} type 13922 * @param {string[]} props 13923 * @param {string[]} children 13924 * @param {number} length 13925 * @return {object} 13926 */ 13927function ruleset (value, root, parent, index, offset, rules, points, type, props, children, length) { 13928 var post = offset - 1 13929 var rule = offset === 0 ? rules : [''] 13930 var size = Utility_sizeof(rule) 13931 13932 for (var i = 0, j = 0, k = 0; i < index; ++i) 13933 for (var x = 0, y = Utility_substr(value, post + 1, post = abs(j = points[i])), z = value; x < size; ++x) 13934 if (z = trim(j > 0 ? rule[x] + ' ' + y : Utility_replace(y, /&\f/g, rule[x]))) 13935 props[k++] = z 13936 13937 return node(value, root, parent, offset === 0 ? Enum_RULESET : type, props, children, length) 13938} 13939 13940/** 13941 * @param {number} value 13942 * @param {object} root 13943 * @param {object?} parent 13944 * @return {object} 13945 */ 13946function comment (value, root, parent) { 13947 return node(value, root, parent, COMMENT, Utility_from(Tokenizer_char()), Utility_substr(value, 2, -2), 0) 13948} 13949 13950/** 13951 * @param {string} value 13952 * @param {object} root 13953 * @param {object?} parent 13954 * @param {number} length 13955 * @return {object} 13956 */ 13957function declaration (value, root, parent, length) { 13958 return node(value, root, parent, DECLARATION, Utility_substr(value, 0, length), Utility_substr(value, length + 1, -1), length) 13959} 13960 13961;// CONCATENATED MODULE: ./node_modules/@emotion/cache/dist/emotion-cache.browser.esm.js 13962 13963 13964 13965 13966 13967var last = function last(arr) { 13968 return arr.length ? arr[arr.length - 1] : null; 13969}; // based on https://github.com/thysultan/stylis.js/blob/e6843c373ebcbbfade25ebcc23f540ed8508da0a/src/Tokenizer.js#L239-L244 13970 13971 13972var identifierWithPointTracking = function identifierWithPointTracking(begin, points, index) { 13973 var previous = 0; 13974 var character = 0; 13975 13976 while (true) { 13977 previous = character; 13978 character = peek(); // &\f 13979 13980 if (previous === 38 && character === 12) { 13981 points[index] = 1; 13982 } 13983 13984 if (token(character)) { 13985 break; 13986 } 13987 13988 next(); 13989 } 13990 13991 return slice(begin, position); 13992}; 13993 13994var toRules = function toRules(parsed, points) { 13995 // pretend we've started with a comma 13996 var index = -1; 13997 var character = 44; 13998 13999 do { 14000 switch (token(character)) { 14001 case 0: 14002 // &\f 14003 if (character === 38 && peek() === 12) { 14004 // this is not 100% correct, we don't account for literal sequences here - like for example quoted strings 14005 // stylis inserts \f after & to know when & where it should replace this sequence with the context selector 14006 // and when it should just concatenate the outer and inner selectors 14007 // it's very unlikely for this sequence to actually appear in a different c
vendor: 23,256 bytes, lines 14007-14770
14007ontext, so we just leverage this fact here 14008 points[index] = 1; 14009 } 14010 14011 parsed[index] += identifierWithPointTracking(position - 1, points, index); 14012 break; 14013 14014 case 2: 14015 parsed[index] += delimit(character); 14016 break; 14017 14018 case 4: 14019 // comma 14020 if (character === 44) { 14021 // colon 14022 parsed[++index] = peek() === 58 ? '&\f' : ''; 14023 points[index] = parsed[index].length; 14024 break; 14025 } 14026 14027 // fallthrough 14028 14029 default: 14030 parsed[index] += Utility_from(character); 14031 } 14032 } while (character = next()); 14033 14034 return parsed; 14035}; 14036 14037var getRules = function getRules(value, points) { 14038 return dealloc(toRules(alloc(value), points)); 14039}; // WeakSet would be more appropriate, but only WeakMap is supported in IE11 14040 14041 14042var fixedElements = /* #__PURE__ */new WeakMap(); 14043var compat = function compat(element) { 14044 if (element.type !== 'rule' || !element.parent || // positive .length indicates that this rule contains pseudo 14045 // negative .length indicates that this rule has been already prefixed 14046 element.length < 1) { 14047 return; 14048 } 14049 14050 var value = element.value, 14051 parent = element.parent; 14052 var isImplicitRule = element.column === parent.column && element.line === parent.line; 14053 14054 while (parent.type !== 'rule') { 14055 parent = parent.parent; 14056 if (!parent) return; 14057 } // short-circuit for the simplest case 14058 14059 14060 if (element.props.length === 1 && value.charCodeAt(0) !== 58 14061 /* colon */ 14062 && !fixedElements.get(parent)) { 14063 return; 14064 } // if this is an implicitly inserted rule (the one eagerly inserted at the each new nested level) 14065 // then the props has already been manipulated beforehand as they that array is shared between it and its "rule parent" 14066 14067 14068 if (isImplicitRule) { 14069 return; 14070 } 14071 14072 fixedElements.set(element, true); 14073 var points = []; 14074 var rules = getRules(value, points); 14075 var parentRules = parent.props; 14076 14077 for (var i = 0, k = 0; i < rules.length; i++) { 14078 for (var j = 0; j < parentRules.length; j++, k++) { 14079 element.props[k] = points[i] ? rules[i].replace(/&\f/g, parentRules[j]) : parentRules[j] + " " + rules[i]; 14080 } 14081 } 14082}; 14083var removeLabel = function removeLabel(element) { 14084 if (element.type === 'decl') { 14085 var value = element.value; 14086 14087 if ( // charcode for l 14088 value.charCodeAt(0) === 108 && // charcode for b 14089 value.charCodeAt(2) === 98) { 14090 // this ignores label 14091 element["return"] = ''; 14092 element.value = ''; 14093 } 14094 } 14095}; 14096var ignoreFlag = 'emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason'; 14097 14098var isIgnoringComment = function isIgnoringComment(element) { 14099 return !!element && element.type === 'comm' && element.children.indexOf(ignoreFlag) > -1; 14100}; 14101 14102var createUnsafeSelectorsAlarm = function createUnsafeSelectorsAlarm(cache) { 14103 return function (element, index, children) { 14104 if (element.type !== 'rule') return; 14105 var unsafePseudoClasses = element.value.match(/(:first|:nth|:nth-last)-child/g); 14106 14107 if (unsafePseudoClasses && cache.compat !== true) { 14108 var prevElement = index > 0 ? children[index - 1] : null; 14109 14110 if (prevElement && isIgnoringComment(last(prevElement.children))) { 14111 return; 14112 } 14113 14114 unsafePseudoClasses.forEach(function (unsafePseudoClass) { 14115 console.error("The pseudo class \"" + unsafePseudoClass + "\" is potentially unsafe when doing server-side rendering. Try changing it to \"" + unsafePseudoClass.split('-child')[0] + "-of-type\"."); 14116 }); 14117 } 14118 }; 14119}; 14120 14121var isImportRule = function isImportRule(element) { 14122 return element.type.charCodeAt(1) === 105 && element.type.charCodeAt(0) === 64; 14123}; 14124 14125var isPrependedWithRegularRules = function isPrependedWithRegularRules(index, children) { 14126 for (var i = index - 1; i >= 0; i--) { 14127 if (!isImportRule(children[i])) { 14128 return true; 14129 } 14130 } 14131 14132 return false; 14133}; // use this to remove incorrect elements from further processing 14134// so they don't get handed to the `sheet` (or anything else) 14135// as that could potentially lead to additional logs which in turn could be overhelming to the user 14136 14137 14138var nullifyElement = function nullifyElement(element) { 14139 element.type = ''; 14140 element.value = ''; 14141 element["return"] = ''; 14142 element.children = ''; 14143 element.props = ''; 14144}; 14145 14146var incorrectImportAlarm = function incorrectImportAlarm(element, index, children) { 14147 if (!isImportRule(element)) { 14148 return; 14149 } 14150 14151 if (element.parent) { 14152 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."); 14153 nullifyElement(element); 14154 } else if (isPrependedWithRegularRules(index, children)) { 14155 console.error("`@import` rules can't be after other rules. Please put your `@import` rules before your other rules."); 14156 nullifyElement(element); 14157 } 14158}; 14159 14160var defaultStylisPlugins = [prefixer]; 14161 14162var createCache = function createCache(options) { 14163 var key = options.key; 14164 14165 if (false) {} 14166 14167 if ( key === 'css') { 14168 var ssrStyles = document.querySelectorAll("style[data-emotion]:not([data-s])"); // get SSRed styles out of the way of React's hydration 14169 // document.head is a safe place to move them to(though note document.head is not necessarily the last place they will be) 14170 // note this very very intentionally targets all style elements regardless of the key to ensure 14171 // that creating a cache works inside of render of a React component 14172 14173 Array.prototype.forEach.call(ssrStyles, function (node) { 14174 // we want to only move elements which have a space in the data-emotion attribute value 14175 // because that indicates that it is an Emotion 11 server-side rendered style elements 14176 // while we will already ignore Emotion 11 client-side inserted styles because of the :not([data-s]) part in the selector 14177 // Emotion 10 client-side inserted styles did not have data-s (but importantly did not have a space in their data-emotion attributes) 14178 // so checking for the space ensures that loading Emotion 11 after Emotion 10 has inserted some styles 14179 // will not result in the Emotion 10 styles being destroyed 14180 var dataEmotionAttribute = node.getAttribute('data-emotion'); 14181 14182 if (dataEmotionAttribute.indexOf(' ') === -1) { 14183 return; 14184 } 14185 document.head.appendChild(node); 14186 node.setAttribute('data-s', ''); 14187 }); 14188 } 14189 14190 var stylisPlugins = options.stylisPlugins || defaultStylisPlugins; 14191 14192 if (false) {} 14193 14194 var inserted = {}; // $FlowFixMe 14195 14196 var container; 14197 var nodesToHydrate = []; 14198 14199 { 14200 container = options.container || document.head; 14201 Array.prototype.forEach.call( // this means we will ignore elements which don't have a space in them which 14202 // means that the style elements we're looking at are only Emotion 11 server-rendered style elements 14203 document.querySelectorAll("style[data-emotion^=\"" + key + " \"]"), function (node) { 14204 var attrib = node.getAttribute("data-emotion").split(' '); // $FlowFixMe 14205 14206 for (var i = 1; i < attrib.length; i++) { 14207 inserted[attrib[i]] = true; 14208 } 14209 14210 nodesToHydrate.push(node); 14211 }); 14212 } 14213 14214 var _insert; 14215 14216 var omnipresentPlugins = [compat, removeLabel]; 14217 14218 if (false) {} 14219 14220 { 14221 var currentSheet; 14222 var finalizingPlugins = [stringify, false ? 0 : rulesheet(function (rule) { 14223 currentSheet.insert(rule); 14224 })]; 14225 var serializer = middleware(omnipresentPlugins.concat(stylisPlugins, finalizingPlugins)); 14226 14227 var stylis = function stylis(styles) { 14228 return serialize(compile(styles), serializer); 14229 }; 14230 14231 _insert = function insert(selector, serialized, sheet, shouldCache) { 14232 currentSheet = sheet; 14233 14234 if (false) {} 14235 14236 stylis(selector ? selector + "{" + serialized.styles + "}" : serialized.styles); 14237 14238 if (shouldCache) { 14239 cache.inserted[serialized.name] = true; 14240 } 14241 }; 14242 } 14243 14244 var cache = { 14245 key: key, 14246 sheet: new emotion_sheet_browser_esm_StyleSheet({ 14247 key: key, 14248 container: container, 14249 nonce: options.nonce, 14250 speedy: options.speedy, 14251 prepend: options.prepend, 14252 insertionPoint: options.insertionPoint 14253 }), 14254 nonce: options.nonce, 14255 inserted: inserted, 14256 registered: {}, 14257 insert: _insert 14258 }; 14259 cache.sheet.hydrate(nodesToHydrate); 14260 return cache; 14261}; 14262 14263/* harmony default export */ const emotion_cache_browser_esm = (createCache); 14264 14265;// CONCATENATED MODULE: ./node_modules/@emotion/serialize/node_modules/@emotion/hash/dist/emotion-hash.esm.js 14266/* eslint-disable */ 14267// Inspired by https://github.com/garycourt/murmurhash-js 14268// Ported from https://github.com/aappleby/smhasher/blob/61a0530f28277f2e850bfc39600ce61d02b518de/src/MurmurHash2.cpp#L37-L86 14269function murmur2(str) { 14270 // 'm' and 'r' are mixing constants generated offline. 14271 // They're not really 'magic', they just happen to work well. 14272 // const m = 0x5bd1e995; 14273 // const r = 24; 14274 // Initialize the hash 14275 var h = 0; // Mix 4 bytes at a time into the hash 14276 14277 var k, 14278 i = 0, 14279 len = str.length; 14280 14281 for (; len >= 4; ++i, len -= 4) { 14282 k = str.charCodeAt(i) & 0xff | (str.charCodeAt(++i) & 0xff) << 8 | (str.charCodeAt(++i) & 0xff) << 16 | (str.charCodeAt(++i) & 0xff) << 24; 14283 k = 14284 /* Math.imul(k, m): */ 14285 (k & 0xffff) * 0x5bd1e995 + ((k >>> 16) * 0xe995 << 16); 14286 k ^= 14287 /* k >>> r: */ 14288 k >>> 24; 14289 h = 14290 /* Math.imul(k, m): */ 14291 (k & 0xffff) * 0x5bd1e995 + ((k >>> 16) * 0xe995 << 16) ^ 14292 /* Math.imul(h, m): */ 14293 (h & 0xffff) * 0x5bd1e995 + ((h >>> 16) * 0xe995 << 16); 14294 } // Handle the last few bytes of the input array 14295 14296 14297 switch (len) { 14298 case 3: 14299 h ^= (str.charCodeAt(i + 2) & 0xff) << 16; 14300 14301 case 2: 14302 h ^= (str.charCodeAt(i + 1) & 0xff) << 8; 14303 14304 case 1: 14305 h ^= str.charCodeAt(i) & 0xff; 14306 h = 14307 /* Math.imul(h, m): */ 14308 (h & 0xffff) * 0x5bd1e995 + ((h >>> 16) * 0xe995 << 16); 14309 } // Do a few final mixes of the hash to ensure the last few 14310 // bytes are well-incorporated. 14311 14312 14313 h ^= h >>> 13; 14314 h = 14315 /* Math.imul(h, m): */ 14316 (h & 0xffff) * 0x5bd1e995 + ((h >>> 16) * 0xe995 << 16); 14317 return ((h ^ h >>> 15) >>> 0).toString(36); 14318} 14319 14320 14321 14322;// CONCATENATED MODULE: ./node_modules/@emotion/unitless/dist/emotion-unitless.esm.js 14323var unitlessKeys = { 14324 animationIterationCount: 1, 14325 aspectRatio: 1, 14326 borderImageOutset: 1, 14327 borderImageSlice: 1, 14328 borderImageWidth: 1, 14329 boxFlex: 1, 14330 boxFlexGroup: 1, 14331 boxOrdinalGroup: 1, 14332 columnCount: 1, 14333 columns: 1, 14334 flex: 1, 14335 flexGrow: 1, 14336 flexPositive: 1, 14337 flexShrink: 1, 14338 flexNegative: 1, 14339 flexOrder: 1, 14340 gridRow: 1, 14341 gridRowEnd: 1, 14342 gridRowSpan: 1, 14343 gridRowStart: 1, 14344 gridColumn: 1, 14345 gridColumnEnd: 1, 14346 gridColumnSpan: 1, 14347 gridColumnStart: 1, 14348 msGridRow: 1, 14349 msGridRowSpan: 1, 14350 msGridColumn: 1, 14351 msGridColumnSpan: 1, 14352 fontWeight: 1, 14353 lineHeight: 1, 14354 opacity: 1, 14355 order: 1, 14356 orphans: 1, 14357 tabSize: 1, 14358 widows: 1, 14359 zIndex: 1, 14360 zoom: 1, 14361 WebkitLineClamp: 1, 14362 // SVG-related properties 14363 fillOpacity: 1, 14364 floodOpacity: 1, 14365 stopOpacity: 1, 14366 strokeDasharray: 1, 14367 strokeDashoffset: 1, 14368 strokeMiterlimit: 1, 14369 strokeOpacity: 1, 14370 strokeWidth: 1 14371}; 14372 14373 14374 14375;// CONCATENATED MODULE: ./node_modules/@emotion/serialize/node_modules/@emotion/memoize/dist/emotion-memoize.esm.js 14376function memoize(fn) { 14377 var cache = Object.create(null); 14378 return function (arg) { 14379 if (cache[arg] === undefined) cache[arg] = fn(arg); 14380 return cache[arg]; 14381 }; 14382} 14383 14384 14385 14386;// CONCATENATED MODULE: ./node_modules/@emotion/serialize/dist/emotion-serialize.browser.esm.js 14387 14388 14389 14390 14391var 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"; 14392var 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)."; 14393var hyphenateRegex = /[A-Z]|^ms/g; 14394var animationRegex = /_EMO_([^_]+?)_([^]*?)_EMO_/g; 14395 14396var isCustomProperty = function isCustomProperty(property) { 14397 return property.charCodeAt(1) === 45; 14398}; 14399 14400var isProcessableValue = function isProcessableValue(value) { 14401 return value != null && typeof value !== 'boolean'; 14402}; 14403 14404var processStyleName = /* #__PURE__ */memoize(function (styleName) { 14405 return isCustomProperty(styleName) ? styleName : styleName.replace(hyphenateRegex, '-$&').toLowerCase(); 14406}); 14407 14408var processStyleValue = function processStyleValue(key, value) { 14409 switch (key) { 14410 case 'animation': 14411 case 'animationName': 14412 { 14413 if (typeof value === 'string') { 14414 return value.replace(animationRegex, function (match, p1, p2) { 14415 cursor = { 14416 name: p1, 14417 styles: p2, 14418 next: cursor 14419 }; 14420 return p1; 14421 }); 14422 } 14423 } 14424 } 14425 14426 if (unitlessKeys[key] !== 1 && !isCustomProperty(key) && typeof value === 'number' && value !== 0) { 14427 return value + 'px'; 14428 } 14429 14430 return value; 14431}; 14432 14433if (false) { var hyphenatedCache, hyphenPattern, msPattern, oldProcessStyleValue, contentValues, contentValuePattern; } 14434 14435var noComponentSelectorMessage = (/* unused pure expression or super */ null && ('Component selectors can only be used in conjunction with ' + '@emotion/babel-plugin, the swc Emotion plugin, or another Emotion-aware ' + 'compiler transform.')); 14436 14437function handleInterpolation(mergedProps, registered, interpolation) { 14438 if (interpolation == null) { 14439 return ''; 14440 } 14441 14442 if (interpolation.__emotion_styles !== undefined) { 14443 if (false) {} 14444 14445 return interpolation; 14446 } 14447 14448 switch (typeof interpolation) { 14449 case 'boolean': 14450 { 14451 return ''; 14452 } 14453 14454 case 'object': 14455 { 14456 if (interpolation.anim === 1) { 14457 cursor = { 14458 name: interpolation.name, 14459 styles: interpolation.styles, 14460 next: cursor 14461 }; 14462 return interpolation.name; 14463 } 14464 14465 if (interpolation.styles !== undefined) { 14466 var next = interpolation.next; 14467 14468 if (next !== undefined) { 14469 // not the most efficient thing ever but this is a pretty rare case 14470 // and there will be very few iterations of this generally 14471 while (next !== undefined) { 14472 cursor = { 14473 name: next.name, 14474 styles: next.styles, 14475 next: cursor 14476 }; 14477 next = next.next; 14478 } 14479 } 14480 14481 var styles = interpolation.styles + ";"; 14482 14483 if (false) {} 14484 14485 return styles; 14486 } 14487 14488 return createStringFromObject(mergedProps, registered, interpolation); 14489 } 14490 14491 case 'function': 14492 { 14493 if (mergedProps !== undefined) { 14494 var previousCursor = cursor; 14495 var result = interpolation(mergedProps); 14496 cursor = previousCursor; 14497 return handleInterpolation(mergedProps, registered, result); 14498 } else if (false) {} 14499 14500 break; 14501 } 14502 14503 case 'string': 14504 if (false) { var replaced, matched; } 14505 14506 break; 14507 } // finalize string values (regular strings and functions interpolated into css calls) 14508 14509 14510 if (registered == null) { 14511 return interpolation; 14512 } 14513 14514 var cached = registered[interpolation]; 14515 return cached !== undefined ? cached : interpolation; 14516} 14517 14518function createStringFromObject(mergedProps, registered, obj) { 14519 var string = ''; 14520 14521 if (Array.isArray(obj)) { 14522 for (var i = 0; i < obj.length; i++) { 14523 string += handleInterpolation(mergedProps, registered, obj[i]) + ";"; 14524 } 14525 } else { 14526 for (var _key in obj) { 14527 var value = obj[_key]; 14528 14529 if (typeof value !== 'object') { 14530 if (registered != null && registered[value] !== undefined) { 14531 string += _key + "{" + registered[value] + "}"; 14532 } else if (isProcessableValue(value)) { 14533 string += processStyleName(_key) + ":" + processStyleValue(_key, value) + ";"; 14534 } 14535 } else { 14536 if (_key === 'NO_COMPONENT_SELECTOR' && "production" !== 'production') {} 14537 14538 if (Array.isArray(value) && typeof value[0] === 'string' && (registered == null || registered[value[0]] === undefined)) { 14539 for (var _i = 0; _i < value.length; _i++) { 14540 if (isProcessableValue(value[_i])) { 14541 string += processStyleName(_key) + ":" + processStyleValue(_key, value[_i]) + ";"; 14542 } 14543 } 14544 } else { 14545 var interpolated = handleInterpolation(mergedProps, registered, value); 14546 14547 switch (_key) { 14548 case 'animation': 14549 case 'animationName': 14550 { 14551 string += processStyleName(_key) + ":" + interpolated + ";"; 14552 break; 14553 } 14554 14555 default: 14556 { 14557 if (false) {} 14558 14559 string += _key + "{" + interpolated + "}"; 14560 } 14561 } 14562 } 14563 } 14564 } 14565 } 14566 14567 return string; 14568} 14569 14570var labelPattern = /label:\s*([^\s;\n{]+)\s*(;|$)/g; 14571var sourceMapPattern; 14572 14573if (false) {} // this is the cursor for keyframes 14574// keyframes are stored on the SerializedStyles object as a linked list 14575 14576 14577var cursor; 14578var emotion_serialize_browser_esm_serializeStyles = function serializeStyles(args, registered, mergedProps) { 14579 if (args.length === 1 && typeof args[0] === 'object' && args[0] !== null && args[0].styles !== undefined) { 14580 return args[0]; 14581 } 14582 14583 var stringMode = true; 14584 var styles = ''; 14585 cursor = undefined; 14586 var strings = args[0]; 14587 14588 if (strings == null || strings.raw === undefined) { 14589 stringMode = false; 14590 styles += handleInterpolation(mergedProps, registered, strings); 14591 } else { 14592 if (false) {} 14593 14594 styles += strings[0]; 14595 } // we start at 1 since we've already handled the first arg 14596 14597 14598 for (var i = 1; i < args.length; i++) { 14599 styles += handleInterpolation(mergedProps, registered, args[i]); 14600 14601 if (stringMode) { 14602 if (false) {} 14603 14604 styles += strings[i]; 14605 } 14606 } 14607 14608 var sourceMap; 14609 14610 if (false) {} // using a global regex with .exec is stateful so lastIndex has to be reset each time 14611 14612 14613 labelPattern.lastIndex = 0; 14614 var identifierName = ''; 14615 var match; // https://esbench.com/bench/5b809c2cf2949800a0f61fb5 14616 14617 while ((match = labelPattern.exec(styles)) !== null) { 14618 identifierName += '-' + // $FlowFixMe we know it's not null 14619 match[1]; 14620 } 14621 14622 var name = murmur2(styles) + identifierName; 14623 14624 if (false) {} 14625 14626 return { 14627 name: name, 14628 styles: styles, 14629 next: cursor 14630 }; 14631}; 14632 14633 14634 14635;// CONCATENATED MODULE: ./node_modules/@emotion/react/dist/emotion-element-699e6908.browser.esm.js 14636 14637 14638 14639 14640 14641 14642 14643 14644var emotion_element_699e6908_browser_esm_hasOwnProperty = {}.hasOwnProperty; 14645 14646var EmotionCacheContext = /* #__PURE__ */(0,external_React_.createContext)( // we're doing this to avoid preconstruct's dead code elimination in this one case 14647// because this module is primarily intended for the browser and node 14648// but it's also required in react native and similar environments sometimes 14649// and we could have a special build just for that 14650// but this is much easier and the native packages 14651// might use a different theme context in the future anyway 14652typeof HTMLElement !== 'undefined' ? /* #__PURE__ */emotion_cache_browser_esm({ 14653 key: 'css' 14654}) : null); 14655 14656if (false) {} 14657 14658var CacheProvider = EmotionCacheContext.Provider; 14659var __unsafe_useEmotionCache = function useEmotionCache() { 14660 return (0,external_React_.useContext)(EmotionCacheContext); 14661}; 14662 14663var emotion_element_699e6908_browser_esm_withEmotionCache = function withEmotionCache(func) { 14664 // $FlowFixMe 14665 return /*#__PURE__*/(0,external_React_.forwardRef)(function (props, ref) { 14666 // the cache will never be null in the browser 14667 var cache = (0,external_React_.useContext)(EmotionCacheContext); 14668 return func(props, cache, ref); 14669 }); 14670}; 14671 14672var emotion_element_699e6908_browser_esm_ThemeContext = /* #__PURE__ */(0,external_React_.createContext)({}); 14673 14674if (false) {} 14675 14676var useTheme = function useTheme() { 14677 return useContext(emotion_element_699e6908_browser_esm_ThemeContext); 14678}; 14679 14680var getTheme = function getTheme(outerTheme, theme) { 14681 if (typeof theme === 'function') { 14682 var mergedTheme = theme(outerTheme); 14683 14684 if (false) {} 14685 14686 return mergedTheme; 14687 } 14688 14689 if (false) {} 14690 14691 return _extends({}, outerTheme, theme); 14692}; 14693 14694var createCacheWithTheme = /* #__PURE__ */(/* unused pure expression or super */ null && (weakMemoize(function (outerTheme) { 14695 return weakMemoize(function (theme) { 14696 return getTheme(outerTheme, theme); 14697 }); 14698}))); 14699var ThemeProvider = function ThemeProvider(props) { 14700 var theme = useContext(emotion_element_699e6908_browser_esm_ThemeContext); 14701 14702 if (props.theme !== theme) { 14703 theme = createCacheWithTheme(theme)(props.theme); 14704 } 14705 14706 return /*#__PURE__*/createElement(emotion_element_699e6908_browser_esm_ThemeContext.Provider, { 14707 value: theme 14708 }, props.children); 14709}; 14710function withTheme(Component) { 14711 var componentName = Component.displayName || Component.name || 'Component'; 14712 14713 var render = function render(props, ref) { 14714 var theme = useContext(emotion_element_699e6908_browser_esm_ThemeContext); 14715 return /*#__PURE__*/createElement(Component, _extends({ 14716 theme: theme, 14717 ref: ref 14718 }, props)); 14719 }; // $FlowFixMe 14720 14721 14722 var WithTheme = /*#__PURE__*/forwardRef(render); 14723 WithTheme.displayName = "WithTheme(" + componentName + ")"; 14724 return hoistNonReactStatics(WithTheme, Component); 14725} 14726 14727var getFunctionNameFromStackTraceLine = function getFunctionNameFromStackTraceLine(line) { 14728 // V8 14729 var match = /^\s+at\s+([A-Za-z0-9$.]+)\s/.exec(line); 14730 14731 if (match) { 14732 // The match may be something like 'Object.createEmotionProps' 14733 var parts = match[1].split('.'); 14734 return parts[parts.length - 1]; 14735 } // Safari / Firefox 14736 14737 14738 match = /^([A-Za-z0-9$.]+)@/.exec(line); 14739 if (match) return match[1]; 14740 return undefined; 14741}; 14742 14743var internalReactFunctionNames = /* #__PURE__ */new Set(['renderWithHooks', 'processChild', 'finishClassComponent', 'renderToString']); // These identifiers come from error stacks, so they have to be valid JS 14744// identifiers, thus we only need to replace what is a valid character for JS, 14745// but not for CSS. 14746 14747var sanitizeIdentifier = function sanitizeIdentifier(identifier) { 14748 return identifier.replace(/\$/g, '-'); 14749}; 14750 14751var getLabelFromStackTrace = function getLabelFromStackTrace(stackTrace) { 14752 if (!stackTrace) return undefined; 14753 var lines = stackTrace.split('\n'); 14754 14755 for (var i = 0; i < lines.length; i++) { 14756 var functionName = getFunctionNameFromStackTraceLine(lines[i]); // The first line of V8 stack traces is just "Error" 14757 14758 if (!functionName) continue; // If we reach one of these, we have gone too far and should quit 14759 14760 if (internalReactFunctionNames.has(functionName)) break; // The component name is the first function in the stack that starts with an 14761 // uppercase letter 14762 14763 if (/^[A-Z]/.test(functionName)) return sanitizeIdentifier(functionName); 14764 } 14765 14766 return undefined; 14767}; 14768 14769var typePropName = '__EMOTION_TYPE_PLEASE_DO_NOT_USE__'; 14770var labelPropName = '__EMOTION_LABEL_PLEASE_DO_NOT_USE__';
vendor: 6,255 bytes, lines 14771-14953
14771var emotion_element_699e6908_browser_esm_createEmotionProps = function createEmotionProps(type, props) { 14772 if (false) {} 14773 14774 var newProps = {}; 14775 14776 for (var key in props) { 14777 if (emotion_element_699e6908_browser_esm_hasOwnProperty.call(props, key)) { 14778 newProps[key] = props[key]; 14779 } 14780 } 14781 14782 newProps[typePropName] = type; // For performance, only call getLabelFromStackTrace in development and when 14783 // the label hasn't already been computed 14784 14785 if (false) { var label; } 14786 14787 return newProps; 14788}; 14789 14790var Noop = function Noop() { 14791 return null; 14792}; 14793 14794var emotion_element_699e6908_browser_esm_Emotion = /* #__PURE__ */(/* unused pure expression or super */ null && (emotion_element_699e6908_browser_esm_withEmotionCache(function (props, cache, ref) { 14795 var cssProp = props.css; // so that using `css` from `emotion` and passing the result to the css prop works 14796 // not passing the registered cache to serializeStyles because it would 14797 // make certain babel optimisations not possible 14798 14799 if (typeof cssProp === 'string' && cache.registered[cssProp] !== undefined) { 14800 cssProp = cache.registered[cssProp]; 14801 } 14802 14803 var type = props[typePropName]; 14804 var registeredStyles = [cssProp]; 14805 var className = ''; 14806 14807 if (typeof props.className === 'string') { 14808 className = getRegisteredStyles(cache.registered, registeredStyles, props.className); 14809 } else if (props.className != null) { 14810 className = props.className + " "; 14811 } 14812 14813 var serialized = serializeStyles(registeredStyles, undefined, useContext(emotion_element_699e6908_browser_esm_ThemeContext)); 14814 14815 if (false) { var labelFromStack; } 14816 14817 var rules = insertStyles(cache, serialized, typeof type === 'string'); 14818 className += cache.key + "-" + serialized.name; 14819 var newProps = {}; 14820 14821 for (var key in props) { 14822 if (emotion_element_699e6908_browser_esm_hasOwnProperty.call(props, key) && key !== 'css' && key !== typePropName && ( true || 0)) { 14823 newProps[key] = props[key]; 14824 } 14825 } 14826 14827 newProps.ref = ref; 14828 newProps.className = className; 14829 var ele = /*#__PURE__*/createElement(type, newProps); 14830 var possiblyStyleElement = /*#__PURE__*/createElement(Noop, null); 14831 14832 14833 return /*#__PURE__*/createElement(Fragment, null, possiblyStyleElement, ele); 14834}))); 14835 14836if (false) {} 14837 14838 14839 14840;// CONCATENATED MODULE: ./node_modules/@emotion/utils/dist/emotion-utils.browser.esm.js 14841var isBrowser = "object" !== 'undefined'; 14842function emotion_utils_browser_esm_getRegisteredStyles(registered, registeredStyles, classNames) { 14843 var rawClassName = ''; 14844 classNames.split(' ').forEach(function (className) { 14845 if (registered[className] !== undefined) { 14846 registeredStyles.push(registered[className] + ";"); 14847 } else { 14848 rawClassName += className + " "; 14849 } 14850 }); 14851 return rawClassName; 14852} 14853var registerStyles = function registerStyles(cache, serialized, isStringTag) { 14854 var className = cache.key + "-" + serialized.name; 14855 14856 if ( // we only need to add the styles to the registered cache if the 14857 // class name could be used further down 14858 // the tree but if it's a string tag, we know it won't 14859 // so we don't have to add it to registered cache. 14860 // this improves memory usage since we can avoid storing the whole style string 14861 (isStringTag === false || // we need to always store it if we're in compat mode and 14862 // in node since emotion-server relies on whether a style is in 14863 // the registered cache to know whether a style is global or not 14864 // also, note that this check will be dead code eliminated in the browser 14865 isBrowser === false ) && cache.registered[className] === undefined) { 14866 cache.registered[className] = serialized.styles; 14867 } 14868}; 14869var emotion_utils_browser_esm_insertStyles = function insertStyles(cache, serialized, isStringTag) { 14870 registerStyles(cache, serialized, isStringTag); 14871 var className = cache.key + "-" + serialized.name; 14872 14873 if (cache.inserted[serialized.name] === undefined) { 14874 var current = serialized; 14875 14876 do { 14877 cache.insert(serialized === current ? "." + className : '', current, cache.sheet, true); 14878 14879 current = current.next; 14880 } while (current !== undefined); 14881 } 14882}; 14883 14884 14885 14886;// CONCATENATED MODULE: ./node_modules/@emotion/css/create-instance/dist/emotion-css-create-instance.esm.js 14887 14888 14889 14890 14891function insertWithoutScoping(cache, serialized) { 14892 if (cache.inserted[serialized.name] === undefined) { 14893 return cache.insert('', serialized, cache.sheet, true); 14894 } 14895} 14896 14897function merge(registered, css, className) { 14898 var registeredStyles = []; 14899 var rawClassName = emotion_utils_browser_esm_getRegisteredStyles(registered, registeredStyles, className); 14900 14901 if (registeredStyles.length < 2) { 14902 return className; 14903 } 14904 14905 return rawClassName + css(registeredStyles); 14906} 14907 14908var createEmotion = function createEmotion(options) { 14909 var cache = emotion_cache_browser_esm(options); // $FlowFixMe 14910 14911 cache.sheet.speedy = function (value) { 14912 if (false) {} 14913 14914 this.isSpeedy = value; 14915 }; 14916 14917 cache.compat = true; 14918 14919 var css = function css() { 14920 for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) { 14921 args[_key] = arguments[_key]; 14922 } 14923 14924 var serialized = emotion_serialize_browser_esm_serializeStyles(args, cache.registered, undefined); 14925 emotion_utils_browser_esm_insertStyles(cache, serialized, false); 14926 return cache.key + "-" + serialized.name; 14927 }; 14928 14929 var keyframes = function keyframes() { 14930 for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) { 14931 args[_key2] = arguments[_key2]; 14932 } 14933 14934 var serialized = emotion_serialize_browser_esm_serializeStyles(args, cache.registered); 14935 var animation = "animation-" + serialized.name; 14936 insertWithoutScoping(cache, { 14937 name: serialized.name, 14938 styles: "@keyframes " + animation + "{" + serialized.styles + "}" 14939 }); 14940 return animation; 14941 }; 14942 14943 var injectGlobal = function injectGlobal() { 14944 for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) { 14945 args[_key3] = arguments[_key3]; 14946 } 14947 14948 var serialized = emotion_serialize_browser_esm_serializeStyles(args, cache.registered); 14949 insertWithoutScoping(cache, serialized); 14950 }; 14951 14952 var cx = function cx() { 14953 for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
14954 args[_key4] = arguments[_key4]; 14955 } 14956 14957 return merge(cache.registered, css, emotion_css_create_instance_esm_classnames(args)); 14958 }; 14959 14960 return { 14961 css: css, 14962 cx: cx, 14963 injectGlobal: injectGlobal, 14964 keyframes: keyframes, 14965 hydrate: function hydrate(ids) { 14966 ids.forEach(function (key) { 14967 cache.inserted[key] = true; 14968 }); 14969 }, 14970 flush: function flush() { 14971 cache.registered = {}; 14972 cache.inserted = {}; 14973 cache.sheet.flush(); 14974 }, 14975 // $FlowFixMe 14976 sheet: cache.sheet, 14977 cache: cache, 14978 getRegisteredStyles: emotion_utils_browser_esm_getRegisteredStyles.bind(null, cache.registered), 14979 merge: merge.bind(null, cache.registered, css) 14980 }; 14981}; 14982 14983var emotion_css_create_instance_esm_classnames = function classnames(args) { 14984 var cls = ''; 14985 14986 for (var i = 0; i < args.length; i++) { 14987 var arg = args[i]; 14988 if (arg == null) continue; 14989 var toAdd = void 0; 14990 14991 switch (typeof arg) { 14992 case 'boolean': 14993 break; 14994 14995 case 'object': 14996 { 14997 if (Array.isArray(arg)) { 14998 toAdd = classnames(arg); 14999 } else { 15000 toAdd = ''; 15001 15002 for (var k in arg) { 15003 if (arg[k] && k) { 15004 toAdd && (toAdd += ' '); 15005 toAdd += k; 15006 } 15007 } 15008 } 15009 15010 break; 15011 } 15012 15013 default: 15014 { 15015 toAdd = arg; 15016 } 15017 } 15018 15019 if (toAdd) { 15020 cls && (cls += ' '); 15021 cls += toAdd; 15022 } 15023 } 15024 15025 return cls; 15026}; 15027 15028/* harmony default export */ const emotion_css_create_instance_esm = (createEmotion); 15029 15030;// CONCATENATED MODULE: ./node_modules/@emotion/css/dist/emotion-css.esm.js 15031 15032 15033 15034 15035 15036var _createEmotion = emotion_css_create_instance_esm({ 15037 key: 'css' 15038}), 15039 flush = _createEmotion.flush, 15040 hydrate = _createEmotion.hydrate, 15041 emotion_css_esm_cx = _createEmotion.cx, 15042 emotion_css_esm_merge = _createEmotion.merge, 15043 emotion_css_esm_getRegisteredStyles = _createEmotion.getRegisteredStyles, 15044 injectGlobal = _createEmotion.injectGlobal, 15045 keyframes = _createEmotion.keyframes, 15046 css = _createEmotion.css, 15047 sheet = _createEmotion.sheet, 15048 cache = _createEmotion.cache; 15049 15050 15051 15052;// CONCATENATED MODULE: ./packages/components/build-module/utils/hooks/use-cx.js 15053/** 15054 * External dependencies 15055 */ 15056 15057 15058// eslint-disable-next-line no-restricted-imports 15059 15060// eslint-disable-next-line no-restricted-imports 15061 15062 15063/** 15064 * WordPress dependencies 15065 */ 15066 15067const isSerializedStyles = o => typeof o !== 'undefined' && o !== null && ['name', 'styles'].every(p => typeof o[p] !== 'undefined'); 15068 15069/** 15070 * Retrieve a `cx` function that knows how to handle `SerializedStyles` 15071 * returned by the `@emotion/react` `css` function in addition to what 15072 * `cx` normally knows how to handle. It also hooks into the Emotion 15073 * Cache, allowing `css` calls to work inside iframes. 15074 * 15075 * ```jsx 15076 * import { css } from '@emotion/react'; 15077 * 15078 * const styles = css` 15079 * color: red 15080 * `; 15081 * 15082 * function RedText( { className, ...props } ) { 15083 * const cx = useCx(); 15084 * 15085 * const classes = cx(styles, className); 15086 * 15087 * return <span className={classes} {...props} />; 15088 * } 15089 * ``` 15090 */ 15091const useCx = () => { 15092 const cache = __unsafe_useEmotionCache(); 15093 const cx = (0,external_wp_element_namespaceObject.useCallback)((...classNames) => { 15094 if (cache === null) { 15095 throw new Error('The `useCx` hook should be only used within a valid Emotion Cache Context'); 15096 } 15097 return emotion_css_esm_cx(...classNames.map(arg => { 15098 if (isSerializedStyles(arg)) { 15099 emotion_utils_browser_esm_insertStyles(cache, arg, false); 15100 return `${cache.key}-${arg.name}`; 15101 } 15102 return arg; 15103 })); 15104 }, [cache]); 15105 return cx; 15106}; 15107 15108;// CONCATENATED MODULE: ./packages/components/build-module/ui/context/use-context-system.js 15109/** 15110 * WordPress dependencies 15111 */ 15112 15113 15114/** 15115 * Internal dependencies 15116 */ 15117 15118 15119 15120 15121 15122/** 15123 * @template TProps 15124 * @typedef {TProps & { className: string }} ConnectedProps 15125 */ 15126 15127/** 15128 * Custom hook that derives registered props from the Context system. 15129 * These derived props are then consolidated with incoming component props. 15130 * 15131 * @template {{ className?: string }} P 15132 * @param {P} props Incoming props from the component. 15133 * @param {string} namespace The namespace to register and to derive context props from. 15134 * @return {ConnectedProps<P>} The connected props. 15135 */ 15136function useContextSystem(props, namespace) { 15137 const contextSystemProps = useComponentsContext(); 15138 if (typeof namespace === 'undefined') { 15139 false ? 0 : void 0; 15140 } 15141 const contextProps = contextSystemProps?.[namespace] || {}; 15142 15143 /* eslint-disable jsdoc/no-undefined-types */ 15144 /** @type {ConnectedProps<P>} */ 15145 // @ts-ignore We fill in the missing properties below 15146 const finalComponentProps = { 15147 ...getConnectedNamespace(), 15148 ...getNamespace(namespace) 15149 }; 15150 /* eslint-enable jsdoc/no-undefined-types */ 15151 15152 const { 15153 _overrides: overrideProps, 15154 ...otherContextProps 15155 } = contextProps; 15156 const initialMergedProps = Object.entries(otherContextProps).length ? Object.assign({}, otherContextProps, props) : props; 15157 const cx = useCx(); 15158 const classes = cx(getStyledClassNameFromKey(namespace), props.className); 15159 15160 // Provides the ability to customize the render of the component. 15161 const rendered = typeof initialMergedProps.renderChildren === 'function' ? initialMergedProps.renderChildren(initialMergedProps) : initialMergedProps.children; 15162 for (const key in initialMergedProps) { 15163 // @ts-ignore filling in missing props 15164 finalComponentProps[key] = initialMergedProps[key]; 15165 } 15166 for (const key in overrideProps) { 15167 // @ts-ignore filling in missing props 15168 finalComponentProps[key] = overrideProps[key]; 15169 } 15170 15171 // Setting an `undefined` explicitly can cause unintended overwrites 15172 // when a `cloneElement()` is involved. 15173 if (rendered !== undefined) { 15174 // @ts-ignore 15175 finalComponentProps.children = rendered; 15176 } 15177 finalComponentProps.className = classes; 15178 return finalComponentProps; 15179} 15180 15181;// CONCATENATED MODULE: ./packages/components/build-module/ui/context/context-connect.
15181js 15182/** 15183 * External dependencies 15184 */ 15185 15186/** 15187 * WordPress dependencies 15188 */ 15189 15190 15191 15192/** 15193 * Internal dependencies 15194 */ 15195 15196 15197/** 15198 * Forwards ref (React.ForwardRef) and "Connects" (or registers) a component 15199 * within the Context system under a specified namespace. 15200 * 15201 * @param Component The component to register into the Context system. 15202 * @param namespace The namespace to register the component under. 15203 * @return The connected WordPressComponent 15204 */ 15205function contextConnect(Component, namespace) { 15206 return _contextConnect(Component, namespace, { 15207 forwardsRef: true 15208 }); 15209} 15210 15211/** 15212 * "Connects" (or registers) a component within the Context system under a specified namespace. 15213 * Does not forward a ref. 15214 * 15215 * @param Component The component to register into the Context system. 15216 * @param namespace The namespace to register the component under. 15217 * @return The connected WordPressComponent 15218 */ 15219function contextConnectWithoutRef(Component, namespace) { 15220 return _contextConnect(Component, namespace); 15221} 15222 15223// This is an (experimental) evolution of the initial connect() HOC. 15224// The hope is that we can improve render performance by removing functional 15225// component wrappers. 15226function _contextConnect(Component, namespace, options) { 15227 const WrappedComponent = options?.forwardsRef ? (0,external_wp_element_namespaceObject.forwardRef)(Component) : Component; 15228 if (typeof namespace === 'undefined') { 15229 false ? 0 : void 0; 15230 } 15231 15232 // @ts-expect-error internal property 15233 let mergedNamespace = WrappedComponent[CONNECT_STATIC_NAMESPACE] || [namespace]; 15234 15235 /** 15236 * Consolidate (merge) namespaces before attaching it to the WrappedComponent. 15237 */ 15238 if (Array.isArray(namespace)) { 15239 mergedNamespace = [...mergedNamespace, ...namespace]; 15240 } 15241 if (typeof namespace === 'string') { 15242 mergedNamespace = [...mergedNamespace, namespace]; 15243 } 15244 15245 // @ts-expect-error We can't rely on inferred types here because of the 15246 // `as` prop polymorphism we're handling in https://github.com/WordPress/gutenberg/blob/9620bae6fef4fde7cc2b7833f416e240207cda29/packages/components/src/ui/context/wordpress-component.ts#L32-L33 15247 return Object.assign(WrappedComponent, { 15248 [CONNECT_STATIC_NAMESPACE]: [...new Set(mergedNamespace)], 15249 displayName: namespace, 15250 selector: `.${getStyledClassNameFromKey(namespace)}` 15251 }); 15252} 15253 15254/** 15255 * Attempts to retrieve the connected namespace from a component. 15256 * 15257 * @param Component The component to retrieve a namespace from. 15258 * @return The connected namespaces. 15259 */ 15260function getConnectNamespace(Component) { 15261 if (!Component) return []; 15262 let namespaces = []; 15263 15264 // @ts-ignore internal property 15265 if (Component[CONNECT_STATIC_NAMESPACE]) { 15266 // @ts-ignore internal property 15267 namespaces = Component[CONNECT_STATIC_NAMESPACE]; 15268 } 15269 15270 // @ts-ignore 15271 if (Component.type && Component.type[CONNECT_STATIC_NAMESPACE]) { 15272 // @ts-ignore 15273 namespaces = Component.type[CONNECT_STATIC_NAMESPACE]; 15274 } 15275 return namespaces; 15276} 15277 15278/** 15279 * Checks to see if a component is connected within the Context system. 15280 * 15281 * @param Component The component to retrieve a namespace from. 15282 * @param match The namespace to check. 15283 */ 15284function hasConnectNamespace(Component, match) { 15285 if (!Component) return false; 15286 if (typeof match === 'string') { 15287 return getConnectNamespace(Component).includes(match); 15288 } 15289 if (Array.isArray(match)) { 15290 return match.some(result => getConnectNamespace(Component).includes(result)); 15291 } 15292 return false; 15293} 15294 15295;// CONCATENATED MODULE: ./packages/components/build-module/visually-hidden/styles.js 15296/** 15297 * External dependencies 15298 */ 15299 15300const visuallyHidden = { 15301 border: 0, 15302 clip: 'rect(1px, 1px, 1px, 1px)', 15303 WebkitClipPath: 'inset( 50% )', 15304 clipPath: 'inset( 50% )', 15305 height: '1px', 15306 margin: '-1px', 15307 overflow: 'hidden', 15308 padding: 0, 15309 position: 'absolute', 15310 width: '1px', 15311 wordWrap: 'normal' 15312}; 15313 15314;// CONCATENATED MODULE: ./node_modules/@babel/runtime/helpers/esm/extends.js 15315function extends_extends() { 15316 extends_extends = Object.assign ? Object.assign.bind() : function (target) { 15317 for (var i = 1; i < arguments.length; i++) { 15318 var source = arguments[i]; 15319 for (var key in source) { 15320 if (Object.prototype.hasOwnProperty.call(source, key)) { 15321 target[key] = source[key]; 15322 } 15323 } 15324 } 15325 return target; 15326 }; 15327 return extends_extends.apply(this, arguments); 15328} 15329;// CONCATENATED MODULE: ./node_modules/@emotion/styled/node_modules/@emotion/memoize/dist/emotion-memoize.esm.js 15330function emotion_memoize_esm_memoize(fn) { 15331 var cache = Object.create(null); 15332 return function (arg) { 15333 if (cache[arg] === undefined) cache[arg] = fn(arg); 15334 return cache[arg]; 15335 }; 15336} 15337 15338 15339 15340;// CONCATENATED MODULE: ./node_modules/@emotion/styled/node_modules/@emotion/is-prop-valid/dist/emotion-is-prop-valid.esm.js 15341 15342 15343var 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|playsInl
15343ine|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 15344 15345var isPropValid = /* #__PURE__ */emotion_memoize_esm_memoize(function (prop) { 15346 return reactPropsRegex.test(prop) || prop.charCodeAt(0) === 111 15347 /* o */ 15348 && prop.charCodeAt(1) === 110 15349 /* n */ 15350 && prop.charCodeAt(2) < 91; 15351} 15352/* Z+1 */ 15353); 15354 15355 15356 15357;// CONCATENATED MODULE: ./node_modules/@emotion/styled/base/dist/emotion-styled-base.browser.esm.js 15358 15359 15360 15361 15362 15363 15364 15365var testOmitPropsOnStringTag = isPropValid; 15366 15367var testOmitPropsOnComponent = function testOmitPropsOnComponent(key) { 15368 return key !== 'theme'; 15369}; 15370 15371var getDefaultShouldForwardProp = function getDefaultShouldForwardProp(tag) { 15372 return typeof tag === 'string' && // 96 is one less than the char code 15373 // for "a" so this is checking that 15374 // it's a lowercase character 15375 tag.charCodeAt(0) > 96 ? testOmitPropsOnStringTag : testOmitPropsOnComponent; 15376}; 15377var composeShouldForwardProps = function composeShouldForwardProps(tag, options, isReal) { 15378 var shouldForwardProp; 15379 15380 if (options) { 15381 var optionsShouldForwardProp = options.shouldForwardProp; 15382 shouldForwardProp = tag.__emotion_forwardProp && optionsShouldForwardProp ? function (propName) { 15383 return tag.__emotion_forwardProp(propName) && optionsShouldForwardProp(propName); 15384 } : optionsShouldForwardProp; 15385 } 15386 15387 if (typeof shouldForwardProp !== 'function' && isReal) { 15388 shouldForwardProp = tag.__emotion_forwardProp; 15389 } 15390 15391 return shouldForwardProp; 15392}; 15393 15394var 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"; 15395 15396var emotion_styled_base_browser_esm_Noop = function Noop() { 15397 return null; 15398}; 15399 15400var createStyled = function createStyled(tag, options) { 15401 if (false) {} 15402 15403 var isReal = tag.__emotion_real === tag; 15404 var baseTag = isReal && tag.__emotion_base || tag; 15405 var identifierName; 15406 var targetClassName; 15407 15408 if (options !== undefined) { 15409 identifierName = options.label; 15410 targetClassName = options.target; 15411 } 15412 15413 var shouldForwardProp = composeShouldForwardProps(tag, options, isReal); 15414 var defaultShouldForwardProp = shouldForwardProp || getDefaultShouldForwardProp(baseTag); 15415 var shouldUseAs = !defaultShouldForwardProp('as'); 15416 return function () { 15417 var args = arguments; 15418 var styles = isReal && tag.__emotion_styles !== undefined ? tag.__emotion_styles.slice(0) : []; 15419 15420 if (identifierName !== undefined) { 15421 styles.push("label:" + identifierName + ";"); 15422 } 15423
vendor: 4,177 bytes, lines 15424-15552
15424 if (args[0] == null || args[0].raw === undefined) { 15425 styles.push.apply(styles, args); 15426 } else { 15427 if (false) {} 15428 15429 styles.push(args[0][0]); 15430 var len = args.length; 15431 var i = 1; 15432 15433 for (; i < len; i++) { 15434 if (false) {} 15435 15436 styles.push(args[i], args[0][i]); 15437 } 15438 } // $FlowFixMe: we need to cast StatelessFunctionalComponent to our PrivateStyledComponent class 15439 15440 15441 var Styled = emotion_element_699e6908_browser_esm_withEmotionCache(function (props, cache, ref) { 15442 var finalTag = shouldUseAs && props.as || baseTag; 15443 var className = ''; 15444 var classInterpolations = []; 15445 var mergedProps = props; 15446 15447 if (props.theme == null) { 15448 mergedProps = {}; 15449 15450 for (var key in props) { 15451 mergedProps[key] = props[key]; 15452 } 15453 15454 mergedProps.theme = (0,external_React_.useContext)(emotion_element_699e6908_browser_esm_ThemeContext); 15455 } 15456 15457 if (typeof props.className === 'string') { 15458 className = emotion_utils_browser_esm_getRegisteredStyles(cache.registered, classInterpolations, props.className); 15459 } else if (props.className != null) { 15460 className = props.className + " "; 15461 } 15462 15463 var serialized = emotion_serialize_browser_esm_serializeStyles(styles.concat(classInterpolations), cache.registered, mergedProps); 15464 var rules = emotion_utils_browser_esm_insertStyles(cache, serialized, typeof finalTag === 'string'); 15465 className += cache.key + "-" + serialized.name; 15466 15467 if (targetClassName !== undefined) { 15468 className += " " + targetClassName; 15469 } 15470 15471 var finalShouldForwardProp = shouldUseAs && shouldForwardProp === undefined ? getDefaultShouldForwardProp(finalTag) : defaultShouldForwardProp; 15472 var newProps = {}; 15473 15474 for (var _key in props) { 15475 if (shouldUseAs && _key === 'as') continue; 15476 15477 if ( // $FlowFixMe 15478 finalShouldForwardProp(_key)) { 15479 newProps[_key] = props[_key]; 15480 } 15481 } 15482 15483 newProps.className = className; 15484 newProps.ref = ref; 15485 var ele = /*#__PURE__*/(0,external_React_.createElement)(finalTag, newProps); 15486 var possiblyStyleElement = /*#__PURE__*/(0,external_React_.createElement)(emotion_styled_base_browser_esm_Noop, null); 15487 15488 15489 return /*#__PURE__*/(0,external_React_.createElement)(external_React_.Fragment, null, possiblyStyleElement, ele); 15490 }); 15491 Styled.displayName = identifierName !== undefined ? identifierName : "Styled(" + (typeof baseTag === 'string' ? baseTag : baseTag.displayName || baseTag.name || 'Component') + ")"; 15492 Styled.defaultProps = tag.defaultProps; 15493 Styled.__emotion_real = Styled; 15494 Styled.__emotion_base = baseTag; 15495 Styled.__emotion_styles = styles; 15496 Styled.__emotion_forwardProp = shouldForwardProp; 15497 Object.defineProperty(Styled, 'toString', { 15498 value: function value() { 15499 if (targetClassName === undefined && "production" !== 'production') {} // $FlowFixMe: coerce undefined to string 15500 15501 15502 return "." + targetClassName; 15503 } 15504 }); 15505 15506 Styled.withComponent = function (nextTag, nextOptions) { 15507 return createStyled(nextTag, extends_extends({}, options, nextOptions, { 15508 shouldForwardProp: composeShouldForwardProps(Styled, nextOptions, true) 15509 })).apply(void 0, styles); 15510 }; 15511 15512 return Styled; 15513 }; 15514}; 15515 15516/* harmony default export */ const emotion_styled_base_browser_esm = (createStyled); 15517 15518;// CONCATENATED MODULE: ./packages/components/build-module/view/component.js 15519 15520/** 15521 * External dependencies 15522 */ 15523 15524/** 15525 * `View` is a core component that renders everything in the library. 15526 * It is the principle component in the entire library. 15527 * 15528 * ```jsx 15529 * import { View } from `@wordpress/components`; 15530 * 15531 * function Example() { 15532 * return ( 15533 * <View> 15534 * Code is Poetry 15535 * </View> 15536 * ); 15537 * } 15538 * ``` 15539 */ 15540const View = emotion_styled_base_browser_esm("div", true ? { 15541 target: "e19lxcc00" 15542} : 0)( true ? "" : 0); 15543View.selector = '.components-view'; 15544View.displayName = 'View'; 15545/* harmony default export */ const component = (View); 15546 15547;// CONCATENATED MODULE: ./packages/components/build-module/visually-hidden/component.js 15548 15549/** 15550 * External dependencies 15551 */ 15552
15553/** 15554 * Internal dependencies 15555 */ 15556 15557 15558 15559 15560function UnconnectedVisuallyHidden(props, forwardedRef) { 15561 const { 15562 style: styleProp, 15563 ...contextProps 15564 } = useContextSystem(props, 'VisuallyHidden'); 15565 return (0,external_wp_element_namespaceObject.createElement)(component, { 15566 ref: forwardedRef, 15567 ...contextProps, 15568 style: { 15569 ...visuallyHidden, 15570 ...(styleProp || {}) 15571 } 15572 }); 15573} 15574 15575/** 15576 * `VisuallyHidden` is a component used to render text intended to be visually 15577 * hidden, but will show for alternate devices, for example a screen reader. 15578 * 15579 * ```jsx 15580 * import { VisuallyHidden } from `@wordpress/components`; 15581 * 15582 * function Example() { 15583 * return ( 15584 * <VisuallyHidden> 15585 * <label>Code is Poetry</label> 15586 * </VisuallyHidden> 15587 * ); 15588 * } 15589 * ``` 15590 */ 15591const component_VisuallyHidden = contextConnect(UnconnectedVisuallyHidden, 'VisuallyHidden'); 15592/* harmony default export */ const visually_hidden_component = (component_VisuallyHidden); 15593 15594;// CONCATENATED MODULE: ./packages/components/build-module/alignment-matrix-control/utils.js 15595/** 15596 * WordPress dependencies 15597 */ 15598 15599/** 15600 * Internal dependencies 15601 */ 15602 15603const GRID = [['top left', 'top center', 'top right'], ['center left', 'center center', 'center right'], ['bottom left', 'bottom center', 'bottom right']]; 15604 15605// Stored as map as i18n __() only accepts strings (not variables) 15606const ALIGNMENT_LABEL = { 15607 'top left': (0,external_wp_i18n_namespaceObject.__)('Top Left'), 15608 'top center': (0,external_wp_i18n_namespaceObject.__)('Top Center'), 15609 'top right': (0,external_wp_i18n_namespaceObject.__)('Top Right'), 15610 'center left': (0,external_wp_i18n_namespaceObject.__)('Center Left'), 15611 'center center': (0,external_wp_i18n_namespaceObject.__)('Center'), 15612 center: (0,external_wp_i18n_namespaceObject.__)('Center'), 15613 'center right': (0,external_wp_i18n_namespaceObject.__)('Center Right'), 15614 'bottom left': (0,external_wp_i18n_namespaceObject.__)('Bottom Left'), 15615 'bottom center': (0,external_wp_i18n_namespaceObject.__)('Bottom Center'), 15616 'bottom right': (0,external_wp_i18n_namespaceObject.__)('Bottom Right') 15617}; 15618 15619// Transforms GRID into a flat Array of values. 15620const ALIGNMENTS = GRID.flat(); 15621 15622/** 15623 * Parses and transforms an incoming value to better match the alignment values 15624 * 15625 * @param value An alignment value to parse. 15626 * 15627 * @return The parsed value. 15628 */ 15629function transformValue(value) { 15630 const nextValue = value === 'center' ? 'center center' : value; 15631 return nextValue.replace('-', ' '); 15632} 15633 15634/** 15635 * Creates an item ID based on a prefix ID and an alignment value. 15636 * 15637 * @param prefixId An ID to prefix. 15638 * @param value An alignment value. 15639 * 15640 * @return The item id. 15641 */ 15642function getItemId(prefixId, value) { 15643 const valueId = transformValue(value).replace(' ', '-'); 15644 return `${prefixId}-${valueId}`; 15645} 15646 15647/** 15648 * Retrieves the alignment index from a value. 15649 * 15650 * @param alignment Value to check. 15651 * 15652 * @return The index of a matching alignment. 15653 */ 15654function getAlignmentIndex(alignment = 'center') { 15655 const item = transformValue(alignment); 15656 const index = ALIGNMENTS.indexOf(item); 15657 return index > -1 ? index : undefined; 15658} 15659 15660// EXTERNAL MODULE: ./node_modules/hoist-non-react-statics/dist/hoist-non-react-statics.cjs.js 15661var hoist_non_react_statics_cjs = __webpack_require__(1281); 15662;// CONCATENATED MODULE: ./node_modules/@emotion/react/dist/emotion-react.browser.esm.js 15663 15664 15665 15666 15667 15668 15669 15670 15671 15672 15673 15674 15675var pkg = { 15676 name: "@emotion/react", 15677 version: "11.7.1", 15678 main: "dist/emotion-react.cjs.js", 15679 module: "dist/emotion-react.esm.js", 15680 browser: { 15681 "./dist/emotion-react.cjs.js": "./dist/emotion-react.browser.cjs.js", 15682 "./dist/emotion-react.esm.js": "./dist/emotion-react.browser.esm.js" 15683 }, 15684 types: "types/index.d.ts", 15685 files: [ 15686 "src", 15687 "dist", 15688 "jsx-runtime", 15689 "jsx-dev-runtime", 15690 "_isolated-hnrs", 15691 "types/*.d.ts", 15692 "macro.js", 15693 "macro.d.ts", 15694 "macro.js.flow" 15695 ], 15696 sideEffects: false, 15697 author: "mitchellhamilton <[email protected]>", 15698 license: "MIT", 15699 scripts: { 15700 "test:typescript": "dtslint types" 15701 }, 15702 dependencies: { 15703 "@babel/runtime": "^7.13.10", 15704 "@emotion/cache": "^11.7.1", 15705 "@emotion/serialize": "^1.0.2", 15706 "@emotion/sheet": "^1.1.0", 15707 "@emotion/utils": "^1.0.0", 15708 "@emotion/weak-memoize": "^0.2.5", 15709 "hoist-non-react-statics": "^3.3.1" 15710 },
vendor: 4,292 bytes, lines 15711-15865
15711 peerDependencies: { 15712 "@babel/core": "^7.0.0", 15713 react: ">=16.8.0" 15714 }, 15715 peerDependenciesMeta: { 15716 "@babel/core": { 15717 optional: true 15718 }, 15719 "@types/react": { 15720 optional: true 15721 } 15722 }, 15723 devDependencies: { 15724 "@babel/core": "^7.13.10", 15725 "@emotion/css": "11.7.1", 15726 "@emotion/css-prettifier": "1.0.1", 15727 "@emotion/server": "11.4.0", 15728 "@emotion/styled": "11.6.0", 15729 "@types/react": "^16.9.11", 15730 dtslint: "^0.3.0", 15731 "html-tag-names": "^1.1.2", 15732 react: "16.14.0", 15733 "svg-tag-names": "^1.1.1" 15734 }, 15735 repository: "https://github.com/emotion-js/emotion/tree/main/packages/react", 15736 publishConfig: { 15737 access: "public" 15738 }, 15739 "umd:main": "dist/emotion-react.umd.min.js", 15740 preconstruct: { 15741 entrypoints: [ 15742 "./index.js", 15743 "./jsx-runtime.js", 15744 "./jsx-dev-runtime.js", 15745 "./_isolated-hnrs.js" 15746 ], 15747 umdName: "emotionReact" 15748 } 15749}; 15750 15751var jsx = function jsx(type, props) { 15752 var args = arguments; 15753 15754 if (props == null || !hasOwnProperty.call(props, 'css')) { 15755 // $FlowFixMe 15756 return createElement.apply(undefined, args); 15757 } 15758 15759 var argsLength = args.length; 15760 var createElementArgArray = new Array(argsLength); 15761 createElementArgArray[0] = Emotion; 15762 createElementArgArray[1] = createEmotionProps(type, props); 15763 15764 for (var i = 2; i < argsLength; i++) { 15765 createElementArgArray[i] = args[i]; 15766 } // $FlowFixMe 15767 15768 15769 return createElement.apply(null, createElementArgArray); 15770}; 15771 15772var warnedAboutCssPropForGlobal = false; // maintain place over rerenders. 15773// initial render from browser, insertBefore context.sheet.tags[0] or if a style hasn't been inserted there yet, appendChild 15774// initial client-side render from SSR, use place of hydrating tag 15775 15776var Global = /* #__PURE__ */(/* unused pure expression or super */ null && (withEmotionCache(function (props, cache) { 15777 if (false) {} 15778 15779 var styles = props.styles; 15780 var serialized = serializeStyles([styles], undefined, useContext(ThemeContext)); 15781 // but it is based on a constant that will never change at runtime 15782 // it's effectively like having two implementations and switching them out 15783 // so it's not actually breaking anything 15784 15785 15786 var sheetRef = useRef(); 15787 useLayoutEffect(function () { 15788 var key = cache.key + "-global"; 15789 var sheet = new StyleSheet({ 15790 key: key, 15791 nonce: cache.sheet.nonce, 15792 container: cache.sheet.container, 15793 speedy: cache.sheet.isSpeedy 15794 }); 15795 var rehydrating = false; // $FlowFixMe 15796 15797 var node = document.querySelector("style[data-emotion=\"" + key + " " + serialized.name + "\"]"); 15798 15799 if (cache.sheet.tags.length) { 15800 sheet.before = cache.sheet.tags[0]; 15801 } 15802 15803 if (node !== null) { 15804 rehydrating = true; // clear the hash so this node won't be recognizable as rehydratable by other <Global/>s 15805 15806 node.setAttribute('data-emotion', key); 15807 sheet.hydrate([node]); 15808 } 15809 15810 sheetRef.current = [sheet, rehydrating]; 15811 return function () { 15812 sheet.flush(); 15813 }; 15814 }, [cache]); 15815 useLayoutEffect(function () { 15816 var sheetRefCurrent = sheetRef.current; 15817 var sheet = sheetRefCurrent[0], 15818 rehydrating = sheetRefCurrent[1]; 15819 15820 if (rehydrating) { 15821 sheetRefCurrent[1] = false; 15822 return; 15823 } 15824 15825 if (serialized.next !== undefined) { 15826 // insert keyframes 15827 insertStyles(cache, serialized.next, true); 15828 } 15829 15830 if (sheet.tags.length) { 15831 // if this doesn't exist then it will be null so the style element will be appended 15832 var element = sheet.tags[sheet.tags.length - 1].nextElementSibling; 15833 sheet.before = element; 15834 sheet.flush(); 15835 } 15836 15837 cache.insert("", serialized, sheet, false); 15838 }, [cache, serialized.name]); 15839 return null; 15840}))); 15841 15842if (false) {} 15843 15844function emotion_react_browser_esm_css() { 15845 for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) { 15846 args[_key] = arguments[_key]; 15847 } 15848 15849 return emotion_serialize_browser_esm_serializeStyles(args); 15850} 15851 15852var emotion_react_browser_esm_keyframes = function keyframes() { 15853 var insertable = emotion_react_browser_esm_css.apply(void 0, arguments); 15854 var name = "animation-" + insertable.name; // $FlowFixMe 15855 15856 return { 15857 name: name, 15858 styles: "@keyframes " + name + "{" + insertable.styles + "}", 15859 anim: 1, 15860 toString: function toString() { 15861 return "_EMO_" + this.name + "_" + this.styles + "_EMO_"; 15862 } 15863 }; 15864}; 15865
15866var emotion_react_browser_esm_classnames = function classnames(args) { 15867 var len = args.length; 15868 var i = 0; 15869 var cls = ''; 15870 15871 for (; i < len; i++) { 15872 var arg = args[i]; 15873 if (arg == null) continue; 15874 var toAdd = void 0; 15875 15876 switch (typeof arg) { 15877 case 'boolean': 15878 break; 15879 15880 case 'object': 15881 { 15882 if (Array.isArray(arg)) { 15883 toAdd = classnames(arg); 15884 } else { 15885 if (false) {} 15886 15887 toAdd = ''; 15888 15889 for (var k in arg) { 15890 if (arg[k] && k) { 15891 toAdd && (toAdd += ' '); 15892 toAdd += k; 15893 } 15894 } 15895 } 15896 15897 break; 15898 } 15899 15900 default: 15901 { 15902 toAdd = arg; 15903 } 15904 } 15905 15906 if (toAdd) { 15907 cls && (cls += ' '); 15908 cls += toAdd; 15909 } 15910 } 15911 15912 return cls; 15913}; 15914 15915function emotion_react_browser_esm_merge(registered, css, className) { 15916 var registeredStyles = []; 15917 var rawClassName = getRegisteredStyles(registered, registeredStyles, className); 15918 15919 if (registeredStyles.length < 2) { 15920 return className; 15921 } 15922 15923 return rawClassName + css(registeredStyles); 15924} 15925 15926var emotion_react_browser_esm_Noop = function Noop() { 15927 return null; 15928}; 15929 15930var ClassNames = /* #__PURE__ */(/* unused pure expression or super */ null && (withEmotionCache(function (props, cache) { 15931 var hasRendered = false; 15932 15933 var css = function css() { 15934 if (hasRendered && "production" !== 'production') {} 15935 15936 for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) { 15937 args[_key] = arguments[_key]; 15938 } 15939 15940 var serialized = serializeStyles(args, cache.registered); 15941 15942 { 15943 insertStyles(cache, serialized, false); 15944 } 15945 15946 return cache.key + "-" + serialized.name; 15947 }; 15948 15949 var cx = function cx() { 15950 if (hasRendered && "production" !== 'production') {} 15951 15952 for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) { 15953 args[_key2] = arguments[_key2]; 15954 } 15955 15956 return emotion_react_browser_esm_merge(cache.registered, css, emotion_react_browser_esm_classnames(args)); 15957 }; 15958 15959 var content = { 15960 css: css, 15961 cx: cx, 15962 theme: useContext(ThemeContext) 15963 }; 15964 var ele = props.children(content); 15965 hasRendered = true; 15966 var possiblyStyleElement = /*#__PURE__*/createElement(emotion_react_browser_esm_Noop, null); 15967 15968 15969 return /*#__PURE__*/createElement(Fragment, null, possiblyStyleElement, ele); 15970}))); 15971 15972if (false) {} 15973 15974if (false) { var globalKey, globalContext, isJest, emotion_react_browser_esm_isBrowser; } 15975 15976 15977 15978;// CONCATENATED MODULE: ./node_modules/colord/index.mjs 15979var 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)}},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*,\
vendor: 7,134 bytes, lines 15979-15982
15979s*([+-]?\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=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()})}; 15980 15981;// CONCATENATED MODULE: ./node_modules/colord/plugins/names.mjs 15982/* 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",s
15982andybrown:"#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"])} 15983 15984;// CONCATENATED MODULE: ./packages/components/build-module/utils/colors.js 15985/** 15986 * External dependencies 15987 */ 15988 15989 15990k([names]); 15991 15992/** 15993 * Generating a CSS compliant rgba() color value. 15994 * 15995 * @param {string} hexValue The hex value to convert to rgba(). 15996 * @param {number} alpha The alpha value for opacity. 15997 * @return {string} The converted rgba() color value. 15998 * 15999 * @example 16000 * rgba( '#000000', 0.5 ) 16001 * // rgba(0, 0, 0, 0.5) 16002 */ 16003function rgba(hexValue = '', alpha = 1) { 16004 return w(hexValue).alpha(alpha).toRgbString(); 16005} 16006 16007;// CONCATENATED MODULE: ./packages/components/build-module/utils/colors-values.js 16008/** 16009 * Internal dependencies 16010 */ 16011 16012const white = '#fff'; 16013 16014// Matches the grays in @wordpress/base-styles 16015const GRAY = { 16016 900: '#1e1e1e', 16017 800: '#2f2f2f', 16018 /** Meets 4.6:1 text contrast against white. */ 16019 700: '#757575', 16020 /** Meets 3:1 UI or large text contrast against white. */ 16021 600: '#949494', 16022 400: '#ccc', 16023 /** Used for most borders. */ 16024 300: '#ddd', 16025 /** Used sparingly for light borders. */ 16026 200: '#e0e0e0', 16027 /** Used for light gray backgrounds. */ 16028 100: '#f0f0f0' 16029}; 16030 16031// Matches @wordpress/base-styles 16032const ALERT = { 16033 yellow: '#f0b849', 16034 red: '#d94f4f', 16035 green: '#4ab866' 16036}; 16037 16038// Matches the Modern admin scheme in @wordpress/base-styles 16039const ADMIN = { 16040 theme: 'var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9))', 16041 themeDark10: 'var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #2145e6))' 16042}; 16043const UI = { 16044 background: white, 16045 backgroundDisabled: GRAY[100], 16046 border: GRAY[600], 16047 borderHover: GRAY[700], 16048 borderFocus: ADMIN.theme, 16049 borderDisabled: GRAY[400], 16050 textDisabled: GRAY[600], 16051 textDark: white, 16052 // Matches @wordpress/base-styles 16053 darkGrayPlaceholder: rgba(GRAY[900], 0.62), 16054 lightGrayPlaceholder: rgba(white, 0.65) 16055}; 16056const THEME = { 16057 accent: ADMIN.theme, 16058 accentDarker10: ADMIN.themeDark10 16059}; 16060const COLORS = Object.freeze({ 16061 /** 16062 * The main gray color object. 16063 */ 16064 gray: GRAY, 16065 white, 16066 alert: ALERT, 16067 theme: THEME, 16068 ui: UI 16069}); 16070/* harmony default export */ const colors_values = ((/* unused pure expression or super */ null && (COLORS))); 16071 16072;// CONCATENATED MODULE: ./packages/components/build-module/utils/reduce-motion.js 16073/** 16074 * Allows users to opt-out of animations via OS-level preferences. 16075 * 16076 * @param {'transition' | 'animation' | string} [prop='transition'] CSS Property name 16077 * @return {string} Generated CSS code for the reduced style 16078 */ 16079function reduceMotion(prop = 'transition') { 16080 let style; 16081 switch (prop) { 16082 case 'transition': 16083 style = 'transition-duration: 0ms;'; 16084 break; 16085 case 'animation': 16086 style = 'animation-duration: 1ms;'; 16087 break; 16088 default: 16089 style = ` 16090 animation-duration: 1ms; 16091 transition-duration: 0ms; 16092 `; 16093 } 16094 return ` 16095 @media ( prefers-reduced-motion: reduce ) { 16096 ${style}; 16097 } 16098 `; 16099} 16100 16101;// CONCATENATED MODULE: ./packages/components/build-module/alignment-matrix-control/styles/alignment-matrix-control-styles.js 16102 16103function _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)."; } 16104/** 16105 * External dependencies 16106 */ 16107 16108 16109 16110/** 16111 * Internal dependencies 16112 */ 16113 16114var _ref = true ? { 16115 name: "93uojk", 16116 styles: "border-radius:2px;box-sizing:border-box;direction:ltr;display:grid;grid-template-columns:repeat( 3, 1fr );outline:none" 16117} : 0; 16118const rootBase = () => { 16119 return _ref; 16120}; 16121const rootSize = ({ 16122 size = 92 16123}) => {
16124 return /*#__PURE__*/emotion_react_browser_esm_css("grid-template-rows:repeat( 3, calc( ", size, "px / 3 ) );width:", size, "px;" + ( true ? "" : 0), true ? "" : 0); 16125}; 16126const Root = emotion_styled_base_browser_esm("div", true ? { 16127 target: "ecapk1j3" 16128} : 0)(rootBase, ";border:1px solid transparent;cursor:pointer;grid-template-columns:auto;", rootSize, ";" + ( true ? "" : 0)); 16129const Row = emotion_styled_base_browser_esm("div", true ? { 16130 target: "ecapk1j2" 16131} : 0)( true ? { 16132 name: "1x5gbbj", 16133 styles: "box-sizing:border-box;display:grid;grid-template-columns:repeat( 3, 1fr )" 16134} : 0); 16135const pointActive = ({ 16136 isActive 16137}) => { 16138 const boxShadow = isActive ? `0 0 0 2px ${COLORS.gray[900]}` : null; 16139 const pointColor = isActive ? COLORS.gray[900] : COLORS.gray[400]; 16140 const pointColorHover = isActive ? COLORS.gray[900] : COLORS.theme.accent; 16141 return /*#__PURE__*/emotion_react_browser_esm_css("box-shadow:", boxShadow, ";color:", pointColor, ";*:hover>&{color:", pointColorHover, ";}" + ( true ? "" : 0), true ? "" : 0); 16142}; 16143const pointBase = props => { 16144 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); 16145}; 16146const Point = emotion_styled_base_browser_esm("span", true ? { 16147 target: "ecapk1j1" 16148} : 0)("height:6px;width:6px;", pointBase, ";" + ( true ? "" : 0)); 16149const Cell = emotion_styled_base_browser_esm("span", true ? { 16150 target: "ecapk1j0" 16151} : 0)( true ? { 16152 name: "rjf3ub", 16153 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" 16154} : 0); 16155 16156;// CONCATENATED MODULE: ./packages/components/build-module/alignment-matrix-control/cell.js 16157 16158/** 16159 * Internal dependencies 16160 */ 16161 16162 16163 16164 16165/** 16166 * Internal dependencies 16167 */ 16168 16169 16170function cell_Cell({ 16171 isActive = false, 16172 value, 16173 ...props 16174}) { 16175 const tooltipText = ALIGNMENT_LABEL[value]; 16176 return (0,external_wp_element_namespaceObject.createElement)(tooltip, { 16177 text: tooltipText 16178 }, (0,external_wp_element_namespaceObject.createElement)(CompositeItem, { 16179 as: Cell, 16180 role: "gridcell", 16181 ...props 16182 }, (0,external_wp_element_namespaceObject.createElement)(visually_hidden_component, null, value), (0,external_wp_element_namespaceObject.createElement)(Point, { 16183 isActive: isActive, 16184 role: "presentation" 16185 }))); 16186} 16187 16188;// CONCATENATED MODULE: ./node_modules/reakit-utils/es/useSealedState.js 16189 16190 16191/** 16192 * React custom hook that returns the very first value passed to `initialState`, 16193 * even if it changes between re-renders. 16194 */ 16195function useSealedState(initialState) { 16196 var _React$useState = (0,external_React_.useState)(initialState), 16197 sealed = _React$useState[0]; 16198 16199 return sealed; 16200} 16201 16202 16203 16204;// CONCATENATED MODULE: ./node_modules/reakit/es/reverse-30eaa122.js 16205 16206 16207function groupItems(items) { 16208 var groups = [[]]; 16209 16210 var _loop = function _loop() { 16211 var item = _step.value; 16212 var group = groups.find(function (g) { 16213 return !g[0] || g[0].groupId === item.groupId; 16214 }); 16215 16216 if (group) { 16217 group.push(item); 16218 } else { 16219 groups.push([item]); 16220 } 16221 }; 16222 16223 for (var _iterator = _createForOfIteratorHelperLoose(items), _step; !(_step = _iterator()).done;) { 16224 _loop(); 16225 } 16226 16227 return groups; 16228} 16229 16230function flatten(grid) { 16231 var flattened = []; 16232 16233 for (var _iterator = _createForOfIteratorHelperLoose(grid), _step; !(_step = _iterator()).done;) { 16234 var row = _step.value; 16235 flattened.push.apply(flattened, row); 16236 } 16237 16238 return flattened; 16239} 16240 16241function reverse(array) { 16242 return array.slice().reverse(); 16243} 16244 16245 16246 16247;// CONCATENATED MODULE: ./node_modules/reakit/es/findEnabledItemById-8ddca752.js 16248function findEnabledItemById(items, id) { 16249 if (!id) return undefined; 16250 return items === null || items === void 0 ? void 0 : items.find(function (item) { 16251 return item.id === id && !item.disabled; 16252 }); 16253} 16254 16255 16256 16257;// CONCATENATED MODULE: ./node_modules/reakit-utils/es/applyState.js 16258function applyState_isUpdater(argument) { 16259 return typeof argument === "function"; 16260} 16261/** 16262 * Receives a `setState` argument and calls it with `currentValue` if it's a 16263 * function. Otherwise return the argument as the new value. 16264 * 16265 * @example 16266 * import { applyState } from "reakit-utils"; 16267 * 16268 * applyState((value) => value + 1, 1); // 2 16269 * applyState(2, 1); // 2 16270 */ 16271 16272 16273function applyState_applyState(argument, currentValue) {
16274 if (applyState_isUpdater(argument)) { 16275 return argument(currentValue); 16276 } 16277 16278 return argument; 16279} 16280 16281 16282 16283;// CONCATENATED MODULE: ./node_modules/reakit/es/Id/IdState.js 16284 16285 16286 16287 16288function unstable_useIdState(initialState) { 16289 if (initialState === void 0) { 16290 initialState = {}; 16291 } 16292 16293 var _useSealedState = useSealedState(initialState), 16294 initialBaseId = _useSealedState.baseId; 16295 16296 var generateId = (0,external_React_.useContext)(unstable_IdContext); 16297 var idCountRef = (0,external_React_.useRef)(0); 16298 16299 var _React$useState = (0,external_React_.useState)(function () { 16300 return initialBaseId || generateId(); 16301 }), 16302 baseId = _React$useState[0], 16303 setBaseId = _React$useState[1]; 16304 16305 return { 16306 baseId: baseId, 16307 setBaseId: setBaseId, 16308 unstable_idCountRef: idCountRef 16309 }; 16310} 16311 16312 16313 16314;// CONCATENATED MODULE: ./node_modules/reakit/es/Composite/CompositeState.js 16315 16316 16317 16318 16319 16320 16321 16322 16323 16324 16325 16326 16327function isElementPreceding(element1, element2) { 16328 return Boolean(element2.compareDocumentPosition(element1) & Node.DOCUMENT_POSITION_PRECEDING); 16329} 16330 16331function findDOMIndex(items, item) { 16332 return items.findIndex(function (currentItem) { 16333 if (!currentItem.ref.current || !item.ref.current) { 16334 return false; 16335 } 16336 16337 return isElementPreceding(item.ref.current, currentItem.ref.current); 16338 }); 16339} 16340 16341function getMaxLength(rows) { 16342 var maxLength = 0; 16343 16344 for (var _iterator = _createForOfIteratorHelperLoose(rows), _step; !(_step = _iterator()).done;) { 16345 var length = _step.value.length; 16346 16347 if (length > maxLength) { 16348 maxLength = length; 16349 } 16350 } 16351 16352 return maxLength; 16353} 16354 16355/** 16356 * Turns [row1, row1, row2, row2] into [row1, row2, row1, row2] 16357 */ 16358 16359function verticalizeItems(items) { 16360 var groups = groupItems(items); 16361 var maxLength = getMaxLength(groups); 16362 var verticalized = []; 16363 16364 for (var i = 0; i < maxLength; i += 1) { 16365 for (var _iterator = _createForOfIteratorHelperLoose(groups), _step; !(_step = _iterator()).done;) { 16366 var group = _step.value; 16367 16368 if (group[i]) { 16369 verticalized.push(_objectSpread2(_objectSpread2({}, group[i]), {}, { 16370 // If there's no groupId, it means that it's not a grid composite, 16371 // but a single row instead. So, instead of verticalizing it, that 16372 // is, assigning a different groupId based on the column index, we 16373 // keep it undefined so they will be part of the same group. 16374 // It's useful when using up/down on one-dimensional composites. 16375 groupId: group[i].groupId ? "" + i : undefined 16376 })); 16377 } 16378 } 16379 } 16380 16381 return verticalized; 16382} 16383 16384function createEmptyItem(groupId) { 16385 return { 16386 id: "__EMPTY_ITEM__", 16387 disabled: true, 16388 ref: { 16389 current: null 16390 }, 16391 groupId: groupId 16392 }; 16393} 16394/** 16395 * Turns [[row1, row1], [row2]] into [[row1, row1], [row2, row2]] 16396 */ 16397 16398 16399function fillGroups(groups, currentId, shift) { 16400 var maxLength = getMaxLength(groups); 16401 16402 for (var _iterator = _createForOfIteratorHelperLoose(groups), _step; !(_step = _iterator()).done;) { 16403 var group = _step.value; 16404 16405 for (var i = 0; i < maxLength; i += 1) { 16406 var item = group[i]; 16407 16408 if (!item || shift && item.disabled) { 16409 var isFrist = i === 0; 16410 var previousItem = isFrist && shift ? findFirstEnabledItem(group) : group[i - 1]; 16411 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); 16412 } 16413 } 16414 } 16415 16416 return groups; 16417} 16418 16419var nullItem = { 16420 id: null, 16421 ref: { 16422 current: null 16423 } 16424}; 16425function placeItemsAfter(items, id, shouldInsertNullItem) { 16426 var index = items.findIndex(function (item) { 16427 return item.id === id; 16428 }); 16429 return [].concat(items.slice(index + 1), shouldInsertNullItem ? [nullItem] : [], items.slice(0, index)); 16430} 16431 16432function getItemsInGroup(items, groupId) { 16433 return items.filter(function (item) { 16434 return item.groupId === groupId; 16435 }); 16436} 16437 16438var map = { 16439 horizontal: "vertical", 16440 vertical: "horizontal" 16441}; 16442function getOppositeOrientation(orientation) { 16443 return orientation && map[orientation]; 16444} 16445 16446function addItemAtIndex(array, item, index) { 16447 if (!(index in array)) { 16448 return [].concat(array, [item]); 16449 } 16450 16451 return [].concat(array.slice(0, index), [item], array.slice(index)); 16452} 16453 16454function sortBasedOnDOMPosition(items) { 16455 var pairs = items.map(function (item, index) { 16456 return [index, item]; 16457 }); 16458 var isOrderDifferent = false;
16459 pairs.sort(function (_ref, _ref2) { 16460 var indexA = _ref[0], 16461 a = _ref[1]; 16462 var indexB = _ref2[0], 16463 b = _ref2[1]; 16464 var elementA = a.ref.current; 16465 var elementB = b.ref.current; 16466 if (!elementA || !elementB) return 0; // a before b 16467 16468 if (isElementPreceding(elementA, elementB)) { 16469 if (indexA > indexB) { 16470 isOrderDifferent = true; 16471 } 16472 16473 return -1; 16474 } // a after b 16475 16476 16477 if (indexA < indexB) { 16478 isOrderDifferent = true; 16479 } 16480 16481 return 1; 16482 }); 16483 16484 if (isOrderDifferent) { 16485 return pairs.map(function (_ref3) { 16486 var _ = _ref3[0], 16487 item = _ref3[1]; 16488 return item; 16489 }); 16490 } 16491 16492 return items; 16493} 16494 16495function setItemsBasedOnDOMPosition(items, setItems) { 16496 var sortedItems = sortBasedOnDOMPosition(items); 16497 16498 if (items !== sortedItems) { 16499 setItems(sortedItems); 16500 } 16501} 16502 16503function getCommonParent(items) { 16504 var _firstItem$ref$curren; 16505 16506 var firstItem = items[0], 16507 nextItems = items.slice(1); 16508 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; 16509 16510 var _loop = function _loop() { 16511 var parent = parentElement; 16512 16513 if (nextItems.every(function (item) { 16514 return parent.contains(item.ref.current); 16515 })) { 16516 return { 16517 v: parentElement 16518 }; 16519 } 16520 16521 parentElement = parentElement.parentElement; 16522 }; 16523 16524 while (parentElement) { 16525 var _ret = _loop(); 16526 16527 if (typeof _ret === "object") return _ret.v; 16528 } 16529 16530 return getDocument_getDocument(parentElement).body; 16531} // istanbul ignore next: JSDOM doesn't support IntersectionObverser 16532// See https://github.com/jsdom/jsdom/issues/2032 16533 16534 16535function useIntersectionObserver(items, setItems) { 16536 var previousItems = (0,external_React_.useRef)([]); 16537 (0,external_React_.useEffect)(function () { 16538 var callback = function callback() { 16539 var hasPreviousItems = !!previousItems.current.length; // We don't want to sort items if items have been just registered. 16540 16541 if (hasPreviousItems) { 16542 setItemsBasedOnDOMPosition(items, setItems); 16543 } 16544 16545 previousItems.current = items; 16546 }; 16547 16548 var root = getCommonParent(items); 16549 var observer = new IntersectionObserver(callback, { 16550 root: root 16551 }); 16552 16553 for (var _iterator = _createForOfIteratorHelperLoose(items), _step; !(_step = _iterator()).done;) { 16554 var item = _step.value; 16555 16556 if (item.ref.current) { 16557 observer.observe(item.ref.current); 16558 } 16559 } 16560 16561 return function () { 16562 observer.disconnect(); 16563 }; 16564 }, [items]); 16565} 16566 16567function useTimeoutObserver(items, setItems) { 16568 (0,external_React_.useEffect)(function () { 16569 var callback = function callback() { 16570 return setItemsBasedOnDOMPosition(items, setItems); 16571 }; 16572 16573 var timeout = setTimeout(callback, 250); 16574 return function () { 16575 return clearTimeout(timeout); 16576 }; 16577 }); 16578} 16579 16580function useSortBasedOnDOMPosition(items, setItems) { 16581 if (typeof IntersectionObserver === "function") { 16582 useIntersectionObserver(items, setItems); 16583 } else { 16584 useTimeoutObserver(items, setItems); 16585 } 16586} 16587 16588function reducer(state, action) { 16589 var virtual = state.unstable_virtual, 16590 rtl = state.rtl, 16591 orientation = state.orientation, 16592 items = state.items, 16593 groups = state.groups, 16594 currentId = state.currentId, 16595 loop = state.loop, 16596 wrap = state.wrap, 16597 pastIds = state.pastIds, 16598 shift = state.shift, 16599 moves = state.unstable_moves, 16600 includesBaseElement = state.unstable_includesBaseElement, 16601 initialVirtual = state.initialVirtual, 16602 initialRTL = state.initialRTL, 16603 initialOrientation = state.initialOrientation, 16604 initialCurrentId = state.initialCurrentId, 16605 initialLoop = state.initialLoop, 16606 initialWrap = state.initialWrap, 16607 initialShift = state.initialShift, 16608 hasSetCurrentId = state.hasSetCurrentId; 16609 16610 switch (action.type) { 16611 case "registerGroup": 16612 { 16613 var _group = action.group; // If there are no groups yet, just add it as the first one 16614 16615 if (groups.length === 0) {
16616 return _objectSpread2(_objectSpread2({}, state), {}, { 16617 groups: [_group] 16618 }); 16619 } // Finds the group index based on DOM position 16620 16621 16622 var index = findDOMIndex(groups, _group); 16623 return _objectSpread2(_objectSpread2({}, state), {}, { 16624 groups: addItemAtIndex(groups, _group, index) 16625 }); 16626 } 16627 16628 case "unregisterGroup": 16629 { 16630 var _id = action.id; 16631 var nextGroups = groups.filter(function (group) { 16632 return group.id !== _id; 16633 }); // The group isn't registered, so do nothing 16634 16635 if (nextGroups.length === groups.length) { 16636 return state; 16637 } 16638 16639 return _objectSpread2(_objectSpread2({}, state), {}, { 16640 groups: nextGroups 16641 }); 16642 } 16643 16644 case "registerItem": 16645 { 16646 var _item = action.item; // Finds the item group based on the DOM hierarchy 16647 16648 var _group2 = groups.find(function (r) { 16649 var _r$ref$current; 16650 16651 return (_r$ref$current = r.ref.current) === null || _r$ref$current === void 0 ? void 0 : _r$ref$current.contains(_item.ref.current); 16652 }); // Group will be null if it's a one-dimensional composite 16653 16654 16655 var nextItem = _objectSpread2({ 16656 groupId: _group2 === null || _group2 === void 0 ? void 0 : _group2.id 16657 }, _item); 16658 16659 var _index = findDOMIndex(items, nextItem); 16660 16661 var nextState = _objectSpread2(_objectSpread2({}, state), {}, { 16662 items: addItemAtIndex(items, nextItem, _index) 16663 }); 16664 16665 if (!hasSetCurrentId && !moves && initialCurrentId === undefined) { 16666 var _findFirstEnabledItem; 16667 16668 // Sets currentId to the first enabled item. This runs whenever an item 16669 // is registered because the first enabled item may be registered 16670 // asynchronously. 16671 return _objectSpread2(_objectSpread2({}, nextState), {}, { 16672 currentId: (_findFirstEnabledItem = findFirstEnabledItem(nextState.items)) === null || _findFirstEnabledItem === void 0 ? void 0 : _findFirstEnabledItem.id 16673 }); 16674 } 16675 16676 return nextState; 16677 } 16678 16679 case "unregisterItem": 16680 { 16681 var _id2 = action.id; 16682 var nextItems = items.filter(function (item) { 16683 return item.id !== _id2; 16684 }); // The item isn't registered, so do nothing 16685 16686 if (nextItems.length === items.length) { 16687 return state; 16688 } // Filters out the item that is being removed from the pastIds list 16689 16690 16691 var nextPastIds = pastIds.filter(function (pastId) { 16692 return pastId !== _id2; 16693 }); 16694 16695 var _nextState = _objectSpread2(_objectSpread2({}, state), {}, { 16696 pastIds: nextPastIds, 16697 items: nextItems 16698 }); // If the current item is the item that is being removed, focus pastId 16699 16700 16701 if (currentId && currentId === _id2) { 16702 var nextId = includesBaseElement ? null : getCurrentId(_objectSpread2(_objectSpread2({}, _nextState), {}, { 16703 currentId: nextPastIds[0] 16704 })); 16705 return _objectSpread2(_objectSpread2({}, _nextState), {}, { 16706 currentId: nextId 16707 }); 16708 } 16709 16710 return _nextState; 16711 } 16712 16713 case "move": 16714 { 16715 var _id3 = action.id; // move() does nothing 16716 16717 if (_id3 === undefined) { 16718 return state; 16719 } // Removes the current item and the item that is receiving focus from the 16720 // pastIds list 16721 16722 16723 var filteredPastIds = pastIds.filter(function (pastId) { 16724 return pastId !== currentId && pastId !== _id3; 16725 }); // If there's a currentId, add it to the pastIds list so it can be focused 16726 // if the new item gets removed or disabled 16727 16728 var _nextPastIds = currentId ? [currentId].concat(filteredPastIds) : filteredPastIds; 16729 16730 var _nextState2 = _objectSpread2(_objectSpread2({}, state), {}, { 16731 pastIds: _nextPastIds 16732 }); // move(null) will focus the composite element itself, not an item 16733 16734 16735 if (_id3 === null) { 16736 return _objectSpread2(_objectSpread2({}, _nextState2), {}, { 16737 unstable_moves: moves + 1, 16738 currentId: getCurrentId(_nextState2, _id3) 16739 }); 16740 } 16741 16742 var _item2 = findEnabledItemById(items, _id3); 16743
16744 return _objectSpread2(_objectSpread2({}, _nextState2), {}, { 16745 unstable_moves: _item2 ? moves + 1 : moves, 16746 currentId: getCurrentId(_nextState2, _item2 === null || _item2 === void 0 ? void 0 : _item2.id) 16747 }); 16748 } 16749 16750 case "next": 16751 { 16752 // If there's no item focused, we just move the first one 16753 if (currentId == null) { 16754 return reducer(state, _objectSpread2(_objectSpread2({}, action), {}, { 16755 type: "first" 16756 })); 16757 } // RTL doesn't make sense on vertical navigation 16758 16759 16760 var isHorizontal = orientation !== "vertical"; 16761 var isRTL = rtl && isHorizontal; 16762 var allItems = isRTL ? reverse(items) : items; 16763 var currentItem = allItems.find(function (item) { 16764 return item.id === currentId; 16765 }); // If there's no item focused, we just move the first one 16766 16767 if (!currentItem) { 16768 return reducer(state, _objectSpread2(_objectSpread2({}, action), {}, { 16769 type: "first" 16770 })); 16771 } 16772 16773 var isGrid = !!currentItem.groupId; 16774 var currentIndex = allItems.indexOf(currentItem); 16775 16776 var _nextItems = allItems.slice(currentIndex + 1); 16777 16778 var nextItemsInGroup = getItemsInGroup(_nextItems, currentItem.groupId); // Home, End 16779 16780 if (action.allTheWay) { 16781 // We reverse so we can get the last enabled item in the group. If it's 16782 // RTL, nextItems and nextItemsInGroup are already reversed and don't 16783 // have the items before the current one anymore. So we have to get 16784 // items in group again with allItems. 16785 var _nextItem2 = findFirstEnabledItem(isRTL ? getItemsInGroup(allItems, currentItem.groupId) : reverse(nextItemsInGroup)); 16786 16787 return reducer(state, _objectSpread2(_objectSpread2({}, action), {}, { 16788 type: "move", 16789 id: _nextItem2 === null || _nextItem2 === void 0 ? void 0 : _nextItem2.id 16790 })); 16791 } 16792 16793 var oppositeOrientation = getOppositeOrientation( // If it's a grid and orientation is not set, it's a next/previous 16794 // call, which is inherently horizontal. up/down will call next with 16795 // orientation set to vertical by default (see below on up/down cases). 16796 isGrid ? orientation || "horizontal" : orientation); 16797 var canLoop = loop && loop !== oppositeOrientation; 16798 var canWrap = isGrid && wrap && wrap !== oppositeOrientation; 16799 var hasNullItem = // `previous` and `up` will set action.hasNullItem, but when calling 16800 // next directly, hasNullItem will only be true if it's not a grid and 16801 // loop is set to true, which means that pressing right or down keys on 16802 // grids will never focus the composite element. On one-dimensional 16803 // composites that don't loop, pressing right or down keys also doesn't 16804 // focus the composite element.
16805 action.hasNullItem || !isGrid && canLoop && includesBaseElement; 16806 16807 if (canLoop) { 16808 var loopItems = canWrap && !hasNullItem ? allItems : getItemsInGroup(allItems, currentItem.groupId); // Turns [0, 1, current, 3, 4] into [3, 4, 0, 1] 16809 16810 var sortedItems = placeItemsAfter(loopItems, currentId, hasNullItem); 16811 16812 var _nextItem3 = findFirstEnabledItem(sortedItems, currentId); 16813 16814 return reducer(state, _objectSpread2(_objectSpread2({}, action), {}, { 16815 type: "move", 16816 id: _nextItem3 === null || _nextItem3 === void 0 ? void 0 : _nextItem3.id 16817 })); 16818 } 16819 16820 if (canWrap) { 16821 var _nextItem4 = findFirstEnabledItem( // We can use nextItems, which contains all the next items, including 16822 // items from other groups, to wrap between groups. However, if there 16823 // is a null item (the composite element), we'll only use the next 16824 // items in the group. So moving next from the last item will focus 16825 // the composite element (null). On grid composites, horizontal 16826 // navigation never focuses the composite element, only vertical. 16827 hasNullItem ? nextItemsInGroup : _nextItems, currentId); 16828 16829 var _nextId = hasNullItem ? (_nextItem4 === null || _nextItem4 === void 0 ? void 0 : _nextItem4.id) || null : _nextItem4 === null || _nextItem4 === void 0 ? void 0 : _nextItem4.id; 16830 16831 return reducer(state, _objectSpread2(_objectSpread2({}, action), {}, { 16832 type: "move", 16833 id: _nextId 16834 })); 16835 } 16836 16837 var _nextItem = findFirstEnabledItem(nextItemsInGroup, currentId); 16838 16839 if (!_nextItem && hasNullItem) { 16840 return reducer(state, _objectSpread2(_objectSpread2({}, action), {}, { 16841 type: "move", 16842 id: null 16843 })); 16844 } 16845 16846 return reducer(state, _objectSpread2(_objectSpread2({}, action), {}, { 16847 type: "move", 16848 id: _nextItem === null || _nextItem === void 0 ? void 0 : _nextItem.id 16849 })); 16850 } 16851 16852 case "previous": 16853 { 16854 // If currentId is initially set to null, the composite element will be 16855 // focusable while navigating with arrow keys. But, if it's a grid, we 16856 // don't want to focus the composite element with horizontal navigation. 16857 var _isGrid = !!groups.length; 16858 16859 var _hasNullItem = !_isGrid && includesBaseElement; 16860 16861 var _nextState3 = reducer(_objectSpread2(_objectSpread2({}, state), {}, { 16862 items: reverse(items) 16863 }), _objectSpread2(_objectSpread2({}, action), {}, { 16864 type: "next", 16865 hasNullItem: _hasNullItem 16866 })); 16867 16868 return _objectSpread2(_objectSpread2({}, _nextState3), {}, { 16869 items: items 16870 }); 16871 } 16872 16873 case "down": 16874 { 16875 var shouldShift = shift && !action.allTheWay; // First, we make sure groups have the same number of items by filling it 16876 // with disabled fake items. Then, we reorganize the items list so 16877 // [1-1, 1-2, 2-1, 2-2] becomes [1-1, 2-1, 1-2, 2-2]. 16878 16879 var verticalItems = verticalizeItems(flatten(fillGroups(groupItems(items), currentId, shouldShift))); 16880 16881 var _canLoop = loop && loop !== "horizontal"; // Pressing down arrow key will only focus the composite element if loop 16882 // is true or vertical. 16883 16884 16885 var _hasNullItem2 = _canLoop && includesBaseElement; 16886 16887 var _nextState4 = reducer(_objectSpread2(_objectSpread2({}, state), {}, { 16888 orientation: "vertical", 16889 items: verticalItems 16890 }), _objectSpread2(_objectSpread2({}, action), {}, { 16891 type: "next", 16892 hasNullItem: _hasNullItem2 16893 })); 16894 16895 return _objectSpread2(_objectSpread2({}, _nextState4), {}, { 16896 orientation: orientation, 16897 items: items 16898 }); 16899 } 16900 16901 case "up": 16902 { 16903 var _shouldShift = shift && !action.allTheWay; 16904 16905 var _verticalItems = verticalizeItems(reverse(flatten(fillGroups(groupItems(items), currentId, _shouldShift)))); // If currentId is initially set to null, we'll always focus the 16906 // composite element when the up arrow key is pressed in the first row. 16907 16908 16909 var _hasNullItem3 = includesBaseElement; 16910
16911 var _nextState5 = reducer(_objectSpread2(_objectSpread2({}, state), {}, { 16912 orientation: "vertical", 16913 items: _verticalItems 16914 }), _objectSpread2(_objectSpread2({}, action), {}, { 16915 type: "next", 16916 hasNullItem: _hasNullItem3 16917 })); 16918 16919 return _objectSpread2(_objectSpread2({}, _nextState5), {}, { 16920 orientation: orientation, 16921 items: items 16922 }); 16923 } 16924 16925 case "first": 16926 { 16927 var firstItem = findFirstEnabledItem(items); 16928 return reducer(state, _objectSpread2(_objectSpread2({}, action), {}, { 16929 type: "move", 16930 id: firstItem === null || firstItem === void 0 ? void 0 : firstItem.id 16931 })); 16932 } 16933 16934 case "last": 16935 { 16936 var _nextState6 = reducer(_objectSpread2(_objectSpread2({}, state), {}, { 16937 items: reverse(items) 16938 }), _objectSpread2(_objectSpread2({}, action), {}, { 16939 type: "first" 16940 })); 16941 16942 return _objectSpread2(_objectSpread2({}, _nextState6), {}, { 16943 items: items 16944 }); 16945 } 16946 16947 case "sort": 16948 { 16949 return _objectSpread2(_objectSpread2({}, state), {}, { 16950 items: sortBasedOnDOMPosition(items), 16951 groups: sortBasedOnDOMPosition(groups) 16952 }); 16953 } 16954 16955 case "setVirtual": 16956 return _objectSpread2(_objectSpread2({}, state), {}, { 16957 unstable_virtual: applyState_applyState(action.virtual, virtual) 16958 }); 16959 16960 case "setRTL": 16961 return _objectSpread2(_objectSpread2({}, state), {}, { 16962 rtl: applyState_applyState(action.rtl, rtl) 16963 }); 16964 16965 case "setOrientation": 16966 return _objectSpread2(_objectSpread2({}, state), {}, { 16967 orientation: applyState_applyState(action.orientation, orientation) 16968 }); 16969 16970 case "setCurrentId": 16971 { 16972 var nextCurrentId = getCurrentId(_objectSpread2(_objectSpread2({}, state), {}, { 16973 currentId: applyState_applyState(action.currentId, currentId) 16974 })); 16975 return _objectSpread2(_objectSpread2({}, state), {}, { 16976 currentId: nextCurrentId, 16977 hasSetCurrentId: true 16978 }); 16979 } 16980 16981 case "setLoop": 16982 return _objectSpread2(_objectSpread2({}, state), {}, { 16983 loop: applyState_applyState(action.loop, loop) 16984 }); 16985 16986 case "setWrap": 16987 return _objectSpread2(_objectSpread2({}, state), {}, { 16988 wrap: applyState_applyState(action.wrap, wrap) 16989 }); 16990 16991 case "setShift": 16992 return _objectSpread2(_objectSpread2({}, state), {}, { 16993 shift: applyState_applyState(action.shift, shift) 16994 }); 16995 16996 case "setIncludesBaseElement": 16997 { 16998 return _objectSpread2(_objectSpread2({}, state), {}, { 16999 unstable_includesBaseElement: applyState_applyState(action.includesBaseElement, includesBaseElement) 17000 }); 17001 } 17002 17003 case "reset": 17004 return _objectSpread2(_objectSpread2({}, state), {}, { 17005 unstable_virtual: initialVirtual, 17006 rtl: initialRTL, 17007 orientation: initialOrientation, 17008 currentId: getCurrentId(_objectSpread2(_objectSpread2({}, state), {}, { 17009 currentId: initialCurrentId 17010 })), 17011 loop: initialLoop, 17012 wrap: initialWrap, 17013 shift: initialShift, 17014 unstable_moves: 0, 17015 pastIds: [] 17016 }); 17017 17018 case "setItems": 17019 { 17020 return _objectSpread2(_objectSpread2({}, state), {}, { 17021 items: action.items 17022 }); 17023 } 17024 17025 default: 17026 throw new Error(); 17027 } 17028} 17029 17030function useAction(fn) { 17031 return (0,external_React_.useCallback)(fn, []); 17032} 17033 17034function useIsUnmountedRef() { 17035 var isUnmountedRef = (0,external_React_.useRef)(false); 17036 useIsomorphicEffect(function () { 17037 return function () { 17038 isUnmountedRef.current = true; 17039 }; 17040 }, []); 17041 return isUnmountedRef; 17042} 17043 17044function useCompositeState(initialState) { 17045 if (initialState === void 0) { 17046 initialState = {}; 17047 } 17048 17049 var _useSealedState = useSealedState(initialState), 17050 _useSealedState$unsta = _useSealedState.unstable_virtual, 17051 virtual = _useSealedState$unsta === void 0 ? false : _useSealedState$unsta, 17052 _useSealedState$rtl = _useSealedState.rtl, 17053 rtl = _useSealedState$rtl === void 0 ? false : _useSealedState$rtl, 17054 orientation = _useSealedState.orientation, 17055 currentId = _useSealedState.currentId, 17056 _useSealedState$loop = _useSealedState.loop, 17057 loop = _useSealedState$loop === void 0 ? false : _useSealedState$loop, 17058 _useSealedState$wrap = _useSealedState.wrap, 17059 wrap = _useSealedState$wrap === void 0 ? false : _useSealedState$wrap, 17060 _useSealedState$shift = _useSealedState.shift, 17061 shift = _useSealedState$shift === void 0 ? false : _useSealedState$shift, 17062 unstable_includesBaseElement = _useSealedState.unstable_includesBaseElement, 17063 sealed = _rollupPluginBabelHelpers_1f0bf8c2_objectWithoutPropertiesLoose(_useSealedState, ["unstable_virtual", "rtl", "orientation", "currentId", "loop", "wrap", "shift", "unstable_includesBaseElement"]); 17064 17065 var idState = unstable_useIdState(sealed); 17066 17067 var _React$useReducer = (0,external_React_.useReducer)(reducer, { 17068 unstable_virtual: virtual, 17069 rtl: rtl, 17070 orientation: orientation, 17071 items: [], 17072 groups: [], 17073 currentId: currentId, 17074 loop: loop, 17075 wrap: wrap, 17076 shift: shift, 17077 unstable_moves: 0, 17078 pastIds: [], 17079 unstable_includesBaseElement: unstable_includesBaseElement != null ? unstable_includesBaseElement : currentId === null, 17080 initialVirtual: virtual, 17081 initialRTL: rtl, 17082 initialOrientation: orientation, 17083 initialCurrentId: currentId, 17084 initialLoop: loop, 17085 initialWrap: wrap, 17086 initialShift: shift 17087 }), 17088 _React$useReducer$ = _React$useReducer[0], 17089 pastIds = _React$useReducer$.pastIds, 17090 initialVirtual = _React$useReducer$.initialVirtual, 17091 initialRTL = _React$useReducer$.initialRTL, 17092 initialOrientation = _React$useReducer$.initialOrientation, 17093 initialCurrentId = _React$useReducer$.initialCurrentId, 17094 initialLoop = _React$useReducer$.initialLoop, 17095 initialWrap = _React$useReducer$.initialWrap, 17096 initialShift = _React$useReducer$.initialShift, 17097 hasSetCurrentId = _React$useReducer$.hasSetCurrentId, 17098 state = _rollupPluginBabelHelpers_1f0bf8c2_objectWithoutPropertiesLoose(_React$useReducer$, ["pastIds", "initialVirtual", "initialRTL", "initialOrientation", "initialCurrentId", "initialLoop", "initialWrap", "initialShift", "hasSetCurrentId"]), 17099 dispatch = _React$useReducer[1]; 17100 17101 var _React$useState = (0,external_React_.useState)(false), 17102 hasActiveWidget = _React$useState[0], 17103 setHasActiveWidget = _React$useState[1]; // register/unregister may be called when this component is unmounted. We 17104 // store the unmounted state here so we don't update the state if it's true. 17105 // This only happens in a very specific situation. 17106 // See https://github.com/reakit/reakit/issues/650 17107 17108 17109 var isUnmountedRef = useIsUnmountedRef(); 17110 var setItems = (0,external_React_.useCallback)(function (items) {
17111 return dispatch({ 17112 type: "setItems", 17113 items: items 17114 }); 17115 }, []); 17116 useSortBasedOnDOMPosition(state.items, setItems); 17117 return _objectSpread2(_objectSpread2(_objectSpread2({}, idState), state), {}, { 17118 unstable_hasActiveWidget: hasActiveWidget, 17119 unstable_setHasActiveWidget: setHasActiveWidget, 17120 registerItem: useAction(function (item) { 17121 if (isUnmountedRef.current) return; 17122 dispatch({ 17123 type: "registerItem", 17124 item: item 17125 }); 17126 }), 17127 unregisterItem: useAction(function (id) { 17128 if (isUnmountedRef.current) return; 17129 dispatch({ 17130 type: "unregisterItem", 17131 id: id 17132 }); 17133 }), 17134 registerGroup: useAction(function (group) { 17135 if (isUnmountedRef.current) return; 17136 dispatch({ 17137 type: "registerGroup", 17138 group: group 17139 }); 17140 }), 17141 unregisterGroup: useAction(function (id) { 17142 if (isUnmountedRef.current) return; 17143 dispatch({ 17144 type: "unregisterGroup", 17145 id: id 17146 }); 17147 }), 17148 move: useAction(function (id) { 17149 return dispatch({ 17150 type: "move", 17151 id: id 17152 }); 17153 }), 17154 next: useAction(function (allTheWay) { 17155 return dispatch({ 17156 type: "next", 17157 allTheWay: allTheWay 17158 }); 17159 }), 17160 previous: useAction(function (allTheWay) { 17161 return dispatch({ 17162 type: "previous", 17163 allTheWay: allTheWay 17164 }); 17165 }), 17166 up: useAction(function (allTheWay) { 17167 return dispatch({ 17168 type: "up", 17169 allTheWay: allTheWay 17170 }); 17171 }), 17172 down: useAction(function (allTheWay) { 17173 return dispatch({ 17174 type: "down", 17175 allTheWay: allTheWay 17176 }); 17177 }), 17178 first: useAction(function () { 17179 return dispatch({ 17180 type: "first" 17181 }); 17182 }), 17183 last: useAction(function () { 17184 return dispatch({ 17185 type: "last" 17186 }); 17187 }), 17188 sort: useAction(function () { 17189 return dispatch({ 17190 type: "sort" 17191 }); 17192 }), 17193 unstable_setVirtual: useAction(function (value) { 17194 return dispatch({ 17195 type: "setVirtual", 17196 virtual: value 17197 }); 17198 }), 17199 setRTL: useAction(function (value) { 17200 return dispatch({ 17201 type: "setRTL", 17202 rtl: value 17203 }); 17204 }), 17205 setOrientation: useAction(function (value) { 17206 return dispatch({ 17207 type: "setOrientation", 17208 orientation: value 17209 }); 17210 }), 17211 setCurrentId: useAction(function (value) { 17212 return dispatch({ 17213 type: "setCurrentId", 17214 currentId: value 17215 }); 17216 }), 17217 setLoop: useAction(function (value) { 17218 return dispatch({ 17219 type: "setLoop", 17220 loop: value 17221 }); 17222 }), 17223 setWrap: useAction(function (value) { 17224 return dispatch({ 17225 type: "setWrap", 17226 wrap: value 17227 }); 17228 }), 17229 setShift: useAction(function (value) { 17230 return dispatch({ 17231 type: "setShift", 17232 shift: value 17233 }); 17234 }), 17235 unstable_setIncludesBaseElement: useAction(function (value) { 17236 return dispatch({ 17237 type: "setIncludesBaseElement", 17238 includesBaseElement: value 17239 }); 17240 }), 17241 reset: useAction(function () { 17242 return dispatch({ 17243 type: "reset" 17244 }); 17245 }) 17246 }); 17247} 17248 17249 17250 17251;// CONCATENATED MODULE: ./node_modules/reakit-utils/es/fireBlurEvent.js 17252 17253 17254 17255 17256function createFocusEvent(element, type, eventInit) { 17257 if (eventInit === void 0) { 17258 eventInit = {}; 17259 } 17260 17261 if (typeof FocusEvent === "function") { 17262 return new FocusEvent(type, eventInit); 17263 } 17264 17265 return createEvent(element, type, eventInit); 17266} 17267/** 17268 * Creates and dispatches a blur event in a way that also works on IE 11.
17269 * 17270 * @example 17271 * import { fireBlurEvent } from "reakit-utils"; 17272 * 17273 * fireBlurEvent(document.getElementById("id")); 17274 */ 17275 17276 17277function fireBlurEvent_fireBlurEvent(element, eventInit) { 17278 var event = createFocusEvent(element, "blur", eventInit); 17279 var defaultAllowed = element.dispatchEvent(event); 17280 17281 var bubbleInit = _rollupPluginBabelHelpers_1f0bf8c2_objectSpread2(_rollupPluginBabelHelpers_1f0bf8c2_objectSpread2({}, eventInit), {}, { 17282 bubbles: true 17283 }); 17284 17285 element.dispatchEvent(createFocusEvent(element, "focusout", bubbleInit)); 17286 return defaultAllowed; 17287} 17288 17289 17290 17291;// CONCATENATED MODULE: ./node_modules/reakit-utils/es/fireKeyboardEvent.js 17292 17293 17294 17295function createKeyboardEvent(element, type, eventInit) { 17296 if (eventInit === void 0) { 17297 eventInit = {}; 17298 } 17299 17300 if (typeof KeyboardEvent === "function") { 17301 return new KeyboardEvent(type, eventInit); 17302 } // IE 11 doesn't support Event constructors 17303 17304 17305 var event = getDocument_getDocument(element).createEvent("KeyboardEvent"); 17306 event.initKeyboardEvent(type, eventInit.bubbles, eventInit.cancelable, getWindow(element), eventInit.key, eventInit.location, eventInit.ctrlKey, eventInit.altKey, eventInit.shiftKey, eventInit.metaKey); 17307 return event; 17308} 17309/** 17310 * Creates and dispatches `KeyboardEvent` in a way that also works on IE 11.
17311 * 17312 * @example 17313 * import { fireKeyboardEvent } from "reakit-utils"; 17314 * 17315 * fireKeyboardEvent(document.getElementById("id"), "keydown", { 17316 * key: "ArrowDown", 17317 * shiftKey: true, 17318 * }); 17319 */ 17320 17321 17322function fireKeyboardEvent_fireKeyboardEvent(element, type, eventInit) { 17323 return element.dispatchEvent(createKeyboardEvent(element, type, eventInit)); 17324} 17325 17326 17327 17328;// CONCATENATED MODULE: ./node_modules/reakit-utils/es/getNextActiveElementOnBlur.js 17329 17330 17331 17332 17333 17334var isIE11 = canUseDOM && "msCrypto" in window; 17335/** 17336 * Cross-browser method that returns the next active element (the element that 17337 * is receiving focus) after a blur event is dispatched. It receives the blur 17338 * event object as the argument. 17339 * 17340 * @example 17341 * import { getNextActiveElementOnBlur } from "reakit-utils"; 17342 * 17343 * const element = document.getElementById("id"); 17344 * element.addEventListener("blur", (event) => { 17345 * const nextActiveElement = getNextActiveElementOnBlur(event); 17346 * }); 17347 */ 17348 17349function getNextActiveElementOnBlur(event) { 17350 // IE 11 doesn't support event.relatedTarget on blur. 17351 // document.activeElement points the the next active element. 17352 // On modern browsers, document.activeElement points to the current target. 17353 if (isIE11) { 17354 var activeElement = getActiveElement_getActiveElement(event.currentTarget); 17355 return activeElement; 17356 } 17357 17358 return event.relatedTarget; 17359} 17360 17361 17362 17363;// CONCATENATED MODULE: ./node_modules/reakit/es/Composite/Composite.js 17364 17365 17366 17367 17368 17369 17370 17371 17372 17373 17374 17375 17376 17377 17378 17379 17380 17381 17382 17383 17384 17385 17386 17387 17388 17389 17390 17391 17392 17393var Composite_isIE11 = canUseDOM && "msCrypto" in window; 17394 17395function canProxyKeyboardEvent(event) { 17396 if (!isSelfTarget(event)) return false; 17397 if (event.metaKey) return false; 17398 if (event.key === "Tab") return false; 17399 return true; 17400} 17401 17402function useKeyboardEventProxy(virtual, currentItem, htmlEventHandler) { 17403 var eventHandlerRef = useLiveRef(htmlEventHandler); 17404 return (0,external_React_.useCallback)(function (event) { 17405 var _eventHandlerRef$curr; 17406 17407 (_eventHandlerRef$curr = eventHandlerRef.current) === null || _eventHandlerRef$curr === void 0 ? void 0 : _eventHandlerRef$curr.call(eventHandlerRef, event); 17408 if (event.defaultPrevented) return; 17409 17410 if (virtual && canProxyKeyboardEvent(event)) { 17411 var currentElement = currentItem === null || currentItem === void 0 ? void 0 : currentItem.ref.current; 17412 17413 if (currentElement) { 17414 if (!fireKeyboardEvent_fireKeyboardEvent(currentElement, event.type, event)) { 17415 event.preventDefault(); 17416 } // The event will be triggered on the composite item and then 17417 // propagated up to this composite element again, so we can pretend 17418 // that it wasn't called on this component in the first place. 17419 17420 17421 if (event.currentTarget.contains(currentElement)) { 17422 event.stopPropagation(); 17423 } 17424 } 17425 } 17426 }, [virtual, currentItem]); 17427} // istanbul ignore next 17428 17429 17430function useActiveElementRef(elementRef) { 17431 var activeElementRef = (0,external_React_.useRef)(null); 17432 (0,external_React_.useEffect)(function () { 17433 var document = getDocument_getDocument(elementRef.current); 17434 17435 var onFocus = function onFocus(event) { 17436 var target = event.target; 17437 activeElementRef.current = target; 17438 }; 17439 17440 document.addEventListener("focus", onFocus, true); 17441 return function () { 17442 document.removeEventListener("focus", onFocus, true); 17443 }; 17444 }, []); 17445 return activeElementRef; 17446} 17447 17448function findFirstEnabledItemInTheLastRow(items) { 17449 return findFirstEnabledItem(flatten(reverse(groupItems(items)))); 17450} 17451 17452function isItem(items, element) { 17453 return items === null || items === void 0 ? void 0 : items.some(function (item) { 17454 return !!element && item.ref.current === element; 17455 }); 17456} 17457 17458function useScheduleUserFocus(currentItem) { 17459 var currentItemRef = useLiveRef(currentItem); 17460 17461 var _React$useReducer = (0,external_React_.useReducer)(function (n) { 17462 return n + 1; 17463 }, 0), 17464 scheduled = _React$useReducer[0], 17465 schedule = _React$useReducer[1]; 17466 17467 (0,external_React_.useEffect)(function () { 17468 var _currentItemRef$curre; 17469 17470 var currentElement = (_currentItemRef$curre = currentItemRef.current) === null || _currentItemRef$curre === void 0 ? void 0 : _currentItemRef$curre.ref.current; 17471 17472 if (scheduled && currentElement) { 17473 userFocus(currentElement); 17474 } 17475 }
17475, [scheduled]); 17476 return schedule; 17477} 17478 17479var useComposite = createHook({ 17480 name: "Composite", 17481 compose: [useTabbable], 17482 keys: COMPOSITE_KEYS, 17483 useOptions: function useOptions(options) { 17484 return _objectSpread2(_objectSpread2({}, options), {}, { 17485 currentId: getCurrentId(options) 17486 }); 17487 }, 17488 useProps: function useProps(options, _ref) { 17489 var htmlRef = _ref.ref, 17490 htmlOnFocusCapture = _ref.onFocusCapture, 17491 htmlOnFocus = _ref.onFocus, 17492 htmlOnBlurCapture = _ref.onBlurCapture, 17493 htmlOnKeyDown = _ref.onKeyDown, 17494 htmlOnKeyDownCapture = _ref.onKeyDownCapture, 17495 htmlOnKeyUpCapture = _ref.onKeyUpCapture, 17496 htmlProps = _rollupPluginBabelHelpers_1f0bf8c2_objectWithoutPropertiesLoose(_ref, ["ref", "onFocusCapture", "onFocus", "onBlurCapture", "onKeyDown", "onKeyDownCapture", "onKeyUpCapture"]); 17497 17498 var ref = (0,external_React_.useRef)(null); 17499 var currentItem = findEnabledItemById(options.items, options.currentId); 17500 var previousElementRef = (0,external_React_.useRef)(null); 17501 var onFocusCaptureRef = useLiveRef(htmlOnFocusCapture); 17502 var onFocusRef = useLiveRef(htmlOnFocus); 17503 var onBlurCaptureRef = useLiveRef(htmlOnBlurCapture); 17504 var onKeyDownRef = useLiveRef(htmlOnKeyDown); 17505 var scheduleUserFocus = useScheduleUserFocus(currentItem); // IE 11 doesn't support event.relatedTarget, so we use the active element 17506 // ref instead. 17507 17508 var activeElementRef = Composite_isIE11 ? useActiveElementRef(ref) : undefined; 17509 (0,external_React_.useEffect)(function () { 17510 var element = ref.current; 17511 17512 if (options.unstable_moves && !currentItem) { 17513 false ? 0 : void 0; // If composite.move(null) has been called, the composite container 17514 // will receive focus. 17515 17516 element === null || element === void 0 ? void 0 : element.focus(); 17517 } 17518 }, [options.unstable_moves, currentItem]); 17519 var onKeyDownCapture = useKeyboardEventProxy(options.unstable_virtual, currentItem, htmlOnKeyDownCapture); 17520 var onKeyUpCapture = useKeyboardEventProxy(options.unstable_virtual, currentItem, htmlOnKeyUpCapture); 17521 var onFocusCapture = (0,external_React_.useCallback)(function (event) { 17522 var _onFocusCaptureRef$cu; 17523 17524 (_onFocusCaptureRef$cu = onFocusCaptureRef.current) === null || _onFocusCaptureRef$cu === void 0 ? void 0 : _onFocusCaptureRef$cu.call(onFocusCaptureRef, event); 17525 if (event.defaultPrevented) return; 17526 if (!options.unstable_virtual) return; // IE11 doesn't support event.relatedTarget, so we use the active 17527 // element ref instead. 17528 17529 var previousActiveElement = (activeElementRef === null || activeElementRef === void 0 ? void 0 : activeElementRef.current) || event.relatedTarget; 17530 var previousActiveElementWasItem = isItem(options.items, previousActiveElement); 17531 17532 if (isSelfTarget(event) && previousActiveElementWasItem) { 17533 // Composite has been focused as a result of an item receiving focus. 17534 // The composite item will move focus back to the composite 17535 // container. In this case, we don't want to propagate this 17536 // additional event nor call the onFocus handler passed to 17537 // <Composite onFocus={...} />. 17538 event.stopPropagation(); // We keep track of the previous active item element so we can 17539 // manually fire a blur event on it later when the focus is moved to 17540 // another item on the onBlurCapture event below. 17541 17542 previousElementRef.current = previousActiveElement; 17543 } 17544 }, [options.unstable_virtual, options.items]); 17545 var onFocus = (0,external_React_.useCallback)(function (event) { 17546 var _onFocusRef$current; 17547 17548 (_onFocusRef$current = onFocusRef.current) === null || _onFocusRef$current === void 0 ? void 0 : _onFocusRef$current.call(onFocusRef, event); 17549 if (event.defaultPrevented) return; 17550 17551 if (options.unstable_virtual) { 17552 if (isSelfTarget(event)) { 17553 // This means that the composite element has been focused while the 17554 // composite item has not. For example, by clicking on the 17555 // composite element without touching any item, or by tabbing into 17556 // the composite element. In this case, we want to trigger focus on 17557 // the item, just like it would happen with roving tabindex. 17558 // When it receives focus, the composite item will put focus back 17559 // on the composite element, in which case hasItemWithFocus will be 17560 // true. 17561 scheduleUserFocus(); 17562 } 17563 } else if (isSelfTarget(event)) { 17564 var _options$setCurrentId; 17565 17566 // When the roving tabindex composite gets intentionally focused (for 17567 // example, by clicking directly on it, and not on an item), we make 17568 // sure to set the current id to null (which means the composite 17569 // itself is focused). 17570 (_options$setCurrentId = options.setCurrentId) === null || _options$setCurrentId === void 0 ? void 0 : _options$setCurrentId.call(options, null); 17571 } 17572 }, [options.unstable_virtual, options.setCurrentId]); 17573 var onBlurCapture = (0,external_React_.useCallback)(function (event) { 17574 var _onBlurCaptureRef$cur; 17575 17576 (_onBlurCaptureRef$cur = onBlurCaptureRef.current) === null || _onBlurCaptureRef$cur === void 0 ? void 0 : _onBlurCaptureRef$cur.call(onBlurCaptureRef, event); 17577 if (event.defaultPrevented) return; 17578 if (!options.unstable_virtual) return; // When virtual is set to true, we move focus from the composite 17579 // container (this component) to the composite item that is being 17580 // selected. Then we move focus back to the composite container. This 17581 // is so we can provide the same API as the roving tabindex method, 17582 // which means people can attach onFocus/onBlur handlers on the 17583 // CompositeItem component regardless of whether it's virtual or not. 17584 // This sequence of blurring and focusing items and composite may be 17585 // confusing, so we ignore intermediate focus and blurs by stopping its 17586 // propagation and not calling the passed onBlur handler (htmlOnBlur). 17587 17588 var currentElement = (currentItem === null || currentItem === void 0 ? void 0 : currentItem.ref.current) || null; 17589 var nextActiveElement = getNextActiveElementOnBlur(event); 17590 var nextActiveElementIsItem = isItem(options.items, nextActiveElement); 17591 17592 if (isSelfTarget(event) && nextActiveElementIsItem) { 17593 // This is an intermediate blur event: blurring the composite 17594 // container to focus an item (nextActiveElement). 17595 if (nextActiveElement === currentElement) { 17596 // The next active element will be the same as the current item in 17597 // the state in two scenarios: 17598 // - Moving focus with keyboard: the state is updated before the 17599 // blur event is triggered, so here the current item is already 17600 // pointing to the next active element. 17601 // - Clicking on the current active item with a pointer: this 17602 // will trigger blur on the composite element and then the next 17603 // active element will be the same as the current item. Clicking on 17604 // an item other than the current one doesn't end up here as the 17605 // currentItem state will be updated only after it. 17606 if (previousElementRef.current && previousElementRef.current !== nextActiveElement) { 17607 // If there's a previous active item and it's not a click action, 17608 // then we fire a blur event on it so it will work just like if 17609 // it had DOM focus before (like when using roving tabindex). 17610 fireBlurEvent_fireBlurEvent(previousElementRef.current, event); 17611 } 17612 } else if (currentElement) { 17613 // This will be true when the next active element is not the 17614 // current element, but there's a current item. This will only 17615 // happen when clicking with a pointer on a different item, when 17616 // there's already an item selected, in which case currentElement 17617 // is the item that is getting blurred, and nextActiveElement is 17618 // the item that is being clicked. 17619 fireBlurEvent_fireBlurEvent(currentElement, event); 17620 } // We want to ignore intermediate blur events, so we stop its 17621 // propagation and return early so onFocus will not be called. 17622 17623 17624 event.stopPropagation(); 17625 } else { 17626 var targetIsItem = isItem(options.items, event.target); 17627 17628 if (!targetIsItem && currentElement) { 17629 // If target is not a composite item, it may be the composite 17630 // element itself (isSelfTarget) or a tabbable element inside the 17631 // composite widget. This may be triggered by clicking outside the 17632 // composite widget or by tabbing out of it. In either cases we 17633 // want to fire a blur event on the current item. 17634 fireBlurEvent_fireBlurEvent(currentElement, event); 17635 } 17636 } 17637 }, [options.unstable_virtual, options.items, currentItem]); 17638 var onKeyDown = (0,external_React_.useCallback)(function (event) { 17639 var _onKeyDownRef$current, _options$groups; 17640 17641 (_onKeyDownRef$current = onKeyDownRef.current) === null || _onKeyDownRef$current === void 0 ? void 0 : _onKeyDownRef$current.call(onKeyDownRef, event); 17642 if (event.defaultPrevented) return; 17643 if (options.currentId !== null) return; 17644 if (!isSelfTarget(event)) return; 17645 var isVertical = options.orientation !== "horizontal"; 17646 var isHorizontal = options.orientation !== "vertical"; 17647 var isGrid = !!((_options$groups = options.groups) !== null && _options$groups !== void 0 && _options$groups.length); 17648 17649 var up = function up() { 17650 if (isGrid) { 17651 var item = findFirstEnabledItemInTheLastRow(options.items); 17652 17653 if (item !== null && item !== void 0 && item.id) { 17654 var _options$move; 17655 17656 (_options$move = options.move) === null || _options$move === void 0 ? void 0 : _options$move.call(options, item.id); 17657 } 17658 } else { 17659 var _options$last; 17660 17661 (_options$last = options.last) === null || _options$last === void 0 ? void 0 : _options$last.call(options); 17662 } 17663 }; 17664 17665 var keyMap = {
17666 ArrowUp: (isGrid || isVertical) && up, 17667 ArrowRight: (isGrid || isHorizontal) && options.first, 17668 ArrowDown: (isGrid || isVertical) && options.first, 17669 ArrowLeft: (isGrid || isHorizontal) && options.last, 17670 Home: options.first, 17671 End: options.last, 17672 PageUp: options.first, 17673 PageDown: options.last 17674 }; 17675 var action = keyMap[event.key]; 17676 17677 if (action) { 17678 event.preventDefault(); 17679 action(); 17680 } 17681 }, [options.currentId, options.orientation, options.groups, options.items, options.move, options.last, options.first]); 17682 return _objectSpread2({ 17683 ref: useForkRef(ref, htmlRef), 17684 id: options.baseId, 17685 onFocus: onFocus, 17686 onFocusCapture: onFocusCapture, 17687 onBlurCapture: onBlurCapture, 17688 onKeyDownCapture: onKeyDownCapture, 17689 onKeyDown: onKeyDown, 17690 onKeyUpCapture: onKeyUpCapture, 17691 "aria-activedescendant": options.unstable_virtual ? (currentItem === null || currentItem === void 0 ? void 0 : currentItem.id) || undefined : undefined 17692 }, htmlProps); 17693 }, 17694 useComposeProps: function useComposeProps(options, htmlProps) { 17695 htmlProps = useRole(options, htmlProps, true); 17696 var tabbableHTMLProps = useTabbable(options, htmlProps, true); 17697 17698 if (options.unstable_virtual || options.currentId === null) { 17699 // Composite will only be tabbable by default if the focus is managed 17700 // using aria-activedescendant, which requires DOM focus on the container 17701 // element (the composite) 17702 return _objectSpread2({ 17703 tabIndex: 0 17704 }, tabbableHTMLProps); 17705 } 17706 17707 return _objectSpread2(_objectSpread2({}, htmlProps), {}, { 17708 ref: tabbableHTMLProps.ref 17709 }); 17710 } 17711}); 17712var Composite = createComponent({ 17713 as: "div", 17714 useHook: useComposite, 17715 useCreateElement: function useCreateElement$1(type, props, children) { 17716 false ? 0 : void 0; 17717 return useCreateElement(type, props, children); 17718 } 17719}); 17720 17721 17722 17723;// CONCATENATED MODULE: ./node_modules/reakit/es/Group/Group.js 17724 17725 17726 17727 17728 17729 17730// Automatically generated 17731var GROUP_KEYS = []; 17732 17733var useGroup = createHook({ 17734 name: "Group", 17735 compose: useRole, 17736 keys: GROUP_KEYS, 17737 useProps: function useProps(_, htmlProps) { 17738 return _objectSpread2({ 17739 role: "group" 17740 }, htmlProps); 17741 } 17742}); 17743var Group = createComponent({ 17744 as: "div", 17745 useHook: useGroup 17746}); 17747 17748 17749 17750;// CONCATENATED MODULE: ./node_modules/reakit/es/Composite/CompositeGroup.js 17751 17752 17753 17754 17755 17756 17757 17758 17759 17760 17761 17762 17763 17764 17765var useCompositeGroup = createHook({ 17766 name: "CompositeGroup", 17767 compose: [useGroup, unstable_useId], 17768 keys: COMPOSITE_GROUP_KEYS, 17769 propsAreEqual: function propsAreEqual(prev, next) { 17770 if (!next.id || prev.id !== next.id) { 17771 return useGroup.unstable_propsAreEqual(prev, next); 17772 } 17773 17774 var prevCurrentId = prev.currentId, 17775 prevMoves = prev.unstable_moves, 17776 prevProps = _rollupPluginBabelHelpers_1f0bf8c2_objectWithoutPropertiesLoose(prev, ["currentId", "unstable_moves"]); 17777 17778 var nextCurrentId = next.currentId, 17779 nextMoves = next.unstable_moves, 17780 nextProps = _rollupPluginBabelHelpers_1f0bf8c2_objectWithoutPropertiesLoose(next, ["currentId", "unstable_moves"]); 17781 17782 if (prev.items && next.items) { 17783 var prevCurrentItem = findEnabledItemById(prev.items, prevCurrentId); 17784 var nextCurrentItem = findEnabledItemById(next.items, nextCurrentId); 17785 var prevGroupId = prevCurrentItem === null || prevCurrentItem === void 0 ? void 0 : prevCurrentItem.groupId; 17786 var nextGroupId = nextCurrentItem === null || nextCurrentItem === void 0 ? void 0 : nextCurrentItem.groupId; 17787 17788 if (next.id === nextGroupId || next.id === prevGroupId) { 17789 return false; 17790 } 17791 } 17792 17793 return useGroup.unstable_propsAreEqual(prevProps, nextProps); 17794 }, 17795 useProps: function useProps(options, _ref) { 17796 var htmlRef = _ref.ref, 17797 htmlProps = _rollupPluginBabelHelpers_1f0bf8c2_objectWithoutPropertiesLoose(_ref, ["ref"]); 17798 17799 var ref = (0,external_React_.useRef)(null); 17800 var id = options.id; // We need this to be called before CompositeItems' register 17801 17802 useIsomorphicEffect(function () { 17803 var _options$registerGrou; 17804 17805 if (!id) return undefined; 17806 (_options$registerGrou = options.registerGroup) === null || _options$registerGrou === void 0 ? void 0 : _options$registerGrou.call(options, { 17807 id: id, 17808 ref: ref 17809 }); 17810 return function () { 17811 var _options$unregisterGr;
17812 17813 (_options$unregisterGr = options.unregisterGroup) === null || _options$unregisterGr === void 0 ? void 0 : _options$unregisterGr.call(options, id); 17814 }; 17815 }, [id, options.registerGroup, options.unregisterGroup]); 17816 return _objectSpread2({ 17817 ref: useForkRef(ref, htmlRef) 17818 }, htmlProps); 17819 } 17820}); 17821var CompositeGroup = createComponent({ 17822 as: "div", 17823 useHook: useCompositeGroup 17824}); 17825 17826 17827 17828;// CONCATENATED MODULE: ./packages/components/build-module/alignment-matrix-control/styles/alignment-matrix-control-icon-styles.js 17829 17830function 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)."; } 17831/** 17832 * External dependencies 17833 */ 17834 17835 17836 17837/** 17838 * Internal dependencies 17839 */ 17840 17841const alignment_matrix_control_icon_styles_rootSize = () => { 17842 const padding = 1.5; 17843 const size = 24; 17844 return /*#__PURE__*/emotion_react_browser_esm_css({ 17845 gridTemplateRows: `repeat( 3, calc( ${size - padding * 2}px / 3))`, 17846 padding, 17847 maxHeight: size, 17848 maxWidth: size 17849 }, true ? "" : 0, true ? "" : 0); 17850}; 17851const rootPointerEvents = ({ 17852 disablePointerEvents 17853}) => { 17854 return /*#__PURE__*/emotion_react_browser_esm_css({ 17855 pointerEvents: disablePointerEvents ? 'none' : undefined 17856 }, true ? "" : 0, true ? "" : 0); 17857}; 17858const Wrapper = emotion_styled_base_browser_esm("div", true ? { 17859 target: "erowt52" 17860} : 0)( true ? { 17861 name: "ogl07i", 17862 styles: "box-sizing:border-box;padding:2px" 17863} : 0); 17864const alignment_matrix_control_icon_styles_Root = emotion_styled_base_browser_esm("div", true ? { 17865 target: "erowt51" 17866} : 0)("transform-origin:top left;height:100%;width:100%;", rootBase, ";", alignment_matrix_control_icon_styles_rootSize, ";", rootPointerEvents, ";" + ( true ? "" : 0)); 17867const alignment_matrix_control_icon_styles_pointActive = ({ 17868 isActive 17869}) => { 17870 const boxShadow = isActive ? `0 0 0 1px currentColor` : null; 17871 return /*#__PURE__*/emotion_react_browser_esm_css("box-shadow:", boxShadow, ";color:currentColor;*:hover>&{color:currentColor;}" + ( true ? "" : 0), true ? "" : 0); 17872}; 17873const alignment_matrix_control_icon_styles_Point = emotion_styled_base_browser_esm("span", true ? { 17874 target: "erowt50" 17875} : 0)("height:2px;width:2px;", pointBase, ";", alignment_matrix_control_icon_styles_pointActive, ";" + ( true ? "" : 0)); 17876const alignment_matrix_control_icon_styles_Cell = Cell; 17877 17878;// CONCATENATED MODULE: ./packages/components/build-module/alignment-matrix-control/icon.js 17879 17880/** 17881 * External dependencies 17882 */ 17883 17884 17885/** 17886 * Internal dependencies 17887 */ 17888 17889 17890const BASE_SIZE = 24; 17891function AlignmentMatrixControlIcon({ 17892 className, 17893 disablePointerEvents = true, 17894 size = BASE_SIZE, 17895 style = {}, 17896 value = 'center', 17897 ...props 17898}) { 17899 const alignIndex = getAlignmentIndex(value); 17900 const scale = (size / BASE_SIZE).toFixed(2); 17901 const classes = classnames_default()('component-alignment-matrix-control-icon', className); 17902 const styles = { 17903 ...style, 17904 transform: `scale(${scale})` 17905 }; 17906 return (0,external_wp_element_namespaceObject.createElement)(alignment_matrix_control_icon_styles_Root, { 17907 ...props, 17908 className: classes, 17909 disablePointerEvents: disablePointerEvents, 17910 role: "presentation", 17911 style: styles 17912 }, ALIGNMENTS.map((align, index) => { 17913 const isActive = alignIndex === index; 17914 return (0,external_wp_element_namespaceObject.createElement)(alignment_matrix_control_icon_styles_Cell, { 17915 key: align 17916 }, (0,external_wp_element_namespaceObject.createElement)(alignment_matrix_control_icon_styles_Point, { 17917 isActive: isActive 17918 })); 17919 })); 17920} 17921/* harmony default export */ const icon = (AlignmentMatrixControlIcon); 17922 17923;// CONCATENATED MODULE: ./packages/components/build-module/alignment-matrix-control/index.js 17924 17925/** 17926 * External dependencies 17927 */ 17928 17929 17930/** 17931 * WordPress dependencies 17932 */ 17933 17934 17935 17936 17937/** 17938 * Internal dependencies 17939 */ 17940 17941 17942 17943 17944 17945const alignment_matrix_control_noop = () => {}; 17946function useBaseId(id) { 17947 const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(AlignmentMatrixControl, 'alignment-matrix-control'); 17948 return id || instanceId; 17949} 17950 17951/** 17952 * 17953 * AlignmentMatrixControl components enable adjustments to horizontal and vertical alignments for UI. 17954 * 17955 * ```jsx 17956 * import { __experimentalAlignmentMatrixControl as AlignmentMatrixControl } from '@wordpress/components';
17957 * import { useState } from '@wordpress/element'; 17958 * 17959 * const Example = () => { 17960 * const [ alignment, setAlignment ] = useState( 'center center' ); 17961 * 17962 * return ( 17963 * <AlignmentMatrixControl 17964 * value={ alignment } 17965 * onChange={ setAlignment } 17966 * /> 17967 * ); 17968 * }; 17969 * ``` 17970 */ 17971function AlignmentMatrixControl({ 17972 className, 17973 id, 17974 label = (0,external_wp_i18n_namespaceObject.__)('Alignment Matrix Control'), 17975 defaultValue = 'center center', 17976 value, 17977 onChange = alignment_matrix_control_noop, 17978 width = 92, 17979 ...props 17980}) { 17981 const [immutableDefaultValue] = (0,external_wp_element_namespaceObject.useState)(value !== null && value !== void 0 ? value : defaultValue); 17982 const baseId = useBaseId(id); 17983 const initialCurrentId = getItemId(baseId, immutableDefaultValue); 17984 const composite = useCompositeState({ 17985 baseId, 17986 currentId: initialCurrentId, 17987 rtl: (0,external_wp_i18n_namespaceObject.isRTL)() 17988 }); 17989 const handleOnChange = nextValue => { 17990 onChange(nextValue); 17991 }; 17992 const { 17993 setCurrentId 17994 } = composite; 17995 (0,external_wp_element_namespaceObject.useEffect)(() => { 17996 if (typeof value !== 'undefined') { 17997 setCurrentId(getItemId(baseId, value)); 17998 } 17999 }, [value, setCurrentId, baseId]); 18000 const classes = classnames_default()('component-alignment-matrix-control', className); 18001 return (0,external_wp_element_namespaceObject.createElement)(Composite, { 18002 ...props, 18003 ...composite, 18004 "aria-label": label, 18005 as: Root, 18006 className: classes, 18007 role: "grid", 18008 size: width 18009 }, GRID.map((cells, index) => (0,external_wp_element_namespaceObject.createElement)(CompositeGroup, { 18010 ...composite, 18011 as: Row, 18012 role: "row", 18013 key: index 18014 }, cells.map(cell => { 18015 const cellId = getItemId(baseId, cell); 18016 const isActive = composite.currentId === cellId; 18017 return (0,external_wp_element_namespaceObject.createElement)(cell_Cell, { 18018 ...composite, 18019 id: cellId, 18020 isActive: isActive, 18021 key: cell, 18022 value: cell, 18023 onFocus: () => handleOnChange(cell), 18024 tabIndex: isActive ? 0 : -1 18025 }); 18026 })))); 18027} 18028AlignmentMatrixControl.Icon = icon; 18029/* harmony default export */ const alignment_matrix_control = (AlignmentMatrixControl); 18030 18031;// CONCATENATED MODULE: ./packages/components/build-module/animate/index.js 18032/** 18033 * External dependencies 18034 */ 18035 18036 18037/** 18038 * Internal dependencies 18039 */ 18040 18041/** 18042 * @param type The animation type 18043 * @return Default origin 18044 */ 18045function getDefaultOrigin(type) { 18046 return type === 'appear' ? 'top' : 'left'; 18047} 18048 18049/** 18050 * @param options 18051 * 18052 * @return ClassName that applies the animations 18053 */ 18054function getAnimateClassName(options) { 18055 if (options.type === 'loading') { 18056 return classnames_default()('components-animate__loading'); 18057 } 18058 const { 18059 type, 18060 origin = getDefaultOrigin(type) 18061 } = options; 18062 if (type === 'appear') { 18063 const [yAxis, xAxis = 'center'] = origin.split(' '); 18064 return classnames_default()('components-animate__appear', { 18065 ['is-from-' + xAxis]: xAxis !== 'center', 18066 ['is-from-' + yAxis]: yAxis !== 'middle' 18067 }); 18068 } 18069 if (type === 'slide-in') { 18070 return classnames_default()('components-animate__slide-in', 'is-from-' + origin); 18071 } 18072 return undefined; 18073} 18074 18075/** 18076 * Simple interface to introduce animations to components. 18077 * 18078 * ```jsx 18079 * import { Animate, Notice } from '@wordpress/components'; 18080 * 18081 * const MyAnimatedNotice = () => ( 18082 * <Animate type="slide-in" options={ { origin: 'top' } }> 18083 * { ( { className } ) => ( 18084 * <Notice className={ className } status="success"> 18085 * <p>Animation finished.</p> 18086 * </Notice> 18087 * ) } 18088 * </Animate> 18089 * ); 18090 * ``` 18091 */ 18092function Animate({ 18093 type, 18094 options = {}, 18095 children 18096}) { 18097 return children({ 18098 className: getAnimateClassName({ 18099 type, 18100 ...options 18101 }) 18102 }); 18103} 18104/* harmony default export */ const animate = (Animate); 18105 18106;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/context/MotionConfigContext.mjs 18107 18108 18109/** 18110 * @public 18111 */ 18112const MotionConfigContext = (0,external_React_.createContext)({ 18113 transformPagePoint: (p) => p, 18114 isStatic: false,
18115 reducedMotion: "never", 18116}); 18117 18118 18119 18120;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/context/MotionContext/index.mjs 18121 18122 18123const MotionContext = (0,external_React_.createContext)({}); 18124 18125 18126 18127;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/context/PresenceContext.mjs 18128 18129 18130/** 18131 * @public 18132 */ 18133const PresenceContext_PresenceContext = (0,external_React_.createContext)(null); 18134 18135 18136 18137;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/utils/is-browser.mjs 18138const is_browser_isBrowser = typeof document !== "undefined"; 18139 18140 18141 18142;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/utils/use-isomorphic-effect.mjs 18143 18144 18145 18146const useIsomorphicLayoutEffect = is_browser_isBrowser ? external_React_.useLayoutEffect : external_React_.useEffect; 18147 18148 18149 18150;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/context/LazyContext.mjs 18151 18152 18153const LazyContext = (0,external_React_.createContext)({ strict: false }); 18154 18155 18156 18157;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/motion/utils/use-visual-element.mjs 18158 18159 18160 18161 18162 18163 18164 18165function useVisualElement(Component, visualState, props, createVisualElement) { 18166 const { visualElement: parent } = (0,external_React_.useContext)(MotionContext); 18167 const lazyContext = (0,external_React_.useContext)(LazyContext); 18168 const presenceContext = (0,external_React_.useContext)(PresenceContext_PresenceContext); 18169 const reducedMotionConfig = (0,external_React_.useContext)(MotionConfigContext).reducedMotion; 18170 const visualElementRef = (0,external_React_.useRef)(); 18171 /** 18172 * If we haven't preloaded a renderer, check to see if we have one lazy-loaded 18173 */ 18174 createVisualElement = createVisualElement || lazyContext.renderer; 18175 if (!visualElementRef.current && createVisualElement) { 18176 visualElementRef.current = createVisualElement(Component, { 18177 visualState, 18178 parent, 18179 props, 18180 presenceContext, 18181 blockInitialAnimation: presenceContext 18182 ? presenceContext.initial === false 18183 : false, 18184 reducedMotionConfig, 18185 }); 18186 } 18187 const visualElement = visualElementRef.current; 18188 (0,external_React_.useInsertionEffect)(() => { 18189 visualElement && visualElement.update(props, presenceContext); 18190 }); 18191 useIsomorphicLayoutEffect(() => { 18192 visualElement && visualElement.render(); 18193 }); 18194 (0,external_React_.useEffect)(() => { 18195 visualElement && visualElement.updateFeatures(); 18196 }); 18197 /** 18198 * Ideally this function would always run in a useEffect. 18199 * 18200 * However, if we have optimised appear animations to handoff from, 18201 * it needs to happen synchronously to ensure there's no flash of 18202 * incorrect styles in the event of a hydration error. 18203 * 18204 * So if we detect a situtation where optimised appear animations 18205 * are running, we use useLayoutEffect to trigger animations. 18206 */ 18207 const useAnimateChangesEffect = window.HandoffAppearAnimations 18208 ? useIsomorphicLayoutEffect 18209 : external_React_.useEffect; 18210 useAnimateChangesEffect(() => { 18211 if (visualElement && visualElement.animationState) { 18212 visualElement.animationState.animateChanges(); 18213 } 18214 }); 18215 return visualElement; 18216} 18217 18218 18219 18220;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/utils/is-ref-object.mjs 18221function is_ref_object_isRefObject(ref) { 18222 return (typeof ref === "object" && 18223 Object.prototype.hasOwnProperty.call(ref, "current")); 18224} 18225 18226 18227 18228;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/motion/utils/use-motion-ref.mjs 18229 18230 18231 18232/** 18233 * Creates a ref function that, when called, hydrates the provided 18234 * external ref and VisualElement. 18235 */ 18236function useMotionRef(visualState, visualElement, externalRef) { 18237 return (0,external_React_.useCallback)((instance) => { 18238 instance && visualState.mount && visualState.mount(instance); 18239 if (visualElement) { 18240 instance 18241 ? visualElement.mount(instance) 18242 : visualElement.unmount(); 18243 } 18244 if (externalRef) { 18245 if (typeof externalRef === "function") { 18246 externalRef(instance); 18247 } 18248 else if (is_ref_object_isRefObject(externalRef)) { 18249 externalRef.current = instance; 18250 } 18251 } 18252 }, 18253 /** 18254 * Only pass a new ref callback to React if we've received a visual element 18255 * factory. Otherwise we'll be mounting/remounting every time externalRef 18256 * or other dependencies change. 18257 */ 18258 [visualElement]); 18259} 18260 18261 18262 18263;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/render/utils/is-variant-label.mjs 18264/** 18265 * Decides if the supplied variable is variant label 18266 */ 18267function isVariantLabel(v) { 18268 return typeof v === "string" || Array.isArray(v); 18269} 18270 18271 18272 18273;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/animation/utils/is-animation-controls.mjs 18274function isAnimationControls(v) { 18275 return typeof v === "object" && typeof v.start === "function"; 18276} 18277 18278 18279 18280;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/render/utils/variant-props.mjs 18281const variantPriorityOrder = [ 18282 "animate", 18283 "whileInView", 18284 "whileFocus", 18285 "whileHover", 18286 "whileTap", 18287 "whileDrag", 18288 "exit", 18289]; 18290const variantProps = ["initial", ...variantPriorityOrder]; 18291 18292 18293 18294;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/render/utils/is-controlling-variants.mjs 18295 18296 18297 18298 18299function isControllingVariants(props) { 18300 return (isAnimationControls(props.animate) || 18301 variantProps.some((name) => isVariantLabel(props[name]))); 18302} 18303function isVariantNode(props) { 18304 return Boolean(isControllingVariants(props) || props.variants); 18305} 18306 18307 18308 18309;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/context/MotionContext/utils.mjs 18310 18311 18312 18313function getCurrentTreeVariants(props, context) { 18314 if (isControllingVariants(props)) { 18315 const { initial, animate } = props; 18316 return { 18317 initial: initial === false || isVariantLabel(initial) 18318 ? initial 18319 : undefined, 18320 animate: isVariantLabel(animate) ? animate : undefined, 18321 }; 18322 } 18323 return props.inherit !== false ? context : {}; 18324} 18325 18326 18327 18328;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/context/MotionContext/create.mjs 18329 18330 18331 18332 18333function useCreateMotionContext(props) { 18334 const { initial, animate } = getCurrentTreeVariants(props, (0,external_React_.useContext)(MotionContext)); 18335 return (0,external_React_.useMemo)(() => ({ initial, animate }), [variantLabelsAsDependency(initial), variantLabelsAsDependency(animate)]); 18336} 18337function variantLabelsAsDependency(prop) { 18338 return Array.isArray(prop) ? prop.join(" ") : prop; 18339} 18340 18341 18342 18343;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/motion/features/definitions.mjs 18344const featureProps = { 18345 animation: [ 18346 "animate", 18347 "variants", 18348 "whileHover", 18349 "whileTap", 18350 "exit", 18351 "whileInView", 18352 "whileFocus", 18353 "whileDrag", 18354 ], 18355 exit: ["exit"], 18356 drag: ["drag", "dragControls"], 18357 focus: ["whileFocus"], 18358 hover: ["whileHover", "onHoverStart", "onHoverEnd"],
18359 tap: ["whileTap", "onTap", "onTapStart", "onTapCancel"], 18360 pan: ["onPan", "onPanStart", "onPanSessionStart", "onPanEnd"], 18361 inView: ["whileInView", "onViewportEnter", "onViewportLeave"], 18362 layout: ["layout", "layoutId"], 18363}; 18364const featureDefinitions = {}; 18365for (const key in featureProps) { 18366 featureDefinitions[key] = { 18367 isEnabled: (props) => featureProps[key].some((name) => !!props[name]), 18368 }; 18369} 18370 18371 18372 18373;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/motion/features/load-features.mjs 18374 18375 18376function loadFeatures(features) { 18377 for (const key in features) { 18378 featureDefinitions[key] = { 18379 ...featureDefinitions[key], 18380 ...features[key], 18381 }; 18382 } 18383} 18384 18385 18386 18387;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/context/LayoutGroupContext.mjs 18388 18389 18390const LayoutGroupContext = (0,external_React_.createContext)({}); 18391 18392 18393 18394;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/context/SwitchLayoutGroupContext.mjs 18395 18396 18397/** 18398 * Internal, exported only for usage in Framer 18399 */ 18400const SwitchLayoutGroupContext = (0,external_React_.createContext)({}); 18401 18402 18403 18404;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/motion/utils/symbol.mjs 18405const motionComponentSymbol = Symbol.for("motionComponentSymbol"); 18406 18407 18408 18409;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/motion/index.mjs 18410 18411 18412 18413 18414 18415 18416 18417 18418 18419 18420 18421 18422 18423 18424/** 18425 * Create a `motion` component. 18426 * 18427 * This function accepts a Component argument, which can be either a string (ie "div" 18428 * for `motion.div`), or an actual React component. 18429 * 18430 * Alongside this is a config option which provides a way of rendering the provided 18431 * component "offline", or outside the React render cycle. 18432 */ 18433function motion_createMotionComponent({ preloadedFeatures, createVisualElement, useRender, useVisualState, Component, }) { 18434 preloadedFeatures && loadFeatures(preloadedFeatures); 18435 function MotionComponent(props, externalRef) { 18436 /** 18437 * If we need to measure the element we load this functionality in a 18438 * separate class component in order to gain access to getSnapshotBeforeUpdate. 18439 */ 18440 let MeasureLayout; 18441 const configAndProps = { 18442 ...(0,external_React_.useContext)(MotionConfigContext), 18443 ...props, 18444 layoutId: useLayoutId(props), 18445 }; 18446 const { isStatic } = configAndProps; 18447 const context = useCreateMotionContext(props); 18448 const visualState = useVisualState(props, isStatic); 18449 if (!isStatic && is_browser_isBrowser) { 18450 /** 18451 * Create a VisualElement for this component. A VisualElement provides a common 18452 * interface to renderer-specific APIs (ie DOM/Three.js etc) as well as 18453 * providing a way of rendering to these APIs outside of the React render loop 18454 * for more performant animations and interactions 18455 */ 18456 context.visualElement = useVisualElement(Component, visualState, configAndProps, createVisualElement); 18457 /** 18458 * Load Motion gesture and animation features. These are rendered as renderless 18459 * components so each feature can optionally make use of React lifecycle methods. 18460 */ 18461 const initialLayoutGroupConfig = (0,external_React_.useContext)(SwitchLayoutGroupContext); 18462 const isStrict = (0,external_React_.useContext)(LazyContext).strict; 18463 if (context.visualElement) { 18464 MeasureLayout = context.visualElement.loadFeatures( 18465 // Note: Pass the full new combined props to correctly re-render dynamic feature components. 18466 configAndProps, isStrict, preloadedFeatures, initialLayoutGroupConfig); 18467 } 18468 } 18469 /** 18470 * The mount order and hierarchy is specific to ensure our element ref 18471 * is hydrated by the time features fire their effects. 18472 */ 18473 return (external_React_.createElement(MotionContext.Provider, { value: context }, 18474 MeasureLayout && context.visualElement ? (external_React_.createElement(MeasureLayout, { visualElement: context.visualElement, ...configAndProps })) : null, 18475 useRender(Component, props, useMotionRef(visualState, context.visualElement, externalRef), visualState, isStatic, context.visualElement))); 18476 } 18477 const ForwardRefComponent = (0,external_React_.forwardRef)(MotionComponent); 18478 ForwardRefComponent[motionComponentSymbol] = Component; 18479 return ForwardRefComponent; 18480} 18481function useLayoutId({ layoutId }) { 18482 const layoutGroupId = (0,external_React_.useContext)(LayoutGroupContext).id; 18483 return layoutGroupId && layoutId !== undefined 18484 ? layoutGroupId + "-" + layoutId 18485 : layoutId; 18486} 18487 18488 18489 18490;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/render/dom/motion-proxy.mjs 18491 18492 18493/** 18494 * Convert any React component into a `motion` component. The provided component 18495 * **must** use `React.forwardRef` to the underlying DOM component you want to animate. 18496 * 18497 * ```jsx 18498 * const Component = React.forwardRef((props, ref) => { 18499 * return <div ref={ref} /> 18500 * }) 18501 * 18502 * const MotionComponent = motion(Component) 18503 * ``` 18504 * 18505 * @public 18506 */ 18507function createMotionProxy(createConfig) { 18508 function custom(Component, customMotionComponentConfig = {}) { 18509 return motion_createMotionComponent(createConfig(Component, customMotionComponentConfig)); 18510 } 18511 if (typeof Proxy === "undefined") { 18512 return custom; 18513 } 18514 /** 18515 * A cache of generated `motion` components, e.g `motion.div`, `motion.input` etc. 18516 * Rather than generating them anew every render. 18517 */ 18518 const componentCache = new Map(); 18519 return new Proxy(custom, { 18520 /** 18521 * Called when `motion` is referenced with a prop: `motion.div`, `motion.input` etc.
18522 * The prop name is passed through as `key` and we can use that to generate a `motion` 18523 * DOM component with that name. 18524 */ 18525 get: (_target, key) => { 18526 /** 18527 * If this element doesn't exist in the component cache, create it and cache. 18528 */ 18529 if (!componentCache.has(key)) { 18530 componentCache.set(key, custom(key)); 18531 } 18532 return componentCache.get(key); 18533 }, 18534 }); 18535} 18536 18537 18538 18539;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/render/svg/lowercase-elements.mjs 18540/** 18541 * We keep these listed seperately as we use the lowercase tag names as part 18542 * of the runtime bundle to detect SVG components 18543 */ 18544const lowercaseSVGElements = [ 18545 "animate", 18546 "circle", 18547 "defs", 18548 "desc", 18549 "ellipse", 18550 "g", 18551 "image", 18552 "line", 18553 "filter", 18554 "marker", 18555 "mask", 18556 "metadata", 18557 "path", 18558 "pattern", 18559 "polygon", 18560 "polyline", 18561 "rect", 18562 "stop", 18563 "switch", 18564 "symbol", 18565 "svg", 18566 "text", 18567 "tspan", 18568 "use", 18569 "view", 18570]; 18571 18572 18573 18574;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/render/dom/utils/is-svg-component.mjs 18575 18576 18577function isSVGComponent(Component) { 18578 if ( 18579 /** 18580 * If it's not a string, it's a custom React component. Currently we only support 18581 * HTML custom React components. 18582 */ 18583 typeof Component !== "string" || 18584 /** 18585 * If it contains a dash, the element is a custom HTML webcomponent. 18586 */ 18587 Component.includes("-")) { 18588 return false; 18589 } 18590 else if ( 18591 /** 18592 * If it's in our list of lowercase SVG tags, it's an SVG component 18593 */ 18594 lowercaseSVGElements.indexOf(Component) > -1 || 18595 /** 18596 * If it contains a capital letter, it's an SVG component 18597 */ 18598 /[A-Z]/.test(Component)) { 18599 return true; 18600 } 18601 return false; 18602} 18603 18604 18605 18606;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/projection/styles/scale-correction.mjs 18607const scaleCorrectors = {}; 18608function addScaleCorrector(correctors) { 18609 Object.assign(scaleCorrectors, correctors); 18610} 18611 18612 18613 18614;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/render/html/utils/transform.mjs 18615/** 18616 * Generate a list of every possible transform key. 18617 */ 18618const transformPropOrder = [ 18619 "transformPerspective", 18620 "x", 18621 "y", 18622 "z", 18623 "translateX", 18624 "translateY", 18625 "translateZ", 18626 "scale", 18627 "scaleX", 18628 "scaleY", 18629 "rotate", 18630 "rotateX", 18631 "rotateY", 18632 "rotateZ", 18633 "skew", 18634 "skewX", 18635 "skewY", 18636]; 18637/** 18638 * A quick lookup for transform props. 18639 */ 18640const transformProps = new Set(transformPropOrder); 18641 18642 18643 18644;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/motion/utils/is-forced-motion-value.mjs 18645 18646 18647 18648function isForcedMotionValue(key, { layout, layoutId }) { 18649 return (transformProps.has(key) || 18650 key.startsWith("origin") || 18651 ((layout || layoutId !== undefined) && 18652 (!!scaleCorrectors[key] || key === "opacity"))); 18653} 18654 18655 18656 18657;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/value/utils/is-motion-value.mjs 18658const isMotionValue = (value) => Boolean(value && value.getVelocity); 18659 18660 18661 18662;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/render/html/utils/build-transform.mjs 18663 18664 18665const translateAlias = { 18666 x: "translateX", 18667 y: "translateY", 18668 z: "translateZ", 18669 transformPerspective: "perspective", 18670}; 18671const numTransforms = transformPropOrder.length; 18672/** 18673 * Build a CSS transform style from individual x/y/scale etc properties. 18674 * 18675 * This outputs with a default order of transforms/scales/rotations, this can be customised by 18676 * providing a transformTemplate function. 18677 */ 18678function buildTransform(transform, { enableHardwareAcceleration = true, allowTransformNone = true, }, transformIsDefault, transformTemplate) { 18679 // The transform string we're going to build into. 18680 let transformString = ""; 18681 /** 18682 * Loop over all possible transforms in order, adding the ones that 18683 * are present to the transform string. 18684 */ 18685 for (let i = 0; i < numTransforms; i++) {
18686 const key = transformPropOrder[i]; 18687 if (transform[key] !== undefined) { 18688 const transformName = translateAlias[key] || key; 18689 transformString += `${transformName}(${transform[key]}) `; 18690 } 18691 } 18692 if (enableHardwareAcceleration && !transform.z) { 18693 transformString += "translateZ(0)"; 18694 } 18695 transformString = transformString.trim(); 18696 // If we have a custom `transform` template, pass our transform values and 18697 // generated transformString to that before returning 18698 if (transformTemplate) { 18699 transformString = transformTemplate(transform, transformIsDefault ? "" : transformString); 18700 } 18701 else if (allowTransformNone && transformIsDefault) { 18702 transformString = "none"; 18703 } 18704 return transformString; 18705} 18706 18707 18708 18709;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/render/dom/utils/is-css-variable.mjs 18710const checkStringStartsWith = (token) => (key) => typeof key === "string" && key.startsWith(token); 18711const isCSSVariableName = checkStringStartsWith("--"); 18712const isCSSVariableToken = checkStringStartsWith("var(--");
18713const cssVariableRegex = /var\s*\(\s*--[\w-]+(\s*,\s*(?:(?:[^)(]|\((?:[^)(]+|\([^)(]*\))*\))*)+)?\s*\)/g; 18714 18715 18716 18717;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/render/dom/value-types/get-as-type.mjs 18718/** 18719 * Provided a value and a ValueType, returns the value as that value type. 18720 */ 18721const getValueAsType = (value, type) => { 18722 return type && typeof value === "number" 18723 ? type.transform(value) 18724 : value; 18725}; 18726 18727 18728 18729;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/utils/clamp.mjs 18730const clamp_clamp = (min, max, v) => Math.min(Math.max(v, min), max); 18731 18732 18733 18734;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/value/types/numbers/index.mjs 18735 18736 18737const number = { 18738 test: (v) => typeof v === "number", 18739 parse: parseFloat, 18740 transform: (v) => v, 18741}; 18742const alpha = { 18743 ...number, 18744 transform: (v) => clamp_clamp(0, 1, v), 18745}; 18746const scale = { 18747 ...number, 18748 default: 1, 18749}; 18750 18751 18752 18753;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/value/types/utils.mjs 18754/** 18755 * TODO: When we move from string as a source of truth to data models 18756 * everything in this folder should probably be referred to as models vs types 18757 */ 18758// If this number is a decimal, make it just five decimal places 18759// to avoid exponents 18760const sanitize = (v) => Math.round(v * 100000) / 100000; 18761const floatRegex = /(-)?([\d]*\.?[\d])+/g; 18762const colorRegex = /(#[0-9a-f]{3,8}|(rgb|hsl)a?\((-?[\d\.]+%?[,\s]+){2}(-?[\d\.]+%?)\s*[\,\/]?\s*[\d\.]*%?\))/gi; 18763const singleColorRegex = /^(#[0-9a-f]{3,8}|(rgb|hsl)a?\((-?[\d\.]+%?[,\s]+){2}(-?[\d\.]+%?)\s*[\,\/]?\s*[\d\.]*%?\))$/i; 18764function isString(v) { 18765 return typeof v === "string"; 18766} 18767 18768 18769 18770;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/value/types/numbers/units.mjs 18771 18772 18773const createUnitType = (unit) => ({ 18774 test: (v) => isString(v) && v.endsWith(unit) && v.split(" ").length === 1, 18775 parse: parseFloat, 18776 transform: (v) => `${v}${unit}`, 18777}); 18778const degrees = createUnitType("deg"); 18779const percent = createUnitType("%"); 18780const px = createUnitType("px"); 18781const vh = createUnitType("vh"); 18782const vw = createUnitType("vw"); 18783const progressPercentage = { 18784 ...percent, 18785 parse: (v) => percent.parse(v) / 100, 18786 transform: (v) => percent.transform(v * 100), 18787}; 18788 18789 18790 18791;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/render/dom/value-types/type-int.mjs 18792 18793 18794const type_int_int = { 18795 ...number, 18796 transform: Math.round, 18797}; 18798 18799 18800 18801;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/render/dom/value-types/number.mjs 18802 18803 18804 18805 18806const numberValueTypes = { 18807 // Border props 18808 borderWidth: px, 18809 borderTopWidth: px, 18810 borderRightWidth: px, 18811 borderBottomWidth: px, 18812 borderLeftWidth: px, 18813 borderRadius: px, 18814 radius: px, 18815 borderTopLeftRadius: px, 18816 borderTopRightRadius: px, 18817 borderBottomRightRadius: px, 18818 borderBottomLeftRadius: px, 18819 // Positioning props 18820 width: px, 18821 maxWidth: px, 18822 height: px, 18823 maxHeight: px, 18824 size: px, 18825 top: px, 18826 right: px, 18827 bottom: px, 18828 left: px, 18829 // Spacing props 18830 padding: px, 18831 paddingTop: px, 18832 paddingRight: px, 18833 paddingBottom: px, 18834 paddingLeft: px, 18835 margin: px, 18836 marginTop: px, 18837 marginRight: px, 18838 marginBottom: px, 18839 marginLeft: px, 18840 // Transform props 18841 rotate: degrees, 18842 rotateX: degrees, 18843 rotateY: degrees, 18844 rotateZ: degrees, 18845 scale: scale, 18846 scaleX: scale, 18847 scaleY: scale, 18848 scaleZ: scale, 18849 skew: degrees, 18850 skewX: degrees, 18851 skewY: degrees, 18852 distance: px, 18853 translateX: px, 18854 translateY: px, 18855 translateZ: px, 18856 x: px, 18857 y: px, 18858 z: px, 18859 perspective: px, 18860 transformPerspective: px, 18861 opacity: alpha, 18862 originX: progressPercentage, 18863 originY: progressPercentage, 18864 originZ: px, 18865 // Misc 18866 zIndex: type_int_int, 18867 // SVG 18868 fillOpacity: alpha, 18869 strokeOpacity: alpha, 18870 numOctaves: type_int_int, 18871}; 18872 18873 18874 18875;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/render/html/utils/build-styles.mjs 18876 18877 18878 18879 18880 18881 18882function buildHTMLStyles(state, latestValues, options, transformTemplate) { 18883 const { style, vars, transform, transformOrigin } = state; 18884 // Track whether we encounter any transform or transformOrigin values. 18885 let hasTransform = false;
18886 let hasTransformOrigin = false; 18887 // Does the calculated transform essentially equal "none"? 18888 let transformIsNone = true; 18889 /** 18890 * Loop over all our latest animated values and decide whether to handle them 18891 * as a style or CSS variable. 18892 * 18893 * Transforms and transform origins are kept seperately for further processing. 18894 */ 18895 for (const key in latestValues) { 18896 const value = latestValues[key]; 18897 /** 18898 * If this is a CSS variable we don't do any further processing. 18899 */ 18900 if (isCSSVariableName(key)) { 18901 vars[key] = value; 18902 continue; 18903 } 18904 // Convert the value to its default value type, ie 0 -> "0px" 18905 const valueType = numberValueTypes[key]; 18906 const valueAsType = getValueAsType(value, valueType); 18907 if (transformProps.has(key)) { 18908 // If this is a transform, flag to enable further transform processing 18909 hasTransform = true; 18910 transform[key] = valueAsType; 18911 // If we already know we have a non-default transform, early return 18912 if (!transformIsNone) 18913 continue; 18914 // Otherwise check to see if this is a default transform 18915 if (value !== (valueType.default || 0)) 18916 transformIsNone = false; 18917 } 18918 else if (key.startsWith("origin")) { 18919 // If this is a transform origin, flag and enable further transform-origin processing 18920 hasTransformOrigin = true; 18921 transformOrigin[key] = valueAsType; 18922 } 18923 else { 18924 style[key] = valueAsType; 18925 } 18926 } 18927 if (!latestValues.transform) { 18928 if (hasTransform || transformTemplate) { 18929 style.transform = buildTransform(state.transform, options, transformIsNone, transformTemplate); 18930 } 18931 else if (style.transform) { 18932 /** 18933 * If we have previously created a transform but currently don't have any, 18934 * reset transform style to none. 18935 */ 18936 style.transform = "none"; 18937 } 18938 } 18939 /** 18940 * Build a transformOrigin style. Uses the same defaults as the browser for 18941 * undefined origins. 18942 */ 18943 if (hasTransformOrigin) { 18944 const { originX = "50%", originY = "50%", originZ = 0, } = transformOrigin; 18945 style.transformOrigin = `${originX} ${originY} ${originZ}`; 18946 } 18947} 18948 18949 18950 18951;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/render/html/utils/create-render-state.mjs 18952const createHtmlRenderState = () => ({ 18953 style: {}, 18954 transform: {}, 18955 transformOrigin: {}, 18956 vars: {}, 18957}); 18958 18959 18960 18961;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/render/html/use-props.mjs 18962 18963 18964 18965 18966 18967 18968function copyRawValuesOnly(target, source, props) { 18969 for (const key in source) { 18970 if (!isMotionValue(source[key]) && !isForcedMotionValue(key, props)) { 18971 target[key] = source[key]; 18972 } 18973 } 18974} 18975function useInitialMotionValues({ transformTemplate }, visualState, isStatic) { 18976 return (0,external_React_.useMemo)(() => { 18977 const state = createHtmlRenderState(); 18978 buildHTMLStyles(state, visualState, { enableHardwareAcceleration: !isStatic }, transformTemplate); 18979 return Object.assign({}, state.vars, state.style); 18980 }, [visualState]); 18981} 18982function useStyle(props, visualState, isStatic) { 18983 const styleProp = props.style || {}; 18984 const style = {}; 18985 /** 18986 * Copy non-Motion Values straight into style 18987 */ 18988 copyRawValuesOnly(style, styleProp, props); 18989 Object.assign(style, useInitialMotionValues(props, visualState, isStatic)); 18990 return props.transformValues ? props.transformValues(style) : style; 18991} 18992function useHTMLProps(props, visualState, isStatic) { 18993 // The `any` isn't ideal but it is the type of createElement props argument 18994 const htmlProps = {}; 18995 const style = useStyle(props, visualState, isStatic); 18996 if (props.drag && props.dragListener !== false) { 18997 // Disable the ghost element when a user drags 18998 htmlProps.draggable = false; 18999 // Disable text selection 19000 style.userSelect = 19001 style.WebkitUserSelect = 19002 style.WebkitTouchCallout = 19003 "none"; 19004 // Disable scrolling on the draggable direction 19005 style.touchAction = 19006 props.drag === true 19007 ? "none" 19008 : `pan-${props.drag === "x" ? "y" : "x"}`; 19009 } 19010 if (props.tabIndex === undefined && 19011 (props.onTap || props.onTapStart || props.whileTap)) { 19012 htmlProps.tabIndex = 0; 19013 } 19014 htmlProps.style = style; 19015 return htmlProps; 19016} 19017 19018 19019 19020;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/motion/utils/valid-prop.mjs 19021/** 19022 * A list of all valid MotionProps. 19023 * 19024 * @privateRemarks 19025 * This doesn't throw if a `MotionProp` name is missing - it should. 19026 */ 19027const validMotionProps = new Set([ 19028 "animate", 19029 "exit", 19030 "variants", 19031 "initial", 19032 "style", 19033 "values", 19034 "variants", 19035 "transition", 19036 "transformTemplate", 19037 "transformValues", 19038 "custom", 19039 "inherit", 19040 "onLayoutAnimationStart", 19041 "onLayoutAnimationComplete", 19042 "onLayoutMeasure", 19043 "onBeforeLayoutMeasure", 19044 "onAnimationStart", 19045 "onAnimationComplete", 19046 "onUpdate", 19047 "onDragStart", 19048 "onDrag", 19049 "onDragEnd", 19050 "onMeasureDragConstraints", 19051 "onDirectionLock", 19052 "onDragTransitionEnd", 19053 "_dragX", 19054 "_dragY", 19055 "onHoverStart", 19056 "onHoverEnd", 19057 "onViewportEnter", 19058 "onViewportLeave", 19059 "ignoreStrict", 19060 "viewport", 19061]); 19062/** 19063 * Check whether a prop name is a valid `MotionProp` key. 19064 * 19065 * @param key - Name of the property to check 19066 * @returns `true` is key is a valid `MotionProp`. 19067 * 19068 * @public 19069 */ 19070function isValidMotionProp(key) { 19071 return (key.startsWith("while") || 19072 (key.startsWith("drag") && key !== "draggable") || 19073 key.startsWith("layout") || 19074 key.startsWith("onTap") || 19075 key.startsWith("onPan") || 19076 validMotionProps.has(key)); 19077} 19078 19079 19080 19081;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/render/dom/ut
vendor: 4,403 bytes, lines 19081-19199
19081ils/filter-props.mjs 19082 19083 19084let shouldForward = (key) => !isValidMotionProp(key); 19085function loadExternalIsValidProp(isValidProp) { 19086 if (!isValidProp) 19087 return; 19088 // Explicitly filter our events 19089 shouldForward = (key) => key.startsWith("on") ? !isValidMotionProp(key) : isValidProp(key); 19090} 19091/** 19092 * Emotion and Styled Components both allow users to pass through arbitrary props to their components 19093 * to dynamically generate CSS. They both use the `@emotion/is-prop-valid` package to determine which 19094 * of these should be passed to the underlying DOM node. 19095 * 19096 * However, when styling a Motion component `styled(motion.div)`, both packages pass through *all* props 19097 * as it's seen as an arbitrary component rather than a DOM node. Motion only allows arbitrary props 19098 * passed through the `custom` prop so it doesn't *need* the payload or computational overhead of 19099 * `@emotion/is-prop-valid`, however to fix this problem we need to use it. 19100 * 19101 * By making it an optionalDependency we can offer this functionality only in the situations where it's 19102 * actually required. 19103 */ 19104try { 19105 /** 19106 * We attempt to import this package but require won't be defined in esm environments, in that case 19107 * isPropValid will have to be provided via `MotionContext`. In a 6.0.0 this should probably be removed 19108 * in favour of explicit injection. 19109 */ 19110 loadExternalIsValidProp(require("@emotion/is-prop-valid").default); 19111} 19112catch (_a) { 19113 // We don't need to actually do anything here - the fallback is the existing `isPropValid`. 19114} 19115function filterProps(props, isDom, forwardMotionProps) { 19116 const filteredProps = {}; 19117 for (const key in props) { 19118 /** 19119 * values is considered a valid prop by Emotion, so if it's present 19120 * this will be rendered out to the DOM unless explicitly filtered. 19121 * 19122 * We check the type as it could be used with the `feColorMatrix` 19123 * element, which we support. 19124 */ 19125 if (key === "values" && typeof props.values === "object") 19126 continue; 19127 if (shouldForward(key) || 19128 (forwardMotionProps === true && isValidMotionProp(key)) || 19129 (!isDom && !isValidMotionProp(key)) || 19130 // If trying to use native HTML drag events, forward drag listeners 19131 (props["draggable"] && key.startsWith("onDrag"))) { 19132 filteredProps[key] = props[key]; 19133 } 19134 } 19135 return filteredProps; 19136} 19137 19138 19139 19140;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/render/svg/utils/transform-origin.mjs 19141 19142 19143function calcOrigin(origin, offset, size) { 19144 return typeof origin === "string" 19145 ? origin 19146 : px.transform(offset + size * origin); 19147} 19148/** 19149 * The SVG transform origin defaults are different to CSS and is less intuitive, 19150 * so we use the measured dimensions of the SVG to reconcile these. 19151 */ 19152function calcSVGTransformOrigin(dimensions, originX, originY) { 19153 const pxOriginX = calcOrigin(originX, dimensions.x, dimensions.width); 19154 const pxOriginY = calcOrigin(originY, dimensions.y, dimensions.height); 19155 return `${pxOriginX} ${pxOriginY}`; 19156} 19157 19158 19159 19160;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/render/svg/utils/path.mjs 19161 19162 19163const dashKeys = { 19164 offset: "stroke-dashoffset", 19165 array: "stroke-dasharray", 19166}; 19167const camelKeys = { 19168 offset: "strokeDashoffset", 19169 array: "strokeDasharray", 19170}; 19171/** 19172 * Build SVG path properties. Uses the path's measured length to convert 19173 * our custom pathLength, pathSpacing and pathOffset into stroke-dashoffset 19174 * and stroke-dasharray attributes. 19175 * 19176 * This function is mutative to reduce per-frame GC. 19177 */ 19178function buildSVGPath(attrs, length, spacing = 1, offset = 0, useDashCase = true) { 19179 // Normalise path length by setting SVG attribute pathLength to 1 19180 attrs.pathLength = 1; 19181 // We use dash case when setting attributes directly to the DOM node and camel case 19182 // when defining props on a React component. 19183 const keys = useDashCase ? dashKeys : camelKeys; 19184 // Build the dash offset 19185 attrs[keys.offset] = px.transform(-offset); 19186 // Build the dash array 19187 const pathLength = px.transform(length); 19188 const pathSpacing = px.transform(spacing); 19189 attrs[keys.array] = `${pathLength} ${pathSpacing}`; 19190} 19191 19192 19193 19194;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/render/svg/utils/build-attrs.mjs 19195 19196 19197 19198 19199/**
19200 * Build SVG visual attrbutes, like cx and style.transform 19201 */ 19202function buildSVGAttrs(state, { attrX, attrY, attrScale, originX, originY, pathLength, pathSpacing = 1, pathOffset = 0, 19203// This is object creation, which we try to avoid per-frame. 19204...latest }, options, isSVGTag, transformTemplate) { 19205 buildHTMLStyles(state, latest, options, transformTemplate); 19206 /** 19207 * For svg tags we just want to make sure viewBox is animatable and treat all the styles 19208 * as normal HTML tags. 19209 */ 19210 if (isSVGTag) { 19211 if (state.style.viewBox) { 19212 state.attrs.viewBox = state.style.viewBox; 19213 } 19214 return; 19215 } 19216 state.attrs = state.style; 19217 state.style = {}; 19218 const { attrs, style, dimensions } = state; 19219 /** 19220 * However, we apply transforms as CSS transforms. So if we detect a transform we take it from attrs 19221 * and copy it into style. 19222 */ 19223 if (attrs.transform) { 19224 if (dimensions) 19225 style.transform = attrs.transform; 19226 delete attrs.transform; 19227 } 19228 // Parse transformOrigin 19229 if (dimensions && 19230 (originX !== undefined || originY !== undefined || style.transform)) { 19231 style.transformOrigin = calcSVGTransformOrigin(dimensions, originX !== undefined ? originX : 0.5, originY !== undefined ? originY : 0.5); 19232 } 19233 // Render attrX/attrY/attrScale as attributes 19234 if (attrX !== undefined) 19235 attrs.x = attrX; 19236 if (attrY !== undefined) 19237 attrs.y = attrY; 19238 if (attrScale !== undefined) 19239 attrs.scale = attrScale; 19240 // Build SVG path if one has been defined 19241 if (pathLength !== undefined) { 19242 buildSVGPath(attrs, pathLength, pathSpacing, pathOffset, false); 19243 } 19244} 19245 19246 19247 19248;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/render/svg/utils/create-render-state.mjs 19249 19250 19251const createSvgRenderState = () => ({ 19252 ...createHtmlRenderState(), 19253 attrs: {}, 19254}); 19255 19256 19257 19258;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/render/svg/utils/is-svg-tag.mjs 19259const isSVGTag = (tag) => typeof tag === "string" && tag.toLowerCase() === "svg"; 19260 19261 19262 19263;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/render/svg/use-props.mjs 19264 19265 19266 19267 19268 19269 19270function useSVGProps(props, visualState, _isStatic, Component) { 19271 const visualProps = (0,external_React_.useMemo)(() => { 19272 const state = createSvgRenderState(); 19273 buildSVGAttrs(state, visualState, { enableHardwareAcceleration: false }, isSVGTag(Component), props.transformTemplate); 19274 return { 19275 ...state.attrs, 19276 style: { ...state.style }, 19277 }; 19278 }, [visualState]); 19279 if (props.style) { 19280 const rawStyles = {}; 19281 copyRawValuesOnly(rawStyles, props.style, props); 19282 visualProps.style = { ...rawStyles, ...visualProps.style }; 19283 } 19284 return visualProps; 19285} 19286 19287 19288 19289;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/render/dom/use-render.mjs 19290 19291 19292 19293 19294 19295 19296 19297function createUseRender(forwardMotionProps = false) { 19298 const useRender = (Component, props, ref, { latestValues }, isStatic) => { 19299 const useVisualProps = isSVGComponent(Component) 19300 ? useSVGProps 19301 : useHTMLProps; 19302 const visualProps = useVisualProps(props, latestValues, isStatic, Component); 19303 const filteredProps = filterProps(props, typeof Component === "string", forwardMotionProps); 19304 const elementProps = { 19305 ...filteredProps, 19306 ...visualProps, 19307 ref, 19308 }; 19309 /** 19310 * If component has been handed a motion value as its child, 19311 * memoise its initial value and render that. Subsequent updates 19312 * will be handled by the onChange handler 19313 */ 19314 const { children } = props; 19315 const renderedChildren = (0,external_React_.useMemo)(() => (isMotionValue(children) ? children.get() : children), [children]); 19316 return (0,external_React_.createElement)(Component, { 19317 ...elementProps, 19318 children: renderedChildren, 19319 }); 19320 }; 19321 return useRender; 19322} 19323 19324 19325 19326;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/render/dom/ut
19326ils/camel-to-dash.mjs 19327/** 19328 * Convert camelCase to dash-case properties. 19329 */ 19330const camelToDash = (str) => str.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase(); 19331 19332 19333 19334;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/render/html/utils/render.mjs 19335function renderHTML(element, { style, vars }, styleProp, projection) { 19336 Object.assign(element.style, style, projection && projection.getProjectionStyles(styleProp)); 19337 // Loop over any CSS variables and assign those. 19338 for (const key in vars) { 19339 element.style.setProperty(key, vars[key]); 19340 } 19341} 19342 19343 19344 19345;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/render/svg/utils/camel-case-attrs.mjs 19346/** 19347 * A set of attribute names that are always read/written as camel case. 19348 */ 19349const camelCaseAttributes = new Set([ 19350 "baseFrequency", 19351 "diffuseConstant", 19352 "kernelMatrix", 19353 "kernelUnitLength", 19354 "keySplines", 19355 "keyTimes", 19356 "limitingConeAngle", 19357 "markerHeight", 19358 "markerWidth", 19359 "numOctaves", 19360 "targetX", 19361 "targetY", 19362 "surfaceScale", 19363 "specularConstant", 19364 "specularExponent", 19365 "stdDeviation", 19366 "tableValues", 19367 "viewBox", 19368 "gradientTransform", 19369 "pathLength", 19370 "startOffset", 19371 "textLength", 19372 "lengthAdjust", 19373]); 19374 19375 19376 19377;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/render/svg/utils/render.mjs 19378 19379 19380 19381
19382function renderSVG(element, renderState, _styleProp, projection) { 19383 renderHTML(element, renderState, undefined, projection); 19384 for (const key in renderState.attrs) { 19385 element.setAttribute(!camelCaseAttributes.has(key) ? camelToDash(key) : key, renderState.attrs[key]); 19386 } 19387} 19388 19389 19390 19391;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/render/html/utils/scrape-motion-values.mjs 19392 19393 19394 19395function scrapeMotionValuesFromProps(props, prevProps) { 19396 const { style } = props; 19397 const newValues = {}; 19398 for (const key in style) { 19399 if (isMotionValue(style[key]) || 19400 (prevProps.style && isMotionValue(prevProps.style[key])) || 19401 isForcedMotionValue(key, props)) { 19402 newValues[key] = style[key]; 19403 } 19404 } 19405 return newValues; 19406} 19407 19408 19409 19410;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/render/svg/utils/scrape-motion-values.mjs 19411 19412 19413 19414 19415function scrape_motion_values_scrapeMotionValuesFromProps(props, prevProps) { 19416 const newValues = scrapeMotionValuesFromProps(props, prevProps); 19417 for (const key in props) { 19418 if (isMotionValue(props[key]) || isMotionValue(prevProps[key])) { 19419 const targetKey = transformPropOrder.indexOf(key) !== -1 19420 ? "attr" + key.charAt(0).toUpperCase() + key.substring(1) 19421 : key; 19422 newValues[targetKey] = props[key]; 19423 } 19424 } 19425 return newValues; 19426} 19427 19428 19429 19430;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/render/utils/resolve-variants.mjs 19431function resolveVariantFromProps(props, definition, custom, currentValues = {}, currentVelocity = {}) { 19432 /** 19433 * If the variant definition is a function, resolve. 19434 */ 19435 if (typeof definition === "function") { 19436 definition = definition(custom !== undefined ? custom : props.custom, currentValues, currentVelocity); 19437 } 19438 /** 19439 * If the variant definition is a variant label, or 19440 * the function returned a variant label, resolve. 19441 */ 19442 if (typeof definition === "string") { 19443 definition = props.variants && props.variants[definition]; 19444 } 19445 /** 19446 * At this point we've resolved both functions and variant labels, 19447 * but the resolved variant label might itself have been a function. 19448 * If so, resolve. This can only have returned a valid target object. 19449 */ 19450 if (typeof definition === "function") { 19451 definition = definition(custom !== undefined ? custom : props.custom, currentValues, currentVelocity); 19452 } 19453 return definition; 19454} 19455 19456 19457 19458;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/utils/use-constant.mjs 19459 19460 19461/** 19462 * Creates a constant value over the lifecycle of a component. 19463 * 19464 * Even if `useMemo` is provided an empty array as its final argument, it doesn't offer 19465 * a guarantee that it won't re-run for performance reasons later on. By using `useConstant` 19466 * you can ensure that initialisers don't execute twice or more. 19467 */ 19468function useConstant(init) { 19469 const ref = (0,external_React_.useRef)(null); 19470 if (ref.current === null) { 19471 ref.current = init(); 19472 } 19473 return ref.current; 19474} 19475 19476 19477 19478;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/animation/utils/is-keyframes-target.mjs 19479const isKeyframesTarget = (v) => { 19480 return Array.isArray(v); 19481}; 19482 19483 19484 19485;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/utils/resolve-value.mjs 19486 19487 19488const isCustomValue = (v) => { 19489 return Boolean(v && typeof v === "object" && v.mix && v.toValue); 19490}; 19491const resolveFinalValueInKeyframes = (v) => { 19492 // TODO maybe throw if v.length - 1 is placeholder token? 19493 return isKeyframesTarget(v) ? v[v.length - 1] || 0 : v; 19494}; 19495 19496 19497 19498;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/value/utils/resolve-motion-value.mjs 19499 19500 19501 19502/** 19503 * If the provided value is a MotionValue, this returns the actual value, otherwise just the value itself 19504 * 19505 * TODO: Remove and move to library 19506 */ 19507function resolveMotionValue(value) { 19508 const unwrappedValue = isMotionValue(value) ? value.get() : value; 19509 return isCustomValue(unwrappedValue) 19510 ? unwrappedValue.toValue() 19511 : unwrappedValue; 19512} 19513 19514 19515 19516;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/motion/utils/use-visual-state.mjs 19517 19518 19519 19520 19521 19522 19523 19524 19525 19526function makeState({ scrapeMotionValuesFromProps, createRenderState, onMount, }, props, context, presenceContext) { 19527 const state = { 19528 latestValues: makeLatestValues(props, context, presenceContext, scrapeMotionValuesFromProps), 19529 renderState: createRenderState(), 19530 }; 19531 if (onMount) { 19532 state.mount = (instance) => onMount(props, instance, state); 19533 } 19534 return state; 19535} 19536const makeUseVisualState = (config) => (props, isStatic) => { 19537 const context = (0,external_React_.useContext)(MotionContext); 19538 const presenceContext = (0,external_React_.useContext)(PresenceContext_PresenceContext); 19539 const make = () => makeState(config, props, context, presenceContext); 19540 return isStatic ? make() : useConstant(make); 19541}; 19542function makeLatestValues(props, context, presenceContext, scrapeMotionValues) { 19543 const values = {}; 19544 const motionValues = scrapeMotionValues(props, {}); 19545 for (const key in motionValues) { 19546 values[key] = resolveMotionValue(motionValues[key]); 19547 } 19548 let { initial, animate } = props; 19549 const isControllingVariants$1 = isControllingVariants(props); 19550 const isVariantNode$1 = isVariantNode(props); 19551 if (context && 19552 isVariantNode$1 && 19553 !isControllingVariants$1 && 19554 props.inherit !== false) { 19555 if (initial === undefined)
19556 initial = context.initial; 19557 if (animate === undefined) 19558 animate = context.animate; 19559 } 19560 let isInitialAnimationBlocked = presenceContext 19561 ? presenceContext.initial === false 19562 : false; 19563 isInitialAnimationBlocked = isInitialAnimationBlocked || initial === false; 19564 const variantToSet = isInitialAnimationBlocked ? animate : initial; 19565 if (variantToSet && 19566 typeof variantToSet !== "boolean" && 19567 !isAnimationControls(variantToSet)) { 19568 const list = Array.isArray(variantToSet) ? variantToSet : [variantToSet]; 19569 list.forEach((definition) => { 19570 const resolved = resolveVariantFromProps(props, definition); 19571 if (!resolved) 19572 return; 19573 const { transitionEnd, transition, ...target } = resolved; 19574 for (const key in target) { 19575 let valueTarget = target[key]; 19576 if (Array.isArray(valueTarget)) { 19577 /** 19578 * Take final keyframe if the initial animation is blocked because 19579 * we want to initialise at the end of that blocked animation. 19580 */ 19581 const index = isInitialAnimationBlocked 19582 ? valueTarget.length - 1 19583 : 0; 19584 valueTarget = valueTarget[index]; 19585 } 19586 if (valueTarget !== null) { 19587 values[key] = valueTarget; 19588 } 19589 } 19590 for (const key in transitionEnd) 19591 values[key] = transitionEnd[key]; 19592 }); 19593 } 19594 return values; 19595} 19596 19597 19598 19599;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/render/svg/config-motion.mjs 19600 19601 19602 19603 19604 19605 19606 19607const svgMotionConfig = { 19608 useVisualState: makeUseVisualState({ 19609 scrapeMotionValuesFromProps: scrape_motion_values_scrapeMotionValuesFromProps, 19610 createRenderState: createSvgRenderState, 19611 onMount: (props, instance, { renderState, latestValues }) => { 19612 try { 19613 renderState.dimensions = 19614 typeof instance.getBBox === 19615 "function" 19616 ? instance.getBBox() 19617 : instance.getBoundingClientRect(); 19618 } 19619 catch (e) { 19620 // Most likely trying to measure an unrendered element under Firefox 19621 renderState.dimensions = { 19622 x: 0, 19623 y: 0, 19624 width: 0, 19625 height: 0, 19626 }; 19627 } 19628 buildSVGAttrs(renderState, latestValues, { enableHardwareAcceleration: false }, isSVGTag(instance.tagName), props.transformTemplate); 19629 renderSVG(instance, renderState); 19630 }, 19631 }), 19632}; 19633 19634 19635 19636;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/render/html/config-motion.mjs 19637 19638 19639 19640 19641const htmlMotionConfig = { 19642 useVisualState: makeUseVisualState({ 19643 scrapeMotionValuesFromProps: scrapeMotionValuesFromProps, 19644 createRenderState: createHtmlRenderState, 19645 }), 19646}; 19647 19648 19649 19650;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/render/dom/utils/create-config.mjs 19651 19652 19653 19654 19655 19656function create_config_createDomMotionConfig(Component, { forwardMotionProps = false }, preloadedFeatures, createVisualElement) { 19657 const baseConfig = isSVGComponent(Component) 19658 ? svgMotionConfig 19659 : htmlMotionConfig; 19660 return { 19661 ...baseConfig, 19662 preloadedFeatures, 19663 useRender: createUseRender(forwardMotionProps), 19664 createVisualElement, 19665 Component, 19666 }; 19667} 19668 19669 19670 19671;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/events/add-dom-event.mjs 19672function addDomEvent(target, eventName, handler, options = { passive: true }) { 19673 target.addEventListener(eventName, handler, options); 19674 return () => target.removeEventListener(eventName, handler); 19675} 19676 19677 19678 19679;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/events/utils/is-primary-pointer.mjs 19680const isPrimaryPointer = (event) => { 19681 if (event.pointerType === "mouse") { 19682 return typeof event.button !== "number" || event.button <= 0; 19683 } 19684 else { 19685 /** 19686 * isPrimary is true for all mice buttons, whereas every touch point 19687 * is regarded as its own input. So subsequent concurrent touch points 19688 * will be false. 19689 * 19690 * Specifically match against false here as incomplete versions of 19691 * PointerEvents in very old browser might have it set as undefined. 19692 */ 19693 return event.isPrimary !== false; 19694 } 19695}; 19696 19697 19698 19699;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/events/event-info.mjs 19700 19701 19702function extractEventInfo(event, pointType = "page") { 19703 return { 19704 point: { 19705 x: event[pointType + "X"], 19706 y: event[pointType + "Y"], 19707 }, 19708 }; 19709} 19710const addPointerInfo = (handler) => { 19711 return (event) => isPrimaryPointer(event) && handler(event, extractEventInfo(event)); 19712}; 19713 19714 19715 19716;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/events/add-pointer-event.mjs 19717 19718 19719 19720function addPointerEvent(target, eventName, handler, options) { 19721 return addDomEvent(target, eventName, addPointerInfo(handler), options); 19722} 19723 19724 19725 19726;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/utils/pipe.mjs 19727/** 19728 * Pipe 19729 * Compose other transformers to run linearily 19730 * pipe(min(20), max(40)) 19731 * @param {...functions} transformers 19732 * @return {function} 19733 */ 19734const combineFunctions = (a, b) => (v) => b(a(v)); 19735const pipe = (...transformers) => transformers.reduce(combineFunctions); 19736 19737 19738 19739;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/gestures/drag/utils/lock.mjs 19740function createLock(name) { 19741 let lock = null; 19742 return () => { 19743 const openLock = () => { 19744 lock = null; 19745 }; 19746 if (lock === null) { 19747 lock = name; 19748 return openLock; 19749 } 19750 return false;
vendor: 4,528 bytes, lines 19751-19888
19751 }; 19752} 19753const globalHorizontalLock = createLock("dragHorizontal"); 19754const globalVerticalLock = createLock("dragVertical"); 19755function getGlobalLock(drag) { 19756 let lock = false; 19757 if (drag === "y") { 19758 lock = globalVerticalLock(); 19759 } 19760 else if (drag === "x") { 19761 lock = globalHorizontalLock(); 19762 } 19763 else { 19764 const openHorizontal = globalHorizontalLock(); 19765 const openVertical = globalVerticalLock(); 19766 if (openHorizontal && openVertical) { 19767 lock = () => { 19768 openHorizontal(); 19769 openVertical(); 19770 }; 19771 } 19772 else { 19773 // Release the locks because we don't use them 19774 if (openHorizontal) 19775 openHorizontal(); 19776 if (openVertical) 19777 openVertical(); 19778 } 19779 } 19780 return lock; 19781} 19782function isDragActive() { 19783 // Check the gesture lock - if we get it, it means no drag gesture is active 19784 // and we can safely fire the tap gesture. 19785 const openGestureLock = getGlobalLock(true); 19786 if (!openGestureLock) 19787 return true; 19788 openGestureLock(); 19789 return false; 19790} 19791 19792 19793 19794;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/motion/features/Feature.mjs 19795class Feature { 19796 constructor(node) { 19797 this.isMounted = false; 19798 this.node = node; 19799 } 19800 update() { } 19801} 19802 19803 19804 19805;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/utils/noop.mjs 19806const noop_noop = (any) => any; 19807 19808 19809 19810;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/frameloop/render-step.mjs 19811function createRenderStep(runNextFrame) { 19812 /** 19813 * We create and reuse two arrays, one to queue jobs for the current frame 19814 * and one for the next. We reuse to avoid triggering GC after x frames. 19815 */ 19816 let toRun = []; 19817 let toRunNextFrame = []; 19818 /** 19819 * 19820 */ 19821 let numToRun = 0; 19822 /** 19823 * Track whether we're currently processing jobs in this step. This way 19824 * we can decide whether to schedule new jobs for this frame or next. 19825 */ 19826 let isProcessing = false; 19827 let flushNextFrame = false; 19828 /** 19829 * A set of processes which were marked keepAlive when scheduled. 19830 */ 19831 const toKeepAlive = new WeakSet(); 19832 const step = { 19833 /** 19834 * Schedule a process to run on the next frame. 19835 */ 19836 schedule: (callback, keepAlive = false, immediate = false) => { 19837 const addToCurrentFrame = immediate && isProcessing; 19838 const buffer = addToCurrentFrame ? toRun : toRunNextFrame; 19839 if (keepAlive) 19840 toKeepAlive.add(callback); 19841 // If the buffer doesn't already contain this callback, add it 19842 if (buffer.indexOf(callback) === -1) { 19843 buffer.push(callback); 19844 // If we're adding it to the currently running buffer, update its measured size 19845 if (addToCurrentFrame && isProcessing) 19846 numToRun = toRun.length; 19847 } 19848 return callback; 19849 }, 19850 /** 19851 * Cancel the provided callback from running on the next frame. 19852 */ 19853 cancel: (callback) => { 19854 const index = toRunNextFrame.indexOf(callback); 19855 if (index !== -1) 19856 toRunNextFrame.splice(index, 1); 19857 toKeepAlive.delete(callback); 19858 }, 19859 /** 19860 * Execute all schedule callbacks. 19861 */ 19862 process: (frameData) => { 19863 /** 19864 * If we're already processing we've probably been triggered by a flushSync 19865 * inside an existing process. Instead of executing, mark flushNextFrame 19866 * as true and ensure we flush the following frame at the end of this one. 19867 */ 19868 if (isProcessing) { 19869 flushNextFrame = true; 19870 return; 19871 } 19872 isProcessing = true; 19873 [toRun, toRunNextFrame] = [toRunNextFrame, toRun]; 19874 // Clear the next frame list 19875 toRunNextFrame.length = 0; 19876 // Execute this frame 19877 numToRun = toRun.length; 19878 if (numToRun) { 19879 for (let i = 0; i < numToRun; i++) { 19880 const callback = toRun[i]; 19881 callback(frameData); 19882 if (toKeepAlive.has(callback)) { 19883 step.schedule(callback); 19884 runNextFrame(); 19885 } 19886 } 19887 } 19888 isProcessing = false;
19889 if (flushNextFrame) { 19890 flushNextFrame = false; 19891 step.process(frameData); 19892 } 19893 }, 19894 }; 19895 return step; 19896} 19897 19898 19899 19900;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/frameloop/batcher.mjs 19901 19902 19903const stepsOrder = [ 19904 "prepare", 19905 "read", 19906 "update", 19907 "preRender", 19908 "render", 19909 "postRender", 19910]; 19911const maxElapsed = 40; 19912function createRenderBatcher(scheduleNextBatch, allowKeepAlive) { 19913 let runNextFrame = false; 19914 let useDefaultElapsed = true; 19915 const state = { 19916 delta: 0, 19917 timestamp: 0, 19918 isProcessing: false, 19919 }; 19920 const steps = stepsOrder.reduce((acc, key) => { 19921 acc[key] = createRenderStep(() => (runNextFrame = true)); 19922 return acc; 19923 }, {}); 19924 const processStep = (stepId) => steps[stepId].process(state); 19925 const processBatch = (timestamp) => { 19926 runNextFrame = false; 19927 state.delta = useDefaultElapsed 19928 ? 1000 / 60 19929 : Math.max(Math.min(timestamp - state.timestamp, maxElapsed), 1); 19930 state.timestamp = timestamp; 19931 state.isProcessing = true; 19932 stepsOrder.forEach(processStep); 19933 state.isProcessing = false; 19934 if (runNextFrame && allowKeepAlive) { 19935 useDefaultElapsed = false; 19936 scheduleNextBatch(processBatch); 19937 } 19938 }; 19939 const wake = () => { 19940 runNextFrame = true; 19941 useDefaultElapsed = true; 19942 if (!state.isProcessing) 19943 scheduleNextBatch(processBatch); 19944 }; 19945 const schedule = stepsOrder.reduce((acc, key) => { 19946 const step = steps[key]; 19947 acc[key] = (process, keepAlive = false, immediate = false) => { 19948 if (!runNextFrame) 19949 wake(); 19950 return step.schedule(process, keepAlive, immediate); 19951 }; 19952 return acc; 19953 }, {}); 19954 const cancel = (process) => stepsOrder.forEach((key) => steps[key].cancel(process)); 19955 return { schedule, cancel, state, steps }; 19956} 19957 19958 19959 19960;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/frameloop/frame.mjs 19961 19962 19963 19964const { schedule: frame_frame, cancel: cancelFrame, state: frameData, steps, } = createRenderBatcher(typeof requestAnimationFrame !== "undefined" ? requestAnimationFrame : noop_noop, true); 19965 19966 19967 19968;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/gestures/hover.mjs 19969 19970 19971 19972 19973 19974 19975function addHoverEvent(node, isActive) { 19976 const eventName = "pointer" + (isActive ? "enter" : "leave"); 19977 const callbackName = "onHover" + (isActive ? "Start" : "End"); 19978 const handleEvent = (event, info) => { 19979 if (event.type === "touch" || isDragActive()) 19980 return; 19981 const props = node.getProps(); 19982 if (node.animationState && props.whileHover) { 19983 node.animationState.setActive("whileHover", isActive); 19984 } 19985 if (props[callbackName]) { 19986 frame_frame.update(() => props[callbackName](event, info)); 19987 } 19988 }; 19989 return addPointerEvent(node.current, eventName, handleEvent, { 19990 passive: !node.getProps()[callbackName], 19991 }); 19992} 19993class HoverGesture extends Feature { 19994 mount() { 19995 this.unmount = pipe(addHoverEvent(this.node, true), addHoverEvent(this.node, false)); 19996 } 19997 unmount() { } 19998} 19999 20000 20001 20002;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/gestures/focus.mjs 20003 20004 20005 20006 20007class FocusGesture extends Feature { 20008 constructor() { 20009 super(...arguments); 20010 this.isActive = false; 20011 } 20012 onFocus() { 20013 let isFocusVisible = false; 20014 /** 20015 * If this element doesn't match focus-visible then don't 20016 * apply whileHover. But, if matches throws that focus-visible 20017 * is not a valid selector then in that browser outline styles will be applied 20018 * to the element by default and we want to match that behaviour with whileFocus. 20019 */ 20020 try { 20021 isFocusVisible = this.node.current.matches(":focus-visible"); 20022 } 20023 catch (e) { 20024 isFocusVisible = true; 20025 } 20026 if (!isFocusVisible || !this.node.animationState) 20027 return; 20028 this.node.animationState.setActive("whileFocus", true); 20029 this.isActive = true; 20030 } 20031 onBlur() { 20032 if (!this.isActive || !this.node.animationState) 20033 return; 20034 this.node.animationState.setActive("whileFocus", false); 20035 this.isActive = false;
20036 } 20037 mount() { 20038 this.unmount = pipe(addDomEvent(this.node.current, "focus", () => this.onFocus()), addDomEvent(this.node.current, "blur", () => this.onBlur())); 20039 } 20040 unmount() { } 20041} 20042 20043 20044 20045;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/gestures/utils/is-node-or-child.mjs 20046/** 20047 * Recursively traverse up the tree to check whether the provided child node 20048 * is the parent or a descendant of it. 20049 * 20050 * @param parent - Element to find 20051 * @param child - Element to test against parent 20052 */ 20053const isNodeOrChild = (parent, child) => { 20054 if (!child) { 20055 return false; 20056 } 20057 else if (parent === child) { 20058 return true; 20059 } 20060 else { 20061 return isNodeOrChild(parent, child.parentElement); 20062 } 20063}; 20064 20065 20066 20067;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/gestures/press.mjs 20068 20069 20070 20071 20072 20073 20074 20075 20076 20077 20078function fireSyntheticPointerEvent(name, handler) { 20079 if (!handler) 20080 return; 20081 const syntheticPointerEvent = new PointerEvent("pointer" + name); 20082 handler(syntheticPointerEvent, extractEventInfo(syntheticPointerEvent)); 20083} 20084class PressGesture extends Feature { 20085 constructor() { 20086 super(...arguments); 20087 this.removeStartListeners = noop_noop; 20088 this.removeEndListeners = noop_noop; 20089 this.removeAccessibleListeners = noop_noop; 20090 this.startPointerPress = (startEvent, startInfo) => { 20091 this.removeEndListeners(); 20092 if (this.isPressing) 20093 return; 20094 const props = this.node.getProps(); 20095 const endPointerPress = (endEvent, endInfo) => { 20096 if (!this.checkPressEnd()) 20097 return; 20098 const { onTap, onTapCancel } = this.node.getProps(); 20099 frame_frame.update(() => { 20100 /** 20101 * We only count this as a tap gesture if the event.target is the same 20102 * as, or a child of, this component's element 20103 */ 20104 !isNodeOrChild(this.node.current, endEvent.target) 20105 ? onTapCancel && onTapCancel(endEvent, endInfo) 20106 : onTap && onTap(endEvent, endInfo); 20107 }); 20108 }; 20109 const removePointerUpListener = addPointerEvent(window, "pointerup", endPointerPress, { passive: !(props.onTap || props["onPointerUp"]) }); 20110 const removePointerCancelListener = addPointerEvent(window, "pointercancel", (cancelEvent, cancelInfo) => this.cancelPress(cancelEvent, cancelInfo), { passive: !(props.onTapCancel || props["onPointerCancel"]) }); 20111 this.removeEndListeners = pipe(removePointerUpListener, removePointerCancelListener); 20112 this.startPress(startEvent, startInfo); 20113 }; 20114 this.startAccessiblePress = () => { 20115 const handleKeydown = (keydownEvent) => { 20116 if (keydownEvent.key !== "Enter" || this.isPressing) 20117 return; 20118 const handleKeyup = (keyupEvent) => { 20119 if (keyupEvent.key !== "Enter" || !this.checkPressEnd()) 20120 return; 20121 fireSyntheticPointerEvent("up", (event, info) => { 20122 const { onTap } = this.node.getProps(); 20123 if (onTap) { 20124 frame_frame.update(() => onTap(event, info)); 20125 } 20126 }); 20127 }; 20128 this.removeEndListeners(); 20129 this.removeEndListeners = addDomEvent(this.node.current, "keyup", handleKeyup); 20130 fireSyntheticPointerEvent("down", (event, info) => { 20131 this.startPress(event, info); 20132 }); 20133 }; 20134 const removeKeydownListener = addDomEvent(this.node.current, "keydown", handleKeydown); 20135 const handleBlur = () => { 20136 if (!this.isPressing) 20137 return; 20138 fireSyntheticPointerEvent("cancel", (cancelEvent, cancelInfo) => this.cancelPress(cancelEvent, cancelInfo)); 20139 }; 20140 const removeBlurListener = addDomEvent(this.node.current, "blur", handleBlur); 20141 this.removeAccessibleListeners = pipe(removeKeydownListener, removeBlurListener); 20142 }; 20143 } 20144 startPress(event, info) { 20145 this.isPressing = true; 20146 const { onTapStart, whileTap } = this.node.getProps(); 20147 /** 20148 * Ensure we trigger animations before firing event callback 20149 */ 20150 if (whileTap && this.node.animationState) { 20151 this.node.animationState.setActive("whileTap", true); 20152 } 20153 if (onTapStart) { 20154 frame_frame.update(() => onTapStart(event, info)); 20155 } 20156 } 20157 checkPressEnd() { 20158 this.removeEndListeners(); 20159 this.isPressing = false;
vendor: 6,076 bytes, lines 20160-20340
20160 const props = this.node.getProps(); 20161 if (props.whileTap && this.node.animationState) { 20162 this.node.animationState.setActive("whileTap", false); 20163 } 20164 return !isDragActive(); 20165 } 20166 cancelPress(event, info) { 20167 if (!this.checkPressEnd()) 20168 return; 20169 const { onTapCancel } = this.node.getProps(); 20170 if (onTapCancel) { 20171 frame_frame.update(() => onTapCancel(event, info)); 20172 } 20173 } 20174 mount() { 20175 const props = this.node.getProps(); 20176 const removePointerListener = addPointerEvent(this.node.current, "pointerdown", this.startPointerPress, { passive: !(props.onTapStart || props["onPointerStart"]) }); 20177 const removeFocusListener = addDomEvent(this.node.current, "focus", this.startAccessiblePress); 20178 this.removeStartListeners = pipe(removePointerListener, removeFocusListener); 20179 } 20180 unmount() { 20181 this.removeStartListeners(); 20182 this.removeEndListeners(); 20183 this.removeAccessibleListeners(); 20184 } 20185} 20186 20187 20188 20189;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/motion/features/viewport/observers.mjs 20190/** 20191 * Map an IntersectionHandler callback to an element. We only ever make one handler for one 20192 * element, so even though these handlers might all be triggered by different 20193 * observers, we can keep them in the same map. 20194 */ 20195const observerCallbacks = new WeakMap(); 20196/** 20197 * Multiple observers can be created for multiple element/document roots. Each with 20198 * different settings. So here we store dictionaries of observers to each root, 20199 * using serialised settings (threshold/margin) as lookup keys. 20200 */ 20201const observers = new WeakMap(); 20202const fireObserverCallback = (entry) => { 20203 const callback = observerCallbacks.get(entry.target); 20204 callback && callback(entry); 20205}; 20206const fireAllObserverCallbacks = (entries) => { 20207 entries.forEach(fireObserverCallback); 20208}; 20209function initIntersectionObserver({ root, ...options }) { 20210 const lookupRoot = root || document; 20211 /** 20212 * If we don't have an observer lookup map for this root, create one. 20213 */ 20214 if (!observers.has(lookupRoot)) { 20215 observers.set(lookupRoot, {}); 20216 } 20217 const rootObservers = observers.get(lookupRoot); 20218 const key = JSON.stringify(options); 20219 /** 20220 * If we don't have an observer for this combination of root and settings, 20221 * create one. 20222 */ 20223 if (!rootObservers[key]) { 20224 rootObservers[key] = new IntersectionObserver(fireAllObserverCallbacks, { root, ...options }); 20225 } 20226 return rootObservers[key]; 20227} 20228function observeIntersection(element, options, callback) { 20229 const rootInteresectionObserver = initIntersectionObserver(options); 20230 observerCallbacks.set(element, callback); 20231 rootInteresectionObserver.observe(element); 20232 return () => { 20233 observerCallbacks.delete(element); 20234 rootInteresectionObserver.unobserve(element); 20235 }; 20236} 20237 20238 20239 20240;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/motion/features/viewport/index.mjs 20241 20242 20243 20244const thresholdNames = { 20245 some: 0, 20246 all: 1, 20247}; 20248class InViewFeature extends Feature { 20249 constructor() { 20250 super(...arguments); 20251 this.hasEnteredView = false; 20252 this.isInView = false; 20253 } 20254 startObserver() { 20255 this.unmount(); 20256 const { viewport = {} } = this.node.getProps(); 20257 const { root, margin: rootMargin, amount = "some", once } = viewport; 20258 const options = { 20259 root: root ? root.current : undefined, 20260 rootMargin, 20261 threshold: typeof amount === "number" ? amount : thresholdNames[amount], 20262 }; 20263 const onIntersectionUpdate = (entry) => { 20264 const { isIntersecting } = entry; 20265 /** 20266 * If there's been no change in the viewport state, early return. 20267 */ 20268 if (this.isInView === isIntersecting) 20269 return; 20270 this.isInView = isIntersecting; 20271 /** 20272 * Handle hasEnteredView. If this is only meant to run once, and 20273 * element isn't visible, early return. Otherwise set hasEnteredView to true. 20274 */ 20275 if (once && !isIntersecting && this.hasEnteredView) { 20276 return; 20277 } 20278 else if (isIntersecting) { 20279 this.hasEnteredView = true; 20280 } 20281 if (this.node.animationState) { 20282 this.node.animationState.setActive("whileInView", isIntersecting); 20283 } 20284 /** 20285 * Use the latest committed props rather than the ones in scope 20286 * when this observer is created 20287 */ 20288 const { onViewportEnter, onViewportLeave } = this.node.getProps(); 20289 const callback = isIntersecting ? onViewportEnter : onViewportLeave; 20290 callback && callback(entry); 20291 }; 20292 return observeIntersection(this.node.current, options, onIntersectionUpdate); 20293 } 20294 mount() { 20295 this.startObserver(); 20296 } 20297 update() { 20298 if (typeof IntersectionObserver === "undefined") 20299 return; 20300 const { props, prevProps } = this.node; 20301 const hasOptionsChanged = ["amount", "margin", "root"].some(hasViewportOptionChanged(props, prevProps)); 20302 if (hasOptionsChanged) { 20303 this.startObserver(); 20304 } 20305 } 20306 unmount() { } 20307} 20308function hasViewportOptionChanged({ viewport = {} }, { viewport: prevViewport = {} } = {}) { 20309 return (name) => viewport[name] !== prevViewport[name]; 20310} 20311 20312 20313 20314;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/motion/features/gestures.mjs 20315 20316 20317 20318 20319 20320const gestureAnimations = { 20321 inView: { 20322 Feature: InViewFeature, 20323 }, 20324 tap: { 20325 Feature: PressGesture, 20326 }, 20327 focus: { 20328 Feature: FocusGesture, 20329 }, 20330 hover: { 20331 Feature: HoverGesture, 20332 }, 20333}; 20334 20335 20336 20337;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/utils/shallow-compare.mjs 20338function shallowCompare(next, prev) { 20339 if (!Array.isArray(prev)) 20340 return false;
20341 const prevLength = prev.length; 20342 if (prevLength !== next.length) 20343 return false; 20344 for (let i = 0; i < prevLength; i++) { 20345 if (prev[i] !== next[i]) 20346 return false; 20347 } 20348 return true; 20349} 20350 20351 20352 20353;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/render/utils/resolve-dynamic-variants.mjs 20354 20355 20356/** 20357 * Creates an object containing the latest state of every MotionValue on a VisualElement 20358 */ 20359function getCurrent(visualElement) { 20360 const current = {}; 20361 visualElement.values.forEach((value, key) => (current[key] = value.get())); 20362 return current; 20363} 20364/** 20365 * Creates an object containing the latest velocity of every MotionValue on a VisualElement 20366 */ 20367function getVelocity(visualElement) { 20368 const velocity = {}; 20369 visualElement.values.forEach((value, key) => (velocity[key] = value.getVelocity())); 20370 return velocity; 20371} 20372function resolveVariant(visualElement, definition, custom) { 20373 const props = visualElement.getProps(); 20374 return resolveVariantFromProps(props, definition, custom !== undefined ? custom : props.custom, getCurrent(visualElement), getVelocity(visualElement)); 20375} 20376 20377 20378 20379;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/animation/optimized-appear/data-id.mjs 20380 20381 20382const optimizedAppearDataId = "framerAppearId"; 20383const optimizedAppearDataAttribute = "data-" + camelToDash(optimizedAppearDataId); 20384 20385 20386 20387;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/utils/errors.mjs 20388 20389 20390let warning = noop_noop; 20391let errors_invariant = noop_noop; 20392if (false) {} 20393 20394 20395 20396;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/utils/time-conversion.mjs 20397/** 20398 * Converts seconds to milliseconds 20399 * 20400 * @param seconds - Time in seconds. 20401 * @return milliseconds - Converted time in milliseconds. 20402 */ 20403const secondsToMilliseconds = (seconds) => seconds * 1000; 20404const millisecondsToSeconds = (milliseconds) => milliseconds / 1000; 20405 20406 20407 20408;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/utils/use-instant-transition-state.mjs 20409const instantAnimationState = { 20410 current: false, 20411}; 20412 20413 20414 20415;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/easing/utils/is-bezier-definition.mjs 20416const isBezierDefinition = (easing) => Array.isArray(easing) && typeof easing[0] === "number"; 20417 20418 20419 20420;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/animation/animators/waapi/easing.mjs 20421 20422 20423function isWaapiSupportedEasing(easing) { 20424 return Boolean(!easing || 20425 (typeof easing === "string" && supportedWaapiEasing[easing]) || 20426 isBezierDefinition(easing) || 20427 (Array.isArray(easing) && easing.every(isWaapiSupportedEasing))); 20428} 20429const cubicBezierAsString = ([a, b, c, d]) => `cubic-bezier(${a}, ${b}, ${c}, ${d})`; 20430const supportedWaapiEasing = { 20431 linear: "linear", 20432 ease: "ease", 20433 easeIn: "ease-in", 20434 easeOut: "ease-out", 20435 easeInOut: "ease-in-out", 20436 circIn: cubicBezierAsString([0, 0.65, 0.55, 1]), 20437 circOut: cubicBezierAsString([0.55, 0, 1, 0.45]), 20438 backIn: cubicBezierAsString([0.31, 0.01, 0.66, -0.59]), 20439 backOut: cubicBezierAsString([0.33, 1.53, 0.69, 0.99]), 20440}; 20441function mapEasingToNativeEasing(easing) { 20442 if (!easing) 20443 return undefined; 20444 return isBezierDefinition(easing) 20445 ? cubicBezierAsString(easing) 20446 : Array.isArray(easing) 20447 ? easing.map(mapEasingToNativeEasing) 20448 : supportedWaapiEasing[easing]; 20449} 20450 20451 20452 20453;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/animation/animators/waapi/index.mjs 20454 20455 20456function animateStyle(element, valueName, keyframes, { delay = 0, duration, repeat = 0, repeatType = "loop", ease, times, } = {}) { 20457 const keyframeOptions = { [valueName]: keyframes }; 20458 if (times) 20459 keyframeOptions.offset = times; 20460 const easing = mapEasingToNativeEasing(ease); 20461 /** 20462 * If this is an easing array, apply to keyframes, not animation as a whole 20463 */ 20464 if (Array.isArray(easing)) 20465 keyframeOptions.easing = easing; 20466 return element.animate(keyframeOptions, { 20467 delay, 20468 duration, 20469 easing: !Array.isArray(easing) ? easing : "linear", 20470 fill: "both", 20471 iterations: repeat + 1, 20472 direction: repeatType === "reverse" ? "alternate" : "normal", 20473 }); 20474} 20475 20476 20477 20478;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/animation/animators/waapi/utils/get-final-keyframe.mjs 20479function getFinalKeyframe(keyframes, { repeat, repeatType = "loop" }) { 20480 const index = repeat && repeatType !== "loop" && repeat % 2 === 1 20481 ? 0
20482 : keyframes.length - 1; 20483 return keyframes[index]; 20484} 20485 20486 20487 20488;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/easing/cubic-bezier.mjs 20489 20490 20491/* 20492 Bezier function generator 20493 This has been modified from Gaëtan Renaudeau's BezierEasing 20494 https://github.com/gre/bezier-easing/blob/master/src/index.js 20495 https://github.com/gre/bezier-easing/blob/master/LICENSE 20496 20497 I've removed the newtonRaphsonIterate algo because in benchmarking it 20498 wasn't noticiably faster than binarySubdivision, indeed removing it 20499 usually improved times, depending on the curve. 20500 I also removed the lookup table, as for the added bundle size and loop we're 20501 only cutting ~4 or so subdivision iterations. I bumped the max iterations up 20502 to 12 to compensate and this still tended to be faster for no perceivable 20503 loss in accuracy. 20504 Usage 20505 const easeOut = cubicBezier(.17,.67,.83,.67); 20506 const x = easeOut(0.5); // returns 0.627... 20507*/ 20508// Returns x(t) given t, x1, and x2, or y(t) given t, y1, and y2. 20509const calcBezier = (t, a1, a2) => (((1.0 - 3.0 * a2 + 3.0 * a1) * t + (3.0 * a2 - 6.0 * a1)) * t + 3.0 * a1) * 20510 t; 20511const subdivisionPrecision = 0.0000001; 20512const subdivisionMaxIterations = 12; 20513function binarySubdivide(x, lowerBound, upperBound, mX1, mX2) { 20514 let currentX; 20515 let currentT; 20516 let i = 0; 20517 do { 20518 currentT = lowerBound + (upperBound - lowerBound) / 2.0; 20519 currentX = calcBezier(currentT, mX1, mX2) - x; 20520 if (currentX > 0.0) { 20521 upperBound = currentT; 20522 } 20523 else { 20524 lowerBound = currentT; 20525 } 20526 } while (Math.abs(currentX) > subdivisionPrecision && 20527 ++i < subdivisionMaxIterations); 20528 return currentT; 20529} 20530function cubicBezier(mX1, mY1, mX2, mY2) { 20531 // If this is a linear gradient, return linear easing 20532 if (mX1 === mY1 && mX2 === mY2) 20533 return noop_noop; 20534 const getTForX = (aX) => binarySubdivide(aX, 0, 1, mX1, mX2); 20535 // If animation is at start/end, return t without easing 20536 return (t) => t === 0 || t === 1 ? t : calcBezier(getTForX(t), mY1, mY2); 20537} 20538 20539 20540 20541;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/easing/ease.mjs 20542 20543 20544const easeIn = cubicBezier(0.42, 0, 1, 1); 20545const easeOut = cubicBezier(0, 0, 0.58, 1); 20546const easeInOut = cubicBezier(0.42, 0, 0.58, 1); 20547 20548 20549 20550;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/easing/utils/is-easing-array.mjs 20551const isEasingArray = (ease) => { 20552 return Array.isArray(ease) && typeof ease[0] !== "number"; 20553}; 20554 20555 20556 20557;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/easing/modifiers/mirror.mjs 20558// Accepts an easing function and returns a new one that outputs mirrored values for 20559// the second half of the animation. Turns easeIn into easeInOut. 20560const mirrorEasing = (easing) => (p) => p <= 0.5 ? easing(2 * p) / 2 : (2 - easing(2 * (1 - p))) / 2; 20561 20562 20563 20564;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/easing/modifiers/reverse.mjs 20565// Accepts an easing function and returns a new one that outputs reversed values. 20566// Turns easeIn into easeOut. 20567const reverseEasing = (easing) => (p) => 1 - easing(1 - p); 20568 20569 20570 20571;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/easing/circ.mjs 20572 20573 20574 20575const circIn = (p) => 1 - Math.sin(Math.acos(p)); 20576const circOut = reverseEasing(circIn); 20577const circInOut = mirrorEasing(circOut); 20578 20579 20580 20581;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/easing/back.mjs 20582 20583 20584 20585 20586const backOut = cubicBezier(0.33, 1.53, 0.69, 0.99); 20587const backIn = reverseEasing(backOut); 20588const backInOut = mirrorEasing(backIn); 20589 20590 20591 20592;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/easing/anticipate.mjs 20593 20594 20595const anticipate = (p) => (p *= 2) < 1 ? 0.5 * backIn(p) : 0.5 * (2 - Math.pow(2, -10 * (p - 1))); 20596 20597 20598 20599;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/easing/utils/map.mjs 20600 20601 20602 20603 20604 20605 20606 20607 20608const easingLookup = { 20609 linear: noop_noop, 20610 easeIn: easeIn, 20611 easeInOut: easeInOut, 20612 easeOut: easeOut, 20613 circIn: circIn, 20614 circInOut: circInOut, 20615 circOut: circOut, 20616 backIn: backIn, 20617 backInOut: backInOut, 20618 backOut: backOut, 20619 anticipate: anticipate, 20620}; 20621const easingDefinitionToFunction = (definition) => { 20622 if (Array.isArray(definition)) { 20623 // If cubic bezier definition, create bezier curve 20624 errors_invariant(definition.length === 4, `Cubic bezier arrays must contain four numerical values.`); 20625 const [x1, y1, x2, y2] = definition; 20626 return cubicBezier(x1, y1, x2, y2); 20627 } 20628 else if (typeof definition === "string") { 20629 // Else lookup from table 20630 errors_invariant(easingLookup[definition] !== undefined, `Invalid easing type '${definition}'`); 20631 return easingLookup[definition]; 20632 } 20633 return definition; 20634}; 20635 20636 20637 20638;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/value/types/color/utils.mjs 20639 20640 20641/** 20642 * Returns true if the provided string is a color, ie rgba(0,0,0,0) or #000, 20643 * but false if a number or multiple colors 20644 */ 20645const isColorString = (type, testProp) => (v) => { 20646 return Boolean((isString(v) && singleColorRegex.test(v) && v.startsWith(type)) || 20647 (testProp && Object.prototype.hasOwnProperty.call(v, testProp))); 20648}; 20649const splitColor = (aName, bName, cName) => (v) => { 20650 if (!isString(v)) 20651 return v;
vendor: 1,623 bytes, lines 20652-20720
20652 const [a, b, c, alpha] = v.match(floatRegex); 20653 return { 20654 [aName]: parseFloat(a), 20655 [bName]: parseFloat(b), 20656 [cName]: parseFloat(c), 20657 alpha: alpha !== undefined ? parseFloat(alpha) : 1, 20658 }; 20659}; 20660 20661 20662 20663;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/value/types/color/rgba.mjs 20664 20665 20666 20667 20668 20669const clampRgbUnit = (v) => clamp_clamp(0, 255, v); 20670const rgbUnit = { 20671 ...number, 20672 transform: (v) => Math.round(clampRgbUnit(v)), 20673}; 20674const rgba_rgba = { 20675 test: isColorString("rgb", "red"), 20676 parse: splitColor("red", "green", "blue"), 20677 transform: ({ red, green, blue, alpha: alpha$1 = 1 }) => "rgba(" + 20678 rgbUnit.transform(red) + 20679 ", " + 20680 rgbUnit.transform(green) + 20681 ", " + 20682 rgbUnit.transform(blue) + 20683 ", " + 20684 sanitize(alpha.transform(alpha$1)) + 20685 ")", 20686}; 20687 20688 20689 20690;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/value/types/color/hex.mjs 20691 20692 20693 20694function parseHex(v) { 20695 let r = ""; 20696 let g = ""; 20697 let b = ""; 20698 let a = ""; 20699 // If we have 6 characters, ie #FF0000 20700 if (v.length > 5) { 20701 r = v.substring(1, 3); 20702 g = v.substring(3, 5); 20703 b = v.substring(5, 7); 20704 a = v.substring(7, 9); 20705 // Or we have 3 characters, ie #F00 20706 } 20707 else { 20708 r = v.substring(1, 2); 20709 g = v.substring(2, 3); 20710 b = v.substring(3, 4); 20711 a = v.substring(4, 5); 20712 r += r; 20713 g += g; 20714 b += b; 20715 a += a; 20716 } 20717 return { 20718 red: parseInt(r, 16), 20719 green: parseInt(g, 16), 20720 blue: parseInt(b, 16),
vendor: 12,834 bytes, lines 20721-21175
20721 alpha: a ? parseInt(a, 16) / 255 : 1, 20722 }; 20723} 20724const hex = { 20725 test: isColorString("#"), 20726 parse: parseHex, 20727 transform: rgba_rgba.transform, 20728}; 20729 20730 20731 20732;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/value/types/color/hsla.mjs 20733 20734 20735 20736 20737 20738const hsla = { 20739 test: isColorString("hsl", "hue"), 20740 parse: splitColor("hue", "saturation", "lightness"), 20741 transform: ({ hue, saturation, lightness, alpha: alpha$1 = 1 }) => { 20742 return ("hsla(" + 20743 Math.round(hue) + 20744 ", " + 20745 percent.transform(sanitize(saturation)) + 20746 ", " + 20747 percent.transform(sanitize(lightness)) + 20748 ", " + 20749 sanitize(alpha.transform(alpha$1)) + 20750 ")"); 20751 }, 20752}; 20753 20754 20755 20756;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/value/types/color/index.mjs 20757 20758 20759 20760 20761 20762const color = { 20763 test: (v) => rgba_rgba.test(v) || hex.test(v) || hsla.test(v), 20764 parse: (v) => { 20765 if (rgba_rgba.test(v)) { 20766 return rgba_rgba.parse(v); 20767 } 20768 else if (hsla.test(v)) { 20769 return hsla.parse(v); 20770 } 20771 else { 20772 return hex.parse(v); 20773 } 20774 }, 20775 transform: (v) => { 20776 return isString(v) 20777 ? v 20778 : v.hasOwnProperty("red") 20779 ? rgba_rgba.transform(v) 20780 : hsla.transform(v); 20781 }, 20782}; 20783 20784 20785 20786;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/utils/mix.mjs 20787/* 20788 Value in range from progress 20789 20790 Given a lower limit and an upper limit, we return the value within 20791 that range as expressed by progress (usually a number from 0 to 1) 20792 20793 So progress = 0.5 would change 20794 20795 from -------- to 20796 20797 to 20798 20799 from ---- to 20800 20801 E.g. from = 10, to = 20, progress = 0.5 => 15 20802 20803 @param [number]: Lower limit of range 20804 @param [number]: Upper limit of range 20805 @param [number]: The progress between lower and upper limits expressed 0-1 20806 @return [number]: Value as calculated from progress within range (not limited within range) 20807*/ 20808const mix = (from, to, progress) => -progress * from + progress * to + from; 20809 20810 20811 20812;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/utils/hsla-to-rgba.mjs 20813// Adapted from https://gist.github.com/mjackson/5311256 20814function hueToRgb(p, q, t) { 20815 if (t < 0) 20816 t += 1; 20817 if (t > 1) 20818 t -= 1; 20819 if (t < 1 / 6) 20820 return p + (q - p) * 6 * t; 20821 if (t < 1 / 2) 20822 return q; 20823 if (t < 2 / 3) 20824 return p + (q - p) * (2 / 3 - t) * 6; 20825 return p; 20826} 20827function hslaToRgba({ hue, saturation, lightness, alpha }) { 20828 hue /= 360; 20829 saturation /= 100; 20830 lightness /= 100; 20831 let red = 0; 20832 let green = 0; 20833 let blue = 0; 20834 if (!saturation) { 20835 red = green = blue = lightness; 20836 } 20837 else { 20838 const q = lightness < 0.5 20839 ? lightness * (1 + saturation) 20840 : lightness + saturation - lightness * saturation; 20841 const p = 2 * lightness - q; 20842 red = hueToRgb(p, q, hue + 1 / 3); 20843 green = hueToRgb(p, q, hue); 20844 blue = hueToRgb(p, q, hue - 1 / 3); 20845 } 20846 return { 20847 red: Math.round(red * 255), 20848 green: Math.round(green * 255), 20849 blue: Math.round(blue * 255), 20850 alpha, 20851 }; 20852} 20853 20854 20855 20856;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/utils/mix-color.mjs 20857 20858 20859 20860 20861 20862 20863 20864// Linear color space blending 20865// Explained https://www.youtube.com/watch?v=LKnqECcg6Gw 20866// Demonstrated http://codepen.io/osublake/pen/xGVVaN 20867const mixLinearColor = (from, to, v) => { 20868 const fromExpo = from * from; 20869 return Math.sqrt(Math.max(0, v * (to * to - fromExpo) + fromExpo)); 20870}; 20871const colorTypes = [hex, rgba_rgba, hsla]; 20872const getColorType = (v) => colorTypes.find((type) => type.test(v)); 20873function asRGBA(color) { 20874 const type = getColorType(color); 20875 errors_invariant(Boolean(type), `'${color}' is not an animatable color. Use the equivalent color code instead.`); 20876 let model = type.parse(color); 20877 if (type === hsla) { 20878 // TODO Remove this cast - needed since Framer Motion's stricter typing 20879 model = hslaToRgba(model); 20880 } 20881 return model; 20882} 20883const mixColor = (from, to) => { 20884 const fromRGBA = asRGBA(from); 20885 const toRGBA = asRGBA(to); 20886 const blended = { ...fromRGBA }; 20887 return (v) => { 20888 blended.red = mixLinearColor(fromRGBA.red, toRGBA.red, v); 20889 blended.green = mixLinearColor(fromRGBA.green, toRGBA.green, v); 20890 blended.blue = mixLinearColor(fromRGBA.blue, toRGBA.blue, v); 20891 blended.alpha = mix(fromRGBA.alpha, toRGBA.alpha, v); 20892 return rgba_rgba.transform(blended); 20893 }; 20894}; 20895 20896 20897 20898;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/value/types/complex/index.mjs 20899 20900 20901 20902 20903 20904 20905function test(v) { 20906 var _a, _b; 20907 return (isNaN(v) && 20908 isString(v) && 20909 (((_a = v.match(floatRegex)) === null || _a === void 0 ? void 0 : _a.length) || 0) + 20910 (((_b = v.match(colorRegex)) === null || _b === void 0 ? void 0 : _b.length) || 0) > 20911 0); 20912} 20913const cssVarTokeniser = { 20914 regex: cssVariableRegex, 20915 countKey: "Vars", 20916 token: "${v}", 20917 parse: noop_noop, 20918}; 20919const colorTokeniser = { 20920 regex: colorRegex, 20921 countKey: "Colors", 20922 token: "${c}", 20923 parse: color.parse, 20924}; 20925const numberTokeniser = { 20926 regex: floatRegex, 20927 countKey: "Numbers", 20928 token: "${n}", 20929 parse: number.parse, 20930}; 20931function tokenise(info, { regex, countKey, token, parse }) { 20932 const matches = info.tokenised.match(regex); 20933 if (!matches) 20934 return; 20935 info["num" + countKey] = matches.length; 20936 info.tokenised = info.tokenised.replace(regex, token); 20937 info.values.push(...matches.map(parse)); 20938} 20939function analyseComplexValue(value) { 20940 const originalValue = value.toString(); 20941 const info = { 20942 value: originalValue, 20943 tokenised: originalValue, 20944 values: [], 20945 numVars: 0, 20946 numColors: 0, 20947 numNumbers: 0, 20948 }; 20949 if (info.value.includes("var(--")) 20950 tokenise(info, cssVarTokeniser); 20951 tokenise(info, colorTokeniser); 20952 tokenise(info, numberTokeniser); 20953 return info; 20954} 20955function parseComplexValue(v) { 20956 return analyseComplexValue(v).values; 20957} 20958function createTransformer(source) { 20959 const { values, numColors, numVars, tokenised } = analyseComplexValue(source); 20960 const numValues = values.length; 20961 return (v) => { 20962 let output = tokenised; 20963 for (let i = 0; i < numValues; i++) { 20964 if (i < numVars) { 20965 output = output.replace(cssVarTokeniser.token, v[i]); 20966 } 20967 else if (i < numVars + numColors) { 20968 output = output.replace(colorTokeniser.token, color.transform(v[i])); 20969 } 20970 else { 20971 output = output.replace(numberTokeniser.token, sanitize(v[i])); 20972 } 20973 } 20974 return output; 20975 }; 20976} 20977const convertNumbersToZero = (v) => typeof v === "number" ? 0 : v; 20978function getAnimatableNone(v) { 20979 const parsed = parseComplexValue(v); 20980 const transformer = createTransformer(v); 20981 return transformer(parsed.map(convertNumbersToZero)); 20982} 20983const complex = { 20984 test, 20985 parse: parseComplexValue, 20986 createTransformer, 20987 getAnimatableNone, 20988}; 20989 20990 20991 20992;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/utils/mix-complex.mjs 20993 20994 20995 20996 20997 20998 20999 21000const mixImmediate = (origin, target) => (p) => `${p > 0 ? target : origin}`; 21001function getMixer(origin, target) { 21002 if (typeof origin === "number") { 21003 return (v) => mix(origin, target, v); 21004 } 21005 else if (color.test(origin)) { 21006 return mixColor(origin, target); 21007 } 21008 else { 21009 return origin.startsWith("var(") 21010 ? mixImmediate(origin, target) 21011 : mixComplex(origin, target); 21012 } 21013} 21014const mixArray = (from, to) => { 21015 const output = [...from]; 21016 const numValues = output.length; 21017 const blendValue = from.map((fromThis, i) => getMixer(fromThis, to[i])); 21018 return (v) => { 21019 for (let i = 0; i < numValues; i++) { 21020 output[i] = blendValue[i](v); 21021 } 21022 return output; 21023 }; 21024}; 21025const mixObject = (origin, target) => { 21026 const output = { ...origin, ...target }; 21027 const blendValue = {}; 21028 for (const key in output) { 21029 if (origin[key] !== undefined && target[key] !== undefined) { 21030 blendValue[key] = getMixer(origin[key], target[key]); 21031 } 21032 } 21033 return (v) => { 21034 for (const key in blendValue) { 21035 output[key] = blendValue[key](v); 21036 } 21037 return output; 21038 }; 21039}; 21040const mixComplex = (origin, target) => { 21041 const template = complex.createTransformer(target); 21042 const originStats = analyseComplexValue(origin); 21043 const targetStats = analyseComplexValue(target); 21044 const canInterpolate = originStats.numVars === targetStats.numVars && 21045 originStats.numColors === targetStats.numColors && 21046 originStats.numNumbers >= targetStats.numNumbers; 21047 if (canInterpolate) { 21048 return pipe(mixArray(originStats.values, targetStats.values), template); 21049 } 21050 else { 21051 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.`); 21052 return mixImmediate(origin, target); 21053 } 21054}; 21055 21056 21057 21058;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/utils/progress.mjs 21059/* 21060 Progress within given range 21061 21062 Given a lower limit and an upper limit, we return the progress 21063 (expressed as a number 0-1) represented by the given value, and 21064 limit that progress to within 0-1. 21065 21066 @param [number]: Lower limit 21067 @param [number]: Upper limit 21068 @param [number]: Value to find progress within given range 21069 @return [number]: Progress of value within range as expressed 0-1 21070*/ 21071const progress = (from, to, value) => { 21072 const toFromDifference = to - from; 21073 return toFromDifference === 0 ? 1 : (value - from) / toFromDifference; 21074}; 21075 21076 21077 21078;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/utils/interpolate.mjs 21079 21080 21081 21082 21083 21084 21085 21086 21087 21088 21089const mixNumber = (from, to) => (p) => mix(from, to, p); 21090function detectMixerFactory(v) { 21091 if (typeof v === "number") { 21092 return mixNumber; 21093 } 21094 else if (typeof v === "string") { 21095 return color.test(v) ? mixColor : mixComplex; 21096 } 21097 else if (Array.isArray(v)) { 21098 return mixArray; 21099 } 21100 else if (typeof v === "object") { 21101 return mixObject; 21102 } 21103 return mixNumber; 21104} 21105function createMixers(output, ease, customMixer) { 21106 const mixers = []; 21107 const mixerFactory = customMixer || detectMixerFactory(output[0]); 21108 const numMixers = output.length - 1; 21109 for (let i = 0; i < numMixers; i++) { 21110 let mixer = mixerFactory(output[i], output[i + 1]); 21111 if (ease) { 21112 const easingFunction = Array.isArray(ease) ? ease[i] || noop_noop : ease; 21113 mixer = pipe(easingFunction, mixer); 21114 } 21115 mixers.push(mixer); 21116 } 21117 return mixers; 21118} 21119/** 21120 * Create a function that maps from a numerical input array to a generic output array. 21121 * 21122 * Accepts: 21123 * - Numbers 21124 * - Colors (hex, hsl, hsla, rgb, rgba) 21125 * - Complex (combinations of one or more numbers or strings) 21126 * 21127 * ```jsx 21128 * const mixColor = interpolate([0, 1], ['#fff', '#000']) 21129 * 21130 * mixColor(0.5) // 'rgba(128, 128, 128, 1)' 21131 * ``` 21132 * 21133 * TODO Revist this approach once we've moved to data models for values, 21134 * probably not needed to pregenerate mixer functions. 21135 * 21136 * @public 21137 */ 21138function interpolate(input, output, { clamp: isClamp = true, ease, mixer } = {}) { 21139 const inputLength = input.length; 21140 errors_invariant(inputLength === output.length, "Both input and output ranges must be the same length"); 21141 /** 21142 * If we're only provided a single input, we can just make a function 21143 * that returns the output. 21144 */ 21145 if (inputLength === 1) 21146 return () => output[0]; 21147 // If input runs highest -> lowest, reverse both arrays 21148 if (input[0] > input[inputLength - 1]) { 21149 input = [...input].reverse(); 21150 output = [...output].reverse(); 21151 } 21152 const mixers = createMixers(output, ease, mixer); 21153 const numMixers = mixers.length; 21154 const interpolator = (v) => { 21155 let i = 0; 21156 if (numMixers > 1) { 21157 for (; i < input.length - 2; i++) { 21158 if (v < input[i + 1]) 21159 break; 21160 } 21161 } 21162 const progressInRange = progress(input[i], input[i + 1], v); 21163 return mixers[i](progressInRange); 21164 }; 21165 return isClamp 21166 ? (v) => interpolator(clamp_clamp(input[0], input[inputLength - 1], v)) 21167 : interpolator; 21168} 21169 21170 21171 21172;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/utils/offsets/fill.mjs 21173 21174 21175
vendor: 12,604 bytes, lines 21176-21530
21176function fillOffset(offset, remaining) { 21177 const min = offset[offset.length - 1]; 21178 for (let i = 1; i <= remaining; i++) { 21179 const offsetProgress = progress(0, remaining, i); 21180 offset.push(mix(min, 1, offsetProgress)); 21181 } 21182} 21183 21184 21185 21186;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/utils/offsets/default.mjs 21187 21188 21189function defaultOffset(arr) { 21190 const offset = [0]; 21191 fillOffset(offset, arr.length - 1); 21192 return offset; 21193} 21194 21195 21196 21197;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/utils/offsets/time.mjs 21198function convertOffsetToTimes(offset, duration) { 21199 return offset.map((o) => o * duration); 21200} 21201 21202 21203 21204;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/animation/generators/keyframes.mjs 21205 21206 21207 21208 21209 21210 21211 21212function defaultEasing(values, easing) { 21213 return values.map(() => easing || easeInOut).splice(0, values.length - 1); 21214} 21215function keyframes_keyframes({ duration = 300, keyframes: keyframeValues, times, ease = "easeInOut", }) { 21216 /** 21217 * Easing functions can be externally defined as strings. Here we convert them 21218 * into actual functions. 21219 */ 21220 const easingFunctions = isEasingArray(ease) 21221 ? ease.map(easingDefinitionToFunction) 21222 : easingDefinitionToFunction(ease); 21223 /** 21224 * This is the Iterator-spec return value. We ensure it's mutable rather than using a generator 21225 * to reduce GC during animation. 21226 */ 21227 const state = { 21228 done: false, 21229 value: keyframeValues[0], 21230 }; 21231 /** 21232 * Create a times array based on the provided 0-1 offsets 21233 */ 21234 const absoluteTimes = convertOffsetToTimes( 21235 // Only use the provided offsets if they're the correct length 21236 // TODO Maybe we should warn here if there's a length mismatch 21237 times && times.length === keyframeValues.length 21238 ? times 21239 : defaultOffset(keyframeValues), duration); 21240 const mapTimeToKeyframe = interpolate(absoluteTimes, keyframeValues, { 21241 ease: Array.isArray(easingFunctions) 21242 ? easingFunctions 21243 : defaultEasing(keyframeValues, easingFunctions), 21244 }); 21245 return { 21246 calculatedDuration: duration, 21247 next: (t) => { 21248 state.value = mapTimeToKeyframe(t); 21249 state.done = t >= duration; 21250 return state; 21251 }, 21252 }; 21253} 21254 21255 21256 21257;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/utils/velocity-per-second.mjs 21258/* 21259 Convert velocity into velocity per second 21260 21261 @param [number]: Unit per frame 21262 @param [number]: Frame duration in ms 21263*/ 21264function velocityPerSecond(velocity, frameDuration) { 21265 return frameDuration ? velocity * (1000 / frameDuration) : 0; 21266} 21267 21268 21269 21270;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/animation/generators/utils/velocity.mjs 21271 21272 21273const velocitySampleDuration = 5; // ms 21274function calcGeneratorVelocity(resolveValue, t, current) { 21275 const prevT = Math.max(t - velocitySampleDuration, 0); 21276 return velocityPerSecond(current - resolveValue(prevT), t - prevT); 21277} 21278 21279 21280 21281;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/animation/generators/spring/find.mjs 21282 21283 21284 21285 21286const safeMin = 0.001; 21287const minDuration = 0.01; 21288const maxDuration = 10.0; 21289const minDamping = 0.05; 21290const maxDamping = 1; 21291function findSpring({ duration = 800, bounce = 0.25, velocity = 0, mass = 1, }) { 21292 let envelope; 21293 let derivative; 21294 warning(duration <= secondsToMilliseconds(maxDuration), "Spring duration must be 10 seconds or less"); 21295 let dampingRatio = 1 - bounce; 21296 /** 21297 * Restrict dampingRatio and duration to within acceptable ranges. 21298 */ 21299 dampingRatio = clamp_clamp(minDamping, maxDamping, dampingRatio); 21300 duration = clamp_clamp(minDuration, maxDuration, millisecondsToSeconds(duration)); 21301 if (dampingRatio < 1) { 21302 /** 21303 * Underdamped spring 21304 */ 21305 envelope = (undampedFreq) => { 21306 const exponentialDecay = undampedFreq * dampingRatio; 21307 const delta = exponentialDecay * duration; 21308 const a = exponentialDecay - velocity; 21309 const b = calcAngularFreq(undampedFreq, dampingRatio); 21310 const c = Math.exp(-delta); 21311 return safeMin - (a / b) * c; 21312 }; 21313 derivative = (undampedFreq) => { 21314 const exponentialDecay = undampedFreq * dampingRatio; 21315 const delta = exponentialDecay * duration; 21316 const d = delta * velocity + velocity; 21317 const e = Math.pow(dampingRatio, 2) * Math.pow(undampedFreq, 2) * duration; 21318 const f = Math.exp(-delta); 21319 const g = calcAngularFreq(Math.pow(undampedFreq, 2), dampingRatio); 21320 const factor = -envelope(undampedFreq) + safeMin > 0 ? -1 : 1; 21321 return (factor * ((d - e) * f)) / g; 21322 }; 21323 } 21324 else { 21325 /** 21326 * Critically-damped spring 21327 */ 21328 envelope = (undampedFreq) => { 21329 const a = Math.exp(-undampedFreq * duration); 21330 const b = (undampedFreq - velocity) * duration + 1; 21331 return -safeMin + a * b; 21332 }; 21333 derivative = (undampedFreq) => { 21334 const a = Math.exp(-undampedFreq * duration); 21335 const b = (velocity - undampedFreq) * (duration * duration); 21336 return a * b; 21337 }; 21338 } 21339 const initialGuess = 5 / duration; 21340 const undampedFreq = approximateRoot(envelope, derivative, initialGuess); 21341 duration = secondsToMilliseconds(duration); 21342 if (isNaN(undampedFreq)) { 21343 return { 21344 stiffness: 100, 21345 damping: 10, 21346 duration, 21347 }; 21348 } 21349 else { 21350 const stiffness = Math.pow(undampedFreq, 2) * mass; 21351 return { 21352 stiffness, 21353 damping: dampingRatio * 2 * Math.sqrt(mass * stiffness), 21354 duration, 21355 }; 21356 } 21357} 21358const rootIterations = 12; 21359function approximateRoot(envelope, derivative, initialGuess) { 21360 let result = initialGuess; 21361 for (let i = 1; i < rootIterations; i++) { 21362 result = result - envelope(result) / derivative(result); 21363 } 21364 return result; 21365} 21366function calcAngularFreq(undampedFreq, dampingRatio) { 21367 return undampedFreq * Math.sqrt(1 - dampingRatio * dampingRatio); 21368} 21369 21370 21371 21372;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/animation/generators/spring/index.mjs 21373 21374 21375 21376 21377const durationKeys = ["duration", "bounce"]; 21378const physicsKeys = ["stiffness", "damping", "mass"]; 21379function isSpringType(options, keys) { 21380 return keys.some((key) => options[key] !== undefined); 21381} 21382function getSpringOptions(options) { 21383 let springOptions = { 21384 velocity: 0.0, 21385 stiffness: 100, 21386 damping: 10, 21387 mass: 1.0, 21388 isResolvedFromDuration: false, 21389 ...options, 21390 }; 21391 // stiffness/damping/mass overrides duration/bounce 21392 if (!isSpringType(options, physicsKeys) && 21393 isSpringType(options, durationKeys)) { 21394 const derived = findSpring(options); 21395 springOptions = { 21396 ...springOptions, 21397 ...derived, 21398 velocity: 0.0, 21399 mass: 1.0, 21400 }; 21401 springOptions.isResolvedFromDuration = true; 21402 } 21403 return springOptions; 21404} 21405function spring({ keyframes, restDelta, restSpeed, ...options }) { 21406 const origin = keyframes[0]; 21407 const target = keyframes[keyframes.length - 1]; 21408 /** 21409 * This is the Iterator-spec return value. We ensure it's mutable rather than using a generator 21410 * to reduce GC during animation. 21411 */ 21412 const state = { done: false, value: origin }; 21413 const { stiffness, damping, mass, velocity, duration, isResolvedFromDuration, } = getSpringOptions(options); 21414 const initialVelocity = velocity ? -millisecondsToSeconds(velocity) : 0.0; 21415 const dampingRatio = damping / (2 * Math.sqrt(stiffness * mass)); 21416 const initialDelta = target - origin; 21417 const undampedAngularFreq = millisecondsToSeconds(Math.sqrt(stiffness / mass)); 21418 /** 21419 * If we're working on a granular scale, use smaller defaults for determining 21420 * when the spring is finished. 21421 * 21422 * These defaults have been selected emprically based on what strikes a good 21423 * ratio between feeling good and finishing as soon as changes are imperceptible. 21424 */ 21425 const isGranularScale = Math.abs(initialDelta) < 5; 21426 restSpeed || (restSpeed = isGranularScale ? 0.01 : 2); 21427 restDelta || (restDelta = isGranularScale ? 0.005 : 0.5); 21428 let resolveSpring; 21429 if (dampingRatio < 1) { 21430 const angularFreq = calcAngularFreq(undampedAngularFreq, dampingRatio); 21431 // Underdamped spring 21432 resolveSpring = (t) => { 21433 const envelope = Math.exp(-dampingRatio * undampedAngularFreq * t); 21434 return (target - 21435 envelope * 21436 (((initialVelocity + 21437 dampingRatio * undampedAngularFreq * initialDelta) / 21438 angularFreq) * 21439 Math.sin(angularFreq * t) + 21440 initialDelta * Math.cos(angularFreq * t))); 21441 }; 21442 } 21443 else if (dampingRatio === 1) { 21444 // Critically damped spring 21445 resolveSpring = (t) => target - 21446 Math.exp(-undampedAngularFreq * t) * 21447 (initialDelta + 21448 (initialVelocity + undampedAngularFreq * initialDelta) * t); 21449 } 21450 else { 21451 // Overdamped spring 21452 const dampedAngularFreq = undampedAngularFreq * Math.sqrt(dampingRatio * dampingRatio - 1); 21453 resolveSpring = (t) => { 21454 const envelope = Math.exp(-dampingRatio * undampedAngularFreq * t); 21455 // When performing sinh or cosh values can hit Infinity so we cap them here 21456 const freqForT = Math.min(dampedAngularFreq * t, 300); 21457 return (target - 21458 (envelope * 21459 ((initialVelocity + 21460 dampingRatio * undampedAngularFreq * initialDelta) * 21461 Math.sinh(freqForT) + 21462 dampedAngularFreq * 21463 initialDelta * 21464 Math.cosh(freqForT))) / 21465 dampedAngularFreq); 21466 }; 21467 } 21468 return { 21469 calculatedDuration: isResolvedFromDuration ? duration || null : null, 21470 next: (t) => { 21471 const current = resolveSpring(t); 21472 if (!isResolvedFromDuration) { 21473 let currentVelocity = initialVelocity; 21474 if (t !== 0) { 21475 /** 21476 * We only need to calculate velocity for under-damped springs 21477 * as over- and critically-damped springs can't overshoot, so 21478 * checking only for displacement is enough. 21479 */ 21480 if (dampingRatio < 1) { 21481 currentVelocity = calcGeneratorVelocity(resolveSpring, t, current); 21482 } 21483 else { 21484 currentVelocity = 0; 21485 } 21486 } 21487 const isBelowVelocityThreshold = Math.abs(currentVelocity) <= restSpeed; 21488 const isBelowDisplacementThreshold = Math.abs(target - current) <= restDelta; 21489 state.done = 21490 isBelowVelocityThreshold && isBelowDisplacementThreshold; 21491 } 21492 else { 21493 state.done = t >= duration; 21494 } 21495 state.value = state.done ? target : current; 21496 return state; 21497 }, 21498 }; 21499} 21500 21501 21502 21503;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/animation/generators/inertia.mjs 21504 21505 21506 21507function inertia({ keyframes, velocity = 0.0, power = 0.8, timeConstant = 325, bounceDamping = 10, bounceStiffness = 500, modifyTarget, min, max, restDelta = 0.5, restSpeed, }) { 21508 const origin = keyframes[0]; 21509 const state = { 21510 done: false, 21511 value: origin, 21512 }; 21513 const isOutOfBounds = (v) => (min !== undefined && v < min) || (max !== undefined && v > max); 21514 const nearestBoundary = (v) => { 21515 if (min === undefined) 21516 return max; 21517 if (max === undefined) 21518 return min; 21519 return Math.abs(min - v) < Math.abs(max - v) ? min : max; 21520 }; 21521 let amplitude = power * velocity; 21522 const ideal = origin + amplitude; 21523 const target = modifyTarget === undefined ? ideal : modifyTarget(ideal); 21524 /** 21525 * If the target has changed we need to re-calculate the amplitude, otherwise 21526 * the animation will start from the wrong position. 21527 */ 21528 if (target !== ideal) 21529 amplitude = target - origin; 21530 const calcDelta = (t) =>
21530 -amplitude * Math.exp(-t / timeConstant); 21531 const calcLatest = (t) => target + calcDelta(t); 21532 const applyFriction = (t) => { 21533 const delta = calcDelta(t); 21534 const latest = calcLatest(t); 21535 state.done = Math.abs(delta) <= restDelta; 21536 state.value = state.done ? target : latest; 21537 }; 21538 /** 21539 * Ideally this would resolve for t in a stateless way, we could 21540 * do that by always precalculating the animation but as we know 21541 * this will be done anyway we can assume that spring will 21542 * be discovered during that. 21543 */ 21544 let timeReachedBoundary; 21545 let spring$1; 21546 const checkCatchBoundary = (t) => { 21547 if (!isOutOfBounds(state.value)) 21548 return; 21549 timeReachedBoundary = t; 21550 spring$1 = spring({ 21551 keyframes: [state.value, nearestBoundary(state.value)], 21552 velocity: calcGeneratorVelocity(calcLatest, t, state.value), 21553 damping: bounceDamping, 21554 stiffness: bounceStiffness, 21555 restDelta, 21556 restSpeed, 21557 }); 21558 }; 21559 checkCatchBoundary(0); 21560 return { 21561 calculatedDuration: null, 21562 next: (t) => { 21563 /** 21564 * We need to resolve the friction to figure out if we need a 21565 * spring but we don't want to do this twice per frame. So here 21566 * we flag if we updated for this frame and later if we did 21567 * we can skip doing it again. 21568 */ 21569 let hasUpdatedFrame = false; 21570 if (!spring$1 && timeReachedBoundary === undefined) { 21571 hasUpdatedFrame = true; 21572 applyFriction(t); 21573 checkCatchBoundary(t); 21574 } 21575 /** 21576 * If we have a spring and the provided t is beyond the moment the friction 21577 * animation crossed the min/max boundary, use the spring. 21578 */ 21579 if (timeReachedBoundary !== undefined && t > timeReachedBoundary) { 21580 return spring$1.next(t - timeReachedBoundary); 21581 } 21582 else { 21583 !hasUpdatedFrame && applyFriction(t); 21584 return state; 21585 } 21586 }, 21587 }; 21588} 21589 21590 21591 21592;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/animation/animators/js/driver-frameloop.mjs 21593 21594 21595const frameloopDriver = (update) => { 21596 const passTimestamp = ({ timestamp }) => update(timestamp); 21597 return { 21598 start: () => frame_frame.update(passTimestamp, true), 21599 stop: () => cancelFrame(passTimestamp), 21600 /** 21601 * If we're processing this frame we can use the 21602 * framelocked timestamp to keep things in sync. 21603 */ 21604 now: () => frameData.isProcessing ? frameData.timestamp : performance.now(), 21605 }; 21606}; 21607 21608 21609 21610;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/animation/generators/utils/calc-duration.mjs 21611/** 21612 * Implement a practical max duration for keyframe generation 21613 * to prevent infinite loops 21614 */ 21615const maxGeneratorDuration = 20000; 21616function calcGeneratorDuration(generator) { 21617 let duration = 0; 21618 const timeStep = 50; 21619 let state = generator.next(duration); 21620 while (!state.done && duration < maxGeneratorDuration) { 21621 duration += timeStep; 21622 state = generator.next(duration); 21623 } 21624 return duration >= maxGeneratorDuration ? Infinity : duration; 21625} 21626 21627 21628 21629;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/animation/animators/js/index.mjs 21630 21631 21632 21633 21634 21635 21636 21637 21638 21639const types = { 21640 decay: inertia, 21641 inertia: inertia, 21642 tween: keyframes_keyframes, 21643 keyframes: keyframes_keyframes, 21644 spring: spring, 21645}; 21646/** 21647 * Animate a single value on the main thread. 21648 * 21649 * This function is written, where functionality overlaps, 21650 * to be largely spec-compliant with WAAPI to allow fungibility 21651 * between the two. 21652 */ 21653function animateValue({ autoplay = true, delay = 0, driver = frameloopDriver, keyframes: keyframes$1, type = "keyframes", repeat = 0, repeatDelay = 0, repeatType = "loop", onPlay, onStop, onComplete, onUpdate, ...options }) { 21654 let speed = 1; 21655 let hasStopped = false;
21656 let resolveFinishedPromise; 21657 let currentFinishedPromise; 21658 /** 21659 * Resolve the current Promise every time we enter the 21660 * finished state. This is WAAPI-compatible behaviour. 21661 */ 21662 const updateFinishedPromise = () => { 21663 currentFinishedPromise = new Promise((resolve) => { 21664 resolveFinishedPromise = resolve; 21665 }); 21666 }; 21667 // Create the first finished promise 21668 updateFinishedPromise(); 21669 let animationDriver; 21670 const generatorFactory = types[type] || keyframes_keyframes; 21671 /** 21672 * If this isn't the keyframes generator and we've been provided 21673 * strings as keyframes, we need to interpolate these. 21674 * TODO: Support velocity for units and complex value types/ 21675 */ 21676 let mapNumbersToKeyframes; 21677 if (generatorFactory !== keyframes_keyframes && 21678 typeof keyframes$1[0] !== "number") { 21679 mapNumbersToKeyframes = interpolate([0, 100], keyframes$1, { 21680 clamp: false, 21681 }); 21682 keyframes$1 = [0, 100]; 21683 } 21684 const generator = generatorFactory({ ...options, keyframes: keyframes$1 }); 21685 let mirroredGenerator; 21686 if (repeatType === "mirror") { 21687 mirroredGenerator = generatorFactory({ 21688 ...options, 21689 keyframes: [...keyframes$1].reverse(), 21690 velocity: -(options.velocity || 0), 21691 }); 21692 } 21693 let playState = "idle"; 21694 let holdTime = null; 21695 let startTime = null; 21696 let cancelTime = null; 21697 /** 21698 * If duration is undefined and we have repeat options, 21699 * we need to calculate a duration from the generator. 21700 * 21701 * We set it to the generator itself to cache the duration. 21702 * Any timeline resolver will need to have already precalculated 21703 * the duration by this step. 21704 */ 21705 if (generator.calculatedDuration === null && repeat) { 21706 generator.calculatedDuration = calcGeneratorDuration(generator); 21707 } 21708 const { calculatedDuration } = generator; 21709 let resolvedDuration = Infinity; 21710 let totalDuration = Infinity; 21711 if (calculatedDuration !== null) { 21712 resolvedDuration = calculatedDuration + repeatDelay; 21713 totalDuration = resolvedDuration * (repeat + 1) - repeatDelay; 21714 } 21715 let currentTime = 0; 21716 const tick = (timestamp) => { 21717 if (startTime === null) 21718 return; 21719 /** 21720 * requestAnimationFrame timestamps can come through as lower than 21721 * the startTime as set by performance.now(). Here we prevent this, 21722 * though in the future it could be possible to make setting startTime 21723 * a pending operation that gets resolved here. 21724 */ 21725 if (speed > 0) 21726 startTime = Math.min(startTime, timestamp); 21727 if (speed < 0) 21728 startTime = Math.min(timestamp - totalDuration / speed, startTime); 21729 if (holdTime !== null) { 21730 currentTime = holdTime; 21731 } 21732 else { 21733 // Rounding the time because floating point arithmetic is not always accurate, e.g. 3000.367 - 1000.367 = 21734 // 2000.0000000000002. This is a problem when we are comparing the currentTime with the duration, for 21735 // example. 21736 currentTime = Math.round(timestamp - startTime) * speed; 21737 } 21738 // Rebase on delay 21739 const timeWithoutDelay = currentTime - delay * (speed >= 0 ? 1 : -1); 21740 const isInDelayPhase = speed >= 0 ? timeWithoutDelay < 0 : timeWithoutDelay > totalDuration; 21741 currentTime = Math.max(timeWithoutDelay, 0); 21742 /** 21743 * If this animation has finished, set the current time 21744 * to the total duration. 21745 */ 21746 if (playState === "finished" && holdTime === null) { 21747 currentTime = totalDuration; 21748 } 21749 let elapsed = currentTime; 21750 let frameGenerator = generator; 21751 if (repeat) { 21752 /** 21753 * Get the current progress (0-1) of the animation. If t is > 21754 * than duration we'll get values like 2.5 (midway through the 21755 * third iteration) 21756 */ 21757 const progress = currentTime / resolvedDuration; 21758 /** 21759 * Get the current iteration (0 indexed). For instance the floor of 21760 * 2.5 is 2. 21761 */ 21762 let currentIteration = Math.floor(progress); 21763 /** 21764 * Get the current progress of the iteration by taking the remainder 21765 * so 2.5 is 0.5 through iteration 2 21766 */ 21767 let iterationProgress = progress % 1.0; 21768 /** 21769 * If iteration progress is 1 we count that as the end 21770 * of the previous iteration. 21771 */ 21772 if (!iterationProgress && progress >= 1) { 21773 iterationProgress = 1; 21774 } 21775 iterationProgress === 1 && currentIteration--; 21776 currentIteration = Math.min(currentIteration, repeat + 1); 21777 /** 21778 * Reverse progress if we're not running in "normal" direction 21779 */ 21780 const iterationIsOdd = Boolean(currentIteration % 2); 21781 if (iterationIsOdd) { 21782 if (repeatType === "reverse") { 21783 iterationProgress = 1 - iterationProgress; 21784 if (repeatDelay) { 21785 iterationProgress -= repeatDelay / resolvedDuration; 21786 } 21787 } 21788 else if (repeatType === "mirror") { 21789 frameGenerator = mirroredGenerator; 21790 } 21791 } 21792 let p = clamp_clamp(0, 1, iterationProgress); 21793 if (currentTime > totalDuration) { 21794 p = repeatType === "reverse" && iterationIsOdd ? 1 : 0; 21795 }
21796 elapsed = p * resolvedDuration; 21797 } 21798 /** 21799 * If we're in negative time, set state as the initial keyframe. 21800 * This prevents delay: x, duration: 0 animations from finishing 21801 * instantly. 21802 */ 21803 const state = isInDelayPhase 21804 ? { done: false, value: keyframes$1[0] } 21805 : frameGenerator.next(elapsed); 21806 if (mapNumbersToKeyframes) { 21807 state.value = mapNumbersToKeyframes(state.value); 21808 } 21809 let { done } = state; 21810 if (!isInDelayPhase && calculatedDuration !== null) { 21811 done = speed >= 0 ? currentTime >= totalDuration : currentTime <= 0; 21812 } 21813 const isAnimationFinished = holdTime === null && 21814 (playState === "finished" || (playState === "running" && done)); 21815 if (onUpdate) { 21816 onUpdate(state.value); 21817 } 21818 if (isAnimationFinished) { 21819 finish(); 21820 } 21821 return state; 21822 }; 21823 const stopAnimationDriver = () => { 21824 animationDriver && animationDriver.stop(); 21825 animationDriver = undefined; 21826 }; 21827 const cancel = () => { 21828 playState = "idle"; 21829 stopAnimationDriver(); 21830 resolveFinishedPromise(); 21831 updateFinishedPromise(); 21832 startTime = cancelTime = null; 21833 }; 21834 const finish = () => { 21835 playState = "finished"; 21836 onComplete && onComplete(); 21837 stopAnimationDriver(); 21838 resolveFinishedPromise(); 21839 }; 21840 const play = () => { 21841 if (hasStopped) 21842 return; 21843 if (!animationDriver) 21844 animationDriver = driver(tick); 21845 const now = animationDriver.now(); 21846 onPlay && onPlay(); 21847 if (holdTime !== null) { 21848 startTime = now - holdTime; 21849 } 21850 else if (!startTime || playState === "finished") { 21851 startTime = now; 21852 } 21853 if (playState === "finished") { 21854 updateFinishedPromise(); 21855 } 21856 cancelTime = startTime; 21857 holdTime = null; 21858 /** 21859 * Set playState to running only after we've used it in 21860 * the previous logic. 21861 */ 21862 playState = "running"; 21863 animationDriver.start(); 21864 }; 21865 if (autoplay) { 21866 play(); 21867 } 21868 const controls = { 21869 then(resolve, reject) { 21870 return currentFinishedPromise.then(resolve, reject); 21871 }, 21872 get time() { 21873 return millisecondsToSeconds(currentTime); 21874 }, 21875 set time(newTime) { 21876 newTime = secondsToMilliseconds(newTime); 21877 currentTime = newTime; 21878 if (holdTime !== null || !animationDriver || speed === 0) { 21879 holdTime = newTime; 21880 } 21881 else { 21882 startTime = animationDriver.now() - newTime / speed; 21883 } 21884 }, 21885 get duration() { 21886 const duration = generator.calculatedDuration === null 21887 ? calcGeneratorDuration(generator) 21888 : generator.calculatedDuration; 21889 return millisecondsToSeconds(duration); 21890 }, 21891 get speed() { 21892 return speed; 21893 }, 21894 set speed(newSpeed) { 21895 if (newSpeed === speed || !animationDriver) 21896 return; 21897 speed = newSpeed; 21898 controls.time = millisecondsToSeconds(currentTime); 21899 }, 21900 get state() { 21901 return playState; 21902 }, 21903 play, 21904 pause: () => { 21905 playState = "paused"; 21906 holdTime = currentTime; 21907 }, 21908 stop: () => { 21909 hasStopped = true; 21910 if (playState === "idle") 21911 return; 21912 playState = "idle"; 21913 onStop && onStop(); 21914 cancel(); 21915 }, 21916 cancel: () => { 21917 if (cancelTime !== null) 21918 tick(cancelTime); 21919 cancel(); 21920 }, 21921 complete: () => { 21922 playState = "finished"; 21923 }, 21924 sample: (elapsed) => { 21925 startTime = 0; 21926 return tick(elapsed); 21927 }, 21928 }; 21929 return controls; 21930} 21931 21932 21933 21934;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/utils/memo.mjs 21935function memo_memo(callback) { 21936 let result; 21937 return () => { 21938 if (result === undefined) 21939 result = callback(); 21940 return result; 21941 }; 21942} 21943 21944 21945 21946;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/animation/animators/waapi/create-accelerated-animation.mjs 21947 21948 21949 21950 21951 21952 21953 21954 21955const supportsWaapi = memo_memo(() => Object.hasOwnProperty.call(Element.prototype, "animate")); 21956/** 21957 * A list of values that can be hardware-accelerated. 21958 */ 21959const acceleratedValues = new Set([ 21960 "opacity", 21961 "clipPath", 21962 "filter", 21963 "transform", 21964 "backgroundColor", 21965]); 21966/** 21967 * 10ms is chosen here as it strikes a balance between smooth 21968 * results (more than one keyframe per frame at 60fps) and 21969 * keyframe quantity. 21970 */ 21971const sampleDelta = 10; //ms 21972/** 21973 * Implement a practical max duration for keyframe generation 21974 * to prevent infinite loops 21975 */ 21976const create_accelerated_animation_maxDuration = 20000; 21977const requiresPregeneratedKeyframes = (valueName, options) => options.type === "spring" || 21978 valueName === "backgroundColor" || 21979 !isWaapiSupportedEasing(options.ease);
21980function createAcceleratedAnimation(value, valueName, { onUpdate, onComplete, ...options }) { 21981 const canAccelerateAnimation = supportsWaapi() && 21982 acceleratedValues.has(valueName) && 21983 !options.repeatDelay && 21984 options.repeatType !== "mirror" && 21985 options.damping !== 0 && 21986 options.type !== "inertia"; 21987 if (!canAccelerateAnimation) 21988 return false; 21989 /** 21990 * TODO: Unify with js/index 21991 */ 21992 let hasStopped = false; 21993 let resolveFinishedPromise; 21994 let currentFinishedPromise; 21995 /** 21996 * Resolve the current Promise every time we enter the 21997 * finished state. This is WAAPI-compatible behaviour. 21998 */ 21999 const updateFinishedPromise = () => { 22000 currentFinishedPromise = new Promise((resolve) => { 22001 resolveFinishedPromise = resolve; 22002 }); 22003 }; 22004 // Create the first finished promise 22005 updateFinishedPromise(); 22006 let { keyframes, duration = 300, ease, times } = options; 22007 /** 22008 * If this animation needs pre-generated keyframes then generate. 22009 */ 22010 if (requiresPregeneratedKeyframes(valueName, options)) { 22011 const sampleAnimation = animateValue({ 22012 ...options, 22013 repeat: 0, 22014 delay: 0, 22015 }); 22016 let state = { done: false, value: keyframes[0] }; 22017 const pregeneratedKeyframes = []; 22018 /** 22019 * Bail after 20 seconds of pre-generated keyframes as it's likely 22020 * we're heading for an infinite loop. 22021 */ 22022 let t = 0; 22023 while (!state.done && t < create_accelerated_animation_maxDuration) { 22024 state = sampleAnimation.sample(t); 22025 pregeneratedKeyframes.push(state.value); 22026 t += sampleDelta; 22027 } 22028 times = undefined; 22029 keyframes = pregeneratedKeyframes; 22030 duration = t - sampleDelta; 22031 ease = "linear"; 22032 } 22033 const animation = animateStyle(value.owner.current, valueName, keyframes, { 22034 ...options, 22035 duration, 22036 /** 22037 * This function is currently not called if ease is provided 22038 * as a function so the cast is safe. 22039 * 22040 * However it would be possible for a future refinement to port 22041 * in easing pregeneration from Motion One for browsers that 22042 * support the upcoming `linear()` easing function. 22043 */ 22044 ease: ease, 22045 times, 22046 }); 22047 const cancelAnimation = () => animation.cancel(); 22048 const safeCancel = () => { 22049 frame_frame.update(cancelAnimation); 22050 resolveFinishedPromise(); 22051 updateFinishedPromise(); 22052 }; 22053 /** 22054 * Prefer the `onfinish` prop as it's more widely supported than 22055 * the `finished` promise. 22056 * 22057 * Here, we synchronously set the provided MotionValue to the end 22058 * keyframe. If we didn't, when the WAAPI animation is finished it would 22059 * be removed from the element which would then revert to its old styles. 22060 */ 22061 animation.onfinish = () => { 22062 value.set(getFinalKeyframe(keyframes, options)); 22063 onComplete && onComplete(); 22064 safeCancel(); 22065 }; 22066 /** 22067 * Animation interrupt callback. 22068 */ 22069 return { 22070 then(resolve, reject) { 22071 return currentFinishedPromise.then(resolve, reject); 22072 }, 22073 get timeline() { 22074 return animation.timeline; 22075 }, 22076 set timeline(timeline) { 22077 animation.timeline = timeline; 22078 animation.onfinish = null; 22079 }, 22080 get time() { 22081 return millisecondsToSeconds(animation.currentTime || 0); 22082 }, 22083 set time(newTime) { 22084 animation.currentTime = secondsToMilliseconds(newTime); 22085 }, 22086 get speed() { 22087 return animation.playbackRate; 22088 }, 22089 set speed(newSpeed) { 22090 animation.playbackRate = newSpeed; 22091 }, 22092 get duration() { 22093 return millisecondsToSeconds(duration); 22094 }, 22095 play: () => { 22096 if (hasStopped) 22097 return; 22098 animation.play(); 22099 /** 22100 * Cancel any pending cancel tasks 22101 */ 22102 cancelFrame(cancelAnimation); 22103 }, 22104 pause: () => animation.pause(), 22105 stop: () => { 22106 hasStopped = true;
22107 if (animation.playState === "idle") 22108 return; 22109 /** 22110 * WAAPI doesn't natively have any interruption capabilities. 22111 * 22112 * Rather than read commited styles back out of the DOM, we can 22113 * create a renderless JS animation and sample it twice to calculate 22114 * its current value, "previous" value, and therefore allow 22115 * Motion to calculate velocity for any subsequent animation. 22116 */ 22117 const { currentTime } = animation; 22118 if (currentTime) { 22119 const sampleAnimation = animateValue({ 22120 ...options, 22121 autoplay: false, 22122 }); 22123 value.setWithVelocity(sampleAnimation.sample(currentTime - sampleDelta).value, sampleAnimation.sample(currentTime).value, sampleDelta); 22124 } 22125 safeCancel(); 22126 }, 22127 complete: () => animation.finish(), 22128 cancel: safeCancel, 22129 }; 22130} 22131 22132 22133 22134;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/animation/animators/instant.mjs 22135 22136 22137 22138function createInstantAnimation({ keyframes, delay, onUpdate, onComplete, }) { 22139 const setValue = () => { 22140 onUpdate && onUpdate(keyframes[keyframes.length - 1]); 22141 onComplete && onComplete(); 22142 /** 22143 * TODO: As this API grows it could make sense to always return 22144 * animateValue. This will be a bigger project as animateValue 22145 * is frame-locked whereas this function resolves instantly. 22146 * This is a behavioural change and also has ramifications regarding 22147 * assumptions within tests. 22148 */ 22149 return { 22150 time: 0, 22151 speed: 1, 22152 duration: 0, 22153 play: (noop_noop), 22154 pause: (noop_noop), 22155 stop: (noop_noop), 22156 then: (resolve) => { 22157 resolve(); 22158 return Promise.resolve(); 22159 }, 22160 cancel: (noop_noop), 22161 complete: (noop_noop), 22162 }; 22163 }; 22164 return delay 22165 ? animateValue({ 22166 keyframes: [0, 1], 22167 duration: 0, 22168 delay, 22169 onComplete: setValue, 22170 }) 22171 : setValue(); 22172} 22173 22174 22175 22176;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/animation/utils/default-transitions.mjs 22177 22178 22179const underDampedSpring = { 22180 type: "spring", 22181 stiffness: 500, 22182 damping: 25, 22183 restSpeed: 10, 22184}; 22185const criticallyDampedSpring = (target) => ({ 22186 type: "spring", 22187 stiffness: 550, 22188 damping: target === 0 ? 2 * Math.sqrt(550) : 30, 22189 restSpeed: 10, 22190}); 22191const keyframesTransition = { 22192 type: "keyframes", 22193 duration: 0.8, 22194}; 22195/** 22196 * Default easing curve is a slightly shallower version of 22197 * the default browser easing curve. 22198 */ 22199const ease = { 22200 type: "keyframes", 22201 ease: [0.25, 0.1, 0.35, 1], 22202 duration: 0.3, 22203}; 22204const getDefaultTransition = (valueKey, { keyframes }) => { 22205 if (keyframes.length > 2) { 22206 return keyframesTransition; 22207 } 22208 else if (transformProps.has(valueKey)) { 22209 return valueKey.startsWith("scale") 22210 ? criticallyDampedSpring(keyframes[1]) 22211 : underDampedSpring; 22212 } 22213 return ease; 22214}; 22215 22216 22217 22218;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/animation/utils/is-animatable.mjs 22219 22220 22221/** 22222 * Check if a value is animatable. Examples: 22223 * 22224 * â : 100, "100px", "#fff" 22225 * â: "block", "url(2.jpg)" 22226 * @param value 22227 * 22228 * @internal 22229 */ 22230const isAnimatable = (key, value) => { 22231 // If the list of keys tat might be non-animatable grows, replace with Set 22232 if (key === "zIndex") 22233 return false; 22234 // If it's a number or a keyframes array, we can animate it. We might at some point 22235 // need to do a deep isAnimatable check of keyframes, or let Popmotion handle this, 22236 // but for now lets leave it like this for performance reasons 22237 if (typeof value === "number" || Array.isArray(value)) 22238 return true; 22239 if (typeof value === "string" && // It's animatable if we have a string 22240 (complex.test(value) || value === "0") && // And it contains
22240numbers and/or colors 22241 !value.startsWith("url(") // Unless it starts with "url(" 22242 ) { 22243 return true; 22244 } 22245 return false; 22246}; 22247 22248 22249 22250;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/value/types/complex/filter.mjs 22251 22252 22253 22254/** 22255 * Properties that should default to 1 or 100% 22256 */ 22257const maxDefaults = new Set(["brightness", "contrast", "saturate", "opacity"]); 22258function applyDefaultFilter(v) { 22259 const [name, value] = v.slice(0, -1).split("("); 22260 if (name === "drop-shadow") 22261 return v; 22262 const [number] = value.match(floatRegex) || []; 22263 if (!number) 22264 return v; 22265 const unit = value.replace(number, ""); 22266 let defaultValue = maxDefaults.has(name) ? 1 : 0; 22267 if (number !== value) 22268 defaultValue *= 100; 22269 return name + "(" + defaultValue + unit + ")"; 22270} 22271const functionRegex = /([a-z-]*)\(.*?\)/g; 22272const filter = { 22273 ...complex, 22274 getAnimatableNone: (v) => { 22275 const functions = v.match(functionRegex); 22276 return functions ? functions.map(applyDefaultFilter).join(" ") : v; 22277 }, 22278}; 22279 22280 22281 22282;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/render/dom/value-types/defaults.mjs 22283 22284 22285 22286 22287/** 22288 * A map of default value types for common values 22289 */ 22290const defaultValueTypes = { 22291 ...numberValueTypes, 22292 // Color props 22293 color: color, 22294 backgroundColor: color, 22295 outlineColor: color, 22296 fill: color, 22297 stroke: color, 22298 // Border props 22299 borderColor: color, 22300 borderTopColor: color, 22301 borderRightColor: color, 22302 borderBottomColor: color, 22303 borderLeftColor: color, 22304 filter: filter, 22305 WebkitFilter: filter, 22306}; 22307/** 22308 * Gets the default ValueType for the provided value key 22309 */ 22310const getDefaultValueType = (key) => defaultValueTypes[key]; 22311 22312 22313 22314;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/render/dom/value-types/animatable-none.mjs 22315 22316 22317 22318 22319function animatable_none_getAnimatableNone(key, value) { 22320 let defaultValueType = getDefaultValueType(key); 22321 if (defaultValueType !== filter) 22322 defaultValueType = complex; 22323 // If value is not recognised as animatable, ie "none", create an animatable version origin based on the target 22324 return defaultValueType.getAnimatableNone 22325 ? defaultValueType.getAnimatableNone(value) 22326 : undefined; 22327} 22328 22329 22330 22331;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/utils/is-zero-value-string.mjs 22332/** 22333 * Check if the value is a zero value string like "0px" or "0%" 22334 */ 22335const isZeroValueString = (v) => /^0[^.\s]+$/.test(v); 22336 22337 22338 22339;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/animation/utils/is-none.mjs 22340 22341 22342function isNone(value) { 22343 if (typeof value === "number") { 22344 return value === 0; 22345 } 22346 else if (value !== null) { 22347 return value === "none" || value === "0" || isZeroValueString(value); 22348 } 22349} 22350 22351 22352 22353;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/animation/utils/keyframes.mjs 22354 22355 22356 22357 22358function getKeyframes(value, valueName, target, transition) { 22359 const isTargetAnimatable = isAnimatable(valueName, target); 22360 let keyframes; 22361 if (Array.isArray(target)) { 22362 keyframes = [...target]; 22363 } 22364 else { 22365 keyframes = [null, target]; 22366 } 22367 const defaultOrigin = transition.from !== undefined ? transition.from : value.get(); 22368 let animatableTemplateValue = undefined; 22369 const noneKeyframeIndexes = []; 22370 for (let i = 0; i < keyframes.length; i++) { 22371 /** 22372 * Fill null/wildcard keyframes 22373 */ 22374 if (keyframes[i] === null) { 22375 keyframes[i] = i === 0 ? defaultOrigin : keyframes[i - 1]; 22376 } 22377 if (isNone(keyframes[i])) { 22378 noneKeyframeIndexes.push(i); 22379 } 22380 // TODO: Clean this conditional, it works for now 22381 if (typeof keyframes[i] === "string" && 22382 keyframes[i] !== "none" && 22383 keyframes[i] !== "0") { 22384 animatableTemplateValue = keyframes[i]; 22385 } 22386 } 22387 if (isTargetAnimatable && 22388 noneKeyframeIndexes.length && 22389 animatableTemplateValue) { 22390 for (let i = 0; i < noneKeyframeIndexes.length; i++) { 22391 const index = noneKeyframeIndexes[i]; 22392 keyframes[index] = animatable_none_getAnimatableNone(valueName, animatableTemplateValue); 22393 } 22394 } 22395 return keyframes; 22396} 22397 22398 22399 22400;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/animation/utils/transitions.mjs 22401/** 22402 * Decide whether a transition is defined on a given Transition. 22403 * This filters out orchestration options and returns true 22404 * if any options are left. 22405 */ 22406function isTransitionDefined({ when, delay: _delay, delayChildren, staggerChildren, staggerDirection, repeat, repeatType, repeatDelay, from, elapsed, ...transition }) { 22407 return !!Object.keys(transition).length; 22408} 22409function getValueTransition(transition, key) { 22410 return transition[key] || transition["default"] || transition; 22411} 22412 22413 22414 22415;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/animation/interfaces/motion-value.mjs 22416 22417 22418 22419 22420 22421 22422 22423 22424 22425 22426 22427const animateMotionValue = (valueName, value, target, transition = {}) => { 22428 return (onComplete) => { 22429 const valueTransition = getValueTransition(transition, valueName) || {}; 22430 /** 22431 * Most transition values are currently completely overwritten by value-specific 22432 * transitions. In the future it'd be nicer to blend these transitions. But for now 22433 * delay actually does inherit from the root transition if not value-specific. 22434 */
22435 const delay = valueTransition.delay || transition.delay || 0; 22436 /** 22437 * Elapsed isn't a public transition option but can be passed through from 22438 * optimized appear effects in milliseconds. 22439 */ 22440 let { elapsed = 0 } = transition; 22441 elapsed = elapsed - secondsToMilliseconds(delay); 22442 const keyframes = getKeyframes(value, valueName, target, valueTransition); 22443 /** 22444 * Check if we're able to animate between the start and end keyframes, 22445 * and throw a warning if we're attempting to animate between one that's 22446 * animatable and another that isn't. 22447 */ 22448 const originKeyframe = keyframes[0]; 22449 const targetKeyframe = keyframes[keyframes.length - 1]; 22450 const isOriginAnimatable = isAnimatable(valueName, originKeyframe); 22451 const isTargetAnimatable = isAnimatable(valueName, targetKeyframe); 22452 warning(isOriginAnimatable === isTargetAnimatable, `You are trying to animate ${valueName} from "${originKeyframe}" to "${targetKeyframe}". ${originKeyframe} is not an animatable value - to enable this animation set ${originKeyframe} to a value animatable to ${targetKeyframe} via the \`style\` property.`); 22453 let options = { 22454 keyframes, 22455 velocity: value.getVelocity(), 22456 ease: "easeOut", 22457 ...valueTransition, 22458 delay: -elapsed, 22459 onUpdate: (v) => { 22460 value.set(v); 22461 valueTransition.onUpdate && valueTransition.onUpdate(v); 22462 }, 22463 onComplete: () => { 22464 onComplete(); 22465 valueTransition.onComplete && valueTransition.onComplete(); 22466 }, 22467 }; 22468 /** 22469 * If there's no transition defined for this value, we can generate 22470 * unqiue transition settings for this value. 22471 */ 22472 if (!isTransitionDefined(valueTransition)) { 22473 options = { 22474 ...options, 22475 ...getDefaultTransition(valueName, options), 22476 }; 22477 } 22478 /** 22479 * Both WAAPI and our internal animation functions use durations 22480 * as defined by milliseconds, while our external API defines them 22481 * as seconds. 22482 */ 22483 if (options.duration) { 22484 options.duration = secondsToMilliseconds(options.duration); 22485 } 22486 if (options.repeatDelay) { 22487 options.repeatDelay = secondsToMilliseconds(options.repeatDelay); 22488 } 22489 if (!isOriginAnimatable || 22490 !isTargetAnimatable || 22491 instantAnimationState.current || 22492 valueTransition.type === false) { 22493 /** 22494 * If we can't animate this value, or the global instant animation flag is set, 22495 * or this is simply defined as an instant transition, return an instant transition. 22496 */ 22497 return createInstantAnimation(instantAnimationState.current 22498 ? { ...options, delay: 0 } 22499 : options); 22500 } 22501 /** 22502 * Animate via WAAPI if possible. 22503 */ 22504 if (value.owner && 22505 value.owner.current instanceof HTMLElement && 22506 !value.owner.getProps().onUpdate) { 22507 const acceleratedAnimation = createAcceleratedAnimation(value, valueName, options); 22508 if (acceleratedAnimation) 22509 return acceleratedAnimation; 22510 } 22511 /** 22512 * If we didn't create an accelerated animation, create a JS animation 22513 */ 22514 return animateValue(options); 22515 }; 22516}; 22517 22518 22519 22520;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/value/use-will-change/is.mjs 22521 22522 22523function isWillChangeMotionValue(value) { 22524 return Boolean(isMotionValue(value) && value.add); 22525} 22526 22527 22528 22529;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/utils/is-numerical-string.mjs 22530/** 22531 * Check if value is a numerical string, ie a string that is purely a number eg "100" or "-100.1" 22532 */ 22533const isNumericalString = (v) => /^\-?\d*\.?\d+$/.test(v); 22534 22535 22536 22537;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/utils/array.mjs
vendor: 5,306 bytes, lines 22538-22704
22538function addUniqueItem(arr, item) { 22539 if (arr.indexOf(item) === -1) 22540 arr.push(item); 22541} 22542function removeItem(arr, item) { 22543 const index = arr.indexOf(item); 22544 if (index > -1) 22545 arr.splice(index, 1); 22546} 22547// Adapted from array-move 22548function moveItem([...arr], fromIndex, toIndex) { 22549 const startIndex = fromIndex < 0 ? arr.length + fromIndex : fromIndex; 22550 if (startIndex >= 0 && startIndex < arr.length) { 22551 const endIndex = toIndex < 0 ? arr.length + toIndex : toIndex; 22552 const [item] = arr.splice(fromIndex, 1); 22553 arr.splice(endIndex, 0, item); 22554 } 22555 return arr; 22556} 22557 22558 22559 22560;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/utils/subscription-manager.mjs 22561 22562 22563class SubscriptionManager { 22564 constructor() { 22565 this.subscriptions = []; 22566 } 22567 add(handler) { 22568 addUniqueItem(this.subscriptions, handler); 22569 return () => removeItem(this.subscriptions, handler); 22570 } 22571 notify(a, b, c) { 22572 const numSubscriptions = this.subscriptions.length; 22573 if (!numSubscriptions) 22574 return; 22575 if (numSubscriptions === 1) { 22576 /** 22577 * If there's only a single handler we can just call it without invoking a loop. 22578 */ 22579 this.subscriptions[0](a, b, c); 22580 } 22581 else { 22582 for (let i = 0; i < numSubscriptions; i++) { 22583 /** 22584 * Check whether the handler exists before firing as it's possible 22585 * the subscriptions were modified during this loop running. 22586 */ 22587 const handler = this.subscriptions[i]; 22588 handler && handler(a, b, c); 22589 } 22590 } 22591 } 22592 getSize() { 22593 return this.subscriptions.length; 22594 } 22595 clear() { 22596 this.subscriptions.length = 0; 22597 } 22598} 22599 22600 22601 22602;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/value/index.mjs 22603 22604 22605 22606 22607 22608const isFloat = (value) => { 22609 return !isNaN(parseFloat(value)); 22610}; 22611/** 22612 * `MotionValue` is used to track the state and velocity of motion values. 22613 * 22614 * @public 22615 */ 22616class MotionValue { 22617 /** 22618 * @param init - The initiating value 22619 * @param config - Optional configuration options 22620 * 22621 * - `transformer`: A function to transform incoming values with. 22622 * 22623 * @internal 22624 */ 22625 constructor(init, options = {}) { 22626 /** 22627 * This will be replaced by the build step with the latest version number. 22628 * When MotionValues are provided to motion components, warn if versions are mixed. 22629 */ 22630 this.version = "10.13.0"; 22631 /** 22632 * Duration, in milliseconds, since last updating frame. 22633 * 22634 * @internal 22635 */ 22636 this.timeDelta = 0; 22637 /** 22638 * Timestamp of the last time this `MotionValue` was updated. 22639 * 22640 * @internal 22641 */ 22642 this.lastUpdated = 0; 22643 /** 22644 * Tracks whether this value can output a velocity. Currently this is only true 22645 * if the value is numerical, but we might be able to widen the scope here and support 22646 * other value types. 22647 * 22648 * @internal 22649 */ 22650 this.canTrackVelocity = false; 22651 /** 22652 * An object containing a SubscriptionManager for each active event. 22653 */ 22654 this.events = {}; 22655 this.updateAndNotify = (v, render = true) => { 22656 this.prev = this.current; 22657 this.current = v; 22658 // Update timestamp 22659 const { delta, timestamp } = frameData; 22660 if (this.lastUpdated !== timestamp) { 22661 this.timeDelta = delta; 22662 this.lastUpdated = timestamp; 22663 frame_frame.postRender(this.scheduleVelocityCheck); 22664 } 22665 // Update update subscribers 22666 if (this.prev !== this.current && this.events.change) { 22667 this.events.change.notify(this.current); 22668 } 22669 // Update velocity subscribers 22670 if (this.events.velocityChange) { 22671 this.events.velocityChange.notify(this.getVelocity()); 22672 } 22673 // Update render subscribers 22674 if (render && this.events.renderRequest) { 22675 this.events.renderRequest.notify(this.current); 22676 } 22677 }; 22678 /** 22679 * Schedule a velocity check for the next frame. 22680 * 22681 * This is an instanced and bound function to prevent generating a new 22682 * function once per frame. 22683 * 22684 * @internal 22685 */ 22686 this.scheduleVelocityCheck = () => frame_frame.postRender(this.velocityCheck); 22687 /** 22688 * Updates `prev` with `current` if the value hasn't been updated this frame. 22689 * This ensures velocity calculations return `0`. 22690 * 22691 * This is an instanced and bound function to prevent generating a new 22692 * function once per frame. 22693 * 22694 * @internal 22695 */ 22696 this.velocityCheck = ({ timestamp }) => { 22697 if (timestamp !== this.lastUpdated) { 22698 this.prev = this.current; 22699 if (this.events.velocityChange) { 22700 this.events.velocityChange.notify(this.getVelocity()); 22701 } 22702 } 22703 }; 22704 this.hasAnimated = false;
22705 this.prev = this.current = init; 22706 this.canTrackVelocity = isFloat(this.current); 22707 this.owner = options.owner; 22708 } 22709 /** 22710 * Adds a function that will be notified when the `MotionValue` is updated. 22711 * 22712 * It returns a function that, when called, will cancel the subscription. 22713 * 22714 * When calling `onChange` inside a React component, it should be wrapped with the 22715 * `useEffect` hook. As it returns an unsubscribe function, this should be returned 22716 * from the `useEffect` function to ensure you don't add duplicate subscribers.. 22717 * 22718 * ```jsx 22719 * export const MyComponent = () => { 22720 * const x = useMotionValue(0) 22721 * const y = useMotionValue(0) 22722 * const opacity = useMotionValue(1) 22723 * 22724 * useEffect(() => { 22725 * function updateOpacity() { 22726 * const maxXY = Math.max(x.get(), y.get()) 22727 * const newOpacity = transform(maxXY, [0, 100], [1, 0]) 22728 * opacity.set(newOpacity) 22729 * } 22730 * 22731 * const unsubscribeX = x.on("change", updateOpacity) 22732 * const unsubscribeY = y.on("change", updateOpacity) 22733 * 22734 * return () => { 22735 * unsubscribeX() 22736 * unsubscribeY() 22737 * } 22738 * }, []) 22739 * 22740 * return <motion.div style={{ x }} /> 22741 * } 22742 * ``` 22743 * 22744 * @param subscriber - A function that receives the latest value. 22745 * @returns A function that, when called, will cancel this subscription. 22746 * 22747 * @deprecated 22748 */ 22749 onChange(subscription) { 22750 if (false) {} 22751 return this.on("change", subscription); 22752 } 22753 on(eventName, callback) { 22754 if (!this.events[eventName]) { 22755 this.events[eventName] = new SubscriptionManager(); 22756 } 22757 const unsubscribe = this.events[eventName].add(callback); 22758 if (eventName === "change") { 22759 return () => { 22760 unsubscribe(); 22761 /** 22762 * If we have no more change listeners by the start 22763 * of the next frame, stop active animations. 22764 */ 22765 frame_frame.read(() => { 22766 if (!this.events.change.getSize()) { 22767 this.stop(); 22768 } 22769 }); 22770 }; 22771 } 22772 return unsubscribe; 22773 } 22774 clearListeners() { 22775 for (const eventManagers in this.events) { 22776 this.events[eventManagers].clear(); 22777 } 22778 } 22779 /** 22780 * Attaches a passive effect to the `MotionValue`. 22781 * 22782 * @internal 22783 */ 22784 attach(passiveEffect, stopPassiveEffect) { 22785 this.passiveEffect = passiveEffect; 22786 this.stopPassiveEffect = stopPassiveEffect; 22787 } 22788 /** 22789 * Sets the state of the `MotionValue`. 22790 * 22791 * @remarks 22792 * 22793 * ```jsx 22794 * const x = useMotionValue(0) 22795 * x.set(10) 22796 * ``` 22797 * 22798 * @param latest - Latest value to set. 22799 * @param render - Whether to notify render subscribers. Defaults to `true` 22800 * 22801 * @public 22802 */ 22803 set(v, render = true) { 22804 if (!render || !this.passiveEffect) { 22805 this.updateAndNotify(v, render); 22806 } 22807 else { 22808 this.passiveEffect(v, this.updateAndNotify); 22809 } 22810 } 22811 setWithVelocity(prev, current, delta) { 22812 this.set(current); 22813 this.prev = prev; 22814 this.timeDelta = delta; 22815 } 22816 /** 22817 * Set the state of the `MotionValue`, stopping any active animations, 22818 * effects, and resets velocity to `0`. 22819 */ 22820 jump(v) { 22821 this.updateAndNotify(v); 22822 this.prev = v; 22823 this.stop(); 22824 if (this.stopPassiveEffect) 22825 this.stopPassiveEffect(); 22826 } 22827 /** 22828 * Returns the latest state of `MotionValue` 22829 * 22830 * @returns - The latest state of `MotionValue` 22831 * 22832 * @public 22833 */ 22834 get() { 22835 return this.current; 22836 } 22837 /** 22838 * @public 22839 */ 22840 getPrevious() { 22841 return this.prev; 22842 } 22843 /** 22844 * Returns the latest velocity of `MotionValue` 22845 * 22846 * @returns - The latest velocity of `MotionValue`. Returns `0` if the state is non-numerical. 22847 * 22848 * @public 22849 */ 22850 getVelocity() { 22851 // This could be isFloat(this.prev) && isFloat(this.current), but that would be wasteful 22852 return this.canTrackVelocity 22853 ? // These casts could be avoided if parseFloat would be typed better 22854 velocityPerSecond(parseFloat(this.current) - 22855 parseFloat(this.prev), this.timeDelta) 22856 : 0; 22857 } 22858 /** 22859 * Registers a new animation to control this `MotionValue`. Only one 22860 * animation can drive a `MotionValue` at one time. 22861 * 22862 * ```jsx 22863 * value.start() 22864 * ``` 22865 * 22866 * @param animation - A function that starts the provided animation 22867 * 22868 * @internal 22869 */ 22870 start(startAnimation) { 22871 this.stop(); 22872 return new Promise((resolve) => { 22873 this.hasAnimated = true; 22874 this.animation = startAnimation(resolve); 22875 if (this.events.animationStart) { 22876 this.events.animationStart.notify(); 22877 } 22878 }).then(() => { 22879 if (this.events.animationComplete) { 22880 this.events.animationComplete.notify(); 22881 } 22882 this.clearAnimation(); 22883 }); 22884 } 22885 /** 22886 * Stop the currently active animation. 22887 * 22888 * @public 22889 */ 22890 stop() { 22891 if (this.animation) { 22892 this.animation.stop(); 22893 if (this.events.animationCancel) { 22894 this.events.animationCancel.notify(); 22895 } 22896 } 22897 this.clearAnimation(); 22898 } 22899 /** 22900 * Returns `true` if this value is currently animating. 22901 * 22902 * @public 22903 */ 22904 isAnimating() { 22905 return !!this.animation; 22906 } 22907 clearAnimation() { 22908 delete this.animation; 22909 } 22910 /** 22911 * Destroy and clean up subscribers to this `MotionValue`. 22912 * 22913 * The `MotionValue` hooks like `useMotionValue` and `useTransform` automatically 22914 * handle the lifecycle of the returned `MotionValue`, so this method is only necessary if you've manually 22915 * created a `MotionValue` via the `motionValue` function. 22916 * 22917 * @public 22918 */ 22919 destroy() { 22920 this.clearListeners(); 22921 this.stop(); 22922 if (this.stopPassiveEffect) { 22923 this.stopPassiveEffect(); 22924 } 22925 } 22926} 22927function motionValue(init, options) { 22928 return new MotionValue(init, options); 22929} 22930 22931 22932 22933;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/render/dom/value-types/test.mjs 22934/** 22935 * Tests a provided value against a ValueType 22936 */ 22937const testValueType = (v) => (type) => type.test(v); 22938 22939 22940 22941;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/render/dom/value-types/type-auto.mjs 22942/** 22943 * ValueType for "auto" 22944 */ 22945const auto = { 22946 test: (v) => v === "auto", 22947 parse: (v) => v, 22948}; 22949 22950 22951 22952;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/render/dom/value-types/dimensions.mjs 22953 22954 22955 22956 22957 22958/** 22959 * A list of value types commonly used for dimensions 22960 */ 22961const dimensionValueTypes = [number, px, percent, degrees, vw, vh, auto]; 22962/** 22963 * Tests a dimensional value against the list of dimension ValueTypes 22964 */ 22965const findDimensionValueType = (v) => dimensionValueTypes.find(testValueType(v)); 22966 22967 22968 22969;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/render/dom/value-types/find.mjs 22970 22971 22972 22973 22974 22975/** 22976 * A list of all ValueTypes 22977 */ 22978const valueTypes = [...dimensionValueTypes, color, complex]; 22979/** 22980 * Tests a value against the list of ValueTypes 22981 */ 22982const findValueType = (v) => valueTypes.find(testValueType(v)); 22983 22984 22985 22986;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/render/utils/setters.mjs 22987 22988 22989 22990 22991 22992 22993 22994 22995 22996/** 22997 * Set VisualElement's MotionValue, creating a new MotionValue for it if 22998 * it doesn't exist. 22999 */ 23000function setMotionValue(visualElement, key, value) { 23001 if (visualElement.hasValue(key)) { 23002 visualElement.getValue(key).set(value); 23003 } 23004 else { 23005 visualElement.addValue(key, motionValue(value)); 23006 } 23007} 23008function setTarget(visualElement, definition) { 23009 const resolved = resolveVariant(visualElement, definition); 23010 let { transitionEnd = {}, transition = {}, ...target } = resolved ? visualElement.makeTargetAnimatable(resolved, false) : {}; 23011 target = { ...target, ...transitionEnd }; 23012 for (const key in target) { 23013 const value = resolveFinalValueInKeyframes(target[key]); 23014 setMotionValue(visualElement, key, value); 23015 } 23016} 23017function setVariants(visualElement, variantLabels) { 23018 const reversedLabels = [...variantLabels].reverse();
vendor: 2,620 bytes, lines 23019-23080
23019 reversedLabels.forEach((key) => { 23020 const variant = visualElement.getVariant(key); 23021 variant && setTarget(visualElement, variant); 23022 if (visualElement.variantChildren) { 23023 visualElement.variantChildren.forEach((child) => { 23024 setVariants(child, variantLabels); 23025 }); 23026 } 23027 }); 23028} 23029function setValues(visualElement, definition) { 23030 if (Array.isArray(definition)) { 23031 return setVariants(visualElement, definition); 23032 } 23033 else if (typeof definition === "string") { 23034 return setVariants(visualElement, [definition]); 23035 } 23036 else { 23037 setTarget(visualElement, definition); 23038 } 23039} 23040function checkTargetForNewValues(visualElement, target, origin) { 23041 var _a, _b; 23042 const newValueKeys = Object.keys(target).filter((key) => !visualElement.hasValue(key)); 23043 const numNewValues = newValueKeys.length; 23044 if (!numNewValues) 23045 return; 23046 for (let i = 0; i < numNewValues; i++) { 23047 const key = newValueKeys[i]; 23048 const targetValue = target[key]; 23049 let value = null; 23050 /** 23051 * If the target is a series of keyframes, we can use the first value 23052 * in the array. If this first value is null, we'll still need to read from the DOM. 23053 */ 23054 if (Array.isArray(targetValue)) { 23055 value = targetValue[0]; 23056 } 23057 /** 23058 * If the target isn't keyframes, or the first keyframe was null, we need to 23059 * first check if an origin value was explicitly defined in the transition as "from", 23060 * if not read the value from the DOM. As an absolute fallback, take the defined target value. 23061 */ 23062 if (value === null) { 23063 value = (_b = (_a = origin[key]) !== null && _a !== void 0 ? _a : visualElement.readValue(key)) !== null && _b !== void 0 ? _b : target[key]; 23064 } 23065 /** 23066 * If value is still undefined or null, ignore it. Preferably this would throw, 23067 * but this was causing issues in Framer. 23068 */ 23069 if (value === undefined || value === null) 23070 continue; 23071 if (typeof value === "string" && 23072 (isNumericalString(value) || isZeroValueString(value))) { 23073 // If this is a number read as a string, ie "0" or "200", convert it to a number 23074 value = parseFloat(value); 23075 } 23076 else if (!findValueType(value) && complex.test(targetValue)) { 23077 value = animatable_none_getAnimatableNone(key, targetValue); 23078 } 23079 visualElement.addValue(key, motionValue(value, { owner: visualElement })); 23080 if (origin[key] === undefined) {
23081 origin[key] = value; 23082 } 23083 if (value !== null) 23084 visualElement.setBaseTarget(key, value); 23085 } 23086} 23087function getOriginFromTransition(key, transition) { 23088 if (!transition) 23089 return; 23090 const valueTransition = transition[key] || transition["default"] || transition; 23091 return valueTransition.from; 23092} 23093function getOrigin(target, transition, visualElement) { 23094 const origin = {}; 23095 for (const key in target) { 23096 const transitionOrigin = getOriginFromTransition(key, transition); 23097 if (transitionOrigin !== undefined) { 23098 origin[key] = transitionOrigin; 23099 } 23100 else { 23101 const value = visualElement.getValue(key); 23102 if (value) { 23103 origin[key] = value.get(); 23104 } 23105 } 23106 } 23107 return origin; 23108} 23109 23110 23111 23112;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/animation/interfaces/visual-element-target.mjs 23113 23114 23115 23116 23117 23118 23119 23120/** 23121 * Decide whether we should block this animation. Previously, we achieved this 23122 * just by checking whether the key was listed in protectedKeys, but this 23123 * posed problems if an animation was triggered by afterChildren and protectedKeys 23124 * had been set to true in the meantime. 23125 */ 23126function shouldBlockAnimation({ protectedKeys, needsAnimating }, key) { 23127 const shouldBlock = protectedKeys.hasOwnProperty(key) && needsAnimating[key] !== true; 23128 needsAnimating[key] = false; 23129 return shouldBlock; 23130} 23131function animateTarget(visualElement, definition, { delay = 0, transitionOverride, type } = {}) { 23132 let { transition = visualElement.getDefaultTransition(), transitionEnd, ...target } = visualElement.makeTargetAnimatable(definition); 23133 const willChange = visualElement.getValue("willChange"); 23134 if (transitionOverride) 23135 transition = transitionOverride; 23136 const animations = []; 23137 const animationTypeState = type && 23138 visualElement.animationState && 23139 visualElement.animationState.getState()[type]; 23140 for (const key in target) { 23141 const value = visualElement.getValue(key); 23142 const valueTarget = target[key]; 23143 if (!value || 23144 valueTarget === undefined || 23145 (animationTypeState && 23146 shouldBlockAnimation(animationTypeState, key))) { 23147 continue; 23148 } 23149 const valueTransition = { delay, elapsed: 0, ...transition }; 23150 /** 23151 * If this is the first time a value is being animated, check 23152 * to see if we're handling off from an existing animation. 23153 */ 23154 if (window.HandoffAppearAnimations && !value.hasAnimated) { 23155 const appearId = visualElement.getProps()[optimizedAppearDataAttribute]; 23156 if (appearId) { 23157 valueTransition.elapsed = window.HandoffAppearAnimations(appearId, key, value, frame_frame); 23158 } 23159 } 23160 value.start(animateMotionValue(key, value, valueTarget, visualElement.shouldReduceMotion && transformProps.has(key) 23161 ? { type: false } 23162 : valueTransition)); 23163 const animation = value.animation; 23164 if (isWillChangeMotionValue(willChange)) { 23165 willChange.add(key); 23166 animation.then(() => willChange.remove(key)); 23167 } 23168 animations.push(animation); 23169 } 23170 if (transitionEnd) { 23171 Promise.all(animations).then(() => { 23172 transitionEnd && setTarget(visualElement, transitionEnd); 23173 }); 23174 } 23175 return animations; 23176} 23177 23178 23179 23180;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/animation/interfaces/visual-element-variant.mjs 23181 23182 23183 23184function animateVariant(visualElement, variant, options = {}) { 23185 const resolved = resolveVariant(visualElement, variant, options.custom); 23186 let { transition = visualElement.getDefaultTransition() || {} } = resolved || {}; 23187 if (options.transitionOverride) { 23188 transition = options.transitionOverride; 23189 } 23190 /** 23191 * If we have a variant, create a callback that runs it as an animation. 23192 * Otherwise, we resolve a Promise immediately for a composable no-op. 23193 */ 23194 const getAnimation = resolved 23195 ? () => Promise.all(animateTarget(visualElement, resolved, options)) 23196 : () => Promise.resolve(); 23197 /** 23198 * If we have children, create a callback that runs all their animations. 23199 * Otherwise, we resolve a Promise immediately for a composable no-op. 23200 */ 23201 const getChildAnimations = visualElement.variantChildren && visualElement.variantChildren.size 23202 ? (forwardDelay = 0) => { 23203 const { delayChildren = 0, staggerChildren, staggerDirection, } = transition; 23204 return animateChildren(visualElement, variant, delayChildren + forwardDelay, staggerChildren, staggerDirection, options); 23205 } 23206 : () => Promise.resolve(); 23207 /** 23208 * If the transition explicitly defines a "when" option, we need to resolve either 23209 * this animation or all children animations before playing the other. 23210 */ 23211 const { when } = transition; 23212 if (when) { 23213 const [first, last] = when === "beforeChildren" 23214 ? [getAnimation, getChildAnimations] 23215 : [getChildAnimations, getAnimation]; 23216 return first().then(() => last()); 23217 } 23218 else { 23219 return Promise.all([getAnimation(), getChildAnimations(options.delay)]); 23220 } 23221} 23222function animateChildren(visualElement, variant, delayChildren = 0, staggerChildren = 0, staggerDirection = 1, options) { 23223 const animations = []; 23224 const maxStaggerDuration = (visualElement.variantChildren.size - 1) * staggerChildren; 23225 const generateStaggerDuration = staggerDirection === 1 23226 ? (i = 0) => i * staggerChildren 23227 : (i = 0) => maxStaggerDuration - i * staggerChildren; 23228 Array.from(visualElement.variantChildren) 23229 .sort(sortByTreeOrder) 23230 .forEach((child, i) => { 23231 child.notify("AnimationStart", variant); 23232 animations.push(animateVariant(child, variant, { 23233 ...options, 23234 delay: delayChildren + generateStaggerDuration(i), 23235 }).then(() => child.notify("AnimationComplete", variant))); 23236 }); 23237 return Promise.all(animations); 23238} 23239function sortByTreeOrder(a, b) { 23240 return a.sortNodePosition(b); 23241} 23242 23243 23244 23245;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/animation/interfaces/visual-element.mjs 23246 23247 23248 23249 23250function animateVisualElement(visualElement, definition, options = {}) { 23251 visualElement.notify("AnimationStart", definition); 23252 let animation; 23253 if (Array.isArray(definition)) { 23254 const animations = definition.map((variant) => animateVariant(visualElement, variant, options)); 23255 animation = Promise.all(animations); 23256 } 23257 else if (typeof definition === "string") { 23258 animation = animateVariant(visualElement, definition, options); 23259 } 23260 else { 23261 const resolvedDefinition = typeof definition === "function" 23262 ? resolveVariant(visualElement, definition, options.custom) 23263 : definition; 23264 animation = Promise.all(animateTarget(visualElement, resolvedDefinition, options)); 23265 } 23266 return animation.then(() => visualElement.notify("AnimationComplete", definition)); 23267} 23268 23269 23270 23271;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/render/utils/animation-state.mjs 23272 23273 23274 23275 23276 23277 23278 23279 23280const reversePriorityOrder = [...variantPriorityOrder].reverse(); 23281const numAnimationTypes = variantPriorityOrder.length; 23282function animateList(visualElement) { 23283 return (animations) => Promise.all(animations.map(({ animation, options }) => animateVisualElement(visualElement, animation, options))); 23284} 23285function createAnimationState(visualElement) { 23286 let animate = animateList(visualElement); 23287 const state = createState(); 23288 let isInitialRender = true; 23289 /** 23290 * This function will be used to reduce the animation definitions for 23291 * each active animation type into an object of resolved values for it. 23292 */
vendor: 7,898 bytes, lines 23293-23451
23293 const buildResolvedTypeValues = (acc, definition) => { 23294 const resolved = resolveVariant(visualElement, definition); 23295 if (resolved) { 23296 const { transition, transitionEnd, ...target } = resolved; 23297 acc = { ...acc, ...target, ...transitionEnd }; 23298 } 23299 return acc; 23300 }; 23301 /** 23302 * This just allows us to inject mocked animation functions 23303 * @internal 23304 */ 23305 function setAnimateFunction(makeAnimator) { 23306 animate = makeAnimator(visualElement); 23307 } 23308 /** 23309 * When we receive new props, we need to: 23310 * 1. Create a list of protected keys for each type. This is a directory of 23311 * value keys that are currently being "handled" by types of a higher priority 23312 * so that whenever an animation is played of a given type, these values are 23313 * protected from being animated. 23314 * 2. Determine if an animation type needs animating. 23315 * 3. Determine if any values have been removed from a type and figure out 23316 * what to animate those to. 23317 */ 23318 function animateChanges(options, changedActiveType) { 23319 const props = visualElement.getProps(); 23320 const context = visualElement.getVariantContext(true) || {}; 23321 /** 23322 * A list of animations that we'll build into as we iterate through the animation 23323 * types. This will get executed at the end of the function. 23324 */ 23325 const animations = []; 23326 /** 23327 * Keep track of which values have been removed. Then, as we hit lower priority 23328 * animation types, we can check if they contain removed values and animate to that. 23329 */ 23330 const removedKeys = new Set(); 23331 /** 23332 * A dictionary of all encountered keys. This is an object to let us build into and 23333 * copy it without iteration. Each time we hit an animation type we set its protected 23334 * keys - the keys its not allowed to animate - to the latest version of this object. 23335 */ 23336 let encounteredKeys = {}; 23337 /** 23338 * If a variant has been removed at a given index, and this component is controlling 23339 * variant animations, we want to ensure lower-priority variants are forced to animate. 23340 */ 23341 let removedVariantIndex = Infinity; 23342 /** 23343 * Iterate through all animation types in reverse priority order. For each, we want to 23344 * detect which values it's handling and whether or not they've changed (and therefore 23345 * need to be animated). If any values have been removed, we want to detect those in 23346 * lower priority props and flag for animation. 23347 */ 23348 for (let i = 0; i < numAnimationTypes; i++) { 23349 const type = reversePriorityOrder[i]; 23350 const typeState = state[type]; 23351 const prop = props[type] !== undefined ? props[type] : context[type]; 23352 const propIsVariant = isVariantLabel(prop); 23353 /** 23354 * If this type has *just* changed isActive status, set activeDelta 23355 * to that status. Otherwise set to null. 23356 */ 23357 const activeDelta = type === changedActiveType ? typeState.isActive : null; 23358 if (activeDelta === false) 23359 removedVariantIndex = i; 23360 /** 23361 * If this prop is an inherited variant, rather than been set directly on the 23362 * component itself, we want to make sure we allow the parent to trigger animations. 23363 * 23364 * TODO: Can probably change this to a !isControllingVariants check 23365 */ 23366 let isInherited = prop === context[type] && prop !== props[type] && propIsVariant; 23367 /** 23368 * 23369 */ 23370 if (isInherited && 23371 isInitialRender && 23372 visualElement.manuallyAnimateOnMount) { 23373 isInherited = false; 23374 } 23375 /** 23376 * Set all encountered keys so far as the protected keys for this type. This will 23377 * be any key that has been animated or otherwise handled by active, higher-priortiy types. 23378 */ 23379 typeState.protectedKeys = { ...encounteredKeys }; 23380 // Check if we can skip analysing this prop early 23381 if ( 23382 // If it isn't active and hasn't *just* been set as inactive 23383 (!typeState.isActive && activeDelta === null) || 23384 // If we didn't and don't have any defined prop for this animation type 23385 (!prop && !typeState.prevProp) || 23386 // Or if the prop doesn't define an animation 23387 isAnimationControls(prop) || 23388 typeof prop === "boolean") { 23389 continue; 23390 } 23391 /** 23392 * As we go look through the values defined on this type, if we detect 23393 * a changed value or a value that was removed in a higher priority, we set 23394 * this to true and add this prop to the animation list. 23395 */ 23396 const variantDidChange = checkVariantsDidChange(typeState.prevProp, prop); 23397 let shouldAnimateType = variantDidChange || 23398 // If we're making this variant active, we want to always make it active 23399 (type === changedActiveType && 23400 typeState.isActive && 23401 !isInherited && 23402 propIsVariant) || 23403 // If we removed a higher-priority variant (i is in reverse order) 23404 (i > removedVariantIndex && propIsVariant); 23405 /** 23406 * As animations can be set as variant lists, variants or target objects, we 23407 * coerce everything to an array if it isn't one already 23408 */ 23409 const definitionList = Array.isArray(prop) ? prop : [prop]; 23410 /** 23411 * Build an object of all the resolved values. We'll use this in the subsequent 23412 * animateChanges calls to determine whether a value has changed. 23413 */ 23414 let resolvedValues = definitionList.reduce(buildResolvedTypeValues, {}); 23415 if (activeDelta === false) 23416 resolvedValues = {}; 23417 /** 23418 * Now we need to loop through all the keys in the prev prop and this prop, 23419 * and decide: 23420 * 1. If the value has changed, and needs animating 23421 * 2. If it has been removed, and needs adding to the removedKeys set 23422 * 3. If it has been removed in a higher priority type and needs animating 23423 * 4. If it hasn't been removed in a higher priority but hasn't changed, and 23424 * needs adding to the type's protectedKeys list. 23425 */ 23426 const { prevResolvedValues = {} } = typeState; 23427 const allKeys = { 23428 ...prevResolvedValues, 23429 ...resolvedValues, 23430 }; 23431 const markToAnimate = (key) => { 23432 shouldAnimateType = true; 23433 removedKeys.delete(key); 23434 typeState.needsAnimating[key] = true; 23435 }; 23436 for (const key in allKeys) { 23437 const next = resolvedValues[key]; 23438 const prev = prevResolvedValues[key]; 23439 // If we've already handled this we can just skip ahead 23440 if (encounteredKeys.hasOwnProperty(key)) 23441 continue; 23442 /** 23443 * If the value has changed, we probably want to animate it. 23444 */ 23445 if (next !== prev) { 23446 /** 23447 * If both values are keyframes, we need to shallow compare them to 23448 * detect whether any value has changed. If it has, we animate it. 23449 */ 23450 if (isKeyframesTarget(next) && isKeyframesTarget(prev)) { 23451 if (!shallowCompare(next, prev) || variantDidChange) {
23452 markToAnimate(key); 23453 } 23454 else { 23455 /** 23456 * If it hasn't changed, we want to ensure it doesn't animate by 23457 * adding it to the list of protected keys. 23458 */ 23459 typeState.protectedKeys[key] = true; 23460 } 23461 } 23462 else if (next !== undefined) { 23463 // If next is defined and doesn't equal prev, it needs animating 23464 markToAnimate(key); 23465 } 23466 else { 23467 // If it's undefined, it's been removed. 23468 removedKeys.add(key); 23469 } 23470 } 23471 else if (next !== undefined && removedKeys.has(key)) { 23472 /** 23473 * If next hasn't changed and it isn't undefined, we want to check if it's 23474 * been removed by a higher priority 23475 */ 23476 markToAnimate(key); 23477 } 23478 else { 23479 /** 23480 * If it hasn't changed, we add it to the list of protected values 23481 * to ensure it doesn't get animated. 23482 */ 23483 typeState.protectedKeys[key] = true; 23484 } 23485 } 23486 /** 23487 * Update the typeState so next time animateChanges is called we can compare the 23488 * latest prop and resolvedValues to these. 23489 */ 23490 typeState.prevProp = prop; 23491 typeState.prevResolvedValues = resolvedValues; 23492 /** 23493 * 23494 */ 23495 if (typeState.isActive) { 23496 encounteredKeys = { ...encounteredKeys, ...resolvedValues }; 23497 } 23498 if (isInitialRender && visualElement.blockInitialAnimation) { 23499 shouldAnimateType = false;
vendor: 1,412 bytes, lines 23500-23534
23500 } 23501 /** 23502 * If this is an inherited prop we want to hard-block animations 23503 * TODO: Test as this should probably still handle animations triggered 23504 * by removed values? 23505 */ 23506 if (shouldAnimateType && !isInherited) { 23507 animations.push(...definitionList.map((animation) => ({ 23508 animation: animation, 23509 options: { type, ...options }, 23510 }))); 23511 } 23512 } 23513 /** 23514 * If there are some removed value that haven't been dealt with, 23515 * we need to create a new animation that falls back either to the value 23516 * defined in the style prop, or the last read value. 23517 */ 23518 if (removedKeys.size) { 23519 const fallbackAnimation = {}; 23520 removedKeys.forEach((key) => { 23521 const fallbackTarget = visualElement.getBaseTarget(key); 23522 if (fallbackTarget !== undefined) { 23523 fallbackAnimation[key] = fallbackTarget; 23524 } 23525 }); 23526 animations.push({ animation: fallbackAnimation }); 23527 } 23528 let shouldAnimate = Boolean(animations.length); 23529 if (isInitialRender && 23530 props.initial === false && 23531 !visualElement.manuallyAnimateOnMount) { 23532 shouldAnimate = false; 23533 } 23534 isInitialRender = false;
vendor: 20,719 bytes, lines 23535-24162
23535 return shouldAnimate ? animate(animations) : Promise.resolve(); 23536 } 23537 /** 23538 * Change whether a certain animation type is active. 23539 */ 23540 function setActive(type, isActive, options) { 23541 var _a; 23542 // If the active state hasn't changed, we can safely do nothing here 23543 if (state[type].isActive === isActive) 23544 return Promise.resolve(); 23545 // Propagate active change to children 23546 (_a = visualElement.variantChildren) === null || _a === void 0 ? void 0 : _a.forEach((child) => { var _a; return (_a = child.animationState) === null || _a === void 0 ? void 0 : _a.setActive(type, isActive); }); 23547 state[type].isActive = isActive; 23548 const animations = animateChanges(options, type); 23549 for (const key in state) { 23550 state[key].protectedKeys = {}; 23551 } 23552 return animations; 23553 } 23554 return { 23555 animateChanges, 23556 setActive, 23557 setAnimateFunction, 23558 getState: () => state, 23559 }; 23560} 23561function checkVariantsDidChange(prev, next) { 23562 if (typeof next === "string") { 23563 return next !== prev; 23564 } 23565 else if (Array.isArray(next)) { 23566 return !shallowCompare(next, prev); 23567 } 23568 return false; 23569} 23570function createTypeState(isActive = false) { 23571 return { 23572 isActive, 23573 protectedKeys: {}, 23574 needsAnimating: {}, 23575 prevResolvedValues: {}, 23576 }; 23577} 23578function createState() { 23579 return { 23580 animate: createTypeState(true), 23581 whileInView: createTypeState(), 23582 whileHover: createTypeState(), 23583 whileTap: createTypeState(), 23584 whileDrag: createTypeState(), 23585 whileFocus: createTypeState(), 23586 exit: createTypeState(), 23587 }; 23588} 23589 23590 23591 23592;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/motion/features/animation/index.mjs 23593 23594 23595 23596 23597class AnimationFeature extends Feature { 23598 /** 23599 * We dynamically generate the AnimationState manager as it contains a reference 23600 * to the underlying animation library. We only want to load that if we load this, 23601 * so people can optionally code split it out using the `m` component. 23602 */ 23603 constructor(node) { 23604 super(node); 23605 node.animationState || (node.animationState = createAnimationState(node)); 23606 } 23607 updateAnimationControlsSubscription() { 23608 const { animate } = this.node.getProps(); 23609 this.unmount(); 23610 if (isAnimationControls(animate)) { 23611 this.unmount = animate.subscribe(this.node); 23612 } 23613 } 23614 /** 23615 * Subscribe any provided AnimationControls to the component's VisualElement 23616 */ 23617 mount() { 23618 this.updateAnimationControlsSubscription(); 23619 } 23620 update() { 23621 const { animate } = this.node.getProps(); 23622 const { animate: prevAnimate } = this.node.prevProps || {}; 23623 if (animate !== prevAnimate) { 23624 this.updateAnimationControlsSubscription(); 23625 } 23626 } 23627 unmount() { } 23628} 23629 23630 23631 23632;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/motion/features/animation/exit.mjs 23633 23634 23635let id = 0; 23636class ExitAnimationFeature extends Feature { 23637 constructor() { 23638 super(...arguments); 23639 this.id = id++; 23640 } 23641 update() { 23642 if (!this.node.presenceContext) 23643 return; 23644 const { isPresent, onExitComplete, custom } = this.node.presenceContext; 23645 const { isPresent: prevIsPresent } = this.node.prevPresenceContext || {}; 23646 if (!this.node.animationState || isPresent === prevIsPresent) { 23647 return; 23648 } 23649 const exitAnimation = this.node.animationState.setActive("exit", !isPresent, { custom: custom !== null && custom !== void 0 ? custom : this.node.getProps().custom }); 23650 if (onExitComplete && !isPresent) { 23651 exitAnimation.then(() => onExitComplete(this.id)); 23652 } 23653 } 23654 mount() { 23655 const { register } = this.node.presenceContext || {}; 23656 if (register) { 23657 this.unmount = register(this.id); 23658 } 23659 } 23660 unmount() { } 23661} 23662 23663 23664 23665;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/motion/features/animations.mjs 23666 23667 23668 23669const animations = { 23670 animation: { 23671 Feature: AnimationFeature, 23672 }, 23673 exit: { 23674 Feature: ExitAnimationFeature, 23675 }, 23676}; 23677 23678 23679 23680;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/utils/distance.mjs 23681const distance = (a, b) => Math.abs(a - b); 23682function distance2D(a, b) { 23683 // Multi-dimensional 23684 const xDelta = distance(a.x, b.x); 23685 const yDelta = distance(a.y, b.y); 23686 return Math.sqrt(xDelta ** 2 + yDelta ** 2); 23687} 23688 23689 23690 23691;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/gestures/pan/PanSession.mjs 23692 23693 23694 23695 23696 23697 23698 23699 23700/** 23701 * @internal 23702 */ 23703class PanSession { 23704 constructor(event, handlers, { transformPagePoint } = {}) { 23705 /** 23706 * @internal 23707 */ 23708 this.startEvent = null; 23709 /** 23710 * @internal 23711 */ 23712 this.lastMoveEvent = null; 23713 /** 23714 * @internal 23715 */ 23716 this.lastMoveEventInfo = null; 23717 /** 23718 * @internal 23719 */ 23720 this.handlers = {}; 23721 this.updatePoint = () => { 23722 if (!(this.lastMoveEvent && this.lastMoveEventInfo)) 23723 return; 23724 const info = getPanInfo(this.lastMoveEventInfo, this.history); 23725 const isPanStarted = this.startEvent !== null; 23726 // Only start panning if the offset is larger than 3 pixels. If we make it 23727 // any larger than this we'll want to reset the pointer history 23728 // on the first update to avoid visual snapping to the cursoe. 23729 const isDistancePastThreshold = distance2D(info.offset, { x: 0, y: 0 }) >= 3; 23730 if (!isPanStarted && !isDistancePastThreshold) 23731 return; 23732 const { point } = info; 23733 const { timestamp } = frameData; 23734 this.history.push({ ...point, timestamp }); 23735 const { onStart, onMove } = this.handlers; 23736 if (!isPanStarted) { 23737 onStart && onStart(this.lastMoveEvent, info); 23738 this.startEvent = this.lastMoveEvent; 23739 } 23740 onMove && onMove(this.lastMoveEvent, info); 23741 }; 23742 this.handlePointerMove = (event, info) => { 23743 this.lastMoveEvent = event; 23744 this.lastMoveEventInfo = transformPoint(info, this.transformPagePoint); 23745 // Throttle mouse move event to once per frame 23746 frame_frame.update(this.updatePoint, true); 23747 }; 23748 this.handlePointerUp = (event, info) => { 23749 this.end(); 23750 if (!(this.lastMoveEvent && this.lastMoveEventInfo)) 23751 return; 23752 const { onEnd, onSessionEnd } = this.handlers; 23753 const panInfo = getPanInfo(event.type === "pointercancel" 23754 ? this.lastMoveEventInfo 23755 : transformPoint(info, this.transformPagePoint), this.history); 23756 if (this.startEvent && onEnd) { 23757 onEnd(event, panInfo); 23758 } 23759 onSessionEnd && onSessionEnd(event, panInfo); 23760 }; 23761 // If we have more than one touch, don't start detecting this gesture 23762 if (!isPrimaryPointer(event)) 23763 return; 23764 this.handlers = handlers; 23765 this.transformPagePoint = transformPagePoint; 23766 const info = extractEventInfo(event); 23767 const initialInfo = transformPoint(info, this.transformPagePoint); 23768 const { point } = initialInfo; 23769 const { timestamp } = frameData; 23770 this.history = [{ ...point, timestamp }]; 23771 const { onSessionStart } = handlers; 23772 onSessionStart && 23773 onSessionStart(event, getPanInfo(initialInfo, this.history)); 23774 this.removeListeners = pipe(addPointerEvent(window, "pointermove", this.handlePointerMove), addPointerEvent(window, "pointerup", this.handlePointerUp), addPointerEvent(window, "pointercancel", this.handlePointerUp)); 23775 } 23776 updateHandlers(handlers) { 23777 this.handlers = handlers; 23778 } 23779 end() { 23780 this.removeListeners && this.removeListeners(); 23781 cancelFrame(this.updatePoint); 23782 } 23783} 23784function transformPoint(info, transformPagePoint) { 23785 return transformPagePoint ? { point: transformPagePoint(info.point) } : info; 23786} 23787function subtractPoint(a, b) { 23788 return { x: a.x - b.x, y: a.y - b.y }; 23789} 23790function getPanInfo({ point }, history) { 23791 return { 23792 point, 23793 delta: subtractPoint(point, lastDevicePoint(history)), 23794 offset: subtractPoint(point, startDevicePoint(history)), 23795 velocity: PanSession_getVelocity(history, 0.1), 23796 }; 23797} 23798function startDevicePoint(history) { 23799 return history[0]; 23800} 23801function lastDevicePoint(history) { 23802 return history[history.length - 1]; 23803} 23804function PanSession_getVelocity(history, timeDelta) { 23805 if (history.length < 2) { 23806 return { x: 0, y: 0 }; 23807 } 23808 let i = history.length - 1; 23809 let timestampedPoint = null; 23810 const lastPoint = lastDevicePoint(history); 23811 while (i >= 0) { 23812 timestampedPoint = history[i]; 23813 if (lastPoint.timestamp - timestampedPoint.timestamp > 23814 secondsToMilliseconds(timeDelta)) { 23815 break; 23816 } 23817 i--; 23818 } 23819 if (!timestampedPoint) { 23820 return { x: 0, y: 0 }; 23821 } 23822 const time = millisecondsToSeconds(lastPoint.timestamp - timestampedPoint.timestamp); 23823 if (time === 0) { 23824 return { x: 0, y: 0 }; 23825 } 23826 const currentVelocity = { 23827 x: (lastPoint.x - timestampedPoint.x) / time, 23828 y: (lastPoint.y - timestampedPoint.y) / time, 23829 }; 23830 if (currentVelocity.x === Infinity) { 23831 currentVelocity.x = 0; 23832 } 23833 if (currentVelocity.y === Infinity) { 23834 currentVelocity.y = 0; 23835 } 23836 return currentVelocity; 23837} 23838 23839 23840 23841;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/projection/geometry/delta-calc.mjs 23842 23843 23844function calcLength(axis) { 23845 return axis.max - axis.min; 23846} 23847function isNear(value, target = 0, maxDistance = 0.01) { 23848 return Math.abs(value - target) <= maxDistance; 23849} 23850function calcAxisDelta(delta, source, target, origin = 0.5) { 23851 delta.origin = origin; 23852 delta.originPoint = mix(source.min, source.max, delta.origin); 23853 delta.scale = calcLength(target) / calcLength(source); 23854 if (isNear(delta.scale, 1, 0.0001) || isNaN(delta.scale)) 23855 delta.scale = 1; 23856 delta.translate = 23857 mix(target.min, target.max, delta.origin) - delta.originPoint; 23858 if (isNear(delta.translate) || isNaN(delta.translate)) 23859 delta.translate = 0; 23860} 23861function calcBoxDelta(delta, source, target, origin) { 23862 calcAxisDelta(delta.x, source.x, target.x, origin ? origin.originX : undefined); 23863 calcAxisDelta(delta.y, source.y, target.y, origin ? origin.originY : undefined); 23864} 23865function calcRelativeAxis(target, relative, parent) { 23866 target.min = parent.min + relative.min; 23867 target.max = target.min + calcLength(relative); 23868} 23869function calcRelativeBox(target, relative, parent) { 23870 calcRelativeAxis(target.x, relative.x, parent.x); 23871 calcRelativeAxis(target.y, relative.y, parent.y); 23872} 23873function calcRelativeAxisPosition(target, layout, parent) { 23874 target.min = layout.min - parent.min; 23875 target.max = target.min + calcLength(layout); 23876} 23877function calcRelativePosition(target, layout, parent) { 23878 calcRelativeAxisPosition(target.x, layout.x, parent.x); 23879 calcRelativeAxisPosition(target.y, layout.y, parent.y); 23880} 23881 23882 23883 23884;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/gestures/drag/utils/constraints.mjs 23885 23886 23887 23888 23889 23890/** 23891 * Apply constraints to a point. These constraints are both physical along an 23892 * axis, and an elastic factor that determines how much to constrain the point 23893 * by if it does lie outside the defined parameters. 23894 */ 23895function applyConstraints(point, { min, max }, elastic) { 23896 if (min !== undefined && point < min) { 23897 // If we have a min point defined, and this is outside of that, constrain 23898 point = elastic ? mix(min, point, elastic.min) : Math.max(point, min); 23899 } 23900 else if (max !== undefined && point > max) { 23901 // If we have a max point defined, and this is outside of that, constrain 23902 point = elastic ? mix(max, point, elastic.max) : Math.min(point, max); 23903 } 23904 return point; 23905} 23906/** 23907 * Calculate constraints in terms of the viewport when defined relatively to the 23908 * measured axis. This is measured from the nearest edge, so a max constraint of 200 23909 * on an axis with a max value of 300 would return a constraint of 500 - axis length 23910 */ 23911function calcRelativeAxisConstraints(axis, min, max) { 23912 return { 23913 min: min !== undefined ? axis.min + min : undefined, 23914 max: max !== undefined 23915 ? axis.max + max - (axis.max - axis.min) 23916 : undefined, 23917 }; 23918} 23919/** 23920 * Calculate constraints in terms of the viewport when 23921 * defined relatively to the measured bounding box. 23922 */ 23923function calcRelativeConstraints(layoutBox, { top, left, bottom, right }) { 23924 return { 23925 x: calcRelativeAxisConstraints(layoutBox.x, left, right), 23926 y: calcRelativeAxisConstraints(layoutBox.y, top, bottom), 23927 }; 23928} 23929/** 23930 * Calculate viewport constraints when defined as another viewport-relative axis 23931 */ 23932function calcViewportAxisConstraints(layoutAxis, constraintsAxis) { 23933 let min = constraintsAxis.min - layoutAxis.min; 23934 let max = constraintsAxis.max - layoutAxis.max; 23935 // If the constraints axis is actually smaller than the layout axis then we can 23936 // flip the constraints 23937 if (constraintsAxis.max - constraintsAxis.min < 23938 layoutAxis.max - layoutAxis.min) { 23939 [min, max] = [max, min]; 23940 } 23941 return { min, max }; 23942} 23943/** 23944 * Calculate viewport constraints when defined as another viewport-relative box 23945 */ 23946function calcViewportConstraints(layoutBox, constraintsBox) { 23947 return { 23948 x: calcViewportAxisConstraints(layoutBox.x, constraintsBox.x), 23949 y: calcViewportAxisConstraints(layoutBox.y, constraintsBox.y), 23950 }; 23951} 23952/** 23953 * Calculate a transform origin relative to the source axis, between 0-1, that results 23954 * in an asthetically pleasing scale/transform needed to project from source to target. 23955 */ 23956function constraints_calcOrigin(source, target) { 23957 let origin = 0.5; 23958 const sourceLength = calcLength(source); 23959 const targetLength = calcLength(target); 23960 if (targetLength > sourceLength) { 23961 origin = progress(target.min, target.max - sourceLength, source.min); 23962 } 23963 else if (sourceLength > targetLength) { 23964 origin = progress(source.min, source.max - targetLength, target.min); 23965 } 23966 return clamp_clamp(0, 1, origin); 23967} 23968/** 23969 * Rebase the calculated viewport constraints relative to the layout.min point. 23970 */ 23971function rebaseAxisConstraints(layout, constraints) { 23972 const relativeConstraints = {}; 23973 if (constraints.min !== undefined) { 23974 relativeConstraints.min = constraints.min - layout.min; 23975 } 23976 if (constraints.max !== undefined) { 23977 relativeConstraints.max = constraints.max - layout.min; 23978 } 23979 return relativeConstraints; 23980} 23981const defaultElastic = 0.35; 23982/** 23983 * Accepts a dragElastic prop and returns resolved elastic values for each axis. 23984 */ 23985function resolveDragElastic(dragElastic = defaultElastic) { 23986 if (dragElastic === false) { 23987 dragElastic = 0; 23988 } 23989 else if (dragElastic === true) { 23990 dragElastic = defaultElastic; 23991 } 23992 return { 23993 x: resolveAxisElastic(dragElastic, "left", "right"), 23994 y: resolveAxisElastic(dragElastic, "top", "bottom"), 23995 }; 23996} 23997function resolveAxisElastic(dragElastic, minLabel, maxLabel) { 23998 return { 23999 min: resolvePointElastic(dragElastic, minLabel), 24000 max: resolvePointElastic(dragElastic, maxLabel), 24001 }; 24002} 24003function resolvePointElastic(dragElastic, label) { 24004 return typeof dragElastic === "number" 24005 ? dragElastic 24006 : dragElastic[label] || 0; 24007} 24008 24009 24010 24011;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/projection/geometry/models.mjs 24012const createAxisDelta = () => ({ 24013 translate: 0, 24014 scale: 1, 24015 origin: 0, 24016 originPoint: 0, 24017}); 24018const createDelta = () => ({ 24019 x: createAxisDelta(), 24020 y: createAxisDelta(), 24021}); 24022const createAxis = () => ({ min: 0, max: 0 }); 24023const createBox = () => ({ 24024 x: createAxis(), 24025 y: createAxis(), 24026}); 24027 24028 24029 24030;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/projection/utils/each-axis.mjs 24031function eachAxis(callback) { 24032 return [callback("x"), callback("y")]; 24033} 24034 24035 24036 24037;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/projection/geometry/conversion.mjs 24038/** 24039 * Bounding boxes tend to be defined as top, left, right, bottom. For various operations 24040 * it's easier to consider each axis individually. This function returns a bounding box 24041 * as a map of single-axis min/max values. 24042 */ 24043function convertBoundingBoxToBox({ top, left, right, bottom, }) { 24044 return { 24045 x: { min: left, max: right }, 24046 y: { min: top, max: bottom }, 24047 }; 24048} 24049function convertBoxToBoundingBox({ x, y }) { 24050 return { top: y.min, right: x.max, bottom: y.max, left: x.min }; 24051} 24052/** 24053 * Applies a TransformPoint function to a bounding box. TransformPoint is usually a function 24054 * provided by Framer to allow measured points to be corrected for device scaling. This is used 24055 * when measuring DOM elements and DOM event points. 24056 */ 24057function transformBoxPoints(point, transformPoint) { 24058 if (!transformPoint) 24059 return point; 24060 const topLeft = transformPoint({ x: point.left, y: point.top }); 24061 const bottomRight = transformPoint({ x: point.right, y: point.bottom }); 24062 return { 24063 top: topLeft.y, 24064 left: topLeft.x, 24065 bottom: bottomRight.y, 24066 right: bottomRight.x, 24067 }; 24068} 24069 24070 24071 24072;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/projection/utils/has-transform.mjs 24073function isIdentityScale(scale) { 24074 return scale === undefined || scale === 1; 24075} 24076function hasScale({ scale, scaleX, scaleY }) { 24077 return (!isIdentityScale(scale) || 24078 !isIdentityScale(scaleX) || 24079 !isIdentityScale(scaleY)); 24080} 24081function hasTransform(values) { 24082 return (hasScale(values) || 24083 has2DTranslate(values) || 24084 values.z || 24085 values.rotate || 24086 values.rotateX || 24087 values.rotateY); 24088} 24089function has2DTranslate(values) { 24090 return is2DTranslate(values.x) || is2DTranslate(values.y); 24091} 24092function is2DTranslate(value) { 24093 return value && value !== "0%"; 24094} 24095 24096 24097 24098;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/projection/geometry/delta-apply.mjs 24099 24100 24101 24102/** 24103 * Scales a point based on a factor and an originPoint 24104 */ 24105function scalePoint(point, scale, originPoint) { 24106 const distanceFromOrigin = point - originPoint; 24107 const scaled = scale * distanceFromOrigin; 24108 return originPoint + scaled; 24109} 24110/** 24111 * Applies a translate/scale delta to a point 24112 */ 24113function applyPointDelta(point, translate, scale, originPoint, boxScale) { 24114 if (boxScale !== undefined) { 24115 point = scalePoint(point, boxScale, originPoint); 24116 } 24117 return scalePoint(point, scale, originPoint) + translate; 24118} 24119/** 24120 * Applies a translate/scale delta to an axis 24121 */ 24122function applyAxisDelta(axis, translate = 0, scale = 1, originPoint, boxScale) { 24123 axis.min = applyPointDelta(axis.min, translate, scale, originPoint, boxScale); 24124 axis.max = applyPointDelta(axis.max, translate, scale, originPoint, boxScale); 24125} 24126/** 24127 * Applies a translate/scale delta to a box 24128 */ 24129function applyBoxDelta(box, { x, y }) { 24130 applyAxisDelta(box.x, x.translate, x.scale, x.originPoint); 24131 applyAxisDelta(box.y, y.translate, y.scale, y.originPoint); 24132} 24133/** 24134 * Apply a tree of deltas to a box. We do this to calculate the effect of all the transforms 24135 * in a tree upon our box before then calculating how to project it into our desired viewport-relative box 24136 * 24137 * This is the final nested loop within updateLayoutDelta for future refactoring 24138 */ 24139function applyTreeDeltas(box, treeScale, treePath, isSharedTransition = false) { 24140 const treeLength = treePath.length; 24141 if (!treeLength) 24142 return; 24143 // Reset the treeScale 24144 treeScale.x = treeScale.y = 1; 24145 let node; 24146 let delta; 24147 for (let i = 0; i < treeLength; i++) { 24148 node = treePath[i]; 24149 delta = node.projectionDelta; 24150 /** 24151 * TODO: Prefer to remove this, but currently we have motion components with 24152 * display: contents in Framer. 24153 */ 24154 const instance = node.instance; 24155 if (instance && 24156 instance.style && 24157 instance.style.display === "contents") { 24158 continue; 24159 } 24160 if (isSharedTransition && 24161 node.options.layoutScroll && 24162 node.scroll &&
vendor: 8,778 bytes, lines 24163-24398
24163 node !== node.root) { 24164 transformBox(box, { 24165 x: -node.scroll.offset.x, 24166 y: -node.scroll.offset.y, 24167 }); 24168 } 24169 if (delta) { 24170 // Incoporate each ancestor's scale into a culmulative treeScale for this component 24171 treeScale.x *= delta.x.scale; 24172 treeScale.y *= delta.y.scale; 24173 // Apply each ancestor's calculated delta into this component's recorded layout box 24174 applyBoxDelta(box, delta); 24175 } 24176 if (isSharedTransition && hasTransform(node.latestValues)) { 24177 transformBox(box, node.latestValues); 24178 } 24179 } 24180 /** 24181 * Snap tree scale back to 1 if it's within a non-perceivable threshold. 24182 * This will help reduce useless scales getting rendered. 24183 */ 24184 treeScale.x = snapToDefault(treeScale.x); 24185 treeScale.y = snapToDefault(treeScale.y); 24186} 24187function snapToDefault(scale) { 24188 if (Number.isInteger(scale)) 24189 return scale; 24190 return scale > 1.0000000000001 || scale < 0.999999999999 ? scale : 1; 24191} 24192function translateAxis(axis, distance) { 24193 axis.min = axis.min + distance; 24194 axis.max = axis.max + distance; 24195} 24196/** 24197 * Apply a transform to an axis from the latest resolved motion values. 24198 * This function basically acts as a bridge between a flat motion value map 24199 * and applyAxisDelta 24200 */ 24201function transformAxis(axis, transforms, [key, scaleKey, originKey]) { 24202 const axisOrigin = transforms[originKey] !== undefined ? transforms[originKey] : 0.5; 24203 const originPoint = mix(axis.min, axis.max, axisOrigin); 24204 // Apply the axis delta to the final axis 24205 applyAxisDelta(axis, transforms[key], transforms[scaleKey], originPoint, transforms.scale); 24206} 24207/** 24208 * The names of the motion values we want to apply as translation, scale and origin. 24209 */ 24210const xKeys = ["x", "scaleX", "originX"]; 24211const yKeys = ["y", "scaleY", "originY"]; 24212/** 24213 * Apply a transform to a box from the latest resolved motion values. 24214 */ 24215function transformBox(box, transform) { 24216 transformAxis(box.x, transform, xKeys); 24217 transformAxis(box.y, transform, yKeys); 24218} 24219 24220 24221 24222;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/projection/utils/measure.mjs 24223 24224 24225 24226function measureViewportBox(instance, transformPoint) { 24227 return convertBoundingBoxToBox(transformBoxPoints(instance.getBoundingClientRect(), transformPoint)); 24228} 24229function measurePageBox(element, rootProjectionNode, transformPagePoint) { 24230 const viewportBox = measureViewportBox(element, transformPagePoint); 24231 const { scroll } = rootProjectionNode; 24232 if (scroll) { 24233 translateAxis(viewportBox.x, scroll.offset.x); 24234 translateAxis(viewportBox.y, scroll.offset.y); 24235 } 24236 return viewportBox; 24237} 24238 24239 24240 24241;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/gestures/drag/VisualElementDragControls.mjs 24242 24243 24244 24245 24246 24247 24248 24249 24250 24251 24252 24253 24254 24255 24256 24257 24258 24259 24260const elementDragControls = new WeakMap(); 24261/** 24262 * 24263 */ 24264// let latestPointerEvent: PointerEvent 24265class VisualElementDragControls { 24266 constructor(visualElement) { 24267 // This is a reference to the global drag gesture lock, ensuring only one component 24268 // can "capture" the drag of one or both axes. 24269 // TODO: Look into moving this into pansession? 24270 this.openGlobalLock = null; 24271 this.isDragging = false; 24272 this.currentDirection = null; 24273 this.originPoint = { x: 0, y: 0 }; 24274 /** 24275 * The permitted boundaries of travel, in pixels. 24276 */ 24277 this.constraints = false; 24278 this.hasMutatedConstraints = false; 24279 /** 24280 * The per-axis resolved elastic values. 24281 */ 24282 this.elastic = createBox(); 24283 this.visualElement = visualElement; 24284 } 24285 start(originEvent, { snapToCursor = false } = {}) { 24286 /** 24287 * Don't start dragging if this component is exiting 24288 */ 24289 const { presenceContext } = this.visualElement; 24290 if (presenceContext && presenceContext.isPresent === false) 24291 return; 24292 const onSessionStart = (event) => { 24293 // Stop any animations on both axis values immediately. This allows the user to throw and catch 24294 // the component. 24295 this.stopAnimation(); 24296 if (snapToCursor) { 24297 this.snapToCursor(extractEventInfo(event, "page").point); 24298 } 24299 }; 24300 const onStart = (event, info) => { 24301 // Attempt to grab the global drag gesture lock - maybe make this part of PanSession 24302 const { drag, dragPropagation, onDragStart } = this.getProps(); 24303 if (drag && !dragPropagation) { 24304 if (this.openGlobalLock) 24305 this.openGlobalLock(); 24306 this.openGlobalLock = getGlobalLock(drag); 24307 // If we don 't have the lock, don't start dragging 24308 if (!this.openGlobalLock) 24309 return; 24310 } 24311 this.isDragging = true; 24312 this.currentDirection = null; 24313 this.resolveConstraints(); 24314 if (this.visualElement.projection) { 24315 this.visualElement.projection.isAnimationBlocked = true; 24316 this.visualElement.projection.target = undefined; 24317 } 24318 /** 24319 * Record gesture origin 24320 */ 24321 eachAxis((axis) => { 24322 let current = this.getAxisMotionValue(axis).get() || 0; 24323 /** 24324 * If the MotionValue is a percentage value convert to px 24325 */ 24326 if (percent.test(current)) { 24327 const { projection } = this.visualElement; 24328 if (projection && projection.layout) { 24329 const measuredAxis = projection.layout.layoutBox[axis]; 24330 if (measuredAxis) { 24331 const length = calcLength(measuredAxis); 24332 current = length * (parseFloat(current) / 100); 24333 } 24334 } 24335 } 24336 this.originPoint[axis] = current; 24337 }); 24338 // Fire onDragStart event 24339 if (onDragStart) { 24340 frame_frame.update(() => onDragStart(event, info), false, true); 24341 } 24342 const { animationState } = this.visualElement; 24343 animationState && animationState.setActive("whileDrag", true); 24344 }; 24345 const onMove = (event, info) => { 24346 // latestPointerEvent = event 24347 const { dragPropagation, dragDirectionLock, onDirectionLock, onDrag, } = this.getProps(); 24348 // If we didn't successfully receive the gesture lock, early return. 24349 if (!dragPropagation && !this.openGlobalLock) 24350 return; 24351 const { offset } = info; 24352 // Attempt to detect drag direction if directionLock is true 24353 if (dragDirectionLock && this.currentDirection === null) { 24354 this.currentDirection = getCurrentDirection(offset); 24355 // If we've successfully set a direction, notify listener 24356 if (this.currentDirection !== null) { 24357 onDirectionLock && onDirectionLock(this.currentDirection); 24358 } 24359 return; 24360 } 24361 // Update each point with the latest position 24362 this.updateAxis("x", info.point, offset); 24363 this.updateAxis("y", info.point, offset); 24364 /** 24365 * Ideally we would leave the renderer to fire naturally at the end of 24366 * this frame but if the element is about to change layout as the result 24367 * of a re-render we want to ensure the browser can read the latest 24368 * bounding box to ensure the pointer and element don't fall out of sync. 24369 */ 24370 this.visualElement.render(); 24371 /** 24372 * This must fire after the render call as it might trigger a state 24373 * change which itself might trigger a layout update. 24374 */ 24375 onDrag && onDrag(event, info); 24376 }; 24377 const onSessionEnd = (event, info) => this.stop(event, info); 24378 this.panSession = new PanSession(originEvent, { 24379 onSessionStart, 24380 onStart, 24381 onMove, 24382 onSessionEnd, 24383 }, { transformPagePoint: this.visualElement.getTransformPagePoint() }); 24384 } 24385 stop(event, info) { 24386 const isDragging = this.isDragging; 24387 this.cancel(); 24388 if (!isDragging) 24389 return; 24390 const { velocity } = info; 24391 this.startAnimation(velocity); 24392 const { onDragEnd } = this.getProps(); 24393 if (onDragEnd) { 24394 frame_frame.update(() => onDragEnd(event, info)); 24395 } 24396 } 24397 cancel() { 24398 this.isDragging = false;
vendor: 16,384 bytes, lines 24399-24810
24399 const { projection, animationState } = this.visualElement; 24400 if (projection) { 24401 projection.isAnimationBlocked = false; 24402 } 24403 this.panSession && this.panSession.end(); 24404 this.panSession = undefined; 24405 const { dragPropagation } = this.getProps(); 24406 if (!dragPropagation && this.openGlobalLock) { 24407 this.openGlobalLock(); 24408 this.openGlobalLock = null; 24409 } 24410 animationState && animationState.setActive("whileDrag", false); 24411 } 24412 updateAxis(axis, _point, offset) { 24413 const { drag } = this.getProps(); 24414 // If we're not dragging this axis, do an early return. 24415 if (!offset || !shouldDrag(axis, drag, this.currentDirection)) 24416 return; 24417 const axisValue = this.getAxisMotionValue(axis); 24418 let next = this.originPoint[axis] + offset[axis]; 24419 // Apply constraints 24420 if (this.constraints && this.constraints[axis]) { 24421 next = applyConstraints(next, this.constraints[axis], this.elastic[axis]); 24422 } 24423 axisValue.set(next); 24424 } 24425 resolveConstraints() { 24426 const { dragConstraints, dragElastic } = this.getProps(); 24427 const { layout } = this.visualElement.projection || {}; 24428 const prevConstraints = this.constraints; 24429 if (dragConstraints && is_ref_object_isRefObject(dragConstraints)) { 24430 if (!this.constraints) { 24431 this.constraints = this.resolveRefConstraints(); 24432 } 24433 } 24434 else { 24435 if (dragConstraints && layout) { 24436 this.constraints = calcRelativeConstraints(layout.layoutBox, dragConstraints); 24437 } 24438 else { 24439 this.constraints = false; 24440 } 24441 } 24442 this.elastic = resolveDragElastic(dragElastic); 24443 /** 24444 * If we're outputting to external MotionValues, we want to rebase the measured constraints 24445 * from viewport-relative to component-relative. 24446 */ 24447 if (prevConstraints !== this.constraints && 24448 layout && 24449 this.constraints && 24450 !this.hasMutatedConstraints) { 24451 eachAxis((axis) => { 24452 if (this.getAxisMotionValue(axis)) { 24453 this.constraints[axis] = rebaseAxisConstraints(layout.layoutBox[axis], this.constraints[axis]); 24454 } 24455 }); 24456 } 24457 } 24458 resolveRefConstraints() { 24459 const { dragConstraints: constraints, onMeasureDragConstraints } = this.getProps(); 24460 if (!constraints || !is_ref_object_isRefObject(constraints)) 24461 return false; 24462 const constraintsElement = constraints.current; 24463 errors_invariant(constraintsElement !== null, "If `dragConstraints` is set as a React ref, that ref must be passed to another component's `ref` prop."); 24464 const { projection } = this.visualElement; 24465 // TODO 24466 if (!projection || !projection.layout) 24467 return false; 24468 const constraintsBox = measurePageBox(constraintsElement, projection.root, this.visualElement.getTransformPagePoint()); 24469 let measuredConstraints = calcViewportConstraints(projection.layout.layoutBox, constraintsBox); 24470 /** 24471 * If there's an onMeasureDragConstraints listener we call it and 24472 * if different constraints are returned, set constraints to that 24473 */ 24474 if (onMeasureDragConstraints) { 24475 const userConstraints = onMeasureDragConstraints(convertBoxToBoundingBox(measuredConstraints)); 24476 this.hasMutatedConstraints = !!userConstraints; 24477 if (userConstraints) { 24478 measuredConstraints = convertBoundingBoxToBox(userConstraints); 24479 } 24480 } 24481 return measuredConstraints; 24482 } 24483 startAnimation(velocity) { 24484 const { drag, dragMomentum, dragElastic, dragTransition, dragSnapToOrigin, onDragTransitionEnd, } = this.getProps(); 24485 const constraints = this.constraints || {}; 24486 const momentumAnimations = eachAxis((axis) => { 24487 if (!shouldDrag(axis, drag, this.currentDirection)) { 24488 return; 24489 } 24490 let transition = (constraints && constraints[axis]) || {}; 24491 if (dragSnapToOrigin) 24492 transition = { min: 0, max: 0 }; 24493 /** 24494 * Overdamp the boundary spring if `dragElastic` is disabled. There's still a frame 24495 * of spring animations so we should look into adding a disable spring option to `inertia`. 24496 * We could do something here where we affect the `bounceStiffness` and `bounceDamping` 24497 * using the value of `dragElastic`. 24498 */ 24499 const bounceStiffness = dragElastic ? 200 : 1000000; 24500 const bounceDamping = dragElastic ? 40 : 10000000; 24501 const inertia = { 24502 type: "inertia", 24503 velocity: dragMomentum ? velocity[axis] : 0, 24504 bounceStiffness, 24505 bounceDamping, 24506 timeConstant: 750, 24507 restDelta: 1, 24508 restSpeed: 10, 24509 ...dragTransition, 24510 ...transition, 24511 }; 24512 // If we're not animating on an externally-provided `MotionValue` we can use the 24513 // component's animation controls which will handle interactions with whileHover (etc), 24514 // otherwise we just have to animate the `MotionValue` itself. 24515 return this.startAxisValueAnimation(axis, inertia); 24516 }); 24517 // Run all animations and then resolve the new drag constraints. 24518 return Promise.all(momentumAnimations).then(onDragTransitionEnd); 24519 } 24520 startAxisValueAnimation(axis, transition) { 24521 const axisValue = this.getAxisMotionValue(axis); 24522 return axisValue.start(animateMotionValue(axis, axisValue, 0, transition)); 24523 } 24524 stopAnimation() { 24525 eachAxis((axis) => this.getAxisMotionValue(axis).stop()); 24526 } 24527 /** 24528 * Drag works differently depending on which props are provided. 24529 * 24530 * - If _dragX and _dragY are provided, we output the gesture delta directly to those motion values. 24531 * - Otherwise, we apply the delta to the x/y motion values. 24532 */ 24533 getAxisMotionValue(axis) { 24534 const dragKey = "_drag" + axis.toUpperCase(); 24535 const props = this.visualElement.getProps(); 24536 const externalMotionValue = props[dragKey]; 24537 return externalMotionValue 24538 ? externalMotionValue 24539 : this.visualElement.getValue(axis, (props.initial ? props.initial[axis] : undefined) || 0); 24540 } 24541 snapToCursor(point) { 24542 eachAxis((axis) => { 24543 const { drag } = this.getProps(); 24544 // If we're not dragging this axis, do an early return. 24545 if (!shouldDrag(axis, drag, this.currentDirection)) 24546 return; 24547 const { projection } = this.visualElement; 24548 const axisValue = this.getAxisMotionValue(axis); 24549 if (projection && projection.layout) { 24550 const { min, max } = projection.layout.layoutBox[axis]; 24551 axisValue.set(point[axis] - mix(min, max, 0.5)); 24552 } 24553 }); 24554 } 24555 /** 24556 * When the viewport resizes we want to check if the measured constraints 24557 * have changed and, if so, reposition the element within those new constraints 24558 * relative to where it was before the resize. 24559 */ 24560 scalePositionWithinConstraints() { 24561 if (!this.visualElement.current) 24562 return; 24563 const { drag, dragConstraints } = this.getProps(); 24564 const { projection } = this.visualElement; 24565 if (!is_ref_object_isRefObject(dragConstraints) || !projection || !this.constraints) 24566 return; 24567 /** 24568 * Stop current animations as there can be visual glitching if we try to do 24569 * this mid-animation 24570 */ 24571 this.stopAnimation(); 24572 /** 24573 * Record the relative position of the dragged element relative to the 24574 * constraints box and save as a progress value. 24575 */ 24576 const boxProgress = { x: 0, y: 0 }; 24577 eachAxis((axis) => { 24578 const axisValue = this.getAxisMotionValue(axis); 24579 if (axisValue) { 24580 const latest = axisValue.get(); 24581 boxProgress[axis] = constraints_calcOrigin({ min: latest, max: latest }, this.constraints[axis]); 24582 } 24583 }); 24584 /** 24585 * Update the layout of this element and resolve the latest drag constraints 24586 */ 24587 const { transformTemplate } = this.visualElement.getProps(); 24588 this.visualElement.current.style.transform = transformTemplate 24589 ? transformTemplate({}, "") 24590 : "none"; 24591 projection.root && projection.root.updateScroll(); 24592 projection.updateLayout(); 24593 this.resolveConstraints(); 24594 /** 24595 * For each axis, calculate the current progress of the layout axis 24596 * within the new constraints. 24597 */ 24598 eachAxis((axis) => { 24599 if (!shouldDrag(axis, drag, null)) 24600 return; 24601 /** 24602 * Calculate a new transform based on the previous box progress 24603 */ 24604 const axisValue = this.getAxisMotionValue(axis); 24605 const { min, max } = this.constraints[axis]; 24606 axisValue.set(mix(min, max, boxProgress[axis])); 24607 }); 24608 } 24609 addListeners() { 24610 if (!this.visualElement.current) 24611 return; 24612 elementDragControls.set(this.visualElement, this); 24613 const element = this.visualElement.current; 24614 /** 24615 * Attach a pointerdown event listener on this DOM element to initiate drag tracking. 24616 */ 24617 const stopPointerListener = addPointerEvent(element, "pointerdown", (event) => { 24618 const { drag, dragListener = true } = this.getProps(); 24619 drag && dragListener && this.start(event); 24620 }); 24621 const measureDragConstraints = () => { 24622 const { dragConstraints } = this.getProps(); 24623 if (is_ref_object_isRefObject(dragConstraints)) { 24624 this.constraints = this.resolveRefConstraints(); 24625 } 24626 }; 24627 const { projection } = this.visualElement; 24628 const stopMeasureLayoutListener = projection.addEventListener("measure", measureDragConstraints); 24629 if (projection && !projection.layout) { 24630 projection.root && projection.root.updateScroll(); 24631 projection.updateLayout(); 24632 } 24633 measureDragConstraints(); 24634 /** 24635 * Attach a window resize listener to scale the draggable target within its defined 24636 * constraints as the window resizes. 24637 */ 24638 const stopResizeListener = addDomEvent(window, "resize", () => this.scalePositionWithinConstraints()); 24639 /** 24640 * If the element's layout changes, calculate the delta and apply that to 24641 * the drag gesture's origin point. 24642 */ 24643 const stopLayoutUpdateListener = projection.addEventListener("didUpdate", (({ delta, hasLayoutChanged }) => { 24644 if (this.isDragging && hasLayoutChanged) { 24645 eachAxis((axis) => { 24646 const motionValue = this.getAxisMotionValue(axis); 24647 if (!motionValue) 24648 return; 24649 this.originPoint[axis] += delta[axis].translate; 24650 motionValue.set(motionValue.get() + delta[axis].translate); 24651 }); 24652 this.visualElement.render(); 24653 } 24654 })); 24655 return () => { 24656 stopResizeListener(); 24657 stopPointerListener(); 24658 stopMeasureLayoutListener(); 24659 stopLayoutUpdateListener && stopLayoutUpdateListener(); 24660 }; 24661 } 24662 getProps() { 24663 const props = this.visualElement.getProps(); 24664 const { drag = false, dragDirectionLock = false, dragPropagation = false, dragConstraints = false, dragElastic = defaultElastic, dragMomentum = true, } = props; 24665 return { 24666 ...props, 24667 drag, 24668 dragDirectionLock, 24669 dragPropagation, 24670 dragConstraints, 24671 dragElastic, 24672 dragMomentum, 24673 }; 24674 } 24675} 24676function shouldDrag(direction, drag, currentDirection) { 24677 return ((drag === true || drag === direction) && 24678 (currentDirection === null || currentDirection === direction)); 24679} 24680/** 24681 * Based on an x/y offset determine the current drag direction. If both axis' offsets are lower 24682 * than the provided threshold, return `null`. 24683 * 24684 * @param offset - The x/y offset from origin. 24685 * @param lockThreshold - (Optional) - the minimum absolute offset before we can determine a drag direction. 24686 */ 24687function getCurrentDirection(offset, lockThreshold = 10) { 24688 let direction = null; 24689 if (Math.abs(offset.y) > lockThreshold) { 24690 direction = "y"; 24691 } 24692 else if (Math.abs(offset.x) > lockThreshold) { 24693 direction = "x"; 24694 } 24695 return direction; 24696} 24697 24698 24699 24700;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/gestures/drag/index.mjs 24701 24702 24703 24704 24705class DragGesture extends Feature { 24706 constructor(node) { 24707 super(node); 24708 this.removeGroupControls = noop_noop; 24709 this.removeListeners = noop_noop; 24710 this.controls = new VisualElementDragControls(node); 24711 } 24712 mount() { 24713 // If we've been provided a DragControls for manual control over the drag gesture, 24714 // subscribe this component to it on mount. 24715 const { dragControls } = this.node.getProps(); 24716 if (dragControls) { 24717 this.removeGroupControls = dragControls.subscribe(this.controls); 24718 } 24719 this.removeListeners = this.controls.addListeners() || noop_noop; 24720 } 24721 unmount() { 24722 this.removeGroupControls(); 24723 this.removeListeners(); 24724 } 24725} 24726 24727 24728 24729;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/gestures/pan/index.mjs 24730 24731 24732 24733 24734 24735 24736const asyncHandler = (handler) => (event, info) => { 24737 if (handler) { 24738 frame_frame.update(() => handler(event, info)); 24739 } 24740}; 24741class PanGesture extends Feature { 24742 constructor() { 24743 super(...arguments); 24744 this.removePointerDownListener = noop_noop; 24745 } 24746 onPointerDown(pointerDownEvent) { 24747 this.session = new PanSession(pointerDownEvent, this.createPanHandlers(), { transformPagePoint: this.node.getTransformPagePoint() }); 24748 } 24749 createPanHandlers() { 24750 const { onPanSessionStart, onPanStart, onPan, onPanEnd } = this.node.getProps(); 24751 return { 24752 onSessionStart: asyncHandler(onPanSessionStart), 24753 onStart: asyncHandler(onPanStart), 24754 onMove: onPan, 24755 onEnd: (event, info) => { 24756 delete this.session; 24757 if (onPanEnd) { 24758 frame_frame.update(() => onPanEnd(event, info)); 24759 } 24760 }, 24761 }; 24762 } 24763 mount() { 24764 this.removePointerDownListener = addPointerEvent(this.node.current, "pointerdown", (event) => this.onPointerDown(event)); 24765 } 24766 update() { 24767 this.session && this.session.updateHandlers(this.createPanHandlers()); 24768 } 24769 unmount() { 24770 this.removePointerDownListener(); 24771 this.session && this.session.end(); 24772 } 24773} 24774 24775 24776 24777;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/components/AnimatePresence/use-presence.mjs 24778 24779 24780 24781/** 24782 * When a component is the child of `AnimatePresence`, it can use `usePresence` 24783 * to access information about whether it's still present in the React tree. 24784 * 24785 * ```jsx 24786 * import { usePresence } from "framer-motion" 24787 * 24788 * export const Component = () => { 24789 * const [isPresent, safeToRemove] = usePresence() 24790 * 24791 * useEffect(() => { 24792 * !isPresent && setTimeout(safeToRemove, 1000) 24793 * }, [isPresent]) 24794 * 24795 * return <div /> 24796 * } 24797 * ``` 24798 * 24799 * If `isPresent` is `false`, it means that a component has been removed the tree, but 24800 * `AnimatePresence` won't really remove it until `safeToRemove` has been called. 24801 * 24802 * @public 24803 */ 24804function usePresence() { 24805 const context = (0,external_React_.useContext)(PresenceContext_PresenceContext); 24806 if (context === null) 24807 return [true, null]; 24808 const { isPresent, onExitComplete, register } = context; 24809 // It's safe to call the following hooks conditionally (after an early return) because the context will always 24810 // either be null or non-
24810null for the lifespan of the component. 24811 const id = (0,external_React_.useId)(); 24812 (0,external_React_.useEffect)(() => register(id), []); 24813 const safeToRemove = () => onExitComplete && onExitComplete(id); 24814 return !isPresent && onExitComplete ? [false, safeToRemove] : [true]; 24815} 24816/** 24817 * Similar to `usePresence`, except `useIsPresent` simply returns whether or not the component is present. 24818 * There is no `safeToRemove` function. 24819 * 24820 * ```jsx 24821 * import { useIsPresent } from "framer-motion" 24822 * 24823 * export const Component = () => { 24824 * const isPresent = useIsPresent() 24825 * 24826 * useEffect(() => { 24827 * !isPresent && console.log("I've been removed!") 24828 * }, [isPresent]) 24829 * 24830 * return <div /> 24831 * } 24832 * ``` 24833 * 24834 * @public 24835 */ 24836function useIsPresent() { 24837 return isPresent(useContext(PresenceContext)); 24838} 24839function isPresent(context) { 24840 return context === null ? true : context.isPresent; 24841} 24842 24843 24844 24845;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/projection/node/state.mjs 24846/** 24847 * This should only ever be modified on the client otherwise it'll 24848 * persist through server requests. If we need instanced states we 24849 * could lazy-init via root. 24850 */ 24851const globalProjectionState = { 24852 /** 24853 * Global flag as to whether the tree has animated since the last time 24854 * we resized the window 24855 */ 24856 hasAnimatedSinceResize: true, 24857 /** 24858 * We set this to true once, on the first update. Any nodes added to the tree beyond that 24859 * update will be given a `data-projection-id` attribute. 24860 */ 24861 hasEverUpdated: false, 24862}; 24863 24864 24865 24866;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/projection/styles/scale-border-radius.mjs 24867 24868 24869function pixelsToPercent(pixels, axis) { 24870 if (axis.max === axis.min) 24871 return 0; 24872 return (pixels / (axis.max - axis.min)) * 100; 24873} 24874/** 24875 * We always correct borderRadius as a percentage rather than pixels to reduce paints. 24876 * For example, if you are projecting a box that is 100px wide with a 10px borderRadius
vendor: 15,085 bytes, lines 24877-25296
24877 * into a box that is 200px wide with a 20px borderRadius, that is actually a 10% 24878 * borderRadius in both states. If we animate between the two in pixels that will trigger 24879 * a paint each time. If we animate between the two in percentage we'll avoid a paint. 24880 */ 24881const correctBorderRadius = { 24882 correct: (latest, node) => { 24883 if (!node.target) 24884 return latest; 24885 /** 24886 * If latest is a string, if it's a percentage we can return immediately as it's 24887 * going to be stretched appropriately. Otherwise, if it's a pixel, convert it to a number. 24888 */ 24889 if (typeof latest === "string") { 24890 if (px.test(latest)) { 24891 latest = parseFloat(latest); 24892 } 24893 else { 24894 return latest; 24895 } 24896 } 24897 /** 24898 * If latest is a number, it's a pixel value. We use the current viewportBox to calculate that 24899 * pixel value as a percentage of each axis 24900 */ 24901 const x = pixelsToPercent(latest, node.target.x); 24902 const y = pixelsToPercent(latest, node.target.y); 24903 return `${x}% ${y}%`; 24904 }, 24905}; 24906 24907 24908 24909;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/projection/styles/scale-box-shadow.mjs 24910 24911 24912 24913const correctBoxShadow = { 24914 correct: (latest, { treeScale, projectionDelta }) => { 24915 const original = latest; 24916 const shadow = complex.parse(latest); 24917 // TODO: Doesn't support multiple shadows 24918 if (shadow.length > 5) 24919 return original; 24920 const template = complex.createTransformer(latest); 24921 const offset = typeof shadow[0] !== "number" ? 1 : 0; 24922 // Calculate the overall context scale 24923 const xScale = projectionDelta.x.scale * treeScale.x; 24924 const yScale = projectionDelta.y.scale * treeScale.y; 24925 shadow[0 + offset] /= xScale; 24926 shadow[1 + offset] /= yScale; 24927 /** 24928 * Ideally we'd correct x and y scales individually, but because blur and 24929 * spread apply to both we have to take a scale average and apply that instead. 24930 * We could potentially improve the outcome of this by incorporating the ratio between 24931 * the two scales. 24932 */ 24933 const averageScale = mix(xScale, yScale, 0.5); 24934 // Blur 24935 if (typeof shadow[2 + offset] === "number") 24936 shadow[2 + offset] /= averageScale; 24937 // Spread 24938 if (typeof shadow[3 + offset] === "number") 24939 shadow[3 + offset] /= averageScale; 24940 return template(shadow); 24941 }, 24942}; 24943 24944 24945 24946;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/motion/features/layout/MeasureLayout.mjs 24947 24948 24949 24950 24951 24952 24953 24954 24955 24956 24957class MeasureLayoutWithContext extends external_React_.Component { 24958 /** 24959 * This only mounts projection nodes for components that 24960 * need measuring, we might want to do it for all components 24961 * in order to incorporate transforms 24962 */ 24963 componentDidMount() { 24964 const { visualElement, layoutGroup, switchLayoutGroup, layoutId } = this.props; 24965 const { projection } = visualElement; 24966 addScaleCorrector(defaultScaleCorrectors); 24967 if (projection) { 24968 if (layoutGroup.group) 24969 layoutGroup.group.add(projection); 24970 if (switchLayoutGroup && switchLayoutGroup.register && layoutId) { 24971 switchLayoutGroup.register(projection); 24972 } 24973 projection.root.didUpdate(); 24974 projection.addEventListener("animationComplete", () => { 24975 this.safeToRemove(); 24976 }); 24977 projection.setOptions({ 24978 ...projection.options, 24979 onExitComplete: () => this.safeToRemove(), 24980 }); 24981 } 24982 globalProjectionState.hasEverUpdated = true; 24983 } 24984 getSnapshotBeforeUpdate(prevProps) { 24985 const { layoutDependency, visualElement, drag, isPresent } = this.props; 24986 const projection = visualElement.projection; 24987 if (!projection) 24988 return null; 24989 /** 24990 * TODO: We use this data in relegate to determine whether to 24991 * promote a previous element. There's no guarantee its presence data 24992 * will have updated by this point - if a bug like this arises it will 24993 * have to be that we markForRelegation and then find a new lead some other way, 24994 * perhaps in didUpdate 24995 */ 24996 projection.isPresent = isPresent; 24997 if (drag || 24998 prevProps.layoutDependency !== layoutDependency || 24999 layoutDependency === undefined) { 25000 projection.willUpdate(); 25001 } 25002 else { 25003 this.safeToRemove(); 25004 } 25005 if (prevProps.isPresent !== isPresent) { 25006 if (isPresent) { 25007 projection.promote(); 25008 } 25009 else if (!projection.relegate()) { 25010 /** 25011 * If there's another stack member taking over from this one, 25012 * it's in charge of the exit animation and therefore should 25013 * be in charge of the safe to remove. Otherwise we call it here. 25014 */ 25015 frame_frame.postRender(() => { 25016 const stack = projection.getStack(); 25017 if (!stack || !stack.members.length) { 25018 this.safeToRemove(); 25019 } 25020 }); 25021 } 25022 } 25023 return null; 25024 } 25025 componentDidUpdate() { 25026 const { projection } = this.props.visualElement; 25027 if (projection) { 25028 projection.root.didUpdate(); 25029 queueMicrotask(() => { 25030 if (!projection.currentAnimation && projection.isLead()) { 25031 this.safeToRemove(); 25032 } 25033 }); 25034 } 25035 } 25036 componentWillUnmount() { 25037 const { visualElement, layoutGroup, switchLayoutGroup: promoteContext, } = this.props; 25038 const { projection } = visualElement; 25039 if (projection) { 25040 projection.scheduleCheckAfterUnmount(); 25041 if (layoutGroup && layoutGroup.group) 25042 layoutGroup.group.remove(projection); 25043 if (promoteContext && promoteContext.deregister) 25044 promoteContext.deregister(projection); 25045 } 25046 } 25047 safeToRemove() { 25048 const { safeToRemove } = this.props; 25049 safeToRemove && safeToRemove(); 25050 } 25051 render() { 25052 return null; 25053 } 25054} 25055function MeasureLayout(props) { 25056 const [isPresent, safeToRemove] = usePresence(); 25057 const layoutGroup = (0,external_React_.useContext)(LayoutGroupContext); 25058 return (external_React_.createElement(MeasureLayoutWithContext, { ...props, layoutGroup: layoutGroup, switchLayoutGroup: (0,external_React_.useContext)(SwitchLayoutGroupContext), isPresent: isPresent, safeToRemove: safeToRemove })); 25059} 25060const defaultScaleCorrectors = { 25061 borderRadius: { 25062 ...correctBorderRadius, 25063 applyTo: [ 25064 "borderTopLeftRadius", 25065 "borderTopRightRadius", 25066 "borderBottomLeftRadius", 25067 "borderBottomRightRadius", 25068 ], 25069 }, 25070 borderTopLeftRadius: correctBorderRadius, 25071 borderTopRightRadius: correctBorderRadius, 25072 borderBottomLeftRadius: correctBorderRadius, 25073 borderBottomRightRadius: correctBorderRadius, 25074 boxShadow: correctBoxShadow, 25075}; 25076 25077 25078 25079;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/projection/animation/mix-values.mjs 25080 25081 25082 25083 25084 25085 25086const borders = ["TopLeft", "TopRight", "BottomLeft", "BottomRight"]; 25087const numBorders = borders.length; 25088const asNumber = (value) => typeof value === "string" ? parseFloat(value) : value; 25089const isPx = (value) => typeof value === "number" || px.test(value); 25090function mixValues(target, follow, lead, progress, shouldCrossfadeOpacity, isOnlyMember) { 25091 if (shouldCrossfadeOpacity) { 25092 target.opacity = mix(0, 25093 // TODO Reinstate this if only child 25094 lead.opacity !== undefined ? lead.opacity : 1, easeCrossfadeIn(progress)); 25095 target.opacityExit = mix(follow.opacity !== undefined ? follow.opacity : 1, 0, easeCrossfadeOut(progress)); 25096 } 25097 else if (isOnlyMember) { 25098 target.opacity = mix(follow.opacity !== undefined ? follow.opacity : 1, lead.opacity !== undefined ? lead.opacity : 1, progress); 25099 } 25100 /** 25101 * Mix border radius 25102 */ 25103 for (let i = 0; i < numBorders; i++) { 25104 const borderLabel = `border${borders[i]}Radius`; 25105 let followRadius = getRadius(follow, borderLabel); 25106 let leadRadius = getRadius(lead, borderLabel); 25107 if (followRadius === undefined && leadRadius === undefined) 25108 continue; 25109 followRadius || (followRadius = 0); 25110 leadRadius || (leadRadius = 0); 25111 const canMix = followRadius === 0 || 25112 leadRadius === 0 || 25113 isPx(followRadius) === isPx(leadRadius); 25114 if (canMix) { 25115 target[borderLabel] = Math.max(mix(asNumber(followRadius), asNumber(leadRadius), progress), 0); 25116 if (percent.test(leadRadius) || percent.test(followRadius)) { 25117 target[borderLabel] += "%"; 25118 } 25119 } 25120 else { 25121 target[borderLabel] = leadRadius; 25122 } 25123 } 25124 /** 25125 * Mix rotation 25126 */ 25127 if (follow.rotate || lead.rotate) { 25128 target.rotate = mix(follow.rotate || 0, lead.rotate || 0, progress); 25129 } 25130} 25131function getRadius(values, radiusName) { 25132 return values[radiusName] !== undefined 25133 ? values[radiusName] 25134 : values.borderRadius; 25135} 25136// /** 25137// * We only want to mix the background color if there's a follow element 25138// * that we're not crossfading opacity between. For instance with switch 25139// * AnimateSharedLayout animations, this helps the illusion of a continuous 25140// * element being animated but also cuts down on the number of paints triggered 25141// * for elements where opacity is doing that work for us. 25142// */ 25143// if ( 25144// !hasFollowElement && 25145// latestLeadValues.backgroundColor && 25146// latestFollowValues.backgroundColor 25147// ) { 25148// /** 25149// * This isn't ideal performance-wise as mixColor is creating a new function every frame. 25150// * We could probably create a mixer that runs at the start of the animation but 25151// * the idea behind the crossfader is that it runs dynamically between two potentially 25152// * changing targets (ie opacity or borderRadius may be animating independently via variants) 25153// */ 25154// leadState.backgroundColor = followState.backgroundColor = mixColor( 25155// latestFollowValues.backgroundColor as string, 25156// latestLeadValues.backgroundColor as string 25157// )(p) 25158// } 25159const easeCrossfadeIn = compress(0, 0.5, circOut); 25160const easeCrossfadeOut = compress(0.5, 0.95, noop_noop); 25161function compress(min, max, easing) { 25162 return (p) => { 25163 // Could replace ifs with clamp 25164 if (p < min) 25165 return 0; 25166 if (p > max) 25167 return 1; 25168 return easing(progress(min, max, p)); 25169 }; 25170} 25171 25172 25173 25174;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/projection/geometry/copy.mjs 25175/** 25176 * Reset an axis to the provided origin box. 25177 * 25178 * This is a mutative operation. 25179 */ 25180function copyAxisInto(axis, originAxis) { 25181 axis.min = originAxis.min; 25182 axis.max = originAxis.max; 25183} 25184/** 25185 * Reset a box to the provided origin box. 25186 * 25187 * This is a mutative operation. 25188 */ 25189function copyBoxInto(box, originBox) { 25190 copyAxisInto(box.x, originBox.x); 25191 copyAxisInto(box.y, originBox.y); 25192} 25193 25194 25195 25196;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/projection/geometry/delta-remove.mjs 25197 25198 25199 25200 25201/** 25202 * Remove a delta from a point. This is essentially the steps of applyPointDelta in reverse 25203 */ 25204function removePointDelta(point, translate, scale, originPoint, boxScale) { 25205 point -= translate; 25206 point = scalePoint(point, 1 / scale, originPoint); 25207 if (boxScale !== undefined) { 25208 point = scalePoint(point, 1 / boxScale, originPoint); 25209 } 25210 return point; 25211} 25212/** 25213 * Remove a delta from an axis. This is essentially the steps of applyAxisDelta in reverse 25214 */ 25215function removeAxisDelta(axis, translate = 0, scale = 1, origin = 0.5, boxScale, originAxis = axis, sourceAxis = axis) { 25216 if (percent.test(translate)) { 25217 translate = parseFloat(translate); 25218 const relativeProgress = mix(sourceAxis.min, sourceAxis.max, translate / 100); 25219 translate = relativeProgress - sourceAxis.min; 25220 } 25221 if (typeof translate !== "number") 25222 return; 25223 let originPoint = mix(originAxis.min, originAxis.max, origin); 25224 if (axis === originAxis) 25225 originPoint -= translate; 25226 axis.min = removePointDelta(axis.min, translate, scale, originPoint, boxScale); 25227 axis.max = removePointDelta(axis.max, translate, scale, originPoint, boxScale); 25228} 25229/** 25230 * Remove a transforms from an axis. This is essentially the steps of applyAxisTransforms in reverse 25231 * and acts as a bridge between motion values and removeAxisDelta 25232 */ 25233function removeAxisTransforms(axis, transforms, [key, scaleKey, originKey], origin, sourceAxis) { 25234 removeAxisDelta(axis, transforms[key], transforms[scaleKey], transforms[originKey], transforms.scale, origin, sourceAxis); 25235} 25236/** 25237 * The names of the motion values we want to apply as translation, scale and origin. 25238 */ 25239const delta_remove_xKeys = ["x", "scaleX", "originX"]; 25240const delta_remove_yKeys = ["y", "scaleY", "originY"]; 25241/** 25242 * Remove a transforms from an box. This is essentially the steps of applyAxisBox in reverse 25243 * and acts as a bridge between motion values and removeAxisDelta 25244 */ 25245function removeBoxTransforms(box, transforms, originBox, sourceBox) { 25246 removeAxisTransforms(box.x, transforms, delta_remove_xKeys, originBox ? originBox.x : undefined, sourceBox ? sourceBox.x : undefined); 25247 removeAxisTransforms(box.y, transforms, delta_remove_yKeys, originBox ? originBox.y : undefined, sourceBox ? sourceBox.y : undefined); 25248} 25249 25250 25251 25252;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/projection/geometry/utils.mjs 25253 25254 25255function isAxisDeltaZero(delta) { 25256 return delta.translate === 0 && delta.scale === 1; 25257} 25258function isDeltaZero(delta) { 25259 return isAxisDeltaZero(delta.x) && isAxisDeltaZero(delta.y); 25260} 25261function boxEquals(a, b) { 25262 return (a.x.min === b.x.min && 25263 a.x.max === b.x.max && 25264 a.y.min === b.y.min && 25265 a.y.max === b.y.max); 25266} 25267function aspectRatio(box) { 25268 return calcLength(box.x) / calcLength(box.y); 25269} 25270 25271 25272 25273;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/projection/shared/stack.mjs 25274 25275 25276class NodeStack { 25277 constructor() { 25278 this.members = []; 25279 } 25280 add(node) { 25281 addUniqueItem(this.members, node); 25282 node.scheduleRender(); 25283 } 25284 remove(node) { 25285 removeItem(this.members, node); 25286 if (node === this.prevLead) { 25287 this.prevLead = undefined; 25288 } 25289 if (node === this.lead) { 25290 const prevLead = this.members[this.members.length - 1]; 25291 if (prevLead) { 25292 this.promote(prevLead); 25293 } 25294 } 25295 } 25296 relegate(node) {
vendor: 5,276 bytes, lines 25297-25443
25297 const indexOfNode = this.members.findIndex((member) => node === member); 25298 if (indexOfNode === 0) 25299 return false; 25300 /** 25301 * Find the next projection node that is present 25302 */ 25303 let prevLead; 25304 for (let i = indexOfNode; i >= 0; i--) { 25305 const member = this.members[i]; 25306 if (member.isPresent !== false) { 25307 prevLead = member; 25308 break; 25309 } 25310 } 25311 if (prevLead) { 25312 this.promote(prevLead); 25313 return true; 25314 } 25315 else { 25316 return false; 25317 } 25318 } 25319 promote(node, preserveFollowOpacity) { 25320 const prevLead = this.lead; 25321 if (node === prevLead) 25322 return; 25323 this.prevLead = prevLead; 25324 this.lead = node; 25325 node.show(); 25326 if (prevLead) { 25327 prevLead.instance && prevLead.scheduleRender(); 25328 node.scheduleRender(); 25329 node.resumeFrom = prevLead; 25330 if (preserveFollowOpacity) { 25331 node.resumeFrom.preserveOpacity = true; 25332 } 25333 if (prevLead.snapshot) { 25334 node.snapshot = prevLead.snapshot; 25335 node.snapshot.latestValues = 25336 prevLead.animationValues || prevLead.latestValues; 25337 } 25338 if (node.root && node.root.isUpdating) { 25339 node.isLayoutDirty = true; 25340 } 25341 const { crossfade } = node.options; 25342 if (crossfade === false) { 25343 prevLead.hide(); 25344 } 25345 /** 25346 * TODO: 25347 * - Test border radius when previous node was deleted 25348 * - boxShadow mixing 25349 * - Shared between element A in scrolled container and element B (scroll stays the same or changes) 25350 * - Shared between element A in transformed container and element B (transform stays the same or changes) 25351 * - Shared between element A in scrolled page and element B (scroll stays the same or changes) 25352 * --- 25353 * - Crossfade opacity of root nodes 25354 * - layoutId changes after animation 25355 * - layoutId changes mid animation 25356 */ 25357 } 25358 } 25359 exitAnimationComplete() { 25360 this.members.forEach((node) => { 25361 const { options, resumingFrom } = node; 25362 options.onExitComplete && options.onExitComplete(); 25363 if (resumingFrom) { 25364 resumingFrom.options.onExitComplete && 25365 resumingFrom.options.onExitComplete(); 25366 } 25367 }); 25368 } 25369 scheduleRender() { 25370 this.members.forEach((node) => { 25371 node.instance && node.scheduleRender(false); 25372 }); 25373 } 25374 /** 25375 * Clear any leads that have been removed this render to prevent them from being 25376 * used in future animations and to prevent memory leaks 25377 */ 25378 removeLeadSnapshot() { 25379 if (this.lead && this.lead.snapshot) { 25380 this.lead.snapshot = undefined; 25381 } 25382 } 25383} 25384 25385 25386 25387;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/projection/styles/transform.mjs 25388function buildProjectionTransform(delta, treeScale, latestTransform) { 25389 let transform = ""; 25390 /** 25391 * The translations we use to calculate are always relative to the viewport coordinate space. 25392 * But when we apply scales, we also scale the coordinate space of an element and its children. 25393 * For instance if we have a treeScale (the culmination of all parent scales) of 0.5 and we need 25394 * to move an element 100 pixels, we actually need to move it 200 in within that scaled space. 25395 */ 25396 const xTranslate = delta.x.translate / treeScale.x; 25397 const yTranslate = delta.y.translate / treeScale.y; 25398 if (xTranslate || yTranslate) { 25399 transform = `translate3d(${xTranslate}px, ${yTranslate}px, 0) `; 25400 } 25401 /** 25402 * Apply scale correction for the tree transform. 25403 * This will apply scale to the screen-orientated axes. 25404 */ 25405 if (treeScale.x !== 1 || treeScale.y !== 1) { 25406 transform += `scale(${1 / treeScale.x}, ${1 / treeScale.y}) `; 25407 } 25408 if (latestTransform) { 25409 const { rotate, rotateX, rotateY } = latestTransform; 25410 if (rotate) 25411 transform += `rotate(${rotate}deg) `; 25412 if (rotateX) 25413 transform += `rotateX(${rotateX}deg) `; 25414 if (rotateY) 25415 transform += `rotateY(${rotateY}deg) `; 25416 } 25417 /** 25418 * Apply scale to match the size of the element to the size we want it. 25419 * This will apply scale to the element-orientated axes. 25420 */ 25421 const elementScaleX = delta.x.scale * treeScale.x; 25422 const elementScaleY = delta.y.scale * treeScale.y; 25423 if (elementScaleX !== 1 || elementScaleY !== 1) { 25424 transform += `scale(${elementScaleX}, ${elementScaleY})`; 25425 } 25426 return transform || "none"; 25427} 25428 25429 25430 25431;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/render/utils/compare-by-depth.mjs 25432const compareByDepth = (a, b) => a.depth - b.depth; 25433 25434 25435 25436;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/render/utils/flat-tree.mjs 25437 25438 25439 25440class FlatTree { 25441 constructor() { 25442 this.children = []; 25443 this.isDirty = false;
25444 } 25445 add(child) { 25446 addUniqueItem(this.children, child); 25447 this.isDirty = true; 25448 } 25449 remove(child) { 25450 removeItem(this.children, child); 25451 this.isDirty = true; 25452 } 25453 forEach(callback) { 25454 this.isDirty && this.children.sort(compareByDepth); 25455 this.isDirty = false; 25456 this.children.forEach(callback); 25457 } 25458} 25459 25460 25461 25462;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/utils/delay.mjs 25463 25464 25465/** 25466 * Timeout defined in ms 25467 */ 25468function delay(callback, timeout) { 25469 const start = performance.now(); 25470 const checkElapsed = ({ timestamp }) => { 25471 const elapsed = timestamp - start; 25472 if (elapsed >= timeout) { 25473 cancelFrame(checkElapsed); 25474 callback(elapsed - timeout); 25475 } 25476 }; 25477 frame_frame.read(checkElapsed, true); 25478 return () => cancelFrame(checkElapsed); 25479} 25480 25481 25482 25483;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/debug/record.mjs 25484function record(data) { 25485 if (window.MotionDebug) { 25486 window.MotionDebug.record(data); 25487 } 25488} 25489 25490 25491 25492;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/render/dom/utils/is-svg-element.mjs 25493function isSVGElement(element) { 25494 return element instanceof SVGElement && element.tagName !== "svg"; 25495} 25496 25497 25498 25499;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/animation/interfaces/single-value.mjs 25500 25501 25502 25503 25504function animateSingleValue(value, keyframes, options) { 25505 const motionValue$1 = isMotionValue(value) ? value : motionValue(value); 25506 motionValue$1.start(animateMotionValue("", motionValue$1, keyframes, options)); 25507 return motionValue$1.animation; 25508} 25509 25510 25511 25512;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/projection/node/create-projection-node.mjs 25513 25514 25515 25516 25517 25518 25519 25520 25521 25522 25523 25524 25525 25526 25527 25528 25529 25530 25531 25532 25533 25534 25535 25536 25537 25538const transformAxes = ["", "X", "Y", "Z"]; 25539/** 25540 * We use 1000 as the animation target as 0-1000 maps better to pixels than 0-1 25541 * which has a noticeable difference in spring animations 25542 */ 25543const animationTarget = 1000; 25544let create_projection_node_id = 0; 25545/** 25546 * Use a mutable data object for debug data so as to not create a new 25547 * object every frame. 25548 */ 25549const projectionFrameData = { 25550 type: "projectionFrame", 25551 totalNodes: 0, 25552 resolvedTargetDeltas: 0, 25553 recalculatedProjection: 0, 25554}; 25555function createProjectionNode({ attachResizeListener, defaultParent, measureScroll, checkIsScrollRoot, resetTransform, }) { 25556 return class ProjectionNode { 25557 constructor(latestValues = {}, parent = defaultParent === null || defaultParent === void 0 ? void 0 : defaultParent()) { 25558 /** 25559 * A unique ID generated for every projection node. 25560 */ 25561 this.id = create_projection_node_id++; 25562 /** 25563 * An id that represents a unique session instigated by startUpdate. 25564 */ 25565 this.animationId = 0; 25566 /** 25567 * A Set containing all this component's children. This is used to iterate 25568 * through the children. 25569 * 25570 * TODO: This could be faster to iterate as a flat array stored on the root node. 25571 */ 25572 this.children = new Set(); 25573 /** 25574 * Options for the node. We use this to configure what kind of layout animations 25575 * we should perform (if any). 25576 */ 25577 this.options = {}; 25578 /** 25579 * We use this to detect when its safe to shut down part of a projection tree. 25580 * We have to keep projecting children for scale correction and relative projection 25581 * until all their parents stop performing layout animations. 25582 */ 25583 this.isTreeAnimating = false; 25584 this.isAnimationBlocked = false; 25585 /** 25586 * Flag to true if we think this layout has been changed. We can't always know this, 25587 * currently we set it to true every time a component renders, or if it has a layoutDependency 25588 * if that has changed between renders. Additionally, components can be grouped by LayoutGroup 25589 * and if one node is dirtied, they all are. 25590 */ 25591 this.isLayoutDirty = false;
25592 /** 25593 * Flag to true if we think the projection calculations for this node needs 25594 * recalculating as a result of an updated transform or layout animation. 25595 */ 25596 this.isProjectionDirty = false; 25597 /** 25598 * Flag to true if the layout *or* transform has changed. This then gets propagated 25599 * throughout the projection tree, forcing any element below to recalculate on the next frame. 25600 */ 25601 this.isSharedProjectionDirty = false; 25602 /** 25603 * Flag transform dirty. This gets propagated throughout the whole tree but is only 25604 * respected by shared nodes. 25605 */ 25606 this.isTransformDirty = false; 25607 /** 25608 * Block layout updates for instant layout transitions throughout the tree. 25609 */ 25610 this.updateManuallyBlocked = false; 25611 this.updateBlockedByResize = false; 25612 /** 25613 * Set to true between the start of the first `willUpdate` call and the end of the `didUpdate` 25614 * call. 25615 */ 25616 this.isUpdating = false; 25617 /** 25618 * If this is an SVG element we currently disable projection transforms 25619 */ 25620 this.isSVG = false; 25621 /** 25622 * Flag to true (during promotion) if a node doing an instant layout transition needs to reset 25623 * its projection styles. 25624 */ 25625 this.needsReset = false; 25626 /** 25627 * Flags whether this node should have its transform reset prior to measuring. 25628 */ 25629 this.shouldResetTransform = false; 25630 /** 25631 * An object representing the calculated contextual/accumulated/tree scale. 25632 * This will be used to scale calculcated projection transforms, as these are 25633 * calculated in screen-space but need to be scaled for elements to layoutly 25634 * make it to their calculated destinations. 25635 * 25636 * TODO: Lazy-init 25637 */ 25638 this.treeScale = { x: 1, y: 1 }; 25639 /** 25640 * 25641 */ 25642 this.eventHandlers = new Map(); 25643 this.hasTreeAnimated = false; 25644 // Note: Currently only running on root node 25645 this.updateScheduled = false; 25646 this.checkUpdateFailed = () => { 25647 if (this.isUpdating) { 25648 this.isUpdating = false; 25649 this.clearAllSnapshots(); 25650 } 25651 }; 25652 /** 25653 * This is a multi-step process as shared nodes might be of different depths. Nodes 25654 * are sorted by depth order, so we need to resolve the entire tree before moving to 25655 * the next step. 25656 */ 25657 this.updateProjection = () => { 25658 /** 25659 * Reset debug counts. Manually resetting rather than creating a new 25660 * object each frame. 25661 */ 25662 projectionFrameData.totalNodes = 25663 projectionFrameData.resolvedTargetDeltas = 25664 projectionFrameData.recalculatedProjection = 25665 0; 25666 this.nodes.forEach(propagateDirtyNodes); 25667 this.nodes.forEach(resolveTargetDelta); 25668 this.nodes.forEach(calcProjection); 25669 this.nodes.forEach(cleanDirtyNodes); 25670 record(projectionFrameData); 25671 }; 25672 this.hasProjected = false; 25673 this.isVisible = true; 25674 this.animationProgress = 0; 25675 /** 25676 * Shared layout 25677 */ 25678 // TODO Only running on root node 25679 this.sharedNodes = new Map(); 25680 this.latestValues = latestValues; 25681 this.root = parent ? parent.root || parent : this; 25682 this.path = parent ? [...parent.path, parent] : []; 25683 this.parent = parent; 25684 this.depth = parent ? parent.depth + 1 : 0; 25685 for (let i = 0; i < this.path.length; i++) { 25686 this.path[i].shouldResetTransform = true; 25687 } 25688 if (this.root === this) 25689 this.nodes = new FlatTree(); 25690 } 25691 addEventListener(name, handler) { 25692 if (!this.eventHandlers.has(name)) { 25693 this.eventHandlers.set(name, new SubscriptionManager()); 25694 } 25695 return this.eventHandlers.get(name).add(handler); 25696 } 25697 notifyListeners(name, ...args) { 25698 const subscriptionManager = this.eventHandlers.get(name); 25699 subscriptionManager && subscriptionManager.notify(...args); 25700 } 25701 hasListeners(name) { 25702 return this.eventHandlers.has(name); 25703 } 25704 /** 25705 * Lifecycles 25706 */ 25707 mount(instance, isLayoutDirty = this.root.hasTreeAnimated) { 25708 if (this.instance) 25709 return; 25710 this.isSVG = isSVGElement(instance); 25711 this.instance = instance; 25712 const { layoutId, layout, visualElement } = this.options; 25713 if (visualElement && !visualElement.current) { 25714 visualElement.mount(instance); 25715 } 25716 this.root.nodes.add(this); 25717 this.parent && this.parent.children.add(this); 25718 if (isLayoutDirty && (layout || layoutId)) { 25719 this.isLayoutDirty = true; 25720 } 25721 if (attachResizeListener) { 25722 let cancelDelay; 25723 const resizeUnblockUpdate = () => (this.root.updateBlockedByResize = false); 25724 attachResizeListener(instance, () => { 25725 this.root.updateBlockedByResize = true; 25726 cancelDelay && cancelDelay();
vendor: 3,264 bytes, lines 25727-25783
25727 cancelDelay = delay(resizeUnblockUpdate, 250); 25728 if (globalProjectionState.hasAnimatedSinceResize) { 25729 globalProjectionState.hasAnimatedSinceResize = false; 25730 this.nodes.forEach(finishAnimation); 25731 } 25732 }); 25733 } 25734 if (layoutId) { 25735 this.root.registerSharedNode(layoutId, this); 25736 } 25737 // Only register the handler if it requires layout animation 25738 if (this.options.animate !== false && 25739 visualElement && 25740 (layoutId || layout)) { 25741 this.addEventListener("didUpdate", ({ delta, hasLayoutChanged, hasRelativeTargetChanged, layout: newLayout, }) => { 25742 if (this.isTreeAnimationBlocked()) { 25743 this.target = undefined; 25744 this.relativeTarget = undefined; 25745 return; 25746 } 25747 // TODO: Check here if an animation exists 25748 const layoutTransition = this.options.transition || 25749 visualElement.getDefaultTransition() || 25750 defaultLayoutTransition; 25751 const { onLayoutAnimationStart, onLayoutAnimationComplete, } = visualElement.getProps(); 25752 /** 25753 * The target layout of the element might stay the same, 25754 * but its position relative to its parent has changed. 25755 */ 25756 const targetChanged = !this.targetLayout || 25757 !boxEquals(this.targetLayout, newLayout) || 25758 hasRelativeTargetChanged; 25759 /** 25760 * If the layout hasn't seemed to have changed, it might be that the 25761 * element is visually in the same place in the document but its position 25762 * relative to its parent has indeed changed. So here we check for that. 25763 */ 25764 const hasOnlyRelativeTargetChanged = !hasLayoutChanged && hasRelativeTargetChanged; 25765 if (this.options.layoutRoot || 25766 (this.resumeFrom && this.resumeFrom.instance) || 25767 hasOnlyRelativeTargetChanged || 25768 (hasLayoutChanged && 25769 (targetChanged || !this.currentAnimation))) { 25770 if (this.resumeFrom) { 25771 this.resumingFrom = this.resumeFrom; 25772 this.resumingFrom.resumingFrom = undefined; 25773 } 25774 this.setAnimationOrigin(delta, hasOnlyRelativeTargetChanged); 25775 const animationOptions = { 25776 ...getValueTransition(layoutTransition, "layout"), 25777 onPlay: onLayoutAnimationStart, 25778 onComplete: onLayoutAnimationComplete, 25779 }; 25780 if (visualElement.shouldReduceMotion || 25781 this.options.layoutRoot) { 25782 animationOptions.delay = 0; 25783 animationOptions.type = false;
vendor: 8,253 bytes, lines 25784-25986
25784 } 25785 this.startAnimation(animationOptions); 25786 } 25787 else { 25788 /** 25789 * If the layout hasn't changed and we have an animation that hasn't started yet, 25790 * finish it immediately. Otherwise it will be animating from a location 25791 * that was probably never commited to screen and look like a jumpy box. 25792 */ 25793 if (!hasLayoutChanged) { 25794 finishAnimation(this); 25795 } 25796 if (this.isLead() && this.options.onExitComplete) { 25797 this.options.onExitComplete(); 25798 } 25799 } 25800 this.targetLayout = newLayout; 25801 }); 25802 } 25803 } 25804 unmount() { 25805 this.options.layoutId && this.willUpdate(); 25806 this.root.nodes.remove(this); 25807 const stack = this.getStack(); 25808 stack && stack.remove(this); 25809 this.parent && this.parent.children.delete(this); 25810 this.instance = undefined; 25811 cancelFrame(this.updateProjection); 25812 } 25813 // only on the root 25814 blockUpdate() { 25815 this.updateManuallyBlocked = true; 25816 } 25817 unblockUpdate() { 25818 this.updateManuallyBlocked = false; 25819 } 25820 isUpdateBlocked() { 25821 return this.updateManuallyBlocked || this.updateBlockedByResize; 25822 } 25823 isTreeAnimationBlocked() { 25824 return (this.isAnimationBlocked || 25825 (this.parent && this.parent.isTreeAnimationBlocked()) || 25826 false); 25827 } 25828 // Note: currently only running on root node 25829 startUpdate() { 25830 if (this.isUpdateBlocked()) 25831 return; 25832 this.isUpdating = true; 25833 this.nodes && this.nodes.forEach(resetRotation); 25834 this.animationId++; 25835 } 25836 getTransformTemplate() { 25837 const { visualElement } = this.options; 25838 return visualElement && visualElement.getProps().transformTemplate; 25839 } 25840 willUpdate(shouldNotifyListeners = true) { 25841 this.root.hasTreeAnimated = true; 25842 if (this.root.isUpdateBlocked()) { 25843 this.options.onExitComplete && this.options.onExitComplete(); 25844 return; 25845 } 25846 !this.root.isUpdating && this.root.startUpdate(); 25847 if (this.isLayoutDirty) 25848 return; 25849 this.isLayoutDirty = true; 25850 for (let i = 0; i < this.path.length; i++) { 25851 const node = this.path[i]; 25852 node.shouldResetTransform = true; 25853 node.updateScroll("snapshot"); 25854 if (node.options.layoutRoot) { 25855 node.willUpdate(false); 25856 } 25857 } 25858 const { layoutId, layout } = this.options; 25859 if (layoutId === undefined && !layout) 25860 return; 25861 const transformTemplate = this.getTransformTemplate(); 25862 this.prevTransformTemplateValue = transformTemplate 25863 ? transformTemplate(this.latestValues, "") 25864 : undefined; 25865 this.updateSnapshot(); 25866 shouldNotifyListeners && this.notifyListeners("willUpdate"); 25867 } 25868 update() { 25869 this.updateScheduled = false; 25870 const updateWasBlocked = this.isUpdateBlocked(); 25871 // When doing an instant transition, we skip the layout update, 25872 // but should still clean up the measurements so that the next 25873 // snapshot could be taken correctly. 25874 if (updateWasBlocked) { 25875 this.unblockUpdate(); 25876 this.clearAllSnapshots(); 25877 this.nodes.forEach(clearMeasurements); 25878 return; 25879 } 25880 if (!this.isUpdating) { 25881 this.nodes.forEach(clearIsLayoutDirty); 25882 } 25883 this.isUpdating = false; 25884 /** 25885 * Write 25886 */ 25887 this.nodes.forEach(resetTransformStyle); 25888 /** 25889 * Read ================== 25890 */ 25891 // Update layout measurements of updated children 25892 this.nodes.forEach(updateLayout); 25893 /** 25894 * Write 25895 */ 25896 // Notify listeners that the layout is updated 25897 this.nodes.forEach(notifyLayoutUpdate); 25898 this.clearAllSnapshots(); 25899 /** 25900 * Manually flush any pending updates. Ideally 25901 * we could leave this to the following requestAnimationFrame but this seems 25902 * to leave a flash of incorrectly styled content. 25903 */ 25904 const now = performance.now(); 25905 frameData.delta = clamp_clamp(0, 1000 / 60, now - frameData.timestamp); 25906 frameData.timestamp = now; 25907 frameData.isProcessing = true; 25908 steps.update.process(frameData); 25909 steps.preRender.process(frameData); 25910 steps.render.process(frameData); 25911 frameData.isProcessing = false; 25912 } 25913 didUpdate() { 25914 if (!this.updateScheduled) { 25915 this.updateScheduled = true; 25916 queueMicrotask(() => this.update()); 25917 } 25918 } 25919 clearAllSnapshots() { 25920 this.nodes.forEach(clearSnapshot); 25921 this.sharedNodes.forEach(removeLeadSnapshots); 25922 } 25923 scheduleUpdateProjection() { 25924 frame_frame.preRender(this.updateProjection, false, true); 25925 } 25926 scheduleCheckAfterUnmount() { 25927 /** 25928 * If the unmounting node is in a layoutGroup and did trigger a willUpdate, 25929 * we manually call didUpdate to give a chance to the siblings to animate. 25930 * Otherwise, cleanup all snapshots to prevents future nodes from reusing them. 25931 */ 25932 frame_frame.postRender(() => { 25933 if (this.isLayoutDirty) { 25934 this.root.didUpdate(); 25935 } 25936 else { 25937 this.root.checkUpdateFailed(); 25938 } 25939 }); 25940 } 25941 /** 25942 * Update measurements 25943 */ 25944 updateSnapshot() { 25945 if (this.snapshot || !this.instance) 25946 return; 25947 this.snapshot = this.measure(); 25948 } 25949 updateLayout() { 25950 if (!this.instance) 25951 return; 25952 // TODO: Incorporate into a forwarded scroll offset 25953 this.updateScroll(); 25954 if (!(this.options.alwaysMeasureLayout && this.isLead()) && 25955 !this.isLayoutDirty) { 25956 return; 25957 } 25958 /** 25959 * When a node is mounted, it simply resumes from the prevLead's 25960 * snapshot instead of taking a new one, but the ancestors scroll 25961 * might have updated while the prevLead is unmounted. We need to 25962 * update the scroll again to make sure the layout we measure is 25963 * up to date. 25964 */ 25965 if (this.resumeFrom && !this.resumeFrom.instance) { 25966 for (let i = 0; i < this.path.length; i++) { 25967 const node = this.path[i]; 25968 node.updateScroll(); 25969 } 25970 } 25971 const prevLayout = this.layout; 25972 this.layout = this.measure(false); 25973 this.layoutCorrected = createBox(); 25974 this.isLayoutDirty = false; 25975 this.projectionDelta = undefined; 25976 this.notifyListeners("measure", this.layout.layoutBox); 25977 const { visualElement } = this.options; 25978 visualElement && 25979 visualElement.notify("LayoutMeasure", this.layout.layoutBox, prevLayout ? prevLayout.layoutBox : undefined); 25980 } 25981 updateScroll(phase = "measure") { 25982 let needsMeasurement = Boolean(this.options.layoutScroll && this.instance); 25983 if (this.scroll && 25984 this.scroll.animationId === this.root.animationId && 25985 this.scroll.phase === phase) { 25986 needsMeasurement = false;
vendor: 4,428 bytes, lines 25987-26089
25987 } 25988 if (needsMeasurement) { 25989 this.scroll = { 25990 animationId: this.root.animationId, 25991 phase, 25992 isRoot: checkIsScrollRoot(this.instance), 25993 offset: measureScroll(this.instance), 25994 }; 25995 } 25996 } 25997 resetTransform() { 25998 if (!resetTransform) 25999 return; 26000 const isResetRequested = this.isLayoutDirty || this.shouldResetTransform; 26001 const hasProjection = this.projectionDelta && !isDeltaZero(this.projectionDelta); 26002 const transformTemplate = this.getTransformTemplate(); 26003 const transformTemplateValue = transformTemplate 26004 ? transformTemplate(this.latestValues, "") 26005 : undefined; 26006 const transformTemplateHasChanged = transformTemplateValue !== this.prevTransformTemplateValue; 26007 if (isResetRequested && 26008 (hasProjection || 26009 hasTransform(this.latestValues) || 26010 transformTemplateHasChanged)) { 26011 resetTransform(this.instance, transformTemplateValue); 26012 this.shouldResetTransform = false; 26013 this.scheduleRender(); 26014 } 26015 } 26016 measure(removeTransform = true) { 26017 const pageBox = this.measurePageBox(); 26018 let layoutBox = this.removeElementScroll(pageBox); 26019 /** 26020 * Measurements taken during the pre-render stage 26021 * still have transforms applied so we remove them 26022 * via calculation. 26023 */ 26024 if (removeTransform) { 26025 layoutBox = this.removeTransform(layoutBox); 26026 } 26027 roundBox(layoutBox); 26028 return { 26029 animationId: this.root.animationId, 26030 measuredBox: pageBox, 26031 layoutBox, 26032 latestValues: {}, 26033 source: this.id, 26034 }; 26035 } 26036 measurePageBox() { 26037 const { visualElement } = this.options; 26038 if (!visualElement) 26039 return createBox(); 26040 const box = visualElement.measureViewportBox(); 26041 // Remove viewport scroll to give page-relative coordinates 26042 const { scroll } = this.root; 26043 if (scroll) { 26044 translateAxis(box.x, scroll.offset.x); 26045 translateAxis(box.y, scroll.offset.y); 26046 } 26047 return box; 26048 } 26049 removeElementScroll(box) { 26050 const boxWithoutScroll = createBox(); 26051 copyBoxInto(boxWithoutScroll, box); 26052 /** 26053 * Performance TODO: Keep a cumulative scroll offset down the tree 26054 * rather than loop back up the path. 26055 */ 26056 for (let i = 0; i < this.path.length; i++) { 26057 const node = this.path[i]; 26058 const { scroll, options } = node; 26059 if (node !== this.root && scroll && options.layoutScroll) { 26060 /** 26061 * If this is a new scroll root, we want to remove all previous scrolls 26062 * from the viewport box. 26063 */ 26064 if (scroll.isRoot) { 26065 copyBoxInto(boxWithoutScroll, box); 26066 const { scroll: rootScroll } = this.root; 26067 /** 26068 * Undo the application of page scroll that was originally added 26069 * to the measured bounding box. 26070 */ 26071 if (rootScroll) { 26072 translateAxis(boxWithoutScroll.x, -rootScroll.offset.x); 26073 translateAxis(boxWithoutScroll.y, -rootScroll.offset.y); 26074 } 26075 } 26076 translateAxis(boxWithoutScroll.x, scroll.offset.x); 26077 translateAxis(boxWithoutScroll.y, scroll.offset.y); 26078 } 26079 } 26080 return boxWithoutScroll; 26081 } 26082 applyTransform(box, transformOnly = false) { 26083 const withTransforms = createBox(); 26084 copyBoxInto(withTransforms, box); 26085 for (let i = 0; i < this.path.length; i++) { 26086 const node = this.path[i]; 26087 if (!transformOnly && 26088 node.options.layoutScroll && 26089 node.scroll &&
vendor: 20,104 bytes, lines 26090-26524
26090 node !== node.root) { 26091 transformBox(withTransforms, { 26092 x: -node.scroll.offset.x, 26093 y: -node.scroll.offset.y, 26094 }); 26095 } 26096 if (!hasTransform(node.latestValues)) 26097 continue; 26098 transformBox(withTransforms, node.latestValues); 26099 } 26100 if (hasTransform(this.latestValues)) { 26101 transformBox(withTransforms, this.latestValues); 26102 } 26103 return withTransforms; 26104 } 26105 removeTransform(box) { 26106 const boxWithoutTransform = createBox(); 26107 copyBoxInto(boxWithoutTransform, box); 26108 for (let i = 0; i < this.path.length; i++) { 26109 const node = this.path[i]; 26110 if (!node.instance) 26111 continue; 26112 if (!hasTransform(node.latestValues)) 26113 continue; 26114 hasScale(node.latestValues) && node.updateSnapshot(); 26115 const sourceBox = createBox(); 26116 const nodeBox = node.measurePageBox(); 26117 copyBoxInto(sourceBox, nodeBox); 26118 removeBoxTransforms(boxWithoutTransform, node.latestValues, node.snapshot ? node.snapshot.layoutBox : undefined, sourceBox); 26119 } 26120 if (hasTransform(this.latestValues)) { 26121 removeBoxTransforms(boxWithoutTransform, this.latestValues); 26122 } 26123 return boxWithoutTransform; 26124 } 26125 setTargetDelta(delta) { 26126 this.targetDelta = delta; 26127 this.root.scheduleUpdateProjection(); 26128 this.isProjectionDirty = true; 26129 } 26130 setOptions(options) { 26131 this.options = { 26132 ...this.options, 26133 ...options, 26134 crossfade: options.crossfade !== undefined ? options.crossfade : true, 26135 }; 26136 } 26137 clearMeasurements() { 26138 this.scroll = undefined; 26139 this.layout = undefined; 26140 this.snapshot = undefined; 26141 this.prevTransformTemplateValue = undefined; 26142 this.targetDelta = undefined; 26143 this.target = undefined; 26144 this.isLayoutDirty = false; 26145 } 26146 forceRelativeParentToResolveTarget() { 26147 if (!this.relativeParent) 26148 return; 26149 /** 26150 * If the parent target isn't up-to-date, force it to update. 26151 * This is an unfortunate de-optimisation as it means any updating relative 26152 * projection will cause all the relative parents to recalculate back 26153 * up the tree. 26154 */ 26155 if (this.relativeParent.resolvedRelativeTargetAt !== 26156 frameData.timestamp) { 26157 this.relativeParent.resolveTargetDelta(true); 26158 } 26159 } 26160 resolveTargetDelta(forceRecalculation = false) { 26161 var _a; 26162 /** 26163 * Once the dirty status of nodes has been spread through the tree, we also 26164 * need to check if we have a shared node of a different depth that has itself 26165 * been dirtied. 26166 */ 26167 const lead = this.getLead(); 26168 this.isProjectionDirty || (this.isProjectionDirty = lead.isProjectionDirty); 26169 this.isTransformDirty || (this.isTransformDirty = lead.isTransformDirty); 26170 this.isSharedProjectionDirty || (this.isSharedProjectionDirty = lead.isSharedProjectionDirty); 26171 const isShared = Boolean(this.resumingFrom) || this !== lead; 26172 /** 26173 * We don't use transform for this step of processing so we don't 26174 * need to check whether any nodes have changed transform. 26175 */ 26176 const canSkip = !(forceRecalculation || 26177 (isShared && this.isSharedProjectionDirty) || 26178 this.isProjectionDirty || 26179 ((_a = this.parent) === null || _a === void 0 ? void 0 : _a.isProjectionDirty) || 26180 this.attemptToResolveRelativeTarget); 26181 if (canSkip) 26182 return; 26183 const { layout, layoutId } = this.options; 26184 /** 26185 * If we have no layout, we can't perform projection, so early return 26186 */ 26187 if (!this.layout || !(layout || layoutId)) 26188 return; 26189 this.resolvedRelativeTargetAt = frameData.timestamp; 26190 /** 26191 * If we don't have a targetDelta but do have a layout, we can attempt to resolve 26192 * a relativeParent. This will allow a component to perform scale correction 26193 * even if no animation has started. 26194 */ 26195 // TODO If this is unsuccessful this currently happens every frame 26196 if (!this.targetDelta && !this.relativeTarget) { 26197 // TODO: This is a semi-repetition of further down this function, make DRY 26198 const relativeParent = this.getClosestProjectingParent(); 26199 if (relativeParent && 26200 relativeParent.layout && 26201 this.animationProgress !== 1) { 26202 this.relativeParent = relativeParent; 26203 this.forceRelativeParentToResolveTarget(); 26204 this.relativeTarget = createBox(); 26205 this.relativeTargetOrigin = createBox(); 26206 calcRelativePosition(this.relativeTargetOrigin, this.layout.layoutBox, relativeParent.layout.layoutBox); 26207 copyBoxInto(this.relativeTarget, this.relativeTargetOrigin); 26208 } 26209 else { 26210 this.relativeParent = this.relativeTarget = undefined; 26211 } 26212 } 26213 /** 26214 * If we have no relative target or no target delta our target isn't valid 26215 * for this frame. 26216 */ 26217 if (!this.relativeTarget && !this.targetDelta) 26218 return; 26219 /** 26220 * Lazy-init target data structure 26221 */ 26222 if (!this.target) { 26223 this.target = createBox(); 26224 this.targetWithTransforms = createBox(); 26225 } 26226 /** 26227 * If we've got a relative box for this component, resolve it into a target relative to the parent. 26228 */ 26229 if (this.relativeTarget && 26230 this.relativeTargetOrigin && 26231 this.relativeParent && 26232 this.relativeParent.target) { 26233 this.forceRelativeParentToResolveTarget(); 26234 calcRelativeBox(this.target, this.relativeTarget, this.relativeParent.target); 26235 /** 26236 * If we've only got a targetDelta, resolve it into a target 26237 */ 26238 } 26239 else if (this.targetDelta) { 26240 if (Boolean(this.resumingFrom)) { 26241 // TODO: This is creating a new object every frame 26242 this.target = this.applyTransform(this.layout.layoutBox); 26243 } 26244 else { 26245 copyBoxInto(this.target, this.layout.layoutBox); 26246 } 26247 applyBoxDelta(this.target, this.targetDelta); 26248 } 26249 else { 26250 /** 26251 * If no target, use own layout as target 26252 */ 26253 copyBoxInto(this.target, this.layout.layoutBox); 26254 } 26255 /** 26256 * If we've been told to attempt to resolve a relative target, do so. 26257 */ 26258 if (this.attemptToResolveRelativeTarget) { 26259 this.attemptToResolveRelativeTarget = false; 26260 const relativeParent = this.getClosestProjectingParent(); 26261 if (relativeParent && 26262 Boolean(relativeParent.resumingFrom) === 26263 Boolean(this.resumingFrom) && 26264 !relativeParent.options.layoutScroll && 26265 relativeParent.target && 26266 this.animationProgress !== 1) { 26267 this.relativeParent = relativeParent; 26268 this.forceRelativeParentToResolveTarget(); 26269 this.relativeTarget = createBox(); 26270 this.relativeTargetOrigin = createBox(); 26271 calcRelativePosition(this.relativeTargetOrigin, this.target, relativeParent.target); 26272 copyBoxInto(this.relativeTarget, this.relativeTargetOrigin); 26273 } 26274 else { 26275 this.relativeParent = this.relativeTarget = undefined; 26276 } 26277 } 26278 /** 26279 * Increase debug counter for resolved target deltas 26280 */ 26281 projectionFrameData.resolvedTargetDeltas++; 26282 } 26283 getClosestProjectingParent() { 26284 if (!this.parent || 26285 hasScale(this.parent.latestValues) || 26286 has2DTranslate(this.parent.latestValues)) { 26287 return undefined; 26288 } 26289 if (this.parent.isProjecting()) { 26290 return this.parent; 26291 } 26292 else { 26293 return this.parent.getClosestProjectingParent(); 26294 } 26295 } 26296 isProjecting() { 26297 return Boolean((this.relativeTarget || 26298 this.targetDelta || 26299 this.options.layoutRoot) && 26300 this.layout); 26301 } 26302 calcProjection() { 26303 var _a; 26304 const lead = this.getLead(); 26305 const isShared = Boolean(this.resumingFrom) || this !== lead; 26306 let canSkip = true; 26307 /** 26308 * If this is a normal layout animation and neither this node nor its nearest projecting 26309 * is dirty then we can't skip. 26310 */ 26311 if (this.isProjectionDirty || ((_a = this.parent) === null || _a === void 0 ? void 0 : _a.isProjectionDirty)) { 26312 canSkip = false; 26313 } 26314 /** 26315 * If this is a shared layout animation and this node's shared projection is dirty then 26316 * we can't skip. 26317 */ 26318 if (isShared && 26319 (this.isSharedProjectionDirty || this.isTransformDirty)) { 26320 canSkip = false; 26321 } 26322 /** 26323 * If we have resolved the target this frame we must recalculate the 26324 * projection to ensure it visually represents the internal calculations. 26325 */ 26326 if (this.resolvedRelativeTargetAt === frameData.timestamp) { 26327 canSkip = false; 26328 } 26329 if (canSkip) 26330 return; 26331 const { layout, layoutId } = this.options; 26332 /** 26333 * If this section of the tree isn't animating we can 26334 * delete our target sources for the following frame. 26335 */ 26336 this.isTreeAnimating = Boolean((this.parent && this.parent.isTreeAnimating) || 26337 this.currentAnimation || 26338 this.pendingAnimation); 26339 if (!this.isTreeAnimating) { 26340 this.targetDelta = this.relativeTarget = undefined; 26341 } 26342 if (!this.layout || !(layout || layoutId)) 26343 return; 26344 /** 26345 * Reset the corrected box with the latest values from box, as we're then going 26346 * to perform mutative operations on it. 26347 */ 26348 copyBoxInto(this.layoutCorrected, this.layout.layoutBox); 26349 /** 26350 * Record previous tree scales before updating. 26351 */ 26352 const prevTreeScaleX = this.treeScale.x; 26353 const prevTreeScaleY = this.treeScale.y; 26354 /** 26355 * Apply all the parent deltas to this box to produce the corrected box. This 26356 * is the layout box, as it will appear on screen as a result of the transforms of its parents. 26357 */ 26358 applyTreeDeltas(this.layoutCorrected, this.treeScale, this.path, isShared); 26359 /** 26360 * If this layer needs to perform scale correction but doesn't have a target, 26361 * use the layout as the target. 26362 */ 26363 if (lead.layout && 26364 !lead.target && 26365 (this.treeScale.x !== 1 || this.treeScale.y !== 1)) { 26366 lead.target = lead.layout.layoutBox; 26367 } 26368 const { target } = lead; 26369 if (!target) { 26370 /** 26371 * If we don't have a target to project into, but we were previously 26372 * projecting, we want to remove the stored transform and schedule 26373 * a render to ensure the elements reflect the removed transform. 26374 */ 26375 if (this.projectionTransform) { 26376 this.projectionDelta = createDelta(); 26377 this.projectionTransform = "none"; 26378 this.scheduleRender(); 26379 } 26380 return; 26381 } 26382 if (!this.projectionDelta) { 26383 this.projectionDelta = createDelta(); 26384 this.projectionDeltaWithTransform = createDelta(); 26385 } 26386 const prevProjectionTransform = this.projectionTransform; 26387 /** 26388 * Update the delta between the corrected box and the target box before user-set transforms were applied. 26389 * This will allow us to calculate the corrected borderRadius and boxShadow to compensate 26390 * for our layout reprojection, but still allow them to be scaled correctly by the user. 26391 * It might be that to simplify this we may want to accept that user-set scale is also corrected 26392 * and we wouldn't have to keep and calc both deltas, OR we could support a user setting 26393 * to allow people to choose whether these styles are corrected based on just the 26394 * layout reprojection or the final bounding box. 26395 */ 26396 calcBoxDelta(this.projectionDelta, this.layoutCorrected, target, this.latestValues); 26397 this.projectionTransform = buildProjectionTransform(this.projectionDelta, this.treeScale); 26398 if (this.projectionTransform !== prevProjectionTransform || 26399 this.treeScale.x !== prevTreeScaleX || 26400 this.treeScale.y !== prevTreeScaleY) { 26401 this.hasProjected = true; 26402 this.scheduleRender(); 26403 this.notifyListeners("projectionUpdate", target); 26404 } 26405 /** 26406 * Increase debug counter for recalculated projections 26407 */ 26408 projectionFrameData.recalculatedProjection++; 26409 } 26410 hide() { 26411 this.isVisible = false; 26412 // TODO: Schedule render 26413 } 26414 show() { 26415 this.isVisible = true; 26416 // TODO: Schedule render 26417 } 26418 scheduleRender(notifyAll = true) { 26419 this.options.scheduleRender && this.options.scheduleRender(); 26420 if (notifyAll) { 26421 const stack = this.getStack(); 26422 stack && stack.scheduleRender(); 26423 } 26424 if (this.resumingFrom && !this.resumingFrom.instance) { 26425 this.resumingFrom = undefined; 26426 } 26427 } 26428 setAnimationOrigin(delta, hasOnlyRelativeTargetChanged = false) { 26429 const snapshot = this.snapshot; 26430 const snapshotLatestValues = snapshot 26431 ? snapshot.latestValues 26432 : {}; 26433 const mixedValues = { ...this.latestValues }; 26434 const targetDelta = createDelta(); 26435 if (!this.relativeParent || 26436 !this.relativeParent.options.layoutRoot) { 26437 this.relativeTarget = this.relativeTargetOrigin = undefined; 26438 } 26439 this.attemptToResolveRelativeTarget = !hasOnlyRelativeTargetChanged; 26440 const relativeLayout = createBox(); 26441 const snapshotSource = snapshot ? snapshot.source : undefined; 26442 const layoutSource = this.layout ? this.layout.source : undefined; 26443 const isSharedLayoutAnimation = snapshotSource !== layoutSource; 26444 const stack = this.getStack(); 26445 const isOnlyMember = !stack || stack.members.length <= 1; 26446 const shouldCrossfadeOpacity = Boolean(isSharedLayoutAnimation && 26447 !isOnlyMember && 26448 this.options.crossfade === true && 26449 !this.path.some(hasOpacityCrossfade)); 26450 this.animationProgress = 0; 26451 let prevRelativeTarget; 26452 this.mixTargetDelta = (latest) => { 26453 const progress = latest / 1000; 26454 mixAxisDelta(targetDelta.x, delta.x, progress); 26455 mixAxisDelta(targetDelta.y, delta.y, progress); 26456 this.setTargetDelta(targetDelta); 26457 if (this.relativeTarget && 26458 this.relativeTargetOrigin && 26459 this.layout && 26460 this.relativeParent && 26461 this.relativeParent.layout) { 26462 calcRelativePosition(relativeLayout, this.layout.layoutBox, this.relativeParent.layout.layoutBox); 26463 mixBox(this.relativeTarget, this.relativeTargetOrigin, relativeLayout, progress); 26464 /** 26465 * If this is an unchanged relative target we can consider the 26466 * projection not dirty. 26467 */ 26468 if (prevRelativeTarget && 26469 boxEquals(this.relativeTarget, prevRelativeTarget)) { 26470 this.isProjectionDirty = false; 26471 } 26472 if (!prevRelativeTarget) 26473 prevRelativeTarget = createBox(); 26474 copyBoxInto(prevRelativeTarget, this.relativeTarget); 26475 } 26476 if (isSharedLayoutAnimation) { 26477 this.animationValues = mixedValues; 26478 mixValues(mixedValues, snapshotLatestValues, this.latestValues, progress, shouldCrossfadeOpacity, isOnlyMember); 26479 } 26480 this.root.scheduleUpdateProjection(); 26481 this.scheduleRender(); 26482 this.animationProgress = progress; 26483 }; 26484 this.mixTargetDelta(this.options.layoutRoot ? 1000 : 0); 26485 } 26486 startAnimation(options) { 26487 this.notifyListeners("animationStart"); 26488 this.currentAnimation && this.currentAnimation.stop(); 26489 if (this.resumingFrom && this.resumingFrom.currentAnimation) { 26490 this.resumingFrom.currentAnimation.stop(); 26491 } 26492 if (this.pendingAnimation) { 26493 cancelFrame(this.pendingAnimation); 26494 this.pendingAnimation = undefined; 26495 } 26496 /** 26497 * Start the animation in the next frame to have a frame with progress 0, 26498 * where the target is the same as when the animation started, so we can 26499 * calculate the relative positions correctly for instant transitions. 26500 */ 26501 this.pendingAnimation = frame_frame.update(() => { 26502 globalProjectionState.hasAnimatedSinceResize = true; 26503 this.currentAnimation = animateSingleValue(0, animationTarget, { 26504 ...options, 26505 onUpdate: (latest) => { 26506 this.mixTargetDelta(latest); 26507 options.onUpdate && options.onUpdate(latest); 26508 }, 26509 onComplete: () => { 26510 options.onComplete && options.onComplete(); 26511 this.completeAnimation(); 26512 }, 26513 }); 26514 if (this.resumingFrom) { 26515 this.resumingFrom.currentAnimation = this.currentAnimation; 26516 } 26517 this.pendingAnimation = undefined; 26518 }); 26519 } 26520 completeAnimation() { 26521 if (this.resumingFrom) { 26522 this.resumingFrom.currentAnimation = undefined; 26523 this.resumingFrom.preserveOpacity = undefined; 26524 }
vendor: 10,699 bytes, lines 26525-26762
26525 const stack = this.getStack(); 26526 stack && stack.exitAnimationComplete(); 26527 this.resumingFrom = 26528 this.currentAnimation = 26529 this.animationValues = 26530 undefined; 26531 this.notifyListeners("animationComplete"); 26532 } 26533 finishAnimation() { 26534 if (this.currentAnimation) { 26535 this.mixTargetDelta && this.mixTargetDelta(animationTarget); 26536 this.currentAnimation.stop(); 26537 } 26538 this.completeAnimation(); 26539 } 26540 applyTransformsToTarget() { 26541 const lead = this.getLead(); 26542 let { targetWithTransforms, target, layout, latestValues } = lead; 26543 if (!targetWithTransforms || !target || !layout) 26544 return; 26545 /** 26546 * If we're only animating position, and this element isn't the lead element, 26547 * then instead of projecting into the lead box we instead want to calculate 26548 * a new target that aligns the two boxes but maintains the layout shape. 26549 */ 26550 if (this !== lead && 26551 this.layout && 26552 layout && 26553 shouldAnimatePositionOnly(this.options.animationType, this.layout.layoutBox, layout.layoutBox)) { 26554 target = this.target || createBox(); 26555 const xLength = calcLength(this.layout.layoutBox.x); 26556 target.x.min = lead.target.x.min; 26557 target.x.max = target.x.min + xLength; 26558 const yLength = calcLength(this.layout.layoutBox.y); 26559 target.y.min = lead.target.y.min; 26560 target.y.max = target.y.min + yLength; 26561 } 26562 copyBoxInto(targetWithTransforms, target); 26563 /** 26564 * Apply the latest user-set transforms to the targetBox to produce the targetBoxFinal. 26565 * This is the final box that we will then project into by calculating a transform delta and 26566 * applying it to the corrected box. 26567 */ 26568 transformBox(targetWithTransforms, latestValues); 26569 /** 26570 * Update the delta between the corrected box and the final target box, after 26571 * user-set transforms are applied to it. This will be used by the renderer to 26572 * create a transform style that will reproject the element from its layout layout 26573 * into the desired bounding box. 26574 */ 26575 calcBoxDelta(this.projectionDeltaWithTransform, this.layoutCorrected, targetWithTransforms, latestValues); 26576 } 26577 registerSharedNode(layoutId, node) { 26578 if (!this.sharedNodes.has(layoutId)) { 26579 this.sharedNodes.set(layoutId, new NodeStack()); 26580 } 26581 const stack = this.sharedNodes.get(layoutId); 26582 stack.add(node); 26583 const config = node.options.initialPromotionConfig; 26584 node.promote({ 26585 transition: config ? config.transition : undefined, 26586 preserveFollowOpacity: config && config.shouldPreserveFollowOpacity 26587 ? config.shouldPreserveFollowOpacity(node) 26588 : undefined, 26589 }); 26590 } 26591 isLead() { 26592 const stack = this.getStack(); 26593 return stack ? stack.lead === this : true; 26594 } 26595 getLead() { 26596 var _a; 26597 const { layoutId } = this.options; 26598 return layoutId ? ((_a = this.getStack()) === null || _a === void 0 ? void 0 : _a.lead) || this : this; 26599 } 26600 getPrevLead() { 26601 var _a; 26602 const { layoutId } = this.options; 26603 return layoutId ? (_a = this.getStack()) === null || _a === void 0 ? void 0 : _a.prevLead : undefined; 26604 } 26605 getStack() { 26606 const { layoutId } = this.options; 26607 if (layoutId) 26608 return this.root.sharedNodes.get(layoutId); 26609 } 26610 promote({ needsReset, transition, preserveFollowOpacity, } = {}) { 26611 const stack = this.getStack(); 26612 if (stack) 26613 stack.promote(this, preserveFollowOpacity); 26614 if (needsReset) { 26615 this.projectionDelta = undefined; 26616 this.needsReset = true; 26617 } 26618 if (transition) 26619 this.setOptions({ transition }); 26620 } 26621 relegate() { 26622 const stack = this.getStack(); 26623 if (stack) { 26624 return stack.relegate(this); 26625 } 26626 else { 26627 return false; 26628 } 26629 } 26630 resetRotation() { 26631 const { visualElement } = this.options; 26632 if (!visualElement) 26633 return; 26634 // If there's no detected rotation values, we can early return without a forced render. 26635 let hasRotate = false; 26636 /** 26637 * An unrolled check for rotation values. Most elements don't have any rotation and 26638 * skipping the nested loop and new object creation is 50% faster. 26639 */ 26640 const { latestValues } = visualElement; 26641 if (latestValues.rotate || 26642 latestValues.rotateX || 26643 latestValues.rotateY || 26644 latestValues.rotateZ) { 26645 hasRotate = true; 26646 } 26647 // If there's no rotation values, we don't need to do any more. 26648 if (!hasRotate) 26649 return; 26650 const resetValues = {}; 26651 // Check the rotate value of all axes and reset to 0 26652 for (let i = 0; i < transformAxes.length; i++) { 26653 const key = "rotate" + transformAxes[i]; 26654 // Record the rotation and then temporarily set it to 0 26655 if (latestValues[key]) { 26656 resetValues[key] = latestValues[key]; 26657 visualElement.setStaticValue(key, 0); 26658 } 26659 } 26660 // Force a render of this element to apply the transform with all rotations 26661 // set to 0. 26662 visualElement.render(); 26663 // Put back all the values we reset 26664 for (const key in resetValues) { 26665 visualElement.setStaticValue(key, resetValues[key]); 26666 } 26667 // Schedule a render for the next frame. This ensures we won't visually 26668 // see the element with the reset rotate value applied. 26669 visualElement.scheduleRender(); 26670 } 26671 getProjectionStyles(styleProp = {}) { 26672 var _a, _b; 26673 // TODO: Return lifecycle-persistent object 26674 const styles = {}; 26675 if (!this.instance || this.isSVG) 26676 return styles; 26677 if (!this.isVisible) { 26678 return { visibility: "hidden" }; 26679 } 26680 else { 26681 styles.visibility = ""; 26682 } 26683 const transformTemplate = this.getTransformTemplate(); 26684 if (this.needsReset) { 26685 this.needsReset = false; 26686 styles.opacity = ""; 26687 styles.pointerEvents = 26688 resolveMotionValue(styleProp.pointerEvents) || ""; 26689 styles.transform = transformTemplate 26690 ? transformTemplate(this.latestValues, "") 26691 : "none"; 26692 return styles; 26693 } 26694 const lead = this.getLead(); 26695 if (!this.projectionDelta || !this.layout || !lead.target) { 26696 const emptyStyles = {}; 26697 if (this.options.layoutId) { 26698 emptyStyles.opacity = 26699 this.latestValues.opacity !== undefined 26700 ? this.latestValues.opacity 26701 : 1; 26702 emptyStyles.pointerEvents = 26703 resolveMotionValue(styleProp.pointerEvents) || ""; 26704 } 26705 if (this.hasProjected && !hasTransform(this.latestValues)) { 26706 emptyStyles.transform = transformTemplate 26707 ? transformTemplate({}, "") 26708 : "none"; 26709 this.hasProjected = false; 26710 } 26711 return emptyStyles; 26712 } 26713 const valuesToRender = lead.animationValues || lead.latestValues; 26714 this.applyTransformsToTarget(); 26715 styles.transform = buildProjectionTransform(this.projectionDeltaWithTransform, this.treeScale, valuesToRender); 26716 if (transformTemplate) { 26717 styles.transform = transformTemplate(valuesToRender, styles.transform); 26718 } 26719 const { x, y } = this.projectionDelta; 26720 styles.transformOrigin = `${x.origin * 100}% ${y.origin * 100}% 0`; 26721 if (lead.animationValues) { 26722 /** 26723 * If the lead component is animating, assign this either the entering/leaving 26724 * opacity 26725 */ 26726 styles.opacity = 26727 lead === this 26728 ? (_b = (_a = valuesToRender.opacity) !== null && _a !== void 0 ? _a : this.latestValues.opacity) !== null && _b !== void 0 ? _b : 1 26729 : this.preserveOpacity 26730 ? this.latestValues.opacity 26731 : valuesToRender.opacityExit; 26732 } 26733 else { 26734 /** 26735 * Or we're not animating at all, set the lead component to its layout 26736 * opacity and other components to hidden. 26737 */ 26738 styles.opacity = 26739 lead === this 26740 ? valuesToRender.opacity !== undefined 26741 ? valuesToRender.opacity 26742 : "" 26743 : valuesToRender.opacityExit !== undefined 26744 ? valuesToRender.opacityExit 26745 : 0; 26746 } 26747 /** 26748 * Apply scale correction 26749 */ 26750 for (const key in scaleCorrectors) { 26751 if (valuesToRender[key] === undefined) 26752 continue; 26753 const { correct, applyTo } = scaleCorrectors[key]; 26754 /** 26755 * Only apply scale correction to the value if we have an 26756 * active projection transform. Otherwise these values become 26757 * vulnerable to distortion if the element changes size without 26758 * a corresponding layout animation. 26759 */ 26760 const corrected = styles.transform === "none" 26761 ? valuesToRender[key] 26762 : correct(valuesToRender[key], lead);
vendor: 6,872 bytes, lines 26763-26933
26763 if (applyTo) { 26764 const num = applyTo.length; 26765 for (let i = 0; i < num; i++) { 26766 styles[applyTo[i]] = corrected; 26767 } 26768 } 26769 else { 26770 styles[key] = corrected; 26771 } 26772 } 26773 /** 26774 * Disable pointer events on follow components. This is to ensure 26775 * that if a follow component covers a lead component it doesn't block 26776 * pointer events on the lead. 26777 */ 26778 if (this.options.layoutId) { 26779 styles.pointerEvents = 26780 lead === this 26781 ? resolveMotionValue(styleProp.pointerEvents) || "" 26782 : "none"; 26783 } 26784 return styles; 26785 } 26786 clearSnapshot() { 26787 this.resumeFrom = this.snapshot = undefined; 26788 } 26789 // Only run on root 26790 resetTree() { 26791 this.root.nodes.forEach((node) => { var _a; return (_a = node.currentAnimation) === null || _a === void 0 ? void 0 : _a.stop(); }); 26792 this.root.nodes.forEach(clearMeasurements); 26793 this.root.sharedNodes.clear(); 26794 } 26795 }; 26796} 26797function updateLayout(node) { 26798 node.updateLayout(); 26799} 26800function notifyLayoutUpdate(node) { 26801 var _a; 26802 const snapshot = ((_a = node.resumeFrom) === null || _a === void 0 ? void 0 : _a.snapshot) || node.snapshot; 26803 if (node.isLead() && 26804 node.layout && 26805 snapshot && 26806 node.hasListeners("didUpdate")) { 26807 const { layoutBox: layout, measuredBox: measuredLayout } = node.layout; 26808 const { animationType } = node.options; 26809 const isShared = snapshot.source !== node.layout.source; 26810 // TODO Maybe we want to also resize the layout snapshot so we don't trigger 26811 // animations for instance if layout="size" and an element has only changed position 26812 if (animationType === "size") { 26813 eachAxis((axis) => { 26814 const axisSnapshot = isShared 26815 ? snapshot.measuredBox[axis] 26816 : snapshot.layoutBox[axis]; 26817 const length = calcLength(axisSnapshot); 26818 axisSnapshot.min = layout[axis].min; 26819 axisSnapshot.max = axisSnapshot.min + length; 26820 }); 26821 } 26822 else if (shouldAnimatePositionOnly(animationType, snapshot.layoutBox, layout)) { 26823 eachAxis((axis) => { 26824 const axisSnapshot = isShared 26825 ? snapshot.measuredBox[axis] 26826 : snapshot.layoutBox[axis]; 26827 const length = calcLength(layout[axis]); 26828 axisSnapshot.max = axisSnapshot.min + length; 26829 /** 26830 * Ensure relative target gets resized and rerendererd 26831 */ 26832 if (node.relativeTarget && !node.currentAnimation) { 26833 node.isProjectionDirty = true; 26834 node.relativeTarget[axis].max = 26835 node.relativeTarget[axis].min + length; 26836 } 26837 }); 26838 } 26839 const layoutDelta = createDelta(); 26840 calcBoxDelta(layoutDelta, layout, snapshot.layoutBox); 26841 const visualDelta = createDelta(); 26842 if (isShared) { 26843 calcBoxDelta(visualDelta, node.applyTransform(measuredLayout, true), snapshot.measuredBox); 26844 } 26845 else { 26846 calcBoxDelta(visualDelta, layout, snapshot.layoutBox); 26847 } 26848 const hasLayoutChanged = !isDeltaZero(layoutDelta); 26849 let hasRelativeTargetChanged = false; 26850 if (!node.resumeFrom) { 26851 const relativeParent = node.getClosestProjectingParent(); 26852 /** 26853 * If the relativeParent is itself resuming from a different element then 26854 * the relative snapshot is not relavent 26855 */ 26856 if (relativeParent && !relativeParent.resumeFrom) { 26857 const { snapshot: parentSnapshot, layout: parentLayout } = relativeParent; 26858 if (parentSnapshot && parentLayout) { 26859 const relativeSnapshot = createBox(); 26860 calcRelativePosition(relativeSnapshot, snapshot.layoutBox, parentSnapshot.layoutBox); 26861 const relativeLayout = createBox(); 26862 calcRelativePosition(relativeLayout, layout, parentLayout.layoutBox); 26863 if (!boxEquals(relativeSnapshot, relativeLayout)) { 26864 hasRelativeTargetChanged = true; 26865 } 26866 if (relativeParent.options.layoutRoot) { 26867 node.relativeTarget = relativeLayout; 26868 node.relativeTargetOrigin = relativeSnapshot; 26869 node.relativeParent = relativeParent; 26870 } 26871 } 26872 } 26873 } 26874 node.notifyListeners("didUpdate", { 26875 layout, 26876 snapshot, 26877 delta: visualDelta, 26878 layoutDelta, 26879 hasLayoutChanged, 26880 hasRelativeTargetChanged, 26881 }); 26882 } 26883 else if (node.isLead()) { 26884 const { onExitComplete } = node.options; 26885 onExitComplete && onExitComplete(); 26886 } 26887 /** 26888 * Clearing transition 26889 * TODO: Investigate why this transition is being passed in as {type: false } from Framer 26890 * and why we need it at all 26891 */ 26892 node.options.transition = undefined; 26893} 26894function propagateDirtyNodes(node) { 26895 /** 26896 * Increase debug counter for nodes encountered this frame 26897 */ 26898 projectionFrameData.totalNodes++; 26899 if (!node.parent) 26900 return; 26901 /** 26902 * If this node isn't projecting, propagate isProjectionDirty. It will have 26903 * no performance impact but it will allow the next child that *is* projecting 26904 * but *isn't* dirty to just check its parent to see if *any* ancestor needs 26905 * correcting. 26906 */ 26907 if (!node.isProjecting()) { 26908 node.isProjectionDirty = node.parent.isProjectionDirty; 26909 } 26910 /** 26911 * Propagate isSharedProjectionDirty and isTransformDirty 26912 * throughout the whole tree. A future revision can take another look at 26913 * this but for safety we still recalcualte shared nodes. 26914 */ 26915 node.isSharedProjectionDirty || (node.isSharedProjectionDirty = Boolean(node.isProjectionDirty || 26916 node.parent.isProjectionDirty || 26917 node.parent.isSharedProjectionDirty)); 26918 node.isTransformDirty || (node.isTransformDirty = node.parent.isTransformDirty); 26919} 26920function cleanDirtyNodes(node) { 26921 node.isProjectionDirty = 26922 node.isSharedProjectionDirty = 26923 node.isTransformDirty = 26924 false; 26925} 26926function clearSnapshot(node) { 26927 node.clearSnapshot(); 26928} 26929function clearMeasurements(node) { 26930 node.clearMeasurements(); 26931} 26932function clearIsLayoutDirty(node) { 26933 node.isLayoutDirty = false;
26934} 26935function resetTransformStyle(node) { 26936 const { visualElement } = node.options; 26937 if (visualElement && visualElement.getProps().onBeforeLayoutMeasure) { 26938 visualElement.notify("BeforeLayoutMeasure"); 26939 } 26940 node.resetTransform(); 26941} 26942function finishAnimation(node) { 26943 node.finishAnimation(); 26944 node.targetDelta = node.relativeTarget = node.target = undefined; 26945 node.isProjectionDirty = true; 26946} 26947function resolveTargetDelta(node) { 26948 node.resolveTargetDelta(); 26949} 26950function calcProjection(node) { 26951 node.calcProjection(); 26952} 26953function resetRotation(node) { 26954 node.resetRotation(); 26955} 26956function removeLeadSnapshots(stack) { 26957 stack.removeLeadSnapshot(); 26958} 26959function mixAxisDelta(output, delta, p) { 26960 output.translate = mix(delta.translate, 0, p); 26961 output.scale = mix(delta.scale, 1, p); 26962 output.origin = delta.origin; 26963 output.originPoint = delta.originPoint; 26964} 26965function mixAxis(output, from, to, p) { 26966 output.min = mix(from.min, to.min, p); 26967 output.max = mix(from.max, to.max, p); 26968} 26969function mixBox(output, from, to, p) { 26970 mixAxis(output.x, from.x, to.x, p); 26971 mixAxis(output.y, from.y, to.y, p); 26972} 26973function hasOpacityCrossfade(node) { 26974 return (node.animationValues && node.animationValues.opacityExit !== undefined); 26975} 26976const defaultLayoutTransition = { 26977 duration: 0.45, 26978 ease: [0.4, 0, 0.1, 1], 26979}; 26980let roundPoint; 26981const create_projection_node_isWebKit = () => navigator.userAgent.toLowerCase().includes("applewebkit/"); 26982function roundAxis(axis) { 26983 // Round to the nearest .5 pixels to support subpixel layouts 26984 axis.min = roundPoint(axis.min); 26985 axis.max = roundPoint(axis.max); 26986} 26987function roundBox(box) { 26988 // Detect browser only client-side 26989 if (!roundPoint) { 26990 roundPoint = create_projection_node_isWebKit() 26991 ? Math.round 26992 : (point) => Math.round(point * 2) / 2; 26993 } 26994 roundAxis(box.x); 26995 roundAxis(box.y); 26996} 26997function shouldAnimatePositionOnly(animationType, snapshot, layout) { 26998 return (animationType === "position" || 26999 (animationType === "preserve-aspect" && 27000 !isNear(aspectRatio(snapshot), aspectRatio(layout), 0.2))); 27001} 27002 27003 27004 27005;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/projection/node/DocumentProjectionNode.mjs 27006 27007 27008 27009const DocumentProjectionNode = createProjectionNode({ 27010 attachResizeListener: (ref, notify) => addDomEvent(ref, "resize", notify), 27011 measureScroll: () => ({ 27012 x: document.documentElement.scrollLeft || document.body.scrollLeft, 27013 y: document.documentElement.scrollTop || document.body.scrollTop, 27014 }), 27015 checkIsScrollRoot: () => true, 27016}); 27017 27018 27019 27020;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/projection/node/HTMLProjectionNode.mjs 27021 27022 27023 27024const rootProjectionNode = { 27025 current: undefined, 27026}; 27027const HTMLProjectionNode = createProjectionNode({ 27028 measureScroll: (instance) => ({ 27029 x: instance.scrollLeft, 27030 y: instance.scrollTop, 27031 }), 27032 defaultParent: () => { 27033 if (!rootProjectionNode.current) { 27034 const documentNode = new DocumentProjectionNode({}); 27035 documentNode.mount(window); 27036 documentNode.setOptions({ layoutScroll: true }); 27037 rootProjectionNode.current = documentNode; 27038 } 27039 return rootProjectionNode.current; 27040 }, 27041 resetTransform: (instance, value) => { 27042 instance.style.transform = value !== undefined ? value : "none"; 27043 }, 27044 checkIsScrollRoot: (instance) => Boolean(window.getComputedStyle(instance).position === "fixed"), 27045}); 27046 27047 27048 27049;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/motion/features/drag.mjs 27050 27051 27052 27053 27054 27055const drag = { 27056 pan: { 27057 Feature: PanGesture, 27058 }, 27059 drag: { 27060 Feature: DragGesture, 27061 ProjectionNode: HTMLProjectionNode, 27062 MeasureLayout: MeasureLayout, 27063 }, 27064}; 27065 27066 27067 27068;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/render/dom/utils/css-variables-conversion.mjs 27069 27070 27071 27072/** 27073 * Parse Framer's special CSS variable format into a CSS token and a fallback. 27074 * 27075 * ``` 27076 * `var(--foo, #fff)` => [`--foo`, '#fff'] 27077 * ``` 27078 * 27079 * @param current 27080 */ 27081const splitCSSVariableRegex = /var\((--[a-zA-Z0-9-_]+),? ?([a-zA-Z0-9 ()%#.,-]+)?\)/; 27082function parseCSSVariable(current) { 27083 const match = splitCSSVariableRegex.exec(current); 27084 if (!match) 27085 return [,]; 27086 const [, token, fallback] = match; 27087 return [token, fallback]; 27088} 27089const maxDepth = 4; 27090function getVariableValue(current, element, depth = 1) { 27091 errors_invariant(depth <= maxDepth, `Max CSS variable fallback depth detected in property "${current}". This may indicate a circular fallback dependency.`); 27092 const [token, fallback] = parseCSSVariable(current); 27093 // No CSS variable detected 27094 if (!token) 27095 return; 27096 // Attempt to read this CSS variable off the element 27097 const resolved = window.getComputedStyle(element).getPropertyValue(token); 27098 if (resolved) { 27099 return resolved.trim(); 27100 } 27101 else if (isCSSVariableToken(fallback)) { 27102 // The fallback might itself be a CSS variable, in which case we attempt to resolve it too. 27103 return getVariableValue(fallback, element, depth + 1); 27104 } 27105 else { 27106 return fallback; 27107 } 27108} 27109/** 27110 * Resolve CSS variables from 27111 * 27112 * @internal 27113 */
vendor: 14,450 bytes, lines 27114-27478
27114function resolveCSSVariables(visualElement, { ...target }, transitionEnd) { 27115 const element = visualElement.current; 27116 if (!(element instanceof Element)) 27117 return { target, transitionEnd }; 27118 // If `transitionEnd` isn't `undefined`, clone it. We could clone `target` and `transitionEnd` 27119 // only if they change but I think this reads clearer and this isn't a performance-critical path. 27120 if (transitionEnd) { 27121 transitionEnd = { ...transitionEnd }; 27122 } 27123 // Go through existing `MotionValue`s and ensure any existing CSS variables are resolved 27124 visualElement.values.forEach((value) => { 27125 const current = value.get(); 27126 if (!isCSSVariableToken(current)) 27127 return; 27128 const resolved = getVariableValue(current, element); 27129 if (resolved) 27130 value.set(resolved); 27131 }); 27132 // Cycle through every target property and resolve CSS variables. Currently 27133 // we only read single-var properties like `var(--foo)`, not `calc(var(--foo) + 20px)` 27134 for (const key in target) { 27135 const current = target[key]; 27136 if (!isCSSVariableToken(current)) 27137 continue; 27138 const resolved = getVariableValue(current, element); 27139 if (!resolved) 27140 continue; 27141 // Clone target if it hasn't already been 27142 target[key] = resolved; 27143 if (!transitionEnd) 27144 transitionEnd = {}; 27145 // If the user hasn't already set this key on `transitionEnd`, set it to the unresolved 27146 // CSS variable. This will ensure that after the animation the component will reflect 27147 // changes in the value of the CSS variable. 27148 if (transitionEnd[key] === undefined) { 27149 transitionEnd[key] = current; 27150 } 27151 } 27152 return { target, transitionEnd }; 27153} 27154 27155 27156 27157;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/render/dom/utils/unit-conversion.mjs 27158 27159 27160 27161 27162 27163 27164 27165 27166const positionalKeys = new Set([ 27167 "width", 27168 "height", 27169 "top", 27170 "left", 27171 "right", 27172 "bottom", 27173 "x", 27174 "y", 27175 "translateX", 27176 "translateY", 27177]); 27178const isPositionalKey = (key) => positionalKeys.has(key); 27179const hasPositionalKey = (target) => { 27180 return Object.keys(target).some(isPositionalKey); 27181}; 27182const isNumOrPxType = (v) => v === number || v === px; 27183const getPosFromMatrix = (matrix, pos) => parseFloat(matrix.split(", ")[pos]); 27184const getTranslateFromMatrix = (pos2, pos3) => (_bbox, { transform }) => { 27185 if (transform === "none" || !transform) 27186 return 0; 27187 const matrix3d = transform.match(/^matrix3d\((.+)\)$/); 27188 if (matrix3d) { 27189 return getPosFromMatrix(matrix3d[1], pos3); 27190 } 27191 else { 27192 const matrix = transform.match(/^matrix\((.+)\)$/); 27193 if (matrix) { 27194 return getPosFromMatrix(matrix[1], pos2); 27195 } 27196 else { 27197 return 0; 27198 } 27199 } 27200}; 27201const transformKeys = new Set(["x", "y", "z"]); 27202const nonTranslationalTransformKeys = transformPropOrder.filter((key) => !transformKeys.has(key)); 27203function removeNonTranslationalTransform(visualElement) { 27204 const removedTransforms = []; 27205 nonTranslationalTransformKeys.forEach((key) => { 27206 const value = visualElement.getValue(key); 27207 if (value !== undefined) { 27208 removedTransforms.push([key, value.get()]); 27209 value.set(key.startsWith("scale") ? 1 : 0); 27210 } 27211 }); 27212 // Apply changes to element before measurement 27213 if (removedTransforms.length) 27214 visualElement.render(); 27215 return removedTransforms; 27216} 27217const positionalValues = { 27218 // Dimensions 27219 width: ({ x }, { paddingLeft = "0", paddingRight = "0" }) => x.max - x.min - parseFloat(paddingLeft) - parseFloat(paddingRight), 27220 height: ({ y }, { paddingTop = "0", paddingBottom = "0" }) => y.max - y.min - parseFloat(paddingTop) - parseFloat(paddingBottom), 27221 top: (_bbox, { top }) => parseFloat(top), 27222 left: (_bbox, { left }) => parseFloat(left), 27223 bottom: ({ y }, { top }) => parseFloat(top) + (y.max - y.min), 27224 right: ({ x }, { left }) => parseFloat(left) + (x.max - x.min), 27225 // Transform 27226 x: getTranslateFromMatrix(4, 13), 27227 y: getTranslateFromMatrix(5, 14), 27228}; 27229// Alias translate longform names 27230positionalValues.translateX = positionalValues.x; 27231positionalValues.translateY = positionalValues.y; 27232const convertChangedValueTypes = (target, visualElement, changedKeys) => { 27233 const originBbox = visualElement.measureViewportBox(); 27234 const element = visualElement.current; 27235 const elementComputedStyle = getComputedStyle(element); 27236 const { display } = elementComputedStyle; 27237 const origin = {}; 27238 // If the element is currently set to display: "none", make it visible before 27239 // measuring the target bounding box 27240 if (display === "none") { 27241 visualElement.setStaticValue("display", target.display || "block"); 27242 } 27243 /** 27244 * Record origins before we render and update styles 27245 */ 27246 changedKeys.forEach((key) => { 27247 origin[key] = positionalValues[key](originBbox, elementComputedStyle); 27248 }); 27249 // Apply the latest values (as set in checkAndConvertChangedValueTypes) 27250 visualElement.render(); 27251 const targetBbox = visualElement.measureViewportBox(); 27252 changedKeys.forEach((key) => { 27253 // Restore styles to their **calculated computed style**, not their actual 27254 // originally set style. This allows us to animate between equivalent pixel units. 27255 const value = visualElement.getValue(key); 27256 value && value.jump(origin[key]); 27257 target[key] = positionalValues[key](targetBbox, elementComputedStyle); 27258 }); 27259 return target; 27260}; 27261const checkAndConvertChangedValueTypes = (visualElement, target, origin = {}, transitionEnd = {}) => { 27262 target = { ...target }; 27263 transitionEnd = { ...transitionEnd }; 27264 const targetPositionalKeys = Object.keys(target).filter(isPositionalKey); 27265 // We want to remove any transform values that could affect the element's bounding box before 27266 // it's measured. We'll reapply these later. 27267 let removedTransformValues = []; 27268 let hasAttemptedToRemoveTransformValues = false; 27269 const changedValueTypeKeys = []; 27270 targetPositionalKeys.forEach((key) => { 27271 const value = visualElement.getValue(key); 27272 if (!visualElement.hasValue(key)) 27273 return; 27274 let from = origin[key]; 27275 let fromType = findDimensionValueType(from); 27276 const to = target[key]; 27277 let toType; 27278 // TODO: The current implementation of this basically throws an error 27279 // if you try and do value conversion via keyframes. There's probably 27280 // a way of doing this but the performance implications would need greater scrutiny, 27281 // as it'd be doing multiple resize-remeasure operations. 27282 if (isKeyframesTarget(to)) { 27283 const numKeyframes = to.length; 27284 const fromIndex = to[0] === null ? 1 : 0; 27285 from = to[fromIndex]; 27286 fromType = findDimensionValueType(from); 27287 for (let i = fromIndex; i < numKeyframes; i++) { 27288 /** 27289 * Don't allow wildcard keyframes to be used to detect 27290 * a difference in value types. 27291 */ 27292 if (to[i] === null) 27293 break; 27294 if (!toType) { 27295 toType = findDimensionValueType(to[i]); 27296 errors_invariant(toType === fromType || 27297 (isNumOrPxType(fromType) && isNumOrPxType(toType)), "Keyframes must be of the same dimension as the current value"); 27298 } 27299 else { 27300 errors_invariant(findDimensionValueType(to[i]) === toType, "All keyframes must be of the same type"); 27301 } 27302 } 27303 } 27304 else { 27305 toType = findDimensionValueType(to); 27306 } 27307 if (fromType !== toType) { 27308 // If they're both just number or px, convert them both to numbers rather than 27309 // relying on resize/remeasure to convert (which is wasteful in this situation) 27310 if (isNumOrPxType(fromType) && isNumOrPxType(toType)) { 27311 const current = value.get(); 27312 if (typeof current === "string") { 27313 value.set(parseFloat(current)); 27314 } 27315 if (typeof to === "string") { 27316 target[key] = parseFloat(to); 27317 } 27318 else if (Array.isArray(to) && toType === px) { 27319 target[key] = to.map(parseFloat); 27320 } 27321 } 27322 else if ((fromType === null || fromType === void 0 ? void 0 : fromType.transform) && 27323 (toType === null || toType === void 0 ? void 0 : toType.transform) && 27324 (from === 0 || to === 0)) { 27325 // If one or the other value is 0, it's safe to coerce it to the 27326 // type of the other without measurement 27327 if (from === 0) { 27328 value.set(toType.transform(from)); 27329 } 27330 else { 27331 target[key] = fromType.transform(to); 27332 } 27333 } 27334 else { 27335 // If we're going to do value conversion via DOM measurements, we first 27336 // need to remove non-positional transform values that could affect the bbox measurements. 27337 if (!hasAttemptedToRemoveTransformValues) { 27338 removedTransformValues = 27339 removeNonTranslationalTransform(visualElement); 27340 hasAttemptedToRemoveTransformValues = true; 27341 } 27342 changedValueTypeKeys.push(key); 27343 transitionEnd[key] = 27344 transitionEnd[key] !== undefined 27345 ? transitionEnd[key] 27346 : target[key]; 27347 value.jump(to); 27348 } 27349 } 27350 }); 27351 if (changedValueTypeKeys.length) { 27352 const scrollY = changedValueTypeKeys.indexOf("height") >= 0 27353 ? window.pageYOffset 27354 : null; 27355 const convertedTarget = convertChangedValueTypes(target, visualElement, changedValueTypeKeys); 27356 // If we removed transform values, reapply them before the next render 27357 if (removedTransformValues.length) { 27358 removedTransformValues.forEach(([key, value]) => { 27359 visualElement.getValue(key).set(value); 27360 }); 27361 } 27362 // Reapply original values 27363 visualElement.render(); 27364 // Restore scroll position 27365 if (is_browser_isBrowser && scrollY !== null) { 27366 window.scrollTo({ top: scrollY }); 27367 } 27368 return { target: convertedTarget, transitionEnd }; 27369 } 27370 else { 27371 return { target, transitionEnd }; 27372 } 27373}; 27374/** 27375 * Convert value types for x/y/width/height/top/left/bottom/right 27376 * 27377 * Allows animation between `'auto'` -> `'100%'` or `0` -> `'calc(50% - 10vw)'` 27378 * 27379 * @internal 27380 */ 27381function unitConversion(visualElement, target, origin, transitionEnd) { 27382 return hasPositionalKey(target) 27383 ? checkAndConvertChangedValueTypes(visualElement, target, origin, transitionEnd) 27384 : { target, transitionEnd }; 27385} 27386 27387 27388 27389;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/render/dom/utils/parse-dom-variant.mjs 27390 27391 27392 27393/** 27394 * Parse a DOM variant to make it animatable. This involves resolving CSS variables 27395 * and ensuring animations like "20%" => "calc(50vw)" are performed in pixels. 27396 */ 27397const parseDomVariant = (visualElement, target, origin, transitionEnd) => { 27398 const resolved = resolveCSSVariables(visualElement, target, transitionEnd); 27399 target = resolved.target; 27400 transitionEnd = resolved.transitionEnd; 27401 return unitConversion(visualElement, target, origin, transitionEnd); 27402}; 27403 27404 27405 27406;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/utils/reduced-motion/state.mjs 27407// Does this device prefer reduced motion? Returns `null` server-side. 27408const prefersReducedMotion = { current: null }; 27409const hasReducedMotionListener = { current: false }; 27410 27411 27412 27413;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/utils/reduced-motion/index.mjs 27414 27415 27416 27417function initPrefersReducedMotion() { 27418 hasReducedMotionListener.current = true; 27419 if (!is_browser_isBrowser) 27420 return; 27421 if (window.matchMedia) { 27422 const motionMediaQuery = window.matchMedia("(prefers-reduced-motion)"); 27423 const setReducedMotionPreferences = () => (prefersReducedMotion.current = motionMediaQuery.matches); 27424 motionMediaQuery.addListener(setReducedMotionPreferences); 27425 setReducedMotionPreferences(); 27426 } 27427 else { 27428 prefersReducedMotion.current = false; 27429 } 27430} 27431 27432 27433 27434;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/render/utils/motion-values.mjs 27435 27436 27437 27438 27439 27440function updateMotionValuesFromProps(element, next, prev) { 27441 const { willChange } = next; 27442 for (const key in next) { 27443 const nextValue = next[key]; 27444 const prevValue = prev[key]; 27445 if (isMotionValue(nextValue)) { 27446 /** 27447 * If this is a motion value found in props or style, we want to add it 27448 * to our visual element's motion value map. 27449 */ 27450 element.addValue(key, nextValue); 27451 if (isWillChangeMotionValue(willChange)) { 27452 willChange.add(key); 27453 } 27454 /** 27455 * Check the version of the incoming motion value with this version 27456 * and warn against mismatches. 27457 */ 27458 if (false) {} 27459 } 27460 else if (isMotionValue(prevValue)) { 27461 /** 27462 * If we're swapping from a motion value to a static value, 27463 * create a new motion value from that 27464 */ 27465 element.addValue(key, motionValue(nextValue, { owner: element })); 27466 if (isWillChangeMotionValue(willChange)) { 27467 willChange.remove(key); 27468 } 27469 } 27470 else if (prevValue !== nextValue) { 27471 /** 27472 * If this is a flat value that has changed, update the motion value 27473 * or create one if it doesn't exist. We only want to do this if we're 27474 * not handling the value with our animation state. 27475 */ 27476 if (element.hasValue(key)) { 27477 const existingValue = element.getValue(key); 27478 // TODO: Only update values that aren't being animated or even looked at
vendor: 6,472 bytes, lines 27479-27658
27479 !existingValue.hasAnimated && existingValue.set(nextValue); 27480 } 27481 else { 27482 const latestValue = element.getStaticValue(key); 27483 element.addValue(key, motionValue(latestValue !== undefined ? latestValue : nextValue, { owner: element })); 27484 } 27485 } 27486 } 27487 // Handle removed values 27488 for (const key in prev) { 27489 if (next[key] === undefined) 27490 element.removeValue(key); 27491 } 27492 return next; 27493} 27494 27495 27496 27497;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/render/store.mjs 27498const visualElementStore = new WeakMap(); 27499 27500 27501 27502;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/render/VisualElement.mjs 27503 27504 27505 27506 27507 27508 27509 27510 27511 27512 27513 27514 27515 27516 27517 27518 27519 27520 27521 27522 27523const featureNames = Object.keys(featureDefinitions); 27524const numFeatures = featureNames.length; 27525const propEventHandlers = [ 27526 "AnimationStart", 27527 "AnimationComplete", 27528 "Update", 27529 "BeforeLayoutMeasure", 27530 "LayoutMeasure", 27531 "LayoutAnimationStart", 27532 "LayoutAnimationComplete", 27533]; 27534const numVariantProps = variantProps.length; 27535/** 27536 * A VisualElement is an imperative abstraction around UI elements such as 27537 * HTMLElement, SVGElement, Three.Object3D etc. 27538 */ 27539class VisualElement { 27540 constructor({ parent, props, presenceContext, reducedMotionConfig, visualState, }, options = {}) { 27541 /** 27542 * A reference to the current underlying Instance, e.g. a HTMLElement 27543 * or Three.Mesh etc. 27544 */ 27545 this.current = null; 27546 /** 27547 * A set containing references to this VisualElement's children. 27548 */ 27549 this.children = new Set(); 27550 /** 27551 * Determine what role this visual element should take in the variant tree. 27552 */ 27553 this.isVariantNode = false; 27554 this.isControllingVariants = false; 27555 /** 27556 * Decides whether this VisualElement should animate in reduced motion 27557 * mode. 27558 * 27559 * TODO: This is currently set on every individual VisualElement but feels 27560 * like it could be set globally. 27561 */ 27562 this.shouldReduceMotion = null; 27563 /** 27564 * A map of all motion values attached to this visual element. Motion 27565 * values are source of truth for any given animated value. A motion 27566 * value might be provided externally by the component via props. 27567 */ 27568 this.values = new Map(); 27569 /** 27570 * Cleanup functions for active features (hover/tap/exit etc) 27571 */ 27572 this.features = {}; 27573 /** 27574 * A map of every subscription that binds the provided or generated 27575 * motion values onChange listeners to this visual element. 27576 */ 27577 this.valueSubscriptions = new Map(); 27578 /** 27579 * A reference to the previously-provided motion values as returned 27580 * from scrapeMotionValuesFromProps. We use the keys in here to determine 27581 * if any motion values need to be removed after props are updated. 27582 */ 27583 this.prevMotionValues = {}; 27584 /** 27585 * An object containing a SubscriptionManager for each active event. 27586 */ 27587 this.events = {}; 27588 /** 27589 * An object containing an unsubscribe function for each prop event subscription. 27590 * For example, every "Update" event can have multiple subscribers via 27591 * VisualElement.on(), but only one of those can be defined via the onUpdate prop. 27592 */ 27593 this.propEventSubscriptions = {}; 27594 this.notifyUpdate = () => this.notify("Update", this.latestValues); 27595 this.render = () => { 27596 if (!this.current) 27597 return; 27598 this.triggerBuild(); 27599 this.renderInstance(this.current, this.renderState, this.props.style, this.projection); 27600 }; 27601 this.scheduleRender = () => frame_frame.render(this.render, false, true); 27602 const { latestValues, renderState } = visualState; 27603 this.latestValues = latestValues; 27604 this.baseTarget = { ...latestValues }; 27605 this.initialValues = props.initial ? { ...latestValues } : {}; 27606 this.renderState = renderState; 27607 this.parent = parent; 27608 this.props = props; 27609 this.presenceContext = presenceContext; 27610 this.depth = parent ? parent.depth + 1 : 0; 27611 this.reducedMotionConfig = reducedMotionConfig; 27612 this.options = options; 27613 this.isControllingVariants = isControllingVariants(props); 27614 this.isVariantNode = isVariantNode(props); 27615 if (this.isVariantNode) { 27616 this.variantChildren = new Set(); 27617 } 27618 this.manuallyAnimateOnMount = Boolean(parent && parent.current); 27619 /** 27620 * Any motion values that are provided to the element when created 27621 * aren't yet bound to the element, as this would technically be impure. 27622 * However, we iterate through the motion values and set them to the 27623 * initial values for this component. 27624 * 27625 * TODO: This is impure and we should look at changing this to run on mount. 27626 * Doing so will break some tests but this isn't neccessarily a breaking change, 27627 * more a reflection of the test. 27628 */ 27629 const { willChange, ...initialMotionValues } = this.scrapeMotionValuesFromProps(props, {}); 27630 for (const key in initialMotionValues) { 27631 const value = initialMotionValues[key]; 27632 if (latestValues[key] !== undefined && isMotionValue(value)) { 27633 value.set(latestValues[key], false); 27634 if (isWillChangeMotionValue(willChange)) { 27635 willChange.add(key); 27636 } 27637 } 27638 } 27639 } 27640 /** 27641 * This method takes React props and returns found MotionValues. For example, HTML 27642 * MotionValues will be found within the style prop, whereas for Three.js within attribute arrays. 27643 * 27644 * This isn't an abstract method as it needs calling in the constructor, but it is 27645 * intended to be one. 27646 */ 27647 scrapeMotionValuesFromProps(_props, _prevProps) { 27648 return {}; 27649 } 27650 mount(instance) { 27651 this.current = instance; 27652 visualElementStore.set(instance, this); 27653 if (this.projection && !this.projection.instance) { 27654 this.projection.mount(instance); 27655 } 27656 if (this.parent && this.isVariantNode && !this.isControllingVariants) { 27657 this.removeFromVariantTree = this.parent.addVariantChild(this); 27658 }
27659 this.values.forEach((value, key) => this.bindToMotionValue(key, value)); 27660 if (!hasReducedMotionListener.current) { 27661 initPrefersReducedMotion(); 27662 } 27663 this.shouldReduceMotion = 27664 this.reducedMotionConfig === "never" 27665 ? false 27666 : this.reducedMotionConfig === "always" 27667 ? true 27668 : prefersReducedMotion.current; 27669 if (false) {} 27670 if (this.parent) 27671 this.parent.children.add(this); 27672 this.update(this.props, this.presenceContext); 27673 } 27674 unmount() { 27675 visualElementStore["delete"](this.current); 27676 this.projection && this.projection.unmount(); 27677 cancelFrame(this.notifyUpdate); 27678 cancelFrame(this.render); 27679 this.valueSubscriptions.forEach((remove) => remove()); 27680 this.removeFromVariantTree && this.removeFromVariantTree(); 27681 this.parent && this.parent.children.delete(this); 27682 for (const key in this.events) { 27683 this.events[key].clear(); 27684 } 27685 for (const key in this.features) { 27686 this.features[key].unmount(); 27687 } 27688 this.current = null; 27689 } 27690 bindToMotionValue(key, value) { 27691 const valueIsTransform = transformProps.has(key); 27692 const removeOnChange = value.on("change", (latestValue) => { 27693 this.latestValues[key] = latestValue; 27694 this.props.onUpdate && 27695 frame_frame.update(this.notifyUpdate, false, true); 27696 if (valueIsTransform && this.projection) { 27697 this.projection.isTransformDirty = true; 27698 } 27699 }); 27700 const removeOnRenderRequest = value.on("renderRequest", this.scheduleRender); 27701 this.valueSubscriptions.set(key, () => { 27702 removeOnChange(); 27703 removeOnRenderRequest(); 27704 }); 27705 } 27706 sortNodePosition(other) { 27707 /** 27708 * If these nodes aren't even of the same type we can't compare their depth. 27709 */ 27710 if (!this.current || 27711 !this.sortInstanceNodePosition || 27712 this.type !== other.type) { 27713 return 0; 27714 } 27715 return this.sortInstanceNodePosition(this.current, other.current); 27716 } 27717 loadFeatures({ children, ...renderedProps }, isStrict, preloadedFeatures, initialLayoutGroupConfig) { 27718 let ProjectionNodeConstructor; 27719 let MeasureLayout; 27720 /** 27721 * If we're in development mode, check to make sure we're not rendering a motion component 27722 * as a child of LazyMotion, as this will break the file-size benefits of using it. 27723 */ 27724 if (false) {} 27725 for (let i = 0; i < numFeatures; i++) { 27726 const name = featureNames[i]; 27727 const { isEnabled, Feature: FeatureConstructor, ProjectionNode, MeasureLayout: MeasureLayoutComponent, } = featureDefinitions[name]; 27728 if (ProjectionNode) 27729 ProjectionNodeConstructor = ProjectionNode; 27730 if (isEnabled(renderedProps)) { 27731 if (!this.features[name] && FeatureConstructor) { 27732 this.features[name] = new FeatureConstructor(this); 27733 } 27734 if (MeasureLayoutComponent) { 27735 MeasureLayout = MeasureLayoutComponent; 27736 } 27737 } 27738 } 27739 if (!this.projection && ProjectionNodeConstructor) { 27740 this.projection = new ProjectionNodeConstructor(this.latestValues, this.parent && this.parent.projection); 27741 const { layoutId, layout, drag, dragConstraints, layoutScroll, layoutRoot, } = renderedProps; 27742 this.projection.setOptions({ 27743 layoutId, 27744 layout, 27745 alwaysMeasureLayout: Boolean(drag) || 27746 (dragConstraints && is_ref_object_isRefObject(dragConstraints)), 27747 visualElement: this, 27748 scheduleRender: () => this.scheduleRender(), 27749 /** 27750 * TODO: Update options in an effect. This could be tricky as it'll be too late 27751 * to update by the time layout animations run.
27752 * We also need to fix this safeToRemove by linking it up to the one returned by usePresence, 27753 * ensuring it gets called if there's no potential layout animations. 27754 * 27755 */ 27756 animationType: typeof layout === "string" ? layout : "both", 27757 initialPromotionConfig: initialLayoutGroupConfig, 27758 layoutScroll, 27759 layoutRoot, 27760 }); 27761 } 27762 return MeasureLayout; 27763 } 27764 updateFeatures() { 27765 for (const key in this.features) { 27766 const feature = this.features[key]; 27767 if (feature.isMounted) { 27768 feature.update(); 27769 } 27770 else { 27771 feature.mount(); 27772 feature.isMounted = true; 27773 } 27774 } 27775 } 27776 triggerBuild() { 27777 this.build(this.renderState, this.latestValues, this.options, this.props); 27778 } 27779 /** 27780 * Measure the current viewport box with or without transforms. 27781 * Only measures axis-aligned boxes, rotate and skew must be manually 27782 * removed with a re-render to work. 27783 */ 27784 measureViewportBox() { 27785 return this.current 27786 ? this.measureInstanceViewportBox(this.current, this.props) 27787 : createBox(); 27788 } 27789 getStaticValue(key) { 27790 return this.latestValues[key]; 27791 } 27792 setStaticValue(key, value) { 27793 this.latestValues[key] = value; 27794 } 27795 /** 27796 * Make a target animatable by Popmotion. For instance, if we're 27797 * trying to animate width from 100px to 100vw we need to measure 100vw 27798 * in pixels to determine what we really need to animate to. This is also 27799 * pluggable to support Framer's custom value types like Color, 27800 * and CSS variables. 27801 */ 27802 makeTargetAnimatable(target, canMutate = true) { 27803 return this.makeTargetAnimatableFromInstance(target, this.props, canMutate); 27804 } 27805 /** 27806 * Update the provided props. Ensure any newly-added motion values are 27807 * added to our map, old ones removed, and listeners updated. 27808 */ 27809 update(props, presenceContext) { 27810 if (props.transformTemplate || this.props.transformTemplate) { 27811 this.scheduleRender(); 27812 } 27813 this.prevProps = this.props; 27814 this.props = props; 27815 this.prevPresenceContext = this.presenceContext; 27816 this.presenceContext = presenceContext; 27817 /** 27818 * Update prop event handlers ie onAnimationStart, onAnimationComplete 27819 */ 27820 for (let i = 0; i < propEventHandlers.length; i++) { 27821 const key = propEventHandlers[i]; 27822 if (this.propEventSubscriptions[key]) { 27823 this.propEventSubscriptions[key](); 27824 delete this.propEventSubscriptions[key]; 27825 } 27826 const listener = props["on" + key]; 27827 if (listener) { 27828 this.propEventSubscriptions[key] = this.on(key, listener); 27829 } 27830 } 27831 this.prevMotionValues = updateMotionValuesFromProps(this, this.scrapeMotionValuesFromProps(props, this.prevProps), this.prevMotionValues); 27832 if (this.handleChildMotionValue) { 27833 this.handleChildMotionValue(); 27834 } 27835 } 27836 getProps() { 27837 return this.props; 27838 } 27839 /** 27840 * Returns the variant definition with a given name. 27841 */ 27842 getVariant(name) { 27843 return this.props.variants ? this.props.variants[name] : undefined; 27844 } 27845 /** 27846 * Returns the defined default transition on this component. 27847 */ 27848 getDefaultTransition() { 27849 return this.props.transition; 27850 } 27851 getTransformPagePoint() { 27852 return this.props.transformPagePoint; 27853 } 27854 getClosestVariantNode() { 27855 return this.isVariantNode 27856 ? this 27857 : this.parent 27858 ? this.parent.getClosestVariantNode() 27859 : undefined; 27860 } 27861 getVariantContext(startAtParent = false) { 27862 if (startAtParent) { 27863 return this.parent ? this.parent.getVariantContext() : undefined; 27864 } 27865 if (!this.isControllingVariants) { 27866 const context = this.parent 27867 ? this.parent.getVariantContext() || {} 27868 : {}; 27869 if (this.props.initial !== undefined) {
27870 context.initial = this.props.initial; 27871 } 27872 return context; 27873 } 27874 const context = {}; 27875 for (let i = 0; i < numVariantProps; i++) { 27876 const name = variantProps[i]; 27877 const prop = this.props[name]; 27878 if (isVariantLabel(prop) || prop === false) { 27879 context[name] = prop; 27880 } 27881 } 27882 return context; 27883 } 27884 /** 27885 * Add a child visual element to our set of children. 27886 */ 27887 addVariantChild(child) { 27888 const closestVariantNode = this.getClosestVariantNode(); 27889 if (closestVariantNode) { 27890 closestVariantNode.variantChildren && 27891 closestVariantNode.variantChildren.add(child); 27892 return () => closestVariantNode.variantChildren.delete(child); 27893 } 27894 } 27895 /** 27896 * Add a motion value and bind it to this visual element. 27897 */ 27898 addValue(key, value) { 27899 // Remove existing value if it exists 27900 if (value !== this.values.get(key)) { 27901 this.removeValue(key); 27902 this.bindToMotionValue(key, value); 27903 } 27904 this.values.set(key, value); 27905 this.latestValues[key] = value.get(); 27906 } 27907 /** 27908 * Remove a motion value and unbind any active subscriptions. 27909 */ 27910 removeValue(key) { 27911 this.values.delete(key); 27912 const unsubscribe = this.valueSubscriptions.get(key); 27913 if (unsubscribe) { 27914 unsubscribe(); 27915 this.valueSubscriptions.delete(key); 27916 } 27917 delete this.latestValues[key]; 27918 this.removeValueFromRenderState(key, this.renderState); 27919 } 27920 /** 27921 * Check whether we have a motion value for this key 27922 */ 27923 hasValue(key) { 27924 return this.values.has(key); 27925 } 27926 getValue(key, defaultValue) { 27927 if (this.props.values && this.props.values[key]) { 27928 return this.props.values[key]; 27929 } 27930 let value = this.values.get(key); 27931 if (value === undefined && defaultValue !== undefined) { 27932 value = motionValue(defaultValue, { owner: this }); 27933 this.addValue(key, value); 27934 } 27935 return value; 27936 } 27937 /** 27938 * If we're trying to animate to a previously unencountered value, 27939 * we need to check for it in our state and as a last resort read it 27940 * directly from the instance (which might have performance implications). 27941 */ 27942 readValue(key) { 27943 var _a; 27944 return this.latestValues[key] !== undefined || !this.current 27945 ? this.latestValues[key] 27946 : (_a = this.getBaseTargetFromProps(this.props, key)) !== null && _a !== void 0 ? _a : this.readValueFromInstance(this.current, key, this.options); 27947 } 27948 /** 27949 * Set the base target to later animate back to. This is currently 27950 * only hydrated on creation and when we first read a value. 27951 */ 27952 setBaseTarget(key, value) { 27953 this.baseTarget[key] = value; 27954 } 27955 /** 27956 * Find the base target for a value thats been removed from all animation 27957 * props. 27958 */ 27959 getBaseTarget(key) { 27960 var _a; 27961 const { initial } = this.props; 27962 const valueFromInitial = typeof initial === "string" || typeof initial === "object" 27963 ? (_a = resolveVariantFromProps(this.props, initial)) === null || _a === void 0 ? void 0 : _a[key] 27964 : undefined; 27965 /** 27966 * If this value still exists in the current initial variant, read that. 27967 */ 27968 if (initial && valueFromInitial !== undefined) { 27969 return valueFromInitial; 27970 } 27971 /** 27972 * Alternatively, if this VisualElement config has defined a getBaseTarget 27973 * so we can read the value from an alternative source, try that. 27974 */ 27975 const target = this.getBaseTargetFromProps(this.props, key); 27976 if (target !== undefined && !isMotionValue(target)) 27977 return target; 27978 /** 27979 * If the value was initially defined on initial, but it doesn't any more, 27980 * return undefined. Otherwise return the value as initially read from the DOM. 27981 */ 27982 return this.initialValues[key] !== undefined && 27983 valueFromInitial === undefined 27984 ? undefined 27985 : this.baseTarget[key]; 27986 } 27987 on(eventName, callback) { 27988 if (!this.events[eventName]) { 27989 this.events[eventName] = new SubscriptionManager(); 27990 } 27991 return this.events[eventName].add(callback); 27992 } 27993 notify(eventName, ...args) { 27994 if (this.events[eventName]) { 27995 this.events[eventName].notify(...args); 27996 } 27997 } 27998} 27999 28000 28001 28002;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/render/dom/DOMVisualElement.mjs 28003 28004 28005 28006 28007class DOMVisualElement extends VisualElement { 28008 sortInstanceNodePosition(a, b) { 28009 /** 28010 * compareDocumentPosition returns a bitmask, by using the bitwise & 28011 * we're returning true if 2 in that bitmask is set to true. 2 is set 28012 * to true if b preceeds a. 28013 */ 28014 return a.compareDocumentPosition(b) & 2 ? 1 : -1; 28015 } 28016 getBaseTargetFromProps(props, key) { 28017 return props.style ? props.style[key] : undefined; 28018 } 28019 removeValueFromRenderState(key, { vars, style }) { 28020 delete vars[key]; 28021 delete style[key]; 28022 } 28023 makeTargetAnimatableFromInstance({ transition, transitionEnd, ...target }, { transformValues }, isMounted) { 28024 let origin = getOrigin(target, transition || {}, this); 28025 /** 28026 * If Framer has provided a function to convert `Color` etc value types, convert them 28027 */ 28028 if (transformValues) { 28029 if (transitionEnd) 28030 transitionEnd = transformValues(transitionEnd); 28031 if (target) 28032 target = transformValues(target); 28033 if (origin) 28034 origin = transformValues(origin); 28035 } 28036 if (isMounted) { 28037 checkTargetForNewValues(this, target, origin); 28038 const parsed = parseDomVariant(this, target, origin, transitionEnd); 28039 transitionEnd = parsed.transitionEnd; 28040 target = parsed.target; 28041 } 28042 return { 28043 transition, 28044 transitionEnd, 28045 ...target, 28046 }; 28047 } 28048} 28049 28050 28051 28052;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/render/html/HTMLVisualElement.mjs 28053 28054 28055 28056 28057 28058 28059 28060 28061 28062 28063function HTMLVisualElement_getComputedStyle(element) { 28064 return window.getComputedStyle(element); 28065} 28066class HTMLVisualElement extends DOMVisualElement { 28067 readValueFromInstance(instance, key) { 28068 if (transformProps.has(key)) { 28069 const defaultType = getDefaultValueType(key); 28070 return defaultType ? defaultType.default || 0 : 0; 28071 } 28072 else { 28073 const computedStyle = HTMLVisualElement_getComputedStyle(instance); 28074 const value = (isCSSVariableName(key) 28075 ? computedStyle.getPropertyValue(key) 28076 : computedStyle[key]) || 0; 28077 return typeof value === "string" ? value.trim() : value; 28078 } 28079 } 28080 measureInstanceViewportBox(instance, { transformPagePoint }) { 28081 return measureViewportBox(instance, transformPagePoint); 28082 } 28083 build(renderState, latestValues, options, props) { 28084 buildHTMLStyles(renderState, latestValues, options, props.transformTemplate); 28085 } 28086 scrapeMotionValuesFromProps(props, prevProps) { 28087 return scrapeMotionValuesFromProps(props, prevProps); 28088 } 28089 handleChildMotionValue() { 28090 if (this.childSubscription) { 28091 this.childSubscription(); 28092 delete this.childSubscription; 28093 } 28094 const { children } = this.props; 28095 if (isMotionValue(children)) { 28096 this.childSubscription = children.on("change", (latest) => { 28097 if (this.current) 28098 this.current.textContent = `${latest}`; 28099 }); 28100 } 28101 } 28102 renderInstance(instance, renderState, styleProp, projection) { 28103 renderHTML(instance, renderState, styleProp, projection); 28104 } 28105} 28106 28107 28108 28109;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/render/svg/SVGVisualElement.mjs 28110 28111 28112 28113 28114 28115 28116 28117 28118 28119 28120 28121class SVGVisualElement extends DOMVisualElement { 28122 constructor() { 28123 super(...arguments); 28124 this.isSVGTag = false;
28125 } 28126 getBaseTargetFromProps(props, key) { 28127 return props[key]; 28128 } 28129 readValueFromInstance(instance, key) { 28130 if (transformProps.has(key)) { 28131 const defaultType = getDefaultValueType(key); 28132 return defaultType ? defaultType.default || 0 : 0; 28133 } 28134 key = !camelCaseAttributes.has(key) ? camelToDash(key) : key; 28135 return instance.getAttribute(key); 28136 } 28137 measureInstanceViewportBox() { 28138 return createBox(); 28139 } 28140 scrapeMotionValuesFromProps(props, prevProps) { 28141 return scrape_motion_values_scrapeMotionValuesFromProps(props, prevProps); 28142 } 28143 build(renderState, latestValues, options, props) { 28144 buildSVGAttrs(renderState, latestValues, options, this.isSVGTag, props.transformTemplate); 28145 } 28146 renderInstance(instance, renderState, styleProp, projection) { 28147 renderSVG(instance, renderState, styleProp, projection); 28148 } 28149 mount(instance) { 28150 this.isSVGTag = isSVGTag(instance.tagName); 28151 super.mount(instance); 28152 } 28153} 28154 28155 28156 28157;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/render/dom/create-visual-element.mjs 28158 28159 28160 28161 28162const create_visual_element_createDomVisualElement = (Component, options) => { 28163 return isSVGComponent(Component) 28164 ? new SVGVisualElement(options, { enableHardwareAcceleration: false }) 28165 : new HTMLVisualElement(options, { enableHardwareAcceleration: true }); 28166}; 28167 28168 28169 28170;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/motion/features/layout.mjs 28171 28172 28173 28174const layout = { 28175 layout: { 28176 ProjectionNode: HTMLProjectionNode, 28177 MeasureLayout: MeasureLayout, 28178 }, 28179}; 28180 28181 28182 28183;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/render/dom/motion.mjs 28184 28185 28186 28187 28188 28189 28190 28191 28192 28193const preloadedFeatures = { 28194 ...animations, 28195 ...gestureAnimations, 28196 ...drag, 28197 ...layout, 28198}; 28199/** 28200 * HTML & SVG components, optimised for use with gestures and animation. These can be used as 28201 * drop-in replacements for any HTML & SVG component, all CSS & SVG properties are supported. 28202 * 28203 * @public 28204 */ 28205const motion = /*@__PURE__*/ createMotionProxy((Component, config) => create_config_createDomMotionConfig(Component, config, preloadedFeatures, create_visual_element_createDomVisualElement)); 28206/** 28207 * Create a DOM `motion` component with the provided string. This is primarily intended 28208 * as a full alternative to `motion` for consumers who have to supp
28208ort environments that don't 28209 * support `Proxy`. 28210 * 28211 * ```javascript 28212 * import { createDomMotionComponent } from "framer-motion" 28213 * 28214 * const motion = { 28215 * div: createDomMotionComponent('div') 28216 * } 28217 * ``` 28218 * 28219 * @public 28220 */ 28221function createDomMotionComponent(key) { 28222 return createMotionComponent(createDomMotionConfig(key, { forwardMotionProps: false }, preloadedFeatures, createDomVisualElement)); 28223} 28224 28225 28226 28227;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/utils/use-is-mounted.mjs 28228 28229 28230 28231function useIsMounted() { 28232 const isMounted = (0,external_React_.useRef)(false); 28233 useIsomorphicLayoutEffect(() => { 28234 isMounted.current = true; 28235 return () => { 28236 isMounted.current = false; 28237 }; 28238 }, []); 28239 return isMounted; 28240} 28241 28242 28243 28244;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/utils/use-force-update.mjs 28245 28246 28247 28248 28249function use_force_update_useForceUpdate() { 28250 const isMounted = useIsMounted(); 28251 const [forcedRenderCount, setForcedRenderCount] = (0,external_React_.useState)(0); 28252 const forceRender = (0,external_React_.useCallback)(() => { 28253 isMounted.current && setForcedRenderCount(forcedRenderCount + 1); 28254 }, [forcedRenderCount]); 28255 /** 28256 * Defer this to the end of the next animation frame in case there are multiple 28257 * synchronous calls. 28258 */ 28259 const deferredForceRender = (0,external_React_.useCallback)(() => frame_frame.postRender(forceRender), [forceRender]); 28260 return [deferredForceRender, forcedRenderCount]; 28261} 28262 28263 28264 28265;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/components/AnimatePresence/PopChild.mjs 28266 28267 28268 28269/** 28270 * Measurement functionality has to be within a separate component 28271 * to leverage snapshot lifecycle. 28272 */ 28273class PopChildMeasure extends external_React_.Component { 28274 getSnapshotBeforeUpdate(prevProps) { 28275 const element = this.props.childRef.current; 28276 if (element && prevProps.isPresent && !this.props.isPresent) { 28277 const size = this.props.sizeRef.current; 28278 size.height = element.offsetHeight || 0; 28279 size.width = element.offsetWidth || 0; 28280 size.top = element.offsetTop; 28281 size.left = element.offsetLeft; 28282 } 28283 return null; 28284 } 28285 /** 28286 * Required with getSnapshotBeforeUpdate to stop React complaining. 28287 */ 28288 componentDidUpdate() { } 28289 render() { 28290 return this.props.children; 28291 } 28292} 28293function PopChild({ children, isPresent }) { 28294 const id = (0,external_React_.useId)(); 28295 const ref = (0,external_React_.useRef)(null); 28296 const size = (0,external_React_.useRef)({ 28297 width: 0, 28298 height: 0, 28299 top: 0, 28300 left: 0, 28301 }); 28302 /** 28303 * We create and inject a style block so we can apply this explicit 28304 * sizing in a non-destructive manner by just deleting the style block. 28305 * 28306 * We can't apply size via render as the measurement happens 28307 * in getSnapshotBeforeUpdate (post-render), likewise if we apply the 28308 * styles directly on the DOM node, we might be overwriting 28309 * styles set via the style prop. 28310 */ 28311 (0,external_React_.useInsertionEffect)(() => { 28312 const { width, height, top, left } = size.current; 28313 if (isPresent || !ref.current || !width || !height) 28314 return; 28315 ref.current.dataset.motionPopId = id; 28316 const style = document.createElement("style"); 28317 document.head.appendChild(style); 28318 if (style.sheet) { 28319 style.sheet.insertRule(` 28320 [data-motion-pop-id="${id}"] { 28321 position: absolute !important; 28322 width: ${width}px !important; 28323 height: ${height}px !important; 28324 top: ${top}px !important; 28325 left: ${left}px !important; 28326 } 28327 `); 28328 } 28329 return () => { 28330 document.head.removeChild(style); 28331 }; 28332 }, [isPresent]); 28333 return (external_React_.createElement(PopChildMeasure, { isPresent: isPresent, childRef: ref, sizeRef: size }, external_React_.cloneElement(children, { ref }))); 28334} 28335 28336 28337 28338;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/components/AnimatePresence/PresenceChild.mjs 28339 28340 28341 28342 28343 28344 28345const PresenceChild = ({ children, initial, isPresent, onExitComplete, custom, presenceAffectsLayout, mode, }) => { 28346 const presenceChildren = useConstant(newChildrenMap); 28347 const id = (0,external_React_.useId)(); 28348 const context = (0,external_React_.useMemo)(() => ({ 28349 id, 28350 initial, 28351 isPresent, 28352 custom, 28353 onExitComplete: (childId) => { 28354 presenceChildren.set(childId, true); 28355 for (const isComplete of presenceChildren.values()) { 28356 if (!isComplete) 28357 return; // can stop searching when any is incomplete 28358 } 28359 onExitComplete && onExitComplete(); 28360 }, 28361 register: (childId) => { 28362 presenceChildren.set(childId, false); 28363 return () => presenceChildren.delete(childId); 28364 }, 28365 }), 28366 /** 28367 * If the presence of a child affects the layout of the components around it, 28368 * we want to make a new context value to ensure they get re-rendered 28369 * so they can detect that layout change. 28370 */ 28371 presenceAffectsLayout ? undefined : [isPresent]); 28372 (0,external_React_.useMemo)(() => {
28373 presenceChildren.forEach((_, key) => presenceChildren.set(key, false)); 28374 }, [isPresent]); 28375 /** 28376 * If there's no `motion` components to fire exit animations, we want to remove this 28377 * component immediately. 28378 */ 28379 external_React_.useEffect(() => { 28380 !isPresent && 28381 !presenceChildren.size && 28382 onExitComplete && 28383 onExitComplete(); 28384 }, [isPresent]); 28385 if (mode === "popLayout") { 28386 children = external_React_.createElement(PopChild, { isPresent: isPresent }, children); 28387 } 28388 return (external_React_.createElement(PresenceContext_PresenceContext.Provider, { value: context }, children)); 28389}; 28390function newChildrenMap() { 28391 return new Map(); 28392} 28393 28394 28395 28396;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/utils/use-unmount-effect.mjs 28397 28398 28399function useUnmountEffect(callback) { 28400 return (0,external_React_.useEffect)(() => () => callback(), []); 28401} 28402 28403 28404 28405;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/components/AnimatePresence/index.mjs 28406 28407 28408 28409 28410 28411 28412 28413 28414 28415 28416const getChildKey = (child) => child.key || ""; 28417function updateChildLookup(children, allChildren) { 28418 children.forEach((child) => { 28419 const key = getChildKey(child); 28420 allChildren.set(key, child); 28421 }); 28422} 28423function onlyElements(children) { 28424 const filtered = []; 28425 // We use forEach here instead of map as map mutates the component key by preprending `.$` 28426 external_React_.Children.forEach(children, (child) => { 28427 if ((0,external_React_.isValidElement)(child)) 28428 filtered.push(child); 28429 }); 28430 return filtered; 28431} 28432/** 28433 * `AnimatePresence` enables the animation of components that have been removed from the tree. 28434 * 28435 * When adding/removing more than a single child, every child **must** be given a unique `key` prop. 28436 * 28437 * Any `motion` components that have an `exit` property defined will animate out when removed from 28438 * the tree. 28439 * 28440 * ```jsx 28441 * import { motion, AnimatePresence } from 'framer-motion' 28442 * 28443 * export const Items = ({ items }) => ( 28444 * <AnimatePresence> 28445 * {items.map(item => ( 28446 * <motion.div 28447 * key={item.id} 28448 * initial={{ opacity: 0 }} 28449 * animate={{ opacity: 1 }} 28450 * exit={{ opacity: 0 }} 28451 * /> 28452 * ))} 28453 * </AnimatePresence> 28454 * ) 28455 * ``` 28456 * 28457 * You can sequence exit animations throughout a tree using variants. 28458 * 28459 * If a child contains multiple `motion` components with `exit` props, it will only unmount the child 28460 * once all `motion` components have finished animating out. Likewise, any components using 28461 * `usePresence` all need to call `safeToRemove`. 28462 * 28463 * @public 28464 */ 28465const AnimatePresence = ({ children, custom, initial = true, onExitComplete, exitBeforeEnter, presenceAffectsLayout = true, mode = "sync", }) => { 28466 errors_invariant(!exitBeforeEnter, "Replace exitBeforeEnter with mode='wait'"); 28467 // We want to force a re-render once all exiting animations have finished. We 28468 // either use a local forceRender function, or one from a parent context if it exists. 28469 const forceRender = (0,external_React_.useContext)(LayoutGroupContext).forceRender || use_force_update_useForceUpdate()[0]; 28470 const isMounted = useIsMounted(); 28471 // Filter out any children that aren't ReactElements. We can only track ReactElements with a props.key 28472 const filteredChildren = onlyElements(children); 28473 let childrenToRender = filteredChildren; 28474 const exitingChildren = (0,external_React_.useRef)(new Map()).current; 28475 // Keep a living record of the children we're actually rendering so we 28476 // can diff to figure out which are entering and exiting 28477 const presentChildren = (0,external_React_.useRef)(childrenToRender); 28478 // A lookup table to quickly reference components by key 28479 const allChildren = (0,external_React_.useRef)(new Map()).current; 28480 // If this is the initial component render, just deal with logic surrounding whether 28481 // we play onMount animations or not. 28482 const isInitialRender = (0,external_React_.useRef)(true); 28483 useIsomorphicLayoutEffect(() => { 28484 isInitialRender.current = false;
28485 updateChildLookup(filteredChildren, allChildren); 28486 presentChildren.current = childrenToRender; 28487 }); 28488 useUnmountEffect(() => { 28489 isInitialRender.current = true; 28490 allChildren.clear(); 28491 exitingChildren.clear(); 28492 }); 28493 if (isInitialRender.current) { 28494 return (external_React_.createElement(external_React_.Fragment, null, childrenToRender.map((child) => (external_React_.createElement(PresenceChild, { key: getChildKey(child), isPresent: true, initial: initial ? undefined : false, presenceAffectsLayout: presenceAffectsLayout, mode: mode }, child))))); 28495 } 28496 // If this is a subsequent render, deal with entering and exiting children 28497 childrenToRender = [...childrenToRender]; 28498 // Diff the keys of the currently-present and target children to update our 28499 // exiting list. 28500 const presentKeys = presentChildren.current.map(getChildKey); 28501 const targetKeys = filteredChildren.map(getChildKey); 28502 // Diff the present children with our target children and mark those that are exiting 28503 const numPresent = presentKeys.length; 28504 for (let i = 0; i < numPresent; i++) { 28505 const key = presentKeys[i]; 28506 if (targetKeys.indexOf(key) === -1 && !exitingChildren.has(key)) { 28507 exitingChildren.set(key, undefined); 28508 } 28509 } 28510 // If we currently have exiting children, and we're deferring rendering incoming children 28511 // until after all current children have exiting, empty the childrenToRender array 28512 if (mode === "wait" && exitingChildren.size) { 28513 childrenToRender = []; 28514 } 28515 // Loop through all currently exiting components and clone them to overwrite `animate` 28516 // with any `exit` prop they might have defined. 28517 exitingChildren.forEach((component, key) => { 28518 // If this component is actually entering again, early return 28519 if (targetKeys.indexOf(key) !== -1) 28520 return; 28521 const child = allChildren.get(key); 28522 if (!child) 28523 return; 28524 const insertionIndex = presentKeys.indexOf(key); 28525 let exitingComponent = component; 28526 if (!exitingComponent) { 28527 const onExit = () => { 28528 allChildren.delete(key); 28529 exitingChildren.delete(key); 28530 // Remove this child from the present children 28531 const removeIndex = presentChildren.current.findIndex((presentChild) => presentChild.key === key); 28532 presentChildren.current.splice(removeIndex, 1); 28533 // Defer re-rendering until all exiting children have indeed left 28534 if (!exitingChildren.size) { 28535 presentChildren.current = filteredChildren; 28536 if (isMounted.current === false) 28537 return; 28538 forceRender(); 28539 onExitComplete && onExitComplete(); 28540 } 28541 }; 28542 exitingComponent = (external_React_.createElement(PresenceChild, { key: getChildKey(child), isPresent: false, onExitComplete: onExit, custom: custom, presenceAffectsLayout: presenceAffectsLayout, mode: mode }, child)); 28543 exitingChildren.set(key, exitingComponent); 28544 } 28545 childrenToRender.splice(insertionIndex, 0, exitingComponent); 28546 }); 28547 // Add `MotionContext` even to children that don't need it to ensure we're rendering 28548 // the same tree between renders 28549 childrenToRender = childrenToRender.map((child) => { 28550 const key = child.key; 28551 return exitingChildren.has(key) ? (child) : (external_React_.createElement(PresenceChild, { key: getChildKey(child), isPresent: true, presenceAffectsLayout: presenceAffectsLayout, mode: mode }, child)); 28552 }); 28553 if (false) {} 28554 return (external_React_.createElement(external_React_.Fragment, null, exitingChildren.size 28555 ? childrenToRender 28556 : childrenToRender.map((child) => (0,external_React_.cloneElement)(child)))); 28557}; 28558 28559 28560 28561;// CONCATENATED MODULE: ./packages/components/build-module/flex/context.js 28562/** 28563 * WordPress dependencies 28564 */ 28565 28566const FlexContext = (0,external_wp_element_namespaceObject.createContext)({ 28567 flexItemDisplay: undefined 28568}); 28569const useFlexContext = () => (0,external_wp_element_namespaceObject.useContext)(FlexContext); 28570 28571;// CONCATENATED MODULE: ./packages/components/build-module/flex/styles.js 28572function 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)."; } 28573/** 28574 * External dependencies 28575 */ 28576 28577const Flex = true ? { 28578 name: "zjik7", 28579 styles: "display:flex" 28580} : 0; 28581const Item = true ? { 28582 name: "qgaee5", 28583 styles: "display:block;max-height:100%;max-width:100%;min-height:0;min-width:0" 28584} : 0; 28585const block = true ? { 28586 name: "82a6rk", 28587 styles: "flex:1" 28588} : 0; 28589 28590/** 28591 * Workaround to optimize DOM rendering. 28592 * We'll enhance alignment with naive parent flex assumptions. 28593 * 28594 * Trade-off: 28595 * Far less DOM less. However, UI rendering is not as reliable. 28596 */ 28597 28598/** 28599 * Improves stability of width/height rendering. 28600 * https://github.com/ItsJonQ/g2/pull/149 28601 */ 28602const ItemsColumn = true ? { 28603 name: "13nosa1", 28604 styles: ">*{min-height:0;}" 28605} : 0;
28606const ItemsRow = true ? { 28607 name: "1pwxzk4", 28608 styles: ">*{min-width:0;}" 28609} : 0; 28610 28611;// CONCATENATED MODULE: ./packages/components/build-module/flex/flex-item/hook.js 28612/** 28613 * External dependencies 28614 */ 28615 28616 28617 28618/** 28619 * Internal dependencies 28620 */ 28621 28622 28623 28624 28625 28626function useFlexItem(props) { 28627 const { 28628 className, 28629 display: displayProp, 28630 isBlock = false, 28631 ...otherProps 28632 } = useContextSystem(props, 'FlexItem'); 28633 const sx = {}; 28634 const contextDisplay = useFlexContext().flexItemDisplay; 28635 sx.Base = /*#__PURE__*/emotion_react_browser_esm_css({ 28636 display: displayProp || contextDisplay 28637 }, true ? "" : 0, true ? "" : 0); 28638 const cx = useCx(); 28639 const classes = cx(Item, sx.Base, isBlock && block, className); 28640 return { 28641 ...otherProps, 28642 className: classes 28643 }; 28644} 28645 28646;// CONCATENATED MODULE: ./packages/components/build-module/flex/flex-block/hook.js 28647/** 28648 * Internal dependencies 28649 */ 28650 28651 28652 28653function useFlexBlock(props) { 28654 const otherProps = useContextSystem(props, 'FlexBlock'); 28655 const flexItemProps = useFlexItem({ 28656 isBlock: true, 28657 ...otherProps 28658 }); 28659 return flexItemProps; 28660} 28661 28662;// CONCATENATED MODULE: ./packages/components/build-module/flex/flex-block/component.js 28663 28664/** 28665 * External dependencies 28666 */ 28667 28668/** 28669 * Internal dependencies 28670 */ 28671 28672 28673 28674 28675function UnconnectedFlexBlock(props, forwardedRef) { 28676 const flexBlockProps = useFlexBlock(props); 28677 return (0,external_wp_element_namespaceObject.createElement)(component, { 28678 ...flexBlockProps, 28679 ref: forwardedRef 28680 }); 28681} 28682 28683/** 28684 * `FlexBlock` is a primitive layout component that adaptively resizes content 28685 * within layout containers like `Flex`. 28686 * 28687 * ```jsx 28688 * import { Flex, FlexBlock } from '@wordpress/components'; 28689 * 28690 * function Example() { 28691 * return ( 28692 * <Flex> 28693 * <FlexBlock>...</FlexBlock> 28694 * </Flex> 28695 * ); 28696 * } 28697 * ``` 28698 */ 28699const FlexBlock = contextConnect(UnconnectedFlexBlock, 'FlexBlock'); 28700/* harmony default export */ const flex_block_component = (FlexBlock); 28701 28702;// CONCATENATED MODULE: ./packages/components/build-module/ui/utils/space.js 28703/** 28704 * The argument value for the `space()` utility function. 28705 * 28706 * When this is a number or a numeric string, it will be interpreted as a 28707 * multiplier for the grid base value (4px). For example, `space( 2 )` will be 8px. 28708 * 28709 * Otherwise, it will be interpreted as a literal CSS length value. For example, 28710 * `space( 'auto' )` will be 'auto', and `space( '2px' )` will be 2px. 28711 */ 28712 28713const GRID_BASE = '4px'; 28714 28715/** 28716 * A function that handles numbers, numeric strings, and unit values. 28717 * 28718 * When given a number or a numeric string, it will return the grid-based 28719 * value as a factor of GRID_BASE, defined above. 28720 * 28721 * When given a unit value or one of the named CSS values like `auto`, 28722 * it will simply return the value back. 28723 * 28724 * @param value A number, numeric string, or a unit value. 28725 */ 28726function space(value) { 28727 if (typeof value === 'undefined') { 28728 return undefined; 28729 } 28730 28731 // Handle empty strings, if it's the number 0 this still works. 28732 if (!value) { 28733 return '0'; 28734 } 28735 const asInt = typeof value === 'number' ? value : Number(value); 28736 28737 // 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. 28738 if (typeof window !== 'undefined' && window.CSS?.supports?.('margin', value.toString()) || Number.isNaN(asInt)) { 28739 return value.toString(); 28740 } 28741 return `calc(${GRID_BASE} * ${value})`; 28742} 28743 28744;// CONCATENATED MODULE: ./packages/components/build-module/utils/rtl.js 28745/** 28746 * External dependencies 28747 */ 28748 28749 28750/** 28751 * WordPress dependencies 28752 */ 28753 28754const LOWER_LEFT_REGEXP = new RegExp(/-left/g); 28755const LOWER_RIGHT_REGEXP = new RegExp(/-right/g); 28756const UPPER_LEFT_REGEXP = new RegExp(/Left/g); 28757const UPPER_RIGHT_REGEXP = new RegExp(/Right/g); 28758 28759/** 28760 * Flips a CSS property from left <-> right. 28761 * 28762 * @param {string} key The CSS property name. 28763 * 28764 * @return {string} The flipped CSS property name, if applicable. 28765 */ 28766function getConvertedKey(key) { 28767 if (key === 'left') { 28768 return 'right'; 28769 } 28770 if (key === 'right') { 28771 return 'left'; 28772 } 28773 if (LOWER_LEFT_REGEXP.test(key)) { 28774 return key.replace(LOWER_LEFT_REGEXP, '-right'); 28775 } 28776 if (LOWER_RIGHT_REGEXP.test(key)) { 28777 return key.replace(LOWER_RIGHT_REGEXP, '-left'); 28778 } 28779 if (UPPER_LEFT_REGEXP.test(key)) { 28780 return key.replace(UPPER_LEFT_REGEXP, 'Right'); 28781 } 28782 if (UPPER_RIGHT_REGEXP.test(key)) { 28783 return key.replace(UPPER_RIGHT_REGEXP, 'Left'); 28784 } 28785 return key; 28786} 28787 28788/** 28789 * An incredibly basic ltr -> rtl converter for style properties 28790 * 28791 * @param {import('react').CSSProperties} ltrStyles 28792 * 28793 * @return {import('react').CSSProperties} Converted ltr -> rtl styles 28794 */ 28795const convertLTRToRTL = (ltrStyles = {}) => { 28796 return Object.fromEntries(Object.entries(ltrStyles).map(([key, value]) => [getConvertedKey(key), value])); 28797}; 28798 28799/** 28800 * A higher-order function that create an incredibly basic ltr -> rtl style converter for CSS objects. 28801 * 28802 * @param {import('react').CSSProperties} ltrStyles Ltr styles. Converts and renders from ltr -> rtl styles, if applicable. 28803 * @param {import('react').CSSProperties} [rtlStyles] Rtl styles. Renders if provided. 28804 * 28805 * @return {() => import('@emotion/react').SerializedStyles} A function to output CSS styles for Emotion's renderer 28806 */
28807function rtl(ltrStyles = {}, rtlStyles) { 28808 return () => { 28809 if (rtlStyles) { 28810 // @ts-ignore: `css` types are wrong, it can accept an object: https://emotion.sh/docs/object-styles#with-css 28811 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); 28812 } 28813 28814 // @ts-ignore: `css` types are wrong, it can accept an object: https://emotion.sh/docs/object-styles#with-css 28815 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); 28816 }; 28817} 28818 28819/** 28820 * Call this in the `useMemo` dependency array to ensure that subsequent renders will 28821 * cause rtl styles to update based on the `isRTL` return value even if all other dependencies 28822 * remain the same. 28823 * 28824 * @example 28825 * const styles = useMemo( () => { 28826 * return css` 28827 * ${ rtl( { marginRight: '10px' } ) } 28828 * `; 28829 * }, [ rtl.watch() ] ); 28830 */ 28831rtl.watch = () => (0,external_wp_i18n_namespaceObject.isRTL)(); 28832 28833;// CONCATENATED MODULE: ./packages/components/build-module/spacer/hook.js 28834/** 28835 * External dependencies 28836 */ 28837 28838 28839/** 28840 * Internal dependencies 28841 */ 28842 28843 28844 28845 28846const isDefined = o => typeof o !== 'undefined' && o !== null; 28847function useSpacer(props) { 28848 const { 28849 className, 28850 margin, 28851 marginBottom = 2, 28852 marginLeft, 28853 marginRight, 28854 marginTop, 28855 marginX, 28856 marginY, 28857 padding, 28858 paddingBottom, 28859 paddingLeft, 28860 paddingRight, 28861 paddingTop, 28862 paddingX, 28863 paddingY, 28864 ...otherProps 28865 } = useContextSystem(props, 'Spacer'); 28866 const cx = useCx(); 28867 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) && rtl({ 28868 marginLeft: space(marginLeft) 28869 })(), isDefined(marginRight) && rtl({ 28870 marginRight: space(marginRight) 28871 })(), 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) && rtl({ 28872 paddingLeft: space(paddingLeft) 28873 })(), isDefined(paddingRight) && rtl({ 28874 paddingRight: space(paddingRight) 28875 })(), className); 28876 return { 28877 ...otherProps, 28878 className: classes 28879 }; 28880} 28881 28882;// CONCATENATED MODULE: ./packages/components/build-module/spacer/component.js 28883 28884/** 28885 * External dependencies 28886 */ 28887 28888/** 28889 * Internal dependencies 28890 */ 28891 28892 28893 28894 28895function UnconnectedSpacer(props, forwardedRef) { 28896 const spacerProps = useSpacer(props); 28897 return (0,external_wp_element_namespaceObject.createElement)(component, { 28898 ...spacerProps, 28899 ref: forwardedRef 28900 }); 28901} 28902 28903/** 28904 * `Spacer` is a primitive layout component that providers inner (`padding`) or outer (`margin`) space in-between components. It c
28904an also be used to adaptively provide space within an `HStack` or `VStack`. 28905 * 28906 * `Spacer` comes with a bunch of shorthand props to adjust `margin` and `padding`. The values of these props 28907 * can either be a number (which will act as a multiplier to the library's grid system base of 4px), 28908 * or a literal CSS value string. 28909 * 28910 * ```jsx 28911 * import { Spacer } from `@wordpress/components` 28912 * 28913 * function Example() { 28914 * return ( 28915 * <View> 28916 * <Spacer> 28917 * <Heading>WordPress.org</Heading> 28918 * </Spacer> 28919 * <Text> 28920 * Code is Poetry 28921 * </Text> 28922 * </View> 28923 * ); 28924 * } 28925 * ``` 28926 */ 28927const Spacer = contextConnect(UnconnectedSpacer, 'Spacer'); 28928/* harmony default export */ const spacer_component = (Spacer); 28929 28930;// CONCATENATED MODULE: ./packages/icons/build-module/library/plus.js 28931 28932/** 28933 * WordPress dependencies 28934 */ 28935 28936const plus = (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.SVG, { 28937 xmlns: "http://www.w3.org/2000/svg", 28938 viewBox: "0 0 24 24" 28939}, (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.Path, { 28940 d: "M18 11.2h-5.2V6h-1.6v5.2H6v1.6h5.2V18h1.6v-5.2H18z" 28941})); 28942/* harmony default export */ const library_plus = (plus); 28943 28944;// CONCATENATED MODULE: ./packages/icons/build-module/library/reset.js 28945 28946/** 28947 * WordPress dependencies 28948 */ 28949 28950const reset_reset = (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.SVG, { 28951 xmlns: "http://www.w3.org/2000/svg", 28952 viewBox: "0 0 24 24" 28953}, (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.Path, { 28954 d: "M7 11.5h10V13H7z" 28955})); 28956/* harmony default export */ const library_reset = (reset_reset); 28957 28958;// CONCATENATED MODULE: ./packages/components/build-module/ui/utils/use-responsive-value.js 28959/** 28960 * WordPress dependencies 28961 */ 28962 28963const breakpoints = ['40em', '52em', '64em']; 28964const useBreakpointIndex = (options = {}) => { 28965 const { 28966 defaultIndex = 0 28967 } = options; 28968 if (typeof defaultIndex !== 'number') { 28969 throw new TypeError(`Default breakpoint index should be a number. Got: ${defaultIndex}, ${typeof defaultIndex}`); 28970 } else if (defaultIndex < 0 || defaultIndex > breakpoints.length - 1) { 28971 throw new RangeError(`Default breakpoint index out of range. Theme has ${breakpoints.length} breakpoints, got index ${defaultIndex}`); 28972 } 28973 const [value, setValue] = (0,external_wp_element_namespaceObject.useState)(defaultIndex); 28974 (0,external_wp_element_namespaceObject.useEffect)(() => { 28975 const getIndex = () => breakpoints.filter(bp => { 28976 return typeof window !== 'undefined' ? window.matchMedia(`screen and (min-width: ${bp})`).matches : false; 28977 }).length; 28978 const onResize = () => { 28979 const newValue = getIndex(); 28980 if (value !== newValue) { 28981 setValue(newValue); 28982 } 28983 }; 28984 onResize(); 28985 if (typeof window !== 'undefined') { 28986 window.addEventListener('resize', onResize); 28987 } 28988 return () => { 28989 if (typeof window !== 'undefined') { 28990 window.removeEventListener('resize', onResize); 28991 } 28992 }; 28993 }, [value]); 28994 return value; 28995}; 28996function useResponsiveValue(values, options = {}) { 28997 const index = useBreakpointIndex(options); 28998 28999 // Allow calling the function with a "normal" value without having to check on the outside. 29000 if (!Array.isArray(values) && typeof values !== 'function') return values; 29001 const array = values || []; 29002 29003 /* eslint-disable jsdoc/no-undefined-types */ 29004 return (/** @type {T[]} */array[/* eslint-enable jsdoc/no-undefined-types */ 29005 index >= array.length ? array.length - 1 : index] 29006 ); 29007} 29008 29009;// CONCATENATED MODULE: ./packages/components/build-module/flex/flex/hook.js 29010/** 29011 * External dependencies 29012 */ 29013 29014 29015/** 29016 * WordPress dependencies 29017 */ 29018 29019 29020 29021/** 29022 * Internal dependencies 29023 */ 29024 29025 29026 29027 29028 29029 29030function useDeprecatedProps(props) { 29031 const { 29032 isReversed, 29033 ...otherProps 29034 } = props; 29035 if (typeof isReversed !== 'undefined') { 29036 external_wp_deprecated_default()('Flex isReversed', { 29037 alternative: 'Flex direction="row-reverse" or "column-reverse"', 29038 since: '5.9' 29039 }); 29040 return { 29041 ...otherProps, 29042 direction: isReversed ? 'row-reverse' : 'row' 29043 }; 29044 } 29045 return otherProps; 29046} 29047function useFlex(props) { 29048 const {
29049 align, 29050 className, 29051 direction: directionProp = 'row', 29052 expanded = true, 29053 gap = 2, 29054 justify = 'space-between', 29055 wrap = false, 29056 ...otherProps 29057 } = useContextSystem(useDeprecatedProps(props), 'Flex'); 29058 const directionAsArray = Array.isArray(directionProp) ? directionProp : [directionProp]; 29059 const direction = useResponsiveValue(directionAsArray); 29060 const isColumn = typeof direction === 'string' && !!direction.includes('column'); 29061 const cx = useCx(); 29062 const classes = (0,external_wp_element_namespaceObject.useMemo)(() => { 29063 const base = /*#__PURE__*/emotion_react_browser_esm_css({ 29064 alignItems: align !== null && align !== void 0 ? align : isColumn ? 'normal' : 'center', 29065 flexDirection: direction, 29066 flexWrap: wrap ? 'wrap' : undefined, 29067 gap: space(gap), 29068 justifyContent: justify, 29069 height: isColumn && expanded ? '100%' : undefined, 29070 width: !isColumn && expanded ? '100%' : undefined 29071 }, true ? "" : 0, true ? "" : 0); 29072 return cx(Flex, base, isColumn ? ItemsColumn : ItemsRow, className); 29073 }, [align, className, cx, direction, expanded, gap, isColumn, justify, wrap]); 29074 return { 29075 ...otherProps, 29076 className: classes, 29077 isColumn 29078 }; 29079} 29080 29081;// CONCATENATED MODULE: ./packages/components/build-module/flex/flex/component.js 29082 29083/** 29084 * External dependencies 29085 */ 29086 29087/** 29088 * Internal dependencies 29089 */ 29090 29091 29092 29093 29094 29095function UnconnectedFlex(props, forwardedRef) { 29096 const { 29097 children, 29098 isColumn, 29099 ...otherProps 29100 } = useFlex(props); 29101 return (0,external_wp_element_namespaceObject.createElement)(FlexContext.Provider, { 29102 value: { 29103 flexItemDisplay: isColumn ? 'block' : undefined 29104 } 29105 }, (0,external_wp_element_namespaceObject.createElement)(component, { 29106 ...otherProps, 29107 ref: forwardedRef 29108 }, children)); 29109} 29110 29111/** 29112 * `Flex` is a primitive layout component that adaptively aligns child content 29113 * horizontally or vertically. `Flex` powers components like `HStack` and 29114 * `VStack`. 29115 * 29116 * `Flex` is used with any of its two sub-components, `FlexItem` and 29117 * `FlexBlock`. 29118 * 29119 * ```jsx 29120 * import { Flex, FlexBlock, FlexItem } from '@wordpress/components'; 29121 * 29122 * function Example() { 29123 * return ( 29124 * <Flex> 29125 * <FlexItem> 29126 * <p>Code</p> 29127 * </FlexItem> 29128 * <FlexBlock> 29129 * <p>Poetry</p> 29130 * </FlexBlock> 29131 * </Flex> 29132 * ); 29133 * } 29134 * ``` 29135 */ 29136const component_Flex = contextConnect(UnconnectedFlex, 'Flex'); 29137/* harmony default export */ const flex_component = (component_Flex); 29138 29139;// CONCATENATED MODULE: ./packages/components/build-module/flex/flex-item/component.js 29140 29141/** 29142 * External dependencies 29143 */ 29144 29145/** 29146 * Internal dependencies 29147 */ 29148 29149 29150 29151 29152function UnconnectedFlexItem(props, forwardedRef) { 29153 const flexItemProps = useFlexItem(props); 29154 return (0,external_wp_element_namespaceObject.createElement)(component, { 29155 ...flexItemProps, 29156 ref: forwardedRef 29157 }); 29158} 29159 29160/** 29161 * `FlexItem` is a primitive layout component that aligns content within layout 29162 * containers like `Flex`. 29163 * 29164 * ```jsx 29165 * import { Flex, FlexItem } from '@wordpress/components'; 29166 * 29167 * function Example() { 29168 * return ( 29169 * <Flex> 29170 * <FlexItem>...</FlexItem> 29171 * </Flex> 29172 * ); 29173 * } 29174 * ``` 29175 */ 29176const FlexItem = contextConnect(UnconnectedFlexItem, 'FlexItem'); 29177/* harmony default export */ const flex_item_component = (FlexItem); 29178 29179;// CONCATENATED MODULE: ./packages/components/build-module/truncate/styles.js 29180function 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)."; } 29181/** 29182 * External dependencies 29183 */ 29184 29185const Truncate = true ? { 29186 name: "hdknak", 29187 styles: "display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" 29188} : 0; 29189 29190;// CONCATENATED MODULE: ./packages/components/build-module/utils/values.js 29191/* eslint-disable jsdoc/valid-types */ 29192/** 29193 * Determines if a value is null or undefined. 29194 * 29195 * @template T 29196 * 29197 * @param {T} value The value to check. 29198 * @return {value is Exclude<T, null | undefined>} Whether value is not null or undefined. 29199 */ 29200function isValueDefined(value) { 29201 return value !== undefined && value !== null; 29202} 29203/* eslint-enable jsdoc/valid-types */ 29204 29205/* eslint-disable jsdoc/valid-types */ 29206/** 29207 * Determines if a value is empty, null, or undefined. 29208 * 29209 * @param {string | number | null | undefined} value The value to check. 29210 * @return {value is ("" | null | undefined)} Whether value is empty. 29211 */ 29212function isValueEmpty(value) { 29213 const isEmptyString = value === ''; 29214 return !isValueDefined(value) || isEmptyString; 29215} 29216/* eslint-enable jsdoc/valid-types */ 29217 29218/** 29219 * Get the first defined/non-null value from an array.
29220 * 29221 * @template T 29222 * 29223 * @param {Array<T | null | undefined>} values Values to derive from. 29224 * @param {T} fallbackValue Fallback value if there are no defined values. 29225 * @return {T} A defined value or the fallback value. 29226 */ 29227function getDefinedValue(values = [], fallbackValue) { 29228 var _values$find; 29229 return (_values$find = values.find(isValueDefined)) !== null && _values$find !== void 0 ? _values$find : fallbackValue; 29230} 29231 29232/** 29233 * Converts a string to a number. 29234 * 29235 * @param {string} value 29236 * @return {number} String as a number. 29237 */ 29238const stringToNumber = value => { 29239 return parseFloat(value); 29240}; 29241 29242/** 29243 * Regardless of the input being a string or a number, returns a number. 29244 * 29245 * Returns `undefined` in case the string is `undefined` or not a valid numeric value. 29246 * 29247 * @param {string | number} value 29248 * @return {number} The parsed number. 29249 */ 29250const ensureNumber = value => { 29251 return typeof value === 'string' ? stringToNumber(value) : value; 29252}; 29253 29254;// CONCATENATED MODULE: ./packages/components/build-module/truncate/utils.js 29255/** 29256 * Internal dependencies 29257 */ 29258 29259const TRUNCATE_ELLIPSIS = 'â¦'; 29260const TRUNCATE_TYPE = { 29261 auto: 'auto', 29262 head: 'head', 29263 middle: 'middle', 29264 tail: 'tail', 29265 none: 'none' 29266}; 29267const TRUNCATE_DEFAULT_PROPS = { 29268 ellipsis: TRUNCATE_ELLIPSIS, 29269 ellipsizeMode: TRUNCATE_TYPE.auto, 29270 limit: 0, 29271 numberOfLines: 0 29272}; 29273 29274// Source 29275// https://github.com/kahwee/truncate-middle 29276function truncateMiddle(word, headLength, tailLength, ellipsis) { 29277 if (typeof word !== 'string') { 29278 return ''; 29279 } 29280 const wordLength = word.length; 29281 // Setting default values 29282 // eslint-disable-next-line no-bitwise 29283 const frontLength = ~~headLength; // Will cast to integer 29284 // eslint-disable-next-line no-bitwise 29285 const backLength = ~~tailLength; 29286 /* istanbul ignore next */ 29287 const truncateStr = isValueDefined(ellipsis) ? ellipsis : TRUNCATE_ELLIPSIS; 29288 if (frontLength === 0 && backLength === 0 || frontLength >= wordLength || backLength >= wordLength || frontLength + backLength >= wordLength) { 29289 return word; 29290 } else if (backLength === 0) { 29291 return word.slice(0, frontLength) + truncateStr; 29292 } 29293 return word.slice(0, frontLength) + truncateStr + word.slice(wordLength - backLength); 29294} 29295function truncateContent(words = '', props) { 29296 const mergedProps = { 29297 ...TRUNCATE_DEFAULT_PROPS, 29298 ...props 29299 }; 29300 const { 29301 ellipsis, 29302 ellipsizeMode, 29303 limit 29304 } = mergedProps; 29305 if (ellipsizeMode === TRUNCATE_TYPE.none) { 29306 return words; 29307 } 29308 let truncateHead; 29309 let truncateTail; 29310 switch (ellipsizeMode) { 29311 case TRUNCATE_TYPE.head: 29312 truncateHead = 0; 29313 truncateTail = limit; 29314 break; 29315 case TRUNCATE_TYPE.middle: 29316 truncateHead = Math.floor(limit / 2); 29317 truncateTail = Math.floor(limit / 2); 29318 break; 29319 default: 29320 truncateHead = limit; 29321 truncateTail = 0; 29322 } 29323 const truncatedContent = ellipsizeMode !== TRUNCATE_TYPE.auto ? truncateMiddle(words, truncateHead, truncateTail, ellipsis) : words; 29324 return truncatedContent; 29325} 29326 29327;// CONCATENATED MODULE: ./packages/components/build-module/truncate/hook.js 29328/** 29329 * External dependencies 29330 */ 29331 29332 29333/** 29334 * WordPress dependencies 29335 */ 29336 29337 29338/** 29339 * Internal dependencies 29340 */ 29341 29342 29343 29344 29345 29346function useTruncate(props) { 29347 const { 29348 className, 29349 children, 29350 ellipsis = TRUNCATE_ELLIPSIS, 29351 ellipsizeMode = TRUNCATE_TYPE.auto, 29352 limit = 0, 29353 numberOfLines = 0, 29354 ...otherProps 29355 } = useContextSystem(props, 'Truncate'); 29356 const cx = useCx(); 29357 const truncatedContent = truncateContent(typeof children === 'string' ? children : '', { 29358 ellipsis, 29359 ellipsizeMode, 29360 limit, 29361 numberOfLines 29362 }); 29363 const shouldTruncate = ellipsizeMode === TRUNCATE_TYPE.auto; 29364 const classes = (0,external_wp_element_namespaceObject.useMemo)(() => { 29365 const truncateLines = /*#__PURE__*/emotion_react_browser_esm_css("-webkit-box-orient:vertical;-webkit-line-clamp:", numberOfLines, ";display:-webkit-box;overflow:hidden;" + ( true ? "" : 0), true ? "" : 0); 29366 return cx(shouldTruncate && !numberOfLines && Truncate, shouldTruncate && !!numberOfLines && truncateLines, className); 29367 }, [className, cx, numberOfLines, shouldTruncate]); 29368 return { 29369 ...otherProps, 29370 className: classes, 29371 children: truncatedContent 29372 }; 29373} 29374 29375;// CONCATENATED MODULE: ./packages/components/build-module/ui/utils/colors.js 29376/** 29377 * External dependencies 29378 */ 29379 29380 29381 29382 29383/** @type {HTMLDivElement} */ 29384let colorComputationNode; 29385k([names]); 29386 29387/** 29388 * @return {HTMLDivElement | undefined} The HTML element for color computation. 29389 */ 29390function getColorComputationNode() { 29391 if (typeof document === 'undefined') return; 29392 if (!colorComputationNode) { 29393 // Create a temporary element for style computation. 29394 const el = document.createElement('div'); 29395 el.setAttribute('data-g2-color-computation-node', ''); 29396 // Inject for window computed style. 29397 document.body.appendChild(el); 29398 colorComputationNode = el; 29399 } 29400 return colorComputationNode; 29401} 29402 29403/** 29404 * @param {string | unknown} value 29405 * 29406 * @return {boolean} Whether the value is a valid color. 29407 */ 29408function isColor(value) { 29409 if (typeof value !== 'string') return false;
29410 const test = w(value); 29411 return test.isValid(); 29412} 29413 29414/** 29415 * Retrieves the computed background color. This is useful for getting the 29416 * value of a CSS variable color. 29417 * 29418 * @param {string | unknown} backgroundColor The background color to compute. 29419 * 29420 * @return {string} The computed background color. 29421 */ 29422function _getComputedBackgroundColor(backgroundColor) { 29423 if (typeof backgroundColor !== 'string') return ''; 29424 if (isColor(backgroundColor)) return backgroundColor; 29425 if (!backgroundColor.includes('var(')) return ''; 29426 if (typeof document === 'undefined') return ''; 29427 29428 // Attempts to gracefully handle CSS variables color values. 29429 const el = getColorComputationNode(); 29430 if (!el) return ''; 29431 el.style.background = backgroundColor; 29432 // Grab the style. 29433 const computedColor = window?.getComputedStyle(el).background; 29434 // Reset. 29435 el.style.background = ''; 29436 return computedColor || ''; 29437} 29438const getComputedBackgroundColor = memize(_getComputedBackgroundColor); 29439 29440/** 29441 * Get the text shade optimized for readability, based on a background color. 29442 * 29443 * @param {string | unknown} backgroundColor The background color. 29444 * 29445 * @return {string} The optimized text color (black or white). 29446 */ 29447function getOptimalTextColor(backgroundColor) { 29448 const background = getComputedBackgroundColor(backgroundColor); 29449 return w(background).isLight() ? '#000000' : '#ffffff'; 29450} 29451 29452/** 29453 * Get the text shade optimized for readability, based on a background color. 29454 * 29455 * @param {string | unknown} backgroundColor The background color. 29456 * 29457 * @return {string} The optimized text shade (dark or light). 29458 */ 29459function getOptimalTextShade(backgroundColor) { 29460 const result = getOptimalTextColor(backgroundColor); 29461 return result === '#000000' ? 'dark' : 'light'; 29462} 29463 29464;// CONCATENATED MODULE: ./packages/components/build-module/utils/config-values.js 29465/** 29466 * Internal dependencies 29467 */ 29468 29469 29470const CONTROL_HEIGHT = '36px'; 29471const CONTROL_PADDING_X = '12px'; 29472const CONTROL_PROPS = { 29473 controlSurfaceColor: COLORS.white, 29474 controlTextActiveColor: COLORS.theme.accent, 29475 controlPaddingX: CONTROL_PADDING_X, 29476 controlPaddingXLarge: `calc(${CONTROL_PADDING_X} * 1.3334)`, 29477 controlPaddingXSmall: `calc(${CONTROL_PADDING_X} / 1.3334)`, 29478 controlBackgroundColor: COLORS.white, 29479 controlBorderRadius: '2px', 29480 controlBoxShadow: 'transparent', 29481 controlBoxShadowFocus: `0 0 0 0.5px ${COLORS.theme.accent}`, 29482 controlDestructiveBorderColor: COLORS.alert.red, 29483 controlHeight: CONTROL_HEIGHT, 29484 controlHeightXSmall: `calc( ${CONTROL_HEIGHT} * 0.6 )`, 29485 controlHeightSmall: `calc( ${CONTROL_HEIGHT} * 0.8 )`, 29486 controlHeightLarge: `calc( ${CONTROL_HEIGHT} * 1.2 )`, 29487 controlHeightXLarge: `calc( ${CONTROL_HEIGHT} * 1.4 )` 29488}; 29489const TOGGLE_GROUP_CONTROL_PROPS = { 29490 toggleGroupControlBackgroundColor: CONTROL_PROPS.controlBackgroundColor, 29491 toggleGroupControlBorderColor: COLORS.ui.border, 29492 toggleGroupControlBackdropBackgroundColor: CONTROL_PROPS.controlSurfaceColor, 29493 toggleGroupControlBackdropBorderColor: COLORS.ui.border, 29494 toggleGroupControlButtonColorActive: CONTROL_PROPS.controlBackgroundColor 29495}; 29496 29497// Using Object.assign to avoid creating circular references when emitting 29498// TypeScript type declarations. 29499/* harmony default export */ const config_values = (Object.assign({}, CONTROL_PROPS, TOGGLE_GROUP_CONTROL_PROPS, { 29500 colorDivider: 'rgba(0, 0, 0, 0.1)', 29501 colorScrollbarThumb: 'rgba(0, 0, 0, 0.2)', 29502 colorScrollbarThumbHover: 'rgba(0, 0, 0, 0.5)', 29503 colorScrollbarTrack: 'rgba(0, 0, 0, 0.04)', 29504 elevationIntensity: 1, 29505 radiusBlockUi: '2px', 29506 borderWidth: '1px', 29507 borderWidthFocus: '1.5px', 29508 borderWidthTab: '4px', 29509 spinnerSize: 16, 29510 fontSize: '13px', 29511 fontSizeH1: 'calc(2.44 * 13px)', 29512 fontSizeH2: 'calc(1.95 * 13px)', 29513 fontSizeH3: 'calc(1.56 * 13px)', 29514 fontSizeH4: 'calc(1.25 * 13px)', 29515 fontSizeH5: '13px', 29516 fontSizeH6: 'calc(0.8 * 13px)', 29517 fontSizeInputMobile: '16px', 29518 fontSizeMobile: '15px', 29519 fontSizeSmall: 'calc(0.92 * 13px)', 29520 fontSizeXSmall: 'calc(0.75 * 13px)', 29521 fontLineHeightBase: '1.2', 29522 fontWeight: 'normal', 29523 fontWeightHeading: '600', 29524 gridBase: '4px', 29525 cardBorderRadius: '2px', 29526 cardPaddingXSmall: `${space(2)}`, 29527 cardPaddingSmall: `${space(4)}`, 29528 cardPaddingMedium: `${space(4)} ${space(6)}`, 29529 cardPaddingLarge: `${space(6)} ${space(8)}`, 29530 popoverShadow: `0 0.7px 1px rgba(0, 0, 0, 0.1), 0 1.2px 1.7px -0.2px rgba(0, 0, 0, 0.1), 0 2.3px 3.3px -0.5px rgba(0, 0, 0, 0.1)`,
29531 surfaceBackgroundColor: COLORS.white, 29532 surfaceBackgroundSubtleColor: '#F3F3F3', 29533 surfaceBackgroundTintColor: '#F5F5F5', 29534 surfaceBorderColor: 'rgba(0, 0, 0, 0.1)', 29535 surfaceBorderBoldColor: 'rgba(0, 0, 0, 0.15)', 29536 surfaceBorderSubtleColor: 'rgba(0, 0, 0, 0.05)', 29537 surfaceBackgroundTertiaryColor: COLORS.white, 29538 surfaceColor: COLORS.white, 29539 transitionDuration: '200ms', 29540 transitionDurationFast: '160ms', 29541 transitionDurationFaster: '120ms', 29542 transitionDurationFastest: '100ms', 29543 transitionTimingFunction: 'cubic-bezier(0.08, 0.52, 0.52, 1)', 29544 transitionTimingFunctionControl: 'cubic-bezier(0.12, 0.8, 0.32, 1)' 29545})); 29546 29547;// CONCATENATED MODULE: ./packages/components/build-module/text/styles.js 29548function 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)."; } 29549/** 29550 * External dependencies 29551 */ 29552 29553 29554/** 29555 * Internal dependencies 29556 */ 29557 29558const Text = /*#__PURE__*/emotion_react_browser_esm_css("color:", COLORS.gray[900], ";line-height:", config_values.fontLineHeightBase, ";margin:0;" + ( true ? "" : 0), true ? "" : 0); 29559const styles_block = true ? { 29560 name: "4zleql", 29561 styles: "display:block" 29562} : 0; 29563const positive = /*#__PURE__*/emotion_react_browser_esm_css("color:", COLORS.alert.green, ";" + ( true ? "" : 0), true ? "" : 0); 29564const destructive = /*#__PURE__*/emotion_react_browser_esm_css("color:", COLORS.alert.red, ";" + ( true ? "" : 0), true ? "" : 0); 29565const muted = /*#__PURE__*/emotion_react_browser_esm_css("color:", COLORS.gray[700], ";" + ( true ? "" : 0), true ? "" : 0); 29566const 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); 29567const upperCase = true ? { 29568 name: "50zrmy", 29569 styles: "text-transform:uppercase" 29570} : 0; 29571 29572// EXTERNAL MODULE: ./node_modules/highlight-words-core/dist/index.js 29573var dist = __webpack_require__(3138); 29574;// CONCATENATED MODULE: ./packages/components/build-module/text/utils.js 29575/** 29576 * External dependencies 29577 */ 29578 29579 29580 29581/** 29582 * WordPress dependencies 29583 */ 29584 29585 29586/** 29587 * Source: 29588 * https://github.com/bvaughn/react-highlight-words/blob/HEAD/src/Highlighter.js 29589 */ 29590 29591/* eslint-disable jsdoc/valid-types */ 29592/** 29593 * @typedef Options 29594 * @property {string} [activeClassName=''] Classname for active highlighted areas. 29595 * @property {number} [activeIndex=-1] The index of the active highlighted area. 29596 * @property {import('react').AllHTMLAttributes<HTMLDivElement>['style']} [activeStyle] Styles to apply to the active highlighted area. 29597 * @property {boolean} [autoEscape] Whether to automatically escape text. 29598 * @property {boolean} [caseSensitive=false] Whether to highlight in a case-sensitive manner. 29599 * @property {string} children Children to highlight. 29600 * @property {import('highlight-words-core').FindAllArgs['findChunks']} [findChunks] Custom `findChunks` function to pass to `highlight-words-core`. 29601 * @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). 29602 * @property {import('react').AllHTMLAttributes<HTMLDivElement>['style']} [highlightStyle={}] Styles to apply to highlighted text. 29603 * @property {keyof JSX.IntrinsicElements} [highlightTag='mark'] Tag to use for the highlighted text. 29604 * @property {import('highlight-words-core').FindAllArgs['sanitize']} [sanitize] Custom `santize` function to pass to `highlight-words-core`. 29605 * @property {string[]} [searchWords=[]] Words to search for and highlight. 29606 * @property {string} [unhighlightClassName=''] Classname to apply to unhighlighted text. 29607 * @property {import('react').AllHTMLAttributes<HTMLDivElement>['style']} [unhighlightStyle] Style to apply to unhighlighted text. 29608 */ 29609 29610/** 29611 * Maps props to lowercase names. 29612 * 29613 * @template {Record<string, unknown>} T 29614 * @param {T} object Props to map. 29615 * @return {{[K in keyof T as Lowercase<string & K>]: T[K]}} The mapped props. 29616 */ 29617/* eslint-enable jsdoc/valid-types */ 29618const lowercaseProps = object => { 29619 /** @type {any} */ 29620 const mapped = {}; 29621 for (const key in object) { 29622 mapped[key.toLowerCase()] = object[key]; 29623 } 29624 return mapped; 29625}; 29626const memoizedLowercaseProps = memize(lowercaseProps); 29627 29628/** 29629 * 29630 * @param {Options} options 29631 */ 29632function createHighlighterText({ 29633 activeClassName = '', 29634 activeIndex = -1, 29635 activeStyle, 29636 autoEscape, 29637 caseSensitive = false, 29638 children, 29639 findChunks, 29640 highlightClassName = '', 29641 highlightStyle = {}, 29642 highlightTag = 'mark', 29643 sanitize, 29644 searchWords = [], 29645 unhighlightClassName = '', 29646 unhighlightStyle 29647}) { 29648 if (!children) return null; 29649 if (typeof children !== 'string') return children; 29650 const textToHighlight = children; 29651 const chunks = (0,dist.findAll)({ 29652 autoEscape, 29653 caseSensitive, 29654 findChunks, 29655 sanitize, 29656 searchWords, 29657 textToHighlight 29658 }); 29659 const HighlightTag = highlightTag; 29660 let highlightIndex = -1; 29661 let highlightClassNames = ''; 29662 let highlightStyles; 29663 const textContent = chunks.map((chunk, index) => { 29664 const text = textToHighlight.substr(chunk.start, chunk.end - chunk.start); 29665 if (chunk.highlight) { 29666 highlightIndex++; 29667 let highlightClass; 29668 if (typeof highlightClassName === 'object') { 29669 if (!caseSensitive) { 29670 highlightClassName = memoizedLowercaseProps(highlightClassName); 29671 highlightClass = highlightClassName[text.toLowerCase()]; 29672 } else { 29673 highlightClass = highlightClassName[text]; 29674 } 29675 } else { 29676 highlightClass = highlightClassName; 29677 } 29678 const isActive = highlightIndex === +activeIndex; 29679 highlightClassNames = `${highlightClass} ${isActive ? activeClassName : ''}`; 29680 highlightStyles = isActive === true && activeStyle !== null ? Object.assign({}, highlightStyle, activeStyle) : highlightStyle; 29681 29682 /** @type {Record<string, any>} */ 29683 const props = { 29684 children: text, 29685 className: highlightClassNames, 29686 key: index, 29687 style: highlightStyles 29688 }; 29689 29690 // Don't attach arbitrary props to DOM elements; this triggers React DEV warnings (https://fb.me/react-unknown-prop) 29691 // Only pass through the highlightIndex attribute for custom components. 29692 if (typeof HighlightTag !== 'string') { 29693 props.highlightIndex = highlightIndex; 29694 } 29695 return (0,external_wp_element_namespaceObject.createElement)(HighlightTag, props); 29696 } 29697 return (0,external_wp_element_namespaceObject.createElement)('span', { 29698 children: text, 29699 className: unhighlightClassName, 29700 key: index, 29701 style: unhighlightStyle 29702 }); 29703 }); 29704 return textContent; 29705} 29706 29707;// CONCATENATED MODULE: ./packages/components/build-module/ui/utils/font-size.js 29708/** 29709 * External dependencies 29710 */ 29711
29712/** 29713 * Internal dependencies 29714 */ 29715 29716const BASE_FONT_SIZE = 13; 29717const PRESET_FONT_SIZES = { 29718 body: BASE_FONT_SIZE, 29719 caption: 10, 29720 footnote: 11, 29721 largeTitle: 28, 29722 subheadline: 12, 29723 title: 20 29724}; 29725const HEADING_FONT_SIZES = [1, 2, 3, 4, 5, 6].flatMap(n => [n, n.toString()]); 29726function getFontSize(size = BASE_FONT_SIZE) { 29727 if (size in PRESET_FONT_SIZES) { 29728 return getFontSize(PRESET_FONT_SIZES[size]); 29729 } 29730 if (typeof size !== 'number') { 29731 const parsed = parseFloat(size); 29732 if (Number.isNaN(parsed)) return size; 29733 size = parsed; 29734 } 29735 const ratio = `(${size} / ${BASE_FONT_SIZE})`; 29736 return `calc(${ratio} * ${config_values.fontSize})`; 29737} 29738function getHeadingFontSize(size = 3) { 29739 if (!HEADING_FONT_SIZES.includes(size)) { 29740 return getFontSize(size); 29741 } 29742 const headingSize = `fontSizeH${size}`; 29743 return config_values[headingSize]; 29744} 29745 29746;// CONCATENATED MODULE: ./packages/components/build-module/text/get-line-height.js 29747/** 29748 * External dependencies 29749 */ 29750 29751/** 29752 * Internal dependencies 29753 */ 29754 29755 29756 29757function getLineHeight(adjustLineHeightForInnerControls, lineHeight) { 29758 if (lineHeight) return lineHeight; 29759 if (!adjustLineHeightForInnerControls) return; 29760 let value = `calc(${config_values.controlHeight} + ${space(2)})`; 29761 switch (adjustLineHeightForInnerControls) { 29762 case 'large':
29763 value = `calc(${config_values.controlHeightLarge} + ${space(2)})`; 29764 break; 29765 case 'small': 29766 value = `calc(${config_values.controlHeightSmall} + ${space(2)})`; 29767 break; 29768 case 'xSmall': 29769 value = `calc(${config_values.controlHeightXSmall} + ${space(2)})`; 29770 break; 29771 default: 29772 break; 29773 } 29774 return value; 29775} 29776 29777;// CONCATENATED MODULE: ./packages/components/build-module/text/hook.js 29778function 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)."; } 29779/** 29780 * External dependencies 29781 */ 29782 29783 29784/** 29785 * WordPress dependencies 29786 */ 29787 29788 29789/** 29790 * Internal dependencies 29791 */ 29792 29793 29794 29795 29796 29797 29798 29799 29800 29801 29802/** 29803 * @param {import('../ui/context').WordPressComponentProps<import('./types').Props, 'span'>} props 29804 */ 29805var hook_ref = true ? { 29806 name: "50zrmy", 29807 styles: "text-transform:uppercase" 29808} : 0; 29809function useText(props) { 29810 const { 29811 adjustLineHeightForInnerControls, 29812 align, 29813 children, 29814 className, 29815 color, 29816 ellipsizeMode, 29817 isDestructive = false, 29818 display, 29819 highlightEscape = false, 29820 highlightCaseSensitive = false, 29821 highlightWords, 29822 highlightSanitize, 29823 isBlock = false, 29824 letterSpacing, 29825 lineHeight: lineHeightProp, 29826 optimizeReadabilityFor, 29827 size, 29828 truncate = false, 29829 upperCase = false, 29830 variant, 29831 weight = config_values.fontWeight, 29832 ...otherProps 29833 } = useContextSystem(props, 'Text'); 29834 29835 /** @type {import('react').ReactNode} */ 29836 let content = children; 29837 const isHighlighter = Array.isArray(highlightWords); 29838 const isCaption = size === 'caption'; 29839 if (isHighlighter) { 29840 if (typeof children !== 'string') { 29841 throw new TypeError('`children` of `Text` must only be `string` types when `highlightWords` is defined'); 29842 } 29843 content = createHighlighterText({ 29844 autoEscape: highlightEscape, 29845 // Disable reason: We need to disable this otherwise it erases the cast 29846 // eslint-disable-next-line object-shorthand 29847 children: /** @type {string} */children, 29848 caseSensitive: highlightCaseSensitive, 29849 searchWords: highlightWords, 29850 sanitize: highlightSanitize 29851 }); 29852 } 29853 const cx = useCx(); 29854 const classes = (0,external_wp_element_namespaceObject.useMemo)(() => { 29855 const sx = {}; 29856 const lineHeight = getLineHeight(adjustLineHeightForInnerControls, lineHeightProp); 29857 sx.Base = /*#__PURE__*/emotion_react_browser_esm_css({ 29858 color, 29859 display, 29860 fontSize: getFontSize(size), 29861 /* eslint-disable jsdoc/valid-types */ 29862 fontWeight: /** @type {import('react').CSSProperties['fontWeight']} */ 29863 weight, 29864 /* eslint-enable jsdoc/valid-types */ 29865 lineHeight, 29866 letterSpacing, 29867 textAlign: align 29868 }, true ? "" : 0, true ? "" : 0); 29869 sx.upperCase = hook_ref; 29870 sx.optimalTextColor = null; 29871 if (optimizeReadabilityFor) { 29872 const isOptimalTextColorDark = getOptimalTextShade(optimizeReadabilityFor) === 'dark'; 29873 sx.optimalTextColor = isOptimalTextColorDark ? /*#__PURE__*/emotion_react_browser_esm_css({ 29874 color: COLORS.gray[900] 29875 }, true ? "" : 0, true ? "" : 0) : /*#__PURE__*/emotion_react_browser_esm_css({ 29876 color: COLORS.white 29877 }, true ? "" : 0, true ? "" : 0); 29878 } 29879 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); 29880 }, [adjustLineHeightForInnerControls, align, className, color, cx, display, isBlock, isCaption, isDestructive, isHighlighter, letterSpacing, lineHeightProp, optimizeReadabilityFor, size, upperCase, variant, weight]); 29881 29882 /** @type {undefined | 'auto' | 'none'} */ 29883 let finalEllipsizeMode; 29884 if (truncate === true) { 29885 finalEllipsizeMode = 'auto'; 29886 } 29887 if (truncate === false) { 29888 finalEllipsizeMode = 'none'; 29889 } 29890 const finalComponentProps = { 29891 ...otherProps, 29892 className: classes, 29893 children, 29894 ellipsizeMode: ellipsizeMode || finalEllipsizeMode 29895 }; 29896 const truncateProps = useTruncate(finalComponentProps); 29897 29898 /** 29899 * Enhance child `<Link />` components to inherit font size. 29900 */ 29901 if (!truncate && Array.isArray(children)) { 29902 content = external_wp_element_namespaceObject.Children.map(children, child => { 29903 if (typeof child !== 'object' || child === null || !('props' in child)) { 29904 return child; 29905 } 29906 const isLink = hasConnectNamespace(child, ['Link']); 29907 if (isLink) { 29908 return (0,external_wp_element_namespaceObject.cloneElement)(child, { 29909 size: child.props.size || 'inherit' 29910 }); 29911 } 29912 return child; 29913 }); 29914 } 29915 return { 29916 ...truncateProps, 29917 children: truncate ? truncateProps.children : content 29918 }; 29919} 29920 29921;// CONCATENATED MODULE: ./packages/components/build-module/text/component.js 29922 29923/** 29924 * Internal dependencies 29925 */ 29926 29927 29928 29929 29930/** 29931 * @param {import('../ui/context').WordPressComponentProps<import('./types').Props, 'span'>} props 29932 * @param {import('react').ForwardedRef<any>} forwardedRef 29933 */ 29934function component_Text(props, forwardedRef) { 29935 const textProps = useText(props); 29936 return (0,external_wp_element_namespaceObject.createElement)(component, {
29937 as: "span", 29938 ...textProps, 29939 ref: forwardedRef 29940 }); 29941} 29942 29943/** 29944 * `Text` is a core component that renders text in the library, using the 29945 * library's typography system. 29946 * 29947 * `Text` can be used to render any text-content, like an HTML `p` or `span`. 29948 * 29949 * @example 29950 * 29951 * ```jsx 29952 * import { __experimentalText as Text } from `@wordpress/components`; 29953 * 29954 * function Example() { 29955 * return <Text>Code is Poetry</Text>; 29956 * } 29957 * ``` 29958 */ 29959const ConnectedText = contextConnect(component_Text, 'Text'); 29960/* harmony default export */ const text_component = (ConnectedText); 29961 29962;// CONCATENATED MODULE: ./packages/components/build-module/utils/base-label.js 29963function base_label_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)."; } 29964/** 29965 * External dependencies 29966 */ 29967 29968 29969// This is a very low-level mixin which you shouldn't have to use directly. 29970// Try to use BaseControl's StyledLabel or BaseControl.VisualLabel if you can. 29971const baseLabelTypography = true ? { 29972 name: "9amh4a", 29973 styles: "font-size:11px;font-weight:500;line-height:1.4;text-transform:uppercase" 29974} : 0; 29975 29976;// CONCATENATED MODULE: ./packages/components/build-module/input-control/styles/input-control-styles.js 29977 29978 29979function 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)."; } 29980/** 29981 * External dependencies 29982 */ 29983 29984 29985 29986 29987 29988 29989var _ref2 = true ? { 29990 name: "1739oy8", 29991 styles: "z-index:1" 29992} : 0; 29993const rootFocusedStyles = ({ 29994 isFocused 29995}) => { 29996 if (!isFocused) return ''; 29997 return _ref2; 29998}; 29999const input_control_styles_Root = /*#__PURE__*/emotion_styled_base_browser_esm(flex_component, true ? { 30000 target: "em5sgkm7" 30001} : 0)("box-sizing:border-box;position:relative;border-radius:2px;padding-top:0;", rootFocusedStyles, ";" + ( true ? "" : 0)); 30002const containerDisabledStyles = ({ 30003 disabled 30004}) => { 30005 const backgroundColor = disabled ? COLORS.ui.backgroundDisabled : COLORS.ui.background; 30006 return /*#__PURE__*/emotion_react_browser_esm_css({ 30007 backgroundColor 30008 }, true ? "" : 0, true ? "" : 0); 30009}; 30010var input_control_styles_ref = true ? { 30011 name: "1d3w5wq", 30012 styles: "width:100%" 30013} : 0; 30014const containerWidthStyles = ({ 30015 __unstableInputWidth, 30016 labelPosition 30017}) => { 30018 if (!__unstableInputWidth) return input_control_styles_ref; 30019 if (labelPosition === 'side') return ''; 30020 if (labelPosition === 'edge') { 30021 return /*#__PURE__*/emotion_react_browser_esm_css({ 30022 flex: `0 0 ${__unstableInputWidth}` 30023 }, true ? "" : 0, true ? "" : 0); 30024 } 30025 return /*#__PURE__*/emotion_react_browser_esm_css({ 30026 width: __unstableInputWidth 30027 }, true ? "" : 0, true ? "" : 0); 30028}; 30029const Container = emotion_styled_base_browser_esm("div", true ? { 30030 target: "em5sgkm6" 30031} : 0)("align-items:center;box-sizing:border-box;border-radius:inherit;display:flex;flex:1;position:relative;", containerDisabledStyles, " ", containerWidthStyles, ";" + ( true ? "" : 0)); 30032const disabledStyles = ({ 30033 disabled 30034}) => { 30035 if (!disabled) return ''; 30036 return /*#__PURE__*/emotion_react_browser_esm_css({ 30037 color: COLORS.ui.textDisabled 30038 }, true ? "" : 0, true ? "" : 0); 30039}; 30040const fontSizeStyles = ({ 30041 inputSize: size 30042}) => { 30043 const sizes = { 30044 default: '13px', 30045 small: '11px', 30046 '__unstable-large': '13px' 30047 }; 30048 const fontSize = sizes[size] || sizes.default; 30049 const fontSizeMobile = '16px'; 30050 if (!fontSize) return ''; 30051 return /*#__PURE__*/emotion_react_browser_esm_css("font-size:", fontSizeMobile, ";@media ( min-width: 600px ){font-size:", fontSize, ";}" + ( true ? "" : 0), true ? "" : 0); 30052}; 30053const getSizeConfig = ({ 30054 inputSize: size, 30055 __next36pxDefaultSize 30056}) => { 30057 // Paddings may be overridden by the custom paddings props. 30058 const sizes = { 30059 default: { 30060 height: 36, 30061 lineHeight: 1, 30062 minHeight: 36, 30063 paddingLeft: space(4), 30064 paddingRight: space(4) 30065 }, 30066 small: { 30067 height: 24, 30068 lineHeight: 1, 30069 minHeight: 24, 30070 paddingLeft: space(2), 30071 paddingRight: space(2) 30072 }, 30073 '__unstable-large': { 30074 height: 40, 30075 lineHeight: 1, 30076 minHeight: 40, 30077 paddingLeft: space(4), 30078 paddingRight: space(4) 30079 } 30080 }; 30081 if (!__next36pxDefaultSize) { 30082 sizes.default = { 30083 height: 30, 30084 lineHeight: 1, 30085 minHeight: 30, 30086 paddingLeft: space(2), 30087 paddingRight: space(2) 30088 }; 30089 } 30090 return sizes[size] || sizes.default; 30091}; 30092const sizeStyles = props => {
30093 return /*#__PURE__*/emotion_react_browser_esm_css(getSizeConfig(props), true ? "" : 0, true ? "" : 0); 30094}; 30095const customPaddings = ({ 30096 paddingInlineStart, 30097 paddingInlineEnd 30098}) => { 30099 return /*#__PURE__*/emotion_react_browser_esm_css({ 30100 paddingInlineStart, 30101 paddingInlineEnd 30102 }, true ? "" : 0, true ? "" : 0); 30103}; 30104const dragStyles = ({ 30105 isDragging, 30106 dragCursor 30107}) => { 30108 let defaultArrowStyles; 30109 let activeDragCursorStyles; 30110 if (isDragging) { 30111 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); 30112 } 30113 if (isDragging && dragCursor) { 30114 activeDragCursorStyles = /*#__PURE__*/emotion_react_browser_esm_css("&:active{cursor:", dragCursor, ";}" + ( true ? "" : 0), true ? "" : 0); 30115 } 30116 return /*#__PURE__*/emotion_react_browser_esm_css(defaultArrowStyles, " ", activeDragCursorStyles, ";" + ( true ? "" : 0), true ? "" : 0); 30117}; 30118 30119// TODO: Resolve need to use &&& to increase specificity 30120// https://github.com/WordPress/gutenberg/issues/18483 30121 30122const Input = emotion_styled_base_browser_esm("input", true ? { 30123 target: "em5sgkm5" 30124} : 0)("&&&{background-color:transparent;box-sizing:border-box;border:none;box-shadow:none!important;color:", COLORS.gray[900], ";display:block;font-family:inherit;margin:0;outline:none;width:100%;", dragStyles, " ", disabledStyles, " ", fontSizeStyles, " ", sizeStyles, " ", customPaddings, " &::-webkit-input-placeholder{line-height:normal;}}" + ( true ? "" : 0)); 30125const BaseLabel = /*#__PURE__*/emotion_styled_base_browser_esm(text_component, true ? { 30126 target: "em5sgkm4" 30127} : 0)("&&&{", baseLabelTypography, ";box-sizing:border-box;display:block;padding-top:0;padding-bottom:0;max-width:100%;z-index:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}" + ( true ? "" : 0)); 30128const Label = props => (0,external_wp_element_namespaceObject.createElement)(BaseLabel, { 30129 ...props, 30130 as: "label" 30131}); 30132const LabelWrapper = /*#__PURE__*/emotion_styled_base_browser_esm(flex_item_component, true ? { 30133 target: "em5sgkm3" 30134} : 0)( true ? { 30135 name: "1b6uupn", 30136 styles: "max-width:calc( 100% - 10px )" 30137} : 0); 30138const backdropFocusedStyles = ({ 30139 disabled, 30140 isFocused 30141}) => { 30142 let borderColor = isFocused ? COLORS.ui.borderFocus : COLORS.ui.border; 30143 let boxShadow; 30144 let outline; 30145 let outlineOffset; 30146 if (isFocused) { 30147 boxShadow = config_values.controlBoxShadowFocus; 30148 // Windows High Contrast mode will show this outline, but not the box-shadow. 30149 outline = `2px solid transparent`; 30150 outlineOffset = `-2px`; 30151 } 30152 if (disabled) { 30153 borderColor = COLORS.ui.borderDisabled; 30154 } 30155 return /*#__PURE__*/emotion_react_browser_esm_css({ 30156 boxShadow, 30157 borderColor, 30158 borderStyle: 'solid', 30159 borderWidth: 1, 30160 outline, 30161 outlineOffset 30162 }, true ? "" : 0, true ? "" : 0); 30163}; 30164const BackdropUI = emotion_styled_base_browser_esm("div", true ? { 30165 target: "em5sgkm2" 30166} : 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({ 30167 paddingLeft: 2 30168}), ";}" + ( true ? "" : 0)); 30169const Prefix = emotion_styled_base_browser_esm("span", true ? { 30170 target: "em5sgkm1" 30171} : 0)( true ? { 30172 name: "pvvbxf", 30173 styles: "box-sizing:border-box;display:block" 30174} : 0); 30175const Suffix = emotion_styled_base_browser_esm("span", true ? { 30176 target: "em5sgkm0" 30177} : 0)( true ? { 30178 name: "jgf79h", 30179 styles: "align-items:center;align-self:stretch;box-sizing:border-box;display:flex" 30180} : 0); 30181 30182;// CONCATENATED MODULE: ./packages/components/build-module/input-control/backdrop.js 30183 30184/** 30185 * WordPress dependencies 30186 */ 30187 30188/** 30189 * Internal dependencies 30190 */ 30191 30192function Backdrop({ 30193 disabled = false, 30194 isFocused = false 30195}) { 30196 return (0,external_wp_element_namespaceObject.createElement)(BackdropUI, { 30197 "aria-hidden": "true", 30198 className: "components-input-control__backdrop", 30199 disabled: disabled, 30200 isFocused: isFocused 30201 }); 30202} 30203const MemoizedBackdrop = (0,external_wp_element_namespaceObject.memo)(Backdrop); 30204/* harmony default export */ const backdrop = (MemoizedBackdrop); 30205 30206;// CONCATENATED MODULE: ./packages/components/build-module/input-control/label.js 30207 30208/** 30209 * Internal dependencies 30210 */ 30211 30212 30213function label_Label({ 30214 children, 30215 hideLabelFromVision, 30216 htmlFor, 30217 ...props 30218}) { 30219 if (!children) return null; 30220 if (hideLabelFromVision) { 30221 return (0,external_wp_element_namespaceObject.createElement)(visually_hidden_component, { 30222 as: "label", 30223 htmlFor: htmlFor 30224 }, children); 30225 } 30226 return (0,external_wp_element_namespaceObject.createElement)(LabelWrapper, null, (0,external_wp_element_namespaceObject.createElement)(Label, { 30227 htmlFor: htmlFor, 30228 ...props 30229 }, children)); 30230} 30231 30232;// CONCATENATED MODULE: ./packages/components/build-module/input-control/input-base.js 30233 30234/** 30235 * External dependencies 30236 */ 30237
30238/** 30239 * WordPress dependencies 30240 */ 30241 30242 30243 30244/** 30245 * Internal dependencies 30246 */ 30247 30248 30249 30250 30251function useUniqueId(idProp) { 30252 const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(InputBase); 30253 const id = `input-base-control-${instanceId}`; 30254 return idProp || id; 30255} 30256 30257// Adapter to map props for the new ui/flex component. 30258function getUIFlexProps(labelPosition) { 30259 const props = {}; 30260 switch (labelPosition) { 30261 case 'top': 30262 props.direction = 'column'; 30263 props.expanded = false; 30264 props.gap = 0; 30265 break; 30266 case 'bottom': 30267 props.direction = 'column-reverse'; 30268 props.expanded = false; 30269 props.gap = 0; 30270 break; 30271 case 'edge': 30272 props.justify = 'space-between'; 30273 break; 30274 } 30275 return props; 30276} 30277function InputBase({ 30278 __next36pxDefaultSize, 30279 __unstableInputWidth, 30280 children, 30281 className, 30282 disabled = false, 30283 hideLabelFromVision = false, 30284 labelPosition, 30285 id: idProp, 30286 isFocused = false, 30287 label, 30288 prefix, 30289 size = 'default', 30290 suffix, 30291 ...props 30292}, ref) { 30293 const id = useUniqueId(idProp); 30294 const hideLabel = hideLabelFromVision || !label; 30295 const { 30296 paddingLeft, 30297 paddingRight 30298 } = getSizeConfig({ 30299 inputSize: size, 30300 __next36pxDefaultSize 30301 }); 30302 const prefixSuffixContextValue = (0,external_wp_element_namespaceObject.useMemo)(() => { 30303 return { 30304 InputControlPrefixWrapper: { 30305 paddingLeft 30306 }, 30307 InputControlSuffixWrapper: { 30308 paddingRight 30309 } 30310 }; 30311 }, [paddingLeft, paddingRight]); 30312 return ( 30313 // @ts-expect-error The `direction` prop from Flex (FlexDirection) conflicts with legacy SVGAttributes `direction` (string) that come from React intrinsic prop definitions. 30314 (0,external_wp_element_namespaceObject.createElement)(input_control_styles_Root, { 30315 ...props, 30316 ...getUIFlexProps(labelPosition), 30317 className: className, 30318 gap: 2, 30319 isFocused: isFocused, 30320 labelPosition: labelPosition, 30321 ref: ref 30322 }, (0,external_wp_element_namespaceObject.createElement)(label_Label, { 30323 className: "components-input-control__label", 30324 hideLabelFromVision: hideLabelFromVision, 30325 labelPosition: labelPosition, 30326 htmlFor: id 30327 }, label), (0,external_wp_element_namespaceObject.createElement)(Container, { 30328 __unstableInputWidth: __unstableInputWidth, 30329 className: "components-input-control__container", 30330 disabled: disabled, 30331 hideLabel: hideLabel, 30332 labelPosition: labelPosition 30333 }, (0,external_wp_element_namespaceObject.createElement)(ContextSystemProvider, { 30334 value: prefixSuffixContextValue 30335 }, prefix && (0,external_wp_element_namespaceObject.createElement)(Prefix, { 30336 className: "components-input-control__prefix" 30337 }, prefix), children, suffix && (0,external_wp_element_namespaceObject.createElement)(Suffix, { 30338 className: "components-input-control__suffix" 30339 }, suffix)), (0,external_wp_element_namespaceObject.createElement)(backdrop, { 30340 disabled: disabled, 30341 isFocused: isFocused 30342 }))) 30343 ); 30344} 30345/* harmony default export */ const input_base = ((0,external_wp_element_namespaceObject.forwardRef)(InputBase)); 30346 30347;// CONCATENATED MODULE: ./node_modules/@use-gesture/core/dist/maths-0ab39ae9.esm.js 30348function maths_0ab39ae9_esm_clamp(v, min, max) { 30349 return Math.max(min, Math.min(v, max)); 30350} 30351const V = { 30352 toVector(v, fallback) { 30353 if (v === undefined) v = fallback; 30354 return Array.isArray(v) ? v : [v, v]; 30355 }, 30356 add(v1, v2) { 30357 return [v1[0] + v2[0], v1[1] + v2[1]]; 30358 }, 30359 sub(v1, v2) { 30360 return [v1[0] - v2[0], v1[1] - v2[1]]; 30361 }, 30362 addTo(v1, v2) { 30363 v1[0] += v2[0]; 30364 v1[1] += v2[1]; 30365 }, 30366 subTo(v1, v2) { 30367 v1[0] -= v2[0]; 30368 v1[1] -= v2[1]; 30369 } 30370}; 30371function rubberband(distance, dimension, constant) { 30372 if (dimension === 0 || Math.abs(dimension) === Infinity) return Math.pow(distance, constant * 5); 30373 return distance * dimension * constant / (dimension + constant * distance); 30374} 30375function rubberbandIfOutOfBounds(position, min, max, constant = 0.15) { 30376 if (constant === 0) return maths_0ab39ae9_esm_clamp(position, min, max); 30377 if (position < min) return -rubberband(min - position, max - min, constant) + min; 30378 if (position > max) return +rubberband(position - max, max - min, constant) + max; 30379 return position; 30380} 30381function computeRubberband(bounds, [Vx, Vy], [Rx, Ry]) { 30382 const [[X0, X1], [Y0, Y1]] = bounds; 30383 return [rubberbandIfOutOfBounds(Vx, X0, X1, Rx), rubberbandIfOutOfBounds(Vy, Y0, Y1, Ry)]; 30384} 30385 30386 30387 30388;// CONCATENATED MODULE: ./node_modules/@use-gesture/core/dist/actions-b1cc53c2.esm.js 30389 30390 30391function _toPrimitive(input, hint) { 30392 if (typeof input !== "object" || input === null) return input; 30393 var prim = input[Symbol.toPrimitive]; 30394 if (prim !== undefined) { 30395 var res = prim.call(input, hint || "default"); 30396 if (typeof res !== "object") return res; 30397 throw new TypeError("@@toPrimitive must return a primitive value."); 30398 } 30399 return (hint === "string" ? String : Number)(input); 30400} 30401 30402function _toPropertyKey(arg) { 30403 var key = _toPrimitive(arg, "string"); 30404 return typeof key === "symbol" ? key : String(key); 30405} 30406 30407function actions_b1cc53c2_esm_defineProperty(obj, key, value) { 30408 key = _toPropertyKey(key); 30409 if (key in obj) { 30410 Object.defineProperty(obj, key, { 30411 value: value, 30412 enumerable: true, 30413 configurable: true, 30414 writable: true 30415 }); 30416 } else { 30417 obj[key] = value; 30418 } 30419 return obj; 30420} 30421 30422function actions_b1cc53c2_esm_ownKeys(object, enumerableOnly) { 30423 var keys = Object.keys(object); 30424 if (Object.getOwnPropertySymbols) { 30425 var symbols = Object.getOwnPropertySymbols(object); 30426 enumerableOnly && (symbols = symbols.filter(function (sym) { 30427 return Object.getOwnPropertyDescriptor(object, sym).enumerable; 30428 })), keys.push.apply(keys, symbols); 30429 } 30430 return keys; 30431}
vendor: 10,996 bytes, lines 30432-30776
30432function actions_b1cc53c2_esm_objectSpread2(target) { 30433 for (var i = 1; i < arguments.length; i++) { 30434 var source = null != arguments[i] ? arguments[i] : {}; 30435 i % 2 ? actions_b1cc53c2_esm_ownKeys(Object(source), !0).forEach(function (key) { 30436 actions_b1cc53c2_esm_defineProperty(target, key, source[key]); 30437 }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : actions_b1cc53c2_esm_ownKeys(Object(source)).forEach(function (key) { 30438 Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); 30439 }); 30440 } 30441 return target; 30442} 30443 30444const EVENT_TYPE_MAP = { 30445 pointer: { 30446 start: 'down', 30447 change: 'move', 30448 end: 'up' 30449 }, 30450 mouse: { 30451 start: 'down', 30452 change: 'move', 30453 end: 'up' 30454 }, 30455 touch: { 30456 start: 'start', 30457 change: 'move', 30458 end: 'end' 30459 }, 30460 gesture: { 30461 start: 'start', 30462 change: 'change', 30463 end: 'end' 30464 } 30465}; 30466function capitalize(string) { 30467 if (!string) return ''; 30468 return string[0].toUpperCase() + string.slice(1); 30469} 30470const actionsWithoutCaptureSupported = ['enter', 'leave']; 30471function hasCapture(capture = false, actionKey) { 30472 return capture && !actionsWithoutCaptureSupported.includes(actionKey); 30473} 30474function toHandlerProp(device, action = '', capture = false) { 30475 const deviceProps = EVENT_TYPE_MAP[device]; 30476 const actionKey = deviceProps ? deviceProps[action] || action : action; 30477 return 'on' + capitalize(device) + capitalize(actionKey) + (hasCapture(capture, actionKey) ? 'Capture' : ''); 30478} 30479const pointerCaptureEvents = ['gotpointercapture', 'lostpointercapture']; 30480function parseProp(prop) { 30481 let eventKey = prop.substring(2).toLowerCase(); 30482 const passive = !!~eventKey.indexOf('passive'); 30483 if (passive) eventKey = eventKey.replace('passive', ''); 30484 const captureKey = pointerCaptureEvents.includes(eventKey) ? 'capturecapture' : 'capture'; 30485 const capture = !!~eventKey.indexOf(captureKey); 30486 if (capture) eventKey = eventKey.replace('capture', ''); 30487 return { 30488 device: eventKey, 30489 capture, 30490 passive 30491 }; 30492} 30493function toDomEventType(device, action = '') { 30494 const deviceProps = EVENT_TYPE_MAP[device]; 30495 const actionKey = deviceProps ? deviceProps[action] || action : action; 30496 return device + actionKey; 30497} 30498function isTouch(event) { 30499 return 'touches' in event; 30500} 30501function getPointerType(event) { 30502 if (isTouch(event)) return 'touch'; 30503 if ('pointerType' in event) return event.pointerType; 30504 return 'mouse'; 30505} 30506function getCurrentTargetTouchList(event) { 30507 return Array.from(event.touches).filter(e => { 30508 var _event$currentTarget, _event$currentTarget$; 30509 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)); 30510 }); 30511} 30512function getTouchList(event) { 30513 return event.type === 'touchend' || event.type === 'touchcancel' ? event.changedTouches : event.targetTouches; 30514} 30515function getValueEvent(event) { 30516 return isTouch(event) ? getTouchList(event)[0] : event; 30517} 30518function distanceAngle(P1, P2) { 30519 const dx = P2.clientX - P1.clientX; 30520 const dy = P2.clientY - P1.clientY; 30521 const cx = (P2.clientX + P1.clientX) / 2; 30522 const cy = (P2.clientY + P1.clientY) / 2; 30523 const distance = Math.hypot(dx, dy); 30524 const angle = -(Math.atan2(dx, dy) * 180) / Math.PI; 30525 const origin = [cx, cy]; 30526 return { 30527 angle, 30528 distance, 30529 origin 30530 }; 30531} 30532function touchIds(event) { 30533 return getCurrentTargetTouchList(event).map(touch => touch.identifier); 30534} 30535function touchDistanceAngle(event, ids) { 30536 const [P1, P2] = Array.from(event.touches).filter(touch => ids.includes(touch.identifier)); 30537 return distanceAngle(P1, P2); 30538} 30539function pointerId(event) { 30540 const valueEvent = getValueEvent(event); 30541 return isTouch(event) ? valueEvent.identifier : valueEvent.pointerId; 30542} 30543function pointerValues(event) { 30544 const valueEvent = getValueEvent(event); 30545 return [valueEvent.clientX, valueEvent.clientY]; 30546} 30547const LINE_HEIGHT = 40; 30548const PAGE_HEIGHT = 800; 30549function wheelValues(event) { 30550 let { 30551 deltaX, 30552 deltaY, 30553 deltaMode 30554 } = event; 30555 if (deltaMode === 1) { 30556 deltaX *= LINE_HEIGHT; 30557 deltaY *= LINE_HEIGHT; 30558 } else if (deltaMode === 2) { 30559 deltaX *= PAGE_HEIGHT; 30560 deltaY *= PAGE_HEIGHT; 30561 } 30562 return [deltaX, deltaY]; 30563} 30564function scrollValues(event) { 30565 var _ref, _ref2; 30566 const { 30567 scrollX, 30568 scrollY, 30569 scrollLeft, 30570 scrollTop 30571 } = event.currentTarget; 30572 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]; 30573} 30574function getEventDetails(event) { 30575 const payload = {}; 30576 if ('buttons' in event) payload.buttons = event.buttons; 30577 if ('shiftKey' in event) { 30578 const { 30579 shiftKey, 30580 altKey, 30581 metaKey, 30582 ctrlKey 30583 } = event; 30584 Object.assign(payload, { 30585 shiftKey, 30586 altKey, 30587 metaKey, 30588 ctrlKey 30589 }); 30590 } 30591 return payload; 30592} 30593 30594function call(v, ...args) { 30595 if (typeof v === 'function') { 30596 return v(...args); 30597 } else { 30598 return v; 30599 } 30600} 30601function actions_b1cc53c2_esm_noop() {} 30602function actions_b1cc53c2_esm_chain(...fns) { 30603 if (fns.length === 0) return actions_b1cc53c2_esm_noop; 30604 if (fns.length === 1) return fns[0]; 30605 return function () { 30606 let result; 30607 for (const fn of fns) { 30608 result = fn.apply(this, arguments) || result; 30609 } 30610 return result; 30611 }; 30612} 30613function assignDefault(value, fallback) { 30614 return Object.assign({}, fallback, value || {}); 30615} 30616 30617const BEFORE_LAST_KINEMATICS_DELAY = 32; 30618class Engine { 30619 constructor(ctrl, args, key) { 30620 this.ctrl = ctrl; 30621 this.args = args; 30622 this.key = key; 30623 if (!this.state) { 30624 this.state = {}; 30625 this.computeValues([0, 0]); 30626 this.computeInitial(); 30627 if (this.init) this.init(); 30628 this.reset(); 30629 } 30630 } 30631 get state() { 30632 return this.ctrl.state[this.key]; 30633 } 30634 set state(state) { 30635 this.ctrl.state[this.key] = state; 30636 } 30637 get shared() { 30638 return this.ctrl.state.shared; 30639 } 30640 get eventStore() { 30641 return this.ctrl.gestureEventStores[this.key]; 30642 } 30643 get timeoutStore() { 30644 return this.ctrl.gestureTimeoutStores[this.key]; 30645 } 30646 get config() { 30647 return this.ctrl.config[this.key]; 30648 } 30649 get sharedConfig() { 30650 return this.ctrl.config.shared; 30651 } 30652 get handler() { 30653 return this.ctrl.handlers[this.key]; 30654 } 30655 reset() { 30656 const { 30657 state, 30658 shared, 30659 ingKey, 30660 args 30661 } = this; 30662 shared[ingKey] = state._active = state.active = state._blocked = state._force = false; 30663 state._step = [false, false]; 30664 state.intentional = false; 30665 state._movement = [0, 0]; 30666 state._distance = [0, 0]; 30667 state._direction = [0, 0]; 30668 state._delta = [0, 0]; 30669 state._bounds = [[-Infinity, Infinity], [-Infinity, Infinity]]; 30670 state.args = args; 30671 state.axis = undefined; 30672 state.memo = undefined; 30673 state.elapsedTime = 0; 30674 state.direction = [0, 0]; 30675 state.distance = [0, 0]; 30676 state.overflow = [0, 0]; 30677 state._movementBound = [false, false]; 30678 state.velocity = [0, 0]; 30679 state.movement = [0, 0]; 30680 state.delta = [0, 0]; 30681 state.timeStamp = 0; 30682 } 30683 start(event) { 30684 const state = this.state; 30685 const config = this.config; 30686 if (!state._active) { 30687 this.reset(); 30688 this.computeInitial(); 30689 state._active = true; 30690 state.target = event.target; 30691 state.currentTarget = event.currentTarget; 30692 state.lastOffset = config.from ? call(config.from, state) : state.offset; 30693 state.offset = state.lastOffset; 30694 } 30695 state.startTime = state.timeStamp = event.timeStamp; 30696 } 30697 computeValues(values) { 30698 const state = this.state; 30699 state._values = values; 30700 state.values = this.config.transform(values); 30701 } 30702 computeInitial() { 30703 const state = this.state; 30704 state._initial = state._values; 30705 state.initial = state.values; 30706 } 30707 compute(event) { 30708 const { 30709 state, 30710 config, 30711 shared 30712 } = this; 30713 state.args = this.args; 30714 let dt = 0; 30715 if (event) { 30716 state.event = event; 30717 if (config.preventDefault && event.cancelable) state.event.preventDefault(); 30718 state.type = event.type; 30719 shared.touches = this.ctrl.pointerIds.size || this.ctrl.touchIds.size; 30720 shared.locked = !!document.pointerLockElement; 30721 Object.assign(shared, getEventDetails(event)); 30722 shared.down = shared.pressed = shared.buttons % 2 === 1 || shared.touches > 0; 30723 dt = event.timeStamp - state.timeStamp; 30724 state.timeStamp = event.timeStamp; 30725 state.elapsedTime = state.timeStamp - state.startTime; 30726 } 30727 if (state._active) { 30728 const _absoluteDelta = state._delta.map(Math.abs); 30729 V.addTo(state._distance, _absoluteDelta); 30730 } 30731 if (this.axisIntent) this.axisIntent(event); 30732 const [_m0, _m1] = state._movement; 30733 const [t0, t1] = config.threshold; 30734 const { 30735 _step, 30736 values 30737 } = state; 30738 if (config.hasCustomTransform) { 30739 if (_step[0] === false) _step[0] = Math.abs(_m0) >= t0 && values[0]; 30740 if (_step[1] === false) _step[1] = Math.abs(_m1) >= t1 && values[1]; 30741 } else { 30742 if (_step[0] === false) _step[0] = Math.abs(_m0) >= t0 && Math.sign(_m0) * t0; 30743 if (_step[1] === false) _step[1] = Math.abs(_m1) >= t1 && Math.sign(_m1) * t1; 30744 } 30745 state.intentional = _step[0] !== false || _step[1] !== false; 30746 if (!state.intentional) return; 30747 const movement = [0, 0]; 30748 if (config.hasCustomTransform) { 30749 const [v0, v1] = values; 30750 movement[0] = _step[0] !== false ? v0 - _step[0] : 0; 30751 movement[1] = _step[1] !== false ? v1 - _step[1] : 0; 30752 } else { 30753 movement[0] = _step[0] !== false ? _m0 - _step[0] : 0; 30754 movement[1] = _step[1] !== false ? _m1 - _step[1] : 0; 30755 } 30756 if (this.restrictToAxis && !state._blocked) this.restrictToAxis(movement); 30757 const previousOffset = state.offset; 30758 const gestureIsActive = state._active && !state._blocked || state.active; 30759 if (gestureIsActive) { 30760 state.first = state._active && !state.active; 30761 state.last = !state._active && state.active; 30762 state.active = shared[this.ingKey] = state._active; 30763 if (event) { 30764 if (state.first) { 30765 if ('bounds' in config) state._bounds = call(config.bounds, state); 30766 if (this.setup) this.setup(); 30767 } 30768 state.movement = movement; 30769 this.computeOffset(); 30770 } 30771 } 30772 const [ox, oy] = state.offset; 30773 const [[x0, x1], [y0, y1]] = state._bounds; 30774 state.overflow = [ox < x0 ? -1 : ox > x1 ? 1 : 0, oy < y0 ? -1 : oy > y1 ? 1 : 0]; 30775 state._movementBound[0] = state.overflow[0] ? state._movementBound[0] === false ? state._movement[0] : state._movementBound[0] : false; 30776 state._movementBound[1] = state.overflow[1] ? state._movementBound[1] === false ? state._movement[1] : state._movementBound[1] : false;
vendor: 8,564 bytes, lines 30777-31045
30777 const rubberband = state._active ? config.rubberband || [0, 0] : [0, 0]; 30778 state.offset = computeRubberband(state._bounds, state.offset, rubberband); 30779 state.delta = V.sub(state.offset, previousOffset); 30780 this.computeMovement(); 30781 if (gestureIsActive && (!state.last || dt > BEFORE_LAST_KINEMATICS_DELAY)) { 30782 state.delta = V.sub(state.offset, previousOffset); 30783 const absoluteDelta = state.delta.map(Math.abs); 30784 V.addTo(state.distance, absoluteDelta); 30785 state.direction = state.delta.map(Math.sign); 30786 state._direction = state._delta.map(Math.sign); 30787 if (!state.first && dt > 0) { 30788 state.velocity = [absoluteDelta[0] / dt, absoluteDelta[1] / dt]; 30789 } 30790 } 30791 } 30792 emit() { 30793 const state = this.state; 30794 const shared = this.shared; 30795 const config = this.config; 30796 if (!state._active) this.clean(); 30797 if ((state._blocked || !state.intentional) && !state._force && !config.triggerAllEvents) return; 30798 const memo = this.handler(actions_b1cc53c2_esm_objectSpread2(actions_b1cc53c2_esm_objectSpread2(actions_b1cc53c2_esm_objectSpread2({}, shared), state), {}, { 30799 [this.aliasKey]: state.values 30800 })); 30801 if (memo !== undefined) state.memo = memo; 30802 } 30803 clean() { 30804 this.eventStore.clean(); 30805 this.timeoutStore.clean(); 30806 } 30807} 30808 30809function selectAxis([dx, dy], threshold) { 30810 const absDx = Math.abs(dx); 30811 const absDy = Math.abs(dy); 30812 if (absDx > absDy && absDx > threshold) { 30813 return 'x'; 30814 } 30815 if (absDy > absDx && absDy > threshold) { 30816 return 'y'; 30817 } 30818 return undefined; 30819} 30820class CoordinatesEngine extends Engine { 30821 constructor(...args) { 30822 super(...args); 30823 actions_b1cc53c2_esm_defineProperty(this, "aliasKey", 'xy'); 30824 } 30825 reset() { 30826 super.reset(); 30827 this.state.axis = undefined; 30828 } 30829 init() { 30830 this.state.offset = [0, 0]; 30831 this.state.lastOffset = [0, 0]; 30832 } 30833 computeOffset() { 30834 this.state.offset = V.add(this.state.lastOffset, this.state.movement); 30835 } 30836 computeMovement() { 30837 this.state.movement = V.sub(this.state.offset, this.state.lastOffset); 30838 } 30839 axisIntent(event) { 30840 const state = this.state; 30841 const config = this.config; 30842 if (!state.axis && event) { 30843 const threshold = typeof config.axisThreshold === 'object' ? config.axisThreshold[getPointerType(event)] : config.axisThreshold; 30844 state.axis = selectAxis(state._movement, threshold); 30845 } 30846 state._blocked = (config.lockDirection || !!config.axis) && !state.axis || !!config.axis && config.axis !== state.axis; 30847 } 30848 restrictToAxis(v) { 30849 if (this.config.axis || this.config.lockDirection) { 30850 switch (this.state.axis) { 30851 case 'x': 30852 v[1] = 0; 30853 break; 30854 case 'y': 30855 v[0] = 0; 30856 break; 30857 } 30858 } 30859 } 30860} 30861 30862const actions_b1cc53c2_esm_identity = v => v; 30863const DEFAULT_RUBBERBAND = 0.15; 30864const commonConfigResolver = { 30865 enabled(value = true) { 30866 return value; 30867 }, 30868 eventOptions(value, _k, config) { 30869 return actions_b1cc53c2_esm_objectSpread2(actions_b1cc53c2_esm_objectSpread2({}, config.shared.eventOptions), value); 30870 }, 30871 preventDefault(value = false) { 30872 return value; 30873 }, 30874 triggerAllEvents(value = false) { 30875 return value; 30876 }, 30877 rubberband(value = 0) { 30878 switch (value) { 30879 case true: 30880 return [DEFAULT_RUBBERBAND, DEFAULT_RUBBERBAND]; 30881 case false: 30882 return [0, 0]; 30883 default: 30884 return V.toVector(value); 30885 } 30886 }, 30887 from(value) { 30888 if (typeof value === 'function') return value; 30889 if (value != null) return V.toVector(value); 30890 }, 30891 transform(value, _k, config) { 30892 const transform = value || config.shared.transform; 30893 this.hasCustomTransform = !!transform; 30894 if (false) {} 30895 return transform || actions_b1cc53c2_esm_identity; 30896 }, 30897 threshold(value) { 30898 return V.toVector(value, 0); 30899 } 30900}; 30901if (false) {} 30902 30903const DEFAULT_AXIS_THRESHOLD = 0; 30904const coordinatesConfigResolver = actions_b1cc53c2_esm_objectSpread2(actions_b1cc53c2_esm_objectSpread2({}, commonConfigResolver), {}, { 30905 axis(_v, _k, { 30906 axis 30907 }) { 30908 this.lockDirection = axis === 'lock'; 30909 if (!this.lockDirection) return axis; 30910 }, 30911 axisThreshold(value = DEFAULT_AXIS_THRESHOLD) { 30912 return value; 30913 }, 30914 bounds(value = {}) { 30915 if (typeof value === 'function') { 30916 return state => coordinatesConfigResolver.bounds(value(state)); 30917 } 30918 if ('current' in value) { 30919 return () => value.current; 30920 } 30921 if (typeof HTMLElement === 'function' && value instanceof HTMLElement) { 30922 return value; 30923 } 30924 const { 30925 left = -Infinity, 30926 right = Infinity, 30927 top = -Infinity, 30928 bottom = Infinity 30929 } = value; 30930 return [[left, right], [top, bottom]]; 30931 } 30932}); 30933 30934const KEYS_DELTA_MAP = { 30935 ArrowRight: (displacement, factor = 1) => [displacement * factor, 0], 30936 ArrowLeft: (displacement, factor = 1) => [-1 * displacement * factor, 0], 30937 ArrowUp: (displacement, factor = 1) => [0, -1 * displacement * factor], 30938 ArrowDown: (displacement, factor = 1) => [0, displacement * factor] 30939}; 30940class DragEngine extends CoordinatesEngine { 30941 constructor(...args) { 30942 super(...args); 30943 actions_b1cc53c2_esm_defineProperty(this, "ingKey", 'dragging'); 30944 } 30945 reset() { 30946 super.reset(); 30947 const state = this.state; 30948 state._pointerId = undefined; 30949 state._pointerActive = false; 30950 state._keyboardActive = false; 30951 state._preventScroll = false; 30952 state._delayed = false; 30953 state.swipe = [0, 0]; 30954 state.tap = false; 30955 state.canceled = false; 30956 state.cancel = this.cancel.bind(this); 30957 } 30958 setup() { 30959 const state = this.state; 30960 if (state._bounds instanceof HTMLElement) { 30961 const boundRect = state._bounds.getBoundingClientRect(); 30962 const targetRect = state.currentTarget.getBoundingClientRect(); 30963 const _bounds = { 30964 left: boundRect.left - targetRect.left + state.offset[0], 30965 right: boundRect.right - targetRect.right + state.offset[0], 30966 top: boundRect.top - targetRect.top + state.offset[1], 30967 bottom: boundRect.bottom - targetRect.bottom + state.offset[1] 30968 }; 30969 state._bounds = coordinatesConfigResolver.bounds(_bounds); 30970 } 30971 } 30972 cancel() { 30973 const state = this.state; 30974 if (state.canceled) return; 30975 state.canceled = true; 30976 state._active = false; 30977 setTimeout(() => { 30978 this.compute(); 30979 this.emit(); 30980 }, 0); 30981 } 30982 setActive() { 30983 this.state._active = this.state._pointerActive || this.state._keyboardActive; 30984 } 30985 clean() { 30986 this.pointerClean(); 30987 this.state._pointerActive = false; 30988 this.state._keyboardActive = false; 30989 super.clean(); 30990 } 30991 pointerDown(event) { 30992 const config = this.config; 30993 const state = this.state; 30994 if (event.buttons != null && (Array.isArray(config.pointerButtons) ? !config.pointerButtons.includes(event.buttons) : config.pointerButtons !== -1 && config.pointerButtons !== event.buttons)) return; 30995 const ctrlIds = this.ctrl.setEventIds(event); 30996 if (config.pointerCapture) { 30997 event.target.setPointerCapture(event.pointerId); 30998 } 30999 if (ctrlIds && ctrlIds.size > 1 && state._pointerActive) return; 31000 this.start(event); 31001 this.setupPointer(event); 31002 state._pointerId = pointerId(event); 31003 state._pointerActive = true; 31004 this.computeValues(pointerValues(event)); 31005 this.computeInitial(); 31006 if (config.preventScrollAxis && getPointerType(event) !== 'mouse') { 31007 state._active = false; 31008 this.setupScrollPrevention(event); 31009 } else if (config.delay > 0) { 31010 this.setupDelayTrigger(event); 31011 if (config.triggerAllEvents) { 31012 this.compute(event); 31013 this.emit(); 31014 } 31015 } else { 31016 this.startPointerDrag(event); 31017 } 31018 } 31019 startPointerDrag(event) { 31020 const state = this.state; 31021 state._active = true; 31022 state._preventScroll = true; 31023 state._delayed = false; 31024 this.compute(event); 31025 this.emit(); 31026 } 31027 pointerMove(event) { 31028 const state = this.state; 31029 const config = this.config; 31030 if (!state._pointerActive) return; 31031 if (state.type === event.type && event.timeStamp === state.timeStamp) return; 31032 const id = pointerId(event); 31033 if (state._pointerId !== undefined && id !== state._pointerId) return; 31034 const _values = pointerValues(event); 31035 if (document.pointerLockElement === event.target) { 31036 state._delta = [event.movementX, event.movementY]; 31037 } else { 31038 state._delta = V.sub(_values, state._values); 31039 this.computeValues(_values); 31040 } 31041 V.addTo(state._movement, state._delta); 31042 this.compute(event); 31043 if (state._delayed && state.intentional) { 31044 this.timeoutStore.remove('dragDelay'); 31045 state.active = false;
vendor: 5,628 bytes, lines 31046-31210
31046 this.startPointerDrag(event); 31047 return; 31048 } 31049 if (config.preventScrollAxis && !state._preventScroll) { 31050 if (state.axis) { 31051 if (state.axis === config.preventScrollAxis || config.preventScrollAxis === 'xy') { 31052 state._active = false; 31053 this.clean(); 31054 return; 31055 } else { 31056 this.timeoutStore.remove('startPointerDrag'); 31057 this.startPointerDrag(event); 31058 return; 31059 } 31060 } else { 31061 return; 31062 } 31063 } 31064 this.emit(); 31065 } 31066 pointerUp(event) { 31067 this.ctrl.setEventIds(event); 31068 try { 31069 if (this.config.pointerCapture && event.target.hasPointerCapture(event.pointerId)) { 31070 ; 31071 event.target.releasePointerCapture(event.pointerId); 31072 } 31073 } catch (_unused) { 31074 if (false) {} 31075 } 31076 const state = this.state; 31077 const config = this.config; 31078 if (!state._active || !state._pointerActive) return; 31079 const id = pointerId(event); 31080 if (state._pointerId !== undefined && id !== state._pointerId) return; 31081 this.state._pointerActive = false; 31082 this.setActive(); 31083 this.compute(event); 31084 const [dx, dy] = state._distance; 31085 state.tap = dx <= config.tapsThreshold && dy <= config.tapsThreshold; 31086 if (state.tap && config.filterTaps) { 31087 state._force = true; 31088 } else { 31089 const [dirx, diry] = state.direction; 31090 const [vx, vy] = state.velocity; 31091 const [mx, my] = state.movement; 31092 const [svx, svy] = config.swipe.velocity; 31093 const [sx, sy] = config.swipe.distance; 31094 const sdt = config.swipe.duration; 31095 if (state.elapsedTime < sdt) { 31096 if (Math.abs(vx) > svx && Math.abs(mx) > sx) state.swipe[0] = dirx; 31097 if (Math.abs(vy) > svy && Math.abs(my) > sy) state.swipe[1] = diry; 31098 } 31099 } 31100 this.emit(); 31101 } 31102 pointerClick(event) { 31103 if (!this.state.tap && event.detail > 0) { 31104 event.preventDefault(); 31105 event.stopPropagation(); 31106 } 31107 } 31108 setupPointer(event) { 31109 const config = this.config; 31110 const device = config.device; 31111 if (false) {} 31112 if (config.pointerLock) { 31113 event.currentTarget.requestPointerLock(); 31114 } 31115 if (!config.pointerCapture) { 31116 this.eventStore.add(this.sharedConfig.window, device, 'change', this.pointerMove.bind(this)); 31117 this.eventStore.add(this.sharedConfig.window, device, 'end', this.pointerUp.bind(this)); 31118 this.eventStore.add(this.sharedConfig.window, device, 'cancel', this.pointerUp.bind(this)); 31119 } 31120 } 31121 pointerClean() { 31122 if (this.config.pointerLock && document.pointerLockElement === this.state.currentTarget) { 31123 document.exitPointerLock(); 31124 } 31125 } 31126 preventScroll(event) { 31127 if (this.state._preventScroll && event.cancelable) { 31128 event.preventDefault(); 31129 } 31130 } 31131 setupScrollPrevention(event) { 31132 this.state._preventScroll = false; 31133 persistEvent(event); 31134 const remove = this.eventStore.add(this.sharedConfig.window, 'touch', 'change', this.preventScroll.bind(this), { 31135 passive: false 31136 }); 31137 this.eventStore.add(this.sharedConfig.window, 'touch', 'end', remove); 31138 this.eventStore.add(this.sharedConfig.window, 'touch', 'cancel', remove); 31139 this.timeoutStore.add('startPointerDrag', this.startPointerDrag.bind(this), this.config.preventScrollDelay, event); 31140 } 31141 setupDelayTrigger(event) { 31142 this.state._delayed = true; 31143 this.timeoutStore.add('dragDelay', () => { 31144 this.state._step = [0, 0]; 31145 this.startPointerDrag(event); 31146 }, this.config.delay); 31147 } 31148 keyDown(event) { 31149 const deltaFn = KEYS_DELTA_MAP[event.key]; 31150 if (deltaFn) { 31151 const state = this.state; 31152 const factor = event.shiftKey ? 10 : event.altKey ? 0.1 : 1; 31153 this.start(event); 31154 state._delta = deltaFn(this.config.keyboardDisplacement, factor); 31155 state._keyboardActive = true; 31156 V.addTo(state._movement, state._delta); 31157 this.compute(event); 31158 this.emit(); 31159 } 31160 } 31161 keyUp(event) { 31162 if (!(event.key in KEYS_DELTA_MAP)) return; 31163 this.state._keyboardActive = false; 31164 this.setActive(); 31165 this.compute(event); 31166 this.emit(); 31167 } 31168 bind(bindFunction) { 31169 const device = this.config.device; 31170 bindFunction(device, 'start', this.pointerDown.bind(this)); 31171 if (this.config.pointerCapture) { 31172 bindFunction(device, 'change', this.pointerMove.bind(this)); 31173 bindFunction(device, 'end', this.pointerUp.bind(this)); 31174 bindFunction(device, 'cancel', this.pointerUp.bind(this)); 31175 bindFunction('lostPointerCapture', '', this.pointerUp.bind(this)); 31176 } 31177 if (this.config.keys) { 31178 bindFunction('key', 'down', this.keyDown.bind(this)); 31179 bindFunction('key', 'up', this.keyUp.bind(this)); 31180 } 31181 if (this.config.filterTaps) { 31182 bindFunction('click', '', this.pointerClick.bind(this), { 31183 capture: true, 31184 passive: false 31185 }); 31186 } 31187 } 31188} 31189function persistEvent(event) { 31190 'persist' in event && typeof event.persist === 'function' && event.persist(); 31191} 31192 31193const actions_b1cc53c2_esm_isBrowser = typeof window !== 'undefined' && window.document && window.document.createElement; 31194function supportsTouchEvents() { 31195 return actions_b1cc53c2_esm_isBrowser && 'ontouchstart' in window; 31196} 31197function isTouchScreen() { 31198 return supportsTouchEvents() || actions_b1cc53c2_esm_isBrowser && window.navigator.maxTouchPoints > 1; 31199} 31200function supportsPointerEvents() { 31201 return actions_b1cc53c2_esm_isBrowser && 'onpointerdown' in window; 31202} 31203function supportsPointerLock() { 31204 return actions_b1cc53c2_esm_isBrowser && 'exitPointerLock' in window.document; 31205} 31206function supportsGestureEvents() { 31207 try { 31208 return 'constructor' in GestureEvent; 31209 } catch (e) { 31210 return false;
vendor: 4,882 bytes, lines 31211-31377
31211 } 31212} 31213const SUPPORT = { 31214 isBrowser: actions_b1cc53c2_esm_isBrowser, 31215 gesture: supportsGestureEvents(), 31216 touch: isTouchScreen(), 31217 touchscreen: isTouchScreen(), 31218 pointer: supportsPointerEvents(), 31219 pointerLock: supportsPointerLock() 31220}; 31221 31222const DEFAULT_PREVENT_SCROLL_DELAY = 250; 31223const DEFAULT_DRAG_DELAY = 180; 31224const DEFAULT_SWIPE_VELOCITY = 0.5; 31225const DEFAULT_SWIPE_DISTANCE = 50; 31226const DEFAULT_SWIPE_DURATION = 250; 31227const DEFAULT_KEYBOARD_DISPLACEMENT = 10; 31228const DEFAULT_DRAG_AXIS_THRESHOLD = { 31229 mouse: 0, 31230 touch: 0, 31231 pen: 8 31232}; 31233const dragConfigResolver = actions_b1cc53c2_esm_objectSpread2(actions_b1cc53c2_esm_objectSpread2({}, coordinatesConfigResolver), {}, { 31234 device(_v, _k, { 31235 pointer: { 31236 touch = false, 31237 lock = false, 31238 mouse = false 31239 } = {} 31240 }) { 31241 this.pointerLock = lock && SUPPORT.pointerLock; 31242 if (SUPPORT.touch && touch) return 'touch'; 31243 if (this.pointerLock) return 'mouse'; 31244 if (SUPPORT.pointer && !mouse) return 'pointer'; 31245 if (SUPPORT.touch) return 'touch'; 31246 return 'mouse'; 31247 }, 31248 preventScrollAxis(value, _k, { 31249 preventScroll 31250 }) { 31251 this.preventScrollDelay = typeof preventScroll === 'number' ? preventScroll : preventScroll || preventScroll === undefined && value ? DEFAULT_PREVENT_SCROLL_DELAY : undefined; 31252 if (!SUPPORT.touchscreen || preventScroll === false) return undefined; 31253 return value ? value : preventScroll !== undefined ? 'y' : undefined; 31254 }, 31255 pointerCapture(_v, _k, { 31256 pointer: { 31257 capture = true, 31258 buttons = 1, 31259 keys = true 31260 } = {} 31261 }) { 31262 this.pointerButtons = buttons; 31263 this.keys = keys; 31264 return !this.pointerLock && this.device === 'pointer' && capture; 31265 }, 31266 threshold(value, _k, { 31267 filterTaps = false, 31268 tapsThreshold = 3, 31269 axis = undefined 31270 }) { 31271 const threshold = V.toVector(value, filterTaps ? tapsThreshold : axis ? 1 : 0); 31272 this.filterTaps = filterTaps; 31273 this.tapsThreshold = tapsThreshold; 31274 return threshold; 31275 }, 31276 swipe({ 31277 velocity = DEFAULT_SWIPE_VELOCITY, 31278 distance = DEFAULT_SWIPE_DISTANCE, 31279 duration = DEFAULT_SWIPE_DURATION 31280 } = {}) { 31281 return { 31282 velocity: this.transform(V.toVector(velocity)), 31283 distance: this.transform(V.toVector(distance)), 31284 duration 31285 }; 31286 }, 31287 delay(value = 0) { 31288 switch (value) { 31289 case true: 31290 return DEFAULT_DRAG_DELAY; 31291 case false: 31292 return 0; 31293 default: 31294 return value; 31295 } 31296 }, 31297 axisThreshold(value) { 31298 if (!value) return DEFAULT_DRAG_AXIS_THRESHOLD; 31299 return actions_b1cc53c2_esm_objectSpread2(actions_b1cc53c2_esm_objectSpread2({}, DEFAULT_DRAG_AXIS_THRESHOLD), value); 31300 }, 31301 keyboardDisplacement(value = DEFAULT_KEYBOARD_DISPLACEMENT) { 31302 return value; 31303 } 31304}); 31305if (false) {} 31306 31307function clampStateInternalMovementToBounds(state) { 31308 const [ox, oy] = state.overflow; 31309 const [dx, dy] = state._delta; 31310 const [dirx, diry] = state._direction; 31311 if (ox < 0 && dx > 0 && dirx < 0 || ox > 0 && dx < 0 && dirx > 0) { 31312 state._movement[0] = state._movementBound[0]; 31313 } 31314 if (oy < 0 && dy > 0 && diry < 0 || oy > 0 && dy < 0 && diry > 0) { 31315 state._movement[1] = state._movementBound[1]; 31316 } 31317} 31318 31319const SCALE_ANGLE_RATIO_INTENT_DEG = 30; 31320const PINCH_WHEEL_RATIO = 100; 31321class PinchEngine extends Engine { 31322 constructor(...args) { 31323 super(...args); 31324 actions_b1cc53c2_esm_defineProperty(this, "ingKey", 'pinching'); 31325 actions_b1cc53c2_esm_defineProperty(this, "aliasKey", 'da'); 31326 } 31327 init() { 31328 this.state.offset = [1, 0]; 31329 this.state.lastOffset = [1, 0]; 31330 this.state._pointerEvents = new Map(); 31331 } 31332 reset() { 31333 super.reset(); 31334 const state = this.state; 31335 state._touchIds = []; 31336 state.canceled = false; 31337 state.cancel = this.cancel.bind(this); 31338 state.turns = 0; 31339 } 31340 computeOffset() { 31341 const { 31342 type, 31343 movement, 31344 lastOffset 31345 } = this.state; 31346 if (type === 'wheel') { 31347 this.state.offset = V.add(movement, lastOffset); 31348 } else { 31349 this.state.offset = [(1 + movement[0]) * lastOffset[0], movement[1] + lastOffset[1]]; 31350 } 31351 } 31352 computeMovement() { 31353 const { 31354 offset, 31355 lastOffset 31356 } = this.state; 31357 this.state.movement = [offset[0] / lastOffset[0], offset[1] - lastOffset[1]]; 31358 } 31359 axisIntent() { 31360 const state = this.state; 31361 const [_m0, _m1] = state._movement; 31362 if (!state.axis) { 31363 const axisMovementDifference = Math.abs(_m0) * SCALE_ANGLE_RATIO_INTENT_DEG - Math.abs(_m1); 31364 if (axisMovementDifference < 0) state.axis = 'angle';else if (axisMovementDifference > 0) state.axis = 'scale'; 31365 } 31366 } 31367 restrictToAxis(v) { 31368 if (this.config.lockDirection) { 31369 if (this.state.axis === 'scale') v[1] = 0;else if (this.state.axis === 'angle') v[0] = 0; 31370 } 31371 } 31372 cancel() { 31373 const state = this.state; 31374 if (state.canceled) return; 31375 setTimeout(() => { 31376 state.canceled = true; 31377 state._active = false;
vendor: 4,426 bytes, lines 31378-31510
31378 this.compute(); 31379 this.emit(); 31380 }, 0); 31381 } 31382 touchStart(event) { 31383 this.ctrl.setEventIds(event); 31384 const state = this.state; 31385 const ctrlTouchIds = this.ctrl.touchIds; 31386 if (state._active) { 31387 if (state._touchIds.every(id => ctrlTouchIds.has(id))) return; 31388 } 31389 if (ctrlTouchIds.size < 2) return; 31390 this.start(event); 31391 state._touchIds = Array.from(ctrlTouchIds).slice(0, 2); 31392 const payload = touchDistanceAngle(event, state._touchIds); 31393 this.pinchStart(event, payload); 31394 } 31395 pointerStart(event) { 31396 if (event.buttons != null && event.buttons % 2 !== 1) return; 31397 this.ctrl.setEventIds(event); 31398 event.target.setPointerCapture(event.pointerId); 31399 const state = this.state; 31400 const _pointerEvents = state._pointerEvents; 31401 const ctrlPointerIds = this.ctrl.pointerIds; 31402 if (state._active) { 31403 if (Array.from(_pointerEvents.keys()).every(id => ctrlPointerIds.has(id))) return; 31404 } 31405 if (_pointerEvents.size < 2) { 31406 _pointerEvents.set(event.pointerId, event); 31407 } 31408 if (state._pointerEvents.size < 2) return; 31409 this.start(event); 31410 const payload = distanceAngle(...Array.from(_pointerEvents.values())); 31411 this.pinchStart(event, payload); 31412 } 31413 pinchStart(event, payload) { 31414 const state = this.state; 31415 state.origin = payload.origin; 31416 this.computeValues([payload.distance, payload.angle]); 31417 this.computeInitial(); 31418 this.compute(event); 31419 this.emit(); 31420 } 31421 touchMove(event) { 31422 if (!this.state._active) return; 31423 const payload = touchDistanceAngle(event, this.state._touchIds); 31424 this.pinchMove(event, payload); 31425 } 31426 pointerMove(event) { 31427 const _pointerEvents = this.state._pointerEvents; 31428 if (_pointerEvents.has(event.pointerId)) { 31429 _pointerEvents.set(event.pointerId, event); 31430 } 31431 if (!this.state._active) return; 31432 const payload = distanceAngle(...Array.from(_pointerEvents.values())); 31433 this.pinchMove(event, payload); 31434 } 31435 pinchMove(event, payload) { 31436 const state = this.state; 31437 const prev_a = state._values[1]; 31438 const delta_a = payload.angle - prev_a; 31439 let delta_turns = 0; 31440 if (Math.abs(delta_a) > 270) delta_turns += Math.sign(delta_a); 31441 this.computeValues([payload.distance, payload.angle - 360 * delta_turns]); 31442 state.origin = payload.origin; 31443 state.turns = delta_turns; 31444 state._movement = [state._values[0] / state._initial[0] - 1, state._values[1] - state._initial[1]]; 31445 this.compute(event); 31446 this.emit(); 31447 } 31448 touchEnd(event) { 31449 this.ctrl.setEventIds(event); 31450 if (!this.state._active) return; 31451 if (this.state._touchIds.some(id => !this.ctrl.touchIds.has(id))) { 31452 this.state._active = false; 31453 this.compute(event); 31454 this.emit(); 31455 } 31456 } 31457 pointerEnd(event) { 31458 const state = this.state; 31459 this.ctrl.setEventIds(event); 31460 try { 31461 event.target.releasePointerCapture(event.pointerId); 31462 } catch (_unused) {} 31463 if (state._pointerEvents.has(event.pointerId)) { 31464 state._pointerEvents.delete(event.pointerId); 31465 } 31466 if (!state._active) return; 31467 if (state._pointerEvents.size < 2) { 31468 state._active = false; 31469 this.compute(event); 31470 this.emit(); 31471 } 31472 } 31473 gestureStart(event) { 31474 if (event.cancelable) event.preventDefault(); 31475 const state = this.state; 31476 if (state._active) return; 31477 this.start(event); 31478 this.computeValues([event.scale, event.rotation]); 31479 state.origin = [event.clientX, event.clientY]; 31480 this.compute(event); 31481 this.emit(); 31482 } 31483 gestureMove(event) { 31484 if (event.cancelable) event.preventDefault(); 31485 if (!this.state._active) return; 31486 const state = this.state; 31487 this.computeValues([event.scale, event.rotation]); 31488 state.origin = [event.clientX, event.clientY]; 31489 const _previousMovement = state._movement; 31490 state._movement = [event.scale - 1, event.rotation]; 31491 state._delta = V.sub(state._movement, _previousMovement); 31492 this.compute(event); 31493 this.emit(); 31494 } 31495 gestureEnd(event) { 31496 if (!this.state._active) return; 31497 this.state._active = false; 31498 this.compute(event); 31499 this.emit(); 31500 } 31501 wheel(event) { 31502 const modifierKey = this.config.modifierKey; 31503 if (modifierKey && !event[modifierKey]) return; 31504 if (!this.state._active) this.wheelStart(event);else this.wheelChange(event); 31505 this.timeoutStore.add('wheelEnd', this.wheelEnd.bind(this)); 31506 } 31507 wheelStart(event) { 31508 this.start(event); 31509 this.wheelChange(event); 31510 }
vendor: 7,558 bytes, lines 31511-31768
31511 wheelChange(event) { 31512 const isR3f = ('uv' in event); 31513 if (!isR3f) { 31514 if (event.cancelable) { 31515 event.preventDefault(); 31516 } 31517 if (false) {} 31518 } 31519 const state = this.state; 31520 state._delta = [-wheelValues(event)[1] / PINCH_WHEEL_RATIO * state.offset[0], 0]; 31521 V.addTo(state._movement, state._delta); 31522 clampStateInternalMovementToBounds(state); 31523 this.state.origin = [event.clientX, event.clientY]; 31524 this.compute(event); 31525 this.emit(); 31526 } 31527 wheelEnd() { 31528 if (!this.state._active) return; 31529 this.state._active = false; 31530 this.compute(); 31531 this.emit(); 31532 } 31533 bind(bindFunction) { 31534 const device = this.config.device; 31535 if (!!device) { 31536 bindFunction(device, 'start', this[device + 'Start'].bind(this)); 31537 bindFunction(device, 'change', this[device + 'Move'].bind(this)); 31538 bindFunction(device, 'end', this[device + 'End'].bind(this)); 31539 bindFunction(device, 'cancel', this[device + 'End'].bind(this)); 31540 } 31541 if (this.config.pinchOnWheel) { 31542 bindFunction('wheel', '', this.wheel.bind(this), { 31543 passive: false 31544 }); 31545 } 31546 } 31547} 31548 31549const pinchConfigResolver = actions_b1cc53c2_esm_objectSpread2(actions_b1cc53c2_esm_objectSpread2({}, commonConfigResolver), {}, { 31550 device(_v, _k, { 31551 shared, 31552 pointer: { 31553 touch = false 31554 } = {} 31555 }) { 31556 const sharedConfig = shared; 31557 if (sharedConfig.target && !SUPPORT.touch && SUPPORT.gesture) return 'gesture'; 31558 if (SUPPORT.touch && touch) return 'touch'; 31559 if (SUPPORT.touchscreen) { 31560 if (SUPPORT.pointer) return 'pointer'; 31561 if (SUPPORT.touch) return 'touch'; 31562 } 31563 }, 31564 bounds(_v, _k, { 31565 scaleBounds = {}, 31566 angleBounds = {} 31567 }) { 31568 const _scaleBounds = state => { 31569 const D = assignDefault(call(scaleBounds, state), { 31570 min: -Infinity, 31571 max: Infinity 31572 }); 31573 return [D.min, D.max]; 31574 }; 31575 const _angleBounds = state => { 31576 const A = assignDefault(call(angleBounds, state), { 31577 min: -Infinity, 31578 max: Infinity 31579 }); 31580 return [A.min, A.max]; 31581 }; 31582 if (typeof scaleBounds !== 'function' && typeof angleBounds !== 'function') return [_scaleBounds(), _angleBounds()]; 31583 return state => [_scaleBounds(state), _angleBounds(state)]; 31584 }, 31585 threshold(value, _k, config) { 31586 this.lockDirection = config.axis === 'lock'; 31587 const threshold = V.toVector(value, this.lockDirection ? [0.1, 3] : 0); 31588 return threshold; 31589 }, 31590 modifierKey(value) { 31591 if (value === undefined) return 'ctrlKey'; 31592 return value; 31593 }, 31594 pinchOnWheel(value = true) { 31595 return value; 31596 } 31597}); 31598 31599class MoveEngine extends CoordinatesEngine { 31600 constructor(...args) { 31601 super(...args); 31602 actions_b1cc53c2_esm_defineProperty(this, "ingKey", 'moving'); 31603 } 31604 move(event) { 31605 if (this.config.mouseOnly && event.pointerType !== 'mouse') return; 31606 if (!this.state._active) this.moveStart(event);else this.moveChange(event); 31607 this.timeoutStore.add('moveEnd', this.moveEnd.bind(this)); 31608 } 31609 moveStart(event) { 31610 this.start(event); 31611 this.computeValues(pointerValues(event)); 31612 this.compute(event); 31613 this.computeInitial(); 31614 this.emit(); 31615 } 31616 moveChange(event) { 31617 if (!this.state._active) return; 31618 const values = pointerValues(event); 31619 const state = this.state; 31620 state._delta = V.sub(values, state._values); 31621 V.addTo(state._movement, state._delta); 31622 this.computeValues(values); 31623 this.compute(event); 31624 this.emit(); 31625 } 31626 moveEnd(event) { 31627 if (!this.state._active) return; 31628 this.state._active = false; 31629 this.compute(event); 31630 this.emit(); 31631 } 31632 bind(bindFunction) { 31633 bindFunction('pointer', 'change', this.move.bind(this)); 31634 bindFunction('pointer', 'leave', this.moveEnd.bind(this)); 31635 } 31636} 31637 31638const moveConfigResolver = actions_b1cc53c2_esm_objectSpread2(actions_b1cc53c2_esm_objectSpread2({}, coordinatesConfigResolver), {}, { 31639 mouseOnly: (value = true) => value 31640}); 31641 31642class ScrollEngine extends CoordinatesEngine { 31643 constructor(...args) { 31644 super(...args); 31645 actions_b1cc53c2_esm_defineProperty(this, "ingKey", 'scrolling'); 31646 } 31647 scroll(event) { 31648 if (!this.state._active) this.start(event); 31649 this.scrollChange(event); 31650 this.timeoutStore.add('scrollEnd', this.scrollEnd.bind(this)); 31651 } 31652 scrollChange(event) { 31653 if (event.cancelable) event.preventDefault(); 31654 const state = this.state; 31655 const values = scrollValues(event); 31656 state._delta = V.sub(values, state._values); 31657 V.addTo(state._movement, state._delta); 31658 this.computeValues(values); 31659 this.compute(event); 31660 this.emit(); 31661 } 31662 scrollEnd() { 31663 if (!this.state._active) return; 31664 this.state._active = false; 31665 this.compute(); 31666 this.emit(); 31667 } 31668 bind(bindFunction) { 31669 bindFunction('scroll', '', this.scroll.bind(this)); 31670 } 31671} 31672 31673const scrollConfigResolver = coordinatesConfigResolver; 31674 31675class WheelEngine extends CoordinatesEngine { 31676 constructor(...args) { 31677 super(...args); 31678 actions_b1cc53c2_esm_defineProperty(this, "ingKey", 'wheeling'); 31679 } 31680 wheel(event) { 31681 if (!this.state._active) this.start(event); 31682 this.wheelChange(event); 31683 this.timeoutStore.add('wheelEnd', this.wheelEnd.bind(this)); 31684 } 31685 wheelChange(event) { 31686 const state = this.state; 31687 state._delta = wheelValues(event); 31688 V.addTo(state._movement, state._delta); 31689 clampStateInternalMovementToBounds(state); 31690 this.compute(event); 31691 this.emit(); 31692 } 31693 wheelEnd() { 31694 if (!this.state._active) return; 31695 this.state._active = false; 31696 this.compute(); 31697 this.emit(); 31698 } 31699 bind(bindFunction) { 31700 bindFunction('wheel', '', this.wheel.bind(this)); 31701 } 31702} 31703 31704const wheelConfigResolver = coordinatesConfigResolver; 31705 31706class HoverEngine extends CoordinatesEngine { 31707 constructor(...args) { 31708 super(...args); 31709 actions_b1cc53c2_esm_defineProperty(this, "ingKey", 'hovering'); 31710 } 31711 enter(event) { 31712 if (this.config.mouseOnly && event.pointerType !== 'mouse') return; 31713 this.start(event); 31714 this.computeValues(pointerValues(event)); 31715 this.compute(event); 31716 this.emit(); 31717 } 31718 leave(event) { 31719 if (this.config.mouseOnly && event.pointerType !== 'mouse') return; 31720 const state = this.state; 31721 if (!state._active) return; 31722 state._active = false; 31723 const values = pointerValues(event); 31724 state._movement = state._delta = V.sub(values, state._values); 31725 this.computeValues(values); 31726 this.compute(event); 31727 state.delta = state.movement; 31728 this.emit(); 31729 } 31730 bind(bindFunction) { 31731 bindFunction('pointer', 'enter', this.enter.bind(this)); 31732 bindFunction('pointer', 'leave', this.leave.bind(this)); 31733 } 31734} 31735 31736const hoverConfigResolver = actions_b1cc53c2_esm_objectSpread2(actions_b1cc53c2_esm_objectSpread2({}, coordinatesConfigResolver), {}, { 31737 mouseOnly: (value = true) => value 31738}); 31739 31740const actions_b1cc53c2_esm_EngineMap = new Map(); 31741const ConfigResolverMap = new Map(); 31742function actions_b1cc53c2_esm_registerAction(action) { 31743 actions_b1cc53c2_esm_EngineMap.set(action.key, action.engine); 31744 ConfigResolverMap.set(action.key, action.resolver); 31745} 31746const actions_b1cc53c2_esm_dragAction = { 31747 key: 'drag', 31748 engine: DragEngine, 31749 resolver: dragConfigResolver 31750}; 31751const actions_b1cc53c2_esm_hoverAction = { 31752 key: 'hover', 31753 engine: HoverEngine, 31754 resolver: hoverConfigResolver 31755}; 31756const actions_b1cc53c2_esm_moveAction = { 31757 key: 'move', 31758 engine: MoveEngine, 31759 resolver: moveConfigResolver 31760}; 31761const actions_b1cc53c2_esm_pinchAction = { 31762 key: 'pinch', 31763 engine: PinchEngine, 31764 resolver: pinchConfigResolver 31765}; 31766const actions_b1cc53c2_esm_scrollAction = { 31767 key: 'scroll', 31768 engine: ScrollEngine,
vendor: 9,498 bytes, lines 31769-32064
31769 resolver: scrollConfigResolver 31770}; 31771const actions_b1cc53c2_esm_wheelAction = { 31772 key: 'wheel', 31773 engine: WheelEngine, 31774 resolver: wheelConfigResolver 31775}; 31776 31777 31778 31779;// CONCATENATED MODULE: ./node_modules/@use-gesture/core/dist/use-gesture-core.esm.js 31780 31781 31782 31783function use_gesture_core_esm_objectWithoutPropertiesLoose(source, excluded) { 31784 if (source == null) return {}; 31785 var target = {}; 31786 var sourceKeys = Object.keys(source); 31787 var key, i; 31788 for (i = 0; i < sourceKeys.length; i++) { 31789 key = sourceKeys[i]; 31790 if (excluded.indexOf(key) >= 0) continue; 31791 target[key] = source[key]; 31792 } 31793 return target; 31794} 31795 31796function _objectWithoutProperties(source, excluded) { 31797 if (source == null) return {}; 31798 var target = use_gesture_core_esm_objectWithoutPropertiesLoose(source, excluded); 31799 var key, i; 31800 if (Object.getOwnPropertySymbols) { 31801 var sourceSymbolKeys = Object.getOwnPropertySymbols(source); 31802 for (i = 0; i < sourceSymbolKeys.length; i++) { 31803 key = sourceSymbolKeys[i]; 31804 if (excluded.indexOf(key) >= 0) continue; 31805 if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; 31806 target[key] = source[key]; 31807 } 31808 } 31809 return target; 31810} 31811 31812const sharedConfigResolver = { 31813 target(value) { 31814 if (value) { 31815 return () => 'current' in value ? value.current : value; 31816 } 31817 return undefined; 31818 }, 31819 enabled(value = true) { 31820 return value; 31821 }, 31822 window(value = SUPPORT.isBrowser ? window : undefined) { 31823 return value; 31824 }, 31825 eventOptions({ 31826 passive = true, 31827 capture = false 31828 } = {}) { 31829 return { 31830 passive, 31831 capture 31832 }; 31833 }, 31834 transform(value) { 31835 return value; 31836 } 31837}; 31838 31839const _excluded = ["target", "eventOptions", "window", "enabled", "transform"]; 31840function resolveWith(config = {}, resolvers) { 31841 const result = {}; 31842 for (const [key, resolver] of Object.entries(resolvers)) { 31843 switch (typeof resolver) { 31844 case 'function': 31845 if (false) {} else { 31846 result[key] = resolver.call(result, config[key], key, config); 31847 } 31848 break; 31849 case 'object': 31850 result[key] = resolveWith(config[key], resolver); 31851 break; 31852 case 'boolean': 31853 if (resolver) result[key] = config[key]; 31854 break; 31855 } 31856 } 31857 return result; 31858} 31859function use_gesture_core_esm_parse(newConfig, gestureKey, _config = {}) { 31860 const _ref = newConfig, 31861 { 31862 target, 31863 eventOptions, 31864 window, 31865 enabled, 31866 transform 31867 } = _ref, 31868 rest = _objectWithoutProperties(_ref, _excluded); 31869 _config.shared = resolveWith({ 31870 target, 31871 eventOptions, 31872 window, 31873 enabled, 31874 transform 31875 }, sharedConfigResolver); 31876 if (gestureKey) { 31877 const resolver = ConfigResolverMap.get(gestureKey); 31878 _config[gestureKey] = resolveWith(actions_b1cc53c2_esm_objectSpread2({ 31879 shared: _config.shared 31880 }, rest), resolver); 31881 } else { 31882 for (const key in rest) { 31883 const resolver = ConfigResolverMap.get(key); 31884 if (resolver) { 31885 _config[key] = resolveWith(actions_b1cc53c2_esm_objectSpread2({ 31886 shared: _config.shared 31887 }, rest[key]), resolver); 31888 } else if (false) {} 31889 } 31890 } 31891 return _config; 31892} 31893 31894class EventStore { 31895 constructor(ctrl, gestureKey) { 31896 actions_b1cc53c2_esm_defineProperty(this, "_listeners", new Set()); 31897 this._ctrl = ctrl; 31898 this._gestureKey = gestureKey; 31899 } 31900 add(element, device, action, handler, options) { 31901 const listeners = this._listeners; 31902 const type = toDomEventType(device, action); 31903 const _options = this._gestureKey ? this._ctrl.config[this._gestureKey].eventOptions : {}; 31904 const eventOptions = actions_b1cc53c2_esm_objectSpread2(actions_b1cc53c2_esm_objectSpread2({}, _options), options); 31905 element.addEventListener(type, handler, eventOptions); 31906 const remove = () => { 31907 element.removeEventListener(type, handler, eventOptions); 31908 listeners.delete(remove); 31909 }; 31910 listeners.add(remove); 31911 return remove; 31912 } 31913 clean() { 31914 this._listeners.forEach(remove => remove()); 31915 this._listeners.clear(); 31916 } 31917} 31918 31919class TimeoutStore { 31920 constructor() { 31921 actions_b1cc53c2_esm_defineProperty(this, "_timeouts", new Map()); 31922 } 31923 add(key, callback, ms = 140, ...args) { 31924 this.remove(key); 31925 this._timeouts.set(key, window.setTimeout(callback, ms, ...args)); 31926 } 31927 remove(key) { 31928 const timeout = this._timeouts.get(key); 31929 if (timeout) window.clearTimeout(timeout); 31930 } 31931 clean() { 31932 this._timeouts.forEach(timeout => void window.clearTimeout(timeout)); 31933 this._timeouts.clear(); 31934 } 31935} 31936 31937class Controller { 31938 constructor(handlers) { 31939 actions_b1cc53c2_esm_defineProperty(this, "gestures", new Set()); 31940 actions_b1cc53c2_esm_defineProperty(this, "_targetEventStore", new EventStore(this)); 31941 actions_b1cc53c2_esm_defineProperty(this, "gestureEventStores", {}); 31942 actions_b1cc53c2_esm_defineProperty(this, "gestureTimeoutStores", {}); 31943 actions_b1cc53c2_esm_defineProperty(this, "handlers", {}); 31944 actions_b1cc53c2_esm_defineProperty(this, "config", {}); 31945 actions_b1cc53c2_esm_defineProperty(this, "pointerIds", new Set()); 31946 actions_b1cc53c2_esm_defineProperty(this, "touchIds", new Set()); 31947 actions_b1cc53c2_esm_defineProperty(this, "state", { 31948 shared: { 31949 shiftKey: false, 31950 metaKey: false, 31951 ctrlKey: false, 31952 altKey: false 31953 } 31954 }); 31955 resolveGestures(this, handlers); 31956 } 31957 setEventIds(event) { 31958 if (isTouch(event)) { 31959 this.touchIds = new Set(touchIds(event)); 31960 return this.touchIds; 31961 } else if ('pointerId' in event) { 31962 if (event.type === 'pointerup' || event.type === 'pointercancel') this.pointerIds.delete(event.pointerId);else if (event.type === 'pointerdown') this.pointerIds.add(event.pointerId); 31963 return this.pointerIds; 31964 } 31965 } 31966 applyHandlers(handlers, nativeHandlers) { 31967 this.handlers = handlers; 31968 this.nativeHandlers = nativeHandlers; 31969 } 31970 applyConfig(config, gestureKey) { 31971 this.config = use_gesture_core_esm_parse(config, gestureKey, this.config); 31972 } 31973 clean() { 31974 this._targetEventStore.clean(); 31975 for (const key of this.gestures) { 31976 this.gestureEventStores[key].clean(); 31977 this.gestureTimeoutStores[key].clean(); 31978 } 31979 } 31980 effect() { 31981 if (this.config.shared.target) this.bind(); 31982 return () => this._targetEventStore.clean(); 31983 } 31984 bind(...args) { 31985 const sharedConfig = this.config.shared; 31986 const props = {}; 31987 let target; 31988 if (sharedConfig.target) { 31989 target = sharedConfig.target(); 31990 if (!target) return; 31991 } 31992 if (sharedConfig.enabled) { 31993 for (const gestureKey of this.gestures) { 31994 const gestureConfig = this.config[gestureKey]; 31995 const bindFunction = bindToProps(props, gestureConfig.eventOptions, !!target); 31996 if (gestureConfig.enabled) { 31997 const Engine = actions_b1cc53c2_esm_EngineMap.get(gestureKey); 31998 new Engine(this, args, gestureKey).bind(bindFunction); 31999 } 32000 } 32001 const nativeBindFunction = bindToProps(props, sharedConfig.eventOptions, !!target); 32002 for (const eventKey in this.nativeHandlers) { 32003 nativeBindFunction(eventKey, '', event => this.nativeHandlers[eventKey](actions_b1cc53c2_esm_objectSpread2(actions_b1cc53c2_esm_objectSpread2({}, this.state.shared), {}, { 32004 event, 32005 args 32006 })), undefined, true); 32007 } 32008 } 32009 for (const handlerProp in props) { 32010 props[handlerProp] = actions_b1cc53c2_esm_chain(...props[handlerProp]); 32011 } 32012 if (!target) return props; 32013 for (const handlerProp in props) { 32014 const { 32015 device, 32016 capture, 32017 passive 32018 } = parseProp(handlerProp); 32019 this._targetEventStore.add(target, device, '', props[handlerProp], { 32020 capture, 32021 passive 32022 }); 32023 } 32024 } 32025} 32026function setupGesture(ctrl, gestureKey) { 32027 ctrl.gestures.add(gestureKey); 32028 ctrl.gestureEventStores[gestureKey] = new EventStore(ctrl, gestureKey); 32029 ctrl.gestureTimeoutStores[gestureKey] = new TimeoutStore(); 32030} 32031function resolveGestures(ctrl, internalHandlers) { 32032 if (internalHandlers.drag) setupGesture(ctrl, 'drag'); 32033 if (internalHandlers.wheel) setupGesture(ctrl, 'wheel'); 32034 if (internalHandlers.scroll) setupGesture(ctrl, 'scroll'); 32035 if (internalHandlers.move) setupGesture(ctrl, 'move'); 32036 if (internalHandlers.pinch) setupGesture(ctrl, 'pinch'); 32037 if (internalHandlers.hover) setupGesture(ctrl, 'hover'); 32038} 32039const bindToProps = (props, eventOptions, withPassiveOption) => (device, action, handler, options = {}, isNative = false) => { 32040 var _options$capture, _options$passive; 32041 const capture = (_options$capture = options.capture) !== null && _options$capture !== void 0 ? _options$capture : eventOptions.capture; 32042 const passive = (_options$passive = options.passive) !== null && _options$passive !== void 0 ? _options$passive : eventOptions.passive; 32043 let handlerProp = isNative ? device : toHandlerProp(device, action, capture); 32044 if (withPassiveOption && passive) handlerProp += 'Passive'; 32045 props[handlerProp] = props[handlerProp] || []; 32046 props[handlerProp].push(handler); 32047}; 32048 32049const RE_NOT_NATIVE = /^on(Drag|Wheel|Scroll|Move|Pinch|Hover)/; 32050function sortHandlers(_handlers) { 32051 const native = {}; 32052 const handlers = {}; 32053 const actions = new Set(); 32054 for (let key in _handlers) { 32055 if (RE_NOT_NATIVE.test(key)) { 32056 actions.add(RegExp.lastMatch); 32057 handlers[key] = _handlers[key]; 32058 } else { 32059 native[key] = _handlers[key]; 32060 } 32061 } 32062 return [handlers, native, actions]; 32063} 32064function registerGesture(actions, handlers, handlerKey, key, internalHandlers, config) {
32065 if (!actions.has(handlerKey)) return; 32066 if (!EngineMap.has(key)) { 32067 if (false) {} 32068 return; 32069 } 32070 const startKey = handlerKey + 'Start'; 32071 const endKey = handlerKey + 'End'; 32072 const fn = state => { 32073 let memo = undefined; 32074 if (state.first && startKey in handlers) handlers[startKey](state); 32075 if (handlerKey in handlers) memo = handlers[handlerKey](state); 32076 if (state.last && endKey in handlers) handlers[endKey](state); 32077 return memo; 32078 }; 32079 internalHandlers[key] = fn; 32080 config[key] = config[key] || {}; 32081} 32082function use_gesture_core_esm_parseMergedHandlers(mergedHandlers, mergedConfig) { 32083 const [handlers, nativeHandlers, actions] = sortHandlers(mergedHandlers); 32084 const internalHandlers = {}; 32085 registerGesture(actions, handlers, 'onDrag', 'drag', internalHandlers, mergedConfig); 32086 registerGesture(actions, handlers, 'onWheel', 'wheel', internalHandlers, mergedConfig); 32087 registerGesture(actions, handlers, 'onScroll', 'scroll', internalHandlers, mergedConfig); 32088 registerGesture(actions, handlers, 'onPinch', 'pinch', internalHandlers, mergedConfig); 32089 registerGesture(actions, handlers, 'onMove', 'move', internalHandlers, mergedConfig); 32090 registerGesture(actions, handlers, 'onHover', 'hover', internalHandlers, mergedConfig); 32091 return { 32092 handlers: internalHandlers, 32093 config: mergedConfig, 32094 nativeHandlers 32095 }; 32096} 32097 32098 32099 32100;// CONCATENATED MODULE: ./node_modules/@use-gesture/react/dist/use-gesture-react.esm.js 32101 32102 32103 32104 32105 32106 32107 32108function useRecognizers(handlers, config = {}, gestureKey, nativeHandlers) { 32109 const ctrl = external_React_default().useMemo(() => new Controller(handlers), []); 32110 ctrl.applyHandlers(handlers, nativeHandlers); 32111 ctrl.applyConfig(config, gestureKey); 32112 external_React_default().useEffect(ctrl.effect.bind(ctrl)); 32113 external_React_default().useEffect(() => { 32114 return ctrl.clean.bind(ctrl); 32115 }, []); 32116 if (config.target === undefined) { 32117 return ctrl.bind.bind(ctrl); 32118 } 32119 return undefined; 32120} 32121 32122function useDrag(handler, config) { 32123 actions_b1cc53c2_esm_registerAction(actions_b1cc53c2_esm_dragAction); 32124 return useRecognizers({ 32125 drag: handler 32126 }, config || {}, 'drag'); 32127} 32128 32129function usePinch(handler, config) { 32130 registerAction(pinchAction); 32131 return useRecognizers({ 32132 pinch: handler 32133 }, config || {}, 'pinch'); 32134} 32135 32136function useWheel(handler, config) { 32137 registerAction(wheelAction); 32138 return useRecognizers({ 32139 wheel: handler 32140 }, config || {}, 'wheel'); 32141} 32142 32143function useScroll(handler, config) { 32144 registerAction(scrollAction); 32145 return useRecognizers({ 32146 scroll: handler 32147 }, config || {}, 'scroll'); 32148} 32149 32150function useMove(handler, config) { 32151 registerAction(moveAction); 32152 return useRecognizers({ 32153 move: handler 32154 }, config || {}, 'move'); 32155} 32156 32157function useHover(handler, config) { 32158 actions_b1cc53c2_esm_registerAction(actions_b1cc53c2_esm_hoverAction); 32159 return useRecognizers({ 32160 hover: handler 32161 }, config || {}, 'hover'); 32162} 32163 32164function createUseGesture(actions) { 32165 actions.forEach(registerAction); 32166 return function useGesture(_handlers, _config) { 32167 const { 32168 handlers, 32169 nativeHandlers, 32170 config 32171 } = parseMergedHandlers(_handlers, _config || {}); 32172 return useRecognizers(handlers, config, undefined, nativeHandlers); 32173 }; 32174} 32175 32176function useGesture(handlers, config) { 32177 const hook = createUseGesture([dragAction, pinchAction, scrollAction, wheelAction, moveAction, hoverAction]); 32178 return hook(handlers, config || {}); 32179} 32180 32181 32182 32183;// CONCATENATED MODULE: ./packages/components/build-module/input-control/utils.js 32184/** 32185 * External dependencies 32186 */ 32187 32188/** 32189 * WordPress dependencies 32190 */ 32191 32192 32193/** 32194 * Internal dependencies 32195 */ 32196 32197/** 32198 * Gets a CSS cursor value based on a drag direction. 32199 * 32200 * @param dragDirection The drag direction. 32201 * @return The CSS cursor value. 32202 */ 32203function getDragCursor(dragDirection) { 32204 let dragCursor = 'ns-resize'; 32205 switch (dragDirection) { 32206 case 'n': 32207 case 's': 32208 dragCursor = 'ns-resize'; 32209 break; 32210 case 'e': 32211 case 'w': 32212 dragCursor = 'ew-resize'; 32213 break; 32214 } 32215 return dragCursor; 32216} 32217 32218/** 32219 * Custom hook that renders a drag cursor when dragging. 32220 * 32221 * @param {boolean} isDragging The dragging state. 32222 * @param {string} dragDirection The drag direction. 32223 * 32224 * @return {string} The CSS cursor value. 32225 */ 32226function useDragCursor(isDragging, dragDirection) { 32227 const dragCursor = getDragCursor(dragDirection); 32228 (0,external_wp_element_namespaceObject.useEffect)(() => { 32229 if (isDragging) { 32230 document.documentElement.style.cursor = dragCursor; 32231 } else { 32232 // @ts-expect-error 32233 document.documentElement.style.cursor = null; 32234 } 32235 }, [isDragging, dragCursor]); 32236 return dragCursor; 32237} 32238function useDraft(props) { 32239 const refPreviousValue = (0,external_wp_element_namespaceObject.useRef)(props.value); 32240 const [draft, setDraft] = (0,external_wp_element_namespaceObject.useState)({}); 32241 const value = draft.value !== undefined ? draft.value : props.value; 32242 32243 // Determines when to discard the draft value to restore controlled status. 32244 // To do so, it tracks the previous value and marks the draft value as stale 32245 // after each render. 32246 (0,external_wp_element_namespaceObject.useLayoutEffect)(() => { 32247 const { 32248 current: previousValue 32249 } = refPreviousValue; 32250 refPreviousValue.current = props.value; 32251 if (draft.value !== undefined && !draft.isStale) setDraft({ 32252 ...draft, 32253 isStale: true 32254 });else if (draft.isStale && props.value !== previousValue) setDraft({}); 32255 }, [props.value, draft]); 32256 const onChange = (nextValue, extra) => { 32257 // Mutates the draft value to avoid an extra effect run. 32258 setDraft(current => Object.assign(current, { 32259 value: nextValue, 32260 isStale: false 32261 }));
32262 props.onChange(nextValue, extra); 32263 }; 32264 const onBlur = event => { 32265 setDraft({}); 32266 props.onBlur?.(event); 32267 }; 32268 return { 32269 value, 32270 onBlur, 32271 onChange 32272 }; 32273} 32274 32275;// CONCATENATED MODULE: ./packages/components/build-module/input-control/reducer/state.js 32276/** 32277 * External dependencies 32278 */ 32279 32280/** 32281 * Internal dependencies 32282 */ 32283 32284const initialStateReducer = state => state; 32285const initialInputControlState = { 32286 error: null, 32287 initialValue: '', 32288 isDirty: false, 32289 isDragEnabled: false, 32290 isDragging: false, 32291 isPressEnterToChange: false, 32292 value: '' 32293}; 32294 32295;// CONCATENATED MODULE: ./packages/components/build-module/input-control/reducer/actions.js 32296/** 32297 * External dependencies 32298 */ 32299 32300/** 32301 * Internal dependencies 32302 */ 32303 32304const CHANGE = 'CHANGE'; 32305const COMMIT = 'COMMIT'; 32306const CONTROL = 'CONTROL'; 32307const DRAG_END = 'DRAG_END'; 32308const DRAG_START = 'DRAG_START'; 32309const DRAG = 'DRAG'; 32310const INVALIDATE = 'INVALIDATE'; 32311const PRESS_DOWN = 'PRESS_DOWN'; 32312const PRESS_ENTER = 'PRESS_ENTER'; 32313const PRESS_UP = 'PRESS_UP'; 32314const RESET = 'RESET'; 32315 32316;// CONCATENATED MODULE: ./packages/components/build-module/input-control/reducer/reducer.js 32317/** 32318 * External dependencies 32319 */ 32320 32321/** 32322 * WordPress dependencies 32323 */ 32324 32325 32326/** 32327 * Internal dependencies 32328 */ 32329 32330 32331 32332/** 32333 * Prepares initialState for the reducer. 32334 * 32335 * @param initialState The initial state. 32336 * @return Prepared initialState for the reducer 32337 */ 32338function mergeInitialState(initialState = initialInputControlState) { 32339 const { 32340 value 32341 } = initialState; 32342 return { 32343 ...initialInputControlState, 32344 ...initialState, 32345 initialValue: value 32346 }; 32347} 32348 32349/** 32350 * Creates the base reducer which may be coupled to a specializing reducer. 32351 * As its final step, for all actions other than CONTROL, the base reducer 32352 * passes the state and action on through the specializing reducer. The 32353 * exception for CONTROL actions is because they represent controlled updates 32354 * from props and no case has yet presented for their specialization. 32355 * 32356 * @param composedStateReducers A reducer to specialize state changes. 32357 * @return The reducer. 32358 */ 32359function inputControlStateReducer(composedStateReducers) { 32360 return (state, action) => { 32361 const nextState = { 32362 ...state 32363 }; 32364 switch (action.type) { 32365 /* 32366 * Controlled updates 32367 */ 32368 case CONTROL: 32369 nextState.value = action.payload.value; 32370 nextState.isDirty = false; 32371 nextState._event = undefined; 32372 // Returns immediately to avoid invoking additional reducers. 32373 return nextState; 32374 32375 /** 32376 * Keyboard events 32377 */ 32378 case PRESS_UP: 32379 nextState.isDirty = false; 32380 break; 32381 case PRESS_DOWN: 32382 nextState.isDirty = false; 32383 break; 32384 32385 /** 32386 * Drag events 32387 */ 32388 case DRAG_START: 32389 nextState.isDragging = true; 32390 break; 32391 case DRAG_END: 32392 nextState.isDragging = false; 32393 break; 32394 32395 /** 32396 * Input events 32397 */ 32398 case CHANGE: 32399 nextState.error = null; 32400 nextState.value = action.payload.value; 32401 if (state.isPressEnterToChange) { 32402 nextState.isDirty = true; 32403 } 32404 break; 32405 case COMMIT: 32406 nextState.value = action.payload.value; 32407 nextState.isDirty = false; 32408 break; 32409 case RESET: 32410 nextState.error = null; 32411 nextState.isDirty = false; 32412 nextState.value = action.payload.value || state.initialValue; 32413 break; 32414 32415 /** 32416 * Validation 32417 */ 32418 case INVALIDATE: 32419 nextState.error = action.payload.error; 32420 break; 32421 } 32422 nextState._event = action.payload.event; 32423 32424 /** 32425 * Send the nextState + action to the composedReducers via 32426 * this "bridge" mechanism. This allows external stateReducers 32427 * to hook into actions, and modify state if needed. 32428 */ 32429 return composedStateReducers(nextState, action); 32430 }; 32431} 32432 32433/** 32434 * A custom hook that connects and external stateReducer with an internal 32435 * reducer. This hook manages the internal state of InputControl. 32436 * However, by connecting an external stateReducer function, other 32437 * components can react to actions as well as modify state before it is 32438 * applied. 32439 * 32440 * This technique uses the "stateReducer" design pattern: 32441 * https://kentcdodds.com/blog/the-state-reducer-pattern/ 32442 * 32443 * @param stateReducer An external state reducer. 32444 * @param initialState The initial state for the reducer. 32445 * @param onChangeHandler A handler for the onChange event. 32446 * @return State, dispatch, and a collection of actions. 32447 */ 32448function useInputControlStateReducer(stateReducer = initialStateReducer, initialState = initialInputControlState, onChangeHandler) { 32449 const [state, dispatch] = (0,external_wp_element_namespaceObject.useReducer)(inputControlStateReducer(stateReducer), mergeInitialState(initialState)); 32450 const createChangeEvent = type => (nextValue, event) => { 32451 dispatch({ 32452 type, 32453 payload: { 32454 value: nextValue, 32455 event 32456 } 32457 }); 32458 }; 32459 const createKeyEvent = type => event => { 32460 dispatch({ 32461 type, 32462 payload: { 32463 event 32464 } 32465 }); 32466 }; 32467 const createDragEvent = type => payload => { 32468 dispatch({ 32469 type, 32470 payload 32471 }); 32472 }; 32473 32474 /** 32475 * Actions for the reducer 32476 */ 32477 const change = createChangeEvent(CHANGE); 32478 const invalidate = (error, event) => dispatch({ 32479 type: INVALIDATE, 32480 payload: { 32481 error, 32482 event 32483 } 32484 }); 32485 const reset = createChangeEvent(RESET); 32486 const commit = createChangeEvent(COMMIT); 32487 const dragStart = createDragEvent(DRAG_START); 32488 const drag = createDragEvent(DRAG); 32489 const dragEnd = createDragEvent(DRAG_END); 32490 const pressUp = createKeyEvent(PRESS_UP); 32491 const pressDown = createKeyEvent(PRESS_DOWN); 32492 const pressEnter = createKeyEvent(PRESS_ENTER); 32493 const currentState = (0,external_wp_element_namespaceObject.useRef)(state); 32494 const refProps = (0,external_wp_element_namespaceObject.useRef)({ 32495 value: initialState.value, 32496 onChangeHandler 32497 }); 32498 32499 // Freshens refs to props and state so that subsequent effects have access 32500 // to their latest values without their changes causing effect runs. 32501 (0,external_wp_element_namespaceObject.useLayoutEffect)(() => { 32502 currentState.current = state; 32503 refProps.current = { 32504 value: initialState.value, 32505 onChangeHandler 32506 }; 32507 }); 32508 32509 // Propagates the latest state through onChange. 32510 (0,external_wp_element_namespaceObject.useLayoutEffect)(() => { 32511 if (currentState.current._event !== undefined && state.value !== refProps.current.value && !state.isDirty) { 32512 var _state$value; 32513 refProps.current.onChangeHandler((_state$value = state.value) !== null && _state$value !== void 0 ? _state$value : '', { 32514 event: currentState.current._event 32515 }); 32516 } 32517 }, [state.value, state.isDirty]); 32518 32519 // Updates the state from props. 32520 (0,external_wp_element_namespaceObject.useLayoutEffect)(() => { 32521 if (initialState.value !== currentState.current.value && !currentState.current.isDirty) { 32522 var _initialState$value; 32523 dispatch({ 32524 type: CONTROL, 32525 payload: { 32526 value: (_initialState$value = initialState.value) !== null && _initialState$value !== void 0 ? _initialState$value : '' 32527 } 32528 }); 32529 } 32530 }, [initialState.value]); 32531 return { 32532 change, 32533 commit, 32534 dispatch, 32535 drag, 32536 dragEnd, 32537 dragStart, 32538 invalidate, 32539 pressDown, 32540 pressEnter, 32541 pressUp, 32542 reset, 32543 state 32544 }; 32545} 32546 32547;// CONCATENATED MODULE: ./packages/components/build-module/input-control/input-field.js 32548 32549/** 32550 * External dependencies 32551 */ 32552
32553/** 32554 * WordPress dependencies 32555 */ 32556 32557/** 32558 * Internal dependencies 32559 */ 32560 32561 32562 32563 32564const input_field_noop = () => {}; 32565function InputField({ 32566 disabled = false, 32567 dragDirection = 'n', 32568 dragThreshold = 10, 32569 id, 32570 isDragEnabled = false, 32571 isFocused, 32572 isPressEnterToChange = false, 32573 onBlur = input_field_noop, 32574 onChange = input_field_noop, 32575 onDrag = input_field_noop, 32576 onDragEnd = input_field_noop, 32577 onDragStart = input_field_noop, 32578 onFocus = input_field_noop, 32579 onKeyDown = input_field_noop, 32580 onValidate = input_field_noop, 32581 size = 'default', 32582 setIsFocused, 32583 stateReducer = state => state, 32584 value: valueProp, 32585 type, 32586 ...props 32587}, ref) { 32588 const { 32589 // State. 32590 state, 32591 // Actions. 32592 change, 32593 commit, 32594 drag, 32595 dragEnd, 32596 dragStart, 32597 invalidate, 32598 pressDown, 32599 pressEnter, 32600 pressUp, 32601 reset 32602 } = useInputControlStateReducer(stateReducer, { 32603 isDragEnabled, 32604 value: valueProp, 32605 isPressEnterToChange 32606 }, onChange); 32607 const { 32608 value, 32609 isDragging, 32610 isDirty 32611 } = state; 32612 const wasDirtyOnBlur = (0,external_wp_element_namespaceObject.useRef)(false); 32613 const dragCursor = useDragCursor(isDragging, dragDirection); 32614 const handleOnBlur = event => { 32615 onBlur(event); 32616 setIsFocused?.(false); 32617 32618 /** 32619 * If isPressEnterToChange is set, this commits the value to 32620 * the onChange callback. 32621 */ 32622 if (isDirty || !event.target.validity.valid) { 32623 wasDirtyOnBlur.current = true; 32624 handleOnCommit(event); 32625 } 32626 }; 32627 const handleOnFocus = event => { 32628 onFocus(event); 32629 setIsFocused?.(true); 32630 }; 32631 const handleOnChange = event => { 32632 const nextValue = event.target.value; 32633 change(nextValue, event); 32634 }; 32635 const handleOnCommit = event => { 32636 const nextValue = event.currentTarget.value; 32637 try { 32638 onValidate(nextValue); 32639 commit(nextValue, event); 32640 } catch (err) { 32641 invalidate(err, event); 32642 } 32643 }; 32644 const handleOnKeyDown = event => { 32645 const { 32646 key 32647 } = event; 32648 onKeyDown(event); 32649 switch (key) { 32650 case 'ArrowUp': 32651 pressUp(event); 32652 break; 32653 case 'ArrowDown': 32654 pressDown(event); 32655 break; 32656 case 'Enter': 32657 pressEnter(event); 32658 if (isPressEnterToChange) { 32659 event.preventDefault(); 32660 handleOnCommit(event); 32661 } 32662 break; 32663 case 'Escape': 32664 if (isPressEnterToChange && isDirty) { 32665 event.preventDefault(); 32666 reset(valueProp, event); 32667 } 32668 break; 32669 } 32670 }; 32671 const dragGestureProps = useDrag(dragProps => { 32672 const { 32673 distance, 32674 dragging, 32675 event, 32676 target 32677 } = dragProps; 32678 32679 // The `target` prop always references the `input` element while, by 32680 // default, the `dragProps.event.target` property would reference the real 32681 // event target (i.e. any DOM element that the pointer is hovering while 32682 // dragging). Ensuring that the `target` is always the `input` element 32683 // allows consumers of `InputControl` (or any higher-level control) to 32684 // check the input's validity by accessing `event.target.validity.valid`. 32685 dragProps.event = { 32686 ...dragProps.event, 32687 target 32688 }; 32689 if (!distance) return; 32690 event.stopPropagation(); 32691 32692 /** 32693 * Quick return if no longer dragging. 32694 * This prevents unnecessary value calculations. 32695 */ 32696 if (!dragging) { 32697 onDragEnd(dragProps); 32698 dragEnd(dragProps); 32699 return; 32700 } 32701 onDrag(dragProps); 32702 drag(dragProps); 32703 if (!isDragging) { 32704 onDragStart(dragProps); 32705 dragStart(dragProps); 32706 } 32707 }, { 32708 axis: dragDirection === 'e' || dragDirection === 'w' ? 'x' : 'y', 32709 threshold: dragThreshold, 32710 enabled: isDragEnabled, 32711 pointer: { 32712 capture: false 32713 } 32714 }); 32715 const dragProps = isDragEnabled ? dragGestureProps() : {}; 32716 /* 32717 * Works around the odd UA (e.g. Firefox) that does not focus inputs of 32718 * type=number when their spinner arrows are pressed. 32719 */ 32720 let handleOnMouseDown; 32721 if (type === 'number') { 32722 handleOnMouseDown = event => { 32723 props.onMouseDown?.(event); 32724 if (event.currentTarget !== event.currentTarget.ownerDocument.activeElement) {
32725 event.currentTarget.focus(); 32726 } 32727 }; 32728 } 32729 return (0,external_wp_element_namespaceObject.createElement)(Input, { 32730 ...props, 32731 ...dragProps, 32732 className: "components-input-control__input", 32733 disabled: disabled, 32734 dragCursor: dragCursor, 32735 isDragging: isDragging, 32736 id: id, 32737 onBlur: handleOnBlur, 32738 onChange: handleOnChange, 32739 onFocus: handleOnFocus, 32740 onKeyDown: handleOnKeyDown, 32741 onMouseDown: handleOnMouseDown, 32742 ref: ref, 32743 inputSize: size 32744 // Fallback to `''` to avoid "uncontrolled to controlled" warning. 32745 // See https://github.com/WordPress/gutenberg/pull/47250 for details. 32746 , 32747 value: value !== null && value !== void 0 ? value : '', 32748 type: type 32749 }); 32750} 32751const ForwardedComponent = (0,external_wp_element_namespaceObject.forwardRef)(InputField); 32752/* harmony default export */ const input_field = (ForwardedComponent); 32753 32754;// CONCATENATED MODULE: ./packages/components/build-module/utils/font-values.js 32755/* harmony default export */ const font_values = ({ 32756 'default.fontFamily': "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif", 32757 'default.fontSize': '13px', 32758 'helpText.fontSize': '12px', 32759 mobileTextMinFontSize: '16px'
32760}); 32761 32762;// CONCATENATED MODULE: ./packages/components/build-module/utils/font.js 32763/** 32764 * Internal dependencies 32765 */ 32766 32767 32768/** 32769 * 32770 * @param {keyof FONT} value Path of value from `FONT` 32771 * @return {string} Font rule value 32772 */ 32773function font(value) { 32774 var _FONT$value; 32775 return (_FONT$value = font_values[value]) !== null && _FONT$value !== void 0 ? _FONT$value : ''; 32776} 32777 32778;// CONCATENATED MODULE: ./packages/components/build-module/utils/box-sizing.js 32779function box_sizing_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)."; } 32780/** 32781 * External dependencies 32782 */ 32783 32784const boxSizingReset = true ? { 32785 name: "kv6lnz", 32786 styles: "box-sizing:border-box;*,*::before,*::after{box-sizing:inherit;}" 32787} : 0; 32788 32789;// CONCATENATED MODULE: ./packages/components/build-module/base-control/styles/base-control-styles.js 32790 32791function 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)."; } 32792/** 32793 * External dependencies 32794 */ 32795 32796 32797 32798/** 32799 * Internal dependencies 32800 */ 32801 32802 32803const base_control_styles_Wrapper = emotion_styled_base_browser_esm("div", true ? { 32804 target: "ej5x27r4" 32805} : 0)("font-family:", font('default.fontFamily'), ";font-size:", font('default.fontSize'), ";", boxSizingReset, ";" + ( true ? "" : 0)); 32806const deprecatedMarginField = ({ 32807 __nextHasNoMarginBottom = false 32808}) => { 32809 return !__nextHasNoMarginBottom && /*#__PURE__*/emotion_react_browser_esm_css("margin-bottom:", space(2), ";" + ( true ? "" : 0), true ? "" : 0); 32810}; 32811const StyledField = emotion_styled_base_browser_esm("div", true ? { 32812 target: "ej5x27r3" 32813} : 0)(deprecatedMarginField, " .components-panel__row &{margin-bottom:inherit;}" + ( true ? "" : 0)); 32814const labelStyles = /*#__PURE__*/emotion_react_browser_esm_css(baseLabelTypography, ";display:inline-block;margin-bottom:", space(2), ";padding:0;" + ( true ? "" : 0), true ? "" : 0); 32815const StyledLabel = emotion_styled_base_browser_esm("label", true ? { 32816 target: "ej5x27r2" 32817} : 0)(labelStyles, ";" + ( true ? "" : 0)); 32818var base_control_styles_ref = true ? { 32819 name: "11yad0w", 32820 styles: "margin-bottom:revert" 32821} : 0; 32822const deprecatedMarginHelp = ({ 32823 __nextHasNoMarginBottom = false 32824}) => { 32825 return !__nextHasNoMarginBottom && base_control_styles_ref; 32826}; 32827const StyledHelp = emotion_styled_base_browser_esm("p", true ? { 32828 target: "ej5x27r1" 32829} : 0)("margin-top:", space(2), ";margin-bottom:0;font-size:", font('helpText.fontSize'), ";font-style:normal;color:", COLORS.gray[700], ";", deprecatedMarginHelp, ";" + ( true ? "" : 0)); 32830const StyledVisualLabel = emotion_styled_base_browser_esm("span", true ? { 32831 target: "ej5x27r0" 32832} : 0)(labelStyles, ";" + ( true ? "" : 0)); 32833 32834;// CONCATENATED MODULE: ./packages/components/build-module/base-control/index.js 32835 32836/** 32837 * External dependencies 32838 */ 32839 32840 32841/** 32842 * Internal dependencies 32843 */ 32844 32845 32846 32847 32848/** 32849 * `BaseControl` is a component used to generate labels and help text for components handling user inputs. 32850 * 32851 * ```jsx 32852 * import { BaseControl, useBaseControlProps } from '@wordpress/components'; 32853 * 32854 * // Render a `BaseControl` for a textarea input 32855 * const MyCustomTextareaControl = ({ children, ...baseProps }) => ( 32856 * // `useBaseControlProps` is a convenience hook to get the props for the `BaseControl` 32857 * // and the inner control itself. Namely, it takes care of generating a unique `id`, 32858 * // properly associating it with the `label` and `help` elements. 32859 * const { baseControlProps, controlProps } = useBaseControlProps( baseProps ); 32860 * 32861 * return ( 32862 * <BaseControl { ...baseControlProps } __nextHasNoMarginBottom={ true }> 32863 * <textarea { ...controlProps }> 32864 * { children } 32865 * </textarea> 32866 * </BaseControl> 32867 * ); 32868 * ); 32869 * ``` 32870 */ 32871const BaseControl = ({ 32872 __nextHasNoMarginBottom = false, 32873 id, 32874 label, 32875 hideLabelFromVision = false, 32876 help,
32877 className, 32878 children 32879}) => { 32880 return (0,external_wp_element_namespaceObject.createElement)(base_control_styles_Wrapper, { 32881 className: classnames_default()('components-base-control', className) 32882 }, (0,external_wp_element_namespaceObject.createElement)(StyledField, { 32883 className: "components-base-control__field" 32884 // TODO: Official deprecation for this should start after all internal usages have been migrated 32885 , 32886 __nextHasNoMarginBottom: __nextHasNoMarginBottom 32887 }, label && id && (hideLabelFromVision ? (0,external_wp_element_namespaceObject.createElement)(visually_hidden_component, { 32888 as: "label", 32889 htmlFor: id 32890 }, label) : (0,external_wp_element_namespaceObject.createElement)(StyledLabel, { 32891 className: "components-base-control__label", 32892 htmlFor: id 32893 }, label)), label && !id && (hideLabelFromVision ? (0,external_wp_element_namespaceObject.createElement)(visually_hidden_component, { 32894 as: "label" 32895 }, label) : (0,external_wp_element_namespaceObject.createElement)(BaseControl.VisualLabel, null, label)), children), !!help && (0,external_wp_element_namespaceObject.createElement)(StyledHelp, { 32896 id: id ? id + '__help' : undefined, 32897 className: "components-base-control__help", 32898 __nextHasNoMarginBottom: __nextHasNoMarginBottom 32899 }, help)); 32900}; 32901 32902/** 32903 * `BaseControl.VisualLabel` is used to render a purely visual label inside a `BaseControl` component. 32904 * 32905 * It should only be used in cases where the children being rendered inside `BaseControl` are already accessibly labeled, 32906 * e.g., a button, but we want an additional visual label for that section equivalent to the labels `BaseControl` would 32907 * otherwise use if the `label` prop was passed. 32908 * 32909 * @example 32910 * import { BaseControl } from '@wordpress/components'; 32911 * 32912 * const MyBaseControl = () => ( 32913 * <BaseControl help="This button is already accessibly labeled."> 32914 * <BaseControl.VisualLabel>Author</BaseControl.VisualLabel> 32915 * <Button>Select an author</Button> 32916 * </BaseControl> 32917 * ); 32918 */ 32919const VisualLabel = ({ 32920 className, 32921 children, 32922 ...props 32923}) => { 32924 return (0,external_wp_element_namespaceObject.createElement)(StyledVisualLabel, { 32925 ...props, 32926 className: classnames_default()('components-base-control__label', className) 32927 }, children); 32928}; 32929BaseControl.VisualLabel = VisualLabel; 32930/* harmony default export */ const base_control = (BaseControl); 32931 32932;// CONCATENATED MODULE: ./packages/components/build-module/input-control/index.js 32933 32934/** 32935 * External dependencies 32936 */ 32937 32938/** 32939 * WordPress dependencies 32940 */ 32941 32942 32943 32944/** 32945 * Internal dependencies 32946 */ 32947 32948 32949 32950 32951 32952const input_control_noop = () => {}; 32953function input_control_useUniqueId(idProp) { 32954 const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(InputControl); 32955 const id = `inspector-input-control-${instanceId}`; 32956 return idProp || id; 32957} 32958function UnforwardedInputControl({ 32959 __next36pxDefaultSize, 32960 __unstableStateReducer: stateReducer = state => state, 32961 __unstableInputWidth, 32962 className, 32963 disabled = false, 32964 help, 32965 hideLabelFromVision = false, 32966 id: idProp, 32967 isPressEnterToChange = false, 32968 label, 32969 labelPosition = 'top', 32970 onChange = input_control_noop, 32971 onValidate = input_control_noop, 32972 onKeyDown = input_control_noop, 32973 prefix, 32974 size = 'default', 32975 style, 32976 suffix, 32977 value, 32978 ...props 32979}, ref) { 32980 const [isFocused, setIsFocused] = (0,external_wp_element_namespaceObject.useState)(false); 32981 const id = input_control_useUniqueId(idProp); 32982 const classes = classnames_default()('components-input-control', className); 32983 const draftHookProps = useDraft({ 32984 value, 32985 onBlur: props.onBlur, 32986 onChange 32987 }); 32988 32989 // ARIA descriptions can only contain plain text, so fall back to aria-details if not. 32990 const helpPropName = typeof help === 'string' ? 'aria-describedby' : 'aria-details'; 32991 const helpProp = !!help ? { 32992 [helpPropName]: `${id}__help` 32993 } : {}; 32994 return (0,external_wp_element_namespaceObject.createElement)(base_control, { 32995 className: classes, 32996 help: help, 32997 id: id, 32998 __nextHasNoMarginBottom: true 32999 }, (0,external_wp_element_namespaceObject.createElement)(input_base, { 33000 __next36pxDefaultSize: __next36pxDefaultSize, 33001 __unstableInputWidth: __unstableInputWidth, 33002 disabled: disabled, 33003 gap: 3, 33004 hideLabelFromVision: hideLabelFromVision, 33005 id: id, 33006 isFocused: isFocused, 33007 justify: "left", 33008 label: label, 33009 labelPosition: labelPosition, 33010 prefix: prefix, 33011 size: size, 33012 style: style, 33013 suffix: suffix 33014 }, (0,external_wp_element_namespaceObject.createElement)(input_field, { 33015 ...props, 33016 ...helpProp, 33017 __next36pxDefaultSize: __next36pxDefaultSize, 33018 className: "components-input-control__input", 33019 disabled: disabled, 33020 id: id, 33021 isFocused: isFocused, 33022 isPressEnterToChange: isPressEnterToChange, 33023 onKeyDown: onKeyDown, 33024 onValidate: onValidate, 33025 paddingInlineStart: prefix ? space(2) : undefined, 33026 paddingInlineEnd: suffix ? space(2) : undefined, 33027 ref: ref, 33028 setIsFocused: setIsFocused, 33029 size: size, 33030 stateReducer: stateReducer, 33031 ...draftHookProps 33032 }))); 33033} 33034 33035/** 33036 * InputControl components let users enter and edit text. This is an experimental component 33037 * intended to (in time) merge with or replace `TextControl`. 33038 * 33039 * ```jsx 33040 * import { __experimentalInputControl as InputControl } from '@wordpress/components';
33041 * import { useState } from '@wordpress/compose'; 33042 * 33043 * const Example = () => { 33044 * const [ value, setValue ] = useState( '' ); 33045 * 33046 * return ( 33047 * <InputControl 33048 * value={ value } 33049 * onChange={ ( nextValue ) => setValue( nextValue ?? '' ) } 33050 * /> 33051 * ); 33052 * }; 33053 * ``` 33054 */ 33055const InputControl = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedInputControl); 33056/* harmony default export */ const input_control = (InputControl); 33057 33058;// CONCATENATED MODULE: ./packages/components/build-module/dashicon/index.js 33059 33060/** 33061 * @typedef OwnProps 33062 * 33063 * @property {import('./types').IconKey} icon Icon name 33064 * @property {string} [className] Class name 33065 * @property {number} [size] Size of the icon 33066 */ 33067 33068/** 33069 * Internal dependencies 33070 */ 33071 33072function Dashicon({ 33073 icon, 33074 className, 33075 size = 20, 33076 style = {}, 33077 ...extraProps 33078}) { 33079 const iconClass = ['dashicon', 'dashicons', 'dashicons-' + icon, className].filter(Boolean).join(' '); 33080 33081 // For retro-compatibility reasons (for example if people are overriding icon size with CSS), we add inline styles just if the size is different to the default 33082 const sizeStyles = 33083 // using `!=` to catch both 20 and "20" 33084 // eslint-disable-next-line eqeqeq 33085 20 != size ? { 33086 fontSize: `${size}px`, 33087 width: `${size}px`, 33088 height: `${size}px` 33089 } : {}; 33090 const styles = { 33091 ...sizeStyles, 33092 ...style 33093 }; 33094 return (0,external_wp_element_namespaceObject.createElement)("span", { 33095 className: iconClass, 33096 style: styles, 33097 ...extraProps 33098 }); 33099} 33100/* harmony default export */ const dashicon = (Dashicon); 33101 33102;// CONCATENATED MODULE: ./packages/components/build-module/icon/index.js 33103/** 33104 * External dependencies 33105 */ 33106 33107/** 33108 * WordPress dependencies 33109 */ 33110 33111 33112 33113/** 33114 * Internal dependencies 33115 */ 33116 33117function Icon({ 33118 icon = null, 33119 size = 'string' === typeof icon ? 20 : 24, 33120 ...additionalProps 33121}) { 33122 if ('string' === typeof icon) { 33123 return (0,external_wp_element_namespaceObject.createElement)(dashicon, { 33124 icon: icon, 33125 size: size, 33126 ...additionalProps 33127 }); 33128 } 33129 if ((0,external_wp_element_namespaceObject.isValidElement)(icon) && dashicon === icon.type) { 33130 return (0,external_wp_element_namespaceObject.cloneElement)(icon, { 33131 ...additionalProps 33132 }); 33133 } 33134 if ('function' === typeof icon) { 33135 return (0,external_wp_element_namespaceObject.createElement)(icon, { 33136 size, 33137 ...additionalProps 33138 }); 33139 } 33140 if (icon && (icon.type === 'svg' || icon.type === external_wp_primitives_namespaceObject.SVG)) { 33141 const appliedProps = { 33142 ...icon.props, 33143 width: size, 33144 height: size, 33145 ...additionalProps 33146 }; 33147 return (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.SVG, { 33148 ...appliedProps 33149 }); 33150 } 33151 if ((0,external_wp_element_namespaceObject.isValidElement)(icon)) { 33152 return (0,external_wp_element_namespaceObject.cloneElement)(icon, { 33153 // @ts-ignore Just forwarding the size prop along 33154 size, 33155 ...additionalProps 33156 }); 33157 } 33158 return icon; 33159} 33160/* harmony default export */ const build_module_icon = (Icon); 33161 33162;// CONCATENATED MODULE: ./packages/components/build-module/button/index.js 33163 33164/** 33165 * External dependencies 33166 */ 33167 33168/** 33169 * WordPress dependencies 33170 */ 33171 33172 33173 33174 33175/** 33176 * Internal dependencies 33177 */ 33178 33179 33180 33181 33182const disabledEventsOnDisabledButton = ['onMouseDown', 'onClick']; 33183function button_useDeprecatedProps({ 33184 isDefault, 33185 isPrimary, 33186 isSecondary, 33187 isTertiary, 33188 isLink, 33189 isSmall, 33190 size, 33191 variant, 33192 ...otherProps 33193}) { 33194 let computedSize = size; 33195 let computedVariant = variant; 33196 if (isSmall) { 33197 var _computedSize; 33198 (_computedSize = computedSize) !== null && _computedSize !== void 0 ? _computedSize : computedSize = 'small'; 33199 } 33200 if (isPrimary) { 33201 var _computedVariant; 33202 (_computedVariant = computedVariant) !== null && _computedVariant !== void 0 ? _computedVariant : computedVariant = 'primary'; 33203 } 33204 if (isTertiary) { 33205 var _computedVariant2; 33206 (_computedVariant2 = computedVariant) !== null && _computedVariant2 !== void 0 ? _computedVariant2 : computedVariant = 'tertiary'; 33207 } 33208 if (isSecondary) { 33209 var _computedVariant3; 33210 (_computedVariant3 = computedVariant) !== null && _computedVariant3 !== void 0 ? _computedVariant3 : computedVariant = 'secondary'; 33211 } 33212 if (isDefault) { 33213 var _computedVariant4; 33214 external_wp_deprecated_default()('Button isDefault prop', { 33215 since: '5.4', 33216 alternative: 'variant="secondary"', 33217 version: '6.2' 33218 }); 33219 (_computedVariant4 = computedVariant) !== null && _computedVariant4 !== void 0 ? _computedVariant4 : computedVariant = 'secondary'; 33220 } 33221 if (isLink) { 33222 var _computedVariant5; 33223 (_computedVariant5 = computedVariant) !== null && _computedVariant5 !== void 0 ? _computedVariant5 : computedVariant = 'link'; 33224 } 33225 return { 33226 ...otherProps, 33227 size: computedSize, 33228 variant: computedVariant 33229 }; 33230} 33231function UnforwardedButton(props, ref) { 33232 const { 33233 __next40pxDefaultSize, 33234 isPressed, 33235 isBusy, 33236 isDestructive, 33237 className, 33238 disabled, 33239 icon, 33240 iconPosition = 'left', 33241 iconSize, 33242 showTooltip, 33243 tooltipPosition, 33244 shortcut, 33245 label, 33246 children, 33247 size = 'default', 33248 text, 33249 variant, 33250 __experimentalIsFocusable: isFocusable, 33251 describedBy, 33252 ...buttonOrAnchorProps 33253 } = button_useDeprecatedProps(props); 33254 const { 33255 href, 33256 target, 33257 ...additionalProps 33258 } = 'href' in buttonOrAnchorProps ? buttonOrAnchorProps : { 33259 href: undefined, 33260 target: undefined, 33261 ...buttonOrAnchorProps 33262 }; 33263 const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(Button, 'components-button__description'); 33264 const hasChildren = 'string' === typeof children && !!children || Array.isArray(children) && children?.[0] && children[0] !== null && 33265 // Tooltip should not considered as a child 33266 children?.[0]?.props?.className !== 'components-tooltip'; 33267 const classes = classnames_default()('components-button', className, { 33268 'is-next-40px-default-size': __next40pxDefaultSize, 33269 'is-secondary': variant === 'secondary', 33270 'is-primary': variant === 'primary', 33271 'is-small': size === 'small', 33272 'is-compact': size === 'compact', 33273 'is-tertiary': variant === 'tertiary', 33274 'is-pressed': isPressed, 33275 'is-busy': isBusy, 33276 'is-link': variant === 'link', 33277 'is-destructive': isDestructive, 33278 'has-text': !!icon && hasChildren, 33279 'has-icon': !!icon 33280 }); 33281 const trulyDisabled = disabled && !isFocusable; 33282 const Tag = href !== undefined && !trulyDisabled ? 'a' : 'button'; 33283 const buttonProps = Tag === 'button' ? { 33284 type: 'button', 33285 disabled: trulyDisabled, 33286 'aria-pressed': isPressed 33287 } : {}; 33288 const anchorProps = Tag === 'a' ? { 33289 href, 33290 target 33291 } : {}; 33292 if (disabled && isFocusable) { 33293 // In this case, the button will be disabled, but still focusable and 33294 // perceivable by screen reader users.
33295 buttonProps['aria-disabled'] = true; 33296 anchorProps['aria-disabled'] = true; 33297 for (const disabledEvent of disabledEventsOnDisabledButton) { 33298 additionalProps[disabledEvent] = event => { 33299 if (event) { 33300 event.stopPropagation(); 33301 event.preventDefault(); 33302 } 33303 }; 33304 } 33305 } 33306 33307 // Should show the tooltip if... 33308 const shouldShowTooltip = !trulyDisabled && ( 33309 // An explicit tooltip is passed or... 33310 showTooltip && label || 33311 // There's a shortcut or... 33312 shortcut || 33313 // There's a label and... 33314 !!label && 33315 // The children are empty and... 33316 !children?.length && 33317 // The tooltip is not explicitly disabled. 33318 false !== showTooltip); 33319 const descriptionId = describedBy ? instanceId : undefined; 33320 const describedById = additionalProps['aria-describedby'] || descriptionId; 33321 const commonProps = { 33322 className: classes, 33323 'aria-label': additionalProps['aria-label'] || label, 33324 'aria-describedby': describedById, 33325 ref 33326 }; 33327 const elementChildren = (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, icon && iconPosition === 'left' && (0,external_wp_element_namespaceObject.createElement)(build_module_icon, { 33328 icon: icon, 33329 size: iconSize 33330 }), 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, { 33331 icon: icon, 33332 size: iconSize 33333 }), children); 33334 const element = Tag === 'a' ? (0,external_wp_element_namespaceObject.createElement)("a", { 33335 ...anchorProps, 33336 ...additionalProps, 33337 ...commonProps 33338 }, elementChildren) : (0,external_wp_element_namespaceObject.createElement)("button", { 33339 ...buttonProps, 33340 ...additionalProps, 33341 ...commonProps 33342 }, elementChildren); 33343 33344 // Convert legacy `position` values to be used with the new `placement` prop 33345 let computedPlacement; 33346 // if `tooltipPosition` is defined, compute value to `placement` 33347 if (tooltipPosition !== undefined) { 33348 computedPlacement = positionToPlacement(tooltipPosition); 33349 } 33350 if (!shouldShowTooltip) { 33351 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", { 33352 id: descriptionId 33353 }, describedBy))); 33354 } 33355 return (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, (0,external_wp_element_namespaceObject.createElement)(tooltip, { 33356 text: children?.length && describedBy ? describedBy : label, 33357 shortcut: shortcut, 33358 placement: computedPlacement 33359 }, element), describedBy && (0,external_wp_element_namespaceObject.createElement)(visually_hidden_component, null, (0,external_wp_element_namespaceObject.createElement)("span", { 33360 id: descriptionId 33361 }, describedBy))); 33362} 33363 33364/** 33365 * Lets users take actions and make choices with a single click or tap. 33366 * 33367 * ```jsx 33368 * import { Button } from '@wordpress/components'; 33369 * const Mybutton = () => ( 33370 * <Button 33371 * variant="primary" 33372 * onClick={ handleClick } 33373 * > 33374 * Click here 33375 * </Button> 33376 * ); 33377 * ``` 33378 */ 33379const Button = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedButton); 33380/* harmony default export */ const build_module_button = (Button); 33381 33382;// CONCATENATED MODULE: ./packages/components/build-module/number-control/styles/number-control-styles.js 33383 33384function 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)."; } 33385/** 33386 * External dependencies 33387 */ 33388 33389/** 33390 * Internal dependencies 33391 */ 33392 33393 33394 33395 33396var number_control_styles_ref = true ? { 33397 name: "euqsgg", 33398 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;}" 33399} : 0; 33400const htmlArrowStyles = ({ 33401 hideHTMLArrows 33402}) => { 33403 if (!hideHTMLArrows) { 33404 return ``; 33405 } 33406 return number_control_styles_ref; 33407}; 33408const number_control_styles_Input = /*#__PURE__*/emotion_styled_base_browser_esm(input_control, true ? { 33409 target: "ep09it41" 33410} : 0)(htmlArrowStyles, ";" + ( true ? "" : 0)); 33411const SpinButton = /*#__PURE__*/emotion_styled_base_browser_esm(build_module_button, true ? { 33412 target: "ep09it40" 33413} : 0)("&&&&&{color:", COLORS.theme.accent, ";}" + ( true ? "" : 0)); 33414const smallSpinButtons = /*#__PURE__*/emotion_react_browser_esm_
33414css("width:", space(5), ";min-width:", space(5), ";height:", space(5), ";" + ( true ? "" : 0), true ? "" : 0); 33415const styles = { 33416 smallSpinButtons 33417}; 33418 33419;// CONCATENATED MODULE: ./packages/components/build-module/utils/math.js 33420/** 33421 * Parses and retrieves a number value. 33422 * 33423 * @param {unknown} value The incoming value. 33424 * 33425 * @return {number} The parsed number value. 33426 */ 33427function getNumber(value) { 33428 const number = Number(value); 33429 return isNaN(number) ? 0 : number; 33430} 33431 33432/** 33433 * Safely adds 2 values. 33434 * 33435 * @param {Array<number|string>} args Values to add together. 33436 * 33437 * @return {number} The sum of values. 33438 */ 33439function add(...args) { 33440 return args.reduce( /** @type {(sum:number, arg: number|string) => number} */ 33441 (sum, arg) => sum + getNumber(arg), 0); 33442} 33443 33444/** 33445 * Safely subtracts 2 values. 33446 * 33447 * @param {Array<number|string>} args Values to subtract together. 33448 * 33449 * @return {number} The difference of the values. 33450 */ 33451function subtract(...args) { 33452 return args.reduce( /** @type {(diff:number, arg: number|string, index:number) => number} */ 33453 (diff, arg, index) => { 33454 const value = getNumber(arg); 33455 return index === 0 ? value : diff - value; 33456 }, 0); 33457} 33458 33459/** 33460 * Determines the decimal position of a number value. 33461 * 33462 * @param {number} value The number to evaluate. 33463 * 33464 * @return {number} The number of decimal places. 33465 */ 33466function getPrecision(value) { 33467 const split = (value + '').split('.'); 33468 return split[1] !== undefined ? split[1].length : 0; 33469} 33470 33471/** 33472 * Clamps a value based on a min/max range. 33473 * 33474 * @param {number} value The value. 33475 * @param {number} min The minimum range. 33476 * @param {number} max The maximum range. 33477 * 33478 * @return {number} The clamped value. 33479 */ 33480function math_clamp(value, min, max) { 33481 const baseValue = getNumber(value); 33482 return Math.max(min, Math.min(baseValue, max)); 33483} 33484 33485/** 33486 * Clamps a value based on a min/max range with rounding 33487 * 33488 * @param {number | string} value The value. 33489 * @param {number} min The minimum range. 33490 * @param {number} max The maximum range. 33491 * @param {number} step A multiplier for the value. 33492 * 33493 * @return {number} The rounded and clamped value. 33494 */ 33495function roundClamp(value = 0, min = Infinity, max = Infinity, step = 1) { 33496 const baseValue = getNumber(value); 33497 const stepValue = getNumber(step); 33498 const precision = getPrecision(step); 33499 const rounded = Math.round(baseValue / stepValue) * stepValue; 33500 const clampedValue = math_clamp(rounded, min, max); 33501 return precision ? getNumber(clampedValue.toFixed(precision)) : clampedValue; 33502} 33503 33504;// CONCATENATED MODULE: ./packages/components/build-module/h-stack/utils.js 33505/** 33506 * External dependencies 33507 */ 33508 33509/** 33510 * Internal dependencies 33511 */ 33512 33513 33514const H_ALIGNMENTS = { 33515 bottom: { 33516 align: 'flex-end', 33517 justify: 'center' 33518 }, 33519 bottomLeft: { 33520 align: 'flex-end', 33521 justify: 'flex-start' 33522 }, 33523 bottomRight: { 33524 align: 'flex-end', 33525 justify: 'flex-end' 33526 }, 33527 center: { 33528 align: 'center', 33529 justify: 'center' 33530 }, 33531 edge: { 33532 align: 'center', 33533 justify: 'space-between' 33534 }, 33535 left: { 33536 align: 'center', 33537 justify: 'flex-start' 33538 }, 33539 right: { 33540 align: 'center', 33541 justify: 'flex-end' 33542 }, 33543 stretch: { 33544 align: 'stretch' 33545 }, 33546 top: { 33547 align: 'flex-start', 33548 justify: 'center' 33549 }, 33550 topLeft: { 33551 align: 'flex-start', 33552 justify: 'flex-start' 33553 }, 33554 topRight: { 33555 align: 'flex-start', 33556 justify: 'flex-end' 33557 } 33558}; 33559const V_ALIGNMENTS = { 33560 bottom: { 33561 justify: 'flex-end', 33562 align: 'center' 33563 }, 33564 bottomLeft: { 33565 justify: 'flex-end', 33566 align: 'flex-start' 33567 }, 33568 bottomRight: { 33569 justify: 'flex-end', 33570 align: 'flex-end' 33571 }, 33572 center: { 33573 justify: 'center', 33574 align: 'center' 33575 }, 33576 edge: { 33577 justify: 'space-between', 33578 align: 'center' 33579 }, 33580 left: { 33581 justify: 'center', 33582 align: 'flex-start' 33583 }, 33584 right: { 33585 justify: 'center', 33586 align: 'flex-end' 33587 }, 33588 stretch: { 33589 align: 'stretch' 33590 }, 33591 top: { 33592 justify: 'flex-start', 33593 align: 'center' 33594 }, 33595 topLeft: { 33596 justify: 'flex-start', 33597 align: 'flex-start' 33598 }, 33599 topRight: { 33600 justify: 'flex-start', 33601 align: 'flex-end' 33602 } 33603}; 33604function getAlignmentProps(alignment, direction = 'row') { 33605 if (!isValueDefined(alignment)) { 33606 return {}; 33607 } 33608 const isVertical = direction === 'column'; 33609 const props = isVertical ? V_ALIGNMENTS : H_ALIGNMENTS; 33610 const alignmentProps = alignment in props ? props[alignment] : {
33611 align: alignment 33612 }; 33613 return alignmentProps; 33614} 33615 33616;// CONCATENATED MODULE: ./packages/components/build-module/ui/utils/get-valid-children.js 33617/** 33618 * External dependencies 33619 */ 33620 33621/** 33622 * WordPress dependencies 33623 */ 33624 33625 33626/** 33627 * Gets a collection of available children elements from a React component's children prop. 33628 * 33629 * @param children 33630 * 33631 * @return An array of available children. 33632 */ 33633function getValidChildren(children) { 33634 if (typeof children === 'string') return [children]; 33635 return external_wp_element_namespaceObject.Children.toArray(children).filter(child => (0,external_wp_element_namespaceObject.isValidElement)(child)); 33636} 33637 33638;// CONCATENATED MODULE: ./packages/components/build-module/h-stack/hook.js 33639 33640/** 33641 * External dependencies 33642 */ 33643 33644/** 33645 * Internal dependencies 33646 */ 33647 33648 33649 33650 33651 33652function useHStack(props) { 33653 const { 33654 alignment = 'edge', 33655 children, 33656 direction, 33657 spacing = 2, 33658 ...otherProps 33659 } = useContextSystem(props, 'HStack'); 33660 const align = getAlignmentProps(alignment, direction); 33661 const validChildren = getValidChildren(children); 33662 const clonedChildren = validChildren.map((child, index) => { 33663 const _isSpacer = hasConnectNamespace(child, ['Spacer']); 33664 if (_isSpacer) { 33665 const childElement = child; 33666 const _key = childElement.key || `hstack-${index}`; 33667 return (0,external_wp_element_namespaceObject.createElement)(flex_item_component, { 33668 isBlock: true, 33669 key: _key, 33670 ...childElement.props 33671 }); 33672 } 33673 return child; 33674 }); 33675 const propsForFlex = { 33676 children: clonedChildren, 33677 direction, 33678 justify: 'center', 33679 ...align, 33680 ...otherProps, 33681 gap: spacing 33682 }; 33683 const flexProps = useFlex(propsForFlex); 33684 return flexProps; 33685} 33686 33687;// CONCATENATED MODULE: ./packages/components/build-module/h-stack/component.js 33688 33689/** 33690 * Internal dependencies 33691 */ 33692 33693 33694 33695 33696function UnconnectedHStack(props, forwardedRef) { 33697 const hStackProps = useHStack(props); 33698 return (0,external_wp_element_namespaceObject.createElement)(component, { 33699 ...hStackProps, 33700 ref: forwardedRef 33701 }); 33702} 33703 33704/** 33705 * `HStack` (Horizontal Stack) arranges child elements in a horizontal line. 33706 * 33707 * `HStack` can render anything inside. 33708 * 33709 * ```jsx 33710 * import { 33711 * __experimentalHStack as HStack, 33712 * __experimentalText as Text, 33713 * } from `@wordpress/components`; 33714 * 33715 * function Example() { 33716 * return ( 33717 * <HStack> 33718 * <Text>Code</Text> 33719 * <Text>is</Text> 33720 * <Text>Poetry</Text> 33721 * </HStack> 33722 * ); 33723 * } 33724 * ``` 33725 */ 33726const HStack = contextConnect(UnconnectedHStack, 'HStack'); 33727/* harmony default export */ const h_stack_component = (HStack); 33728 33729;// CONCATENATED MODULE: ./packages/components/build-module/number-control/index.js 33730 33731/** 33732 * External dependencies 33733 */ 33734 33735/** 33736 * WordPress dependencies 33737 */ 33738 33739 33740 33741 33742 33743 33744/** 33745 * Internal dependencies 33746 */ 33747 33748 33749 33750 33751 33752 33753 33754const number_control_noop = () => {}; 33755function UnforwardedNumberControl({ 33756 __unstableStateReducer: stateReducerProp, 33757 className, 33758 dragDirection = 'n', 33759 hideHTMLArrows = false, 33760 spinControls = 'native', 33761 isDragEnabled = true, 33762 isShiftStepEnabled = true, 33763 label, 33764 max = Infinity, 33765 min = -Infinity, 33766 required = false, 33767 shiftStep = 10, 33768 step = 1, 33769 spinFactor = 1, 33770 type: typeProp = 'number', 33771 value: valueProp, 33772 size = 'default', 33773 suffix, 33774 onChange = number_control_noop, 33775 ...props 33776}, forwardedRef) { 33777 if (hideHTMLArrows) { 33778 external_wp_deprecated_default()('wp.components.NumberControl hideHTMLArrows prop ', { 33779 alternative: 'spinControls="none"', 33780 since: '6.2', 33781 version: '6.3' 33782 }); 33783 spinControls = 'none'; 33784 } 33785 const inputRef = (0,external_wp_element_namespaceObject.useRef)(); 33786 const mergedRef = (0,external_wp_compose_namespaceObject.useMergeRefs)([inputRef, forwardedRef]); 33787 const isStepAny = step === 'any'; 33788 const baseStep = isStepAny ? 1 : ensureNumber(step); 33789 const baseSpin = ensureNumber(spinFactor) * baseStep; 33790 const baseValue = roundClamp(0, min, max, baseStep); 33791 const constrainValue = (value, stepOverride) => { 33792 // When step is "any" clamp the value, otherwise round and clamp it. 33793 // Use '' + to convert to string for use in input value attribute. 33794 return isStepAny ? '' + Math.min(max, Math.max(min, ensureNumber(value))) : '' + roundClamp(value, min, max, stepOverride !== null && stepOverride !== void 0 ? stepOverride : baseStep); 33795 }; 33796 const autoComplete = typeProp === 'number' ? 'off' : undefined; 33797 const classes = classnames_default()('components-number-control', className); 33798 const cx = useCx();
33799 const spinButtonClasses = cx(size === 'small' && styles.smallSpinButtons); 33800 const spinValue = (value, direction, event) => { 33801 event?.preventDefault(); 33802 const shift = event?.shiftKey && isShiftStepEnabled; 33803 const delta = shift ? ensureNumber(shiftStep) * baseSpin : baseSpin; 33804 let nextValue = isValueEmpty(value) ? baseValue : value; 33805 if (direction === 'up') { 33806 nextValue = add(nextValue, delta); 33807 } else if (direction === 'down') { 33808 nextValue = subtract(nextValue, delta); 33809 } 33810 return constrainValue(nextValue, shift ? delta : undefined); 33811 }; 33812 33813 /** 33814 * "Middleware" function that intercepts updates from InputControl. 33815 * This allows us to tap into actions to transform the (next) state for 33816 * InputControl. 33817 * 33818 * @return The updated state to apply to InputControl 33819 */ 33820 const numberControlStateReducer = (state, action) => { 33821 const nextState = { 33822 ...state 33823 }; 33824 const { 33825 type, 33826 payload 33827 } = action; 33828 const event = payload.event; 33829 const currentValue = nextState.value; 33830 33831 /** 33832 * Handles custom UP and DOWN Keyboard events 33833 */ 33834 if (type === PRESS_UP || type === PRESS_DOWN) { 33835 nextState.value = spinValue(currentValue, type === PRESS_UP ? 'up' : 'down', event); 33836 } 33837 33838 /** 33839 * Handles drag to update events 33840 */ 33841 if (type === DRAG && isDragEnabled) { 33842 const [x, y] = payload.delta;
33843 const enableShift = payload.shiftKey && isShiftStepEnabled; 33844 const modifier = enableShift ? ensureNumber(shiftStep) * baseSpin : baseSpin; 33845 let directionModifier; 33846 let delta; 33847 switch (dragDirection) { 33848 case 'n': 33849 delta = y; 33850 directionModifier = -1; 33851 break; 33852 case 'e': 33853 delta = x; 33854 directionModifier = (0,external_wp_i18n_namespaceObject.isRTL)() ? -1 : 1; 33855 break; 33856 case 's': 33857 delta = y; 33858 directionModifier = 1; 33859 break; 33860 case 'w': 33861 delta = x; 33862 directionModifier = (0,external_wp_i18n_namespaceObject.isRTL)() ? 1 : -1; 33863 break; 33864 } 33865 if (delta !== 0) { 33866 delta = Math.ceil(Math.abs(delta)) * Math.sign(delta); 33867 const distance = delta * modifier * directionModifier; 33868 nextState.value = constrainValue( 33869 // @ts-expect-error TODO: Investigate if it's ok for currentValue to be undefined 33870 add(currentValue, distance), enableShift ? modifier : undefined); 33871 } 33872 } 33873 33874 /** 33875 * Handles commit (ENTER key press or blur) 33876 */ 33877 if (type === PRESS_ENTER || type === COMMIT) { 33878 const applyEmptyValue = required === false && currentValue === ''; 33879 nextState.value = applyEmptyValue ? currentValue : 33880 // @ts-expect-error TODO: Investigate if it's ok for currentValue to be undefined 33881 constrainValue(currentValue); 33882 } 33883 return nextState; 33884 }; 33885 const buildSpinButtonClickHandler = direction => event => onChange(String(spinValue(valueProp, direction, event)), { 33886 // Set event.target to the <input> so that consumers can use 33887 // e.g. event.target.validity. 33888 event: { 33889 ...event, 33890 target: inputRef.current 33891 } 33892 }); 33893 return (0,external_wp_element_namespaceObject.createElement)(number_control_styles_Input, { 33894 autoComplete: autoComplete, 33895 inputMode: "numeric", 33896 ...props, 33897 className: classes, 33898 dragDirection: dragDirection, 33899 hideHTMLArrows: spinControls !== 'native', 33900 isDragEnabled: isDragEnabled, 33901 label: label, 33902 max: max, 33903 min: min, 33904 ref: mergedRef, 33905 required: required, 33906 step: step, 33907 type: typeProp 33908 // @ts-expect-error TODO: Resolve discrepancy between `value` types in InputControl based components 33909 , 33910 value: valueProp, 33911 __unstableStateReducer: (state, action) => { 33912 var _stateReducerProp; 33913 const baseState = numberControlStateReducer(state, action); 33914 return (_stateReducerProp = stateReducerProp?.(baseState, action)) !== null && _stateReducerProp !== void 0 ? _stateReducerProp : baseState; 33915 }, 33916 size: size, 33917 suffix: spinControls === 'custom' ? (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, suffix, (0,external_wp_element_namespaceObject.createElement)(spacer_component, { 33918 marginBottom: 0, 33919 marginRight: 2 33920 }, (0,external_wp_element_namespaceObject.createElement)(h_stack_component, { 33921 spacing: 1 33922 }, (0,external_wp_element_namespaceObject.createElement)(SpinButton, { 33923 className: spinButtonClasses, 33924 icon: library_plus, 33925 isSmall: true, 33926 "aria-hidden": "true", 33927 "aria-label": (0,external_wp_i18n_namespaceObject.__)('Increment'), 33928 tabIndex: -1, 33929 onClick: buildSpinButtonClickHandler('up') 33930 }), (0,external_wp_element_namespaceObject.createElement)(SpinButton, { 33931 className: spinButtonClasses, 33932 icon: library_reset, 33933 isSmall: true, 33934 "aria-hidden": "true", 33935 "aria-label": (0,external_wp_i18n_namespaceObject.__)('Decrement'), 33936 tabIndex: -1, 33937 onClick: buildSpinButtonClickHandler('down') 33938 })))) : suffix, 33939 onChange: onChange 33940 }); 33941} 33942const NumberControl = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedNumberControl); 33943/* harmony default export */ const number_control = (NumberControl); 33944 33945;// CONCATENATED MODULE: ./packages/components/build-module/angle-picker-control/styles/angle-picker-control-styles.js 33946 33947function 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)."; } 33948/** 33949 * External dependencies 33950 */ 33951
33952/** 33953 * Internal dependencies 33954 */ 33955 33956 33957 33958 33959 33960const CIRCLE_SIZE = 32; 33961const INNER_CIRCLE_SIZE = 6; 33962const deprecatedBottomMargin = ({ 33963 __nextHasNoMarginBottom 33964}) => { 33965 return !__nextHasNoMarginBottom ? /*#__PURE__*/emotion_react_browser_esm_css("margin-bottom:", space(2), ";" + ( true ? "" : 0), true ? "" : 0) : ''; 33966}; 33967const angle_picker_control_styles_Root = /*#__PURE__*/emotion_styled_base_browser_esm(flex_component, true ? { 33968 target: "eln3bjz4" 33969} : 0)(deprecatedBottomMargin, ";" + ( true ? "" : 0)); 33970const CircleRoot = emotion_styled_base_browser_esm("div", true ? { 33971 target: "eln3bjz3" 33972} : 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;:active{cursor:grabbing;}" + ( true ? "" : 0)); 33973const CircleIndicatorWrapper = emotion_styled_base_browser_esm("div", true ? { 33974 target: "eln3bjz2" 33975} : 0)( true ? { 33976 name: "1r307gh", 33977 styles: "box-sizing:border-box;position:relative;width:100%;height:100%;:focus-visible{outline:none;}" 33978} : 0); 33979const CircleIndicator = emotion_styled_base_browser_esm("div", true ? { 33980 target: "eln3bjz1" 33981} : 0)("background:", COLORS.theme.accent, ";border-radius:50%;box-sizing:border-box;display:block;left:50%;top:4px;transform:translateX( -50% );position:absolute;width:", INNER_CIRCLE_SIZE, "px;height:", INNER_CIRCLE_SIZE, "px;" + ( true ? "" : 0)); 33982const UnitText = /*#__PURE__*/emotion_styled_base_browser_esm(text_component, true ? { 33983 target: "eln3bjz0" 33984} : 0)("color:", COLORS.theme.accent, ";margin-right:", space(3), ";" + ( true ? "" : 0)); 33985 33986;// CONCATENATED MODULE: ./packages/components/build-module/angle-picker-control/angle-circle.js 33987 33988/** 33989 * WordPress dependencies 33990 */ 33991 33992 33993 33994/** 33995 * Internal dependencies 33996 */ 33997 33998function AngleCircle({ 33999 value, 34000 onChange, 34001 ...props 34002}) { 34003 const angleCircleRef = (0,external_wp_element_namespaceObject.useRef)(null); 34004 const angleCircleCenter = (0,external_wp_element_namespaceObject.useRef)(); 34005 const previousCursorValue = (0,external_wp_element_namespaceObject.useRef)(); 34006 const setAngleCircleCenter = () => { 34007 if (angleCircleRef.current === null) { 34008 return; 34009 } 34010 const rect = angleCircleRef.current.getBoundingClientRect(); 34011 angleCircleCenter.current = { 34012 x: rect.x + rect.width / 2, 34013 y: rect.y + rect.height / 2 34014 }; 34015 }; 34016 const changeAngleToPosition = event => { 34017 if (event === undefined) { 34018 return; 34019 } 34020 34021 // Prevent (drag) mouse events from selecting and accidentally 34022 // triggering actions from other elements. 34023 event.preventDefault();
34024 // Input control needs to lose focus and by preventDefault above, it doesn't. 34025 event.target?.focus(); 34026 if (angleCircleCenter.current !== undefined && onChange !== undefined) { 34027 const { 34028 x: centerX, 34029 y: centerY 34030 } = angleCircleCenter.current; 34031 onChange(getAngle(centerX, centerY, event.clientX, event.clientY)); 34032 } 34033 }; 34034 const { 34035 startDrag, 34036 isDragging 34037 } = (0,external_wp_compose_namespaceObject.__experimentalUseDragging)({ 34038 onDragStart: event => { 34039 setAngleCircleCenter(); 34040 changeAngleToPosition(event); 34041 }, 34042 onDragMove: changeAngleToPosition, 34043 onDragEnd: changeAngleToPosition 34044 }); 34045 (0,external_wp_element_namespaceObject.useEffect)(() => { 34046 if (isDragging) { 34047 if (previousCursorValue.current === undefined) { 34048 previousCursorValue.current = document.body.style.cursor; 34049 } 34050 document.body.style.cursor = 'grabbing'; 34051 } else { 34052 document.body.style.cursor = previousCursorValue.current || ''; 34053 previousCursorValue.current = undefined; 34054 } 34055 }, [isDragging]); 34056 return (0,external_wp_element_namespaceObject.createElement)(CircleRoot, { 34057 ref: angleCircleRef, 34058 onMouseDown: startDrag, 34059 className: "components-angle-picker-control__angle-circle", 34060 ...props 34061 }, (0,external_wp_element_namespaceObject.createElement)(CircleIndicatorWrapper, { 34062 style: value ? { 34063 transform: `rotate(${value}deg)` 34064 } : undefined, 34065 className: "components-angle-picker-control__angle-circle-indicator-wrapper", 34066 tabIndex: -1 34067 }, (0,external_wp_element_namespaceObject.createElement)(CircleIndicator, { 34068 className: "components-angle-picker-control__angle-circle-indicator" 34069 }))); 34070} 34071function getAngle(centerX, centerY, pointX, pointY) { 34072 const y = pointY - centerY; 34073 const x = pointX - centerX; 34074 const angleInRadians = Math.atan2(y, x); 34075 const angleInDeg = Math.round(angleInRadians * (180 / Math.PI)) + 90; 34076 if (angleInDeg < 0) { 34077 return 360 + angleInDeg; 34078 } 34079 return angleInDeg; 34080} 34081/* harmony default export */ const angle_circle = (AngleCircle); 34082 34083;// CONCATENATED MODULE: ./packages/components/build-module/angle-picker-control/index.js 34084 34085/** 34086 * External dependencies 34087 */ 34088 34089 34090 34091/** 34092 * WordPress dependencies 34093 */ 34094 34095 34096 34097 34098/** 34099 * Internal dependencies 34100 */ 34101 34102 34103 34104 34105 34106function UnforwardedAnglePickerControl(props, ref) { 34107 const { 34108 __nextHasNoMarginBottom = false, 34109 className, 34110 label = (0,external_wp_i18n_namespaceObject.__)('Angle'), 34111 onChange, 34112 value, 34113 ...restProps 34114 } = props; 34115 if (!__nextHasNoMarginBottom) { 34116 external_wp_deprecated_default()('Bottom margin styles for wp.components.AnglePickerControl', { 34117 since: '6.1', 34118 version: '6.4', 34119 hint: 'Set the `__nextHasNoMarginBottom` prop to true to start opting into the new styles, which will become the default in a future version.' 34120 }); 34121 } 34122 const handleOnNumberChange = unprocessedValue => { 34123 if (onChange === undefined) { 34124 return; 34125 } 34126 const inputValue = unprocessedValue !== undefined && unprocessedValue !== '' ? parseInt(unprocessedValue, 10) : 0; 34127 onChange(inputValue); 34128 }; 34129 const classes = classnames_default()('components-angle-picker-control', className); 34130 const unitText = (0,external_wp_element_namespaceObject.createElement)(UnitText, null, "\xB0"); 34131 const [prefixedUnitText, suffixedUnitText] = (0,external_wp_i18n_namespaceObject.isRTL)() ? [unitText, null] : [null, unitText]; 34132 return (0,external_wp_element_namespaceObject.createElement)(angle_picker_control_styles_Root, { 34133 ...restProps, 34134 ref: ref, 34135 __nextHasNoMarginBottom: __nextHasNoMarginBottom, 34136 className: classes, 34137 gap: 2 34138 }, (0,external_wp_element_namespaceObject.createElement)(flex_block_component, null, (0,external_wp_element_namespaceObject.createElement)(number_control, { 34139 label: label, 34140 className: "components-angle-picker-control__input-field", 34141 max: 360, 34142 min: 0, 34143 onChange: handleOnNumberChange, 34144 size: "__unstable-large", 34145 step: "1", 34146 value: value, 34147 spinControls: "none", 34148 prefix: prefixedUnitText, 34149 suffix: suffixedUnitText 34150 })), (0,external_wp_element_namespaceObject.createElement)(spacer_
34150component, { 34151 marginBottom: "1", 34152 marginTop: "auto" 34153 }, (0,external_wp_element_namespaceObject.createElement)(angle_circle, { 34154 "aria-hidden": "true", 34155 value: value, 34156 onChange: onChange 34157 }))); 34158} 34159 34160/** 34161 * `AnglePickerControl` is a React component to render a UI that allows users to 34162 * pick an angle. Users can choose an angle in a visual UI with the mouse by 34163 * dragging an angle indicator inside a circle or by directly inserting the 34164 * desired angle in a text field. 34165 * 34166 * ```jsx 34167 * import { useState } from '@wordpress/element'; 34168 * import { AnglePickerControl } from '@wordpress/components'; 34169 * 34170 * function Example() { 34171 * const [ angle, setAngle ] = useState( 0 ); 34172 * return ( 34173 * <AnglePickerControl 34174 * value={ angle } 34175 * onChange={ setAngle } 34176 * __nextHasNoMarginBottom 34177 * </> 34178 * ); 34179 * } 34180 * ``` 34181 */ 34182const AnglePickerControl = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedAnglePickerControl); 34183/* harmony default export */ const angle_picker_control = (AnglePickerControl); 34184 34185// EXTERNAL MODULE: ./node_modules/remove-accents/index.js 34186var remove_accents = __webpack_require__(4793); 34187var remove_accents_default = /*#__PURE__*/__webpack_require__.n(remove_accents); 34188;// CONCATENATED MODULE: external ["wp","richText"] 34189const external_wp_richText_namespaceObject = window["wp"]["richText"]; 34190;// CONCATENATED MODULE: external ["wp","a11y"] 34191const external_wp_a11y_namespaceObject = window["wp"]["a11y"]; 34192;// CONCATENATED MODULE: external ["wp","keycodes"] 34193const external_wp_keycodes_namespaceObject = window["wp"]["keycodes"]; 34194;// CONCATENATED MODULE: ./packages/components/build-module/utils/strings.js 34195/** 34196 * External dependencies 34197 */ 34198 34199const ALL_UNICODE_DASH_CHARACTERS = new RegExp(`[${[ 34200// - (hyphen-minus) 34201'\u002d', 34202// ~ (tilde) 34203'\u007e', 34204//  (soft hyphen) 34205'\u00ad', 34206// Ö (armenian hyphen) 34207'\u058a', 34208// Ö¾ (hebrew punctuation maqaf) 34209'\u05be', 34210// á (canadian syllabics hyphen) 34211'\u1400', 34212// á (mongolian todo soft hyphen) 34213'\u1806', 34214// â (hyphen) 34215'\u2010', 34216// non-breaking hyphen) 34217'\u2011', 34218// â (figure dash) 34219'\u2012', 34220// â (en dash) 34221'\u2013', 34222// â (em dash) 34223'\u2014', 34224// â (horizontal bar) 34225'\u2015', 34226// â (swung dash) 34227'\u2053', 34228// superscript minus) 34229'\u207b', 34230// subscript minus) 34231'\u208b', 34232// â (minus sign) 34233'\u2212', 34234// ⸠(double oblique hyphen) 34235'\u2e17', 34236// ⸺ (two-em dash) 34237'\u2e3a', 34238// ⸻ (three-em dash) 34239'\u2e3b', 34240// ã (wave dash) 34241'\u301c', 34242// ã° (wavy dash) 34243'\u3030', 34244// ã (katakana-hiragana double hyphen) 34245'\u30a0', 34246// ︱ (presentation form for vertical em dash) 34247'\ufe31', 34248// ︲ (presentation form for vertical en dash) 34249'\ufe32', 34250// ï¹ (small em dash) 34251'\ufe58', 34252// ï¹£ (small hyphen-minus) 34253'\ufe63', 34254// ï¼ (fullwidth hyphen-minus) 34255'\uff0d'].join('')}]`, 'g'); 34256const normalizeTextString = value => { 34257 return remove_accents_default()(value).toLocaleLowerCase().replace(ALL_UNICODE_DASH_CHARACTERS, '-'); 34258}; 34259 34260/** 34261 * Escapes the RegExp special characters. 34262 * 34263 * @param {string} string Input string. 34264 * 34265 * @return {string} Regex-escaped string. 34266 */ 34267function escapeRegExp(string) { 34268 return string.replace(/[\\^$.*+?()[\]{}|]/g, '\\$&'); 34269} 34270 34271;// CONCATENATED MODULE: ./packages/components/build-module/autocomplete/get-default-use-items.js 34272/** 34273 * External dependencies 34274 */ 34275 34276 34277/** 34278 * WordPress dependencies 34279 */ 34280 34281 34282 34283/** 34284 * Internal dependencies 34285 */ 34286 34287function filterOptions(search, options = [], maxResults = 10) { 34288 const filtered = []; 34289 for (let i = 0; i < options.length; i++) { 34290 const option = options[i]; 34291 34292 // Merge label into keywords. 34293 let { 34294 keywords = [] 34295 } = option; 34296 if ('string' === typeof option.label) { 34297 keywords = [...keywords, option.label]; 34298 } 34299 const isMatch = keywords.some(keyword => search.test(remove_accents_default()(keyword))); 34300 if (!isMatch) { 34301 continue; 34302 } 34303 filtered.push(option); 34304 34305 // Abort early if max reached. 34306 if (filtered.length === maxResults) { 34307 break; 34308 } 34309 } 34310 return filtered; 34311} 34312function getDefaultUseItems(autocompleter) { 34313 return filterValue => { 34314 const [items, setItems] = (0,external_wp_element_namespaceObject.useState)([]); 34315 /* 34316 * We support both synchronous and asynchronous retrieval of completer options 34317 * but internally treat all as async so we maintain a single, consistent code path. 34318 * 34319 * Because networks can be slow, and the internet is wonderfully unpredictable, 34320 * we don't want two promises updating the state at once. This ensures that only 34321 * the most recent promise will act on `optionsData`. This doesn't use the state 34322 * because `setState` is batched, and so there's no guarantee that setting 34323 * `activePromise` in the state would result in it actually being in `this.state` 34324 * before the promise resolves and we check to see if this is the active promise or not. 34325 */ 34326 (0,external_wp_element_namespaceObject.useLayoutEffect)(() => { 34327 const { 34328 options, 34329 isDebounced 34330 } = autocompleter; 34331 const loadOptions = (0,external_wp_compose_namespaceObject.debounce)(() => { 34332 const promise = Promise.resolve(typeof options === 'function' ? options(filterValue) : options).then(optionsData => { 34333 if (promise.canceled) { 34334 return; 34335 }
vendor: 11,410 bytes, lines 34336-34729
34336 const keyedOptions = optionsData.map((optionData, optionIndex) => ({ 34337 key: `${autocompleter.name}-${optionIndex}`, 34338 value: optionData, 34339 label: autocompleter.getOptionLabel(optionData), 34340 keywords: autocompleter.getOptionKeywords ? autocompleter.getOptionKeywords(optionData) : [], 34341 isDisabled: autocompleter.isOptionDisabled ? autocompleter.isOptionDisabled(optionData) : false 34342 })); 34343 34344 // Create a regular expression to filter the options. 34345 const search = new RegExp('(?:\\b|\\s|^)' + escapeRegExp(filterValue), 'i'); 34346 setItems(filterOptions(search, keyedOptions)); 34347 }); 34348 return promise; 34349 }, isDebounced ? 250 : 0); 34350 const promise = loadOptions(); 34351 return () => { 34352 loadOptions.cancel(); 34353 if (promise) { 34354 promise.canceled = true; 34355 } 34356 }; 34357 }, [filterValue]); 34358 return [items]; 34359 }; 34360} 34361 34362;// CONCATENATED MODULE: ./packages/components/node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.esm.js 34363 34364 34365 34366 34367 34368 34369/** 34370 * Provides data to position an inner element of the floating element so that it 34371 * appears centered to the reference element. 34372 * This wraps the core `arrow` middleware to allow React refs as the element. 34373 * @see https://floating-ui.com/docs/arrow 34374 */ 34375const floating_ui_react_dom_esm_arrow = options => { 34376 function isRef(value) { 34377 return {}.hasOwnProperty.call(value, 'current'); 34378 } 34379 return { 34380 name: 'arrow', 34381 options, 34382 fn(state) { 34383 const { 34384 element, 34385 padding 34386 } = typeof options === 'function' ? options(state) : options; 34387 if (element && isRef(element)) { 34388 if (element.current != null) { 34389 return arrow({ 34390 element: element.current, 34391 padding 34392 }).fn(state); 34393 } 34394 return {}; 34395 } else if (element) { 34396 return arrow({ 34397 element, 34398 padding 34399 }).fn(state); 34400 } 34401 return {}; 34402 } 34403 }; 34404}; 34405 34406var index = typeof document !== 'undefined' ? external_React_.useLayoutEffect : external_React_.useEffect; 34407 34408// Fork of `fast-deep-equal` that only does the comparisons we need and compares 34409// functions 34410function deepEqual(a, b) { 34411 if (a === b) { 34412 return true; 34413 } 34414 if (typeof a !== typeof b) { 34415 return false; 34416 } 34417 if (typeof a === 'function' && a.toString() === b.toString()) { 34418 return true; 34419 } 34420 let length, i, keys; 34421 if (a && b && typeof a == 'object') { 34422 if (Array.isArray(a)) { 34423 length = a.length; 34424 if (length != b.length) return false; 34425 for (i = length; i-- !== 0;) { 34426 if (!deepEqual(a[i], b[i])) { 34427 return false; 34428 } 34429 } 34430 return true; 34431 } 34432 keys = Object.keys(a); 34433 length = keys.length; 34434 if (length !== Object.keys(b).length) { 34435 return false; 34436 } 34437 for (i = length; i-- !== 0;) { 34438 if (!{}.hasOwnProperty.call(b, keys[i])) { 34439 return false; 34440 } 34441 } 34442 for (i = length; i-- !== 0;) { 34443 const key = keys[i]; 34444 if (key === '_owner' && a.$$typeof) { 34445 continue; 34446 } 34447 if (!deepEqual(a[key], b[key])) { 34448 return false; 34449 } 34450 } 34451 return true; 34452 } 34453 return a !== a && b !== b; 34454} 34455 34456function getDPR(element) { 34457 if (typeof window === 'undefined') { 34458 return 1; 34459 } 34460 const win = element.ownerDocument.defaultView || window; 34461 return win.devicePixelRatio || 1; 34462} 34463 34464function floating_ui_react_dom_esm_roundByDPR(element, value) { 34465 const dpr = getDPR(element); 34466 return Math.round(value * dpr) / dpr; 34467} 34468 34469function useLatestRef(value) { 34470 const ref = external_React_.useRef(value); 34471 index(() => { 34472 ref.current = value; 34473 }); 34474 return ref; 34475} 34476 34477/** 34478 * Provides data to position a floating element. 34479 * @see https://floating-ui.com/docs/react 34480 */ 34481function useFloating(options) { 34482 if (options === void 0) { 34483 options = {}; 34484 } 34485 const { 34486 placement = 'bottom', 34487 strategy = 'absolute', 34488 middleware = [], 34489 platform, 34490 elements: { 34491 reference: externalReference, 34492 floating: externalFloating 34493 } = {}, 34494 transform = true, 34495 whileElementsMounted, 34496 open 34497 } = options; 34498 const [data, setData] = external_React_.useState({ 34499 x: 0, 34500 y: 0, 34501 strategy, 34502 placement, 34503 middlewareData: {}, 34504 isPositioned: false 34505 }); 34506 const [latestMiddleware, setLatestMiddleware] = external_React_.useState(middleware); 34507 if (!deepEqual(latestMiddleware, middleware)) { 34508 setLatestMiddleware(middleware); 34509 } 34510 const [_reference, _setReference] = external_React_.useState(null); 34511 const [_floating, _setFloating] = external_React_.useState(null); 34512 const setReference = external_React_.useCallback(node => { 34513 if (node != referenceRef.current) { 34514 referenceRef.current = node; 34515 _setReference(node); 34516 } 34517 }, [_setReference]); 34518 const setFloating = external_React_.useCallback(node => { 34519 if (node !== floatingRef.current) { 34520 floatingRef.current = node; 34521 _setFloating(node); 34522 } 34523 }, [_setFloating]); 34524 const referenceEl = externalReference || _reference; 34525 const floatingEl = externalFloating || _floating; 34526 const referenceRef = external_React_.useRef(null); 34527 const floatingRef = external_React_.useRef(null); 34528 const dataRef = external_React_.useRef(data); 34529 const whileElementsMountedRef = useLatestRef(whileElementsMounted); 34530 const platformRef = useLatestRef(platform); 34531 const update = external_React_.useCallback(() => { 34532 if (!referenceRef.current || !floatingRef.current) { 34533 return; 34534 } 34535 const config = { 34536 placement, 34537 strategy, 34538 middleware: latestMiddleware 34539 }; 34540 if (platformRef.current) { 34541 config.platform = platformRef.current; 34542 } 34543 floating_ui_dom_computePosition(referenceRef.current, floatingRef.current, config).then(data => { 34544 const fullData = { 34545 ...data, 34546 isPositioned: true 34547 }; 34548 if (isMountedRef.current && !deepEqual(dataRef.current, fullData)) { 34549 dataRef.current = fullData; 34550 external_ReactDOM_namespaceObject.flushSync(() => { 34551 setData(fullData); 34552 }); 34553 } 34554 }); 34555 }, [latestMiddleware, placement, strategy, platformRef]); 34556 index(() => { 34557 if (open === false && dataRef.current.isPositioned) { 34558 dataRef.current.isPositioned = false; 34559 setData(data => ({ 34560 ...data, 34561 isPositioned: false 34562 })); 34563 } 34564 }, [open]); 34565 const isMountedRef = external_React_.useRef(false); 34566 index(() => { 34567 isMountedRef.current = true; 34568 return () => { 34569 isMountedRef.current = false; 34570 }; 34571 }, []); 34572 index(() => { 34573 if (referenceEl) referenceRef.current = referenceEl; 34574 if (floatingEl) floatingRef.current = floatingEl; 34575 if (referenceEl && floatingEl) { 34576 if (whileElementsMountedRef.current) { 34577 return whileElementsMountedRef.current(referenceEl, floatingEl, update); 34578 } else { 34579 update(); 34580 } 34581 } 34582 }, [referenceEl, floatingEl, update, whileElementsMountedRef]); 34583 const refs = external_React_.useMemo(() => ({ 34584 reference: referenceRef, 34585 floating: floatingRef, 34586 setReference, 34587 setFloating 34588 }), [setReference, setFloating]); 34589 const elements = external_React_.useMemo(() => ({ 34590 reference: referenceEl, 34591 floating: floatingEl 34592 }), [referenceEl, floatingEl]); 34593 const floatingStyles = external_React_.useMemo(() => { 34594 const initialStyles = { 34595 position: strategy, 34596 left: 0, 34597 top: 0 34598 }; 34599 if (!elements.floating) { 34600 return initialStyles; 34601 } 34602 const x = floating_ui_react_dom_esm_roundByDPR(elements.floating, data.x); 34603 const y = floating_ui_react_dom_esm_roundByDPR(elements.floating, data.y); 34604 if (transform) { 34605 return { 34606 ...initialStyles, 34607 transform: "translate(" + x + "px, " + y + "px)", 34608 ...(getDPR(elements.floating) >= 1.5 && { 34609 willChange: 'transform' 34610 }) 34611 }; 34612 } 34613 return { 34614 position: strategy, 34615 left: x, 34616 top: y 34617 }; 34618 }, [strategy, transform, elements.floating, data.x, data.y]); 34619 return external_React_.useMemo(() => ({ 34620 ...data, 34621 update, 34622 refs, 34623 elements, 34624 floatingStyles 34625 }), [data, update, refs, elements, floatingStyles]); 34626} 34627 34628 34629 34630;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/utils/reduced-motion/use-reduced-motion.mjs 34631 34632 34633 34634 34635 34636/** 34637 * A hook that returns `true` if we should be using reduced motion based on the current device's Reduced Motion setting. 34638 * 34639 * This can be used to implement changes to your UI based on Reduced Motion. For instance, replacing motion-sickness inducing 34640 * `x`/`y` animations with `opacity`, disabling the autoplay of background videos, or turning off parallax motion. 34641 * 34642 * It will actively respond to changes and re-render your components with the latest setting. 34643 * 34644 * ```jsx 34645 * export function Sidebar({ isOpen }) { 34646 * const shouldReduceMotion = useReducedMotion() 34647 * const closedX = shouldReduceMotion ? 0 : "-100%" 34648 * 34649 * return ( 34650 * <motion.div animate={{ 34651 * opacity: isOpen ? 1 : 0, 34652 * x: isOpen ? 0 : closedX 34653 * }} /> 34654 * ) 34655 * } 34656 * ``` 34657 * 34658 * @return boolean 34659 * 34660 * @public 34661 */ 34662function useReducedMotion() { 34663 /** 34664 * Lazy initialisation of prefersReducedMotion 34665 */ 34666 !hasReducedMotionListener.current && initPrefersReducedMotion(); 34667 const [shouldReduceMotion] = (0,external_React_.useState)(prefersReducedMotion.current); 34668 if (false) {} 34669 /** 34670 * TODO See if people miss automatically updating shouldReduceMotion setting 34671 */ 34672 return shouldReduceMotion; 34673} 34674 34675 34676 34677;// CONCATENATED MODULE: ./packages/icons/build-module/library/close.js 34678 34679/** 34680 * WordPress dependencies 34681 */ 34682 34683const close_close = (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.SVG, { 34684 xmlns: "http://www.w3.org/2000/svg", 34685 viewBox: "0 0 24 24" 34686}, (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.Path, { 34687 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" 34688})); 34689/* harmony default export */ const library_close = (close_close); 34690 34691;// CONCATENATED MODULE: ./packages/components/build-module/scroll-lock/index.js 34692/** 34693 * WordPress dependencies 34694 */ 34695 34696 34697/* 34698 * Setting `overflow: hidden` on html and body elements resets body scroll in iOS. 34699 * Save scroll top so we can restore it after locking scroll. 34700 * 34701 * NOTE: It would be cleaner and possibly safer to find a localized solution such 34702 * as preventing default on certain touchmove events. 34703 */ 34704let previousScrollTop = 0; 34705function setLocked(locked) { 34706 const scrollingElement = document.scrollingElement || document.body; 34707 if (locked) { 34708 previousScrollTop = scrollingElement.scrollTop; 34709 } 34710 const methodName = locked ? 'add' : 'remove'; 34711 scrollingElement.classList[methodName]('lockscroll'); 34712 34713 // Adding the class to the document element seems to be necessary in iOS. 34714 document.documentElement.classList[methodName]('lockscroll'); 34715 if (!locked) { 34716 scrollingElement.scrollTop = previousScrollTop; 34717 } 34718} 34719let lockCounter = 0; 34720 34721/** 34722 * ScrollLock is a content-free React component for declaratively preventing 34723 * scroll bleed from modal UI to the page body. This component applies a 34724 * `lockscroll` class to the `document.documentElement` and 34725 * `document.scrollingElement` elements to stop the body from scrolling. When it 34726 * is present, the lock is applied. 34727 * 34728 * ```jsx 34729 * import { ScrollLock, Button } from '@wordpress/components';
34730 * import { useState } from '@wordpress/element'; 34731 * 34732 * const MyScrollLock = () => { 34733 * const [ isScrollLocked, setIsScrollLocked ] = useState( false ); 34734 * 34735 * const toggleLock = () => { 34736 * setIsScrollLocked( ( locked ) => ! locked ) ); 34737 * }; 34738 * 34739 * return ( 34740 * <div> 34741 * <Button variant="secondary" onClick={ toggleLock }> 34742 * Toggle scroll lock 34743 * </Button> 34744 * { isScrollLocked && <ScrollLock /> } 34745 * <p> 34746 * Scroll locked: 34747 * <strong>{ isScrollLocked ? 'Yes' : 'No' }</strong> 34748 * </p> 34749 * </div> 34750 * ); 34751 * }; 34752 * ``` 34753 */ 34754function ScrollLock() { 34755 (0,external_wp_element_namespaceObject.useEffect)(() => { 34756 if (lockCounter === 0) { 34757 setLocked(true); 34758 } 34759 ++lockCounter; 34760 return () => { 34761 if (lockCounter === 1) { 34762 setLocked(false); 34763 } 34764 --lockCounter; 34765 }; 34766 }, []); 34767 return null; 34768} 34769/* harmony default export */ const scroll_lock = (ScrollLock); 34770 34771;// CONCATENATED MODULE: ./node_modules/proxy-compare/dist/index.modern.js 34772const index_modern_e=Symbol(),index_modern_t=Symbol(),index_modern_r=Symbol();let index_modern_n=(e,t)=>new Proxy(e,t);const index_modern_o=Object.getPrototypeOf,index_modern_s=new WeakMap,index_modern_c=e=>e&&(index_modern_s.has(e)?index_modern_s.get(e):index_modern_o(e)===Object.prototype||index_modern_o(e)===Array.prototype),index_modern_l=e=>"object"==typeof e&&null!==e,index_modern_a=new WeakMap,index_modern_f=e=>e[index_modern_r]||e,index_modern_i=(s,l,p)=>{if(!index_modern_c(s))return s;const y=index_modern_f(s),u=(e=>Object.isFrozen(e)||Object.values(Object.getOwnPropertyDescriptors(e)).some(e=>!e.writable))(y);let g=p&&p.get(y);return g&&g[1].f===u||(g=((n,o)=>{const s={f:o};let c=!1;const l=(t,r)=>{if(!c){let o=s.a.get(n);o||(o=new Set,s.a.set(n,o)),r&&o.has(index_modern_e)||o.add(t)}},a={get:(e,t)=>t===index_modern_r?n:(l(t),index_modern_i(e[t],s.a,s.c)),has:(e,r)=>r===index_modern_t?(c=!0,s.a.delete(n),!0):(l(r),r in e),getOwnPropertyDescriptor:(e,t)=>(l(t,!0),Object.getOwnPropertyDescriptor(e,t)),ownKeys:t=>(l(index_modern_e),Reflect.ownKeys(t))};return o&&(a.set=a.deleteProperty=()=>!1),[a,s]})(y,u),g[1].p=index_modern_n(u?(e=>{let t=index_modern_a.get(e);if(!t){if(Array.isArray(e))t=Array.from(e);else{const r=Object.getOwnPropertyDescriptors(e);Object.values(r).forEach(e=>{e.configurable=!0}),t=Object.create(index_modern_o(e),r)}index_modern_a.set(e,t)}return t})(y):y,g[0]),p&&p.set(y,g)),g[1].a=l,g[1].c=p,g[1].p},index_modern_p=(e,t)=>{const r=Reflect.ownKeys(e),n=Reflect.ownKeys(t);return r.length!==n.length||r.some((e,t)=>e!==n[t])},index_modern_y=(t,r,n,o)=>{if(Object.is(t,r))return!1;if(!index_modern_l(t)||!index_modern_l(r))return!0;const s=n.get(index_modern_f(t));if(!s)return!0;if(o){const e=o.get(t);if(e&&e.n===r)return e.g;o.set(t,{n:r,g:!1})}let c=null;for(const l of s){const s=l===index_modern_e?index_modern_p(t,r):index_modern_y(t[l],r[l],n,o);if(!0!==s&&!1!==s||(c=s),c)break}return null===c&&(c=!0),o&&o.set(t,{n:r,g:c}),c},index_modern_u=e=>!!index_modern_c(e)&&index_modern_t in e,index_modern_g=e=>index_modern_c(e)&&e[index_modern_r]||null,index_modern_b=(e,t=!0)=>{index_modern_s.set(e,t)},O=(e,t)=>{const r=[],n=new WeakSet,o=(e,s)=>{if(n.has(e))return;index_modern_l(e)&&n.add(e);const c=index_modern_l(e)&&t.get(index_modern_f(e));c?c.forEach(t=>{o(e[t],s?[...s,t]:[t])}):s&&r.push(s)};return o(e),r},index_modern_w=e=>{index_modern_n=e}; 34773 34774;// CONCATENATED MODULE: ./node_modules/valtio/esm/vanilla.js 34775 34776 34777const vanilla_isObject = (x) => typeof x === "object" && x !== null; 34778const refSet = /* @__PURE__ */ new WeakSet(); 34779const VERSION = true ? Symbol("VERSION") : 0; 34780const LISTENERS = true ? Symbol("LISTENERS") : 0; 34781const SNAPSHOT = true ? Symbol("SNAPSHOT") : 0; 34782const buildProxyFunction = (objectIs = Object.is, newProxy = (target, handler) => new Proxy(target, handler), canProxy = (x) => vanilla_isObject(x) && !refSet.has(x) && (Array.isArray(x) || !(Symbol.iterator in x)) && !(x instanceof WeakMap) && !(x instanceof WeakSet) && !(x instanceof Error) && !(x instanceof Number) && !(x instanceof Date) && !(x instanceof String) && !(x instanceof RegExp) && !(x instanceof ArrayBuffer), PROMISE_RESULT = true ? Symbol("PROMISE_RESULT") : 0, PROMISE_ERROR = true ? Symbol("PROMISE_ERROR") : 0, snapshotCache = /* @__PURE__ */ new WeakMap(), createSnapshot = (version, target, receiver) => { 34783 const cache = snapshotCache.get(receiver); 34784 if ((cache == null ? void 0 : cache[0]) === version) { 34785 return cache[1]; 34786 } 34787 const snapshot2 = Array.isArray(target) ? [] : Object.create(Object.getPrototypeOf(target));
34788 index_modern_b(snapshot2, true); 34789 snapshotCache.set(receiver, [version, snapshot2]); 34790 Reflect.ownKeys(target).forEach((key) => { 34791 const value = Reflect.get(target, key, receiver); 34792 if (refSet.has(value)) { 34793 index_modern_b(value, false); 34794 snapshot2[key] = value; 34795 } else if (value instanceof Promise) { 34796 if (PROMISE_RESULT in value) { 34797 snapshot2[key] = value[PROMISE_RESULT]; 34798 } else { 34799 const errorOrPromise = value[PROMISE_ERROR] || value; 34800 Object.defineProperty(snapshot2, key, { 34801 get() { 34802 if (PROMISE_RESULT in value) { 34803 return value[PROMISE_RESULT]; 34804 } 34805 throw errorOrPromise; 34806 } 34807 }); 34808 } 34809 } else if (value == null ? void 0 : value[LISTENERS]) { 34810 snapshot2[key] = value[SNAPSHOT]; 34811 } else { 34812 snapshot2[key] = value; 34813 } 34814 }); 34815 return Object.freeze(snapshot2); 34816}, proxyCache = /* @__PURE__ */ new WeakMap(), versionHolder = [1], proxyFunction2 = (initialObject) => { 34817 if (!vanilla_isObject(initialObject)) { 34818 throw new Error("object required"); 34819 } 34820 const found = proxyCache.get(initialObject); 34821 if (found) { 34822 return found; 34823 } 34824 let version = versionHolder[0]; 34825 const listeners = /* @__PURE__ */ new Set(); 34826 const notifyUpdate = (op, nextVersion = ++versionHolder[0]) => { 34827 if (version !== nextVersion) { 34828 version = nextVersion; 34829 listeners.forEach((listener) => listener(op, nextVersion)); 34830 } 34831 }; 34832 const propListeners = /* @__PURE__ */ new Map(); 34833 const getPropListener = (prop) => { 34834 let propListener = propListeners.get(prop); 34835 if (!propListener) { 34836 propListener = (op, nextVersion) => { 34837 const newOp = [...op]; 34838 newOp[1] = [prop, ...newOp[1]]; 34839 notifyUpdate(newOp, nextVersion); 34840 }; 34841 propListeners.set(prop, propListener); 34842 } 34843 return propListener; 34844 }; 34845 const popPropListener = (prop) => { 34846 const propListener = propListeners.get(prop); 34847 propListeners.delete(prop); 34848 return propListener; 34849 }; 34850 const baseObject = Array.isArray(initialObject) ? [] : Object.create(Object.getPrototypeOf(initialObject)); 34851 const handler = { 34852 get(target, prop, receiver) { 34853 if (prop === VERSION) { 34854 return version; 34855 } 34856 if (prop === LISTENERS) { 34857 return listeners; 34858 } 34859 if (prop === SNAPSHOT) { 34860 return createSnapshot(version, target, receiver); 34861 } 34862 return Reflect.get(target, prop, receiver); 34863 }, 34864 deleteProperty(target, prop) { 34865 const prevValue = Reflect.get(target, prop); 34866 const childListeners = prevValue == null ? void 0 : prevValue[LISTENERS]; 34867 if (childListeners) { 34868 childListeners.delete(popPropListener(prop)); 34869 } 34870 const deleted = Reflect.deleteProperty(target, prop); 34871 if (deleted) { 34872 notifyUpdate(["delete", [prop], prevValue]); 34873 } 34874 return deleted; 34875 }, 34876 set(target, prop, value, receiver) { 34877 var _a; 34878 const hasPrevValue = Reflect.has(target, prop); 34879 const prevValue = Reflect.get(target, prop, receiver); 34880 if (hasPrevValue && objectIs(prevValue, value)) { 34881 return true; 34882 } 34883 const childListeners = prevValue == null ? void 0 : prevValue[LISTENERS]; 34884 if (childListeners) { 34885 childListeners.delete(popPropListener(prop)); 34886 } 34887 if (vanilla_isObject(value)) { 34888 value = index_modern_g(value) || value; 34889 } 34890 let nextValue; 34891 if ((_a = Object.getOwnPropertyDescriptor(target, prop)) == null ? void 0 : _a.set) { 34892 nextValue = value; 34893 } else if (value instanceof Promise) { 34894 nextValue = value.then((v) => { 34895 nextValue[PROMISE_RESULT] = v; 34896 notifyUpdate(["resolve", [prop], v]); 34897 return v; 34898 }).catch((e) => { 34899 nextValue[PROMISE_ERROR] = e; 34900 notifyUpdate(["reject", [prop], e]); 34901 }); 34902 } else if (value == null ? void 0 : value[LISTENERS]) { 34903 nextValue = value; 34904 nextValue[LISTENERS].add(getPropListener(prop)); 34905 } else if (canProxy(value)) { 34906 nextValue = vanilla_proxy(value); 34907 nextValue[LISTENERS].add(getPropListener(prop)); 34908 } else { 34909 nextValue = value; 34910 } 34911 Reflect.set(target, prop, nextValue, receiver); 34912 notifyUpdate(["set", [prop], value, prevValue]); 34913 return true; 34914 } 34915 }; 34916 const proxyObject = newProxy(baseObject, handler); 34917 proxyCache.set(initialObject, proxyObject); 34918 Reflect.ownKeys(initialObject).forEach((key) => { 34919 const desc = Object.getOwnPropertyDescriptor( 34920 initialObject, 34921 key 34922 ); 34923 if (desc.get || desc.set) { 34924 Object.defineProperty(baseObject, key, desc); 34925 } else {
34926 proxyObject[key] = initialObject[key]; 34927 } 34928 }); 34929 return proxyObject; 34930}) => [ 34931 proxyFunction2, 34932 refSet, 34933 VERSION, 34934 LISTENERS, 34935 SNAPSHOT, 34936 objectIs, 34937 newProxy, 34938 canProxy, 34939 PROMISE_RESULT, 34940 PROMISE_ERROR, 34941 snapshotCache, 34942 createSnapshot, 34943 proxyCache, 34944 versionHolder 34945]; 34946const [proxyFunction] = buildProxyFunction(); 34947function vanilla_proxy(initialObject = {}) { 34948 return proxyFunction(initialObject); 34949} 34950function vanilla_getVersion(proxyObject) { 34951 return vanilla_isObject(proxyObject) ? proxyObject[VERSION] : void 0; 34952} 34953function vanilla_subscribe(proxyObject, callback, notifyInSync) { 34954 if ( true && !(proxyObject == null ? void 0 : proxyObject[LISTENERS])) { 34955 console.warn("Please use proxy object"); 34956 } 34957 let promise; 34958 const ops = []; 34959 const listener = (op) => { 34960 ops.push(op); 34961 if (notifyInSync) { 34962 callback(ops.splice(0)); 34963 return; 34964 } 34965 if (!promise) { 34966 promise = Promise.resolve().then(() => { 34967 promise = void 0; 34968 callback(ops.splice(0)); 34969 }); 34970 } 34971 }; 34972 proxyObject[LISTENERS].add(listener); 34973 return () => { 34974 proxyObject[LISTENERS].delete(listener); 34975 }; 34976} 34977function vanilla_snapshot(proxyObject) { 34978 if ( true && !(proxyObject == null ? void 0 : proxyObject[SNAPSHOT])) { 34979 console.warn("Please use proxy object"); 34980 } 34981 return proxyObject[SNAPSHOT]; 34982} 34983function vanilla_ref(obj) { 34984 refSet.add(obj); 34985 return obj; 34986} 34987const unstable_buildProxyFunction = (/* unused pure expression or super */ null && (buildProxyFunction)); 34988 34989 34990 34991;// CONCATENATED MODULE: ./node_modules/valtio/esm/index.js 34992 34993 34994 34995 34996 34997 34998const { useSyncExternalStore } = shim; 34999const useAffectedDebugValue = (state, affected) => { 35000 const pathList = (0,external_React_.useRef)(); 35001 (0,external_React_.useEffect)(() => { 35002 pathList.current = O(state, affected); 35003 }); 35004 (0,external_React_.useDebugValue)(pathList.current); 35005}; 35006function useSnapshot(proxyObject, options) { 35007 const notifyInSync = options == null ? void 0 : options.sync; 35008 const lastSnapshot = (0,external_React_.useRef)(); 35009 const lastAffected = (0,external_React_.useRef)(); 35010 let inRender = true; 35011 const currSnapshot = useSyncExternalStore( 35012 (0,external_React_.useCallback)( 35013 (callback) => { 35014 const unsub = vanilla_subscribe(proxyObject, callback, notifyInSync); 35015 callback(); 35016 return unsub; 35017 }, 35018 [proxyObject, notifyInSync] 35019 ), 35020 () => { 35021 const nextSnapshot = vanilla_snapshot(proxyObject);
35022 try { 35023 if (!inRender && lastSnapshot.current && lastAffected.current && !index_modern_y( 35024 lastSnapshot.current, 35025 nextSnapshot, 35026 lastAffected.current, 35027 /* @__PURE__ */ new WeakMap() 35028 )) { 35029 return lastSnapshot.current; 35030 } 35031 } catch (e) { 35032 } 35033 return nextSnapshot; 35034 }, 35035 () => vanilla_snapshot(proxyObject) 35036 ); 35037 inRender = false; 35038 const currAffected = /* @__PURE__ */ new WeakMap(); 35039 (0,external_React_.useEffect)(() => { 35040 lastSnapshot.current = currSnapshot; 35041 lastAffected.current = currAffected; 35042 }); 35043 if (true) { 35044 useAffectedDebugValue(currSnapshot, currAffected); 35045 } 35046 const proxyCache = (0,external_React_.useMemo)(() => /* @__PURE__ */ new WeakMap(), []); 35047 return index_modern_i(currSnapshot, currAffected, proxyCache); 35048} 35049 35050 35051 35052;// CONCATENATED MODULE: ./node_modules/valtio/esm/utils.js 35053 35054 35055function subscribeKey(proxyObject, key, callback, notifyInSync) { 35056 return subscribe( 35057 proxyObject, 35058 (ops) => { 35059 if (ops.some((op) => op[1][0] === key)) { 35060 callback(proxyObject[key]); 35061 } 35062 }, 35063 notifyInSync 35064 ); 35065} 35066 35067let currentCleanups; 35068function watch(callback, options) { 35069 let alive = true; 35070 const cleanups = /* @__PURE__ */ new Set(); 35071 const subscriptions = /* @__PURE__ */ new Map(); 35072 const cleanup = () => { 35073 if (alive) { 35074 alive = false; 35075 cleanups.forEach((clean) => clean()); 35076 cleanups.clear(); 35077 subscriptions.forEach((unsubscribe) => unsubscribe()); 35078 subscriptions.clear(); 35079 } 35080 }; 35081 const revalidate = () => { 35082 if (!alive) { 35083 return; 35084 } 35085 cleanups.forEach((clean) => clean()); 35086 cleanups.clear(); 35087 const proxiesToSubscribe = /* @__PURE__ */ new Set(); 35088 const parent = currentCleanups; 35089 currentCleanups = cleanups; 35090 try { 35091 const cleanupReturn = callback((proxyObject) => { 35092 proxiesToSubscribe.add(proxyObject); 35093 return proxyObject; 35094 }); 35095 if (cleanupReturn) { 35096 cleanups.add(cleanupReturn); 35097 } 35098 } finally { 35099 currentCleanups = parent; 35100 } 35101 subscriptions.forEach((unsubscribe, proxyObject) => { 35102 if (proxiesToSubscribe.has(proxyObject)) { 35103 proxiesToSubscribe.delete(proxyObject); 35104 } else { 35105 subscriptions.delete(proxyObject); 35106 unsubscribe(); 35107 } 35108 }); 35109 proxiesToSubscribe.forEach((proxyObject) => { 35110 const unsubscribe = subscribe(proxyObject, revalidate, options == null ? void 0 : options.sync); 35111 subscriptions.set(proxyObject, unsubscribe); 35112 }); 35113 }; 35114 if (currentCleanups) { 35115 currentCleanups.add(cleanup); 35116 } 35117 revalidate(); 35118 return cleanup; 35119} 35120 35121const DEVTOOLS = Symbol(); 35122function devtools(proxyObject, options) { 35123 if (typeof options === "string") { 35124 console.warn( 35125 "string name option is deprecated, use { name }. https://github.com/pmndrs/valtio/pull/400" 35126 ); 35127 options = { name: options }; 35128 } 35129 const { enabled, name = "" } = options || {}; 35130 let extension; 35131 try { 35132 extension = (enabled != null ? enabled : (/* unsupported import.meta.env */ undefined && 0) !== "production") && window.__REDUX_DEVTOOLS_EXTENSION__; 35133 } catch { 35134 } 35135 if (!extension) { 35136 if ( true && enabled) { 35137 console.warn("[Warning] Please install/enable Redux devtools extension"); 35138 } 35139 return; 35140 } 35141 let isTimeTraveling = false; 35142 const devtools2 = extension.connect({ name }); 35143 const unsub1 = subscribe(proxyObject, (ops) => { 35144 const action = ops.filter(([_, path]) => path[0] !== DEVTOOLS).map(([op, path]) => `${op}:${path.map(String).join(".")}`).join(", "); 35145 if (!action) { 35146 return; 35147 } 35148 if (isTimeTraveling) { 35149 isTimeTraveling = false; 35150 } else { 35151 const snapWithoutDevtools = Object.assign({}, snapshot(proxyObject)); 35152 delete snapWithoutDevtools[DEVTOOLS]; 35153 devtools2.send( 35154 { 35155 type: action, 35156 updatedAt: new Date().toLocaleString() 35157 }, 35158 snapWithoutDevtools 35159 ); 35160 } 35161 }); 35162 const unsub2 = devtools2.subscribe((message) => { 35163 var _a, _b, _c, _d, _e, _f; 35164 if (message.type === "ACTION" && message.payload) {
35165 try { 35166 Object.assign(proxyObject, JSON.parse(message.payload)); 35167 } catch (e) { 35168 console.error( 35169 "please dispatch a serializable value that JSON.parse() and proxy() support\n", 35170 e 35171 ); 35172 } 35173 } 35174 if (message.type === "DISPATCH" && message.state) { 35175 if (((_a = message.payload) == null ? void 0 : _a.type) === "JUMP_TO_ACTION" || ((_b = message.payload) == null ? void 0 : _b.type) === "JUMP_TO_STATE") { 35176 isTimeTraveling = true; 35177 const state = JSON.parse(message.state); 35178 Object.assign(proxyObject, state); 35179 } 35180 proxyObject[DEVTOOLS] = message; 35181 } else if (message.type === "DISPATCH" && ((_c = message.payload) == null ? void 0 : _c.type) === "COMMIT") { 35182 devtools2.init(snapshot(proxyObject)); 35183 } else if (message.type === "DISPATCH" && ((_d = message.payload) == null ? void 0 : _d.type) === "IMPORT_STATE") { 35184 const actions = (_e = message.payload.nextLiftedState) == null ? void 0 : _e.actionsById; 35185 const computedStates = ((_f = message.payload.nextLiftedState) == null ? void 0 : _f.computedStates) || []; 35186 isTimeTraveling = true; 35187 computedStates.forEach(({ state }, index) => { 35188 const action = actions[index] || "No action found"; 35189 Object.assign(proxyObject, state); 35190 if (index === 0) { 35191 devtools2.init(snapshot(proxyObject)); 35192 } else { 35193 devtools2.send(action, snapshot(proxyObject)); 35194 } 35195 }); 35196 } 35197 }); 35198 devtools2.init(snapshot(proxyObject)); 35199 return () => { 35200 unsub1(); 35201 unsub2 == null ? void 0 : unsub2(); 35202 }; 35203} 35204 35205const sourceObjectMap = /* @__PURE__ */ new WeakMap(); 35206const derivedObjectMap = /* @__PURE__ */ new WeakMap(); 35207const markPending = (sourceObject, callback) => { 35208 const sourceObjectEntry = sourceObjectMap.get(sourceObject); 35209 if (sourceObjectEntry) { 35210 sourceObjectEntry[0].forEach((subscription) => { 35211 const { d: derivedObject } = subscription; 35212 if (sourceObject !== derivedObject) { 35213 markPending(derivedObject); 35214 } 35215 }); 35216 ++sourceObjectEntry[2]; 35217 if (callback) { 35218 sourceObjectEntry[3].add(callback); 35219 } 35220 } 35221}; 35222const checkPending = (sourceObject, callback) => { 35223 const sourceObjectEntry = sourceObjectMap.get(sourceObject); 35224 if (sourceObjectEntry == null ? void 0 : sourceObjectEntry[2]) { 35225 sourceObjectEntry[3].add(callback); 35226 return true; 35227 } 35228 return false; 35229}; 35230const unmarkPending = (sourceObject) => { 35231 const sourceObjectEntry = sourceObjectMap.get(sourceObject); 35232 if (sourceObjectEntry) { 35233 --sourceObjectEntry[2]; 35234 if (!sourceObjectEntry[2]) { 35235 sourceObjectEntry[3].forEach((callback) => callback()); 35236 sourceObjectEntry[3].clear(); 35237 } 35238 sourceObjectEntry[0].forEach((subscription) => { 35239 const { d: derivedObject } = subscription; 35240 if (sourceObject !== derivedObject) { 35241 unmarkPending(derivedObject); 35242 } 35243 }); 35244 } 35245}; 35246const addSubscription = (subscription) => { 35247 const { s: sourceObject, d: derivedObject } = subscription; 35248 let derivedObjectEntry = derivedObjectMap.get(derivedObject); 35249 if (!derivedObjectEntry) { 35250 derivedObjectEntry = [/* @__PURE__ */ new Set()]; 35251 derivedObjectMap.set(subscription.d, derivedObjectEntry); 35252 } 35253 derivedObjectEntry[0].add(subscription); 35254 let sourceObjectEntry = sourceObjectMap.get(sourceObject); 35255 if (!sourceObjectEntry) { 35256 const subscriptions = /* @__PURE__ */ new Set(); 35257 const unsubscribe = vanilla_subscribe( 35258 sourceObject, 35259 (ops) => { 35260 subscriptions.forEach((subscription2) => { 35261 const { 35262 d: derivedObject2, 35263 c: callback, 35264 n: notifyInSync, 35265 i: ignoreKeys 35266 } = subscription2; 35267 if (sourceObject === derivedObject2 && ops.every( 35268 (op) => op[1].length === 1 && ignoreKeys.includes(op[1][0]) 35269 )) { 35270 return; 35271 } 35272 if (subscription2.p) { 35273 return; 35274 } 35275 markPending(sourceObject, callback); 35276 if (notifyInSync) { 35277 unmarkPending(sourceObject); 35278 } else { 35279 subscription2.p = Promise.resolve().then(() => { 35280 delete subscription2.p; 35281 unmarkPending(sourceObject); 35282 }); 35283 } 35284 }); 35285 }, 35286 true 35287 );
35288 sourceObjectEntry = [subscriptions, unsubscribe, 0, /* @__PURE__ */ new Set()]; 35289 sourceObjectMap.set(sourceObject, sourceObjectEntry); 35290 } 35291 sourceObjectEntry[0].add(subscription); 35292}; 35293const removeSubscription = (subscription) => { 35294 const { s: sourceObject, d: derivedObject } = subscription; 35295 const derivedObjectEntry = derivedObjectMap.get(derivedObject); 35296 derivedObjectEntry == null ? void 0 : derivedObjectEntry[0].delete(subscription); 35297 if ((derivedObjectEntry == null ? void 0 : derivedObjectEntry[0].size) === 0) { 35298 derivedObjectMap.delete(derivedObject); 35299 } 35300 const sourceObjectEntry = sourceObjectMap.get(sourceObject); 35301 if (sourceObjectEntry) { 35302 const [subscriptions, unsubscribe] = sourceObjectEntry; 35303 subscriptions.delete(subscription); 35304 if (!subscriptions.size) { 35305 unsubscribe(); 35306 sourceObjectMap.delete(sourceObject); 35307 } 35308 } 35309}; 35310const listSubscriptions = (derivedObject) => { 35311 const derivedObjectEntry = derivedObjectMap.get(derivedObject); 35312 if (derivedObjectEntry) { 35313 return Array.from(derivedObjectEntry[0]); 35314 } 35315 return []; 35316}; 35317const unstable_deriveSubscriptions = { 35318 add: addSubscription, 35319 remove: removeSubscription, 35320 list: listSubscriptions 35321}; 35322function derive(derivedFns, options) { 35323 const proxyObject = (options == null ? void 0 : options.proxy) || proxy({}); 35324 const notifyInSync = !!(options == null ? void 0 : options.sync); 35325 const derivedKeys = Object.keys(derivedFns); 35326 derivedKeys.forEach((key) => { 35327 if (Object.getOwnPropertyDescriptor(proxyObject, key)) { 35328 throw new Error("object property already defined"); 35329 } 35330 const fn = derivedFns[key]; 35331 let lastDependencies = null; 35332 const evaluate = () => { 35333 if (lastDependencies) { 35334 if (Array.from(lastDependencies).map(([p]) => checkPending(p, evaluate)).some((isPending) => isPending)) { 35335 return; 35336 } 35337 if (Array.from(lastDependencies).every( 35338 ([p, entry]) => getVersion(p) === entry.v 35339 )) { 35340 return; 35341 } 35342 } 35343 const dependencies = /* @__PURE__ */ new Map(); 35344 const get = (p) => { 35345 dependencies.set(p, { v: getVersion(p) }); 35346 return p; 35347 }; 35348 const value = fn(get); 35349 const subscribeToDependencies = () => { 35350 dependencies.forEach((entry, p) => { 35351 var _a; 35352 const lastSubscription = (_a = lastDependencies == null ? void 0 : lastDependencies.get(p)) == null ? void 0 : _a.s; 35353 if (lastSubscription) { 35354 entry.s = lastSubscription; 35355 } else { 35356 const subscription = { 35357 s: p, 35358 d: proxyObject, 35359 k: key, 35360 c: evaluate, 35361 n: notifyInSync, 35362 i: derivedKeys 35363 }; 35364 addSubscription(subscription); 35365 entry.s = subscription; 35366 } 35367 }); 35368 lastDependencies == null ? void 0 : lastDependencies.forEach((entry, p) => { 35369 if (!dependencies.has(p) && entry.s) { 35370 removeSubscription(entry.s); 35371 } 35372 }); 35373 lastDependencies = dependencies; 35374 }; 35375 if (value instanceof Promise) { 35376 value.finally(subscribeToDependencies); 35377 } else { 35378 subscribeToDependencies(); 35379 } 35380 proxyObject[key] = value; 35381 }; 35382 evaluate(); 35383 }); 35384 return proxyObject; 35385} 35386function underive(proxyObject, options) { 35387 const keysToDelete = (options == null ? void 0 : options.delete) ? /* @__PURE__ */ new Set() : null; 35388 listSubscriptions(proxyObject).forEach((subscription) => { 35389 const { k: key } = subscription; 35390 if (!(options == null ? void 0 : options.keys) || options.keys.includes(key)) { 35391 removeSubscription(subscription); 35392 if (keysToDelete) { 35393 keysToDelete.add(key); 35394 } 35395 } 35396 }); 35397 if (keysToDelete) { 35398 keysToDelete.forEach((key) => { 35399 delete proxyObject[key]; 35400 }); 35401 } 35402} 35403 35404function addComputed_DEPRECATED(proxyObject, computedFns_FAKE, targetObject = proxyObject) { 35405 console.warn( 35406 "addComputed is deprecated. Please consider using `derive` or `proxyWithComputed` instead. Falling back to emulation with derive. https://github.com/pmndrs/valtio/pull/201" 35407 ); 35408 const derivedFns = {};
35409 Object.keys(computedFns_FAKE).forEach((key) => { 35410 derivedFns[key] = (get) => computedFns_FAKE[key](get(proxyObject)); 35411 }); 35412 return derive(derivedFns, { proxy: targetObject }); 35413} 35414 35415function proxyWithComputed(initialObject, computedFns) { 35416 Object.keys(computedFns).forEach((key) => { 35417 if (Object.getOwnPropertyDescriptor(initialObject, key)) { 35418 throw new Error("object property already defined"); 35419 } 35420 const computedFn = computedFns[key]; 35421 const { get, set } = typeof computedFn === "function" ? { get: computedFn } : computedFn; 35422 const desc = {}; 35423 desc.get = () => get(snapshot(proxyObject)); 35424 if (set) { 35425 desc.set = (newValue) => set(proxyObject, newValue); 35426 } 35427 Object.defineProperty(initialObject, key, desc); 35428 }); 35429 const proxyObject = proxy(initialObject); 35430 return proxyObject; 35431} 35432 35433const utils_isObject = (x) => typeof x === "object" && x !== null; 35434const deepClone = (obj) => { 35435 if (!utils_isObject(obj)) { 35436 return obj; 35437 } 35438 const baseObject = Array.isArray(obj) ? [] : Object.create(Object.getPrototypeOf(obj)); 35439 Reflect.ownKeys(obj).forEach((key) => { 35440 baseObject[key] = deepClone(obj[key]); 35441 }); 35442 return baseObject; 35443}; 35444function proxyWithHistory(initialValue, skipSubscribe = false) { 35445 const proxyObject = proxy({ 35446 value: initialValue, 35447 history: ref({ 35448 wip: void 0, 35449 snapshots: [], 35450 index: -1 35451 }), 35452 canUndo: () => proxyObject.history.index > 0, 35453 undo: () => { 35454 if (proxyObject.canUndo()) { 35455 proxyObject.value = proxyObject.history.wip = deepClone( 35456 proxyObject.history.snapshots[--proxyObject.history.index] 35457 ); 35458 } 35459 }, 35460 canRedo: () => proxyObject.history.index < proxyObject.history.snapshots.length - 1, 35461 redo: () => { 35462 if (proxyObject.canRedo()) { 35463 proxyObject.value = proxyObject.history.wip = deepClone( 35464 proxyObject.history.snapshots[++proxyObject.history.index] 35465 ); 35466 } 35467 }, 35468 saveHistory: () => { 35469 proxyObject.history.snapshots.splice(proxyObject.history.index + 1); 35470 proxyObject.history.snapshots.push(snapshot(proxyObject).value); 35471 ++proxyObject.history.index; 35472 }, 35473 subscribe: () => subscribe(proxyObject, (ops) => { 35474 if (ops.every( 35475 (op) => op[1][0] === "value" && (op[0] !== "set" || op[2] !== proxyObject.history.wip) 35476 )) { 35477 proxyObject.saveHistory(); 35478 } 35479 }) 35480 }); 35481 proxyObject.saveHistory(); 35482 if (!skipSubscribe) { 35483 proxyObject.subscribe(); 35484 } 35485 return proxyObject; 35486} 35487 35488function proxySet(initialValues) { 35489 const set = proxy({ 35490 data: Array.from(new Set(initialValues)), 35491 has(value) { 35492 return this.data.indexOf(value) !== -1; 35493 }, 35494 add(value) { 35495 let hasProxy = false; 35496 if (typeof value === "object" && value !== null) { 35497 hasProxy = this.data.indexOf(proxy(value)) !== -1; 35498 } 35499 if (this.data.indexOf(value) === -1 && !hasProxy) { 35500 this.data.push(value); 35501 } 35502 return this; 35503 }, 35504 delete(value) { 35505 const index = this.data.indexOf(value); 35506 if (index === -1) { 35507 return false; 35508 } 35509 this.data.splice(index, 1); 35510 return true; 35511 }, 35512 clear() { 35513 this.data.splice(0); 35514 }, 35515 get size() { 35516 return this.data.length; 35517 }, 35518 forEach(cb) { 35519 this.data.forEach((value) => { 35520 cb(value, value, this); 35521 }); 35522 }, 35523 get [Symbol.toStringTag]() { 35524 return "Set"; 35525 }, 35526 toJSON() { 35527 return {}; 35528 }, 35529 [Symbol.iterator]() { 35530 return this.data[Symbol.iterator](); 35531 }, 35532 values() { 35533 return this.data.values(); 35534 }, 35535 keys() { 35536 return this.data.values(); 35537 }, 35538 entries() { 35539 return new Set(this.data).entries(); 35540 } 35541 }); 35542 Object.defineProperties(set, { 35543 data: { 35544 enumerable: false 35545 }, 35546 size: { 35547 enumerable: false 35548 }, 35549 toJSON: { 35550 enumerable: false 35551 } 35552 }); 35553 Object.seal(set); 35554 return set; 35555} 35556 35557function proxyMap(entries) { 35558 const map = vanilla_proxy({ 35559 data: Array.from(entries || []), 35560 has(key) { 35561 return this.data.some((p) => p[0] === key); 35562 }, 35563 set(key, value) { 35564 const record = this.data.find((p) => p[0] === key); 35565 if (record) { 35566 record[1] = value; 35567 } else { 35568 this.data.push([key, value]); 35569 } 35570 return this; 35571 }, 35572 get(key) { 35573 var _a; 35574 return (_a = this.data.find((p) => p[0] === key)) == null ? void 0 : _a[1]; 35575 }, 35576 delete(key) { 35577 const index = this.data.findIndex((p) => p[0] === key); 35578 if (index === -1) { 35579 return false;
35580 } 35581 this.data.splice(index, 1); 35582 return true; 35583 }, 35584 clear() { 35585 this.data.splice(0); 35586 }, 35587 get size() { 35588 return this.data.length; 35589 }, 35590 toJSON() { 35591 return {}; 35592 }, 35593 forEach(cb) { 35594 this.data.forEach((p) => { 35595 cb(p[1], p[0], this); 35596 }); 35597 }, 35598 keys() { 35599 return this.data.map((p) => p[0]).values(); 35600 }, 35601 values() { 35602 return this.data.map((p) => p[1]).values(); 35603 }, 35604 entries() { 35605 return new Map(this.data).entries(); 35606 }, 35607 get [Symbol.toStringTag]() { 35608 return "Map"; 35609 }, 35610 [Symbol.iterator]() { 35611 return this.entries(); 35612 } 35613 }); 35614 Object.defineProperties(map, { 35615 data: { 35616 enumerable: false 35617 }, 35618 size: { 35619 enumerable: false 35620 }, 35621 toJSON: { 35622 enumerable: false 35623 } 35624 }); 35625 Object.seal(map); 35626 return map; 35627} 35628 35629 35630 35631;// CONCATENATED MODULE: ./packages/components/build-module/slot-fill/bubbles-virtually/slot-fill-context.js 35632// @ts-nocheck 35633/** 35634 * External dependencies 35635 */ 35636 35637/** 35638 * WordPress dependencies 35639 */ 35640 35641 35642const SlotFillContext = (0,external_wp_element_namespaceObject.createContext)({ 35643 slots: proxyMap(), 35644 fills: proxyMap(), 35645 registerSlot: () => { 35646 false ? 0 : void 0; 35647 }, 35648 updateSlot: () => {}, 35649 unregisterSlot: () => {}, 35650 registerFill: () => {}, 35651 unregisterFill: () => {}, 35652 // This helps the provider know if it's using the default context value or not. 35653 isDefault: true 35654}); 35655/* harmony default export */ const slot_fill_context = (SlotFillContext); 35656 35657;// CONCATENATED MODULE: ./packages/components/build-module/slot-fill/bubbles-virtually/use-slot.js 35658// @ts-nocheck 35659/** 35660 * External dependencies 35661 */ 35662 35663 35664/** 35665 * WordPress dependencies 35666 */ 35667 35668 35669/** 35670 * Internal dependencies 35671 */ 35672 35673function useSlot(name) { 35674 const registry = (0,external_wp_element_namespaceObject.useContext)(slot_fill_context); 35675 const slots = useSnapshot(registry.slots, { 35676 sync: true 35677 }); 35678 // The important bit here is that the `useSnapshot` call ensures that the 35679 // hook only causes a re-render if the slot with the given name changes, 35680 // not any other slot. 35681 const slot = slots.get(name); 35682 const api = (0,external_wp_element_namespaceObject.useMemo)(() => ({ 35683 updateSlot: fillProps => registry.updateSlot(name, fillProps), 35684 unregisterSlot: ref => registry.unregisterSlot(name, ref), 35685 registerFill: ref => registry.registerFill(name, ref), 35686 unregisterFill: ref => registry.unregisterFill(name, ref) 35687 }), [name, registry]); 35688 return { 35689 ...slot, 35690 ...api 35691 }; 35692} 35693 35694;// CONCATENATED MODULE: ./packages/components/build-module/slot-fill/context.js 35695// @ts-nocheck 35696/** 35697 * WordPress dependencies 35698 */ 35699 35700const context_SlotFillContext = (0,external_wp_element_namespaceObject.createContext)({ 35701 registerSlot: () => {}, 35702 unregisterSlot: () => {}, 35703 registerFill: () => {}, 35704 unregisterFill: () => {}, 35705 getSlot: () => {}, 35706 getFills: () => {}, 35707 subscribe: () => {} 35708}); 35709/* harmony default export */ const context = (context_SlotFillContext); 35710 35711;// CONCATENATED MODULE: ./packages/components/build-module/slot-fill/use-slot.js 35712// @ts-nocheck 35713/** 35714 * WordPress dependencies 35715 */ 35716 35717 35718/** 35719 * Internal dependencies 35720 */ 35721 35722 35723/** 35724 * React hook returning the active slot given a name. 35725 * 35726 * @param {string} name Slot name. 35727 * @return {Object} Slot object. 35728 */ 35729const use_slot_useSlot = name => { 35730 const { 35731 getSlot, 35732 subscribe 35733 } = (0,external_wp_element_namespaceObject.useContext)(context); 35734 return (0,external_wp_element_namespaceObject.useSyncExternalStore)(subscribe, () => getSlot(name), () => getSlot(name)); 35735}; 35736/* harmony default export */ const use_slot = (use_slot_useSlot); 35737 35738;// CONCATENATED MODULE: ./packages/components/build-module/slot-fill/fill.js 35739// @ts-nocheck 35740 35741/** 35742 * WordPress dependencies 35743 */ 35744 35745 35746/** 35747 * Internal dependencies 35748 */ 35749 35750 35751function Fill({ 35752 name, 35753 children 35754}) { 35755 const { 35756 registerFill, 35757 unregisterFill 35758 } = (0,external_wp_element_namespaceObject.useContext)(context); 35759 const slot = use_slot(name); 35760 const ref = (0,external_wp_element_namespaceObject.useRef)({ 35761 name, 35762 children 35763 }); 35764 (0,external_wp_element_namespaceObject.useLayoutEffect)(() => { 35765 const refValue = ref.current; 35766 registerFill(name, refValue); 35767 return () => unregisterFill(name, refValue); 35768 // Ignore reason: the useLayoutEffects here are written to fire at specific times, and introducing new depen
35768dencies could cause unexpected changes in behavior. 35769 // We'll leave them as-is until a more detailed investigation/refactor can be performed. 35770 // eslint-disable-next-line react-hooks/exhaustive-deps 35771 }, []); 35772 (0,external_wp_element_namespaceObject.useLayoutEffect)(() => { 35773 ref.current.children = children; 35774 if (slot) { 35775 slot.forceUpdate(); 35776 } 35777 // Ignore reason: the useLayoutEffects here are written to fire at specific times, and introducing new dependencies could cause unexpected changes in behavior. 35778 // We'll leave them as-is until a more detailed investigation/refactor can be performed. 35779 // eslint-disable-next-line react-hooks/exhaustive-deps 35780 }, [children]); 35781 (0,external_wp_element_namespaceObject.useLayoutEffect)(() => { 35782 if (name === ref.current.name) { 35783 // Ignore initial effect. 35784 return; 35785 } 35786 unregisterFill(ref.current.name, ref.current); 35787 ref.current.name = name; 35788 registerFill(name, ref.current); 35789 // Ignore reason: the useLayoutEffects here are written to fire at specific times, and introducing new dependencies could cause unexpected changes in behavior. 35790 // We'll leave them as-is until a more detailed investigation/refactor can be performed. 35791 // eslint-disable-next-line react-hooks/exhaustive-deps 35792 }, [name]); 35793 return null; 35794} 35795 35796;// CONCATENATED MODULE: ./packages/components/build-module/slot-fill/slot.js 35797 35798// @ts-nocheck 35799/** 35800 * WordPress dependencies 35801 */ 35802 35803 35804/** 35805 * Internal dependencies 35806 */ 35807 35808 35809/** 35810 * Whether the argument is a function. 35811 * 35812 * @param {*} maybeFunc The argument to check. 35813 * @return {boolean} True if the argument is a function, false otherwise. 35814 */ 35815function isFunction(maybeFunc) { 35816 return typeof maybeFunc === 'function'; 35817} 35818class SlotComponent extends external_wp_element_namespaceObject.Component { 35819 constructor() { 35820 super(...arguments); 35821 this.isUnmounted = false; 35822 } 35823 componentDidMount() { 35824 const { 35825 registerSlot 35826 } = this.props; 35827 this.isUnmounted = false; 35828 registerSlot(this.props.name, this); 35829 } 35830 componentWillUnmount() { 35831 const { 35832 unregisterSlot 35833 } = this.props; 35834 this.isUnmounted = true; 35835 unregisterSlot(this.props.name, this); 35836 } 35837 componentDidUpdate(prevProps) { 35838 const { 35839 name, 35840 unregisterSlot, 35841 registerSlot 35842 } = this.props; 35843 if (prevProps.name !== name) { 35844 unregisterSlot(prevProps.name); 35845 registerSlot(name, this); 35846 } 35847 } 35848 forceUpdate() { 35849 if (this.isUnmounted) { 35850 return; 35851 } 35852 super.forceUpdate(); 35853 } 35854 render() { 35855 var _getFills; 35856 const { 35857 children, 35858 name, 35859 fillProps = {}, 35860 getFills 35861 } = this.props; 35862 const fills = ((_getFills = getFills(name, this)) !== null && _getFills !== void 0 ? _getFills : []).map(fill => { 35863 const fillChildren = isFunction(fill.children) ? fill.children(fillProps) : fill.children; 35864 return external_wp_element_namespaceObject.Children.map(fillChildren, (child, childIndex) => { 35865 if (!child || typeof child === 'string') { 35866 return child; 35867 } 35868 const childKey = child.key || childIndex; 35869 return (0,external_wp_element_namespaceObject.cloneElement)(child, { 35870 key: childKey 35871 }); 35872 }); 35873 }).filter( 35874 // In some cases fills are rendered only when some conditions apply. 35875 // This ensures that we only use non-empty fills when rendering, i.e., 35876 // it allows us to render wrappers only when the fills are actually present. 35877 element => !(0,external_wp_element_namespaceObject.isEmptyElement)(element)); 35878 return (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, isFunction(children) ? children(fills) : fills); 35879 } 35880} 35881const Slot = props => (0,external_wp_element_namespaceObject.createElement)(context.Consumer, null, ({ 35882 registerSlot, 35883 unregisterSlot, 35884 getFills 35885}) => (0,external_wp_element_namespaceObject.createElement)(SlotComponent, { 35886 ...props, 35887 registerSlot: registerSlot, 35888 unregisterSlot: unregisterSlot, 35889 getFills: getFills 35890})); 35891/* harmony default export */ const slot = (Slot); 35892 35893;// CONCATENATED MODULE: ./packages/components/node_modules/uuid/dist/esm-browser/rng.js 35894// Unique ID creation requires a high quality random # generator. In the browser we therefore 35895// require the crypto API and do not support built-in fallback to lower quality random number 35896// generators (like Math.random()). 35897var getRandomValues; 35898var rnds8 = new Uint8Array(16); 35899function rng() { 35900 // lazy load so that environments that need to polyfill have a chance to do so 35901 if (!getRandomValues) { 35902 // getRandomValues needs to be invoked in a context where "this" is a Crypto implementation. Also, 35903 // find the complete implementation of crypto (msCrypto) on IE11. 35904 getRandomValues = typeof crypto !== 'undefined' && crypto.getRandomValues && crypto.getRandomValues.bind(crypto) || typeof msCrypto !== 'undefined' && typeof msCrypto.getRandomValues === 'function' && msCrypto.getRandomValues.bind(msCrypto); 35905 35906 if (!getRandomValues) { 35907 throw new Error('crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported'); 35908 } 35909 } 35910 35911 return getRandomValues(rnds8); 35912} 35913;// CONCATENATED MODULE: ./packages/components/node_modules/uuid/dist/esm-browser/regex.js 35914/* harmony default export */ const 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); 35915;// CONCATENATED MODULE: ./packages/components/node_modules/uuid/dist/esm-browser/validate.js 35916 35917 35918function validate(uuid) { 35919 return typeof uuid === 'string' && regex.test(uuid); 35920} 35921 35922/* harmony default export */ const esm_browser_validate = (validate); 35923;// CONCATENATED MODULE: ./packages/components/node_modules/uuid/dist/esm-browser/stringify.js 35924 35925/** 35926 * Convert array of 16 byte values to UUID string format of the form: 35927 * XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX 35928 */ 35929 35930var byteToHex = []; 35931 35932for (var stringify_i = 0; stringify_i < 256; ++stringify_i) { 35933 byteToHex.push((stringify_i + 0x100).toString(16).substr(1)); 35934} 35935 35936function stringify_stringify(arr) { 35937 var offset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0; 35938 // Note: Be careful editing this code! It's been tuned for performance
35939 // and works in ways you may not expect. See https://github.com/uuidjs/uuid/pull/434 35940 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 35941 // of the following: 35942 // - One or more input array values don't map to a hex octet (leading to 35943 // "undefined" in the uuid) 35944 // - Invalid input values for the RFC `version` or `variant` fields 35945 35946 if (!esm_browser_validate(uuid)) { 35947 throw TypeError('Stringified UUID is invalid'); 35948 } 35949 35950 return uuid; 35951} 35952 35953/* harmony default export */ const esm_browser_stringify = (stringify_stringify); 35954;// CONCATENATED MODULE: ./packages/components/node_modules/uuid/dist/esm-browser/v4.js 35955 35956 35957 35958function v4(options, buf, offset) { 35959 options = options || {}; 35960 var rnds = options.random || (options.rng || rng)(); // Per 4.4, set bits for version and `clock_seq_hi_and_reserved` 35961 35962 rnds[6] = rnds[6] & 0x0f | 0x40; 35963 rnds[8] = rnds[8] & 0x3f | 0x80; // Copy bytes to buffer, if provided 35964 35965 if (buf) { 35966 offset = offset || 0; 35967 35968 for (var i = 0; i < 16; ++i) { 35969 buf[offset + i] = rnds[i]; 35970 } 35971 35972 return buf; 35973 } 35974 35975 return esm_browser_stringify(rnds); 35976} 35977 35978/* harmony default export */ const esm_browser_v4 = (v4); 35979;// CONCATENATED MODULE: ./packages/components/build-module/style-provider/index.js 35980 35981/** 35982 * External dependencies 35983 */ 35984 35985 35986 35987 35988/** 35989 * Internal dependencies 35990 */ 35991 35992const uuidCache = new Set(); 35993// Use a weak map so that when the container is detached it's automatically 35994// dereferenced to avoid memory leak. 35995const containerCacheMap = new WeakMap(); 35996const memoizedCreateCacheWithContainer = container => { 35997 if (containerCacheMap.has(container)) { 35998 return containerCacheMap.get(container); 35999 } 36000 36001 // Emotion only accepts alphabetical and hyphenated keys so we just 36002 // strip the numbers from the UUID. It _should_ be fine. 36003 let key = esm_browser_v4().replace(/[0-9]/g, ''); 36004 while (uuidCache.has(key)) { 36005 key = esm_browser_v4().replace(/[0-9]/g, ''); 36006 } 36007 uuidCache.add(key); 36008 const cache = emotion_cache_browser_esm({ 36009 container, 36010 key 36011 }); 36012 containerCacheMap.set(container, cache); 36013 return cache; 36014}; 36015function StyleProvider(props) { 36016 const { 36017 children, 36018 document 36019 } = props; 36020 if (!document) { 36021 return null; 36022 } 36023 const cache = memoizedCreateCacheWithContainer(document.head); 36024 return (0,external_wp_element_namespaceObject.createElement)(CacheProvider, { 36025 value: cache 36026 }, children); 36027} 36028/* harmony default export */ const style_provider = (StyleProvider); 36029 36030;// CONCATENATED MODULE: ./packages/components/build-module/slot-fill/bubbles-virtually/fill.js 36031 36032// @ts-nocheck 36033/** 36034 * WordPress dependencies 36035 */ 36036 36037 36038/** 36039 * Internal dependencies 36040 */ 36041 36042 36043function fill_useForceUpdate() { 36044 const [, setState] = (0,external_wp_element_namespaceObject.useState)({}); 36045 const mounted = (0,external_wp_element_namespaceObject.useRef)(true); 36046 (0,external_wp_element_namespaceObject.useEffect)(() => { 36047 mounted.current = true; 36048 return () => { 36049 mounted.current = false; 36050 }; 36051 }, []); 36052 return () => { 36053 if (mounted.current) { 36054 setState({}); 36055 } 36056 }; 36057} 36058function fill_Fill({ 36059 name, 36060 children 36061}) { 36062 const { 36063 registerFill, 36064 unregisterFill, 36065 ...slot 36066 } = useSlot(name); 36067 const rerender = fill_useForceUpdate(); 36068 const ref = (0,external_wp_element_namespaceObject.useRef)({ 36069 rerender 36070 }); 36071 (0,external_wp_element_namespaceObject.useEffect)(() => { 36072 // We register fills so we can keep track of their existence. 36073 // Some Slot implementations need to know if there're already fills 36074 // registered so they can choose to render themselves or not. 36075 registerFill(ref); 36076 return () => { 36077 unregisterFill(ref); 36078 }; 36079 }, [registerFill, unregisterFill]); 36080 if (!slot.ref || !slot.ref.current) { 36081 return null; 36082 } 36083 if (typeof children === 'function') { 36084 children = children(slot.fillProps); 36085 } 36086 36087 // When using a `Fill`, the `children` will be rendered in the document of the 36088 // `Slot`. This means that we need to wrap the `children` in a `StyleProvider` 36089 // to make sure we're referencing the right document/iframe (instead of the 36090 // context of the `Fill`'s parent).
36091 const wrappedChildren = (0,external_wp_element_namespaceObject.createElement)(style_provider, { 36092 document: slot.ref.current.ownerDocument 36093 }, children); 36094 return (0,external_wp_element_namespaceObject.createPortal)(wrappedChildren, slot.ref.current); 36095} 36096 36097;// CONCATENATED MODULE: ./packages/components/build-module/slot-fill/bubbles-virtually/slot.js 36098 36099// @ts-nocheck 36100/** 36101 * WordPress dependencies 36102 */ 36103 36104 36105 36106/** 36107 * Internal dependencies 36108 */ 36109 36110 36111function slot_Slot(props, forwardedRef) { 36112 const { 36113 name, 36114 fillProps = {}, 36115 as, 36116 // `children` is not allowed. However, if it is passed, 36117 // it will be displayed as is, so remove `children`. 36118 children, 36119 ...restProps 36120 } = props; 36121 const { 36122 registerSlot, 36123 unregisterSlot, 36124 ...registry 36125 } = (0,external_wp_element_namespaceObject.useContext)(slot_fill_context); 36126 const ref = (0,external_wp_element_namespaceObject.useRef)(); 36127 (0,external_wp_element_namespaceObject.useLayoutEffect)(() => { 36128 registerSlot(name, ref, fillProps); 36129 return () => { 36130 unregisterSlot(name, ref); 36131 }; 36132 // Ignore reason: We don't want to unregister and register the slot whenever 36133 // `fillProps` change, which would cause the fill to be re-mounted. Instead, 36134 // we can just update the slot (see hook below). 36135 // For more context, see https://github.com/WordPress/gutenberg/pull/44403#discussion_r994415973 36136 // eslint-disable-next-line react-hooks/exhaustive-deps 36137 }, [registerSlot, unregisterSlot, name]); 36138 // fillProps may be an update that interacts with the layout, so we 36139 // useLayoutEffect. 36140 (0,external_wp_element_namespaceObject.useLayoutEffect)(() => { 36141 registry.updateSlot(name, fillProps); 36142 }); 36143 return (0,external_wp_element_namespaceObject.createElement)(component, { 36144 as: as, 36145 ref: (0,external_wp_compose_namespaceObject.useMergeRefs)([forwardedRef, ref]), 36146 ...restProps 36147 }); 36148} 36149/* harmony default export */ const bubbles_virtually_slot = ((0,external_wp_element_namespaceObject.forwardRef)(slot_Slot)); 36150 36151;// CONCATENATED MODULE: external ["wp","isShallowEqual"] 36152const external_wp_isShallowEqual_namespaceObject = window["wp"]["isShallowEqual"]; 36153var external_wp_isShallowEqual_default = /*#__PURE__*/__webpack_require__.n(external_wp_isShallowEqual_namespaceObject); 36154;// CONCATENATED MODULE: ./packages/components/build-module/slot-fill/bubbles-virtually/slot-fill-provider.js 36155 36156// @ts-nocheck 36157/** 36158 * External dependencies 36159 */ 36160 36161 36162 36163/** 36164 * WordPress dependencies 36165 */ 36166 36167 36168 36169/** 36170 * Internal dependencies 36171 */ 36172 36173function createSlotRegistry() { 36174 const slots = proxyMap(); 36175 const fills = proxyMap(); 36176 function registerSlot(name, ref, fillProps) { 36177 const slot = slots.get(name) || {}; 36178 slots.set(name, vanilla_ref({ 36179 ...slot, 36180 ref: ref || slot.ref, 36181 fillProps: fillProps || slot.fillProps || {} 36182 })); 36183 } 36184 function unregisterSlot(name, ref) { 36185 // Make sure we're not unregistering a slot registered by another element 36186 // See https://github.com/WordPress/gutenberg/pull/19242#issuecomment-590295412 36187 if (slots.get(name)?.ref === ref) { 36188 slots.delete(name); 36189 } 36190 } 36191 function updateSlot(name, fillProps) { 36192 const slot = slots.get(name); 36193 if (!slot) { 36194 return; 36195 } 36196 if (external_wp_isShallowEqual_default()(slot.fillProps, fillProps)) { 36197 return; 36198 } 36199 slot.fillProps = fillProps; 36200 const slotFills = fills.get(name); 36201 if (slotFills) { 36202 // Force update fills. 36203 slotFills.map(fill => fill.current.rerender()); 36204 } 36205 } 36206 function registerFill(name, ref) { 36207 fills.set(name, vanilla_ref([...(fills.get(name) || []), ref])); 36208 } 36209 function unregisterFill(name, ref) { 36210 const fillsForName = fills.get(name); 36211 if (!fillsForName) { 36212 return; 36213 } 36214 fills.set(name, vanilla_ref(fillsForName.filter(fillRef => fillRef !== ref))); 36215 } 36216 return { 36217 slots, 36218 fills, 36219 registerSlot, 36220 updateSlot, 36221 unregisterSlot, 36222 registerFill, 36223 unregisterFill 36224 }; 36225} 36226function SlotFillProvider({ 36227 children 36228}) { 36229 const [registry] = (0,external_wp_element_namespaceObject.useState)(createSlotRegistry); 36230 return (0,external_wp_element_namespaceObject.createElement)(slot_fill_context.Provider, { 36231 value: registry 36232 }, children); 36233} 36234 36235;// CONCATENATED MODULE: ./packages/components/build-module/slot-fill/provider.js 36236 36237// @ts-nocheck 36238/** 36239 * WordPress dependencies 36240 */ 36241 36242 36243/** 36244 * Internal dependencies 36245 */ 36246 36247class provider_SlotFillProvider extends external_wp_element_namespaceObject.Component { 36248 constructor() { 36249 super(...arguments); 36250 this.registerSlot = this.registerSlot.bind(this); 36251 this.registerFill = this.registerFill.bind(this); 36252 this.unregisterSlot = this.unregisterSlot.bind(this); 36253 this.unregisterFill = this.unregisterFill.bind(this);
36254 this.getSlot = this.getSlot.bind(this); 36255 this.getFills = this.getFills.bind(this); 36256 this.subscribe = this.subscribe.bind(this); 36257 this.slots = {}; 36258 this.fills = {}; 36259 this.listeners = []; 36260 this.contextValue = { 36261 registerSlot: this.registerSlot, 36262 unregisterSlot: this.unregisterSlot, 36263 registerFill: this.registerFill, 36264 unregisterFill: this.unregisterFill, 36265 getSlot: this.getSlot, 36266 getFills: this.getFills, 36267 subscribe: this.subscribe 36268 }; 36269 } 36270 registerSlot(name, slot) { 36271 const previousSlot = this.slots[name]; 36272 this.slots[name] = slot; 36273 this.triggerListeners(); 36274 36275 // Sometimes the fills are registered after the initial render of slot 36276 // But before the registerSlot call, we need to rerender the slot. 36277 this.forceUpdateSlot(name); 36278 36279 // If a new instance of a slot is being mounted while another with the 36280 // same name exists, force its update _after_ the new slot has been 36281 // assigned into the instance, such that its own rendering of children 36282 // will be empty (the new Slot will subsume all fills for this name). 36283 if (previousSlot) { 36284 previousSlot.forceUpdate(); 36285 } 36286 } 36287 registerFill(name, instance) { 36288 this.fills[name] = [...(this.fills[name] || []), instance]; 36289 this.forceUpdateSlot(name); 36290 } 36291 unregisterSlot(name, instance) { 36292 // If a previous instance of a Slot by this name unmounts, do nothing, 36293 // as the slot and its fills should only be removed for the current 36294 // known instance. 36295 if (this.slots[name] !== instance) { 36296 return; 36297 } 36298 delete this.slots[name]; 36299 this.triggerListeners(); 36300 } 36301 unregisterFill(name, instance) { 36302 var _this$fills$name$filt; 36303 this.fills[name] = (_this$fills$name$filt = this.fills[name]?.filter(fill => fill !== instance)) !== null && _this$fills$name$filt !== void 0 ? _this$fills$name$filt : []; 36304 this.forceUpdateSlot(name); 36305 } 36306 getSlot(name) { 36307 return this.slots[name]; 36308 } 36309 getFills(name, slotInstance) { 36310 // Fills should only be returned for the current instance of the slot 36311 // in which they occupy. 36312 if (this.slots[name] !== slotInstance) { 36313 return []; 36314 } 36315 return this.fills[name]; 36316 } 36317 forceUpdateSlot(name) { 36318 const slot = this.getSlot(name); 36319 if (slot) { 36320 slot.forceUpdate(); 36321 } 36322 } 36323 triggerListeners() { 36324 this.listeners.forEach(listener => listener()); 36325 } 36326 subscribe(listener) { 36327 this.listeners.push(listener); 36328 return () => { 36329 this.listeners = this.listeners.filter(l => l !== listener); 36330 }; 36331 } 36332 render() { 36333 return (0,external_wp_element_namespaceObject.createElement)(context.Provider, { 36334 value: this.contextValue 36335 }, this.props.children); 36336 } 36337} 36338 36339;// CONCATENATED MODULE: ./packages/components/build-module/slot-fill/index.js 36340 36341// @ts-nocheck 36342/** 36343 * WordPress dependencies 36344 */ 36345 36346 36347/** 36348 * Internal dependencies 36349 */ 36350 36351 36352 36353 36354 36355 36356 36357 36358 36359function slot_fill_Fill(props) { 36360 // We're adding both Fills here so they can register themselves before 36361 // their respective slot has been registered. Only the Fill that has a slot 36362 // will render. The other one will return null. 36363 return (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, (0,external_wp_element_namespaceObject.createElement)(Fill, { 36364 ...props 36365 }), (0,external_wp_element_namespaceObject.createElement)(fill_Fill, { 36366 ...props 36367 })); 36368} 36369const slot_fill_Slot = (0,external_wp_element_namespaceObject.forwardRef)(({ 36370 bubblesVirtually, 36371 ...props 36372}, ref) => { 36373 if (bubblesVirtually) { 36374 return (0,external_wp_element_namespaceObject.createElement)(bubbles_virtually_slot, { 36375 ...props, 36376 ref: ref 36377 }); 36378 } 36379 return (0,external_wp_element_namespaceObject.createElement)(slot, { 36380 ...props 36381 }); 36382}); 36383function Provider({ 36384 children, 36385 passthrough = false, 36386 ...props 36387}) { 36388 const parent = (0,external_wp_element_namespaceObject.useContext)(slot_fill_context); 36389 if (!parent.isDefault && passthrough) { 36390 return children; 36391 } 36392 return (0,external_wp_element_namespaceObject.createElement)(provider_SlotFillProvider, { 36393 ...props 36394 }, (0,external_wp_element_namespaceObject.createElement)(SlotFillProvider, null, children)); 36395} 36396function createSlotFill(key) { 36397 const baseName = typeof key === 'symbol' ? key.description : key; 36398 const FillComponent = props => (0,external_wp_element_namespaceObject.createElement)(slot_fill_Fill, { 36399 name: key, 36400 ...props 36401 }); 36402 FillComponent.displayName = `${baseName}Fill`; 36403 const SlotComponent = props => (0,external_wp_element_namespaceObject.createElement)(slot_fill_Slot, { 36404 name: key, 36405 ...props 36406 });
36407 SlotComponent.displayName = `${baseName}Slot`; 36408 SlotComponent.__unstableName = key; 36409 return { 36410 Fill: FillComponent, 36411 Slot: SlotComponent 36412 }; 36413} 36414const createPrivateSlotFill = name => { 36415 const privateKey = Symbol(name); 36416 const privateSlotFill = createSlotFill(privateKey); 36417 return { 36418 privateKey, 36419 ...privateSlotFill 36420 }; 36421}; 36422 36423;// CONCATENATED MODULE: ./packages/components/build-module/popover/overlay-middlewares.js 36424/** 36425 * External dependencies 36426 */ 36427 36428 36429function overlayMiddlewares() { 36430 return [{ 36431 name: 'overlay', 36432 fn({ 36433 rects 36434 }) { 36435 return rects.reference; 36436 } 36437 }, size({ 36438 apply({ 36439 rects, 36440 elements 36441 }) { 36442 var _elements$floating; 36443 const { 36444 firstElementChild 36445 } = (_elements$floating = elements.floating) !== null && _elements$floating !== void 0 ? _elements$floating : {}; 36446 36447 // Only HTMLElement instances have the `style` property. 36448 if (!(firstElementChild instanceof HTMLElement)) return; 36449 36450 // Reduce the height of the popover to the available space. 36451 Object.assign(firstElementChild.style, { 36452 width: `${rects.reference.width}px`, 36453 height: `${rects.reference.height}px` 36454 }); 36455 } 36456 })]; 36457} 36458 36459;// CONCATENATED MODULE: ./packages/components/build-module/popover/index.js 36460 36461/** 36462 * External dependencies 36463 */ 36464 36465 36466 36467// eslint-disable-next-line no-restricted-imports 36468 36469// eslint-disable-next-line no-restricted-imports 36470 36471 36472/** 36473 * WordPress dependencies 36474 */ 36475 36476 36477 36478 36479 36480 36481/** 36482 * Internal dependencies 36483 */ 36484 36485 36486 36487 36488 36489 36490 36491/** 36492 * Name of slot in which popover should fill. 36493 * 36494 * @type {string} 36495 */ 36496const SLOT_NAME = 'Popover'; 36497 36498// An SVG displaying a triangle facing down, filled with a solid 36499// color and bordered in such a way to create an arrow-like effect. 36500// Keeping the SVG's viewbox squared simplify the arrow positioning 36501// calculations. 36502const ArrowTriangle = () => (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.SVG, { 36503 xmlns: "http://www.w3.org/2000/svg", 36504 viewBox: `0 0 100 100`, 36505 className: "components-popover__triangle", 36506 role: "presentation" 36507}, (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.Path, { 36508 className: "components-popover__triangle-bg", 36509 d: "M 0 0 L 50 50 L 100 0" 36510}), (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.Path, { 36511 className: "components-popover__triangle-border", 36512 d: "M 0 0 L 50 50 L 100 0", 36513 vectorEffect: "non-scaling-stroke" 36514})); 36515const slotNameContext = (0,external_wp_element_namespaceObject.createContext)(undefined); 36516const fallbackContainerClassname = 'components-popover__fallback-container'; 36517const getPopoverFallbackContainer = () => { 36518 let container = document.body.querySelector('.' + fallbackContainerClassname); 36519 if (!container) { 36520 container = document.createElement('div'); 36521 container.className = fallbackContainerClassname; 36522 document.body.append(container); 36523 } 36524 return container; 36525}; 36526const UnforwardedPopover = (props, forwardedRef) => { 36527 const { 36528 animate = true, 36529 headerTitle, 36530 onClose, 36531 children, 36532 className, 36533 noArrow = true, 36534 position, 36535 placement: placementProp = 'bottom-start', 36536 offset: offsetProp = 0, 36537 focusOnMount = 'firstElement', 36538 anchor, 36539 expandOnMobile, 36540 onFocusOutside, 36541 __unstableSlotName = SLOT_NAME, 36542 flip = true, 36543 resize = true, 36544 shift = false, 36545 inline = false, 36546 variant, 36547 // Deprecated props 36548 __unstableForcePosition, 36549 anchorRef, 36550 anchorRect, 36551 getAnchorRect, 36552 isAlternate, 36553 // Rest 36554 ...contentProps 36555 } = props; 36556 let computedFlipProp = flip; 36557 let computedResizeProp = resize; 36558 if (__unstableForcePosition !== undefined) { 36559 external_wp_deprecated_default()('`__unstableForcePosition` prop in wp.components.Popover', { 36560 since: '6.1', 36561 version: '6.3', 36562 alternative: '`flip={ false }` and `resize={ false }`' 36563 }); 36564 36565 // Back-compat, set the `flip` and `resize` props 36566 // to `false` to replicate `__unstableForcePosition`. 36567 computedFlipProp = !__unstableForcePosition; 36568 computedResizeProp = !__unstableForcePosition; 36569 } 36570 if (anchorRef !== undefined) { 36571 external_wp_deprecated_default()('`anchorRef` prop in wp.components.Popover', { 36572 since: '6.1',
36573 alternative: '`anchor` prop' 36574 }); 36575 } 36576 if (anchorRect !== undefined) { 36577 external_wp_deprecated_default()('`anchorRect` prop in wp.components.Popover', { 36578 since: '6.1', 36579 alternative: '`anchor` prop' 36580 }); 36581 } 36582 if (getAnchorRect !== undefined) { 36583 external_wp_deprecated_default()('`getAnchorRect` prop in wp.components.Popover', { 36584 since: '6.1', 36585 alternative: '`anchor` prop' 36586 }); 36587 } 36588 const computedVariant = isAlternate ? 'toolbar' : variant; 36589 if (isAlternate !== undefined) { 36590 external_wp_deprecated_default()('`isAlternate` prop in wp.components.Popover', { 36591 since: '6.2', 36592 alternative: "`variant` prop with the `'toolbar'` value" 36593 }); 36594 } 36595 const arrowRef = (0,external_wp_element_namespaceObject.useRef)(null); 36596 const [fallbackReferenceElement, setFallbackReferenceElement] = (0,external_wp_element_namespaceObject.useState)(null); 36597 const anchorRefFallback = (0,external_wp_element_namespaceObject.useCallback)(node => { 36598 setFallbackReferenceElement(node); 36599 }, []); 36600 const isMobileViewport = (0,external_wp_compose_namespaceObject.useViewportMatch)('medium', '<'); 36601 const isExpanded = expandOnMobile && isMobileViewport; 36602 const hasArrow = !isExpanded && !noArrow; 36603 const normalizedPlacementFromProps = position ? positionToPlacement(position) : placementProp; 36604 const middleware = [...(placementProp === 'overlay' ? overlayMiddlewares() : []), offset(offsetProp), computedFlipProp && floating_ui_core_flip(), computedResizeProp && size({ 36605 apply(sizeProps) { 36606 var _refs$floating$curren; 36607 const { 36608 firstElementChild 36609 } = (_refs$floating$curren = refs.floating.current) !== null && _refs$floating$curren !== void 0 ? _refs$floating$curren : {}; 36610 36611 // Only HTMLElement instances have the `style` property. 36612 if (!(firstElementChild instanceof HTMLElement)) return; 36613 36614 // Reduce the height of the popover to the available space. 36615 Object.assign(firstElementChild.style, { 36616 maxHeight: `${sizeProps.availableHeight}px`, 36617 overflow: 'auto' 36618 }); 36619 } 36620 }), shift && floating_ui_core_shift({ 36621 crossAxis: true, 36622 limiter: limitShift(), 36623 padding: 1 // Necessary to avoid flickering at the edge of the viewport. 36624 }), floating_ui_react_dom_esm_arrow({ 36625 element: arrowRef 36626 })]; 36627 const slotName = (0,external_wp_element_namespaceObject.useContext)(slotNameContext) || __unstableSlotName; 36628 const slot = useSlot(slotName); 36629 let onDialogClose; 36630 if (onClose || onFocusOutside) { 36631 onDialogClose = (type, event) => { 36632 // Ideally the popover should have just a single onClose prop and 36633 // not three props that potentially do the same thing. 36634 if (type === 'focus-outside' && onFocusOutside) { 36635 onFocusOutside(event); 36636 } else if (onClose) { 36637 onClose(); 36638 } 36639 }; 36640 } 36641 const [dialogRef, dialogProps] = (0,external_wp_compose_namespaceObject.__experimentalUseDialog)({ 36642 focusOnMount, 36643 __unstableOnClose: onDialogClose, 36644 // @ts-expect-error The __unstableOnClose property needs to be deprecated first (see https://github.com/WordPress/gutenberg/pull/27675) 36645 onClose: onDialogClose 36646 }); 36647 const { 36648 // Positioning coordinates 36649 x, 36650 y, 36651 // Object with "regular" refs to both "reference" and "floating" 36652 refs, 36653 // Type of CSS position property to use (absolute or fixed) 36654 strategy, 36655 update, 36656 placement: computedPlacement, 36657 middlewareData: { 36658 arrow: arrowData 36659 } 36660 } = useFloating({ 36661 placement: normalizedPlacementFromProps === 'overlay' ? undefined : normalizedPlacementFromProps, 36662 middleware, 36663 whileElementsMounted: (referenceParam, floatingParam, updateParam) => autoUpdate(referenceParam, floatingParam, updateParam, { 36664 layoutShift: false, 36665 animationFrame: true 36666 }) 36667 }); 36668 const arrowCallbackRef = (0,external_wp_element_namespaceObject.useCallback)(node => { 36669 arrowRef.current = node; 36670 update(); 36671 }, [update]); 36672 36673 // When any of the possible anchor "sources" change, 36674 // recompute the reference element (real or virtual) and its owner document. 36675 36676 const anchorRefTop = anchorRef?.top; 36677 const anchorRefBottom = anchorRef?.bottom; 36678 const anchorRefStartContainer = anchorRef?.startContainer; 36679 const anchorRefCurrent = anchorRef?.current; 36680 (0,external_wp_element_namespaceObject.useLayoutEffect)(() => { 36681 const resultingReferenceElement = getReferenceElement({ 36682 anchor, 36683 anchorRef, 36684 anchorRect, 36685 getAnchorRect, 36686 fallbackReferenceElement 36687 }); 36688 refs.setReference(resultingReferenceElement); 36689 }, [anchor, anchorRef, anchorRefTop, anchorRefBottom, anchorRefStartContainer, anchorRefCurrent, anch
36689orRect, getAnchorRect, fallbackReferenceElement, refs]); 36690 const mergedFloatingRef = (0,external_wp_compose_namespaceObject.useMergeRefs)([refs.setFloating, dialogRef, forwardedRef]); 36691 const style = isExpanded ? undefined : { 36692 position: strategy, 36693 top: 0, 36694 left: 0, 36695 // `x` and `y` are framer-motion specific props and are shorthands 36696 // for `translateX` and `translateY`. Currently it is not possible 36697 // to use `translateX` and `translateY` because those values would 36698 // be overridden by the return value of the 36699 // `placementToMotionAnimationProps` function. 36700 x: computePopoverPosition(x), 36701 y: computePopoverPosition(y) 36702 }; 36703 const shouldReduceMotion = useReducedMotion(); 36704 const shouldAnimate = animate && !isExpanded && !shouldReduceMotion; 36705 const [animationFinished, setAnimationFinished] = (0,external_wp_element_namespaceObject.useState)(false); 36706 const { 36707 style: motionInlineStyles, 36708 ...otherMotionProps 36709 } = (0,external_wp_element_namespaceObject.useMemo)(() => placementToMotionAnimationProps(computedPlacement), [computedPlacement]); 36710 const animationProps = shouldAnimate ? { 36711 style: { 36712 ...motionInlineStyles, 36713 ...style 36714 }, 36715 onAnimationComplete: () => setAnimationFinished(true), 36716 ...otherMotionProps 36717 } : { 36718 animate: false, 36719 style 36720 }; 36721 36722 // When Floating UI has finished positioning and Framer Motion has finished animating 36723 // the popover, add the `is-positioned` class to signal that all transitions have finished. 36724 const isPositioned = (!shouldAnimate || animationFinished) && x !== null && y !== null; 36725 let content = (0,external_wp_element_namespaceObject.createElement)(motion.div, { 36726 className: classnames_default()('components-popover', className, { 36727 'is-expanded': isExpanded, 36728 'is-positioned': isPositioned, 36729 // Use the 'alternate' classname for 'toolbar' variant for back compat. 36730 [`is-${computedVariant === 'toolbar' ? 'alternate' : computedVariant}`]: computedVariant 36731 }), 36732 ...animationProps, 36733 ...contentProps, 36734 ref: mergedFloatingRef, 36735 ...dialogProps, 36736 tabIndex: -1 36737 }, isExpanded && (0,external_wp_element_namespaceObject.createElement)(scroll_lock, null), isExpanded && (0,external_wp_element_namespaceObject.createElement)("div", { 36738 className: "components-popover__header" 36739 }, (0,external_wp_element_namespaceObject.createElement)("span", { 36740 className: "components-popover__header-title" 36741 }, headerTitle), (0,external_wp_element_namespaceObject.createElement)(build_module_button, { 36742 className: "components-popover__close", 36743 icon: library_close, 36744 onClick: onClose 36745 })), (0,external_wp_element_namespaceObject.createElement)("div", { 36746 className: "components-popover__content" 36747 }, children), hasArrow && (0,external_wp_element_namespaceObject.createElement)("div", { 36748 ref: arrowCallbackRef, 36749 className: ['components-popover__arrow', `is-${computedPlacement.split('-')[0]}`].join(' '), 36750 style: { 36751 left: typeof arrowData?.x !== 'undefined' && Number.isFinite(arrowData.x) ? `${arrowData.x}px` : '', 36752 top: typeof arrowData?.y !== 'undefined' && Number.isFinite(arrowData.y) ? `${arrowData.y}px` : '' 36753 } 36754 }, (0,external_wp_element_namespaceObject.createElement)(ArrowTriangle, null))); 36755 const shouldRenderWithinSlot = slot.ref && !inline; 36756 const hasAnchor = anchorRef || anchorRect || anchor; 36757 if (shouldRenderWithinSlot) { 36758 content = (0,external_wp_element_namespaceObject.createElement)(slot_fill_Fill, { 36759 name: slotName 36760 }, content); 36761 } else if (!inline) { 36762 content = (0,external_wp_element_namespaceObject.createPortal)((0,external_wp_element_namespaceObject.createElement)(StyleProvider, { 36763 document: document 36764 }, content), getPopoverFallbackContainer()); 36765 } 36766 if (hasAnchor) { 36767 return content; 36768 } 36769 return (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, (0,external_wp_element_namespaceObject.createElement)("span", { 36770 ref: anchorRefFallback 36771 }), content); 36772}; 36773 36774/** 36775 * `Popover` renders its content in a floating modal. If no explicit anchor is passed via props, it anchors to its parent element by default. 36776 * 36777 * ```jsx 36778 * import { Button, Popover } from '@wordpress/components';
36779 * import { useState } from '@wordpress/element'; 36780 * 36781 * const MyPopover = () => { 36782 * const [ isVisible, setIsVisible ] = useState( false ); 36783 * const toggleVisible = () => { 36784 * setIsVisible( ( state ) => ! state ); 36785 * }; 36786 * 36787 * return ( 36788 * <Button variant="secondary" onClick={ toggleVisible }> 36789 * Toggle Popover! 36790 * { isVisible && <Popover>Popover is toggled!</Popover> } 36791 * </Button> 36792 * ); 36793 * }; 36794 * ``` 36795 * 36796 */ 36797const popover_Popover = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedPopover); 36798function PopoverSlot({ 36799 name = SLOT_NAME 36800}, ref) { 36801 return (0,external_wp_element_namespaceObject.createElement)(slot_fill_Slot 36802 // @ts-expect-error Need to type `SlotFill` 36803 , { 36804 bubblesVirtually: true, 36805 name: name, 36806 className: "popover-slot", 36807 ref: ref 36808 }); 36809} 36810 36811// @ts-expect-error For Legacy Reasons 36812popover_Popover.Slot = (0,external_wp_element_namespaceObject.forwardRef)(PopoverSlot); 36813// @ts-expect-error For Legacy Reasons 36814popover_Popover.__unstableSlotNameProvider = slotNameContext.Provider; 36815/* harmony default export */ const popover = (popover_Popover); 36816 36817;// CONCATENATED MODULE: ./packages/components/build-module/autocomplete/autocompleter-ui.js 36818 36819/** 36820 * External dependencies 36821 */ 36822 36823 36824/** 36825 * WordPress dependencies 36826 */ 36827 36828 36829 36830 36831 36832 36833/** 36834 * Internal dependencies 36835 */ 36836 36837 36838 36839 36840 36841function getAutoCompleterUI(autocompleter) { 36842 const useItems = autocompleter.useItems ? autocompleter.useItems : getDefaultUseItems(autocompleter); 36843 function AutocompleterUI({ 36844 filterValue, 36845 instanceId, 36846 listBoxId, 36847 className, 36848 selectedIndex, 36849 onChangeOptions, 36850 onSelect, 36851 onReset, 36852 reset, 36853 contentRef 36854 }) { 36855 const [items] = useItems(filterValue); 36856 const popoverAnchor = (0,external_wp_richText_namespaceObject.useAnchor)({ 36857 editableContentElement: contentRef.current 36858 }); 36859 const [needsA11yCompat, setNeedsA11yCompat] = (0,external_wp_element_namespaceObject.useState)(false); 36860 const popoverRef = (0,external_wp_element_namespaceObject.useRef)(null); 36861 const popoverRefs = (0,external_wp_compose_namespaceObject.useMergeRefs)([popoverRef, (0,external_wp_compose_namespaceObject.useRefEffect)(node => { 36862 if (!contentRef.current) return; 36863 36864 // If the popover is rendered in a different document than 36865 // the content, we need to duplicate the options list in the 36866 // content document so that it's available to the screen 36867 // readers, which check the DOM ID based aira-* attributes. 36868 setNeedsA11yCompat(node.ownerDocument !== contentRef.current.ownerDocument); 36869 }, [contentRef])]); 36870 useOnClickOutside(popoverRef, reset); 36871 const debouncedSpeak = (0,external_wp_compose_namespaceObject.useDebounce)(external_wp_a11y_namespaceObject.speak, 500); 36872 function announce(options) { 36873 if (!debouncedSpeak) { 36874 return; 36875 } 36876 if (!!options.length) { 36877 if (filterValue) { 36878 debouncedSpeak((0,external_wp_i18n_namespaceObject.sprintf)( /* translators: %d: number of results. */ 36879 (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'); 36880 } else { 36881 debouncedSpeak((0,external_wp_i18n_namespaceObject.sprintf)( /* translators: %d: number of results. */ 36882 (0,external_wp_i18n_namespaceObject._n)('Initial %d result loaded. Type to filter all available results. Use up and down arrow keys to navigate.', 'Initial %d results loaded. Type to filter all available results. Use up and down arrow keys to navigate.', options.length), options.length), 'assertive'); 36883 } 36884 } else { 36885 debouncedSpeak((0,external_wp_i18n_namespaceObject.__)('No results.'), 'assertive'); 36886 } 36887 } 36888 (0,external_wp_element_namespaceObject.useLayoutEffect)(() => { 36889 onChangeOptions(items); 36890 announce(items); 36891 // Temporarily disabling exhaustive-deps to avoid introducing unexpected side effecst. 36892 // See https://github.com/WordPress/gutenberg/pull/41820 36893 // eslint-disable-next-line react-hooks/exhaustive-deps 36894 }, [items]); 36895 if (items.length === 0) { 36896 return null; 36897 } 36898 const ListBox = ({ 36899 Component = 'div' 36900 }) => (0,external_wp_element_namespaceObject.createElement)(Component, { 36901 id: listBoxId, 36902 role: "listbox", 36903 className: "components-autocomplete__results" 36904 }, items.map((option, index) => (0,external_wp_element_namespaceObject.createElement)(build_module_button, { 36905 key: option.key, 36906 id: `components-autocomplete-item-${instanceId}-${option.key}`, 36907 role: "option", 36908 "aria-selected": index === selectedIndex, 36909 disabled: option.isDisabled, 36910 className: classnames_default()('components-autocomplete__result', className, { 36911 'is-selected': index === selectedIndex 36912 }), 36913 onClick: () => onSelect(option) 36914 }, option.label))); 36915 return (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, (0,external_wp_element_namespaceObject.createElement)(popover, { 36916 focusOnMount: false, 36917 onClose: onReset, 36918 placement: "top-start", 36919 className: "components-autocomplete__popover", 36920 anchor: popoverAnchor, 36921 ref: popoverRefs 36922 }, (0,external_wp_element_namespaceObject.createElement)(ListBox, null)), contentRef.current && needsA11yCompat && (0,external_ReactDOM_namespaceObject.createPortal)((0,external_wp_element_namespaceObject.createElement)(ListBox, { 36923 Component: visually_hidden_component 36924 }), contentRef.current.ownerDocument.body)); 36925 } 36926 return AutocompleterUI; 36927} 36928function useOnClickOutside(ref, handler) { 36929 (0,external_wp_element_namespaceObject.useEffect)(() => { 36930 const listener = event => {
36931 // Do nothing if clicking ref's element or descendent elements, or if the ref is not referencing an element 36932 if (!ref.current || ref.current.contains(event.target)) { 36933 return; 36934 } 36935 handler(event); 36936 }; 36937 document.addEventListener('mousedown', listener); 36938 document.addEventListener('touchstart', listener); 36939 return () => { 36940 document.removeEventListener('mousedown', listener); 36941 document.removeEventListener('touchstart', listener); 36942 }; 36943 // Disable reason: `ref` is a ref object and should not be included in a 36944 // hook's dependency list. 36945 // eslint-disable-next-line react-hooks/exhaustive-deps 36946 }, [handler]); 36947} 36948 36949;// CONCATENATED MODULE: ./packages/components/build-module/autocomplete/index.js 36950 36951/** 36952 * External dependencies 36953 */ 36954 36955 36956/** 36957 * WordPress dependencies 36958 */ 36959 36960 36961 36962 36963 36964 36965/** 36966 * Internal dependencies 36967 */ 36968 36969 36970const getNodeText = node => { 36971 if (node === null) { 36972 return ''; 36973 } 36974 switch (typeof node) { 36975 case 'string': 36976 case 'number': 36977 return node.toString(); 36978 break; 36979 case 'boolean': 36980 return ''; 36981 break; 36982 case 'object': 36983 { 36984 if (node instanceof Array) { 36985 return node.map(getNodeText).join(''); 36986 } 36987 if ('props' in node) { 36988 return getNodeText(node.props.children); 36989 } 36990 break; 36991 } 36992 default: 36993 return ''; 36994 } 36995 return ''; 36996}; 36997const EMPTY_FILTERED_OPTIONS = []; 36998function useAutocomplete({ 36999 record, 37000 onChange, 37001 onReplace, 37002 completers, 37003 contentRef 37004}) { 37005 const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(useAutocomplete); 37006 const [selectedIndex, setSelectedIndex] = (0,external_wp_element_namespaceObject.useState)(0); 37007 const [filteredOptions, setFilteredOptions] = (0,external_wp_element_namespaceObject.useState)(EMPTY_FILTERED_OPTIONS); 37008 const [filterValue, setFilterValue] = (0,external_wp_element_namespaceObject.useState)(''); 37009 const [autocompleter, setAutocompleter] = (0,external_wp_element_namespaceObject.useState)(null); 37010 const [AutocompleterUI, setAutocompleterUI] = (0,external_wp_element_namespaceObject.useState)(null); 37011 const backspacing = (0,external_wp_element_namespaceObject.useRef)(false); 37012 function insertCompletion(replacement) { 37013 if (autocompleter === null) { 37014 return; 37015 } 37016 const end = record.start; 37017 const start = end - autocompleter.triggerPrefix.length - filterValue.length; 37018 const toInsert = (0,external_wp_richText_namespaceObject.create)({ 37019 html: (0,external_wp_element_namespaceObject.renderToString)(replacement) 37020 }); 37021 onChange((0,external_wp_richText_namespaceObject.insert)(record, toInsert, start, end)); 37022 } 37023 function select(option) { 37024 const { 37025 getOptionCompletion 37026 } = autocompleter || {}; 37027 if (option.isDisabled) { 37028 return; 37029 } 37030 if (getOptionCompletion) { 37031 const completion = getOptionCompletion(option.value, filterValue); 37032 const isCompletionObject = obj => { 37033 return obj !== null && typeof obj === 'object' && 'action' in obj && obj.action !== undefined && 'value' in obj && obj.value !== undefined; 37034 }; 37035 const completionObject = isCompletionObject(completion) ? completion : { 37036 action: 'insert-at-caret', 37037 value: completion 37038 }; 37039 if ('replace' === completionObject.action) { 37040 onReplace([completionObject.value]); 37041 // When replacing, the component will unmount, so don't reset 37042 // state (below) on an unmounted component. 37043 return; 37044 } else if ('insert-at-caret' === completionObject.action) { 37045 insertCompletion(completionObject.value); 37046 } 37047 } 37048 37049 // Reset autocomplete state after insertion rather than before 37050 // so insertion events don't cause the completion menu to redisplay. 37051 reset(); 37052 } 37053 function reset() { 37054 setSelectedIndex(0); 37055 setFilteredOptions(EMPTY_FILTERED_OPTIONS); 37056 setFilterValue(''); 37057 setAutocompleter(null); 37058 setAutocompleterUI(null); 37059 } 37060 37061 /** 37062 * Load options for an autocompleter. 37063 * 37064 * @param {Array} options 37065 */ 37066 function onChangeOptions(options) { 37067 setSelectedIndex(options.length === filteredOptions.length ? selectedIndex : 0); 37068 setFilteredOptions(options); 37069 } 37070 function handleKeyDown(event) { 37071 backspacing.current = event.key === 'Backspace'; 37072 if (!autocompleter) { 37073 return; 37074 } 37075 if (filteredOptions.length === 0) { 37076 return; 37077 } 37078 if (event.defaultPrevented || 37079 // Ignore keydowns from IMEs 37080 event.isComposing || 37081 // Workaround for Mac Safari where the final Enter/Backspace of an IME composition 37082 // is `isComposing=false`, even though it's technically still part of the composition. 37083 // These can only be detected by keyCode. 37084 event.keyCode === 229) { 37085 return; 37086 } 37087 switch (event.key) { 37088 case 'ArrowUp': 37089 { 37090 const newIndex = (selectedIndex === 0 ? filteredOptions.length : selectedIndex) - 1; 37091 setSelectedIndex(newIndex); 37092 // See the related PR as to why this is necessary: https://github.com/WordPress/gutenberg/pull/54902. 37093 if ((0,external_wp_keycodes_namespaceObject.isAppleOS)()) { 37094 (0,external_wp_a11y_namespaceObject.speak)(getNodeText(filteredOptions[newIndex].label), 'assertive'); 37095 } 37096 break; 37097 } 37098 case 'ArrowDown': 37099 { 37100 const newIndex = (selectedIndex + 1) % filteredOptions.length; 37101 setSelectedIndex(newIndex); 37102 if ((0,external_wp_keycodes_namespaceObject.isAppleOS)()) { 37103 (0,external_wp_a11y_namespaceObject.speak)(getNodeText(filteredOptions[newIndex].label), 'assertive'); 37104 } 37105 break; 37106 } 37107 case 'Escape': 37108 setAutocompleter(null); 37109 setAutocompleterUI(null); 37110 event.preventDefault(); 37111 break; 37112 case 'Enter': 37113 select(filteredOptions[selectedIndex]); 37114 break; 37115 case 'ArrowLeft': 37116 case 'ArrowRight': 37117 reset(); 37118 return; 37119 default: 37120 return; 37121 } 37122 37123 // Any handled key should prevent original behavior. This relies on 37124 // the early return in the default case. 37125 event.preventDefault(); 37126 } 37127 37128 // textContent is a primitive (string), memoizing is not strictly necessary 37129 // but this is a preemptive performance improvement, since the autocompleter 37130 // is a potential bottleneck for the editor type metric. 37131 const textContent = (0,external_wp_element_namespaceObject.useMemo)(() => { 37132 if ((0,external_wp_richText_namespaceObject.isCollapsed)(record)) { 37133 return (0,external_wp_richText_namespaceObject.getTextContent)((0,external_wp_richText_namespaceObject.slice)(record, 0)); 37134 } 37135 return ''; 37136 }, [record]); 37137 (0,external_wp_element_namespaceObject.useEffect)(() => { 37138 if (!textContent) { 37139 if (autocompleter) reset(); 37140 return; 37141 } 37142 const completer = completers?.find(({ 37143 triggerPrefix, 37144 allowContext 37145 }) => { 37146 const index = textContent.lastIndexOf(triggerPrefix); 37147 if (index === -1) { 37148 return false;
37149 } 37150 const textWithoutTrigger = textContent.slice(index + triggerPrefix.length); 37151 const tooDistantFromTrigger = textWithoutTrigger.length > 50; // 50 chars seems to be a good limit. 37152 // This is a final barrier to prevent the effect from completing with 37153 // an extremely long string, which causes the editor to slow-down 37154 // significantly. This could happen, for example, if `matchingWhileBackspacing` 37155 // is true and one of the "words" end up being too long. If that's the case, 37156 // it will be caught by this guard. 37157 if (tooDistantFromTrigger) return false; 37158 const mismatch = filteredOptions.length === 0; 37159 const wordsFromTrigger = textWithoutTrigger.split(/\s/); 37160 // We need to allow the effect to run when not backspacing and if there 37161 // was a mismatch. i.e when typing a trigger + the match string or when 37162 // clicking in an existing trigger word on the page. We do that if we 37163 // detect that we have one word from trigger in the current textual context. 37164 // 37165 // Ex.: "Some text @a" <-- "@a" will be detected as the trigger word and 37166 // allow the effect to run. It will run until there's a mismatch. 37167 const hasOneTriggerWord = wordsFromTrigger.length === 1; 37168 // This is used to allow the effect to run when backspacing and if 37169 // "touching" a word that "belongs" to a trigger. We consider a "trigger 37170 // word" any word up to the limit of 3 from the trigger character. 37171 // Anything beyond that is ignored if there's a mismatch. This allows 37172 // us to "escape" a mismatch when backspacing, but still imposing some 37173 // sane limits. 37174 // 37175 // Ex: "Some text @marcelo sekkkk" <--- "kkkk" caused a mismatch, but 37176 // if the user presses backspace here, it will show the completion popup again. 37177 const matchingWhileBackspacing = backspacing.current && textWithoutTrigger.split(/\s/).length <= 3; 37178 if (mismatch && !(matchingWhileBackspacing || hasOneTriggerWord)) { 37179 return false; 37180 } 37181 const textAfterSelection = (0,external_wp_richText_namespaceObject.getTextContent)((0,external_wp_richText_namespaceObject.slice)(record, undefined, (0,external_wp_richText_namespaceObject.getTextContent)(record).length)); 37182 if (allowContext && !allowContext(textContent.slice(0, index), textAfterSelection)) { 37183 return false; 37184 } 37185 if (/^\s/.test(textWithoutTrigger) || /\s\s+$/.test(textWithoutTrigger)) { 37186 return false; 37187 } 37188 return /[\u0000-\uFFFF]*$/.test(textWithoutTrigger); 37189 }); 37190 if (!completer) { 37191 if (autocompleter) reset(); 37192 return; 37193 } 37194 const safeTrigger = escapeRegExp(completer.triggerPrefix); 37195 const text = remove_accents_default()(textContent); 37196 const match = text.slice(text.lastIndexOf(completer.triggerPrefix)).match(new RegExp(`${safeTrigger}([\u0000-\uFFFF]*)$`)); 37197 const query = match && match[1]; 37198 setAutocompleter(completer); 37199 setAutocompleterUI(() => completer !== autocompleter ? getAutoCompleterUI(completer) : AutocompleterUI); 37200 setFilterValue(query === null ? '' : query); 37201 // Temporarily disabling exhaustive-deps to avoid introducing unexpected side effecst. 37202 // See https://github.com/WordPress/gutenberg/pull/41820 37203 // eslint-disable-next-line react-hooks/exhaustive-deps 37204 }, [textContent]); 37205 const { 37206 key: selectedKey = '' 37207 } = filteredOptions[selectedIndex] || {}; 37208 const { 37209 className 37210 } = autocompleter || {}; 37211 const isExpanded = !!autocompleter && filteredOptions.length > 0; 37212 const listBoxId = isExpanded ? `components-autocomplete-listbox-${instanceId}` : undefined; 37213 const activeId = isExpanded ? `components-autocomplete-item-${instanceId}-${selectedKey}` : null; 37214 const hasSelection = record.start !== undefined; 37215 return { 37216 listBoxId, 37217 activeId, 37218 onKeyDown: handleKeyDown, 37219 popover: hasSelection && AutocompleterUI && (0,external_wp_element_namespaceObject.createElement)(AutocompleterUI, { 37220 className: className, 37221 filterValue: filterValue, 37222 instanceId: instanceId, 37223 listBoxId: listBoxId, 37224 selectedIndex: selectedIndex, 37225 onChangeOptions: onChangeOptions, 37226 onSelect: select, 37227 value: record, 37228 contentRef: contentRef, 37229 reset: reset 37230 }) 37231 }; 37232} 37233function useLastDifferentValue(value) { 37234 const history = (0,external_wp_element_namespaceObject.useRef)(new Set()); 37235 history.current.add(value); 37236 37237 // Keep the history size to 2. 37238 if (history.current.size > 2) { 37239 history.current.delete(Array.from(history.current)[0]); 37240 } 37241 return Array.from(history.current)[0]; 37242} 37243function useAutocompleteProps(options) { 37244 const ref = (0,external_wp_element_namespaceObject.useRef)(null); 37245 const onKeyDownRef = (0,external_wp_element_namespaceObject.useRef)(); 37246 const { 37247 record 37248 } = options; 37249 const previousRecord = useLastDifferentValue(record); 37250 const { 37251 popover, 37252 listBoxId, 37253 activeId, 37254 onKeyDown 37255 } = useAutocomplete({ 37256 ...options, 37257 contentRef: ref 37258 }); 37259 onKeyDownRef.current = onKeyDown; 37260 const mergedRefs = (0,external_wp_compose_namespaceObject.useMergeRefs)([ref, (0,external_wp_compose_namespaceObject.useRefEffect)(element => { 37261 function _onKeyDown(event) { 37262 onKeyDownRef.current?.(event); 37263 } 37264 element.addEventListener('keydown', _onKeyDown); 37265 return () => { 37266 element.removeEventListener('keydown', _onKeyDown); 37267 }; 37268 }, [])]); 37269 37270 // We only want to show the popover if the user has typed something. 37271 const didUserInput = record.text !== previousRecord?.text; 37272 if (!didUserInput) { 37273 return { 37274 ref: mergedRefs 37275 }; 37276 } 37277 return { 37278 ref: mergedRefs, 37279 children: popover, 37280 'aria-autocomplete': listBoxId ? 'list' : undefined, 37281 'aria-owns': listBoxId, 37282 'aria-activedescendant': activeId 37283 }; 37284} 37285function Autocomplete({ 37286 children, 37287 isSelected, 37288 ...options 37289}) { 37290 const { 37291 popover, 37292 ...props 37293 } = useAutocomplete(options); 37294 return (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, children(props), isSelected && popover); 37295} 37296 37297;// CONCATENATED MODULE: ./packages/components/build-module/base-control/hooks.js 37298/** 37299 * WordPress dependencies 37300 */ 37301 37302 37303/** 37304 * Internal dependencies 37305 */ 37306
37307/** 37308 * Generate props for the `BaseControl` and the inner control itself. 37309 * 37310 * Namely, it takes care of generating a unique `id`, properly associating it with the `label` and `help` elements. 37311 * 37312 * @param props 37313 */ 37314function useBaseControlProps(props) { 37315 const { 37316 help, 37317 id: preferredId, 37318 ...restProps 37319 } = props; 37320 const uniqueId = (0,external_wp_compose_namespaceObject.useInstanceId)(base_control, 'wp-components-base-control', preferredId); 37321 37322 // ARIA descriptions can only contain plain text, so fall back to aria-details if not. 37323 const helpPropName = typeof help === 'string' ? 'aria-describedby' : 'aria-details'; 37324 return { 37325 baseControlProps: { 37326 id: uniqueId, 37327 help, 37328 ...restProps 37329 }, 37330 controlProps: { 37331 id: uniqueId, 37332 ...(!!help ? { 37333 [helpPropName]: `${uniqueId}__help` 37334 } : {}) 37335 } 37336 }; 37337} 37338 37339;// CONCATENATED MODULE: ./packages/icons/build-module/library/link.js 37340 37341/** 37342 * WordPress dependencies 37343 */ 37344 37345const link_link = (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.SVG, { 37346 xmlns: "http://www.w3.org/2000/svg", 37347 viewBox: "0 0 24 24" 37348}, (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.Path, { 37349 d: "M10 17.389H8.444A5.194 5.194 0 1 1 8.444 7H10v1.5H8.444a3.694 3.694 0 0 0 0 7.389H10v1.5ZM14 7h1.556a5.194 5.194 0 0 1 0 10.39H14v-1.5h1.556a3.694 3.694 0 0 0 0-7.39H14V7Zm-4.5 6h5v-1.5h-5V13Z" 37350})); 37351/* harmony default export */ const library_link = (link_link); 37352 37353;// CONCATENATED MODULE: ./packages/icons/build-module/library/link-off.js 37354 37355/** 37356 * WordPress dependencies 37357 */ 37358 37359const linkOff = (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.SVG, { 37360 xmlns: "http://www.w3.org/2000/svg", 37361 viewBox: "0 0 24 24" 37362}, (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.Path, { 37363 d: "M17.031 4.703 15.576 4l-1.56 3H14v.03l-2.324 4.47H9.5V13h1.396l-1.502 2.889h-.95a3.694 3.694 0 0 1 0-7.389H10V7H8.444a5.194 5.194 0 1 0 0 10.389h.17L7.5 19.53l1.416.719L15.049 8.5h.507a3.694 3.694 0 0 1 0 7.39H14v1.5h1.556a5.194 5.194 0 0 0 .273-10.383l1.202-2.304Z" 37364})); 37365/* harmony default export */ const link_off = (linkOff); 37366 37367;// CONCATENATED MODULE: ./packages/components/build-module/border-box-control/styles.js 37368function 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)."; } 37369/** 37370 * External dependencies 37371 */ 37372 37373 37374/** 37375 * Internal dependencies 37376 */ 37377 37378const borderBoxControl = /*#__PURE__*/emotion_react_browser_esm_css( true ? "" : 0, true ? "" : 0); 37379const linkedBorderControl = () => /*#__PURE__*/emotion_react_browser_esm_css("flex:1;", rtl({ 37380 marginRight: '24px' 37381})(), ";" + ( true ? "" : 0), true ? "" : 0); 37382const wrapper = true ? { 37383 name: "bjn8wh", 37384 styles: "position:relative" 37385} : 0; 37386const borderBoxControlLinkedButton = size => { 37387 return /*#__PURE__*/emotion_react_browser_esm_css("position:absolute;top:", size === '__unstable-large' ? '8px' : '3px', ";", rtl({ 37388 right: 0 37389 })(), " line-height:0;" + ( true ? "" : 0), true ? "" : 0); 37390}; 37391const borderBoxStyleWithFallback = border => { 37392 const { 37393 color = COLORS.gray[200], 37394 style = 'solid', 37395 width = config_values.borderWidth 37396 } = border || {}; 37397 const clampedWidth = width !== config_values.borderWidth ? `clamp(1px, ${width}, 10px)` : width; 37398 const hasVisibleBorder = !!width && width !== '0' || !!color; 37399 const borderStyle = hasVisibleBorder ? style || 'solid' : style; 37400 return `${color} ${borderStyle} ${clampedWidth}`; 37401}; 37402const borderBoxControlVisualizer = (borders, size) => { 37403 return /*#__PURE__*/emotion_react_browser_esm_css("position:absolute;top:", size === '__unstable-large' ? '20px' : '15px', ";right:", size === '__unstable-large' ? '39px' : '29px', ";bottom:", size === '__unstable-large' ? '20px' : '15px', ";left:", size === '__unstable-large' ? '39px' : '29px', ";border-top:", borderBoxStyleWithFallback(borders?.top), ";border-bottom:", borderBoxStyleWithFallback(borders?.bottom), ";", rtl({ 37404 borderLeft: borderBoxStyleWithFallback(borders?.left) 37405 })(), " ", rtl({ 37406 borderRight: borderBoxStyleWithFallback(borders?.right) 37407 })(), ";" + ( true ? "" : 0), true ? "" : 0); 37408}; 37409const borderBoxControlSplitControls = size =>
37409 /*#__PURE__*/emotion_react_browser_esm_css("position:relative;flex:1;width:", size === '__unstable-large' ? undefined : '80%', ";" + ( true ? "" : 0), true ? "" : 0); 37410const centeredBorderControl = true ? { 37411 name: "1nwbfnf", 37412 styles: "grid-column:span 2;margin:0 auto" 37413} : 0; 37414const rightBorderControl = () => /*#__PURE__*/emotion_react_browser_esm_css(rtl({ 37415 marginLeft: 'auto' 37416})(), ";" + ( true ? "" : 0), true ? "" : 0); 37417 37418;// CONCATENATED MODULE: ./packages/components/build-module/border-box-control/border-box-control-linked-button/hook.js 37419/** 37420 * WordPress dependencies 37421 */ 37422 37423 37424/** 37425 * Internal dependencies 37426 */ 37427 37428 37429 37430function useBorderBoxControlLinkedButton(props) { 37431 const { 37432 className, 37433 size = 'default', 37434 ...otherProps 37435 } = useContextSystem(props, 'BorderBoxControlLinkedButton'); 37436 37437 // Generate class names. 37438 const cx = useCx(); 37439 const classes = (0,external_wp_element_namespaceObject.useMemo)(() => { 37440 return cx(borderBoxControlLinkedButton(size), className); 37441 }, [className, cx, size]); 37442 return { 37443 ...otherProps, 37444 className: classes 37445 }; 37446} 37447 37448;// CONCATENATED MODULE: ./packages/components/build-module/border-box-control/border-box-control-linked-button/component.js 37449 37450/** 37451 * WordPress dependencies 37452 */ 37453 37454 37455 37456/** 37457 * Internal dependencies 37458 */ 37459 37460 37461 37462 37463 37464const BorderBoxControlLinkedButton = (props, forwardedRef) => { 37465 const { 37466 className, 37467 isLinked, 37468 ...buttonProps 37469 } = useBorderBoxControlLinkedButton(props); 37470 const label = isLinked ? (0,external_wp_i18n_namespaceObject.__)('Unlink sides') : (0,external_wp_i18n_namespaceObject.__)('Link sides'); 37471 return (0,external_wp_element_namespaceObject.createElement)(tooltip, { 37472 text: label 37473 }, (0,external_wp_element_namespaceObject.createElement)(component, { 37474 className: className 37475 }, (0,external_wp_element_namespaceObject.createElement)(build_module_button, { 37476 ...buttonProps, 37477 isSmall: true, 37478 icon: isLinked ? library_link : link_off, 37479 iconSize: 24, 37480 "aria-label": label, 37481 ref: forwardedRef 37482 }))); 37483}; 37484const ConnectedBorderBoxControlLinkedButton = contextConnect(BorderBoxControlLinkedButton, 'BorderBoxControlLinkedButton'); 37485/* harmony default export */ const border_box_control_linked_button_component = (ConnectedBorderBoxControlLinkedButton); 37486 37487;// CONCATENATED MODULE: ./packages/components/build-module/border-box-control/border-box-control-visualizer/hook.js 37488/** 37489 * WordPress dependencies 37490 */ 37491 37492 37493/** 37494 * Internal dependencies 37495 */ 37496 37497 37498 37499function useBorderBoxControlVisualizer(props) { 37500 const { 37501 className, 37502 value, 37503 size = 'default', 37504 ...otherProps 37505 } = useContextSystem(props, 'BorderBoxControlVisualizer'); 37506 37507 // Generate class names. 37508 const cx = useCx(); 37509 const classes = (0,external_wp_element_namespaceObject.useMemo)(() => { 37510 return cx(borderBoxControlVisualizer(value, size), className); 37511 }, [cx, className, value, size]); 37512 return { 37513 ...otherProps, 37514 className: classes, 37515 value 37516 }; 37517} 37518 37519;// CONCATENATED MODULE: ./packages/components/build-module/border-box-control/border-box-control-visualizer/component.js 37520 37521/** 37522 * WordPress dependencies 37523 */ 37524 37525/** 37526 * Internal dependencies 37527 */ 37528 37529 37530 37531const BorderBoxControlVisualizer = (props, forwardedRef) => { 37532 const { 37533 value, 37534 ...otherProps 37535 } = useBorderBoxControlVisualizer(props); 37536 return (0,external_wp_element_namespaceObject.createElement)(component, { 37537 ...otherProps, 37538 ref: forwardedRef 37539 }); 37540}; 37541const ConnectedBorderBoxControlVisualizer = contextConnect(BorderBoxControlVisualizer, 'BorderBoxControlVisualizer'); 37542/* harmony default export */ const border_box_control_visualizer_component = (ConnectedBorderBoxControlVisualizer); 37543 37544;// CONCATENATED MODULE: ./packages/icons/build-module/library/close-small.js 37545 37546/** 37547 * WordPress dependencies 37548 */ 37549 37550const closeSmall = (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.SVG, { 37551 xmlns: "http://www.w3.org/2000/svg", 37552 viewBox: "0 0 24 24" 37553}, (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.Path, { 37554 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" 37555})); 37556/* harmony default export */ const close_small = (closeSmall); 37557 37558;// CONCATENATED MODULE: ./packages/icons/build-module/library/line-solid.js 37559 37560/** 37561 * WordPress dependencies 37562 */ 37563 37564const lineSolid = (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.SVG, { 37565 xmlns: "http://www.w3.org/2000/svg", 37566 viewBox: "0 0 24 24" 37567}, (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.Path, { 37568 d: "M5 11.25h14v1.5H5z" 37569})); 37570/* harmony default export */ const line_solid = (lineSolid); 37571 37572;// CONCATENATED MODULE: ./packages/icons/build-module/library/line-dashed.js 37573 37574/** 37575 * WordPress dependencies 37576 */ 37577 37578const lineDashed = (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.SVG, { 37579 xmlns: "http://www.w3.org/2000/svg", 37580 viewBox: "0 0 24 24" 37581}, (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.Path, { 37582 fillRule: "evenodd", 37583 d: "M5 11.25h3v1.5H5v-1.5zm5.5 0h3v1.5h-3v-1.5zm8.5 0h-3v1.5h3v-1.5z", 37584 clipRule: "evenodd" 37585})); 37586/* harmony default export */ const line_dashed = (lineDashed); 37587 37588;// CONCATENATED MODULE: ./packages/icons/build-module/library/line-dotted.js 37589 37590/** 37591 * WordPress dependencies 37592 */ 37593 37594const lineDotted = (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.SVG, { 37595 xmlns: "http://www.w3.org/2000/svg", 37596 viewBox: "0 0 24 24" 37597}, (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.Path, { 37598 fillRule: "evenodd", 37599 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", 37600 clipRule: "evenodd" 37601})); 37602/* harmony default export */ const line_dotted = (lineDotted); 37603 37604;// CONCATENATED MODULE: ./packages/components/build-module/unit-control/styles/unit-control-styles.js 37605 37606/** 37607 * External dependencies 37608 */ 37609
37610/** 37611 * Internal dependencies 37612 */ 37613 37614 37615 37616 37617 37618// Using `selectSize` instead of `size` to avoid a type conflict with the 37619// `size` HTML attribute of the `select` element. 37620 37621// TODO: Resolve need to use &&& to increase specificity 37622// https://github.com/WordPress/gutenberg/issues/18483 37623 37624const ValueInput = /*#__PURE__*/emotion_styled_base_browser_esm(number_control, true ? { 37625 target: "e1bagdl32" 37626} : 0)("&&&{input{display:block;width:100%;}", BackdropUI, "{transition:box-shadow 0.1s linear;}}" + ( true ? "" : 0)); 37627const baseUnitLabelStyles = ({ 37628 selectSize 37629}) => { 37630 const sizes = { 37631 default: /*#__PURE__*/emotion_react_browser_esm_css("box-sizing:border-box;padding:2px 1px;width:20px;color:", COLORS.gray[800], ";font-size:8px;line-height:1;letter-spacing:-0.5px;text-transform:uppercase;text-align-last:center;" + ( true ? "" : 0), true ? "" : 0), 37632 large: /*#__PURE__*/emotion_react_browser_esm_css("box-sizing:border-box;min-width:24px;max-width:48px;height:24px;margin-inline-end:", space(2), ";padding:", space(1), ";color:", COLORS.theme.accent, ";font-size:13px;line-height:1;text-align-last:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" + ( true ? "" : 0), true ? "" : 0) 37633 }; 37634 return selectSize === '__unstable-large' ? sizes.large : sizes.default; 37635}; 37636const UnitLabel = emotion_styled_base_browser_esm("div", true ? { 37637 target: "e1bagdl31" 37638} : 0)("&&&{pointer-events:none;", baseUnitLabelStyles, ";color:", COLORS.gray[900], ";}" + ( true ? "" : 0)); 37639const unitSelectSizes = ({ 37640 selectSize = 'default' 37641}) => { 37642 const sizes = { 37643 default: /*#__PURE__*/emotion_react_browser_esm_css("height:100%;border:1px solid transparent;transition:box-shadow 0.1s linear,border 0.1s linear;", rtl({ 37644 borderTopLeftRadius: 0, 37645 borderBottomLeftRadius: 0 37646 })(), " &:not(:disabled):hover{background-color:", COLORS.gray[100], ";}&:focus{border:1px solid ", COLORS.ui.borderFocus, ";box-shadow:inset 0 0 0 ", config_values.borderWidth + ' ' + COLORS.ui.borderFocus, ";outline-offset:0;outline:2px solid transparent;z-index:1;}" + ( true ? "" : 0), true ? "" : 0), 37647 large: /*#__PURE__*/emotion_react_browser_esm_css("display:flex;justify-content:center;align-items:center;&:hover{color:", COLORS.ui.borderFocus, ";box-shadow:inset 0 0 0 ", config_values.borderWidth + ' ' + COLORS.ui.borderFocus, ";outline:", config_values.borderWidth, " solid transparent;}&:focus{box-shadow:0 0 0 ", config_values.borderWidthFocus + ' ' + COLORS.ui.borderFocus, ";outline:", config_values.borderWidthFocus, " solid transparent;}" + ( true ? "" : 0), true ? "" : 0) 37648 }; 37649 return selectSize === '__unstable-large' ? sizes.large : sizes.default; 37650}; 37651const UnitSelect = emotion_styled_base_browser_esm("select", true ? { 37652 target: "e1bagdl30" 37653} : 0)("&&&{appearance:none;background:transparent;border-radius:2px;border:none;display:block;outline:none;margin:0;min-height:auto;font-family:inherit;", baseUnitLabelStyles, ";", unitSelectSizes, ";&:not( :disabled ){cursor:pointer;}}" + ( true ? "" : 0)); 37654 37655;// CONCATENATED MODULE: ./packages/components/build-module/border-control/styles.js 37656function 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)."; } 37657/** 37658 * External dependencies 37659 */ 37660 37661 37662/** 37663 * Internal dependencies 37664 */ 37665 37666 37667 37668 37669const styles_labelStyles = true ? { 37670 name: "f3vz0n", 37671 styles: "font-weight:500" 37672} : 0; 37673const focusBoxShadow = /*#__PURE__*/emotion_react_browser_esm_css("box-shadow:inset ", config_values.controlBoxShadowFocus, ";" + ( true ? "" : 0), true ? "" : 0); 37674const borderControl = /*#__PURE__*/emotion_react_browser_esm_css("border:0;padding:0;margin:0;", boxSizingReset, ";" + ( true ? "" : 0), true ? "" : 0); 37675const innerWrapper = () => /*#__PURE__*/emotion_react_browser_esm_css(ValueInput, "{flex:1 1 40%;}&& ", UnitSelect, "{min-height:0;}" + ( true ? "" : 0), true ? "" : 0); 37676 37677/* 37678 * This style is only applied to the UnitControl wrapper when the border width 37679 * field should be a set width. Omitting this allows the UnitControl & 37680 * RangeControl to share the available width in a 40/60 split respectively. 37681 */
37682const styles_wrapperWidth = /*#__PURE__*/emotion_react_browser_esm_css(ValueInput, "{flex:0 0 auto;}" + ( true ? "" : 0), true ? "" : 0); 37683const wrapperHeight = size => { 37684 return /*#__PURE__*/emotion_react_browser_esm_css("height:", size === '__unstable-large' ? '40px' : '30px', ";" + ( true ? "" : 0), true ? "" : 0); 37685}; 37686const borderControlDropdown = size => /*#__PURE__*/emotion_react_browser_esm_css("background:#fff;&&>button{height:", size === '__unstable-large' ? '40px' : '30px', ";width:", size === '__unstable-large' ? '40px' : '30px', ";padding:0;display:flex;align-items:center;justify-content:center;", rtl({ 37687 borderRadius: `2px 0 0 2px` 37688}, { 37689 borderRadius: `0 2px 2px 0` 37690})(), " border:", config_values.borderWidth, " solid ", COLORS.ui.border, ";&:focus,&:hover:not( :disabled ){", focusBoxShadow, " border-color:", COLORS.ui.borderFocus, ";z-index:1;position:relative;}}" + ( true ? "" : 0), true ? "" : 0); 37691const colorIndicatorBorder = border => { 37692 const { 37693 color, 37694 style 37695 } = border || {}; 37696 const fallbackColor = !!style && style !== 'none' ? COLORS.gray[300] : undefined; 37697 return /*#__PURE__*/emotion_react_browser_esm_css("border-style:", style === 'none' ? 'solid' : style, ";border-color:", color || fallbackColor, ";" + ( true ? "" : 0), true ? "" : 0); 37698}; 37699const colorIndicatorWrapper = (border, size) => { 37700 const { 37701 style 37702 } = border || {}; 37703 return /*#__PURE__*/emotion_react_browser_esm_css("border-radius:9999px;border:2px solid transparent;", style ? colorIndicatorBorder(border) : undefined, " width:", size === '__unstable-large' ? '24px' : '22px', ";height:", size === '__unstable-large' ? '24px' : '22px', ";padding:", size === '__unstable-large' ? '2px' : '1px', ";&>span{height:", space(4), ";width:", space(4), ";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); 37704}; 37705 37706// Must equal $color-palette-circle-size from:
37707// @wordpress/components/src/circular-option-picker/style.scss 37708const swatchSize = 28; 37709const swatchGap = 12; 37710const borderControlPopoverControls = /*#__PURE__*/emotion_react_browser_esm_css("width:", swatchSize * 6 + swatchGap * 5, "px;>div:first-of-type>", StyledLabel, "{margin-bottom:0;", styles_labelStyles, ";}&& ", StyledLabel, "+button:not( .has-text ){min-width:24px;padding:0;}" + ( true ? "" : 0), true ? "" : 0); 37711const borderControlPopoverContent = /*#__PURE__*/emotion_react_browser_esm_css( true ? "" : 0, true ? "" : 0); 37712const borderColorIndicator = /*#__PURE__*/emotion_react_browser_esm_css( true ? "" : 0, true ? "" : 0); 37713const resetButton = /*#__PURE__*/emotion_react_browser_esm_css("justify-content:center;width:100%;&&{border-top:", config_values.borderWidth, " solid ", COLORS.gray[400], ";border-top-left-radius:0;border-top-right-radius:0;height:40px;}" + ( true ? "" : 0), true ? "" : 0); 37714const borderControlStylePicker = /*#__PURE__*/emotion_react_browser_esm_css(StyledLabel, "{", styles_labelStyles, ";}" + ( true ? "" : 0), true ? "" : 0); 37715const borderStyleButton = true ? { 37716 name: "ed6beh", 37717 styles: "&&&&&{min-width:32px;width:32px;height:32px;padding:4px;}" 37718} : 0; 37719const borderSlider = () => /*#__PURE__*/emotion_react_browser_esm_css("flex:1 1 60%;", rtl({ 37720 marginRight: space(3) 37721})(), ";" + ( true ? "" : 0), true ? "" : 0); 37722 37723;// CONCATENATED MODULE: ./packages/components/build-module/border-control/border-control-style-picker/hook.js 37724/** 37725 * WordPress dependencies 37726 */ 37727 37728 37729/** 37730 * Internal dependencies 37731 */ 37732 37733 37734 37735function useBorderControlStylePicker(props) { 37736 const { 37737 className, 37738 ...otherProps 37739 } = useContextSystem(props, 'BorderControlStylePicker'); 37740 37741 // Generate class names. 37742 const cx = useCx(); 37743 const classes = (0,external_wp_element_namespaceObject.useMemo)(() => { 37744 return cx(borderControlStylePicker, className); 37745 }, [className, cx]); 37746 const buttonClassName = (0,external_wp_element_namespaceObject.useMemo)(() => { 37747 return cx(borderStyleButton); 37748 }, [cx]); 37749 return { 37750 ...otherProps, 37751 className: classes, 37752 buttonClassName 37753 }; 37754} 37755 37756;// CONCATENATED MODULE: ./packages/components/build-module/border-control/border-control-style-picker/component.js 37757 37758/** 37759 * WordPress dependencies 37760 */ 37761 37762 37763 37764/** 37765 * Internal dependencies 37766 */ 37767 37768 37769 37770 37771 37772 37773 37774const BORDER_STYLES = [{ 37775 label: (0,external_wp_i18n_namespaceObject.__)('Solid'), 37776 icon: line_solid, 37777 value: 'solid' 37778}, { 37779 label: (0,external_wp_i18n_namespaceObject.__)('Dashed'), 37780 icon: line_dashed, 37781 value: 'dashed' 37782}, { 37783 label: (0,external_wp_i18n_namespaceObject.__)('Dotted'), 37784 icon: line_dotted, 37785 value: 'dotted' 37786}]; 37787const component_Label = props => { 37788 const { 37789 label, 37790 hideLabelFromVision 37791 } = props; 37792 if (!label) { 37793 return null; 37794 } 37795 return hideLabelFromVision ? (0,external_wp_element_namespaceObject.createElement)(visually_hidden_component, { 37796 as: "label" 37797 }, label) : (0,external_wp_element_namespaceObject.createElement)(StyledLabel, null, label); 37798}; 37799const BorderControlStylePicker = (props, forwardedRef) => { 37800 const { 37801 buttonClassName, 37802 hideLabelFromVision, 37803 label, 37804 onChange, 37805 value, 37806 ...otherProps 37807 } = useBorderControlStylePicker(props); 37808 return (0,external_wp_element_namespaceObject.createElement)(component, { 37809 ...otherProps, 37810 ref: forwardedRef 37811 }, (0,external_wp_element_namespaceObject.createElement)(component_Label, { 37812 label: label, 37813 hideLabelFromVision: hideLabelFromVision 37814 }), (0,external_wp_element_namespaceObject.createElement)(flex_component, { 37815 justify: "flex-start", 37816 gap: 1 37817 }, BORDER_STYLES.map(borderStyle => (0,external_wp_element_namespaceObject.createElement)(build_module_button, { 37818 key: borderStyle.value, 37819 className: buttonClassName, 37820 icon: borderStyle.icon, 37821 isSmall: true, 37822 isPressed: borderStyle.value === value, 37823 onClick: () => onChange(borderStyle.value === value ? undefined : borderStyle.value), 37824 "aria-label": borderStyle.label, 37825 label: borderStyle.label, 37826 showTooltip: true 37827 })))); 37828}; 37829const ConnectedBorderControlStylePicker = contextConnect(BorderControlStylePicker, 'BorderControlStylePicker'); 37830/* harmony default export */ const border_control_style_picker_component = (ConnectedBorderControlStylePicker); 37831 37832;// CONCATENATED MODULE: ./packages/components/build-module/color-indicator/index.js 37833 37834/** 37835 * External dependencies 37836 */ 37837
37838/** 37839 * WordPress dependencies 37840 */ 37841 37842 37843/** 37844 * Internal dependencies 37845 */ 37846 37847function UnforwardedColorIndicator(props, forwardedRef) { 37848 const { 37849 className, 37850 colorValue, 37851 ...additionalProps 37852 } = props; 37853 return (0,external_wp_element_namespaceObject.createElement)("span", { 37854 className: classnames_default()('component-color-indicator', className), 37855 style: { 37856 background: colorValue 37857 }, 37858 ref: forwardedRef, 37859 ...additionalProps 37860 }); 37861} 37862 37863/** 37864 * ColorIndicator is a React component that renders a specific color in a 37865 * circle. It's often used to summarize a collection of used colors in a child 37866 * component. 37867 * 37868 * ```jsx 37869 * import { ColorIndicator } from '@wordpress/components'; 37870 * 37871 * const MyColorIndicator = () => <ColorIndicator colorValue="#0073aa" />; 37872 * ``` 37873 */ 37874const ColorIndicator = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedColorIndicator); 37875/* harmony default export */ const color_indicator = (ColorIndicator); 37876 37877;// CONCATENATED MODULE: ./node_modules/colord/plugins/a11y.mjs 37878var 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}} 37879 37880;// CONCATENATED MODULE: ./packages/components/build-module/utils/hooks/use-controlled-value.js 37881/** 37882 * WordPress dependencies 37883 */ 37884 37885/** 37886 * Simplified and improved implementation of useControlledState. 37887 * 37888 * @param props 37889 * @param props.defaultValue 37890 * @param props.value 37891 * @param props.onChange 37892 * @return The controlled value and the value setter. 37893 */ 37894function useControlledValue({ 37895 defaultValue, 37896 onChange, 37897 value: valueProp 37898}) { 37899 const hasValue = typeof valueProp !== 'undefined'; 37900 const initialValue = hasValue ? valueProp : defaultValue; 37901 const [state, setState] = (0,external_wp_element_namespaceObject.useState)(initialValue); 37902 const value = hasValue ? valueProp : state; 37903 let setValue; 37904 if (hasValue && typeof onChange === 'function') { 37905 setValue = onChange; 37906 } else if (!hasValue && typeof onChange === 'function') { 37907 setValue = nextValue => { 37908 onChange(nextValue); 37909 setState(nextValue); 37910 }; 37911 } else { 37912 setValue = setState; 37913 } 37914 return [value, setValue]; 37915} 37916 37917;// CONCATENATED MODULE: ./packages/components/build-module/dropdown/index.js 37918 37919/** 37920 * External dependencies 37921 */ 37922 37923/** 37924 * WordPress dependencies 37925 */ 37926 37927 37928 37929 37930/** 37931 * Internal dependencies 37932 */ 37933 37934 37935 37936const UnconnectedDropdown = (props, forwardedRef) => { 37937 const { 37938 renderContent, 37939 renderToggle, 37940 className, 37941 contentClassName, 37942 expandOnMobile, 37943 headerTitle, 37944 focusOnMount, 37945 popoverProps, 37946 onClose, 37947 onToggle, 37948 style, 37949 open, 37950 defaultOpen, 37951 // Deprecated props 37952 position, 37953 // From context system 37954 variant 37955 } = useContextSystem(props, 'Dropdown'); 37956 if (position !== undefined) { 37957 external_wp_deprecated_default()('`position` prop in wp.components.Dropdown', { 37958 since: '6.2', 37959 alternative: '`popoverProps.placement` prop', 37960 hint: 'Note that the `position` prop will override any values passed through the `popoverProps.placement` prop.' 37961 }); 37962 } 37963 37964 // Use internal state instead of a ref to make sure that the component 37965 // re-renders when the popover's anchor updates. 37966 const [fallbackPopoverAnchor, setFallbackPopoverAnchor] = (0,external_wp_element_namespaceObject.useState)(null); 37967 const containerRef = (0,external_wp_element_namespaceObject.useRef)(); 37968 const [isOpen, setIsOpen] = useControlledValue({ 37969 defaultValue: defaultOpen, 37970 value: open, 37971 onChange: onToggle 37972 }); 37973 37974 /**
37975 * Closes the popover when focus leaves it unless the toggle was pressed or 37976 * focus has moved to a separate dialog. The former is to let the toggle 37977 * handle closing the popover and the latter is to preserve presence in 37978 * case a dialog has opened, allowing focus to return when it's dismissed. 37979 */ 37980 function closeIfFocusOutside() { 37981 if (!containerRef.current) { 37982 return; 37983 } 37984 const { 37985 ownerDocument 37986 } = containerRef.current; 37987 const dialog = ownerDocument?.activeElement?.closest('[role="dialog"]'); 37988 if (!containerRef.current.contains(ownerDocument.activeElement) && (!dialog || dialog.contains(containerRef.current))) { 37989 close(); 37990 } 37991 } 37992 function close() { 37993 onClose?.(); 37994 setIsOpen(false); 37995 } 37996 const args = { 37997 isOpen: !!isOpen, 37998 onToggle: () => setIsOpen(!isOpen), 37999 onClose: close 38000 }; 38001 const popoverPropsHaveAnchor = !!popoverProps?.anchor || 38002 // Note: `anchorRef`, `getAnchorRect` and `anchorRect` are deprecated and 38003 // be removed from `Popover` from WordPress 6.3 38004 !!popoverProps?.anchorRef || !!popoverProps?.getAnchorRect || !!popoverProps?.anchorRect; 38005 return (0,external_wp_element_namespaceObject.createElement)("div", { 38006 className: className, 38007 ref: (0,external_wp_compose_namespaceObject.useMergeRefs)([containerRef, forwardedRef, setFallbackPopoverAnchor]) 38008 // Some UAs focus the closest focusable parent when the toggle is 38009 // clicked. Making this div focusable ensures such UAs will focus 38010 // it and `closeIfFocusOutside` can tell if the toggle was clicked. 38011 , 38012 tabIndex: -1, 38013 style: style 38014 }, renderToggle(args), isOpen && (0,external_wp_element_namespaceObject.createElement)(popover, { 38015 position: position, 38016 onClose: close, 38017 onFocusOutside: closeIfFocusOutside, 38018 expandOnMobile: expandOnMobile, 38019 headerTitle: headerTitle, 38020 focusOnMount: focusOnMount 38021 // This value is used to ensure that the dropdowns 38022 // align with the editor header by default. 38023 , 38024 offset: 13, 38025 anchor: !popoverPropsHaveAnchor ? fallbackPopoverAnchor : undefined, 38026 variant: variant, 38027 ...popoverProps, 38028 className: classnames_default()('components-dropdown__content', popoverProps?.className, contentClassName) 38029 }, renderContent(args))); 38030}; 38031 38032/** 38033 * Renders a button that opens a floating content modal when clicked. 38034 * 38035 * ```jsx 38036 * import { Button, Dropdown } from '@wordpress/components'; 38037 * 38038 * const MyDropdown = () => ( 38039 * <Dropdown 38040 * className="my-container-class-name" 38041 * contentClassName="my-dropdown-content-classname" 38042 * popoverProps={ { placement: 'bottom-start' } } 38043 * renderToggle={ ( { isOpen, onToggle } ) => ( 38044 * <Button 38045 * variant="primary" 38046 * onClick={ onToggle } 38047 * aria-expanded={ isOpen } 38048 * > 38049 * Toggle Dropdown! 38050 * </Button> 38051 * ) } 38052 * renderContent={ () => <div>This is the content of the dropdown.</div> } 38053 * /> 38054 * ); 38055 * ``` 38056 */ 38057const Dropdown = contextConnect(UnconnectedDropdown, 'Dropdown'); 38058/* harmony default export */ const dropdown = (Dropdown); 38059 38060;// CONCATENATED MODULE: ./packages/components/build-module/input-control/input-suffix-wrapper.js 38061 38062/** 38063 * External dependencies 38064 */ 38065 38066/** 38067 * Internal dependencies 38068 */ 38069 38070 38071function UnconnectedInputControlSuffixWrapper(props, forwardedRef) { 38072 const derivedProps = useContextSystem(props, 'InputControlSuffixWrapper'); 38073 return (0,external_wp_element_namespaceObject.createElement)(spacer_component, { 38074 marginBottom: 0, 38075 ...derivedProps, 38076 ref: forwardedRef 38077 }); 38078} 38079 38080/** 38081 * A convenience wrapper for the `suffix` when you want to apply 38082 * standard padding in accordance with the size variant. 38083 * 38084 * ```jsx 38085 * import { 38086 * __experimentalInputControl as InputControl, 38087 * __experimentalInputControlSuffixWrapper as InputControlSuffixWrapper, 38088 * } from '@wordpress/components'; 38089 * 38090 * <InputControl 38091 * suffix={<InputControlSuffixWrapper>%</InputControlSuffixWrapper>} 38092 * /> 38093 * ``` 38094 */ 38095const InputControlSuffixWrapper = contextConnect(UnconnectedInputControlSuffixWrapper, 'InputControlSuffixWrapper'); 38096/* harmony default export */ const input_suffix_wrapper = (InputControlSuffixWrapper); 38097 38098;// CONCATENATED MODULE: ./packages/components/build-module/select-control/styles/select-control-styles.js 38099 38100/** 38101 * External dependencies 38102 */ 38103
38104/** 38105 * Internal dependencies 38106 */ 38107 38108 38109 38110const select_control_styles_disabledStyles = ({ 38111 disabled 38112}) => { 38113 if (!disabled) return ''; 38114 return /*#__PURE__*/emotion_react_browser_esm_css({ 38115 color: COLORS.ui.textDisabled 38116 }, true ? "" : 0, true ? "" : 0); 38117}; 38118const select_control_styles_fontSizeStyles = ({ 38119 selectSize = 'default' 38120}) => { 38121 const sizes = { 38122 default: '13px', 38123 small: '11px', 38124 '__unstable-large': '13px' 38125 }; 38126 const fontSize = sizes[selectSize]; 38127 const fontSizeMobile = '16px'; 38128 if (!fontSize) return ''; 38129 return /*#__PURE__*/emotion_react_browser_esm_css("font-size:", fontSizeMobile, ";@media ( min-width: 600px ){font-size:", fontSize, ";}" + ( true ? "" : 0), true ? "" : 0); 38130}; 38131const select_control_styles_sizeStyles = ({ 38132 __next36pxDefaultSize, 38133 multiple, 38134 selectSize = 'default' 38135}) => { 38136 if (multiple) { 38137 // When `multiple`, just use the native browser styles 38138 // without setting explicit height. 38139 return; 38140 } 38141 const sizes = { 38142 default: { 38143 height: 36, 38144 minHeight: 36, 38145 paddingTop: 0, 38146 paddingBottom: 0 38147 }, 38148 small: { 38149 height: 24, 38150 minHeight: 24, 38151 paddingTop: 0, 38152 paddingBottom: 0 38153 }, 38154 '__unstable-large': { 38155 height: 40, 38156 minHeight: 40, 38157 paddingTop: 0, 38158 paddingBottom: 0 38159 } 38160 }; 38161 if (!__next36pxDefaultSize) { 38162 sizes.default = { 38163 height: 30, 38164 minHeight: 30, 38165 paddingTop: 0, 38166 paddingBottom: 0 38167 }; 38168 } 38169 const style = sizes[selectSize] || sizes.default; 38170 return /*#__PURE__*/emotion_react_browser_esm_css(style, true ? "" : 0, true ? "" : 0); 38171}; 38172const chevronIconSize = 18; 38173const sizePaddings = ({ 38174 __next36pxDefaultSize, 38175 multiple, 38176 selectSize = 'default' 38177}) => { 38178 const padding = { 38179 default: 16, 38180 small: 8, 38181 '__unstable-large': 16 38182 }; 38183 if (!__next36pxDefaultSize) { 38184 padding.default = 8; 38185 } 38186 const selectedPadding = padding[selectSize] || padding.default; 38187 return rtl({ 38188 paddingLeft: selectedPadding, 38189 paddingRight: selectedPadding + chevronIconSize, 38190 ...(multiple ? { 38191 paddingTop: selectedPadding, 38192 paddingBottom: selectedPadding 38193 } : {}) 38194 }); 38195}; 38196const overflowStyles = ({ 38197 multiple 38198}) => { 38199 return { 38200 overflow: multiple ? 'auto' : 'hidden' 38201 }; 38202}; 38203 38204// TODO: Resolve need to use &&& to increase specificity 38205// https://github.com/WordPress/gutenberg/issues/18483 38206 38207const Select = emotion_styled_base_browser_esm("select", true ? { 38208 target: "e1mv6sxx2" 38209} : 0)("&&&{appearance:none;background:transparent;box-sizing:border-box;border:none;box-shadow:none!important;color:", COLORS.gray[900], ";display:block;font-family:inherit;margin:0;width:100%;max-width:none;cursor:pointer;white-space:nowrap;text-overflow:ellipsis;", select_control_styles_disabledStyles, ";", select_control_styles_fontSizeStyles, ";", select_control_styles_sizeStyles, ";", sizePaddings, ";", overflowStyles, ";}" + ( true ? "" : 0)); 38210const DownArrowWrapper = emotion_styled_base_browser_esm("div", true ? { 38211 target: "e1mv6sxx1" 38212} : 0)("margin-inline-end:", space(-1), ";line-height:0;" + ( true ? "" : 0)); 38213const InputControlSuffixWrapperWithClickThrough = /*#__PURE__*/emotion_styled_base_browser_esm(input_suffix_wrapper, true ? { 38214 target: "e1mv6sxx0" 38215} : 0)("position:absolute;pointer-events:none;", rtl({ 38216 right: 0 38217}), ";" + ( true ? "" : 0)); 38218 38219;// CONCATENATED MODULE: ./packages/icons/build-module/icon/index.js 38220/** 38221 * WordPress dependencies 38222 */ 38223 38224 38225/** @typedef {{icon: JSX.Element, size?: number} & import('@wordpress/primitives').SVGProps} IconProps */ 38226 38227/** 38228 * Return an SVG icon. 38229 * 38230 * @param {IconProps} props icon is the SVG component to render 38231 * size is a number specifiying the icon size in pixels 38232 * Other props will be passed to wrapped SVG component 38233 * @param {import('react').ForwardedRef<HTMLElement>} ref The forwarded ref to the SVG element. 38234 * 38235 * @return {JSX.Element} Icon component 38236 */ 38237function icon_Icon({ 38238 icon, 38239 size = 24, 38240 ...props 38241}, ref) { 38242 return (0,external_wp_element_namespaceObject.cloneElement)(icon, { 38243 width: size, 38244 height: size, 38245 ...props, 38246 ref 38247 }); 38248} 38249/* harmony default export */ const icons_build_module_icon = ((0,external_wp_element_namespaceObject.forwardRef)(icon_Icon)); 38250 38251;// CONCATENATED MODULE: ./packages/icons/build-module/library/chevron-down.js 38252 38253/** 38254 * WordPress dependencies 38255 */ 38256 38257const chevronDown = (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.SVG, { 38258 viewBox: "0 0 24 24", 38259 xmlns: "http://www.w3.org/2000/svg" 38260}, (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.Path, { 38261 d: "M17.5 11.6L12 16l-5.5-4.4.9-1.2L12 14l4.5-3.6 1 1.2z" 38262})); 38263/* harmony default export */ const chevron_down = (chevronDown); 38264 38265;// CONCATENATED MODULE: ./packages/components/build-module/select-control/chevron-down.js 38266 38267/** 38268 * WordPress dependencies 38269 */ 38270 38271 38272/** 38273 * Internal dependencies 38274 */ 38275 38276const SelectControlChevronDown = () => { 38277 return (0,external_wp_element_namespaceObject.createElement)(InputControlSuffixWrapperWithClickThrough, null, (0,external_wp_element_namespaceObject.createElement)(DownArrowWrapper, null, (0,external_wp_element_namespaceObject.createElement)(icons_build_module_icon, { 38278 icon: chevron_down, 38279 size: chevronIconSize 38280 }))); 38281}; 38282/* harmony default export */ const select_control_chevron_down = (SelectControlChevronDown); 38283 38284;// CONCATENATED MODULE: ./packages/components/build-module/select-control/index.js 38285 38286/** 38287 * External dependencies 38288 */ 38289 38290 38291/** 38292 * WordPress dependencies 38293 */ 38294 38295 38296 38297/** 38298 * Internal dependencies 38299 */ 38300 38301 38302 38303 38304const select_control_noop = () => {}; 38305function select_control_useUniqueId(idProp) { 38306 const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(SelectControl); 38307 const id = `inspector-select-control-${instanceId}`; 38308 return idProp || id; 38309} 38310function UnforwardedSelectControl(props, ref) { 38311 const { 38312 className, 38313 disabled = false, 38314 help, 38315 hideLabelFromVision, 38316 id: idProp, 38317 label, 38318 multiple = false, 38319 onBlur = select_control_noop, 38320 onChange, 38321 onFocus = select_control_noop, 38322 options = [], 38323 size = 'default', 38324 value: valueProp, 38325 labelPosition = 'top', 38326 children, 38327 prefix, 38328 suffix, 38329 __next36pxDefaultSize = false, 38330 __nextHasNoMarginBottom = false, 38331 ...restProps 38332 } = props; 38333 const [isFocused, setIsFocused] = (0,external_wp_element_namespaceObject.useState)(false); 38334 const id = select_control_useUniqueId(idProp); 38335 const helpId = help ? `${id}__help` : undefined; 38336 38337 // Disable reason: A select with an onchange throws a warning. 38338 if (!options?.length && !children) return null; 38339 const handleOnBlur = event => { 38340 onBlur(event); 38341 setIsFocused(false); 38342 }; 38343 const handleOnFocus = event => { 38344 onFocus(event); 38345 setIsFocused(true); 38346 }; 38347 const handleOnChange = event => { 38348 if (props.multiple) { 38349 const selectedOptions = Array.from(event.target.options).filter(({ 38350 selected 38351 }) => selected); 38352 const newValues = selectedOptions.map(({ 38353 value 38354 }) => value); 38355 props.onChange?.(newValues, { 38356 event 38357 }); 38358 return; 38359 } 38360 props.onChange?.(event.target.value, { 38361 event 38362 }); 38363 }; 38364 const classes = classnames_default()('components-select-control', className); 38365 return (0,external_wp_element_namespaceObject.createElement)(base_control, { 38366 help: help, 38367 id: id, 38368 __nextHasNoMarginBottom: __nextHasNoMarginBottom 38369 }, (0,external_wp_element_namespaceObject.createElement)(input_base, { 38370 className: classes, 38371 disabled: disabled, 38372 hideLabelFromVision: hideLabelFromVision, 38373 id: id, 38374 isFocused: isFocused, 38375 label: label, 38376 size: size, 38377 suffix: suffix || !multiple && (0,external_wp_element_namespaceObject.createElement)(select_control_chevron_down, null), 38378 prefix: prefix, 38379 labelPosition: labelPosition, 38380 __next36pxDefaultSize: __next36pxDefaultSize 38381 }, (0,external_wp_element_namespaceObject.createElement)(Select, { 38382 ...restProps, 38383 __next36pxDefaultSize: __next36pxDefaultSize, 38384 "aria-describedby": helpId, 38385 className: "components-select-control__input", 38386 disabled: disabled, 38387 id: id, 38388 multiple: multiple, 38389 onBlur: handleOnBlur, 38390 onChange: handleOnChange, 38391 onFocus: handleOnFocus, 38392 ref: ref, 38393 selectSize: size, 38394 value: valueProp 38395 }, children || options.map((option, index) => {
38396 const key = option.id || `${option.label}-${option.value}-${index}`; 38397 return (0,external_wp_element_namespaceObject.createElement)("option", { 38398 key: key, 38399 value: option.value, 38400 disabled: option.disabled, 38401 hidden: option.hidden 38402 }, option.label); 38403 })))); 38404} 38405 38406/** 38407 * `SelectControl` allows users to select from a single or multiple option menu. 38408 * It functions as a wrapper around the browser's native `<select>` element. 38409 * 38410 * ```jsx 38411 * import { SelectControl } from '@wordpress/components'; 38412 * import { useState } from '@wordpress/element'; 38413 * 38414 * const MySelectControl = () => { 38415 * const [ size, setSize ] = useState( '50%' ); 38416 * 38417 * return ( 38418 * <SelectControl 38419 * label="Size" 38420 * value={ size } 38421 * options={ [ 38422 * { label: 'Big', value: '100%' }, 38423 * { label: 'Medium', value: '50%' }, 38424 * { label: 'Small', value: '25%' }, 38425 * ] } 38426 * onChange={ setSize } 38427 * /> 38428 * ); 38429 * }; 38430 * ``` 38431 */ 38432const SelectControl = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedSelectControl); 38433/* harmony default export */ const select_control = (SelectControl); 38434 38435;// CONCATENATED MODULE: ./packages/components/build-module/utils/hooks/use-controlled-state.js 38436/** 38437 * WordPress dependencies 38438 */ 38439 38440 38441/** 38442 * Internal dependencies 38443 */ 38444 38445 38446/** 38447 * @template T 38448 * @typedef Options 38449 * @property {T} [initial] Initial value 38450 * @property {T | ""} fallback Fallback value 38451 */ 38452 38453/** @type {Readonly<{ initial: undefined, fallback: '' }>
38453} */ 38454const defaultOptions = { 38455 initial: undefined, 38456 /** 38457 * Defaults to empty string, as that is preferred for usage with 38458 * <input />, <textarea />, and <select /> form elements. 38459 */ 38460 fallback: '' 38461}; 38462 38463/** 38464 * Custom hooks for "controlled" components to track and consolidate internal 38465 * state and incoming values. This is useful for components that render 38466 * `input`, `textarea`, or `select` HTML elements. 38467 * 38468 * https://reactjs.org/docs/forms.html#controlled-components 38469 * 38470 * At first, a component using useControlledState receives an initial prop 38471 * value, which is used as initial internal state. 38472 * 38473 * This internal state can be maintained and updated without 38474 * relying on new incoming prop values. 38475 * 38476 * Unlike the basic useState hook, useControlledState's state can 38477 * be updated if a new incoming prop value is changed. 38478 * 38479 * @template T 38480 * 38481 * @param {T | undefined} currentState The current value. 38482 * @param {Options<T>} [options=defaultOptions] Additional options for the hook. 38483 * 38484 * @return {[T | "", (nextState: T) => void]} The controlled value and the value setter. 38485 */ 38486function use_controlled_state_useControlledState(currentState, options = defaultOptions) { 38487 const { 38488 initial, 38489 fallback 38490 } = { 38491 ...defaultOptions, 38492 ...options 38493 }; 38494 const [internalState, setInternalState] = (0,external_wp_element_namespaceObject.useState)(currentState); 38495 const hasCurrentState = isValueDefined(currentState); 38496 38497 /* 38498 * Resets internal state if value every changes from uncontrolled <-> controlled. 38499 */ 38500 (0,external_wp_element_namespaceObject.useEffect)(() => { 38501 if (hasCurrentState && internalState) { 38502 setInternalState(undefined); 38503 } 38504 }, [hasCurrentState, internalState]); 38505 const state = getDefinedValue([currentState, internalState, initial], fallback); 38506 38507 /* eslint-disable jsdoc/no-undefined-types */ 38508 /** @type {(nextState: T) => void} */ 38509 const setState = (0,external_wp_element_namespaceObject.useCallback)(nextState => { 38510 if (!hasCurrentState) { 38511 setInternalState(nextState); 38512 } 38513 }, [hasCurrentState]); 38514 /* eslint-enable jsdoc/no-undefined-types */ 38515 38516 return [state, setState]; 38517} 38518/* harmony default export */ const use_controlled_state = (use_controlled_state_useControlledState); 38519 38520;// CONCATENATED MODULE: ./packages/components/build-module/range-control/utils.js 38521/** 38522 * WordPress dependencies 38523 */ 38524 38525 38526/** 38527 * Internal dependencies 38528 */ 38529 38530 38531/** 38532 * A float supported clamp function for a specific value. 38533 * 38534 * @param value The value to clamp. 38535 * @param min The minimum value. 38536 * @param max The maximum value. 38537 * 38538 * @return A (float) number 38539 */ 38540function floatClamp(value, min, max) { 38541 if (typeof value !== 'number') { 38542 return null; 38543 } 38544 return parseFloat(`${math_clamp(value, min, max)}`); 38545} 38546 38547/** 38548 * Hook to store a clamped value, derived from props. 38549 * 38550 * @param settings 38551 * @return The controlled value and the value setter. 38552 */ 38553function useControlledRangeValue(settings) { 38554 const { 38555 min, 38556 max, 38557 value: valueProp, 38558 initial 38559 } = settings; 38560 const [state, setInternalState] = use_controlled_state(floatClamp(valueProp, min, max), { 38561 initial: floatClamp(initial !== null && initial !== void 0 ? initial : null, min, max), 38562 fallback: null 38563 }); 38564 const setState = (0,external_wp_element_namespaceObject.useCallback)(nextValue => {
38565 if (nextValue === null) { 38566 setInternalState(null); 38567 } else { 38568 setInternalState(floatClamp(nextValue, min, max)); 38569 } 38570 }, [min, max, setInternalState]); 38571 38572 // `state` can't be an empty string because we specified a fallback value of 38573 // `null` in `useControlledState` 38574 return [state, setState]; 38575} 38576 38577;// CONCATENATED MODULE: ./packages/components/build-module/range-control/styles/range-control-styles.js 38578 38579function 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)."; } 38580/** 38581 * External dependencies 38582 */ 38583 38584/** 38585 * Internal dependencies 38586 */ 38587 38588 38589 38590const rangeHeightValue = 30; 38591const railHeight = 4; 38592const rangeHeight = () => /*#__PURE__*/emotion_react_browser_esm_css({ 38593 height: rangeHeightValue, 38594 minHeight: rangeHeightValue 38595}, true ? "" : 0, true ? "" : 0); 38596const thumbSize = 12; 38597const deprecatedHeight = ({ 38598 __next40pxDefaultSize 38599}) => !__next40pxDefaultSize && /*#__PURE__*/emotion_react_browser_esm_css({ 38600 minHeight: rangeHeightValue 38601}, true ? "" : 0, true ? "" : 0); 38602const range_control_styles_Root = emotion_styled_base_browser_esm("div", true ? { 38603 target: "e1epgpqk14" 38604} : 0)("-webkit-tap-highlight-color:transparent;align-items:center;display:flex;justify-content:flex-start;padding:0;position:relative;touch-action:none;width:100%;min-height:40px;", deprecatedHeight, ";" + ( true ? "" : 0)); 38605const wrapperColor = ({ 38606 color = COLORS.ui.borderFocus 38607}) => /*#__PURE__*/emotion_react_browser_esm_css({ 38608 color 38609}, true ? "" : 0, true ? "" : 0); 38610const wrapperMargin = ({ 38611 marks, 38612 __nextHasNoMarginBottom 38613}) => { 38614 if (!__nextHasNoMarginBottom) { 38615 return /*#__PURE__*/emotion_react_browser_esm_css({ 38616 marginBottom: marks ? 16 : undefined 38617 }, true ? "" : 0, true ? "" : 0); 38618 } 38619 return ''; 38620}; 38621const range_control_styles_Wrapper = emotion_styled_base_browser_esm("div", true ? { 38622 target: "e1epgpqk13" 38623} : 0)("display:block;flex:1;position:relative;width:100%;", wrapperColor, ";", rangeHeight, ";", wrapperMargin, ";" + ( true ? "" : 0)); 38624const BeforeIconWrapper = emotion_styled_base_browser_esm("span", true ? { 38625 target: "e1epgpqk12" 38626} : 0)("display:flex;margin-top:", railHeight, "px;", rtl({ 38627 marginRight: 6 38628}), ";" + ( true ? "" : 0)); 38629const AfterIconWrapper = emotion_styled_base_browser_esm("span", true ? { 38630 target: "e1epgpqk11" 38631} : 0)("display:flex;margin-top:", railHeight, "px;", rtl({ 38632 marginLeft: 6 38633}), ";" + ( true ? "" : 0)); 38634const railBackgroundColor = ({ 38635 disabled, 38636 railColor 38637}) => { 38638 let background = railColor || ''; 38639 if (disabled) { 38640 background = COLORS.ui.backgroundDisabled; 38641 } 38642 return /*#__PURE__*/emotion_react_browser_esm_css({ 38643 background 38644 }, true ? "" : 0, true ? "" : 0); 38645}; 38646const Rail = emotion_styled_base_browser_esm("span", true ? { 38647 target: "e1epgpqk10" 38648} : 0)("background-color:", COLORS.gray[300], ";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)); 38649const trackBackgroundColor = ({ 38650 disabled, 38651 trackColor 38652}) => { 38653 let background = trackColor || 'currentColor'; 38654 if (disabled) { 38655 background = COLORS.gray[400]; 38656 } 38657 return /*#__PURE__*/emotion_react_browser_esm_css({ 38658 background 38659 }, true ? "" : 0, true ? "" : 0); 38660}; 38661const Track = emotion_styled_base_browser_esm("span", true ? { 38662 target: "e1epgpqk9" 38663} : 0)("background-color:currentColor;border-radius:", railHeight, "px;height:", railHeight, "px;pointer-events:none;display:block;position:absolute;margin-top:", (rangeHeightValue - railHeight) / 2, "px;top:0;", trackBackgroundColor, ";" + ( true ? "" : 0)); 38664const MarksWrapper = emotion_styled_base_browser_esm("span", true ? { 38665 target: "e1epgpqk8" 38666} : 0)( true ? { 38667 name: "l7tjj5", 38668 styles: "display:block;pointer-events:none;position:relative;width:100%;user-select:none" 38669} : 0); 38670const markFill = ({ 38671 disabled, 38672 isFilled 38673}) => { 38674 let backgroundColor = isFilled ? 'currentColor' : COLORS.gray[300]; 38675 if (disabled) { 38676 backgroundColor = COLORS.gray[400]; 38677 }
38678 return /*#__PURE__*/emotion_react_browser_esm_css({ 38679 backgroundColor 38680 }, true ? "" : 0, true ? "" : 0); 38681}; 38682const Mark = emotion_styled_base_browser_esm("span", true ? { 38683 target: "e1epgpqk7" 38684} : 0)("height:", thumbSize, "px;left:0;position:absolute;top:-4px;width:1px;", markFill, ";" + ( true ? "" : 0)); 38685const markLabelFill = ({ 38686 isFilled 38687}) => { 38688 return /*#__PURE__*/emotion_react_browser_esm_css({ 38689 color: isFilled ? COLORS.gray[700] : COLORS.gray[300] 38690 }, true ? "" : 0, true ? "" : 0); 38691}; 38692const MarkLabel = emotion_styled_base_browser_esm("span", true ? { 38693 target: "e1epgpqk6" 38694} : 0)("color:", COLORS.gray[300], ";left:0;font-size:11px;position:absolute;top:12px;transform:translateX( -50% );white-space:nowrap;", markLabelFill, ";" + ( true ? "" : 0)); 38695const thumbColor = ({ 38696 disabled 38697}) => disabled ? /*#__PURE__*/emotion_react_browser_esm_css("background-color:", COLORS.gray[400], ";" + ( true ? "" : 0), true ? "" : 0) : /*#__PURE__*/emotion_react_browser_esm_css("background-color:", COLORS.theme.accent, ";" + ( true ? "" : 0), true ? "" : 0); 38698const ThumbWrapper = emotion_styled_base_browser_esm("span", true ? { 38699 target: "e1epgpqk5" 38700} : 0)("align-items:center;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({ 38701 marginLeft: -10 38702}), ";", rtl({ 38703 transform: 'translateX( 4.5px )' 38704}, { 38705 transform: 'translateX( -4.5px )' 38706}), ";" + ( true ? "" : 0)); 38707const thumbFocus = ({ 38708 isFocused 38709}) => { 38710 return isFocused ? /*#__PURE__*/emotion_react_browser_esm_css("&::before{content:' ';position:absolute;background-color:", COLORS.theme.accent, ";opacity:0.4;border-radius:50%;height:", thumbSize + 8, "px;width:", thumbSize + 8, "px;top:-4px;left:-4px;}" + ( true ? "" : 0), true ? "" : 0) : ''; 38711}; 38712const Thumb = emotion_styled_base_browser_esm("span", true ? { 38713 target: "e1epgpqk4" 38714} : 0)("align-items:center;border-radius:50%;height:100%;outline:0;position:absolute;user-select:none;width:100%;", thumbColor, ";", thumbFocus, ";" + ( true ? "" : 0)); 38715const InputRange = emotion_styled_base_browser_esm("input", true ? { 38716 target: "e1epgpqk3" 38717} : 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)); 38718const tooltipShow = ({ 38719 show 38720}) => { 38721 return /*#__PURE__*/emotion_react_browser_esm_css({ 38722 opacity: show ? 1 : 0 38723 }, true ? "" : 0, true ? "" : 0); 38724}; 38725var range_control_styles_ref = true ? { 38726 name: "1cypxip", 38727 styles: "top:-80%" 38728} : 0; 38729var range_control_styles_ref2 = true ? { 38730 name: "1lr98c4", 38731 styles: "bottom:-80%" 38732} : 0; 38733const tooltipPosition = ({ 38734 position 38735}) => { 38736 const isBottom = position === 'bottom'; 38737 if (isBottom) { 38738 return range_control_styles_ref2; 38739 } 38740 return range_control_styles_ref; 38741}; 38742const range_control_styles_Tooltip = emotion_styled_base_browser_esm("span", true ? { 38743 target: "e1epgpqk2" 38744} : 0)("background:rgba( 0, 0, 0, 0.8 );border-radius:2px;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({ 38745 transform: 'translateX(-50%)' 38746}, { 38747 transform: 'translateX(50%)' 38748}), ";" + ( true ? "" : 0)); 38749 38750// @todo: Refactor RangeControl with latest HStack configuration 38751// @wordpress/components/ui/hstack. 38752const InputNumber = /*#__PURE__*/emotion_styled_base_browser_esm(number_control, true ? { 38753 target: "e1epgpqk1" 38754} : 0)("display:inline-block;font-size:13px;margin-top:0;input[type='number']&{", rangeHeight, ";}", rtl({ 38755 marginLeft: `${space(4)} !important` 38756}), ";" + ( true ? "" : 0)); 38757const ActionRightWrapper = emotion_styled_base_browser_esm("span", true ? { 38758 target: "e1epgpqk0" 38759} : 0)("display:block;margin-top:0;button,button.is-small{margin-left:0;", rangeHeight, ";}", rtl({ 38760 marginLeft: 8 38761}), ";" + ( true ? "" : 0)); 38762 38763;// CONCATENATED MODULE: ./packages/components/build-module/range-control/input-range.js 38764 38765/** 38766 * WordPress dependencies 38767 */ 38768 38769 38770/** 38771 * Internal dependencies 38772 */ 38773 38774function input_range_InputRange(props, ref) { 38775 const { 38776 describedBy, 38777 label, 38778 value, 38779 ...otherProps 38780 } = props; 38781 return (0,external_wp_element_namespaceObject.createElement)(InputRange, { 38782 ...otherProps, 38783 "aria-describedby": describedBy, 38784 "aria-label": label, 38785 "aria-hidden": false, 38786 ref: ref, 38787 tabIndex: 0, 38788 type: "range", 38789 value: value 38790 }); 38791} 38792const input_range_ForwardedComponent = (0,external_wp_element_namespaceObject.forwardRef)(input_range_InputRange); 38793/* harmony default export */ const input_range = (input_range_ForwardedComponent); 38794 38795;// CONCATENATED MODULE: ./packages/components/build-module/range-control/mark.js 38796 38797/** 38798 * External dependencies 38799 */ 38800 38801 38802/** 38803 * Internal dependencies 38804 */ 38805
38806function RangeMark(props) { 38807 const { 38808 className, 38809 isFilled = false, 38810 label, 38811 style = {}, 38812 ...otherProps 38813 } = props; 38814 const classes = classnames_default()('components-range-control__mark', isFilled && 'is-filled', className); 38815 const labelClasses = classnames_default()('components-range-control__mark-label', isFilled && 'is-filled'); 38816 return (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, (0,external_wp_element_namespaceObject.createElement)(Mark, { 38817 ...otherProps, 38818 "aria-hidden": "true", 38819 className: classes, 38820 isFilled: isFilled, 38821 style: style 38822 }), label && (0,external_wp_element_namespaceObject.createElement)(MarkLabel, { 38823 "aria-hidden": "true", 38824 className: labelClasses, 38825 isFilled: isFilled, 38826 style: style 38827 }, label)); 38828} 38829 38830;// CONCATENATED MODULE: ./packages/components/build-module/range-control/rail.js 38831 38832/** 38833 * WordPress dependencies 38834 */ 38835 38836 38837/** 38838 * Internal dependencies 38839 */ 38840 38841 38842function RangeRail(props) { 38843 const { 38844 disabled = false, 38845 marks = false, 38846 min = 0, 38847 max = 100, 38848 step = 1, 38849 value = 0, 38850 ...restProps 38851 } = props; 38852 return (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, (0,external_wp_element_namespaceObject.createElement)(Rail, { 38853 disabled: disabled, 38854 ...restProps 38855 }), marks && (0,external_wp_element_namespaceObject.createElement)(Marks, { 38856 disabled: disabled, 38857 marks: marks, 38858 min: min, 38859 max: max, 38860 step: step, 38861 value: value 38862 })); 38863} 38864function Marks(props) { 38865 const { 38866 disabled = false, 38867 marks = false, 38868 min = 0, 38869 max = 100, 38870 step: stepProp = 1, 38871 value = 0 38872 } = props; 38873 const step = stepProp === 'any' ? 1 : stepProp; 38874 const marksData = useMarks({ 38875 marks, 38876 min, 38877 max, 38878 step, 38879 value 38880 }); 38881 return (0,external_wp_element_namespaceObject.createElement)(MarksWrapper, { 38882 "aria-hidden": "true", 38883 className: "components-range-control__marks" 38884 }, marksData.map(mark => (0,external_wp_element_namespaceObject.createElement)(RangeMark, { 38885 ...mark, 38886 key: mark.key, 38887 "aria-hidden": "true", 38888 disabled: disabled 38889 }))); 38890} 38891function useMarks({ 38892 marks, 38893 min = 0, 38894 max = 100, 38895 step = 1, 38896 value = 0 38897}) { 38898 if (!marks) { 38899 return []; 38900 } 38901 const range = max - min; 38902 if (!Array.isArray(marks)) { 38903 marks = []; 38904 const count = 1 + Math.round(range / step); 38905 while (count > marks.push({ 38906 value: step * marks.length + min 38907 })); 38908 } 38909 const placedMarks = []; 38910 marks.forEach((mark, index) => { 38911 if (mark.value < min || mark.value > max) { 38912 return; 38913 } 38914 const key = `mark-${index}`; 38915 const isFilled = mark.value <= value; 38916 const offset = `${(mark.value - min) / range * 100}%`; 38917 const offsetStyle = { 38918 [(0,external_wp_i18n_namespaceObject.isRTL)() ? 'right' : 'left']: offset 38919 }; 38920 placedMarks.push({ 38921 ...mark, 38922 isFilled, 38923 key, 38924 style: offsetStyle 38925 }); 38926 }); 38927 return placedMarks; 38928} 38929 38930;// CONCATENATED MODULE: ./packages/components/build-module/range-control/tooltip.js 38931 38932/** 38933 * External dependencies 38934 */ 38935 38936 38937/** 38938 * WordPress dependencies 38939 */ 38940 38941 38942/** 38943 * Internal dependencies 38944 */ 38945 38946function SimpleTooltip(props) { 38947 const { 38948 className, 38949 inputRef, 38950 tooltipPosition, 38951 show = false, 38952 style = {}, 38953 value = 0, 38954 renderTooltipContent = v => v, 38955 zIndex = 100, 38956 ...restProps 38957 } = props; 38958 const position = useTooltipPosition({ 38959 inputRef, 38960 tooltipPosition 38961 }); 38962 const classes = classnames_default()('components-simple-tooltip', className); 38963 const styles = { 38964 ...style, 38965 zIndex 38966 }; 38967 return (0,external_wp_element_namespaceObject.createElement)(range_control_styles_Tooltip, { 38968 ...restProps, 38969 "aria-hidden": show, 38970 className: classes, 38971 position: position, 38972 show: show, 38973 role: "tooltip", 38974 style: styles 38975 }, renderTooltipContent(value)); 38976} 38977function useTooltipPosition({ 38978 inputRef, 38979 tooltipPosition 38980}) { 38981 const [position, setPosition] = (0,external_wp_element_namespaceObject.useState)(); 38982 const setTooltipPosition = (0,external_wp_element_namespaceObject.useCallback)(() => { 38983 if (inputRef && inputRef.current) { 38984 setPosition(tooltipPosition); 38985 } 38986 }, [tooltipPosition, inputRef]); 38987 (0,external_wp_element_namespaceObject.useEffect)(() => { 38988 setTooltipPosition(); 38989 }, [setTooltipPosition]); 38990 (0,external_wp_element_namespaceObject.useEffect)(() => { 38991 window.addEventListener('resize', setTooltipPosition); 38992 return () => { 38993 window.removeEventListener('resize', setTooltipPosition); 38994 }; 38995 }); 38996 return position; 38997} 38998 38999;// CONCATENATED MODULE: ./packages/components/build-module/range-control/index.js 39000 39001/** 39002 * External dependencies 39003 */ 39004
39005/** 39006 * WordPress dependencies 39007 */ 39008 39009 39010 39011 39012/** 39013 * Internal dependencies 39014 */ 39015 39016 39017 39018 39019 39020 39021 39022 39023 39024 39025 39026const range_control_noop = () => {}; 39027function UnforwardedRangeControl(props, forwardedRef) { 39028 const { 39029 __nextHasNoMarginBottom = false, 39030 afterIcon, 39031 allowReset = false, 39032 beforeIcon, 39033 className, 39034 color: colorProp = COLORS.theme.accent, 39035 currentInput, 39036 disabled = false, 39037 help, 39038 hideLabelFromVision = false, 39039 initialPosition, 39040 isShiftStepEnabled = true, 39041 label, 39042 marks = false, 39043 max = 100, 39044 min = 0, 39045 onBlur = range_control_noop, 39046 onChange = range_control_noop, 39047 onFocus = range_control_noop, 39048 onMouseLeave = range_control_noop, 39049 onMouseMove = range_control_noop, 39050 railColor, 39051 renderTooltipContent = v => v, 39052 resetFallbackValue, 39053 __next40pxDefaultSize = false, 39054 shiftStep = 10, 39055 showTooltip: showTooltipProp, 39056 step = 1, 39057 trackColor, 39058 value: valueProp, 39059 withInputField = true, 39060 ...otherProps 39061 } = props; 39062 const [value, setValue] = useControlledRangeValue({ 39063 min, 39064 max, 39065 value: valueProp !== null && valueProp !== void 0 ? valueProp : null, 39066 initial: initialPosition 39067 }); 39068 const isResetPendent = (0,external_wp_element_namespaceObject.useRef)(false); 39069 let hasTooltip = showTooltipProp; 39070 let hasInputField = withInputField; 39071 if (step === 'any') { 39072 // The tooltip and number input field are hidden when the step is "any" 39073 // because the decimals get too lengthy to fit well. 39074 hasTooltip = false; 39075 hasInputField = false; 39076 } 39077 const [showTooltip, setShowTooltip] = (0,external_wp_element_namespaceObject.useState)(hasTooltip); 39078 const [isFocused, setIsFocused] = (0,external_wp_element_namespaceObject.useState)(false); 39079 const inputRef = (0,external_wp_element_namespaceObject.useRef)(); 39080 const isCurrentlyFocused = inputRef.current?.matches(':focus'); 39081 const isThumbFocused = !disabled && isFocused; 39082 const isValueReset = value === null; 39083 const currentValue = value !== undefined ? value : currentInput; 39084 const inputSliderValue = isValueReset ? '' : currentValue; 39085 const rangeFillValue = isValueReset ? (max - min) / 2 + min : value; 39086 const fillValue = isValueReset ? 50 : (value - min) / (max - min) * 100; 39087 const fillValueOffset = `${math_clamp(fillValue, 0, 100)}%`; 39088 const classes = classnames_default()('components-range-control', className); 39089 const wrapperClasses = classnames_default()('components-range-control__wrapper', !!marks && 'is-marked'); 39090 const id = (0,external_wp_compose_namespaceObject.useInstanceId)(UnforwardedRangeControl, 'inspector-range-control'); 39091 const describedBy = !!help ? `${id}__help` : undefined; 39092 const enableTooltip = hasTooltip !== false && Number.isFinite(value); 39093 const handleOnRangeChange = event => { 39094 const nextValue = parseFloat(event.target.value); 39095 setValue(nextValue); 39096 onChange(nextValue); 39097 }; 39098 const handleOnChange = next => { 39099 // @ts-expect-error TODO: Investigate if it's problematic for setValue() to 39100 // potentially receive a NaN when next is undefined. 39101 let nextValue = parseFloat(next); 39102 setValue(nextValue); 39103 39104 /* 39105 * Calls onChange only when nextValue is numeric 39106 * otherwise may queue a reset for the blur event. 39107 */ 39108 if (!isNaN(nextValue)) {
39109 if (nextValue < min || nextValue > max) { 39110 nextValue = floatClamp(nextValue, min, max); 39111 } 39112 onChange(nextValue); 39113 isResetPendent.current = false; 39114 } else if (allowReset) { 39115 isResetPendent.current = true; 39116 } 39117 }; 39118 const handleOnInputNumberBlur = () => { 39119 if (isResetPendent.current) { 39120 handleOnReset(); 39121 isResetPendent.current = false; 39122 } 39123 }; 39124 const handleOnReset = () => { 39125 let resetValue = parseFloat(`${resetFallbackValue}`); 39126 let onChangeResetValue = resetValue; 39127 if (isNaN(resetValue)) { 39128 resetValue = null; 39129 onChangeResetValue = undefined; 39130 } 39131 setValue(resetValue); 39132 39133 /** 39134 * Previously, this callback would always receive undefined as 39135 * an argument. This behavior is unexpected, specifically 39136 * when resetFallbackValue is defined. 39137 * 39138 * The value of undefined is not ideal. Passing it through 39139 * to internal <input /> elements would change it from a 39140 * controlled component to an uncontrolled component. 39141 * 39142 * For now, to minimize unexpected regressions, we're going to 39143 * preserve the undefined callback argument, except when a 39144 * resetFallbackValue is defined. 39145 */ 39146 onChange(onChangeResetValue); 39147 }; 39148 const handleShowTooltip = () => setShowTooltip(true); 39149 const handleHideTooltip = () => setShowTooltip(false); 39150 const handleOnBlur = event => { 39151 onBlur(event); 39152 setIsFocused(false); 39153 handleHideTooltip(); 39154 }; 39155 const handleOnFocus = event => { 39156 onFocus(event); 39157 setIsFocused(true); 39158 handleShowTooltip(); 39159 }; 39160 const offsetStyle = { 39161 [(0,external_wp_i18n_namespaceObject.isRTL)() ? 'right' : 'left']: fillValueOffset 39162 }; 39163 return (0,external_wp_element_namespaceObject.createElement)(base_control, { 39164 __nextHasNoMarginBottom: __nextHasNoMarginBottom, 39165 className: classes, 39166 label: label, 39167 hideLabelFromVision: hideLabelFromVision, 39168 id: `${id}`, 39169 help: help 39170 }, (0,external_wp_element_namespaceObject.createElement)(range_control_styles_Root, { 39171 className: "components-range-control__root", 39172 __next40pxDefaultSize: __next40pxDefaultSize 39173 }, beforeIcon && (0,external_wp_element_namespaceObject.createElement)(BeforeIconWrapper, null, (0,external_wp_element_namespaceObject.createElement)(build_module_icon, { 39174 icon: beforeIcon 39175 })), (0,external_wp_element_namespaceObject.createElement)(range_control_styles_Wrapper, { 39176 __nextHasNoMarginBottom: __nextHasNoMarginBottom, 39177 className: wrapperClasses, 39178 color: colorProp, 39179 marks: !!marks 39180 }, (0,external_wp_element_namespaceObject.createElement)(input_range, { 39181 ...otherProps, 39182 className: "components-range-control__slider", 39183 describedBy: describedBy, 39184 disabled: disabled, 39185 id: `${id}`, 39186 label: label, 39187 max: max, 39188 min: min, 39189 onBlur: handleOnBlur, 39190 onChange: handleOnRangeChange, 39191 onFocus: handleOnFocus, 39192 onMouseMove: onMouseMove, 39193 onMouseLeave: onMouseLeave, 39194 ref: (0,external_wp_compose_namespaceObject.useMergeRefs)([inputRef, forwardedRef]), 39195 step: step, 39196 value: inputSliderValue !== null && inputSliderValue !== void 0 ? inputSliderValue : undefined 39197 }), (0,external_wp_element_namespaceObject.createElement)(RangeRail, { 39198 "aria-hidden": true, 39199 disabled: disabled, 39200 marks: marks, 39201 max: max, 39202 min: min, 39203 railColor: railColor, 39204 step: step, 39205 value: rangeFillValue 39206 }), (0,external_wp_element_namespaceObject.createElement)(Track, { 39207 "aria-hidden": true, 39208 className: "components-range-control__track", 39209 disabled: disabled, 39210 style: { 39211 width: fillValueOffset 39212 }, 39213 trackColor: trackColor 39214 }), (0,external_wp_element_namespaceObject.createElement)(ThumbWrapper, { 39215 className: "components-range-control__thumb-wrapper", 39216 style: offsetStyle, 39217 disabled: disabled 39218 }, (0,external_wp_element_namespaceObject.createElement)(Thumb, { 39219 "aria-hidden": true, 39220 isFocused: isThumbFocused, 39221 disabled: disabled 39222 })), enableTooltip && (0,external_wp_element_namespaceObject.createElement)(SimpleTooltip, { 39223 className: "components-range-control__tooltip", 39224 inputRef: inputRef, 39225 tooltipPosition: "bottom", 39226 renderTooltipContent: renderTooltipContent, 39227 show: isCurrentlyFocused || showTooltip, 39228 style: offsetStyle, 39229 value: value 39230 })), afterIcon && (0,external_wp_element_namespaceObject.createElement)(AfterIconWrapper, null, (0,external_wp_element_namespaceObject.createElement)(build_module_icon, { 39231 icon: afterIcon 39232 })), hasInputField && (0,external_wp_element_namespaceObject.createElement)(InputNumber, { 39233 "aria-label": label, 39234 className: "components-range-control__number", 39235 disabled: disabled, 39236 inputMode: "decimal", 39237 isShiftStepEnabled: isShiftStepEnabled, 39238 max: max, 39239 min: min, 39240 onBlur: handleOnInputNumberBlur, 39241 onChange: handleOnChange, 39242 shiftStep: shiftStep, 39243 size: __next40pxDefaultSize ? '__unstable-large' : 'default', 39244 __unstableInputWidth: __next40pxDefaultSize ? space(20) : space(16), 39245 step: step 39246 // @ts-expect-error TODO: Investigate if the `null` value is necessary 39247 , 39248 value: inputSliderValue 39249 }), allowReset && (0,external_wp_element_namespaceObject.createElement)(ActionRightWrapper, null, (0,external_wp_element_namespaceObject.createElement)(build_module_button, { 39250 className: "components-range-control__reset", 39251 disabled: disabled || value === undefined, 39252 variant: "secondary", 39253 isSmall: true, 39254 onClick: handleOnReset 39255 }, (0,external_wp_i18n_namespaceObject.__)('Reset'))))); 39256} 39257 39258/** 39259 * RangeControls are used to make selections from a range of incremental values. 39260 * 39261 * ```jsx 39262 * import { RangeControl } from '@wordpress/components';
39263 * import { useState } from '@wordpress/element'; 39264 * 39265 * const MyRangeControl = () => { 39266 * const [ isChecked, setChecked ] = useState( true ); 39267 * return ( 39268 * <RangeControl 39269 * help="Please select how transparent you would like this." 39270 * initialPosition={50} 39271 * label="Opacity" 39272 * max={100} 39273 * min={0} 39274 * onChange={() => {}} 39275 * /> 39276 * ); 39277 * }; 39278 * ``` 39279 */ 39280const RangeControl = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedRangeControl); 39281/* harmony default export */ const range_control = (RangeControl); 39282 39283;// CONCATENATED MODULE: ./packages/components/build-module/color-picker/styles.js 39284 39285/** 39286 * External dependencies 39287 */ 39288 39289/** 39290 * Internal dependencies 39291 */ 39292 39293 39294 39295 39296 39297 39298 39299 39300 39301 39302const NumberControlWrapper = /*#__PURE__*/emotion_styled_base_browser_esm(number_control, true ? { 39303 target: "ez9hsf47" 39304} : 0)(Container, "{width:", space(24), ";}" + ( true ? "" : 0)); 39305const styles_SelectControl = /*#__PURE__*/emotion_styled_base_browser_esm(select_control, true ? { 39306 target: "ez9hsf46" 39307} : 0)("margin-left:", space(-2), ";width:5em;select:not( :focus )~", BackdropUI, BackdropUI, BackdropUI, "{border-color:transparent;}" + ( true ? "" : 0)); 39308const styles_RangeControl = /*#__PURE__*/emotion_styled_base_browser_esm(range_control, true ? { 39309 target: "ez9hsf45" 39310} : 0)("flex:1;margin-right:", space(2), ";" + ( true ? "" : 0)); 39311 39312// Make the Hue circle picker not go out of the bar. 39313const interactiveHueStyles = ` 39314.react-colorful__interactive { 39315 width: calc( 100% - ${space(2)} ); 39316 margin-left: ${space(1)}; 39317}`; 39318const AuxiliaryColorArtefactWrapper = emotion_styled_base_browser_esm("div", true ? { 39319 target: "ez9hsf44" 39320} : 0)("padding-top:", space(2), ";padding-right:0;padding-left:0;padding-bottom:0;" + ( true ? "" : 0)); 39321const AuxiliaryColorArtefactHStackHeader = /*#__PURE__*/emotion_styled_base_browser_esm(h_stack_component, true ? { 39322 target: "ez9hsf43" 39323} : 0)("padding-left:", space(4), ";padding-right:", space(4), ";" + ( true ? "" : 0)); 39324const ColorInputWrapper = /*#__PURE__*/emotion_styled_base_browser_esm(flex_component, true ? { 39325 target: "ez9hsf42" 39326} : 0)("padding-top:", space(4), ";padding-left:", space(4), ";padding-right:", space(3), ";padding-bottom:", space(5), ";" + ( true ? "" : 0)); 39327const ColorfulWrapper = emotion_styled_base_browser_esm("div", true ? { 39328 target: "ez9hsf41" 39329} : 0)(boxSizingReset, ";width:216px;.react-colorful{display:flex;flex-direction:column;align-items:center;width:216px;height:auto;overflow:hidden;}.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, ";" + ( true ? "" : 0)); 39330const CopyButton = /*#__PURE__*/emotion_styled_base_browser_esm(build_module_button, true ? { 39331 target: "ez9hsf40" 39332} : 0)("&&&&&{min-width:", space(6), ";padding:0;>svg{margin-right:0;}}" + ( true ? "" : 0)); 39333 39334;// CONCATENATED MODULE: ./packages/icons/build-module/library/copy.js 39335 39336/** 39337 * WordPress dependencies 39338 */ 39339 39340const copy_copy = (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.SVG, { 39341 xmlns: "http://www.w3.org/2000/svg", 39342 viewBox: "0 0 24 24" 39343}, (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.Path, { 39344 d: "M20.2 8v11c0 .7-.6 1.2-1.2 1.2H6v1.5h13c1.5 0 2.7-1.2 2.7-2.8V8zM18 16.4V4.6c0-.9-.7-1.6-1.6-1.6H4.6C3.7 3 3 3.7 3 4.6v11.8c0 .9.7 1.6 1.6 1.6h11.8c.9 0 1.6-.7 1.6-1.6zm-13.5 0V4.6c0-.1.1-.1.1-.1h11.8c.1 0 .1.1.1.1v11.8c0 .1-.1.1-.1.1H4.6l-.1-.1z" 39345})); 39346/* harmony default export */ const library_copy = (copy_copy); 39347 39348;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getWindow.js 39349function getWindow_getWindow(node) { 39350 if (node == null) { 39351 return window; 39352 } 39353 39354 if (node.toString() !== '[object Window]') { 39355 var ownerDocument = node.ownerDocument; 39356 return ownerDocument ? ownerDocument.defaultView || window : window; 39357 } 39358 39359 return node; 39360} 39361;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/instanceOf.js 39362 39363 39364function instanceOf_isElement(node) { 39365 var OwnElement = getWindow_getWindow(node).Element; 39366 return node instanceof OwnElement || node instanceof Element; 39367} 39368 39369function instanceOf_isHTMLElement(node) { 39370 var OwnElement = getWindow_getWindow(node).HTMLElement; 39371 return node instanceof OwnElement || node instanceof HTMLElement; 39372} 39373 39374function instanceOf_isShadowRoot(node) { 39375 // IE 11 has no ShadowRoot 39376 if (typeof ShadowRoot === 'undefined') { 39377 return false;
vendor: 5,436 bytes, lines 39378-39537
39378 } 39379 39380 var OwnElement = getWindow_getWindow(node).ShadowRoot; 39381 return node instanceof OwnElement || node instanceof ShadowRoot; 39382} 39383 39384 39385;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/utils/math.js 39386var math_max = Math.max; 39387var math_min = Math.min; 39388var math_round = Math.round; 39389;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/utils/userAgent.js 39390function getUAString() { 39391 var uaData = navigator.userAgentData; 39392 39393 if (uaData != null && uaData.brands && Array.isArray(uaData.brands)) { 39394 return uaData.brands.map(function (item) { 39395 return item.brand + "/" + item.version; 39396 }).join(' '); 39397 } 39398 39399 return navigator.userAgent; 39400} 39401;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/isLayoutViewport.js 39402 39403function isLayoutViewport() { 39404 return !/^((?!chrome|android).)*safari/i.test(getUAString()); 39405} 39406;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getBoundingClientRect.js 39407 39408 39409 39410 39411function getBoundingClientRect_getBoundingClientRect(element, includeScale, isFixedStrategy) { 39412 if (includeScale === void 0) { 39413 includeScale = false; 39414 } 39415 39416 if (isFixedStrategy === void 0) { 39417 isFixedStrategy = false; 39418 } 39419 39420 var clientRect = element.getBoundingClientRect(); 39421 var scaleX = 1; 39422 var scaleY = 1; 39423 39424 if (includeScale && instanceOf_isHTMLElement(element)) { 39425 scaleX = element.offsetWidth > 0 ? math_round(clientRect.width) / element.offsetWidth || 1 : 1; 39426 scaleY = element.offsetHeight > 0 ? math_round(clientRect.height) / element.offsetHeight || 1 : 1; 39427 } 39428 39429 var _ref = instanceOf_isElement(element) ? getWindow_getWindow(element) : window, 39430 visualViewport = _ref.visualViewport; 39431 39432 var addVisualOffsets = !isLayoutViewport() && isFixedStrategy; 39433 var x = (clientRect.left + (addVisualOffsets && visualViewport ? visualViewport.offsetLeft : 0)) / scaleX; 39434 var y = (clientRect.top + (addVisualOffsets && visualViewport ? visualViewport.offsetTop : 0)) / scaleY; 39435 var width = clientRect.width / scaleX; 39436 var height = clientRect.height / scaleY; 39437 return { 39438 width: width, 39439 height: height, 39440 top: y, 39441 right: x + width, 39442 bottom: y + height, 39443 left: x, 39444 x: x, 39445 y: y 39446 }; 39447} 39448;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getWindowScroll.js 39449 39450function getWindowScroll(node) { 39451 var win = getWindow_getWindow(node); 39452 var scrollLeft = win.pageXOffset; 39453 var scrollTop = win.pageYOffset; 39454 return { 39455 scrollLeft: scrollLeft, 39456 scrollTop: scrollTop 39457 }; 39458} 39459;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getHTMLElementScroll.js 39460function getHTMLElementScroll(element) { 39461 return { 39462 scrollLeft: element.scrollLeft, 39463 scrollTop: element.scrollTop 39464 }; 39465} 39466;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getNodeScroll.js 39467 39468 39469 39470 39471function getNodeScroll_getNodeScroll(node) { 39472 if (node === getWindow_getWindow(node) || !instanceOf_isHTMLElement(node)) { 39473 return getWindowScroll(node); 39474 } else { 39475 return getHTMLElementScroll(node); 39476 } 39477} 39478;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getNodeName.js 39479function getNodeName_getNodeName(element) { 39480 return element ? (element.nodeName || '').toLowerCase() : null; 39481} 39482;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getDocumentElement.js 39483 39484function getDocumentElement_getDocumentElement(element) { 39485 // $FlowFixMe[incompatible-return]: assume body is always available 39486 return ((instanceOf_isElement(element) ? element.ownerDocument : // $FlowFixMe[prop-missing] 39487 element.document) || window.document).documentElement; 39488} 39489;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getWindowScrollBarX.js 39490 39491 39492 39493function getWindowScrollBarX_getWindowScrollBarX(element) { 39494 // If <html> has a CSS width greater than the viewport, then this will be 39495 // incorrect for RTL. 39496 // Popper 1 is broken in this case and never had a bug report so let's assume 39497 // it's not an issue. I don't think anyone ever specifies width on <html> 39498 // anyway. 39499 // Browsers where the left scrollbar doesn't cause an issue report `0` for 39500 // this (e.g. Edge 2019, IE11, Safari) 39501 return getBoundingClientRect_getBoundingClientRect(getDocumentElement_getDocumentElement(element)).left + getWindowScroll(element).scrollLeft; 39502} 39503;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getComputedStyle.js 39504 39505function getComputedStyle_getComputedStyle(element) { 39506 return getWindow_getWindow(element).getComputedStyle(element); 39507} 39508;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/isScrollParent.js 39509 39510function isScrollParent(element) { 39511 // Firefox wants us to check `-x` and `-y` variations as well 39512 var _getComputedStyle = getComputedStyle_getComputedStyle(element), 39513 overflow = _getComputedStyle.overflow, 39514 overflowX = _getComputedStyle.overflowX, 39515 overflowY = _getComputedStyle.overflowY; 39516 39517 return /auto|scroll|overlay|hidden/.test(overflow + overflowY + overflowX); 39518} 39519;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getCompositeRect.js 39520 39521 39522 39523 39524 39525 39526 39527 39528 39529function isElementScaled(element) { 39530 var rect = element.getBoundingClientRect(); 39531 var scaleX = math_round(rect.width) / element.offsetWidth || 1; 39532 var scaleY = math_round(rect.height) / element.offsetHeight || 1; 39533 return scaleX !== 1 || scaleY !== 1; 39534} // Returns the composite rect of an element relative to its offsetParent. 39535// Composite means it takes into account transforms as well as layout. 39536 39537
vendor: 4,122 bytes, lines 39538-39662
39538function getCompositeRect(elementOrVirtualElement, offsetParent, isFixed) { 39539 if (isFixed === void 0) { 39540 isFixed = false; 39541 } 39542 39543 var isOffsetParentAnElement = instanceOf_isHTMLElement(offsetParent); 39544 var offsetParentIsScaled = instanceOf_isHTMLElement(offsetParent) && isElementScaled(offsetParent); 39545 var documentElement = getDocumentElement_getDocumentElement(offsetParent); 39546 var rect = getBoundingClientRect_getBoundingClientRect(elementOrVirtualElement, offsetParentIsScaled, isFixed); 39547 var scroll = { 39548 scrollLeft: 0, 39549 scrollTop: 0 39550 }; 39551 var offsets = { 39552 x: 0, 39553 y: 0 39554 }; 39555 39556 if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) { 39557 if (getNodeName_getNodeName(offsetParent) !== 'body' || // https://github.com/popperjs/popper-core/issues/1078 39558 isScrollParent(documentElement)) { 39559 scroll = getNodeScroll_getNodeScroll(offsetParent); 39560 } 39561 39562 if (instanceOf_isHTMLElement(offsetParent)) { 39563 offsets = getBoundingClientRect_getBoundingClientRect(offsetParent, true); 39564 offsets.x += offsetParent.clientLeft; 39565 offsets.y += offsetParent.clientTop; 39566 } else if (documentElement) { 39567 offsets.x = getWindowScrollBarX_getWindowScrollBarX(documentElement); 39568 } 39569 } 39570 39571 return { 39572 x: rect.left + scroll.scrollLeft - offsets.x, 39573 y: rect.top + scroll.scrollTop - offsets.y, 39574 width: rect.width, 39575 height: rect.height 39576 }; 39577} 39578;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getLayoutRect.js 39579 // Returns the layout rect of an element relative to its offsetParent. Layout 39580// means it doesn't take into account transforms. 39581 39582function getLayoutRect(element) { 39583 var clientRect = getBoundingClientRect_getBoundingClientRect(element); // Use the clientRect sizes if it's not been transformed. 39584 // Fixes https://github.com/popperjs/popper-core/issues/1223 39585 39586 var width = element.offsetWidth; 39587 var height = element.offsetHeight; 39588 39589 if (Math.abs(clientRect.width - width) <= 1) { 39590 width = clientRect.width; 39591 } 39592 39593 if (Math.abs(clientRect.height - height) <= 1) { 39594 height = clientRect.height; 39595 } 39596 39597 return { 39598 x: element.offsetLeft, 39599 y: element.offsetTop, 39600 width: width, 39601 height: height 39602 }; 39603} 39604;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getParentNode.js 39605 39606 39607 39608function getParentNode_getParentNode(element) { 39609 if (getNodeName_getNodeName(element) === 'html') { 39610 return element; 39611 } 39612 39613 return (// this is a quicker (but less type safe) way to save quite some bytes from the bundle 39614 // $FlowFixMe[incompatible-return] 39615 // $FlowFixMe[prop-missing] 39616 element.assignedSlot || // step into the shadow DOM of the parent of a slotted node 39617 element.parentNode || ( // DOM Element detected 39618 instanceOf_isShadowRoot(element) ? element.host : null) || // ShadowRoot detected 39619 // $FlowFixMe[incompatible-call]: HTMLElement is a Node 39620 getDocumentElement_getDocumentElement(element) // fallback 39621 39622 ); 39623} 39624;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getScrollParent.js 39625 39626 39627 39628 39629function getScrollParent(node) { 39630 if (['html', 'body', '#document'].indexOf(getNodeName_getNodeName(node)) >= 0) { 39631 // $FlowFixMe[incompatible-return]: assume body is always available 39632 return node.ownerDocument.body; 39633 } 39634 39635 if (instanceOf_isHTMLElement(node) && isScrollParent(node)) { 39636 return node; 39637 } 39638 39639 return getScrollParent(getParentNode_getParentNode(node)); 39640} 39641;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/listScrollParents.js 39642 39643 39644 39645 39646/* 39647given a DOM element, return the list of all scroll parents, up the list of ancesors 39648until we get to the top window object. This list is what we attach scroll listeners 39649to, because if any of these parent elements scroll, we'll need to re-calculate the 39650reference element's position. 39651*/ 39652 39653function listScrollParents(element, list) { 39654 var _element$ownerDocumen; 39655 39656 if (list === void 0) { 39657 list = []; 39658 } 39659 39660 var scrollParent = getScrollParent(element); 39661 var isBody = scrollParent === ((_element$ownerDocumen = element.ownerDocument) == null ? void 0 : _element$ownerDocumen.body); 39662 var win = getWindow_getWindow(scrollParent);
vendor: 4,736 bytes, lines 39663-39781
39663 var target = isBody ? [win].concat(win.visualViewport || [], isScrollParent(scrollParent) ? scrollParent : []) : scrollParent; 39664 var updatedList = list.concat(target); 39665 return isBody ? updatedList : // $FlowFixMe[incompatible-call]: isBody tells us target will be an HTMLElement here 39666 updatedList.concat(listScrollParents(getParentNode_getParentNode(target))); 39667} 39668;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/isTableElement.js 39669 39670function isTableElement_isTableElement(element) { 39671 return ['table', 'td', 'th'].indexOf(getNodeName_getNodeName(element)) >= 0; 39672} 39673;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getOffsetParent.js 39674 39675 39676 39677 39678 39679 39680 39681 39682function getOffsetParent_getTrueOffsetParent(element) { 39683 if (!instanceOf_isHTMLElement(element) || // https://github.com/popperjs/popper-core/issues/837 39684 getComputedStyle_getComputedStyle(element).position === 'fixed') { 39685 return null; 39686 } 39687 39688 return element.offsetParent; 39689} // `.offsetParent` reports `null` for fixed elements, while absolute elements 39690// return the containing block 39691 39692 39693function getOffsetParent_getContainingBlock(element) { 39694 var isFirefox = /firefox/i.test(getUAString()); 39695 var isIE = /Trident/i.test(getUAString()); 39696 39697 if (isIE && instanceOf_isHTMLElement(element)) { 39698 // In IE 9, 10 and 11 fixed elements containing block is always established by the viewport 39699 var elementCss = getComputedStyle_getComputedStyle(element); 39700 39701 if (elementCss.position === 'fixed') { 39702 return null; 39703 } 39704 } 39705 39706 var currentNode = getParentNode_getParentNode(element); 39707 39708 if (instanceOf_isShadowRoot(currentNode)) { 39709 currentNode = currentNode.host; 39710 } 39711 39712 while (instanceOf_isHTMLElement(currentNode) && ['html', 'body'].indexOf(getNodeName_getNodeName(currentNode)) < 0) { 39713 var css = getComputedStyle_getComputedStyle(currentNode); // This is non-exhaustive but covers the most common CSS properties that 39714 // create a containing block. 39715 // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block 39716 39717 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') { 39718 return currentNode; 39719 } else { 39720 currentNode = currentNode.parentNode; 39721 } 39722 } 39723 39724 return null; 39725} // Gets the closest ancestor positioned element. Handles some edge cases, 39726// such as table ancestors and cross browser bugs. 39727 39728 39729function getOffsetParent_getOffsetParent(element) { 39730 var window = getWindow_getWindow(element); 39731 var offsetParent = getOffsetParent_getTrueOffsetParent(element); 39732 39733 while (offsetParent && isTableElement_isTableElement(offsetParent) && getComputedStyle_getComputedStyle(offsetParent).position === 'static') { 39734 offsetParent = getOffsetParent_getTrueOffsetParent(offsetParent); 39735 } 39736 39737 if (offsetParent && (getNodeName_getNodeName(offsetParent) === 'html' || getNodeName_getNodeName(offsetParent) === 'body' && getComputedStyle_getComputedStyle(offsetParent).position === 'static')) { 39738 return window; 39739 } 39740 39741 return offsetParent || getOffsetParent_getContainingBlock(element) || window; 39742} 39743;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/enums.js 39744var enums_top = 'top'; 39745var bottom = 'bottom'; 39746var right = 'right'; 39747var left = 'left'; 39748var enums_auto = 'auto'; 39749var basePlacements = [enums_top, bottom, right, left]; 39750var start = 'start'; 39751var end = 'end'; 39752var clippingParents = 'clippingParents'; 39753var viewport = 'viewport'; 39754var popper = 'popper'; 39755var reference = 'reference'; 39756var variationPlacements = /*#__PURE__*/basePlacements.reduce(function (acc, placement) { 39757 return acc.concat([placement + "-" + start, placement + "-" + end]); 39758}, []); 39759var enums_placements = /*#__PURE__*/[].concat(basePlacements, [enums_auto]).reduce(function (acc, placement) { 39760 return acc.concat([placement, placement + "-" + start, placement + "-" + end]); 39761}, []); // modifiers that need to read the DOM 39762 39763var beforeRead = 'beforeRead'; 39764var read = 'read'; 39765var afterRead = 'afterRead'; // pure-logic modifiers 39766 39767var beforeMain = 'beforeMain'; 39768var main = 'main'; 39769var afterMain = 'afterMain'; // modifier with the purpose to write to the DOM (or write into a framework state) 39770 39771var beforeWrite = 'beforeWrite'; 39772var write = 'write'; 39773var afterWrite = 'afterWrite'; 39774var modifierPhases = [beforeRead, read, afterRead, beforeMain, main, afterMain, beforeWrite, write, afterWrite]; 39775;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/utils/orderModifiers.js 39776 // source: https://stackoverflow.com/questions/49875255 39777 39778function order(modifiers) { 39779 var map = new Map(); 39780 var visited = new Set(); 39781 var result = [];
vendor: 8,879 bytes, lines 39782-40038
39782 modifiers.forEach(function (modifier) { 39783 map.set(modifier.name, modifier); 39784 }); // On visiting object, check for its dependencies and visit them recursively 39785 39786 function sort(modifier) { 39787 visited.add(modifier.name); 39788 var requires = [].concat(modifier.requires || [], modifier.requiresIfExists || []); 39789 requires.forEach(function (dep) { 39790 if (!visited.has(dep)) { 39791 var depModifier = map.get(dep); 39792 39793 if (depModifier) { 39794 sort(depModifier); 39795 } 39796 } 39797 }); 39798 result.push(modifier); 39799 } 39800 39801 modifiers.forEach(function (modifier) { 39802 if (!visited.has(modifier.name)) { 39803 // check for visited object 39804 sort(modifier); 39805 } 39806 }); 39807 return result; 39808} 39809 39810function orderModifiers(modifiers) { 39811 // order based on dependencies 39812 var orderedModifiers = order(modifiers); // order based on phase 39813 39814 return modifierPhases.reduce(function (acc, phase) { 39815 return acc.concat(orderedModifiers.filter(function (modifier) { 39816 return modifier.phase === phase; 39817 })); 39818 }, []); 39819} 39820;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/utils/debounce.js 39821function debounce(fn) { 39822 var pending; 39823 return function () { 39824 if (!pending) { 39825 pending = new Promise(function (resolve) { 39826 Promise.resolve().then(function () { 39827 pending = undefined; 39828 resolve(fn()); 39829 }); 39830 }); 39831 } 39832 39833 return pending; 39834 }; 39835} 39836;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/utils/mergeByName.js 39837function mergeByName(modifiers) { 39838 var merged = modifiers.reduce(function (merged, current) { 39839 var existing = merged[current.name]; 39840 merged[current.name] = existing ? Object.assign({}, existing, current, { 39841 options: Object.assign({}, existing.options, current.options), 39842 data: Object.assign({}, existing.data, current.data) 39843 }) : current; 39844 return merged; 39845 }, {}); // IE11 does not support Object.values 39846 39847 return Object.keys(merged).map(function (key) { 39848 return merged[key]; 39849 }); 39850} 39851;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/createPopper.js 39852 39853 39854 39855 39856 39857 39858 39859 39860 39861 39862 39863 39864 39865 39866var INVALID_ELEMENT_ERROR = 'Popper: Invalid reference or popper argument provided. They must be either a DOM element or virtual element.'; 39867var INFINITE_LOOP_ERROR = 'Popper: An infinite loop in the modifiers cycle has been detected! The cycle has been interrupted to prevent a browser crash.'; 39868var DEFAULT_OPTIONS = { 39869 placement: 'bottom', 39870 modifiers: [], 39871 strategy: 'absolute' 39872}; 39873 39874function areValidElements() { 39875 for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) { 39876 args[_key] = arguments[_key]; 39877 } 39878 39879 return !args.some(function (element) { 39880 return !(element && typeof element.getBoundingClientRect === 'function'); 39881 }); 39882} 39883 39884function popperGenerator(generatorOptions) { 39885 if (generatorOptions === void 0) { 39886 generatorOptions = {}; 39887 } 39888 39889 var _generatorOptions = generatorOptions, 39890 _generatorOptions$def = _generatorOptions.defaultModifiers, 39891 defaultModifiers = _generatorOptions$def === void 0 ? [] : _generatorOptions$def, 39892 _generatorOptions$def2 = _generatorOptions.defaultOptions, 39893 defaultOptions = _generatorOptions$def2 === void 0 ? DEFAULT_OPTIONS : _generatorOptions$def2; 39894 return function createPopper(reference, popper, options) { 39895 if (options === void 0) { 39896 options = defaultOptions; 39897 } 39898 39899 var state = { 39900 placement: 'bottom', 39901 orderedModifiers: [], 39902 options: Object.assign({}, DEFAULT_OPTIONS, defaultOptions), 39903 modifiersData: {}, 39904 elements: { 39905 reference: reference, 39906 popper: popper 39907 }, 39908 attributes: {}, 39909 styles: {} 39910 }; 39911 var effectCleanupFns = []; 39912 var isDestroyed = false; 39913 var instance = { 39914 state: state, 39915 setOptions: function setOptions(setOptionsAction) { 39916 var options = typeof setOptionsAction === 'function' ? setOptionsAction(state.options) : setOptionsAction; 39917 cleanupModifierEffects(); 39918 state.options = Object.assign({}, defaultOptions, state.options, options); 39919 state.scrollParents = { 39920 reference: instanceOf_isElement(reference) ? listScrollParents(reference) : reference.contextElement ? listScrollParents(reference.contextElement) : [], 39921 popper: listScrollParents(popper) 39922 }; // Orders the modifiers based on their dependencies and `phase` 39923 // properties 39924 39925 var orderedModifiers = orderModifiers(mergeByName([].concat(defaultModifiers, state.options.modifiers))); // Strip out disabled modifiers 39926 39927 state.orderedModifiers = orderedModifiers.filter(function (m) { 39928 return m.enabled; 39929 }); // Validate the provided modifiers so that the consumer will get warned 39930 // if one of the modifiers is invalid for any reason 39931 39932 if (false) { var _getComputedStyle, marginTop, marginRight, marginBottom, marginLeft, flipModifier, modifiers; } 39933 39934 runModifierEffects(); 39935 return instance.update(); 39936 }, 39937 // Sync update â it will always be executed, even if not necessary. This 39938 // is useful for low frequency updates where sync behavior simplifies the 39939 // logic. 39940 // For high frequency updates (e.g. `resize` and `scroll` events), always 39941 // prefer the async Popper#update method 39942 forceUpdate: function forceUpdate() { 39943 if (isDestroyed) { 39944 return; 39945 } 39946 39947 var _state$elements = state.elements, 39948 reference = _state$elements.reference, 39949 popper = _state$elements.popper; // Don't proceed if `reference` or `popper` are not valid elements 39950 // anymore 39951 39952 if (!areValidElements(reference, popper)) { 39953 if (false) {} 39954 39955 return; 39956 } // Store the reference and popper rects to be read by modifiers 39957 39958 39959 state.rects = { 39960 reference: getCompositeRect(reference, getOffsetParent_getOffsetParent(popper), state.options.strategy === 'fixed'), 39961 popper: getLayoutRect(popper) 39962 }; // Modifiers have the ability to reset the current update cycle. The 39963 // most common use case for this is the `flip` modifier changing the 39964 // placement, which then needs to re-run all the modifiers, because the 39965 // logic was previously ran for the previous placement and is therefore 39966 // stale/incorrect 39967 39968 state.reset = false; 39969 state.placement = state.options.placement; // On each update cycle, the `modifiersData` property for each modifier 39970 // is filled with the initial data specified by the modifier. This means 39971 // it doesn't persist and is fresh on each update. 39972 // To ensure persistent data, use `${name}#persistent` 39973 39974 state.orderedModifiers.forEach(function (modifier) { 39975 return state.modifiersData[modifier.name] = Object.assign({}, modifier.data); 39976 }); 39977 var __debug_loops__ = 0; 39978 39979 for (var index = 0; index < state.orderedModifiers.length; index++) { 39980 if (false) {} 39981 39982 if (state.reset === true) { 39983 state.reset = false; 39984 index = -1; 39985 continue; 39986 } 39987 39988 var _state$orderedModifie = state.orderedModifiers[index], 39989 fn = _state$orderedModifie.fn, 39990 _state$orderedModifie2 = _state$orderedModifie.options, 39991 _options = _state$orderedModifie2 === void 0 ? {} : _state$orderedModifie2, 39992 name = _state$orderedModifie.name; 39993 39994 if (typeof fn === 'function') { 39995 state = fn({ 39996 state: state, 39997 options: _options, 39998 name: name, 39999 instance: instance 40000 }) || state; 40001 } 40002 } 40003 }, 40004 // Async and optimistically optimized update â it will not be executed if 40005 // not necessary (debounced to run at most once-per-tick) 40006 update: debounce(function () { 40007 return new Promise(function (resolve) { 40008 instance.forceUpdate(); 40009 resolve(state); 40010 }); 40011 }), 40012 destroy: function destroy() { 40013 cleanupModifierEffects(); 40014 isDestroyed = true; 40015 } 40016 }; 40017 40018 if (!areValidElements(reference, popper)) { 40019 if (false) {} 40020 40021 return instance; 40022 } 40023 40024 instance.setOptions(options).then(function (state) { 40025 if (!isDestroyed && options.onFirstUpdate) { 40026 options.onFirstUpdate(state); 40027 } 40028 }); // Modifiers have the ability to execute arbitrary code before the first 40029 // update cycle runs. They will be executed in the same order as the update 40030 // cycle. This is useful when a modifier adds some persistent data that 40031 // other modifiers need to use, but the modifier is run after the dependent 40032 // one. 40033 40034 function runModifierEffects() { 40035 state.orderedModifiers.forEach(function (_ref3) { 40036 var name = _ref3.name, 40037 _ref3$options = _ref3.options, 40038 options = _ref3$options === void 0 ? {}
vendor: 24,980 bytes, lines 40038-40807
40038 : _ref3$options, 40039 effect = _ref3.effect; 40040 40041 if (typeof effect === 'function') { 40042 var cleanupFn = effect({ 40043 state: state, 40044 name: name, 40045 instance: instance, 40046 options: options 40047 }); 40048 40049 var noopFn = function noopFn() {}; 40050 40051 effectCleanupFns.push(cleanupFn || noopFn); 40052 } 40053 }); 40054 } 40055 40056 function cleanupModifierEffects() { 40057 effectCleanupFns.forEach(function (fn) { 40058 return fn(); 40059 }); 40060 effectCleanupFns = []; 40061 } 40062 40063 return instance; 40064 }; 40065} 40066var createPopper = /*#__PURE__*/(/* unused pure expression or super */ null && (popperGenerator())); // eslint-disable-next-line import/no-unused-modules 40067 40068 40069;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/modifiers/eventListeners.js 40070 // eslint-disable-next-line import/no-unused-modules 40071 40072var passive = { 40073 passive: true 40074}; 40075 40076function effect(_ref) { 40077 var state = _ref.state, 40078 instance = _ref.instance, 40079 options = _ref.options; 40080 var _options$scroll = options.scroll, 40081 scroll = _options$scroll === void 0 ? true : _options$scroll, 40082 _options$resize = options.resize, 40083 resize = _options$resize === void 0 ? true : _options$resize; 40084 var window = getWindow_getWindow(state.elements.popper); 40085 var scrollParents = [].concat(state.scrollParents.reference, state.scrollParents.popper); 40086 40087 if (scroll) { 40088 scrollParents.forEach(function (scrollParent) { 40089 scrollParent.addEventListener('scroll', instance.update, passive); 40090 }); 40091 } 40092 40093 if (resize) { 40094 window.addEventListener('resize', instance.update, passive); 40095 } 40096 40097 return function () { 40098 if (scroll) { 40099 scrollParents.forEach(function (scrollParent) { 40100 scrollParent.removeEventListener('scroll', instance.update, passive); 40101 }); 40102 } 40103 40104 if (resize) { 40105 window.removeEventListener('resize', instance.update, passive); 40106 } 40107 }; 40108} // eslint-disable-next-line import/no-unused-modules 40109 40110 40111/* harmony default export */ const eventListeners = ({ 40112 name: 'eventListeners', 40113 enabled: true, 40114 phase: 'write', 40115 fn: function fn() {}, 40116 effect: effect, 40117 data: {} 40118}); 40119;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/utils/getBasePlacement.js 40120 40121function getBasePlacement(placement) { 40122 return placement.split('-')[0]; 40123} 40124;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/utils/getVariation.js 40125function getVariation(placement) { 40126 return placement.split('-')[1]; 40127} 40128;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/utils/getMainAxisFromPlacement.js 40129function getMainAxisFromPlacement(placement) { 40130 return ['top', 'bottom'].indexOf(placement) >= 0 ? 'x' : 'y'; 40131} 40132;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/utils/computeOffsets.js 40133 40134 40135 40136 40137function computeOffsets(_ref) { 40138 var reference = _ref.reference, 40139 element = _ref.element, 40140 placement = _ref.placement; 40141 var basePlacement = placement ? getBasePlacement(placement) : null; 40142 var variation = placement ? getVariation(placement) : null; 40143 var commonX = reference.x + reference.width / 2 - element.width / 2; 40144 var commonY = reference.y + reference.height / 2 - element.height / 2; 40145 var offsets; 40146 40147 switch (basePlacement) { 40148 case enums_top: 40149 offsets = { 40150 x: commonX, 40151 y: reference.y - element.height 40152 }; 40153 break; 40154 40155 case bottom: 40156 offsets = { 40157 x: commonX, 40158 y: reference.y + reference.height 40159 }; 40160 break; 40161 40162 case right: 40163 offsets = { 40164 x: reference.x + reference.width, 40165 y: commonY 40166 }; 40167 break; 40168 40169 case left: 40170 offsets = { 40171 x: reference.x - element.width, 40172 y: commonY 40173 }; 40174 break; 40175 40176 default: 40177 offsets = { 40178 x: reference.x, 40179 y: reference.y 40180 }; 40181 } 40182 40183 var mainAxis = basePlacement ? getMainAxisFromPlacement(basePlacement) : null; 40184 40185 if (mainAxis != null) { 40186 var len = mainAxis === 'y' ? 'height' : 'width'; 40187 40188 switch (variation) { 40189 case start: 40190 offsets[mainAxis] = offsets[mainAxis] - (reference[len] / 2 - element[len] / 2); 40191 break; 40192 40193 case end: 40194 offsets[mainAxis] = offsets[mainAxis] + (reference[len] / 2 - element[len] / 2); 40195 break; 40196 40197 default: 40198 } 40199 } 40200 40201 return offsets; 40202} 40203;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/modifiers/popperOffsets.js 40204 40205 40206function popperOffsets(_ref) { 40207 var state = _ref.state, 40208 name = _ref.name; 40209 // Offsets are the actual position the popper needs to have to be 40210 // properly positioned near its reference element 40211 // This is the most basic placement, and will be adjusted by 40212 // the modifiers in the next step 40213 state.modifiersData[name] = computeOffsets({ 40214 reference: state.rects.reference, 40215 element: state.rects.popper, 40216 strategy: 'absolute', 40217 placement: state.placement 40218 }); 40219} // eslint-disable-next-line import/no-unused-modules 40220 40221 40222/* harmony default export */ const modifiers_popperOffsets = ({ 40223 name: 'popperOffsets', 40224 enabled: true, 40225 phase: 'read', 40226 fn: popperOffsets, 40227 data: {} 40228}); 40229;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/modifiers/computeStyles.js 40230 40231 40232 40233 40234 40235 40236 40237 // eslint-disable-next-line import/no-unused-modules 40238 40239var unsetSides = { 40240 top: 'auto', 40241 right: 'auto', 40242 bottom: 'auto', 40243 left: 'auto' 40244}; // Round the offsets to the nearest suitable subpixel based on the DPR. 40245// Zooming can change the DPR, but it seems to report a value that will 40246// cleanly divide the values into the appropriate subpixels. 40247 40248function roundOffsetsByDPR(_ref, win) { 40249 var x = _ref.x, 40250 y = _ref.y; 40251 var dpr = win.devicePixelRatio || 1; 40252 return { 40253 x: math_round(x * dpr) / dpr || 0, 40254 y: math_round(y * dpr) / dpr || 0 40255 }; 40256} 40257 40258function mapToStyles(_ref2) { 40259 var _Object$assign2; 40260 40261 var popper = _ref2.popper, 40262 popperRect = _ref2.popperRect, 40263 placement = _ref2.placement, 40264 variation = _ref2.variation, 40265 offsets = _ref2.offsets, 40266 position = _ref2.position, 40267 gpuAcceleration = _ref2.gpuAcceleration, 40268 adaptive = _ref2.adaptive, 40269 roundOffsets = _ref2.roundOffsets, 40270 isFixed = _ref2.isFixed; 40271 var _offsets$x = offsets.x, 40272 x = _offsets$x === void 0 ? 0 : _offsets$x, 40273 _offsets$y = offsets.y, 40274 y = _offsets$y === void 0 ? 0 : _offsets$y; 40275 40276 var _ref3 = typeof roundOffsets === 'function' ? roundOffsets({ 40277 x: x, 40278 y: y 40279 }) : { 40280 x: x, 40281 y: y 40282 }; 40283 40284 x = _ref3.x; 40285 y = _ref3.y; 40286 var hasX = offsets.hasOwnProperty('x'); 40287 var hasY = offsets.hasOwnProperty('y'); 40288 var sideX = left; 40289 var sideY = enums_top; 40290 var win = window; 40291 40292 if (adaptive) { 40293 var offsetParent = getOffsetParent_getOffsetParent(popper); 40294 var heightProp = 'clientHeight'; 40295 var widthProp = 'clientWidth'; 40296 40297 if (offsetParent === getWindow_getWindow(popper)) { 40298 offsetParent = getDocumentElement_getDocumentElement(popper); 40299 40300 if (getComputedStyle_getComputedStyle(offsetParent).position !== 'static' && position === 'absolute') { 40301 heightProp = 'scrollHeight'; 40302 widthProp = 'scrollWidth'; 40303 } 40304 } // $FlowFixMe[incompatible-cast]: force type refinement, we compare offsetParent with window above, but Flow doesn't detect it 40305 40306 40307 offsetParent = offsetParent; 40308 40309 if (placement === enums_top || (placement === left || placement === right) && variation === end) { 40310 sideY = bottom; 40311 var offsetY = isFixed && offsetParent === win && win.visualViewport ? win.visualViewport.height : // $FlowFixMe[prop-missing] 40312 offsetParent[heightProp]; 40313 y -= offsetY - popperRect.height; 40314 y *= gpuAcceleration ? 1 : -1; 40315 } 40316 40317 if (placement === left || (placement === enums_top || placement === bottom) && variation === end) { 40318 sideX = right; 40319 var offsetX = isFixed && offsetParent === win && win.visualViewport ? win.visualViewport.width : // $FlowFixMe[prop-missing] 40320 offsetParent[widthProp]; 40321 x -= offsetX - popperRect.width; 40322 x *= gpuAcceleration ? 1 : -1; 40323 } 40324 } 40325 40326 var commonStyles = Object.assign({ 40327 position: position 40328 }, adaptive && unsetSides); 40329 40330 var _ref4 = roundOffsets === true ? roundOffsetsByDPR({ 40331 x: x, 40332 y: y 40333 }, getWindow_getWindow(popper)) : { 40334 x: x, 40335 y: y 40336 }; 40337 40338 x = _ref4.x; 40339 y = _ref4.y; 40340 40341 if (gpuAcceleration) { 40342 var _Object$assign; 40343 40344 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)); 40345 } 40346 40347 return Object.assign({}, commonStyles, (_Object$assign2 = {}, _Object$assign2[sideY] = hasY ? y + "px" : '', _Object$assign2[sideX] = hasX ? x + "px" : '', _Object$assign2.transform = '', _Object$assign2)); 40348} 40349 40350function computeStyles(_ref5) { 40351 var state = _ref5.state, 40352 options = _ref5.options; 40353 var _options$gpuAccelerat = options.gpuAcceleration, 40354 gpuAcceleration = _options$gpuAccelerat === void 0 ? true : _options$gpuAccelerat, 40355 _options$adaptive = options.adaptive, 40356 adaptive = _options$adaptive === void 0 ? true : _options$adaptive, 40357 _options$roundOffsets = options.roundOffsets, 40358 roundOffsets = _options$roundOffsets === void 0 ? true : _options$roundOffsets; 40359 40360 if (false) { var transitionProperty; } 40361 40362 var commonStyles = { 40363 placement: getBasePlacement(state.placement), 40364 variation: getVariation(state.placement), 40365 popper: state.elements.popper, 40366 popperRect: state.rects.popper, 40367 gpuAcceleration: gpuAcceleration, 40368 isFixed: state.options.strategy === 'fixed' 40369 }; 40370 40371 if (state.modifiersData.popperOffsets != null) { 40372 state.styles.popper = Object.assign({}, state.styles.popper, mapToStyles(Object.assign({}, commonStyles, { 40373 offsets: state.modifiersData.popperOffsets, 40374 position: state.options.strategy, 40375 adaptive: adaptive, 40376 roundOffsets: roundOffsets 40377 }))); 40378 } 40379 40380 if (state.modifiersData.arrow != null) { 40381 state.styles.arrow = Object.assign({}, state.styles.arrow, mapToStyles(Object.assign({}, commonStyles, { 40382 offsets: state.modifiersData.arrow, 40383 position: 'absolute', 40384 adaptive: false, 40385 roundOffsets: roundOffsets 40386 }))); 40387 } 40388 40389 state.attributes.popper = Object.assign({}, state.attributes.popper, { 40390 'data-popper-placement': state.placement 40391 }); 40392} // eslint-disable-next-line import/no-unused-modules 40393 40394 40395/* harmony default export */ const modifiers_computeStyles = ({ 40396 name: 'computeStyles', 40397 enabled: true, 40398 phase: 'beforeWrite', 40399 fn: computeStyles, 40400 data: {} 40401}); 40402;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/modifiers/applyStyles.js 40403 40404 // This modifier takes the styles prepared by the `computeStyles` modifier 40405// and applies them to the HTMLElements such as popper and arrow 40406 40407function applyStyles(_ref) { 40408 var state = _ref.state; 40409 Object.keys(state.elements).forEach(function (name) { 40410 var style = state.styles[name] || {}; 40411 var attributes = state.attributes[name] || {}; 40412 var element = state.elements[name]; // arrow is optional + virtual elements 40413 40414 if (!instanceOf_isHTMLElement(element) || !getNodeName_getNodeName(element)) { 40415 return; 40416 } // Flow doesn't support to extend this property, but it's the most 40417 // effective way to apply styles to an HTMLElement 40418 // $FlowFixMe[cannot-write] 40419 40420 40421 Object.assign(element.style, style); 40422 Object.keys(attributes).forEach(function (name) { 40423 var value = attributes[name]; 40424 40425 if (value === false) { 40426 element.removeAttribute(name); 40427 } else { 40428 element.setAttribute(name, value === true ? '' : value); 40429 } 40430 }); 40431 }); 40432} 40433 40434function applyStyles_effect(_ref2) { 40435 var state = _ref2.state; 40436 var initialStyles = { 40437 popper: { 40438 position: state.options.strategy, 40439 left: '0', 40440 top: '0', 40441 margin: '0' 40442 }, 40443 arrow: { 40444 position: 'absolute' 40445 }, 40446 reference: {} 40447 }; 40448 Object.assign(state.elements.popper.style, initialStyles.popper); 40449 state.styles = initialStyles; 40450 40451 if (state.elements.arrow) { 40452 Object.assign(state.elements.arrow.style, initialStyles.arrow); 40453 } 40454 40455 return function () { 40456 Object.keys(state.elements).forEach(function (name) { 40457 var element = state.elements[name]; 40458 var attributes = state.attributes[name] || {}; 40459 var styleProperties = Object.keys(state.styles.hasOwnProperty(name) ? state.styles[name] : initialStyles[name]); // Set all values to an empty string to unset them 40460 40461 var style = styleProperties.reduce(function (style, property) { 40462 style[property] = ''; 40463 return style; 40464 }, {}); // arrow is optional + virtual elements 40465 40466 if (!instanceOf_isHTMLElement(element) || !getNodeName_getNodeName(element)) { 40467 return; 40468 } 40469 40470 Object.assign(element.style, style); 40471 Object.keys(attributes).forEach(function (attribute) { 40472 element.removeAttribute(attribute); 40473 }); 40474 }); 40475 }; 40476} // eslint-disable-next-line import/no-unused-modules 40477 40478 40479/* harmony default export */ const modifiers_applyStyles = ({ 40480 name: 'applyStyles', 40481 enabled: true, 40482 phase: 'write', 40483 fn: applyStyles, 40484 effect: applyStyles_effect, 40485 requires: ['computeStyles'] 40486}); 40487;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/modifiers/offset.js 40488 40489 // eslint-disable-next-line import/no-unused-modules 40490 40491function distanceAndSkiddingToXY(placement, rects, offset) { 40492 var basePlacement = getBasePlacement(placement); 40493 var invertDistance = [left, enums_top].indexOf(basePlacement) >= 0 ? -1 : 1; 40494 40495 var _ref = typeof offset === 'function' ? offset(Object.assign({}, rects, { 40496 placement: placement 40497 })) : offset, 40498 skidding = _ref[0], 40499 distance = _ref[1]; 40500 40501 skidding = skidding || 0; 40502 distance = (distance || 0) * invertDistance; 40503 return [left, right].indexOf(basePlacement) >= 0 ? { 40504 x: distance, 40505 y: skidding 40506 } : { 40507 x: skidding, 40508 y: distance 40509 }; 40510} 40511 40512function offset_offset(_ref2) { 40513 var state = _ref2.state, 40514 options = _ref2.options, 40515 name = _ref2.name; 40516 var _options$offset = options.offset, 40517 offset = _options$offset === void 0 ? [0, 0] : _options$offset; 40518 var data = enums_placements.reduce(function (acc, placement) { 40519 acc[placement] = distanceAndSkiddingToXY(placement, state.rects, offset); 40520 return acc; 40521 }, {}); 40522 var _data$state$placement = data[state.placement], 40523 x = _data$state$placement.x, 40524 y = _data$state$placement.y; 40525 40526 if (state.modifiersData.popperOffsets != null) { 40527 state.modifiersData.popperOffsets.x += x; 40528 state.modifiersData.popperOffsets.y += y; 40529 } 40530 40531 state.modifiersData[name] = data; 40532} // eslint-disable-next-line import/no-unused-modules 40533 40534 40535/* harmony default export */ const modifiers_offset = ({ 40536 name: 'offset', 40537 enabled: true, 40538 phase: 'main', 40539 requires: ['popperOffsets'], 40540 fn: offset_offset 40541}); 40542;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/utils/getOppositePlacement.js 40543var getOppositePlacement_hash = { 40544 left: 'right', 40545 right: 'left', 40546 bottom: 'top', 40547 top: 'bottom' 40548}; 40549function getOppositePlacement_getOppositePlacement(placement) { 40550 return placement.replace(/left|right|bottom|top/g, function (matched) { 40551 return getOppositePlacement_hash[matched]; 40552 }); 40553} 40554;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/utils/getOppositeVariationPlacement.js 40555var getOppositeVariationPlacement_hash = { 40556 start: 'end', 40557 end: 'start' 40558}; 40559function getOppositeVariationPlacement(placement) { 40560 return placement.replace(/start|end/g, function (matched) { 40561 return getOppositeVariationPlacement_hash[matched]; 40562 }); 40563} 40564;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getViewportRect.js 40565 40566 40567 40568 40569function getViewportRect_getViewportRect(element, strategy) { 40570 var win = getWindow_getWindow(element); 40571 var html = getDocumentElement_getDocumentElement(element); 40572 var visualViewport = win.visualViewport; 40573 var width = html.clientWidth; 40574 var height = html.clientHeight; 40575 var x = 0; 40576 var y = 0; 40577 40578 if (visualViewport) { 40579 width = visualViewport.width; 40580 height = visualViewport.height; 40581 var layoutViewport = isLayoutViewport(); 40582 40583 if (layoutViewport || !layoutViewport && strategy === 'fixed') { 40584 x = visualViewport.offsetLeft; 40585 y = visualViewport.offsetTop; 40586 } 40587 } 40588 40589 return { 40590 width: width, 40591 height: height, 40592 x: x + getWindowScrollBarX_getWindowScrollBarX(element), 40593 y: y 40594 }; 40595} 40596;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getDocumentRect.js 40597 40598 40599 40600 40601 // Gets the entire size of the scrollable document area, even extending outside 40602// of the `<html>` and `<body>` rect bounds if horizontally scrollable 40603 40604function getDocumentRect_getDocumentRect(element) { 40605 var _element$ownerDocumen; 40606 40607 var html = getDocumentElement_getDocumentElement(element); 40608 var winScroll = getWindowScroll(element); 40609 var body = (_element$ownerDocumen = element.ownerDocument) == null ? void 0 : _element$ownerDocumen.body; 40610 var width = math_max(html.scrollWidth, html.clientWidth, body ? body.scrollWidth : 0, body ? body.clientWidth : 0); 40611 var height = math_max(html.scrollHeight, html.clientHeight, body ? body.scrollHeight : 0, body ? body.clientHeight : 0); 40612 var x = -winScroll.scrollLeft + getWindowScrollBarX_getWindowScrollBarX(element); 40613 var y = -winScroll.scrollTop; 40614 40615 if (getComputedStyle_getComputedStyle(body || html).direction === 'rtl') { 40616 x += math_max(html.clientWidth, body ? body.clientWidth : 0) - width; 40617 } 40618 40619 return { 40620 width: width, 40621 height: height, 40622 x: x, 40623 y: y 40624 }; 40625} 40626;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/contains.js 40627 40628function contains_contains(parent, child) { 40629 var rootNode = child.getRootNode && child.getRootNode(); // First, attempt with faster native method 40630 40631 if (parent.contains(child)) { 40632 return true; 40633 } // then fallback to custom implementation with Shadow DOM support 40634 else if (rootNode && instanceOf_isShadowRoot(rootNode)) { 40635 var next = child; 40636 40637 do { 40638 if (next && parent.isSameNode(next)) { 40639 return true; 40640 } // $FlowFixMe[prop-missing]: need a better way to handle this... 40641 40642 40643 next = next.parentNode || next.host; 40644 } while (next); 40645 } // Give up, the result is false 40646 40647 40648 return false; 40649} 40650;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/utils/rectToClientRect.js 40651function rectToClientRect_rectToClientRect(rect) { 40652 return Object.assign({}, rect, { 40653 left: rect.x, 40654 top: rect.y, 40655 right: rect.x + rect.width, 40656 bottom: rect.y + rect.height 40657 }); 40658} 40659;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/dom-utils/getClippingRect.js 40660 40661 40662 40663 40664 40665 40666 40667 40668 40669 40670 40671 40672 40673 40674 40675function getClippingRect_getInnerBoundingClientRect(element, strategy) { 40676 var rect = getBoundingClientRect_getBoundingClientRect(element, false, strategy === 'fixed'); 40677 rect.top = rect.top + element.clientTop; 40678 rect.left = rect.left + element.clientLeft; 40679 rect.bottom = rect.top + element.clientHeight; 40680 rect.right = rect.left + element.clientWidth; 40681 rect.width = element.clientWidth; 40682 rect.height = element.clientHeight; 40683 rect.x = rect.left; 40684 rect.y = rect.top; 40685 return rect; 40686} 40687 40688function getClientRectFromMixedType(element, clippingParent, strategy) { 40689 return clippingParent === viewport ? rectToClientRect_rectToClientRect(getViewportRect_getViewportRect(element, strategy)) : instanceOf_isElement(clippingParent) ? getClippingRect_getInnerBoundingClientRect(clippingParent, strategy) : rectToClientRect_rectToClientRect(getDocumentRect_getDocumentRect(getDocumentElement_getDocumentElement(element))); 40690} // A "clipping parent" is an overflowable container with the characteristic of 40691// clipping (or hiding) overflowing elements with a position different from 40692// `initial` 40693 40694 40695function getClippingParents(element) { 40696 var clippingParents = listScrollParents(getParentNode_getParentNode(element)); 40697 var canEscapeClipping = ['absolute', 'fixed'].indexOf(getComputedStyle_getComputedStyle(element).position) >= 0; 40698 var clipperElement = canEscapeClipping && instanceOf_isHTMLElement(element) ? getOffsetParent_getOffsetParent(element) : element; 40699 40700 if (!instanceOf_isElement(clipperElement)) { 40701 return []; 40702 } // $FlowFixMe[incompatible-return]: https://github.com/facebook/flow/issues/1414 40703 40704 40705 return clippingParents.filter(function (clippingParent) { 40706 return instanceOf_isElement(clippingParent) && contains_contains(clippingParent, clipperElement) && getNodeName_getNodeName(clippingParent) !== 'body'; 40707 }); 40708} // Gets the maximum area that the element is visible in due to any number of 40709// clipping parents 40710 40711 40712function getClippingRect_getClippingRect(element, boundary, rootBoundary, strategy) { 40713 var mainClippingParents = boundary === 'clippingParents' ? getClippingParents(element) : [].concat(boundary); 40714 var clippingParents = [].concat(mainClippingParents, [rootBoundary]); 40715 var firstClippingParent = clippingParents[0]; 40716 var clippingRect = clippingParents.reduce(function (accRect, clippingParent) { 40717 var rect = getClientRectFromMixedType(element, clippingParent, strategy); 40718 accRect.top = math_max(rect.top, accRect.top); 40719 accRect.right = math_min(rect.right, accRect.right); 40720 accRect.bottom = math_min(rect.bottom, accRect.bottom); 40721 accRect.left = math_max(rect.left, accRect.left); 40722 return accRect; 40723 }, getClientRectFromMixedType(element, firstClippingParent, strategy)); 40724 clippingRect.width = clippingRect.right - clippingRect.left; 40725 clippingRect.height = clippingRect.bottom - clippingRect.top; 40726 clippingRect.x = clippingRect.left; 40727 clippingRect.y = clippingRect.top; 40728 return clippingRect; 40729} 40730;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/utils/getFreshSideObject.js 40731function getFreshSideObject() { 40732 return { 40733 top: 0, 40734 right: 0, 40735 bottom: 0, 40736 left: 0 40737 }; 40738} 40739;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/utils/mergePaddingObject.js 40740 40741function mergePaddingObject(paddingObject) { 40742 return Object.assign({}, getFreshSideObject(), paddingObject); 40743} 40744;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/utils/expandToHashMap.js 40745function expandToHashMap(value, keys) { 40746 return keys.reduce(function (hashMap, key) { 40747 hashMap[key] = value; 40748 return hashMap; 40749 }, {}); 40750} 40751;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/utils/detectOverflow.js 40752 40753 40754 40755 40756 40757 40758 40759 40760 // eslint-disable-next-line import/no-unused-modules 40761 40762function detectOverflow_detectOverflow(state, options) { 40763 if (options === void 0) { 40764 options = {}; 40765 } 40766 40767 var _options = options, 40768 _options$placement = _options.placement, 40769 placement = _options$placement === void 0 ? state.placement : _options$placement, 40770 _options$strategy = _options.strategy, 40771 strategy = _options$strategy === void 0 ? state.strategy : _options$strategy, 40772 _options$boundary = _options.boundary, 40773 boundary = _options$boundary === void 0 ? clippingParents : _options$boundary, 40774 _options$rootBoundary = _options.rootBoundary, 40775 rootBoundary = _options$rootBoundary === void 0 ? viewport : _options$rootBoundary, 40776 _options$elementConte = _options.elementContext, 40777 elementContext = _options$elementConte === void 0 ? popper : _options$elementConte, 40778 _options$altBoundary = _options.altBoundary, 40779 altBoundary = _options$altBoundary === void 0 ? false : _options$altBoundary, 40780 _options$padding = _options.padding, 40781 padding = _options$padding === void 0 ? 0 : _options$padding; 40782 var paddingObject = mergePaddingObject(typeof padding !== 'number' ? padding : expandToHashMap(padding, basePlacements)); 40783 var altContext = elementContext === popper ? reference : popper; 40784 var popperRect = state.rects.popper; 40785 var element = state.elements[altBoundary ? altContext : elementContext]; 40786 var clippingClientRect = getClippingRect_getClippingRect(instanceOf_isElement(element) ? element : element.contextElement || getDocumentElement_getDocumentElement(state.elements.popper), boundary, rootBoundary, strategy); 40787 var referenceClientRect = getBoundingClientRect_getBoundingClientRect(state.elements.reference); 40788 var popperOffsets = computeOffsets({ 40789 reference: referenceClientRect, 40790 element: popperRect, 40791 strategy: 'absolute', 40792 placement: placement 40793 }); 40794 var popperClientRect = rectToClientRect_rectToClientRect(Object.assign({}, popperRect, popperOffsets)); 40795 var elementClientRect = elementContext === popper ? popperClientRect : referenceClientRect; // positive = overflowing the clipping rect 40796 // 0 or negative = within the clipping rect 40797 40798 var overflowOffsets = { 40799 top: clippingClientRect.top - elementClientRect.top + paddingObject.top, 40800 bottom: elementClientRect.bottom - clippingClientRect.bottom + paddingObject.bottom, 40801 left: clippingClientRect.left - elementClientRect.left + paddingObject.left, 40802 right: elementClientRect.right - clippingClientRect.right + paddingObject.right 40803 }; 40804 var offsetData = state.modifiersData.offset; // Offsets can be applied only to the popper element 40805 40806 if (elementContext === popper && offsetData) { 40807 var offset = offsetData[placement];
vendor: 4,456 bytes, lines 40808-40929
40808 Object.keys(overflowOffsets).forEach(function (key) { 40809 var multiply = [right, bottom].indexOf(key) >= 0 ? 1 : -1; 40810 var axis = [enums_top, bottom].indexOf(key) >= 0 ? 'y' : 'x'; 40811 overflowOffsets[key] += offset[axis] * multiply; 40812 }); 40813 } 40814 40815 return overflowOffsets; 40816} 40817;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/utils/computeAutoPlacement.js 40818 40819 40820 40821 40822function computeAutoPlacement(state, options) { 40823 if (options === void 0) { 40824 options = {}; 40825 } 40826 40827 var _options = options, 40828 placement = _options.placement, 40829 boundary = _options.boundary, 40830 rootBoundary = _options.rootBoundary, 40831 padding = _options.padding, 40832 flipVariations = _options.flipVariations, 40833 _options$allowedAutoP = _options.allowedAutoPlacements, 40834 allowedAutoPlacements = _options$allowedAutoP === void 0 ? enums_placements : _options$allowedAutoP; 40835 var variation = getVariation(placement); 40836 var placements = variation ? flipVariations ? variationPlacements : variationPlacements.filter(function (placement) { 40837 return getVariation(placement) === variation; 40838 }) : basePlacements; 40839 var allowedPlacements = placements.filter(function (placement) { 40840 return allowedAutoPlacements.indexOf(placement) >= 0; 40841 }); 40842 40843 if (allowedPlacements.length === 0) { 40844 allowedPlacements = placements; 40845 40846 if (false) {} 40847 } // $FlowFixMe[incompatible-type]: Flow seems to have problems with two array unions... 40848 40849 40850 var overflows = allowedPlacements.reduce(function (acc, placement) { 40851 acc[placement] = detectOverflow_detectOverflow(state, { 40852 placement: placement, 40853 boundary: boundary, 40854 rootBoundary: rootBoundary, 40855 padding: padding 40856 })[getBasePlacement(placement)]; 40857 return acc; 40858 }, {}); 40859 return Object.keys(overflows).sort(function (a, b) { 40860 return overflows[a] - overflows[b]; 40861 }); 40862} 40863;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/modifiers/flip.js 40864 40865 40866 40867 40868 40869 40870 // eslint-disable-next-line import/no-unused-modules 40871 40872function getExpandedFallbackPlacements(placement) { 40873 if (getBasePlacement(placement) === enums_auto) { 40874 return []; 40875 } 40876 40877 var oppositePlacement = getOppositePlacement_getOppositePlacement(placement); 40878 return [getOppositeVariationPlacement(placement), oppositePlacement, getOppositeVariationPlacement(oppositePlacement)]; 40879} 40880 40881function flip(_ref) { 40882 var state = _ref.state, 40883 options = _ref.options, 40884 name = _ref.name; 40885 40886 if (state.modifiersData[name]._skip) { 40887 return; 40888 } 40889 40890 var _options$mainAxis = options.mainAxis, 40891 checkMainAxis = _options$mainAxis === void 0 ? true : _options$mainAxis, 40892 _options$altAxis = options.altAxis, 40893 checkAltAxis = _options$altAxis === void 0 ? true : _options$altAxis, 40894 specifiedFallbackPlacements = options.fallbackPlacements, 40895 padding = options.padding, 40896 boundary = options.boundary, 40897 rootBoundary = options.rootBoundary, 40898 altBoundary = options.altBoundary, 40899 _options$flipVariatio = options.flipVariations, 40900 flipVariations = _options$flipVariatio === void 0 ? true : _options$flipVariatio, 40901 allowedAutoPlacements = options.allowedAutoPlacements; 40902 var preferredPlacement = state.options.placement; 40903 var basePlacement = getBasePlacement(preferredPlacement); 40904 var isBasePlacement = basePlacement === preferredPlacement; 40905 var fallbackPlacements = specifiedFallbackPlacements || (isBasePlacement || !flipVariations ? [getOppositePlacement_getOppositePlacement(preferredPlacement)] : getExpandedFallbackPlacements(preferredPlacement)); 40906 var placements = [preferredPlacement].concat(fallbackPlacements).reduce(function (acc, placement) { 40907 return acc.concat(getBasePlacement(placement) === enums_auto ? computeAutoPlacement(state, { 40908 placement: placement, 40909 boundary: boundary, 40910 rootBoundary: rootBoundary, 40911 padding: padding, 40912 flipVariations: flipVariations, 40913 allowedAutoPlacements: allowedAutoPlacements 40914 }) : placement); 40915 }, []); 40916 var referenceRect = state.rects.reference; 40917 var popperRect = state.rects.popper; 40918 var checksMap = new Map(); 40919 var makeFallbackChecks = true; 40920 var firstFittingPlacement = placements[0]; 40921 40922 for (var i = 0; i < placements.length; i++) { 40923 var placement = placements[i]; 40924 40925 var _basePlacement = getBasePlacement(placement); 40926 40927 var isStartVariation = getVariation(placement) === start; 40928 var isVertical = [enums_top, bottom].indexOf(_basePlacement) >= 0; 40929 var len = isVertical ? 'width' : 'height';
vendor: 9,567 bytes, lines 40930-41202
40930 var overflow = detectOverflow_detectOverflow(state, { 40931 placement: placement, 40932 boundary: boundary, 40933 rootBoundary: rootBoundary, 40934 altBoundary: altBoundary, 40935 padding: padding 40936 }); 40937 var mainVariationSide = isVertical ? isStartVariation ? right : left : isStartVariation ? bottom : enums_top; 40938 40939 if (referenceRect[len] > popperRect[len]) { 40940 mainVariationSide = getOppositePlacement_getOppositePlacement(mainVariationSide); 40941 } 40942 40943 var altVariationSide = getOppositePlacement_getOppositePlacement(mainVariationSide); 40944 var checks = []; 40945 40946 if (checkMainAxis) { 40947 checks.push(overflow[_basePlacement] <= 0); 40948 } 40949 40950 if (checkAltAxis) { 40951 checks.push(overflow[mainVariationSide] <= 0, overflow[altVariationSide] <= 0); 40952 } 40953 40954 if (checks.every(function (check) { 40955 return check; 40956 })) { 40957 firstFittingPlacement = placement; 40958 makeFallbackChecks = false; 40959 break; 40960 } 40961 40962 checksMap.set(placement, checks); 40963 } 40964 40965 if (makeFallbackChecks) { 40966 // `2` may be desired in some cases â research later 40967 var numberOfChecks = flipVariations ? 3 : 1; 40968 40969 var _loop = function _loop(_i) { 40970 var fittingPlacement = placements.find(function (placement) { 40971 var checks = checksMap.get(placement); 40972 40973 if (checks) { 40974 return checks.slice(0, _i).every(function (check) { 40975 return check; 40976 }); 40977 } 40978 }); 40979 40980 if (fittingPlacement) { 40981 firstFittingPlacement = fittingPlacement; 40982 return "break"; 40983 } 40984 }; 40985 40986 for (var _i = numberOfChecks; _i > 0; _i--) { 40987 var _ret = _loop(_i); 40988 40989 if (_ret === "break") break; 40990 } 40991 } 40992 40993 if (state.placement !== firstFittingPlacement) { 40994 state.modifiersData[name]._skip = true; 40995 state.placement = firstFittingPlacement; 40996 state.reset = true; 40997 } 40998} // eslint-disable-next-line import/no-unused-modules 40999 41000 41001/* harmony default export */ const modifiers_flip = ({ 41002 name: 'flip', 41003 enabled: true, 41004 phase: 'main', 41005 fn: flip, 41006 requiresIfExists: ['offset'], 41007 data: { 41008 _skip: false 41009 } 41010}); 41011;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/utils/getAltAxis.js 41012function getAltAxis(axis) { 41013 return axis === 'x' ? 'y' : 'x'; 41014} 41015;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/utils/within.js 41016 41017function within(min, value, max) { 41018 return math_max(min, math_min(value, max)); 41019} 41020function withinMaxClamp(min, value, max) { 41021 var v = within(min, value, max); 41022 return v > max ? max : v; 41023} 41024;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/modifiers/preventOverflow.js 41025 41026 41027 41028 41029 41030 41031 41032 41033 41034 41035 41036 41037function preventOverflow(_ref) { 41038 var state = _ref.state, 41039 options = _ref.options, 41040 name = _ref.name; 41041 var _options$mainAxis = options.mainAxis, 41042 checkMainAxis = _options$mainAxis === void 0 ? true : _options$mainAxis, 41043 _options$altAxis = options.altAxis, 41044 checkAltAxis = _options$altAxis === void 0 ? false : _options$altAxis, 41045 boundary = options.boundary, 41046 rootBoundary = options.rootBoundary, 41047 altBoundary = options.altBoundary, 41048 padding = options.padding, 41049 _options$tether = options.tether, 41050 tether = _options$tether === void 0 ? true : _options$tether, 41051 _options$tetherOffset = options.tetherOffset, 41052 tetherOffset = _options$tetherOffset === void 0 ? 0 : _options$tetherOffset; 41053 var overflow = detectOverflow_detectOverflow(state, { 41054 boundary: boundary, 41055 rootBoundary: rootBoundary, 41056 padding: padding, 41057 altBoundary: altBoundary 41058 }); 41059 var basePlacement = getBasePlacement(state.placement); 41060 var variation = getVariation(state.placement); 41061 var isBasePlacement = !variation; 41062 var mainAxis = getMainAxisFromPlacement(basePlacement); 41063 var altAxis = getAltAxis(mainAxis); 41064 var popperOffsets = state.modifiersData.popperOffsets; 41065 var referenceRect = state.rects.reference; 41066 var popperRect = state.rects.popper; 41067 var tetherOffsetValue = typeof tetherOffset === 'function' ? tetherOffset(Object.assign({}, state.rects, { 41068 placement: state.placement 41069 })) : tetherOffset; 41070 var normalizedTetherOffsetValue = typeof tetherOffsetValue === 'number' ? { 41071 mainAxis: tetherOffsetValue, 41072 altAxis: tetherOffsetValue 41073 } : Object.assign({ 41074 mainAxis: 0, 41075 altAxis: 0 41076 }, tetherOffsetValue); 41077 var offsetModifierState = state.modifiersData.offset ? state.modifiersData.offset[state.placement] : null; 41078 var data = { 41079 x: 0, 41080 y: 0 41081 }; 41082 41083 if (!popperOffsets) { 41084 return; 41085 } 41086 41087 if (checkMainAxis) { 41088 var _offsetModifierState$; 41089 41090 var mainSide = mainAxis === 'y' ? enums_top : left; 41091 var altSide = mainAxis === 'y' ? bottom : right; 41092 var len = mainAxis === 'y' ? 'height' : 'width'; 41093 var offset = popperOffsets[mainAxis]; 41094 var min = offset + overflow[mainSide]; 41095 var max = offset - overflow[altSide]; 41096 var additive = tether ? -popperRect[len] / 2 : 0; 41097 var minLen = variation === start ? referenceRect[len] : popperRect[len]; 41098 var maxLen = variation === start ? -popperRect[len] : -referenceRect[len]; // We need to include the arrow in the calculation so the arrow doesn't go 41099 // outside the reference bounds 41100 41101 var arrowElement = state.elements.arrow; 41102 var arrowRect = tether && arrowElement ? getLayoutRect(arrowElement) : { 41103 width: 0, 41104 height: 0 41105 }; 41106 var arrowPaddingObject = state.modifiersData['arrow#persistent'] ? state.modifiersData['arrow#persistent'].padding : getFreshSideObject(); 41107 var arrowPaddingMin = arrowPaddingObject[mainSide]; 41108 var arrowPaddingMax = arrowPaddingObject[altSide]; // If the reference length is smaller than the arrow length, we don't want 41109 // to include its full size in the calculation. If the reference is small 41110 // and near the edge of a boundary, the popper can overflow even if the 41111 // reference is not overflowing as well (e.g. virtual elements with no 41112 // width or height) 41113 41114 var arrowLen = within(0, referenceRect[len], arrowRect[len]); 41115 var minOffset = isBasePlacement ? referenceRect[len] / 2 - additive - arrowLen - arrowPaddingMin - normalizedTetherOffsetValue.mainAxis : minLen - arrowLen - arrowPaddingMin - normalizedTetherOffsetValue.mainAxis; 41116 var maxOffset = isBasePlacement ? -referenceRect[len] / 2 + additive + arrowLen + arrowPaddingMax + normalizedTetherOffsetValue.mainAxis : maxLen + arrowLen + arrowPaddingMax + normalizedTetherOffsetValue.mainAxis; 41117 var arrowOffsetParent = state.elements.arrow && getOffsetParent_getOffsetParent(state.elements.arrow); 41118 var clientOffset = arrowOffsetParent ? mainAxis === 'y' ? arrowOffsetParent.clientTop || 0 : arrowOffsetParent.clientLeft || 0 : 0; 41119 var offsetModifierValue = (_offsetModifierState$ = offsetModifierState == null ? void 0 : offsetModifierState[mainAxis]) != null ? _offsetModifierState$ : 0; 41120 var tetherMin = offset + minOffset - offsetModifierValue - clientOffset; 41121 var tetherMax = offset + maxOffset - offsetModifierValue; 41122 var preventedOffset = within(tether ? math_min(min, tetherMin) : min, offset, tether ? math_max(max, tetherMax) : max); 41123 popperOffsets[mainAxis] = preventedOffset; 41124 data[mainAxis] = preventedOffset - offset; 41125 } 41126 41127 if (checkAltAxis) { 41128 var _offsetModifierState$2; 41129 41130 var _mainSide = mainAxis === 'x' ? enums_top : left; 41131 41132 var _altSide = mainAxis === 'x' ? bottom : right; 41133 41134 var _offset = popperOffsets[altAxis]; 41135 41136 var _len = altAxis === 'y' ? 'height' : 'width'; 41137 41138 var _min = _offset + overflow[_mainSide]; 41139 41140 var _max = _offset - overflow[_altSide]; 41141 41142 var isOriginSide = [enums_top, left].indexOf(basePlacement) !== -1; 41143 41144 var _offsetModifierValue = (_offsetModifierState$2 = offsetModifierState == null ? void 0 : offsetModifierState[altAxis]) != null ? _offsetModifierState$2 : 0; 41145 41146 var _tetherMin = isOriginSide ? _min : _offset - referenceRect[_len] - popperRect[_len] - _offsetModifierValue + normalizedTetherOffsetValue.altAxis; 41147 41148 var _tetherMax = isOriginSide ? _offset + referenceRect[_len] + popperRect[_len] - _offsetModifierValue - normalizedTetherOffsetValue.altAxis : _max; 41149 41150 var _preventedOffset = tether && isOriginSide ? withinMaxClamp(_tetherMin, _offset, _tetherMax) : within(tether ? _tetherMin : _min, _offset, tether ? _tetherMax : _max); 41151 41152 popperOffsets[altAxis] = _preventedOffset; 41153 data[altAxis] = _preventedOffset - _offset; 41154 } 41155 41156 state.modifiersData[name] = data; 41157} // eslint-disable-next-line import/no-unused-modules 41158 41159 41160/* harmony default export */ const modifiers_preventOverflow = ({ 41161 name: 'preventOverflow', 41162 enabled: true, 41163 phase: 'main', 41164 fn: preventOverflow, 41165 requiresIfExists: ['offset'] 41166}); 41167;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/modifiers/arrow.js 41168 41169 41170 41171 41172 41173 41174 41175 41176 41177 // eslint-disable-next-line import/no-unused-modules 41178 41179var toPaddingObject = function toPaddingObject(padding, state) { 41180 padding = typeof padding === 'function' ? padding(Object.assign({}, state.rects, { 41181 placement: state.placement 41182 })) : padding; 41183 return mergePaddingObject(typeof padding !== 'number' ? padding : expandToHashMap(padding, basePlacements)); 41184}; 41185 41186function arrow_arrow(_ref) { 41187 var _state$modifiersData$; 41188 41189 var state = _ref.state, 41190 name = _ref.name, 41191 options = _ref.options; 41192 var arrowElement = state.elements.arrow; 41193 var popperOffsets = state.modifiersData.popperOffsets; 41194 var basePlacement = getBasePlacement(state.placement); 41195 var axis = getMainAxisFromPlacement(basePlacement); 41196 var isVertical = [left, right].indexOf(basePlacement) >= 0; 41197 var len = isVertical ? 'height' : 'width'; 41198 41199 if (!arrowElement || !popperOffsets) { 41200 return; 41201 } 41202
vendor: 4,915 bytes, lines 41203-41357
41203 var paddingObject = toPaddingObject(options.padding, state); 41204 var arrowRect = getLayoutRect(arrowElement); 41205 var minProp = axis === 'y' ? enums_top : left; 41206 var maxProp = axis === 'y' ? bottom : right; 41207 var endDiff = state.rects.reference[len] + state.rects.reference[axis] - popperOffsets[axis] - state.rects.popper[len]; 41208 var startDiff = popperOffsets[axis] - state.rects.reference[axis]; 41209 var arrowOffsetParent = getOffsetParent_getOffsetParent(arrowElement); 41210 var clientSize = arrowOffsetParent ? axis === 'y' ? arrowOffsetParent.clientHeight || 0 : arrowOffsetParent.clientWidth || 0 : 0; 41211 var centerToReference = endDiff / 2 - startDiff / 2; // Make sure the arrow doesn't overflow the popper if the center point is 41212 // outside of the popper bounds 41213 41214 var min = paddingObject[minProp]; 41215 var max = clientSize - arrowRect[len] - paddingObject[maxProp]; 41216 var center = clientSize / 2 - arrowRect[len] / 2 + centerToReference; 41217 var offset = within(min, center, max); // Prevents breaking syntax highlighting... 41218 41219 var axisProp = axis; 41220 state.modifiersData[name] = (_state$modifiersData$ = {}, _state$modifiersData$[axisProp] = offset, _state$modifiersData$.centerOffset = offset - center, _state$modifiersData$); 41221} 41222 41223function arrow_effect(_ref2) { 41224 var state = _ref2.state, 41225 options = _ref2.options; 41226 var _options$element = options.element, 41227 arrowElement = _options$element === void 0 ? '[data-popper-arrow]' : _options$element; 41228 41229 if (arrowElement == null) { 41230 return; 41231 } // CSS selector 41232 41233 41234 if (typeof arrowElement === 'string') { 41235 arrowElement = state.elements.popper.querySelector(arrowElement); 41236 41237 if (!arrowElement) { 41238 return; 41239 } 41240 } 41241 41242 if (false) {} 41243 41244 if (!contains_contains(state.elements.popper, arrowElement)) { 41245 if (false) {} 41246 41247 return; 41248 } 41249 41250 state.elements.arrow = arrowElement; 41251} // eslint-disable-next-line import/no-unused-modules 41252 41253 41254/* harmony default export */ const modifiers_arrow = ({ 41255 name: 'arrow', 41256 enabled: true, 41257 phase: 'main', 41258 fn: arrow_arrow, 41259 effect: arrow_effect, 41260 requires: ['popperOffsets'], 41261 requiresIfExists: ['preventOverflow'] 41262}); 41263;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/modifiers/hide.js 41264 41265 41266 41267function hide_getSideOffsets(overflow, rect, preventedOffsets) { 41268 if (preventedOffsets === void 0) { 41269 preventedOffsets = { 41270 x: 0, 41271 y: 0 41272 }; 41273 } 41274 41275 return { 41276 top: overflow.top - rect.height - preventedOffsets.y, 41277 right: overflow.right - rect.width + preventedOffsets.x, 41278 bottom: overflow.bottom - rect.height + preventedOffsets.y, 41279 left: overflow.left - rect.width - preventedOffsets.x 41280 }; 41281} 41282 41283function hide_isAnySideFullyClipped(overflow) { 41284 return [enums_top, right, bottom, left].some(function (side) { 41285 return overflow[side] >= 0; 41286 }); 41287} 41288 41289function hide_hide(_ref) { 41290 var state = _ref.state, 41291 name = _ref.name; 41292 var referenceRect = state.rects.reference; 41293 var popperRect = state.rects.popper; 41294 var preventedOffsets = state.modifiersData.preventOverflow; 41295 var referenceOverflow = detectOverflow_detectOverflow(state, { 41296 elementContext: 'reference' 41297 }); 41298 var popperAltOverflow = detectOverflow_detectOverflow(state, { 41299 altBoundary: true 41300 }); 41301 var referenceClippingOffsets = hide_getSideOffsets(referenceOverflow, referenceRect); 41302 var popperEscapeOffsets = hide_getSideOffsets(popperAltOverflow, popperRect, preventedOffsets); 41303 var isReferenceHidden = hide_isAnySideFullyClipped(referenceClippingOffsets); 41304 var hasPopperEscaped = hide_isAnySideFullyClipped(popperEscapeOffsets); 41305 state.modifiersData[name] = { 41306 referenceClippingOffsets: referenceClippingOffsets, 41307 popperEscapeOffsets: popperEscapeOffsets, 41308 isReferenceHidden: isReferenceHidden, 41309 hasPopperEscaped: hasPopperEscaped 41310 }; 41311 state.attributes.popper = Object.assign({}, state.attributes.popper, { 41312 'data-popper-reference-hidden': isReferenceHidden, 41313 'data-popper-escaped': hasPopperEscaped 41314 }); 41315} // eslint-disable-next-line import/no-unused-modules 41316 41317 41318/* harmony default export */ const modifiers_hide = ({ 41319 name: 'hide', 41320 enabled: true, 41321 phase: 'main', 41322 requiresIfExists: ['preventOverflow'], 41323 fn: hide_hide 41324}); 41325;// CONCATENATED MODULE: ./node_modules/@popperjs/core/lib/popper.js 41326 41327 41328 41329 41330 41331 41332 41333 41334 41335 41336var defaultModifiers = [eventListeners, modifiers_popperOffsets, modifiers_computeStyles, modifiers_applyStyles, modifiers_offset, modifiers_flip, modifiers_preventOverflow, modifiers_arrow, modifiers_hide]; 41337var popper_createPopper = /*#__PURE__*/popperGenerator({ 41338 defaultModifiers: defaultModifiers 41339}); // eslint-disable-next-line import/no-unused-modules 41340 41341 // eslint-disable-next-line import/no-unused-modules 41342 41343 // eslint-disable-next-line import/no-unused-modules 41344 41345 41346;// CONCATENATED MODULE: ./node_modules/reakit/es/Disclosure/DisclosureState.js 41347 41348 41349 41350 41351 41352 41353 41354 41355function useLastValue(value) { 41356 var lastValue = (0,external_React_.useRef)(null); 41357 useIsomorphicEffect(function () {
41358 lastValue.current = value; 41359 }, [value]); 41360 return lastValue; 41361} 41362 41363function useDisclosureState(initialState) { 41364 if (initialState === void 0) { 41365 initialState = {}; 41366 } 41367 41368 var _useSealedState = useSealedState(initialState), 41369 _useSealedState$visib = _useSealedState.visible, 41370 initialVisible = _useSealedState$visib === void 0 ? false : _useSealedState$visib, 41371 _useSealedState$anima = _useSealedState.animated, 41372 initialAnimated = _useSealedState$anima === void 0 ? false : _useSealedState$anima, 41373 sealed = _rollupPluginBabelHelpers_1f0bf8c2_objectWithoutPropertiesLoose(_useSealedState, ["visible", "animated"]); 41374 41375 var id = unstable_useIdState(sealed); 41376 41377 var _React$useState = (0,external_React_.useState)(initialVisible), 41378 visible = _React$useState[0], 41379 setVisible = _React$useState[1]; 41380 41381 var _React$useState2 = (0,external_React_.useState)(initialAnimated), 41382 animated = _React$useState2[0], 41383 setAnimated = _React$useState2[1]; 41384 41385 var _React$useState3 = (0,external_React_.useState)(false), 41386 animating = _React$useState3[0], 41387 setAnimating = _React$useState3[1]; 41388 41389 var lastVisible = useLastValue(visible); 41390 var visibleHasChanged = lastVisible.current != null && lastVisible.current !== visible; 41391 41392 if (animated && !animating && visibleHasChanged) { 41393 // Sets animating to true when when visible is updated 41394 setAnimating(true); 41395 } 41396 41397 (0,external_React_.useEffect)(function () { 41398 if (typeof animated === "number" && animating) { 41399 var timeout = setTimeout(function () { 41400 return setAnimating(false); 41401 }, animated); 41402 return function () { 41403 clearTimeout(timeout); 41404 }; 41405 } 41406 41407 if (animated && animating && "production" === "development") { var _timeout; } 41408 41409 return function () {}; 41410 }, [animated, animating]); 41411 var show = (0,external_React_.useCallback)(function () { 41412 return setVisible(true); 41413 }, []); 41414 var hide = (0,external_React_.useCallback)(function () { 41415 return setVisible(false); 41416 }, []); 41417 var toggle = (0,external_React_.useCallback)(function () { 41418 return setVisible(function (v) { 41419 return !v; 41420 }); 41421 }, []); 41422 var stopAnimation = (0,external_React_.useCallback)(function () { 41423 return setAnimating(false); 41424 }, []); 41425 return _objectSpread2(_objectSpread2({}, id), {}, { 41426 visible: visible, 41427 animated: animated, 41428 animating: animating, 41429 show: show, 41430 hide: hide, 41431 toggle: toggle, 41432 setVisible: setVisible, 41433 setAnimated: setAnimated, 41434 stopAnimation: stopAnimation 41435 }); 41436} 41437 41438 41439 41440;// CONCATENATED MODULE: ./node_modules/reakit/es/Dialog/DialogState.js 41441 41442 41443 41444 41445 41446 41447 41448 41449 41450function useDialogState(initialState) { 41451 if (initialState === void 0) { 41452 initialState = {}; 41453 } 41454 41455 var _useSealedState = useSealedState(initialState), 41456 _useSealedState$modal = _useSealedState.modal, 41457 initialModal = _useSealedState$modal === void 0 ? true : _useSealedState$modal, 41458 sealed = _rollupPluginBabelHelpers_1f0bf8c2_objectWithoutPropertiesLoose(_useSealedState, ["modal"]); 41459 41460 var disclosure = useDisclosureState(sealed); 41461 41462 var _React$useState = (0,external_React_.useState)(initialModal), 41463 modal = _React$useState[0], 41464 setModal = _React$useState[1]; 41465 41466 var disclosureRef = (0,external_React_.useRef)(null); 41467 return _objectSpread2(_objectSpread2({}, disclosure), {}, { 41468 modal: modal, 41469 setModal: setModal, 41470 unstable_disclosureRef: disclosureRef 41471 }); 41472} 41473 41474 41475 41476;// CONCATENATED MODULE: ./node_modules/reakit/es/Popover/PopoverState.js 41477 41478 41479 41480 41481 41482 41483 41484 41485 41486 41487 41488 41489 41490var PopoverState_isSafari = isUA("Mac") && !isUA("Chrome") && isUA("Safari"); 41491 41492function PopoverState_applyStyles(styles) { 41493 return function (prevStyles) { 41494 if (styles && !shallowEqual(prevStyles, styles)) { 41495 return styles; 41496 } 41497 41498 return prevStyles; 41499 }; 41500} 41501 41502function usePopoverState(initialState) { 41503 if (initialState === void 0) { 41504 initialState = {}; 41505 } 41506 41507 var _useSealedState = useSealedState(initialState), 41508 _useSealedState$gutte = _useSealedState.gutter, 41509 gutter = _useSealedState$gutte === void 0 ? 12 : _useSealedState$gutte, 41510 _useSealedState$place = _useSealedState.placement, 41511 sealedPlacement = _useSealedState$place === void 0 ? "bottom" : _useSealedState$place, 41512 _useSealedState$unsta = _useSealedState.unstable_flip, 41513 flip = _useSealedState$unsta === void 0 ? true : _useSealedState$unsta, 41514 sealedOffset = _useSealedState.unstable_offset, 41515 _useSealedState$unsta2 = _useSealedState.unstable_preventOverflow, 41516 preventOverflow = _useSealedState$unsta2 === void 0 ? true : _useSealedState$unsta2, 41517 _useSealedState$unsta3 = _useSealedState.unstable_fixed, 41518 fixed = _useSealedState$unsta3 === void 0 ? false : _useSealedState$unsta3, 41519 _useSealedState$modal = _useSealedState.modal, 41520 modal = _useSealedState$modal === void 0 ? false : _useSealedState$modal, 41521 sealed = _rollupPluginBabelHelpers_1f0bf8c2_objectWithoutPropertiesLoose(_useSealedState, ["gutter", "placement", "unstable_flip", "unstable_offset", "unstable_preventOverflow", "unstable_fixed", "modal"]); 41522 41523 var popper = (0,external_React_.useRef)(null); 41524 var referenceRef = (0,external_React_.useRef)(null); 41525 var popoverRef = (0,external_React_.useRef)(null); 41526 var arrowRef = (0,external_React_.useRef)(null); 41527 41528 var _React$useState = (0,external_React_.useState)(sealedPlacement), 41529 originalPlacement = _React$useState[0], 41530 place = _React$useState[1]; 41531 41532 var _React$useState2 = (0,external_React_.useState)(sealedPlacement), 41533 placement = _React$useState2[0], 41534 setPlacement = _React$useState2[1]; 41535 41536 var _React$useState3 = (0,external_React_.useState)(sealedOffset || [0, gutter]), 41537 offset = _React$useState3[0]; 41538 41539 var _React$useState4 = (0,external_React_.useState)({ 41540 position: "fixed", 41541 left: "100%", 41542 top: "100%" 41543 }), 41544 popoverStyles = _React$useState4[0], 41545 setPopoverStyles = _React$useState4[1]; 41546 41547 var _React$useState5 = (0,external_React_.useState)({}), 41548 arrowStyles = _React$useState5[0], 41549 setArrowStyles = _React$useState5[1]; 41550
41551 var dialog = useDialogState(_objectSpread2({ 41552 modal: modal 41553 }, sealed)); 41554 var update = (0,external_React_.useCallback)(function () { 41555 if (popper.current) { 41556 popper.current.forceUpdate(); 41557 return true; 41558 } 41559 41560 return false; 41561 }, []); 41562 var updateState = (0,external_React_.useCallback)(function (state) { 41563 if (state.placement) { 41564 setPlacement(state.placement); 41565 } 41566 41567 if (state.styles) { 41568 setPopoverStyles(PopoverState_applyStyles(state.styles.popper)); 41569 41570 if (arrowRef.current) { 41571 setArrowStyles(PopoverState_applyStyles(state.styles.arrow)); 41572 } 41573 } 41574 }, []); 41575 useIsomorphicEffect(function () { 41576 if (referenceRef.current && popoverRef.current) { 41577 popper.current = popper_createPopper(referenceRef.current, popoverRef.current, { 41578 // https://popper.js.org/docs/v2/constructors/#options 41579 placement: originalPlacement, 41580 strategy: fixed ? "fixed" : "absolute", 41581 // Safari needs styles to be applied in the first render, otherwise 41582 // hovering over the popover when it gets visible for the first time 41583 // will change its dimensions unexpectedly. 41584 onFirstUpdate: PopoverState_isSafari ? updateState : undefined, 41585 modifiers: [{ 41586 // https://popper.js.org/docs/v2/modifiers/event-listeners/ 41587 name: "eventListeners", 41588 enabled: dialog.visible 41589 }, { 41590 // https://popper.js.org/docs/v2/modifiers/apply-styles/ 41591 name: "applyStyles", 41592 enabled: false 41593 }, { 41594 // https://popper.js.org/docs/v2/modifiers/flip/ 41595 name: "flip", 41596 enabled: flip, 41597 options: { 41598 padding: 8 41599 } 41600 }, { 41601 // https://popper.js.org/docs/v2/modifiers/offset/ 41602 name: "offset", 41603 options: { 41604 offset: offset 41605 } 41606 }, { 41607 // https://popper.js.org/docs/v2/modifiers/prevent-overflow/ 41608 name: "preventOverflow", 41609 enabled: preventOverflow, 41610 options: { 41611 tetherOffset: function tetherOffset() { 41612 var _arrowRef$current; 41613 41614 return ((_arrowRef$current = arrowRef.current) === null || _arrowRef$current === void 0 ? void 0 : _arrowRef$current.clientWidth) || 0; 41615 } 41616 } 41617 }, { 41618 // https://popper.js.org/docs/v2/modifiers/arrow/ 41619 name: "arrow", 41620 enabled: !!arrowRef.current, 41621 options: { 41622 element: arrowRef.current 41623 } 41624 }, { 41625 // https://popper.js.org/docs/v2/modifiers/#custom-modifiers 41626 name: "updateState", 41627 phase: "write", 41628 requires: ["computeStyles"], 41629 enabled: dialog.visible && "production" !== "test", 41630 fn: function fn(_ref) { 41631 var state = _ref.state; 41632 return updateState(state); 41633 } 41634 }] 41635 }); 41636 } 41637 41638 return function () { 41639 if (popper.current) { 41640 popper.current.destroy(); 41641 popper.current = null; 41642 } 41643 }; 41644 }, [originalPlacement, fixed, dialog.visible, flip, offset, preventOverflow]); // Ensure that the popover will be correctly positioned with an additional 41645 // update. 41646 41647 (0,external_React_.useEffect)(function () { 41648 if (!dialog.visible) return undefined; 41649 var id = window.requestAnimationFrame(function () { 41650 var _popper$current; 41651 41652 (_popper$current = popper.current) === null || _popper$current === void 0 ? void 0 : _popper$current.forceUpdate(); 41653 }); 41654 return function () { 41655 window.cancelAnimationFrame(id); 41656 }; 41657 }, [dialog.visible]); 41658 return _objectSpread2(_objectSpread2({}, dialog), {}, { 41659 unstable_referenceRef: referenceRef, 41660 unstable_popoverRef: popoverRef, 41661 unstable_arrowRef: arrowRef, 41662 unstable_popoverStyles: popoverStyles, 41663 unstable_arrowStyles: arrowStyles, 41664 unstable_update: update, 41665 unstable_originalPlacement: originalPlacement, 41666 placement: placement, 41667 place: place 41668 }); 41669} 41670 41671 41672 41673;// CONCATENATED MODULE: ./node_modules/reakit/es/__globalState-300469f0.js 41674var globalState = { 41675 currentTooltipId: null, 41676 listeners: new Set(), 41677 subscribe: function subscribe(listener) { 41678 var _this = this; 41679 41680 this.listeners.add(listener); 41681 return function () { 41682 _this.listeners.delete(listener); 41683 }; 41684 }, 41685 show: function show(id) { 41686 this.currentTooltipId = id;
41687 this.listeners.forEach(function (listener) { 41688 return listener(id); 41689 }); 41690 }, 41691 hide: function hide(id) { 41692 if (this.currentTooltipId === id) { 41693 this.currentTooltipId = null; 41694 this.listeners.forEach(function (listener) { 41695 return listener(null); 41696 }); 41697 } 41698 } 41699}; 41700 41701 41702 41703;// CONCATENATED MODULE: ./node_modules/reakit/es/Tooltip/TooltipState.js 41704 41705 41706 41707 41708 41709 41710 41711 41712 41713 41714 41715 41716 41717 41718 41719function useTooltipState(initialState) { 41720 if (initialState === void 0) { 41721 initialState = {}; 41722 } 41723 41724 var _useSealedState = useSealedState(initialState), 41725 _useSealedState$place = _useSealedState.placement, 41726 placement = _useSealedState$place === void 0 ? "top" : _useSealedState$place, 41727 _useSealedState$unsta = _useSealedState.unstable_timeout, 41728 initialTimeout = _useSealedState$unsta === void 0 ? 0 : _useSealedState$unsta, 41729 sealed = _rollupPluginBabelHelpers_1f0bf8c2_objectWithoutPropertiesLoose(_useSealedState, ["placement", "unstable_timeout"]); 41730 41731 var _React$useState = (0,external_React_.useState)(initialTimeout), 41732 timeout = _React$useState[0], 41733 setTimeout = _React$useState[1]; 41734 41735 var showTimeout = (0,external_React_.useRef)(null); 41736 var hideTimeout = (0,external_React_.useRef)(null); 41737 41738 var _usePopoverState = usePopoverState(_objectSpread2(_objectSpread2({}, sealed), {}, { 41739 placement: placement 41740 })), 41741 modal = _usePopoverState.modal, 41742 setModal = _usePopoverState.setModal, 41743 popover = _rollupPluginBabelHelpers_1f0bf8c2_objectWithoutPropertiesLoose(_usePopoverState, ["modal", "setModal"]); 41744 41745 var clearTimeouts = (0,external_React_.useCallback)(function () { 41746 if (showTimeout.current !== null) { 41747 window.clearTimeout(showTimeout.current); 41748 } 41749 41750 if (hideTimeout.current !== null) { 41751 window.clearTimeout(hideTimeout.current); 41752 } 41753 }, []); 41754 var hide = (0,external_React_.useCallback)(function () { 41755 clearTimeouts(); 41756 popover.hide(); // Let's give some time so people can move from a reference to another 41757 // and still show tooltips immediately 41758 41759 hideTimeout.current = window.setTimeout(function () { 41760 globalState.hide(popover.baseId); 41761 }, timeout); 41762 }, [clearTimeouts, popover.hide, timeout, popover.baseId]); 41763 var show = (0,external_React_.useCallback)(function () { 41764 clearTimeouts(); 41765 41766 if (!timeout || globalState.currentTooltipId) { 41767 // If there's no timeout or a tooltip visible already, we can show this 41768 // immediately 41769 globalState.show(popover.baseId); 41770 popover.show(); 41771 } else { 41772 // There may be a reference with focus whose tooltip is still not visible 41773 // In this case, we want to update it before it gets shown. 41774 globalState.show(null); // Otherwise, wait a little bit to show the tooltip 41775 41776 showTimeout.current = window.setTimeout(function () { 41777 globalState.show(popover.baseId); 41778 popover.show(); 41779 }, timeout); 41780 } 41781 }, [clearTimeouts, timeout, popover.show, popover.baseId]); 41782 (0,external_React_.useEffect)(function () { 41783 return globalState.subscribe(function (id) { 41784 if (id !== popover.baseId) { 41785 clearTimeouts(); 41786 41787 if (popover.visible) { 41788 // Make sure there will be only one tooltip visible 41789 popover.hide(); 41790 } 41791 } 41792 }); 41793 }, [popover.baseId, clearTimeouts, popover.visible, popover.hide]); 41794 (0,external_React_.useEffect)(function () { 41795 return function () { 41796 clearTimeouts(); 41797 globalState.hide(popover.baseId); 41798 }; 41799 }, [clearTimeouts, popover.baseId]); 41800 return _objectSpread2(_objectSpread2({}, popover), {}, { 41801 hide: hide, 41802 show: show, 41803 unstable_timeout: timeout, 41804 unstable_setTimeout: setTimeout 41805 }); 41806} 41807 41808 41809 41810;// CONCATENATED MODULE: ./node_modules/reakit/es/__keys-d101cb3b.js 41811// Automatically generated 41812var 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"]; 41813var TOOLTIP_KEYS = [].concat(TOOLTIP_STATE_KEYS, ["unstable_portal"]); 41814var TOOLTIP_ARROW_KEYS = TOOLTIP_STATE_KEYS; 41815var TOOLTIP_REFERENCE_KEYS = TOOLTIP_ARROW_KEYS; 41816 41817 41818 41819;// CONCATENATED MODULE: ./node_modules/reakit/es/Tooltip/TooltipReference.js 41820 41821 41822 41823 41824 41825 41826 41827 41828 41829 41830var useTooltipReference = createHook({ 41831 name: "TooltipReference", 41832 compose: useRole, 41833 keys: TOOLTIP_REFERENCE_KEYS, 41834 useProps: function useProps(options, _ref) { 41835 var htmlRef = _ref.ref, 41836 htmlOnFocus = _ref.onFocus, 41837 htmlOnBlur = _ref.onBlur, 41838 htmlOnMouseEnter = _ref.onMouseEnter, 41839 htmlOnMouseLeave = _ref.onMouseLeave, 41840 htmlProps = _rollupPluginBabelHelpers_1f0bf8c2_objectWithoutPropertiesLoose(_ref, ["ref", "onFocus", "onBlur", "onMouseEnter", "onMouseLeave"]); 41841 41842 var onFocusRef = useLiveRef(htmlOnFocus); 41843 var onBlurRef = useLiveRef(htmlOnBlur); 41844 var onMouseEnterRef = useLiveRef(htmlOnMouseEnter); 41845 var onMouseLeaveRef = useLiveRef(htmlOnMouseLeave); 41846 var onFocus = (0,external_React_.useCallback)(function (event) { 41847 var _onFocusRef$current, _options$show; 41848
41849 (_onFocusRef$current = onFocusRef.current) === null || _onFocusRef$current === void 0 ? void 0 : _onFocusRef$current.call(onFocusRef, event); 41850 if (event.defaultPrevented) return; 41851 (_options$show = options.show) === null || _options$show === void 0 ? void 0 : _options$show.call(options); 41852 }, [options.show]); 41853 var onBlur = (0,external_React_.useCallback)(function (event) { 41854 var _onBlurRef$current, _options$hide; 41855 41856 (_onBlurRef$current = onBlurRef.current) === null || _onBlurRef$current === void 0 ? void 0 : _onBlurRef$current.call(onBlurRef, event); 41857 if (event.defaultPrevented) return; 41858 (_options$hide = options.hide) === null || _options$hide === void 0 ? void 0 : _options$hide.call(options); 41859 }, [options.hide]); 41860 var onMouseEnter = (0,external_React_.useCallback)(function (event) { 41861 var _onMouseEnterRef$curr, _options$show2; 41862 41863 (_onMouseEnterRef$curr = onMouseEnterRef.current) === null || _onMouseEnterRef$curr === void 0 ? void 0 : _onMouseEnterRef$curr.call(onMouseEnterRef, event); 41864 if (event.defaultPrevented) return; 41865 (_options$show2 = options.show) === null || _options$show2 === void 0 ? void 0 : _options$show2.call(options); 41866 }, [options.show]); 41867 var onMouseLeave = (0,external_React_.useCallback)(function (event) { 41868 var _onMouseLeaveRef$curr, _options$hide2; 41869 41870 (_onMouseLeaveRef$curr = onMouseLeaveRef.current) === null || _onMouseLeaveRef$curr === void 0 ? void 0 : _onMouseLeaveRef$curr.call(onMouseLeaveRef, event); 41871 if (event.defaultPrevented) return; 41872 (_options$hide2 = options.hide) === null || _options$hide2 === void 0 ? void 0 : _options$hide2.call(options); 41873 }, [options.hide]); 41874 return _objectSpread2({ 41875 ref: useForkRef(options.unstable_referenceRef, htmlRef), 41876 tabIndex: 0, 41877 onFocus: onFocus, 41878 onBlur: onBlur, 41879 onMouseEnter: onMouseEnter, 41880 onMouseLeave: onMouseLeave, 41881 "aria-describedby": options.baseId 41882 }, htmlProps); 41883 } 41884}); 41885var TooltipReference = createComponent({ 41886 as: "div", 41887 useHook: useTooltipReference 41888}); 41889 41890 41891 41892;// CONCATENATED MODULE: ./packages/components/build-module/ui/tooltip/context.js 41893/** 41894 * WordPress dependencies 41895 */ 41896 41897 41898/** 41899 * @type {import('react').Context<{ tooltip?: import('reakit').TooltipState }>} 41900 */ 41901const context_TooltipContext = (0,external_wp_element_namespaceObject.createContext)({}); 41902const useTooltipContext = () => (0,external_wp_element_namespaceObject.useContext)(context_TooltipContext); 41903 41904;// CONCATENATED MODULE: ./node_modules/reakit/es/__keys-e6a5cfbe.js 41905// Automatically generated 41906var DISCLOSURE_STATE_KEYS = ["baseId", "unstable_idCountRef", "visible", "animated", "animating", "setBaseId", "show", "hide", "toggle", "setVisible", "setAnimated", "stopAnimation"]; 41907var DISCLOSURE_KEYS = DISCLOSURE_STATE_KEYS; 41908var DISCLOSURE_CONTENT_KEYS = DISCLOSURE_KEYS; 41909 41910 41911 41912;// CONCATENATED MODULE: ./node_modules/reakit/es/Disclosure/DisclosureContent.js 41913 41914 41915 41916 41917 41918 41919 41920 41921 41922 41923var DisclosureContent_useDisclosureContent = createHook({ 41924 name: "DisclosureContent", 41925 compose: useRole, 41926 keys: DISCLOSURE_CONTENT_KEYS, 41927 useProps: function useProps(options, _ref) { 41928 var htmlOnTransitionEnd = _ref.onTransitionEnd, 41929 htmlOnAnimationEnd = _ref.onAnimationEnd, 41930 htmlStyle = _ref.style, 41931 htmlProps = _rollupPluginBabelHelpers_1f0bf8c2_objectWithoutPropertiesLoose(_ref, ["onTransitionEnd", "onAnimationEnd", "style"]); 41932 41933 var animating = options.animated && options.animating; 41934 41935 var _React$useState = (0,external_React_.useState)(null), 41936 transition = _React$useState[0], 41937 setTransition = _React$useState[1]; 41938 41939 var hidden = !options.visible && !animating; 41940 var style = hidden ? _objectSpread2({ 41941 display: "none" 41942 }, htmlStyle) : htmlStyle; 41943 var onTransitionEndRef = useLiveRef(htmlOnTransitionEnd); 41944 var onAnimationEndRef = useLiveRef(htmlOnAnimationEnd); 41945 var raf = (0,external_React_.useRef)(0); 41946 (0,external_React_.useEffect)(function () { 41947 if (!options.animated) return undefined; // Double RAF is needed so the browser has enough time to paint the 41948 // default styles before processing the `data-enter` attribute. Otherwise 41949 // it wouldn't be considered a transition. 41950 // See https://github.com/reakit/reakit/issues/643 41951 41952 raf.current = window.requestAnimationFrame(function () { 41953 raf.current = window.requestAnimationFrame(function () { 41954 if (options.visible) { 41955 setTransition("enter"); 41956 } else if (animating) { 41957 setTransition("leave"); 41958 } else { 41959 setTransition(null); 41960 } 41961 }); 41962 }); 41963 return function () { 41964 return window.cancelAnimationFrame(raf.current); 41965 }; 41966 }, [options.animated, options.visible, animating]); 41967 var onEnd = (0,external_React_.useCallback)(function (event) { 41968 if (!isSelfTarget(event)) return; 41969 if (!animating) return; // Ignores number animated 41970 41971 if (options.animated === true) { 41972 var _options$stopAnimatio; 41973 41974 (_options$stopAnimatio = options.stopAnimation) === null || _options$stopAnimatio === void 0 ? void 0 : _options$stopAnimatio.call(options); 41975 } 41976 }, [options.animated, animating, options.stopAnimation]); 41977 var onTransitionEnd = (0,external_React_.useCallback)(function (event) { 41978 var _onTransitionEndRef$c; 41979 41980 (_onTransitionEndRef$c = onTransitionEndRef.current) === null || _onTransitionEndRef$c === void 0 ? void 0 : _onTransitionEndRef$c.call(onTransitionEndRef, event); 41981 onEnd(event); 41982 }, [onEnd]); 41983 var onAnimationEnd = (0,external_React_.useCallback)(function (event) { 41984 var _onAnimationEndRef$cu; 41985 41986 (_onAnimationEndRef$cu = onAnimationEndRef.current) === null || _onAnimationEndRef$cu === void 0 ? void 0 : _onAnimationEndRef$cu.call(onAnimationEndRef, event); 41987 onEnd(event); 41988 }, [onEnd]);
41989 return _objectSpread2({ 41990 id: options.baseId, 41991 "data-enter": transition === "enter" ? "" : undefined, 41992 "data-leave": transition === "leave" ? "" : undefined, 41993 onTransitionEnd: onTransitionEnd, 41994 onAnimationEnd: onAnimationEnd, 41995 hidden: hidden, 41996 style: style 41997 }, htmlProps); 41998 } 41999}); 42000var DisclosureContent_DisclosureContent = createComponent({ 42001 as: "div", 42002 useHook: DisclosureContent_useDisclosureContent 42003}); 42004 42005 42006 42007;// CONCATENATED MODULE: ./node_modules/reakit/es/Portal/Portal.js 42008 42009 42010 42011 42012 42013function getBodyElement() { 42014 return canUseDOM ? document.body : null; 42015} 42016 42017var Portal_PortalContext = /*#__PURE__*/(0,external_React_.createContext)(getBodyElement()); 42018function Portal_Portal(_ref) { 42019 var children = _ref.children; 42020 // if it's a nested portal, context is the parent portal 42021 // otherwise it's document.body 42022 // https://github.com/reakit/reakit/issues/513 42023 var context = (0,external_React_.useContext)(Portal_PortalContext) || getBodyElement(); 42024 42025 var _React$useState = (0,external_React_.useState)(function () { 42026 if (canUseDOM) { 42027 var element = document.createElement("div"); 42028 element.className = Portal_Portal.__className; 42029 return element; 42030 } // ssr 42031 42032 42033 return null; 42034 }), 42035 hostNode = _React$useState[0]; 42036 42037 useIsomorphicEffect(function () { 42038 if (!hostNode || !context) return undefined; 42039 context.appendChild(hostNode); 42040 return function () { 42041 context.removeChild(hostNode); 42042 }; 42043 }, [hostNode, context]); 42044 42045 if (hostNode) { 42046 return /*#__PURE__*/(0,external_ReactDOM_namespaceObject.createPortal)( /*#__PURE__*/(0,external_React_.createElement)(Portal_PortalContext.Provider, { 42047 value: hostNode 42048 }, children), hostNode); 42049 } // ssr 42050 42051 42052 return null; 42053} 42054Portal_Portal.__className = "__reakit-portal"; 42055Portal_Portal.__selector = "." + Portal_Portal.__className; 42056 42057 42058 42059;// CONCATENATED MODULE: ./node_modules/reakit/es/Tooltip/Tooltip.js 42060 42061 42062 42063 42064 42065 42066 42067 42068 42069 42070 42071 42072 42073 42074 42075 42076 42077 42078 42079function globallyHideTooltipOnEscape(event) { 42080 if (event.defaultPrevented) return; 42081 42082 if (event.key === "Escape") { 42083 globalState.show(null); 42084 } 42085} 42086 42087var Tooltip_useTooltip = createHook({ 42088 name: "Tooltip", 42089 compose: DisclosureContent_useDisclosureContent, 42090 keys: TOOLTIP_KEYS, 42091 useOptions: function useOptions(_ref) { 42092 var _ref$unstable_portal = _ref.unstable_portal, 42093 unstable_portal = _ref$unstable_portal === void 0 ? true : _ref$unstable_portal, 42094 options = _rollupPluginBabelHelpers_1f0bf8c2_objectWithoutPropertiesLoose(_ref, ["unstable_portal"]); 42095 42096 return _objectSpread2({ 42097 unstable_portal: unstable_portal 42098 }, options); 42099 }, 42100 useProps: function useProps(options, _ref2) { 42101 var htmlRef = _ref2.ref, 42102 htmlStyle = _ref2.style, 42103 htmlWrapElement = _ref2.wrapElement, 42104 htmlProps = _rollupPluginBabelHelpers_1f0bf8c2_objectWithoutPropertiesLoose(_ref2, ["ref", "style", "wrapElement"]); 42105 42106 (0,external_React_.useEffect)(function () { 42107 var _options$unstable_pop; 42108 42109 var document = getDocument_getDocument((_options$unstable_pop = options.unstable_popoverRef) === null || _options$unstable_pop === void 0 ? void 0 : _options$unstable_pop.current); 42110 document.addEventListener("keydown", globallyHideTooltipOnEscape); 42111 }, []); 42112 var wrapElement = (0,external_React_.useCallback)(function (element) { 42113 if (options.unstable_portal) { 42114 element = /*#__PURE__*/(0,external_React_.createElement)(Portal_Portal, null, element); 42115 } 42116 42117 if (htmlWrapElement) { 42118 return htmlWrapElement(element); 42119 } 42120 42121 return element; 42122 }, [options.unstable_portal, htmlWrapElement]); 42123 return _objectSpread2({ 42124 ref: useForkRef(options.unstable_popoverRef, htmlRef), 42125 role: "tooltip", 42126 style: _objectSpread2(_objectSpread2({}, options.unstable_popoverStyles), {}, { 42127 pointerEvents: "none" 42128 }, htmlStyle), 42129 wrapElement: wrapElement 42130 }, htmlProps); 42131 } 42132}); 42133var Tooltip_Tooltip = createComponent({ 42134 as: "div", 42135 memo: true, 42136 useHook: Tooltip_useTooltip 42137}); 42138 42139 42140 42141;// CONCATENATED MODULE: ./packages/components/build-module/ui/shortcut/component.js 42142 42143/** 42144 * External dependencies 42145 */ 42146
42147/** 42148 * Internal dependencies 42149 */ 42150 42151 42152 42153function component_Shortcut(props, forwardedRef) { 42154 const { 42155 as: asProp = 'span', 42156 shortcut, 42157 className, 42158 ...otherProps 42159 } = useContextSystem(props, 'Shortcut'); 42160 if (!shortcut) { 42161 return null; 42162 } 42163 let displayText; 42164 let ariaLabel; 42165 if (typeof shortcut === 'string') { 42166 displayText = shortcut; 42167 } else { 42168 displayText = shortcut.display; 42169 ariaLabel = shortcut.ariaLabel; 42170 } 42171 return (0,external_wp_element_namespaceObject.createElement)(component, { 42172 as: asProp, 42173 className: className, 42174 "aria-label": ariaLabel, 42175 ref: forwardedRef, 42176 ...otherProps 42177 }, displayText); 42178} 42179const ConnectedShortcut = contextConnect(component_Shortcut, 'Shortcut'); 42180/* harmony default export */ const shortcut_component = (ConnectedShortcut); 42181 42182;// CONCATENATED MODULE: ./packages/components/build-module/utils/z-index.js 42183const Flyout = 10000; 42184const z_index_Tooltip = 1000002; 42185 42186;// CONCATENATED MODULE: ./packages/components/build-module/ui/tooltip/styles.js 42187 42188function 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)."; } 42189/** 42190 * External dependencies 42191 */ 42192 42193/** 42194 * Internal dependencies 42195 */ 42196 42197 42198 42199 42200 42201const 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;font-size:", config_values.fontSize, ";&[data-enter]{opacity:1;}" + ( true ? "" : 0), true ? "" : 0); 42202const TooltipPopoverView = emotion_styled_base_browser_esm("div", true ? { 42203 target: "e7tfjmw1" 42204} : 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)); 42205const noOutline = true ? { 42206 name: "12mkfdx", 42207 styles: "outline:none" 42208} : 0; 42209const TooltipShortcut = /*#__PURE__*/emotion_styled_base_browser_esm(shortcut_component, true ? { 42210 target: "e7tfjmw0" 42211} : 0)("display:inline-block;margin-left:", space(1), ";" + ( true ? "" : 0)); 42212 42213;// CONCATENATED MODULE: ./packages/components/build-module/ui/tooltip/content.js 42214 42215/** 42216 * External dependencies 42217 */ 42218// eslint-disable-next-line no-restricted-imports 42219 42220 42221/** 42222 * Internal dependencies 42223 */ 42224 42225 42226 42227 42228 42229const { 42230 TooltipPopoverView: content_TooltipPopoverView 42231} = tooltip_styles_namespaceObject; 42232 42233/** 42234 * 42235 * @param {import('../context').WordPressComponentProps<import('./types').ContentProps, 'div'>} props 42236 * @param {import('react').ForwardedRef<any>} forwardedRef 42237 */ 42238function content_TooltipContent(props, forwardedRef) { 42239 const { 42240 children, 42241 className, 42242 ...otherProps 42243 } = useContextSystem(props, 'TooltipContent'); 42244 const { 42245 tooltip 42246 } = useTooltipContext(); 42247 const cx = useCx(); 42248 const classes = cx(TooltipContent, className); 42249 return (0,external_wp_element_namespaceObject.createElement)(Tooltip_Tooltip, { 42250 as: component, 42251 ...otherProps, 42252 ...tooltip, 42253 className: classes, 42254 ref: forwardedRef 42255 }, (0,external_wp_element_namespaceObject.createElement)(content_TooltipPopoverView, null, children)); 42256} 42257/* harmony default export */ const tooltip_content = (contextConnect(content_TooltipContent, 'TooltipContent')); 42258 42259;// CONCATENATED MODULE: ./packages/components/build-module/ui/tooltip/component.js 42260 42261/** 42262 * External dependencies 42263 */ 42264// eslint-disable-next-line no-restricted-imports 42265 42266 42267/** 42268 * WordPress dependencies 42269 */ 42270 42271 42272/** 42273 * Internal dependencies 42274 */ 42275 42276 42277 42278 42279 42280/** 42281 * @param {import('../context').WordPressComponentProps<import('./types').Props, 'div'>} props 42282 * @param {import('react').ForwardedRef<any>} forwardedRef 42283 */ 42284function component_Tooltip(props, forwardedRef) { 42285 const { 42286 animated = true, 42287 animationDuration = 160, 42288 baseId, 42289 children, 42290 content, 42291 focusable = true, 42292 gutter = 4, 42293 id, 42294 modal = true, 42295 placement, 42296 visible = false, 42297 shortcut, 42298 ...otherProps 42299 } = useContextSystem(props, 'Tooltip'); 42300 const tooltip = useTooltipState({ 42301 animated: animated ? animationDuration : undefined, 42302 baseId: baseId || id, 42303 gutter, 42304 placement, 42305 visible, 42306 ...otherProps 42307 }); 42308 const contextProps = (0,external_wp_element_namespaceObject.useMemo)(() => ({ 42309 tooltip 42310 }), [tooltip]); 42311 return (0,external_wp_element_namespaceObject.createElement)(context_TooltipContext.Provider, { 42312 value: contextProps 42313 }, content && (0,external_wp_element_namespaceObject.createElement)(tooltip_content, { 42314 unstable_portal: modal, 42315 ref: forwardedRef 42316 }
42316, content, shortcut && (0,external_wp_element_namespaceObject.createElement)(TooltipShortcut, { 42317 shortcut: shortcut 42318 })), children && (0,external_wp_element_namespaceObject.createElement)(TooltipReference, { 42319 ...tooltip, 42320 ...children.props, 42321 // @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) 42322 ref: children?.ref 42323 }, referenceProps => { 42324 if (!focusable) { 42325 referenceProps.tabIndex = undefined; 42326 } 42327 return (0,external_wp_element_namespaceObject.cloneElement)(children, referenceProps); 42328 })); 42329} 42330 42331/** 42332 * `Tooltip` is a component that provides context for a user interface element. 42333 * 42334 * @example 42335 * ```jsx 42336 * import { Tooltip, Text } from `@wordpress/components/ui`; 42337 * 42338 * function Example() { 42339 * return ( 42340 * <Tooltip content="Code is Poetry"> 42341 * <Text>WordPress.org</Text> 42342 * </Tooltip> 42343 * ) 42344 * } 42345 * ``` 42346 */ 42347const ConnectedTooltip = contextConnect(component_Tooltip, 'Tooltip'); 42348/* harmony default export */ const tooltip_component = (ConnectedTooltip); 42349 42350;// CONCATENATED MODULE: ./packages/components/build-module/color-picker/color-copy-button.js 42351 42352/** 42353 * WordPress dependencies 42354 */ 42355 42356 42357 42358 42359 42360/** 42361 * Internal dependencies 42362 */ 42363 42364 42365 42366const ColorCopyButton = props => { 42367 const { 42368 color, 42369 colorType 42370 } = props; 42371 const [copiedColor, setCopiedColor] = (0,external_wp_element_namespaceObject.useState)(null); 42372 const copyTimer = (0,external_wp_element_namespaceObject.useRef)(); 42373 const copyRef = (0,external_wp_compose_namespaceObject.useCopyToClipboard)(() => { 42374 switch (colorType) { 42375 case 'hsl': 42376 { 42377 return color.toHslString(); 42378 } 42379 case 'rgb': 42380 { 42381 return color.toRgbString(); 42382 } 42383 default: 42384 case 'hex': 42385 { 42386 return color.toHex(); 42387 } 42388 } 42389 }, () => { 42390 if (copyTimer.current) { 42391 clearTimeout(copyTimer.current); 42392 } 42393 setCopiedColor(color.toHex()); 42394 copyTimer.current = setTimeout(() => { 42395 setCopiedColor(null); 42396 copyTimer.current = undefined; 42397 }, 3000); 42398 }); 42399 (0,external_wp_element_namespaceObject.useEffect)(() => { 42400 // Clear copyTimer on component unmount. 42401 return () => { 42402 if (copyTimer.current) { 42403 clearTimeout(copyTimer.current); 42404 } 42405 }; 42406 }, []); 42407 return (0,external_wp_element_namespaceObject.createElement)(tooltip_component, { 42408 content: (0,external_wp_element_namespaceObject.createElement)(text_component, { 42409 color: "white" 42410 }, copiedColor === color.toHex() ? (0,external_wp_i18n_namespaceObject.__)('Copied!') : (0,external_wp_i18n_namespaceObject.__)('Copy')), 42411 placement: "bottom" 42412 }, (0,external_wp_element_namespaceObject.createElement)(CopyButton, { 42413 isSmall: true, 42414 ref: copyRef, 42415 icon: library_copy, 42416 showTooltip: false 42417 })); 42418}; 42419 42420;// CONCATENATED MODULE: ./packages/components/build-module/color-picker/input-with-slider.js 42421 42422/** 42423 * Internal dependencies 42424 */ 42425 42426 42427 42428 42429 42430 42431const InputWithSlider = ({ 42432 min, 42433 max, 42434 label, 42435 abbreviation, 42436 onChange, 42437 value 42438}) => { 42439 const onNumberControlChange = newValue => { 42440 if (!newValue) { 42441 onChange(0); 42442 return; 42443 } 42444 if (typeof newValue === 'string') { 42445 onChange(parseInt(newValue, 10)); 42446 return; 42447 } 42448 onChange(newValue); 42449 }; 42450 return (0,external_wp_element_namespaceObject.createElement)(h_stack_component, { 42451 spacing: 4 42452 }, (0,external_wp_element_namespaceObject.createElement)(NumberControlWrapper, { 42453 min: min, 42454 max: max, 42455 label: label, 42456 hideLabelFromVision: true, 42457 value: value, 42458 onChange: onNumberControlChange, 42459 prefix: (0,external_wp_element_namespaceObject.createElement)(spacer_component, { 42460 as: text_component, 42461 paddingLeft: space(4), 42462 color: COLORS.theme.accent, 42463 lineHeight: 1 42464 }, abbreviation), 42465 spinControls: "none", 42466 size: "__unstable-large" 42467 }), (0,external_wp_element_namespaceObject.createElement)(styles_RangeControl, { 42468 __nextHasNoMarginBottom: true, 42469 label: label, 42470 hideLabelFromVision: true, 42471 min: min, 42472 max: max, 42473 value: value 42474 // @ts-expect-error 42475 // See: https://github.com/WordPress/gutenberg/pull/40535#issuecomment-1172418185 42476 , 42477 onChange: onChange, 42478 withInputField: false 42479 })); 42480}; 42481 42482;// CONCATENATED MODULE: ./packages/components/build-module/color-picker/rgb-input.js 42483 42484/** 42485 * External dependencies 42486 */ 42487 42488 42489/** 42490 * Internal dependencies 42491 */ 42492
42493const RgbInput = ({ 42494 color, 42495 onChange, 42496 enableAlpha 42497}) => { 42498 const { 42499 r, 42500 g, 42501 b, 42502 a 42503 } = color.toRgb(); 42504 return (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, (0,external_wp_element_namespaceObject.createElement)(InputWithSlider, { 42505 min: 0, 42506 max: 255, 42507 label: "Red", 42508 abbreviation: "R", 42509 value: r, 42510 onChange: nextR => onChange(w({ 42511 r: nextR, 42512 g, 42513 b, 42514 a 42515 })) 42516 }), (0,external_wp_element_namespaceObject.createElement)(InputWithSlider, { 42517 min: 0, 42518 max: 255, 42519 label: "Green", 42520 abbreviation: "G", 42521 value: g, 42522 onChange: nextG => onChange(w({ 42523 r, 42524 g: nextG, 42525 b, 42526 a 42527 })) 42528 }), (0,external_wp_element_namespaceObject.createElement)(InputWithSlider, { 42529 min: 0, 42530 max: 255, 42531 label: "Blue", 42532 abbreviation: "B", 42533 value: b, 42534 onChange: nextB => onChange(w({ 42535 r, 42536 g, 42537 b: nextB, 42538 a 42539 })) 42540 }), enableAlpha && (0,external_wp_element_namespaceObject.createElement)(InputWithSlider, { 42541 min: 0, 42542 max: 100, 42543 label: "Alpha", 42544 abbreviation: "A", 42545 value: Math.trunc(a * 100), 42546 onChange: nextA => onChange(w({ 42547 r, 42548 g, 42549 b, 42550 a: nextA / 100 42551 })) 42552 })); 42553}; 42554 42555;// CONCATENATED MODULE: ./packages/components/build-module/color-picker/hsl-input.js 42556 42557/** 42558 * External dependencies 42559 */ 42560 42561 42562/** 42563 * Internal dependencies 42564 */ 42565 42566const HslInput = ({ 42567 color, 42568 onChange, 42569 enableAlpha 42570}) => { 42571 const { 42572 h, 42573 s, 42574 l, 42575 a 42576 } = color.toHsl(); 42577 return (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, (0,external_wp_element_namespaceObject.createElement)(InputWithSlider, { 42578 min: 0, 42579 max: 359, 42580 label: "Hue", 42581 abbreviation: "H", 42582 value: h, 42583 onChange: nextH => { 42584 onChange(w({ 42585 h: nextH, 42586 s, 42587 l, 42588 a 42589 })); 42590 } 42591 }), (0,external_wp_element_namespaceObject.createElement)(InputWithSlider, { 42592 min: 0, 42593 max: 100, 42594 label: "Saturation", 42595 abbreviation: "S", 42596 value: s, 42597 onChange: nextS => { 42598 onChange(w({ 42599 h, 42600 s: nextS, 42601 l, 42602 a 42603 })); 42604 } 42605 }), (0,external_wp_element_namespaceObject.createElement)(InputWithSlider, { 42606 min: 0, 42607 max: 100, 42608 label: "Lightness", 42609 abbreviation: "L", 42610 value: l, 42611 onChange: nextL => { 42612 onChange(w({ 42613 h, 42614 s, 42615 l: nextL, 42616 a 42617 })); 42618 } 42619 }), enableAlpha && (0,external_wp_element_namespaceObject.createElement)(InputWithSlider, { 42620 min: 0, 42621 max: 100, 42622 label: "Alpha", 42623 abbreviation: "A", 42624 value: Math.trunc(100 * a), 42625 onChange: nextA => { 42626 onChange(w({ 42627 h, 42628 s, 42629 l, 42630 a: nextA / 100 42631 })); 42632 } 42633 })); 42634}; 42635 42636;// CONCATENATED MODULE: ./packages/components/build-module/color-picker/hex-input.js 42637 42638/** 42639 * External dependencies 42640 */ 42641 42642 42643/** 42644 * WordPress dependencies 42645 */ 42646 42647 42648/** 42649 * Internal dependencies 42650 */ 42651 42652 42653 42654 42655 42656const HexInput = ({ 42657 color, 42658 onChange, 42659 enableAlpha 42660}) => { 42661 const handleChange = nextValue => { 42662 if (!nextValue) return; 42663 const hexValue = nextValue.startsWith('#') ? nextValue : '#' + nextValue; 42664 onChange(w(hexValue)); 42665 }; 42666 const stateReducer = (state, action) => { 42667 const nativeEvent = action.payload?.event?.nativeEvent; 42668 if ('insertFromPaste' !== nativeEvent?.inputType) { 42669 return { 42670 ...state 42671 }; 42672 } 42673 const value = state.value?.startsWith('#') ? state.value.slice(1).toUpperCase() : state.value?.toUpperCase(); 42674 return { 42675 ...state, 42676 value 42677 }; 42678 }; 42679 return (0,external_wp_element_namespaceObject.createElement)(InputControl, { 42680 prefix: (0,external_wp_element_namespaceObject.createElement)(spacer_component, { 42681 as: text_component, 42682 marginLeft: space(4), 42683 color: COLORS.theme.accent, 42684 lineHeight: 1 42685 }, "#"), 42686 value: color.toHex().slice(1).toUpperCase(), 42687 onChange: handleChange, 42688 maxLength: enableAlpha ? 9 : 7, 42689 label: (0,external_wp_i18n_namespaceObject.__)('Hex color'), 42690 hideLabelFromVision: true, 42691 size: "__unstable-large", 42692 __unstableStateReducer: stateReducer, 42693 __unstableInputWidth: "9em" 42694 }); 42695}; 42696 42697;// CONCATENATED MODULE: ./packages/components/build-module/color-picker/color-input.js 42698 42699/** 42700 * Internal dependencies 42701 */ 42702 42703 42704 42705const ColorInput = ({ 42706 colorType, 42707 color, 42708 onChange,
42709 enableAlpha 42710}) => { 42711 const props = { 42712 color, 42713 onChange, 42714 enableAlpha 42715 }; 42716 switch (colorType) { 42717 case 'hsl': 42718 return (0,external_wp_element_namespaceObject.createElement)(HslInput, { 42719 ...props 42720 }); 42721 case 'rgb': 42722 return (0,external_wp_element_namespaceObject.createElement)(RgbInput, { 42723 ...props 42724 }); 42725 default: 42726 case 'hex': 42727 return (0,external_wp_element_namespaceObject.createElement)(HexInput, { 42728 ...props 42729 }); 42730 } 42731}; 42732 42733;// CONCATENATED MODULE: ./node_modules/react-colorful/dist/index.module.js 42734function 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 o in t)Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o])}return e}).apply(this,arguments)}function index_module_c(e,r){if(null==e)return{};var t,o,n={},a=Object.keys(e);for(o=0;o<a.length;o++)r.indexOf(t=a[o])>=0||(n[t]=e[t]);return n}function index_module_s(e){var t=(0,external_React_.useRef)(e),o=(0,external_React_.useRef)(function(e){t.current&&t.current(e)});return t.current=e,o.current}var index_module_i=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,r){var t=e.getBoundingClientRect(),o=index_module_f(r)?r.touches[0]:r;return{left:index_module_i((o.pageX-(t.left+window.pageXOffset))/t.width),top:index_module_i((o.pageY-(t.top+window.pageYOffset))/t.height)}},index_module_d=function(e){!index_module_f(e)&&e.preventDefault()},index_module_h=external_React_default().memo(function(n){var a=n.onMove,l=n.onKey,i=index_module_c(n,["onMove","onKey"]),h=(0,external_React_.useRef)(null),m=index_module_s(a),g=index_module_s(l),p=(0,external_React_.useRef)(!1),b=(0,external_React_.useMemo)(function(){var e=function(e){index_module_d(e),(index_module_f(e)?e.touches.length>0:e.buttons>0)&&h.current?m(index_module_v(h.current,e)):t(!1)},r=function(){return t(!1)};function t(t){var o=p.current,n=t?self.addEventListener:self.removeEventListener;n(o?"touchmove":"mousemove",e),n(o?"touchend":"mouseup",r)}return[function(e){var r=e.nativeEvent,o=h.current;o&&(index_module_d(r),!function(e,r){return r&&!index_module_f(e)}(r,p.current)&&o&&(p.current=index_module_f(r),o.focus(),m(index_module_v(o,r)),t(!0)))},function(e){var r=e.which||e.keyCode;r<37||r>40||(e.preventDefault(),g({left:39===r?.05:37===r?-.05:0,top:40===r?.05:38===r?-.05:0}))},t]},[g,m]),_=b[0],C=b[1],x=b[2];return (0,external_React_.useEffect)(function(){return x},[x]),external_React_default().createElement("div",index_module_u({},i,{onTouchStart:_,onMouseDown:_,className:"react-colorful__interactive",ref:h,onKeyDown:C,tabIndex:0,role:"slider"}))}),index_module_m=function(e){return e.filter(Boolean).join(" ")},index_module_g=function(r){var t=r.color,o=r.left,n=r.top,a=void 0===n?.5:n,l=index_module_m(["react-colorful__pointer",r.className]);return external_React_default().createElement("div",{className:l,style:{top:100*a+"%",left:100*o+"%"}},external_React_default().createElement("div",{className:"react-colorful__pointer-fill",style:{backgroundColor:t}}))},index_module_p=function(e,r,t){return void 0===r&&(r=0),void 0===t&&(t=Math.pow(10,r)),Math.round(t*e)/t},index_module_b={grad:.9,turn:360,rad:360/(2*Math.PI)},_=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)*(index_module_b[r]||1)},index_module_x=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_H({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_E=index_module_x,index_module_H=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_M=function(e){var r=e.s,t=e.v,o=e.a,n=(200-r)*t/100;return{h:index_module_p(e.h),s:index_module_p(n>0&&n<200?r*t/100/(n<=100?n:200-n)*100:0),l:index_module_p(n/2),a:index_module_p(o,2)}},index_module_N=function(e){var r=index_module_M(e);return"hsl("+r.h+", "+r.s+"%, "+r.l+"%)"},index_module_w=function(e){var r=index_module_M(e);return"hsla("+r.h+", "+r.s+"%, "+r.l+"%, "+r.a+")"},index_module_y=function(e){var r=e.h,t=e.s,o=e.v,n=e.a;r=r/360*6,t/=100,o/=100;
42734var a=Math.floor(r),l=o*(1-t),u=o*(1-(r-a)*t),c=o*(1-(1-r+a)*t),s=a%6;return{r:index_module_p(255*[o,u,l,l,c,o][s]),g:index_module_p(255*[c,o,o,u,l,l][s]),b:index_module_p(255*[l,l,c,o,o,u][s]),a:index_module_p(n,2)}},q=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?B({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}},index_module_k=q,index_module_O=function(e){var r=/rgba?\(?\s*(-?\d*\.?\d+)(%)?[,\s]+(-?\d*\.?\d+)(%)?[,\s]+(-?\d*\.?\d+)(%)?,?\s*[/\s]*(-?\d*\.?\d+)?(%)?\s*\)?/i.exec(e);return r?z({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_I=index_module_O,index_module_j=function(e){var r=e.toString(16);return r.length<2?"0"+r:r},z=function(e){var r=e.r,t=e.g,o=e.b,n=e.a,a=Math.max(r,t,o),l=a-Math.min(r,t,o),u=l?a===r?(t-o)/l:a===t?2+(o-r)/l:4+(r-t)/l:0;return{h:index_module_p(60*(u<0?u+6:u)),s:index_module_p(a?l/a*100:0),v:index_module_p(a/255*100),a:n}},B=function(e){return{h:index_module_p(e.h),s:index_module_p(e.s),v:index_module_p(e.v),a:index_module_p(e.a,2)}},K=external_React_default().memo(function(r){var t=r.hue,o=r.onChange,n=index_module_m(["react-colorful__hue",r.className]);return external_React_default().createElement("div",{className:n},external_React_default().createElement(index_module_h,{onMove:function(e){o({h:360*e.left})},onKey:function(e){o({h:index_module_i(t+360*e.left,0,360)})},"aria-label":"Hue","aria-valuetext":index_module_p(t)},external_React_default().createElement(index_module_g,{className:"react-colorful__hue-pointer",left:t/360,color:index_module_N({h:t,s:100,v:100,a:1})})))}),A=external_React_default().memo(function(r){var t=r.hsva,o=r.onChange,n={backgroundColor:index_module_N({h:t.h,s:100,v:100,a:1})};return external_React_default().createElement("div",{className:"react-colorful__saturation",style:n},external_React_default().createElement(index_module_h,{onMove:function(e){o({s:100*e.left,v:100-100*e.top})},onKey:function(e){o({s:index_module_i(t.s+100*e.left,0,100),v:index_module_i(t.v-100*e.top,0,100)})},"aria-label":"Color","aria-valuetext":"Saturation "+index_module_p(t.s)+"%, Brightness "+index_module_p(t.v)+"%"},external_React_default().createElement(index_module_g,{className:"react-colorful__saturation-pointer",top:1-t.v/100,left:t.s/100,color:index_module_N(t)})))}),L=function(e,r){if(e===r)return!0;for(var t in e)if(e[t]!==r[t])return!1;return!0},D=function(e,r){return e.replace(/\s/g,"")===r.replace(/\s/g,"")};function F(e,t,l){var u=index_module_s(l),c=(0,external_React_.useState)(function(){return e.toHsva(t)}),i=c[0],f=c[1],v=(0,external_React_.useRef)({color:t,hsva:i});(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;L(i,v.current.hsva)||e.equal(r=e.fromHsva(i),v.current.color)||(v.current={hsva:i,color:r},u(r))},[i,e,u]);var d=(0,external_React_.useCallback)(function(e){f(function(r){return Object.assign({},r,e)})},[]);return[i,d]}var index_module_S,P,T="undefined"!=typeof window?external_React_.useLayoutEffect:external_React_.useEffect,X=function(){return index_module_S||( true?__webpack_require__.nc:0)},Y=function(e){index_module_S=e},index_module_$=function(){T(function(){if("undefined"!=typeof document&&!P){(P=document.createElement("style")).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;
42734left: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}';var e=X();e&&P.setAttribute("nonce",e),document.head.appendChild(P)}},[])},R=function(r){var t=r.className,o=r.colorModel,n=r.color,a=void 0===n?o.defaultColor:n,l=r.onChange,s=index_module_c(r,["className","colorModel","color","onChange"]);index_module_$();var i=F(o,a,l),f=i[0],v=i[1],d=index_module_m(["react-colorful",t]);return external_React_default().createElement("div",index_module_u({},s,{className:d}),external_React_default().createElement(A,{hsva:f,onChange:v}),external_React_default().createElement(K,{hue:f.h,onChange:v,className:"react-colorful__last-control"}))},G={defaultColor:"000",toHsva:function(e){return z(_(e))},fromHsva:function(e){return t=(r=index_module_y(e)).g,o=r.b,"#"+index_module_j(r.r)+index_module_j(t)+index_module_j(o);var r,t,o},equal:function(e,r){return e.toLowerCase()===r.toLowerCase()||L(_(e),_(r))}},J=function(r){return e.createElement(R,index_module_u({},r,{colorModel:G}))},Q=function(r){var t=r.className,o=r.hsva,n=r.onChange,a={backgroundImage:"linear-gradient(90deg, "+index_module_w(Object.assign({},o,{a:0}))+", "+index_module_w(Object.assign({},o,{a:1}))+")"},l=index_module_m(["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_h,{onMove:function(e){n({a:e.left})},onKey:function(e){n({a:index_module_i(o.a+e.left)})},"aria-label":"Alpha","aria-valuetext":index_module_p(100*o.a)+"%"},external_React_default().createElement(index_module_g,{className:"react-colorful__alpha-pointer",left:o.a,color:index_module_w(o)})))},U=function(r){var t=r.className,o=r.colorModel,n=r.color,a=void 0===n?o.defaultColor:n,l=r.onChange,s=index_module_c(r,["className","colorModel","color","onChange"]);index_module_$();var i=F(o,a,l),f=i[0],v=i[1],d=index_module_m(["react-colorful",t]);return external_React_default().createElement("div",index_module_u({},s,{className:d}),external_React_default().createElement(A,{hsva:f,onChange:v}),external_React_default().createElement(K,{hue:f.h,onChange:v}),external_React_default().createElement(Q,{hsva:f,onChange:v,className:"react-colorful__last-control"}))},index_module_V={defaultColor:{h:0,s:0,l:0,a:1},toHsva:index_module_H,fromHsva:index_module_M,equal:L},W=function(r){return e.createElement(U,index_module_u({},r,{colorModel:index_module_V}))},Z={defaultColor:"hsla(0, 0%, 0%, 1)",toHsva:index_module_x,fromHsva:index_module_w,equal:D},ee=function(r){return e.createElement(U,index_module_u({},r,{colorModel:Z}))},re={defaultColor:{h:0,s:0,l:0},toHsva:function(e){return index_module_H({h:e.h,s:e.s,l:e.l,a:1})},fromHsva:function(e){return{h:(r=index_module_M(e)).h,s:r.s,l:r.l};var r},equal:L},te=function(r){return e.createElement(R,index_module_u({},r,{colorModel:re}))},oe={defaultColor:"hsl(0, 0%, 0%)",toHsva:index_module_E,fromHsva:index_module_N,equal:D},ne=function(r){return e.createElement(R,index_module_u({},r,{colorModel:oe}))},ae={defaultColor:{h:0,s:0,v:0,a:1},toHsva:function(e){return e},fromHsva:B,equal:L},le=function(r){return e.createElement(U,index_module_u({},r,{colorModel:ae}))},ue={defaultColor:"hsva(0, 0%, 0%, 1)",toHsva:q,fromHsva:function(e){var r=B(e);return"hsva("+r.h+", "+r.s+"%, "+r.v+"%, "+r.a+")"},equal:D},ce=function(r){return e.createElement(U,index_module_u({},r,{colorModel:ue}))},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=B(e);return{h:r.h,s:r.s,v:r.v}},equal:L},ie=function(r){return e.createElement(R,index_module_u({},r,{colorModel:se}))},fe={defaultColor:"hsv(0, 0%, 0%)",toHsva:index_module_k,fromHsva:function(e){var r=B(e);return"hsv("+r.h+", "+r.s+"%, "+r.v+"%)"},equal:D},ve=function(r){return e.createElement(R,index_module_u({},r,{colorModel:fe}))},de={defaultColor:{r:0,g:0,b:0,a:1},toHsva:z,fromHsva:index_module_y,equal:L},he=function(r){return e.createElement(U,index_module_u({},r,{colorModel:de}))},me={defaultColor:"rgba(0, 0, 0, 1)",toHsva:index_module_O,fromHsva:function(e){var r=index_module_y(e);return"rgba("+r.r+", "+r.g+", "+r.b+", "+r.a+")"},equal:D},ge=function(r){return external_React_default().createElement(U,index_module_u({},r,{colorModel:me}))},pe={defaultColor:{r:0,g:0,b:0},toHsva:function(e){return z({r:e.r,g:e.g,b:e.b,a:1})},fromHsva:function(e){return{r:(r=index_module_y(e)).r,g:r.g,b:r.b};var r},equal:L},be=function(r){return e.createElement(R,index_module_u({},r,{colorModel:pe}))},_e={defaultColor:"rgb(0, 0, 0)",toHsva:index_module_I,fromHsva:function(e){var r=index_module_y(e);return"rgb("+r.r+", "+r.g+", "+r.b+")"},equal:D},Ce=function(r){return external_React_default().createElement(R,index_module_u({},r,{colorModel:_e}))},xe=/^#?[0-9A-F]{3}$/i,Ee=/^#?[0-9A-F]{6}$/i,He=function(e){return Ee.test(e)||xe.test(e)},Me=function(e){return e.replace(/([^0-9A-F]+)/gi,"").substr(0,6)}
42734,Ne=function(r){var t=r.color,l=void 0===t?"":t,i=r.onChange,f=r.onBlur,v=r.prefixed,d=index_module_c(r,["color","onChange","onBlur","prefixed"]),h=n(function(){return Me(l)}),m=h[0],g=h[1],p=index_module_s(i),b=index_module_s(f),_=a(function(e){var r=Me(e.target.value);g(r),He(r)&&p("#"+r)},[p]),C=a(function(e){He(e.target.value)||g(Me(l)),b(e)},[l,b]);return o(function(){g(Me(l))},[l]),e.createElement("input",index_module_u({},d,{value:(v?"#":"")+m,spellCheck:"false",onChange:_,onBlur:C}))}; 42735 42736;// CONCATENATED MODULE: ./packages/components/build-module/color-picker/picker.js 42737 42738/** 42739 * External dependencies 42740 */ 42741 42742 42743 42744/** 42745 * WordPress dependencies 42746 */ 42747 42748/** 42749 * Internal dependencies 42750 */ 42751 42752const Picker = ({ 42753 color, 42754 enableAlpha, 42755 onChange 42756}) => { 42757 const Component = enableAlpha ? ge : Ce; 42758 const rgbColor = (0,external_wp_element_namespaceObject.useMemo)(() => color.toRgbString(), [color]); 42759 return (0,external_wp_element_namespaceObject.createElement)(Component, { 42760 color: rgbColor, 42761 onChange: nextColor => { 42762 onChange(w(nextColor)); 42763 } 42764 }); 42765}; 42766 42767;// CONCATENATED MODULE: ./packages/components/build-module/color-picker/component.js 42768 42769/** 42770 * External dependencies 42771 */ 42772 42773 42774 42775 42776/** 42777 * WordPress dependencies 42778 */ 42779 42780 42781 42782 42783/** 42784 * Internal dependencies 42785 */ 42786 42787 42788 42789 42790 42791 42792k([names]); 42793const options = [{ 42794 label: 'RGB', 42795 value: 'rgb' 42796}, { 42797 label: 'HSL', 42798 value: 'hsl' 42799}, { 42800 label: 'Hex', 42801 value: 'hex' 42802}]; 42803const UnconnectedColorPicker = (props, forwardedRef) => { 42804 const { 42805 enableAlpha = false, 42806 color: colorProp, 42807 onChange, 42808 defaultValue = '#fff', 42809 copyFormat, 42810 ...divProps 42811 } = useContextSystem(props, 'ColorPicker'); 42812 42813 // Use a safe default value for the color and remove the possibility of `undefined`. 42814 const [color, setColor] = useControlledValue({ 42815 onChange, 42816 value: colorProp, 42817 defaultValue 42818 }); 42819 const safeColordColor = (0,external_wp_element_namespaceObject.useMemo)(() => { 42820 return w(color || ''); 42821 }, [color]); 42822 const debouncedSetColor = (0,external_wp_compose_namespaceObject.useDebounce)(setColor); 42823 const handleChange = (0,external_wp_element_namespaceObject.useCallback)(nextValue => { 42824 debouncedSetColor(nextValue.toHex()); 42825 }, [debouncedSetColor]); 42826 const [colorType, setColorType] = (0,external_wp_element_namespaceObject.useState)(copyFormat || 'hex'); 42827 return (0,external_wp_element_namespaceObject.createElement)(ColorfulWrapper, { 42828 ref: forwardedRef, 42829 ...divProps 42830 }, (0,external_wp_element_namespaceObject.createElement)(Picker, { 42831 onChange: handleChange, 42832 color: safeColordColor, 42833 enableAlpha: enableAlpha 42834 }), (0,external_wp_element_namespaceObject.createElement)(AuxiliaryColorArtefactWrapper, null, (0,external_wp_element_namespaceObject.createElement)(AuxiliaryColorArtefactHStackHeader, { 42835 justify: "space-between" 42836 }, (0,external_wp_element_namespaceObject.createElement)(styles_SelectControl, { 42837 __nextHasNoMarginBottom: true, 42838 options: options, 42839 value: colorType, 42840 onChange: nextColorType => setColorType(nextColorType), 42841 label: (0,external_wp_i18n_namespaceObject.__)('Color format'), 42842 hideLabelFromVision: true 42843 }), (0,external_wp_element_namespaceObject.createElement)(ColorCopyButton, { 42844 color: safeColordColor, 42845 colorType: copyFormat || colorType 42846 })), (0,external_wp_element_namespaceObject.createElement)(ColorInputWrapper, { 42847 direction: "column", 42848 gap: 2 42849 }, (0,external_wp_element_namespaceObject.createElement)(ColorInput, { 42850 colorType: colorType, 42851 color: safeColordColor, 42852 onChange: handleChange, 42853 enableAlpha: enableAlpha 42854 })))); 42855}; 42856const ColorPicker = contextConnect(UnconnectedColorPicker, 'ColorPicker'); 42857/* harmony default export */ const color_picker_component = (ColorPicker); 42858 42859;// CONCATENATED MODULE: ./packages/components/build-module/color-picker/use-deprecated-props.js 42860/** 42861 * External dependencies 42862 */ 42863 42864 42865 42866/** 42867 * WordPress dependencies 42868 */ 42869 42870 42871/** 42872 * Internal dependencies 42873 */ 42874 42875function isLegacyProps(props) { 42876 return typeof props.onChangeComplete !== 'undefined' || typeof props.disableAlpha !== 'undefined' || typeof props.color?.hex === 'string'; 42877}
42878function getColorFromLegacyProps(color) { 42879 if (color === undefined) return; 42880 if (typeof color === 'string') return color; 42881 if (color.hex) return color.hex; 42882 return undefined; 42883} 42884const transformColorStringToLegacyColor = memize(color => { 42885 const colordColor = w(color); 42886 const hex = colordColor.toHex(); 42887 const rgb = colordColor.toRgb(); 42888 const hsv = colordColor.toHsv(); 42889 const hsl = colordColor.toHsl(); 42890 return { 42891 hex, 42892 rgb, 42893 hsv, 42894 hsl, 42895 source: 'hex', 42896 oldHue: hsl.h 42897 }; 42898}); 42899function use_deprecated_props_useDeprecatedProps(props) { 42900 const { 42901 onChangeComplete 42902 } = props; 42903 const legacyChangeHandler = (0,external_wp_element_namespaceObject.useCallback)(color => { 42904 onChangeComplete(transformColorStringToLegacyColor(color)); 42905 }, [onChangeComplete]); 42906 if (isLegacyProps(props)) { 42907 return { 42908 color: getColorFromLegacyProps(props.color), 42909 enableAlpha: !props.disableAlpha, 42910 onChange: legacyChangeHandler 42911 }; 42912 } 42913 return { 42914 ...props, 42915 color: props.color, 42916 enableAlpha: props.enableAlp
42916ha, 42917 onChange: props.onChange 42918 }; 42919} 42920 42921;// CONCATENATED MODULE: ./packages/components/build-module/color-picker/legacy-adapter.js 42922 42923/** 42924 * Internal dependencies 42925 */ 42926 42927 42928const LegacyAdapter = props => { 42929 return (0,external_wp_element_namespaceObject.createElement)(color_picker_component, { 42930 ...use_deprecated_props_useDeprecatedProps(props) 42931 }); 42932}; 42933 42934;// CONCATENATED MODULE: ./packages/components/build-module/circular-option-picker/circular-option-picker-context.js 42935/** 42936 * WordPress dependencies 42937 */ 42938 42939 42940/** 42941 * Internal dependencies 42942 */ 42943 42944const CircularOptionPickerContext = (0,external_wp_element_namespaceObject.createContext)({}); 42945 42946;// CONCATENATED MODULE: ./packages/icons/build-module/library/check.js 42947 42948/** 42949 * WordPress dependencies 42950 */ 42951 42952const check = (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.SVG, { 42953 xmlns: "http://www.w3.org/2000/svg", 42954 viewBox: "0 0 24 24" 42955}, (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.Path, { 42956 d: "M16.7 7.1l-6.3 8.5-3.3-2.5-.9 1.2 4.5 3.4L17.9 8z" 42957})); 42958/* harmony default export */ const library_check = (check); 42959 42960;// CONCATENATED MODULE: ./packages/components/build-module/circular-option-picker/circular-option-picker-option.js 42961 42962/** 42963 * External dependencies 42964 */ 42965 42966/** 42967 * WordPress dependencies 42968 */ 42969 42970 42971 42972 42973/** 42974 * Internal dependencies 42975 */ 42976 42977 42978 42979 42980const hasSelectedOption = new Map(); 42981function UnforwardedOptionAsButton(props, forwardedRef) { 42982 return (0,external_wp_element_namespaceObject.createElement)(build_module_button, { 42983 ...props, 42984 ref: forwardedRef 42985 }); 42986} 42987const OptionAsButton = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedOptionAsButton); 42988function UnforwardedOptionAsOption(props, forwardedRef) { 42989 const { 42990 id, 42991 className, 42992 isSelected, 42993 context, 42994 ...additionalProps 42995 } = props; 42996 const { 42997 isComposite, 42998 ..._compositeState 42999 } = context; 43000 const compositeState = _compositeState; 43001 const { 43002 baseId, 43003 currentId, 43004 setCurrentId 43005 } = compositeState; 43006 (0,external_wp_element_namespaceObject.useEffect)(() => { 43007 // If we call `setCurrentId` here, it doesn't update for other 43008 // Option renders in the same pass. So we have to store our own 43009 // map to make sure that we only set the first selected option. 43010 // We still need to check `currentId` because the control will 43011 // update this as the user moves around, and that state should 43012 // be maintained as the group gains and loses focus. 43013 if (isSelected && !currentId && !hasSelectedOption.get(baseId)) { 43014 hasSelectedOption.set(baseId, true); 43015 setCurrentId(id); 43016 } 43017 }, [baseId, currentId, id, isSelected, setCurrentId]); 43018 return (0,external_wp_element_namespaceObject.createElement)(CompositeItem, { 43019 ...additionalProps, 43020 ...compositeState, 43021 as: build_module_button, 43022 id: id 43023 // Ideally we'd let the underlying `Button` component 43024 // handle this by passing `isPressed` as a prop. 43025 // Unfortunately doing so also sets `aria-pressed` as 43026 // an attribute on the element, which is incompatible 43027 // with `role="option"`, and there is no way at this 43028 // point to override that behaviour. 43029 , 43030 className: classnames_default()(className, { 43031 'is-pressed': isSelected 43032 }), 43033 role: "option", 43034 "aria-selected": !!isSelected, 43035 ref: forwardedRef 43036 }); 43037} 43038const OptionAsOption = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedOptionAsOption); 43039function Option({ 43040 className, 43041 isSelected, 43042 selectedIconProps = {}, 43043 tooltipText, 43044 ...additionalProps 43045}) { 43046 const compositeContext = (0,external_wp_element_namespaceObject.useContext)(CircularOptionPickerContext); 43047 const { 43048 isComposite, 43049 baseId 43050 } = compositeContext; 43051 const id = (0,external_wp_compose_namespaceObject.useInstanceId)(Option, baseId || 'components-circular-option-picker__option'); 43052 const commonProps = { 43053 id, 43054 className: 'components-circular-option-picker__option', 43055 ...additionalProps 43056 }; 43057 const optionControl = isComposite ? (0,external_wp_element_namespaceObject.createElement)(OptionAsOption, { 43058 ...commonProps, 43059 context: compositeContext, 43060 isSelected: isSelected 43061 }) : (0,external_wp_element_namespaceObject.createElement)(OptionAsButton, { 43062 ...commonProps, 43063 isPressed: isSelected 43064 }); 43065 return (0,external_wp_element_namespaceObject.createElement)("div", { 43066 className: classnames_default()(className, 'components-circular-option-picker__option-wrapper') 43067 }, tooltipText ? (0,external_wp_element_namespaceObject.createElement)(tooltip, { 43068 text: tooltipText 43069 }, optionControl) : optionControl, isSelected && (0,external_wp_element_namespaceObject.createElement)(icons_build_module_icon, { 43070 icon: library_check, 43071 ...selectedIconProps 43072 })); 43073} 43074 43075;// CONCATENATED MODULE: ./packages/components/build-module/circular-option-picker/circular-option-picker-option-group.js 43076 43077/** 43078 * External dependencies 43079 */ 43080 43081 43082/** 43083 * Internal dependencies 43084 */ 43085 43086function OptionGroup({ 43087 className, 43088 options, 43089 ...additionalProps 43090}) { 43091 const role = 'aria-label' in additionalProps || 'aria-labelledby' in additionalProps ? 'group' : undefined; 43092 return (0,external_wp_element_namespaceObject.createElement)("div", { 43093 ...additionalProps, 43094 role: role, 43095 className: classnames_default()('components-circular-option-picker__option-group', 'components-circular-option-picker__swatches', className) 43096 }, options); 43097} 43098 43099;// CONCATENATED MODULE: ./packages/components/build-module/circular-option-picker/circular-option-picker-actions.js 43100 43101/** 43102 * External dependencies 43103 */ 43104 43105 43106/** 43107 * Internal dependencies 43108 */ 43109 43110 43111function DropdownLinkAction({ 43112 buttonProps, 43113 className, 43114 dropdownProps, 43115 linkText 43116}) { 43117 return (0,external_wp_element_namespaceObject.createElement)(dropdown, { 43118 className: classnames_default()('components-circular-option-picker__dropdown-link-action', className), 43119 renderToggle: ({ 43120 isOpen, 43121 onToggle 43122 }) => (0,external_wp_element_namespaceObject.createElement)(build_module_button, { 43123 "aria-expanded": isOpen, 43124 "aria-haspopup": "true", 43125 onClick: onToggle, 43126 variant: "link", 43127 ...buttonProps 43128 }, linkText), 43129 ...dropdownProps 43130 }); 43131} 43132function ButtonAction({ 43133 className, 43134 children, 43135 ...additionalProps 43136}) { 43137 return (0,external_wp_element_namespaceObject.createElement)(build_module_button, { 43138 className: classnames_default()('components-circular-option-picker__clear', className), 43139 variant: "tertiary", 43140 ...additionalProps 43141 }, children); 43142} 43143 43144;// CONCATENATED MODULE: ./packages/components/build-module/circular-option-picker/circular-option-picker.js 43145 43146/** 43147 * External dependencies 43148 */ 43149 43150 43151/** 43152 * WordPress dependencies 43153 */ 43154 43155 43156 43157 43158/** 43159 * Internal dependencies 43160 */ 43161 43162 43163 43164 43165 43166 43167/**
43168 *`CircularOptionPicker` is a component that displays a set of options as circular buttons. 43169 * 43170 * ```jsx 43171 * import { CircularOptionPicker } from '../circular-option-picker'; 43172 * import { useState } from '@wordpress/element'; 43173 * 43174 * const Example = () => { 43175 * const [ currentColor, setCurrentColor ] = useState(); 43176 * const colors = [ 43177 * { color: '#f00', name: 'Red' }, 43178 * { color: '#0f0', name: 'Green' }, 43179 * { color: '#00f', name: 'Blue' }, 43180 * ]; 43181 * const colorOptions = ( 43182 * <> 43183 * { colors.map( ( { color, name }, index ) => { 43184 * return ( 43185 * <CircularOptionPicker.Option 43186 * key={ `${ color }-${ index }` } 43187 * tooltipText={ name } 43188 * style={ { backgroundColor: color, color } } 43189 * isSelected={ index === currentColor } 43190 * onClick={ () => setCurrentColor( index ) } 43191 * aria-label={ name } 43192 * /> 43193 * ); 43194 * } ) } 43195 * </> 43196 * ); 43197 * return ( 43198 * <CircularOptionPicker 43199 * options={ colorOptions } 43200 * actions={ 43201 * <CircularOptionPicker.ButtonAction 43202 * onClick={ () => setCurrentColor( undefined ) } 43203 * > 43204 * { 'Clear' } 43205 * </CircularOptionPicker.ButtonAction> 43206 * } 43207 * /> 43208 * ); 43209 * }; 43210 * ``` 43211 */ 43212 43213function ListboxCircularOptionPicker(props) { 43214 const { 43215 actions, 43216 options, 43217 baseId, 43218 className, 43219 loop = true, 43220 children, 43221 ...additionalProps 43222 } = props; 43223 const rtl = (0,external_wp_i18n_namespaceObject.isRTL)(); 43224 const compositeState = useCompositeState({ 43225 baseId, 43226 loop, 43227 rtl 43228 }); 43229 const { 43230 setBaseId, 43231 setLoop, 43232 setRTL 43233 } = compositeState; 43234 43235 // These are necessary as `useCompositeState` is sealed after 43236 // the first render, so although unlikely to happen, if a state 43237 // property should change, we need to process it accordingly. 43238 43239 (0,external_wp_element_namespaceObject.useEffect)(() => { 43240 setBaseId(baseId); 43241 }, [setBaseId, baseId]); 43242 (0,external_wp_element_namespaceObject.useEffect)(() => { 43243 setLoop(loop); 43244 }, [setLoop, loop]); 43245 (0,external_wp_element_namespaceObject.useEffect)(() => { 43246 setRTL(rtl); 43247 }, [setRTL, rtl]); 43248 const compositeContext = { 43249 isComposite: true, 43250 ...compositeState 43251 }; 43252 return (0,external_wp_element_namespaceObject.createElement)("div", { 43253 className: className 43254 }, (0,external_wp_element_namespaceObject.createElement)(CircularOptionPickerContext.Provider, { 43255 value: compositeContext 43256 }, (0,external_wp_element_namespaceObject.createElement)(Composite, { 43257 ...additionalProps, 43258 ...compositeState, 43259 role: 'listbox' 43260 }, options), children, actions)); 43261} 43262function ButtonsCircularOptionPicker(props) { 43263 const { 43264 actions, 43265 options, 43266 children, 43267 baseId, 43268 ...additionalProps 43269 } = props; 43270 return (0,external_wp_element_namespaceObject.createElement)("div", { 43271 ...additionalProps 43272 }, (0,external_wp_element_namespaceObject.createElement)(CircularOptionPickerContext.Provider, { 43273 value: { 43274 isComposite: false, 43275 baseId 43276 } 43277 }, options, children, actions)); 43278} 43279function CircularOptionPicker(props) { 43280 const { 43281 asButtons, 43282 actions: actionsProp, 43283 options: optionsProp, 43284 children, 43285 className, 43286 ...additionalProps 43287 } = props; 43288 const baseId = (0,external_wp_compose_namespaceObject.useInstanceId)(CircularOptionPicker, 'components-circular-option-picker', additionalProps.id); 43289 const OptionPickerImplementation = asButtons ? ButtonsCircularOptionPicker : ListboxCircularOptionPicker; 43290 const actions = actionsProp ? (0,external_wp_element_namespaceObject.createElement)("div", { 43291 className: "components-circular-option-picker__custom-clear-wrapper" 43292 }, actionsProp) : undefined; 43293 const options = (0,external_wp_element_namespaceObject.createElement)("div", { 43294 className: 'components-circular-option-picker__swatches' 43295 }, optionsProp); 43296 return (0,external_wp_element_namespaceObject.createElement)(OptionPickerImplementation, { 43297 ...additionalProps, 43298 baseId: baseId, 43299 className: classnames_default()('components-circular-option-picker', className), 43300 actions: actions, 43301 options: options 43302 }, children); 43303} 43304CircularOptionPicker.Option = Option; 43305CircularOptionPicker.OptionGroup = OptionGroup; 43306CircularOptionPicker.ButtonAction = ButtonAction; 43307CircularOptionPicker.DropdownLinkAction = DropdownLinkAction; 43308/* harmony default export */ const circular_option_picker = (CircularOptionPicker); 43309 43310;// CONCATENATED MODULE: ./packages/components/build-module/circular-option-picker/index.js 43311/** 43312 * Internal dependencies 43313 */ 43314 43315 43316 43317 43318/* harmony default export */ const build_module_circular_option_picker = (circular_option_picker); 43319 43320;// CONCATENATED MODULE: ./packages/components/build-module/v-stack/hook.js 43321/** 43322 * Internal dependencies 43323 */ 43324 43325 43326 43327function useVStack(props) { 43328 const { 43329 expanded = false, 43330 alignment = 'stretch', 43331 ...otherProps 43332 } = useContextSystem(props, 'VStack'); 43333 const hStackProps = useHStack({ 43334 direction: 'column', 43335 expanded,
43336 alignment, 43337 ...otherProps 43338 }); 43339 return hStackProps; 43340} 43341 43342;// CONCATENATED MODULE: ./packages/components/build-module/v-stack/component.js 43343 43344/** 43345 * External dependencies 43346 */ 43347 43348/** 43349 * Internal dependencies 43350 */ 43351 43352 43353 43354 43355function UnconnectedVStack(props, forwardedRef) { 43356 const vStackProps = useVStack(props); 43357 return (0,external_wp_element_namespaceObject.createElement)(component, { 43358 ...vStackProps, 43359 ref: forwardedRef 43360 }); 43361} 43362 43363/** 43364 * `VStack` (or Vertical Stack) is a layout component that arranges child 43365 * elements in a vertical line. 43366 * 43367 * `VStack` can render anything inside. 43368 * 43369 * ```jsx 43370 * import { 43371 * __experimentalText as Text, 43372 * __experimentalVStack as VStack, 43373 * } from `@wordpress/components`; 43374 * 43375 * function Example() { 43376 * return ( 43377 * <VStack> 43378 * <Text>Code</Text> 43379 * <Text>is</Text> 43380 * <Text>Poetry</Text> 43381 * </VStack> 43382 * ); 43383 * } 43384 * ``` 43385 */ 43386const VStack = contextConnect(UnconnectedVStack, 'VStack'); 43387/* harmony default export */ const v_stack_component = (VStack); 43388 43389;// CONCATENATED MODULE: ./packages/components/build-module/truncate/component.js 43390 43391/** 43392 * External dependencies 43393 */ 43394 43395/** 43396 * Internal dependencies 43397 */ 43398 43399 43400 43401 43402function UnconnectedTruncate(props, forwardedRef) { 43403 const truncateProps = useTruncate(props); 43404 return (0,external_wp_element_namespaceObject.createElement)(component, { 43405 as: "span", 43406 ...truncateProps, 43407 ref: forwardedRef 43408 }); 43409} 43410 43411/** 43412 * `Truncate` is a typography primitive that trims text content. 43413 * For almost all cases, it is recommended that `Text`, `Heading`, or 43414 * `Subheading` is used to render text content. However,`Truncate` is 43415 * available for custom implementations. 43416 * 43417 * ```jsx 43418 * import { __experimentalTruncate as Truncate } from `@wordpress/components`; 43419 * 43420 * function Example() { 43421 * return ( 43422 * <Truncate> 43423 * Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ex 43424 * neque, vulputate a diam et, luctus convallis lacus. Vestibulum ac 43425 * mollis mi. Morbi id elementum massa. 43426 * </Truncate> 43427 * ); 43428 * } 43429 * ``` 43430 */ 43431const component_Truncate = contextConnect(UnconnectedTruncate, 'Truncate'); 43432/* harmony default export */ const truncate_component = (component_Truncate); 43433 43434;// CONCATENATED MODULE: ./packages/components/build-module/heading/hook.js 43435/** 43436 * Internal dependencies 43437 */ 43438 43439 43440 43441 43442 43443function useHeading(props) { 43444 const { 43445 as: asProp, 43446 level = 2, 43447 ...otherProps 43448 } = useContextSystem(props, 'Heading'); 43449 const as = asProp || `h${level}`; 43450 const a11yProps = {}; 43451 if (typeof as === 'string' && as[0] !== 'h') { 43452 // If not a semantic `h` element, add a11y props: 43453 a11yProps.role = 'heading'; 43454 a11yProps['aria-level'] = typeof level === 'string' ? parseInt(level) : level; 43455 } 43456 const textProps = useText({ 43457 color: COLORS.gray[900], 43458 size: getHeadingFontSize(level), 43459 isBlock: true, 43460 weight: config_values.fontWeightHeading, 43461 ...otherProps 43462 }); 43463 return { 43464 ...textProps, 43465 ...a11yProps, 43466 as 43467 }; 43468} 43469 43470;// CONCATENATED MODULE: ./packages/components/build-module/heading/component.js 43471 43472/** 43473 * External dependencies 43474 */ 43475 43476/** 43477 * Internal dependencies 43478 */ 43479 43480 43481 43482 43483function UnconnectedHeading(props, forwardedRef) { 43484 const headerProps = useHeading(props); 43485 return (0,external_wp_element_namespaceObject.createElement)(component, { 43486 ...headerProps, 43487 ref: forwardedRef 43488 }); 43489} 43490 43491/** 43492 * `Heading` renders headings and titles using the library's typography system. 43493 * 43494 * ```jsx 43495 * import { __experimentalHeading as Heading } from "@wordpress/components"; 43496 * 43497 * function Example() { 43498 * return <Heading>Code is Poetry</Heading>; 43499 * } 43500 * ``` 43501 */ 43502const Heading = contextConnect(UnconnectedHeading, 'Heading'); 43503/* harmony default export */ const heading_component = (Heading); 43504 43505;// CONCATENATED MODULE: ./packages/components/build-module/color-palette/styles.js 43506 43507function 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)."; } 43508/** 43509 * External dependencies 43510 */ 43511
43512/** 43513 * Internal dependencies 43514 */ 43515 43516const ColorHeading = /*#__PURE__*/emotion_styled_base_browser_esm(heading_component, true ? { 43517 target: "ev9wop70" 43518} : 0)( true ? { 43519 name: "13lxv2o", 43520 styles: "text-transform:uppercase;line-height:24px;font-weight:500;&&&{font-size:11px;margin-bottom:0;}" 43521} : 0); 43522 43523;// CONCATENATED MODULE: ./packages/components/build-module/dropdown/styles.js 43524 43525/** 43526 * External dependencies 43527 */ 43528 43529/** 43530 * Internal dependencies 43531 */ 43532 43533const padding = ({ 43534 paddingSize = 'small' 43535}) => { 43536 if (paddingSize === 'none') return; 43537 const paddingValues = { 43538 small: space(2), 43539 medium: space(4) 43540 }; 43541 return /*#__PURE__*/emotion_react_browser_esm_css("padding:", paddingValues[paddingSize] || paddingValues.small, ";" + ( true ? "" : 0), true ? "" : 0); 43542}; 43543const DropdownContentWrapperDiv = emotion_styled_base_browser_esm("div", true ? { 43544 target: "eovvns30" 43545} : 0)("margin-left:", space(-2), ";margin-right:", space(-2), ";&:first-of-type{margin-top:", space(-2), ";}&:last-of-type{margin-bottom:", space(-2), ";}", padding, ";" + ( true ? "" : 0)); 43546 43547;// CONCATENATED MODULE: ./packages/components/build-module/dropdown/dropdown-content-wrapper.js 43548 43549/** 43550 * External dependencies 43551 */ 43552 43553/** 43554 * Internal dependencies 43555 */ 43556 43557 43558 43559function UnconnectedDropdownContentWrapper(props, forwardedRef) { 43560 const { 43561 paddingSize = 'small', 43562 ...derivedProps 43563 } = useContextSystem(props, 'DropdownContentWrapper'); 43564 return (0,external_wp_element_namespaceObject.createElement)(DropdownContentWrapperDiv, { 43565 ...derivedProps, 43566 paddingSize: paddingSize, 43567 ref: forwardedRef 43568 }); 43569} 43570 43571/** 43572 * A convenience wrapper for the `renderContent` when you want to apply 43573 * different padding. (Default is `paddingSize="small"`). 43574 * 43575 * ```jsx 43576 * import { 43577 * Dropdown, 43578 * __experimentalDropdownContentWrapper as DropdownContentWrapper, 43579 * } from '@wordpress/components'; 43580 * 43581 * <Dropdown 43582 * renderContent={ () => ( 43583 * <DropdownContentWrapper paddingSize="medium"> 43584 * My dropdown content 43585 * </DropdownContentWrapper> 43586 * ) } 43587 * /> 43588 * ``` 43589 */ 43590const DropdownContentWrapper = contextConnect(UnconnectedDropdownContentWrapper, 'DropdownContentWrapper'); 43591/* harmony default export */ const dropdown_content_wrapper = (DropdownContentWrapper); 43592 43593;// CONCATENATED MODULE: ./packages/components/build-module/color-palette/utils.js 43594/** 43595 * External dependencies 43596 */ 43597 43598 43599 43600 43601/** 43602 * WordPress dependencies 43603 */ 43604 43605 43606/** 43607 * Internal dependencies 43608 */ 43609 43610k([names, a11y]); 43611const extractColorNameFromCurrentValue = (currentValue, colors = [], showMultiplePalettes = false) => { 43612 if (!currentValue) { 43613 return ''; 43614 } 43615 const currentValueIsCssVariable = /^var\(/.test(currentValue); 43616 const normalizedCurrentValue = currentValueIsCssVariable ? currentValue : w(currentValue).toHex(); 43617 43618 // Normalize format of `colors` to simplify the following loop 43619 43620 const colorPalettes = showMultiplePalettes ? colors : [{ 43621 colors: colors 43622 }]; 43623 for (const { 43624 colors: paletteColors 43625 } of colorPalettes) { 43626 for (const { 43627 name: colorName, 43628 color: colorValue 43629 } of paletteColors) { 43630 const normalizedColorValue = currentValueIsCssVariable ? colorValue : w(colorValue).toHex(); 43631 if (normalizedCurrentValue === normalizedColorValue) { 43632 return colorName; 43633 } 43634 } 43635 } 43636 43637 // translators: shown when the user has picked a custom color (i.e not in the palette of colors). 43638 return (0,external_wp_i18n_namespaceObject.__)('Custom'); 43639}; 43640 43641// The PaletteObject type has a `colors` property (an array of ColorObject), 43642// while the ColorObject type has a `color` property (the CSS color value). 43643const isMultiplePaletteObject = obj => Array.isArray(obj.colors) && !('color' in obj); 43644const isMultiplePaletteArray = arr => { 43645 return arr.length > 0 && arr.every(colorObj => isMultiplePaletteObject(colorObj)); 43646}; 43647 43648/** 43649 * Transform a CSS variable used as background color into the color value itself. 43650 * 43651 * @param value The color value that may be a CSS variable. 43652 * @param element The element for which to get the computed style. 43653 * @return The background color value computed from a element. 43654 */ 43655const normalizeColorValue = (value, element) => { 43656 const currentValueIsCssVariable = /^var\(/.test(value !== null && value !== void 0 ? value : ''); 43657 if (!currentValueIsCssVariable || element === null) { 43658 return value; 43659 } 43660 const { 43661 ownerDocument 43662 } = element; 43663 const { 43664 defaultView 43665 } = ownerDocument;
43666 const computedBackgroundColor = defaultView?.getComputedStyle(element).backgroundColor; 43667 return computedBackgroundColor ? w(computedBackgroundColor).toHex() : value; 43668}; 43669 43670;// CONCATENATED MODULE: ./packages/components/build-module/color-palette/index.js 43671 43672/** 43673 * External dependencies 43674 */ 43675 43676 43677 43678 43679 43680 43681/** 43682 * WordPress dependencies 43683 */ 43684 43685 43686 43687 43688/** 43689 * Internal dependencies 43690 */ 43691 43692 43693 43694 43695 43696 43697 43698 43699k([names, a11y]); 43700function SinglePalette({ 43701 className, 43702 clearColor, 43703 colors, 43704 onChange, 43705 value, 43706 ...additionalProps 43707}) { 43708 const colorOptions = (0,external_wp_element_namespaceObject.useMemo)(() => { 43709 return colors.map(({ 43710 color, 43711 name 43712 }, index) => { 43713 const colordColor = w(color); 43714 const isSelected = value === color; 43715 return (0,external_wp_element_namespaceObject.createElement)(build_module_circular_option_picker.Option, { 43716 key: `${color}-${index}`, 43717 isSelected: isSelected, 43718 selectedIconProps: isSelected ? { 43719 fill: colordColor.contrast() > colordColor.contrast('#000') ? '#fff' : '#000' 43720 } : {}, 43721 tooltipText: name || 43722 // translators: %s: color hex code e.g: "#f00". 43723 (0,external_wp_i18n_namespaceObject.sprintf)((0,external_wp_i18n_namespaceObject.__)('Color code: %s'), color), 43724 style: { 43725 backgroundColor: color, 43726 color 43727 }, 43728 onClick: isSelected ? clearColor : () => onChange(color, index), 43729 "aria-label": name ? 43730 // translators: %s: The name of the color e.g: "vivid red". 43731 (0,external_wp_i18n_namespaceObject.sprintf)((0,external_wp_i18n_namespaceObject.__)('Color: %s'), name) : 43732 // translators: %s: color hex code e.g: "#f00". 43733 (0,external_wp_i18n_namespaceObject.sprintf)((0,external_wp_i18n_namespaceObject.__)('Color code: %s'), color) 43734 }); 43735 }); 43736 }, [colors, value, onChange, clearColor]); 43737 return (0,external_wp_element_namespaceObject.createElement)(build_module_circular_option_picker.OptionGroup, { 43738 className: className, 43739 options: colorOptions, 43740 ...additionalProps 43741 }); 43742} 43743function MultiplePalettes({ 43744 className, 43745 clearColor, 43746 colors, 43747 onChange, 43748 value, 43749 headingLevel 43750}) { 43751 const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(MultiplePalettes, 'color-palette'); 43752 if (colors.length === 0) { 43753 return null; 43754 } 43755 return (0,external_wp_element_namespaceObject.createElement)(v_stack_component, { 43756 spacing: 3, 43757 className: className 43758 }, colors.map(({ 43759 name, 43760 colors: colorPalette 43761 }, index) => { 43762 const id = `${instanceId}-${index}`; 43763 return (0,external_wp_element_namespaceObject.createElement)(v_stack_component, { 43764 spacing: 2, 43765 key: index 43766 }, (0,external_wp_element_namespaceObject.createElement)(ColorHeading, { 43767 id: id, 43768 level: headingLevel 43769 }, name), (0,external_wp_element_namespaceObject.createElement)(SinglePalette, { 43770 clearColor: clearColor, 43771 colors: colorPalette, 43772 onChange: newColor => onChange(newColor, index), 43773 value: value, 43774 "aria-labelledby": id 43775 })); 43776 })); 43777} 43778function CustomColorPickerDropdown({ 43779 isRenderedInSidebar, 43780 popoverProps: receivedPopoverProps, 43781 ...props 43782}) { 43783 const popoverProps = (0,external_wp_element_namespaceObject.useMemo)(() => ({ 43784 shift: true, 43785 ...(isRenderedInSidebar ? { 43786 // When in the sidebar: open to the left (stacking), 43787 // leaving the same gap as the parent popover. 43788 placement: 'left-start', 43789 offset: 34 43790 } : { 43791 // Default behavior: open below the anchor 43792 placement: 'bottom', 43793 offset: 8 43794 }), 43795 ...receivedPopoverProps 43796 }), [isRenderedInSidebar, receivedPopoverProps]); 43797 return (0,external_wp_element_namespaceObject.createElement)(dropdown, { 43798 contentClassName: "components-color-palette__custom-color-dropdown-content", 43799 popoverProps: popoverProps, 43800 ...props 43801 }); 43802} 43803function UnforwardedColorPalette(props, forwardedRef) { 43804 const { 43805 asButtons, 43806 loop, 43807 clearable = true, 43808 colors = [], 43809 disableCustomColors = false, 43810 enableAlpha = false, 43811 onChange, 43812 value, 43813 __experimentalIsRenderedInSidebar = false, 43814 headingLevel = 2, 43815 'aria-label': ariaLabel, 43816 'aria-labelledby': ariaLabelledby, 43817 ...additionalProps 43818 } = props; 43819 const [normalizedColorValue, setNormalizedColorValue] = (0,external_wp_element_namespaceObject.useState)(value); 43820 const clearColor = (0,external_wp_element_namespaceObject.useCallback)(() =>
43820 onChange(undefined), [onChange]); 43821 const customColorPaletteCallbackRef = (0,external_wp_element_namespaceObject.useCallback)(node => { 43822 setNormalizedColorValue(normalizeColorValue(value, node)); 43823 }, [value]); 43824 const hasMultipleColorOrigins = isMultiplePaletteArray(colors); 43825 const buttonLabelName = (0,external_wp_element_namespaceObject.useMemo)(() => extractColorNameFromCurrentValue(value, colors, hasMultipleColorOrigins), [value, colors, hasMultipleColorOrigins]); 43826 const renderCustomColorPicker = () => (0,external_wp_element_namespaceObject.createElement)(dropdown_content_wrapper, { 43827 paddingSize: "none" 43828 }, (0,external_wp_element_namespaceObject.createElement)(LegacyAdapter, { 43829 color: normalizedColorValue, 43830 onChange: color => onChange(color), 43831 enableAlpha: enableAlpha 43832 })); 43833 const isHex = value?.startsWith('#'); 43834 43835 // Leave hex values as-is. Remove the `var()` wrapper from CSS vars. 43836 const displayValue = value?.replace(/^var\((.+)\)$/, '$1'); 43837 const customColorAccessibleLabel = !!displayValue ? (0,external_wp_i18n_namespaceObject.sprintf)( 43838 // translators: %1$s: The name of the color e.g: "vivid red". %2$s: The color's hex code e.g: "#f00". 43839 (0,external_wp_i18n_namespaceObject.__)('Custom color picker. The currently selected color is called "%1$s" and has a value of "%2$s".'), buttonLabelName, displayValue) : (0,external_wp_i18n_namespaceObject.__)('Custom color picker.'); 43840 const paletteCommonProps = { 43841 clearColor, 43842 onChange, 43843 value 43844 }; 43845 const actions = !!clearable && (0,external_wp_element_namespaceObject.createElement)(build_module_circular_option_picker.ButtonAction, { 43846 onClick: clearColor 43847 }, (0,external_wp_i18n_namespaceObject.__)('Clear')); 43848 let metaProps; 43849 if (asButtons) { 43850 metaProps = { 43851 asButtons: true 43852 }; 43853 } else { 43854 const _metaProps = { 43855 asButtons: false, 43856 loop 43857 }; 43858 if (ariaLabel) { 43859 metaProps = { 43860 ..._metaProps, 43861 'aria-label': ariaLabel 43862 }; 43863 } else if (ariaLabelledby) { 43864 metaProps = { 43865 ..._metaProps, 43866 'aria-labelledby': ariaLabelledby 43867 }; 43868 } else { 43869 metaProps = { 43870 ..._metaProps, 43871 'aria-label': (0,external_wp_i18n_namespaceObject.__)('Custom color picker.') 43872 }; 43873 } 43874 } 43875 return (0,external_wp_element_namespaceObject.createElement)(v_stack_component, { 43876 spacing: 3, 43877 ref: forwardedRef, 43878 ...additionalProps 43879 }, !disableCustomColors && (0,external_wp_element_namespaceObject.createElement)(CustomColorPickerDropdown, { 43880 isRenderedInSidebar: __experimentalIsRenderedInSidebar, 43881 renderContent: renderCustomColorPicker, 43882 renderToggle: ({ 43883 isOpen, 43884 onToggle 43885 }) => (0,external_wp_element_namespaceObject.createElement)(v_stack_component, { 43886 className: "components-color-palette__custom-color-wrapper", 43887 spacing: 0 43888 }, (0,external_wp_element_namespaceObject.createElement)("button", { 43889 ref: customColorPaletteCallbackRef, 43890 className: "components-color-palette__custom-color-button", 43891 "aria-expanded": isOpen, 43892 "aria-haspopup": "true", 43893 onClick: onToggle, 43894 "aria-label": customColorAccessibleLabel, 43895 style: { 43896 background: value 43897 } 43898 }), (0,external_wp_element_namespaceObject.createElement)(v_stack_component, { 43899 className: "components-color-palette__custom-color-text-wrapper", 43900 spacing: 0.5 43901 }, (0,external_wp_element_namespaceObject.createElement)(truncate_component, { 43902 className: "components-color-palette__custom-color-name" 43903 }, value ? buttonLabelName : 'No color selected'), (0,external_wp_element_namespaceObject.createElement)(truncate_component, { 43904 className: classnames_default()('components-color-palette__custom-color-value', { 43905 'components-color-palette__custom-color-value--is-hex': isHex 43906 }) 43907 }, displayValue))) 43908 }), (0,external_wp_element_namespaceObject.createElement)(build_module_circular_option_picker, { 43909 ...metaProps, 43910 actions: actions, 43911 options: hasMultipleColorOrigins ? (0,external_wp_element_namespaceObject.createElement)(MultiplePalettes, { 43912 ...paletteCommonProps, 43913 headingLevel: headingLevel, 43914 colors: colors, 43915 value: value 43916 }) : (0,external_wp_element_namespaceObject.createElement)(SinglePalette, { 43917 ...paletteCommonProps, 43918 colors: colors, 43919 value: value 43920 }) 43921 })); 43922} 43923 43924/** 43925 * Allows the user to pick a color from a list of pre-defined color entries. 43926 * 43927 * ```jsx 43928 * import { ColorPalette } from '@wordpress/components';
43929 * import { useState } from '@wordpress/element'; 43930 * 43931 * const MyColorPalette = () => { 43932 * const [ color, setColor ] = useState ( '#f00' ) 43933 * const colors = [ 43934 * { name: 'red', color: '#f00' }, 43935 * { name: 'white', color: '#fff' }, 43936 * { name: 'blue', color: '#00f' }, 43937 * ]; 43938 * return ( 43939 * <ColorPalette 43940 * colors={ colors } 43941 * value={ color } 43942 * onChange={ ( color ) => setColor( color ) } 43943 * /> 43944 * ); 43945 * } ); 43946 * ``` 43947 */ 43948const ColorPalette = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedColorPalette); 43949/* harmony default export */ const color_palette = (ColorPalette); 43950 43951;// CONCATENATED MODULE: ./packages/components/build-module/unit-control/utils.js 43952/** 43953 * WordPress dependencies 43954 */ 43955 43956 43957 43958/** 43959 * Internal dependencies 43960 */ 43961 43962const isWeb = external_wp_element_namespaceObject.Platform.OS === 'web'; 43963const allUnits = { 43964 px: { 43965 value: 'px', 43966 label: isWeb ? 'px' : (0,external_wp_i18n_namespaceObject.__)('Pixels (px)'), 43967 a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Pixels (px)'), 43968 step: 1 43969 }, 43970 '%': { 43971 value: '%', 43972 label: isWeb ? '%' : (0,external_wp_i18n_namespaceObject.__)('Percentage (%)'), 43973 a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Percent (%)'), 43974 step: 0.1 43975 }, 43976 em: { 43977 value: 'em', 43978 label: isWeb ? 'em' : (0,external_wp_i18n_namespaceObject.__)('Relative to parent font size (em)'), 43979 a11yLabel: (0,external_wp_i18n_namespaceObject._x)('ems', 'Relative to parent font size (em)'), 43980 step: 0.01 43981 }, 43982 rem: { 43983 value: 'rem', 43984 label: isWeb ? 'rem' : (0,external_wp_i18n_namespaceObject.__)('Relative to root font size (rem)'), 43985 a11yLabel: (0,external_wp_i18n_namespaceObject._x)('rems', 'Relative to root font size (rem)'), 43986 step: 0.01 43987 }, 43988 vw: { 43989 value: 'vw', 43990 label: isWeb ? 'vw' : (0,external_wp_i18n_namespaceObject.__)('Viewport width (vw)'), 43991 a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Viewport width (vw)'), 43992 step: 0.1 43993 }, 43994 vh: { 43995 value: 'vh', 43996 label: isWeb ? 'vh' : (0,external_wp_i18n_namespaceObject.__)('Viewport height (vh)'), 43997 a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Viewport height (vh)'), 43998 step: 0.1 43999 }, 44000 vmin: { 44001 value: 'vmin', 44002 label: isWeb ? 'vmin' : (0,external_wp_i18n_namespaceObject.__)('Viewport smallest dimension (vmin)'), 44003 a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Viewport smallest dimension (vmin)'), 44004 step: 0.1 44005 }, 44006 vmax: { 44007 value: 'vmax', 44008 label: isWeb ? 'vmax' : (0,external_wp_i18n_namespaceObject.__)('Viewport largest dimension (vmax)'), 44009 a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Viewport largest dimension (vmax)'), 44010 step: 0.1 44011 }, 44012 ch: { 44013 value: 'ch', 44014 label: isWeb ? 'ch' : (0,external_wp_i18n_namespaceObject.__)('Width of the zero (0) character (ch)'), 44015 a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Width of the zero (0) character (ch)'), 44016 step: 0.01 44017 }, 44018 ex: { 44019 value: 'ex', 44020 label: isWeb ? 'ex' : (0,external_wp_i18n_namespaceObject.__)('x-height of the font (ex)'), 44021 a11yLabel: (0,external_wp_i18n_namespaceObject.__)('x-height of the font (ex)'), 44022 step: 0.01 44023 }, 44024 cm: { 44025 value: 'cm', 44026 label: isWeb ? 'cm' : (0,external_wp_i18n_namespaceObject.__)('Centimeters (cm)'), 44027 a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Centimeters (cm)'), 44028 step: 0.001 44029 }, 44030 mm: { 44031 value: 'mm', 44032 label: isWeb ? 'mm' : (0,external_wp_i18n_namespaceObject.__)('Millimeters (mm)'), 44033 a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Millimeters (mm)'), 44034 step: 0.1 44035 }, 44036 in: { 44037 value: 'in', 44038 label: isWeb ? 'in' : (0,external_wp_i18n_namespaceObject.__)('Inches (in)'), 44039 a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Inches (in)'), 44040 step: 0.001 44041 }, 44042 pc: { 44043 value: 'pc', 44044 label: isWeb ? 'pc' : (0,external_wp_i18n_namespaceObject.__)('Picas (pc)'), 44045 a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Picas (pc)'), 44046 step: 1 44047 }, 44048 pt: { 44049 value: 'pt', 44050 label: isWeb ? 'pt' : (0,external_wp_i18n_namespaceObject.__)('Points (pt)'), 44051 a11yLabel: (0,external_wp_i18n_namespaceObject.__)('Points (pt)'), 44052 step: 1 44053 } 44054}; 44055 44056/** 44057 * An array of all available CSS length units. 44058 */ 44059const ALL_CSS_UNITS = Object.values(allUnits); 44060 44061/** 44062 * Units of measurements. `a11yLabel` is used by screenreaders. 44063 */ 44064const CSS_UNITS = [allUnits.px, allUnits['%'], allUnits.em, allUnits.rem, allUnits.vw, allUnits.vh]; 44065const DEFAULT_UNIT = allUnits.px; 44066 44067/** 44068 * Handles legacy value + unit handling. 44069 * This component use to manage both incoming value and units separately. 44070 * 44071 * Moving forward, ideally the value should be a string that contains both 44072 * the value and unit, example: '10px' 44073 * 44074 * @param rawValue The raw value as a string (may or may not contain the unit) 44075 * @param fallbackUnit The unit used as a fallback, if not unit is detected in the `value` 44076 * @param allowedUnits Units to derive from. 44077 * @return The extracted quantity and unit. The quantity can be `undefined` in case the raw value 44078 * could not be parsed to a number correctly. The unit can be `undefined` in case the unit parse 44079 * from the raw value could not be matched against the list of allowed units. 44080 */ 44081function getParsedQuantityAndUnit(rawValue, fallbackUnit, allowedUnits) { 44082 const initialValue = fallbackUnit ? `${rawValue !== null && rawValue !== void 0 ? rawValue : ''}${fallbackUnit}` : rawValue; 44083 return parseQuantityAndUnitFromRawValue(initialValue, allowedUnits); 44084} 44085 44086/** 44087 * Checks if units are defined. 44088 * 44089 * @param units List of units. 44090 * @return Whether the list actually contains any units. 44091 */ 44092function hasUnits(units) { 44093 // Although the `isArray` check shouldn't be necessary (given the signature of 44094 // this typed function), it's better to stay on the side of caution, since 44095 // this function may be called from un-typed environments. 44096 return Array.isArray(units) && !!units.length; 44097} 44098 44099/** 44100 * Parses a quantity and unit from a raw string value, given a list of allowed 44101 * units and otherwise falling back to the default unit. 44102 * 44103 * @param rawValue The raw value as a string (may or may not contain the unit) 44104 * @param allowedUnits Units to derive from. 44105 * @return The extracted quantity and unit. The quantity can be `undefined` in case the raw value 44106 * could not be parsed to a number correctly. The unit can be `undefined` in case the unit parsed 44107 * from the raw value could not be matched against the list of allowed units. 44108 */ 44109function parseQuantityAndUnitFromRawValue(rawValue, allowedUnits = ALL_CSS_UNITS) { 44110 let trimmedValue; 44111 let quantityToReturn; 44112 if (typeof rawValue !== 'undefined' || rawValue === null) { 44113 trimmedValue = `${rawValue}`.trim(); 44114 const parsedQuantity = parseFloat(trimmedValue); 44115 quantityToReturn = !isFinite(parsedQuantity) ? undefined : parsedQuantity; 44116 } 44117 const unitMatch = trimmedValue?.match(/[\d.\-\+]*\s*(.*)/); 44118 const matchedUnit = unitMatch?.[1]?.toLowerCase(); 44119 let unitToReturn; 44120 if (hasUnits(allowedUnits)) { 44121 const match = allowedUnits.find(item => item.value === matchedUnit); 44122 unitToReturn = match?.value; 44123 } else { 44124 unitToReturn = DEFAULT_UNIT.value; 44125 } 44126 return [quantityToReturn, unitToReturn]; 44127} 44128 44129/** 44130 * Parses quantity and unit from a raw value. Validates parsed value, using fallback 44131 * value if invalid. 44132 * 44133 * @param rawValue The next value. 44134 * @param allowedUnits Units to derive from. 44135 * @param fallbackQuantity The fallback quantity, used in case it's not possible to parse a valid quantity from the raw value. 44136 * @param fallbackUnit The fallback unit, used in case it's not possible to parse a valid unit from the raw value. 44137 * @return The extracted quantity and unit. The quantity can be `undefined` in case the raw value 44138 * could not be parsed to a number correctly, and the `fallbackQuantity` was also `undefined`. The 44139 * unit can be `undefined` only if the unit parsed from the raw value could not be matched against 44140 * the list of allowed units, the `fallbackQuantity` is also `undefined` and the list of 44141 * `allowedUnits` is passed empty. 44142 */ 44143function getValidParsedQuantityAndUnit(rawValue, allowedUnits, fallbackQuantity, fallbackUnit) { 44144 const [parsedQuantity, parsedUnit] = parseQuantityAndUnitFromRawValue(rawValue, allowedUnits); 44145 44146 // The parsed value from `parseQuantityAndUnitFromRawValue` should now be 44147 // either a real number or undefined. If undefined, use the fallback value. 44148 const quantityToReturn = parsedQuantity !== null && parsedQuantity !== void 0 ? parsedQuantity : fallbackQuantity; 44149 44150 // If no unit is parsed from the raw value, or if the fallback unit is not 44151 // defined, use the first value from the list of allowed units as fallback. 44152 let unitToReturn = parsedUnit || fallbackUnit; 44153 if (!unitToReturn && hasUnits(allowedUnits)) { 44154 unitToReturn = allowedUnits[0].value; 44155 } 44156 return [quantityToReturn, unitToReturn]; 44157} 44158 44159/** 44160 * Takes a unit value and finds the matching accessibility label for the 44161 * unit abbreviation. 44162 * 44163 * @param unit Unit value (example: `px`) 44164 * @return a11y label for the unit abbreviation 44165 */ 44166function getAccessibleLabelForUnit(unit) { 44167 const match = ALL_CSS_UNITS.find(item => item.value === unit); 44168 return match?.a11yLabel ? match?.a11yLabel : match?.value; 44169} 44170 44171/** 44172 * Filters available units based on values defined a list of allowed unit values. 44173 * 44174 * @param allowedUnitValues Collection of allowed unit value strings. 44175 * @param availableUnits Collection of available unit objects. 44176 * @return Filtered units. 44177 */ 44178function filterUnitsWithSettings(allowedUnitValues = [], availableUnits) { 44179 // Although the `isArray` check shouldn't be necessary (given the signature of 44180 // this typed function), it's better to stay on the side of caution, since 44181 // this function may be called from un-typed environments. 44182 return Array.isArray(availableUnits) ? availableUnits.filter(unit => allowedUnitValues.includes(unit.value)) : []; 44183} 44184 44185/** 44186 * Custom hook to retrieve and consolidate units setting from add_theme_support(). 44187 * TODO: ideally this hook shouldn't be needed 44188 * https://github.com/WordPress/gutenberg/pull/31822#discussion_r633280823 44189 *
44190 * @param args An object containing units, settingPath & defaultUnits. 44191 * @param args.units Collection of all potentially available units. 44192 * @param args.availableUnits Collection of unit value strings for filtering available units. 44193 * @param args.defaultValues Collection of default values for defined units. Example: `{ px: 350, em: 15 }`. 44194 * 44195 * @return Filtered list of units, with their default values updated following the `defaultValues` 44196 * argument's property. 44197 */ 44198const useCustomUnits = ({ 44199 units = ALL_CSS_UNITS, 44200 availableUnits = [], 44201 defaultValues 44202}) => { 44203 const customUnitsToReturn = filterUnitsWithSettings(availableUnits, units); 44204 if (defaultValues) { 44205 customUnitsToReturn.forEach((unit, i) => { 44206 if (defaultValues[unit.value]) { 44207 const [parsedDefaultValue] = parseQuantityAndUnitFromRawValue(defaultValues[unit.value]); 44208 customUnitsToReturn[i].default = parsedDefaultValue; 44209 } 44210 }); 44211 } 44212 return customUnitsToReturn; 44213}; 44214 44215/** 44216 * Get available units with the unit for the currently selected value 44217 * prepended if it is not available in the list of units. 44218 * 44219 * This is useful to ensure that the current value's unit is always 44220 * accurately displayed in the UI, even if the intention is to hide 44221 * the availability of that unit. 44222 * 44223 * @param rawValue Selected value to parse. 44224 * @param legacyUnit Legacy unit value, if rawValue needs it appended. 44225 * @param units List of available units. 44226 * 44227 * @return A collection of units containing the unit for the current value. 44228 */ 44229function getUnitsWithCurrentUnit(rawValue, legacyUnit, units = ALL_CSS_UNITS) { 44230 const unitsToReturn = Array.isArray(units) ? [...units] : []; 44231 const [, currentUnit] = getParsedQuantityAndUnit(rawValue, legacyUnit, ALL_CSS_UNITS); 44232 if (currentUnit && !unitsToReturn.some(unit => unit.value === currentUnit)) { 44233 if (allUnits[currentUnit]) { 44234 unitsToReturn.unshift(allUnits[currentUnit]); 44235 } 44236 } 44237 return unitsToReturn; 44238} 44239 44240;// CONCATENATED MODULE: ./packages/components/build-module/border-control/border-control-dropdown/hook.js 44241/** 44242 * WordPress dependencies 44243 */ 44244 44245 44246/** 44247 * Internal dependencies 44248 */ 44249 44250 44251 44252 44253function useBorderControlDropdown(props) { 44254 const { 44255 border, 44256 className, 44257 colors = [], 44258 enableAlpha = false, 44259 enableStyle = true, 44260 onChange, 44261 previousStyleSelection, 44262 size = 'default', 44263 __experimentalIsRenderedInSidebar = false, 44264 ...otherProps 44265 } = useContextSystem(props, 'BorderControlDropdown'); 44266 const [widthValue] = parseQuantityAndUnitFromRawValue(border?.width); 44267 const hasZeroWidth = widthValue === 0; 44268 const onColorChange = color => { 44269 const style = border?.style === 'none' ? previousStyleSelection : border?.style; 44270 const width = hasZeroWidth && !!color ? '1px' : border?.width; 44271 onChange({ 44272 color, 44273 style, 44274 width 44275 }); 44276 }; 44277 const onStyleChange = style => { 44278 const width = hasZeroWidth && !!style ? '1px' : border?.width; 44279 onChange({ 44280 ...border, 44281 style, 44282 width 44283 }); 44284 }; 44285 const onReset = () => { 44286 onChange({ 44287 ...border, 44288 color: undefined, 44289 style: undefined 44290 }); 44291 }; 44292 44293 // Generate class names. 44294 const cx = useCx(); 44295 const classes = (0,external_wp_element_namespaceObject.useMemo)(() => { 44296 return cx(borderControlDropdown(size), className); 44297 }, [className, cx, size]); 44298 const indicatorClassName = (0,external_wp_element_namespaceObject.useMemo)(() => { 44299 return cx(borderColorIndicator); 44300 }, [cx]); 44301 const indicatorWrapperClassName = (0,external_wp_element_namespaceObject.useMemo)(() => { 44302 return cx(colorIndicatorWrapper(border, size)); 44303 }, [border, cx, size]); 44304 const popoverControlsClassName = (0,external_wp_element_namespaceObject.useMemo)(() => { 44305 return cx(borderControlPopoverControls); 44306 }, [cx]); 44307 const popoverContentClassName = (0,external_wp_element_namespaceObject.useMemo)(() => { 44308 return cx(borderControlPopoverContent); 44309 }, [cx]); 44310 const resetButtonClassName = (0,external_wp_element_namespaceObject.useMemo)(() => { 44311 return cx(resetButton); 44312 }, [cx]); 44313 return { 44314 ...otherProps, 44315 border, 44316 className: classes, 44317 colors,
44318 enableAlpha, 44319 enableStyle, 44320 indicatorClassName, 44321 indicatorWrapperClassName, 44322 onColorChange, 44323 onStyleChange, 44324 onReset, 44325 popoverContentClassName, 44326 popoverControlsClassName, 44327 resetButtonClassName, 44328 __experimentalIsRenderedInSidebar 44329 }; 44330} 44331 44332;// CONCATENATED MODULE: ./packages/components/build-module/border-control/border-control-dropdown/component.js 44333 44334/** 44335 * External dependencies 44336 */ 44337 44338/** 44339 * WordPress dependencies 44340 */ 44341 44342 44343 44344/** 44345 * Internal dependencies 44346 */ 44347 44348 44349 44350 44351 44352 44353 44354 44355 44356 44357 44358 44359const getAriaLabelColorValue = colorValue => { 44360 // Leave hex values as-is. Remove the `var()` wrapper from CSS vars. 44361 return colorValue.replace(/^var\((.+)\)$/, '$1'); 44362}; 44363const getColorObject = (colorValue, colors) => { 44364 if (!colorValue || !colors) { 44365 return; 44366 } 44367 if (isMultiplePaletteArray(colors)) { 44368 // Multiple origins 44369 let matchedColor; 44370 colors.some(origin => origin.colors.some(color => { 44371 if (color.color === colorValue) { 44372 matchedColor = color; 44373 return true; 44374 } 44375 return false; 44376 })); 44377 return matchedColor; 44378 } 44379 44380 // Single origin 44381 return colors.find(color => color.color === colorValue); 44382}; 44383const getToggleAriaLabel = (colorValue, colorObject, style, isStyleEnabled) => { 44384 if (isStyleEnabled) { 44385 if (colorObject) { 44386 const ariaLabelValue = getAriaLabelColorValue(colorObject.color); 44387 return style ? (0,external_wp_i18n_namespaceObject.sprintf)( 44388 // 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". 44389 '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, ariaLabelValue, style) : (0,external_wp_i18n_namespaceObject.sprintf)( 44390 // translators: %1$s: The name of the color e.g. "vivid red". %2$s: The color's hex code e.g.: "#f00:". 44391 'Border color and style picker. The currently selected color is called "%1$s" and has a value of "%2$s".', colorObject.name, ariaLabelValue); 44392 } 44393 if (colorValue) { 44394 const ariaLabelValue = getAriaLabelColorValue(colorValue); 44395 return style ? (0,external_wp_i18n_namespaceObject.sprintf)( 44396 // translators: %1$s: The color's hex code e.g.: "#f00:". %2$s: The current border style selection e.g. "solid". 44397 'Border color and style picker. The currently selected color has a value of "%1$s". The currently selected style is "%2$s".', ariaLabelValue, style) : (0,external_wp_i18n_namespaceObject.sprintf)( 44398 // translators: %1$s: The color's hex code e.g: "#f00". 44399 'Border color and style picker. The currently selected color has a value of "%1$s".', ariaLabelValue); 44400 } 44401 return (0,external_wp_i18n_namespaceObject.__)('Border color and style picker.'); 44402 } 44403 if (colorObject) { 44404 return (0,external_wp_i18n_namespaceObject.sprintf)( 44405 // translators: %1$s: The name of the color e.g. "vivid red". %2$s: The color's hex code e.g: "#f00". 44406 'Border color picker. The currently selected color is called "%1$s" and has a value of "%2$s".', colorObject.name, getAriaLabelColorValue(colorObject.color)); 44407 } 44408 if (colorValue) { 44409 return (0,external_wp_i18n_namespaceObject.sprintf)( 44410 // translators: %1$s: The color's hex code e.g: "#f00". 44411 'Border color picker. The currently selected color has a value of "%1$s".', getAriaLabelColorValue(colorValue)); 44412 } 44413 return (0,external_wp_i18n_namespaceObject.__)('Border color picker.'); 44414}; 44415const BorderControlDropdown = (props, forwardedRef) => { 44416 const { 44417 __experimentalIsRenderedInSidebar, 44418 border, 44419 colors, 44420 disableCustomColors, 44421 enableAlpha, 44422 enableStyle, 44423 indicatorClassName, 44424 indicatorWrapperClassName, 44425 onReset, 44426 onColorChange, 44427 onStyleChange, 44428 popoverContentClassName, 44429 popoverControlsClassName, 44430 resetButtonClassName, 44431 showDropdownHeader, 44432 __unstablePopoverProps, 44433 ...otherProps 44434 } = useBorderControlDropdown(props); 44435 const { 44436 color, 44437 style 44438 } = border || {}; 44439 const colorObject = getColorObject(color, colors); 44440 const toggleAriaLabel = getToggleAriaLabel(color, colorObject, style, enableStyle); 44441 const showResetButton = color || style && style !== 'none'; 44442 const dropdownPosition = __experimentalIsRenderedInSidebar ? 'bottom left' : undefined; 44443 const renderToggle = ({ 44444 onToggle 44445 }) => (0,external_wp_element_namespaceObject.createElement)(build_module_button, { 44446 onClick: onToggle, 44447 variant: "tertiary", 44448 "aria-label": toggleAriaLabel, 44449 tooltipPosition: dropdownPosition, 44450 label: (0,external_wp_i18n_namespaceObject.__)('Border color and style picker'), 44451 showTooltip: true 44452 }, (0,external_wp_element_namespaceObject.createElement)("span", { 44453 className: indicatorWrapperClassName 44454 }, (0,external_wp_element_namespaceObject.createElement)(color_indicator, { 44455 className: indicatorClassName, 44456 colorValue: color 44457 }))); 44458 const renderContent = ({ 44459 onClose 44460 }) => (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, (0,external_wp_element_namespaceObject.createElement)(dropdown_content_wrapper, { 44461 paddingSize: "medium" 44462 }, (0,external_wp_element_namespaceObject.createElement)(v_stack_component, { 44463 className: popoverControlsClassName, 44464 spacing: 6 44465 }, 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, { 44466 isSmall: true, 44467 label: (0,external_wp_i18n_namespaceObject.__)('Close border color'), 44468 icon: close_small, 44469 onClick: onClose 44470 })) : undefined, (0,external_wp_element_namespaceObject.createElement)(color_palette, { 44471 className: popoverContentClassName, 44472 value: color, 44473 onChange: onColorChange, 44474 colors, 44475 disableCustomColors, 44476 __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar, 44477 clearable: false,
44478 enableAlpha: enableAlpha 44479 }), enableStyle && (0,external_wp_element_namespaceObject.createElement)(border_control_style_picker_component, { 44480 label: (0,external_wp_i18n_namespaceObject.__)('Style'), 44481 value: style, 44482 onChange: onStyleChange 44483 }))), showResetButton && (0,external_wp_element_namespaceObject.createElement)(dropdown_content_wrapper, { 44484 paddingSize: "none" 44485 }, (0,external_wp_element_namespaceObject.createElement)(build_module_button, { 44486 className: resetButtonClassName, 44487 variant: "tertiary", 44488 onClick: () => { 44489 onReset(); 44490 onClose(); 44491 } 44492 }, (0,external_wp_i18n_namespaceObject.__)('Reset')))); 44493 return (0,external_wp_element_namespaceObject.createElement)(dropdown, { 44494 renderToggle: renderToggle, 44495 renderContent: renderContent, 44496 popoverProps: { 44497 ...__unstablePopoverProps 44498 }, 44499 ...otherProps, 44500 ref: forwardedRef 44501 }); 44502}; 44503const ConnectedBorderControlDropdown = contextConnect(BorderControlDropdown, 'BorderControlDropdown'); 44504/* harmony default export */ const border_control_dropdown_component = (ConnectedBorderControlDropdown); 44505 44506;// CONCATENATED MODULE: ./packages/components/build-module/unit-control/unit-select-control.js 44507 44508/** 44509 * External dependencies 44510 */ 44511 44512/** 44513 * WordPress dependencies 44514 */ 44515 44516 44517/** 44518 * Internal dependencies 44519 */ 44520 44521 44522 44523function UnitSelectControl({ 44524 className, 44525 isUnitSelectTabbable: isTabbable = true, 44526 onChange, 44527 size = 'default', 44528 unit = 'px', 44529 units = CSS_UNITS, 44530 ...props 44531}, ref) { 44532 if (!hasUnits(units) || units?.length === 1) { 44533 return (0,external_wp_element_namespaceObject.createElement)(UnitLabel, { 44534 className: "components-unit-control__unit-label", 44535 selectSize: size 44536 }, unit); 44537 } 44538 const handleOnChange = event => { 44539 const { 44540 value: unitValue 44541 } = event.target; 44542 const data = units.find(option => option.value === unitValue); 44543 onChange?.(unitValue, { 44544 event, 44545 data 44546 }); 44547 }; 44548 const classes = classnames_default()('components-unit-control__select', className); 44549 return (0,external_wp_element_namespaceObject.createElement)(UnitSelect, { 44550 ref: ref, 44551 className: classes, 44552 onChange: handleOnChange, 44553 selectSize: size, 44554 tabIndex: isTabbable ? undefined : -1, 44555 value: unit, 44556 ...props 44557 }, units.map(option => (0,external_wp_element_namespaceObject.createElement)("option", { 44558 value: option.value, 44559 key: option.value 44560 }, option.label))); 44561} 44562/* harmony default export */ const unit_select_control = ((0,external_wp_element_namespaceObject.forwardRef)(UnitSelectControl)); 44563 44564;// CONCATENATED MODULE: ./packages/components/build-module/unit-control/index.js 44565 44566/** 44567 * External dependencies 44568 */ 44569 44570 44571 44572/** 44573 * WordPress dependencies 44574 */ 44575 44576 44577 44578 44579/** 44580 * Internal dependencies 44581 */ 44582 44583 44584 44585 44586 44587 44588function UnforwardedUnitControl(unitControlProps, forwardedRef) { 44589 const { 44590 __unstableStateReducer, 44591 autoComplete = 'off', 44592 // @ts-expect-error Ensure that children is omitted from restProps 44593 children, 44594 className, 44595 disabled = false, 44596 disableUnits = false, 44597 isPressEnterToChange = false, 44598 isResetValueOnUnitChange = false, 44599 isUnitSelectTabbable = true, 44600 label, 44601 onChange: onChangeProp, 44602 onUnitChange, 44603 size = 'default', 44604 unit: unitProp, 44605 units: unitsProp = CSS_UNITS, 44606 value: valueProp, 44607 onFocus: onFocusProp, 44608 ...props 44609 } = unitControlProps; 44610 if ('unit' in unitControlProps) { 44611 external_wp_deprecated_default()('UnitControl unit prop', { 44612 since: '5.6', 44613 hint: 'The unit should be provided within the `value` prop.', 44614 version: '6.2' 44615 }); 44616 } 44617 44618 // The `value` prop, in theory, should not be `null`, but the following line 44619 // ensures it fallback to `undefined` in case a consumer of `UnitControl` 44620 // still passes `null` as a `value`. 44621 const nonNullValueProp = valueProp !== null && valueProp !== void 0 ? valueProp : undefined; 44622 const [units, reFirstCharacterOfUnits] = (0,external_wp_element_namespaceObject.useMemo)(() => { 44623 const list = getUnitsWithCurrentUnit(nonNullValueProp, unitProp, unitsProp); 44624 const [{ 44625 value: firstUnitValue = '' 44626 } = {}, ...rest] = list; 44627 const firstCharacters = rest.reduce((carry, { 44628 value 44629 }) => { 44630 const first = escapeRegExp(value?.substring(0, 1) || ''); 44631 return carry.includes(first) ? carry : `${carry}|${first}`; 44632 }, escapeRegExp(firstUnitValue.substring(0, 1))); 44633 return [list, new RegExp(`^(?:${firstCharacters})$`, 'i')]; 44634 }, [nonNullValueProp, unitProp, unitsProp]); 44635 const [parsedQuantity, parsedUnit] = getParsedQuantityAndUnit(nonNullValueProp, unitProp, units); 44636 const [unit, setUnit] = use_controlled_state(units.length === 1 ? units[0].value : unitProp, { 44637 initial: parsedUnit, 44638 fallback: '' 44639 }); 44640 (0,external_wp_element_namespaceObject.useEffect)(() => { 44641 if (parsedUnit !== undefined) { 44642 setUnit(parsedUnit); 44643 } 44644 }, [parsedUnit, setUnit]); 44645 const classes = classnames_default()('components-unit-control', 44646 // This class is added for legacy purposes to maintain it on the outer 44647 // wrapper. See: https://github.com/WordPress/gutenberg/pull/45139 44648 'components-unit-control-wrapper', className); 44649 const handleOnQuantityChange = (nextQuantityValue, changeProps) => { 44650 if (nextQuantityValue === '' || typeof nextQuantityValue === 'undefined' || nextQuantityValue === null) { 44651 onChangeProp?.('', changeProps); 44652 return; 44653 } 44654 44655 /*
44656 * Customizing the onChange callback. 44657 * This allows as to broadcast a combined value+unit to onChange. 44658 */ 44659 const onChangeValue = getValidParsedQuantityAndUnit(nextQuantityValue, units, parsedQuantity, unit).join(''); 44660 onChangeProp?.(onChangeValue, changeProps); 44661 }; 44662 const handleOnUnitChange = (nextUnitValue, changeProps) => { 44663 const { 44664 data 44665 } = changeProps; 44666 let nextValue = `${parsedQuantity !== null && parsedQuantity !== void 0 ? parsedQuantity : ''}${nextUnitValue}`; 44667 if (isResetValueOnUnitChange && data?.default !== undefined) { 44668 nextValue = `${data.default}${nextUnitValue}`; 44669 } 44670 onChangeProp?.(nextValue, changeProps); 44671 onUnitChange?.(nextUnitValue, changeProps); 44672 setUnit(nextUnitValue); 44673 }; 44674 let handleOnKeyDown; 44675 if (!disableUnits && isUnitSelectTabbable && units.length) { 44676 handleOnKeyDown = event => { 44677 props.onKeyDown?.(event); 44678 // Unless the meta key was pressed (to avoid interfering with 44679 // shortcuts, e.g. pastes), moves focus to the unit select if a key 44680 // matches the first character of a unit. 44681 if (!event.metaKey && reFirstCharacterOfUnits.test(event.key)) refInputSuffix.current?.focus(); 44682 }; 44683 } 44684 const refInputSuffix = (0,external_wp_element_namespaceObject.useRef)(null); 44685 const inputSuffix = !disableUnits ? (0,external_wp_element_namespaceObject.createElement)(unit_select_control, { 44686 ref: refInputSuffix, 44687 "aria-label": (0,external_wp_i18n_namespaceObject.__)('Select unit'), 44688 disabled: disabled, 44689 isUnitSelectTabbable: isUnitSelectTabbable, 44690 onChange: handleOnUnitChange, 44691 size: size, 44692 unit: unit, 44693 units: units, 44694 onFocus: onFocusProp, 44695 onBlur: unitControlProps.onBlur 44696 }) : null; 44697 let step = props.step; 44698 44699 /* 44700 * If no step prop has been passed, lookup the active unit and 44701 * try to get step from `units`, or default to a value of `1` 44702 */ 44703 if (!step && units) { 44704 var _activeUnit$step; 44705 const activeUnit = units.find(option => option.value === unit); 44706 step = (_activeUnit$step = activeUnit?.step) !== null && _activeUnit$step !== void 0 ? _activeUnit$step : 1; 44707 } 44708 return (0,external_wp_element_namespaceObject.createElement)(ValueInput, { 44709 ...props, 44710 autoComplete: autoComplete, 44711 className: classes, 44712 disabled: disabled, 44713 spinControls: "none", 44714 isPressEnterToChange: isPressEnterToChange, 44715 label: label, 44716 onKeyDown: handleOnKeyDown, 44717 onChange: handleOnQuantityChange, 44718 ref: forwardedRef, 44719 size: size, 44720 suffix: inputSuffix, 44721 type: isPressEnterToChange ? 'text' : 'number', 44722 value: parsedQuantity !== null && parsedQuantity !== void 0 ? parsedQuantity : '', 44723 step: step, 44724 onFocus: onFocusProp, 44725 __unstableStateReducer: __unstableStateReducer 44726 }); 44727} 44728 44729/** 44730 * `UnitControl` allows the user to set a numeric quantity as well as a unit (e.g. `px`). 44731 * 44732 * 44733 * ```jsx 44734 * import { __experimentalUnitControl as UnitControl } from '@wordpress/components'; 44735 * import { useState } from '@wordpress/element'; 44736 * 44737 * const Example = () => { 44738 * const [ value, setValue ] = useState( '10px' ); 44739 * 44740 * return <UnitControl onChange={ setValue } value={ value } />; 44741 * }; 44742 * ``` 44743 */ 44744const UnitControl = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedUnitControl); 44745 44746/* harmony default export */ const unit_control = (UnitControl); 44747 44748;// CONCATENATED MODULE: ./packages/components/build-module/border-control/border-control/hook.js 44749/** 44750 * WordPress dependencies 44751 */ 44752 44753 44754/** 44755 * Internal dependencies 44756 */ 44757 44758 44759 44760 44761const sanitizeBorder = border => { 44762 const hasNoWidth = border?.width === undefined || border.width === ''; 44763 const hasNoColor = border?.color === undefined; 44764 44765 // If width and color are undefined, unset any style selection as well. 44766 if (hasNoWidth && hasNoColor) { 44767 return undefined; 44768 } 44769 return border; 44770}; 44771function useBorderControl(props) { 44772 const { 44773 className, 44774 colors = [], 44775 isCompact, 44776 onChange, 44777 enableAlpha = true, 44778 enableStyle = true, 44779 shouldSanitizeBorder = true, 44780 size = 'default', 44781 value: border, 44782 width, 44783 __experimentalIsRenderedInSidebar = false, 44784 ...otherProps 44785 } = useContextSystem(props, 'BorderControl'); 44786 const [widthValue, originalWidthUnit] = parseQuantityAndUnitFromRawValue(border?.width); 44787 const widthUnit = originalWidthUnit || 'px'; 44788 const hadPreviousZeroWidth = widthValue === 0; 44789 const [colorSelection, setColorSelection] = (0,external_wp_element_namespaceObject.useState)(); 44790 const [styleSelection, setStyleSelection] = (0,external_wp_element_namespaceObject.useState)(); 44791 const onBorderChange = (0,external_wp_element_namespaceObject.useCallback)(newBorder => { 44792 if (shouldSanitizeBorder) { 44793 return onChange(sanitizeBorder(newBorder)); 44794 } 44795 onChange(newBorder); 44796 }, [onChange, shouldSanitizeBorder]); 44797 const onWidthChange = (0,external_wp_element_namespaceObject.useCallback)(newWidth => { 44798 const newWidthValue = newWidth === '' ? undefined : newWidth; 44799 const [parsedValue] = parseQuantityAndUnitFromRawValue(newWidth); 44800 const hasZeroWidth = parsedValue === 0; 44801 const updatedBorder = { 44802 ...border, 44803 width: newWidthValue 44804 }; 44805 44806 // Setting the border width explicitly to zero will also set the 44807 // border style to `none` and clear the border color. 44808 if (hasZeroWidth && !hadPreviousZeroWidth) { 44809 // Before clearing the color and style selections, keep track of 44810 // the current selections so they can be restored when the width 44811 // changes to a non-zero value. 44812 setColorSelection(border?.color); 44813 setStyleSelection(border?.style); 44814 44815 // Clear the color and style border properties. 44816 updatedBorder.color = undefined; 44817 updatedBorder.style = 'none'; 44818 } 44819 44820 // Selection has changed from zero border width to non-zero width. 44821 if (!hasZeroWidth && hadPreviousZeroWidth) { 44822 // Restore previous border color and style selections if width 44823 // is now not zero. 44824 if (updatedBorder.color === undefined) { 44825 updatedBorder.color = colorSelection; 44826 } 44827 if (updatedBorder.style === 'none') { 44828 updatedBorder.style = styleSelection; 44829 } 44830 } 44831 onBorderChange(updatedBorder); 44832 }, [border, hadPreviousZeroWidth, colorSelection, styleSelection, onBorderChange]); 44833 const onSliderChange = (0,external_wp_element_namespaceObject.useCallback)(value => { 44834 onWidthChange(`${value}${widthUnit}`); 44835 }, [onWidthChange, widthUnit]); 44836 44837 // Generate class names. 44838 const cx = useCx(); 44839 const classes = (0,external_wp_element_namespaceObject.useMemo)(() => { 44840 return cx(borderControl, className); 44841 }, [className, cx]);
44842 let wrapperWidth = width; 44843 if (isCompact) { 44844 // Widths below represent the minimum usable width for compact controls. 44845 // Taller controls contain greater internal padding, thus greater width. 44846 wrapperWidth = size === '__unstable-large' ? '116px' : '90px'; 44847 } 44848 const innerWrapperClassName = (0,external_wp_element_namespaceObject.useMemo)(() => { 44849 const widthStyle = !!wrapperWidth && styles_wrapperWidth; 44850 const heightStyle = wrapperHeight(size); 44851 return cx(innerWrapper(), widthStyle, heightStyle); 44852 }, [wrapperWidth, cx, size]); 44853 const sliderClassName = (0,external_wp_element_namespaceObject.useMemo)(() => { 44854 return cx(borderSlider()); 44855 }, [cx]); 44856 return { 44857 ...otherProps, 44858 className: classes, 44859 colors, 44860 enableAlpha, 44861 enableStyle, 44862 innerWrapperClassName, 44863 inputWidth: wrapperWidth, 44864 onBorderChange, 44865 onSliderChange, 44866 onWidthChange, 44867 previousStyleSelection: styleSelection, 44868 sliderClassName, 44869 value: border, 44870 widthUnit, 44871 widthValue, 44872 size, 44873 __experimentalIsRenderedInSidebar 44874 }; 44875} 44876 44877;// CONCATENATED MODULE: ./packages/components/build-module/border-control/border-control/component.js 44878 44879/** 44880 * WordPress dependencies 44881 */ 44882 44883 44884/** 44885 * Internal dependencies 44886 */ 44887 44888 44889 44890 44891 44892 44893 44894 44895 44896const BorderLabel = props => { 44897 const { 44898 label, 44899 hideLabelFromVision 44900 } = props; 44901 if (!label) { 44902 return null; 44903 } 44904 return hideLabelFromVision ? (0,external_wp_element_namespaceObject.createElement)(visually_hidden_component, { 44905 as: "legend" 44906 }, label) : (0,external_wp_element_namespaceObject.createElement)(StyledLabel, { 44907 as: "legend" 44908 }, label); 44909}; 44910const UnconnectedBorderControl = (props, forwardedRef) => { 44911 const { 44912 colors, 44913 disableCustomColors, 44914 disableUnits, 44915 enableAlpha, 44916 enableStyle, 44917 hideLabelFromVision, 44918 innerWrapperClassName, 44919 inputWidth, 44920 label, 44921 onBorderChange, 44922 onSliderChange, 44923 onWidthChange, 44924 placeholder, 44925 __unstablePopoverProps, 44926 previousStyleSelection, 44927 showDropdownHeader, 44928 size, 44929 sliderClassName, 44930 value: border, 44931 widthUnit, 44932 widthValue, 44933 withSlider, 44934 __experimentalIsRenderedInSidebar, 44935 ...otherProps 44936 } = useBorderControl(props); 44937 return (0,external_wp_element_namespaceObject.createElement)(component, { 44938 as: "fieldset", 44939 ...otherProps, 44940 ref: forwardedRef 44941 }, (0,external_wp_element_namespaceObject.createElement)(BorderLabel, { 44942 label: label, 44943 hideLabelFromVision: hideLabelFromVision 44944 }), (0,external_wp_element_namespaceObject.createElement)(h_stack_component, { 44945 spacing: 4, 44946 className: innerWrapperClassName 44947 }, (0,external_wp_element_namespaceObject.createElement)(unit_control, { 44948 prefix: (0,external_wp_element_namespaceObject.createElement)(border_control_dropdown_component, { 44949 border: border, 44950 colors: colors, 44951 __unstablePopoverProps: __unstablePopoverProps, 44952 disableCustomColors: disableCustomColors, 44953 enableAlpha: enableAlpha, 44954 enableStyle: enableStyle, 44955 onChange: onBorderChange, 44956 previousStyleSelection: previousStyleSelection, 44957 showDropdownHeader: showDropdownHeader, 44958 __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar, 44959 size: size 44960 }), 44961 label: (0,external_wp_i18n_namespaceObject.__)('Border width'), 44962 hideLabelFromVision: true, 44963 min: 0, 44964 onChange: onWidthChange, 44965 value: border?.width || '', 44966 placeholder: placeholder, 44967 disableUnits: disableUnits, 44968 __unstableInputWidth: inputWidth, 44969 size: size 44970 }), withSlider && (0,external_wp_element_namespaceObject.createElement)(range_control, { 44971 __nextHasNoMarginBottom: true, 44972 label: (0,external_wp_i18n_namespaceObject.__)('Border width'), 44973 hideLabelFromVision: true, 44974 className: sliderClassName, 44975 initialPosition: 0, 44976 max: 100, 44977 min: 0, 44978 onChange: onSliderChange, 44979 step: ['px', '%'].includes(widthUnit) ? 1 : 0.1, 44980 value: widthValue || undefined, 44981 withInputField: false 44982 }))); 44983}; 44984 44985/** 44986 * The `BorderControl` brings together internal sub-components which allow users to 44987 * set the various properties of a border. The first sub-component, a 44988 * `BorderDropdown` contains options representing border color and style. The 44989 * border width is controlled via a `UnitControl` and an optional `RangeControl`. 44990 * 44991 * Border radius is not covered by this control as it may be desired separate to 44992 * color, style, and width. For example, the border radius may be absorbed under
44993 * a "shape" abstraction. 44994 * 44995 * ```jsx 44996 * import { __experimentalBorderControl as BorderControl } from '@wordpress/components'; 44997 * import { __ } from '@wordpress/i18n'; 44998 * 44999 * const colors = [ 45000 * { name: 'Blue 20', color: '#72aee6' }, 45001 * // ... 45002 * ]; 45003 * 45004 * const MyBorderControl = () => { 45005 * const [ border, setBorder ] = useState(); 45006 * const onChange = ( newBorder ) => setBorder( newBorder ); 45007 * 45008 * return ( 45009 * <BorderControl 45010 * colors={ colors } 45011 * label={ __( 'Border' ) } 45012 * onChange={ onChange } 45013 * value={ border } 45014 * /> 45015 * ); 45016 * }; 45017 * ``` 45018 */ 45019const BorderControl = contextConnect(UnconnectedBorderControl, 'BorderControl'); 45020/* harmony default export */ const border_control_component = (BorderControl); 45021 45022;// CONCATENATED MODULE: ./packages/components/build-module/grid/utils.js 45023/** 45024 * External dependencies 45025 */ 45026 45027const utils_ALIGNMENTS = { 45028 bottom: { 45029 alignItems: 'flex-end', 45030 justifyContent: 'center' 45031 }, 45032 bottomLeft: { 45033 alignItems: 'flex-start', 45034 justifyContent: 'flex-end' 45035 }, 45036 bottomRight: { 45037 alignItems: 'flex-end', 45038 justifyContent: 'flex-end' 45039 }, 45040 center: { 45041 alignItems: 'center', 45042 justifyContent: 'center' 45043 }, 45044 spaced: { 45045 alignItems: 'center', 45046 justifyContent: 'space-between' 45047 }, 45048 left: { 45049 alignItems: 'center', 45050 justifyContent: 'flex-start' 45051 }, 45052 right: { 45053 alignItems: 'center', 45054 justifyContent: 'flex-end' 45055 }, 45056 stretch: { 45057 alignItems: 'stretch' 45058 }, 45059 top: { 45060 alignItems: 'flex-start', 45061 justifyContent: 'center' 45062 }, 45063 topLeft: { 45064 alignItems: 'flex-start', 45065 justifyContent: 'flex-start' 45066 }, 45067 topRight: { 45068 alignItems: 'flex-start', 45069 justifyContent: 'flex-end' 45070 } 45071}; 45072function utils_getAlignmentProps(alignment) { 45073 const alignmentProps = alignment ? utils_ALIGNMENTS[alignment] : {}; 45074 return alignmentProps; 45075} 45076 45077;// CONCATENATED MODULE: ./packages/components/build-module/grid/hook.js 45078/** 45079 * External dependencies 45080 */ 45081 45082 45083/** 45084 * WordPress dependencies 45085 */ 45086 45087 45088/** 45089 * Internal dependencies 45090 */ 45091 45092 45093 45094 45095 45096 45097function useGrid(props) { 45098 const { 45099 align, 45100 alignment, 45101 className, 45102 columnGap, 45103 columns = 2, 45104 gap = 3, 45105 isInline = false, 45106 justify, 45107 rowGap, 45108 rows, 45109 templateColumns, 45110 templateRows, 45111 ...otherProps 45112 } = useContextSystem(props, 'Grid'); 45113 const columnsAsArray = Array.isArray(columns) ? columns : [columns]; 45114 const column = useResponsiveValue(columnsAsArray); 45115 const rowsAsArray = Array.isArray(rows) ? rows : [rows]; 45116 const row = useResponsiveValue(rowsAsArray); 45117 const gridTemplateColumns = templateColumns || !!columns && `repeat( ${column}, 1fr )`; 45118 const gridTemplateRows = templateRows || !!rows && `repeat( ${row}, 1fr )`; 45119 const cx = useCx(); 45120 const classes = (0,external_wp_element_namespaceObject.useMemo)(() => { 45121 const alignmentProps = utils_getAlignmentProps(alignment); 45122 const gridClasses = /*#__PURE__*/emotion_react_browser_esm_css({ 45123 alignItems: align, 45124 display: isInline ? 'inline-grid' : 'grid', 45125 gap: `calc( ${config_values.gridBase} * ${gap} )`, 45126 gridTemplateColumns: gridTemplateColumns || undefined, 45127 gridTemplateRows: gridTemplateRows || undefined, 45128 gridRowGap: rowGap, 45129 gridColumnGap: columnGap, 45130 justifyContent: justify, 45131 verticalAlign: isInline ? 'middle' : undefined, 45132 ...alignmentProps 45133 }, true ? "" : 0, true ? "" : 0); 45134 return cx(gridClasses, className); 45135 }, [align, alignment, className, columnGap, cx, gap, gridTemplateColumns, gridTemplateRows, isInline, justify, rowGap]); 45136 return { 45137 ...otherProps, 45138 className: classes 45139 }; 45140} 45141 45142;// CONCATENATED MODULE: ./packages/components/build-module/grid/component.js 45143 45144/** 45145 * External dependencies 45146 */ 45147 45148/** 45149 * Internal dependencies 45150 */ 45151 45152 45153 45154 45155function UnconnectedGrid(props, forwardedRef) { 45156 const gridProps = useGrid(props); 45157 return (0,external_wp_element_namespaceObject.createElement)(component, { 45158 ...gridProps, 45159 ref: forwardedRef 45160 }); 45161} 45162 45163/** 45164 * `Grid` is a primitive layout component that can arrange content in a grid configuration. 45165 * 45166 * ```jsx 45167 * import { 45168 * __experimentalGrid as Grid, 45169 * __experimentalText as Text 45170 * } from `@wordpress/components`; 45171 * 45172 * function Example() { 45173 * return ( 45174 * <Grid columns={ 3 }> 45175 * <Text>Code</Text> 45176 * <Text>is</Text> 45177 * <Text>Poetry</Text> 45178 * </Grid> 45179 * ); 45180 * } 45181 * ``` 45182 */ 45183const Grid = contextConnect(UnconnectedGrid, 'Grid'); 45184/* harmony default export */ const grid_component = (Grid); 45185 45186;// CONCATENATED MODULE: ./packages/components/build-module/border-box-control/border-box-control-split-control
45186s/hook.js 45187/** 45188 * WordPress dependencies 45189 */ 45190 45191 45192/** 45193 * Internal dependencies 45194 */ 45195 45196 45197 45198function useBorderBoxControlSplitControls(props) { 45199 const { 45200 className, 45201 colors = [], 45202 enableAlpha = false, 45203 enableStyle = true, 45204 size = 'default', 45205 __experimentalIsRenderedInSidebar = false, 45206 ...otherProps 45207 } = useContextSystem(props, 'BorderBoxControlSplitControls'); 45208 45209 // Generate class names. 45210 const cx = useCx(); 45211 const classes = (0,external_wp_element_namespaceObject.useMemo)(() => { 45212 return cx(borderBoxControlSplitControls(size), className); 45213 }, [cx, className, size]); 45214 const centeredClassName = (0,external_wp_element_namespaceObject.useMemo)(() => { 45215 return cx(centeredBorderControl, className); 45216 }, [cx, className]); 45217 const rightAlignedClassName = (0,external_wp_element_namespaceObject.useMemo)(() => { 45218 return cx(rightBorderControl(), className); 45219 }, [cx, className]); 45220 return { 45221 ...otherProps, 45222 centeredClassName, 45223 className: classes, 45224 colors, 45225 enableAlpha, 45226 enableStyle, 45227 rightAlignedClassName, 45228 size, 45229 __experimentalIsRenderedInSidebar 45230 }; 45231} 45232 45233;// CONCATENATED MODULE: ./packages/components/build-module/border-box-control/border-box-control-split-controls/component.js 45234 45235/** 45236 * WordPress dependencies 45237 */ 45238 45239 45240 45241 45242/** 45243 * Internal dependencies 45244 */ 45245 45246 45247 45248 45249 45250const BorderBoxControlSplitControls = (props, forwardedRef) => { 45251 const { 45252 centeredClassName, 45253 colors, 45254 disableCustomColors, 45255 enableAlpha, 45256 enableStyle, 45257 onChange, 45258 popoverPlacement, 45259 popoverOffset, 45260 rightAlignedClassName, 45261 size = 'default', 45262 value, 45263 __experimentalIsRenderedInSidebar, 45264 ...otherProps 45265 } = useBorderBoxControlSplitControls(props); 45266 45267 // Use internal state instead of a ref to make sure that the component 45268 // re-renders when the popover's anchor updates. 45269 const [popoverAnchor, setPopoverAnchor] = (0,external_wp_element_namespaceObject.useState)(null); 45270 45271 // Memoize popoverProps to avoid returning a new object every time. 45272 const popoverProps = (0,external_wp_element_namespaceObject.useMemo)(() => popoverPlacement ? { 45273 placement: popoverPlacement, 45274 offset: popoverOffset, 45275 anchor: popoverAnchor, 45276 shift: true 45277 } : undefined, [popoverPlacement, popoverOffset, popoverAnchor]); 45278 const sharedBorderControlProps = { 45279 colors, 45280 disableCustomColors, 45281 enableAlpha, 45282 enableStyle, 45283 isCompact: true, 45284 __experimentalIsRenderedInSidebar, 45285 size 45286 }; 45287 const mergedRef = (0,external_wp_compose_namespaceObject.useMergeRefs)([setPopoverAnchor, forwardedRef]); 45288 return (0,external_wp_element_namespaceObject.createElement)(grid_component, { 45289 ...otherProps, 45290 ref: mergedRef, 45291 gap: 4 45292 }, (0,external_wp_element_namespaceObject.createElement)(border_box_control_visualizer_component, { 45293 value: value, 45294 size: size 45295 }), (0,external_wp_element_namespaceObject.createElement)(border_control_component, { 45296 className: centeredClassName, 45297 hideLabelFromVision: true, 45298 label: (0,external_wp_i18n_namespaceObject.__)('Top border'), 45299 onChange: newBorder => onChange(newBorder, 'top'), 45300 __unstablePopoverProps: popoverProps, 45301 value: value?.top, 45302 ...sharedBorderControlProps 45303 }), (0,external_wp_element_namespaceObject.createElement)(border_control_component, { 45304 hideLabelFromVision: true, 45305 label: (0,external_wp_i18n_namespaceObject.__)('Left border'), 45306 onChange: newBorder => onChange(newBorder, 'left'), 45307 __unstablePopoverProps: popoverProps, 45308 value: value?.left, 45309 ...sharedBorderControlProps 45310 }), (0,external_wp_element_namespaceObject.createElement)(border_control_component, { 45311 className: rightAlignedClassName, 45312 hideLabelFromVision: true, 45313 label: (0,external_wp_i18n_namespaceObject.__)('Right border'), 45314 onChange: newBorder => onChange(newBorder, 'right'), 45315 __unstablePopoverProps: popoverProps, 45316 value: value?.right, 45317 ...sharedBorderControlProps 45318 }), (0,external_wp_element_namespaceObject.createElement)(border_control_component, { 45319 className: centeredClassName, 45320 hideLabelFromVision: true, 45321 label: (0,external_wp_i18n_namespaceObject.__)('Bottom border'), 45322 onChange: newBorder => onChange(newBorder, 'bottom'), 45323 __unstablePopoverProps: popoverProps, 45324 value: value?.bottom, 45325 ...sharedBorderControlProps 45326 })); 45327}; 45328const ConnectedBorderBoxControlSplitControls = contextConnect(BorderBoxControlSplitControls, 'BorderBoxControlSplitControls'); 45329/* harmony default export */ const border_box_control_split_controls_component = (ConnectedBorderBoxControlSplitControls); 45330 45331;// CONCATENATED MODULE: ./packages/components/build-module/utils/unit-values.js 45332const UNITED_VALUE_REGEX = /^([\d.\-+]*)\s*(fr|cm|mm|Q|in|pc|pt|px|em|ex|ch|rem|lh|vw|vh|vmin|vmax|%|cap|ic|rlh|vi|vb|deg|grad|rad|turn|s|ms|Hz|kHz|dpi|dpcm|dppx)?$/; 45333 45334/** 45335 * Parses a number and unit from a value. 45336 * 45337 * @param toParse Value to parse 45338 * 45339 * @return The extracted number and unit. 45340 */ 45341function parseCSSUnitValue(toParse) { 45342 const value = toParse.trim(); 45343 const matched = value.match(UNITED_VALUE_REGEX); 45344 if (!matched) { 45345 return [undefined, undefined]; 45346 } 45347 const [, num, unit] = matched; 45348 let numParsed = parseFloat(num); 45349 numParsed = Number.isNaN(numParsed) ? undefined : numParsed; 45350 return [numParsed, unit]; 45351} 45352 45353/** 45354 * Combines a value and a unit into a unit value. 45355 * 45356 * @param value 45357 * @param unit 45358 * 45359 * @return The unit value. 45360 */ 45361function createCSSUnitValue(value, unit) { 45362 return `${value}${unit}`; 45363} 45364 45365;// CONCATENATED MODULE: ./packages/components/build-module/border-box-control/utils.js 45366/** 45367 * External dependencies 45368 */ 45369
45370/** 45371 * Internal dependencies 45372 */ 45373 45374const utils_sides = ['top', 'right', 'bottom', 'left']; 45375const borderProps = ['color', 'style', 'width']; 45376const isEmptyBorder = border => { 45377 if (!border) { 45378 return true; 45379 } 45380 return !borderProps.some(prop => border[prop] !== undefined); 45381}; 45382const isDefinedBorder = border => { 45383 // No border, no worries :) 45384 if (!border) { 45385 return false; 45386 } 45387 45388 // If we have individual borders per side within the border object we 45389 // need to check whether any of those side borders have been set. 45390 if (hasSplitBorders(border)) { 45391 const allSidesEmpty = utils_sides.every(side => isEmptyBorder(border[side])); 45392 return !allSidesEmpty; 45393 } 45394 45395 // If we have a top-level border only, check if that is empty. e.g. 45396 // { color: undefined, style: undefined, width: undefined } 45397 // Border radius can still be set within the border object as it is 45398 // handled separately. 45399 return !isEmptyBorder(border); 45400}; 45401const isCompleteBorder = border => { 45402 if (!border) { 45403 return false; 45404 } 45405 return borderProps.every(prop => border[prop] !== undefined); 45406}; 45407const hasSplitBorders = (border = {}) => { 45408 return Object.keys(border).some(side => utils_sides.indexOf(side) !== -1); 45409}; 45410const hasMixedBorders = borders => { 45411 if (!hasSplitBorders(borders)) { 45412 return false; 45413 } 45414 const shorthandBorders = utils_sides.map(side => getShorthandBorderStyle(borders?.[side])); 45415 return !shorthandBorders.every(border => border === shorthandBorders[0]); 45416}; 45417const getSplitBorders = border => { 45418 if (!border || isEmptyBorder(border)) { 45419 return undefined; 45420 } 45421 return { 45422 top: border, 45423 right: border, 45424 bottom: border, 45425 left: border 45426 }; 45427}; 45428const getBorderDiff = (original, updated) => { 45429 const diff = {}; 45430 if (original.color !== updated.color) { 45431 diff.color = updated.color; 45432 } 45433 if (original.style !== updated.style) { 45434 diff.style = updated.style; 45435 } 45436 if (original.width !== updated.width) { 45437 diff.width = updated.width; 45438 } 45439 return diff; 45440}; 45441const getCommonBorder = borders => { 45442 if (!borders) { 45443 return undefined; 45444 } 45445 const colors = []; 45446 const styles = []; 45447 const widths = []; 45448 utils_sides.forEach(side => { 45449 colors.push(borders[side]?.color); 45450 styles.push(borders[side]?.style); 45451 widths.push(borders[side]?.width); 45452 }); 45453 const allColorsMatch = colors.every(value => value === colors[0]); 45454 const allStylesMatch = styles.every(value => value === styles[0]); 45455 const allWidthsMatch = widths.every(value => value === widths[0]); 45456 return { 45457 color: allColorsMatch ? colors[0] : undefined, 45458 style: allStylesMatch ? styles[0] : undefined, 45459 width: allWidthsMatch ? widths[0] : getMostCommonUnit(widths) 45460 }; 45461}; 45462const getShorthandBorderStyle = (border, fallbackBorder) => { 45463 if (isEmptyBorder(border)) { 45464 return fallbackBorder; 45465 } 45466 const { 45467 color: fallbackColor, 45468 style: fallbackStyle, 45469 width: fallbackWidth 45470 } = fallbackBorder || {}; 45471 const { 45472 color = fallbackColor, 45473 style = fallbackStyle, 45474 width = fallbackWidth 45475 } = border; 45476 const hasVisibleBorder = !!width && width !== '0' || !!color; 45477 const borderStyle = hasVisibleBorder ? style || 'solid' : style;
45478 return [width, borderStyle, color].filter(Boolean).join(' '); 45479}; 45480const getMostCommonUnit = values => { 45481 // Collect all the CSS units. 45482 const units = values.map(value => value === undefined ? undefined : parseCSSUnitValue(`${value}`)[1]); 45483 45484 // Return the most common unit out of only the defined CSS units. 45485 const filteredUnits = units.filter(value => value !== undefined); 45486 return mode(filteredUnits); 45487}; 45488 45489/** 45490 * Finds the mode value out of the array passed favouring the first value 45491 * as a tiebreaker. 45492 * 45493 * @param values Values to determine the mode from. 45494 * 45495 * @return The mode value. 45496 */ 45497function mode(values) { 45498 if (values.length === 0) { 45499 return undefined; 45500 } 45501 const map = {}; 45502 let maxCount = 0; 45503 let currentMode; 45504 values.forEach(value => { 45505 map[value] = map[value] === undefined ? 1 : map[value] + 1; 45506 if (map[value] > maxCount) { 45507 currentMode = value; 45508 maxCount = map[value]; 45509 } 45510 }); 45511 return currentMode; 45512} 45513 45514;// CONCATENATED MODULE: ./packages/components/build-module/border-box-control/border-box-control/hook.js 45515/** 45516 * WordPress dependencies 45517 */ 45518 45519 45520/** 45521 * Internal dependencies 45522 */ 45523 45524 45525 45526 45527function useBorderBoxControl(props) { 45528 const { 45529 className, 45530 colors = [], 45531 onChange, 45532 enableAlpha = false, 45533 enableStyle = true, 45534 size = 'default', 45535 value, 45536 __experimentalIsRenderedInSidebar = false, 45537 ...otherProps 45538 } = useContextSystem(props, 'BorderBoxControl'); 45539 const mixedBorders = hasMixedBorders(value); 45540 const splitBorders = hasSplitBorders(value); 45541 const linkedValue = splitBorders ? getCommonBorder(value) : value; 45542 const splitValue = splitBorders ? value : getSplitBorders(value); 45543 45544 // If no numeric width value is set, the unit select will be disabled. 45545 const hasWidthValue = !isNaN(parseFloat(`${linkedValue?.width}`)); 45546 const [isLinked, setIsLinked] = (0,external_wp_element_namespaceObject.useState)(!mixedBorders); 45547 const toggleLinked = () => setIsLinked(!isLinked); 45548 const onLinkedChange = newBorder => { 45549 if (!newBorder) { 45550 return onChange(undefined); 45551 } 45552 45553 // If we have all props defined on the new border apply it. 45554 if (!mixedBorders || isCompleteBorder(newBorder)) { 45555 return onChange(isEmptyBorder(newBorder) ? undefined : newBorder); 45556 } 45557 45558 // If we had mixed borders we might have had some shared border props 45559 // that we need to maintain. For example; we could have mixed borders 45560 // with all the same color but different widths. Then from the linked 45561 // control we change the color. We should keep the separate widths. 45562 const changes = getBorderDiff(linkedValue, newBorder); 45563 const updatedBorders = { 45564 top: { 45565 ...value?.top, 45566 ...changes 45567 }, 45568 right: { 45569 ...value?.right, 45570 ...changes 45571 }, 45572 bottom: { 45573 ...value?.bottom, 45574 ...changes 45575 }, 45576 left: { 45577 ...value?.left, 45578 ...changes 45579 } 45580 }; 45581 if (hasMixedBorders(updatedBorders)) { 45582 return onChange(updatedBorders); 45583 } 45584 const filteredResult = isEmptyBorder(updatedBorders.top) ? undefined : updatedBorders.top; 45585 onChange(filteredResult); 45586 }; 45587 const onSplitChange = (newBorder, side) => { 45588 const updatedBorders = { 45589 ...splitValue, 45590 [side]: newBorder 45591 }; 45592 if (hasMixedBorders(updatedBorders)) { 45593 onChange(updatedBorders); 45594 } else { 45595 onChange(newBorder); 45596 } 45597 }; 45598 const cx = useCx(); 45599 const classes = (0,external_wp_element_namespaceObject.useMemo)(() => { 45600 return cx(borderBoxControl, className); 45601 }, [cx, className]); 45602 const linkedControlClassName = (0,external_wp_element_namespaceObject.useMemo)(() => { 45603 return cx(linkedBorderControl()); 45604 }, [cx]); 45605 const wrapperClassName = (0,external_wp_element_namespaceObject.useMemo)(() => { 45606 return cx(wrapper); 45607 }, [cx]); 45608 return { 45609 ...otherProps, 45610 className: classes, 45611 colors, 45612 disableUnits: mixedBorders && !hasWidthValue, 45613 enableAlpha, 45614 enableStyle, 45615 hasMixedBorders: mixedBorders, 45616 isLinked, 45617 linkedControlClassName, 45618 onLinkedChange, 45619 onSplitChange, 45620 toggleLinked, 45621 linkedValue, 45622 size, 45623 splitValue, 45624 wrapperClassName, 45625 __experimentalIsRenderedInSidebar 45626 }; 45627} 45628 45629;// CONCATENATED MODULE: ./packages/components/build-module/border-box-control/border-box-control/component.js 45630 45631/** 45632 * WordPress dependencies 45633 */ 45634 45635 45636 45637 45638/** 45639 * Internal dependencies 45640 */ 45641 45642 45643 45644 45645 45646 45647 45648 45649const component_BorderLabel = props => { 45650 const { 45651 label, 45652 hideLabelFromVision 45653 } = props; 45654 if (!label) { 45655 return null; 45656 } 45657 return hideLabelFromVision ? (0,external_wp_element_namespaceObject.createElement)(visually_hidden_component, { 45658 as: "label" 45659 }, label) : (0,external_wp_element_namespaceObject.createElement)(StyledLabel, null, label); 45660}; 45661const UnconnectedBorderBoxControl = (props, forwardedRef) => { 45662 const { 45663 className, 45664 colors, 45665 disableCustomColors, 45666 disableUnits,
45667 enableAlpha, 45668 enableStyle, 45669 hasMixedBorders, 45670 hideLabelFromVision, 45671 isLinked, 45672 label, 45673 linkedControlClassName, 45674 linkedValue, 45675 onLinkedChange, 45676 onSplitChange, 45677 popoverPlacement, 45678 popoverOffset, 45679 size, 45680 splitValue, 45681 toggleLinked, 45682 wrapperClassName, 45683 __experimentalIsRenderedInSidebar, 45684 ...otherProps 45685 } = useBorderBoxControl(props); 45686 45687 // Use internal state instead of a ref to make sure that the component 45688 // re-renders when the popover's anchor updates. 45689 const [popoverAnchor, setPopoverAnchor] = (0,external_wp_element_namespaceObject.useState)(null); 45690 45691 // Memoize popoverProps to avoid returning a new object every time. 45692 const popoverProps = (0,external_wp_element_namespaceObject.useMemo)(() => popoverPlacement ? { 45693 placement: popoverPlacement, 45694 offset: popoverOffset, 45695 anchor: popoverAnchor, 45696 shift: true 45697 } : undefined, [popoverPlacement, popoverOffset, popoverAnchor]); 45698 const mergedRef = (0,external_wp_compose_namespaceObject.useMergeRefs)([setPopoverAnchor, forwardedRef]); 45699 return (0,external_wp_element_namespaceObject.createElement)(component, { 45700 className: className, 45701 ...otherProps, 45702 ref: mergedRef 45703 }, (0,external_wp_element_namespaceObject.createElement)(component_BorderLabel, { 45704 label: label, 45705 hideLabelFromVision: hideLabelFromVision 45706 }), (0,external_wp_element_namespaceObject.createElement)(component, { 45707 className: wrapperClassName 45708 }, isLinked ? (0,external_wp_element_namespaceObject.createElement)(border_control_component, { 45709 className: linkedControlClassName, 45710 colors: colors, 45711 disableUnits: disableUnits, 45712 disableCustomColors: disableCustomColors, 45713 enableAlpha: enableAlpha, 45714 enableStyle: enableStyle, 45715 onChange: onLinkedChange, 45716 placeholder: hasMixedBorders ? (0,external_wp_i18n_namespaceObject.__)('Mixed') : undefined, 45717 __unstablePopoverProps: popoverProps, 45718 shouldSanitizeBorder: false // This component will handle that. 45719 , 45720 value: linkedValue, 45721 withSlider: true, 45722 width: size === '__unstable-large' ? '116px' : '110px', 45723 __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar, 45724 size: size 45725 }) : (0,external_wp_element_namespaceObject.createElement)(border_box_control_split_controls_component, { 45726 colors: colors, 45727 disableCustomColors: disableCustomColors, 45728 enableAlpha: enableAlpha, 45729 enableStyle: enableStyle, 45730 onChange: onSplitChange, 45731 popoverPlacement: popoverPlacement, 45732 popoverOffset: popoverOffset, 45733 value: splitValue, 45734 __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar, 45735 size: size 45736 }), (0,external_wp_element_namespaceObject.createElement)(border_box_control_linked_button_component, { 45737 onClick: toggleLinked, 45738 isLinked: isLinked, 45739 size: size 45740 }))); 45741}; 45742 45743/** 45744 * The `BorderBoxControl` effectively has two view states. The first, a "linked" 45745 * view, allows configuration of a flat border via a single `BorderControl`. 45746 * The second, a "split" view, contains a `BorderControl` for each side 45747 * as well as a visualizer for the currently selected borders. Each view also 45748 * contains a button to toggle between the two. 45749 * 45750 * When switching from the "split" view to "linked", if the individual side 45751 * borders are not consistent, the "linked" view will display any border 45752 * properties selections that are consistent while showing a mixed state for 45753 * those that aren't. For example, if all borders had the same color and style 45754 * but different widths, then the border dropdown in the "linked" view's 45755 * `BorderControl` would show that consistent color and style but the "linked" 45756 * view's width input would show "Mixed" placeholder text. 45757 * 45758 * ```jsx 45759 * import { __experimentalBorderBoxControl as BorderBoxControl } from '@wordpress/components'; 45760 * import { __ } from '@wordpress/i18n'; 45761 * 45762 * const colors = [ 45763 * { name: 'Blue 20', color: '#72aee6' }, 45764 * // ... 45765 * ]; 45766 * 45767 * const MyBorderBoxControl = () => { 45768 * const defaultBorder = { 45769 * color: '#72aee6', 45770 * style: 'dashed', 45771 * width: '1px', 45772 * }; 45773 * const [ borders, setBorders ] = useState( { 45774 * top: defaultBorder, 45775 * right: defaultBorder, 45776 * bottom: defaultBorder,
45777 * left: defaultBorder, 45778 * } ); 45779 * const onChange = ( newBorders ) => setBorders( newBorders ); 45780 * 45781 * return ( 45782 * <BorderBoxControl 45783 * colors={ colors } 45784 * label={ __( 'Borders' ) } 45785 * onChange={ onChange } 45786 * value={ borders } 45787 * /> 45788 * ); 45789 * }; 45790 * ``` 45791 */ 45792const BorderBoxControl = contextConnect(UnconnectedBorderBoxControl, 'BorderBoxControl'); 45793/* harmony default export */ const border_box_control_component = (BorderBoxControl); 45794 45795;// CONCATENATED MODULE: ./packages/components/build-module/box-control/styles/box-control-styles.js 45796 45797function 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)."; } 45798/** 45799 * External dependencies 45800 */ 45801 45802/** 45803 * Internal dependencies 45804 */ 45805 45806 45807 45808const box_control_styles_Root = emotion_styled_base_browser_esm("div", true ? { 45809 target: "e1jovhle6" 45810} : 0)( true ? { 45811 name: "14bvcyk", 45812 styles: "box-sizing:border-box;max-width:235px;padding-bottom:12px;width:100%" 45813} : 0); 45814const Header = /*#__PURE__*/emotion_styled_base_browser_esm(flex_component, true ? { 45815 target: "e1jovhle5" 45816} : 0)( true ? { 45817 name: "5bhc30", 45818 styles: "margin-bottom:8px" 45819} : 0); 45820const HeaderControlWrapper = /*#__PURE__*/emotion_styled_base_browser_esm(flex_component, true ? { 45821 target: "e1jovhle4" 45822} : 0)( true ? { 45823 name: "aujtid", 45824 styles: "min-height:30px;gap:0" 45825} : 0); 45826const UnitControlWrapper = emotion_styled_base_browser_esm("div", true ? { 45827 target: "e1jovhle3" 45828} : 0)( true ? { 45829 name: "112jwab", 45830 styles: "box-sizing:border-box;max-width:80px" 45831} : 0); 45832const LayoutContainer = /*#__PURE__*/emotion_styled_base_browser_esm(flex_component, true ? { 45833 target: "e1jovhle2" 45834} : 0)( true ? { 45835 name: "xy18ro", 45836 styles: "justify-content:center;padding-top:8px" 45837} : 0); 45838const Layout = /*#__PURE__*/emotion_styled_base_browser_esm(flex_component, true ? { 45839 target: "e1jovhle1" 45840} : 0)( true ? { 45841 name: "3tw5wk", 45842 styles: "position:relative;height:100%;width:100%;justify-content:flex-start" 45843} : 0); 45844var box_control_styles_ref = true ? { 45845 name: "1ch9yvl", 45846 styles: "border-radius:0" 45847} : 0; 45848var box_control_styles_ref2 = true ? { 45849 name: "tg3mx0", 45850 styles: "border-radius:2px" 45851} : 0; 45852const unitControlBorderRadiusStyles = ({ 45853 isFirst, 45854 isLast, 45855 isOnly 45856}) => { 45857 if (isFirst) { 45858 return rtl({ 45859 borderTopRightRadius: 0, 45860 borderBottomRightRadius: 0 45861 })(); 45862 } 45863 if (isLast) { 45864 return rtl({ 45865 borderTopLeftRadius: 0, 45866 borderBottomLeftRadius: 0 45867 })(); 45868 } 45869 if (isOnly) { 45870 return box_control_styles_ref2; 45871 } 45872 return box_control_styles_ref; 45873}; 45874const unitControlMarginStyles = ({ 45875 isFirst, 45876 isOnly 45877}) => { 45878 const marginLeft = isFirst || isOnly ? 0 : -1; 45879 return rtl({ 45880 marginLeft 45881 })(); 45882}; 45883const box_control_styles_UnitControl = /*#__PURE__*/emotion_styled_base_browser_esm(unit_control, true ? { 45884 target: "e1jovhle0" 45885} : 0)("max-width:60px;", unitControlBorderRadiusStyles, ";", unitControlMarginStyles, ";" + ( true ? "" : 0)); 45886 45887;// CONCATENATED MODULE: ./packages/components/build-module/box-control/unit-control.js 45888 45889/** 45890 * External dependencies 45891 */ 45892 45893 45894/** 45895 * Internal dependencies 45896 */ 45897 45898 45899const unit_control_noop = () => {}; 45900function BoxUnitControl({ 45901 isFirst, 45902 isLast, 45903 isOnly, 45904 onHoverOn = unit_control_noop, 45905 onHoverOff = unit_control_noop, 45906 label, 45907 value, 45908 ...props 45909}) { 45910 const bindHoverGesture = useHover(({ 45911 event, 45912 ...state 45913 }) => { 45914 if (state.hovering) { 45915 onHoverOn(event, state); 45916 } else { 45917 onHoverOff(event, state); 45918 } 45919 }); 45920 return (0,external_wp_element_namespaceObject.createElement)(UnitControlWrapper, { 45921 ...bindHoverGesture() 45922 }, (0,external_wp_element_namespaceObject.createElement)(unit_control_Tooltip, { 45923 text: label 45924 }, (0,external_wp_element_namespaceObject.createElement)(box_control_styles_UnitControl, { 45925 "aria-label": label, 45926 className: "component-box-control__unit-control", 45927 isFirst: isFirst, 45928 isLast: isLast, 45929 isOnly: isOnly, 45930 isPressEnterToChange: true, 45931 isResetValueOnUnitChange: false, 45932 value: value, 45933 ...props 45934 }))); 45935} 45936function unit_control_Tooltip({ 45937 children, 45938 text 45939}) { 45940 if (!text) return children; 45941 45942 /** 45943 * Wrapping the children in a `<div />` as Tooltip as it attempts 45944 * to render the <UnitControl />. Using a plain `<div />` appears to 45945 * resolve this issue. 45946 * 45947 * Originally discovered and referenced here: 45948 * https://github.com/WordPress/gutenberg/pull/24966#issuecomment-685875026 45949 */ 45950 return (0,external_wp_element_namespaceObject.createElement)(tooltip, { 45951 text: text, 45952 placement: "top" 45953 }, (0,external_wp_element_namespaceObject.createElement)("div", null, children)); 45954} 45955 45956;// CONCATENATED MODULE: ./packages/components/build-module/box-control/utils.js 45957/** 45958 * WordPress dependencies 45959 */ 45960 45961 45962/** 45963 * Internal dependencies 45964 */ 45965 45966const LABELS = { 45967 all: (0,external_wp_i18n_namespaceObject.__)('All'), 45968 top: (0,external_wp_i18n_namespaceObject.__)('Top'), 45969 bottom: (0,external_wp_i18n_namespaceObject.__)('Bottom'), 45970 left: (0,external_wp_i18n_namespaceObject.__)('Left'), 45971 right: (0,external_wp_i18n_namespaceObject.__)('Right'), 45972 mixed: (0,external_wp_i18n_namespaceObject.__)('Mixed'), 45973 vertical: (0,external_wp_i18n_namespaceObject.__)('Vertical'), 45974 horizontal: (0,external_wp_i18n_namespaceObject.__)('Horizontal') 45975}; 45976const DEFAULT_VALUES = { 45977 top: undefined, 45978 right: undefined, 45979 bottom: undefined, 45980 left: undefined 45981}; 45982const ALL_SIDES = ['top', 'right', 'bottom', 'left']; 45983 45984/** 45985 * Gets an items with the most occurrence within an array 45986 * https://stackoverflow.com/a/20762713 45987 * 45988 * @param arr Array of items to check. 45989 * @return The item with the most occurrences. 45990 */ 45991function utils_mode(arr) { 45992 return arr.sort((a, b) => arr.filter(v => v === a).length - arr.filter(v => v === b).length).pop(); 45993} 45994 45995/** 45996 * Gets the 'all' input value and unit from values data. 45997 * 45998 * @param values Box values. 45999 * @param selectedUnits Box units. 46000 * @param availableSides Available box sides to evaluate. 46001 * 46002 * @return A value + unit for the 'all' input. 46003 */ 46004function getAllValue(values = {}, selectedUnits, availableSides = ALL_SIDES) { 46005 const sides = normalizeSides(availableSides); 46006 const parsedQuantitiesAndUnits = sides.map(side => parseQuantityAndUnitFromRawValue(values[side])); 46007 const allParsedQuantities = parsedQuantitiesAndUnits.map(value => { 46008 var _value$; 46009 return (_value$ = value[0]) !== null && _value$ !== void 0 ? _value$ : ''; 46010 }); 46011 const allParsedUnits = parsedQuantitiesAndUnits.map(value => value[1]); 46012 const commonQuantity = allParsedQuantities.every(v => v === allParsedQuantities[0]) ? allParsedQuantities[0] : ''; 46013 46014 /** 46015 * The typeof === 'number' check is important. On reset actions, the incoming value 46016 * may be null or an empty string. 46017 *
46018 * Also, the value may also be zero (0), which is considered a valid unit value. 46019 * 46020 * typeof === 'number' is more specific for these cases, rather than relying on a 46021 * simple truthy check. 46022 */ 46023 let commonUnit; 46024 if (typeof commonQuantity === 'number') { 46025 commonUnit = utils_mode(allParsedUnits); 46026 } else { 46027 var _getAllUnitFallback; 46028 // Set meaningful unit selection if no commonQuantity and user has previously 46029 // selected units without assigning values while controls were unlinked. 46030 commonUnit = (_getAllUnitFallback = getAllUnitFallback(selectedUnits)) !== null && _getAllUnitFallback !== void 0 ? _getAllUnitFallback : utils_mode(allParsedUnits); 46031 } 46032 return [commonQuantity, commonUnit].join(''); 46033} 46034 46035/** 46036 * Determine the most common unit selection to use as a fallback option. 46037 * 46038 * @param selectedUnits Current unit selections for individual sides. 46039 * @return Most common unit selection. 46040 */ 46041function getAllUnitFallback(selectedUnits) { 46042 if (!selectedUnits || typeof selectedUnits !== 'object') { 46043 return undefined; 46044 } 46045 const filteredUnits = Object.values(selectedUnits).filter(Boolean); 46046 return utils_mode(filteredUnits); 46047} 46048 46049/** 46050 * Checks to determine if values are mixed. 46051 * 46052 * @param values Box values. 46053 * @param selectedUnits Box units. 46054 * @param sides Available box sides to evaluate. 46055 * 46056 * @return Whether values are mixed. 46057 */ 46058function isValuesMixed(values = {}, selectedUnits, sides = ALL_SIDES) { 46059 const allValue = getAllValue(values, selectedUnits, sides); 46060 const isMixed = isNaN(parseFloat(allValue)); 46061 return isMixed; 46062} 46063 46064/** 46065 * Checks to determine if values are defined. 46066 * 46067 * @param values Box values. 46068 * 46069 * @return Whether values are mixed. 46070 */ 46071function isValuesDefined(values) { 46072 return values !== undefined && Object.values(values).filter( 46073 // Switching units when input is empty causes values only 46074 // containing units. This gives false positive on mixed values 46075 // unless filtered. 46076 value => !!value && /\d/.test(value)).length > 0; 46077} 46078 46079/** 46080 * Get initial selected side, factoring in whether the sides are linked, 46081 * and whether the vertical / horizontal directions are grouped via splitOnAxis. 46082 * 46083 * @param isLinked Whether the box control's fields are linked. 46084 * @param splitOnAxis Whether splitting by horizontal or vertical axis. 46085 * @return The initial side. 46086 */ 46087function getInitialSide(isLinked, splitOnAxis) { 46088 let initialSide = 'all'; 46089 if (!isLinked) { 46090 initialSide = splitOnAxis ? 'vertical' : 'top'; 46091 } 46092 return initialSide; 46093} 46094 46095/** 46096 * Normalizes provided sides configuration to an array containing only top, 46097 * right, bottom and left. This essentially just maps `horizontal` or `vertical` 46098 * to their appropriate sides to facilitate correctly determining value for 46099 * all input control. 46100 * 46101 * @param sides Available sides for box control. 46102 * @return Normalized sides configuration. 46103 */ 46104function normalizeSides(sides) { 46105 const filteredSides = []; 46106 if (!sides?.length) { 46107 return ALL_SIDES; 46108 } 46109 if (sides.includes('vertical')) { 46110 filteredSides.push(...['top', 'bottom']); 46111 } else if (sides.includes('horizontal')) { 46112 filteredSides.push(...['left', 'right']); 46113 } else { 46114 const newSides = ALL_SIDES.filter(side => sides.includes(side)); 46115 filteredSides.push(...newSides); 46116 } 46117 return filteredSides; 46118} 46119 46120/** 46121 * Applies a value to an object representing top, right, bottom and left sides 46122 * while taking into account any custom side configuration. 46123 * 46124 * @param currentValues The current values for each side. 46125 * @param newValue The value to apply to the sides object. 46126 * @param sides Array defining valid sides. 46127 * 46128 * @return Object containing the updated values for each side. 46129 */ 46130function applyValueToSides(currentValues, newValue, sides) { 46131 const newValues = { 46132 ...currentValues 46133 }; 46134 if (sides?.length) { 46135 sides.forEach(side => { 46136 if (side === 'vertical') { 46137 newValues.top = newValue; 46138 newValues.bottom = newValue; 46139 } else if (side === 'horizontal') { 46140 newValues.left = newValue; 46141 newValues.right = newValue; 46142 } else { 46143 newValues[side] = newValue; 46144 } 46145 }); 46146 } else { 46147 ALL_SIDES.forEach(side => newValues[side] = newValue); 46148 } 46149 return newValues; 46150} 46151 46152;// CONCATENATED MODULE: ./packages/components/build-module/box-control/all-input-control.js 46153 46154/** 46155 * Internal dependencies 46156 */ 46157 46158 46159 46160const all_input_control_noop = () => {}; 46161function AllInputControl({ 46162 onChange = all_input_control_noop, 46163 onFocus = all_input_control_noop, 46164 onHoverOn = all_input_control_noop, 46165 onHoverOff = all_input_control_noop, 46166 values, 46167 sides, 46168 selectedUnits, 46169 setSelectedUnits, 46170 ...props 46171}) { 46172 const allValue = getAllValue(values, selectedUnits, sides); 46173 const hasValues = isValuesDefined(values); 46174 const isMixed = hasValues && isValuesMixed(values, selectedUnits, sides); 46175 const allPlaceholder = isMixed ? LABELS.mixed : undefined; 46176 const handleOnFocus = event => { 46177 onFocus(event, { 46178 side: 'all' 46179 }); 46180 }; 46181 const handleOnChange = next => { 46182 const isNumeric = next !== undefined && !isNaN(parseFloat(next)); 46183 const nextValue = isNumeric ? next : undefined; 46184 const nextValues = applyValueToSides(values, nextValue, sides);
46185 onChange(nextValues); 46186 }; 46187 46188 // Set selected unit so it can be used as fallback by unlinked controls 46189 // when individual sides do not have a value containing a unit. 46190 const handleOnUnitChange = unit => { 46191 const newUnits = applyValueToSides(selectedUnits, unit, sides); 46192 setSelectedUnits(newUnits); 46193 }; 46194 const handleOnHoverOn = () => { 46195 onHoverOn({ 46196 top: true, 46197 bottom: true, 46198 left: true, 46199 right: true 46200 }); 46201 }; 46202 const handleOnHoverOff = () => { 46203 onHoverOff({ 46204 top: false, 46205 bottom: false, 46206 left: false, 46207 right: false 46208 }); 46209 }; 46210 return (0,external_wp_element_namespaceObject.createElement)(BoxUnitControl, { 46211 ...props, 46212 disableUnits: isMixed, 46213 isOnly: true, 46214 value: allValue, 46215 onChange: handleOnChange, 46216 onUnitChange: handleOnUnitChange, 46217 onFocus: handleOnFocus, 46218 onHoverOn: handleOnHoverOn, 46219 onHoverOff: handleOnHoverOff, 46220 placeholder: allPlaceholder 46221 }); 46222} 46223 46224;// CONCATENATED MODULE: ./packages/components/build-module/box-control/input-controls.js 46225 46226/** 46227 * Internal dependencies 46228 */ 46229 46230 46231 46232 46233const input_controls_noop = () => {}; 46234function BoxInputControls({ 46235 onChange = input_controls_noop, 46236 onFocus = input_controls_noop, 46237 onHoverOn = input_controls_noop, 46238 onHoverOff = input_controls_noop, 46239 values, 46240 selectedUnits, 46241 setSelectedUnits, 46242 sides, 46243 ...props 46244}) { 46245 const createHandleOnFocus = side => event => { 46246 onFocus(event, { 46247 side 46248 }); 46249 }; 46250 const createHandleOnHoverOn = side => () => { 46251 onHoverOn({ 46252 [side]: true 46253 }); 46254 }; 46255 const createHandleOnHoverOff = side => () => { 46256 onHoverOff({ 46257 [side]: false 46258 }); 46259 }; 46260 const handleOnChange = nextValues => { 46261 onChange(nextValues); 46262 }; 46263 const createHandleOnChange = side => (next, { 46264 event 46265 }) => { 46266 const nextValues = { 46267 ...values 46268 }; 46269 const isNumeric = next !== undefined && !isNaN(parseFloat(next)); 46270 const nextValue = isNumeric ? next : undefined; 46271 nextValues[side] = nextValue; 46272 46273 /** 46274 * Supports changing pair sides. For example, holding the ALT key 46275 * when changing the TOP will also update BOTTOM. 46276 */ 46277 // @ts-expect-error - TODO: event.altKey is only present when the change event was 46278 // triggered by a keyboard event. Should this feature be implemented differently so 46279 // it also works with drag events? 46280 if (event.altKey) { 46281 switch (side) { 46282 case 'top': 46283 nextValues.bottom = nextValue; 46284 break; 46285 case 'bottom': 46286 nextValues.top = nextValue; 46287 break; 46288 case 'left': 46289 nextValues.right = nextValue; 46290 break; 46291 case 'right': 46292 nextValues.left = nextValue; 46293 break; 46294 } 46295 } 46296 handleOnChange(nextValues); 46297 }; 46298 const createHandleOnUnitChange = side => next => { 46299 const newUnits = { 46300 ...selectedUnits 46301 }; 46302 newUnits[side] = next; 46303 setSelectedUnits(newUnits); 46304 }; 46305 46306 // Filter sides if custom configuration provided, maintaining default order. 46307 const filteredSides = sides?.length ? ALL_SIDES.filter(side => sides.includes(side)) : ALL_SIDES; 46308 const first = filteredSides[0]; 46309 const last = filteredSides[filteredSides.length - 1]; 46310 const only = first === last && first; 46311 return (0,external_wp_element_namespaceObject.createElement)(LayoutContainer, { 46312 className: "component-box-control__input-controls-wrapper" 46313 }, (0,external_wp_element_namespaceObject.createElement)(Layout, { 46314 gap: 0, 46315 align: "top", 46316 className: "component-box-control__input-controls" 46317 }, filteredSides.map(side => { 46318 const [parsedQuantity, parsedUnit] = parseQuantityAndUnitFromRawValue(values[side]); 46319 const computedUnit = values[side] ? parsedUnit : selectedUnits[side]; 46320 return (0,external_wp_element_namespaceObject.createElement)(BoxUnitControl, { 46321 ...props, 46322 isFirst: first === side, 46323 isLast: last === side, 46324 isOnly: only === side, 46325 value: [parsedQuantity, computedUnit].join(''), 46326 onChange: createHandleOnChange(side), 46327 onUnitChange: createHandleOnUnitChange(side), 46328 onFocus: createHandleOnFocus(side), 46329 onHoverOn: createHandleOnHoverOn(side), 46330 onHoverOff: createHandleOnHoverOff(side), 46331 label: LABELS[side], 46332 key: `box-control-${side}` 46333 }); 46334 }))); 46335} 46336 46337;// CONCATENATED MODULE: ./packages/components/build-module/box-control/axial-input-control
46337s.js 46338 46339/** 46340 * Internal dependencies 46341 */ 46342 46343 46344 46345 46346const groupedSides = ['vertical', 'horizontal']; 46347function AxialInputControls({ 46348 onChange, 46349 onFocus, 46350 onHoverOn, 46351 onHoverOff, 46352 values, 46353 selectedUnits, 46354 setSelectedUnits, 46355 sides, 46356 ...props 46357}) { 46358 const createHandleOnFocus = side => event => { 46359 if (!onFocus) { 46360 return; 46361 } 46362 onFocus(event, { 46363 side 46364 }); 46365 }; 46366 const createHandleOnHoverOn = side => () => { 46367 if (!onHoverOn) { 46368 return; 46369 } 46370 if (side === 'vertical') { 46371 onHoverOn({ 46372 top: true, 46373 bottom: true 46374 }); 46375 } 46376 if (side === 'horizontal') { 46377 onHoverOn({ 46378 left: true, 46379 right: true 46380 }); 46381 } 46382 }; 46383 const createHandleOnHoverOff = side => () => { 46384 if (!onHoverOff) { 46385 return; 46386 } 46387 if (side === 'vertical') { 46388 onHoverOff({ 46389 top: false, 46390 bottom: false 46391 }); 46392 } 46393 if (side === 'horizontal') { 46394 onHoverOff({ 46395 left: false, 46396 right: false 46397 }); 46398 } 46399 }; 46400 const createHandleOnChange = side => next => { 46401 if (!onChange) { 46402 return; 46403 } 46404 const nextValues = { 46405 ...values 46406 }; 46407 const isNumeric = next !== undefined && !isNaN(parseFloat(next)); 46408 const nextValue = isNumeric ? next : undefined; 46409 if (side === 'vertical') { 46410 nextValues.top = nextValue; 46411 nextValues.bottom = nextValue; 46412 } 46413 if (side === 'horizontal') { 46414 nextValues.left = nextValue; 46415 nextValues.right = nextValue; 46416 } 46417 onChange(nextValues); 46418 }; 46419 const createHandleOnUnitChange = side => next => { 46420 const newUnits = { 46421 ...selectedUnits 46422 }; 46423 if (side === 'vertical') { 46424 newUnits.top = next; 46425 newUnits.bottom = next; 46426 } 46427 if (side === 'horizontal') { 46428 newUnits.left = next; 46429 newUnits.right = next; 46430 } 46431 setSelectedUnits(newUnits); 46432 }; 46433 46434 // Filter sides if custom configuration provided, maintaining default order. 46435 const filteredSides = sides?.length ? groupedSides.filter(side => sides.includes(side)) : groupedSides; 46436 const first = filteredSides[0]; 46437 const last = filteredSides[filteredSides.length - 1]; 46438 const only = first === last && first; 46439 return (0,external_wp_element_namespaceObject.createElement)(Layout, { 46440 gap: 0, 46441 align: "top", 46442 className: "component-box-control__vertical-horizontal-input-controls" 46443 }, filteredSides.map(side => { 46444 const [parsedQuantity, parsedUnit] = parseQuantityAndUnitFromRawValue(side === 'vertical' ? values.top : values.left); 46445 const selectedUnit = side === 'vertical' ? selectedUnits.top : selectedUnits.left; 46446 return (0,external_wp_element_namespaceObject.createElement)(BoxUnitControl, { 46447 ...props, 46448 isFirst: first === side, 46449 isLast: last === side, 46450 isOnly: only === side, 46451 value: [parsedQuantity, selectedUnit !== null && selectedUnit !== void 0 ? selectedUnit : parsedUnit].join(''), 46452 onChange: createHandleOnChange(side), 46453 onUnitChange: createHandleOnUnitChange(side), 46454 onFocus: createHandleOnFocus(side), 46455 onHoverOn: createHandleOnHoverOn(side), 46456 onHoverOff: createHandleOnHoverOff(side), 46457 label: LABELS[side], 46458 key: side 46459 }); 46460 })); 46461} 46462 46463;// CONCATENATED MODULE: ./packages/components/build-module/box-control/styles/box-control-icon-styles.js 46464 46465function 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)."; } 46466/** 46467 * External dependencies 46468 */ 46469 46470const box_control_icon_styles_Root = emotion_styled_base_browser_esm("span", true ? { 46471 target: "e1j5nr4z8" 46472} : 0)( true ? { 46473 name: "1w884gc", 46474 styles: "box-sizing:border-box;display:block;width:24px;height:24px;position:relative;padding:4px" 46475} : 0); 46476const Viewbox = emotion_styled_base_browser_esm("span", true ? { 46477 target: "e1j5nr4z7" 46478} : 0)( true ? { 46479 name: "i6vjox", 46480 styles: "box-sizing:border-box;display:block;position:relative;width:100%;height:100%" 46481} : 0); 46482const strokeFocus = ({ 46483 isFocused 46484}) => {
46485 return /*#__PURE__*/emotion_react_browser_esm_css({ 46486 backgroundColor: 'currentColor', 46487 opacity: isFocused ? 1 : 0.3 46488 }, true ? "" : 0, true ? "" : 0); 46489}; 46490const Stroke = emotion_styled_base_browser_esm("span", true ? { 46491 target: "e1j5nr4z6" 46492} : 0)("box-sizing:border-box;display:block;pointer-events:none;position:absolute;", strokeFocus, ";" + ( true ? "" : 0)); 46493const VerticalStroke = /*#__PURE__*/emotion_styled_base_browser_esm(Stroke, true ? { 46494 target: "e1j5nr4z5" 46495} : 0)( true ? { 46496 name: "1k2w39q", 46497 styles: "bottom:3px;top:3px;width:2px" 46498} : 0); 46499const HorizontalStroke = /*#__PURE__*/emotion_styled_base_browser_esm(Stroke, true ? { 46500 target: "e1j5nr4z4" 46501} : 0)( true ? { 46502 name: "1q9b07k", 46503 styles: "height:2px;left:3px;right:3px" 46504} : 0); 46505const TopStroke = /*#__PURE__*/emotion_styled_base_browser_esm(HorizontalStroke, true ? { 46506 target: "e1j5nr4z3" 46507} : 0)( true ? { 46508 name: "abcix4", 46509 styles: "top:0" 46510} : 0); 46511const RightStroke = /*#__PURE__*/emotion_styled_base_browser_esm(VerticalStroke, true ? { 46512 target: "e1j5nr4z2" 46513} : 0)( true ? { 46514 name: "1wf8jf", 46515 styles: "right:0" 46516} : 0); 46517const BottomStroke = /*#__PURE__*/emotion_styled_base_browser_esm(HorizontalStroke, true ? { 46518 target: "e1j5nr4z1" 46519} : 0)( true ? { 46520 name: "8tapst", 46521 styles: "bottom:0" 46522} : 0); 46523const LeftStroke = /*#__PURE__*/emotion_styled_base_browser_esm(VerticalStroke, true ? { 46524 target: "e1j5nr4z0" 46525} : 0)( true ? { 46526 name: "1ode3cm", 46527 styles: "left:0" 46528} : 0); 46529 46530;// CONCATENATED MODULE: ./packages/components/build-module/box-control/icon.js 46531 46532/** 46533 * Internal dependencies 46534 */ 46535 46536 46537const BASE_ICON_SIZE = 24; 46538function BoxControlIcon({ 46539 size = 24, 46540 side = 'all', 46541 sides, 46542 ...props 46543}) { 46544 const isSideDisabled = value => sides?.length && !sides.includes(value); 46545 const hasSide = value => { 46546 if (isSideDisabled(value)) { 46547 return false; 46548 } 46549 return side === 'all' || side === value; 46550 }; 46551 const top = hasSide('top') || hasSide('vertical'); 46552 const right = hasSide('right') || hasSide('horizontal'); 46553 const bottom = hasSide('bottom') || hasSide('vertical'); 46554 const left = hasSide('left') || hasSide('horizontal'); 46555 46556 // Simulates SVG Icon scaling. 46557 const scale = size / BASE_ICON_SIZE; 46558 return (0,external_wp_element_namespaceObject.createElement)(box_control_icon_styles_Root, { 46559 style: { 46560 transform: `scale(${scale})` 46561 }, 46562 ...props 46563 }, (0,external_wp_element_namespaceObject.createElement)(Viewbox, null, (0,external_wp_element_namespaceObject.createElement)(TopStroke, { 46564 isFocused: top 46565 }), (0,external_wp_element_namespaceObject.createElement)(RightStroke, { 46566 isFocused: right 46567 }), (0,external_wp_element_namespaceObject.createElement)(BottomStroke, { 46568 isFocused: bottom 46569 }), (0,external_wp_element_namespaceObject.createElement)(LeftStroke, { 46570 isFocused: left 46571 }))); 46572} 46573 46574;// CONCATENATED MODULE: ./packages/components/build-module/box-control/linked-button.js 46575 46576/** 46577 * WordPress dependencies 46578 */ 46579 46580 46581 46582/** 46583 * Internal dependencies 46584 */ 46585 46586 46587function LinkedButton({ 46588 isLinked, 46589 ...props 46590}) { 46591 const label = isLinked ? (0,external_wp_i18n_namespaceObject.__)('Unlink sides') : (0,external_wp_i18n_namespaceObject.__)('Link sides'); 46592 return (0,external_wp_element_namespaceObject.createElement)(tooltip, { 46593 text: label 46594 }, (0,external_wp_element_namespaceObject.createElement)(build_module_button, { 46595 ...props, 46596 className: "component-box-control__linked-button", 46597 isSmall: true, 46598 icon: isLinked ? library_link : link_off, 46599 iconSize: 24, 46600 "aria-label": label 46601 })); 46602} 46603 46604;// CONCATENATED MODULE: ./packages/components/build-module/box-control/index.js 46605 46606/** 46607 * WordPress dependencies 46608 */ 46609 46610 46611 46612 46613/** 46614 * Internal dependencies 46615 */ 46616 46617 46618 46619 46620 46621 46622 46623 46624 46625 46626 46627 46628const defaultInputProps = { 46629 min: 0 46630}; 46631const box_control_noop = () => {}; 46632function box_control_useUniqueId(idProp) { 46633 const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(BoxControl, 'inspector-box-control'); 46634 return idProp || instanceId; 46635} 46636 46637/** 46638 * BoxControl components let users set values for Top, Right, Bottom, and Left. 46639 * This can be used as an input control for values like `padding` or `margin`. 46640 * 46641 * ```jsx 46642 * import { __experimentalBoxControl as BoxControl } from '@wordpress/components';
46643 * import { useState } from '@wordpress/element'; 46644 * 46645 * const Example = () => { 46646 * const [ values, setValues ] = useState( { 46647 * top: '50px', 46648 * left: '10%', 46649 * right: '10%', 46650 * bottom: '50px', 46651 * } ); 46652 * 46653 * return ( 46654 * <BoxControl 46655 * values={ values } 46656 * onChange={ ( nextValues ) => setValues( nextValues ) } 46657 * /> 46658 * ); 46659 * }; 46660 * ``` 46661 */ 46662function BoxControl({ 46663 id: idProp, 46664 inputProps = defaultInputProps, 46665 onChange = box_control_noop, 46666 label = (0,external_wp_i18n_namespaceObject.__)('Box Control'), 46667 values: valuesProp, 46668 units, 46669 sides, 46670 splitOnAxis = false, 46671 allowReset = true, 46672 resetValues = DEFAULT_VALUES, 46673 onMouseOver, 46674 onMouseOut 46675}) { 46676 const [values, setValues] = use_controlled_state(valuesProp, { 46677 fallback: DEFAULT_VALUES 46678 }); 46679 const inputValues = values || DEFAULT_VALUES; 46680 const hasInitialValue = isValuesDefined(valuesProp); 46681 const hasOneSide = sides?.length === 1; 46682 const [isDirty, setIsDirty] = (0,external_wp_element_namespaceObject.useState)(hasInitialValue); 46683 const [isLinked, setIsLinked] = (0,external_wp_element_namespaceObject.useState)(!hasInitialValue || !isValuesMixed(inputValues) || hasOneSide); 46684 const [side, setSide] = (0,external_wp_element_namespaceObject.useState)(getInitialSide(isLinked, splitOnAxis)); 46685 46686 // Tracking selected units via internal state allows filtering of CSS unit 46687 // only values from being saved while maintaining preexisting unit selection 46688 // behaviour. Filtering CSS only values prevents invalid style values. 46689 const [selectedUnits, setSelectedUnits] = (0,external_wp_element_namespaceObject.useState)({ 46690 top: parseQuantityAndUnitFromRawValue(valuesProp?.top)[1], 46691 right: parseQuantityAndUnitFromRawValue(valuesProp?.right)[1], 46692 bottom: parseQuantityAndUnitFromRawValue(valuesProp?.bottom)[1], 46693 left: parseQuantityAndUnitFromRawValue(valuesProp?.left)[1] 46694 }); 46695 const id = box_control_useUniqueId(idProp); 46696 const headingId = `${id}-heading`; 46697 const toggleLinked = () => { 46698 setIsLinked(!isLinked); 46699 setSide(getInitialSide(!isLinked, splitOnAxis)); 46700 }; 46701 const handleOnFocus = (_event, { 46702 side: nextSide 46703 }) => { 46704 setSide(nextSide); 46705 }; 46706 const handleOnChange = nextValues => { 46707 onChange(nextValues); 46708 setValues(nextValues); 46709 setIsDirty(true); 46710 }; 46711 const handleOnReset = () => { 46712 onChange(resetValues); 46713 setValues(resetValues); 46714 setSelectedUnits(resetValues); 46715 setIsDirty(false); 46716 }; 46717 const inputControlProps = { 46718 ...inputProps, 46719 onChange: handleOnChange, 46720 onFocus: handleOnFocus, 46721 isLinked, 46722 units, 46723 selectedUnits, 46724 setSelectedUnits, 46725 sides, 46726 values: inputValues, 46727 onMouseOver, 46728 onMouseOut 46729 }; 46730 return (0,external_wp_element_namespaceObject.createElement)(box_control_styles_Root, { 46731 id: id, 46732 role: "group", 46733 "aria-labelledby": headingId 46734 }, (0,external_wp_element_namespaceObject.createElement)(Header, { 46735 className: "component-box-control__header" 46736 }, (0,external_wp_element_namespaceObject.createElement)(flex_item_component, null, (0,external_wp_element_namespaceObject.createElement)(BaseControl.VisualLabel, { 46737 id: headingId 46738 }, label)), allowReset && (0,external_wp_element_namespaceObject.createElement)(flex_item_component, null, (0,external_wp_element_namespaceObject.createElement)(build_module_button, { 46739 className: "component-box-control__reset-button", 46740 variant: "secondary", 46741 isSmall: true, 46742 onClick: handleOnReset, 46743 disabled: !isDirty 46744 }, (0,external_wp_i18n_namespaceObject.__)('Reset')))), (0,external_wp_element_namespaceObject.createElement)(HeaderControlWrapper, { 46745 className: "component-box-control__header-control-wrapper" 46746 }, (0,external_wp_element_namespaceObject.createElement)(flex_item_component, null, (0,external_wp_element_namespaceObject.createElement)(BoxControlIcon, { 46747 side: side, 46748 sides: sides 46749 })), isLinked && (0,external_wp_element_namespaceObject.createElement)(flex_block_component, null, (0,external_wp_element_namespaceObject.createElement)(AllInputControl, { 46750 "aria-label": label, 46751 ...inputControlProps 46752 })), !isLinked && splitOnAxis && (0,external_wp_element_namespaceObject.createElement)(flex_block_component, null, (0,external_wp_element_namespaceObject.createElement)(AxialInputControls, { 46753 ...inputControlProps 46754 })), !hasOneSide && (0,external_wp_element_namespaceObject.createElement)(flex_item_component, null, (0,external_wp_element_namespaceObject.createElement)(LinkedButton, { 46755 onClick: toggleLinked, 46756 isLinked: isLinked 46757 }))), !isLinked && !splitOnAxis && (0,external_wp_element_namespaceObject.createElement)(BoxInputControls, { 46758 ...inputControlProps 46759 })); 46760} 46761 46762/* harmony default export */ const box_control = (BoxControl); 46763 46764;// CONCATENATED MODULE: ./packages/components/build-module/button-group/index.js 46765 46766/** 46767 * External dependencies 46768 */ 46769
46770/** 46771 * WordPress dependencies 46772 */ 46773 46774 46775/** 46776 * Internal dependencies 46777 */ 46778 46779function UnforwardedButtonGroup(props, ref) { 46780 const { 46781 className, 46782 ...restProps 46783 } = props; 46784 const classes = classnames_default()('components-button-group', className); 46785 return (0,external_wp_element_namespaceObject.createElement)("div", { 46786 ref: ref, 46787 role: "group", 46788 className: classes, 46789 ...restProps 46790 }); 46791} 46792 46793/** 46794 * ButtonGroup can be used to group any related buttons together. To emphasize 46795 * related buttons, a group should share a common container. 46796 * 46797 * ```jsx 46798 * import { Button, ButtonGroup } from '@wordpress/components'; 46799 * 46800 * const MyButtonGroup = () => ( 46801 * <ButtonGroup> 46802 * <Button variant="primary">Button 1</Button> 46803 * <Button variant="primary">Button 2</Button> 46804 * </ButtonGroup> 46805 * ); 46806 * ``` 46807 */ 46808const ButtonGroup = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedButtonGroup); 46809/* harmony default export */ const button_group = (ButtonGroup); 46810 46811;// CONCATENATED MODULE: ./packages/components/build-module/elevation/styles.js 46812function 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)."; } 46813/** 46814 * External dependencies 46815 */ 46816 46817const Elevation = true ? { 46818 name: "12ip69d", 46819 styles: "background:transparent;display:block;margin:0!important;pointer-events:none;position:absolute;will-change:box-shadow" 46820} : 0; 46821 46822;// CONCATENATED MODULE: ./packages/components/build-module/elevation/hook.js 46823/** 46824 * External dependencies 46825 */ 46826 46827 46828 46829/** 46830 * WordPress dependencies 46831 */ 46832 46833 46834/** 46835 * Internal dependencies 46836 */ 46837 46838 46839 46840 46841 46842 46843function getBoxShadow(value) { 46844 const boxShadowColor = `rgba(0, 0, 0, ${value / 20})`; 46845 const boxShadow = `0 ${value}px ${value * 2}px 0 46846 ${boxShadowColor}`; 46847 return boxShadow; 46848} 46849function useElevation(props) { 46850 const { 46851 active, 46852 borderRadius = 'inherit', 46853 className, 46854 focus, 46855 hover, 46856 isInteractive = false, 46857 offset = 0, 46858 value = 0, 46859 ...otherProps 46860 } = useContextSystem(props, 'Elevation'); 46861 const cx = useCx(); 46862 const classes = (0,external_wp_element_namespaceObject.useMemo)(() => { 46863 let hoverValue = isValueDefined(hover) ? hover : value * 2; 46864 let activeValue = isValueDefined(active) ? active : value / 2; 46865 if (!isInteractive) { 46866 hoverValue = isValueDefined(hover) ? hover : undefined; 46867 activeValue = isValueDefined(active) ? active : undefined; 46868 } 46869 const transition = `box-shadow ${config_values.transitionDuration} ${config_values.transitionTimingFunction}`; 46870 const sx = {}; 46871 sx.Base = /*#__PURE__*/emotion_react_browser_esm_css({ 46872 borderRadius, 46873 bottom: offset, 46874 boxShadow: getBoxShadow(value), 46875 opacity: config_values.elevationIntensity, 46876 left: offset, 46877 right: offset, 46878 top: offset, 46879 transition 46880 }, reduceMotion('transition'), true ? "" : 0, true ? "" : 0); 46881 if (isValueDefined(hoverValue)) { 46882 sx.hover = /*#__PURE__*/emotion_react_browser_esm_css("*:hover>&{box-shadow:", getBoxShadow(hoverValue), ";}" + ( true ? "" : 0), true ? "" : 0); 46883 } 46884 if (isValueDefined(activeValue)) { 46885 sx.active = /*#__PURE__*/emotion_react_browser_esm_css("*:active>&{box-shadow:", getBoxShadow(activeValue), ";}" + ( true ? "" : 0), true ? "" : 0); 46886 } 46887 if (isValueDefined(focus)) { 46888 sx.focus = /*#__PURE__*/emotion_react_browser_esm_css("*:focus>&{box-shadow:", getBoxShadow(focus), ";}" + ( true ? "" : 0), true ? "" : 0); 46889 } 46890 return cx(Elevation, sx.Base, sx.hover, sx.focus, sx.active, className); 46891 }, [active, borderRadius, className, cx, focus, hover, isInteractive, offset, value]); 46892 return { 46893 ...otherProps, 46894 className: classes, 46895 'aria-hidden': true 46896 }; 46897} 46898 46899;// CONCATENATED MODULE: ./packages/components/build-module/elevation/component.js 46900 46901/** 46902 * External dependencies 46903 */ 46904 46905/** 46906 * Internal dependencies 46907 */ 46908 46909 46910 46911 46912function UnconnectedElevation(props, forwardedRef) { 46913 const elevationProps = useElevation(props); 46914 return (0,external_wp_element_namespaceObject.createElement)(component, { 46915 ...elevationProps, 46916 ref: forwardedRef 46917 }); 46918} 46919 46920/** 46921 * `Elevation` is a core component that renders shadow, using the component 46922 * system's shadow system. 46923 * 46924 * The shadow effect is generated using the `value` prop. 46925 * 46926 * ```jsx 46927 * import { 46928 * __experimentalElevation as Elevation, 46929 * __experimentalSurface as Surface, 46930 * __experimentalText as Text, 46931 * } from '@wordpress/components'; 46932 * 46933 * function Example() { 46934 * return ( 46935 * <Surface> 46936 * <Text>Code is Poetry</Text> 46937 * <Elevation value={ 5 } /> 46938 * </Surface> 46939 * ); 46940 * } 46941 * ``` 46942 */ 46943const component_Elevation = contextConnect(UnconnectedElevation, 'Elevation'); 46944/* harmony default export */ const elevation_component = (component_Elevation); 46945 46946;// CONCATENATED MODULE: ./packages/components/build-module/card/styles.js 46947function 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)."; } 46948/** 46949 * External dependencies 46950 */ 46951 46952 46953/** 46954 * Internal dependencies 46955 */ 46956 46957 46958// Since the border for `Card` is rendered via the `box-shadow` property 46959// (as opposed to the `border` property), the value of the border radius needs
46960// to be adjusted by removing 1px (this is because the `box-shadow` renders 46961// as an "outer radius"). 46962const adjustedBorderRadius = `calc(${config_values.cardBorderRadius} - 1px)`; 46963const Card = /*#__PURE__*/emotion_react_browser_esm_css("box-shadow:0 0 0 1px ", config_values.surfaceBorderColor, ";outline:none;" + ( true ? "" : 0), true ? "" : 0); 46964const styles_Header = true ? { 46965 name: "1showjb", 46966 styles: "border-bottom:1px solid;box-sizing:border-box;&:last-child{border-bottom:none;}" 46967} : 0; 46968const Footer = true ? { 46969 name: "14n5oej", 46970 styles: "border-top:1px solid;box-sizing:border-box;&:first-of-type{border-top:none;}" 46971} : 0; 46972const Content = true ? { 46973 name: "13udsys", 46974 styles: "height:100%" 46975} : 0; 46976const Body = true ? { 46977 name: "6ywzd", 46978 styles: "box-sizing:border-box;height:auto;max-height:100%" 46979} : 0; 46980const Media = true ? { 46981 name: "dq805e", 46982 styles: "box-sizing:border-box;overflow:hidden;&>img,&>iframe{display:block;height:auto;max-width:100%;width:100%;}" 46983} : 0; 46984const Divider = true ? { 46985 name: "c990dr", 46986 styles: "box-sizing:border-box;display:block;width:100%" 46987} : 0; 46988const 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); 46989const borderColor = /*#__PURE__*/emotion_react_browser_esm_css("border-color:", config_values.colorDivider, ";" + ( true ? "" : 0), true ? "" : 0); 46990const boxShadowless = true ? { 46991 name: "1t90u8d", 46992 styles: "box-shadow:none" 46993} : 0; 46994const borderless = true ? { 46995 name: "1e1ncky", 46996 styles: "border:none" 46997} : 0; 46998const rounded = /*#__PURE__*/emotion_react_browser_esm_css("border-radius:", adjustedBorderRadius, ";" + ( true ? "" : 0), true ? "" : 0); 46999const xSmallCardPadding = /*#__PURE__*/emotion_react_browser_esm_css("padding:", config_values.cardPaddingXSmall, ";" + ( true ? "" : 0), true ? "" : 0); 47000const cardPaddings = { 47001 large: /*#__PURE__*/emotion_react_browser_esm_css("padding:", config_values.cardPaddingLarge, ";" + ( true ? "" : 0), true ? "" : 0), 47002 medium: /*#__PURE__*/emotion_react_browser_esm_css("padding:", config_values.cardPaddingMedium, ";" + ( true ? "" : 0), true ? "" : 0), 47003 small: /*#__PURE__*/emotion_react_browser_esm_css("padding:", config_values.cardPaddingSmall, ";" + ( true ? "" : 0), true ? "" : 0), 47004 xSmall: xSmallCardPadding, 47005 // The `extraSmall` size is not officially documented, but the following styles 47006 // are kept for legacy reasons to support older values of the `size` prop. 47007 extraSmall: xSmallCardPadding 47008}; 47009const shady = /*#__PURE__*/emotion_react_browser_esm_css("background-color:", COLORS.ui.backgroundDisabled, ";" + ( true ? "" : 0), true ? "" : 0); 47010 47011;// CONCATENATED MODULE: ./packages/components/build-module/surface/styles.js 47012/** 47013 * External dependencies 47014 */ 47015 47016 47017/** 47018 * Internal dependencies 47019 */ 47020 47021const Surface = /*#__PURE__*/emotion_react_browser_esm_css("background-color:", config_values.surfaceColor, ";color:", COLORS.gray[900], ";position:relative;" + ( true ? "" : 0), true ? "" : 0); 47022const background = /*#__PURE__*/emotion_react_browser_esm_css("background-color:", config_values.surfaceBackgroundColor, ";" + ( true ? "" : 0), true ? "" : 0); 47023function getBorders({ 47024 borderBottom, 47025 borderLeft, 47026 borderRight, 47027 borderTop 47028}) { 47029 const borderStyle = `1px solid ${config_values.surfaceBorderColor}`; 47030 return /*#__PURE__*/emotion_react_browser_esm_css({ 47031 borderBottom: borderBottom ? borderStyle : undefined, 47032 borderLeft: borderLeft ? borderStyle : undefined, 47033 borderRight: borderRight ? borderStyle : undefined, 47034 borderTop: borderTop ? borderStyle : undefined 47035 }, true ? "" : 0, true ? "" : 0); 47036} 47037const primary = /*#__PURE__*/emotion_react_browser_esm_css( true ? "" : 0, true ? "" : 0); 47038const secondary = /*#__PURE__*/emotion_react_browser_esm_css("background:", config_values.surfaceBackgroundTintColor, ";" + ( true ? "" : 0), true ? "" : 0);
47039const tertiary = /*#__PURE__*/emotion_react_browser_esm_css("background:", config_values.surfaceBackgroundTertiaryColor, ";" + ( true ? "" : 0), true ? "" : 0); 47040const customBackgroundSize = surfaceBackgroundSize => [surfaceBackgroundSize, surfaceBackgroundSize].join(' '); 47041const dottedBackground1 = surfaceBackgroundSizeDotted => ['90deg', [config_values.surfaceBackgroundColor, surfaceBackgroundSizeDotted].join(' '), 'transparent 1%'].join(','); 47042const dottedBackground2 = surfaceBackgroundSizeDotted => [[config_values.surfaceBackgroundColor, surfaceBackgroundSizeDotted].join(' '), 'transparent 1%'].join(','); 47043const dottedBackgroundCombined = surfaceBackgroundSizeDotted => [`linear-gradient( ${dottedBackground1(surfaceBackgroundSizeDotted)} ) center`, `linear-gradient( ${dottedBackground2(surfaceBackgroundSizeDotted)} ) center`, config_values.surfaceBorderBoldColor].join(','); 47044const getDotted = (surfaceBackgroundSize, surfaceBackgroundSizeDotted) => /*#__PURE__*/emotion_react_browser_esm_css("background:", dottedBackgroundCombined(surfaceBackgroundSizeDotted), ";background-size:", customBackgroundSize(surfaceBackgroundSize), ";" + ( true ? "" : 0), true ? "" : 0); 47045const gridBackground1 = [`${config_values.surfaceBorderSubtleColor} 1px`, 'transparent 1px'].join(','); 47046const gridBackground2 = ['90deg', `${config_values.surfaceBorderSubtleColor} 1px`, 'transparent 1px'].join(','); 47047const gridBackgroundCombined = [`linear-gradient( ${gridBackground1} )`, `linear-gradient( ${gridBackground2} )`].join(','); 47048const getGrid = surfaceBackgroundSize => { 47049 return /*#__PURE__*/emotion_react_browser_esm_css("background:", config_values.surfaceBackgroundColor, ";background-image:", gridBackgroundCombined, ";background-size:", customBackgroundSize(surfaceBackgroundSize), ";" + ( true ? "" : 0), true ? "" : 0); 47050}; 47051const getVariant = (variant, surfaceBackgroundSize, surfaceBackgroundSizeDotted) => { 47052 switch (variant) { 47053 case 'dotted': 47054 { 47055 return getDotted(surfaceBackgroundSize, surfaceBackgroundSizeDotted); 47056 } 47057 case 'grid': 47058 { 47059 return getGrid(surfaceBackgroundSize); 47060 } 47061 case 'primary': 47062 { 47063 return primary; 47064 } 47065 case 'secondary': 47066 { 47067 return secondary; 47068 } 47069 case 'tertiary': 47070 { 47071 return tertiary; 47072 } 47073 } 47074}; 47075 47076;// CONCATENATED MODULE: ./packages/components/build-module/surface/hook.js 47077/** 47078 * WordPress dependencies 47079 */ 47080 47081 47082/** 47083 * Internal dependencies 47084 */ 47085 47086 47087 47088function useSurface(props) { 47089 const { 47090 backgroundSize = 12, 47091 borderBottom = false, 47092 borderLeft = false, 47093 borderRight = false, 47094 borderTop = false, 47095 className, 47096 variant = 'primary', 47097 ...otherProps 47098 } = useContextSystem(props, 'Surface'); 47099 const cx = useCx(); 47100 const classes = (0,external_wp_element_namespaceObject.useMemo)(() => { 47101 const sx = { 47102 borders: getBorders({ 47103 borderBottom, 47104 borderLeft, 47105 borderRight, 47106 borderTop 47107 }) 47108 }; 47109 return cx(Surface, sx.borders, getVariant(variant, `${backgroundSize}px`, `${backgroundSize - 1}px`), className); 47110 }, [backgroundSize, borderBottom, borderLeft, borderRight, borderTop, className, cx, variant]); 47111 return { 47112 ...otherProps, 47113 className: classes 47114 }; 47115} 47116 47117;// CONCATENATED MODULE: ./packages/components/build-module/card/card/hook.js 47118/** 47119 * WordPress dependencies 47120 */ 47121 47122 47123 47124/** 47125 * Internal dependencies 47126 */ 47127 47128 47129 47130 47131 47132function hook_useDeprecatedProps({ 47133 elevation, 47134 isElevated, 47135 ...otherProps 47136}) { 47137 const propsToReturn = { 47138 ...otherProps 47139 }; 47140 let computedElevation = elevation; 47141 if (isElevated) { 47142 var _computedElevation; 47143 external_wp_deprecated_default()('Card isElevated prop', { 47144 since: '5.9', 47145 alternative: 'elevation' 47146 }); 47147 (_computedElevation = computedElevation) !== null && _computedElevation !== void 0 ? _computedElevation : computedElevation = 2; 47148 } 47149 47150 // The `elevation` prop should only be passed when it's not `undefined`, 47151 // otherwise it will override the value that gets derived from `useContextSystem`. 47152 if (typeof computedElevation !== 'undefined') { 47153 propsToReturn.elevation = computedElevation; 47154 } 47155 return propsToReturn; 47156} 47157function useCard(props) { 47158 const { 47159 className, 47160 elevation = 0, 47161 isBorderless = false, 47162 isRounded = true, 47163 size = 'medium', 47164 ...otherProps 47165 } = useContextSystem(hook_useDeprecatedProps(props), 'Card'); 47166 const cx = useCx(); 47167 const classes = (0,external_wp_element_namespaceObject.useMemo)(() => { 47168 return cx(Card, isBorderless && boxShadowless, isRounded && rounded, className); 47169 }, [className, cx, isBorderless, isRounded]); 47170 const surfaceProps = useSurface({ 47171 ...otherProps, 47172 className: classes 47173 }); 47174 return { 47175 ...surfaceProps, 47176 elevation, 47177 isBorderless, 47178 isRounded, 47179 size 47180 }; 47181} 47182 47183;// CONCATENATED MODULE: ./packages/components/build-module/card/card/component.js 47184 47185/** 47186 * External dependencies 47187 */ 47188
47189/** 47190 * WordPress dependencies 47191 */ 47192 47193 47194/** 47195 * Internal dependencies 47196 */ 47197 47198 47199 47200 47201 47202 47203 47204 47205function UnconnectedCard(props, forwardedRef) { 47206 const { 47207 children, 47208 elevation, 47209 isBorderless, 47210 isRounded, 47211 size, 47212 ...otherProps 47213 } = useCard(props); 47214 const elevationBorderRadius = isRounded ? config_values.cardBorderRadius : 0; 47215 const cx = useCx(); 47216 const elevationClassName = (0,external_wp_element_namespaceObject.useMemo)(() => cx( /*#__PURE__*/emotion_react_browser_esm_css({ 47217 borderRadius: elevationBorderRadius 47218 }, true ? "" : 0, true ? "" : 0)), [cx, elevationBorderRadius]); 47219 const contextProviderValue = (0,external_wp_element_namespaceObject.useMemo)(() => { 47220 const contextProps = { 47221 size, 47222 isBorderless 47223 }; 47224 return { 47225 CardBody: contextProps, 47226 CardHeader: contextProps, 47227 CardFooter: contextProps 47228 }; 47229 }, [isBorderless, size]); 47230 return (0,external_wp_element_namespaceObject.createElement)(ContextSystemProvider, { 47231 value: contextProviderValue 47232 }, (0,external_wp_element_namespaceObject.createElement)(component, { 47233 ...otherProps, 47234 ref: forwardedRef 47235 }, (0,external_wp_element_namespaceObject.createElement)(component, { 47236 className: cx(Content) 47237 }, children), (0,external_wp_element_namespaceObject.createElement)(elevation_component, { 47238 className: elevationClassName, 47239 isInteractive: false, 47240 value: elevation ? 1 : 0 47241 }), (0,external_wp_element_namespaceObject.createElement)(elevation_component, { 47242 className: elevationClassName, 47243 isInteractive: false, 47244 value: elevation 47245 }))); 47246} 47247 47248/** 47249 * `Card` provides a flexible and extensible content container. 47250 * `Card` also provides a convenient set of sub-components such as `CardBody`, 47251 * `CardHeader`, `CardFooter`, and more. 47252 * 47253 * ```jsx 47254 * import { 47255 * Card, 47256 * CardHeader, 47257 * CardBody, 47258 * CardFooter, 47259 * __experimentalText as Text, 47260 * __experimentalHeading as Heading, 47261 * } from `@wordpress/components`; 47262 * 47263 * function Example() { 47264 * return ( 47265 * <Card> 47266 * <CardHeader> 47267 * <Heading level={ 4 }>Card Title</Heading> 47268 * </CardHeader> 47269 * <CardBody> 47270 * <Text>Card Content</Text> 47271 * </CardBody> 47272 * <CardFooter> 47273 * <Text>Card Footer</Text> 47274 * </CardFooter> 47275 * </Card> 47276 * ); 47277 * } 47278 * ``` 47279 */ 47280const component_Card = contextConnect(UnconnectedCard, 'Card'); 47281/* harmony default export */ const card_component = (component_Card); 47282 47283;// CONCATENATED MODULE: ./packages/components/build-module/scrollable/styles.js 47284function 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)."; } 47285/** 47286 * External dependencies 47287 */ 47288 47289 47290/** 47291 * Internal dependencies 47292 */ 47293 47294const 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); 47295const Scrollable = true ? { 47296 name: "13udsys", 47297 styles: "height:100%" 47298} : 0; 47299const styles_Content = true ? { 47300 name: "bjn8wh", 47301 styles: "position:relative" 47302} : 0; 47303const styles_smoothScroll = true ? { 47304 name: "7zq9w", 47305 styles: "scroll-behavior:smooth" 47306} : 0; 47307const scrollX = true ? { 47308 name: "q33xhg", 47309 styles: "overflow-x:auto;overflow-y:hidden" 47310} : 0; 47311const scrollY = true ? { 47312 name: "103x71s", 47313 styles: "overflow-x:hidden;overflow-y:auto" 47314} : 0; 47315const scrollAuto = true ? { 47316 name: "umwchj", 47317 styles: "overflow-y:auto" 47318} : 0; 47319 47320;// CONCATENATED MODULE: ./packages/components/build-module/scrollable/hook.js 47321/** 47322 * WordPress dependencies 47323 */ 47324 47325 47326/** 47327 * Internal dependencies 47328 */ 47329 47330 47331 47332 47333function useScrollable(props) { 47334 const { 47335 className, 47336 scrollDirection = 'y', 47337 smoothScroll = false, 47338 ...otherProps 47339 } = useContextSystem(props, 'Scrollable'); 47340 const cx = useCx(); 47341 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]); 47342 return { 47343 ...otherProps, 47344 className: classes 47345 }; 47346} 47347 47348;// CONCATENATED MODULE: ./packages/components/build-module/scrollable/component.js 47349 47350/** 47351 * External dependencies 47352 */ 47353
47354/** 47355 * Internal dependencies 47356 */ 47357 47358 47359 47360 47361function UnconnectedScrollable(props, forwardedRef) { 47362 const scrollableProps = useScrollable(props); 47363 return (0,external_wp_element_namespaceObject.createElement)(component, { 47364 ...scrollableProps, 47365 ref: forwardedRef 47366 }); 47367} 47368 47369/** 47370 * `Scrollable` is a layout component that content in a scrollable container. 47371 * 47372 * ```jsx 47373 * import { __experimentalScrollable as Scrollable } from `@wordpress/components`; 47374 * 47375 * function Example() { 47376 * return ( 47377 * <Scrollable style={ { maxHeight: 200 } }> 47378 * <div style={ { height: 500 } }>...</div> 47379 * </Scrollable> 47380 * ); 47381 * } 47382 * ``` 47383 */ 47384const component_Scrollable = contextConnect(UnconnectedScrollable, 'Scrollable'); 47385/* harmony default export */ const scrollable_component = (component_Scrollable); 47386 47387;// CONCATENATED MODULE: ./packages/components/build-module/card/card-body/hook.js 47388/** 47389 * WordPress dependencies 47390 */ 47391 47392 47393/** 47394 * Internal dependencies 47395 */ 47396 47397 47398 47399 47400function useCardBody(props) { 47401 const { 47402 className, 47403 isScrollable = false, 47404 isShady = false, 47405 size = 'medium', 47406 ...otherProps 47407 } = useContextSystem(props, 'CardBody'); 47408 const cx = useCx(); 47409 const classes = (0,external_wp_element_namespaceObject.useMemo)(() => cx(Body, borderRadius, cardPaddings[size], isShady && shady, 47410 // This classname is added for legacy compatibility reasons. 47411 'components-card__body', className), [className, cx, isShady, size]); 47412 return { 47413 ...otherProps, 47414 className: classes, 47415 isScrollable 47416 }; 47417} 47418 47419;// CONCATENATED MODULE: ./packages/components/build-module/card/card-body/component.js 47420 47421/** 47422 * External dependencies 47423 */ 47424 47425/** 47426 * Internal dependencies 47427 */ 47428 47429 47430 47431 47432 47433function UnconnectedCardBody(props, forwardedRef) { 47434 const { 47435 isScrollable, 47436 ...otherProps 47437 } = useCardBody(props); 47438 if (isScrollable) { 47439 return (0,external_wp_element_namespaceObject.createElement)(scrollable_component, { 47440 ...otherProps, 47441 ref: forwardedRef 47442 }); 47443 } 47444 return (0,external_wp_element_namespaceObject.createElement)(component, { 47445 ...otherProps, 47446 ref: forwardedRef 47447 }); 47448} 47449 47450/** 47451 * `CardBody` renders an optional content area for a `Card`. 47452 * Multiple `CardBody` components can be used within `Card` if needed. 47453 * 47454 * ```jsx 47455 * import { Card, CardBody } from `@wordpress/components`; 47456 * 47457 * <Card> 47458 * <CardBody> 47459 * ... 47460 * </CardBody> 47461 * </Card> 47462 * ``` 47463 */ 47464const CardBody = contextConnect(UnconnectedCardBody, 'CardBody'); 47465/* harmony default export */ const card_body_component = (CardBody); 47466 47467;// CONCATENATED MODULE: ./node_modules/reakit/es/Separator/Separator.js 47468 47469 47470 47471 47472 47473 47474// Automatically generated 47475var SEPARATOR_KEYS = ["orientation"]; 47476 47477var useSeparator = createHook({ 47478 name: "Separator", 47479 compose: useRole, 47480 keys: SEPARATOR_KEYS, 47481 useOptions: function useOptions(_ref) { 47482 var _ref$orientation = _ref.orientation, 47483 orientation = _ref$orientation === void 0 ? "horizontal" : _ref$orientation, 47484 options = _rollupPluginBabelHelpers_1f0bf8c2_objectWithoutPropertiesLoose(_ref, ["orientation"]); 47485 47486 return _objectSpread2({ 47487 orientation: orientation 47488 }, options); 47489 }, 47490 useProps: function useProps(options, htmlProps) { 47491 return _objectSpread2({ 47492 role: "separator", 47493 "aria-orientation": options.orientation 47494 }, htmlProps); 47495 } 47496}); 47497var Separator = createComponent({ 47498 as: "hr", 47499 memo: true, 47500 useHook: useSeparator 47501}); 47502 47503 47504 47505;// CONCATENATED MODULE: ./packages/components/build-module/divider/styles.js 47506 47507function 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)."; } 47508/** 47509 * External dependencies 47510 */ 47511 47512 47513 47514/** 47515 * Internal dependencies 47516 */ 47517 47518 47519const MARGIN_DIRECTIONS = { 47520 vertical: { 47521 start: 'marginLeft', 47522 end: 'marginRight' 47523 }, 47524 horizontal: { 47525 start: 'marginTop', 47526 end: 'marginBottom' 47527 } 47528}; 47529 47530// Renders the correct margins given the Divider's `orientation` and the writing direction. 47531// When both the generic `margin` and the specific `marginStart|marginEnd` props are defined, 47532// the latter will take priority. 47533const renderMargin = ({ 47534 'aria-orientation': orientation = 'horizontal', 47535 margin, 47536 marginStart, 47537 marginEnd 47538}) =>
47538 /*#__PURE__*/emotion_react_browser_esm_css(rtl({ 47539 [MARGIN_DIRECTIONS[orientation].start]: space(marginStart !== null && marginStart !== void 0 ? marginStart : margin), 47540 [MARGIN_DIRECTIONS[orientation].end]: space(marginEnd !== null && marginEnd !== void 0 ? marginEnd : margin) 47541})(), true ? "" : 0, true ? "" : 0); 47542var styles_ref = true ? { 47543 name: "1u4hpl4", 47544 styles: "display:inline" 47545} : 0; 47546const renderDisplay = ({ 47547 'aria-orientation': orientation = 'horizontal' 47548}) => { 47549 return orientation === 'vertical' ? styles_ref : undefined; 47550}; 47551const renderBorder = ({ 47552 'aria-orientation': orientation = 'horizontal' 47553}) => { 47554 return /*#__PURE__*/emotion_react_browser_esm_css({ 47555 [orientation === 'vertical' ? 'borderRight' : 'borderBottom']: '1px solid currentColor' 47556 }, true ? "" : 0, true ? "" : 0); 47557}; 47558const renderSize = ({ 47559 'aria-orientation': orientation = 'horizontal' 47560}) => /*#__PURE__*/emotion_react_browser_esm_css({ 47561 height: orientation === 'vertical' ? 'auto' : 0, 47562 width: orientation === 'vertical' ? 0 : 'auto' 47563}, true ? "" : 0, true ? "" : 0); 47564const DividerView = emotion_styled_base_browser_esm("hr", true ? { 47565 target: "e19on6iw0" 47566} : 0)("border:0;margin:0;", renderDisplay, " ", renderBorder, " ", renderSize, " ", renderMargin, ";" + ( true ? "" : 0)); 47567 47568;// CONCATENATED MODULE: ./packages/components/build-module/divider/component.js 47569 47570/** 47571 * External dependencies 47572 */ 47573// eslint-disable-next-line no-restricted-imports 47574 47575 47576 47577function UnconnectedDivider(props, forwardedRef) { 47578 const contextProps = useContextSystem(props, 'Divider'); 47579 return (0,external_wp_element_namespaceObject.createElement)(Separator, { 47580 as: DividerView, 47581 ...contextProps, 47582 ref: forwardedRef 47583 }); 47584} 47585 47586/** 47587 * `Divider` is a layout component that separates groups of related content. 47588 * 47589 * ```js 47590 * import { 47591 * __experimentalDivider as Divider, 47592 * __experimentalText as Text, 47593 * __experimentalVStack as VStack, 47594 * } from `@wordpress/components`; 47595 * 47596 * function Example() { 47597 * return ( 47598 * <VStack spacing={4}> 47599 * <Text>Some text here</Text> 47600 * <Divider /> 47601 * <Text>Some more text here</Text> 47602 * </VStack> 47603 * ); 47604 * } 47605 * ``` 47606 */ 47607const component_Divider = contextConnect(UnconnectedDivider, 'Divider'); 47608/* harmony default export */ const divider_component = (component_Divider); 47609 47610;// CONCATENATED MODULE: ./packages/components/build-module/card/card-divider/hook.js 47611/** 47612 * WordPress dependencies 47613 */ 47614 47615 47616/** 47617 * Internal dependencies 47618 */ 47619 47620 47621 47622 47623function useCardDivider(props) { 47624 const { 47625 className, 47626 ...otherProps 47627 } = useContextSystem(props, 'CardDivider'); 47628 const cx = useCx(); 47629 const classes = (0,external_wp_element_namespaceObject.useMemo)(() => cx(Divider, borderColor, 47630 // This classname is added for legacy compatibility reasons. 47631 'components-card__divider', className), [className, cx]); 47632 return { 47633 ...otherProps, 47634 className: classes 47635 }; 47636} 47637 47638;// CONCATENATED MODULE: ./packages/components/build-module/card/card-divider/component.js 47639 47640/** 47641 * External dependencies 47642 */ 47643 47644/** 47645 * Internal dependencies 47646 */ 47647 47648 47649 47650 47651function UnconnectedCardDivider(props, forwardedRef) { 47652 const dividerProps = useCardDivider(props); 47653 return (0,external_wp_element_namespaceObject.createElement)(divider_component, { 47654 ...dividerProps, 47655 ref: forwardedRef 47656 }); 47657} 47658 47659/** 47660 * `CardDivider` renders an optional divider within a `Card`. 47661 * It is typically used to divide multiple `CardBody` components from each other. 47662 * 47663 * ```jsx 47664 * import { Card, CardBody, CardDivider } from `@wordpress/components`; 47665 * 47666 * <Card> 47667 * <CardBody>...</CardBody> 47668 * <CardDivider /> 47669 * <CardBody>...</CardBody> 47670 * </Card> 47671 * ``` 47672 */ 47673const CardDivider = contextConnect(UnconnectedCardDivider, 'CardDivider'); 47674/* harmony default export */ const card_divider_component = (CardDivider); 47675 47676;// CONCATENATED MODULE: ./packages/components/build-module/card/card-footer/hook.js 47677/** 47678 * WordPress dependencies 47679 */ 47680 47681 47682/** 47683 * Internal dependencies 47684 */ 47685 47686 47687 47688 47689function useCardFooter(props) { 47690 const { 47691 className, 47692 justify, 47693 isBorderless = false, 47694 isShady = false, 47695 size = 'medium', 47696 ...otherProps 47697 } = useContextSystem(props, 'CardFooter'); 47698 const cx = useCx(); 47699 const classes = (0,external_wp_element_namespaceObject.useMemo)(() => cx(Footer, borderRadius, borderColor, cardPaddings[size], isBorderless && borderless, isShady && shady, 47700 // This classname is added for legacy compatibility reasons. 47701 'components-card__footer', className), [className, cx, isBorderless, isShady, size]); 47702 return { 47703 ...otherProps, 47704 className: classes, 47705 justify 47706 }; 47707} 47708 47709;// CONCATENATED MODULE: ./packages/components/build-module/card/card-footer/component.js 47710 47711/** 47712 * External dependencies 47713 */ 47714
47715/** 47716 * Internal dependencies 47717 */ 47718 47719 47720 47721 47722function UnconnectedCardFooter(props, forwardedRef) { 47723 const footerProps = useCardFooter(props); 47724 return (0,external_wp_element_namespaceObject.createElement)(flex_component, { 47725 ...footerProps, 47726 ref: forwardedRef 47727 }); 47728} 47729 47730/** 47731 * `CardFooter` renders an optional footer within a `Card`. 47732 * 47733 * ```jsx 47734 * import { Card, CardBody, CardFooter } from `@wordpress/components`; 47735 * 47736 * <Card> 47737 * <CardBody>...</CardBody> 47738 * <CardFooter>...</CardFooter> 47739 * </Card> 47740 * ``` 47741 */ 47742const CardFooter = contextConnect(UnconnectedCardFooter, 'CardFooter'); 47743/* harmony default export */ const card_footer_component = (CardFooter); 47744 47745;// CONCATENATED MODULE: ./packages/components/build-module/card/card-header/hook.js 47746/** 47747 * WordPress dependencies 47748 */ 47749 47750 47751/** 47752 * Internal dependencies 47753 */ 47754 47755 47756 47757 47758function useCardHeader(props) { 47759 const { 47760 className, 47761 isBorderless = false, 47762 isShady = false, 47763 size = 'medium', 47764 ...otherProps 47765 } = useContextSystem(props, 'CardHeader'); 47766 const cx = useCx(); 47767 const classes = (0,external_wp_element_namespaceObject.useMemo)(() => cx(styles_Header, borderRadius, borderColor, cardPaddings[size], isBorderless && borderless, isShady && shady, 47768 // This classname is added for legacy compatibility reasons. 47769 'components-card__header', className), [className, cx, isBorderless, isShady, size]); 47770 return { 47771 ...otherProps, 47772 className: classes 47773 }; 47774} 47775 47776;// CONCATENATED MODULE: ./packages/components/build-module/card/card-header/component.js 47777 47778/** 47779 * External dependencies 47780 */ 47781 47782/** 47783 * Internal dependencies 47784 */ 47785 47786 47787 47788 47789function UnconnectedCardHeader(props, forwardedRef) { 47790 const headerProps = useCardHeader(props); 47791 return (0,external_wp_element_namespaceObject.createElement)(flex_component, { 47792 ...headerProps, 47793 ref: forwardedRef 47794 }); 47795} 47796 47797/** 47798 * `CardHeader` renders an optional header within a `Card`. 47799 * 47800 * ```jsx 47801 * import { Card, CardBody, CardHeader } from `@wordpress/components`; 47802 * 47803 * <Card> 47804 * <CardHeader>...</CardHeader> 47805 * <CardBody>...</CardBody> 47806 * </Card> 47807 * ``` 47808 */ 47809const CardHeader = contextConnect(UnconnectedCardHeader, 'CardHeader'); 47810/* harmony default export */ const card_header_component = (CardHeader); 47811 47812;// CONCATENATED MODULE: ./packages/components/build-module/card/card-media/hook.js 47813/** 47814 * WordPress dependencies 47815 */ 47816 47817 47818/** 47819 * Internal dependencies 47820 */ 47821 47822 47823 47824 47825function useCardMedia(props) { 47826 const { 47827 className, 47828 ...otherProps 47829 } = useContextSystem(props, 'CardMedia'); 47830 const cx = useCx(); 47831 const classes = (0,external_wp_element_namespaceObject.useMemo)(() => cx(Media, borderRadius, 47832 // This classname is added for legacy compatibility reasons. 47833 'components-card__media', className), [className, cx]); 47834 return { 47835 ...otherProps, 47836 className: classes 47837 }; 47838} 47839 47840;// CONCATENATED MODULE: ./packages/components/build-module/card/card-media/component.js 47841 47842/** 47843 * External dependencies 47844 */ 47845 47846/** 47847 * Internal dependencies 47848 */ 47849 47850 47851 47852 47853function UnconnectedCardMedia(props, forwardedRef) { 47854 const cardMediaProps = useCardMedia(props); 47855 return (0,external_wp_element_namespaceObject.createElement)(component, { 47856 ...cardMediaProps, 47857 ref: forwardedRef 47858 }); 47859} 47860 47861/** 47862 * `CardMedia` provides a container for full-bleed content within a `Card`, 47863 * such as images, video, or even just a background color. 47864 * 47865 * @example 47866 * ```jsx 47867 * import { Card, CardBody, CardMedia } from '@wordpress/components'; 47868 * 47869 * const Example = () => ( 47870 * <Card> 47871 * <CardMedia> 47872 * <img src="..." /> 47873 * </CardMedia> 47874 * <CardBody>...</CardBody> 47875 * </Card> 47876 * ); 47877 * ``` 47878 */ 47879const CardMedia = contextConnect(UnconnectedCardMedia, 'CardMedia'); 47880/* harmony default export */ const card_media_component = (CardMedia); 47881 47882;// CONCATENATED MODULE: ./packages/components/build-module/checkbox-control/index.js 47883 47884/** 47885 * External dependencies 47886 */ 47887 47888/** 47889 * WordPress dependencies 47890 */ 47891 47892 47893 47894 47895 47896/** 47897 * Internal dependencies 47898 */ 47899 47900/** 47901 * Checkboxes allow the user to select one or more items from a set. 47902 * 47903 * ```jsx 47904 * import { CheckboxControl } from '@wordpress/components'; 47905 * import { useState } from '@wordpress/element'; 47906 * 47907 * const MyCheckboxControl = () => { 47908 * const [ isChecked, setChecked ] = useState( true ); 47909 * return ( 47910 * <CheckboxControl 47911 * label="Is author" 47912 * help="Is the user a author or not?" 47913 * checked={ isChecked } 47914 * onChange={ setChecked } 47915 * /> 47916 * ); 47917 * }; 47918 * ``` 47919 */ 47920function CheckboxControl(props) { 47921 const { 47922 __nextHasNoMarginBottom, 47923 label, 47924 className, 47925 heading, 47926 checked, 47927 indeterminate, 47928 help, 47929 id: idProp, 47930 onChange, 47931 ...additionalProps 47932 } = props; 47933 if (heading) { 47934 external_wp_deprecated_default()('`heading` prop in `CheckboxControl`', { 47935 alternative: 'a separate element to implement a heading', 47936 since: '5.8' 47937 }); 47938 } 47939 const [showCheckedIcon, setShowCheckedIcon] = (0,external_wp_element_namespaceObject.useState)(false); 47940 const [showIndeterminateIcon, setShowIndeterminateIcon] = (0,external_wp_element_namespaceObject.useState)(false); 47941 47942 // Run the following callback every time the `ref` (and the additional 47943 // dependencies) change. 47944 const ref = (0,external_wp_compose_namespaceObject.useRefEffect)(node => { 47945 if (!node) { 47946 return; 47947 } 47948 47949 // It cannot be set using an HTML attribute. 47950 node.indeterminate = !!indeterminate; 47951 setShowCheckedIcon(node.matches(':checked')); 47952 setShowIndeterminateIcon(node.matches(':indeterminate')); 47953 }, [checked, indeterminate]); 47954 const id = (0,external_wp_compose_namespaceObject.useInstanceId)(CheckboxControl, 'inspector-checkbox-control', idProp); 47955 const onChangeValue = event => onChange(event.target.checked); 47956 return (0,external_wp_element_namespaceObject.createElement)(base_control, { 47957 __nextHasNoMarginBottom: __nextHasNoMarginBottom, 47958 label: heading, 47959 id: id, 47960 help: help, 47961 className: classnames_default()('components-checkbox-control', className) 47962 }, (0,external_wp_element_namespaceObject.createElement)("span", { 47963 className: "components-checkbox-control__input-container" 47964 }, (0,external_wp_element_namespaceObject.createElement)("input", { 47965 ref: ref, 47966 id: id, 47967 className: "components-checkbox-control__input", 47968 type: "checkbox", 47969 value: "1", 47970 onChange: onChangeValue, 47971 checked: checked, 47972 "aria-describedby": !!help ? id + '__help' : undefined, 47973 ...additionalProps 47974 }), showIndeterminateIcon ? (0,external_wp_element_namespaceObject.createElement)(icons_build_module_icon, { 47975 icon: library_reset, 47976 className: "components-checkbox-control__indeterminate", 47977 role: "presentation" 47978 }) : null, showCheckedIcon ? (0,external_wp_element_namespaceObject.createElement)(icons_build_module_icon, { 47979 icon: library_check, 47980 className: "components-checkbox-control__checked", 47981 role: "presentation" 47982 }) : null), (0,external_wp_element_namespaceObject.createElement)("label", { 47983 className: "components-checkbox-control__label", 47984 htmlFor: id 47985 }, label)); 47986} 47987/* harmony default export */ const checkbox_control = (CheckboxControl); 47988 47989;// CONCATENATED MODULE: ./packages/components/build-module/clipboard-button/index.js 47990 47991/** 47992 * External dependencies 47993 */ 47994 47995 47996/** 47997 * WordPress dependencies 47998 */ 47999 48000 48001 48002 48003/** 48004 * Internal dependencies 48005 */ 48006 48007const TIMEOUT = 4000; 48008function ClipboardButton({ 48009 className, 48010 children, 48011 onCopy, 48012 onFinishCopy, 48013 text, 48014 ...buttonProps 48015}) { 48016 external_wp_deprecated_default()('wp.components.ClipboardButton', { 48017 since: '5.8', 48018 alternative: 'wp.compose.useCopyToClipboard' 48019 }); 48020 const timeoutId = (0,external_wp_element_namespaceObject.useRef)(); 48021 const ref = (0,external_wp_compose_namespaceObject.useCopyToClipboard)(text, () => { 48022 onCopy(); 48023 if (timeoutId.current) { 48024 clearTimeout(timeoutId.current); 48025 } 48026 if (onFinishCopy) { 48027 timeoutId.current = setTimeout(() => onFinishCopy(), TIMEOUT); 48028 } 48029 }); 48030 (0,external_wp_element_namespaceObject.useEffect)(() => { 48031 if (timeoutId.current) { 48032 clearTimeout(timeoutId.current); 48033 } 48034 }, []); 48035 const classes = classnames_default()('components-clipboard-button', className); 48036 48037 // Workaround for inconsistent behavior in Safari, where <textarea> is not 48038 // the document.activeElement at the moment when the copy event fires. 48039 // This causes documentHasSelection() in the copy-handler component to 48040 // mistakenly override the ClipboardButton, and copy a serialized string 48041 // of the current block instead. 48042 const focusOnCopyEventTarget = event => { 48043 // @ts-expect-error: Should be currentTarget, but not changing because this component is deprecated.
48044 event.target.focus(); 48045 }; 48046 return (0,external_wp_element_namespaceObject.createElement)(build_module_button, { 48047 ...buttonProps, 48048 className: classes, 48049 ref: ref, 48050 onCopy: focusOnCopyEventTarget 48051 }, children); 48052} 48053 48054;// CONCATENATED MODULE: ./packages/icons/build-module/library/more-vertical.js 48055 48056/** 48057 * WordPress dependencies 48058 */ 48059 48060const moreVertical = (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.SVG, { 48061 xmlns: "http://www.w3.org/2000/svg", 48062 viewBox: "0 0 24 24" 48063}, (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.Path, { 48064 d: "M13 19h-2v-2h2v2zm0-6h-2v-2h2v2zm0-6h-2V5h2v2z" 48065})); 48066/* harmony default export */ const more_vertical = (moreVertical); 48067 48068;// CONCATENATED MODULE: ./packages/components/build-module/item-group/styles.js 48069function 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)."; } 48070/** 48071 * External dependencies 48072 */ 48073 48074 48075/** 48076 * Internal dependencies 48077 */ 48078 48079const unstyledButton = as => { 48080 return /*#__PURE__*/emotion_react_browser_esm_css("font-size:", font('default.fontSize'), ";font-family:inherit;appearance:none;border:1px solid transparent;cursor:pointer;background:none;text-align:start;text-decoration:", as === 'a' ? 'none' : undefined, ";svg,path{fill:currentColor;}&:hover{color:", COLORS.theme.accent, ";}&:focus{box-shadow:none;outline:none;}&:focus-visible{box-shadow:0 0 0 var( --wp-admin-border-width-focus ) var(\n\t\t\t\t\t--wp-components-color-accent,\n\t\t\t\t\tvar( --wp-admin-theme-color, ", COLORS.theme.accent, " )\n\t\t\t\t);outline:2px solid transparent;outline-offset:0;}" + ( true ? "" : 0), true ? "" : 0); 48081}; 48082const itemWrapper = true ? { 48083 name: "1bcj5ek", 48084 styles: "width:100%;display:block" 48085} : 0; 48086const item = true ? { 48087 name: "150ruhm", 48088 styles: "box-sizing:border-box;width:100%;display:block;margin:0;color:inherit" 48089} : 0; 48090const bordered = /*#__PURE__*/emotion_react_browser_esm_css("border:1px solid ", config_values.surfaceBorderColor, ";" + ( true ? "" : 0), true ? "" : 0); 48091const 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); 48092const styles_borderRadius = config_values.controlBorderRadius; 48093const styles_spacedAround = /*#__PURE__*/emotion_react_browser_esm_css("border-radius:", styles_borderRadius, ";" + ( true ? "" : 0), true ? "" : 0); 48094const 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); 48095const baseFontHeight = `calc(${config_values.fontSize} * ${config_values.fontLineHeightBase})`; 48096 48097/* 48098 * Math: 48099 * - Use the desired height as the base value 48100 * - Subtract the computed height of (default) text 48101 * - Subtract the effects of border 48102 * - Divide the calculated number by 2, in order to get an individual top/bottom padding 48103 */ 48104const paddingY = `calc((${config_values.controlHeight} - ${baseFontHeight} - 2px) / 2)`; 48105const paddingYSmall = `calc((${config_values.controlHeightSmall} - ${baseFontHeight} - 2px) / 2)`; 48106const paddingYLarge = `calc((${config_values.controlHeightLarge} - ${baseFontHeight} - 2px) / 2)`; 48107const itemSizes = { 48108 small: /*#__PURE__*/emotion_react_browser_esm_css("padding:", paddingYSmall, " ", config_values.controlPaddingXSmall, ";" + ( true ? "" : 0), true ? "" : 0), 48109 medium: /*#__PURE__*/emotion_react_browser_esm_css("padding:", paddingY, " ", config_values.controlPaddingX, ";" + ( true ? "" : 0), true ? "" : 0),
48110 large: /*#__PURE__*/emotion_react_browser_esm_css("padding:", paddingYLarge, " ", config_values.controlPaddingXLarge, ";" + ( true ? "" : 0), true ? "" : 0) 48111}; 48112 48113;// CONCATENATED MODULE: ./packages/components/build-module/item-group/item-group/hook.js 48114/** 48115 * Internal dependencies 48116 */ 48117 48118 48119 48120/** 48121 * Internal dependencies 48122 */ 48123 48124 48125function useItemGroup(props) { 48126 const { 48127 className, 48128 isBordered = false, 48129 isRounded = true, 48130 isSeparated = false, 48131 role = 'list', 48132 ...otherProps 48133 } = useContextSystem(props, 'ItemGroup'); 48134 const cx = useCx(); 48135 const classes = cx(isBordered && bordered, isSeparated && separated, isRounded && styles_rounded, className); 48136 return { 48137 isBordered, 48138 className: classes, 48139 role, 48140 isSeparated, 48141 ...otherProps 48142 }; 48143} 48144 48145;// CONCATENATED MODULE: ./packages/components/build-module/item-group/context.js 48146/** 48147 * WordPress dependencies 48148 */ 48149 48150 48151/** 48152 * Internal dependencies 48153 */ 48154 48155const ItemGroupContext = (0,external_wp_element_namespaceObject.createContext)({ 48156 size: 'medium' 48157}); 48158const useItemGroupContext = () => (0,external_wp_element_namespaceObject.useContext)(ItemGroupContext); 48159 48160;// CONCATENATED MODULE: ./packages/components/build-module/item-group/item-group/component.js 48161 48162/** 48163 * External dependencies 48164 */ 48165 48166/** 48167 * Internal dependencies 48168 */ 48169 48170 48171 48172 48173 48174function UnconnectedItemGroup(props, forwardedRef) { 48175 const { 48176 isBordered, 48177 isSeparated, 48178 size: sizeProp, 48179 ...otherProps 48180 } = useItemGroup(props); 48181 const { 48182 size: contextSize 48183 } = useItemGroupContext(); 48184 const spacedAround = !isBordered && !isSeparated; 48185 const size = sizeProp || contextSize; 48186 const contextValue = { 48187 spacedAround, 48188 size 48189 }; 48190 return (0,external_wp_element_namespaceObject.createElement)(ItemGroupContext.Provider, { 48191 value: contextValue 48192 }, (0,external_wp_element_namespaceObject.createElement)(component, { 48193 ...otherProps, 48194 ref: forwardedRef 48195 })); 48196} 48197 48198/** 48199 * `ItemGroup` displays a list of `Item`s grouped and styled together. 48200 * 48201 * ```jsx 48202 * import { 48203 * __experimentalItemGroup as ItemGroup, 48204 * __experimentalItem as Item, 48205 * } from '@wordpress/components'; 48206 * 48207 * function Example() { 48208 * return ( 48209 * <ItemGroup> 48210 * <Item>Code</Item> 48211 * <Item>is</Item> 48212 * <Item>Poetry</Item> 48213 * </ItemGroup> 48214 * ); 48215 * } 48216 * ``` 48217 */ 48218const ItemGroup = contextConnect(UnconnectedItemGroup, 'ItemGroup'); 48219/* harmony default export */ const item_group_component = (ItemGroup); 48220 48221;// CONCATENATED MODULE: ./packages/components/build-module/custom-gradient-picker/gradient-bar/constants.js 48222const GRADIENT_MARKERS_WIDTH = 16; 48223const INSERT_POINT_WIDTH = 16; 48224const MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT = 10; 48225const MINIMUM_DISTANCE_BETWEEN_POINTS = 0; 48226const MINIMUM_SIGNIFICANT_MOVE = 5; 48227const KEYBOARD_CONTROL_POINT_VARIATION = MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT; 48228const MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_MARKER = (INSERT_POINT_WIDTH + GRADIENT_MARKERS_WIDTH) / 2; 48229 48230;// CONCATENATED MODULE: ./packages/components/build-module/custom-gradient-picker/gradient-bar/utils.js 48231/** 48232 * Internal dependencies 48233 */ 48234 48235/** 48236 * Clamps a number between 0 and 100. 48237 * 48238 * @param value Value to clamp. 48239 * 48240 * @return Value clamped between 0 and 100. 48241 */ 48242function clampPercent(value) { 48243 return Math.max(0, Math.min(100, value)); 48244} 48245 48246/** 48247 * Check if a control point is overlapping with another. 48248 * 48249 * @param value Array of control points. 48250 * @param initialIndex Index of the position to test. 48251 * @param newPosition New position of the control point. 48252 * @param minDistance Distance considered to be overlapping. 48253 * 48254 * @return True if the point is overlapping. 48255 */ 48256function isOverlapping(value, initialIndex, newPosition, minDistance = MINIMUM_DISTANCE_BETWEEN_POINTS) { 48257 const initialPosition = value[initialIndex].position; 48258 const minPosition = Math.min(initialPosition, newPosition); 48259 const maxPosition = Math.max(initialPosition, newPosition); 48260 return value.some(({ 48261 position 48262 }, index) => { 48263 return index !== initialIndex && (Math.abs(position - newPosition) < minDistance || minPosition < position && position < maxPosition); 48264 }); 48265} 48266 48267/** 48268 * Adds a control point from an array and returns the new array. 48269 * 48270 * @param points Array of control points. 48271 * @param position Position to insert the new point. 48272 * @param color Color to update the control point at index. 48273 * 48274 * @return New array of control points. 48275 */ 48276function addControlPoint(points, position, color) { 48277 const nextIndex = points.findIndex(point => point.position > position); 48278 const newPoint = { 48279 color, 48280 position 48281 }; 48282 const newPoints = points.slice(); 48283 newPoints.splice(nextIndex - 1, 0, newPoint); 48284 return newPoints; 48285} 48286 48287/** 48288 * Removes a control point from an array and returns the new array. 48289 * 48290 * @param points Array of control points. 48291 * @param index Index to remove. 48292 * 48293 * @return New array of control points. 48294 */ 48295function removeControlPoint(points, index) { 48296 return points.filter((_point, pointIndex) => { 48297 return pointIndex !== index; 48298 }); 48299} 48300/** 48301 * Updates a control point from an array and returns the new array. 48302 * 48303 * @param points Array of control points. 48304 * @param index Index to update. 48305 * @param newPoint New control point to replace the index. 48306 * 48307 * @return New array of control points. 48308 */ 48309function updateControlPoint(points, index, newPoint) { 48310 const newValue = points.slice(); 48311 newValue[index] = newPoint; 48312 return newValue; 48313} 48314 48315/** 48316 * Updates the position of a control point from an array and returns the new array. 48317 * 48318 * @param points Array of control points. 48319 * @param index Index to update. 48320 * @param newPosition Position to move the control point at index. 48321 * 48322 * @return New array of control points. 48323 */ 48324function updateControlPointPosition(points, index, newPosition) { 48325 if (isOverlapping(points, index, newPosition)) { 48326 return points; 48327 } 48328 const newPoint = { 48329 ...points[index], 48330 position: newPosition 48331 }; 48332 return updateControlPoint(points, index, newPoint); 48333} 48334 48335/** 48336 * Updates the position of a control point from an array and returns the new array. 48337 * 48338 * @param points Array of control points. 48339 * @param index Index to update. 48340 * @param newColor Color to update the control point at index. 48341 * 48342 * @return New array of control points. 48343 */ 48344function updateControlPointColor(points, index, newColor) { 48345 const newPoint = { 48346 ...points[index], 48347 color: newColor 48348 }; 48349 return updateControlPoint(points, index, newPoint); 48350} 48351 48352/** 48353 * Updates the position of a control point from an array and returns the new array. 48354 * 48355 * @param points Array of control points. 48356 * @param position Position of the color stop. 48357 * @param newColor Color to update the control point at index. 48358 * 48359 * @return New array of control points. 48360 */ 48361function updateControlPointColorByPosition(points, position, newColor) { 48362 const index = points.findIndex(point => point.position === position); 48363 return updateControlPointColor(points, index, newColor); 48364} 48365 48366/** 48367 * Gets the horizontal coordinate when dragging a control point with the mouse. 48368 * 48369 * @param mouseXcoordinate Horizontal coordinate of the mouse position. 48370 * @param containerElement Container for the gradient picker. 48371 * 48372 * @return Whole number percentage from the left. 48373 */ 48374 48375function getHorizontalRelativeGradientPosition(mouseXCoordinate, containerElement) { 48376 if (!containerElement) { 48377 return; 48378 } 48379 const { 48380 x, 48381 width 48382 } = containerElement.getBoundingClientRect(); 48383 const absolutePositionValue = mouseXCoordinate - x; 48384 return Math.round(clampPercent(absolutePositionValue * 100 / width)); 48385} 48386 48387;// CONCATENATED MODULE: ./packages/components/build-module/custom-gradient-picker/gradient-bar/control-points.js 48388 48389/** 48390 * External dependencies 48391 */ 48392 48393 48394 48395/** 48396 * WordPress dependencies 48397 */ 48398 48399 48400 48401 48402 48403/** 48404 * Internal dependencies 48405 */ 48406 48407 48408 48409 48410 48411 48412 48413function ControlPointButton({ 48414 isOpen, 48415 position, 48416 color, 48417 ...additionalProps 48418}) { 48419 const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(ControlPointButton); 48420 const descriptionId = `components-custom-gradient-picker__control-point-button-description-${instanceId}`; 48421 return (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, (0,external_wp_element_namespaceObject.createElement)(build_module_button, { 48422 "aria-label": (0,external_wp_i18n_namespaceObject.sprintf)(
48423 // translators: %1$s: gradient position e.g: 70, %2$s: gradient color code e.g: rgb(52,121,151). 48424 (0,external_wp_i18n_namespaceObject.__)('Gradient control point at position %1$s%% with color code %2$s.'), position, color), 48425 "aria-describedby": descriptionId, 48426 "aria-haspopup": "true", 48427 "aria-expanded": isOpen, 48428 className: classnames_default()('components-custom-gradient-picker__control-point-button', { 48429 'is-active': isOpen 48430 }), 48431 ...additionalProps 48432 }), (0,external_wp_element_namespaceObject.createElement)(visually_hidden_component, { 48433 id: descriptionId 48434 }, (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.'))); 48435} 48436function GradientColorPickerDropdown({ 48437 isRenderedInSidebar, 48438 className, 48439 ...props 48440}) { 48441 // Open the popover below the gradient control/insertion point 48442 const popoverProps = (0,external_wp_element_namespaceObject.useMemo)(() => ({ 48443 placement: 'bottom', 48444 offset: 8 48445 }), []); 48446 const mergedClassName = classnames_default()('components-custom-gradient-picker__control-point-dropdown', className); 48447 return (0,external_wp_element_namespaceObject.createElement)(CustomColorPickerDropdown, { 48448 isRenderedInSidebar: isRenderedInSidebar, 48449 popoverProps: popoverProps, 48450 className: mergedClassName, 48451 ...props 48452 }); 48453} 48454function ControlPoints({ 48455 disableRemove, 48456 disableAlpha, 48457 gradientPickerDomRef, 48458 ignoreMarkerPosition, 48459 value: controlPoints, 48460 onChange, 48461 onStartControlPointChange, 48462 onStopControlPointChange, 48463 __experimentalIsRenderedInSidebar 48464}) { 48465 const controlPointMoveState = (0,external_wp_element_namespaceObject.useRef)(); 48466 const onMouseMove = event => { 48467 if (controlPointMoveState.current === undefined || gradientPickerDomRef.current === null) { 48468 return; 48469 } 48470 const relativePosition = getHorizontalRelativeGradientPosition(event.clientX, gradientPickerDomRef.current); 48471 const { 48472 initialPosition, 48473 index, 48474 significantMoveHappened 48475 } = controlPointMoveState.current; 48476 if (!significantMoveHappened && Math.abs(initialPosition - relativePosition) >= MINIMUM_SIGNIFICANT_MOVE) { 48477 controlPointMoveState.current.significantMoveHappened = true; 48478 } 48479 onChange(updateControlPointPosition(controlPoints, index, relativePosition)); 48480 }; 48481 const cleanEventListeners = () => { 48482 if (window && window.removeEventListener && controlPointMoveState.current && controlPointMoveState.current.listenersActivated) { 48483 window.removeEventListener('mousemove', onMouseMove); 48484 window.removeEventListener('mouseup', cleanEventListeners); 48485 onStopControlPointChange(); 48486 controlPointMoveState.current.listenersActivated = false; 48487 } 48488 }; 48489 48490 // Adding `cleanEventListeners` to the dependency array below requires the function itself to be wrapped in a `useCallback` 48491 // This memoization would prevent the event listeners from being properly cleaned. 48492 // Instead, we'll pass a ref to the function in our `useEffect` so `cleanEventListeners` itself is no longer a dependency. 48493 const cleanEventListenersRef = (0,external_wp_element_namespaceObject.useRef)(); 48494 cleanEventListenersRef.current = cleanEventListeners; 48495 (0,external_wp_element_namespaceObject.useEffect)(() => { 48496 return () => { 48497 cleanEventListenersRef.current?.(); 48498 }; 48499 }, []); 48500 return (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, controlPoints.map((point, index) => { 48501 const initialPosition = point?.position; 48502 return ignoreMarkerPosition !== initialPosition && (0,external_wp_element_namespaceObject.createElement)(GradientColorPickerDropdown, { 48503 isRenderedInSidebar: __experimentalIsRenderedInSidebar, 48504 key: index, 48505 onClose: onStopControlPointChange, 48506 renderToggle: ({ 48507 isOpen, 48508 onToggle 48509 }) => (0,external_wp_element_namespaceObject.createElement)(ControlPointButton, { 48510 key: index, 48511 onClick: () => { 48512 if (controlPointMoveState.current && controlPointMoveState.current.significantMoveHappened) { 48513 return; 48514 } 48515 if (isOpen) { 48516 onStopControlPointChange(); 48517 } else { 48518 onStartControlPointChange(); 48519 }
48520 onToggle(); 48521 }, 48522 onMouseDown: () => { 48523 if (window && window.addEventListener) { 48524 controlPointMoveState.current = { 48525 initialPosition, 48526 index, 48527 significantMoveHappened: false, 48528 listenersActivated: true 48529 }; 48530 onStartControlPointChange(); 48531 window.addEventListener('mousemove', onMouseMove); 48532 window.addEventListener('mouseup', cleanEventListeners); 48533 } 48534 }, 48535 onKeyDown: event => { 48536 if (event.code === 'ArrowLeft') { 48537 // Stop propagation of the key press event to avoid focus moving 48538 // to another editor area. 48539 event.stopPropagation(); 48540 onChange(updateControlPointPosition(controlPoints, index, clampPercent(point.position - KEYBOARD_CONTROL_POINT_VARIATION))); 48541 } else if (event.code === 'ArrowRight') { 48542 // Stop propagation of the key press event to avoid focus moving 48543 // to another editor area. 48544 event.stopPropagation(); 48545 onChange(updateControlPointPosition(controlPoints, index, clampPercent(point.position + KEYBOARD_CONTROL_POINT_VARIATION))); 48546 } 48547 }, 48548 isOpen: isOpen, 48549 position: point.position, 48550 color: point.color 48551 }), 48552 renderContent: ({ 48553 onClose 48554 }) => (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, (0,external_wp_element_namespaceObject.createElement)(LegacyAdapter, { 48555 enableAlpha: !disableAlpha, 48556 color: point.color, 48557 onChange: color => { 48558 onChange(updateControlPointColor(controlPoints, index, w(color).toRgbString())); 48559 } 48560 }), !disableRemove && controlPoints.length > 2 && (0,external_wp_element_namespaceObject.createElement)(h_stack_component, { 48561 className: "components-custom-gradient-picker__remove-control-point-wrapper", 48562 alignment: "center" 48563 }, (0,external_wp_element_namespaceObject.createElement)(build_module_button, { 48564 onClick: () => { 48565 onChange(removeControlPoint(controlPoints, index)); 48566 onClose(); 48567 }, 48568 variant: "link" 48569 }, (0,external_wp_i18n_namespaceObject.__)('Remove Control Point')))), 48570 style: { 48571 left: `${point.position}%`, 48572 transform: 'translateX( -50% )' 48573 } 48574 }); 48575 })); 48576} 48577function InsertPoint({ 48578 value: controlPoints, 48579 onChange, 48580 onOpenInserter, 48581 onCloseInserter, 48582 insertPosition, 48583 disableAlpha, 48584 __experimentalIsRenderedInSidebar 48585}) { 48586 const [alreadyInsertedPoint, setAlreadyInsertedPoint] = (0,external_wp_element_namespaceObject.useState)(false); 48587 return (0,external_wp_element_namespaceObject.createElement)(GradientColorPickerDropdown, { 48588 isRenderedInSidebar: __experimentalIsRenderedInSidebar, 48589 className: "components-custom-gradient-picker__inserter", 48590 onClose: () => { 48591 onCloseInserter(); 48592 }, 48593 renderToggle: ({ 48594 isOpen, 48595 onToggle 48596 }) => (0,external_wp_element_namespaceObject.createElement)(build_module_button, { 48597 "aria-expanded": isOpen, 48598 "aria-haspopup": "true", 48599 onClick: () => { 48600 if (isOpen) { 48601 onCloseInserter(); 48602 } else { 48603 setAlreadyInsertedPoint(false); 48604 onOpenInserter(); 48605 } 48606 onToggle(); 48607 }, 48608 className: "components-custom-gradient-picker__insert-point-dropdown", 48609 icon: library_plus 48610 }), 48611 renderContent: () => (0,external_wp_element_namespaceObject.createElement)(LegacyAdapter, { 48612 enableAlpha: !disableAlpha, 48613 onChange: color => { 48614 if (!alreadyInsertedPoint) { 48615 onChange(addControlPoint(controlPoints, insertPosition, w(color).toRgbString())); 48616 setAlreadyInsertedPoint(true); 48617 } else { 48618 onChange(updateControlPointColorByPosition(controlPoints, insertPosition, w(color).toRgbString())); 48619 } 48620 } 48621 }), 48622 style: insertPosition !== null ? { 48623 left: `${insertPosition}%`, 48624 transform: 'translateX( -50% )' 48625 } : undefined 48626 }); 48627} 48628ControlPoints.InsertPoint = InsertPoint; 48629/* harmony default export */ const control_points = (ControlPoints); 48630 48631;// CONCATENATED MODULE: ./packages/components/build-module/custom-gradient-picker/gradient-bar/index.js 48632 48633/** 48634 * External dependencies 48635 */ 48636 48637 48638/** 48639 * WordPress dependencies 48640 */ 48641 48642 48643/** 48644 * Internal dependencies 48645 */ 48646 48647 48648 48649const customGradientBarReducer = (state, action) => { 48650 switch (action.type) { 48651 case 'MOVE_INSERTER': 48652 if (state.id === 'IDLE' || state.id === 'MOVING_INSERTER') { 48653 return { 48654 id: 'MOVING_INSERTER', 48655 insertPosition: action.insertPosition 48656 }; 48657 } 48658 break; 48659 case 'STOP_INSERTER_MOVE': 48660 if (state.id === 'MOVING_INSERTER') { 48661 return { 48662 id: 'IDLE' 48663 }; 48664 } 48665 break; 48666 case 'OPEN_INSERTER': 48667 if (state.id === 'MOVING_INSERTER') { 48668 return { 48669 id: 'INSERTING_CONTROL_POINT', 48670 insertPosition: state.insertPosition 48671 }; 48672 } 48673 break; 48674 case 'CLOSE_INSERTER': 48675 if (state.id === 'INSERTING_CONTROL_POINT') { 48676 return { 48677 id: 'IDLE' 48678 }; 48679 } 48680 break; 48681 case 'START_CONTROL_CHANGE': 48682 if (state.id === 'IDLE') { 48683 return { 48684 id: 'MOVING_CONTROL_POINT' 48685 }; 48686 } 48687 break; 48688 case 'STOP_CONTROL_CHANGE': 48689 if (state.id === 'MOVING_CONTROL_POINT') { 48690 return { 48691 id: 'IDLE' 48692 }; 48693 } 48694 break; 48695 } 48696 return state; 48697}; 48698const customGradientBarReducerInitialState = { 48699 id: 'IDLE' 48700}; 48701function CustomGradientBar({ 48702 background, 48703 hasGradient, 48704 value: controlPoints, 48705 onChange, 48706 disableInserter = false, 48707 disableAlpha = false, 48708 __experimentalIsRenderedInSidebar = false 48709}) { 48710 const gradientMarkersContainerDomRef = (0,external_wp_element_namespaceObject.useRef)(null); 48711 const [gradientBarState, gradientBarStateDispatch] = (0,external_wp_element_namespaceObject.useReducer)(customGradientBarReducer, customGradientBarReducerInitialState); 48712 const onMouseEnterAndMove = event => { 48713 if (!gradientMarkersContainerDomRef.current) { 48714 return; 48715 } 48716 const insertPosition = getHorizontalRelativeGradientPosition(event.clientX, gradientMarkersContainerDomRef.current); 48717 48718 // If the insert point is close to an existing control point don't show it. 48719 if (controlPoints.some(({ 48720 position 48721 }) => { 48722 return Math.abs(insertPosition - position) < MINIMUM_DISTANCE_BETWEEN_INSERTER_AND_POINT; 48723 })) { 48724 if (gradientBarState.id === 'MOVING_INSERTER') { 48725 gradientBarStateDispatch({ 48726 type: 'STOP_INSERTER_MOVE' 48727 }); 48728 } 48729 return; 48730 } 48731 gradientBarStateDispatch({ 48732 type: 'MOVE_INSERTER', 48733 insertPosition 48734 }); 48735 }; 48736 const onMouseLeave = () => { 48737 gradientBarStateDispatch({ 48738 type: 'STOP_INSERTER_MOVE' 48739 }); 48740 }; 48741 const isMovingInserter = gradientBarState.id === 'MOVING_INSERTER'; 48742 const isInsertingControlPoint = gradientBarState.id === 'INSERTING_CONTROL_POINT'; 48743 return (0,external_wp_element_namespaceObject.createElement)("div", { 48744 className: classnames_default()('components-custom-gradient-picker__gradient-bar', { 48745 'has-gradient': hasGradient 48746 }), 48747 onMouseEnter: onMouseEnterAndMove, 48748 onMouseMove: onMouseEnterAndMove, 48749 onMouseLeave: onMouseLeave 48750 }, (0,external_wp_element_namespaceObject.createElement)("div", { 48751 className: "components-custom-gradient-picker__gradient-bar-background", 48752 style: { 48753 background, 48754 opacity: hasGradient ? 1 : 0.4 48755 } 48756 }), (0,external_wp_element_namespaceObject.createElement)("div", { 48757 ref: gradientMarkersContainerDomRef, 48758 className: "components-custom-gradient-picker__markers-container" 48759 }, !disableInserter && (isMovingInserter || isInsertingControlPoint) && (0,external_wp_element_namespaceObject.createElement)(control_points.InsertPoint, { 48760 __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar, 48761 disableAlpha: disableAlpha, 48762 insertPosition: gradientBarState.insertPosition, 48763 value: controlPoints, 48764 onChange: onChange, 48765 onOpenInserter: () => { 48766 gradientBarStateDispatch({ 48767 type: 'OPEN_INSERTER' 48768 }); 48769 }, 48770 onCloseInserter: () => { 48771 gradientBarStateDispatch({ 48772 type: 'CLOSE_INSERTER' 48773 }); 48774 } 48775 }), (0,external_wp_element_namespaceObject.createElement)(control_points, { 48776 __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar, 48777 disableAlpha: disableAlpha, 48778 disableRemove: disableInserter, 48779 gradientPickerDomRef: gradientMarkersContainerDomRef, 48780 ignoreMarkerPosition: isInsertingControlPoint ? gradientBarState.insertPosition : undefined, 48781 value: controlPoints, 48782 onChange: onChange, 48783 onStartControlPointChange: () => { 48784 gradientBarStateDispatch({ 48785 type: 'START_CONTROL_CHANGE' 48786 }); 48787 }, 48788 onStopControlPointChange: () => { 48789 gradientBarStateDispatch({ 48790 type: 'STOP_CONTROL_CHANGE' 48791 }); 48792 } 48793 }))); 48794} 48795 48796// EXTERNAL MODULE: ./node_modules/gradient-parser/build/node.js
48797var build_node = __webpack_require__(7115); 48798;// CONCATENATED MODULE: ./packages/components/build-module/custom-gradient-picker/constants.js 48799/** 48800 * WordPress dependencies 48801 */ 48802 48803const DEFAULT_GRADIENT = 'linear-gradient(135deg, rgba(6, 147, 227, 1) 0%, rgb(155, 81, 224) 100%)'; 48804const DEFAULT_LINEAR_GRADIENT_ANGLE = 180; 48805const HORIZONTAL_GRADIENT_ORIENTATION = { 48806 type: 'angular', 48807 value: '90' 48808}; 48809const GRADIENT_OPTIONS = [{ 48810 value: 'linear-gradient', 48811 label: (0,external_wp_i18n_namespaceObject.__)('Linear') 48812}, { 48813 value: 'radial-gradient', 48814 label: (0,external_wp_i18n_namespaceObject.__)('Radial') 48815}]; 48816const DIRECTIONAL_ORIENTATION_ANGLE_MAP = { 48817 top: 0, 48818 'top right': 45, 48819 'right top': 45, 48820 right: 90, 48821 'right bottom': 135, 48822 'bottom right': 135, 48823 bottom: 180, 48824 'bottom left': 225, 48825 'left bottom': 225, 48826 left: 270, 48827 'top left': 315, 48828 'left top': 315 48829}; 48830 48831;// CONCATENATED MODULE: ./packages/components/build-module/custom-gradient-picker/serializer.js 48832/** 48833 * External dependencies 48834 */ 48835 48836function serializeGradientColor({ 48837 type, 48838 value 48839}) { 48840 if (type === 'literal') { 48841 return value; 48842 } 48843 if (type === 'hex') { 48844 return `#${value}`; 48845 } 48846 return `${type}(${value.join(',')})`; 48847} 48848function serializeGradientPosition(position) { 48849 if (!position) { 48850 return ''; 48851 } 48852 const { 48853 value, 48854 type 48855 } = position; 48856 return `${value}${type}`; 48857} 48858function serializeGradientColorStop({ 48859 type, 48860 value, 48861 length 48862}) { 48863 return `${serializeGradientColor({ 48864 type, 48865 value 48866 })} ${serializeGradientPosition(length)}`; 48867} 48868function serializeGradientOrientation(orientation) { 48869 if (Array.isArray(orientation) || !orientation || orientation.type !== 'angular') { 48870 return; 48871 } 48872 return `${orientation.value}deg`; 48873} 48874function serializeGradient({ 48875 type, 48876 orientation, 48877 colorStops 48878}) { 48879 const serializedOrientation = serializeGradientOrientation(orientation); 48880 const serializedColorStops = colorStops.sort((colorStop1, colorStop2) => { 48881 const getNumericStopValue = colorStop => { 48882 return colorStop?.length?.value === undefined ? 0 : parseInt(colorStop.length.value); 48883 }; 48884 return getNumericStopValue(colorStop1) - getNumericStopValue(colorStop2); 48885 }).map(serializeGradientColorStop); 48886 return `${type}(${[serializedOrientation, ...serializedColorStops].filter(Boolean).join(',')})`; 48887} 48888 48889;// CONCATENATED MODULE: ./packages/components/build-module/custom-gradient-picker/utils.js 48890/** 48891 * External dependencies 48892 */ 48893 48894 48895 48896 48897/** 48898 * Internal dependencies 48899 */ 48900 48901 48902k([names]); 48903function getLinearGradientRepresentation(gradientAST) { 48904 return serializeGradient({ 48905 type: 'linear-gradient', 48906 orientation: HORIZONTAL_GRADIENT_ORIENTATION, 48907 colorStops: gradientAST.colorStops 48908 }); 48909} 48910function hasUnsupportedLength(item) { 48911 return item.length === undefined || item.length.type !== '%'; 48912} 48913function getGradientAstWithDefault(value) { 48914 // gradientAST will contain the gradient AST as parsed by gradient-parser npm module. 48915 // More information of its structure available at https://www.npmjs.com/package/gradient-parser#ast. 48916 let gradientAST; 48917 let hasGradient = !!value; 48918 const valueToParse = value !== null && value !== void 0 ? value : DEFAULT_GRADIENT; 48919 try { 48920 gradientAST = build_node.parse(valueToParse)[0]; 48921 } catch (error) { 48922 // eslint-disable-next-line no-console 48923 console.warn('wp.components.CustomGradientPicker failed to parse the gradient with error', error); 48924 gradientAST = build_node.parse(DEFAULT_GRADIENT)[0]; 48925 hasGradient = false; 48926 } 48927 if (!Array.isArray(gradientAST.orientation) && gradientAST.orientation?.type === 'directional') { 48928 gradientAST.orientation = { 48929 type: 'angular', 48930 value: DIRECTIONAL_ORIENTATION_ANGLE_MAP[gradientAST.orientation.value].toString() 48931 }; 48932 } 48933 if (gradientAST.colorStops.some(hasUnsupportedLength)) { 48934 const { 48935 colorStops 48936 } = gradientAST; 48937 const step = 100 / (colorStops.length - 1); 48938 colorStops.forEach((stop, index) => { 48939 stop.length = { 48940 value: `${step * index}`, 48941 type: '%' 48942 }; 48943 }); 48944 } 48945 return { 48946 gradientAST, 48947 hasGradient 48948 }; 48949} 48950function getGradientAstWithControlPoints(gradientAST, newControlPoints) { 48951 return { 48952 ...gradientAST, 48953 colorStops: newControlPoints.map(({ 48954 position, 48955 color 48956 }) => { 48957 const { 48958 r, 48959 g, 48960 b, 48961 a 48962 } = w(color).toRgb(); 48963 return { 48964 length: { 48965 type: '%', 48966 value: position?.toString() 48967 }, 48968 type: a < 1 ? 'rgba' : 'rgb', 48969 value: a < 1 ? [`${r}`, `${g}`, `${b}`, `${a}`] : [`${r}`, `${g}`, `${b}`] 48970 }; 48971 }) 48972 }; 48973} 48974function getStopCssColor(colorStop) { 48975 switch (colorStop.type) { 48976 case 'hex': 48977 return `#${colorStop.value}`; 48978 case 'literal': 48979 return colorStop.value; 48980 case 'rgb': 48981 case 'rgba': 48982 return `${colorStop.type}(${colorStop.value.join(',')})`; 48983 default: 48984 // Should be unreachable if passing an AST from gradient-parser. 48985 // See https://github.com/rafaelcaricio/gradient-parser#ast. 48986 return 'transparent'; 48987 } 48988} 48989 48990;// CONCATENATED MODULE: ./packages/components/build-module/custom-gradient-picker/styles/custom-gradient-picker-styles.js 48991 48992function 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)."; } 48993/** 48994 * External dependencies 48995 */ 48996
48997/** 48998 * Internal dependencies 48999 */ 49000 49001const SelectWrapper = /*#__PURE__*/emotion_styled_base_browser_esm(flex_block_component, true ? { 49002 target: "e10bzpgi1" 49003} : 0)( true ? { 49004 name: "1gvx10y", 49005 styles: "flex-grow:5" 49006} : 0); 49007const AccessoryWrapper = /*#__PURE__*/emotion_styled_base_browser_esm(flex_block_component, true ? { 49008 target: "e10bzpgi0" 49009} : 0)( true ? { 49010 name: "1gvx10y", 49011 styles: "flex-grow:5" 49012} : 0); 49013 49014;// CONCATENATED MODULE: ./packages/components/build-module/custom-gradient-picker/index.js 49015 49016/** 49017 * External dependencies 49018 */ 49019 49020/** 49021 * WordPress dependencies 49022 */ 49023 49024 49025 49026/** 49027 * Internal dependencies 49028 */ 49029 49030 49031 49032 49033 49034 49035 49036 49037 49038const GradientAnglePicker = ({ 49039 gradientAST, 49040 hasGradient, 49041 onChange 49042}) => { 49043 var _gradientAST$orientat; 49044 const angle = (_gradientAST$orientat = gradientAST?.orientation?.value) !== null && _gradientAST$orientat !== void 0 ? _gradientAST$orientat : DEFAULT_LINEAR_GRADIENT_ANGLE; 49045 const onAngleChange = newAngle => { 49046 onChange(serializeGradient({ 49047 ...gradientAST, 49048 orientation: { 49049 type: 'angular', 49050 value: `${newAngle}` 49051 } 49052 })); 49053 }; 49054 return (0,external_wp_element_namespaceObject.createElement)(angle_picker_control, { 49055 __nextHasNoMarginBottom: true, 49056 onChange: onAngleChange, 49057 value: hasGradient ? angle : '' 49058 }); 49059}; 49060const GradientTypePicker = ({ 49061 gradientAST, 49062 hasGradient, 49063 onChange 49064}) => { 49065 const { 49066 type 49067 } = gradientAST; 49068 const onSetLinearGradient = () => { 49069 onChange(serializeGradient({ 49070 ...gradientAST, 49071 orientation: gradientAST.orientation ? undefined : HORIZONTAL_GRADIENT_ORIENTATION, 49072 type: 'linear-gradient' 49073 })); 49074 }; 49075 const onSetRadialGradient = () => { 49076 const { 49077 orientation, 49078 ...restGradientAST 49079 } = gradientAST; 49080 onChange(serializeGradient({ 49081 ...restGradientAST, 49082 type: 'radial-gradient' 49083 })); 49084 }; 49085 const handleOnChange = next => { 49086 if (next === 'linear-gradient') { 49087 onSetLinearGradient(); 49088 } 49089 if (next === 'radial-gradient') { 49090 onSetRadialGradient(); 49091 } 49092 }; 49093 return (0,external_wp_element_namespaceObject.createElement)(select_control, { 49094 __nextHasNoMarginBottom: true, 49095 className: "components-custom-gradient-picker__type-picker", 49096 label: (0,external_wp_i18n_namespaceObject.__)('Type'), 49097 labelPosition: "top", 49098 onChange: handleOnChange, 49099 options: GRADIENT_OPTIONS, 49100 size: "__unstable-large", 49101 value: hasGradient ? type : undefined 49102 }); 49103}; 49104 49105/** 49106 * CustomGradientPicker is a React component that renders a UI for specifying 49107 * linear or radial gradients. Radial gradients are displayed in the picker as 49108 * a slice of the gradient from the center to the outside. 49109 * 49110 * ```jsx 49111 * import { CustomGradientPicker } from '@wordpress/components'; 49112 * import { useState } from '@wordpress/element'; 49113 * 49114 * const MyCustomGradientPicker = () => { 49115 * const [ gradient, setGradient ] = useState(); 49116 * 49117 * return ( 49118 * <CustomGradientPicker 49119 * value={ gradient } 49120 * onChange={ setGradient } 49121 * /> 49122 * ); 49123 * }; 49124 * ``` 49125 */ 49126function CustomGradientPicker({ 49127 /** Start opting into the new margin-free styles that will become the default in a future version. */ 49128 __nextHasNoMargin = false, 49129 value, 49130 onChange, 49131 __experimentalIsRenderedInSidebar = false 49132}) { 49133 const { 49134 gradientAST, 49135 hasGradient 49136 } = getGradientAstWithDefault(value); 49137 49138 // On radial gradients the bar should display a linear gradient. 49139 // On radial gradients the bar represents a slice of the gradient from the center until the outside. 49140 // On liner gradients the bar represents the color stops from left to right independently of the angle. 49141 const background = getLinearGradientRepresentation(gradientAST); 49142 49143 // Control points color option may be hex from presets, custom colors will be rgb. 49144 // The position should always be a percentage. 49145 const controlPoints = gradientAST.colorStops.map(colorStop => { 49146 return { 49147 color: getStopCssColor(colorStop), 49148 // Although it's already been checked by `hasUnsupportedLength` in `getGradientAstWithDefault`, 49149 // TypeScript doesn't know that `colorStop.length` is not undefined here. 49150 // @ts-expect-error 49151 position: parseInt(colorStop.length.value) 49152 }; 49153 }); 49154 if (!__nextHasNoMargin) { 49155 external_wp_deprecated_default()('Outer margin styles for wp.components.CustomGradientPicker', { 49156 since: '6.1', 49157 version: '6.4', 49158 hint: 'Set the `__nextHasNoMargin` prop to true to start opting into the new styles, which will become the default in a future version' 49159 }); 49160 } 49161 return (0,external_wp_element_namespaceObject.createElement)(v_stack_component, { 49162 spacing: 4, 49163 className: classnames_default()('components-custom-gradient-picker', { 49164 'is-next-has-no-margin': __nextHasNoMargin 49165 }) 49166 }, (0,external_wp_element_namespaceObject.createElement)(CustomGradientBar, { 49167 __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar, 49168 background: background, 49169 hasGradient: hasGradient, 49170 value: controlPoints, 49171 onChange: newControlPoints => { 49172 onChange(serializeGradient(getGradientAstWithControlPoints(gradientAST, newControlPoints))); 49173 } 49174 }), (0,external_wp_element_namespaceObject.createElement)(flex_component, { 49175 gap: 3, 49176 className: "components-custom-gradient-picker__ui-line" 49177 }, (0,external_wp_element_namespaceObject.createElement)(SelectWrapper, null, (0,external_wp_element_namespaceObject.createElement)(GradientTypePicker, { 49178 gradientAST: gradientAST, 49179 hasGradient: hasGradient, 49180 onChange: onChange 49181 })), (0,external_wp_element_namespaceObject.createElement)(AccessoryWrapper, null, gradientAST.type === 'linear-gradient' && (0,external_wp_element_namespaceObject.createElement)(GradientAnglePicker, { 49182 gradientAST: gradientAST, 49183 hasGradient: hasGradient, 49184 onChange: onChange 49185 })))); 49186} 49187/* harmony default export */ const custom_gradient_picker = (CustomGradientPicker); 49188 49189;// CONCATENATED MODULE: ./packages/components/build-module/gradient-picker/index.js 49190 49191/** 49192 * WordPress dependencies 49193 */ 49194 49195 49196 49197 49198 49199/** 49200 * Internal dependencies 49201 */ 49202 49203 49204 49205 49206 49207// The Multiple Origin Gradients have a `gradients` property (an array of 49208// gradient objects), while Single Origin ones have a `gradient` property. 49209const isMultipleOriginObject = obj => Array.isArray(obj.gradients) && !('gradient' in obj); 49210const isMultipleOriginArray = arr => { 49211 return arr.length > 0 && arr.every(gradientObj => isMultipleOriginObject(gradientObj)); 49212}; 49213function SingleOrigin({ 49214 className, 49215 clearGradient, 49216 gradients, 49217 onChange, 49218 value, 49219 ...additionalProps 49220}) { 49221 const gradientOptions = (0,external_wp_element_namespaceObject.useMemo)(() => { 49222 return gradients.map(({ 49223 gradient, 49224 name 49225 }, index) => (0,external_wp_element_namespaceObject.createElement)(build_module_circular_option_picker.Option, { 49226 key: gradient, 49227 value: gradient, 49228 isSelected: value === gradient, 49229 tooltipText: name || 49230 // translators: %s: gradient code e.g: "linear-gradient(90deg, rgba(98,16,153,1) 0%, rgba(172,110,22,1) 100%);". 49231 (0,external_wp_i18n_namespaceObject.sprintf)((0,external_wp_i18n_namespaceObject.__)('Gradient code: %s'), gradient), 49232 style: { 49233 color: 'rgba( 0,0,0,0 )', 49234 background: gradient 49235 }, 49236 onClick: value === gradient ? clearGradient : () =>
49236 onChange(gradient, index), 49237 "aria-label": name ? 49238 // translators: %s: The name of the gradient e.g: "Angular red to blue". 49239 (0,external_wp_i18n_namespaceObject.sprintf)((0,external_wp_i18n_namespaceObject.__)('Gradient: %s'), name) : 49240 // translators: %s: gradient code e.g: "linear-gradient(90deg, rgba(98,16,153,1) 0%, rgba(172,110,22,1) 100%);". 49241 (0,external_wp_i18n_namespaceObject.sprintf)((0,external_wp_i18n_namespaceObject.__)('Gradient code: %s'), gradient) 49242 })); 49243 }, [gradients, value, onChange, clearGradient]); 49244 return (0,external_wp_element_namespaceObject.createElement)(build_module_circular_option_picker.OptionGroup, { 49245 className: className, 49246 options: gradientOptions, 49247 ...additionalProps 49248 }); 49249} 49250function MultipleOrigin({ 49251 className, 49252 clearGradient, 49253 gradients, 49254 onChange, 49255 value, 49256 headingLevel 49257}) { 49258 const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(MultipleOrigin); 49259 return (0,external_wp_element_namespaceObject.createElement)(v_stack_component, { 49260 spacing: 3, 49261 className: className 49262 }, gradients.map(({ 49263 name, 49264 gradients: gradientSet 49265 }, index) => { 49266 const id = `color-palette-${instanceId}-${index}`; 49267 return (0,external_wp_element_namespaceObject.createElement)(v_stack_component, { 49268 spacing: 2, 49269 key: index 49270 }, (0,external_wp_element_namespaceObject.createElement)(ColorHeading, { 49271 level: headingLevel, 49272 id: id 49273 }, name), (0,external_wp_element_namespaceObject.createElement)(SingleOrigin, { 49274 clearGradient: clearGradient, 49275 gradients: gradientSet, 49276 onChange: gradient => onChange(gradient, index), 49277 value: value, 49278 "aria-labelledby": id 49279 })); 49280 })); 49281} 49282function gradient_picker_Component(props) { 49283 const { 49284 asButtons, 49285 loop, 49286 actions, 49287 headingLevel, 49288 'aria-label': ariaLabel, 49289 'aria-labelledby': ariaLabelledby, 49290 ...additionalProps 49291 } = props; 49292 const options = isMultipleOriginArray(props.gradients) ? (0,external_wp_element_namespaceObject.createElement)(MultipleOrigin, { 49293 headingLevel: headingLevel, 49294 ...additionalProps 49295 }) : (0,external_wp_element_namespaceObject.createElement)(SingleOrigin, { 49296 ...additionalProps 49297 }); 49298 let metaProps; 49299 if (asButtons) { 49300 metaProps = { 49301 asButtons: true 49302 }; 49303 } else { 49304 const _metaProps = { 49305 asButtons: false, 49306 loop 49307 }; 49308 if (ariaLabel) { 49309 metaProps = { 49310 ..._metaProps, 49311 'aria-label': ariaLabel 49312 }; 49313 } else if (ariaLabelledby) { 49314 metaProps = { 49315 ..._metaProps, 49316 'aria-labelledby': ariaLabelledby 49317 }; 49318 } else { 49319 metaProps = { 49320 ..._metaProps, 49321 'aria-label': (0,external_wp_i18n_namespaceObject.__)('Custom color picker.') 49322 }; 49323 } 49324 } 49325 return (0,external_wp_element_namespaceObject.createElement)(build_module_circular_option_picker, { 49326 ...metaProps, 49327 actions: actions, 49328 options: options 49329 }); 49330} 49331 49332/** 49333 * GradientPicker is a React component that renders a color gradient picker to 49334 * define a multi step gradient. There's either a _linear_ or a _radial_ type 49335 * available. 49336 * 49337 * ```jsx 49338 *import { GradientPicker } from '@wordpress/components'; 49339 *import { useState } from '@wordpress/element'; 49340 * 49341 *const myGradientPicker = () => { 49342 * const [ gradient, setGradient ] = useState( null ); 49343 * 49344 * return ( 49345 * <GradientPicker 49346 * __nextHasNoMargin 49347 * value={ gradient } 49348 * onChange={ ( currentGradient ) => setGradient( currentGradient ) } 49349 * gradients={ [ 49350 * { 49351 * name: 'JShine', 49352 * gradient: 49353 * 'linear-gradient(135deg,#12c2e9 0%,#c471ed 50%,#f64f59 100%)', 49354 * slug: 'jshine', 49355 * }, 49356 * { 49357 * name: 'Moonlit Asteroid', 49358 * gradient: 49359 * 'linear-gradient(135deg,#0F2027 0%, #203A43 0%, #2c5364 100%)', 49360 * slug: 'moonlit-asteroid', 49361 * }, 49362 * { 49363 * name: 'Rastafarie', 49364 * gradient: 49365 * 'linear-gradient(135deg,#1E9600 0%, #FFF200 0%, #FF0000 100%)', 49366 * slug: 'rastafari', 49367 * }, 49368 * ] } 49369 * /> 49370 * ); 49371 *}; 49372 *``` 49373 * 49374 */ 49375function GradientPicker({ 49376 /** Start opting into the new margin-free styles that will become the default in a future version. */ 49377 __nextHasNoMargin = false, 49378 className, 49379 gradients = [], 49380 onChange, 49381 value, 49382 clearable = true, 49383 disableCustomGradients = false, 49384 __experimentalIsRenderedInSidebar, 49385 headingLevel = 2, 49386 ...additionalProps 49387}) { 49388 const clearGradient = (0,external_wp_element_namespaceObject.useCallback)(() =>
49388 onChange(undefined), [onChange]); 49389 if (!__nextHasNoMargin) { 49390 external_wp_deprecated_default()('Outer margin styles for wp.components.GradientPicker', { 49391 since: '6.1', 49392 version: '6.4', 49393 hint: 'Set the `__nextHasNoMargin` prop to true to start opting into the new styles, which will become the default in a future version' 49394 }); 49395 } 49396 const deprecatedMarginSpacerProps = !__nextHasNoMargin ? { 49397 marginTop: !gradients.length ? 3 : undefined, 49398 marginBottom: !clearable ? 6 : 0 49399 } : {}; 49400 return ( 49401 // Outmost Spacer wrapper can be removed when deprecation period is over 49402 (0,external_wp_element_namespaceObject.createElement)(spacer_component, { 49403 marginBottom: 0, 49404 ...deprecatedMarginSpacerProps 49405 }, (0,external_wp_element_namespaceObject.createElement)(v_stack_component, { 49406 spacing: gradients.length ? 4 : 0 49407 }, !disableCustomGradients && (0,external_wp_element_namespaceObject.createElement)(custom_gradient_picker, { 49408 __nextHasNoMargin: true, 49409 __experimentalIsRenderedInSidebar: __experimentalIsRenderedInSidebar, 49410 value: value, 49411 onChange: onChange 49412 }), (gradients.length || clearable) && (0,external_wp_element_namespaceObject.createElement)(gradient_picker_Component, { 49413 ...additionalProps, 49414 className: className, 49415 clearGradient: clearGradient, 49416 gradients: gradients, 49417 onChange: onChange, 49418 value: value, 49419 actions: clearable && !disableCustomGradients && (0,external_wp_element_namespaceObject.createElement)(build_module_circular_option_picker.ButtonAction, { 49420 onClick: clearGradient 49421 }, (0,external_wp_i18n_namespaceObject.__)('Clear')), 49422 headingLevel: headingLevel 49423 }))) 49424 ); 49425} 49426/* harmony default export */ const gradient_picker = (GradientPicker); 49427 49428;// CONCATENATED MODULE: ./packages/icons/build-module/library/menu.js 49429 49430/** 49431 * WordPress dependencies 49432 */ 49433 49434const menu = (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.SVG, { 49435 xmlns: "http://www.w3.org/2000/svg", 49436 viewBox: "0 0 24 24" 49437}, (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.Path, { 49438 d: "M5 5v1.5h14V5H5zm0 7.8h14v-1.5H5v1.5zM5 19h14v-1.5H5V19z" 49439})); 49440/* harmony default export */ const library_menu = (menu); 49441 49442;// CONCATENATED MODULE: external ["wp","dom"] 49443const external_wp_dom_namespaceObject = window["wp"]["dom"]; 49444;// CONCATENATED MODULE: ./packages/components/build-module/navigable-container/container.js 49445 49446/** 49447 * External dependencies 49448 */ 49449 49450/** 49451 * WordPress dependencies 49452 */ 49453 49454 49455 49456/** 49457 * Internal dependencies 49458 */ 49459 49460const container_noop = () => {}; 49461const MENU_ITEM_ROLES = ['menuitem', 'menuitemradio', 'menuitemcheckbox']; 49462function cycleValue(value, total, offset) { 49463 const nextValue = value + offset; 49464 if (nextValue < 0) { 49465 return total + nextValue; 49466 } else if (nextValue >= total) { 49467 return nextValue - total; 49468 } 49469 return nextValue; 49470} 49471class NavigableContainer extends external_wp_element_namespaceObject.Component { 49472 constructor(args) { 49473 super(args); 49474 this.onKeyDown = this.onKeyDown.bind(this); 49475 this.bindContainer = this.bindContainer.bind(this); 49476 this.getFocusableContext = this.getFocusableContext.bind(this); 49477 this.getFocusableIndex = this.getFocusableIndex.bind(this); 49478 } 49479 componentDidMount() { 49480 if (!this.container) { 49481 return; 49482 } 49483 49484 // We use DOM event listeners instead of React event listeners 49485 // because we want to catch events from the underlying DOM tree 49486 // The React Tree can be different from the DOM tree when using 49487 // portals. Block Toolbars for instance are rendered in a separate 49488 // React Trees. 49489 this.container.addEventListener('keydown', this.onKeyDown); 49490 } 49491 componentWillUnmount() { 49492 if (!this.container) { 49493 return; 49494 } 49495 this.container.removeEventListener('keydown', this.onKeyDown); 49496 } 49497 bindContainer(ref) { 49498 const { 49499 forwardedRef 49500 } = this.props; 49501 this.container = ref; 49502 if (typeof forwardedRef === 'function') { 49503 forwardedRef(ref); 49504 } else if (forwardedRef && 'current' in forwardedRef) { 49505 forwardedRef.current = ref; 49506 } 49507 } 49508 getFocusableContext(target) { 49509 if (!this.container) { 49510 return null; 49511 } 49512 const { 49513 onlyBrowserTabstops 49514 } = this.props; 49515 const finder = onlyBrowserTabstops ? external_wp_dom_namespaceObject.focus.tabbable : external_wp_dom_namespaceObject.focus.focusable; 49516 const focusables = finder.find(this.container); 49517 const index = this.getFocusableIndex(focusables, target); 49518 if (index > -1 && target) { 49519 return { 49520 index, 49521 target, 49522 focusables 49523 }; 49524 } 49525 return null; 49526 } 49527 getFocusableIndex(focusables, target) { 49528 return focusables.indexOf(target); 49529 } 49530 onKeyDown(event) { 49531 if (this.props.onKeyDown) { 49532 this.props.onKeyDown(event); 49533 } 49534 const { 49535 getFocusableContext 49536 } = this; 49537 const { 49538 cycle = true, 49539 eventToOffset, 49540 onNavigate = container_noop, 49541 stopNavigationEvents 49542 } = this.props; 49543 const offset = eventToOffset(event); 49544 49545 // eventToOffset returns undefined if the event is not handled by the component. 49546 if (offset !== undefined && stopNavigationEvents) { 49547 // Prevents arrow key handlers bound to the document directly interfer
49547ing. 49548 event.stopImmediatePropagation(); 49549 49550 // When navigating a collection of items, prevent scroll containers 49551 // from scrolling. The preventDefault also prevents Voiceover from 49552 // 'handling' the event, as voiceover will try to use arrow keys 49553 // for highlighting text. 49554 const targetRole = event.target?.getAttribute('role'); 49555 const targetHasMenuItemRole = !!targetRole && MENU_ITEM_ROLES.includes(targetRole); 49556 if (targetHasMenuItemRole) { 49557 event.preventDefault(); 49558 } 49559 } 49560 if (!offset) { 49561 return; 49562 } 49563 const activeElement = event.target?.ownerDocument?.activeElement; 49564 if (!activeElement) { 49565 return; 49566 } 49567 const context = getFocusableContext(activeElement); 49568 if (!context) { 49569 return; 49570 } 49571 const { 49572 index, 49573 focusables 49574 } = context; 49575 const nextIndex = cycle ? cycleValue(index, focusables.length, offset) : index + offset; 49576 if (nextIndex >= 0 && nextIndex < focusables.length) { 49577 focusables[nextIndex].focus(); 49578 onNavigate(nextIndex, focusables[nextIndex]); 49579 49580 // `preventDefault()` on tab to avoid having the browser move the focus 49581 // after this component has already moved it. 49582 if (event.code === 'Tab') { 49583 event.preventDefault(); 49584 } 49585 } 49586 } 49587 render() { 49588 const { 49589 children, 49590 stopNavigationEvents, 49591 eventToOffset, 49592 onNavigate, 49593 onKeyDown, 49594 cycle, 49595 onlyBrowserTabstops, 49596 forwardedRef, 49597 ...restProps 49598 } = this.props; 49599 return (0,external_wp_element_namespaceObject.createElement)("div", { 49600 ref: this.bindContainer, 49601 ...restProps 49602 }, children); 49603 } 49604} 49605const forwardedNavigableContainer = (props, ref) => { 49606 return (0,external_wp_element_namespaceObject.createElement)(NavigableContainer, { 49607 ...props, 49608 forwardedRef: ref 49609 }); 49610}; 49611forwardedNavigableContainer.displayName = 'NavigableContainer'; 49612/* harmony default export */ const container = ((0,external_wp_element_namespaceObject.forwardRef)(forwardedNavigableContainer)); 49613 49614;// CONCATENATED MODULE: ./packages/components/build-module/navigable-container/menu.js 49615 49616/** 49617 * External dependencies 49618 */ 49619 49620/** 49621 * WordPress dependencies 49622 */ 49623 49624 49625/** 49626 * Internal dependencies 49627 */ 49628 49629function UnforwardedNavigableMenu({ 49630 role = 'menu', 49631 orientation = 'vertical', 49632 ...rest 49633}, ref) { 49634 const eventToOffset = evt => { 49635 const { 49636 code 49637 } = evt; 49638 let next = ['ArrowDown']; 49639 let previous = ['ArrowUp']; 49640 if (orientation === 'horizontal') { 49641 next = ['ArrowRight']; 49642 previous = ['ArrowLeft']; 49643 } 49644 if (orientation === 'both') { 49645 next = ['ArrowRight', 'ArrowDown']; 49646 previous = ['ArrowLeft', 'ArrowUp']; 49647 } 49648 if (next.includes(code)) { 49649 return 1; 49650 } else if (previous.includes(code)) { 49651 return -1; 49652 } else if (['ArrowDown', 'ArrowUp', 'ArrowLeft', 'ArrowRight'].includes(code)) { 49653 // Key press should be handled, e.g. have event propagation and 49654 // default behavior handled by NavigableContainer but not result 49655 // in an offset. 49656 return 0; 49657 } 49658 return undefined; 49659 }; 49660 return (0,external_wp_element_namespaceObject.createElement)(container, { 49661 ref: ref, 49662 stopNavigationEvents: true, 49663 onlyBrowserTabstops: false, 49664 role: role, 49665 "aria-orientation": role !== 'presentation' && (orientation === 'vertical' || orientation === 'horizontal') ? orientation : undefined, 49666 eventToOffset: eventToOffset, 49667 ...rest 49668 }); 49669} 49670 49671/** 49672 * A container for a navigable menu. 49673 * 49674 * ```jsx 49675 * import { 49676 * NavigableMenu, 49677 * Button, 49678 * } from '@wordpress/components'; 49679 * 49680 * function onNavigate( index, target ) { 49681 * console.log( `Navigates to ${ index }`, target ); 49682 * } 49683 * 49684 * const MyNavigableContainer = () => ( 49685 * <div> 49686 * <span>Navigable Menu:</span> 49687 * <NavigableMenu onNavigate={ onNavigate } orientation="horizontal"> 49688 * <Button variant="secondary">Item 1</Button> 49689 * <Button variant="secondary">Item 2</Button> 49690 * <Button variant="secondary">Item 3</Button> 49691 * </NavigableMenu> 49692 * </div> 49693 * ); 49694 * ``` 49695 */ 49696const NavigableMenu = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedNavigableMenu); 49697/* harmony default export */ const navigable_container_menu = (NavigableMenu); 49698 49699;// CONCATENATED MODULE: ./packages/components/build-module/dropdown-menu/index.js 49700 49701/** 49702 * External dependencies 49703 */ 49704 49705 49706/** 49707 * WordPress dependencies 49708 */ 49709 49710 49711/** 49712 * Internal dependencies 49713 */ 49714 49715 49716 49717 49718function dropdown_menu_mergeProps(defaultProps = {}, props = {}) { 49719 const mergedProps = { 49720 ...defaultProps, 49721 ...props 49722 }; 49723 if (props.className && defaultProps.className) { 49724 mergedProps.className = classnames_default()(props.className, defaultProps.className); 49725 } 49726 return mergedProps; 49727} 49728function dropdown_menu_isFunction(maybeFunc) { 49729 return typeof maybeFunc === 'function'; 49730} 49731function UnconnectedDropdownMenu(dropdownMenuProps) { 49732 const { 49733 children, 49734 className, 49735 controls, 49736 icon = library_menu, 49737 label, 49738 popoverProps, 49739 toggleProps, 49740 menuProps, 49741 disableOpenOnArrowDown = false, 49742 text, 49743 noIcons, 49744 open, 49745 defaultOpen, 49746 onToggle: onToggleProp, 49747 // Context 49748 variant 49749 } = useContextSystem(dropdownMenuProps, 'DropdownMenu'); 49750 if (!controls?.length && !dropdown_menu_isFunction(children)) { 49751 return null; 49752 } 49753 49754 // Normalize controls to nested array of objects (sets of controls) 49755 let controlSets;
49756 if (controls?.length) { 49757 // @ts-expect-error The check below is needed because `DropdownMenus` 49758 // rendered by `ToolBarGroup` receive controls as a nested array. 49759 controlSets = controls; 49760 if (!Array.isArray(controlSets[0])) { 49761 // This is not ideal, but at this point we know that `controls` is 49762 // not a nested array, even if TypeScript doesn't. 49763 controlSets = [controls]; 49764 } 49765 } 49766 const mergedPopoverProps = dropdown_menu_mergeProps({ 49767 className: 'components-dropdown-menu__popover', 49768 variant 49769 }, popoverProps); 49770 return (0,external_wp_element_namespaceObject.createElement)(dropdown, { 49771 className: className, 49772 popoverProps: mergedPopoverProps, 49773 renderToggle: ({ 49774 isOpen, 49775 onToggle 49776 }) => { 49777 var _toggleProps$showTool; 49778 const openOnArrowDown = event => { 49779 if (disableOpenOnArrowDown) { 49780 return; 49781 } 49782 if (!isOpen && event.code === 'ArrowDown') { 49783 event.preventDefault(); 49784 onToggle(); 49785 } 49786 }; 49787 const { 49788 as: Toggle = build_module_button, 49789 ...restToggleProps 49790 } = toggleProps !== null && toggleProps !== void 0 ? toggleProps : {}; 49791 const mergedToggleProps = dropdown_menu_mergeProps({ 49792 className: classnames_default()('components-dropdown-menu__toggle', { 49793 'is-opened': isOpen 49794 }) 49795 }, restToggleProps); 49796 return (0,external_wp_element_namespaceObject.createElement)(Toggle, { 49797 ...mergedToggleProps, 49798 icon: icon, 49799 onClick: event => { 49800 onToggle(); 49801 if (mergedToggleProps.onClick) { 49802 mergedToggleProps.onClick(event); 49803 } 49804 }, 49805 onKeyDown: event => { 49806 openOnArrowDown(event); 49807 if (mergedToggleProps.onKeyDown) { 49808 mergedToggleProps.onKeyDown(event); 49809 } 49810 }, 49811 "aria-haspopup": "true", 49812 "aria-expanded": isOpen, 49813 label: label, 49814 text: text, 49815 showTooltip: (_toggleProps$showTool = toggleProps?.showTooltip) !== null && _toggleProps$showTool !== void 0 ? _toggleProps$showTool : true 49816 }, mergedToggleProps.children); 49817 }, 49818 renderContent: props => { 49819 const mergedMenuProps = dropdown_menu_mergeProps({ 49820 'aria-label': label, 49821 className: classnames_default()('components-dropdown-menu__menu', { 49822 'no-icons': noIcons 49823 }) 49824 }, menuProps); 49825 return (0,external_wp_element_namespaceObject.createElement)(navigable_container_menu, { 49826 ...mergedMenuProps, 49827 role: "menu" 49828 }, dropdown_menu_isFunction(children) ? children(props) : null, controlSets?.flatMap((controlSet, indexOfSet) => controlSet.map((control, indexOfControl) => (0,external_wp_element_namespaceObject.createElement)(build_module_button, { 49829 key: [indexOfSet, indexOfControl].join(), 49830 onClick: event => { 49831 event.stopPropagation(); 49832 props.onClose(); 49833 if (control.onClick) { 49834 control.onClick(); 49835 } 49836 }, 49837 className: classnames_default()('components-dropdown-menu__menu-item', { 49838 'has-separator': indexOfSet > 0 && indexOfControl === 0, 49839 'is-active': control.isActive, 49840 'is-icon-only': !control.title 49841 }), 49842 icon: control.icon, 49843 label: control.label, 49844 "aria-checked": control.role === 'menuitemcheckbox' || control.role === 'menuitemradio' ? control.isActive : undefined, 49845 role: control.role === 'menuitemcheckbox' || control.role === 'menuitemradio' ? control.role : 'menuitem', 49846 disabled: control.isDisabled 49847 }, control.title)))); 49848 }, 49849 open: open, 49850 defaultOpen: defaultOpen, 49851 onToggle: onToggleProp 49852 }); 49853} 49854 49855/** 49856 * 49857 * The DropdownMenu displays a list of actions (each contained in a MenuItem, 49858 * MenuItemsChoice, or MenuGroup) in a compact way. It appears in a Popover 49859 * after the user has interacted with an element (a button or icon) or when 49860 * they perform a specific action. 49861 * 49862 * Render a Dropdown Menu with a set of controls: 49863 * 49864 * ```jsx 49865 * import { DropdownMenu } from '@wordpress/components'; 49866 * import { 49867 * more, 49868 * arrowLeft, 49869 * arrowRight, 49870 * arrowUp, 49871 * arrowDown, 49872 * } from '@wordpress/icons'; 49873 * 49874 * const MyDropdownMenu = () => ( 49875 * <DropdownMenu 49876 * icon={ more } 49877 * label="Select a direction" 49878 * controls={ [ 49879 * { 49880 * title: 'Up', 49881 * icon: arrowUp, 49882 * onClick: () => console.log( 'up' ), 49883 * }, 49884 * { 49885 * title: 'Right', 49886 * icon: arrowRight, 49887 * onClick: () => console.log( 'right' ), 49888 * }, 49889 * { 49890 * title: 'Down', 49891 * icon: arrowDown, 49892 * onClick: () => console.log( 'down' ), 49893 * }, 49894 * { 49895 * title: 'Left', 49896 * icon: arrowLeft, 49897 * onClick: () => console.log( 'left' ), 49898 * }, 49899 * ] } 49900 * /> 49901 * ); 49902 * ``` 49903 * 49904 * Alternatively, specify a `children` function which returns elements valid for 49905 * use in a DropdownMenu: `MenuItem`, `MenuItemsChoice`, or `MenuGroup`. 49906 * 49907 * ```jsx 49908 * import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components'; 49909 * import { more, arrowUp, arrowDown, trash } from '@wordpress/icons'; 49910 * 49911 * const MyDropdownMenu = () => ( 49912 * <DropdownMenu icon={ more } label="Select a direction"> 49913 * { ( { onClose } ) => ( 49914 * <> 49915 * <MenuGroup> 49916 * <MenuItem icon={ arrowUp } onClick={ onClose }> 49917 * Move Up 49918 * </MenuItem> 49919 * <MenuItem icon={ arrowDown } onClick={ onClose }> 49920 * Move Down 49921 * </MenuItem> 49922 * </MenuGroup> 49923 * <MenuGroup> 49924 * <MenuItem icon={ trash } onClick={ onClose }> 49925 * Remove 49926 * </MenuItem> 49927 * </MenuGroup> 49928 * </> 49929 * ) } 49930 * </DropdownMenu> 49931 * ); 49932 * ``` 49933 * 49934 */ 49935const DropdownMenu = contextConnectWithoutRef(UnconnectedDropdownMenu, 'DropdownMenu'); 49936/* harmony default export */ const dropdown_menu = (DropdownMenu); 49937 49938;// CONCATENATED MODULE: ./packages/components/build-module/palette-edit/styles.js 49939 49940function 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)."; } 49941/** 49942 * External dependencies 49943 */ 49944
49945/** 49946 * Internal dependencies 49947 */ 49948 49949 49950 49951 49952 49953 49954 49955 49956 49957const IndicatorStyled = /*#__PURE__*/emotion_styled_base_browser_esm(build_module_circular_option_picker.Option, true ? { 49958 target: "e5bw3229" 49959} : 0)("width:", space(6), ";height:", space(6), ";pointer-events:none;" + ( true ? "" : 0)); 49960const NameInputControl = /*#__PURE__*/emotion_styled_base_browser_esm(input_control, true ? { 49961 target: "e5bw3228" 49962} : 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)); 49963const PaletteItem = /*#__PURE__*/emotion_styled_base_browser_esm(component, true ? { 49964 target: "e5bw3227" 49965} : 0)("padding-block:3px;padding-inline-start:", space(3), ";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.theme.accent, ";}" + ( true ? "" : 0)); 49966const NameContainer = emotion_styled_base_browser_esm("div", true ? { 49967 target: "e5bw3226" 49968} : 0)("line-height:", space(8), ";margin-left:", space(2), ";margin-right:", space(2), ";white-space:nowrap;overflow:hidden;", PaletteItem, ":hover &{color:", COLORS.theme.accent, ";}" + ( true ? "" : 0)); 49969const PaletteHeading = /*#__PURE__*/emotion_styled_base_browser_esm(heading_component, true ? { 49970 target: "e5bw3225" 49971} : 0)("text-transform:uppercase;line-height:", space(6), ";font-weight:500;&&&{font-size:11px;margin-bottom:0;}" + ( true ? "" : 0)); 49972const PaletteActionsContainer = /*#__PURE__*/emotion_styled_base_browser_esm(component, true ? { 49973 target: "e5bw3224" 49974} : 0)("height:", space(6), ";display:flex;" + ( true ? "" : 0)); 49975const PaletteHStackHeader = /*#__PURE__*/emotion_styled_base_browser_esm(h_stack_component, true ? { 49976 target: "e5bw3223" 49977} : 0)("margin-bottom:", space(2), ";" + ( true ? "" : 0)); 49978const PaletteEditStyles = /*#__PURE__*/emotion_styled_base_browser_esm(component, true ? { 49979 target: "e5bw3222" 49980} : 0)( true ? { 49981 name: "u6wnko", 49982 styles: "&&&{.components-button.has-icon{min-width:0;padding:0;}}" 49983} : 0); 49984const DoneButton = /*#__PURE__*/emotion_styled_base_browser_esm(build_module_button, true ? { 49985 target: "e5bw3221" 49986} : 0)("&&{color:", COLORS.theme.accent, ";}" + ( true ? "" : 0)); 49987const RemoveButton = /*#__PURE__*/emotion_styled_base_browser_esm(build_module_button, true ? { 49988 target: "e5bw3220" 49989} : 0)("&&{margin-top:", space(1), ";}" + ( true ? "" : 0)); 49990 49991;// CONCATENATED MODULE: ./packages/components/build-module/palette-edit/index.js 49992 49993/** 49994 * External dependencies 49995 */ 49996 49997 49998 49999/** 50000 * WordPress dependencies 50001 */ 50002 50003 50004 50005 50006 50007/** 50008 * Internal dependencies 50009 */ 50010 50011 50012 50013 50014 50015 50016 50017 50018 50019 50020 50021 50022 50023 50024const DEFAULT_COLOR = '#000'; 50025function NameInput({ 50026 value, 50027 onChange, 50028 label 50029}) { 50030 return (0,external_wp_element_namespaceObject.createElement)(NameInputControl, { 50031 label: label, 50032 hideLabelFromVision: true, 50033 value: value, 50034 onChange: onChange 50035 }); 50036} 50037 50038/** 50039 * Returns a temporary name for a palette item in the format "Color + id". 50040 * To ensure there are no duplicate ids, this function checks all slugs for temporary names. 50041 * It expects slugs to be in the format: slugPrefix + color- + number. 50042 * It then sets the id component of the new name based on the incremented id of the highest existing slug id. 50043 * 50044 * @param elements An array of color palette items. 50045 * @param slugPrefix The slug prefix used to match the element slug. 50046 * 50047 * @return A unique name for a palette item. 50048 */ 50049function getNameForPosition(elements, slugPrefix) { 50050 const temporaryNameRegex = new RegExp(`^${slugPrefix}color-([\\d]+)$`); 50051 const position = elements.reduce((previousValue, currentValue) => { 50052 if (typeof currentValue?.slug === 'string') { 50053 const matches = currentValue?.slug.match(temporaryNameRegex); 50054 if (matches) { 50055 const id = parseInt(matches[1], 10); 50056 if (id >= previousValue) { 50057 return id + 1; 50058 } 50059 } 50060 } 50061 return previousValue; 50062 }, 1); 50063 return (0,external_wp_i18n_namespaceObject.sprintf)( /* translators: %s: is a temporary id for a custom color */ 50064 (0,external_wp_i18n_namespaceObject.__)('Color %s'), position); 50065} 50066function ColorPickerPopover({ 50067 isGradient, 50068 element, 50069 onChange, 50070 popoverProps: receivedPopoverProps, 50071 onClose = () => {} 50072}) { 50073 const popoverProps = (0,external_wp_element_namespaceObject.useMemo)(() => ({ 50074 shift: true, 50075 offset: 20, 50076 placement: 'left-start', 50077 ...receivedPopoverProps, 50078 className: classnames_default()('components-palette-edit__popover', receivedPopoverProps?.className) 50079 }), [receivedPopoverProps]); 50080 return (0,external_wp_element_namespaceObject.createElement)(popover, { 50081 ...popoverProps, 50082 onClose: onClose 50083 }, !isGradient && (0,external_wp_element_namespaceObject.createElement)(LegacyAdapter, { 50084 color: element.color,
50085 enableAlpha: true, 50086 onChange: newColor => { 50087 onChange({ 50088 ...element, 50089 color: newColor 50090 }); 50091 } 50092 }), isGradient && (0,external_wp_element_namespaceObject.createElement)("div", { 50093 className: "components-palette-edit__popover-gradient-picker" 50094 }, (0,external_wp_element_namespaceObject.createElement)(custom_gradient_picker, { 50095 __nextHasNoMargin: true, 50096 __experimentalIsRenderedInSidebar: true, 50097 value: element.gradient, 50098 onChange: newGradient => { 50099 onChange({ 50100 ...element, 50101 gradient: newGradient 50102 }); 50103 } 50104 }))); 50105} 50106function palette_edit_Option({ 50107 canOnlyChangeValues, 50108 element, 50109 onChange, 50110 isEditing, 50111 onStartEditing, 50112 onRemove, 50113 onStopEditing, 50114 popoverProps: receivedPopoverProps, 50115 slugPrefix, 50116 isGradient 50117}) { 50118 const focusOutsideProps = (0,external_wp_compose_namespaceObject.__experimentalUseFocusOutside)(onStopEditing); 50119 const value = isGradient ? element.gradient : element.color; 50120 50121 // Use internal state instead of a ref to make sure that the component 50122 // re-renders when the popover's anchor updates. 50123 const [popoverAnchor, setPopoverAnchor] = (0,external_wp_element_namespaceObject.useState)(null); 50124 const popoverProps = (0,external_wp_element_namespaceObject.useMemo)(() => ({ 50125 ...receivedPopoverProps, 50126 // Use the custom palette color item as the popover anchor. 50127 anchor: popoverAnchor 50128 }), [popoverAnchor, receivedPopoverProps]); 50129 return (0,external_wp_element_namespaceObject.createElement)(PaletteItem, { 50130 className: isEditing ? 'is-selected' : undefined, 50131 as: "div", 50132 onClick: onStartEditing, 50133 ref: setPopoverAnchor, 50134 ...(isEditing ? { 50135 ...focusOutsideProps 50136 } : { 50137 style: { 50138 cursor: 'pointer' 50139 } 50140 }) 50141 }, (0,external_wp_element_namespaceObject.createElement)(h_stack_component, { 50142 justify: "flex-start" 50143 }, (0,external_wp_element_namespaceObject.createElement)(flex_item_component, null, (0,external_wp_element_namespaceObject.createElement)(IndicatorStyled, { 50144 style: { 50145 background: value, 50146 color: 'transparent' 50147 } 50148 })), (0,external_wp_element_namespaceObject.createElement)(flex_item_component, null, isEditing && !canOnlyChangeValues ? (0,external_wp_element_namespaceObject.createElement)(NameInput, { 50149 label: isGradient ? (0,external_wp_i18n_namespaceObject.__)('Gradient name') : (0,external_wp_i18n_namespaceObject.__)('Color name'), 50150 value: element.name, 50151 onChange: nextName => onChange({ 50152 ...element, 50153 name: nextName, 50154 slug: slugPrefix + paramCase(nextName !== null && nextName !== void 0 ? nextName : '') 50155 }) 50156 }) : (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, { 50157 isSmall: true, 50158 icon: line_solid, 50159 label: (0,external_wp_i18n_namespaceObject.__)('Remove color'), 50160 onClick: onRemove 50161 }))), isEditing && (0,external_wp_element_namespaceObject.createElement)(ColorPickerPopover, { 50162 isGradient: isGradient, 50163 onChange: onChange, 50164 element: element, 50165 popoverProps: popoverProps 50166 })); 50167} 50168function isTemporaryElement(slugPrefix, { 50169 slug, 50170 color, 50171 gradient 50172}) { 50173 const regex = new RegExp(`^${slugPrefix}color-([\\d]+)$`); 50174 return regex.test(slug) && (!!color && color === DEFAULT_COLOR || !!gradient && gradient === DEFAULT_GRADIENT); 50175} 50176function PaletteEditListView({ 50177 elements, 50178 onChange, 50179 editingElement, 50180 setEditingElement, 50181 canOnlyChangeValues, 50182 slugPrefix, 50183 isGradient, 50184 popoverProps 50185}) { 50186 // When unmounting the component if there are empty elements (the user did not complete the insertion) clean them. 50187 const elementsReference = (0,external_wp_element_namespaceObject.useRef)(); 50188 (0,external_wp_element_namespaceObject.useEffect)(() => { 50189 elementsReference.current = elements; 50190 }, [elements]); 50191 (0,external_wp_element_namespaceObject.useEffect)(() => { 50192 return () => { 50193 if (elementsReference.current?.some(element => isTemporaryElement(slugPrefix, element))) { 50194 const newElements = elementsReference.current.filter(element => !isTemporaryElement(slugPrefix, element)); 50195 onChange(newElements.length ? newElements : undefined); 50196 } 50197 }; 50198 // Disable reason: adding the missing dependency here would cause breaking changes that will require 50199 // a heavier refactor to avoid. See https://github.com/WordPress/gutenberg/pull/43911 50200 // eslint-disable-next-line react-hooks/exhaustive-deps 50201 }, []); 50202 const debounceOnChange = (0,external_wp_compose_namespaceObject.useDebounce)(onChange, 100); 50203 return (0,external_wp_element_namespaceObject.createElement)(v_stack_component, { 50204 spacing: 3 50205 }, (0,external_wp_element_namespaceObject.createElement)(item_group_component, { 50206 isRounded: true 50207 }, elements.map((element, index) => (0,external_wp_element_namespaceObject.createElement)(palette_edit_Option, { 50208 isGradient: isGradient, 50209 canOnlyChangeValues: canOnlyChangeValues, 50210 key: index, 50211 element: element, 50212 onStartEditing: () => { 50213 if (editingElement !== index) { 50214 setEditingElement(index); 50215 } 50216 }, 50217 onChange: newElement => { 50218 debounceOnChange(elements.map((currentElement, currentIndex) => { 50219 if (currentIndex === index) { 50220 return newElement; 50221 } 50222 return currentElement; 50223 })); 50224 }, 50225 onRemove: () => { 50226 setEditingElement(null); 50227 const newElements = elements.filter((_currentElement, currentIndex) => { 50228 if (currentIndex === index) { 50229 return false;
50230 } 50231 return true; 50232 }); 50233 onChange(newElements.length ? newElements : undefined); 50234 }, 50235 isEditing: index === editingElement, 50236 onStopEditing: () => { 50237 if (index === editingElement) { 50238 setEditingElement(null); 50239 } 50240 }, 50241 slugPrefix: slugPrefix, 50242 popoverProps: popoverProps 50243 })))); 50244} 50245const EMPTY_ARRAY = []; 50246 50247/** 50248 * Allows editing a palette of colors or gradients. 50249 * 50250 * ```jsx 50251 * import { PaletteEdit } from '@wordpress/components'; 50252 * const MyPaletteEdit = () => { 50253 * const [ controlledColors, setControlledColors ] = useState( colors ); 50254 * 50255 * return ( 50256 * <PaletteEdit 50257 * colors={ controlledColors } 50258 * onChange={ ( newColors?: Color[] ) => { 50259 * setControlledColors( newColors ); 50260 * } } 50261 * paletteLabel="Here is a label" 50262 * /> 50263 * ); 50264 * }; 50265 * ``` 50266 */ 50267function PaletteEdit({ 50268 gradients, 50269 colors = EMPTY_ARRAY, 50270 onChange, 50271 paletteLabel, 50272 paletteLabelHeadingLevel = 2, 50273 emptyMessage, 50274 canOnlyChangeValues, 50275 canReset, 50276 slugPrefix = '', 50277 popoverProps 50278}) { 50279 const isGradient = !!gradients; 50280 const elements = isGradient ? gradients : colors; 50281 const [isEditing, setIsEditing] = (0,external_wp_element_namespaceObject.useState)(false); 50282 const [editingElement, setEditingElement] = (0,external_wp_element_namespaceObject.useState)(null); 50283 const isAdding = isEditing && !!editingElement && elements[editingElement] && !elements[editingElement].slug; 50284 const elementsLength = elements.length; 50285 const hasElements = elementsLength > 0; 50286 const debounceOnChange = (0,external_wp_compose_namespaceObject.useDebounce)(onChange, 100); 50287 const onSelectPaletteItem = (0,external_wp_element_namespaceObject.useCallback)((value, newEditingElementIndex) => { 50288 const selectedElement = newEditingElementIndex === undefined ? undefined : elements[newEditingElementIndex]; 50289 const key = isGradient ? 'gradient' : 'color'; 50290 // Ensures that the index returned matches a known element value. 50291 if (!!selectedElement && selectedElement[key] === value) { 50292 setEditingElement(newEditingElementIndex); 50293 } else { 50294 setIsEditing(true); 50295 } 50296 }, [isGradient, elements]); 50297 return (0,external_wp_element_namespaceObject.createElement)(PaletteEditStyles, null, (0,external_wp_element_namespaceObject.createElement)(PaletteHStackHeader, null, (0,external_wp_element_namespaceObject.createElement)(PaletteHeading, { 50298 level: paletteLabelHeadingLevel 50299 }, paletteLabel), (0,external_wp_element_namespaceObject.createElement)(PaletteActionsContainer, null, hasElements && isEditing && (0,external_wp_element_namespaceObject.createElement)(DoneButton, { 50300 isSmall: true, 50301 onClick: () => { 50302 setIsEditing(false); 50303 setEditingElement(null); 50304 } 50305 }, (0,external_wp_i18n_namespaceObject.__)('Done')), !canOnlyChangeValues && (0,external_wp_element_namespaceObject.createElement)(build_module_button, { 50306 isSmall: true, 50307 isPressed: isAdding, 50308 icon: library_plus, 50309 label: isGradient ? (0,external_wp_i18n_namespaceObject.__)('Add gradient') : (0,external_wp_i18n_namespaceObject.__)('Add color'), 50310 onClick: () => { 50311 const tempOptionName = getNameForPosition(elements, slugPrefix); 50312 if (!!gradients) { 50313 onChange([...gradients, { 50314 gradient: DEFAULT_GRADIENT, 50315 name: tempOptionName, 50316 slug: slugPrefix + paramCase(tempOptionName) 50317 }]); 50318 } else { 50319 onChange([...colors, { 50320 color: DEFAULT_COLOR, 50321 name: tempOptionName, 50322 slug: slugPrefix + paramCase(tempOptionName) 50323 }]); 50324 } 50325 setIsEditing(true); 50326 setEditingElement(elements.length); 50327 } 50328 }), hasElements && (!isEditing || !canOnlyChangeValues || canReset) && (0,external_wp_element_namespaceObject.createElement)(dropdown_menu, { 50329 icon: more_vertical, 50330 label: isGradient ? (0,external_wp_i18n_namespaceObject.__)('Gradient options') : (0,external_wp_i18n_namespaceObject.__)('Color options'), 50331 toggleProps: { 50332 isSmall: true 50333 } 50334 }, ({ 50335 onClose 50336 }) => (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, (0,external_wp_element_namespaceObject.createElement)(navigable_container_menu, { 50337 role: "menu" 50338 }, !isEditing && (0,external_wp_element_namespaceObject.createElement)(build_module_button, { 50339 variant: "tertiary", 50340 onClick: () => { 50341 setIsEditing(true); 50342 onClose(); 50343 }, 50344 className: "components-palette-edit__menu-button" 50345 }, (0,external_wp_i18n_namespaceObject.__)('Show details')), !canOnlyChangeValues && (0,external_wp_element_namespaceObject.createElement)(build_module_button, { 50346 variant: "tertiary", 50347 onClick: () => { 50348 setEditingElement(null); 50349 setIsEditing(false); 50350 onChange(); 50351 onClose(); 50352 }, 50353 className: "components-palette-edit__menu-button" 50354 }, isGradient ? (0,external_wp_i18n_namespaceObject.__)('Remove all gradients') : (0,external_wp_i18n_namespaceObject.__)('Remove all c
50354olors')), canReset && (0,external_wp_element_namespaceObject.createElement)(build_module_button, { 50355 variant: "tertiary", 50356 onClick: () => { 50357 setEditingElement(null); 50358 onChange(); 50359 onClose(); 50360 } 50361 }, isGradient ? (0,external_wp_i18n_namespaceObject.__)('Reset gradient') : (0,external_wp_i18n_namespaceObject.__)('Reset colors'))))))), hasElements && (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, isEditing && (0,external_wp_element_namespaceObject.createElement)(PaletteEditListView, { 50362 canOnlyChangeValues: canOnlyChangeValues, 50363 elements: elements 50364 // @ts-expect-error TODO: Don't know how to resolve 50365 , 50366 onChange: onChange, 50367 editingElement: editingElement, 50368 setEditingElement: setEditingElement, 50369 slugPrefix: slugPrefix, 50370 isGradient: isGradient, 50371 popoverProps: popoverProps 50372 }), !isEditing && editingElement !== null && (0,external_wp_element_namespaceObject.createElement)(ColorPickerPopover, { 50373 isGradient: isGradient, 50374 onClose: () =>
50374 setEditingElement(null), 50375 onChange: newElement => { 50376 debounceOnChange( 50377 // @ts-expect-error TODO: Don't know how to resolve 50378 elements.map((currentElement, currentIndex) => { 50379 if (currentIndex === editingElement) { 50380 return newElement; 50381 } 50382 return currentElement; 50383 })); 50384 }, 50385 element: elements[editingElement !== null && editingElement !== void 0 ? editingElement : -1], 50386 popoverProps: popoverProps 50387 }), !isEditing && (isGradient ? (0,external_wp_element_namespaceObject.createElement)(gradient_picker, { 50388 __nextHasNoMargin: true, 50389 gradients: gradients, 50390 onChange: onSelectPaletteItem, 50391 clearable: false, 50392 disableCustomGradients: true 50393 }) : (0,external_wp_element_namespaceObject.createElement)(color_palette, { 50394 colors: colors, 50395 onChange: onSelectPaletteItem, 50396 clearable: false, 50397 disableCustomColors: true 50398 }))), !hasElements && emptyMessage); 50399} 50400/* harmony default export */ const palette_edit = (PaletteEdit); 50401 50402;// CONCATENATED MODULE: ./packages/components/build-module/combobox-control/styles.js 50403 50404/** 50405 * External dependencies 50406 */ 50407 50408 50409 50410/** 50411 * Internal dependencies 50412 */ 50413 50414 50415const deprecatedDefaultSize = ({ 50416 __next40pxDefaultSize 50417}) => !__next40pxDefaultSize && /*#__PURE__*/emotion_react_browser_esm_css("height:28px;padding-left:", space(1), ";padding-right:", space(1), ";" + ( true ? "" : 0), true ? "" : 0); 50418const InputWrapperFlex = /*#__PURE__*/emotion_styled_base_browser_esm(flex_component, true ? { 50419 target: "evuatpg0" 50420} : 0)("height:38px;padding-left:", space(2), ";padding-right:", space(2), ";", deprecatedDefaultSize, ";" + ( true ? "" : 0)); 50421 50422;// CONCATENATED MODULE: ./packages/components/build-module/form-token-field/token-input.js 50423 50424/** 50425 * External dependencies 50426 */ 50427 50428/** 50429 * WordPress dependencies 50430 */ 50431 50432 50433/** 50434 * Internal dependencies 50435 */ 50436 50437function UnForwardedTokenInput(props, ref) { 50438 const { 50439 value, 50440 isExpanded, 50441 instanceId, 50442 selectedSuggestionIndex, 50443 className, 50444 onChange, 50445 onFocus, 50446 onBlur, 50447 ...restProps 50448 } = props; 50449 const [hasFocus, setHasFocus] = (0,external_wp_element_namespaceObject.useState)(false); 50450 const size = value ? value.length + 1 : 0; 50451 const onChangeHandler = event => { 50452 if (onChange) { 50453 onChange({ 50454 value: event.target.value 50455 }); 50456 } 50457 }; 50458 const onFocusHandler = e => { 50459 setHasFocus(true); 50460 onFocus?.(e); 50461 }; 50462 const onBlurHandler = e => { 50463 setHasFocus(false); 50464 onBlur?.(e); 50465 }; 50466 return (0,external_wp_element_namespaceObject.createElement)("input", { 50467 ref: ref, 50468 id: `components-form-token-input-${instanceId}`, 50469 type: "text", 50470 ...restProps, 50471 value: value || '', 50472 onChange: onChangeHandler, 50473 onFocus: onFocusHandler, 50474 onBlur: onBlurHandler, 50475 size: size, 50476 className: classnames_default()(className, 'components-form-token-field__input'), 50477 autoComplete: "off", 50478 role: "combobox", 50479 "aria-expanded": isExpanded, 50480 "aria-autocomplete": "list", 50481 "aria-owns": isExpanded ? `components-form-token-suggestions-${instanceId}` : undefined, 50482 "aria-activedescendant": 50483 // Only add the `aria-activedescendant` attribute when: 50484 // - the user is actively interacting with the input (`hasFocus`) 50485 // - there is a selected suggestion (`selectedSuggestionIndex !== -1`) 50486 // - the list of suggestions are rendered in the DOM (`isExpanded`) 50487 hasFocus && selectedSuggestionIndex !== -1 && isExpanded ? `components-form-token-suggestions-${instanceId}-${selectedSuggestionIndex}` : undefined, 50488 "aria-describedby": `components-form-token-suggestions-howto-${instanceId}` 50489 }); 50490} 50491const TokenInput = (0,external_wp_element_namespaceObject.forwardRef)(UnForwardedTokenInput); 50492/* harmony default export */ const token_input = (TokenInput); 50493 50494// EXTERNAL MODULE: ./node_modules/dom-scroll-into-view/lib/index.js 50495var lib = __webpack_require__(5425); 50496var lib_default = /*#__PURE__*/__webpack_require__.n(lib); 50497;// CONCATENATED MODULE: ./packages/components/build-module/form-token-field/suggestions-list.js 50498 50499/** 50500 * External dependencies 50501 */ 50502 50503 50504/** 50505 * WordPress dependencies 50506 */ 50507 50508 50509 50510/** 50511 * Internal dependencies 50512 */ 50513 50514const handleMouseDown = e => { 50515 // By preventing default here, we will not lose focus of <input> when clicking a suggestion. 50516 e.preventDefault(); 50517}; 50518function SuggestionsList({ 50519 selectedIndex, 50520 scrollIntoView, 50521 match, 50522 onHover, 50523 onSelect, 50524 suggestions = [], 50525 displayTransform, 50526 instanceId,
50527 __experimentalRenderItem 50528}) { 50529 const [scrollingIntoView, setScrollingIntoView] = (0,external_wp_element_namespaceObject.useState)(false); 50530 const listRef = (0,external_wp_compose_namespaceObject.useRefEffect)(listNode => { 50531 // only have to worry about scrolling selected suggestion into view 50532 // when already expanded. 50533 let rafId; 50534 if (selectedIndex > -1 && scrollIntoView && listNode.children[selectedIndex]) { 50535 setScrollingIntoView(true); 50536 lib_default()(listNode.children[selectedIndex], listNode, { 50537 onlyScrollIfNeeded: true 50538 }); 50539 rafId = requestAnimationFrame(() => { 50540 setScrollingIntoView(false); 50541 }); 50542 } 50543 return () => { 50544 if (rafId !== undefined) { 50545 cancelAnimationFrame(rafId); 50546 } 50547 }; 50548 }, [selectedIndex, scrollIntoView]); 50549 const handleHover = suggestion => { 50550 return () => { 50551 if (!scrollingIntoView) { 50552 onHover?.(suggestion); 50553 } 50554 }; 50555 }; 50556 const handleClick = suggestion => { 50557 return () => { 50558 onSelect?.(suggestion); 50559 }; 50560 }; 50561 const computeSuggestionMatch = suggestion => { 50562 const matchText = displayTransform(match).toLocaleLowerCase(); 50563 if (matchText.length === 0) { 50564 return null; 50565 } 50566 const transformedSuggestion = displayTransform(suggestion); 50567 const indexOfMatch = transformedSuggestion.toLocaleLowerCase().indexOf(matchText); 50568 return { 50569 suggestionBeforeMatch: transformedSuggestion.substring(0, indexOfMatch), 50570 suggestionMatch: transformedSuggestion.substring(indexOfMatch, indexOfMatch + matchText.length), 50571 suggestionAfterMatch: transformedSuggestion.substring(indexOfMatch + matchText.length) 50572 }; 50573 }; 50574 return (0,external_wp_element_namespaceObject.createElement)("ul", { 50575 ref: listRef, 50576 className: "components-form-token-field__suggestions-list", 50577 id: `components-form-token-suggestions-${instanceId}`, 50578 role: "listbox" 50579 }, suggestions.map((suggestion, index) => { 50580 const matchText = computeSuggestionMatch(suggestion); 50581 const className = classnames_default()('components-form-token-field__suggestion', { 50582 'is-selected': index === selectedIndex 50583 }); 50584 let output; 50585 if (typeof __experimentalRenderItem === 'function') { 50586 output = __experimentalRenderItem({ 50587 item: suggestion 50588 }); 50589 } else if (matchText) { 50590 output = (0,external_wp_element_namespaceObject.createElement)("span", { 50591 "aria-label": displayTransform(suggestion) 50592 }, matchText.suggestionBeforeMatch, (0,external_wp_element_namespaceObject.createElement)("strong", { 50593 className: "components-form-token-field__suggestion-match" 50594 }, matchText.suggestionMatch), matchText.suggestionAfterMatch); 50595 } else { 50596 output = displayTransform(suggestion); 50597 } 50598 50599 /* eslint-disable jsx-a11y/click-events-have-key-events */ 50600 return (0,external_wp_element_namespaceObject.createElement)("li", { 50601 id: `components-form-token-suggestions-${instanceId}-${index}`, 50602 role: "option", 50603 className: className, 50604 key: typeof suggestion === 'object' && 'value' in suggestion ? suggestion?.value : displayTransform(suggestion), 50605 onMouseDown: handleMouseDown, 50606 onClick: handleClick(suggestion), 50607 onMouseEnter: handleHover(suggestion), 50608 "aria-selected": index === selectedIndex 50609 }, output); 50610 /* eslint-enable jsx-a11y/click-events-have-key-events */ 50611 })); 50612} 50613 50614/* harmony default export */ const suggestions_list = (SuggestionsList); 50615 50616;// CONCATENATED MODULE: ./packages/components/build-module/higher-order/with-focus-outside/index.js 50617 50618/** 50619 * WordPress dependencies 50620 */ 50621 50622 50623/* harmony default export */ const with_focus_outside = ((0,external_wp_compose_namespaceObject.createHigherOrderComponent)(WrappedComponent => props => { 50624 const [handleFocusOutside, setHandleFocusOutside] = (0,external_wp_element_namespaceObject.useState)(undefined); 50625 const bindFocusOutsideHandler = (0,external_wp_element_namespaceObject.useCallback)(node => setHandleFocusOutside(() => node?.handleFocusOutside ? node.handleFocusOutside.bind(node) : undefined), []); 50626 return (0,external_wp_element_namespaceObject.createElement)("div", { 50627 ...(0,external_wp_compose_namespaceObject.__experimentalUseFocusOutside)(handleFocusOutside) 50628 }, (0,external_wp_element_namespaceObject.createElement)(WrappedComponent, { 50629 ref: bindFocusOutsideHandler, 50630 ...props 50631 })); 50632}, 'withFocusOutside')); 50633 50634;// CONCATENATED MODULE: ./packages/components/build-module/utils/use-deprecated-props.js 50635/** 50636 * WordPress dependencies 50637 */ 50638 50639function useDeprecated36pxDefaultSizeProp(props, /** The component identifier in dot notation, e.g. `wp.components.ComponentName`. */ 50640componentIdentifier) { 50641 const { 50642 __next36pxDefaultSize, 50643 __next40pxDefaultSize, 50644 ...otherProps 50645 } = props; 50646 if (typeof __next36pxDefaultSize !== 'undefined') { 50647 external_wp_deprecated_default()('`__next36pxDefaultSize` prop in ' + componentIdentifier, { 50648 alternative: '`__next40pxDefaultSize`', 50649 since: '6.3' 50650 }); 50651 } 50652 return { 50653 ...otherProps, 50654 __next40pxDefaultSize: __next40pxDefaultSize !== null && __next40pxDefaultSize !== void 0 ? __next40pxDefaultSize : __next36pxDefaultSize 50655 }; 50656} 50657 50658;// CONCATENATED MODULE: ./packages/components/build-module/combobox-control/index.js 50659 50660/** 50661 * External dependencies 50662 */ 50663 50664 50665/** 50666 * WordPress dependencies 50667 */ 50668 50669 50670 50671 50672 50673 50674/** 50675 * Internal dependencies 50676 */ 50677 50678 50679 50680 50681 50682 50683 50684 50685 50686 50687const combobox_control_noop = () => {}; 50688const DetectOutside = with_focus_outside(class extends external_wp_element_namespaceObject.Component { 50689 handleFocusOutside(event) { 50690 this.props.onFocusOutside(event); 50691 } 50692 render() { 50693 return this.props.children; 50694 } 50695}); 50696const getIndexOfMatchingSuggestion = (selectedSuggestion, matchingSuggestions) => selectedSuggestion === null ? -1 : matchingSuggestions.indexOf(selectedSuggestion); 50697 50698/** 50699 * `ComboboxControl` is an enhanced version of a [`SelectControl`](../select-control/README.md) with the addition of 50700 * being able to search for options using a search input. 50701 * 50702 * ```jsx 50703 * import { ComboboxControl } from '@wordpress/components';
50704 * import { useState } from '@wordpress/element'; 50705 * 50706 * const options = [ 50707 * { 50708 * value: 'small', 50709 * label: 'Small', 50710 * }, 50711 * { 50712 * value: 'normal', 50713 * label: 'Normal', 50714 * }, 50715 * { 50716 * value: 'large', 50717 * label: 'Large', 50718 * }, 50719 * ]; 50720 * 50721 * function MyComboboxControl() { 50722 * const [ fontSize, setFontSize ] = useState(); 50723 * const [ filteredOptions, setFilteredOptions ] = useState( options ); 50724 * return ( 50725 * <ComboboxControl 50726 * label="Font Size" 50727 * value={ fontSize } 50728 * onChange={ setFontSize } 50729 * options={ filteredOptions } 50730 * onFilterValueChange={ ( inputValue ) => 50731 * setFilteredOptions( 50732 * options.filter( ( option ) => 50733 * option.label 50734 * .toLowerCase() 50735 * .startsWith( inputValue.toLowerCase() ) 50736 * ) 50737 * ) 50738 * } 50739 * /> 50740 * ); 50741 * } 50742 * ``` 50743 */ 50744function ComboboxControl(props) { 50745 var _currentOption$label; 50746 const { 50747 __nextHasNoMarginBottom = false, 50748 __next40pxDefaultSize = false, 50749 value: valueProp, 50750 label, 50751 options, 50752 onChange: onChangeProp, 50753 onFilterValueChange = combobox_control_noop, 50754 hideLabelFromVision, 50755 help, 50756 allowReset = true, 50757 className, 50758 messages = { 50759 selected: (0,external_wp_i18n_namespaceObject.__)('Item selected.') 50760 }, 50761 __experimentalRenderItem 50762 } = useDeprecated36pxDefaultSizeProp(props, 'wp.components.ComboboxControl'); 50763 const [value, setValue] = useControlledValue({ 50764 value: valueProp, 50765 onChange: onChangeProp 50766 }); 50767 const currentOption = options.find(option => option.value === value); 50768 const currentLabel = (_currentOption$label = currentOption?.label) !== null && _currentOption$label !== void 0 ? _currentOption$label : ''; 50769 // Use a custom prefix when generating the `instanceId` to avoid having 50770 // duplicate input IDs when rendering this component and `FormTokenField` 50771 // in the same page (see https://github.com/WordPress/gutenberg/issues/42112). 50772 const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(ComboboxControl, 'combobox-control'); 50773 const [selectedSuggestion, setSelectedSuggestion] = (0,external_wp_element_namespaceObject.useState)(currentOption || null); 50774 const [isExpanded, setIsExpanded] = (0,external_wp_element_namespaceObject.useState)(false); 50775 const [inputHasFocus, setInputHasFocus] = (0,external_wp_element_namespaceObject.useState)(false); 50776 const [inputValue, setInputValue] = (0,external_wp_element_namespaceObject.useState)(''); 50777 const inputContainer = (0,external_wp_element_namespaceObject.useRef)(null); 50778 const matchingSuggestions = (0,external_wp_element_namespaceObject.useMemo)(() => { 50779 const startsWithMatch = []; 50780 const containsMatch = []; 50781 const match = normalizeTextString(inputValue); 50782 options.forEach(option => { 50783 const index = normalizeTextString(option.label).indexOf(match); 50784 if (index === 0) { 50785 startsWithMatch.push(option); 50786 } else if (index > 0) { 50787 containsMatch.push(option); 50788 } 50789 }); 50790 return startsWithMatch.concat(containsMatch); 50791 }, [inputValue, options]); 50792 const onSuggestionSelected = newSelectedSuggestion => { 50793 setValue(newSelectedSuggestion.value); 50794 (0,external_wp_a11y_namespaceObject.speak)(messages.selected, 'assertive'); 50795 setSelectedSuggestion(newSelectedSuggestion); 50796 setInputValue(''); 50797 setIsExpanded(false); 50798 }; 50799 const handleArrowNavigation = (offset = 1) => { 50800 const index = getIndexOfMatchingSuggestion(selectedSuggestion, matchingSuggestions); 50801 let nextIndex = index + offset; 50802 if (nextIndex < 0) { 50803 nextIndex = matchingSuggestions.length - 1; 50804 } else if (nextIndex >= matchingSuggestions.length) { 50805 nextIndex = 0; 50806 } 50807 setSelectedSuggestion(matchingSuggestions[nextIndex]); 50808 setIsExpanded(true); 50809 }; 50810 const onKeyDown = event => { 50811 let preventDefault = false;
50812 if (event.defaultPrevented || 50813 // Ignore keydowns from IMEs 50814 event.nativeEvent.isComposing || 50815 // Workaround for Mac Safari where the final Enter/Backspace of an IME composition 50816 // is `isComposing=false`, even though it's technically still part of the composition. 50817 // These can only be detected by keyCode. 50818 event.keyCode === 229) { 50819 return; 50820 } 50821 switch (event.code) { 50822 case 'Enter': 50823 if (selectedSuggestion) { 50824 onSuggestionSelected(selectedSuggestion); 50825 preventDefault = true; 50826 } 50827 break; 50828 case 'ArrowUp': 50829 handleArrowNavigation(-1); 50830 preventDefault = true; 50831 break; 50832 case 'ArrowDown': 50833 handleArrowNavigation(1); 50834 preventDefault = true; 50835 break; 50836 case 'Escape': 50837 setIsExpanded(false); 50838 setSelectedSuggestion(null); 50839 preventDefault = true; 50840 break; 50841 default: 50842 break; 50843 } 50844 if (preventDefault) { 50845 event.preventDefault(); 50846 } 50847 }; 50848 const onBlur = () => { 50849 setInputHasFocus(false); 50850 }; 50851 const onFocus = () => { 50852 setInputHasFocus(true); 50853 setIsExpanded(true); 50854 onFilterValueChange(''); 50855 setInputValue(''); 50856 }; 50857 const onFocusOutside = () => { 50858 setIsExpanded(false); 50859 }; 50860 const onInputChange = event => { 50861 const text = event.value; 50862 setInputValue(text); 50863 onFilterValueChange(text); 50864 if (inputHasFocus) { 50865 setIsExpanded(true); 50866 } 50867 }; 50868 const handleOnReset = () => { 50869 setValue(null); 50870 inputContainer.current?.focus(); 50871 }; 50872 50873 // Update current selections when the filter input changes. 50874 (0,external_wp_element_namespaceObject.useEffect)(() => { 50875 const hasMatchingSuggestions = matchingSuggestions.length > 0; 50876 const hasSelectedMatchingSuggestions = getIndexOfMatchingSuggestion(selectedSuggestion, matchingSuggestions) > 0; 50877 if (hasMatchingSuggestions && !hasSelectedMatchingSuggestions) { 50878 // If the current selection isn't present in the list of suggestions, then automatically select the first item from the list of suggestions. 50879 setSelectedSuggestion(matchingSuggestions[0]); 50880 } 50881 }, [matchingSuggestions, selectedSuggestion]); 50882 50883 // Announcements. 50884 (0,external_wp_element_namespaceObject.useEffect)(() => { 50885 const hasMatchingSuggestions = matchingSuggestions.length > 0; 50886 if (isExpanded) { 50887 const message = hasMatchingSuggestions ? (0,external_wp_i18n_namespaceObject.sprintf)( /* translators: %d: number of results. */ 50888 (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.'); 50889 (0,external_wp_a11y_namespaceObject.speak)(message, 'polite'); 50890 } 50891 }, [matchingSuggestions, isExpanded]); 50892 50893 // Disable reason: There is no appropriate role which describes the 50894 // input container intended accessible usability. 50895 // TODO: Refactor click detection to use blur to stop propagation. 50896 /* eslint-disable jsx-a11y/no-static-element-interactions */ 50897 return (0,external_wp_element_namespaceObject.createElement)(DetectOutside, { 50898 onFocusOutside: onFocusOutside 50899 }, (0,external_wp_element_namespaceObject.createElement)(base_control, { 50900 __nextHasNoMarginBottom: __nextHasNoMarginBottom, 50901 className: classnames_default()(className, 'components-combobox-control'), 50902 label: label, 50903 id: `components-form-token-input-${instanceId}`, 50904 hideLabelFromVision: hideLabelFromVision, 50905 help: help 50906 }, (0,external_wp_element_namespaceObject.createElement)("div", { 50907 className: "components-combobox-control__suggestions-container", 50908 tabIndex: -1, 50909 onKeyDown: onKeyDown 50910 }, (0,external_wp_element_namespaceObject.createElement)(InputWrapperFlex, { 50911 __next40pxDefaultSize: __next40pxDefaultSize 50912 }, (0,external_wp_element_namespaceObject.createElement)(flex_block_component, null, (0,external_wp_element_namespaceObject.createElement)(token_input, { 50913 className: "components-combobox-control__input", 50914 instanceId: instanceId, 50915 ref: inputContainer, 50916 value: isExpanded ? inputValue : currentLabel, 50917 onFocus: onFocus, 50918 onBlur: onBlur, 50919 isExpanded: isExpanded, 50920 selectedSuggestionIndex: getIndexOfMatchingSuggestion(selectedSuggestion, matchingSuggestions), 50921 onChange: onInputChange 50922 })), allowReset && (0,external_wp_element_namespaceObject.createElement)(flex_item_component, null, (0,external_wp_element_namespaceObject.createElement)(build_module_button, { 50923 className: "components-combobox-control__reset", 50924 icon: close_small, 50925 disabled: !value, 50926 onClick: handleOnReset, 50927 label: (0,external_wp_i18n_namespaceObject.__)('Reset') 50928 }))), isExpanded && (0,external_wp_element_namespaceObject.createElement)(suggestions_list, { 50929 instanceId: instanceId 50930 // The empty string for `value` here is not actually used, but is 50931 // just a quick way to satisfy the TypeScript requirements of SuggestionsList. 50932 // See: https://github.com/WordPress/gutenberg/pull/47581/files#r1091089330 50933 , 50934 match: { 50935 label: inputValue, 50936 value: '' 50937 }, 50938 displayTransform: suggestion => suggestion.label, 50939 suggestions: matchingSuggestions, 50940 selectedIndex: getIndexOfMatchingSuggestion(selectedSuggestion, matchingSuggestions), 50941 onHover: setSelectedSuggestion, 50942 onSelect: onSuggestionSelected, 50943 scrollIntoView: true,
50944 __experimentalRenderItem: __experimentalRenderItem 50945 })))); 50946 /* eslint-enable jsx-a11y/no-static-element-interactions */ 50947} 50948 50949/* harmony default export */ const combobox_control = (ComboboxControl); 50950 50951;// CONCATENATED MODULE: ./packages/components/build-module/modal/aria-helper.js 50952const LIVE_REGION_ARIA_ROLES = new Set(['alert', 'status', 'log', 'marquee', 'timer']); 50953let hiddenElements = [], 50954 aria_helper_isHidden = false; 50955 50956/** 50957 * Hides all elements in the body element from screen-readers except 50958 * the provided element and elements that should not be hidden from 50959 * screen-readers. 50960 * 50961 * The reason we do this is because `aria-modal="true"` currently is bugged 50962 * in Safari, and support is spotty in other browsers overall. In the future 50963 * we should consider removing these helper functions in favor of 50964 * `aria-modal="true"`. 50965 * 50966 * @param {HTMLDivElement} unhiddenElement The element that should not be hidden. 50967 */ 50968function hideApp(unhiddenElement) { 50969 if (aria_helper_isHidden) { 50970 return; 50971 } 50972 const elements = Array.from(document.body.children); 50973 elements.forEach(element => { 50974 if (element === unhiddenElement) { 50975 return; 50976 } 50977 if (elementShouldBeHidden(element)) { 50978 element.setAttribute('aria-hidden', 'true'); 50979 hiddenElements.push(element); 50980 } 50981 }); 50982 aria_helper_isHidden = true; 50983} 50984 50985/** 50986 * Determines if the passed element should not be hidden from screen readers. 50987 * 50988 * @param {HTMLElement} element The element that should be checked. 50989 * 50990 * @return {boolean} Whether the element should not be hidden from screen-readers. 50991 */ 50992function elementShouldBeHidden(element) { 50993 const role = element.getAttribute('role'); 50994 return !(element.tagName === 'SCRIPT' || element.hasAttribute('aria-hidden') || element.hasAttribute('aria-live') || role && LIVE_REGION_ARIA_ROLES.has(role)); 50995} 50996 50997/** 50998 * Makes all elements in the body that have been hidden by `hideApp` 50999 * visible again to screen-readers. 51000 */ 51001function showApp() { 51002 if (!aria_helper_isHidden) { 51003 return; 51004 } 51005 hiddenElements.forEach(element => { 51006 element.removeAttribute('aria-hidden'); 51007 }); 51008 hiddenElements = []; 51009 aria_helper_isHidden = false; 51010} 51011 51012;// CONCATENATED MODULE: ./packages/components/build-module/modal/index.js 51013 51014/** 51015 * External dependencies 51016 */ 51017 51018/** 51019 * WordPress dependencies 51020 */ 51021 51022 51023 51024 51025 51026 51027/** 51028 * Internal dependencies 51029 */ 51030 51031 51032 51033// Used to count the number of open modals. 51034let openModalCount = 0; 51035function UnforwardedModal(props, forwardedRef) { 51036 const { 51037 bodyOpenClassName = 'modal-open', 51038 role = 'dialog', 51039 title = null, 51040 focusOnMount = true, 51041 shouldCloseOnEsc = true, 51042 shouldCloseOnClickOutside = true, 51043 isDismissible = true, 51044 /* Accessibility. */ 51045 aria = { 51046 labelledby: undefined, 51047 describedby: undefined 51048 }, 51049 onRequestClose, 51050 icon, 51051 closeButtonLabel, 51052 children, 51053 style, 51054 overlayClassName, 51055 className, 51056 contentLabel, 51057 onKeyDown, 51058 isFullScreen = false, 51059 headerActions = null, 51060 __experimentalHideHeader = false 51061 } = props; 51062 const ref = (0,external_wp_element_namespaceObject.useRef)(); 51063 const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(Modal); 51064 const headingId = title ? `components-modal-header-${instanceId}` : aria.labelledby; 51065 51066 // The focus hook does not support 'firstContentElement' but this is a valid 51067 // value for the Modal's focusOnMount prop. The following code ensures the focus 51068 // hook will focus the first focusable node within the element to which it is applied. 51069 // When `firstContentElement` is passed as the value of the focusOnMount prop, 51070 // the focus hook is applied to the Modal's content element. 51071 // Otherwise, the focus hook is applied to the Modal's ref. This ensures that the 51072 // focus hook will focus the first element in the Modal's **content** when 51073 // `firstContentElement` is passed. 51074 const focusOnMountRef = (0,external_wp_compose_namespaceObject.useFocusOnMount)(focusOnMount === 'firstContentElement' ? 'firstElement' : focusOnMount); 51075 const constrainedTabbingRef = (0,external_wp_compose_namespaceObject.useConstrainedTabbing)(); 51076 const focusReturnRef = (0,external_wp_compose_namespaceObject.useFocusReturn)(); 51077 const focusOutsideProps = (0,external_wp_compose_namespaceObject.__experimentalUseFocusOutside)(onRequestClose); 51078 const contentRef = (0,external_wp_element_namespaceObject.useRef)(null); 51079 const childrenContainerRef = (0,external_wp_element_namespaceObject.useRef)(null); 51080 const [hasScrolledContent, setHasScrolledContent] = (0,external_wp_element_namespaceObject.useState)(false); 51081 const [hasScrollableContent, setHasScrollableContent] = (0,external_wp_element_namespaceObject.useState)(false); 51082 51083 // Determines whether the Modal content is scrollable and updates the state. 51084 const isContentScrollable = (0,external_wp_element_namespaceObject.useCallback)(() => { 51085 if (!contentRef.current) { 51086 return; 51087 } 51088 const closestScrollContainer = (0,external_wp_dom_namespaceObject.getScrollC
51088ontainer)(contentRef.current); 51089 if (contentRef.current === closestScrollContainer) { 51090 setHasScrollableContent(true); 51091 } else { 51092 setHasScrollableContent(false); 51093 } 51094 }, [contentRef]); 51095 (0,external_wp_element_namespaceObject.useEffect)(() => { 51096 openModalCount++; 51097 if (openModalCount === 1) { 51098 hideApp(ref.current); 51099 document.body.classList.add(bodyOpenClassName); 51100 } 51101 return () => { 51102 openModalCount--; 51103 if (openModalCount === 0) { 51104 document.body.classList.remove(bodyOpenClassName); 51105 showApp(); 51106 } 51107 }; 51108 }, [bodyOpenClassName]); 51109 51110 // Calls the isContentScrollable callback when the Modal children container resizes. 51111 (0,external_wp_element_namespaceObject.useLayoutEffect)(() => { 51112 if (!window.ResizeObserver || !childrenContainerRef.current) { 51113 return; 51114 } 51115 const resizeObserver = new ResizeObserver(isContentScrollable); 51116 resizeObserver.observe(childrenContainerRef.current); 51117 isContentScrollable(); 51118 return () => { 51119 resizeObserver.disconnect(); 51120 }; 51121 }, [isContentScrollable, childrenContainerRef]); 51122 function handleEscapeKeyDown(event) { 51123 if ( 51124 // Ignore keydowns from IMEs 51125 event.nativeEvent.isComposing || 51126 // Workaround for Mac Safari where the final Enter/Backspace of an IME composition 51127 // is `isComposing=false`, even though it's technically still part of the composition. 51128 // These can only be detected by keyCode. 51129 event.keyCode === 229) { 51130 return; 51131 } 51132 if (shouldCloseOnEsc && event.code === 'Escape' && !event.defaultPrevented) { 51133 event.preventDefault(); 51134 if (onRequestClose) { 51135 onRequestClose(event); 51136 } 51137 } 51138 } 51139 const onContentContainerScroll = (0,external_wp_element_namespaceObject.useCallback)(e => { 51140 var _e$currentTarget$scro; 51141 const scrollY = (_e$currentTarget$scro = e?.currentTarget?.scrollTop) !== null && _e$currentTarget$scro !== void 0 ? _e$currentTarget$scro : -1; 51142 if (!hasScrolledContent && scrollY > 0) { 51143 setHasScrolledContent(true); 51144 } else if (hasScrolledContent && scrollY <= 0) { 51145 setHasScrolledContent(false); 51146 } 51147 }, [hasScrolledContent]); 51148 let pressTarget = null; 51149 const overlayPressHandlers = { 51150 onPointerDown: event => { 51151 if (event.isPrimary && event.target === event.currentTarget) { 51152 pressTarget = event.target; 51153 // Avoids loss of focus yet also leaves `useFocusOutside` 51154 // practically useless with its only potential trigger being 51155 // programmatic focus movement. TODO opt for either removing 51156 // the hook or enhancing it such that this isn't needed. 51157 event.preventDefault(); 51158 } 51159 }, 51160 // Closes the modal with two exceptions. 1. Opening the context menu on 51161 // the overlay. 2. Pressing on the overlay then dragging the pointer 51162 // over the modal and releasing. Due to the modal being a child of the 51163 // overlay, such a gesture is a `click` on the overlay and cannot be 51164 // excepted by a `click` handler. Thus the tactic of handling 51165 // `pointerup` and comparing its target to that of the `pointerdown`. 51166 onPointerUp: ({ 51167 target, 51168 button 51169 }) => { 51170 const isSameTarget = target === pressTarget; 51171 pressTarget = null; 51172 if (button === 0 && isSameTarget) onRequestClose(); 51173 } 51174 }; 51175 return (0,external_wp_element_namespaceObject.createPortal)( 51176 // eslint-disable-next-line jsx-a11y/no-static-element-interactions 51177 (0,external_wp_element_namespaceObject.createElement)("div", { 51178 ref: (0,external_wp_compose_namespaceObject.useMergeRefs)([ref, forwardedRef]), 51179 className: classnames_default()('components-modal__screen-overlay', overlayClassName), 51180 onKeyDown: handleEscapeKeyDown, 51181 ...(shouldCloseOnClickOutside ? overlayPressHandlers : {}) 51182 }, (0,external_wp_element_namespaceObject.createElement)(style_provider, { 51183 document: document 51184 }, (0,external_wp_element_namespaceObject.createElement)("div", { 51185 className: classnames_default()('components-modal__frame', className, { 51186 'is-full-screen': isFullScreen 51187 }), 51188 style: style, 51189 ref: (0,external_wp_compose_namespaceObject.useMergeRefs)([constrainedTabbingRef, focusReturnRef, focusOnMount !== 'firstContentElement' ? focusOnMountRef : null]), 51190 role: role, 51191 "aria-label": contentLabel, 51192 "aria-labelledby": contentLabel ? undefined : headingId, 51193 "aria-describedby": aria.describedby, 51194 tabIndex: -1, 51195 ...(shouldCloseOnClickOutside ? focusOutsideProps : {}), 51196 onKeyDown: onKeyDown 51197 }, (0,external_wp_element_namespaceObject.createElement)("div", { 51198 className: classnames_default()('components-modal__content', { 51199 'hide-header': __experimentalHideHeader, 51200 'is-scrollable': hasScrollableContent, 51201 'has-scrolled-content': hasScrolledContent 51202 }), 51203 role: "document", 51204 onScroll: onContentContainerScroll, 51205 ref: contentRef, 51206 "aria-label": hasScrollableContent ? (0,external_wp_i18n_namespaceObject.__)('Scrollable section') : undefined, 51207 tabIndex: hasScrollableContent ? 0 : undefined 51208 }, !__experimentalHideHeader && (0,external_wp_element_namespaceObject.createElement)("div", { 51209 className: "components-modal__header" 51210 }, (0,external_wp_element_namespaceObject.createElement)("div", { 51211 className: "components-modal__header-heading-container" 51212 }, icon && (0,external_wp_element_namespaceObject.createElement)("span", { 51213 className: "components-modal__icon-container", 51214 "aria-hidden": true 51215 }, icon), title && (0,external_wp_element_namespaceObject.createElement)("h1", { 51216 id: headingId, 51217 className: "components-modal__header-heading" 51218 }, title)), headerActions, isDismissible && (0,external_wp_element_namespaceObject.createElement)(build_module_button, { 51219 onClick: onRequestClose, 51220 icon: library_close, 51221 label: closeButtonLabel || (0,external_wp_i18n_namespaceObject.__)('Close') 51222 })), (0,external_wp_element_namespaceObject.createElement)("div", { 51223 ref: (0,external_wp_compose_namespaceObject.useMergeRefs)([childrenContainerRef, focusOnMount === 'firstContentElement' ? focusOnMountRef : null]) 51224 }, children))))), document.body); 51225} 51226 51227/** 51228 * Modals give users information and choices related to a task theyâre trying to 51229 * accomplish. They can contain critical information, require decisions, or 51230 * involve multiple tasks. 51231 * 51232 * ```jsx 51233 * import { Button, Modal } from '@wordpress/components';
51234 * import { useState } from '@wordpress/element'; 51235 * 51236 * const MyModal = () => { 51237 * const [ isOpen, setOpen ] = useState( false ); 51238 * const openModal = () => setOpen( true ); 51239 * const closeModal = () => setOpen( false ); 51240 * 51241 * return ( 51242 * <> 51243 * <Button variant="secondary" onClick={ openModal }> 51244 * Open Modal 51245 * </Button> 51246 * { isOpen && ( 51247 * <Modal title="This is my modal" onRequestClose={ closeModal }> 51248 * <Button variant="secondary" onClick={ closeModal }> 51249 * My custom close button 51250 * </Button> 51251 * </Modal> 51252 * ) } 51253 * </> 51254 * ); 51255 * }; 51256 * ``` 51257 */ 51258const Modal = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedModal); 51259/* harmony default export */ const modal = (Modal); 51260 51261;// CONCATENATED MODULE: ./packages/components/build-module/confirm-dialog/styles.js 51262function 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)."; } 51263/** 51264 * External dependencies 51265 */ 51266 51267 51268/** 51269 * The z-index for ConfirmDialog is being set here instead of in 51270 * packages/base-styles/_z-index.scss, because this component uses 51271 * emotion instead of sass. 51272 * 51273 * ConfirmDialog needs this higher z-index to ensure it renders on top of 51274 * any parent Popover component. 51275 */ 51276const styles_wrapper = true ? { 51277 name: "7g5ii0", 51278 styles: "&&{z-index:1000001;}" 51279} : 0; 51280 51281;// CONCATENATED MODULE: ./packages/components/build-module/confirm-dialog/component.js 51282 51283/** 51284 * External dependencies 51285 */ 51286 51287/** 51288 * WordPress dependencies 51289 */ 51290 51291 51292 51293/** 51294 * Internal dependencies 51295 */ 51296 51297 51298 51299 51300 51301 51302 51303 51304function ConfirmDialog(props, forwardedRef) { 51305 const { 51306 isOpen: isOpenProp, 51307 onConfirm, 51308 onCancel, 51309 children, 51310 confirmButtonText, 51311 cancelButtonText, 51312 ...otherProps 51313 } = useContextSystem(props, 'ConfirmDialog'); 51314 const cx = useCx(); 51315 const wrapperClassName = cx(styles_wrapper); 51316 const cancelButtonRef = (0,external_wp_element_namespaceObject.useRef)(); 51317 const confirmButtonRef = (0,external_wp_element_namespaceObject.useRef)(); 51318 const [isOpen, setIsOpen] = (0,external_wp_element_namespaceObject.useState)(); 51319 const [shouldSelfClose, setShouldSelfClose] = (0,external_wp_element_namespaceObject.useState)(); 51320 (0,external_wp_element_namespaceObject.useEffect)(() => { 51321 // We only allow the dialog to close itself if `isOpenProp` is *not* set. 51322 // If `isOpenProp` is set, then it (probably) means it's controlled by a 51323 // parent component. In that case, `shouldSelfClose` might do more harm than 51324 // good, so we disable it. 51325 const isIsOpenSet = typeof isOpenProp !== 'undefined'; 51326 setIsOpen(isIsOpenSet ? isOpenProp : true); 51327 setShouldSelfClose(!isIsOpenSet); 51328 }, [isOpenProp]); 51329 const handleEvent = (0,external_wp_element_namespaceObject.useCallback)(callback => event => { 51330 callback?.(event); 51331 if (shouldSelfClose) { 51332 setIsOpen(false); 51333 } 51334 }, [shouldSelfClose, setIsOpen]); 51335 const handleEnter = (0,external_wp_element_namespaceObject.useCallback)(event => { 51336 // Avoid triggering the 'confirm' action when a button is focused, 51337 // as this can cause a double submission. 51338 const isConfirmOrCancelButton = event.target === cancelButtonRef.current || event.target === confirmButtonRef.current; 51339 if (!isConfirmOrCancelButton && event.key === 'Enter') { 51340 handleEvent(onConfirm)(event); 51341 } 51342 }, [handleEvent, onConfirm]); 51343 const cancelLabel = cancelButtonText !== null && cancelButtonText !== void 0 ? cancelButtonText : (0,external_wp_i18n_namespaceObject.__)('Cancel'); 51344 const confirmLabel = confirmButtonText !== null && confirmButtonText !== void 0 ? confirmButtonText : (0,external_wp_i18n_namespaceObject.__)('OK'); 51345 return (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, isOpen && (0,external_wp_element_namespaceObject.createElement)(modal, { 51346 onRequestClose: handleEvent(onCancel), 51347 onKeyDown: handleEnter, 51348 closeButtonLabel: cancelLabel, 51349 isDismissible: true, 51350 ref: forwardedRef, 51351 overlayClassName: wrapperClassName, 51352 __experimentalHideHeader: true, 51353 ...otherProps 51354 }, (0,external_wp_element_namespaceObject.createElement)(v_stack_component, { 51355 spacing: 8 51356 }, (0,external_wp_element_namespaceObject.createElement)(text_component, null, children), (0,external_wp_element_namespaceObject.createElement)(flex_component, { 51357 direction: "row", 51358 justify: "flex-end" 51359 }, (0,external_wp_element_namespaceObject.createElement)(build_module_button, { 51360 ref: cancelButtonRef, 51361 variant: "tertiary", 51362 onClick: handleEvent(onCancel) 51363 }, cancelLabel), (0,external_wp_element_namespaceObject.createElement)(build_module_button, { 51364 ref: confirmButtonRef, 51365 variant: "primary", 51366 onClick: handleEvent(onConfirm) 51367 }, confirmLabel))))); 51368} 51369/* harmony default export */ const confirm_dialog_component = (contextConnect(ConfirmDialog, 'ConfirmDialog')); 51370 51371;// CONCATENATED MODULE: ./node_modules/@babel/runtime/helpers/esm/objectWithoutPropertiesLoose.js 51372function objectWithoutPropertiesLoose_objectWithoutPropertiesLoose(source, excluded) { 51373 if (source == null) return {}; 51374 var target = {}; 51375 var sourceKeys = Object.keys(source); 51376 var key, i; 51377 for (i = 0; i < sourceKeys.length; i++) { 51378 key = sourceKeys[i]; 51379 if (excluded.indexOf(key) >= 0) continue; 51380 target[key] = source[key]; 51381 } 51382 return target; 51383} 51384// EXTERNAL MODULE: ./node_modules/prop-types/index.js 51385var prop_types = __webpack_require__(2652); 51386var prop_types_default = /*#__PURE__*/__webpack_require__.n(prop_types); 51387// EXTERNAL MODULE: ./node_modules/downshift/node_modules/react-is/index.js 51388var react_is = __webpack_require__(2797); 51389;// CONCATENATED MODULE: ./node_modules/compute-scroll-into-view/dist/index.module.js 51390function index_module_t(t){return null!=t&&"object"==typeof t&&1===t.nodeType}
vendor: 5,743 bytes, lines 51390-51516
51390function 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.parentNode)===f){s.push(p);break}p===document.body&&index_module_n(p)&&!index_module_n(document.documentElement)||index_module_n(p,a)&&s.push(p)}for(var g=o.visualViewport?o.visualViewport.width:innerWidth,m=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,M=W.right,E=W.bottom,V=W.left,x="start"===d||"nearest"===d?y:"end"===d?E:y+b/2,I="center"===u?V+H/2:"end"===u?M: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&&E<=m&&M<=g&&y>=R&&E<=Y&&V>=L&&M<=X)return C;var S=getComputedStyle(k),j=parseInt(S.borderLeftWidth,10),N=parseInt(S.borderTopWidth,10),q=parseInt(S.borderRightWidth,10),z=parseInt(S.borderBottomWidth,10),A=0,F=0,G="offsetWidth"in k?k.offsetWidth-k.clientWidth-j-q:0,J="offsetHeight"in k?k.offsetHeight-k.clientHeight-N-z:0;if(f===k)A="start"===d?x:"end"===d?x-m:"nearest"===d?index_module_r(v,v+m,m,N,z,v+x,v+x+b,b):x-m/2,F="start"===u?I:"center"===u?I-g/2:"end"===u?I-g:index_module_r(w,w+g,g,j,q,w+I,w+I+H,H),A=Math.max(0,A+v),F=Math.max(0,F+w);else{A="start"===d?x-R-N:"end"===d?x-Y+z+J:"nearest"===d?index_module_r(R,Y,D,N,z+J,x,x+b,b):x-(R+D/2)+J/2,F="start"===u?I-L-j:"center"===u?I-(L+O/2)+G/2:"end"===u?I-X+q+G:index_module_r(L,X,O,j,q+G,I,I+H,H);var K=k.scrollLeft,P=k.scrollTop;x+=P-(A=Math.max(0,Math.min(P+A,k.scrollHeight-D+J))),I+=K-(F=Math.max(0,Math.min(K+F,k.scrollWidth-O+G)))}C.push({el:k,top:A,left:F})}return C} 51391 51392;// CONCATENATED MODULE: ./node_modules/downshift/dist/downshift.esm.js 51393 51394 51395 51396 51397 51398 51399 51400 51401 51402var idCounter = 0; 51403/** 51404 * Accepts a parameter and returns it if it's a function 51405 * or a noop function if it's not. This allows us to 51406 * accept a callback, but not worry about it if it's not 51407 * passed. 51408 * @param {Function} cb the callback 51409 * @return {Function} a function 51410 */ 51411 51412function cbToCb(cb) { 51413 return typeof cb === 'function' ? cb : downshift_esm_noop; 51414} 51415 51416function downshift_esm_noop() {} 51417/** 51418 * Scroll node into view if necessary 51419 * @param {HTMLElement} node the element that should scroll into view 51420 * @param {HTMLElement} menuNode the menu element of the component 51421 */ 51422 51423 51424function scrollIntoView(node, menuNode) { 51425 if (!node) { 51426 return; 51427 } 51428 51429 var actions = index_module(node, { 51430 boundary: menuNode, 51431 block: 'nearest', 51432 scrollMode: 'if-needed' 51433 }); 51434 actions.forEach(function (_ref) { 51435 var el = _ref.el, 51436 top = _ref.top, 51437 left = _ref.left; 51438 el.scrollTop = top; 51439 el.scrollLeft = left; 51440 }); 51441} 51442/** 51443 * @param {HTMLElement} parent the parent node 51444 * @param {HTMLElement} child the child node 51445 * @return {Boolean} whether the parent is the child or the child is in the parent 51446 */ 51447 51448 51449function isOrContainsNode(parent, child) { 51450 return parent === child || child instanceof Node && parent.contains && parent.contains(child); 51451} 51452/** 51453 * Simple debounce implementation. Will call the given 51454 * function once after the time given has passed since 51455 * it was last called. 51456 * @param {Function} fn the function to call after the time 51457 * @param {Number} time the time to wait 51458 * @return {Function} the debounced function 51459 */ 51460 51461 51462function downshift_esm_debounce(fn, time) { 51463 var timeoutId; 51464 51465 function cancel() { 51466 if (timeoutId) { 51467 clearTimeout(timeoutId); 51468 } 51469 } 51470 51471 function wrapper() { 51472 for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) { 51473 args[_key] = arguments[_key]; 51474 } 51475 51476 cancel(); 51477 timeoutId = setTimeout(function () { 51478 timeoutId = null; 51479 fn.apply(void 0, args); 51480 }, time); 51481 } 51482 51483 wrapper.cancel = cancel; 51484 return wrapper; 51485} 51486/** 51487 * This is intended to be used to compose event handlers. 51488 * They are executed in order until one of them sets 51489 * `event.preventDownshiftDefault = true`. 51490 * @param {...Function} fns the event handler functions 51491 * @return {Function} the event handler to add to an element 51492 */ 51493 51494 51495function callAllEventHandlers() { 51496 for (var _len2 = arguments.length, fns = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) { 51497 fns[_key2] = arguments[_key2]; 51498 } 51499 51500 return function (event) { 51501 for (var _len3 = arguments.length, args = new Array(_len3 > 1 ? _len3 - 1 : 0), _key3 = 1; _key3 < _len3; _key3++) { 51502 args[_key3 - 1] = arguments[_key3]; 51503 } 51504 51505 return fns.some(function (fn) { 51506 if (fn) { 51507 fn.apply(void 0, [event].concat(args)); 51508 } 51509 51510 return event.preventDownshiftDefault || event.hasOwnProperty('nativeEvent') && event.nativeEvent.preventDownshiftDefault; 51511 }); 51512 }; 51513} 51514 51515function handleRefs() { 51516 for (var _len4 = arguments.length, refs = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
51517 refs[_key4] = arguments[_key4]; 51518 } 51519 51520 return function (node) { 51521 refs.forEach(function (ref) { 51522 if (typeof ref === 'function') { 51523 ref(node); 51524 } else if (ref) { 51525 ref.current = node; 51526 } 51527 }); 51528 }; 51529} 51530/** 51531 * This generates a unique ID for an instance of Downshift 51532 * @return {String} the unique ID 51533 */ 51534 51535 51536function generateId() { 51537 return String(idCounter++); 51538} 51539/** 51540 * Resets idCounter to 0. Used for SSR. 51541 */ 51542 51543 51544function resetIdCounter() { 51545 idCounter = 0; 51546} 51547/** 51548 * Default implementation for status message. Only added when menu is open. 51549 * Will specift if there are results in the list, and if so, how many, 51550 * and what keys are relevant. 51551 * 51552 * @param {Object} param the downshift state and other relevant properties 51553 * @return {String} the a11y status message 51554 */ 51555 51556 51557function getA11yStatusMessage(_ref2) { 51558 var isOpen = _ref2.isOpen, 51559 resultCount = _ref2.resultCount, 51560 previousResultCount = _ref2.previousResultCount; 51561 51562 if (!isOpen) { 51563 return ''; 51564 } 51565 51566 if (!resultCount) { 51567 return 'No results are available.'; 51568 } 51569 51570 if (resultCount !== previousResultCount) { 51571 return resultCount + " result" + (resultCount === 1 ? ' is' : 's are') + " available, use up and down arrow keys to navigate. Press Enter key to select."; 51572 } 51573 51574 return ''; 51575} 51576/** 51577 * Takes an argument and if it's an array, returns the first item in the array 51578 * otherwise returns the argument 51579 * @param {*} arg the maybe-array 51580 * @param {*} defaultValue the value if arg is falsey not defined 51581 * @return {*} the arg or it's first item 51582 */ 51583 51584 51585function unwrapArray(arg, defaultValue) { 51586 arg = Array.isArray(arg) ? 51587 /* istanbul ignore next (preact) */ 51588 arg[0] : arg; 51589 51590 if (!arg && defaultValue) { 51591 return defaultValue; 51592 } else { 51593 return arg; 51594 } 51595} 51596/** 51597 * @param {Object} element (P)react element 51598 * @return {Boolean} whether it's a DOM element 51599 */ 51600 51601 51602function isDOMElement(element) { 51603 51604 51605 return typeof element.type === 'string'; 51606} 51607/** 51608 * @param {Object} element (P)react element 51609 * @return {Object} the props 51610 */ 51611 51612 51613function getElementProps(element) { 51614 51615 return element.props; 51616} 51617/** 51618 * Throws a helpful error message for required properties. Useful 51619 * to be used as a default in destructuring or object params. 51620 * @param {String} fnName the function name 51621 * @param {String} propName the prop name 51622 */ 51623 51624 51625function requiredProp(fnName, propName) { 51626 // eslint-disable-next-line no-console 51627 console.error("The property \"" + propName + "\" is required in \"" + fnName + "\""); 51628} 51629 51630var stateKeys = (/* unused pure expression or super */ null && (['highlightedIndex', 'inputValue', 'isOpen', 'selectedItem', 'type'])); 51631/** 51632 * @param {Object} state the state object 51633 * @return {Object} state that is relevant to downshift 51634 */ 51635 51636function pickState(state) { 51637 if (state === void 0) { 51638 state = {}; 51639 } 51640 51641 var result = {}; 51642 stateKeys.forEach(function (k) { 51643 if (state.hasOwnProperty(k)) { 51644 result[k] = state[k]; 51645 } 51646 }); 51647 return result; 51648} 51649/** 51650 * This will perform a shallow merge of the given state object 51651 * with the state coming from props 51652 * (for the controlled component scenario) 51653 * This is used in state updater functions so they're referencing 51654 * the right state regardless of where it comes from. 51655 * 51656 * @param {Object} state The state of the component/hook. 51657 * @param {Object} props The props that may contain controlled values. 51658 * @returns {Object} The merged controlled state. 51659 */ 51660 51661 51662function getState(state, props) { 51663 return Object.keys(state).reduce(function (prevState, key) { 51664 prevState[key] = isControlledProp(props, key) ? props[key] : state[key]; 51665 return prevState; 51666 }, {}); 51667} 51668/** 51669 * This determines whether a prop is a "controlled prop" meaning it is 51670 * state which is controlled by the outside of this component rather 51671 * than within this component. 51672 * 51673 * @param {Object} props The props that may contain controlled values. 51674 * @param {String} key the key to check 51675 * @return {Boolean} whether it is a controlled controlled prop 51676 */ 51677 51678 51679function isControlledProp(props, key) { 51680 return props[key] !== undefined; 51681} 51682/** 51683 * Normalizes the 'key' property of a KeyboardEvent in IE/Edge 51684 * @param {Object} event a keyboardEvent object 51685 * @return {String} keyboard key 51686 */ 51687 51688 51689function normalizeArrowKey(event) { 51690 var key = event.key, 51691 keyCode = event.keyCode; 51692 /* istanbul ignore next (ie) */ 51693 51694 if (keyCode >= 37 && keyCode <= 40 && key.indexOf('Arrow') !== 0) { 51695 return "Arrow" + key; 51696 } 51697 51698 return key; 51699} 51700/** 51701 * Simple check if the value passed is object literal 51702 * @param {*} obj any things 51703 * @return {Boolean} whether it's object literal 51704 */ 51705 51706 51707function downshift_esm_isPlainObject(obj) { 51708 return Object.prototype.toString.call(obj) === '[object Object]'; 51709} 51710/** 51711 * Returns the new index in the list, in a circular way. If next value is out of bonds from the total, 51712 * it will wrap to either 0 or itemCount - 1. 51713 * 51714 * @param {number} moveAmount Number of positions to move. Negative to move backwards, positive forwards. 51715 * @param {number} baseIndex The initial position to move from. 51716 * @param {number} itemCount The total number of items. 51717 * @param {Function} getItemNodeFromIndex Used to check if item is disabled. 51718 * @param {boolean} circular Specify if navigation is circular. Default is true. 51719 * @returns {number} The new index after the move. 51720 */ 51721 51722 51723function getNextWrappingIndex(moveAmount, baseIndex, itemCount, getItemNodeFromIndex, circular) { 51724 if (circular === void 0) { 51725 circular = true; 51726 } 51727 51728 if (itemCount === 0) { 51729 return -1; 51730 } 51731 51732 var itemsLastIndex = itemCount - 1; 51733 51734 if (typeof baseIndex !== 'number' || baseIndex < 0 || baseIndex >= itemCount) { 51735 baseIndex = moveAmount > 0 ? -1 : itemsLastIndex + 1; 51736 } 51737 51738 var newIndex = baseIndex + moveAmount; 51739 51740 if (newIndex < 0) { 51741 newIndex = circular ? itemsLastIndex : 0; 51742 } else if (newIndex > itemsLastIndex) { 51743 newIndex = circular ? 0 : itemsLastIndex; 51744 } 51745 51746 var nonDisabledNewIndex = getNextNonDisabledIndex(moveAmount, newIndex, itemCount, getItemNodeFromIndex, circular); 51747 51748 if (nonDisabledNewIndex === -1) { 51749 return baseIndex >= itemCount ? -1 : baseIndex; 51750 } 51751 51752 return nonDisabledNewIndex; 51753} 51754/** 51755 * Returns the next index in the list of an item that is not disabled. 51756 * 51757 * @param {number} moveAmount Number of positions to move. Negative to move backwards, positive forwards. 51758 * @param {number} baseIndex The initial position to move from. 51759 * @param {number} itemCount The total number of items. 51760 * @param {Function} getItemNodeFromIndex Used to check if item is disabled. 51761 * @param {boolean} circular Specify if navigation is circular. Default is true. 51762 * @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. 51763 */ 51764 51765 51766function getNextNonDisabledIndex(moveAmount, baseIndex, itemCount, getItemNodeFromIndex, circular) { 51767 var currentElementNode = getItemNodeFromIndex(baseIndex); 51768 51769 if (!currentElementNode || !currentElementNode.hasAttribute('disabled')) { 51770 return baseIndex; 51771 } 51772 51773 if (moveAmount > 0) { 51774 for (var index = baseIndex + 1; index < itemCount; index++) { 51775 if (!getItemNodeFromIndex(index).hasAttribute('disabled')) { 51776 return index; 51777 } 51778 } 51779 } else { 51780 for (var _index = baseIndex - 1; _index >= 0; _index--) {
51781 if (!getItemNodeFromIndex(_index).hasAttribute('disabled')) { 51782 return _index; 51783 } 51784 } 51785 } 51786 51787 if (circular) { 51788 return moveAmount > 0 ? getNextNonDisabledIndex(1, 0, itemCount, getItemNodeFromIndex, false) : getNextNonDisabledIndex(-1, itemCount - 1, itemCount, getItemNodeFromIndex, false); 51789 } 51790 51791 return -1; 51792} 51793/** 51794 * Checks if event target is within the downshift elements. 51795 * 51796 * @param {EventTarget} target Target to check. 51797 * @param {HTMLElement[]} downshiftElements The elements that form downshift (list, toggle button etc). 51798 * @param {Document} document The document. 51799 * @param {boolean} checkActiveElement Whether to also check activeElement. 51800 * 51801 * @returns {boolean} Whether or not the target is within downshift elements. 51802 */ 51803 51804 51805function targetWithinDownshift(target, downshiftElements, document, checkActiveElement) { 51806 if (checkActiveElement === void 0) { 51807 checkActiveElement = true; 51808 } 51809 51810 return downshiftElements.some(function (contextNode) { 51811 return contextNode && (isOrContainsNode(contextNode, target) || checkActiveElement && isOrContainsNode(contextNode, document.activeElement)); 51812 }); 51813} // eslint-disable-next-line import/no-mutable-exports 51814 51815 51816var validateControlledUnchanged = (/* unused pure expression or super */ null && (downshift_esm_noop)); 51817/* istanbul ignore next */ 51818 51819if (false) {} 51820 51821var cleanupStatus = downshift_esm_debounce(function (documentProp) { 51822 getStatusDiv(documentProp).textContent = ''; 51823}, 500); 51824/** 51825 * @param {String} status the status message 51826 * @param {Object} documentProp document passed by the user. 51827 */ 51828 51829function setStatus(status, documentProp) { 51830 var div = getStatusDiv(documentProp); 51831 51832 if (!status) { 51833 return; 51834 } 51835 51836 div.textContent = status; 51837 cleanupStatus(documentProp); 51838} 51839/** 51840 * Get the status node or create it if it does not already exist. 51841 * @param {Object} documentProp document passed by the user. 51842 * @return {HTMLElement} the status node. 51843 */ 51844 51845 51846function getStatusDiv(documentProp) { 51847 if (documentProp === void 0) { 51848 documentProp = document; 51849 } 51850 51851 var statusDiv = documentProp.getElementById('a11y-status-message'); 51852 51853 if (statusDiv) { 51854 return statusDiv; 51855 } 51856 51857 statusDiv = documentProp.createElement('div'); 51858 statusDiv.setAttribute('id', 'a11y-status-message'); 51859 statusDiv.setAttribute('role', 'status'); 51860 statusDiv.setAttribute('aria-live', 'polite'); 51861 statusDiv.setAttribute('aria-relevant', 'additions text'); 51862 Object.assign(statusDiv.style, { 51863 border: '0', 51864 clip: 'rect(0 0 0 0)', 51865 height: '1px', 51866 margin: '-1px', 51867 overflow: 'hidden', 51868 padding: '0', 51869 position: 'absolute', 51870 width: '1px' 51871 }); 51872 documentProp.body.appendChild(statusDiv); 51873 return statusDiv; 51874} 51875 51876var unknown = false ? 0 : 0; 51877var mouseUp = false ? 0 : 1; 51878var itemMouseEnter = false ? 0 : 2; 51879var keyDownArrowUp = false ? 0 : 3; 51880var keyDownArrowDown = false ? 0 : 4; 51881var keyDownEscape = false ? 0 : 5; 51882var keyDownEnter = false ? 0 : 6; 51883var keyDownHome = false ? 0 : 7; 51884var keyDownEnd = false ? 0 : 8; 51885var clickItem = false ? 0 : 9; 51886var blurInput = false ? 0 : 10; 51887var changeInput = false ? 0 : 11; 51888var keyDownSpaceButton = false ? 0 : 12; 51889var clickButton = false ? 0 : 13; 51890var blurButton = false ? 0 : 14; 51891var controlledPropUpdatedSelectedItem = false ? 0 : 15; 51892var touchEnd = false ? 0 : 16; 51893 51894var stateChangeTypes = /*#__PURE__*/Object.freeze({ 51895 __proto__: null, 51896 unknown: unknown, 51897 mouseUp: mouseUp, 51898 itemMouseEnter: itemMouseEnter, 51899 keyDownArrowUp: keyDownArrowUp, 51900 keyDownArrowDown: keyDownArrowDown, 51901 keyDownEscape: keyDownEscape, 51902 keyDownEnter: keyDownEnter, 51903 keyDownHome: keyDownHome, 51904 keyDownEnd: keyDownEnd, 51905 clickItem: clickItem, 51906 blurInput: blurInput, 51907 changeInput: changeInput, 51908 keyDownSpaceButton: keyDownSpaceButton, 51909 clickButton: clickButton, 51910 blurButton: blurButton, 51911 controlledPropUpdatedSelectedItem: controlledPropUpdatedSelectedItem, 51912 touchEnd: touchEnd 51913}); 51914 51915var Downshift = /*#__PURE__*/(/* unused pure expression or super */ null && (function () { 51916 var Downshift = /*#__PURE__*/function (_Component) { 51917 _inheritsLoose(Downshift, _Component); 51918 51919 function Downshift(_props) { 51920 var _this; 51921 51922 _this = _Component.call(this, _props) || this; // fancy destructuring + defaults + aliases 51923 // this basically says each value of state should either be set to 51924 // the initial value or the default value if the initial value is not provided 51925 51926 _this.id = _this.props.id || "downshift-" + generateId(); 51927 _this.menuId = _this.props.menuId || _this.id + "-menu"; 51928 _this.labelId = _this.props.labelId || _this.id + "-label"; 51929 _this.inputId = _this.props.inputId || _this.id + "-input"; 51930 51931 _this.getItemId = _this.props.getItemId || function (index) { 51932 return _this.id + "-item-" + index; 51933 }; 51934 51935 _this.input = null; 51936 _this.items = []; 51937 _this.itemCount = null; 51938 _this.previousResultCount = 0; 51939 _this.timeoutIds = []; 51940 51941 _this.internalSetTimeout = function (fn, time) { 51942 var id = setTimeout(function () { 51943 _this.timeoutIds = _this.timeoutIds.filter(function (i) { 51944 return i !== id; 51945 }); 51946 fn(); 51947 }, time); 51948 51949 _this.timeoutIds.push(id); 51950 }; 51951 51952 _this.setItemCount = function (count) { 51953 _this.itemCount = count; 51954 }; 51955 51956 _this.unsetItemCount = function () { 51957 _this.itemCount = null; 51958 }; 51959 51960 _this.setHighlightedIndex = function (highlightedIndex, otherStateToSet) { 51961 if (highlightedIndex === void 0) { 51962 highlightedIndex = _this.props.defaultHighlightedIndex; 51963 } 51964 51965 if (otherStateToSet === void 0) { 51966 otherStateToSet = {}; 51967 } 51968 51969 otherStateToSet = pickState(otherStateToSet); 51970 51971 _this.internalSetState(_extends({ 51972 highlightedIndex: highlightedIndex 51973 }, otherStateToSet)); 51974 }; 51975 51976 _this.clearSelection = function (cb) { 51977 _this.internalSetState({ 51978 selectedItem: null, 51979 inputValue: '', 51980 highlightedIndex: _this.props.defaultHighlightedIndex, 51981 isOpen: _this.props.defaultIsOpen 51982 }, cb); 51983 }; 51984 51985 _this.selectItem = function (item, otherStateToSet, cb) { 51986 otherStateToSet = pickState(otherStateToSet); 51987 51988 _this.internalSetState(_extends({ 51989 isOpen: _this.props.defaultIsOpen, 51990 highlightedIndex: _this.props.defaultHighlightedIndex, 51991 selectedItem: item, 51992 inputValue: _this.props.itemToString(item) 51993 }, otherStateToSet), cb); 51994 }; 51995 51996 _this.selectItemAtIndex = function (itemIndex, otherStateToSet, cb) { 51997 var item = _this.items[itemIndex]; 51998 51999 if (item == null) { 52000 return; 52001 } 52002 52003 _this.selectItem(item, otherStateToSet, cb); 52004 }; 52005 52006 _this.selectHighlightedItem = function (otherStateToSet, cb) {
52007 return _this.selectItemAtIndex(_this.getState().highlightedIndex, otherStateToSet, cb); 52008 }; 52009 52010 _this.internalSetState = function (stateToSet, cb) { 52011 var isItemSelected, onChangeArg; 52012 var onStateChangeArg = {}; 52013 var isStateToSetFunction = typeof stateToSet === 'function'; // we want to call `onInputValueChange` before the `setState` call 52014 // so someone controlling the `inputValue` state gets notified of 52015 // the input change as soon as possible. This avoids issues with 52016 // preserving the cursor position. 52017 // See https://github.com/downshift-js/downshift/issues/217 for more info. 52018 52019 if (!isStateToSetFunction && stateToSet.hasOwnProperty('inputValue')) { 52020 _this.props.onInputValueChange(stateToSet.inputValue, _extends({}, _this.getStateAndHelpers(), stateToSet)); 52021 } 52022 52023 return _this.setState(function (state) { 52024 state = _this.getState(state); 52025 var newStateToSet = isStateToSetFunction ? stateToSet(state) : stateToSet; // Your own function that could modify the state that will be set. 52026 52027 newStateToSet = _this.props.stateReducer(state, newStateToSet); // checks if an item is selected, regardless of if it's different from 52028 // what was selected before 52029 // used to determine if onSelect and onChange callbacks should be called 52030 52031 isItemSelected = newStateToSet.hasOwnProperty('selectedItem'); // this keeps track of the object we want to call with setState 52032 52033 var nextState = {}; // this is just used to tell whether the state changed 52034 // and we're trying to update that state. OR if the selection has changed and we're 52035 // trying to update the selection 52036 52037 if (isItemSelected && newStateToSet.selectedItem !== state.selectedItem) { 52038 onChangeArg = newStateToSet.selectedItem; 52039 } 52040 52041 newStateToSet.type = newStateToSet.type || unknown; 52042 Object.keys(newStateToSet).forEach(function (key) { 52043 // onStateChangeArg should only have the state that is 52044 // actually changing 52045 if (state[key] !== newStateToSet[key]) { 52046 onStateChangeArg[key] = newStateToSet[key]; 52047 } // the type is useful for the onStateChangeArg 52048 // but we don't actually want to set it in internal state. 52049 // this is an undocumented feature for now... Not all internalSetState 52050 // calls support it and I'm not certain we want them to yet. 52051 // But it enables users controlling the isOpen state to know when 52052 // the isOpen state changes due to mouseup events which is quite handy. 52053 52054 52055 if (key === 'type') { 52056 return; 52057 } 52058 52059 newStateToSet[key]; // if it's coming from props, then we don't care to set it internally 52060 52061 if (!isControlledProp(_this.props, key)) { 52062 nextState[key] = newStateToSet[key]; 52063 } 52064 }); // if stateToSet is a function, then we weren't able to call onInputValueChange
52065 // earlier, so we'll call it now that we know what the inputValue state will be. 52066 52067 if (isStateToSetFunction && newStateToSet.hasOwnProperty('inputValue')) { 52068 _this.props.onInputValueChange(newStateToSet.inputValue, _extends({}, _this.getStateAndHelpers(), newStateToSet)); 52069 } 52070 52071 return nextState; 52072 }, function () { 52073 // call the provided callback if it's a function 52074 cbToCb(cb)(); // only call the onStateChange and onChange callbacks if 52075 // we have relevant information to pass them. 52076 52077 var hasMoreStateThanType = Object.keys(onStateChangeArg).length > 1; 52078 52079 if (hasMoreStateThanType) { 52080 _this.props.onStateChange(onStateChangeArg, _this.getStateAndHelpers()); 52081 } 52082 52083 if (isItemSelected) { 52084 _this.props.onSelect(stateToSet.selectedItem, _this.getStateAndHelpers()); 52085 } 52086 52087 if (onChangeArg !== undefined) { 52088 _this.props.onChange(onChangeArg, _this.getStateAndHelpers()); 52089 } // this is currently undocumented and therefore subject to change 52090 // We'll try to not break it, but just be warned. 52091 52092 52093 _this.props.onUserAction(onStateChangeArg, _this.getStateAndHelpers()); 52094 }); 52095 }; 52096 52097 _this.rootRef = function (node) { 52098 return _this._rootNode = node; 52099 }; 52100 52101 _this.getRootProps = function (_temp, _temp2) { 52102 var _extends2; 52103 52104 var _ref = _temp === void 0 ? {} : _temp, 52105 _ref$refKey = _ref.refKey, 52106 refKey = _ref$refKey === void 0 ? 'ref' : _ref$refKey, 52107 ref = _ref.ref, 52108 rest = _objectWithoutPropertiesLoose(_ref, ["refKey", "ref"]); 52109 52110 var _ref2 = _temp2 === void 0 ? {} : _temp2, 52111 _ref2$suppressRefErro = _ref2.suppressRefError, 52112 suppressRefError = _ref2$suppressRefErro === void 0 ? false : _ref2$suppressRefErro; 52113 52114 // this is used in the render to know whether the user has called getRootProps. 52115 // It uses that to know whether to apply the props automatically 52116 _this.getRootProps.called = true; 52117 _this.getRootProps.refKey = refKey; 52118 _this.getRootProps.suppressRefError = suppressRefError; 52119 52120 var _this$getState = _this.getState(), 52121 isOpen = _this$getState.isOpen; 52122 52123 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); 52124 }; 52125 52126 _this.keyDownHandlers = { 52127 ArrowDown: function ArrowDown(event) { 52128 var _this2 = this; 52129 52130 event.preventDefault(); 52131 52132 if (this.getState().isOpen) { 52133 var amount = event.shiftKey ? 5 : 1; 52134 this.moveHighlightedIndex(amount, { 52135 type: keyDownArrowDown 52136 }); 52137 } else { 52138 this.internalSetState({ 52139 isOpen: true, 52140 type: keyDownArrowDown 52141 }, function () { 52142 var itemCount = _this2.getItemCount(); 52143 52144 if (itemCount > 0) { 52145 var _this2$getState = _this2.getState(), 52146 highlightedIndex = _this2$getState.highlightedIndex; 52147 52148 var nextHighlightedIndex = getNextWrappingIndex(1, highlightedIndex, itemCount, function (index) { 52149 return _this2.getItemNodeFromIndex(index); 52150 }); 52151 52152 _this2.setHighlightedIndex(nextHighlightedIndex, { 52153 type: keyDownArrowDown 52154 }); 52155 } 52156 }); 52157 } 52158 }, 52159 ArrowUp: function ArrowUp(event) { 52160 var _this3 = this; 52161 52162 event.preventDefault(); 52163 52164 if (this.getState().isOpen) { 52165 var amount = event.shiftKey ? -5 : -1; 52166 this.moveHighlightedIndex(amount, { 52167 type: keyDownArrowUp 52168 }); 52169 } else { 52170 this.internalSetState({ 52171 isOpen: true, 52172 type: keyDownArrowUp 52173 }, function () { 52174 var itemCount = _this3.getItemCount(); 52175 52176 if (itemCount > 0) { 52177 var _this3$getState = _this3.getState(), 52178 highlightedIndex = _this3$getState.highlightedIndex; 52179 52180 var nextHighlightedIndex = getNextWrappingIndex(-1, highlightedIndex, itemCount, function (index) { 52181 return _this3.getItemNodeFromIndex(index); 52182 }); 52183 52184 _this3.setHighlightedIndex(nextHighlightedIndex, { 52185 type: keyDownArrowUp 52186 }); 52187 } 52188 }); 52189 } 52190 }, 52191 Enter: function Enter(event) { 52192 if (event.which === 229) { 52193 return; 52194 } 52195
52196 var _this$getState2 = this.getState(), 52197 isOpen = _this$getState2.isOpen, 52198 highlightedIndex = _this$getState2.highlightedIndex; 52199 52200 if (isOpen && highlightedIndex != null) { 52201 event.preventDefault(); 52202 var item = this.items[highlightedIndex]; 52203 var itemNode = this.getItemNodeFromIndex(highlightedIndex); 52204 52205 if (item == null || itemNode && itemNode.hasAttribute('disabled')) { 52206 return; 52207 } 52208 52209 this.selectHighlightedItem({ 52210 type: keyDownEnter 52211 }); 52212 } 52213 }, 52214 Escape: function Escape(event) { 52215 event.preventDefault(); 52216 this.reset(_extends({ 52217 type: keyDownEscape 52218 }, !this.state.isOpen && { 52219 selectedItem: null, 52220 inputValue: '' 52221 })); 52222 } 52223 }; 52224 _this.buttonKeyDownHandlers = _extends({}, _this.keyDownHandlers, { 52225 ' ': function _(event) { 52226 event.preventDefault(); 52227 this.toggleMenu({ 52228 type: keyDownSpaceButton 52229 }); 52230 } 52231 }); 52232 _this.inputKeyDownHandlers = _extends({}, _this.keyDownHandlers, { 52233 Home: function Home(event) { 52234 var _this4 = this; 52235 52236 var _this$getState3 = this.getState(), 52237 isOpen = _this$getState3.isOpen; 52238 52239 if (!isOpen) { 52240 return; 52241 } 52242 52243 event.preventDefault(); 52244 var itemCount = this.getItemCount(); 52245 52246 if (itemCount <= 0 || !isOpen) { 52247 return; 52248 } // get next non-disabled starting downwards from 0 if that's disabled. 52249 52250 52251 var newHighlightedIndex = getNextNonDisabledIndex(1, 0, itemCount, function (index) { 52252 return _this4.getItemNodeFromIndex(index); 52253 }, false); 52254 this.setHighlightedIndex(newHighlightedIndex, { 52255 type: keyDownHome 52256 }); 52257 }, 52258 End: function End(event) { 52259 var _this5 = this; 52260 52261 var _this$getState4 = this.getState(), 52262 isOpen = _this$getState4.isOpen; 52263 52264 if (!isOpen) { 52265 return; 52266 } 52267 52268 event.preventDefault(); 52269 var itemCount = this.getItemCount(); 52270 52271 if (itemCount <= 0 || !isOpen) { 52272 return; 52273 } // get next non-disabled starting upwards from last index if that's disabled. 52274 52275 52276 var newHighlightedIndex = getNextNonDisabledIndex(-1, itemCount - 1, itemCount, function (index) { 52277 return _this5.getItemNodeFromIndex(index); 52278 }, false); 52279 this.setHighlightedIndex(newHighlightedIndex, { 52280 type: keyDownEnd 52281 }); 52282 } 52283 }); 52284 52285 _this.getToggleButtonProps = function (_temp3) { 52286 var _ref3 = _temp3 === void 0 ? {} : _temp3, 52287 onClick = _ref3.onClick, 52288 onPress = _ref3.onPress, 52289 onKeyDown = _ref3.onKeyDown, 52290 onKeyUp = _ref3.onKeyUp, 52291 onBlur = _ref3.onBlur, 52292 rest = _objectWithoutPropertiesLoose(_ref3, ["onClick", "onPress", "onKeyDown", "onKeyUp", "onBlur"]); 52293 52294 var _this$getState5 = _this.getState(), 52295 isOpen = _this$getState5.isOpen; 52296 52297 var enabledEventHandlers = { 52298 onClick: callAllEventHandlers(onClick, _this.buttonHandleClick), 52299 onKeyDown: callAllEventHandlers(onKeyDown, _this.buttonHandleKeyDown), 52300 onKeyUp: callAllEventHandlers(onKeyUp, _this.buttonHandleKeyUp), 52301 onBlur: callAllEventHandlers(onBlur, _this.buttonHandleBlur) 52302 }; 52303 var eventHandlers = rest.disabled ? {} : enabledEventHandlers; 52304 return _extends({ 52305 type: 'button', 52306 role: 'button', 52307 'aria-label': isOpen ? 'close menu' : 'open menu', 52308 'aria-haspopup': true, 52309 'data-toggle': true 52310 }, eventHandlers, rest); 52311 }; 52312 52313 _this.buttonHandleKeyUp = function (event) { 52314 // Prevent click event from emitting in Firefox 52315 event.preventDefault(); 52316 }; 52317 52318 _this.buttonHandleKeyDown = function (event) { 52319 var key = normalizeArrowKey(event); 52320
52321 if (_this.buttonKeyDownHandlers[key]) { 52322 _this.buttonKeyDownHandlers[key].call(_assertThisInitialized(_this), event); 52323 } 52324 }; 52325 52326 _this.buttonHandleClick = function (event) { 52327 event.preventDefault(); // handle odd case for Safari and Firefox which 52328 // don't give the button the focus properly. 52329 52330 /* istanbul ignore if (can't reasonably test this) */ 52331 52332 if ( _this.props.environment.document.activeElement === _this.props.environment.document.body) { 52333 event.target.focus(); 52334 } // to simplify testing components that use downshift, we'll not wrap this in a setTimeout 52335 // if the NODE_ENV is test. With the proper build system, this should be dead code eliminated 52336 // when building for production and should therefore have no impact on production code. 52337 52338 52339 if (false) {} else { 52340 // Ensure that toggle of menu occurs after the potential blur event in iOS 52341 _this.internalSetTimeout(function () { 52342 return _this.toggleMenu({ 52343 type: clickButton 52344 }); 52345 }); 52346 } 52347 }; 52348 52349 _this.buttonHandleBlur = function (event) { 52350 var blurTarget = event.target; // Save blur target for comparison with activeElement later 52351 // Need setTimeout, so that when the user presses Tab, the activeElement is the next focused element, not body element 52352 52353 _this.internalSetTimeout(function () { 52354 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) 52355 ) { 52356 _this.reset({ 52357 type: blurButton 52358 }); 52359 } 52360 }); 52361 }; 52362 52363 _this.getLabelProps = function (props) { 52364 return _extends({ 52365 htmlFor: _this.inputId, 52366 id: _this.labelId 52367 }, props); 52368 }; 52369 52370 _this.getInputProps = function (_temp4) { 52371 var _ref4 = _temp4 === void 0 ? {} : _temp4, 52372 onKeyDown = _ref4.onKeyDown, 52373 onBlur = _ref4.onBlur, 52374 onChange = _ref4.onChange, 52375 onInput = _ref4.onInput, 52376 onChangeText = _ref4.onChangeText, 52377 rest = _objectWithoutPropertiesLoose(_ref4, ["onKeyDown", "onBlur", "onChange", "onInput", "onChangeText"]); 52378 52379 var onChangeKey; 52380 var eventHandlers = {}; 52381 /* istanbul ignore next (preact) */ 52382 52383 { 52384 onChangeKey = 'onChange'; 52385 } 52386 52387 var _this$getState6 = _this.getState(), 52388 inputValue = _this$getState6.inputValue, 52389 isOpen = _this$getState6.isOpen, 52390 highlightedIndex = _this$getState6.highlightedIndex; 52391 52392 if (!rest.disabled) { 52393 var _eventHandlers; 52394 52395 eventHandlers = (_eventHandlers = {}, _eventHandlers[onChangeKey] = callAllEventHandlers(onChange, onInput, _this.inputHandleChange), _eventHandlers.onKeyDown = callAllEventHandlers(onKeyDown, _this.inputHandleKeyDown), _eventHandlers.onBlur = callAllEventHandlers(onBlur, _this.inputHandleBlur), _eventHandlers); 52396 } 52397 52398 return _extends({ 52399 'aria-autocomplete': 'list', 52400 'aria-activedescendant': isOpen && typeof highlightedIndex === 'number' && highlightedIndex >= 0 ? _this.getItemId(highlightedIndex) : null, 52401 'aria-controls': isOpen ? _this.menuId : null, 52402 'aria-labelledby': _this.labelId, 52403 // https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion 52404 // revert back since autocomplete="nope" is ignored on latest Chrome and Opera 52405 autoComplete: 'off', 52406 value: inputValue, 52407 id: _this.inputId 52408 }, eventHandlers, rest); 52409 }; 52410 52411 _this.inputHandleKeyDown = function (event) { 52412 var key = normalizeArrowKey(event); 52413 52414 if (key && _this.inputKeyDownHandlers[key]) { 52415 _this.inputKeyDownHandlers[key].call(_assertThisInitialized(_this), event); 52416 } 52417 }; 52418 52419 _this.inputHandleChange = function (event) { 52420 _this.internalSetState({ 52421 type: changeInput, 52422 isOpen: true, 52423 inputValue: event.target.value, 52424 highlightedIndex: _this.props.defaultHighlightedIndex 52425 }); 52426 }; 52427 52428 _this.inputHandleBlur = function () { 52429 // Need setTimeout, so that when the user presses Tab, the activeElement is the next focused element, not the body element 52430 _this.internalSetTimeout(function () { 52431 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); 52432 52433 if (!_this.isMouseDown && !downshiftButtonIsActive) { 52434 _this.reset({ 52435 type: blurInput 52436 }); 52437 } 52438 }); 52439 }; 52440 52441 _this.menuRef = function (node) {
52442 _this._menuNode = node; 52443 }; 52444 52445 _this.getMenuProps = function (_temp5, _temp6) { 52446 var _extends3; 52447 52448 var _ref5 = _temp5 === void 0 ? {} : _temp5, 52449 _ref5$refKey = _ref5.refKey, 52450 refKey = _ref5$refKey === void 0 ? 'ref' : _ref5$refKey, 52451 ref = _ref5.ref, 52452 props = _objectWithoutPropertiesLoose(_ref5, ["refKey", "ref"]); 52453 52454 var _ref6 = _temp6 === void 0 ? {} : _temp6, 52455 _ref6$suppressRefErro = _ref6.suppressRefError, 52456 suppressRefError = _ref6$suppressRefErro === void 0 ? false : _ref6$suppressRefErro; 52457 52458 _this.getMenuProps.called = true; 52459 _this.getMenuProps.refKey = refKey; 52460 _this.getMenuProps.suppressRefError = suppressRefError; 52461 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); 52462 }; 52463 52464 _this.getItemProps = function (_temp7) { 52465 var _enabledEventHandlers; 52466 52467 var _ref7 = _temp7 === void 0 ? {} : _temp7, 52468 onMouseMove = _ref7.onMouseMove, 52469 onMouseDown = _ref7.onMouseDown, 52470 onClick = _ref7.onClick, 52471 onPress = _ref7.onPress, 52472 index = _ref7.index, 52473 _ref7$item = _ref7.item, 52474 item = _ref7$item === void 0 ? true ? 52475 /* istanbul ignore next */ 52476 undefined : 0 : _ref7$item, 52477 rest = _objectWithoutPropertiesLoose(_ref7, ["onMouseMove", "onMouseDown", "onClick", "onPress", "index", "item"]); 52478 52479 if (index === undefined) { 52480 _this.items.push(item); 52481 52482 index = _this.items.indexOf(item); 52483 } else { 52484 _this.items[index] = item; 52485 } 52486 52487 var onSelectKey = 'onClick'; 52488 var customClickHandler = onClick; 52489 var enabledEventHandlers = (_enabledEventHandlers = { 52490 // onMouseMove is used over onMouseEnter here. onMouseMove 52491 // is only triggered on actual mouse movement while onMouseEnter 52492 // can fire on DOM changes, interrupting keyboard navigation 52493 onMouseMove: callAllEventHandlers(onMouseMove, function () { 52494 if (index === _this.getState().highlightedIndex) { 52495 return; 52496 } 52497 52498 _this.setHighlightedIndex(index, { 52499 type: itemMouseEnter 52500 }); // We never want to manually scroll when changing state based 52501 // on `onMouseMove` because we will be moving the element out 52502 // from under the user which is currently scrolling/moving the 52503 // cursor 52504 52505 52506 _this.avoidScrolling = true; 52507 52508 _this.internalSetTimeout(function () { 52509 return _this.avoidScrolling = false; 52510 }, 250); 52511 }), 52512 onMouseDown: callAllEventHandlers(onMouseDown, function (event) { 52513 // This prevents the activeElement from being changed 52514 // to the item so it can remain with the current activeElement 52515 // which is a more common use case. 52516 event.preventDefault(); 52517 }) 52518 }, _enabledEventHandlers[onSelectKey] = callAllEventHandlers(customClickHandler, function () { 52519 _this.selectItemAtIndex(index, { 52520 type: clickItem 52521 }); 52522 }), _enabledEventHandlers); // Passing down the onMouseDown handler to prevent redirect 52523 // of the activeElement if clicking on disabled items 52524 52525 var eventHandlers = rest.disabled ? { 52526 onMouseDown: enabledEventHandlers.onMouseDown 52527 } : enabledEventHandlers; 52528 return _extends({ 52529 id: _this.getItemId(index), 52530 role: 'option', 52531 'aria-selected': _this.getState().highlightedIndex === index 52532 }, eventHandlers, rest); 52533 }; 52534 52535 _this.clearItems = function () { 52536 _this.items = []; 52537 }; 52538 52539 _this.reset = function (otherStateToSet, cb) { 52540 if (otherStateToSet === void 0) { 52541 otherStateToSet = {}; 52542 } 52543 52544 otherStateToSet = pickState(otherStateToSet); 52545 52546 _this.internalSetState(function (_ref8) { 52547 var selectedItem = _ref8.selectedItem; 52548 return _extends({ 52549 isOpen: _this.props.defaultIsOpen, 52550 highlightedIndex: _this.props.defaultHighlightedIndex, 52551 inputValue: _this.props.itemToString(selectedItem) 52552 }, otherStateToSet); 52553 }, cb); 52554 }; 52555 52556 _this.toggleMenu = function (otherStateToSet, cb) { 52557 if (otherStateToSet === void 0) { 52558 otherStateToSet = {}; 52559 } 52560 52561 otherStateToSet = pickState(otherStateToSet); 52562 52563 _this.internalSetState(function (_ref9) { 52564 var isOpen = _ref9.isOpen; 52565 return _extends({ 52566 isOpen: !isOpen 52567 }, isOpen && { 52568 highlightedIndex: _this.props.defaultHighlightedIndex 52569 }, otherStateToSet); 52570 }, function () {
52571 var _this$getState7 = _this.getState(), 52572 isOpen = _this$getState7.isOpen, 52573 highlightedIndex = _this$getState7.highlightedIndex; 52574 52575 if (isOpen) { 52576 if (_this.getItemCount() > 0 && typeof highlightedIndex === 'number') { 52577 _this.setHighlightedIndex(highlightedIndex, otherStateToSet); 52578 } 52579 } 52580 52581 cbToCb(cb)(); 52582 }); 52583 }; 52584 52585 _this.openMenu = function (cb) { 52586 _this.internalSetState({ 52587 isOpen: true 52588 }, cb); 52589 }; 52590 52591 _this.closeMenu = function (cb) { 52592 _this.internalSetState({ 52593 isOpen: false 52594 }, cb); 52595 }; 52596 52597 _this.updateStatus = downshift_esm_debounce(function () { 52598 var state = _this.getState(); 52599 52600 var item = _this.items[state.highlightedIndex]; 52601 52602 var resultCount = _this.getItemCount(); 52603 52604 var status = _this.props.getA11yStatusMessage(_extends({ 52605 itemToString: _this.props.itemToString, 52606 previousResultCount: _this.previousResultCount, 52607 resultCount: resultCount, 52608 highlightedItem: item 52609 }, state)); 52610 52611 _this.previousResultCount = resultCount; 52612 setStatus(status, _this.props.environment.document); 52613 }, 200); 52614 52615 var _this$props = _this.props, 52616 defaultHighlightedIndex = _this$props.defaultHighlightedIndex, 52617 _this$props$initialHi = _this$props.initialHighlightedIndex, 52618 _highlightedIndex = _this$props$initialHi === void 0 ? defaultHighlightedIndex : _this$props$initialHi, 52619 defaultIsOpen = _this$props.defaultIsOpen, 52620 _this$props$initialIs = _this$props.initialIsOpen, 52621 _isOpen = _this$props$initialIs === void 0 ? defaultIsOpen : _this$props$initialIs, 52622 _this$props$initialIn = _this$props.initialInputValue, 52623 _inputValue = _this$props$initialIn === void 0 ? '' : _this$props$initialIn, 52624 _this$props$initialSe = _this$props.initialSelectedItem, 52625 _selectedItem = _this$props$initialSe === void 0 ? null : _this$props$initialSe; 52626 52627 var _state = _this.getState({ 52628 highlightedIndex: _highlightedIndex, 52629 isOpen: _isOpen, 52630 inputValue: _inputValue, 52631 selectedItem: _selectedItem 52632 }); 52633 52634 if (_state.selectedItem != null && _this.props.initialInputValue === undefined) { 52635 _state.inputValue = _this.props.itemToString(_state.selectedItem); 52636 } 52637 52638 _this.state = _state; 52639 return _this; 52640 } 52641 52642 var _proto = Downshift.prototype; 52643 52644 /** 52645 * Clear all running timeouts 52646 */ 52647 _proto.internalClearTimeouts = function internalClearTimeouts() { 52648 this.timeoutIds.forEach(function (id) { 52649 clearTimeout(id); 52650 }); 52651 this.timeoutIds = []; 52652 } 52653 /** 52654 * Gets the state based on internal state or props 52655 * If a state value is passed via props, then that 52656 * is the value given, otherwise it's retrieved from 52657 * stateToMerge 52658 * 52659 * @param {Object} stateToMerge defaults to this.state 52660 * @return {Object} the state 52661 */ 52662 ; 52663 52664 _proto.getState = function getState$1(stateToMerge) { 52665 if (stateToMerge === void 0) { 52666 stateToMerge = this.state; 52667 } 52668 52669 return getState(stateToMerge, this.props); 52670 }; 52671 52672 _proto.getItemCount = function getItemCount() { 52673 // things read better this way. They're in priority order: 52674 // 1. `this.itemCount` 52675 // 2. `this.props.itemCount` 52676 // 3. `this.items.length` 52677 var itemCount = this.items.length; 52678 52679 if (this.itemCount != null) { 52680 itemCount = this.itemCount; 52681 } else if (this.props.itemCount !== undefined) { 52682 itemCount = this.props.itemCount; 52683 } 52684 52685 return itemCount; 52686 }; 52687 52688 _proto.getItemNodeFromIndex = function getItemNodeFromIndex(index) { 52689 return this.props.environment.document.getElementById(this.getItemId(index)); 52690 }; 52691 52692 _proto.scrollHighlightedItemIntoView = function scrollHighlightedItemIntoView() { 52693 /* istanbul ignore else (react-native) */ 52694 { 52695 var node = this.getItemNodeFromIndex(this.getState().highlightedIndex);
52696 this.props.scrollIntoView(node, this._menuNode); 52697 } 52698 }; 52699 52700 _proto.moveHighlightedIndex = function moveHighlightedIndex(amount, otherStateToSet) { 52701 var _this6 = this; 52702 52703 var itemCount = this.getItemCount(); 52704 52705 var _this$getState8 = this.getState(), 52706 highlightedIndex = _this$getState8.highlightedIndex; 52707 52708 if (itemCount > 0) { 52709 var nextHighlightedIndex = getNextWrappingIndex(amount, highlightedIndex, itemCount, function (index) { 52710 return _this6.getItemNodeFromIndex(index); 52711 }); 52712 this.setHighlightedIndex(nextHighlightedIndex, otherStateToSet); 52713 } 52714 }; 52715 52716 _proto.getStateAndHelpers = function getStateAndHelpers() { 52717 var _this$getState9 = this.getState(), 52718 highlightedIndex = _this$getState9.highlightedIndex, 52719 inputValue = _this$getState9.inputValue, 52720 selectedItem = _this$getState9.selectedItem, 52721 isOpen = _this$getState9.isOpen; 52722 52723 var itemToString = this.props.itemToString; 52724 var id = this.id; 52725 var getRootProps = this.getRootProps, 52726 getToggleButtonProps = this.getToggleButtonProps, 52727 getLabelProps = this.getLabelProps, 52728 getMenuProps = this.getMenuProps, 52729 getInputProps = this.getInputProps, 52730 getItemProps = this.getItemProps, 52731 openMenu = this.openMenu, 52732 closeMenu = this.closeMenu, 52733 toggleMenu = this.toggleMenu, 52734 selectItem = this.selectItem, 52735 selectItemAtIndex = this.selectItemAtIndex, 52736 selectHighlightedItem = this.selectHighlightedItem, 52737 setHighlightedIndex = this.setHighlightedIndex, 52738 clearSelection = this.clearSelection, 52739 clearItems = this.clearItems, 52740 reset = this.reset, 52741 setItemCount = this.setItemCount, 52742 unsetItemCount = this.unsetItemCount, 52743 setState = this.internalSetState; 52744 return { 52745 // prop getters 52746 getRootProps: getRootProps, 52747 getToggleButtonProps: getToggleButtonProps, 52748 getLabelProps: getLabelProps, 52749 getMenuProps: getMenuProps, 52750 getInputProps: getInputProps, 52751 getItemProps: getItemProps, 52752 // actions 52753 reset: reset, 52754 openMenu: openMenu, 52755 closeMenu: closeMenu, 52756 toggleMenu: toggleMenu, 52757 selectItem: selectItem, 52758 selectItemAtIndex: selectItemAtIndex, 52759 selectHighlightedItem: selectHighlightedItem, 52760 setHighlightedIndex: setHighlightedIndex, 52761 clearSelection: clearSelection, 52762 clearItems: clearItems, 52763 setItemCount: setItemCount, 52764 unsetItemCount: unsetItemCount, 52765 setState: setState, 52766 // props 52767 itemToString: itemToString, 52768 // derived 52769 id: id, 52770 // state 52771 highlightedIndex: highlightedIndex, 52772 inputValue: inputValue, 52773 isOpen: isOpen, 52774 selectedItem: selectedItem 52775 }; 52776 } //////////////////////////// ROOT 52777 ; 52778 52779 _proto.componentDidMount = function componentDidMount() { 52780 var _this7 = this; 52781 52782 /* istanbul ignore if (react-native) */ 52783 if (false) {} 52784 /* istanbul ignore if (react-native) */ 52785 52786 52787 { 52788 // this.isMouseDown helps us track whether the mouse is currently held down. 52789 // This is useful when the user clicks on an item in the list, but holds the mouse 52790 // down long enough for the list to disappear (because the blur event fires on the input) 52791 // this.isMouseDown is used in the blur handler on the input to determine whether the blur event should 52792 // trigger hiding the menu. 52793 var onMouseDown = function onMouseDown() { 52794 _this7.isMouseDown = true; 52795 }; 52796 52797 var onMouseUp = function onMouseUp(event) { 52798 _this7.isMouseDown = false; // if the target element or the activeElement is within a downshift node 52799 // then we don't want to reset downshift 52800 52801 var contextWithinDownshift = targetWithinDownshift(event.target, [_this7._rootNode, _this7._menuNode], _this7.props.environment.document); 52802 52803 if (!contextWithinDownshift && _this7.getState().isOpen) { 52804 _this7.reset({ 52805 type: mouseUp 52806 }, function () { 52807 return _this7.props.onOuterClick(_this7.getStateAndHelpers()); 52808 }); 52809 } 52810 }; // Touching an element in iOS gives focus and hover states, but touching out of 52811 // the element will remove hover, and persist the focus state, resulting in the 52812 // blur event not being triggered. 52813 // this.isTouchMove helps us track whether the user is tapping or swiping on a touch screen. 52814 // If the user taps outside of Downshift, the component should be reset, 52815 // but not if the user is swiping 52816 52817 52818 var onTouchStart = function onTouchStart() { 52819 _this7.isTouchMove = false;
52820 }; 52821 52822 var onTouchMove = function onTouchMove() { 52823 _this7.isTouchMove = true; 52824 }; 52825 52826 var onTouchEnd = function onTouchEnd(event) { 52827 var contextWithinDownshift = targetWithinDownshift(event.target, [_this7._rootNode, _this7._menuNode], _this7.props.environment.document, false); 52828 52829 if (!_this7.isTouchMove && !contextWithinDownshift && _this7.getState().isOpen) { 52830 _this7.reset({ 52831 type: touchEnd 52832 }, function () { 52833 return _this7.props.onOuterClick(_this7.getStateAndHelpers()); 52834 }); 52835 } 52836 }; 52837 52838 var environment = this.props.environment; 52839 environment.addEventListener('mousedown', onMouseDown); 52840 environment.addEventListener('mouseup', onMouseUp); 52841 environment.addEventListener('touchstart', onTouchStart); 52842 environment.addEventListener('touchmove', onTouchMove); 52843 environment.addEventListener('touchend', onTouchEnd); 52844 52845 this.cleanup = function () { 52846 _this7.internalClearTimeouts(); 52847 52848 _this7.updateStatus.cancel(); 52849 52850 environment.removeEventListener('mousedown', onMouseDown); 52851 environment.removeEventListener('mouseup', onMouseUp); 52852 environment.removeEventListener('touchstart', onTouchStart); 52853 environment.removeEventListener('touchmove', onTouchMove); 52854 environment.removeEventListener('touchend', onTouchEnd); 52855 }; 52856 } 52857 }; 52858 52859 _proto.shouldScroll = function shouldScroll(prevState, prevProps) { 52860 var _ref10 = this.props.highlightedIndex === undefined ? this.getState() : this.props, 52861 currentHighlightedIndex = _ref10.highlightedIndex; 52862 52863 var _ref11 = prevProps.highlightedIndex === undefined ? prevState : prevProps, 52864 prevHighlightedIndex = _ref11.highlightedIndex; 52865
52866 var scrollWhenOpen = currentHighlightedIndex && this.getState().isOpen && !prevState.isOpen; 52867 var scrollWhenNavigating = currentHighlightedIndex !== prevHighlightedIndex; 52868 return scrollWhenOpen || scrollWhenNavigating; 52869 }; 52870 52871 _proto.componentDidUpdate = function componentDidUpdate(prevProps, prevState) { 52872 if (false) {} 52873 52874 if (isControlledProp(this.props, 'selectedItem') && this.props.selectedItemChanged(prevProps.selectedItem, this.props.selectedItem)) { 52875 this.internalSetState({ 52876 type: controlledPropUpdatedSelectedItem, 52877 inputValue: this.props.itemToString(this.props.selectedItem) 52878 }); 52879 } 52880 52881 if (!this.avoidScrolling && this.shouldScroll(prevState, prevProps)) { 52882 this.scrollHighlightedItemIntoView(); 52883 } 52884 /* istanbul ignore else (react-native) */ 52885 52886 52887 { 52888 this.updateStatus(); 52889 } 52890 }; 52891 52892 _proto.componentWillUnmount = function componentWillUnmount() { 52893 this.cleanup(); // avoids memory leak 52894 }; 52895 52896 _proto.render = function render() { 52897 var children = unwrapArray(this.props.children, downshift_esm_noop); // because the items are rerendered every time we call the children 52898 // we clear this out each render and it will be populated again as 52899 // getItemProps is called. 52900 52901 this.clearItems(); // we reset this so we know whether the user calls getRootProps during 52902 // this render. If they do then we don't need to do anything, 52903 // if they don't then we need to clone the element they return and 52904 // apply the props for them. 52905 52906 this.getRootProps.called = false; 52907 this.getRootProps.refKey = undefined; 52908 this.getRootProps.suppressRefError = undefined; // we do something similar for getMenuProps 52909 52910 this.getMenuProps.called = false; 52911 this.getMenuProps.refKey = undefined; 52912 this.getMenuProps.suppressRefError = undefined; // we do something similar for getLabelProps 52913 52914 this.getLabelProps.called = false; // and something similar for getInputProps 52915 52916 this.getInputProps.called = false; 52917 var element = unwrapArray(children(this.getStateAndHelpers())); 52918 52919 if (!element) { 52920 return null; 52921 } 52922 52923 if (this.getRootProps.called || this.props.suppressRefError) { 52924 if (false) {} 52925 52926 return element; 52927 } else if (isDOMElement(element)) { 52928 // they didn't apply the root props, but we can clone 52929 // this and apply the props ourselves 52930 return /*#__PURE__*/cloneElement(element, this.getRootProps(getElementProps(element))); 52931 } 52932 /* istanbul ignore else */ 52933 52934 52935 if (false) {} 52936 /* istanbul ignore next */ 52937 52938 52939 return undefined; 52940 }; 52941 52942 return Downshift; 52943 }(Component); 52944 52945 Downshift.defaultProps = { 52946 defaultHighlightedIndex: null, 52947 defaultIsOpen: false, 52948 getA11yStatusMessage: getA11yStatusMessage, 52949 itemToString: function itemToString(i) { 52950 if (i == null) { 52951 return ''; 52952 } 52953 52954 if (false) {} 52955 52956 return String(i); 52957 }, 52958 onStateChange: downshift_esm_noop, 52959 onInputValueChange: downshift_esm_noop, 52960 onUserAction: downshift_esm_noop, 52961 onChange: downshift_esm_noop, 52962 onSelect: downshift_esm_noop, 52963 onOuterClick: downshift_esm_noop, 52964 selectedItemChanged: function selectedItemChanged(prevItem, item) { 52965 return prevItem !== item; 52966 }, 52967 environment: typeof window === 'undefined' 52968 /* istanbul ignore next (ssr) */ 52969 ? {} : window, 52970 stateReducer: function stateReducer(state, stateToSet) { 52971 return stateToSet; 52972 }, 52973 suppressRefError: false, 52974 scrollIntoView: scrollIntoView 52975 }; 52976 Downshift.stateChangeTypes = stateChangeTypes; 52977 return Downshift; 52978}())); 52979 52980 false ? 0 : void 0; 52981 52982function validateGetMenuPropsCalledCorrectly(node, _ref12) { 52983 var refKey = _ref12.refKey; 52984 52985 if (!node) { 52986 // eslint-disable-next-line no-console 52987 console.error("downshift: The ref prop \"" + refKey + "\" from getMenuProps was not applied correctly on your menu element."); 52988 } 52989} 52990 52991function validateGetRootPropsCalledCorrectly(element, _ref13) { 52992 var refKey = _ref13.refKey; 52993 var refKeySpecified = refKey !== 'ref'; 52994 var isComposite = !isDOMElement(element); 52995 52996 if (isComposite && !refKeySpecified && !isForwardRef(element)) { 52997 // eslint-disable-next-line no-console 52998 console.error('downshift: You returned a non-DOM element. You must specify a refKey in getRootProps'); 52999 } else if (!isComposite && refKeySpecified) { 53000 // eslint-disable-next-line no-console 53001 console.error("downshift: You returned a DOM element. You should not specify a refKey in getRootProps. You specified \"" + refKey + "\""); 53002 } 53003 53004 if (!isForwardRef(element) && !getElementProps(element)[refKey]) { 53005 // eslint-disable-next-line no-console 53006 console.error("downshift: You must apply the ref prop \"" + refKey + "\" from getRootProps onto y
53006our root element."); 53007 } 53008} 53009 53010var dropdownDefaultStateValues = { 53011 highlightedIndex: -1, 53012 isOpen: false, 53013 selectedItem: null, 53014 inputValue: '' 53015}; 53016 53017function callOnChangeProps(action, state, newState) { 53018 var props = action.props, 53019 type = action.type; 53020 var changes = {}; 53021 Object.keys(state).forEach(function (key) { 53022 invokeOnChangeHandler(key, action, state, newState); 53023 53024 if (newState[key] !== state[key]) { 53025 changes[key] = newState[key]; 53026 } 53027 }); 53028 53029 if (props.onStateChange && Object.keys(changes).length) { 53030 props.onStateChange(extends_extends({ 53031 type: type 53032 }, changes)); 53033 } 53034} 53035 53036function invokeOnChangeHandler(key, action, state, newState) { 53037 var props = action.props, 53038 type = action.type; 53039 var handler = "on" + capitalizeString(key) + "Change"; 53040 53041 if (props[handler] && newState[key] !== undefined && newState[key] !== state[key]) { 53042 props[handler](extends_extends({ 53043 type: type 53044 }, newState)); 53045 } 53046} 53047/** 53048 * Default state reducer that returns the changes. 53049 * 53050 * @param {Object} s state. 53051 * @param {Object} a action with changes. 53052 * @returns {Object} changes. 53053 */ 53054 53055 53056function stateReducer(s, a) { 53057 return a.changes; 53058} 53059/** 53060 * Returns a message to be added to aria-live region when item is selected. 53061 * 53062 * @param {Object} selectionParameters Parameters required to build the message. 53063 * @returns {string} The a11y message. 53064 */ 53065 53066 53067function getA11ySelectionMessage(selectionParameters) { 53068 var selectedItem = selectionParameters.selectedItem, 53069 itemToStringLocal = selectionParameters.itemToString; 53070 return selectedItem ? itemToStringLocal(selectedItem) + " has been selected." : ''; 53071} 53072/** 53073 * Debounced call for updating the a11y message. 53074 */ 53075 53076 53077var updateA11yStatus = downshift_esm_debounce(function (getA11yMessage, document) { 53078 setStatus(getA11yMessage(), document); 53079}, 200); // istanbul ignore next 53080 53081var downshift_esm_useIsomorphicLayoutEffect = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined' ? external_React_.useLayoutEffect : external_React_.useEffect; 53082 53083function useElementIds(_ref) { 53084 var _ref$id = _ref.id, 53085 id = _ref$id === void 0 ? "downshift-" + generateId() : _ref$id, 53086 labelId = _ref.labelId, 53087 menuId = _ref.menuId, 53088 getItemId = _ref.getItemId, 53089 toggleButtonId = _ref.toggleButtonId, 53090 inputId = _ref.inputId; 53091 var elementIdsRef = (0,external_React_.useRef)({ 53092 labelId: labelId || id + "-label", 53093 menuId: menuId || id + "-menu", 53094 getItemId: getItemId || function (index) { 53095 return id + "-item-" + index; 53096 }, 53097 toggleButtonId: toggleButtonId || id + "-toggle-button", 53098 inputId: inputId || id + "-input" 53099 }); 53100 return elementIdsRef.current; 53101} 53102 53103function getItemIndex(index, item, items) { 53104 if (index !== undefined) { 53105 return index; 53106 } 53107 53108 if (items.length === 0) { 53109 return -1; 53110 } 53111 53112 return items.indexOf(item); 53113} 53114 53115function itemToString(item) { 53116 return item ? String(item) : ''; 53117} 53118 53119function isAcceptedCharacterKey(key) { 53120 return /^\S{1}$/.test(key); 53121} 53122 53123function capitalizeString(string) { 53124 return "" + string.slice(0, 1).toUpperCase() + string.slice(1); 53125} 53126 53127function downshift_esm_useLatestRef(val) { 53128 var ref = (0,external_React_.useRef)(val); // technically this is not "concurrent mode safe" because we're manipulating 53129 // the value during render (so it's not idempotent). However, the places this 53130 // hook is used is to support memoizing callbacks which will be called 53131 // *during* render, so we need the latest values *during* render. 53132 // If not for this, then we'd probably want to use useLayoutEffect instead. 53133 53134 ref.current = val; 53135 return ref; 53136} 53137/** 53138 * Computes the controlled state using a the previous state, props, 53139 * two reducers, one from downshift and an optional one from the user. 53140 * Also calls the onChange handlers for state values that have changed. 53141 * 53142 * @param {Function} reducer Reducer function from downshift. 53143 * @param {Object} initialState Initial state of the hook. 53144 * @param {Object} props The hook props. 53145 * @returns {Array} An array with the state and an action dispatcher. 53146 */ 53147 53148 53149function useEnhancedReducer(reducer, initialState, props) { 53150 var prevStateRef = (0,external_React_.useRef)(); 53151 var actionRef = (0,external_React_.useRef)(); 53152 var enhancedReducer = (0,external_React_.useCallback)(function (state, action) { 53153 actionRef.current = action; 53154 state = getState(state, action.props); 53155 var changes = reducer(state, action); 53156 var newState = action.props.stateReducer(state, extends_extends({}, action, { 53157 changes: changes 53158 })); 53159 return newState; 53160 }, [reducer]); 53161 53162 var _useReducer = (0,external_React_.useReducer)(enhancedReducer, initialState), 53163 state = _useReducer[0], 53164 dispatch = _useReducer[1]; 53165 53166 var propsRef = downshift_esm_useLatestRef(props); 53167 var dispatchWithProps = (0,external_React_.useCallback)(function (action) {
53168 return dispatch(extends_extends({ 53169 props: propsRef.current 53170 }, action)); 53171 }, [propsRef]); 53172 var action = actionRef.current; 53173 (0,external_React_.useEffect)(function () { 53174 if (action && prevStateRef.current && prevStateRef.current !== state) { 53175 callOnChangeProps(action, getState(prevStateRef.current, action.props), state); 53176 } 53177 53178 prevStateRef.current = state; 53179 }, [state, props, action]); 53180 return [state, dispatchWithProps]; 53181} 53182/** 53183 * Wraps the useEnhancedReducer and applies the controlled prop values before 53184 * returning the new state. 53185 * 53186 * @param {Function} reducer Reducer function from downshift. 53187 * @param {Object} initialState Initial state of the hook. 53188 * @param {Object} props The hook props. 53189 * @returns {Array} An array with the state and an action dispatcher. 53190 */ 53191 53192 53193function useControlledReducer(reducer, initialState, props) { 53194 var _useEnhancedReducer = useEnhancedReducer(reducer, initialState, props), 53195 state = _useEnhancedReducer[0], 53196 dispatch = _useEnhancedReducer[1]; 53197 53198 return [getState(state, props), dispatch]; 53199} 53200 53201var defaultProps = { 53202 itemToString: itemToString, 53203 stateReducer: stateReducer, 53204 getA11ySelectionMessage: getA11ySelectionMessage, 53205 scrollIntoView: scrollIntoView, 53206 circularNavigation: false, 53207 environment: typeof window === 'undefined' 53208 /* istanbul ignore next (ssr) */ 53209 ? {} : window 53210}; 53211 53212function getDefaultValue(props, propKey, defaultStateValues) { 53213 if (defaultStateValues === void 0) { 53214 defaultStateValues = dropdownDefaultStateValues; 53215 } 53216 53217 var defaultPropKey = "default" + capitalizeString(propKey); 53218 53219 if (defaultPropKey in props) { 53220 return props[defaultPropKey]; 53221 } 53222 53223 return defaultStateValues[propKey]; 53224} 53225 53226function getInitialValue(props, propKey, defaultStateValues) { 53227 if (defaultStateValues === void 0) { 53228 defaultStateValues = dropdownDefaultStateValues; 53229 } 53230 53231 if (propKey in props) { 53232 return props[propKey]; 53233 } 53234 53235 var initialPropKey = "initial" + capitalizeString(propKey); 53236 53237 if (initialPropKey in props) { 53238 return props[initialPropKey]; 53239 } 53240 53241 return getDefaultValue(props, propKey, defaultStateValues); 53242} 53243 53244function getInitialState(props) { 53245 var selectedItem = getInitialValue(props, 'selectedItem'); 53246 var isOpen = getInitialValue(props, 'isOpen'); 53247 var highlightedIndex = getInitialValue(props, 'highlightedIndex'); 53248 var inputValue = getInitialValue(props, 'inputValue'); 53249 return { 53250 highlightedIndex: highlightedIndex < 0 && selectedItem && isOpen ? props.items.indexOf(selectedItem) : highlightedIndex, 53251 isOpen: isOpen, 53252 selectedItem: selectedItem, 53253 inputValue: inputValue 53254 }; 53255} 53256 53257function getHighlightedIndexOnOpen(props, state, offset, getItemNodeFromIndex) { 53258 var items = props.items, 53259 initialHighlightedIndex = props.initialHighlightedIndex, 53260 defaultHighlightedIndex = props.defaultHighlightedIndex; 53261 var selectedItem = state.selectedItem, 53262 highlightedIndex = state.highlightedIndex; 53263 53264 if (items.length === 0) { 53265 return -1; 53266 } // initialHighlightedIndex will give value to highlightedIndex on initial state only. 53267 53268 53269 if (initialHighlightedIndex !== undefined && highlightedIndex === initialHighlightedIndex) { 53270 return initialHighlightedIndex; 53271 } 53272 53273 if (defaultHighlightedIndex !== undefined) { 53274 return defaultHighlightedIndex; 53275 } 53276 53277 if (selectedItem) { 53278 if (offset === 0) { 53279 return items.indexOf(selectedItem); 53280 } 53281 53282 return getNextWrappingIndex(offset, items.indexOf(selectedItem), items.length, getItemNodeFromIndex, false); 53283 } 53284 53285 if (offset === 0) { 53286 return -1; 53287 } 53288 53289 return offset < 0 ? items.length - 1 : 0; 53290} 53291/** 53292 * Reuse the movement tracking of mouse and touch events. 53293 * 53294 * @param {boolean} isOpen Whether the dropdown is open or not. 53295 * @param {Array<Object>} downshiftElementRefs Downshift element refs to track movement (toggleButton, menu etc.) 53296 * @param {Object} environment Environment where component/hook exists. 53297 * @param {Function} handleBlur Handler on blur from mouse or touch. 53298 * @returns {Object} Ref containing whether mouseDown or touchMove event is happening 53299 */ 53300 53301 53302function useMouseAndTouchTracker(isOpen, downshiftElementRefs, environment, handleBlur) { 53303 var mouseAndTouchTrackersRef = (0,external_React_.useRef)({ 53304 isMouseDown: false, 53305 isTouchMove: false 53306 }); 53307 (0,external_React_.useEffect)(function () { 53308 // The same strategy for checking if a click occurred inside or outside downsift 53309 // as in downshift.js. 53310 var onMouseDown = function onMouseDown() { 53311 mouseAndTouchTrackersRef.current.isMouseDown = true; 53312 }; 53313 53314 var onMouseUp = function onMouseUp(event) { 53315 mouseAndTouchTrackersRef.current.isMouseDown = false;
53316 53317 if (isOpen && !targetWithinDownshift(event.target, downshiftElementRefs.map(function (ref) { 53318 return ref.current; 53319 }), environment.document)) { 53320 handleBlur(); 53321 } 53322 }; 53323 53324 var onTouchStart = function onTouchStart() { 53325 mouseAndTouchTrackersRef.current.isTouchMove = false; 53326 }; 53327 53328 var onTouchMove = function onTouchMove() { 53329 mouseAndTouchTrackersRef.current.isTouchMove = true; 53330 }; 53331 53332 var onTouchEnd = function onTouchEnd(event) { 53333 if (isOpen && !mouseAndTouchTrackersRef.current.isTouchMove && !targetWithinDownshift(event.target, downshiftElementRefs.map(function (ref) { 53334 return ref.current; 53335 }), environment.document, false)) { 53336 handleBlur(); 53337 } 53338 }; 53339 53340 environment.addEventListener('mousedown', onMouseDown); 53341 environment.addEventListener('mouseup', onMouseUp); 53342 environment.addEventListener('touchstart', onTouchStart); 53343 environment.addEventListener('touchmove', onTouchMove); 53344 environment.addEventListener('touchend', onTouchEnd); 53345 return function cleanup() { 53346 environment.removeEventListener('mousedown', onMouseDown); 53347 environment.removeEventListener('mouseup', onMouseUp); 53348 environment.removeEventListener('touchstart', onTouchStart); 53349 environment.removeEventListener('touchmove', onTouchMove); 53350 environment.removeEventListener('touchend', onTouchEnd); 53351 }; // eslint-disable-next-line react-hooks/exhaustive-deps 53352 }, [isOpen, environment]); 53353 return mouseAndTouchTrackersRef; 53354} 53355/* istanbul ignore next */ 53356// eslint-disable-next-line import/no-mutable-exports 53357 53358 53359var useGetterPropsCalledChecker = function useGetterPropsCalledChecker() { 53360 return downshift_esm_noop; 53361}; 53362/** 53363 * Custom hook that checks if getter props are called correctly. 53364 * 53365 * @param {...any} propKeys Getter prop names to be handled. 53366 * @returns {Function} Setter function called inside getter props to set call information. 53367 */ 53368 53369/* istanbul ignore next */ 53370 53371 53372if (false) {} 53373 53374function useA11yMessageSetter(getA11yMessage, dependencyArray, _ref2) { 53375 var isInitialMount = _ref2.isInitialMount, 53376 highlightedIndex = _ref2.highlightedIndex, 53377 items = _ref2.items, 53378 environment = _ref2.environment, 53379 rest = objectWithoutPropertiesLoose_objectWithoutPropertiesLoose(_ref2, ["isInitialMount", "highlightedIndex", "items", "environment"]); 53380 53381 // Sets a11y status message on changes in state. 53382 (0,external_React_.useEffect)(function () { 53383 if (isInitialMount) { 53384 return; 53385 } 53386 53387 updateA11yStatus(function () { 53388 return getA11yMessage(extends_extends({ 53389 highlightedIndex: highlightedIndex, 53390 highlightedItem: items[highlightedIndex], 53391 resultCount: items.length 53392 }, rest)); 53393 }, environment.document); // eslint-disable-next-line react-hooks/exhaustive-deps 53394 }, dependencyArray); 53395} 53396 53397function useScrollIntoView(_ref3) { 53398 var highlightedIndex = _ref3.highlightedIndex, 53399 isOpen = _ref3.isOpen, 53400 itemRefs = _ref3.itemRefs, 53401 getItemNodeFromIndex = _ref3.getItemNodeFromIndex, 53402 menuElement = _ref3.menuElement, 53403 scrollIntoViewProp = _ref3.scrollIntoView; 53404 // used not to scroll on highlight by mouse. 53405 var shouldScrollRef = (0,external_React_.useRef)(true); // Scroll on highlighted item if change comes from keyboard. 53406 53407 downshift_esm_useIsomorphicLayoutEffect(function () { 53408 if (highlightedIndex < 0 || !isOpen || !Object.keys(itemRefs.current).length) { 53409 return; 53410 } 53411 53412 if (shouldScrollRef.current === false) { 53413 shouldScrollRef.current = true; 53414 } else { 53415 scrollIntoViewProp(getItemNodeFromIndex(highlightedIndex), menuElement); 53416 } // eslint-disable-next-line react-hooks/exhaustive-deps 53417 53418 }, [highlightedIndex]); 53419 return shouldScrollRef; 53420} // eslint-disable-next-line import/no-mutable-exports 53421 53422 53423var useControlPropsValidator = downshift_esm_noop; 53424/* istanbul ignore next */ 53425 53426if (false) {} 53427 53428/* eslint-disable complexity */ 53429 53430function downshiftCommonReducer(state, action, stateChangeTypes) { 53431 var type = action.type, 53432 props = action.props; 53433 var changes; 53434 53435 switch (type) { 53436 case stateChangeTypes.ItemMouseMove: 53437 changes = { 53438 highlightedIndex: action.index 53439 }; 53440 break; 53441 53442 case stateChangeTypes.MenuMouseLeave: 53443 changes = { 53444 highlightedIndex: -1 53445 }; 53446 break; 53447 53448 case stateChangeTypes.ToggleButtonClick: 53449 case stateChangeTypes.FunctionToggleMenu: 53450 changes = { 53451 isOpen: !state.isOpen, 53452 highlightedIndex: state.isOpen ? -1 : getHighlightedIndexOnOpen(props, state, 0) 53453 }; 53454 break; 53455 53456 case stateChangeTypes.FunctionOpenMenu: 53457 changes = { 53458 isOpen: true, 53459 highlightedIndex: getHighlightedIndexOnOpen(props, state, 0) 53460 }; 53461 break; 53462 53463 case stateChangeTypes.FunctionCloseMenu: 53464 changes = { 53465 isOpen: false 53466 }; 53467 break; 53468 53469 case stateChangeTypes.FunctionSetHighlightedIndex: 53470 changes = { 53471 highlightedIndex: action.highlightedIndex 53472 }; 53473 break; 53474 53475 case stateChangeTypes.FunctionSetInputValue: 53476 changes = { 53477 inputValue: action.inputValue 53478 }; 53479 break; 53480 53481 case stateChangeTypes.FunctionReset: 53482 changes = { 53483 highlightedIndex: getDefaultValue(props, 'highlightedIndex'), 53484 isOpen: getDefaultValue(props, 'isOpen'), 53485 selectedItem: getDefaultValue(props, 'selectedItem'), 53486 inputValue: getDefaultValue(props, 'inputValue') 53487 }; 53488 break; 53489 53490 default: 53491 throw new Error('Reducer called without proper action type.'); 53492 } 53493 53494 return extends_extends({}, state, changes); 53495} 53496/* eslint-enable complexity */ 53497 53498function getItemIndexByCharacterKey(keysSoFar, highlightedIndex, items, itemToString, getItemNodeFromIndex) { 53499 var lowerCasedKeysSoFar = keysSoFar.toLowerCase(); 53500 53501 for (var index = 0; index < items.length; index++) { 53502 var offsetIndex = (index + highlightedIndex + 1) % items.length; 53503 53504 if (itemToString(items[offsetIndex]).toLowerCase().startsWith(lowerCasedKeysSoFar)) { 53505 var element = getItemNodeFromIndex(offsetIndex); 53506 53507 if (!(element && element.hasAttribute('disabled'))) { 53508 return offsetIndex; 53509 } 53510 } 53511 } 53512 53513 return highlightedIndex; 53514} 53515 53516var propTypes = { 53517 items: (prop_types_default()).array.isRequired, 53518 itemToString: (prop_types_default()).func,
53519 getA11yStatusMessage: (prop_types_default()).func, 53520 getA11ySelectionMessage: (prop_types_default()).func, 53521 circularNavigation: (prop_types_default()).bool, 53522 highlightedIndex: (prop_types_default()).number, 53523 defaultHighlightedIndex: (prop_types_default()).number, 53524 initialHighlightedIndex: (prop_types_default()).number, 53525 isOpen: (prop_types_default()).bool, 53526 defaultIsOpen: (prop_types_default()).bool, 53527 initialIsOpen: (prop_types_default()).bool, 53528 selectedItem: (prop_types_default()).any, 53529 initialSelectedItem: (prop_types_default()).any, 53530 defaultSelectedItem: (prop_types_default()).any, 53531 id: (prop_types_default()).string, 53532 labelId: (prop_types_default()).string, 53533 menuId: (prop_types_default()).string, 53534 getItemId: (prop_types_default()).func, 53535 toggleButtonId: (prop_types_default()).string, 53536 stateReducer: (prop_types_default()).func, 53537 onSelectedItemChange: (prop_types_default()).func, 53538 onHighlightedIndexChange: (prop_types_default()).func, 53539 onStateChange: (prop_types_default()).func, 53540 onIsOpenChange: (prop_types_default()).func, 53541 environment: prop_types_default().shape({ 53542 addEventListener: (prop_types_default()).func, 53543 removeEventListener: (prop_types_default()).func, 53544 document: prop_types_default().shape({ 53545 getElementById: (prop_types_default()).func, 53546 activeElement: (prop_types_default()).any, 53547 body: (prop_types_default()).any 53548 }) 53549 }) 53550}; 53551/** 53552 * Default implementation for status message. Only added when menu is open. 53553 * Will specift if there are results in the list, and if so, how many, 53554 * and what keys are relevant. 53555 * 53556 * @param {Object} param the downshift state and other relevant properties 53557 * @return {String} the a11y status message 53558 */ 53559 53560function getA11yStatusMessage$1(_ref) { 53561 var isOpen = _ref.isOpen, 53562 resultCount = _ref.resultCount, 53563 previousResultCount = _ref.previousResultCount; 53564 53565 if (!isOpen) { 53566 return ''; 53567 } 53568 53569 if (!resultCount) { 53570 return 'No results are available.'; 53571 } 53572 53573 if (resultCount !== previousResultCount) { 53574 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."; 53575 } 53576 53577 return ''; 53578} 53579 53580var defaultProps$1 = extends_extends({}, defaultProps, { 53581 getA11yStatusMessage: getA11yStatusMessage$1 53582}); // eslint-disable-next-line import/no-mutable-exports 53583 53584 53585var validatePropTypes = downshift_esm_noop; 53586/* istanbul ignore next */ 53587 53588if (false) {} 53589 53590var MenuKeyDownArrowDown = false ? 0 : 0; 53591var MenuKeyDownArrowUp = false ? 0 : 1; 53592var MenuKeyDownEscape = false ? 0 : 2; 53593var MenuKeyDownHome = false ? 0 : 3; 53594var MenuKeyDownEnd = false ? 0 : 4; 53595var MenuKeyDownEnter = false ? 0 : 5; 53596var MenuKeyDownSpaceButton = false ? 0 : 6; 53597var MenuKeyDownCharacter = false ? 0 : 7; 53598var MenuBlur = false ? 0 : 8; 53599var MenuMouseLeave = false ? 0 : 9; 53600var ItemMouseMove = false ? 0 : 10; 53601var ItemClick = false ? 0 : 11; 53602var ToggleButtonClick = false ? 0 : 12; 53603var ToggleButtonKeyDownArrowDown = false ? 0 : 13; 53604var ToggleButtonKeyDownArrowUp = false ? 0 : 14; 53605var ToggleButtonKeyDownCharacter = false ? 0 : 15; 53606var FunctionToggleMenu = false ? 0 : 16; 53607var FunctionOpenMenu = false ? 0 : 17; 53608var FunctionCloseMenu = false ? 0 : 18; 53609var FunctionSetHighlightedIndex = false ? 0 : 19; 53610var FunctionSelectItem = false ? 0 : 20; 53611var FunctionSetInputValue = false ? 0 : 21; 53612var FunctionReset = false ? 0 : 22; 53613 53614var stateChangeTypes$1 = /*#__PURE__*/Object.freeze({ 53615 __proto__: null, 53616 MenuKeyDownArrowDown: MenuKeyDownArrowDown, 53617 MenuKeyDownArrowUp: MenuKeyDownArrowUp, 53618 MenuKeyDownEscape: MenuKeyDownEscape, 53619 MenuKeyDownHome: MenuKeyDownHome, 53620 MenuKeyDownEnd: MenuKeyDownEnd, 53621 MenuKeyDownEnter: MenuKeyDownEnter, 53622 MenuKeyDownSpaceButton: MenuKeyDownSpaceButton, 53623 MenuKeyDownCharacter: MenuKeyDownCharacter, 53624 MenuBlur: MenuBlur, 53625 MenuMouseLeave: MenuMouseLeave, 53626 ItemMouseMove: ItemMouseMove, 53627 ItemClick: ItemClick, 53628 ToggleButtonClick: ToggleButtonClick, 53629 ToggleButtonKeyDownArrowDown: ToggleButtonKeyDownArrowDown, 53630 ToggleButtonKeyDownArrowUp: ToggleButtonKeyDownArrowUp, 53631 ToggleButtonKeyDownCharacter: ToggleButtonKeyDownCharacter, 53632 FunctionToggleMenu: FunctionToggleMenu, 53633 FunctionOpenMenu: FunctionOpenMenu, 53634 FunctionCloseMenu: FunctionCloseMenu, 53635 FunctionSetHighlightedIndex: FunctionSetHighlightedIndex, 53636 FunctionSelectItem: FunctionSelectItem, 53637 FunctionSetInputValue: FunctionSetInputValue, 53638 FunctionReset: FunctionReset 53639}); 53640 53641/* eslint-disable complexity */ 53642 53643function downshiftSelectReducer(state, action) { 53644 var type = action.type, 53645 props = action.props,
53646 shiftKey = action.shiftKey; 53647 var changes; 53648 53649 switch (type) { 53650 case ItemClick: 53651 changes = { 53652 isOpen: getDefaultValue(props, 'isOpen'), 53653 highlightedIndex: getDefaultValue(props, 'highlightedIndex'), 53654 selectedItem: props.items[action.index] 53655 }; 53656 break; 53657 53658 case ToggleButtonKeyDownCharacter: 53659 { 53660 var lowercasedKey = action.key; 53661 var inputValue = "" + state.inputValue + lowercasedKey; 53662 var itemIndex = getItemIndexByCharacterKey(inputValue, state.selectedItem ? props.items.indexOf(state.selectedItem) : -1, props.items, props.itemToString, action.getItemNodeFromIndex); 53663 changes = extends_extends({ 53664 inputValue: inputValue 53665 }, itemIndex >= 0 && { 53666 selectedItem: props.items[itemIndex] 53667 }); 53668 } 53669 break; 53670 53671 case ToggleButtonKeyDownArrowDown: 53672 changes = { 53673 highlightedIndex: getHighlightedIndexOnOpen(props, state, 1, action.getItemNodeFromIndex), 53674 isOpen: true 53675 }; 53676 break; 53677 53678 case ToggleButtonKeyDownArrowUp: 53679 changes = { 53680 highlightedIndex: getHighlightedIndexOnOpen(props, state, -1, action.getItemNodeFromIndex), 53681 isOpen: true 53682 }; 53683 break; 53684 53685 case MenuKeyDownEnter: 53686 case MenuKeyDownSpaceButton: 53687 changes = extends_extends({ 53688 isOpen: getDefaultValue(props, 'isOpen'), 53689 highlightedIndex: getDefaultValue(props, 'highlightedIndex') 53690 }, state.highlightedIndex >= 0 && { 53691 selectedItem: props.items[state.highlightedIndex] 53692 }); 53693 break; 53694 53695 case MenuKeyDownHome: 53696 changes = { 53697 highlightedIndex: getNextNonDisabledIndex(1, 0, props.items.length, action.getItemNodeFromIndex, false) 53698 }; 53699 break; 53700 53701 case MenuKeyDownEnd: 53702 changes = { 53703 highlightedIndex: getNextNonDisabledIndex(-1, props.items.length - 1, props.items.length, action.getItemNodeFromIndex, false) 53704 }; 53705 break; 53706 53707 case MenuKeyDownEscape: 53708 changes = { 53709 isOpen: false, 53710 highlightedIndex: -1 53711 }; 53712 break; 53713 53714 case MenuBlur: 53715 changes = { 53716 isOpen: false, 53717 highlightedIndex: -1 53718 }; 53719 break; 53720 53721 case MenuKeyDownCharacter: 53722 { 53723 var _lowercasedKey = action.key; 53724 53725 var _inputValue = "" + state.inputValue + _lowercasedKey; 53726 53727 var highlightedIndex = getItemIndexByCharacterKey(_inputValue, state.highlightedIndex, props.items, props.itemToString, action.getItemNodeFromIndex); 53728 changes = extends_extends({ 53729 inputValue: _inputValue 53730 }, highlightedIndex >= 0 && { 53731 highlightedIndex: highlightedIndex 53732 }); 53733 } 53734 break; 53735 53736 case MenuKeyDownArrowDown: 53737 changes = { 53738 highlightedIndex: getNextWrappingIndex(shiftKey ? 5 : 1, state.highlightedIndex, props.items.length, action.getItemNodeFromIndex, props.circularNavigation) 53739 }; 53740 break; 53741 53742 case MenuKeyDownArrowUp: 53743 changes = { 53744 highlightedIndex: getNextWrappingIndex(shiftKey ? -5 : -1, state.highlightedIndex, props.items.length, action.getItemNodeFromIndex, props.circularNavigation) 53745 }; 53746 break; 53747 53748 case FunctionSelectItem: 53749 changes = { 53750 selectedItem: action.selectedItem 53751 }; 53752 break; 53753 53754 default: 53755 return downshiftCommonReducer(state, action, stateChangeTypes$1); 53756 } 53757 53758 return extends_extends({}, state, changes); 53759} 53760/* eslint-enable complexity */ 53761 53762useSelect.stateChangeTypes = stateChangeTypes$1; 53763 53764function useSelect(userProps) { 53765 if (userProps === void 0) { 53766 userProps = {}; 53767 } 53768 53769 validatePropTypes(userProps, useSelect); // Props defaults and destructuring. 53770 53771 var props = extends_extends({}, defaultProps$1, userProps); 53772 53773 var items = props.items, 53774 scrollIntoView = props.scrollIntoView, 53775 environment = props.environment, 53776 initialIsOpen = props.initialIsOpen, 53777 defaultIsOpen = props.defaultIsOpen, 53778 itemToString = props.itemToString, 53779 getA11ySelectionMessage = props.getA11ySelectionMessage, 53780 getA11yStatusMessage = props.getA11yStatusMessage; // Initial state depending on controlled props. 53781 53782 var initialState = getInitialState(props); 53783 53784 var _useControlledReducer = useControlledReducer(downshiftSelectReducer, initialState, props), 53785 state = _useControlledReducer[0], 53786 dispatch = _useControlledReducer[1]; 53787 53788 var isOpen = state.isOpen, 53789 highlightedIndex = state.highlightedIndex, 53790 selectedItem = state.selectedItem, 53791 inputValue = state.inputValue; // Element efs. 53792 53793 var toggleButtonRef = (0,external_React_.useRef)(null); 53794 var menuRef = (0,external_React_.useRef)(null); 53795 var itemRefs = (0,external_React_.useRef)({}); // used not to trigger menu blur action in some scenarios. 53796 53797 var shouldBlurRef = (0,external_React_.useRef)(true); // used to keep the inputValue clearTimeout object between renders. 53798 53799 var clearTimeoutRef = (0,external_React_.useRef)(null); // prevent id re-generation between renders. 53800 53801 var elementIds = useElementIds(props); // used to keep track of how many items we had on previous cycle. 53802 53803 var previousResultCountRef = (0,external_React_.useRef)(); 53804 var isInitialMountRef = (0,external_React_.useRef)(true); // utility callback to get item element. 53805 53806 var latest = downshift_esm_useLatestRef({ 53807 state: state, 53808 props: props 53809 }); // Some utils. 53810 53811 var getItemNodeFromIndex = (0,external_React_.useCallback)(function (index) { 53812 return itemRefs.current[elementIds.getItemId(index)]; 53813 }, [elementIds]); // Effects. 53814 // Sets a11y status message on changes in state. 53815
53816 useA11yMessageSetter(getA11yStatusMessage, [isOpen, highlightedIndex, inputValue, items], extends_extends({ 53817 isInitialMount: isInitialMountRef.current, 53818 previousResultCount: previousResultCountRef.current, 53819 items: items, 53820 environment: environment, 53821 itemToString: itemToString 53822 }, state)); // Sets a11y status message on changes in selectedItem. 53823 53824 useA11yMessageSetter(getA11ySelectionMessage, [selectedItem], extends_extends({ 53825 isInitialMount: isInitialMountRef.current, 53826 previousResultCount: previousResultCountRef.current, 53827 items: items, 53828 environment: environment, 53829 itemToString: itemToString 53830 }, state)); // Scroll on highlighted item if change comes from keyboard. 53831 53832 var shouldScrollRef = useScrollIntoView({ 53833 menuElement: menuRef.current, 53834 highlightedIndex: highlightedIndex, 53835 isOpen: isOpen, 53836 itemRefs: itemRefs, 53837 scrollIntoView: scrollIntoView, 53838 getItemNodeFromIndex: getItemNodeFromIndex 53839 }); // Sets cleanup for the keysSoFar after 500ms. 53840 53841 (0,external_React_.useEffect)(function () { 53842 // init the clean function here as we need access to dispatch. 53843 if (isInitialMountRef.current) { 53844 clearTimeoutRef.current = downshift_esm_debounce(function (outerDispatch) { 53845 outerDispatch({ 53846 type: FunctionSetInputValue, 53847 inputValue: '' 53848 }); 53849 }, 500); 53850 } 53851 53852 if (!inputValue) { 53853 return; 53854 } 53855 53856 clearTimeoutRef.current(dispatch); 53857 }, [dispatch, inputValue]); 53858 useControlPropsValidator({ 53859 isInitialMount: isInitialMountRef.current, 53860 props: props, 53861 state: state 53862 }); 53863 /* Controls the focus on the menu or the toggle button. */ 53864 53865 (0,external_React_.useEffect)(function () { 53866 // Don't focus menu on first render. 53867 if (isInitialMountRef.current) { 53868 // Unless it was initialised as open. 53869 if ((initialIsOpen || defaultIsOpen || isOpen) && menuRef.current) { 53870 menuRef.current.focus(); 53871 } 53872 53873 return; 53874 } // Focus menu on open. 53875 53876 53877 if (isOpen) { 53878 // istanbul ignore else 53879 if (menuRef.current) { 53880 menuRef.current.focus(); 53881 } 53882 53883 return; 53884 } // Focus toggleButton on close, but not if it was closed with (Shift+)Tab. 53885 53886 53887 if (environment.document.activeElement === menuRef.current) { 53888 // istanbul ignore else 53889 if (toggleButtonRef.current) { 53890 shouldBlurRef.current = false; 53891 toggleButtonRef.current.focus(); 53892 } 53893 } // eslint-disable-next-line react-hooks/exhaustive-deps 53894 53895 }, [isOpen]); 53896 (0,external_React_.useEffect)(function () { 53897 if (isInitialMountRef.current) { 53898 return; 53899 } 53900 53901 previousResultCountRef.current = items.length; 53902 }); // Add mouse/touch events to document. 53903 53904 var mouseAndTouchTrackersRef = useMouseAndTouchTracker(isOpen, [menuRef, toggleButtonRef], environment, function () { 53905 dispatch({ 53906 type: MenuBlur 53907 }); 53908 }); 53909 var setGetterPropCallInfo = useGetterPropsCalledChecker('getMenuProps', 'getToggleButtonProps'); // Make initial ref false. 53910 53911 (0,external_React_.useEffect)(function () { 53912 isInitialMountRef.current = false; 53913 }, []); // Reset itemRefs on close. 53914 53915 (0,external_React_.useEffect)(function () { 53916 if (!isOpen) { 53917 itemRefs.current = {}; 53918 } 53919 }, [isOpen]); // Event handler functions. 53920 53921 var toggleButtonKeyDownHandlers = (0,external_React_.useMemo)(function () { 53922 return { 53923 ArrowDown: function ArrowDown(event) { 53924 event.preventDefault(); 53925 dispatch({ 53926 type: ToggleButtonKeyDownArrowDown, 53927 getItemNodeFromIndex: getItemNodeFromIndex, 53928 shiftKey: event.shiftKey 53929 }); 53930 }, 53931 ArrowUp: function ArrowUp(event) { 53932 event.preventDefault(); 53933 dispatch({ 53934 type: ToggleButtonKeyDownArrowUp, 53935 getItemNodeFromIndex: getItemNodeFromIndex, 53936 shiftKey: event.shiftKey 53937 }); 53938 } 53939 }; 53940 }, [dispatch, getItemNodeFromIndex]); 53941 var menuKeyDownHandlers = (0,external_React_.useMemo)(function () { 53942 return { 53943 ArrowDown: function ArrowDown(event) { 53944 event.preventDefault(); 53945 dispatch({ 53946 type: MenuKeyDownArrowDown, 53947 getItemNodeFromIndex: getItemNodeFromIndex,
53948 shiftKey: event.shiftKey 53949 }); 53950 }, 53951 ArrowUp: function ArrowUp(event) { 53952 event.preventDefault(); 53953 dispatch({ 53954 type: MenuKeyDownArrowUp, 53955 getItemNodeFromIndex: getItemNodeFromIndex, 53956 shiftKey: event.shiftKey 53957 }); 53958 }, 53959 Home: function Home(event) { 53960 event.preventDefault(); 53961 dispatch({ 53962 type: MenuKeyDownHome, 53963 getItemNodeFromIndex: getItemNodeFromIndex 53964 }); 53965 }, 53966 End: function End(event) { 53967 event.preventDefault(); 53968 dispatch({ 53969 type: MenuKeyDownEnd, 53970 getItemNodeFromIndex: getItemNodeFromIndex 53971 }); 53972 }, 53973 Escape: function Escape() { 53974 dispatch({ 53975 type: MenuKeyDownEscape 53976 }); 53977 }, 53978 Enter: function Enter(event) { 53979 event.preventDefault(); 53980 dispatch({ 53981 type: MenuKeyDownEnter 53982 }); 53983 }, 53984 ' ': function _(event) { 53985 event.preventDefault(); 53986 dispatch({ 53987 type: MenuKeyDownSpaceButton 53988 }); 53989 } 53990 }; 53991 }, [dispatch, getItemNodeFromIndex]); // Action functions. 53992 53993 var toggleMenu = (0,external_React_.useCallback)(function () { 53994 dispatch({ 53995 type: FunctionToggleMenu 53996 }); 53997 }, [dispatch]); 53998 var closeMenu = (0,external_React_.useCallback)(function () { 53999 dispatch({ 54000 type: FunctionCloseMenu 54001 }); 54002 }, [dispatch]); 54003 var openMenu = (0,external_React_.useCallback)(function () { 54004 dispatch({ 54005 type: FunctionOpenMenu 54006 }); 54007 }, [dispatch]); 54008 var setHighlightedIndex = (0,external_React_.useCallback)(function (newHighlightedIndex) { 54009 dispatch({ 54010 type: FunctionSetHighlightedIndex, 54011 highlightedIndex: newHighlightedIndex 54012 }); 54013 }, [dispatch]); 54014 var selectItem = (0,external_React_.useCallback)(function (newSelectedItem) { 54015 dispatch({ 54016 type: FunctionSelectItem, 54017 selectedItem: newSelectedItem 54018 }); 54019 }, [dispatch]); 54020 var reset = (0,external_React_.useCallback)(function () { 54021 dispatch({ 54022 type: FunctionReset 54023 }); 54024 }, [dispatch]); 54025 var setInputValue = (0,external_React_.useCallback)(function (newInputValue) { 54026 dispatch({ 54027 type: FunctionSetInputValue, 54028 inputValue: newInputValue 54029 }); 54030 }, [dispatch]); // Getter functions. 54031 54032 var getLabelProps = (0,external_React_.useCallback)(function (labelProps) { 54033 return extends_extends({ 54034 id: elementIds.labelId, 54035 htmlFor: elementIds.toggleButtonId 54036 }, labelProps); 54037 }, [elementIds]); 54038 var getMenuProps = (0,external_React_.useCallback)(function (_temp, _temp2) { 54039 var _extends2; 54040 54041 var _ref = _temp === void 0 ? {} : _temp, 54042 onMouseLeave = _ref.onMouseLeave, 54043 _ref$refKey = _ref.refKey, 54044 refKey = _ref$refKey === void 0 ? 'ref' : _ref$refKey, 54045 onKeyDown = _ref.onKeyDown, 54046 onBlur = _ref.onBlur, 54047 ref = _ref.ref, 54048 rest = objectWithoutPropertiesLoose_objectWithoutPropertiesLoose(_ref, ["onMouseLeave", "refKey", "onKeyDown", "onBlur", "ref"]); 54049 54050 var _ref2 = _temp2 === void 0 ? {} : _temp2, 54051 _ref2$suppressRefErro = _ref2.suppressRefError, 54052 suppressRefError = _ref2$suppressRefErro === void 0 ? false : _ref2$suppressRefErro; 54053 54054 var latestState = latest.current.state; 54055 54056 var menuHandleKeyDown = function menuHandleKeyDown(event) { 54057 var key = normalizeArrowKey(event); 54058 54059 if (key && menuKeyDownHandlers[key]) { 54060 menuKeyDownHandlers[key](event); 54061 } else if (isAcceptedCharacterKey(key)) { 54062 dispatch({ 54063 type: MenuKeyDownCharacter, 54064 key: key, 54065 getItemNodeFromIndex: getItemNodeFromIndex 54066 }); 54067 } 54068 }; 54069 54070 var menuHandleBlur = function menuHandleBlur() { 54071 // if the blur was a result of selection, we don't trigger this action. 54072 if (shouldBlurRef.current === false) { 54073 shouldBlurRef.current = true; 54074 return; 54075 } 54076 54077 var shouldBlur = !mouseAndTouchTrackersRef.current.isMouseDown; 54078 /* istanbul ignore else */ 54079 54080 if (shouldBlur) { 54081 dispatch({ 54082 type: MenuBlur 54083 }); 54084 } 54085 }; 54086 54087 var menuHandleMouseLeave = function menuHandleMouseLeave() { 54088 dispatch({ 54089 type: MenuMouseLeave 54090 }); 54091 }; 54092 54093 setGetterPropCallInfo('getMenuProps', suppressRefError, refKey, menuRef); 54094 return extends_extends((_extends2 = {}, _extends2[refKey] = handleRefs(ref, function (menuNode) { 54095 menuRef.current = menuNode; 54096 }), _extends2.id = elementIds.menuId, _extends2.role = 'listbox', _extends2['aria-labelledby'] = elementIds.labelId, _extends2.tabIndex = -1, _extends2), latestState.isOpen && latestState.highlightedIndex > -1 && { 54097 'aria-activedescendant': elementIds.getItemId(latestState.highlightedIndex) 54098 }, {
54099 onMouseLeave: callAllEventHandlers(onMouseLeave, menuHandleMouseLeave), 54100 onKeyDown: callAllEventHandlers(onKeyDown, menuHandleKeyDown), 54101 onBlur: callAllEventHandlers(onBlur, menuHandleBlur) 54102 }, rest); 54103 }, [dispatch, latest, menuKeyDownHandlers, mouseAndTouchTrackersRef, setGetterPropCallInfo, elementIds, getItemNodeFromIndex]); 54104 var getToggleButtonProps = (0,external_React_.useCallback)(function (_temp3, _temp4) { 54105 var _extends3; 54106 54107 var _ref3 = _temp3 === void 0 ? {} : _temp3, 54108 onClick = _ref3.onClick, 54109 onKeyDown = _ref3.onKeyDown, 54110 _ref3$refKey = _ref3.refKey, 54111 refKey = _ref3$refKey === void 0 ? 'ref' : _ref3$refKey, 54112 ref = _ref3.ref, 54113 rest = objectWithoutPropertiesLoose_objectWithoutPropertiesLoose(_ref3, ["onClick", "onKeyDown", "refKey", "ref"]); 54114 54115 var _ref4 = _temp4 === void 0 ? {} : _temp4, 54116 _ref4$suppressRefErro = _ref4.suppressRefError, 54117 suppressRefError = _ref4$suppressRefErro === void 0 ? false : _ref4$suppressRefErro; 54118 54119 var toggleButtonHandleClick = function toggleButtonHandleClick() { 54120 dispatch({ 54121 type: ToggleButtonClick 54122 }); 54123 }; 54124 54125 var toggleButtonHandleKeyDown = function toggleButtonHandleKeyDown(event) { 54126 var key = normalizeArrowKey(event); 54127 54128 if (key && toggleButtonKeyDownHandlers[key]) { 54129 toggleButtonKeyDownHandlers[key](event); 54130 } else if (isAcceptedCharacterKey(key)) { 54131 dispatch({ 54132 type: ToggleButtonKeyDownCharacter, 54133 key: key, 54134 getItemNodeFromIndex: getItemNodeFromIndex 54135 }); 54136 } 54137 }; 54138 54139 var toggleProps = extends_extends((_extends3 = {}, _extends3[refKey] = handleRefs(ref, function (toggleButtonNode) { 54140 toggleButtonRef.current = toggleButtonNode; 54141 }), _extends3.id = elementIds.toggleButtonId, _extends3['aria-haspopup'] = 'listbox', _extends3['aria-expanded'] = latest.current.state.isOpen, _extends3['aria-labelledby'] = elementIds.labelId + " " + elementIds.toggleButtonId, _extends3), rest); 54142 54143 if (!rest.disabled) { 54144 toggleProps.onClick = callAllEventHandlers(onClick, toggleButtonHandleClick); 54145 toggleProps.onKeyDown = callAllEventHandlers(onKeyDown, toggleButtonHandleKeyDown); 54146 } 54147 54148 setGetterPropCallInfo('getToggleButtonProps', suppressRefError, refKey, toggleButtonRef); 54149 return toggleProps; 54150 }, [dispatch, latest, toggleButtonKeyDownHandlers, setGetterPropCallInfo, elementIds, getItemNodeFromIndex]); 54151 var getItemProps = (0,external_React_.useCallback)(function (_temp5) { 54152 var _extends4; 54153 54154 var _ref5 = _temp5 === void 0 ? {} : _temp5, 54155 item = _ref5.item, 54156 index = _ref5.index, 54157 onMouseMove = _ref5.onMouseMove, 54158 onClick = _ref5.onClick, 54159 _ref5$refKey = _ref5.refKey, 54160 refKey = _ref5$refKey === void 0 ? 'ref' : _ref5$refKey, 54161 ref = _ref5.ref, 54162 rest = objectWithoutPropertiesLoose_objectWithoutPropertiesLoose(_ref5, ["item", "index", "onMouseMove", "onClick", "refKey", "ref"]); 54163 54164 var _latest$current = latest.current, 54165 latestState = _latest$current.state, 54166 latestProps = _latest$current.props; 54167 54168 var itemHandleMouseMove = function itemHandleMouseMove() { 54169 if (index === latestState.highlightedIndex) { 54170 return; 54171 } 54172 54173 shouldScrollRef.current = false; 54174 dispatch({ 54175 type: ItemMouseMove, 54176 index: index 54177 }); 54178 }; 54179 54180 var itemHandleClick = function itemHandleClick() { 54181 dispatch({ 54182 type: ItemClick, 54183 index: index 54184 }); 54185 }; 54186 54187 var itemIndex = getItemIndex(index, item, latestProps.items); 54188 54189 if (itemIndex < 0) { 54190 throw new Error('Pass either item or item index in getItemProps!'); 54191 } 54192 54193 var itemProps = extends_extends((_extends4 = { 54194 role: 'option', 54195 'aria-selected': "" + (itemIndex === latestState.highlightedIndex), 54196 id: elementIds.getItemId(itemIndex) 54197 }, _extends4[refKey] = handleRefs(ref, function (itemNode) { 54198 if (itemNode) { 54199 itemRefs.current[elementIds.getItemId(itemIndex)] = itemNode; 54200 } 54201 }), _extends4), rest); 54202 54203 if (!rest.disabled) { 54204 itemProps.onMouseMove = callAllEventHandlers(onMouseMove, itemHandleMouseMove); 54205 itemProps.onClick = callAllEventHandlers(onClick, itemHandleClick); 54206 } 54207 54208 return itemProps; 54209 }
54209, [dispatch, latest, shouldScrollRef, elementIds]); 54210 return { 54211 // prop getters. 54212 getToggleButtonProps: getToggleButtonProps, 54213 getLabelProps: getLabelProps, 54214 getMenuProps: getMenuProps, 54215 getItemProps: getItemProps, 54216 // actions. 54217 toggleMenu: toggleMenu, 54218 openMenu: openMenu, 54219 closeMenu: closeMenu, 54220 setHighlightedIndex: setHighlightedIndex, 54221 selectItem: selectItem, 54222 reset: reset, 54223 setInputValue: setInputValue, 54224 // state. 54225 highlightedIndex: highlightedIndex, 54226 isOpen: isOpen, 54227 selectedItem: selectedItem, 54228 inputValue: inputValue 54229 }; 54230} 54231 54232var InputKeyDownArrowDown = false ? 0 : 0; 54233var InputKeyDownArrowUp = false ? 0 : 1; 54234var InputKeyDownEscape = false ? 0 : 2; 54235var InputKeyDownHome = false ? 0 : 3; 54236var InputKeyDownEnd = false ? 0 : 4; 54237var InputKeyDownEnter = false ? 0 : 5; 54238var InputChange = false ? 0 : 6; 54239var InputBlur = false ? 0 : 7; 54240var MenuMouseLeave$1 = false ? 0 : 8; 54241var ItemMouseMove$1 = false ? 0 : 9; 54242var ItemClick$1 = false ? 0 : 10; 54243var ToggleButtonClick$1 = false ? 0 : 11; 54244var FunctionToggleMenu$1 = false ? 0 : 12; 54245var FunctionOpenMenu$1 = false ? 0 : 13; 54246var FunctionCloseMenu$1 = false ? 0 : 14; 54247var FunctionSetHighlightedIndex$1 = false ? 0 : 15; 54248var FunctionSelectItem$1 = false ? 0 : 16; 54249var FunctionSetInputValue$1 = false ? 0 : 17; 54250var FunctionReset$1 = false ? 0 : 18; 54251var ControlledPropUpdatedSelectedItem = false ? 0 : 19; 54252 54253var stateChangeTypes$2 = /*#__PURE__*/Object.freeze({ 54254 __proto__: null, 54255 InputKeyDownArrowDown: InputKeyDownArrowDown, 54256 InputKeyDownArrowUp: InputKeyDownArrowUp, 54257 InputKeyDownEscape: InputKeyDownEscape, 54258 InputKeyDownHome: InputKeyDownHome, 54259 InputKeyDownEnd: InputKeyDownEnd, 54260 InputKeyDownEnter: InputKeyDownEnter, 54261 InputChange: InputChange, 54262 InputBlur: InputBlur, 54263 MenuMouseLeave: MenuMouseLeave$1, 54264 ItemMouseMove: ItemMouseMove$1, 54265 ItemClick: ItemClick$1, 54266 ToggleButtonClick: ToggleButtonClick$1, 54267 FunctionToggleMenu: FunctionToggleMenu$1, 54268 FunctionOpenMenu: FunctionOpenMenu$1, 54269 FunctionCloseMenu: FunctionCloseMenu$1, 54270 FunctionSetHighlightedIndex: FunctionSetHighlightedIndex$1, 54271 FunctionSelectItem: FunctionSelectItem$1, 54272 FunctionSetInputValue: FunctionSetInputValue$1, 54273 FunctionReset: FunctionReset$1, 54274 ControlledPropUpdatedSelectedItem: ControlledPropUpdatedSelectedItem 54275}); 54276 54277function getInitialState$1(props) { 54278 var initialState = getInitialState(props); 54279 var selectedItem = initialState.selectedItem; 54280 var inputValue = initialState.inputValue; 54281 54282 if (inputValue === '' && selectedItem && props.defaultInputValue === undefined && props.initialInputValue === undefined && props.inputValue === undefined) { 54283 inputValue = props.itemToString(selectedItem); 54284 } 54285 54286 return extends_extends({}, initialState, { 54287 inputValue: inputValue 54288 }); 54289} 54290 54291var propTypes$1 = { 54292 items: (prop_types_default()).array.isRequired, 54293 itemToString: (prop_types_default()).func, 54294 getA11yStatusMessage: (prop_types_default()).func, 54295 getA11ySelectionMessage: (prop_types_default()).func, 54296 circularNavigation: (prop_types_default()).bool, 54297 highlightedIndex: (prop_types_default()).number, 54298 defaultHighlightedIndex: (prop_types_default()).number, 54299 initialHighlightedIndex: (prop_types_default()).number, 54300 isOpen: (prop_types_default()).bool, 54301 defaultIsOpen: (prop_types_default()).bool, 54302 initialIsOpen: (prop_types_default()).bool, 54303 selectedItem: (prop_types_default()).any, 54304 initialSelectedItem: (prop_types_default()).any, 54305 defaultSelectedItem: (prop_types_default()).any, 54306 inputValue: (prop_types_default()).string, 54307 defaultInputValue: (prop_types_default()).string, 54308 initialInputValue: (prop_types_default()).string, 54309 id: (prop_types_default()).string, 54310 labelId: (prop_types_default()).string, 54311 menuId: (prop_types_default()).string, 54312 getItemId: (prop_types_default()).func, 54313 inputId: (prop_types_default()).string, 54314 toggleButtonId: (prop_types_default()).string, 54315 stateReducer: (prop_types_default()).func, 54316 onSelectedItemChange: (prop_types_default()).func, 54317 onHighlightedIndexChange: (prop_types_default()).func, 54318 onStateChange: (prop_types_default()).func, 54319 onIsOpenChange: (prop_types_default()).func, 54320 onInputValueChange: (prop_types_default()).func, 54321 environment: prop_types_default().shape({ 54322 addEventListener: (prop_types_default()).func, 54323 removeEventListener: (prop_types_default()).func, 54324 document: prop_types_default().shape({ 54325 getElementById: (prop_types_default()).func, 54326 activeElement: (prop_types_default()).any, 54327 body: (prop_types_default()).any 54328 }) 54329 }) 54330}; 54331/** 54332 * The useCombobox version of useControlledReducer, which also 54333 * checks if the controlled prop selectedItem changed between 54334 * renders. If so, it will also update inputValue with its 54335 * string equivalent. It uses the common useEnhancedReducer to 54336 * compute the rest of the state. 54337 * 54338 * @param {Function} reducer Reducer function from downshift. 54339 * @param {Object} initialState Initial state of the hook. 54340 * @param {Object} props The hook props. 54341 * @returns {Array} An array with the state and an action dispatcher. 54342 */ 54343 54344function useControlledReducer$1(reducer, initialState, props) { 54345 var previousSelectedItemRef = (0,external_React_.useRef)(); 54346 54347 var _useEnhancedReducer = useEnhancedReducer(reducer, initialState, props), 54348 state = _useEnhancedReducer[0], 54349 dispatch = _useEnhancedReducer[1]; // ToDo: if needed, make same approach as selectedItemChanged from Downshift. 54350 54351 54352 (0,external_React_.useEffect)(function () { 54353 if (isControlledProp(props, 'selectedItem')) { 54354 if (previousSelectedItemRef.current !== props.selectedItem) { 54355 dispatch({ 54356 type: ControlledPropUpdatedSelectedItem, 54357 inputValue: props.itemToString(props.selectedItem) 54358 }); 54359 } 54360 54361 previousSelectedItemRef.current = state.selectedItem === previousSelectedItemRef.current ? props.selectedItem : state.selectedItem; 54362 } 54363 }); 54364 return [getState(state, props), dispatch]; 54365} // eslint-disable-next-line import/no-mutable-exports 54366 54367 54368var validatePropTypes$1 = downshift_esm_noop; 54369/* istanbul ignore next */ 54370 54371if (false) {} 54372 54373var defaultProps$2 = extends_extends({}, defaultProps, {
54374 getA11yStatusMessage: getA11yStatusMessage, 54375 circularNavigation: true 54376}); 54377 54378/* eslint-disable complexity */ 54379 54380function downshiftUseComboboxReducer(state, action) { 54381 var type = action.type, 54382 props = action.props, 54383 shiftKey = action.shiftKey; 54384 var changes; 54385 54386 switch (type) { 54387 case ItemClick$1: 54388 changes = { 54389 isOpen: getDefaultValue(props, 'isOpen'), 54390 highlightedIndex: getDefaultValue(props, 'highlightedIndex'), 54391 selectedItem: props.items[action.index], 54392 inputValue: props.itemToString(props.items[action.index]) 54393 }; 54394 break; 54395 54396 case InputKeyDownArrowDown: 54397 if (state.isOpen) { 54398 changes = { 54399 highlightedIndex: getNextWrappingIndex(shiftKey ? 5 : 1, state.highlightedIndex, props.items.length, action.getItemNodeFromIndex, props.circularNavigation) 54400 }; 54401 } else { 54402 changes = { 54403 highlightedIndex: getHighlightedIndexOnOpen(props, state, 1, action.getItemNodeFromIndex), 54404 isOpen: props.items.length >= 0 54405 }; 54406 } 54407 54408 break; 54409 54410 case InputKeyDownArrowUp: 54411 if (state.isOpen) { 54412 changes = { 54413 highlightedIndex: getNextWrappingIndex(shiftKey ? -5 : -1, state.highlightedIndex, props.items.length, action.getItemNodeFromIndex, props.circularNavigation) 54414 }; 54415 } else { 54416 changes = { 54417 highlightedIndex: getHighlightedIndexOnOpen(props, state, -1, action.getItemNodeFromIndex), 54418 isOpen: props.items.length >= 0 54419 }; 54420 } 54421 54422 break; 54423 54424 case InputKeyDownEnter: 54425 changes = extends_extends({}, state.isOpen && state.highlightedIndex >= 0 && { 54426 selectedItem: props.items[state.highlightedIndex], 54427 isOpen: getDefaultValue(props, 'isOpen'), 54428 highlightedIndex: getDefaultValue(props, 'highlightedIndex'), 54429 inputValue: props.itemToString(props.items[state.highlightedIndex]) 54430 }); 54431 break; 54432 54433 case InputKeyDownEscape: 54434 changes = extends_extends({ 54435 isOpen: false, 54436 highlightedIndex: -1 54437 }, !state.isOpen && { 54438 selectedItem: null, 54439 inputValue: '' 54440 }); 54441 break; 54442 54443 case InputKeyDownHome: 54444 changes = { 54445 highlightedIndex: getNextNonDisabledIndex(1, 0, props.items.length, action.getItemNodeFromIndex, false) 54446 }; 54447 break; 54448 54449 case InputKeyDownEnd: 54450 changes = { 54451 highlightedIndex: getNextNonDisabledIndex(-1, props.items.length - 1, props.items.length, action.getItemNodeFromIndex, false) 54452 }; 54453 break; 54454 54455 case InputBlur: 54456 changes = extends_extends({ 54457 isOpen: false, 54458 highlightedIndex: -1 54459 }, state.highlightedIndex >= 0 && action.selectItem && { 54460 selectedItem: props.items[state.highlightedIndex], 54461 inputValue: props.itemToString(props.items[state.highlightedIndex]) 54462 }); 54463 break; 54464 54465 case InputChange: 54466 changes = { 54467 isOpen: true, 54468 highlightedIndex: getDefaultValue(props, 'highlightedIndex'), 54469 inputValue: action.inputValue 54470 }; 54471 break; 54472 54473 case FunctionSelectItem$1: 54474 changes = { 54475 selectedItem: action.selectedItem, 54476 inputValue: props.itemToString(action.selectedItem) 54477 }; 54478 break; 54479 54480 case ControlledPropUpdatedSelectedItem: 54481 changes = { 54482 inputValue: action.inputValue 54483 }; 54484 break; 54485 54486 default: 54487 return downshiftCommonReducer(state, action, stateChangeTypes$2); 54488 } 54489 54490 return extends_extends({}, state, changes); 54491} 54492/* eslint-enable complexity */ 54493 54494useCombobox.stateChangeTypes = stateChangeTypes$2; 54495 54496function useCombobox(userProps) { 54497 if (userProps === void 0) { 54498 userProps = {}; 54499 } 54500 54501 validatePropTypes$1(userProps, useCombobox); // Props defaults and destructuring. 54502 54503 var props = extends_extends({}, defaultProps$2, userProps); 54504 54505 var initialIsOpen = props.initialIsOpen, 54506 defaultIsOpen = props.defaultIsOpen, 54507 items = props.items, 54508 scrollIntoView = props.scrollIntoView, 54509 environment = props.environment, 54510 getA11yStatusMessage = props.getA11yStatusMessage, 54511 getA11ySelectionMessage = props.getA11ySelectionMessage, 54512 itemToString = props.itemToString; // Initial state depending on controlled props. 54513 54514 var initialState = getInitialState$1(props); 54515 54516 var _useControlledReducer = useControlledReducer$1(downshiftUseComboboxReducer, initialState, props), 54517 state = _useControlledReducer[0], 54518 dispatch = _useControlledReducer[1]; 54519 54520 var isOpen = state.isOpen, 54521 highlightedIndex = state.highlightedIndex, 54522 selectedItem = state.selectedItem, 54523 inputValue = state.inputValue; // Element refs. 54524 54525 var menuRef = (0,external_React_.useRef)(null); 54526 var itemRefs = (0,external_React_.useRef)({}); 54527 var inputRef = (0,external_React_.useRef)(null); 54528 var toggleButtonRef = (0,external_React_.useRef)(null); 54529 var comboboxRef = (0,external_React_.useRef)(null); 54530 var isInitialMountRef = (0,external_React_.useRef)(true); // prevent id re-generation between renders. 54531 54532 var elementIds = useElementIds(props); // used to keep track of how many items we had on previous cycle. 54533 54534 var previousResultCountRef = (0,external_React_.useRef)(); // utility callback to get item element. 54535 54536 var latest = downshift_esm_useLatestRef({ 54537 state: state, 54538 props: props 54539 }); 54540 var getItemNodeFromIndex = (0,external_React_.useCallback)(function (index) { 54541 return itemRefs.current[elementIds.getItemId(index)]; 54542 }, [elementIds]); // Effects. 54543 // Sets a11y status message on changes in state. 54544
54545 useA11yMessageSetter(getA11yStatusMessage, [isOpen, highlightedIndex, inputValue, items], extends_extends({ 54546 isInitialMount: isInitialMountRef.current, 54547 previousResultCount: previousResultCountRef.current, 54548 items: items, 54549 environment: environment, 54550 itemToString: itemToString 54551 }, state)); // Sets a11y status message on changes in selectedItem. 54552 54553 useA11yMessageSetter(getA11ySelectionMessage, [selectedItem], extends_extends({ 54554 isInitialMount: isInitialMountRef.current, 54555 previousResultCount: previousResultCountRef.current, 54556 items: items, 54557 environment: environment, 54558 itemToString: itemToString 54559 }, state)); // Scroll on highlighted item if change comes from keyboard. 54560 54561 var shouldScrollRef = useScrollIntoView({ 54562 menuElement: menuRef.current, 54563 highlightedIndex: highlightedIndex, 54564 isOpen: isOpen, 54565 itemRefs: itemRefs, 54566 scrollIntoView: scrollIntoView, 54567 getItemNodeFromIndex: getItemNodeFromIndex 54568 }); 54569 useControlPropsValidator({ 54570 isInitialMount: isInitialMountRef.current, 54571 props: props, 54572 state: state 54573 }); // Focus the input on first render if required. 54574 54575 (0,external_React_.useEffect)(function () { 54576 var focusOnOpen = initialIsOpen || defaultIsOpen || isOpen; 54577 54578 if (focusOnOpen && inputRef.current) { 54579 inputRef.current.focus(); 54580 } // eslint-disable-next-line react-hooks/exhaustive-deps 54581 54582 }, []); 54583 (0,external_React_.useEffect)(function () { 54584 if (isInitialMountRef.current) { 54585 return; 54586 } 54587 54588 previousResultCountRef.current = items.length; 54589 }); // Add mouse/touch events to document. 54590 54591 var mouseAndTouchTrackersRef = useMouseAndTouchTracker(isOpen, [comboboxRef, menuRef, toggleButtonRef], environment, function () { 54592 dispatch({ 54593 type: InputBlur, 54594 selectItem: false 54595 }); 54596 }); 54597 var setGetterPropCallInfo = useGetterPropsCalledChecker('getInputProps', 'getComboboxProps', 'getMenuProps'); // Make initial ref false. 54598 54599 (0,external_React_.useEffect)(function () { 54600 isInitialMountRef.current = false; 54601 }, []); // Reset itemRefs on close. 54602 54603 (0,external_React_.useEffect)(function () { 54604 if (!isOpen) { 54605 itemRefs.current = {}; 54606 } 54607 }, [isOpen]); 54608 /* Event handler functions */ 54609 54610 var inputKeyDownHandlers = (0,external_React_.useMemo)(function () { 54611 return { 54612 ArrowDown: function ArrowDown(event) { 54613 event.preventDefault(); 54614 dispatch({ 54615 type: InputKeyDownArrowDown, 54616 shiftKey: event.shiftKey, 54617 getItemNodeFromIndex: getItemNodeFromIndex 54618 }); 54619 }, 54620 ArrowUp: function ArrowUp(event) { 54621 event.preventDefault(); 54622 dispatch({ 54623 type: InputKeyDownArrowUp, 54624 shiftKey: event.shiftKey, 54625 getItemNodeFromIndex: getItemNodeFromIndex 54626 }); 54627 }, 54628 Home: function Home(event) { 54629 if (!latest.current.state.isOpen) { 54630 return; 54631 } 54632 54633 event.preventDefault(); 54634 dispatch({ 54635 type: InputKeyDownHome, 54636 getItemNodeFromIndex: getItemNodeFromIndex 54637 }); 54638 }, 54639 End: function End(event) { 54640 if (!latest.current.state.isOpen) { 54641 return; 54642 } 54643 54644 event.preventDefault(); 54645 dispatch({ 54646 type: InputKeyDownEnd, 54647 getItemNodeFromIndex: getItemNodeFromIndex 54648 }); 54649 }, 54650 Escape: function Escape() { 54651 var latestState = latest.current.state; 54652 54653 if (latestState.isOpen || latestState.inputValue || latestState.selectedItem || latestState.highlightedIndex > -1) { 54654 dispatch({ 54655 type: InputKeyDownEscape 54656 }); 54657 } 54658 }, 54659 Enter: function Enter(event) { 54660 var latestState = latest.current.state; // if closed or no highlighted index, do nothing. 54661 54662 if (!latestState.isOpen || latestState.highlightedIndex < 0 || event.which === 229 // if IME composing, wait for next Enter keydown event. 54663 ) { 54664 return; 54665 } 54666 54667 event.preventDefault(); 54668 dispatch({ 54669 type: InputKeyDownEnter, 54670 getItemNodeFromIndex: getItemNodeFromIndex 54671 }); 54672 } 54673 }; 54674 }
54674, [dispatch, latest, getItemNodeFromIndex]); // Getter props. 54675 54676 var getLabelProps = (0,external_React_.useCallback)(function (labelProps) { 54677 return extends_extends({ 54678 id: elementIds.labelId, 54679 htmlFor: elementIds.inputId 54680 }, labelProps); 54681 }, [elementIds]); 54682 var getMenuProps = (0,external_React_.useCallback)(function (_temp, _temp2) { 54683 var _extends2; 54684 54685 var _ref = _temp === void 0 ? {} : _temp, 54686 onMouseLeave = _ref.onMouseLeave, 54687 _ref$refKey = _ref.refKey, 54688 refKey = _ref$refKey === void 0 ? 'ref' : _ref$refKey, 54689 ref = _ref.ref, 54690 rest = objectWithoutPropertiesLoose_objectWithoutPropertiesLoose(_ref, ["onMouseLeave", "refKey", "ref"]); 54691 54692 var _ref2 = _temp2 === void 0 ? {} : _temp2, 54693 _ref2$suppressRefErro = _ref2.suppressRefError, 54694 suppressRefError = _ref2$suppressRefErro === void 0 ? false : _ref2$suppressRefErro; 54695 54696 setGetterPropCallInfo('getMenuProps', suppressRefError, refKey, menuRef); 54697 return extends_extends((_extends2 = {}, _extends2[refKey] = handleRefs(ref, function (menuNode) { 54698 menuRef.current = menuNode; 54699 }), _extends2.id = elementIds.menuId, _extends2.role = 'listbox', _extends2['aria-labelledby'] = elementIds.labelId, _extends2.onMouseLeave = callAllEventHandlers(onMouseLeave, function () { 54700 dispatch({ 54701 type: MenuMouseLeave$1 54702 }); 54703 }), _extends2), rest); 54704 }, [dispatch, setGetterPropCallInfo, elementIds]); 54705 var getItemProps = (0,external_React_.useCallback)(function (_temp3) { 54706 var _extends3, _ref4; 54707 54708 var _ref3 = _temp3 === void 0 ? {} : _temp3, 54709 item = _ref3.item, 54710 index = _ref3.index, 54711 _ref3$refKey = _ref3.refKey, 54712 refKey = _ref3$refKey === void 0 ? 'ref' : _ref3$refKey, 54713 ref = _ref3.ref, 54714 onMouseMove = _ref3.onMouseMove, 54715 onClick = _ref3.onClick, 54716 onPress = _ref3.onPress, 54717 rest = objectWithoutPropertiesLoose_objectWithoutPropertiesLoose(_ref3, ["item", "index", "refKey", "ref", "onMouseMove", "onClick", "onPress"]); 54718 54719 var _latest$current = latest.current, 54720 latestProps = _latest$current.props, 54721 latestState = _latest$current.state; 54722 var itemIndex = getItemIndex(index, item, latestProps.items); 54723 54724 if (itemIndex < 0) { 54725 throw new Error('Pass either item or item index in getItemProps!'); 54726 } 54727 54728 var onSelectKey = 'onClick'; 54729 var customClickHandler = onClick; 54730 54731 var itemHandleMouseMove = function itemHandleMouseMove() { 54732 if (index === latestState.highlightedIndex) { 54733 return; 54734 } 54735 54736 shouldScrollRef.current = false; 54737 dispatch({ 54738 type: ItemMouseMove$1, 54739 index: index 54740 }); 54741 }; 54742 54743 var itemHandleClick = function itemHandleClick() { 54744 dispatch({ 54745 type: ItemClick$1, 54746 index: index 54747 }); 54748 54749 if (inputRef.current) { 54750 inputRef.current.focus(); 54751 } 54752 }; 54753 54754 return extends_extends((_extends3 = {}, _extends3[refKey] = handleRefs(ref, function (itemNode) { 54755 if (itemNode) { 54756 itemRefs.current[elementIds.getItemId(itemIndex)] = itemNode; 54757 } 54758 }), _extends3.role = 'option', _extends3['aria-selected'] = "" + (itemIndex === latestState.highlightedIndex), _extends3.id = elementIds.getItemId(itemIndex), _extends3), !rest.disabled && (_ref4 = { 54759 onMouseMove: callAllEventHandlers(onMouseMove, itemHandleMouseMove) 54760 }, _ref4[onSelectKey] = callAllEventHandlers(customClickHandler, itemHandleClick), _ref4), rest); 54761 }, [dispatch, latest, shouldScrollRef, elementIds]); 54762 var getToggleButtonProps = (0,external_React_.useCallback)(function (_temp4) { 54763 var _extends4; 54764 54765 var _ref5 = _temp4 === void 0 ? {} : _temp4, 54766 onClick = _ref5.onClick, 54767 onPress = _ref5.onPress, 54768 _ref5$refKey = _ref5.refKey, 54769 refKey = _ref5$refKey === void 0 ? 'ref' : _ref5$refKey, 54770 ref = _ref5.ref, 54771 rest = objectWithoutPropertiesLoose_objectWithoutPropertiesLoose(_ref5, ["onClick", "onPress", "refKey", "ref"]); 54772 54773 var toggleButtonHandleClick = function toggleButtonHandleClick() { 54774 dispatch({ 54775 type: ToggleButtonClick$1 54776 }); 54777 54778 if (!latest.current.state.isOpen && inputRef.current) { 54779 inputRef.current.focus(); 54780 } 54781 }; 54782 54783 return extends_extends((_extends4 = {}, _extends4[refKey] = handleRefs(ref, function (toggleButtonNode) { 54784 toggleButtonRef.current = toggleButtonNode; 54785 }), _extends4.id = elementIds.toggleButtonId, _extends4.tabIndex = -1, _extends4), !rest.disabled && extends_extends({}, { 54786 onClick: callAllEventHandlers(onClick, toggleButtonHandleClick) 54787 }), rest); 54788 }
54788, [dispatch, latest, elementIds]); 54789 var getInputProps = (0,external_React_.useCallback)(function (_temp5, _temp6) { 54790 var _extends5; 54791 54792 var _ref6 = _temp5 === void 0 ? {} : _temp5, 54793 onKeyDown = _ref6.onKeyDown, 54794 onChange = _ref6.onChange, 54795 onInput = _ref6.onInput, 54796 onBlur = _ref6.onBlur, 54797 onChangeText = _ref6.onChangeText, 54798 _ref6$refKey = _ref6.refKey, 54799 refKey = _ref6$refKey === void 0 ? 'ref' : _ref6$refKey, 54800 ref = _ref6.ref, 54801 rest = objectWithoutPropertiesLoose_objectWithoutPropertiesLoose(_ref6, ["onKeyDown", "onChange", "onInput", "onBlur", "onChangeText", "refKey", "ref"]); 54802 54803 var _ref7 = _temp6 === void 0 ? {} : _temp6, 54804 _ref7$suppressRefErro = _ref7.suppressRefError, 54805 suppressRefError = _ref7$suppressRefErro === void 0 ? false : _ref7$suppressRefErro; 54806 54807 setGetterPropCallInfo('getInputProps', suppressRefError, refKey, inputRef); 54808 var latestState = latest.current.state; 54809 54810 var inputHandleKeyDown = function inputHandleKeyDown(event) { 54811 var key = normalizeArrowKey(event); 54812 54813 if (key && inputKeyDownHandlers[key]) { 54814 inputKeyDownHandlers[key](event); 54815 } 54816 }; 54817 54818 var inputHandleChange = function inputHandleChange(event) { 54819 dispatch({ 54820 type: InputChange, 54821 inputValue: event.target.value 54822 }); 54823 }; 54824 54825 var inputHandleBlur = function inputHandleBlur() { 54826 /* istanbul ignore else */ 54827 if (latestState.isOpen && !mouseAndTouchTrackersRef.current.isMouseDown) { 54828 dispatch({ 54829 type: InputBlur, 54830 selectItem: true 54831 }); 54832 } 54833 }; 54834 /* istanbul ignore next (preact) */ 54835 54836 54837 var onChangeKey = 'onChange'; 54838 var eventHandlers = {}; 54839 54840 if (!rest.disabled) { 54841 var _eventHandlers; 54842 54843 eventHandlers = (_eventHandlers = {}, _eventHandlers[onChangeKey] = callAllEventHandlers(onChange, onInput, inputHandleChange), _eventHandlers.onKeyDown = callAllEventHandlers(onKeyDown, inputHandleKeyDown), _eventHandlers.onBlur = callAllEventHandlers(onBlur, inputHandleBlur), _eventHandlers); 54844 } 54845 54846 return extends_extends((_extends5 = {}, _extends5[refKey] = handleRefs(ref, function (inputNode) { 54847 inputRef.current = inputNode; 54848 }), _extends5.id = elementIds.inputId, _extends5['aria-autocomplete'] = 'list', _extends5['aria-controls'] = elementIds.menuId, _extends5), latestState.isOpen && latestState.highlightedIndex > -1 && { 54849 'aria-activedescendant': elementIds.getItemId(latestState.highlightedIndex) 54850 }, { 54851 'aria-labelledby': elementIds.labelId, 54852 // https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion 54853 // revert back since autocomplete="nope" is ignored on latest Chrome and Opera 54854 autoComplete: 'off', 54855 value: latestState.inputValue 54856 }, eventHandlers, rest); 54857 }, [dispatch, inputKeyDownHandlers, latest, mouseAndTouchTrackersRef, setGetterPropCallInfo, elementIds]); 54858 var getComboboxProps = (0,external_React_.useCallback)(function (_temp7, _temp8) { 54859 var _extends6; 54860 54861 var _ref8 = _temp7 === void 0 ? {} : _temp7, 54862 _ref8$refKey = _ref8.refKey, 54863 refKey = _ref8$refKey === void 0 ? 'ref' : _ref8$refKey, 54864 ref = _ref8.ref, 54865 rest = objectWithoutPropertiesLoose_objectWithoutPropertiesLoose(_ref8, ["refKey", "ref"]); 54866 54867 var _ref9 = _temp8 === void 0 ? {} : _temp8, 54868 _ref9$suppressRefErro = _ref9.suppressRefError, 54869 suppressRefError = _ref9$suppressRefErro === void 0 ? false : _ref9$suppressRefErro; 54870 54871 setGetterPropCallInfo('getComboboxProps', suppressRefError, refKey, comboboxRef); 54872 return extends_extends((_extends6 = {}, _extends6[refKey] = handleRefs(ref, function (comboboxNode) { 54873 comboboxRef.current = comboboxNode; 54874 }), _extends6.role = 'combobox', _extends6['aria-haspopup'] = 'listbox', _extends6['aria-owns'] = elementIds.menuId, _extends6['aria-expanded'] = latest.current.state.isOpen, _extends6), rest); 54875 }, [latest, setGetterPropCallInfo, elementIds]); // returns 54876 54877 var toggleMenu = (0,external_React_.useCallback)(function () { 54878 dispatch({ 54879 type: FunctionToggleMenu$1 54880 }); 54881 }
54881, [dispatch]); 54882 var closeMenu = (0,external_React_.useCallback)(function () { 54883 dispatch({ 54884 type: FunctionCloseMenu$1 54885 }); 54886 }, [dispatch]); 54887 var openMenu = (0,external_React_.useCallback)(function () { 54888 dispatch({ 54889 type: FunctionOpenMenu$1 54890 }); 54891 }, [dispatch]); 54892 var setHighlightedIndex = (0,external_React_.useCallback)(function (newHighlightedIndex) { 54893 dispatch({ 54894 type: FunctionSetHighlightedIndex$1, 54895 highlightedIndex: newHighlightedIndex 54896 }); 54897 }, [dispatch]); 54898 var selectItem = (0,external_React_.useCallback)(function (newSelectedItem) { 54899 dispatch({ 54900 type: FunctionSelectItem$1, 54901 selectedItem: newSelectedItem 54902 }); 54903 }, [dispatch]); 54904 var setInputValue = (0,external_React_.useCallback)(function (newInputValue) { 54905 dispatch({ 54906 type: FunctionSetInputValue$1, 54907 inputValue: newInputValue 54908 }); 54909 }, [dispatch]); 54910 var reset = (0,external_React_.useCallback)(function () { 54911 dispatch({ 54912 type: FunctionReset$1 54913 }); 54914 }, [dispatch]); 54915 return { 54916 // prop getters. 54917 getItemProps: getItemProps, 54918 getLabelProps: getLabelProps, 54919 getMenuProps: getMenuProps, 54920 getInputProps: getInputProps, 54921 getComboboxProps: getComboboxProps, 54922 getToggleButtonProps: getToggleButtonProps, 54923 // actions. 54924 toggleMenu: toggleMenu, 54925 openMenu: openMenu, 54926 closeMenu: closeMenu, 54927 setHighlightedIndex: setHighlightedIndex, 54928 setInputValue: setInputValue, 54929 selectItem: selectItem, 54930 reset: reset, 54931 // state. 54932 highlightedIndex: highlightedIndex, 54933 isOpen: isOpen, 54934 selectedItem: selectedItem, 54935 inputValue: inputValue 54936 }; 54937} 54938 54939var defaultStateValues = { 54940 activeIndex: -1, 54941 selectedItems: [] 54942}; 54943/** 54944 * Returns the initial value for a state key in the following order: 54945 * 1. controlled prop, 2. initial prop, 3. default prop, 4. default 54946 * value from Downshift. 54947 * 54948 * @param {Object} props Props passed to the hook. 54949 * @param {string} propKey Props key to generate the value for. 54950 * @returns {any} The initial value for that prop. 54951 */ 54952 54953function getInitialValue$1(props, propKey) { 54954 return getInitialValue(props, propKey, defaultStateValues); 54955} 54956/** 54957 * Returns the default value for a state key in the following order: 54958 * 1. controlled prop, 2. default prop, 3. default value from Downshift. 54959 * 54960 * @param {Object} props Props passed to the hook. 54961 * @param {string} propKey Props key to generate the value for. 54962 * @returns {any} The initial value for that prop. 54963 */ 54964 54965 54966function getDefaultValue$1(props, propKey) { 54967 return getDefaultValue(props, propKey, defaultStateValues); 54968} 54969/** 54970 * Gets the initial state based on the provided props. It uses initial, default 54971 * and controlled props related to state in order to compute the initial value. 54972 * 54973 * @param {Object} props Props passed to the hook. 54974 * @returns {Object} The initial state. 54975 */ 54976 54977 54978function getInitialState$2(props) { 54979 var activeIndex = getInitialValue$1(props, 'activeIndex'); 54980 var selectedItems = getInitialValue$1(props, 'selectedItems'); 54981 return { 54982 activeIndex: activeIndex, 54983 selectedItems: selectedItems 54984 }; 54985} 54986/** 54987 * Returns true if dropdown keydown operation is permitted. Should not be 54988 * allowed on keydown with modifier keys (ctrl, alt, shift, meta), on 54989 * input element with text content that is either highlighted or selection 54990 * cursor is not at the starting position. 54991 * 54992 * @param {KeyboardEvent} event The event from keydown. 54993 * @returns {boolean} Whether the operation is allowed. 54994 */ 54995 54996 54997function isKeyDownOperationPermitted(event) { 54998 if (event.shiftKey || event.metaKey || event.ctrlKey || event.altKey) { 54999 return false; 55000 } 55001 55002 var element = event.target; 55003 55004 if (element instanceof HTMLInputElement && // if element is a text input 55005 element.value !== '' && ( // and we have text in it 55006 // and cursor is either not at the start or is currently highlighting text. 55007 element.selectionStart !== 0 || element.selectionEnd !== 0)) { 55008 return false; 55009 } 55010 55011 return true; 55012} 55013/** 55014 * Returns a message to be added to aria-live region when item is removed. 55015 * 55016 * @param {Object} selectionParameters Parameters required to build the message. 55017 * @returns {string} The a11y message. 55018 */ 55019 55020 55021function getA11yRemovalMessage(selectionParameters) { 55022 var removedSelectedItem = selectionParameters.removedSelectedItem, 55023 itemToStringLocal = selectionParameters.itemToString; 55024 return itemToStringLocal(removedSelectedItem) + " has been removed."; 55025} 55026 55027var propTypes$2 = { 55028 selectedItems: (prop_types_default()).array, 55029 initialSelectedItems: (prop_types_default()).array, 55030 defaultSelectedItems: (prop_types_default()).array, 55031 itemToString: (prop_types_default()).func, 55032 getA11yRemovalMessage: (prop_types_default()).func, 55033 stateReducer: (prop_types_default()).func, 55034 activeIndex: (prop_types_default()).number, 55035 initialActiveIndex: (prop_types_default()).number, 55036 defaultActiveIndex: (prop_types_default()).number, 55037 onActiveIndexChange: (prop_types_default()).func, 55038 onSelectedItemsChange: (prop_types_default()).func,
55039 keyNavigationNext: (prop_types_default()).string, 55040 keyNavigationPrevious: (prop_types_default()).string, 55041 environment: prop_types_default().shape({ 55042 addEventListener: (prop_types_default()).func, 55043 removeEventListener: (prop_types_default()).func, 55044 document: prop_types_default().shape({ 55045 getElementById: (prop_types_default()).func, 55046 activeElement: (prop_types_default()).any, 55047 body: (prop_types_default()).any 55048 }) 55049 }) 55050}; 55051var defaultProps$3 = { 55052 itemToString: defaultProps.itemToString, 55053 stateReducer: defaultProps.stateReducer, 55054 environment: defaultProps.environment, 55055 getA11yRemovalMessage: getA11yRemovalMessage, 55056 keyNavigationNext: 'ArrowRight', 55057 keyNavigationPrevious: 'ArrowLeft' 55058}; // eslint-disable-next-line import/no-mutable-exports 55059 55060var validatePropTypes$2 = downshift_esm_noop; 55061/* istanbul ignore next */ 55062 55063if (false) {} 55064 55065var SelectedItemClick = false ? 0 : 0; 55066var SelectedItemKeyDownDelete = false ? 0 : 1; 55067var SelectedItemKeyDownBackspace = false ? 0 : 2; 55068var SelectedItemKeyDownNavigationNext = false ? 0 : 3; 55069var SelectedItemKeyDownNavigationPrevious = false ? 0 : 4; 55070var DropdownKeyDownNavigationPrevious = false ? 0 : 5; 55071var DropdownKeyDownBackspace = false ? 0 : 6; 55072var DropdownClick = false ? 0 : 7; 55073var FunctionAddSelectedItem = false ? 0 : 8; 55074var FunctionRemoveSelectedItem = false ? 0 : 9; 55075var FunctionSetSelectedItems = false ? 0 : 10; 55076var FunctionSetActiveIndex = false ? 0 : 11; 55077var FunctionReset$2 = false ? 0 : 12; 55078 55079var stateChangeTypes$3 = /*#__PURE__*/Object.freeze({ 55080 __proto__: null, 55081 SelectedItemClick: SelectedItemClick, 55082 SelectedItemKeyDownDelete: SelectedItemKeyDownDelete, 55083 SelectedItemKeyDownBackspace: SelectedItemKeyDownBackspace, 55084 SelectedItemKeyDownNavigationNext: SelectedItemKeyDownNavigationNext, 55085 SelectedItemKeyDownNavigationPrevious: SelectedItemKeyDownNavigationPrevious, 55086 DropdownKeyDownNavigationPrevious: DropdownKeyDownNavigationPrevious, 55087 DropdownKeyDownBackspace: DropdownKeyDownBackspace, 55088 DropdownClick: DropdownClick, 55089 FunctionAddSelectedItem: FunctionAddSelectedItem, 55090 FunctionRemoveSelectedItem: FunctionRemoveSelectedItem, 55091 FunctionSetSelectedItems: FunctionSetSelectedItems, 55092 FunctionSetActiveIndex: FunctionSetActiveIndex, 55093 FunctionReset: FunctionReset$2 55094}); 55095 55096/* eslint-disable complexity */ 55097 55098function downshiftMultipleSelectionReducer(state, action) { 55099 var type = action.type, 55100 index = action.index, 55101 props = action.props, 55102 selectedItem = action.selectedItem; 55103 var activeIndex = state.activeIndex, 55104 selectedItems = state.selectedItems; 55105 var changes; 55106 55107 switch (type) { 55108 case SelectedItemClick: 55109 changes = { 55110 activeIndex: index 55111 }; 55112 break; 55113 55114 case SelectedItemKeyDownNavigationPrevious: 55115 changes = { 55116 activeIndex: activeIndex - 1 < 0 ? 0 : activeIndex - 1 55117 }; 55118 break; 55119 55120 case SelectedItemKeyDownNavigationNext: 55121 changes = { 55122 activeIndex: activeIndex + 1 >= selectedItems.length ? -1 : activeIndex + 1 55123 }; 55124 break; 55125 55126 case SelectedItemKeyDownBackspace: 55127 case SelectedItemKeyDownDelete: 55128 { 55129 var newActiveIndex = activeIndex; 55130 55131 if (selectedItems.length === 1) { 55132 newActiveIndex = -1; 55133 } else if (activeIndex === selectedItems.length - 1) { 55134 newActiveIndex = selectedItems.length - 2; 55135 } 55136 55137 changes = extends_extends({ 55138 selectedItems: [].concat(selectedItems.slice(0, activeIndex), selectedItems.slice(activeIndex + 1)) 55139 }, { 55140 activeIndex: newActiveIndex 55141 }); 55142 break; 55143 } 55144 55145 case DropdownKeyDownNavigationPrevious: 55146 changes = { 55147 activeIndex: selectedItems.length - 1 55148 }; 55149 break; 55150 55151 case DropdownKeyDownBackspace: 55152 changes = { 55153 selectedItems: selectedItems.slice(0, selectedItems.length - 1) 55154 }; 55155 break; 55156 55157 case FunctionAddSelectedItem: 55158 changes = { 55159 selectedItems: [].concat(selectedItems, [selectedItem]) 55160 }; 55161 break; 55162 55163 case DropdownClick: 55164 changes = { 55165 activeIndex: -1 55166 }; 55167 break; 55168 55169 case FunctionRemoveSelectedItem: 55170 { 55171 var _newActiveIndex = activeIndex; 55172 var selectedItemIndex = selectedItems.indexOf(selectedItem); 55173 55174 if (selectedItems.length === 1) { 55175 _newActiveIndex = -1; 55176 } else if (selectedItemIndex === selectedItems.length - 1) { 55177 _newActiveIndex = selectedItems.length - 2; 55178 } 55179 55180 changes = extends_extends({ 55181 selectedItems: [].concat(selectedItems.slice(0, selectedItemIndex), selectedItems.slice(selectedItemIndex + 1)) 55182 }, { 55183 activeIndex: _newActiveIndex 55184 }); 55185 break; 55186 } 55187 55188 case FunctionSetSelectedItems: 55189 { 55190 var newSelectedItems = action.selectedItems; 55191 changes = { 55192 selectedItems: newSelectedItems 55193 }; 55194 break; 55195 } 55196 55197 case FunctionSetActiveIndex: 55198 { 55199 var _newActiveIndex2 = action.activeIndex; 55200 changes = { 55201 activeIndex: _newActiveIndex2 55202 }; 55203 break; 55204 } 55205 55206 case FunctionReset$2: 55207 changes = { 55208 activeIndex: getDefaultValue$1(props, 'activeIndex'),
55209 selectedItems: getDefaultValue$1(props, 'selectedItems') 55210 }; 55211 break; 55212 55213 default: 55214 throw new Error('Reducer called without proper action type.'); 55215 } 55216 55217 return extends_extends({}, state, changes); 55218} 55219 55220useMultipleSelection.stateChangeTypes = stateChangeTypes$3; 55221 55222function useMultipleSelection(userProps) { 55223 if (userProps === void 0) { 55224 userProps = {}; 55225 } 55226 55227 validatePropTypes$2(userProps, useMultipleSelection); // Props defaults and destructuring. 55228 55229 var props = extends_extends({}, defaultProps$3, userProps); 55230 55231 var getA11yRemovalMessage = props.getA11yRemovalMessage, 55232 itemToString = props.itemToString, 55233 environment = props.environment, 55234 keyNavigationNext = props.keyNavigationNext, 55235 keyNavigationPrevious = props.keyNavigationPrevious; // Reducer init. 55236 55237 var _useControlledReducer = useControlledReducer(downshiftMultipleSelectionReducer, getInitialState$2(props), props), 55238 state = _useControlledReducer[0], 55239 dispatch = _useControlledReducer[1]; 55240 55241 var activeIndex = state.activeIndex, 55242 selectedItems = state.selectedItems; // Refs. 55243 55244 var isInitialMountRef = (0,external_React_.useRef)(true); 55245 var dropdownRef = (0,external_React_.useRef)(null); 55246 var previousSelectedItemsRef = (0,external_React_.useRef)(selectedItems); 55247 var selectedItemRefs = (0,external_React_.useRef)(); 55248 selectedItemRefs.current = []; 55249 var latest = downshift_esm_useLatestRef({ 55250 state: state, 55251 props: props 55252 }); // Effects. 55253 55254 /* Sets a11y status message on changes in selectedItem. */ 55255 55256 (0,external_React_.useEffect)(function () { 55257 if (isInitialMountRef.current) { 55258 return; 55259 } 55260 55261 if (selectedItems.length < previousSelectedItemsRef.current.length) { 55262 var removedSelectedItem = previousSelectedItemsRef.current.find(function (item) { 55263 return selectedItems.indexOf(item) < 0; 55264 }); 55265 setStatus(getA11yRemovalMessage({ 55266 itemToString: itemToString, 55267 resultCount: selectedItems.length, 55268 removedSelectedItem: removedSelectedItem, 55269 activeIndex: activeIndex, 55270 activeSelectedItem: selectedItems[activeIndex] 55271 }), environment.document); 55272 } 55273 55274 previousSelectedItemsRef.current = selectedItems; // eslint-disable-next-line react-hooks/exhaustive-deps 55275 }, [selectedItems.length]); // Sets focus on active item. 55276 55277 (0,external_React_.useEffect)(function () { 55278 if (isInitialMountRef.current) { 55279 return; 55280 } 55281 55282 if (activeIndex === -1 && dropdownRef.current) { 55283 dropdownRef.current.focus(); 55284 } else if (selectedItemRefs.current[activeIndex]) { 55285 selectedItemRefs.current[activeIndex].focus(); 55286 } 55287 }, [activeIndex]); 55288 useControlPropsValidator({ 55289 isInitialMount: isInitialMountRef.current, 55290 props: props, 55291 state: state 55292 }); 55293 var setGetterPropCallInfo = useGetterPropsCalledChecker('getDropdownProps'); // Make initial ref false. 55294 55295 (0,external_React_.useEffect)(function () { 55296 isInitialMountRef.current = false; 55297 }, []); // Event handler functions. 55298 55299 var selectedItemKeyDownHandlers = (0,external_React_.useMemo)(function () { 55300 var _ref; 55301 55302 return _ref = {}, _ref[keyNavigationPrevious] = function () { 55303 dispatch({ 55304 type: SelectedItemKeyDownNavigationPrevious 55305 }); 55306 }, _ref[keyNavigationNext] = function () { 55307 dispatch({ 55308 type: SelectedItemKeyDownNavigationNext 55309 }); 55310 }, _ref.Delete = function Delete() { 55311 dispatch({ 55312 type: SelectedItemKeyDownDelete 55313 }); 55314 }, _ref.Backspace = function Backspace() { 55315 dispatch({ 55316 type: SelectedItemKeyDownBackspace 55317 }); 55318 }, _ref; 55319 }, [dispatch, keyNavigationNext, keyNavigationPrevious]); 55320 var dropdownKeyDownHandlers = (0,external_React_.useMemo)(function () { 55321 var _ref2; 55322 55323 return _ref2 = {}, _ref2[keyNavigationPrevious] = function (event) { 55324 if (isKeyDownOperationPermitted(event)) { 55325 dispatch({ 55326 type: DropdownKeyDownNavigationPrevious 55327 }); 55328 } 55329 }, _ref2.Backspace = function Backspace(event) { 55330 if (isKeyDownOperationPermitted(event)) { 55331 dispatch({ 55332 type: DropdownKeyDownBackspace 55333 }); 55334 } 55335 }, _ref2; 55336 }
55336, [dispatch, keyNavigationPrevious]); // Getter props. 55337 55338 var getSelectedItemProps = (0,external_React_.useCallback)(function (_temp) { 55339 var _extends2; 55340 55341 var _ref3 = _temp === void 0 ? {} : _temp, 55342 _ref3$refKey = _ref3.refKey, 55343 refKey = _ref3$refKey === void 0 ? 'ref' : _ref3$refKey, 55344 ref = _ref3.ref, 55345 onClick = _ref3.onClick, 55346 onKeyDown = _ref3.onKeyDown, 55347 selectedItem = _ref3.selectedItem, 55348 index = _ref3.index, 55349 rest = objectWithoutPropertiesLoose_objectWithoutPropertiesLoose(_ref3, ["refKey", "ref", "onClick", "onKeyDown", "selectedItem", "index"]); 55350 55351 var latestState = latest.current.state; 55352 var itemIndex = getItemIndex(index, selectedItem, latestState.selectedItems); 55353 55354 if (itemIndex < 0) { 55355 throw new Error('Pass either selectedItem or index in getSelectedItemProps!'); 55356 } 55357 55358 var selectedItemHandleClick = function selectedItemHandleClick() { 55359 dispatch({ 55360 type: SelectedItemClick, 55361 index: index 55362 }); 55363 }; 55364 55365 var selectedItemHandleKeyDown = function selectedItemHandleKeyDown(event) { 55366 var key = normalizeArrowKey(event); 55367 55368 if (key && selectedItemKeyDownHandlers[key]) { 55369 selectedItemKeyDownHandlers[key](event); 55370 } 55371 }; 55372 55373 return extends_extends((_extends2 = {}, _extends2[refKey] = handleRefs(ref, function (selectedItemNode) { 55374 if (selectedItemNode) { 55375 selectedItemRefs.current.push(selectedItemNode); 55376 } 55377 }), _extends2.tabIndex = index === latestState.activeIndex ? 0 : -1, _extends2.onClick = callAllEventHandlers(onClick, selectedItemHandleClick), _extends2.onKeyDown = callAllEventHandlers(onKeyDown, selectedItemHandleKeyDown), _extends2), rest); 55378 }, [dispatch, latest, selectedItemKeyDownHandlers]); 55379 var getDropdownProps = (0,external_React_.useCallback)(function (_temp2, _temp3) { 55380 var _extends3; 55381 55382 var _ref4 = _temp2 === void 0 ? {} : _temp2, 55383 _ref4$refKey = _ref4.refKey, 55384 refKey = _ref4$refKey === void 0 ? 'ref' : _ref4$refKey, 55385 ref = _ref4.ref, 55386 onKeyDown = _ref4.onKeyDown, 55387 onClick = _ref4.onClick, 55388 _ref4$preventKeyActio = _ref4.preventKeyAction, 55389 preventKeyAction = _ref4$preventKeyActio === void 0 ? false : _ref4$preventKeyActio, 55390 rest = objectWithoutPropertiesLoose_objectWithoutPropertiesLoose(_ref4, ["refKey", "ref", "onKeyDown", "onClick", "preventKeyAction"]); 55391 55392 var _ref5 = _temp3 === void 0 ? {} : _temp3, 55393 _ref5$suppressRefErro = _ref5.suppressRefError, 55394 suppressRefError = _ref5$suppressRefErro === void 0 ? false : _ref5$suppressRefErro; 55395 55396 setGetterPropCallInfo('getDropdownProps', suppressRefError, refKey, dropdownRef); 55397 55398 var dropdownHandleKeyDown = function dropdownHandleKeyDown(event) { 55399 var key = normalizeArrowKey(event); 55400 55401 if (key && dropdownKeyDownHandlers[key]) { 55402 dropdownKeyDownHandlers[key](event); 55403 } 55404 }; 55405 55406 var dropdownHandleClick = function dropdownHandleClick() { 55407 dispatch({ 55408 type: DropdownClick 55409 }); 55410 }; 55411 55412 return extends_extends((_extends3 = {}, _extends3[refKey] = handleRefs(ref, function (dropdownNode) { 55413 if (dropdownNode) { 55414 dropdownRef.current = dropdownNode; 55415 } 55416 }), _extends3), !preventKeyAction && { 55417 onKeyDown: callAllEventHandlers(onKeyDown, dropdownHandleKeyDown), 55418 onClick: callAllEventHandlers(onClick, dropdownHandleClick) 55419 }, rest); 55420 }, [dispatch, dropdownKeyDownHandlers, setGetterPropCallInfo]); // returns 55421 55422 var addSelectedItem = (0,external_React_.useCallback)(function (selectedItem) { 55423 dispatch({ 55424 type: FunctionAddSelectedItem, 55425 selectedItem: selectedItem 55426 }); 55427 }, [dispatch]); 55428 var removeSelectedItem = (0,external_React_.useCallback)(function (selectedItem) { 55429 dispatch({ 55430 type: FunctionRemoveSelectedItem, 55431 selectedItem: selectedItem 55432 }); 55433 }, [dispatch]); 55434 var setSelectedItems = (0,external_React_.useCallback)(function (newSelectedItems) { 55435 dispatch({ 55436 type: FunctionSetSelectedItems, 55437 selectedItems: newSelectedItems 55438 }); 55439 }
55439, [dispatch]); 55440 var setActiveIndex = (0,external_React_.useCallback)(function (newActiveIndex) { 55441 dispatch({ 55442 type: FunctionSetActiveIndex, 55443 activeIndex: newActiveIndex 55444 }); 55445 }, [dispatch]); 55446 var reset = (0,external_React_.useCallback)(function () { 55447 dispatch({ 55448 type: FunctionReset$2 55449 }); 55450 }, [dispatch]); 55451 return { 55452 getSelectedItemProps: getSelectedItemProps, 55453 getDropdownProps: getDropdownProps, 55454 addSelectedItem: addSelectedItem, 55455 removeSelectedItem: removeSelectedItem, 55456 setSelectedItems: setSelectedItems, 55457 setActiveIndex: setActiveIndex, 55458 reset: reset, 55459 selectedItems: selectedItems, 55460 activeIndex: activeIndex 55461 }; 55462} 55463 55464/* harmony default export */ const downshift_esm = ((/* unused pure expression or super */ null && (Downshift))); 55465 55466 55467;// CONCATENATED MODULE: ./packages/components/build-module/custom-select-control/styles.js 55468 55469/** 55470 * External dependencies 55471 */ 55472 55473/** 55474 * Internal dependencies 55475 */ 55476 55477 55478const backCompatMinWidth = props => !props.__nextUnconstrainedWidth ? /*#__PURE__*/emotion_react_browser_esm_css(Container, "{min-width:130px;}" + ( true ? "" : 0), true ? "" : 0) : ''; 55479const InputBaseWithBackCompatMinWidth = /*#__PURE__*/emotion_styled_base_browser_esm(input_base, true ? { 55480 target: "eswuck60" 55481} : 0)(backCompatMinWidth, ";" + ( true ? "" : 0)); 55482 55483;// CONCATENATED MODULE: ./packages/components/build-module/custom-select-control/index.js 55484 55485// @ts-nocheck 55486/** 55487 * External dependencies 55488 */ 55489 55490 55491 55492/** 55493 * WordPress dependencies 55494 */ 55495 55496 55497 55498 55499 55500/** 55501 * Internal dependencies 55502 */ 55503 55504 55505 55506 55507 55508const custom_select_control_itemToString = item => item?.name; 55509// This is needed so that in Windows, where 55510// the menu does not necessarily open on 55511// key up/down, you can still switch between 55512// options with the menu closed. 55513const custom_select_control_stateReducer = ({ 55514 selectedItem 55515}, { 55516 type, 55517 changes, 55518 props: { 55519 items 55520 } 55521}) => { 55522 switch (type) { 55523 case useSelect.stateChangeTypes.ToggleButtonKeyDownArrowDown: 55524 // If we already have a selected item, try to select the next one, 55525 // without circular navigation. Otherwise, select the first item. 55526 return { 55527 selectedItem: items[selectedItem ? Math.min(items.indexOf(selectedItem) + 1, items.length - 1) : 0] 55528 }; 55529 case useSelect.stateChangeTypes.ToggleButtonKeyDownArrowUp: 55530 // If we already have a selected item, try to select the previous one, 55531 // without circular navigation. Otherwise, select the last item. 55532 return { 55533 selectedItem: items[selectedItem ? Math.max(items.indexOf(selectedItem) - 1, 0) : items.length - 1] 55534 }; 55535 default: 55536 return changes; 55537 } 55538}; 55539function CustomSelectControl(props) { 55540 const { 55541 /** Start opting into the larger default height that will become the default size in a future version. */ 55542 __next36pxDefaultSize = false, 55543 /** Start opting into the unconstrained width that will become the default in a future version. */ 55544 __nextUnconstrainedWidth = false, 55545 className, 55546 hideLabelFromVision, 55547 label, 55548 describedBy, 55549 options: items, 55550 onChange: onSelectedItemChange, 55551 /** @type {import('../select-control/types').SelectControlProps.size} */ 55552 size = 'default', 55553 value: _selectedItem, 55554 onMouseOver, 55555 onMouseOut, 55556 onFocus, 55557 onBlur, 55558 __experimentalShowSelectedHint = false 55559 } = props; 55560 const { 55561 getLabelProps, 55562 getToggleButtonProps, 55563 getMenuProps, 55564 getItemProps, 55565 isOpen, 55566 highlightedIndex, 55567 selectedItem 55568 } = useSelect({ 55569 initialSelectedItem: items[0], 55570 items, 55571 itemToString: custom_select_control_itemToString, 55572 onSelectedItemChange, 55573 ...(typeof _selectedItem !== 'undefined' && _selectedItem !== null ? { 55574 selectedItem: _selectedItem 55575 } : undefined), 55576 stateReducer: custom_select_control_stateReducer 55577 }); 55578 const [isFocused, setIsFocused] = (0,external_wp_element_namespaceObject.useState)(false); 55579 function handleOnFocus(e) { 55580 setIsFocused(true); 55581 onFocus?.(e); 55582 } 55583 function handleOnBlur(e) { 55584 setIsFocused(false); 55585 onBlur?.(e); 55586 } 55587 if (!__nextUnconstrainedWidth) { 55588 external_wp_deprecated_default()('Constrained width styles for wp.components.CustomSelectControl', { 55589 since: '6.1', 55590 version: '6.4', 55591 hint: 'Set the `__nextUnconstrainedWidth` prop to true to start opting into the new styles, which will become the default in a future version' 55592 }); 55593 } 55594 function getDescribedBy() { 55595 if (describedBy) { 55596 return describedBy; 55597 } 55598 if (!selectedItem) { 55599 return (0,external_wp_i18n_namespaceObject.__)('No selection'); 55600 } 55601 55602 // translators: %s: The selected option. 55603 return (0,external_wp_i18n_namespaceObject.sprintf)((0,external_wp_i18n_namespaceObject.__)('Currently selected: %s'), selectedItem.name); 55604 } 55605 const menuProps = getMenuProps({ 55606 className: 'components-custom-select-control__menu', 55607 'aria-hidden': !isOpen 55608 });
55609 const onKeyDownHandler = (0,external_wp_element_namespaceObject.useCallback)(e => { 55610 e.stopPropagation(); 55611 menuProps?.onKeyDown?.(e); 55612 }, [menuProps]); 55613 55614 // We need this here, because the null active descendant is not fully ARIA compliant. 55615 if (menuProps['aria-activedescendant']?.startsWith('downshift-null')) { 55616 delete menuProps['aria-activedescendant']; 55617 } 55618 return (0,external_wp_element_namespaceObject.createElement)("div", { 55619 className: classnames_default()('components-custom-select-control', className) 55620 }, hideLabelFromVision ? (0,external_wp_element_namespaceObject.createElement)(visually_hidden_component, { 55621 as: "label", 55622 ...getLabelProps() 55623 }, label) : /* eslint-disable-next-line jsx-a11y/label-has-associated-control, jsx-a11y/label-has-for */ 55624 (0,external_wp_element_namespaceObject.createElement)(StyledLabel, { 55625 ...getLabelProps({ 55626 className: 'components-custom-select-control__label' 55627 }) 55628 }, label), (0,external_wp_element_namespaceObject.createElement)(InputBaseWithBackCompatMinWidth, { 55629 __next36pxDefaultSize: __next36pxDefaultSize, 55630 __nextUnconstrainedWidth: __nextUnconstrainedWidth, 55631 isFocused: isOpen || isFocused, 55632 __unstableInputWidth: __nextUnconstrainedWidth ? undefined : 'auto', 55633 labelPosition: __nextUnconstrainedWidth ? undefined : 'top', 55634 size: size, 55635 suffix: (0,external_wp_element_namespaceObject.createElement)(select_control_chevron_down, null) 55636 }, (0,external_wp_element_namespaceObject.createElement)(Select, { 55637 onMouseOver: onMouseOver, 55638 onMouseOut: onMouseOut, 55639 as: "button", 55640 onFocus: handleOnFocus, 55641 onBlur: handleOnBlur, 55642 selectSize: size, 55643 __next36pxDefaultSize: __next36pxDefaultSize, 55644 ...getToggleButtonProps({ 55645 // This is needed because some speech recognition software don't support `aria-labelledby`. 55646 'aria-label': label, 55647 'aria-labelledby': undefined, 55648 className: 'components-custom-select-control__button', 55649 describedBy: getDescribedBy() 55650 }) 55651 }, custom_select_control_itemToString(selectedItem), __experimentalShowSelectedHint && selectedItem.__experimentalHint && (0,external_wp_element_namespaceObject.createElement)("span", { 55652 className: "components-custom-select-control__hint" 55653 }, selectedItem.__experimentalHint))), (0,external_wp_element_namespaceObject.createElement)("ul", { 55654 ...menuProps,
55655 onKeyDown: onKeyDownHandler 55656 }, isOpen && items.map((item, index) => 55657 // eslint-disable-next-line react/jsx-key 55658 (0,external_wp_element_namespaceObject.createElement)("li", { 55659 ...getItemProps({ 55660 item, 55661 index, 55662 key: item.key, 55663 className: classnames_default()(item.className, 'components-custom-select-control__item', { 55664 'is-highlighted': index === highlightedIndex, 55665 'has-hint': !!item.__experimentalHint, 55666 'is-next-36px-default-size': __next36pxDefaultSize 55667 }), 55668 style: item.style 55669 }) 55670 }, item.name, item.__experimentalHint && (0,external_wp_element_namespaceObject.createElement)("span", { 55671 className: "components-custom-select-control__item-hint" 55672 }, item.__experimentalHint), item === selectedItem && (0,external_wp_element_namespaceObject.createElement)(icons_build_module_icon, { 55673 icon: library_check, 55674 className: "components-custom-select-control__item-icon" 55675 }))))); 55676} 55677function StableCustomSelectControl(props) { 55678 return (0,external_wp_element_namespaceObject.createElement)(CustomSelectControl, { 55679 ...props, 55680 __experimentalShowSelectedHint: false 55681 }); 55682} 55683 55684;// CONCATENATED MODULE: ./node_modules/use-lilius/build/index.es.js 55685 55686 55687function toInteger(dirtyNumber) { 55688 if (dirtyNumber === null || dirtyNumber === true || dirtyNumber === false) { 55689 return NaN; 55690 } 55691 55692 var number = Number(dirtyNumber); 55693 55694 if (isNaN(number)) { 55695 return number; 55696 } 55697 55698 return number < 0 ? Math.ceil(number) : Math.floor(number); 55699} 55700 55701function requiredArgs(required, args) { 55702 if (args.length < required) { 55703 throw new TypeError(required + ' argument' + (required > 1 ? 's' : '') + ' required, but only ' + args.length + ' present'); 55704 } 55705} 55706 55707/** 55708 * @name toDate 55709 * @category Common Helpers 55710 * @summary Convert the given argument to an instance of Date. 55711 * 55712 * @description 55713 * Convert the given argument to an instance of Date. 55714 * 55715 * If the argument is an instance of Date, the function returns its clone. 55716 * 55717 * If the argument is a number, it is treated as a timestamp. 55718 * 55719 * If the argument is none of the above, the function returns Invalid Date. 55720 * 55721 * **Note**: *all* Date arguments passed to any *date-fns* function is processed by `toDate`. 55722 * 55723 * @param {Date|Number} argument - the value to convert 55724 * @returns {Date} the parsed date in the local time zone 55725 * @throws {TypeError} 1 argument required 55726 * 55727 * @example 55728 * // Clone the date: 55729 * const result = toDate(new Date(2014, 1, 11, 11, 30, 30)) 55730 * //=> Tue Feb 11 2014 11:30:30 55731 * 55732 * @example 55733 * // Convert the timestamp to date: 55734 * const result = toDate(1392098430000) 55735 * //=> Tue Feb 11 2014 11:30:30 55736 */ 55737 55738function toDate(argument) { 55739 requiredArgs(1, arguments); 55740 var argStr = Object.prototype.toString.call(argument); // Clone the date 55741 55742 if (argument instanceof Date || typeof argument === 'object' && argStr === '[object Date]') { 55743 // Prevent the date to lose the milliseconds when passed to new Date() in IE10 55744 return new Date(argument.getTime()); 55745 } else if (typeof argument === 'number' || argStr === '[object Number]') { 55746 return new Date(argument); 55747 } else { 55748 if ((typeof argument === 'string' || argStr === '[object String]') && typeof console !== 'undefined') { 55749 // eslint-disable-next-line no-console 55750 console.warn("Starting with v2.0.0-beta.1 date-fns doesn't accept strings as date arguments. Please use `parseISO` to parse strings. See: https://git.io/fjule"); // eslint-disable-next-line no-console 55751 55752 console.warn(new Error().stack); 55753 } 55754 55755 return new Date(NaN); 55756 } 55757} 55758 55759/** 55760 * @name addDays 55761 * @category Day Helpers 55762 * @summary Add the specified number of days to the given date. 55763 * 55764 * @description 55765 * Add the specified number of days to the given date. 55766 * 55767 * ### v2.0.0 breaking changes: 55768 * 55769 * - [Changes that are common for the whole library](https://github.com/date-fns/date-fns/blob/master/docs/upgradeGuide.md#Common-Changes). 55770 * 55771 * @param {Date|Number} date - the date to be changed 55772 * @param {Number} amount - the amount of days to be added. Positive decimals will be rounded using `Math.floor`, decimals less than zero will be rounded using `Math.ceil`. 55773 * @returns {Date} - the new date with the days added 55774 * @throws {TypeError} - 2 arguments required 55775 * 55776 * @example 55777 * // Add 10 days to 1 September 2014: 55778 * const result = addDays(new Date(2014, 8, 1), 10) 55779 * //=> Thu Sep 11 2014 00:00:00 55780 */ 55781 55782function addDays(dirtyDate, dirtyAmount) { 55783 requiredArgs(2, arguments);
vendor: 4,971 bytes, lines 55784-55910
55784 var date = toDate(dirtyDate); 55785 var amount = toInteger(dirtyAmount); 55786 55787 if (isNaN(amount)) { 55788 return new Date(NaN); 55789 } 55790 55791 if (!amount) { 55792 // If 0 days, no-op to avoid changing times in the hour before end of DST 55793 return date; 55794 } 55795 55796 date.setDate(date.getDate() + amount); 55797 return date; 55798} 55799 55800/** 55801 * @name addMonths 55802 * @category Month Helpers 55803 * @summary Add the specified number of months to the given date. 55804 * 55805 * @description 55806 * Add the specified number of months to the given date. 55807 * 55808 * ### v2.0.0 breaking changes: 55809 * 55810 * - [Changes that are common for the whole library](https://github.com/date-fns/date-fns/blob/master/docs/upgradeGuide.md#Common-Changes). 55811 * 55812 * @param {Date|Number} date - the date to be changed 55813 * @param {Number} amount - the amount of months to be added. Positive decimals will be rounded using `Math.floor`, decimals less than zero will be rounded using `Math.ceil`. 55814 * @returns {Date} the new date with the months added 55815 * @throws {TypeError} 2 arguments required 55816 * 55817 * @example 55818 * // Add 5 months to 1 September 2014: 55819 * const result = addMonths(new Date(2014, 8, 1), 5) 55820 * //=> Sun Feb 01 2015 00:00:00 55821 */ 55822 55823function addMonths(dirtyDate, dirtyAmount) { 55824 requiredArgs(2, arguments); 55825 var date = toDate(dirtyDate); 55826 var amount = toInteger(dirtyAmount); 55827 55828 if (isNaN(amount)) { 55829 return new Date(NaN); 55830 } 55831 55832 if (!amount) { 55833 // If 0 months, no-op to avoid changing times in the hour before end of DST 55834 return date; 55835 } 55836 55837 var dayOfMonth = date.getDate(); // The JS Date object supports date math by accepting out-of-bounds values for 55838 // month, day, etc. For example, new Date(2020, 0, 0) returns 31 Dec 2019 and 55839 // new Date(2020, 13, 1) returns 1 Feb 2021. This is *almost* the behavior we 55840 // want except that dates will wrap around the end of a month, meaning that 55841 // new Date(2020, 13, 31) will return 3 Mar 2021 not 28 Feb 2021 as desired. So 55842 // we'll default to the end of the desired month by adding 1 to the desired 55843 // month and using a date of 0 to back up one day to the end of the desired 55844 // month. 55845 55846 var endOfDesiredMonth = new Date(date.getTime()); 55847 endOfDesiredMonth.setMonth(date.getMonth() + amount + 1, 0); 55848 var daysInMonth = endOfDesiredMonth.getDate(); 55849 55850 if (dayOfMonth >= daysInMonth) { 55851 // If we're already at the end of the month, then this is the correct date 55852 // and we're done. 55853 return endOfDesiredMonth; 55854 } else { 55855 // Otherwise, we now know that setting the original day-of-month value won't 55856 // cause an overflow, so set the desired day-of-month. Note that we can't 55857 // just set the date of `endOfDesiredMonth` because that object may have had 55858 // its time changed in the unusual case where where a DST transition was on 55859 // the last day of the month and its local time was in the hour skipped or 55860 // repeated next to a DST transition. So we use `date` instead which is 55861 // guaranteed to still have the original time. 55862 date.setFullYear(endOfDesiredMonth.getFullYear(), endOfDesiredMonth.getMonth(), dayOfMonth); 55863 return date; 55864 } 55865} 55866 55867/** 55868 * @name startOfWeek 55869 * @category Week Helpers 55870 * @summary Return the start of a week for the given date. 55871 * 55872 * @description 55873 * Return the start of a week for the given date. 55874 * The result will be in the local timezone. 55875 * 55876 * ### v2.0.0 breaking changes: 55877 * 55878 * - [Changes that are common for the whole library](https://github.com/date-fns/date-fns/blob/master/docs/upgradeGuide.md#Common-Changes). 55879 * 55880 * @param {Date|Number} date - the original date 55881 * @param {Object} [options] - an object with options. 55882 * @param {Locale} [options.locale=defaultLocale] - the locale object. See [Locale]{@link https://date-fns.org/docs/Locale} 55883 * @param {0|1|2|3|4|5|6} [options.weekStartsOn=0] - the index of the first day of the week (0 - Sunday) 55884 * @returns {Date} the start of a week 55885 * @throws {TypeError} 1 argument required 55886 * @throws {RangeError} `options.weekStartsOn` must be between 0 and 6 55887 * 55888 * @example 55889 * // The start of a week for 2 September 2014 11:55:00: 55890 * const result = startOfWeek(new Date(2014, 8, 2, 11, 55, 0)) 55891 * //=> Sun Aug 31 2014 00:00:00 55892 * 55893 * @example 55894 * // If the week starts on Monday, the start of the week for 2 September 2014 11:55:00: 55895 * const result = startOfWeek(new Date(2014, 8, 2, 11, 55, 0), { weekStartsOn: 1 }) 55896 * //=> Mon Sep 01 2014 00:00:00 55897 */ 55898 55899function startOfWeek(dirtyDate, dirtyOptions) { 55900 requiredArgs(1, arguments); 55901 var options = dirtyOptions || {}; 55902 var locale = options.locale; 55903 var localeWeekStartsOn = locale && locale.options && locale.options.weekStartsOn; 55904 var defaultWeekStartsOn = localeWeekStartsOn == null ? 0 : toInteger(localeWeekStartsOn); 55905 var weekStartsOn = options.weekStartsOn == null ? defaultWeekStartsOn : toInteger(options.weekStartsOn); // Test if weekStartsOn is between 0 and 6 _and_ is not NaN 55906 55907 if (!(weekStartsOn >= 0 && weekStartsOn <= 6)) { 55908 throw new RangeError('weekStartsOn must be between 0 and 6 inclusively'); 55909 } 55910
vendor: 6,201 bytes, lines 55911-56101
55911 var date = toDate(dirtyDate); 55912 var day = date.getDay(); 55913 var diff = (day < weekStartsOn ? 7 : 0) + day - weekStartsOn; 55914 date.setDate(date.getDate() - diff); 55915 date.setHours(0, 0, 0, 0); 55916 return date; 55917} 55918 55919/** 55920 * @name startOfDay 55921 * @category Day Helpers 55922 * @summary Return the start of a day for the given date. 55923 * 55924 * @description 55925 * Return the start of a day for the given date. 55926 * The result will be in the local timezone. 55927 * 55928 * ### v2.0.0 breaking changes: 55929 * 55930 * - [Changes that are common for the whole library](https://github.com/date-fns/date-fns/blob/master/docs/upgradeGuide.md#Common-Changes). 55931 * 55932 * @param {Date|Number} date - the original date 55933 * @returns {Date} the start of a day 55934 * @throws {TypeError} 1 argument required 55935 * 55936 * @example 55937 * // The start of a day for 2 September 2014 11:55:00: 55938 * const result = startOfDay(new Date(2014, 8, 2, 11, 55, 0)) 55939 * //=> Tue Sep 02 2014 00:00:00 55940 */ 55941 55942function startOfDay(dirtyDate) { 55943 requiredArgs(1, arguments); 55944 var date = toDate(dirtyDate); 55945 date.setHours(0, 0, 0, 0); 55946 return date; 55947} 55948 55949/** 55950 * @name addWeeks 55951 * @category Week Helpers 55952 * @summary Add the specified number of weeks to the given date. 55953 * 55954 * @description 55955 * Add the specified number of week to the given date. 55956 * 55957 * ### v2.0.0 breaking changes: 55958 * 55959 * - [Changes that are common for the whole library](https://github.com/date-fns/date-fns/blob/master/docs/upgradeGuide.md#Common-Changes). 55960 * 55961 * @param {Date|Number} date - the date to be changed 55962 * @param {Number} amount - the amount of weeks to be added. Positive decimals will be rounded using `Math.floor`, decimals less than zero will be rounded using `Math.ceil`. 55963 * @returns {Date} the new date with the weeks added 55964 * @throws {TypeError} 2 arguments required 55965 * 55966 * @example 55967 * // Add 4 weeks to 1 September 2014: 55968 * const result = addWeeks(new Date(2014, 8, 1), 4) 55969 * //=> Mon Sep 29 2014 00:00:00 55970 */ 55971 55972function addWeeks(dirtyDate, dirtyAmount) { 55973 requiredArgs(2, arguments); 55974 var amount = toInteger(dirtyAmount); 55975 var days = amount * 7; 55976 return addDays(dirtyDate, days); 55977} 55978 55979/** 55980 * @name addYears 55981 * @category Year Helpers 55982 * @summary Add the specified number of years to the given date. 55983 * 55984 * @description 55985 * Add the specified number of years to the given date. 55986 * 55987 * ### v2.0.0 breaking changes: 55988 * 55989 * - [Changes that are common for the whole library](https://github.com/date-fns/date-fns/blob/master/docs/upgradeGuide.md#Common-Changes). 55990 * 55991 * @param {Date|Number} date - the date to be changed 55992 * @param {Number} amount - the amount of years to be added. Positive decimals will be rounded using `Math.floor`, decimals less than zero will be rounded using `Math.ceil`. 55993 * @returns {Date} the new date with the years added 55994 * @throws {TypeError} 2 arguments required 55995 * 55996 * @example 55997 * // Add 5 years to 1 September 2014: 55998 * const result = addYears(new Date(2014, 8, 1), 5) 55999 * //=> Sun Sep 01 2019 00:00:00 56000 */ 56001 56002function addYears(dirtyDate, dirtyAmount) { 56003 requiredArgs(2, arguments); 56004 var amount = toInteger(dirtyAmount); 56005 return addMonths(dirtyDate, amount * 12); 56006} 56007 56008/** 56009 * @name endOfMonth 56010 * @category Month Helpers 56011 * @summary Return the end of a month for the given date. 56012 * 56013 * @description 56014 * Return the end of a month for the given date. 56015 * The result will be in the local timezone. 56016 * 56017 * ### v2.0.0 breaking changes: 56018 * 56019 * - [Changes that are common for the whole library](https://github.com/date-fns/date-fns/blob/master/docs/upgradeGuide.md#Common-Changes). 56020 * 56021 * @param {Date|Number} date - the original date 56022 * @returns {Date} the end of a month 56023 * @throws {TypeError} 1 argument required 56024 * 56025 * @example 56026 * // The end of a month for 2 September 2014 11:55:00: 56027 * const result = endOfMonth(new Date(2014, 8, 2, 11, 55, 0)) 56028 * //=> Tue Sep 30 2014 23:59:59.999 56029 */ 56030 56031function endOfMonth(dirtyDate) { 56032 requiredArgs(1, arguments); 56033 var date = toDate(dirtyDate); 56034 var month = date.getMonth(); 56035 date.setFullYear(date.getFullYear(), month + 1, 0); 56036 date.setHours(23, 59, 59, 999); 56037 return date; 56038} 56039 56040/** 56041 * @name eachDayOfInterval 56042 * @category Interval Helpers 56043 * @summary Return the array of dates within the specified time interval. 56044 * 56045 * @description 56046 * Return the array of dates within the specified time interval. 56047 * 56048 * ### v2.0.0 breaking changes: 56049 * 56050 * - [Changes that are common for the whole library](https://github.com/date-fns/date-fns/blob/master/docs/upgradeGuide.md#Common-Changes). 56051 * 56052 * - The function was renamed from `eachDay` to `eachDayOfInterval`. 56053 * This change was made to mirror the use of the word "interval" in standard ISO 8601:2004 terminology: 56054 * 56055 * ``` 56056 * 2.1.3 56057 * time interval 56058 * part of the time axis limited by two instants 56059 * ``` 56060 * 56061 * Also, this function now accepts an object with `start` and `end` properties 56062 * instead of two arguments as an interval. 56063 * This function now throws `RangeError` if the start of the interval is after its end 56064 * or if any date in the interval is `Invalid Date`. 56065 * 56066 * ```javascript 56067 * // Before v2.0.0 56068 * 56069 * eachDay(new Date(2014, 0, 10), new Date(2014, 0, 20)) 56070 * 56071 * // v2.0.0 onward 56072 * 56073 * eachDayOfInterval( 56074 * { start: new Date(2014, 0, 10), end: new Date(2014, 0, 20) } 56075 * ) 56076 * ``` 56077 * 56078 * @param {Interval} interval - the interval. See [Interval]{@link https://date-fns.org/docs/Interval} 56079 * @param {Object} [options] - an object with options. 56080 * @param {Number} [options.step=1] - the step to increment by. The value should be more than 1. 56081 * @returns {Date[]} the array with starts of days from the day of the interval start to the day of the interval end 56082 * @throws {TypeError} 1 argument required 56083 * @throws {RangeError} `options.step` must be a number greater than 1 56084 * @throws {RangeError} The start of an interval cannot be after its end 56085 * @throws {RangeError} Date in interval cannot be `Invalid Date` 56086 * 56087 * @example 56088 * // Each day between 6 October 2014 and 10 October 2014: 56089 * const result = eachDayOfInterval({ 56090 * start: new Date(2014, 9, 6), 56091 * end: new Date(2014, 9, 10) 56092 * }) 56093 * //=> [ 56094 * // Mon Oct 06 2014 00:00:00, 56095 * // Tue Oct 07 2014 00:00:00, 56096 * // Wed Oct 08 2014 00:00:00, 56097 * // Thu Oct 09 2014 00:00:00, 56098 * // Fri Oct 10 2014 00:00:00 56099 * // ] 56100 */ 56101
56102function eachDayOfInterval(dirtyInterval, options) { 56103 requiredArgs(1, arguments); 56104 var interval = dirtyInterval || {}; 56105 var startDate = toDate(interval.start); 56106 var endDate = toDate(interval.end); 56107 var endTime = endDate.getTime(); // Throw an exception if start date is after end date or if any date is `Invalid Date` 56108 56109 if (!(startDate.getTime() <= endTime)) { 56110 throw new RangeError('Invalid interval'); 56111 } 56112 56113 var dates = []; 56114 var currentDate = startDate; 56115 currentDate.setHours(0, 0, 0, 0); 56116 var step = options && 'step' in options ? Number(options.step) : 1; 56117 if (step < 1 || isNaN(step)) throw new RangeError('`options.step` must be a number greater than 1'); 56118 56119 while (currentDate.getTime() <= endTime) { 56120 dates.push(toDate(currentDate)); 56121 currentDate.setDate(currentDate.getDate() + step); 56122 currentDate.setHours(0, 0, 0, 0); 56123 } 56124 56125 return dates; 56126} 56127 56128/** 56129 * @name eachMonthOfInterval 56130 * @category Interval Helpers 56131 * @summary Return the array of months within the specified time interval. 56132 * 56133 * @description 56134 * Return the array of months within the specified time interval. 56135 * 56136 * @param {Interval} interval - the interval. See [Interval]{@link https://date-fns.org/docs/Interval} 56137 * @returns {Date[]} the array with starts of months from the month of the interval start to the month of the interval end 56138 * @throws {TypeError} 1 argument required 56139 * @throws {RangeError} The start of an interval cannot be after its end 56140 * @throws {RangeError} Date in interval cannot be `Invalid Date` 56141 * 56142 * @example 56143 * // Each month between 6 February 2014 and 10 August 2014: 56144 * var result = eachMonthOfInterval({ 56145 * start: new Date(2014, 1, 6), 56146 * end: new Date(2014, 7, 10) 56147 * }) 56148 * //=> [ 56149 * // Sat Feb 01 2014 00:00:00, 56150 * // Sat Mar 01 2014 00:00:00, 56151 * // Tue Apr 01 2014 00:00:00, 56152 * // Thu May 01 2014 00:00:00, 56153 * // Sun Jun 01 2014 00:00:00, 56154 * // Tue Jul 01 2014 00:00:00, 56155 * // Fri Aug 01 2014 00:00:00 56156 * // ] 56157 */ 56158 56159function eachMonthOfInterval(dirtyInterval) { 56160 requiredArgs(1, arguments); 56161 var interval = dirtyInterval || {}; 56162 var startDate = toDate(interval.start); 56163 var endDate = toDate(interval.end); 56164 var endTime = endDate.getTime(); 56165 var dates = []; // Throw an exception if start date is after end date or if any date is `Invalid Date` 56166 56167 if (!(startDate.getTime() <= endTime)) { 56168 throw new RangeError('Invalid interval'); 56169 } 56170 56171 var currentDate = startDate; 56172 currentDate.setHours(0, 0, 0, 0); 56173 currentDate.setDate(1); 56174 56175 while (currentDate.getTime() <= endTime) { 56176 dates.push(toDate(currentDate)); 56177 currentDate.setMonth(currentDate.getMonth() + 1); 56178 } 56179 56180 return dates; 56181} 56182 56183/** 56184 * @name eachWeekOfInterval 56185 * @category Interval Helpers 56186 * @summary Return the array of weeks within the specified time interval. 56187 * 56188 * @description 56189 * Return the array of weeks within the specified time interval. 56190 * 56191 * ### v2.0.0 breaking changes: 56192 * 56193 * - [Changes that are common for the whole library](https://github.com/date-fns/date-fns/blob/master/docs/upgradeGuide.md#Common-Changes). 56194 * 56195 * @param {Interval} interval - the interval. See [Interval]{@link https://date-fns.org/docs/Interval} 56196 * @param {Object} [options] - an object with options. 56197 * @param {Locale} [options.locale=defaultLocale] - the locale object. See [Locale]{@link https://date-fns.org/docs/Locale} 56198 * @param {0|1|2|3|4|5|6} [options.weekStartsOn=0] - the index of the first day of the week (0 - Sunday) 56199 * @returns {Date[]} the array with starts of weeks from the week of the interval start to the week of the interval end 56200 * @throws {TypeError} 1 argument required 56201 * @throws {RangeError} `options.weekStartsOn` must be 0, 1, ..., 6 56202 * @throws {RangeError} The start of an interval cannot be after its end 56203 * @throws {RangeError} Date in interval cannot be `Invalid Date` 56204 * 56205 * @example 56206 * // Each week within interval 6 October 2014 - 23 November 2014: 56207 * var result = eachWeekOfInterval({ 56208 * start: new Date(2014, 9, 6), 56209 * end: new Date(2014, 10, 23) 56210 * }) 56211 * //=> [ 56212 * // Sun Oct 05 2014 00:00:00, 56213 * // Sun Oct 12 2014 00:00:00, 56214 * // Sun Oct 19 2014 00:00:00, 56215 * // Sun Oct 26 2014 00:00:00, 56216 * // Sun Nov 02 2014 00:00:00, 56217 * // Sun Nov 09 2014 00:00:00, 56218 * // Sun Nov 16 2014 00:00:00, 56219 * // Sun Nov 23 2014 00:00:00 56220 * // ] 56221 */ 56222 56223function eachWeekOfInterval(dirtyInterval, options) { 56224 requiredArgs(1, arguments); 56225 var interval = dirtyInterval || {}; 56226 var startDate = toDate(interval.start); 56227 var endDate = toDate(interval.end); 56228 var endTime = endDate.getTime(); // Throw an exception if start date is after end date or if any date is `Invalid Date` 56229 56230 if (!(startDate.getTime() <= endTime)) { 56231 throw new RangeError('Invalid interval'); 56232 } 56233 56234 var startDateWeek = startOfWeek(startDate, options); 56235 var endDateWeek = startOfWeek(endDate, options); // Some timezones switch DST at midnight, making start of day unreliable in these timezones, 3pm is a safe bet 56236 56237 startDateWeek.setHours(15); 56238 endDateWeek.setHours(15); 56239 endTime = endDateWeek.getTime(); 56240 var weeks = []; 56241 var currentWeek = startDateWeek; 56242 56243 while (currentWeek.getTime() <= endTime) { 56244 currentWeek.setHours(0); 56245 weeks.push(toDate(currentWeek)); 56246 currentWeek = addWeeks(currentWeek, 1); 56247 currentWeek.setHours(15); 56248 } 56249 56250 return weeks; 56251} 56252 56253/** 56254 * @name startOfMonth 56255 * @category Month Helpers 56256 * @summary Return the start of a month for the given date. 56257 * 56258 * @description 56259 * Return the start of a month for the given date. 56260 * The result will be in the local timezone. 56261 * 56262 * ### v2.0.0 breaking changes: 56263 * 56264 * - [Changes that are common for the whole library](https://github.com/date-fns/date-fns/blob/master/docs/upgradeGuide.md#Common-Changes). 56265 * 56266 * @param {Date|Number} date - the original date 56267 * @returns {Date} the start of a month 56268 * @throws {TypeError} 1 argument required 56269 * 56270 * @example 56271 * // The start of a month for 2 September 2014 11:55:00: 56272 * const result = startOfMonth(new Date(2014, 8, 2, 11, 55, 0)) 56273 * //=> Mon Sep 01 2014 00:00:00 56274 */ 56275 56276function startOfMonth(dirtyDate) { 56277 requiredArgs(1, arguments);
vendor: 5,060 bytes, lines 56278-56421
56278 var date = toDate(dirtyDate); 56279 date.setDate(1); 56280 date.setHours(0, 0, 0, 0); 56281 return date; 56282} 56283 56284/** 56285 * @name endOfWeek 56286 * @category Week Helpers 56287 * @summary Return the end of a week for the given date. 56288 * 56289 * @description 56290 * Return the end of a week for the given date. 56291 * The result will be in the local timezone. 56292 * 56293 * ### v2.0.0 breaking changes: 56294 * 56295 * - [Changes that are common for the whole library](https://github.com/date-fns/date-fns/blob/master/docs/upgradeGuide.md#Common-Changes). 56296 * 56297 * @param {Date|Number} date - the original date 56298 * @param {Object} [options] - an object with options. 56299 * @param {Locale} [options.locale=defaultLocale] - the locale object. See [Locale]{@link https://date-fns.org/docs/Locale} 56300 * @param {0|1|2|3|4|5|6} [options.weekStartsOn=0] - the index of the first day of the week (0 - Sunday) 56301 * @returns {Date} the end of a week 56302 * @throws {TypeError} 1 argument required 56303 * @throws {RangeError} `options.weekStartsOn` must be between 0 and 6 56304 * 56305 * @example 56306 * // The end of a week for 2 September 2014 11:55:00: 56307 * const result = endOfWeek(new Date(2014, 8, 2, 11, 55, 0)) 56308 * //=> Sat Sep 06 2014 23:59:59.999 56309 * 56310 * @example 56311 * // If the week starts on Monday, the end of the week for 2 September 2014 11:55:00: 56312 * const result = endOfWeek(new Date(2014, 8, 2, 11, 55, 0), { weekStartsOn: 1 }) 56313 * //=> Sun Sep 07 2014 23:59:59.999 56314 */ 56315function endOfWeek(dirtyDate, dirtyOptions) { 56316 requiredArgs(1, arguments); 56317 var options = dirtyOptions || {}; 56318 var locale = options.locale; 56319 var localeWeekStartsOn = locale && locale.options && locale.options.weekStartsOn; 56320 var defaultWeekStartsOn = localeWeekStartsOn == null ? 0 : toInteger(localeWeekStartsOn); 56321 var weekStartsOn = options.weekStartsOn == null ? defaultWeekStartsOn : toInteger(options.weekStartsOn); // Test if weekStartsOn is between 0 and 6 _and_ is not NaN 56322 56323 if (!(weekStartsOn >= 0 && weekStartsOn <= 6)) { 56324 throw new RangeError('weekStartsOn must be between 0 and 6 inclusively'); 56325 } 56326 56327 var date = toDate(dirtyDate); 56328 var day = date.getDay(); 56329 var diff = (day < weekStartsOn ? -7 : 0) + 6 - (day - weekStartsOn); 56330 date.setDate(date.getDate() + diff); 56331 date.setHours(23, 59, 59, 999); 56332 return date; 56333} 56334 56335/** 56336 * @name getDaysInMonth 56337 * @category Month Helpers 56338 * @summary Get the number of days in a month of the given date. 56339 * 56340 * @description 56341 * Get the number of days in a month of the given date. 56342 * 56343 * ### v2.0.0 breaking changes: 56344 * 56345 * - [Changes that are common for the whole library](https://github.com/date-fns/date-fns/blob/master/docs/upgradeGuide.md#Common-Changes). 56346 * 56347 * @param {Date|Number} date - the given date 56348 * @returns {Number} the number of days in a month 56349 * @throws {TypeError} 1 argument required 56350 * 56351 * @example 56352 * // How many days are in February 2000? 56353 * const result = getDaysInMonth(new Date(2000, 1)) 56354 * //=> 29 56355 */ 56356 56357function getDaysInMonth(dirtyDate) { 56358 requiredArgs(1, arguments); 56359 var date = toDate(dirtyDate); 56360 var year = date.getFullYear(); 56361 var monthIndex = date.getMonth(); 56362 var lastDayOfMonth = new Date(0); 56363 lastDayOfMonth.setFullYear(year, monthIndex + 1, 0); 56364 lastDayOfMonth.setHours(0, 0, 0, 0); 56365 return lastDayOfMonth.getDate(); 56366} 56367 56368/** 56369 * @name subMonths 56370 * @category Month Helpers 56371 * @summary Subtract the specified number of months from the given date. 56372 * 56373 * @description 56374 * Subtract the specified number of months from the given date. 56375 * 56376 * ### v2.0.0 breaking changes: 56377 * 56378 * - [Changes that are common for the whole library](https://github.com/date-fns/date-fns/blob/master/docs/upgradeGuide.md#Common-Changes). 56379 * 56380 * @param {Date|Number} date - the date to be changed 56381 * @param {Number} amount - the amount of months to be subtracted. Positive decimals will be rounded using `Math.floor`, decimals less than zero will be rounded using `Math.ceil`. 56382 * @returns {Date} the new date with the months subtracted 56383 * @throws {TypeError} 2 arguments required 56384 * 56385 * @example 56386 * // Subtract 5 months from 1 February 2015: 56387 * const result = subMonths(new Date(2015, 1, 1), 5) 56388 * //=> Mon Sep 01 2014 00:00:00 56389 */ 56390 56391function subMonths(dirtyDate, dirtyAmount) { 56392 requiredArgs(2, arguments); 56393 var amount = toInteger(dirtyAmount); 56394 return addMonths(dirtyDate, -amount); 56395} 56396 56397/** 56398 * @name isAfter 56399 * @category Common Helpers 56400 * @summary Is the first date after the second one? 56401 * 56402 * @description 56403 * Is the first date after the second one? 56404 * 56405 * ### v2.0.0 breaking changes: 56406 * 56407 * - [Changes that are common for the whole library](https://github.com/date-fns/date-fns/blob/master/docs/upgradeGuide.md#Common-Changes). 56408 * 56409 * @param {Date|Number} date - the date that should be after the other one to return true 56410 * @param {Date|Number} dateToCompare - the date to compare with 56411 * @returns {Boolean} the first date is after the second date 56412 * @throws {TypeError} 2 arguments required 56413 * 56414 * @example 56415 * // Is 10 July 1989 after 11 February 1987? 56416 * var result = isAfter(new Date(1989, 6, 10), new Date(1987, 1, 11)) 56417 * //=> true 56418 */ 56419 56420function isAfter(dirtyDate, dirtyDateToCompare) { 56421 requiredArgs(2, arguments);
56422 var date = toDate(dirtyDate); 56423 var dateToCompare = toDate(dirtyDateToCompare); 56424 return date.getTime() > dateToCompare.getTime(); 56425} 56426 56427/** 56428 * @name isBefore 56429 * @category Common Helpers 56430 * @summary Is the first date before the second one? 56431 * 56432 * @description 56433 * Is the first date before the second one? 56434 * 56435 * ### v2.0.0 breaking changes: 56436 * 56437 * - [Changes that are common for the whole library](https://github.com/date-fns/date-fns/blob/master/docs/upgradeGuide.md#Common-Changes). 56438 * 56439 * @param {Date|Number} date - the date that should be before the other one to return true 56440 * @param {Date|Number} dateToCompare - the date to compare with 56441 * @returns {Boolean} the first date is before the second date 56442 * @throws {TypeError} 2 arguments required 56443 * 56444 * @example 56445 * // Is 10 July 1989 before 11 February 1987? 56446 * var result = isBefore(new Date(1989, 6, 10), new Date(1987, 1, 11)) 56447 * //=> false 56448 */ 56449 56450function isBefore(dirtyDate, dirtyDateToCompare) { 56451 requiredArgs(2, arguments); 56452 var date = toDate(dirtyDate); 56453 var dateToCompare = toDate(dirtyDateToCompare); 56454 return date.getTime() < dateToCompare.getTime(); 56455} 56456 56457/** 56458 * @name isEqual 56459 * @category Common Helpers 56460 * @summary Are the given dates equal? 56461 * 56462 * @description 56463 * Are the given dates equal? 56464 * 56465 * ### v2.0.0 breaking changes: 56466 * 56467 * - [Changes that are common for the whole library](https://github.com/date-fns/date-fns/blob/master/docs/upgradeGuide.md#Common-Changes). 56468 * 56469 * @param {Date|Number} dateLeft - the first date to compare 56470 * @param {Date|Number} dateRight - the second date to compare 56471 * @returns {Boolean} the dates are equal 56472 * @throws {TypeError} 2 arguments required 56473 * 56474 * @example 56475 * // Are 2 July 2014 06:30:45.000 and 2 July 2014 06:30:45.500 equal? 56476 * var result = isEqual( 56477 * new Date(2014, 6, 2, 6, 30, 45, 0), 56478 * new Date(2014, 6, 2, 6, 30, 45, 500) 56479 * ) 56480 * //=> false 56481 */ 56482 56483function isEqual(dirtyLeftDate, dirtyRightDate) { 56484 requiredArgs(2, arguments); 56485 var dateLeft = toDate(dirtyLeftDate); 56486 var dateRight = toDate(dirtyRightDate); 56487 return dateLeft.getTime() === dateRight.getTime(); 56488} 56489 56490/** 56491 * @name setMonth 56492 * @category Month Helpers 56493 * @summary Set the month to the given date. 56494 * 56495 * @description 56496 * Set the month to the given date. 56497 * 56498 * ### v2.0.0 breaking changes: 56499 * 56500 * - [Changes that are common for the whole library](https://github.com/date-fns/date-fns/blob/master/docs/upgradeGuide.md#Common-Changes). 56501 * 56502 * @param {Date|Number} date - the date to be changed 56503 * @param {Number} month - the month of the new date 56504 * @returns {Date} the new date with the month set 56505 * @throws {TypeError} 2 arguments required 56506 * 56507 * @example 56508 * // Set February to 1 September 2014: 56509 * const result = setMonth(new Date(2014, 8, 1), 1) 56510 * //=> Sat Feb 01 2014 00:00:00 56511 */ 56512 56513function setMonth(dirtyDate, dirtyMonth) { 56514 requiredArgs(2, arguments); 56515 var date = toDate(dirtyDate); 56516 var month = toInteger(dirtyMonth); 56517 var year = date.getFullYear(); 56518 var day = date.getDate(); 56519 var dateWithDesiredMonth = new Date(0); 56520 dateWithDesiredMonth.setFullYear(year, month, 15); 56521 dateWithDesiredMonth.setHours(0, 0, 0, 0); 56522 var daysInMonth = getDaysInMonth(dateWithDesiredMonth); // Set the last day of the new month 56523 // if the original date was the last day of the longer month 56524 56525 date.setMonth(month, Math.min(day, daysInMonth)); 56526 return date; 56527} 56528 56529/** 56530 * @name set 56531 * @category Common Helpers 56532 * @summary Set date values to a given date. 56533 * 56534 * @description 56535 * Set date values to a given date. 56536 * 56537 * Sets time values to date from object `values`. 56538 * A value is not set if it is undefined or null or doesn't exist in `values`. 56539 * 56540 * Note about bundle size: `set` does not internally use `setX` functions from date-fns but instead opts 56541 * to use native `Date#setX` methods. If you use this function, you may not want to include the 56542 * other `setX` functions that date-fns provides if you are concerned about the bundle size. 56543 * 56544 * @param {Date|Number} date - the date to be changed 56545 * @param {Object} values - an object with options 56546 * @param {Number} [values.year] - the number of years to be set 56547 * @param {Number} [values.month] - the number of months to be set 56548 * @param {Number} [values.date] - the number of days to be set 56549 * @param {Number} [values.hours] - the number of hours to be set 56550 * @param {Number} [values.minutes] - the number of minutes to be set 56551 * @param {Number} [values.seconds] - the number of seconds to be set 56552 * @param {Number} [values.milliseconds] - the number of milliseconds to be set 56553 * @returns {Date} the new date with options set 56554 * @throws {TypeError} 2 arguments required 56555 * @throws {RangeError} `values` must be an object 56556 * 56557 * @example 56558 * // Transform 1 September 2014 into 20 October 2015 in a single line: 56559 * var result = set(new Date(2014, 8, 20), { year: 2015, month: 9, date: 20 }) 56560 * //=> Tue Oct 20 2015 00:00:00 56561 * 56562 * @example 56563 * // Set 12 PM to 1 September 2014 01:23:45 to 1 September 2014 12:00:00: 56564 * var result = set(new Date(2014, 8, 1, 1, 23, 45), { hours: 12 }) 56565 * //=> Mon Sep 01 2014 12:23:45 56566 */ 56567function set(dirtyDate, values) { 56568 requiredArgs(2, arguments); 56569 56570 if (typeof values !== 'object' || values === null) { 56571 throw new RangeError('values parameter must be an object'); 56572 } 56573
56574 var date = toDate(dirtyDate); // Check if date is Invalid Date because Date.prototype.setFullYear ignores the value of Invalid Date 56575 56576 if (isNaN(date.getTime())) { 56577 return new Date(NaN); 56578 } 56579 56580 if (values.year != null) { 56581 date.setFullYear(values.year); 56582 } 56583 56584 if (values.month != null) { 56585 date = setMonth(date, values.month); 56586 } 56587 56588 if (values.date != null) { 56589 date.setDate(toInteger(values.date)); 56590 } 56591 56592 if (values.hours != null) { 56593 date.setHours(toInteger(values.hours)); 56594 } 56595 56596 if (values.minutes != null) { 56597 date.setMinutes(toInteger(values.minutes)); 56598 } 56599 56600 if (values.seconds != null) { 56601 date.setSeconds(toInteger(values.seconds)); 56602 } 56603 56604 if (values.milliseconds != null) { 56605 date.setMilliseconds(toInteger(values.milliseconds)); 56606 } 56607 56608 return date; 56609} 56610 56611/** 56612 * @name setYear 56613 * @category Year Helpers 56614 * @summary Set the year to the given date. 56615 * 56616 * @description 56617 * Set the year to the given date. 56618 * 56619 * ### v2.0.0 breaking changes: 56620 * 56621 * - [Changes that are common for the whole library](https://github.com/date-fns/date-fns/blob/master/docs/upgradeGuide.md#Common-Changes). 56622 * 56623 * @param {Date|Number} date - the date to be changed 56624 * @param {Number} year - the year of the new date 56625 * @returns {Date} the new date with the year set 56626 * @throws {TypeError} 2 arguments required 56627 * 56628 * @example 56629 * // Set year 2013 to 1 September 2014: 56630 * const result = setYear(new Date(2014, 8, 1), 2013) 56631 * //=> Sun Sep 01 2013 00:00:00 56632 */ 56633 56634function setYear(dirtyDate, dirtyYear) { 56635 requiredArgs(2, arguments); 56636 var date = toDate(dirtyDate); 56637 var year = toInteger(dirtyYear); // Check if date is Invalid Date because Date.prototype.setFullYear ignores the value of Invalid Date 56638 56639 if (isNaN(date.getTime())) { 56640 return new Date(NaN); 56641 } 56642 56643 date.setFullYear(year); 56644 return date; 56645} 56646 56647/** 56648 * @name startOfToday 56649 * @category Day Helpers 56650 * @summary Return the start of today. 56651 * @pure false 56652 * 56653 * @description 56654 * Return the start of today. 56655 * 56656 * > â ï¸ Please note that this function is not present in the FP submodule as 56657 * > it uses `Date.now()` internally hence impure and can't be safely curried. 56658 * 56659 * ### v2.0.0 breaking changes: 56660 * 56661 * - [Changes that are common for the whole library](https://github.com/date-fns/date-fns/blob/master/docs/upgradeGuide.md#Common-Changes). 56662 * 56663 * @returns {Date} the start of today 56664 * 56665 * @example 56666 * // If today is 6 October 2014: 56667 * var result = startOfToday() 56668 * //=> Mon Oct 6 2014 00:00:00 56669 */ 56670 56671function startOfToday() { 56672 return startOfDay(Date.now()); 56673} 56674 56675/** 56676 * @name subYears 56677 * @category Year Helpers 56678 * @summary Subtract the specified number of years from the given date. 56679 * 56680 * @description 56681 * Subtract the specified number of years from the given date. 56682 * 56683 * ### v2.0.0 breaking changes: 56684 * 56685 * - [Changes that are common for the whole library](https://github.com/date-fns/date-fns/blob/master/docs/upgradeGuide.md#Common-Changes). 56686 * 56687 * @param {Date|Number} date - the date to be changed 56688 * @param {Number} amount - the amount of years to be subtracted. Positive decimals will be rounded using `Math.floor`, decimals less than zero will be rounded using `Math.ceil`. 56689 * @returns {Date} the new date with the years subtracted 56690 * @throws {TypeError} 2 arguments required 56691 * 56692 * @example 56693 * // Subtract 5 years from 1 September 2014: 56694 * const result = subYears(new Date(2014, 8, 1), 5) 56695 * //=> Tue Sep 01 2009 00:00:00 56696 */ 56697 56698function subYears(dirtyDate, dirtyAmount) { 56699 requiredArgs(2, arguments); 56700 var amount = toInteger(dirtyAmount); 56701 return addYears(dirtyDate, -amount); 56702} 56703 56704var Month; 56705(function (Month) { 56706 Month[Month["JANUARY"] = 0] = "JANUARY"; 56707 Month[Month["FEBRUARY"] = 1] = "FEBRUARY"; 56708 Month[Month["MARCH"] = 2] = "MARCH"; 56709 Month[Month["APRIL"] = 3] = "APRIL"; 56710 Month[Month["MAY"] = 4] = "MAY"; 56711 Month[Month["JUNE"] = 5] = "JUNE"; 56712 Month[Month["JULY"] = 6] = "JULY"; 56713 Month[Month["AUGUST"] = 7] = "AUGUST"; 56714 Month[Month["SEPTEMBER"] = 8] = "SEPTEMBER"; 56715 Month[Month["OCTOBER"] = 9] = "OCTOBER"; 56716 Month[Month["NOVEMBER"] = 10] = "NOVEMBER"; 56717 Month[Month["DECEMBER"] = 11] = "DECEMBER"; 56718})(Month || (Month = {})); 56719var Day; 56720(function (Day) { 56721 Day[Day["SUNDAY"] = 0] = "SUNDAY"; 56722 Day[Day["MONDAY"] = 1] = "MONDAY"; 56723 Day[Day["TUESDAY"] = 2] = "TUESDAY"; 56724 Day[Day["WEDNESDAY"] = 3] = "WEDNESDAY"; 56725 Day[Day["THURSDAY"] = 4] = "THURSDAY"; 56726 Day[Day["FRIDAY"] = 5] = "FRIDAY"; 56727 Day[Day["SATURDAY"] = 6] = "SATURDAY"; 56728})(Day || (Day = {})); 56729var inRange = function (date, min, max) { 56730 return (isEqual(date, min) || isAfter(date, min)) && (isEqual(date, max) || isBefore(date, max)
56730); 56731}; 56732var clearTime = function (date) { return set(date, { hours: 0, minutes: 0, seconds: 0, milliseconds: 0 }); }; 56733var useLilius = function (_a) { 56734 var _b = _a === void 0 ? {} : _a, _c = _b.weekStartsOn, weekStartsOn = _c === void 0 ? Day.SUNDAY : _c, _d = _b.viewing, initialViewing = _d === void 0 ? new Date() : _d, _e = _b.selected, initialSelected = _e === void 0 ? [] : _e, _f = _b.numberOfMonths, numberOfMonths = _f === void 0 ? 1 : _f; 56735 var _g = (0,external_React_.useState)(initialViewing), viewing = _g[0], setViewing = _g[1]; 56736 var viewToday = (0,external_React_.useCallback)(function () { return setViewing(startOfToday()); }, [setViewing]); 56737 var viewMonth = (0,external_React_.useCallback)(function (month) { return setViewing(function (v) { return setMonth(v, month); }); }, []); 56738 var viewPreviousMonth = (0,external_React_.useCallback)(function () { return setViewing(function (v) { return subMonths(v, 1); }); }, []); 56739 var viewNextMonth = (0,external_React_.useCallback)(function () { return setViewing(function (v) { return addMonths(v, 1); }); }, []); 56740 var viewYear = (0,external_React_.useCallback)(function (year) { return setViewing(function (v) { return setYear(v, year); }); }, []); 56741 var viewPreviousYear = (0,external_React_.useCallback)(function () { return setViewing(function (v) { return subYears(v, 1); }); }, []); 56742 var viewNextYear = (0,external_React_.useCallback)(function () { return setViewing(function (v) { return addYears(v, 1); }); }, []); 56743 var _h = (0,external_React_.useState)(initialSelected.map(clearTime)), selected = _h[0], setSelected = _h[1]; 56744 var clearSelected = function () { return setSelected([]); }; 56745 var isSelected = (0,external_React_.useCallback)(function (date) { return selected.findIndex(function (s) { return isEqual(s, date); }) > -1; }, [selected]); 56746 var select = (0,external_React_.useCallback)(function (date, replaceExisting) { 56747 if (replaceExisting) { 56748 setSelected(Array.isArray(date) ? date : [date]); 56749 } 56750 else { 56751 setSelected(function (selectedItems) { return selectedItems.concat(Array.isArray(date) ? date : [date]); }); 56752 } 56753 }, []); 56754 var deselect = (0,external_React_.useCallback)(function (date) { 56755 return setSelected(function (selectedItems) { 56756 return Array.isArray(date) 56757 ? selectedItems.filter(function (s) { return !date.map(function (d) { return d.getTime(); }).includes(s.getTime()); }) 56758 : selectedItems.filter(function (s) { return !isEqual(s, date); }); 56759 }); 56760 }, []); 56761 var toggle = (0,external_React_.useCallback)(function (date, replaceExisting) { return (isSelected(date) ? deselect(date) : select(date, replaceExisting)); }, [deselect, isSelected, select]); 56762 var selectRange = (0,external_React_.useCallback)(function (start, end, replaceExisting) { 56763 if (replaceExisting) { 56764 setSelected(eachDayOfInterval({ start: start, end: end })); 56765 } 56766 else { 56767 setSelected(function (selectedItems) { return selectedItems.concat(eachDayOfInterval({ start: start, end: end })); }); 56768 } 56769 }, []); 56770 var deselectRange = (0,external_React_.useCallback)(function (start, end) { 56771 setSelected(function (selectedItems) { 56772 return selectedItems.filter(function (s) { 56773 return !eachDayOfInterval({ start: start, end: end }) 56774 .map(function (d) { return d.getTime(); }) 56775 .includes(s.getTime()); 56776 }); 56777 }); 56778 }, []); 56779 var calendar = (0,external_React_.useMemo)(function () { 56780 return eachMonthOfInterval({ 56781 start: startOfMonth(viewing), 56782 end: endOfMonth(addMonths(viewing, numberOfMonths - 1)), 56783 }).map(function (month) { 56784 return eachWeekOfInterval({ 56785 start: startOfMonth(month), 56786 end: endOfMonth(month), 56787 }, { weekStartsOn: weekStartsOn }).map(function (week) { 56788 return eachDayOfInterval({ 56789 start: startOfWeek(week, { weekStartsOn: weekStartsOn }), 56790 end: endOfWeek(week, { weekStartsOn: weekStartsOn }), 56791 }); 56792 }); 56793 }); 56794 }, [viewing, weekStartsOn, numberOfMonths]); 56795 return { 56796 clearTime: clearTime, 56797 inRange: inRange, 56798 viewing: viewing,
56799 setViewing: setViewing, 56800 viewToday: viewToday, 56801 viewMonth: viewMonth, 56802 viewPreviousMonth: viewPreviousMonth, 56803 viewNextMonth: viewNextMonth, 56804 viewYear: viewYear, 56805 viewPreviousYear: viewPreviousYear, 56806 viewNextYear: viewNextYear, 56807 selected: selected, 56808 setSelected: setSelected, 56809 clearSelected: clearSelected, 56810 isSelected: isSelected, 56811 select: select, 56812 deselect: deselect, 56813 toggle: toggle, 56814 selectRange: selectRange, 56815 deselectRange: deselectRange, 56816 calendar: calendar, 56817 }; 56818}; 56819 56820 56821 56822;// CONCATENATED MODULE: ./node_modules/@babel/runtime/helpers/esm/typeof.js 56823function _typeof(obj) { 56824 "@babel/helpers - typeof"; 56825 56826 return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { 56827 return typeof obj; 56828 } : function (obj) { 56829 return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; 56830 }, _typeof(obj); 56831} 56832;// CONCATENATED MODULE: ./node_modules/date-fns/esm/_lib/requiredArgs/index.js 56833function requiredArgs_requiredArgs(required, args) { 56834 if (args.length < required) { 56835 throw new TypeError(required + ' argument' + (required > 1 ? 's' : '') + ' required, but only ' + args.length + ' present'); 56836 } 56837} 56838;// CONCATENATED MODULE: ./node_modules/date-fns/esm/toDate/index.js 56839 56840 56841/** 56842 * @name toDate 56843 * @category Common Helpers 56844 * @summary Convert the given argument to an instance of Date. 56845 * 56846 * @description 56847 * Convert the given argument to an instance of Date. 56848 * 56849 * If the argument is an instance of Date, the function returns its clone. 56850 * 56851 * If the argument is a number, it is treated as a timestamp. 56852 * 56853 * If the argument is none of the above, the function returns Invalid Date. 56854 * 56855 * **Note**: *all* Date arguments passed to any *date-fns* function is processed by `toDate`. 56856 * 56857 * @param {Date|Number} argument - the value to convert 56858 * @returns {Date} the parsed date in the local time zone 56859 * @throws {TypeError} 1 argument required 56860 * 56861 * @example 56862 * // Clone the date: 56863 * const result = toDate(new Date(2014, 1, 11, 11, 30, 30)) 56864 * //=> Tue Feb 11 2014 11:30:30 56865 * 56866 * @example 56867 * // Convert the timestamp to date: 56868 * const result = toDate(1392098430000) 56869 * //=> Tue Feb 11 2014 11:30:30 56870 */ 56871function toDate_toDate(argument) { 56872 requiredArgs_requiredArgs(1, arguments); 56873 var argStr = Object.prototype.toString.call(argument); 56874 56875 // Clone the date 56876 if (argument instanceof Date || _typeof(argument) === 'object' && argStr === '[object Date]') { 56877 // Prevent the date to lose the milliseconds when passed to new Date() in IE10 56878 return new Date(argument.getTime()); 56879 } else if (typeof argument === 'number' || argStr === '[object Number]') { 56880 return new Date(argument); 56881 } else { 56882 if ((typeof argument === 'string' || argStr === '[object String]') && typeof console !== 'undefined') { 56883 // eslint-disable-next-line no-console 56884 console.warn("Starting with v2.0.0-beta.1 date-fns doesn't accept strings as date arguments. Please use `parseISO` to parse strings. See: https://github.com/date-fns/date-fns/blob/master/docs/upgradeGuide.md#string-arguments"); 56885 // eslint-disable-next-line no-console 56886 console.warn(new Error().stack); 56887 } 56888 return new Date(NaN); 56889 } 56890} 56891;// CONCATENATED MODULE: ./node_modules/date-fns/esm/startOfDay/index.js 56892 56893 56894/** 56895 * @name startOfDay 56896 * @category Day Helpers 56897 * @summary Return the start of a day for the given date. 56898 * 56899 * @description 56900 * Return the start of a day for the given date. 56901 * The result will be in the local timezone. 56902 * 56903 * @param {Date|Number} date - the original date 56904 * @returns {Date} the start of a day 56905 * @throws {TypeError} 1 argument required 56906 * 56907 * @example 56908 * // The start of a day for 2 September 2014 11:55:00: 56909 * const result = startOfDay(new Date(2014, 8, 2, 11, 55, 0)) 56910 * //=> Tue Sep 02 2014 00:00:00 56911 */ 56912function startOfDay_startOfDay(dirtyDate) { 56913 requiredArgs_requiredArgs(1, arguments); 56914 var date = toDate_toDate(dirtyDate); 56915 date.setHours(0, 0, 0, 0); 56916 return date; 56917} 56918;// CONCATENATED MODULE: ./node_modules/date-fns/esm/_lib/toInteger/index.js 56919function toInteger_toInteger(dirtyNumber) {
vendor: 4,451 bytes, lines 56920-57038
56920 if (dirtyNumber === null || dirtyNumber === true || dirtyNumber === false) { 56921 return NaN; 56922 } 56923 var number = Number(dirtyNumber); 56924 if (isNaN(number)) { 56925 return number; 56926 } 56927 return number < 0 ? Math.ceil(number) : Math.floor(number); 56928} 56929;// CONCATENATED MODULE: ./node_modules/date-fns/esm/addMonths/index.js 56930 56931 56932 56933/** 56934 * @name addMonths 56935 * @category Month Helpers 56936 * @summary Add the specified number of months to the given date. 56937 * 56938 * @description 56939 * Add the specified number of months to the given date. 56940 * 56941 * @param {Date|Number} date - the date to be changed 56942 * @param {Number} amount - the amount of months to be added. Positive decimals will be rounded using `Math.floor`, decimals less than zero will be rounded using `Math.ceil`. 56943 * @returns {Date} the new date with the months added 56944 * @throws {TypeError} 2 arguments required 56945 * 56946 * @example 56947 * // Add 5 months to 1 September 2014: 56948 * const result = addMonths(new Date(2014, 8, 1), 5) 56949 * //=> Sun Feb 01 2015 00:00:00 56950 */ 56951function addMonths_addMonths(dirtyDate, dirtyAmount) { 56952 requiredArgs_requiredArgs(2, arguments); 56953 var date = toDate_toDate(dirtyDate); 56954 var amount = toInteger_toInteger(dirtyAmount); 56955 if (isNaN(amount)) { 56956 return new Date(NaN); 56957 } 56958 if (!amount) { 56959 // If 0 months, no-op to avoid changing times in the hour before end of DST 56960 return date; 56961 } 56962 var dayOfMonth = date.getDate(); 56963 56964 // The JS Date object supports date math by accepting out-of-bounds values for 56965 // month, day, etc. For example, new Date(2020, 0, 0) returns 31 Dec 2019 and 56966 // new Date(2020, 13, 1) returns 1 Feb 2021. This is *almost* the behavior we 56967 // want except that dates will wrap around the end of a month, meaning that 56968 // new Date(2020, 13, 31) will return 3 Mar 2021 not 28 Feb 2021 as desired. So 56969 // we'll default to the end of the desired month by adding 1 to the desired 56970 // month and using a date of 0 to back up one day to the end of the desired 56971 // month. 56972 var endOfDesiredMonth = new Date(date.getTime()); 56973 endOfDesiredMonth.setMonth(date.getMonth() + amount + 1, 0); 56974 var daysInMonth = endOfDesiredMonth.getDate(); 56975 if (dayOfMonth >= daysInMonth) { 56976 // If we're already at the end of the month, then this is the correct date 56977 // and we're done. 56978 return endOfDesiredMonth; 56979 } else { 56980 // Otherwise, we now know that setting the original day-of-month value won't 56981 // cause an overflow, so set the desired day-of-month. Note that we can't 56982 // just set the date of `endOfDesiredMonth` because that object may have had 56983 // its time changed in the unusual case where where a DST transition was on 56984 // the last day of the month and its local time was in the hour skipped or 56985 // repeated next to a DST transition. So we use `date` instead which is 56986 // guaranteed to still have the original time. 56987 date.setFullYear(endOfDesiredMonth.getFullYear(), endOfDesiredMonth.getMonth(), dayOfMonth); 56988 return date; 56989 } 56990} 56991;// CONCATENATED MODULE: ./node_modules/date-fns/esm/subMonths/index.js 56992 56993 56994 56995/** 56996 * @name subMonths 56997 * @category Month Helpers 56998 * @summary Subtract the specified number of months from the given date. 56999 * 57000 * @description 57001 * Subtract the specified number of months from the given date. 57002 * 57003 * @param {Date|Number} date - the date to be changed 57004 * @param {Number} amount - the amount of months to be subtracted. Positive decimals will be rounded using `Math.floor`, decimals less than zero will be rounded using `Math.ceil`. 57005 * @returns {Date} the new date with the months subtracted 57006 * @throws {TypeError} 2 arguments required 57007 * 57008 * @example 57009 * // Subtract 5 months from 1 February 2015: 57010 * const result = subMonths(new Date(2015, 1, 1), 5) 57011 * //=> Mon Sep 01 2014 00:00:00 57012 */ 57013function subMonths_subMonths(dirtyDate, dirtyAmount) { 57014 requiredArgs_requiredArgs(2, arguments); 57015 var amount = toInteger_toInteger(dirtyAmount); 57016 return addMonths_addMonths(dirtyDate, -amount); 57017} 57018;// CONCATENATED MODULE: ./node_modules/date-fns/esm/isDate/index.js 57019 57020 57021/** 57022 * @name isDate 57023 * @category Common Helpers 57024 * @summary Is the given value a date? 57025 * 57026 * @description 57027 * Returns true if the given value is an instance of Date. The function works for dates transferred across iframes. 57028 * 57029 * @param {*} value - the value to check 57030 * @returns {boolean} true if the given value is a date 57031 * @throws {TypeError} 1 arguments required 57032 * 57033 * @example 57034 * // For a valid date: 57035 * const result = isDate(new Date()) 57036 * //=> true 57037 * 57038 * @example
57039 * // For an invalid date: 57040 * const result = isDate(new Date(NaN)) 57041 * //=> true 57042 * 57043 * @example 57044 * // For some value: 57045 * const result = isDate('2014-02-31') 57046 * //=> false 57047 * 57048 * @example 57049 * // For an object: 57050 * const result = isDate({}) 57051 * //=> false 57052 */ 57053function isDate(value) { 57054 requiredArgs_requiredArgs(1, arguments); 57055 return value instanceof Date || _typeof(value) === 'object' && Object.prototype.toString.call(value) === '[object Date]'; 57056} 57057;// CONCATENATED MODULE: ./node_modules/date-fns/esm/isValid/index.js 57058 57059 57060 57061/** 57062 * @name isValid 57063 * @category Common Helpers 57064 * @summary Is the given date valid? 57065 * 57066 * @description 57067 * Returns false if argument is Invalid Date and true otherwise. 57068 * Argument is converted to Date using `toDate`. See [toDate]{@link https://date-fns.org/docs/toDate} 57069 * Invalid Date is a Date, whose time value is NaN. 57070 * 57071 * Time value of Date: http://es5.github.io/#x15.9.1.1 57072 * 57073 * @param {*} date - the date to check 57074 * @returns {Boolean} the date is valid 57075 * @throws {TypeError} 1 argument required 57076 * 57077 * @example 57078 * // For the valid date: 57079 * const result = isValid(new Date(2014, 1, 31)) 57080 * //=> true 57081 * 57082 * @example 57083 * // For the value, convertable into a date: 57084 * const result = isValid(1393804800000) 57085 * //=> true 57086 * 57087 * @example 57088 * // For the invalid date: 57089 * const result = isValid(new Date('')) 57090 * //=> false 57091 */ 57092function isValid(dirtyDate) { 57093 requiredArgs_requiredArgs(1, arguments); 57094 if (!isDate(dirtyDate) && typeof dirtyDate !== 'number') { 57095 return false; 57096 } 57097 var date = toDate_toDate(dirtyDate); 57098 return !isNaN(Number(date)); 57099} 57100;// CONCATENATED MODULE: ./node_modules/date-fns/esm/addMilliseconds/index.js 57101 57102 57103 57104/** 57105 * @name addMilliseconds 57106 * @category Millisecond Helpers 57107 * @summary Add the specified number of milliseconds to the given date. 57108 * 57109 * @description 57110 * Add the specified number of milliseconds to the given date. 57111 * 57112 * @param {Date|Number} date - the date to be changed 57113 * @param {Number} amount - the amount of milliseconds to be added. Positive decimals will be rounded using `Math.floor`, decimals less than zero will be rounded using `Math.ceil`. 57114 * @returns {Date} the new date with the milliseconds added 57115 * @throws {TypeError} 2 arguments required 57116 * 57117 * @example 57118 * // Add 750 milliseconds to 10 July 2014 12:45:30.000: 57119 * const result = addMilliseconds(new Date(2014, 6, 10, 12, 45, 30, 0), 750) 57120 * //=> Thu Jul 10 2014 12:45:30.750 57121 */ 57122function addMilliseconds(dirtyDate, dirtyAmount) { 57123 requiredArgs_requiredArgs(2, arguments); 57124 var timestamp = toDate_toDate(dirtyDate).getTime(); 57125 var amount = toInteger_toInteger(dirtyAmount); 57126 return new Date(timestamp + amount); 57127} 57128;// CONCATENATED MODULE: ./node_modules/date-fns/esm/subMilliseconds/index.js 57129 57130 57131 57132/** 57133 * @name subMilliseconds 57134 * @category Millisecond Helpers 57135 * @summary Subtract the specified number of milliseconds from the given date. 57136 * 57137 * @description 57138 * Subtract the specified number of milliseconds from the given date. 57139 * 57140 * @param {Date|Number} date - the date to be changed 57141 * @param {Number} amount - the amount of milliseconds to be subtracted. Positive decimals will be rounded using `Math.floor`, decimals less than zero will be rounded using `Math.ceil`. 57142 * @returns {Date} the new date with the milliseconds subtracted 57143 * @throws {TypeError} 2 arguments required 57144 * 57145 * @example 57146 * // Subtract 750 milliseconds from 10 July 2014 12:45:30.000: 57147 * const result = subMilliseconds(new Date(2014, 6, 10, 12, 45, 30, 0), 750) 57148 * //=> Thu Jul 10 2014 12:45:29.250 57149 */ 57150function subMilliseconds(dirtyDate, dirtyAmount) { 57151 requiredArgs_requiredArgs(2, arguments); 57152 var amount = toInteger_toInteger(dirtyAmount); 57153 return addMilliseconds(dirtyDate, -amount); 57154} 57155;// CONCATENATED MODULE: ./node_modules/date-fns/esm/_lib/getUTCDayOfYear/index.js 57156 57157 57158var MILLISECONDS_IN_DAY = 86400000; 57159function getUTCDayOfYear(dirtyDate) { 57160 requiredArgs_requiredArgs(1, arguments); 57161 var date = toDate_toDate(dirtyDate); 57162 var timestamp = date.getTime(); 57163 date.setUTCMonth(0, 1); 57164 date.setUTCHours(0, 0, 0, 0); 57165 var startOfYearTimestamp = date.getTime(); 57166 var difference = timestamp - startOfYearTimestamp; 57167 return Math.floor(difference / MILLISECONDS_IN_DAY) + 1; 57168} 57169;// CONCATENATED MODULE: ./node_modules/date-fns/esm/_lib/startOfUTCISOWeek/index.js 57170 57171 57172function startOfUTCISOWeek(dirtyDate) { 57173 requiredArgs_requiredArgs(1, arguments); 57174 var weekStartsOn = 1;
vendor: 4,405 bytes, lines 57175-57273
57175 var date = toDate_toDate(dirtyDate); 57176 var day = date.getUTCDay(); 57177 var diff = (day < weekStartsOn ? 7 : 0) + day - weekStartsOn; 57178 date.setUTCDate(date.getUTCDate() - diff); 57179 date.setUTCHours(0, 0, 0, 0); 57180 return date; 57181} 57182;// CONCATENATED MODULE: ./node_modules/date-fns/esm/_lib/getUTCISOWeekYear/index.js 57183 57184 57185 57186function getUTCISOWeekYear(dirtyDate) { 57187 requiredArgs_requiredArgs(1, arguments); 57188 var date = toDate_toDate(dirtyDate); 57189 var year = date.getUTCFullYear(); 57190 var fourthOfJanuaryOfNextYear = new Date(0); 57191 fourthOfJanuaryOfNextYear.setUTCFullYear(year + 1, 0, 4); 57192 fourthOfJanuaryOfNextYear.setUTCHours(0, 0, 0, 0); 57193 var startOfNextYear = startOfUTCISOWeek(fourthOfJanuaryOfNextYear); 57194 var fourthOfJanuaryOfThisYear = new Date(0); 57195 fourthOfJanuaryOfThisYear.setUTCFullYear(year, 0, 4); 57196 fourthOfJanuaryOfThisYear.setUTCHours(0, 0, 0, 0); 57197 var startOfThisYear = startOfUTCISOWeek(fourthOfJanuaryOfThisYear); 57198 if (date.getTime() >= startOfNextYear.getTime()) { 57199 return year + 1; 57200 } else if (date.getTime() >= startOfThisYear.getTime()) { 57201 return year; 57202 } else { 57203 return year - 1; 57204 } 57205} 57206;// CONCATENATED MODULE: ./node_modules/date-fns/esm/_lib/startOfUTCISOWeekYear/index.js 57207 57208 57209 57210function startOfUTCISOWeekYear(dirtyDate) { 57211 requiredArgs_requiredArgs(1, arguments); 57212 var year = getUTCISOWeekYear(dirtyDate); 57213 var fourthOfJanuary = new Date(0); 57214 fourthOfJanuary.setUTCFullYear(year, 0, 4); 57215 fourthOfJanuary.setUTCHours(0, 0, 0, 0); 57216 var date = startOfUTCISOWeek(fourthOfJanuary); 57217 return date; 57218} 57219;// CONCATENATED MODULE: ./node_modules/date-fns/esm/_lib/getUTCISOWeek/index.js 57220 57221 57222 57223 57224var MILLISECONDS_IN_WEEK = 604800000; 57225function getUTCISOWeek(dirtyDate) { 57226 requiredArgs_requiredArgs(1, arguments); 57227 var date = toDate_toDate(dirtyDate); 57228 var diff = startOfUTCISOWeek(date).getTime() - startOfUTCISOWeekYear(date).getTime(); 57229 57230 // Round the number of days to the nearest integer 57231 // because the number of milliseconds in a week is not constant 57232 // (e.g. it's different in the week of the daylight saving time clock shift) 57233 return Math.round(diff / MILLISECONDS_IN_WEEK) + 1; 57234} 57235;// CONCATENATED MODULE: ./node_modules/date-fns/esm/_lib/defaultOptions/index.js 57236var defaultOptions_defaultOptions = {}; 57237function getDefaultOptions() { 57238 return defaultOptions_defaultOptions; 57239} 57240function setDefaultOptions(newOptions) { 57241 defaultOptions_defaultOptions = newOptions; 57242} 57243;// CONCATENATED MODULE: ./node_modules/date-fns/esm/_lib/startOfUTCWeek/index.js 57244 57245 57246 57247 57248function startOfUTCWeek(dirtyDate, options) { 57249 var _ref, _ref2, _ref3, _options$weekStartsOn, _options$locale, _options$locale$optio, _defaultOptions$local, _defaultOptions$local2; 57250 requiredArgs_requiredArgs(1, arguments); 57251 var defaultOptions = getDefaultOptions(); 57252 var weekStartsOn = toInteger_toInteger((_ref = (_ref2 = (_ref3 = (_options$weekStartsOn = options === null || options === void 0 ? void 0 : options.weekStartsOn) !== null && _options$weekStartsOn !== void 0 ? _options$weekStartsOn : options === null || options === void 0 ? void 0 : (_options$locale = options.locale) === null || _options$locale === void 0 ? void 0 : (_options$locale$optio = _options$locale.options) === null || _options$locale$optio === void 0 ? void 0 : _options$locale$optio.weekStartsOn) !== null && _ref3 !== void 0 ? _ref3 : defaultOptions.weekStartsOn) !== null && _ref2 !== void 0 ? _ref2 : (_defaultOptions$local = defaultOptions.locale) === null || _defaultOptions$local === void 0 ? void 0 : (_defaultOptions$local2 = _defaultOptions$local.options) === null || _defaultOptions$local2 === void 0 ? void 0 : _defaultOptions$local2.weekStartsOn) !== null && _ref !== void 0 ? _ref : 0); 57253 57254 // Test if weekStartsOn is between 0 and 6 _and_ is not NaN 57255 if (!(weekStartsOn >= 0 && weekStartsOn <= 6)) { 57256 throw new RangeError('weekStartsOn must be between 0 and 6 inclusively'); 57257 } 57258 var date = toDate_toDate(dirtyDate); 57259 var day = date.getUTCDay(); 57260 var diff = (day < weekStartsOn ? 7 : 0) + day - weekStartsOn; 57261 date.setUTCDate(date.getUTCDate() - diff); 57262 date.setUTCHours(0, 0, 0, 0); 57263 return date; 57264} 57265;// CONCATENATED MODULE: ./node_modules/date-fns/esm/_lib/getUTCWeekYear/index.js 57266 57267 57268 57269 57270 57271function getUTCWeekYear(dirtyDate, options) { 57272 var _ref, _ref2, _ref3, _options$firstWeekCon, _options$locale, _options$locale$optio, _defaultOptions$local, _defaultOptions$local2; 57273 requiredArgs_requiredArgs(1, arguments);
vendor: 6,130 bytes, lines 57274-57374
57274 var date = toDate_toDate(dirtyDate); 57275 var year = date.getUTCFullYear(); 57276 var defaultOptions = getDefaultOptions(); 57277 var firstWeekContainsDate = toInteger_toInteger((_ref = (_ref2 = (_ref3 = (_options$firstWeekCon = options === null || options === void 0 ? void 0 : options.firstWeekContainsDate) !== null && _options$firstWeekCon !== void 0 ? _options$firstWeekCon : options === null || options === void 0 ? void 0 : (_options$locale = options.locale) === null || _options$locale === void 0 ? void 0 : (_options$locale$optio = _options$locale.options) === null || _options$locale$optio === void 0 ? void 0 : _options$locale$optio.firstWeekContainsDate) !== null && _ref3 !== void 0 ? _ref3 : defaultOptions.firstWeekContainsDate) !== null && _ref2 !== void 0 ? _ref2 : (_defaultOptions$local = defaultOptions.locale) === null || _defaultOptions$local === void 0 ? void 0 : (_defaultOptions$local2 = _defaultOptions$local.options) === null || _defaultOptions$local2 === void 0 ? void 0 : _defaultOptions$local2.firstWeekContainsDate) !== null && _ref !== void 0 ? _ref : 1); 57278 57279 // Test if weekStartsOn is between 1 and 7 _and_ is not NaN 57280 if (!(firstWeekContainsDate >= 1 && firstWeekContainsDate <= 7)) { 57281 throw new RangeError('firstWeekContainsDate must be between 1 and 7 inclusively'); 57282 } 57283 var firstWeekOfNextYear = new Date(0); 57284 firstWeekOfNextYear.setUTCFullYear(year + 1, 0, firstWeekContainsDate); 57285 firstWeekOfNextYear.setUTCHours(0, 0, 0, 0); 57286 var startOfNextYear = startOfUTCWeek(firstWeekOfNextYear, options); 57287 var firstWeekOfThisYear = new Date(0); 57288 firstWeekOfThisYear.setUTCFullYear(year, 0, firstWeekContainsDate); 57289 firstWeekOfThisYear.setUTCHours(0, 0, 0, 0); 57290 var startOfThisYear = startOfUTCWeek(firstWeekOfThisYear, options); 57291 if (date.getTime() >= startOfNextYear.getTime()) { 57292 return year + 1; 57293 } else if (date.getTime() >= startOfThisYear.getTime()) { 57294 return year; 57295 } else { 57296 return year - 1; 57297 } 57298} 57299;// CONCATENATED MODULE: ./node_modules/date-fns/esm/_lib/startOfUTCWeekYear/index.js 57300 57301 57302 57303 57304 57305function startOfUTCWeekYear(dirtyDate, options) { 57306 var _ref, _ref2, _ref3, _options$firstWeekCon, _options$locale, _options$locale$optio, _defaultOptions$local, _defaultOptions$local2; 57307 requiredArgs_requiredArgs(1, arguments); 57308 var defaultOptions = getDefaultOptions(); 57309 var firstWeekContainsDate = toInteger_toInteger((_ref = (_ref2 = (_ref3 = (_options$firstWeekCon = options === null || options === void 0 ? void 0 : options.firstWeekContainsDate) !== null && _options$firstWeekCon !== void 0 ? _options$firstWeekCon : options === null || options === void 0 ? void 0 : (_options$locale = options.locale) === null || _options$locale === void 0 ? void 0 : (_options$locale$optio = _options$locale.options) === null || _options$locale$optio === void 0 ? void 0 : _options$locale$optio.firstWeekContainsDate) !== null && _ref3 !== void 0 ? _ref3 : defaultOptions.firstWeekContainsDate) !== null && _ref2 !== void 0 ? _ref2 : (_defaultOptions$local = defaultOptions.locale) === null || _defaultOptions$local === void 0 ? void 0 : (_defaultOptions$local2 = _defaultOptions$local.options) === null || _defaultOptions$local2 === void 0 ? void 0 : _defaultOptions$local2.firstWeekContainsDate) !== null && _ref !== void 0 ? _ref : 1); 57310 var year = getUTCWeekYear(dirtyDate, options); 57311 var firstWeek = new Date(0); 57312 firstWeek.setUTCFullYear(year, 0, firstWeekContainsDate); 57313 firstWeek.setUTCHours(0, 0, 0, 0); 57314 var date = startOfUTCWeek(firstWeek, options); 57315 return date; 57316} 57317;// CONCATENATED MODULE: ./node_modules/date-fns/esm/_lib/getUTCWeek/index.js 57318 57319 57320 57321 57322var getUTCWeek_MILLISECONDS_IN_WEEK = 604800000; 57323function getUTCWeek(dirtyDate, options) { 57324 requiredArgs_requiredArgs(1, arguments); 57325 var date = toDate_toDate(dirtyDate); 57326 var diff = startOfUTCWeek(date, options).getTime() - startOfUTCWeekYear(date, options).getTime(); 57327 57328 // Round the number of days to the nearest integer 57329 // because the number of milliseconds in a week is not constant 57330 // (e.g. it's different in the week of the daylight saving time clock shift) 57331 return Math.round(diff / getUTCWeek_MILLISECONDS_IN_WEEK) + 1; 57332} 57333;// CONCATENATED MODULE: ./node_modules/date-fns/esm/_lib/addLeadingZeros/index.js 57334function addLeadingZeros(number, targetLength) { 57335 var sign = number < 0 ? '-' : ''; 57336 var output = Math.abs(number).toString(); 57337 while (output.length < targetLength) { 57338 output = '0' + output; 57339 } 57340 return sign + output; 57341} 57342;// CONCATENATED MODULE: ./node_modules/date-fns/esm/_lib/format/lightFormatters/index.js 57343 57344/* 57345 * | | Unit | | Unit | 57346 * |-----|--------------------------------|-----|--------------------------------| 57347 * | a | AM, PM | A* | | 57348 * | d | Day of month | D | | 57349 * | h | Hour [1-12] | H | Hour [0-23] | 57350 * | m | Minute | M | Month | 57351 * | s | Second | S | Fraction of second | 57352 * | y | Year (abs) | Y | | 57353 * 57354 * Letters marked by * are not implemented but reserved by Unicode standard. 57355 */ 57356var formatters = { 57357 // Year 57358 y: function y(date, token) { 57359 // From http://www.unicode.org/reports/tr35/tr35-31/tr35-dates.html#Date_Format_tokens 57360 // | Year | y | yy | yyy | yyyy | yyyyy | 57361 // |----------|-------|----|-------|-------|-------| 57362 // | AD 1 | 1 | 01 | 001 | 0001 | 00001 | 57363 // | AD 12 | 12 | 12 | 012 | 0012 | 00012 | 57364 // | AD 123 | 123 | 23 | 123 | 0123 | 00123 | 57365 // | AD 1234 | 1234 | 34 | 1234 | 1234 | 01234 | 57366 // | AD 12345 | 12345 | 45 | 12345 | 12345 | 12345 | 57367 57368 var signedYear = date.getUTCFullYear(); 57369 // Returns 1 for 1 BC (which is year 0 in JavaScript) 57370 var year = signedYear > 0 ? signedYear : 1 - signedYear; 57371 return addLeadingZeros(token === 'yy' ? year % 100 : year, token.length); 57372 }, 57373 // Month 57374 M: function M(date, token) {
vendor: 21,183 bytes, lines 57375-58082
57375 var month = date.getUTCMonth(); 57376 return token === 'M' ? String(month + 1) : addLeadingZeros(month + 1, 2); 57377 }, 57378 // Day of the month 57379 d: function d(date, token) { 57380 return addLeadingZeros(date.getUTCDate(), token.length); 57381 }, 57382 // AM or PM 57383 a: function a(date, token) { 57384 var dayPeriodEnumValue = date.getUTCHours() / 12 >= 1 ? 'pm' : 'am'; 57385 switch (token) { 57386 case 'a': 57387 case 'aa': 57388 return dayPeriodEnumValue.toUpperCase(); 57389 case 'aaa': 57390 return dayPeriodEnumValue; 57391 case 'aaaaa': 57392 return dayPeriodEnumValue[0]; 57393 case 'aaaa': 57394 default: 57395 return dayPeriodEnumValue === 'am' ? 'a.m.' : 'p.m.'; 57396 } 57397 }, 57398 // Hour [1-12] 57399 h: function h(date, token) { 57400 return addLeadingZeros(date.getUTCHours() % 12 || 12, token.length); 57401 }, 57402 // Hour [0-23] 57403 H: function H(date, token) { 57404 return addLeadingZeros(date.getUTCHours(), token.length); 57405 }, 57406 // Minute 57407 m: function m(date, token) { 57408 return addLeadingZeros(date.getUTCMinutes(), token.length); 57409 }, 57410 // Second 57411 s: function s(date, token) { 57412 return addLeadingZeros(date.getUTCSeconds(), token.length); 57413 }, 57414 // Fraction of second 57415 S: function S(date, token) { 57416 var numberOfDigits = token.length; 57417 var milliseconds = date.getUTCMilliseconds(); 57418 var fractionalSeconds = Math.floor(milliseconds * Math.pow(10, numberOfDigits - 3)); 57419 return addLeadingZeros(fractionalSeconds, token.length); 57420 } 57421}; 57422/* harmony default export */ const lightFormatters = (formatters); 57423;// CONCATENATED MODULE: ./node_modules/date-fns/esm/_lib/format/formatters/index.js 57424 57425 57426 57427 57428 57429 57430 57431var dayPeriodEnum = { 57432 am: 'am', 57433 pm: 'pm', 57434 midnight: 'midnight', 57435 noon: 'noon', 57436 morning: 'morning', 57437 afternoon: 'afternoon', 57438 evening: 'evening', 57439 night: 'night' 57440}; 57441/* 57442 * | | Unit | | Unit | 57443 * |-----|--------------------------------|-----|--------------------------------| 57444 * | a | AM, PM | A* | Milliseconds in day | 57445 * | b | AM, PM, noon, midnight | B | Flexible day period | 57446 * | c | Stand-alone local day of week | C* | Localized hour w/ day period | 57447 * | d | Day of month | D | Day of year | 57448 * | e | Local day of week | E | Day of week | 57449 * | f | | F* | Day of week in month | 57450 * | g* | Modified Julian day | G | Era | 57451 * | h | Hour [1-12] | H | Hour [0-23] | 57452 * | i! | ISO day of week | I! | ISO week of year | 57453 * | j* | Localized hour w/ day period | J* | Localized hour w/o day period | 57454 * | k | Hour [1-24] | K | Hour [0-11] | 57455 * | l* | (deprecated) | L | Stand-alone month | 57456 * | m | Minute | M | Month | 57457 * | n | | N | | 57458 * | o! | Ordinal number modifier | O | Timezone (GMT) | 57459 * | p! | Long localized time | P! | Long localized date | 57460 * | q | Stand-alone quarter | Q | Quarter | 57461 * | r* | Related Gregorian year | R! | ISO week-numbering year | 57462 * | s | Second | S | Fraction of second | 57463 * | t! | Seconds timestamp | T! | Milliseconds timestamp | 57464 * | u | Extended year | U* | Cyclic year | 57465 * | v* | Timezone (generic non-locat.) | V* | Timezone (location) | 57466 * | w | Local week of year | W* | Week of month | 57467 * | x | Timezone (ISO-8601 w/o Z) | X | Timezone (ISO-8601) | 57468 * | y | Year (abs) | Y | Local week-numbering year | 57469 * | z | Timezone (specific non-locat.) | Z* | Timezone (aliases) | 57470 * 57471 * Letters marked by * are not implemented but reserved by Unicode standard. 57472 * 57473 * Letters marked by ! are non-standard, but implemented by date-fns: 57474 * - `o` modifies the previous token to turn it into an ordinal (see `format` docs) 57475 * - `i` is ISO day of week. For `i` and `ii` is returns numeric ISO week days, 57476 * i.e. 7 for Sunday, 1 for Monday, etc. 57477 * - `I` is ISO week of year, as opposed to `w` which is local week of year. 57478 * - `R` is ISO week-numbering year, as opposed to `Y` which is local week-numbering year. 57479 * `R` is supposed to be used in conjunction with `I` and `i` 57480 * for universal ISO week-numbering date, whereas 57481 * `Y` is supposed to be used in conjunction with `w` and `e` 57482 * for week-numbering date specific to the locale. 57483 * - `P` is long localized date format 57484 * - `p` is long localized time format 57485 */ 57486 57487var formatters_formatters = { 57488 // Era 57489 G: function G(date, token, localize) { 57490 var era = date.getUTCFullYear() > 0 ? 1 : 0; 57491 switch (token) { 57492 // AD, BC 57493 case 'G': 57494 case 'GG': 57495 case 'GGG': 57496 return localize.era(era, { 57497 width: 'abbreviated' 57498 }); 57499 // A, B 57500 case 'GGGGG': 57501 return localize.era(era, { 57502 width: 'narrow' 57503 }); 57504 // Anno Domini, Before Christ 57505 case 'GGGG': 57506 default: 57507 return localize.era(era, { 57508 width: 'wide' 57509 }); 57510 } 57511 }, 57512 // Year 57513 y: function y(date, token, localize) { 57514 // Ordinal number 57515 if (token === 'yo') { 57516 var signedYear = date.getUTCFullYear(); 57517 // Returns 1 for 1 BC (which is year 0 in JavaScript) 57518 var year = signedYear > 0 ? signedYear : 1 - signedYear; 57519 return localize.ordinalNumber(year, { 57520 unit: 'year' 57521 }); 57522 } 57523 return lightFormatters.y(date, token); 57524 }, 57525 // Local week-numbering year 57526 Y: function Y(date, token, localize, options) { 57527 var signedWeekYear = getUTCWeekYear(date, options); 57528 // Returns 1 for 1 BC (which is year 0 in JavaScript) 57529 var weekYear = signedWeekYear > 0 ? signedWeekYear : 1 - signedWeekYear; 57530 57531 // Two digit year 57532 if (token === 'YY') { 57533 var twoDigitYear = weekYear % 100; 57534 return addLeadingZeros(twoDigitYear, 2); 57535 } 57536 57537 // Ordinal number 57538 if (token === 'Yo') { 57539 return localize.ordinalNumber(weekYear, { 57540 unit: 'year' 57541 }); 57542 } 57543 57544 // Padding 57545 return addLeadingZeros(weekYear, token.length); 57546 }, 57547 // ISO week-numbering year 57548 R: function R(date, token) { 57549 var isoWeekYear = getUTCISOWeekYear(date); 57550 57551 // Padding 57552 return addLeadingZeros(isoWeekYear, token.length); 57553 }, 57554 // Extended year. This is a single number designating the year of this calendar system. 57555 // The main difference between `y` and `u` localizers are B.C. years: 57556 // | Year | `y` | `u` | 57557 // |------|-----|-----| 57558 // | AC 1 | 1 | 1 | 57559 // | BC 1 | 1 | 0 | 57560 // | BC 2 | 2 | -1 | 57561 // Also `yy` always returns the last two digits of a year, 57562 // while `uu` pads single digit years to 2 characters and returns other years unchanged. 57563 u: function u(date, token) { 57564 var year = date.getUTCFullYear(); 57565 return addLeadingZeros(year, token.length); 57566 }, 57567 // Quarter 57568 Q: function Q(date, token, localize) { 57569 var quarter = Math.ceil((date.getUTCMonth() + 1) / 3); 57570 switch (token) { 57571 // 1, 2, 3, 4 57572 case 'Q': 57573 return String(quarter); 57574 // 01, 02, 03, 04 57575 case 'QQ': 57576 return addLeadingZeros(quarter, 2); 57577 // 1st, 2nd, 3rd, 4th 57578 case 'Qo': 57579 return localize.ordinalNumber(quarter, { 57580 unit: 'quarter' 57581 }); 57582 // Q1, Q2, Q3, Q4 57583 case 'QQQ': 57584 return localize.quarter(quarter, { 57585 width: 'abbreviated', 57586 context: 'formatting' 57587 }); 57588 // 1, 2, 3, 4 (narrow quarter; could be not numerical) 57589 case 'QQQQQ': 57590 return localize.quarter(quarter, { 57591 width: 'narrow', 57592 context: 'formatting' 57593 }); 57594 // 1st quarter, 2nd quarter, ... 57595 case 'QQQQ': 57596 default: 57597 return localize.quarter(quarter, { 57598 width: 'wide', 57599 context: 'formatting' 57600 }); 57601 } 57602 }, 57603 // Stand-alone quarter 57604 q: function q(date, token, localize) { 57605 var quarter = Math.ceil((date.getUTCMonth() + 1) / 3); 57606 switch (token) { 57607 // 1, 2, 3, 4 57608 case 'q': 57609 return String(quarter); 57610 // 01, 02, 03, 04 57611 case 'qq': 57612 return addLeadingZeros(quarter, 2); 57613 // 1st, 2nd, 3rd, 4th 57614 case 'qo': 57615 return localize.ordinalNumber(quarter, { 57616 unit: 'quarter' 57617 }); 57618 // Q1, Q2, Q3, Q4 57619 case 'qqq': 57620 return localize.quarter(quarter, { 57621 width: 'abbreviated', 57622 context: 'standalone' 57623 }); 57624 // 1, 2, 3, 4 (narrow quarter; could be not numerical) 57625 case 'qqqqq': 57626 return localize.quarter(quarter, { 57627 width: 'narrow', 57628 context: 'standalone' 57629 }); 57630 // 1st quarter, 2nd quarter, ... 57631 case 'qqqq': 57632 default: 57633 return localize.quarter(quarter, { 57634 width: 'wide', 57635 context: 'standalone' 57636 }); 57637 } 57638 }, 57639 // Month 57640 M: function M(date, token, localize) { 57641 var month = date.getUTCMonth(); 57642 switch (token) { 57643 case 'M': 57644 case 'MM': 57645 return lightFormatters.M(date, token); 57646 // 1st, 2nd, ..., 12th 57647 case 'Mo': 57648 return localize.ordinalNumber(month + 1, { 57649 unit: 'month' 57650 }); 57651 // Jan, Feb, ..., Dec 57652 case 'MMM': 57653 return localize.month(month, { 57654 width: 'abbreviated', 57655 context: 'formatting' 57656 }); 57657 // J, F, ..., D 57658 case 'MMMMM': 57659 return localize.month(month, { 57660 width: 'narrow', 57661 context: 'formatting' 57662 }); 57663 // January, February, ..., December 57664 case 'MMMM': 57665 default: 57666 return localize.month(month, { 57667 width: 'wide', 57668 context: 'formatting' 57669 }); 57670 } 57671 }, 57672 // Stand-alone month 57673 L: function L(date, token, localize) { 57674 var month = date.getUTCMonth(); 57675 switch (token) { 57676 // 1, 2, ..., 12 57677 case 'L': 57678 return String(month + 1); 57679 // 01, 02, ..., 12 57680 case 'LL': 57681 return addLeadingZeros(month + 1, 2); 57682 // 1st, 2nd, ..., 12th 57683 case 'Lo': 57684 return localize.ordinalNumber(month + 1, { 57685 unit: 'month' 57686 }); 57687 // Jan, Feb, ..., Dec 57688 case 'LLL': 57689 return localize.month(month, { 57690 width: 'abbreviated', 57691 context: 'standalone' 57692 }); 57693 // J, F, ..., D 57694 case 'LLLLL': 57695 return localize.month(month, { 57696 width: 'narrow', 57697 context: 'standalone' 57698 }); 57699 // January, February, ..., December 57700 case 'LLLL': 57701 default: 57702 return localize.month(month, { 57703 width: 'wide', 57704 context: 'standalone' 57705 }); 57706 } 57707 }, 57708 // Local week of year 57709 w: function w(date, token, localize, options) { 57710 var week = getUTCWeek(date, options); 57711 if (token === 'wo') { 57712 return localize.ordinalNumber(week, { 57713 unit: 'week' 57714 }); 57715 } 57716 return addLeadingZeros(week, token.length); 57717 }, 57718 // ISO week of year 57719 I: function I(date, token, localize) { 57720 var isoWeek = getUTCISOWeek(date); 57721 if (token === 'Io') { 57722 return localize.ordinalNumber(isoWeek, { 57723 unit: 'week' 57724 }); 57725 } 57726 return addLeadingZeros(isoWeek, token.length); 57727 }, 57728 // Day of the month 57729 d: function d(date, token, localize) { 57730 if (token === 'do') { 57731 return localize.ordinalNumber(date.getUTCDate(), { 57732 unit: 'date' 57733 }); 57734 } 57735 return lightFormatters.d(date, token); 57736 }, 57737 // Day of year 57738 D: function D(date, token, localize) { 57739 var dayOfYear = getUTCDayOfYear(date); 57740 if (token === 'Do') { 57741 return localize.ordinalNumber(dayOfYear, { 57742 unit: 'dayOfYear' 57743 }); 57744 } 57745 return addLeadingZeros(dayOfYear, token.length); 57746 }, 57747 // Day of week 57748 E: function E(date, token, localize) { 57749 var dayOfWeek = date.getUTCDay(); 57750 switch (token) { 57751 // Tue 57752 case 'E': 57753 case 'EE': 57754 case 'EEE': 57755 return localize.day(dayOfWeek, { 57756 width: 'abbreviated', 57757 context: 'formatting' 57758 }); 57759 // T 57760 case 'EEEEE': 57761 return localize.day(dayOfWeek, { 57762 width: 'narrow', 57763 context: 'formatting' 57764 }); 57765 // Tu 57766 case 'EEEEEE': 57767 return localize.day(dayOfWeek, { 57768 width: 'short', 57769 context: 'formatting' 57770 }); 57771 // Tuesday 57772 case 'EEEE': 57773 default: 57774 return localize.day(dayOfWeek, { 57775 width: 'wide', 57776 context: 'formatting' 57777 }); 57778 } 57779 }, 57780 // Local day of week 57781 e: function e(date, token, localize, options) { 57782 var dayOfWeek = date.getUTCDay(); 57783 var localDayOfWeek = (dayOfWeek - options.weekStartsOn + 8) % 7 || 7; 57784 switch (token) { 57785 // Numerical value (Nth day of week with current locale or weekStartsOn) 57786 case 'e': 57787 return String(localDayOfWeek); 57788 // Padded numerical value 57789 case 'ee': 57790 return addLeadingZeros(localDayOfWeek, 2); 57791 // 1st, 2nd, ..., 7th 57792 case 'eo': 57793 return localize.ordinalNumber(localDayOfWeek, { 57794 unit: 'day' 57795 }); 57796 case 'eee': 57797 return localize.day(dayOfWeek, { 57798 width: 'abbreviated', 57799 context: 'formatting' 57800 }); 57801 // T 57802 case 'eeeee': 57803 return localize.day(dayOfWeek, { 57804 width: 'narrow', 57805 context: 'formatting' 57806 }); 57807 // Tu 57808 case 'eeeeee': 57809 return localize.day(dayOfWeek, { 57810 width: 'short', 57811 context: 'formatting' 57812 }); 57813 // Tuesday 57814 case 'eeee': 57815 default: 57816 return localize.day(dayOfWeek, { 57817 width: 'wide', 57818 context: 'formatting' 57819 }); 57820 } 57821 }, 57822 // Stand-alone local day of week 57823 c: function c(date, token, localize, options) { 57824 var dayOfWeek = date.getUTCDay(); 57825 var localDayOfWeek = (dayOfWeek - options.weekStartsOn + 8) % 7 || 7; 57826 switch (token) { 57827 // Numerical value (same as in `e`) 57828 case 'c': 57829 return String(localDayOfWeek); 57830 // Padded numerical value 57831 case 'cc': 57832 return addLeadingZeros(localDayOfWeek, token.length); 57833 // 1st, 2nd, ..., 7th 57834 case 'co': 57835 return localize.ordinalNumber(localDayOfWeek, { 57836 unit: 'day' 57837 }); 57838 case 'ccc': 57839 return localize.day(dayOfWeek, { 57840 width: 'abbreviated', 57841 context: 'standalone' 57842 }); 57843 // T 57844 case 'ccccc': 57845 return localize.day(dayOfWeek, { 57846 width: 'narrow', 57847 context: 'standalone' 57848 }); 57849 // Tu 57850 case 'cccccc': 57851 return localize.day(dayOfWeek, { 57852 width: 'short', 57853 context: 'standalone' 57854 }); 57855 // Tuesday 57856 case 'cccc': 57857 default: 57858 return localize.day(dayOfWeek, { 57859 width: 'wide', 57860 context: 'standalone' 57861 }); 57862 } 57863 }, 57864 // ISO day of week 57865 i: function i(date, token, localize) { 57866 var dayOfWeek = date.getUTCDay(); 57867 var isoDayOfWeek = dayOfWeek === 0 ? 7 : dayOfWeek; 57868 switch (token) { 57869 // 2 57870 case 'i': 57871 return String(isoDayOfWeek); 57872 // 02 57873 case 'ii': 57874 return addLeadingZeros(isoDayOfWeek, token.length); 57875 // 2nd 57876 case 'io': 57877 return localize.ordinalNumber(isoDayOfWeek, { 57878 unit: 'day' 57879 }); 57880 // Tue 57881 case 'iii': 57882 return localize.day(dayOfWeek, { 57883 width: 'abbreviated', 57884 context: 'formatting' 57885 }); 57886 // T 57887 case 'iiiii': 57888 return localize.day(dayOfWeek, { 57889 width: 'narrow', 57890 context: 'formatting' 57891 }); 57892 // Tu 57893 case 'iiiiii': 57894 return localize.day(dayOfWeek, { 57895 width: 'short', 57896 context: 'formatting' 57897 }); 57898 // Tuesday 57899 case 'iiii': 57900 default: 57901 return localize.day(dayOfWeek, { 57902 width: 'wide', 57903 context: 'formatting' 57904 }); 57905 } 57906 }, 57907 // AM or PM 57908 a: function a(date, token, localize) { 57909 var hours = date.getUTCHours(); 57910 var dayPeriodEnumValue = hours / 12 >= 1 ? 'pm' : 'am'; 57911 switch (token) { 57912 case 'a': 57913 case 'aa': 57914 return localize.dayPeriod(dayPeriodEnumValue, { 57915 width: 'abbreviated', 57916 context: 'formatting' 57917 }); 57918 case 'aaa': 57919 return localize.dayPeriod(dayPeriodEnumValue, { 57920 width: 'abbreviated', 57921 context: 'formatting' 57922 }).toLowerCase(); 57923 case 'aaaaa': 57924 return localize.dayPeriod(dayPeriodEnumValue, { 57925 width: 'narrow', 57926 context: 'formatting' 57927 }); 57928 case 'aaaa': 57929 default: 57930 return localize.dayPeriod(dayPeriodEnumValue, { 57931 width: 'wide', 57932 context: 'formatting' 57933 }); 57934 } 57935 }, 57936 // AM, PM, midnight, noon 57937 b: function b(date, token, localize) { 57938 var hours = date.getUTCHours(); 57939 var dayPeriodEnumValue; 57940 if (hours === 12) { 57941 dayPeriodEnumValue = dayPeriodEnum.noon; 57942 } else if (hours === 0) { 57943 dayPeriodEnumValue = dayPeriodEnum.midnight; 57944 } else { 57945 dayPeriodEnumValue = hours / 12 >= 1 ? 'pm' : 'am'; 57946 } 57947 switch (token) { 57948 case 'b': 57949 case 'bb': 57950 return localize.dayPeriod(dayPeriodEnumValue, { 57951 width: 'abbreviated', 57952 context: 'formatting' 57953 }); 57954 case 'bbb': 57955 return localize.dayPeriod(dayPeriodEnumValue, { 57956 width: 'abbreviated', 57957 context: 'formatting' 57958 }).toLowerCase(); 57959 case 'bbbbb': 57960 return localize.dayPeriod(dayPeriodEnumValue, { 57961 width: 'narrow', 57962 context: 'formatting' 57963 }); 57964 case 'bbbb': 57965 default: 57966 return localize.dayPeriod(dayPeriodEnumValue, { 57967 width: 'wide', 57968 context: 'formatting' 57969 }); 57970 } 57971 }, 57972 // in the morning, in the afternoon, in the evening, at night 57973 B: function B(date, token, localize) { 57974 var hours = date.getUTCHours(); 57975 var dayPeriodEnumValue; 57976 if (hours >= 17) { 57977 dayPeriodEnumValue = dayPeriodEnum.evening; 57978 } else if (hours >= 12) { 57979 dayPeriodEnumValue = dayPeriodEnum.afternoon; 57980 } else if (hours >= 4) { 57981 dayPeriodEnumValue = dayPeriodEnum.morning; 57982 } else { 57983 dayPeriodEnumValue = dayPeriodEnum.night; 57984 } 57985 switch (token) { 57986 case 'B': 57987 case 'BB': 57988 case 'BBB': 57989 return localize.dayPeriod(dayPeriodEnumValue, { 57990 width: 'abbreviated', 57991 context: 'formatting' 57992 }); 57993 case 'BBBBB': 57994 return localize.dayPeriod(dayPeriodEnumValue, { 57995 width: 'narrow', 57996 context: 'formatting' 57997 }); 57998 case 'BBBB': 57999 default: 58000 return localize.dayPeriod(dayPeriodEnumValue, { 58001 width: 'wide', 58002 context: 'formatting' 58003 }); 58004 } 58005 }, 58006 // Hour [1-12] 58007 h: function h(date, token, localize) { 58008 if (token === 'ho') { 58009 var hours = date.getUTCHours() % 12; 58010 if (hours === 0) hours = 12; 58011 return localize.ordinalNumber(hours, { 58012 unit: 'hour' 58013 }); 58014 } 58015 return lightFormatters.h(date, token); 58016 }, 58017 // Hour [0-23] 58018 H: function H(date, token, localize) { 58019 if (token === 'Ho') { 58020 return localize.ordinalNumber(date.getUTCHours(), { 58021 unit: 'hour' 58022 }); 58023 } 58024 return lightFormatters.H(date, token); 58025 }, 58026 // Hour [0-11] 58027 K: function K(date, token, localize) { 58028 var hours = date.getUTCHours() % 12; 58029 if (token === 'Ko') { 58030 return localize.ordinalNumber(hours, { 58031 unit: 'hour' 58032 }); 58033 } 58034 return addLeadingZeros(hours, token.length); 58035 }, 58036 // Hour [1-24] 58037 k: function k(date, token, localize) { 58038 var hours = date.getUTCHours(); 58039 if (hours === 0) hours = 24; 58040 if (token === 'ko') { 58041 return localize.ordinalNumber(hours, { 58042 unit: 'hour' 58043 }); 58044 } 58045 return addLeadingZeros(hours, token.length); 58046 }, 58047 // Minute 58048 m: function m(date, token, localize) { 58049 if (token === 'mo') { 58050 return localize.ordinalNumber(date.getUTCMinutes(), { 58051 unit: 'minute' 58052 }); 58053 } 58054 return lightFormatters.m(date, token); 58055 }, 58056 // Second 58057 s: function s(date, token, localize) { 58058 if (token === 'so') { 58059 return localize.ordinalNumber(date.getUTCSeconds(), { 58060 unit: 'second' 58061 }); 58062 } 58063 return lightFormatters.s(date, token); 58064 }, 58065 // Fraction of second 58066 S: function S(date, token) { 58067 return lightFormatters.S(date, token); 58068 }, 58069 // Timezone (ISO-8601. If offset is 0, output is always `'Z'`) 58070 X: function X(date, token, _localize, options) { 58071 var originalDate = options._originalDate || date; 58072 var timezoneOffset = originalDate.getTimezoneOffset(); 58073 if (timezoneOffset === 0) { 58074 return 'Z'; 58075 } 58076 switch (token) { 58077 // Hours and optional minutes 58078 case 'X': 58079 return formatTimezoneWithOptionalMinutes(timezoneOffset); 58080 58081 // Hours, minutes and optional seconds without `:` delimiter 58082 // Note: neither ISO-8601 nor JavaScript supports seconds
vendor: 6,655 bytes, lines 58082-58284
58082in timezone offsets 58083 // so this token always has the same output as `XX` 58084 case 'XXXX': 58085 case 'XX': 58086 // Hours and minutes without `:` delimiter 58087 return formatTimezone(timezoneOffset); 58088 58089 // Hours, minutes and optional seconds with `:` delimiter 58090 // Note: neither ISO-8601 nor JavaScript supports seconds in timezone offsets 58091 // so this token always has the same output as `XXX` 58092 case 'XXXXX': 58093 case 'XXX': // Hours and minutes with `:` delimiter 58094 default: 58095 return formatTimezone(timezoneOffset, ':'); 58096 } 58097 }, 58098 // Timezone (ISO-8601. If offset is 0, output is `'+00:00'` or equivalent) 58099 x: function x(date, token, _localize, options) { 58100 var originalDate = options._originalDate || date; 58101 var timezoneOffset = originalDate.getTimezoneOffset(); 58102 switch (token) { 58103 // Hours and optional minutes 58104 case 'x': 58105 return formatTimezoneWithOptionalMinutes(timezoneOffset); 58106 58107 // Hours, minutes and optional seconds without `:` delimiter 58108 // Note: neither ISO-8601 nor JavaScript supports seconds in timezone offsets 58109 // so this token always has the same output as `xx` 58110 case 'xxxx': 58111 case 'xx': 58112 // Hours and minutes without `:` delimiter 58113 return formatTimezone(timezoneOffset); 58114 58115 // Hours, minutes and optional seconds with `:` delimiter 58116 // Note: neither ISO-8601 nor JavaScript supports seconds in timezone offsets 58117 // so this token always has the same output as `xxx` 58118 case 'xxxxx': 58119 case 'xxx': // Hours and minutes with `:` delimiter 58120 default: 58121 return formatTimezone(timezoneOffset, ':'); 58122 } 58123 }, 58124 // Timezone (GMT) 58125 O: function O(date, token, _localize, options) { 58126 var originalDate = options._originalDate || date; 58127 var timezoneOffset = originalDate.getTimezoneOffset(); 58128 switch (token) { 58129 // Short 58130 case 'O': 58131 case 'OO': 58132 case 'OOO': 58133 return 'GMT' + formatTimezoneShort(timezoneOffset, ':'); 58134 // Long 58135 case 'OOOO': 58136 default: 58137 return 'GMT' + formatTimezone(timezoneOffset, ':'); 58138 } 58139 }, 58140 // Timezone (specific non-location) 58141 z: function z(date, token, _localize, options) { 58142 var originalDate = options._originalDate || date; 58143 var timezoneOffset = originalDate.getTimezoneOffset(); 58144 switch (token) { 58145 // Short 58146 case 'z': 58147 case 'zz': 58148 case 'zzz': 58149 return 'GMT' + formatTimezoneShort(timezoneOffset, ':'); 58150 // Long 58151 case 'zzzz': 58152 default: 58153 return 'GMT' + formatTimezone(timezoneOffset, ':'); 58154 } 58155 }, 58156 // Seconds timestamp 58157 t: function t(date, token, _localize, options) { 58158 var originalDate = options._originalDate || date; 58159 var timestamp = Math.floor(originalDate.getTime() / 1000); 58160 return addLeadingZeros(timestamp, token.length); 58161 }, 58162 // Milliseconds timestamp 58163 T: function T(date, token, _localize, options) { 58164 var originalDate = options._originalDate || date; 58165 var timestamp = originalDate.getTime(); 58166 return addLeadingZeros(timestamp, token.length); 58167 } 58168}; 58169function formatTimezoneShort(offset, dirtyDelimiter) { 58170 var sign = offset > 0 ? '-' : '+'; 58171 var absOffset = Math.abs(offset); 58172 var hours = Math.floor(absOffset / 60); 58173 var minutes = absOffset % 60; 58174 if (minutes === 0) { 58175 return sign + String(hours); 58176 } 58177 var delimiter = dirtyDelimiter || ''; 58178 return sign + String(hours) + delimiter + addLeadingZeros(minutes, 2); 58179} 58180function formatTimezoneWithOptionalMinutes(offset, dirtyDelimiter) { 58181 if (offset % 60 === 0) { 58182 var sign = offset > 0 ? '-' : '+'; 58183 return sign + addLeadingZeros(Math.abs(offset) / 60, 2); 58184 } 58185 return formatTimezone(offset, dirtyDelimiter); 58186} 58187function formatTimezone(offset, dirtyDelimiter) { 58188 var delimiter = dirtyDelimiter || ''; 58189 var sign = offset > 0 ? '-' : '+'; 58190 var absOffset = Math.abs(offset); 58191 var hours = addLeadingZeros(Math.floor(absOffset / 60), 2); 58192 var minutes = addLeadingZeros(absOffset % 60, 2); 58193 return sign + hours + delimiter + minutes; 58194} 58195/* harmony default export */ const format_formatters = (formatters_formatters); 58196;// CONCATENATED MODULE: ./node_modules/date-fns/esm/_lib/format/longFormatters/index.js 58197var dateLongFormatter = function dateLongFormatter(pattern, formatLong) { 58198 switch (pattern) { 58199 case 'P': 58200 return formatLong.date({ 58201 width: 'short' 58202 }); 58203 case 'PP': 58204 return formatLong.date({ 58205 width: 'medium' 58206 }); 58207 case 'PPP': 58208 return formatLong.date({ 58209 width: 'long' 58210 }); 58211 case 'PPPP': 58212 default: 58213 return formatLong.date({ 58214 width: 'full' 58215 }); 58216 } 58217}; 58218var timeLongFormatter = function timeLongFormatter(pattern, formatLong) { 58219 switch (pattern) { 58220 case 'p': 58221 return formatLong.time({ 58222 width: 'short' 58223 }); 58224 case 'pp': 58225 return formatLong.time({ 58226 width: 'medium' 58227 }); 58228 case 'ppp': 58229 return formatLong.time({ 58230 width: 'long' 58231 }); 58232 case 'pppp': 58233 default: 58234 return formatLong.time({ 58235 width: 'full' 58236 }); 58237 } 58238}; 58239var dateTimeLongFormatter = function dateTimeLongFormatter(pattern, formatLong) { 58240 var matchResult = pattern.match(/(P+)(p+)?/) || []; 58241 var datePattern = matchResult[1]; 58242 var timePattern = matchResult[2]; 58243 if (!timePattern) { 58244 return dateLongFormatter(pattern, formatLong); 58245 } 58246 var dateTimeFormat; 58247 switch (datePattern) { 58248 case 'P': 58249 dateTimeFormat = formatLong.dateTime({ 58250 width: 'short' 58251 }); 58252 break; 58253 case 'PP': 58254 dateTimeFormat = formatLong.dateTime({ 58255 width: 'medium' 58256 }); 58257 break; 58258 case 'PPP': 58259 dateTimeFormat = formatLong.dateTime({ 58260 width: 'long' 58261 }); 58262 break; 58263 case 'PPPP': 58264 default: 58265 dateTimeFormat = formatLong.dateTime({ 58266 width: 'full' 58267 }); 58268 break; 58269 } 58270 return dateTimeFormat.replace('{{date}}', dateLongFormatter(datePattern, formatLong)).replace('{{time}}', timeLongFormatter(timePattern, formatLong)); 58271}; 58272var longFormatters = { 58273 p: timeLongFormatter, 58274 P: dateTimeLongFormatter 58275}; 58276/* harmony default export */ const format_longFormatters = (longFormatters); 58277;// CONCATENATED MODULE: ./node_modules/date-fns/esm/_lib/getTimezoneOffsetInMilliseconds/index.js 58278/** 58279 * Google Chrome as of 67.0.3396.87 introduced timezones with offset that includes seconds. 58280 * They usually appear for dates that denote time before the timezones were introduced 58281 * (e.g. for 'Europe/Prague' timezone the offset is GMT+00:57:44 before 1 October 1891 58282 * and GMT+01:00:00 after that date) 58283 * 58284 * Date#getTimezoneOffset returns the offset in minutes and would return 57 for the example above,
58285 * which would lead to incorrect calculations. 58286 * 58287 * This function returns the timezone offset in milliseconds that takes seconds in account. 58288 */ 58289function getTimezoneOffsetInMilliseconds(date) { 58290 var utcDate = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours(), date.getMinutes(), date.getSeconds(), date.getMilliseconds())); 58291 utcDate.setUTCFullYear(date.getFullYear()); 58292 return date.getTime() - utcDate.getTime(); 58293} 58294;// CONCATENATED MODULE: ./node_modules/date-fns/esm/_lib/protectedTokens/index.js 58295var protectedDayOfYearTokens = ['D', 'DD']; 58296var protectedWeekYearTokens = ['YY', 'YYYY']; 58297function isProtectedDayOfYearToken(token) { 58298 return protectedDayOfYearTokens.indexOf(token) !== -1; 58299} 58300function isProtectedWeekYearToken(token) { 58301 return protectedWeekYearTokens.indexOf(token) !== -1; 58302} 58303function throwProtectedError(token, format, input) { 58304 if (token === 'YYYY') { 58305 throw new RangeError("Use `yyyy` instead of `YYYY` (in `".concat(format, "`) for formatting years to the input `").concat(input, "`; see: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md")); 58306 } else if (token === 'YY') { 58307 throw new RangeError("Use `yy` instead of `YY` (in `".concat(format, "`) for formatting years to the input `").
vendor: 15,659 bytes, lines 58307-58821
58307concat(input, "`; see: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md")); 58308 } else if (token === 'D') { 58309 throw new RangeError("Use `d` instead of `D` (in `".concat(format, "`) for formatting days of the month to the input `").concat(input, "`; see: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md")); 58310 } else if (token === 'DD') { 58311 throw new RangeError("Use `dd` instead of `DD` (in `".concat(format, "`) for formatting days of the month to the input `").concat(input, "`; see: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md")); 58312 } 58313} 58314;// CONCATENATED MODULE: ./node_modules/date-fns/esm/locale/en-US/_lib/formatDistance/index.js 58315var formatDistanceLocale = { 58316 lessThanXSeconds: { 58317 one: 'less than a second', 58318 other: 'less than {{count}} seconds' 58319 }, 58320 xSeconds: { 58321 one: '1 second', 58322 other: '{{count}} seconds' 58323 }, 58324 halfAMinute: 'half a minute', 58325 lessThanXMinutes: { 58326 one: 'less than a minute', 58327 other: 'less than {{count}} minutes' 58328 }, 58329 xMinutes: { 58330 one: '1 minute', 58331 other: '{{count}} minutes' 58332 }, 58333 aboutXHours: { 58334 one: 'about 1 hour', 58335 other: 'about {{count}} hours' 58336 }, 58337 xHours: { 58338 one: '1 hour', 58339 other: '{{count}} hours' 58340 }, 58341 xDays: { 58342 one: '1 day', 58343 other: '{{count}} days' 58344 }, 58345 aboutXWeeks: { 58346 one: 'about 1 week', 58347 other: 'about {{count}} weeks' 58348 }, 58349 xWeeks: { 58350 one: '1 week', 58351 other: '{{count}} weeks' 58352 }, 58353 aboutXMonths: { 58354 one: 'about 1 month', 58355 other: 'about {{count}} months' 58356 }, 58357 xMonths: { 58358 one: '1 month', 58359 other: '{{count}} months' 58360 }, 58361 aboutXYears: { 58362 one: 'about 1 year', 58363 other: 'about {{count}} years' 58364 }, 58365 xYears: { 58366 one: '1 year', 58367 other: '{{count}} years' 58368 }, 58369 overXYears: { 58370 one: 'over 1 year', 58371 other: 'over {{count}} years' 58372 }, 58373 almostXYears: { 58374 one: 'almost 1 year', 58375 other: 'almost {{count}} years' 58376 } 58377}; 58378var formatDistance = function formatDistance(token, count, options) { 58379 var result; 58380 var tokenValue = formatDistanceLocale[token]; 58381 if (typeof tokenValue === 'string') { 58382 result = tokenValue; 58383 } else if (count === 1) { 58384 result = tokenValue.one; 58385 } else { 58386 result = tokenValue.other.replace('{{count}}', count.toString()); 58387 } 58388 if (options !== null && options !== void 0 && options.addSuffix) { 58389 if (options.comparison && options.comparison > 0) { 58390 return 'in ' + result; 58391 } else { 58392 return result + ' ago'; 58393 } 58394 } 58395 return result; 58396}; 58397/* harmony default export */ const _lib_formatDistance = (formatDistance); 58398;// CONCATENATED MODULE: ./node_modules/date-fns/esm/locale/_lib/buildFormatLongFn/index.js 58399function buildFormatLongFn(args) { 58400 return function () { 58401 var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {}; 58402 // TODO: Remove String() 58403 var width = options.width ? String(options.width) : args.defaultWidth; 58404 var format = args.formats[width] || args.formats[args.defaultWidth]; 58405 return format; 58406 }; 58407} 58408;// CONCATENATED MODULE: ./node_modules/date-fns/esm/locale/en-US/_lib/formatLong/index.js 58409 58410var dateFormats = { 58411 full: 'EEEE, MMMM do, y', 58412 long: 'MMMM do, y', 58413 medium: 'MMM d, y', 58414 short: 'MM/dd/yyyy' 58415}; 58416var timeFormats = { 58417 full: 'h:mm:ss a zzzz', 58418 long: 'h:mm:ss a z', 58419 medium: 'h:mm:ss a', 58420 short: 'h:mm a' 58421}; 58422var dateTimeFormats = { 58423 full: "{{date}} 'at' {{time}}", 58424 long: "{{date}} 'at' {{time}}", 58425 medium: '{{date}}, {{time}}', 58426 short: '{{date}}, {{time}}' 58427}; 58428var formatLong = { 58429 date: buildFormatLongFn({ 58430 formats: dateFormats, 58431 defaultWidth: 'full' 58432 }), 58433 time: buildFormatLongFn({ 58434 formats: timeFormats, 58435 defaultWidth: 'full' 58436 }), 58437 dateTime: buildFormatLongFn({ 58438 formats: dateTimeFormats, 58439 defaultWidth: 'full' 58440 }) 58441}; 58442/* harmony default export */ const _lib_formatLong = (formatLong); 58443;// CONCATENATED MODULE: ./node_modules/date-fns/esm/locale/en-US/_lib/formatRelative/index.js 58444var formatRelativeLocale = { 58445 lastWeek: "'last' eeee 'at' p", 58446 yesterday: "'yesterday at' p", 58447 today: "'today at' p", 58448 tomorrow: "'tomorrow at' p", 58449 nextWeek: "eeee 'at' p", 58450 other: 'P' 58451}; 58452var formatRelative = function formatRelative(token, _date, _baseDate, _options) { 58453 return formatRelativeLocale[token]; 58454}; 58455/* harmony default export */ const _lib_formatRelative = (formatRelative); 58456;// CONCATENATED MODULE: ./node_modules/date-fns/esm/locale/_lib/buildLocalizeFn/index.js 58457function buildLocalizeFn(args) { 58458 return function (dirtyIndex, options) { 58459 var context = options !== null && options !== void 0 && options.context ? String(options.context) : 'standalone'; 58460 var valuesArray; 58461 if (context === 'formatting' && args.formattingValues) { 58462 var defaultWidth = args.defaultFormattingWidth || args.defaultWidth; 58463 var width = options !== null && options !== void 0 && options.width ? String(options.width) : defaultWidth; 58464 valuesArray = args.formattingValues[width] || args.formattingValues[defaultWidth]; 58465 } else { 58466 var _defaultWidth = args.defaultWidth; 58467 var _width = options !== null && options !== void 0 && options.width ? String(options.width) : args.defaultWidth; 58468 valuesArray = args.values[_width] || args.values[_defaultWidth]; 58469 } 58470 var index = args.argumentCallback ? args.argumentCallback(dirtyIndex) : dirtyIndex; 58471 // @ts-ignore: For some reason TypeScript just don't want to match it, no matter how hard we try. I challenge you to try to remove it! 58472 return valuesArray[index]; 58473 }; 58474} 58475;// CONCATENATED MODULE: ./node_modules/date-fns/esm/locale/en-US/_lib/localize/index.js 58476 58477var eraValues = { 58478 narrow: ['B', 'A'], 58479 abbreviated: ['BC', 'AD'], 58480 wide: ['Before Christ', 'Anno Domini'] 58481}; 58482var quarterValues = { 58483 narrow: ['1', '2', '3', '4'], 58484 abbreviated: ['Q1', 'Q2', 'Q3', 'Q4'], 58485 wide: ['1st quarter', '2nd quarter', '3rd quarter', '4th quarter'] 58486}; 58487 58488// Note: in English, the names of days of the week and months are capitalized. 58489// If you are making a new locale based on this one, check if the same is true for the language you're working on. 58490// Generally, formatted dates should look like they are in the middle of a sentence, 58491// e.g. in Spanish language the weekdays and months should be in the lowercase. 58492var monthValues = { 58493 narrow: ['J', 'F', 'M', 'A', 'M', 'J', 'J', 'A', 'S', 'O', 'N', 'D'], 58494 abbreviated: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], 58495 wide: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] 58496}; 58497var dayValues = { 58498 narrow: ['S', 'M', 'T', 'W', 'T', 'F', 'S'], 58499 short: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'], 58500 abbreviated: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'], 58501 wide: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'] 58502}; 58503var dayPeriodValues = { 58504 narrow: { 58505 am: 'a', 58506 pm: 'p', 58507 midnight: 'mi', 58508 noon: 'n', 58509 morning: 'morning', 58510 afternoon: 'afternoon', 58511 evening: 'evening', 58512 night: 'night' 58513 }, 58514 abbreviated: { 58515 am: 'AM', 58516 pm: 'PM', 58517 midnight: 'midnight', 58518 noon: 'noon', 58519 morning: 'morning', 58520 afternoon: 'afternoon', 58521 evening: 'evening', 58522 night: 'night' 58523 }, 58524 wide: { 58525 am: 'a.m.', 58526 pm: 'p.m.', 58527 midnight: 'midnight', 58528 noon: 'noon', 58529 morning: 'morning', 58530 afternoon: 'afternoon', 58531 evening: 'evening', 58532 night: 'night' 58533 } 58534}; 58535var formattingDayPeriodValues = { 58536 narrow: { 58537 am: 'a', 58538 pm: 'p', 58539 midnight: 'mi', 58540 noon: 'n', 58541 morning: 'in the morning', 58542 afternoon: 'in the afternoon', 58543 evening: 'in the evening', 58544 night: 'at night' 58545 }, 58546 abbreviated: { 58547 am: 'AM', 58548 pm: 'PM', 58549 midnight: 'midnight', 58550 noon: 'noon', 58551 morning: 'in the morning', 58552 afternoon: 'in the afternoon', 58553 evening: 'in the evening', 58554 night: 'at night' 58555 }, 58556 wide: { 58557 am: 'a.m.', 58558 pm: 'p.m.', 58559 midnight: 'midnight', 58560 noon: 'noon', 58561 morning: 'in the morning', 58562 afternoon: 'in the afternoon', 58563 evening: 'in the evening', 58564 night: 'at night' 58565 } 58566}; 58567var ordinalNumber = function ordinalNumber(dirtyNumber, _options) { 58568 var number = Number(dirtyNumber); 58569 58570 // If ordinal numbers depend on context, for example, 58571 // if they are different for different grammatical genders, 58572 // use `options.unit`. 58573 // 58574 // `unit` can be 'year', 'quarter', 'month', 'week', 'date', 'dayOfYear', 58575 // 'day', 'hour', 'minute', 'second'. 58576 58577 var rem100 = number % 100; 58578 if (rem100 > 20 || rem100 < 10) { 58579 switch (rem100 % 10) { 58580 case 1: 58581 return number + 'st'; 58582 case 2: 58583 return number + 'nd'; 58584 case 3: 58585 return number + 'rd'; 58586 } 58587 } 58588 return number + 'th'; 58589}; 58590var localize = { 58591 ordinalNumber: ordinalNumber, 58592 era: buildLocalizeFn({ 58593 values: eraValues, 58594 defaultWidth: 'wide' 58595 }), 58596 quarter: buildLocalizeFn({ 58597 values: quarterValues, 58598 defaultWidth: 'wide', 58599 argumentCallback: function argumentCallback(quarter) { 58600 return quarter - 1; 58601 } 58602 }), 58603 month: buildLocalizeFn({ 58604 values: monthValues, 58605 defaultWidth: 'wide' 58606 }), 58607 day: buildLocalizeFn({ 58608 values: dayValues, 58609 defaultWidth: 'wide' 58610 }), 58611 dayPeriod: buildLocalizeFn({ 58612 values: dayPeriodValues, 58613 defaultWidth: 'wide', 58614 formattingValues: formattingDayPeriodValues, 58615 defaultFormattingWidth: 'wide' 58616 }) 58617}; 58618/* harmony default export */ const _lib_localize = (localize); 58619;// CONCATENATED MODULE: ./node_modules/date-fns/esm/locale/_lib/buildMatchFn/index.js 58620function buildMatchFn(args) { 58621 return function (string) { 58622 var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; 58623 var width = options.width; 58624 var matchPattern = width && args.matchPatterns[width] || args.matchPatterns[args.defaultMatchWidth]; 58625 var matchResult = string.match(matchPattern); 58626 if (!matchResult) { 58627 return null; 58628 } 58629 var matchedString = matchResult[0]; 58630 var parsePatterns = width && args.parsePatterns[width] || args.parsePatterns[args.defaultParseWidth]; 58631 var key = Array.isArray(parsePatterns) ? findIndex(parsePatterns, function (pattern) { 58632 return pattern.test(matchedString); 58633 }) : findKey(parsePatterns, function (pattern) { 58634 return pattern.test(matchedString); 58635 }); 58636 var value; 58637 value = args.valueCallback ? args.valueCallback(key) : key; 58638 value = options.valueCallback ? options.valueCallback(value) : value; 58639 var rest = string.slice(matchedString.length); 58640 return { 58641 value: value, 58642 rest: rest 58643 }; 58644 }; 58645} 58646function findKey(object, predicate) { 58647 for (var key in object) { 58648 if (object.hasOwnProperty(key) && predicate(object[key])) { 58649 return key; 58650 } 58651 } 58652 return undefined; 58653} 58654function findIndex(array, predicate) { 58655 for (var key = 0; key < array.length; key++) { 58656 if (predicate(array[key])) { 58657 return key; 58658 } 58659 } 58660 return undefined; 58661} 58662;// CONCATENATED MODULE: ./node_modules/date-fns/esm/locale/_lib/buildMatchPatternFn/index.js 58663function buildMatchPatternFn(args) { 58664 return function (string) { 58665 var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {}; 58666 var matchResult = string.match(args.matchPattern); 58667 if (!matchResult) return null; 58668 var matchedString = matchResult[0]; 58669 var parseResult = string.match(args.parsePattern); 58670 if (!parseResult) return null; 58671 var value = args.valueCallback ? args.valueCallback(parseResult[0]) : parseResult[0]; 58672 value = options.valueCallback ? options.valueCallback(value) : value; 58673 var rest = string.slice(matchedString.length); 58674 return { 58675 value: value, 58676 rest: rest 58677 }; 58678 }; 58679} 58680;// CONCATENATED MODULE: ./node_modules/date-fns/esm/locale/en-US/_lib/match/index.js 58681 58682 58683var matchOrdinalNumberPattern = /^(\d+)(th|st|nd|rd)?/i; 58684var parseOrdinalNumberPattern = /\d+/i; 58685var matchEraPatterns = { 58686 narrow: /^(b|a)/i, 58687 abbreviated: /^(b\.?\s?c\.?|b\.?\s?c\.?\s?e\.?|a\.?\s?d\.?|c\.?\s?e\.?)/i, 58688 wide: /^(before christ|before common era|anno domini|common era)/i 58689}; 58690var parseEraPatterns = { 58691 any: [/^b/i, /^(a|c)/i] 58692}; 58693var matchQuarterPatterns = { 58694 narrow: /^[1234]/i, 58695 abbreviated: /^q[1234]/i, 58696 wide: /^[1234](th|st|nd|rd)? quarter/i 58697}; 58698var parseQuarterPatterns = { 58699 any: [/1/i, /2/i, /3/i, /4/i] 58700}; 58701var matchMonthPatterns = { 58702 narrow: /^[jfmasond]/i, 58703 abbreviated: /^(jan|feb|mar|apr|may|jun|jul|aug|sep|oct|nov|dec)/i, 58704 wide: /^(january|february|march|april|may|june|july|august|september|october|november|december)/i 58705}; 58706var parseMonthPatterns = { 58707 narrow: [/^j/i, /^f/i, /^m/i, /^a/i, /^m/i, /^j/i, /^j/i, /^a/i, /^s/i, /^o/i, /^n/i, /^d/i], 58708 any: [/^ja/i, /^f/i, /^mar/i, /^ap/i, /^may/i, /^jun/i, /^jul/i, /^au/i, /^s/i, /^o/i, /^n/i, /^d/i] 58709}; 58710var matchDayPatterns = { 58711 narrow: /^[smtwf]/i, 58712 short: /^(su|mo|tu|we|th|fr|sa)/i, 58713 abbreviated: /^(sun|mon|tue|wed|thu|fri|sat)/i, 58714 wide: /^(sunday|monday|tuesday|wednesday|thursday|friday|saturday)/i 58715}; 58716var parseDayPatterns = { 58717 narrow: [/^s/i, /^m/i, /^t/i, /^w/i, /^t/i, /^f/i, /^s/i], 58718 any: [/^su/i, /^m/i, /^tu/i, /^w/i, /^th/i, /^f/i, /^sa/i] 58719}; 58720var matchDayPeriodPatterns = { 58721 narrow: /^(a|p|mi|n|(in the|at) (morning|afternoon|evening|night))/i, 58722 any: /^([ap]\.?\s?m\.?|midnight|noon|(in the|at) (morning|afternoon|evening|night))/i 58723}; 58724var parseDayPeriodPatterns = { 58725 any: { 58726 am: /^a/i, 58727 pm: /^p/i, 58728 midnight: /^mi/i, 58729 noon: /^no/i, 58730 morning: /morning/i, 58731 afternoon: /afternoon/i, 58732 evening: /evening/i, 58733 night: /night/i 58734 } 58735}; 58736var match_match = { 58737 ordinalNumber: buildMatchPatternFn({ 58738 matchPattern: matchOrdinalNumberPattern, 58739 parsePattern: parseOrdinalNumberPattern, 58740 valueCallback: function valueCallback(value) { 58741 return parseInt(value, 10); 58742 } 58743 }), 58744 era: buildMatchFn({ 58745 matchPatterns: matchEraPatterns, 58746 defaultMatchWidth: 'wide', 58747 parsePatterns: parseEraPatterns, 58748 defaultParseWidth: 'any' 58749 }), 58750 quarter: buildMatchFn({ 58751 matchPatterns: matchQuarterPatterns, 58752 defaultMatchWidth: 'wide', 58753 parsePatterns: parseQuarterPatterns, 58754 defaultParseWidth: 'any', 58755 valueCallback: function valueCallback(index) { 58756 return index + 1; 58757 } 58758 }), 58759 month: buildMatchFn({ 58760 matchPatterns: matchMonthPatterns, 58761 defaultMatchWidth: 'wide', 58762 parsePatterns: parseMonthPatterns, 58763 defaultParseWidth: 'any' 58764 }), 58765 day: buildMatchFn({ 58766 matchPatterns: matchDayPatterns, 58767 defaultMatchWidth: 'wide', 58768 parsePatterns: parseDayPatterns, 58769 defaultParseWidth: 'any' 58770 }), 58771 dayPeriod: buildMatchFn({ 58772 matchPatterns: matchDayPeriodPatterns, 58773 defaultMatchWidth: 'any', 58774 parsePatterns: parseDayPeriodPatterns, 58775 defaultParseWidth: 'any' 58776 }) 58777}; 58778/* harmony default export */ const _lib_match = (match_match); 58779;// CONCATENATED MODULE: ./node_modules/date-fns/esm/locale/en-US/index.js 58780 58781 58782 58783 58784 58785/** 58786 * @type {Locale} 58787 * @category Locales 58788 * @summary English locale (United States). 58789 * @language English 58790 * @iso-639-2 eng 58791 * @author Sasha Koss [@kossnocorp]{@link https://github.com/kossnocorp} 58792 * @author Lesha Koss [@leshakoss]{@link https://github.com/leshakoss} 58793 */ 58794var locale = { 58795 code: 'en-US', 58796 formatDistance: _lib_formatDistance, 58797 formatLong: _lib_formatLong, 58798 formatRelative: _lib_formatRelative, 58799 localize: _lib_localize, 58800 match: _lib_match, 58801 options: { 58802 weekStartsOn: 0 /* Sunday */, 58803 firstWeekContainsDate: 1 58804 } 58805}; 58806/* harmony default export */ const en_US = (locale); 58807;// CONCATENATED MODULE: ./node_modules/date-fns/esm/_lib/defaultLocale/index.js 58808 58809/* harmony default export */ const defaultLocale = (en_US); 58810;// CONCATENATED MODULE: ./node_modules/date-fns/esm/format/index.js 58811 58812 58813 58814 58815 58816 58817 58818 58819 58820 58821 // This RegExp consists of three parts separated by `|`:
vendor: 22,713 bytes, lines 58821-59135
58821 58822// - [yYQqMLwIdDecihHKkms]o matches any available ordinal number token 58823// (one of the certain letters followed by `o`) 58824// - (\w)\1* matches any sequences of the same letter 58825// - '' matches two quote characters in a row 58826// - '(''|[^'])+('|$) matches anything surrounded by two quote characters ('), 58827// except a single quote symbol, which ends the sequence. 58828// Two quote characters do not end the sequence. 58829// If there is no matching single quote 58830// then the sequence will continue until the end of the string. 58831// - . matches any single character unmatched by previous parts of the RegExps 58832var formattingTokensRegExp = /[yYQqMLwIdDecihHKkms]o|(\w)\1*|''|'(''|[^'])+('|$)|./g; 58833 58834// This RegExp catches symbols escaped by quotes, and also 58835// sequences of symbols P, p, and the combinations like `PPPPPPPppppp` 58836var longFormattingTokensRegExp = /P+p+|P+|p+|''|'(''|[^'])+('|$)|./g; 58837var escapedStringRegExp = /^'([^]*?)'?$/; 58838var doubleQuoteRegExp = /''/g; 58839var unescapedLatinCharacterRegExp = /[a-zA-Z]/; 58840 58841/** 58842 * @name format 58843 * @category Common Helpers 58844 * @summary Format the date. 58845 * 58846 * @description 58847 * Return the formatted date string in the given format. The result may vary by locale. 58848 * 58849 * > â ï¸ Please note that the `format` tokens differ from Moment.js and other libraries. 58850 * > See: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md 58851 * 58852 * The characters wrapped between two single quotes characters (') are escaped. 58853 * Two single quotes in a row, whether inside or outside a quoted sequence, represent a 'real' single quote. 58854 * (see the last example) 58855 * 58856 * Format of the string is based on Unicode Technical Standard #35: 58857 * https://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table 58858 * with a few additions (see note 7 below the table). 58859 * 58860 * Accepted patterns: 58861 * | Unit | Pattern | Result examples | Notes | 58862 * |---------------------------------|---------|-----------------------------------|-------| 58863 * | Era | G..GGG | AD, BC | | 58864 * | | GGGG | Anno Domini, Before Christ | 2 | 58865 * | | GGGGG | A, B | | 58866 * | Calendar year | y | 44, 1, 1900, 2017 | 5 | 58867 * | | yo | 44th, 1st, 0th, 17th | 5,7 | 58868 * | | yy | 44, 01, 00, 17 | 5 | 58869 * | | yyy | 044, 001, 1900, 2017 | 5 | 58870 * | | yyyy | 0044, 0001, 1900, 2017 | 5 | 58871 * | | yyyyy | ... | 3,5 | 58872 * | Local week-numbering year | Y | 44, 1, 1900, 2017 | 5 | 58873 * | | Yo | 44th, 1st, 1900th, 2017th | 5,7 | 58874 * | | YY | 44, 01, 00, 17 | 5,8 | 58875 * | | YYY | 044, 001, 1900, 2017 | 5 | 58876 * | | YYYY | 0044, 0001, 1900, 2017 | 5,8 | 58877 * | | YYYYY | ... | 3,5 | 58878 * | ISO week-numbering year | R | -43, 0, 1, 1900, 2017 | 5,7 | 58879 * | | RR | -43, 00, 01, 1900, 2017 | 5,7 | 58880 * | | RRR | -043, 000, 001, 1900, 2017 | 5,7 | 58881 * | | RRRR | -0043, 0000, 0001, 1900, 2017 | 5,7 | 58882 * | | RRRRR | ... | 3,5,7 | 58883 * | Extended year | u | -43, 0, 1, 1900, 2017 | 5 | 58884 * | | uu | -43, 01, 1900, 2017 | 5 | 58885 * | | uuu | -043, 001, 1900, 2017 | 5 | 58886 * | | uuuu | -0043, 0001, 1900, 2017 | 5 | 58887 * | | uuuuu | ... | 3,5 | 58888 * | Quarter (formatting) | Q | 1, 2, 3, 4 | | 58889 * | | Qo | 1st, 2nd, 3rd, 4th | 7 | 58890 * | | QQ | 01, 02, 03, 04 | | 58891 * | | QQQ | Q1, Q2, Q3, Q4 | | 58892 * | | QQQQ | 1st quarter, 2nd quarter, ... | 2 | 58893 * | | QQQQQ | 1, 2, 3, 4 | 4 | 58894 * | Quarter (stand-alone) | q | 1, 2, 3, 4 | | 58895 * | | qo | 1st, 2nd, 3rd, 4th | 7 | 58896 * | | qq | 01, 02, 03, 04 | | 58897 * | | qqq | Q1, Q2, Q3, Q4 | | 58898 * | | qqqq | 1st quarter, 2nd quarter, ... | 2 | 58899 * | | qqqqq | 1, 2, 3, 4 | 4 | 58900 * | Month (formatting) | M | 1, 2, ..., 12 | | 58901 * | | Mo | 1st, 2nd, ..., 12th | 7 | 58902 * | | MM | 01, 02, ..., 12 | | 58903 * | | MMM | Jan, Feb, ..., Dec | | 58904 * | | MMMM | January, February, ..., December | 2 | 58905 * | | MMMMM | J, F, ..., D | | 58906 * | Month (stand-alone) | L | 1, 2, ..., 12 | | 58907 * | | Lo | 1st, 2nd, ..., 12th | 7 | 58908 * | | LL | 01, 02, ..., 12 | | 58909 * | | LLL | Jan, Feb, ..., Dec | | 58910 * | | LLLL | January, February, ..., December | 2 | 58911 * | | LLLLL | J, F, ..., D | | 58912 * | Local week of year | w | 1, 2, ..., 53 | | 58913 * | | wo | 1st, 2nd, ..., 53th | 7 | 58914 * | | ww | 01, 02, ..., 53 | | 58915 * | ISO week of year | I | 1, 2, ..., 53 | 7 | 58916 * | | Io | 1st, 2nd, ..., 53th | 7 | 58917 * | | II | 01, 02, ..., 53 | 7 | 58918 * | Day of month | d | 1, 2, ..., 31 | | 58919 * | | do | 1st, 2nd, ..., 31st | 7 | 58920 * | | dd | 01, 02, ..., 31 | | 58921 * | Day of year | D | 1, 2, ..., 365, 366 | 9 | 58922 * | | Do | 1st, 2nd, ..., 365th, 366th | 7 | 58923 * | | DD | 01, 02, ..., 365, 366 | 9 | 58924 * | | DDD | 001, 002, ..., 365, 366 | | 58925 * | | DDDD | ... | 3 | 58926 * | Day of week (formatting) | E..EEE | Mon, Tue, Wed, ..., Sun | | 58927 * | | EEEE | Monday, Tuesday, ..., Sunday | 2 | 58928 * | | EEEEE | M, T, W, T, F, S, S | | 58929 * | | EEEEEE | Mo, Tu, We, Th, Fr, Sa, Su | | 58930 * | ISO day of week (formatting) | i | 1, 2, 3, ..., 7 | 7 | 58931 * | | io | 1st, 2nd, ..., 7th | 7 | 58932 * | | ii | 01, 02, ..., 07 | 7 | 58933 * | | iii | Mon, Tue, Wed, ..., Sun | 7 | 58934 * | | iiii | Monday, Tuesday, ..., Sunday | 2,7 | 58935 * | | iiiii | M, T, W, T, F, S, S | 7 | 58936 * | | iiiiii | Mo, Tu, We, Th, Fr, Sa, Su | 7 | 58937 * | Local day of week (formatting) | e | 2, 3, 4, ..., 1 | | 58938 * | | eo | 2nd, 3rd, ..., 1st | 7 | 58939 * | | ee | 02, 03, ..., 01 | | 58940 * | | eee | Mon, Tue, Wed, ..., Sun | | 58941 * | | eeee | Monday, Tuesday, ..., Sunday | 2 | 58942 * | | eeeee | M, T, W, T, F, S, S | | 58943 * | | eeeeee | Mo, Tu, We, Th, Fr, Sa, Su | | 58944 * | Local day of week (stand-alone) | c | 2, 3, 4, ..., 1 | | 58945 * | | co | 2nd, 3rd, ..., 1st | 7 | 58946 * | | cc | 02, 03, ..., 01 | | 58947 * | | ccc | Mon, Tue, Wed, ..., Sun | | 58948 * | | cccc | Monday, Tuesday, ..., Sunday | 2 | 58949 * | | ccccc | M, T, W, T, F, S, S | | 58950 * | | cccccc | Mo, Tu, We, Th, Fr, Sa, Su | | 58951 * | AM, PM | a..aa | AM, PM | | 58952 * | | aaa | am, pm | | 58953 * | | aaaa | a.m., p.m. | 2 | 58954 * | | aaaaa | a, p | | 58955 * | AM, PM, noon, midnight | b..bb | AM, PM, noon, midnight | | 58956 * | | bbb | am, pm, noon, midnight | | 58957 * | | bbbb | a.m., p.m., noon, midnight | 2 | 58958 * | | bbbbb | a, p, n, mi | | 58959 * | Flexible day period | B..BBB | at night, in the morning, ... | | 58960 * | | BBBB | at night, in the morning, ... | 2 | 58961 * | | BBBBB | at night, in the morning, ... | | 58962 * | Hour [1-12] | h | 1, 2, ..., 11, 12 | | 58963 * | | ho | 1st, 2nd, ..., 11th, 12th | 7 | 58964 * | | hh | 01, 02, ..., 11, 12 | | 58965 * | Hour [0-23] | H | 0, 1, 2, ..., 23 | | 58966 * | | Ho | 0th, 1st, 2nd, ..., 23rd | 7 | 58967 * | | HH | 00, 01, 02, ..., 23 | | 58968 * | Hour [0-11] | K | 1, 2, ..., 11, 0 | | 58969 * | | Ko | 1st, 2nd, ..., 11th, 0th | 7 | 58970 * | | KK | 01, 02, ..., 11, 00 | | 58971 * | Hour [1-24] | k | 24, 1, 2, ..., 23 | | 58972 * | | ko | 24th, 1st, 2nd, ..., 23rd | 7 | 58973 * | | kk | 24, 01, 02, ..., 23 | | 58974 * | Minute | m | 0, 1, ..., 59 | | 58975 * | | mo | 0th, 1st, ..., 59th | 7 | 58976 * | | mm | 00, 01, ..., 59 | | 58977 * | Second | s | 0, 1, ..., 59 | | 58978 * | | so | 0th, 1st, ..., 59th | 7 | 58979 * | | ss | 00, 01, ..., 59 | | 58980 * | Fraction of second | S | 0, 1, ..., 9 | | 58981 * | | SS | 00, 01, ..., 99 | | 58982 * | | SSS | 000, 001, ..., 999 | | 58983 * | | SSSS | ... | 3 | 58984 * | Timezone (ISO-8601 w/ Z) | X | -08, +0530, Z | | 58985 * | | XX | -0800, +0530, Z | | 58986 * | | XXX | -08:00, +05:30, Z | | 58987 * | | XXXX | -0800, +0530, Z, +123456 | 2 | 58988 * | | XXXXX | -08:00, +05:30, Z, +12:34:56 | | 58989 * | Timezone (ISO-8601 w/o Z) | x | -08, +0530, +00 | | 58990 * | | xx | -0800, +0530, +0000 | | 58991 * | | xxx | -08:00, +05:30, +00:00 | 2 | 58992 * | | xxxx | -0800, +0530, +0000, +123456 | | 58993 * | | xxxxx | -08:00, +05:30, +00:00, +12:34:56 | | 58994 * | Timezone (GMT) | O...OOO | GMT-8, GMT+5:30, GMT+0 | | 58995 * | | OOOO | GMT-08:00, GMT+05:30, GMT+00:00 | 2 | 58996 * | Timezone (specific non-locat.) | z...zzz | GMT-8, GMT+5:30, GMT+0 | 6 | 58997 * | | zzzz | GMT-08:00, GMT+05:30, GMT+00:00 | 2,6 | 58998 * | Seconds timestamp | t | 512969520 | 7 | 58999 * | | tt | ... | 3,7 | 59000 * | Milliseconds timestamp | T | 512969520900 | 7 | 59001 * | | TT | ... | 3,7 | 59002 * | Long localized date | P | 04/29/1453 | 7 | 59003 * | | PP | Apr 29, 1453 | 7 | 59004 * | | PPP | April 29th, 1453 | 7 | 59005 * | | PPPP | Friday, April 29th, 1453 | 2,7 | 59006 * | Long localized time | p | 12:00 AM | 7 | 59007 * | | pp | 12:00:00 AM | 7 | 59008 * | | ppp | 12:00:00 AM GMT+2 | 7 | 59009 * | | pppp | 12:00:00 AM GMT+02:00 | 2,7 | 59010 * | Combination of date and time | Pp | 04/29/1453, 12:00 AM | 7 | 59011 * | | PPpp | Apr 29, 1453, 12:00:00 AM | 7 | 59012 * | | PPPppp | April 29th, 1453 at ... | 7 | 59013 * | | PPPPpppp| Friday, April 29th, 1453 at ... | 2,7 | 59014 * Notes: 59015 * 1. "Formatting" units (e.g. formatting quarter) in the default en-US locale 59016 * are the same as "stand-alone" units, but are different in some languages. 59017 * "Formatting" units are declined according to the rules of the language 59018 * in the context of a date. "Stand-alone" units are always nominative singular: 59019 * 59020 * `format(new Date(2017, 10, 6), 'do LLLL', {locale: cs}) //=> '6. listopad'` 59021 * 59022 * `format(new Date(2017, 10, 6), 'do MMMM', {locale: cs}) //=> '6. listopadu'` 59023 * 59024 * 2. Any sequence of the identical letters is a pattern, unless it is escaped by 59025 * the single quote characters (see below). 59026 * If the sequence is longer than listed in table (e.g. `EEEEEEEEEEE`) 59027 * the output will be the same as default pattern for this unit, usually 59028 * the longest one (in case of ISO weekdays, `EEEE`). Default patterns for units 59029 * are marked with "2" in the last column of the table. 59030 * 59031 * `format(new Date(2017, 10, 6), 'MMM') //=> 'Nov'` 59032 * 59033 * `format(new Date(2017, 10, 6), 'MMMM') //=> 'November'` 59034 * 59035 * `format(new Date(2017, 10, 6), 'MMMMM') //=> 'N'` 59036 * 59037 * `format(new Date(2017, 10, 6), 'MMMMMM') //=> 'November'` 59038 * 59039 * `format(new Date(2017, 10, 6), 'MMMMMMM') //=> 'November'` 59040 * 59041 * 3. Some patterns could be unlimited length (such as `yyyyyyyy`). 59042 * The output will be padded with zeros to match the length of the pattern. 59043 * 59044 * `format(new Date(2017, 10, 6), 'yyyyyyyy') //=> '00002017'` 59045 * 59046 * 4. `QQQQQ` and `qqqqq` could be not strictly numerical in some locales. 59047 * These tokens represent the shortest form of the quarter. 59048 * 59049 * 5. The main difference between `y` and `u` patterns are B.C. years: 59050 * 59051 * | Year | `y` | `u` | 59052 * |------|-----|-----| 59053 * | AC 1 | 1 | 1 | 59054 * | BC 1 | 1 | 0 | 59055 * | BC 2 | 2 | -1 | 59056 * 59057 * Also `yy` always returns the last two digits of a year, 59058 * while `uu` pads single digit years to 2 characters and returns other years unchanged: 59059 * 59060 * | Year | `yy` | `uu` | 59061 * |------|------|------| 59062 * | 1 | 01 | 01 | 59063 * | 14 | 14 | 14 | 59064 * | 376 | 76 | 376 | 59065 * | 1453 | 53 | 1453 | 59066 * 59067 * The same difference is true for local and ISO week-numbering years (`Y` and `R`), 59068 * except local week-numbering years are dependent on `options.weekStartsOn` 59069 * and `options.firstWeekContainsDate` (compare [getISOWeekYear]{@link https://date-fns.org/docs/getISOWeekYear} 59070 * and [getWeekYear]{@link https://date-fns.org/docs/getWeekYear}). 59071 * 59072 * 6. Specific non-location timezones are currently unavailable in `date-fns`, 59073 * so right now these tokens fall back to GMT timezones. 59074 * 59075 * 7. These patterns are not in the Unicode Technical Standard #35: 59076 * - `i`: ISO day of week 59077 * - `I`: ISO week of year 59078 * - `R`: ISO week-numbering year 59079 * - `t`: seconds timestamp 59080 * - `T`: milliseconds timestamp 59081 * - `o`: ordinal number modifier 59082 * - `P`: long localized date 59083 * - `p`: long localized time 59084 * 59085 * 8. `YY` and `YYYY` tokens represent week-numbering years but they are often confused with years. 59086 * You should enable `options.useAdditionalWeekYearTokens` to use them. See: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md 59087 * 59088 * 9. `D` and `DD` tokens represent days of the year but they are often confused with days of the month. 59089 * You should enable `options.useAdditionalDayOfYearTokens` to use them. See: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md 59090 * 59091 * @param {Date|Number} date - the original date 59092 * @param {String} format - the string of tokens 59093 * @param {Object} [options] - an object with options. 59094 * @param {Locale} [options.locale=defaultLocale] - the locale object. See [Locale]{@link https://date-fns.org/docs/Locale} 59095 * @param {0|1|2|3|4|5|6} [options.weekStartsOn=0] - the index of the first day of the week (0 - Sunday) 59096 * @param {Number} [options.firstWeekContainsDate=1] - the day of January, which is 59097 * @param {Boolean} [options.useAdditionalWeekYearTokens=false] - if true, allows usage of the week-numbering year tokens `YY` and `YYYY`; 59098 * see: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md 59099 * @param {Boolean} [options.useAdditionalDayOfYearTokens=false] - if true, allows usage of the day of year tokens `D` and `DD`; 59100 * see: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md 59101 * @returns {String} the formatted date string 59102 * @throws {TypeError} 2 arguments required 59103 * @throws {RangeError} `date` must not be Invalid Date 59104 * @throws {RangeError} `options.locale` must contain `localize` property 59105 * @throws {RangeError} `options.locale` must contain `formatLong` property 59106 * @throws {RangeError} `options.weekStartsOn` must be between 0 and 6 59107 * @throws {RangeError} `options.firstWeekContainsDate` must be between 1 and 7 59108 * @throws {RangeError} use `yyyy` instead of `YYYY` for formatting years using [format provided] to the input [input provided]; see: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md 59109 * @throws {RangeError} use `yy` instead of `YY` for formatting years using [format provided] to the input [input provided]; see: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md 59110 * @throws {RangeError} use `d` instead of `D` for formatting days of the month using [format provided] to the input [input provided]; see: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md 59111 * @throws {RangeError} use `dd` instead of `DD` for formatting days of the month using [format provided] to the input [input provided]; see: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md 59112 * @throws {RangeError} format string contains an unescaped latin alphabet character 59113 * 59114 * @example 59115 * // Represent 11 February 2014 in middle-endian format: 59116 * const result = format(new Date(2014, 1, 11), 'MM/dd/yyyy') 59117 * //=> '02/11/2014' 59118 * 59119 * @example 59120 * // Represent 2 July 2014 in Esperanto: 59121 * import { eoLocale } from 'date-fns/locale/eo' 59122 * const result = format(new Date(2014, 6, 2), "do 'de' MMMM yyyy", { 59123 * locale: eoLocale 59124 * }) 59125 * //=> '2-a de julio 2014' 59126 * 59127 * @example 59128 * // Escape string by single quote characters: 59129 * const result = format(new Date(2014, 6, 2, 15), "h 'o''clock'") 59130 * //=> "3 o'clock" 59131 */ 59132 59133function format(dirtyDate, dirtyFormatStr, options) { 59134 var _ref, _options$locale, _ref2, _ref3, _ref4, _options$firstWeekCon, _options$locale2, _options$locale2$opti, _defaultOptions$local, _defaultOptions$local2, _ref5, _ref6, _ref7, _options$weekStartsOn, _options$locale3, _options$locale3$opti, _defaultOptions$local3, _defaultOptions$local4; 59135 requiredArgs
vendor: 4,498 bytes, lines 59135-59192
59135_requiredArgs(2, arguments); 59136 var formatStr = String(dirtyFormatStr); 59137 var defaultOptions = getDefaultOptions(); 59138 var locale = (_ref = (_options$locale = options === null || options === void 0 ? void 0 : options.locale) !== null && _options$locale !== void 0 ? _options$locale : defaultOptions.locale) !== null && _ref !== void 0 ? _ref : defaultLocale; 59139 var firstWeekContainsDate = toInteger_toInteger((_ref2 = (_ref3 = (_ref4 = (_options$firstWeekCon = options === null || options === void 0 ? void 0 : options.firstWeekContainsDate) !== null && _options$firstWeekCon !== void 0 ? _options$firstWeekCon : options === null || options === void 0 ? void 0 : (_options$locale2 = options.locale) === null || _options$locale2 === void 0 ? void 0 : (_options$locale2$opti = _options$locale2.options) === null || _options$locale2$opti === void 0 ? void 0 : _options$locale2$opti.firstWeekContainsDate) !== null && _ref4 !== void 0 ? _ref4 : defaultOptions.firstWeekContainsDate) !== null && _ref3 !== void 0 ? _ref3 : (_defaultOptions$local = defaultOptions.locale) === null || _defaultOptions$local === void 0 ? void 0 : (_defaultOptions$local2 = _defaultOptions$local.options) === null || _defaultOptions$local2 === void 0 ? void 0 : _defaultOptions$local2.firstWeekContainsDate) !== null && _ref2 !== void 0 ? _ref2 : 1); 59140 59141 // Test if weekStartsOn is between 1 and 7 _and_ is not NaN 59142 if (!(firstWeekContainsDate >= 1 && firstWeekContainsDate <= 7)) { 59143 throw new RangeError('firstWeekContainsDate must be between 1 and 7 inclusively'); 59144 } 59145 var weekStartsOn = toInteger_toInteger((_ref5 = (_ref6 = (_ref7 = (_options$weekStartsOn = options === null || options === void 0 ? void 0 : options.weekStartsOn) !== null && _options$weekStartsOn !== void 0 ? _options$weekStartsOn : options === null || options === void 0 ? void 0 : (_options$locale3 = options.locale) === null || _options$locale3 === void 0 ? void 0 : (_options$locale3$opti = _options$locale3.options) === null || _options$locale3$opti === void 0 ? void 0 : _options$locale3$opti.weekStartsOn) !== null && _ref7 !== void 0 ? _ref7 : defaultOptions.weekStartsOn) !== null && _ref6 !== void 0 ? _ref6 : (_defaultOptions$local3 = defaultOptions.locale) === null || _defaultOptions$local3 === void 0 ? void 0 : (_defaultOptions$local4 = _defaultOptions$local3.options) === null || _defaultOptions$local4 === void 0 ? void 0 : _defaultOptions$local4.weekStartsOn) !== null && _ref5 !== void 0 ? _ref5 : 0); 59146 59147 // Test if weekStartsOn is between 0 and 6 _and_ is not NaN 59148 if (!(weekStartsOn >= 0 && weekStartsOn <= 6)) { 59149 throw new RangeError('weekStartsOn must be between 0 and 6 inclusively'); 59150 } 59151 if (!locale.localize) { 59152 throw new RangeError('locale must contain localize property'); 59153 } 59154 if (!locale.formatLong) { 59155 throw new RangeError('locale must contain formatLong property'); 59156 } 59157 var originalDate = toDate_toDate(dirtyDate); 59158 if (!isValid(originalDate)) { 59159 throw new RangeError('Invalid time value'); 59160 } 59161 59162 // Convert the date in system timezone to the same date in UTC+00:00 timezone. 59163 // This ensures that when UTC functions will be implemented, locales will be compatible with them. 59164 // See an issue about UTC functions: https://github.com/date-fns/date-fns/issues/376 59165 var timezoneOffset = getTimezoneOffsetInMilliseconds(originalDate); 59166 var utcDate = subMilliseconds(originalDate, timezoneOffset); 59167 var formatterOptions = { 59168 firstWeekContainsDate: firstWeekContainsDate, 59169 weekStartsOn: weekStartsOn, 59170 locale: locale, 59171 _originalDate: originalDate 59172 }; 59173 var result = formatStr.match(longFormattingTokensRegExp).map(function (substring) { 59174 var firstCharacter = substring[0]; 59175 if (firstCharacter === 'p' || firstCharacter === 'P') { 59176 var longFormatter = format_longFormatters[firstCharacter]; 59177 return longFormatter(substring, locale.formatLong); 59178 } 59179 return substring; 59180 }).join('').match(formattingTokensRegExp).map(function (substring) { 59181 // Replace two single quote characters with one single quote character 59182 if (substring === "''") { 59183 return "'"; 59184 } 59185 var firstCharacter = substring[0]; 59186 if (firstCharacter === "'") { 59187 return cleanEscapedString(substring); 59188 } 59189 var formatter = format_formatters[firstCharacter]; 59190 if (formatter) { 59191 if (!(options !== null && options !== void 0 && options.useAdditionalWeekYearTokens) && isProtectedWeekYearToken(substring)) { 59192 throwProtectedError(substring, dirtyFormatStr, String(dirt
vendor: 4,932 bytes, lines 59192-59335
59192yDate)); 59193 } 59194 if (!(options !== null && options !== void 0 && options.useAdditionalDayOfYearTokens) && isProtectedDayOfYearToken(substring)) { 59195 throwProtectedError(substring, dirtyFormatStr, String(dirtyDate)); 59196 } 59197 return formatter(utcDate, substring, locale.localize, formatterOptions); 59198 } 59199 if (firstCharacter.match(unescapedLatinCharacterRegExp)) { 59200 throw new RangeError('Format string contains an unescaped latin alphabet character `' + firstCharacter + '`'); 59201 } 59202 return substring; 59203 }).join(''); 59204 return result; 59205} 59206function cleanEscapedString(input) { 59207 var matched = input.match(escapedStringRegExp); 59208 if (!matched) { 59209 return input; 59210 } 59211 return matched[1].replace(doubleQuoteRegExp, "'"); 59212} 59213;// CONCATENATED MODULE: ./node_modules/date-fns/esm/isSameMonth/index.js 59214 59215 59216/** 59217 * @name isSameMonth 59218 * @category Month Helpers 59219 * @summary Are the given dates in the same month (and year)? 59220 * 59221 * @description 59222 * Are the given dates in the same month (and year)? 59223 * 59224 * @param {Date|Number} dateLeft - the first date to check 59225 * @param {Date|Number} dateRight - the second date to check 59226 * @returns {Boolean} the dates are in the same month (and year) 59227 * @throws {TypeError} 2 arguments required 59228 * 59229 * @example 59230 * // Are 2 September 2014 and 25 September 2014 in the same month? 59231 * const result = isSameMonth(new Date(2014, 8, 2), new Date(2014, 8, 25)) 59232 * //=> true 59233 * 59234 * @example 59235 * // Are 2 September 2014 and 25 September 2015 in the same month? 59236 * const result = isSameMonth(new Date(2014, 8, 2), new Date(2015, 8, 25)) 59237 * //=> false 59238 */ 59239function isSameMonth(dirtyDateLeft, dirtyDateRight) { 59240 requiredArgs_requiredArgs(2, arguments); 59241 var dateLeft = toDate_toDate(dirtyDateLeft); 59242 var dateRight = toDate_toDate(dirtyDateRight); 59243 return dateLeft.getFullYear() === dateRight.getFullYear() && dateLeft.getMonth() === dateRight.getMonth(); 59244} 59245;// CONCATENATED MODULE: ./node_modules/date-fns/esm/isEqual/index.js 59246 59247 59248/** 59249 * @name isEqual 59250 * @category Common Helpers 59251 * @summary Are the given dates equal? 59252 * 59253 * @description 59254 * Are the given dates equal? 59255 * 59256 * @param {Date|Number} dateLeft - the first date to compare 59257 * @param {Date|Number} dateRight - the second date to compare 59258 * @returns {Boolean} the dates are equal 59259 * @throws {TypeError} 2 arguments required 59260 * 59261 * @example 59262 * // Are 2 July 2014 06:30:45.000 and 2 July 2014 06:30:45.500 equal? 59263 * const result = isEqual( 59264 * new Date(2014, 6, 2, 6, 30, 45, 0), 59265 * new Date(2014, 6, 2, 6, 30, 45, 500) 59266 * ) 59267 * //=> false 59268 */ 59269function isEqual_isEqual(dirtyLeftDate, dirtyRightDate) { 59270 requiredArgs_requiredArgs(2, arguments); 59271 var dateLeft = toDate_toDate(dirtyLeftDate); 59272 var dateRight = toDate_toDate(dirtyRightDate); 59273 return dateLeft.getTime() === dateRight.getTime(); 59274} 59275;// CONCATENATED MODULE: ./node_modules/date-fns/esm/isSameDay/index.js 59276 59277 59278/** 59279 * @name isSameDay 59280 * @category Day Helpers 59281 * @summary Are the given dates in the same day (and year and month)? 59282 * 59283 * @description 59284 * Are the given dates in the same day (and year and month)? 59285 * 59286 * @param {Date|Number} dateLeft - the first date to check 59287 * @param {Date|Number} dateRight - the second date to check 59288 * @returns {Boolean} the dates are in the same day (and year and month) 59289 * @throws {TypeError} 2 arguments required 59290 * 59291 * @example 59292 * // Are 4 September 06:00:00 and 4 September 18:00:00 in the same day? 59293 * const result = isSameDay(new Date(2014, 8, 4, 6, 0), new Date(2014, 8, 4, 18, 0)) 59294 * //=> true 59295 * 59296 * @example 59297 * // Are 4 September and 4 October in the same day? 59298 * const result = isSameDay(new Date(2014, 8, 4), new Date(2014, 9, 4)) 59299 * //=> false 59300 * 59301 * @example 59302 * // Are 4 September, 2014 and 4 September, 2015 in the same day? 59303 * const result = isSameDay(new Date(2014, 8, 4), new Date(2015, 8, 4)) 59304 * //=> false 59305 */ 59306function isSameDay(dirtyDateLeft, dirtyDateRight) { 59307 requiredArgs_requiredArgs(2, arguments); 59308 var dateLeftStartOfDay = startOfDay_startOfDay(dirtyDateLeft); 59309 var dateRightStartOfDay = startOfDay_startOfDay(dirtyDateRight); 59310 return dateLeftStartOfDay.getTime() === dateRightStartOfDay.getTime(); 59311} 59312;// CONCATENATED MODULE: ./node_modules/date-fns/esm/addDays/index.js 59313 59314 59315 59316/** 59317 * @name addDays 59318 * @category Day Helpers 59319 * @summary Add the specified number of days to the given date. 59320 * 59321 * @description 59322 * Add the specified number of days to the given date. 59323 * 59324 * @param {Date|Number} date - the date to be changed 59325 * @param {Number} amount - the amount of days to be added. Positive decimals will be rounded using `Math.floor`, decimals less than zero will be rounded using `Math.ceil`. 59326 * @returns {Date} - the new date with the days added 59327 * @throws {TypeError} - 2 arguments required 59328 * 59329 * @example 59330 * // Add 10 days to 1 September 2014: 59331 * const result = addDays(new Date(2014, 8, 1), 10) 59332 * //=> Thu Sep 11 2014 00:00:00 59333 */ 59334function addDays_addDays(dirtyDate, dirtyAmount) { 59335 requiredArgs_requiredArgs(2, arguments);
vendor: 4,785 bytes, lines 59336-59444
59336 var date = toDate_toDate(dirtyDate); 59337 var amount = toInteger_toInteger(dirtyAmount); 59338 if (isNaN(amount)) { 59339 return new Date(NaN); 59340 } 59341 if (!amount) { 59342 // If 0 days, no-op to avoid changing times in the hour before end of DST 59343 return date; 59344 } 59345 date.setDate(date.getDate() + amount); 59346 return date; 59347} 59348;// CONCATENATED MODULE: ./node_modules/date-fns/esm/addWeeks/index.js 59349 59350 59351 59352/** 59353 * @name addWeeks 59354 * @category Week Helpers 59355 * @summary Add the specified number of weeks to the given date. 59356 * 59357 * @description 59358 * Add the specified number of week to the given date. 59359 * 59360 * @param {Date|Number} date - the date to be changed 59361 * @param {Number} amount - the amount of weeks to be added. Positive decimals will be rounded using `Math.floor`, decimals less than zero will be rounded using `Math.ceil`. 59362 * @returns {Date} the new date with the weeks added 59363 * @throws {TypeError} 2 arguments required 59364 * 59365 * @example 59366 * // Add 4 weeks to 1 September 2014: 59367 * const result = addWeeks(new Date(2014, 8, 1), 4) 59368 * //=> Mon Sep 29 2014 00:00:00 59369 */ 59370function addWeeks_addWeeks(dirtyDate, dirtyAmount) { 59371 requiredArgs_requiredArgs(2, arguments); 59372 var amount = toInteger_toInteger(dirtyAmount); 59373 var days = amount * 7; 59374 return addDays_addDays(dirtyDate, days); 59375} 59376;// CONCATENATED MODULE: ./node_modules/date-fns/esm/subWeeks/index.js 59377 59378 59379 59380/** 59381 * @name subWeeks 59382 * @category Week Helpers 59383 * @summary Subtract the specified number of weeks from the given date. 59384 * 59385 * @description 59386 * Subtract the specified number of weeks from the given date. 59387 * 59388 * @param {Date|Number} date - the date to be changed 59389 * @param {Number} amount - the amount of weeks to be subtracted. Positive decimals will be rounded using `Math.floor`, decimals less than zero will be rounded using `Math.ceil`. 59390 * @returns {Date} the new date with the weeks subtracted 59391 * @throws {TypeError} 2 arguments required 59392 * 59393 * @example 59394 * // Subtract 4 weeks from 1 September 2014: 59395 * const result = subWeeks(new Date(2014, 8, 1), 4) 59396 * //=> Mon Aug 04 2014 00:00:00 59397 */ 59398function subWeeks(dirtyDate, dirtyAmount) { 59399 requiredArgs_requiredArgs(2, arguments); 59400 var amount = toInteger_toInteger(dirtyAmount); 59401 return addWeeks_addWeeks(dirtyDate, -amount); 59402} 59403;// CONCATENATED MODULE: ./node_modules/date-fns/esm/startOfWeek/index.js 59404 59405 59406 59407 59408/** 59409 * @name startOfWeek 59410 * @category Week Helpers 59411 * @summary Return the start of a week for the given date. 59412 * 59413 * @description 59414 * Return the start of a week for the given date. 59415 * The result will be in the local timezone. 59416 * 59417 * @param {Date|Number} date - the original date 59418 * @param {Object} [options] - an object with options. 59419 * @param {Locale} [options.locale=defaultLocale] - the locale object. See [Locale]{@link https://date-fns.org/docs/Locale} 59420 * @param {0|1|2|3|4|5|6} [options.weekStartsOn=0] - the index of the first day of the week (0 - Sunday) 59421 * @returns {Date} the start of a week 59422 * @throws {TypeError} 1 argument required 59423 * @throws {RangeError} `options.weekStartsOn` must be between 0 and 6 59424 * 59425 * @example 59426 * // The start of a week for 2 September 2014 11:55:00: 59427 * const result = startOfWeek(new Date(2014, 8, 2, 11, 55, 0)) 59428 * //=> Sun Aug 31 2014 00:00:00 59429 * 59430 * @example 59431 * // If the week starts on Monday, the start of the week for 2 September 2014 11:55:00: 59432 * const result = startOfWeek(new Date(2014, 8, 2, 11, 55, 0), { weekStartsOn: 1 }) 59433 * //=> Mon Sep 01 2014 00:00:00 59434 */ 59435function startOfWeek_startOfWeek(dirtyDate, options) { 59436 var _ref, _ref2, _ref3, _options$weekStartsOn, _options$locale, _options$locale$optio, _defaultOptions$local, _defaultOptions$local2; 59437 requiredArgs_requiredArgs(1, arguments); 59438 var defaultOptions = getDefaultOptions(); 59439 var weekStartsOn = toInteger_toInteger((_ref = (_ref2 = (_ref3 = (_options$weekStartsOn = options === null || options === void 0 ? void 0 : options.weekStartsOn) !== null && _options$weekStartsOn !== void 0 ? _options$weekStartsOn : options === null || options === void 0 ? void 0 : (_options$locale = options.locale) === null || _options$locale === void 0 ? void 0 : (_options$locale$optio = _options$locale.options) === null || _options$locale$optio === void 0 ? void 0 : _options$locale$optio.weekStartsOn) !== null && _ref3 !== void 0 ? _ref3 : defaultOptions.weekStartsOn) !== null && _ref2 !== void 0 ? _ref2 : (_defaultOptions$local = defaultOptions.locale) === null || _defaultOptions$local === void 0 ? void 0 : (_defaultOptions$local2 = _defaultOptions$local.options) === null || _defaultOptions$local2 === void 0 ? void 0 : _defaultOptions$local2.weekStartsOn) !== null && _ref !== void 0 ? _ref : 0); 59440 59441 // Test if weekStartsOn is between 0 and 6 _and_ is not NaN 59442 if (!(weekStartsOn >= 0 && weekStartsOn <= 6)) { 59443 throw new RangeError('weekStartsOn must be between 0 and 6 inclusively'); 59444 }
59445 var date = toDate_toDate(dirtyDate); 59446 var day = date.getDay(); 59447 var diff = (day < weekStartsOn ? 7 : 0) + day - weekStartsOn; 59448 date.setDate(date.getDate() - diff); 59449 date.setHours(0, 0, 0, 0); 59450 return date; 59451} 59452;// CONCATENATED MODULE: ./node_modules/date-fns/esm/endOfWeek/index.js 59453 59454 59455 59456 59457/** 59458 * @name endOfWeek 59459 * @category Week Helpers 59460 * @summary Return the end of a week for the given date. 59461 * 59462 * @description 59463 * Return the end of a week for the given date. 59464 * The result will be in the local timezone. 59465 * 59466 * @param {Date|Number} date - the original date 59467 * @param {Object} [options] - an object with options. 59468 * @param {Locale} [options.locale=defaultLocale] - the locale object. See [Locale]{@link https://date-fns.org/docs/Locale} 59469 * @param {0|1|2|3|4|5|6} [options.weekStartsOn=0] - the index of the first day of the week (0 - Sunday) 59470 * @returns {Date} the end of a week 59471 * @throws {TypeError} 1 argument required 59472 * @throws {RangeError} `options.weekStartsOn` must be between 0 and 6 59473 * 59474 * @example 59475 * // The end of a week for 2 September 2014 11:55:00: 59476 * const result = endOfWeek(new Date(2014, 8, 2, 11, 55, 0)) 59477 * //=> Sat Sep 06 2014 23:59:59.999 59478 * 59479 * @example 59480 * // If the week starts on Monday, the end of the week for 2 September 2014 11:55:00: 59481 * const result = endOfWeek(new Date(2014, 8, 2, 11, 55, 0), { weekStartsOn: 1 }) 59482 * //=> Sun Sep 07 2014 23:59:59.999 59483 */ 59484function endOfWeek_endOfWeek(dirtyDate, options) { 59485 var _ref, _ref2, _ref3, _options$weekStartsOn, _options$locale, _options$locale$optio, _defaultOptions$local, _defaultOptions$local2; 59486 requiredArgs_requiredArgs(1, arguments); 59487 var defaultOptions = getDefaultOptions(); 59488 var weekStartsOn = toInteger_toInteger((_ref = (_ref2 = (_ref3 = (_options$weekStartsOn = options === null || options === void 0 ? void 0 : options.weekStartsOn) !== null && _options$weekStartsOn !== void 0 ? _options$weekStartsOn : options === null || options === void 0 ? void 0 : (_options$locale = options.locale) === null || _options$locale === void 0 ? void 0 : (_options$locale$optio = _options$locale.options) === null || _options$locale$optio === void 0 ? void 0 : _options$locale$optio.weekStartsOn) !== null && _ref3 !== void 0 ? _ref3 : defaultOptions.weekStartsOn) !== null && _ref2 !== void 0 ? _ref2 : (_defaultOptions$local = defaultOptions.locale) === null || _defaultOptions$local === void 0 ? void 0 : (_defaultOptions$local2 = _defaultOptions$local.options) === null || _defaultOptions$local2 === void 0 ? void 0 : _defaultOptions$local2.weekStartsOn) !== null && _ref !== void 0 ? _ref : 0); 59489 59490 // Test if weekStartsOn is between 0 and 6 _and_ is not NaN 59491 if (!(weekStartsOn >= 0 && weekStartsOn <= 6)) { 59492 throw new RangeError('weekStartsOn must be between 0 and 6 inclusively'); 59493 } 59494 var date = toDate_toDate(dirtyDate); 59495 var day = date.getDay(); 59496 var diff = (day < weekStartsOn ? -7 : 0) + 6 - (day - weekStartsOn); 59497 date.setDate(date.getDate() + diff); 59498 date.setHours(23, 59, 59, 999); 59499 return date; 59500} 59501;// CONCATENATED MODULE: ./packages/icons/build-module/library/arrow-right.js 59502 59503/** 59504 * WordPress dependencies 59505 */ 59506 59507const arrowRight = (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.SVG, { 59508 xmlns: "http://www.w3.org/2000/svg", 59509 viewBox: "0 0 24 24" 59510}, (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.Path, { 59511 d: "m14.5 6.5-1 1 3.7 3.7H4v1.6h13.2l-3.7 3.7 1 1 5.6-5.5z" 59512})); 59513/* harmony default export */ const arrow_right = (arrowRight); 59514 59515;// CONCATENATED MODULE: ./packages/icons/build-module/library/arrow-left.js 59516 59517/** 59518 * WordPress dependencies 59519 */ 59520 59521const arrowLeft = (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.SVG, { 59522 xmlns: "http://www.w3.org/2000/svg", 59523 viewBox: "0 0 24 24" 59524}, (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.Path, { 59525 d: "M20 11.2H6.8l3.7-3.7-1-1L3.9 12l5.6 5.5 1-1-3.7-3.7H20z" 59526})); 59527/* harmony default export */ const arrow_left = (arrowLeft); 59528 59529;// CONCATENATED MODULE: external ["wp","date"] 59530const external_wp_date_namespaceObject = window["wp"]["date"]; 59531;// CONCATENATED MODULE: ./packages/components/build-module/date-time/date/styles.js 59532 59533function date_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)."; } 59534/** 59535 * External dependencies 59536 */ 59537
59538/** 59539 * Internal dependencies 59540 */ 59541 59542 59543 59544 59545 59546const styles_Wrapper = emotion_styled_base_browser_esm("div", true ? { 59547 target: "e105ri6r5" 59548} : 0)( true ? { 59549 name: "1khn195", 59550 styles: "box-sizing:border-box" 59551} : 0); 59552const Navigator = /*#__PURE__*/emotion_styled_base_browser_esm(h_stack_component, true ? { 59553 target: "e105ri6r4" 59554} : 0)("margin-bottom:", space(4), ";" + ( true ? "" : 0)); 59555const NavigatorHeading = /*#__PURE__*/emotion_styled_base_browser_esm(heading_component, true ? { 59556 target: "e105ri6r3" 59557} : 0)("font-size:", config_values.fontSize, ";font-weight:", config_values.fontWeight, ";strong{font-weight:", config_values.fontWeightHeading, ";}" + ( true ? "" : 0)); 59558const Calendar = emotion_styled_base_browser_esm("div", true ? { 59559 target: "e105ri6r2" 59560} : 0)("column-gap:", space(2), ";display:grid;grid-template-columns:0.5fr repeat( 5, 1fr ) 0.5fr;justify-items:center;row-gap:", space(2), ";" + ( true ? "" : 0)); 59561const DayOfWeek = emotion_styled_base_browser_esm("div", true ? { 59562 target: "e105ri6r1" 59563} : 0)("color:", COLORS.gray[700], ";font-size:", config_values.fontSize, ";line-height:", config_values.fontLineHeightBase, ";&:nth-of-type( 1 ){justify-self:start;}&:nth-of-type( 7 ){justify-self:end;}" + ( true ? "" : 0)); 59564const DayButton = /*#__PURE__*/emotion_styled_base_browser_esm(build_module_button, true ? { 59565 shouldForwardProp: prop => !['column', 'isSelected', 'isToday', 'hasEvents'].includes(prop), 59566 target: "e105ri6r0" 59567} : 0)("grid-column:", props => props.column, ";position:relative;justify-content:center;", props => props.column === 1 && ` 59568 justify-self: start; 59569 `, " ", props => props.column === 7 && ` 59570 justify-self: end; 59571 `, " ", props => props.disabled && ` 59572 pointer-events: none; 59573 `, " &&&{border-radius:100%;height:", space(7), ";width:", space(7), ";", props => props.isSelected && ` 59574 background: ${COLORS.theme.accent}; 59575 color: ${COLORS.white}; 59576 `, " ", props => !props.isSelected && props.isToday && ` 59577 background: ${COLORS.gray[200]}; 59578 `, ";}", props => props.hasEvents && ` 59579 ::before { 59580 background: ${props.isSelected ? COLORS.white : COLORS.theme.accent}; 59581 border-radius: 2px; 59582 bottom: 0; 59583 content: " "; 59584 height: 4px; 59585 left: 50%; 59586 margin-left: -2px; 59587 position: absolute; 59588 width: 4px; 59589 } 59590 `, ";" + ( true ? "" : 0)); 59591 59592;// CONCATENATED MODULE: ./packages/components/build-module/date-time/utils.js 59593/** 59594 * External dependencies 59595 */ 59596 59597 59598/** 59599 * Like date-fn's toDate, but tries to guess the format when a string is 59600 * given. 59601 * 59602 * @param input Value to turn into a date. 59603 */ 59604function inputToDate(input) { 59605 if (typeof input === 'string') { 59606 return new Date(input); 59607 } 59608 return toDate_toDate(input); 59609} 59610 59611;// CONCATENATED MODULE: ./packages/components/build-module/date-time/constants.js 59612const TIMEZONELESS_FORMAT = "yyyy-MM-dd'T'HH:mm:ss"; 59613 59614;// CONCATENATED MODULE: ./packages/components/build-module/date-time/date/index.js 59615 59616/** 59617 * External dependencies 59618 */ 59619 59620 59621/** 59622 * WordPress dependencies 59623 */ 59624 59625 59626 59627 59628 59629/** 59630 * Internal dependencies 59631 */ 59632 59633 59634 59635 59636 59637 59638/** 59639 * DatePicker is a React component that renders a calendar for date selection. 59640 * 59641 * ```jsx 59642 * import { DatePicker } from '@wordpress/components'; 59643 * import { useState } from '@wordpress/element'; 59644 * 59645 * const MyDatePicker = () => { 59646 * const [ date, setDate ] = useState( new Date() ); 59647 * 59648 * return ( 59649 * <DatePicker 59650 * currentDate={ date } 59651 * onChange={ ( newDate ) => setDate( newDate ) } 59652 * /> 59653 * ); 59654 * }; 59655 * ``` 59656 */ 59657function DatePicker({ 59658 currentDate, 59659 onChange, 59660 events = [], 59661 isInvalidDate, 59662 onMonthPreviewed, 59663 startOfWeek: weekStartsOn = 0 59664}) { 59665 const date = currentDate ? inputToDate(currentDate) : new Date(); 59666 const { 59667 calendar, 59668 viewing, 59669 setSelected,
59670 setViewing, 59671 isSelected, 59672 viewPreviousMonth, 59673 viewNextMonth 59674 } = useLilius({ 59675 selected: [startOfDay_startOfDay(date)], 59676 viewing: startOfDay_startOfDay(date), 59677 weekStartsOn 59678 }); 59679 59680 // Used to implement a roving tab index. Tracks the day that receives focus 59681 // when the user tabs into the calendar. 59682 const [focusable, setFocusable] = (0,external_wp_element_namespaceObject.useState)(startOfDay_startOfDay(date)); 59683 59684 // Allows us to only programmatically focus() a day when focus was already 59685 // within the calendar. This stops us stealing focus from e.g. a TimePicker 59686 // input. 59687 const [isFocusWithinCalendar, setIsFocusWithinCalendar] = (0,external_wp_element_namespaceObject.useState)(false); 59688 59689 // Update internal state when currentDate prop changes. 59690 const [prevCurrentDate, setPrevCurrentDate] = (0,external_wp_element_namespaceObject.useState)(currentDate); 59691 if (currentDate !== prevCurrentDate) { 59692 setPrevCurrentDate(currentDate); 59693 setSelected([startOfDay_startOfDay(date)]); 59694 setViewing(startOfDay_startOfDay(date)); 59695 setFocusable(startOfDay_startOfDay(date)); 59696 } 59697 return (0,external_wp_element_namespaceObject.createElement)(styles_Wrapper, { 59698 className: "components-datetime__date", 59699 role: "application", 59700 "aria-label": (0,external_wp_i18n_namespaceObject.__)('Calendar') 59701 }, (0,external_wp_element_namespaceObject.createElement)(Navigator, null, (0,external_wp_element_namespaceObject.createElement)(build_module_button, { 59702 icon: (0,external_wp_i18n_namespaceObject.isRTL)() ? arrow_right : arrow_left, 59703 variant: "tertiary", 59704 "aria-label": (0,external_wp_i18n_namespaceObject.__)('View previous month'), 59705 onClick: () => { 59706 viewPreviousMonth(); 59707 setFocusable(subMonths_subMonths(focusable, 1)); 59708 onMonthPreviewed?.(format(subMonths_subMonths(viewing, 1), TIMEZONELESS_FORMAT)); 59709 } 59710 }), (0,external_wp_element_namespaceObject.createElement)(NavigatorHeading, { 59711 level: 3 59712 }, (0,external_wp_element_namespaceObject.createElement)("strong", null, (0,external_wp_date_namespaceObject.dateI18n)('F', viewing, -viewing.getTimezoneOffset())), ' ', (0,external_wp_date_namespaceObject.dateI18n)('Y', viewing, -viewing.getTimezoneOffset())), (0,external_wp_element_namespaceObject.createElement)(build_module_button, { 59713 icon: (0,external_wp_i18n_namespaceObject.isRTL)() ? arrow_left : arrow_right, 59714 variant: "tertiary", 59715 "aria-label": (0,external_wp_i18n_namespaceObject.__)('View next month'), 59716 onClick: () => { 59717 viewNextMonth(); 59718 setFocusable(addMonths_addMonths(focusable, 1)); 59719 onMonthPreviewed?.(format(addMonths_addMonths(viewing, 1), TIMEZONELESS_FORMAT)); 59720 } 59721 })), (0,external_wp_element_namespaceObject.createElement)(Calendar, { 59722 onFocus: () => setIsFocusWithinCalendar(true), 59723 onBlur: () => setIsFocusWithinCalendar(false) 59724 }, calendar[0][0].map(day => (0,external_wp_element_namespaceObject.createElement)(DayOfWeek, { 59725 key: day.toString() 59726 }, (0,external_wp_date_namespaceObject.dateI18n)('D', day, -day.getTimezoneOffset()))), calendar[0].map(week => week.map((day, index) => { 59727 if (!isSameMonth(day, viewing)) { 59728 return null; 59729 } 59730 return (0,external_wp_element_namespaceObject.createElement)(date_Day, { 59731 key: day.toString(), 59732 day: day, 59733 column: index + 1, 59734 isSelected: isSelected(day), 59735 isFocusable: isEqual_isEqual(day, focusable), 59736 isFocusAllowed: isFocusWithinCalendar, 59737 isToday: isSameDay(day, new Date()), 59738 isInvalid: isInvalidDate ? isInvalidDate(day) : false, 59739 numEvents: events.filter(event => isSameDay(event.date, day)).length, 59740 onClick: () => { 59741 setSelected([day]); 59742 setFocusable(day); 59743 onChange?.(format( 59744 // Don't change the selected date's time fields. 59745 new Date(day.getFullYear(), day.getMonth(), day.getDate(), date.getHours(), date.getMinutes(), date.getSeconds(), date.getMilliseconds()), TIMEZONELESS_FORMAT)); 59746 }, 59747 onKeyDown: event => { 59748 let nextFocusable; 59749 if (event.key === 'ArrowLeft') { 59750 nextFocusable = addDays_addDays(day, (0,external_wp_i18n_namespaceObject.isRTL)() ? 1 : -1); 59751 } 59752 if (event.key === 'ArrowRight') { 59753 nextFocusable = addDays_addDays(day, (0,external_wp_i18n_namespaceObject.isRTL)() ? -1 : 1); 59754 } 59755 if (event.key === 'ArrowUp') { 59756 nextFocusable = subWeeks(day, 1); 59757 } 59758 if (event.key === 'ArrowDown') { 59759 nextFocusable = addWeeks_addWeeks(day, 1); 59760 } 59761 if (event.key === 'PageUp') { 59762 nextFocusable = subMonths_subMonths(day, 1); 59763 } 59764 if (event.key === 'PageDown') { 59765 nextFocusable = addMonths_addMonths(day, 1); 59766 } 59767 if (event.key === 'Home') { 59768 nextFocusable = startOfWeek_startOfWeek(day); 59769 } 59770 if (event.key === 'End') { 59771 nextFocusable = startOfDay_startOfDay(endOfWeek_endOfWeek(day)); 59772 } 59773 if (nextFocusable) { 59774 event.preventDefault(); 59775 setFocusable(nextFocusable); 59776 if (!isSameMonth(nextFocusable, viewing)) {
59777 setViewing(nextFocusable); 59778 onMonthPreviewed?.(format(nextFocusable, TIMEZONELESS_FORMAT)); 59779 } 59780 } 59781 } 59782 }); 59783 })))); 59784} 59785function date_Day({ 59786 day, 59787 column, 59788 isSelected, 59789 isFocusable, 59790 isFocusAllowed, 59791 isToday, 59792 isInvalid, 59793 numEvents, 59794 onClick, 59795 onKeyDown 59796}) { 59797 const ref = (0,external_wp_element_namespaceObject.useRef)(); 59798 59799 // Focus the day when it becomes focusable, e.g. because an arrow key is 59800 // pressed. Only do this if focus is allowed - this stops us stealing focus 59801 // from e.g. a TimePicker input. 59802 (0,external_wp_element_namespaceObject.useEffect)(() => { 59803 if (ref.current && isFocusable && isFocusAllowed) { 59804 ref.current.focus(); 59805 } 59806 // isFocusAllowed is not a dep as there is no point calling focus() on 59807 // an already focused element. 59808 // eslint-disable-next-line react-hooks/exhaustive-deps 59809 }, [isFocusable]); 59810 return (0,external_wp_element_namespaceObject.createElement)(DayButton, { 59811 ref: ref, 59812 className: "components-datetime__date__day" // Unused, for backwards compatibility. 59813 , 59814 disabled: isInvalid, 59815 tabIndex: isFocusable ? 0 : -1, 59816 "aria-label": getDayLabel(day, isSelected, numEvents), 59817 column: column, 59818 isSelected: isSelected, 59819 isToday: isToday, 59820 hasEvents: numEvents > 0, 59821 onClick: onClick, 59822 onKeyDown: onKeyDown 59823 }, (0,external_wp_date_namespaceObject.dateI18n)('j', day, -day.getTimezoneOffset())); 59824} 59825function getDayLabel(date, isSelected, numEvents) { 59826 const { 59827 formats 59828 } = (0,external_wp_date_namespaceObject.getSettings)(); 59829 const localizedDate = (0,external_wp_date_namespaceObject.dateI18n)(formats.date, date, -date.getTimezoneOffset()); 59830 if (isSelected && numEvents > 0) { 59831 return (0,external_wp_i18n_namespaceObject.sprintf)( 59832 // translators: 1: The calendar date. 2: Number of events on the calendar date. 59833 (0,external_wp_i18n_namespaceObject._n)('%1$s. Selected. There is %2$d event', '%1$s. Selected. There are %2$d events', numEvents), localizedDate, numEvents); 59834 } else if (isSelected) { 59835 return (0,external_wp_i18n_namespaceObject.sprintf)( 59836 // translators: %s: The calendar date. 59837 (0,external_wp_i18n_namespaceObject.__)('%1$s. Selected'), localizedDate); 59838 } else if (numEvents > 0) { 59839 return (0,external_wp_i18n_namespaceObject.sprintf)( 59840 // translators: 1: The calendar date. 2: Number of events on the calendar date. 59841 (0,external_wp_i18n_namespaceObject._n)('%1$s. There is %2$d event', '%1$s. There are %2$d events', numEvents), localizedDate, numEvents); 59842 } 59843 return localizedDate; 59844} 59845/* harmony default export */ const date = (DatePicker); 59846 59847;// CONCATENATED MODULE: ./node_modules/date-fns/esm/startOfMinute/index.js 59848 59849 59850/** 59851 * @name startOfMinute 59852 * @category Minute Helpers 59853 * @summary Return the start of a minute for the given date. 59854 * 59855 * @description 59856 * Return the start of a minute for the given date. 59857 * The result will be in the local timezone. 59858 * 59859 * @param {Date|Number} date - the original date 59860 * @returns {Date} the start of a minute 59861 * @throws {TypeError} 1 argument required 59862 * 59863 * @example 59864 * // The start of a minute for 1 December 2014 22:15:45.400: 59865 * const result = startOfMinute(new Date(2014, 11, 1, 22, 15, 45, 400)) 59866 * //=> Mon Dec 01 2014 22:15:00 59867 */ 59868function startOfMinute(dirtyDate) { 59869 requiredArgs_requiredArgs(1, arguments); 59870 var date = toDate_toDate(dirtyDate); 59871 date.setSeconds(0, 0); 59872 return date; 59873} 59874;// CONCATENATED MODULE: ./node_modules/date-fns/esm/getDaysInMonth/index.js 59875 59876 59877/** 59878 * @name getDaysInMonth 59879 * @category Month Helpers 59880 * @summary Get the number of days in a month of the given date. 59881 * 59882 * @description 59883 * Get the number of days in a month of the given date. 59884 * 59885 * @param {Date|Number} date - the given date 59886 * @returns {Number} the number of days in a month 59887 * @throws {TypeError} 1 argument required 59888 * 59889 * @example 59890 * // How many days are in February 2000? 59891 * const result = getDaysInMonth(new Date(2000, 1)) 59892 * //=> 29 59893 */ 59894function getDaysInMonth_getDaysInMonth(dirtyDate) { 59895 requiredArgs_requiredArgs(1, arguments);
59896 var date = toDate_toDate(dirtyDate); 59897 var year = date.getFullYear(); 59898 var monthIndex = date.getMonth(); 59899 var lastDayOfMonth = new Date(0); 59900 lastDayOfMonth.setFullYear(year, monthIndex + 1, 0); 59901 lastDayOfMonth.setHours(0, 0, 0, 0); 59902 return lastDayOfMonth.getDate(); 59903} 59904;// CONCATENATED MODULE: ./node_modules/date-fns/esm/setMonth/index.js 59905 59906 59907 59908 59909/** 59910 * @name setMonth 59911 * @category Month Helpers 59912 * @summary Set the month to the given date. 59913 * 59914 * @description 59915 * Set the month to the given date. 59916 * 59917 * @param {Date|Number} date - the date to be changed 59918 * @param {Number} month - the month of the new date 59919 * @returns {Date} the new date with the month set 59920 * @throws {TypeError} 2 arguments required 59921 * 59922 * @example 59923 * // Set February to 1 September 2014: 59924 * const result = setMonth(new Date(2014, 8, 1), 1) 59925 * //=> Sat Feb 01 2014 00:00:00 59926 */ 59927function setMonth_setMonth(dirtyDate, dirtyMonth) { 59928 requiredArgs_requiredArgs(2, arguments); 59929 var date = toDate_toDate(dirtyDate); 59930 var month = toInteger_toInteger(dirtyMonth); 59931 var year = date.getFullYear(); 59932 var day = date.getDate(); 59933 var dateWithDesiredMonth = new Date(0); 59934 dateWithDesiredMonth.setFullYear(year, month, 15); 59935 dateWithDesiredMonth.setHours(0, 0, 0, 0); 59936 var daysInMonth = getDaysInMonth_getDaysInMonth(dateWithDesiredMonth); 59937 // Set the last day of the new month 59938 // if the original date was the last day of the longer month 59939 date.setMonth(month, Math.min(day, daysInMonth)); 59940 return date; 59941} 59942;// CONCATENATED MODULE: ./node_modules/date-fns/esm/set/index.js 59943 59944 59945 59946 59947 59948/** 59949 * @name set 59950 * @category Common Helpers 59951 * @summary Set date values to a given date. 59952 * 59953 * @description 59954 * Set date values to a given date. 59955 * 59956 * Sets time values to date from object `values`. 59957 * A value is not set if it is undefined or null or doesn't exist in `values`. 59958 * 59959 * Note about bundle size: `set` does not internally use `setX` functions from date-fns but instead opts 59960 * to use native `Date#setX` methods. If you use this function, you may not want to include the 59961 * other `setX` functions that date-fns provides if you are concerned about the bundle size. 59962 * 59963 * @param {Date|Number} date - the date to be changed 59964 * @param {Object} values - an object with options 59965 * @param {Number} [values.year] - the number of years to be set 59966 * @param {Number} [values.month] - the number of months to be set 59967 * @param {Number} [values.date] - the number of days to be set 59968 * @param {Number} [values.hours] - the number of hours to be set 59969 * @param {Number} [values.minutes] - the number of minutes to be set 59970 * @param {Number} [values.seconds] - the number of seconds to be set 59971 * @param {Number} [values.milliseconds] - the number of milliseconds to be set 59972 * @returns {Date} the new date with options set 59973 * @throws {TypeError} 2 arguments required 59974 * @throws {RangeError} `values` must be an object 59975 * 59976 * @example 59977 * // Transform 1 September 2014 into 20 October 2015 in a single line: 59978 * const result = set(new Date(2014, 8, 20), { year: 2015, month: 9, date: 20 }) 59979 * //=> Tue Oct 20 2015 00:00:00 59980 * 59981 * @example 59982 * // Set 12 PM to 1 September 2014 01:23:45 to 1 September 2014 12:00:00: 59983 * const result = set(new Date(2014, 8, 1, 1, 23, 45), { hours: 12 }) 59984 * //=> Mon Sep 01 2014 12:23:45 59985 */ 59986function set_set(dirtyDate, values) { 59987 requiredArgs_requiredArgs(2, arguments); 59988 if (_typeof(values) !== 'object' || values === null) { 59989 throw new RangeError('values parameter must be an object'); 59990 } 59991 var date = toDate_toDate(dirtyDate); 59992 59993 // Check if date is Invalid Date because Date.prototype.setFullYear ignores the value of Invalid Date 59994 if (isNaN(date.getTime())) { 59995 return new Date(NaN); 59996 } 59997 if (values.year != null) { 59998 date.setFullYear(values.year); 59999 } 60000 if (values.month != null) { 60001 date = setMonth_setMonth(date, values.month); 60002 } 60003 if (values.date != null) { 60004 date.setDate(toInteger_toInteger(values.date)); 60005 } 60006 if (values.hours != null) { 60007 date.setHours(toInteger_toInteger(values.hours)); 60008 } 60009 if (values.minutes != null) { 60010 date.setMinutes(toInteger_toInteger(values.minutes)); 60011 } 60012 if (values.seconds != null) { 60013 date.setSeconds(toInteger_toInteger(values.seconds)); 60014 } 60015 if (values.milliseconds != null) { 60016 date.setMilliseconds(toInteger_toInteger(values.milliseconds)); 60017 } 60018 return date; 60019} 60020;// CONCATENATED MODULE: ./node_modules/date-fns/esm/setHours/index.js 60021 60022 60023 60024/** 60025 * @name setHours 60026 * @category Hour Helpers 60027 * @summary Set the hours to the given date. 60028 * 60029 * @description 60030 * Set the hours to the given date. 60031 * 60032 * @param {Date|Number} date - the date to be changed 60033 * @param {Number}
60033 hours - the hours of the new date 60034 * @returns {Date} the new date with the hours set 60035 * @throws {TypeError} 2 arguments required 60036 * 60037 * @example 60038 * // Set 4 hours to 1 September 2014 11:30:00: 60039 * const result = setHours(new Date(2014, 8, 1, 11, 30), 4) 60040 * //=> Mon Sep 01 2014 04:30:00 60041 */ 60042function setHours(dirtyDate, dirtyHours) { 60043 requiredArgs_requiredArgs(2, arguments); 60044 var date = toDate_toDate(dirtyDate); 60045 var hours = toInteger_toInteger(dirtyHours); 60046 date.setHours(hours); 60047 return date; 60048} 60049;// CONCATENATED MODULE: ./packages/components/build-module/date-time/time/styles.js 60050 60051function time_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)."; } 60052/** 60053 * External dependencies 60054 */ 60055 60056 60057 60058/** 60059 * Internal dependencies 60060 */ 60061 60062 60063 60064 60065 60066 60067const time_styles_Wrapper = emotion_styled_base_browser_esm("div", true ? { 60068 target: "evcr23110" 60069} : 0)("box-sizing:border-box;font-size:", config_values.fontSize, ";" + ( true ? "" : 0)); 60070const Fieldset = emotion_styled_base_browser_esm("fieldset", true ? { 60071 target: "evcr2319" 60072} : 0)("border:0;margin:0 0 ", space(2 * 2), " 0;padding:0;&:last-child{margin-bottom:0;}" + ( true ? "" : 0)); 60073const TimeWrapper = emotion_styled_base_browser_esm("div", true ? { 60074 target: "evcr2318" 60075} : 0)( true ? { 60076 name: "pd0mhc", 60077 styles: "direction:ltr;display:flex" 60078} : 0); 60079const baseInput = /*#__PURE__*/emotion_react_browser_esm_css("&&& ", Input, "{padding-left:", space(2), ";padding-right:", space(2), ";text-align:center;}" + ( true ? "" : 0), true ? "" : 0); 60080const HoursInput = /*#__PURE__*/emotion_styled_base_browser_esm(number_control, true ? { 60081 target: "evcr2317" 60082} : 0)(baseInput, " width:", space(9), ";&&& ", Input, "{padding-right:0;}&&& ", BackdropUI, "{border-right:0;border-top-right-radius:0;border-bottom-right-radius:0;}" + ( true ? "" : 0)); 60083const TimeSeparator = emotion_styled_base_browser_esm("span", true ? { 60084 target: "evcr2316" 60085} : 0)("border-top:", config_values.borderWidth, " solid ", COLORS.gray[700], ";border-bottom:", config_values.borderWidth, " solid ", COLORS.gray[700], ";line-height:calc(\n\t\t", config_values.controlHeight, " - ", config_values.borderWidth, " * 2\n\t);display:inline-block;" + ( true ? "" : 0)); 60086const MinutesInput = /*#__PURE__*/emotion_styled_base_browser_esm(number_control, true ? { 60087 target: "evcr2315" 60088} : 0)(baseInput, " width:", space(9), ";&&& ", Input, "{padding-left:0;}&&& ", BackdropUI, "{border-left:0;border-top-left-radius:0;border-bottom-left-radius:0;}" + ( true ? "" : 0)); 60089 60090// Ideally we wouldn't need a wrapper, but can't otherwise target the 60091// <BaseControl> in <SelectControl> 60092const MonthSelectWrapper = emotion_styled_base_browser_esm("div", true ? { 60093 target: "evcr2314" 60094} : 0)( true ? { 60095 name: "1ff36h2", 60096 styles: "flex-grow:1" 60097} : 0); 60098const MonthSelect = /*#__PURE__*/emotion_styled_base_browser_esm(select_control, true ? { 60099 target: "evcr2313" 60100} : 0)("height:36px;", Select, "{line-height:30px;}" + ( true ? "" : 0)); 60101const DayInput = /*#__PURE__*/emotion_styled_base_browser_esm(number_control, true ? { 60102 target: "evcr2312" 60103} : 0)(baseInput, " width:", space(9), ";" + ( true ? "" : 0)); 60104const YearInput = /*#__PURE__*/emotion_styled_base_browser_esm(number_control, true ? { 60105 target: "evcr2311" 60106} : 0)(baseInput, " width:", space(14), ";" + ( true ? "" : 0)); 60107const TimeZone = emotion_styled_base_browser_esm("div", true ? { 60108 target: "evcr2310" 60109} : 0)( true ? { 60110 name: "ebu3jh", 60111 styles: "text-decoration:underline dotted" 60112} : 0); 60113 60114;// CONCATENATED MODULE: ./packages/components/build-module/date-time/time/timezone.js 60115 60116/** 60117 * WordPress dependencies 60118 */ 60119 60120 60121 60122/** 60123 * Internal dependencies 60124 */ 60125 60126 60127 60128/** 60129 * Displays timezone information when user timezone is different from site 60130 * timezone. 60131 */ 60132const timezone_TimeZone = () => { 60133 const { 60134 timezone 60135 } = (0,external_wp_date_namespaceObject.getSettings)(); 60136 60137 // Convert timezone offset to hours. 60138 const userTimezoneOffset = -1 * (new Date().getTimezoneOffset() / 60); 60139 60140 // System timezone and user timezone match, nothing needed.
60141 // Compare as numbers because it comes over as string. 60142 if (Number(timezone.offset) === userTimezoneOffset) { 60143 return null; 60144 } 60145 const offsetSymbol = Number(timezone.offset) >= 0 ? '+' : ''; 60146 const zoneAbbr = '' !== timezone.abbr && isNaN(Number(timezone.abbr)) ? timezone.abbr : `UTC${offsetSymbol}${timezone.offset}`; 60147 const timezoneDetail = 'UTC' === timezone.string ? (0,external_wp_i18n_namespaceObject.__)('Coordinated Universal Time') : `(${zoneAbbr}) ${timezone.string.replace('_', ' ')}`; 60148 return (0,external_wp_element_namespaceObject.createElement)(tooltip, { 60149 placement: "top", 60150 text: timezoneDetail 60151 }, (0,external_wp_element_namespaceObject.createElement)(TimeZone, { 60152 className: "components-datetime__timezone" 60153 }, zoneAbbr)); 60154}; 60155/* harmony default export */ const timezone = (timezone_TimeZone); 60156 60157;// CONCATENATED MODULE: ./packages/components/build-module/date-time/time/index.js 60158 60159/** 60160 * External dependencies 60161 */ 60162 60163 60164/** 60165 * WordPress dependencies 60166 */ 60167 60168 60169 60170/** 60171 * Internal dependencies 60172 */ 60173 60174 60175 60176 60177 60178 60179 60180 60181 60182 60183function from12hTo24h(hours, isPm) { 60184 return isPm ? (hours % 12 + 12) % 24 : hours % 12; 60185} 60186 60187/** 60188 * Creates an InputControl reducer used to pad an input so that it is always a 60189 * given width. For example, the hours and minutes inputs are padded to 2 so 60190 * that '4' appears as '04'. 60191 * 60192 * @param pad How many digits the value should be. 60193 */ 60194function buildPadInputStateReducer(pad) { 60195 return (state, action) => { 60196 const nextState = { 60197 ...state 60198 }; 60199 if (action.type === COMMIT || action.type === PRESS_UP || action.type === PRESS_DOWN) { 60200 if (nextState.value !== undefined) { 60201 nextState.value = nextState.value.toString().padStart(pad, '0'); 60202 } 60203 } 60204 return nextState; 60205 }; 60206} 60207 60208/** 60209 * TimePicker is a React component that renders a clock for time selection. 60210 * 60211 * ```jsx 60212 * import { TimePicker } from '@wordpress/components'; 60213 * import { useState } from '@wordpress/element'; 60214 * 60215 * const MyTimePicker = () => { 60216 * const [ time, setTime ] = useState( new Date() ); 60217 * 60218 * return ( 60219 * <TimePicker 60220 * currentTime={ date } 60221 * onChange={ ( newTime ) => setTime( newTime ) } 60222 * is12Hour 60223 * /> 60224 * ); 60225 * }; 60226 * ``` 60227 */ 60228function TimePicker({ 60229 is12Hour, 60230 currentTime, 60231 onChange 60232}) { 60233 const [date, setDate] = (0,external_wp_element_namespaceObject.useState)(() => 60234 // Truncate the date at the minutes, see: #15495. 60235 currentTime ? startOfMinute(inputToDate(currentTime)) : new Date()); 60236 60237 // Reset the state when currentTime changed. 60238 // TODO: useEffect() shouldn't be used like this, causes an unnecessary render 60239 (0,external_wp_element_namespaceObject.useEffect)(() => { 60240 setDate(currentTime ? startOfMinute(inputToDate(currentTime)) : new Date()); 60241 }, [currentTime]); 60242 const { 60243 day, 60244 month, 60245 year, 60246 minutes, 60247 hours, 60248 am 60249 } = (0,external_wp_element_namespaceObject.useMemo)(() => ({ 60250 day: format(date, 'dd'), 60251 month: format(date, 'MM'), 60252 year: format(date, 'yyyy'), 60253 minutes: format(date, 'mm'), 60254 hours: format(date, is12Hour ? 'hh' : 'HH'), 60255 am: format(date, 'a') 60256 }), [date, is12Hour]); 60257 const buildNumberControlChangeCallback = method => { 60258 const callback = (value, { 60259 event 60260 }) => { 60261 var _ownerDocument$defaul; 60262 // `instanceof` checks need to get the instance definition from the 60263 // corresponding window object â therefore, the following logic makes 60264 // the component work correctly even when rendered inside an iframe. 60265 const HTMLInputElementInstance = (_ownerDocument$defaul = event.target?.ownerDocument.defaultView?.HTMLInputElement) !== null && _ownerDocument$defaul !== void 0 ? _ownerDocument$defaul : HTMLInputElement; 60266 if (!(event.target instanceof HTMLInputElementInstance)) { 60267 return; 60268 } 60269 if (!event.target.validity.valid) { 60270 return; 60271 } 60272 60273 // We can safely assume value is a number if target is valid. 60274 let numberValue = Number(value); 60275 60276 // If the 12-hour format is being used and the 'PM' period is 60277 // selected, then the incoming value (which ranges 1-12) should be 60278 // increased by 12 to match the expected 24-hour format. 60279 if (method === 'hours' && is12Hour) { 60280 numberValue = from12hTo24h(numberValue, am === 'PM'); 60281 } 60282 const newDate = set_set(date, { 60283 [method]: numberValue 60284 }); 60285 setDate(newDate); 60286 onChange?.(format(newDate, TIMEZONELESS_FORMAT)); 60287 }; 60288 return callback; 60289 }; 60290 function buildAmPmChangeCallback(value) { 60291 return () => { 60292 if (am === value) { 60293 return; 60294 } 60295 const parsedHours = parseInt(hours, 10); 60296 const newDate = setHours(date, from12hTo24h(parsedHours, value === 'PM')); 60297 setDate(newDate); 60298 onChange?.(format(newDate, TIMEZONELESS_FORMAT)); 60299 }; 60300 } 60301 const dayField = (0,external_wp_element_namespaceObject.createElement)(DayInput, { 60302 className: "components-datetime__time-field components-datetime__time-field-day" // Unused, for backwards compatibility. 60303 , 60304 label: (0,external_wp_i18n_namespaceObject.__)('Day'), 60305 hideLabelFromVision: true, 60306 __next36pxDefaultSize: true, 60307 value: day, 60308 step: 1, 60309 min: 1, 60310 max: 31, 60311 required: true, 60312 spinControls: "none", 60313 isPressEnterToChange: true, 60314 isDragEnabled: false, 60315 isShiftStepEnabled: false, 60316 onChange: buildNumberControlChangeCallback('date') 60317 }); 60318 const monthField = (0,external_wp_element_namespaceObject.createElement)(MonthSelectWrapper, null, (0,external_wp_element_namespaceObject.createElement)(MonthSelect, { 60319 className: "components-datetime__time-field components-datetime__time-field-month" // Unused, for backwards compatibility. 60320 , 60321 label: (0,external_wp_i18n_namespaceObject.__)('Month'),
60322 hideLabelFromVision: true, 60323 __nextHasNoMarginBottom: true, 60324 value: month, 60325 options: [{ 60326 value: '01', 60327 label: (0,external_wp_i18n_namespaceObject.__)('January') 60328 }, { 60329 value: '02', 60330 label: (0,external_wp_i18n_namespaceObject.__)('February') 60331 }, { 60332 value: '03', 60333 label: (0,external_wp_i18n_namespaceObject.__)('March') 60334 }, { 60335 value: '04', 60336 label: (0,external_wp_i18n_namespaceObject.__)('April') 60337 }, { 60338 value: '05', 60339 label: (0,external_wp_i18n_namespaceObject.__)('May') 60340 }, { 60341 value: '06', 60342 label: (0,external_wp_i18n_namespaceObject.__)('June') 60343 }, { 60344 value: '07', 60345 label: (0,external_wp_i18n_namespaceObject.__)('July') 60346 }, { 60347 value: '08', 60348 label: (0,external_wp_i18n_namespaceObject.__)('August') 60349 }, { 60350 value: '09', 60351 label: (0,external_wp_i18n_namespaceObject.__)('September') 60352 }, { 60353 value: '10', 60354 label: (0,external_wp_i18n_namespaceObject.__)('October') 60355 }, { 60356 value: '11', 60357 label: (0,external_wp_i18n_namespaceObject.__)('November') 60358 }, { 60359 value: '12', 60360 label: (0,external_wp_i18n_namespaceObject.__)('December') 60361 }], 60362 onChange: value => { 60363 const newDate = setMonth_setMonth(date, Number(value) - 1); 60364 setDate(newDate); 60365 onChange?.(format(newDate, TIMEZONELESS_FORMAT)); 60366 } 60367 })); 60368 return (0,external_wp_element_namespaceObject.createElement)(time_styles_Wrapper, { 60369 className: "components-datetime__time" // Unused, for backwards compatibility. 60370 }, (0,external_wp_element_namespaceObject.createElement)(Fieldset, null, (0,external_wp_element_namespaceObject.createElement)(base_control.VisualLabel, { 60371 as: "legend", 60372 className: "components-datetime__time-legend" // Unused, for backwards compatibility. 60373 }, (0,external_wp_i18n_namespaceObject.__)('Time')), (0,external_wp_element_namespaceObject.createElement)(h_stack_component, { 60374 className: "components-datetime__time-wrapper" // Unused, for backwards compatibility. 60375 }, (0,external_wp_element_namespaceObject.createElement)(TimeWrapper, { 60376 className: "components-datetime__time-field components-datetime__time-field-time" // Unused, for backwards compatibility. 60377 }, (0,external_wp_element_namespaceObject.createElement)(HoursInput, { 60378 className: "components-datetime__time-field-hours-input" // Unused, for backwards compatibility. 60379 , 60380 label: (0,external_wp_i18n_namespaceObject.__)('Hours'), 60381 hideLabelFromVision: true, 60382 __next36pxDefaultSize: true, 60383 value: hours, 60384 step: 1, 60385 min: is12Hour ? 1 : 0, 60386 max: is12Hour ? 12 : 23, 60387 required: true, 60388 spinControls: "none", 60389 isPressEnterToChange: true, 60390 isDragEnabled: false, 60391 isShiftStepEnabled: false, 60392 onChange: buildNumberControlChangeCallback('hours'), 60393 __unstableStateReducer: buildPadInputStateReducer(2) 60394 }), (0,external_wp_element_namespaceObject.createElement)(TimeSeparator, { 60395 className: "components-datetime__time-separator" // Unused, for backwards compatibility. 60396 , 60397 "aria-hidden": "true" 60398 }, ":"), (0,external_wp_element_namespaceObject.createElement)(MinutesInput, { 60399 className: "components-datetime__time-field-minutes-input" // Unused, for backwards compatibility. 60400 , 60401 label: (0,external_wp_i18n_namespaceObject.__)('Minutes'), 60402 hideLabelFromVision: true, 60403 __next36pxDefaultSize: true, 60404 value: minutes, 60405 step: 1, 60406 min: 0, 60407 max: 59, 60408 required: true, 60409 spinControls: "none", 60410 isPressEnterToChange: true, 60411 isDragEnabled: false, 60412 isShiftStepEnabled: false, 60413 onChange: buildNumberControlChangeCallback('minutes'), 60414 __unstableStateReducer: buildPadInputStateReducer(2) 60415 })), is12Hour && (0,external_wp_element_namespaceObject.createElement)(button_group, { 60416 className: "components-datetime__time-field components-datetime__time-field-am-pm" // Unused, for backwards compatibility. 60417 }, (0,external_wp_element_namespaceObject.createElement)(build_module_button, { 60418 className: "components-datetime__time-am-button" // Unused, for backwards compatibility. 60419 , 60420 variant: am === 'AM' ? 'primary' : 'secondary', 60421 onClick: buildAmPmChangeCallback('AM') 60422 }, (0,external_wp_i18n_namespaceObject.__)('AM')), (0,external_wp_element_namespaceObject.createElement)(build_module_button, { 60423 className: "components-datetime__time-pm-button" // Unused, for backwards compatibility. 60424 , 60425 variant: am === 'PM' ? 'primary' : 'secondary', 60426 onClick: buildAmPmChangeCallback('PM') 60427 }, (0,external_wp_i18n_namespaceObject.__)('PM'))), (0,external_wp_element_namespaceObject.createElement)(spacer_
60427component, null), (0,external_wp_element_namespaceObject.createElement)(timezone, null))), (0,external_wp_element_namespaceObject.createElement)(Fieldset, null, (0,external_wp_element_namespaceObject.createElement)(base_control.VisualLabel, { 60428 as: "legend", 60429 className: "components-datetime__time-legend" // Unused, for backwards compatibility. 60430 }, (0,external_wp_i18n_namespaceObject.__)('Date')), (0,external_wp_element_namespaceObject.createElement)(h_stack_component, { 60431 className: "components-datetime__time-wrapper" // Unused, for backwards compatibility. 60432 }, is12Hour ? (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, monthField, dayField) : (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, dayField, monthField), (0,external_wp_element_namespaceObject.createElement)(YearInput, { 60433 className: "components-datetime__time-field components-datetime__time-field-year" // Unused, for backwards compatibility. 60434 , 60435 label: (0,external_wp_i18n_namespaceObject.__)('Year'), 60436 hideLabelFromVision: true, 60437 __next36pxDefaultSize: true, 60438 value: year, 60439 step: 1, 60440 min: 1, 60441 max: 9999, 60442 required: true, 60443 spinControls: "none", 60444 isPressEnterToChange: true, 60445 isDragEnabled: false, 60446 isShiftStepEnabled: false, 60447 onChange: buildNumberControlChangeCallback('year'), 60448 __unstableStateReducer: buildPadInputStateReducer(4) 60449 })))); 60450} 60451/* harmony default export */ const time = (TimePicker); 60452 60453;// CONCATENATED MODULE: ./packages/components/build-module/date-time/date-time/styles.js 60454 60455function date_time_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)."; } 60456/** 60457 * External dependencies 60458 */ 60459 60460/** 60461 * Internal dependencies 60462 */ 60463 60464const date_time_styles_Wrapper = /*#__PURE__*/emotion_styled_base_browser_esm(v_stack_component, true ? { 60465 target: "e1p5onf00" 60466} : 0)( true ? { 60467 name: "1khn195", 60468 styles: "box-sizing:border-box" 60469} : 0); 60470 60471;// CONCATENATED MODULE: ./packages/components/build-module/date-time/date-time/index.js 60472 60473/** 60474 * External dependencies 60475 */ 60476 60477/** 60478 * WordPress dependencies 60479 */ 60480 60481/** 60482 * Internal dependencies 60483 */ 60484 60485 60486 60487 60488const date_time_noop = () => {}; 60489function UnforwardedDateTimePicker({ 60490 currentDate, 60491 is12Hour, 60492 isInvalidDate, 60493 onMonthPreviewed = date_time_noop, 60494 onChange, 60495 events, 60496 startOfWeek 60497}, ref) { 60498 return (0,external_wp_element_namespaceObject.createElement)(date_time_styles_Wrapper, { 60499 ref: ref, 60500 className: "components-datetime", 60501 spacing: 4 60502 }, (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, (0,external_wp_element_namespaceObject.createElement)(time, { 60503 currentTime: currentDate, 60504 onChange: onChange, 60505 is12Hour: is12Hour 60506 }), (0,external_wp_element_namespaceObject.createElement)(date, { 60507 currentDate: currentDate, 60508 onChange: onChange, 60509 isInvalidDate: isInvalidDate, 60510 events: events, 60511 onMonthPreviewed: onMonthPreviewed, 60512 startOfWeek: startOfWeek 60513 }))); 60514} 60515 60516/** 60517 * DateTimePicker is a React component that renders a calendar and clock for 60518 * date and time selection. The calendar and clock components can be accessed 60519 * individually using the `DatePicker` and `TimePicker` components respectively. 60520 * 60521 * ```jsx 60522 * import { DateTimePicker } from '@wordpress/components'; 60523 * import { useState } from '@wordpress/element'; 60524 * 60525 * const MyDateTimePicker = () => { 60526 * const [ date, setDate ] = useState( new Date() ); 60527 * 60528 * return ( 60529 * <DateTimePicker 60530 * currentDate={ date } 60531 * onChange={ ( newDate ) => setDate( newDate ) } 60532 * is12Hour 60533 * /> 60534 * ); 60535 * }; 60536 * ``` 60537 */ 60538const DateTimePicker = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedDateTimePicker); 60539/* harmony default export */ const date_time = (DateTimePicker); 60540 60541;// CONCATENATED MODULE: ./packages/components/build-module/date-time/index.js 60542/** 60543 * Internal dependencies 60544 */ 60545 60546 60547 60548 60549/* harmony default export */ const build_module_date_time = (date_time); 60550 60551;// CONCATENATED MODULE: ./packages/components/build-module/dimension-control/sizes.js 60552/** 60553 * Sizes 60554 * 60555 * defines the sizes used in dimension controls 60556 * all hardcoded `size` values are based on the value of 60557 * the Sass variable `$block-padding` from 60558 * `packages/block-editor/src/components/dimension-control/sizes.js`. 60559 */ 60560 60561/** 60562 * WordPress dependencies 60563 */ 60564 60565 60566/** 60567 * Internal dependencies 60568 */ 60569
60570/** 60571 * Finds the correct size object from the provided sizes 60572 * table by size slug (eg: `medium`) 60573 * 60574 * @param sizes containing objects for each size definition. 60575 * @param slug a string representation of the size (eg: `medium`). 60576 */ 60577const findSizeBySlug = (sizes, slug) => sizes.find(size => slug === size.slug); 60578/* harmony default export */ const dimension_control_sizes = ([{ 60579 name: (0,external_wp_i18n_namespaceObject._x)('None', 'Size of a UI element'), 60580 slug: 'none' 60581}, { 60582 name: (0,external_wp_i18n_namespaceObject._x)('Small', 'Size of a UI element'), 60583 slug: 'small' 60584}, { 60585 name: (0,external_wp_i18n_namespaceObject._x)('Medium', 'Size of a UI element'), 60586 slug: 'medium' 60587}, { 60588 name: (0,external_wp_i18n_namespaceObject._x)('Large', 'Size of a UI element'), 60589 slug: 'large' 60590}, { 60591 name: (0,external_wp_i18n_namespaceObject._x)('Extra Large', 'Size of a UI element'), 60592 slug: 'xlarge' 60593}]); 60594 60595;// CONCATENATED MODULE: ./packages/components/build-module/dimension-control/index.js 60596 60597/** 60598 * External dependencies 60599 */ 60600 60601 60602/** 60603 * WordPress dependencies 60604 */ 60605 60606 60607/** 60608 * Internal dependencies 60609 */ 60610 60611 60612 60613/** 60614 * `DimensionControl` is a component designed to provide a UI to control spacing and/or dimensions. 60615 * 60616 * This feature is still experimental. âExperimentalâ means this is an early implementation subject to drastic and breaking changes. 60617 * 60618 * ```jsx 60619 * import { __experimentalDimensionControl as DimensionControl } from '@wordpress/components'; 60620 * import { useState } from '@wordpress/element'; 60621 * 60622 * export default function MyCustomDimensionControl() { 60623 * const [ paddingSize, setPaddingSize ] = useState( '' ); 60624 * 60625 * return ( 60626 * <DimensionControl 60627 * label={ 'Padding' } 60628 * icon={ 'desktop' } 60629 * onChange={ ( value ) => setPaddingSize( value ) } 60630 * value={ paddingSize } 60631 * /> 60632 * ); 60633 * } 60634 * ``` 60635 */ 60636function DimensionControl(props) { 60637 const { 60638 label, 60639 value, 60640 sizes = dimension_control_sizes, 60641 icon, 60642 onChange, 60643 className = '' 60644 } = props; 60645 const onChangeSpacingSize = val => { 60646 const theSize = findSizeBySlug(sizes, val); 60647 if (!theSize || value === theSize.slug) { 60648 onChange?.(undefined); 60649 } else if (typeof onChange === 'function') { 60650 onChange(theSize.slug); 60651 } 60652 }; 60653 const formatSizesAsOptions = theSizes => { 60654 const options = theSizes.map(({ 60655 name, 60656 slug 60657 }) => ({ 60658 label: name, 60659 value: slug 60660 })); 60661 return [{ 60662 label: (0,external_wp_i18n_namespaceObject.__)('Default'), 60663 value: '' 60664 }, ...options]; 60665 }; 60666 const selectLabel = (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, icon && (0,external_wp_element_namespaceObject.createElement)(build_module_icon, { 60667 icon: icon 60668 }), label); 60669 return (0,external_wp_element_namespaceObject.createElement)(select_control, { 60670 className: classnames_default()(className, 'block-editor-dimension-control'), 60671 label: selectLabel, 60672 hideLabelFromVision: false, 60673 value: value, 60674 onChange: onChangeSpacingSize, 60675 options: formatSizesAsOptions(sizes) 60676 }); 60677} 60678/* harmony default export */ const dimension_control = (DimensionControl); 60679 60680;// CONCATENATED MODULE: ./packages/components/build-module/disabled/styles/disabled-styles.js 60681function 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)."; } 60682/** 60683 * External dependencies 60684 */ 60685 60686const disabled_styles_disabledStyles = true ? { 60687 name: "u2jump", 60688 styles: "position:relative;pointer-events:none;&::after{content:'';position:absolute;top:0;right:0;bottom:0;left:0;}*{pointer-events:none;}" 60689} : 0; 60690 60691;// CONCATENATED MODULE: ./packages/components/build-module/disabled/index.js 60692 60693/** 60694 * WordPress dependencies 60695 */ 60696 60697 60698/** 60699 * Internal dependencies 60700 */ 60701 60702 60703const Context = (0,external_wp_element_namespaceObject.createContext)(false); 60704const { 60705 Consumer, 60706 Provider: disabled_Provider 60707} = Context; 60708 60709/**
60710 * `Disabled` is a component which disables descendant tabbable elements and 60711 * prevents pointer interaction. 60712 * 60713 * _Note: this component may not behave as expected in browsers that don't 60714 * support the `inert` HTML attribute. We recommend adding the official WICG 60715 * polyfill when using this component in your project._ 60716 * 60717 * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert 60718 * 60719 * ```jsx 60720 * import { Button, Disabled, TextControl } from '@wordpress/components'; 60721 * import { useState } from '@wordpress/element'; 60722 * 60723 * const MyDisabled = () => { 60724 * const [ isDisabled, setIsDisabled ] = useState( true ); 60725 * 60726 * let input = <TextControl label="Input" onChange={ () => {} } />; 60727 * if ( isDisabled ) { 60728 * input = <Disabled>{ input }</Disabled>; 60729 * } 60730 * 60731 * const toggleDisabled = () => { 60732 * setIsDisabled( ( state ) => ! state ); 60733 * }; 60734 * 60735 * return ( 60736 * <div> 60737 * { input } 60738 * <Button variant="primary" onClick={ toggleDisabled }> 60739 * Toggle Disabled 60740 * </Button> 60741 * </div> 60742 * ); 60743 * }; 60744 * ``` 60745 */ 60746function Disabled({ 60747 className, 60748 children, 60749 isDisabled = true, 60750 ...props 60751}) { 60752 const cx = useCx(); 60753 return (0,external_wp_element_namespaceObject.createElement)(disabled_Provider, { 60754 value: isDisabled 60755 }, (0,external_wp_element_namespaceObject.createElement)("div", { 60756 // @ts-ignore Reason: inert is a recent HTML attribute 60757 inert: isDisabled ? 'true' : undefined, 60758 className: isDisabled ? cx(disabled_styles_disabledStyles, className, 'components-disabled') : undefined, 60759 ...props 60760 }, children)); 60761} 60762Disabled.Context = Context; 60763Disabled.Consumer = Consumer; 60764/* harmony default export */ const disabled = (Disabled); 60765 60766;// CONCATENATED MODULE: ./packages/components/build-module/draggable/index.js 60767 60768/** 60769 * External dependencies 60770 */ 60771 60772/** 60773 * WordPress dependencies 60774 */ 60775 60776 60777 60778/** 60779 * Internal dependencies 60780 */ 60781 60782const dragImageClass = 'components-draggable__invisible-drag-image'; 60783const cloneWrapperClass = 'components-draggable__clone'; 60784const clonePadding = 0; 60785const bodyClass = 'is-dragging-components-draggable'; 60786 60787/** 60788 * `Draggable` is a Component that provides a way to set up a cross-browser 60789 * (including IE) customizable drag image and the transfer data for the drag 60790 * event. It decouples the drag handle and the element to drag: use it by 60791 * wrapping the component that will become the drag handle and providing the DOM 60792 * ID of the element to drag. 60793 * 60794 * Note that the drag handle needs to declare the `draggable="true"` property 60795 * and bind the `Draggable`s `onDraggableStart` and `onDraggableEnd` event 60796 * handlers to its own `onDragStart` and `onDragEnd` respectively. `Draggable` 60797 * takes care of the logic to setup the drag image and the transfer data, but is 60798 * not concerned with creating an actual DOM element that is draggable. 60799 * 60800 * ```jsx 60801 * import { Draggable, Panel, PanelBody } from '@wordpress/components'; 60802 * import { Icon, more } from '@wordpress/icons'; 60803 * 60804 * const MyDraggable = () => ( 60805 * <div id="draggable-panel"> 60806 * <Panel header="Draggable panel"> 60807 * <PanelBody> 60808 * <Draggable elementId="draggable-panel" transferData={ {} }> 60809 * { ( { onDraggableStart, onDraggableEnd } ) => ( 60810 * <div 60811 * className="example-drag-handle" 60812 * draggable 60813 * onDragStart={ onDraggableStart } 60814 * onDragEnd={ onDraggableEnd } 60815 * > 60816 * <Icon icon={ more } /> 60817 * </div> 60818 * ) } 60819 * </Draggable> 60820 * </PanelBody> 60821 * </Panel> 60822 * </div> 60823 * ); 60824 * ``` 60825 */ 60826function Draggable({ 60827 children, 60828 onDragStart, 60829 onDragOver, 60830 onDragEnd, 60831 appendToOwnerDocument = false, 60832 cloneClassname, 60833 elementId, 60834 transferData, 60835 __experimentalTransferDataType: transferDataType = 'text', 60836 __experimentalDragComponent: dragComponent 60837}) { 60838 const dragComponentRef = (0,external_wp_element_namespaceObject.useRef)(null); 60839 const cleanup = (0,external_wp_element_namespaceObject.useRef)(() => {}); 60840 60841 /** 60842 * Removes the element clone, resets cursor, and removes drag listener. 60843 * 60844 * @param event The non-custom DragEvent. 60845 */ 60846 function end(event) { 60847 event.preventDefault(); 60848 cleanup.current(); 60849 if (onDragEnd) { 60850 onDragEnd(event); 60851 } 60852 } 60853 60854 /** 60855 * This method does a couple of things: 60856 * 60857 * - Clones the current element and spawns clone over original element. 60858 * - Adds a fake temporary drag image to avoid browser defaults. 60859 * - Sets transfer data. 60860 * - Adds dragover listener. 60861 * 60862 * @param event The non-custom DragEvent. 60863 */ 60864 function start(event) { 60865 const { 60866 ownerDocument 60867 } = event.target; 60868 event.dataTransfer.setData(transferDataType, JSON.stringify(transferData)); 60869 const cloneWrapper = ownerDocument.createElement('div'); 60870 // Reset position to 0,0. Natural stacking order will position this lower, even with a transform otherwise. 60871 cloneWrapper.style.top = '0'; 60872 cloneWrapper.style.left = '0'; 60873 const dragImage = ownerDocument.createElement('div'); 60874 60875 // Set a fake drag image to avoid browser defaults. Remove from DOM 60876 // right after. event.dataTransfer.setDragImage is not supported yet in 60877 // IE, we need to check for its existence first. 60878 if ('function' === typeof event.dataTransfer.setDragImage) { 60879 dragImage.classList.add(dragImageClass); 60880 ownerDocument.body.appendChild(dragImage);
60881 event.dataTransfer.setDragImage(dragImage, 0, 0); 60882 } 60883 cloneWrapper.classList.add(cloneWrapperClass); 60884 if (cloneClassname) { 60885 cloneWrapper.classList.add(cloneClassname); 60886 } 60887 let x = 0; 60888 let y = 0; 60889 // If a dragComponent is defined, the following logic will clone the 60890 // HTML node and inject it into the cloneWrapper. 60891 if (dragComponentRef.current) { 60892 // Position dragComponent at the same position as the cursor. 60893 x = event.clientX; 60894 y = event.clientY; 60895 cloneWrapper.style.transform = `translate( ${x}px, ${y}px )`; 60896 const clonedDragComponent = ownerDocument.createElement('div'); 60897 clonedDragComponent.innerHTML = dragComponentRef.current.innerHTML; 60898 cloneWrapper.appendChild(clonedDragComponent); 60899 60900 // Inject the cloneWrapper into the DOM. 60901 ownerDocument.body.appendChild(cloneWrapper); 60902 } else { 60903 const element = ownerDocument.getElementById(elementId); 60904 60905 // Prepare element clone and append to element wrapper. 60906 const elementRect = element.getBoundingClientRect(); 60907 const elementWrapper = element.parentNode; 60908 const elementTopOffset = elementRect.top; 60909 const elementLeftOffset = elementRect.left; 60910 cloneWrapper.style.width = `${elementRect.width + clonePadding * 2}px`; 60911 const clone = element.cloneNode(true); 60912 clone.id = `clone-${elementId}`; 60913 60914 // Position clone right over the original element (20px padding). 60915 x = elementLeftOffset - clonePadding; 60916 y = elementTopOffset - clonePadding; 60917 cloneWrapper.style.transform = `translate( ${x}px, ${y}px )`; 60918 60919 // Hack: Remove iFrames as it's causing the embeds drag clone to freeze. 60920 Array.from(clone.querySelectorAll('iframe')).forEach(child => child.parentNode?.removeChild(child)); 60921 cloneWrapper.appendChild(clone); 60922 60923 // Inject the cloneWrapper into the DOM. 60924 if (appendToOwnerDocument) { 60925 ownerDocument.body.appendChild(cloneWrapper); 60926 } else { 60927 elementWrapper?.appendChild(cloneWrapper); 60928 } 60929 } 60930 60931 // Mark the current cursor coordinates.
60932 let cursorLeft = event.clientX; 60933 let cursorTop = event.clientY; 60934 function over(e) { 60935 // Skip doing any work if mouse has not moved. 60936 if (cursorLeft === e.clientX && cursorTop === e.clientY) { 60937 return; 60938 } 60939 const nextX = x + e.clientX - cursorLeft; 60940 const nextY = y + e.clientY - cursorTop; 60941 cloneWrapper.style.transform = `translate( ${nextX}px, ${nextY}px )`; 60942 cursorLeft = e.clientX; 60943 cursorTop = e.clientY; 60944 x = nextX; 60945 y = nextY; 60946 if (onDragOver) { 60947 onDragOver(e); 60948 } 60949 } 60950 60951 // Aim for 60fps (16 ms per frame) for now. We can potentially use requestAnimationFrame (raf) instead, 60952 // note that browsers may throttle raf below 60fps in certain conditions. 60953 // @ts-ignore 60954 const throttledDragOver = (0,external_wp_compose_namespaceObject.throttle)(over, 16); 60955 ownerDocument.addEventListener('dragover', throttledDragOver); 60956 60957 // Update cursor to 'grabbing', document wide. 60958 ownerDocument.body.classList.add(bodyClass); 60959 if (onDragStart) { 60960 onDragStart(event); 60961 } 60962 cleanup.current = () => { 60963 // Remove drag clone. 60964 if (cloneWrapper && cloneWrapper.parentNode) { 60965 cloneWrapper.parentNode.removeChild(cloneWrapper); 60966 } 60967 if (dragImage && dragImage.parentNode) { 60968 dragImage.parentNode.removeChild(dragImage); 60969 } 60970 60971 // Reset cursor. 60972 ownerDocument.body.classList.remove(bodyClass); 60973 ownerDocument.removeEventListener('dragover', throttledDragOver); 60974 }; 60975 } 60976 (0,external_wp_element_namespaceObject.useEffect)(() => () => { 60977 cleanup.current(); 60978 }, []); 60979 return (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, children({ 60980 onDraggableStart: start, 60981 onDraggableEnd: end 60982 }), dragComponent && (0,external_wp_element_namespaceObject.createElement)("div", { 60983 className: "components-draggable-drag-component-root", 60984 style: { 60985 display: 'none' 60986 }, 60987 ref: dragComponentRef 60988 }, dragComponent)); 60989} 60990/* harmony default export */ const draggable = (Draggable); 60991 60992;// CONCATENATED MODULE: ./packages/icons/build-module/library/upload.js 60993 60994/** 60995 * WordPress dependencies 60996 */ 60997 60998const upload = (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.SVG, { 60999 xmlns: "http://www.w3.org/2000/svg", 61000 viewBox: "0 0 24 24" 61001}, (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.Path, { 61002 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" 61003})); 61004/* harmony default export */ const library_upload = (upload); 61005 61006;// CONCATENATED MODULE: ./packages/components/build-module/drop-zone/index.js 61007 61008/** 61009 * External dependencies 61010 */ 61011 61012 61013/** 61014 * WordPress dependencies 61015 */ 61016 61017 61018 61019 61020 61021 61022/** 61023 * Internal dependencies 61024 */ 61025 61026/** 61027 * `DropZone` is a component creating a drop zone area taking the full size of its parent element. It supports dropping files, HTML content or any other HTML drop event. 61028 * 61029 * ```jsx 61030 * import { DropZone } from '@wordpress/components'; 61031 * import { useState } from '@wordpress/element'; 61032 * 61033 * const MyDropZone = () => { 61034 * const [ hasDropped, setHasDropped ] = useState( false ); 61035 * 61036 * return ( 61037 * <div> 61038 * { hasDropped ? 'Dropped!' : 'Drop something here' } 61039 * <DropZone 61040 * onFilesDrop={ () => setHasDropped( true ) } 61041 * onHTMLDrop={ () => setHasDropped( true ) } 61042 * onDrop={ () => setHasDropped( true ) } 61043 * /> 61044 * </div> 61045 * ); 61046 * } 61047 * ``` 61048 */ 61049function DropZoneComponent({ 61050 className, 61051 label, 61052 onFilesDrop, 61053 onHTMLDrop, 61054 onDrop, 61055 ...restProps 61056}) { 61057 const [isDraggingOverDocument, setIsDraggingOverDocument] = (0,external_wp_element_namespaceObject.useState)(); 61058 const [isDraggingOverElement, setIsDraggingOverElement] = (0,external_wp_element_namespaceObject.useState)(); 61059 const [type, setType] = (0,external_wp_element_namespaceObject.useState)(); 61060 const ref = (0,external_wp_compose_namespaceObject.__experimentalUseDropZone)({ 61061 onDrop(event) { 61062 const files = event.dataTransfer ? (0,external_wp_dom_namespaceObject.getFilesFromDataTransfer)(event.dataTransfer) : []; 61063 const html = event.dataTransfer?.getData('text/html'); 61064 61065 /** 61066 * From Windows Chrome 96, the `event.dataTransfer` returns both file object and HTML.
61067 * The order of the checks is important to recognise the HTML drop. 61068 */ 61069 if (html && onHTMLDrop) { 61070 onHTMLDrop(html); 61071 } else if (files.length && onFilesDrop) { 61072 onFilesDrop(files); 61073 } else if (onDrop) { 61074 onDrop(event); 61075 } 61076 }, 61077 onDragStart(event) { 61078 setIsDraggingOverDocument(true); 61079 let _type = 'default'; 61080 61081 /** 61082 * From Windows Chrome 96, the `event.dataTransfer` returns both file object and HTML. 61083 * The order of the checks is important to recognise the HTML drop. 61084 */ 61085 if (event.dataTransfer?.types.includes('text/html')) { 61086 _type = 'html'; 61087 } else if ( 61088 // Check for the types because sometimes the files themselves 61089 // are only available on drop. 61090 event.dataTransfer?.types.includes('Files') || (event.dataTransfer ? (0,external_wp_dom_namespaceObject.getFilesFromDataTransfer)(event.dataTransfer) : []).length > 0) { 61091 _type = 'file'; 61092 } 61093 setType(_type); 61094 }, 61095 onDragEnd() { 61096 setIsDraggingOverDocument(false); 61097 setType(undefined); 61098 }, 61099 onDragEnter() { 61100 setIsDraggingOverElement(true); 61101 }, 61102 onDragLeave() { 61103 setIsDraggingOverElement(false); 61104 } 61105 }); 61106 const disableMotion = (0,external_wp_compose_namespaceObject.useReducedMotion)(); 61107 let children; 61108 const backdrop = { 61109 hidden: { 61110 opacity: 0 61111 }, 61112 show: { 61113 opacity: 1, 61114 transition: { 61115 type: 'tween', 61116 duration: 0.2, 61117 delay: 0, 61118 delayChildren: 0.1 61119 } 61120 }, 61121 exit: { 61122 opacity: 0, 61123 transition: { 61124 duration: 0.2, 61125 delayChildren: 0 61126 } 61127 } 61128 }; 61129 const foreground = { 61130 hidden: { 61131 opacity: 0, 61132 scale: 0.9 61133 }, 61134 show: { 61135 opacity: 1, 61136 scale: 1, 61137 transition: { 61138 duration: 0.1 61139 } 61140 }, 61141 exit: { 61142 opacity: 0, 61143 scale: 0.9 61144 } 61145 }; 61146 if (isDraggingOverElement) { 61147 children = (0,external_wp_element_namespaceObject.createElement)(motion.div, { 61148 variants: backdrop, 61149 initial: disableMotion ? 'show' : 'hidden', 61150 animate: "show", 61151 exit: disableMotion ? 'show' : 'exit', 61152 className: "components-drop-zone__content" 61153 // Without this, when this div is shown, 61154 // Safari calls a onDropZoneLeave causing a loop because of this bug 61155 // https://bugs.webkit.org/show_bug.cgi?id=66547 61156 , 61157 style: { 61158 pointerEvents: 'none' 61159 } 61160 }, (0,external_wp_element_namespaceObject.createElement)(motion.div, { 61161 variants: foreground 61162 }, (0,external_wp_element_namespaceObject.createElement)(icons_build_module_icon, { 61163 icon: library_upload, 61164 className: "components-drop-zone__content-icon" 61165 }), (0,external_wp_element_namespaceObject.createElement)("span", { 61166 className: "components-drop-zone__content-text" 61167 }, label ? label : (0,external_wp_i18n_namespaceObject.__)('Drop files to upload')))); 61168 } 61169 const classes = classnames_default()('components-drop-zone', className, { 61170 'is-active': (isDraggingOverDocument || isDraggingOverElement) && (type === 'file' && onFilesDrop || type === 'html' && onHTMLDrop || type === 'default' && onDrop), 61171 'is-dragging-over-document': isDraggingOverDocument, 61172 'is-dragging-over-element': isDraggingOverElement, 61173 [`is-dragging-${type}`]: !!type 61174 }); 61175 return (0,external_wp_element_namespaceObject.createElement)("div", { 61176 ...restProps, 61177 ref: ref, 61178 className: classes 61179 }, disableMotion ? children : (0,external_wp_element_namespaceObject.createElement)(AnimatePresence, null, children)); 61180} 61181/* harmony default export */ const drop_zone = (DropZoneComponent); 61182 61183;// CONCATENATED MODULE: ./packages/components/build-module/drop-zone/provider.js 61184/** 61185 * WordPress dependencies 61186 */ 61187 61188function DropZoneProvider({ 61189 children 61190}) { 61191 external_wp_deprecated_default()('wp.components.DropZoneProvider', { 61192 since: '5.8', 61193 hint: 'wp.component.DropZone no longer needs a provider. wp.components.DropZoneProvider is safe to remove from your code.' 61194 }); 61195 return children; 61196} 61197 61198;// CONCATENATED MODULE: ./packages/icons/build-module/library/swatch.js 61199 61200/** 61201 * WordPress dependencies 61202 */ 61203 61204const swatch = (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.SVG, { 61205 xmlns: "http://www.w3.org/2000/svg", 61206 viewBox: "0 0 24 24" 61207}, (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.Path, { 61208 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" 61209})); 61210/* harmony default export */ const library_swatch = (swatch); 61211 61212;// CONCATENATED MODULE: ./packages/components/build-module/duotone-picker/utils.js 61213/** 61214 * External dependencies 61215 */ 61216 61217 61218 61219/** 61220 * Internal dependencies 61221 */ 61222 61223k([names]); 61224 61225/** 61226 * Object representation for a color. 61227 * 61228 * @typedef {Object} RGBColor 61229 * @property {number} r Red component of the color in the range [0,1]. 61230 * @property {number} g Green component of the color in the range [0,1]. 61231 * @property {number} b Blue component of the color in the range [0,1]. 61232 */ 61233 61234/** 61235 * Calculate the brightest and darkest values from a color palette. 61236 * 61237 * @param palette Color palette for the theme. 61238 * 61239 * @return Tuple of the darkest color and brightest color. 61240 */ 61241function getDefaultColors(palette) { 61242 // A default dark and light color are required. 61243 if (!palette || palette.length < 2) return ['#000', '#fff']; 61244 return palette.map(({ 61245 color 61246 }) => ({ 61247 color, 61248 brightness: w(color).brightness() 61249 })).reduce(([min, max], current) => { 61250 return [current.brightness <= min.brightness ? current : min, current.brightness >= max.brightness ? current : max]; 61251 }, [{ 61252 brightness: 1, 61253 color: '' 61254 }, { 61255 brightness: 0, 61256 color: '' 61257 }]).map(({ 61258 color 61259 }) => color); 61260} 61261 61262/** 61263 * Generate a duotone gradient from a list of colors. 61264 * 61265 * @param colors CSS color strings. 61266 * @param angle CSS gradient angle. 61267 * 61268 * @return CSS gradient string for the duotone swatch. 61269 */ 61270function getGradientFromCSSColors(colors = [], angle = '90deg') { 61271 const l = 100 / colors.length; 61272 const stops = colors.map((c, i) => `${c} ${i * l}%, ${c} ${(i + 1) * l}%`).join(', '); 61273 return `linear-gradient( ${angle}, ${stops} )`; 61274} 61275 61276/** 61277 * Convert a color array to an array of color stops. 61278 * 61279 * @param colors CSS colors array 61280 * 61281 * @return Color stop information. 61282 */ 61283function getColorStopsFromColors(colors) { 61284 return colors.map((color, i) => ({ 61285 position: i * 100 / (colors.length - 1), 61286 color 61287 })); 61288} 61289 61290/** 61291 * Convert a color stop array to an array colors. 61292 * 61293 * @param colorStops Color stop information. 61294 * 61295 * @return CSS colors array. 61296 */ 61297function getColorsFromColorStops(colorStops = []) { 61298 return colorStops.map(({ 61299 color 61300 }) => color); 61301} 61302 61303;// CONCATENATED MODULE: ./packages/components/build-module/duotone-picker/duotone-swatch.js 61304 61305/** 61306 * WordPress dependencies 61307 */ 61308 61309 61310/** 61311 * Internal dependencies 61312 */ 61313 61314 61315 61316function DuotoneSwatch({ 61317 values 61318}) { 61319 return values ? (0,external_wp_element_namespaceObject.createElement)(color_indicator, { 61320 colorValue: getGradientFromCSSColors(values, '135deg') 61321 }) : (0,external_wp_element_namespaceObject.createElement)(build_module_icon, { 61322 icon: library_swatch 61323 }); 61324} 61325/* harmony default export */ const duotone_swatch = (DuotoneSwatch); 61326 61327;// CONCATENATED MODULE: ./packages/components/build-module/duotone-picker/color-list-picker/index.js 61328 61329/** 61330 * WordPress dependencies 61331 */ 61332 61333 61334 61335 61336/** 61337 * Internal dependencies 61338 */ 61339 61340 61341 61342 61343 61344 61345function ColorOption({ 61346 label, 61347 value, 61348 colors, 61349 disableCustomColors,
61350 enableAlpha, 61351 onChange 61352}) { 61353 const [isOpen, setIsOpen] = (0,external_wp_element_namespaceObject.useState)(false); 61354 const idRoot = (0,external_wp_compose_namespaceObject.useInstanceId)(ColorOption, 'color-list-picker-option'); 61355 const labelId = `${idRoot}__label`; 61356 const contentId = `${idRoot}__content`; 61357 return (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, (0,external_wp_element_namespaceObject.createElement)(build_module_button, { 61358 className: "components-color-list-picker__swatch-button", 61359 onClick: () => setIsOpen(prev => !prev), 61360 "aria-expanded": isOpen, 61361 "aria-controls": contentId 61362 }, (0,external_wp_element_namespaceObject.createElement)(h_stack_component, { 61363 justify: "flex-start", 61364 spacing: 2 61365 }, value ? (0,external_wp_element_namespaceObject.createElement)(color_indicator, { 61366 colorValue: value, 61367 className: "components-color-list-picker__swatch-color" 61368 }) : (0,external_wp_element_namespaceObject.createElement)(build_module_icon, { 61369 icon: library_swatch 61370 }), (0,external_wp_element_namespaceObject.createElement)("span", { 61371 id: labelId 61372 }, label))), (0,external_wp_element_namespaceObject.createElement)("div", { 61373 role: "group", 61374 id: contentId, 61375 "aria-labelledby": labelId, 61376 "aria-hidden": !isOpen 61377 }, isOpen && (0,external_wp_element_namespaceObject.createElement)(color_palette, { 61378 "aria-label": (0,external_wp_i18n_namespaceObject.__)('Color options'), 61379 className: "components-color-list-picker__color-picker", 61380 colors: colors, 61381 value: value, 61382 clearable: false, 61383 onChange: onChange, 61384 disableCustomColors: disableCustomColors, 61385 enableAlpha: enableAlpha 61386 }))); 61387} 61388function ColorListPicker({ 61389 colors, 61390 labels, 61391 value = [], 61392 disableCustomColors, 61393 enableAlpha, 61394 onChange 61395}) { 61396 return (0,external_wp_element_namespaceObject.createElement)("div", { 61397 className: "components-color-list-picker" 61398 }, labels.map((label, index) => (0,external_wp_element_namespaceObject.createElement)(ColorOption, { 61399 key: index, 61400 label: label, 61401 value: value[index], 61402 colors: colors, 61403 disableCustomColors: disableCustomColors, 61404 enableAlpha: enableAlpha, 61405 onChange: newColor => { 61406 const newColors = value.slice(); 61407 newColors[index] = newColor; 61408 onChange(newColors); 61409 } 61410 }))); 61411} 61412/* harmony default export */ const color_list_picker = (ColorListPicker); 61413 61414;// CONCATENATED MODULE: ./packages/components/build-module/duotone-picker/custom-duotone-bar.js 61415 61416/** 61417 * Internal dependencies 61418 */ 61419 61420 61421const PLACEHOLDER_VALUES = ['#333', '#CCC']; 61422function CustomDuotoneBar({ 61423 value, 61424 onChange 61425}) { 61426 const hasGradient = !!value; 61427 const values = hasGradient ? value : PLACEHOLDER_VALUES; 61428 const background = getGradientFromCSSColors(values); 61429 const controlPoints = getColorStopsFromColors(values); 61430 return (0,external_wp_element_namespaceObject.createElement)(CustomGradientBar, { 61431 disableInserter: true, 61432 background: background, 61433 hasGradient: hasGradient, 61434 value: controlPoints, 61435 onChange: newColorStops => { 61436 const newValue = getColorsFromColorStops(newColorStops); 61437 onChange(newValue); 61438 } 61439 }); 61440} 61441 61442;// CONCATENATED MODULE: ./packages/components/build-module/duotone-picker/duotone-picker.js 61443 61444/** 61445 * External dependencies 61446 */ 61447 61448 61449/** 61450 * WordPress dependencies 61451 */ 61452 61453 61454 61455/** 61456 * Internal dependencies 61457 */ 61458 61459 61460 61461 61462 61463 61464/** 61465 * ```jsx 61466 * import { DuotonePicker, DuotoneSwatch } from '@wordpress/components'; 61467 * import { useState } from '@wordpress/element'; 61468 * 61469 * const DUOTONE_PALETTE = [ 61470 * { colors: [ '#8c00b7', '#fcff41' ], name: 'Purple and yellow', slug: 'purple-yellow' }, 61471 * { colors: [ '#000097', '#ff4747' ], name: 'Blue and red', slug: 'blue-red' }, 61472 * ]; 61473 * 61474 * const COLOR_PALETTE = [ 61475 * { color: '#ff4747', name: 'Red', slug: 'red' }, 61476 * { color: '#fcff41', name: 'Yellow', slug: 'yellow' }, 61477 * { color: '#000097', name: 'Blue', slug: 'blue' }, 61478 * { color: '#8c00b7', name: 'Purple', slug: 'purple' }, 61479 * ]; 61480 * 61481 * const Example = () => { 61482 * const [ duotone, setDuotone ] = useState( [ '#000000', '#ffffff' ] ); 61483 * return ( 61484 * <> 61485 * <DuotonePicker 61486 * duotonePalette={ DUOTONE_PALETTE } 61487 * colorPalette={ COLOR_PALETTE } 61488 * value={ duotone } 61489 * onChange={ setDuotone } 61490 * /> 61491 * <DuotoneSwatch values={ duotone } /> 61492 * </> 61493 * ); 61494 * }; 61495 * ``` 61496 */ 61497function DuotonePicker({ 61498 asButtons, 61499 loop, 61500 clearable = true, 61501 unsetable = true, 61502 colorPalette, 61503 duotonePalette, 61504 disableCustomColors, 61505 disableCustomDuotone, 61506 value, 61507 onChange, 61508 'aria-label': ariaLabel, 61509 'aria-labelledby': ariaLabelledby 61510}) {
61511 const [defaultDark, defaultLight] = (0,external_wp_element_namespaceObject.useMemo)(() => getDefaultColors(colorPalette), [colorPalette]); 61512 const isUnset = value === 'unset'; 61513 const unsetOption = (0,external_wp_element_namespaceObject.createElement)(build_module_circular_option_picker.Option, { 61514 key: "unset", 61515 value: "unset", 61516 isSelected: isUnset, 61517 tooltipText: (0,external_wp_i18n_namespaceObject.__)('Unset'), 61518 className: "components-duotone-picker__color-indicator", 61519 onClick: () => { 61520 onChange(isUnset ? undefined : 'unset'); 61521 } 61522 }); 61523 const options = duotonePalette.map(({ 61524 colors, 61525 slug, 61526 name 61527 }) => { 61528 const style = { 61529 background: getGradientFromCSSColors(colors, '135deg'), 61530 color: 'transparent' 61531 }; 61532 const tooltipText = name !== null && name !== void 0 ? name : (0,external_wp_i18n_namespaceObject.sprintf)( 61533 // translators: %s: duotone code e.g: "dark-grayscale" or "7f7f7f-ffffff". 61534 (0,external_wp_i18n_namespaceObject.__)('Duotone code: %s'), slug); 61535 const label = name ? (0,external_wp_i18n_namespaceObject.sprintf)( 61536 // translators: %s: The name of the option e.g: "Dark grayscale". 61537 (0,external_wp_i18n_namespaceObject.__)('Duotone: %s'), name) : tooltipText; 61538 const isSelected = es6_default()(colors, value); 61539 return (0,external_wp_element_namespaceObject.createElement)(build_module_circular_option_picker.Option, { 61540 key: slug, 61541 value: colors, 61542 isSelected: isSelected, 61543 "aria-label": label, 61544 tooltipText: tooltipText, 61545 style: style, 61546 onClick: () => { 61547 onChange(isSelected ? undefined : colors); 61548 } 61549 }); 61550 }); 61551 let metaProps; 61552 if (asButtons) { 61553 metaProps = { 61554 asButtons: true 61555 }; 61556 } else { 61557 const _metaProps = { 61558 asButtons: false, 61559 loop 61560 }; 61561 if (ariaLabel) { 61562 metaProps = { 61563 ..._metaProps, 61564 'aria-label': ariaLabel 61565 }; 61566 } else if (ariaLabelledby) { 61567 metaProps = { 61568 ..._metaProps, 61569 'aria-labelledby': ariaLabelledby 61570 }; 61571 } else { 61572 metaProps = { 61573 ..._metaProps, 61574 'aria-label': (0,external_wp_i18n_namespaceObject.__)('Custom color picker.') 61575 }; 61576 } 61577 } 61578 return (0,external_wp_element_namespaceObject.createElement)(build_module_circular_option_picker, { 61579 ...metaProps, 61580 options: unsetable ? [unsetOption, ...options] : options, 61581 actions: !!clearable && (0,external_wp_element_namespaceObject.createElement)(build_module_circular_option_picker.ButtonAction, { 61582 onClick: () => onChange(undefined) 61583 }, (0,external_wp_i18n_namespaceObject.__)('Clear')) 61584 }, (0,external_wp_element_namespaceObject.createElement)(spacer_component, { 61585 paddingTop: 4 61586 }, (0,external_wp_element_namespaceObject.createElement)(v_stack_component, { 61587 spacing: 3 61588 }, !disableCustomColors && !disableCustomDuotone && (0,external_wp_element_namespaceObject.createElement)(CustomDuotoneBar, { 61589 value: isUnset ? undefined : value, 61590 onChange: onChange 61591 }), !disableCustomDuotone && (0,external_wp_element_namespaceObject.createElement)(color_list_picker, { 61592 labels: [(0,external_wp_i18n_namespaceObject.__)('Shadows'), (0,external_wp_i18n_namespaceObject.__)('Highlights')], 61593 colors: colorPalette, 61594 value: isUnset ? undefined : value, 61595 disableCustomColors: disableCustomColors, 61596 enableAlpha: true, 61597 onChange: newColors => { 61598 if (!newColors[0]) { 61599 newColors[0] = defaultDark; 61600 } 61601 if (!newColors[1]) { 61602 newColors[1] = defaultLight; 61603 } 61604 const newValue = newColors.length >= 2 ? newColors : undefined; 61605 // @ts-expect-error TODO: The color arrays for a DuotonePicker should be a tuple of two colors, 61606 // but it's currently typed as a string[]. 61607 // See also https://github.com/WordPress/gutenberg/pull/49060#discussion_r1136951035 61608 onChange(newValue); 61609 } 61610 })))); 61611} 61612/* harmony default export */ const duotone_picker = (DuotonePicker); 61613 61614;// CONCATENATED MODULE: ./packages/icons/build-module/library/external.js 61615 61616/** 61617 * WordPress dependencies 61618 */ 61619 61620const external = (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.SVG, { 61621 xmlns: "http://www.w3.org/2000/svg", 61622 viewBox: "0 0 24 24" 61623}, (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.Path, { 61624 d: "M19.5 4.5h-7V6h4.44l-5.97 5.97 1.06 1.06L18 7.06v4.44h1.5v-7Zm-13 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-3H17v3a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h3V5.5h-3Z" 61625})); 61626/* harmony default export */ const library_external = (external); 61627 61628;// CONCATENATED MODULE: ./packages/components/build-module/external-link/styles/external-link-styles.js 61629 61630function 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)."; } 61631/** 61632 * External dependencies 61633 */ 61634
61635/** 61636 * WordPress dependencies 61637 */ 61638 61639const StyledIcon = /*#__PURE__*/emotion_styled_base_browser_esm(icons_build_module_icon, true ? { 61640 target: "esh4a730" 61641} : 0)( true ? { 61642 name: "rvs7bx", 61643 styles: "width:1em;height:1em;margin:0;vertical-align:middle;fill:currentColor" 61644} : 0); 61645 61646;// CONCATENATED MODULE: ./packages/components/build-module/external-link/index.js 61647 61648/** 61649 * External dependencies 61650 */ 61651 61652/** 61653 * WordPress dependencies 61654 */ 61655 61656 61657 61658 61659/** 61660 * Internal dependencies 61661 */ 61662 61663 61664function UnforwardedExternalLink(props, ref) { 61665 const { 61666 href, 61667 children, 61668 className, 61669 rel = '', 61670 ...additionalProps 61671 } = props; 61672 const optimizedRel = [...new Set([...rel.split(' '), 'external', 'noreferrer', 'noopener'].filter(Boolean))].join(' '); 61673 const classes = classnames_default()('components-external-link', className); 61674 /* Anchor links are perceived as external links. 61675 This constant helps check for on page anchor links, 61676 to prevent them from being opened in the editor. */ 61677 const isInternalAnchor = !!href?.startsWith('#'); 61678 const onClickHandler = event => { 61679 if (isInternalAnchor) { 61680 event.preventDefault(); 61681 } 61682 if (props.onClick) { 61683 props.onClick(event); 61684 } 61685 }; 61686 return (/* eslint-disable react/jsx-no-target-blank */ 61687 (0,external_wp_element_namespaceObject.createElement)("a", { 61688 ...additionalProps, 61689 className: classes, 61690 href: href, 61691 onClick: onClickHandler, 61692 target: "_blank", 61693 rel: optimizedRel, 61694 ref: ref 61695 }, children, (0,external_wp_element_namespaceObject.createElement)(visually_hidden_component, { 61696 as: "span" 61697 }, /* translators: accessibility text */ 61698 (0,external_wp_i18n_namespaceObject.__)('(opens in a new tab)')), (0,external_wp_element_namespaceObject.createElement)(StyledIcon, { 61699 icon: library_external, 61700 className: "components-external-link__icon" 61701 })) 61702 /* eslint-enable react/jsx-no-target-blank */ 61703 ); 61704} 61705 61706/** 61707 * Link to an external resource. 61708 * 61709 * ```jsx 61710 * import { ExternalLink } from '@wordpress/components'; 61711 * 61712 * const MyExternalLink = () => ( 61713 * <ExternalLink href="https://wordpress.org">WordPress.org</ExternalLink> 61714 * ); 61715 * ``` 61716 */ 61717const ExternalLink = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedExternalLink); 61718/* harmony default export */ const external_link = (ExternalLink); 61719 61720;// CONCATENATED MODULE: ./packages/components/build-module/focal-point-picker/utils.js 61721const INITIAL_BOUNDS = { 61722 width: 200, 61723 height: 170 61724}; 61725const VIDEO_EXTENSIONS = ['avi', 'mpg', 'mpeg', 'mov', 'mp4', 'm4v', 'ogg', 'ogv', 'webm', 'wmv']; 61726 61727/** 61728 * Gets the extension of a file name. 61729 * 61730 * @param filename The file name. 61731 * @return The extension of the file name. 61732 */ 61733function getExtension(filename = '') { 61734 const parts = filename.split('.'); 61735 return parts[parts.length - 1]; 61736} 61737 61738/** 61739 * Checks if a file is a video. 61740 * 61741 * @param filename The file name. 61742 * @return Whether the file is a video. 61743 */ 61744function isVideoType(filename = '') { 61745 if (!filename) return false; 61746 return filename.startsWith('data:video/') || VIDEO_EXTENSIONS.includes(getExtension(filename)); 61747} 61748 61749/** 61750 * Transforms a fraction value to a percentage value. 61751 * 61752 * @param fraction The fraction value. 61753 * @return A percentage value. 61754 */ 61755function fractionToPercentage(fraction) { 61756 return Math.round(fraction * 100); 61757} 61758 61759;// CONCATENATED MODULE: ./packages/components/build-module/focal-point-picker/styles/focal-point-picker-style.js 61760 61761function 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)."; } 61762/** 61763 * External dependencies 61764 */ 61765 61766/** 61767 * Internal dependencies 61768 */ 61769 61770 61771 61772 61773const MediaWrapper = emotion_styled_base_browser_esm("div", true ? { 61774 target: "eeew7dm8" 61775} : 0)( true ? { 61776 name: "w0nf6b", 61777 styles: "background-color:transparent;text-align:center;width:100%" 61778} : 0); 61779const MediaContainer = emotion_styled_base_browser_esm("div", true ? { 61780 target: "eeew7dm7" 61781} : 0)( true ? { 61782 name: "megach", 61783 styles: "align-items:center;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;}" 61784} : 0); 61785const MediaPlaceholder = emotion_styled_base_browser_esm("div", true ? { 61786 target: "eeew7dm6" 61787} : 0)("background:", COLORS.gray[100], ";box-sizing:border-box;height:", INITIAL_BOUNDS.height, "px;max-width:280px;min-width:", INITIAL_BOUNDS.width, "px;width:100%;" + ( true ? "" : 0)); 61788const StyledUnitControl = /*#__PURE__*/emotion_styled_base_browser_esm(unit_control, true ? { 61789 target: "eeew7dm5" 61790} : 0)( true ? { 61791 name: "1pzk433", 61792 styles: "width:100px" 61793} : 0); 61794var focal_point_picker_style_ref2 = true ? { 61795 name: "1mn7kwb", 61796 styles: "padding-bottom:1em" 61797} : 0; 61798const focal_point_picker_style_deprecatedBottomMargin = ({ 61799 __nextHasNoMarginBottom 61800}) => { 61801 return !__nextHasNoMarginBottom ? focal_point_picker_style_ref2 : undefined; 61802}; 61803var focal_point_picker_style_ref = true ? { 61804 name: "1mn7kwb", 61805 styles: "padding-bottom:1em" 61806} : 0; 61807const extraHelpTextMargin = ({ 61808 hasHelpText = false 61809}) => { 61810 return hasHelpText ? focal_point_picker_style_ref : undefined; 61811}; 61812const ControlWrapper = /*#__PURE__*/emotion_styled_base_browser_esm(flex_component, true ? { 61813 target: "eeew7dm4" 61814} : 0)("max-width:320px;padding-top:1em;", extraHelpTextMargin, " ", focal_point_picker_style_deprecatedBottomMargin, ";" + ( true ? "" : 0)); 61815const GridView = emotion_styled_base_browser_esm("div", true ? { 61816 target: "eeew7dm3" 61817} : 0)("left:50%;overflow:hidden;pointer-events:none;position:absolute;top:50%;transform:translate3d( -50%, -50%, 0 );transition:opacity 120ms linear;z-index:1;opacity:", ({ 61818 showOverlay 61819}) => showOverlay ? 1 : 0, ";" + ( true ? "" : 0)); 61820const GridLine = emotion_styled_base_browser_esm("div", true ? { 61821 target: "eeew7dm2" 61822} : 0)( true ? { 61823 name: "1d42i6k", 61824 styles: "background:white;box-shadow:0 0 2px rgba( 0, 0, 0, 0.6 );position:absolute;opacity:0.4;transform:translateZ( 0 )" 61825} : 0); 61826const GridLineX = /*#__PURE__*/emotion_styled_base_browser_esm(GridLine, true ? { 61827 target: "eeew7dm1" 61828} : 0)( true ? { 61829 name: "1qp910y", 61830 styles: "height:1px;left:0;right:0" 61831} : 0); 61832const GridLineY = /*#__PURE__*/emotion_styled_base_browser_esm(GridLine, true ? { 61833 target: "eeew7dm0" 61834} : 0)( true ? { 61835 name: "1oz3zka", 61836 styles: "width:1px;top:0;bottom:0" 61837} : 0); 61838 61839;// CONCATENATED MODULE: ./packages/components/build-module/focal-point-picker/controls.js 61840 61841/** 61842 * WordPress dependencies 61843 */ 61844 61845 61846/** 61847 * Internal dependencies 61848 */ 61849 61850 61851const TEXTCONTROL_MIN = 0; 61852const TEXTCONTROL_MAX = 100; 61853const controls_noop = () => {}; 61854function FocalPointPickerControls({ 61855 __nextHasNoMarginBottom, 61856 hasHelpText, 61857 onChange = controls_noop, 61858 point = { 61859 x: 0.5, 61860 y: 0.5 61861 } 61862}) { 61863 const valueX = fractionToPercentage(point.x); 61864 const valueY = fractionToPercentage(point.y); 61865 const handleChange = (value, axis) => { 61866 if (value === undefined) return; 61867 const num = parseInt(value, 10); 61868 if (!isNaN(num)) { 61869 onChange({ 61870 ...point, 61871 [axis]: num / 100 61872 }); 61873 } 61874 }; 61875 return (0,external_wp_element_namespaceObject.createElement)(ControlWrapper, { 61876 className: "focal-point-picker__controls", 61877 __nextHasNoMarginBottom: __nextHasNoMarginBottom, 61878 hasHelpText: hasHelpText 61879 }, (0,external_wp_element_namespaceObject.createElement)(FocalPointUnitControl, { 61880 label: (0,external_wp_i18n_namespaceObject.__)('Left'), 61881 "aria-label": (0,external_wp_i18n_namespaceObject.__)('Focal point left position'), 61882 value: [valueX, '%'].join(''), 61883 onChange: next => handleChange(next, 'x'),
61884 dragDirection: "e" 61885 }), (0,external_wp_element_namespaceObject.createElement)(FocalPointUnitControl, { 61886 label: (0,external_wp_i18n_namespaceObject.__)('Top'), 61887 "aria-label": (0,external_wp_i18n_namespaceObject.__)('Focal point top position'), 61888 value: [valueY, '%'].join(''), 61889 onChange: next => handleChange(next, 'y'), 61890 dragDirection: "s" 61891 })); 61892} 61893function FocalPointUnitControl(props) { 61894 return (0,external_wp_element_namespaceObject.createElement)(StyledUnitControl, { 61895 className: "focal-point-picker__controls-position-unit-control", 61896 labelPosition: "top", 61897 max: TEXTCONTROL_MAX, 61898 min: TEXTCONTROL_MIN, 61899 units: [{ 61900 value: '%', 61901 label: '%' 61902 }], 61903 ...props 61904 }); 61905} 61906 61907;// CONCATENATED MODULE: ./packages/components/build-module/focal-point-picker/styles/focal-point-style.js 61908 61909/** 61910 * External dependencies 61911 */ 61912 61913const PointerCircle = emotion_styled_base_browser_esm("div", true ? { 61914 target: "e19snlhg0" 61915} : 0)("background-color:transparent;cursor:grab;height:48px;margin:-24px 0 0 -24px;position:absolute;user-select:none;width:48px;will-change:transform;z-index:10000;background:rgba( 255, 255, 255, 0.6 );border-radius:50%;backdrop-filter:blur( 4px );box-shadow:rgb( 0 0 0 / 20% ) 0px 0px 10px;", ({ 61916 isDragging 61917}) => isDragging && 'cursor: grabbing;', ";" + ( true ? "" : 0)); 61918 61919;// CONCATENATED MODULE: ./packages/components/build-module/focal-point-picker/focal-point.js 61920 61921/** 61922 * Internal dependencies 61923 */ 61924 61925 61926/** 61927 * External dependencies 61928 */ 61929 61930function FocalPoint({ 61931 left = '50%', 61932 top = '50%', 61933 ...props 61934}) { 61935 const classes = classnames_default()('components-focal-point-picker__icon_container'); 61936 const style = { 61937 left, 61938 top 61939 }; 61940 return (0,external_wp_element_namespaceObject.createElement)(PointerCircle, { 61941 ...props, 61942 className: classes, 61943 style: style 61944 }); 61945} 61946 61947;// CONCATENATED MODULE: ./packages/components/build-module/focal-point-picker/grid.js 61948 61949/** 61950 * Internal dependencies 61951 */ 61952 61953function FocalPointPickerGrid({ 61954 bounds, 61955 ...props 61956}) { 61957 return (0,external_wp_element_namespaceObject.createElement)(GridView, { 61958 ...props, 61959 className: "components-focal-point-picker__grid", 61960 style: { 61961 width: bounds.width, 61962 height: bounds.height 61963 } 61964 }, (0,external_wp_element_namespaceObject.createElement)(GridLineX, { 61965 style: { 61966 top: '33%' 61967 } 61968 }), (0,external_wp_element_namespaceObject.createElement)(GridLineX, { 61969 style: { 61970 top: '66%' 61971 } 61972 }), (0,external_wp_element_namespaceObject.createElement)(GridLineY, { 61973 style: { 61974 left: '33%' 61975 } 61976 }), (0,external_wp_element_namespaceObject.createElement)(GridLineY, { 61977 style: { 61978 left: '66%' 61979 } 61980 })); 61981} 61982 61983;// CONCATENATED MODULE: ./packages/components/build-module/focal-point-picker/media.js 61984 61985/** 61986 * External dependencies 61987 */ 61988 61989/** 61990 * Internal dependencies 61991 */ 61992 61993 61994function media_Media({ 61995 alt, 61996 autoPlay, 61997 src, 61998 onLoad, 61999 mediaRef, 62000 // Exposing muted prop for test rendering purposes 62001 // https://github.com/testing-library/react-testing-library/issues/470 62002 muted = true, 62003 ...props 62004}) { 62005 if (!src) { 62006 return (0,external_wp_element_namespaceObject.createElement)(MediaPlaceholder, { 62007 className: "components-focal-point-picker__media components-focal-point-picker__media--placeholder", 62008 ref: mediaRef, 62009 ...props 62010 }); 62011 } 62012 const isVideo = isVideoType(src); 62013 return isVideo ? (0,external_wp_element_namespaceObject.createElement)("video", { 62014 ...props, 62015 autoPlay: autoPlay, 62016 className: "components-focal-point-picker__media components-focal-point-picker__media--video", 62017 loop: true, 62018 muted: muted, 62019 onLoadedData: onLoad, 62020 ref: mediaRef, 62021 src: src 62022 }) : (0,external_wp_element_namespaceObject.createElement)("img", { 62023 ...props, 62024 alt: alt, 62025 className: "components-focal-point-picker__media components-focal-point-picker__media--image", 62026 onLoad: onLoad, 62027 ref: mediaRef, 62028 src: src 62029 }); 62030} 62031 62032;// CONCATENATED MODULE: ./packages/components/build-module/focal-point-picker/index.js 62033 62034/** 62035 * External dependencies 62036 */ 62037 62038 62039/** 62040 * WordPress dependencies 62041 */ 62042 62043 62044 62045 62046/** 62047 * Internal dependencies 62048 */ 62049 62050 62051 62052 62053 62054 62055 62056 62057const GRID_OVERLAY_TIMEOUT = 600; 62058 62059/** 62060 * Focal Point Picker is a component which creates a UI for identifying the most important visual point of an image. 62061 * 62062 * This component addresses a specific problem: with large background images it is common to see undesirable crops, 62063 * especially when viewing on smaller viewports such as mobile phones. This component allows the selection of 62064 * the point with the most important visual information and returns it as a pair of numbers between 0 and 1. 62065 * This value can be easily converted into the CSS `background-position` attribute, and will ensure that the 62066 * focal point is never cropped out, regardless of viewport. 62067 * 62068 * - Example focal point picker value: `{ x: 0.5, y: 0.1 }` 62069 * - Corresponding CSS: `background-position: 50% 10%;` 62070 * 62071 * ```jsx 62072 * import { FocalPointPicker } from '@wordpress/components';
62073 * import { useState } from '@wordpress/element'; 62074 * 62075 * const Example = () => { 62076 * const [ focalPoint, setFocalPoint ] = useState( { 62077 * x: 0.5, 62078 * y: 0.5, 62079 * } ); 62080 * 62081 * const url = '/path/to/image'; 62082 * 62083 * // Example function to render the CSS styles based on Focal Point Picker value 62084 * const style = { 62085 * backgroundImage: `url(${ url })`, 62086 * backgroundPosition: `${ focalPoint.x * 100 }% ${ focalPoint.y * 100 }%`, 62087 * }; 62088 * 62089 * return ( 62090 * <> 62091 * <FocalPointPicker 62092 * url={ url } 62093 * value={ focalPoint } 62094 * onDragStart={ setFocalPoint } 62095 * onDrag={ setFocalPoint } 62096 * onChange={ setFocalPoint } 62097 * /> 62098 * <div style={ style } /> 62099 * </> 62100 * ); 62101 * }; 62102 * ``` 62103 */ 62104function FocalPointPicker({ 62105 __nextHasNoMarginBottom, 62106 autoPlay = true, 62107 className, 62108 help, 62109 label, 62110 onChange, 62111 onDrag, 62112 onDragEnd, 62113 onDragStart, 62114 resolvePoint, 62115 url, 62116 value: valueProp = { 62117 x: 0.5, 62118 y: 0.5 62119 }, 62120 ...restProps 62121}) { 62122 const [point, setPoint] = (0,external_wp_element_namespaceObject.useState)(valueProp); 62123 const [showGridOverlay, setShowGridOverlay] = (0,external_wp_element_namespaceObject.useState)(false); 62124 const { 62125 startDrag, 62126 endDrag, 62127 isDragging 62128 } = (0,external_wp_compose_namespaceObject.__experimentalUseDragging)({ 62129 onDragStart: event => { 62130 dragAreaRef.current?.focus(); 62131 const value = getValueWithinDragArea(event); 62132 62133 // `value` can technically be undefined if getValueWithinDragArea() is 62134 // called before dragAreaRef is set, but this shouldn't happen in reality. 62135 if (!value) return; 62136 onDragStart?.(value, event); 62137 setPoint(value); 62138 }, 62139 onDragMove: event => { 62140 // Prevents text-selection when dragging. 62141 event.preventDefault(); 62142 const value = getValueWithinDragArea(event); 62143 if (!value) return; 62144 onDrag?.(value, event); 62145 setPoint(value); 62146 }, 62147 onDragEnd: () => { 62148 onDragEnd?.(); 62149 onChange?.(point); 62150 } 62151 }); 62152 62153 // Uses the internal point while dragging or else the value from props. 62154 const { 62155 x, 62156 y 62157 } = isDragging ? point : valueProp; 62158 const dragAreaRef = (0,external_wp_element_namespaceObject.useRef)(null); 62159 const [bounds, setBounds] = (0,external_wp_element_namespaceObject.useState)(INITIAL_BOUNDS); 62160 const refUpdateBounds = (0,external_wp_element_namespaceObject.useRef)(() => { 62161 if (!dragAreaRef.current) return; 62162 const { 62163 clientWidth: width, 62164 clientHeight: height 62165 } = dragAreaRef.current; 62166 // Falls back to initial bounds if the ref has no size. Since styles 62167 // give the drag area dimensions even when the media has not loaded 62168 // this should only happen in unit tests (jsdom). 62169 setBounds(width > 0 && height > 0 ? { 62170 width, 62171 height 62172 } : { 62173 ...INITIAL_BOUNDS 62174 }); 62175 }); 62176 (0,external_wp_element_namespaceObject.useEffect)(() => { 62177 const updateBounds = refUpdateBounds.current; 62178 if (!dragAreaRef.current) return; 62179 const { 62180 defaultView 62181 } = dragAreaRef.current.ownerDocument; 62182 defaultView?.addEventListener('resize', updateBounds); 62183 return () => defaultView?.removeEventListener('resize', updateBounds); 62184 }, []); 62185 62186 // Updates the bounds to cover cases of unspecified media or load failures. 62187 (0,external_wp_compose_namespaceObject.useIsomorphicLayoutEffect)(() => void refUpdateBounds.current(), []); 62188 62189 // TODO: Consider refactoring getValueWithinDragArea() into a pure function. 62190 // https://github.com/WordPress/gutenberg/pull/43872#discussion_r963455173 62191 const getValueWithinDragArea = ({ 62192 clientX, 62193 clientY, 62194 shiftKey 62195 }) => { 62196 if (!dragAreaRef.current) return; 62197 const { 62198 top, 62199 left 62200 } = dragAreaRef.current.getBoundingClientRect();
62201 let nextX = (clientX - left) / bounds.width; 62202 let nextY = (clientY - top) / bounds.height; 62203 // Enables holding shift to jump values by 10%. 62204 if (shiftKey) { 62205 nextX = Math.round(nextX / 0.1) * 0.1; 62206 nextY = Math.round(nextY / 0.1) * 0.1; 62207 } 62208 return getFinalValue({ 62209 x: nextX, 62210 y: nextY 62211 }); 62212 }; 62213 const getFinalValue = value => { 62214 var _resolvePoint; 62215 const resolvedValue = (_resolvePoint = resolvePoint?.(value)) !== null && _resolvePoint !== void 0 ? _resolvePoint : value; 62216 resolvedValue.x = Math.max(0, Math.min(resolvedValue.x, 1)); 62217 resolvedValue.y = Math.max(0, Math.min(resolvedValue.y, 1)); 62218 const roundToTwoDecimalPlaces = n => Math.round(n * 1e2) / 1e2; 62219 return { 62220 x: roundToTwoDecimalPlaces(resolvedValue.x), 62221 y: roundToTwoDecimalPlaces(resolvedValue.y) 62222 }; 62223 }; 62224 const arrowKeyStep = event => { 62225 const { 62226 code, 62227 shiftKey 62228 } = event; 62229 if (!['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(code)) return; 62230 event.preventDefault(); 62231 const value = { 62232 x, 62233 y 62234 }; 62235 const step = shiftKey ? 0.1 : 0.01; 62236 const delta = code === 'ArrowUp' || code === 'ArrowLeft' ? -1 * step : step; 62237 const axis = code === 'ArrowUp' || code === 'ArrowDown' ? 'y' : 'x'; 62238 value[axis] = value[axis] + delta; 62239 onChange?.(getFinalValue(value)); 62240 }; 62241 const focalPointPosition = { 62242 left: x * bounds.width, 62243 top: y * bounds.height 62244 }; 62245 const classes = classnames_default()('components-focal-point-picker-control', className); 62246 const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(FocalPointPicker); 62247 const id = `inspector-focal-point-picker-control-${instanceId}`; 62248 use_update_effect(() => { 62249 setShowGridOverlay(true); 62250 const timeout = window.setTimeout(() => { 62251 setShowGridOverlay(false); 62252 }, GRID_OVERLAY_TIMEOUT); 62253 return () => window.clearTimeout(timeout); 62254 }, [x, y]); 62255 return (0,external_wp_element_namespaceObject.createElement)(base_control, { 62256 ...restProps, 62257 __nextHasNoMarginBottom: __nextHasNoMarginBottom, 62258 label: label, 62259 id: id, 62260 help: help, 62261 className: classes 62262 }, (0,external_wp_element_namespaceObject.createElement)(MediaWrapper, { 62263 className: "components-focal-point-picker-wrapper" 62264 }, (0,external_wp_element_namespaceObject.createElement)(MediaContainer, { 62265 className: "components-focal-point-picker", 62266 onKeyDown: arrowKeyStep, 62267 onMouseDown: startDrag, 62268 onBlur: () => { 62269 if (isDragging) endDrag(); 62270 }, 62271 ref: dragAreaRef, 62272 role: "button", 62273 tabIndex: -1 62274 }, (0,external_wp_element_namespaceObject.createElement)(FocalPointPickerGrid, { 62275 bounds: bounds, 62276 showOverlay: showGridOverlay 62277 }), (0,external_wp_element_namespaceObject.createElement)(media_Media, { 62278 alt: (0,external_wp_i18n_namespaceObject.__)('Media preview'), 62279 autoPlay: autoPlay, 62280 onLoad: refUpdateBounds.current, 62281 src: url 62282 }), (0,external_wp_element_namespaceObject.createElement)(FocalPoint, { 62283 ...focalPointPosition, 62284 isDragging: isDragging 62285 }))), (0,external_wp_element_namespaceObject.createElement)(FocalPointPickerControls, { 62286 __nextHasNoMarginBottom: __nextHasNoMarginBottom, 62287 hasHelpText: !!help, 62288 point: { 62289 x, 62290 y 62291 }, 62292 onChange: value => { 62293 onChange?.(getFinalValue(value)); 62294 } 62295 })); 62296} 62297/* harmony default export */ const focal_point_picker = (FocalPointPicker); 62298 62299;// CONCATENATED MODULE: ./packages/components/build-module/focusable-iframe/index.js 62300 62301/** 62302 * WordPress dependencies 62303 */ 62304 62305 62306/** 62307 * Internal dependencies 62308 */ 62309 62310function FocusableIframe({ 62311 iframeRef, 62312 ...props 62313}) { 62314 const ref = (0,external_wp_compose_namespaceObject.useMergeRefs)([iframeRef, (0,external_wp_compose_namespaceObject.useFocusableIframe)()]); 62315 external_wp_deprecated_default()('wp.components.FocusableIframe', { 62316 since: '5.9', 62317 alternative: 'wp.compose.useFocusableIframe' 62318 }); 62319 // Disable reason: The rendered iframe is a pass-through component, 62320 // assigning props inherited from the rendering parent. It's the 62321 // responsibility of the parent to assign a title. 62322 // eslint-disable-next-line jsx-a11y/iframe-has-title 62323 return (0,external_wp_element_namespaceObject.createElement)("iframe", { 62324 ref: ref, 62325 ...props 62326 }); 62327} 62328 62329;// CONCATENATED MODULE: ./packages/icons/build-module/library/sett
62329ings.js 62330 62331/** 62332 * WordPress dependencies 62333 */ 62334 62335const settings = (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.SVG, { 62336 xmlns: "http://www.w3.org/2000/svg", 62337 viewBox: "0 0 24 24" 62338}, (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.Path, { 62339 d: "m19 7.5h-7.628c-.3089-.87389-1.1423-1.5-2.122-1.5-.97966 0-1.81309.62611-2.12197 1.5h-2.12803v1.5h2.12803c.30888.87389 1.14231 1.5 2.12197 1.5.9797 0 1.8131-.62611 2.122-1.5h7.628z" 62340}), (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.Path, { 62341 d: "m19 15h-2.128c-.3089-.8739-1.1423-1.5-2.122-1.5s-1.8131.6261-2.122 1.5h-7.628v1.5h7.628c.3089.8739 1.1423 1.5 2.122 1.5s1.8131-.6261 2.122-1.5h2.128z" 62342})); 62343/* harmony default export */ const library_settings = (settings); 62344 62345;// CONCATENATED MODULE: ./packages/components/build-module/font-size-picker/utils.js 62346/** 62347 * WordPress dependencies 62348 */ 62349 62350/** 62351 * Internal dependencies 62352 */ 62353 62354 62355 62356/** 62357 * Some themes use css vars for their font sizes, so until we 62358 * have the way of calculating them don't display them. 62359 * 62360 * @param value The value that is checked. 62361 * @return Whether the value is a simple css value. 62362 */ 62363function isSimpleCssValue(value) { 62364 const sizeRegex = /^[\d\.]+(px|em|rem|vw|vh|%)?$/i; 62365 return sizeRegex.test(String(value)); 62366} 62367 62368/** 62369 * If all of the given font sizes have the same unit (e.g. 'px'), return that 62370 * unit. Otherwise return null. 62371 * 62372 * @param fontSizes List of font sizes. 62373 * @return The common unit, or null. 62374 */ 62375function getCommonSizeUnit(fontSizes) { 62376 const [firstFontSize, ...otherFontSizes] = fontSizes; 62377 if (!firstFontSize) { 62378 return null; 62379 } 62380 const [, firstUnit] = parseQuantityAndUnitFromRawValue(firstFontSize.size); 62381 const areAllSizesSameUnit = otherFontSizes.every(fontSize => { 62382 const [, unit] = parseQuantityAndUnitFromRawValue(fontSize.size); 62383 return unit === firstUnit; 62384 }); 62385 return areAllSizesSameUnit ? firstUnit : null; 62386} 62387 62388;// CONCATENATED MODULE: ./packages/components/build-module/font-size-picker/styles.js 62389 62390function font_size_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)."; } 62391/** 62392 * External dependencies 62393 */ 62394 62395/** 62396 * Internal dependencies 62397 */ 62398 62399 62400 62401 62402 62403const styles_Container = emotion_styled_base_browser_esm("fieldset", true ? { 62404 target: "e8tqeku5" 62405} : 0)( true ? { 62406 name: "1t1ytme", 62407 styles: "border:0;margin:0;padding:0" 62408} : 0); 62409const font_size_picker_styles_Header = /*#__PURE__*/emotion_styled_base_browser_esm(h_stack_component, true ? { 62410 target: "e8tqeku4" 62411} : 0)("height:", space(4), ";" + ( true ? "" : 0)); 62412const HeaderToggle = /*#__PURE__*/emotion_styled_base_browser_esm(build_module_button, true ? { 62413 target: "e8tqeku3" 62414} : 0)("margin-top:", space(-1), ";" + ( true ? "" : 0)); 62415const HeaderLabel = /*#__PURE__*/emotion_styled_base_browser_esm(base_control.VisualLabel, true ? { 62416 target: "e8tqeku2" 62417} : 0)("display:flex;gap:", space(1), ";justify-content:flex-start;margin-bottom:0;" + ( true ? "" : 0)); 62418const HeaderHint = emotion_styled_base_browser_esm("span", true ? { 62419 target: "e8tqeku1" 62420} : 0)("color:", COLORS.gray[700], ";" + ( true ? "" : 0)); 62421const Controls = emotion_styled_base_browser_esm("div", true ? { 62422 target: "e8tqeku0" 62423} : 0)(props => !props.__nextHasNoMarginBottom && `margin-bottom: ${space(6)};`, ";" + ( true ? "" : 0)); 62424 62425;// CONCATENATED MODULE: ./packages/components/build-module/font-size-picker/font-size-picker-select.js 62426 62427/** 62428 * WordPress dependencies 62429 */ 62430 62431 62432/** 62433 * Internal dependencies 62434 */ 62435 62436 62437 62438const DEFAULT_OPTION = { 62439 key: 'default', 62440 name: (0,external_wp_i18n_namespaceObject.__)('Default'), 62441 value: undefined 62442}; 62443const CUSTOM_OPTION = { 62444 key: 'custom', 62445 name: (0,external_wp_i18n_namespaceObject.__)('Custom') 62446}; 62447const FontSizePickerSelect = props => { 62448 var _options$find; 62449 const { 62450 fontSizes, 62451 value, 62452 disableCustomFontSizes, 62453 size, 62454 onChange, 62455 onSelectCustom 62456 } = props; 62457 const areAllSizesSameUnit = !!getCommonSizeUnit(fontSizes); 62458 const options = [DEFAULT_OPTION, ...fontSizes.map(fontSize => { 62459 let hint; 62460 if (areAllSizesSameUnit) { 62461 const [quantity] = parseQuantityAndUnitFromRawValue(fontSize.size); 62462 if (quantity !== undefined) { 62463 hint = String(quantity); 62464 } 62465 } else if (isSimpleCssValue(fontSize.size)) { 62466 hint = String(fontSize.size); 62467 } 62468 return { 62469 key: fontSize.slug, 62470 name: fontSize.name || fontSize.slug, 62471 value: fontSize.size, 62472 __experimentalHint: hint 62473 }; 62474 }), ...(disableCustomFontSizes ? [] : [CUSTOM_OPTION])]; 62475 const selectedOption = value ? (_options$find = options.find(option => option.value === value)) !== null && _options$find !== void 0 ? _options$find : CUSTOM_OPTION : DEFAULT_OPTION; 62476 return (0,external_wp_element_namespaceObject.createElement)(CustomSelectControl, { 62477 __nextUnconstrainedWidth: true, 62478 className: "components-font-size-picker__select", 62479 label: (0,external_wp_i18n_namespaceObject.__)('Font size'), 62480 hideLabelFromVision: true, 62481 describedBy: (0,external_wp_i18n_namespaceObject.sprintf)( 62482 // translators: %s: Currently selected font size. 62483 (0,external_wp_i18n_namespaceObject.__)('Currently selected font size: %s'), selectedOption.name), 62484 options: options, 62485 value: selectedOption, 62486 __experimentalShowSelectedHint: true, 62487 onChange: ({ 62488 selectedItem 62489 }) => { 62490 if (selectedItem === CUSTOM_OPTION) { 62491 onSelectCustom(); 62492 } else { 62493 onChange(selectedItem.value); 62494 } 62495 }, 62496 size: size 62497 }); 62498}; 62499/* harmony default export */ const font_size_picker_select = (FontSizePickerSelect); 62500 62501;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/context/DeprecatedLayoutGroupContext.mjs 62502 62503 62504/** 62505 * Note: Still used by components generated by old versions of Framer 62506 * 62507 * @deprecated 62508 */ 62509const DeprecatedLayoutGroupContext = (0,external_React_.createContext)(null); 62510 62511 62512 62513;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/projection/node/group.mjs 62514const notify = (node) => !node.isLayoutDirty && node.willUpdate(false); 62515function nodeGroup() { 62516 const nodes = new Set(); 62517 const subscriptions = new WeakMap(); 62518 const dirtyAll = () =>
62518 nodes.forEach(notify); 62519 return { 62520 add: (node) => { 62521 nodes.add(node); 62522 subscriptions.set(node, node.addEventListener("willUpdate", dirtyAll)); 62523 }, 62524 remove: (node) => { 62525 nodes.delete(node); 62526 const unsubscribe = subscriptions.get(node); 62527 if (unsubscribe) { 62528 unsubscribe(); 62529 subscriptions.delete(node); 62530 } 62531 dirtyAll(); 62532 }, 62533 dirty: dirtyAll, 62534 }; 62535} 62536 62537 62538 62539;// CONCATENATED MODULE: ./packages/components/node_modules/framer-motion/dist/es/components/LayoutGroup/index.mjs 62540 62541 62542 62543 62544 62545 62546 62547const shouldInheritGroup = (inherit) => inherit === true; 62548const shouldInheritId = (inherit) => shouldInheritGroup(inherit === true) || inherit === "id"; 62549const LayoutGroup = ({ children, id, inherit = true }) => { 62550 const layoutGroupContext = (0,external_React_.useContext)(LayoutGroupContext); 62551 const deprecatedLayoutGroupContext = (0,external_React_.useContext)(DeprecatedLayoutGroupContext); 62552 const [forceRender, key] = use_force_update_useForceUpdate(); 62553 const context = (0,external_React_.useRef)(null); 62554 const upstreamId = layoutGroupContext.id || deprecatedLayoutGroupContext; 62555 if (context.current === null) { 62556 if (shouldInheritId(inherit) && upstreamId) { 62557 id = id ? upstreamId + "-" + id : upstreamId; 62558 } 62559 context.current = { 62560 id, 62561 group: shouldInheritGroup(inherit) 62562 ? layoutGroupContext.group || nodeGroup() 62563 : nodeGroup(), 62564 }; 62565 } 62566 const memoizedContext = (0,external_React_.useMemo)(() => ({ ...context.current, forceRender }), [key]); 62567 return (external_React_.createElement(LayoutGroupContext.Provider, { value: memoizedContext }, children)); 62568}; 62569 62570 62571 62572;// CONCATENATED MODULE: ./packages/components/build-module/toggle-group-control/toggle-group-control/styles.js 62573 62574function 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)."; } 62575/** 62576 * External dependencies 62577 */ 62578 62579/** 62580 * Internal dependencies 62581 */ 62582 62583const toggleGroupControl = ({ 62584 isBlock,
62585 isDeselectable, 62586 size 62587}) => /*#__PURE__*/emotion_react_browser_esm_css("background:", COLORS.ui.background, ";border:1px solid transparent;border-radius:", config_values.controlBorderRadius, ";display:inline-flex;min-width:0;padding:2px;position:relative;", toggleGroupControlSize(size), " ", !isDeselectable && enclosingBorders(isBlock), ";" + ( true ? "" : 0), true ? "" : 0); 62588const enclosingBorders = isBlock => { 62589 const enclosingBorder = /*#__PURE__*/emotion_react_browser_esm_css("border-color:", COLORS.ui.border, ";" + ( true ? "" : 0), true ? "" : 0); 62590 return /*#__PURE__*/emotion_react_browser_esm_css(isBlock && enclosingBorder, " &:hover{border-color:", COLORS.ui.borderHover, ";}&:focus-within{border-color:", COLORS.ui.borderFocus, ";box-shadow:", config_values.controlBoxShadowFocus, ";z-index:1;outline:2px solid transparent;outline-offset:-2px;}" + ( true ? "" : 0), true ? "" : 0); 62591}; 62592const toggleGroupControlSize = size => { 62593 const heights = { 62594 default: '36px', 62595 '__unstable-large': '40px' 62596 }; 62597 return /*#__PURE__*/emotion_react_browser_esm_css("min-height:", heights[size], ";" + ( true ? "" : 0), true ? "" : 0); 62598}; 62599const toggle_group_control_styles_block = true ? { 62600 name: "7whenc", 62601 styles: "display:flex;width:100%" 62602} : 0; 62603const VisualLabelWrapper = emotion_styled_base_browser_esm("div", true ? { 62604 target: "eakva830" 62605} : 0)( true ? { 62606 name: "zjik7", 62607 styles: "display:flex" 62608} : 0); 62609 62610;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/6DS7ZDWX.js 62611 62612 62613
62614// src/collection/collection-store.ts 62615 62616function useCollectionStoreOptions(_props) { 62617 return {}; 62618} 62619function useCollectionStoreProps(store, props) { 62620 useStoreProps(store, props, "items", "setItems"); 62621 return store; 62622} 62623function useCollectionStore(props = {}) { 62624 const options = useCollectionStoreOptions(props); 62625 const store = useStore( 62626 () => Core.createCollectionStore(__spreadValues(__spreadValues({}, props), options)) 62627 ); 62628 return useCollectionStoreProps(store, props); 62629} 62630 62631 62632 62633;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/OK4RCQBZ.js 62634 62635 62636 62637
62638// src/composite/composite-store.ts 62639 62640function useCompositeStoreOptions(props) { 62641 return useCollectionStoreOptions(props); 62642} 62643function useCompositeStoreProps(store, props) { 62644 store = useCollectionStoreProps(store, props); 62645 useStoreProps(store, props, "activeId", "setActiveId"); 62646 useStoreProps(store, props, "includesBaseElement"); 62647 useStoreProps(store, props, "virtualFocus"); 62648 useStoreProps(store, props, "orientation"); 62649 useStoreProps(store, props, "rtl"); 62650 useStoreProps(store, props, "focusLoop"); 62651 useStoreProps(store, props, "focusWrap"); 62652 useStoreProps(store, props, "focusShift"); 62653 return store; 62654} 62655function useCompositeStore(props = {}) { 62656 const options = useCompositeStoreOptions(props); 62657 const store = useStore( 62658 () => Core.createCompositeStore(__spreadValues(__spreadValues({}, props), options)) 62659 ); 62660 return useCompositeStoreProps(store, props); 62661} 62662 62663 62664 62665;// CONCATENATED MODULE: ./node_modules/@ariakit/core/esm/__chunks/SHUO6V52.js 62666 62667 62668 62669 62670
62671// src/collection/collection-store.ts 62672function SHUO6V52_isElementPreceding(a, b) { 62673 return Boolean( 62674 b.compareDocumentPosition(a) & Node.DOCUMENT_POSITION_PRECEDING 62675 ); 62676} 62677function SHUO6V52_sortBasedOnDOMPosition(items) { 62678 const pairs = items.map((item, index) => [index, item]); 62679 let isOrderDifferent = false; 62680 pairs.sort(([indexA, a], [indexB, b]) => { 62681 const elementA = a.element; 62682 const elementB = b.element; 62683 if (elementA === elementB) 62684 return 0; 62685 if (!elementA || !elementB) 62686 return 0; 62687 if (SHUO6V52_isElementPreceding(elementA, elementB)) { 62688 if (indexA > indexB) { 62689 isOrderDifferent = true; 62690 } 62691 return -1; 62692 } 62693 if (indexA < indexB) { 62694 isOrderDifferent = true; 62695 } 62696 return 1; 62697 }); 62698 if (isOrderDifferent) { 62699 return pairs.map(([_, item]) => item); 62700 } 62701 return items; 62702} 62703function SHUO6V52_getCommonParent(items) { 62704 var _a; 62705 const firstItem = items.find((item) => !!item.element); 62706 const lastItem = [...items].reverse().find((item) => !!item.element); 62707 let parentElement = (_a = firstItem == null ? void 0 : firstItem.element) == null ? void 0 : _a.parentElement; 62708 while (parentElement && (lastItem == null ? void 0 : lastItem.element)) { 62709 const parent = parentElement; 62710 if (lastItem && parent.contains(lastItem.element)) { 62711 return parentElement; 62712 } 62713 parentElement = parentElement.parentElement; 62714 } 62715 return O35LWD4W_getDocument(parentElement).body; 62716} 62717function createCollectionStore(props = {}) { 62718 var _a; 62719 const syncState = (_a = props.store) == null ? void 0 : _a.getState(); 62720 const items = defaultValue( 62721 props.items, 62722 syncState == null ? void 0 : syncState.items, 62723 props.defaultItems, 62724 [] 62725 ); 62726 const itemsMap = new Map(items.map((item) => [item.id, item])); 62727 const initialState = { 62728 items, 62729 renderedItems: defaultValue(syncState == null ? void 0 : syncState.renderedItems, []) 62730 }; 62731 const privateStore = createStore({ 62732 renderedItems: initialState.renderedItems 62733 }); 62734 const collection = createStore(initialState, props.store); 62735 const sortItems = () => { 62736 const state = privateStore.getState(); 62737 const renderedItems = SHUO6V52_sortBasedOnDOMPosition(state.renderedItems); 62738 privateStore.setState("renderedItems", renderedItems); 62739 collection.setState("renderedItems", renderedItems); 62740 }; 62741 collection.setup(() => { 62742 return privateStore.syncBatch( 62743 (state) => { 62744 let firstRun = true; 62745 let raf = requestAnimationFrame(sortItems); 62746 if (typeof IntersectionObserver !== "function") 62747 return; 62748 const callback = () => { 62749 if (firstRun) { 62750 firstRun = false; 62751 return; 62752 } 62753 cancelAnimationFrame(raf); 62754 raf = requestAnimationFrame(sortItems); 62755 }; 62756 const root = SHUO6V52_getCommonParent(state.renderedItems); 62757 const observer = new IntersectionObserver(callback, { root }); 62758 state.renderedItems.forEach((item) => { 62759 if (!item.element) 62760 return; 62761 observer.observe(item.element); 62762 }); 62763 return () => { 62764 cancelAnimationFrame(raf); 62765 observer.disconnect(); 62766 }; 62767 }, 62768 ["renderedItems"] 62769 ); 62770 }); 62771 const mergeItem = (item, setItems, canDeleteFromMap = false) => { 62772 let prevItem; 62773 setItems((items2) => { 62774 const index = items2.findIndex(({ id }) => id === item.id); 62775 const nextItems = items2.slice(); 62776 if (index !== -1) { 62777 prevItem = items2[index]; 62778 const nextItem = _chunks_PNRLI7OV_spreadValues(_chunks_PNRLI7OV_spreadValues({}, prevItem), item); 62779 nextItems[index] = nextItem; 62780 itemsMap.set(item.id, nextItem); 62781 } else { 62782 nextItems.push(item); 62783 itemsMap.set(item.id, item); 62784 } 62785 return nextItems; 62786 }); 62787 const unmergeItem = () => { 62788 setItems((items2) => { 62789 if (!prevItem) { 62790 if (canDeleteFromMap) { 62791 itemsMap.delete(item.id); 62792 } 62793 return items2.filter(({ id }) => id !== item.id); 62794 } 62795 const index = items2.findIndex(({ id }) => id === item.id); 62796 if (index === -1) 62797 return items2; 62798 const nextItems = items2.slice(); 62799 nextItems[index] = prevItem; 62800 itemsMap.set(item.id, prevItem); 62801 return nextItems; 62802 }); 62803 }; 62804 return unmergeItem; 62805 }; 62806 const registerItem = (item) => mergeItem(item, (getItems) => collection.setState("items", getItems), true); 62807 return _chunks_PNRLI7OV_spreadProps(_chunks_PNRLI7OV_spreadValues({}, collection), { 62808 registerItem, 62809 renderItem: (item) => chain( 62810 registerItem(item),
62811 mergeItem( 62812 item, 62813 (getItems) => privateStore.setState("renderedItems", getItems) 62814 ) 62815 ), 62816 item: (id) => { 62817 if (!id) 62818 return null; 62819 let item = itemsMap.get(id); 62820 if (!item) { 62821 const { items: items2 } = collection.getState(); 62822 item = items2.find((item2) => item2.id === id); 62823 if (item) { 62824 itemsMap.set(id, item); 62825 } 62826 } 62827 return item || null; 62828 } 62829 }); 62830} 62831 62832 62833 62834;// CONCATENATED MODULE: ./node_modules/@ariakit/core/esm/__chunks/5XEKIOCW.js
62835// src/utils/array.ts 62836function _5XEKIOCW_toArray(arg) { 62837 if (Array.isArray(arg)) { 62838 return arg; 62839 } 62840 return typeof arg !== "undefined" ? [arg] : []; 62841} 62842function addItemToArray(array, item, index = -1) { 62843 if (!(index in array)) { 62844 return [...array, item]; 62845 } 62846 return [...array.slice(0, index), item, ...array.slice(index)]; 62847} 62848function flatten2DArray(array) { 62849 const flattened = []; 62850 for (const row of array) { 62851 flattened.push(...row); 62852 } 62853 return flattened; 62854} 62855function reverseArray(array) { 62856 return array.slice().reverse(); 62857} 62858 62859 62860 62861;// CONCATENATED MODULE: ./node_modules/@ariakit/core/esm/__chunks/NRXA5QTV.js 62862 62863 62864 62865 62866 62867
vendor: 6,537 bytes, lines 62868-63045
62868// src/composite/composite-store.ts 62869var NULL_ITEM = { id: null }; 62870function NRXA5QTV_findFirstEnabledItem(items, excludeId) { 62871 return items.find((item) => { 62872 if (excludeId) { 62873 return !item.disabled && item.id !== excludeId; 62874 } 62875 return !item.disabled; 62876 }); 62877} 62878function getEnabledItems(items, excludeId) { 62879 return items.filter((item) => { 62880 if (excludeId) { 62881 return !item.disabled && item.id !== excludeId; 62882 } 62883 return !item.disabled; 62884 }); 62885} 62886function NRXA5QTV_getOppositeOrientation(orientation) { 62887 if (orientation === "vertical") 62888 return "horizontal"; 62889 if (orientation === "horizontal") 62890 return "vertical"; 62891 return; 62892} 62893function getItemsInRow(items, rowId) { 62894 return items.filter((item) => item.rowId === rowId); 62895} 62896function flipItems(items, activeId, shouldInsertNullItem = false) { 62897 const index = items.findIndex((item) => item.id === activeId); 62898 return [ 62899 ...items.slice(index + 1), 62900 ...shouldInsertNullItem ? [NULL_ITEM] : [], 62901 ...items.slice(0, index) 62902 ]; 62903} 62904function groupItemsByRows(items) { 62905 const rows = []; 62906 for (const item of items) { 62907 const row = rows.find((currentRow) => { 62908 var _a; 62909 return ((_a = currentRow[0]) == null ? void 0 : _a.rowId) === item.rowId; 62910 }); 62911 if (row) { 62912 row.push(item); 62913 } else { 62914 rows.push([item]); 62915 } 62916 } 62917 return rows; 62918} 62919function getMaxRowLength(array) { 62920 let maxLength = 0; 62921 for (const { length } of array) { 62922 if (length > maxLength) { 62923 maxLength = length; 62924 } 62925 } 62926 return maxLength; 62927} 62928function NRXA5QTV_createEmptyItem(rowId) { 62929 return { 62930 id: "__EMPTY_ITEM__", 62931 disabled: true, 62932 rowId 62933 }; 62934} 62935function normalizeRows(rows, activeId, focusShift) { 62936 const maxLength = getMaxRowLength(rows); 62937 for (const row of rows) { 62938 for (let i = 0; i < maxLength; i += 1) { 62939 const item = row[i]; 62940 if (!item || focusShift && item.disabled) { 62941 const isFirst = i === 0; 62942 const previousItem = isFirst && focusShift ? NRXA5QTV_findFirstEnabledItem(row) : row[i - 1]; 62943 row[i] = previousItem && activeId !== previousItem.id && focusShift ? previousItem : NRXA5QTV_createEmptyItem(previousItem == null ? void 0 : previousItem.rowId); 62944 } 62945 } 62946 } 62947 return rows; 62948} 62949function NRXA5QTV_verticalizeItems(items) { 62950 const rows = groupItemsByRows(items); 62951 const maxLength = getMaxRowLength(rows); 62952 const verticalized = []; 62953 for (let i = 0; i < maxLength; i += 1) { 62954 for (const row of rows) { 62955 const item = row[i]; 62956 if (item) { 62957 verticalized.push(_chunks_PNRLI7OV_spreadProps(_chunks_PNRLI7OV_spreadValues({}, item), { 62958 // If there's no rowId, it means that it's not a grid composite, but 62959 // a single row instead. So, instead of verticalizing it, that is, 62960 // assigning a different rowId based on the column index, we keep it 62961 // undefined so they will be part of the same row. This is useful 62962 // when using up/down on one-dimensional composites. 62963 rowId: item.rowId ? `${i}` : void 0 62964 })); 62965 } 62966 } 62967 } 62968 return verticalized; 62969} 62970function createCompositeStore(props = {}) { 62971 var _a; 62972 const syncState = (_a = props.store) == null ? void 0 : _a.getState(); 62973 const collection = createCollectionStore(props); 62974 const activeId = defaultValue( 62975 props.activeId, 62976 syncState == null ? void 0 : syncState.activeId, 62977 props.defaultActiveId 62978 ); 62979 const initialState = _chunks_PNRLI7OV_spreadProps(_chunks_PNRLI7OV_spreadValues({}, collection.getState()), { 62980 activeId, 62981 baseElement: defaultValue(syncState == null ? void 0 : syncState.baseElement, null), 62982 includesBaseElement: defaultValue( 62983 props.includesBaseElement, 62984 syncState == null ? void 0 : syncState.includesBaseElement, 62985 activeId === null 62986 ), 62987 moves: defaultValue(syncState == null ? void 0 : syncState.moves, 0), 62988 orientation: defaultValue( 62989 props.orientation, 62990 syncState == null ? void 0 : syncState.orientation, 62991 "both" 62992 ), 62993 rtl: defaultValue(props.rtl, syncState == null ? void 0 : syncState.rtl, false), 62994 virtualFocus: defaultValue( 62995 props.virtualFocus, 62996 syncState == null ? void 0 : syncState.virtualFocus, 62997 false 62998 ), 62999 focusLoop: defaultValue(props.focusLoop, syncState == null ? void 0 : syncState.focusLoop, false), 63000 focusWrap: defaultValue(props.focusWrap, syncState == null ? void 0 : syncState.focusWrap, false), 63001 focusShift: defaultValue(props.focusShift, syncState == null ? void 0 : syncState.focusShift, false) 63002 }); 63003 const composite = createStore(initialState, collection, props.store); 63004 composite.setup( 63005 () => composite.sync( 63006 (state) => { 63007 composite.setState("activeId", (activeId2) => { 63008 var _a2; 63009 if (activeId2 !== void 0) 63010 return activeId2; 63011 return (_a2 = NRXA5QTV_findFirstEnabledItem(state.renderedItems)) == null ? void 0 : _a2.id; 63012 }); 63013 }, 63014 ["renderedItems", "activeId"] 63015 ) 63016 ); 63017 const getNextId = (items, orientation, hasNullItem, skip) => { 63018 var _a2, _b; 63019 const { activeId: activeId2, rtl, focusLoop, focusWrap, includesBaseElement } = composite.getState(); 63020 const isHorizontal = orientation !== "vertical"; 63021 const isRTL = rtl && isHorizontal; 63022 const allItems = isRTL ? reverseArray(items) : items; 63023 if (activeId2 == null) { 63024 return (_a2 = NRXA5QTV_findFirstEnabledItem(allItems)) == null ? void 0 : _a2.id; 63025 } 63026 const activeItem = allItems.find((item) => item.id === activeId2); 63027 if (!activeItem) { 63028 return (_b = NRXA5QTV_findFirstEnabledItem(allItems)) == null ? void 0 : _b.id; 63029 } 63030 const isGrid = !!activeItem.rowId; 63031 const activeIndex = allItems.indexOf(activeItem); 63032 const nextItems = allItems.slice(activeIndex + 1); 63033 const nextItemsInRow = getItemsInRow(nextItems, activeItem.rowId); 63034 if (skip !== void 0) { 63035 const nextEnabledItemsInRow = getEnabledItems(nextItemsInRow, activeId2); 63036 const nextItem2 = nextEnabledItemsInRow.slice(skip)[0] || // If we can't find an item, just return the last one. 63037 nextEnabledItemsInRow[nextEnabledItemsInRow.length - 1]; 63038 return nextItem2 == null ? void 0 : nextItem2.id; 63039 } 63040 const oppositeOrientation = NRXA5QTV_getOppositeOrientation( 63041 // If it's a grid and orientation is not set, it's a next/previous call, 63042 // which is inherently horizontal. up/down will call next with orientation 63043 // set to vertical by default (see below on up/down methods). 63044 isGrid ? orientation || "horizontal" : orientation 63045 );
63046 const canLoop = focusLoop && focusLoop !== oppositeOrientation; 63047 const canWrap = isGrid && focusWrap && focusWrap !== oppositeOrientation; 63048 hasNullItem = hasNullItem || !isGrid && canLoop && includesBaseElement; 63049 if (canLoop) { 63050 const loopItems = canWrap && !hasNullItem ? allItems : getItemsInRow(allItems, activeItem.rowId); 63051 const sortedItems = flipItems(loopItems, activeId2, hasNullItem); 63052 const nextItem2 = NRXA5QTV_findFirstEnabledItem(sortedItems, activeId2); 63053 return nextItem2 == null ? void 0 : nextItem2.id; 63054 } 63055 if (canWrap) { 63056 const nextItem2 = NRXA5QTV_findFirstEnabledItem( 63057 // We can use nextItems, which contains all the next items, including 63058 // items from other rows, to wrap between rows. However, if there is a 63059 // null item (the composite container), we'll only use the next items in 63060 // the row. So moving next from the last item will focus on the 63061 // composite container. On grid composites, horizontal navigation never 63062 // focuses on the composite container, only vertical. 63063 hasNullItem ? nextItemsInRow : nextItems, 63064 activeId2 63065 ); 63066 const nextId = hasNullItem ? (nextItem2 == null ? void 0 : nextItem2.id) || null : nextItem2 == null ? void 0 : nextItem2.id; 63067 return nextId; 63068 } 63069 const nextItem = NRXA5QTV_findFirstEnabledItem(nextItemsInRow, activeId2); 63070 if (!nextItem && hasNullItem) { 63071 return null; 63072 } 63073 return nextItem == null ? void 0 : nextItem.id; 63074 }; 63075 return _chunks_PNRLI7OV_spreadProps(_chunks_PNRLI7OV_spreadValues(_chunks_PNRLI7OV_spreadValues({}, collection), composite), { 63076 setBaseElement: (element) => composite.setState("baseElement", element), 63077 setActiveId: (id) => composite.setState("activeId", id), 63078 move: (id) => { 63079 if (id === void 0) 63080 return; 63081 composite.setState("activeId", id); 63082 composite.setState("moves", (moves) => moves + 1); 63083 }, 63084 first: () => { 63085 var _a2; 63086 return (_a2 = NRXA5QTV_findFirstEnabledItem(composite.getState().renderedItems)) == null ? void 0 : _a2.id; 63087 }, 63088 last: () => { 63089 var _a2; 63090 return (_a2 = NRXA5QTV_findFirstEnabledItem(reverseArray(composite.getState().renderedItems))) == null ? void 0 : _a2.id; 63091 }, 63092 next: (skip) => { 63093 const { renderedItems, orientation } = composite.getState(); 63094 return getNextId(renderedItems, orientation, false, skip); 63095 }, 63096 previous: (skip) => { 63097 var _a2; 63098 const { renderedItems, orientation, includesBaseElement } = composite.getState(); 63099 const isGrid = !!((_a2 = NRXA5QTV_findFirstEnabledItem(renderedItems)) == null ? void 0 : _a2.rowId); 63100 const hasNullItem = !isGrid && includesBaseElement; 63101 return getNextId( 63102 reverseArray(renderedItems), 63103 orientation, 63104 hasNullItem, 63105 skip 63106 ); 63107 }, 63108 down: (skip) => { 63109 const { 63110 activeId: activeId2, 63111 renderedItems, 63112 focusShift, 63113 focusLoop, 63114 includesBaseElement 63115 } = composite.getState(); 63116 const shouldShift = focusShift && !skip; 63117 const verticalItems = NRXA5QTV_verticalizeItems( 63118 flatten2DArray( 63119 normalizeRows(groupItemsByRows(renderedItems), activeId2, shouldShift) 63120 ) 63121 ); 63122 const canLoop = focusLoop && focusLoop !== "horizontal"; 63123 const hasNullItem = canLoop && includesBaseElement; 63124 return getNextId(verticalItems, "vertical", hasNullItem, skip); 63125 }, 63126 up: (skip) => { 63127 const { activeId: activeId2, renderedItems, focusShift, includesBaseElement } = composite.getState(); 63128 const shouldShift = focusShift && !skip; 63129 const verticalItems = NRXA5QTV_verticalizeItems( 63130 reverseArray( 63131 flatten2DArray( 63132 normalizeRows( 63133 groupItemsByRows(renderedItems), 63134 activeId2, 63135 shouldShift 63136 ) 63137 ) 63138 ) 63139 ); 63140 const hasNullItem = includesBaseElement; 63141 return getNextId(verticalItems, "vertical", hasNullItem, skip); 63142 } 63143 }); 63144} 63145 63146 63147 63148;// CONCATENATED MODULE: ./node_modules/@ariakit/core/esm/radio/radio-store.js 63149 63150 63151 63152 63153 63154 63155 63156
63157// src/radio/radio-store.ts 63158function createRadioStore(_a = {}) { 63159 var props = PNRLI7OV_objRest(_a, []); 63160 var _a2; 63161 const syncState = (_a2 = props.store) == null ? void 0 : _a2.getState(); 63162 const composite = createCompositeStore(_chunks_PNRLI7OV_spreadProps(_chunks_PNRLI7OV_spreadValues({}, props), { 63163 focusLoop: defaultValue(props.focusLoop, syncState == null ? void 0 : syncState.focusLoop, true) 63164 })); 63165 const initialState = _chunks_PNRLI7OV_spreadProps(_chunks_PNRLI7OV_spreadValues({}, composite.getState()), { 63166 value: defaultValue( 63167 props.value, 63168 syncState == null ? void 0 : syncState.value, 63169 props.defaultValue, 63170 null 63171 ) 63172 }); 63173 const radio = createStore(initialState, composite, props.store); 63174 return _chunks_PNRLI7OV_spreadProps(_chunks_PNRLI7OV_spreadValues(_chunks_PNRLI7OV_spreadValues({}, composite), radio), { 63175 setValue: (value) => radio.setState("value", value) 63176 }); 63177} 63178 63179 63180;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/radio/radio-store.js 63181 63182 63183 63184 63185 63186 63187
63188// src/radio/radio-store.ts 63189 63190function useRadioStoreOptions(props) { 63191 return useCompositeStoreOptions(props); 63192} 63193function useRadioStoreProps(store, props) { 63194 store = useCompositeStoreProps(store, props); 63195 useStoreProps(store, props, "value", "setValue"); 63196 return store; 63197} 63198function useRadioStore(props = {}) { 63199 const options = useRadioStoreOptions(props); 63200 const store = FHQZ2KRN_useStore(() => createRadioStore(PNRLI7OV_spreadValues(PNRLI7OV_spreadValues({}, props), options))); 63201 return useRadioStoreProps(store, props); 63202} 63203 63204 63205;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/6I2PARRP.js
63206// src/radio/radio-context.ts 63207 63208var RadioContext = (0,external_React_.createContext)(void 0); 63209 63210 63211 63212;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/OXPV2NBK.js
vendor: 2,120 bytes, lines 63213-63291
63213// src/composite/utils.ts 63214 63215var OXPV2NBK_NULL_ITEM = { id: null }; 63216function OXPV2NBK_flipItems(items, activeId, shouldInsertNullItem = false) { 63217 const index = items.findIndex((item) => item.id === activeId); 63218 return [ 63219 ...items.slice(index + 1), 63220 ...shouldInsertNullItem ? [OXPV2NBK_NULL_ITEM] : [], 63221 ...items.slice(0, index) 63222 ]; 63223} 63224function OXPV2NBK_findFirstEnabledItem(items, excludeId) { 63225 return items.find((item) => { 63226 if (excludeId) { 63227 return !item.disabled && item.id !== excludeId; 63228 } 63229 return !item.disabled; 63230 }); 63231} 63232function getEnabledItem(store, id) { 63233 if (!id) 63234 return null; 63235 return store.item(id) || null; 63236} 63237function OXPV2NBK_groupItemsByRows(items) { 63238 const rows = []; 63239 for (const item of items) { 63240 const row = rows.find((currentRow) => { 63241 var _a; 63242 return ((_a = currentRow[0]) == null ? void 0 : _a.rowId) === item.rowId; 63243 }); 63244 if (row) { 63245 row.push(item); 63246 } else { 63247 rows.push([item]); 63248 } 63249 } 63250 return rows; 63251} 63252function selectTextField(element, collapseToEnd = false) { 63253 if (isTextField(element)) { 63254 element.setSelectionRange( 63255 collapseToEnd ? element.value.length : 0, 63256 element.value.length 63257 ); 63258 } else if (element.isContentEditable) { 63259 const selection = getDocument(element).getSelection(); 63260 selection == null ? void 0 : selection.selectAllChildren(element); 63261 if (collapseToEnd) { 63262 selection == null ? void 0 : selection.collapseToEnd(); 63263 } 63264 } 63265} 63266var FOCUS_SILENTLY = Symbol("FOCUS_SILENTLY"); 63267function focusSilently(element) { 63268 element[FOCUS_SILENTLY] = true; 63269 element.focus(); 63270} 63271function silentlyFocused(element) { 63272 const isSilentlyFocused = element[FOCUS_SILENTLY]; 63273 delete element[FOCUS_SILENTLY]; 63274 return isSilentlyFocused; 63275} 63276function OXPV2NBK_isItem(store, element, exclude) { 63277 if (!element) 63278 return false; 63279 if (element === exclude) 63280 return false; 63281 const item = store.item(element.id); 63282 if (!item) 63283 return false; 63284 if (exclude && item.element === exclude) 63285 return false; 63286 return true; 63287} 63288 63289 63290 63291;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/WJ37OVG2.js
63292// src/composite/composite-context.ts 63293 63294var CompositeItemContext = (0,external_React_.createContext)( 63295 void 0 63296); 63297var CompositeRowContext = (0,external_React_.createContext)( 63298 void 0 63299); 63300var CompositeContext = (0,external_React_.createContext)( 63301 void 0 63302); 63303 63304 63305 63306;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/AAVDGJD5.js 63307 63308 63309 63310 63311 63312 63313
vendor: 8,734 bytes, lines 63314-63559
63314// src/composite/composite.tsx 63315 63316 63317 63318 63319 63320 63321function isGrid(items) { 63322 return items.some((item) => !!item.rowId); 63323} 63324function isPrintableKey(event) { 63325 return event.key.length === 1 && !event.ctrlKey && !event.metaKey; 63326} 63327function isModifierKey(event) { 63328 return event.key === "Shift" || event.key === "Control" || event.key === "Alt" || event.key === "Meta"; 63329} 63330function AAVDGJD5_canProxyKeyboardEvent(event, state) { 63331 if (!events_isSelfTarget(event)) 63332 return false; 63333 if (isModifierKey(event)) 63334 return false; 63335 const target = event.target; 63336 if (!target) 63337 return true; 63338 if (O35LWD4W_isTextField(target)) { 63339 if (isPrintableKey(event)) 63340 return false; 63341 const grid = isGrid(state.renderedItems); 63342 const focusingInputOnly = state.activeId === null; 63343 const allowHorizontalNavigationOnItems = grid && !focusingInputOnly; 63344 const isHomeOrEnd = event.key === "Home" || event.key === "End"; 63345 if (!allowHorizontalNavigationOnItems && isHomeOrEnd) 63346 return false; 63347 } 63348 return !event.isPropagationStopped(); 63349} 63350function AAVDGJD5_useKeyboardEventProxy(store, onKeyboardEvent, previousElementRef) { 63351 return useEvent((event) => { 63352 var _a; 63353 onKeyboardEvent == null ? void 0 : onKeyboardEvent(event); 63354 if (event.defaultPrevented) 63355 return; 63356 const state = store.getState(); 63357 const activeElement = (_a = getEnabledItem(store, state.activeId)) == null ? void 0 : _a.element; 63358 if (!activeElement) 63359 return; 63360 if (!AAVDGJD5_canProxyKeyboardEvent(event, state)) 63361 return; 63362 const _b = event, { view } = _b, eventInit = __objRest(_b, ["view"]); 63363 const previousElement = previousElementRef == null ? void 0 : previousElementRef.current; 63364 if (activeElement !== previousElement) { 63365 activeElement.focus(); 63366 } 63367 if (!fireKeyboardEvent(activeElement, event.type, eventInit)) { 63368 event.preventDefault(); 63369 } 63370 if (event.currentTarget.contains(activeElement)) { 63371 event.stopPropagation(); 63372 } 63373 }); 63374} 63375function AAVDGJD5_findFirstEnabledItemInTheLastRow(items) { 63376 return OXPV2NBK_findFirstEnabledItem( 63377 flatten2DArray(reverseArray(OXPV2NBK_groupItemsByRows(items))) 63378 ); 63379} 63380function useScheduleFocus(store) { 63381 const [scheduled, setScheduled] = (0,external_React_.useState)(false); 63382 const schedule = (0,external_React_.useCallback)(() => setScheduled(true), []); 63383 const activeItem = store.useState( 63384 (state) => getEnabledItem(store, state.activeId) 63385 ); 63386 (0,external_React_.useEffect)(() => { 63387 const activeElement = activeItem == null ? void 0 : activeItem.element; 63388 if (!scheduled) 63389 return; 63390 if (!activeElement) 63391 return; 63392 setScheduled(false); 63393 activeElement.focus({ preventScroll: true }); 63394 }, [activeItem, scheduled]); 63395 return schedule; 63396} 63397var AAVDGJD5_useComposite = NQJBHION_createHook( 63398 (_a) => { 63399 var _b = _a, { 63400 store, 63401 composite = true, 63402 focusOnMove = composite, 63403 moveOnKeyPress = true 63404 } = _b, props = __objRest(_b, [ 63405 "store", 63406 "composite", 63407 "focusOnMove", 63408 "moveOnKeyPress" 63409 ]); 63410 const previousElementRef = (0,external_React_.useRef)(null); 63411 const scheduleFocus = useScheduleFocus(store); 63412 const moves = store.useState("moves"); 63413 (0,external_React_.useEffect)(() => { 63414 var _a2; 63415 if (!moves) 63416 return; 63417 if (!composite) 63418 return; 63419 if (!focusOnMove) 63420 return; 63421 const { activeId: activeId2 } = store.getState(); 63422 const itemElement = (_a2 = getEnabledItem(store, activeId2)) == null ? void 0 : _a2.element; 63423 if (!itemElement) 63424 return; 63425 focusIntoView(itemElement); 63426 }, [moves, composite, focusOnMove]); 63427 useSafeLayoutEffect(() => { 63428 if (!composite) 63429 return; 63430 if (!moves) 63431 return; 63432 const { baseElement, activeId: activeId2 } = store.getState(); 63433 const isSelfAcive = activeId2 === null; 63434 if (!isSelfAcive) 63435 return; 63436 if (!baseElement) 63437 return; 63438 const previousElement = previousElementRef.current; 63439 previousElementRef.current = null; 63440 if (previousElement) { 63441 fireBlurEvent(previousElement, { relatedTarget: baseElement }); 63442 } 63443 if (focus_hasFocus(baseElement)) { 63444 fireFocusEvent(baseElement, { relatedTarget: previousElement }); 63445 } else { 63446 baseElement.focus(); 63447 } 63448 }, [moves, composite]); 63449 const activeId = store.useState("activeId"); 63450 const virtualFocus = store.useState("virtualFocus"); 63451 useSafeLayoutEffect(() => { 63452 var _a2; 63453 if (!composite) 63454 return; 63455 if (!virtualFocus) 63456 return; 63457 const previousElement = previousElementRef.current; 63458 previousElementRef.current = null; 63459 if (!previousElement) 63460 return; 63461 const activeElement = (_a2 = getEnabledItem(store, activeId)) == null ? void 0 : _a2.element; 63462 const relatedTarget = activeElement || O35LWD4W_getActiveElement(previousElement); 63463 fireBlurEvent(previousElement, { relatedTarget }); 63464 }, [activeId, virtualFocus, composite]); 63465 const onKeyDownCapture = AAVDGJD5_useKeyboardEventProxy( 63466 store, 63467 props.onKeyDownCapture, 63468 previousElementRef 63469 ); 63470 const onKeyUpCapture = AAVDGJD5_useKeyboardEventProxy( 63471 store, 63472 props.onKeyUpCapture, 63473 previousElementRef 63474 ); 63475 const onFocusCaptureProp = props.onFocusCapture; 63476 const onFocusCapture = useEvent((event) => { 63477 onFocusCaptureProp == null ? void 0 : onFocusCaptureProp(event); 63478 if (event.defaultPrevented) 63479 return; 63480 const { virtualFocus: virtualFocus2 } = store.getState(); 63481 if (!virtualFocus2) 63482 return; 63483 const previousActiveElement = event.relatedTarget; 63484 const isSilentlyFocused = silentlyFocused(event.currentTarget); 63485 if (events_isSelfTarget(event) && isSilentlyFocused) { 63486 event.stopPropagation(); 63487 previousElementRef.current = previousActiveElement; 63488 } 63489 }); 63490 const onFocusProp = props.onFocus; 63491 const onFocus = useEvent((event) => { 63492 onFocusProp == null ? void 0 : onFocusProp(event); 63493 if (event.defaultPrevented) 63494 return; 63495 if (!composite) 63496 return; 63497 const { relatedTarget } = event; 63498 const { virtualFocus: virtualFocus2 } = store.getState(); 63499 if (virtualFocus2) { 63500 if (events_isSelfTarget(event) && !OXPV2NBK_isItem(store, relatedTarget)) { 63501 queueMicrotask(scheduleFocus); 63502 } 63503 } else if (events_isSelfTarget(event)) { 63504 store.setActiveId(null); 63505 } 63506 }); 63507 const onBlurCaptureProp = props.onBlurCapture; 63508 const onBlurCapture = useEvent((event) => { 63509 var _a2; 63510 onBlurCaptureProp == null ? void 0 : onBlurCaptureProp(event); 63511 if (event.defaultPrevented) 63512 return; 63513 const { virtualFocus: virtualFocus2, activeId: activeId2 } = store.getState(); 63514 if (!virtualFocus2) 63515 return; 63516 const activeElement = (_a2 = getEnabledItem(store, activeId2)) == null ? void 0 : _a2.element; 63517 const nextActiveElement = event.relatedTarget; 63518 const nextActiveElementIsItem = OXPV2NBK_isItem(store, nextActiveElement); 63519 const previousElement = previousElementRef.current; 63520 previousElementRef.current = null; 63521 if (events_isSelfTarget(event) && nextActiveElementIsItem) { 63522 if (nextActiveElement === activeElement) { 63523 if (previousElement && previousElement !== nextActiveElement) { 63524 fireBlurEvent(previousElement, event); 63525 } 63526 } else if (activeElement) { 63527 fireBlurEvent(activeElement, event); 63528 } 63529 event.stopPropagation(); 63530 } else { 63531 const targetIsItem = OXPV2NBK_isItem(store, event.target); 63532 if (!targetIsItem && activeElement) { 63533 fireBlurEvent(activeElement, event); 63534 } 63535 } 63536 }); 63537 const onKeyDownProp = props.onKeyDown; 63538 const moveOnKeyPressProp = useBooleanEvent(moveOnKeyPress); 63539 const onKeyDown = useEvent((event) => { 63540 var _a2; 63541 onKeyDownProp == null ? void 0 : onKeyDownProp(event); 63542 if (event.defaultPrevented) 63543 return; 63544 if (!events_isSelfTarget(event)) 63545 return; 63546 const { orientation, items, renderedItems, activeId: activeId2 } = store.getState(); 63547 const activeItem = getEnabledItem(store, activeId2); 63548 if ((_a2 = activeItem == null ? void 0 : activeItem.element) == null ? void 0 : _a2.isConnected) 63549 return; 63550 const isVertical = orientation !== "horizontal"; 63551 const isHorizontal = orientation !== "vertical"; 63552 const grid = isGrid(renderedItems); 63553 const up = () => { 63554 if (grid) { 63555 const item = items && AAVDGJD5_findFirstEnabledItemInTheLastRow(items); 63556 return item == null ? void 0 : item.id; 63557 } 63558 return store.last(); 63559 };
63560 const keyMap = { 63561 ArrowUp: (grid || isVertical) && up, 63562 ArrowRight: (grid || isHorizontal) && store.first, 63563 ArrowDown: (grid || isVertical) && store.first, 63564 ArrowLeft: (grid || isHorizontal) && store.last, 63565 Home: store.first, 63566 End: store.last, 63567 PageUp: store.first, 63568 PageDown: store.last 63569 }; 63570 const action = keyMap[event.key]; 63571 if (action) { 63572 const id = action(); 63573 if (id !== void 0) { 63574 if (!moveOnKeyPressProp(event)) 63575 return; 63576 event.preventDefault(); 63577 store.move(id); 63578 } 63579 } 63580 }); 63581 props = useWrapElement( 63582 props, 63583 (element) => /* @__PURE__ */ (0,jsx_runtime.jsx)(CompositeContext.Provider, { value: store, children: element }), 63584 [store] 63585 ); 63586 const activeDescendant = store.useState( 63587 (state) => { 63588 var _a2; 63589 return composite && state.virtualFocus ? (_a2 = getEnabledItem(store, state.activeId)) == null ? void 0 : _a2.id : void 0; 63590 } 63591 ); 63592 props = PNRLI7OV_spreadProps(PNRLI7OV_spreadValues({ 63593 "aria-activedescendant": activeDescendant 63594 }, props), { 63595 ref: useMergeRefs(composite ? store.setBaseElement : null, props.ref), 63596 onKeyDownCapture, 63597 onKeyUpCapture, 63598 onFocusCapture, 63599 onFocus, 63600 onBlurCapture, 63601 onKeyDown 63602 }); 63603 const focusable = store.useState( 63604 (state) => composite && (state.virtualFocus || state.activeId === null) 63605 ); 63606 props = useFocusable(PNRLI7OV_spreadValues({ focusable }, props)); 63607 return props; 63608 } 63609); 63610var AAVDGJD5_Composite = NQJBHION_createComponent((props) => { 63611 const htmlProps = AAVDGJD5_useComposite(props); 63612 return NQJBHION_createElement("div", htmlProps); 63613}); 63614if (false) {} 63615 63616 63617 63618;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/radio/radio-group.js 63619 63620 63621 63622 63623 63624 63625 63626 63627 63628 63629
63630// src/radio/radio-group.tsx 63631 63632var useRadioGroup = NQJBHION_createHook( 63633 (_a) => { 63634 var _b = _a, { store } = _b, props = __objRest(_b, ["store"]); 63635 props = useWrapElement( 63636 props, 63637 (element) => /* @__PURE__ */ (0,jsx_runtime.jsx)(RadioContext.Provider, { value: store, children: element }), 63638 [store] 63639 ); 63640 props = PNRLI7OV_spreadValues({ 63641 role: "radiogroup" 63642 }, props); 63643 props = AAVDGJD5_useComposite(PNRLI7OV_spreadValues({ store }, props)); 63644 return props; 63645 } 63646); 63647var RadioGroup = NQJBHION_createComponent((props) => { 63648 const htmlProps = useRadioGroup(props); 63649 return NQJBHION_createElement("div", htmlProps); 63650}); 63651if (false) {} 63652 63653 63654;// CONCATENATED MODULE: ./packages/components/build-module/toggle-group-control/context.js 63655/** 63656 * WordPress dependencies 63657 */ 63658 63659 63660/** 63661 * Internal dependencies 63662 */ 63663 63664const ToggleGroupControlContext = (0,external_wp_element_namespaceObject.createContext)({}); 63665const useToggleGroupControlContext = () => (0,external_wp_element_namespaceObject.useContext)(ToggleGroupControlContext); 63666/* harmony default export */ const toggle_group_control_context = (ToggleGroupControlContext); 63667 63668;// CONCATENATED MODULE: ./packages/components/build-module/toggle-group-control/toggle-group-control/utils.js 63669/** 63670 * WordPress dependencies 63671 */ 63672 63673 63674 63675/** 63676 * Internal dependencies 63677 */ 63678 63679/** 63680 * Used to determine, via an internal heuristics, whether an `undefined` value 63681 * received for the `value` prop should be interpreted as the component being 63682 * used in uncontrolled mode, or as an "empty" value for controlled mode. 63683 * 63684 * @param valueProp The received `value` 63685 */ 63686function useComputeControlledOrUncontrolledValue(valueProp) { 63687 const hasEverBeenUsedInControlledMode = (0,external_wp_element_namespaceObject.useRef)(false); 63688 const previousValueProp = (0,external_wp_compose_namespaceObject.usePrevious)(valueProp); 63689 (0,external_wp_element_namespaceObject.useEffect)(() => { 63690 if (!hasEverBeenUsedInControlledMode.current) { 63691 // Assume the component is being used in controlled mode if: 63692 // - the `value` prop is not `undefined` 63693 // - the `value` prop was not previously `undefined` and was given a new value 63694 hasEverBeenUsedInControlledMode.current = valueProp !== undefined && previousValueProp !== undefined && valueProp !== previousValueProp; 63695 } 63696 }, [valueProp, previousValueProp]); 63697 let value, defaultValue; 63698 if (hasEverBeenUsedInControlledMode.current) { 63699 // When in controlled mode, use `''` instead of `undefined` 63700 value = valueProp !== null && valueProp !== void 0 ? valueProp : ''; 63701 } else { 63702 // When in uncontrolled mode, the `value` should be intended as the initial value 63703 defaultValue = valueProp; 63704 } 63705 return { 63706 value, 63707 defaultValue 63708 }; 63709} 63710 63711;// CONCATENATED MODULE: ./packages/components/build-module/toggle-group-control/toggle-group-control/as-radio-group.js 63712 63713/** 63714 * External dependencies 63715 */ 63716 63717// eslint-disable-next-line no-restricted-imports 63718 63719 63720/** 63721 * WordPress dependencies 63722 */ 63723 63724 63725 63726/** 63727 * Internal dependencies 63728 */ 63729 63730 63731 63732function UnforwardedToggleGroupControlAsRadioGroup({ 63733 children, 63734 isAdaptiveWidth, 63735 label, 63736 onChange: onChangeProp, 63737 size, 63738 value: valueProp, 63739 id: idProp, 63740 ...otherProps 63741}, forwardedRef) { 63742 const generatedId = (0,external_wp_compose_namespaceObject.useInstanceId)(ToggleGroupControlAsRadioGroup, 'toggle-group-control-as-radio-group'); 63743 const baseId = idProp || generatedId; 63744 63745 // Use a heuristic to understand if the component is being used in controlled 63746 // or uncontrolled mode, and consequently: 63747 // - when controlled, convert `undefined` values to `''` (ie. "no value") 63748 // - use the `value` prop as the `defaultValue` when uncontrolled 63749 const { 63750 value, 63751 defaultValue 63752 } = useComputeControlledOrUncontrolledValue(valueProp); 63753 63754 // `useRadioStore`'s `setValue` prop can be called with `null`, while 63755 // the component's `onChange` prop only expects `undefined` 63756 const wrappedOnChangeProp = onChangeProp ? v => { 63757 onChangeProp(v !== null && v !== void 0 ? v : undefined); 63758 } : undefined; 63759 const radio = useRadioStore({ 63760 defaultValue, 63761 value, 63762 setValue: wrappedOnChangeProp 63763 }); 63764 const selectedValue = radio.useState('value'); 63765 const setValue = radio.setValue; 63766 const groupContextValue = (0,external_wp_element_namespaceObject.useMemo)(() => ({ 63767 baseId, 63768 isBlock: !isAdaptiveWidth, 63769 size, 63770 value: selectedValue, 63771 setValue 63772 }), [baseId, isAdaptiveWidth, size, selectedValue, setValue]); 63773 return (0,external_wp_element_namespaceObject.createElement)(toggle_group_control_context.Provider, { 63774 value: groupContextValue 63775 }, (0,external_wp_element_namespaceObject.createElement)(RadioGroup, { 63776 store: radio, 63777 "aria-label": label, 63778 as: component, 63779 ...otherProps, 63780 id: baseId, 63781 ref: forwardedRef 63782 }, children)); 63783} 63784const ToggleGroupControlAsRadioGroup = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedToggleGroupControlAsRadioGroup); 63785 63786;// CONCATENATED MODULE: ./packages/components/build-module/toggle-group-control/toggle-group-control/as-button-group.js 63787 63788/** 63789 * WordPress dependencies 63790 */ 63791 63792 63793 63794/** 63795 * Internal dependencies 63796 */ 63797 63798 63799 63800 63801function UnforwardedToggleGroupControlAsButtonGroup({ 63802 children, 63803 isAdaptiveWidth, 63804 label, 63805 onChange, 63806 size, 63807 value: valueProp, 63808 id: idProp, 63809 ...otherProps 63810}, forwardedRef) { 63811 const generatedId = (0,external_wp_compose_namespaceObject.useInstanceId)(ToggleGroupControlAsButtonGroup, 'toggle-group-control-as-button-group'); 63812 const baseId = idProp || generatedId; 63813 63814 // Use a heuristic to understand if the component is being used in controlled 63815 // or uncontrolled mode, and consequently: 63816 // - when controlled, convert `undefined` values to `''` (ie. "no value") 63817 // - use the `value` prop as the `defaultValue` when uncontrolled 63818 const { 63819 value, 63820 defaultValue 63821 } = useComputeControlledOrUncontrolledValue(valueProp); 63822 const [selectedValue, setSelectedValue] = useControlledValue({ 63823 defaultValue, 63824 value, 63825 onChange 63826 }); 63827 const groupContextValue = (0,external_wp_element_namespaceObject.useMemo)(() => ({ 63828 baseId, 63829 value: selectedValue, 63830 setValue: setSelectedValue, 63831 isBlock: !isAdaptiveWidth, 63832 isDeselectable: true, 63833 size 63834 }), [baseId, selectedValue, setSelectedValue, isAdaptiveWidth, size]); 63835 return (0,external_wp_element_namespaceObject.createElement)(toggle_group_control_context.Provider, { 63836 value: groupContextValue 63837 }, (0,external_wp_element_namespaceObject.createElement)(component, { 63838 "aria-label": label, 63839 ...otherProps, 63840 ref: forwardedRef, 63841 role: "group" 63842 }, children)); 63843} 63844const ToggleGroupControlAsButtonGroup = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedToggleGroupControlAsButtonGroup); 63845 63846;// CONCATENATED MODULE: ./packages/components/build-module/toggle-group-control/toggle-group-control/component.js 63847 63848/** 63849 * External dependencies 63850 */ 63851 63852// eslint-disable-next-line no-restricted-imports 63853 63854 63855/** 63856 * WordPress dependencies 63857 */ 63858 63859 63860 63861/** 63862 * Internal dependencies 63863 */ 63864 63865 63866 63867 63868 63869 63870 63871 63872function UnconnectedToggleGroupControl(props, forwardedRef) { 63873 const { 63874 __nextHasNoMarginBottom = false, 63875 className, 63876 isAdaptiveWidth = false, 63877 isBlock = false, 63878 isDeselectable = false, 63879 label, 63880 hideLabelFromVision = false, 63881 help, 63882 onChange, 63883 size = 'default', 63884 value, 63885 children, 63886 ...otherProps 63887 } = useContextSystem(props, 'ToggleGroupControl'); 63888 const baseId = (0,external_wp_compose_namespaceObject.useInstanceId)(ToggleGroupControl, 'toggle-group-control'); 63889 const cx = useCx(); 63890 const classes = (0,external_wp_element_namespaceObject.useMemo)(() => cx(toggleGroupControl({ 63891 isBlock,
63892 isDeselectable, 63893 size 63894 }), isBlock && toggle_group_control_styles_block, className), [className, cx, isBlock, isDeselectable, size]); 63895 const MainControl = isDeselectable ? ToggleGroupControlAsButtonGroup : ToggleGroupControlAsRadioGroup; 63896 return (0,external_wp_element_namespaceObject.createElement)(base_control, { 63897 help: help, 63898 __nextHasNoMarginBottom: __nextHasNoMarginBottom 63899 }, !hideLabelFromVision && (0,external_wp_element_namespaceObject.createElement)(VisualLabelWrapper, null, (0,external_wp_element_namespaceObject.createElement)(base_control.VisualLabel, null, label)), (0,external_wp_element_namespaceObject.createElement)(MainControl, { 63900 ...otherProps, 63901 className: classes, 63902 isAdaptiveWidth: isAdaptiveWidth, 63903 label: label, 63904 onChange: onChange, 63905 ref: forwardedRef, 63906 size: size, 63907 value: value 63908 }, (0,external_wp_element_namespaceObject.createElement)(LayoutGroup, { 63909 id: baseId 63910 }, children))); 63911} 63912 63913/** 63914 * `ToggleGroupControl` is a form component that lets users choose options 63915 * represented in horizontal segments. To render options for this control use 63916 * `ToggleGroupControlOption` component. 63917 * 63918 * This component is intended for selecting a single persistent value from a set of options, 63919 * similar to a how a radio button group would work. If you simply want a toggle to switch between views, 63920 * use a `TabPanel` instead. 63921 * 63922 * Only use this control when you know for sure the labels of items inside won't 63923 * wrap. For items with longer labels, you can consider a `SelectControl` or a 63924 * `CustomSelectControl` component instead. 63925 * 63926 * ```jsx 63927 * import { 63928 * __experimentalToggleGroupControl as ToggleGroupControl, 63929 * __experimentalToggleGroupControlOption as ToggleGroupControlOption, 63930 * } from '@wordpress/components'; 63931 * 63932 * function Example() { 63933 * return ( 63934 * <ToggleGroupControl label="my label" value="vertical" isBlock> 63935 * <ToggleGroupControlOption value="horizontal" label="Horizontal" /> 63936 * <ToggleGroupControlOption value="vertical" label="Vertical" /> 63937 * </ToggleGroupControl> 63938 * ); 63939 * } 63940 * ``` 63941 */ 63942const ToggleGroupControl = contextConnect(UnconnectedToggleGroupControl, 'ToggleGroupControl'); 63943/* harmony default export */ const toggle_group_control_component = (ToggleGroupControl); 63944 63945;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/P4RGQGTG.js 63946 63947 63948 63949 63950
63951// src/command/command.ts 63952 63953 63954 63955 63956function P4RGQGTG_isNativeClick(event) { 63957 if (!event.isTrusted) 63958 return false; 63959 const element = event.currentTarget; 63960 if (event.key === "Enter") { 63961 return O35LWD4W_isButton(element) || element.tagName === "SUMMARY" || element.tagName === "A"; 63962 } 63963 if (event.key === " ") { 63964 return O35LWD4W_isButton(element) || element.tagName === "SUMMARY" || element.tagName === "INPUT" || element.tagName === "SELECT"; 63965 } 63966 return false; 63967} 63968var useCommand = NQJBHION_createHook( 63969 (_a) => { 63970 var _b = _a, { clickOnEnter = true, clickOnSpace = true } = _b, props = __objRest(_b, ["clickOnEnter", "clickOnSpace"]); 63971 const ref = (0,external_React_.useRef)(null); 63972 const tagName = useTagName(ref, props.as); 63973 const type = props.type; 63974 const [isNativeButton, setIsNativeButton] = (0,external_React_.useState)( 63975 () => !!tagName && O35LWD4W_isButton({ tagName, type }) 63976 ); 63977 (0,external_React_.useEffect)(() => { 63978 if (!ref.current) 63979 return; 63980 setIsNativeButton(O35LWD4W_isButton(ref.current)); 63981 }, []); 63982 const [active, setActive] = (0,external_React_.useState)(false); 63983 const activeRef = (0,external_React_.useRef)(false); 63984 const isDuplicate = "data-command" in props; 63985 const onKeyDownProp = props.onKeyDown; 63986 const onKeyDown = useEvent((event) => { 63987 onKeyDownProp == null ? void 0 : onKeyDownProp(event); 63988 const element = event.currentTarget; 63989 if (event.defaultPrevented) 63990 return; 63991 if (isDuplicate) 63992 return; 63993 if (props.disabled) 63994 return; 63995 if (!events_isSelfTarget(event)) 63996 return; 63997 if (O35LWD4W_isTextField(element)) 63998 return; 63999 if (element.isContentEditable) 64000 return; 64001 const isEnter = clickOnEnter && event.key === "Enter"; 64002 const isSpace = clickOnSpace && event.key === " "; 64003 const shouldPreventEnter = event.key === "Enter" && !clickOnEnter; 64004 const shouldPreventSpace = event.key === " " && !clickOnSpace; 64005 if (shouldPreventEnter || shouldPreventSpace) { 64006 event.preventDefault(); 64007 return; 64008 } 64009 if (isEnter || isSpace) { 64010 const nativeClick = P4RGQGTG_isNativeClick(event); 64011 if (isEnter) { 64012 if (!nativeClick) { 64013 event.preventDefault(); 64014 const _a2 = event, { view } = _a2, eventInit = __objRest(_a2, ["view"]); 64015 const click = () => fireClickEvent(element, eventInit); 64016 if (isFirefox()) { 64017 queueBeforeEvent(element, "keyup", click); 64018 } else { 64019 queueMicrotask(click); 64020 } 64021 } 64022 } else if (isSpace) { 64023 activeRef.current = true; 64024 if (!nativeClick) { 64025 event.preventDefault();
64026 setActive(true); 64027 } 64028 } 64029 } 64030 }); 64031 const onKeyUpProp = props.onKeyUp; 64032 const onKeyUp = useEvent((event) => { 64033 onKeyUpProp == null ? void 0 : onKeyUpProp(event); 64034 if (event.defaultPrevented) 64035 return; 64036 if (isDuplicate) 64037 return; 64038 if (props.disabled) 64039 return; 64040 if (event.metaKey) 64041 return; 64042 const isSpace = clickOnSpace && event.key === " "; 64043 if (activeRef.current && isSpace) { 64044 activeRef.current = false; 64045 if (!P4RGQGTG_isNativeClick(event)) { 64046 setActive(false); 64047 const element = event.currentTarget; 64048 const _a2 = event, { view } = _a2, eventInit = __objRest(_a2, ["view"]); 64049 queueMicrotask(() => fireClickEvent(element, eventInit)); 64050 } 64051 } 64052 }); 64053 props = PNRLI7OV_spreadProps(PNRLI7OV_spreadValues({ 64054 "data-command": "", 64055 "data-active": active ? "" : void 0, 64056 type: isNativeButton ? "button" : void 0 64057 }, props), { 64058 ref: useMergeRefs(ref, props.ref), 64059 onKeyDown, 64060 onKeyUp 64061 }); 64062 props = useFocusable(props); 64063 return props; 64064 } 64065); 64066var Command = NQJBHION_createComponent((props) => { 64067 props = useCommand(props); 64068 return NQJBHION_createElement("button", props); 64069}); 64070if (false) {} 64071 64072 64073 64074;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/T3DJZG63.js
64075// src/collection/collection-context.ts 64076 64077var CollectionContext = (0,external_React_.createContext)( 64078 void 0 64079); 64080 64081 64082 64083;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/HGFTMLQ7.js 64084 64085 64086 64087 64088
64089// src/collection/collection-item.ts 64090 64091 64092var useCollectionItem = NQJBHION_createHook( 64093 (_a) => { 64094 var _b = _a, { 64095 store, 64096 shouldRegisterItem = true, 64097 getItem = identity, 64098 element: element 64099 } = _b, props = __objRest(_b, [ 64100 "store", 64101 "shouldRegisterItem", 64102 "getItem", 64103 // @ts-expect-error This prop may come from a collection renderer. 64104 "element" 64105 ]); 64106 const context = (0,external_React_.useContext)(CollectionContext); 64107 store = store || context; 64108 const id = useId(props.id); 64109 const unrenderItem = (0,external_React_.useRef)(); 64110 const ref = (0,external_React_.useCallback)( 64111 (element2) => { 64112 var _a2; 64113 if (!element2 || !id || !shouldRegisterItem) { 64114 return (_a2 = unrenderItem.current) == null ? void 0 : _a2.call(unrenderItem); 64115 } 64116 const item = getItem({ id, element: element2 }); 64117 unrenderItem.current = store == null ? void 0 : store.renderItem(item); 64118 }, 64119 [id, shouldRegisterItem, getItem, store] 64120 ); 64121 props = PNRLI7OV_spreadProps(PNRLI7OV_spreadValues({}, props), { 64122 ref: useMergeRefs(ref, props.ref) 64123 }); 64124 return props; 64125 } 64126); 64127var CollectionItem = NQJBHION_createComponent( 64128 (props) => { 64129 const htmlProps = useCollectionItem(props); 64130 return NQJBHION_createElement("div", htmlProps); 64131 } 64132); 64133if (false) {} 64134 64135 64136 64137;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/WFK3YK7D.js 64138 64139 64140 64141 64142 64143 64144 64145 64146
64147// src/composite/composite-item.tsx 64148 64149 64150 64151 64152function isEditableElement(element) { 64153 if (element.isContentEditable) 64154 return true; 64155 if (O35LWD4W_isTextField(element)) 64156 return true; 64157 return element.tagName === "INPUT" && !O35LWD4W_isButton(element); 64158} 64159function getNextPageOffset(scrollingElement, pageUp = false) { 64160 const height = scrollingElement.clientHeight; 64161 const { top } = scrollingElement.getBoundingClientRect(); 64162 const pageSize = Math.max(height * 0.875, height - 40) * 1.5; 64163 const pageOffset = pageUp ? height - pageSize + top : pageSize + top; 64164 if (scrollingElement.tagName === "HTML") { 64165 return pageOffset + scrollingElement.scrollTop; 64166 } 64167 return pageOffset; 64168} 64169function getItemOffset(itemElement, pageUp = false) { 64170 const { top } = itemElement.getBoundingClientRect(); 64171 if (pageUp) { 64172 return top + itemElement.clientHeight; 64173 } 64174 return top; 64175} 64176function findNextPageItemId(element, store, next, pageUp = false) { 64177 var _a; 64178 if (!store) 64179 return; 64180 if (!next) 64181 return; 64182 const { renderedItems } = store.getState(); 64183 const scrollingElement = getScrollingElement(element); 64184 if (!scrollingElement) 64185 return; 64186 const nextPageOffset = getNextPageOffset(scrollingElement, pageUp); 64187 let id; 64188 let prevDifference; 64189 for (let i = 0; i < renderedItems.length; i += 1) { 64190 const previousId = id; 64191 id = next(i); 64192 if (!id) 64193 break; 64194 if (id === previousId) 64195 continue; 64196 const itemElement = (_a = getEnabledItem(store, id)) == null ? void 0 : _a.element; 64197 if (!itemElement) 64198 continue; 64199 const itemOffset = getItemOffset(itemElement, pageUp); 64200 const difference = itemOffset - nextPageOffset; 64201 const absDifference = Math.abs(difference); 64202 if (pageUp && difference <= 0 || !pageUp && difference >= 0) { 64203 if (prevDifference !== void 0 && prevDifference < absDifference) { 64204 id = previousId; 64205 } 64206 break; 64207 } 64208 prevDifference = absDifference; 64209 } 64210 return id; 64211} 64212function WFK3YK7D_targetIsAnotherItem(event, store) { 64213 if (events_isSelfTarget(event)) 64214 return false; 64215 return OXPV2NBK_isItem(store, event.target); 64216} 64217function WFK3YK7D_useRole(ref, props) { 64218 const roleProp = props.role; 64219 const [role, setRole] = (0,external_React_.useState)(roleProp); 64220 useSafeLayoutEffect(() => { 64221 const element = ref.current; 64222 if (!element) 64223 return; 64224 setRole(element.getAttribute("role") || roleProp); 64225 }, [roleProp]); 64226 return role; 64227} 64228function requiresAriaSelected(role) { 64229 return role === "option" || role === "treeitem"; 64230} 64231function supportsAriaSelected(role) { 64232 if (role === "option") 64233 return true; 64234 if (role === "tab") 64235 return true; 64236 if (role === "treeitem") 64237 return true; 64238 if (role === "gridcell") 64239 return true; 64240 if (role === "row") 64241 return true; 64242 if (role === "columnheader") 64243 return true; 64244 if (role === "rowheader") 64245 return true; 64246 return false; 64247} 64248var WFK3YK7D_useCompositeItem = NQJBHION_createHook( 64249 (_a) => { 64250 var _b = _a, { 64251 store, 64252 rowId: rowIdProp, 64253 preventScrollOnKeyDown = false, 64254 moveOnKeyPress = true, 64255 getItem: getItemProp, 64256 "aria-setsize": ariaSetSizeProp, 64257 "aria-posinset": ariaPosInSetProp 64258 } = _b, props = __objRest(_b, [ 64259 "store", 64260 "rowId", 64261 "preventScrollOnKeyDown", 64262 "moveOnKeyPress", 64263 "getItem", 64264 "aria-setsize", 64265 "aria-posinset" 64266 ]); 64267 var _a2; 64268 const context = (0,external_React_.useContext)(CompositeContext); 64269 store = store || context; 64270 const id = useId(props.id); 64271 const ref = (0,external_React_.useRef)(null); 64272 const row = (0,external_React_.useContext)(CompositeRowContext); 64273 const rowId = useStoreState(store, (state) => { 64274 if (rowIdProp) 64275 return rowIdProp; 64276 if (!(row == null ? void 0 : row.baseElement)) 64277 return; 64278 if (row.baseElement !== state.baseElement) 64279 return; 64280 return row.id; 64281 }); 64282 const trulyDisabled = props.disabled && !props.accessibleWhenDisabled; 64283 const getItem = (0,external_React_.useCallback)( 64284 (item) => { 64285 const nextItem = PNRLI7OV_spreadProps(PNRLI7OV_spreadValues({}, item), { 64286 id: id || item.id, 64287 rowId, 64288 disabled: !!trulyDisabled 64289 }); 64290 if (getItemProp) { 64291 return getItemProp(nextItem); 64292 } 64293 return nextItem; 64294 }, 64295 [id, rowId, trulyDisabled, getItemProp] 64296 ); 64297 const onFocusProp = props.onFocus; 64298 const hasFocusedComposite = (0,external_React_.useRef)(false); 64299 const onFocus = useEvent((event) => { 64300 onFocusProp == null ? void 0 : onFocusProp(event); 64301 if (event.defaultPrevented) 64302 return; 64303 if (events_isPortalEvent(event)) 64304 return; 64305 if (!id) 64306 return; 64307 if (!store) 64308 return; 64309 const { activeId, virtualFocus: virtualFocus2, baseElement: baseElement2 } = store.getState(); 64310 if (WFK3YK7D_targetIsAnotherItem(event, store)) 64311 return; 64312 if (activeId !== id) { 64313 store.setActiveId(id); 64314 } 64315 if (!virtualFocus2) 64316 return; 64317 if (!events_isSelfTarget(event)) 64318 return; 64319 if (isEditableElement(event.currentTarget)) 64320 return; 64321 if (!baseElement2) 64322 return; 64323 hasFocusedComposite.current = true; 64324 const fromComposite = event.relatedTarget === baseElement2 || OXPV2NBK_isItem(store, event.relatedTarget); 64325 if (fromComposite) { 64326 focusSilently(baseElement2); 64327 } else {
vendor: 1,405 bytes, lines 64328-64362
64328 baseElement2.focus(); 64329 } 64330 }); 64331 const onBlurCaptureProp = props.onBlurCapture; 64332 const onBlurCapture = useEvent((event) => { 64333 onBlurCaptureProp == null ? void 0 : onBlurCaptureProp(event); 64334 if (event.defaultPrevented) 64335 return; 64336 const state = store == null ? void 0 : store.getState(); 64337 if ((state == null ? void 0 : state.virtualFocus) && hasFocusedComposite.current) { 64338 hasFocusedComposite.current = false; 64339 event.preventDefault(); 64340 event.stopPropagation(); 64341 } 64342 }); 64343 const onKeyDownProp = props.onKeyDown; 64344 const preventScrollOnKeyDownProp = useBooleanEvent(preventScrollOnKeyDown); 64345 const moveOnKeyPressProp = useBooleanEvent(moveOnKeyPress); 64346 const onKeyDown = useEvent((event) => { 64347 onKeyDownProp == null ? void 0 : onKeyDownProp(event); 64348 if (event.defaultPrevented) 64349 return; 64350 if (!events_isSelfTarget(event)) 64351 return; 64352 if (!store) 64353 return; 64354 const { currentTarget } = event; 64355 const state = store.getState(); 64356 const item = store.item(id); 64357 const isGrid = !!(item == null ? void 0 : item.rowId); 64358 const isVertical = state.orientation !== "horizontal"; 64359 const isHorizontal = state.orientation !== "vertical"; 64360 const keyMap = { 64361 ArrowUp: (isGrid || isVertical) && store.up, 64362 ArrowRight: (isGrid || isHorizontal) && store.next,
64363 ArrowDown: (isGrid || isVertical) && store.down, 64364 ArrowLeft: (isGrid || isHorizontal) && store.previous, 64365 Home: () => { 64366 if (!isGrid || event.ctrlKey) { 64367 return store == null ? void 0 : store.first(); 64368 } 64369 return store == null ? void 0 : store.previous(-1); 64370 }, 64371 End: () => { 64372 if (!isGrid || event.ctrlKey) { 64373 return store == null ? void 0 : store.last(); 64374 } 64375 return store == null ? void 0 : store.next(-1); 64376 }, 64377 PageUp: () => { 64378 return findNextPageItemId(currentTarget, store, store == null ? void 0 : store.up, true); 64379 }, 64380 PageDown: () => { 64381 return findNextPageItemId(currentTarget, store, store == null ? void 0 : store.down); 64382 } 64383 }; 64384 const action = keyMap[event.key]; 64385 if (action) { 64386 const nextId = action(); 64387 if (preventScrollOnKeyDownProp(event) || nextId !== void 0) { 64388 if (!moveOnKeyPressProp(event)) 64389 return; 64390 event.preventDefault(); 64391 store.move(nextId); 64392 } 64393 } 64394 }); 64395 const baseElement = useStoreState( 64396 store, 64397 (state) => state.baseElement || void 0 64398 ); 64399 const providerValue = (0,external_React_.useMemo)( 64400 () => ({ id, baseElement }), 64401 [id, baseElement] 64402 ); 64403 props = useWrapElement( 64404 props, 64405 (element) => /* @__PURE__ */ (0,jsx_runtime.jsx)(CompositeItemContext.Provider, { value: providerValue, children: element }), 64406 [providerValue] 64407 ); 64408 const isActiveItem = useStoreState(store, (state) => state.activeId === id); 64409 const virtualFocus = useStoreState(store, "virtualFocus"); 64410 const role = WFK3YK7D_useRole(ref, props); 64411 let ariaSelected; 64412 if (isActiveItem) { 64413 if (requiresAriaSelected(role)) { 64414 ariaSelected = true; 64415 } else if (virtualFocus && supportsAriaSelected(role)) { 64416 ariaSelected = true; 64417 } 64418 } 64419 const ariaSetSize = useStoreState(store, (state) => { 64420 if (ariaSetSizeProp != null) 64421 return ariaSetSizeProp; 64422 if (!(row == null ? void 0 : row.ariaSetSize)) 64423 return; 64424 if (row.baseElement !== state.baseElement) 64425 return; 64426 return row.ariaSetSize; 64427 }); 64428 const ariaPosInSet = useStoreState(store, (state) => { 64429 if (ariaPosInSetProp != null) 64430 return ariaPosInSetProp; 64431 if (!(row == null ? void 0 : row.ariaPosInSet)) 64432 return; 64433 if (row.baseElement !== state.baseElement) 64434 return; 64435 const itemsInRow = state.renderedItems.filter( 64436 (item) => item.rowId === rowId 64437 ); 64438 return row.ariaPosInSet + itemsInRow.findIndex((item) => item.id === id); 64439 }); 64440 const isTabbable = (_a2 = useStoreState(store, (state) => { 64441 if (!state.renderedItems.length) 64442 return true; 64443 return !state.virtualFocus && state.activeId === id; 64444 })) != null ? _a2 : true; 64445 props = PNRLI7OV_spreadProps(PNRLI7OV_spreadValues({ 64446 id, 64447 "aria-selected": ariaSelected, 64448 "data-active-item": isActiveItem ? "" : void 0 64449 }, props), { 64450 ref: useMergeRefs(ref, props.ref), 64451 tabIndex: isTabbable ? props.tabIndex : -1, 64452 onFocus, 64453 onBlurCapture, 64454 onKeyDown 64455 }); 64456 props = useCommand(props); 64457 props = useCollectionItem(PNRLI7OV_spreadProps(PNRLI7OV_spreadValues({ 64458 store 64459 }, props), { 64460 getItem, 64461 shouldRegisterItem: !!id ? props.shouldRegisterItem : false 64462 })); 64463 return PNRLI7OV_spreadProps(PNRLI7OV_spreadValues({}, props), { 64464 "aria-setsize": ariaSetSize, 64465 "aria-posinset": ariaPosInSet 64466 }); 64467 } 64468); 64469var WFK3YK7D_CompositeItem = createMemoComponent( 64470 (props) => { 64471 const htmlProps = WFK3YK7D_useCompositeItem(props); 64472 return NQJBHION_createElement("button", htmlProps); 64473 } 64474); 64475if (false) {} 64476 64477 64478 64479;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/X2PAO7C6.js 64480 64481 64482 64483 64484 64485 64486
64487// src/radio/radio.ts 64488 64489function getIsChecked(value, storeValue) { 64490 if (storeValue === void 0) 64491 return; 64492 if (value != null && storeValue != null) { 64493 return storeValue === value; 64494 } 64495 return !!storeValue; 64496} 64497function isNativeRadio(tagName, type) { 64498 return tagName === "input" && (!type || type === "radio"); 64499} 64500var useRadio = NQJBHION_createHook( 64501 (_a) => { 64502 var _b = _a, { store, value, checked } = _b, props = __objRest(_b, ["store", "value", "checked"]); 64503 var _a2; 64504 const context = (0,external_React_.useContext)(RadioContext); 64505 store = store || context; 64506 const id = useId(props.id); 64507 const ref = (0,external_React_.useRef)(null); 64508 const isChecked = (_a2 = useStoreState( 64509 store, 64510 (state) => checked != null ? checked : getIsChecked(value, state.value) 64511 )) != null ? _a2 : checked; 64512 (0,external_React_.useEffect)(() => { 64513 if (!id) 64514 return; 64515 if (!isChecked) 64516 return; 64517 const isActiveItem = (store == null ? void 0 : store.getState().activeId) === id; 64518 if (isActiveItem) 64519 return; 64520 store == null ? void 0 : store.setActiveId(id); 64521 }, [store, isChecked, id]); 64522 const onChangeProp = props.onChange; 64523 const tagName = useTagName(ref, props.as || "input"); 64524 const nativeRadio = isNativeRadio(tagName, props.type); 64525 const onChange = useEvent((event) => { 64526 if (props.disabled) { 64527 event.preventDefault(); 64528 event.stopPropagation(); 64529 return; 64530 } 64531 if (!nativeRadio) { 64532 event.currentTarget.checked = true; 64533 } 64534 onChangeProp == null ? void 0 : onChangeProp(event); 64535 if (event.defaultPrevented) 64536 return; 64537 store == null ? void 0 : store.setValue(value); 64538 }); 64539 const onClickProp = props.onClick; 64540 const onClick = useEvent((event) => { 64541 onClickProp == null ? void 0 : onClickProp(event); 64542 if (event.defaultPrevented) 64543 return; 64544 if (nativeRadio) 64545 return; 64546 onChange(event); 64547 }); 64548 const onFocusProp = props.onFocus; 64549 const onFocus = useEvent((event) => { 64550 onFocusProp == null ? void 0 : onFocusProp(event); 64551 if (event.defaultPrevented) 64552 return; 64553 if (!nativeRadio) 64554 return; 64555 if (!store) 64556 return; 64557 const { moves, activeId } = store.getState(); 64558 if (!moves) 64559 return; 64560 if (id && activeId !== id) 64561 return; 64562 onChange(event); 64563 }); 64564 props = PNRLI7OV_spreadProps(PNRLI7OV_spreadValues({ 64565 id, 64566 role: !nativeRadio ? "radio" : void 0, 64567 type: nativeRadio ? "radio" : void 0, 64568 "aria-checked": isChecked 64569 }, props), { 64570 ref: useMergeRefs(ref, props.ref), 64571 onChange, 64572 onClick, 64573 onFocus 64574 }); 64575 props = WFK3YK7D_useCompositeItem(PNRLI7OV_spreadValues({ store, clickOnEnter: !nativeRadio }, props)); 64576 return PNRLI7OV_spreadValues({ 64577 value: nativeRadio ? value : void 0, 64578 checked: isChecked 64579 }, props); 64580 } 64581); 64582var Radio = createMemoComponent((props) => { 64583 const htmlProps = useRadio(props); 64584 return NQJBHION_createElement("input", htmlProps); 64585}); 64586if (false) {} 64587 64588 64589 64590;// CONCATENATED MODULE: ./packages/components/build-module/toggle-group-control/toggle-group-control-option-base/styles.js 64591 64592function 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)."; } 64593/** 64594 * External dependencies 64595 */ 64596 64597/** 64598 * Internal dependencies 64599 */ 64600 64601const LabelView = emotion_styled_base_browser_esm("div", true ? { 64602 target: "et6ln9s1" 64603} : 0)( true ? { 64604 name: "sln1fl", 64605 styles: "display:inline-flex;max-width:100%;min-width:0;position:relative" 64606} : 0); 64607const labelBlock = true ? { 64608 name: "82a6rk", 64609 styles: "flex:1" 64610} : 0; 64611const buttonView = ({ 64612 isDeselectable, 64613 isIcon, 64614 isPressed, 64615 size 64616}) => /*#__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;
64616transition: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, ";}", isDeselectable && deselectable, " ", isIcon && isIconStyles({ 64617 size 64618}), " ", isPressed && pressed, ";" + ( true ? "" : 0), true ? "" : 0); 64619const pressed = /*#__PURE__*/emotion_react_browser_esm_css("color:", COLORS.white, ";&:active{background:transparent;}" + ( true ? "" : 0), true ? "" : 0); 64620const deselectable = /*#__PURE__*/emotion_react_browser_esm_css("color:", COLORS.gray[900], ";&:focus{box-shadow:inset 0 0 0 1px ", COLORS.white, ",0 0 0 ", config_values.borderWidthFocus, " ", COLORS.theme.accent, ";outline:2px solid transparent;}" + ( true ? "" : 0), true ? "" : 0); 64621const ButtonContentView = emotion_styled_base_browser_esm("div", true ? { 64622 target: "et6ln9s0" 64623} : 0)("display:flex;font-size:", config_values.fontSize, ";line-height:1;" + ( true ? "" : 0)); 64624const isIconStyles = ({ 64625 size = 'default' 64626}) => { 64627 const iconButtonSizes = { 64628 default: '30px', 64629 '__unstable-large': '34px' 64630 }; 64631 return /*#__PURE__*/emotion_react_browser_esm_css("color:", COLORS.gray[900], ";width:", iconButtonSizes[size], ";padding-left:0;padding-right:0;" + ( true ? "" : 0), true ? "" : 0); 64632}; 64633const backdropView = /*#__PURE__*/emotion_react_browser_esm_css("background:", COLORS.gray[900], ";border-radius:", config_values.controlBorderRadius, ";position:absolute;inset:0;z-index:1;outline:2px solid transparent;outline-offset:-3px;" + ( true ? "" : 0), true ? "" : 0); 64634 64635;// CONCATENATED MODULE: ./packages/components/build-module/toggle-group-control/toggle-group-control-option-base/component.js 64636 64637/** 64638 * External dependencies 64639 */ 64640 64641// eslint-disable-next-line no-restricted-imports 64642 64643// eslint-disable-next-line no-restricted-imports 64644 64645 64646/** 64647 * WordPress dependencies 64648 */ 64649 64650 64651 64652/** 64653 * Internal dependencies 64654 */ 64655 64656 64657 64658 64659 64660 64661const { 64662 ButtonContentView: component_ButtonContentView, 64663 LabelView: component_LabelView 64664} = toggle_group_control_option_base_styles_namespaceObject; 64665const REDUCED_MOTION_TRANSITION_CONFIG = { 64666 duration: 0 64667}; 64668const LAYOUT_ID = 'toggle-group-backdrop-shared-layout-id'; 64669const WithToolTip = ({ 64670 showTooltip, 64671 text, 64672 children 64673}) => { 64674 if (showTooltip && text) { 64675 return (0,external_wp_element_namespaceObject.createElement)(tooltip, { 64676 text: text, 64677 placement: "top" 64678 }, children); 64679 } 64680 return (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, children); 64681}; 64682function ToggleGroupControlOptionBase(props, forwardedRef) { 64683 const shouldReduceMotion = useReducedMotion(); 64684 const toggleGroupControlContext = useToggleGroupControlContext(); 64685 const id = (0,external_wp_compose_namespaceObject.useInstanceId)(ToggleGroupControlOptionBase, toggleGroupControlContext.baseId || 'toggle-group-control-option-base'); 64686 const buttonProps = useContextSystem({ 64687 ...props, 64688 id 64689 }, 'ToggleGroupControlOptionBase'); 64690 const { 64691 isBlock = false, 64692 isDeselectable = false, 64693 size = 'default' 64694 } = toggleGroupControlContext; 64695 const { 64696 className, 64697 isIcon = false, 64698 value, 64699 children, 64700 showTooltip = false, 64701 onFocus: onFocusProp, 64702 ...otherButtonProps 64703 } = buttonProps; 64704 const isPressed = toggleGroupControlContext.value === value; 64705 const cx = useCx(); 64706 const labelViewClasses = (0,external_wp_element_namespaceObject.useMemo)(() => cx(isBlock && labelBlock), [cx, isBlock]); 64707 const itemClasses = (0,external_wp_element_namespaceObject.useMemo)(() => cx(buttonView({ 64708 isDeselectable, 64709 isIcon, 64710 isPressed, 64711 size 64712 }), className), [cx, isDeselectable, isIcon, isPressed, size, className]); 64713 const backdropClasses = (0,external_wp_element_namespaceObject.useMemo)(() => cx(backdropView), [cx]); 64714 const buttonOnClick = () => { 64715 if (isDeselectable && isPressed) { 64716 toggleGroupControlContext.setValue(undefined); 64717 } else { 64718 toggleGroupControlContext.setValue(value); 64719 } 64720 }; 64721 const commonProps = { 64722 ...otherButtonProps, 64723 className: itemClasses, 64724 'data-value': value, 64725 ref: forwardedRef 64726 }; 64727 return (0,external_wp_element_namespaceObject.createElement)(component_LabelView, { 64728 className: labelViewClasses 64729 }, (0,external_wp_element_namespaceObject.createElement)(WithToolTip, { 64730 showTooltip: showTooltip, 64731 text: otherButtonProps['aria-label'] 64732 }, isDeselectable ? (0,external_wp_element_namespaceObject.createElement)("button", { 64733 ...commonProps, 64734 onFocus: onFocusProp, 64735 "aria-pressed": isPressed, 64736 type: "button", 64737 onClick: buttonOnClick 64738 }, (0,external_wp_element_namespaceObject.createElement)(component_ButtonContentView, null, children)) : (0,external_wp_element_namespaceObject.createElement)(Radio, { 64739 render: (0,external_wp_element_namespaceObject.createElement)("button", { 64740 ...commonProps, 64741 onFocus: event => { 64742 onFocusProp?.(event); 64743 if (event.defaultPrevented) return; 64744 toggleGroupControlContext.setValue(value); 64745 } 64746 }), 64747 value: value 64748 }, (0,external_wp_element_namespaceObject.createElement)(component_ButtonContentView, null, children))), isPressed ? (0,external_wp_element_namespaceObject.createElement)(motion.div, { 64749 className: backdropClasses, 64750 transition: shouldReduceMotion ? REDUCED_MOTION_TRANSITION_CONFIG : undefined, 64751 role: "presentation", 64752 layoutId: LAYOUT_ID 64753 }) : null); 64754} 64755 64756/** 64757 * `ToggleGroupControlOptionBase` is a form component and is meant to be used as an internal, 64758 * generic component for any children of `ToggleGroupControl`. 64759 * 64760 * @example 64761 * ```jsx 64762 * import { 64763 * __experimentalToggleGroupControl as ToggleGroupControl, 64764 * __experimentalToggleGroupControlOptionBase as ToggleGroupControlOptionBase, 64765 * } from '@wordpress/components'; 64766 * 64767 * function Example() { 64768 * return ( 64769 * <ToggleGroupControl label="my label" value="vertical" isBlock> 64770 * <ToggleGroupControlOption value="horizontal" label="Horizontal" /> 64771 * <ToggleGroupControlOption value="vertical" label="Vertical" /> 64772 * </ToggleGroupControl> 64773 * ); 64774 * } 64775 * ``` 64776 */ 64777const ConnectedToggleGroupControlOptionBase = contextConnect(ToggleGroupControlOptionBase, 'ToggleGroupControlOptionBase'); 64778/* harmony default export */ const toggle_group_control_option_base_component = (ConnectedToggleGroupControlOptionBase); 64779 64780;// CONCATENATED MODULE: ./packages/components/build-module/toggle-group-control/toggle-group-control-option/component.js 64781 64782/** 64783 * External dependencies 64784 */ 64785
64786/** 64787 * WordPress dependencies 64788 */ 64789 64790 64791/** 64792 * Internal dependencies 64793 */ 64794 64795 64796function UnforwardedToggleGroupControlOption(props, ref) { 64797 const { 64798 label, 64799 ...restProps 64800 } = props; 64801 const optionLabel = restProps['aria-label'] || label; 64802 return (0,external_wp_element_namespaceObject.createElement)(toggle_group_control_option_base_component, { 64803 ...restProps, 64804 "aria-label": optionLabel, 64805 ref: ref 64806 }, label); 64807} 64808 64809/** 64810 * `ToggleGroupControlOption` is a form component and is meant to be used as a 64811 * child of `ToggleGroupControl`. 64812 * 64813 * ```jsx 64814 * import { 64815 * __experimentalToggleGroupControl as ToggleGroupControl, 64816 * __experimentalToggleGroupControlOption as ToggleGroupControlOption, 64817 * } from '@wordpress/components'; 64818 * 64819 * function Example() { 64820 * return ( 64821 * <ToggleGroupControl label="my label" value="vertical" isBlock> 64822 * <ToggleGroupControlOption value="horizontal" label="Horizontal" /> 64823 * <ToggleGroupControlOption value="vertical" label="Vertical" /> 64824 * </ToggleGroupControl> 64825 * ); 64826 * } 64827 * ``` 64828 */ 64829const ToggleGroupControlOption = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedToggleGroupControlOption); 64830/* harmony default export */ const toggle_group_control_option_component = (ToggleGroupControlOption); 64831 64832;// CONCATENATED MODULE: ./packages/components/build-module/font-size-picker/constants.js 64833/** 64834 * WordPress dependencies 64835 */ 64836 64837 64838/** 64839 * List of T-shirt abbreviations. 64840 * 64841 * When there are 5 font sizes or fewer, we assume that the font sizes are 64842 * ordered by size and show T-shirt labels. 64843 */ 64844const T_SHIRT_ABBREVIATIONS = [/* translators: S stands for 'small' and is a size label. */ 64845(0,external_wp_i18n_namespaceObject.__)('S'), /* translators: M stands for 'medium' and is a size label. */ 64846(0,external_wp_i18n_namespaceObject.__)('M'), /* translators: L stands for 'large' and is a size label. */ 64847(0,external_wp_i18n_namespaceObject.__)('L'), /* translators: XL stands for 'extra large' and is a size label. */ 64848(0,external_wp_i18n_namespaceObject.__)('XL'), /* translators: XXL stands for 'extra extra large' and is a size label. */ 64849(0,external_wp_i18n_namespaceObject.__)('XXL')]; 64850 64851/** 64852 * List of T-shirt names. 64853 * 64854 * When there are 5 font sizes or fewer, we assume that the font sizes are 64855 * ordered by size and show T-shirt labels. 64856 */ 64857const T_SHIRT_NAMES = [(0,external_wp_i18n_namespaceObject.__)('Small'), (0,external_wp_i18n_namespaceObject.__)('Medium'), (0,external_wp_i18n_namespaceObject.__)('Large'), (0,external_wp_i18n_namespaceObject.__)('Extra Large'), (0,external_wp_i18n_namespaceObject.__)('Extra Extra Large')]; 64858 64859;// CONCATENATED MODULE: ./packages/components/build-module/font-size-picker/font-size-picker-toggle-group.js 64860 64861/** 64862 * WordPress dependencies 64863 */ 64864 64865 64866/** 64867 * Internal dependencies 64868 */ 64869 64870 64871const FontSizePickerToggleGroup = props => { 64872 const { 64873 fontSizes, 64874 value, 64875 __nextHasNoMarginBottom, 64876 size, 64877 onChange 64878 } = props; 64879 return (0,external_wp_element_namespaceObject.createElement)(toggle_group_control_component, { 64880 __nextHasNoMarginBottom: __nextHasNoMarginBottom, 64881 label: (0,external_wp_i18n_namespaceObject.__)('Font size'), 64882 hideLabelFromVision: true, 64883 value: value, 64884 onChange: onChange, 64885 isBlock: true, 64886 size: size 64887 }, fontSizes.map((fontSize, index) => (0,external_wp_element_namespaceObject.createElement)(toggle_group_control_option_component, { 64888 key: fontSize.slug, 64889 value: fontSize.size, 64890 label: T_SHIRT_ABBREVIATIONS[index], 64891 "aria-label": fontSize.name || T_SHIRT_NAMES[index], 64892 showTooltip: true 64893 }))); 64894}; 64895/* harmony default export */ const font_size_picker_toggle_group = (FontSizePickerToggleGroup); 64896 64897;// CONCATENATED MODULE: ./packages/components/build-module/font-size-picker/index.js 64898 64899/** 64900 * External dependencies 64901 */ 64902 64903/** 64904 * WordPress dependencies 64905 */ 64906 64907 64908 64909 64910 64911/** 64912 * Internal dependencies 64913 */ 64914 64915 64916 64917 64918 64919 64920 64921 64922 64923 64924 64925const UnforwardedFontSizePicker = (props, ref) => { 64926 const { 64927 /** Start opting into the new margin-free styles that will become the default in a future version. */ 64928 __nextHasNoMarginBottom = false, 64929 fallbackFontSize, 64930 fontSizes = [], 64931 disableCustomFontSizes = false, 64932 onChange, 64933 size = 'default', 64934 units: unitsProp, 64935 value, 64936 withSlider = false, 64937 withReset = true 64938 } = props; 64939 if (!__nextHasNoMarginBottom) { 64940 external_wp_deprecated_default()('Bottom margin styles for wp.components.FontSizePicker', { 64941 since: '6.1', 64942 version: '6.4', 64943 hint: 'Set the `__nextHasNoMarginBottom` prop to true to start opting into the new styles, which will become the default in a future version.' 64944 }); 64945 } 64946 const units = useCustomUnits({ 64947 availableUnits: unitsProp || ['px', 'em', 'rem'] 64948 }); 64949 const shouldUseSelectControl = fontSizes.length > 5; 64950 const selectedFontSize = fontSizes.find(fontSize => fontSize.size === value); 64951 const isCustomValue = !!value && !selectedFontSize; 64952 const [showCustomValueControl, setShowCustomValueControl] = (0,external_wp_element_namespaceObject.useState)(!disableCustomFontSizes && isCustomValue); 64953 const headerHint = (0,external_wp_element_namespaceObject.useMemo)(() => { 64954 if (showCustomValueControl) { 64955 return (0,external_wp_i18n_namespaceObject.__)('Custom'); 64956 } 64957 if (!shouldUseSelectControl) { 64958 if (selectedFontSize) { 64959 return selectedFontSize.name || T_SHIRT_NAMES[fontSizes.indexOf(selectedFontSize)]; 64960 } 64961 return ''; 64962 } 64963 const commonUnit = getCommonSizeUnit(fontSizes); 64964 if (commonUnit) { 64965 return `(${commonUnit})`; 64966 } 64967 return ''; 64968 }, [showCustomValueControl, shouldUseSelectControl, selectedFontSize, fontSizes]); 64969 if (fontSizes.length === 0 && disableCustomFontSizes) { 64970 return null; 64971 } 64972 64973 // If neither the value or first font size is a string, then FontSizePicker 64974 // operates in a legacy "unitless" mode where UnitControl can only be used 64975 // to select px values and onChange() is always called with number values. 64976 const hasUnits = typeof value === 'string' || typeof fontSizes[0]?.size === 'string'; 64977 const [valueQuantity, valueUnit] = parseQuantityAndUnitFromRawValue(value, units); 64978 const isValueUnitRelative = !!valueUnit && ['em', 'rem'].includes(valueUnit); 64979 return (0,external_wp_element_namespaceObject.createElement)(styles_Container, { 64980 ref: ref, 64981 className: "components-font-size-picker" 64982 }, (0,external_wp_element_namespaceObject.createElement)(visually_hidden_component, { 64983 as: "legend" 64984 }, (0,external_wp_i18n_namespaceObject.__)('Font size')), (0,external_wp_element_namespaceObject.createElement)(spacer_
64984component, null, (0,external_wp_element_namespaceObject.createElement)(font_size_picker_styles_Header, { 64985 className: "components-font-size-picker__header" 64986 }, (0,external_wp_element_namespaceObject.createElement)(HeaderLabel, { 64987 "aria-label": `${(0,external_wp_i18n_namespaceObject.__)('Size')} ${headerHint || ''}` 64988 }, (0,external_wp_i18n_namespaceObject.__)('Size'), headerHint && (0,external_wp_element_namespaceObject.createElement)(HeaderHint, { 64989 className: "components-font-size-picker__header__hint" 64990 }, headerHint)), !disableCustomFontSizes && (0,external_wp_element_namespaceObject.createElement)(HeaderToggle, { 64991 label: showCustomValueControl ? (0,external_wp_i18n_namespaceObject.__)('Use size preset') : (0,external_wp_i18n_namespaceObject.__)('Set custom size'), 64992 icon: library_settings, 64993 onClick: () => { 64994 setShowCustomValueControl(!showCustomValueControl); 64995 }, 64996 isPressed: showCustomValueControl, 64997 isSmall: true 64998 }))), (0,external_wp_element_namespaceObject.createElement)(Controls, { 64999 className: "components-font-size-picker__controls", 65000 __nextHasNoMarginBottom: __nextHasNoMarginBottom 65001 }, !!fontSizes.length && shouldUseSelectControl && !showCustomValueControl && (0,external_wp_element_namespaceObject.createElement)(font_size_picker_select, { 65002 fontSizes: fontSizes, 65003 value: value, 65004 disableCustomFontSizes: disableCustomFontSizes, 65005 size: size, 65006 onChange: newValue => { 65007 if (newValue === undefined) { 65008 onChange?.(undefined); 65009 } else { 65010 onChange?.(hasUnits ? newValue : Number(newValue), fontSizes.find(fontSize => fontSize.size === newValue)); 65011 } 65012 }, 65013 onSelectCustom: () => setShowCustomValueControl(true) 65014 }), !shouldUseSelectControl && !showCustomValueControl && (0,external_wp_element_namespaceObject.createElement)(font_size_picker_toggle_group, { 65015 fontSizes: fontSizes, 65016 value: value, 65017 __nextHasNoMarginBottom: __nextHasNoMarginBottom, 65018 size: size, 65019 onChange: newValue => { 65020 if (newValue === undefined) { 65021 onChange?.(undefined); 65022 } else { 65023 onChange?.(hasUnits ? newValue : Number(newValue), fontSizes.find(fontSize => fontSize.size === newValue)); 65024 } 65025 } 65026 }), !disableCustomFontSizes && showCustomValueControl && (0,external_wp_element_namespaceObject.createElement)(flex_component, { 65027 className: "components-font-size-picker__custom-size-control" 65028 }, (0,external_wp_element_namespaceObject.createElement)(flex_item_component, { 65029 isBlock: true 65030 }, (0,external_wp_element_namespaceObject.createElement)(unit_control, { 65031 label: (0,external_wp_i18n_namespaceObject.__)('Custom'), 65032 labelPosition: "top", 65033 hideLabelFromVision: true, 65034 value: value, 65035 onChange: newValue => { 65036 if (newValue === undefined) { 65037 onChange?.(undefined); 65038 } else { 65039 onChange?.(hasUnits ? newValue : parseInt(newValue, 10)); 65040 } 65041 }, 65042 size: size, 65043 units: hasUnits ? units : [], 65044 min: 0 65045 })), withSlider && (0,external_wp_element_namespaceObject.createElement)(flex_item_component, { 65046 isBlock: true 65047 }, (0,external_wp_element_namespaceObject.createElement)(spacer_component, { 65048 marginX: 2, 65049 marginBottom: 0 65050 }, (0,external_wp_element_namespaceObject.createElement)(range_control, { 65051 __nextHasNoMarginBottom: __nextHasNoMarginBottom, 65052 className: "components-font-size-picker__custom-input", 65053 label: (0,external_wp_i18n_namespaceObject.__)('Custom Size'), 65054 hideLabelFromVision: true, 65055 value: valueQuantity, 65056 initialPosition: fallbackFontSize, 65057 withInputField: false, 65058 onChange: newValue => { 65059 if (newValue === undefined) { 65060 onChange?.(undefined); 65061 } else if (hasUnits) { 65062 onChange?.(newValue + (valueUnit !== null && valueUnit !== void 0 ? valueUnit : 'px')); 65063 } else { 65064 onChange?.(newValue); 65065 } 65066 }, 65067 min: 0, 65068 max: isValueUnitRelative ? 10 : 100, 65069 step: isValueUnitRelative ? 0.1 : 1 65070 }))), withReset && (0,external_wp_element_namespaceObject.createElement)(flex_item_component, null, (0,external_wp_element_namespaceObject.createElement)(Button, { 65071 disabled: value === undefined, 65072 onClick: () => { 65073 onChange?.(undefined); 65074 }, 65075 variant: "secondary", 65076 __next40pxDefaultSize: true, 65077 size: size !== '__unstable-large' ? 'small' : 'default' 65078 }, (0,external_wp_i18n_namespaceObject.__)('Reset')))))); 65079}; 65080const FontSizePicker = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedFontSizePicker); 65081/* harmony default export */ const font_size_picker = (FontSizePicker); 65082 65083;// CONCATENATED MODULE: ./packages/components/build-module/form-file-upload/index.js 65084 65085/** 65086 * WordPress dependencies 65087 */ 65088 65089 65090/** 65091 * Internal dependencies 65092 */ 65093
65094/** 65095 * FormFileUpload is a component that allows users to select files from their local device. 65096 * 65097 * ```jsx 65098 * import { FormFileUpload } from '@wordpress/components'; 65099 * 65100 * const MyFormFileUpload = () => ( 65101 * <FormFileUpload 65102 * accept="image/*" 65103 * onChange={ ( event ) => console.log( event.currentTarget.files ) } 65104 * > 65105 * Upload 65106 * </FormFileUpload> 65107 * ); 65108 * ``` 65109 */ 65110function FormFileUpload({ 65111 accept, 65112 children, 65113 multiple = false, 65114 onChange, 65115 onClick, 65116 render, 65117 ...props 65118}) { 65119 const ref = (0,external_wp_element_namespaceObject.useRef)(null); 65120 const openFileDialog = () => { 65121 ref.current?.click(); 65122 }; 65123 const ui = render ? render({ 65124 openFileDialog 65125 }) : (0,external_wp_element_namespaceObject.createElement)(build_module_button, { 65126 onClick: openFileDialog, 65127 ...props 65128 }, children); 65129 return (0,external_wp_element_namespaceObject.createElement)("div", { 65130 className: "components-form-file-upload" 65131 }, ui, (0,external_wp_element_namespaceObject.createElement)("input", { 65132 type: "file", 65133 ref: ref, 65134 multiple: multiple, 65135 style: { 65136 display: 'none' 65137 }, 65138 accept: accept, 65139 onChange: onChange, 65140 onClick: onClick, 65141 "data-testid": "form-file-upload-input" 65142 })); 65143} 65144/* harmony default export */ const form_file_upload = (FormFileUpload); 65145 65146;// CONCATENATED MODULE: ./packages/components/build-module/form-toggle/index.js 65147 65148/** 65149 * External dependencies 65150 */ 65151 65152 65153/** 65154 * Internal dependencies 65155 */ 65156 65157const form_toggle_noop = () => {}; 65158 65159/** 65160 * FormToggle switches a single setting on or off. 65161 * 65162 * ```jsx 65163 * import { FormToggle } from '@wordpress/components'; 65164 * import { useState } from '@wordpress/element'; 65165 * 65166 * const MyFormToggle = () => { 65167 * const [ isChecked, setChecked ] = useState( true ); 65168 * 65169 * return ( 65170 * <FormToggle 65171 * checked={ isChecked } 65172 * onChange={ () => setChecked( ( state ) => ! state ) } 65173 * /> 65174 * ); 65175 * }; 65176 * ``` 65177 */ 65178function FormToggle(props) { 65179 const { 65180 className, 65181 checked, 65182 id, 65183 disabled, 65184 onChange = form_toggle_noop, 65185 ...additionalProps 65186 } = props; 65187 const wrapperClasses = classnames_default()('components-form-toggle', className, { 65188 'is-checked': checked, 65189 'is-disabled': disabled 65190 }); 65191 return (0,external_wp_element_namespaceObject.createElement)("span", { 65192 className: wrapperClasses 65193 }, (0,external_wp_element_namespaceObject.createElement)("input", { 65194 className: "components-form-toggle__input", 65195 id: id, 65196 type: "checkbox", 65197 checked: checked, 65198 onChange: onChange, 65199 disabled: disabled, 65200 ...additionalProps 65201 }), (0,external_wp_element_namespaceObject.createElement)("span", { 65202 className: "components-form-toggle__track" 65203 }), (0,external_wp_element_namespaceObject.createElement)("span", { 65204 className: "components-form-toggle__thumb" 65205 })); 65206} 65207/* harmony default export */ const form_toggle = (FormToggle); 65208 65209;// CONCATENATED MODULE: ./packages/components/build-module/form-token-field/token.js 65210 65211/** 65212 * External dependencies 65213 */ 65214 65215 65216/** 65217 * WordPress dependencies 65218 */ 65219 65220 65221 65222 65223/** 65224 * Internal dependencies 65225 */ 65226 65227 65228const token_noop = () => {}; 65229function Token({ 65230 value, 65231 status, 65232 title, 65233 displayTransform, 65234 isBorderless = false, 65235 disabled = false, 65236 onClickRemove = token_noop, 65237 onMouseEnter, 65238 onMouseLeave, 65239 messages, 65240 termPosition, 65241 termsCount 65242}) { 65243 const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(Token); 65244 const tokenClasses = classnames_default()('components-form-token-field__token', { 65245 'is-error': 'error' === status, 65246 'is-success': 'success' === status, 65247 'is-validating': 'validating' === status, 65248 'is-borderless': isBorderless, 65249 'is-disabled': disabled 65250 }); 65251 const onClick = () => onClickRemove({ 65252 value 65253 }); 65254 const transformedValue = displayTransform(value); 65255 const termPositionAndCount = (0,external_wp_i18n_namespaceObject.sprintf)( /* translators: 1: term name, 2: term position in a set of terms, 3: total term set count. */ 65256 (0,external_wp_i18n_namespaceObject.__)('%1$s (%2$s of %3$s)'), transformedValue, termPosition, termsCount); 65257 return (0,external_wp_element_namespaceObject.createElement)("span", { 65258 className: tokenClasses, 65259 onMouseEnter: onMouseEnter, 65260 onMouseLeave: onMouseLeave, 65261 title: title 65262 }, (0,external_wp_element_namespaceObject.createElement)("span", { 65263 className: "components-form-token-field__token-text", 65264 id: `components-form-token-field__token-text-${instanceId}` 65265 }, (0,external_wp_element_namespaceObject.createElement)(visually_hidden_component, {
65266 as: "span" 65267 }, termPositionAndCount), (0,external_wp_element_namespaceObject.createElement)("span", { 65268 "aria-hidden": "true" 65269 }, transformedValue)), (0,external_wp_element_namespaceObject.createElement)(build_module_button, { 65270 className: "components-form-token-field__remove-token", 65271 icon: close_small, 65272 onClick: !disabled ? onClick : undefined, 65273 label: messages.remove, 65274 "aria-describedby": `components-form-token-field__token-text-${instanceId}` 65275 })); 65276} 65277 65278;// CONCATENATED MODULE: ./packages/components/build-module/form-token-field/styles.js 65279 65280/** 65281 * External dependencies 65282 */ 65283 65284 65285 65286/** 65287 * Internal dependencies 65288 */ 65289 65290 65291 65292const deprecatedPaddings = ({ 65293 __next40pxDefaultSize, 65294 hasTokens 65295}) => !__next40pxDefaultSize && /*#__PURE__*/emotion_react_browser_esm_css("padding-top:", space(hasTokens ? 1 : 0.5), ";padding-bottom:", space(hasTokens ? 1 : 0.5), ";" + ( true ? "" : 0), true ? "" : 0); 65296const TokensAndInputWrapperFlex = /*#__PURE__*/emotion_styled_base_browser_esm(flex_component, true ? { 65297 target: "ehq8nmi0" 65298} : 0)("padding:7px;", boxSizingReset, " ", deprecatedPaddings, ";" + ( true ? "" : 0)); 65299 65300;// CONCATENATED MODULE: ./packages/components/build-module/form-token-field/index.js 65301 65302/** 65303 * External dependencies 65304 */ 65305 65306/** 65307 * WordPress dependencies 65308 */ 65309 65310 65311 65312 65313 65314 65315/** 65316 * Internal dependencies 65317 */ 65318 65319 65320 65321 65322 65323 65324 65325 65326const form_token_field_identity = value => value; 65327 65328/** 65329 * A `FormTokenField` is a field similar to the tags and categories fields in the interim editor chrome, 65330 * or the "to" field in Mail on OS X. Tokens can be entered by typing them or selecting them from a list of suggested tokens. 65331 * 65332 * Up to one hundred suggestions that match what the user has typed so far will be shown from which the user can pick from (auto-complete). 65333 * Tokens are separated by the "," character. Suggestions can be selected with the up or down arrows and added with the tab or enter key. 65334 * 65335 * The `value` property is handled in a manner similar to controlled form components. 65336 * See [Forms](http://facebook.github.io/react/docs/forms.html) in the React Documentation for more information. 65337 */ 65338function FormTokenField(props) { 65339 const { 65340 autoCapitalize, 65341 autoComplete, 65342 maxLength, 65343 placeholder, 65344 label = (0,external_wp_i18n_namespaceObject.__)('Add item'), 65345 className, 65346 suggestions = [], 65347 maxSuggestions = 100, 65348 value = [], 65349 displayTransform = form_token_field_identity, 65350 saveTransform = token => token.trim(), 65351 onChange = () => {}, 65352 onInputChange = () => {}, 65353 onFocus = undefined, 65354 isBorderless = false, 65355 disabled = false, 65356 tokenizeOnSpace = false, 65357 messages = { 65358 added: (0,external_wp_i18n_namespaceObject.__)('Item added.'), 65359 removed: (0,external_wp_i18n_namespaceObject.__)('Item removed.'), 65360 remove: (0,external_wp_i18n_namespaceObject.__)('Remove item'), 65361 __experimentalInvalid: (0,external_wp_i18n_namespaceObject.__)('Invalid item') 65362 }, 65363 __experimentalRenderItem, 65364 __experimentalExpandOnFocus = false, 65365 __experimentalValidateInput = () => true, 65366 __experimentalShowHowTo = true, 65367 __next40pxDefaultSize = false, 65368 __experimentalAutoSelectFirstMatch = false, 65369 __nextHasNoMarginBottom = false, 65370 tokenizeOnBlur = false 65371 } = useDeprecated36pxDefaultSizeProp(props, 'wp.components.FormTokenField'); 65372 const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(FormTokenField); 65373 65374 // We reset to these initial values again in the onBlur 65375 const [incompleteTokenValue, setIncompleteTokenValue] = (0,external_wp_element_namespaceObject.useState)(''); 65376 const [inputOffsetFromEnd, setInputOffsetFromEnd] = (0,external_wp_element_namespaceObject.useState)(0); 65377 const [isActive, setIsActive] = (0,external_wp_element_namespaceObject.useState)(false); 65378 const [isExpanded, setIsExpanded] = (0,external_wp_element_namespaceObject.useState)(false); 65379 const [selectedSuggestionIndex, setSelectedSuggestionIndex] = (0,external_wp_element_namespaceObject.useState)(-1); 65380 const [selectedSuggestionScroll, setSelectedSuggestionScroll] = (0,external_wp_element_namespaceObject.useState)(false); 65381 const prevSuggestions = (0,external_wp_compose_namespaceObject.usePrevious)(suggestions); 65382 const prevValue = (0,external_wp_compose_namespaceObject.usePrevious)(value); 65383 const input = (0,external_wp_element_namespaceObject.useRef)(null); 65384 const tokensAndInput = (0,external_wp_element_namespaceObject.useRef)(null); 65385 const debouncedSpeak = (0,external_wp_compose_namespaceObject.useDebounce)(external_wp_a11y_namespaceObject.speak, 500); 65386 (0,external_wp_element_namespaceObject.useEffect)(() => { 65387 // Make sure to focus the input when the isActive state is true. 65388 if (isActive && !hasFocus()) { 65389 focus(); 65390 } 65391 }, [isActive]); 65392 (0,external_wp_element_namespaceObject.useEffect)(() => { 65393 const suggestionsDidUpdate = !external_wp_isShallowEqual_default()(suggestions, prevSuggestions || []); 65394 if (suggestionsDidUpdate || value !== prevValue) { 65395 updateSuggestions(suggestionsDidUpdate); 65396 } 65397 65398 // TODO: updateSuggestions() should first be refactored so its actual deps are clearer. 65399 // eslint-disable-next-line react-hooks/exhaustive-deps 65400 }, [suggestions, prevSuggestions, value, prevValue]); 65401 (0,external_wp_element_namespaceObject.useEffect)(() => { 65402 updateSuggestions(); 65403 // eslint-disable-next-line react-hooks/exhaustive-deps 65404 }, [incompleteTokenValue]); 65405 (0,external_wp_element_namespaceObject.useEffect)(() => { 65406 updateSuggestions(); 65407 // eslint-disable-next-line react-hooks/exhaustive-deps 65408 }, [__experimentalAutoSelectFirstMatch]); 65409 if (disabled && isActive) { 65410 setIsActive(false); 65411 setIncompleteTokenValue(''); 65412 } 65413 function focus() { 65414 input.current?.focus(); 65415 } 65416 function hasFocus() { 65417 return input.current === input.current?.ownerDocument.activeElement; 65418 } 65419 function onFocusHandler(event) { 65420 // If focus is on the input or on the container, set the isActive state to true. 65421 if (hasFocus() || event.target === tokensAndInput.current) { 65422 setIsActive(true); 65423 setIsExpanded(__experimentalExpandOnFocus || isExpanded); 65424 } else { 65425 /* 65426 * Otherwise, focus is on one of the token "remove" buttons and we 65427 * set the isActive state to false to prevent the input to be 65428 * re-focused, see componentDidUpdate(). 65429 */ 65430 setIsActive(false); 65431 } 65432 if ('function' === typeof onFocus) { 65433 onFocus(event); 65434 } 65435 } 65436 function onBlur() { 65437 if (inputHasValidValue() && __experimentalValidateInput(incompleteTokenValue)) { 65438 setIsActive(false);
65439 if (tokenizeOnBlur && inputHasValidValue()) { 65440 addNewToken(incompleteTokenValue); 65441 } 65442 } else { 65443 // Reset to initial state 65444 setIncompleteTokenValue(''); 65445 setInputOffsetFromEnd(0); 65446 setIsActive(false); 65447 setIsExpanded(false); 65448 setSelectedSuggestionIndex(-1); 65449 setSelectedSuggestionScroll(false); 65450 } 65451 } 65452 function onKeyDown(event) { 65453 let preventDefault = false; 65454 if (event.defaultPrevented || 65455 // Ignore keydowns from IMEs 65456 event.nativeEvent.isComposing || 65457 // Workaround for Mac Safari where the final Enter/Backspace of an IME composition 65458 // is `isComposing=false`, even though it's technically still part of the composition. 65459 // These can only be detected by keyCode. 65460 event.keyCode === 229) { 65461 return; 65462 } 65463 switch (event.key) { 65464 case 'Backspace': 65465 preventDefault = handleDeleteKey(deleteTokenBeforeInput); 65466 break; 65467 case 'Enter': 65468 preventDefault = addCurrentToken(); 65469 break; 65470 case 'ArrowLeft': 65471 preventDefault = handleLeftArrowKey(); 65472 break; 65473 case 'ArrowUp': 65474 preventDefault = handleUpArrowKey(); 65475 break; 65476 case 'ArrowRight': 65477 preventDefault = handleRightArrowKey(); 65478 break; 65479 case 'ArrowDown': 65480 preventDefault = handleDownArrowKey(); 65481 break; 65482 case 'Delete': 65483 preventDefault = handleDeleteKey(deleteTokenAfterInput); 65484 break; 65485 case 'Space': 65486 if (tokenizeOnSpace) { 65487 preventDefault = addCurrentToken(); 65488 } 65489 break; 65490 case 'Escape': 65491 preventDefault = handleEscapeKey(event); 65492 break; 65493 default: 65494 break; 65495 } 65496 if (preventDefault) { 65497 event.preventDefault(); 65498 } 65499 } 65500 function onKeyPress(event) { 65501 let preventDefault = false;
65502 switch (event.key) { 65503 case ',': 65504 preventDefault = handleCommaKey(); 65505 break; 65506 default: 65507 break; 65508 } 65509 if (preventDefault) { 65510 event.preventDefault(); 65511 } 65512 } 65513 function onContainerTouched(event) { 65514 // Prevent clicking/touching the tokensAndInput container from blurring 65515 // the input and adding the current token. 65516 if (event.target === tokensAndInput.current && isActive) { 65517 event.preventDefault(); 65518 } 65519 } 65520 function onTokenClickRemove(event) { 65521 deleteToken(event.value); 65522 focus(); 65523 } 65524 function onSuggestionHovered(suggestion) { 65525 const index = getMatchingSuggestions().indexOf(suggestion); 65526 if (index >= 0) { 65527 setSelectedSuggestionIndex(index); 65528 setSelectedSuggestionScroll(false); 65529 } 65530 } 65531 function onSuggestionSelected(suggestion) { 65532 addNewToken(suggestion); 65533 } 65534 function onInputChangeHandler(event) { 65535 const text = event.value; 65536 const separator = tokenizeOnSpace ? /[ ,\t]+/ : /[,\t]+/; 65537 const items = text.split(separator); 65538 const tokenValue = items[items.length - 1] || ''; 65539 if (items.length > 1) { 65540 addNewTokens(items.slice(0, -1)); 65541 } 65542 setIncompleteTokenValue(tokenValue); 65543 onInputChange(tokenValue); 65544 } 65545 function handleDeleteKey(_deleteToken) { 65546 let preventDefault = false;
65547 if (hasFocus() && isInputEmpty()) { 65548 _deleteToken(); 65549 preventDefault = true; 65550 } 65551 return preventDefault; 65552 } 65553 function handleLeftArrowKey() { 65554 let preventDefault = false; 65555 if (isInputEmpty()) { 65556 moveInputBeforePreviousToken(); 65557 preventDefault = true; 65558 } 65559 return preventDefault; 65560 } 65561 function handleRightArrowKey() { 65562 let preventDefault = false; 65563 if (isInputEmpty()) { 65564 moveInputAfterNextToken(); 65565 preventDefault = true; 65566 } 65567 return preventDefault; 65568 } 65569 function handleUpArrowKey() { 65570 setSelectedSuggestionIndex(index => { 65571 return (index === 0 ? getMatchingSuggestions(incompleteTokenValue, suggestions, value, maxSuggestions, saveTransform).length : index) - 1; 65572 }); 65573 setSelectedSuggestionScroll(true); 65574 return true; // PreventDefault. 65575 } 65576 65577 function handleDownArrowKey() { 65578 setSelectedSuggestionIndex(index => { 65579 return (index + 1) % getMatchingSuggestions(incompleteTokenValue, suggestions, value, maxSuggestions, saveTransform).length; 65580 }); 65581 setSelectedSuggestionScroll(true); 65582 return true; // PreventDefault. 65583 } 65584 65585 function handleEscapeKey(event) { 65586 if (event.target instanceof HTMLInputElement) { 65587 setIncompleteTokenValue(event.target.value); 65588 setIsExpanded(false); 65589 setSelectedSuggestionIndex(-1); 65590 setSelectedSuggestionScroll(false); 65591 } 65592 return true; // PreventDefault. 65593 } 65594 65595 function handleCommaKey() { 65596 if (inputHasValidValue()) { 65597 addNewToken(incompleteTokenValue); 65598 } 65599 return true; // PreventDefault. 65600 } 65601 65602 function moveInputToIndex(index) { 65603 setInputOffsetFromEnd(value.length - Math.max(index, -1) - 1); 65604 } 65605 function moveInputBeforePreviousToken() { 65606 setInputOffsetFromEnd(prevInputOffsetFromEnd => { 65607 return Math.min(prevInputOffsetFromEnd + 1, value.length); 65608 }); 65609 } 65610 function moveInputAfterNextToken() { 65611 setInputOffsetFromEnd(prevInputOffsetFromEnd => { 65612 return Math.max(prevInputOffsetFromEnd - 1, 0); 65613 }); 65614 } 65615 function deleteTokenBeforeInput() { 65616 const index = getIndexOfInput() - 1; 65617 if (index > -1) { 65618 deleteToken(value[index]); 65619 } 65620 } 65621 function deleteTokenAfterInput() { 65622 const index = getIndexOfInput(); 65623 if (index < value.length) { 65624 deleteToken(value[index]); 65625 // Update input offset since it's the offset from the last token. 65626 moveInputToIndex(index); 65627 } 65628 } 65629 function addCurrentToken() { 65630 let preventDefault = false;
65631 const selectedSuggestion = getSelectedSuggestion(); 65632 if (selectedSuggestion) { 65633 addNewToken(selectedSuggestion); 65634 preventDefault = true; 65635 } else if (inputHasValidValue()) { 65636 addNewToken(incompleteTokenValue); 65637 preventDefault = true; 65638 } 65639 return preventDefault; 65640 } 65641 function addNewTokens(tokens) { 65642 const tokensToAdd = [...new Set(tokens.map(saveTransform).filter(Boolean).filter(token => !valueContainsToken(token)))]; 65643 if (tokensToAdd.length > 0) { 65644 const newValue = [...value]; 65645 newValue.splice(getIndexOfInput(), 0, ...tokensToAdd); 65646 onChange(newValue); 65647 } 65648 } 65649 function addNewToken(token) { 65650 if (!__experimentalValidateInput(token)) { 65651 (0,external_wp_a11y_namespaceObject.speak)(messages.__experimentalInvalid, 'assertive'); 65652 return; 65653 } 65654 addNewTokens([token]); 65655 (0,external_wp_a11y_namespaceObject.speak)(messages.added, 'assertive'); 65656 setIncompleteTokenValue(''); 65657 setSelectedSuggestionIndex(-1); 65658 setSelectedSuggestionScroll(false); 65659 setIsExpanded(!__experimentalExpandOnFocus); 65660 if (isActive && !tokenizeOnBlur) { 65661 focus(); 65662 } 65663 } 65664 function deleteToken(token) { 65665 const newTokens = value.filter(item => { 65666 return getTokenValue(item) !== getTokenValue(token); 65667 }); 65668 onChange(newTokens); 65669 (0,external_wp_a11y_namespaceObject.speak)(messages.removed, 'assertive'); 65670 } 65671 function getTokenValue(token) { 65672 if ('object' === typeof token) { 65673 return token.value; 65674 } 65675 return token; 65676 } 65677 function getMatchingSuggestions(searchValue = incompleteTokenValue, _suggestions = suggestions, _value = value, _maxSuggestions = maxSuggestions, _saveTransform = saveTransform) { 65678 let match = _saveTransform(searchValue); 65679 const startsWithMatch = []; 65680 const containsMatch = []; 65681 const normalizedValue = _value.map(item => { 65682 if (typeof item === 'string') { 65683 return item; 65684 } 65685 return item.value; 65686 }); 65687 if (match.length === 0) { 65688 _suggestions = _suggestions.filter(suggestion => !normalizedValue.includes(suggestion)); 65689 } else { 65690 match = match.toLocaleLowerCase(); 65691 _suggestions.forEach(suggestion => { 65692 const index = suggestion.toLocaleLowerCase().indexOf(match); 65693 if (normalizedValue.indexOf(suggestion) === -1) { 65694 if (index === 0) { 65695 startsWithMatch.push(suggestion); 65696 } else if (index > 0) { 65697 containsMatch.push(suggestion); 65698 } 65699 } 65700 }); 65701 _suggestions = startsWithMatch.concat(containsMatch); 65702 } 65703 return _suggestions.slice(0, _maxSuggestions); 65704 } 65705 function getSelectedSuggestion() { 65706 if (selectedSuggestionIndex !== -1) { 65707 return getMatchingSuggestions()[selectedSuggestionIndex]; 65708 } 65709 return undefined; 65710 } 65711 function valueContainsToken(token) { 65712 return value.some(item => { 65713 return getTokenValue(token) === getTokenValue(item); 65714 }); 65715 } 65716 function getIndexOfInput() { 65717 return value.length - inputOffsetFromEnd; 65718 } 65719 function isInputEmpty() { 65720 return incompleteTokenValue.length === 0; 65721 } 65722 function inputHasValidValue() { 65723 return saveTransform(incompleteTokenValue).length > 0; 65724 } 65725 function updateSuggestions(resetSelectedSuggestion = true) { 65726 const inputHasMinimumChars = incompleteTokenValue.trim().length > 1; 65727 const matchingSuggestions = getMatchingSuggestions(incompleteTokenValue); 65728 const hasMatchingSuggestions = matchingSuggestions.length > 0; 65729 const shouldExpandIfFocuses = hasFocus() && __experimentalExpandOnFocus; 65730 setIsExpanded(shouldExpandIfFocuses || inputHasMinimumChars && hasMatchingSuggestions); 65731 if (resetSelectedSuggestion) { 65732 if (__experimentalAutoSelectFirstMatch && inputHasMinimumChars && hasMatchingSuggestions) { 65733 setSelectedSuggestionIndex(0); 65734 setSelectedSuggestionScroll(true); 65735 } else { 65736 setSelectedSuggestionIndex(-1); 65737 setSelectedSuggestionScroll(false); 65738 } 65739 } 65740 if (inputHasMinimumChars) { 65741 const message = hasMatchingSuggestions ? (0,external_wp_i18n_namespaceObject.sprintf)( /* translators: %d: number of results. */ 65742 (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.'); 65743 debouncedSpeak(message, 'assertive'); 65744 } 65745 } 65746 function renderTokensAndInput() { 65747 const components = value.map(renderToken); 65748 components.splice(getIndexOfInput(), 0, renderInput()); 65749 return components; 65750 } 65751 function renderToken(token, index, tokens) { 65752 const _value = getTokenValue(token); 65753 const status = typeof token !== 'string' ? token.status : undefined; 65754 const termPosition = index + 1; 65755 const termsCount = tokens.length; 65756 return (0,external_wp_element_namespaceObject.createElement)(flex_item_component, { 65757 key: 'token-' + _value 65758 }, (0,external_wp_element_namespaceObject.createElement)(Token, { 65759 value: _value, 65760 status: status, 65761 title: typeof token !== 'string' ? token.title : undefined, 65762 displayTransform: displayTransform, 65763 onClickRemove: onTokenClickRemove, 65764 isBorderless: typeof token !== 'string' && token.isBorderless || isBorderless, 65765 onMouseEnter: typeof token !== 'string' ? token.onMouseEnter : undefined, 65766 onMouseLeave: typeof token !== 'string' ? token.onMouseLeave : undefined, 65767 disabled: 'error' !== status && disabled, 65768 messages: messages, 65769 termsCount: termsCount, 65770 termPosition: termPosition 65771 })); 65772 } 65773 function renderInput() { 65774 const inputProps = { 65775 instanceId, 65776 autoCapitalize, 65777 autoComplete, 65778 placeholder: value.length === 0 ? placeholder : '', 65779 key: 'input', 65780 disabled, 65781 value: incompleteTokenValue, 65782 onBlur, 65783 isExpanded, 65784 selectedSuggestionIndex 65785 }; 65786 return (0,external_wp_element_namespaceObject.createElement)(token_input, { 65787 ...inputProps, 65788 onChange: !(maxLength && value.length >= maxLength) ? onInputChangeHandler : undefined, 65789 ref: input 65790 }); 65791 } 65792 const classes = classnames_default()(className, 'components-form-token-field__input-container', { 65793 'is-active': isActive, 65794 'is-disabled': disabled 65795 }); 65796 let tokenFieldProps = { 65797 className: 'components-form-token-field', 65798 tabIndex: -1 65799 }; 65800 const matchingSuggestions = getMatchingSuggestions(); 65801 if (!disabled) { 65802 tokenFieldProps = Object.assign({}, tokenFieldProps, { 65803 onKeyDown, 65804 onKeyPress, 65805 onFocus: onFocusHandler 65806 }); 65807 } 65808 65809 // Disable reason: There is no appropriate role which describes the 65810 // input container intended accessible usability. 65811 // TODO: Refactor click detection to use blur to stop propagation. 65812 /* eslint-disable jsx-a11y/no-static-element-interactions */ 65813 return (0,external_wp_element_namespaceObject.createElement)("div", { 65814 ...tokenFieldProps 65815 }, (0,external_wp_element_namespaceObject.createElement)(StyledLabel, { 65816 htmlFor: `components-form-token-input-${instanceId}`, 65817 className: "components-form-token-field__label" 65818 }, label), (0,external_wp_element_namespaceObject.createElement)("div", { 65819 ref: tokensAndInput, 65820 className: classes, 65821 tabIndex: -1, 65822 onMouseDown: onContainerTouched, 65823 onTouchStart: onContainerTouched 65824 }, (0,external_wp_element_namespaceObject.createElement)(TokensAndInputWrapperFlex, { 65825 justify: "flex-start", 65826 align: "center", 65827 gap: 1, 65828 wrap: true, 65829 __next40pxDefaultSize: __next40pxDefaultSize, 65830 hasTokens: !!value.length 65831 }, renderTokensAndInput()), isExpanded && (0,external_wp_element_namespaceObject.createElement)(suggestions_list, { 65832 instanceId: instanceId, 65833 match: saveTransform(incompleteTokenValue), 65834 displayTransform: displayTransform, 65835 suggestions: matchingSuggestions, 65836 selectedIndex: selectedSuggestionIndex, 65837 scrollIntoView: selectedSuggestionScroll, 65838 onHover: onSuggestionHovered, 65839 onSelect: onSuggestionSelected,
65840 __experimentalRenderItem: __experimentalRenderItem 65841 })), !__nextHasNoMarginBottom && (0,external_wp_element_namespaceObject.createElement)(spacer_component, { 65842 marginBottom: 2 65843 }), __experimentalShowHowTo && (0,external_wp_element_namespaceObject.createElement)(StyledHelp, { 65844 id: `components-form-token-suggestions-howto-${instanceId}`, 65845 className: "components-form-token-field__help", 65846 __nextHasNoMarginBottom: __nextHasNoMarginBottom 65847 }, 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.'))); 65848 /* eslint-enable jsx-a11y/no-static-element-interactions */ 65849} 65850 65851/* harmony default export */ const form_token_field = (FormTokenField); 65852 65853;// CONCATENATED MODULE: ./packages/components/build-module/guide/icons.js 65854 65855/** 65856 * WordPress dependencies 65857 */ 65858 65859const PageControlIcon = () => (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.SVG, { 65860 width: "8", 65861 height: "8", 65862 fill: "none", 65863 xmlns: "http://www.w3.org/2000/svg" 65864}, (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.Circle, { 65865 cx: "4", 65866 cy: "4", 65867 r: "4" 65868})); 65869 65870;// CONCATENATED MODULE: ./packages/components/build-module/guide/page-control.js 65871 65872/** 65873 * WordPress dependencies 65874 */ 65875 65876 65877/** 65878 * Internal dependencies 65879 */ 65880 65881 65882function PageControl({ 65883 currentPage, 65884 numberOfPages, 65885 setCurrentPage 65886}) { 65887 return (0,external_wp_element_namespaceObject.createElement)("ul", { 65888 className: "components-guide__page-control", 65889 "aria-label": (0,external_wp_i18n_namespaceObject.__)('Guide controls') 65890 }, Array.from({ 65891 length: numberOfPages 65892 }).map((_, page) => (0,external_wp_element_namespaceObject.createElement)("li", { 65893 key: page 65894 // Set aria-current="step" on the active page, see https://www.w3.org/TR/wai-aria-1.1/#aria-current 65895 , 65896 "aria-current": page === currentPage ? 'step' : undefined 65897 }, (0,external_wp_element_namespaceObject.createElement)(build_module_button, { 65898 key: page, 65899 icon: (0,external_wp_element_namespaceObject.createElement)(PageControlIcon, null), 65900 "aria-label": (0,external_wp_i18n_namespaceObject.sprintf)( /* translators: 1: current page number 2: total number of pages */ 65901 (0,external_wp_i18n_namespaceObject.__)('Page %1$d of %2$d'), page + 1, numberOfPages), 65902 onClick: () => setCurrentPage(page) 65903 })))); 65904} 65905 65906;// CONCATENATED MODULE: ./packages/components/build-module/guide/index.js 65907 65908/** 65909 * External dependencies 65910 */ 65911 65912 65913/** 65914 * WordPress dependencies 65915 */ 65916 65917 65918 65919 65920/** 65921 * Internal dependencies 65922 */ 65923 65924 65925 65926/** 65927 * `Guide` is a React component that renders a _user guide_ in a modal. The guide consists of several pages which the user can step through one by one. The guide is finished when the modal is closed or when the user clicks _Finish_ on the last page of the guide. 65928 * 65929 * ```jsx 65930 * function MyTutorial() { 65931 * const [ isOpen, setIsOpen ] = useState( true ); 65932 * 65933 * if ( ! isOpen ) { 65934 * return null; 65935 * } 65936 * 65937 * return ( 65938 * <Guide 65939 * onFinish={ () => setIsOpen( false ) } 65940 * pages={ [ 65941 * { 65942 * content: <p>Welcome to the ACME Store!</p>, 65943 * }, 65944 * { 65945 * image: <img src="https://acmestore.com/add-to-cart.png" />, 65946 * content: ( 65947 * <p> 65948 * Click <i>Add to Cart</i> to buy a product. 65949 * </p> 65950 * ), 65951 * }, 65952 * ] } 65953 * /> 65954 * ); 65955 * } 65956 * ``` 65957 */ 65958function Guide({ 65959 children, 65960 className, 65961 contentLabel, 65962 finishButtonText = (0,external_wp_i18n_namespaceObject.__)('Finish'), 65963 onFinish, 65964 pages = [] 65965}) { 65966 const ref = (0,external_wp_element_namespaceObject.useRef)(null); 65967 const [currentPage, setCurrentPage] = (0,external_wp_element_namespaceObject.useState)(0); 65968 (0,external_wp_element_namespaceObject.useEffect)(() => { 65969 // Place focus at the top of the guide on mount and when the page changes. 65970 const frame = ref.current?.querySelector('.components-guide'); 65971 if (frame instanceof HTMLElement) { 65972 frame.focus(); 65973 } 65974 }, [currentPage]); 65975 (0,external_wp_element_namespaceObject.useEffect)(() => { 65976 if (external_wp_element_namespaceObject.Children.count(children)) { 65977 external_wp_deprecated_default()('Passing children to <Guide>', { 65978 since: '5.5', 65979 alternative: 'the `pages` prop' 65980 }); 65981 } 65982 }, [children]); 65983 if (external_wp_element_namespaceObject.Children.count(children)) { 65984 var _Children$map; 65985 pages = (_Children$map = external_wp_element_namespaceObject.Children.map(children, child => ({ 65986 content: child 65987 }))) !== null && _Children$map !== void 0 ? _Children$map : []; 65988 } 65989 const canGoBack = currentPage > 0; 65990 const canGoForward = currentPage < pages.length - 1; 65991 const goBack = () => { 65992 if (canGoBack) { 65993 setCurrentPage(currentPage - 1); 65994 } 65995 }; 65996 const goForward = () => { 65997 if (canGoForward) { 65998 setCurrentPage(currentPage + 1); 65999 } 66000 }; 66001 if (pages.length === 0) { 66002 return null; 66003 } 66004 return (0,external_wp_element_namespaceObject.createElement)(modal, { 66005 className: classnames_default()('components-guide', className), 66006 contentLabel: contentLabel, 66007 isDismissible: pages.length > 1, 66008 onRequestClose: onFinish, 66009 onKeyDown: event => { 66010 if (event.code === 'ArrowLeft') { 66011 goBack();
66012 // Do not scroll the modal's contents. 66013 event.preventDefault(); 66014 } else if (event.code === 'ArrowRight') { 66015 goForward(); 66016 // Do not scroll the modal's contents. 66017 event.preventDefault(); 66018 } 66019 }, 66020 ref: ref 66021 }, (0,external_wp_element_namespaceObject.createElement)("div", { 66022 className: "components-guide__container" 66023 }, (0,external_wp_element_namespaceObject.createElement)("div", { 66024 className: "components-guide__page" 66025 }, pages[currentPage].image, pages.length > 1 && (0,external_wp_element_namespaceObject.createElement)(PageControl, { 66026 currentPage: currentPage, 66027 numberOfPages: pages.length, 66028 setCurrentPage: setCurrentPage 66029 }), pages[currentPage].content), (0,external_wp_element_namespaceObject.createElement)("div", { 66030 className: "components-guide__footer" 66031 }, canGoBack && (0,external_wp_element_namespaceObject.createElement)(build_module_button, { 66032 className: "components-guide__back-button", 66033 variant: "tertiary", 66034 onClick: goBack 66035 }, (0,external_wp_i18n_namespaceObject.__)('Previous')), canGoForward && (0,external_wp_element_namespaceObject.createElement)(build_module_button, { 66036 className: "components-guide__forward-button", 66037 variant: "primary", 66038 onClick: goForward 66039 }, (0,external_wp_i18n_namespaceObject.__)('Next')), !canGoForward && (0,external_wp_element_namespaceObject.createElement)(build_module_button, { 66040 className: "components-guide__finish-button", 66041 variant: "primary", 66042 onClick: onFinish 66043 }, finishButtonText)))); 66044} 66045/* harmony default export */ const guide = (Guide); 66046 66047;// CONCATENATED MODULE: ./packages/components/build-module/guide/page.js 66048 66049/** 66050 * WordPress dependencies 66051 */ 66052 66053 66054 66055/** 66056 * Internal dependencies 66057 */ 66058 66059function GuidePage(props) { 66060 (0,external_wp_element_namespaceObject.useEffect)(() => { 66061 external_wp_deprecated_default()('<GuidePage>', { 66062 since: '5.5', 66063 alternative: 'the `pages` prop in <Guide>' 66064 }); 66065 }, []); 66066 return (0,external_wp_element_namespaceObject.createElement)("div", { 66067 ...props 66068 }); 66069} 66070 66071;// CONCATENATED MODULE: ./packages/components/build-module/button/deprecated.js 66072 66073/** 66074 * External dependencies 66075 */ 66076 66077/** 66078 * WordPress dependencies 66079 */ 66080 66081 66082 66083/** 66084 * Internal dependencies 66085 */ 66086 66087function UnforwardedIconButton({ 66088 label, 66089 labelPosition, 66090 size, 66091 tooltip, 66092 ...props 66093}, ref) { 66094 external_wp_deprecated_default()('wp.components.IconButton', { 66095 since: '5.4', 66096 alternative: 'wp.components.Button', 66097 version: '6.2' 66098 }); 66099 return (0,external_wp_element_namespaceObject.createElement)(build_module_button, { 66100 ...props, 66101 ref: ref, 66102 tooltipPosition: labelPosition, 66103 iconSize: size, 66104 showTooltip: tooltip !== undefined ? !!tooltip : undefined, 66105 label: tooltip || label 66106 }); 66107} 66108/* harmony default export */ const deprecated = ((0,external_wp_element_namespaceObject.forwardRef)(UnforwardedIconButton)); 66109 66110;// CONCATENATED MODULE: ./packages/components/build-module/item-group/item/hook.js 66111/** 66112 * External dependencies 66113 */ 66114 66115/** 66116 * WordPress dependencies 66117 */ 66118 66119 66120/** 66121 * Internal dependencies 66122 */ 66123 66124 66125 66126 66127 66128function hook_useItem(props) { 66129 const { 66130 as: asProp, 66131 className, 66132 onClick, 66133 role = 'listitem', 66134 size: sizeProp, 66135 ...otherProps 66136 } = useContextSystem(props, 'Item'); 66137 const { 66138 spacedAround, 66139 size: contextSize 66140 } = useItemGroupContext(); 66141 const size = sizeProp || contextSize; 66142 const as = asProp || (typeof onClick !== 'undefined' ? 'button' : 'div'); 66143 const cx = useCx(); 66144 const classes = (0,external_wp_element_namespaceObject.useMemo)(() => cx((as === 'button' || as === 'a') && unstyledButton(as), itemSizes[size] || itemSizes.medium, item, spacedAround && styles_spacedAround, className), [as, className, cx, size, spacedAround]); 66145 const wrapperClassName = cx(itemWrapper); 66146 return { 66147 as, 66148 className: classes, 66149 onClick, 66150 wrapperClassName, 66151 role, 66152 ...otherProps 66153 }; 66154} 66155 66156;// CONCATENATED MODULE: ./packages/components/build-module/item-group/item/component.js 66157 66158/** 66159 * External dependencies 66160 */ 66161 66162/** 66163 * Internal dependencies 66164 */ 66165 66166 66167 66168 66169function UnconnectedItem(props, forwardedRef) { 66170 const { 66171 role, 66172 wrapperClassName, 66173 ...otherProps 66174 } = hook_useItem(props); 66175 return (0,external_wp_element_namespaceObject.createElement)("div", { 66176 role: role, 66177 className: wrapperClassName 66178 }, (0,external_wp_element_namespaceObject.createElement)(component, { 66179 ...otherProps, 66180 ref: forwardedRef 66181 })); 66182} 66183 66184/** 66185 * `Item` is used in combination with `ItemGroup` to display a list of items 66186 * grouped and styled together. 66187 * 66188 * ```jsx 66189 * import { 66190 * __experimentalItemGroup as ItemGroup, 66191 * __experimentalItem as Item, 66192 * } from '@wordpress/components'; 66193 * 66194 * function Example() { 66195 * return ( 66196 * <ItemGroup> 66197 * <Item>Code</Item> 66198 * <Item>is</Item> 66199 * <Item>Poetry</Item> 66200 * </ItemGroup> 66201 * ); 66202 * } 66203 * ``` 66204 */ 66205const component_Item = contextConnect(UnconnectedItem, 'Item'); 66206/* harmony default export */ const item_component = (component_Item); 66207 66208;// CONCATENATED MODULE: ./packages/components/build-module/input-control/input-prefix-wrapper.js 66209 66210/** 66211 * External dependencies 66212 */ 66213
66214/** 66215 * Internal dependencies 66216 */ 66217 66218 66219function UnconnectedInputControlPrefixWrapper(props, forwardedRef) { 66220 const derivedProps = useContextSystem(props, 'InputControlPrefixWrapper'); 66221 return (0,external_wp_element_namespaceObject.createElement)(spacer_component, { 66222 marginBottom: 0, 66223 ...derivedProps, 66224 ref: forwardedRef 66225 }); 66226} 66227 66228/** 66229 * A convenience wrapper for the `prefix` when you want to apply 66230 * standard padding in accordance with the size variant. 66231 * 66232 * ```jsx 66233 * import { 66234 * __experimentalInputControl as InputControl, 66235 * __experimentalInputControlPrefixWrapper as InputControlPrefixWrapper, 66236 * } from '@wordpress/components'; 66237 * 66238 * <InputControl 66239 * prefix={<InputControlPrefixWrapper>@</InputControlPrefixWrapper>} 66240 * /> 66241 * ``` 66242 */ 66243const InputControlPrefixWrapper = contextConnect(UnconnectedInputControlPrefixWrapper, 'InputControlPrefixWrapper'); 66244/* harmony default export */ const input_prefix_wrapper = (InputControlPrefixWrapper); 66245 66246;// CONCATENATED MODULE: ./packages/components/build-module/keyboard-shortcuts/index.js 66247 66248/** 66249 * WordPress dependencies 66250 */ 66251 66252 66253 66254/** 66255 * Internal dependencies 66256 */ 66257 66258function KeyboardShortcut({ 66259 target, 66260 callback, 66261 shortcut, 66262 bindGlobal, 66263 eventName 66264}) { 66265 (0,external_wp_compose_namespaceObject.useKeyboardShortcut)(shortcut, callback, { 66266 bindGlobal, 66267 target, 66268 eventName 66269 }); 66270 return null; 66271} 66272 66273/** 66274 * `KeyboardShortcuts` is a component which handles keyboard sequences during the lifetime of the rendering element. 66275 * 66276 * When passed children, it will capture key events which occur on or within the children. If no children are passed, events are captured on the document. 66277 * 66278 * It uses the [Mousetrap](https://craig.is/killing/mice) library to implement keyboard sequence bindings. 66279 * 66280 * ```jsx 66281 * import { KeyboardShortcuts } from '@wordpress/components'; 66282 * import { useState } from '@wordpress/element'; 66283 * 66284 * const MyKeyboardShortcuts = () => { 66285 * const [ isAllSelected, setIsAllSelected ] = useState( false ); 66286 * const selectAll = () => { 66287 * setIsAllSelected( true ); 66288 * }; 66289 * 66290 * return ( 66291 * <div> 66292 * <KeyboardShortcuts 66293 * shortcuts={ { 66294 * 'mod+a': selectAll, 66295 * } } 66296 * /> 66297 * [cmd/ctrl + A] Combination pressed? { isAllSelected ? 'Yes' : 'No' } 66298 * </div> 66299 * ); 66300 * }; 66301 * ``` 66302 */ 66303function KeyboardShortcuts({ 66304 children, 66305 shortcuts, 66306 bindGlobal, 66307 eventName 66308}) { 66309 const target = (0,external_wp_element_namespaceObject.useRef)(null); 66310 const element = Object.entries(shortcuts !== null && shortcuts !== void 0 ? shortcuts : {}).map(([shortcut, callback]) => (0,external_wp_element_namespaceObject.createElement)(KeyboardShortcut, { 66311 key: shortcut, 66312 shortcut: shortcut, 66313 callback: callback, 66314 bindGlobal: bindGlobal, 66315 eventName: eventName, 66316 target: target 66317 })); 66318 66319 // Render as non-visual if there are no children pressed. Keyboard 66320 // events will be bound to the document instead. 66321 if (!external_wp_element_namespaceObject.Children.count(children)) { 66322 return (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, element); 66323 } 66324 return (0,external_wp_element_namespaceObject.createElement)("div", { 66325 ref: target 66326 }, element, children); 66327} 66328/* harmony default export */ const keyboard_shortcuts = (KeyboardShortcuts); 66329 66330;// CONCATENATED MODULE: ./packages/components/build-module/menu-group/index.js 66331 66332/** 66333 * External dependencies 66334 */ 66335 66336 66337/** 66338 * WordPress dependencies 66339 */ 66340 66341 66342 66343/** 66344 * Internal dependencies 66345 */ 66346 66347/** 66348 * `MenuGroup` wraps a series of related `MenuItem` components into a common 66349 * section. 66350 * 66351 * ```jsx 66352 * import { MenuGroup, MenuItem } from '@wordpress/components'; 66353 * 66354 * const MyMenuGroup = () => ( 66355 * <MenuGroup label="Settings"> 66356 * <MenuItem>Setting 1</MenuItem> 66357 * <MenuItem>Setting 2</MenuItem> 66358 * </MenuGroup> 66359 * ); 66360 * ``` 66361 */ 66362function MenuGroup(props) { 66363 const { 66364 children, 66365 className = '', 66366 label, 66367 hideSeparator 66368 } = props; 66369 const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(MenuGroup); 66370 if (!external_wp_element_namespaceObject.Children.count(children)) { 66371 return null; 66372 } 66373 const labelId = `components-menu-group-label-${instanceId}`; 66374 const classNames = classnames_default()(className, 'components-menu-group', { 66375 'has-hidden-separator': hideSeparator 66376 }); 66377 return (0,external_wp_element_namespaceObject.createElement)("div", { 66378 className: classNames 66379 }, label && (0,external_wp_element_namespaceObject.createElement)("div", { 66380 className: "components-menu-group__label", 66381 id: labelId, 66382 "aria-hidden": "true" 66383 }, label), (0,external_wp_element_namespaceObject.createElement)("div", { 66384 role: "group", 66385 "aria-labelledby": label ? labelId : undefined 66386 }, children)); 66387} 66388/* harmony default export */ const menu_group = (MenuGroup); 66389 66390;// CONCATENATED MODULE: ./packages/components/build-module/menu-item/index.js 66391 66392/** 66393 * External dependencies 66394 */ 66395 66396 66397 66398/** 66399 * WordPress dependencies 66400 */ 66401 66402 66403/** 66404 * Internal dependencies 66405 */ 66406 66407 66408 66409function UnforwardedMenuItem(props, ref) { 66410 let { 66411 children, 66412 info, 66413 className, 66414 icon, 66415 iconPosition = 'right', 66416 shortcut, 66417 isSelected, 66418 role = 'menuitem', 66419 suffix, 66420 ...buttonProps 66421 } = props; 66422 className = classnames_default()('components-menu-item__button', className); 66423 if (info) { 66424 children = (0,external_wp_element_namespaceObject.createElement)("span", { 66425 className: "components-menu-item__info-wrapper" 66426 }, (0,external_wp_element_namespaceObject.createElement)("span", { 66427 className: "components-menu-item__item" 66428 }, children), (0,external_wp_element_namespaceObject.createElement)("span", { 66429 className: "components-menu-item__info" 66430 }, info)); 66431 } 66432 if (icon && typeof icon !== 'string') { 66433 icon = (0,external_wp_element_namespaceObject.cloneElement)(icon, { 66434 className: classnames_default()('components-menu-items__item-icon', { 66435 'has-icon-right': iconPosition === 'right' 66436 }) 66437 }); 66438 } 66439 return (0,external_wp_element_namespaceObject.createElement)(build_module_button, { 66440 ref: ref 66441 // Make sure aria-checked matches spec https://www.w3.org/TR/wai-aria-1.1/#aria-checked 66442 , 66443 "aria-checked": role === 'menuitemcheckbox' || role === 'menuitemradio' ? isSelected : undefined, 66444 role: role, 66445 icon: iconPosition === 'left' ? icon : undefined, 66446 className: className, 66447 ...buttonProps 66448 }, (0,external_wp_element_namespaceObject.createElement)("span", { 66449 className: "components-menu-item__item" 66450 }, children), !suffix && (0,external_wp_element_namespaceObject.createElement)(build_module_shortcut, { 66451 className: "components-menu-item__shortcut", 66452 shortcut: shortcut 66453 }), !suffix && icon && iconPosition === 'right' && (0,external_wp_element_namespaceObject.createElement)(build_module_icon, { 66454 icon: icon 66455 }), suffix); 66456} 66457 66458/** 66459 * MenuItem is a component which renders a button intended to be used in combination with the `DropdownMenu` component. 66460 * 66461 * ```jsx 66462 * import { MenuItem } from '@wordpress/components';
66463 * import { useState } from '@wordpress/element'; 66464 * 66465 * const MyMenuItem = () => { 66466 * const [ isActive, setIsActive ] = useState( true ); 66467 * 66468 * return ( 66469 * <MenuItem 66470 * icon={ isActive ? 'yes' : 'no' } 66471 * isSelected={ isActive } 66472 * role="menuitemcheckbox" 66473 * onClick={ () => setIsActive( ( state ) => ! state ) } 66474 * > 66475 * Toggle 66476 * </MenuItem> 66477 * ); 66478 * }; 66479 * ``` 66480 */ 66481const MenuItem = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedMenuItem); 66482/* harmony default export */ const menu_item = (MenuItem); 66483 66484;// CONCATENATED MODULE: ./packages/components/build-module/menu-items-choice/index.js 66485 66486/** 66487 * WordPress dependencies 66488 */ 66489 66490 66491/** 66492 * Internal dependencies 66493 */ 66494 66495const menu_items_choice_noop = () => {}; 66496 66497/** 66498 * `MenuItemsChoice` functions similarly to a set of `MenuItem`s, but allows the user to select one option from a set of multiple choices. 66499 * 66500 * 66501 * ```jsx 66502 * import { MenuGroup, MenuItemsChoice } from '@wordpress/components'; 66503 * import { useState } from '@wordpress/element'; 66504 * 66505 * const MyMenuItemsChoice = () => { 66506 * const [ mode, setMode ] = useState( 'visual' ); 66507 * const choices = [ 66508 * { 66509 * value: 'visual', 66510 * label: 'Visual editor', 66511 * }, 66512 * { 66513 * value: 'text', 66514 * label: 'Code editor', 66515 * }, 66516 * ]; 66517 * 66518 * return ( 66519 * <MenuGroup label="Editor"> 66520 * <MenuItemsChoice 66521 * choices={ choices } 66522 * value={ mode } 66523 * onSelect={ ( newMode ) => setMode( newMode ) } 66524 * /> 66525 * </MenuGroup> 66526 * ); 66527 * }; 66528 * ``` 66529 */ 66530function MenuItemsChoice({ 66531 choices = [], 66532 onHover = menu_items_choice_noop, 66533 onSelect, 66534 value 66535}) { 66536 return (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, choices.map(item => { 66537 const isSelected = value === item.value; 66538 return (0,external_wp_element_namespaceObject.createElement)(menu_item, { 66539 key: item.value, 66540 role: "menuitemradio", 66541 disabled: item.disabled, 66542 icon: isSelected ? library_check : null, 66543 info: item.info, 66544 isSelected: isSelected, 66545 shortcut: item.shortcut, 66546 className: "components-menu-items-choice", 66547 onClick: () => { 66548 if (!isSelected) { 66549 onSelect(item.value); 66550 } 66551 }, 66552 onMouseEnter: () => onHover(item.value), 66553 onMouseLeave: () => onHover(null), 66554 "aria-label": item['aria-label'] 66555 }, item.label); 66556 })); 66557} 66558/* harmony default export */ const menu_items_choice = (MenuItemsChoice); 66559 66560;// CONCATENATED MODULE: ./packages/components/build-module/navigable-container/tabbable.js 66561 66562/** 66563 * External dependencies 66564 */ 66565 66566/** 66567 * WordPress dependencies 66568 */ 66569 66570 66571/** 66572 * Internal dependencies 66573 */ 66574 66575function UnforwardedTabbableContainer({ 66576 eventToOffset, 66577 ...props 66578}, ref) { 66579 const innerEventToOffset = evt => { 66580 const { 66581 code, 66582 shiftKey 66583 } = evt; 66584 if ('Tab' === code) { 66585 return shiftKey ? -1 : 1; 66586 } 66587 66588 // Allow custom handling of keys besides Tab. 66589 // 66590 // By default, TabbableContainer will move focus forward on Tab and 66591 // backward on Shift+Tab. The handler below will be used for all other 66592 // events. The semantics for `eventToOffset`'s return 66593 // values are the following: 66594 // 66595 // - +1: move focus forward 66596 // - -1: move focus backward 66597 // - 0: don't move focus, but acknowledge event and thus stop it 66598 // - undefined: do nothing, let the event propagate. 66599 if (eventToOffset) { 66600 return eventToOffset(evt); 66601 } 66602 return undefined; 66603 }; 66604 return (0,external_wp_element_namespaceObject.createElement)(container, { 66605 ref: ref, 66606 stopNavigationEvents: true, 66607 onlyBrowserTabstops: true, 66608 eventToOffset: innerEventToOffset, 66609 ...props 66610 }); 66611} 66612 66613/** 66614 * A container for tabbable elements. 66615 * 66616 * ```jsx 66617 * import { 66618 * TabbableContainer, 66619 * Button, 66620 * } from '@wordpress/components'; 66621 * 66622 * function onNavigate( index, target ) { 66623 * console.log( `Navigates to ${ index }`, target ); 66624 * } 66625 * 66626 * const MyTabbableContainer = () => ( 66627 * <div> 66628 * <span>Tabbable Container:</span> 66629 * <TabbableContainer onNavigate={ onNavigate }> 66630 * <Button variant="secondary" tabIndex="0"> 66631 * Section 1 66632 * </Button> 66633 * <Button variant="secondary" tabIndex="0"> 66634 * Section 2 66635 * </Button> 66636 * <Button variant="secondary" tabIndex="0"> 66637 * Section 3 66638 * </Button> 66639 * <Button variant="secondary" tabIndex="0"> 66640 * Section 4 66641 * </Button> 66642 * </TabbableContainer> 66643 * </div> 66644 * ); 66645 * ``` 66646 */ 66647const TabbableContainer = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedTabbableContainer); 66648/* harmony default export */ const tabbable = (TabbableContainer); 66649 66650;// CONCATENATED MODULE: ./packages/components/build-module/navigation/constants.js 66651const ROOT_MENU = 'root'; 66652const SEARCH_FOCUS_DELAY = 100; 66653 66654;// CONCATENATED MODULE: ./packages/components/build-module/navigation/context.js 66655/** 66656 * WordPress dependencies 66657 */ 66658 66659 66660/** 66661 * Internal dependencies 66662 */ 66663 66664const context_noop = () => {}; 66665const defaultIsEmpty = () => false;
66666const defaultGetter = () => undefined; 66667const NavigationContext = (0,external_wp_element_namespaceObject.createContext)({ 66668 activeItem: undefined, 66669 activeMenu: ROOT_MENU, 66670 setActiveMenu: context_noop, 66671 navigationTree: { 66672 items: {}, 66673 getItem: defaultGetter, 66674 addItem: context_noop, 66675 removeItem: context_noop, 66676 menus: {}, 66677 getMenu: defaultGetter, 66678 addMenu: context_noop, 66679 removeMenu: context_noop, 66680 childMenu: {}, 66681 traverseMenu: context_noop, 66682 isMenuEmpty: defaultIsEmpty 66683 } 66684}); 66685const useNavigationContext = () => (0,external_wp_element_namespaceObject.useContext)(NavigationContext); 66686 66687;// CONCATENATED MODULE: ./packages/icons/build-module/library/search.js 66688 66689/** 66690 * WordPress dependencies 66691 */ 66692 66693const search = (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.SVG, { 66694 xmlns: "http://www.w3.org/2000/svg", 66695 viewBox: "0 0 24 24" 66696}, (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.Path, { 66697 d: "M13 5c-3.3 0-6 2.7-6 6 0 1.4.5 2.7 1.3 3.7l-3.8 3.8 1.1 1.1 3.8-3.8c1 .8 2.3 1.3 3.7 1.3 3.3 0 6-2.7 6-6S16.3 5 13 5zm0 10.5c-2.5 0-4.5-2-4.5-4.5s2-4.5 4.5-4.5 4.5 2 4.5 4.5-2 4.5-4.5 4.5z" 66698})); 66699/* harmony default export */ const library_search = (search); 66700 66701;// CONCATENATED MODULE: ./packages/components/build-module/search-control/index.js 66702 66703/** 66704 * External dependencies 66705 */ 66706 66707 66708/** 66709 * WordPress dependencies 66710 */ 66711 66712 66713 66714 66715 66716/** 66717 * Internal dependencies 66718 */ 66719 66720 66721function UnforwardedSearchControl({ 66722 __nextHasNoMarginBottom, 66723 __next40pxDefaultSize = false, 66724 className, 66725 onChange, 66726 onKeyDown, 66727 value, 66728 label, 66729 placeholder = (0,external_wp_i18n_namespaceObject.__)('Search'), 66730 hideLabelFromVision = true, 66731 help, 66732 onClose, 66733 size = 'default', 66734 ...restProps 66735}, forwardedRef) { 66736 const searchRef = (0,external_wp_element_namespaceObject.useRef)(); 66737 const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(SearchControl); 66738 const id = `components-search-control-${instanceId}`; 66739 const renderRightButton = () => { 66740 if (onClose) { 66741 return (0,external_wp_element_namespaceObject.createElement)(build_module_button, { 66742 __next40pxDefaultSize: __next40pxDefaultSize, 66743 icon: close_small, 66744 label: (0,external_wp_i18n_namespaceObject.__)('Close search'), 66745 onClick: onClose, 66746 size: size 66747 }); 66748 } 66749 if (!!value) { 66750 return (0,external_wp_element_namespaceObject.createElement)(build_module_button, { 66751 __next40pxDefaultSize: __next40pxDefaultSize, 66752 icon: close_small, 66753 label: (0,external_wp_i18n_namespaceObject.__)('Reset search'), 66754 onClick: () => { 66755 onChange(''); 66756 searchRef.current?.focus(); 66757 }, 66758 size: size 66759 }); 66760 } 66761 return (0,external_wp_element_namespaceObject.createElement)(icons_build_module_icon, { 66762 icon: library_search 66763 }); 66764 }; 66765 return (0,external_wp_element_namespaceObject.createElement)(base_control, { 66766 __nextHasNoMarginBottom: __nextHasNoMarginBottom, 66767 label: label, 66768 id: id, 66769 hideLabelFromVision: hideLabelFromVision, 66770 help: help, 66771 className: classnames_default()(className, 'components-search-control', { 66772 'is-next-40px-default-size': __next40pxDefaultSize, 66773 'is-size-compact': size === 'compact' 66774 }) 66775 }, (0,external_wp_element_namespaceObject.createElement)("div", { 66776 className: "components-search-control__input-wrapper" 66777 }, (0,external_wp_element_namespaceObject.createElement)("input", { 66778 ...restProps, 66779 ref: (0,external_wp_compose_namespaceObject.useMergeRefs)([searchRef, forwardedRef]), 66780 className: "components-search-control__input", 66781 id: id, 66782 type: "search", 66783 placeholder: placeholder, 66784 onChange: event => onChange(event.target.value), 66785 onKeyDown: onKeyDown, 66786 autoComplete: "off", 66787 value: value || '' 66788 }), (0,external_wp_element_namespaceObject.createElement)("div", { 66789 className: "components-search-control__icon" 66790 }, renderRightButton()))); 66791} 66792 66793/** 66794 * SearchControl components let users display a search control. 66795 * 66796 * ```jsx 66797 * import { SearchControl } from '@wordpress/components';
66798 * import { useState } from '@wordpress/element'; 66799 * 66800 * function MySearchControl( { className, setState } ) { 66801 * const [ searchInput, setSearchInput ] = useState( '' ); 66802 * 66803 * return ( 66804 * <SearchControl 66805 * value={ searchInput } 66806 * onChange={ setSearchInput } 66807 * /> 66808 * ); 66809 * } 66810 * ``` 66811 */ 66812const SearchControl = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedSearchControl); 66813/* harmony default export */ const search_control = (SearchControl); 66814 66815;// CONCATENATED MODULE: ./packages/components/build-module/navigation/styles/navigation-styles.js 66816 66817function 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)."; } 66818/** 66819 * External dependencies 66820 */ 66821 66822/** 66823 * WordPress dependencies 66824 */ 66825 66826 66827/** 66828 * Internal dependencies 66829 */ 66830 66831 66832 66833 66834 66835 66836 66837const NavigationUI = emotion_styled_base_browser_esm("div", true ? { 66838 target: "eeiismy11" 66839} : 0)("width:100%;box-sizing:border-box;padding:0 ", space(4), ";overflow:hidden;" + ( true ? "" : 0)); 66840const MenuUI = emotion_styled_base_browser_esm("div", true ? { 66841 target: "eeiismy10" 66842} : 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)); 66843const MenuBackButtonUI = /*#__PURE__*/emotion_styled_base_browser_esm(build_module_button, true ? { 66844 target: "eeiismy9" 66845} : 0)( true ? { 66846 name: "26l0q2", 66847 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;}}" 66848} : 0); 66849const MenuTitleUI = emotion_styled_base_browser_esm("div", true ? { 66850 target: "eeiismy8" 66851} : 0)( true ? { 66852 name: "1aubja5", 66853 styles: "overflow:hidden;width:100%" 66854} : 0); 66855const MenuTitleActionsUI = emotion_styled_base_browser_esm("span", true ? { 66856 target: "eeiismy7" 66857} : 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)); 66858const MenuTitleSearchUI = /*#__PURE__*/emotion_styled_base_browser_esm(search_control, true ? { 66859 target: "eeiismy6" 66860} : 0)( true ? { 66861 name: "za3n3e", 66862 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;}" 66863} : 0); 66864const GroupTitleUI = /*#__PURE__*/emotion_styled_base_browser_esm(heading_component, true ? { 66865 target: "eeiismy5" 66866} : 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)); 66867const ItemBaseUI = emotion_styled_base_browser_esm("li", true ? { 66868 target: "eeiismy4" 66869} : 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({ 66870 textAlign: 'left' 66871}, { 66872 textAlign: 'right' 66873}), " &:hover,&:focus:not( [aria-disabled='true'] ):active,&:active:not( [aria-disabled='true'] ):active{color:inherit;opacity:1;}}&.is-active{background-color:", COLORS.theme.accent, ";color:", COLORS.white, ";>button,>a{color:", COLORS.white, ";opacity:1;}}>svg path{color:", COLORS.gray[600], ";}" + ( true ? "" : 0)); 66874const ItemUI = emotion_styled_base_browser_esm("div", true ? { 66875 target: "eeiismy3" 66876} : 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)); 66877const ItemIconUI = emotion_styled_base_browser_esm("span", true ? { 66878 target: "eeiismy2" 66879} : 0)("display:flex;margin-right:", space(2), ";" + ( true ? "" : 0)); 66880const ItemBadgeUI = emotion_styled_base_browser_esm("span", true ? { 66881 target: "eeiismy1" 66882} : 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)); 66883const ItemTitleUI = /*#__PURE__*/emotion_styled_base_browser_esm(text_component, true ? { 66884 target: "eeiismy0" 66885} : 0)(() => (0,external_wp_i18n_namespaceObject.isRTL)() ? 'margin-left: auto;' : 'margin-right: auto;', " font-size:14px;line-height:20px;color:inherit;" + ( true ? "" : 0)); 66886 66887;// CONCATENATED MODULE: ./packages/components/build-module/navigation/use-navigation-tree-nodes.js 66888/** 66889 * WordPress dependencies 66890 */ 66891 66892function useNavigationTreeNodes() { 66893 const [nodes, setNodes] = (0,external_wp_element_namespaceObject.useState)({}); 66894 const getNode = key => nodes[key]; 66895 const addNode = (key, value) => { 66896 const { 66897 children, 66898 ...newNode 66899 } = value; 66900 return setNodes(original => ({ 66901 ...original, 66902 [key]: newNode 66903 })); 66904 }; 66905 const removeNode = key => { 66906 return setNodes(original => { 66907 const { 66908 [key]: removedNode, 66909 ...remainingNodes 66910 } = original; 66911 return remainingNodes; 66912 }); 66913 }; 66914 return { 66915 nodes, 66916 getNode, 66917 addNode, 66918 removeNode 66919 }; 66920} 66921 66922;// CONCATENATED MODULE: ./packages/components/build-module/navigation/use-create-navigation-tree.js 66923/** 66924 * WordPress dependencies 66925 */ 66926 66927 66928/** 66929 * Internal dependencies 66930 */ 66931 66932const useCreateNavigationTree = () => { 66933 const { 66934 nodes: items, 66935 getNode: getItem, 66936 addNode: addItem, 66937 removeNode: removeItem 66938 } = useNavigationTreeNodes(); 66939 const { 66940 nodes: menus, 66941 getNode: getMenu, 66942 addNode: addMenu, 66943 removeNode: removeMenu 66944 } = useNavigationTreeNodes(); 66945 66946 /** 66947 * Stores direct nested menus of menus 66948 * This makes it easy to traverse menu tree 66949 * 66950 * Key is the menu prop of the menu 66951 * Value is an array of menu keys 66952 */ 66953 const [childMenu, setChildMenu] = (0,external_wp_element_namespaceObject.useState)({}); 66954 const getChildMenu = menu => childMenu[menu] || []; 66955 const traverseMenu = (startMenu, callback) => { 66956 const visited = []; 66957 let queue = [startMenu];
66958 let current; 66959 while (queue.length > 0) { 66960 // Type cast to string is safe because of the `length > 0` check above. 66961 current = getMenu(queue.shift()); 66962 if (!current || visited.includes(current.menu)) { 66963 continue; 66964 } 66965 visited.push(current.menu); 66966 queue = [...queue, ...getChildMenu(current.menu)]; 66967 if (callback(current) === false) { 66968 break; 66969 } 66970 } 66971 }; 66972 const isMenuEmpty = menuToCheck => { 66973 let isEmpty = true; 66974 traverseMenu(menuToCheck, current => { 66975 if (!current.isEmpty) { 66976 isEmpty = false; 66977 return false; 66978 } 66979 return undefined; 66980 }); 66981 return isEmpty; 66982 }; 66983 return { 66984 items, 66985 getItem, 66986 addItem, 66987 removeItem, 66988 menus, 66989 getMenu, 66990 addMenu: (key, value) => { 66991 setChildMenu(state => { 66992 const newState = { 66993 ...state 66994 }; 66995 if (!value.parentMenu) { 66996 return newState; 66997 } 66998 if (!newState[value.parentMenu]) { 66999 newState[value.parentMenu] = []; 67000 } 67001 newState[value.parentMenu].push(key); 67002 return newState; 67003 }); 67004 addMenu(key, value); 67005 }, 67006 removeMenu, 67007 childMenu, 67008 traverseMenu, 67009 isMenuEmpty 67010 }; 67011}; 67012 67013;// CONCATENATED MODULE: ./packages/components/build-module/navigation/index.js 67014 67015/** 67016 * External dependencies 67017 */ 67018 67019 67020/** 67021 * WordPress dependencies 67022 */ 67023 67024 67025 67026/** 67027 * Internal dependencies 67028 */ 67029 67030 67031 67032 67033 67034const navigation_noop = () => {}; 67035 67036/** 67037 * Render a navigation list with optional groupings and hierarchy. 67038 * 67039 * ```jsx 67040 * import { 67041 * __experimentalNavigation as Navigation, 67042 * __experimentalNavigationGroup as NavigationGroup, 67043 * __experimentalNavigationItem as NavigationItem, 67044 * __experimentalNavigationMenu as NavigationMenu, 67045 * } from '@wordpress/components'; 67046 * 67047 * const MyNavigation = () => ( 67048 * <Navigation> 67049 * <NavigationMenu title="Home"> 67050 * <NavigationGroup title="Group 1"> 67051 * <NavigationItem item="item-1" title="Item 1" /> 67052 * <NavigationItem item="item-2" title="Item 2" /> 67053 * </NavigationGroup> 67054 * <NavigationGroup title="Group 2"> 67055 * <NavigationItem 67056 * item="item-3" 67057 * navigateToMenu="category" 67058 * title="Category" 67059 * /> 67060 * </NavigationGroup> 67061 * </NavigationMenu> 67062 * 67063 * <NavigationMenu 67064 * backButtonLabel="Home" 67065 * menu="category" 67066 * parentMenu="root" 67067 * title="Category" 67068 * > 67069 * <NavigationItem badge="1" item="child-1" title="Child 1" /> 67070 * <NavigationItem item="child-2" title="Child 2" /> 67071 * </NavigationMenu> 67072 * </Navigation> 67073 * ); 67074 * ``` 67075 */ 67076function Navigation({ 67077 activeItem, 67078 activeMenu = ROOT_MENU, 67079 children, 67080 className, 67081 onActivateMenu = navigation_noop 67082}) { 67083 const [menu, setMenu] = (0,external_wp_element_namespaceObject.useState)(activeMenu); 67084 const [slideOrigin, setSlideOrigin] = (0,external_wp_element_namespaceObject.useState)(); 67085 const navigationTree = useCreateNavigationTree(); 67086 const defaultSlideOrigin = (0,external_wp_i18n_namespaceObject.isRTL)() ? 'right' : 'left'; 67087 const setActiveMenu = (menuId, slideInOrigin = defaultSlideOrigin) => { 67088 if (!navigationTree.getMenu(menuId)) { 67089 return; 67090 } 67091 setSlideOrigin(slideInOrigin); 67092 setMenu(menuId); 67093 onActivateMenu(menuId); 67094 }; 67095 67096 // Used to prevent the sliding animation on mount 67097 const isMounted = (0,external_wp_element_namespaceObject.useRef)(false); 67098 (0,external_wp_element_namespaceObject.useEffect)(() => { 67099 if (!isMounted.current) { 67100 isMounted.current = true; 67101 } 67102 }, []); 67103 (0,external_wp_element_namespaceObject.useEffect)(() => { 67104 if (activeMenu !== menu) { 67105 setActiveMenu(activeMenu); 67106 } 67107 // Ignore exhaustive-deps here, as it would require either a larger refactor or some questionable workarounds. 67108 // See https://github.com/WordPress/gutenberg/pull/41612 for context. 67109 // eslint-disable-next-line react-hooks/exhaustive-deps 67110 }, [activeMenu]); 67111 const context = { 67112 activeItem, 67113 activeMenu: menu, 67114 setActiveMenu, 67115 navigationTree 67116 }; 67117 const classes = classnames_default()('components-navigation', className); 67118 const animateClassName = getAnimateClassName({ 67119 type: 'slide-in', 67120 origin: slideOrigin 67121 }); 67122 return (0,external_wp_element_namespaceObject.createElement)(NavigationUI, { 67123 className: classes 67124 }, (0,external_wp_element_namespaceObject.createElement)("div", { 67125 key: menu, 67126 className: animateClassName ? classnames_default()({ 67127 [animateClassName]: isMounted.current && slideOrigin 67128 }) : undefined 67129 }, (0,external_wp_element_namespaceObject.createElement)(NavigationContext.Provider, { 67130 value: context 67131 }, children))); 67132} 67133/* harmony default export */ const navigation = (Navigation); 67134 67135;// CONCATENATED MODULE: ./packages/icons/build-module/library/chevron-right.js 67136 67137/** 67138 * WordPress dependencies 67139 */ 67140 67141const chevronRight = (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.SVG, { 67142 xmlns: "http://www.w3.org/2000/svg", 67143 viewBox: "0 0 24 24" 67144}, (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.Path, { 67145 d: "M10.6 6L9.4 7l4.6 5-4.6 5 1.2 1 5.4-6z" 67146})); 67147/* harmony default export */ const chevron_right = (chevronRight); 67148 67149;// CONCATENATED MODULE: ./packages/icons/build-module/library/chevron-left.js 67150 67151/** 67152 * WordPress dependencies 67153 */ 67154 67155const chevronLeft = (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.SVG, { 67156 xmlns: "http://www.w3.org/2000/svg", 67157 viewBox: "0 0 24 24" 67158}, (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.Path, { 67159 d: "M14.6 7l-1.2-1L8 12l5.4 6 1.2-1-4.6-5z" 67160})); 67161/* harmony default export */ const chevron_left = (chevronLeft); 67162 67163;// CONCATENATED MODULE: ./packages/components/build-module/navigation/back-button/index.js 67164 67165/** 67166 * External dependencies 67167 */ 67168
67169/** 67170 * WordPress dependencies 67171 */ 67172 67173 67174 67175 67176/** 67177 * Internal dependencies 67178 */ 67179 67180 67181function UnforwardedNavigationBackButton({ 67182 backButtonLabel, 67183 className, 67184 href, 67185 onClick, 67186 parentMenu 67187}, ref) { 67188 const { 67189 setActiveMenu, 67190 navigationTree 67191 } = useNavigationContext(); 67192 const classes = classnames_default()('components-navigation__back-button', className); 67193 const parentMenuTitle = parentMenu !== undefined ? navigationTree.getMenu(parentMenu)?.title : undefined; 67194 const handleOnClick = event => { 67195 if (typeof onClick === 'function') { 67196 onClick(event); 67197 } 67198 const animationDirection = (0,external_wp_i18n_namespaceObject.isRTL)() ? 'left' : 'right'; 67199 if (parentMenu && !event.defaultPrevented) { 67200 setActiveMenu(parentMenu, animationDirection); 67201 } 67202 }; 67203 const icon = (0,external_wp_i18n_namespaceObject.isRTL)() ? chevron_right : chevron_left; 67204 return (0,external_wp_element_namespaceObject.createElement)(MenuBackButtonUI, { 67205 className: classes, 67206 href: href, 67207 variant: "tertiary", 67208 ref: ref, 67209 onClick: handleOnClick 67210 }, (0,external_wp_element_namespaceObject.createElement)(icons_build_module_icon, { 67211 icon: icon 67212 }), backButtonLabel || parentMenuTitle || (0,external_wp_i18n_namespaceObject.__)('Back')); 67213} 67214const NavigationBackButton = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedNavigationBackButton); 67215/* harmony default export */ const back_button = (NavigationBackButton); 67216 67217;// CONCATENATED MODULE: ./packages/components/build-module/navigation/group/context.js 67218/** 67219 * WordPress dependencies 67220 */ 67221 67222 67223/** 67224 * Internal dependencies 67225 */ 67226 67227const NavigationGroupContext = (0,external_wp_element_namespaceObject.createContext)({ 67228 group: undefined 67229}); 67230const useNavigationGroupContext = () => (0,external_wp_element_namespaceObject.useContext)(NavigationGroupContext); 67231 67232;// CONCATENATED MODULE: ./packages/components/build-module/navigation/group/index.js 67233 67234/** 67235 * External dependencies 67236 */ 67237 67238 67239/** 67240 * WordPress dependencies 67241 */ 67242 67243 67244/** 67245 * Internal dependencies 67246 */ 67247 67248 67249 67250let uniqueId = 0; 67251function NavigationGroup({ 67252 children, 67253 className, 67254 title 67255}) { 67256 const [groupId] = (0,external_wp_element_namespaceObject.useState)(`group-${++uniqueId}`); 67257 const { 67258 navigationTree: { 67259 items 67260 } 67261 } = useNavigationContext(); 67262 const context = { 67263 group: groupId 67264 }; 67265 67266 // Keep the children rendered to make sure invisible items are included in the navigation tree. 67267 if (!Object.values(items).some(item => item.group === groupId && item._isVisible)) { 67268 return (0,external_wp_element_namespaceObject.createElement)(NavigationGroupContext.Provider, { 67269 value: context 67270 }, children); 67271 } 67272 const groupTitleId = `components-navigation__group-title-${groupId}`; 67273 const classes = classnames_default()('components-navigation__group', className); 67274 return (0,external_wp_element_namespaceObject.createElement)(NavigationGroupContext.Provider, { 67275 value: context 67276 }, (0,external_wp_element_namespaceObject.createElement)("li", { 67277 className: classes 67278 }, title && (0,external_wp_element_namespaceObject.createElement)(GroupTitleUI, { 67279 className: "components-navigation__group-title", 67280 id: groupTitleId, 67281 level: 3 67282 }, title), (0,external_wp_element_namespaceObject.createElement)("ul", { 67283 "aria-labelledby": groupTitleId, 67284 role: "group" 67285 }, children))); 67286} 67287/* harmony default export */ const group = (NavigationGroup); 67288 67289;// CONCATENATED MODULE: ./packages/components/build-module/navigation/item/base-content.js 67290 67291/** 67292 * Internal dependencies 67293 */ 67294 67295function NavigationItemBaseContent(props) { 67296 const { 67297 badge, 67298 title 67299 } = props; 67300 return (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, title && (0,external_wp_element_namespaceObject.createElement)(ItemTitleUI, { 67301 className: "components-navigation__item-title", 67302 as: "span" 67303 }, title), badge && (0,external_wp_element_namespaceObject.createElement)(ItemBadgeUI, { 67304 className: "components-navigation__item-badge" 67305 }, badge)); 67306} 67307 67308;// CONCATENATED MODULE: ./packages/components/build-module/navigation/menu/context.js 67309/** 67310 * WordPress dependencies 67311 */ 67312 67313 67314/** 67315 * Internal dependencies 67316 */ 67317 67318const NavigationMenuContext = (0,external_wp_element_namespaceObject.createContext)({ 67319 menu: undefined, 67320 search: '' 67321}); 67322const useNavigationMenuContext = () => (0,external_wp_element_namespaceObject.useContext)(NavigationMenuContext); 67323 67324;// CONCATENATED MODULE: ./packages/components/build-module/navigation/utils.js 67325/** 67326 * External dependencies 67327 */ 67328 67329 67330// @see packages/block-editor/src/components/inserter/search-items.js 67331const normalizeInput = input => remove_accents_default()(input).replace(/^\//, '').toLowerCase(); 67332const normalizedSearch = (title, search) => -1 !== normalizeInput(title).indexOf(normalizeInput(search)); 67333 67334;// CONCATENATED MODULE: ./packages/components/build-module/navigation/item/use-navigation-tree-item.js 67335/** 67336 * WordPress dependencies 67337 */ 67338 67339 67340/** 67341 * Internal dependencies 67342 */ 67343 67344 67345 67346 67347const useNavigationTreeItem = (itemId, props) => { 67348 const { 67349 activeMenu, 67350 navigationTree: { 67351 addItem, 67352 removeItem 67353 } 67354 } = useNavigationContext(); 67355 const { 67356 group 67357 } = useNavigationGroupContext(); 67358 const { 67359 menu, 67360 search 67361 } = useNavigationMenuContext(); 67362 (0,external_wp_element_namespaceObject.useEffect)(() => { 67363 const isMenuActive = activeMenu === menu;
67364 const isItemVisible = !search || props.title !== undefined && normalizedSearch(props.title, search); 67365 addItem(itemId, { 67366 ...props, 67367 group, 67368 menu, 67369 _isVisible: isMenuActive && isItemVisible 67370 }); 67371 return () => { 67372 removeItem(itemId); 67373 }; 67374 // Ignore exhaustive-deps rule for now. See https://github.com/WordPress/gutenberg/pull/41639 67375 // eslint-disable-next-line react-hooks/exhaustive-deps 67376 }, [activeMenu, search]); 67377}; 67378 67379;// CONCATENATED MODULE: ./packages/components/build-module/navigation/item/base.js 67380 67381/** 67382 * External dependencies 67383 */ 67384 67385 67386/** 67387 * WordPress dependencies 67388 */ 67389 67390 67391/** 67392 * Internal dependencies 67393 */ 67394 67395 67396 67397let base_uniqueId = 0; 67398function NavigationItemBase(props) { 67399 // Also avoid to pass the `title` and `href` props to the ItemBaseUI styled component. 67400 const { 67401 children, 67402 className, 67403 title, 67404 href, 67405 ...restProps 67406 } = props; 67407 const [itemId] = (0,external_wp_element_namespaceObject.useState)(`item-${++base_uniqueId}`); 67408 useNavigationTreeItem(itemId, props); 67409 const { 67410 navigationTree 67411 } = useNavigationContext(); 67412 if (!navigationTree.getItem(itemId)?._isVisible) { 67413 return null; 67414 } 67415 const classes = classnames_default()('components-navigation__item', className); 67416 return (0,external_wp_element_namespaceObject.createElement)(ItemBaseUI, { 67417 className: classes, 67418 ...restProps 67419 }, children); 67420} 67421 67422;// CONCATENATED MODULE: ./packages/components/build-module/navigation/item/index.js 67423 67424/** 67425 * External dependencies 67426 */ 67427 67428 67429/** 67430 * WordPress dependencies 67431 */ 67432 67433 67434 67435/** 67436 * Internal dependencies 67437 */ 67438 67439 67440 67441 67442 67443const item_noop = () => {}; 67444function NavigationItem(props) { 67445 const { 67446 badge, 67447 children, 67448 className, 67449 href, 67450 item, 67451 navigateToMenu, 67452 onClick = item_noop, 67453 title, 67454 icon, 67455 hideIfTargetMenuEmpty, 67456 isText, 67457 ...restProps 67458 } = props; 67459 const { 67460 activeItem, 67461 setActiveMenu, 67462 navigationTree: { 67463 isMenuEmpty 67464 } 67465 } = useNavigationContext(); 67466 67467 // If hideIfTargetMenuEmpty prop is true 67468 // And the menu we are supposed to navigate to 67469 // Is marked as empty, then we skip rendering the item. 67470 if (hideIfTargetMenuEmpty && navigateToMenu && isMenuEmpty(navigateToMenu)) { 67471 return null; 67472 } 67473 const isActive = item && activeItem === item; 67474 const classes = classnames_default()(className, { 67475 'is-active': isActive 67476 }); 67477 const onItemClick = event => { 67478 if (navigateToMenu) { 67479 setActiveMenu(navigateToMenu); 67480 } 67481 onClick(event); 67482 }; 67483 const navigationIcon = (0,external_wp_i18n_namespaceObject.isRTL)() ? chevron_left : chevron_right; 67484 const baseProps = children ? props : { 67485 ...props, 67486 onClick: undefined 67487 }; 67488 const itemProps = isText ? restProps : { 67489 as: build_module_button, 67490 href, 67491 onClick: onItemClick, 67492 'aria-current': isActive ? 'page' : undefined, 67493 ...restProps 67494 }; 67495 return (0,external_wp_element_namespaceObject.createElement)(NavigationItemBase, { 67496 ...baseProps, 67497 className: classes 67498 }, children || (0,external_wp_element_namespaceObject.createElement)(ItemUI, { 67499 ...itemProps 67500 }, icon && (0,external_wp_element_namespaceObject.createElement)(ItemIconUI, null, (0,external_wp_element_namespaceObject.createElement)(icons_build_module_icon, { 67501 icon: icon 67502 })), (0,external_wp_element_namespaceObject.createElement)(NavigationItemBaseContent, { 67503 title: title, 67504 badge: badge 67505 }), navigateToMenu && (0,external_wp_element_namespaceObject.createElement)(icons_build_module_icon, { 67506 icon: navigationIcon 67507 }))); 67508} 67509/* harmony default export */ const navigation_item = (NavigationItem); 67510 67511;// CONCATENATED MODULE: ./packages/components/build-module/navigation/menu/use-navigation-tree-menu.js 67512/** 67513 * WordPress dependencies 67514 */ 67515 67516 67517/** 67518 * Internal dependencies 67519 */ 67520 67521 67522const useNavigationTreeMenu = props => { 67523 const { 67524 navigationTree: { 67525 addMenu, 67526 removeMenu 67527 } 67528 } = useNavigationContext(); 67529 const key = props.menu || ROOT_MENU; 67530 (0,external_wp_element_namespaceObject.useEffect)(() => { 67531 addMenu(key, { 67532 ...props, 67533 menu: key 67534 }); 67535 return () => { 67536 removeMenu(key); 67537 }; 67538 // Ignore exhaustive-deps rule for now. See https://github.com/WordPress/gutenberg/pull/44090 67539 // eslint-disable-next-line react-hooks/exhaustive-deps 67540 }, []); 67541}; 67542 67543;// CONCATENATED MODULE: ./packages/components/build-module/higher-order/with-spoken-messages/index.js 67544 67545/** 67546 * WordPress dependencies 67547 */ 67548 67549 67550 67551/** @typedef {import('@wordpress/element').WPComponent} WPComponent */ 67552 67553/** 67554 * A Higher Order Component used to be provide speak and debounced speak 67555 * functions. 67556 * 67557 * @see https://developer.wordpress.org/block-editor/packages/packages-a11y/#speak 67558 * 67559 * @param {WPComponent} Component The component to be wrapped. 67560 * 67561 * @return {WPComponent} The wrapped component. 67562 */ 67563/* harmony default export */ const with_spoken_messages = ((0,external_wp_compose_namespaceObject.createHigherOrderComponent)(Component => props => (0,external_wp_element_namespaceObject.createElement)(Component, { 67564 ...props, 67565 speak: external_wp_a11y_namespaceObject.speak, 67566 debouncedSpeak: (0,external_wp_compose_namespaceObject.useDebounce)(external_wp_a11y_namespaceObject.speak, 500) 67567}), 'withSpokenMessages')); 67568 67569;// CONCATENATED MODULE: ./packages/components/build-module/navigation/menu/menu-title-search.js 67570 67571/** 67572 * WordPress dependencies 67573 */ 67574 67575 67576 67577/** 67578 * Internal dependencies 67579 */ 67580 67581 67582 67583 67584 67585function MenuTitleSearch({ 67586 debouncedSpeak, 67587 onCloseSearch, 67588 onSearch, 67589 search, 67590 title 67591}) { 67592 const { 67593 navigationTree: { 67594 items 67595 } 67596 } = useNavigationContext(); 67597 const { 67598 menu 67599 }
67599 = useNavigationMenuContext(); 67600 const inputRef = (0,external_wp_element_namespaceObject.useRef)(null); 67601 67602 // Wait for the slide-in animation to complete before autofocusing the input. 67603 // This prevents scrolling to the input during the animation. 67604 (0,external_wp_element_namespaceObject.useEffect)(() => { 67605 const delayedFocus = setTimeout(() => { 67606 inputRef.current?.focus(); 67607 }, SEARCH_FOCUS_DELAY); 67608 return () => { 67609 clearTimeout(delayedFocus); 67610 }; 67611 }, []); 67612 (0,external_wp_element_namespaceObject.useEffect)(() => { 67613 if (!search) { 67614 return; 67615 } 67616 const count = Object.values(items).filter(item => item._isVisible).length; 67617 const resultsFoundMessage = (0,external_wp_i18n_namespaceObject.sprintf)( /* translators: %d: number of results. */ 67618 (0,external_wp_i18n_namespaceObject._n)('%d result found.', '%d results found.', count), count); 67619 debouncedSpeak(resultsFoundMessage); 67620 // Ignore exhaustive-deps rule for now. See https://github.com/WordPress/gutenberg/pull/44090 67621 // eslint-disable-next-line react-hooks/exhaustive-deps 67622 }, [items, search]); 67623 const onClose = () => { 67624 onSearch?.(''); 67625 onCloseSearch(); 67626 }; 67627 const onKeyDown = event => { 67628 if (event.code === 'Escape' && !event.defaultPrevented) { 67629 event.preventDefault(); 67630 onClose(); 67631 } 67632 }; 67633 const inputId = `components-navigation__menu-title-search-${menu}`; 67634 const placeholder = (0,external_wp_i18n_namespaceObject.sprintf)( /* translators: placeholder for menu search box. %s: menu title */ 67635 (0,external_wp_i18n_namespaceObject.__)('Search %s'), title?.toLowerCase()).trim(); 67636 return (0,external_wp_element_namespaceObject.createElement)("div", { 67637 className: "components-navigation__menu-title-search" 67638 }, (0,external_wp_element_namespaceObject.createElement)(MenuTitleSearchUI, { 67639 autoComplete: "off", 67640 className: "components-navigation__menu-search-input", 67641 id: inputId, 67642 onChange: value => onSearch?.(value), 67643 onKeyDown: onKeyDown, 67644 placeholder: placeholder, 67645 onClose: onClose, 67646 ref: inputRef, 67647 type: "search", 67648 value: search 67649 })); 67650} 67651/* harmony default export */ const menu_title_search = (with_spoken_messages(MenuTitleSearch)); 67652 67653;// CONCATENATED MODULE: ./packages/components/build-module/navigation/menu/menu-title.js 67654 67655/** 67656 * WordPress dependencies 67657 */ 67658 67659 67660 67661 67662/** 67663 * Internal dependencies 67664 */ 67665 67666 67667 67668 67669 67670 67671function NavigationMenuTitle({ 67672 hasSearch, 67673 onSearch, 67674 search, 67675 title, 67676 titleAction 67677}) { 67678 const [isSearching, setIsSearching] = (0,external_wp_element_namespaceObject.useState)(false); 67679 const { 67680 menu 67681 } = useNavigationMenuContext(); 67682 const searchButtonRef = (0,external_wp_element_namespaceObject.useRef)(null); 67683 if (!title) { 67684 return null; 67685 } 67686 const onCloseSearch = () => { 67687 setIsSearching(false); 67688 67689 // Wait for the slide-in animation to complete before focusing the search button. 67690 // eslint-disable-next-line @wordpress/react-no-unsafe-timeout 67691 setTimeout(() => { 67692 searchButtonRef.current?.focus(); 67693 }, SEARCH_FOCUS_DELAY); 67694 }; 67695 const menuTitleId = `components-navigation__menu-title-${menu}`; 67696 /* translators: search button label for menu search box. %s: menu title */ 67697 const searchButtonLabel = (0,external_wp_i18n_namespaceObject.sprintf)((0,external_wp_i18n_namespaceObject.__)('Search in %s'), title); 67698 return (0,external_wp_element_namespaceObject.createElement)(MenuTitleUI, { 67699 className: "components-navigation__menu-title" 67700 }, !isSearching && (0,external_wp_element_namespaceObject.createElement)(GroupTitleUI, { 67701 as: "h2", 67702 className: "components-navigation__menu-title-heading", 67703 level: 3 67704 }, (0,external_wp_element_namespaceObject.createElement)("span", { 67705 id: menuTitleId 67706 }, title), (hasSearch || titleAction) && (0,external_wp_element_namespaceObject.createElement)(MenuTitleActionsUI, null, titleAction, hasSearch && (0,external_wp_element_namespaceObject.createElement)(build_module_button, { 67707 isSmall: true, 67708 variant: "tertiary", 67709 label: searchButtonLabel, 67710 onClick: () => setIsSearching(true), 67711 ref: searchButtonRef 67712 }, (0,external_wp_element_namespaceObject.createElement)(icons_build_module_icon, { 67713 icon: library_search 67714 })))), isSearching && (0,external_wp_element_namespaceObject.createElement)("div", { 67715 className: getAnimateClassName({ 67716 type: 'slide-in', 67717 origin: 'left' 67718 }) 67719 }, (0,external_wp_element_namespaceObject.createElement)(menu_title_search, { 67720 onCloseSearch: onCloseSearch, 67721 onSearch: onSearch, 67722 search: search, 67723 title: title 67724 }))); 67725} 67726 67727;// CONCATENATED MODULE: ./packages/components/build-module/navigation/menu/search-no-results-found.js 67728 67729/** 67730 * WordPress dependencies 67731 */ 67732 67733 67734/** 67735 * Internal dependencies 67736 */ 67737 67738 67739function NavigationSearchNoResultsFound({ 67740 search 67741}) { 67742 const { 67743 navigationTree: { 67744 items 67745 } 67746 } = useNavigationContext(); 67747 const resultsCount = Object.values(items).filter(item => item._isVisible).length; 67748 if (!search || !!resultsCount) { 67749 return null; 67750 } 67751 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.'), " ")); 67752} 67753 67754;// CONCATENATED MODULE: ./packages/components/build-module/navigation/menu/index.js 67755 67756/** 67757 * External dependencies 67758 */ 67759 67760 67761/** 67762 * WordPress dependencies 67763 */ 67764 67765 67766/** 67767 * Internal dependencies 67768 */ 67769 67770 67771 67772 67773 67774 67775 67776 67777 67778function NavigationMenu(props) { 67779 const { 67780 backButtonLabel, 67781 children, 67782 className, 67783 hasSearch, 67784 menu = ROOT_MENU, 67785 onBackButtonClick, 67786 onSearch: setControlledSearch, 67787 parentMenu, 67788 search: controlledSearch, 67789 isSearchDebouncing, 67790 title, 67791 titleAction 67792 } = props; 67793 const [uncontrolledSearch, setUncontrolledSearch] = (0,external_wp_element_namespaceObject.useState)(''); 67794 useNavigationTreeMenu(props); 67795 const { 67796 activeMenu 67797 } = useNavigationContext(); 67798 const context = { 67799 menu, 67800 search: uncontrolledSearch 67801 }; 67802 67803 // Keep the children rendered to make sure invisible items are included in the navigation tree. 67804 if (activeMenu !== menu) { 67805 return (0,external_wp_element_namespaceObject.createElement)(NavigationMenuContext.Provider, { 67806 value: context 67807 }, children); 67808 } 67809 const isControlledSearch = !!setControlledSearch; 67810 const search = isControlledSearch ? controlledSearch : uncontrolledSearch; 67811 const onSearch = isControlledSearch ? setControlledSearch : setUncontrolledSearch; 67812 const menuTitleId = `components-navigation__menu-title-${menu}`; 67813 const classes = classnames_default()('components-navigation__menu', className); 67814 return (0,external_wp_element_namespaceObject.createElement)(NavigationMenuContext.Provider, { 67815 value: context 67816 }, (0,external_wp_element_namespaceObject.createElement)(MenuUI, { 67817 className: classes 67818 }, (parentMenu || onBackButtonClick) && (0,external_wp_element_namespaceObject.createElement)(back_button, { 67819 backButtonLabel: backButtonLabel, 67820 parentMenu: parentMenu, 67821 onClick: onBackButtonClick 67822 }), title && (0,external_wp_element_namespaceObject.createElement)(NavigationMenuTitle, { 67823 hasSearch: hasSearch, 67824 onSearch: onSearch, 67825 search: search, 67826 title: title, 67827 titleAction: titleAction 67828 }), (0,external_wp_element_namespaceObject.createElement)(navigable_container_menu, null, (0,external_wp_element_namespaceObject.createElement)("ul", { 67829 "aria-labelledby": menuTitleId 67830 }, children, search && !isSearchDebouncing && (0,external_wp_element_namespaceObject.createElement)(NavigationSearchNoResultsFound, { 67831 search: search 67832 }))))); 67833} 67834/* harmony default export */ const navigation_menu = (NavigationMenu); 67835 67836;// CONCATENATED MODULE: ./packages/components/build-module/navigator/context.js 67837/** 67838 * WordPress dependencies 67839 */ 67840 67841 67842/** 67843 * Internal dependencies 67844 */ 67845 67846const initialContextValue = { 67847 location: {}, 67848 goTo: () => {}, 67849 goBack: () => {}, 67850 goToParent: () => {}, 67851 addScreen: () => {}, 67852 removeScreen: () => {}, 67853 params: {} 67854}; 67855const NavigatorContext = (0,external_wp_element_namespaceObject.createContext)(initialContextValue); 67856 67857;// CONCATENATED MODULE: ./packages/components/node_modules/path-to-regexp/dist.es2015/index.js 67858/** 67859 * Tokenize input string. 67860 */ 67861function lexer(str) { 67862 var tokens = []; 67863 var i = 0; 67864 while (i < str.length) { 67865 var char = str[i]; 67866 if (char === "*" || char === "+" || char === "?") { 67867 tokens.push({ type: "MODIFIER", index: i, value: str[i++] }); 67868 continue; 67869 } 67870 if (char === "\\") { 67871 tokens.push({ type: "ESCAPED_CHAR", index: i++, value: str[i++] }); 67872 continue; 67873 } 67874 if (char === "{") { 67875 tokens.push({ type: "OPEN", index: i, value: str[i++] }); 67876 continue; 67877 } 67878 if (char === "}") { 67879 tokens.push({ type: "CLOSE", index: i, value: str[i++] }); 67880 continue; 67881 } 67882 if (char === ":") { 67883 var name = ""; 67884 var j = i + 1; 67885 while (j < str.length) { 67886 var code = str.charCodeAt(j); 67887 if ( 67888 // `0-9` 67889 (code >= 48 && code <= 57) || 67890 // `A-Z` 67891 (code >= 65 && code <= 90) || 67892 // `a-z` 67893 (code >= 97 && code <= 122) || 67894 // `_` 67895 code === 95) { 67896 name += str[j++]; 67897 continue; 67898 } 67899 break; 67900 } 67901 if (!name) 67902 throw new TypeError("Missing parameter name at ".concat(i)); 67903 tokens.push({ type: "NAME", index: i, value: name }); 67904 i = j; 67905 continue; 67906 } 67907 if (char === "(") { 67908 var count = 1; 67909 var pattern = ""; 67910 var j = i + 1; 67911 if (str[j] === "?") { 67912 throw new TypeError("Pattern cannot start with \"?\" at ".concat(j)); 67913 } 67914 while (j < str.length) { 67915 if (str[j] === "\\") { 67916 pattern += str[j++] + str[j++]; 67917 continue; 67918 } 67919 if (str[j] === ")") { 67920 count--; 67921 if (count === 0) { 67922 j++; 67923 break; 67924 } 67925 } 67926 else if (str[j] === "(") { 67927 count++; 67928 if (str[j + 1] !== "?") { 67929 throw new TypeError("Capturing groups are not allowed at ".concat(j)); 67930 } 67931 } 67932 pattern += str[j++]; 67933 } 67934 if (count) 67935 throw new TypeError("Unbalanced pattern at ".concat(i)); 67936 if (!pattern) 67937 throw new TypeError("Missing pattern at ".concat(i)); 67938 tokens.push({ type: "PATTERN", index: i, value: pattern }); 67939 i = j; 67940 continue; 67941 } 67942 tokens.push({ type: "CHAR", index: i, value: str[i++] }); 67943 } 67944 tokens.push({ type: "END", index: i, value: "" }); 67945 return tokens; 67946} 67947/** 67948 * Parse a string for the raw tokens. 67949 */ 67950function dist_es2015_parse(str, options) { 67951 if (options === void 0) { options = {}; } 67952 var tokens = lexer(str); 67953 var _a = options.prefixes, prefixes = _a === void 0 ? "./" : _a; 67954 var defaultPattern = "[^".concat(escapeString(options.delimiter || "/#?"), "]+?"); 67955 var result = []; 67956 var key = 0; 67957 var i = 0; 67958 var path = ""; 67959 var tryConsume = function (type) { 67960 if (i < tokens.length && tokens[i].type === type) 67961 return tokens[i++].value; 67962 }; 67963 var mustConsume = function (type) { 67964 var value = tryConsume(type); 67965 if (value !== undefined) 67966 return value; 67967 var _a = tokens[i], nextType = _a.type, index = _a.index; 67968 throw new TypeError("Unexpected ".concat(nextType, " at ").concat(index, ", expected ").concat(type)); 67969 }; 67970 var consumeText = function () { 67971 var result = ""; 67972 var value;
vendor: 5,216 bytes, lines 67973-68111
67973 while ((value = tryConsume("CHAR") || tryConsume("ESCAPED_CHAR"))) { 67974 result += value; 67975 } 67976 return result; 67977 }; 67978 while (i < tokens.length) { 67979 var char = tryConsume("CHAR"); 67980 var name = tryConsume("NAME"); 67981 var pattern = tryConsume("PATTERN"); 67982 if (name || pattern) { 67983 var prefix = char || ""; 67984 if (prefixes.indexOf(prefix) === -1) { 67985 path += prefix; 67986 prefix = ""; 67987 } 67988 if (path) { 67989 result.push(path); 67990 path = ""; 67991 } 67992 result.push({ 67993 name: name || key++, 67994 prefix: prefix, 67995 suffix: "", 67996 pattern: pattern || defaultPattern, 67997 modifier: tryConsume("MODIFIER") || "", 67998 }); 67999 continue; 68000 } 68001 var value = char || tryConsume("ESCAPED_CHAR"); 68002 if (value) { 68003 path += value; 68004 continue; 68005 } 68006 if (path) { 68007 result.push(path); 68008 path = ""; 68009 } 68010 var open = tryConsume("OPEN"); 68011 if (open) { 68012 var prefix = consumeText(); 68013 var name_1 = tryConsume("NAME") || ""; 68014 var pattern_1 = tryConsume("PATTERN") || ""; 68015 var suffix = consumeText(); 68016 mustConsume("CLOSE"); 68017 result.push({ 68018 name: name_1 || (pattern_1 ? key++ : ""), 68019 pattern: name_1 && !pattern_1 ? defaultPattern : pattern_1, 68020 prefix: prefix, 68021 suffix: suffix, 68022 modifier: tryConsume("MODIFIER") || "", 68023 }); 68024 continue; 68025 } 68026 mustConsume("END"); 68027 } 68028 return result; 68029} 68030/** 68031 * Compile a string to a template function for the path. 68032 */ 68033function dist_es2015_compile(str, options) { 68034 return tokensToFunction(dist_es2015_parse(str, options), options); 68035} 68036/** 68037 * Expose a method for transforming tokens into the path function. 68038 */ 68039function tokensToFunction(tokens, options) { 68040 if (options === void 0) { options = {}; } 68041 var reFlags = flags(options); 68042 var _a = options.encode, encode = _a === void 0 ? function (x) { return x; } : _a, _b = options.validate, validate = _b === void 0 ? true : _b; 68043 // Compile all the tokens into regexps. 68044 var matches = tokens.map(function (token) { 68045 if (typeof token === "object") { 68046 return new RegExp("^(?:".concat(token.pattern, ")$"), reFlags); 68047 } 68048 }); 68049 return function (data) { 68050 var path = ""; 68051 for (var i = 0; i < tokens.length; i++) { 68052 var token = tokens[i]; 68053 if (typeof token === "string") { 68054 path += token; 68055 continue; 68056 } 68057 var value = data ? data[token.name] : undefined; 68058 var optional = token.modifier === "?" || token.modifier === "*"; 68059 var repeat = token.modifier === "*" || token.modifier === "+"; 68060 if (Array.isArray(value)) { 68061 if (!repeat) { 68062 throw new TypeError("Expected \"".concat(token.name, "\" to not repeat, but got an array")); 68063 } 68064 if (value.length === 0) { 68065 if (optional) 68066 continue; 68067 throw new TypeError("Expected \"".concat(token.name, "\" to not be empty")); 68068 } 68069 for (var j = 0; j < value.length; j++) { 68070 var segment = encode(value[j], token); 68071 if (validate && !matches[i].test(segment)) { 68072 throw new TypeError("Expected all \"".concat(token.name, "\" to match \"").concat(token.pattern, "\", but got \"").concat(segment, "\"")); 68073 } 68074 path += token.prefix + segment + token.suffix; 68075 } 68076 continue; 68077 } 68078 if (typeof value === "string" || typeof value === "number") { 68079 var segment = encode(String(value), token); 68080 if (validate && !matches[i].test(segment)) { 68081 throw new TypeError("Expected \"".concat(token.name, "\" to match \"").concat(token.pattern, "\", but got \"").concat(segment, "\"")); 68082 } 68083 path += token.prefix + segment + token.suffix; 68084 continue; 68085 } 68086 if (optional) 68087 continue; 68088 var typeOfMessage = repeat ? "an array" : "a string"; 68089 throw new TypeError("Expected \"".concat(token.name, "\" to be ").concat(typeOfMessage)); 68090 } 68091 return path; 68092 }; 68093} 68094/** 68095 * Create path match function from `path-to-regexp` spec. 68096 */ 68097function dist_es2015_match(str, options) { 68098 var keys = []; 68099 var re = pathToRegexp(str, keys, options); 68100 return regexpToFunction(re, keys, options); 68101} 68102/** 68103 * Create a path match function from `path-to-regexp` output. 68104 */ 68105function regexpToFunction(re, keys, options) { 68106 if (options === void 0) { options = {}; } 68107 var _a = options.decode, decode = _a === void 0 ? function (x) { return x; } : _a; 68108 return function (pathname) { 68109 var m = re.exec(pathname); 68110 if (!m) 68111 return false;
68112 var path = m[0], index = m.index; 68113 var params = Object.create(null); 68114 var _loop_1 = function (i) { 68115 if (m[i] === undefined) 68116 return "continue"; 68117 var key = keys[i - 1]; 68118 if (key.modifier === "*" || key.modifier === "+") { 68119 params[key.name] = m[i].split(key.prefix + key.suffix).map(function (value) { 68120 return decode(value, key); 68121 }); 68122 } 68123 else { 68124 params[key.name] = decode(m[i], key); 68125 } 68126 }; 68127 for (var i = 1; i < m.length; i++) { 68128 _loop_1(i); 68129 } 68130 return { path: path, index: index, params: params }; 68131 }; 68132} 68133/** 68134 * Escape a regular expression string. 68135 */ 68136function escapeString(str) { 68137 return str.replace(/([.+*?=^!:${}()[\]|/\\])/g, "\\$1"); 68138} 68139/** 68140 * Get the flags for a regexp from the options. 68141 */ 68142function flags(options) { 68143 return options && options.sensitive ? "" : "i"; 68144} 68145/** 68146 * Pull out keys from a regexp. 68147 */ 68148function regexpToRegexp(path, keys) { 68149 if (!keys) 68150 return path; 68151 var groupsRegex = /\((?:\?<(.*?)>)?(?!\?)/g; 68152 var index = 0; 68153 var execResult = groupsRegex.exec(path.source); 68154 while (execResult) { 68155 keys.push({ 68156 // Use parenthesized substring match if available, index otherwise 68157 name: execResult[1] || index++, 68158 prefix: "", 68159 suffix: "", 68160 modifier: "", 68161 pattern: "", 68162 }); 68163 execResult = groupsRegex.exec(path.source); 68164 } 68165 return path; 68166} 68167/** 68168 * Transform an array into a regexp. 68169 */ 68170function arrayToRegexp(paths, keys, options) { 68171 var parts = paths.map(function (path) { return pathToRegexp(path, keys, options).source; }); 68172 return new RegExp("(?:".concat(parts.join("|"), ")"), flags(options)); 68173} 68174/** 68175 * Create a path regexp from string input. 68176 */ 68177function stringToRegexp(path, keys, options) { 68178 return tokensToRegexp(dist_es2015_parse(path, options), keys, options); 68179} 68180/** 68181 * Expose a function for taking tokens and returning a RegExp. 68182 */ 68183function tokensToRegexp(tokens, keys, options) { 68184 if (options === void 0) { options = {}; } 68185 var _a = options.strict, strict = _a === void 0 ? false : _a, _b = options.start, start = _b === void 0 ? true : _b, _c = options.end, end = _c === void 0 ? true : _c, _d = options.encode, encode = _d === void 0 ? function (x) { return x; } : _d, _e = options.delimiter, delimiter = _e === void 0 ? "/#?" : _e, _f = options.endsWith, endsWith = _f === void 0 ? "" : _f; 68186 var endsWithRe = "[".concat(escapeString(endsWith), "]|$"); 68187 var delimiterRe = "[".concat(escapeString(delimiter), "]"); 68188 var route = start ? "^" : ""; 68189 // Iterate over the tokens and create our regexp string. 68190 for (var _i = 0, tokens_1 = tokens; _i < tokens_1.length; _i++) { 68191 var token = tokens_1[_i]; 68192 if (typeof token === "string") { 68193 route += escapeString(encode(token)); 68194 } 68195 else { 68196 var prefix = escapeString(encode(token.prefix)); 68197 var suffix = escapeString(encode(token.suffix)); 68198 if (token.pattern) { 68199 if (keys) 68200 keys.push(token); 68201 if (prefix || suffix) { 68202 if (token.modifier === "+" || token.modifier === "*") { 68203 var mod = token.modifier === "*" ? "?" : ""; 68204 route += "(?:".concat(prefix, "((?:").concat(token.pattern, ")(?:").concat(suffix).concat(prefix, "(?:").concat(token.pattern, "))*)").concat(suffix, ")").concat(mod); 68205 } 68206 else { 68207 route += "(?:".concat(prefix, "(").concat(token.pattern, ")").concat(suffix, ")").concat(token.modifier); 68208 } 68209 } 68210 else { 68211 if (token.modifier === "+" || token.modifier === "*") { 68212 route += "((?:".concat(token.pattern, ")").concat(token.modifier, ")"); 68213 } 68214 else { 68215 route += "(".concat(token.pattern, ")").concat(token.modifier); 68216 } 68217 } 68218 } 68219 else { 68220 route += "(?:".concat(prefix).concat(suffix, ")").concat(token.modifier); 68221 } 68222 } 68223 } 68224 if (end) { 68225 if (!strict) 68226 route += "".concat(delimiterRe, "?"); 68227 route += !options.endsWith ? "$" : "(?=".concat(endsWithRe, ")"); 68228 } 68229 else { 68230 var endToken = tokens[tokens.length - 1]; 68231 var isEndDelimited = typeof endToken === "string" 68232 ? delimiterRe.indexOf(endToken[endToken.length - 1]) > -1 68233 : endToken === undefined; 68234 if (!strict) { 68235 route += "(?:".concat(delimiterRe, "(?=").concat(endsWithRe, "))?"); 68236 } 68237 if (!isEndDelimited) { 68238 route += "(?=".concat(delimiterRe, "|").concat(endsWithRe, ")"); 68239 } 68240 } 68241 return new RegExp(route, flags(options)); 68242} 68243/** 68244 * Normalize the given path string, returning a regular expression. 68245 * 68246 * An empty array can be passed in for the keys, which will hold the 68247 * placeholder key descriptions. For example, using `/user/:id`, `keys` will 68248 * contain `[{ name: 'id', delimiter: '/', optional: false, repeat: false }]`. 68249 */ 68250function pathToRegexp(path, keys, options) { 68251 if (path instanceof RegExp) 68252 return regexpToRegexp(path, keys); 68253 if (Array.isArray(path)) 68254 return arrayToRegexp(path, keys, options); 68255 return stringToRegexp(path, keys, options); 68256} 68257 68258;// CONCATENATED MODULE: ./packages/components/build-module/navigator/utils/router.js 68259/** 68260 * External dependencies 68261 */ 68262 68263 68264/** 68265 * Internal dependencies 68266 */ 68267 68268function matchPath(path, pattern) { 68269 const matchingFunction = dist_es2015_match(pattern, { 68270 decode: decodeURIComponent 68271 }); 68272 return matchingFunction(path); 68273} 68274function patternMatch(path, screens) { 68275 for (const screen of screens) { 68276 const matched = matchPath(path, screen.path); 68277 if (matched) { 68278 return { 68279 params: matched.params, 68280 id: screen.id 68281 }; 68282 } 68283 } 68284 return undefined; 68285} 68286function findParent(path, screens) { 68287 if (!path.startsWith('/')) { 68288 return undefined; 68289 } 68290 const pathParts = path.split('/'); 68291 let parentPath; 68292 while (pathParts.length > 1 && parentPath === undefined) { 68293 pathParts.pop(); 68294 const potentialParentPath = pathParts.join('/') === '' ? '/' : pathParts.join('/'); 68295 if (screens.find(screen => { 68296 return matchPath(potentialParentPath, screen.path) !== false; 68297 })) { 68298 parentPath = potentialParentPath; 68299 } 68300 } 68301 return parentPath; 68302} 68303 68304;// CONCATENATED MODULE: ./packages/components/build-module/navigator/navigator-provider/component.js 68305 68306function 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)."; } 68307/** 68308 * External dependencies 68309 */ 68310 68311 68312 68313/** 68314 * WordPress dependencies 68315 */ 68316 68317 68318 68319/** 68320 * Internal dependencies 68321 */ 68322 68323 68324 68325 68326 68327 68328const MAX_HISTORY_LENGTH = 50; 68329function screensReducer(state = [], action) { 68330 switch (action.type) { 68331 case 'add': 68332 return [...state, action.screen]; 68333 case 'remove': 68334 return state.filter(s => s.id !== action.screen.id); 68335 } 68336 return state; 68337}
68338var component_ref = true ? { 68339 name: "15bx5k", 68340 styles: "overflow-x:hidden" 68341} : 0; 68342function UnconnectedNavigatorProvider(props, forwardedRef) { 68343 const { 68344 initialPath, 68345 children, 68346 className, 68347 ...otherProps 68348 } = useContextSystem(props, 'NavigatorProvider'); 68349 const [locationHistory, setLocationHistory] = (0,external_wp_element_namespaceObject.useState)([{ 68350 path: initialPath 68351 }]); 68352 const currentLocationHistory = (0,external_wp_element_namespaceObject.useRef)([]); 68353 const [screens, dispatch] = (0,external_wp_element_namespaceObject.useReducer)(screensReducer, []); 68354 const currentScreens = (0,external_wp_element_namespaceObject.useRef)([]); 68355 (0,external_wp_element_namespaceObject.useEffect)(() => { 68356 currentScreens.current = screens; 68357 }, [screens]); 68358 (0,external_wp_element_namespaceObject.useEffect)(() => { 68359 currentLocationHistory.current = locationHistory; 68360 }, [locationHistory]); 68361 const currentMatch = (0,external_wp_element_namespaceObject.useRef)(); 68362 const matchedPath = (0,external_wp_element_namespaceObject.useMemo)(() => {
68363 let currentPath; 68364 if (locationHistory.length === 0 || (currentPath = locationHistory[locationHistory.length - 1].path) === undefined) { 68365 currentMatch.current = undefined; 68366 return undefined; 68367 } 68368 const resolvePath = path => { 68369 const newMatch = patternMatch(path, screens); 68370 68371 // If the new match is the same as the current match, 68372 // return the previous one for performance reasons. 68373 if (currentMatch.current && newMatch && external_wp_isShallowEqual_default()(newMatch.params, currentMatch.current.params) && newMatch.id === currentMatch.current.id) { 68374 return currentMatch.current; 68375 } 68376 return newMatch; 68377 }; 68378 const newMatch = resolvePath(currentPath); 68379 currentMatch.current = newMatch; 68380 return newMatch; 68381 }, [screens, locationHistory]); 68382 const addScreen = (0,external_wp_element_namespaceObject.useCallback)(screen => dispatch({ 68383 type: 'add', 68384 screen 68385 }), []); 68386 const removeScreen = (0,external_wp_element_namespaceObject.useCallback)(screen => dispatch({ 68387 type: 'remove', 68388 screen 68389 }), []); 68390 const goBack = (0,external_wp_element_namespaceObject.useCallback)(() => { 68391 setLocationHistory(prevLocationHistory => { 68392 if (prevLocationHistory.length <= 1) { 68393 return prevLocationHistory; 68394 } 68395 return [...prevLocationHistory.slice(0, -2), { 68396 ...prevLocationHistory[prevLocationHistory.length - 2], 68397 isBack: true, 68398 hasRestoredFocus: false 68399 }]; 68400 }); 68401 }, []); 68402 const goTo = (0,external_wp_element_namespaceObject.useCallback)((path, options = {}) => { 68403 const { 68404 focusTargetSelector, 68405 isBack = false, 68406 skipFocus = false, 68407 replace = false, 68408 ...restOptions 68409 } = options; 68410 const isNavigatingToPreviousPath = isBack && currentLocationHistory.current.length > 1 && currentLocationHistory.current[currentLocationHistory.current.length - 2].path === path; 68411 if (isNavigatingToPreviousPath) { 68412 goBack(); 68413 return; 68414 } 68415 setLocationHistory(prevLocationHistory => { 68416 const newLocation = { 68417 ...restOptions, 68418 path, 68419 isBack, 68420 hasRestoredFocus: false, 68421 skipFocus 68422 }; 68423 if (prevLocationHistory.length === 0) { 68424 return replace ? [] : [newLocation]; 68425 } 68426 const newLocationHistory = prevLocationHistory.slice(prevLocationHistory.length > MAX_HISTORY_LENGTH - 1 ? 1 : 0, -1); 68427 if (!replace) { 68428 newLocationHistory.push( 68429 // Assign `focusTargetSelector` to the previous location in history 68430 // (the one we just navigated from). 68431 { 68432 ...prevLocationHistory[prevLocationHistory.length - 1], 68433 focusTargetSelector 68434 }); 68435 } 68436 newLocationHistory.push(newLocation); 68437 return newLocationHistory; 68438 }); 68439 }, [goBack]); 68440 const goToParent = (0,external_wp_element_namespaceObject.useCallback)((options = {}) => { 68441 const currentPath = currentLocationHistory.current[currentLocationHistory.current.length - 1].path; 68442 if (currentPath === undefined) { 68443 return; 68444 } 68445 const parentPath = findParent(currentPath, currentScreens.current); 68446 if (parentPath === undefined) { 68447 return; 68448 } 68449 goTo(parentPath, { 68450 ...options, 68451 isBack: true 68452 }); 68453 }, [goTo]); 68454 const navigatorContextValue = (0,external_wp_element_namespaceObject.useMemo)(() => ({ 68455 location: { 68456 ...locationHistory[locationHistory.length - 1], 68457 isInitial: locationHistory.length === 1 68458 }, 68459 params: matchedPath ? matchedPath.params : {}, 68460 match: matchedPath ? matchedPath.id : undefined, 68461 goTo, 68462 goBack, 68463 goToParent, 68464 addScreen, 68465 removeScreen 68466 }), [locationHistory, matchedPath, goTo, goBack, goToParent, addScreen, removeScreen]); 68467 const cx = useCx(); 68468 const classes = (0,external_wp_element_namespaceObject.useMemo)( 68469 // Prevents horizontal overflow while animating screen transitions. 68470 () => cx(component_ref, className), [className, cx]); 68471 return (0,external_wp_element_namespaceObject.createElement)(component, { 68472 ref: forwardedRef, 68473 className: classes, 68474 ...otherProps 68475 }, (0,external_wp_element_namespaceObject.createElement)(NavigatorContext.Provider, { 68476 value: navigatorContextValue 68477 }, children)); 68478} 68479 68480/** 68481 * The `NavigatorProvider` component allows rendering nested views/panels/menus 68482 * (via the `NavigatorScreen` component and navigate between these different 68483 * view (via the `NavigatorButton` and `NavigatorBackButton` components or the 68484 * `useNavigator` hook). 68485 * 68486 * ```jsx 68487 * import { 68488 * __experimentalNavigatorProvider as NavigatorProvider, 68489 * __experimentalNavigatorScreen as NavigatorScreen, 68490 * __experimentalNavigatorButton as NavigatorButton, 68491 * __experimentalNavigatorBackButton as NavigatorBackButton, 68492 * } from '@wordpress/components'; 68493 * 68494 * const MyNavigation = () => ( 68495 * <NavigatorProvider initialPath="/"> 68496 * <NavigatorScreen path="/"> 68497 * <p>This is the home screen.</p> 68498 * <NavigatorButton path="/child"> 68499 * Navigate to child screen. 68500 * </NavigatorButton> 68501 * </NavigatorScreen> 68502 * 68503 * <NavigatorScreen path="/child"> 68504 * <p>This is the child screen.</p> 68505 * <NavigatorBackButton> 68506 * Go back 68507 * </NavigatorBackButton> 68508 * </NavigatorScreen> 68509 * </NavigatorProvider> 68510 * ); 68511 * ``` 68512 */ 68513const NavigatorProvider = contextConnect(UnconnectedNavigatorProvider, 'NavigatorProvider'); 68514/* harmony default export */ const navigator_provider_component = (NavigatorProvider); 68515 68516;
68516// CONCATENATED MODULE: external ["wp","escapeHtml"] 68517const external_wp_escapeHtml_namespaceObject = window["wp"]["escapeHtml"]; 68518;// CONCATENATED MODULE: ./packages/components/build-module/navigator/navigator-screen/component.js 68519 68520function 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)."; } 68521/** 68522 * External dependencies 68523 */ 68524 68525// eslint-disable-next-line no-restricted-imports 68526 68527// eslint-disable-next-line no-restricted-imports 68528 68529 68530 68531/** 68532 * WordPress dependencies 68533 */ 68534 68535 68536 68537 68538 68539 68540/** 68541 * Internal dependencies 68542 */ 68543 68544 68545 68546 68547 68548const animationEnterDelay = 0; 68549const animationEnterDuration = 0.14; 68550const animationExitDuration = 0.14; 68551const animationExitDelay = 0; 68552 68553// Props specific to `framer-motion` can't be currently passed to `NavigatorScreen`, 68554// as some of them would overlap with HTML props (e.g. `onAnimationStart`, ...) 68555var navigator_screen_component_ref = true ? { 68556 name: "14x3t6z", 68557 styles: "overflow-x:auto;max-height:100%" 68558} : 0; 68559function UnconnectedNavigatorScreen(props, forwardedRef) { 68560 const screenId = (0,external_wp_element_namespaceObject.useId)(); 68561 const { 68562 children, 68563 className, 68564 path, 68565 ...otherProps 68566 } = useContextSystem(props, 'NavigatorScreen'); 68567 const prefersReducedMotion = (0,external_wp_compose_namespaceObject.useReducedMotion)(); 68568 const { 68569 location, 68570 match, 68571 addScreen, 68572 removeScreen 68573 } = (0,external_wp_element_namespaceObject.useContext)(NavigatorContext); 68574 const isMatch = match === screenId; 68575 const wrapperRef = (0,external_wp_element_namespaceObject.useRef)(null); 68576 (0,external_wp_element_namespaceObject.useEffect)(() => { 68577 const screen = { 68578 id: screenId, 68579 path: (0,external_wp_escapeHtml_namespaceObject.escapeAttribute)(path) 68580 }; 68581 addScreen(screen); 68582 return () => removeScreen(screen); 68583 }, [screenId, path, addScreen, removeScreen]); 68584 const cx = useCx(); 68585 const classes = (0,external_wp_element_namespaceObject.useMemo)(() => cx(navigator_screen_component_ref, className), [className, cx]); 68586 const locationRef = (0,external_wp_element_namespaceObject.useRef)(location); 68587 (0,external_wp_element_namespaceObject.useEffect)(() => { 68588 locationRef.current = location; 68589 }, [location]); 68590 68591 // Focus restoration 68592 const isInitialLocation = location.isInitial && !location.isBack; 68593 (0,external_wp_element_namespaceObject.useEffect)(() => { 68594 // Only attempt to restore focus: 68595 // - if the current location is not the initial one (to avoid moving focus on page load) 68596 // - when the screen becomes visible 68597 // - if the wrapper ref has been assigned 68598 // - if focus hasn't already been restored for the current location 68599 // - if the `skipFocus` option is not set to `true`. This is useful when we trigger the navigation outside of NavigatorScreen. 68600 if (isInitialLocation || !isMatch || !wrapperRef.current || locationRef.current.hasRestoredFocus || location.skipFocus) { 68601 return; 68602 } 68603 const activeElement = wrapperRef.current.ownerDocument.activeElement; 68604 68605 // If an element is already focused within the wrapper do not focus the 68606 // element. This prevents inputs or buttons from losing focus unnecessarily. 68607 if (wrapperRef.current.contains(activeElement)) { 68608 return; 68609 } 68610 let elementToFocus = null; 68611 68612 // When navigating back, if a selector is provided, use it to look for the 68613 // target element (assumed to be a node inside the current NavigatorScreen) 68614 if (location.isBack && location?.focusTargetSelector) { 68615 elementToFocus = wrapperRef.current.querySelector(location.focusTargetSelector); 68616 } 68617 68618 // If the previous query didn't run or find any element to focus, fallback 68619 // to the first tabbable element in the screen (or the screen itself). 68620 if (!elementToFocus) { 68621 const firstTabbable = external_wp_dom_namespaceObject.focus.tabbable.find(wrapperRef.current)[0]; 68622 elementToFocus = firstTabbable !== null && firstTabbable !== void 0 ? firstTabbable : wrapperRef.current; 68623 } 68624 locationRef.current.hasRestoredFocus = true; 68625 elementToFocus.focus(); 68626 }, [isInitialLocation, isMatch, location.isBack, location.focusTargetSelector, location.skipFocus]); 68627 const mergedWrapperRef = (0,external_wp_compose_namespaceObject.useMergeRefs)([forwardedRef, wrapperRef]); 68628 if (!isMatch) { 68629 return null; 68630 } 68631 if (prefersReducedMotion) { 68632 return (0,external_wp_element_namespaceObject.createElement)(component, { 68633 ref: mergedWrapperRef, 68634 className: classes, 68635 ...otherProps 68636 }, children); 68637 } 68638 const animate = { 68639 opacity: 1, 68640 transition: { 68641 delay: animationEnterDelay, 68642 duration: animationEnterDuration, 68643 ease: 'easeInOut' 68644 }, 68645 x: 0 68646 }; 68647 // Disable the initial animation if the screen is the very first screen to be 68648 // rendered within the current `NavigatorProvider`. 68649 const initial = location.isInitial && !location.isBack ? false : { 68650 opacity: 0, 68651 x: (0,external_wp_i18n_namespaceObject.isRTL)() && location.isBack || !(0,external_wp_i18n_namespaceObject.isRTL)() && !location.isBack ? 50 : -50 68652 }; 68653 const exit = { 68654 delay: animationExitDelay, 68655 opacity: 0, 68656 x: !(0,external_wp_i18n_namespaceObject.isRTL)() && location.isBack || (0,external_wp_i18n_namespaceObject.isRTL)() && !location.isBack ? 50 : -50, 68657 transition: { 68658 duration: animationExitDuration, 68659 ease: 'easeInOut' 68660 } 68661 }; 68662 const animatedProps = { 68663 animate, 68664 exit, 68665 initial 68666 }; 68667 return (0,external_wp_element_namespaceObject.createElement)(motion.div, { 68668 ref: mergedWrapperRef, 68669 className: classes, 68670 ...otherProps, 68671 ...animatedProps 68672 }, children); 68673} 68674 68675/** 68676 * The `NavigatorScreen` component represents a single view/screen/panel and 68677 * should be used in combination with the `NavigatorProvider`, the 68678 * `NavigatorButton` and the `NavigatorBackButton` components (or the `useNavigator` 68679 * hook). 68680 * 68681 * @example 68682 * ```jsx 68683 * import { 68684 * __experimentalNavigatorProvider as NavigatorProvider, 68685 * __experimentalNavigatorScreen as NavigatorScreen, 68686 * __experimentalNavigatorButton as NavigatorButton, 68687 * __experimentalNavigatorBackButton as NavigatorBackButton, 68688 * } from '@wordpress/components'; 68689 * 68690 * const MyNavigation = () => ( 68691 * <NavigatorProvider initialPath="/"> 68692 * <NavigatorScreen path="/"> 68693 * <p>This is the home screen.</p> 68694 * <NavigatorButton path="/child"> 68695 * Navigate to child screen. 68696 * </NavigatorButton> 68697 * </NavigatorScreen> 68698 * 68699 * <NavigatorScreen path="/child"> 68700 * <p>This is the child screen.</p> 68701 * <NavigatorBackButton> 68702 * Go back 68703 * </NavigatorBackButton> 68704 * </NavigatorScreen> 68705 * </NavigatorProvider> 68706 * ); 68707 * ``` 68708 */ 68709const NavigatorScreen = contextConnect(UnconnectedNavigatorScreen, 'NavigatorScreen'); 68710/* harmony default export */ const navigator_screen_component = (NavigatorScreen); 68711 68712;// CONCATENATED MODULE: ./packages/components/build-module/navigator/use-navigator.js 68713/** 68714 * WordPress dependencies 68715 */ 68716 68717 68718/** 68719 * Internal dependencies 68720 */ 68721
68722/** 68723 * Retrieves a `navigator` instance. 68724 */ 68725function useNavigator() { 68726 const { 68727 location, 68728 params, 68729 goTo, 68730 goBack, 68731 goToParent 68732 } = (0,external_wp_element_namespaceObject.useContext)(NavigatorContext); 68733 return { 68734 location, 68735 goTo, 68736 goBack, 68737 goToParent, 68738 params 68739 }; 68740} 68741/* harmony default export */ const use_navigator = (useNavigator); 68742 68743;// CONCATENATED MODULE: ./packages/components/build-module/navigator/navigator-button/hook.js 68744/** 68745 * WordPress dependencies 68746 */ 68747 68748 68749 68750/** 68751 * Internal dependencies 68752 */ 68753 68754 68755 68756 68757const cssSelectorForAttribute = (attrName, attrValue) => `[${attrName}="${attrValue}"]`; 68758function useNavigatorButton(props) { 68759 const { 68760 path, 68761 onClick, 68762 as = build_module_button, 68763 attributeName = 'id', 68764 ...otherProps 68765 } = useContextSystem(props, 'NavigatorButton'); 68766 const escapedPath = (0,external_wp_escapeHtml_namespaceObject.escapeAttribute)(path); 68767 const { 68768 goTo 68769 } = use_navigator(); 68770 const handleClick = (0,external_wp_element_namespaceObject.useCallback)(e => { 68771 e.preventDefault(); 68772 goTo(escapedPath, { 68773 focusTargetSelector: cssSelectorForAttribute(attributeName, escapedPath) 68774 }); 68775 onClick?.(e); 68776 }, [goTo, onClick, attributeName, escapedPath]); 68777 return { 68778 as, 68779 onClick: handleClick, 68780 ...otherProps, 68781 [attributeName]: escapedPath 68782 }; 68783} 68784 68785;// CONCATENATED MODULE: ./packages/components/build-module/navigator/navigator-button/component.js 68786 68787/** 68788 * External dependencies 68789 */ 68790 68791/** 68792 * Internal dependencies 68793 */ 68794 68795 68796 68797 68798function UnconnectedNavigatorButton(props, forwardedRef) { 68799 const navigatorButtonProps = useNavigatorButton(props); 68800 return (0,external_wp_element_namespaceObject.createElement)(component, { 68801 ref: forwardedRef, 68802 ...navigatorButtonProps 68803 }); 68804} 68805 68806/** 68807 * The `NavigatorButton` component can be used to navigate to a screen and should 68808 * be used in combination with the `NavigatorProvider`, the `NavigatorScreen` 68809 * and the `NavigatorBackButton` components (or the `useNavigator` hook). 68810 * 68811 * @example 68812 * ```jsx 68813 * import { 68814 * __experimentalNavigatorProvider as NavigatorProvider, 68815 * __experimentalNavigatorScreen as NavigatorScreen, 68816 * __experimentalNavigatorButton as NavigatorButton, 68817 * __experimentalNavigatorBackButton as NavigatorBackButton, 68818 * } from '@wordpress/components'; 68819 * 68820 * const MyNavigation = () => ( 68821 * <NavigatorProvider initialPath="/"> 68822 * <NavigatorScreen path="/"> 68823 * <p>This is the home screen.</p> 68824 * <NavigatorButton path="/child"> 68825 * Navigate to child screen. 68826 * </NavigatorButton> 68827 * </NavigatorScreen> 68828 * 68829 * <NavigatorScreen path="/child"> 68830 * <p>This is the child screen.</p> 68831 * <NavigatorBackButton> 68832 * Go back 68833 * </NavigatorBackButton> 68834 * </NavigatorScreen> 68835 * </NavigatorProvider> 68836 * ); 68837 * ``` 68838 */ 68839const NavigatorButton = contextConnect(UnconnectedNavigatorButton, 'NavigatorButton'); 68840/* harmony default export */ const navigator_button_component = (NavigatorButton); 68841 68842;// CONCATENATED MODULE: ./packages/components/build-module/navigator/navigator-back-button/hook.js 68843/** 68844 * WordPress dependencies 68845 */ 68846 68847 68848/** 68849 * Internal dependencies 68850 */ 68851 68852 68853 68854 68855function useNavigatorBackButton(props) { 68856 const { 68857 onClick, 68858 as = build_module_button, 68859 goToParent: goToParentProp = false, 68860 ...otherProps 68861 } = useContextSystem(props, 'NavigatorBackButton'); 68862 const { 68863 goBack, 68864 goToParent 68865 } = use_navigator(); 68866 const handleClick = (0,external_wp_element_namespaceObject.useCallback)(e => { 68867 e.preventDefault(); 68868 if (goToParentProp) { 68869 goToParent(); 68870 } else { 68871 goBack(); 68872 } 68873 onClick?.(e); 68874 }, [goToParentProp, goToParent, goBack, onClick]); 68875 return { 68876 as, 68877 onClick: handleClick, 68878 ...otherProps 68879 }; 68880} 68881 68882;// CONCATENATED MODULE: ./packages/components/build-module/navigator/navigator-back-button/component.js 68883 68884/** 68885 * External dependencies 68886 */ 68887 68888/** 68889 * Internal dependencies 68890 */ 68891 68892 68893 68894 68895function UnconnectedNavigatorBackButton(props, forwardedRef) { 68896 const navigatorBackButtonProps = useNavigatorBackButton(props); 68897 return (0,external_wp_element_namespaceObject.createElement)(component, { 68898 ref: forwardedRef, 68899 ...navigatorBackButtonProps 68900 }); 68901} 68902 68903/** 68904 * The `NavigatorBackButton` component can be used to navigate to a screen and 68905 * should be used in combination with the `NavigatorProvider`, the 68906 * `NavigatorScreen` and the `NavigatorButton` components (or the `useNavigator` 68907 * hook). 68908 * 68909 * @example 68910 * ```jsx 68911 * import { 68912 * __experimentalNavigatorProvider as NavigatorProvider, 68913 * __experimentalNavigatorScreen as NavigatorScreen, 68914 * __experimentalNavigatorButton as NavigatorButton, 68915 * __experimentalNavigatorBackButton as NavigatorBackButton, 68916 * } from '@wordpress/components'; 68917 * 68918 * const MyNavigation = () => ( 68919 * <NavigatorProvider initialPath="/"> 68920 * <NavigatorScreen path="/"> 68921 * <p>This is the home screen.</p> 68922 * <NavigatorButton path="/child"> 68923 * Navigate to child screen. 68924 * </NavigatorButton> 68925 * </NavigatorScreen> 68926 * 68927 * <NavigatorScreen path="/child"> 68928 * <p>This is the child screen.</p> 68929 * <NavigatorBackButton> 68930 * Go back 68931 * </NavigatorBackButton> 68932 * </NavigatorScreen> 68933 * </NavigatorProvider> 68934 * ); 68935 * ``` 68936 */ 68937const NavigatorBackButton = contextConnect(UnconnectedNavigatorBackButton, 'NavigatorBackButton'); 68938/* harmony default export */ const navigator_back_button_component = (NavigatorBackButton); 68939 68940;// CONCATENATED MODULE: ./packages/components/build-module/navigator/navigator-to-parent-button/component.js 68941 68942/** 68943 * External dependencies 68944 */ 68945
68946/** 68947 * Internal dependencies 68948 */ 68949 68950 68951 68952 68953function UnconnectedNavigatorToParentButton(props, forwardedRef) { 68954 const navigatorToParentButtonProps = useNavigatorBackButton({ 68955 ...props, 68956 goToParent: true 68957 }); 68958 return (0,external_wp_element_namespaceObject.createElement)(component, { 68959 ref: forwardedRef, 68960 ...navigatorToParentButtonProps 68961 }); 68962} 68963 68964/* 68965 * The `NavigatorToParentButton` component can be used to navigate to a screen and 68966 * should be used in combination with the `NavigatorProvider`, the 68967 * `NavigatorScreen` and the `NavigatorButton` components (or the `useNavigator` 68968 * hook). 68969 * 68970 * @example 68971 * ```jsx 68972 * import { 68973 * __experimentalNavigatorProvider as NavigatorProvider, 68974 * __experimentalNavigatorScreen as NavigatorScreen, 68975 * __experimentalNavigatorButton as NavigatorButton, 68976 * __experimentalNavigatorToParentButton as NavigatorToParentButton, 68977 * } from '@wordpress/components'; 68978 * 68979 * const MyNavigation = () => ( 68980 * <NavigatorProvider initialPath="/"> 68981 * <NavigatorScreen path="/"> 68982 * <p>This is the home screen.</p> 68983 * <NavigatorButton path="/child"> 68984 * Navigate to child screen. 68985 * </NavigatorButton> 68986 * </NavigatorScreen> 68987 * 68988 * <NavigatorScreen path="/child"> 68989 * <p>This is the child screen.</p> 68990 * <NavigatorToParentButton> 68991 * Go to parent 68992 * </NavigatorToParentButton> 68993 * </NavigatorScreen> 68994 * </NavigatorProvider> 68995 * ); 68996 * ``` 68997 */ 68998const NavigatorToParentButton = contextConnect(UnconnectedNavigatorToParentButton, 'NavigatorToParentButton'); 68999/* harmony default export */ const navigator_to_parent_button_component = (NavigatorToParentButton); 69000 69001;// CONCATENATED MODULE: ./packages/components/build-module/notice/index.js 69002 69003/** 69004 * External dependencies 69005 */ 69006 69007 69008/** 69009 * WordPress dependencies 69010 */ 69011 69012 69013 69014 69015 69016/** 69017 * Internal dependencies 69018 */ 69019 69020 69021const notice_noop = () => {}; 69022 69023/** 69024 * Custom hook which announces the message with the given politeness, if a 69025 * valid message is provided. 69026 */ 69027function useSpokenMessage(message, politeness) { 69028 const spokenMessage = typeof message === 'string' ? message : (0,external_wp_element_namespaceObject.renderToString)(message); 69029 (0,external_wp_element_namespaceObject.useEffect)(() => { 69030 if (spokenMessage) { 69031 (0,external_wp_a11y_namespaceObject.speak)(spokenMessage, politeness); 69032 } 69033 }, [spokenMessage, politeness]); 69034} 69035function getDefaultPoliteness(status) { 69036 switch (status) { 69037 case 'success': 69038 case 'warning': 69039 case 'info': 69040 return 'polite'; 69041 // The default will also catch the 'error' status. 69042 default: 69043 return 'assertive'; 69044 } 69045} 69046function getStatusLabel(status) { 69047 switch (status) { 69048 case 'warning': 69049 return (0,external_wp_i18n_namespaceObject.__)('Warning notice'); 69050 case 'info': 69051 return (0,external_wp_i18n_namespaceObject.__)('Information notice'); 69052 case 'error': 69053 return (0,external_wp_i18n_namespaceObject.__)('Error notice'); 69054 // The default will also catch the 'success' status. 69055 default: 69056 return (0,external_wp_i18n_namespaceObject.__)('Notice'); 69057 } 69058} 69059 69060/** 69061 * `Notice` is a component used to communicate feedback to the user. 69062 * 69063 *```jsx 69064 * import { Notice } from `@wordpress/components`; 69065 * 69066 * const MyNotice = () => ( 69067 * <Notice status="error">An unknown error occurred.</Notice> 69068 * ); 69069 * ``` 69070 */ 69071function Notice({ 69072 className, 69073 status = 'info', 69074 children, 69075 spokenMessage = children, 69076 onRemove = notice_noop, 69077 isDismissible = true, 69078 actions = [], 69079 politeness = getDefaultPoliteness(status), 69080 __unstableHTML, 69081 // onDismiss is a callback executed when the notice is dismissed. 69082 // It is distinct from onRemove, which _looks_ like a callback but is 69083 // actually the function to call to remove the notice from the UI. 69084 onDismiss = notice_noop 69085}) { 69086 useSpokenMessage(spokenMessage, politeness); 69087 const classes = classnames_default()(className, 'components-notice', 'is-' + status, { 69088 'is-dismissible': isDismissible 69089 }); 69090 if (__unstableHTML && typeof children === 'string') { 69091 children = (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.RawHTML, null, children); 69092 } 69093 const onDismissNotice = () => { 69094 onDismiss(); 69095 onRemove(); 69096 }; 69097 return (0,external_wp_element_namespaceObject.createElement)("div", { 69098 className: classes 69099 }, (0,external_wp_element_namespaceObject.createElement)(visually_hidden_component, null, getStatusLabel(status)), (0,external_wp_element_namespaceObject.createElement)("div", { 69100 className: "components-notice__content" 69101 }, children, (0,external_wp_element_namespaceObject.createElement)("div", { 69102 className: "components-notice__actions" 69103 }, actions.map(({ 69104 className: buttonCustomClasses, 69105 label, 69106 isPrimary, 69107 variant, 69108 noDefaultClasses = false, 69109 onClick, 69110 url 69111 }, index) => {
69112 let computedVariant = variant; 69113 if (variant !== 'primary' && !noDefaultClasses) { 69114 computedVariant = !url ? 'secondary' : 'link'; 69115 } 69116 if (typeof computedVariant === 'undefined' && isPrimary) { 69117 computedVariant = 'primary'; 69118 } 69119 return (0,external_wp_element_namespaceObject.createElement)(build_module_button, { 69120 key: index, 69121 href: url, 69122 variant: computedVariant, 69123 onClick: url ? undefined : onClick, 69124 className: classnames_default()('components-notice__action', buttonCustomClasses) 69125 }, label); 69126 }))), isDismissible && (0,external_wp_element_namespaceObject.createElement)(build_module_button, { 69127 className: "components-notice__dismiss", 69128 icon: library_close, 69129 label: (0,external_wp_i18n_namespaceObject.__)('Close'), 69130 onClick: onDismissNotice 69131 })); 69132} 69133/* harmony default export */ const build_module_notice = (Notice); 69134 69135;// CONCATENATED MODULE: ./packages/components/build-module/notice/list.js 69136 69137/** 69138 * External dependencies 69139 */ 69140 69141 69142/** 69143 * Internal dependencies 69144 */ 69145 69146const list_noop = () => {}; 69147 69148/** 69149 * `NoticeList` is a component used to render a collection of notices. 69150 * 69151 *```jsx 69152 * import { Notice, NoticeList } from `@wordpress/components`; 69153 * 69154 * const MyNoticeList = () => { 69155 * const [ notices, setNotices ] = useState( [ 69156 * { 69157 * id: 'second-notice', 69158 * content: 'second notice content', 69159 * }, 69160 * { 69161 * id: 'fist-notice', 69162 * content: 'first notice content', 69163 * }, 69164 * ] ); 69165 * 69166 * const removeNotice = ( id ) => { 69167 * setNotices( notices.filter( ( notice ) => notice.id !== id ) ); 69168 * }; 69169 * 69170 * return <NoticeList notices={ notices } onRemove={ removeNotice } />; 69171 *}; 69172 *``` 69173 */ 69174function NoticeList({ 69175 notices, 69176 onRemove = list_noop, 69177 className, 69178 children 69179}) { 69180 const removeNotice = id => () => onRemove(id); 69181 className = classnames_default()('components-notice-list', className); 69182 return (0,external_wp_element_namespaceObject.createElement)("div", { 69183 className: className 69184 }, children, [...notices].reverse().map(notice => { 69185 const { 69186 content, 69187 ...restNotice 69188 } = notice; 69189 return (0,external_wp_element_namespaceObject.createElement)(build_module_notice, { 69190 ...restNotice, 69191 key: notice.id, 69192 onRemove: removeNotice(notice.id) 69193 }, notice.content); 69194 })); 69195} 69196/* harmony default export */ const list = (NoticeList); 69197 69198;// CONCATENATED MODULE: ./packages/components/build-module/panel/header.js 69199 69200/** 69201 * Internal dependencies 69202 */ 69203 69204/** 69205 * `PanelHeader` renders the header for the `Panel`. 69206 * This is used by the `Panel` component under the hood, 69207 * so it does not typically need to be used. 69208 */ 69209function PanelHeader({ 69210 label, 69211 children 69212}) { 69213 return (0,external_wp_element_namespaceObject.createElement)("div", { 69214 className: "components-panel__header" 69215 }, label && (0,external_wp_element_namespaceObject.createElement)("h2", null, label), children); 69216} 69217/* harmony default export */ const panel_header = (PanelHeader); 69218 69219;// CONCATENATED MODULE: ./packages/components/build-module/panel/index.js 69220 69221/** 69222 * External dependencies 69223 */ 69224 69225 69226/** 69227 * WordPress dependencies 69228 */ 69229 69230 69231/** 69232 * Internal dependencies 69233 */ 69234 69235function UnforwardedPanel({ 69236 header, 69237 className, 69238 children 69239}, ref) { 69240 const classNames = classnames_default()(className, 'components-panel'); 69241 return (0,external_wp_element_namespaceObject.createElement)("div", { 69242 className: classNames, 69243 ref: ref 69244 }, header && (0,external_wp_element_namespaceObject.createElement)(panel_header, { 69245 label: header 69246 }), children); 69247} 69248 69249/** 69250 * `Panel` expands and collapses multiple sections of content. 69251 * 69252 * ```jsx 69253 * import { Panel, PanelBody, PanelRow } from '@wordpress/components'; 69254 * import { more } from '@wordpress/icons'; 69255 * 69256 * const MyPanel = () => ( 69257 * <Panel header="My Panel"> 69258 * <PanelBody title="My Block Settings" icon={ more } initialOpen={ true }> 69259 * <PanelRow>My Panel Inputs and Labels</PanelRow> 69260 * </PanelBody> 69261 * </Panel> 69262 * ); 69263 * ``` 69264 */ 69265const Panel = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedPanel); 69266/* harmony default export */ const panel = (Panel); 69267 69268;// CONCATENATED MODULE: ./packages/icons/build-module/library/chevron-up.js 69269 69270/** 69271 * WordPress dependencies 69272 */ 69273 69274const chevronUp = (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.SVG, { 69275 viewBox: "0 0 24 24", 69276 xmlns: "http://www.w3.org/2000/svg" 69277}, (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.Path, { 69278 d: "M6.5 12.4L12 8l5.5 4.4-.9 1.2L12 10l-4.5 3.6-1-1.2z" 69279})); 69280/* harmony default export */ const chevron_up = (chevronUp); 69281 69282;// CONCATENATED MODULE: ./packages/components/build-module/panel/body.js 69283 69284/** 69285 * External dependencies 69286 */ 69287 69288 69289/** 69290 * WordPress dependencies 69291 */ 69292 69293 69294 69295 69296/** 69297 * Internal dependencies 69298 */ 69299 69300 69301 69302 69303const body_noop = () => {}; 69304function UnforwardedPanelBody(props, ref) { 69305 const { 69306 buttonProps = {}, 69307 children, 69308 className, 69309 icon, 69310 initialOpen, 69311 onToggle = body_noop, 69312 opened, 69313 title, 69314 scrollAfterOpen = true 69315 } = props; 69316 const [isOpened, setIsOpened] = use_controlled_state(opened, { 69317 initial: initialOpen === undefined ? true : initialOpen, 69318 fallback: false 69319 }); 69320 const nodeRef = (0,external_wp_element_namespaceObject.useRef)(null); 69321 69322 // Defaults to 'smooth' scrolling 69323 // https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView 69324 const scrollBehavior = (0,external_wp_compose_namespaceObject.useReducedMotion)() ? 'auto' : 'smooth'; 69325 const handleOnToggle = event => { 69326 event.preventDefault(); 69327 const next = !isOpened; 69328 setIsOpened(next); 69329 onToggle(next); 69330 }; 69331 69332 // Ref is used so that the effect does not re-run upon scrollAfterOpen changing value. 69333 const scrollAfterOpenRef = (0,external_wp_element_namespaceObject.useRef)(); 69334 scrollAfterOpenRef.current = scrollAfterOpen; 69335 // Runs after initial render. 69336 use_update_effect(() => { 69337 if (isOpened && scrollAfterOpenRef.current && nodeRef.current?.scrollIntoView) { 69338 /* 69339 * Scrolls the content into view when visible. 69340 * This improves the UX when there are multiple stacking <PanelBody /> 69341 * components in a scrollable container. 69342 */ 69343 nodeRef.current.scrollIntoView({
69344 inline: 'nearest', 69345 block: 'nearest', 69346 behavior: scrollBehavior 69347 }); 69348 } 69349 }, [isOpened, scrollBehavior]); 69350 const classes = classnames_default()('components-panel__body', className, { 69351 'is-opened': isOpened 69352 }); 69353 return (0,external_wp_element_namespaceObject.createElement)("div", { 69354 className: classes, 69355 ref: (0,external_wp_compose_namespaceObject.useMergeRefs)([nodeRef, ref]) 69356 }, (0,external_wp_element_namespaceObject.createElement)(PanelBodyTitle, { 69357 icon: icon, 69358 isOpened: Boolean(isOpened), 69359 onClick: handleOnToggle, 69360 title: title, 69361 ...buttonProps 69362 }), typeof children === 'function' ? children({ 69363 opened: Boolean(isOpened) 69364 }) : isOpened && children); 69365} 69366const PanelBodyTitle = (0,external_wp_element_namespaceObject.forwardRef)(({ 69367 isOpened, 69368 icon, 69369 title, 69370 ...props 69371}, ref) => { 69372 if (!title) return null; 69373 return (0,external_wp_element_namespaceObject.createElement)("h2", { 69374 className: "components-panel__body-title" 69375 }, (0,external_wp_element_namespaceObject.createElement)(build_module_button, { 69376 className: "components-panel__body-toggle", 69377 "aria-expanded": isOpened, 69378 ref: ref, 69379 ...props 69380 }, (0,external_wp_element_namespaceObject.createElement)("span", { 69381 "aria-hidden": "true" 69382 }, (0,external_wp_element_namespaceObject.createElement)(build_module_icon, { 69383 className: "components-panel__arrow", 69384 icon: isOpened ? chevron_up : chevron_down 69385 })), title, icon && (0,external_wp_element_namespaceObject.createElement)(build_module_icon, { 69386 icon: icon, 69387 className: "components-panel__icon", 69388 size: 20 69389 }))); 69390}); 69391const PanelBody = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedPanelBody); 69392/* harmony default export */ const body = (PanelBody); 69393 69394;// CONCATENATED MODULE: ./packages/components/build-module/panel/row.js 69395 69396/** 69397 * External dependencies 69398 */ 69399 69400 69401/** 69402 * WordPress dependencies 69403 */ 69404 69405function UnforwardedPanelRow({ 69406 className, 69407 children 69408}, ref) { 69409 return (0,external_wp_element_namespaceObject.createElement)("div", { 69410 className: classnames_default()('components-panel__row', className), 69411 ref: ref 69412 }, children); 69413} 69414 69415/** 69416 * `PanelRow` is a generic container for rows within a `PanelBody`. 69417 * It is a flex container with a top margin for spacing. 69418 */ 69419const PanelRow = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedPanelRow); 69420/* harmony default export */ const row = (PanelRow); 69421 69422;// CONCATENATED MODULE: ./packages/components/build-module/placeholder/index.js 69423 69424/** 69425 * External dependencies 69426 */ 69427 69428 69429/** 69430 * WordPress dependencies 69431 */ 69432 69433 69434 69435 69436 69437/** 69438 * Internal dependencies 69439 */ 69440 69441const PlaceholderIllustration = (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.SVG, { 69442 className: "components-placeholder__illustration", 69443 fill: "none", 69444 xmlns: "http://www.w3.org/2000/svg", 69445 viewBox: "0 0 60 60", 69446 preserveAspectRatio: "none" 69447}, (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.Path, { 69448 vectorEffect: "non-scaling-stroke", 69449 d: "M60 60 0 0" 69450})); 69451 69452/** 69453 * Renders a placeholder. Normally used by blocks to render their empty state. 69454 * 69455 * ```jsx 69456 * import { Placeholder } from '@wordpress/components'; 69457 * import { more } from '@wordpress/icons'; 69458 * 69459 * const MyPlaceholder = () => <Placeholder icon={ more } label="Placeholder" />; 69460 * ``` 69461 */ 69462function Placeholder(props) { 69463 const { 69464 icon, 69465 children, 69466 label, 69467 instructions, 69468 className, 69469 notices, 69470 preview, 69471 isColumnLayout, 69472 withIllustration, 69473 ...additionalProps 69474 } = props; 69475 const [resizeListener, { 69476 width 69477 }] = (0,external_wp_compose_namespaceObject.useResizeObserver)(); 69478 69479 // Since `useResizeObserver` will report a width of `null` until after the 69480 // first render, avoid applying any modifier classes until width is known. 69481 let modifierClassNames; 69482 if (typeof width === 'number') { 69483 modifierClassNames = { 69484 'is-large': width >= 480, 69485 'is-medium': width >= 160 && width < 480, 69486 'is-small': width < 160 69487 }; 69488 } 69489 const classes = classnames_default()('components-placeholder', className, modifierClassNames, withIllustration ? 'has-illustration' : null); 69490 const fieldsetClasses = classnames_default()('components-placeholder__fieldset', { 69491 'is-column-layout': isColumnLayout 69492 }); 69493 (0,external_wp_element_namespaceObject.useEffect)(() => { 69494 if (instructions) { 69495 (0,external_wp_a11y_namespaceObject.speak)(instructions); 69496 } 69497 }, [instructions]); 69498 return (0,external_wp_element_namespaceObject.createElement)("div", { 69499 ...additionalProps, 69500 className: classes 69501 }, withIllustration ? PlaceholderIllustration : null, resizeListener, notices, preview && (0,external_wp_element_namespaceObject.createElement)("div", { 69502 className: "components-placeholder__preview" 69503 }, preview), (0,external_wp_element_namespaceObject.createElement)("div", { 69504 className: "components-placeholder__label" 69505 }, (0,external_wp_element_namespaceObject.createElement)(build_module_icon, { 69506 icon: icon 69507 }), label), !!instructions && (0,external_wp_element_namespaceObject.createElement)("div", { 69508 className: "components-placeholder__instructions" 69509 }, instructions), (0,external_wp_element_namespaceObject.createElement)("div", { 69510 className: fieldsetClasses 69511 }, children)); 69512} 69513/* harmony default export */ const placeholder = (Placeholder); 69514 69515;// CONCATENATED MODULE: ./packages/components/build-module/query-controls/terms.js 69516/** 69517 * Internal dependencies 69518 */ 69519 69520const ensureParentsAreDefined = terms => { 69521 return terms.every(term => term.parent !== null); 69522}; 69523/** 69524 * Returns terms in a tree form. 69525 * 69526 * @param flatTerms Array of terms in flat format. 69527 * 69528 * @return Terms in tree format. 69529 */ 69530function buildTermsTree(flatTerms) { 69531 const flatTermsWithParentAndChildren = flatTerms.map(term => ({ 69532 children: [], 69533 parent: null, 69534 ...term, 69535 id: String(term.id) 69536 })); 69537 69538 // We use a custom type guard here to ensure that the parent property is 69539 // defined on all terms. The type of the `parent` property is `number | null` 69540 // and we need to ensure that it is `number`. This is because we use the 69541 // `parent` property as a key in the `termsByParent` object. 69542 if (!ensureParentsAreDefined(flatTermsWithParentAndChildren)) { 69543 return flatTermsWithParentAndChildren; 69544 } 69545 const termsByParent = flatTermsWithParentAndChildren.reduce((acc, term) => { 69546 const { 69547 parent 69548 } = term; 69549 if (!acc[parent]) { 69550 acc[parent] = []; 69551 } 69552 acc[parent].push(term); 69553 return acc; 69554 }, {}); 69555 const fillWithChildren = terms => { 69556 return terms.map(term => { 69557 const children = termsByParent[term.id]; 69558 return { 69559 ...term, 69560 children: children && children.length ? fillWithChildren(children) : [] 69561 }; 69562 }); 69563 }; 69564 return fillWithChildren(termsByParent['0'] || []); 69565} 69566 69567;
69567// CONCATENATED MODULE: external ["wp","htmlEntities"] 69568const external_wp_htmlEntities_namespaceObject = window["wp"]["htmlEntities"]; 69569;// CONCATENATED MODULE: ./packages/components/build-module/tree-select/index.js 69570 69571/** 69572 * WordPress dependencies 69573 */ 69574 69575 69576 69577/** 69578 * Internal dependencies 69579 */ 69580 69581function getSelectOptions(tree, level = 0) { 69582 return tree.flatMap(treeNode => [{ 69583 value: treeNode.id, 69584 label: '\u00A0'.repeat(level * 3) + (0,external_wp_htmlEntities_namespaceObject.decodeEntities)(treeNode.name) 69585 }, ...getSelectOptions(treeNode.children || [], level + 1)]); 69586} 69587 69588/** 69589 * TreeSelect component is used to generate select input fields. 69590 * 69591 * ```jsx 69592 * import { TreeSelect } from '@wordpress/components'; 69593 * import { useState } from '@wordpress/element'; 69594 * 69595 * const MyTreeSelect = () => { 69596 * const [ page, setPage ] = useState( 'p21' ); 69597 * 69598 * return ( 69599 * <TreeSelect 69600 * label="Parent page" 69601 * noOptionLabel="No parent page" 69602 * onChange={ ( newPage ) => setPage( newPage ) } 69603 * selectedId={ page } 69604 * tree={ [ 69605 * { 69606 * name: 'Page 1', 69607 * id: 'p1', 69608 * children: [ 69609 * { name: 'Descend 1 of page 1', id: 'p11' }, 69610 * { name: 'Descend 2 of page 1', id: 'p12' }, 69611 * ], 69612 * }, 69613 * { 69614 * name: 'Page 2', 69615 * id: 'p2', 69616 * children: [ 69617 * { 69618 * name: 'Descend 1 of page 2', 69619 * id: 'p21', 69620 * children: [ 69621 * { 69622 * name: 'Descend 1 of Descend 1 of page 2', 69623 * id: 'p211', 69624 * }, 69625 * ], 69626 * }, 69627 * ], 69628 * }, 69629 * ] } 69630 * /> 69631 * ); 69632 * } 69633 * ``` 69634 */ 69635 69636function TreeSelect({ 69637 label, 69638 noOptionLabel, 69639 onChange, 69640 selectedId, 69641 tree = [], 69642 ...props 69643}) { 69644 const options = (0,external_wp_element_namespaceObject.useMemo)(() => { 69645 return [noOptionLabel && { 69646 value: '', 69647 label: noOptionLabel 69648 }, ...getSelectOptions(tree)].filter(option => !!option); 69649 }, [noOptionLabel, tree]); 69650 return (0,external_wp_element_namespaceObject.createElement)(SelectControl, { 69651 label, 69652 options, 69653 onChange, 69654 value: selectedId, 69655 ...props 69656 }); 69657} 69658/* harmony default export */ const tree_select = (TreeSelect); 69659 69660;// CONCATENATED MODULE: ./packages/components/build-module/query-controls/author-select.js 69661 69662/** 69663 * Internal dependencies 69664 */ 69665 69666 69667function AuthorSelect({ 69668 label, 69669 noOptionLabel, 69670 authorList, 69671 selectedAuthorId, 69672 onChange: onChangeProp 69673}) { 69674 if (!authorList) return null; 69675 const termsTree = buildTermsTree(authorList); 69676 return (0,external_wp_element_namespaceObject.createElement)(tree_select, { 69677 label, 69678 noOptionLabel, 69679 onChange: onChangeProp, 69680 tree: termsTree, 69681 selectedId: selectedAuthorId !== undefined ? String(selectedAuthorId) : undefined, 69682 __nextHasNoMarginBottom: true 69683 }); 69684} 69685 69686;// CONCATENATED MODULE: ./packages/components/build-module/query-controls/category-select.js 69687 69688/** 69689 * Internal dependencies 69690 */ 69691 69692 69693 69694/** 69695 * WordPress dependencies 69696 */ 69697 69698function CategorySelect({ 69699 label, 69700 noOptionLabel, 69701 categoriesList, 69702 selectedCategoryId, 69703 onChange: onChangeProp, 69704 ...props 69705}) { 69706 const termsTree = (0,external_wp_element_namespaceObject.useMemo)(() => { 69707 return buildTermsTree(categoriesList); 69708 }, [categoriesList]); 69709 return (0,external_wp_element_namespaceObject.createElement)(tree_select, { 69710 label, 69711 noOptionLabel, 69712 onChange: onChangeProp, 69713 tree: termsTree, 69714 selectedId: selectedCategoryId !== undefined ? String(selectedCategoryId) : undefined, 69715 ...props, 69716 __nextHasNoMarginBottom: true 69717 }); 69718} 69719 69720;// CONCATENATED MODULE: ./packages/components/build-module/query-controls/index.js 69721 69722/** 69723 * WordPress dependencies 69724 */ 69725 69726 69727/** 69728 * Internal dependencies 69729 */ 69730 69731 69732 69733 69734 69735 69736const DEFAULT_MIN_ITEMS = 1; 69737const DEFAULT_MAX_ITEMS = 100; 69738const MAX_CATEGORIES_SUGGESTIONS = 20; 69739function isSingleCategorySelection(props) { 69740 return 'categoriesList' in props; 69741} 69742function isMultipleCategorySelection(props) { 69743 return 'categorySuggestions' in props; 69744} 69745 69746/** 69747 * Controls to query for posts. 69748 * 69749 * ```jsx 69750 * const MyQueryControls = () => ( 69751 * <QueryControls 69752 * { ...{ maxItems, minItems, numberOfItems, order, orderBy } } 69753 * onOrderByChange={ ( newOrderBy ) => { 69754 * updateQuery( { orderBy: newOrderBy } ) 69755 * } 69756 * onOrderChange={ ( newOrder ) => { 69757 * updateQuery( { order: newOrder } ) 69758 * } 69759 * categoriesList={ categories } 69760 * selectedCategoryId={ category } 69761 * onCategoryChange={ ( newCategory ) => { 69762 * updateQuery( { category: newCategory } ) 69763 * } 69764 * onNumberOfItemsChange={ ( newNumberOfItems ) => { 69765 * updateQuery( { numberOfItems: newNumberOfItems } ) 69766 * } } 69767 * /> 69768 * ); 69769 * ``` 69770 */
69771function QueryControls({ 69772 authorList, 69773 selectedAuthorId, 69774 numberOfItems, 69775 order, 69776 orderBy, 69777 maxItems = DEFAULT_MAX_ITEMS, 69778 minItems = DEFAULT_MIN_ITEMS, 69779 onAuthorChange, 69780 onNumberOfItemsChange, 69781 onOrderChange, 69782 onOrderByChange, 69783 // Props for single OR multiple category selection are not destructured here, 69784 // but instead are destructured inline where necessary. 69785 ...props 69786}) { 69787 return (0,external_wp_element_namespaceObject.createElement)(v_stack_component, { 69788 spacing: "4", 69789 className: "components-query-controls" 69790 }, [onOrderChange && onOrderByChange && (0,external_wp_element_namespaceObject.createElement)(select_control, { 69791 __nextHasNoMarginBottom: true, 69792 key: "query-controls-order-select", 69793 label: (0,external_wp_i18n_namespaceObject.__)('Order by'), 69794 value: `${orderBy}/${order}`, 69795 options: [{ 69796 label: (0,external_wp_i18n_namespaceObject.__)('Newest to oldest'), 69797 value: 'date/desc' 69798 }, { 69799 label: (0,external_wp_i18n_namespaceObject.__)('Oldest to newest'), 69800 value: 'date/asc' 69801 }, { 69802 /* translators: label for ordering posts by title in ascending order */ 69803 label: (0,external_wp_i18n_namespaceObject.__)('A â Z'), 69804 value: 'title/asc' 69805 }, { 69806 /* translators: label for ordering posts by title in descending order */ 69807 label: (0,external_wp_i18n_namespaceObject.__)('Z â A'), 69808 value: 'title/desc' 69809 }], 69810 onChange: value => { 69811 if (typeof value !== 'string') { 69812 return; 69813 } 69814 const [newOrderBy, newOrder] = value.split('/'); 69815 if (newOrder !== order) { 69816 onOrderChange(newOrder); 69817 } 69818 if (newOrderBy !== orderBy) { 69819 onOrderByChange(newOrderBy); 69820 } 69821 } 69822 }), isSingleCategorySelection(props) && props.categoriesList && props.onCategoryChange && (0,external_wp_element_namespaceObject.createElement)(CategorySelect, { 69823 key: "query-controls-category-select", 69824 categoriesList: props.categoriesList, 69825 label: (0,external_wp_i18n_namespaceObject.__)('Category'), 69826 noOptionLabel: (0,external_wp_i18n_namespaceObject.__)('All'), 69827 selectedCategoryId: props.selectedCategoryId, 69828 onChange: props.onCategoryChange 69829 }), isMultipleCategorySelection(props) && props.categorySuggestions && props.onCategoryChange && (0,external_wp_element_namespaceObject.createElement)(form_token_field, { 69830 __nextHasNoMarginBottom: true, 69831 key: "query-controls-categories-select", 69832 label: (0,external_wp_i18n_namespaceObject.__)('Categories'), 69833 value: props.selectedCategories && props.selectedCategories.map(item => ({ 69834 id: item.id, 69835 // Keeping the fallback to `item.value` for legacy reasons, 69836 // even if items of `selectedCategories` should not have a 69837 // `value` property. 69838 // @ts-expect-error 69839 value: item.name || item.value 69840 })), 69841 suggestions: Object.keys(props.categorySuggestions), 69842 onChange: props.onCategoryChange, 69843 maxSuggestions: MAX_CATEGORIES_SUGGESTIONS 69844 }), onAuthorChange && (0,external_wp_element_namespaceObject.createElement)(AuthorSelect, { 69845 key: "query-controls-author-select", 69846 authorList: authorList, 69847 label: (0,external_wp_i18n_namespaceObject.__)('Author'), 69848 noOptionLabel: (0,external_wp_i18n_namespaceObject.__)('All'), 69849 selectedAuthorId: selectedAuthorId, 69850 onChange: onAuthorChange 69851 }), onNumberOfItemsChange && (0,external_wp_element_namespaceObject.createElement)(range_control, { 69852 __nextHasNoMarginBottom: true, 69853 __next40pxDefaultSize: true, 69854 key: "query-controls-range-control", 69855 label: (0,external_wp_i18n_namespaceObject.__)('Number of items'), 69856 value: numberOfItems, 69857 onChange: onNumberOfItemsChange, 69858 min: minItems, 69859 max: maxItems, 69860 required: true 69861 })]); 69862} 69863/* harmony default export */ const query_controls = (QueryControls); 69864 69865;// CONCATENATED MODULE: ./node_modules/reakit/es/__keys-d251e56b.js 69866// Automatically generated 69867var 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"]; 69868var RADIO_KEYS = [].concat(RADIO_STATE_KEYS, ["value", "checked", "unstable_checkOnFocus"]); 69869var RADIO_GROUP_KEYS = RADIO_STATE_KEYS; 69870 69871 69872 69873;// CONCATENATED MODULE: ./node_modules/reakit/es/Radio/Radio.js 69874 69875 69876 69877 69878 69879 69880 69881 69882 69883 69884 69885 69886 69887 69888 69889 69890 69891 69892 69893 69894 69895 69896 69897 69898 69899 69900 69901 69902 69903 69904 69905 69906 69907function getChecked(options) { 69908 if (typeof options.checked !== "undefined") { 69909 return options.checked; 69910 } 69911 69912 return typeof options.value !== "undefined" && options.state === options.value; 69913} 69914 69915function useInitialChecked(options) { 69916 var _React$useState = (0,external_React_.useState)(function () { 69917 return getChecked(options); 69918 }), 69919 initialChecked = _React$useState[0]; 69920 69921 var _React$useState2 = (0,external_React_.useState)(options.currentId), 69922 initialCurrentId = _React$useState2[0]; 69923 69924 var id = options.id, 69925 setCurrentId = options.setCurrentId; 69926 (0,external_React_.useEffect)(function () { 69927 if (initialChecked && id && initialCurrentId !== id) { 69928 setCurrentId === null || setCurrentId === void 0 ? void 0 : setCurrentId(id); 69929 } 69930 }, [initialChecked, id, setCurrentId, initialCurrentId]); 69931} 69932 69933function fireChange(element, onChange) { 69934 var event = createEvent(element, "change"); 69935 Object.defineProperties(event, { 69936 type: { 69937 value: "change" 69938 }, 69939 target: { 69940 value: element 69941 }, 69942 currentTarget: { 69943 value: element 69944 } 69945 }); 69946 onChange === null || onChange === void 0 ? void 0 : onChange(event); 69947} 69948 69949var Radio_useRadio = createHook({ 69950 name: "Radio", 69951 compose: useCompositeItem, 69952 keys: RADIO_KEYS, 69953 useOptions: function useOptions(_ref, _ref2) { 69954 var _options$value; 69955 69956 var value = _ref2.value, 69957 checked = _ref2.checked; 69958 69959 var _ref$unstable_clickOn = _ref.unstable_clickOnEnter, 69960 unstable_clickOnEnter = _ref$unstable_clickOn === void 0 ? false : _ref$unstable_clickOn, 69961 _ref$unstable_checkOn = _ref.unstable_checkOnFocus, 69962 unstable_checkOnFocus = _ref$unstable_checkOn === void 0 ? true : _ref$unstable_checkOn, 69963 options = _rollupPluginBabelHelpers_1f0bf8c2_objectWithoutPropertiesLoose(_ref, ["unstable_clickOnEnter", "unstable_checkOnFocus"]); 69964
69965 return _objectSpread2(_objectSpread2({ 69966 checked: checked, 69967 unstable_clickOnEnter: unstable_clickOnEnter, 69968 unstable_checkOnFocus: unstable_checkOnFocus 69969 }, options), {}, { 69970 value: (_options$value = options.value) != null ? _options$value : value 69971 }); 69972 }, 69973 useProps: function useProps(options, _ref3) { 69974 var htmlRef = _ref3.ref, 69975 htmlOnChange = _ref3.onChange, 69976 htmlOnClick = _ref3.onClick, 69977 htmlProps = _rollupPluginBabelHelpers_1f0bf8c2_objectWithoutPropertiesLoose(_ref3, ["ref", "onChange", "onClick"]); 69978 69979 var ref = (0,external_React_.useRef)(null); 69980 69981 var _React$useState3 = (0,external_React_.useState)(true), 69982 isNativeRadio = _React$useState3[0], 69983 setIsNativeRadio = _React$useState3[1]; 69984 69985 var checked = getChecked(options); 69986 var isCurrentItemRef = useLiveRef(options.currentId === options.id); 69987 var onChangeRef = useLiveRef(htmlOnChange); 69988 var onClickRef = useLiveRef(htmlOnClick); 69989 useInitialChecked(options); 69990 (0,external_React_.useEffect)(function () { 69991 var element = ref.current; 69992 69993 if (!element) { 69994 false ? 0 : void 0; 69995 return; 69996 } 69997 69998 if (element.tagName !== "INPUT" || element.type !== "radio") { 69999 setIsNativeRadio(false); 70000 } 70001 }, []); 70002 var onChange = (0,external_React_.useCallback)(function (event) { 70003 var _onChangeRef$current, _options$setState; 70004 70005 (_onChangeRef$current = onChangeRef.current) === null || _onChangeRef$current === void 0 ? void 0 : _onChangeRef$current.call(onChangeRef, event); 70006 if (event.defaultPrevented) return; 70007 if (options.disabled) return; 70008 (_options$setState = options.setState) === null || _options$setState === void 0 ? void 0 : _options$setState.call(options, options.value); 70009 }, [options.disabled, options.setState, options.value]); 70010 var onClick = (0,external_React_.useCallback)(function (event) { 70011 var _onClickRef$current; 70012 70013 (_onClickRef$current = onClickRef.current) === null || _onClickRef$current === void 0 ? void 0 : _onClickRef$current.call(onClickRef, event); 70014 if (event.defaultPrevented) return; 70015 if (isNativeRadio) return; 70016 fireChange(event.currentTarget, onChange); 70017 }, [onChange, isNativeRadio]); 70018 (0,external_React_.useEffect)(function () { 70019 var element = ref.current; 70020 if (!element) return; 70021 70022 if (options.unstable_moves && isCurrentItemRef.current && options.unstable_checkOnFocus) { 70023 fireChange(element, onChange); 70024 } 70025 }, [options.unstable_moves, options.unstable_checkOnFocus, onChange]); 70026 return _objectSpread2({ 70027 ref: useForkRef(ref, htmlRef), 70028 role: !isNativeRadio ? "radio" : undefined, 70029 type: isNativeRadio ? "radio" : undefined, 70030 value: isNativeRadio ? options.value : undefined, 70031 name: isNativeRadio ? options.baseId : undefined, 70032 "aria-checked": checked, 70033 checked: checked, 70034 onChange: onChange, 70035 onClick: onClick 70036 }, htmlProps); 70037 } 70038}); 70039var Radio_Radio = createComponent({ 70040 as: "input", 70041 memo: true, 70042 useHook: Radio_useRadio 70043}); 70044 70045 70046 70047;// CONCATENATED MODULE: ./packages/components/build-module/radio-group/radio-context/index.js 70048/** 70049 * WordPress dependencies 70050 */ 70051 70052const radio_context_RadioContext = (0,external_wp_element_namespaceObject.createContext)({ 70053 state: null, 70054 setState: () => {} 70055}); 70056/* harmony default export */ const radio_context = (radio_context_RadioContext); 70057 70058;// CONCATENATED MODULE: ./packages/components/build-module/radio-group/radio/index.js 70059 70060// @ts-nocheck 70061 70062/** 70063 * External dependencies 70064 */ 70065 70066 70067/** 70068 * WordPress dependencies 70069 */ 70070 70071 70072/** 70073 * Internal dependencies 70074 */ 70075 70076 70077function radio_Radio({ 70078 children, 70079 value, 70080 ...props 70081}, ref) { 70082 const radioContext = (0,external_wp_element_namespaceObject.useContext)(radio_context); 70083 const checked = radioContext.state === value; 70084 return (0,external_wp_element_namespaceObject.createElement)(Radio_Radio, { 70085 ref: ref, 70086 as: build_module_button, 70087 variant: checked ? 'primary' : 'secondary', 70088 value: value, 70089 ...radioContext, 70090 ...props 70091 }, children || value); 70092} 70093 70094/** 70095 * @deprecated Use `RadioControl` or `ToggleGroupControl` instead. 70096 */ 70097/* harmony default export */ const radio_group_radio = ((0,external_wp_element_namespaceObject.forwardRef)(radio_Radio)); 70098 70099;// CONCATENATED MODULE: ./node_modules/reakit/es/Radio/RadioState.js 70100 70101 70102 70103 70104 70105 70106 70107 70108 70109 70110 70111 70112 70113function useRadioState(initialState) { 70114 if (initialState === void 0) { 70115 initialState = {}; 70116 } 70117 70118 var _useSealedState = useSealedState(initialState), 70119 initialValue = _useSealedState.state, 70120 _useSealedState$loop = _useSealedState.loop, 70121 loop = _useSealedState$loop === void 0 ? true : _useSealedState$loop, 70122 sealed = _rollupPluginBabelHelpers_1f0bf8c2_objectWithoutPropertiesLoose(_useSealedState, ["state", "loop"]); 70123 70124 var _React$useState = (0,external_React_.useState)(initialValue), 70125 state = _React$useState[0], 70126 setState = _React$useState[1]; 70127
70128 var composite = useCompositeState(_objectSpread2(_objectSpread2({}, sealed), {}, { 70129 loop: loop 70130 })); 70131 return _objectSpread2(_objectSpread2({}, composite), {}, { 70132 state: state, 70133 setState: setState 70134 }); 70135} 70136 70137 70138 70139;// CONCATENATED MODULE: ./node_modules/reakit/es/Radio/RadioGroup.js 70140 70141 70142 70143 70144 70145 70146 70147 70148 70149 70150 70151 70152 70153 70154 70155 70156 70157 70158 70159 70160 70161 70162 70163 70164 70165 70166 70167 70168 70169 70170 70171var RadioGroup_useRadioGroup = createHook({ 70172 name: "RadioGroup", 70173 compose: useComposite, 70174 keys: RADIO_GROUP_KEYS, 70175 useProps: function useProps(_, htmlProps) { 70176 return _objectSpread2({ 70177 role: "radiogroup" 70178 }, htmlProps); 70179 } 70180}); 70181var RadioGroup_RadioGroup = createComponent({ 70182 as: "div", 70183 useHook: RadioGroup_useRadioGroup, 70184 useCreateElement: function useCreateElement$1(type, props, children) { 70185 false ? 0 : void 0; 70186 return useCreateElement(type, props, children); 70187 } 70188}); 70189 70190 70191 70192;// CONCATENATED MODULE: ./packages/components/build-module/radio-group/index.js 70193 70194// @ts-nocheck 70195 70196/** 70197 * External dependencies 70198 */ 70199 70200 70201/** 70202 * WordPress dependencies 70203 */ 70204 70205 70206/** 70207 * Internal dependencies 70208 */ 70209 70210 70211function radio_group_RadioGroup({ 70212 label, 70213 checked, 70214 defaultChecked, 70215 disabled, 70216 onChange, 70217 ...props 70218}, ref) { 70219 const radioState = useRadioState({ 70220 state: defaultChecked, 70221 baseId: props.id 70222 }); 70223 const radioContext = { 70224 ...radioState, 70225 disabled, 70226 // Controlled or uncontrolled. 70227 state: checked !== null && checked !== void 0 ? checked : radioState.state, 70228 setState: onChange !== null && onChange !== void 0 ? onChange : radioState.setState 70229 }; 70230 return (0,external_wp_element_namespaceObject.createElement)(radio_context.Provider, { 70231 value: radioContext 70232 }, (0,external_wp_element_namespaceObject.createElement)(RadioGroup_RadioGroup, { 70233 ref: ref, 70234 as: button_group, 70235 "aria-label": label, 70236 ...radioState, 70237 ...props 70238 })); 70239} 70240 70241/** 70242 * @deprecated Use `RadioControl` or `ToggleGroupControl` instead. 70243 */ 70244/* harmony default export */ const radio_group = ((0,external_wp_element_namespaceObject.forwardRef)(radio_group_RadioGroup)); 70245 70246;// CONCATENATED MODULE: ./packages/components/build-module/radio-control/index.js 70247 70248/** 70249 * External dependencies 70250 */ 70251 70252/** 70253 * WordPress dependencies 70254 */ 70255 70256 70257/** 70258 * Internal dependencies 70259 */ 70260 70261 70262 70263/** 70264 * Render a user interface to select the user type using radio inputs. 70265 * 70266 * ```jsx 70267 * import { RadioControl } from '@wordpress/components'; 70268 * import { useState } from '@wordpress/element'; 70269 * 70270 * const MyRadioControl = () => { 70271 * const [ option, setOption ] = useState( 'a' ); 70272 * 70273 * return ( 70274 * <RadioControl 70275 * label="User type" 70276 * help="The type of the current user" 70277 * selected={ option } 70278 * options={ [ 70279 * { label: 'Author', value: 'a' }, 70280 * { label: 'Editor', value: 'e' }, 70281 * ] } 70282 * onChange={ ( value ) => setOption( value ) } 70283 * /> 70284 * ); 70285 * }; 70286 * ``` 70287 */ 70288function RadioControl(props) { 70289 const { 70290 label, 70291 className, 70292 selected, 70293 help, 70294 onChange, 70295 hideLabelFromVision, 70296 options = [], 70297 ...additionalProps 70298 } = props; 70299 const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(RadioControl); 70300 const id = `inspector-radio-control-${instanceId}`; 70301 const onChangeValue = event => onChange(event.target.value); 70302 if (!options?.length) { 70303 return null; 70304 } 70305 return (0,external_wp_element_namespaceObject.createElement)(base_control, { 70306 __nextHasNoMarginBottom: true, 70307 label: label, 70308 id: id, 70309 hideLabelFromVision: hideLabelFromVision, 70310 help: help, 70311 className: classnames_default()(className, 'components-radio-control') 70312 }, (0,external_wp_element_namespaceObject.createElement)(v_stack_component, { 70313 spacing: 1 70314 }, options.map((option, index) => (0,external_wp_element_namespaceObject.createElement)("div", { 70315 key: `${id}-${index}`, 70316 className: "components-radio-control__option" 70317 }, (0,external_wp_element_namespaceObject.createElement)("input", { 70318 id: `${id}-${index}`, 70319 className: "components-radio-control__input", 70320 type: "radio", 70321 name: id, 70322 value: option.value, 70323 onChange: onChangeValue, 70324 checked: option.value === selected, 70325 "aria-describedby": !!help ? `${id}__help` : undefined, 70326 ...additionalProps 70327 }), (0,external_wp_element_namespaceObject.createElement)("label", { 70328 htmlFor: `${id}-${index}` 70329 }, option.label))))); 70330} 70331/* harmony default export */ const radio_control = (RadioControl); 70332 70333;// CONCATENATED MODULE: ./node_modules/re-resizable/lib/resizer.js 70334var resizer_extends = (undefined && undefined.__extends) || (function () { 70335 var extendStatics = function (d, b) { 70336 extendStatics = Object.setPrototypeOf || 70337 ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) || 70338 function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; }; 70339 return extendStatics(d, b); 70340 }; 70341 return function (d, b) { 70342 extendStatics(d, b); 70343 function __() { this.constructor = d; } 70344 d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); 70345 }; 70346})(); 70347var resizer_assign = (undefined && undefined.__assign) || function () { 70348 resizer_assign = Object.assign || function(t) { 70349 for (var s, i = 1, n = arguments.length; i < n; i++) { 70350 s = arguments[i]; 70351 for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) 70352 t[p] = s[p]; 70353 } 70354 return t; 70355 }; 70356 return resizer_assign.apply(this, arguments); 70357}; 70358 70359var resizer_styles = { 70360 top: { 70361 width: '100%', 70362 height: '10px', 70363 top: '-5px', 70364 left: '0px', 70365 cursor: 'row-resize', 70366 }, 70367 right: { 70368 width: '10px', 70369 height: '100%', 70370 top: '0px',
70371 right: '-5px', 70372 cursor: 'col-resize', 70373 }, 70374 bottom: { 70375 width: '100%', 70376 height: '10px', 70377 bottom: '-5px', 70378 left: '0px', 70379 cursor: 'row-resize', 70380 }, 70381 left: { 70382 width: '10px', 70383 height: '100%', 70384 top: '0px', 70385 left: '-5px', 70386 cursor: 'col-resize', 70387 }, 70388 topRight: { 70389 width: '20px', 70390 height: '20px', 70391 position: 'absolute', 70392 right: '-10px', 70393 top: '-10px', 70394 cursor: 'ne-resize', 70395 }, 70396 bottomRight: { 70397 width: '20px', 70398 height: '20px', 70399 position: 'absolute', 70400 right: '-10px', 70401 bottom: '-10px', 70402 cursor: 'se-resize', 70403 }, 70404 bottomLeft: { 70405 width: '20px', 70406 height: '20px', 70407 position: 'absolute', 70408 left: '-10px', 70409 bottom: '-10px', 70410 cursor: 'sw-resize', 70411 }, 70412 topLeft: { 70413 width: '20px', 70414 height: '20px', 70415 position: 'absolute', 70416 left: '-10px', 70417 top: '-10px', 70418 cursor: 'nw-resize', 70419 }, 70420}; 70421var Resizer = /** @class */ (function (_super) { 70422 resizer_extends(Resizer, _super); 70423 function Resizer() { 70424 var _this = _super !== null && _super.apply(this, arguments) || this; 70425 _this.onMouseDown = function (e) { 70426 _this.props.onResizeStart(e, _this.props.direction); 70427 }; 70428 _this.onTouchStart = function (e) { 70429 _this.props.onResizeStart(e, _this.props.direction); 70430 }; 70431 return _this; 70432 } 70433 Resizer.prototype.render = function () { 70434 return (external_React_.createElement("div", { className: this.props.className || '', style: resizer_assign(resizer_assign({ position: 'absolute', userSelect: 'none' }, resizer_styles[this.props.direction]), (this.props.replaceStyles || {})), onMouseDown: this.onMouseDown, onTouchStart: this.onTouchStart }, this.props.children)); 70435 }; 70436 return Resizer; 70437}(external_React_.PureComponent)); 70438 70439 70440// EXTERNAL MODULE: ./node_modules/fast-memoize/src/index.js 70441var src = __webpack_require__(2920); 70442var src_default = /*#__PURE__*/__webpack_require__.n(src); 70443;// CONCATENATED MODULE: ./node_modules/re-resizable/lib/index.js 70444var lib_extends = (undefined && undefined.__extends) || (function () { 70445 var extendStatics = function (d, b) { 70446 extendStatics = Object.setPrototypeOf || 70447 ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) || 70448 function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; }; 70449 return extendStatics(d, b); 70450 }; 70451 return function (d, b) { 70452 extendStatics(d, b); 70453 function __() { this.constructor = d; } 70454 d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); 70455 }; 70456})(); 70457var lib_assign = (undefined && undefined.__assign) || function () { 70458 lib_assign = Object.assign || function(t) { 70459 for (var s, i = 1, n = arguments.length; i < n; i++) { 70460 s = arguments[i]; 70461 for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) 70462 t[p] = s[p]; 70463 } 70464 return t; 70465 }; 70466 return lib_assign.apply(this, arguments); 70467}; 70468 70469 70470 70471var DEFAULT_SIZE = { 70472 width: 'auto', 70473 height: 'auto', 70474}; 70475var lib_clamp = src_default()(function (n, min, max) { return Math.max(Math.min(n, max), min); }); 70476var snap = src_default()(function (n, size) { return Math.round(n / size) * size; }); 70477var hasDirection = src_default()(function (dir, target) { 70478 return new RegExp(dir, 'i').test(target); 70479}); 70480// INFO: In case of window is a Proxy and does not porxy Events correctly, use isTouchEvent & isMouseEvent to distinguish event type instead of `instanceof`. 70481var isTouchEvent = function (event) { 70482 return Boolean(event.touches && event.touches.length); 70483}; 70484var isMouseEvent = function (event) { 70485 return Boolean((event.clientX || event.clientX === 0) && 70486 (event.clientY || event.clientY === 0)); 70487}; 70488var findClosestSnap = src_default()(function (n, snapArray, snapGap) { 70489 if (snapGap === void 0) { snapGap = 0; } 70490 var closestGapIndex = snapArray.reduce(function (prev, curr, index) { return (Math.abs(curr - n) < Math.abs(snapArray[prev] - n) ? index : prev); }, 0); 70491 var gap = Math.abs(snapArray[closestGapIndex] - n); 70492 return snapGap === 0 || gap < snapGap ? snapArray[closestGapIndex] : n; 70493}); 70494var endsWith = src_default()(function (str, searchStr) { 70495 return str.substr(str.length - searchStr.length, searchStr.length) === searchStr; 70496}); 70497var getStringSize = src_default()(function (n) { 70498 n = n.toString(); 70499 if (n === 'auto') { 70500 return n; 70501 } 70502 if (endsWith(n, 'px')) { 70503 return n; 70504 } 70505 if (endsWith(n, '%')) { 70506 return n; 70507 } 70508 if (endsWith(n, 'vh')) { 70509 return n; 70510 } 70511 if (endsWith(n, 'vw')) { 70512 return n; 70513 } 70514 if (endsWith(n, 'vmax')) { 70515 return n; 70516 } 70517 if (endsWith(n, 'vmin')) { 70518 return n; 70519 } 70520 return n + "px"; 70521}); 70522var getPixelSize = function (size, parentSize, innerWidth, innerHeight) { 70523 if (size && typeof size === 'string') { 70524 if (endsWith(size, 'px')) { 70525 return Number(size.replace('px', '')); 70526 } 70527 if (endsWith(size, '%')) { 70528 var ratio = Number(size.replace('%', '')) / 100; 70529 return parentSize * ratio; 70530 } 70531 if (endsWith(size, 'vw')) { 70532 var ratio = Number(size.replace('vw', '')) / 100; 70533 return innerWidth * ratio; 70534 } 70535 if (endsWith(size, 'vh')) { 70536 var ratio = Number(size.replace('vh', '')) / 100;
70537 return innerHeight * ratio; 70538 } 70539 } 70540 return size; 70541}; 70542var calculateNewMax = src_default()(function (parentSize, innerWidth, innerHeight, maxWidth, maxHeight, minWidth, minHeight) { 70543 maxWidth = getPixelSize(maxWidth, parentSize.width, innerWidth, innerHeight); 70544 maxHeight = getPixelSize(maxHeight, parentSize.height, innerWidth, innerHeight); 70545 minWidth = getPixelSize(minWidth, parentSize.width, innerWidth, innerHeight); 70546 minHeight = getPixelSize(minHeight, parentSize.height, innerWidth, innerHeight); 70547 return { 70548 maxWidth: typeof maxWidth === 'undefined' ? undefined : Number(maxWidth), 70549 maxHeight: typeof maxHeight === 'undefined' ? undefined : Number(maxHeight), 70550 minWidth: typeof minWidth === 'undefined' ? undefined : Number(minWidth), 70551 minHeight: typeof minHeight === 'undefined' ? undefined : Number(minHeight), 70552 }; 70553}); 70554var definedProps = [ 70555 'as', 70556 'style', 70557 'className', 70558 'grid', 70559 'snap', 70560 'bounds', 70561 'boundsByDirection', 70562 'size', 70563 'defaultSize', 70564 'minWidth', 70565 'minHeight', 70566 'maxWidth', 70567 'maxHeight', 70568 'lockAspectRatio', 70569 'lockAspectRatioExtraWidth', 70570 'lockAspectRatioExtraHeight', 70571 'enable', 70572 'handleStyles', 70573 'handleClasses', 70574 'handleWrapperStyle', 70575 'handleWrapperClass', 70576 'children', 70577 'onResizeStart', 70578 'onResize', 70579 'onResizeStop', 70580 'handleComponent', 70581 'scale', 70582 'resizeRatio', 70583 'snapGap', 70584]; 70585// HACK: This class is used to calculate % size. 70586var baseClassName = '__resizable_base__'; 70587var Resizable = /** @class */ (function (_super) { 70588 lib_extends(Resizable, _super); 70589 function Resizable(props) { 70590 var _this = _super.call(this, props) || this; 70591 _this.ratio = 1; 70592 _this.resizable = null; 70593 // For parent boundary 70594 _this.parentLeft = 0; 70595 _this.parentTop = 0; 70596 // For boundary 70597 _this.resizableLeft = 0; 70598 _this.resizableRight = 0; 70599 _this.resizableTop = 0; 70600 _this.resizableBottom = 0; 70601 // For target boundary 70602 _this.targetLeft = 0; 70603 _this.targetTop = 0; 70604 _this.appendBase = function () { 70605 if (!_this.resizable || !_this.window) { 70606 return null; 70607 } 70608 var parent = _this.parentNode; 70609 if (!parent) { 70610 return null; 70611 } 70612 var element = _this.window.document.createElement('div'); 70613 element.style.width = '100%'; 70614 element.style.height = '100%'; 70615 element.style.position = 'absolute'; 70616 element.style.transform = 'scale(0, 0)'; 70617 element.style.left = '0'; 70618 element.style.flex = '0'; 70619 if (element.classList) { 70620 element.classList.add(baseClassName); 70621 } 70622 else { 70623 element.className += baseClassName; 70624 } 70625 parent.appendChild(element); 70626 return element; 70627 }; 70628 _this.removeBase = function (base) { 70629 var parent = _this.parentNode; 70630 if (!parent) { 70631 return; 70632 } 70633 parent.removeChild(base); 70634 }; 70635 _this.ref = function (c) { 70636 if (c) { 70637 _this.resizable = c; 70638 } 70639 }; 70640 _this.state = { 70641 isResizing: false, 70642 width: typeof (_this.propsSize && _this.propsSize.width) === 'undefined' 70643 ? 'auto' 70644 : _this.propsSize && _this.propsSize.width, 70645 height: typeof (_this.propsSize && _this.propsSize.height) === 'undefined' 70646 ? 'auto' 70647 : _this.propsSize && _this.propsSize.height, 70648 direction: 'right', 70649 original: { 70650 x: 0, 70651 y: 0, 70652 width: 0, 70653 height: 0, 70654 }, 70655 backgroundStyle: { 70656 height: '100%', 70657 width: '100%', 70658 backgroundColor: 'rgba(0,0,0,0)', 70659 cursor: 'auto', 70660 opacity: 0, 70661 position: 'fixed', 70662 zIndex: 9999, 70663 top: '0', 70664 left: '0', 70665 bottom: '0', 70666 right: '0', 70667 }, 70668 flexBasis: undefined, 70669 }; 70670 _this.onResizeStart = _this.onResizeStart.bind(_this); 70671 _this.onMouseMove = _this.onMouseMove.bind(_this); 70672 _this.onMouseUp = _this.onMouseUp.bind(_this); 70673 return _this; 70674 } 70675 Object.defineProperty(Resizable.prototype, "parentNode", { 70676 get: function () { 70677 if (!this.resizable) { 70678 return null; 70679 } 70680 return this.resizable.parentNode; 70681 }, 70682 enumerable: false, 70683 configurable: true 70684 });
70685 Object.defineProperty(Resizable.prototype, "window", { 70686 get: function () { 70687 if (!this.resizable) { 70688 return null; 70689 } 70690 if (!this.resizable.ownerDocument) { 70691 return null; 70692 } 70693 return this.resizable.ownerDocument.defaultView; 70694 }, 70695 enumerable: false, 70696 configurable: true 70697 }); 70698 Object.defineProperty(Resizable.prototype, "propsSize", { 70699 get: function () { 70700 return this.props.size || this.props.defaultSize || DEFAULT_SIZE; 70701 }, 70702 enumerable: false, 70703 configurable: true 70704 }); 70705 Object.defineProperty(Resizable.prototype, "size", { 70706 get: function () { 70707 var width = 0; 70708 var height = 0; 70709 if (this.resizable && this.window) { 70710 var orgWidth = this.resizable.offsetWidth; 70711 var orgHeight = this.resizable.offsetHeight; 70712 // HACK: Set position `relative` to get parent size. 70713 // This is because when re-resizable set `absolute`, I can not get base width correctly. 70714 var orgPosition = this.resizable.style.position; 70715 if (orgPosition !== 'relative') { 70716 this.resizable.style.position = 'relative'; 70717 } 70718 // INFO: Use original width or height if set auto. 70719 width = this.resizable.style.width !== 'auto' ? this.resizable.offsetWidth : orgWidth; 70720 height = this.resizable.style.height !== 'auto' ? this.resizable.offsetHeight : orgHeight; 70721 // Restore original position 70722 this.resizable.style.position = orgPosition; 70723 } 70724 return { width: width, height: height }; 70725 }, 70726 enumerable: false, 70727 configurable: true 70728 }); 70729 Object.defineProperty(Resizable.prototype, "sizeStyle", { 70730 get: function () { 70731 var _this = this; 70732 var size = this.props.size; 70733 var getSize = function (key) { 70734 if (typeof _this.state[key] === 'undefined' || _this.state[key] === 'auto') { 70735 return 'auto'; 70736 } 70737 if (_this.propsSize && _this.propsSize[key] && endsWith(_this.propsSize[key].toString(), '%')) { 70738 if (endsWith(_this.state[key].toString(), '%')) { 70739 return _this.state[key].toString(); 70740 } 70741 var parentSize = _this.getParentSize(); 70742 var value = Number(_this.state[key].toString().replace('px', '')); 70743 var percent = (value / parentSize[key]) * 100; 70744 return percent + "%"; 70745 } 70746 return getStringSize(_this.state[key]); 70747 }; 70748 var width = size && typeof size.width !== 'undefined' && !this.state.isResizing 70749 ? getStringSize(size.width) 70750 : getSize('width'); 70751 var height = size && typeof size.height !== 'undefined' && !this.state.isResizing 70752 ? getStringSize(size.height) 70753 : getSize('height'); 70754 return { width: width, height: height }; 70755 }, 70756 enumerable: false, 70757 configurable: true 70758 }); 70759 Resizable.prototype.getParentSize = function () { 70760 if (!this.parentNode) { 70761 if (!this.window) { 70762 return { width: 0, height: 0 }; 70763 } 70764 return { width: this.window.innerWidth, height: this.window.innerHeight }; 70765 } 70766 var base = this.appendBase(); 70767 if (!base) { 70768 return { width: 0, height: 0 }; 70769 } 70770 // INFO: To calculate parent width with flex layout 70771 var wrapChanged = false; 70772 var wrap = this.parentNode.style.flexWrap; 70773 if (wrap !== 'wrap') { 70774 wrapChanged = true; 70775 this.parentNode.style.flexWrap = 'wrap'; 70776 // HACK: Use relative to get parent padding size 70777 } 70778 base.style.position = 'relative'; 70779 base.style.minWidth = '100%'; 70780 var size = { 70781 width: base.offsetWidth, 70782 height: base.offsetHeight, 70783 }; 70784 if (wrapChanged) { 70785 this.parentNode.style.flexWrap = wrap; 70786 } 70787 this.removeBase(base); 70788 return size; 70789 }; 70790 Resizable.prototype.bindEvents = function () { 70791 if (this.window) { 70792 this.window.addEventListener('mouseup', this.onMouseUp); 70793 this.window.addEventListener('mousemove', this.onMouseMove); 70794 this.window.addEventListener('mouseleave', this.onMouseUp); 70795 this.window.addEventListener('touchmove', this.onMouseMove, { 70796 capture: true, 70797 passive: false, 70798 }); 70799 this.window.addEventListener('touchend', this.onMouseUp); 70800 } 70801 }; 70802 Resizable.prototype.unbindEvents = function () { 70803 if (this.window) { 70804 this.window.removeEventListener('mouseup', this.onMouseUp); 70805 this.window.removeEventListener('mousemove', this.onMouseMove); 70806 this.window.removeEventListener('mouseleave', this.onMouseUp); 70807 this.window.removeEventListener('touchmove', this.onMouseMove, true); 70808 this.window.removeEventListener('touchend', this.onMouseUp); 70809 } 70810 }; 70811 Resizable.prototype.componentDidMount = function () { 70812 if (!this.resizable || !this.window) { 70813 return; 70814 } 70815 var computedStyle = this.window.getComputedStyle(this.resizable); 70816 this.setState({ 70817 width: this.state.width || this.size.width, 70818 height: this.state.height || this.size.height, 70819 flexBasis: computedStyle.flexBasis !== 'auto' ? computedStyle.flexBasis : undefined, 70820 }); 70821 }; 70822 Resizable.prototype.componentWillUnmount = function () { 70823 if (this.window) { 70824 this.unbindEvents(); 70825 } 70826 }; 70827 Resizable.prototype.createSizeForCssProperty = function (newSize, kind) { 70828 var propsSize = this.propsSize && this.propsSize[kind]; 70829 return this.state[kind] === 'auto' && 70830 this.state.original[kind] === newSize && 70831 (typeof propsSize === 'undefined' || propsSize === 'auto') 70832 ? 'auto' 70833 : newSize; 70834 }; 70835 Resizable.prototype.calculateNewMaxFromBoundary = function (maxWidth, maxHeight) { 70836 var boundsByDirection = this.props.boundsByDirection; 70837 var direction = this.state.direction; 70838 var widthByDirection = boundsByDirection && hasDirection('left', direction); 70839 var heightByDirection = boundsByDirection && hasDirection('top', direction); 70840 var boundWidth; 70841 var boundHeight; 70842 if (this.props.bounds === 'parent') { 70843 var parent_1 = this.parentNode; 70844 if (parent_1) { 70845 boundWidth = widthByDirection 70846 ? this.resizableRight - this.parentLeft 70847 : parent_1.offsetWidth + (this.parentLeft - this.resizableLeft); 70848 boundHeight = heightByDirection 70849 ? this.resizableBottom - this.parentTop 70850 : parent_1.offsetHeight + (this.parentTop - this.resizableTop); 70851 } 70852 } 70853 else if (this.props.bounds === 'window') { 70854 if (this.window) { 70855 boundWidth = widthByDirection ? this.resizableRight : this.window.innerWidth - this.resizableLeft; 70856 boundHeight = heightByDirection ? this.resizableBottom : this.window.innerHeight - this.resizableTop; 70857 } 70858 } 70859 else if (this.props.bounds) { 70860 boundWidth = widthByDirection 70861 ? this.resizableRight - this.targetLeft 70862 : this.props.bounds.offsetWidth + (this.targetLeft - this.resizableLeft); 70863 boundHeight = heightByDirection 70864 ? this.resizableBottom - this.targetTop 70865 : this.props.bounds.offsetHeight + (this.targetTop - this.resizableTop); 70866 } 70867 if (boundWidth && Number.isFinite(boundWidth)) { 70868 maxWidth = maxWidth && maxWidth < boundWidth ? maxWidth : boundWidth; 70869 } 70870 if (boundHeight && Number.isFinite(boundHeight)) { 70871 maxHeight = maxHeight && maxHeight < boundHeight ? maxHeight : boundHeight; 70872 } 70873 return { maxWidth: maxWidth, maxHeight: maxHeight }; 70874 }; 70875 Resizable.prototype.calculateNewSizeFromDirection = function (client
70875X, clientY) { 70876 var scale = this.props.scale || 1; 70877 var resizeRatio = this.props.resizeRatio || 1; 70878 var _a = this.state, direction = _a.direction, original = _a.original; 70879 var _b = this.props, lockAspectRatio = _b.lockAspectRatio, lockAspectRatioExtraHeight = _b.lockAspectRatioExtraHeight, lockAspectRatioExtraWidth = _b.lockAspectRatioExtraWidth; 70880 var newWidth = original.width; 70881 var newHeight = original.height; 70882 var extraHeight = lockAspectRatioExtraHeight || 0; 70883 var extraWidth = lockAspectRatioExtraWidth || 0; 70884 if (hasDirection('right', direction)) { 70885 newWidth = original.width + ((clientX - original.x) * resizeRatio) / scale; 70886 if (lockAspectRatio) { 70887 newHeight = (newWidth - extraWidth) / this.ratio + extraHeight; 70888 } 70889 } 70890 if (hasDirection('left', direction)) { 70891 newWidth = original.width - ((clientX - original.x) * resizeRatio) / scale; 70892 if (lockAspectRatio) { 70893 newHeight = (newWidth - extraWidth) / this.ratio + extraHeight; 70894 } 70895 } 70896 if (hasDirection('bottom', direction)) { 70897 newHeight = original.height + ((clientY - original.y) * resizeRatio) / scale; 70898 if (lockAspectRatio) { 70899 newWidth = (newHeight - extraHeight) * this.ratio + extraWidth; 70900 } 70901 } 70902 if (hasDirection('top', direction)) { 70903 newHeight = original.height - ((clientY - original.y) * resizeRatio) / scale; 70904 if (lockAspectRatio) { 70905 newWidth = (newHeight - extraHeight) * this.ratio + extraWidth; 70906 } 70907 } 70908 return { newWidth: newWidth, newHeight: newHeight }; 70909 }; 70910 Resizable.prototype.calculateNewSizeFromAspectRatio = function (newWidth, newHeight, max, min) { 70911 var _a = this.props, lockAspectRatio = _a.lockAspectRatio, lockAspectRatioExtraHeight = _a.lockAspectRatioExtraHeight, lockAspectRatioExtraWidth = _a.lockAspectRatioExtraWidth; 70912 var computedMinWidth = typeof min.width === 'undefined' ? 10 : min.width; 70913 var computedMaxWidth = typeof max.width === 'undefined' || max.width < 0 ? newWidth : max.width; 70914 var computedMinHeight = typeof min.height === 'undefined' ? 10 : min.height; 70915 var computedMaxHeight = typeof max.height === 'undefined' || max.height < 0 ? newHeight : max.height; 70916 var extraHeight = lockAspectRatioExtraHeight || 0; 70917 var extraWidth = lockAspectRatioExtraWidth || 0; 70918 if (lockAspectRatio) { 70919 var extraMinWidth = (computedMinHeight - extraHeight) * this.ratio + extraWidth; 70920 var extraMaxWidth = (computedMaxHeight - extraHeight) * this.ratio + extraWidth; 70921 var extraMinHeight = (computedMinWidth - extraWidth) / this.ratio + extraHeight; 70922 var extraMaxHeight = (computedMaxWidth - extraWidth) / this.ratio + extraHeight; 70923 var lockedMinWidth = Math.max(computedMinWidth, extraMinWidth); 70924 var lockedMaxWidth = Math.min(computedMaxWidth, extraMaxWidth); 70925 var lockedMinHeight = Math.max(computedMinHeight, extraMinHeight); 70926 var lockedMaxHeight = Math.min(computedMaxHeight, extraMaxHeight); 70927 newWidth = lib_clamp(newWidth, lockedMinWidth, lockedMaxWidth); 70928 newHeight = lib_clamp(newHeight, lockedMinHeight, lockedMaxHeight); 70929 } 70930 else { 70931 newWidth = lib_clamp(newWidth, computedMinWidth, computedMaxWidth); 70932 newHeight = lib_clamp(newHeight, computedMinHeight, computedMaxHeight); 70933 } 70934 return { newWidth: newWidth, newHeight: newHeight }; 70935 }; 70936 Resizable.prototype.setBoundingClientRect = function () { 70937 // For parent boundary 70938 if (this.props.bounds === 'parent') { 70939 var parent_2 = this.parentNode; 70940 if (parent_2) { 70941 var parentRect = parent_2.getBoundingClientRect(); 70942 this.parentLeft = parentRect.left; 70943 this.parentTop = parentRect.top; 70944 } 70945 } 70946 // For target(html element) boundary 70947 if (this.props.bounds && typeof this.props.bounds !== 'string') { 70948 var targetRect = this.props.bounds.getBoundingClientRect(); 70949 this.targetLeft = targetRect.left; 70950 this.targetTop = targetRect.top; 70951 } 70952 // For boundary 70953 if (this.resizable) { 70954 var _a = this.resizable.getBoundingClientRect(), left = _a.left, top_1 = _a.top, right = _a.right, bottom = _a.bottom; 70955 this.resizableLeft = left; 70956 this.resizableRight = right; 70957 this.resizableTop = top_1; 70958 this.resizableBottom = bottom; 70959 } 70960 }; 70961 Resizable.prototype.onResizeStart = function (event, direction) { 70962 if (!this.resizable || !this.window) { 70963 return; 70964 } 70965 var clientX = 0; 70966 var clientY = 0; 70967 if (event.nativeEvent && isMouseEvent(event.nativeEvent)) { 70968 clientX = event.nativeEvent.clientX; 70969 clientY = event.nativeEvent.clientY; 70970 // When user click with right button the resize is stuck in resizing mode 70971 // until users clicks again, dont continue if right click is used. 70972 // HACK: MouseEvent does not have `which` from flow-bin v0.68. 70973 if (event.nativeEvent.which === 3) { 70974 return; 70975 } 70976 } 70977 else if (event.nativeEvent && isTouchEvent(event.nativeEvent)) { 70978 clientX = event.nativeEvent.touches[0].clientX; 70979 clientY = event.nativeEvent.touches[0].clientY; 70980 } 70981 if (this.props.onResizeStart) { 70982 if (this.resizable) { 70983 var startResize = this.props.onResizeStart(event, direction, this.resizable); 70984 if (startResize === false) { 70985 return; 70986 } 70987 } 70988 } 70989 // Fix #168 70990 if (this.props.size) { 70991 if (typeof this.props.size.height !== 'undefined' && this.props.size.height !== this.state.height) { 70992 this.setState({ height: this.props.size.height }); 70993 } 70994 if (typeof this.props.size.width !== 'undefined' && this.props.size.width !== this.state.width) { 70995 this.setState({ width: this.props.size.width }); 70996 } 70997 } 70998 // For lockAspectRatio case 70999 this.ratio = 71000 typeof this.props.lockAspectRatio === 'number' ? this.props.lockAspectRatio : this.size.width / this.size.height; 71001 var flexBasis; 71002 var computedStyle = this.window.getComputedStyle(this.resizable); 71003 if (computedStyle.flexBasis !== 'auto') { 71004 var parent_3 = this.parentNode; 71005 if (parent_3) { 71006 var dir = this.window.getComputedStyle(parent_3).flexDirection; 71007 this.flexDir = dir.startsWith('row') ? 'row' : 'column'; 71008 flexBasis = computedStyle.flexBasis; 71009 } 71010 } 71011 // For boundary 71012 this.setBoundingClientRect(); 71013 this.bindEvents(); 71014 var state = { 71015 original: { 71016 x: clientX, 71017 y: clientY, 71018 width: this.size.width, 71019 height: this.size.height, 71020 }, 71021 isResizing: true, 71022 backgroundStyle: lib_assign(lib_assign({}, this.state.backgroundStyle), { cursor: this.window.getComputedStyle(event.target).cursor || 'auto' }), 71023 direction: direction, 71024 flexBasis: flexBasis, 71025 }; 71026 this.setState(state); 71027 }; 71028 Resizable.prototype.onMouseMove = function (event) { 71029 if (!this.state.isResizing || !this.resizable || !this.window) { 71030 return; 71031 } 71032 if (this.window.TouchEvent && isTouchEvent(event)) { 71033 try { 71034 event.preventDefault(); 71035 event.stopPropagation(); 71036 } 71037 catch (e) { 71038 // Ignore on fail 71039 } 71040 } 71041 var _a = this.props, maxWidth = _a.maxWidth, maxHeight = _a.maxHeight, minWidth = _a.minWidth, minHeight = _a.minHeight; 71042 var clientX = isTouchEvent(event) ? event.touches[0].clientX : event.clientX; 71043 var clientY = isTouchEvent(event) ? event.touches[0].clientY : event.clientY; 71044 var _b = this.state, direction = _b.direction, original = _b.original, width = _b.width, height = _b.height; 71045 var parentSize = this.getParentSize(); 71046 var max = calculateNewMax(parentSize, this.window.innerWidth, this.window.innerHeight, maxWidth, maxHeight, minWidth, minHeight); 71047 maxWidth = max.maxWidth; 71048 maxHeight = max.maxHeight; 71049 minWidth = max.minWidth; 71050 minHeight = max.minHeight; 71051 // Calculate new size 71052 var _c = this.calculateNewSizeFromDirection(clientX, clientY), newHeight = _c.newHeight, newWidth = _c.newWidth; 71053 // Calculate max size from boundary settings 71054 var boundaryMax = this.calculateNewMaxFromBoundary(maxWidth, maxHeight); 71055 // Calculate new size from aspect ratio 71056 var newSize = this.calculateNewSizeFromAspectRatio(newWidth, newHeight, { width: boundaryMax.maxWidth, height: boundaryMax.maxHeight }, { width: minWidth, height: minHeight }); 71057 newWidth = newSize.newWidth; 71058 newHeight = newSize.newHeight; 71059 if (this.props.grid) { 71060 var newGridWidth = snap(newWidth, this.props.grid[0]); 71061 var newGridHeight = snap(newHeight, this.props.grid[1]); 71062 var gap = this.props.snapGap || 0;
71063 newWidth = gap === 0 || Math.abs(newGridWidth - newWidth) <= gap ? newGridWidth : newWidth; 71064 newHeight = gap === 0 || Math.abs(newGridHeight - newHeight) <= gap ? newGridHeight : newHeight; 71065 } 71066 if (this.props.snap && this.props.snap.x) { 71067 newWidth = findClosestSnap(newWidth, this.props.snap.x, this.props.snapGap); 71068 } 71069 if (this.props.snap && this.props.snap.y) { 71070 newHeight = findClosestSnap(newHeight, this.props.snap.y, this.props.snapGap); 71071 } 71072 var delta = { 71073 width: newWidth - original.width, 71074 height: newHeight - original.height, 71075 }; 71076 if (width && typeof width === 'string') { 71077 if (endsWith(width, '%')) { 71078 var percent = (newWidth / parentSize.width) * 100; 71079 newWidth = percent + "%"; 71080 } 71081 else if (endsWith(width, 'vw')) { 71082 var vw = (newWidth / this.window.innerWidth) * 100; 71083 newWidth = vw + "vw"; 71084 } 71085 else if (endsWith(width, 'vh')) { 71086 var vh = (newWidth / this.window.innerHeight) * 100; 71087 newWidth = vh + "vh"; 71088 } 71089 } 71090 if (height && typeof height === 'string') { 71091 if (endsWith(height, '%')) { 71092 var percent = (newHeight / parentSize.height) * 100; 71093 newHeight = percent + "%"; 71094 } 71095 else if (endsWith(height, 'vw')) { 71096 var vw = (newHeight / this.window.innerWidth) * 100; 71097 newHeight = vw + "vw"; 71098 } 71099 else if (endsWith(height, 'vh')) { 71100 var vh = (newHeight / this.window.innerHeight) * 100; 71101 newHeight = vh + "vh"; 71102 } 71103 } 71104 var newState = { 71105 width: this.createSizeForCssProperty(newWidth, 'width'), 71106 height: this.createSizeForCssProperty(newHeight, 'height'), 71107 }; 71108 if (this.flexDir === 'row') { 71109 newState.flexBasis = newState.width; 71110 } 71111 else if (this.flexDir === 'column') { 71112 newState.flexBasis = newState.height; 71113 } 71114 this.setState(newState); 71115 if (this.props.onResize) { 71116 this.props.onResize(event, direction, this.resizable, delta); 71117 } 71118 }; 71119 Resizable.prototype.onMouseUp = function (event) { 71120 var _a = this.state, isResizing = _a.isResizing, direction = _a.direction, original = _a.original; 71121 if (!isResizing || !this.resizable) { 71122 return; 71123 } 71124 var delta = { 71125 width: this.size.width - original.width, 71126 height: this.size.height - original.height, 71127 }; 71128 if (this.props.onResizeStop) { 71129 this.props.onResizeStop(event, direction, this.resizable, delta); 71130 } 71131 if (this.props.size) { 71132 this.setState(this.props.size); 71133 } 71134 this.unbindEvents(); 71135 this.setState({ 71136 isResizing: false, 71137 backgroundStyle: lib_assign(lib_assign({}, this.state.backgroundStyle), { cursor: 'auto' }), 71138 }); 71139 }; 71140 Resizable.prototype.updateSize = function (size) { 71141 this.setState({ width: size.width, height: size.height }); 71142 }; 71143 Resizable.prototype.renderResizer = function () { 71144 var _this = this; 71145 var _a = this.props, enable = _a.enable, handleStyles = _a.handleStyles, handleClasses = _a.handleClasses, handleWrapperStyle = _a.handleWrapperStyle, handleWrapperClass = _a.handleWrapperClass, handleComponent = _a.handleComponent; 71146 if (!enable) { 71147 return null; 71148 } 71149 var resizers = Object.keys(enable).map(function (dir) { 71150 if (enable[dir] !== false) { 71151 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)); 71152 } 71153 return null; 71154 }); 71155 // #93 Wrap the resize box in span (will not break 100% width/height) 71156 return (external_React_.createElement("div", { className: handleWrapperClass, style: handleWrapperStyle }, resizers)); 71157 }; 71158 Resizable.prototype.render = function () { 71159 var _this = this; 71160 var extendsProps = Object.keys(this.props).reduce(function (acc, key) { 71161 if (definedProps.indexOf(key) !== -1) { 71162 return acc; 71163 } 71164 acc[key] = _this.props[key]; 71165 return acc; 71166 }, {}); 71167 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 }); 71168 if (this.state.flexBasis) { 71169 style.flexBasis = this.state.flexBasis; 71170 } 71171 var Wrapper = this.props.as || 'div'; 71172 return (external_React_.createElement(Wrapper, lib_assign({ ref: this.ref, style: style, className: this.props.className }, extendsProps), 71173 this.state.isResizing && external_React_.createElement("div", { style: this.state.backgroundStyle }), 71174 this.props.children, 71175 this.renderResizer())); 71176 }; 71177 Resizable.defaultProps = { 71178 as: 'div', 71179 onResizeStart: function () { }, 71180 onResize: function () { }, 71181 onResizeStop: function () { }, 71182 enable: { 71183 top: true, 71184 right: true, 71185 bottom: true, 71186 left: true, 71187 topRight: true, 71188 bottomRight: true, 71189 bottomLeft: true, 71190 topLeft: true, 71191 }, 71192 style: {}, 71193 grid: [1, 1], 71194 lockAspectRatio: false, 71195 lockAspectRatioExtraWidth: 0, 71196 lockAspectRatioExtraHeight: 0, 71197 scale: 1, 71198 resizeRatio: 1, 71199 snapGap: 0, 71200 }; 71201 return Resizable; 71202}(external_React_.PureComponent)); 71203 71204 71205;// CONCATENATED MODULE: ./packages/components/build-module/resizable-box/resize-tooltip/utils.js 71206/** 71207 * WordPress dependencies 71208 */ 71209 71210 71211const utils_noop = () => {}; 71212const POSITIONS = { 71213 bottom: 'bottom', 71214 corner: 'corner' 71215}; 71216/** 71217 * Custom hook that manages resize listener events. It also provides a label 71218 * based on current resize width x height values. 71219 * 71220 * @param props 71221 * @param props.axis Only shows the label corresponding to the axis. 71222 * @param props.fadeTimeout Duration (ms) before deactivating the resize label. 71223 * @param props.onResize Callback when a resize occurs. Provides { width, height } callback. 71224 * @param props.position Adjusts label value. 71225 * @param props.showPx Whether to add `PX` to the label. 71226 * 71227 * @return Properties for hook. 71228 */ 71229function useResizeLabel({ 71230 axis, 71231 fadeTimeout = 180, 71232 onResize = utils_noop, 71233 position = POSITIONS.bottom, 71234 showPx = false 71235}) { 71236 /* 71237 * The width/height values derive from this special useResizeObserver hook. 71238 * This custom hook uses the ResizeObserver API to listen for resize events. 71239 */ 71240 const [resizeListener, sizes] = (0,external_wp_compose_namespaceObject.useResizeObserver)(); 71241 71242 /* 71243 * Indicates if the x/y axis is preferred. 71244 * If set, we will avoid resetting the moveX and moveY values. 71245 * This will allow for the preferred axis values to persist in the label. 71246 */ 71247 const isAxisControlled = !!axis; 71248 71249 /* 71250 * The moveX and moveY values are used to track whether the label should 71251 * display width, height, or width x height. 71252 */ 71253 const [moveX, setMoveX] = (0,external_wp_element_namespaceObject.useState)(false); 71254 const [moveY, setMoveY] = (0,external_wp_element_namespaceObject.useState)(false); 71255 71256 /* 71257 * Cached dimension values to check for width/height updates from the 71258 * sizes property from useResizeAware() 71259 */ 71260 const { 71261 width, 71262 height 71263 } = sizes; 71264 const heightRef = (0,external_wp_element_namespaceObject.useRef)(height); 71265 const widthRef = (0,external_wp_element_namespaceObject.useRef)(width); 71266 71267 /* 71268 * This timeout is used with setMoveX and setMoveY to determine of 71269 * both width and height values have changed at (roughly) the same time. 71270 */ 71271 const moveTimeoutRef = (0,external_wp_element_namespaceObject.useRef)(); 71272 const debounceUnsetMoveXY = (0,external_wp_element_namespaceObject.useCallback)(() => { 71273 const unsetMoveXY = () => { 71274 /* 71275 * If axis is controlled, we will avoid resetting the moveX and moveY values. 71276 * This will allow for the preferred axis values to persist in the label. 71277 */ 71278 if (isAxisControlled) return; 71279 setMoveX(false); 71280 setMoveY(false); 71281 }; 71282 if (moveTimeoutRef.current) { 71283 window.clearTimeout(moveTimeoutRef.current); 71284 } 71285 moveTimeoutRef.current = window.setTimeout(unsetMoveXY, fadeTimeout); 71286 }, [fadeTimeout, isAxisControlled]); 71287 (0,external_wp_element_namespaceObject.useEffect)(() => { 71288 /* 71289 * On the initial render of useResizeAware, the height and width values are 71290 * null. They are calculated then set using via an internal useEffect hook. 71291 */ 71292 const isRendered = width !== null || height !== null; 71293 if (!isRendered) return; 71294 const didWidthChange = width !== widthRef.current; 71295 const didHeightChange = height !== heightRef.current; 71296 if (!didWidthChange && !didHeightChange) return; 71297 71298 /* 71299 * After the initial render, the useResizeAware will set the first 71300 * width and height values. We'll sync those values with our 71301 * width and height refs. However, we shouldn't render our Tooltip 71302 * label on this first cycle. 71303 */ 71304 if (width && !widthRef.current && height && !heightRef.current) { 71305 widthRef.current = width; 71306 heightRef.current = height; 71307 return; 71308 } 71309 71310 /* 71311 * After the first cycle, we can track width and height changes. 71312 */ 71313 if (didWidthChange) { 71314 setMoveX(true); 71315 widthRef.current = width; 71316 } 71317 if (didHeightChange) { 71318 setMoveY(true); 71319 heightRef.current = height; 71320 } 71321 onResize({ 71322 width, 71323 height 71324 }); 71325 debounceUnsetMoveXY(); 71326 }, [width, height, onResize, debounceUnsetMoveXY]); 71327 const label = getSizeLabel({ 71328 axis, 71329 height, 71330 moveX, 71331 moveY, 71332 position, 71333 showPx, 71334 width 71335 }); 71336 return { 71337 label, 71338 resizeListener 71339 }; 71340} 71341/** 71342 * Gets the resize label based on width and height values (as well as re
71342cent changes). 71343 * 71344 * @param props 71345 * @param props.axis Only shows the label corresponding to the axis. 71346 * @param props.height Height value. 71347 * @param props.moveX Recent width (x axis) changes. 71348 * @param props.moveY Recent width (y axis) changes. 71349 * @param props.position Adjusts label value. 71350 * @param props.showPx Whether to add `PX` to the label. 71351 * @param props.width Width value. 71352 * 71353 * @return The rendered label. 71354 */ 71355function getSizeLabel({ 71356 axis, 71357 height, 71358 moveX = false, 71359 moveY = false, 71360 position = POSITIONS.bottom, 71361 showPx = false, 71362 width 71363}) { 71364 if (!moveX && !moveY) return undefined; 71365 71366 /* 71367 * Corner position... 71368 * We want the label to appear like width x height. 71369 */ 71370 if (position === POSITIONS.corner) { 71371 return `${width} x ${height}`; 71372 } 71373 71374 /* 71375 * Other POSITIONS... 71376 * The label will combine both width x height values if both 71377 * values have recently been changed. 71378 * 71379 * Otherwise, only width or height will be displayed. 71380 * The `PX` unit will be added, if specified by the `showPx` prop. 71381 */ 71382 const labelUnit = showPx ? ' px' : ''; 71383 if (axis) { 71384 if (axis === 'x' && moveX) { 71385 return `${width}${labelUnit}`; 71386 } 71387 if (axis === 'y' && moveY) { 71388 return `${height}${labelUnit}`; 71389 } 71390 } 71391 if (moveX && moveY) { 71392 return `${width} x ${height}`; 71393 } 71394 if (moveX) { 71395 return `${width}${labelUnit}`; 71396 } 71397 if (moveY) { 71398 return `${height}${labelUnit}`; 71399 } 71400 return undefined; 71401} 71402 71403;// CONCATENATED MODULE: ./packages/components/build-module/resizable-box/resize-tooltip/styles/resize-tooltip.styles.js 71404 71405function 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)."; } 71406/** 71407 * External dependencies 71408 */ 71409 71410/** 71411 * Internal dependencies 71412 */ 71413 71414 71415const resize_tooltip_styles_Root = emotion_styled_base_browser_esm("div", true ? { 71416 target: "e1wq7y4k3" 71417} : 0)( true ? { 71418 name: "1cd7zoc", 71419 styles: "bottom:0;box-sizing:border-box;left:0;pointer-events:none;position:absolute;right:0;top:0" 71420} : 0); 71421const TooltipWrapper = emotion_styled_base_browser_esm("div", true ? { 71422 target: "e1wq7y4k2" 71423} : 0)( true ? { 71424 name: "ajymcs", 71425 styles: "align-items:center;box-sizing:border-box;display:inline-flex;justify-content:center;opacity:0;pointer-events:none;transition:opacity 120ms linear" 71426} : 0); 71427const resize_tooltip_styles_Tooltip = emotion_styled_base_browser_esm("div", true ? { 71428 target: "e1wq7y4k1" 71429} : 0)("background:", COLORS.gray[900], ";border-radius:2px;box-sizing:border-box;font-family:", font('default.fontFamily'), ";font-size:12px;color:", COLORS.ui.textDark, ";padding:4px 8px;position:relative;" + ( true ? "" : 0)); 71430 71431// TODO: Resolve need to use &&& to increase specificity 71432// https://github.com/WordPress/gutenberg/issues/18483 71433 71434const LabelText = /*#__PURE__*/emotion_styled_base_browser_esm(text_component, true ? { 71435 target: "e1wq7y4k0" 71436} : 0)("&&&{color:", COLORS.ui.textDark, ";display:block;font-size:13px;line-height:1.4;white-space:nowrap;}" + ( true ? "" : 0)); 71437 71438;// CONCATENATED MODULE: ./packages/components/build-module/resizable-box/resize-tooltip/label.js 71439 71440/** 71441 * External dependencies 71442 */ 71443 71444/** 71445 * WordPress dependencies 71446 */ 71447 71448 71449 71450/** 71451 * Internal dependencies 71452 */ 71453 71454 71455 71456const CORNER_OFFSET = 4; 71457const CURSOR_OFFSET_TOP = CORNER_OFFSET * 2.5; 71458function resize_tooltip_label_Label({ 71459 label, 71460 position = POSITIONS.corner, 71461 zIndex = 1000, 71462 ...props 71463}, ref) { 71464 const showLabel = !!label; 71465 const isBottom = position === POSITIONS.bottom; 71466 const isCorner = position === POSITIONS.corner; 71467 if (!showLabel) return null; 71468 let style = { 71469 opacity: showLabel ? 1 : undefined, 71470 zIndex 71471 }; 71472 let labelStyle = {}; 71473 if (isBottom) { 71474 style = { 71475 ...style, 71476 position: 'absolute', 71477 bottom: CURSOR_OFFSET_TOP * -1, 71478 left: '50%', 71479 transform: 'translate(-50%, 0)' 71480 }; 71481 labelStyle = { 71482 transform: `translate(0, 100%)` 71483 }; 71484 } 71485 if (isCorner) { 71486 style = { 71487 ...style, 71488 position: 'absolute', 71489 top: CORNER_OFFSET, 71490 right: (0,external_wp_i18n_namespaceObject.isRTL)() ? undefined : CORNER_OFFSET, 71491 left: (0,external_wp_i18n_namespaceObject.isRTL)() ? CORNER_OFFSET : undefined 71492 }; 71493 } 71494 return (0,external_wp_element_namespaceObject.createElement)(TooltipWra
71494pper, { 71495 "aria-hidden": "true", 71496 className: "components-resizable-tooltip__tooltip-wrapper", 71497 ref: ref, 71498 style: style, 71499 ...props 71500 }, (0,external_wp_element_namespaceObject.createElement)(resize_tooltip_styles_Tooltip, { 71501 className: "components-resizable-tooltip__tooltip", 71502 style: labelStyle 71503 }, (0,external_wp_element_namespaceObject.createElement)(LabelText, { 71504 as: "span" 71505 }, label))); 71506} 71507const label_ForwardedComponent = (0,external_wp_element_namespaceObject.forwardRef)(resize_tooltip_label_Label); 71508/* harmony default export */ const resize_tooltip_label = (label_ForwardedComponent); 71509 71510;// CONCATENATED MODULE: ./packages/components/build-module/resizable-box/resize-tooltip/index.js 71511 71512/** 71513 * External dependencies 71514 */ 71515 71516/** 71517 * WordPress dependencies 71518 */ 71519 71520 71521/** 71522 * Internal dependencies 71523 */ 71524 71525 71526 71527const resize_tooltip_noop = () => {}; 71528function ResizeTooltip({ 71529 axis, 71530 className, 71531 fadeTimeout = 180, 71532 isVisible = true, 71533 labelRef, 71534 onResize = resize_tooltip_noop, 71535 position = POSITIONS.bottom, 71536 showPx = true, 71537 zIndex = 1000, 71538 ...props 71539}, ref) { 71540 const { 71541 label, 71542 resizeListener 71543 } = useResizeLabel({ 71544 axis, 71545 fadeTimeout, 71546 onResize, 71547 showPx, 71548 position 71549 }); 71550 if (!isVisible) return null; 71551 const classes = classnames_default()('components-resize-tooltip', className); 71552 return (0,external_wp_element_namespaceObject.createElement)(resize_tooltip_styles_Root, { 71553 "aria-hidden": "true", 71554 className: classes, 71555 ref: ref, 71556 ...props 71557 }, resizeListener, (0,external_wp_element_namespaceObject.createElement)(resize_tooltip_label, { 71558 "aria-hidden": props['aria-hidden'], 71559 label: label, 71560 position: position, 71561 ref: labelRef, 71562 zIndex: zIndex 71563 })); 71564} 71565const resize_tooltip_ForwardedComponent = (0,external_wp_element_namespaceObject.forwardRef)(ResizeTooltip); 71566/* harmony default export */ const resize_tooltip = (resize_tooltip_ForwardedComponent); 71567 71568;// CONCATENATED MODULE: ./packages/components/build-module/resizable-box/index.js 71569 71570/** 71571 * WordPress dependencies 71572 */ 71573 71574 71575/** 71576 * External dependencies 71577 */ 71578 71579 71580/** 71581 * Internal dependencies 71582 */ 71583 71584const HANDLE_CLASS_NAME = 'components-resizable-box__handle'; 71585const SIDE_HANDLE_CLASS_NAME = 'components-resizable-box__side-handle'; 71586const CORNER_HANDLE_CLASS_NAME = 'components-resizable-box__corner-handle'; 71587const HANDLE_CLASSES = { 71588 top: classnames_default()(HANDLE_CLASS_NAME, SIDE_HANDLE_CLASS_NAME, 'components-resizable-box__handle-top'), 71589 right: classnames_default()(HANDLE_CLASS_NAME, SIDE_HANDLE_CLASS_NAME, 'components-resizable-box__handle-right'), 71590 bottom: classnames_default()(HANDLE_CLASS_NAME, SIDE_HANDLE_CLASS_NAME, 'components-resizable-box__handle-bottom'), 71591 left: classnames_default()(HANDLE_CLASS_NAME, SIDE_HANDLE_CLASS_NAME, 'components-resizable-box__handle-left'), 71592 topLeft: classnames_default()(HANDLE_CLASS_NAME, CORNER_HANDLE_CLASS_NAME, 'components-resizable-box__handle-top', 'components-resizable-box__handle-left'), 71593 topRight: classnames_default()(HANDLE_CLASS_NAME, CORNER_HANDLE_CLASS_NAME, 'components-resizable-box__handle-top', 'components-resizable-box__handle-right'), 71594 bottomRight: classnames_default()(HANDLE_CLASS_NAME, CORNER_HANDLE_CLASS_NAME, 'components-resizable-box__handle-bottom', 'components-resizable-box__handle-right'), 71595 bottomLeft: classnames_default()(HANDLE_CLASS_NAME, CORNER_HANDLE_CLASS_NAME, 'components-resizable-box__handle-bottom', 'components-resizable-box__handle-left') 71596}; 71597 71598// Removes the inline styles in the drag handles. 71599const HANDLE_STYLES_OVERRIDES = { 71600 width: undefined, 71601 height: undefined, 71602 top: undefined, 71603 right: undefined, 71604 bottom: undefined, 71605 left: undefined 71606}; 71607const HANDLE_STYLES = { 71608 top: HANDLE_STYLES_OVERRIDES, 71609 right: HANDLE_STYLES_OVERRIDES, 71610 bottom: HANDLE_STYLES_OVERRIDES, 71611 left: HANDLE_STYLES_OVERRIDES, 71612 topLeft: HANDLE_STYLES_OVERRIDES,
71613 topRight: HANDLE_STYLES_OVERRIDES, 71614 bottomRight: HANDLE_STYLES_OVERRIDES, 71615 bottomLeft: HANDLE_STYLES_OVERRIDES 71616}; 71617function UnforwardedResizableBox({ 71618 className, 71619 children, 71620 showHandle = true, 71621 __experimentalShowTooltip: showTooltip = false, 71622 __experimentalTooltipProps: tooltipProps = {}, 71623 ...props 71624}, ref) { 71625 return (0,external_wp_element_namespaceObject.createElement)(Resizable, { 71626 className: classnames_default()('components-resizable-box__container', showHandle && 'has-show-handle', className), 71627 handleClasses: HANDLE_CLASSES, 71628 handleStyles: HANDLE_STYLES, 71629 ref: ref, 71630 ...props 71631 }, children, showTooltip && (0,external_wp_element_namespaceObject.createElement)(resize_tooltip, { 71632 ...tooltipProps 71633 })); 71634} 71635const ResizableBox = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedResizableBox); 71636/* harmony default export */ const resizable_box = (ResizableBox); 71637 71638;// CONCATENATED MODULE: ./packages/components/build-module/responsive-wrapper/index.js 71639 71640/** 71641 * External dependencies 71642 */ 71643 71644 71645/** 71646 * WordPress dependencies 71647 */ 71648 71649 71650/** 71651 * Internal dependencies 71652 */ 71653 71654/** 71655 * A wrapper component that maintains its aspect ratio when resized. 71656 * 71657 * ```jsx 71658 * import { ResponsiveWrapper } from '@wordpress/components'; 71659 * 71660 * const MyResponsiveWrapper = () => ( 71661 * <ResponsiveWrapper naturalWidth={ 2000 } naturalHeight={ 680 }> 71662 * <img 71663 * src="https://s.w.org/style/images/about/WordPress-logotype-standard.png" 71664 * alt="WordPress" 71665 * /> 71666 * </ResponsiveWrapper> 71667 * ); 71668 * ``` 71669 */ 71670function ResponsiveWrapper({ 71671 naturalWidth, 71672 naturalHeight, 71673 children, 71674 isInline = false 71675}) { 71676 if (external_wp_element_namespaceObject.Children.count(children) !== 1) { 71677 return null; 71678 } 71679 const TagName = isInline ? 'span' : 'div'; 71680 let aspectRatio;
71681 if (naturalWidth && naturalHeight) { 71682 aspectRatio = `${naturalWidth} / ${naturalHeight}`; 71683 } 71684 return (0,external_wp_element_namespaceObject.createElement)(TagName, { 71685 className: "components-responsive-wrapper" 71686 }, (0,external_wp_element_namespaceObject.createElement)("div", null, (0,external_wp_element_namespaceObject.cloneElement)(children, { 71687 className: classnames_default()('components-responsive-wrapper__content', children.props.className), 71688 style: { 71689 ...children.props.style, 71690 aspectRatio 71691 } 71692 }))); 71693} 71694/* harmony default export */ const responsive_wrapper = (ResponsiveWrapper); 71695 71696;// CONCATENATED MODULE: ./packages/components/build-module/sandbox/index.js 71697 71698/** 71699 * WordPress dependencies 71700 */ 71701 71702 71703 71704/** 71705 * Internal dependencies 71706 */ 71707 71708const observeAndResizeJS = function () { 71709 const { 71710 MutationObserver 71711 } = window; 71712 if (!MutationObserver || !document.body || !window.parent) { 71713 return; 71714 } 71715 function sendResize() { 71716 const clientBoundingRect = document.body.getBoundingClientRect(); 71717 window.parent.postMessage({ 71718 action: 'resize', 71719 width: clientBoundingRect.width, 71720 height: clientBoundingRect.height 71721 }, '*'); 71722 } 71723 const observer = new MutationObserver(sendResize); 71724 observer.observe(document.body, { 71725 attributes: true, 71726 attributeOldValue: false, 71727 characterData: true, 71728 characterDataOldValue: false, 71729 childList: true, 71730 subtree: true 71731 }); 71732 window.addEventListener('load', sendResize, true); 71733 71734 // Hack: Remove viewport unit styles, as these are relative 71735 // the iframe root and interfere with our mechanism for 71736 // determining the unconstrained page bounds. 71737 function removeViewportStyles(ruleOrNode) { 71738 if (ruleOrNode.style) { 71739 ['width', 'height', 'minHeight', 'maxHeight'].forEach(function (style) { 71740 if (/^\\d+(vmin|vmax|vh|vw)$/.test(ruleOrNode.style[style])) { 71741 ruleOrNode.style[style] = ''; 71742 } 71743 }); 71744 } 71745 } 71746 Array.prototype.forEach.call(document.querySelectorAll('[style]'), removeViewportStyles); 71747 Array.prototype.forEach.call(document.styleSheets, function (stylesheet) { 71748 Array.prototype.forEach.call(stylesheet.cssRules || stylesheet.rules, removeViewportStyles); 71749 }); 71750 document.body.style.position = 'absolute'; 71751 document.body.style.width = '100%'; 71752 document.body.setAttribute('data-resizable-iframe-connected', ''); 71753 sendResize(); 71754 71755 // Resize events can change the width of elements with 100% width, but we don't 71756 // get an DOM mutations for that, so do the resize when the window is resized, too. 71757 window.addEventListener('resize', sendResize, true); 71758}; 71759 71760// TODO: These styles shouldn't be coupled with WordPress. 71761const style = ` 71762 body { 71763 margin: 0; 71764 } 71765 html, 71766 body, 71767 body > div { 71768 width: 100%; 71769 } 71770 html.wp-has-aspect-ratio, 71771 body.wp-has-aspect-ratio, 71772 body.wp-has-aspect-ratio > div, 71773 body.wp-has-aspect-ratio > div iframe { 71774 width: 100%; 71775 height: 100%; 71776 overflow: hidden; /* If it has an aspect ratio, it shouldn't scroll. */ 71777 } 71778 body > div > * { 71779 margin-top: 0 !important; /* Has to have !important to override inline styles. */ 71780 margin-bottom: 0 !important; 71781 } 71782`; 71783 71784/** 71785 * This component provides an isolated environment for arbitrary HTML via iframes. 71786 * 71787 * ```jsx 71788 * import { SandBox } from '@wordpress/components'; 71789 * 71790 * const MySandBox = () => ( 71791 * <SandBox html="<p>Content</p>" title="SandBox" type="embed" /> 71792 * ); 71793 * ``` 71794 */ 71795function SandBox({ 71796 html = '', 71797 title = '', 71798 type, 71799 styles = [], 71800 scripts = [], 71801 onFocus 71802}) { 71803 const ref = (0,external_wp_element_namespaceObject.useRef)(); 71804 const [width, setWidth] = (0,external_wp_element_namespaceObject.useState)(0); 71805 const [height, setHeight] = (0,external_wp_element_namespaceObject.useState)(0); 71806 function isFrameAccessible() { 71807 try { 71808 return !!ref.current?.contentDocument?.body; 71809 } catch (e) { 71810 return false; 71811 } 71812 } 71813 function trySandBox(forceRerender = false) { 71814 if (!isFrameAccessible()) { 71815 return; 71816 } 71817 const { 71818 contentDocument, 71819 ownerDocument 71820 } = ref.current; 71821 if (!forceRerender && null !== contentDocument?.body.getAttribute('data-resizable-iframe-connected')) { 71822 return; 71823 } 71824 71825 // Put the html snippet into a html document, and then write it to the iframe's document 71826 // we can use this in the future to inject custom styles or scripts.
71827 // Scripts go into the body rather than the head, to support embedded content such as Instagram 71828 // that expect the scripts to be part of the body. 71829 const htmlDoc = (0,external_wp_element_namespaceObject.createElement)("html", { 71830 lang: ownerDocument.documentElement.lang, 71831 className: type 71832 }, (0,external_wp_element_namespaceObject.createElement)("head", null, (0,external_wp_element_namespaceObject.createElement)("title", null, title), (0,external_wp_element_namespaceObject.createElement)("style", { 71833 dangerouslySetInnerHTML: { 71834 __html: style 71835 } 71836 }), styles.map((rules, i) => (0,external_wp_element_namespaceObject.createElement)("style", { 71837 key: i, 71838 dangerouslySetInnerHTML: { 71839 __html: rules 71840 } 71841 }))), (0,external_wp_element_namespaceObject.createElement)("body", { 71842 "data-resizable-iframe-connected": "data-resizable-iframe-connected", 71843 className: type 71844 }, (0,external_wp_element_namespaceObject.createElement)("div", { 71845 dangerouslySetInnerHTML: { 71846 __html: html 71847 } 71848 }), (0,external_wp_element_namespaceObject.createElement)("script", { 71849 type: "text/javascript", 71850 dangerouslySetInnerHTML: { 71851 __html: `(${observeAndResizeJS.toString()})();` 71852 } 71853 }), scripts.map(src => (0,external_wp_element_namespaceObject.createElement)("script", { 71854 key: src, 71855 src: src 71856 })))); 71857 71858 // Writing the document like this makes it act in the same way as if it was 71859 // loaded over the network, so DOM creation and mutation, script execution, etc. 71860 // all work as expected. 71861 contentDocument.open();
71862 contentDocument.write('<!DOCTYPE html>' + (0,external_wp_element_namespaceObject.renderToString)(htmlDoc)); 71863 contentDocument.close(); 71864 } 71865 (0,external_wp_element_namespaceObject.useEffect)(() => { 71866 trySandBox(); 71867 function tryNoForceSandBox() { 71868 trySandBox(false); 71869 } 71870 function checkMessageForResize(event) { 71871 const iframe = ref.current; 71872 71873 // Verify that the mounted element is the source of the message. 71874 if (!iframe || iframe.contentWindow !== event.source) { 71875 return; 71876 } 71877 71878 // Attempt to parse the message data as JSON if passed as string. 71879 let data = event.data || {}; 71880 if ('string' === typeof data) { 71881 try { 71882 data = JSON.parse(data); 71883 } catch (e) {} 71884 } 71885 71886 // Update the state only if the message is formatted as we expect, 71887 // i.e. as an object with a 'resize' action. 71888 if ('resize' !== data.action) { 71889 return; 71890 } 71891 setWidth(data.width); 71892 setHeight(data.height); 71893 } 71894 const iframe = ref.current; 71895 const defaultView = iframe?.ownerDocument?.defaultView; 71896 71897 // This used to be registered using <iframe onLoad={} />, but it made the iframe blank 71898 // after reordering the containing block. See these two issues for more details: 71899 // https://github.com/WordPress/gutenberg/issues/6146 71900 // https://github.com/facebook/react/issues/18752 71901 iframe?.addEventListener('load', tryNoForceSandBox, false); 71902 defaultView?.addEventListener('message', checkMessageForResize); 71903 return () => { 71904 iframe?.removeEventListener('load', tryNoForceSandBox, false); 71905 defaultView?.removeEventListener('message', checkMessageForResize); 71906 }; 71907 // Ignore reason: passing `exhaustive-deps` will likely involve a more detailed refactor. 71908 // See https://github.com/WordPress/gutenberg/pull/44378 71909 // eslint-disable-next-line react-hooks/exhaustive-deps 71910 }, []); 71911 (0,external_wp_element_namespaceObject.useEffect)(() => { 71912 trySandBox(); 71913 // Ignore reason: passing `exhaustive-deps` will likely involve a more detailed refactor. 71914 // See https://github.com/WordPress/gutenberg/pull/44378 71915 // eslint-disable-next-line react-hooks/exhaustive-deps 71916 }, [title, styles, scripts]); 71917 (0,external_wp_element_namespaceObject.useEffect)(() => { 71918 trySandBox(true); 71919 // Ignore reason: passing `exhaustive-deps` will likely involve a more detailed refactor. 71920 // See https://github.com/WordPress/gutenberg/pull/44378 71921 // eslint-disable-next-line react-hooks/exhaustive-deps 71922 }, [html, type]); 71923 return (0,external_wp_element_namespaceObject.createElement)("iframe", { 71924 ref: (0,external_wp_compose_namespaceObject.useMergeRefs)([ref, (0,external_wp_compose_namespaceObject.useFocusableIframe)()]), 71925 title: title, 71926 className: "components-sandbox", 71927 sandbox: "allow-scripts allow-same-origin allow-presentation", 71928 onFocus: onFocus, 71929 width: Math.ceil(width), 71930 height: Math.ceil(height) 71931 }); 71932} 71933/* harmony default export */ const sandbox = (SandBox); 71934 71935;// CONCATENATED MODULE: ./packages/components/build-module/snackbar/index.js 71936 71937/** 71938 * External dependencies 71939 */ 71940 71941 71942 71943/** 71944 * WordPress dependencies 71945 */ 71946 71947 71948 71949 71950 71951/** 71952 * Internal dependencies 71953 */ 71954 71955const NOTICE_TIMEOUT = 10000; 71956 71957/** 71958 * Custom hook which announces the message with the given politeness, if a 71959 * valid message is provided. 71960 * 71961 * @param message Message to announce. 71962 * @param politeness Politeness to announce. 71963 */ 71964function snackbar_useSpokenMessage(message, politeness) { 71965 const spokenMessage = typeof message === 'string' ? message : (0,external_wp_element_namespaceObject.renderToString)(message); 71966 (0,external_wp_element_namespaceObject.useEffect)(() => { 71967 if (spokenMessage) { 71968 (0,external_wp_a11y_namespaceObject.speak)(spokenMessage, politeness); 71969 } 71970 }, [spokenMessage, politeness]); 71971} 71972function UnforwardedSnackbar({ 71973 className, 71974 children, 71975 spokenMessage = children, 71976 politeness = 'polite', 71977 actions = [], 71978 onRemove, 71979 icon = null, 71980 explicitDismiss = false, 71981 // onDismiss is a callback executed when the snackbar is dismissed. 71982 // It is distinct from onRemove, which _looks_ like a callback but is 71983 // actually the function to call to remove the snackbar from the UI. 71984 onDismiss, 71985 listRef 71986}, ref) { 71987 function dismissMe(event) { 71988 if (event && event.preventDefault) { 71989 event.preventDefault(); 71990 } 71991 71992 // Prevent focus loss by moving it to the list element. 71993 listRef?.current?.focus(); 71994 onDismiss?.(); 71995 onRemove?.(); 71996 } 71997 function onActionClick(event, onClick) { 71998 event.stopPropagation(); 71999 onRemove?.(); 72000 if (onClick) { 72001 onClick(event); 72002 } 72003 } 72004 snackbar_useSpokenMessage(spokenMessage, politeness); 72005 72006 // Only set up the timeout dismiss if we're not explicitly dismissing. 72007 (0,external_wp_element_namespaceObject.useEffect)(() => { 72008 const timeoutHandle = setTimeout(() => { 72009 if (!explicitDismiss) { 72010 onDismiss?.(); 72011 onRemove?.(); 72012 } 72013 }, NOTICE_TIMEOUT); 72014 return () => clearTimeout(timeoutHandle); 72015 }, [onDismiss, onRemove, explicitDismiss]); 72016 const classes = classnames_default()(className, 'components-snackbar', { 72017 'components-snackbar-explicit-dismiss': !!explicitDismiss 72018 }); 72019 if (actions && actions.length > 1) { 72020 // We need to inform developers that snackbar only accepts 1 action. 72021 false ? 0 : void 0; 72022 // return first element only while keeping it inside an array 72023 actions = [actions[0]]; 72024 } 72025 const snackbarContentClassnames = classnames_default()('components-snackbar__content', { 72026 'components-snackbar__content-with-icon': !!icon 72027 }); 72028 return (0,external_wp_element_namespaceObject.createElement)("div", { 72029 ref: ref, 72030 className: classes, 72031 onClick: !explicitDismiss ? dismissMe : undefined, 72032 tabIndex: 0, 72033 role: !explicitDismiss ? 'button' : '', 72034 onKeyPress: !explicitDismiss ? dismissMe : undefined, 72035 "aria-label": !explicitDismiss ? (0,external_wp_i18n_namespaceObject.__)('Dismiss this notice') : '' 72036 }, (0,external_wp_element_namespaceObject.createElement)("div", { 72037 className: snackbarContentClassnames 72038 }, icon && (0,external_wp_element_namespaceObject.createElement)("div", { 72039 className: "components-snackbar__icon" 72040 }, icon), children, actions.map(({ 72041 label, 72042 onClick, 72043 url 72044 }, index) => { 72045 return (0,external_wp_element_namespaceObject.createElement)(build_module_button, { 72046 key: index, 72047 href: url, 72048 variant: "tertiary", 72049 onClick: event => onActionClick(event, onClick), 72050 className: "components-snackbar__action" 72051 }, label); 72052 }), explicitDismiss && (0,external_wp_element_namespaceObject.createElement)("span", { 72053 role: "button", 72054 "aria-label": "Dismiss this notice", 72055 tabIndex: 0, 72056 className: "components-snackbar__dismiss-button", 72057 onClick: dismissMe, 72058 onKeyPress: dismissMe 72059 }, "\u2715"))); 72060} 72061 72062/**
72063 * A Snackbar displays a succinct message that is cleared out after a small delay. 72064 * 72065 * It can also offer the user options, like viewing a published post. 72066 * But these options should also be available elsewhere in the UI. 72067 * 72068 * ```jsx 72069 * const MySnackbarNotice = () => ( 72070 * <Snackbar>Post published successfully.</Snackbar> 72071 * ); 72072 * ``` 72073 */ 72074const Snackbar = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedSnackbar); 72075/* harmony default export */ const snackbar = (Snackbar); 72076 72077;// CONCATENATED MODULE: ./packages/components/build-module/snackbar/list.js 72078 72079/** 72080 * External dependencies 72081 */ 72082 72083 72084/** 72085 * WordPress dependencies 72086 */ 72087 72088 72089 72090/** 72091 * Internal dependencies 72092 */ 72093 72094 72095const SNACKBAR_VARIANTS = { 72096 init: { 72097 height: 0, 72098 opacity: 0 72099 }, 72100 open: { 72101 height: 'auto', 72102 opacity: 1, 72103 transition: { 72104 height: { 72105 type: 'tween', 72106 duration: 0.3, 72107 ease: [0, 0, 0.2, 1] 72108 }, 72109 opacity: { 72110 type: 'tween', 72111 duration: 0.25, 72112 delay: 0.05, 72113 ease: [0, 0, 0.2, 1] 72114 } 72115 } 72116 }, 72117 exit: { 72118 opacity: 0, 72119 transition: { 72120 type: 'tween', 72121 duration: 0.1, 72122 ease: [0, 0, 0.2, 1] 72123 } 72124 } 72125}; 72126 72127/** 72128 * Renders a list of notices. 72129 * 72130 * ```jsx 72131 * const MySnackbarListNotice = () => ( 72132 * <SnackbarList 72133 * notices={ notices } 72134 * onRemove={ removeNotice } 72135 * /> 72136 * ); 72137 * ``` 72138 */ 72139function SnackbarList({ 72140 notices, 72141 className, 72142 children, 72143 onRemove 72144}) { 72145 const listRef = (0,external_wp_element_namespaceObject.useRef)(null); 72146 const isReducedMotion = (0,external_wp_compose_namespaceObject.useReducedMotion)(); 72147 className = classnames_default()('components-snackbar-list', className); 72148 const removeNotice = notice => () => onRemove?.(notice.id); 72149 return (0,external_wp_element_namespaceObject.createElement)("div", { 72150 className: className, 72151 tabIndex: -1, 72152 ref: listRef 72153 }, children, (0,external_wp_element_namespaceObject.createElement)(AnimatePresence, null, notices.map(notice => { 72154 const { 72155 content, 72156 ...restNotice 72157 } = notice; 72158 return (0,external_wp_element_namespaceObject.createElement)(motion.div, { 72159 layout: !isReducedMotion // See https://www.framer.com/docs/animation/#layout-animations 72160 , 72161 initial: 'init', 72162 animate: 'open', 72163 exit: 'exit', 72164 key: notice.id, 72165 variants: isReducedMotion ? undefined : SNACKBAR_VARIANTS 72166 }, (0,external_wp_element_namespaceObject.createElement)("div", { 72167 className: "components-snackbar-list__notice-container" 72168 }, (0,external_wp_element_namespaceObject.createElement)(snackbar, { 72169 ...restNotice, 72170 onRemove: removeNotice(notice), 72171 listRef: listRef 72172 }, notice.content))); 72173 }))); 72174} 72175/* harmony default export */ const snackbar_list = (SnackbarList); 72176 72177;// CONCATENATED MODULE: ./packages/components/build-module/spinner/styles.js 72178 72179function 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)."; } 72180/** 72181 * External dependencies 72182 */ 72183 72184 72185 72186/** 72187 * Internal dependencies 72188 */ 72189 72190const spinAnimation = emotion_react_browser_esm_keyframes` 72191 from { 72192 transform: rotate(0deg); 72193 } 72194 to { 72195 transform: rotate(360deg); 72196 } 72197 `; 72198const StyledSpinner = emotion_styled_base_browser_esm("svg", true ? { 72199 target: "ea4tfvq2" 72200} : 0)("width:", config_values.spinnerSize, "px;height:", config_values.spinnerSize, "px;display:inline-block;margin:5px 11px 0;position:relative;color:", COLORS.theme.accent, ";overflow:visible;opacity:1;background-color:transparent;" + ( true ? "" : 0)); 72201const commonPathProps = true ? { 72202 name: "9s4963", 72203 styles: "fill:transparent;stroke-width:1.5px" 72204} : 0; 72205const SpinnerTrack = emotion_styled_base_browser_esm("circle", true ? { 72206 target: "ea4tfvq1" 72207} : 0)(commonPathProps, ";stroke:", COLORS.gray[300], ";" + ( true ? "" : 0)); 72208const SpinnerIndicator = emotion_styled_base_browser_esm("path", true ? { 72209 target: "ea4tfvq0" 72210} : 0)(commonPathProps, ";stroke:currentColor;stroke-linecap:round;transform-origin:50% 50%;animation:1.4s linear infinite both ", spinAnimation, ";" + ( true ? "" : 0)); 72211 72212;// CONCATENATED MODULE: ./packages/components/build-module/spinner/index.js 72213 72214/** 72215 * External dependencies 72216 */ 72217
72218/** 72219 * Internal dependencies 72220 */ 72221 72222/** 72223 * WordPress dependencies 72224 */ 72225 72226function UnforwardedSpinner({ 72227 className, 72228 ...props 72229}, forwardedRef) { 72230 return (0,external_wp_element_namespaceObject.createElement)(StyledSpinner, { 72231 className: classnames_default()('components-spinner', className), 72232 viewBox: "0 0 100 100", 72233 width: "16", 72234 height: "16", 72235 xmlns: "http://www.w3.org/2000/svg", 72236 role: "presentation", 72237 focusable: "false", 72238 ...props, 72239 ref: forwardedRef 72240 }, (0,external_wp_element_namespaceObject.createElement)(SpinnerTrack, { 72241 cx: "50", 72242 cy: "50", 72243 r: "50", 72244 vectorEffect: "non-scaling-stroke" 72245 }), (0,external_wp_element_namespaceObject.createElement)(SpinnerIndicator, { 72246 d: "m 50 0 a 50 50 0 0 1 50 50", 72247 vectorEffect: "non-scaling-stroke" 72248 })); 72249} 72250/** 72251 * `Spinner` is a component used to notify users that their action is being processed. 72252 * 72253 * ```js 72254 * import { Spinner } from '@wordpress/components'; 72255 * 72256 * function Example() { 72257 * return <Spinner />; 72258 * } 72259 * ``` 72260 */ 72261const Spinner = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedSpinner); 72262/* harmony default export */ const spinner = (Spinner); 72263 72264;// CONCATENATED MODULE: ./packages/components/build-module/surface/component.js 72265 72266/** 72267 * External dependencies 72268 */ 72269 72270/** 72271 * Internal dependencies 72272 */ 72273 72274 72275 72276function UnconnectedSurface(props, forwardedRef) { 72277 const surfaceProps = useSurface(props); 72278 return (0,external_wp_element_namespaceObject.createElement)(component, { 72279 ...surfaceProps, 72280 ref: forwardedRef 72281 }); 72282} 72283 72284/** 72285 * `Surface` is a core component that renders a primary background color. 72286 * 72287 * In the example below, notice how the `Surface` renders in white (or dark gray if in dark mode). 72288 * 72289 * ```jsx 72290 * import { 72291 * __experimentalSurface as Surface, 72292 * __experimentalText as Text, 72293 * } from '@wordpress/components'; 72294 * 72295 * function Example() { 72296 * return ( 72297 * <Surface> 72298 * <Text>Code is Poetry</Text> 72299 * </Surface> 72300 * ); 72301 * } 72302 * ``` 72303 */ 72304const component_Surface = contextConnect(UnconnectedSurface, 'Surface'); 72305/* harmony default export */ const surface_component = (component_Surface); 72306 72307;// CONCATENATED MODULE: ./node_modules/@ariakit/core/esm/tab/tab-store.js 72308 72309 72310 72311 72312 72313 72314 72315
72316// src/tab/tab-store.ts 72317function createTabStore(props = {}) { 72318 var _a; 72319 const syncState = (_a = props.store) == null ? void 0 : _a.getState(); 72320 const composite = createCompositeStore(_chunks_PNRLI7OV_spreadProps(_chunks_PNRLI7OV_spreadValues({}, props), { 72321 orientation: defaultValue( 72322 props.orientation, 72323 syncState == null ? void 0 : syncState.orientation, 72324 "horizontal" 72325 ), 72326 focusLoop: defaultValue(props.focusLoop, syncState == null ? void 0 : syncState.focusLoop, true) 72327 })); 72328 const panels = createCollectionStore(); 72329 const initialState = _chunks_PNRLI7OV_spreadProps(_chunks_PNRLI7OV_spreadValues({}, composite.getState()), { 72330 selectedId: defaultValue( 72331 props.selectedId, 72332 syncState == null ? void 0 : syncState.selectedId, 72333 props.defaultSelectedId, 72334 void 0 72335 ), 72336 selectOnMove: defaultValue( 72337 props.selectOnMove, 72338 syncState == null ? void 0 : syncState.selectOnMove, 72339 true 72340 ) 72341 }); 72342 const tab = createStore(initialState, composite, props.store); 72343 tab.setup( 72344 () => tab.sync(() => { 72345 const { activeId, selectOnMove } = tab.getState(); 72346 if (!selectOnMove) 72347 return; 72348 if (!activeId) 72349 return; 72350 const tabItem = composite.item(activeId); 72351 if (!tabItem) 72352 return; 72353 if (tabItem.dimmed) 72354 return; 72355 if (tabItem.disabled) 72356 return; 72357 tab.setState("selectedId", tabItem.id); 72358 }, ["moves"]) 72359 ); 72360 tab.setup( 72361 () => tab.syncBatch( 72362 (state) => tab.setState("activeId", state.selectedId), 72363 ["selectedId"] 72364 ) 72365 ); 72366 tab.setup( 72367 () => tab.sync( 72368 (state) => { 72369 if (state.selectedId !== void 0) 72370 return; 72371 const { activeId, renderedItems } = tab.getState(); 72372 const tabItem = composite.item(activeId); 72373 if (tabItem && !tabItem.disabled && !tabItem.dimmed) { 72374 tab.setState("selectedId", tabItem.id); 72375 } else { 72376 const tabItem2 = renderedItems.find( 72377 (item) => !item.disabled && !item.dimmed 72378 ); 72379 tab.setState("selectedId", tabItem2 == null ? void 0 : tabItem2.id); 72380 } 72381 }, 72382 ["selectedId", "renderedItems"] 72383 ) 72384 ); 72385 tab.setup( 72386 () => tab.sync( 72387 (state) => { 72388 const tabs = state.renderedItems; 72389 if (!tabs.length) 72390 return; 72391 return panels.sync( 72392 (state2) => { 72393 const items = state2.renderedItems; 72394 const hasOrphanPanels = items.some((panel) => !panel.tabId); 72395 if (!hasOrphanPanels) 72396 return; 72397 items.forEach((panel, i) => { 72398 if (panel.tabId) 72399 return; 72400 const tabItem = tabs[i]; 72401 if (!tabItem) 72402 return; 72403 panels.renderItem(_chunks_PNRLI7OV_spreadProps(_chunks_PNRLI7OV_spreadValues({}, panel), { tabId: tabItem.id })); 72404 }); 72405 }, 72406 ["renderedItems"] 72407 ); 72408 }, 72409 ["renderedItems"] 72410 ) 72411 ); 72412 return _chunks_PNRLI7OV_spreadProps(_chunks_PNRLI7OV_spreadValues(_chunks_PNRLI7OV_spreadValues({}, composite), tab), { 72413 panels, 72414 setSelectedId: (id) => tab.setState("selectedId", id), 72415 select: (id) => { 72416 tab.setState("selectedId", id); 72417 composite.move(id); 72418 } 72419 }); 72420} 72421 72422 72423;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/tab/tab-store.js 72424 72425 72426 72427 72428 72429 72430
72431// src/tab/tab-store.ts 72432 72433 72434function useTabStoreOptions(props) { 72435 return useCompositeStoreOptions(props); 72436} 72437function useTabStoreProps(store, props) { 72438 store = useCompositeStoreProps(store, props); 72439 useStoreProps(store, props, "selectedId", "setSelectedId"); 72440 useStoreProps(store, props, "selectOnMove"); 72441 const panels = FHQZ2KRN_useStore(() => store.panels); 72442 return (0,external_React_.useMemo)(() => PNRLI7OV_spreadProps(PNRLI7OV_spreadValues({}, store), { panels }), []); 72443} 72444function useTabStore(props = {}) { 72445 const options = useTabStoreOptions(props); 72446 const store = FHQZ2KRN_useStore(() => createTabStore(PNRLI7OV_spreadValues(PNRLI7OV_spreadValues({}, props), options))); 72447 return useTabStoreProps(store, props); 72448} 72449 72450 72451;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/UZKBEGMB.js
72452// src/tab/tab-context.ts 72453 72454var TabContext = (0,external_React_.createContext)(void 0); 72455 72456 72457 72458;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/tab/tab-list.js 72459 72460 72461 72462 72463 72464 72465 72466 72467 72468 72469
72470// src/tab/tab-list.tsx 72471 72472var useTabList = NQJBHION_createHook((_a) => { 72473 var _b = _a, { store } = _b, props = __objRest(_b, ["store"]); 72474 const orientation = store.useState( 72475 (state) => state.orientation === "both" ? void 0 : state.orientation 72476 ); 72477 props = useWrapElement( 72478 props, 72479 (element) => /* @__PURE__ */ (0,jsx_runtime.jsx)(TabContext.Provider, { value: store, children: element }), 72480 [store] 72481 ); 72482 props = PNRLI7OV_spreadValues({ 72483 role: "tablist", 72484 "aria-orientation": orientation 72485 }, props); 72486 props = AAVDGJD5_useComposite(PNRLI7OV_spreadValues({ store }, props)); 72487 return props; 72488}); 72489var TabList = NQJBHION_createComponent((props) => { 72490 const htmlProps = useTabList(props); 72491 return NQJBHION_createElement("div", htmlProps); 72492}); 72493if (false) {} 72494 72495 72496;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/tab/tab.js 72497 72498 72499 72500 72501 72502 72503 72504 72505 72506 72507 72508 72509 72510 72511
72512// src/tab/tab.ts 72513 72514 72515var useTab = NQJBHION_createHook( 72516 (_a) => { 72517 var _b = _a, { 72518 store, 72519 accessibleWhenDisabled = true, 72520 getItem: getItemProp 72521 } = _b, props = __objRest(_b, [ 72522 "store", 72523 "accessibleWhenDisabled", 72524 "getItem" 72525 ]); 72526 const context = (0,external_React_.useContext)(TabContext); 72527 store = store || context; 72528 invariant( 72529 store, 72530 false && 0 72531 ); 72532 const defaultId = useId(); 72533 const id = props.id || defaultId; 72534 const dimmed = props.disabled; 72535 const getItem = (0,external_React_.useCallback)( 72536 (item) => { 72537 const nextItem = PNRLI7OV_spreadProps(PNRLI7OV_spreadValues({}, item), { dimmed }); 72538 if (getItemProp) { 72539 return getItemProp(nextItem); 72540 } 72541 return nextItem; 72542 }, 72543 [dimmed, getItemProp] 72544 ); 72545 const onClickProp = props.onClick; 72546 const onClick = useEvent((event) => { 72547 onClickProp == null ? void 0 : onClickProp(event); 72548 if (event.defaultPrevented) 72549 return; 72550 store == null ? void 0 : store.setSelectedId(id); 72551 }); 72552 const panelId = store.panels.useState( 72553 (state) => { 72554 var _a2; 72555 return (_a2 = state.items.find((item) => item.tabId === id)) == null ? void 0 : _a2.id; 72556 } 72557 ); 72558 const selected = store.useState((state) => !!id && state.selectedId === id); 72559 props = PNRLI7OV_spreadProps(PNRLI7OV_spreadValues({ 72560 id, 72561 role: "tab", 72562 "aria-selected": selected, 72563 "aria-controls": panelId || void 0 72564 }, props), { 72565 onClick 72566 }); 72567 props = WFK3YK7D_useCompositeItem(PNRLI7OV_spreadProps(PNRLI7OV_spreadValues({ 72568 store 72569 }, props), { 72570 accessibleWhenDisabled, 72571 getItem, 72572 shouldRegisterItem: !!defaultId ? props.shouldRegisterItem : false 72573 })); 72574 return props; 72575 } 72576); 72577var Tab = createMemoComponent((props) => { 72578 const htmlProps = useTab(props); 72579 return NQJBHION_createElement("button", htmlProps); 72580}); 72581if (false) {} 72582 72583 72584;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/tab/tab-panel.js 72585 72586 72587 72588 72589 72590 72591 72592 72593 72594 72595 72596
72597// src/tab/tab-panel.ts 72598 72599 72600var useTabPanel = NQJBHION_createHook( 72601 (_a) => { 72602 var _b = _a, { store, tabId: tabIdProp, getItem: getItemProp } = _b, props = __objRest(_b, ["store", "tabId", "getItem"]); 72603 const ref = (0,external_React_.useRef)(null); 72604 const id = useId(props.id); 72605 const [hasTabbableChildren, setHasTabbableChildren] = (0,external_React_.useState)(false); 72606 (0,external_React_.useEffect)(() => { 72607 const element = ref.current; 72608 if (!element) 72609 return; 72610 const tabbable = focus_getAllTabbableIn(element); 72611 setHasTabbableChildren(!!tabbable.length); 72612 }, []); 72613 const getItem = (0,external_React_.useCallback)( 72614 (item) => { 72615 const nextItem = PNRLI7OV_spreadProps(PNRLI7OV_spreadValues({}, item), { id: id || item.id, tabId: tabIdProp }); 72616 if (getItemProp) { 72617 return getItemProp(nextItem); 72618 } 72619 return nextItem; 72620 }, 72621 [id, tabIdProp, getItemProp] 72622 ); 72623 const tabId = store.panels.useState( 72624 () => { 72625 var _a2; 72626 return tabIdProp || ((_a2 = store.panels.item(id)) == null ? void 0 : _a2.tabId); 72627 } 72628 ); 72629 const open = store.useState( 72630 (state) => !!tabId && state.selectedId === tabId 72631 ); 72632 props = PNRLI7OV_spreadProps(PNRLI7OV_spreadValues({ 72633 id, 72634 role: "tabpanel", 72635 "aria-labelledby": tabId || void 0 72636 }, props), { 72637 ref: useMergeRefs(ref, props.ref) 72638 }); 72639 const disclosure = useDisclosureStore({ open }); 72640 props = useFocusable(PNRLI7OV_spreadValues({ focusable: !hasTabbableChildren }, props)); 72641 props = useDisclosureContent(PNRLI7OV_spreadValues({ store: disclosure }, props)); 72642 props = useCollectionItem(PNRLI7OV_spreadProps(PNRLI7OV_spreadValues({ store: store.panels }, props), { getItem })); 72643 return props; 72644 } 72645); 72646var TabPanel = NQJBHION_createComponent((props) => { 72647 const htmlProps = useTabPanel(props); 72648 return NQJBHION_createElement("div", htmlProps); 72649}); 72650if (false) {} 72651 72652 72653;// CONCATENATED MODULE: ./packages/components/build-module/tab-panel/index.js 72654 72655/** 72656 * External dependencies 72657 */ 72658 72659 72660/** 72661 * WordPress dependencies 72662 */ 72663 72664 72665 72666/** 72667 * Internal dependencies 72668 */ 72669 72670 72671// Separate the actual tab name from the instance ID. This is 72672// necessary because Ariakit internally uses the element ID when 72673// a new tab is selected, but our implementation looks specifically 72674// for the tab name to be passed to the `onSelect` callback. 72675const extractTabName = id => { 72676 if (typeof id === 'undefined' || id === null) { 72677 return; 72678 } 72679 return id.match(/^tab-panel-[0-9]*-(.*)/)?.[1]; 72680}; 72681 72682/** 72683 * TabPanel is an ARIA-compliant tabpanel. 72684 * 72685 * TabPanels organize content across different screens, data sets, and interactions. 72686 * It has two sections: a list of tabs, and the view to show when tabs are chosen. 72687 * 72688 * ```jsx 72689 * import { TabPanel } from '@wordpress/components'; 72690 * 72691 * const onSelect = ( tabName ) => { 72692 * console.log( 'Selecting tab', tabName ); 72693 * }; 72694 * 72695 * const MyTabPanel = () => ( 72696 * <TabPanel 72697 * className="my-tab-panel" 72698 * activeClass="active-tab" 72699 * onSelect={ onSelect } 72700 * tabs={ [ 72701 * { 72702 * name: 'tab1', 72703 * title: 'Tab 1', 72704 * className: 'tab-one', 72705 * }, 72706 * { 72707 * name: 'tab2', 72708 * title: 'Tab 2', 72709 * className: 'tab-two', 72710 * }, 72711 * ] } 72712 * > 72713 * { ( tab ) => <p>{ tab.title }</p> } 72714 * </TabPanel> 72715 * ); 72716 * ``` 72717 */ 72718const UnforwardedTabPanel = ({ 72719 className, 72720 children, 72721 tabs, 72722 selectOnMove = true, 72723 initialTabName, 72724 orientation = 'horizontal', 72725 activeClass = 'is-active', 72726 onSelect 72727}, ref) => { 72728 const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(tab_panel_TabPanel, 'tab-panel'); 72729 const prependInstanceId = (0,external_wp_element_namespaceObject.useCallback)(tabName => { 72730 if (typeof tabName === 'undefined') { 72731 return; 72732 } 72733 return `${instanceId}-${tabName}`; 72734 }, [instanceId]); 72735 const tabStore = useTabStore({ 72736 setSelectedId: newTabValue => { 72737 if (typeof newTabValue === 'undefined' || newTabValue === null) { 72738 return; 72739 } 72740 const newTab = tabs.find(t => prependInstanceId(t.name) === newTabValue); 72741 if (newTab?.disabled || newTab === selectedTab) { 72742 return; 72743 } 72744 const simplifiedTabName = extractTabName(newTabValue); 72745 if (typeof simplifiedTabName === 'undefined') { 72746 return; 72747 } 72748 onSelect?.(simplifiedTabName); 72749 }, 72750 orientation, 72751 selectOnMove, 72752 defaultSelectedId: prependInstanceId(initialTabName) 72753 }); 72754 const selectedTabName = extractTabName(tabStore.useState('selectedId')); 72755 const setTabStoreSelectedId = (0,external_wp_element_namespaceObject.useCallback)(tabName => { 72756 tabStore.setState('selectedId', prependInstanceId(tabName)); 72757 }, [prependInstanceId, tabStore]); 72758 const selectedTab = tabs.find(({ 72759 name 72760 }) => name === selectedTabName); 72761 const previousSelectedTabName = (0,external_wp_compose_namespaceObject.usePrevious)(selectedTabName); 72762 72763 // Ensure `onSelect` is called when the initial tab is selected. 72764 (0,external_wp_element_namespaceObject.useEffect)(() => { 72765 if (previousSelectedTabName !== selectedTabName && selectedTabName === initialTabName && !!selectedTabName) { 72766 onSelect?.(selectedTabName); 72767 } 72768 }, [selectedTabName, initialTabName, onSelect, previousSelectedTabName]); 72769 72770 // Handle selecting the initial tab. 72771 (0,external_wp_element_namespaceObject.useLayoutEffect)(() => { 72772 // If there's a selected tab, don't override it. 72773 if (selectedTab) { 72774 return; 72775 } 72776 const initialTab = tabs.find(tab => tab.name === initialTabName); 72777 // Wait for the denoted initial tab to be declared before making a 72778 // selection. This ensures that if a tab is declared lazily it can 72779 // still receive initial selection. 72780 if (initialTabName && !initialTab) { 72781 return; 72782 } 72783 if (initialTab && !initialTab.disabled) { 72784 // Select the initial tab if it's not disabled. 72785 setTabStoreSelectedId(initialTab.name); 72786 } else { 72787 // Fallback to the first enabled tab when the initial tab is 72788 // disabled or it can't be found. 72789 const firstEnabledTab = tabs.find(tab => !tab.disabled); 72790 if (firstEnabledTab) { 72791 setTabStoreSelectedId(firstEnabledTab.name); 72792 } 72793 } 72794 }, [tabs, selectedTab, initialTabName, instanceId, setTabStoreSelectedId]); 72795 72796 // Handle the currently selected tab becoming disabled. 72797 (0,external_wp_element_namespaceObject.useEffect)(() => { 72798 // This effect only runs when the selected tab is defined and becomes disabled. 72799 if (!selectedTab?.disabled) { 72800 return; 72801 } 72802 const firstEnabledTab = tabs.find(tab => !tab.disabled); 72803 // If the currently selected tab becomes disabled, select the first enabled tab. 72804 // (if there is one). 72805 if (firstEnabledTab) { 72806 setTabStoreSelectedId(firstEnabledTab.name); 72807 } 72808 }, [tabs, selectedTab?.disabled, setTabStoreSelectedId, instanceId]); 72809 return (0,external_wp_element_namespaceObject.createElement)("div", { 72810 className: className, 72811 ref: ref 72812 }, (0,external_wp_element_namespaceObject.createElement)(TabList, { 72813 store: tabStore, 72814 className: "components-tab-panel__tabs" 72815 }, tabs.map(tab => { 72816 return (0,external_wp_element_namespaceObject.createElement)(Tab, { 72817 key: tab.name, 72818 id: prependInstanceId(tab.name), 72819 className: classnames_default()('components-tab-panel__tabs-item', tab.className, { 72820 [activeClass]: tab.name === selectedTabName 72821 }), 72822 disabled: tab.disabled, 72823 "aria-controls": `${prependInstanceId(tab.name)}-view`, 72824 render: (0,external_wp_element_namespaceObject.createElement)(build_module_button, { 72825 icon: tab.icon, 72826 label: tab.icon && tab.title, 72827 showTooltip: !!tab.icon 72828 }) 72829 }, !tab.icon && tab.title); 72830 })), selectedTab && (0,external_wp_element_namespaceObject.createElement)(TabPanel, { 72831 id: `${prependInstanceId(selectedTab.name)}-view`, 72832 store: tabStore, 72833 tabId: prependInstanceId(selectedTab.name), 72834 className: 'components-tab-panel__tab-content' 72835 }, children(selectedTab))); 72836}; 72837const tab_panel_TabPanel = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedTabPanel); 72838/* harmony default export */ const tab_panel = (tab_panel_TabPanel); 72839 72840;// CONCATENATED MODULE: ./packages/components/build-module/text-control/index.js 72841 72842/** 72843 * External dependencies 72844 */ 72845
72846/** 72847 * WordPress dependencies 72848 */ 72849 72850 72851 72852/** 72853 * Internal dependencies 72854 */ 72855 72856function UnforwardedTextControl(props, ref) { 72857 const { 72858 __nextHasNoMarginBottom, 72859 label, 72860 hideLabelFromVision, 72861 value, 72862 help, 72863 id: idProp, 72864 className, 72865 onChange, 72866 type = 'text', 72867 ...additionalProps 72868 } = props; 72869 const id = (0,external_wp_compose_namespaceObject.useInstanceId)(TextControl, 'inspector-text-control', idProp); 72870 const onChangeValue = event => onChange(event.target.value); 72871 return (0,external_wp_element_namespaceObject.createElement)(base_control, { 72872 __nextHasNoMarginBottom: __nextHasNoMarginBottom, 72873 label: label, 72874 hideLabelFromVision: hideLabelFromVision, 72875 id: id, 72876 help: help, 72877 className: className 72878 }, (0,external_wp_element_namespaceObject.createElement)("input", { 72879 className: "components-text-control__input", 72880 type: type, 72881 id: id, 72882 value: value, 72883 onChange: onChangeValue, 72884 "aria-describedby": !!help ? id + '__help' : undefined, 72885 ref: ref, 72886 ...additionalProps 72887 })); 72888} 72889 72890/** 72891 * TextControl components let users enter and edit text. 72892 * 72893 * ```jsx 72894 * import { TextControl } from '@wordpress/components'; 72895 * import { useState } from '@wordpress/element'; 72896 * 72897 * const MyTextControl = () => { 72898 * const [ className, setClassName ] = useState( '' ); 72899 * 72900 * return ( 72901 * <TextControl 72902 * label="Additional CSS Class" 72903 * value={ className } 72904 * onChange={ ( value ) => setClassName( value ) } 72905 * /> 72906 * ); 72907 * }; 72908 * ``` 72909 */ 72910const TextControl = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedTextControl); 72911/* harmony default export */ const text_control = (TextControl); 72912 72913;// CONCATENATED MODULE: ./packages/components/build-module/utils/input/base.js 72914/** 72915 * External dependencies 72916 */ 72917 72918 72919/** 72920 * Internal dependencies 72921 */ 72922 72923 72924 72925const 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); 72926const inputStyleFocus = /*#__PURE__*/emotion_react_browser_esm_css("border-color:", COLORS.theme.accent, ";box-shadow:0 0 0 calc( ", config_values.borderWidthFocus, " - ", config_values.borderWidth, " ) ", COLORS.theme.accent, ";outline:2px solid transparent;" + ( true ? "" : 0), true ? "" : 0); 72927 72928;// CONCATENATED MODULE: ./packages/components/build-module/utils/breakpoint-values.js 72929/* harmony default export */ const breakpoint_values = ({ 72930 huge: '1440px', 72931 wide: '1280px', 72932 'x-large': '1080px', 72933 large: '960px', 72934 // admin sidebar auto folds 72935 medium: '782px', 72936 // Adminbar goes big. 72937 small: '600px', 72938 mobile: '480px', 72939 'zoomed-in': '280px' 72940}); 72941 72942;// CONCATENATED MODULE: ./packages/components/build-module/utils/breakpoint.js 72943/** 72944 * Internal dependencies 72945 */ 72946 72947 72948/** 72949 * @param {keyof breakpoints} point 72950 * @return {string} Media query declaration. 72951 */ 72952const breakpoint = point => `@media (min-width: ${breakpoint_values[point]})`; 72953 72954;// CONCATENATED MODULE: ./packages/components/build-module/utils/input/input-control.js 72955/** 72956 * External dependencies 72957 */ 72958 72959 72960/** 72961 * Internal dependencies 72962 */ 72963 72964 72965 72966 72967const inputControl = /*#__PURE__*/emotion_react_browser_esm_css("display:block;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.ui.darkGrayPlaceholder, ";}&::-moz-placeholder{opacity:1;color:", COLORS.ui.darkGrayPlaceholder, ";}&:-ms-input-placeholder{color:", COLORS.ui.darkGrayPlaceholder, ";}.is-dark-theme &{&::-webkit-input-placeholder{color:", COLORS.ui.lightGrayPlaceholder, ";}&::-moz-placeholder{opacity:1;color:", COLORS.ui.lightGrayPlaceholder, ";}&:-ms-input-placeholder{color:", COLORS.ui.lightGrayPlaceholder, ";}}" + ( true ? "" : 0), true ? "" : 0); 72968 72969;// CONCATENATED MODULE: ./packages/components/build-module/textarea-control/styles/textarea-control-styles.js 72970 72971/** 72972 * External dependencies 72973 */ 72974
72975/** 72976 * Internal dependencies 72977 */ 72978 72979const StyledTextarea = emotion_styled_base_browser_esm("textarea", true ? { 72980 target: "e1w5nnrk0" 72981} : 0)("width:100%;", inputControl, ";" + ( true ? "" : 0)); 72982 72983;// CONCATENATED MODULE: ./packages/components/build-module/textarea-control/index.js 72984 72985/** 72986 * External dependencies 72987 */ 72988 72989/** 72990 * WordPress dependencies 72991 */ 72992 72993 72994/** 72995 * Internal dependencies 72996 */ 72997 72998 72999/** 73000 * TextareaControls are TextControls that allow for multiple lines of text, and 73001 * wrap overflow text onto a new line. They are a fixed height and scroll 73002 * vertically when the cursor reaches the bottom of the field. 73003 * 73004 * ```jsx 73005 * import { TextareaControl } from '@wordpress/components'; 73006 * import { useState } from '@wordpress/element'; 73007 * 73008 * const MyTextareaControl = () => { 73009 * const [ text, setText ] = useState( '' ); 73010 * 73011 * return ( 73012 * <TextareaControl 73013 * label="Text" 73014 * help="Enter some text" 73015 * value={ text } 73016 * onChange={ ( value ) => setText( value ) } 73017 * /> 73018 * ); 73019 * }; 73020 * ``` 73021 */ 73022function TextareaControl(props) { 73023 const { 73024 __nextHasNoMarginBottom, 73025 label, 73026 hideLabelFromVision, 73027 value, 73028 help, 73029 onChange, 73030 rows = 4, 73031 className, 73032 ...additionalProps 73033 } = props; 73034 const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(TextareaControl); 73035 const id = `inspector-textarea-control-${instanceId}`; 73036 const onChangeValue = event => onChange(event.target.value); 73037 return (0,external_wp_element_namespaceObject.createElement)(base_control, { 73038 __nextHasNoMarginBottom: __nextHasNoMarginBottom, 73039 label: label, 73040 hideLabelFromVision: hideLabelFromVision, 73041 id: id, 73042 help: help, 73043 className: className 73044 }, (0,external_wp_element_namespaceObject.createElement)(StyledTextarea, { 73045 className: "components-textarea-control__input", 73046 id: id, 73047 rows: rows, 73048 onChange: onChangeValue, 73049 "aria-describedby": !!help ? id + '__help' : undefined, 73050 value: value, 73051 ...additionalProps 73052 })); 73053} 73054/* harmony default export */ const textarea_control = (TextareaControl); 73055 73056;// CONCATENATED MODULE: ./packages/components/build-module/text-highlight/index.js 73057 73058/** 73059 * WordPress dependencies 73060 */ 73061 73062 73063/** 73064 * Internal dependencies 73065 */ 73066 73067/** 73068 * Highlights occurrences of a given string within another string of text. Wraps 73069 * each match with a `<mark>` tag which provides browser default styling. 73070 * 73071 * ```jsx 73072 * import { TextHighlight } from '@wordpress/components'; 73073 * 73074 * const MyTextHighlight = () => ( 73075 * <TextHighlight 73076 * text="Why do we like Gutenberg? Because Gutenberg is the best!" 73077 * highlight="Gutenberg" 73078 * /> 73079 * ); 73080 * ``` 73081 */ 73082const TextHighlight = props => { 73083 const { 73084 text = '', 73085 highlight = '' 73086 } = props; 73087 const trimmedHighlightText = highlight.trim(); 73088 if (!trimmedHighlightText) { 73089 return (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, text); 73090 } 73091 const regex = new RegExp(`(${escapeRegExp(trimmedHighlightText)})`, 'gi'); 73092 return (0,external_wp_element_namespaceObject.createInterpolateElement)(text.replace(regex, '<mark>$&</mark>'), { 73093 mark: (0,external_wp_element_namespaceObject.createElement)("mark", null) 73094 }); 73095}; 73096/* harmony default export */ const text_highlight = (TextHighlight); 73097 73098;// CONCATENATED MODULE: ./packages/icons/build-module/library/tip.js 73099 73100/** 73101 * WordPress dependencies 73102 */ 73103 73104const tip = (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.SVG, { 73105 xmlns: "http://www.w3.org/2000/svg", 73106 viewBox: "0 0 24 24" 73107}, (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.Path, { 73108 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" 73109})); 73110/* harmony default export */ const library_tip = (tip); 73111 73112;// CONCATENATED MODULE: ./packages/components/build-module/tip/index.js 73113 73114/** 73115 * WordPress dependencies 73116 */ 73117 73118 73119/** 73120 * Internal dependencies 73121 */ 73122 73123function Tip(props) { 73124 const { 73125 children 73126 } = props; 73127 return (0,external_wp_element_namespaceObject.createElement)("div", { 73128 className: "components-tip" 73129 }, (0,external_wp_element_namespaceObject.createElement)(icons_build_module_icon, { 73130 icon: library_tip 73131 }), (0,external_wp_element_namespaceObject.createElement)("p", null, children)); 73132} 73133/* harmony default export */ const build_module_tip = (Tip); 73134 73135;// CONCATENATED MODULE: ./packages/components/build-module/toggle-control/index.js 73136 73137/** 73138 * External dependencies 73139 */ 73140 73141 73142 73143/** 73144 * WordPress dependencies 73145 */ 73146 73147 73148/** 73149 * Internal dependencies 73150 */ 73151 73152 73153 73154 73155 73156 73157 73158/** 73159 * ToggleControl is used to generate a toggle user interface. 73160 * 73161 * ```jsx 73162 * import { ToggleControl } from '@wordpress/components';
73163 * import { useState } from '@wordpress/element'; 73164 * 73165 * const MyToggleControl = () => { 73166 * const [ value, setValue ] = useState( false ); 73167 * 73168 * return ( 73169 * <ToggleControl 73170 * label="Fixed Background" 73171 * checked={ value } 73172 * onChange={ () => setValue( ( state ) => ! state ) } 73173 * /> 73174 * ); 73175 * }; 73176 * ``` 73177 */ 73178function ToggleControl({ 73179 __nextHasNoMarginBottom, 73180 label, 73181 checked, 73182 help, 73183 className, 73184 onChange, 73185 disabled 73186}) { 73187 function onChangeToggle(event) { 73188 onChange(event.target.checked); 73189 } 73190 const instanceId = (0,external_wp_compose_namespaceObject.useInstanceId)(ToggleControl); 73191 const id = `inspector-toggle-control-${instanceId}`; 73192 const cx = useCx(); 73193 const classes = cx('components-toggle-control', className, !__nextHasNoMarginBottom && /*#__PURE__*/emotion_react_browser_esm_css({ 73194 marginBottom: space(3) 73195 }, true ? "" : 0, true ? "" : 0)); 73196 let describedBy, helpLabel; 73197 if (help) { 73198 if (typeof help === 'function') { 73199 // `help` as a function works only for controlled components where 73200 // `checked` is passed down from parent component. Uncontrolled 73201 // component can show only a static help label. 73202 if (checked !== undefined) { 73203 helpLabel = help(checked); 73204 } 73205 } else { 73206 helpLabel = help; 73207 } 73208 if (helpLabel) { 73209 describedBy = id + '__help'; 73210 } 73211 } 73212 return (0,external_wp_element_namespaceObject.createElement)(base_control, { 73213 id: id, 73214 help: helpLabel, 73215 className: classes, 73216 __nextHasNoMarginBottom: true 73217 }, (0,external_wp_element_namespaceObject.createElement)(h_stack_component, { 73218 justify: "flex-start", 73219 spacing: 3 73220 }, (0,external_wp_element_namespaceObject.createElement)(form_toggle, { 73221 id: id, 73222 checked: checked, 73223 onChange: onChangeToggle, 73224 "aria-describedby": describedBy, 73225 disabled: disabled 73226 }), (0,external_wp_element_namespaceObject.createElement)(flex_block_component, { 73227 as: "label", 73228 htmlFor: id, 73229 className: "components-toggle-control__label" 73230 }, label))); 73231} 73232/* harmony default export */ const toggle_control = (ToggleControl); 73233 73234;// CONCATENATED MODULE: ./packages/components/build-module/toggle-group-control/toggle-group-control-option-icon/component.js 73235 73236/** 73237 * External dependencies 73238 */ 73239 73240/** 73241 * WordPress dependencies 73242 */ 73243 73244 73245/** 73246 * Internal dependencies 73247 */ 73248 73249 73250 73251function UnforwardedToggleGroupControlOptionIcon(props, ref) { 73252 const { 73253 icon, 73254 label, 73255 ...restProps 73256 } = props; 73257 return (0,external_wp_element_namespaceObject.createElement)(toggle_group_control_option_base_component, { 73258 ...restProps, 73259 isIcon: true, 73260 "aria-label": label, 73261 showTooltip: true, 73262 ref: ref 73263 }, (0,external_wp_element_namespaceObject.createElement)(build_module_icon, { 73264 icon: icon 73265 })); 73266} 73267 73268/** 73269 * `ToggleGroupControlOptionIcon` is a form component which is meant to be used as a 73270 * child of `ToggleGroupControl` and displays an icon. 73271 * 73272 * ```jsx 73273 * 73274 * import { 73275 * __experimentalToggleGroupControl as ToggleGroupControl, 73276 * __experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon, 73277 * from '@wordpress/components'; 73278 * import { formatLowercase, formatUppercase } from '@wordpress/icons'; 73279 * 73280 * function Example() { 73281 * return ( 73282 * <ToggleGroupControl> 73283 * <ToggleGroupControlOptionIcon 73284 * value="uppercase" 73285 * label="Uppercase" 73286 * icon={ formatUppercase } 73287 * /> 73288 * <ToggleGroupControlOptionIcon 73289 * value="lowercase" 73290 * label="Lowercase" 73291 * icon={ formatLowercase } 73292 * /> 73293 * </ToggleGroupControl> 73294 * ); 73295 * } 73296 * ``` 73297 */ 73298const ToggleGroupControlOptionIcon = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedToggleGroupControlOptionIcon); 73299/* harmony default export */ const toggle_group_control_option_icon_component = (ToggleGroupControlOptionIcon); 73300 73301;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/6YH4Z35H.js 73302 73303 73304 73305
73306// src/toolbar/toolbar-item.ts 73307var useToolbarItem = NQJBHION_createHook( 73308 (_a) => { 73309 var _b = _a, { store } = _b, props = __objRest(_b, ["store"]); 73310 props = WFK3YK7D_useCompositeItem(PNRLI7OV_spreadValues({ store }, props)); 73311 return props; 73312 } 73313); 73314var ToolbarItem = createMemoComponent((props) => { 73315 const htmlProps = useToolbarItem(props); 73316 return NQJBHION_createElement("button", htmlProps); 73317}); 73318if (false) {} 73319 73320 73321 73322;// CONCATENATED MODULE: ./packages/components/build-module/toolbar/toolbar-context/index.js 73323/** 73324 * External dependencies 73325 */ 73326 73327/** 73328 * WordPress dependencies 73329 */ 73330 73331const ToolbarContext = (0,external_wp_element_namespaceObject.createContext)(undefined); 73332/* harmony default export */ const toolbar_context = (ToolbarContext); 73333 73334;// CONCATENATED MODULE: ./packages/components/build-module/toolbar/toolbar-item/index.js 73335 73336/** 73337 * External dependencies 73338 */ 73339 73340/** 73341 * WordPress dependencies 73342 */ 73343 73344 73345 73346/** 73347 * Internal dependencies 73348 */ 73349 73350function toolbar_item_ToolbarItem({ 73351 children, 73352 as: Component, 73353 ...props 73354}, ref) { 73355 const accessibleToolbarStore = (0,external_wp_element_namespaceObject.useContext)(toolbar_context); 73356 const isRenderProp = typeof children === 'function'; 73357 if (!isRenderProp && !Component) { 73358 false ? 0 : void 0; 73359 return null; 73360 } 73361 const allProps = { 73362 ...props, 73363 ref, 73364 'data-toolbar-item': true 73365 }; 73366 if (!accessibleToolbarStore) { 73367 if (Component) { 73368 return (0,external_wp_element_namespaceObject.createElement)(Component, { 73369 ...allProps 73370 }, children); 73371 } 73372 if (!isRenderProp) { 73373 return null; 73374 } 73375 return children(allProps); 73376 } 73377 const render = isRenderProp ? children : Component && (0,external_wp_element_namespaceObject.createElement)(Component, null, children); 73378 return (0,external_wp_element_namespaceObject.createElement)(ToolbarItem, { 73379 ...allProps, 73380 store: accessibleToolbarStore, 73381 render: render 73382 }); 73383} 73384/* harmony default export */ const toolbar_item = ((0,external_wp_element_namespaceObject.forwardRef)(toolbar_item_ToolbarItem)); 73385 73386;// CONCATENATED MODULE: ./packages/components/build-module/toolbar/toolbar-button/toolbar-button-container.js 73387 73388/** 73389 * Internal dependencies 73390 */ 73391 73392const ToolbarButtonContainer = ({ 73393 children, 73394 className 73395}) => (0,external_wp_element_namespaceObject.createElement)("div", { 73396 className: className 73397}, children); 73398/* harmony default export */ const toolbar_button_container = (ToolbarButtonContainer); 73399 73400;// CONCATENATED MODULE: ./packages/components/build-module/toolbar/toolbar-button/index.js 73401 73402/** 73403 * External dependencies 73404 */ 73405 73406/** 73407 * WordPress dependencies 73408 */ 73409 73410 73411/** 73412 * Internal dependencies 73413 */ 73414 73415 73416 73417 73418function UnforwardedToolbarButton({ 73419 children, 73420 className, 73421 containerClassName, 73422 extraProps, 73423 isActive, 73424 isDisabled, 73425 title, 73426 ...props 73427}, ref) { 73428 const accessibleToolbarState = (0,external_wp_element_namespaceObject.useContext)(toolbar_context); 73429 if (!accessibleToolbarState) { 73430 return (0,external_wp_element_namespaceObject.createElement)(toolbar_button_container, { 73431 className: containerClassName 73432 }, (0,external_wp_element_namespaceObject.createElement)(build_module_button, { 73433 ref: ref, 73434 icon: props.icon, 73435 label: title, 73436 shortcut: props.shortcut, 73437 "data-subscript": props.subscript, 73438 onClick: event => { 73439 event.stopPropagation(); 73440 // TODO: Possible bug; maybe use onClick instead of props.onClick. 73441 if (props.onClick) { 73442 props.onClick(event); 73443 } 73444 }, 73445 className: classnames_default()('components-toolbar__control', className), 73446 isPressed: isActive, 73447 disabled: isDisabled, 73448 "data-toolbar-item": true, 73449 ...extraProps, 73450 ...props 73451 }, children)); 73452 } 73453 73454 // ToobarItem will pass all props to the render prop child, which will pass 73455 // all props to Button. This means that ToolbarButton has the same API as 73456 // Button. 73457 return (0,external_wp_element_namespaceObject.createElement)(toolbar_item, { 73458 className: classnames_default()('components-toolbar-button', className), 73459 ...extraProps, 73460 ...props, 73461 ref: ref 73462 }, toolbarItemProps => (0,external_wp_element_namespaceObject.createElement)(build_module_button, { 73463 label: title, 73464 isPressed: isActive, 73465 disabled: isDisabled, 73466 ...toolbarItemProps 73467 }, children)); 73468} 73469 73470/** 73471 * ToolbarButton can be used to add actions to a toolbar, usually inside a Toolbar 73472 * or ToolbarGroup when used to create general interfaces. 73473 * 73474 * ```jsx 73475 * import { Toolbar, ToolbarButton } from '@wordpress/components'; 73476 * import { edit } from '@wordpress/icons'; 73477 * 73478 * function MyToolbar() { 73479 * return ( 73480 * <Toolbar label="Options"> 73481 * <ToolbarButton 73482 * icon={ edit } 73483 * label="Edit" 73484 * onClick={ () => alert( 'Editing' ) } 73485 * /> 73486 * </Toolbar> 73487 * ); 73488 * } 73489 * ``` 73490 */ 73491const ToolbarButton = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedToolbarButton); 73492/* harmony default export */ const toolbar_button = (ToolbarButton); 73493 73494;// CONCATENATED MODULE: ./packages/components/build-module/toolbar/toolbar-group/toolbar-group-container.js 73495 73496/** 73497 * Internal dependencies 73498 */ 73499 73500const ToolbarGroupContainer = ({ 73501 className, 73502 children, 73503 ...props 73504}) => (0,external_wp_element_namespaceObject.createElement)("div", { 73505 className: className, 73506 ...props 73507}, children); 73508/* harmony default export */ const toolbar_group_container = (ToolbarGroupContainer); 73509 73510;// CONCATENATED MODULE: ./packages/components/build-module/toolbar/toolbar-group/toolbar-group-collapsed.js 73511 73512/** 73513 * WordPress dependencies 73514 */ 73515 73516 73517/** 73518 * Internal dependencies 73519 */ 73520 73521 73522 73523function ToolbarGroupCollapsed({ 73524 controls = [], 73525 toggleProps, 73526 ...props 73527}) { 73528 // It'll contain state if `ToolbarGroup` is being used within 73529 // `<Toolbar label="label" />` 73530 const accessibleToolbarState = (0,external_wp_element_namespaceObject.useContext)(toolbar_context); 73531 const renderDropdownMenu = internalToggleProps => (0,external_wp_element_namespaceObject.createElement)(dropdown_menu, { 73532 controls: controls, 73533 toggleProps: { 73534 ...internalToggleProps, 73535 'data-toolbar-item': true 73536 }, 73537 ...props 73538 }); 73539 if (accessibleToolbarState) { 73540 return (0,external_wp_element_namespaceObject.createElement)(toolbar_item, { 73541 ...toggleProps 73542 }, renderDropdownMenu); 73543 } 73544 return renderDropdownMenu(toggleProps); 73545} 73546/* harmony default export */ const toolbar_group_collapsed = (ToolbarGroupCollapsed); 73547 73548;// CONCATENATED MODULE: ./packages/components/build-module/toolbar/toolbar-group/index.js 73549 73550/** 73551 * External dependencies 73552 */ 73553 73554 73555/** 73556 * WordPress dependencies 73557 */ 73558 73559 73560/** 73561 * Internal dependencies 73562 */ 73563 73564 73565 73566 73567function isNestedArray(arr) { 73568 return Array.isArray(arr) && Array.isArray(arr[0]); 73569} 73570 73571/** 73572 * Renders a collapsible group of controls 73573 * 73574 * The `controls` prop accepts an array of sets. A set is an array of controls. 73575 * Controls have the following shape: 73576 * 73577 * ``` 73578 * { 73579 * icon: string, 73580 * title: string, 73581 * subscript: string, 73582 * onClick: Function, 73583 * isActive: boolean, 73584 * isDisabled: boolean 73585 * } 73586 * ``` 73587 * 73588 * For convenience it is also possible to pass only an array of controls. It is 73589 * then assumed this is the only set. 73590 * 73591 * Either `controls` or `children` is required, otherwise this components 73592 * renders nothing. 73593 * 73594 * @param props Component props. 73595 * @param [props.controls] The controls to render in this toolbar. 73596 * @param [props.children] Any other things to render inside the toolbar besides the controls. 73597 * @param [props.className] Class to set on the container div. 73598 * @param [props.isCollapsed] Turns ToolbarGroup into a dropdown menu. 73599 * @param [props.title] ARIA label for dropdown menu if is collapsed. 73600 */ 73601function ToolbarGroup({ 73602 controls = [], 73603 children, 73604 className, 73605 isCollapsed, 73606 title, 73607 ...props 73608}) { 73609 // It'll contain state if `ToolbarGroup` is being used within 73610 // `<Toolbar label="label" />` 73611 const accessibleToolbarState = (0,external_wp_element_namespaceObject.useContext)(toolbar_context);
73612 if ((!controls || !controls.length) && !children) { 73613 return null; 73614 } 73615 const finalClassName = classnames_default()( 73616 // Unfortunately, there's legacy code referencing to `.components-toolbar` 73617 // So we can't get rid of it 73618 accessibleToolbarState ? 'components-toolbar-group' : 'components-toolbar', className); 73619 73620 // Normalize controls to nested array of objects (sets of controls) 73621 let controlSets; 73622 if (isNestedArray(controls)) { 73623 controlSets = controls; 73624 } else { 73625 controlSets = [controls]; 73626 } 73627 if (isCollapsed) { 73628 return (0,external_wp_element_namespaceObject.createElement)(toolbar_group_collapsed, { 73629 label: title, 73630 controls: controlSets, 73631 className: finalClassName, 73632 children: children, 73633 ...props 73634 }); 73635 } 73636 return (0,external_wp_element_namespaceObject.createElement)(toolbar_group_container, { 73637 className: finalClassName, 73638 ...props 73639 }, controlSets?.flatMap((controlSet, indexOfSet) => controlSet.map((control, indexOfControl) => (0,external_wp_element_namespaceObject.createElement)(toolbar_button, { 73640 key: [indexOfSet, indexOfControl].join(), 73641 containerClassName: indexOfSet > 0 && indexOfControl === 0 ? 'has-left-divider' : undefined, 73642 ...control 73643 }))), children); 73644} 73645/* harmony default export */ const toolbar_group = (ToolbarGroup); 73646 73647;// CONCATENATED MODULE: ./node_modules/@ariakit/core/esm/toolbar/toolbar-store.js 73648 73649 73650 73651 73652 73653 73654 73655
73656// src/toolbar/toolbar-store.ts 73657function createToolbarStore(props = {}) { 73658 var _a; 73659 const syncState = (_a = props.store) == null ? void 0 : _a.getState(); 73660 return createCompositeStore(_chunks_PNRLI7OV_spreadProps(_chunks_PNRLI7OV_spreadValues({}, props), { 73661 orientation: defaultValue( 73662 props.orientation, 73663 syncState == null ? void 0 : syncState.orientation, 73664 "horizontal" 73665 ), 73666 focusLoop: defaultValue(props.focusLoop, syncState == null ? void 0 : syncState.focusLoop, true) 73667 })); 73668} 73669 73670 73671;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/toolbar/toolbar-store.js 73672 73673 73674 73675 73676 73677 73678
73679// src/toolbar/toolbar-store.ts 73680 73681function useToolbarStoreOptions(props) { 73682 return useCompositeStoreOptions(props); 73683} 73684function useToolbarStoreProps(store, props) { 73685 return useCompositeStoreProps(store, props); 73686} 73687function useToolbarStore(props = {}) { 73688 const options = useToolbarStoreOptions(props); 73689 const store = FHQZ2KRN_useStore( 73690 () => createToolbarStore(PNRLI7OV_spreadValues(PNRLI7OV_spreadValues({}, props), options)) 73691 ); 73692 return useToolbarStoreProps(store, props); 73693} 73694 73695 73696;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/__chunks/DFUIIKXE.js
73697// src/toolbar/toolbar-context.ts 73698 73699var DFUIIKXE_ToolbarContext = (0,external_React_.createContext)( 73700 void 0 73701); 73702 73703 73704 73705;// CONCATENATED MODULE: ./node_modules/@ariakit/react-core/esm/toolbar/toolbar.js 73706 73707 73708 73709 73710 73711 73712 73713 73714 73715 73716
73717// src/toolbar/toolbar.tsx 73718 73719var useToolbar = NQJBHION_createHook((_a) => { 73720 var _b = _a, { store } = _b, props = __objRest(_b, ["store"]); 73721 const orientation = store.useState( 73722 (state) => state.orientation === "both" ? void 0 : state.orientation 73723 ); 73724 props = useWrapElement( 73725 props, 73726 (element) => /* @__PURE__ */ (0,jsx_runtime.jsx)(DFUIIKXE_ToolbarContext.Provider, { value: store, children: element }), 73727 [store] 73728 ); 73729 props = PNRLI7OV_spreadValues({ 73730 role: "toolbar", 73731 "aria-orientation": orientation 73732 }, props); 73733 props = AAVDGJD5_useComposite(PNRLI7OV_spreadValues({ store }, props)); 73734 return props; 73735}); 73736var Toolbar = NQJBHION_createComponent((props) => { 73737 const htmlProps = useToolbar(props); 73738 return NQJBHION_createElement("div", htmlProps); 73739}); 73740if (false) {} 73741 73742 73743;// CONCATENATED MODULE: ./packages/components/build-module/toolbar/toolbar/toolbar-container.js 73744 73745/** 73746 * External dependencies 73747 */ 73748 73749/** 73750 * WordPress dependencies 73751 */ 73752 73753 73754 73755/** 73756 * Internal dependencies 73757 */ 73758 73759function UnforwardedToolbarContainer({ 73760 label, 73761 ...props 73762}, ref) { 73763 const toolbarStore = useToolbarStore({ 73764 focusLoop: true, 73765 rtl: (0,external_wp_i18n_namespaceObject.isRTL)() 73766 }); 73767 return ( 73768 // This will provide state for `ToolbarButton`'s 73769 (0,external_wp_element_namespaceObject.createElement)(toolbar_context.Provider, { 73770 value: toolbarStore 73771 }, (0,external_wp_element_namespaceObject.createElement)(Toolbar, { 73772 ref: ref, 73773 "aria-label": label, 73774 store: toolbarStore, 73775 ...props 73776 })) 73777 ); 73778} 73779const ToolbarContainer = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedToolbarContainer); 73780/* harmony default export */ const toolbar_container = (ToolbarContainer); 73781 73782;// CONCATENATED MODULE: ./packages/components/build-module/toolbar/toolbar/index.js 73783 73784/** 73785 * External dependencies 73786 */ 73787 73788/** 73789 * WordPress dependencies 73790 */ 73791 73792 73793 73794/** 73795 * Internal dependencies 73796 */ 73797 73798 73799 73800const CONTEXT_SYSTEM_VALUE = { 73801 DropdownMenu: { 73802 variant: 'toolbar' 73803 }, 73804 Dropdown: { 73805 variant: 'toolbar' 73806 } 73807}; 73808function UnforwardedToolbar({ 73809 className, 73810 label, 73811 ...props 73812}, ref) { 73813 if (!label) { 73814 external_wp_deprecated_default()('Using Toolbar without label prop', { 73815 since: '5.6', 73816 alternative: 'ToolbarGroup component', 73817 link: 'https://developer.wordpress.org/block-editor/components/toolbar/' 73818 }); 73819 // Extracting title from `props` because `ToolbarGroup` doesn't accept it. 73820 const { 73821 title: _title, 73822 ...restProps 73823 } = props; 73824 return (0,external_wp_element_namespaceObject.createElement)(toolbar_group, { 73825 isCollapsed: false, 73826 ...restProps, 73827 className: className 73828 }); 73829 } 73830 // `ToolbarGroup` already uses components-toolbar for compatibility reasons. 73831 const finalClassName = classnames_default()('components-accessible-toolbar', className); 73832 return (0,external_wp_element_namespaceObject.createElement)(ContextSystemProvider, { 73833 value: CONTEXT_SYSTEM_VALUE 73834 }, (0,external_wp_element_namespaceObject.createElement)(toolbar_container, { 73835 className: finalClassName, 73836 label: label, 73837 ref: ref, 73838 ...props 73839 })); 73840} 73841 73842/** 73843 * Renders a toolbar. 73844 * 73845 * To add controls, simply pass `ToolbarButton` components as children. 73846 * 73847 * ```jsx 73848 * import { Toolbar, ToolbarButton } from '@wordpress/components'; 73849 * import { formatBold, formatItalic, link } from '@wordpress/icons'; 73850 * 73851 * function MyToolbar() { 73852 * return ( 73853 * <Toolbar label="Options"> 73854 * <ToolbarButton icon={ formatBold } label="Bold" /> 73855 * <ToolbarButton icon={ formatItalic } label="Italic" /> 73856 * <ToolbarButton icon={ link } label="Link" /> 73857 * </Toolbar> 73858 * ); 73859 * } 73860 * ``` 73861 */ 73862const toolbar_Toolbar = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedToolbar); 73863/* harmony default export */ const toolbar = (toolbar_Toolbar); 73864 73865;// CONCATENATED MODULE: ./packages/components/build-module/toolbar/toolbar-dropdown-menu/index.js 73866 73867/** 73868 * WordPress dependencies 73869 */ 73870 73871 73872/** 73873 * External dependencies 73874 */ 73875 73876/** 73877 * Internal dependencies 73878 */ 73879 73880 73881 73882function ToolbarDropdownMenu(props, ref) { 73883 const accessibleToolbarState = (0,external_wp_element_namespaceObject.useContext)(toolbar_context); 73884 if (!accessibleToolbarState) { 73885 return (0,external_wp_element_namespaceObject.createElement)(dropdown_menu, { 73886 ...props 73887 }); 73888 } 73889 73890 // ToolbarItem will pass all props to the render prop child, which will pass 73891 // all props to the toggle of DropdownMenu. This means that ToolbarDropdownMenu 73892 // has the same API as DropdownMenu. 73893 return (0,external_wp_element_namespaceObject.createElement)(toolbar_item, { 73894 ref: ref, 73895 ...props.toggleProps 73896 }, toolbarItemProps => (0,external_wp_element_namespaceObject.createElement)(dropdown_menu, { 73897 ...props, 73898 popoverProps: { 73899 ...props.popoverProps 73900 }, 73901 toggleProps: toolbarItemProps 73902 })); 73903} 73904/* harmony default export */ const toolbar_dropdown_menu = ((0,external_wp_element_namespaceObject.forwardRef)(ToolbarDropdownMenu)); 73905 73906;// CONCATENATED MODULE: ./packages/components/build-module/tools-panel/styles.js 73907 73908function 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)."; } 73909/** 73910 * External dependencies 73911 */ 73912 73913 73914 73915/** 73916 * Internal dependencies 73917 */ 73918 73919 73920 73921 73922const toolsPanelGrid = { 73923 columns: columns =>
73923 /*#__PURE__*/emotion_react_browser_esm_css("grid-template-columns:", `repeat( ${columns}, minmax(0, 1fr) )`, ";" + ( true ? "" : 0), true ? "" : 0), 73924 spacing: /*#__PURE__*/emotion_react_browser_esm_css("column-gap:", space(2), ";row-gap:", space(4), ";" + ( true ? "" : 0), true ? "" : 0), 73925 item: { 73926 fullWidth: true ? { 73927 name: "18iuzk9", 73928 styles: "grid-column:1/-1" 73929 } : 0 73930 } 73931}; 73932const ToolsPanel = columns => /*#__PURE__*/emotion_react_browser_esm_css(toolsPanelGrid.columns(columns), " ", toolsPanelGrid.spacing, " border-top:", config_values.borderWidth, " solid ", COLORS.gray[300], ";margin-top:-1px;padding:", space(4), ";" + ( true ? "" : 0), true ? "" : 0); 73933 73934/** 73935 * Items injected into a ToolsPanel via a virtual bubbling slot will require 73936 * an inner dom element to be injected. The following rule allows for the 73937 * CSS grid display to be re-established. 73938 */ 73939 73940const ToolsPanelWithInnerWrapper = columns => { 73941 return /*#__PURE__*/emotion_react_browser_esm_css(">div:not( :first-of-type ){display:grid;", toolsPanelGrid.columns(columns), " ", toolsPanelGrid.spacing, " ", toolsPanelGrid.item.fullWidth, ";}" + ( true ? "" : 0), true ? "" : 0); 73942}; 73943const ToolsPanelHiddenInnerWrapper = true ? { 73944 name: "huufmu", 73945 styles: ">div:not( :first-of-type ){display:none;}" 73946} : 0; 73947const 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); 73948const ToolsPanelHeading = true ? { 73949 name: "1pmxm02", 73950 styles: "font-size:inherit;font-weight:500;line-height:normal;&&{margin:0;}" 73951} : 0; 73952const 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;}}" + ( true ? "" : 0), true ? "" : 0); 73953const ToolsPanelItemPlaceholder = true ? { 73954 name: "eivff4", 73955 styles: "display:none" 73956} : 0; 73957const styles_DropdownMenu = true ? { 73958 name: "16gsvie",
73959 styles: "min-width:200px" 73960} : 0; 73961const ResetLabel = emotion_styled_base_browser_esm("span", true ? { 73962 target: "ews648u0" 73963} : 0)("color:", COLORS.theme.accentDarker10, ";font-size:11px;font-weight:500;line-height:1.4;", rtl({ 73964 marginLeft: space(3) 73965}), " text-transform:uppercase;" + ( true ? "" : 0)); 73966const DefaultControlsItem = /*#__PURE__*/emotion_react_browser_esm_css("color:", COLORS.gray[900], ";&&[aria-disabled='true']{color:", COLORS.gray[700], ";opacity:1;&:hover{color:", COLORS.gray[700], ";}", ResetLabel, "{opacity:0.3;}}" + ( true ? "" : 0), true ? "" : 0); 73967 73968;// CONCATENATED MODULE: ./packages/components/build-module/tools-panel/context.js 73969/** 73970 * WordPress dependencies 73971 */ 73972 73973 73974/** 73975 * Internal dependencies 73976 */ 73977 73978const tools_panel_context_noop = () => undefined; 73979const ToolsPanelContext = (0,external_wp_element_namespaceObject.createContext)({ 73980 menuItems: { 73981 default: {}, 73982 optional: {} 73983 }, 73984 hasMenuItems: false, 73985 isResetting: false, 73986 shouldRenderPlaceholderItems: false, 73987 registerPanelItem: tools_panel_context_noop, 73988 deregisterPanelItem: tools_panel_context_noop, 73989 flagItemCustomization: tools_panel_context_noop, 73990 registerResetAllFilter: tools_panel_context_noop, 73991 deregisterResetAllFilter: tools_panel_context_noop, 73992 areAllOptionalControlsHidden: true 73993}); 73994const useToolsPanelContext = () => (0,external_wp_element_namespaceObject.useContext)(ToolsPanelContext); 73995 73996;// CONCATENATED MODULE: ./packages/components/build-module/tools-panel/tools-panel-header/hook.js 73997/** 73998 * WordPress dependencies 73999 */ 74000 74001 74002/** 74003 * Internal dependencies 74004 */ 74005 74006 74007 74008 74009function useToolsPanelHeader(props) { 74010 const { 74011 className, 74012 headingLevel = 2, 74013 ...otherProps 74014 } = useContextSystem(props, 'ToolsPanelHeader'); 74015 const cx = useCx(); 74016 const classes = (0,external_wp_element_namespaceObject.useMemo)(() => { 74017 return cx(ToolsPanelHeader, className); 74018 }, [className, cx]); 74019 const dropdownMenuClassName = (0,external_wp_element_namespaceObject.useMemo)(() => { 74020 return cx(styles_DropdownMenu); 74021 }, [cx]); 74022 const headingClassName = (0,external_wp_element_namespaceObject.useMemo)(() => { 74023 return cx(ToolsPanelHeading); 74024 }, [cx]); 74025 const defaultControlsItemClassName = (0,external_wp_element_namespaceObject.useMemo)(() => { 74026 return cx(DefaultControlsItem); 74027 }, [cx]); 74028 const { 74029 menuItems, 74030 hasMenuItems, 74031 areAllOptionalControlsHidden 74032 } = useToolsPanelContext(); 74033 return { 74034 ...otherProps, 74035 areAllOptionalControlsHidden, 74036 defaultControlsItemClassName, 74037 dropdownMenuClassName, 74038 hasMenuItems, 74039 headingClassName, 74040 headingLevel, 74041 menuItems, 74042 className: classes 74043 }; 74044} 74045 74046;// CONCATENATED MODULE: ./packages/components/build-module/tools-panel/tools-panel-header/component.js 74047 74048/** 74049 * External dependencies 74050 */ 74051 74052/** 74053 * WordPress dependencies 74054 */ 74055 74056 74057 74058 74059/** 74060 * Internal dependencies 74061 */ 74062 74063 74064 74065 74066 74067 74068 74069 74070const DefaultControlsGroup = ({ 74071 itemClassName, 74072 items, 74073 toggleItem 74074}) => { 74075 if (!items.length) { 74076 return null; 74077 } 74078 const resetSuffix = (0,external_wp_element_namespaceObject.createElement)(ResetLabel, { 74079 "aria-hidden": true 74080 }, (0,external_wp_i18n_namespaceObject.__)('Reset')); 74081 return (0,external_wp_element_namespaceObject.createElement)(menu_group, { 74082 label: (0,external_wp_i18n_namespaceObject.__)('Defaults') 74083 }, items.map(([label, hasValue]) => { 74084 if (hasValue) { 74085 return (0,external_wp_element_namespaceObject.createElement)(menu_item, { 74086 key: label, 74087 className: itemClassName, 74088 role: "menuitem", 74089 label: (0,external_wp_i18n_namespaceObject.sprintf)( 74090 // translators: %s: The name of the control being reset e.g. "Padding". 74091 (0,external_wp_i18n_namespaceObject.__)('Reset %s'), label), 74092 onClick: () => { 74093 toggleItem(label); 74094 (0,external_wp_a11y_namespaceObject.speak)((0,external_wp_i18n_namespaceObject.sprintf)( 74095 // translators: %s: The name of the control being reset e.g. "Padding". 74096 (0,external_wp_i18n_namespaceObject.__)('%s reset to default'), label), 'assertive'); 74097 }, 74098 suffix: resetSuffix 74099 }, label); 74100 } 74101 return (0,external_wp_element_namespaceObject.createElement)(menu_item, { 74102 key: label, 74103 className: itemClassName, 74104 role: "menuitemcheckbox", 74105 isSelected: true, 74106 "aria-disabled": true 74107 }, label); 74108 })); 74109}; 74110const OptionalControlsGroup = ({ 74111 items, 74112 toggleItem 74113}) => { 74114 if (!items.length) { 74115 return null; 74116 } 74117 return (0,external_wp_element_namespaceObject.createElement)(menu_group, { 74118 label: (0,external_wp_i18n_namespaceObject.__)('Tools') 74119 }, items.map(([label, isSelected]) => { 74120 const itemLabel = isSelected ? (0,external_wp_i18n_namespaceObject.sprintf)( 74121 // translators: %s: The name of the control being hidden and reset e.g. "Padding". 74122 (0,external_wp_i18n_namespaceObject.__)('Hide and reset %s'), label) : (0,external_wp_i18n_namespaceObject.sprintf)( 74123 // translators: %s: The name of the control to display e.g. "Padding". 74124 (0,external_wp_i18n_namespaceObject.__)('Show %s'), label); 74125 return (0,external_wp_element_namespaceObject.createElement)(menu_item, { 74126 key: label, 74127 icon: isSelected ? library_check : null, 74128 isSelected: isSelected, 74129 label: itemLabel, 74130 onClick: () => { 74131 if (isSelected) { 74132 (0,external_wp_a11y_namespaceObject.speak)((0,external_wp_i18n_namespaceObject.sprintf)( 74133 // translators: %s: The name of the control being reset e.g. "Padding". 74134 (0,external_wp_i18n_namespaceObject.__)('%s hidden and reset to default'), label), 'assertive'); 74135 } else { 74136 (0,external_wp_a11y_namespaceObject.speak)((0,external_wp_i18n_namespaceObject.sprintf)( 74137 // translators: %s: The name of the control being reset e.g. "Padding". 74138 (0,external_wp_i18n_namespaceObject.__)('%s is now visible'), label), 'assertive'); 74139 } 74140 toggleItem(label); 74141 }, 74142 role: "menuitemcheckbox" 74143 }, label); 74144 })); 74145}; 74146const component_ToolsPanelHeader = (props, forwardedRef) => { 74147 const { 74148 areAllOptionalControlsHidden, 74149 defaultControlsItemClassName, 74150 dropdownMenuClassName, 74151 hasMenuItems, 74152 headingClassName, 74153 headingLevel = 2, 74154 label: labelText, 74155 menuItems, 74156 resetAll, 74157 toggleItem, 74158 ...headerProps 74159 } = useToolsPanelHeader(props); 74160 if (!labelText) { 74161 return null; 74162 } 74163 const defaultItems = Object.entries(menuItems?.default || {}); 74164 const optionalItems = Object.entries(menuItems?.optional || {}); 74165 const dropDownMenuIcon = areAllOptionalControlsHidden ? library_plus : more_vertical; 74166 const dropDownMenuLabelText = (0,external_wp_i18n_namespaceObject.sprintf)( 74167 // translators: %s: The name of the tool e.g. "Color" or "Typography". 74168 (0,external_wp_i18n_namespaceObject._x)('%s options', 'Button label to reveal tool panel options'), labelText); 74169 const dropdownMenuDescriptionText = areAllOptionalControlsHidden ? (0,external_wp_i18n_namespaceObject.__)('All options are currently hidden') : undefined; 74170 const canResetAll = [...defaultItems, ...optionalItems].some(([, isSelected]) => isSelected); 74171 return (0,external_wp_element_namespaceObject.createElement)(h_stack_component, { 74172 ...headerProps, 74173 ref: forwardedRef 74174 }, (0,external_wp_element_namespaceObject.createElement)(heading_component, { 74175 level: headingLevel, 74176 className: headingClassName 74177 }, labelText), hasMenuItems && (0,external_wp_element_namespaceObject.createElement)(dropdown_menu, { 74178 icon: dropDownMenuIcon, 74179 label: dropDownMenuLabelText, 74180 menuProps: { 74181 className: dropdownMenuClassName 74182 }, 74183 toggleProps: { 74184 isSmall: true, 74185 describedBy: dropdownMenuDescriptionText 74186 } 74187 }, () => (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, (0,external_wp_element_namespaceObject.createElement)(DefaultControlsGroup, { 74188 items: defaultItems, 74189 toggleItem: toggleItem, 74190 itemClassName: defaultControlsItemClassName 74191 }), (0,external_wp_element_namespaceObject.createElement)(OptionalControlsGroup, { 74192 items: optionalItems, 74193 toggleItem: toggleItem 74194 }), (0,external_wp_element_namespaceObject.createElement)(menu_group, null, (0,external_wp_element_namespaceObject.createElement)(menu_item, { 74195 "aria-disabled": !canResetAll
74196 // @ts-expect-error - TODO: If this "tertiary" style is something we really want to allow on MenuItem, 74197 // we should rename it and explicitly allow it as an official API. All the other Button variants 74198 // don't make sense in a MenuItem context, and should be disallowed. 74199 , 74200 variant: 'tertiary', 74201 onClick: () => { 74202 if (canResetAll) { 74203 resetAll(); 74204 (0,external_wp_a11y_namespaceObject.speak)((0,external_wp_i18n_namespaceObject.__)('All options reset'), 'assertive'); 74205 } 74206 } 74207 }, (0,external_wp_i18n_namespaceObject.__)('Reset all')))))); 74208}; 74209const ConnectedToolsPanelHeader = contextConnect(component_ToolsPanelHeader, 'ToolsPanelHeader'); 74210/* harmony default export */ const tools_panel_header_component = (ConnectedToolsPanelHeader); 74211 74212;// CONCATENATED MODULE: ./packages/components/build-module/tools-panel/tools-panel/hook.js 74213/** 74214 * WordPress dependencies 74215 */ 74216 74217 74218/** 74219 * Internal dependencies 74220 */ 74221 74222 74223 74224const DEFAULT_COLUMNS = 2; 74225const generateMenuItems = ({ 74226 panelItems, 74227 shouldReset, 74228 currentMenuItems, 74229 menuItemOrder 74230}) => { 74231 const newMenuItems = { 74232 default: {}, 74233 optional: {} 74234 }; 74235 const menuItems = { 74236 default: {}, 74237 optional: {} 74238 }; 74239 panelItems.forEach(({ 74240 hasValue, 74241 isShownByDefault, 74242 label 74243 }) => { 74244 const group = isShownByDefault ? 'default' : 'optional'; 74245 74246 // If a menu item for this label has already been flagged as customized 74247 // (for default controls), or toggled on (for optional controls), do not 74248 // overwrite its value as those controls would lose that state. 74249 const existingItemValue = currentMenuItems?.[group]?.[label]; 74250 const value = existingItemValue ? existingItemValue : hasValue(); 74251 newMenuItems[group][label] = shouldReset ? false : value; 74252 }); 74253 74254 // Loop the known, previously registered items first to maintain menu order. 74255 menuItemOrder.forEach(key => { 74256 if (newMenuItems.default.hasOwnProperty(key)) { 74257 menuItems.default[key] = newMenuItems.default[key]; 74258 } 74259 if (newMenuItems.optional.hasOwnProperty(key)) { 74260 menuItems.optional[key] = newMenuItems.optional[key]; 74261 } 74262 }); 74263 74264 // Loop newMenuItems object adding any that aren't in the known items order. 74265 Object.keys(newMenuItems.default).forEach(key => { 74266 if (!menuItems.default.hasOwnProperty(key)) { 74267 menuItems.default[key] = newMenuItems.default[key]; 74268 } 74269 }); 74270 Object.keys(newMenuItems.optional).forEach(key => { 74271 if (!menuItems.optional.hasOwnProperty(key)) { 74272 menuItems.optional[key] = newMenuItems.optional[key]; 74273 } 74274 }); 74275 return menuItems; 74276}; 74277const isMenuItemTypeEmpty = obj => obj && Object.keys(obj).length === 0; 74278function useToolsPanel(props) { 74279 const { 74280 className, 74281 headingLevel = 2, 74282 resetAll, 74283 panelId, 74284 hasInnerWrapper = false, 74285 shouldRenderPlaceholderItems = false, 74286 __experimentalFirstVisibleItemClass, 74287 __experimentalLastVisibleItemClass, 74288 ...otherProps 74289 } = useContextSystem(props, 'ToolsPanel'); 74290 const isResetting = (0,external_wp_element_namespaceObject.useRef)(false); 74291 const wasResetting = isResetting.current; 74292 74293 // `isResetting` is cleared via this hook to effectively batch together 74294 // the resetAll task. Without this, the flag is cleared after the first 74295 // control updates and forces a rerender with subsequent controls then 74296 // believing they need to reset, unfortunately using stale data. 74297 (0,external_wp_element_namespaceObject.useEffect)(() => { 74298 if (wasResetting) { 74299 isResetting.current = false; 74300 } 74301 }, [wasResetting]); 74302 74303 // Allow panel items to register themselves. 74304 const [panelItems, setPanelItems] = (0,external_wp_element_namespaceObject.useState)([]); 74305 const [menuItemOrder, setMenuItemOrder] = (0,external_wp_element_namespaceObject.useState)([]); 74306 const [resetAllFilters, setResetAllFilters] = (0,external_wp_element_namespaceObject.useState)([]); 74307 const registerPanelItem = (0,external_wp_element_namespaceObject.useCallback)(item => { 74308 // Add item to panel items. 74309 setPanelItems(items => { 74310 const newItems = [...items]; 74311 // If an item with this label has already been registered, remove it 74312 // first. This can happen when an item is moved between the default 74313 // and optional groups. 74314 const existingIndex = newItems.findIndex(oldItem => oldItem.label === item.label); 74315 if (existingIndex !== -1) { 74316 newItems.splice(existingIndex, 1); 74317 } 74318 return [...newItems, item]; 74319 }); 74320 74321 // Track the initial order of item registration. This is used for 74322 // maintaining menu item order later. 74323 setMenuItemOrder(items => { 74324 if (items.includes(item.label)) { 74325 return items; 74326 } 74327 return [...items, item.label]; 74328 }); 74329 }, [setPanelItems, setMenuItemOrder]); 74330 74331 // Panels need to deregister on unmount to avoid orphans in menu state. 74332 // This is an issue when panel items are being injected via SlotFills. 74333 const deregisterPanelItem = (0,external_wp_element_namespaceObject.useCallback)(label => { 74334 // When switching selections between components injecting matching 74335 // controls, e.g. both panels have a "padding" control, the 74336 // deregistration of the first panel doesn't occur until after the 74337 // registration of the next. 74338 setPanelItems(items => { 74339 const newItems = [...items]; 74340 const index = newItems.findIndex(item => item.label === label); 74341 if (index !== -1) { 74342 newItems.splice(index, 1); 74343 } 74344 return newItems; 74345 }); 74346 }, [setPanelItems]); 74347 const registerResetAllFilter = (0,external_wp_element_namespaceObject.useCallback)(newFilter => { 74348 setResetAllFilters(filters => { 74349 return [...filters, newFilter]; 74350 }); 74351 }, [setResetAllFilters]); 74352 const deregisterResetAllFilter = (0,external_wp_element_namespaceObject.useCallback)(filterToRemove => { 74353 setResetAllFilters(filters => { 74354 return filters.filter(filter => filter !== filterToRemove); 74355 }); 74356 }, [setResetAllFilters]); 74357 74358 // Manage and share display state of menu items representing child controls. 74359 const [menuItems, setMenuItems] = (0,external_wp_element_namespaceObject.useState)({ 74360 default: {}, 74361 optional: {} 74362 }); 74363 74364 // Setup menuItems state as panel items register themselves. 74365 (0,external_wp_element_namespaceObject.useEffect)(() => { 74366 setMenuItems(prevState => { 74367 const items = generateMenuItems({ 74368 panelItems, 74369 shouldReset: false, 74370 currentMenuItems: prevState, 74371 menuItemOrder 74372 }); 74373 return items; 74374 }); 74375 }, [panelItems, setMenuItems, menuItemOrder]); 74376 74377 // Force a menu item to be checked. 74378 // This is intended for use with default panel items. They are displayed 74379 // separately to optional items and have different display states, 74380 // we need to update that when their value is customized. 74381 const flagItemCustomization = (0,external_wp_element_namespaceObject.useCallback)((label, group = 'default') => { 74382 setMenuItems(items => { 74383 const newState = { 74384 ...items, 74385 [group]: { 74386 ...items[group], 74387 [label]: true 74388 } 74389 }; 74390 return newState; 74391 }); 74392 }, [setMenuItems]); 74393 74394 // Whether all optional menu items are hidden or not must be tracked 74395 // in order to later determine if the panel display is empty and handle 74396 // conditional display of a plus icon to indicate the presence of further 74397 // menu items. 74398 const [areAllOptionalControlsHidden, setAreAllOptionalControlsHidden] = (0,external_wp_element_namespaceObject.useState)(false); 74399 (0,external_wp_element_namespaceObject.useEffect)(() => { 74400 if (isMenuItemTypeEmpty(menuItems?.default) && !isMenuItemTypeEmpty(menuItems?.optional)) { 74401 const allControlsHidden = !Object.entries(menuItems.optional).some(([, isSelected]) => isSelected); 74402 setAreAllOptionalControlsHidden(allControlsHidden); 74403 } 74404 }, [menuItems, setAreAllOptionalControlsHidden]); 74405 const cx = useCx(); 74406 const classes = (0,external_wp_element_namespaceObject.useMemo)(() => { 74407 const wrapperStyle = hasInnerWrapper && ToolsPanelWithInnerWrapper(DEFAULT_COLUMNS); 74408 const emptyStyle = isMenuItemTypeEmpty(menuItems?.default) && areAllOptionalControlsHidden && ToolsPanelHiddenInnerWrapper;
74409 return cx(ToolsPanel(DEFAULT_COLUMNS), wrapperStyle, emptyStyle, className); 74410 }, [areAllOptionalControlsHidden, className, cx, hasInnerWrapper, menuItems]); 74411 74412 // Toggle the checked state of a menu item which is then used to determine 74413 // display of the item within the panel. 74414 const toggleItem = (0,external_wp_element_namespaceObject.useCallback)(label => { 74415 const currentItem = panelItems.find(item => item.label === label); 74416 if (!currentItem) { 74417 return; 74418 } 74419 const menuGroup = currentItem.isShownByDefault ? 'default' : 'optional'; 74420 const newMenuItems = { 74421 ...menuItems, 74422 [menuGroup]: { 74423 ...menuItems[menuGroup], 74424 [label]: !menuItems[menuGroup][label] 74425 } 74426 }; 74427 setMenuItems(newMenuItems); 74428 }, [menuItems, panelItems, setMenuItems]); 74429 74430 // Resets display of children and executes resetAll callback if available. 74431 const resetAllItems = (0,external_wp_element_namespaceObject.useCallback)(() => { 74432 if (typeof resetAll === 'function') { 74433 isResetting.current = true; 74434 resetAll(resetAllFilters); 74435 } 74436 74437 // Turn off display of all non-default items. 74438 const resetMenuItems = generateMenuItems({ 74439 panelItems, 74440 menuItemOrder, 74441 shouldReset: true 74442 }); 74443 setMenuItems(resetMenuItems); 74444 }, [panelItems, resetAllFilters, resetAll, setMenuItems, menuItemOrder]); 74445 74446 // Assist ItemGroup styling when there are potentially hidden placeholder 74447 // items by identifying first & last items that are toggled on for display. 74448 const getFirstVisibleItemLabel = items => { 74449 const optionalItems = menuItems.optional || {}; 74450 const firstItem = items.find(item => item.isShownByDefault || !!optionalItems[item.label]); 74451 return firstItem?.label; 74452 }; 74453 const firstDisplayedItem = getFirstVisibleItemLabel(panelItems); 74454 const lastDisplayedItem = getFirstVisibleItemLabel([...panelItems].reverse()); 74455 const panelContext = (0,external_wp_element_namespaceObject.useMemo)(() => ({ 74456 areAllOptionalControlsHidden, 74457 deregisterPanelItem, 74458 deregisterResetAllFilter, 74459 firstDisplayedItem, 74460 flagItemCustomization, 74461 hasMenuItems: !!panelItems.length, 74462 isResetting: isResetting.current, 74463 lastDisplayedItem, 74464 menuItems, 74465 panelId, 74466 registerPanelItem, 74467 registerResetAllFilter, 74468 shouldRenderPlaceholderItems, 74469 __experimentalFirstVisibleItemClass, 74470 __experimentalLastVisibleItemClass 74471 }), [areAllOptionalControlsHidden, deregisterPanelItem, deregisterResetAllFilter, firstDisplayedItem, flagItemCustomization, lastDisplayedItem, menuItems, panelId, panelItems, registerResetAllFilter, registerPanelItem, shouldRenderPlaceholderItems, __experimentalFirstVisibleItemClass, __experimentalLastVisibleItemClass]); 74472 return { 74473 ...otherProps, 74474 headingLevel, 74475 panelContext, 74476 resetAllItems, 74477 toggleItem, 74478 className: classes 74479 }; 74480} 74481 74482;// CONCATENATED MODULE: ./packages/components/build-module/tools-panel/tools-panel/component.js 74483 74484/** 74485 * External dependencies 74486 */ 74487 74488/** 74489 * Internal dependencies 74490 */ 74491 74492 74493 74494 74495 74496const UnconnectedToolsPanel = (props, forwardedRef) => { 74497 const { 74498 children, 74499 label, 74500 panelContext, 74501 resetAllItems, 74502 toggleItem, 74503 headingLevel, 74504 ...toolsPanelProps 74505 } = useToolsPanel(props); 74506 return (0,external_wp_element_namespaceObject.createElement)(grid_component, { 74507 ...toolsPanelProps, 74508 columns: 2, 74509 ref: forwardedRef 74510 }, (0,external_wp_element_namespaceObject.createElement)(ToolsPanelContext.Provider, { 74511 value: panelContext 74512 }, (0,external_wp_element_namespaceObject.createElement)(tools_panel_header_component, { 74513 label: label, 74514 resetAll: resetAllItems, 74515 toggleItem: toggleItem, 74516 headingLevel: headingLevel 74517 }), children)); 74518}; 74519 74520/** 74521 * The `ToolsPanel` is a container component that displays its children preceded 74522 * by a header. The header includes a dropdown menu which is automatically 74523 * generated from the panel's inner `ToolsPanelItems`. 74524 * 74525 * ```jsx 74526 * import { __ } from '@wordpress/i18n'; 74527 * import { 74528 * __experimentalToolsPanel as ToolsPanel, 74529 * __experimentalToolsPanelItem as ToolsPanelItem, 74530 * __experimentalUnitControl as UnitControl 74531 * } from '@wordpress/components'; 74532 * 74533 * function Example() {
74534 * const [ height, setHeight ] = useState(); 74535 * const [ width, setWidth ] = useState(); 74536 * 74537 * const resetAll = () => { 74538 * setHeight(); 74539 * setWidth(); 74540 * } 74541 * 74542 * return ( 74543 * <ToolsPanel label={ __( 'Dimensions' ) } resetAll={ resetAll }> 74544 * <ToolsPanelItem 74545 * hasValue={ () => !! height } 74546 * label={ __( 'Height' ) } 74547 * onDeselect={ () => setHeight() } 74548 * > 74549 * <UnitControl 74550 * label={ __( 'Height' ) } 74551 * onChange={ setHeight } 74552 * value={ height } 74553 * /> 74554 * </ToolsPanelItem> 74555 * <ToolsPanelItem 74556 * hasValue={ () => !! width } 74557 * label={ __( 'Width' ) } 74558 * onDeselect={ () => setWidth() } 74559 * > 74560 * <UnitControl 74561 * label={ __( 'Width' ) } 74562 * onChange={ setWidth } 74563 * value={ width } 74564 * /> 74565 * </ToolsPanelItem> 74566 * </ToolsPanel> 74567 * ); 74568 * } 74569 * ``` 74570 */ 74571const component_ToolsPanel = contextConnect(UnconnectedToolsPanel, 'ToolsPanel'); 74572/* harmony default export */ const tools_panel_component = (component_ToolsPanel); 74573 74574;// CONCATENATED MODULE: ./packages/components/build-module/tools-panel/tools-panel-item/hook.js 74575/** 74576 * WordPress dependencies 74577 */ 74578 74579 74580 74581/** 74582 * Internal dependencies 74583 */ 74584 74585 74586 74587 74588const hook_noop = () => {}; 74589function useToolsPanelItem(props) { 74590 const { 74591 className, 74592 hasValue, 74593 isShownByDefault = false, 74594 label, 74595 panelId, 74596 resetAllFilter = hook_noop, 74597 onDeselect, 74598 onSelect, 74599 ...otherProps 74600 } = useContextSystem(props, 'ToolsPanelItem'); 74601 const { 74602 panelId: currentPanelId, 74603 menuItems, 74604 registerResetAllFilter, 74605 deregisterResetAllFilter, 74606 registerPanelItem, 74607 deregisterPanelItem, 74608 flagItemCustomization, 74609 isResetting, 74610 shouldRenderPlaceholderItems: shouldRenderPlaceholder, 74611 firstDisplayedItem, 74612 lastDisplayedItem, 74613 __experimentalFirstVisibleItemClass, 74614 __experimentalLastVisibleItemClass 74615 } = useToolsPanelContext(); 74616 const hasValueCallback = (0,external_wp_element_namespaceObject.useCallback)(hasValue, [panelId, hasValue]); 74617 const resetAllFilterCallback = (0,external_wp_element_namespaceObject.useCallback)(resetAllFilter, [panelId, resetAllFilter]); 74618 const previousPanelId = (0,external_wp_compose_namespaceObject.usePrevious)(currentPanelId); 74619 const hasMatchingPanel = currentPanelId === panelId || currentPanelId === null; 74620 74621 // Registering the panel item allows the panel to include it in its 74622 // automatically generated menu and determine its initial checked status. 74623 (0,external_wp_element_namespaceObject.useEffect)(() => { 74624 if (hasMatchingPanel && previousPanelId !== null) { 74625 registerPanelItem({ 74626 hasValue: hasValueCallback, 74627 isShownByDefault, 74628 label, 74629 panelId 74630 }); 74631 } 74632 return () => { 74633 if (previousPanelId === null && !!currentPanelId || currentPanelId === panelId) { 74634 deregisterPanelItem(label); 74635 } 74636 }; 74637 }, [currentPanelId, hasMatchingPanel, isShownByDefault, label, hasValueCallback, panelId, previousPanelId, registerPanelItem, deregisterPanelItem]); 74638 (0,external_wp_element_namespaceObject.useEffect)(() => { 74639 if (hasMatchingPanel) { 74640 registerResetAllFilter(resetAllFilterCallback); 74641 } 74642 return () => { 74643 if (hasMatchingPanel) { 74644 deregisterResetAllFilter(resetAllFilterCallback); 74645 } 74646 }; 74647 }, [registerResetAllFilter, deregisterResetAllFilter, resetAllFilterCallback, hasMatchingPanel]); 74648 74649 // Note: `label` is used as a key when building menu item state in 74650 // `ToolsPanel`. 74651 const menuGroup = isShownByDefault ? 'default' : 'optional'; 74652 const isMenuItemChecked = menuItems?.[menuGroup]?.[label]; 74653 const wasMenuItemChecked = (0,external_wp_compose_namespaceObject.usePrevious)(isMenuItemChecked); 74654 const isRegistered = menuItems?.[menuGroup]?.[label] !== undefined; 74655 const isValueSet = hasValue(); 74656 const wasValueSet = (0,external_wp_compose_namespaceObject.usePrevious)(isValueSet); 74657 const newValueSet = isValueSet && !wasValueSet; 74658 74659 // Notify the panel when an item's value has been set. 74660 // 74661 // 1. For default controls, this is so "reset" appears beside its menu item. 74662 // 2. For optional controls, when the panel ID is `null`, it allows the 74663 // panel to ensure the item is toggled on for display in the menu, given the 74664 // value has been set external to the control. 74665 (0,external_wp_element_namespaceObject.useEffect)(() => { 74666 if (!newValueSet) { 74667 return; 74668 } 74669 if (isShownByDefault || currentPanelId === null) { 74670 flagItemCustomization(label, menuGroup); 74671 } 74672 }, [currentPanelId, newValueSet, isShownByDefault, menuGroup, label, flagItemCustomization]); 74673 74674 // Determine if the panel item's corresponding menu is being toggled and 74675 // trigger appropriate callback if it is. 74676 (0,external_wp_element_namespaceObject.useEffect)(() => { 74677 // We check whether this item is currently registered as items rendered 74678 // via fills can persist through the parent panel being remounted. 74679 // See: https://github.com/WordPress/gutenberg/pull/45673 74680 if (!isRegistered || isResetting || !hasMatchingPanel) { 74681 return; 74682 } 74683 if (isMenuItemChecked && !isValueSet && !wasMenuItemChecked) { 74684 onSelect?.(); 74685 } 74686 if (!isMenuItemChecked && wasMenuItemChecked) { 74687 onDeselect?.(); 74688 } 74689 }, [hasMatchingPanel, isMenuItemChecked, isRegistered, isResetting, isValueSet, wasMenuItemChecked, onSelect, onDeselect]); 74690 74691 // The item is shown if it is a default control regardless of whether it 74692 // has a value. Optional items are shown when they are checked or have 74693 // a value. 74694 const isShown = isShownByDefault ? menuItems?.[menuGroup]?.[label] !== undefined : isMenuItemChecked; 74695 const cx = useCx(); 74696 const classes = (0,external_wp_element_namespaceObject.useMemo)(() => { 74697 const placeholderStyle = shouldRenderPlaceholder && !isShown && ToolsPanelItemPlaceholder; 74698 const firstItemStyle = firstDisplayedItem === label && __experimentalFirstVisibleItemClass; 74699 const lastItemStyle = lastDisplayedItem === label && __experimentalLastVisibleItemClass; 74700 return cx(ToolsPanelItem, placeholderStyle, className, firstItemStyle, lastItemStyle); 74701 }, [isShown, shouldRenderPlaceholder, className, cx, firstDisplayedItem, lastDisplayedItem, __experimentalFirstVisibleItemClass, __experimentalLastVisibleItemClass, label]); 74702 return { 74703 ...otherProps, 74704 isShown, 74705 shouldRenderPlaceholder, 74706 className: classes 74707 }; 74708} 74709 74710;// CONCATENATED MODULE: ./packages/components/build-module/tools-panel/tools-panel-item/component.js 74711 74712/** 74713 * External dependencies 74714 */ 74715
74716/** 74717 * Internal dependencies 74718 */ 74719 74720 74721 74722// This wraps controls to be conditionally displayed within a tools panel. It 74723// prevents props being applied to HTML elements that would make them invalid. 74724const UnconnectedToolsPanelItem = (props, forwardedRef) => { 74725 const { 74726 children, 74727 isShown, 74728 shouldRenderPlaceholder, 74729 ...toolsPanelItemProps 74730 } = useToolsPanelItem(props); 74731 if (!isShown) { 74732 return shouldRenderPlaceholder ? (0,external_wp_element_namespaceObject.createElement)(component, { 74733 ...toolsPanelItemProps, 74734 ref: forwardedRef 74735 }) : null; 74736 } 74737 return (0,external_wp_element_namespaceObject.createElement)(component, { 74738 ...toolsPanelItemProps, 74739 ref: forwardedRef 74740 }, children); 74741}; 74742const component_ToolsPanelItem = contextConnect(UnconnectedToolsPanelItem, 'ToolsPanelItem'); 74743/* harmony default export */ const tools_panel_item_component = (component_ToolsPanelItem); 74744 74745;// CONCATENATED MODULE: ./packages/components/build-module/tree-grid/roving-tab-index-context.js 74746/** 74747 * WordPress dependencies 74748 */ 74749 74750const RovingTabIndexContext = (0,external_wp_element_namespaceObject.createContext)(undefined); 74751const useRovingTabIndexContext = () => (0,external_wp_element_namespaceObject.useContext)(RovingTabIndexContext); 74752const RovingTabIndexProvider = RovingTabIndexContext.Provider; 74753 74754;// CONCATENATED MODULE: ./packages/components/build-module/tree-grid/roving-tab-index.js 74755 74756/** 74757 * WordPress dependencies 74758 */ 74759 74760 74761/** 74762 * Internal dependencies 74763 */ 74764 74765 74766/** 74767 * Provider for adding roving tab index behaviors to tree grid structures. 74768 * 74769 * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/components/src/tree-grid/README.md 74770 */ 74771function RovingTabIndex({ 74772 children 74773}) { 74774 const [lastFocusedElement, setLastFocusedElement] = (0,external_wp_element_namespaceObject.useState)(); 74775 74776 // Use `useMemo` to avoid creation of a new object for the providerValue 74777 // on every render. Only create a new object when the `lastFocusedElement` 74778 // value changes. 74779 const providerValue = (0,external_wp_element_namespaceObject.useMemo)(() => ({ 74780 lastFocusedElement, 74781 setLastFocusedElement 74782 }), [lastFocusedElement]); 74783 return (0,external_wp_element_namespaceObject.createElement)(RovingTabIndexProvider, { 74784 value: providerValue 74785 }, children); 74786} 74787 74788;// CONCATENATED MODULE: ./packages/components/build-module/tree-grid/index.js 74789 74790/** 74791 * WordPress dependencies 74792 */ 74793 74794 74795 74796 74797/** 74798 * Internal dependencies 74799 */ 74800 74801/** 74802 * Return focusables in a row element, excluding those from other branches 74803 * nested within the row. 74804 * 74805 * @param rowElement The DOM element representing the row. 74806 * 74807 * @return The array of focusables in the row. 74808 */ 74809function getRowFocusables(rowElement) { 74810 const focusablesInRow = external_wp_dom_namespaceObject.focus.focusable.find(rowElement, { 74811 sequential: true 74812 }); 74813 return focusablesInRow.filter(focusable => { 74814 return focusable.closest('[role="row"]') === rowElement; 74815 }); 74816} 74817 74818/** 74819 * Renders both a table and tbody element, used to create a tree hierarchy. 74820 * 74821 */ 74822function UnforwardedTreeGrid({ 74823 children, 74824 onExpandRow = () => {}, 74825 onCollapseRow = () => {}, 74826 onFocusRow = () => {}, 74827 applicationAriaLabel, 74828 ...props 74829}, /** A ref to the underlying DOM table element. */ 74830ref) { 74831 const onKeyDown = (0,external_wp_element_namespaceObject.useCallback)(event => { 74832 const { 74833 keyCode, 74834 metaKey, 74835 ctrlKey, 74836 altKey 74837 } = event; 74838 74839 // The shift key is intentionally absent from the following list, 74840 // to enable shift + up/down to select items from the list. 74841 const hasModifierKeyPressed = metaKey || ctrlKey || altKey; 74842 if (hasModifierKeyPressed || ![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].includes(keyCode)) { 74843 return; 74844 } 74845 74846 // The event will be handled, stop propagation. 74847 event.stopPropagation(); 74848 const { 74849 activeElement 74850 } = document; 74851 const { 74852 currentTarget: treeGridElement 74853 } = event; 74854 if (!activeElement || !treeGridElement.contains(activeElement)) { 74855 return; 74856 } 74857 74858 // Calculate the columnIndex of the active element. 74859 const activeRow = activeElement.closest('[role="row"]'); 74860 if (!activeRow) { 74861 return; 74862 } 74863 const focusablesInRow = getRowFocusables(activeRow); 74864 const currentColumnIndex = focusablesInRow.indexOf(activeElement); 74865 const canExpandCollapse = 0 === currentColumnIndex; 74866 const cannotFocusNextColumn = canExpandCollapse && (activeRow.getAttribute('data-expanded') === 'false' || activeRow.getAttribute('aria-expanded') === 'false') && keyCode === external_wp_keycodes_namespaceObject.RIGHT;
74867 if ([external_wp_keycodes_namespaceObject.LEFT, external_wp_keycodes_namespaceObject.RIGHT].includes(keyCode)) { 74868 // Calculate to the next element. 74869 let nextIndex; 74870 if (keyCode === external_wp_keycodes_namespaceObject.LEFT) { 74871 nextIndex = Math.max(0, currentColumnIndex - 1); 74872 } else { 74873 nextIndex = Math.min(currentColumnIndex + 1, focusablesInRow.length - 1); 74874 } 74875 74876 // Focus is at the left most column. 74877 if (canExpandCollapse) { 74878 if (keyCode === external_wp_keycodes_namespaceObject.LEFT) { 74879 var _activeRow$getAttribu; 74880 // Left: 74881 // If a row is focused, and it is expanded, collapses the current row. 74882 if (activeRow.getAttribute('data-expanded') === 'true' || activeRow.getAttribute('aria-expanded') === 'true') { 74883 onCollapseRow(activeRow); 74884 event.preventDefault(); 74885 return; 74886 } 74887 // If a row is focused, and it is collapsed, moves to the parent row (if there is one). 74888 const level = Math.max(parseInt((_activeRow$getAttribu = activeRow?.getAttribute('aria-level')) !== null && _activeRow$getAttribu !== void 0 ? _activeRow$getAttribu : '1', 10) - 1, 1); 74889 const rows = Array.from(treeGridElement.querySelectorAll('[role="row"]')); 74890 let parentRow = activeRow; 74891 const currentRowIndex = rows.indexOf(activeRow); 74892 for (let i = currentRowIndex; i >= 0; i--) { 74893 const ariaLevel = rows[i].getAttribute('aria-level'); 74894 if (ariaLevel !== null && parseInt(ariaLevel, 10) === level) { 74895 parentRow = rows[i]; 74896 break; 74897 } 74898 } 74899 getRowFocusables(parentRow)?.[0]?.focus(); 74900 } 74901 if (keyCode === external_wp_keycodes_namespaceObject.RIGHT) { 74902 // Right: 74903 // If a row is focused, and it is collapsed, expands the current row. 74904 if (activeRow.getAttribute('data-expanded') === 'false' || activeRow.getAttribute('aria-expanded') === 'false') { 74905 onExpandRow(activeRow); 74906 event.preventDefault(); 74907 return; 74908 } 74909 // If a row is focused, and it is expanded, focuses the next cell in the row. 74910 const focusableItems = getRowFocusables(activeRow); 74911 if (focusableItems.length > 0) { 74912 focusableItems[nextIndex]?.focus(); 74913 } 74914 } 74915 // Prevent key use for anything else. For example, Voiceover 74916 // will start reading text on continued use of left/right arrow 74917 // keys. 74918 event.preventDefault(); 74919 return; 74920 } 74921 74922 // 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. 74923 if (cannotFocusNextColumn) { 74924 return; 74925 } 74926 focusablesInRow[nextIndex].focus(); 74927 74928 // Prevent key use for anything else. This ensures Voiceover 74929 // doesn't try to handle key navigation. 74930 event.preventDefault(); 74931 } else if ([external_wp_keycodes_namespaceObject.UP, external_wp_keycodes_namespaceObject.DOWN].includes(keyCode)) { 74932 // Calculate the rowIndex of the next row. 74933 const rows = Array.from(treeGridElement.querySelectorAll('[role="row"]')); 74934 const currentRowIndex = rows.indexOf(activeRow); 74935 let nextRowIndex; 74936 if (keyCode === external_wp_keycodes_namespaceObject.UP) { 74937 nextRowIndex = Math.max(0, currentRowIndex - 1); 74938 } else { 74939 nextRowIndex = Math.min(currentRowIndex + 1, rows.length - 1); 74940 } 74941 74942 // Focus is either at the top or bottom edge of the grid. Do nothing. 74943 if (nextRowIndex === currentRowIndex) { 74944 // Prevent key use for anything else. For example, Voiceover 74945 // will start navigating horizontally when reaching the vertical 74946 // bounds of a table. 74947 event.preventDefault(); 74948 return; 74949 } 74950 74951 // Get the focusables in the next row. 74952 const focusablesInNextRow = getRowFocusables(rows[nextRowIndex]); 74953 74954 // If for some reason there are no focusables in the next row, do nothing. 74955 if (!focusablesInNextRow || !focusablesInNextRow.length) { 74956 // Prevent key use for anything else. For example, Voiceover 74957 // will still focus text when using arrow keys, while this 74958 // component should limit navigation to focusables. 74959 event.preventDefault(); 74960 return; 74961 } 74962 74963 // Try to focus the element in the next row that's at a similar column to the activeElement. 74964 const nextIndex = Math.min(currentColumnIndex, focusablesInNextRow.length - 1); 74965 focusablesInNextRow[nextIndex].focus(); 74966 74967 // Let consumers know the row that was originally focused, 74968 // and the row that is now in focus. 74969 onFocusRow(event, activeRow, rows[nextRowIndex]); 74970 74971 // Prevent key use for anything else. This ensures Voiceover 74972 // doesn't try to handle key navigation. 74973 event.preventDefault(); 74974 } else if ([external_wp_keycodes_namespaceObject.HOME, external_wp_keycodes_namespaceObject.END].includes(keyCode)) { 74975 // Calculate the rowIndex of the next row. 74976 const rows = Array.from(treeGridElement.querySelectorAll('[role="row"]')); 74977 const currentRowIndex = rows.indexOf(activeRow); 74978 let nextRowIndex; 74979 if (keyCode === external_wp_keycodes_namespaceObject.HOME) { 74980 nextRowIndex = 0; 74981 } else { 74982 nextRowIndex = rows.length - 1; 74983 } 74984 74985 // Focus is either at the top or bottom edge of the grid. Do nothing. 74986 if (nextRowIndex === currentRowIndex) { 74987 // Prevent key use for anything else. For example, Voiceover 74988 // will start navigating horizontally when reaching the vertical 74989 // bounds of a table. 74990 event.preventDefault(); 74991 return; 74992 } 74993 74994 // Get the focusables in the next row. 74995 const focusablesInNextRow = getRowFocusables(rows[nextRowIndex]); 74996
74997 // If for some reason there are no focusables in the next row, do nothing. 74998 if (!focusablesInNextRow || !focusablesInNextRow.length) { 74999 // Prevent key use for anything else. For example, Voiceover 75000 // will still focus text when using arrow keys, while this 75001 // component should limit navigation to focusables. 75002 event.preventDefault(); 75003 return; 75004 } 75005 75006 // Try to focus the element in the next row that's at a similar column to the activeElement. 75007 const nextIndex = Math.min(currentColumnIndex, focusablesInNextRow.length - 1); 75008 focusablesInNextRow[nextIndex].focus(); 75009 75010 // Let consumers know the row that was originally focused, 75011 // and the row that is now in focus. 75012 onFocusRow(event, activeRow, rows[nextRowIndex]); 75013 75014 // Prevent key use for anything else. This ensures Voiceover 75015 // doesn't try to handle key navigation. 75016 event.preventDefault(); 75017 } 75018 }, [onExpandRow, onCollapseRow, onFocusRow]); 75019 75020 /* Disable reason: A treegrid is implemented using a table element. */ 75021 /* eslint-disable jsx-a11y/no-noninteractive-element-to-interactive-role */ 75022 return (0,external_wp_element_namespaceObject.createElement)(RovingTabIndex, null, (0,external_wp_element_namespaceObject.createElement)("div", { 75023 role: "application", 75024 "aria-label": applicationAriaLabel 75025 }, (0,external_wp_element_namespaceObject.createElement)("table", { 75026 ...props, 75027 role: "treegrid", 75028 onKeyDown: onKeyDown, 75029 ref: ref 75030 }, (0,external_wp_element_namespaceObject.createElement)("tbody", null, children)))); 75031 /* eslint-enable jsx-a11y/no-noninteractive-element-to-interactive-role */ 75032} 75033 75034/** 75035 * `TreeGrid` is used to create a tree hierarchy. 75036 * It is not a visually styled component, but instead helps with adding 75037 * keyboard navigation and roving tab index behaviors to tree grid structures. 75038 * 75039 * A tree grid is a hierarchical 2 dimensional UI component, for example it could be 75040 * used to implement a file system browser. 75041 * 75042 * A tree grid allows the user to navigate using arrow keys. 75043 * Up/down to navigate vertically across rows, and left/right to navigate horizontally 75044 * between focusables in a row. 75045 * 75046 * The `TreeGrid` renders both a `table` and `tbody` element, and is intended to be used 75047 * with `TreeGridRow` (`tr`) and `TreeGridCell` (`td`) to build out a grid. 75048 * 75049 * ```jsx 75050 * function TreeMenu() { 75051 * return ( 75052 * <TreeGrid> 75053 * <TreeGridRow level={ 1 } positionInSet={ 1 } setSize={ 2 }> 75054 * <TreeGridCell> 75055 * { ( props ) => ( 75056 * <Button onClick={ onSelect } { ...props }>Select</Button> 75057 * ) } 75058 * </TreeGridCell> 75059 * <TreeGridCell> 75060 * { ( props ) => ( 75061 * <Button onClick={ onMove } { ...props }>Move</Button> 75062 * ) } 75063 * </TreeGridCell> 75064 * </TreeGridRow> 75065 * <TreeGridRow level={ 1 } positionInSet={ 2 } setSize={ 2 }> 75066 * <TreeGridCell> 75067 * { ( props ) => ( 75068 * <Button onClick={ onSelect } { ...props }>Select</Button> 75069 * ) } 75070 * </TreeGridCell> 75071 * <TreeGridCell> 75072 * { ( props ) => ( 75073 * <Button onClick={ onMove } { ...props }>Move</Button> 75074 * ) } 75075 * </TreeGridCell> 75076 * </TreeGridRow> 75077 * <TreeGridRow level={ 2 } positionInSet={ 1 } setSize={ 1 }> 75078 * <TreeGridCell> 75079 * { ( props ) => ( 75080 * <Button onClick={ onSelect } { ...props }>Select</Button> 75081 * ) } 75082 * </TreeGridCell> 75083 * <TreeGridCell> 75084 * { ( props ) => ( 75085 * <Button onClick={ onMove } { ...props }>Move</Button> 75086 * ) } 75087 * </TreeGridCell> 75088 * </TreeGridRow> 75089 * </TreeGrid> 75090 * ); 75091 * } 75092 * ``` 75093 * 75094 * @see {@link https://www.w3.org/TR/wai-aria-practices/examples/treegrid/treegrid-1.html} 75095 */ 75096const TreeGrid = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedTreeGrid); 75097/* harmony default export */ const tree_grid = (TreeGrid); 75098 75099 75100 75101 75102;// CONCATENATED MODULE: ./packages/components/build-module/tree-grid/row.js 75103 75104/** 75105 * WordPress dependencies 75106 */ 75107 75108 75109/** 75110 * Internal dependencies 75111 */ 75112 75113function UnforwardedTreeGridRow({ 75114 children, 75115 level, 75116 positionInSet, 75117 setSize, 75118 isExpanded, 75119 ...props 75120}, ref) { 75121 return (0,external_wp_element_namespaceObject.createElement)("tr", { 75122 ...props, 75123 ref: ref, 75124 role: "row", 75125 "aria-level": level, 75126 "aria-posinset": positionInSet, 75127 "aria-setsize": setSize, 75128 "aria-expanded": isExpanded 75129 }, children); 75130} 75131 75132/** 75133 * `TreeGridRow` is used to create a tree hierarchy. 75134 * It is not a visually styled component, but instead helps with adding 75135 * keyboard navigation and roving tab index behaviors to tree grid structures. 75136 * 75137 * @see {@link https://www.w3.org/TR/wai-aria-practices/examples/treegrid/treegrid-1.html} 75138 */ 75139const TreeGridRow = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedTreeGridRow); 75140/* harmony default export */ const tree_grid_row = (TreeGridRow); 75141 75142;// CONCATENATED MODULE: ./packages/components/build-module/tree-grid/roving-tab-index-item.js 75143 75144/** 75145 * WordPress dependencies 75146 */ 75147 75148 75149/** 75150 * Internal dependencies 75151 */ 75152 75153const RovingTabIndexItem = (0,external_wp_element_namespaceObject.forwardRef)(function UnforwardedRovingTabIndexItem({ 75154 children, 75155 as: Component, 75156 ...props 75157}, forwardedRef) { 75158 const localRef = (0,external_wp_element_namespaceObject.useRef)(); 75159 const ref = forwardedRef || localRef; 75160 // @ts-expect-error - We actually want to throw an error if this is undefined. 75161 const { 75162 lastFocusedElement,
75163 setLastFocusedElement 75164 } = useRovingTabIndexContext(); 75165 let tabIndex; 75166 if (lastFocusedElement) { 75167 tabIndex = lastFocusedElement === ( 75168 // TODO: The original implementation simply used `ref.current` here, assuming 75169 // that a forwarded ref would always be an object, which is not necessarily true. 75170 // This workaround maintains the original runtime behavior in a type-safe way, 75171 // but should be revisited. 75172 'current' in ref ? ref.current : undefined) ? 0 : -1; 75173 } 75174 const onFocus = event => setLastFocusedElement?.(event.target); 75175 const allProps = { 75176 ref, 75177 tabIndex, 75178 onFocus, 75179 ...props 75180 }; 75181 if (typeof children === 'function') { 75182 return children(allProps); 75183 } 75184 if (!Component) return null; 75185 return (0,external_wp_element_namespaceObject.createElement)(Component, { 75186 ...allProps 75187 }, children); 75188}); 75189/* harmony default export */ const roving_tab_index_item = (RovingTabIndexItem); 75190 75191;// CONCATENATED MODULE: ./packages/components/build-module/tree-grid/item.js 75192 75193/** 75194 * WordPress dependencies 75195 */ 75196 75197 75198/** 75199 * Internal dependencies 75200 */ 75201 75202function UnforwardedTreeGridItem({ 75203 children, 75204 ...props 75205}, ref) { 75206 return (0,external_wp_element_namespaceObject.createElement)(roving_tab_index_item, { 75207 ref: ref, 75208 ...props 75209 }, children); 75210} 75211 75212/** 75213 * `TreeGridItem` is used to create a tree hierarchy. 75214 * It is not a visually styled component, but instead helps with adding 75215 * keyboard navigation and roving tab index behaviors to tree grid structures. 75216 * 75217 * @see {@link https://www.w3.org/TR/wai-aria-practices/examples/treegrid/treegrid-1.html} 75218 */ 75219const TreeGridItem = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedTreeGridItem); 75220/* harmony default export */ const tree_grid_item = (TreeGridItem); 75221 75222;// CONCATENATED MODULE: ./packages/components/build-module/tree-grid/cell.js 75223 75224/** 75225 * WordPress dependencies 75226 */ 75227 75228 75229/** 75230 * Internal dependencies 75231 */ 75232 75233function UnforwardedTreeGridCell({ 75234 children, 75235 withoutGridItem = false, 75236 ...props 75237}, ref) { 75238 return (0,external_wp_element_namespaceObject.createElement)("td", { 75239 ...props, 75240 role: "gridcell" 75241 }, withoutGridItem ? (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, children) : (0,external_wp_element_namespaceObject.createElement)(tree_grid_item, { 75242 ref: ref 75243 }, children)); 75244} 75245 75246/** 75247 * `TreeGridCell` is used to create a tree hierarchy. 75248 * It is not a visually styled component, but instead helps with adding 75249 * keyboard navigation and roving tab index behaviors to tree grid structures. 75250 * 75251 * @see {@link https://www.w3.org/TR/wai-aria-practices/examples/treegrid/treegrid-1.html} 75252 */ 75253const TreeGridCell = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedTreeGridCell); 75254/* harmony default export */ const cell = (TreeGridCell); 75255 75256;// CONCATENATED MODULE: ./packages/components/build-module/isolated-event-container/index.js 75257 75258/** 75259 * External dependencies 75260 */ 75261 75262/** 75263 * WordPress dependencies 75264 */ 75265 75266 75267function stopPropagation(event) { 75268 event.stopPropagation(); 75269} 75270const IsolatedEventContainer = (0,external_wp_element_namespaceObject.forwardRef)((props, ref) => { 75271 external_wp_deprecated_default()('wp.components.IsolatedEventContainer', { 75272 since: '5.7' 75273 }); 75274 75275 // Disable reason: this stops certain events from propagating outside of the component. 75276 // - onMouseDown is disabled as this can cause interactions with other DOM elements. 75277 /* eslint-disable jsx-a11y/no-static-element-interactions */ 75278 return (0,external_wp_element_namespaceObject.createElement)("div", { 75279 ...props, 75280 ref: ref, 75281 onMouseDown: stopPropagation 75282 }); 75283 /* eslint-enable jsx-a11y/no-static-element-interactions */ 75284}); 75285 75286/* harmony default export */ const isolated_event_container = (IsolatedEventContainer); 75287 75288;// CONCATENATED MODULE: ./packages/components/build-module/slot-fill/bubbles-virtually/use-slot-fills.js 75289// @ts-nocheck 75290/** 75291 * External dependencies 75292 */ 75293 75294 75295/** 75296 * WordPress dependencies 75297 */ 75298 75299 75300/** 75301 * Internal dependencies 75302 */ 75303 75304function useSlotFills(name) { 75305 const registry = (0,external_wp_element_namespaceObject.useContext)(slot_fill_context); 75306 const fills = useSnapshot(registry.fills, { 75307 sync: true 75308 }); 75309 // The important bit here is that this call ensures that the hook 75310 // only causes a re-render if the "fills" of a given slot name 75311 // change change, not any fills. 75312 return fills.get(name); 75313} 75314 75315;// CONCATENATED MODULE: ./packages/components/build-module/z-stack/styles.js 75316 75317function 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)."; } 75318/** 75319 * External dependencies 75320 */ 75321 75322const ZStackChildView = emotion_styled_base_browser_esm("div", true ? { 75323 target: "ebn2ljm1" 75324} : 0)("&:not( :first-of-type ){", ({ 75325 offsetAmount 75326}) =>
75326 /*#__PURE__*/emotion_react_browser_esm_css({ 75327 marginInlineStart: offsetAmount 75328}, true ? "" : 0, true ? "" : 0), ";}", ({ 75329 zIndex 75330}) => /*#__PURE__*/emotion_react_browser_esm_css({ 75331 zIndex 75332}, true ? "" : 0, true ? "" : 0), ";" + ( true ? "" : 0)); 75333var z_stack_styles_ref = true ? { 75334 name: "rs0gp6", 75335 styles: "grid-row-start:1;grid-column-start:1" 75336} : 0; 75337const ZStackView = emotion_styled_base_browser_esm("div", true ? { 75338 target: "ebn2ljm0" 75339} : 0)("display:inline-grid;grid-auto-flow:column;position:relative;&>", ZStackChildView, "{position:relative;justify-self:start;", ({ 75340 isLayered 75341}) => isLayered ? // When `isLayered` is true, all items overlap in the same grid cell 75342z_stack_styles_ref : undefined, ";}" + ( true ? "" : 0)); 75343 75344;// CONCATENATED MODULE: ./packages/components/build-module/z-stack/component.js 75345 75346/** 75347 * External dependencies 75348 */ 75349 75350/** 75351 * WordPress dependencies 75352 */ 75353 75354 75355/** 75356 * Internal dependencies 75357 */ 75358 75359 75360 75361function UnconnectedZStack(props, forwardedRef) { 75362 const { 75363 children, 75364 className, 75365 isLayered = true, 75366 isReversed = false, 75367 offset = 0, 75368 ...otherProps 75369 } = useContextSystem(props, 'ZStack'); 75370 const validChildren = getValidChildren(children); 75371 const childrenLastIndex = validChildren.length - 1; 75372 const clonedChildren = validChildren.map((child, index) => { 75373 const zIndex = isReversed ? childrenLastIndex - index : index; 75374 // Only when the component is layered, the offset needs to be multiplied by 75375 // the item's index, so that items can correctly stack at the right distance 75376 const offsetAmount = isLayered ? offset * index : offset; 75377 const key = (0,external_wp_element_namespaceObject.isValidElement)(child) ? child.key : index; 75378 return (0,external_wp_element_namespaceObject.createElement)(ZStackChildView, { 75379 offsetAmount: offsetAmount, 75380 zIndex: zIndex, 75381 key: key 75382 }, child); 75383 }); 75384 return (0,external_wp_element_namespaceObject.createElement)(ZStackView, { 75385 ...otherProps, 75386 className: className, 75387 isLayered: isLayered, 75388 ref: forwardedRef 75389 }, clonedChildren); 75390} 75391 75392/** 75393 * `ZStack` allows you to stack things along the Z-axis. 75394 * 75395 * ```jsx 75396 * import { __experimentalZStack as ZStack } from '@wordpress/components'; 75397 * 75398 * function Example() { 75399 * return ( 75400 * <ZStack offset={ 20 } isLayered> 75401 * <ExampleImage /> 75402 * <ExampleImage /> 75403 * <ExampleImage /> 75404 * </ZStack> 75405 * ); 75406 * } 75407 * ``` 75408 */ 75409const ZStack = contextConnect(UnconnectedZStack, 'ZStack'); 75410/* harmony default export */ const z_stack_component = (ZStack); 75411 75412;// CONCATENATED MODULE: ./packages/components/build-module/higher-order/navigate-regions/index.js 75413 75414/** 75415 * WordPress dependencies 75416 */ 75417 75418 75419 75420const defaultShortcuts = { 75421 previous: [{ 75422 modifier: 'ctrlShift', 75423 character: '`' 75424 }, { 75425 modifier: 'ctrlShift', 75426 character: '~' 75427 }, { 75428 modifier: 'access', 75429 character: 'p' 75430 }], 75431 next: [{ 75432 modifier: 'ctrl', 75433 character: '`' 75434 }, { 75435 modifier: 'access', 75436 character: 'n' 75437 }] 75438}; 75439function useNavigateRegions(shortcuts = defaultShortcuts) { 75440 const ref = (0,external_wp_element_namespaceObject.useRef)(null); 75441 const [isFocusingRegions, setIsFocusingRegions] = (0,external_wp_element_namespaceObject.useState)(false); 75442 function focusRegion(offset) { 75443 var _ref$current$querySel; 75444 const regions = Array.from((_ref$current$querySel = ref.current?.querySelectorAll('[role="region"][tabindex="-1"]')) !== null && _ref$current$querySel !== void 0 ? _ref$current$querySel : []); 75445 if (!regions.length) { 75446 return; 75447 } 75448 let nextRegion = regions[0]; 75449 // Based off the current element, use closest to determine the wrapping region since this operates up the DOM. Also, match tabindex to avoid edge cases with regions we do not want. 75450 const wrappingRegion = ref.current?.ownerDocument?.activeElement?.closest('[role="region"][tabindex="-1"]'); 75451 const selectedIndex = wrappingRegion ? regions.indexOf(wrappingRegion) : -1; 75452 if (selectedIndex !== -1) { 75453 let nextIndex = selectedIndex + offset; 75454 nextIndex = nextIndex === -1 ? regions.length - 1 : nextIndex; 75455 nextIndex = nextIndex === regions.length ? 0 : nextIndex; 75456 nextRegion = regions[nextIndex]; 75457 } 75458 nextRegion.focus(); 75459 setIsFocusingRegions(true); 75460 } 75461 const clickRef = (0,external_wp_compose_namespaceObject.useRefEffect)(element => { 75462 function onClick() { 75463 setIsFocusingRegions(false); 75464 } 75465 element.addEventListener('click', onClick); 75466 return () => { 75467 element.removeEventListener('click', onClick); 75468 }; 75469 }, [setIsFocusingRegions]); 75470 return { 75471 ref: (0,external_wp_compose_namespaceObject.useMergeRefs)([ref, clickRef]), 75472 className: isFocusingRegions ? 'is-focusing-regions' : '', 75473 onKeyDown(event) { 75474 if (shortcuts.previous.some(({ 75475 modifier, 75476 character 75477 }) => { 75478 return external_wp_keycodes_namespaceObject.isKeyboardEvent[modifier](event, character); 75479 })) { 75480 focusRegion(-1); 75481 } else if (shortcuts.next.some(({ 75482 modifier, 75483 character 75484 }) => { 75485 return external_wp_keycodes_namespaceObject.isKeyboardEvent[modifier](event, character); 75486 })) { 75487 focusRegion(1); 75488 } 75489 } 75490 }; 75491} 75492 75493/** 75494 * `navigateRegions` is a React [higher-order component](https://facebook.github.io/react/docs/higher-order-components.html) 75495 * adding keyboard navigation to switch between the different DOM elements marked as "regions" (role="region"). 75496 * These regions should be focusable (By adding a tabIndex attribute for example). For better accessibility, 75497 * these elements must be properly labelled to briefly describe the purpose of the content in the region. 75498 * For more details, see "Landmark Roles" in the [WAI-ARIA specification](https://www.w3.org/TR/wai-aria/) 75499 * and "Landmark Regions" in the [ARIA Authoring Practices Guide](https://www.w3.org/WAI/ARIA/apg/practices/landmark-regions/). 75500 * 75501 * ```jsx 75502 * import { navigateRegions } from '@wordpress/components'; 75503 * 75504 * const MyComponentWithNavigateRegions = navigateRegions( () => ( 75505 * <div> 75506 * <div role="region" tabIndex="-1" aria-label="Header"> 75507 * Header 75508 * </div> 75509 * <div role="region" tabIndex="-1" aria-label="Content"> 75510 * Content 75511 * </div> 75512 * <div role="region" tabIndex="-1" aria-label="Sidebar"> 75513 * Sidebar 75514 * </div> 75515 * </div> 75516 * ) ); 75517 * ``` 75518 */ 75519/* harmony default export */ const navigate_regions = ((0,external_wp_compose_namespaceObject.createHigherOrderComponent)(Component => ({ 75520 shortcuts, 75521 ...props 75522}) => (0,external_wp_element_namespaceObject.createElement)("div", { 75523 ...useNavigateRegions(shortcuts) 75524}, (0,external_wp_element_namespaceObject.createElement)(Component, { 75525 ...props 75526}
75526)), 'navigateRegions')); 75527 75528;// CONCATENATED MODULE: ./packages/components/build-module/higher-order/with-constrained-tabbing/index.js 75529 75530/** 75531 * WordPress dependencies 75532 */ 75533 75534 75535/** 75536 * `withConstrainedTabbing` is a React [higher-order component](https://facebook.github.io/react/docs/higher-order-components.html) 75537 * adding the ability to constrain keyboard navigation with the Tab key within a component. 75538 * For accessibility reasons, some UI components need to constrain Tab navigation, for example 75539 * modal dialogs or similar UI. Use of this component is recommended only in cases where a way to 75540 * navigate away from the wrapped component is implemented by other means, usually by pressing 75541 * the Escape key or using a specific UI control, e.g. a "Close" button. 75542 */ 75543const withConstrainedTabbing = (0,external_wp_compose_namespaceObject.createHigherOrderComponent)(WrappedComponent => function ComponentWithConstrainedTabbing(props) { 75544 const ref = (0,external_wp_compose_namespaceObject.useConstrainedTabbing)(); 75545 return (0,external_wp_element_namespaceObject.createElement)("div", { 75546 ref: ref, 75547 tabIndex: -1 75548 }, (0,external_wp_element_namespaceObject.createElement)(WrappedComponent, { 75549 ...props 75550 })); 75551}, 'withConstrainedTabbing'); 75552/* harmony default export */ const with_constrained_tabbing = (withConstrainedTabbing); 75553 75554;// CONCATENATED MODULE: ./packages/components/build-module/higher-order/with-fallback-styles/index.js 75555 75556/** 75557 * External dependencies 75558 */ 75559 75560 75561/** 75562 * WordPress dependencies 75563 */ 75564 75565 75566/* harmony default export */ const with_fallback_styles = (mapNodeToProps => (0,external_wp_compose_namespaceObject.createHigherOrderComponent)(WrappedComponent => { 75567 return class extends external_wp_element_namespaceObject.Component { 75568 constructor(props) { 75569 super(props); 75570 this.nodeRef = this.props.node; 75571 this.state = { 75572 fallbackStyles: undefined, 75573 grabStylesCompleted: false 75574 }; 75575 this.bindRef = this.bindRef.bind(this); 75576 } 75577 bindRef(node) { 75578 if (!node) { 75579 return; 75580 } 75581 this.nodeRef = node; 75582 } 75583 componentDidMount() { 75584 this.grabFallbackStyles(); 75585 } 75586 componentDidUpdate() { 75587 this.grabFallbackStyles(); 75588 } 75589 grabFallbackStyles() { 75590 const { 75591 grabStylesCompleted, 75592 fallbackStyles 75593 } = this.state; 75594 if (this.nodeRef && !grabStylesCompleted) { 75595 const newFallbackStyles = mapNodeToProps(this.nodeRef, this.props); 75596 if (!es6_default()(newFallbackStyles, fallbackStyles)) { 75597 this.setState({ 75598 fallbackStyles: newFallbackStyles, 75599 grabStylesCompleted: Object.values(newFallbackStyles).every(Boolean) 75600 }); 75601 } 75602 } 75603 } 75604 render() { 75605 const wrappedComponent = (0,external_wp_element_namespaceObject.createElement)(WrappedComponent, { 75606 ...this.props, 75607 ...this.state.fallbackStyles 75608 }); 75609 return this.props.node ? wrappedComponent : (0,external_wp_element_namespaceObject.createElement)("div", { 75610 ref: this.bindRef 75611 }, " ", wrappedComponent, " "); 75612 } 75613 }; 75614}, 'withFallbackStyles')); 75615 75616;// CONCATENATED MODULE: external ["wp","hooks"] 75617const external_wp_hooks_namespaceObject = window["wp"]["hooks"]; 75618;// CONCATENATED MODULE: ./packages/components/build-module/higher-order/with-filters/index.js 75619 75620/** 75621 * WordPress dependencies 75622 */ 75623 75624 75625 75626const ANIMATION_FRAME_PERIOD = 16; 75627 75628/** 75629 * Creates a higher-order component which adds filtering capability to the 75630 * wrapped component. Filters get applied when the original component is about 75631 * to be mounted. When a filter is added or removed that matches the hook name, 75632 * the wrapped component re-renders. 75633 * 75634 * @param hookName Hook name exposed to be used by filters. 75635 * 75636 * @return Higher-order component factory. 75637 * 75638 * ```jsx 75639 * import { withFilters } from '@wordpress/components'; 75640 * import { addFilter } from '@wordpress/hooks'; 75641 * 75642 * const MyComponent = ( { title } ) => <h1>{ title }</h1>; 75643 * 75644 * const ComponentToAppend = () => <div>Appended component</div>; 75645 * 75646 * function withComponentAppended( FilteredComponent ) { 75647 * return ( props ) => ( 75648 * <> 75649 * <FilteredComponent { ...props } /> 75650 * <ComponentToAppend /> 75651 * </> 75652 * ); 75653 * } 75654 * 75655 * addFilter( 75656 * 'MyHookName', 75657 * 'my-plugin/with-component-appended', 75658 * withComponentAppended 75659 * ); 75660 * 75661 * const MyComponentWithFilters = withFilters( 'MyHookName' )( MyComponent ); 75662 * ``` 75663 */
75664function withFilters(hookName) { 75665 return (0,external_wp_compose_namespaceObject.createHigherOrderComponent)(OriginalComponent => { 75666 const namespace = 'core/with-filters/' + hookName; 75667 75668 /** 75669 * The component definition with current filters applied. Each instance 75670 * reuse this shared reference as an optimization to avoid excessive 75671 * calls to `applyFilters` when many instances exist. 75672 */ 75673 let FilteredComponent; 75674 75675 /** 75676 * Initializes the FilteredComponent variable once, if not already 75677 * assigned. Subsequent calls are effectively a noop. 75678 */ 75679 function ensureFilteredComponent() { 75680 if (FilteredComponent === undefined) { 75681 FilteredComponent = (0,external_wp_hooks_namespaceObject.applyFilters)(hookName, OriginalComponent); 75682 } 75683 } 75684 class FilteredComponentRenderer extends external_wp_element_namespaceObject.Component { 75685 constructor(props) { 75686 super(props); 75687 ensureFilteredComponent(); 75688 } 75689 componentDidMount() { 75690 FilteredComponentRenderer.instances.push(this); 75691
75692 // If there were previously no mounted instances for components 75693 // filtered on this hook, add the hook handler. 75694 if (FilteredComponentRenderer.instances.length === 1) { 75695 (0,external_wp_hooks_namespaceObject.addAction)('hookRemoved', namespace, onHooksUpdated); 75696 (0,external_wp_hooks_namespaceObject.addAction)('hookAdded', namespace, onHooksUpdated); 75697 } 75698 } 75699 componentWillUnmount() { 75700 FilteredComponentRenderer.instances = FilteredComponentRenderer.instances.filter(instance => instance !== this); 75701 75702 // If this was the last of the mounted components filtered on 75703 // this hook, remove the hook handler. 75704 if (FilteredComponentRenderer.instances.length === 0) { 75705 (0,external_wp_hooks_namespaceObject.removeAction)('hookRemoved', namespace); 75706 (0,external_wp_hooks_namespaceObject.removeAction)('hookAdded', namespace); 75707 } 75708 } 75709 render() { 75710 return (0,external_wp_element_namespaceObject.createElement)(FilteredComponent, { 75711 ...this.props 75712 }); 75713 } 75714 } 75715 FilteredComponentRenderer.instances = []; 75716 75717 /** 75718 * Updates the FilteredComponent definition, forcing a render for each 75719 * mounted instance. This occurs a maximum of once per animation frame. 75720 */ 75721 const throttledForceUpdate = (0,external_wp_compose_namespaceObject.debounce)(() => { 75722 // Recreate the filtered component, only after delay so that it's 75723 // computed once, even if many filters added. 75724 FilteredComponent = (0,external_wp_hooks_namespaceObject.applyFilters)(hookName, OriginalComponent); 75725 75726 // Force each instance to render. 75727 FilteredComponentRenderer.instances.forEach(instance => { 75728 instance.forceUpdate(); 75729 }); 75730 }, ANIMATION_FRAME_PERIOD); 75731 75732 /** 75733 * When a filter is added or removed for the matching hook name, each 75734 * mounted instance should re-render with the new filters having been 75735 * applied to the original component. 75736 * 75737 * @param updatedHookName Name of the hook that was updated. 75738 */ 75739 function onHooksUpdated(updatedHookName) { 75740 if (updatedHookName === hookName) { 75741 throttledForceUpdate(); 75742 } 75743 } 75744 return FilteredComponentRenderer; 75745 }, 'withFilters'); 75746} 75747 75748;// CONCATENATED MODULE: ./packages/components/build-module/higher-order/with-focus-return/index.js 75749 75750/** 75751 * WordPress dependencies 75752 */ 75753 75754 75755 75756 75757/** 75758 * Returns true if the given object is component-like. An object is component- 75759 * like if it is an instance of wp.element.Component, or is a function. 75760 * 75761 * @param object Object to test. 75762 * 75763 * @return Whether object is component-like. 75764 */ 75765function isComponentLike(object) { 75766 return object instanceof external_wp_element_namespaceObject.Component || typeof object === 'function'; 75767} 75768/** 75769 * Higher Order Component used to be used to wrap disposable elements like 75770 * sidebars, modals, dropdowns. When mounting the wrapped component, we track a 75771 * reference to the current active element so we know where to restore focus 75772 * when the component is unmounted. 75773 * 75774 * @param options The component to be enhanced with 75775 * focus return behavior, or an object 75776 * describing the component and the 75777 * focus return characteristics. 75778 * 75779 * @return Higher Order Component with the focus restauration behaviour. 75780 */ 75781/* harmony default export */ const with_focus_return = ((0,external_wp_compose_namespaceObject.createHigherOrderComponent)( 75782// @ts-expect-error TODO: Reconcile with intended `createHigherOrderComponent` types 75783options => { 75784 const HoC = ({ 75785 onFocusReturn 75786 } = {}) => WrappedComponent => { 75787 const WithFocusReturn = props => { 75788 const ref = (0,external_wp_compose_namespaceObject.useFocusReturn)(onFocusReturn); 75789 return (0,external_wp_element_namespaceObject.createElement)("div", { 75790 ref: ref 75791 }, (0,external_wp_element_namespaceObject.createElement)(WrappedComponent, { 75792 ...props 75793 })); 75794 }; 75795 return WithFocusReturn; 75796 }; 75797 if (isComponentLike(options)) { 75798 const WrappedComponent = options; 75799 return HoC()(WrappedComponent); 75800 } 75801 return HoC(options); 75802}
75802, 'withFocusReturn')); 75803const with_focus_return_Provider = ({ 75804 children 75805}) => { 75806 external_wp_deprecated_default()('wp.components.FocusReturnProvider component', { 75807 since: '5.7', 75808 hint: 'This provider is not used anymore. You can just remove it from your codebase' 75809 }); 75810 return children; 75811}; 75812 75813;// CONCATENATED MODULE: ./packages/components/build-module/higher-order/with-notices/index.js 75814 75815/** 75816 * External dependencies 75817 */ 75818 75819 75820/** 75821 * WordPress dependencies 75822 */ 75823 75824 75825 75826/** 75827 * Internal dependencies 75828 */ 75829 75830/** 75831 * Override the default edit UI to include notices if supported. 75832 * 75833 * Wrapping the original component with `withNotices` encapsulates the component 75834 * with the additional props `noticeOperations` and `noticeUI`. 75835 * 75836 * ```jsx 75837 * import { withNotices, Button } from '@wordpress/components'; 75838 * 75839 * const MyComponentWithNotices = withNotices( 75840 * ( { noticeOperations, noticeUI } ) => { 75841 * const addError = () => 75842 * noticeOperations.createErrorNotice( 'Error message' ); 75843 * return ( 75844 * <div> 75845 * { noticeUI } 75846 * <Button variant="secondary" onClick={ addError }> 75847 * Add error 75848 * </Button> 75849 * </div> 75850 * ); 75851 * } 75852 * ); 75853 * ``` 75854 * 75855 * @param OriginalComponent Original component. 75856 * 75857 * @return Wrapped component. 75858 */ 75859/* harmony default export */ const with_notices = ((0,external_wp_compose_namespaceObject.createHigherOrderComponent)(OriginalComponent => { 75860 function Component(props, ref) { 75861 const [noticeList, setNoticeList] = (0,external_wp_element_namespaceObject.useState)([]); 75862 const noticeOperations = (0,external_wp_element_namespaceObject.useMemo)(() => { 75863 const createNotice = notice => { 75864 const noticeToAdd = notice.id ? notice : { 75865 ...notice, 75866 id: esm_browser_v4() 75867 }; 75868 setNoticeList(current => [...current, noticeToAdd]); 75869 }; 75870 return { 75871 createNotice, 75872 createErrorNotice: msg => { 75873 // @ts-expect-error TODO: Missing `id`, potentially a bug 75874 createNotice({ 75875 status: 'error', 75876 content: msg 75877 }); 75878 }, 75879 removeNotice: id => { 75880 setNoticeList(current => current.filter(notice => notice.id !== id)); 75881 }, 75882 removeAllNotices: () => { 75883 setNoticeList([]); 75884 } 75885 }; 75886 }, []); 75887 const propsOut = { 75888 ...props, 75889 noticeList, 75890 noticeOperations, 75891 noticeUI: noticeList.length > 0 && (0,external_wp_element_namespaceObject.createElement)(list, { 75892 className: "components-with-notices-ui", 75893 notices: noticeList, 75894 onRemove: noticeOperations.removeNotice 75895 }) 75896 }; 75897 return isForwardRef ? (0,external_wp_element_namespaceObject.createElement)(OriginalComponent, { 75898 ...propsOut, 75899 ref: ref 75900 }) : (0,external_wp_element_namespaceObject.createElement)(OriginalComponent, { 75901 ...propsOut 75902 }); 75903 } 75904 let isForwardRef; 75905 // @ts-expect-error - `render` will only be present when OriginalComponent was wrapped with forwardRef(). 75906 const { 75907 render 75908 } = OriginalComponent; 75909 // Returns a forwardRef if OriginalComponent appears to be a forwardRef. 75910 if (typeof render === 'function') { 75911 isForwardRef = true; 75912 return (0,external_wp_element_namespaceObject.forwardRef)(Component); 75913 } 75914 return Component; 75915}, 'withNotices')); 75916 75917;// CONCATENATED MODULE: external ["wp","privateApis"] 75918const external_wp_privateApis_namespaceObject = window["wp"]["privateApis"]; 75919;// CONCATENATED MODULE: ./packages/components/build-module/progress-bar/styles.js 75920 75921function progress_bar_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)."; } 75922/** 75923 * External dependencies 75924 */ 75925 75926 75927 75928/** 75929 * Internal dependencies 75930 */ 75931 75932const animateProgressBar = emotion_react_browser_esm_keyframes({ 75933 '0%': { 75934 left: '-50%' 75935 }, 75936 '100%': { 75937 left: '100%' 75938 } 75939}); 75940 75941// Width of the indicator for the indeterminate progress bar 75942const INDETERMINATE_TRACK_WIDTH = 50; 75943const styles_Track = emotion_styled_base_browser_esm("div", true ? { 75944 target: "e15u147w2" 75945} : 0)("position:relative;overflow:hidden;width:100%;max-width:160px;height:", config_values.borderWidthFocus, ";background-color:color-mix(\n\t\tin srgb,\n\t\tvar( --wp-components-color-foreground, ", COLORS.gray[900], " ),\n\t\ttransparent 90%\n\t);border-radius:", config_values.radiusBlockUi, ";outline:2px solid transparent;outline-offset:2px;" + ( true ? "" : 0)); 75946const Indicator = emotion_styled_base_browser_esm("div", true ? { 75947 target: "e15u147w1" 75948} : 0)("display:inline-block;position:absolute;top:0;height:100%;border-radius:", config_values.radiusBlockUi, ";background-color:color-mix(\n\t\tin srgb,\n\t\tvar( --wp-components-color-foreground, ", COLORS.gray[900], " ),\n\t\ttransparent 10%\n\t);outline:2px solid transparent;outline-offset:-2px;", ({ 75949 isIndeterminate, 75950 value 75951}) =>
75951 isIndeterminate ? /*#__PURE__*/emotion_react_browser_esm_css({ 75952 animationDuration: '1.5s', 75953 animationTimingFunction: 'ease-in-out', 75954 animationIterationCount: 'infinite', 75955 animationName: animateProgressBar, 75956 width: `${INDETERMINATE_TRACK_WIDTH}%` 75957}, true ? "" : 0, true ? "" : 0) : /*#__PURE__*/emotion_react_browser_esm_css({ 75958 width: `${value}%`, 75959 transition: 'width 0.4s ease-in-out' 75960}, true ? "" : 0, true ? "" : 0), ";" + ( true ? "" : 0)); 75961const ProgressElement = emotion_styled_base_browser_esm("progress", true ? { 75962 target: "e15u147w0" 75963} : 0)( true ? { 75964 name: "11fb690", 75965 styles: "position:absolute;top:0;left:0;opacity:0;width:100%;height:100%" 75966} : 0); 75967 75968;// CONCATENATED MODULE: ./packages/components/build-module/progress-bar/index.js 75969 75970/** 75971 * External dependencies 75972 */ 75973 75974/** 75975 * WordPress dependencies 75976 */ 75977 75978 75979 75980/** 75981 * Internal dependencies 75982 */ 75983 75984function UnforwardedProgressBar(props, ref) { 75985 const { 75986 className, 75987 value, 75988 ...progressProps 75989 } = props; 75990 const isIndeterminate = !Number.isFinite(value); 75991 return (0,external_wp_element_namespaceObject.createElement)(styles_Track, { 75992 className: className 75993 }, (0,external_wp_element_namespaceObject.createElement)(Indicator, { 75994 isIndeterminate: isIndeterminate, 75995 value: value 75996 }), (0,external_wp_element_namespaceObject.createElement)(ProgressElement, { 75997 max: 100, 75998 value: value, 75999 "aria-label": (0,external_wp_i18n_namespaceObject.__)('Loading â¦'), 76000 ref: ref, 76001 ...progressProps 76002 })); 76003} 76004const ProgressBar = (0,external_wp_element_namespaceObject.forwardRef)(UnforwardedProgressBar); 76005/* harmony default export */ const progress_bar = (ProgressBar); 76006 76007;// CONCATENATED MODULE: ./node_modules/@radix-ui/primitive/dist/index.module.js 76008function $e42e1063c40fb3ef$export$b9ecd428b558ff10(originalEventHandler, ourEventHandler, { checkForDefaultPrevented: checkForDefaultPrevented = true } = {}) { 76009 return function handleEvent(event) { 76010 originalEventHandler === null || originalEventHandler === void 0 || originalEventHandler(event); 76011 if (checkForDefaultPrevented === false || !event.defaultPrevented) return ourEventHandler === null || ourEventHandler === void 0 ? void 0 : ourEventHandler(event); 76012 }; 76013} 76014 76015 76016 76017 76018 76019 76020;// CONCATENATED MODULE: ./node_modules/@radix-ui/react-compose-refs/dist/index.module.js 76021 76022 76023 76024/** 76025 * Set a given ref to a given value 76026 * This utility takes care of different types of refs: callback refs and RefObject(s) 76027 */ function $6ed0406888f73fc4$var$setRef(ref, value) { 76028 if (typeof ref === 'function') ref(value); 76029 else if (ref !== null && ref !== undefined) ref.current = value; 76030} 76031/** 76032 * A utility to compose multiple refs together 76033 * Accepts callback refs and RefObject(s) 76034 */ function $6ed0406888f73fc4$export$43e446d32b3d21af(...refs) { 76035 return (node)=>refs.forEach((ref)=>$6ed0406888f73fc4$var$setRef(ref, node) 76036 ) 76037 ; 76038} 76039/** 76040 * A custom hook that composes multiple refs 76041 * Accepts callback refs and RefObject(s) 76042 */ function $6ed0406888f73fc4$export$c7b2cbe3552a0d05(...refs) { 76043 // eslint-disable-next-line react-hooks/exhaustive-deps 76044 return (0,external_React_.useCallback)($6ed0406888f73fc4$export$43e446d32b3d21af(...refs), refs); 76045} 76046 76047 76048 76049 76050 76051 76052;// CONCATENATED MODULE: ./node_modules/@radix-ui/react-context/dist/index.module.js 76053 76054 76055 76056function $c512c27ab02ef895$export$fd42f52fd3ae1109(rootComponentName, defaultContext) { 76057 const Context = /*#__PURE__*/ $3bkAK$createContext(defaultContext); 76058 function Provider(props) { 76059 const { children: children , ...context } = props; // Only re-memoize when prop values change 76060 // eslint-disable-next-line react-hooks/exhaustive-deps 76061 const value = $3bkAK$useMemo(()=>context 76062 , Object.values(context)); 76063 return /*#__PURE__*/ $3bkAK$createElement(Context.Provider, { 76064 value: value 76065 }, children); 76066 } 76067 function useContext(consumerName) { 76068 const context = $3bkAK$useContext(Context); 76069 if (context) return context; 76070 if (defaultContext !== undefined) return defaultContext; // if a defaultContext wasn't specified, it's a required context. 76071 throw new Error(`\`${consumerName}\` must be used within \`${rootComponentName}\``); 76072 } 76073 Provider.displayName = rootComponentName + 'Provider'; 76074 return [ 76075 Provider, 76076 useContext 76077 ]; 76078} 76079/* ------------------------------------------------------------------------------------------------- 76080 * createContextScope 76081 * -----------------------------------------------------------------------------------------------*/ function $c512c27ab02ef895$export$50c7b4e9d9f19c1(scopeName, createContextScopeDeps = []) { 76082 let defaultContexts = []; 76083 /* ----------------------------------------------------------------------------------------------- 76084 * createContext 76085 * ---------------------------------------------------------------------------------------------*/ function $c512c27ab02ef895$export$fd42f52fd3ae1109(rootComponentName, defaultContext) { 76086 const BaseContext = /*#__PURE__*/ (0,external_React_.createContext)(defaultContext); 76087 const index = defaultContexts.length; 76088 defaultContexts = [ 76089 ...defaultContexts, 76090 defaultContext 76091 ]; 76092 function Provider(props) { 76093 const { scope: scope , children: children , ...context } = props; 76094 const Context = (scope === null || scope === void 0 ? void 0 : scope[scopeName][index]) || BaseContext; // Only re-memoize when prop values change 76095 // eslint-disable-next-line react-hooks/exhaustive-deps 76096 const value = (0,external_React_.useMemo)(()=>context 76097 , Object.values(context)); 76098 return /*#__PURE__*/ (0,external_React_.createElement)(Context.Provider, { 76099 value: value 76100 }, children); 76101 } 76102 function useContext(consumerName, scope) { 76103 const Context = (scope === null || scope === void 0 ? void 0 : scope[scopeName][index]) || BaseContext; 76104 const context = (0,external_React_.useContext)(Context); 76105 if (context) return context; 76106 if (defaultContext !== undefined) return defaultContext; // if a defaultContext wasn't specified, it's a required context. 76107 throw new Error(`\`${consumerName}\` must be used within \`${rootComponentName}\``); 76108 } 76109 Provider.displayName = rootComponentName + 'Provider'; 76110 return [ 76111 Provider, 76112 useContext 76113 ]; 76114 } 76115 /* ----------------------------------------------------------------------------------------------- 76116 * createScope 76117 * ---------------------------------------------------------------------------------------------*/ const createScope = ()=>{ 76118 const scopeContexts = defaultContexts.map((defaultContext)=>{ 76119 return /*#__PURE__*/ (0,external_React_.createContext)(defaultContext); 76120 }); 76121 return function useScope(scope) { 76122 const contexts = (scope === null || scope === void 0 ? void 0 : scope[scopeName]) || scopeContexts; 76123 return (0,external_React_.useMemo)(()=>({ 76124 [`__scope${scopeName}`]: { 76125 ...scope, 76126 [scopeName]: contexts 76127 } 76128 }) 76129 , [ 76130 scope, 76131 contexts 76132 ]); 76133 }; 76134 }; 76135 createScope.scopeName = scopeName; 76136 return [ 76137 $c512c27ab02ef895$export$fd42f52fd3ae1109, 76138 $c512c27ab02ef895$var$composeContextScopes(createScope, ...createContextScopeDeps) 76139 ]; 76140} 76141/* ------------------------------------------------------------------------------------------------- 76142 * composeContextScopes 76143 * -----------------------------------------------------------------------------------------------*/ function $c512c27ab02ef895$var$composeContextScopes(...scopes) { 76144 const baseScope = scopes[0]; 76145 if (scopes.length === 1) return baseScope; 76146 const createScope1 = ()=>{
76147 const scopeHooks = scopes.map((createScope)=>({ 76148 useScope: createScope(), 76149 scopeName: createScope.scopeName 76150 }) 76151 ); 76152 return function useComposedScopes(overrideScopes) { 76153 const nextScopes1 = scopeHooks.reduce((nextScopes, { useScope: useScope , scopeName: scopeName })=>{ 76154 // We are calling a hook inside a callback which React warns against to avoid inconsistent 76155 // renders, however, scoping doesn't have render side effects so we ignore the rule. 76156 // eslint-disable-next-line react-hooks/rules-of-hooks 76157 const scopeProps = useScope(overrideScopes); 76158 const currentScope = scopeProps[`__scope${scopeName}`]; 76159 return { 76160 ...nextScopes, 76161 ...currentScope 76162 }; 76163 }, {}); 76164 return (0,external_React_.useMemo)(()=>({ 76165 [`__scope${baseScope.scopeName}`]: nextScopes1 76166 }) 76167 , [ 76168 nextScopes1 76169 ]); 76170 }; 76171 }; 76172 createScope1.scopeName = baseScope.scopeName; 76173 return createScope1; 76174} 76175 76176 76177 76178 76179 76180 76181;// CONCATENATED MODULE: ./node_modules/@radix-ui/react-use-callback-ref/dist/index.module.js 76182 76183 76184 76185/** 76186 * A custom hook that converts a callback to a ref to avoid triggering re-renders when passed as a 76187 * prop or avoid re-executing effects when passed as a dependency 76188 */ function $b1b2314f5f9a1d84$export$25bec8c6f54ee79a(callback) { 76189 const callbackRef = (0,external_React_.useRef)(callback); 76190 (0,external_React_.useEffect)(()=>{ 76191 callbackRef.current = callback; 76192 }); // https://github.com/facebook/react/issues/19240 76193 return (0,external_React_.useMemo)(()=>(...args)=>{ 76194 var _callbackRef$current; 76195 return (_callbackRef$current = callbackRef.current) === null || _callbackRef$current === void 0 ? void 0 : _callbackRef$current.call(callbackRef, ...args); 76196 } 76197 , []); 76198} 76199 76200 76201 76202 76203 76204 76205;// CONCATENATED MODULE: ./node_modules/@radix-ui/react-use-controllable-state/dist/index.module.js 76206 76207 76208 76209 76210 76211function $71cd76cc60e0454e$export$6f32135080cb4c3({ prop: prop , defaultProp: defaultProp , onChange: onChange = ()=>{} }) { 76212 const [uncontrolledProp, setUncontrolledProp] = $71cd76cc60e0454e$var$useUncontrolledState({ 76213 defaultProp: defaultProp, 76214 onChange: onChange 76215 }); 76216 const isControlled = prop !== undefined; 76217 const value1 = isControlled ? prop : uncontrolledProp; 76218 const handleChange = $b1b2314f5f9a1d84$export$25bec8c6f54ee79a(onChange); 76219 const setValue = (0,external_React_.useCallback)((nextValue)=>{ 76220 if (isControlled) { 76221 const setter = nextValue; 76222 const value = typeof nextValue === 'function' ? setter(prop) : nextValue; 76223 if (value !== prop) handleChange(value); 76224 } else setUncontrolledProp(nextValue); 76225 }, [ 76226 isControlled, 76227 prop, 76228 setUncontrolledProp, 76229 handleChange 76230 ]); 76231 return [ 76232 value1, 76233 setValue 76234 ]; 76235} 76236function $71cd76cc60e0454e$var$useUncontrolledState({ defaultProp: defaultProp , onChange: onChange }) { 76237 const uncontrolledState = (0,external_React_.useState)(defaultProp); 76238 const [value] = uncontrolledState; 76239 const prevValueRef = (0,external_React_.useRef)(value); 76240 const handleChange = $b1b2314f5f9a1d84$export$25bec8c6f54ee79a(onChange); 76241 (0,external_React_.useEffect)(()=>{ 76242 if (prevValueRef.current !== value) { 76243 handleChange(value); 76244 prevValueRef.current = value; 76245 } 76246 }, [ 76247 value, 76248 prevValueRef, 76249 handleChange 76250 ]); 76251 return uncontrolledState; 76252} 76253 76254 76255 76256 76257 76258 76259;// CONCATENATED MODULE: ./node_modules/@radix-ui/react-dropdown-menu/node_modules/@radix-ui/react-slot/dist/index.module.js 76260 76261 76262 76263 76264 76265 76266 76267/* ------------------------------------------------------------------------------------------------- 76268 * Slot 76269 * -----------------------------------------------------------------------------------------------*/ const $5e63c961fc1ce211$export$8c6ed5c666ac1360 = /*#__PURE__*/ (0,external_React_.forwardRef)((props, forwardedRef)=>{ 76270 const { children: children , ...slotProps } = props; 76271 const childrenArray = external_React_.Children.toArray(children); 76272 const slottable = childrenArray.find($5e63c961fc1ce211$var$isSlottable); 76273 if (slottable) { 76274 // the new element to render is the one passed as a child of `Slottable` 76275 const newElement = slottable.props.children; 76276 const newChildren = childrenArray.map((child)=>{ 76277 if (child === slottable) { 76278 // because the new element will be the one rendered, we are only interested 76279 // in grabbing its children (`newElement.props.children`) 76280 if (external_React_.Children.count(newElement) > 1) return external_React_.Children.only(null); 76281 return /*#__PURE__*/ (0,external_React_.isValidElement)(newElement) ? newElement.props.children : null; 76282 } else return child; 76283 }); 76284 return /*#__PURE__*/ (0,external_React_.createElement)($5e63c961fc1ce211$var$SlotClone, extends_extends({}, slotProps, { 76285 ref: forwardedRef 76286 }), /*#__PURE__*/ (0,external_React_.isValidElement)(newElement) ? /*#__PURE__*/ (0,external_React_.cloneElement)(newElement, undefined, newChildren) : null); 76287 } 76288 return /*#__PURE__*/ (0,external_React_.createElement)($5e63c961fc1ce211$var$SlotClone, extends_extends({}, slotProps, { 76289 ref: forwardedRef 76290 }), children); 76291}); 76292$5e63c961fc1ce211$export$8c6ed5c666ac1360.displayName = 'Slot'; 76293/* ------------------------------------------------------------------------------------------------- 76294 * SlotClone 76295 * -----------------------------------------------------------------------------------------------*/ const $5e63c961fc1ce211$var$SlotClone = /*#__PURE__*/ (0,external_React_.forwardRef)((props, forwardedRef)=>{ 76296 const { children: children , ...slotProps } = props; 76297 if (/*#__PURE__*/ (0,external_React_.isValidElement)(children)) return /*#__PURE__*/ (0,external_React_.cloneElement)(children, { 76298 ...$5e63c961fc1ce211$var$mergeProps(slotProps, children.props),
vendor: 5,650 bytes, lines 76299-76433
76299 ref: $6ed0406888f73fc4$export$43e446d32b3d21af(forwardedRef, children.ref) 76300 }); 76301 return external_React_.Children.count(children) > 1 ? external_React_.Children.only(null) : null; 76302}); 76303$5e63c961fc1ce211$var$SlotClone.displayName = 'SlotClone'; 76304/* ------------------------------------------------------------------------------------------------- 76305 * Slottable 76306 * -----------------------------------------------------------------------------------------------*/ const $5e63c961fc1ce211$export$d9f1ccf0bdb05d45 = ({ children: children })=>{ 76307 return /*#__PURE__*/ (0,external_React_.createElement)(external_React_.Fragment, null, children); 76308}; 76309/* ---------------------------------------------------------------------------------------------- */ function $5e63c961fc1ce211$var$isSlottable(child) { 76310 return /*#__PURE__*/ (0,external_React_.isValidElement)(child) && child.type === $5e63c961fc1ce211$export$d9f1ccf0bdb05d45; 76311} 76312function $5e63c961fc1ce211$var$mergeProps(slotProps, childProps) { 76313 // all child props should override 76314 const overrideProps = { 76315 ...childProps 76316 }; 76317 for(const propName in childProps){ 76318 const slotPropValue = slotProps[propName]; 76319 const childPropValue = childProps[propName]; 76320 const isHandler = /^on[A-Z]/.test(propName); 76321 if (isHandler) { 76322 // if the handler exists on both, we compose them 76323 if (slotPropValue && childPropValue) overrideProps[propName] = (...args)=>{ 76324 childPropValue(...args); 76325 slotPropValue(...args); 76326 }; 76327 else if (slotPropValue) overrideProps[propName] = slotPropValue; 76328 } else if (propName === 'style') overrideProps[propName] = { 76329 ...slotPropValue, 76330 ...childPropValue 76331 }; 76332 else if (propName === 'className') overrideProps[propName] = [ 76333 slotPropValue, 76334 childPropValue 76335 ].filter(Boolean).join(' '); 76336 } 76337 return { 76338 ...slotProps, 76339 ...overrideProps 76340 }; 76341} 76342const $5e63c961fc1ce211$export$be92b6f5f03c0fe9 = (/* unused pure expression or super */ null && ($5e63c961fc1ce211$export$8c6ed5c666ac1360)); 76343 76344 76345 76346 76347 76348 76349;// CONCATENATED MODULE: ./node_modules/@radix-ui/react-dropdown-menu/node_modules/@radix-ui/react-primitive/dist/index.module.js 76350 76351 76352 76353 76354 76355 76356 76357 76358 76359const $8927f6f2acc4f386$var$NODES = [ 76360 'a', 76361 'button', 76362 'div', 76363 'form', 76364 'h2', 76365 'h3', 76366 'img', 76367 'input', 76368 'label', 76369 'li', 76370 'nav', 76371 'ol', 76372 'p', 76373 'span', 76374 'svg', 76375 'ul' 76376]; // Temporary while we await merge of this fix: 76377// https://github.com/DefinitelyTyped/DefinitelyTyped/pull/55396 76378// prettier-ignore 76379/* ------------------------------------------------------------------------------------------------- 76380 * Primitive 76381 * -----------------------------------------------------------------------------------------------*/ const $8927f6f2acc4f386$export$250ffa63cdc0d034 = $8927f6f2acc4f386$var$NODES.reduce((primitive, node)=>{ 76382 const Node = /*#__PURE__*/ (0,external_React_.forwardRef)((props, forwardedRef)=>{ 76383 const { asChild: asChild , ...primitiveProps } = props; 76384 const Comp = asChild ? $5e63c961fc1ce211$export$8c6ed5c666ac1360 : node; 76385 (0,external_React_.useEffect)(()=>{ 76386 window[Symbol.for('radix-ui')] = true; 76387 }, []); 76388 return /*#__PURE__*/ (0,external_React_.createElement)(Comp, extends_extends({}, primitiveProps, { 76389 ref: forwardedRef 76390 })); 76391 }); 76392 Node.displayName = `Primitive.${node}`; 76393 return { 76394 ...primitive, 76395 [node]: Node 76396 }; 76397}, {}); 76398/* ------------------------------------------------------------------------------------------------- 76399 * Utils 76400 * -----------------------------------------------------------------------------------------------*/ /** 76401 * Flush custom event dispatch 76402 * https://github.com/radix-ui/primitives/pull/1378 76403 * 76404 * React batches *all* event handlers since version 18, this introduces certain considerations when using custom event types. 76405 * 76406 * Internally, React prioritises events in the following order: 76407 * - discrete 76408 * - continuous 76409 * - default 76410 * 76411 * https://github.com/facebook/react/blob/a8a4742f1c54493df00da648a3f9d26e3db9c8b5/packages/react-dom/src/events/ReactDOMEventListener.js#L294-L350 76412 * 76413 * `discrete` is an important distinction as updates within these events are applied immediately. 76414 * React however, is not able to infer the priority of custom event types due to how they are detected internally. 76415 * Because of this, it's possible for updates from custom events to be unexpectedly batched when 76416 * dispatched by another `discrete` event. 76417 * 76418 * In order to ensure that updates from custom events are applied predictably, we need to manually flush the batch. 76419 * This utility should be used when dispatching a custom event from within another `discrete` event, this utility 76420 * is not nessesary when dispatching known event types, or if dispatching a custom type inside a non-discrete event. 76421 * For example: 76422 * 76423 * dispatching a known click ð 76424 * target.dispatchEvent(new Event(âclickâ)) 76425 * 76426 * dispatching a custom type within a non-discrete event ð 76427 * onScroll={(event) => event.target.dispatchEvent(new CustomEvent(âcustomTypeâ))} 76428 * 76429 * dispatching a custom type within a `discrete` event ð 76430 * onPointerDown={(event) => dispatchDiscreteCustomEvent(event.target, new CustomEvent(âcustomTypeâ))} 76431 * 76432 * Note: though React classifies `focus`, `focusin` and `focusout` events as `discrete`, it's not recommended to use 76433 * this utility with them. This is because it's possible for those handlers to be called implicitly during render
76434 * e.g. when focus is within a component as it is unmounted, or when managing focus on mount. 76435 */ function $8927f6f2acc4f386$export$6d1a0317bde7de7f(target, event) { 76436 if (target) $4q5Fq$flushSync(()=>target.dispatchEvent(event) 76437 ); 76438} 76439/* -----------------------------------------------------------------------------------------------*/ const $8927f6f2acc4f386$export$be92b6f5f03c0fe9 = (/* unused pure expression or super */ null && ($8927f6f2acc4f386$export$250ffa63cdc0d034)); 76440 76441 76442 76443 76444 76445 76446;// CONCATENATED MODULE: ./node_modules/@radix-ui/react-collection/node_modules/@radix-ui/react-slot/dist/index.module.js 76447 76448 76449 76450 76451 76452 76453 76454/* ------------------------------------------------------------------------------------------------- 76455 * Slot 76456 * -----------------------------------------------------------------------------------------------*/ const index_module_$5e63c961fc1ce211$export$8c6ed5c666ac1360 = /*#__PURE__*/ (0,external_React_.forwardRef)((props, forwardedRef)=>{ 76457 const { children: children , ...slotProps } = props; 76458 const childrenArray = external_React_.Children.toArray(children); 76459 const slottable = childrenArray.find(index_module_$5e63c961fc1ce211$var$isSlottable); 76460 if (slottable) { 76461 // the new element to render is the one passed as a child of `Slottable` 76462 const newElement = slottable.props.children; 76463 const newChildren = childrenArray.map((child)=>{ 76464 if (child === slottable) { 76465 // because the new element will be the one rendered, we are only interested 76466 // in grabbing its children (`newElement.props.children`) 76467 if (external_React_.Children.count(newElement) > 1) return external_React_.Children.only(null); 76468 return /*#__PURE__*/ (0,external_React_.isValidElement)(newElement) ? newElement.props.children : null; 76469 } else return child; 76470 }); 76471 return /*#__PURE__*/ (0,external_React_.createElement)(index_module_$5e63c961fc1ce211$var$SlotClone, extends_extends({}, slotProps, { 76472 ref: forwardedRef 76473 }), /*#__PURE__*/ (0,external_React_.isValidElement)(newElement) ? /*#__PURE__*/ (0,external_React_.cloneElement)(newElement, undefined, newChildren) : null); 76474 } 76475 return /*#__PURE__*/ (0,external_React_.createElement)(index_module_$5e63c961fc1ce211$var$SlotClone, extends_extends({}, slotProps, { 76476 ref: forwardedRef 76477 }), children); 76478}); 76479index_module_$5e63c961fc1ce211$export$8c6ed5c666ac1360.displayName = 'Slot'; 76480/* ------------------------------------------------------------------------------------------------- 76481 * SlotClone 76482 * -----------------------------------------------------------------------------------------------*/ const index_module_$5e63c961fc1ce211$var$SlotClone = /*#__PURE__*/ (0,external_React_.forwardRef)((props, forwardedRef)=>{ 76483 const { children: children , ...slotProps } = props; 76484 if (/*#__PURE__*/ (0,external_React_.isValidElement)(children)) return /*#__PURE__*/ (0,external_React_.cloneElement)(children, { 76485 ...index_module_$5e63c961fc1ce211$var$mergeProps(slotProps, children.props), 76486 ref: $6ed0406888f73fc4$export$43e446d32b3d21af(forwardedRef, children.ref) 76487 }); 76488 return external_React_.Children.count(children) > 1 ? external_React_.Children.only(null) : null; 76489}); 76490index_module_$5e63c961fc1ce211$var$SlotClone.displayName = 'SlotClone'; 76491/* ------------------------------------------------------------------------------------------------- 76492 * Slottable 76493 * -----------------------------------------------------------------------------------------------*/ const index_module_$5e63c961fc1ce211$export$d9f1ccf0bdb05d45 = ({ children: children })=>{ 76494 return /*#__PURE__*/ (0,external_React_.createElement)(external_React_.Fragment, null, children); 76495}; 76496/* ---------------------------------------------------------------------------------------------- */ function index_module_$5e63c961fc1ce211$var$isSlottable(child) { 76497 return /*#__PURE__*/ (0,external_React_.isValidElement)(child) && child.type === index_module_$5e63c961fc1ce211$export$d9f1ccf0bdb05d45; 76498} 76499function index_module_$5e63c961fc1ce211$var$mergeProps(slotProps, childProps) { 76500 // all child props should override 76501 const overrideProps = { 76502 ...childProps 76503 }; 76504 for(const propName in childProps){ 76505 const slotPropValue = slotProps[propName]; 76506 const childPropValue = childProps[propName]; 76507 const isHandler = /^on[A-Z]/.test(propName); 76508 if (isHandler) { 76509 // if the handler exists on both, we compose them 76510 if (slotPropValue && childPropValue) overrideProps[propName] = (...args)=>{ 76511 childPropValue(...args); 76512 slotPropValue(...args); 76513 }; 76514 else if (slotPropValue) overrideProps[propName] = slotPropValue; 76515 } else if (propName === 'style') overrideProps[propName] = { 76516 ...slotPropValue, 76517 ...childPropValue 76518 }; 76519 else if (propName === 'className') overrideProps[propName] = [ 76520 slotPropValue, 76521 childPropValue
76522 ].filter(Boolean).join(' '); 76523 } 76524 return { 76525 ...slotProps, 76526 ...overrideProps 76527 }; 76528} 76529const index_module_$5e63c961fc1ce211$export$be92b6f5f03c0fe9 = (/* unused pure expression or super */ null && (index_module_$5e63c961fc1ce211$export$8c6ed5c666ac1360)); 76530 76531 76532 76533 76534 76535 76536;// CONCATENATED MODULE: ./node_modules/@radix-ui/react-collection/dist/index.module.js 76537 76538 76539 76540 76541 76542 76543 76544 76545 76546// We have resorted to returning slots directly rather than exposing primitives that can then 76547// be slotted like `<CollectionItem as={Slot}>â¦</CollectionItem>`. 76548// This is because we encountered issues with generic types that cannot be statically analysed 76549// due to creating them dynamically via createCollection. 76550function $e02a7d9cb1dc128c$export$c74125a8e3af6bb2(name) { 76551 /* ----------------------------------------------------------------------------------------------- 76552 * CollectionProvider 76553 * ---------------------------------------------------------------------------------------------*/ const PROVIDER_NAME = name + 'CollectionProvider'; 76554 const [createCollectionContext, createCollectionScope] = $c512c27ab02ef895$export$50c7b4e9d9f19c1(PROVIDER_NAME); 76555 const [CollectionProviderImpl, useCollectionContext] = createCollectionContext(PROVIDER_NAME, { 76556 collectionRef: { 76557 current: null 76558 }, 76559 itemMap: new Map() 76560 }); 76561 const CollectionProvider = (props)=>{ 76562 const { scope: scope , children: children } = props; 76563 const ref = external_React_default().useRef(null); 76564 const itemMap = external_React_default().useRef(new Map()).current; 76565 return /*#__PURE__*/ external_React_default().createElement(CollectionProviderImpl, { 76566 scope: scope, 76567 itemMap: itemMap, 76568 collectionRef: ref 76569 }, children); 76570 }; 76571 /*#__PURE__*/ Object.assign(CollectionProvider, { 76572 displayName: PROVIDER_NAME 76573 }); 76574 /* ----------------------------------------------------------------------------------------------- 76575 * CollectionSlot 76576 * ---------------------------------------------------------------------------------------------*/ const COLLECTION_SLOT_NAME = name + 'CollectionSlot'; 76577 const CollectionSlot = /*#__PURE__*/ external_React_default().forwardRef((props, forwardedRef)=>{ 76578 const { scope: scope , children: children } = props; 76579 const context = useCollectionContext(COLLECTION_SLOT_NAME, scope); 76580 const composedRefs = $6ed0406888f73fc4$export$c7b2cbe3552a0d05(forwardedRef, context.collectionRef); 76581 return /*#__PURE__*/ external_React_default().createElement(index_module_$5e63c961fc1ce211$export$8c6ed5c666ac1360, { 76582 ref: composedRefs 76583 }, children); 76584 }); 76585 /*#__PURE__*/ Object.assign(CollectionSlot, { 76586 displayName: COLLECTION_SLOT_NAME 76587 }); 76588 /* ----------------------------------------------------------------------------------------------- 76589 * CollectionItem 76590 * ---------------------------------------------------------------------------------------------*/ const ITEM_SLOT_NAME = name + 'CollectionItemSlot'; 76591 const ITEM_DATA_ATTR = 'data-radix-collection-item'; 76592 const CollectionItemSlot = /*#__PURE__*/ external_React_default().forwardRef((props, forwardedRef)=>{ 76593 const { scope: scope , children: children , ...itemData } = props; 76594 const ref = external_React_default().useRef(null); 76595 const composedRefs = $6ed0406888f73fc4$export$c7b2cbe3552a0d05(forwardedRef, ref); 76596 const context = useCollectionContext(ITEM_SLOT_NAME, scope); 76597 external_React_default().useEffect(()=>{ 76598 context.itemMap.set(ref, { 76599 ref: ref, 76600 ...itemData 76601 }); 76602 return ()=>
76602void context.itemMap.delete(ref) 76603 ; 76604 }); 76605 return /*#__PURE__*/ external_React_default().createElement(index_module_$5e63c961fc1ce211$export$8c6ed5c666ac1360, { 76606 [ITEM_DATA_ATTR]: '', 76607 ref: composedRefs 76608 }, children); 76609 }); 76610 /*#__PURE__*/ Object.assign(CollectionItemSlot, { 76611 displayName: ITEM_SLOT_NAME 76612 }); 76613 /* ----------------------------------------------------------------------------------------------- 76614 * useCollection 76615 * ---------------------------------------------------------------------------------------------*/ function useCollection(scope) { 76616 const context = useCollectionContext(name + 'CollectionConsumer', scope); 76617 const getItems = external_React_default().useCallback(()=>{ 76618 const collectionNode = context.collectionRef.current; 76619 if (!collectionNode) return []; 76620 const orderedNodes = Array.from(collectionNode.querySelectorAll(`[${ITEM_DATA_ATTR}]`)); 76621 const items = Array.from(context.itemMap.values()); 76622 const orderedItems = items.sort((a, b)=>orderedNodes.indexOf(a.ref.current) - orderedNodes.indexOf(b.ref.current) 76623 ); 76624 return orderedItems; 76625 }, [ 76626 context.collectionRef, 76627 context.itemMap 76628 ]); 76629 return getItems; 76630 } 76631 return [ 76632 { 76633 Provider: CollectionProvider, 76634 Slot: CollectionSlot, 76635 ItemSlot: CollectionItemSlot 76636 }, 76637 useCollection, 76638 createCollectionScope 76639 ]; 76640} 76641 76642 76643 76644 76645 76646 76647;// CONCATENATED MODULE: ./node_modules/@radix-ui/react-direction/dist/index.module.js 76648 76649 76650 76651const $f631663db3294ace$var$DirectionContext = /*#__PURE__*/ (0,external_React_.createContext)(undefined); 76652/* ------------------------------------------------------------------------------------------------- 76653 * Direction 76654 * -----------------------------------------------------------------------------------------------*/ const $f631663db3294ace$export$c760c09fdd558351 = (props)=>{ 76655 const { dir: dir , children: children } = props; 76656 return /*#__PURE__*/ $7Gjcd$createElement($f631663db3294ace$var$DirectionContext.Provider, { 76657 value: dir 76658 }, children); 76659}; 76660/* -----------------------------------------------------------------------------------------------*/ function $f631663db3294ace$export$b39126d51d94e6f3(localDir) { 76661 const globalDir = (0,external_React_.useContext)($f631663db3294ace$var$DirectionContext); 76662 return localDir || globalDir || 'ltr'; 76663} 76664const $f631663db3294ace$export$2881499e37b75b9a = (/* unused pure expression or super */ null && ($f631663db3294ace$export$c760c09fdd558351)); 76665 76666 76667 76668 76669 76670 76671;// CONCATENATED MODULE: ./node_modules/@radix-ui/react-menu/node_modules/@radix-ui/react-slot/dist/index.module.js 76672 76673 76674 76675 76676 76677 76678 76679/* ------------------------------------------------------------------------------------------------- 76680 * Slot 76681 * -----------------------------------------------------------------------------------------------*/ const dist_index_module_$5e63c961fc1ce211$export$8c6ed5c666ac1360 = /*#__PURE__*/ (0,external_React_.forwardRef)((props, forwardedRef)=>{ 76682 const { children: children , ...slotProps } = props; 76683 const childrenArray = external_React_.Children.toArray(children); 76684 const slottable = childrenArray.find(dist_index_module_$5e63c961fc1ce211$var$isSlottable); 76685 if (slottable) { 76686 // the new element to render is the one passed as a child of `Slottable` 76687 const newElement = slottable.props.children; 76688 const newChildren = childrenArray.map((child)=>{ 76689 if (child === slottable) { 76690 // because the new element will be the one rendered, we are only interested 76691 // in grabbing its children (`newElement.props.children`) 76692 if (external_React_.Children.count(newElement) > 1) return external_React_.Children.only(null); 76693 return /*#__PURE__*/ (0,external_React_.isValidElement)(newElement) ? newElement.props.children : null; 76694 } else return child; 76695 }); 76696 return /*#__PURE__*/ (0,external_React_.createElement)(dist_index_module_$5e63c961fc1ce211$var$SlotClone, extends_extends({}, slotProps, { 76697 ref: forwardedRef 76698 }), /*#__PURE__*/ (0,external_React_.isValidElement)(newElement) ? /*#__PURE__*/ (0,external_React_.cloneElement)(newElement, undefined, newChildren) : null); 76699 } 76700 return /*#__PURE__*/ (0,external_React_.createElement)(dist_index_module_$5e63c961fc1ce211$var$SlotClone, extends_extends({}, slotProps, { 76701 ref: forwardedRef 76702 }), children); 76703}); 76704dist_index_module_$5e63c961fc1ce211$export$8c6ed5c666ac1360.displayName = 'Slot'; 76705/* ------------------------------------------------------------------------------------------------- 76706 * SlotClone 76707 * -----------------------------------------------------------------------------------------------*/ const dist_index_module_$5e63c961fc1ce211$var$SlotClone = /*#__PURE__*/ (0,external_React_.forwardRef)((props, forwardedRef)=>{ 76708 const { children: children , ...slotProps } = props; 76709 if (/*#__PURE__*/ (0,external_React_.isValidElement)(children)) return /*#__PURE__*/ (0,external_React_.cloneElement)(children, { 76710 ...dist_index_module_$5e63c961fc1ce211$var$mergeProps(slotProps, children.props),
vendor: 5,824 bytes, lines 76711-76845
76711 ref: $6ed0406888f73fc4$export$43e446d32b3d21af(forwardedRef, children.ref) 76712 }); 76713 return external_React_.Children.count(children) > 1 ? external_React_.Children.only(null) : null; 76714}); 76715dist_index_module_$5e63c961fc1ce211$var$SlotClone.displayName = 'SlotClone'; 76716/* ------------------------------------------------------------------------------------------------- 76717 * Slottable 76718 * -----------------------------------------------------------------------------------------------*/ const dist_index_module_$5e63c961fc1ce211$export$d9f1ccf0bdb05d45 = ({ children: children })=>{ 76719 return /*#__PURE__*/ (0,external_React_.createElement)(external_React_.Fragment, null, children); 76720}; 76721/* ---------------------------------------------------------------------------------------------- */ function dist_index_module_$5e63c961fc1ce211$var$isSlottable(child) { 76722 return /*#__PURE__*/ (0,external_React_.isValidElement)(child) && child.type === dist_index_module_$5e63c961fc1ce211$export$d9f1ccf0bdb05d45; 76723} 76724function dist_index_module_$5e63c961fc1ce211$var$mergeProps(slotProps, childProps) { 76725 // all child props should override 76726 const overrideProps = { 76727 ...childProps 76728 }; 76729 for(const propName in childProps){ 76730 const slotPropValue = slotProps[propName]; 76731 const childPropValue = childProps[propName]; 76732 const isHandler = /^on[A-Z]/.test(propName); 76733 if (isHandler) { 76734 // if the handler exists on both, we compose them 76735 if (slotPropValue && childPropValue) overrideProps[propName] = (...args)=>{ 76736 childPropValue(...args); 76737 slotPropValue(...args); 76738 }; 76739 else if (slotPropValue) overrideProps[propName] = slotPropValue; 76740 } else if (propName === 'style') overrideProps[propName] = { 76741 ...slotPropValue, 76742 ...childPropValue 76743 }; 76744 else if (propName === 'className') overrideProps[propName] = [ 76745 slotPropValue, 76746 childPropValue 76747 ].filter(Boolean).join(' '); 76748 } 76749 return { 76750 ...slotProps, 76751 ...overrideProps 76752 }; 76753} 76754const dist_index_module_$5e63c961fc1ce211$export$be92b6f5f03c0fe9 = (/* unused pure expression or super */ null && (dist_index_module_$5e63c961fc1ce211$export$8c6ed5c666ac1360)); 76755 76756 76757 76758 76759 76760 76761;// CONCATENATED MODULE: ./node_modules/@radix-ui/react-menu/node_modules/@radix-ui/react-primitive/dist/index.module.js 76762 76763 76764 76765 76766 76767 76768 76769 76770 76771const index_module_$8927f6f2acc4f386$var$NODES = [ 76772 'a', 76773 'button', 76774 'div', 76775 'form', 76776 'h2', 76777 'h3', 76778 'img', 76779 'input', 76780 'label', 76781 'li', 76782 'nav', 76783 'ol', 76784 'p', 76785 'span', 76786 'svg', 76787 'ul' 76788]; // Temporary while we await merge of this fix: 76789// https://github.com/DefinitelyTyped/DefinitelyTyped/pull/55396 76790// prettier-ignore 76791/* ------------------------------------------------------------------------------------------------- 76792 * Primitive 76793 * -----------------------------------------------------------------------------------------------*/ const index_module_$8927f6f2acc4f386$export$250ffa63cdc0d034 = index_module_$8927f6f2acc4f386$var$NODES.reduce((primitive, node)=>{ 76794 const Node = /*#__PURE__*/ (0,external_React_.forwardRef)((props, forwardedRef)=>{ 76795 const { asChild: asChild , ...primitiveProps } = props; 76796 const Comp = asChild ? dist_index_module_$5e63c961fc1ce211$export$8c6ed5c666ac1360 : node; 76797 (0,external_React_.useEffect)(()=>{ 76798 window[Symbol.for('radix-ui')] = true; 76799 }, []); 76800 return /*#__PURE__*/ (0,external_React_.createElement)(Comp, extends_extends({}, primitiveProps, { 76801 ref: forwardedRef 76802 })); 76803 }); 76804 Node.displayName = `Primitive.${node}`; 76805 return { 76806 ...primitive, 76807 [node]: Node 76808 }; 76809}, {}); 76810/* ------------------------------------------------------------------------------------------------- 76811 * Utils 76812 * -----------------------------------------------------------------------------------------------*/ /** 76813 * Flush custom event dispatch 76814 * https://github.com/radix-ui/primitives/pull/1378 76815 * 76816 * React batches *all* event handlers since version 18, this introduces certain considerations when using custom event types. 76817 * 76818 * Internally, React prioritises events in the following order: 76819 * - discrete 76820 * - continuous 76821 * - default 76822 * 76823 * https://github.com/facebook/react/blob/a8a4742f1c54493df00da648a3f9d26e3db9c8b5/packages/react-dom/src/events/ReactDOMEventListener.js#L294-L350 76824 * 76825 * `discrete` is an important distinction as updates within these events are applied immediately. 76826 * React however, is not able to infer the priority of custom event types due to how they are detected internally. 76827 * Because of this, it's possible for updates from custom events to be unexpectedly batched when 76828 * dispatched by another `discrete` event. 76829 * 76830 * In order to ensure that updates from custom events are applied predictably, we need to manually flush the batch. 76831 * This utility should be used when dispatching a custom event from within another `discrete` event, this utility 76832 * is not nessesary when dispatching known event types, or if dispatching a custom type inside a non-discrete event. 76833 * For example: 76834 * 76835 * dispatching a known click ð 76836 * target.dispatchEvent(new Event(âclickâ)) 76837 * 76838 * dispatching a custom type within a non-discrete event ð 76839 * onScroll={(event) => event.target.dispatchEvent(new CustomEvent(âcustomTypeâ))} 76840 * 76841 * dispatching a custom type within a `discrete` event ð 76842 * onPointerDown={(event) => dispatchDiscreteCustomEvent(event.target, new CustomEvent(âcustomTypeâ))} 76843 * 76844 * Note: though React classifies `focus`, `focusin` and `focusout` events as `discrete`, it's not recommended to use 76845 * this utility with them. This is because it's possible for those handlers to be called implicitly during render
76846 * e.g. when focus is within a component as it is unmounted, or when managing focus on mount. 76847 */ function index_module_$8927f6f2acc4f386$export$6d1a0317bde7de7f(target, event) { 76848 if (target) (0,external_ReactDOM_namespaceObject.flushSync)(()=>target.dispatchEvent(event) 76849 ); 76850} 76851/* -----------------------------------------------------------------------------------------------*/ const index_module_$8927f6f2acc4f386$export$be92b6f5f03c0fe9 = (/* unused pure expression or super */ null && (index_module_$8927f6f2acc4f386$export$250ffa63cdc0d034)); 76852 76853 76854 76855 76856 76857 76858;// CONCATENATED MODULE: ./node_modules/@radix-ui/react-menu/node_modules/@radix-ui/react-use-escape-keydown/dist/index.module.js 76859 76860 76861 76862 76863 76864/** 76865 * Listens for when the escape key is down 76866 */ function $addc16e1bbe58fd0$export$3a72a57244d6e765(onEscapeKeyDownProp, ownerDocument = globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) { 76867 const onEscapeKeyDown = $b1b2314f5f9a1d84$export$25bec8c6f54ee79a(onEscapeKeyDownProp); 76868 (0,external_React_.useEffect)(()=>{ 76869 const handleKeyDown = (event)=>{ 76870 if (event.key === 'Escape') onEscapeKeyDown(event); 76871 }; 76872 ownerDocument.addEventListener('keydown', handleKeyDown); 76873 return ()=>ownerDocument.removeEventListener('keydown', handleKeyDown) 76874 ; 76875 }, [ 76876 onEscapeKeyDown, 76877 ownerDocument 76878 ]); 76879} 76880 76881 76882 76883 76884 76885 76886;// CONCATENATED MODULE: ./node_modules/@radix-ui/react-menu/node_modules/@radix-ui/react-dismissable-layer/dist/index.module.js 76887 76888 76889 76890 76891 76892 76893 76894 76895 76896 76897 76898 76899 76900 76901 76902/* ------------------------------------------------------------------------------------------------- 76903 * DismissableLayer 76904 * -----------------------------------------------------------------------------------------------*/ const $5cb92bef7577960e$var$DISMISSABLE_LAYER_NAME = 'DismissableLayer'; 76905const $5cb92bef7577960e$var$CONTEXT_UPDATE = 'dismissableLayer.update'; 76906const $5cb92bef7577960e$var$POINTER_DOWN_OUTSIDE = 'dismissableLayer.pointerDownOutside'; 76907const $5cb92bef7577960e$var$FOCUS_OUTSIDE = 'dismissableLayer.focusOutside'; 76908let $5cb92bef7577960e$var$originalBodyPointerEvents; 76909const $5cb92bef7577960e$var$DismissableLayerContext = /*#__PURE__*/ (0,external_React_.createContext)({ 76910 layers: new Set(), 76911 layersWithOutsidePointerEventsDisabled: new Set(), 76912 branches: new Set() 76913}); 76914const $5cb92bef7577960e$export$177fb62ff3ec1f22 = /*#__PURE__*/ (0,external_React_.forwardRef)((props, forwardedRef)=>{ 76915 var _node$ownerDocument; 76916 const { disableOutsidePointerEvents: disableOutsidePointerEvents = false , onEscapeKeyDown: onEscapeKeyDown , onPointerDownOutside: onPointerDownOutside , onFocusOutside: onFocusOutside , onInteractOutside: onInteractOutside , onDismiss: onDismiss , ...layerProps } = props; 76917 const context = (0,external_React_.useContext)($5cb92bef7577960e$var$DismissableLayerContext); 76918 const [node1, setNode] = (0,external_React_.useState)(null); 76919 const ownerDocument = (_node$ownerDocument = node1 === null || node1 === void 0 ? void 0 : node1.ownerDocument) !== null && _node$ownerDocument !== void 0 ? _node$ownerDocument : globalThis === null || globalThis === void 0 ? void 0 : globalThis.document; 76920 const [, force] = (0,external_React_.useState)({}); 76921 const composedRefs = $6ed0406888f73fc4$export$c7b2cbe3552a0d05(forwardedRef, (node)=>setNode(node) 76922 ); 76923 const layers = Array.from(context.layers); 76924 const [highestLayerWithOutsidePointerEventsDisabled] = [ 76925 ...context.layersWithOutsidePointerEventsDisabled 76926 ].slice(-1); // prettier-ignore 76927 const highestLayerWithOutsidePointerEventsDisabledIndex = layers.indexOf(highestLayerWithOutsidePointerEventsDisabled); // prettier-ignore 76928 const index = node1 ? layers.indexOf(node1) : -1; 76929 const isBodyPointerEventsDisabled = context.layersWithOutsidePointerEventsDisabled.size > 0; 76930 const isPointerEventsEnabled = index >= highestLayerWithOutsidePointerEventsDisabledIndex; 76931 const pointerDownOutside = $5cb92bef7577960e$var$usePointerDownOutside((event)=>{ 76932 const target = event.target; 76933 const isPointerDownOnBranch = [ 76934 ...context.branches 76935 ].some((branch)=>branch.contains(target) 76936 ); 76937 if (!isPointerEventsEnabled || isPointerDownOnBranch) return; 76938 onPointerDownOutside === null || onPointerDownOutside === void 0 || onPointerDownOutside(event); 76939 onInteractOutside === null || onInteractOutside === void 0 || onInteractOutside(event); 76940 if (!event.defaultPrevented) onDismiss === null || onDismiss === void 0 || onDismiss(); 76941 }, ownerDocument); 76942 const focusOutside = $5cb92bef7577960e$var$useFocusOutside((event)=>{ 76943 const target = event.target; 76944 const isFocusInBranch = [ 76945 ...context.branches 76946 ].some((branch)=>branch.contains(target) 76947 ); 76948 if (isFocusInBranch) return; 76949 onFocusOutside === null || onFocusOutside === void 0 || onFocusOutside(event); 76950 onInteractOutside === null || onInteractOutside === void 0 || onInteractOutside(event); 76951 if (!event.defaultPrevented) onDismiss === null || onDismiss === void 0 || onDismiss(); 76952 }, ownerDocument); 76953 $addc16e1bbe58fd0$export$3a72a57244d6e765((event)=>{ 76954 const isHighestLayer = index === context.layers.size - 1; 76955 if (!isHighestLayer) return; 76956 onEscapeKeyDown === null || onEscapeKeyDown === void 0 || onEscapeKeyDown(event); 76957 if (!event.defaultPrevented && onDismiss) { 76958 event.preventDefault(); 76959 onDismiss(); 76960 } 76961 }, ownerDocument); 76962 (0,external_React_.useEffect)(()=>{ 76963 if (!node1) return; 76964 if (disableOutsidePointerEvents) { 76965 if (context.layersWithOutsidePointerEventsDisabled.size === 0) { 76966 $5cb92bef7577960e$var$originalBodyPointerEvents = ownerDocument.body.style.pointerEvents; 76967 ownerDocument.body.style.pointerEvents = 'none'; 76968 } 76969 context.layersWithOutsidePointerEventsDisabled.add(node1); 76970 } 76971 context.layers.add(node1); 76972 $5cb92bef7577960e$var$dispatchUpdate(); 76973 return ()=>{ 76974 if (disableOutsidePointerEvents && context.layersWithOutsidePointerEventsDisabled.size === 1) ownerDocument.body.style.pointerEvents = $5cb92bef7577960e$var$originalBodyPointerEvents; 76975 }; 76976 }, [ 76977 node1, 76978 ownerDocument, 76979 disableOutsidePointerEvents, 76980 context 76981 ]); 76982 /** 76983 * We purposefully prevent combining this effect with the `disableOutsidePointerEvents` effect
76984 * because a change to `disableOutsidePointerEvents` would remove this layer from the stack 76985 * and add it to the end again so the layering order wouldn't be _creation order_. 76986 * We only want them to be removed from context stacks when unmounted. 76987 */ (0,external_React_.useEffect)(()=>{ 76988 return ()=>{ 76989 if (!node1) return; 76990 context.layers.delete(node1); 76991 context.layersWithOutsidePointerEventsDisabled.delete(node1); 76992 $5cb92bef7577960e$var$dispatchUpdate(); 76993 }; 76994 }, [ 76995 node1, 76996 context 76997 ]); 76998 (0,external_React_.useEffect)(()=>{ 76999 const handleUpdate = ()=>force({}) 77000 ; 77001 document.addEventListener($5cb92bef7577960e$var$CONTEXT_UPDATE, handleUpdate); 77002 return ()=>document.removeEventListener($5cb92bef7577960e$var$CONTEXT_UPDATE, handleUpdate) 77003 ; 77004 }, []); 77005 return /*#__PURE__*/ (0,external_React_.createElement)(index_module_$8927f6f2acc4f386$export$250ffa63cdc0d034.div, extends_extends({}, layerProps, { 77006 ref: composedRefs, 77007 style: { 77008 pointerEvents: isBodyPointerEventsDisabled ? isPointerEventsEnabled ? 'auto' : 'none' : undefined, 77009 ...props.style 77010 }, 77011 onFocusCapture: $e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onFocusCapture, focusOutside.onFocusCapture), 77012 onBlurCapture: $e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onBlurCapture, focusOutside.onBlurCapture), 77013 onPointerDownCapture: $e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onPointerDownCapture, pointerDownOutside.onPointerDownCapture) 77014 })); 77015}); 77016/*#__PURE__*/ Object.assign($5cb92bef7577960e$export$177fb62ff3ec1f22, { 77017 displayName: $5cb92bef7577960e$var$DISMISSABLE_LAYER_NAME 77018}); 77019/* ------------------------------------------------------------------------------------------------- 77020 * DismissableLayerBranch 77021 * -----------------------------------------------------------------------------------------------*/ const $5cb92bef7577960e$var$BRANCH_NAME = 'DismissableLayerBranch'; 77022const $5cb92bef7577960e$export$4d5eb2109db14228 = /*#__PURE__*/ (0,external_React_.forwardRef)((props, forwardedRef)=>{ 77023 const context = (0,external_React_.useContext)($5cb92bef7577960e$var$DismissableLayerContext); 77024 const ref = (0,external_React_.useRef)(null); 77025 const composedRefs = $6ed0406888f73fc4$export$c7b2cbe3552a0d05(forwardedRef, ref); 77026 (0,external_React_.useEffect)(()=>{ 77027 const node = ref.current; 77028 if (node) { 77029 context.branches.add(node); 77030 return ()=>{ 77031 context.branches.delete(node); 77032 }; 77033 } 77034 }, [ 77035 context.branches 77036 ]); 77037 return /*#__PURE__*/ (0,external_React_.createElement)(index_module_$8927f6f2acc4f386$export$250ffa63cdc0d034.div, extends_extends({}, props, { 77038 ref: composedRefs 77039 })); 77040}); 77041/*#__PURE__*/ Object.assign($5cb92bef7577960e$export$4d5eb2109db14228, { 77042 displayName: $5cb92bef7577960e$var$BRANCH_NAME 77043}); 77044/* -----------------------------------------------------------------------------------------------*/ /** 77045 * Listens for `pointerdown` outside a react subtree. We use `pointerdown` rather than `pointerup` 77046 * to mimic layer dismissing behaviour present in OS. 77047 * Returns props to pass to the node we want to check for outside events. 77048 */ function $5cb92bef7577960e$var$usePointerDownOutside(onPointerDownOutside, ownerDocument = globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) { 77049 const handlePointerDownOutside = $b1b2314f5f9a1d84$export$25bec8c6f54ee79a(onPointerDownOutside); 77050 const isPointerInsideReactTreeRef = (0,external_React_.useRef)(false); 77051 const handleClickRef = (0,external_React_.useRef)(()=>{}); 77052 (0,external_React_.useEffect)(()=>{ 77053 const handlePointerDown = (event)=>{ 77054 if (event.target && !isPointerInsideReactTreeRef.current) { 77055 const eventDetail = { 77056 originalEvent: event 77057 }; 77058 function handleAndDispatchPointerDownOutsideEvent() { 77059 $5cb92bef7577960e$var$handleAndDispatchCustomEvent($5cb92bef7577960e$var$POINTER_DOWN_OUTSIDE, handlePointerDownOutside, eventDetail, { 77060 discrete: true 77061 }); 77062 } 77063 /** 77064 * On touch devices, we need to wait for a click event because browsers implement 77065 * a ~350ms delay between the time the user stops touching the display and when the 77066 * browser executres events. We need to ensure we don't reactivate pointer-events within 77067 * this timeframe otherwise the browser may execute events that should have been prevented. 77068 * 77069 * Additionally, this also lets us deal automatically with cancellations when a click event 77070 * isn't raised because the page was considered scrolled/drag-scrolled, long-pressed, etc. 77071 * 77072 * This is why we also continuously remove the previous listener, because we cannot be 77073 * certain that it was raised, and therefore cleaned-up. 77074 */ if (event.pointerType === 'touch') { 77075 ownerDocument.removeEventListener('click', handleClickRef.current); 77076 handleClickRef.current = handleAndDispatchPointerDownOutsideEvent; 77077 ownerDocument.addEventListener('click', handleClickRef.current, { 77078 once: true 77079 }); 77080 } else handleAndDispatchPointerDownOutsideEvent(); 77081 } 77082 isPointerInsideReactTreeRef.current = false;
77083 }; 77084 /** 77085 * if this hook executes in a component that mounts via a `pointerdown` event, the event 77086 * would bubble up to the document and trigger a `pointerDownOutside` event. We avoid 77087 * this by delaying the event listener registration on the document. 77088 * This is not React specific, but rather how the DOM works, ie: 77089 * ``` 77090 * button.addEventListener('pointerdown', () => { 77091 * console.log('I will log'); 77092 * document.addEventListener('pointerdown', () => { 77093 * console.log('I will also log'); 77094 * }) 77095 * }); 77096 */ const timerId = window.setTimeout(()=>{ 77097 ownerDocument.addEventListener('pointerdown', handlePointerDown); 77098 }, 0); 77099 return ()=>{ 77100 window.clearTimeout(timerId); 77101 ownerDocument.removeEventListener('pointerdown', handlePointerDown); 77102 ownerDocument.removeEventListener('click', handleClickRef.current); 77103 }; 77104 }, [ 77105 ownerDocument, 77106 handlePointerDownOutside 77107 ]); 77108 return { 77109 // ensures we check React component tree (not just DOM tree) 77110 onPointerDownCapture: ()=>isPointerInsideReactTreeRef.current = true 77111 }; 77112} 77113/**
vendor: 14,403 bytes, lines 77114-77417
77114 * Listens for when focus happens outside a react subtree. 77115 * Returns props to pass to the root (node) of the subtree we want to check. 77116 */ function $5cb92bef7577960e$var$useFocusOutside(onFocusOutside, ownerDocument = globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) { 77117 const handleFocusOutside = $b1b2314f5f9a1d84$export$25bec8c6f54ee79a(onFocusOutside); 77118 const isFocusInsideReactTreeRef = (0,external_React_.useRef)(false); 77119 (0,external_React_.useEffect)(()=>{ 77120 const handleFocus = (event)=>{ 77121 if (event.target && !isFocusInsideReactTreeRef.current) { 77122 const eventDetail = { 77123 originalEvent: event 77124 }; 77125 $5cb92bef7577960e$var$handleAndDispatchCustomEvent($5cb92bef7577960e$var$FOCUS_OUTSIDE, handleFocusOutside, eventDetail, { 77126 discrete: false 77127 }); 77128 } 77129 }; 77130 ownerDocument.addEventListener('focusin', handleFocus); 77131 return ()=>ownerDocument.removeEventListener('focusin', handleFocus) 77132 ; 77133 }, [ 77134 ownerDocument, 77135 handleFocusOutside 77136 ]); 77137 return { 77138 onFocusCapture: ()=>isFocusInsideReactTreeRef.current = true 77139 , 77140 onBlurCapture: ()=>isFocusInsideReactTreeRef.current = false 77141 }; 77142} 77143function $5cb92bef7577960e$var$dispatchUpdate() { 77144 const event = new CustomEvent($5cb92bef7577960e$var$CONTEXT_UPDATE); 77145 document.dispatchEvent(event); 77146} 77147function $5cb92bef7577960e$var$handleAndDispatchCustomEvent(name, handler, detail, { discrete: discrete }) { 77148 const target = detail.originalEvent.target; 77149 const event = new CustomEvent(name, { 77150 bubbles: false, 77151 cancelable: true, 77152 detail: detail 77153 }); 77154 if (handler) target.addEventListener(name, handler, { 77155 once: true 77156 }); 77157 if (discrete) index_module_$8927f6f2acc4f386$export$6d1a0317bde7de7f(target, event); 77158 else target.dispatchEvent(event); 77159} 77160const $5cb92bef7577960e$export$be92b6f5f03c0fe9 = (/* unused pure expression or super */ null && ($5cb92bef7577960e$export$177fb62ff3ec1f22)); 77161const $5cb92bef7577960e$export$aecb2ddcb55c95be = (/* unused pure expression or super */ null && ($5cb92bef7577960e$export$4d5eb2109db14228)); 77162 77163 77164 77165 77166 77167 77168;// CONCATENATED MODULE: ./node_modules/@radix-ui/react-focus-guards/dist/index.module.js 77169 77170 77171 77172/** Number of components which have requested interest to have focus guards */ let $3db38b7d1fb3fe6a$var$count = 0; 77173function $3db38b7d1fb3fe6a$export$ac5b58043b79449b(props) { 77174 $3db38b7d1fb3fe6a$export$b7ece24a22aeda8c(); 77175 return props.children; 77176} 77177/** 77178 * Injects a pair of focus guards at the edges of the whole DOM tree 77179 * to ensure `focusin` & `focusout` events can be caught consistently. 77180 */ function $3db38b7d1fb3fe6a$export$b7ece24a22aeda8c() { 77181 (0,external_React_.useEffect)(()=>{ 77182 var _edgeGuards$, _edgeGuards$2; 77183 const edgeGuards = document.querySelectorAll('[data-radix-focus-guard]'); 77184 document.body.insertAdjacentElement('afterbegin', (_edgeGuards$ = edgeGuards[0]) !== null && _edgeGuards$ !== void 0 ? _edgeGuards$ : $3db38b7d1fb3fe6a$var$createFocusGuard()); 77185 document.body.insertAdjacentElement('beforeend', (_edgeGuards$2 = edgeGuards[1]) !== null && _edgeGuards$2 !== void 0 ? _edgeGuards$2 : $3db38b7d1fb3fe6a$var$createFocusGuard()); 77186 $3db38b7d1fb3fe6a$var$count++; 77187 return ()=>{ 77188 if ($3db38b7d1fb3fe6a$var$count === 1) document.querySelectorAll('[data-radix-focus-guard]').forEach((node)=>node.remove() 77189 ); 77190 $3db38b7d1fb3fe6a$var$count--; 77191 }; 77192 }, []); 77193} 77194function $3db38b7d1fb3fe6a$var$createFocusGuard() { 77195 const element = document.createElement('span'); 77196 element.setAttribute('data-radix-focus-guard', ''); 77197 element.tabIndex = 0; 77198 element.style.cssText = 'outline: none; opacity: 0; position: fixed; pointer-events: none'; 77199 return element; 77200} 77201const $3db38b7d1fb3fe6a$export$be92b6f5f03c0fe9 = (/* unused pure expression or super */ null && ($3db38b7d1fb3fe6a$export$ac5b58043b79449b)); 77202 77203 77204 77205 77206 77207 77208;// CONCATENATED MODULE: ./node_modules/@radix-ui/react-menu/node_modules/@radix-ui/react-focus-scope/dist/index.module.js 77209 77210 77211 77212 77213 77214 77215 77216 77217 77218 77219 77220const $d3863c46a17e8a28$var$AUTOFOCUS_ON_MOUNT = 'focusScope.autoFocusOnMount'; 77221const $d3863c46a17e8a28$var$AUTOFOCUS_ON_UNMOUNT = 'focusScope.autoFocusOnUnmount'; 77222const $d3863c46a17e8a28$var$EVENT_OPTIONS = { 77223 bubbles: false, 77224 cancelable: true 77225}; 77226/* ------------------------------------------------------------------------------------------------- 77227 * FocusScope 77228 * -----------------------------------------------------------------------------------------------*/ const $d3863c46a17e8a28$var$FOCUS_SCOPE_NAME = 'FocusScope'; 77229const $d3863c46a17e8a28$export$20e40289641fbbb6 = /*#__PURE__*/ (0,external_React_.forwardRef)((props, forwardedRef)=>{ 77230 const { loop: loop = false , trapped: trapped = false , onMountAutoFocus: onMountAutoFocusProp , onUnmountAutoFocus: onUnmountAutoFocusProp , ...scopeProps } = props; 77231 const [container1, setContainer] = (0,external_React_.useState)(null); 77232 const onMountAutoFocus = $b1b2314f5f9a1d84$export$25bec8c6f54ee79a(onMountAutoFocusProp); 77233 const onUnmountAutoFocus = $b1b2314f5f9a1d84$export$25bec8c6f54ee79a(onUnmountAutoFocusProp); 77234 const lastFocusedElementRef = (0,external_React_.useRef)(null); 77235 const composedRefs = $6ed0406888f73fc4$export$c7b2cbe3552a0d05(forwardedRef, (node)=>setContainer(node) 77236 ); 77237 const focusScope = (0,external_React_.useRef)({ 77238 paused: false, 77239 pause () { 77240 this.paused = true; 77241 }, 77242 resume () { 77243 this.paused = false; 77244 } 77245 }).current; // Takes care of trapping focus if focus is moved outside programmatically for example 77246 (0,external_React_.useEffect)(()=>{ 77247 if (trapped) { 77248 function handleFocusIn(event) { 77249 if (focusScope.paused || !container1) return; 77250 const target = event.target; 77251 if (container1.contains(target)) lastFocusedElementRef.current = target; 77252 else $d3863c46a17e8a28$var$focus(lastFocusedElementRef.current, { 77253 select: true 77254 }); 77255 } 77256 function handleFocusOut(event) { 77257 if (focusScope.paused || !container1) return; 77258 if (!container1.contains(event.relatedTarget)) $d3863c46a17e8a28$var$focus(lastFocusedElementRef.current, { 77259 select: true 77260 }); 77261 } 77262 document.addEventListener('focusin', handleFocusIn); 77263 document.addEventListener('focusout', handleFocusOut); 77264 return ()=>{ 77265 document.removeEventListener('focusin', handleFocusIn); 77266 document.removeEventListener('focusout', handleFocusOut); 77267 }; 77268 } 77269 }, [ 77270 trapped, 77271 container1, 77272 focusScope.paused 77273 ]); 77274 (0,external_React_.useEffect)(()=>{ 77275 if (container1) { 77276 $d3863c46a17e8a28$var$focusScopesStack.add(focusScope); 77277 const previouslyFocusedElement = document.activeElement; 77278 const hasFocusedCandidate = container1.contains(previouslyFocusedElement); 77279 if (!hasFocusedCandidate) { 77280 const mountEvent = new CustomEvent($d3863c46a17e8a28$var$AUTOFOCUS_ON_MOUNT, $d3863c46a17e8a28$var$EVENT_OPTIONS); 77281 container1.addEventListener($d3863c46a17e8a28$var$AUTOFOCUS_ON_MOUNT, onMountAutoFocus); 77282 container1.dispatchEvent(mountEvent); 77283 if (!mountEvent.defaultPrevented) { 77284 $d3863c46a17e8a28$var$focusFirst($d3863c46a17e8a28$var$removeLinks($d3863c46a17e8a28$var$getTabbableCandidates(container1)), { 77285 select: true 77286 }); 77287 if (document.activeElement === previouslyFocusedElement) $d3863c46a17e8a28$var$focus(container1); 77288 } 77289 } 77290 return ()=>{ 77291 container1.removeEventListener($d3863c46a17e8a28$var$AUTOFOCUS_ON_MOUNT, onMountAutoFocus); // We hit a react bug (fixed in v17) with focusing in unmount. 77292 // We need to delay the focus a little to get around it for now. 77293 // See: https://github.com/facebook/react/issues/17894 77294 setTimeout(()=>{ 77295 const unmountEvent = new CustomEvent($d3863c46a17e8a28$var$AUTOFOCUS_ON_UNMOUNT, $d3863c46a17e8a28$var$EVENT_OPTIONS); 77296 container1.addEventListener($d3863c46a17e8a28$var$AUTOFOCUS_ON_UNMOUNT, onUnmountAutoFocus); 77297 container1.dispatchEvent(unmountEvent); 77298 if (!unmountEvent.defaultPrevented) $d3863c46a17e8a28$var$focus(previouslyFocusedElement !== null && previouslyFocusedElement !== void 0 ? previouslyFocusedElement : document.body, { 77299 select: true 77300 }); 77301 // we need to remove the listener after we `dispatchEvent` 77302 container1.removeEventListener($d3863c46a17e8a28$var$AUTOFOCUS_ON_UNMOUNT, onUnmountAutoFocus); 77303 $d3863c46a17e8a28$var$focusScopesStack.remove(focusScope); 77304 }, 0); 77305 }; 77306 } 77307 }, [ 77308 container1, 77309 onMountAutoFocus, 77310 onUnmountAutoFocus, 77311 focusScope 77312 ]); // Takes care of looping focus (when tabbing whilst at the edges) 77313 const handleKeyDown = (0,external_React_.useCallback)((event)=>{ 77314 if (!loop && !trapped) return; 77315 if (focusScope.paused) return; 77316 const isTabKey = event.key === 'Tab' && !event.altKey && !event.ctrlKey && !event.metaKey; 77317 const focusedElement = document.activeElement; 77318 if (isTabKey && focusedElement) { 77319 const container = event.currentTarget; 77320 const [first, last] = $d3863c46a17e8a28$var$getTabbableEdges(container); 77321 const hasTabbableElementsInside = first && last; // we can only wrap focus if we have tabbable edges 77322 if (!hasTabbableElementsInside) { 77323 if (focusedElement === container) event.preventDefault(); 77324 } else { 77325 if (!event.shiftKey && focusedElement === last) { 77326 event.preventDefault(); 77327 if (loop) $d3863c46a17e8a28$var$focus(first, { 77328 select: true 77329 }); 77330 } else if (event.shiftKey && focusedElement === first) { 77331 event.preventDefault(); 77332 if (loop) $d3863c46a17e8a28$var$focus(last, { 77333 select: true 77334 }); 77335 } 77336 } 77337 } 77338 }, [ 77339 loop, 77340 trapped, 77341 focusScope.paused 77342 ]); 77343 return /*#__PURE__*/ (0,external_React_.createElement)(index_module_$8927f6f2acc4f386$export$250ffa63cdc0d034.div, extends_extends({ 77344 tabIndex: -1 77345 }, scopeProps, { 77346 ref: composedRefs, 77347 onKeyDown: handleKeyDown 77348 })); 77349}); 77350/*#__PURE__*/ Object.assign($d3863c46a17e8a28$export$20e40289641fbbb6, { 77351 displayName: $d3863c46a17e8a28$var$FOCUS_SCOPE_NAME 77352}); 77353/* ------------------------------------------------------------------------------------------------- 77354 * Utils 77355 * -----------------------------------------------------------------------------------------------*/ /** 77356 * Attempts focusing the first element in a list of candidates. 77357 * Stops when focus has actually moved. 77358 */ function $d3863c46a17e8a28$var$focusFirst(candidates, { select: select = false } = {}) { 77359 const previouslyFocusedElement = document.activeElement; 77360 for (const candidate of candidates){ 77361 $d3863c46a17e8a28$var$focus(candidate, { 77362 select: select 77363 }); 77364 if (document.activeElement !== previouslyFocusedElement) return; 77365 } 77366} 77367/** 77368 * Returns the first and last tabbable elements inside a container. 77369 */ function $d3863c46a17e8a28$var$getTabbableEdges(container) { 77370 const candidates = $d3863c46a17e8a28$var$getTabbableCandidates(container); 77371 const first = $d3863c46a17e8a28$var$findVisible(candidates, container); 77372 const last = $d3863c46a17e8a28$var$findVisible(candidates.reverse(), container); 77373 return [ 77374 first, 77375 last 77376 ]; 77377} 77378/** 77379 * Returns a list of potential tabbable candidates. 77380 * 77381 * NOTE: This is only a close approximation. For example it doesn't take into account cases like when 77382 * elements are not visible. This cannot be worked out easily by just reading a property, but rather 77383 * necessitate runtime knowledge (computed styles, etc). We deal with these cases separately. 77384 * 77385 * See: https://developer.mozilla.org/en-US/docs/Web/API/TreeWalker 77386 * Credit: https://github.com/discord/focus-layers/blob/master/src/util/wrapFocus.tsx#L1 77387 */ function $d3863c46a17e8a28$var$getTabbableCandidates(container) { 77388 const nodes = []; 77389 const walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, { 77390 acceptNode: (node)=>{ 77391 const isHiddenInput = node.tagName === 'INPUT' && node.type === 'hidden'; 77392 if (node.disabled || node.hidden || isHiddenInput) return NodeFilter.FILTER_SKIP; // `.tabIndex` is not the same as the `tabindex` attribute. It works on the 77393 // runtime's understanding of tabbability, so this automatically accounts 77394 // for any kind of element that could be tabbed to. 77395 return node.tabIndex >= 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP; 77396 } 77397 }); 77398 while(walker.nextNode())nodes.push(walker.currentNode); // we do not take into account the order of nodes with positive `tabIndex` as it 77399 // hinders accessibility to have tab order different from visual order. 77400 return nodes; 77401} 77402/** 77403 * Returns the first visible element in a list. 77404 * NOTE: Only checks visibility up to the `container`. 77405 */ function $d3863c46a17e8a28$var$findVisible(elements, container) { 77406 for (const element of elements){ 77407 // we stop checking if it's hidden at the `container` level (excluding) 77408 if (!$d3863c46a17e8a28$var$isHidden(element, { 77409 upTo: container 77410 })) return element; 77411 } 77412} 77413function $d3863c46a17e8a28$var$isHidden(node, { upTo: upTo }) { 77414 if (getComputedStyle(node).visibility === 'hidden') return true; 77415 while(node){ 77416 // we stop at `upTo` (excluding it) 77417 if (upTo !== undefined && node === upTo) return false;
77418 if (getComputedStyle(node).display === 'none') return true; 77419 node = node.parentElement; 77420 } 77421 return false; 77422} 77423function $d3863c46a17e8a28$var$isSelectableInput(element) { 77424 return element instanceof HTMLInputElement && 'select' in element; 77425} 77426function $d3863c46a17e8a28$var$focus(element, { select: select = false } = {}) { 77427 // only focus if that element is focusable 77428 if (element && element.focus) { 77429 const previouslyFocusedElement = document.activeElement; // NOTE: we prevent scrolling on focus, to minimize jarring transitions for users 77430 element.focus({ 77431 preventScroll: true 77432 }); // only select if its not the same element, it supports selection and we need to select 77433 if (element !== previouslyFocusedElement && $d3863c46a17e8a28$var$isSelectableInput(element) && select) element.select(); 77434 } 77435} 77436/* ------------------------------------------------------------------------------------------------- 77437 * FocusScope stack 77438 * -----------------------------------------------------------------------------------------------*/ const $d3863c46a17e8a28$var$focusScopesStack = $d3863c46a17e8a28$var$createFocusScopesStack(); 77439function $d3863c46a17e8a28$var$createFocusScopesStack() { 77440 /** A stack of focus scopes, with the active one at the top */ let stack = []; 77441 return { 77442 add (focusScope) { 77443 // pause the currently active focus scope (at the top of the stack) 77444 const activeFocusScope = stack[0]; 77445 if (focusScope !== activeFocusScope) activeFocusScope === null || activeFocusScope === void 0 || activeFocusScope.pause(); 77446 // remove in case it already exists (because we'll re-add it at the top of the stack) 77447 stack = $d3863c46a17e8a28$var$arrayRemove(stack, focusScope); 77448 stack.unshift(focusScope); 77449 }, 77450 remove (focusScope) { 77451 var _stack$; 77452 stack = $d3863c46a17e8a28$var$arrayRemove(stack, focusScope); 77453 (_stack$ = stack[0]) === null || _stack$ === void 0 || _stack$.resume(); 77454 } 77455 }; 77456} 77457function $d3863c46a17e8a28$var$arrayRemove(array, item) { 77458 const updatedArray = [ 77459 ...array 77460 ]; 77461 const index = updatedArray.indexOf(item); 77462 if (index !== -1) updatedArray.splice(index, 1); 77463 return updatedArray; 77464} 77465function $d3863c46a17e8a28$var$removeLinks(items) { 77466 return items.filter((item)=>item.tagName !== 'A' 77467 ); 77468} 77469const $d3863c46a17e8a28$export$be92b6f5f03c0fe9 = (/* unused pure expression or super */ null && ($d3863c46a17e8a28$export$20e40289641fbbb6)); 77470 77471 77472 77473 77474 77475 77476;// CONCATENATED MODULE: ./node_modules/@radix-ui/react-use-layout-effect/dist/index.module.js 77477 77478 77479 77480/** 77481 * On the server, React emits a warning when calling `useLayoutEffect`. 77482 * This is because neither `useLayoutEffect` nor `useEffect` run on the server. 77483 * We use this safe version which suppresses the warning by replacing it with a noop on the server. 77484 * 77485 * See: https://reactjs.org/docs/hooks-reference.html#uselayouteffect 77486 */ const $9f79659886946c16$export$e5c5a5f917a5871c = Boolean(globalThis === null || globalThis === void 0 ? void 0 : globalThis.document) ? external_React_.useLayoutEffect : ()=>{}; 77487 77488 77489 77490 77491 77492 77493;// CONCATENATED MODULE: ./node_modules/@radix-ui/react-id/dist/index.module.js 77494 77495 77496 77497 77498 77499const $1746a345f3d73bb7$var$useReactId = external_React_['useId'.toString()] || (()=>undefined 77500); 77501let $1746a345f3d73bb7$var$count = 0; 77502function $1746a345f3d73bb7$export$f680877a34711e37(deterministicId) { 77503 const [id, setId] = external_React_.useState($1746a345f3d73bb7$var$useReactId()); // React versions older than 18 will have client-side ids only. 77504 $9f79659886946c16$export$e5c5a5f917a5871c(()=>{ 77505 if (!deterministicId) setId((reactId)=>reactId !== null && reactId !== void 0 ? reactId : String($1746a345f3d73bb7$var$count++) 77506 ); 77507 }, [ 77508 deterministicId 77509 ]); 77510 return deterministicId || (id ? `radix-${id}` : ''); 77511} 77512 77513 77514 77515 77516 77517 77518;// CONCATENATED MODULE: ./node_modules/@radix-ui/react-popper/node_modules/@floating-ui/core/dist/floating-ui.core.browser.min.mjs 77519function floating_ui_core_browser_min_t(t){return t.split("-")[0]}function floating_ui_core_browser_min_e(t){return t.split("-")[1]}function floating_ui_core_browser_min_n(e){return["top","bottom"].includes(floating_ui_core_browser_min_t(e))?"x":"y"}function floating_ui_core_browser_min_r(t){return"y"===t?"height":"width"}function floating_ui_core_browser_min_i(i,o,a){let{reference:l,floating:s}=i;const c=l.x+l.width/2-s.width/2,f=l.y+l.height/2-s.height/2,u=floating_ui_core_browser_min_n(o),m=floating_ui_core_browser_min_r(u),g=l[m]/2-s[m]/2,d="x"===u;let p;switch(floating_ui_core_browser_min_t(o)){case"top":p={x:c,y:l.y-s.height};break;case"bottom":p={x:c,y:l.y+l.height};break;case"right":p={x:l.x+l.width,y:f};break;case"left":p={x:l.x-s.width,y:f};break;default:p={x:l.x,y:l.y}}switch(floating_ui_core_browser_min_e(o)){case"start":p[u]-=g*(a&&d?-1:1);break;case"end":p[u]+=g*(a&&d?-1:1)}return p}const floating_ui_core_browser_min_o=async(t,e,n)=>{const{placement:r="bottom",strategy:o="absolute",middleware:a=[],platform:l}=n,s=await(null==l.isRTL?void 0:l.isRTL(e));let c=await l.getElementRects({reference:t,floating:e,strategy:o}),{x:f,y:u}=floating_ui_core_browser_min_i(c,r,s),m=r,g={},d=0;for(let n=0;n<a.length;n++){const{name:p,fn:h}=a[n],{x:y,y:x,data:w,reset:v}=await h({x:f,y:u,initialPlacement:r,placement:m,strategy:o,middlewareData:g,rects:c,platform:l,elements:{reference:t,floating:e}});f=null!=y?y:f,u=null!=x?x:u,g={...g,[p]:{...g[p],...w}},v&&d<=50&&(d++,"object"==typeof v&&(v.placement&&(m=v.placement),v.rects&&(c=!0===v.rects?await l.getElementRects({reference:t,floating:e,strategy:o}):v.rects),({x:f,y:u}=floating_ui_core_browser_min_i(c,m,s))),n=-1)}return{x:f,y:u,placement:m,strategy:o,middlewareData:g}};function floating_ui_core_browser_min_a(t){return"number"!=typeof t?function(t){return{top:0,right:0,bottom:0,left:0,...t}}(t):{top:t,right:t,bottom:t,left:t}}function floating_ui_core_browser_min_l(t){return{...t,top:t.y,left:t.x,right:t.x+t.width,bottom:t.y+t.height}}async function floating_ui_core_browser_min_s(t,e){var n;void 0===e&&(e={});const{x:r,y:i,platform:o,rects:s,elements:c,strategy:f}=t,{boundary:u="clippingAncestors",rootBoundary:m="viewport",elementContext:g="floating",altBoundary:d=!1,padding:p=0}=e,h=floating_ui_core_browser_min_a(p),y=c[d?"floating"===g?"reference":"floating":g],x=floating_ui_core_browser_min_l(await o.getClippingRect
vendor: 10,688 bytes, line 77519
77519({element:null==(n=await(null==o.isElement?void 0:o.isElement(y)))||n?y:y.contextElement||await(null==o.getDocumentElement?void 0:o.getDocumentElement(c.floating)),boundary:u,rootBoundary:m,strategy:f})),w=floating_ui_core_browser_min_l(o.convertOffsetParentRelativeRectToViewportRelativeRect?await o.convertOffsetParentRelativeRectToViewportRelativeRect({rect:"floating"===g?{...s.floating,x:r,y:i}:s.reference,offsetParent:await(null==o.getOffsetParent?void 0:o.getOffsetParent(c.floating)),strategy:f}):s[g]);return{top:x.top-w.top+h.top,bottom:w.bottom-x.bottom+h.bottom,left:x.left-w.left+h.left,right:w.right-x.right+h.right}}const floating_ui_core_browser_min_c=Math.min,floating_ui_core_browser_min_f=Math.max;function floating_ui_core_browser_min_u(t,e,n){return floating_ui_core_browser_min_f(t,floating_ui_core_browser_min_c(e,n))}const floating_ui_core_browser_min_m=t=>({name:"arrow",options:t,async fn(i){const{element:o,padding:l=0}=null!=t?t:{},{x:s,y:c,placement:f,rects:m,platform:g}=i;if(null==o)return{};const d=floating_ui_core_browser_min_a(l),p={x:s,y:c},h=floating_ui_core_browser_min_n(f),y=floating_ui_core_browser_min_e(f),x=floating_ui_core_browser_min_r(h),w=await g.getDimensions(o),v="y"===h?"top":"left",b="y"===h?"bottom":"right",R=m.reference[x]+m.reference[h]-p[h]-m.floating[x],A=p[h]-m.reference[h],P=await(null==g.getOffsetParent?void 0:g.getOffsetParent(o));let T=P?"y"===h?P.clientHeight||0:P.clientWidth||0:0;0===T&&(T=m.floating[x]);const O=R/2-A/2,D=d[v],L=T-w[x]-d[b],k=T/2-w[x]/2+O,E=floating_ui_core_browser_min_u(D,k,L),C=("start"===y?d[v]:d[b])>0&&k!==E&&m.reference[x]<=m.floating[x];return{[h]:p[h]-(C?k<D?D-k:L-k:0),data:{[h]:E,centerOffset:k-E}}}}),floating_ui_core_browser_min_g={left:"right",right:"left",bottom:"top",top:"bottom"};function floating_ui_core_browser_min_d(t){return t.replace(/left|right|bottom|top/g,(t=>floating_ui_core_browser_min_g[t]))}function floating_ui_core_browser_min_p(t,i,o){void 0===o&&(o=!1);const a=floating_ui_core_browser_min_e(t),l=floating_ui_core_browser_min_n(t),s=floating_ui_core_browser_min_r(l);let c="x"===l?a===(o?"end":"start")?"right":"left":"start"===a?"bottom":"top";return i.reference[s]>i.floating[s]&&(c=floating_ui_core_browser_min_d(c)),{main:c,cross:floating_ui_core_browser_min_d(c)}}const floating_ui_core_browser_min_h={start:"end",end:"start"};function floating_ui_core_browser_min_y(t){return t.replace(/start|end/g,(t=>floating_ui_core_browser_min_h[t]))}const floating_ui_core_browser_min_x=["top","right","bottom","left"],floating_ui_core_browser_min_w=floating_ui_core_browser_min_x.reduce(((t,e)=>t.concat(e,e+"-start",e+"-end")),[]);const floating_ui_core_browser_min_v=function(n){return void 0===n&&(n={}),{name:"autoPlacement",options:n,async fn(r){var i,o,a,l,c;const{x:f,y:u,rects:m,middlewareData:g,placement:d,platform:h,elements:x}=r,{alignment:v=null,allowedPlacements:b=floating_ui_core_browser_min_w,autoAlignment:R=!0,...A}=n,P=function(n,r,i){return(n?[...i.filter((t=>floating_ui_core_browser_min_e(t)===n)),...i.filter((t=>floating_ui_core_browser_min_e(t)!==n))]:i.filter((e=>floating_ui_core_browser_min_t(e)===e))).filter((t=>!n||floating_ui_core_browser_min_e(t)===n||!!r&&floating_ui_core_browser_min_y(t)!==t))}(v,R,b),T=await floating_ui_core_browser_min_s(r,A),O=null!=(i=null==(o=g.autoPlacement)?void 0:o.index)?i:0,D=P[O];if(null==D)return{};const{main:L,cross:k}=floating_ui_core_browser_min_p(D,m,await(null==h.isRTL?void 0:h.isRTL(x.floating)));if(d!==D)return{x:f,y:u,reset:{placement:P[0]}};const E=[T[floating_ui_core_browser_min_t(D)],T[L],T[k]],C=[...null!=(a=null==(l=g.autoPlacement)?void 0:l.overflows)?a:[],{placement:D,overflows:E}],H=P[O+1];if(H)return{data:{index:O+1,overflows:C},reset:{placement:H}};const B=C.slice().sort(((t,e)=>t.overflows[0]-e.overflows[0])),V=null==(c=B.find((t=>{let{overflows:e}=t;return e.every((t=>t<=0))})))?void 0:c.placement,F=null!=V?V:B[0].placement;return F!==d?{data:{index:O+1,overflows:C},reset:{placement:F}}:{}}}};const floating_ui_core_browser_min_b=function(e){return void 0===e&&(e={}),{name:"flip",options:e,async fn(n){var r;const{placement:i,middlewareData:o,rects:a,initialPlacement:l,platform:c,elements:f}=n,{mainAxis:u=!0,crossAxis:m=!0,fallbackPlacements:g,fallbackStrategy:h="bestFit",flipAlignment:x=!0,...w}=e,v=floating_ui_core_browser_min_t(i),b=g||(v===l||!x?[floating_ui_core_browser_min_d(l)]:function(t){const e=floating_ui_core_browser_min_d(t);return[floating_ui_core_browser_min_y(t),e,floating_ui_core_browser_min_y(e)]}(l)),R=[l,...b],A=await floating_ui_core_browser_min_s(n,w),P=[];let T=(null==(r=o.flip)?void 0:r.overflows)||[];if(u&&P.push(A[v]),m){const{main:t,cross:e}=floating_ui_core_browser_min_p(i,a,await(null==c.isRTL?void 0:c.isRTL(f.floating)));P.push(A[t],A[e])}if(T=[...T,{placement:i,overflows:P}],!P.every((t=>t<=0))){var O,D;const t=(null!=(O=null==(D=o.flip)?void 0:D.index)?O:0)+1,e=R[t];if(e)return{data:{index:t,overflows:T},reset:{placement:e}};let n="bottom";switch(h){case"bestFit":{var L;const t=null==(L=T.map((t=>[t,t.overflows.filter((t=>t>0)).reduce(((t,e)=>t+e),0)])).sort(((t,e)=>t[1]-e[1]))[0])?void 0:L[0].placement;t&&(n=t);break}case"initialPlacement":n=l}if(i!==n)return{reset:{placement:n}}}return{}}}};function floating_ui_core_browser_min_R(t,e){return{top:t.top-e.height,right:t.right-e.width,bottom:t.bottom-e.height,left:t.left-e.width}}function floating_ui_core_browser_min_A(t){return floating_ui_core_browser_min_x.some((e=>t[e]>=0))}const floating_ui_core_browser_min_P=function(t){let{strategy:e="referenceHidden",...n}=void 0===t?{}:t;return{name:"hide",async fn(t){const{rects:r}=t;switch(e){case"referenceHidden":{const e=floating_ui_core_browser_min_R(await floating_ui_core_browser_min_s(t,{...n,elementContext:"reference"}),r.reference);return{data:{referenceHiddenOffsets:e,referenceHidden:floating_ui_core_browser_min_A(e)}}}case"escaped":{const e=floating_ui_core_browser_min_R(await floating_ui_core_browser_min_s(t,{...n,altBoundary:!0}),r.floating);return{data:{escapedOffsets:e,escaped:floating_ui_core_browser_min_A(e)}}}default:return{}}}}};const floating_ui_core_browser_min_T=function(r){return void 0===r&&(r=0),{name:"offset",options:r,async fn(i){const{x:o,y:a}=i,l=await async function(r,i){const{placement:o,platform:a,elements:l}=r,s=await(null==a.isRTL?void 0:a.isRTL(l.floating)),c=floating_ui_core_browser_min_t(o),f=floating_ui_core_browser_min_e(o),u="x"===floating_ui_core_browser_min_n(o),m=["left","top"].includes(c)?-1:1,g=s&&u?-1:1,d="function"==typeof i?i(r):i;let{mainAxis:p,crossAxis:h,alignmentAxis:y}="number"==typeof d?{mainAxis:d,crossAxis:0,alignmentAxis:null}:{mainAxis:0,crossAxis:0,alignmentAxis:null,...d};return f&&"number"==typeof y&&(h="end"===f?-1*y:y),u?{x:h*g,y:p*m}:{x:p*m,y:h*g}}(i,r);return{x:o+l.x,y:a+l.y,data:l}}}};function floating_ui_core_browser_min_O(t){return"x"===t?"y":"x"}const floating_ui_core_browser_min_D=function(e){return void 0===e&&(e={}),{name:"shift",options:e,async fn(r){const{x:i,y:o,placement:a}=r,{mainAxis:l=!0,crossAxis:c=!1,limiter:f={fn:t=>{let{x:e,y:n}=t;return{x:e,y:n}}},...m}=e,g={x:i,y:o},d=await floating_ui_core_browser_min_s(r,m),p=floating_ui_core_browser_min_n(floating_ui_core_browser_min_t(a)),h=floating_ui_core_browser_min_O(p);let y=g[p],x=g[h];if(l){const t="y"===p?"bottom":"right";y=floating_ui_core_browser_min_u(y+d["y"===p?"top":"left"],y,y-d[t])}if(c){const t="y"===h?"bottom":"right";x=floating_ui_core_browser_min_u(x+d["y"===h?"top":"left"],x,x-d[t])}const w=f.fn({...r,[p]:y,[h]:x});return{...w,data:{x:w.x-i,y:w.y-o}}}}},floating_ui_core_browser_min_L=function(e){return void 0===e&&(e={}),{options:e,fn(r){const{x:i,y:o,placement:a,rects:l,middlewareData:s}=r,{offset:c=0,mainAxis:f=!0,crossAxis:u=!0}=e,m={x:i,y:o},g=floating_ui_core_browser_min_n(a),d=floating_ui_core_browser_min_O(g);let p=m[g],h=m[d];const y="function"==typeof c?c({...l,placement:a}):c,x="number"==typeof y?{mainAxis:y,crossAxis:0}:{mainAxis:0,crossAxis:0,...y};if(f){const t="y"===g?"height":"width",e=l.reference[g]-l.floating[t]+x.mainAxis,n=l.reference[g]+l.reference[t]-x.mainAxis;p<e?p=e:p>n&&(p=n)}if(u){var w,v,b,R;const e="y"===g?"width":"height",n=["top","left"].includes(floating_ui_core_browser_min_t(a)),r=l.reference[d]-l.floating[e]+(n&&null!=(w=null==(v=s.offset)?void 0:v[d])?w:0)+(n?0:x.crossAxis),i=l.reference[d]+l.reference[e]+(n?0:null!=(b=null==(R=s.offset)?void 0:R[d])?b:0)-(n?x.crossAxis:0);h<r?h=r:h>i&&(h=i)}return{[g]:p,[d]:h}}}},floating_ui_core_browser_min_k=function(n){return void 0===n&&(n={}),{name:"size",options:n,async fn(r){const{placement:i,rects:o,platform:a,elements:l}=r,{apply:c,...u}=n,m=await floating_ui_core_browser_min_s(r,u),g=floating_ui_core_browser_min_t(i),d=floating_ui_core_browser_min_e(i);let p,h;"top"===g||"bottom"===g?(p=g,h=d===(await(null==a.isRTL?void 0:a.isRTL(l.floating))?"start":"end")?"left":"right"):(h=g,p="end"===d?"top":"bottom");const y=floating_ui_core_browser_min_f(m.left,0),x=floating_ui_core_browser_min_f(m.right,0),w=floating_ui_core_browser_min_f(m.top,0),v=floating_ui_core_browser_min_f(m.bottom,0),b={availableHeight:o.floating.height-(["left","right"].includes(i)?2*(0!==w||0!==v?w+v:floating_ui_core_browser_min_f(m.top,m.bottom)):m[p]),availableWidth:o.floating.width-(["top","bottom"].includes(i)?2*(0!==y||0!==x?y+x:floating_ui_core_browser_min_f(m.left,m.right)):m[h])},R=await a.getDimensions(l.floating);null==c||c({...r,...b});const A=await a.getDimensions(l.floating);return R.width!==A.width||R.height!==A.height?{reset:{rects:!0}}:{}}}},floating_ui_core_browser_min_E=function(e){return void 0===e&&(e={}),{name:"inline",options:e,async fn(r){var i;const{placement:o,elements:s,rects:u,platform:m,strategy:g}=r,{padding:d=2,x:p,y:h}=e,y=floating_ui_core_browser_min_l(m.convertOffsetParentRelativeRectToViewportRelativeRect?await m.convertOffsetParentRelativeRectToViewportRelativeRect({rect:u.reference,offsetParent:await(null==m.getOffsetParent?void 0:m.getOffsetParent(s.floating)),strategy:g}):u.reference),x=null!=(i=await(null==m.getClientRects?void 0:m.getClientRects(s.reference)))?i:[],w=floating_ui_core_browser_min_a(d);const v=await m.getElementRects({reference:{getBoundingClientRect:function(){var e;if(2===x.length&&x[0].left>x[1].right&&null!=p&&null!=h)return null!=(e=x.find((t=>p>t.left-w.left&&p<t.right+w.right&&h>t.top-w.top&&h<t.bottom+w.bottom)))?e:y;if(x.length>=2){if("x"===floating_ui_core_browser_min_n(o)){const e=x[0],n=x[x.length-1],r="top"===floating_ui_core_browser_min_t(o),i=e.top,a=n.bottom,l=r?e.left:n.left,s=r?e.right:n.right;return{top:i,bottom:a,left:l,right:s,width:s-l,height:a-i,x:l,y:i}}
vendor: 6,298 bytes, lines 77519-77522
77519const e="left"===floating_ui_core_browser_min_t(o),r=floating_ui_core_browser_min_f(...x.map((t=>t.right))),i=floating_ui_core_browser_min_c(...x.map((t=>t.left))),a=x.filter((t=>e?t.left===i:t.right===r)),l=a[0].top,s=a[a.length-1].bottom;return{top:l,bottom:s,left:i,right:r,width:r-i,height:s-l,x:i,y:l}}return y}},floating:s.floating,strategy:g});return u.reference.x!==v.reference.x||u.reference.y!==v.reference.y||u.reference.width!==v.reference.width||u.reference.height!==v.reference.height?{reset:{rects:v}}:{}}}}; 77520 77521;// CONCATENATED MODULE: ./node_modules/@radix-ui/react-popper/node_modules/@floating-ui/dom/dist/floating-ui.dom.browser.min.mjs 77522function floating_ui_dom_browser_min_n(t){return t&&t.document&&t.location&&t.alert&&t.setInterval}function floating_ui_dom_browser_min_o(t){if(null==t)return window;if(!floating_ui_dom_browser_min_n(t)){const e=t.ownerDocument;return e&&e.defaultView||window}return t}function floating_ui_dom_browser_min_i(t){return floating_ui_dom_browser_min_o(t).getComputedStyle(t)}function floating_ui_dom_browser_min_r(t){return floating_ui_dom_browser_min_n(t)?"":t?(t.nodeName||"").toLowerCase():""}function floating_ui_dom_browser_min_l(){const t=navigator.userAgentData;return null!=t&&t.brands?t.brands.map((t=>t.brand+"/"+t.version)).join(" "):navigator.userAgent}function floating_ui_dom_browser_min_c(t){return t instanceof floating_ui_dom_browser_min_o(t).HTMLElement}function floating_ui_dom_browser_min_f(t){return t instanceof floating_ui_dom_browser_min_o(t).Element}function floating_ui_dom_browser_min_s(t){if("undefined"==typeof ShadowRoot)return!1;return t instanceof floating_ui_dom_browser_min_o(t).ShadowRoot||t instanceof ShadowRoot}function floating_ui_dom_browser_min_u(t){const{overflow:e,overflowX:n,overflowY:o}=floating_ui_dom_browser_min_i(t);return/auto|scroll|overlay|hidden/.test(e+o+n)}function floating_ui_dom_browser_min_d(t){return["table","td","th"].includes(floating_ui_dom_browser_min_r(t))}function floating_ui_dom_browser_min_h(t){const e=/firefox/i.test(floating_ui_dom_browser_min_l()),n=floating_ui_dom_browser_min_i(t);return"none"!==n.transform||"none"!==n.perspective||"paint"===n.contain||["transform","perspective"].includes(n.willChange)||e&&"filter"===n.willChange||e&&!!n.filter&&"none"!==n.filter}function floating_ui_dom_browser_min_a(){return!/^((?!chrome|android).)*safari/i.test(floating_ui_dom_browser_min_l())}const floating_ui_dom_browser_min_g=Math.min,floating_ui_dom_browser_min_p=Math.max,floating_ui_dom_browser_min_m=Math.round;function floating_ui_dom_browser_min_w(t,e,n){var i,r,l,s;void 0===e&&(e=!1),void 0===n&&(n=!1);const u=t.getBoundingClientRect();let d=1,h=1;e&&floating_ui_dom_browser_min_c(t)&&(d=t.offsetWidth>0&&floating_ui_dom_browser_min_m(u.width)/t.offsetWidth||1,h=t.offsetHeight>0&&floating_ui_dom_browser_min_m(u.height)/t.offsetHeight||1);const g=floating_ui_dom_browser_min_f(t)?floating_ui_dom_browser_min_o(t):window,p=!floating_ui_dom_browser_min_a()&&n,w=(u.left+(p&&null!=(i=null==(r=g.visualViewport)?void 0:r.offsetLeft)?i:0))/d,v=(u.top+(p&&null!=(l=null==(s=g.visualViewport)?void 0:s.offsetTop)?l:0))/h,y=u.width/d,x=u.height/h;return{width:y,height:x,top:v,right:w+y,bottom:v+x,left:w,x:w,y:v}}function floating_ui_dom_browser_min_v(t){return(e=t,(e instanceof floating_ui_dom_browser_min_o(e).Node?t.ownerDocument:t.document)||window.document).documentElement;var e}function floating_ui_dom_browser_min_y(t){return floating_ui_dom_browser_min_f(t)?{scrollLeft:t.scrollLeft,scrollTop:t.scrollTop}:{scrollLeft:t.pageXOffset,scrollTop:t.pageYOffset}}function floating_ui_dom_browser_min_x(t){return floating_ui_dom_browser_min_w(floating_ui_dom_browser_min_v(t)).left+floating_ui_dom_browser_min_y(t).scrollLeft}function floating_ui_dom_browser_min_b(t,e,n){const o=floating_ui_dom_browser_min_c(e),i=floating_ui_dom_browser_min_v(e),l=floating_ui_dom_browser_min_w(t,o&&function(t){const e=floating_ui_dom_browser_min_w(t);return floating_ui_dom_browser_min_m(e.width)!==t.offsetWidth||floating_ui_dom_browser_min_m(e.height)!==t.offsetHeight}(e),"fixed"===n);let f={scrollLeft:0,scrollTop:0};const s={x:0,y:0};if(o||!o&&"fixed"!==n)if(("body"!==floating_ui_dom_browser_min_r(e)||floating_ui_dom_browser_min_u(i))&&(f=floating_ui_dom_browser_min_y(e)),floating_ui_dom_browser_min_c(e)){const t=floating_ui_dom_browser_min_w(e,!0);s.x=t.x+e.clientLeft,s.y=t.y+e.clientTop}else i&&(s.x=floating_ui_dom_browser_min_x(i));return{x:l.left+f.scrollLeft-s.x,y:l.top+f.scrollTop-s.y,width:l.width,height:l.height}}function floating_ui_dom_browser_min_L(t){return"html"===floating_ui_dom_browser_min_r(t)?t:t.assignedSlot||t.parentNode||(floating_ui_dom_browser_min_s(t)?t.host:null)||floating_ui_dom_browser_min_v(t)}function floating_ui_dom_browser_min_R(t){return floating_ui_dom_browser_min_c(t)&&"fixed"!==getComputedStyle(t).position?t.offsetParent:null}function floating_ui_dom_browser_min_T(t){const e=floating_ui_dom_browser_min_o(t);let n=floating_ui_dom_browser_min_R(t);for(;n&&floating_ui_dom_browser_min_d(n)&&"static"===getComputedStyle(n).position;)n=floating_ui_dom_browser_min_R(n);return n&&("html"===floating_ui_dom_browser_min_r(n)||"body"===floating_ui_dom_browser_min_r(n)&&"static"===getComputedStyle(n).position&&!floating_ui_dom_browser_min_h(n))?e:n||function(t){let e=floating_ui_dom_browser_min_L(t);for(floating_ui_dom_browser_min_s(e)&&(e=e.host);floating_ui_dom_browser_min_c(e)&&!["html","body"].includes(floating_ui_dom_browser_min_r(e));){if(floating_ui_dom_browser_min_h(e))return e;e=e.parentNode}return null}(t)||e}function floating_ui_dom_browser_min_W(t){if(floating_ui_dom_browser_min_c(t))return{width:t.offsetWidth,height:t.offsetHeight};const e=floating_ui_dom_browser_min_w(t);return{width:e.width,height:e.height}}function floating_ui_dom_browser_min_E(t){const e=floating_ui_dom_browser_min_L(t);return["html","body","#document"].includes(floating_ui_dom_browser_min_r(e))?t.ownerDocument.body:floating_ui_dom_browser_min_c(e)&&floating_ui_dom_browser_min_u(e)?e:floating_ui_dom_browser_min_E(e)}function floating_ui_dom_browser_min_H(t,e){var n;void 0===e&&(e=[]);const i=floating_ui_dom_browser_min_E(t),r=i===(null==(n=t.ownerDocument)?void 0:n.body),l=floating_ui_dom_browser_min_o(i),c=r?[l].concat(l.visualVie
vendor: 5,221 bytes, lines 77522-77541
77522wport||[],floating_ui_dom_browser_min_u(i)?i:[]):i,f=e.concat(c);return r?f:f.concat(floating_ui_dom_browser_min_H(c))}function floating_ui_dom_browser_min_C(e,n,r){return"viewport"===n?floating_ui_core_browser_min_l(function(t,e){const n=floating_ui_dom_browser_min_o(t),i=floating_ui_dom_browser_min_v(t),r=n.visualViewport;let l=i.clientWidth,c=i.clientHeight,f=0,s=0;if(r){l=r.width,c=r.height;const t=floating_ui_dom_browser_min_a();(t||!t&&"fixed"===e)&&(f=r.offsetLeft,s=r.offsetTop)}return{width:l,height:c,x:f,y:s}}(e,r)):floating_ui_dom_browser_min_f(n)?function(t,e){const n=floating_ui_dom_browser_min_w(t,!1,"fixed"===e),o=n.top+t.clientTop,i=n.left+t.clientLeft;return{top:o,left:i,x:i,y:o,right:i+t.clientWidth,bottom:o+t.clientHeight,width:t.clientWidth,height:t.clientHeight}}(n,r):floating_ui_core_browser_min_l(function(t){var e;const n=floating_ui_dom_browser_min_v(t),o=floating_ui_dom_browser_min_y(t),r=null==(e=t.ownerDocument)?void 0:e.body,l=floating_ui_dom_browser_min_p(n.scrollWidth,n.clientWidth,r?r.scrollWidth:0,r?r.clientWidth:0),c=floating_ui_dom_browser_min_p(n.scrollHeight,n.clientHeight,r?r.scrollHeight:0,r?r.clientHeight:0);let f=-o.scrollLeft+floating_ui_dom_browser_min_x(t);const s=-o.scrollTop;return"rtl"===floating_ui_dom_browser_min_i(r||n).direction&&(f+=floating_ui_dom_browser_min_p(n.clientWidth,r?r.clientWidth:0)-l),{width:l,height:c,x:f,y:s}}(floating_ui_dom_browser_min_v(e)))}function floating_ui_dom_browser_min_S(t){const e=floating_ui_dom_browser_min_H(t),n=["absolute","fixed"].includes(floating_ui_dom_browser_min_i(t).position)&&floating_ui_dom_browser_min_c(t)?floating_ui_dom_browser_min_T(t):t;return floating_ui_dom_browser_min_f(n)?e.filter((t=>floating_ui_dom_browser_min_f(t)&&function(t,e){const n=null==e.getRootNode?void 0:e.getRootNode();if(t.contains(e))return!0;if(n&&floating_ui_dom_browser_min_s(n)){let n=e;do{if(n&&t===n)return!0;n=n.parentNode||n.host}while(n)}return!1}(t,n)&&"body"!==floating_ui_dom_browser_min_r(t))):[]}const floating_ui_dom_browser_min_D={getClippingRect:function(t){let{element:e,boundary:n,rootBoundary:o,strategy:i}=t;const r=[..."clippingAncestors"===n?floating_ui_dom_browser_min_S(e):[].concat(n),o],l=r[0],c=r.reduce(((t,n)=>{const o=floating_ui_dom_browser_min_C(e,n,i);return t.top=floating_ui_dom_browser_min_p(o.top,t.top),t.right=floating_ui_dom_browser_min_g(o.right,t.right),t.bottom=floating_ui_dom_browser_min_g(o.bottom,t.bottom),t.left=floating_ui_dom_browser_min_p(o.left,t.left),t}),floating_ui_dom_browser_min_C(e,l,i));return{width:c.right-c.left,height:c.bottom-c.top,x:c.left,y:c.top}},convertOffsetParentRelativeRectToViewportRelativeRect:function(t){let{rect:e,offsetParent:n,strategy:o}=t;const i=floating_ui_dom_browser_min_c(n),l=floating_ui_dom_browser_min_v(n);if(n===l)return e;let f={scrollLeft:0,scrollTop:0};const s={x:0,y:0};if((i||!i&&"fixed"!==o)&&(("body"!==floating_ui_dom_browser_min_r(n)||floating_ui_dom_browser_min_u(l))&&(f=floating_ui_dom_browser_min_y(n)),floating_ui_dom_browser_min_c(n))){const t=floating_ui_dom_browser_min_w(n,!0);s.x=t.x+n.clientLeft,s.y=t.y+n.clientTop}return{...e,x:e.x-f.scrollLeft+s.x,y:e.y-f.scrollTop+s.y}},isElement:floating_ui_dom_browser_min_f,getDimensions:floating_ui_dom_browser_min_W,getOffsetParent:floating_ui_dom_browser_min_T,getDocumentElement:floating_ui_dom_browser_min_v,getElementRects:t=>{let{reference:e,floating:n,strategy:o}=t;return{reference:floating_ui_dom_browser_min_b(e,floating_ui_dom_browser_min_T(n),o),floating:{...floating_ui_dom_browser_min_W(n),x:0,y:0}}},getClientRects:t=>Array.from(t.getClientRects()),isRTL:t=>"rtl"===floating_ui_dom_browser_min_i(t).direction};function floating_ui_dom_browser_min_N(t,e,n,o){void 0===o&&(o={});const{ancestorScroll:i=!0,ancestorResize:r=!0,elementResize:l=!0,animationFrame:c=!1}=o,s=i&&!c,u=r&&!c,d=s||u?[...floating_ui_dom_browser_min_f(t)?floating_ui_dom_browser_min_H(t):[],...floating_ui_dom_browser_min_H(e)]:[];d.forEach((t=>{s&&t.addEventListener("scroll",n,{passive:!0}),u&&t.addEventListener("resize",n)}));let h,a=null;if(l){let o=!0;a=new ResizeObserver((()=>{o||n(),o=!1})),floating_ui_dom_browser_min_f(t)&&!c&&a.observe(t),a.observe(e)}let g=c?floating_ui_dom_browser_min_w(t):null;return c&&function e(){const o=floating_ui_dom_browser_min_w(t);!g||o.x===g.x&&o.y===g.y&&o.width===g.width&&o.height===g.height||n();g=o,h=requestAnimationFrame(e)}(),n(),()=>{var t;d.forEach((t=>{s&&t.removeEventListener("scroll",n),u&&t.removeEventListener("resize",n)})),null==(t=a)||t.disconnect(),a=null,c&&cancelAnimationFrame(h)}}const floating_ui_dom_browser_min_z=(t,n,o)=>floating_ui_core_browser_min_o(t,n,{platform:floating_ui_dom_browser_min_D,...o}); 77523 77524;// CONCATENATED MODULE: ./node_modules/@radix-ui/react-popper/node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.esm.js 77525 77526 77527 77528 77529 77530 77531var floating_ui_react_dom_esm_index = typeof document !== 'undefined' ? external_React_.useLayoutEffect : external_React_.useEffect; 77532 77533// Fork of `fast-deep-equal` that only does the comparisons we need and compares 77534// functions 77535function floating_ui_react_dom_esm_deepEqual(a, b) { 77536 if (a === b) { 77537 return true; 77538 } 77539 77540 if (typeof a !== typeof b) { 77541 return false;
77542 } 77543 77544 if (typeof a === 'function' && a.toString() === b.toString()) { 77545 return true; 77546 } 77547 77548 let length, i, keys; 77549 77550 if (a && b && typeof a == 'object') { 77551 if (Array.isArray(a)) { 77552 length = a.length; 77553 if (length != b.length) return false; 77554 77555 for (i = length; i-- !== 0;) { 77556 if (!floating_ui_react_dom_esm_deepEqual(a[i], b[i])) { 77557 return false; 77558 } 77559 } 77560 77561 return true; 77562 } 77563 77564 keys = Object.keys(a); 77565 length = keys.length; 77566 77567 if (length !== Object.keys(b).length) { 77568 return false; 77569 } 77570 77571 for (i = length; i-- !== 0;) { 77572 if (!Object.prototype.hasOwnProperty.call(b, keys[i])) { 77573 return false; 77574 } 77575 } 77576 77577 for (i = length; i-- !== 0;) { 77578 const key = keys[i]; 77579 77580 if (key === '_owner' && a.$$typeof) { 77581 continue; 77582 } 77583 77584 if (!floating_ui_react_dom_esm_deepEqual(a[key], b[key])) { 77585 return false; 77586 } 77587 } 77588 77589 return true; 77590 } 77591 77592 return a !== a && b !== b; 77593} 77594 77595function floating_ui_react_dom_esm_useLatestRef(value) { 77596 const ref = external_React_.useRef(value); 77597 floating_ui_react_dom_esm_index(() => { 77598 ref.current = value; 77599 }); 77600 return ref; 77601} 77602 77603function floating_ui_react_dom_esm_useFloating(_temp) { 77604 let { 77605 middleware, 77606 placement = 'bottom', 77607 strategy = 'absolute', 77608 whileElementsMounted 77609 } = _temp === void 0 ? {} : _temp; 77610 const reference = external_React_.useRef(null); 77611 const floating = external_React_.useRef(null); 77612 const whileElementsMountedRef = floating_ui_react_dom_esm_useLatestRef(whileElementsMounted); 77613 const cleanupRef = external_React_.useRef(null); 77614 const [data, setData] = external_React_.useState({ 77615 // Setting these to `null` will allow the consumer to determine if 77616 // `computePosition()` has run yet 77617 x: null, 77618 y: null, 77619 strategy, 77620 placement, 77621 middlewareData: {} 77622 }); 77623 const [latestMiddleware, setLatestMiddleware] = external_React_.useState(middleware); 77624 77625 if (!floating_ui_react_dom_esm_deepEqual(latestMiddleware == null ? void 0 : latestMiddleware.map(_ref => { 77626 let { 77627 options 77628 } = _ref; 77629 return options; 77630 }), middleware == null ? void 0 : middleware.map(_ref2 => { 77631 let { 77632 options 77633 } = _ref2; 77634 return options; 77635 }))) { 77636 setLatestMiddleware(middleware); 77637 } 77638 77639 const update = external_React_.useCallback(() => { 77640 if (!reference.current || !floating.current) { 77641 return; 77642 } 77643 77644 floating_ui_dom_browser_min_z(reference.current, floating.current, { 77645 middleware: latestMiddleware, 77646 placement, 77647 strategy 77648 }).then(data => { 77649 if (isMountedRef.current) { 77650 external_ReactDOM_namespaceObject.flushSync(() => { 77651 setData(data); 77652 }); 77653 } 77654 }); 77655 }, [latestMiddleware, placement, strategy]); 77656 floating_ui_react_dom_esm_index(() => { 77657 // Skip first update 77658 if (isMountedRef.current) { 77659 update(); 77660 } 77661 }, [update]); 77662 const isMountedRef = external_React_.useRef(false); 77663 floating_ui_react_dom_esm_index(() => { 77664 isMountedRef.current = true; 77665 return () => { 77666 isMountedRef.current = false; 77667 }; 77668 }, []); 77669 const runElementMountCallback = external_React_.useCallback(() => { 77670 if (typeof cleanupRef.current === 'function') { 77671 cleanupRef.current(); 77672 cleanupRef.current = null; 77673 } 77674 77675 if (reference.current && floating.current) { 77676 if (whileElementsMountedRef.current) { 77677 const cleanupFn = whileElementsMountedRef.current(reference.current, floating.current, update); 77678 cleanupRef.current = cleanupFn; 77679 } else { 77680 update(); 77681 } 77682 } 77683 }, [update, whileElementsMountedRef]); 77684 const setReference = external_React_.useCallback(node => { 77685 reference.current = node; 77686 runElementMountCallback(); 77687 }, [runElementMountCallback]); 77688 const setFloating = external_React_.useCallback(node => { 77689 floating.current = node; 77690 runElementMountCallback(); 77691 }, [runElementMountCallback]); 77692 const refs = external_React_.useMemo(() => ({ 77693 reference, 77694 floating 77695 }), []); 77696 return external_React_.useMemo(() => ({ ...data, 77697 update, 77698 refs, 77699 reference: setReference, 77700 floating: setFloating 77701 }), [data, update, refs, setReference, setFloating]); 77702} 77703 77704/** 77705 * Positions an inner element of the floating element such that it is centered 77706 * to the reference element. 77707 * This wraps the core `arrow` middleware to allow React refs as the element. 77708 * @see https://floating-ui.com/docs/arrow 77709 */ 77710 77711const dist_floating_ui_react_dom_esm_arrow = options => { 77712 const { 77713 element, 77714 padding 77715 } = options; 77716 77717 function isRef(value) { 77718 return Object.prototype.hasOwnProperty.call(value, 'current'); 77719 } 77720 77721 return { 77722 name: 'arrow', 77723 options, 77724 77725 fn(args) { 77726 if (isRef(element)) { 77727 if (element.current != null) { 77728 return floating_ui_core_browser_min_m({ 77729 element: element.current, 77730 padding 77731 }).fn(args); 77732 } 77733 77734 return {}; 77735 } else if (element) { 77736 return floating_ui_core_browser_min_m({ 77737 element, 77738 padding 77739 }).fn(args); 77740 } 77741 77742 return {}; 77743 } 77744 77745 }; 77746}; 77747 77748 77749 77750;// CONCATENATED MODULE: ./node_modules/@radix-ui/react-arrow/node_modules/@radix-ui/react-slot/dist/index.module.js 77751 77752 77753 77754 77755 77756 77757 77758/* ------------------------------------------------------------------------------------------------- 77759 * Slot 77760 * -----------------------------------------------------------------------------------------------*/ const react_slot_dist_index_module_$5e63c961fc1ce211$export$8c6ed5c666ac1360 = /*#__PURE__*/ (0,external_React_.forwardRef)((props, forwardedRef)=>{ 77761 const { children: children , ...slotProps } = props; 77762 const childrenArray = external_React_.Children.toArray(children); 77763 const slottable = childrenArray.find(react_slot_dist_index_module_$5e63c961fc1ce211$var$isSlottable); 77764 if (slottable) { 77765 // the new element to render is the one passed as a child of `Slottable` 77766 const newElement = slottable.props.children; 77767 const newChildren = childrenArray.map((child)=>{ 77768 if (child === slottable) { 77769 // because the new element will be the one rendered, we are only interested 77770 // in grabbing its children (`newElement.props.children`) 77771 if (external_React_.Children.count(newElement) > 1) return external_React_.Children.only(null); 77772 return /*#__PURE__*/ (0,external_React_.isValidElement)(newElement) ? newElement.props.children : null; 77773 } else return child; 77774 }); 77775 return /*#__PURE__*/ (0,external_React_.createElement)(react_slot_dist_index_module_$5e63c961fc1ce211$var$SlotClone, extends_extends({}, slotProps, { 77776 ref: forwardedRef 77777 }), /*#__PURE__*/ (0,external_React_.isValidElement)(newElement) ? /*#__PURE__*/ (0,external_React_.cloneElement)(newElement, undefined, newChildren) : null); 77778 } 77779 return /*#__PURE__*/ (0,external_React_.createElement)(react_slot_dist_index_module_$5e63c961fc1ce211$var$SlotClone, extends_extends({}, slotProps, { 77780 ref: forwardedRef 77781 }), children); 77782}); 77783react_slot_dist_index_module_$5e63c961fc1ce211$export$8c6ed5c666ac1360.displayName = 'Slot'; 77784/* ------------------------------------------------------------------------------------------------- 77785 * SlotClone 77786 * -----------------------------------------------------------------------------------------------*/ const react_slot_dist_index_module_$5e63c961fc1ce211$var$SlotClone = /*#__PURE__*/ (0,external_React_.forwardRef)((props, forwardedRef)=>{ 77787 const { children: children , ...slotProps } = props; 77788 if (/*#__PURE__*/ (0,external_React_.isValidElement)(children)) return /*#__PURE__*/ (0,external_React_.cloneElement)(children, { 77789 ...react_slot_dist_index_module_$5e63c961fc1ce211$var$mergeProps(slotProps, children.props),
vendor: 5,928 bytes, lines 77790-77924
77790 ref: $6ed0406888f73fc4$export$43e446d32b3d21af(forwardedRef, children.ref) 77791 }); 77792 return external_React_.Children.count(children) > 1 ? external_React_.Children.only(null) : null; 77793}); 77794react_slot_dist_index_module_$5e63c961fc1ce211$var$SlotClone.displayName = 'SlotClone'; 77795/* ------------------------------------------------------------------------------------------------- 77796 * Slottable 77797 * -----------------------------------------------------------------------------------------------*/ const react_slot_dist_index_module_$5e63c961fc1ce211$export$d9f1ccf0bdb05d45 = ({ children: children })=>{ 77798 return /*#__PURE__*/ (0,external_React_.createElement)(external_React_.Fragment, null, children); 77799}; 77800/* ---------------------------------------------------------------------------------------------- */ function react_slot_dist_index_module_$5e63c961fc1ce211$var$isSlottable(child) { 77801 return /*#__PURE__*/ (0,external_React_.isValidElement)(child) && child.type === react_slot_dist_index_module_$5e63c961fc1ce211$export$d9f1ccf0bdb05d45; 77802} 77803function react_slot_dist_index_module_$5e63c961fc1ce211$var$mergeProps(slotProps, childProps) { 77804 // all child props should override 77805 const overrideProps = { 77806 ...childProps 77807 }; 77808 for(const propName in childProps){ 77809 const slotPropValue = slotProps[propName]; 77810 const childPropValue = childProps[propName]; 77811 const isHandler = /^on[A-Z]/.test(propName); 77812 if (isHandler) { 77813 // if the handler exists on both, we compose them 77814 if (slotPropValue && childPropValue) overrideProps[propName] = (...args)=>{ 77815 childPropValue(...args); 77816 slotPropValue(...args); 77817 }; 77818 else if (slotPropValue) overrideProps[propName] = slotPropValue; 77819 } else if (propName === 'style') overrideProps[propName] = { 77820 ...slotPropValue, 77821 ...childPropValue 77822 }; 77823 else if (propName === 'className') overrideProps[propName] = [ 77824 slotPropValue, 77825 childPropValue 77826 ].filter(Boolean).join(' '); 77827 } 77828 return { 77829 ...slotProps, 77830 ...overrideProps 77831 }; 77832} 77833const react_slot_dist_index_module_$5e63c961fc1ce211$export$be92b6f5f03c0fe9 = (/* unused pure expression or super */ null && (react_slot_dist_index_module_$5e63c961fc1ce211$export$8c6ed5c666ac1360)); 77834 77835 77836 77837 77838 77839 77840;// CONCATENATED MODULE: ./node_modules/@radix-ui/react-arrow/node_modules/@radix-ui/react-primitive/dist/index.module.js 77841 77842 77843 77844 77845 77846 77847 77848 77849 77850const dist_index_module_$8927f6f2acc4f386$var$NODES = [ 77851 'a', 77852 'button', 77853 'div', 77854 'form', 77855 'h2', 77856 'h3', 77857 'img', 77858 'input', 77859 'label', 77860 'li', 77861 'nav', 77862 'ol', 77863 'p', 77864 'span', 77865 'svg', 77866 'ul' 77867]; // Temporary while we await merge of this fix: 77868// https://github.com/DefinitelyTyped/DefinitelyTyped/pull/55396 77869// prettier-ignore 77870/* ------------------------------------------------------------------------------------------------- 77871 * Primitive 77872 * -----------------------------------------------------------------------------------------------*/ const dist_index_module_$8927f6f2acc4f386$export$250ffa63cdc0d034 = dist_index_module_$8927f6f2acc4f386$var$NODES.reduce((primitive, node)=>{ 77873 const Node = /*#__PURE__*/ (0,external_React_.forwardRef)((props, forwardedRef)=>{ 77874 const { asChild: asChild , ...primitiveProps } = props; 77875 const Comp = asChild ? react_slot_dist_index_module_$5e63c961fc1ce211$export$8c6ed5c666ac1360 : node; 77876 (0,external_React_.useEffect)(()=>{ 77877 window[Symbol.for('radix-ui')] = true; 77878 }, []); 77879 return /*#__PURE__*/ (0,external_React_.createElement)(Comp, extends_extends({}, primitiveProps, { 77880 ref: forwardedRef 77881 })); 77882 }); 77883 Node.displayName = `Primitive.${node}`; 77884 return { 77885 ...primitive, 77886 [node]: Node 77887 }; 77888}, {}); 77889/* ------------------------------------------------------------------------------------------------- 77890 * Utils 77891 * -----------------------------------------------------------------------------------------------*/ /** 77892 * Flush custom event dispatch 77893 * https://github.com/radix-ui/primitives/pull/1378 77894 * 77895 * React batches *all* event handlers since version 18, this introduces certain considerations when using custom event types. 77896 * 77897 * Internally, React prioritises events in the following order: 77898 * - discrete 77899 * - continuous 77900 * - default 77901 * 77902 * https://github.com/facebook/react/blob/a8a4742f1c54493df00da648a3f9d26e3db9c8b5/packages/react-dom/src/events/ReactDOMEventListener.js#L294-L350 77903 * 77904 * `discrete` is an important distinction as updates within these events are applied immediately. 77905 * React however, is not able to infer the priority of custom event types due to how they are detected internally. 77906 * Because of this, it's possible for updates from custom events to be unexpectedly batched when 77907 * dispatched by another `discrete` event. 77908 * 77909 * In order to ensure that updates from custom events are applied predictably, we need to manually flush the batch. 77910 * This utility should be used when dispatching a custom event from within another `discrete` event, this utility 77911 * is not nessesary when dispatching known event types, or if dispatching a custom type inside a non-discrete event. 77912 * For example: 77913 * 77914 * dispatching a known click ð 77915 * target.dispatchEvent(new Event(âclickâ)) 77916 * 77917 * dispatching a custom type within a non-discrete event ð 77918 * onScroll={(event) => event.target.dispatchEvent(new CustomEvent(âcustomTypeâ))} 77919 * 77920 * dispatching a custom type within a `discrete` event ð 77921 * onPointerDown={(event) => dispatchDiscreteCustomEvent(event.target, new CustomEvent(âcustomTypeâ))} 77922 * 77923 * Note: though React classifies `focus`, `focusin` and `focusout` events as `discrete`, it's not recommended to use 77924 * this utility with them. This is because it's possible for those handlers to be called implicitly during render
77925 * e.g. when focus is within a component as it is unmounted, or when managing focus on mount. 77926 */ function dist_index_module_$8927f6f2acc4f386$export$6d1a0317bde7de7f(target, event) { 77927 if (target) $4q5Fq$flushSync(()=>target.dispatchEvent(event) 77928 ); 77929} 77930/* -----------------------------------------------------------------------------------------------*/ const dist_index_module_$8927f6f2acc4f386$export$be92b6f5f03c0fe9 = (/* unused pure expression or super */ null && (dist_index_module_$8927f6f2acc4f386$export$250ffa63cdc0d034)); 77931 77932 77933 77934 77935 77936 77937;// CONCATENATED MODULE: ./node_modules/@radix-ui/react-arrow/dist/index.module.js 77938 77939 77940 77941 77942 77943 77944 77945/* ------------------------------------------------------------------------------------------------- 77946 * Arrow 77947 * -----------------------------------------------------------------------------------------------*/ const $7e8f5cd07187803e$var$NAME = 'Arrow'; 77948const $7e8f5cd07187803e$export$21b07c8f274aebd5 = /*#__PURE__*/ (0,external_React_.forwardRef)((props, forwardedRef)=>{ 77949 const { children: children , width: width = 10 , height: height = 5 , ...arrowProps } = props; 77950 return /*#__PURE__*/ (0,external_React_.createElement)(dist_index_module_$8927f6f2acc4f386$export$250ffa63cdc0d034.svg, extends_extends({}, arrowProps, { 77951 ref: forwardedRef, 77952 width: width, 77953 height: height,
77954 viewBox: "0 0 30 10", 77955 preserveAspectRatio: "none" 77956 }), props.asChild ? children : /*#__PURE__*/ (0,external_React_.createElement)("polygon", { 77957 points: "0,0 30,0 15,10" 77958 })); 77959}); 77960/*#__PURE__*/ Object.assign($7e8f5cd07187803e$export$21b07c8f274aebd5, { 77961 displayName: $7e8f5cd07187803e$var$NAME 77962}); 77963/* -----------------------------------------------------------------------------------------------*/ const $7e8f5cd07187803e$export$be92b6f5f03c0fe9 = $7e8f5cd07187803e$export$21b07c8f274aebd5; 77964 77965 77966 77967 77968 77969 77970;// CONCATENATED MODULE: ./node_modules/@radix-ui/react-popper/node_modules/@radix-ui/react-slot/dist/index.module.js 77971 77972 77973 77974 77975 77976 77977 77978/* ------------------------------------------------------------------------------------------------- 77979 * Slot 77980 * -----------------------------------------------------------------------------------------------*/ const _radix_ui_react_slot_dist_index_module_$5e63c961fc1ce211$export$8c6ed5c666ac1360 = /*#__PURE__*/ (0,external_React_.forwardRef)((props, forwardedRef)=>{ 77981 const { children: children , ...slotProps } = props; 77982 const childrenArray = external_React_.Children.toArray(children); 77983 const slottable = childrenArray.find(_radix_ui_react_slot_dist_index_module_$5e63c961fc1ce211$var$isSlottable); 77984 if (slottable) { 77985 // the new element to render is the one passed as a child of `Slottable` 77986 const newElement = slottable.props.children; 77987 const newChildren = childrenArray.map((child)=>{ 77988 if (child === slottable) { 77989 // because the new element will be the one rendered, we are only interested 77990 // in grabbing its children (`newElement.props.children`) 77991 if (external_React_.Children.count(newElement) > 1) return external_React_.Children.only(null); 77992 return /*#__PURE__*/ (0,external_React_.isValidElement)(newElement) ? newElement.props.children : null; 77993 } else return child; 77994 }); 77995 return /*#__PURE__*/ (0,external_React_.createElement)(_radix_ui_react_slot_dist_index_module_$5e63c961fc1ce211$var$SlotClone, extends_extends({}, slotProps, { 77996 ref: forwardedRef 77997 }), /*#__PURE__*/ (0,external_React_.isValidElement)(newElement) ? /*#__PURE__*/ (0,external_React_.cloneElement)(newElement, undefined, newChildren) : null); 77998 } 77999 return /*#__PURE__*/ (0,external_React_.createElement)(_radix_ui_react_slot_dist_index_module_$5e63c961fc1ce211$var$SlotClone, extends_extends({}, slotProps, { 78000 ref: forwardedRef 78001 }), children); 78002}); 78003_radix_ui_react_slot_dist_index_module_$5e63c961fc1ce211$export$8c6ed5c666ac1360.displayName = 'Slot'; 78004/* ------------------------------------------------------------------------------------------------- 78005 * SlotClone 78006 * -----------------------------------------------------------------------------------------------*/ const _radix_ui_react_slot_dist_index_module_$5e63c961fc1ce211$var$SlotClone = /*#__PURE__*/ (0,external_React_.forwardRef)((props, forwardedRef)=>{ 78007 const { children: children , ...slotProps } = props; 78008 if (/*#__PURE__*/ (0,external_React_.isValidElement)(children)) return /*#__PURE__*/ (0,external_React_.cloneElement)(children, { 78009 ..._radix_ui_react_slot_dist_index_module_$5e63c961fc1ce211$var$mergeProps(slotProps, children.props), 78010 ref: $6ed0406888f73fc4$export$43e446d32b3d21af(forwardedRef, children.ref) 78011 }); 78012 return external_React_.Children.count(children) > 1 ? external_React_.Children.only(null) : null; 78013}); 78014_radix_ui_react_slot_dist_index_module_$5e63c961fc1ce211$var$SlotClone.displayName = 'SlotClone'; 78015/* ------------------------------------------------------------------------------------------------- 78016 * Slottable 78017 * -----------------------------------------------------------------------------------------------*/ const _radix_ui_react_slot_dist_index_module_$5e63c961fc1ce211$export$d9f1ccf0bdb05d45 = ({ children: children })=>{ 78018 return /*#__PURE__*/ (0,external_React_.createElement)(external_React_.Fragment, null, children); 78019}; 78020/* ---------------------------------------------------------------------------------------------- */ function _radix_ui_react_slot_dist_index_module_$5e63c961fc1ce211$var$isSlottable(child) { 78021 return /*#__PURE__*/ (0,external_React_.isValidElement)(child) && child.type === _radix_ui_react_slot_dist_index_module_$5e63c961fc1ce211$export$d9f1ccf0bdb05d45; 78022} 78023function _radix_ui_react_slot_dist_index_module_$5e63c961fc1ce211$var$mergeProps(slotProps, childProps) { 78024 // all child props should override 78025 const overrideProps = { 78026 ...childProps 78027 }; 78028 for(const propName in childProps){ 78029 const slotPropValue = slotProps[propName]; 78030 const childPropValue = childProps[propName]; 78031 const isHandler = /^on[A-Z]/.test(propName); 78032 if (isHandler) { 78033 // if the handler exists on both, we compose them 78034 if (slotPropValue && childPropValue) overrideProps[propName] = (...args)=>{ 78035 childPropValue(...args); 78036 slotPropValue(...args); 78037 }; 78038 else if (slotPropValue) overrideProps[propName] = slotPropValue; 78039 } else if (propName === 'style') overrideProps[propName] = { 78040 ...slotPropValue, 78041 ...childPropValue 78042 }; 78043 else if (propName === 'className') overrideProps[propName] = [ 78044 slotPropValue, 78045 childPropValue
78046 ].filter(Boolean).join(' '); 78047 } 78048 return { 78049 ...slotProps, 78050 ...overrideProps 78051 }; 78052} 78053const _radix_ui_react_slot_dist_index_module_$5e63c961fc1ce211$export$be92b6f5f03c0fe9 = (/* unused pure expression or super */ null && (_radix_ui_react_slot_dist_index_module_$5e63c961fc1ce211$export$8c6ed5c666ac1360)); 78054 78055 78056 78057 78058 78059 78060;// CONCATENATED MODULE: ./node_modules/@radix-ui/react-popper/node_modules/@radix-ui/react-primitive/dist/index.module.js 78061 78062 78063 78064 78065 78066 78067 78068 78069 78070const react_primitive_dist_index_module_$8927f6f2acc4f386$var$NODES = [ 78071 'a', 78072 'button', 78073 'div', 78074 'form', 78075 'h2', 78076 'h3', 78077 'img', 78078 'input', 78079 'label', 78080 'li', 78081 'nav', 78082 'ol', 78083 'p', 78084 'span', 78085 'svg', 78086 'ul' 78087]; // Temporary while we await merge of this fix: 78088// https://github.com/DefinitelyTyped/DefinitelyTyped/pull/55396 78089// prettier-ignore 78090/* ------------------------------------------------------------------------------------------------- 78091 * Primitive 78092 * -----------------------------------------------------------------------------------------------*/ const react_primitive_dist_index_module_$8927f6f2acc4f386$export$250ffa63cdc0d034 = react_primitive_dist_index_module_$8927f6f2acc4f386$var$NODES.reduce((primitive, node)=>{ 78093 const Node = /*#__PURE__*/ (0,external_React_.forwardRef)((props, forwardedRef)=>{ 78094 const { asChild: asChild , ...primitiveProps } = props; 78095 const Comp = asChild ? _radix_ui_react_slot_dist_index_module_$5e63c961fc1ce211$export$8c6ed5c666ac1360 : node; 78096 (0,external_React_.useEffect)(()=>{ 78097 window[Symbol.for('radix-ui')] = true; 78098 }, []); 78099 return /*#__PURE__*/ (0,external_React_.createElement)(Comp, extends_extends({}, primitiveProps, { 78100 ref: forwardedRef 78101 })); 78102 }); 78103 Node.displayName = `Primitive.${node}`; 78104 return { 78105 ...primitive, 78106 [node]: Node 78107 }; 78108}, {}); 78109/* ------------------------------------------------------------------------------------------------- 78110 * Utils 78111 * -----------------------------------------------------------------------------------------------*/ /** 78112 * Flush custom event dispatch 78113 * https://github.com/radix-ui/primitives/pull/1378 78114 * 78115 * React batches *all* event handlers since version 18, this introduces certain considerations when using custom event types. 78116 * 78117 * Internally, React prioritises events in the following order: 78118 * - discrete 78119 * - continuous 78120 * - default 78121 * 78122 * https://github.com/facebook/react/blob/a8a4742f1c54493df00da648a3f9d26e3db9c8b5/packages/react-dom/src/events/ReactDOMEventListener.js#L294-L350 78123 * 78124 * `discrete` is an important distinction as updates within these events are applied immediately. 78125 * React however, is not able to infer the priority of custom event types due to how they are detected internally. 78126 * Because of this, it's possible for updates from custom events to be unexpectedly batched when 78127 * dispatched by another `discrete` event. 78128 * 78129 * In order to ensure that updates from custom events are applied predictably, we need to manually flush the batch. 78130 * This utility should be used when dispatching a custom event from within another `discrete` event, this utility 78131 * is not nessesary when dispatching known event types, or if dispatching a custom type inside a non-discrete event. 78132 * For example: 78133 * 78134 * dispatching a known click ð 78135 * target.dispatchEvent(new Event(âclickâ)) 78136 * 78137 * dispatching a custom type within a non-discrete event ð 78138 * onScroll={(event) => event.target.dispatchEvent(new CustomEvent(âcustomTypeâ))} 78139 * 78140 * dispatching a custom type within a `discrete` event ð 78141 * onPointerDown={(event) => dispatchDiscreteCustomEvent(event.target, new CustomEvent(âcustomTypeâ))} 78142 * 78143 * Note: though React classifies `focus`, `focusin` and `focusout` events as `discrete`, it's not recommended to use 78144 * this utility with them. This is because it's possible for those handlers to be called implicitly during render 78145 * e.g. when focus is within a component as it is unmounted, or when managing focus on mount. 78146 */ function react_primitive_dist_index_module_$8927f6f2acc4f386$export$6d1a0317bde7de7f(target, event) { 78147 if (target) $4q5Fq$flushSync(()=>target.dispatchEvent(event) 78148 ); 78149} 78150/* -----------------------------------------------------------------------------------------------*/ const react_primitive_dist_index_module_$8927f6f2acc4f386$export$be92b6f5f03c0fe9 = (/* unused pure expression or super */ null && (react_primitive_dist_index_module_$8927f6f2acc4f386$export$250ffa63cdc0d034)); 78151 78152 78153 78154 78155 78156 78157;// CONCATENATED MODULE: ./node_modules/@radix-ui/react-use-size/dist/index.module.js 78158 78159 78160 78161 78162 78163function $db6c3485150b8e66$export$1ab7ae714698c4b8(element) {
78164 const [size, setSize] = (0,external_React_.useState)(undefined); 78165 $9f79659886946c16$export$e5c5a5f917a5871c(()=>{ 78166 if (element) { 78167 // provide size as early as possible 78168 setSize({ 78169 width: element.offsetWidth, 78170 height: element.offsetHeight 78171 }); 78172 const resizeObserver = new ResizeObserver((entries)=>{ 78173 if (!Array.isArray(entries)) return; 78174 // Since we only observe the one element, we don't need to loop over the 78175 // array 78176 if (!entries.length) return; 78177 const entry = entries[0]; 78178 let width; 78179 let height; 78180 if ('borderBoxSize' in entry) { 78181 const borderSizeEntry = entry['borderBoxSize']; // iron out differences between browsers 78182 const borderSize = Array.isArray(borderSizeEntry) ? borderSizeEntry[0] : borderSizeEntry; 78183 width = borderSize['inlineSize']; 78184 height = borderSize['blockSize']; 78185 } else { 78186 // for browsers that don't support `borderBoxSize` 78187 // we calculate it ourselves to get the correct border box. 78188 width = element.offsetWidth; 78189 height = element.offsetHeight; 78190 } 78191 setSize({ 78192 width: width, 78193 height: height 78194 }); 78195 }); 78196 resizeObserver.observe(element, { 78197 box: 'border-box' 78198 }); 78199 return ()=>resizeObserver.unobserve(element) 78200 ; 78201 } else // We only want to reset to `undefined` when the element becomes `null`, 78202 // not if it changes to another element. 78203 setSize(undefined); 78204 }, [ 78205 element 78206 ]); 78207 return size; 78208} 78209 78210 78211 78212 78213 78214 78215;// CONCATENATED MODULE: ./node_modules/@radix-ui/react-popper/dist/index.module.js 78216 78217 78218 78219 78220 78221 78222 78223 78224 78225 78226 78227 78228 78229 78230 78231 78232 78233 78234 78235 78236 78237const $cf1ac5d9fe0e8206$export$36f0086da09c4b9f = (/* unused pure expression or super */ null && ([ 78238 'top', 78239 'right', 78240 'bottom', 78241 'left' 78242])); 78243const $cf1ac5d9fe0e8206$export$3671ffab7b302fc9 = (/* unused pure expression or super */ null && ([ 78244 'start', 78245 'center', 78246 'end' 78247])); 78248/* ------------------------------------------------------------------------------------------------- 78249 * Popper 78250 * -----------------------------------------------------------------------------------------------*/ const $cf1ac5d9fe0e8206$var$POPPER_NAME = 'Popper'; 78251const [$cf1ac5d9fe0e8206$var$createPopperContext, $cf1ac5d9fe0e8206$export$722aac194ae923] = $c512c27ab02ef895$export$50c7b4e9d9f19c1($cf1ac5d9fe0e8206$var$POPPER_NAME); 78252const [$cf1ac5d9fe0e8206$var$PopperProvider, $cf1ac5d9fe0e8206$var$usePopperContext] = $cf1ac5d9fe0e8206$var$createPopperContext($cf1ac5d9fe0e8206$var$POPPER_NAME); 78253const $cf1ac5d9fe0e8206$export$badac9ada3a0bdf9 = (props)=>{ 78254 const { __scopePopper: __scopePopper , children: children } = props; 78255 const [anchor, setAnchor] = (0,external_React_.useState)(null); 78256 return /*#__PURE__*/ (0,external_React_.createElement)($cf1ac5d9fe0e8206$var$PopperProvider, { 78257 scope: __scopePopper, 78258 anchor: anchor, 78259 onAnchorChange: setAnchor 78260 }, children); 78261}; 78262/*#__PURE__*/ Object.assign($cf1ac5d9fe0e8206$export$badac9ada3a0bdf9, { 78263 displayName: $cf1ac5d9fe0e8206$var$POPPER_NAME 78264}); 78265/* ------------------------------------------------------------------------------------------------- 78266 * PopperAnchor 78267 * -----------------------------------------------------------------------------------------------*/ const $cf1ac5d9fe0e8206$var$ANCHOR_NAME = 'PopperAnchor'; 78268const $cf1ac5d9fe0e8206$export$ecd4e1ccab6ed6d = /*#__PURE__*/ (0,external_React_.forwardRef)((props, forwardedRef)=>{ 78269 const { __scopePopper: __scopePopper , virtualRef: virtualRef , ...anchorProps } = props; 78270 const context = $cf1ac5d9fe0e8206$var$usePopperContext($cf1ac5d9fe0e8206$var$ANCHOR_NAME, __scopePopper); 78271 const ref = (0,external_React_.useRef)(null);
78272 const composedRefs = $6ed0406888f73fc4$export$c7b2cbe3552a0d05(forwardedRef, ref); 78273 (0,external_React_.useEffect)(()=>{ 78274 // Consumer can anchor the popper to something that isn't 78275 // a DOM node e.g. pointer position, so we override the 78276 // `anchorRef` with their virtual ref in this case. 78277 context.onAnchorChange((virtualRef === null || virtualRef === void 0 ? void 0 : virtualRef.current) || ref.current); 78278 }); 78279 return virtualRef ? null : /*#__PURE__*/ (0,external_React_.createElement)(react_primitive_dist_index_module_$8927f6f2acc4f386$export$250ffa63cdc0d034.div, extends_extends({}, anchorProps, { 78280 ref: composedRefs 78281 })); 78282}); 78283/*#__PURE__*/ Object.assign($cf1ac5d9fe0e8206$export$ecd4e1ccab6ed6d, { 78284 displayName: $cf1ac5d9fe0e8206$var$ANCHOR_NAME 78285}); 78286/* ------------------------------------------------------------------------------------------------- 78287 * PopperContent 78288 * -----------------------------------------------------------------------------------------------*/ const $cf1ac5d9fe0e8206$var$CONTENT_NAME = 'PopperContent'; 78289const [$cf1ac5d9fe0e8206$var$PopperContentProvider, $cf1ac5d9fe0e8206$var$useContentContext] = $cf1ac5d9fe0e8206$var$createPopperContext($cf1ac5d9fe0e8206$var$CONTENT_NAME); 78290const [$cf1ac5d9fe0e8206$var$PositionContextProvider, $cf1ac5d9fe0e8206$var$usePositionContext] = $cf1ac5d9fe0e8206$var$createPopperContext($cf1ac5d9fe0e8206$var$CONTENT_NAME, { 78291 hasParent: false, 78292 positionUpdateFns: new Set() 78293}); 78294const $cf1ac5d9fe0e8206$export$bc4ae5855d3c4fc = /*#__PURE__*/ (0,external_React_.forwardRef)((props, forwardedRef)=>{ 78295 var _arrowSize$width, _arrowSize$height, _middlewareData$arrow, _middlewareData$arrow2, _middlewareData$arrow3, _middlewareData$hide, _middlewareData$trans, _middlewareData$trans2; 78296 const { __scopePopper: __scopePopper , side: side = 'bottom' , sideOffset: sideOffset = 0 , align: align = 'center' , alignOffset: alignOffset = 0 , arrowPadding: arrowPadding = 0 , collisionBoundary: collisionBoundary = [] , collisionPadding: collisionPaddingProp = 0 , sticky: sticky = 'partial' , hideWhenDetached: hideWhenDetached = false , avoidCollisions: avoidCollisions = true , onPlaced: onPlaced , ...contentProps } = props; 78297 const context = $cf1ac5d9fe0e8206$var$usePopperContext($cf1ac5d9fe0e8206$var$CONTENT_NAME, __scopePopper); 78298 const [content, setContent] = (0,external_React_.useState)(null); 78299 const composedRefs = $6ed0406888f73fc4$export$c7b2cbe3552a0d05(forwardedRef, (node)=>setContent(node) 78300 ); 78301 const [arrow, setArrow] = (0,external_React_.useState)(null); 78302 const arrowSize = $db6c3485150b8e66$export$1ab7ae714698c4b8(arrow); 78303 const arrowWidth = (_arrowSize$width = arrowSize === null || arrowSize === void 0 ? void 0 : arrowSize.width) !== null && _arrowSize$width !== void 0 ? _arrowSize$width : 0; 78304 const arrowHeight = (_arrowSize$height = arrowSize === null || arrowSize === void 0 ? void 0 : arrowSize.height) !== null && _arrowSize$height !== void 0 ? _arrowSize$height : 0; 78305 const desiredPlacement = side + (align !== 'center' ? '-' + align : ''); 78306 const collisionPadding = typeof collisionPaddingProp === 'number' ? collisionPaddingProp : { 78307 top: 0, 78308 right: 0, 78309 bottom: 0, 78310 left: 0, 78311 ...collisionPaddingProp 78312 }; 78313 const boundary = Array.isArray(collisionBoundary) ? collisionBoundary : [ 78314 collisionBoundary 78315 ]; 78316 const hasExplicitBoundaries = boundary.length > 0; 78317 const detectOverflowOptions = { 78318 padding: collisionPadding, 78319 boundary: boundary.filter($cf1ac5d9fe0e8206$var$isNotNull), 78320 // with `strategy: 'fixed'`, this is the only way to get it to respect boundaries 78321 altBoundary: hasExplicitBoundaries 78322 }; 78323 const { reference: reference , floating: floating , strategy: strategy , x: x , y: y , placement: placement , middlewareData: middlewareData , update: update } = floating_ui_react_dom_esm_useFloating({ 78324 // default to `fixed` strategy so users don't have to pick and we also avoid focus scroll issues 78325 strategy: 'fixed', 78326 placement: desiredPlacement, 78327 whileElementsMounted: floating_ui_dom_browser_min_N, 78328 middleware: [ 78329 $cf1ac5d9fe0e8206$var$anchorCssProperties(), 78330 floating_ui_core_browser_min_T({ 78331 mainAxis: sideOffset + arrowHeight, 78332 alignmentAxis: alignOffset 78333 }), 78334 avoidCollisions ? floating_ui_core_browser_min_D({ 78335 mainAxis: true,
78336 crossAxis: false, 78337 limiter: sticky === 'partial' ? floating_ui_core_browser_min_L() : undefined, 78338 ...detectOverflowOptions 78339 }) : undefined, 78340 arrow ? dist_floating_ui_react_dom_esm_arrow({ 78341 element: arrow, 78342 padding: arrowPadding 78343 }) : undefined, 78344 avoidCollisions ? floating_ui_core_browser_min_b({ 78345 ...detectOverflowOptions 78346 }) : undefined, 78347 floating_ui_core_browser_min_k({ 78348 ...detectOverflowOptions, 78349 apply: ({ elements: elements , availableWidth: width , availableHeight: height })=>{ 78350 elements.floating.style.setProperty('--radix-popper-available-width', `${width}px`); 78351 elements.floating.style.setProperty('--radix-popper-available-height', `${height}px`); 78352 } 78353 }), 78354 $cf1ac5d9fe0e8206$var$transformOrigin({ 78355 arrowWidth: arrowWidth, 78356 arrowHeight: arrowHeight 78357 }), 78358 hideWhenDetached ? floating_ui_core_browser_min_P({ 78359 strategy: 'referenceHidden' 78360 }) : undefined 78361 ].filter($cf1ac5d9fe0e8206$var$isDefined) 78362 }); // assign the reference dynamically once `Content` has mounted so we can collocate the logic 78363 $9f79659886946c16$export$e5c5a5f917a5871c(()=>{ 78364 reference(context.anchor); 78365 }, [ 78366 reference, 78367 context.anchor 78368 ]); 78369 const isPlaced = x !== null && y !== null; 78370 const [placedSide, placedAlign] = $cf1ac5d9fe0e8206$var$getSideAndAlignFromPlacement(placement); 78371 const handlePlaced = $b1b2314f5f9a1d84$export$25bec8c6f54ee79a(onPlaced); 78372 $9f79659886946c16$export$e5c5a5f917a5871c(()=>{ 78373 if (isPlaced) handlePlaced === null || handlePlaced === void 0 || handlePlaced(); 78374 }, [ 78375 isPlaced, 78376 handlePlaced 78377 ]); 78378 const arrowX = (_middlewareData$arrow = middlewareData.arrow) === null || _middlewareData$arrow === void 0 ? void 0 : _middlewareData$arrow.x; 78379 const arrowY = (_middlewareData$arrow2 = middlewareData.arrow) === null || _middlewareData$arrow2 === void 0 ? void 0 : _middlewareData$arrow2.y; 78380 const cannotCenterArrow = ((_middlewareData$arrow3 = middlewareData.arrow) === null || _middlewareData$arrow3 === void 0 ? void 0 : _middlewareData$arrow3.centerOffset) !== 0; 78381 const [contentZIndex, setContentZIndex] = (0,external_React_.useState)(); 78382 $9f79659886946c16$export$e5c5a5f917a5871c(()=>{ 78383 if (content) setContentZIndex(window.getComputedStyle(content).zIndex); 78384 }, [ 78385 content 78386 ]); 78387 const { hasParent: hasParent , positionUpdateFns: positionUpdateFns } = $cf1ac5d9fe0e8206$var$usePositionContext($cf1ac5d9fe0e8206$var$CONTENT_NAME, __scopePopper); 78388 const isRoot = !hasParent; 78389 (0,external_React_.useLayoutEffect)(()=>{ 78390 if (!isRoot) { 78391 positionUpdateFns.add(update); 78392 return ()=>{ 78393 positionUpdateFns.delete(update); 78394 }; 78395 } 78396 }, [ 78397 isRoot, 78398 positionUpdateFns, 78399 update 78400 ]); // when nested contents are rendered in portals, they are appended out of order causing 78401 // children to be positioned incorrectly if initially open. 78402 // we need to re-compute the positioning once the parent has finally been placed. 78403 // https://github.com/floating-ui/floating-ui/issues/1531 78404 $9f79659886946c16$export$e5c5a5f917a5871c(()=>{ 78405 if (isRoot && isPlaced) Array.from(positionUpdateFns).reverse().forEach((fn)=>requestAnimationFrame(fn) 78406 ); 78407 }, [ 78408 isRoot, 78409 isPlaced, 78410 positionUpdateFns 78411 ]); 78412 const commonProps = { 78413 'data-side': placedSide, 78414 'data-align': placedAlign, 78415 ...contentProps, 78416 ref: composedRefs, 78417 style: { 78418 ...contentProps.style, 78419 // if the PopperContent hasn't been placed yet (not all measurements done) 78420 // we prevent animations so that users's animation don't kick in too early referring wrong sides 78421 animation: !isPlaced ? 'none' : undefined, 78422 // hide the content if using the hide middleware and should be hidden 78423 opacity: (_middlewareData$hide = middlewareData.hide) !== null && _middlewareData$hide !== void 0 && _middlewareData$hide.referenceHidden ? 0 : undefined 78424 } 78425 }; 78426 return /*#__PURE__*/ (0,external_React_.createElement)("div", { 78427 ref: floating, 78428 "data-radix-popper-content-wrapper": "", 78429 style: { 78430 position: strategy, 78431 left: 0, 78432 top: 0, 78433 transform: isPlaced ? `translate3d(${Math.round(x)}px, ${Math.round(y)}px, 0)` : 'translate3d(0, -200%, 0)', 78434 // keep off the page when measuring 78435 minWidth: 'max-content', 78436 zIndex: contentZIndex, 78437 ['--radix-popper-transform-origin']: [ 78438 (_middlewareData$trans = middlewareData.transformOrigin) === null || _middlewareData$trans === void 0 ? void 0 : _middlewareData$trans.x, 78439 (_middlewareData$trans2 = middlewareData.transformOrigin) === null || _middlewareData$trans2 === void 0 ? void 0 : _middlewareData$trans2.y 78440 ].join(' ') 78441 } // Floating UI interally calculates logical alignment based the `dir` attribute on 78442 , 78443 dir: props.dir 78444 }, /*#__PURE__*/ (0,external_React_.createElement)($cf1ac5d9fe0e8206$var$PopperContentProvider, { 78445 scope: __scopePopper, 78446 placedSide: placedSide, 78447 onArrowChange: setArrow, 78448 arrowX: arrowX, 78449 arrowY: arrowY, 78450 shouldHideArrow: cannotCenterArrow 78451 }, isRoot ? /*#__PURE__*/ (0,external_React_.createElement)($cf1ac5d9fe0e8206$var$PositionContextProvider, { 78452 scope: __scopePopper, 78453 hasParent: true, 78454 positionUpdateFns: positionUpdateFns 78455 }, /*#__PURE__*/ (0,external_React_.createElement)(react_primitive_dist_index_module_$8927f6f2acc4f386$export$250ffa63cdc0d034.div, commonProps)) : /*#__PURE__*/ (0,external_React_.createElement)(react_primitive_dist_index_module_$8927f6f2acc4f386$export$250ffa63cdc0d034.div, commonProps))); 78456}); 78457/*#__PURE__*/ Object.assign($cf1ac5d9fe0e8206$export$bc4ae5855d3c4fc, { 78458 displayName: $cf1ac5d9fe0e8206$var$CONTENT_NAME 78459}); 78460/* ------------------------------------------------------------------------------------------------- 78461 * PopperArrow 78462 * -----------------------------------------------------------------------------------------------*/ const $cf1ac5d9fe0e8206$var$ARROW_NAME = 'PopperArrow'; 78463const $cf1ac5d9fe0e8206$var$OPPOSITE_SIDE = { 78464 top: 'bottom', 78465 right: 'left', 78466 bottom: 'top', 78467 left: 'right' 78468}; 78469const $cf1ac5d9fe0e8206$export$79d62cd4e10a3fd0 = /*#__PURE__*/ (0,external_React_.forwardRef)(function $cf1ac5d9fe0e8206$export$79d62cd4e10a3fd0(props, forwardedRef) { 78470 const { __scopePopper: __scopePopper , ...arrowProps } = props; 78471 const contentContext = $cf1ac5d9fe0e8206$var$useContentContext($cf1ac5d9fe0e8206$var$ARROW_NAME, __scopePopper); 78472 const baseSide = $cf1ac5d9fe0e8206$var$OPPOSITE_SIDE[contentContext.placedSide]; 78473 return(/*#__PURE__*/ // we have to use an extra wrapper because `ResizeObserver` (used by `useSize`) 78474 // doesn't report size as we'd expect on SVG elements. 78475 // it reports their bounding box which is effectively the largest path inside the SVG. 78476 (0,external_React_.createElement)("span", { 78477 ref: contentContext.onArrowChange, 78478 style: { 78479 position: 'absolute', 78480 left: contentContext.arrowX, 78481 top: contentContext.arrowY, 78482 [baseSide]: 0, 78483 transformOrigin: { 78484 top: '', 78485 right: '0 0', 78486 bottom: 'center 0', 78487 left: '100% 0' 78488 }[contentContext.placedSide], 78489 transform: { 78490 top: 'translateY(100%)', 78491 right: 'translateY(50%) rotate(90deg) translateX(-50%)', 78492 bottom: `rotate(180deg)`, 78493 left: 'translateY(50%) rotate(-90deg) translateX(50%)' 78494 }[contentContext.placedSide], 78495 visibility: contentContext.shouldHideArrow ? 'hidden' : undefined 78496 } 78497 }, /*#__PURE__*/ (0,external_React_.createElement)($7e8f5cd07187803e$export$be92b6f5f03c0fe9, extends_extends({}, arrowProps, { 78498 ref: forwardedRef, 78499 style: { 78500 ...arrowProps.style, 78501 // ensures the element can be measured correctly (mostly for if SVG) 78502 display: 'block' 78503 } 78504 })))); 78505}); 78506/*#__PURE__*/ Object.assign($cf1ac5d9fe0e8206$export$79d62cd4e10a3fd0, { 78507 displayName: $cf1ac5d9fe0e8206$var$ARROW_NAME 78508}); 78509/* -----------------------------------------------------------------------------------------------*/ function $cf1ac5d9fe0e8206$var$isDefined(value) { 78510 return value !== undefined; 78511} 78512function $cf1ac5d9fe0e8206$var$isNotNull(value) { 78513 return value !== null; 78514} 78515const $cf1ac5d9fe0e8206$var$anchorCssProperties = ()=>({ 78516 name: 'anchorCssProperties', 78517 fn (data) { 78518 const { rects: rects , elements: elements } = data; 78519 const { width: width , height: height } = rects.reference; 78520 elements.floating.style.setProperty('--radix-popper-anchor-width', `${width}px`); 78521 elements.floating.style.setProperty('--radix-popper-anchor-height', `${height}px`); 78522 return {}; 78523 } 78524 }) 78525; 78526const $cf1ac5d9fe0e8206$var$transformOrigin = (options)=>({ 78527 name: 'transformOrigin', 78528 options: options, 78529 fn (data) { 78530 var _middlewareData$arrow4, _middlewareData$arrow5, _middlewareData$arrow6, _middlewareData$arrow7, _middlewareData$arrow8; 78531 const { placement: placement , rects: rects , middlewareData: middlewareData } = data; 78532 const cannotCenterArrow = ((_middlewareData$arrow4 = middlewareData.arrow) === null || _middlewareData$arrow4 === void 0 ? void 0 : _middlewareData$arrow4.centerOffset) !== 0; 78533 const isArrowHidden = cannotCenterArrow; 78534 const arrowWidth = isArrowHidden ? 0 : options.arrowWidth; 78535 const arrowHeight = isArrowHidden ? 0 : options.arrowHeight; 78536 const [placedSide, placedAlign] = $cf1ac5d9fe0e8206$var$getSideAndAlignFromPlacement(placement); 78537 const noArrowAlign = { 78538 start: '0%', 78539 center: '50%', 78540 end: '100%' 78541 }[placedAlign]; 78542 const arrowXCenter = ((_middlewareData$arrow5 = (_middlewareData$arrow6 = middlewareData.arrow) === null || _middlewareData$arrow6 === void 0 ? void 0 : _middlewareData$arrow6.x) !== null && _middlewareData$arrow5 !== void 0 ? _middlewareData$arrow5 : 0) + arrowWidth / 2; 78543 const arrowYCenter = ((_middlewareData$arrow7 = (_middlewareData$arrow8 = middlewareData.arrow) === null || _middlewareData$arrow8 === void 0 ? void 0 : _middlewareData$arrow8.y) !== null && _middlewareData$arrow7 !== void 0 ? _middlewareData$arrow7 : 0) + arrowHeight / 2; 78544 let x = ''; 78545 let y = ''; 78546 if (placedSide === 'bottom') { 78547 x = isArrowHidden ? noArrowAlign : `${arrowXCenter}px`; 78548 y = `${-arrowHeight}px`; 78549 } else if (placedSide === 'top') { 78550 x = isArrowHidden ? noArrowAlign : `${arrowXCenter}px`; 78551 y = `${rects.floating.height + arrowHeight}px`; 78552 } else if (placedSide === 'right') { 78553 x = `${-arrowHeight}px`; 78554 y = isArrowHidden ? noArrowAlign : `${arrowYCenter}px`; 78555 } else if (placedSide === 'left') { 78556 x = `${rects.floating.width + arrowHeight}px`; 78557 y = isArrowHidden ? noArrowAlign : `${arrowYCenter}px`; 78558 } 78559 return { 78560 data: { 78561 x: x, 78562 y: y 78563 } 78564 }; 78565 } 78566 }) 78567; 78568function $cf1ac5d9fe0e8206$var$getSideAndAlignFromPlacement(placement) { 78569 const [side, align = 'center'] = placement.split('-'); 78570 return [ 78571 side, 78572 align 78573 ]; 78574} 78575const $cf1ac5d9fe0e8206$export$be92b6f5f03c0fe9 = $cf1ac5d9fe0e8206$export$badac9ada3a0bdf9; 78576const $cf1ac5d9fe0e8206$export$b688253958b8dfe7 = $cf1ac5d9fe0e8206$export$ecd4e1ccab6ed6d; 78577const $cf1ac5d9fe0e8206$export$7c6e2c02157bb7d2 = $cf1ac5d9fe0e8206$export$bc4ae5855d3c4fc;
78578const $cf1ac5d9fe0e8206$export$21b07c8f274aebd5 = $cf1ac5d9fe0e8206$export$79d62cd4e10a3fd0; 78579 78580 78581 78582 78583 78584 78585;// CONCATENATED MODULE: ./node_modules/@radix-ui/react-menu/node_modules/@radix-ui/react-portal/dist/index.module.js 78586 78587 78588 78589 78590 78591 78592 78593 78594 78595/* ------------------------------------------------------------------------------------------------- 78596 * Portal 78597 * -----------------------------------------------------------------------------------------------*/ const $f1701beae083dbae$var$PORTAL_NAME = 'Portal'; 78598const $f1701beae083dbae$export$602eac185826482c = /*#__PURE__*/ (0,external_React_.forwardRef)((props, forwardedRef)=>{ 78599 var _globalThis$document; 78600 const { container: container = globalThis === null || globalThis === void 0 ? void 0 : (_globalThis$document = globalThis.document) === null || _globalThis$document === void 0 ? void 0 : _globalThis$document.body , ...portalProps } = props; 78601 return container ? /*#__PURE__*/ external_ReactDOM_default().createPortal(/*#__PURE__*/ (0,external_React_.createElement)(index_module_$8927f6f2acc4f386$export$250ffa63cdc0d034.div, extends_extends({}, portalProps, { 78602 ref: forwardedRef 78603 })), container) : null; 78604}); 78605/*#__PURE__*/ Object.assign($f1701beae083dbae$export$602eac185826482c, { 78606 displayName: $f1701beae083dbae$var$PORTAL_NAME 78607}); 78608/* -----------------------------------------------------------------------------------------------*/ const $f1701beae083dbae$export$be92b6f5f03c0fe9 = (/* unused pure expression or super */ null && ($f1701beae083dbae$export$602eac185826482c)); 78609 78610 78611 78612 78613 78614 78615;// CONCATENATED MODULE: ./node_modules/@radix-ui/react-presence/dist/index.module.js 78616 78617 78618 78619 78620 78621 78622 78623 78624 78625 78626function $fe963b355347cc68$export$3e6543de14f8614f(initialState, machine) { 78627 return (0,external_React_.useReducer)((state, event)=>{ 78628 const nextState = machine[state][event]; 78629 return nextState !== null && nextState !== void 0 ? nextState : state; 78630 }, initialState); 78631} 78632 78633 78634const $921a889cee6df7e8$export$99c2b779aa4e8b8b = (props)=>{ 78635 const { present: present , children: children } = props; 78636 const presence = $921a889cee6df7e8$var$usePresence(present); 78637 const child = typeof children === 'function' ? children({ 78638 present: presence.isPresent 78639 }) : external_React_.Children.only(children); 78640 const ref = $6ed0406888f73fc4$export$c7b2cbe3552a0d05(presence.ref, child.ref); 78641 const forceMount = typeof children === 'function'; 78642 return forceMount || presence.isPresent ? /*#__PURE__*/ (0,external_React_.cloneElement)(child, { 78643 ref: ref 78644 }) : null; 78645}; 78646$921a889cee6df7e8$export$99c2b779aa4e8b8b.displayName = 'Presence'; 78647/* ------------------------------------------------------------------------------------------------- 78648 * usePresence 78649 * -----------------------------------------------------------------------------------------------*/ function $921a889cee6df7e8$var$usePresence(present) { 78650 const [node1, setNode] = (0,external_React_.useState)(); 78651 const stylesRef = (0,external_React_.useRef)({}); 78652 const prevPresentRef = (0,external_React_.useRef)(present); 78653 const prevAnimationNameRef = (0,external_React_.useRef)('none'); 78654 const initialState = present ? 'mounted' : 'unmounted'; 78655 const [state, send] = $fe963b355347cc68$export$3e6543de14f8614f(initialState, { 78656 mounted: { 78657 UNMOUNT: 'unmounted', 78658 ANIMATION_OUT: 'unmountSuspended' 78659 }, 78660 unmountSuspended: { 78661 MOUNT: 'mounted', 78662 ANIMATION_END: 'unmounted' 78663 }, 78664 unmounted: { 78665 MOUNT: 'mounted' 78666 } 78667 }); 78668 (0,external_React_.useEffect)(()=>{ 78669 const currentAnimationName = $921a889cee6df7e8$var$getAnimationName(stylesRef.current); 78670 prevAnimationNameRef.current = state === 'mounted' ? currentAnimationName : 'none'; 78671 }, [ 78672 state 78673 ]); 78674 $9f79659886946c16$export$e5c5a5f917a5871c(()=>{ 78675 const styles = stylesRef.current; 78676 const wasPresent = prevPresentRef.current; 78677 const hasPresentChanged = wasPresent !== present; 78678 if (hasPresentChanged) { 78679 const prevAnimationName = prevAnimationNameRef.current; 78680 const currentAnimationName = $921a889cee6df7e8$var$getAnimationName(styles); 78681 if (present) send('MOUNT'); 78682 else if (currentAnimationName === 'none' || (styles === null || styles === void 0 ? void 0 : styles.display) === 'none') // If there is no exit animation or the element is hidden, animations won't run 78683 // so we unmount instantly 78684 send('UNMOUNT'); 78685 else { 78686 /** 78687 * When `present` changes to `false`, we check changes to animation-name to 78688 * determine whether an animation has started. We chose this approach (reading 78689 * computed styles) because there is no `animationrun` event and `animationstart`
78690 * fires after `animation-delay` has expired which would be too late. 78691 */ const isAnimating = prevAnimationName !== currentAnimationName; 78692 if (wasPresent && isAnimating) send('ANIMATION_OUT'); 78693 else send('UNMOUNT'); 78694 } 78695 prevPresentRef.current = present; 78696 } 78697 }, [ 78698 present, 78699 send 78700 ]); 78701 $9f79659886946c16$export$e5c5a5f917a5871c(()=>{ 78702 if (node1) { 78703 /** 78704 * Triggering an ANIMATION_OUT during an ANIMATION_IN will fire an `animationcancel` 78705 * event for ANIMATION_IN after we have entered `unmountSuspended` state. So, we 78706 * make sure we only trigger ANIMATION_END for the currently active animation. 78707 */ const handleAnimationEnd = (event)=>{ 78708 const currentAnimationName = $921a889cee6df7e8$var$getAnimationName(stylesRef.current); 78709 const isCurrentAnimation = currentAnimationName.includes(event.animationName); 78710 if (event.target === node1 && isCurrentAnimation) // With React 18 concurrency this update is applied 78711 // a frame after the animation ends, creating a flash of visible content. 78712 // By manually flushing we ensure they sync within a frame, removing the flash. 78713 (0,external_ReactDOM_namespaceObject.flushSync)(()=>send('ANIMATION_END') 78714 ); 78715 }; 78716 const handleAnimationStart = (event)=>{ 78717 if (event.target === node1) // if animation occurred, store its name as the previous animation. 78718 prevAnimationNameRef.current = $921a889cee6df7e8$var$getAnimationName(stylesRef.current); 78719 }; 78720 node1.addEventListener('animationstart', handleAnimationStart); 78721 node1.addEventListener('animationcancel', handleAnimationEnd); 78722 node1.addEventListener('animationend', handleAnimationEnd); 78723 return ()=>{ 78724 node1.removeEventListener('animationstart', handleAnimationStart); 78725 node1.removeEventListener('animationcancel', handleAnimationEnd); 78726 node1.removeEventListener('animationend', handleAnimationEnd); 78727 }; 78728 } else // Transition to the unmounted state if the node is removed prematurely. 78729 // We avoid doing so during cleanup as the node may change but still exist. 78730 send('ANIMATION_END'); 78731 }, [ 78732 node1, 78733 send 78734 ]); 78735 return { 78736 isPresent: [ 78737 'mounted', 78738 'unmountSuspended' 78739 ].includes(state), 78740 ref: (0,external_React_.useCallback)((node)=>{ 78741 if (node) stylesRef.current = getComputedStyle(node); 78742 setNode(node); 78743 }, []) 78744 }; 78745} 78746/* -----------------------------------------------------------------------------------------------*/ function $921a889cee6df7e8$var$getAnimationName(styles) { 78747 return (styles === null || styles === void 0 ? void 0 : styles.animationName) || 'none'; 78748} 78749 78750 78751 78752 78753 78754 78755;// CONCATENATED MODULE: ./node_modules/@radix-ui/react-roving-focus/node_modules/@radix-ui/react-slot/dist/index.module.js 78756 78757 78758 78759 78760 78761 78762 78763/* ------------------------------------------------------------------------------------------------- 78764 * Slot 78765 * -----------------------------------------------------------------------------------------------*/ const node_modules_radix_ui_react_slot_dist_index_module_$5e63c961fc1ce211$export$8c6ed5c666ac1360 = /*#__PURE__*/ (0,external_React_.forwardRef)((props, forwardedRef)=>{ 78766 const { children: children , ...slotProps } = props; 78767 const childrenArray = external_React_.Children.toArray(children); 78768 const slottable = childrenArray.find(node_modules_radix_ui_react_slot_dist_index_module_$5e63c961fc1ce211$var$isSlottable); 78769 if (slottable) { 78770 // the new element to render is the one passed as a child of `Slottable` 78771 const newElement = slottable.props.children; 78772 const newChildren = childrenArray.map((child)=>{ 78773 if (child === slottable) { 78774 // because the new element will be the one rendered, we are only interested 78775 // in grabbing its children (`newElement.props.children`) 78776 if (external_React_.Children.count(newElement) > 1) return external_React_.Children.only(null); 78777 return /*#__PURE__*/ (0,external_React_.isValidElement)(newElement) ? newElement.props.children : null; 78778 } else return child; 78779 }); 78780 return /*#__PURE__*/ (0,external_React_.createElement)(node_modules_radix_ui_react_slot_dist_index_module_$5e63c961fc1ce211$var$SlotClone, extends_extends({}, slotProps, { 78781 ref: forwardedRef 78782 }), /*#__PURE__*/ (0,external_React_.isValidElement)(newElement) ? /*#__PURE__*/ (0,external_React_.cloneElement)(newElement, undefined, newChildren) : null); 78783 } 78784 return /*#__PURE__*/ (0,external_React_.createElement)(node_modules_radix_ui_react_slot_dist_index_module_$5e63c961fc1ce211$var$SlotClone, extends_extends({}, slotProps, { 78785 ref: forwardedRef 78786 }), children); 78787}); 78788node_modules_radix_ui_react_slot_dist_index_module_$5e63c961fc1ce211$export$8c6ed5c666ac1360.displayName = 'Slot'; 78789/* ------------------------------------------------------------------------------------------------- 78790 * SlotClone 78791 * -----------------------------------------------------------------------------------------------*/ const node_modules_radix_ui_react_slot_dist_index_module_$5e63c961fc1ce211$var$SlotClone = /*#__PURE__*/ (0,external_React_.forwardRef)((props, forwardedRef)=>{ 78792 const { children: children , ...slotProps } = props; 78793 if (/*#__PURE__*/ (0,external_React_.isValidElement)(children)) return /*#__PURE__*/ (0,external_React_.cloneElement)(children, { 78794 ...node_modules_radix_ui_react_slot_dist_index_module_$5e63c961fc1ce211$var$mergeProps(slotProps, children.props),
vendor: 6,189 bytes, lines 78795-78929
78795 ref: $6ed0406888f73fc4$export$43e446d32b3d21af(forwardedRef, children.ref) 78796 }); 78797 return external_React_.Children.count(children) > 1 ? external_React_.Children.only(null) : null; 78798}); 78799node_modules_radix_ui_react_slot_dist_index_module_$5e63c961fc1ce211$var$SlotClone.displayName = 'SlotClone'; 78800/* ------------------------------------------------------------------------------------------------- 78801 * Slottable 78802 * -----------------------------------------------------------------------------------------------*/ const node_modules_radix_ui_react_slot_dist_index_module_$5e63c961fc1ce211$export$d9f1ccf0bdb05d45 = ({ children: children })=>{ 78803 return /*#__PURE__*/ (0,external_React_.createElement)(external_React_.Fragment, null, children); 78804}; 78805/* ---------------------------------------------------------------------------------------------- */ function node_modules_radix_ui_react_slot_dist_index_module_$5e63c961fc1ce211$var$isSlottable(child) { 78806 return /*#__PURE__*/ (0,external_React_.isValidElement)(child) && child.type === node_modules_radix_ui_react_slot_dist_index_module_$5e63c961fc1ce211$export$d9f1ccf0bdb05d45; 78807} 78808function node_modules_radix_ui_react_slot_dist_index_module_$5e63c961fc1ce211$var$mergeProps(slotProps, childProps) { 78809 // all child props should override 78810 const overrideProps = { 78811 ...childProps 78812 }; 78813 for(const propName in childProps){ 78814 const slotPropValue = slotProps[propName]; 78815 const childPropValue = childProps[propName]; 78816 const isHandler = /^on[A-Z]/.test(propName); 78817 if (isHandler) { 78818 // if the handler exists on both, we compose them 78819 if (slotPropValue && childPropValue) overrideProps[propName] = (...args)=>{ 78820 childPropValue(...args); 78821 slotPropValue(...args); 78822 }; 78823 else if (slotPropValue) overrideProps[propName] = slotPropValue; 78824 } else if (propName === 'style') overrideProps[propName] = { 78825 ...slotPropValue, 78826 ...childPropValue 78827 }; 78828 else if (propName === 'className') overrideProps[propName] = [ 78829 slotPropValue, 78830 childPropValue 78831 ].filter(Boolean).join(' '); 78832 } 78833 return { 78834 ...slotProps, 78835 ...overrideProps 78836 }; 78837} 78838const node_modules_radix_ui_react_slot_dist_index_module_$5e63c961fc1ce211$export$be92b6f5f03c0fe9 = (/* unused pure expression or super */ null && (node_modules_radix_ui_react_slot_dist_index_module_$5e63c961fc1ce211$export$8c6ed5c666ac1360)); 78839 78840 78841 78842 78843 78844 78845;// CONCATENATED MODULE: ./node_modules/@radix-ui/react-roving-focus/node_modules/@radix-ui/react-primitive/dist/index.module.js 78846 78847 78848 78849 78850 78851 78852 78853 78854 78855const _radix_ui_react_primitive_dist_index_module_$8927f6f2acc4f386$var$NODES = [ 78856 'a', 78857 'button', 78858 'div', 78859 'form', 78860 'h2', 78861 'h3', 78862 'img', 78863 'input', 78864 'label', 78865 'li', 78866 'nav', 78867 'ol', 78868 'p', 78869 'span', 78870 'svg', 78871 'ul' 78872]; // Temporary while we await merge of this fix: 78873// https://github.com/DefinitelyTyped/DefinitelyTyped/pull/55396 78874// prettier-ignore 78875/* ------------------------------------------------------------------------------------------------- 78876 * Primitive 78877 * -----------------------------------------------------------------------------------------------*/ const _radix_ui_react_primitive_dist_index_module_$8927f6f2acc4f386$export$250ffa63cdc0d034 = _radix_ui_react_primitive_dist_index_module_$8927f6f2acc4f386$var$NODES.reduce((primitive, node)=>{ 78878 const Node = /*#__PURE__*/ (0,external_React_.forwardRef)((props, forwardedRef)=>{ 78879 const { asChild: asChild , ...primitiveProps } = props; 78880 const Comp = asChild ? node_modules_radix_ui_react_slot_dist_index_module_$5e63c961fc1ce211$export$8c6ed5c666ac1360 : node; 78881 (0,external_React_.useEffect)(()=>{ 78882 window[Symbol.for('radix-ui')] = true; 78883 }, []); 78884 return /*#__PURE__*/ (0,external_React_.createElement)(Comp, extends_extends({}, primitiveProps, { 78885 ref: forwardedRef 78886 })); 78887 }); 78888 Node.displayName = `Primitive.${node}`; 78889 return { 78890 ...primitive, 78891 [node]: Node 78892 }; 78893}, {}); 78894/* ------------------------------------------------------------------------------------------------- 78895 * Utils 78896 * -----------------------------------------------------------------------------------------------*/ /** 78897 * Flush custom event dispatch 78898 * https://github.com/radix-ui/primitives/pull/1378 78899 * 78900 * React batches *all* event handlers since version 18, this introduces certain considerations when using custom event types. 78901 * 78902 * Internally, React prioritises events in the following order: 78903 * - discrete 78904 * - continuous 78905 * - default 78906 * 78907 * https://github.com/facebook/react/blob/a8a4742f1c54493df00da648a3f9d26e3db9c8b5/packages/react-dom/src/events/ReactDOMEventListener.js#L294-L350 78908 * 78909 * `discrete` is an important distinction as updates within these events are applied immediately. 78910 * React however, is not able to infer the priority of custom event types due to how they are detected internally. 78911 * Because of this, it's possible for updates from custom events to be unexpectedly batched when 78912 * dispatched by another `discrete` event. 78913 * 78914 * In order to ensure that updates from custom events are applied predictably, we need to manually flush the batch. 78915 * This utility should be used when dispatching a custom event from within another `discrete` event, this utility 78916 * is not nessesary when dispatching known event types, or if dispatching a custom type inside a non-discrete event. 78917 * For example: 78918 * 78919 * dispatching a known click ð 78920 * target.dispatchEvent(new Event(âclickâ)) 78921 * 78922 * dispatching a custom type within a non-discrete event ð 78923 * onScroll={(event) => event.target.dispatchEvent(new CustomEvent(âcustomTypeâ))} 78924 * 78925 * dispatching a custom type within a `discrete` event ð 78926 * onPointerDown={(event) => dispatchDiscreteCustomEvent(event.target, new CustomEvent(âcustomTypeâ))} 78927 * 78928 * Note: though React classifies `focus`, `focusin` and `focusout` events as `discrete`, it's not recommended to use 78929 * this utility with them. This is because it's possible for those handlers to be called implicitly during render
78930 * e.g. when focus is within a component as it is unmounted, or when managing focus on mount. 78931 */ function _radix_ui_react_primitive_dist_index_module_$8927f6f2acc4f386$export$6d1a0317bde7de7f(target, event) { 78932 if (target) $4q5Fq$flushSync(()=>target.dispatchEvent(event) 78933 ); 78934} 78935/* -----------------------------------------------------------------------------------------------*/ const _radix_ui_react_primitive_dist_index_module_$8927f6f2acc4f386$export$be92b6f5f03c0fe9 = (/* unused pure expression or super */ null && (_radix_ui_react_primitive_dist_index_module_$8927f6f2acc4f386$export$250ffa63cdc0d034)); 78936 78937 78938 78939 78940 78941 78942;// CONCATENATED MODULE: ./node_modules/@radix-ui/react-roving-focus/dist/index.module.js 78943 78944 78945 78946 78947 78948 78949 78950 78951 78952 78953 78954 78955 78956 78957 78958 78959 78960 78961 78962 78963 78964 78965 78966const $d7bdfb9eb0fdf311$var$ENTRY_FOCUS = 'rovingFocusGroup.onEntryFocus'; 78967const $d7bdfb9eb0fdf311$var$EVENT_OPTIONS = { 78968 bubbles: false, 78969 cancelable: true 78970}; 78971/* ------------------------------------------------------------------------------------------------- 78972 * RovingFocusGroup 78973 * -----------------------------------------------------------------------------------------------*/ const $d7bdfb9eb0fdf311$var$GROUP_NAME = 'RovingFocusGroup'; 78974const [$d7bdfb9eb0fdf311$var$Collection, $d7bdfb9eb0fdf311$var$useCollection, $d7bdfb9eb0fdf311$var$createCollectionScope] = $e02a7d9cb1dc128c$export$c74125a8e3af6bb2($d7bdfb9eb0fdf311$var$GROUP_NAME); 78975const [$d7bdfb9eb0fdf311$var$createRovingFocusGroupContext, $d7bdfb9eb0fdf311$export$c7109489551a4f4] = $c512c27ab02ef895$export$50c7b4e9d9f19c1($d7bdfb9eb0fdf311$var$GROUP_NAME, [ 78976 $d7bdfb9eb0fdf311$var$createCollectionScope 78977]); 78978const [$d7bdfb9eb0fdf311$var$RovingFocusProvider, $d7bdfb9eb0fdf311$var$useRovingFocusContext] = $d7bdfb9eb0fdf311$var$createRovingFocusGroupContext($d7bdfb9eb0fdf311$var$GROUP_NAME); 78979const $d7bdfb9eb0fdf311$export$8699f7c8af148338 = /*#__PURE__*/ (0,external_React_.forwardRef)((props, forwardedRef)=>{ 78980 return /*#__PURE__*/ (0,external_React_.createElement)($d7bdfb9eb0fdf311$var$Collection.Provider, { 78981 scope: props.__scopeRovingFocusGroup 78982 }, /*#__PURE__*/ (0,external_React_.createElement)($d7bdfb9eb0fdf311$var$Collection.Slot, { 78983 scope: props.__scopeRovingFocusGroup 78984 }, /*#__PURE__*/ (0,external_React_.createElement)($d7bdfb9eb0fdf311$var$RovingFocusGroupImpl, extends_extends({}, props, { 78985 ref: forwardedRef 78986 })))); 78987}); 78988/*#__PURE__*/ Object.assign($d7bdfb9eb0fdf311$export$8699f7c8af148338, { 78989 displayName: $d7bdfb9eb0fdf311$var$GROUP_NAME 78990}); 78991/* -----------------------------------------------------------------------------------------------*/ const $d7bdfb9eb0fdf311$var$RovingFocusGroupImpl = /*#__PURE__*/ (0,external_React_.forwardRef)((props, forwardedRef)=>{ 78992 const { __scopeRovingFocusGroup: __scopeRovingFocusGroup , orientation: orientation , loop: loop = false , dir: dir , currentTabStopId: currentTabStopIdProp , defaultCurrentTabStopId: defaultCurrentTabStopId , onCurrentTabStopIdChange: onCurrentTabStopIdChange , onEntryFocus: onEntryFocus , ...groupProps } = props; 78993 const ref = (0,external_React_.useRef)(null); 78994 const composedRefs = $6ed0406888f73fc4$export$c7b2cbe3552a0d05(forwardedRef, ref); 78995 const direction = $f631663db3294ace$export$b39126d51d94e6f3(dir); 78996 const [currentTabStopId = null, setCurrentTabStopId] = $71cd76cc60e0454e$export$6f32135080cb4c3({ 78997 prop: currentTabStopIdProp, 78998 defaultProp: defaultCurrentTabStopId, 78999 onChange: onCurrentTabStopIdChange 79000 }); 79001 const [isTabbingBackOut, setIsTabbingBackOut] = (0,external_React_.useState)(false); 79002 const handleEntryFocus = $b1b2314f5f9a1d84$export$25bec8c6f54ee79a(onEntryFocus); 79003 const getItems = $d7bdfb9eb0fdf311$var$useCollection(__scopeRovingFocusGroup); 79004 const isClickFocusRef = (0,external_React_.useRef)(false); 79005 const [focusableItemsCount, setFocusableItemsCount] = (0,external_React_.useState)(0); 79006 (0,external_React_.useEffect)(()=>{ 79007 const node = ref.current; 79008 if (node) { 79009 node.addEventListener($d7bdfb9eb0fdf311$var$ENTRY_FOCUS, handleEntryFocus); 79010 return ()=>node.removeEventListener($d7bdfb9eb0fdf311$var$ENTRY_FOCUS, handleEntryFocus) 79011 ; 79012 } 79013 }, [ 79014 handleEntryFocus 79015 ]); 79016 return /*#__PURE__*/ (0,external_React_.createElement)($d7bdfb9eb0fdf311$var$RovingFocusProvider, { 79017 scope: __scopeRovingFocusGroup, 79018 orientation: orientation, 79019 dir: direction, 79020 loop: loop, 79021 currentTabStopId: currentTabStopId, 79022 onItemFocus: (0,external_React_.useCallback)((tabStopId)=>setCurrentTabStopId(tabStopId) 79023 , [ 79024 setCurrentTabStopId 79025 ]), 79026 onItemShiftTab: (0,external_React_.useCallback)(()=>setIsTabbingBackOut(true) 79027 , []), 79028 onFocusableItemAdd: (0,external_React_.useCallback)(()=>setFocusableItemsCount((prevCount)=>prevCount + 1 79029 ) 79030 , []), 79031 onFocusableItemRemove: (0,external_React_.useCallback)(()=>setFocusableItemsCount((prevCount)=>prevCount - 1 79032 ) 79033 , []) 79034 }, /*#__PURE__*/ (0,external_React_.createElement)(_radix_ui_react_primitive_dist_index_module_$8927f6f2acc4f386$export$250ffa63cdc0d034.div, extends_extends({ 79035 tabIndex: isTabbingBackOut || focusableItemsCount === 0 ? -1 : 0, 79036 "data-orientation": orientation 79037 }, groupProps, { 79038 ref: composedRefs, 79039 style: { 79040 outline: 'none', 79041 ...props.style 79042 }, 79043 onMouseDown: $e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onMouseDown, ()=>{ 79044 isClickFocusRef.current = true; 79045 }), 79046 onFocus: $e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onFocus, (event)=>{ 79047 // We normally wouldn't need this check, because we already check
vendor: 10,777 bytes, lines 79048-79286
79048 // that the focus is on the current target and not bubbling to it. 79049 // We do this because Safari doesn't focus buttons when clicked, and 79050 // instead, the wrapper will get focused and not through a bubbling event. 79051 const isKeyboardFocus = !isClickFocusRef.current; 79052 if (event.target === event.currentTarget && isKeyboardFocus && !isTabbingBackOut) { 79053 const entryFocusEvent = new CustomEvent($d7bdfb9eb0fdf311$var$ENTRY_FOCUS, $d7bdfb9eb0fdf311$var$EVENT_OPTIONS); 79054 event.currentTarget.dispatchEvent(entryFocusEvent); 79055 if (!entryFocusEvent.defaultPrevented) { 79056 const items = getItems().filter((item)=>item.focusable 79057 ); 79058 const activeItem = items.find((item)=>item.active 79059 ); 79060 const currentItem = items.find((item)=>item.id === currentTabStopId 79061 ); 79062 const candidateItems = [ 79063 activeItem, 79064 currentItem, 79065 ...items 79066 ].filter(Boolean); 79067 const candidateNodes = candidateItems.map((item)=>item.ref.current 79068 ); 79069 $d7bdfb9eb0fdf311$var$focusFirst(candidateNodes); 79070 } 79071 } 79072 isClickFocusRef.current = false; 79073 }), 79074 onBlur: $e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onBlur, ()=>setIsTabbingBackOut(false) 79075 ) 79076 }))); 79077}); 79078/* ------------------------------------------------------------------------------------------------- 79079 * RovingFocusGroupItem 79080 * -----------------------------------------------------------------------------------------------*/ const $d7bdfb9eb0fdf311$var$ITEM_NAME = 'RovingFocusGroupItem'; 79081const $d7bdfb9eb0fdf311$export$ab9df7c53fe8454 = /*#__PURE__*/ (0,external_React_.forwardRef)((props, forwardedRef)=>{ 79082 const { __scopeRovingFocusGroup: __scopeRovingFocusGroup , focusable: focusable = true , active: active = false , tabStopId: tabStopId , ...itemProps } = props; 79083 const autoId = $1746a345f3d73bb7$export$f680877a34711e37(); 79084 const id = tabStopId || autoId; 79085 const context = $d7bdfb9eb0fdf311$var$useRovingFocusContext($d7bdfb9eb0fdf311$var$ITEM_NAME, __scopeRovingFocusGroup); 79086 const isCurrentTabStop = context.currentTabStopId === id; 79087 const getItems = $d7bdfb9eb0fdf311$var$useCollection(__scopeRovingFocusGroup); 79088 const { onFocusableItemAdd: onFocusableItemAdd , onFocusableItemRemove: onFocusableItemRemove } = context; 79089 (0,external_React_.useEffect)(()=>{ 79090 if (focusable) { 79091 onFocusableItemAdd(); 79092 return ()=>onFocusableItemRemove() 79093 ; 79094 } 79095 }, [ 79096 focusable, 79097 onFocusableItemAdd, 79098 onFocusableItemRemove 79099 ]); 79100 return /*#__PURE__*/ (0,external_React_.createElement)($d7bdfb9eb0fdf311$var$Collection.ItemSlot, { 79101 scope: __scopeRovingFocusGroup, 79102 id: id, 79103 focusable: focusable, 79104 active: active 79105 }, /*#__PURE__*/ (0,external_React_.createElement)(_radix_ui_react_primitive_dist_index_module_$8927f6f2acc4f386$export$250ffa63cdc0d034.span, extends_extends({ 79106 tabIndex: isCurrentTabStop ? 0 : -1, 79107 "data-orientation": context.orientation 79108 }, itemProps, { 79109 ref: forwardedRef, 79110 onMouseDown: $e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onMouseDown, (event)=>{ 79111 // We prevent focusing non-focusable items on `mousedown`. 79112 // Even though the item has tabIndex={-1}, that only means take it out of the tab order. 79113 if (!focusable) event.preventDefault(); // Safari doesn't focus a button when clicked so we run our logic on mousedown also 79114 else context.onItemFocus(id); 79115 }), 79116 onFocus: $e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onFocus, ()=>context.onItemFocus(id) 79117 ), 79118 onKeyDown: $e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onKeyDown, (event)=>{ 79119 if (event.key === 'Tab' && event.shiftKey) { 79120 context.onItemShiftTab(); 79121 return; 79122 } 79123 if (event.target !== event.currentTarget) return; 79124 const focusIntent = $d7bdfb9eb0fdf311$var$getFocusIntent(event, context.orientation, context.dir); 79125 if (focusIntent !== undefined) { 79126 event.preventDefault(); 79127 const items = getItems().filter((item)=>item.focusable 79128 ); 79129 let candidateNodes = items.map((item)=>item.ref.current 79130 ); 79131 if (focusIntent === 'last') candidateNodes.reverse(); 79132 else if (focusIntent === 'prev' || focusIntent === 'next') { 79133 if (focusIntent === 'prev') candidateNodes.reverse(); 79134 const currentIndex = candidateNodes.indexOf(event.currentTarget); 79135 candidateNodes = context.loop ? $d7bdfb9eb0fdf311$var$wrapArray(candidateNodes, currentIndex + 1) : candidateNodes.slice(currentIndex + 1); 79136 } 79137 /** 79138 * Imperative focus during keydown is risky so we prevent React's batching updates 79139 * to avoid potential bugs. See: https://github.com/facebook/react/issues/20332 79140 */ setTimeout(()=>$d7bdfb9eb0fdf311$var$focusFirst(candidateNodes) 79141 ); 79142 } 79143 }) 79144 }))); 79145}); 79146/*#__PURE__*/ Object.assign($d7bdfb9eb0fdf311$export$ab9df7c53fe8454, { 79147 displayName: $d7bdfb9eb0fdf311$var$ITEM_NAME 79148}); 79149/* -----------------------------------------------------------------------------------------------*/ // prettier-ignore 79150const $d7bdfb9eb0fdf311$var$MAP_KEY_TO_FOCUS_INTENT = { 79151 ArrowLeft: 'prev', 79152 ArrowUp: 'prev', 79153 ArrowRight: 'next', 79154 ArrowDown: 'next', 79155 PageUp: 'first', 79156 Home: 'first', 79157 PageDown: 'last', 79158 End: 'last' 79159}; 79160function $d7bdfb9eb0fdf311$var$getDirectionAwareKey(key, dir) { 79161 if (dir !== 'rtl') return key; 79162 return key === 'ArrowLeft' ? 'ArrowRight' : key === 'ArrowRight' ? 'ArrowLeft' : key; 79163} 79164function $d7bdfb9eb0fdf311$var$getFocusIntent(event, orientation, dir) { 79165 const key = $d7bdfb9eb0fdf311$var$getDirectionAwareKey(event.key, dir); 79166 if (orientation === 'vertical' && [ 79167 'ArrowLeft', 79168 'ArrowRight' 79169 ].includes(key)) return undefined; 79170 if (orientation === 'horizontal' && [ 79171 'ArrowUp', 79172 'ArrowDown' 79173 ].includes(key)) return undefined; 79174 return $d7bdfb9eb0fdf311$var$MAP_KEY_TO_FOCUS_INTENT[key]; 79175} 79176function $d7bdfb9eb0fdf311$var$focusFirst(candidates) { 79177 const PREVIOUSLY_FOCUSED_ELEMENT = document.activeElement; 79178 for (const candidate of candidates){ 79179 // if focus is already where we want to go, we don't want to keep going through the candidates 79180 if (candidate === PREVIOUSLY_FOCUSED_ELEMENT) return; 79181 candidate.focus(); 79182 if (document.activeElement !== PREVIOUSLY_FOCUSED_ELEMENT) return; 79183 } 79184} 79185/** 79186 * Wraps an array around itself at a given start index 79187 * Example: `wrapArray(['a', 'b', 'c', 'd'], 2) === ['c', 'd', 'a', 'b']` 79188 */ function $d7bdfb9eb0fdf311$var$wrapArray(array, startIndex) { 79189 return array.map((_, index)=>array[(startIndex + index) % array.length] 79190 ); 79191} 79192const $d7bdfb9eb0fdf311$export$be92b6f5f03c0fe9 = $d7bdfb9eb0fdf311$export$8699f7c8af148338; 79193const $d7bdfb9eb0fdf311$export$6d08773d2e66f8f2 = $d7bdfb9eb0fdf311$export$ab9df7c53fe8454; 79194 79195 79196 79197 79198 79199 79200;// CONCATENATED MODULE: ./node_modules/aria-hidden/dist/es2015/index.js 79201var getDefaultParent = function (originalTarget) { 79202 if (typeof document === 'undefined') { 79203 return null; 79204 } 79205 var sampleTarget = Array.isArray(originalTarget) ? originalTarget[0] : originalTarget; 79206 return sampleTarget.ownerDocument.body; 79207}; 79208var counterMap = new WeakMap(); 79209var uncontrolledNodes = new WeakMap(); 79210var markerMap = {}; 79211var lockCount = 0; 79212var unwrapHost = function (node) { 79213 return node && (node.host || unwrapHost(node.parentNode)); 79214}; 79215var correctTargets = function (parent, targets) { 79216 return targets 79217 .map(function (target) { 79218 if (parent.contains(target)) { 79219 return target; 79220 } 79221 var correctedTarget = unwrapHost(target); 79222 if (correctedTarget && parent.contains(correctedTarget)) { 79223 return correctedTarget; 79224 } 79225 console.error('aria-hidden', target, 'in not contained inside', parent, '. Doing nothing'); 79226 return null; 79227 }) 79228 .filter(function (x) { return Boolean(x); }); 79229}; 79230/** 79231 * Marks everything except given node(or nodes) as aria-hidden 79232 * @param {Element | Element[]} originalTarget - elements to keep on the page 79233 * @param [parentNode] - top element, defaults to document.body 79234 * @param {String} [markerName] - a special attribute to mark every node 79235 * @param {String} [controlAttribute] - html Attribute to control 79236 * @return {Undo} undo command 79237 */ 79238var applyAttributeToOthers = function (originalTarget, parentNode, markerName, controlAttribute) { 79239 var targets = correctTargets(parentNode, Array.isArray(originalTarget) ? originalTarget : [originalTarget]); 79240 if (!markerMap[markerName]) { 79241 markerMap[markerName] = new WeakMap(); 79242 } 79243 var markerCounter = markerMap[markerName]; 79244 var hiddenNodes = []; 79245 var elementsToKeep = new Set(); 79246 var elementsToStop = new Set(targets); 79247 var keep = function (el) { 79248 if (!el || elementsToKeep.has(el)) { 79249 return; 79250 } 79251 elementsToKeep.add(el); 79252 keep(el.parentNode); 79253 }; 79254 targets.forEach(keep); 79255 var deep = function (parent) { 79256 if (!parent || elementsToStop.has(parent)) { 79257 return; 79258 } 79259 Array.prototype.forEach.call(parent.children, function (node) { 79260 if (elementsToKeep.has(node)) { 79261 deep(node); 79262 } 79263 else { 79264 var attr = node.getAttribute(controlAttribute); 79265 var alreadyHidden = attr !== null && attr !== 'false'; 79266 var counterValue = (counterMap.get(node) || 0) + 1; 79267 var markerValue = (markerCounter.get(node) || 0) + 1; 79268 counterMap.set(node, counterValue); 79269 markerCounter.set(node, markerValue); 79270 hiddenNodes.push(node); 79271 if (counterValue === 1 && alreadyHidden) { 79272 uncontrolledNodes.set(node, true); 79273 } 79274 if (markerValue === 1) { 79275 node.setAttribute(markerName, 'true'); 79276 } 79277 if (!alreadyHidden) { 79278 node.setAttribute(controlAttribute, 'true'); 79279 } 79280 } 79281 }); 79282 }; 79283 deep(parentNode); 79284 elementsToKeep.clear(); 79285 lockCount++; 79286 return function () {
79287 hiddenNodes.forEach(function (node) { 79288 var counterValue = counterMap.get(node) - 1; 79289 var markerValue = markerCounter.get(node) - 1; 79290 counterMap.set(node, counterValue); 79291 markerCounter.set(node, markerValue); 79292 if (!counterValue) { 79293 if (!uncontrolledNodes.has(node)) { 79294 node.removeAttribute(controlAttribute); 79295 } 79296 uncontrolledNodes.delete(node); 79297 } 79298 if (!markerValue) { 79299 node.removeAttribute(markerName); 79300 } 79301 }); 79302 lockCount--; 79303 if (!lockCount) { 79304 // clear 79305 counterMap = new WeakMap(); 79306 counterMap = new WeakMap(); 79307 uncontrolledNodes = new WeakMap(); 79308 markerMap = {}; 79309 } 79310 }; 79311}; 79312/** 79313 * Marks everything except given node(or nodes) as aria-hidden 79314 * @param {Element | Element[]} originalTarget - elements to keep on the page 79315 * @param [parentNode] - top element, defaults to document.body 79316 * @param {String} [markerName] - a special attribute to mark every node 79317 * @return {Undo} undo command 79318 */ 79319var hideOthers = function (originalTarget, parentNode, markerName) { 79320 if (markerName === void 0) { markerName = 'data-aria-hidden'; } 79321 var targets = Array.from(Array.isArray(originalTarget) ? originalTarget : [originalTarget]); 79322 var activeParentNode = parentNode || getDefaultParent(originalTarget); 79323 if (!activeParentNode) { 79324 return function () { return null; }; 79325 } 79326 // we should not hide ariaLive elements - https://github.com/theKashey/aria-hidden/issues/10 79327 targets.push.apply(targets, Array.from(activeParentNode.querySelectorAll('[aria-live]'))); 79328 return applyAttributeToOthers(targets, activeParentNode, markerName, 'aria-hidden'); 79329}; 79330/** 79331 * Marks everything except given node(or nodes) as inert 79332 * @param {Element | Element[]} originalTarget - elements to keep on the page 79333 * @param [parentNode] - top element, defaults to document.body 79334 * @param {String} [markerName] - a special attribute to mark every node 79335 * @return {Undo} undo command 79336 */ 79337var inertOthers = function (originalTarget, parentNode, markerName) { 79338 if (markerName === void 0) { markerName = 'data-inert-ed'; } 79339 var activeParentNode = parentNode || getDefaultParent(originalTarget); 79340 if (!activeParentNode) { 79341 return function () { return null; }; 79342 } 79343 return applyAttributeToOthers(originalTarget, activeParentNode, markerName, 'inert'); 79344}; 79345/** 79346 * @returns if current browser supports inert 79347 */ 79348var es2015_supportsInert = function () { 79349 return typeof HTMLElement !== 'undefined' && HTMLElement.prototype.hasOwnProperty('inert'); 79350}; 79351/** 79352 * Automatic function to "suppress" DOM elements - _hide_ or _inert_ in the best possible way 79353 * @param {Element | Element[]} originalTarget - elements to keep on the page 79354 * @param [parentNode] - top element, defaults to document.body 79355 * @param {String} [markerName] - a special attribute to mark every node 79356 * @return {Undo} undo command 79357 */ 79358var suppressOthers = function (originalTarget, parentNode, markerName) { 79359 if (markerName === void 0) { markerName = 'data-suppressed'; } 79360 return (es2015_supportsInert() ? inertOthers : hideOthers)(originalTarget, parentNode, markerName); 79361}; 79362 79363;// CONCATENATED MODULE: ./node_modules/react-remove-scroll-bar/dist/es2015/constants.js 79364var zeroRightClassName = 'right-scroll-bar-position'; 79365var fullWidthClassName = 'width-before-scroll-bar'; 79366var noScrollbarsClassName = 'with-scroll-bars-hidden'; 79367/** 79368 * Name of a CSS variable containing the amount of "hidden" scrollbar 79369 * ! might be undefined ! use will fallback! 79370 */ 79371var removedBarSizeVariable = '--removed-body-scroll-bar-size'; 79372 79373;// CONCATENATED MODULE: ./node_modules/use-callback-ref/dist/es2015/assignRef.js 79374/** 79375 * Assigns a value for a given ref, no matter of the ref format 79376 * @param {RefObject} ref - a callback function or ref object 79377 * @param value - a new value 79378 * 79379 * @see https://github.com/theKashey/use-callback-ref#assignref 79380 * @example 79381 * const refObject = useRef(); 79382 * const refFn = (ref) => {....} 79383 * 79384 * assignRef(refObject, "refValue"); 79385 * assignRef(refFn, "refValue"); 79386 */ 79387function assignRef(ref, value) { 79388 if (typeof ref === 'function') { 79389 ref(value); 79390 } 79391 else if (ref) { 79392 ref.current = value; 79393 } 79394 return ref; 79395} 79396 79397;// CONCATENATED MODULE: ./node_modules/use-callback-ref/dist/es2015/useRef.js 79398 79399/** 79400 * creates a MutableRef with ref change callback 79401 * @param initialValue - initial ref value 79402 * @param {Function} callback - a callback to run when value changes 79403 * 79404 * @example 79405 * const ref = useCallbackRef(0, (newValue, oldValue) => console.log(oldValue, '->', newValue); 79406 * ref.current = 1; 79407 * // prints 0 -> 1 79408 * 79409 * @see https://reactjs.org/docs/hooks-reference.html#useref 79410 * @see https://github.com/theKashey/use-callback-ref#usecallbackref---to-replace-reactuseref 79411 * @returns {MutableRefObject} 79412 */ 79413function useCallbackRef(initialValue, callback) { 79414 var ref = (0,external_React_.useState)(function () { return ({ 79415 // value 79416 value: initialValue, 79417 // last callback 79418 callback: callback, 79419 // "memoized" public interface 79420 facade: { 79421 get current() { 79422 return ref.value; 79423 }, 79424 set current(value) { 79425 var last = ref.value; 79426 if (last !== value) { 79427 ref.value = value; 79428 ref.callback(value, last); 79429 } 79430 }, 79431 }, 79432 }); })[0]; 79433 // update callback 79434 ref.callback = callback; 79435 return ref.facade; 79436} 79437 79438;// CONCATENATED MODULE: ./node_modules/use-callback-ref/dist/es2015/useMergeRef.js 79439 79440 79441/** 79442 * Merges two or more refs together providing a single interface to set their value 79443 * @param {RefObject|Ref} refs 79444 * @returns {MutableRefObject} - a new ref, which translates all changes to {refs} 79445 * 79446 * @see {@link mergeRefs} a version without buit-in memoization 79447 * @see https://github.com/theKashey/use-callback-ref#usemergerefs 79448 * @example 79449 * const Component = React.forwardRef((props, ref) => { 79450 * const ownRef = useRef(); 79451 * const domRef = useMergeRefs([ref, ownRef]); // ð merge together 79452 * return <div ref={domRef}>...</div> 79453 * } 79454 */ 79455function useMergeRef_useMergeRefs(refs, defaultValue) { 79456 return useCallbackRef(defaultValue || null, function (newValue) { return refs.forEac
vendor: 8,664 bytes, lines 79456-79719
79456h(function (ref) { return assignRef(ref, newValue); }); }); 79457} 79458 79459;// CONCATENATED MODULE: ./node_modules/use-sidecar/dist/es2015/medium.js 79460 79461function ItoI(a) { 79462 return a; 79463} 79464function innerCreateMedium(defaults, middleware) { 79465 if (middleware === void 0) { middleware = ItoI; } 79466 var buffer = []; 79467 var assigned = false; 79468 var medium = { 79469 read: function () { 79470 if (assigned) { 79471 throw new Error('Sidecar: could not `read` from an `assigned` medium. `read` could be used only with `useMedium`.'); 79472 } 79473 if (buffer.length) { 79474 return buffer[buffer.length - 1]; 79475 } 79476 return defaults; 79477 }, 79478 useMedium: function (data) { 79479 var item = middleware(data, assigned); 79480 buffer.push(item); 79481 return function () { 79482 buffer = buffer.filter(function (x) { return x !== item; }); 79483 }; 79484 }, 79485 assignSyncMedium: function (cb) { 79486 assigned = true; 79487 while (buffer.length) { 79488 var cbs = buffer; 79489 buffer = []; 79490 cbs.forEach(cb); 79491 } 79492 buffer = { 79493 push: function (x) { return cb(x); }, 79494 filter: function () { return buffer; }, 79495 }; 79496 }, 79497 assignMedium: function (cb) { 79498 assigned = true; 79499 var pendingQueue = []; 79500 if (buffer.length) { 79501 var cbs = buffer; 79502 buffer = []; 79503 cbs.forEach(cb); 79504 pendingQueue = buffer; 79505 } 79506 var executeQueue = function () { 79507 var cbs = pendingQueue; 79508 pendingQueue = []; 79509 cbs.forEach(cb); 79510 }; 79511 var cycle = function () { return Promise.resolve().then(executeQueue); }; 79512 cycle(); 79513 buffer = { 79514 push: function (x) { 79515 pendingQueue.push(x); 79516 cycle(); 79517 }, 79518 filter: function (filter) { 79519 pendingQueue = pendingQueue.filter(filter); 79520 return buffer; 79521 }, 79522 }; 79523 }, 79524 }; 79525 return medium; 79526} 79527function createMedium(defaults, middleware) { 79528 if (middleware === void 0) { middleware = ItoI; } 79529 return innerCreateMedium(defaults, middleware); 79530} 79531// eslint-disable-next-line @typescript-eslint/ban-types 79532function createSidecarMedium(options) { 79533 if (options === void 0) { options = {}; } 79534 var medium = innerCreateMedium(null); 79535 medium.options = __assign({ async: true, ssr: false }, options); 79536 return medium; 79537} 79538 79539;// CONCATENATED MODULE: ./node_modules/@radix-ui/react-menu/node_modules/react-remove-scroll/dist/es2015/medium.js 79540 79541var effectCar = createSidecarMedium(); 79542 79543;// CONCATENATED MODULE: ./node_modules/@radix-ui/react-menu/node_modules/react-remove-scroll/dist/es2015/UI.js 79544 79545 79546 79547 79548 79549var nothing = function () { 79550 return; 79551}; 79552/** 79553 * Removes scrollbar from the page and contain the scroll within the Lock 79554 */ 79555var RemoveScroll = external_React_.forwardRef(function (props, parentRef) { 79556 var ref = external_React_.useRef(null); 79557 var _a = external_React_.useState({ 79558 onScrollCapture: nothing, 79559 onWheelCapture: nothing, 79560 onTouchMoveCapture: nothing, 79561 }), callbacks = _a[0], setCallbacks = _a[1]; 79562 var forwardProps = props.forwardProps, children = props.children, className = props.className, removeScrollBar = props.removeScrollBar, enabled = props.enabled, shards = props.shards, sideCar = props.sideCar, noIsolation = props.noIsolation, inert = props.inert, allowPinchZoom = props.allowPinchZoom, _b = props.as, Container = _b === void 0 ? 'div' : _b, rest = __rest(props, ["forwardProps", "children", "className", "removeScrollBar", "enabled", "shards", "sideCar", "noIsolation", "inert", "allowPinchZoom", "as"]); 79563 var SideCar = sideCar; 79564 var containerRef = useMergeRef_useMergeRefs([ref, parentRef]); 79565 var containerProps = __assign(__assign({}, rest), callbacks); 79566 return (external_React_.createElement(external_React_.Fragment, null, 79567 enabled && (external_React_.createElement(SideCar, { sideCar: effectCar, removeScrollBar: removeScrollBar, shards: shards, noIsolation: noIsolation, inert: inert, setCallbacks: setCallbacks, allowPinchZoom: !!allowPinchZoom, lockRef: ref })), 79568 forwardProps ? (external_React_.cloneElement(external_React_.Children.only(children), __assign(__assign({}, containerProps), { ref: containerRef }))) : (external_React_.createElement(Container, __assign({}, containerProps, { className: className, ref: containerRef }), children)))); 79569}); 79570RemoveScroll.defaultProps = { 79571 enabled: true, 79572 removeScrollBar: true, 79573 inert: false, 79574}; 79575RemoveScroll.classNames = { 79576 fullWidth: fullWidthClassName, 79577 zeroRight: zeroRightClassName, 79578}; 79579 79580 79581;// CONCATENATED MODULE: ./node_modules/use-sidecar/dist/es2015/exports.js 79582 79583 79584var SideCar = function (_a) { 79585 var sideCar = _a.sideCar, rest = __rest(_a, ["sideCar"]); 79586 if (!sideCar) { 79587 throw new Error('Sidecar: please provide `sideCar` property to import the right car'); 79588 } 79589 var Target = sideCar.read(); 79590 if (!Target) { 79591 throw new Error('Sidecar medium not found'); 79592 } 79593 return external_React_.createElement(Target, __assign({}, rest)); 79594}; 79595SideCar.isSideCarExport = true; 79596function exportSidecar(medium, exported) { 79597 medium.useMedium(exported); 79598 return SideCar; 79599} 79600 79601;// CONCATENATED MODULE: ./node_modules/get-nonce/dist/es2015/index.js 79602var currentNonce; 79603var setNonce = function (nonce) { 79604 currentNonce = nonce; 79605}; 79606var getNonce = function () { 79607 if (currentNonce) { 79608 return currentNonce; 79609 } 79610 if (true) { 79611 return __webpack_require__.nc; 79612 } 79613 return undefined; 79614}; 79615 79616;// CONCATENATED MODULE: ./node_modules/react-style-singleton/dist/es2015/singleton.js 79617 79618function makeStyleTag() { 79619 if (!document) 79620 return null; 79621 var tag = document.createElement('style'); 79622 tag.type = 'text/css'; 79623 var nonce = getNonce(); 79624 if (nonce) { 79625 tag.setAttribute('nonce', nonce); 79626 } 79627 return tag; 79628} 79629function injectStyles(tag, css) { 79630 // @ts-ignore 79631 if (tag.styleSheet) { 79632 // @ts-ignore 79633 tag.styleSheet.cssText = css; 79634 } 79635 else { 79636 tag.appendChild(document.createTextNode(css)); 79637 } 79638} 79639function insertStyleTag(tag) { 79640 var head = document.head || document.getElementsByTagName('head')[0]; 79641 head.appendChild(tag); 79642} 79643var stylesheetSingleton = function () { 79644 var counter = 0; 79645 var stylesheet = null; 79646 return { 79647 add: function (style) { 79648 if (counter == 0) { 79649 if ((stylesheet = makeStyleTag())) { 79650 injectStyles(stylesheet, style); 79651 insertStyleTag(stylesheet); 79652 } 79653 } 79654 counter++; 79655 }, 79656 remove: function () { 79657 counter--; 79658 if (!counter && stylesheet) { 79659 stylesheet.parentNode && stylesheet.parentNode.removeChild(stylesheet); 79660 stylesheet = null; 79661 } 79662 }, 79663 }; 79664}; 79665 79666;// CONCATENATED MODULE: ./node_modules/react-style-singleton/dist/es2015/hook.js 79667 79668 79669/** 79670 * creates a hook to control style singleton 79671 * @see {@link styleSingleton} for a safer component version 79672 * @example 79673 * ```tsx 79674 * const useStyle = styleHookSingleton(); 79675 * /// 79676 * useStyle('body { overflow: hidden}'); 79677 */ 79678var styleHookSingleton = function () { 79679 var sheet = stylesheetSingleton(); 79680 return function (styles, isDynamic) { 79681 external_React_.useEffect(function () { 79682 sheet.add(styles); 79683 return function () { 79684 sheet.remove(); 79685 }; 79686 }, [styles && isDynamic]); 79687 }; 79688}; 79689 79690;// CONCATENATED MODULE: ./node_modules/react-style-singleton/dist/es2015/component.js 79691 79692/** 79693 * create a Component to add styles on demand 79694 * - styles are added when first instance is mounted 79695 * - styles are removed when the last instance is unmounted 79696 * - changing styles in runtime does nothing unless dynamic is set. But with multiple components that can lead to the undefined behavior 79697 */ 79698var styleSingleton = function () { 79699 var useStyle = styleHookSingleton(); 79700 var Sheet = function (_a) { 79701 var styles = _a.styles, dynamic = _a.dynamic; 79702 useStyle(styles, dynamic); 79703 return null; 79704 }; 79705 return Sheet; 79706}; 79707 79708;// CONCATENATED MODULE: ./node_modules/react-style-singleton/dist/es2015/index.js 79709 79710 79711 79712 79713;// CONCATENATED MODULE: ./node_modules/react-remove-scroll-bar/dist/es2015/utils.js 79714var zeroGap = { 79715 left: 0, 79716 top: 0, 79717 right: 0, 79718 gap: 0, 79719};
vendor: 4,192 bytes, lines 79720-79801
79720var utils_parse = function (x) { return parseInt(x || '', 10) || 0; }; 79721var getOffset = function (gapMode) { 79722 var cs = window.getComputedStyle(document.body); 79723 var left = cs[gapMode === 'padding' ? 'paddingLeft' : 'marginLeft']; 79724 var top = cs[gapMode === 'padding' ? 'paddingTop' : 'marginTop']; 79725 var right = cs[gapMode === 'padding' ? 'paddingRight' : 'marginRight']; 79726 return [utils_parse(left), utils_parse(top), utils_parse(right)]; 79727}; 79728var getGapWidth = function (gapMode) { 79729 if (gapMode === void 0) { gapMode = 'margin'; } 79730 if (typeof window === 'undefined') { 79731 return zeroGap; 79732 } 79733 var offsets = getOffset(gapMode); 79734 var documentWidth = document.documentElement.clientWidth; 79735 var windowWidth = window.innerWidth; 79736 return { 79737 left: offsets[0], 79738 top: offsets[1], 79739 right: offsets[2], 79740 gap: Math.max(0, windowWidth - documentWidth + offsets[2] - offsets[0]), 79741 }; 79742}; 79743 79744;// CONCATENATED MODULE: ./node_modules/react-remove-scroll-bar/dist/es2015/component.js 79745 79746 79747 79748 79749var Style = styleSingleton(); 79750// important tip - once we measure scrollBar width and remove them 79751// we could not repeat this operation 79752// thus we are using style-singleton - only the first "yet correct" style will be applied. 79753var getStyles = function (_a, allowRelative, gapMode, important) { 79754 var left = _a.left, top = _a.top, right = _a.right, gap = _a.gap; 79755 if (gapMode === void 0) { gapMode = 'margin'; } 79756 return "\n .".concat(noScrollbarsClassName, " {\n overflow: hidden ").concat(important, ";\n padding-right: ").concat(gap, "px ").concat(important, ";\n }\n body {\n overflow: hidden ").concat(important, ";\n overscroll-behavior: contain;\n ").concat([ 79757 allowRelative && "position: relative ".concat(important, ";"), 79758 gapMode === 'margin' && 79759 "\n padding-left: ".concat(left, "px;\n padding-top: ").concat(top, "px;\n padding-right: ").concat(right, "px;\n margin-left:0;\n margin-top:0;\n margin-right: ").concat(gap, "px ").concat(important, ";\n "), 79760 gapMode === 'padding' && "padding-right: ".concat(gap, "px ").concat(important, ";"), 79761 ] 79762 .filter(Boolean) 79763 .join(''), "\n }\n \n .").concat(zeroRightClassName, " {\n right: ").concat(gap, "px ").concat(important, ";\n }\n \n .").concat(fullWidthClassName, " {\n margin-right: ").concat(gap, "px ").concat(important, ";\n }\n \n .").concat(zeroRightClassName, " .").concat(zeroRightClassName, " {\n right: 0 ").concat(important, ";\n }\n \n .").concat(fullWidthClassName, " .").concat(fullWidthClassName, " {\n margin-right: 0 ").concat(important, ";\n }\n \n body {\n ").concat(removedBarSizeVariable, ": ").concat(gap, "px;\n }\n"); 79764}; 79765/** 79766 * Removes page scrollbar and blocks page scroll when mounted 79767 */ 79768var RemoveScrollBar = function (props) { 79769 var noRelative = props.noRelative, noImportant = props.noImportant, _a = props.gapMode, gapMode = _a === void 0 ? 'margin' : _a; 79770 /* 79771 gap will be measured on every component mount 79772 however it will be used only by the "first" invocation 79773 due to singleton nature of <Style 79774 */ 79775 var gap = external_React_.useMemo(function () { return getGapWidth(gapMode); }, [gapMode]); 79776 return external_React_.createElement(Style, { styles: getStyles(gap, !noRelative, gapMode, !noImportant ? '!important' : '') }); 79777}; 79778 79779;// CONCATENATED MODULE: ./node_modules/react-remove-scroll-bar/dist/es2015/index.js 79780 79781 79782 79783 79784 79785;// CONCATENATED MODULE: ./node_modules/@radix-ui/react-menu/node_modules/react-remove-scroll/dist/es2015/aggresiveCapture.js 79786var passiveSupported = false; 79787if (typeof window !== 'undefined') { 79788 try { 79789 var aggresiveCapture_options = Object.defineProperty({}, 'passive', { 79790 get: function () { 79791 passiveSupported = true; 79792 return true; 79793 }, 79794 }); 79795 // @ts-ignore 79796 window.addEventListener('test', aggresiveCapture_options, aggresiveCapture_options); 79797 // @ts-ignore 79798 window.removeEventListener('test', aggresiveCapture_options, aggresiveCapture_options); 79799 } 79800 catch (err) { 79801 passiveSupported = false;
vendor: 12,109 bytes, lines 79802-80110
79802 } 79803} 79804var nonPassive = passiveSupported ? { passive: false } : false; 79805 79806;// CONCATENATED MODULE: ./node_modules/@radix-ui/react-menu/node_modules/react-remove-scroll/dist/es2015/handleScroll.js 79807var alwaysContainsScroll = function (node) { 79808 // textarea will always _contain_ scroll inside self. It only can be hidden 79809 return node.tagName === 'TEXTAREA'; 79810}; 79811var elementCanBeScrolled = function (node, overflow) { 79812 var styles = window.getComputedStyle(node); 79813 return ( 79814 // not-not-scrollable 79815 styles[overflow] !== 'hidden' && 79816 // contains scroll inside self 79817 !(styles.overflowY === styles.overflowX && !alwaysContainsScroll(node) && styles[overflow] === 'visible')); 79818}; 79819var elementCouldBeVScrolled = function (node) { return elementCanBeScrolled(node, 'overflowY'); }; 79820var elementCouldBeHScrolled = function (node) { return elementCanBeScrolled(node, 'overflowX'); }; 79821var locationCouldBeScrolled = function (axis, node) { 79822 var current = node; 79823 do { 79824 // Skip over shadow root 79825 if (typeof ShadowRoot !== 'undefined' && current instanceof ShadowRoot) { 79826 current = current.host; 79827 } 79828 var isScrollable = elementCouldBeScrolled(axis, current); 79829 if (isScrollable) { 79830 var _a = getScrollVariables(axis, current), s = _a[1], d = _a[2]; 79831 if (s > d) { 79832 return true; 79833 } 79834 } 79835 current = current.parentNode; 79836 } while (current && current !== document.body); 79837 return false; 79838}; 79839var getVScrollVariables = function (_a) { 79840 var scrollTop = _a.scrollTop, scrollHeight = _a.scrollHeight, clientHeight = _a.clientHeight; 79841 return [ 79842 scrollTop, 79843 scrollHeight, 79844 clientHeight, 79845 ]; 79846}; 79847var getHScrollVariables = function (_a) { 79848 var scrollLeft = _a.scrollLeft, scrollWidth = _a.scrollWidth, clientWidth = _a.clientWidth; 79849 return [ 79850 scrollLeft, 79851 scrollWidth, 79852 clientWidth, 79853 ]; 79854}; 79855var elementCouldBeScrolled = function (axis, node) { 79856 return axis === 'v' ? elementCouldBeVScrolled(node) : elementCouldBeHScrolled(node); 79857}; 79858var getScrollVariables = function (axis, node) { 79859 return axis === 'v' ? getVScrollVariables(node) : getHScrollVariables(node); 79860}; 79861var getDirectionFactor = function (axis, direction) { 79862 /** 79863 * If the element's direction is rtl (right-to-left), then scrollLeft is 0 when the scrollbar is at its rightmost position, 79864 * and then increasingly negative as you scroll towards the end of the content. 79865 * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeft 79866 */ 79867 return axis === 'h' && direction === 'rtl' ? -1 : 1; 79868}; 79869var handleScroll = function (axis, endTarget, event, sourceDelta, noOverscroll) { 79870 var directionFactor = getDirectionFactor(axis, window.getComputedStyle(endTarget).direction); 79871 var delta = directionFactor * sourceDelta; 79872 // find scrollable target 79873 var target = event.target; 79874 var targetInLock = endTarget.contains(target); 79875 var shouldCancelScroll = false; 79876 var isDeltaPositive = delta > 0; 79877 var availableScroll = 0; 79878 var availableScrollTop = 0; 79879 do { 79880 var _a = getScrollVariables(axis, target), position = _a[0], scroll_1 = _a[1], capacity = _a[2]; 79881 var elementScroll = scroll_1 - capacity - directionFactor * position; 79882 if (position || elementScroll) { 79883 if (elementCouldBeScrolled(axis, target)) { 79884 availableScroll += elementScroll; 79885 availableScrollTop += position; 79886 } 79887 } 79888 target = target.parentNode; 79889 } while ( 79890 // portaled content 79891 (!targetInLock && target !== document.body) || 79892 // self content 79893 (targetInLock && (endTarget.contains(target) || endTarget === target))); 79894 if (isDeltaPositive && ((noOverscroll && availableScroll === 0) || (!noOverscroll && delta > availableScroll))) { 79895 shouldCancelScroll = true; 79896 } 79897 else if (!isDeltaPositive && 79898 ((noOverscroll && availableScrollTop === 0) || (!noOverscroll && -delta > availableScrollTop))) { 79899 shouldCancelScroll = true; 79900 } 79901 return shouldCancelScroll; 79902}; 79903 79904;// CONCATENATED MODULE: ./node_modules/@radix-ui/react-menu/node_modules/react-remove-scroll/dist/es2015/SideEffect.js 79905 79906 79907 79908 79909 79910 79911var getTouchXY = function (event) { 79912 return 'changedTouches' in event ? [event.changedTouches[0].clientX, event.changedTouches[0].clientY] : [0, 0]; 79913}; 79914var getDeltaXY = function (event) { return [event.deltaX, event.deltaY]; }; 79915var extractRef = function (ref) { 79916 return ref && 'current' in ref ? ref.current : ref; 79917}; 79918var deltaCompare = function (x, y) { return x[0] === y[0] && x[1] === y[1]; }; 79919var generateStyle = function (id) { return "\n .block-interactivity-".concat(id, " {pointer-events: none;}\n .allow-interactivity-").concat(id, " {pointer-events: all;}\n"); }; 79920var SideEffect_idCounter = 0; 79921var lockStack = []; 79922function RemoveScrollSideCar(props) { 79923 var shouldPreventQueue = external_React_.useRef([]); 79924 var touchStartRef = external_React_.useRef([0, 0]); 79925 var activeAxis = external_React_.useRef(); 79926 var id = external_React_.useState(SideEffect_idCounter++)[0]; 79927 var Style = external_React_.useState(function () { return styleSingleton(); })[0]; 79928 var lastProps = external_React_.useRef(props); 79929 external_React_.useEffect(function () { 79930 lastProps.current = props; 79931 }, [props]); 79932 external_React_.useEffect(function () { 79933 if (props.inert) { 79934 document.body.classList.add("block-interactivity-".concat(id)); 79935 var allow_1 = __spreadArray([props.lockRef.current], (props.shards || []).map(extractRef), true).filter(Boolean); 79936 allow_1.forEach(function (el) { return el.classList.add("allow-interactivity-".concat(id)); }); 79937 return function () { 79938 document.body.classList.remove("block-interactivity-".concat(id)); 79939 allow_1.forEach(function (el) { return el.classList.remove("allow-interactivity-".concat(id)); }); 79940 }; 79941 } 79942 return; 79943 }, [props.inert, props.lockRef.current, props.shards]); 79944 var shouldCancelEvent = external_React_.useCallback(function (event, parent) { 79945 if ('touches' in event && event.touches.length === 2) { 79946 return !lastProps.current.allowPinchZoom; 79947 } 79948 var touch = getTouchXY(event); 79949 var touchStart = touchStartRef.current; 79950 var deltaX = 'deltaX' in event ? event.deltaX : touchStart[0] - touch[0]; 79951 var deltaY = 'deltaY' in event ? event.deltaY : touchStart[1] - touch[1]; 79952 var currentAxis; 79953 var target = event.target; 79954 var moveDirection = Math.abs(deltaX) > Math.abs(deltaY) ? 'h' : 'v'; 79955 // allow horizontal touch move on Range inputs. They will not cause any scroll 79956 if ('touches' in event && moveDirection === 'h' && target.type === 'range') { 79957 return false; 79958 } 79959 var canBeScrolledInMainDirection = locationCouldBeScrolled(moveDirection, target); 79960 if (!canBeScrolledInMainDirection) { 79961 return true; 79962 } 79963 if (canBeScrolledInMainDirection) { 79964 currentAxis = moveDirection; 79965 } 79966 else { 79967 currentAxis = moveDirection === 'v' ? 'h' : 'v'; 79968 canBeScrolledInMainDirection = locationCouldBeScrolled(moveDirection, target); 79969 // other axis might be not scrollable 79970 } 79971 if (!canBeScrolledInMainDirection) { 79972 return false; 79973 } 79974 if (!activeAxis.current && 'changedTouches' in event && (deltaX || deltaY)) { 79975 activeAxis.current = currentAxis; 79976 } 79977 if (!currentAxis) { 79978 return true; 79979 } 79980 var cancelingAxis = activeAxis.current || currentAxis; 79981 return handleScroll(cancelingAxis, parent, event, cancelingAxis === 'h' ? deltaX : deltaY, true); 79982 }, []); 79983 var shouldPrevent = external_React_.useCallback(function (_event) { 79984 var event = _event; 79985 if (!lockStack.length || lockStack[lockStack.length - 1] !== Style) { 79986 // not the last active 79987 return; 79988 } 79989 var delta = 'deltaY' in event ? getDeltaXY(event) : getTouchXY(event); 79990 var sourceEvent = shouldPreventQueue.current.filter(function (e) { return e.name === event.type && e.target === event.target && deltaCompare(e.delta, delta); })[0]; 79991 // self event, and should be canceled 79992 if (sourceEvent && sourceEvent.should) { 79993 if (event.cancelable) { 79994 event.preventDefault(); 79995 } 79996 return; 79997 } 79998 // outside or shard event 79999 if (!sourceEvent) { 80000 var shardNodes = (lastProps.current.shards || []) 80001 .map(extractRef) 80002 .filter(Boolean) 80003 .filter(function (node) { return node.contains(event.target); }); 80004 var shouldStop = shardNodes.length > 0 ? shouldCancelEvent(event, shardNodes[0]) : !lastProps.current.noIsolation; 80005 if (shouldStop) { 80006 if (event.cancelable) { 80007 event.preventDefault(); 80008 } 80009 } 80010 } 80011 }, []); 80012 var shouldCancel = external_React_.useCallback(function (name, delta, target, should) { 80013 var event = { name: name, delta: delta, target: target, should: should }; 80014 shouldPreventQueue.current.push(event); 80015 setTimeout(function () { 80016 shouldPreventQueue.current = shouldPreventQueue.current.filter(function (e) { return e !== event; }); 80017 }, 1); 80018 }, []); 80019 var scrollTouchStart = external_React_.useCallback(function (event) { 80020 touchStartRef.current = getTouchXY(event); 80021 activeAxis.current = undefined; 80022 }, []); 80023 var scrollWheel = external_React_.useCallback(function (event) { 80024 shouldCancel(event.type, getDeltaXY(event), event.target, shouldCancelEvent(event, props.lockRef.current)); 80025 }, []); 80026 var scrollTouchMove = external_React_.useCallback(function (event) { 80027 shouldCancel(event.type, getTouchXY(event), event.target, shouldCancelEvent(event, props.lockRef.current)); 80028 }, []); 80029 external_React_.useEffect(function () { 80030 lockStack.push(Style); 80031 props.setCallbacks({ 80032 onScrollCapture: scrollWheel, 80033 onWheelCapture: scrollWheel, 80034 onTouchMoveCapture: scrollTouchMove, 80035 }); 80036 document.addEventListener('wheel', shouldPrevent, nonPassive); 80037 document.addEventListener('touchmove', shouldPrevent, nonPassive); 80038 document.addEventListener('touchstart', scrollTouchStart, nonPassive); 80039 return function () { 80040 lockStack = lockStack.filter(function (inst) { return inst !== Style; }); 80041 document.removeEventListener('wheel', shouldPrevent, nonPassive); 80042 document.removeEventListener('touchmove', shouldPrevent, nonPassive); 80043 document.removeEventListener('touchstart', scrollTouchStart, nonPassive); 80044 }; 80045 }, []); 80046 var removeScrollBar = props.removeScrollBar, inert = props.inert; 80047 return (external_React_.createElement(external_React_.Fragment, null, 80048 inert ? external_React_.createElement(Style, { styles: generateStyle(id) }) : null, 80049 removeScrollBar ? external_React_.createElement(RemoveScrollBar, { gapMode: "margin" }) : null)); 80050} 80051 80052;// CONCATENATED MODULE: ./node_modules/@radix-ui/react-menu/node_modules/react-remove-scroll/dist/es2015/sidecar.js 80053 80054 80055 80056/* harmony default export */ const sidecar = (exportSidecar(effectCar, RemoveScrollSideCar)); 80057 80058;// CONCATENATED MODULE: ./node_modules/@radix-ui/react-menu/node_modules/react-remove-scroll/dist/es2015/Combination.js 80059 80060 80061 80062 80063var ReactRemoveScroll = external_React_.forwardRef(function (props, ref) { return (external_React_.createElement(RemoveScroll, __assign({}, props, { ref: ref, sideCar: sidecar }))); }); 80064ReactRemoveScroll.classNames = RemoveScroll.classNames; 80065/* harmony default export */ const Combination = (ReactRemoveScroll); 80066 80067;// CONCATENATED MODULE: ./node_modules/@radix-ui/react-menu/dist/index.module.js 80068 80069 80070 80071 80072 80073 80074 80075 80076 80077 80078 80079 80080 80081 80082 80083 80084 80085 80086 80087 80088 80089 80090 80091 80092 80093 80094 80095 80096 80097 80098 80099 80100 80101 80102 80103 80104 80105 80106 80107 80108 80109 80110
80111const $6cc32821e9371a1c$var$SELECTION_KEYS = [ 80112 'Enter', 80113 ' ' 80114]; 80115const $6cc32821e9371a1c$var$FIRST_KEYS = [ 80116 'ArrowDown', 80117 'PageUp', 80118 'Home' 80119]; 80120const $6cc32821e9371a1c$var$LAST_KEYS = [ 80121 'ArrowUp', 80122 'PageDown', 80123 'End' 80124]; 80125const $6cc32821e9371a1c$var$FIRST_LAST_KEYS = [ 80126 ...$6cc32821e9371a1c$var$FIRST_KEYS, 80127 ...$6cc32821e9371a1c$var$LAST_KEYS 80128]; 80129const $6cc32821e9371a1c$var$SUB_OPEN_KEYS = { 80130 ltr: [ 80131 ...$6cc32821e9371a1c$var$SELECTION_KEYS, 80132 'ArrowRight' 80133 ], 80134 rtl: [ 80135 ...$6cc32821e9371a1c$var$SELECTION_KEYS, 80136 'ArrowLeft' 80137 ] 80138}; 80139const $6cc32821e9371a1c$var$SUB_CLOSE_KEYS = { 80140 ltr: [ 80141 'ArrowLeft' 80142 ], 80143 rtl: [ 80144 'ArrowRight' 80145 ] 80146}; 80147/* ------------------------------------------------------------------------------------------------- 80148 * Menu 80149 * -----------------------------------------------------------------------------------------------*/ const $6cc32821e9371a1c$var$MENU_NAME = 'Menu'; 80150const [$6cc32821e9371a1c$var$Collection, $6cc32821e9371a1c$var$useCollection, $6cc32821e9371a1c$var$createCollectionScope] = $e02a7d9cb1dc128c$export$c74125a8e3af6bb2($6cc32821e9371a1c$var$MENU_NAME); 80151const [$6cc32821e9371a1c$var$createMenuContext, $6cc32821e9371a1c$export$4027731b685e72eb] = $c512c27ab02ef895$export$50c7b4e9d9f19c1($6cc32821e9371a1c$var$MENU_NAME, [ 80152 $6cc32821e9371a1c$var$createCollectionScope, 80153 $cf1ac5d9fe0e8206$export$722aac194ae923, 80154 $d7bdfb9eb0fdf311$export$c7109489551a4f4 80155]); 80156const $6cc32821e9371a1c$var$usePopperScope = $cf1ac5d9fe0e8206$export$722aac194ae923(); 80157const $6cc32821e9371a1c$var$useRovingFocusGroupScope = $d7bdfb9eb0fdf311$export$c7109489551a4f4(); 80158const [$6cc32821e9371a1c$var$MenuProvider, $6cc32821e9371a1c$var$useMenuContext] = $6cc32821e9371a1c$var$createMenuContext($6cc32821e9371a1c$var$MENU_NAME); 80159const [$6cc32821e9371a1c$var$MenuRootProvider, $6cc32821e9371a1c$var$useMenuRootContext] = $6cc32821e9371a1c$var$createMenuContext($6cc32821e9371a1c$var$MENU_NAME); 80160const $6cc32821e9371a1c$export$d9b273488cd8ce6f = (props)=>{ 80161 const { __scopeMenu: __scopeMenu , open: open = false , children: children , dir: dir , onOpenChange: onOpenChange , modal: modal = true } = props; 80162 const popperScope = $6cc32821e9371a1c$var$usePopperScope(__scopeMenu); 80163 const [content, setContent] = (0,external_React_.useState)(null); 80164 const isUsingKeyboardRef = (0,external_React_.useRef)(false); 80165 const handleOpenChange = $b1b2314f5f9a1d84$export$25bec8c6f54ee79a(onOpenChange); 80166 const direction = $f631663db3294ace$export$b39126d51d94e6f3(dir); 80167 (0,external_React_.useEffect)(()=>{ 80168 // Capture phase ensures we set the boolean before any side effects execute 80169 // in response to the key or pointer event as they might depend on this value. 80170 const handleKeyDown = ()=>{ 80171 isUsingKeyboardRef.current = true; 80172 document.addEventListener('pointerdown', handlePointer, { 80173 capture: true, 80174 once: true 80175 }); 80176 document.addEventListener('pointermove', handlePointer, { 80177 capture: true, 80178 once: true 80179 }); 80180 }; 80181 const handlePointer = ()=>isUsingKeyboardRef.current = false 80182 ; 80183 document.addEventListener('keydown', handleKeyDown, { 80184 capture: true 80185 }); 80186 return ()=>{ 80187 document.removeEventListener('keydown', handleKeyDown, { 80188 capture: true 80189 }); 80190 document.removeEventListener('pointerdown', handlePointer, { 80191 capture: true 80192 }); 80193 document.removeEventListener('pointermove', handlePointer, { 80194 capture: true 80195 }); 80196 }; 80197 }, []); 80198 return /*#__PURE__*/ (0,external_React_.createElement)($cf1ac5d9fe0e8206$export$be92b6f5f03c0fe9, popperScope, /*#__PURE__*/ (0,external_React_.createElement)($6cc32821e9371a1c$var$MenuProvider, { 80199 scope: __scopeMenu, 80200 open: open, 80201 onOpenChange: handleOpenChange, 80202 content: content, 80203 onContentChange: setContent 80204 }, /*#__PURE__*/ (0,external_React_.createElement)($6cc32821e9371a1c$var$MenuRootProvider, { 80205 scope: __scopeMenu, 80206 onClose: (0,external_React_.useCallback)(()=>handleOpenChange(false) 80207 , [ 80208 handleOpenChange 80209 ]), 80210 isUsingKeyboardRef: isUsingKeyboardRef, 80211 dir: direction, 80212 modal: modal 80213 }, children))); 80214}; 80215/*#__PURE__*/ Object.assign($6cc32821e9371a1c$export$d9b273488cd8ce6f, { 80216 displayName: $6cc32821e9371a1c$var$MENU_NAME 80217}); 80218/* ------------------------------------------------------------------------------------------------- 80219 * MenuAnchor 80220 * -----------------------------------------------------------------------------------------------*/ const $6cc32821e9371a1c$var$ANCHOR_NAME = 'MenuAnchor';
80221const $6cc32821e9371a1c$export$9fa5ebd18bee4d43 = /*#__PURE__*/ (0,external_React_.forwardRef)((props, forwardedRef)=>{ 80222 const { __scopeMenu: __scopeMenu , ...anchorProps } = props; 80223 const popperScope = $6cc32821e9371a1c$var$usePopperScope(__scopeMenu); 80224 return /*#__PURE__*/ (0,external_React_.createElement)($cf1ac5d9fe0e8206$export$b688253958b8dfe7, extends_extends({}, popperScope, anchorProps, { 80225 ref: forwardedRef 80226 })); 80227}); 80228/*#__PURE__*/ Object.assign($6cc32821e9371a1c$export$9fa5ebd18bee4d43, { 80229 displayName: $6cc32821e9371a1c$var$ANCHOR_NAME 80230}); 80231/* ------------------------------------------------------------------------------------------------- 80232 * MenuPortal 80233 * -----------------------------------------------------------------------------------------------*/ const $6cc32821e9371a1c$var$PORTAL_NAME = 'MenuPortal'; 80234const [$6cc32821e9371a1c$var$PortalProvider, $6cc32821e9371a1c$var$usePortalContext] = $6cc32821e9371a1c$var$createMenuContext($6cc32821e9371a1c$var$PORTAL_NAME, { 80235 forceMount: undefined 80236}); 80237const $6cc32821e9371a1c$export$793392f970497feb = (props)=>{ 80238 const { __scopeMenu: __scopeMenu , forceMount: forceMount , children: children , container: container } = props; 80239 const context = $6cc32821e9371a1c$var$useMenuContext($6cc32821e9371a1c$var$PORTAL_NAME, __scopeMenu); 80240 return /*#__PURE__*/ (0,external_React_.createElement)($6cc32821e9371a1c$var$PortalProvider, { 80241 scope: __scopeMenu, 80242 forceMount: forceMount 80243 }, /*#__PURE__*/ (0,external_React_.createElement)($921a889cee6df7e8$export$99c2b779aa4e8b8b, { 80244 present: forceMount || context.open 80245 }, /*#__PURE__*/ (0,external_React_.createElement)($f1701beae083dbae$export$602eac185826482c, { 80246 asChild: true, 80247 container: container 80248 }, children))); 80249}; 80250/*#__PURE__*/ Object.assign($6cc32821e9371a1c$export$793392f970497feb, { 80251 displayName: $6cc32821e9371a1c$var$PORTAL_NAME 80252}); 80253/* ------------------------------------------------------------------------------------------------- 80254 * MenuContent 80255 * -----------------------------------------------------------------------------------------------*/ const $6cc32821e9371a1c$var$CONTENT_NAME = 'MenuContent'; 80256const [$6cc32821e9371a1c$var$MenuContentProvider, $6cc32821e9371a1c$var$useMenuContentContext] = $6cc32821e9371a1c$var$createMenuContext($6cc32821e9371a1c$var$CONTENT_NAME); 80257const $6cc32821e9371a1c$export$479f0f2f71193efe = /*#__PURE__*/ (0,external_React_.forwardRef)((props, forwardedRef)=>{ 80258 const portalContext = $6cc32821e9371a1c$var$usePortalContext($6cc32821e9371a1c$var$CONTENT_NAME, props.__scopeMenu); 80259 const { forceMount: forceMount = portalContext.forceMount , ...contentProps } = props; 80260 const context = $6cc32821e9371a1c$var$useMenuContext($6cc32821e9371a1c$var$CONTENT_NAME, props.__scopeMenu); 80261 const rootContext = $6cc32821e9371a1c$var$useMenuRootContext($6cc32821e9371a1c$var$CONTENT_NAME, props.__scopeMenu); 80262 return /*#__PURE__*/ (0,external_React_.createElement)($6cc32821e9371a1c$var$Collection.Provider, { 80263 scope: props.__scopeMenu 80264 }, /*#__PURE__*/ (0,external_React_.createElement)($921a889cee6df7e8$export$99c2b779aa4e8b8b, { 80265 present: forceMount || context.open 80266 }, /*#__PURE__*/ (0,external_React_.createElement)($6cc32821e9371a1c$var$Collection.Slot, { 80267 scope: props.__scopeMenu 80268 }, rootContext.modal ? /*#__PURE__*/ (0,external_React_.createElement)($6cc32821e9371a1c$var$MenuRootContentModal, extends_extends({}, contentProps, { 80269 ref: forwardedRef 80270 })) : /*#__PURE__*/ (0,external_React_.createElement)($6cc32821e9371a1c$var$MenuRootContentNonModal, extends_extends({}, contentProps, { 80271 ref: forwardedRef 80272 }))))); 80273}); 80274/* ---------------------------------------------------------------------------------------------- */ const $6cc32821e9371a1c$var$MenuRootContentModal = /*#__PURE__*/ (0,external_React_.forwardRef)((props, forwardedRef)=>{ 80275 const context = $6cc32821e9371a1c$var$useMenuContext($6cc32821e9371a1c$var$CONTENT_NAME, props.__scopeMenu); 80276 const ref = (0,external_React_.useRef)(null);
80277 const composedRefs = $6ed0406888f73fc4$export$c7b2cbe3552a0d05(forwardedRef, ref); // Hide everything from ARIA except the `MenuContent` 80278 (0,external_React_.useEffect)(()=>{ 80279 const content = ref.current; 80280 if (content) return hideOthers(content); 80281 }, []); 80282 return /*#__PURE__*/ (0,external_React_.createElement)($6cc32821e9371a1c$var$MenuContentImpl, extends_extends({}, props, { 80283 ref: composedRefs // we make sure we're not trapping once it's been closed 80284 , 80285 trapFocus: context.open // make sure to only disable pointer events when open 80286 , 80287 disableOutsidePointerEvents: context.open, 80288 disableOutsideScroll: true // When focus is trapped, a `focusout` event may still happen. 80289 , 80290 onFocusOutside: $e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onFocusOutside, (event)=>event.preventDefault() 80291 , { 80292 checkForDefaultPrevented: false 80293 }), 80294 onDismiss: ()=>context.onOpenChange(false) 80295 })); 80296}); 80297const $6cc32821e9371a1c$var$MenuRootContentNonModal = /*#__PURE__*/ (0,external_React_.forwardRef)((props, forwardedRef)=>{ 80298 const context = $6cc32821e9371a1c$var$useMenuContext($6cc32821e9371a1c$var$CONTENT_NAME, props.__scopeMenu); 80299 return /*#__PURE__*/ (0,external_React_.createElement)($6cc32821e9371a1c$var$MenuContentImpl, extends_extends({}, props, { 80300 ref: forwardedRef, 80301 trapFocus: false, 80302 disableOutsidePointerEvents: false, 80303 disableOutsideScroll: false, 80304 onDismiss: ()=>context.onOpenChange(false) 80305 })); 80306}); 80307/* ---------------------------------------------------------------------------------------------- */ const $6cc32821e9371a1c$var$MenuContentImpl = /*#__PURE__*/ (0,external_React_.forwardRef)((props, forwardedRef)=>{ 80308 const { __scopeMenu: __scopeMenu , loop: loop = false , trapFocus: trapFocus , onOpenAutoFocus: onOpenAutoFocus , onCloseAutoFocus: onCloseAutoFocus , disableOutsidePointerEvents: disableOutsidePointerEvents , onEntryFocus: onEntryFocus , onEscapeKeyDown: onEscapeKeyDown , onPointerDownOutside: onPointerDownOutside , onFocusOutside: onFocusOutside , onInteractOutside: onInteractOutside , onDismiss: onDismiss , disableOutsideScroll: disableOutsideScroll , ...contentProps } = props; 80309 const context = $6cc32821e9371a1c$var$useMenuContext($6cc32821e9371a1c$var$CONTENT_NAME, __scopeMenu); 80310 const rootContext = $6cc32821e9371a1c$var$useMenuRootContext($6cc32821e9371a1c$var$CONTENT_NAME, __scopeMenu); 80311 const popperScope = $6cc32821e9371a1c$var$usePopperScope(__scopeMenu); 80312 const rovingFocusGroupScope = $6cc32821e9371a1c$var$useRovingFocusGroupScope(__scopeMenu); 80313 const getItems = $6cc32821e9371a1c$var$useCollection(__scopeMenu); 80314 const [currentItemId, setCurrentItemId] = (0,external_React_.useState)(null); 80315 const contentRef = (0,external_React_.useRef)(null); 80316 const composedRefs = $6ed0406888f73fc4$export$c7b2cbe3552a0d05(forwardedRef, contentRef, context.onContentChange); 80317 const timerRef = (0,external_React_.useRef)(0); 80318 const searchRef = (0,external_React_.useRef)(''); 80319 const pointerGraceTimerRef = (0,external_React_.useRef)(0); 80320 const pointerGraceIntentRef = (0,external_React_.useRef)(null); 80321 const pointerDirRef = (0,external_React_.useRef)('right'); 80322 const lastPointerXRef = (0,external_React_.useRef)(0); 80323 const ScrollLockWrapper = disableOutsideScroll ? Combination : external_React_.Fragment; 80324 const scrollLockWrapperProps = disableOutsideScroll ? { 80325 as: dist_index_module_$5e63c961fc1ce211$export$8c6ed5c666ac1360, 80326 allowPinchZoom: true 80327 } : undefined; 80328 const handleTypeaheadSearch = (key)=>{ 80329 var _items$find, _items$find2; 80330 const search = searchRef.current + key; 80331 const items = getItems().filter((item)=>!item.disabled 80332 ); 80333 const currentItem = document.activeElement; 80334 const currentMatch = (_items$find = items.find((item)=>item.ref.current === currentItem 80335 )) === null || _items$find === void 0 ? void 0 : _items$find.textValue; 80336 const values = items.map((item)=>item.textValue 80337 ); 80338 const nextMatch = $6cc32821e9371a1c$var$getNextMatch(values, search, currentMatch); 80339 const newItem = (_items$find2 = items.find((item)=>item.textValue === nextMatch 80340 )) === null || _items$find2 === void 0 ? void 0 : _items$find2.ref.current; // Reset `searchRef` 1 second after it was last updated 80341 (function updateSearch(value) { 80342 searchRef.current = value; 80343 window.clearTimeout(timerRef.current); 80344 if (value !== '') timerRef.current = window.setTimeout(()=>updateSearch('') 80345 , 1000); 80346 })(search); 80347 if (newItem) /** 80348 * Imperative focus during keydown is risky so we prevent React's batching updates 80349 * to avoid potential bugs. See: https://github.com/facebook/react/issues/20332 80350 */ setTimeout(()=>newItem.focus() 80351 ); 80352 }; 80353 (0,external_React_.useEffect)(()=>{ 80354 return ()=>window.clearTimeout(timerRef.current) 80355 ; 80356 }, []); // Make sure the whole tree has focus guards as our `MenuContent` may be 80357 // the last element in the DOM (beacuse of the `Portal`) 80358 $3db38b7d1fb3fe6a$export$b7ece24a22aeda8c(); 80359 const isPointerMovingToSubmenu = (0,external_React_.useCallback)((event)=>{ 80360 var _pointerGraceIntentRe, _pointerGraceIntentRe2; 80361 const isMovingTowards = pointerDirRef.current === ((_pointerGraceIntentRe = pointerGraceIntentRef.current) === null || _pointerGraceIntentRe === void 0 ? void 0 : _pointerGraceIntentRe.side); 80362 return isMovingTowards && $6cc32821e9371a1c$var$isPointerInGraceArea(event, (_pointerGraceIntentRe2 = pointerGraceIntentRef.current) === null || _pointerGraceIntentRe2 === void 0 ? void 0 : _pointerGraceIntentRe2.area); 80363 }, []); 80364 return /*#__PURE__*/ (0,external_React_.createElement)($6cc32821e9371a1c$var$MenuContentProvider, { 80365 scope: __scopeMenu, 80366 searchRef: searchRef, 80367 onItemEnter: (0,external_React_.useCallback)((event)=>{ 80368 if (isPointerMovingToSubmenu(event)) event.preventDefault(); 80369 }, [ 80370 isPointerMovingToSubmenu 80371 ]), 80372 onItemLeave: (0,external_React_.useCallback)((event)=>{ 80373 var _contentRef$current; 80374 if (isPointerMovingToSubmenu(event)) return; 80375 (_contentRef$current = contentRef.current) === null || _contentRef$current === void 0 || _contentRef$current.focus(); 80376 setCurrentItemId(null); 80377 }, [ 80378 isPointerMovingToSubmenu 80379 ]), 80380 onTriggerLeave: (0,external_React_.useCallback)((event)=>{ 80381 if (isPointerMovingToSubmenu(event)) event.preventDefault(); 80382 }, [ 80383 isPointerMovingToSubmenu 80384 ]), 80385 pointerGraceTimerRef: pointerGraceTimerRef, 80386 onPointerGraceIntentChange: (0,external_React_.useCallback)((intent)=>{ 80387 pointerGraceIntentRef.current = intent; 80388 }, []) 80389 }, /*#__PURE__*/ (0,external_React_.createElement)(ScrollLockWrapper, scrollLockWrapperProps, /*#__PURE__*/ (0,external_React_.createElement)($d3863c46a17e8a28$export$20e40289641fbbb6, { 80390 asChild: true, 80391 trapped: trapFocus, 80392 onMountAutoFocus: $e42e1063c40fb3ef$export$b9ecd428b558ff10(onOpenAutoFocus, (event)=>{ 80393 var _contentRef$current2; 80394 // when opening, explicitly focus the content area only and leave 80395 // `onEntryFocus` in control of focusing first item 80396 event.preventDefault(); 80397 (_contentRef$current2 = contentRef.current) === null || _contentRef$current2 === void 0 || _contentRef$current2.focu
vendor: 5,076 bytes, lines 80397-80492
80397s(); 80398 }), 80399 onUnmountAutoFocus: onCloseAutoFocus 80400 }, /*#__PURE__*/ (0,external_React_.createElement)($5cb92bef7577960e$export$177fb62ff3ec1f22, { 80401 asChild: true, 80402 disableOutsidePointerEvents: disableOutsidePointerEvents, 80403 onEscapeKeyDown: onEscapeKeyDown, 80404 onPointerDownOutside: onPointerDownOutside, 80405 onFocusOutside: onFocusOutside, 80406 onInteractOutside: onInteractOutside, 80407 onDismiss: onDismiss 80408 }, /*#__PURE__*/ (0,external_React_.createElement)($d7bdfb9eb0fdf311$export$be92b6f5f03c0fe9, extends_extends({ 80409 asChild: true 80410 }, rovingFocusGroupScope, { 80411 dir: rootContext.dir, 80412 orientation: "vertical", 80413 loop: loop, 80414 currentTabStopId: currentItemId, 80415 onCurrentTabStopIdChange: setCurrentItemId, 80416 onEntryFocus: $e42e1063c40fb3ef$export$b9ecd428b558ff10(onEntryFocus, (event)=>{ 80417 // only focus first item when using keyboard 80418 if (!rootContext.isUsingKeyboardRef.current) event.preventDefault(); 80419 }) 80420 }), /*#__PURE__*/ (0,external_React_.createElement)($cf1ac5d9fe0e8206$export$7c6e2c02157bb7d2, extends_extends({ 80421 role: "menu", 80422 "aria-orientation": "vertical", 80423 "data-state": $6cc32821e9371a1c$var$getOpenState(context.open), 80424 "data-radix-menu-content": "", 80425 dir: rootContext.dir 80426 }, popperScope, contentProps, { 80427 ref: composedRefs, 80428 style: { 80429 outline: 'none', 80430 ...contentProps.style 80431 }, 80432 onKeyDown: $e42e1063c40fb3ef$export$b9ecd428b558ff10(contentProps.onKeyDown, (event)=>{ 80433 // submenu key events bubble through portals. We only care about keys in this menu. 80434 const target = event.target; 80435 const isKeyDownInside = target.closest('[data-radix-menu-content]') === event.currentTarget; 80436 const isModifierKey = event.ctrlKey || event.altKey || event.metaKey; 80437 const isCharacterKey = event.key.length === 1; 80438 if (isKeyDownInside) { 80439 // menus should not be navigated using tab key so we prevent it 80440 if (event.key === 'Tab') event.preventDefault(); 80441 if (!isModifierKey && isCharacterKey) handleTypeaheadSearch(event.key); 80442 } // focus first/last item based on key pressed 80443 const content = contentRef.current; 80444 if (event.target !== content) return; 80445 if (!$6cc32821e9371a1c$var$FIRST_LAST_KEYS.includes(event.key)) return; 80446 event.preventDefault(); 80447 const items = getItems().filter((item)=>!item.disabled 80448 ); 80449 const candidateNodes = items.map((item)=>item.ref.current 80450 ); 80451 if ($6cc32821e9371a1c$var$LAST_KEYS.includes(event.key)) candidateNodes.reverse(); 80452 $6cc32821e9371a1c$var$focusFirst(candidateNodes); 80453 }), 80454 onBlur: $e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onBlur, (event)=>{ 80455 // clear search buffer when leaving the menu 80456 if (!event.currentTarget.contains(event.target)) { 80457 window.clearTimeout(timerRef.current); 80458 searchRef.current = ''; 80459 } 80460 }), 80461 onPointerMove: $e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onPointerMove, $6cc32821e9371a1c$var$whenMouse((event)=>{ 80462 const target = event.target; 80463 const pointerXHasChanged = lastPointerXRef.current !== event.clientX; // We don't use `event.movementX` for this check because Safari will 80464 // always return `0` on a pointer event. 80465 if (event.currentTarget.contains(target) && pointerXHasChanged) { 80466 const newDir = event.clientX > lastPointerXRef.current ? 'right' : 'left'; 80467 pointerDirRef.current = newDir; 80468 lastPointerXRef.current = event.clientX; 80469 } 80470 })) 80471 }))))))); 80472}); 80473/*#__PURE__*/ Object.assign($6cc32821e9371a1c$export$479f0f2f71193efe, { 80474 displayName: $6cc32821e9371a1c$var$CONTENT_NAME 80475}); 80476/* ------------------------------------------------------------------------------------------------- 80477 * MenuGroup 80478 * -----------------------------------------------------------------------------------------------*/ const $6cc32821e9371a1c$var$GROUP_NAME = 'MenuGroup'; 80479const $6cc32821e9371a1c$export$22a631d1f72787bb = /*#__PURE__*/ (0,external_React_.forwardRef)((props, forwardedRef)=>{ 80480 const { __scopeMenu: __scopeMenu , ...groupProps } = props; 80481 return /*#__PURE__*/ (0,external_React_.createElement)(index_module_$8927f6f2acc4f386$export$250ffa63cdc0d034.div, extends_extends({ 80482 role: "group" 80483 }, groupProps, { 80484 ref: forwardedRef 80485 })); 80486}); 80487/*#__PURE__*/ Object.assign($6cc32821e9371a1c$export$22a631d1f72787bb, { 80488 displayName: $6cc32821e9371a1c$var$GROUP_NAME 80489}); 80490/* ------------------------------------------------------------------------------------------------- 80491 * MenuLabel 80492 * -----------------------------------------------------------------------------------------------*/ const $6cc32821e9371a1c$var$LABEL_NAME
80492= 'MenuLabel'; 80493const $6cc32821e9371a1c$export$dd37bec0e8a99143 = /*#__PURE__*/ (0,external_React_.forwardRef)((props, forwardedRef)=>{ 80494 const { __scopeMenu: __scopeMenu , ...labelProps } = props; 80495 return /*#__PURE__*/ (0,external_React_.createElement)(index_module_$8927f6f2acc4f386$export$250ffa63cdc0d034.div, extends_extends({}, labelProps, { 80496 ref: forwardedRef 80497 })); 80498}); 80499/*#__PURE__*/ Object.assign($6cc32821e9371a1c$export$dd37bec0e8a99143, { 80500 displayName: $6cc32821e9371a1c$var$LABEL_NAME 80501}); 80502/* ------------------------------------------------------------------------------------------------- 80503 * MenuItem 80504 * -----------------------------------------------------------------------------------------------*/ const $6cc32821e9371a1c$var$ITEM_NAME = 'MenuItem'; 80505const $6cc32821e9371a1c$var$ITEM_SELECT = 'menu.itemSelect'; 80506const $6cc32821e9371a1c$export$2ce376c2cc3355c8 = /*#__PURE__*/ (0,external_React_.forwardRef)((props, forwardedRef)=>{ 80507 const { disabled: disabled = false , onSelect: onSelect , ...itemProps } = props; 80508 const ref = (0,external_React_.useRef)(null); 80509 const rootContext = $6cc32821e9371a1c$var$useMenuRootContext($6cc32821e9371a1c$var$ITEM_NAME, props.__scopeMenu); 80510 const contentContext = $6cc32821e9371a1c$var$useMenuContentContext($6cc32821e9371a1c$var$ITEM_NAME, props.__scopeMenu); 80511 const composedRefs = $6ed0406888f73fc4$export$c7b2cbe3552a0d05(forwardedRef, ref); 80512 const isPointerDownRef = (0,external_React_.useRef)(false); 80513 const handleSelect = ()=>{ 80514 const menuItem = ref.current; 80515 if (!disabled && menuItem) { 80516 const itemSelectEvent = new CustomEvent($6cc32821e9371a1c$var$ITEM_SELECT, { 80517 bubbles: true, 80518 cancelable: true 80519 }); 80520 menuItem.addEventListener($6cc32821e9371a1c$var$ITEM_SELECT, (event)=>onSelect === null || onSelect === void 0 ? void 0 : onSelect(event) 80521 , { 80522 once: true 80523 }); 80524 index_module_$8927f6f2acc4f386$export$6d1a0317bde7de7f(menuItem, itemSelectEvent); 80525 if (itemSelectEvent.defaultPrevented) isPointerDownRef.current = false; 80526 else rootContext.onClose(); 80527 } 80528 }; 80529 return /*#__PURE__*/ (0,external_React_.createElement)($6cc32821e9371a1c$var$MenuItemImpl, extends_extends({}, itemProps, { 80530 ref: composedRefs, 80531 disabled: disabled, 80532 onClick: $e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onClick, handleSelect), 80533 onPointerDown: (event)=>{ 80534 var _props$onPointerDown; 80535 (_props$onPointerDown = props.onPointerDown) === null || _props$onPointerDown === void 0 || _props$onPointerDown.call(props, event); 80536 isPointerDownRef.current = true; 80537 }, 80538 onPointerUp: $e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onPointerUp, (event)=>{ 80539 var _event$currentTarget; 80540 // Pointer down can move to a different menu item which should activate it on pointer up. 80541 // We dispatch a click for selection to allow composition with click based triggers and to 80542 // prevent Firefox from getting stuck in text selection mode when the menu closes. 80543 if (!isPointerDownRef.current) (_event$currentTarget = event.currentTarget) === null || _event$currentTarget === void 0 || _event$currentTarget.click(); 80544 }), 80545 onKeyDown: $e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onKeyDown, (event)=>{ 80546 const isTypingAhead = contentContext.searchRef.current !== ''; 80547 if (disabled || isTypingAhead && event.key === ' ') return; 80548 if ($6cc32821e9371a1c$var$SELECTION_KEYS.includes(event.key)) { 80549 event.currentTarget.click(); 80550 /** 80551 * We prevent default browser behaviour for selection keys as they should trigger 80552 * a selection only: 80553 * - prevents space from scrolling the page. 80554 * - if keydown causes focus to move, prevents keydown from firing on the new target. 80555 */ event.preventDefault(); 80556 } 80557 }) 80558 })); 80559}); 80560/*#__PURE__*/ Object.assign($6cc32821e9371a1c$export$2ce376c2cc3355c8, { 80561 displayName: $6cc32821e9371a1c$var$ITEM_NAME 80562}); 80563/* ---------------------------------------------------------------------------------------------- */ const $6cc32821e9371a1c$var$MenuItemImpl = /*#__PURE__*/ (0,external_React_.forwardRef)((props, forwardedRef)=>{ 80564 const { __scopeMenu: __scopeMenu , disabled: disabled = false , textValue: textValue , ...itemProps } = props; 80565 const contentContext = $6cc32821e9371a1c$var$useMenuContentContext($6cc32821e9371a1c$var$ITEM_NAME, __scopeMenu); 80566 const rovingFocusGroupScope = $6cc32821e9371a1c$var$useRovingFocusGroupScope(__scopeMenu); 80567 const ref = (0,external_React_.useRef)(null);
80568 const composedRefs = $6ed0406888f73fc4$export$c7b2cbe3552a0d05(forwardedRef, ref); 80569 const [isFocused, setIsFocused] = (0,external_React_.useState)(false); // get the item's `.textContent` as default strategy for typeahead `textValue` 80570 const [textContent, setTextContent] = (0,external_React_.useState)(''); 80571 (0,external_React_.useEffect)(()=>{ 80572 const menuItem = ref.current; 80573 if (menuItem) { 80574 var _menuItem$textContent; 80575 setTextContent(((_menuItem$textContent = menuItem.textContent) !== null && _menuItem$textContent !== void 0 ? _menuItem$textContent : '').trim()); 80576 } 80577 }, [ 80578 itemProps.children 80579 ]); 80580 return /*#__PURE__*/ (0,external_React_.createElement)($6cc32821e9371a1c$var$Collection.ItemSlot, { 80581 scope: __scopeMenu, 80582 disabled: disabled, 80583 textValue: textValue !== null && textValue !== void 0 ? textValue : textContent 80584 }, /*#__PURE__*/ (0,external_React_.createElement)($d7bdfb9eb0fdf311$export$6d08773d2e66f8f2, extends_extends({ 80585 asChild: true 80586 }, rovingFocusGroupScope, { 80587 focusable: !disabled 80588 }), /*#__PURE__*/ (0,external_React_.createElement)(index_module_$8927f6f2acc4f386$export$250ffa63cdc0d034.div, extends_extends({ 80589 role: "menuitem", 80590 "data-highlighted": isFocused ? '' : undefined, 80591 "aria-disabled": disabled || undefined, 80592 "data-disabled": disabled ? '' : undefined 80593 }, itemProps, { 80594 ref: composedRefs, 80595 onPointerMove: $e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onPointerMove, $6cc32821e9371a1c$var$whenMouse((event)=>{ 80596 if (disabled) contentContext.onItemLeave(event); 80597 else { 80598 contentContext.onItemEnter(event); 80599 if (!event.defaultPrevented) { 80600 const item = event.currentTarget; 80601 item.focus(); 80602 } 80603 } 80604 })), 80605 onPointerLeave: $e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onPointerLeave, $6cc32821e9371a1c$var$whenMouse((event)=>contentContext.onItemLeave(event) 80606 )), 80607 onFocus: $e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onFocus, ()=>setIsFocused(true) 80608 ), 80609 onBlur: $e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onBlur, ()=>setIsFocused(false) 80610 ) 80611 })))); 80612}); 80613/* ------------------------------------------------------------------------------------------------- 80614 * MenuCheckboxItem 80615 * -----------------------------------------------------------------------------------------------*/ const $6cc32821e9371a1c$var$CHECKBOX_ITEM_NAME = 'MenuCheckboxItem'; 80616const $6cc32821e9371a1c$export$f6f243521332502d = /*#__PURE__*/ (0,external_React_.forwardRef)((props, forwardedRef)=>{ 80617 const { checked: checked = false , onCheckedChange: onCheckedChange , ...checkboxItemProps } = props; 80618 return /*#__PURE__*/ (0,external_React_.createElement)($6cc32821e9371a1c$var$ItemIndicatorProvider, { 80619 scope: props.__scopeMenu, 80620 checked: checked 80621 }, /*#__PURE__*/ (0,external_React_.createElement)($6cc32821e9371a1c$export$2ce376c2cc3355c8, extends_extends({ 80622 role: "menuitemcheckbox", 80623 "aria-checked": $6cc32821e9371a1c$var$isIndeterminate(checked) ? 'mixed' : checked 80624 }, checkboxItemProps, { 80625 ref: forwardedRef, 80626 "data-state": $6cc32821e9371a1c$var$getCheckedState(checked), 80627 onSelect: $e42e1063c40fb3ef$export$b9ecd428b558ff10(checkboxItemProps.onSelect, ()=>onCheckedChange === null || onCheckedChange === void 0 ? void 0 : onCheckedChange($6cc32821e9371a1c$var$isIndeterminate(checked) ? true : !checked) 80628 , { 80629 checkForDefaultPrevented: false 80630 }) 80631 }))); 80632}); 80633/*#__PURE__*/ Object.assign($6cc32821e9371a1c$export$f6f243521332502d, { 80634 displayName: $6cc32821e9371a1c$var$CHECKBOX_ITEM_NAME 80635}); 80636/* ------------------------------------------------------------------------------------------------- 80637 * MenuRadioGroup 80638 * -----------------------------------------------------------------------------------------------*/ const $6cc32821e9371a1c$var$RADIO_GROUP_NAME = 'MenuRadioGroup'; 80639const [$6cc32821e9371a1c$var$RadioGroupProvider, $6cc32821e9371a1c$var$useRadioGroupContext] = $6cc32821e9371a1c$var$createMenuContext($6cc32821e9371a1c$var$RADIO_GROUP_NAME, { 80640 value: undefined, 80641 onValueChange: ()=>{} 80642}); 80643const $6cc32821e9371a1c$export$ea2200c9eee416b3 = /*#__PURE__*/ (0,external_React_.forwardRef)((props, forwardedRef)=>{ 80644 const { value: value , onValueChange: onValueChange , ...groupProps } = props; 80645 const handleValueChange = $b1b2314f5f9a1d84$export$25bec8c6f54ee79a(onValueChange); 80646 return /*#__PURE__*/ (0,external_React_.createElement)($6cc32821e9371a1c$var$RadioGroupProvider, { 80647 scope: props.__scopeMenu, 80648 value: value, 80649 onValueChange: handleValueChange 80650 }, /*#__PURE__*/ (0,external_React_.createElement)($6cc32821e9371a1c$export$22a631d1f72787bb, extends_extends({}, groupProps, { 80651 ref: forwardedRef 80652 }
80652))); 80653}); 80654/*#__PURE__*/ Object.assign($6cc32821e9371a1c$export$ea2200c9eee416b3, { 80655 displayName: $6cc32821e9371a1c$var$RADIO_GROUP_NAME 80656}); 80657/* ------------------------------------------------------------------------------------------------- 80658 * MenuRadioItem 80659 * -----------------------------------------------------------------------------------------------*/ const $6cc32821e9371a1c$var$RADIO_ITEM_NAME = 'MenuRadioItem'; 80660const $6cc32821e9371a1c$export$69bd225e9817f6d0 = /*#__PURE__*/ (0,external_React_.forwardRef)((props, forwardedRef)=>{ 80661 const { value: value , ...radioItemProps } = props; 80662 const context = $6cc32821e9371a1c$var$useRadioGroupContext($6cc32821e9371a1c$var$RADIO_ITEM_NAME, props.__scopeMenu); 80663 const checked = value === context.value; 80664 return /*#__PURE__*/ (0,external_React_.createElement)($6cc32821e9371a1c$var$ItemIndicatorProvider, { 80665 scope: props.__scopeMenu, 80666 checked: checked 80667 }, /*#__PURE__*/ (0,external_React_.createElement)($6cc32821e9371a1c$export$2ce376c2cc3355c8, extends_extends({ 80668 role: "menuitemradio", 80669 "aria-checked": checked 80670 }, radioItemProps, { 80671 ref: forwardedRef, 80672 "data-state": $6cc32821e9371a1c$var$getCheckedState(checked), 80673 onSelect: $e42e1063c40fb3ef$export$b9ecd428b558ff10(radioItemProps.onSelect, ()=>{ 80674 var _context$onValueChang; 80675 return (_context$onValueChang = context.onValueChange) === null || _context$onValueChang === void 0 ? void 0 : _context$onValueChang.call(context, value); 80676 }, { 80677 checkForDefaultPrevented: false 80678 }) 80679 }))); 80680}); 80681/*#__PURE__*/ Object.assign($6cc32821e9371a1c$export$69bd225e9817f6d0, { 80682 displayName: $6cc32821e9371a1c$var$RADIO_ITEM_NAME 80683}); 80684/* ------------------------------------------------------------------------------------------------- 80685 * MenuItemIndicator 80686 * -----------------------------------------------------------------------------------------------*/ const $6cc32821e9371a1c$var$ITEM_INDICATOR_NAME = 'MenuItemIndicator'; 80687const [$6cc32821e9371a1c$var$ItemIndicatorProvider, $6cc32821e9371a1c$var$useItemIndicatorContext] = $6cc32821e9371a1c$var$createMenuContext($6cc32821e9371a1c$var$ITEM_INDICATOR_NAME, { 80688 checked: false 80689}); 80690const $6cc32821e9371a1c$export$a2593e23056970a3 = /*#__PURE__*/ (0,external_React_.forwardRef)((props, forwardedRef)=>{ 80691 const { __scopeMenu: __scopeMenu , forceMount: forceMount , ...itemIndicatorProps } = props; 80692 const indicatorContext = $6cc32821e9371a1c$var$useItemIndicatorContext($6cc32821e9371a1c$var$ITEM_INDICATOR_NAME, __scopeMenu); 80693 return /*#__PURE__*/ (0,external_React_.createElement)($921a889cee6df7e8$export$99c2b779aa4e8b8b, { 80694 present: forceMount || $6cc32821e9371a1c$var$isIndeterminate(indicatorContext.checked) || indicatorContext.checked === true 80695 }, /*#__PURE__*/ (0,external_React_.createElement)(index_module_$8927f6f2acc4f386$export$250ffa63cdc0d034.span, extends_extends({}, itemIndicatorProps, { 80696 ref: forwardedRef, 80697 "data-state": $6cc32821e9371a1c$var$getCheckedState(indicatorContext.checked) 80698 }))); 80699}); 80700/*#__PURE__*/ Object.assign($6cc32821e9371a1c$export$a2593e23056970a3, { 80701 displayName: $6cc32821e9371a1c$var$ITEM_INDICATOR_NAME 80702}); 80703/* ------------------------------------------------------------------------------------------------- 80704 * MenuSeparator 80705 * -----------------------------------------------------------------------------------------------*/ const $6cc32821e9371a1c$var$SEPARATOR_NAME = 'MenuSeparator'; 80706const $6cc32821e9371a1c$export$1cec7dcdd713e220 = /*#__PURE__*/ (0,external_React_.forwardRef)((props, forwardedRef)=>{ 80707 const { __scopeMenu: __scopeMenu , ...separatorProps } = props; 80708 return /*#__PURE__*/ (0,external_React_.createElement)(index_module_$8927f6f2acc4f386$export$250ffa63cdc0d034.div, extends_extends({ 80709 role: "separator", 80710 "aria-orientation": "horizontal" 80711 }, separatorProps, { 80712 ref: forwardedRef 80713 })); 80714}); 80715/*#__PURE__*/ Object.assign($6cc32821e9371a1c$export$1cec7dcdd713e220, { 80716 displayName: $6cc32821e9371a1c$var$SEPARATOR_NAME 80717}); 80718/* ------------------------------------------------------------------------------------------------- 80719 * MenuArrow 80720 * -----------------------------------------------------------------------------------------------*/ const $6cc32821e9371a1c$var$ARROW_NAME = 'MenuArrow'; 80721const $6cc32821e9371a1c$export$bcdda4773debf5fa = /*#__PURE__*/ (0,external_React_.forwardRef)((props, forwardedRef)=>{ 80722 const { __scopeMenu: __scopeMenu , ...arrowProps } = props; 80723 const popperScope = $6cc32821e9371a1c$var$usePopperScope(__scopeMenu); 80724 return /*#__PURE__*/ (0,external_React_.createElement)($cf1ac5d9fe0e8206$export$21b
8072407c8f274aebd5, extends_extends({}, popperScope, arrowProps, { 80725 ref: forwardedRef 80726 })); 80727}); 80728/*#__PURE__*/ Object.assign($6cc32821e9371a1c$export$bcdda4773debf5fa, { 80729 displayName: $6cc32821e9371a1c$var$ARROW_NAME 80730}); 80731/* ------------------------------------------------------------------------------------------------- 80732 * MenuSub 80733 * -----------------------------------------------------------------------------------------------*/ const $6cc32821e9371a1c$var$SUB_NAME = 'MenuSub'; 80734const [$6cc32821e9371a1c$var$MenuSubProvider, $6cc32821e9371a1c$var$useMenuSubContext] = $6cc32821e9371a1c$var$createMenuContext($6cc32821e9371a1c$var$SUB_NAME); 80735const $6cc32821e9371a1c$export$71bdb9d1e2909932 = (props)=>{ 80736 const { __scopeMenu: __scopeMenu , children: children , open: open = false , onOpenChange: onOpenChange } = props; 80737 const parentMenuContext = $6cc32821e9371a1c$var$useMenuContext($6cc32821e9371a1c$var$SUB_NAME, __scopeMenu); 80738 const popperScope = $6cc32821e9371a1c$var$usePopperScope(__scopeMenu); 80739 const [trigger, setTrigger] = (0,external_React_.useState)(null); 80740 const [content, setContent] = (0,external_React_.useState)(null); 80741 const handleOpenChange = $b1b2314f5f9a1d84$export$25bec8c6f54ee79a(onOpenChange); // Prevent the parent menu from reopening with open submenus. 80742 (0,external_React_.useEffect)(()=>{ 80743 if (parentMenuContext.open === false) handleOpenChange(false); 80744 return ()=>handleOpenChange(false) 80745 ; 80746 }, [ 80747 parentMenuContext.open, 80748 handleOpenChange 80749 ]); 80750 return /*#__PURE__*/ (0,external_React_.createElement)($cf1ac5d9fe0e8206$export$be92b6f5f03c0fe9, popperScope, /*#__PURE__*/ (0,external_React_.createElement)($6cc32821e9371a1c$var$MenuProvider, { 80751 scope: __scopeMenu, 80752 open: open, 80753 onOpenChange: handleOpenChange, 80754 content: content, 80755 onContentChange: setContent 80756 }, /*#__PURE__*/ (0,external_React_.createElement)($6cc32821e9371a1c$var$MenuSubProvider, { 80757 scope: __scopeMenu, 80758 contentId: $1746a345f3d73bb7$export$f680877a34711e37(), 80759 triggerId: $1746a345f3d73bb7$export$f680877a34711e37(), 80760 trigger: trigger, 80761 onTriggerChange: setTrigger 80762 }, children))); 80763}; 80764/*#__PURE__*/ Object.assign($6cc32821e9371a1c$export$71bdb9d1e2909932, { 80765 displayName: $6cc32821e9371a1c$var$SUB_NAME 80766}); 80767/* ------------------------------------------------------------------------------------------------- 80768 * MenuSubTrigger 80769 * -----------------------------------------------------------------------------------------------*/ const $6cc32821e9371a1c$var$SUB_TRIGGER_NAME = 'MenuSubTrigger'; 80770const $6cc32821e9371a1c$export$5fbbb3ba7297405f = /*#__PURE__*/ (0,external_React_.forwardRef)((props, forwardedRef)=>{ 80771 const context = $6cc32821e9371a1c$var$useMenuContext($6cc32821e9371a1c$var$SUB_TRIGGER_NAME, props.__scopeMenu); 80772 const rootContext = $6cc32821e9371a1c$var$useMenuRootContext($6cc32821e9371a1c$var$SUB_TRIGGER_NAME, props.__scopeMenu); 80773 const subContext = $6cc32821e9371a1c$var$useMenuSubContext($6cc32821e9371a1c$var$SUB_TRIGGER_NAME, props.__scopeMenu); 80774 const contentContext = $6cc32821e9371a1c$var$useMenuContentContext($6cc32821e9371a1c$var$SUB_TRIGGER_NAME, props.__scopeMenu); 80775 const openTimerRef = (0,external_React_.useRef)(null); 80776 const { pointerGraceTimerRef: pointerGraceTimerRef , onPointerGraceIntentChange: onPointerGraceIntentChange } = contentContext; 80777 const scope = { 80778 __scopeMenu: props.__scopeMenu 80779 }; 80780 const clearOpenTimer = (0,external_React_.useCallback)(()=>{ 80781 if (openTimerRef.current) window.clearTimeout(openTimerRef.current); 80782 openTimerRef.current = null; 80783 }, []); 80784 (0,external_React_.useEffect)(()=>clearOpenTimer 80785 , [ 80786 clearOpenTimer 80787 ]); 80788 (0,external_React_.useEffect)(()=>{ 80789 const pointerGraceTimer = pointerGraceTimerRef.current; 80790 return ()=>{ 80791 window.clearTimeout(pointerGraceTimer); 80792 onPointerGraceIntentChange(null); 80793 }; 80794 }, [ 80795 pointerGraceTimerRef, 80796 onPointerGraceIntentChange 80797 ]); 80798 return /*#__PURE__*/ (0,external_React_.createElement)($6cc32821e9371a1c$export$9fa5ebd18bee4d43, extends_extends({ 80799 asChild: true 80800 }, scope), /*#__PURE__*/ (0,external_React_.createElement)($6cc32821e9371a1c$var$MenuItemImpl, extends_extends({ 80801 id: subContext.triggerId, 80802 "aria-haspopup": "menu", 80803 "aria-expanded": context.open, 80804 "aria-controls": subContext.contentId, 80805 "data-state": $6cc32821e9371a1c$var$getOpenState(context.open) 80806 }, props, {
vendor: 11,772 bytes, lines 80807-81013
80807 ref: $6ed0406888f73fc4$export$43e446d32b3d21af(forwardedRef, subContext.onTriggerChange) // This is redundant for mouse users but we cannot determine pointer type from 80808 , 80809 onClick: (event)=>{ 80810 var _props$onClick; 80811 (_props$onClick = props.onClick) === null || _props$onClick === void 0 || _props$onClick.call(props, event); 80812 if (props.disabled || event.defaultPrevented) return; 80813 /** 80814 * We manually focus because iOS Safari doesn't always focus on click (e.g. buttons) 80815 * and we rely heavily on `onFocusOutside` for submenus to close when switching 80816 * between separate submenus. 80817 */ event.currentTarget.focus(); 80818 if (!context.open) context.onOpenChange(true); 80819 }, 80820 onPointerMove: $e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onPointerMove, $6cc32821e9371a1c$var$whenMouse((event)=>{ 80821 contentContext.onItemEnter(event); 80822 if (event.defaultPrevented) return; 80823 if (!props.disabled && !context.open && !openTimerRef.current) { 80824 contentContext.onPointerGraceIntentChange(null); 80825 openTimerRef.current = window.setTimeout(()=>{ 80826 context.onOpenChange(true); 80827 clearOpenTimer(); 80828 }, 100); 80829 } 80830 })), 80831 onPointerLeave: $e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onPointerLeave, $6cc32821e9371a1c$var$whenMouse((event)=>{ 80832 var _context$content; 80833 clearOpenTimer(); 80834 const contentRect = (_context$content = context.content) === null || _context$content === void 0 ? void 0 : _context$content.getBoundingClientRect(); 80835 if (contentRect) { 80836 var _context$content2; 80837 // TODO: make sure to update this when we change positioning logic 80838 const side = (_context$content2 = context.content) === null || _context$content2 === void 0 ? void 0 : _context$content2.dataset.side; 80839 const rightSide = side === 'right'; 80840 const bleed = rightSide ? -5 : 5; 80841 const contentNearEdge = contentRect[rightSide ? 'left' : 'right']; 80842 const contentFarEdge = contentRect[rightSide ? 'right' : 'left']; 80843 contentContext.onPointerGraceIntentChange({ 80844 area: [ 80845 // consistently within polygon bounds 80846 { 80847 x: event.clientX + bleed, 80848 y: event.clientY 80849 }, 80850 { 80851 x: contentNearEdge, 80852 y: contentRect.top 80853 }, 80854 { 80855 x: contentFarEdge, 80856 y: contentRect.top 80857 }, 80858 { 80859 x: contentFarEdge, 80860 y: contentRect.bottom 80861 }, 80862 { 80863 x: contentNearEdge, 80864 y: contentRect.bottom 80865 } 80866 ], 80867 side: side 80868 }); 80869 window.clearTimeout(pointerGraceTimerRef.current); 80870 pointerGraceTimerRef.current = window.setTimeout(()=>contentContext.onPointerGraceIntentChange(null) 80871 , 300); 80872 } else { 80873 contentContext.onTriggerLeave(event); 80874 if (event.defaultPrevented) return; // There's 100ms where the user may leave an item before the submenu was opened. 80875 contentContext.onPointerGraceIntentChange(null); 80876 } 80877 })), 80878 onKeyDown: $e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onKeyDown, (event)=>{ 80879 const isTypingAhead = contentContext.searchRef.current !== ''; 80880 if (props.disabled || isTypingAhead && event.key === ' ') return; 80881 if ($6cc32821e9371a1c$var$SUB_OPEN_KEYS[rootContext.dir].includes(event.key)) { 80882 var _context$content3; 80883 context.onOpenChange(true); // The trigger may hold focus if opened via pointer interaction 80884 // so we ensure content is given focus again when switching to keyboard. 80885 (_context$content3 = context.content) === null || _context$content3 === void 0 || _context$content3.focus(); // prevent window from scrolling 80886 event.preventDefault(); 80887 } 80888 }) 80889 }))); 80890}); 80891/*#__PURE__*/ Object.assign($6cc32821e9371a1c$export$5fbbb3ba7297405f, { 80892 displayName: $6cc32821e9371a1c$var$SUB_TRIGGER_NAME 80893}); 80894/* ------------------------------------------------------------------------------------------------- 80895 * MenuSubContent 80896 * -----------------------------------------------------------------------------------------------*/ const $6cc32821e9371a1c$var$SUB_CONTENT_NAME = 'MenuSubContent'; 80897const $6cc32821e9371a1c$export$e7142ab31822bde6 = /*#__PURE__*/ (0,external_React_.forwardRef)((props, forwardedRef)=>{ 80898 const portalContext = $6cc32821e9371a1c$var$usePortalContext($6cc32821e9371a1c$var$CONTENT_NAME, props.__scopeMenu); 80899 const { forceMount: forceMount = portalContext.forceMount , ...subContentProps } = props; 80900 const context = $6cc32821e9371a1c$var$useMenuContext($6cc32821e9371a1c$var$CONTENT_NAME, props.__scopeMenu); 80901 const rootContext = $6cc32821e9371a1c$var$useMenuRootContext($6cc32821e9371a1c$var$CONTENT_NAME, props.__scopeMenu); 80902 const subContext = $6cc32821e9371a1c$var$useMenuSubContext($6cc32821e9371a1c$var$SUB_CONTENT_NAME, props.__scopeMenu); 80903 const ref = (0,external_React_.useRef)(null); 80904 const composedRefs = $6ed0406888f73fc4$export$c7b2cbe3552a0d05(forwardedRef, ref); 80905 return /*#__PURE__*/ (0,external_React_.createElement)($6cc32821e9371a1c$var$Collection.Provider, { 80906 scope: props.__scopeMenu 80907 }, /*#__PURE__*/ (0,external_React_.createElement)($921a889cee6df7e8$export$99c2b779aa4e8b8b, { 80908 present: forceMount || context.open 80909 }, /*#__PURE__*/ (0,external_React_.createElement)($6cc32821e9371a1c$var$Collection.Slot, { 80910 scope: props.__scopeMenu 80911 }, /*#__PURE__*/ (0,external_React_.createElement)($6cc32821e9371a1c$var$MenuContentImpl, extends_extends({ 80912 id: subContext.contentId, 80913 "aria-labelledby": subContext.triggerId 80914 }, subContentProps, { 80915 ref: composedRefs, 80916 align: "start", 80917 side: rootContext.dir === 'rtl' ? 'left' : 'right', 80918 disableOutsidePointerEvents: false, 80919 disableOutsideScroll: false, 80920 trapFocus: false, 80921 onOpenAutoFocus: (event)=>{ 80922 var _ref$current; 80923 // when opening a submenu, focus content for keyboard users only 80924 if (rootContext.isUsingKeyboardRef.current) (_ref$current = ref.current) === null || _ref$current === void 0 || _ref$current.focus(); 80925 event.preventDefault(); 80926 } // The menu might close because of focusing another menu item in the parent menu. We 80927 , 80928 onCloseAutoFocus: (event)=>event.preventDefault() 80929 , 80930 onFocusOutside: $e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onFocusOutside, (event)=>{ 80931 // We prevent closing when the trigger is focused to avoid triggering a re-open animation 80932 // on pointer interaction. 80933 if (event.target !== subContext.trigger) context.onOpenChange(false); 80934 }), 80935 onEscapeKeyDown: $e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onEscapeKeyDown, (event)=>{ 80936 rootContext.onClose(); // ensure pressing escape in submenu doesn't escape full screen mode 80937 event.preventDefault(); 80938 }), 80939 onKeyDown: $e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onKeyDown, (event)=>{ 80940 // Submenu key events bubble through portals. We only care about keys in this menu. 80941 const isKeyDownInside = event.currentTarget.contains(event.target); 80942 const isCloseKey = $6cc32821e9371a1c$var$SUB_CLOSE_KEYS[rootContext.dir].includes(event.key); 80943 if (isKeyDownInside && isCloseKey) { 80944 var _subContext$trigger; 80945 context.onOpenChange(false); // We focus manually because we prevented it in `onCloseAutoFocus` 80946 (_subContext$trigger = subContext.trigger) === null || _subContext$trigger === void 0 || _subContext$trigger.focus(); // prevent window from scrolling 80947 event.preventDefault(); 80948 } 80949 }) 80950 }))))); 80951}); 80952/*#__PURE__*/ Object.assign($6cc32821e9371a1c$export$e7142ab31822bde6, { 80953 displayName: $6cc32821e9371a1c$var$SUB_CONTENT_NAME 80954}); 80955/* -----------------------------------------------------------------------------------------------*/ function $6cc32821e9371a1c$var$getOpenState(open) { 80956 return open ? 'open' : 'closed'; 80957} 80958function $6cc32821e9371a1c$var$isIndeterminate(checked) { 80959 return checked === 'indeterminate'; 80960} 80961function $6cc32821e9371a1c$var$getCheckedState(checked) { 80962 return $6cc32821e9371a1c$var$isIndeterminate(checked) ? 'indeterminate' : checked ? 'checked' : 'unchecked'; 80963} 80964function $6cc32821e9371a1c$var$focusFirst(candidates) { 80965 const PREVIOUSLY_FOCUSED_ELEMENT = document.activeElement; 80966 for (const candidate of candidates){ 80967 // if focus is already where we want to go, we don't want to keep going through the candidates 80968 if (candidate === PREVIOUSLY_FOCUSED_ELEMENT) return; 80969 candidate.focus(); 80970 if (document.activeElement !== PREVIOUSLY_FOCUSED_ELEMENT) return; 80971 } 80972} 80973/** 80974 * Wraps an array around itself at a given start index 80975 * Example: `wrapArray(['a', 'b', 'c', 'd'], 2) === ['c', 'd', 'a', 'b']` 80976 */ function $6cc32821e9371a1c$var$wrapArray(array, startIndex) { 80977 return array.map((_, index)=>array[(startIndex + index) % array.length] 80978 ); 80979} 80980/** 80981 * This is the "meat" of the typeahead matching logic. It takes in all the values, 80982 * the search and the current match, and returns the next match (or `undefined`). 80983 * 80984 * We normalize the search because if a user has repeatedly pressed a character, 80985 * we want the exact same behavior as if we only had that one character 80986 * (ie. cycle through options starting with that character) 80987 * 80988 * We also reorder the values by wrapping the array around the current match. 80989 * This is so we always look forward from the current match, and picking the first 80990 * match will always be the correct one. 80991 * 80992 * Finally, if the normalized search is exactly one character, we exclude the 80993 * current match from the values because otherwise it would be the first to match always 80994 * and focus would never move. This is as opposed to the regular case, where we 80995 * don't want focus to move if the current match still matches. 80996 */ function $6cc32821e9371a1c$var$getNextMatch(values, search, currentMatch) { 80997 const isRepeated = search.length > 1 && Array.from(search).every((char)=>char === search[0] 80998 ); 80999 const normalizedSearch = isRepeated ? search[0] : search; 81000 const currentMatchIndex = currentMatch ? values.indexOf(currentMatch) : -1; 81001 let wrappedValues = $6cc32821e9371a1c$var$wrapArray(values, Math.max(currentMatchIndex, 0)); 81002 const excludeCurrentMatch = normalizedSearch.length === 1; 81003 if (excludeCurrentMatch) wrappedValues = wrappedValues.filter((v)=>v !== currentMatch 81004 ); 81005 const nextMatch = wrappedValues.find((value)=>value.toLowerCase().startsWith(normalizedSearch.toLowerCase()) 81006 ); 81007 return nextMatch !== currentMatch ? nextMatch : undefined; 81008} 81009// Determine if a point is inside of a polygon. 81010// Based on https://github.com/substack/point-in-polygon 81011function $6cc32821e9371a1c$var$isPointInPolygon(point, polygon) { 81012 const { x: x , y: y } = point; 81013 let inside = false;
81014 for(let i = 0, j = polygon.length - 1; i < polygon.length; j = i++){ 81015 const xi = polygon[i].x; 81016 const yi = polygon[i].y; 81017 const xj = polygon[j].x; 81018 const yj = polygon[j].y; // prettier-ignore 81019 const intersect = yi > y !== yj > y && x < (xj - xi) * (y - yi) / (yj - yi) + xi; 81020 if (intersect) inside = !inside; 81021 } 81022 return inside; 81023} 81024function $6cc32821e9371a1c$var$isPointerInGraceArea(event, area) { 81025 if (!area) return false; 81026 const cursorPos = { 81027 x: event.clientX, 81028 y: event.clientY 81029 }; 81030 return $6cc32821e9371a1c$var$isPointInPolygon(cursorPos, area); 81031} 81032function $6cc32821e9371a1c$var$whenMouse(handler) { 81033 return (event)=>event.pointerType === 'mouse' ? handler(event) : undefined 81034 ; 81035} 81036const $6cc32821e9371a1c$export$be92b6f5f03c0fe9 = $6cc32821e9371a1c$export$d9b273488cd8ce6f; 81037const $6cc32821e9371a1c$export$b688253958b8dfe7 = $6cc32821e9371a1c$export$9fa5ebd18bee4d43; 81038const $6cc32821e9371a1c$export$602eac185826482c = $6cc32821e9371a1c$export$793392f970497feb; 81039const $6cc32821e9371a1c$export$7c6e2c02157bb7d2 = $6cc32821e9371a1c$export$479f0f2f71193efe; 81040const $6cc32821e9371a1c$export$eb2fcfdbd7ba97d4 = $6cc32821e9371a1c$export$22a631d1f72787bb; 81041const $6cc32821e9371a1c$export$b04be29aa201d4f5 = $6cc32821e9371a1c$export$dd37bec0e8a99143; 81042const $6cc32821e9371a1c$export$6d08773d2e66f8f2 = $6cc32821e9371a1c$export$2ce376c2cc3355c8; 81043const $6cc32821e9371a1c$export$16ce288f89fa631c = $6cc32821e9371a1c$export$f6f243521332502d; 81044const $6cc32821e9371a1c$export$a98f0dcb43a68a25 = $6cc32821e9371a1c$export$ea2200c9eee416b3; 81045const $6cc32821e9371a1c$export$371ab307eab489c0 = $6cc32821e9371a1c$export$69bd225e9817f6d0; 81046const $6cc32821e9371a1c$export$c3468e2714d175fa = $6cc32821e9371a1c$export$a2593e23056970a3; 81047const $6cc32821e9371a1c$export$1ff3c3f08ae963c0 = $6cc32821e9371a1c$export$1cec7dcdd713e220; 81048const $6cc32821e9371a1c$export$21b07c8f274aebd5 = $6cc32821e9371a1c$export$bcdda4773debf5fa; 81049const $6cc32821e9371a1c$export$d7a01e11500dfb6f = $6cc32821e9371a1c$export$71bdb9d1e2909932; 81050const $6cc32821e9371a1c$export$2ea8a7a591ac5eac = $6cc32821e9371a1c$export$5fbbb3ba7297405f; 81051const $6cc32821e9371a1c$export$6d4de93b380beddf = $6cc32821e9371a1c$export$e7142ab31822bde6; 81052 81053 81054 81055 81056 81057 81058;// CONCATENATED MODULE: ./node_modules/@radix-ui/react-dropdown-menu/dist/index.module.js 81059 81060 81061 81062 81063 81064 81065 81066 81067 81068 81069 81070 81071 81072 81073 81074 81075 81076 81077 81078 81079/* ------------------------------------------------------------------------------------------------- 81080 * DropdownMenu 81081 * -----------------------------------------------------------------------------------------------*/ const $d08ef79370b62062$var$DROPDOWN_MENU_NAME = 'DropdownMenu'; 81082const [$d08ef79370b62062$var$createDropdownMenuContext, $d08ef79370b62062$export$c0623cd925aeb687] = $c512c27ab02ef895$export$50c7b4e9d9f19c1($d08ef79370b62062$var$DROPDOWN_MENU_NAME, [ 81083 $6cc32821e9371a1c$export$4027731b685e72eb 81084]); 81085const $d08ef79370b62062$var$useMenuScope = $6cc32821e9371a1c$export$4027731b685e72eb(); 81086const [$d08ef79370b62062$var$DropdownMenuProvider, $d08ef79370b62062$var$useDropdownMenuContext] = $d08ef79370b62062$var$createDropdownMenuContext($d08ef79370b62062$var$DROPDOWN_MENU_NAME); 81087const $d08ef79370b62062$export$e44a253a59704894 = (props)=>{ 81088 const { __scopeDropdownMenu: __scopeDropdownMenu , children: children , dir: dir , open: openProp , defaultOpen: defaultOpen , onOpenChange: onOpenChange , modal: modal = true } = props; 81089 const menuScope = $d08ef79370b62062$var$useMenuScope(__scopeDropdownMenu); 81090 const triggerRef = (0,external_React_.useRef)(null); 81091 const [open = false, setOpen] = $71cd76cc60e0454e$export$6f32135080cb4c3({ 81092 prop: openProp, 81093 defaultProp: defaultOpen, 81094 onChange: onOpenChange 81095 }); 81096 return /*#__PURE__*/ (0,external_React_.createElement)($d08ef79370b62062$var$DropdownMenuProvider, { 81097 scope: __scopeDropdownMenu, 81098 triggerId: $1746a345f3d73bb7$export$f680877a34711e37(), 81099 triggerRef: triggerRef, 81100 contentId: $1746a345f3d73bb7$export$f680877a34711e37(), 81101 open: open, 81102 onOpenChange: setOpen, 81103 onOpenToggle: (0,external_React_.useCallback)(()=>setOpen((prevOpen)=>!prevOpen 81104 ) 81105 , [ 81106 setOpen 81107 ]), 81108 modal: modal 81109 }, /*#__PURE__*/ (0,external_React_.createElement)($6cc32821e9371a1c$export$be92b6f5f03c0fe9, extends_extends({}, menuScope, { 81110 open: open, 81111 onOpenChange: setOpen, 81112 dir: dir, 81113 modal: modal 81114 }), children)); 81115}; 81116/*#__PURE__*/ Object.assign($d08ef79370b62062$export$e44a253a59704894, { 81117 displayName: $d08ef79370b62062$var$DROPDOWN_MENU_NAME 81118}); 81119/* ------------------------------------------------------------------------------------------------- 81120 * DropdownMenuTrigger 81121 * -----------------------------------------------------------------------------------------------*/ const $d08ef79370b62062$var$TRIGGER_NAME = 'DropdownMenuTrigger'; 81122const $d08ef79370b62062$export$d2469213b3befba9 = /*#__PURE__*/ (0,external_React_.forwardRef)((props, forwardedRef)=>{ 81123 const { __scopeDropdownMenu: __scopeDropdownMenu , disabled: disabled = false , ...triggerProps } = props; 81124 const context = $d08ef79370b62062$var$useDropdownMenuContext($d08ef79370b62062$var$TRIGGER_NAME, __scopeDropdownMenu); 81125 const menuScope = $d08ef79370b62062$var$useMenuScope(__scopeDropdownMenu); 81126 return /*#__PURE__*/ (0,external_React_.createElement)($6cc32821e9371a1c$export$b688253958b8dfe7, extends_extends({ 81127 asChild: true 81128 }, menuScope), /*#__PURE__*/ (0,external_React_.createElement)($8927f6f2acc4f386$export$250ffa63cdc0d034.button, extends_extends({ 81129 type: "button", 81130 id: context.triggerId, 81131 "aria-haspopup": "menu", 81132 "aria-expanded": context.open, 81133 "aria-controls": context.open ? context.contentId : undefined, 81134 "data-state": context.open ? 'open' : 'closed', 81135 "data-disabled": disabled ? '' : undefined, 81136 disabled: disabled 81137 }, triggerProps, {
81138 ref: $6ed0406888f73fc4$export$43e446d32b3d21af(forwardedRef, context.triggerRef), 81139 onPointerDown: $e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onPointerDown, (event)=>{ 81140 // only call handler if it's the left button (mousedown gets triggered by all mouse buttons) 81141 // but not when the control key is pressed (avoiding MacOS right click) 81142 if (!disabled && event.button === 0 && event.ctrlKey === false) { 81143 context.onOpenToggle(); // prevent trigger focusing when opening 81144 // this allows the content to be given focus without competition 81145 if (!context.open) event.preventDefault(); 81146 } 81147 }), 81148 onKeyDown: $e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onKeyDown, (event)=>{ 81149 if (disabled) return; 81150 if ([ 81151 'Enter', 81152 ' ' 81153 ].includes(event.key)) context.onOpenToggle(); 81154 if (event.key === 'ArrowDown') context.onOpenChange(true); // prevent keydown from scrolling window / first focused item to execute 81155 // that keydown (inadvertently closing the menu) 81156 if ([ 81157 'Enter', 81158 ' ', 81159 'ArrowDown' 81160 ].includes(event.key)) event.preventDefault(); 81161 }) 81162 }))); 81163}); 81164/*#__PURE__*/ Object.assign($d08ef79370b62062$export$d2469213b3befba9, { 81165 displayName: $d08ef79370b62062$var$TRIGGER_NAME 81166}); 81167/* ------------------------------------------------------------------------------------------------- 81168 * DropdownMenuPortal 81169 * -----------------------------------------------------------------------------------------------*/ const $d08ef79370b62062$var$PORTAL_NAME = 'DropdownMenuPortal'; 81170const $d08ef79370b62062$export$cd369b4d4d54efc9 = (props)=>{ 81171 const { __scopeDropdownMenu: __scopeDropdownMenu , ...portalProps } = props; 81172 const menuScope = $d08ef79370b62062$var$useMenuScope(__scopeDropdownMenu); 81173 return /*#__PURE__*/ (0,external_React_.createElement)($6cc32821e9371a1c$export$602eac185826482c, extends_extends({}, menuScope, portalProps)); 81174}; 81175/*#__PURE__*/ Object.assign($d08ef79370b62062$export$cd369b4d4d54efc9, { 81176 displayName: $d08ef79370b62062$var$PORTAL_NAME 81177}); 81178/* ------------------------------------------------------------------------------------------------- 81179 * DropdownMenuContent 81180 * -----------------------------------------------------------------------------------------------*/ const $d08ef79370b62062$var$CONTENT_NAME = 'DropdownMenuContent'; 81181const $d08ef79370b62062$export$6e76d93a37c01248 = /*#__PURE__*/ (0,external_React_.forwardRef)((props, forwardedRef)=>{ 81182 const { __scopeDropdownMenu: __scopeDropdownMenu , ...contentProps } = props; 81183 const context = $d08ef79370b62062$var$useDropdownMenuContext($d08ef79370b62062$var$CONTENT_NAME, __scopeDropdownMenu); 81184 const menuScope = $d08ef79370b62062$var$useMenuScope(__scopeDropdownMenu); 81185 const hasInteractedOutsideRef = (0,external_React_.useRef)(false); 81186 return /*#__PURE__*/ (0,external_React_.createElement)($6cc32821e9371a1c$export$7c6e2c02157bb7d2, extends_extends({ 81187 id: context.contentId, 81188 "aria-labelledby": context.triggerId 81189 }, menuScope, contentProps, { 81190 ref: forwardedRef, 81191 onCloseAutoFocus: $e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onCloseAutoFocus, (event)=>{ 81192 var _context$triggerRef$c; 81193 if (!hasInteractedOutsideRef.current) (_context$triggerRef$c = context.triggerRef.current) === null || _context$triggerRef$c === void 0 || _context$triggerRef$c.focus(); 81194 hasInteractedOutsideRef.current = false; // Always prevent auto focus because we either focus manually or want user agent focus 81195 event.preventDefault(); 81196 }), 81197 onInteractOutside: $e42e1063c40fb3ef$export$b9ecd428b558ff10(props.onInteractOutside, (event)=>{ 81198 const originalEvent = event.detail.originalEvent; 81199 const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true; 81200 const isRightClick = originalEvent.button === 2 || ctrlLeftClick; 81201 if (!context.modal || isRightClick) hasInteractedOutsideRef.current = true; 81202 }), 81203 style: { 81204 ...props.style,
81205 '--radix-dropdown-menu-content-transform-origin': 'var(--radix-popper-transform-origin)', 81206 '--radix-dropdown-menu-content-available-width': 'var(--radix-popper-available-width)', 81207 '--radix-dropdown-menu-content-available-height': 'var(--radix-popper-available-height)', 81208 '--radix-dropdown-menu-trigger-width': 'var(--radix-popper-anchor-width)', 81209 '--radix-dropdown-menu-trigger-height': 'var(--radix-popper-anchor-height)' 81210 } 81211 })); 81212}); 81213/*#__PURE__*/ Object.assign($d08ef79370b62062$export$6e76d93a37c01248, { 81214 displayName: $d08ef79370b62062$var$CONTENT_NAME 81215}); 81216/* ------------------------------------------------------------------------------------------------- 81217 * DropdownMenuGroup 81218 * -----------------------------------------------------------------------------------------------*/ const $d08ef79370b62062$var$GROUP_NAME = 'DropdownMenuGroup'; 81219const $d08ef79370b62062$export$246bebaba3a2f70e = /*#__PURE__*/ (0,external_React_.forwardRef)((props, forwardedRef)=>{ 81220 const { __scopeDropdownMenu: __scopeDropdownMenu , ...groupProps } = props; 81221 const menuScope = $d08ef79370b62062$var$useMenuScope(__scopeDropdownMenu); 81222 return /*#__PURE__*/ (0,external_React_.createElement)($6cc32821e9371a1c$export$eb2fcfdbd7ba97d4, extends_extends({}, menuScope, groupProps, { 81223 ref: forwardedRef 81224 })); 81225}); 81226/*#__PURE__*/ Object.assign($d08ef79370b62062$export$246bebaba3a2f70e, { 81227 displayName: $d08ef79370b62062$var$GROUP_NAME 81228}); 81229/* ------------------------------------------------------------------------------------------------- 81230 * DropdownMenuLabel 81231 * -----------------------------------------------------------------------------------------------*/ const $d08ef79370b62062$var$LABEL_NAME = 'DropdownMenuLabel'; 81232const $d08ef79370b62062$export$76e48c5b57f24495 = /*#__PURE__*/ (0,external_React_.forwardRef)((props, forwardedRef)=>{ 81233 const { __scopeDropdownMenu: __scopeDropdownMenu , ...labelProps } = props; 81234 const menuScope = $d08ef79370b62062$var$useMenuScope(__scopeDropdownMenu); 81235 return /*#__PURE__*/ (0,external_React_.createElement)($6cc32821e9371a1c$export$b04be29aa201d4f5, extends_extends({}, menuScope, labelProps, { 81236 ref: forwardedRef 81237 })); 81238}); 81239/*#__PURE__*/ Object.assign($d08ef79370b62062$export$76e48c5b57f24495, { 81240 displayName: $d08ef79370b62062$var$LABEL_NAME 81241}); 81242/* ------------------------------------------------------------------------------------------------- 81243 * DropdownMenuItem 81244 * -----------------------------------------------------------------------------------------------*/ const $d08ef79370b62062$var$ITEM_NAME = 'DropdownMenuItem'; 81245const $d08ef79370b62062$export$ed97964d1871885d = /*#__PURE__*/ (0,external_React_.forwardRef)((props, forwardedRef)=>{ 81246 const { __scopeDropdownMenu: __scopeDropdownMenu , ...itemProps } = props; 81247 const menuScope = $d08ef79370b62062$var$useMenuScope(__scopeDropdownMenu); 81248 return /*#__PURE__*/ (0,external_React_.createElement)($6cc32821e9371a1c$export$6d08773d2e66f8f2, extends_extends({}, menuScope, itemProps, { 81249 ref: forwardedRef 81250 })); 81251}); 81252/*#__PURE__*/ Object.assign($d08ef79370b62062$export$ed97964d1871885d, { 81253 displayName: $d08ef79370b62062$var$ITEM_NAME 81254}); 81255/* ------------------------------------------------------------------------------------------------- 81256 * DropdownMenuCheckboxItem 81257 * -----------------------------------------------------------------------------------------------*/ const $d08ef79370b62062$var$CHECKBOX_ITEM_NAME = 'DropdownMenuCheckboxItem'; 81258const $d08ef79370b62062$export$53a69729da201fa9 = /*#__PURE__*/ (0,external_React_.forwardRef)((props, forwardedRef)=>{ 81259 const { __scopeDropdownMenu: __scopeDropdownMenu , ...checkboxItemProps } = props; 81260 const menuScope = $d08ef79370b62062$var$useMenuScope(__scopeDropdownMenu); 81261 return /*#__PURE__*/ (0,external_React_.createElement)($6cc32821e9371a1c$export$16ce288f89fa631c, extends_extends({}, menuScope, checkboxItemProps, { 81262 ref: forwardedRef 81263 })); 81264}); 81265/*#__PURE__*/ Object.assign($d08ef79370b62062$export$53a69729da201fa9, { 81266 displayName: $d08ef79370b62062$var$CHECKBOX_ITEM_NAME 81267}); 81268/* ------------------------------------------------------------------------------------------------- 81269 * DropdownMenuRadioGroup 81270 * -----------------------------------------------------------------------------------------------*/ const $d08ef79370b62062$var$RADIO_GROUP_NAME = 'DropdownMenuRadioGroup'; 81271const $d08ef79370b62062$export$3323ad73d55f587e = /*#__PURE__*/ (0,external_React_.forwardRef)((props, forwardedRef)=>{ 81272 const { __scopeDropdownMenu: __scopeDropdownMenu , ...radioGroupProps } = props; 81273 const menuScope = $d08ef79370b62062$var$useMenuScope(__scopeDropdownMenu); 81274 return /*#__PURE__*/ (0,external_React_.createElement)($6cc32821e9371a1c$export$a98f0dcb43a68a25, extends_extends({}, menuScope, radioGroupProps, { 81275 ref: forwardedRef 81276 })); 81277}); 81278/*#__PURE__*/ Object.assign($d08ef79370b62062$export$3323ad73d55f587e, { 81279 displayName: $d08ef79370b62062$var$RADIO_GROUP_NAME 81280}); 81281/* ------------------------------------------------------------------------------------------------- 81282 * DropdownMenuRadioItem 81283 * -----------------------------------------------------------------------------------------------*/ const $d08ef79370b62062$var$RADIO_ITEM_NAME = 'DropdownMenuRadioItem'; 81284const $d08ef79370b62062$export$e4f69b41b1637536 = /*#__PURE__*/ (0,external_React_.forwardRef)((props, forwardedRef)=>{ 81285 const { __scopeDropdownMenu: __scopeDropdownMenu , ...radioItemProps } = props; 81286 const menuScope = $d08ef79370b62062$var$useMenuScope(__scopeDropdownMenu); 81287 return /*#__PURE__*/ (0,external_React_.createElement)($6cc32821e9371a1c$export$371ab307eab489c0, extends_extends({}, menuScope, radioItemProps, { 81288 ref: forwardedRef 81289 })); 81290}); 81291/*#__PURE__*/ Object.assign($d08ef79370b62062$export$e4f69b41b1637536, { 81292 displayName: $d08ef79370b62062$var$RADIO_ITEM_NAME 81293}); 81294/* ------------------------------------------------------------------------------------------------- 81295 * DropdownMenuItemIndicator 81296 * -----------------------------------------------------------------------------------------------*/ const $d08ef79370b62062$var$INDICATOR_NAME
81296= 'DropdownMenuItemIndicator'; 81297const $d08ef79370b62062$export$42355ae145153fb6 = /*#__PURE__*/ (0,external_React_.forwardRef)((props, forwardedRef)=>{ 81298 const { __scopeDropdownMenu: __scopeDropdownMenu , ...itemIndicatorProps } = props; 81299 const menuScope = $d08ef79370b62062$var$useMenuScope(__scopeDropdownMenu); 81300 return /*#__PURE__*/ (0,external_React_.createElement)($6cc32821e9371a1c$export$c3468e2714d175fa, extends_extends({}, menuScope, itemIndicatorProps, { 81301 ref: forwardedRef 81302 })); 81303}); 81304/*#__PURE__*/ Object.assign($d08ef79370b62062$export$42355ae145153fb6, { 81305 displayName: $d08ef79370b62062$var$INDICATOR_NAME 81306}); 81307/* ------------------------------------------------------------------------------------------------- 81308 * DropdownMenuSeparator 81309 * -----------------------------------------------------------------------------------------------*/ const $d08ef79370b62062$var$SEPARATOR_NAME = 'DropdownMenuSeparator'; 81310const $d08ef79370b62062$export$da160178fd3bc7e9 = /*#__PURE__*/ (0,external_React_.forwardRef)((props, forwardedRef)=>{ 81311 const { __scopeDropdownMenu: __scopeDropdownMenu , ...separatorProps } = props; 81312 const menuScope = $d08ef79370b62062$var$useMenuScope(__scopeDropdownMenu); 81313 return /*#__PURE__*/ (0,external_React_.createElement)($6cc32821e9371a1c$export$1ff3c3f08ae963c0, extends_extends({}, menuScope, separatorProps, { 81314 ref: forwardedRef 81315 })); 81316}); 81317/*#__PURE__*/ Object.assign($d08ef79370b62062$export$da160178fd3bc7e9, { 81318 displayName: $d08ef79370b62062$var$SEPARATOR_NAME 81319}); 81320/* ------------------------------------------------------------------------------------------------- 81321 * DropdownMenuArrow 81322 * -----------------------------------------------------------------------------------------------*/ const $d08ef79370b62062$var$ARROW_NAME = 'DropdownMenuArrow'; 81323const $d08ef79370b62062$export$34b8980744021ec5 = /*#__PURE__*/ (0,external_React_.forwardRef)((props, forwardedRef)=>{ 81324 const { __scopeDropdownMenu: __scopeDropdownMenu , ...arrowProps } = props; 81325 const menuScope = $d08ef79370b62062$var$useMenuScope(__scopeDropdownMenu); 81326 return /*#__PURE__*/ (0,external_React_.createElement)($6cc32821e9371a1c$export$21b07c8f274aebd5, extends_extends({}, menuScope, arrowProps, { 81327 ref: forwardedRef 81328 })); 81329}); 81330/*#__PURE__*/ Object.assign($d08ef79370b62062$export$34b8980744021ec5, { 81331 displayName: $d08ef79370b62062$var$ARROW_NAME 81332}); 81333/* ------------------------------------------------------------------------------------------------- 81334 * DropdownMenuSub 81335 * -----------------------------------------------------------------------------------------------*/ const $d08ef79370b62062$export$2f307d81a64f5442 = (props)=>{ 81336 const { __scopeDropdownMenu: __scopeDropdownMenu , children: children , open: openProp , onOpenChange: onOpenChange , defaultOpen: defaultOpen } = props; 81337 const menuScope = $d08ef79370b62062$var$useMenuScope(__scopeDropdownMenu); 81338 const [open = false, setOpen] = $71cd76cc60e0454e$export$6f32135080cb4c3({ 81339 prop: openProp, 81340 defaultProp: defaultOpen, 81341 onChange: onOpenChange 81342 }); 81343 return /*#__PURE__*/ (0,external_React_.createElement)($6cc32821e9371a1c$export$d7a01e11500dfb6f, extends_extends({}, menuScope, { 81344 open: open, 81345 onOpenChange: setOpen 81346 }), children); 81347}; 81348/* ------------------------------------------------------------------------------------------------- 81349 * DropdownMenuSubTrigger 81350 * -----------------------------------------------------------------------------------------------*/ const $d08ef79370b62062$var$SUB_TRIGGER_NAME = 'DropdownMenuSubTrigger'; 81351const $d08ef79370b62062$export$21dcb7ec56f874cf = /*#__PURE__*/ (0,external_React_.forwardRef)((props, forwardedRef)=>{ 81352 const { __scopeDropdownMenu: __scopeDropdownMenu , ...subTriggerProps } = props; 81353 const menuScope = $d08ef79370b62062$var$useMenuScope(__scopeDropdownMenu); 81354 return /*#__PURE__*/ (0,external_React_.createElement)($6cc32821e9371a1c$export$2ea8a7a591ac5eac, extends_extends({}, menuScope, subTriggerProps, { 81355 ref: forwardedRef 81356 })); 81357}); 81358/*#__PURE__*/ Object.assign($d08ef79370b62062$export$21dcb7ec56f874cf, { 81359 displayName: $d08ef79370b62062$var$SUB_TRIGGER_NAME 81360}); 81361/* ------------------------------------------------------------------------------------------------- 81362 * DropdownMenuSubContent 81363 * -----------------------------------------------------------------------------------------------*/ const $d08ef79370b62062$var$SUB_CONTENT_NAME = 'DropdownMenuSubContent'; 81364const $d08ef79370b62062$export$f34ec8bc2482cc5f = /*#__PURE__*/ (0,external_React_.forwardRef)((props, forwardedRef)=>{ 81365 const { __scopeDropdownMenu: __scopeDropdownMenu , ...subContentProps } = props; 81366 const menuScope = $d08ef79370b62062$var$useMenuScope(__scopeDropdownMenu); 81367 return /*#__PURE__*/ (0,external_React_.createElement)($6cc32821e9371a1c$export$6d4de93b380beddf, extends_extends({}, menuScope, subContentProps, { 81368 ref: forwardedRef, 81369 style: { 81370 ...props.style,
81371 '--radix-dropdown-menu-content-transform-origin': 'var(--radix-popper-transform-origin)', 81372 '--radix-dropdown-menu-content-available-width': 'var(--radix-popper-available-width)', 81373 '--radix-dropdown-menu-content-available-height': 'var(--radix-popper-available-height)', 81374 '--radix-dropdown-menu-trigger-width': 'var(--radix-popper-anchor-width)', 81375 '--radix-dropdown-menu-trigger-height': 'var(--radix-popper-anchor-height)' 81376 } 81377 })); 81378}); 81379/*#__PURE__*/ Object.assign($d08ef79370b62062$export$f34ec8bc2482cc5f, { 81380 displayName: $d08ef79370b62062$var$SUB_CONTENT_NAME 81381}); 81382/* -----------------------------------------------------------------------------------------------*/ const $d08ef79370b62062$export$be92b6f5f03c0fe9 = $d08ef79370b62062$export$e44a253a59704894; 81383const $d08ef79370b62062$export$41fb9f06171c75f4 = $d08ef79370b62062$export$d2469213b3befba9; 81384const $d08ef79370b62062$export$602eac185826482c = $d08ef79370b62062$export$cd369b4d4d54efc9; 81385const $d08ef79370b62062$export$7c6e2c02157bb7d2 = $d08ef79370b62062$export$6e76d93a37c01248; 81386const $d08ef79370b62062$export$eb2fcfdbd7ba97d4 = $d08ef79370b62062$export$246bebaba3a2f70e; 81387const $d08ef79370b62062$export$b04be29aa201d4f5 = $d08ef79370b62062$export$76e48c5b57f24495; 81388const $d08ef79370b62062$export$6d08773d2e66f8f2 = $d08ef79370b62062$export$ed97964d1871885d; 81389const $d08ef79370b62062$export$16ce288f89fa631c = $d08ef79370b62062$export$53a69729da201fa9; 81390const $d08ef79370b62062$export$a98f0dcb43a68a25 = $d08ef79370b62062$export$3323ad73d55f587e; 81391const $d08ef79370b62062$export$371ab307eab489c0 = $d08ef79370b62062$export$e4f69b41b1637536; 81392const $d08ef79370b62062$export$c3468e2714d175fa = $d08ef79370b62062$export$42355ae145153fb6; 81393const $d08ef79370b62062$export$1ff3c3f08ae963c0 = $d08ef79370b62062$export$da160178fd3bc7e9; 81394const $d08ef79370b62062$export$21b07c8f274aebd5 = (/* unused pure expression or super */ null && ($d08ef79370b62062$export$34b8980744021ec5)); 81395const $d08ef79370b62062$export$d7a01e11500dfb6f = $d08ef79370b62062$export$2f307d81a64f5442; 81396const $d08ef79370b62062$export$2ea8a7a591ac5eac = $d08ef79370b62062$export$21dcb7ec56f874cf; 81397const $d08ef79370b62062$export$6d4de93b380beddf = $d08ef79370b62062$export$f34ec8bc2482cc5f; 81398 81399 81400 81401 81402 81403 81404;// CONCATENATED MODULE: ./packages/icons/build-module/library/chevron-right-small.js 81405 81406/** 81407 * WordPress dependencies 81408 */ 81409 81410const chevronRightSmall = (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.SVG, { 81411 xmlns: "http://www.w3.org/2000/svg", 81412 viewBox: "0 0 24 24" 81413}, (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.Path, { 81414 d: "M10.8622 8.04053L14.2805 12.0286L10.8622 16.0167L9.72327 15.0405L12.3049 12.0286L9.72327 9.01672L10.8622 8.04053Z" 81415})); 81416/* harmony default export */ const chevron_right_small = (chevronRightSmall); 81417 81418;// CONCATENATED MODULE: ./packages/components/build-module/dropdown-menu-v2/styles.js 81419 81420function dropdown_menu_v2_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)."; } 81421/** 81422 * External dependencies 81423 */ 81424 81425 81426 81427 81428/** 81429 * Internal dependencies 81430 */ 81431 81432 81433 81434const ANIMATION_PARAMS = { 81435 SLIDE_AMOUNT: '2px', 81436 DURATION: '400ms', 81437 EASING: 'cubic-bezier( 0.16, 1, 0.3, 1 )' 81438}; 81439const CONTENT_WRAPPER_PADDING = space(2); 81440const ITEM_PREFIX_WIDTH = space(7); 81441const ITEM_PADDING_INLINE_START = space(2); 81442const ITEM_PADDING_INLINE_END = space(2.5); 81443 81444// TODO: should bring this into the config, and make themeable 81445const DEFAULT_BORDER_COLOR = COLORS.ui.borderDisabled; 81446const TOOLBAR_VARIANT_BORDER_COLOR = COLORS.gray[900]; 81447const DEFAULT_BOX_SHADOW = `0 0 0 ${config_values.borderWidth} ${DEFAULT_BORDER_COLOR}, ${config_values.popoverShadow}`; 81448const TOOLBAR_VARIANT_BOX_SHADOW = `0 0 0 ${config_values.borderWidth} ${TOOLBAR_VARIANT_BORDER_COLOR}`; 81449const slideUpAndFade = emotion_react_browser_esm_keyframes({ 81450 '0%': { 81451 opacity: 0, 81452 transform: `translateY(${ANIMATION_PARAMS.SLIDE_AMOUNT})` 81453 }, 81454 '100%': { 81455 opacity: 1, 81456 transform: 'translateY(0)' 81457 } 81458}); 81459const slideRightAndFade = emotion_react_browser_esm_keyframes({ 81460 '0%': { 81461 opacity: 0, 81462 transform: `translateX(-${ANIMATION_PARAMS.SLIDE_AMOUNT})` 81463 }, 81464 '100%': { 81465 opacity: 1, 81466 transform: 'translateX(0)' 81467 } 81468}); 81469const slideDownAndFade = emotion_react_browser_esm_keyframes({ 81470 '0%': { 81471 opacity: 0, 81472 transform: `translateY(-${ANIMATION_PARAMS.SLIDE_AMOUNT})` 81473 }, 81474 '100%': { 81475 opacity: 1, 81476 transform: 'translateY(0)' 81477 } 81478}); 81479const slideLeftAndFade = emotion_react_browser_esm_keyframes({ 81480 '0%': { 81481 opacity: 0, 81482 transform: `translateX(${ANIMATION_PARAMS.SLIDE_AMOUNT})` 81483 }, 81484 '100%': { 81485 opacity: 1, 81486 transform: 'translateX(0)' 81487 } 81488}); 81489const baseContent = variant =>
81489 /*#__PURE__*/emotion_react_browser_esm_css("min-width:220px;background-color:", COLORS.ui.background, ";border-radius:", config_values.radiusBlockUi, ";padding:", CONTENT_WRAPPER_PADDING, ";box-shadow:", variant === 'toolbar' ? TOOLBAR_VARIANT_BOX_SHADOW : DEFAULT_BOX_SHADOW, ";animation-duration:", ANIMATION_PARAMS.DURATION, ";animation-timing-function:", ANIMATION_PARAMS.EASING, ";will-change:transform,opacity;&[data-side='top']{animation-name:", slideDownAndFade, ";}&[data-side='right']{animation-name:", slideLeftAndFade, ";}&[data-side='bottom']{animation-name:", slideUpAndFade, ";}&[data-side='left']{animation-name:", slideRightAndFade, ";}@media ( prefers-reduced-motion ){animation-duration:0s;}" + ( true ? "" : 0), true ? "" : 0); 81490const itemPrefix = /*#__PURE__*/emotion_react_browser_esm_css("width:", ITEM_PREFIX_WIDTH, ";display:inline-flex;align-items:center;justify-content:center;margin-inline-start:calc( -1 * ", ITEM_PADDING_INLINE_START, " );margin-top:", space(-2), ";margin-bottom:", space(-2), ";" + ( true ? "" : 0), true ? "" : 0); 81491const itemSuffix = /*#__PURE__*/emotion_react_browser_esm_css("width:max-content;display:inline-flex;align-items:center;justify-content:center;margin-inline-start:auto;padding-inline-start:", space(6), ";margin-top:", space(-2), ";margin-bottom:", space(-2), ";opacity:0.6;[data-highlighted]>&,[data-state='open']>&,[data-disabled]>&{opacity:1;}" + ( true ? "" : 0), true ? "" : 0); 81492const ItemPrefixWrapper = emotion_styled_base_browser_esm("span", true ? { 81493 target: "e1kdzosf11" 81494} : 0)(itemPrefix, ";" + ( true ? "" : 0)); 81495const ItemSuffixWrapper = emotion_styled_base_browser_esm("span", true ? { 81496 target: "e1kdzosf10" 81497} : 0)(itemSuffix, ";" + ( true ? "" : 0)); 81498const baseItem = /*#__PURE__*/emotion_react_browser_esm_css("all:unset;font-size:", font('default.fontSize'), ";font-family:inherit;font-weight:normal;line-height:20px;color:", COLORS.gray[900], ";border-radius:", config_values.radiusBlockUi, ";display:flex;align-items:center;padding:", space(2), " ", ITEM_PADDING_INLINE_END, " ", space(2), " ", ITEM_PADDING_INLINE_START, ";position:relative;user-select:none;outline:none;&[data-disabled]{opacity:0.5;pointer-events:none;}&[data-highlighted]{background-color:", COLORS.gray[100], ";outline:2px solid transparent;}svg{fill:currentColor;}&:not( :has( ", ItemPrefixWrapper, " ) ){padding-inline-start:", ITEM_PREFIX_WIDTH, ";}" + ( true ? "" : 0), true ? "" : 0); 81499const dropdown_menu_v2_styles_Content = /*#__PURE__*/emotion_styled_base_browser_esm($d08ef79370b62062$export$7c6e2c02157bb7d2, true ? { 81500 target: "e1kdzosf9" 81501} : 0)(props => baseContent(props.variant), ";" + ( true ? "" : 0)); 81502const SubContent = /*#__PURE__*/emotion_styled_base_browser_esm($d08ef79370b62062$export$6d4de93b380beddf, true ? { 81503 target: "e1kdzosf8" 81504} : 0)(props => baseContent(props.variant), ";" + ( true ? "" : 0)); 81505const styles_Item = /*#__PURE__*/emotion_styled_base_browser_esm($d08ef79370b62062$export$6d08773d2e66f8f2, true ? { 81506 target: "e1kdzosf7" 81507} : 0)(baseItem, ";" + ( true ? "" : 0)); 81508const CheckboxItem = /*#__PURE__*/emotion_styled_base_browser_esm($d08ef79370b62062$export$16ce288f89fa631c, true ? { 81509 target: "e1kdzosf6" 81510} : 0)(baseItem, ";" + ( true ? "" : 0)); 81511const RadioItem = /*#__PURE__*/emotion_styled_base_browser_esm($d08ef79370b62062$export$371ab307eab489c0, true ? { 81512 target: "e1kdzosf5" 81513} : 0)(baseItem, ";" + ( true ? "" : 0)); 81514const SubTrigger = /*#__PURE__*/emotion_styled_base_browser_esm($d08ef79370b62062$export$2ea8a7a591ac5eac, true ? { 81515 target: "e1kdzosf4" 81516} : 0)(baseItem, " &[data-state='open']{background-color:", COLORS.gray[100], ";}" + ( true ? "" : 0)); 81517const styles_Label = /*#__PURE__*/emotion_styled_base_browser_esm($d08ef79370b62062$export$b04be29aa201d4f5, true ? { 81518 target: "e1kdzosf3" 81519} : 0)("box-sizing:border-box;display:flex;align-items:center;min-height:", space(8), ";padding:", space(2), " ", ITEM_PADDING_INLINE_END, " ", space(2), " ", ITEM_PREFIX_WIDTH, ";color:", COLORS.gray[700], ";font-size:11px;line-height:1.4;font-weight:500;text-transform:uppercase;" + ( true ? "" : 0)); 81520const styles_Separator = /*#__PURE__*/emotion_styled_base_browser_esm($d08ef79370b62062$export$1ff3c3f08ae963c0, true ? { 81521 target: "e1kdzosf2" 81522} : 0)("height:", config_values.borderWidth, ";background-color:", props => props.variant === 'toolbar' ? TOOLBAR_VARIANT_BORDER_COLOR : DEFAULT_BORDER_COLOR, ";margin:", space(2), " calc( -1 * ", CONTENT_WRAPPER_PADDING, " );" + ( true ? "" : 0)); 81523const ItemIndicator = /*#__PURE__*/emotion_styled_base_browser_esm($d08ef79370b62062$export$c3468e2714d175fa, true ? { 81524 target: "e1kdzosf1" 81525} : 0)( true ? { 81526 name: "pl708y", 81527 styles: "display:inline-flex;align-items:center;justify-content:center" 81528} : 0); 81529const SubmenuRtlChevronIcon = /*#__PURE__*/emotion_styled_base_browser_esm(build_module_icon, true ? { 81530 target: "e1kdzosf0" 81531} : 0)(rtl({ 81532 transform: `scaleX(1) translateX(${space(2)})` 81533}, { 81534 transform: `scaleX(-1) translateX(${space(2)})` 81535}), ";" + ( true ? "" : 0)); 81536 81537;// CONCATENATED MODULE: ./packages/components/build-module/dropdown-menu-v2/index.js 81538 81539/** 81540 * External dependencies 81541 */ 81542 81543 81544/** 81545 * WordPress dependencies 81546 */ 81547 81548 81549 81550 81551 81552/** 81553 * Internal dependencies 81554 */ 81555 81556 81557 81558 81559 81560// Menu content's side padding + 4px 81561const SUB_MENU_OFFSET_SIDE = 16; 81562// Opposite amount of the top padding of the menu item 81563const SUB_MENU_OFFSET_ALIGN = -8; 81564const DropdownMenuPrivateContext = (0,external_wp_element_namespaceObject.createContext)({ 81565 variant: undefined, 81566 portalContainer: null 81567}); 81568const dropdown_menu_v2_UnconnectedDropdownMenu = props => { 81569 const { 81570 // Root props 81571 defaultOpen, 81572 open, 81573 onOpenChange, 81574 modal = true, 81575 // Content positioning props 81576 side = 'bottom', 81577 sideOffset = 0,
81578 align = 'center', 81579 alignOffset = 0, 81580 // Render props 81581 children, 81582 trigger, 81583 // From internal components context 81584 variant 81585 } = useContextSystem(props, 'DropdownMenu'); 81586 81587 // Render the portal in the default slot used by the legacy Popover component. 81588 const slot = useSlot(SLOT_NAME); 81589 const portalContainer = slot.ref?.current; 81590 const privateContextValue = (0,external_wp_element_namespaceObject.useMemo)(() => ({ 81591 variant, 81592 portalContainer 81593 }), [variant, portalContainer]); 81594 return (0,external_wp_element_namespaceObject.createElement)($d08ef79370b62062$export$be92b6f5f03c0fe9, { 81595 defaultOpen: defaultOpen, 81596 open: open, 81597 onOpenChange: onOpenChange, 81598 modal: modal, 81599 dir: (0,external_wp_i18n_namespaceObject.isRTL)() ? 'rtl' : 'ltr' 81600 }, (0,external_wp_element_namespaceObject.createElement)($d08ef79370b62062$export$41fb9f06171c75f4, { 81601 asChild: true 81602 }, trigger), (0,external_wp_element_namespaceObject.createElement)($d08ef79370b62062$export$602eac185826482c, { 81603 container: portalContainer 81604 }, (0,external_wp_element_namespaceObject.createElement)(dropdown_menu_v2_styles_Content, { 81605 side: side, 81606 align: align, 81607 sideOffset: sideOffset, 81608 alignOffset: alignOffset, 81609 loop: true, 81610 variant: variant 81611 }, (0,external_wp_element_namespaceObject.createElement)(DropdownMenuPrivateContext.Provider, { 81612 value: privateContextValue 81613 }, children)))); 81614}; 81615 81616/** 81617 * `DropdownMenu` displays a menu to the user (such as a set of actions 81618 * or functions) triggered by a button. 81619 */ 81620const dropdown_menu_v2_DropdownMenu = contextConnectWithoutRef(dropdown_menu_v2_UnconnectedDropdownMenu, 'DropdownMenu'); 81621const DropdownSubMenuTrigger = ({ 81622 prefix, 81623 suffix = (0,external_wp_element_namespaceObject.createElement)(SubmenuRtlChevronIcon, { 81624 icon: chevron_right_small, 81625 size: 24 81626 }), 81627 children 81628}) => { 81629 return (0,external_wp_element_namespaceObject.createElement)(external_wp_element_namespaceObject.Fragment, null, prefix && (0,external_wp_element_namespaceObject.createElement)(ItemPrefixWrapper, null, prefix), children, suffix && (0,external_wp_element_namespaceObject.createElement)(ItemSuffixWrapper, null, suffix)); 81630}; 81631const DropdownSubMenu = ({ 81632 // Sub props 81633 defaultOpen, 81634 open, 81635 onOpenChange, 81636 // Sub trigger props 81637 disabled, 81638 textValue, 81639 // Render props 81640 children, 81641 trigger 81642}) => { 81643 const { 81644 variant, 81645 portalContainer 81646 } = (0,external_wp_element_namespaceObject.useContext)(DropdownMenuPrivateContext); 81647 return (0,external_wp_element_namespaceObject.createElement)($d08ef79370b62062$export$d7a01e11500dfb6f, { 81648 defaultOpen: defaultOpen, 81649 open: open, 81650 onOpenChange: onOpenChange 81651 }, (0,external_wp_element_namespaceObject.createElement)(SubTrigger, { 81652 disabled: disabled, 81653 textValue: textValue 81654 }, trigger), (0,external_wp_element_namespaceObject.createElement)($d08ef79370b62062$export$602eac185826482c, { 81655 container: portalContainer 81656 }, (0,external_wp_element_namespaceObject.createElement)(SubContent, { 81657 loop: true, 81658 sideOffset: SUB_MENU_OFFSET_SIDE, 81659 alignOffset: SUB_MENU_OFFSET_ALIGN, 81660 variant: variant 81661 }, children))); 81662}; 81663const DropdownMenuLabel = props => (0,external_wp_element_namespaceObject.createElement)(styles_Label, { 81664 ...props 81665}); 81666const DropdownMenuGroup = props => (0,external_wp_element_namespaceObject.createElement)($d08ef79370b62062$export$eb2fcfdbd7ba97d4, { 81667 ...props 81668}); 81669const DropdownMenuItem = (0,external_wp_element_namespaceObject.forwardRef)(({ 81670 children, 81671 prefix, 81672 suffix, 81673 ...props 81674}, forwardedRef) => { 81675 return (0,external_wp_element_namespaceObject.createElement)(styles_Item, { 81676 ...props, 81677 ref: forwardedRef 81678 }, prefix && (0,external_wp_element_namespaceObject.createElement)(ItemPrefixWrapper, null, prefix), children, suffix && (0,external_wp_element_namespaceObject.createElement)(ItemSuffixWrapper, null, suffix)); 81679}); 81680const DropdownMenuCheckboxItem = ({ 81681 children, 81682 checked = false, 81683 suffix, 81684 ...props 81685}) => { 81686 return (0,external_wp_element_namespaceObject.createElement)(CheckboxItem, { 81687 ...props, 81688 checked: checked 81689 }, (0,external_wp_element_namespaceObject.createElement)(ItemPrefixWrapper, null, (0,external_wp_element_namespaceObject.createElement)(ItemIndicator, null, (checked === 'indeterminate' || checked === true) && (0,external_wp_element_namespaceObject.createElement)(build_module_icon, { 81690 icon: checked === 'indeterminate' ? line_solid : library_check, 81691 size: 24 81692 }))), children, suffix && (0,external_wp_element_namespaceObject.createElement)(ItemSuffixWrapper, null, suffix
81692)); 81693}; 81694const DropdownMenuRadioGroup = props => (0,external_wp_element_namespaceObject.createElement)($d08ef79370b62062$export$a98f0dcb43a68a25, { 81695 ...props 81696}); 81697const radioDot = (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.SVG, { 81698 viewBox: "0 0 24 24", 81699 xmlns: "http://www.w3.org/2000/svg" 81700}, (0,external_wp_element_namespaceObject.createElement)(external_wp_primitives_namespaceObject.Circle, { 81701 cx: 12, 81702 cy: 12, 81703 r: 3, 81704 fill: "currentColor" 81705})); 81706const DropdownMenuRadioItem = ({ 81707 children, 81708 suffix, 81709 ...props 81710}) => { 81711 return (0,external_wp_element_namespaceObject.createElement)(RadioItem, { 81712 ...props 81713 }, (0,external_wp_element_namespaceObject.createElement)(ItemPrefixWrapper, null, (0,external_wp_element_namespaceObject.createElement)(ItemIndicator, null, (0,external_wp_element_namespaceObject.createElement)(build_module_icon, { 81714 icon: radioDot, 81715 size: 22 81716 }))), children, suffix && (0,external_wp_element_namespaceObject.createElement)(ItemSuffixWrapper, null, suffix)); 81717}; 81718const DropdownMenuSeparator = props => { 81719 const { 81720 variant 81721 } = (0,external_wp_element_namespaceObject.useContext)(DropdownMenuPrivateContext); 81722 return (0,external_wp_element_namespaceObject.createElement)(styles_Separator, { 81723 ...props, 81724 variant: variant 81725 }); 81726}; 81727 81728;// CONCATENATED MODULE: ./packages/components/build-module/theme/styles.js 81729 81730/** 81731 * External dependencies 81732 */ 81733 81734 81735 81736/** 81737 * Internal dependencies 81738 */ 81739 81740const colorVariables = ({ 81741 colors 81742}) => { 81743 const shades = Object.entries(colors.gray || {}).map(([k, v]) => `--wp-components-color-gray-${k}: ${v};`).join(''); 81744 return [/*#__PURE__*/emotion_react_browser_esm_css("--wp-components-color-accent:", colors.accent, ";--wp-components-color-accent-darker-10:", colors.accentDarker10, ";--wp-components-color-accent-darker-20:", colors.accentDarker20, ";--wp-components-color-accent-inverted:", colors.accentInverted, ";--wp-components-color-background:", colors.background, ";--wp-components-color-foreground:", colors.foreground, ";--wp-components-color-foreground-inverted:", colors.foregroundInverted, ";", shades, ";" + ( true ? "" : 0), true ? "" : 0)]; 81745}; 81746const theme_styles_Wrapper = emotion_styled_base_browser_esm("div", true ? { 81747 target: "e1krjpvb0" 81748} : 0)( true ? "" : 0); 81749 81750;// CONCATENATED MODULE: ./packages/components/build-module/theme/color-algorithms.js 81751/** 81752 * External dependencies 81753 */ 81754 81755 81756 81757 81758/** 81759 * WordPress dependencies 81760 */ 81761 81762 81763/** 81764 * Internal dependencies 81765 */ 81766 81767 81768k([names, a11y]); 81769function generateThemeVariables(inputs) { 81770 validateInputs(inputs); 81771 const generatedColors = { 81772 ...generateAccentDependentColors(inputs.accent), 81773 ...generateBackgroundDependentColors(inputs.background) 81774 }; 81775 warnContrastIssues(checkContrasts(inputs, generatedColors)); 81776 return { 81777 colors: generatedColors 81778 }; 81779} 81780function validateInputs(inputs) { 81781 for (const [key, value] of Object.entries(inputs)) { 81782 if (typeof value !== 'undefined' && !w(value).isValid()) { 81783 false ? 0 : void 0; 81784 } 81785 } 81786} 81787function checkContrasts(inputs, outputs) { 81788 const background = inputs.background || COLORS.white; 81789 const accent = inputs.accent || '#3858e9'; 81790 const foreground = outputs.foreground || COLORS.gray[900]; 81791 const gray = outputs.gray || COLORS.gray; 81792 return { 81793 accent: w(background).isReadable(accent) ? undefined : `The background color ("${background}") does not have sufficient contrast against the accent color ("${accent}").`, 81794 foreground: w(background).isReadable(foreground) ? undefined : `The background color provided ("${background}") does not have sufficient contrast against the standard foreground colors.`, 81795 grays: w(background).contrast(gray[600]) >= 3 && w(background).contrast(gray[700]) >= 4.5 ? undefined : `The background color provided ("${background}") cannot generate a set of grayscale foreground colors with sufficient contrast. Try adjusting the color to be lighter or darker.` 81796 }; 81797} 81798function warnContrastIssues(issues) { 81799 for (const error of Object.values(issues)) { 81800 if (error) { 81801 false ? 0 : void 0; 81802 } 81803 } 81804} 81805function generateAccentDependentColors(accent) { 81806 if (!accent) return {}; 81807 return { 81808 accent, 81809 accentDarker10: w(accent).darken(0.1).toHex(), 81810 accentDarker20: w(accent).darken(0.2).toHex(), 81811 accentInverted: getForegroundForColor(accent) 81812 }; 81813}
81814function generateBackgroundDependentColors(background) { 81815 if (!background) return {}; 81816 const foreground = getForegroundForColor(background); 81817 return { 81818 background, 81819 foreground, 81820 foregroundInverted: getForegroundForColor(foreground), 81821 gray: generateShades(background, foreground) 81822 }; 81823} 81824function getForegroundForColor(color) { 81825 return w(color).isDark() ? COLORS.white : COLORS.gray[900]; 81826} 81827function generateShades(background, foreground) { 81828 // How much darkness you need to add to #fff to get the COLORS.gray[n] color 81829 const SHADES = { 81830 100: 0.06, 81831 200: 0.121, 81832 300: 0.132, 81833 400: 0.2, 81834 600: 0.42, 81835 700: 0.543, 81836 800: 0.821 81837 }; 81838 81839 // Darkness of COLORS.gray[ 900 ], relative to #fff 81840 const limit = 0.884; 81841 const direction = w(background).isDark() ? 'lighten' : 'darken'; 81842 81843 // Lightness delta between the background and foreground colors 81844 const range = Math.abs(w(background).toHsl().l - w(foreground).toHsl().l) / 100; 81845 const result = {}; 81846 Object.entries(SHADES).forEach(([key, value]) => { 81847 result[parseInt(key)] = w(background)[direction](value / limit * range).to
81847Hex(); 81848 }); 81849 return result; 81850} 81851 81852;// CONCATENATED MODULE: ./packages/components/build-module/theme/index.js 81853 81854/** 81855 * WordPress dependencies 81856 */ 81857 81858 81859/** 81860 * Internal dependencies 81861 */ 81862 81863 81864 81865 81866 81867/** 81868 * `Theme` allows defining theme variables for components in the `@wordpress/components` package. 81869 * 81870 * Multiple `Theme` components can be nested in order to override specific theme variables. 81871 * 81872 * 81873 * ```jsx 81874 * const Example = () => { 81875 * return ( 81876 * <Theme accent="red"> 81877 * <Button variant="primary">I'm red</Button> 81878 * <Theme accent="blue"> 81879 * <Button variant="primary">I'm blue</Button> 81880 * </Theme> 81881 * </Theme> 81882 * ); 81883 * }; 81884 * ``` 81885 */ 81886function Theme({ 81887 accent, 81888 background, 81889 className, 81890 ...props 81891}) { 81892 const cx = useCx(); 81893 const classes = (0,external_wp_element_namespaceObject.useMemo)(() => cx(...colorVariables(generateThemeVariables({ 81894 accent, 81895 background 81896 })), className), [accent, background, className, cx]); 81897 return (0,external_wp_element_namespaceObject.createElement)(theme_styles_Wrapper, { 81898 className: classes, 81899 ...props 81900 }); 81901} 81902/* harmony default export */ const theme = (Theme); 81903 81904;// CONCATENATED MODULE: ./packages/components/build-module/private-apis.js 81905/** 81906 * WordPress dependencies 81907 */ 81908 81909 81910/** 81911 * Internal dependencies 81912 */ 81913 81914 81915 81916 81917 81918 81919 81920const { 81921 lock, 81922 unlock 81923} = (0,external_wp_privateApis_namespaceObject.__dangerousOptInToUnstableAPIsOnlyForCoreModules)('I know using unstable features means my theme or plugin will inevitably break in the next version of WordPress.', '@wordpress/components'); 81924const privateApis = {}; 81925lock(privateApis, { 81926 CustomSelectControl: CustomSelectControl, 81927 __experimentalPopoverLegacyPositionToPlacement: positionToPlacement, 81928 createPrivateSlotFill: createPrivateSlotFill, 81929 ComponentsContext: ComponentsContext, 81930 DropdownMenuV2: dropdown_menu_v2_DropdownMenu, 81931 DropdownMenuCheckboxItemV2: DropdownMenuCheckboxItem, 81932 DropdownMenuGroupV2: DropdownMenuGroup, 81933 DropdownMenuItemV2: DropdownMenuItem, 81934 DropdownMenuLabelV2: DropdownMenuLabel, 81935 DropdownMenuRadioGroupV2: DropdownMenuRadioGroup, 81936 DropdownMenuRadioItemV2: DropdownMenuRadioItem, 81937 DropdownMenuSeparatorV2: DropdownMenuSeparator, 81938 DropdownSubMenuV2: DropdownSubMenu, 81939 DropdownSubMenuTriggerV2: DropdownSubMenuTrigger, 81940 ProgressBar: progress_bar, 81941 Theme: theme 81942}); 81943 81944;// CONCATENATED MODULE: ./packages/components/build-module/index.js 81945// Primitives. 81946 81947 81948// Components. 81949 81950 81951 81952 81953 81954 81955 81956 81957 81958 81959 81960 81961 81962 81963 81964 81965 81966 81967 81968 81969 81970 81971 81972 81973 81974 81975 81976 81977 81978 81979 81980 81981 81982 81983 81984 81985 81986 81987 81988 81989 81990 81991 81992 81993 81994 81995 81996 81997 81998 81999 82000 82001 82002 82003 82004 82005 82006 82007 82008 82009 82010 82011 82012 82013 82014 82015 82016 82017 82018 82019 82020 82021 82022 82023 82024 82025 82026 82027 82028 82029 82030 82031 82032 82033 82034 82035 82036 82037 82038 82039 82040 82041 82042 82043 82044 82045 82046 82047 82048 82049 82050 82051 82052 82053 82054 82055 82056 82057 82058 82059 82060 82061 82062 82063 82064 82065 82066 82067// Higher-Order Components. 82068 82069 82070 82071 82072 82073 82074 82075 82076 82077// Private APIs. 82078 82079 82080})(); 82081 82082(window.wp = window.wp || {}).components = __webpack_exports__; 82083/******/ })() 82084;
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.