| [ Index ] |
PHP Cross Reference of WordPress Trunk (Updated Daily) |
[Summary view] [Print] [Text view]
1 var __create = Object.create; 2 var __defProp = Object.defineProperty; 3 var __getOwnPropDesc = Object.getOwnPropertyDescriptor; 4 var __getOwnPropNames = Object.getOwnPropertyNames; 5 var __getProtoOf = Object.getPrototypeOf; 6 var __hasOwnProp = Object.prototype.hasOwnProperty; 7 var __commonJS = (cb, mod) => function __require() { 8 return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports; 9 }; 10 var __export = (target, all) => { 11 for (var name in all) 12 __defProp(target, name, { get: all[name], enumerable: true }); 13 }; 14 var __copyProps = (to, from, except, desc) => { 15 if (from && typeof from === "object" || typeof from === "function") { 16 for (let key of __getOwnPropNames(from)) 17 if (!__hasOwnProp.call(to, key) && key !== except) 18 __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable }); 19 } 20 return to; 21 }; 22 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps( 23 // If the importer is in node compatibility mode or this is not an ESM 24 // file that has been converted to a CommonJS file using a Babel- 25 // compatible transform (i.e. "__esModule" has not been set), then set 26 // "default" to the CommonJS "module.exports" for node compatibility. 27 isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, 28 mod 29 )); 30 31 // package-external:@wordpress/i18n 32 var require_i18n = __commonJS({ 33 "package-external:@wordpress/i18n"(exports, module) { 34 module.exports = window.wp.i18n; 35 } 36 }); 37 38 // package-external:@wordpress/components 39 var require_components = __commonJS({ 40 "package-external:@wordpress/components"(exports, module) { 41 module.exports = window.wp.components; 42 } 43 }); 44 45 // vendor-external:react/jsx-runtime 46 var require_jsx_runtime = __commonJS({ 47 "vendor-external:react/jsx-runtime"(exports, module) { 48 module.exports = window.ReactJSXRuntime; 49 } 50 }); 51 52 // package-external:@wordpress/element 53 var require_element = __commonJS({ 54 "package-external:@wordpress/element"(exports, module) { 55 module.exports = window.wp.element; 56 } 57 }); 58 59 // vendor-external:react 60 var require_react = __commonJS({ 61 "vendor-external:react"(exports, module) { 62 module.exports = window.React; 63 } 64 }); 65 66 // vendor-external:react-dom 67 var require_react_dom = __commonJS({ 68 "vendor-external:react-dom"(exports, module) { 69 module.exports = window.ReactDOM; 70 } 71 }); 72 73 // node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.development.js 74 var require_use_sync_external_store_shim_development = __commonJS({ 75 "node_modules/use-sync-external-store/cjs/use-sync-external-store-shim.development.js"(exports) { 76 "use strict"; 77 (function() { 78 function is(x2, y2) { 79 return x2 === y2 && (0 !== x2 || 1 / x2 === 1 / y2) || x2 !== x2 && y2 !== y2; 80 } 81 function useSyncExternalStore$2(subscribe2, getSnapshot) { 82 didWarnOld18Alpha || void 0 === React26.startTransition || (didWarnOld18Alpha = true, console.error( 83 "You are using an outdated, pre-release alpha of React 18 that does not support useSyncExternalStore. The use-sync-external-store shim will not work correctly. Upgrade to a newer pre-release." 84 )); 85 var value = getSnapshot(); 86 if (!didWarnUncachedGetSnapshot) { 87 var cachedValue = getSnapshot(); 88 objectIs(value, cachedValue) || (console.error( 89 "The result of getSnapshot should be cached to avoid an infinite loop" 90 ), didWarnUncachedGetSnapshot = true); 91 } 92 cachedValue = useState41({ 93 inst: { value, getSnapshot } 94 }); 95 var inst = cachedValue[0].inst, forceUpdate = cachedValue[1]; 96 useLayoutEffect5( 97 function() { 98 inst.value = value; 99 inst.getSnapshot = getSnapshot; 100 checkIfSnapshotChanged(inst) && forceUpdate({ inst }); 101 }, 102 [subscribe2, value, getSnapshot] 103 ); 104 useEffect36( 105 function() { 106 checkIfSnapshotChanged(inst) && forceUpdate({ inst }); 107 return subscribe2(function() { 108 checkIfSnapshotChanged(inst) && forceUpdate({ inst }); 109 }); 110 }, 111 [subscribe2] 112 ); 113 useDebugValue(value); 114 return value; 115 } 116 function checkIfSnapshotChanged(inst) { 117 var latestGetSnapshot = inst.getSnapshot; 118 inst = inst.value; 119 try { 120 var nextValue = latestGetSnapshot(); 121 return !objectIs(inst, nextValue); 122 } catch (error2) { 123 return true; 124 } 125 } 126 function useSyncExternalStore$1(subscribe2, getSnapshot) { 127 return getSnapshot(); 128 } 129 "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(Error()); 130 var React26 = require_react(), objectIs = "function" === typeof Object.is ? Object.is : is, useState41 = React26.useState, useEffect36 = React26.useEffect, useLayoutEffect5 = React26.useLayoutEffect, useDebugValue = React26.useDebugValue, didWarnOld18Alpha = false, didWarnUncachedGetSnapshot = false, shim = "undefined" === typeof window || "undefined" === typeof window.document || "undefined" === typeof window.document.createElement ? useSyncExternalStore$1 : useSyncExternalStore$2; 131 exports.useSyncExternalStore = void 0 !== React26.useSyncExternalStore ? React26.useSyncExternalStore : shim; 132 "undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ && "function" === typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop && __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(Error()); 133 })(); 134 } 135 }); 136 137 // node_modules/use-sync-external-store/shim/index.js 138 var require_shim = __commonJS({ 139 "node_modules/use-sync-external-store/shim/index.js"(exports, module) { 140 "use strict"; 141 if (false) { 142 module.exports = null; 143 } else { 144 module.exports = require_use_sync_external_store_shim_development(); 145 } 146 } 147 }); 148 149 // package-external:@wordpress/primitives 150 var require_primitives = __commonJS({ 151 "package-external:@wordpress/primitives"(exports, module) { 152 module.exports = window.wp.primitives; 153 } 154 }); 155 156 // package-external:@wordpress/private-apis 157 var require_private_apis = __commonJS({ 158 "package-external:@wordpress/private-apis"(exports, module) { 159 module.exports = window.wp.privateApis; 160 } 161 }); 162 163 // package-external:@wordpress/compose 164 var require_compose = __commonJS({ 165 "package-external:@wordpress/compose"(exports, module) { 166 module.exports = window.wp.compose; 167 } 168 }); 169 170 // package-external:@wordpress/keycodes 171 var require_keycodes = __commonJS({ 172 "package-external:@wordpress/keycodes"(exports, module) { 173 module.exports = window.wp.keycodes; 174 } 175 }); 176 177 // package-external:@wordpress/data 178 var require_data = __commonJS({ 179 "package-external:@wordpress/data"(exports, module) { 180 module.exports = window.wp.data; 181 } 182 }); 183 184 // node_modules/remove-accents/index.js 185 var require_remove_accents = __commonJS({ 186 "node_modules/remove-accents/index.js"(exports, module) { 187 var characterMap = { 188 "\xC0": "A", 189 "\xC1": "A", 190 "\xC2": "A", 191 "\xC3": "A", 192 "\xC4": "A", 193 "\xC5": "A", 194 "\u1EA4": "A", 195 "\u1EAE": "A", 196 "\u1EB2": "A", 197 "\u1EB4": "A", 198 "\u1EB6": "A", 199 "\xC6": "AE", 200 "\u1EA6": "A", 201 "\u1EB0": "A", 202 "\u0202": "A", 203 "\u1EA2": "A", 204 "\u1EA0": "A", 205 "\u1EA8": "A", 206 "\u1EAA": "A", 207 "\u1EAC": "A", 208 "\xC7": "C", 209 "\u1E08": "C", 210 "\xC8": "E", 211 "\xC9": "E", 212 "\xCA": "E", 213 "\xCB": "E", 214 "\u1EBE": "E", 215 "\u1E16": "E", 216 "\u1EC0": "E", 217 "\u1E14": "E", 218 "\u1E1C": "E", 219 "\u0206": "E", 220 "\u1EBA": "E", 221 "\u1EBC": "E", 222 "\u1EB8": "E", 223 "\u1EC2": "E", 224 "\u1EC4": "E", 225 "\u1EC6": "E", 226 "\xCC": "I", 227 "\xCD": "I", 228 "\xCE": "I", 229 "\xCF": "I", 230 "\u1E2E": "I", 231 "\u020A": "I", 232 "\u1EC8": "I", 233 "\u1ECA": "I", 234 "\xD0": "D", 235 "\xD1": "N", 236 "\xD2": "O", 237 "\xD3": "O", 238 "\xD4": "O", 239 "\xD5": "O", 240 "\xD6": "O", 241 "\xD8": "O", 242 "\u1ED0": "O", 243 "\u1E4C": "O", 244 "\u1E52": "O", 245 "\u020E": "O", 246 "\u1ECE": "O", 247 "\u1ECC": "O", 248 "\u1ED4": "O", 249 "\u1ED6": "O", 250 "\u1ED8": "O", 251 "\u1EDC": "O", 252 "\u1EDE": "O", 253 "\u1EE0": "O", 254 "\u1EDA": "O", 255 "\u1EE2": "O", 256 "\xD9": "U", 257 "\xDA": "U", 258 "\xDB": "U", 259 "\xDC": "U", 260 "\u1EE6": "U", 261 "\u1EE4": "U", 262 "\u1EEC": "U", 263 "\u1EEE": "U", 264 "\u1EF0": "U", 265 "\xDD": "Y", 266 "\xE0": "a", 267 "\xE1": "a", 268 "\xE2": "a", 269 "\xE3": "a", 270 "\xE4": "a", 271 "\xE5": "a", 272 "\u1EA5": "a", 273 "\u1EAF": "a", 274 "\u1EB3": "a", 275 "\u1EB5": "a", 276 "\u1EB7": "a", 277 "\xE6": "ae", 278 "\u1EA7": "a", 279 "\u1EB1": "a", 280 "\u0203": "a", 281 "\u1EA3": "a", 282 "\u1EA1": "a", 283 "\u1EA9": "a", 284 "\u1EAB": "a", 285 "\u1EAD": "a", 286 "\xE7": "c", 287 "\u1E09": "c", 288 "\xE8": "e", 289 "\xE9": "e", 290 "\xEA": "e", 291 "\xEB": "e", 292 "\u1EBF": "e", 293 "\u1E17": "e", 294 "\u1EC1": "e", 295 "\u1E15": "e", 296 "\u1E1D": "e", 297 "\u0207": "e", 298 "\u1EBB": "e", 299 "\u1EBD": "e", 300 "\u1EB9": "e", 301 "\u1EC3": "e", 302 "\u1EC5": "e", 303 "\u1EC7": "e", 304 "\xEC": "i", 305 "\xED": "i", 306 "\xEE": "i", 307 "\xEF": "i", 308 "\u1E2F": "i", 309 "\u020B": "i", 310 "\u1EC9": "i", 311 "\u1ECB": "i", 312 "\xF0": "d", 313 "\xF1": "n", 314 "\xF2": "o", 315 "\xF3": "o", 316 "\xF4": "o", 317 "\xF5": "o", 318 "\xF6": "o", 319 "\xF8": "o", 320 "\u1ED1": "o", 321 "\u1E4D": "o", 322 "\u1E53": "o", 323 "\u020F": "o", 324 "\u1ECF": "o", 325 "\u1ECD": "o", 326 "\u1ED5": "o", 327 "\u1ED7": "o", 328 "\u1ED9": "o", 329 "\u1EDD": "o", 330 "\u1EDF": "o", 331 "\u1EE1": "o", 332 "\u1EDB": "o", 333 "\u1EE3": "o", 334 "\xF9": "u", 335 "\xFA": "u", 336 "\xFB": "u", 337 "\xFC": "u", 338 "\u1EE7": "u", 339 "\u1EE5": "u", 340 "\u1EED": "u", 341 "\u1EEF": "u", 342 "\u1EF1": "u", 343 "\xFD": "y", 344 "\xFF": "y", 345 "\u0100": "A", 346 "\u0101": "a", 347 "\u0102": "A", 348 "\u0103": "a", 349 "\u0104": "A", 350 "\u0105": "a", 351 "\u0106": "C", 352 "\u0107": "c", 353 "\u0108": "C", 354 "\u0109": "c", 355 "\u010A": "C", 356 "\u010B": "c", 357 "\u010C": "C", 358 "\u010D": "c", 359 "C\u0306": "C", 360 "c\u0306": "c", 361 "\u010E": "D", 362 "\u010F": "d", 363 "\u0110": "D", 364 "\u0111": "d", 365 "\u0112": "E", 366 "\u0113": "e", 367 "\u0114": "E", 368 "\u0115": "e", 369 "\u0116": "E", 370 "\u0117": "e", 371 "\u0118": "E", 372 "\u0119": "e", 373 "\u011A": "E", 374 "\u011B": "e", 375 "\u011C": "G", 376 "\u01F4": "G", 377 "\u011D": "g", 378 "\u01F5": "g", 379 "\u011E": "G", 380 "\u011F": "g", 381 "\u0120": "G", 382 "\u0121": "g", 383 "\u0122": "G", 384 "\u0123": "g", 385 "\u0124": "H", 386 "\u0125": "h", 387 "\u0126": "H", 388 "\u0127": "h", 389 "\u1E2A": "H", 390 "\u1E2B": "h", 391 "\u0128": "I", 392 "\u0129": "i", 393 "\u012A": "I", 394 "\u012B": "i", 395 "\u012C": "I", 396 "\u012D": "i", 397 "\u012E": "I", 398 "\u012F": "i", 399 "\u0130": "I", 400 "\u0131": "i", 401 "\u0132": "IJ", 402 "\u0133": "ij", 403 "\u0134": "J", 404 "\u0135": "j", 405 "\u0136": "K", 406 "\u0137": "k", 407 "\u1E30": "K", 408 "\u1E31": "k", 409 "K\u0306": "K", 410 "k\u0306": "k", 411 "\u0139": "L", 412 "\u013A": "l", 413 "\u013B": "L", 414 "\u013C": "l", 415 "\u013D": "L", 416 "\u013E": "l", 417 "\u013F": "L", 418 "\u0140": "l", 419 "\u0141": "l", 420 "\u0142": "l", 421 "\u1E3E": "M", 422 "\u1E3F": "m", 423 "M\u0306": "M", 424 "m\u0306": "m", 425 "\u0143": "N", 426 "\u0144": "n", 427 "\u0145": "N", 428 "\u0146": "n", 429 "\u0147": "N", 430 "\u0148": "n", 431 "\u0149": "n", 432 "N\u0306": "N", 433 "n\u0306": "n", 434 "\u014C": "O", 435 "\u014D": "o", 436 "\u014E": "O", 437 "\u014F": "o", 438 "\u0150": "O", 439 "\u0151": "o", 440 "\u0152": "OE", 441 "\u0153": "oe", 442 "P\u0306": "P", 443 "p\u0306": "p", 444 "\u0154": "R", 445 "\u0155": "r", 446 "\u0156": "R", 447 "\u0157": "r", 448 "\u0158": "R", 449 "\u0159": "r", 450 "R\u0306": "R", 451 "r\u0306": "r", 452 "\u0212": "R", 453 "\u0213": "r", 454 "\u015A": "S", 455 "\u015B": "s", 456 "\u015C": "S", 457 "\u015D": "s", 458 "\u015E": "S", 459 "\u0218": "S", 460 "\u0219": "s", 461 "\u015F": "s", 462 "\u0160": "S", 463 "\u0161": "s", 464 "\u0162": "T", 465 "\u0163": "t", 466 "\u021B": "t", 467 "\u021A": "T", 468 "\u0164": "T", 469 "\u0165": "t", 470 "\u0166": "T", 471 "\u0167": "t", 472 "T\u0306": "T", 473 "t\u0306": "t", 474 "\u0168": "U", 475 "\u0169": "u", 476 "\u016A": "U", 477 "\u016B": "u", 478 "\u016C": "U", 479 "\u016D": "u", 480 "\u016E": "U", 481 "\u016F": "u", 482 "\u0170": "U", 483 "\u0171": "u", 484 "\u0172": "U", 485 "\u0173": "u", 486 "\u0216": "U", 487 "\u0217": "u", 488 "V\u0306": "V", 489 "v\u0306": "v", 490 "\u0174": "W", 491 "\u0175": "w", 492 "\u1E82": "W", 493 "\u1E83": "w", 494 "X\u0306": "X", 495 "x\u0306": "x", 496 "\u0176": "Y", 497 "\u0177": "y", 498 "\u0178": "Y", 499 "Y\u0306": "Y", 500 "y\u0306": "y", 501 "\u0179": "Z", 502 "\u017A": "z", 503 "\u017B": "Z", 504 "\u017C": "z", 505 "\u017D": "Z", 506 "\u017E": "z", 507 "\u017F": "s", 508 "\u0192": "f", 509 "\u01A0": "O", 510 "\u01A1": "o", 511 "\u01AF": "U", 512 "\u01B0": "u", 513 "\u01CD": "A", 514 "\u01CE": "a", 515 "\u01CF": "I", 516 "\u01D0": "i", 517 "\u01D1": "O", 518 "\u01D2": "o", 519 "\u01D3": "U", 520 "\u01D4": "u", 521 "\u01D5": "U", 522 "\u01D6": "u", 523 "\u01D7": "U", 524 "\u01D8": "u", 525 "\u01D9": "U", 526 "\u01DA": "u", 527 "\u01DB": "U", 528 "\u01DC": "u", 529 "\u1EE8": "U", 530 "\u1EE9": "u", 531 "\u1E78": "U", 532 "\u1E79": "u", 533 "\u01FA": "A", 534 "\u01FB": "a", 535 "\u01FC": "AE", 536 "\u01FD": "ae", 537 "\u01FE": "O", 538 "\u01FF": "o", 539 "\xDE": "TH", 540 "\xFE": "th", 541 "\u1E54": "P", 542 "\u1E55": "p", 543 "\u1E64": "S", 544 "\u1E65": "s", 545 "X\u0301": "X", 546 "x\u0301": "x", 547 "\u0403": "\u0413", 548 "\u0453": "\u0433", 549 "\u040C": "\u041A", 550 "\u045C": "\u043A", 551 "A\u030B": "A", 552 "a\u030B": "a", 553 "E\u030B": "E", 554 "e\u030B": "e", 555 "I\u030B": "I", 556 "i\u030B": "i", 557 "\u01F8": "N", 558 "\u01F9": "n", 559 "\u1ED2": "O", 560 "\u1ED3": "o", 561 "\u1E50": "O", 562 "\u1E51": "o", 563 "\u1EEA": "U", 564 "\u1EEB": "u", 565 "\u1E80": "W", 566 "\u1E81": "w", 567 "\u1EF2": "Y", 568 "\u1EF3": "y", 569 "\u0200": "A", 570 "\u0201": "a", 571 "\u0204": "E", 572 "\u0205": "e", 573 "\u0208": "I", 574 "\u0209": "i", 575 "\u020C": "O", 576 "\u020D": "o", 577 "\u0210": "R", 578 "\u0211": "r", 579 "\u0214": "U", 580 "\u0215": "u", 581 "B\u030C": "B", 582 "b\u030C": "b", 583 "\u010C\u0323": "C", 584 "\u010D\u0323": "c", 585 "\xCA\u030C": "E", 586 "\xEA\u030C": "e", 587 "F\u030C": "F", 588 "f\u030C": "f", 589 "\u01E6": "G", 590 "\u01E7": "g", 591 "\u021E": "H", 592 "\u021F": "h", 593 "J\u030C": "J", 594 "\u01F0": "j", 595 "\u01E8": "K", 596 "\u01E9": "k", 597 "M\u030C": "M", 598 "m\u030C": "m", 599 "P\u030C": "P", 600 "p\u030C": "p", 601 "Q\u030C": "Q", 602 "q\u030C": "q", 603 "\u0158\u0329": "R", 604 "\u0159\u0329": "r", 605 "\u1E66": "S", 606 "\u1E67": "s", 607 "V\u030C": "V", 608 "v\u030C": "v", 609 "W\u030C": "W", 610 "w\u030C": "w", 611 "X\u030C": "X", 612 "x\u030C": "x", 613 "Y\u030C": "Y", 614 "y\u030C": "y", 615 "A\u0327": "A", 616 "a\u0327": "a", 617 "B\u0327": "B", 618 "b\u0327": "b", 619 "\u1E10": "D", 620 "\u1E11": "d", 621 "\u0228": "E", 622 "\u0229": "e", 623 "\u0190\u0327": "E", 624 "\u025B\u0327": "e", 625 "\u1E28": "H", 626 "\u1E29": "h", 627 "I\u0327": "I", 628 "i\u0327": "i", 629 "\u0197\u0327": "I", 630 "\u0268\u0327": "i", 631 "M\u0327": "M", 632 "m\u0327": "m", 633 "O\u0327": "O", 634 "o\u0327": "o", 635 "Q\u0327": "Q", 636 "q\u0327": "q", 637 "U\u0327": "U", 638 "u\u0327": "u", 639 "X\u0327": "X", 640 "x\u0327": "x", 641 "Z\u0327": "Z", 642 "z\u0327": "z", 643 "\u0439": "\u0438", 644 "\u0419": "\u0418", 645 "\u0451": "\u0435", 646 "\u0401": "\u0415" 647 }; 648 var chars = Object.keys(characterMap).join("|"); 649 var allAccents = new RegExp(chars, "g"); 650 var firstAccent = new RegExp(chars, ""); 651 function matcher(match2) { 652 return characterMap[match2]; 653 } 654 var removeAccents3 = function(string) { 655 return string.replace(allAccents, matcher); 656 }; 657 var hasAccents = function(string) { 658 return !!string.match(firstAccent); 659 }; 660 module.exports = removeAccents3; 661 module.exports.has = hasAccents; 662 module.exports.remove = removeAccents3; 663 } 664 }); 665 666 // node_modules/fast-deep-equal/es6/index.js 667 var require_es6 = __commonJS({ 668 "node_modules/fast-deep-equal/es6/index.js"(exports, module) { 669 "use strict"; 670 module.exports = function equal(a2, b2) { 671 if (a2 === b2) return true; 672 if (a2 && b2 && typeof a2 == "object" && typeof b2 == "object") { 673 if (a2.constructor !== b2.constructor) return false; 674 var length, i2, keys; 675 if (Array.isArray(a2)) { 676 length = a2.length; 677 if (length != b2.length) return false; 678 for (i2 = length; i2-- !== 0; ) 679 if (!equal(a2[i2], b2[i2])) return false; 680 return true; 681 } 682 if (a2 instanceof Map && b2 instanceof Map) { 683 if (a2.size !== b2.size) return false; 684 for (i2 of a2.entries()) 685 if (!b2.has(i2[0])) return false; 686 for (i2 of a2.entries()) 687 if (!equal(i2[1], b2.get(i2[0]))) return false; 688 return true; 689 } 690 if (a2 instanceof Set && b2 instanceof Set) { 691 if (a2.size !== b2.size) return false; 692 for (i2 of a2.entries()) 693 if (!b2.has(i2[0])) return false; 694 return true; 695 } 696 if (ArrayBuffer.isView(a2) && ArrayBuffer.isView(b2)) { 697 length = a2.length; 698 if (length != b2.length) return false; 699 for (i2 = length; i2-- !== 0; ) 700 if (a2[i2] !== b2[i2]) return false; 701 return true; 702 } 703 if (a2.constructor === RegExp) return a2.source === b2.source && a2.flags === b2.flags; 704 if (a2.valueOf !== Object.prototype.valueOf) return a2.valueOf() === b2.valueOf(); 705 if (a2.toString !== Object.prototype.toString) return a2.toString() === b2.toString(); 706 keys = Object.keys(a2); 707 length = keys.length; 708 if (length !== Object.keys(b2).length) return false; 709 for (i2 = length; i2-- !== 0; ) 710 if (!Object.prototype.hasOwnProperty.call(b2, keys[i2])) return false; 711 for (i2 = length; i2-- !== 0; ) { 712 var key = keys[i2]; 713 if (!equal(a2[key], b2[key])) return false; 714 } 715 return true; 716 } 717 return a2 !== a2 && b2 !== b2; 718 }; 719 } 720 }); 721 722 // package-external:@wordpress/date 723 var require_date = __commonJS({ 724 "package-external:@wordpress/date"(exports, module) { 725 module.exports = window.wp.date; 726 } 727 }); 728 729 // package-external:@wordpress/warning 730 var require_warning = __commonJS({ 731 "package-external:@wordpress/warning"(exports, module) { 732 module.exports = window.wp.warning; 733 } 734 }); 735 736 // node_modules/deepmerge/dist/cjs.js 737 var require_cjs = __commonJS({ 738 "node_modules/deepmerge/dist/cjs.js"(exports, module) { 739 "use strict"; 740 var isMergeableObject = function isMergeableObject2(value) { 741 return isNonNullObject(value) && !isSpecial(value); 742 }; 743 function isNonNullObject(value) { 744 return !!value && typeof value === "object"; 745 } 746 function isSpecial(value) { 747 var stringValue = Object.prototype.toString.call(value); 748 return stringValue === "[object RegExp]" || stringValue === "[object Date]" || isReactElement(value); 749 } 750 var canUseSymbol = typeof Symbol === "function" && Symbol.for; 751 var REACT_ELEMENT_TYPE = canUseSymbol ? /* @__PURE__ */ Symbol.for("react.element") : 60103; 752 function isReactElement(value) { 753 return value.$$typeof === REACT_ELEMENT_TYPE; 754 } 755 function emptyTarget(val) { 756 return Array.isArray(val) ? [] : {}; 757 } 758 function cloneUnlessOtherwiseSpecified(value, options) { 759 return options.clone !== false && options.isMergeableObject(value) ? deepmerge(emptyTarget(value), value, options) : value; 760 } 761 function defaultArrayMerge(target, source, options) { 762 return target.concat(source).map(function(element) { 763 return cloneUnlessOtherwiseSpecified(element, options); 764 }); 765 } 766 function getMergeFunction(key, options) { 767 if (!options.customMerge) { 768 return deepmerge; 769 } 770 var customMerge = options.customMerge(key); 771 return typeof customMerge === "function" ? customMerge : deepmerge; 772 } 773 function getEnumerableOwnPropertySymbols(target) { 774 return Object.getOwnPropertySymbols ? Object.getOwnPropertySymbols(target).filter(function(symbol3) { 775 return Object.propertyIsEnumerable.call(target, symbol3); 776 }) : []; 777 } 778 function getKeys2(target) { 779 return Object.keys(target).concat(getEnumerableOwnPropertySymbols(target)); 780 } 781 function propertyIsOnObject(object, property) { 782 try { 783 return property in object; 784 } catch (_) { 785 return false; 786 } 787 } 788 function propertyIsUnsafe(target, key) { 789 return propertyIsOnObject(target, key) && !(Object.hasOwnProperty.call(target, key) && Object.propertyIsEnumerable.call(target, key)); 790 } 791 function mergeObject(target, source, options) { 792 var destination = {}; 793 if (options.isMergeableObject(target)) { 794 getKeys2(target).forEach(function(key) { 795 destination[key] = cloneUnlessOtherwiseSpecified(target[key], options); 796 }); 797 } 798 getKeys2(source).forEach(function(key) { 799 if (propertyIsUnsafe(target, key)) { 800 return; 801 } 802 if (propertyIsOnObject(target, key) && options.isMergeableObject(source[key])) { 803 destination[key] = getMergeFunction(key, options)(target[key], source[key], options); 804 } else { 805 destination[key] = cloneUnlessOtherwiseSpecified(source[key], options); 806 } 807 }); 808 return destination; 809 } 810 function deepmerge(target, source, options) { 811 options = options || {}; 812 options.arrayMerge = options.arrayMerge || defaultArrayMerge; 813 options.isMergeableObject = options.isMergeableObject || isMergeableObject; 814 options.cloneUnlessOtherwiseSpecified = cloneUnlessOtherwiseSpecified; 815 var sourceIsArray = Array.isArray(source); 816 var targetIsArray = Array.isArray(target); 817 var sourceAndTargetTypesMatch = sourceIsArray === targetIsArray; 818 if (!sourceAndTargetTypesMatch) { 819 return cloneUnlessOtherwiseSpecified(source, options); 820 } else if (sourceIsArray) { 821 return options.arrayMerge(target, source, options); 822 } else { 823 return mergeObject(target, source, options); 824 } 825 } 826 deepmerge.all = function deepmergeAll(array, options) { 827 if (!Array.isArray(array)) { 828 throw new Error("first argument should be an array"); 829 } 830 return array.reduce(function(prev, next) { 831 return deepmerge(prev, next, options); 832 }, {}); 833 }; 834 var deepmerge_1 = deepmerge; 835 module.exports = deepmerge_1; 836 } 837 }); 838 839 // package-external:@wordpress/deprecated 840 var require_deprecated = __commonJS({ 841 "package-external:@wordpress/deprecated"(exports, module) { 842 module.exports = window.wp.deprecated; 843 } 844 }); 845 846 // package-external:@wordpress/notices 847 var require_notices = __commonJS({ 848 "package-external:@wordpress/notices"(exports, module) { 849 module.exports = window.wp.notices; 850 } 851 }); 852 853 // package-external:@wordpress/api-fetch 854 var require_api_fetch = __commonJS({ 855 "package-external:@wordpress/api-fetch"(exports, module) { 856 module.exports = window.wp.apiFetch; 857 } 858 }); 859 860 // package-external:@wordpress/blob 861 var require_blob = __commonJS({ 862 "package-external:@wordpress/blob"(exports, module) { 863 module.exports = window.wp.blob; 864 } 865 }); 866 867 // package-external:@wordpress/blocks 868 var require_blocks = __commonJS({ 869 "package-external:@wordpress/blocks"(exports, module) { 870 module.exports = window.wp.blocks; 871 } 872 }); 873 874 // node_modules/clsx/dist/clsx.mjs 875 function r(e2) { 876 var t2, f2, n2 = ""; 877 if ("string" == typeof e2 || "number" == typeof e2) n2 += e2; 878 else if ("object" == typeof e2) if (Array.isArray(e2)) { 879 var o2 = e2.length; 880 for (t2 = 0; t2 < o2; t2++) e2[t2] && (f2 = r(e2[t2])) && (n2 && (n2 += " "), n2 += f2); 881 } else for (f2 in e2) e2[f2] && (n2 && (n2 += " "), n2 += f2); 882 return n2; 883 } 884 function clsx() { 885 for (var e2, t2, f2 = 0, n2 = "", o2 = arguments.length; f2 < o2; f2++) (e2 = arguments[f2]) && (t2 = r(e2)) && (n2 && (n2 += " "), n2 += t2); 886 return n2; 887 } 888 var clsx_default = clsx; 889 890 // packages/admin-ui/build-module/navigable-region/index.mjs 891 var import_element = __toESM(require_element(), 1); 892 var import_jsx_runtime = __toESM(require_jsx_runtime(), 1); 893 var NavigableRegion = (0, import_element.forwardRef)( 894 ({ children, className, ariaLabel, as: Tag = "div", ...props }, ref) => { 895 return /* @__PURE__ */ (0, import_jsx_runtime.jsx)( 896 Tag, 897 { 898 ref, 899 className: clsx_default("admin-ui-navigable-region", className), 900 "aria-label": ariaLabel, 901 role: "region", 902 tabIndex: "-1", 903 ...props, 904 children 905 } 906 ); 907 } 908 ); 909 NavigableRegion.displayName = "NavigableRegion"; 910 var navigable_region_default = NavigableRegion; 911 912 // node_modules/@base-ui/utils/esm/useControlled.js 913 var React2 = __toESM(require_react(), 1); 914 function useControlled({ 915 controlled, 916 default: defaultProp, 917 name, 918 state = "value" 919 }) { 920 const { 921 current: isControlled 922 } = React2.useRef(controlled !== void 0); 923 const [valueState, setValue] = React2.useState(defaultProp); 924 const value = isControlled ? controlled : valueState; 925 if (true) { 926 React2.useEffect(() => { 927 if (isControlled !== (controlled !== void 0)) { 928 console.error([`Base UI: A component is changing the $isControlled ? "" : "un"}controlled $state} state of $name} to be $isControlled ? "un" : ""}controlled.`, "Elements should not switch from uncontrolled to controlled (or vice versa).", `Decide between using a controlled or uncontrolled $name} element for the lifetime of the component.`, "The nature of the state is determined during the first render. It's considered controlled if the value is not `undefined`.", "More info: https://fb.me/react-controlled-components"].join("\n")); 929 } 930 }, [state, name, controlled]); 931 const { 932 current: defaultValue2 933 } = React2.useRef(defaultProp); 934 React2.useEffect(() => { 935 if (!isControlled && JSON.stringify(defaultValue2) !== JSON.stringify(defaultProp)) { 936 console.error([`Base UI: A component is changing the default $state} state of an uncontrolled $name} after being initialized. To suppress this warning opt to use a controlled $name}.`].join("\n")); 937 } 938 }, [JSON.stringify(defaultProp)]); 939 } 940 const setValueIfUncontrolled = React2.useCallback((newValue) => { 941 if (!isControlled) { 942 setValue(newValue); 943 } 944 }, []); 945 return [value, setValueIfUncontrolled]; 946 } 947 948 // node_modules/@base-ui/utils/esm/useStableCallback.js 949 var React4 = __toESM(require_react(), 1); 950 951 // node_modules/@base-ui/utils/esm/useRefWithInit.js 952 var React3 = __toESM(require_react(), 1); 953 var UNINITIALIZED = {}; 954 function useRefWithInit(init2, initArg) { 955 const ref = React3.useRef(UNINITIALIZED); 956 if (ref.current === UNINITIALIZED) { 957 ref.current = init2(initArg); 958 } 959 return ref; 960 } 961 962 // node_modules/@base-ui/utils/esm/useStableCallback.js 963 var useInsertionEffect = React4[`useInsertionEffect$Math.random().toFixed(1)}`.slice(0, -3)]; 964 var useSafeInsertionEffect = ( 965 // React 17 doesn't have useInsertionEffect. 966 useInsertionEffect && // Preact replaces useInsertionEffect with useLayoutEffect and fires too late. 967 useInsertionEffect !== React4.useLayoutEffect ? useInsertionEffect : (fn) => fn() 968 ); 969 function useStableCallback(callback) { 970 const stable = useRefWithInit(createStableCallback).current; 971 stable.next = callback; 972 useSafeInsertionEffect(stable.effect); 973 return stable.trampoline; 974 } 975 function createStableCallback() { 976 const stable = { 977 next: void 0, 978 callback: assertNotCalled, 979 trampoline: (...args) => stable.callback?.(...args), 980 effect: () => { 981 stable.callback = stable.next; 982 } 983 }; 984 return stable; 985 } 986 function assertNotCalled() { 987 if (true) { 988 throw ( 989 /* minify-error-disabled */ 990 new Error("Base UI: Cannot call an event handler while rendering.") 991 ); 992 } 993 } 994 995 // node_modules/@base-ui/utils/esm/useIsoLayoutEffect.js 996 var React5 = __toESM(require_react(), 1); 997 var noop = () => { 998 }; 999 var useIsoLayoutEffect = typeof document !== "undefined" ? React5.useLayoutEffect : noop; 1000 1001 // node_modules/@base-ui/utils/esm/warn.js 1002 var set; 1003 if (true) { 1004 set = /* @__PURE__ */ new Set(); 1005 } 1006 function warn(...messages) { 1007 if (true) { 1008 const messageKey = messages.join(" "); 1009 if (!set.has(messageKey)) { 1010 set.add(messageKey); 1011 console.warn(`Base UI: $messageKey}`); 1012 } 1013 } 1014 } 1015 1016 // node_modules/@base-ui/react/esm/utils/useRenderElement.js 1017 var React8 = __toESM(require_react(), 1); 1018 1019 // node_modules/@base-ui/utils/esm/useMergedRefs.js 1020 function useMergedRefs(a2, b2, c2, d2) { 1021 const forkRef = useRefWithInit(createForkRef).current; 1022 if (didChange(forkRef, a2, b2, c2, d2)) { 1023 update(forkRef, [a2, b2, c2, d2]); 1024 } 1025 return forkRef.callback; 1026 } 1027 function useMergedRefsN(refs) { 1028 const forkRef = useRefWithInit(createForkRef).current; 1029 if (didChangeN(forkRef, refs)) { 1030 update(forkRef, refs); 1031 } 1032 return forkRef.callback; 1033 } 1034 function createForkRef() { 1035 return { 1036 callback: null, 1037 cleanup: null, 1038 refs: [] 1039 }; 1040 } 1041 function didChange(forkRef, a2, b2, c2, d2) { 1042 return forkRef.refs[0] !== a2 || forkRef.refs[1] !== b2 || forkRef.refs[2] !== c2 || forkRef.refs[3] !== d2; 1043 } 1044 function didChangeN(forkRef, newRefs) { 1045 return forkRef.refs.length !== newRefs.length || forkRef.refs.some((ref, index) => ref !== newRefs[index]); 1046 } 1047 function update(forkRef, refs) { 1048 forkRef.refs = refs; 1049 if (refs.every((ref) => ref == null)) { 1050 forkRef.callback = null; 1051 return; 1052 } 1053 forkRef.callback = (instance) => { 1054 if (forkRef.cleanup) { 1055 forkRef.cleanup(); 1056 forkRef.cleanup = null; 1057 } 1058 if (instance != null) { 1059 const cleanupCallbacks = Array(refs.length).fill(null); 1060 for (let i2 = 0; i2 < refs.length; i2 += 1) { 1061 const ref = refs[i2]; 1062 if (ref == null) { 1063 continue; 1064 } 1065 switch (typeof ref) { 1066 case "function": { 1067 const refCleanup = ref(instance); 1068 if (typeof refCleanup === "function") { 1069 cleanupCallbacks[i2] = refCleanup; 1070 } 1071 break; 1072 } 1073 case "object": { 1074 ref.current = instance; 1075 break; 1076 } 1077 default: 1078 } 1079 } 1080 forkRef.cleanup = () => { 1081 for (let i2 = 0; i2 < refs.length; i2 += 1) { 1082 const ref = refs[i2]; 1083 if (ref == null) { 1084 continue; 1085 } 1086 switch (typeof ref) { 1087 case "function": { 1088 const cleanupCallback = cleanupCallbacks[i2]; 1089 if (typeof cleanupCallback === "function") { 1090 cleanupCallback(); 1091 } else { 1092 ref(null); 1093 } 1094 break; 1095 } 1096 case "object": { 1097 ref.current = null; 1098 break; 1099 } 1100 default: 1101 } 1102 } 1103 }; 1104 } 1105 }; 1106 } 1107 1108 // node_modules/@base-ui/utils/esm/getReactElementRef.js 1109 var React7 = __toESM(require_react(), 1); 1110 1111 // node_modules/@base-ui/utils/esm/reactVersion.js 1112 var React6 = __toESM(require_react(), 1); 1113 var majorVersion = parseInt(React6.version, 10); 1114 function isReactVersionAtLeast(reactVersionToCheck) { 1115 return majorVersion >= reactVersionToCheck; 1116 } 1117 1118 // node_modules/@base-ui/utils/esm/getReactElementRef.js 1119 function getReactElementRef(element) { 1120 if (!/* @__PURE__ */ React7.isValidElement(element)) { 1121 return null; 1122 } 1123 const reactElement = element; 1124 const propsWithRef = reactElement.props; 1125 return (isReactVersionAtLeast(19) ? propsWithRef?.ref : reactElement.ref) ?? null; 1126 } 1127 1128 // node_modules/@base-ui/utils/esm/mergeObjects.js 1129 function mergeObjects(a2, b2) { 1130 if (a2 && !b2) { 1131 return a2; 1132 } 1133 if (!a2 && b2) { 1134 return b2; 1135 } 1136 if (a2 || b2) { 1137 return { 1138 ...a2, 1139 ...b2 1140 }; 1141 } 1142 return void 0; 1143 } 1144 1145 // node_modules/@base-ui/react/esm/utils/getStateAttributesProps.js 1146 function getStateAttributesProps(state, customMapping) { 1147 const props = {}; 1148 for (const key in state) { 1149 const value = state[key]; 1150 if (customMapping?.hasOwnProperty(key)) { 1151 const customProps = customMapping[key](value); 1152 if (customProps != null) { 1153 Object.assign(props, customProps); 1154 } 1155 continue; 1156 } 1157 if (value === true) { 1158 props[`data-$key.toLowerCase()}`] = ""; 1159 } else if (value) { 1160 props[`data-$key.toLowerCase()}`] = value.toString(); 1161 } 1162 } 1163 return props; 1164 } 1165 1166 // node_modules/@base-ui/react/esm/utils/resolveClassName.js 1167 function resolveClassName(className, state) { 1168 return typeof className === "function" ? className(state) : className; 1169 } 1170 1171 // node_modules/@base-ui/react/esm/utils/resolveStyle.js 1172 function resolveStyle(style, state) { 1173 return typeof style === "function" ? style(state) : style; 1174 } 1175 1176 // node_modules/@base-ui/react/esm/merge-props/mergeProps.js 1177 var EMPTY_PROPS = {}; 1178 function mergeProps(a2, b2, c2, d2, e2) { 1179 let merged = { 1180 ...resolvePropsGetter(a2, EMPTY_PROPS) 1181 }; 1182 if (b2) { 1183 merged = mergeOne(merged, b2); 1184 } 1185 if (c2) { 1186 merged = mergeOne(merged, c2); 1187 } 1188 if (d2) { 1189 merged = mergeOne(merged, d2); 1190 } 1191 if (e2) { 1192 merged = mergeOne(merged, e2); 1193 } 1194 return merged; 1195 } 1196 function mergePropsN(props) { 1197 if (props.length === 0) { 1198 return EMPTY_PROPS; 1199 } 1200 if (props.length === 1) { 1201 return resolvePropsGetter(props[0], EMPTY_PROPS); 1202 } 1203 let merged = { 1204 ...resolvePropsGetter(props[0], EMPTY_PROPS) 1205 }; 1206 for (let i2 = 1; i2 < props.length; i2 += 1) { 1207 merged = mergeOne(merged, props[i2]); 1208 } 1209 return merged; 1210 } 1211 function mergeOne(merged, inputProps) { 1212 if (isPropsGetter(inputProps)) { 1213 return inputProps(merged); 1214 } 1215 return mutablyMergeInto(merged, inputProps); 1216 } 1217 function mutablyMergeInto(mergedProps, externalProps) { 1218 if (!externalProps) { 1219 return mergedProps; 1220 } 1221 for (const propName in externalProps) { 1222 const externalPropValue = externalProps[propName]; 1223 switch (propName) { 1224 case "style": { 1225 mergedProps[propName] = mergeObjects(mergedProps.style, externalPropValue); 1226 break; 1227 } 1228 case "className": { 1229 mergedProps[propName] = mergeClassNames(mergedProps.className, externalPropValue); 1230 break; 1231 } 1232 default: { 1233 if (isEventHandler(propName, externalPropValue)) { 1234 mergedProps[propName] = mergeEventHandlers(mergedProps[propName], externalPropValue); 1235 } else { 1236 mergedProps[propName] = externalPropValue; 1237 } 1238 } 1239 } 1240 } 1241 return mergedProps; 1242 } 1243 function isEventHandler(key, value) { 1244 const code0 = key.charCodeAt(0); 1245 const code1 = key.charCodeAt(1); 1246 const code2 = key.charCodeAt(2); 1247 return code0 === 111 && code1 === 110 && code2 >= 65 && code2 <= 90 && (typeof value === "function" || typeof value === "undefined"); 1248 } 1249 function isPropsGetter(inputProps) { 1250 return typeof inputProps === "function"; 1251 } 1252 function resolvePropsGetter(inputProps, previousProps) { 1253 if (isPropsGetter(inputProps)) { 1254 return inputProps(previousProps); 1255 } 1256 return inputProps ?? EMPTY_PROPS; 1257 } 1258 function mergeEventHandlers(ourHandler, theirHandler) { 1259 if (!theirHandler) { 1260 return ourHandler; 1261 } 1262 if (!ourHandler) { 1263 return theirHandler; 1264 } 1265 return (event) => { 1266 if (isSyntheticEvent(event)) { 1267 const baseUIEvent = event; 1268 makeEventPreventable(baseUIEvent); 1269 const result2 = theirHandler(baseUIEvent); 1270 if (!baseUIEvent.baseUIHandlerPrevented) { 1271 ourHandler?.(baseUIEvent); 1272 } 1273 return result2; 1274 } 1275 const result = theirHandler(event); 1276 ourHandler?.(event); 1277 return result; 1278 }; 1279 } 1280 function makeEventPreventable(event) { 1281 event.preventBaseUIHandler = () => { 1282 event.baseUIHandlerPrevented = true; 1283 }; 1284 return event; 1285 } 1286 function mergeClassNames(ourClassName, theirClassName) { 1287 if (theirClassName) { 1288 if (ourClassName) { 1289 return theirClassName + " " + ourClassName; 1290 } 1291 return theirClassName; 1292 } 1293 return ourClassName; 1294 } 1295 function isSyntheticEvent(event) { 1296 return event != null && typeof event === "object" && "nativeEvent" in event; 1297 } 1298 1299 // node_modules/@base-ui/utils/esm/empty.js 1300 var EMPTY_ARRAY = Object.freeze([]); 1301 var EMPTY_OBJECT = Object.freeze({}); 1302 1303 // node_modules/@base-ui/react/esm/utils/constants.js 1304 var BASE_UI_SWIPE_IGNORE_ATTRIBUTE = "data-base-ui-swipe-ignore"; 1305 var LEGACY_SWIPE_IGNORE_ATTRIBUTE = "data-swipe-ignore"; 1306 var BASE_UI_SWIPE_IGNORE_SELECTOR = `[$BASE_UI_SWIPE_IGNORE_ATTRIBUTE}]`; 1307 var LEGACY_SWIPE_IGNORE_SELECTOR = `[$LEGACY_SWIPE_IGNORE_ATTRIBUTE}]`; 1308 1309 // node_modules/@base-ui/react/esm/utils/useRenderElement.js 1310 var import_react = __toESM(require_react(), 1); 1311 function useRenderElement(element, componentProps, params = {}) { 1312 const renderProp = componentProps.render; 1313 const outProps = useRenderElementProps(componentProps, params); 1314 if (params.enabled === false) { 1315 return null; 1316 } 1317 const state = params.state ?? EMPTY_OBJECT; 1318 return evaluateRenderProp(element, renderProp, outProps, state); 1319 } 1320 function useRenderElementProps(componentProps, params = {}) { 1321 const { 1322 className: classNameProp, 1323 style: styleProp, 1324 render: renderProp 1325 } = componentProps; 1326 const { 1327 state = EMPTY_OBJECT, 1328 ref, 1329 props, 1330 stateAttributesMapping: stateAttributesMapping2, 1331 enabled = true 1332 } = params; 1333 const className = enabled ? resolveClassName(classNameProp, state) : void 0; 1334 const style = enabled ? resolveStyle(styleProp, state) : void 0; 1335 const stateProps = enabled ? getStateAttributesProps(state, stateAttributesMapping2) : EMPTY_OBJECT; 1336 const outProps = enabled ? mergeObjects(stateProps, Array.isArray(props) ? mergePropsN(props) : props) ?? EMPTY_OBJECT : EMPTY_OBJECT; 1337 if (typeof document !== "undefined") { 1338 if (!enabled) { 1339 useMergedRefs(null, null); 1340 } else if (Array.isArray(ref)) { 1341 outProps.ref = useMergedRefsN([outProps.ref, getReactElementRef(renderProp), ...ref]); 1342 } else { 1343 outProps.ref = useMergedRefs(outProps.ref, getReactElementRef(renderProp), ref); 1344 } 1345 } 1346 if (!enabled) { 1347 return EMPTY_OBJECT; 1348 } 1349 if (className !== void 0) { 1350 outProps.className = mergeClassNames(outProps.className, className); 1351 } 1352 if (style !== void 0) { 1353 outProps.style = mergeObjects(outProps.style, style); 1354 } 1355 return outProps; 1356 } 1357 var REACT_LAZY_TYPE = /* @__PURE__ */ Symbol.for("react.lazy"); 1358 function evaluateRenderProp(element, render4, props, state) { 1359 if (render4) { 1360 if (typeof render4 === "function") { 1361 if (true) { 1362 warnIfRenderPropLooksLikeComponent(render4); 1363 } 1364 return render4(props, state); 1365 } 1366 const mergedProps = mergeProps(props, render4.props); 1367 mergedProps.ref = props.ref; 1368 let newElement = render4; 1369 if (newElement?.$$typeof === REACT_LAZY_TYPE) { 1370 const children = React8.Children.toArray(render4); 1371 newElement = children[0]; 1372 } 1373 if (true) { 1374 if (!/* @__PURE__ */ React8.isValidElement(newElement)) { 1375 throw new Error(["Base UI: The `render` prop was provided an invalid React element as `React.isValidElement(render)` is `false`.", "A valid React element must be provided to the `render` prop because it is cloned with props to replace the default element.", "https://base-ui.com/r/invalid-render-prop"].join("\n")); 1376 } 1377 } 1378 return /* @__PURE__ */ React8.cloneElement(newElement, mergedProps); 1379 } 1380 if (element) { 1381 if (typeof element === "string") { 1382 return renderTag(element, props); 1383 } 1384 } 1385 throw new Error(true ? "Base UI: Render element or function are not defined." : formatErrorMessage_default(8)); 1386 } 1387 function warnIfRenderPropLooksLikeComponent(renderFn) { 1388 const functionName = renderFn.name; 1389 if (functionName.length === 0) { 1390 return; 1391 } 1392 const firstCharacterCode = functionName.charCodeAt(0); 1393 if (firstCharacterCode < 65 || firstCharacterCode > 90) { 1394 return; 1395 } 1396 warn(`The \`render\` prop received a function named \`$functionName}\` that starts with an uppercase letter.`, "This usually means a React component was passed directly as `render={Component}`.", "Base UI calls `render` as a plain function, which can break the Rules of Hooks during reconciliation.", "If this is an intentional render callback, rename it to start with a lowercase letter.", "Use `render={<Component />}` or `render={(props) => <Component {...props} />}` instead.", "https://base-ui.com/r/invalid-render-prop"); 1397 } 1398 function renderTag(Tag, props) { 1399 if (Tag === "button") { 1400 return /* @__PURE__ */ (0, import_react.createElement)("button", { 1401 type: "button", 1402 ...props, 1403 key: props.key 1404 }); 1405 } 1406 if (Tag === "img") { 1407 return /* @__PURE__ */ (0, import_react.createElement)("img", { 1408 alt: "", 1409 ...props, 1410 key: props.key 1411 }); 1412 } 1413 return /* @__PURE__ */ React8.createElement(Tag, props); 1414 } 1415 1416 // node_modules/@base-ui/react/esm/utils/reason-parts.js 1417 var reason_parts_exports = {}; 1418 __export(reason_parts_exports, { 1419 cancelOpen: () => cancelOpen, 1420 chipRemovePress: () => chipRemovePress, 1421 clearPress: () => clearPress, 1422 closePress: () => closePress, 1423 closeWatcher: () => closeWatcher, 1424 decrementPress: () => decrementPress, 1425 disabled: () => disabled, 1426 drag: () => drag, 1427 escapeKey: () => escapeKey, 1428 focusOut: () => focusOut, 1429 imperativeAction: () => imperativeAction, 1430 incrementPress: () => incrementPress, 1431 inputBlur: () => inputBlur, 1432 inputChange: () => inputChange, 1433 inputClear: () => inputClear, 1434 inputPaste: () => inputPaste, 1435 inputPress: () => inputPress, 1436 itemPress: () => itemPress, 1437 keyboard: () => keyboard, 1438 linkPress: () => linkPress, 1439 listNavigation: () => listNavigation, 1440 none: () => none, 1441 outsidePress: () => outsidePress, 1442 pointer: () => pointer, 1443 scrub: () => scrub, 1444 siblingOpen: () => siblingOpen, 1445 swipe: () => swipe, 1446 trackPress: () => trackPress, 1447 triggerFocus: () => triggerFocus, 1448 triggerHover: () => triggerHover, 1449 triggerPress: () => triggerPress, 1450 wheel: () => wheel, 1451 windowResize: () => windowResize 1452 }); 1453 var none = "none"; 1454 var triggerPress = "trigger-press"; 1455 var triggerHover = "trigger-hover"; 1456 var triggerFocus = "trigger-focus"; 1457 var outsidePress = "outside-press"; 1458 var itemPress = "item-press"; 1459 var closePress = "close-press"; 1460 var linkPress = "link-press"; 1461 var clearPress = "clear-press"; 1462 var chipRemovePress = "chip-remove-press"; 1463 var trackPress = "track-press"; 1464 var incrementPress = "increment-press"; 1465 var decrementPress = "decrement-press"; 1466 var inputChange = "input-change"; 1467 var inputClear = "input-clear"; 1468 var inputBlur = "input-blur"; 1469 var inputPaste = "input-paste"; 1470 var inputPress = "input-press"; 1471 var focusOut = "focus-out"; 1472 var escapeKey = "escape-key"; 1473 var closeWatcher = "close-watcher"; 1474 var listNavigation = "list-navigation"; 1475 var keyboard = "keyboard"; 1476 var pointer = "pointer"; 1477 var drag = "drag"; 1478 var wheel = "wheel"; 1479 var scrub = "scrub"; 1480 var cancelOpen = "cancel-open"; 1481 var siblingOpen = "sibling-open"; 1482 var disabled = "disabled"; 1483 var imperativeAction = "imperative-action"; 1484 var swipe = "swipe"; 1485 var windowResize = "window-resize"; 1486 1487 // node_modules/@base-ui/react/esm/utils/createBaseUIEventDetails.js 1488 function createChangeEventDetails(reason, event, trigger, customProperties) { 1489 let canceled = false; 1490 let allowPropagation = false; 1491 const custom = customProperties ?? EMPTY_OBJECT; 1492 const details = { 1493 reason, 1494 event: event ?? new Event("base-ui"), 1495 cancel() { 1496 canceled = true; 1497 }, 1498 allowPropagation() { 1499 allowPropagation = true; 1500 }, 1501 get isCanceled() { 1502 return canceled; 1503 }, 1504 get isPropagationAllowed() { 1505 return allowPropagation; 1506 }, 1507 trigger, 1508 ...custom 1509 }; 1510 return details; 1511 } 1512 1513 // node_modules/@base-ui/utils/esm/useId.js 1514 var React10 = __toESM(require_react(), 1); 1515 1516 // node_modules/@base-ui/utils/esm/safeReact.js 1517 var React9 = __toESM(require_react(), 1); 1518 var SafeReact = { 1519 ...React9 1520 }; 1521 1522 // node_modules/@base-ui/utils/esm/useId.js 1523 var globalId = 0; 1524 function useGlobalId(idOverride, prefix = "mui") { 1525 const [defaultId, setDefaultId] = React10.useState(idOverride); 1526 const id = idOverride || defaultId; 1527 React10.useEffect(() => { 1528 if (defaultId == null) { 1529 globalId += 1; 1530 setDefaultId(`$prefix}-$globalId}`); 1531 } 1532 }, [defaultId, prefix]); 1533 return id; 1534 } 1535 var maybeReactUseId = SafeReact.useId; 1536 function useId(idOverride, prefix) { 1537 if (maybeReactUseId !== void 0) { 1538 const reactId = maybeReactUseId(); 1539 return idOverride ?? (prefix ? `$prefix}-$reactId}` : reactId); 1540 } 1541 return useGlobalId(idOverride, prefix); 1542 } 1543 1544 // node_modules/@base-ui/react/esm/utils/useBaseUiId.js 1545 function useBaseUiId(idOverride) { 1546 return useId(idOverride, "base-ui"); 1547 } 1548 1549 // node_modules/@base-ui/react/esm/collapsible/root/useCollapsibleRoot.js 1550 var React13 = __toESM(require_react(), 1); 1551 1552 // node_modules/@base-ui/react/esm/utils/useAnimationsFinished.js 1553 var ReactDOM = __toESM(require_react_dom(), 1); 1554 1555 // node_modules/@base-ui/utils/esm/useOnMount.js 1556 var React11 = __toESM(require_react(), 1); 1557 var EMPTY = []; 1558 function useOnMount(fn) { 1559 React11.useEffect(fn, EMPTY); 1560 } 1561 1562 // node_modules/@base-ui/utils/esm/useAnimationFrame.js 1563 var EMPTY2 = null; 1564 var LAST_RAF = globalThis.requestAnimationFrame; 1565 var Scheduler = class { 1566 /* This implementation uses an array as a backing data-structure for frame callbacks. 1567 * It allows `O(1)` callback cancelling by inserting a `null` in the array, though it 1568 * never calls the native `cancelAnimationFrame` if there are no frames left. This can 1569 * be much more efficient if there is a call pattern that alterns as 1570 * "request-cancel-request-cancel-…". 1571 * But in the case of "request-request-…-cancel-cancel-…", it leaves the final animation 1572 * frame to run anyway. We turn that frame into a `O(1)` no-op via `callbacksCount`. */ 1573 callbacks = []; 1574 callbacksCount = 0; 1575 nextId = 1; 1576 startId = 1; 1577 isScheduled = false; 1578 tick = (timestamp) => { 1579 this.isScheduled = false; 1580 const currentCallbacks = this.callbacks; 1581 const currentCallbacksCount = this.callbacksCount; 1582 this.callbacks = []; 1583 this.callbacksCount = 0; 1584 this.startId = this.nextId; 1585 if (currentCallbacksCount > 0) { 1586 for (let i2 = 0; i2 < currentCallbacks.length; i2 += 1) { 1587 currentCallbacks[i2]?.(timestamp); 1588 } 1589 } 1590 }; 1591 request(fn) { 1592 const id = this.nextId; 1593 this.nextId += 1; 1594 this.callbacks.push(fn); 1595 this.callbacksCount += 1; 1596 const didRAFChange = LAST_RAF !== requestAnimationFrame && (LAST_RAF = requestAnimationFrame, true); 1597 if (!this.isScheduled || didRAFChange) { 1598 requestAnimationFrame(this.tick); 1599 this.isScheduled = true; 1600 } 1601 return id; 1602 } 1603 cancel(id) { 1604 const index = id - this.startId; 1605 if (index < 0 || index >= this.callbacks.length) { 1606 return; 1607 } 1608 this.callbacks[index] = null; 1609 this.callbacksCount -= 1; 1610 } 1611 }; 1612 var scheduler = new Scheduler(); 1613 var AnimationFrame = class _AnimationFrame { 1614 static create() { 1615 return new _AnimationFrame(); 1616 } 1617 static request(fn) { 1618 return scheduler.request(fn); 1619 } 1620 static cancel(id) { 1621 return scheduler.cancel(id); 1622 } 1623 currentId = EMPTY2; 1624 /** 1625 * Executes `fn` after `delay`, clearing any previously scheduled call. 1626 */ 1627 request(fn) { 1628 this.cancel(); 1629 this.currentId = scheduler.request(() => { 1630 this.currentId = EMPTY2; 1631 fn(); 1632 }); 1633 } 1634 cancel = () => { 1635 if (this.currentId !== EMPTY2) { 1636 scheduler.cancel(this.currentId); 1637 this.currentId = EMPTY2; 1638 } 1639 }; 1640 disposeEffect = () => { 1641 return this.cancel; 1642 }; 1643 }; 1644 function useAnimationFrame() { 1645 const timeout = useRefWithInit(AnimationFrame.create).current; 1646 useOnMount(timeout.disposeEffect); 1647 return timeout; 1648 } 1649 1650 // node_modules/@base-ui/react/esm/utils/resolveRef.js 1651 function resolveRef(maybeRef) { 1652 if (maybeRef == null) { 1653 return maybeRef; 1654 } 1655 return "current" in maybeRef ? maybeRef.current : maybeRef; 1656 } 1657 1658 // node_modules/@base-ui/react/esm/utils/stateAttributesMapping.js 1659 var TransitionStatusDataAttributes = /* @__PURE__ */ (function(TransitionStatusDataAttributes2) { 1660 TransitionStatusDataAttributes2["startingStyle"] = "data-starting-style"; 1661 TransitionStatusDataAttributes2["endingStyle"] = "data-ending-style"; 1662 return TransitionStatusDataAttributes2; 1663 })({}); 1664 var STARTING_HOOK = { 1665 [TransitionStatusDataAttributes.startingStyle]: "" 1666 }; 1667 var ENDING_HOOK = { 1668 [TransitionStatusDataAttributes.endingStyle]: "" 1669 }; 1670 var transitionStatusMapping = { 1671 transitionStatus(value) { 1672 if (value === "starting") { 1673 return STARTING_HOOK; 1674 } 1675 if (value === "ending") { 1676 return ENDING_HOOK; 1677 } 1678 return null; 1679 } 1680 }; 1681 1682 // node_modules/@base-ui/react/esm/utils/useAnimationsFinished.js 1683 function useAnimationsFinished(elementOrRef, waitForStartingStyleRemoved = false, treatAbortedAsFinished = true) { 1684 const frame = useAnimationFrame(); 1685 return useStableCallback((fnToExecute, signal = null) => { 1686 frame.cancel(); 1687 function done() { 1688 ReactDOM.flushSync(fnToExecute); 1689 } 1690 const element = resolveRef(elementOrRef); 1691 if (element == null) { 1692 return; 1693 } 1694 const resolvedElement = element; 1695 if (typeof resolvedElement.getAnimations !== "function" || globalThis.BASE_UI_ANIMATIONS_DISABLED) { 1696 fnToExecute(); 1697 } else { 1698 let execWaitForStartingStyleRemoved = function() { 1699 const startingStyleAttribute = TransitionStatusDataAttributes.startingStyle; 1700 if (!resolvedElement.hasAttribute(startingStyleAttribute)) { 1701 frame.request(exec); 1702 return; 1703 } 1704 const attributeObserver = new MutationObserver(() => { 1705 if (!resolvedElement.hasAttribute(startingStyleAttribute)) { 1706 attributeObserver.disconnect(); 1707 exec(); 1708 } 1709 }); 1710 attributeObserver.observe(resolvedElement, { 1711 attributes: true, 1712 attributeFilter: [startingStyleAttribute] 1713 }); 1714 signal?.addEventListener("abort", () => attributeObserver.disconnect(), { 1715 once: true 1716 }); 1717 }, exec = function() { 1718 Promise.all(resolvedElement.getAnimations().map((anim) => anim.finished)).then(() => { 1719 if (signal?.aborted) { 1720 return; 1721 } 1722 done(); 1723 }).catch(() => { 1724 const currentAnimations = resolvedElement.getAnimations(); 1725 if (treatAbortedAsFinished) { 1726 if (signal?.aborted) { 1727 return; 1728 } 1729 done(); 1730 } else if (currentAnimations.length > 0 && currentAnimations.some((anim) => anim.pending || anim.playState !== "finished")) { 1731 exec(); 1732 } 1733 }); 1734 }; 1735 if (waitForStartingStyleRemoved) { 1736 execWaitForStartingStyleRemoved(); 1737 return; 1738 } 1739 frame.request(exec); 1740 } 1741 }); 1742 } 1743 1744 // node_modules/@base-ui/react/esm/utils/useTransitionStatus.js 1745 var React12 = __toESM(require_react(), 1); 1746 function useTransitionStatus(open, enableIdleState = false, deferEndingState = false) { 1747 const [transitionStatus, setTransitionStatus] = React12.useState(open && enableIdleState ? "idle" : void 0); 1748 const [mounted, setMounted] = React12.useState(open); 1749 if (open && !mounted) { 1750 setMounted(true); 1751 setTransitionStatus("starting"); 1752 } 1753 if (!open && mounted && transitionStatus !== "ending" && !deferEndingState) { 1754 setTransitionStatus("ending"); 1755 } 1756 if (!open && !mounted && transitionStatus === "ending") { 1757 setTransitionStatus(void 0); 1758 } 1759 useIsoLayoutEffect(() => { 1760 if (!open && mounted && transitionStatus !== "ending" && deferEndingState) { 1761 const frame = AnimationFrame.request(() => { 1762 setTransitionStatus("ending"); 1763 }); 1764 return () => { 1765 AnimationFrame.cancel(frame); 1766 }; 1767 } 1768 return void 0; 1769 }, [open, mounted, transitionStatus, deferEndingState]); 1770 useIsoLayoutEffect(() => { 1771 if (!open || enableIdleState) { 1772 return void 0; 1773 } 1774 const frame = AnimationFrame.request(() => { 1775 setTransitionStatus(void 0); 1776 }); 1777 return () => { 1778 AnimationFrame.cancel(frame); 1779 }; 1780 }, [enableIdleState, open]); 1781 useIsoLayoutEffect(() => { 1782 if (!open || !enableIdleState) { 1783 return void 0; 1784 } 1785 if (open && mounted && transitionStatus !== "idle") { 1786 setTransitionStatus("starting"); 1787 } 1788 const frame = AnimationFrame.request(() => { 1789 setTransitionStatus("idle"); 1790 }); 1791 return () => { 1792 AnimationFrame.cancel(frame); 1793 }; 1794 }, [enableIdleState, open, mounted, setTransitionStatus, transitionStatus]); 1795 return React12.useMemo(() => ({ 1796 mounted, 1797 setMounted, 1798 transitionStatus 1799 }), [mounted, transitionStatus]); 1800 } 1801 1802 // node_modules/@base-ui/react/esm/collapsible/root/useCollapsibleRoot.js 1803 function useCollapsibleRoot(parameters) { 1804 const { 1805 open: openParam, 1806 defaultOpen, 1807 onOpenChange, 1808 disabled: disabled2 1809 } = parameters; 1810 const isControlled = openParam !== void 0; 1811 const [open, setOpen] = useControlled({ 1812 controlled: openParam, 1813 default: defaultOpen, 1814 name: "Collapsible", 1815 state: "open" 1816 }); 1817 const { 1818 mounted, 1819 setMounted, 1820 transitionStatus 1821 } = useTransitionStatus(open, true, true); 1822 const [visible, setVisible] = React13.useState(open); 1823 const [{ 1824 height, 1825 width 1826 }, setDimensions] = React13.useState({ 1827 height: void 0, 1828 width: void 0 1829 }); 1830 const defaultPanelId = useBaseUiId(); 1831 const [panelIdState, setPanelIdState] = React13.useState(); 1832 const panelId = panelIdState ?? defaultPanelId; 1833 const [hiddenUntilFound, setHiddenUntilFound] = React13.useState(false); 1834 const [keepMounted, setKeepMounted] = React13.useState(false); 1835 const abortControllerRef = React13.useRef(null); 1836 const animationTypeRef = React13.useRef(null); 1837 const transitionDimensionRef = React13.useRef(null); 1838 const panelRef = React13.useRef(null); 1839 const runOnceAnimationsFinish = useAnimationsFinished(panelRef, false); 1840 const handleTrigger = useStableCallback((event) => { 1841 const nextOpen = !open; 1842 const eventDetails = createChangeEventDetails(reason_parts_exports.triggerPress, event.nativeEvent); 1843 onOpenChange(nextOpen, eventDetails); 1844 if (eventDetails.isCanceled) { 1845 return; 1846 } 1847 const panel = panelRef.current; 1848 if (animationTypeRef.current === "css-animation" && panel != null) { 1849 panel.style.removeProperty("animation-name"); 1850 } 1851 if (!hiddenUntilFound && !keepMounted) { 1852 if (animationTypeRef.current != null && animationTypeRef.current !== "css-animation") { 1853 if (!mounted && nextOpen) { 1854 setMounted(true); 1855 } 1856 } 1857 if (animationTypeRef.current === "css-animation") { 1858 if (!visible && nextOpen) { 1859 setVisible(true); 1860 } 1861 if (!mounted && nextOpen) { 1862 setMounted(true); 1863 } 1864 } 1865 } 1866 setOpen(nextOpen); 1867 if (animationTypeRef.current === "none" && mounted && !nextOpen) { 1868 setMounted(false); 1869 } 1870 }); 1871 useIsoLayoutEffect(() => { 1872 if (isControlled && animationTypeRef.current === "none" && !keepMounted && !open) { 1873 setMounted(false); 1874 } 1875 }, [isControlled, keepMounted, open, openParam, setMounted]); 1876 return React13.useMemo(() => ({ 1877 abortControllerRef, 1878 animationTypeRef, 1879 disabled: disabled2, 1880 handleTrigger, 1881 height, 1882 mounted, 1883 open, 1884 panelId, 1885 panelRef, 1886 runOnceAnimationsFinish, 1887 setDimensions, 1888 setHiddenUntilFound, 1889 setKeepMounted, 1890 setMounted, 1891 setOpen, 1892 setPanelIdState, 1893 setVisible, 1894 transitionDimensionRef, 1895 transitionStatus, 1896 visible, 1897 width 1898 }), [abortControllerRef, animationTypeRef, disabled2, handleTrigger, height, mounted, open, panelId, panelRef, runOnceAnimationsFinish, setDimensions, setHiddenUntilFound, setKeepMounted, setMounted, setOpen, setVisible, transitionDimensionRef, transitionStatus, visible, width]); 1899 } 1900 1901 // node_modules/@base-ui/react/esm/collapsible/root/CollapsibleRootContext.js 1902 var React14 = __toESM(require_react(), 1); 1903 var CollapsibleRootContext = /* @__PURE__ */ React14.createContext(void 0); 1904 if (true) CollapsibleRootContext.displayName = "CollapsibleRootContext"; 1905 function useCollapsibleRootContext() { 1906 const context = React14.useContext(CollapsibleRootContext); 1907 if (context === void 0) { 1908 throw new Error(true ? "Base UI: CollapsibleRootContext is missing. Collapsible parts must be placed within <Collapsible.Root>." : formatErrorMessage_default(15)); 1909 } 1910 return context; 1911 } 1912 1913 // node_modules/@base-ui/react/esm/collapsible/panel/CollapsiblePanelDataAttributes.js 1914 var CollapsiblePanelDataAttributes = (function(CollapsiblePanelDataAttributes2) { 1915 CollapsiblePanelDataAttributes2["open"] = "data-open"; 1916 CollapsiblePanelDataAttributes2["closed"] = "data-closed"; 1917 CollapsiblePanelDataAttributes2[CollapsiblePanelDataAttributes2["startingStyle"] = TransitionStatusDataAttributes.startingStyle] = "startingStyle"; 1918 CollapsiblePanelDataAttributes2[CollapsiblePanelDataAttributes2["endingStyle"] = TransitionStatusDataAttributes.endingStyle] = "endingStyle"; 1919 return CollapsiblePanelDataAttributes2; 1920 })({}); 1921 1922 // node_modules/@base-ui/react/esm/collapsible/trigger/CollapsibleTriggerDataAttributes.js 1923 var CollapsibleTriggerDataAttributes = /* @__PURE__ */ (function(CollapsibleTriggerDataAttributes2) { 1924 CollapsibleTriggerDataAttributes2["panelOpen"] = "data-panel-open"; 1925 return CollapsibleTriggerDataAttributes2; 1926 })({}); 1927 1928 // node_modules/@base-ui/react/esm/utils/collapsibleOpenStateMapping.js 1929 var PANEL_OPEN_HOOK = { 1930 [CollapsiblePanelDataAttributes.open]: "" 1931 }; 1932 var PANEL_CLOSED_HOOK = { 1933 [CollapsiblePanelDataAttributes.closed]: "" 1934 }; 1935 var triggerOpenStateMapping = { 1936 open(value) { 1937 if (value) { 1938 return { 1939 [CollapsibleTriggerDataAttributes.panelOpen]: "" 1940 }; 1941 } 1942 return null; 1943 } 1944 }; 1945 var collapsibleOpenStateMapping = { 1946 open(value) { 1947 if (value) { 1948 return PANEL_OPEN_HOOK; 1949 } 1950 return PANEL_CLOSED_HOOK; 1951 } 1952 }; 1953 1954 // node_modules/@base-ui/react/esm/use-button/useButton.js 1955 var React17 = __toESM(require_react(), 1); 1956 1957 // node_modules/@floating-ui/utils/dist/floating-ui.utils.dom.mjs 1958 function hasWindow() { 1959 return typeof window !== "undefined"; 1960 } 1961 function getWindow(node) { 1962 var _node$ownerDocument; 1963 return (node == null || (_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.defaultView) || window; 1964 } 1965 function isHTMLElement(value) { 1966 if (!hasWindow()) { 1967 return false; 1968 } 1969 return value instanceof HTMLElement || value instanceof getWindow(value).HTMLElement; 1970 } 1971 1972 // node_modules/@base-ui/utils/esm/error.js 1973 var set2; 1974 if (true) { 1975 set2 = /* @__PURE__ */ new Set(); 1976 } 1977 function error(...messages) { 1978 if (true) { 1979 const messageKey = messages.join(" "); 1980 if (!set2.has(messageKey)) { 1981 set2.add(messageKey); 1982 console.error(`Base UI: $messageKey}`); 1983 } 1984 } 1985 } 1986 1987 // node_modules/@base-ui/react/esm/composite/root/CompositeRootContext.js 1988 var React15 = __toESM(require_react(), 1); 1989 var CompositeRootContext = /* @__PURE__ */ React15.createContext(void 0); 1990 if (true) CompositeRootContext.displayName = "CompositeRootContext"; 1991 function useCompositeRootContext(optional = false) { 1992 const context = React15.useContext(CompositeRootContext); 1993 if (context === void 0 && !optional) { 1994 throw new Error(true ? "Base UI: CompositeRootContext is missing. Composite parts must be placed within <Composite.Root>." : formatErrorMessage_default(16)); 1995 } 1996 return context; 1997 } 1998 1999 // node_modules/@base-ui/react/esm/utils/useFocusableWhenDisabled.js 2000 var React16 = __toESM(require_react(), 1); 2001 function useFocusableWhenDisabled(parameters) { 2002 const { 2003 focusableWhenDisabled, 2004 disabled: disabled2, 2005 composite = false, 2006 tabIndex: tabIndexProp = 0, 2007 isNativeButton 2008 } = parameters; 2009 const isFocusableComposite = composite && focusableWhenDisabled !== false; 2010 const isNonFocusableComposite = composite && focusableWhenDisabled === false; 2011 const props = React16.useMemo(() => { 2012 const additionalProps = { 2013 // allow Tabbing away from focusableWhenDisabled elements 2014 onKeyDown(event) { 2015 if (disabled2 && focusableWhenDisabled && event.key !== "Tab") { 2016 event.preventDefault(); 2017 } 2018 } 2019 }; 2020 if (!composite) { 2021 additionalProps.tabIndex = tabIndexProp; 2022 if (!isNativeButton && disabled2) { 2023 additionalProps.tabIndex = focusableWhenDisabled ? tabIndexProp : -1; 2024 } 2025 } 2026 if (isNativeButton && (focusableWhenDisabled || isFocusableComposite) || !isNativeButton && disabled2) { 2027 additionalProps["aria-disabled"] = disabled2; 2028 } 2029 if (isNativeButton && (!focusableWhenDisabled || isNonFocusableComposite)) { 2030 additionalProps.disabled = disabled2; 2031 } 2032 return additionalProps; 2033 }, [composite, disabled2, focusableWhenDisabled, isFocusableComposite, isNonFocusableComposite, isNativeButton, tabIndexProp]); 2034 return { 2035 props 2036 }; 2037 } 2038 2039 // node_modules/@base-ui/react/esm/use-button/useButton.js 2040 function useButton(parameters = {}) { 2041 const { 2042 disabled: disabled2 = false, 2043 focusableWhenDisabled, 2044 tabIndex = 0, 2045 native: isNativeButton = true, 2046 composite: compositeProp 2047 } = parameters; 2048 const elementRef = React17.useRef(null); 2049 const compositeRootContext = useCompositeRootContext(true); 2050 const isCompositeItem = compositeProp ?? compositeRootContext !== void 0; 2051 const { 2052 props: focusableWhenDisabledProps 2053 } = useFocusableWhenDisabled({ 2054 focusableWhenDisabled, 2055 disabled: disabled2, 2056 composite: isCompositeItem, 2057 tabIndex, 2058 isNativeButton 2059 }); 2060 if (true) { 2061 React17.useEffect(() => { 2062 if (!elementRef.current) { 2063 return; 2064 } 2065 const isButtonTag = isButtonElement(elementRef.current); 2066 if (isNativeButton) { 2067 if (!isButtonTag) { 2068 const ownerStackMessage = SafeReact.captureOwnerStack?.() || ""; 2069 const message2 = "A component that acts as a button expected a native <button> because the `nativeButton` prop is true. Rendering a non-<button> removes native button semantics, which can impact forms and accessibility. Use a real <button> in the `render` prop, or set `nativeButton` to `false`."; 2070 error(`$message2}$ownerStackMessage}`); 2071 } 2072 } else if (isButtonTag) { 2073 const ownerStackMessage = SafeReact.captureOwnerStack?.() || ""; 2074 const message2 = "A component that acts as a button expected a non-<button> because the `nativeButton` prop is false. Rendering a <button> keeps native behavior while Base UI applies non-native attributes and handlers, which can add unintended extra attributes (such as `role` or `aria-disabled`). Use a non-<button> in the `render` prop, or set `nativeButton` to `true`."; 2075 error(`$message2}$ownerStackMessage}`); 2076 } 2077 }, [isNativeButton]); 2078 } 2079 const updateDisabled = React17.useCallback(() => { 2080 const element = elementRef.current; 2081 if (!isButtonElement(element)) { 2082 return; 2083 } 2084 if (isCompositeItem && disabled2 && focusableWhenDisabledProps.disabled === void 0 && element.disabled) { 2085 element.disabled = false; 2086 } 2087 }, [disabled2, focusableWhenDisabledProps.disabled, isCompositeItem]); 2088 useIsoLayoutEffect(updateDisabled, [updateDisabled]); 2089 const getButtonProps = React17.useCallback((externalProps = {}) => { 2090 const { 2091 onClick: externalOnClick, 2092 onMouseDown: externalOnMouseDown, 2093 onKeyUp: externalOnKeyUp, 2094 onKeyDown: externalOnKeyDown, 2095 onPointerDown: externalOnPointerDown, 2096 ...otherExternalProps 2097 } = externalProps; 2098 const type = isNativeButton ? "button" : void 0; 2099 return mergeProps({ 2100 type, 2101 onClick(event) { 2102 if (disabled2) { 2103 event.preventDefault(); 2104 return; 2105 } 2106 externalOnClick?.(event); 2107 }, 2108 onMouseDown(event) { 2109 if (!disabled2) { 2110 externalOnMouseDown?.(event); 2111 } 2112 }, 2113 onKeyDown(event) { 2114 if (disabled2) { 2115 return; 2116 } 2117 makeEventPreventable(event); 2118 externalOnKeyDown?.(event); 2119 if (event.baseUIHandlerPrevented) { 2120 return; 2121 } 2122 const isCurrentTarget = event.target === event.currentTarget; 2123 const currentTarget = event.currentTarget; 2124 const isButton2 = isButtonElement(currentTarget); 2125 const isLink = !isNativeButton && isValidLinkElement(currentTarget); 2126 const shouldClick = isCurrentTarget && (isNativeButton ? isButton2 : !isLink); 2127 const isEnterKey = event.key === "Enter"; 2128 const isSpaceKey = event.key === " "; 2129 const role = currentTarget.getAttribute("role"); 2130 const isTextNavigationRole = role?.startsWith("menuitem") || role === "option" || role === "gridcell"; 2131 if (isCurrentTarget && isCompositeItem && isSpaceKey) { 2132 if (event.defaultPrevented && isTextNavigationRole) { 2133 return; 2134 } 2135 event.preventDefault(); 2136 if (isLink || isNativeButton && isButton2) { 2137 currentTarget.click(); 2138 event.preventBaseUIHandler(); 2139 } else if (shouldClick) { 2140 externalOnClick?.(event); 2141 event.preventBaseUIHandler(); 2142 } 2143 return; 2144 } 2145 if (shouldClick) { 2146 if (!isNativeButton && (isSpaceKey || isEnterKey)) { 2147 event.preventDefault(); 2148 } 2149 if (!isNativeButton && isEnterKey) { 2150 externalOnClick?.(event); 2151 } 2152 } 2153 }, 2154 onKeyUp(event) { 2155 if (disabled2) { 2156 return; 2157 } 2158 makeEventPreventable(event); 2159 externalOnKeyUp?.(event); 2160 if (event.target === event.currentTarget && isNativeButton && isCompositeItem && isButtonElement(event.currentTarget) && event.key === " ") { 2161 event.preventDefault(); 2162 return; 2163 } 2164 if (event.baseUIHandlerPrevented) { 2165 return; 2166 } 2167 if (event.target === event.currentTarget && !isNativeButton && !isCompositeItem && event.key === " ") { 2168 externalOnClick?.(event); 2169 } 2170 }, 2171 onPointerDown(event) { 2172 if (disabled2) { 2173 event.preventDefault(); 2174 return; 2175 } 2176 externalOnPointerDown?.(event); 2177 } 2178 }, !isNativeButton ? { 2179 role: "button" 2180 } : void 0, focusableWhenDisabledProps, otherExternalProps); 2181 }, [disabled2, focusableWhenDisabledProps, isCompositeItem, isNativeButton]); 2182 const buttonRef = useStableCallback((element) => { 2183 elementRef.current = element; 2184 updateDisabled(); 2185 }); 2186 return { 2187 getButtonProps, 2188 buttonRef 2189 }; 2190 } 2191 function isButtonElement(elem) { 2192 return isHTMLElement(elem) && elem.tagName === "BUTTON"; 2193 } 2194 function isValidLinkElement(elem) { 2195 return Boolean(elem?.tagName === "A" && elem?.href); 2196 } 2197 2198 // node_modules/@base-ui/react/esm/collapsible/panel/useCollapsiblePanel.js 2199 var React18 = __toESM(require_react(), 1); 2200 2201 // node_modules/@base-ui/react/esm/accordion/root/AccordionRootDataAttributes.js 2202 var AccordionRootDataAttributes = /* @__PURE__ */ (function(AccordionRootDataAttributes2) { 2203 AccordionRootDataAttributes2["disabled"] = "data-disabled"; 2204 AccordionRootDataAttributes2["orientation"] = "data-orientation"; 2205 return AccordionRootDataAttributes2; 2206 })({}); 2207 2208 // node_modules/@base-ui/react/esm/collapsible/panel/useCollapsiblePanel.js 2209 function useCollapsiblePanel(parameters) { 2210 const { 2211 abortControllerRef, 2212 animationTypeRef, 2213 externalRef, 2214 height, 2215 hiddenUntilFound, 2216 keepMounted, 2217 id: idParam, 2218 mounted, 2219 onOpenChange, 2220 open, 2221 panelRef, 2222 runOnceAnimationsFinish, 2223 setDimensions, 2224 setMounted, 2225 setOpen, 2226 setVisible, 2227 transitionDimensionRef, 2228 visible, 2229 width 2230 } = parameters; 2231 const isBeforeMatchRef = React18.useRef(false); 2232 const latestAnimationNameRef = React18.useRef(null); 2233 const shouldCancelInitialOpenAnimationRef = React18.useRef(open); 2234 const shouldCancelInitialOpenTransitionRef = React18.useRef(open); 2235 const endingStyleFrame = useAnimationFrame(); 2236 const hidden = React18.useMemo(() => { 2237 if (animationTypeRef.current === "css-animation") { 2238 return !visible; 2239 } 2240 return !open && !mounted; 2241 }, [open, mounted, visible, animationTypeRef]); 2242 const handlePanelRef = useStableCallback((element) => { 2243 if (!element) { 2244 return void 0; 2245 } 2246 if (animationTypeRef.current == null || transitionDimensionRef.current == null) { 2247 const panelStyles = getComputedStyle(element); 2248 const hasAnimation = panelStyles.animationName !== "none" && panelStyles.animationName !== ""; 2249 const hasTransition = panelStyles.transitionDuration !== "0s" && panelStyles.transitionDuration !== ""; 2250 if (hasAnimation && hasTransition) { 2251 if (true) { 2252 warn("CSS transitions and CSS animations both detected on Collapsible or Accordion panel.", "Only one of either animation type should be used."); 2253 } 2254 } else if (panelStyles.animationName === "none" && panelStyles.transitionDuration !== "0s") { 2255 animationTypeRef.current = "css-transition"; 2256 } else if (panelStyles.animationName !== "none" && panelStyles.transitionDuration === "0s") { 2257 animationTypeRef.current = "css-animation"; 2258 } else { 2259 animationTypeRef.current = "none"; 2260 } 2261 if (element.getAttribute(AccordionRootDataAttributes.orientation) === "horizontal" || panelStyles.transitionProperty.indexOf("width") > -1) { 2262 transitionDimensionRef.current = "width"; 2263 } else { 2264 transitionDimensionRef.current = "height"; 2265 } 2266 } 2267 if (animationTypeRef.current !== "css-transition") { 2268 return void 0; 2269 } 2270 if (height === void 0 || width === void 0) { 2271 setDimensions({ 2272 height: element.scrollHeight, 2273 width: element.scrollWidth 2274 }); 2275 if (shouldCancelInitialOpenTransitionRef.current) { 2276 element.style.setProperty("transition-duration", "0s"); 2277 } 2278 } 2279 let frame = -1; 2280 let nextFrame = -1; 2281 frame = AnimationFrame.request(() => { 2282 shouldCancelInitialOpenTransitionRef.current = false; 2283 nextFrame = AnimationFrame.request(() => { 2284 setTimeout(() => { 2285 element.style.removeProperty("transition-duration"); 2286 }); 2287 }); 2288 }); 2289 return () => { 2290 AnimationFrame.cancel(frame); 2291 AnimationFrame.cancel(nextFrame); 2292 }; 2293 }); 2294 const mergedPanelRef = useMergedRefs(externalRef, panelRef, handlePanelRef); 2295 useIsoLayoutEffect(() => { 2296 if (animationTypeRef.current !== "css-transition") { 2297 return void 0; 2298 } 2299 const panel = panelRef.current; 2300 if (!panel) { 2301 return void 0; 2302 } 2303 let resizeFrame = -1; 2304 if (abortControllerRef.current != null) { 2305 abortControllerRef.current.abort(); 2306 abortControllerRef.current = null; 2307 } 2308 if (open) { 2309 const originalLayoutStyles = { 2310 "justify-content": panel.style.justifyContent, 2311 "align-items": panel.style.alignItems, 2312 "align-content": panel.style.alignContent, 2313 "justify-items": panel.style.justifyItems 2314 }; 2315 Object.keys(originalLayoutStyles).forEach((key) => { 2316 panel.style.setProperty(key, "initial", "important"); 2317 }); 2318 if (!shouldCancelInitialOpenTransitionRef.current && !keepMounted) { 2319 panel.setAttribute(CollapsiblePanelDataAttributes.startingStyle, ""); 2320 } 2321 setDimensions({ 2322 height: panel.scrollHeight, 2323 width: panel.scrollWidth 2324 }); 2325 resizeFrame = AnimationFrame.request(() => { 2326 Object.entries(originalLayoutStyles).forEach(([key, value]) => { 2327 if (value === "") { 2328 panel.style.removeProperty(key); 2329 } else { 2330 panel.style.setProperty(key, value); 2331 } 2332 }); 2333 }); 2334 } else { 2335 if (panel.scrollHeight === 0 && panel.scrollWidth === 0) { 2336 return void 0; 2337 } 2338 setDimensions({ 2339 height: panel.scrollHeight, 2340 width: panel.scrollWidth 2341 }); 2342 const abortController = new AbortController(); 2343 abortControllerRef.current = abortController; 2344 const signal = abortController.signal; 2345 let attributeObserver = null; 2346 const endingStyleAttribute = CollapsiblePanelDataAttributes.endingStyle; 2347 attributeObserver = new MutationObserver((mutationList) => { 2348 const hasEndingStyle = mutationList.some((mutation) => mutation.type === "attributes" && mutation.attributeName === endingStyleAttribute); 2349 if (hasEndingStyle) { 2350 attributeObserver?.disconnect(); 2351 attributeObserver = null; 2352 runOnceAnimationsFinish(() => { 2353 setDimensions({ 2354 height: 0, 2355 width: 0 2356 }); 2357 panel.style.removeProperty("content-visibility"); 2358 setMounted(false); 2359 if (abortControllerRef.current === abortController) { 2360 abortControllerRef.current = null; 2361 } 2362 }, signal); 2363 } 2364 }); 2365 attributeObserver.observe(panel, { 2366 attributes: true, 2367 attributeFilter: [endingStyleAttribute] 2368 }); 2369 return () => { 2370 attributeObserver?.disconnect(); 2371 endingStyleFrame.cancel(); 2372 if (abortControllerRef.current === abortController) { 2373 abortController.abort(); 2374 abortControllerRef.current = null; 2375 } 2376 }; 2377 } 2378 return () => { 2379 AnimationFrame.cancel(resizeFrame); 2380 }; 2381 }, [abortControllerRef, animationTypeRef, endingStyleFrame, hiddenUntilFound, keepMounted, mounted, open, panelRef, runOnceAnimationsFinish, setDimensions, setMounted]); 2382 useIsoLayoutEffect(() => { 2383 if (animationTypeRef.current !== "css-animation") { 2384 return; 2385 } 2386 const panel = panelRef.current; 2387 if (!panel) { 2388 return; 2389 } 2390 latestAnimationNameRef.current = panel.style.animationName || latestAnimationNameRef.current; 2391 panel.style.setProperty("animation-name", "none"); 2392 setDimensions({ 2393 height: panel.scrollHeight, 2394 width: panel.scrollWidth 2395 }); 2396 if (!shouldCancelInitialOpenAnimationRef.current && !isBeforeMatchRef.current) { 2397 panel.style.removeProperty("animation-name"); 2398 } 2399 if (open) { 2400 if (abortControllerRef.current != null) { 2401 abortControllerRef.current.abort(); 2402 abortControllerRef.current = null; 2403 } 2404 setMounted(true); 2405 setVisible(true); 2406 } else { 2407 abortControllerRef.current = new AbortController(); 2408 runOnceAnimationsFinish(() => { 2409 setMounted(false); 2410 setVisible(false); 2411 abortControllerRef.current = null; 2412 }, abortControllerRef.current.signal); 2413 } 2414 }, [abortControllerRef, animationTypeRef, open, panelRef, runOnceAnimationsFinish, setDimensions, setMounted, setVisible, visible]); 2415 useOnMount(() => { 2416 const frame = AnimationFrame.request(() => { 2417 shouldCancelInitialOpenAnimationRef.current = false; 2418 }); 2419 return () => AnimationFrame.cancel(frame); 2420 }); 2421 useIsoLayoutEffect(() => { 2422 if (!hiddenUntilFound) { 2423 return void 0; 2424 } 2425 const panel = panelRef.current; 2426 if (!panel) { 2427 return void 0; 2428 } 2429 let frame = -1; 2430 let nextFrame = -1; 2431 if (open && isBeforeMatchRef.current) { 2432 panel.style.transitionDuration = "0s"; 2433 setDimensions({ 2434 height: panel.scrollHeight, 2435 width: panel.scrollWidth 2436 }); 2437 frame = AnimationFrame.request(() => { 2438 isBeforeMatchRef.current = false; 2439 nextFrame = AnimationFrame.request(() => { 2440 setTimeout(() => { 2441 panel.style.removeProperty("transition-duration"); 2442 }); 2443 }); 2444 }); 2445 } 2446 return () => { 2447 AnimationFrame.cancel(frame); 2448 AnimationFrame.cancel(nextFrame); 2449 }; 2450 }, [hiddenUntilFound, open, panelRef, setDimensions]); 2451 useIsoLayoutEffect(() => { 2452 const panel = panelRef.current; 2453 if (panel && hiddenUntilFound && hidden) { 2454 panel.setAttribute("hidden", "until-found"); 2455 if (animationTypeRef.current === "css-transition") { 2456 panel.setAttribute(CollapsiblePanelDataAttributes.startingStyle, ""); 2457 } 2458 } 2459 }, [hiddenUntilFound, hidden, animationTypeRef, panelRef]); 2460 React18.useEffect(function registerBeforeMatchListener() { 2461 const panel = panelRef.current; 2462 if (!panel) { 2463 return void 0; 2464 } 2465 function handleBeforeMatch(event) { 2466 isBeforeMatchRef.current = true; 2467 setOpen(true); 2468 onOpenChange(true, createChangeEventDetails(reason_parts_exports.none, event)); 2469 } 2470 panel.addEventListener("beforematch", handleBeforeMatch); 2471 return () => { 2472 panel.removeEventListener("beforematch", handleBeforeMatch); 2473 }; 2474 }, [onOpenChange, panelRef, setOpen]); 2475 return React18.useMemo(() => ({ 2476 props: { 2477 hidden, 2478 id: idParam, 2479 ref: mergedPanelRef 2480 } 2481 }), [hidden, idParam, mergedPanelRef]); 2482 } 2483 2484 // node_modules/@base-ui/react/esm/utils/useOpenChangeComplete.js 2485 var React19 = __toESM(require_react(), 1); 2486 function useOpenChangeComplete(parameters) { 2487 const { 2488 enabled = true, 2489 open, 2490 ref, 2491 onComplete: onCompleteParam 2492 } = parameters; 2493 const onComplete = useStableCallback(onCompleteParam); 2494 const runOnceAnimationsFinish = useAnimationsFinished(ref, open, false); 2495 React19.useEffect(() => { 2496 if (!enabled) { 2497 return void 0; 2498 } 2499 const abortController = new AbortController(); 2500 runOnceAnimationsFinish(onComplete, abortController.signal); 2501 return () => { 2502 abortController.abort(); 2503 }; 2504 }, [enabled, open, onComplete, runOnceAnimationsFinish]); 2505 } 2506 2507 // node_modules/@base-ui/react/esm/collapsible/index.parts.js 2508 var index_parts_exports = {}; 2509 __export(index_parts_exports, { 2510 Panel: () => CollapsiblePanel, 2511 Root: () => CollapsibleRoot, 2512 Trigger: () => CollapsibleTrigger 2513 }); 2514 2515 // node_modules/@base-ui/react/esm/collapsible/root/CollapsibleRoot.js 2516 var React20 = __toESM(require_react(), 1); 2517 2518 // node_modules/@base-ui/react/esm/collapsible/root/stateAttributesMapping.js 2519 var collapsibleStateAttributesMapping = { 2520 ...collapsibleOpenStateMapping, 2521 ...transitionStatusMapping 2522 }; 2523 2524 // node_modules/@base-ui/react/esm/collapsible/root/CollapsibleRoot.js 2525 var import_jsx_runtime2 = __toESM(require_jsx_runtime(), 1); 2526 var CollapsibleRoot = /* @__PURE__ */ React20.forwardRef(function CollapsibleRoot2(componentProps, forwardedRef) { 2527 const { 2528 render: render4, 2529 className, 2530 defaultOpen = false, 2531 disabled: disabled2 = false, 2532 onOpenChange: onOpenChangeProp, 2533 open, 2534 ...elementProps 2535 } = componentProps; 2536 const onOpenChange = useStableCallback(onOpenChangeProp); 2537 const collapsible = useCollapsibleRoot({ 2538 open, 2539 defaultOpen, 2540 onOpenChange, 2541 disabled: disabled2 2542 }); 2543 const state = React20.useMemo(() => ({ 2544 open: collapsible.open, 2545 disabled: collapsible.disabled, 2546 transitionStatus: collapsible.transitionStatus 2547 }), [collapsible.open, collapsible.disabled, collapsible.transitionStatus]); 2548 const contextValue = React20.useMemo(() => ({ 2549 ...collapsible, 2550 onOpenChange, 2551 state 2552 }), [collapsible, onOpenChange, state]); 2553 const element = useRenderElement("div", componentProps, { 2554 state, 2555 ref: forwardedRef, 2556 props: elementProps, 2557 stateAttributesMapping: collapsibleStateAttributesMapping 2558 }); 2559 return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CollapsibleRootContext.Provider, { 2560 value: contextValue, 2561 children: element 2562 }); 2563 }); 2564 if (true) CollapsibleRoot.displayName = "CollapsibleRoot"; 2565 2566 // node_modules/@base-ui/react/esm/collapsible/trigger/CollapsibleTrigger.js 2567 var React21 = __toESM(require_react(), 1); 2568 var stateAttributesMapping = { 2569 ...triggerOpenStateMapping, 2570 ...transitionStatusMapping 2571 }; 2572 var CollapsibleTrigger = /* @__PURE__ */ React21.forwardRef(function CollapsibleTrigger2(componentProps, forwardedRef) { 2573 const { 2574 panelId, 2575 open, 2576 handleTrigger, 2577 state, 2578 disabled: contextDisabled 2579 } = useCollapsibleRootContext(); 2580 const { 2581 className, 2582 disabled: disabled2 = contextDisabled, 2583 id, 2584 render: render4, 2585 nativeButton = true, 2586 ...elementProps 2587 } = componentProps; 2588 const { 2589 getButtonProps, 2590 buttonRef 2591 } = useButton({ 2592 disabled: disabled2, 2593 focusableWhenDisabled: true, 2594 native: nativeButton 2595 }); 2596 const props = React21.useMemo(() => ({ 2597 "aria-controls": open ? panelId : void 0, 2598 "aria-expanded": open, 2599 onClick: handleTrigger 2600 }), [panelId, open, handleTrigger]); 2601 const element = useRenderElement("button", componentProps, { 2602 state, 2603 ref: [forwardedRef, buttonRef], 2604 props: [props, elementProps, getButtonProps], 2605 stateAttributesMapping 2606 }); 2607 return element; 2608 }); 2609 if (true) CollapsibleTrigger.displayName = "CollapsibleTrigger"; 2610 2611 // node_modules/@base-ui/react/esm/collapsible/panel/CollapsiblePanel.js 2612 var React22 = __toESM(require_react(), 1); 2613 2614 // node_modules/@base-ui/react/esm/collapsible/panel/CollapsiblePanelCssVars.js 2615 var CollapsiblePanelCssVars = /* @__PURE__ */ (function(CollapsiblePanelCssVars2) { 2616 CollapsiblePanelCssVars2["collapsiblePanelHeight"] = "--collapsible-panel-height"; 2617 CollapsiblePanelCssVars2["collapsiblePanelWidth"] = "--collapsible-panel-width"; 2618 return CollapsiblePanelCssVars2; 2619 })({}); 2620 2621 // node_modules/@base-ui/react/esm/collapsible/panel/CollapsiblePanel.js 2622 var CollapsiblePanel = /* @__PURE__ */ React22.forwardRef(function CollapsiblePanel2(componentProps, forwardedRef) { 2623 const { 2624 className, 2625 hiddenUntilFound: hiddenUntilFoundProp, 2626 keepMounted: keepMountedProp, 2627 render: render4, 2628 id: idProp, 2629 ...elementProps 2630 } = componentProps; 2631 if (true) { 2632 useIsoLayoutEffect(() => { 2633 if (hiddenUntilFoundProp && keepMountedProp === false) { 2634 warn("The `keepMounted={false}` prop on a Collapsible will be ignored when using `hiddenUntilFound` since it requires the Panel to remain mounted even when closed."); 2635 } 2636 }, [hiddenUntilFoundProp, keepMountedProp]); 2637 } 2638 const { 2639 abortControllerRef, 2640 animationTypeRef, 2641 height, 2642 mounted, 2643 onOpenChange, 2644 open, 2645 panelId, 2646 panelRef, 2647 runOnceAnimationsFinish, 2648 setDimensions, 2649 setHiddenUntilFound, 2650 setKeepMounted, 2651 setMounted, 2652 setPanelIdState, 2653 setOpen, 2654 setVisible, 2655 state, 2656 transitionDimensionRef, 2657 visible, 2658 width, 2659 transitionStatus 2660 } = useCollapsibleRootContext(); 2661 const hiddenUntilFound = hiddenUntilFoundProp ?? false; 2662 const keepMounted = keepMountedProp ?? false; 2663 useIsoLayoutEffect(() => { 2664 if (idProp) { 2665 setPanelIdState(idProp); 2666 return () => { 2667 setPanelIdState(void 0); 2668 }; 2669 } 2670 return void 0; 2671 }, [idProp, setPanelIdState]); 2672 useIsoLayoutEffect(() => { 2673 setHiddenUntilFound(hiddenUntilFound); 2674 }, [setHiddenUntilFound, hiddenUntilFound]); 2675 useIsoLayoutEffect(() => { 2676 setKeepMounted(keepMounted); 2677 }, [setKeepMounted, keepMounted]); 2678 const { 2679 props 2680 } = useCollapsiblePanel({ 2681 abortControllerRef, 2682 animationTypeRef, 2683 externalRef: forwardedRef, 2684 height, 2685 hiddenUntilFound, 2686 id: panelId, 2687 keepMounted, 2688 mounted, 2689 onOpenChange, 2690 open, 2691 panelRef, 2692 runOnceAnimationsFinish, 2693 setDimensions, 2694 setMounted, 2695 setOpen, 2696 setVisible, 2697 transitionDimensionRef, 2698 visible, 2699 width 2700 }); 2701 useOpenChangeComplete({ 2702 open: open && transitionStatus === "idle", 2703 ref: panelRef, 2704 onComplete() { 2705 if (!open) { 2706 return; 2707 } 2708 setDimensions({ 2709 height: void 0, 2710 width: void 0 2711 }); 2712 } 2713 }); 2714 const panelState = React22.useMemo(() => ({ 2715 ...state, 2716 transitionStatus 2717 }), [state, transitionStatus]); 2718 const element = useRenderElement("div", componentProps, { 2719 state: panelState, 2720 ref: [forwardedRef, panelRef], 2721 props: [props, { 2722 style: { 2723 [CollapsiblePanelCssVars.collapsiblePanelHeight]: height === void 0 ? "auto" : `$height}px`, 2724 [CollapsiblePanelCssVars.collapsiblePanelWidth]: width === void 0 ? "auto" : `$width}px` 2725 } 2726 }, elementProps], 2727 stateAttributesMapping: collapsibleStateAttributesMapping 2728 }); 2729 const shouldRender = keepMounted || hiddenUntilFound || !keepMounted && mounted; 2730 if (!shouldRender) { 2731 return null; 2732 } 2733 return element; 2734 }); 2735 if (true) CollapsiblePanel.displayName = "CollapsiblePanel"; 2736 2737 // node_modules/@base-ui/react/esm/use-render/useRender.js 2738 function useRender(params) { 2739 return useRenderElement(params.defaultTagName ?? "div", params, params); 2740 } 2741 2742 // packages/ui/build-module/badge/badge.mjs 2743 var import_element2 = __toESM(require_element(), 1); 2744 if (typeof document !== "undefined" && true && !document.head.querySelector("style[data-wp-hash='a407d6dd3d']")) { 2745 const style = document.createElement("style"); 2746 style.setAttribute("data-wp-hash", "a407d6dd3d"); 2747 style.appendChild(document.createTextNode('@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-components{._96e6251aad1a6136__badge{border-radius:var(--wpds-border-radius-lg,8px);font-family:var(--wpds-font-family-body,-apple-system,system-ui,"Segoe UI","Roboto","Oxygen-Sans","Ubuntu","Cantarell","Helvetica Neue",sans-serif);font-size:var(--wpds-font-size-sm,12px);font-weight:var(--wpds-font-weight-regular,400);line-height:var(--wpds-font-line-height-xs,16px);padding-block:var(--wpds-dimension-padding-xs,4px);padding-inline:var(--wpds-dimension-padding-sm,8px)}._99f7158cb520f750__is-high-intent{background-color:var(--wpds-color-bg-surface-error,#f6e6e3);color:var(--wpds-color-fg-content-error,#470000)}.c20ebef2365bc8b7__is-medium-intent{background-color:var(--wpds-color-bg-surface-warning,#fde6bd);color:var(--wpds-color-fg-content-warning,#2e1900)}._365e1626c6202e52__is-low-intent{background-color:var(--wpds-color-bg-surface-caution,#fee994);color:var(--wpds-color-fg-content-caution,#281d00)}._33f8198127ddf4ef__is-stable-intent{background-color:var(--wpds-color-bg-surface-success,#c5f7cc);color:var(--wpds-color-fg-content-success,#002900)}._04c1aca8fc449412__is-informational-intent{background-color:var(--wpds-color-bg-surface-info,#deebfa);color:var(--wpds-color-fg-content-info,#001b4f)}._90726e69d495ec19__is-draft-intent{background-color:var(--wpds-color-bg-surface-neutral-weak,#f0f0f0);color:var(--wpds-color-fg-content-neutral,#1e1e1e)}._898f4a544993bd39__is-none-intent{background-color:var(--wpds-color-bg-surface-neutral-strong,#fff);border:var(--wpds-border-width-xs,1px) solid var(--wpds-color-stroke-surface-neutral,#d8d8d8);color:var(--wpds-color-fg-content-neutral,#1e1e1e);padding-block:calc(var(--wpds-dimension-padding-xs, 4px) - var(--wpds-border-width-xs, 1px));padding-inline:calc(var(--wpds-dimension-padding-sm, 8px) - var(--wpds-border-width-xs, 1px))}}')); 2748 document.head.appendChild(style); 2749 } 2750 var style_default = { "badge": "_96e6251aad1a6136__badge", "is-high-intent": "_99f7158cb520f750__is-high-intent", "is-medium-intent": "c20ebef2365bc8b7__is-medium-intent", "is-low-intent": "_365e1626c6202e52__is-low-intent", "is-stable-intent": "_33f8198127ddf4ef__is-stable-intent", "is-informational-intent": "_04c1aca8fc449412__is-informational-intent", "is-draft-intent": "_90726e69d495ec19__is-draft-intent", "is-none-intent": "_898f4a544993bd39__is-none-intent" }; 2751 var Badge = (0, import_element2.forwardRef)(function Badge2({ children, intent = "none", render: render4, className, ...props }, ref) { 2752 const element = useRender({ 2753 render: render4, 2754 defaultTagName: "span", 2755 ref, 2756 props: mergeProps(props, { 2757 className: clsx_default( 2758 style_default.badge, 2759 style_default[`is-$intent}-intent`], 2760 className 2761 ), 2762 children 2763 }) 2764 }); 2765 return element; 2766 }); 2767 2768 // packages/ui/build-module/icon/icon.mjs 2769 var import_element3 = __toESM(require_element(), 1); 2770 var import_primitives = __toESM(require_primitives(), 1); 2771 var import_jsx_runtime3 = __toESM(require_jsx_runtime(), 1); 2772 var Icon = (0, import_element3.forwardRef)(function Icon2({ icon, size = 24, ...restProps }, ref) { 2773 return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)( 2774 import_primitives.SVG, 2775 { 2776 ref, 2777 fill: "currentColor", 2778 ...icon.props, 2779 ...restProps, 2780 width: size, 2781 height: size 2782 } 2783 ); 2784 }); 2785 2786 // packages/ui/build-module/card/index.mjs 2787 var card_exports = {}; 2788 __export(card_exports, { 2789 Content: () => Content, 2790 FullBleed: () => FullBleed, 2791 Header: () => Header, 2792 Root: () => Root, 2793 Title: () => Title 2794 }); 2795 2796 // packages/ui/build-module/card/root.mjs 2797 var import_element4 = __toESM(require_element(), 1); 2798 if (typeof document !== "undefined" && true && !document.head.querySelector("style[data-wp-hash='e3ae230cea']")) { 2799 const style = document.createElement("style"); 2800 style.setAttribute("data-wp-hash", "e3ae230cea"); 2801 style.appendChild(document.createTextNode("@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-utilities{._336cd3e4e743482f__box-sizing{box-sizing:border-box;*,:after,:before{box-sizing:inherit}}}")); 2802 document.head.appendChild(style); 2803 } 2804 var resets_default = { "box-sizing": "_336cd3e4e743482f__box-sizing" }; 2805 if (typeof document !== "undefined" && true && !document.head.querySelector("style[data-wp-hash='d641b7e3ed']")) { 2806 const style = document.createElement("style"); 2807 style.setAttribute("data-wp-hash", "d641b7e3ed"); 2808 style.appendChild(document.createTextNode("@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-components{._02872bf298eadc43__root{--wp-ui-card-padding:var(--wpds-dimension-padding-2xl,24px);--wp-ui-card-header-content-gap:var(--wpds-dimension-gap-xl,24px);--wp-ui-card-header-content-margin:calc(var(--wp-ui-card-header-content-gap) - var(--wp-ui-card-padding));background-color:var(--wpds-color-bg-surface-neutral-strong,#fff);border:1px solid var(--wpds-color-stroke-surface-neutral-weak,#e0e0e0);border-radius:var(--wpds-border-radius-lg,8px);display:flex;flex-direction:column;overflow:clip}._5dffdaf2a6e669ac__content,.bbccc92e6ba5662d__header{padding:var(--wp-ui-card-padding);&:not(:first-child):not(:last-child){padding-block-end:0}}.bbccc92e6ba5662d__header+._5dffdaf2a6e669ac__content{margin-block-start:var(--wp-ui-card-header-content-margin);padding-block-start:0}.c1fa192587e1b4a6__fullbleed{margin-inline:calc(var(--wp-ui-card-padding)*-1);width:calc(100% + var(--wp-ui-card-padding)*2)}._3c83b3f0225d6364__title{color:var(--wpds-color-fg-content-neutral,#1e1e1e);margin:0}}")); 2809 document.head.appendChild(style); 2810 } 2811 var style_default2 = { "root": "_02872bf298eadc43__root", "header": "bbccc92e6ba5662d__header", "content": "_5dffdaf2a6e669ac__content", "fullbleed": "c1fa192587e1b4a6__fullbleed", "title": "_3c83b3f0225d6364__title" }; 2812 var Root = (0, import_element4.forwardRef)(function Card({ render: render4, ...restProps }, ref) { 2813 const mergedClassName = clsx_default(style_default2.root, resets_default["box-sizing"]); 2814 const element = useRender({ 2815 defaultTagName: "div", 2816 render: render4, 2817 ref, 2818 props: mergeProps({ className: mergedClassName }, restProps) 2819 }); 2820 return element; 2821 }); 2822 2823 // packages/ui/build-module/card/header.mjs 2824 var import_element5 = __toESM(require_element(), 1); 2825 if (typeof document !== "undefined" && true && !document.head.querySelector("style[data-wp-hash='d641b7e3ed']")) { 2826 const style = document.createElement("style"); 2827 style.setAttribute("data-wp-hash", "d641b7e3ed"); 2828 style.appendChild(document.createTextNode("@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-components{._02872bf298eadc43__root{--wp-ui-card-padding:var(--wpds-dimension-padding-2xl,24px);--wp-ui-card-header-content-gap:var(--wpds-dimension-gap-xl,24px);--wp-ui-card-header-content-margin:calc(var(--wp-ui-card-header-content-gap) - var(--wp-ui-card-padding));background-color:var(--wpds-color-bg-surface-neutral-strong,#fff);border:1px solid var(--wpds-color-stroke-surface-neutral-weak,#e0e0e0);border-radius:var(--wpds-border-radius-lg,8px);display:flex;flex-direction:column;overflow:clip}._5dffdaf2a6e669ac__content,.bbccc92e6ba5662d__header{padding:var(--wp-ui-card-padding);&:not(:first-child):not(:last-child){padding-block-end:0}}.bbccc92e6ba5662d__header+._5dffdaf2a6e669ac__content{margin-block-start:var(--wp-ui-card-header-content-margin);padding-block-start:0}.c1fa192587e1b4a6__fullbleed{margin-inline:calc(var(--wp-ui-card-padding)*-1);width:calc(100% + var(--wp-ui-card-padding)*2)}._3c83b3f0225d6364__title{color:var(--wpds-color-fg-content-neutral,#1e1e1e);margin:0}}")); 2829 document.head.appendChild(style); 2830 } 2831 var style_default3 = { "root": "_02872bf298eadc43__root", "header": "bbccc92e6ba5662d__header", "content": "_5dffdaf2a6e669ac__content", "fullbleed": "c1fa192587e1b4a6__fullbleed", "title": "_3c83b3f0225d6364__title" }; 2832 var Header = (0, import_element5.forwardRef)( 2833 function CardHeader({ render: render4, ...props }, ref) { 2834 const element = useRender({ 2835 defaultTagName: "div", 2836 render: render4, 2837 ref, 2838 props: mergeProps({ className: style_default3.header }, props) 2839 }); 2840 return element; 2841 } 2842 ); 2843 2844 // packages/ui/build-module/card/content.mjs 2845 var import_element6 = __toESM(require_element(), 1); 2846 if (typeof document !== "undefined" && true && !document.head.querySelector("style[data-wp-hash='d641b7e3ed']")) { 2847 const style = document.createElement("style"); 2848 style.setAttribute("data-wp-hash", "d641b7e3ed"); 2849 style.appendChild(document.createTextNode("@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-components{._02872bf298eadc43__root{--wp-ui-card-padding:var(--wpds-dimension-padding-2xl,24px);--wp-ui-card-header-content-gap:var(--wpds-dimension-gap-xl,24px);--wp-ui-card-header-content-margin:calc(var(--wp-ui-card-header-content-gap) - var(--wp-ui-card-padding));background-color:var(--wpds-color-bg-surface-neutral-strong,#fff);border:1px solid var(--wpds-color-stroke-surface-neutral-weak,#e0e0e0);border-radius:var(--wpds-border-radius-lg,8px);display:flex;flex-direction:column;overflow:clip}._5dffdaf2a6e669ac__content,.bbccc92e6ba5662d__header{padding:var(--wp-ui-card-padding);&:not(:first-child):not(:last-child){padding-block-end:0}}.bbccc92e6ba5662d__header+._5dffdaf2a6e669ac__content{margin-block-start:var(--wp-ui-card-header-content-margin);padding-block-start:0}.c1fa192587e1b4a6__fullbleed{margin-inline:calc(var(--wp-ui-card-padding)*-1);width:calc(100% + var(--wp-ui-card-padding)*2)}._3c83b3f0225d6364__title{color:var(--wpds-color-fg-content-neutral,#1e1e1e);margin:0}}")); 2850 document.head.appendChild(style); 2851 } 2852 var style_default4 = { "root": "_02872bf298eadc43__root", "header": "bbccc92e6ba5662d__header", "content": "_5dffdaf2a6e669ac__content", "fullbleed": "c1fa192587e1b4a6__fullbleed", "title": "_3c83b3f0225d6364__title" }; 2853 var Content = (0, import_element6.forwardRef)( 2854 function CardContent({ render: render4, ...props }, ref) { 2855 const element = useRender({ 2856 defaultTagName: "div", 2857 render: render4, 2858 ref, 2859 props: mergeProps({ className: style_default4.content }, props) 2860 }); 2861 return element; 2862 } 2863 ); 2864 2865 // packages/ui/build-module/card/full-bleed.mjs 2866 var import_element7 = __toESM(require_element(), 1); 2867 if (typeof document !== "undefined" && true && !document.head.querySelector("style[data-wp-hash='d641b7e3ed']")) { 2868 const style = document.createElement("style"); 2869 style.setAttribute("data-wp-hash", "d641b7e3ed"); 2870 style.appendChild(document.createTextNode("@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-components{._02872bf298eadc43__root{--wp-ui-card-padding:var(--wpds-dimension-padding-2xl,24px);--wp-ui-card-header-content-gap:var(--wpds-dimension-gap-xl,24px);--wp-ui-card-header-content-margin:calc(var(--wp-ui-card-header-content-gap) - var(--wp-ui-card-padding));background-color:var(--wpds-color-bg-surface-neutral-strong,#fff);border:1px solid var(--wpds-color-stroke-surface-neutral-weak,#e0e0e0);border-radius:var(--wpds-border-radius-lg,8px);display:flex;flex-direction:column;overflow:clip}._5dffdaf2a6e669ac__content,.bbccc92e6ba5662d__header{padding:var(--wp-ui-card-padding);&:not(:first-child):not(:last-child){padding-block-end:0}}.bbccc92e6ba5662d__header+._5dffdaf2a6e669ac__content{margin-block-start:var(--wp-ui-card-header-content-margin);padding-block-start:0}.c1fa192587e1b4a6__fullbleed{margin-inline:calc(var(--wp-ui-card-padding)*-1);width:calc(100% + var(--wp-ui-card-padding)*2)}._3c83b3f0225d6364__title{color:var(--wpds-color-fg-content-neutral,#1e1e1e);margin:0}}")); 2871 document.head.appendChild(style); 2872 } 2873 var style_default5 = { "root": "_02872bf298eadc43__root", "header": "bbccc92e6ba5662d__header", "content": "_5dffdaf2a6e669ac__content", "fullbleed": "c1fa192587e1b4a6__fullbleed", "title": "_3c83b3f0225d6364__title" }; 2874 var FullBleed = (0, import_element7.forwardRef)( 2875 function CardFullBleed({ render: render4, ...props }, ref) { 2876 const element = useRender({ 2877 defaultTagName: "div", 2878 render: render4, 2879 ref, 2880 props: mergeProps( 2881 { className: style_default5.fullbleed }, 2882 props 2883 ) 2884 }); 2885 return element; 2886 } 2887 ); 2888 2889 // packages/ui/build-module/card/title.mjs 2890 var import_element9 = __toESM(require_element(), 1); 2891 2892 // packages/ui/build-module/text/text.mjs 2893 var import_element8 = __toESM(require_element(), 1); 2894 if (typeof document !== "undefined" && true && !document.head.querySelector("style[data-wp-hash='8bc43893d6']")) { 2895 const style = document.createElement("style"); 2896 style.setAttribute("data-wp-hash", "8bc43893d6"); 2897 style.appendChild(document.createTextNode('@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-components{._14437cfb77831647__heading-2xl{font-size:var(--wpds-font-size-2xl,32px);line-height:var(--wpds-font-line-height-2xl,40px)}._14437cfb77831647__heading-2xl,._3c78b7fa9b4072dd__heading-xl{font-family:var(--wpds-font-family-heading,-apple-system,system-ui,"Segoe UI","Roboto","Oxygen-Sans","Ubuntu","Cantarell","Helvetica Neue",sans-serif);font-weight:var(--wpds-font-weight-medium,499)}._3c78b7fa9b4072dd__heading-xl{font-size:var(--wpds-font-size-xl,20px);line-height:var(--wpds-font-line-height-md,24px)}.aa58f227716bcde2__heading-lg{font-size:var(--wpds-font-size-lg,15px)}.aa58f227716bcde2__heading-lg,.fc4da56d8dfe52c4__heading-md{font-family:var(--wpds-font-family-heading,-apple-system,system-ui,"Segoe UI","Roboto","Oxygen-Sans","Ubuntu","Cantarell","Helvetica Neue",sans-serif);font-weight:var(--wpds-font-weight-medium,499);line-height:var(--wpds-font-line-height-sm,20px)}.fc4da56d8dfe52c4__heading-md{font-size:var(--wpds-font-size-md,13px)}.a9b78c7c82e8dff7__heading-sm{font-family:var(--wpds-font-family-heading,-apple-system,system-ui,"Segoe UI","Roboto","Oxygen-Sans","Ubuntu","Cantarell","Helvetica Neue",sans-serif);font-size:var(--wpds-font-size-xs,11px);font-weight:var(--wpds-font-weight-medium,499);line-height:var(--wpds-font-line-height-xs,16px);text-transform:uppercase}._305ff559e52180d5__body-xl{font-size:var(--wpds-font-size-xl,20px);line-height:var(--wpds-font-line-height-xl,32px)}._305ff559e52180d5__body-xl,.ca1aa3fc2029e958__body-lg{font-family:var(--wpds-font-family-body,-apple-system,system-ui,"Segoe UI","Roboto","Oxygen-Sans","Ubuntu","Cantarell","Helvetica Neue",sans-serif);font-weight:var(--wpds-font-weight-regular,400)}.ca1aa3fc2029e958__body-lg{font-size:var(--wpds-font-size-lg,15px);line-height:var(--wpds-font-line-height-md,24px)}._131101940be12424__body-md{font-size:var(--wpds-font-size-md,13px);line-height:var(--wpds-font-line-height-sm,20px)}._0e8d87a42c1f75fa__body-sm,._131101940be12424__body-md{font-family:var(--wpds-font-family-body,-apple-system,system-ui,"Segoe UI","Roboto","Oxygen-Sans","Ubuntu","Cantarell","Helvetica Neue",sans-serif);font-weight:var(--wpds-font-weight-regular,400)}._0e8d87a42c1f75fa__body-sm{font-size:var(--wpds-font-size-sm,12px);line-height:var(--wpds-font-line-height-xs,16px)}}')); 2898 document.head.appendChild(style); 2899 } 2900 var style_default6 = { "heading-2xl": "_14437cfb77831647__heading-2xl", "heading-xl": "_3c78b7fa9b4072dd__heading-xl", "heading-lg": "aa58f227716bcde2__heading-lg", "heading-md": "fc4da56d8dfe52c4__heading-md", "heading-sm": "a9b78c7c82e8dff7__heading-sm", "body-xl": "_305ff559e52180d5__body-xl", "body-lg": "ca1aa3fc2029e958__body-lg", "body-md": "_131101940be12424__body-md", "body-sm": "_0e8d87a42c1f75fa__body-sm" }; 2901 var Text = (0, import_element8.forwardRef)(function Text2({ variant = "body-md", render: render4, className, ...props }, ref) { 2902 const element = useRender({ 2903 render: render4, 2904 defaultTagName: "span", 2905 ref, 2906 props: mergeProps(props, { 2907 className: clsx_default(style_default6[variant], className) 2908 }) 2909 }); 2910 return element; 2911 }); 2912 2913 // packages/ui/build-module/card/title.mjs 2914 var import_jsx_runtime4 = __toESM(require_jsx_runtime(), 1); 2915 if (typeof document !== "undefined" && true && !document.head.querySelector("style[data-wp-hash='d641b7e3ed']")) { 2916 const style = document.createElement("style"); 2917 style.setAttribute("data-wp-hash", "d641b7e3ed"); 2918 style.appendChild(document.createTextNode("@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-components{._02872bf298eadc43__root{--wp-ui-card-padding:var(--wpds-dimension-padding-2xl,24px);--wp-ui-card-header-content-gap:var(--wpds-dimension-gap-xl,24px);--wp-ui-card-header-content-margin:calc(var(--wp-ui-card-header-content-gap) - var(--wp-ui-card-padding));background-color:var(--wpds-color-bg-surface-neutral-strong,#fff);border:1px solid var(--wpds-color-stroke-surface-neutral-weak,#e0e0e0);border-radius:var(--wpds-border-radius-lg,8px);display:flex;flex-direction:column;overflow:clip}._5dffdaf2a6e669ac__content,.bbccc92e6ba5662d__header{padding:var(--wp-ui-card-padding);&:not(:first-child):not(:last-child){padding-block-end:0}}.bbccc92e6ba5662d__header+._5dffdaf2a6e669ac__content{margin-block-start:var(--wp-ui-card-header-content-margin);padding-block-start:0}.c1fa192587e1b4a6__fullbleed{margin-inline:calc(var(--wp-ui-card-padding)*-1);width:calc(100% + var(--wp-ui-card-padding)*2)}._3c83b3f0225d6364__title{color:var(--wpds-color-fg-content-neutral,#1e1e1e);margin:0}}")); 2919 document.head.appendChild(style); 2920 } 2921 var style_default7 = { "root": "_02872bf298eadc43__root", "header": "bbccc92e6ba5662d__header", "content": "_5dffdaf2a6e669ac__content", "fullbleed": "c1fa192587e1b4a6__fullbleed", "title": "_3c83b3f0225d6364__title" }; 2922 var Title = (0, import_element9.forwardRef)( 2923 function CardTitle({ className, render: render4, children, ...props }, ref) { 2924 return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)( 2925 Text, 2926 { 2927 variant: "heading-lg", 2928 render: render4 ?? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { ref, ...props }), 2929 className: clsx_default(style_default7.title, className), 2930 children 2931 } 2932 ); 2933 } 2934 ); 2935 2936 // packages/ui/build-module/collapsible/panel.mjs 2937 var import_element10 = __toESM(require_element(), 1); 2938 var import_jsx_runtime5 = __toESM(require_jsx_runtime(), 1); 2939 var Panel = (0, import_element10.forwardRef)( 2940 function CollapsiblePanel3(props, forwardedRef) { 2941 return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(index_parts_exports.Panel, { ref: forwardedRef, ...props }); 2942 } 2943 ); 2944 2945 // packages/ui/build-module/collapsible/root.mjs 2946 var import_element11 = __toESM(require_element(), 1); 2947 var import_jsx_runtime6 = __toESM(require_jsx_runtime(), 1); 2948 var Root2 = (0, import_element11.forwardRef)( 2949 function CollapsibleRoot3(props, forwardedRef) { 2950 return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(index_parts_exports.Root, { ref: forwardedRef, ...props }); 2951 } 2952 ); 2953 2954 // packages/ui/build-module/collapsible/trigger.mjs 2955 var import_element12 = __toESM(require_element(), 1); 2956 var import_jsx_runtime7 = __toESM(require_jsx_runtime(), 1); 2957 var Trigger = (0, import_element12.forwardRef)( 2958 function CollapsibleTrigger3(props, forwardedRef) { 2959 return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(index_parts_exports.Trigger, { ref: forwardedRef, ...props }); 2960 } 2961 ); 2962 2963 // packages/ui/build-module/collapsible-card/index.mjs 2964 var collapsible_card_exports = {}; 2965 __export(collapsible_card_exports, { 2966 Content: () => Content2, 2967 Header: () => Header2, 2968 HeaderDescription: () => HeaderDescription, 2969 Root: () => Root3 2970 }); 2971 2972 // packages/ui/build-module/collapsible-card/root.mjs 2973 var import_element13 = __toESM(require_element(), 1); 2974 var import_jsx_runtime8 = __toESM(require_jsx_runtime(), 1); 2975 var Root3 = (0, import_element13.forwardRef)( 2976 function CollapsibleCardRoot({ render: render4, ...restProps }, ref) { 2977 return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)( 2978 Root2, 2979 { 2980 ref, 2981 render: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Root, { render: render4 }), 2982 ...restProps 2983 } 2984 ); 2985 } 2986 ); 2987 2988 // packages/ui/build-module/collapsible-card/header.mjs 2989 var import_element15 = __toESM(require_element(), 1); 2990 2991 // packages/icons/build-module/library/arrow-down.mjs 2992 var import_primitives2 = __toESM(require_primitives(), 1); 2993 var import_jsx_runtime9 = __toESM(require_jsx_runtime(), 1); 2994 var arrow_down_default = /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_primitives2.SVG, { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_primitives2.Path, { d: "m16.5 13.5-3.7 3.7V4h-1.5v13.2l-3.8-3.7-1 1 5.5 5.6 5.5-5.6z" }) }); 2995 2996 // packages/icons/build-module/library/arrow-left.mjs 2997 var import_primitives3 = __toESM(require_primitives(), 1); 2998 var import_jsx_runtime10 = __toESM(require_jsx_runtime(), 1); 2999 var arrow_left_default = /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_primitives3.SVG, { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_primitives3.Path, { d: "M20 11.2H6.8l3.7-3.7-1-1L3.9 12l5.6 5.5 1-1-3.7-3.7H20z" }) }); 3000 3001 // packages/icons/build-module/library/arrow-right.mjs 3002 var import_primitives4 = __toESM(require_primitives(), 1); 3003 var import_jsx_runtime11 = __toESM(require_jsx_runtime(), 1); 3004 var arrow_right_default = /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_primitives4.SVG, { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_primitives4.Path, { d: "m14.5 6.5-1 1 3.7 3.7H4v1.6h13.2l-3.7 3.7 1 1 5.6-5.5z" }) }); 3005 3006 // packages/icons/build-module/library/arrow-up.mjs 3007 var import_primitives5 = __toESM(require_primitives(), 1); 3008 var import_jsx_runtime12 = __toESM(require_jsx_runtime(), 1); 3009 var arrow_up_default = /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_primitives5.SVG, { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_primitives5.Path, { d: "M12 3.9 6.5 9.5l1 1 3.8-3.7V20h1.5V6.8l3.7 3.7 1-1z" }) }); 3010 3011 // packages/icons/build-module/library/block-default.mjs 3012 var import_primitives6 = __toESM(require_primitives(), 1); 3013 var import_jsx_runtime13 = __toESM(require_jsx_runtime(), 1); 3014 var block_default_default = /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_primitives6.SVG, { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_primitives6.Path, { d: "M19 8h-1V6h-5v2h-2V6H6v2H5c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-8c0-1.1-.9-2-2-2zm.5 10c0 .3-.2.5-.5.5H5c-.3 0-.5-.2-.5-.5v-8c0-.3.2-.5.5-.5h14c.3 0 .5.2.5.5v8z" }) }); 3015 3016 // packages/icons/build-module/library/block-table.mjs 3017 var import_primitives7 = __toESM(require_primitives(), 1); 3018 var import_jsx_runtime14 = __toESM(require_jsx_runtime(), 1); 3019 var block_table_default = /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_primitives7.SVG, { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_primitives7.Path, { d: "M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM5 4.5h14c.3 0 .5.2.5.5v3.5h-15V5c0-.3.2-.5.5-.5zm8 5.5h6.5v3.5H13V10zm-1.5 3.5h-7V10h7v3.5zm-7 5.5v-4h7v4.5H5c-.3 0-.5-.2-.5-.5zm14.5.5h-6V15h6.5v4c0 .3-.2.5-.5.5z" }) }); 3020 3021 // packages/icons/build-module/library/category.mjs 3022 var import_primitives8 = __toESM(require_primitives(), 1); 3023 var import_jsx_runtime15 = __toESM(require_jsx_runtime(), 1); 3024 var category_default = /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_primitives8.SVG, { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_primitives8.Path, { fillRule: "evenodd", clipRule: "evenodd", d: "M6 5.5h3a.5.5 0 01.5.5v3a.5.5 0 01-.5.5H6a.5.5 0 01-.5-.5V6a.5.5 0 01.5-.5zM4 6a2 2 0 012-2h3a2 2 0 012 2v3a2 2 0 01-2 2H6a2 2 0 01-2-2V6zm11-.5h3a.5.5 0 01.5.5v3a.5.5 0 01-.5.5h-3a.5.5 0 01-.5-.5V6a.5.5 0 01.5-.5zM13 6a2 2 0 012-2h3a2 2 0 012 2v3a2 2 0 01-2 2h-3a2 2 0 01-2-2V6zm5 8.5h-3a.5.5 0 00-.5.5v3a.5.5 0 00.5.5h3a.5.5 0 00.5-.5v-3a.5.5 0 00-.5-.5zM15 13a2 2 0 00-2 2v3a2 2 0 002 2h3a2 2 0 002-2v-3a2 2 0 00-2-2h-3zm-9 1.5h3a.5.5 0 01.5.5v3a.5.5 0 01-.5.5H6a.5.5 0 01-.5-.5v-3a.5.5 0 01.5-.5zM4 15a2 2 0 012-2h3a2 2 0 012 2v3a2 2 0 01-2 2H6a2 2 0 01-2-2v-3z" }) }); 3025 3026 // packages/icons/build-module/library/check.mjs 3027 var import_primitives9 = __toESM(require_primitives(), 1); 3028 var import_jsx_runtime16 = __toESM(require_jsx_runtime(), 1); 3029 var check_default = /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_primitives9.SVG, { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_primitives9.Path, { d: "M16.5 7.5 10 13.9l-2.5-2.4-1 1 3.5 3.6 7.5-7.6z" }) }); 3030 3031 // packages/icons/build-module/library/chevron-down.mjs 3032 var import_primitives10 = __toESM(require_primitives(), 1); 3033 var import_jsx_runtime17 = __toESM(require_jsx_runtime(), 1); 3034 var chevron_down_default = /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_primitives10.SVG, { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_primitives10.Path, { d: "M17.5 11.6L12 16l-5.5-4.4.9-1.2L12 14l4.5-3.6 1 1.2z" }) }); 3035 3036 // packages/icons/build-module/library/chevron-left.mjs 3037 var import_primitives11 = __toESM(require_primitives(), 1); 3038 var import_jsx_runtime18 = __toESM(require_jsx_runtime(), 1); 3039 var chevron_left_default = /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_primitives11.SVG, { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_primitives11.Path, { d: "M14.6 7l-1.2-1L8 12l5.4 6 1.2-1-4.6-5z" }) }); 3040 3041 // packages/icons/build-module/library/chevron-right.mjs 3042 var import_primitives12 = __toESM(require_primitives(), 1); 3043 var import_jsx_runtime19 = __toESM(require_jsx_runtime(), 1); 3044 var chevron_right_default = /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_primitives12.SVG, { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_primitives12.Path, { d: "M10.6 6L9.4 7l4.6 5-4.6 5 1.2 1 5.4-6z" }) }); 3045 3046 // packages/icons/build-module/library/close-small.mjs 3047 var import_primitives13 = __toESM(require_primitives(), 1); 3048 var import_jsx_runtime20 = __toESM(require_jsx_runtime(), 1); 3049 var close_small_default = /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_primitives13.SVG, { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_primitives13.Path, { 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" }) }); 3050 3051 // packages/icons/build-module/library/cog.mjs 3052 var import_primitives14 = __toESM(require_primitives(), 1); 3053 var import_jsx_runtime21 = __toESM(require_jsx_runtime(), 1); 3054 var cog_default = /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_primitives14.SVG, { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_primitives14.Path, { fillRule: "evenodd", clipRule: "evenodd", d: "M10.289 4.836A1 1 0 0111.275 4h1.306a1 1 0 01.987.836l.244 1.466c.787.26 1.503.679 2.108 1.218l1.393-.522a1 1 0 011.216.437l.653 1.13a1 1 0 01-.23 1.273l-1.148.944a6.025 6.025 0 010 2.435l1.149.946a1 1 0 01.23 1.272l-.653 1.13a1 1 0 01-1.216.437l-1.394-.522c-.605.54-1.32.958-2.108 1.218l-.244 1.466a1 1 0 01-.987.836h-1.306a1 1 0 01-.986-.836l-.244-1.466a5.995 5.995 0 01-2.108-1.218l-1.394.522a1 1 0 01-1.217-.436l-.653-1.131a1 1 0 01.23-1.272l1.149-.946a6.026 6.026 0 010-2.435l-1.148-.944a1 1 0 01-.23-1.272l.653-1.131a1 1 0 011.217-.437l1.393.522a5.994 5.994 0 012.108-1.218l.244-1.466zM14.929 12a3 3 0 11-6 0 3 3 0 016 0z" }) }); 3055 3056 // packages/icons/build-module/library/envelope.mjs 3057 var import_primitives15 = __toESM(require_primitives(), 1); 3058 var import_jsx_runtime22 = __toESM(require_jsx_runtime(), 1); 3059 var envelope_default = /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_primitives15.SVG, { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_primitives15.Path, { fillRule: "evenodd", clipRule: "evenodd", d: "M3 7c0-1.1.9-2 2-2h14a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7Zm2-.5h14c.3 0 .5.2.5.5v1L12 13.5 4.5 7.9V7c0-.3.2-.5.5-.5Zm-.5 3.3V17c0 .3.2.5.5.5h14c.3 0 .5-.2.5-.5V9.8L12 15.4 4.5 9.8Z" }) }); 3060 3061 // packages/icons/build-module/library/error.mjs 3062 var import_primitives16 = __toESM(require_primitives(), 1); 3063 var import_jsx_runtime23 = __toESM(require_jsx_runtime(), 1); 3064 var error_default = /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_primitives16.SVG, { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_primitives16.Path, { fillRule: "evenodd", clipRule: "evenodd", d: "M12.218 5.377a.25.25 0 0 0-.436 0l-7.29 12.96a.25.25 0 0 0 .218.373h14.58a.25.25 0 0 0 .218-.372l-7.29-12.96Zm-1.743-.735c.669-1.19 2.381-1.19 3.05 0l7.29 12.96a1.75 1.75 0 0 1-1.525 2.608H4.71a1.75 1.75 0 0 1-1.525-2.608l7.29-12.96ZM12.75 17.46h-1.5v-1.5h1.5v1.5Zm-1.5-3h1.5v-5h-1.5v5Z" }) }); 3065 3066 // packages/icons/build-module/library/format-list-bullets-rtl.mjs 3067 var import_primitives17 = __toESM(require_primitives(), 1); 3068 var import_jsx_runtime24 = __toESM(require_jsx_runtime(), 1); 3069 var format_list_bullets_rtl_default = /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_primitives17.SVG, { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_primitives17.Path, { d: "M4 8.8h8.9V7.2H4v1.6zm0 7h8.9v-1.5H4v1.5zM18 13c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-3c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2z" }) }); 3070 3071 // packages/icons/build-module/library/format-list-bullets.mjs 3072 var import_primitives18 = __toESM(require_primitives(), 1); 3073 var import_jsx_runtime25 = __toESM(require_jsx_runtime(), 1); 3074 var format_list_bullets_default = /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_primitives18.SVG, { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_primitives18.Path, { d: "M11.1 15.8H20v-1.5h-8.9v1.5zm0-8.6v1.5H20V7.2h-8.9zM6 13c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-7c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z" }) }); 3075 3076 // packages/icons/build-module/library/funnel.mjs 3077 var import_primitives19 = __toESM(require_primitives(), 1); 3078 var import_jsx_runtime26 = __toESM(require_jsx_runtime(), 1); 3079 var funnel_default = /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_primitives19.SVG, { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_primitives19.Path, { d: "M10 17.5H14V16H10V17.5ZM6 6V7.5H18V6H6ZM8 12.5H16V11H8V12.5Z" }) }); 3080 3081 // packages/icons/build-module/library/link.mjs 3082 var import_primitives20 = __toESM(require_primitives(), 1); 3083 var import_jsx_runtime27 = __toESM(require_jsx_runtime(), 1); 3084 var link_default = /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_primitives20.SVG, { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_primitives20.Path, { 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" }) }); 3085 3086 // packages/icons/build-module/library/mobile.mjs 3087 var import_primitives21 = __toESM(require_primitives(), 1); 3088 var import_jsx_runtime28 = __toESM(require_jsx_runtime(), 1); 3089 var mobile_default = /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_primitives21.SVG, { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_primitives21.Path, { d: "M15 4H9c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h6c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm.5 14c0 .3-.2.5-.5.5H9c-.3 0-.5-.2-.5-.5V6c0-.3.2-.5.5-.5h6c.3 0 .5.2.5.5v12zm-4.5-.5h2V16h-2v1.5z" }) }); 3090 3091 // packages/icons/build-module/library/more-vertical.mjs 3092 var import_primitives22 = __toESM(require_primitives(), 1); 3093 var import_jsx_runtime29 = __toESM(require_jsx_runtime(), 1); 3094 var more_vertical_default = /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_primitives22.SVG, { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_primitives22.Path, { d: "M13 19h-2v-2h2v2zm0-6h-2v-2h2v2zm0-6h-2V5h2v2z" }) }); 3095 3096 // packages/icons/build-module/library/next.mjs 3097 var import_primitives23 = __toESM(require_primitives(), 1); 3098 var import_jsx_runtime30 = __toESM(require_jsx_runtime(), 1); 3099 var next_default = /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_primitives23.SVG, { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_primitives23.Path, { d: "M6.6 6L5.4 7l4.5 5-4.5 5 1.1 1 5.5-6-5.4-6zm6 0l-1.1 1 4.5 5-4.5 5 1.1 1 5.5-6-5.5-6z" }) }); 3100 3101 // packages/icons/build-module/library/pencil.mjs 3102 var import_primitives24 = __toESM(require_primitives(), 1); 3103 var import_jsx_runtime31 = __toESM(require_jsx_runtime(), 1); 3104 var pencil_default = /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_primitives24.SVG, { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_primitives24.Path, { d: "m19 7-3-3-8.5 8.5-1 4 4-1L19 7Zm-7 11.5H5V20h7v-1.5Z" }) }); 3105 3106 // packages/icons/build-module/library/previous.mjs 3107 var import_primitives25 = __toESM(require_primitives(), 1); 3108 var import_jsx_runtime32 = __toESM(require_jsx_runtime(), 1); 3109 var previous_default = /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_primitives25.SVG, { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_primitives25.Path, { d: "M11.6 7l-1.1-1L5 12l5.5 6 1.1-1L7 12l4.6-5zm6 0l-1.1-1-5.5 6 5.5 6 1.1-1-4.6-5 4.6-5z" }) }); 3110 3111 // packages/icons/build-module/library/scheduled.mjs 3112 var import_primitives26 = __toESM(require_primitives(), 1); 3113 var import_jsx_runtime33 = __toESM(require_jsx_runtime(), 1); 3114 var scheduled_default = /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_primitives26.SVG, { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_primitives26.Path, { fillRule: "evenodd", clipRule: "evenodd", d: "M12 18.5a6.5 6.5 0 1 1 0-13 6.5 6.5 0 0 1 0 13ZM4 12a8 8 0 1 1 16 0 8 8 0 0 1-16 0Zm9 1V8h-1.5v3.5h-2V13H13Z" }) }); 3115 3116 // packages/icons/build-module/library/search.mjs 3117 var import_primitives27 = __toESM(require_primitives(), 1); 3118 var import_jsx_runtime34 = __toESM(require_jsx_runtime(), 1); 3119 var search_default = /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_primitives27.SVG, { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_primitives27.Path, { 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" }) }); 3120 3121 // packages/icons/build-module/library/seen.mjs 3122 var import_primitives28 = __toESM(require_primitives(), 1); 3123 var import_jsx_runtime35 = __toESM(require_jsx_runtime(), 1); 3124 var seen_default = /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_primitives28.SVG, { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_primitives28.Path, { d: "M3.99961 13C4.67043 13.3354 4.6703 13.3357 4.67017 13.3359L4.67298 13.3305C4.67621 13.3242 4.68184 13.3135 4.68988 13.2985C4.70595 13.2686 4.7316 13.2218 4.76695 13.1608C4.8377 13.0385 4.94692 12.8592 5.09541 12.6419C5.39312 12.2062 5.84436 11.624 6.45435 11.0431C7.67308 9.88241 9.49719 8.75 11.9996 8.75C14.502 8.75 16.3261 9.88241 17.5449 11.0431C18.1549 11.624 18.6061 12.2062 18.9038 12.6419C19.0523 12.8592 19.1615 13.0385 19.2323 13.1608C19.2676 13.2218 19.2933 13.2686 19.3093 13.2985C19.3174 13.3135 19.323 13.3242 19.3262 13.3305L19.3291 13.3359C19.3289 13.3357 19.3288 13.3354 19.9996 13C20.6704 12.6646 20.6703 12.6643 20.6701 12.664L20.6697 12.6632L20.6688 12.6614L20.6662 12.6563L20.6583 12.6408C20.6517 12.6282 20.6427 12.6108 20.631 12.5892C20.6078 12.5459 20.5744 12.4852 20.5306 12.4096C20.4432 12.2584 20.3141 12.0471 20.1423 11.7956C19.7994 11.2938 19.2819 10.626 18.5794 9.9569C17.1731 8.61759 14.9972 7.25 11.9996 7.25C9.00203 7.25 6.82614 8.61759 5.41987 9.9569C4.71736 10.626 4.19984 11.2938 3.85694 11.7956C3.68511 12.0471 3.55605 12.2584 3.4686 12.4096C3.42484 12.4852 3.39142 12.5459 3.36818 12.5892C3.35656 12.6108 3.34748 12.6282 3.34092 12.6408L3.33297 12.6563L3.33041 12.6614L3.32948 12.6632L3.32911 12.664C3.32894 12.6643 3.32879 12.6646 3.99961 13ZM11.9996 16C13.9326 16 15.4996 14.433 15.4996 12.5C15.4996 10.567 13.9326 9 11.9996 9C10.0666 9 8.49961 10.567 8.49961 12.5C8.49961 14.433 10.0666 16 11.9996 16Z" }) }); 3125 3126 // packages/icons/build-module/library/unseen.mjs 3127 var import_primitives29 = __toESM(require_primitives(), 1); 3128 var import_jsx_runtime36 = __toESM(require_jsx_runtime(), 1); 3129 var unseen_default = /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_primitives29.SVG, { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_primitives29.Path, { d: "M20.7 12.7s0-.1-.1-.2c0-.2-.2-.4-.4-.6-.3-.5-.9-1.2-1.6-1.8-.7-.6-1.5-1.3-2.6-1.8l-.6 1.4c.9.4 1.6 1 2.1 1.5.6.6 1.1 1.2 1.4 1.6.1.2.3.4.3.5v.1l.7-.3.7-.3Zm-5.2-9.3-1.8 4c-.5-.1-1.1-.2-1.7-.2-3 0-5.2 1.4-6.6 2.7-.7.7-1.2 1.3-1.6 1.8-.2.3-.3.5-.4.6 0 0 0 .1-.1.2s0 0 .7.3l.7.3V13c0-.1.2-.3.3-.5.3-.4.7-1 1.4-1.6 1.2-1.2 3-2.3 5.5-2.3H13v.3c-.4 0-.8-.1-1.1-.1-1.9 0-3.5 1.6-3.5 3.5s.6 2.3 1.6 2.9l-2 4.4.9.4 7.6-16.2-.9-.4Zm-3 12.6c1.7-.2 3-1.7 3-3.5s-.2-1.4-.6-1.9L12.4 16Z" }) }); 3130 3131 // packages/ui/build-module/collapsible-card/context.mjs 3132 var import_element14 = __toESM(require_element(), 1); 3133 var HeaderDescriptionIdContext = (0, import_element14.createContext)({ 3134 setDescriptionId: () => { 3135 } 3136 }); 3137 3138 // packages/ui/build-module/collapsible-card/header.mjs 3139 var import_jsx_runtime37 = __toESM(require_jsx_runtime(), 1); 3140 if (typeof document !== "undefined" && true && !document.head.querySelector("style[data-wp-hash='23250ec980']")) { 3141 const style = document.createElement("style"); 3142 style.setAttribute("data-wp-hash", "23250ec980"); 3143 style.appendChild(document.createTextNode("@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-components{.cab17c7a373cb60d__header-content{flex:1;min-width:0}.dd89d27c4f15912d__header-trigger-positioner{align-self:center;flex-shrink:0;max-height:0;overflow:visible}.bcfab5f2448bafef__header-trigger-wrapper{border-radius:var(--wpds-border-radius-sm,2px);display:flex;translate:0 -50%}._3106f8d2b0330faa__header-trigger{@media not (prefers-reduced-motion){transition:rotate .15s ease-out}}._5d2dfcb4085c6d0f__header[data-panel-open] ._3106f8d2b0330faa__header-trigger{rotate:180deg}._5d2dfcb4085c6d0f__header[data-disabled] ._3106f8d2b0330faa__header-trigger{color:var(--wpds-color-fg-interactive-neutral-disabled,#8a8a8a)}.e34cf37ccd0d81e0__content{height:var(--collapsible-panel-height);margin-block-start:var(--wp-ui-card-header-content-margin);overflow:hidden;&[hidden]:not([hidden=until-found]){display:none}&[data-ending-style],&[data-starting-style]{height:0}@media not (prefers-reduced-motion){transition:all .15s ease-out}}}@layer wp-ui-compositions{._41bfdbf7b6c087c2__content-inner{padding-block-start:0}._5d2dfcb4085c6d0f__header{align-items:stretch;display:flex;flex-direction:row;gap:var(--wpds-dimension-gap-sm,8px);outline:none;&:not([data-disabled]){cursor:var(--wpds-cursor-control,pointer)}}}")); 3144 document.head.appendChild(style); 3145 } 3146 var style_default8 = { "header-content": "cab17c7a373cb60d__header-content", "header-trigger-positioner": "dd89d27c4f15912d__header-trigger-positioner", "header-trigger-wrapper": "bcfab5f2448bafef__header-trigger-wrapper", "header-trigger": "_3106f8d2b0330faa__header-trigger", "header": "_5d2dfcb4085c6d0f__header", "content": "e34cf37ccd0d81e0__content", "content-inner": "_41bfdbf7b6c087c2__content-inner" }; 3147 if (typeof document !== "undefined" && true && !document.head.querySelector("style[data-wp-hash='4acd2b57a1']")) { 3148 const style = document.createElement("style"); 3149 style.setAttribute("data-wp-hash", "4acd2b57a1"); 3150 style.appendChild(document.createTextNode("@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-utilities{._08e8a2e44959f892__outset-ring--focus,._970d04df7376df67__outset-ring--focus-within-except-active,.c5cb3ee4bddaa8e4__outset-ring--focus-within-visible,.cd83dfc2126a0846__outset-ring--focus-within,.d0541bc9dd9dc7b6__outset-ring--focus-visible,.e25b2bdd7aa21721__outset-ring--focus-except-active,.ecadb9e080e2dfa5__outset-ring--focus-parent-visible{@media not (prefers-reduced-motion){transition:outline .1s ease-out}outline-color:#0000;outline-offset:1px;outline-style:solid;outline-width:0}._08e8a2e44959f892__outset-ring--focus:focus,._970d04df7376df67__outset-ring--focus-within-except-active:focus-within:not(:has(:active)),.c5cb3ee4bddaa8e4__outset-ring--focus-within-visible:focus-within:has(:focus-visible),.cd83dfc2126a0846__outset-ring--focus-within:focus-within,.d0541bc9dd9dc7b6__outset-ring--focus-visible:focus-visible,.e25b2bdd7aa21721__outset-ring--focus-except-active:focus:not(:active),:focus-visible .ecadb9e080e2dfa5__outset-ring--focus-parent-visible{outline-color:var(--wpds-color-stroke-focus-brand,var(--wp-admin-theme-color,#3858e9));outline-width:var(--wpds-border-width-focus,var(--wp-admin-border-width-focus,2px))}}")); 3151 document.head.appendChild(style); 3152 } 3153 var focus_default = { "outset-ring--focus": "_08e8a2e44959f892__outset-ring--focus", "outset-ring--focus-except-active": "e25b2bdd7aa21721__outset-ring--focus-except-active", "outset-ring--focus-visible": "d0541bc9dd9dc7b6__outset-ring--focus-visible", "outset-ring--focus-within": "cd83dfc2126a0846__outset-ring--focus-within", "outset-ring--focus-within-except-active": "_970d04df7376df67__outset-ring--focus-within-except-active", "outset-ring--focus-within-visible": "c5cb3ee4bddaa8e4__outset-ring--focus-within-visible", "outset-ring--focus-parent-visible": "ecadb9e080e2dfa5__outset-ring--focus-parent-visible" }; 3154 var Header2 = (0, import_element15.forwardRef)( 3155 function CollapsibleCardHeader({ children, className, render: render4, ...restProps }, ref) { 3156 const [descriptionId, setDescriptionId] = (0, import_element15.useState)(); 3157 const contextValue = (0, import_element15.useMemo)( 3158 () => ({ setDescriptionId }), 3159 [setDescriptionId] 3160 ); 3161 return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(HeaderDescriptionIdContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)( 3162 Trigger, 3163 { 3164 className: clsx_default(style_default8.header, className), 3165 render: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)( 3166 Header, 3167 { 3168 ref, 3169 render: render4, 3170 ...restProps 3171 } 3172 ), 3173 nativeButton: false, 3174 "aria-describedby": descriptionId, 3175 children: [ 3176 /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: style_default8["header-content"], children }), 3177 /* @__PURE__ */ (0, import_jsx_runtime37.jsx)( 3178 "div", 3179 { 3180 className: clsx_default( 3181 style_default8["header-trigger-positioner"] 3182 ), 3183 children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)( 3184 "div", 3185 { 3186 className: clsx_default( 3187 style_default8["header-trigger-wrapper"], 3188 // While the interactive trigger element is the whole header, 3189 // the focus ring will be displayed only on the icon to visually 3190 // emulate it being the button. 3191 focus_default["outset-ring--focus-parent-visible"] 3192 ), 3193 children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)( 3194 Icon, 3195 { 3196 icon: chevron_down_default, 3197 className: style_default8["header-trigger"] 3198 } 3199 ) 3200 } 3201 ) 3202 } 3203 ) 3204 ] 3205 } 3206 ) }); 3207 } 3208 ); 3209 3210 // packages/ui/build-module/collapsible-card/header-description.mjs 3211 var import_element16 = __toESM(require_element(), 1); 3212 var import_jsx_runtime38 = __toESM(require_jsx_runtime(), 1); 3213 var HeaderDescription = (0, import_element16.forwardRef)(function CollapsibleCardHeaderDescription({ children, className, ...restProps }, ref) { 3214 const descriptionId = (0, import_element16.useId)(); 3215 const { setDescriptionId } = (0, import_element16.useContext)(HeaderDescriptionIdContext); 3216 (0, import_element16.useEffect)(() => { 3217 setDescriptionId(descriptionId); 3218 return () => setDescriptionId(void 0); 3219 }, [descriptionId, setDescriptionId]); 3220 return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)( 3221 "div", 3222 { 3223 ref, 3224 id: descriptionId, 3225 "aria-hidden": "true", 3226 className, 3227 ...restProps, 3228 children 3229 } 3230 ); 3231 }); 3232 3233 // packages/ui/build-module/collapsible-card/content.mjs 3234 var import_element17 = __toESM(require_element(), 1); 3235 var import_jsx_runtime39 = __toESM(require_jsx_runtime(), 1); 3236 if (typeof document !== "undefined" && true && !document.head.querySelector("style[data-wp-hash='23250ec980']")) { 3237 const style = document.createElement("style"); 3238 style.setAttribute("data-wp-hash", "23250ec980"); 3239 style.appendChild(document.createTextNode("@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-components{.cab17c7a373cb60d__header-content{flex:1;min-width:0}.dd89d27c4f15912d__header-trigger-positioner{align-self:center;flex-shrink:0;max-height:0;overflow:visible}.bcfab5f2448bafef__header-trigger-wrapper{border-radius:var(--wpds-border-radius-sm,2px);display:flex;translate:0 -50%}._3106f8d2b0330faa__header-trigger{@media not (prefers-reduced-motion){transition:rotate .15s ease-out}}._5d2dfcb4085c6d0f__header[data-panel-open] ._3106f8d2b0330faa__header-trigger{rotate:180deg}._5d2dfcb4085c6d0f__header[data-disabled] ._3106f8d2b0330faa__header-trigger{color:var(--wpds-color-fg-interactive-neutral-disabled,#8a8a8a)}.e34cf37ccd0d81e0__content{height:var(--collapsible-panel-height);margin-block-start:var(--wp-ui-card-header-content-margin);overflow:hidden;&[hidden]:not([hidden=until-found]){display:none}&[data-ending-style],&[data-starting-style]{height:0}@media not (prefers-reduced-motion){transition:all .15s ease-out}}}@layer wp-ui-compositions{._41bfdbf7b6c087c2__content-inner{padding-block-start:0}._5d2dfcb4085c6d0f__header{align-items:stretch;display:flex;flex-direction:row;gap:var(--wpds-dimension-gap-sm,8px);outline:none;&:not([data-disabled]){cursor:var(--wpds-cursor-control,pointer)}}}")); 3240 document.head.appendChild(style); 3241 } 3242 var style_default9 = { "header-content": "cab17c7a373cb60d__header-content", "header-trigger-positioner": "dd89d27c4f15912d__header-trigger-positioner", "header-trigger-wrapper": "bcfab5f2448bafef__header-trigger-wrapper", "header-trigger": "_3106f8d2b0330faa__header-trigger", "header": "_5d2dfcb4085c6d0f__header", "content": "e34cf37ccd0d81e0__content", "content-inner": "_41bfdbf7b6c087c2__content-inner" }; 3243 var Content2 = (0, import_element17.forwardRef)( 3244 function CollapsibleCardContent({ className, render: render4, children, hiddenUntilFound = true, ...restProps }, ref) { 3245 return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)( 3246 Panel, 3247 { 3248 ref, 3249 className: clsx_default(style_default9.content, className), 3250 hiddenUntilFound, 3251 ...restProps, 3252 children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)( 3253 Content, 3254 { 3255 className: style_default9["content-inner"], 3256 render: render4, 3257 children 3258 } 3259 ) 3260 } 3261 ); 3262 } 3263 ); 3264 3265 // packages/ui/build-module/stack/stack.mjs 3266 var import_element18 = __toESM(require_element(), 1); 3267 if (typeof document !== "undefined" && true && !document.head.querySelector("style[data-wp-hash='b51ff41489']")) { 3268 const style = document.createElement("style"); 3269 style.setAttribute("data-wp-hash", "b51ff41489"); 3270 style.appendChild(document.createTextNode("@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;@layer wp-ui-components{._19ce0419607e1896__stack{display:flex}}")); 3271 document.head.appendChild(style); 3272 } 3273 var style_default10 = { "stack": "_19ce0419607e1896__stack" }; 3274 var gapTokens = { 3275 xs: "var(--wpds-dimension-gap-xs, 4px)", 3276 sm: "var(--wpds-dimension-gap-sm, 8px)", 3277 md: "var(--wpds-dimension-gap-md, 12px)", 3278 lg: "var(--wpds-dimension-gap-lg, 16px)", 3279 xl: "var(--wpds-dimension-gap-xl, 24px)", 3280 "2xl": "var(--wpds-dimension-gap-2xl, 32px)", 3281 "3xl": "var(--wpds-dimension-gap-3xl, 40px)" 3282 }; 3283 var Stack = (0, import_element18.forwardRef)(function Stack2({ direction, gap, align, justify, wrap, render: render4, ...props }, ref) { 3284 const style = { 3285 gap: gap && gapTokens[gap], 3286 alignItems: align, 3287 justifyContent: justify, 3288 flexDirection: direction, 3289 flexWrap: wrap 3290 }; 3291 const element = useRender({ 3292 render: render4, 3293 ref, 3294 props: mergeProps(props, { style, className: style_default10.stack }) 3295 }); 3296 return element; 3297 }); 3298 3299 // packages/admin-ui/build-module/page/sidebar-toggle-slot.mjs 3300 var import_components = __toESM(require_components(), 1); 3301 var { Fill: SidebarToggleFill, Slot: SidebarToggleSlot } = (0, import_components.createSlotFill)("SidebarToggle"); 3302 3303 // packages/admin-ui/build-module/page/header.mjs 3304 var import_jsx_runtime40 = __toESM(require_jsx_runtime(), 1); 3305 function Header3({ 3306 headingLevel = 2, 3307 breadcrumbs, 3308 badges, 3309 title, 3310 subTitle, 3311 actions: actions2, 3312 showSidebarToggle = true 3313 }) { 3314 const HeadingTag = `h$headingLevel}`; 3315 return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)( 3316 Stack, 3317 { 3318 direction: "column", 3319 className: "admin-ui-page__header", 3320 render: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("header", {}), 3321 children: [ 3322 /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(Stack, { direction: "row", justify: "space-between", gap: "sm", children: [ 3323 /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(Stack, { direction: "row", gap: "sm", align: "center", justify: "start", children: [ 3324 showSidebarToggle && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)( 3325 SidebarToggleSlot, 3326 { 3327 bubblesVirtually: true, 3328 className: "admin-ui-page__sidebar-toggle-slot" 3329 } 3330 ), 3331 title && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(HeadingTag, { className: "admin-ui-page__header-title", children: title }), 3332 breadcrumbs, 3333 badges 3334 ] }), 3335 /* @__PURE__ */ (0, import_jsx_runtime40.jsx)( 3336 Stack, 3337 { 3338 direction: "row", 3339 gap: "sm", 3340 style: { width: "auto", flexShrink: 0 }, 3341 className: "admin-ui-page__header-actions", 3342 align: "center", 3343 children: actions2 3344 } 3345 ) 3346 ] }), 3347 subTitle && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: "admin-ui-page__header-subtitle", children: subTitle }) 3348 ] 3349 } 3350 ); 3351 } 3352 3353 // packages/admin-ui/build-module/page/index.mjs 3354 var import_jsx_runtime41 = __toESM(require_jsx_runtime(), 1); 3355 function Page({ 3356 headingLevel, 3357 breadcrumbs, 3358 badges, 3359 title, 3360 subTitle, 3361 children, 3362 className, 3363 actions: actions2, 3364 ariaLabel, 3365 hasPadding = false, 3366 showSidebarToggle = true 3367 }) { 3368 const classes = clsx_default("admin-ui-page", className); 3369 const effectiveAriaLabel = ariaLabel ?? (typeof title === "string" ? title : ""); 3370 return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(navigable_region_default, { className: classes, ariaLabel: effectiveAriaLabel, children: [ 3371 (title || breadcrumbs || badges || actions2) && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)( 3372 Header3, 3373 { 3374 headingLevel, 3375 breadcrumbs, 3376 badges, 3377 title, 3378 subTitle, 3379 actions: actions2, 3380 showSidebarToggle 3381 } 3382 ), 3383 hasPadding ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "admin-ui-page__content has-padding", children }) : children 3384 ] }); 3385 } 3386 Page.SidebarToggleFill = SidebarToggleFill; 3387 var page_default = Page; 3388 3389 // routes/content-guidelines/stage.tsx 3390 var import_i18n56 = __toESM(require_i18n()); 3391 var import_element92 = __toESM(require_element()); 3392 var import_components60 = __toESM(require_components()); 3393 3394 // routes/content-guidelines/style.scss 3395 if (typeof document !== "undefined" && true && !document.head.querySelector("style[data-wp-hash='2765bc6a3f']")) { 3396 const style = document.createElement("style"); 3397 style.setAttribute("data-wp-hash", "2765bc6a3f"); 3398 style.appendChild(document.createTextNode('.content-guidelines__content{border-radius:8px;margin-top:0;padding:24px}.content-guidelines__list{display:flex;flex-direction:column;gap:16px;list-style:none;margin:0;padding:0}.content-guidelines__list-item{margin:0 auto;width:min(680px,100%)}.content-guidelines__loading{align-items:center;display:flex;justify-content:center;margin-top:16px}.content-guidelines__actions{margin:16px auto 0;width:min(680px,100%)}.content-guidelines__actions-card{overflow:hidden;padding:0}.content-guidelines__actions-list{list-style:none;margin:0;padding:0}.content-guidelines__action-list-item{margin-bottom:0;position:relative}.content-guidelines__action-list-item:not(:first-child):before{background-color:#f0f0f0;content:"";height:1px;left:24px;position:absolute;right:24px;top:0}.content-guidelines__action-row{align-items:center;box-sizing:border-box;padding:16px 24px;width:100%}.content-guidelines__actions-card .content-guidelines__action-button{font-size:13px;font-weight:400;justify-content:center;min-width:100px}.content-guidelines__action-title{color:#1e1e1e}.content-guidelines__action-description{color:#757575}.content-guidelines__revision-history{display:flex;flex-direction:column;gap:16px;padding:24px}.content-guidelines__revision-history .dataviews-filters__container,.content-guidelines__revision-history .dataviews__view-actions{padding-left:8px;padding-right:8px}.content-guidelines__revision-history .dataviews-view-table td:first-child{padding-left:8px}.content-guidelines__revision-history .dataviews-view-table td{padding:16px 8px}.content-guidelines__revision-history .dataviews-view-table thead th:has(.dataviews-view-table-header-button):first-child{padding-left:0}.content-guidelines__revision-history .dataviews-view-table .dataviews-view-table__cell-content-wrapper{max-width:100%}.content-guidelines__revision-history-back{align-self:flex-start;color:#1e1e1e;font-weight:500;margin-left:-8px}.content-guidelines__error-description{margin:8px 0 0}.content-guidelines__revision-description{padding-left:8px}.content-guidelines__import-modal-actions,.content-guidelines__restore-modal-actions{margin-top:24px}')); 3399 document.head.appendChild(style); 3400 } 3401 3402 // routes/content-guidelines/components/guideline-accordion.tsx 3403 var import_components2 = __toESM(require_components()); 3404 var import_i18n = __toESM(require_i18n()); 3405 var import_element19 = __toESM(require_element()); 3406 3407 // routes/content-guidelines/components/guideline-accordion.scss 3408 if (typeof document !== "undefined" && true && !document.head.querySelector("style[data-wp-hash='db9a7907b0']")) { 3409 const style = document.createElement("style"); 3410 style.setAttribute("data-wp-hash", "db9a7907b0"); 3411 style.appendChild(document.createTextNode(".content-guidelines__accordion{padding:16px 24px}.content-guidelines__accordion-trigger{background:none;border:none;cursor:pointer;display:block;height:auto;margin:0;padding:0;text-align:left;width:100%}.content-guidelines__accordion-trigger:focus{box-shadow:none!important}.content-guidelines__accordion-trigger:focus-visible{box-shadow:0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color,#3858e9)!important}.content-guidelines__accordion-chevron-up{transform:rotate(180deg);transition:transform .3s ease-in-out}.content-guidelines__accordion-chevron-down{transform:rotate(0deg);transition:transform .3s ease-in-out}.content-guidelines__accordion-header{color:#1e1e1e;padding-top:4px}.content-guidelines__accordion-description{color:#757575;padding-bottom:4px}.content-guidelines__accordion-form{margin-top:24px}")); 3412 document.head.appendChild(style); 3413 } 3414 3415 // routes/content-guidelines/components/guideline-accordion.tsx 3416 var import_jsx_runtime42 = __toESM(require_jsx_runtime()); 3417 function GuidelineAccordion({ 3418 title, 3419 description, 3420 children, 3421 contentId, 3422 headingId, 3423 descriptionId 3424 }) { 3425 const [isOpen, setIsOpen] = (0, import_element19.useState)(false); 3426 return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_components2.Card, { className: "content-guidelines__accordion", children: [ 3427 /* @__PURE__ */ (0, import_jsx_runtime42.jsx)( 3428 import_components2.Button, 3429 { 3430 className: "content-guidelines__accordion-trigger", 3431 onClick: () => setIsOpen(!isOpen), 3432 "aria-expanded": isOpen, 3433 "aria-controls": contentId, 3434 "aria-describedby": descriptionId, 3435 "aria-label": isOpen ? (0, import_i18n.sprintf)( 3436 /* translators: %s: Guideline title */ 3437 (0, import_i18n.__)("Collapse %s guidelines"), 3438 title 3439 ) : (0, import_i18n.sprintf)( 3440 /* translators: %s: Guideline title */ 3441 (0, import_i18n.__)("Expand %s guidelines"), 3442 title 3443 ), 3444 children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_components2.__experimentalHStack, { spacing: 4, children: [ 3445 /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_components2.__experimentalVStack, { spacing: 1, children: [ 3446 /* @__PURE__ */ (0, import_jsx_runtime42.jsx)( 3447 import_components2.__experimentalHeading, 3448 { 3449 id: headingId, 3450 className: "content-guidelines__accordion-header", 3451 level: 2, 3452 size: 15, 3453 weight: 400, 3454 children: title 3455 } 3456 ), 3457 /* @__PURE__ */ (0, import_jsx_runtime42.jsx)( 3458 import_components2.__experimentalText, 3459 { 3460 id: descriptionId, 3461 className: "content-guidelines__accordion-description", 3462 size: 13, 3463 weight: 400, 3464 variant: "muted", 3465 children: description 3466 } 3467 ) 3468 ] }), 3469 /* @__PURE__ */ (0, import_jsx_runtime42.jsx)( 3470 import_components2.Icon, 3471 { 3472 icon: chevron_down_default, 3473 className: isOpen ? "content-guidelines__accordion-chevron-up" : "content-guidelines__accordion-chevron-down" 3474 } 3475 ) 3476 ] }) 3477 } 3478 ), 3479 /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { hidden: !isOpen, children }) 3480 ] }); 3481 } 3482 3483 // routes/content-guidelines/components/guideline-accordion-form.tsx 3484 var import_components54 = __toESM(require_components()); 3485 3486 // packages/dataviews/build-module/dataviews/index.mjs 3487 var import_element74 = __toESM(require_element(), 1); 3488 var import_compose12 = __toESM(require_compose(), 1); 3489 3490 // packages/dataviews/build-module/components/dataviews-context/index.mjs 3491 var import_element20 = __toESM(require_element(), 1); 3492 3493 // packages/dataviews/build-module/constants.mjs 3494 var import_i18n2 = __toESM(require_i18n(), 1); 3495 var OPERATOR_IS_ANY = "isAny"; 3496 var OPERATOR_IS_NONE = "isNone"; 3497 var OPERATOR_IS_ALL = "isAll"; 3498 var OPERATOR_IS_NOT_ALL = "isNotAll"; 3499 var OPERATOR_BETWEEN = "between"; 3500 var OPERATOR_IN_THE_PAST = "inThePast"; 3501 var OPERATOR_OVER = "over"; 3502 var OPERATOR_IS = "is"; 3503 var OPERATOR_IS_NOT = "isNot"; 3504 var OPERATOR_LESS_THAN = "lessThan"; 3505 var OPERATOR_GREATER_THAN = "greaterThan"; 3506 var OPERATOR_LESS_THAN_OR_EQUAL = "lessThanOrEqual"; 3507 var OPERATOR_GREATER_THAN_OR_EQUAL = "greaterThanOrEqual"; 3508 var OPERATOR_BEFORE = "before"; 3509 var OPERATOR_AFTER = "after"; 3510 var OPERATOR_BEFORE_INC = "beforeInc"; 3511 var OPERATOR_AFTER_INC = "afterInc"; 3512 var OPERATOR_CONTAINS = "contains"; 3513 var OPERATOR_NOT_CONTAINS = "notContains"; 3514 var OPERATOR_STARTS_WITH = "startsWith"; 3515 var OPERATOR_ON = "on"; 3516 var OPERATOR_NOT_ON = "notOn"; 3517 var SORTING_DIRECTIONS = ["asc", "desc"]; 3518 var sortArrows = { asc: "\u2191", desc: "\u2193" }; 3519 var sortValues = { asc: "ascending", desc: "descending" }; 3520 var sortLabels = { 3521 asc: (0, import_i18n2.__)("Sort ascending"), 3522 desc: (0, import_i18n2.__)("Sort descending") 3523 }; 3524 var sortIcons = { 3525 asc: arrow_up_default, 3526 desc: arrow_down_default 3527 }; 3528 var LAYOUT_TABLE = "table"; 3529 var LAYOUT_GRID = "grid"; 3530 var LAYOUT_LIST = "list"; 3531 var LAYOUT_ACTIVITY = "activity"; 3532 var LAYOUT_PICKER_GRID = "pickerGrid"; 3533 var LAYOUT_PICKER_TABLE = "pickerTable"; 3534 3535 // packages/dataviews/build-module/components/dataviews-context/index.mjs 3536 var DataViewsContext = (0, import_element20.createContext)({ 3537 view: { type: LAYOUT_TABLE }, 3538 onChangeView: () => { 3539 }, 3540 fields: [], 3541 data: [], 3542 paginationInfo: { 3543 totalItems: 0, 3544 totalPages: 0 3545 }, 3546 selection: [], 3547 onChangeSelection: () => { 3548 }, 3549 setOpenedFilter: () => { 3550 }, 3551 openedFilter: null, 3552 getItemId: (item) => item.id, 3553 isItemClickable: () => true, 3554 renderItemLink: void 0, 3555 containerWidth: 0, 3556 containerRef: (0, import_element20.createRef)(), 3557 resizeObserverRef: () => { 3558 }, 3559 defaultLayouts: { list: {}, grid: {}, table: {} }, 3560 filters: [], 3561 isShowingFilter: false, 3562 setIsShowingFilter: () => { 3563 }, 3564 hasInitiallyLoaded: false, 3565 config: { 3566 perPageSizes: [] 3567 }, 3568 intersectionObserver: null 3569 }); 3570 DataViewsContext.displayName = "DataViewsContext"; 3571 var dataviews_context_default = DataViewsContext; 3572 3573 // packages/dataviews/build-module/components/dataviews-layouts/index.mjs 3574 var import_i18n22 = __toESM(require_i18n(), 1); 3575 3576 // packages/dataviews/build-module/components/dataviews-layouts/table/index.mjs 3577 var import_i18n10 = __toESM(require_i18n(), 1); 3578 var import_components8 = __toESM(require_components(), 1); 3579 var import_element28 = __toESM(require_element(), 1); 3580 var import_keycodes = __toESM(require_keycodes(), 1); 3581 3582 // packages/dataviews/build-module/components/dataviews-selection-checkbox/index.mjs 3583 var import_components3 = __toESM(require_components(), 1); 3584 var import_i18n3 = __toESM(require_i18n(), 1); 3585 var import_jsx_runtime43 = __toESM(require_jsx_runtime(), 1); 3586 function DataViewsSelectionCheckbox({ 3587 selection, 3588 onChangeSelection, 3589 item, 3590 getItemId, 3591 titleField, 3592 disabled: disabled2, 3593 ...extraProps 3594 }) { 3595 const id = getItemId(item); 3596 const isInSelectionArray = selection.includes(id); 3597 const checked = !disabled2 && isInSelectionArray; 3598 const selectionLabel = titleField?.getValue?.({ item }) || (0, import_i18n3.__)("(no title)"); 3599 return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)( 3600 import_components3.CheckboxControl, 3601 { 3602 className: "dataviews-selection-checkbox", 3603 "aria-label": selectionLabel, 3604 "aria-disabled": disabled2, 3605 checked, 3606 onChange: () => { 3607 if (disabled2) { 3608 return; 3609 } 3610 onChangeSelection( 3611 isInSelectionArray ? selection.filter((itemId) => id !== itemId) : [...selection, id] 3612 ); 3613 }, 3614 ...extraProps 3615 } 3616 ); 3617 } 3618 3619 // packages/dataviews/build-module/components/dataviews-item-actions/index.mjs 3620 var import_components4 = __toESM(require_components(), 1); 3621 var import_i18n4 = __toESM(require_i18n(), 1); 3622 var import_element21 = __toESM(require_element(), 1); 3623 var import_data = __toESM(require_data(), 1); 3624 var import_compose = __toESM(require_compose(), 1); 3625 3626 // packages/dataviews/build-module/lock-unlock.mjs 3627 var import_private_apis = __toESM(require_private_apis(), 1); 3628 var { lock, unlock } = (0, import_private_apis.__dangerousOptInToUnstableAPIsOnlyForCoreModules)( 3629 "I acknowledge private features are not for use in themes or plugins and doing so will break in the next version of WordPress.", 3630 "@wordpress/dataviews" 3631 ); 3632 3633 // packages/dataviews/build-module/components/dataviews-item-actions/index.mjs 3634 var import_jsx_runtime44 = __toESM(require_jsx_runtime(), 1); 3635 var { Menu, kebabCase } = unlock(import_components4.privateApis); 3636 function ButtonTrigger({ 3637 action, 3638 onClick, 3639 items, 3640 variant 3641 }) { 3642 const label = typeof action.label === "string" ? action.label : action.label(items); 3643 return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)( 3644 import_components4.Button, 3645 { 3646 disabled: !!action.disabled, 3647 accessibleWhenDisabled: true, 3648 size: "compact", 3649 variant, 3650 onClick, 3651 children: label 3652 } 3653 ); 3654 } 3655 function MenuItemTrigger({ 3656 action, 3657 onClick, 3658 items 3659 }) { 3660 const label = typeof action.label === "string" ? action.label : action.label(items); 3661 return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Menu.Item, { disabled: action.disabled, onClick, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Menu.ItemLabel, { children: label }) }); 3662 } 3663 function ActionModal({ 3664 action, 3665 items, 3666 closeModal 3667 }) { 3668 const label = typeof action.label === "string" ? action.label : action.label(items); 3669 const modalHeader = typeof action.modalHeader === "function" ? action.modalHeader(items) : action.modalHeader; 3670 return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)( 3671 import_components4.Modal, 3672 { 3673 title: modalHeader || label, 3674 __experimentalHideHeader: !!action.hideModalHeader, 3675 onRequestClose: closeModal, 3676 focusOnMount: action.modalFocusOnMount ?? true, 3677 size: action.modalSize || "medium", 3678 overlayClassName: `dataviews-action-modal dataviews-action-modal__$kebabCase( 3679 action.id 3680 )}`, 3681 children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(action.RenderModal, { items, closeModal }) 3682 } 3683 ); 3684 } 3685 function ActionsMenuGroup({ 3686 actions: actions2, 3687 item, 3688 registry, 3689 setActiveModalAction 3690 }) { 3691 const { primaryActions, regularActions } = (0, import_element21.useMemo)(() => { 3692 return actions2.reduce( 3693 (acc, action) => { 3694 (action.isPrimary ? acc.primaryActions : acc.regularActions).push(action); 3695 return acc; 3696 }, 3697 { 3698 primaryActions: [], 3699 regularActions: [] 3700 } 3701 ); 3702 }, [actions2]); 3703 const renderActionGroup = (actionList) => actionList.map((action) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)( 3704 MenuItemTrigger, 3705 { 3706 action, 3707 onClick: () => { 3708 if ("RenderModal" in action) { 3709 setActiveModalAction(action); 3710 return; 3711 } 3712 action.callback([item], { registry }); 3713 }, 3714 items: [item] 3715 }, 3716 action.id 3717 )); 3718 return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(Menu.Group, { children: [ 3719 renderActionGroup(primaryActions), 3720 renderActionGroup(regularActions) 3721 ] }); 3722 } 3723 function ItemActions({ 3724 item, 3725 actions: actions2, 3726 isCompact 3727 }) { 3728 const registry = (0, import_data.useRegistry)(); 3729 const { primaryActions, eligibleActions } = (0, import_element21.useMemo)(() => { 3730 const _eligibleActions = actions2.filter( 3731 (action) => !action.isEligible || action.isEligible(item) 3732 ); 3733 const _primaryActions = _eligibleActions.filter( 3734 (action) => action.isPrimary 3735 ); 3736 return { 3737 primaryActions: _primaryActions, 3738 eligibleActions: _eligibleActions 3739 }; 3740 }, [actions2, item]); 3741 const isMobileViewport = (0, import_compose.useViewportMatch)("medium", "<"); 3742 if (isCompact) { 3743 return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)( 3744 CompactItemActions, 3745 { 3746 item, 3747 actions: eligibleActions, 3748 isSmall: true, 3749 registry 3750 } 3751 ); 3752 } 3753 return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)( 3754 Stack, 3755 { 3756 direction: "row", 3757 justify: "flex-end", 3758 className: "dataviews-item-actions", 3759 style: { 3760 flexShrink: 0, 3761 width: "auto" 3762 }, 3763 children: [ 3764 /* @__PURE__ */ (0, import_jsx_runtime44.jsx)( 3765 PrimaryActions, 3766 { 3767 item, 3768 actions: primaryActions, 3769 registry 3770 } 3771 ), 3772 (primaryActions.length < eligibleActions.length || // Since we hide primary actions on mobile, we need to show the menu 3773 // there if there are any actions at all. 3774 isMobileViewport) && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)( 3775 CompactItemActions, 3776 { 3777 item, 3778 actions: eligibleActions, 3779 registry 3780 } 3781 ) 3782 ] 3783 } 3784 ); 3785 } 3786 function CompactItemActions({ 3787 item, 3788 actions: actions2, 3789 isSmall, 3790 registry 3791 }) { 3792 const [activeModalAction, setActiveModalAction] = (0, import_element21.useState)( 3793 null 3794 ); 3795 return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_jsx_runtime44.Fragment, { children: [ 3796 /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(Menu, { placement: "bottom-end", children: [ 3797 /* @__PURE__ */ (0, import_jsx_runtime44.jsx)( 3798 Menu.TriggerButton, 3799 { 3800 render: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)( 3801 import_components4.Button, 3802 { 3803 size: isSmall ? "small" : "compact", 3804 icon: more_vertical_default, 3805 label: (0, import_i18n4.__)("Actions"), 3806 accessibleWhenDisabled: true, 3807 disabled: !actions2.length, 3808 className: "dataviews-all-actions-button" 3809 } 3810 ) 3811 } 3812 ), 3813 /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Menu.Popover, { children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)( 3814 ActionsMenuGroup, 3815 { 3816 actions: actions2, 3817 item, 3818 registry, 3819 setActiveModalAction 3820 } 3821 ) }) 3822 ] }), 3823 !!activeModalAction && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)( 3824 ActionModal, 3825 { 3826 action: activeModalAction, 3827 items: [item], 3828 closeModal: () => setActiveModalAction(null) 3829 } 3830 ) 3831 ] }); 3832 } 3833 function PrimaryActions({ 3834 item, 3835 actions: actions2, 3836 registry, 3837 buttonVariant 3838 }) { 3839 const [activeModalAction, setActiveModalAction] = (0, import_element21.useState)(null); 3840 const isMobileViewport = (0, import_compose.useViewportMatch)("medium", "<"); 3841 if (isMobileViewport) { 3842 return null; 3843 } 3844 if (!Array.isArray(actions2) || actions2.length === 0) { 3845 return null; 3846 } 3847 return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_jsx_runtime44.Fragment, { children: [ 3848 actions2.map((action) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)( 3849 ButtonTrigger, 3850 { 3851 action, 3852 onClick: () => { 3853 if ("RenderModal" in action) { 3854 setActiveModalAction(action); 3855 return; 3856 } 3857 action.callback([item], { registry }); 3858 }, 3859 items: [item], 3860 variant: buttonVariant 3861 }, 3862 action.id 3863 )), 3864 !!activeModalAction && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)( 3865 ActionModal, 3866 { 3867 action: activeModalAction, 3868 items: [item], 3869 closeModal: () => setActiveModalAction(null) 3870 } 3871 ) 3872 ] }); 3873 } 3874 3875 // packages/dataviews/build-module/components/dataviews-bulk-actions/index.mjs 3876 var import_components5 = __toESM(require_components(), 1); 3877 var import_i18n6 = __toESM(require_i18n(), 1); 3878 var import_element22 = __toESM(require_element(), 1); 3879 var import_data2 = __toESM(require_data(), 1); 3880 var import_compose2 = __toESM(require_compose(), 1); 3881 3882 // packages/dataviews/build-module/utils/get-footer-message.mjs 3883 var import_i18n5 = __toESM(require_i18n(), 1); 3884 function getFooterMessage(selectionCount, itemsCount, totalItems, onlyTotalCount = false) { 3885 if (selectionCount > 0) { 3886 return (0, import_i18n5.sprintf)( 3887 /* translators: %d: number of items. */ 3888 (0, import_i18n5._n)("%d Item selected", "%d Items selected", selectionCount), 3889 selectionCount 3890 ); 3891 } 3892 if (onlyTotalCount || totalItems <= itemsCount) { 3893 return (0, import_i18n5.sprintf)( 3894 /* translators: %d: number of items. */ 3895 (0, import_i18n5._n)("%d Item", "%d Items", totalItems), 3896 totalItems 3897 ); 3898 } 3899 return (0, import_i18n5.sprintf)( 3900 /* translators: %1$d: number of items. %2$d: total number of items. */ 3901 (0, import_i18n5._n)("%1$d of %2$d Item", "%1$d of %2$d Items", totalItems), 3902 itemsCount, 3903 totalItems 3904 ); 3905 } 3906 3907 // packages/dataviews/build-module/components/dataviews-bulk-actions/index.mjs 3908 var import_jsx_runtime45 = __toESM(require_jsx_runtime(), 1); 3909 function ActionWithModal({ 3910 action, 3911 items, 3912 ActionTriggerComponent 3913 }) { 3914 const [isModalOpen, setIsModalOpen] = (0, import_element22.useState)(false); 3915 const actionTriggerProps = { 3916 action, 3917 onClick: () => { 3918 setIsModalOpen(true); 3919 }, 3920 items 3921 }; 3922 return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_jsx_runtime45.Fragment, { children: [ 3923 /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(ActionTriggerComponent, { ...actionTriggerProps }), 3924 isModalOpen && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)( 3925 ActionModal, 3926 { 3927 action, 3928 items, 3929 closeModal: () => setIsModalOpen(false) 3930 } 3931 ) 3932 ] }); 3933 } 3934 function useHasAPossibleBulkAction(actions2, item) { 3935 return (0, import_element22.useMemo)(() => { 3936 return actions2.some((action) => { 3937 return action.supportsBulk && (!action.isEligible || action.isEligible(item)); 3938 }); 3939 }, [actions2, item]); 3940 } 3941 function useSomeItemHasAPossibleBulkAction(actions2, data) { 3942 return (0, import_element22.useMemo)(() => { 3943 return data.some((item) => { 3944 return actions2.some((action) => { 3945 return action.supportsBulk && (!action.isEligible || action.isEligible(item)); 3946 }); 3947 }); 3948 }, [actions2, data]); 3949 } 3950 function BulkSelectionCheckbox({ 3951 selection, 3952 onChangeSelection, 3953 data, 3954 actions: actions2, 3955 getItemId, 3956 disableSelectAll = false 3957 }) { 3958 const selectableItems = (0, import_element22.useMemo)(() => { 3959 return data.filter((item) => { 3960 return actions2.some( 3961 (action) => action.supportsBulk && (!action.isEligible || action.isEligible(item)) 3962 ); 3963 }); 3964 }, [data, actions2]); 3965 const selectedItems = data.filter( 3966 (item) => selection.includes(getItemId(item)) && selectableItems.includes(item) 3967 ); 3968 const hasSelection = selection.length > 0; 3969 const areAllSelected = selectedItems.length === selectableItems.length; 3970 if (disableSelectAll) { 3971 return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)( 3972 import_components5.CheckboxControl, 3973 { 3974 className: "dataviews-view-table-selection-checkbox", 3975 checked: hasSelection, 3976 disabled: !hasSelection, 3977 onChange: () => { 3978 onChangeSelection([]); 3979 }, 3980 "aria-label": (0, import_i18n6.__)("Deselect all") 3981 } 3982 ); 3983 } 3984 return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)( 3985 import_components5.CheckboxControl, 3986 { 3987 className: "dataviews-view-table-selection-checkbox", 3988 checked: areAllSelected, 3989 indeterminate: !areAllSelected && !!selectedItems.length, 3990 onChange: () => { 3991 if (areAllSelected) { 3992 onChangeSelection([]); 3993 } else { 3994 onChangeSelection( 3995 selectableItems.map((item) => getItemId(item)) 3996 ); 3997 } 3998 }, 3999 "aria-label": areAllSelected ? (0, import_i18n6.__)("Deselect all") : (0, import_i18n6.__)("Select all") 4000 } 4001 ); 4002 } 4003 function ActionTrigger({ 4004 action, 4005 onClick, 4006 isBusy, 4007 items 4008 }) { 4009 const label = typeof action.label === "string" ? action.label : action.label(items); 4010 const isMobile = (0, import_compose2.useViewportMatch)("medium", "<"); 4011 if (isMobile) { 4012 return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)( 4013 import_components5.Button, 4014 { 4015 disabled: isBusy, 4016 accessibleWhenDisabled: true, 4017 label, 4018 icon: action.icon, 4019 size: "compact", 4020 onClick, 4021 isBusy 4022 } 4023 ); 4024 } 4025 return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)( 4026 import_components5.Button, 4027 { 4028 disabled: isBusy, 4029 accessibleWhenDisabled: true, 4030 size: "compact", 4031 onClick, 4032 isBusy, 4033 children: label 4034 } 4035 ); 4036 } 4037 var EMPTY_ARRAY2 = []; 4038 function ActionButton({ 4039 action, 4040 selectedItems, 4041 actionInProgress, 4042 setActionInProgress 4043 }) { 4044 const registry = (0, import_data2.useRegistry)(); 4045 const selectedEligibleItems = (0, import_element22.useMemo)(() => { 4046 return selectedItems.filter((item) => { 4047 return !action.isEligible || action.isEligible(item); 4048 }); 4049 }, [action, selectedItems]); 4050 if ("RenderModal" in action) { 4051 return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)( 4052 ActionWithModal, 4053 { 4054 action, 4055 items: selectedEligibleItems, 4056 ActionTriggerComponent: ActionTrigger 4057 }, 4058 action.id 4059 ); 4060 } 4061 return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)( 4062 ActionTrigger, 4063 { 4064 action, 4065 onClick: async () => { 4066 setActionInProgress(action.id); 4067 await action.callback(selectedItems, { 4068 registry 4069 }); 4070 setActionInProgress(null); 4071 }, 4072 items: selectedEligibleItems, 4073 isBusy: actionInProgress === action.id 4074 }, 4075 action.id 4076 ); 4077 } 4078 function renderFooterContent(data, actions2, getItemId, isInfiniteScroll, selection, actionsToShow, selectedItems, actionInProgress, setActionInProgress, onChangeSelection, paginationInfo) { 4079 const message2 = getFooterMessage( 4080 selection.length, 4081 data.length, 4082 paginationInfo.totalItems, 4083 isInfiniteScroll 4084 ); 4085 return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)( 4086 Stack, 4087 { 4088 direction: "row", 4089 className: "dataviews-bulk-actions-footer__container", 4090 gap: "md", 4091 align: "center", 4092 children: [ 4093 /* @__PURE__ */ (0, import_jsx_runtime45.jsx)( 4094 BulkSelectionCheckbox, 4095 { 4096 selection, 4097 onChangeSelection, 4098 data, 4099 actions: actions2, 4100 getItemId, 4101 disableSelectAll: isInfiniteScroll 4102 } 4103 ), 4104 /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "dataviews-bulk-actions-footer__item-count", children: message2 }), 4105 /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)( 4106 Stack, 4107 { 4108 direction: "row", 4109 className: "dataviews-bulk-actions-footer__action-buttons", 4110 gap: "xs", 4111 children: [ 4112 actionsToShow.map((action) => { 4113 return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)( 4114 ActionButton, 4115 { 4116 action, 4117 selectedItems, 4118 actionInProgress, 4119 setActionInProgress 4120 }, 4121 action.id 4122 ); 4123 }), 4124 selectedItems.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)( 4125 import_components5.Button, 4126 { 4127 icon: close_small_default, 4128 showTooltip: true, 4129 tooltipPosition: "top", 4130 size: "compact", 4131 label: (0, import_i18n6.__)("Cancel"), 4132 disabled: !!actionInProgress, 4133 accessibleWhenDisabled: false, 4134 onClick: () => { 4135 onChangeSelection(EMPTY_ARRAY2); 4136 } 4137 } 4138 ) 4139 ] 4140 } 4141 ) 4142 ] 4143 } 4144 ); 4145 } 4146 function FooterContent({ 4147 selection, 4148 actions: actions2, 4149 onChangeSelection, 4150 data, 4151 getItemId, 4152 isInfiniteScroll, 4153 paginationInfo 4154 }) { 4155 const [actionInProgress, setActionInProgress] = (0, import_element22.useState)( 4156 null 4157 ); 4158 const footerContentRef = (0, import_element22.useRef)(void 0); 4159 const isMobile = (0, import_compose2.useViewportMatch)("medium", "<"); 4160 const bulkActions = (0, import_element22.useMemo)( 4161 () => actions2.filter((action) => action.supportsBulk), 4162 [actions2] 4163 ); 4164 const selectableItems = (0, import_element22.useMemo)(() => { 4165 return data.filter((item) => { 4166 return bulkActions.some( 4167 (action) => !action.isEligible || action.isEligible(item) 4168 ); 4169 }); 4170 }, [data, bulkActions]); 4171 const selectedItems = (0, import_element22.useMemo)(() => { 4172 return data.filter( 4173 (item) => selection.includes(getItemId(item)) && selectableItems.includes(item) 4174 ); 4175 }, [selection, data, getItemId, selectableItems]); 4176 const actionsToShow = (0, import_element22.useMemo)( 4177 () => actions2.filter((action) => { 4178 return action.supportsBulk && (!isMobile || action.icon) && selectedItems.some( 4179 (item) => !action.isEligible || action.isEligible(item) 4180 ); 4181 }), 4182 [actions2, selectedItems, isMobile] 4183 ); 4184 if (!actionInProgress) { 4185 if (footerContentRef.current) { 4186 footerContentRef.current = void 0; 4187 } 4188 return renderFooterContent( 4189 data, 4190 actions2, 4191 getItemId, 4192 isInfiniteScroll, 4193 selection, 4194 actionsToShow, 4195 selectedItems, 4196 actionInProgress, 4197 setActionInProgress, 4198 onChangeSelection, 4199 paginationInfo 4200 ); 4201 } else if (!footerContentRef.current) { 4202 footerContentRef.current = renderFooterContent( 4203 data, 4204 actions2, 4205 getItemId, 4206 isInfiniteScroll, 4207 selection, 4208 actionsToShow, 4209 selectedItems, 4210 actionInProgress, 4211 setActionInProgress, 4212 onChangeSelection, 4213 paginationInfo 4214 ); 4215 } 4216 return footerContentRef.current; 4217 } 4218 function BulkActionsFooter() { 4219 const { 4220 data, 4221 selection, 4222 actions: actions2 = EMPTY_ARRAY2, 4223 onChangeSelection, 4224 getItemId, 4225 paginationInfo, 4226 view 4227 } = (0, import_element22.useContext)(dataviews_context_default); 4228 return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)( 4229 FooterContent, 4230 { 4231 selection, 4232 onChangeSelection, 4233 data, 4234 actions: actions2, 4235 getItemId, 4236 isInfiniteScroll: !!view.infiniteScrollEnabled, 4237 paginationInfo 4238 } 4239 ); 4240 } 4241 4242 // packages/dataviews/build-module/components/dataviews-layouts/table/column-header-menu.mjs 4243 var import_i18n7 = __toESM(require_i18n(), 1); 4244 var import_components6 = __toESM(require_components(), 1); 4245 var import_element23 = __toESM(require_element(), 1); 4246 4247 // packages/dataviews/build-module/utils/get-hideable-fields.mjs 4248 function getHideableFields(view, fields2) { 4249 const togglableFields = [ 4250 view?.titleField, 4251 view?.mediaField, 4252 view?.descriptionField 4253 ].filter(Boolean); 4254 return fields2.filter( 4255 (f2) => !togglableFields.includes(f2.id) && f2.type !== "media" && f2.enableHiding !== false 4256 ); 4257 } 4258 4259 // packages/dataviews/build-module/components/dataviews-layouts/table/column-header-menu.mjs 4260 var import_jsx_runtime46 = __toESM(require_jsx_runtime(), 1); 4261 var { Menu: Menu2 } = unlock(import_components6.privateApis); 4262 function WithMenuSeparators({ children }) { 4263 return import_element23.Children.toArray(children).filter(Boolean).map((child, i2) => /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_element23.Fragment, { children: [ 4264 i2 > 0 && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Menu2.Separator, {}), 4265 child 4266 ] }, i2)); 4267 } 4268 var _HeaderMenu = (0, import_element23.forwardRef)(function HeaderMenu({ 4269 fieldId, 4270 view, 4271 fields: fields2, 4272 onChangeView, 4273 onHide, 4274 setOpenedFilter, 4275 canMove = true, 4276 canInsertLeft = true, 4277 canInsertRight = true 4278 }, ref) { 4279 const visibleFieldIds = view.fields ?? []; 4280 const index = visibleFieldIds?.indexOf(fieldId); 4281 const isSorted = view.sort?.field === fieldId; 4282 let isHidable = false; 4283 let isSortable = false; 4284 let canAddFilter = false; 4285 let operators = []; 4286 const field = fields2.find((f2) => f2.id === fieldId); 4287 const { setIsShowingFilter } = (0, import_element23.useContext)(dataviews_context_default); 4288 if (!field) { 4289 return null; 4290 } 4291 isHidable = field.enableHiding !== false; 4292 isSortable = field.enableSorting !== false; 4293 const header = field.header; 4294 operators = !!field.filterBy && field.filterBy?.operators || []; 4295 canAddFilter = !view.filters?.some((_filter) => fieldId === _filter.field) && !!(field.hasElements || field.Edit) && field.filterBy !== false && !field.filterBy?.isPrimary; 4296 if (!isSortable && !canMove && !isHidable && !canAddFilter) { 4297 return header; 4298 } 4299 const hiddenFields = getHideableFields(view, fields2).filter( 4300 (f2) => !visibleFieldIds.includes(f2.id) 4301 ); 4302 const canInsert = (canInsertLeft || canInsertRight) && !!hiddenFields.length; 4303 const isRtl = (0, import_i18n7.isRTL)(); 4304 return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(Menu2, { children: [ 4305 /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)( 4306 Menu2.TriggerButton, 4307 { 4308 render: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)( 4309 import_components6.Button, 4310 { 4311 size: "compact", 4312 className: "dataviews-view-table-header-button", 4313 ref, 4314 variant: "tertiary" 4315 } 4316 ), 4317 children: [ 4318 header, 4319 view.sort && isSorted && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { "aria-hidden": "true", children: sortArrows[view.sort.direction] }) 4320 ] 4321 } 4322 ), 4323 /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Menu2.Popover, { style: { minWidth: "240px" }, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(WithMenuSeparators, { children: [ 4324 isSortable && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Menu2.Group, { children: SORTING_DIRECTIONS.map( 4325 (direction) => { 4326 const isChecked = view.sort && isSorted && view.sort.direction === direction; 4327 const value = `$fieldId}-$direction}`; 4328 return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)( 4329 Menu2.RadioItem, 4330 { 4331 name: "view-table-sorting", 4332 value, 4333 checked: isChecked, 4334 onChange: () => { 4335 onChangeView({ 4336 ...view, 4337 sort: { 4338 field: fieldId, 4339 direction 4340 }, 4341 showLevels: false 4342 }); 4343 }, 4344 children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Menu2.ItemLabel, { children: sortLabels[direction] }) 4345 }, 4346 value 4347 ); 4348 } 4349 ) }), 4350 canAddFilter && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Menu2.Group, { children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)( 4351 Menu2.Item, 4352 { 4353 prefix: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_components6.Icon, { icon: funnel_default }), 4354 onClick: () => { 4355 setOpenedFilter(fieldId); 4356 setIsShowingFilter(true); 4357 onChangeView({ 4358 ...view, 4359 page: 1, 4360 filters: [ 4361 ...view.filters || [], 4362 { 4363 field: fieldId, 4364 value: void 0, 4365 operator: operators[0] 4366 } 4367 ] 4368 }); 4369 }, 4370 children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Menu2.ItemLabel, { children: (0, import_i18n7.__)("Add filter") }) 4371 } 4372 ) }), 4373 (canMove || isHidable || canInsert) && field && /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(Menu2.Group, { children: [ 4374 canMove && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)( 4375 Menu2.Item, 4376 { 4377 prefix: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_components6.Icon, { icon: arrow_left_default }), 4378 disabled: isRtl ? index >= visibleFieldIds.length - 1 : index < 1, 4379 onClick: () => { 4380 const targetIndex = isRtl ? index + 1 : index - 1; 4381 const newFields = [ 4382 ...visibleFieldIds 4383 ]; 4384 newFields.splice(index, 1); 4385 newFields.splice( 4386 targetIndex, 4387 0, 4388 fieldId 4389 ); 4390 onChangeView({ 4391 ...view, 4392 fields: newFields 4393 }); 4394 }, 4395 children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Menu2.ItemLabel, { children: (0, import_i18n7.__)("Move left") }) 4396 } 4397 ), 4398 canMove && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)( 4399 Menu2.Item, 4400 { 4401 prefix: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_components6.Icon, { icon: arrow_right_default }), 4402 disabled: isRtl ? index < 1 : index >= visibleFieldIds.length - 1, 4403 onClick: () => { 4404 const targetIndex = isRtl ? index - 1 : index + 1; 4405 const newFields = [ 4406 ...visibleFieldIds 4407 ]; 4408 newFields.splice(index, 1); 4409 newFields.splice( 4410 targetIndex, 4411 0, 4412 fieldId 4413 ); 4414 onChangeView({ 4415 ...view, 4416 fields: newFields 4417 }); 4418 }, 4419 children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Menu2.ItemLabel, { children: (0, import_i18n7.__)("Move right") }) 4420 } 4421 ), 4422 canInsertLeft && !!hiddenFields.length && /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(Menu2, { children: [ 4423 /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Menu2.SubmenuTriggerItem, { children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Menu2.ItemLabel, { children: (0, import_i18n7.__)("Insert left") }) }), 4424 /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Menu2.Popover, { children: hiddenFields.map((hiddenField) => { 4425 const insertIndex = isRtl ? index + 1 : index; 4426 return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)( 4427 Menu2.Item, 4428 { 4429 onClick: () => { 4430 onChangeView({ 4431 ...view, 4432 fields: [ 4433 ...visibleFieldIds.slice( 4434 0, 4435 insertIndex 4436 ), 4437 hiddenField.id, 4438 ...visibleFieldIds.slice( 4439 insertIndex 4440 ) 4441 ] 4442 }); 4443 }, 4444 children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Menu2.ItemLabel, { children: hiddenField.label }) 4445 }, 4446 hiddenField.id 4447 ); 4448 }) }) 4449 ] }), 4450 canInsertRight && !!hiddenFields.length && /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(Menu2, { children: [ 4451 /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Menu2.SubmenuTriggerItem, { children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Menu2.ItemLabel, { children: (0, import_i18n7.__)("Insert right") }) }), 4452 /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Menu2.Popover, { children: hiddenFields.map((hiddenField) => { 4453 const insertIndex = isRtl ? index : index + 1; 4454 return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)( 4455 Menu2.Item, 4456 { 4457 onClick: () => { 4458 onChangeView({ 4459 ...view, 4460 fields: [ 4461 ...visibleFieldIds.slice( 4462 0, 4463 insertIndex 4464 ), 4465 hiddenField.id, 4466 ...visibleFieldIds.slice( 4467 insertIndex 4468 ) 4469 ] 4470 }); 4471 }, 4472 children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Menu2.ItemLabel, { children: hiddenField.label }) 4473 }, 4474 hiddenField.id 4475 ); 4476 }) }) 4477 ] }), 4478 isHidable && field && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)( 4479 Menu2.Item, 4480 { 4481 prefix: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_components6.Icon, { icon: unseen_default }), 4482 onClick: () => { 4483 onHide(field); 4484 onChangeView({ 4485 ...view, 4486 fields: visibleFieldIds.filter( 4487 (id) => id !== fieldId 4488 ) 4489 }); 4490 }, 4491 children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Menu2.ItemLabel, { children: (0, import_i18n7.__)("Hide column") }) 4492 } 4493 ) 4494 ] }) 4495 ] }) }) 4496 ] }); 4497 }); 4498 var ColumnHeaderMenu = _HeaderMenu; 4499 var column_header_menu_default = ColumnHeaderMenu; 4500 4501 // packages/dataviews/build-module/components/dataviews-layouts/utils/item-click-wrapper.mjs 4502 var import_element24 = __toESM(require_element(), 1); 4503 var import_jsx_runtime47 = __toESM(require_jsx_runtime(), 1); 4504 function getClickableItemProps({ 4505 item, 4506 isItemClickable, 4507 onClickItem, 4508 className 4509 }) { 4510 if (!isItemClickable(item) || !onClickItem) { 4511 return { className }; 4512 } 4513 return { 4514 className: className ? `$className} $className}--clickable` : void 0, 4515 role: "button", 4516 tabIndex: 0, 4517 onClick: (event) => { 4518 event.stopPropagation(); 4519 onClickItem(item); 4520 }, 4521 onKeyDown: (event) => { 4522 if (event.key === "Enter" || event.key === "" || event.key === " ") { 4523 event.stopPropagation(); 4524 onClickItem(item); 4525 } 4526 } 4527 }; 4528 } 4529 function ItemClickWrapper({ 4530 item, 4531 isItemClickable, 4532 onClickItem, 4533 renderItemLink, 4534 className, 4535 children, 4536 ...extraProps 4537 }) { 4538 if (!isItemClickable(item)) { 4539 return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className, ...extraProps, children }); 4540 } 4541 if (renderItemLink) { 4542 const renderedElement = renderItemLink({ 4543 item, 4544 className: `$className} $className}--clickable`, 4545 ...extraProps, 4546 children 4547 }); 4548 return (0, import_element24.cloneElement)(renderedElement, { 4549 onClick: (event) => { 4550 event.stopPropagation(); 4551 if (renderedElement.props.onClick) { 4552 renderedElement.props.onClick(event); 4553 } 4554 }, 4555 onKeyDown: (event) => { 4556 if (event.key === "Enter" || event.key === "" || event.key === " ") { 4557 event.stopPropagation(); 4558 if (renderedElement.props.onKeyDown) { 4559 renderedElement.props.onKeyDown(event); 4560 } 4561 } 4562 } 4563 }); 4564 } 4565 const clickProps = getClickableItemProps({ 4566 item, 4567 isItemClickable, 4568 onClickItem, 4569 className 4570 }); 4571 return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { ...clickProps, ...extraProps, children }); 4572 } 4573 4574 // packages/dataviews/build-module/components/dataviews-layouts/table/column-primary.mjs 4575 var import_jsx_runtime48 = __toESM(require_jsx_runtime(), 1); 4576 function ColumnPrimary({ 4577 item, 4578 level, 4579 titleField, 4580 mediaField, 4581 descriptionField, 4582 onClickItem, 4583 renderItemLink, 4584 isItemClickable 4585 }) { 4586 return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(Stack, { direction: "row", gap: "md", align: "flex-start", justify: "flex-start", children: [ 4587 mediaField && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)( 4588 ItemClickWrapper, 4589 { 4590 item, 4591 isItemClickable, 4592 onClickItem, 4593 renderItemLink, 4594 className: "dataviews-view-table__cell-content-wrapper dataviews-column-primary__media", 4595 "aria-label": isItemClickable(item) && (!!onClickItem || !!renderItemLink) && !!titleField ? titleField.getValue?.({ item }) : void 0, 4596 children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)( 4597 mediaField.render, 4598 { 4599 item, 4600 field: mediaField, 4601 config: { sizes: "32px" } 4602 } 4603 ) 4604 } 4605 ), 4606 /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)( 4607 Stack, 4608 { 4609 direction: "column", 4610 align: "flex-start", 4611 className: "dataviews-view-table__primary-column-content", 4612 children: [ 4613 titleField && /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)( 4614 ItemClickWrapper, 4615 { 4616 item, 4617 isItemClickable, 4618 onClickItem, 4619 renderItemLink, 4620 className: "dataviews-view-table__cell-content-wrapper dataviews-title-field", 4621 children: [ 4622 level !== void 0 && level > 0 && /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("span", { className: "dataviews-view-table__level", children: [ 4623 Array(level).fill("\u2014").join(" "), 4624 "\xA0" 4625 ] }), 4626 /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(titleField.render, { item, field: titleField }) 4627 ] 4628 } 4629 ), 4630 descriptionField && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)( 4631 descriptionField.render, 4632 { 4633 item, 4634 field: descriptionField 4635 } 4636 ) 4637 ] 4638 } 4639 ) 4640 ] }); 4641 } 4642 var column_primary_default = ColumnPrimary; 4643 4644 // packages/dataviews/build-module/components/dataviews-layouts/table/use-scroll-state.mjs 4645 var import_element25 = __toESM(require_element(), 1); 4646 var import_i18n8 = __toESM(require_i18n(), 1); 4647 var isScrolledToEnd = (element) => { 4648 if ((0, import_i18n8.isRTL)()) { 4649 const scrollLeft = Math.abs(element.scrollLeft); 4650 return scrollLeft <= 1; 4651 } 4652 return element.scrollLeft + element.clientWidth >= element.scrollWidth - 1; 4653 }; 4654 function useScrollState({ 4655 scrollContainerRef, 4656 enabledHorizontal = false 4657 }) { 4658 const [isHorizontalScrollEnd, setIsHorizontalScrollEnd] = (0, import_element25.useState)(false); 4659 const [isVerticallyScrolled, setIsVerticallyScrolled] = (0, import_element25.useState)(false); 4660 const handleScroll = (0, import_element25.useCallback)(() => { 4661 const scrollContainer = scrollContainerRef.current; 4662 if (!scrollContainer) { 4663 return; 4664 } 4665 if (enabledHorizontal) { 4666 setIsHorizontalScrollEnd(isScrolledToEnd(scrollContainer)); 4667 } 4668 setIsVerticallyScrolled(scrollContainer.scrollTop > 0); 4669 }, [scrollContainerRef, enabledHorizontal]); 4670 (0, import_element25.useEffect)(() => { 4671 if (typeof window === "undefined" || !scrollContainerRef.current) { 4672 return () => { 4673 }; 4674 } 4675 const scrollContainer = scrollContainerRef.current; 4676 handleScroll(); 4677 scrollContainer.addEventListener("scroll", handleScroll); 4678 window.addEventListener("resize", handleScroll); 4679 return () => { 4680 scrollContainer.removeEventListener("scroll", handleScroll); 4681 window.removeEventListener("resize", handleScroll); 4682 }; 4683 }, [scrollContainerRef, enabledHorizontal, handleScroll]); 4684 return { isHorizontalScrollEnd, isVerticallyScrolled }; 4685 } 4686 4687 // packages/dataviews/build-module/components/dataviews-layouts/utils/get-data-by-group.mjs 4688 function getDataByGroup(data, groupByField) { 4689 return data.reduce((groups, item) => { 4690 const groupName = groupByField.getValue({ item }); 4691 if (!groups.has(groupName)) { 4692 groups.set(groupName, []); 4693 } 4694 groups.get(groupName)?.push(item); 4695 return groups; 4696 }, /* @__PURE__ */ new Map()); 4697 } 4698 4699 // packages/dataviews/build-module/components/dataviews-view-config/properties-section.mjs 4700 var import_components7 = __toESM(require_components(), 1); 4701 var import_i18n9 = __toESM(require_i18n(), 1); 4702 var import_element26 = __toESM(require_element(), 1); 4703 var import_jsx_runtime49 = __toESM(require_jsx_runtime(), 1); 4704 function FieldItem({ 4705 field, 4706 isVisible: isVisible2, 4707 onToggleVisibility 4708 }) { 4709 return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_components7.__experimentalItem, { onClick: field.enableHiding ? onToggleVisibility : void 0, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(Stack, { direction: "row", gap: "sm", justify: "flex-start", align: "center", children: [ 4710 /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { style: { height: 24, width: 24 }, children: isVisible2 && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_components7.Icon, { icon: check_default }) }), 4711 /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "dataviews-view-config__label", children: field.label }) 4712 ] }) }); 4713 } 4714 function isDefined(item) { 4715 return !!item; 4716 } 4717 function PropertiesSection({ 4718 showLabel = true 4719 }) { 4720 const { view, fields: fields2, onChangeView } = (0, import_element26.useContext)(dataviews_context_default); 4721 const regularFields = getHideableFields(view, fields2); 4722 if (!regularFields?.length) { 4723 return null; 4724 } 4725 const titleField = fields2.find((f2) => f2.id === view.titleField); 4726 const previewField = fields2.find((f2) => f2.id === view.mediaField); 4727 const descriptionField = fields2.find( 4728 (f2) => f2.id === view.descriptionField 4729 ); 4730 const lockedFields = [ 4731 { 4732 field: titleField, 4733 isVisibleFlag: "showTitle" 4734 }, 4735 { 4736 field: previewField, 4737 isVisibleFlag: "showMedia" 4738 }, 4739 { 4740 field: descriptionField, 4741 isVisibleFlag: "showDescription" 4742 } 4743 ].filter(({ field }) => isDefined(field)); 4744 const visibleFieldIds = view.fields ?? []; 4745 const visibleRegularFieldsCount = regularFields.filter( 4746 (f2) => visibleFieldIds.includes(f2.id) 4747 ).length; 4748 const visibleLockedFields = lockedFields.filter( 4749 ({ isVisibleFlag }) => ( 4750 // @ts-expect-error 4751 view[isVisibleFlag] ?? true 4752 ) 4753 ); 4754 const totalVisibleFields = visibleLockedFields.length + visibleRegularFieldsCount; 4755 const isSingleVisibleLockedField = totalVisibleFields === 1 && visibleLockedFields.length === 1; 4756 return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(Stack, { direction: "column", className: "dataviews-field-control", children: [ 4757 showLabel && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_components7.BaseControl.VisualLabel, { children: (0, import_i18n9.__)("Properties") }), 4758 /* @__PURE__ */ (0, import_jsx_runtime49.jsx)( 4759 Stack, 4760 { 4761 direction: "column", 4762 className: "dataviews-view-config__properties", 4763 children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_components7.__experimentalItemGroup, { isBordered: true, isSeparated: true, size: "medium", children: [ 4764 lockedFields.map(({ field, isVisibleFlag }) => { 4765 const isVisible2 = view[isVisibleFlag] ?? true; 4766 const fieldToRender = isSingleVisibleLockedField && isVisible2 ? { ...field, enableHiding: false } : field; 4767 return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)( 4768 FieldItem, 4769 { 4770 field: fieldToRender, 4771 isVisible: isVisible2, 4772 onToggleVisibility: () => { 4773 onChangeView({ 4774 ...view, 4775 [isVisibleFlag]: !isVisible2 4776 }); 4777 } 4778 }, 4779 field.id 4780 ); 4781 }), 4782 regularFields.map((field) => { 4783 const isVisible2 = visibleFieldIds.includes(field.id); 4784 const fieldToRender = totalVisibleFields === 1 && isVisible2 ? { ...field, enableHiding: false } : field; 4785 return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)( 4786 FieldItem, 4787 { 4788 field: fieldToRender, 4789 isVisible: isVisible2, 4790 onToggleVisibility: () => { 4791 onChangeView({ 4792 ...view, 4793 fields: isVisible2 ? visibleFieldIds.filter( 4794 (fieldId) => fieldId !== field.id 4795 ) : [...visibleFieldIds, field.id] 4796 }); 4797 } 4798 }, 4799 field.id 4800 ); 4801 }) 4802 ] }) 4803 } 4804 ) 4805 ] }); 4806 } 4807 4808 // packages/dataviews/build-module/hooks/use-delayed-loading.mjs 4809 var import_element27 = __toESM(require_element(), 1); 4810 function useDelayedLoading(isLoading, options = { delay: 400 }) { 4811 const [showLoader, setShowLoader] = (0, import_element27.useState)(false); 4812 (0, import_element27.useEffect)(() => { 4813 if (!isLoading) { 4814 return; 4815 } 4816 const timeout = setTimeout(() => { 4817 setShowLoader(true); 4818 }, options.delay); 4819 return () => { 4820 clearTimeout(timeout); 4821 setShowLoader(false); 4822 }; 4823 }, [isLoading, options.delay]); 4824 return showLoader; 4825 } 4826 4827 // packages/dataviews/build-module/components/dataviews-layouts/table/index.mjs 4828 var import_jsx_runtime50 = __toESM(require_jsx_runtime(), 1); 4829 function getEffectiveAlign(explicitAlign, fieldType) { 4830 if (explicitAlign) { 4831 return explicitAlign; 4832 } 4833 if (fieldType === "integer" || fieldType === "number") { 4834 return "end"; 4835 } 4836 return void 0; 4837 } 4838 function TableColumnField({ 4839 item, 4840 fields: fields2, 4841 column, 4842 align 4843 }) { 4844 const field = fields2.find((f2) => f2.id === column); 4845 if (!field) { 4846 return null; 4847 } 4848 const className = clsx_default("dataviews-view-table__cell-content-wrapper", { 4849 "dataviews-view-table__cell-align-end": align === "end", 4850 "dataviews-view-table__cell-align-center": align === "center" 4851 }); 4852 return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(field.render, { item, field }) }); 4853 } 4854 function TableRow({ 4855 hasBulkActions, 4856 item, 4857 level, 4858 actions: actions2, 4859 fields: fields2, 4860 id, 4861 view, 4862 titleField, 4863 mediaField, 4864 descriptionField, 4865 selection, 4866 getItemId, 4867 isItemClickable, 4868 onClickItem, 4869 renderItemLink, 4870 onChangeSelection, 4871 isActionsColumnSticky, 4872 posinset 4873 }) { 4874 const { paginationInfo } = (0, import_element28.useContext)(dataviews_context_default); 4875 const hasPossibleBulkAction = useHasAPossibleBulkAction(actions2, item); 4876 const isSelected2 = hasPossibleBulkAction && selection.includes(id); 4877 const { 4878 showTitle = true, 4879 showMedia = true, 4880 showDescription = true, 4881 infiniteScrollEnabled 4882 } = view; 4883 const isTouchDeviceRef = (0, import_element28.useRef)(false); 4884 const columns = view.fields ?? []; 4885 const hasPrimaryColumn = titleField && showTitle || mediaField && showMedia || descriptionField && showDescription; 4886 return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)( 4887 "tr", 4888 { 4889 className: clsx_default("dataviews-view-table__row", { 4890 "is-selected": hasPossibleBulkAction && isSelected2, 4891 "has-bulk-actions": hasPossibleBulkAction 4892 }), 4893 onTouchStart: () => { 4894 isTouchDeviceRef.current = true; 4895 }, 4896 "aria-setsize": infiniteScrollEnabled ? paginationInfo.totalItems : void 0, 4897 "aria-posinset": posinset, 4898 role: infiniteScrollEnabled ? "article" : void 0, 4899 onMouseDown: (event) => { 4900 const isMetaClick = (0, import_keycodes.isAppleOS)() ? event.metaKey : event.ctrlKey; 4901 if (event.button === 0 && isMetaClick && window.navigator.userAgent.toLowerCase().includes("firefox")) { 4902 event?.preventDefault(); 4903 } 4904 }, 4905 onClick: (event) => { 4906 if (!hasPossibleBulkAction) { 4907 return; 4908 } 4909 const isModifierKeyPressed = (0, import_keycodes.isAppleOS)() ? event.metaKey : event.ctrlKey; 4910 if (isModifierKeyPressed && !isTouchDeviceRef.current && document.getSelection()?.type !== "Range") { 4911 onChangeSelection( 4912 selection.includes(id) ? selection.filter((itemId) => id !== itemId) : [...selection, id] 4913 ); 4914 } 4915 }, 4916 children: [ 4917 hasBulkActions && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("td", { className: "dataviews-view-table__checkbox-column", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "dataviews-view-table__cell-content-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)( 4918 DataViewsSelectionCheckbox, 4919 { 4920 item, 4921 selection, 4922 onChangeSelection, 4923 getItemId, 4924 titleField, 4925 disabled: !hasPossibleBulkAction 4926 } 4927 ) }) }), 4928 hasPrimaryColumn && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("td", { children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)( 4929 column_primary_default, 4930 { 4931 item, 4932 level, 4933 titleField: showTitle ? titleField : void 0, 4934 mediaField: showMedia ? mediaField : void 0, 4935 descriptionField: showDescription ? descriptionField : void 0, 4936 isItemClickable, 4937 onClickItem, 4938 renderItemLink 4939 } 4940 ) }), 4941 columns.map((column) => { 4942 const { width, maxWidth, minWidth, align } = view.layout?.styles?.[column] ?? {}; 4943 const field = fields2.find((f2) => f2.id === column); 4944 const effectiveAlign = getEffectiveAlign(align, field?.type); 4945 return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)( 4946 "td", 4947 { 4948 style: { 4949 width, 4950 maxWidth, 4951 minWidth 4952 }, 4953 children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)( 4954 TableColumnField, 4955 { 4956 fields: fields2, 4957 item, 4958 column, 4959 align: effectiveAlign 4960 } 4961 ) 4962 }, 4963 column 4964 ); 4965 }), 4966 !!actions2?.length && // Disable reason: we are not making the element interactive, 4967 // but preventing any click events from bubbling up to the 4968 // table row. This allows us to add a click handler to the row 4969 // itself (to toggle row selection) without erroneously 4970 // intercepting click events from ItemActions. 4971 /* eslint-disable jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events */ 4972 /* @__PURE__ */ (0, import_jsx_runtime50.jsx)( 4973 "td", 4974 { 4975 className: clsx_default("dataviews-view-table__actions-column", { 4976 "dataviews-view-table__actions-column--sticky": true, 4977 "dataviews-view-table__actions-column--stuck": isActionsColumnSticky 4978 }), 4979 onClick: (e2) => e2.stopPropagation(), 4980 children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(ItemActions, { item, actions: actions2 }) 4981 } 4982 ) 4983 ] 4984 } 4985 ); 4986 } 4987 function ViewTable({ 4988 actions: actions2, 4989 data, 4990 fields: fields2, 4991 getItemId, 4992 getItemLevel, 4993 isLoading = false, 4994 onChangeView, 4995 onChangeSelection, 4996 selection, 4997 setOpenedFilter, 4998 onClickItem, 4999 isItemClickable, 5000 renderItemLink, 5001 view, 5002 className, 5003 empty 5004 }) { 5005 const { containerRef } = (0, import_element28.useContext)(dataviews_context_default); 5006 const isDelayedLoading = useDelayedLoading(isLoading); 5007 const headerMenuRefs = (0, import_element28.useRef)(/* @__PURE__ */ new Map()); 5008 const headerMenuToFocusRef = (0, import_element28.useRef)(void 0); 5009 const [nextHeaderMenuToFocus, setNextHeaderMenuToFocus] = (0, import_element28.useState)(); 5010 const [contextMenuAnchor, setContextMenuAnchor] = (0, import_element28.useState)(null); 5011 (0, import_element28.useEffect)(() => { 5012 if (headerMenuToFocusRef.current) { 5013 headerMenuToFocusRef.current.focus(); 5014 headerMenuToFocusRef.current = void 0; 5015 } 5016 }); 5017 const tableNoticeId = (0, import_element28.useId)(); 5018 const { isHorizontalScrollEnd, isVerticallyScrolled } = useScrollState({ 5019 scrollContainerRef: containerRef, 5020 enabledHorizontal: !!actions2?.length 5021 }); 5022 const hasBulkActions = useSomeItemHasAPossibleBulkAction(actions2, data); 5023 if (nextHeaderMenuToFocus) { 5024 headerMenuToFocusRef.current = nextHeaderMenuToFocus; 5025 setNextHeaderMenuToFocus(void 0); 5026 return; 5027 } 5028 const onHide = (field) => { 5029 const hidden = headerMenuRefs.current.get(field.id); 5030 const fallback = hidden ? headerMenuRefs.current.get(hidden.fallback) : void 0; 5031 setNextHeaderMenuToFocus(fallback?.node); 5032 }; 5033 const handleHeaderContextMenu = (event) => { 5034 event.preventDefault(); 5035 event.stopPropagation(); 5036 const virtualAnchor = { 5037 getBoundingClientRect: () => ({ 5038 x: event.clientX, 5039 y: event.clientY, 5040 top: event.clientY, 5041 left: event.clientX, 5042 right: event.clientX, 5043 bottom: event.clientY, 5044 width: 0, 5045 height: 0, 5046 toJSON: () => ({}) 5047 }) 5048 }; 5049 window.requestAnimationFrame(() => { 5050 setContextMenuAnchor(virtualAnchor); 5051 }); 5052 }; 5053 const hasData = !!data?.length; 5054 const titleField = fields2.find((field) => field.id === view.titleField); 5055 const mediaField = fields2.find((field) => field.id === view.mediaField); 5056 const descriptionField = fields2.find( 5057 (field) => field.id === view.descriptionField 5058 ); 5059 const groupField = view.groupBy?.field ? fields2.find((f2) => f2.id === view.groupBy?.field) : null; 5060 const dataByGroup = groupField ? getDataByGroup(data, groupField) : null; 5061 const { showTitle = true, showMedia = true, showDescription = true } = view; 5062 const hasPrimaryColumn = titleField && showTitle || mediaField && showMedia || descriptionField && showDescription; 5063 const columns = view.fields ?? []; 5064 const headerMenuRef = (column, index) => (node) => { 5065 if (node) { 5066 headerMenuRefs.current.set(column, { 5067 node, 5068 fallback: columns[index > 0 ? index - 1 : 1] 5069 }); 5070 } else { 5071 headerMenuRefs.current.delete(column); 5072 } 5073 }; 5074 const isInfiniteScroll = view.infiniteScrollEnabled && !dataByGroup; 5075 const isRtl = (0, import_i18n10.isRTL)(); 5076 if (!hasData) { 5077 return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)( 5078 "div", 5079 { 5080 className: clsx_default("dataviews-no-results", { 5081 "is-refreshing": isDelayedLoading 5082 }), 5083 id: tableNoticeId, 5084 children: empty 5085 } 5086 ); 5087 } 5088 return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_jsx_runtime50.Fragment, { children: [ 5089 /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)( 5090 "table", 5091 { 5092 className: clsx_default("dataviews-view-table", className, { 5093 [`has-$view.layout?.density}-density`]: view.layout?.density && ["compact", "comfortable"].includes( 5094 view.layout.density 5095 ), 5096 "has-bulk-actions": hasBulkActions, 5097 "is-refreshing": !isInfiniteScroll && isDelayedLoading 5098 }), 5099 "aria-busy": isLoading, 5100 "aria-describedby": tableNoticeId, 5101 role: isInfiniteScroll ? "feed" : void 0, 5102 inert: !isInfiniteScroll && isLoading ? "true" : void 0, 5103 children: [ 5104 /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("colgroup", { children: [ 5105 hasBulkActions && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("col", { className: "dataviews-view-table__col-checkbox" }), 5106 hasPrimaryColumn && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("col", { className: "dataviews-view-table__col-first-data" }), 5107 columns.map((column, index) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)( 5108 "col", 5109 { 5110 className: clsx_default( 5111 `dataviews-view-table__col-$column}`, 5112 { 5113 "dataviews-view-table__col-expand": !hasPrimaryColumn && index === columns.length - 1 5114 } 5115 ) 5116 }, 5117 `col-$column}` 5118 )), 5119 !!actions2?.length && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("col", { className: "dataviews-view-table__col-actions" }) 5120 ] }), 5121 contextMenuAnchor && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)( 5122 import_components8.Popover, 5123 { 5124 anchor: contextMenuAnchor, 5125 onClose: () => setContextMenuAnchor(null), 5126 placement: "bottom-start", 5127 children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(PropertiesSection, { showLabel: false }) 5128 } 5129 ), 5130 /* @__PURE__ */ (0, import_jsx_runtime50.jsx)( 5131 "thead", 5132 { 5133 className: clsx_default({ 5134 "dataviews-view-table__thead--stuck": isVerticallyScrolled 5135 }), 5136 onContextMenu: handleHeaderContextMenu, 5137 children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("tr", { className: "dataviews-view-table__row", children: [ 5138 hasBulkActions && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)( 5139 "th", 5140 { 5141 className: "dataviews-view-table__checkbox-column", 5142 scope: "col", 5143 onContextMenu: handleHeaderContextMenu, 5144 children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)( 5145 BulkSelectionCheckbox, 5146 { 5147 selection, 5148 onChangeSelection, 5149 data, 5150 actions: actions2, 5151 getItemId 5152 } 5153 ) 5154 } 5155 ), 5156 hasPrimaryColumn && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("th", { scope: "col", children: titleField && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)( 5157 column_header_menu_default, 5158 { 5159 ref: headerMenuRef( 5160 titleField.id, 5161 0 5162 ), 5163 fieldId: titleField.id, 5164 view, 5165 fields: fields2, 5166 onChangeView, 5167 onHide, 5168 setOpenedFilter, 5169 canMove: false, 5170 canInsertLeft: isRtl ? view.layout?.enableMoving ?? true : false, 5171 canInsertRight: isRtl ? false : view.layout?.enableMoving ?? true 5172 } 5173 ) }), 5174 columns.map((column, index) => { 5175 const { width, maxWidth, minWidth, align } = view.layout?.styles?.[column] ?? {}; 5176 const field = fields2.find( 5177 (f2) => f2.id === column 5178 ); 5179 const effectiveAlign = getEffectiveAlign( 5180 align, 5181 field?.type 5182 ); 5183 const canInsertOrMove = view.layout?.enableMoving ?? true; 5184 return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)( 5185 "th", 5186 { 5187 style: { 5188 width, 5189 maxWidth, 5190 minWidth, 5191 textAlign: effectiveAlign 5192 }, 5193 "aria-sort": view.sort?.direction && view.sort?.field === column ? sortValues[view.sort.direction] : void 0, 5194 scope: "col", 5195 children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)( 5196 column_header_menu_default, 5197 { 5198 ref: headerMenuRef(column, index), 5199 fieldId: column, 5200 view, 5201 fields: fields2, 5202 onChangeView, 5203 onHide, 5204 setOpenedFilter, 5205 canMove: canInsertOrMove, 5206 canInsertLeft: canInsertOrMove, 5207 canInsertRight: canInsertOrMove 5208 } 5209 ) 5210 }, 5211 column 5212 ); 5213 }), 5214 !!actions2?.length && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)( 5215 "th", 5216 { 5217 className: clsx_default( 5218 "dataviews-view-table__actions-column", 5219 { 5220 "dataviews-view-table__actions-column--sticky": true, 5221 "dataviews-view-table__actions-column--stuck": !isHorizontalScrollEnd 5222 } 5223 ), 5224 children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "dataviews-view-table-header", children: (0, import_i18n10.__)("Actions") }) 5225 } 5226 ) 5227 ] }) 5228 } 5229 ), 5230 hasData && groupField && dataByGroup ? Array.from(dataByGroup.entries()).map( 5231 ([groupName, groupItems]) => /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("tbody", { children: [ 5232 /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("tr", { className: "dataviews-view-table__group-header-row", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)( 5233 "td", 5234 { 5235 colSpan: columns.length + (hasPrimaryColumn ? 1 : 0) + (hasBulkActions ? 1 : 0) + (actions2?.length ? 1 : 0), 5236 className: "dataviews-view-table__group-header-cell", 5237 children: view.groupBy?.showLabel === false ? groupName : (0, import_i18n10.sprintf)( 5238 // translators: 1: The label of the field e.g. "Date". 2: The value of the field, e.g.: "May 2022". 5239 (0, import_i18n10.__)("%1$s: %2$s"), 5240 groupField.label, 5241 groupName 5242 ) 5243 } 5244 ) }), 5245 groupItems.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)( 5246 TableRow, 5247 { 5248 item, 5249 level: view.showLevels && typeof getItemLevel === "function" ? getItemLevel(item) : void 0, 5250 hasBulkActions, 5251 actions: actions2, 5252 fields: fields2, 5253 id: getItemId(item) || index.toString(), 5254 view, 5255 titleField, 5256 mediaField, 5257 descriptionField, 5258 selection, 5259 getItemId, 5260 onChangeSelection, 5261 onClickItem, 5262 renderItemLink, 5263 isItemClickable, 5264 isActionsColumnSticky: !isHorizontalScrollEnd 5265 }, 5266 getItemId(item) 5267 )) 5268 ] }, `group-$groupName}`) 5269 ) : /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("tbody", { children: hasData && data.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)( 5270 TableRow, 5271 { 5272 item, 5273 level: view.showLevels && typeof getItemLevel === "function" ? getItemLevel(item) : void 0, 5274 hasBulkActions, 5275 actions: actions2, 5276 fields: fields2, 5277 id: getItemId(item) || index.toString(), 5278 view, 5279 titleField, 5280 mediaField, 5281 descriptionField, 5282 selection, 5283 getItemId, 5284 onChangeSelection, 5285 onClickItem, 5286 renderItemLink, 5287 isItemClickable, 5288 isActionsColumnSticky: !isHorizontalScrollEnd, 5289 posinset: isInfiniteScroll ? index + 1 : void 0 5290 }, 5291 getItemId(item) 5292 )) }) 5293 ] 5294 } 5295 ), 5296 isInfiniteScroll && isLoading && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "dataviews-loading", id: tableNoticeId, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("p", { className: "dataviews-loading-more", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_components8.Spinner, {}) }) }) 5297 ] }); 5298 } 5299 var table_default = ViewTable; 5300 5301 // packages/dataviews/build-module/components/dataviews-layouts/grid/index.mjs 5302 var import_components11 = __toESM(require_components(), 1); 5303 var import_i18n13 = __toESM(require_i18n(), 1); 5304 5305 // packages/dataviews/build-module/components/dataviews-layouts/grid/composite-grid.mjs 5306 var import_components10 = __toESM(require_components(), 1); 5307 var import_i18n12 = __toESM(require_i18n(), 1); 5308 var import_compose3 = __toESM(require_compose(), 1); 5309 var import_keycodes2 = __toESM(require_keycodes(), 1); 5310 var import_element32 = __toESM(require_element(), 1); 5311 5312 // packages/dataviews/build-module/components/dataviews-layouts/grid/preview-size-picker.mjs 5313 var import_components9 = __toESM(require_components(), 1); 5314 var import_i18n11 = __toESM(require_i18n(), 1); 5315 var import_element29 = __toESM(require_element(), 1); 5316 var import_jsx_runtime51 = __toESM(require_jsx_runtime(), 1); 5317 var imageSizes = [ 5318 { 5319 value: 120, 5320 breakpoint: 1 5321 }, 5322 { 5323 value: 170, 5324 breakpoint: 1 5325 }, 5326 { 5327 value: 230, 5328 breakpoint: 1 5329 }, 5330 { 5331 value: 290, 5332 breakpoint: 1112 5333 // at minimum image width, 4 images display at this container size 5334 }, 5335 { 5336 value: 350, 5337 breakpoint: 1636 5338 // at minimum image width, 6 images display at this container size 5339 }, 5340 { 5341 value: 430, 5342 breakpoint: 588 5343 // at minimum image width, 2 images display at this container size 5344 } 5345 ]; 5346 var DEFAULT_PREVIEW_SIZE = imageSizes[2].value; 5347 function useGridColumns() { 5348 const context = (0, import_element29.useContext)(dataviews_context_default); 5349 const view = context.view; 5350 return (0, import_element29.useMemo)(() => { 5351 const containerWidth = context.containerWidth; 5352 const gap = 32; 5353 const previewSize = view.layout?.previewSize ?? DEFAULT_PREVIEW_SIZE; 5354 const columns = Math.floor( 5355 (containerWidth + gap) / (previewSize + gap) 5356 ); 5357 return Math.max(1, columns); 5358 }, [context.containerWidth, view.layout?.previewSize]); 5359 } 5360 5361 // packages/dataviews/build-module/components/dataviews-layouts/utils/grid-items.mjs 5362 var import_element30 = __toESM(require_element(), 1); 5363 var import_jsx_runtime52 = __toESM(require_jsx_runtime(), 1); 5364 var GridItems = (0, import_element30.forwardRef)(({ className, previewSize, ...props }, ref) => { 5365 return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)( 5366 "div", 5367 { 5368 ref, 5369 className: clsx_default("dataviews-view-grid-items", className), 5370 style: { 5371 gridTemplateColumns: previewSize && `repeat(auto-fill, minmax($previewSize}px, 1fr))` 5372 }, 5373 ...props 5374 } 5375 ); 5376 }); 5377 5378 // packages/dataviews/build-module/components/dataviews-layouts/utils/use-infinite-scroll.mjs 5379 var import_element31 = __toESM(require_element(), 1); 5380 function useIntersectionObserver(elementRef, posinset) { 5381 const { intersectionObserver } = (0, import_element31.useContext)(dataviews_context_default); 5382 (0, import_element31.useEffect)(() => { 5383 const element = elementRef.current; 5384 if (!element || posinset === void 0 || !intersectionObserver) { 5385 return; 5386 } 5387 intersectionObserver.observe(element); 5388 return () => { 5389 intersectionObserver.unobserve(element); 5390 }; 5391 }, [elementRef, intersectionObserver, posinset]); 5392 } 5393 function usePlaceholdersNeeded(data, isInfiniteScroll, gridColumns) { 5394 const hasData = !!data?.length; 5395 const firstItemPosition = hasData && isInfiniteScroll ? data[0].position : void 0; 5396 return firstItemPosition && gridColumns ? (firstItemPosition - 1) % gridColumns : 0; 5397 } 5398 5399 // packages/dataviews/build-module/components/dataviews-layouts/grid/composite-grid.mjs 5400 var import_jsx_runtime53 = __toESM(require_jsx_runtime(), 1); 5401 var { Badge: Badge3 } = unlock(import_components10.privateApis); 5402 function chunk(array, size) { 5403 const chunks = []; 5404 for (let i2 = 0, j2 = array.length; i2 < j2; i2 += size) { 5405 chunks.push(array.slice(i2, i2 + size)); 5406 } 5407 return chunks; 5408 } 5409 var GridItem = (0, import_element32.forwardRef)( 5410 function GridItem2({ 5411 view, 5412 selection, 5413 onChangeSelection, 5414 onClickItem, 5415 isItemClickable, 5416 renderItemLink, 5417 getItemId, 5418 item, 5419 actions: actions2, 5420 mediaField, 5421 titleField, 5422 descriptionField, 5423 regularFields, 5424 badgeFields, 5425 hasBulkActions, 5426 config, 5427 posinset, 5428 setsize, 5429 ...props 5430 }, forwardedRef) { 5431 const { 5432 showTitle = true, 5433 showMedia = true, 5434 showDescription = true 5435 } = view; 5436 const hasBulkAction = useHasAPossibleBulkAction(actions2, item); 5437 const id = getItemId(item); 5438 const elementRef = (0, import_element32.useRef)(null); 5439 const setRefs = (0, import_element32.useCallback)( 5440 (node) => { 5441 elementRef.current = node; 5442 if (typeof forwardedRef === "function") { 5443 forwardedRef(node); 5444 } else if (forwardedRef) { 5445 forwardedRef.current = node; 5446 } 5447 }, 5448 [forwardedRef] 5449 ); 5450 useIntersectionObserver(elementRef, posinset); 5451 const instanceId = (0, import_compose3.useInstanceId)(GridItem2); 5452 const isSelected2 = selection.includes(id); 5453 const mediaPlaceholder = /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "dataviews-view-grid__media-placeholder" }); 5454 const rendersMediaField = showMedia && mediaField?.render; 5455 const renderedMediaField = rendersMediaField ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)( 5456 mediaField.render, 5457 { 5458 item, 5459 field: mediaField, 5460 config 5461 } 5462 ) : mediaPlaceholder; 5463 const renderedTitleField = showTitle && titleField?.render ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(titleField.render, { item, field: titleField }) : null; 5464 let mediaA11yProps; 5465 let titleA11yProps; 5466 if (isItemClickable(item) && onClickItem) { 5467 if (renderedTitleField) { 5468 mediaA11yProps = { 5469 "aria-labelledby": `dataviews-view-grid__title-field-$instanceId}` 5470 }; 5471 titleA11yProps = { 5472 id: `dataviews-view-grid__title-field-$instanceId}` 5473 }; 5474 } else { 5475 mediaA11yProps = { 5476 "aria-label": (0, import_i18n12.__)("Navigate to item") 5477 }; 5478 } 5479 } 5480 return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)( 5481 Stack, 5482 { 5483 direction: "column", 5484 ...props, 5485 ref: setRefs, 5486 "aria-setsize": setsize, 5487 "aria-posinset": posinset, 5488 className: clsx_default( 5489 props.className, 5490 "dataviews-view-grid__row__gridcell", 5491 "dataviews-view-grid__card", 5492 { 5493 "is-selected": hasBulkAction && isSelected2 5494 } 5495 ), 5496 onClickCapture: (event) => { 5497 props.onClickCapture?.(event); 5498 if ((0, import_keycodes2.isAppleOS)() ? event.metaKey : event.ctrlKey) { 5499 event.stopPropagation(); 5500 event.preventDefault(); 5501 if (!hasBulkAction) { 5502 return; 5503 } 5504 onChangeSelection( 5505 isSelected2 ? selection.filter( 5506 (itemId) => id !== itemId 5507 ) : [...selection, id] 5508 ); 5509 } 5510 }, 5511 children: [ 5512 /* @__PURE__ */ (0, import_jsx_runtime53.jsx)( 5513 ItemClickWrapper, 5514 { 5515 item, 5516 isItemClickable, 5517 onClickItem, 5518 renderItemLink, 5519 className: clsx_default("dataviews-view-grid__media", { 5520 "dataviews-view-grid__media--placeholder": !rendersMediaField 5521 }), 5522 ...mediaA11yProps, 5523 children: renderedMediaField 5524 } 5525 ), 5526 hasBulkActions && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)( 5527 DataViewsSelectionCheckbox, 5528 { 5529 item, 5530 selection, 5531 onChangeSelection, 5532 getItemId, 5533 titleField, 5534 disabled: !hasBulkAction 5535 } 5536 ), 5537 !!actions2?.length && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "dataviews-view-grid__media-actions", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)( 5538 ItemActions, 5539 { 5540 item, 5541 actions: actions2, 5542 isCompact: true 5543 } 5544 ) }), 5545 showTitle && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "dataviews-view-grid__title", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)( 5546 ItemClickWrapper, 5547 { 5548 item, 5549 isItemClickable, 5550 onClickItem, 5551 renderItemLink, 5552 className: "dataviews-view-grid__title-field dataviews-title-field", 5553 ...titleA11yProps, 5554 title: titleField?.getValueFormatted({ 5555 item, 5556 field: titleField 5557 }) || void 0, 5558 children: renderedTitleField 5559 } 5560 ) }), 5561 /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(Stack, { direction: "column", gap: "xs", children: [ 5562 showDescription && descriptionField?.render && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)( 5563 descriptionField.render, 5564 { 5565 item, 5566 field: descriptionField 5567 } 5568 ), 5569 !!badgeFields?.length && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)( 5570 Stack, 5571 { 5572 direction: "row", 5573 className: "dataviews-view-grid__badge-fields", 5574 gap: "sm", 5575 wrap: "wrap", 5576 align: "top", 5577 justify: "flex-start", 5578 children: badgeFields.map((field) => { 5579 return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)( 5580 Badge3, 5581 { 5582 className: "dataviews-view-grid__field-value", 5583 children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)( 5584 field.render, 5585 { 5586 item, 5587 field 5588 } 5589 ) 5590 }, 5591 field.id 5592 ); 5593 }) 5594 } 5595 ), 5596 !!regularFields?.length && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)( 5597 Stack, 5598 { 5599 direction: "column", 5600 className: "dataviews-view-grid__fields", 5601 gap: "xs", 5602 children: regularFields.map((field) => { 5603 return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)( 5604 import_components10.Flex, 5605 { 5606 className: "dataviews-view-grid__field", 5607 gap: 1, 5608 justify: "flex-start", 5609 expanded: true, 5610 style: { height: "auto" }, 5611 direction: "row", 5612 children: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_jsx_runtime53.Fragment, { children: [ 5613 /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_components10.Tooltip, { text: field.label, children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_components10.FlexItem, { className: "dataviews-view-grid__field-name", children: field.header }) }), 5614 /* @__PURE__ */ (0, import_jsx_runtime53.jsx)( 5615 import_components10.FlexItem, 5616 { 5617 className: "dataviews-view-grid__field-value", 5618 style: { maxHeight: "none" }, 5619 children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)( 5620 field.render, 5621 { 5622 item, 5623 field 5624 } 5625 ) 5626 } 5627 ) 5628 ] }) 5629 }, 5630 field.id 5631 ); 5632 }) 5633 } 5634 ) 5635 ] }) 5636 ] 5637 } 5638 ); 5639 } 5640 ); 5641 function CompositeGrid({ 5642 data, 5643 isInfiniteScroll, 5644 className, 5645 inert, 5646 isLoading, 5647 view, 5648 fields: fields2, 5649 selection, 5650 onChangeSelection, 5651 onClickItem, 5652 isItemClickable, 5653 renderItemLink, 5654 getItemId, 5655 actions: actions2 5656 }) { 5657 const { paginationInfo, resizeObserverRef } = (0, import_element32.useContext)(dataviews_context_default); 5658 const gridColumns = useGridColumns(); 5659 const hasBulkActions = useSomeItemHasAPossibleBulkAction(actions2, data); 5660 const titleField = fields2.find( 5661 (field) => field.id === view?.titleField 5662 ); 5663 const mediaField = fields2.find( 5664 (field) => field.id === view?.mediaField 5665 ); 5666 const descriptionField = fields2.find( 5667 (field) => field.id === view?.descriptionField 5668 ); 5669 const otherFields = view.fields ?? []; 5670 const { regularFields, badgeFields } = otherFields.reduce( 5671 (accumulator, fieldId) => { 5672 const field = fields2.find((f2) => f2.id === fieldId); 5673 if (!field) { 5674 return accumulator; 5675 } 5676 const key = view.layout?.badgeFields?.includes(fieldId) ? "badgeFields" : "regularFields"; 5677 accumulator[key].push(field); 5678 return accumulator; 5679 }, 5680 { regularFields: [], badgeFields: [] } 5681 ); 5682 const size = "900px"; 5683 const totalRows = Math.ceil(data.length / gridColumns); 5684 const placeholdersNeeded = usePlaceholdersNeeded( 5685 data, 5686 isInfiniteScroll, 5687 gridColumns 5688 ); 5689 return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_jsx_runtime53.Fragment, { 5690 // Render infinite scroll layout (no rows, feed semantics) 5691 children: [ 5692 isInfiniteScroll && /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)( 5693 import_components10.Composite, 5694 { 5695 render: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)( 5696 GridItems, 5697 { 5698 className: clsx_default( 5699 "dataviews-view-grid-infinite-scroll", 5700 className, 5701 { 5702 [`has-$view.layout?.density}-density`]: view.layout?.density && [ 5703 "compact", 5704 "comfortable" 5705 ].includes(view.layout.density) 5706 } 5707 ), 5708 previewSize: view.layout?.previewSize, 5709 "aria-busy": isLoading, 5710 ref: resizeObserverRef 5711 } 5712 ), 5713 role: "feed", 5714 focusWrap: true, 5715 inert, 5716 children: [ 5717 Array.from({ length: placeholdersNeeded }).map( 5718 (_, index) => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)( 5719 import_components10.Composite.Item, 5720 { 5721 render: (props) => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)( 5722 Stack, 5723 { 5724 ...props, 5725 direction: "column", 5726 role: "article", 5727 className: "dataviews-view-grid__row__gridcell dataviews-view-grid__card dataviews-view-grid__placeholder" 5728 } 5729 ), 5730 "aria-hidden": true, 5731 tabIndex: -1 5732 }, 5733 `placeholder-$index}` 5734 ) 5735 ), 5736 data.map((item) => { 5737 const itemId = getItemId(item); 5738 const stablePosition = item.position; 5739 return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)( 5740 import_components10.Composite.Item, 5741 { 5742 render: (props) => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)( 5743 GridItem, 5744 { 5745 ...props, 5746 id: itemId, 5747 role: "article", 5748 view, 5749 selection, 5750 onChangeSelection, 5751 onClickItem, 5752 isItemClickable, 5753 renderItemLink, 5754 getItemId, 5755 item, 5756 actions: actions2, 5757 mediaField, 5758 titleField, 5759 descriptionField, 5760 regularFields, 5761 badgeFields, 5762 hasBulkActions, 5763 posinset: stablePosition, 5764 setsize: paginationInfo.totalItems, 5765 config: { 5766 sizes: size 5767 } 5768 } 5769 ) 5770 }, 5771 itemId 5772 ); 5773 }) 5774 ] 5775 } 5776 ), 5777 // Render standard grid layout (with rows, grid semantics) 5778 !isInfiniteScroll && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)( 5779 import_components10.Composite, 5780 { 5781 role: "grid", 5782 className: clsx_default("dataviews-view-grid", className, { 5783 [`has-$view.layout?.density}-density`]: view.layout?.density && ["compact", "comfortable"].includes( 5784 view.layout.density 5785 ) 5786 }), 5787 focusWrap: true, 5788 "aria-busy": isLoading, 5789 "aria-rowcount": totalRows, 5790 ref: resizeObserverRef, 5791 inert, 5792 children: chunk(data, gridColumns).map((row, i2) => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)( 5793 import_components10.Composite.Row, 5794 { 5795 render: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)( 5796 "div", 5797 { 5798 role: "row", 5799 "aria-rowindex": i2 + 1, 5800 "aria-label": (0, import_i18n12.sprintf)( 5801 /* translators: %d: The row number in the grid */ 5802 (0, import_i18n12.__)("Row %d"), 5803 i2 + 1 5804 ), 5805 className: "dataviews-view-grid__row", 5806 style: { 5807 gridTemplateColumns: `repeat( $gridColumns}, minmax(0, 1fr) )` 5808 } 5809 } 5810 ), 5811 children: row.map((item) => { 5812 const itemId = getItemId(item); 5813 return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)( 5814 import_components10.Composite.Item, 5815 { 5816 render: (props) => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)( 5817 GridItem, 5818 { 5819 ...props, 5820 id: itemId, 5821 role: "gridcell", 5822 view, 5823 selection, 5824 onChangeSelection, 5825 onClickItem, 5826 isItemClickable, 5827 renderItemLink, 5828 getItemId, 5829 item, 5830 actions: actions2, 5831 mediaField, 5832 titleField, 5833 descriptionField, 5834 regularFields, 5835 badgeFields, 5836 hasBulkActions, 5837 config: { 5838 sizes: size 5839 } 5840 } 5841 ) 5842 }, 5843 itemId 5844 ); 5845 }) 5846 }, 5847 i2 5848 )) 5849 } 5850 ) 5851 ] 5852 }); 5853 } 5854 5855 // packages/dataviews/build-module/components/dataviews-layouts/grid/index.mjs 5856 var import_jsx_runtime54 = __toESM(require_jsx_runtime(), 1); 5857 function ViewGrid({ 5858 actions: actions2, 5859 data, 5860 fields: fields2, 5861 getItemId, 5862 isLoading, 5863 onChangeSelection, 5864 onClickItem, 5865 isItemClickable, 5866 renderItemLink, 5867 selection, 5868 view, 5869 className, 5870 empty 5871 }) { 5872 const isDelayedLoading = useDelayedLoading(!!isLoading); 5873 const hasData = !!data?.length; 5874 const groupField = view.groupBy?.field ? fields2.find((f2) => f2.id === view.groupBy?.field) : null; 5875 const dataByGroup = groupField ? getDataByGroup(data, groupField) : null; 5876 const isInfiniteScroll = view.infiniteScrollEnabled && !dataByGroup; 5877 if (!hasData) { 5878 return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)( 5879 "div", 5880 { 5881 className: clsx_default("dataviews-no-results", { 5882 "is-refreshing": isDelayedLoading 5883 }), 5884 children: empty 5885 } 5886 ); 5887 } 5888 const gridProps = { 5889 className: clsx_default(className, { 5890 "is-refreshing": !isInfiniteScroll && isDelayedLoading 5891 }), 5892 inert: !isInfiniteScroll && !!isLoading ? "true" : void 0, 5893 isLoading, 5894 view, 5895 fields: fields2, 5896 selection, 5897 onChangeSelection, 5898 onClickItem, 5899 isItemClickable, 5900 renderItemLink, 5901 getItemId, 5902 actions: actions2 5903 }; 5904 return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_jsx_runtime54.Fragment, { 5905 // Render multiple groups. 5906 children: [ 5907 hasData && groupField && dataByGroup && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Stack, { direction: "column", gap: "lg", children: Array.from(dataByGroup.entries()).map( 5908 ([groupName, groupItems]) => /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)( 5909 Stack, 5910 { 5911 direction: "column", 5912 gap: "sm", 5913 children: [ 5914 /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("h3", { className: "dataviews-view-grid__group-header", children: view.groupBy?.showLabel === false ? groupName : (0, import_i18n13.sprintf)( 5915 // translators: 1: The label of the field e.g. "Date". 2: The value of the field, e.g.: "May 2022". 5916 (0, import_i18n13.__)("%1$s: %2$s"), 5917 groupField.label, 5918 groupName 5919 ) }), 5920 /* @__PURE__ */ (0, import_jsx_runtime54.jsx)( 5921 CompositeGrid, 5922 { 5923 ...gridProps, 5924 data: groupItems, 5925 isInfiniteScroll: false 5926 } 5927 ) 5928 ] 5929 }, 5930 groupName 5931 ) 5932 ) }), 5933 // Render a single grid with all data. 5934 !dataByGroup && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)( 5935 CompositeGrid, 5936 { 5937 ...gridProps, 5938 data, 5939 isInfiniteScroll: !!isInfiniteScroll 5940 } 5941 ), 5942 isInfiniteScroll && isLoading && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("p", { className: "dataviews-loading-more", children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_components11.Spinner, {}) }) 5943 ] 5944 }); 5945 } 5946 var grid_default = ViewGrid; 5947 5948 // packages/dataviews/build-module/components/dataviews-layouts/list/index.mjs 5949 var import_compose4 = __toESM(require_compose(), 1); 5950 var import_components12 = __toESM(require_components(), 1); 5951 var import_element33 = __toESM(require_element(), 1); 5952 var import_i18n14 = __toESM(require_i18n(), 1); 5953 var import_data3 = __toESM(require_data(), 1); 5954 var import_jsx_runtime55 = __toESM(require_jsx_runtime(), 1); 5955 var { Menu: Menu3 } = unlock(import_components12.privateApis); 5956 function generateItemWrapperCompositeId(idPrefix) { 5957 return `$idPrefix}-item-wrapper`; 5958 } 5959 function generatePrimaryActionCompositeId(idPrefix, primaryActionId) { 5960 return `$idPrefix}-primary-action-$primaryActionId}`; 5961 } 5962 function generateDropdownTriggerCompositeId(idPrefix) { 5963 return `$idPrefix}-dropdown`; 5964 } 5965 function PrimaryActionGridCell({ 5966 idPrefix, 5967 primaryAction, 5968 item 5969 }) { 5970 const registry = (0, import_data3.useRegistry)(); 5971 const [isModalOpen, setIsModalOpen] = (0, import_element33.useState)(false); 5972 const compositeItemId = generatePrimaryActionCompositeId( 5973 idPrefix, 5974 primaryAction.id 5975 ); 5976 const label = typeof primaryAction.label === "string" ? primaryAction.label : primaryAction.label([item]); 5977 return "RenderModal" in primaryAction ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { role: "gridcell", children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)( 5978 import_components12.Composite.Item, 5979 { 5980 id: compositeItemId, 5981 render: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)( 5982 import_components12.Button, 5983 { 5984 disabled: !!primaryAction.disabled, 5985 accessibleWhenDisabled: true, 5986 text: label, 5987 size: "small", 5988 onClick: () => setIsModalOpen(true) 5989 } 5990 ), 5991 children: isModalOpen && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)( 5992 ActionModal, 5993 { 5994 action: primaryAction, 5995 items: [item], 5996 closeModal: () => setIsModalOpen(false) 5997 } 5998 ) 5999 } 6000 ) }, primaryAction.id) : /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { role: "gridcell", children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)( 6001 import_components12.Composite.Item, 6002 { 6003 id: compositeItemId, 6004 render: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)( 6005 import_components12.Button, 6006 { 6007 disabled: !!primaryAction.disabled, 6008 accessibleWhenDisabled: true, 6009 size: "small", 6010 onClick: () => { 6011 primaryAction.callback([item], { registry }); 6012 }, 6013 children: label 6014 } 6015 ) 6016 } 6017 ) }, primaryAction.id); 6018 } 6019 function ListItem({ 6020 view, 6021 actions: actions2, 6022 idPrefix, 6023 isSelected: isSelected2, 6024 item, 6025 titleField, 6026 mediaField, 6027 descriptionField, 6028 onSelect, 6029 otherFields, 6030 onDropdownTriggerKeyDown, 6031 posinset 6032 }) { 6033 const { 6034 showTitle = true, 6035 showMedia = true, 6036 showDescription = true, 6037 infiniteScrollEnabled 6038 } = view; 6039 const itemRef = (0, import_element33.useRef)(null); 6040 const labelId = `$idPrefix}-label`; 6041 const descriptionId = `$idPrefix}-description`; 6042 const registry = (0, import_data3.useRegistry)(); 6043 const [isHovered, setIsHovered] = (0, import_element33.useState)(false); 6044 const [activeModalAction, setActiveModalAction] = (0, import_element33.useState)( 6045 null 6046 ); 6047 const handleHover = ({ type }) => { 6048 const isHover = type === "mouseenter"; 6049 setIsHovered(isHover); 6050 }; 6051 const { paginationInfo } = (0, import_element33.useContext)(dataviews_context_default); 6052 (0, import_element33.useEffect)(() => { 6053 if (isSelected2) { 6054 itemRef.current?.scrollIntoView({ 6055 behavior: "auto", 6056 block: "nearest", 6057 inline: "nearest" 6058 }); 6059 } 6060 }, [isSelected2]); 6061 const { primaryAction, eligibleActions } = (0, import_element33.useMemo)(() => { 6062 const _eligibleActions = actions2.filter( 6063 (action) => !action.isEligible || action.isEligible(item) 6064 ); 6065 const _primaryActions = _eligibleActions.filter( 6066 (action) => action.isPrimary 6067 ); 6068 return { 6069 primaryAction: _primaryActions[0], 6070 eligibleActions: _eligibleActions 6071 }; 6072 }, [actions2, item]); 6073 const hasOnlyOnePrimaryAction = primaryAction && actions2.length === 1; 6074 const renderedMediaField = showMedia && mediaField?.render ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "dataviews-view-list__media-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)( 6075 mediaField.render, 6076 { 6077 item, 6078 field: mediaField, 6079 config: { sizes: "52px" } 6080 } 6081 ) }) : null; 6082 const renderedTitleField = showTitle && titleField?.render ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(titleField.render, { item, field: titleField }) : null; 6083 const renderDescription = showDescription && descriptionField?.render; 6084 const hasOnlyMediaAndTitle = !!renderedMediaField && !renderDescription && !otherFields.length; 6085 const usedActions = eligibleActions?.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)( 6086 Stack, 6087 { 6088 direction: "row", 6089 gap: "md", 6090 className: "dataviews-view-list__item-actions", 6091 children: [ 6092 primaryAction && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)( 6093 PrimaryActionGridCell, 6094 { 6095 idPrefix, 6096 primaryAction, 6097 item 6098 } 6099 ), 6100 !hasOnlyOnePrimaryAction && /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { role: "gridcell", children: [ 6101 /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(Menu3, { placement: "bottom-end", children: [ 6102 /* @__PURE__ */ (0, import_jsx_runtime55.jsx)( 6103 Menu3.TriggerButton, 6104 { 6105 render: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)( 6106 import_components12.Composite.Item, 6107 { 6108 id: generateDropdownTriggerCompositeId( 6109 idPrefix 6110 ), 6111 render: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)( 6112 import_components12.Button, 6113 { 6114 size: "small", 6115 icon: more_vertical_default, 6116 label: (0, import_i18n14.__)("Actions"), 6117 accessibleWhenDisabled: true, 6118 disabled: !actions2.length, 6119 onKeyDown: onDropdownTriggerKeyDown 6120 } 6121 ) 6122 } 6123 ) 6124 } 6125 ), 6126 /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Menu3.Popover, { children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)( 6127 ActionsMenuGroup, 6128 { 6129 actions: eligibleActions, 6130 item, 6131 registry, 6132 setActiveModalAction 6133 } 6134 ) }) 6135 ] }), 6136 !!activeModalAction && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)( 6137 ActionModal, 6138 { 6139 action: activeModalAction, 6140 items: [item], 6141 closeModal: () => setActiveModalAction(null) 6142 } 6143 ) 6144 ] }) 6145 ] 6146 } 6147 ); 6148 return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)( 6149 import_components12.Composite.Row, 6150 { 6151 ref: itemRef, 6152 render: ( 6153 /* aria-posinset breaks Composite.Row if passed to it directly. */ 6154 /* @__PURE__ */ (0, import_jsx_runtime55.jsx)( 6155 "div", 6156 { 6157 "aria-posinset": posinset, 6158 "aria-setsize": infiniteScrollEnabled ? paginationInfo.totalItems : void 0 6159 } 6160 ) 6161 ), 6162 role: infiniteScrollEnabled ? "article" : "row", 6163 className: clsx_default({ 6164 "is-selected": isSelected2, 6165 "is-hovered": isHovered 6166 }), 6167 onMouseEnter: handleHover, 6168 onMouseLeave: handleHover, 6169 children: /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)( 6170 Stack, 6171 { 6172 direction: "row", 6173 className: "dataviews-view-list__item-wrapper", 6174 children: [ 6175 /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { role: "gridcell", children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)( 6176 import_components12.Composite.Item, 6177 { 6178 id: generateItemWrapperCompositeId(idPrefix), 6179 "aria-pressed": isSelected2, 6180 "aria-labelledby": labelId, 6181 "aria-describedby": descriptionId, 6182 className: "dataviews-view-list__item", 6183 onClick: () => onSelect(item) 6184 } 6185 ) }), 6186 /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)( 6187 Stack, 6188 { 6189 direction: "row", 6190 gap: "md", 6191 justify: "start", 6192 align: hasOnlyMediaAndTitle ? "center" : "flex-start", 6193 style: { flex: 1, minWidth: 0 }, 6194 children: [ 6195 renderedMediaField, 6196 /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)( 6197 Stack, 6198 { 6199 direction: "column", 6200 gap: "xs", 6201 className: "dataviews-view-list__field-wrapper", 6202 children: [ 6203 /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(Stack, { direction: "row", align: "center", children: [ 6204 /* @__PURE__ */ (0, import_jsx_runtime55.jsx)( 6205 "div", 6206 { 6207 className: "dataviews-title-field dataviews-view-list__title-field", 6208 id: labelId, 6209 children: renderedTitleField 6210 } 6211 ), 6212 usedActions 6213 ] }), 6214 renderDescription && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "dataviews-view-list__field", children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)( 6215 descriptionField.render, 6216 { 6217 item, 6218 field: descriptionField 6219 } 6220 ) }), 6221 /* @__PURE__ */ (0, import_jsx_runtime55.jsx)( 6222 "div", 6223 { 6224 className: "dataviews-view-list__fields", 6225 id: descriptionId, 6226 children: otherFields.map((field) => /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)( 6227 "div", 6228 { 6229 className: "dataviews-view-list__field", 6230 children: [ 6231 /* @__PURE__ */ (0, import_jsx_runtime55.jsx)( 6232 import_components12.VisuallyHidden, 6233 { 6234 as: "span", 6235 className: "dataviews-view-list__field-label", 6236 children: field.label 6237 } 6238 ), 6239 /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "dataviews-view-list__field-value", children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)( 6240 field.render, 6241 { 6242 item, 6243 field 6244 } 6245 ) }) 6246 ] 6247 }, 6248 field.id 6249 )) 6250 } 6251 ) 6252 ] 6253 } 6254 ) 6255 ] 6256 } 6257 ) 6258 ] 6259 } 6260 ) 6261 } 6262 ); 6263 } 6264 function isDefined2(item) { 6265 return !!item; 6266 } 6267 function ViewList(props) { 6268 const { 6269 actions: actions2, 6270 data, 6271 fields: fields2, 6272 getItemId, 6273 isLoading, 6274 onChangeSelection, 6275 selection, 6276 view, 6277 className, 6278 empty 6279 } = props; 6280 const baseId = (0, import_compose4.useInstanceId)(ViewList, "view-list"); 6281 const isDelayedLoading = useDelayedLoading(!!isLoading); 6282 const selectedItem = data?.findLast( 6283 (item) => selection.includes(getItemId(item)) 6284 ); 6285 const titleField = fields2.find((field) => field.id === view.titleField); 6286 const mediaField = fields2.find((field) => field.id === view.mediaField); 6287 const descriptionField = fields2.find( 6288 (field) => field.id === view.descriptionField 6289 ); 6290 const otherFields = (view?.fields ?? []).map((fieldId) => fields2.find((f2) => fieldId === f2.id)).filter(isDefined2); 6291 const onSelect = (item) => onChangeSelection([getItemId(item)]); 6292 const generateCompositeItemIdPrefix = (0, import_element33.useCallback)( 6293 (item) => `$baseId}-$getItemId(item)}`, 6294 [baseId, getItemId] 6295 ); 6296 const isActiveCompositeItem = (0, import_element33.useCallback)( 6297 (item, idToCheck) => { 6298 return idToCheck.startsWith( 6299 generateCompositeItemIdPrefix(item) 6300 ); 6301 }, 6302 [generateCompositeItemIdPrefix] 6303 ); 6304 const [activeCompositeId, setActiveCompositeId] = (0, import_element33.useState)(void 0); 6305 const compositeRef = (0, import_element33.useRef)(null); 6306 (0, import_element33.useEffect)(() => { 6307 if (selectedItem) { 6308 setActiveCompositeId( 6309 generateItemWrapperCompositeId( 6310 generateCompositeItemIdPrefix(selectedItem) 6311 ) 6312 ); 6313 } 6314 }, [selectedItem, generateCompositeItemIdPrefix]); 6315 const activeItemIndex = data.findIndex( 6316 (item) => isActiveCompositeItem(item, activeCompositeId ?? "") 6317 ); 6318 const previousActiveItemIndex = (0, import_compose4.usePrevious)(activeItemIndex); 6319 const isActiveIdInList = activeItemIndex !== -1; 6320 const selectCompositeItem = (0, import_element33.useCallback)( 6321 (targetIndex, generateCompositeId) => { 6322 const clampedIndex = Math.min( 6323 data.length - 1, 6324 Math.max(0, targetIndex) 6325 ); 6326 if (!data[clampedIndex]) { 6327 return; 6328 } 6329 const itemIdPrefix = generateCompositeItemIdPrefix( 6330 data[clampedIndex] 6331 ); 6332 const targetCompositeItemId = generateCompositeId(itemIdPrefix); 6333 setActiveCompositeId(targetCompositeItemId); 6334 if (compositeRef.current?.contains( 6335 compositeRef.current.ownerDocument.activeElement 6336 )) { 6337 document.getElementById(targetCompositeItemId)?.focus(); 6338 } 6339 }, 6340 [data, generateCompositeItemIdPrefix] 6341 ); 6342 (0, import_element33.useEffect)(() => { 6343 const wasActiveIdInList = previousActiveItemIndex !== void 0 && previousActiveItemIndex !== -1; 6344 if (!isActiveIdInList && wasActiveIdInList) { 6345 selectCompositeItem( 6346 previousActiveItemIndex, 6347 generateItemWrapperCompositeId 6348 ); 6349 } 6350 }, [isActiveIdInList, selectCompositeItem, previousActiveItemIndex]); 6351 const onDropdownTriggerKeyDown = (0, import_element33.useCallback)( 6352 (event) => { 6353 if (event.key === "ArrowDown") { 6354 event.preventDefault(); 6355 selectCompositeItem( 6356 activeItemIndex + 1, 6357 generateDropdownTriggerCompositeId 6358 ); 6359 } 6360 if (event.key === "ArrowUp") { 6361 event.preventDefault(); 6362 selectCompositeItem( 6363 activeItemIndex - 1, 6364 generateDropdownTriggerCompositeId 6365 ); 6366 } 6367 }, 6368 [selectCompositeItem, activeItemIndex] 6369 ); 6370 const hasData = !!data?.length; 6371 const groupField = view.groupBy?.field ? fields2.find((field) => field.id === view.groupBy?.field) : null; 6372 const dataByGroup = hasData && groupField ? getDataByGroup(data, groupField) : null; 6373 const isInfiniteScroll = view.infiniteScrollEnabled && !dataByGroup; 6374 if (!hasData) { 6375 return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)( 6376 "div", 6377 { 6378 className: clsx_default("dataviews-no-results", { 6379 "is-refreshing": isDelayedLoading 6380 }), 6381 children: empty 6382 } 6383 ); 6384 } 6385 if (hasData && groupField && dataByGroup) { 6386 return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)( 6387 import_components12.Composite, 6388 { 6389 ref: compositeRef, 6390 id: `$baseId}`, 6391 render: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", {}), 6392 className: "dataviews-view-list__group", 6393 role: "grid", 6394 activeId: activeCompositeId, 6395 setActiveId: setActiveCompositeId, 6396 children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)( 6397 Stack, 6398 { 6399 direction: "column", 6400 gap: "lg", 6401 className: clsx_default("dataviews-view-list", className), 6402 children: Array.from(dataByGroup.entries()).map( 6403 ([groupName, groupItems]) => /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)( 6404 Stack, 6405 { 6406 direction: "column", 6407 gap: "sm", 6408 children: [ 6409 /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("h3", { className: "dataviews-view-list__group-header", children: view.groupBy?.showLabel === false ? groupName : (0, import_i18n14.sprintf)( 6410 // translators: 1: The label of the field e.g. "Date". 2: The value of the field, e.g.: "May 2022". 6411 (0, import_i18n14.__)("%1$s: %2$s"), 6412 groupField.label, 6413 groupName 6414 ) }), 6415 groupItems.map((item) => { 6416 const id = generateCompositeItemIdPrefix(item); 6417 return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)( 6418 ListItem, 6419 { 6420 view, 6421 idPrefix: id, 6422 actions: actions2, 6423 item, 6424 isSelected: item === selectedItem, 6425 onSelect, 6426 mediaField, 6427 titleField, 6428 descriptionField, 6429 otherFields, 6430 onDropdownTriggerKeyDown 6431 }, 6432 id 6433 ); 6434 }) 6435 ] 6436 }, 6437 groupName 6438 ) 6439 ) 6440 } 6441 ) 6442 } 6443 ); 6444 } 6445 return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_jsx_runtime55.Fragment, { children: [ 6446 /* @__PURE__ */ (0, import_jsx_runtime55.jsx)( 6447 import_components12.Composite, 6448 { 6449 ref: compositeRef, 6450 id: baseId, 6451 render: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", {}), 6452 className: clsx_default("dataviews-view-list", className, { 6453 [`has-$view.layout?.density}-density`]: view.layout?.density && ["compact", "comfortable"].includes( 6454 view.layout.density 6455 ), 6456 "is-refreshing": !isInfiniteScroll && isDelayedLoading 6457 }), 6458 role: view.infiniteScrollEnabled ? "feed" : "grid", 6459 activeId: activeCompositeId, 6460 setActiveId: setActiveCompositeId, 6461 inert: !isInfiniteScroll && !!isLoading ? "true" : void 0, 6462 children: data.map((item, index) => { 6463 const id = generateCompositeItemIdPrefix(item); 6464 return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)( 6465 ListItem, 6466 { 6467 view, 6468 idPrefix: id, 6469 actions: actions2, 6470 item, 6471 isSelected: item === selectedItem, 6472 onSelect, 6473 mediaField, 6474 titleField, 6475 descriptionField, 6476 otherFields, 6477 onDropdownTriggerKeyDown, 6478 posinset: view.infiniteScrollEnabled ? index + 1 : void 0 6479 }, 6480 id 6481 ); 6482 }) 6483 } 6484 ), 6485 isInfiniteScroll && isLoading && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("p", { className: "dataviews-loading-more", children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_components12.Spinner, {}) }) 6486 ] }); 6487 } 6488 6489 // packages/dataviews/build-module/components/dataviews-layouts/activity/index.mjs 6490 var import_components14 = __toESM(require_components(), 1); 6491 6492 // packages/dataviews/build-module/components/dataviews-layouts/activity/activity-group.mjs 6493 var import_i18n15 = __toESM(require_i18n(), 1); 6494 var import_element34 = __toESM(require_element(), 1); 6495 var import_jsx_runtime56 = __toESM(require_jsx_runtime(), 1); 6496 function ActivityGroup({ 6497 groupName, 6498 groupData, 6499 groupField, 6500 showLabel = true, 6501 children 6502 }) { 6503 const groupHeader = showLabel ? (0, import_element34.createInterpolateElement)( 6504 // translators: %s: The label of the field e.g. "Status". 6505 (0, import_i18n15.sprintf)((0, import_i18n15.__)("%s: <groupName />"), groupField.label).trim(), 6506 { 6507 groupName: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)( 6508 groupField.render, 6509 { 6510 item: groupData[0], 6511 field: groupField 6512 } 6513 ) 6514 } 6515 ) : /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(groupField.render, { item: groupData[0], field: groupField }); 6516 return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)( 6517 Stack, 6518 { 6519 direction: "column", 6520 className: "dataviews-view-activity__group", 6521 children: [ 6522 /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("h3", { className: "dataviews-view-activity__group-header", children: groupHeader }), 6523 children 6524 ] 6525 }, 6526 groupName 6527 ); 6528 } 6529 6530 // packages/dataviews/build-module/components/dataviews-layouts/activity/activity-item.mjs 6531 var import_components13 = __toESM(require_components(), 1); 6532 var import_element35 = __toESM(require_element(), 1); 6533 var import_data4 = __toESM(require_data(), 1); 6534 var import_compose5 = __toESM(require_compose(), 1); 6535 var import_jsx_runtime57 = __toESM(require_jsx_runtime(), 1); 6536 function ActivityItem(props) { 6537 const { 6538 view, 6539 actions: actions2, 6540 item, 6541 titleField, 6542 mediaField, 6543 descriptionField, 6544 otherFields, 6545 posinset, 6546 onClickItem, 6547 renderItemLink, 6548 isItemClickable 6549 } = props; 6550 const { 6551 showTitle = true, 6552 showMedia = true, 6553 showDescription = true, 6554 infiniteScrollEnabled 6555 } = view; 6556 const itemRef = (0, import_element35.useRef)(null); 6557 const registry = (0, import_data4.useRegistry)(); 6558 const { paginationInfo } = (0, import_element35.useContext)(dataviews_context_default); 6559 const { primaryActions, eligibleActions } = (0, import_element35.useMemo)(() => { 6560 const _eligibleActions = actions2.filter( 6561 (action) => !action.isEligible || action.isEligible(item) 6562 ); 6563 const _primaryActions = _eligibleActions.filter( 6564 (action) => action.isPrimary 6565 ); 6566 return { 6567 primaryActions: _primaryActions, 6568 eligibleActions: _eligibleActions 6569 }; 6570 }, [actions2, item]); 6571 const isMobileViewport = (0, import_compose5.useViewportMatch)("medium", "<"); 6572 const density = view.layout?.density ?? "balanced"; 6573 const mediaContent = showMedia && density !== "compact" && mediaField?.render ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)( 6574 mediaField.render, 6575 { 6576 item, 6577 field: mediaField, 6578 config: { 6579 sizes: density === "comfortable" ? "32px" : "24px" 6580 } 6581 } 6582 ) : null; 6583 const renderedMediaField = /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "dataviews-view-activity__item-type-icon", children: mediaContent || /* @__PURE__ */ (0, import_jsx_runtime57.jsx)( 6584 "span", 6585 { 6586 className: "dataviews-view-activity__item-bullet", 6587 "aria-hidden": "true" 6588 } 6589 ) }); 6590 const renderedTitleField = showTitle && titleField?.render ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(titleField.render, { item, field: titleField }) : null; 6591 const verticalGap = (0, import_element35.useMemo)(() => { 6592 switch (density) { 6593 case "comfortable": 6594 return "md"; 6595 default: 6596 return "sm"; 6597 } 6598 }, [density]); 6599 return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)( 6600 "div", 6601 { 6602 ref: itemRef, 6603 role: infiniteScrollEnabled ? "article" : void 0, 6604 "aria-posinset": posinset, 6605 "aria-setsize": infiniteScrollEnabled ? paginationInfo.totalItems : void 0, 6606 className: clsx_default( 6607 "dataviews-view-activity__item", 6608 density === "compact" && "is-compact", 6609 density === "balanced" && "is-balanced", 6610 density === "comfortable" && "is-comfortable" 6611 ), 6612 children: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(Stack, { direction: "row", gap: "lg", justify: "start", align: "flex-start", children: [ 6613 /* @__PURE__ */ (0, import_jsx_runtime57.jsx)( 6614 Stack, 6615 { 6616 direction: "column", 6617 gap: "xs", 6618 align: "center", 6619 className: "dataviews-view-activity__item-type", 6620 children: renderedMediaField 6621 } 6622 ), 6623 /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)( 6624 Stack, 6625 { 6626 direction: "column", 6627 gap: verticalGap, 6628 align: "flex-start", 6629 className: "dataviews-view-activity__item-content", 6630 children: [ 6631 renderedTitleField && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)( 6632 ItemClickWrapper, 6633 { 6634 item, 6635 isItemClickable, 6636 onClickItem, 6637 renderItemLink, 6638 className: "dataviews-view-activity__item-title", 6639 children: renderedTitleField 6640 } 6641 ), 6642 showDescription && descriptionField && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "dataviews-view-activity__item-description", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)( 6643 descriptionField.render, 6644 { 6645 item, 6646 field: descriptionField 6647 } 6648 ) }), 6649 /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "dataviews-view-activity__item-fields", children: otherFields.map((field) => /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)( 6650 "div", 6651 { 6652 className: "dataviews-view-activity__item-field", 6653 children: [ 6654 /* @__PURE__ */ (0, import_jsx_runtime57.jsx)( 6655 import_components13.VisuallyHidden, 6656 { 6657 as: "span", 6658 className: "dataviews-view-activity__item-field-label", 6659 children: field.label 6660 } 6661 ), 6662 /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "dataviews-view-activity__item-field-value", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)( 6663 field.render, 6664 { 6665 item, 6666 field 6667 } 6668 ) }) 6669 ] 6670 }, 6671 field.id 6672 )) }), 6673 !!primaryActions?.length && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)( 6674 PrimaryActions, 6675 { 6676 item, 6677 actions: primaryActions, 6678 registry, 6679 buttonVariant: "secondary" 6680 } 6681 ) 6682 ] 6683 } 6684 ), 6685 (primaryActions.length < eligibleActions.length || // Since we hide primary actions on mobile, we need to show the menu 6686 // there if there are any actions at all. 6687 isMobileViewport && // At the same time, only show the menu if there are actions to show. 6688 eligibleActions.length > 0) && /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "dataviews-view-activity__item-actions", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)( 6689 ItemActions, 6690 { 6691 item, 6692 actions: eligibleActions, 6693 isCompact: true 6694 } 6695 ) }) 6696 ] }) 6697 } 6698 ); 6699 } 6700 var activity_item_default = ActivityItem; 6701 6702 // packages/dataviews/build-module/components/dataviews-layouts/activity/activity-items.mjs 6703 var import_react9 = __toESM(require_react(), 1); 6704 function isDefined3(item) { 6705 return !!item; 6706 } 6707 function ActivityItems(props) { 6708 const { data, fields: fields2, getItemId, view } = props; 6709 const titleField = fields2.find((field) => field.id === view.titleField); 6710 const mediaField = fields2.find((field) => field.id === view.mediaField); 6711 const descriptionField = fields2.find( 6712 (field) => field.id === view.descriptionField 6713 ); 6714 const otherFields = (view?.fields ?? []).map((fieldId) => fields2.find((f2) => fieldId === f2.id)).filter(isDefined3); 6715 return data.map((item, index) => { 6716 return /* @__PURE__ */ (0, import_react9.createElement)( 6717 activity_item_default, 6718 { 6719 ...props, 6720 key: getItemId(item), 6721 item, 6722 mediaField, 6723 titleField, 6724 descriptionField, 6725 otherFields, 6726 posinset: view.infiniteScrollEnabled ? index + 1 : void 0 6727 } 6728 ); 6729 }); 6730 } 6731 6732 // packages/dataviews/build-module/components/dataviews-layouts/activity/index.mjs 6733 var import_jsx_runtime58 = __toESM(require_jsx_runtime(), 1); 6734 function ViewActivity(props) { 6735 const { empty, data, fields: fields2, isLoading, view, className } = props; 6736 const isDelayedLoading = useDelayedLoading(!!isLoading); 6737 const hasData = !!data?.length; 6738 const groupField = view.groupBy?.field ? fields2.find((field) => field.id === view.groupBy?.field) : null; 6739 const dataByGroup = hasData && groupField ? getDataByGroup(data, groupField) : null; 6740 const isInfiniteScroll = view.infiniteScrollEnabled && !dataByGroup; 6741 if (!hasData) { 6742 return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)( 6743 "div", 6744 { 6745 className: clsx_default("dataviews-no-results", { 6746 "is-refreshing": isDelayedLoading 6747 }), 6748 children: empty 6749 } 6750 ); 6751 } 6752 const isInert = !isInfiniteScroll && !!isLoading; 6753 const wrapperClassName = clsx_default("dataviews-view-activity", className, { 6754 "is-refreshing": !isInfiniteScroll && isDelayedLoading 6755 }); 6756 const groupedEntries = dataByGroup ? Array.from(dataByGroup.entries()) : []; 6757 if (hasData && groupField && dataByGroup) { 6758 return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)( 6759 Stack, 6760 { 6761 direction: "column", 6762 gap: "sm", 6763 className: wrapperClassName, 6764 inert: isInert ? "true" : void 0, 6765 children: groupedEntries.map( 6766 ([groupName, groupData]) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)( 6767 ActivityGroup, 6768 { 6769 groupName, 6770 groupData, 6771 groupField, 6772 showLabel: view.groupBy?.showLabel !== false, 6773 children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)( 6774 ActivityItems, 6775 { 6776 ...props, 6777 data: groupData 6778 } 6779 ) 6780 }, 6781 groupName 6782 ) 6783 ) 6784 } 6785 ); 6786 } 6787 return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(import_jsx_runtime58.Fragment, { children: [ 6788 /* @__PURE__ */ (0, import_jsx_runtime58.jsx)( 6789 "div", 6790 { 6791 className: wrapperClassName, 6792 role: view.infiniteScrollEnabled ? "feed" : void 0, 6793 inert: isInert ? "true" : void 0, 6794 children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(ActivityItems, { ...props }) 6795 } 6796 ), 6797 isInfiniteScroll && isLoading && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("p", { className: "dataviews-loading-more", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(import_components14.Spinner, {}) }) 6798 ] }); 6799 } 6800 6801 // packages/dataviews/build-module/components/dataviews-layouts/picker-grid/index.mjs 6802 var import_components17 = __toESM(require_components(), 1); 6803 var import_i18n18 = __toESM(require_i18n(), 1); 6804 var import_compose6 = __toESM(require_compose(), 1); 6805 var import_element38 = __toESM(require_element(), 1); 6806 6807 // packages/dataviews/build-module/components/dataviews-picker-footer/index.mjs 6808 var import_components16 = __toESM(require_components(), 1); 6809 var import_data5 = __toESM(require_data(), 1); 6810 var import_element37 = __toESM(require_element(), 1); 6811 var import_i18n17 = __toESM(require_i18n(), 1); 6812 6813 // packages/dataviews/build-module/components/dataviews-pagination/index.mjs 6814 var import_components15 = __toESM(require_components(), 1); 6815 var import_element36 = __toESM(require_element(), 1); 6816 var import_i18n16 = __toESM(require_i18n(), 1); 6817 var import_jsx_runtime59 = __toESM(require_jsx_runtime(), 1); 6818 function DataViewsPagination() { 6819 const { 6820 view, 6821 onChangeView, 6822 paginationInfo: { totalItems = 0, totalPages } 6823 } = (0, import_element36.useContext)(dataviews_context_default); 6824 if (!totalItems || !totalPages || view.infiniteScrollEnabled) { 6825 return null; 6826 } 6827 const currentPage = view.page ?? 1; 6828 const pageSelectOptions = Array.from(Array(totalPages)).map( 6829 (_, i2) => { 6830 const page = i2 + 1; 6831 return { 6832 value: page.toString(), 6833 label: page.toString(), 6834 "aria-label": currentPage === page ? (0, import_i18n16.sprintf)( 6835 // translators: 1: current page number. 2: total number of pages. 6836 (0, import_i18n16.__)("Page %1$d of %2$d"), 6837 currentPage, 6838 totalPages 6839 ) : page.toString() 6840 }; 6841 } 6842 ); 6843 return !!totalItems && totalPages !== 1 && /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)( 6844 Stack, 6845 { 6846 direction: "row", 6847 className: "dataviews-pagination", 6848 justify: "end", 6849 align: "center", 6850 gap: "xl", 6851 children: [ 6852 /* @__PURE__ */ (0, import_jsx_runtime59.jsx)( 6853 Stack, 6854 { 6855 direction: "row", 6856 justify: "flex-start", 6857 align: "center", 6858 gap: "xs", 6859 className: "dataviews-pagination__page-select", 6860 children: (0, import_element36.createInterpolateElement)( 6861 (0, import_i18n16.sprintf)( 6862 // translators: 1: Current page number, 2: Total number of pages. 6863 (0, import_i18n16._x)( 6864 "<div>Page</div>%1$s<div>of %2$d</div>", 6865 "paging" 6866 ), 6867 "<CurrentPage />", 6868 totalPages 6869 ), 6870 { 6871 div: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { "aria-hidden": true }), 6872 CurrentPage: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)( 6873 import_components15.SelectControl, 6874 { 6875 "aria-label": (0, import_i18n16.__)("Current page"), 6876 value: currentPage.toString(), 6877 options: pageSelectOptions, 6878 onChange: (newValue) => { 6879 onChangeView({ 6880 ...view, 6881 page: +newValue 6882 }); 6883 }, 6884 size: "small", 6885 variant: "minimal" 6886 } 6887 ) 6888 } 6889 ) 6890 } 6891 ), 6892 /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(Stack, { direction: "row", gap: "xs", align: "center", children: [ 6893 /* @__PURE__ */ (0, import_jsx_runtime59.jsx)( 6894 import_components15.Button, 6895 { 6896 onClick: () => onChangeView({ 6897 ...view, 6898 page: currentPage - 1 6899 }), 6900 disabled: currentPage === 1, 6901 accessibleWhenDisabled: true, 6902 label: (0, import_i18n16.__)("Previous page"), 6903 icon: (0, import_i18n16.isRTL)() ? next_default : previous_default, 6904 showTooltip: true, 6905 size: "compact", 6906 tooltipPosition: "top" 6907 } 6908 ), 6909 /* @__PURE__ */ (0, import_jsx_runtime59.jsx)( 6910 import_components15.Button, 6911 { 6912 onClick: () => onChangeView({ ...view, page: currentPage + 1 }), 6913 disabled: currentPage >= totalPages, 6914 accessibleWhenDisabled: true, 6915 label: (0, import_i18n16.__)("Next page"), 6916 icon: (0, import_i18n16.isRTL)() ? previous_default : next_default, 6917 showTooltip: true, 6918 size: "compact", 6919 tooltipPosition: "top" 6920 } 6921 ) 6922 ] }) 6923 ] 6924 } 6925 ); 6926 } 6927 var dataviews_pagination_default = (0, import_element36.memo)(DataViewsPagination); 6928 6929 // packages/dataviews/build-module/components/dataviews-picker-footer/index.mjs 6930 var import_jsx_runtime60 = __toESM(require_jsx_runtime(), 1); 6931 function useIsMultiselectPicker(actions2) { 6932 return (0, import_element37.useMemo)(() => { 6933 return actions2?.every((action) => action.supportsBulk); 6934 }, [actions2]); 6935 } 6936 6937 // packages/dataviews/build-module/components/dataviews-layouts/picker-grid/index.mjs 6938 var import_jsx_runtime61 = __toESM(require_jsx_runtime(), 1); 6939 var { Badge: Badge4 } = unlock(import_components17.privateApis); 6940 function GridItem3({ 6941 view, 6942 multiselect, 6943 selection, 6944 onChangeSelection, 6945 getItemId, 6946 item, 6947 mediaField, 6948 titleField, 6949 descriptionField, 6950 regularFields, 6951 badgeFields, 6952 config, 6953 posinset, 6954 setsize 6955 }) { 6956 const { showTitle = true, showMedia = true, showDescription = true } = view; 6957 const id = getItemId(item); 6958 const elementRef = (0, import_element38.useRef)(null); 6959 const isSelected2 = selection.includes(id); 6960 const setElementRef = (element) => { 6961 elementRef.current = element; 6962 }; 6963 useIntersectionObserver(elementRef, posinset); 6964 const renderedMediaField = mediaField?.render ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)( 6965 mediaField.render, 6966 { 6967 item, 6968 field: mediaField, 6969 config 6970 } 6971 ) : null; 6972 const renderedTitleField = showTitle && titleField?.render ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(titleField.render, { item, field: titleField }) : null; 6973 return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)( 6974 import_components17.Composite.Item, 6975 { 6976 ref: setElementRef, 6977 "aria-label": titleField ? titleField.getValue({ item }) || (0, import_i18n18.__)("(no title)") : void 0, 6978 render: ({ children, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Stack, { direction: "column", children, ...props }), 6979 role: "option", 6980 "aria-posinset": posinset, 6981 "aria-setsize": setsize, 6982 className: clsx_default("dataviews-view-picker-grid__card", { 6983 "is-selected": isSelected2 6984 }), 6985 "aria-selected": isSelected2, 6986 onClick: () => { 6987 if (isSelected2) { 6988 onChangeSelection( 6989 selection.filter((itemId) => id !== itemId) 6990 ); 6991 } else { 6992 const newSelection = multiselect ? [...selection, id] : [id]; 6993 onChangeSelection(newSelection); 6994 } 6995 }, 6996 children: [ 6997 showMedia && renderedMediaField && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "dataviews-view-picker-grid__media", children: renderedMediaField }), 6998 showMedia && renderedMediaField && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)( 6999 DataViewsSelectionCheckbox, 7000 { 7001 item, 7002 selection, 7003 onChangeSelection, 7004 getItemId, 7005 titleField, 7006 disabled: false, 7007 "aria-hidden": true, 7008 tabIndex: -1 7009 } 7010 ), 7011 showTitle && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)( 7012 Stack, 7013 { 7014 direction: "row", 7015 justify: "space-between", 7016 className: "dataviews-view-picker-grid__title-actions", 7017 children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "dataviews-view-picker-grid__title-field dataviews-title-field", children: renderedTitleField }) 7018 } 7019 ), 7020 /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(Stack, { direction: "column", gap: "xs", children: [ 7021 showDescription && descriptionField?.render && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)( 7022 descriptionField.render, 7023 { 7024 item, 7025 field: descriptionField 7026 } 7027 ), 7028 !!badgeFields?.length && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)( 7029 Stack, 7030 { 7031 direction: "row", 7032 className: "dataviews-view-picker-grid__badge-fields", 7033 gap: "sm", 7034 wrap: "wrap", 7035 align: "top", 7036 justify: "flex-start", 7037 children: badgeFields.map((field) => { 7038 return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)( 7039 Badge4, 7040 { 7041 className: "dataviews-view-picker-grid__field-value", 7042 children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)( 7043 field.render, 7044 { 7045 item, 7046 field 7047 } 7048 ) 7049 }, 7050 field.id 7051 ); 7052 }) 7053 } 7054 ), 7055 !!regularFields?.length && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)( 7056 Stack, 7057 { 7058 direction: "column", 7059 className: "dataviews-view-picker-grid__fields", 7060 gap: "xs", 7061 children: regularFields.map((field) => { 7062 return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)( 7063 import_components17.Flex, 7064 { 7065 className: "dataviews-view-picker-grid__field", 7066 gap: 1, 7067 justify: "flex-start", 7068 expanded: true, 7069 style: { height: "auto" }, 7070 direction: "row", 7071 children: /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(import_jsx_runtime61.Fragment, { children: [ 7072 /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_components17.FlexItem, { className: "dataviews-view-picker-grid__field-name", children: field.header }), 7073 /* @__PURE__ */ (0, import_jsx_runtime61.jsx)( 7074 import_components17.FlexItem, 7075 { 7076 className: "dataviews-view-picker-grid__field-value", 7077 style: { maxHeight: "none" }, 7078 children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)( 7079 field.render, 7080 { 7081 item, 7082 field 7083 } 7084 ) 7085 } 7086 ) 7087 ] }) 7088 }, 7089 field.id 7090 ); 7091 }) 7092 } 7093 ) 7094 ] }) 7095 ] 7096 }, 7097 id 7098 ); 7099 } 7100 function GridGroup({ 7101 groupName, 7102 groupField, 7103 showLabel = true, 7104 children 7105 }) { 7106 const headerId = (0, import_compose6.useInstanceId)( 7107 GridGroup, 7108 "dataviews-view-picker-grid-group__header" 7109 ); 7110 return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)( 7111 Stack, 7112 { 7113 direction: "column", 7114 gap: "sm", 7115 role: "group", 7116 "aria-labelledby": headerId, 7117 children: [ 7118 /* @__PURE__ */ (0, import_jsx_runtime61.jsx)( 7119 "h3", 7120 { 7121 className: "dataviews-view-picker-grid-group__header", 7122 id: headerId, 7123 children: showLabel ? (0, import_i18n18.sprintf)( 7124 // translators: 1: The label of the field e.g. "Date". 2: The value of the field, e.g.: "May 2022". 7125 (0, import_i18n18.__)("%1$s: %2$s"), 7126 groupField.label, 7127 groupName 7128 ) : groupName 7129 } 7130 ), 7131 children 7132 ] 7133 }, 7134 groupName 7135 ); 7136 } 7137 function ViewPickerGrid({ 7138 actions: actions2, 7139 data, 7140 fields: fields2, 7141 getItemId, 7142 isLoading, 7143 onChangeSelection, 7144 selection, 7145 view, 7146 className, 7147 empty 7148 }) { 7149 const { resizeObserverRef, paginationInfo, itemListLabel } = (0, import_element38.useContext)(dataviews_context_default); 7150 const titleField = fields2.find( 7151 (field) => field.id === view?.titleField 7152 ); 7153 const mediaField = fields2.find( 7154 (field) => field.id === view?.mediaField 7155 ); 7156 const descriptionField = fields2.find( 7157 (field) => field.id === view?.descriptionField 7158 ); 7159 const otherFields = view.fields ?? []; 7160 const { regularFields, badgeFields } = otherFields.reduce( 7161 (accumulator, fieldId) => { 7162 const field = fields2.find((f2) => f2.id === fieldId); 7163 if (!field) { 7164 return accumulator; 7165 } 7166 const key = view.layout?.badgeFields?.includes(fieldId) ? "badgeFields" : "regularFields"; 7167 accumulator[key].push(field); 7168 return accumulator; 7169 }, 7170 { regularFields: [], badgeFields: [] } 7171 ); 7172 const hasData = !!data?.length; 7173 const usedPreviewSize = view.layout?.previewSize; 7174 const isMultiselect = useIsMultiselectPicker(actions2); 7175 const size = "900px"; 7176 const groupField = view.groupBy?.field ? fields2.find((f2) => f2.id === view.groupBy?.field) : null; 7177 const dataByGroup = groupField ? getDataByGroup(data, groupField) : null; 7178 const isInfiniteScroll = (view.infiniteScrollEnabled && !dataByGroup) ?? false; 7179 const currentPage = view?.page ?? 1; 7180 const perPage = view?.perPage ?? 0; 7181 const setSize = isInfiniteScroll ? paginationInfo?.totalItems : void 0; 7182 const gridColumns = useGridColumns(); 7183 const placeholdersNeeded = usePlaceholdersNeeded( 7184 data, 7185 isInfiniteScroll, 7186 gridColumns 7187 ); 7188 return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(import_jsx_runtime61.Fragment, { 7189 // Render multiple groups. 7190 children: [ 7191 hasData && groupField && dataByGroup && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)( 7192 import_components17.Composite, 7193 { 7194 virtualFocus: true, 7195 orientation: "horizontal", 7196 role: "listbox", 7197 "aria-multiselectable": isMultiselect, 7198 className: clsx_default( 7199 "dataviews-view-picker-grid", 7200 className, 7201 { 7202 [`has-$view.layout?.density}-density`]: view.layout?.density && ["compact", "comfortable"].includes( 7203 view.layout.density 7204 ) 7205 } 7206 ), 7207 "aria-label": itemListLabel, 7208 render: ({ children, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime61.jsx)( 7209 Stack, 7210 { 7211 direction: "column", 7212 gap: "lg", 7213 children, 7214 ...props 7215 } 7216 ), 7217 children: Array.from(dataByGroup.entries()).map( 7218 ([groupName, groupItems]) => /* @__PURE__ */ (0, import_jsx_runtime61.jsx)( 7219 GridGroup, 7220 { 7221 groupName, 7222 groupField, 7223 showLabel: view.groupBy?.showLabel !== false, 7224 children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)( 7225 GridItems, 7226 { 7227 previewSize: usedPreviewSize, 7228 style: { 7229 gridTemplateColumns: usedPreviewSize && `repeat(auto-fill, minmax($usedPreviewSize}px, 1fr))` 7230 }, 7231 "aria-busy": isLoading, 7232 ref: resizeObserverRef, 7233 children: groupItems.map((item) => { 7234 const posInSet = item.position ?? (currentPage - 1) * perPage + data.indexOf(item) + 1; 7235 return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)( 7236 GridItem3, 7237 { 7238 view, 7239 multiselect: isMultiselect, 7240 selection, 7241 onChangeSelection, 7242 getItemId, 7243 item, 7244 mediaField, 7245 titleField, 7246 descriptionField, 7247 regularFields, 7248 badgeFields, 7249 config: { 7250 sizes: size 7251 }, 7252 posinset: posInSet, 7253 setsize: setSize 7254 }, 7255 getItemId(item) 7256 ); 7257 }) 7258 } 7259 ) 7260 }, 7261 groupName 7262 ) 7263 ) 7264 } 7265 ), 7266 // Render a single grid with all data. 7267 hasData && !dataByGroup && /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)( 7268 import_components17.Composite, 7269 { 7270 render: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)( 7271 GridItems, 7272 { 7273 className: clsx_default( 7274 "dataviews-view-picker-grid", 7275 className, 7276 { 7277 [`has-$view.layout?.density}-density`]: view.layout?.density && [ 7278 "compact", 7279 "comfortable" 7280 ].includes(view.layout.density) 7281 } 7282 ), 7283 previewSize: usedPreviewSize, 7284 "aria-busy": isLoading, 7285 ref: resizeObserverRef 7286 } 7287 ), 7288 virtualFocus: true, 7289 orientation: "horizontal", 7290 role: "listbox", 7291 "aria-multiselectable": isMultiselect, 7292 "aria-label": itemListLabel, 7293 children: [ 7294 Array.from({ length: placeholdersNeeded }).map( 7295 (_, index) => /* @__PURE__ */ (0, import_jsx_runtime61.jsx)( 7296 import_components17.Composite.Item, 7297 { 7298 render: ({ children, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime61.jsx)( 7299 Stack, 7300 { 7301 direction: "column", 7302 children, 7303 ...props 7304 } 7305 ), 7306 role: "option", 7307 "aria-hidden": true, 7308 tabIndex: -1, 7309 className: "dataviews-view-picker-grid__card dataviews-view-picker-grid__placeholder" 7310 }, 7311 `placeholder-$index}` 7312 ) 7313 ), 7314 data.map((item) => { 7315 const posinset = item.position; 7316 return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)( 7317 GridItem3, 7318 { 7319 view, 7320 multiselect: isMultiselect, 7321 selection, 7322 onChangeSelection, 7323 getItemId, 7324 item, 7325 mediaField, 7326 titleField, 7327 descriptionField, 7328 regularFields, 7329 badgeFields, 7330 config: { 7331 sizes: size 7332 }, 7333 posinset, 7334 setsize: setSize 7335 }, 7336 getItemId(item) 7337 ); 7338 }) 7339 ] 7340 } 7341 ), 7342 // Render empty state. 7343 !hasData && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)( 7344 "div", 7345 { 7346 className: clsx_default({ 7347 "dataviews-loading": isLoading, 7348 "dataviews-no-results": !isLoading 7349 }), 7350 children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("p", { children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_components17.Spinner, {}) }) : empty 7351 } 7352 ), 7353 hasData && isLoading && /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("p", { className: "dataviews-loading-more", children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_components17.Spinner, {}) }) 7354 ] 7355 }); 7356 } 7357 var picker_grid_default = ViewPickerGrid; 7358 7359 // packages/dataviews/build-module/components/dataviews-layouts/picker-table/index.mjs 7360 var import_i18n19 = __toESM(require_i18n(), 1); 7361 var import_components18 = __toESM(require_components(), 1); 7362 var import_element39 = __toESM(require_element(), 1); 7363 var import_jsx_runtime62 = __toESM(require_jsx_runtime(), 1); 7364 function TableColumnField2({ 7365 item, 7366 fields: fields2, 7367 column, 7368 align 7369 }) { 7370 const field = fields2.find((f2) => f2.id === column); 7371 if (!field) { 7372 return null; 7373 } 7374 const className = clsx_default("dataviews-view-table__cell-content-wrapper", { 7375 "dataviews-view-table__cell-align-end": align === "end", 7376 "dataviews-view-table__cell-align-center": align === "center" 7377 }); 7378 return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className, children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(field.render, { item, field }) }); 7379 } 7380 function TableRow2({ 7381 item, 7382 fields: fields2, 7383 id, 7384 view, 7385 titleField, 7386 mediaField, 7387 descriptionField, 7388 selection, 7389 getItemId, 7390 onChangeSelection, 7391 multiselect, 7392 posinset 7393 }) { 7394 const { paginationInfo } = (0, import_element39.useContext)(dataviews_context_default); 7395 const isSelected2 = selection.includes(id); 7396 const [isHovered, setIsHovered] = (0, import_element39.useState)(false); 7397 const elementRef = (0, import_element39.useRef)(null); 7398 const setElementRef = (element) => { 7399 elementRef.current = element; 7400 }; 7401 useIntersectionObserver(elementRef, posinset); 7402 const { 7403 showTitle = true, 7404 showMedia = true, 7405 showDescription = true, 7406 infiniteScrollEnabled 7407 } = view; 7408 const handleMouseEnter = () => { 7409 setIsHovered(true); 7410 }; 7411 const handleMouseLeave = () => { 7412 setIsHovered(false); 7413 }; 7414 const columns = view.fields ?? []; 7415 const hasPrimaryColumn = titleField && showTitle || mediaField && showMedia || descriptionField && showDescription; 7416 return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)( 7417 import_components18.Composite.Item, 7418 { 7419 ref: setElementRef, 7420 render: ({ children, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime62.jsx)( 7421 "tr", 7422 { 7423 className: clsx_default("dataviews-view-table__row", { 7424 "is-selected": isSelected2, 7425 "is-hovered": isHovered 7426 }), 7427 onMouseEnter: handleMouseEnter, 7428 onMouseLeave: handleMouseLeave, 7429 children, 7430 ...props 7431 } 7432 ), 7433 "aria-selected": isSelected2, 7434 "aria-setsize": paginationInfo.totalItems || void 0, 7435 "aria-posinset": posinset, 7436 role: infiniteScrollEnabled ? "article" : "option", 7437 onClick: () => { 7438 if (isSelected2) { 7439 onChangeSelection( 7440 selection.filter((itemId) => id !== itemId) 7441 ); 7442 } else { 7443 const newSelection = multiselect ? [...selection, id] : [id]; 7444 onChangeSelection(newSelection); 7445 } 7446 }, 7447 children: [ 7448 /* @__PURE__ */ (0, import_jsx_runtime62.jsx)( 7449 "td", 7450 { 7451 className: "dataviews-view-table__checkbox-column", 7452 role: "presentation", 7453 children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "dataviews-view-table__cell-content-wrapper", children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)( 7454 DataViewsSelectionCheckbox, 7455 { 7456 item, 7457 selection, 7458 onChangeSelection, 7459 getItemId, 7460 titleField, 7461 disabled: false, 7462 "aria-hidden": true, 7463 tabIndex: -1 7464 } 7465 ) }) 7466 } 7467 ), 7468 hasPrimaryColumn && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("td", { role: "presentation", children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)( 7469 column_primary_default, 7470 { 7471 item, 7472 titleField: showTitle ? titleField : void 0, 7473 mediaField: showMedia ? mediaField : void 0, 7474 descriptionField: showDescription ? descriptionField : void 0, 7475 isItemClickable: () => false 7476 } 7477 ) }), 7478 columns.map((column) => { 7479 const { width, maxWidth, minWidth, align } = view.layout?.styles?.[column] ?? {}; 7480 return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)( 7481 "td", 7482 { 7483 style: { 7484 width, 7485 maxWidth, 7486 minWidth 7487 }, 7488 role: "presentation", 7489 children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)( 7490 TableColumnField2, 7491 { 7492 fields: fields2, 7493 item, 7494 column, 7495 align 7496 } 7497 ) 7498 }, 7499 column 7500 ); 7501 }) 7502 ] 7503 }, 7504 id 7505 ); 7506 } 7507 function ViewPickerTable({ 7508 actions: actions2, 7509 data, 7510 fields: fields2, 7511 getItemId, 7512 isLoading = false, 7513 onChangeView, 7514 onChangeSelection, 7515 selection, 7516 setOpenedFilter, 7517 view, 7518 className, 7519 empty 7520 }) { 7521 const headerMenuRefs = (0, import_element39.useRef)(/* @__PURE__ */ new Map()); 7522 const headerMenuToFocusRef = (0, import_element39.useRef)(void 0); 7523 const [nextHeaderMenuToFocus, setNextHeaderMenuToFocus] = (0, import_element39.useState)(); 7524 const isMultiselect = useIsMultiselectPicker(actions2) ?? false; 7525 (0, import_element39.useEffect)(() => { 7526 if (headerMenuToFocusRef.current) { 7527 headerMenuToFocusRef.current.focus(); 7528 headerMenuToFocusRef.current = void 0; 7529 } 7530 }); 7531 const groupField = view.groupBy?.field ? fields2.find((f2) => f2.id === view.groupBy?.field) : null; 7532 const dataByGroup = groupField ? getDataByGroup(data, groupField) : null; 7533 const isInfiniteScroll = view.infiniteScrollEnabled && !dataByGroup; 7534 const tableNoticeId = (0, import_element39.useId)(); 7535 if (nextHeaderMenuToFocus) { 7536 headerMenuToFocusRef.current = nextHeaderMenuToFocus; 7537 setNextHeaderMenuToFocus(void 0); 7538 return; 7539 } 7540 const onHide = (field) => { 7541 const hidden = headerMenuRefs.current.get(field.id); 7542 const fallback = hidden ? headerMenuRefs.current.get(hidden.fallback) : void 0; 7543 setNextHeaderMenuToFocus(fallback?.node); 7544 }; 7545 const hasData = !!data?.length; 7546 const titleField = fields2.find((field) => field.id === view.titleField); 7547 const mediaField = fields2.find((field) => field.id === view.mediaField); 7548 const descriptionField = fields2.find( 7549 (field) => field.id === view.descriptionField 7550 ); 7551 const { showTitle = true, showMedia = true, showDescription = true } = view; 7552 const hasPrimaryColumn = titleField && showTitle || mediaField && showMedia || descriptionField && showDescription; 7553 const columns = view.fields ?? []; 7554 const headerMenuRef = (column, index) => (node) => { 7555 if (node) { 7556 headerMenuRefs.current.set(column, { 7557 node, 7558 fallback: columns[index > 0 ? index - 1 : 1] 7559 }); 7560 } else { 7561 headerMenuRefs.current.delete(column); 7562 } 7563 }; 7564 return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(import_jsx_runtime62.Fragment, { children: [ 7565 /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)( 7566 "table", 7567 { 7568 className: clsx_default( 7569 "dataviews-view-table", 7570 "dataviews-view-picker-table", 7571 className, 7572 { 7573 [`has-$view.layout?.density}-density`]: view.layout?.density && ["compact", "comfortable"].includes( 7574 view.layout.density 7575 ) 7576 } 7577 ), 7578 "aria-busy": isLoading, 7579 "aria-describedby": tableNoticeId, 7580 role: isInfiniteScroll ? "feed" : "listbox", 7581 children: [ 7582 /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("thead", { role: "presentation", children: /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)( 7583 "tr", 7584 { 7585 className: "dataviews-view-table__row", 7586 role: "presentation", 7587 children: [ 7588 /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("th", { className: "dataviews-view-table__checkbox-column", children: isMultiselect && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)( 7589 BulkSelectionCheckbox, 7590 { 7591 selection, 7592 onChangeSelection, 7593 data, 7594 actions: actions2, 7595 getItemId, 7596 disableSelectAll: isInfiniteScroll 7597 } 7598 ) }), 7599 hasPrimaryColumn && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("th", { children: titleField && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)( 7600 column_header_menu_default, 7601 { 7602 ref: headerMenuRef( 7603 titleField.id, 7604 0 7605 ), 7606 fieldId: titleField.id, 7607 view, 7608 fields: fields2, 7609 onChangeView, 7610 onHide, 7611 setOpenedFilter, 7612 canMove: false 7613 } 7614 ) }), 7615 columns.map((column, index) => { 7616 const { width, maxWidth, minWidth, align } = view.layout?.styles?.[column] ?? {}; 7617 return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)( 7618 "th", 7619 { 7620 style: { 7621 width, 7622 maxWidth, 7623 minWidth, 7624 textAlign: align 7625 }, 7626 "aria-sort": view.sort?.direction && view.sort?.field === column ? sortValues[view.sort.direction] : void 0, 7627 scope: "col", 7628 children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)( 7629 column_header_menu_default, 7630 { 7631 ref: headerMenuRef(column, index), 7632 fieldId: column, 7633 view, 7634 fields: fields2, 7635 onChangeView, 7636 onHide, 7637 setOpenedFilter, 7638 canMove: view.layout?.enableMoving ?? true 7639 } 7640 ) 7641 }, 7642 column 7643 ); 7644 }) 7645 ] 7646 } 7647 ) }), 7648 hasData && groupField && dataByGroup ? Array.from(dataByGroup.entries()).map( 7649 ([groupName, groupItems]) => /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)( 7650 import_components18.Composite, 7651 { 7652 virtualFocus: true, 7653 orientation: "vertical", 7654 render: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("tbody", { role: "group" }), 7655 children: [ 7656 /* @__PURE__ */ (0, import_jsx_runtime62.jsx)( 7657 "tr", 7658 { 7659 className: "dataviews-view-table__group-header-row", 7660 role: "presentation", 7661 children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)( 7662 "td", 7663 { 7664 colSpan: columns.length + (hasPrimaryColumn ? 1 : 0) + 1, 7665 className: "dataviews-view-table__group-header-cell", 7666 role: "presentation", 7667 children: view.groupBy?.showLabel === false ? groupName : (0, import_i18n19.sprintf)( 7668 // translators: 1: The label of the field e.g. "Date". 2: The value of the field, e.g.: "May 2022". 7669 (0, import_i18n19.__)("%1$s: %2$s"), 7670 groupField.label, 7671 groupName 7672 ) 7673 } 7674 ) 7675 } 7676 ), 7677 groupItems.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime62.jsx)( 7678 TableRow2, 7679 { 7680 item, 7681 fields: fields2, 7682 id: getItemId(item) || index.toString(), 7683 view, 7684 titleField, 7685 mediaField, 7686 descriptionField, 7687 selection, 7688 getItemId, 7689 onChangeSelection, 7690 multiselect: isMultiselect 7691 }, 7692 getItemId(item) 7693 )) 7694 ] 7695 }, 7696 `group-$groupName}` 7697 ) 7698 ) : /* @__PURE__ */ (0, import_jsx_runtime62.jsx)( 7699 import_components18.Composite, 7700 { 7701 render: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("tbody", { role: "presentation" }), 7702 virtualFocus: true, 7703 orientation: "vertical", 7704 children: hasData && data.map((item, index) => { 7705 const itemId = getItemId(item); 7706 const posinset = item.position; 7707 return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)( 7708 TableRow2, 7709 { 7710 item, 7711 fields: fields2, 7712 id: itemId || index.toString(), 7713 view, 7714 titleField, 7715 mediaField, 7716 descriptionField, 7717 selection, 7718 getItemId, 7719 onChangeSelection, 7720 multiselect: isMultiselect, 7721 posinset 7722 }, 7723 itemId 7724 ); 7725 }) 7726 } 7727 ) 7728 ] 7729 } 7730 ), 7731 /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)( 7732 "div", 7733 { 7734 className: clsx_default({ 7735 "dataviews-loading": isLoading, 7736 "dataviews-no-results": !hasData && !isLoading 7737 }), 7738 id: tableNoticeId, 7739 children: [ 7740 !hasData && (isLoading ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("p", { children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_components18.Spinner, {}) }) : empty), 7741 hasData && isLoading && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("p", { className: "dataviews-loading-more", children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_components18.Spinner, {}) }) 7742 ] 7743 } 7744 ) 7745 ] }); 7746 } 7747 var picker_table_default = ViewPickerTable; 7748 7749 // packages/dataviews/build-module/components/dataviews-layouts/utils/density-picker.mjs 7750 var import_components19 = __toESM(require_components(), 1); 7751 var import_i18n20 = __toESM(require_i18n(), 1); 7752 var import_element40 = __toESM(require_element(), 1); 7753 var import_jsx_runtime63 = __toESM(require_jsx_runtime(), 1); 7754 function DensityPicker() { 7755 const context = (0, import_element40.useContext)(dataviews_context_default); 7756 const view = context.view; 7757 return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)( 7758 import_components19.__experimentalToggleGroupControl, 7759 { 7760 size: "__unstable-large", 7761 label: (0, import_i18n20.__)("Density"), 7762 value: view.layout?.density || "balanced", 7763 onChange: (value) => { 7764 context.onChangeView({ 7765 ...view, 7766 layout: { 7767 ...view.layout, 7768 density: value 7769 } 7770 }); 7771 }, 7772 isBlock: true, 7773 children: [ 7774 /* @__PURE__ */ (0, import_jsx_runtime63.jsx)( 7775 import_components19.__experimentalToggleGroupControlOption, 7776 { 7777 value: "comfortable", 7778 label: (0, import_i18n20._x)( 7779 "Comfortable", 7780 "Density option for DataView layout" 7781 ) 7782 }, 7783 "comfortable" 7784 ), 7785 /* @__PURE__ */ (0, import_jsx_runtime63.jsx)( 7786 import_components19.__experimentalToggleGroupControlOption, 7787 { 7788 value: "balanced", 7789 label: (0, import_i18n20._x)("Balanced", "Density option for DataView layout") 7790 }, 7791 "balanced" 7792 ), 7793 /* @__PURE__ */ (0, import_jsx_runtime63.jsx)( 7794 import_components19.__experimentalToggleGroupControlOption, 7795 { 7796 value: "compact", 7797 label: (0, import_i18n20._x)("Compact", "Density option for DataView layout") 7798 }, 7799 "compact" 7800 ) 7801 ] 7802 } 7803 ); 7804 } 7805 7806 // packages/dataviews/build-module/components/dataviews-layouts/utils/preview-size-picker.mjs 7807 var import_components20 = __toESM(require_components(), 1); 7808 var import_i18n21 = __toESM(require_i18n(), 1); 7809 var import_element41 = __toESM(require_element(), 1); 7810 var import_jsx_runtime64 = __toESM(require_jsx_runtime(), 1); 7811 var imageSizes2 = [ 7812 { 7813 value: 120, 7814 breakpoint: 1 7815 }, 7816 { 7817 value: 170, 7818 breakpoint: 1 7819 }, 7820 { 7821 value: 230, 7822 breakpoint: 1 7823 }, 7824 { 7825 value: 290, 7826 breakpoint: 1112 7827 // at minimum image width, 4 images display at this container size 7828 }, 7829 { 7830 value: 350, 7831 breakpoint: 1636 7832 // at minimum image width, 6 images display at this container size 7833 }, 7834 { 7835 value: 430, 7836 breakpoint: 588 7837 // at minimum image width, 2 images display at this container size 7838 } 7839 ]; 7840 function PreviewSizePicker() { 7841 const context = (0, import_element41.useContext)(dataviews_context_default); 7842 const view = context.view; 7843 const breakValues = imageSizes2.filter((size) => { 7844 return context.containerWidth >= size.breakpoint; 7845 }); 7846 const layoutPreviewSize = view.layout?.previewSize ?? 230; 7847 const previewSizeToUse = breakValues.map((size, index) => ({ ...size, index })).filter((size) => size.value <= layoutPreviewSize).sort((a2, b2) => b2.value - a2.value)[0]?.index ?? 0; 7848 const marks = breakValues.map((size, index) => { 7849 return { 7850 value: index 7851 }; 7852 }); 7853 return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)( 7854 import_components20.RangeControl, 7855 { 7856 __next40pxDefaultSize: true, 7857 showTooltip: false, 7858 label: (0, import_i18n21.__)("Preview size"), 7859 value: previewSizeToUse, 7860 min: 0, 7861 max: breakValues.length - 1, 7862 withInputField: false, 7863 onChange: (value = 0) => { 7864 context.onChangeView({ 7865 ...view, 7866 layout: { 7867 ...view.layout, 7868 previewSize: breakValues[value].value 7869 } 7870 }); 7871 }, 7872 step: 1, 7873 marks 7874 } 7875 ); 7876 } 7877 7878 // packages/dataviews/build-module/components/dataviews-layouts/utils/grid-config-options.mjs 7879 var import_jsx_runtime65 = __toESM(require_jsx_runtime(), 1); 7880 function GridConfigOptions() { 7881 return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(import_jsx_runtime65.Fragment, { children: [ 7882 /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(DensityPicker, {}), 7883 /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(PreviewSizePicker, {}) 7884 ] }); 7885 } 7886 7887 // packages/dataviews/build-module/components/dataviews-layouts/index.mjs 7888 var VIEW_LAYOUTS = [ 7889 { 7890 type: LAYOUT_TABLE, 7891 label: (0, import_i18n22.__)("Table"), 7892 component: table_default, 7893 icon: block_table_default, 7894 viewConfigOptions: DensityPicker 7895 }, 7896 { 7897 type: LAYOUT_GRID, 7898 label: (0, import_i18n22.__)("Grid"), 7899 component: grid_default, 7900 icon: category_default, 7901 viewConfigOptions: GridConfigOptions 7902 }, 7903 { 7904 type: LAYOUT_LIST, 7905 label: (0, import_i18n22.__)("List"), 7906 component: ViewList, 7907 icon: (0, import_i18n22.isRTL)() ? format_list_bullets_rtl_default : format_list_bullets_default, 7908 viewConfigOptions: DensityPicker 7909 }, 7910 { 7911 type: LAYOUT_ACTIVITY, 7912 label: (0, import_i18n22.__)("Activity"), 7913 component: ViewActivity, 7914 icon: scheduled_default, 7915 viewConfigOptions: DensityPicker 7916 }, 7917 { 7918 type: LAYOUT_PICKER_GRID, 7919 label: (0, import_i18n22.__)("Grid"), 7920 component: picker_grid_default, 7921 icon: category_default, 7922 viewConfigOptions: GridConfigOptions, 7923 isPicker: true 7924 }, 7925 { 7926 type: LAYOUT_PICKER_TABLE, 7927 label: (0, import_i18n22.__)("Table"), 7928 component: picker_table_default, 7929 icon: block_table_default, 7930 viewConfigOptions: DensityPicker, 7931 isPicker: true 7932 } 7933 ]; 7934 7935 // packages/dataviews/build-module/components/dataviews-filters/filters.mjs 7936 var import_element49 = __toESM(require_element(), 1); 7937 7938 // packages/dataviews/build-module/components/dataviews-filters/filter.mjs 7939 var import_components23 = __toESM(require_components(), 1); 7940 var import_i18n25 = __toESM(require_i18n(), 1); 7941 var import_element46 = __toESM(require_element(), 1); 7942 7943 // node_modules/@ariakit/core/esm/__chunks/XMCVU3LR.js 7944 function noop2(..._) { 7945 } 7946 function applyState(argument, currentValue) { 7947 if (isUpdater(argument)) { 7948 const value = isLazyValue(currentValue) ? currentValue() : currentValue; 7949 return argument(value); 7950 } 7951 return argument; 7952 } 7953 function isUpdater(argument) { 7954 return typeof argument === "function"; 7955 } 7956 function isLazyValue(value) { 7957 return typeof value === "function"; 7958 } 7959 function hasOwnProperty(object, prop) { 7960 if (typeof Object.hasOwn === "function") { 7961 return Object.hasOwn(object, prop); 7962 } 7963 return Object.prototype.hasOwnProperty.call(object, prop); 7964 } 7965 function chain(...fns) { 7966 return (...args) => { 7967 for (const fn of fns) { 7968 if (typeof fn === "function") { 7969 fn(...args); 7970 } 7971 } 7972 }; 7973 } 7974 function normalizeString(str) { 7975 return str.normalize("NFD").replace(/[\u0300-\u036f]/g, ""); 7976 } 7977 function omit(object, keys) { 7978 const result = { ...object }; 7979 for (const key of keys) { 7980 if (hasOwnProperty(result, key)) { 7981 delete result[key]; 7982 } 7983 } 7984 return result; 7985 } 7986 function pick(object, paths) { 7987 const result = {}; 7988 for (const key of paths) { 7989 if (hasOwnProperty(object, key)) { 7990 result[key] = object[key]; 7991 } 7992 } 7993 return result; 7994 } 7995 function identity(value) { 7996 return value; 7997 } 7998 function invariant(condition, message2) { 7999 if (condition) return; 8000 if (typeof message2 !== "string") throw new Error("Invariant failed"); 8001 throw new Error(message2); 8002 } 8003 function getKeys(obj) { 8004 return Object.keys(obj); 8005 } 8006 function isFalsyBooleanCallback(booleanOrCallback, ...args) { 8007 const result = typeof booleanOrCallback === "function" ? booleanOrCallback(...args) : booleanOrCallback; 8008 if (result == null) return false; 8009 return !result; 8010 } 8011 function disabledFromProps(props) { 8012 return props.disabled || props["aria-disabled"] === true || props["aria-disabled"] === "true"; 8013 } 8014 function removeUndefinedValues(obj) { 8015 const result = {}; 8016 for (const key in obj) { 8017 if (obj[key] !== void 0) { 8018 result[key] = obj[key]; 8019 } 8020 } 8021 return result; 8022 } 8023 function defaultValue(...values) { 8024 for (const value of values) { 8025 if (value !== void 0) return value; 8026 } 8027 return void 0; 8028 } 8029 8030 // node_modules/@ariakit/react-core/esm/__chunks/YXGXYGQX.js 8031 var import_react10 = __toESM(require_react(), 1); 8032 function setRef(ref, value) { 8033 if (typeof ref === "function") { 8034 ref(value); 8035 } else if (ref) { 8036 ref.current = value; 8037 } 8038 } 8039 function isValidElementWithRef(element) { 8040 if (!element) return false; 8041 if (!(0, import_react10.isValidElement)(element)) return false; 8042 if ("ref" in element.props) return true; 8043 if ("ref" in element) return true; 8044 return false; 8045 } 8046 function getRefProperty(element) { 8047 if (!isValidElementWithRef(element)) return null; 8048 const props = { ...element.props }; 8049 return props.ref || element.ref; 8050 } 8051 function mergeProps2(base, overrides) { 8052 const props = { ...base }; 8053 for (const key in overrides) { 8054 if (!hasOwnProperty(overrides, key)) continue; 8055 if (key === "className") { 8056 const prop = "className"; 8057 props[prop] = base[prop] ? `$base[prop]} $overrides[prop]}` : overrides[prop]; 8058 continue; 8059 } 8060 if (key === "style") { 8061 const prop = "style"; 8062 props[prop] = base[prop] ? { ...base[prop], ...overrides[prop] } : overrides[prop]; 8063 continue; 8064 } 8065 const overrideValue = overrides[key]; 8066 if (typeof overrideValue === "function" && key.startsWith("on")) { 8067 const baseValue = base[key]; 8068 if (typeof baseValue === "function") { 8069 props[key] = (...args) => { 8070 overrideValue(...args); 8071 baseValue(...args); 8072 }; 8073 continue; 8074 } 8075 } 8076 props[key] = overrideValue; 8077 } 8078 return props; 8079 } 8080 8081 // node_modules/@ariakit/core/esm/__chunks/3DNM6L6E.js 8082 var canUseDOM = checkIsBrowser(); 8083 function checkIsBrowser() { 8084 var _a; 8085 return typeof window !== "undefined" && !!((_a = window.document) == null ? void 0 : _a.createElement); 8086 } 8087 function getDocument(node) { 8088 if (!node) return document; 8089 if ("self" in node) return node.document; 8090 return node.ownerDocument || document; 8091 } 8092 function getActiveElement(node, activeDescendant = false) { 8093 var _a; 8094 const { activeElement } = getDocument(node); 8095 if (!(activeElement == null ? void 0 : activeElement.nodeName)) { 8096 return null; 8097 } 8098 if (isFrame(activeElement) && ((_a = activeElement.contentDocument) == null ? void 0 : _a.body)) { 8099 return getActiveElement( 8100 activeElement.contentDocument.body, 8101 activeDescendant 8102 ); 8103 } 8104 if (activeDescendant) { 8105 const id = activeElement.getAttribute("aria-activedescendant"); 8106 if (id) { 8107 const element = getDocument(activeElement).getElementById(id); 8108 if (element) { 8109 return element; 8110 } 8111 } 8112 } 8113 return activeElement; 8114 } 8115 function contains(parent, child) { 8116 return parent === child || parent.contains(child); 8117 } 8118 function isFrame(element) { 8119 return element.tagName === "IFRAME"; 8120 } 8121 function isButton(element) { 8122 const tagName = element.tagName.toLowerCase(); 8123 if (tagName === "button") return true; 8124 if (tagName === "input" && element.type) { 8125 return buttonInputTypes.indexOf(element.type) !== -1; 8126 } 8127 return false; 8128 } 8129 var buttonInputTypes = [ 8130 "button", 8131 "color", 8132 "file", 8133 "image", 8134 "reset", 8135 "submit" 8136 ]; 8137 function isVisible(element) { 8138 if (typeof element.checkVisibility === "function") { 8139 return element.checkVisibility(); 8140 } 8141 const htmlElement = element; 8142 return htmlElement.offsetWidth > 0 || htmlElement.offsetHeight > 0 || element.getClientRects().length > 0; 8143 } 8144 function isTextField(element) { 8145 try { 8146 const isTextInput = element instanceof HTMLInputElement && element.selectionStart !== null; 8147 const isTextArea = element.tagName === "TEXTAREA"; 8148 return isTextInput || isTextArea || false; 8149 } catch (_error) { 8150 return false; 8151 } 8152 } 8153 function isTextbox(element) { 8154 return element.isContentEditable || isTextField(element); 8155 } 8156 function getTextboxValue(element) { 8157 if (isTextField(element)) { 8158 return element.value; 8159 } 8160 if (element.isContentEditable) { 8161 const range = getDocument(element).createRange(); 8162 range.selectNodeContents(element); 8163 return range.toString(); 8164 } 8165 return ""; 8166 } 8167 function getTextboxSelection(element) { 8168 let start = 0; 8169 let end = 0; 8170 if (isTextField(element)) { 8171 start = element.selectionStart || 0; 8172 end = element.selectionEnd || 0; 8173 } else if (element.isContentEditable) { 8174 const selection = getDocument(element).getSelection(); 8175 if ((selection == null ? void 0 : selection.rangeCount) && selection.anchorNode && contains(element, selection.anchorNode) && selection.focusNode && contains(element, selection.focusNode)) { 8176 const range = selection.getRangeAt(0); 8177 const nextRange = range.cloneRange(); 8178 nextRange.selectNodeContents(element); 8179 nextRange.setEnd(range.startContainer, range.startOffset); 8180 start = nextRange.toString().length; 8181 nextRange.setEnd(range.endContainer, range.endOffset); 8182 end = nextRange.toString().length; 8183 } 8184 } 8185 return { start, end }; 8186 } 8187 function getPopupRole(element, fallback) { 8188 const allowedPopupRoles = ["dialog", "menu", "listbox", "tree", "grid"]; 8189 const role = element == null ? void 0 : element.getAttribute("role"); 8190 if (role && allowedPopupRoles.indexOf(role) !== -1) { 8191 return role; 8192 } 8193 return fallback; 8194 } 8195 function getScrollingElement(element) { 8196 if (!element) return null; 8197 const isScrollableOverflow = (overflow) => { 8198 if (overflow === "auto") return true; 8199 if (overflow === "scroll") return true; 8200 return false; 8201 }; 8202 if (element.clientHeight && element.scrollHeight > element.clientHeight) { 8203 const { overflowY } = getComputedStyle(element); 8204 if (isScrollableOverflow(overflowY)) return element; 8205 } else if (element.clientWidth && element.scrollWidth > element.clientWidth) { 8206 const { overflowX } = getComputedStyle(element); 8207 if (isScrollableOverflow(overflowX)) return element; 8208 } 8209 return getScrollingElement(element.parentElement) || document.scrollingElement || document.body; 8210 } 8211 function setSelectionRange(element, ...args) { 8212 if (/text|search|password|tel|url/i.test(element.type)) { 8213 element.setSelectionRange(...args); 8214 } 8215 } 8216 function sortBasedOnDOMPosition(items, getElement) { 8217 const pairs = items.map((item, index) => [index, item]); 8218 let isOrderDifferent = false; 8219 pairs.sort(([indexA, a2], [indexB, b2]) => { 8220 const elementA = getElement(a2); 8221 const elementB = getElement(b2); 8222 if (elementA === elementB) return 0; 8223 if (!elementA || !elementB) return 0; 8224 if (isElementPreceding(elementA, elementB)) { 8225 if (indexA > indexB) { 8226 isOrderDifferent = true; 8227 } 8228 return -1; 8229 } 8230 if (indexA < indexB) { 8231 isOrderDifferent = true; 8232 } 8233 return 1; 8234 }); 8235 if (isOrderDifferent) { 8236 return pairs.map(([_, item]) => item); 8237 } 8238 return items; 8239 } 8240 function isElementPreceding(a2, b2) { 8241 return Boolean( 8242 b2.compareDocumentPosition(a2) & Node.DOCUMENT_POSITION_PRECEDING 8243 ); 8244 } 8245 8246 // node_modules/@ariakit/core/esm/__chunks/SNHYQNEZ.js 8247 function isTouchDevice() { 8248 return canUseDOM && !!navigator.maxTouchPoints; 8249 } 8250 function isApple() { 8251 if (!canUseDOM) return false; 8252 return /mac|iphone|ipad|ipod/i.test(navigator.platform); 8253 } 8254 function isSafari() { 8255 return canUseDOM && isApple() && /apple/i.test(navigator.vendor); 8256 } 8257 function isFirefox() { 8258 return canUseDOM && /firefox\//i.test(navigator.userAgent); 8259 } 8260 8261 // node_modules/@ariakit/core/esm/utils/events.js 8262 function isPortalEvent(event) { 8263 return Boolean( 8264 event.currentTarget && !contains(event.currentTarget, event.target) 8265 ); 8266 } 8267 function isSelfTarget(event) { 8268 return event.target === event.currentTarget; 8269 } 8270 function isOpeningInNewTab(event) { 8271 const element = event.currentTarget; 8272 if (!element) return false; 8273 const isAppleDevice = isApple(); 8274 if (isAppleDevice && !event.metaKey) return false; 8275 if (!isAppleDevice && !event.ctrlKey) return false; 8276 const tagName = element.tagName.toLowerCase(); 8277 if (tagName === "a") return true; 8278 if (tagName === "button" && element.type === "submit") return true; 8279 if (tagName === "input" && element.type === "submit") return true; 8280 return false; 8281 } 8282 function isDownloading(event) { 8283 const element = event.currentTarget; 8284 if (!element) return false; 8285 const tagName = element.tagName.toLowerCase(); 8286 if (!event.altKey) return false; 8287 if (tagName === "a") return true; 8288 if (tagName === "button" && element.type === "submit") return true; 8289 if (tagName === "input" && element.type === "submit") return true; 8290 return false; 8291 } 8292 function fireBlurEvent(element, eventInit) { 8293 const event = new FocusEvent("blur", eventInit); 8294 const defaultAllowed = element.dispatchEvent(event); 8295 const bubbleInit = { ...eventInit, bubbles: true }; 8296 element.dispatchEvent(new FocusEvent("focusout", bubbleInit)); 8297 return defaultAllowed; 8298 } 8299 function fireKeyboardEvent(element, type, eventInit) { 8300 const event = new KeyboardEvent(type, eventInit); 8301 return element.dispatchEvent(event); 8302 } 8303 function fireClickEvent(element, eventInit) { 8304 const event = new MouseEvent("click", eventInit); 8305 return element.dispatchEvent(event); 8306 } 8307 function isFocusEventOutside(event, container) { 8308 const containerElement = container || event.currentTarget; 8309 const relatedTarget = event.relatedTarget; 8310 return !relatedTarget || !contains(containerElement, relatedTarget); 8311 } 8312 function queueBeforeEvent(element, type, callback, timeout) { 8313 const createTimer = (callback2) => { 8314 if (timeout) { 8315 const timerId2 = setTimeout(callback2, timeout); 8316 return () => clearTimeout(timerId2); 8317 } 8318 const timerId = requestAnimationFrame(callback2); 8319 return () => cancelAnimationFrame(timerId); 8320 }; 8321 const cancelTimer = createTimer(() => { 8322 element.removeEventListener(type, callSync, true); 8323 callback(); 8324 }); 8325 const callSync = () => { 8326 cancelTimer(); 8327 callback(); 8328 }; 8329 element.addEventListener(type, callSync, { once: true, capture: true }); 8330 return cancelTimer; 8331 } 8332 function addGlobalEventListener(type, listener, options, scope = window) { 8333 const children = []; 8334 try { 8335 scope.document.addEventListener(type, listener, options); 8336 for (const frame of Array.from(scope.frames)) { 8337 children.push(addGlobalEventListener(type, listener, options, frame)); 8338 } 8339 } catch (e2) { 8340 } 8341 const removeEventListener = () => { 8342 try { 8343 scope.document.removeEventListener(type, listener, options); 8344 } catch (e2) { 8345 } 8346 for (const remove of children) { 8347 remove(); 8348 } 8349 }; 8350 return removeEventListener; 8351 } 8352 8353 // node_modules/@ariakit/react-core/esm/__chunks/KPHZR4MB.js 8354 var React23 = __toESM(require_react(), 1); 8355 var import_react11 = __toESM(require_react(), 1); 8356 var _React = { ...React23 }; 8357 var useReactId = _React.useId; 8358 var useReactDeferredValue = _React.useDeferredValue; 8359 var useReactInsertionEffect = _React.useInsertionEffect; 8360 var useSafeLayoutEffect = canUseDOM ? import_react11.useLayoutEffect : import_react11.useEffect; 8361 function useInitialValue(value) { 8362 const [initialValue] = (0, import_react11.useState)(value); 8363 return initialValue; 8364 } 8365 function useLiveRef(value) { 8366 const ref = (0, import_react11.useRef)(value); 8367 useSafeLayoutEffect(() => { 8368 ref.current = value; 8369 }); 8370 return ref; 8371 } 8372 function useEvent(callback) { 8373 const ref = (0, import_react11.useRef)(() => { 8374 throw new Error("Cannot call an event handler while rendering."); 8375 }); 8376 if (useReactInsertionEffect) { 8377 useReactInsertionEffect(() => { 8378 ref.current = callback; 8379 }); 8380 } else { 8381 ref.current = callback; 8382 } 8383 return (0, import_react11.useCallback)((...args) => { 8384 var _a; 8385 return (_a = ref.current) == null ? void 0 : _a.call(ref, ...args); 8386 }, []); 8387 } 8388 function useTransactionState(callback) { 8389 const [state, setState] = (0, import_react11.useState)(null); 8390 useSafeLayoutEffect(() => { 8391 if (state == null) return; 8392 if (!callback) return; 8393 let prevState = null; 8394 callback((prev) => { 8395 prevState = prev; 8396 return state; 8397 }); 8398 return () => { 8399 callback(prevState); 8400 }; 8401 }, [state, callback]); 8402 return [state, setState]; 8403 } 8404 function useMergeRefs(...refs) { 8405 return (0, import_react11.useMemo)(() => { 8406 if (!refs.some(Boolean)) return; 8407 return (value) => { 8408 for (const ref of refs) { 8409 setRef(ref, value); 8410 } 8411 }; 8412 }, refs); 8413 } 8414 function useId5(defaultId) { 8415 if (useReactId) { 8416 const reactId = useReactId(); 8417 if (defaultId) return defaultId; 8418 return reactId; 8419 } 8420 const [id, setId] = (0, import_react11.useState)(defaultId); 8421 useSafeLayoutEffect(() => { 8422 if (defaultId || id) return; 8423 const random = Math.random().toString(36).slice(2, 8); 8424 setId(`id-$random}`); 8425 }, [defaultId, id]); 8426 return defaultId || id; 8427 } 8428 function useTagName(refOrElement, type) { 8429 const stringOrUndefined = (type2) => { 8430 if (typeof type2 !== "string") return; 8431 return type2; 8432 }; 8433 const [tagName, setTagName] = (0, import_react11.useState)(() => stringOrUndefined(type)); 8434 useSafeLayoutEffect(() => { 8435 const element = refOrElement && "current" in refOrElement ? refOrElement.current : refOrElement; 8436 setTagName((element == null ? void 0 : element.tagName.toLowerCase()) || stringOrUndefined(type)); 8437 }, [refOrElement, type]); 8438 return tagName; 8439 } 8440 function useAttribute(refOrElement, attributeName, defaultValue2) { 8441 const initialValue = useInitialValue(defaultValue2); 8442 const [attribute, setAttribute] = (0, import_react11.useState)(initialValue); 8443 (0, import_react11.useEffect)(() => { 8444 const element = refOrElement && "current" in refOrElement ? refOrElement.current : refOrElement; 8445 if (!element) return; 8446 const callback = () => { 8447 const value = element.getAttribute(attributeName); 8448 setAttribute(value == null ? initialValue : value); 8449 }; 8450 const observer = new MutationObserver(callback); 8451 observer.observe(element, { attributeFilter: [attributeName] }); 8452 callback(); 8453 return () => observer.disconnect(); 8454 }, [refOrElement, attributeName, initialValue]); 8455 return attribute; 8456 } 8457 function useUpdateEffect(effect, deps) { 8458 const mounted = (0, import_react11.useRef)(false); 8459 (0, import_react11.useEffect)(() => { 8460 if (mounted.current) { 8461 return effect(); 8462 } 8463 mounted.current = true; 8464 }, deps); 8465 (0, import_react11.useEffect)( 8466 () => () => { 8467 mounted.current = false; 8468 }, 8469 [] 8470 ); 8471 } 8472 function useUpdateLayoutEffect(effect, deps) { 8473 const mounted = (0, import_react11.useRef)(false); 8474 useSafeLayoutEffect(() => { 8475 if (mounted.current) { 8476 return effect(); 8477 } 8478 mounted.current = true; 8479 }, deps); 8480 useSafeLayoutEffect( 8481 () => () => { 8482 mounted.current = false; 8483 }, 8484 [] 8485 ); 8486 } 8487 function useForceUpdate() { 8488 return (0, import_react11.useReducer)(() => [], []); 8489 } 8490 function useBooleanEvent(booleanOrCallback) { 8491 return useEvent( 8492 typeof booleanOrCallback === "function" ? booleanOrCallback : () => booleanOrCallback 8493 ); 8494 } 8495 function useWrapElement(props, callback, deps = []) { 8496 const wrapElement = (0, import_react11.useCallback)( 8497 (element) => { 8498 if (props.wrapElement) { 8499 element = props.wrapElement(element); 8500 } 8501 return callback(element); 8502 }, 8503 [...deps, props.wrapElement] 8504 ); 8505 return { ...props, wrapElement }; 8506 } 8507 function useMetadataProps(props, key, value) { 8508 const parent = props.onLoadedMetadataCapture; 8509 const onLoadedMetadataCapture = (0, import_react11.useMemo)(() => { 8510 return Object.assign(() => { 8511 }, { ...parent, [key]: value }); 8512 }, [parent, key, value]); 8513 return [parent == null ? void 0 : parent[key], { onLoadedMetadataCapture }]; 8514 } 8515 var hasInstalledGlobalEventListeners = false; 8516 function useIsMouseMoving() { 8517 (0, import_react11.useEffect)(() => { 8518 if (hasInstalledGlobalEventListeners) return; 8519 addGlobalEventListener("mousemove", setMouseMoving, true); 8520 addGlobalEventListener("mousedown", resetMouseMoving, true); 8521 addGlobalEventListener("mouseup", resetMouseMoving, true); 8522 addGlobalEventListener("keydown", resetMouseMoving, true); 8523 addGlobalEventListener("scroll", resetMouseMoving, true); 8524 hasInstalledGlobalEventListeners = true; 8525 }, []); 8526 const isMouseMoving = useEvent(() => mouseMoving); 8527 return isMouseMoving; 8528 } 8529 var mouseMoving = false; 8530 var previousScreenX = 0; 8531 var previousScreenY = 0; 8532 function hasMouseMovement(event) { 8533 const movementX = event.movementX || event.screenX - previousScreenX; 8534 const movementY = event.movementY || event.screenY - previousScreenY; 8535 previousScreenX = event.screenX; 8536 previousScreenY = event.screenY; 8537 return movementX || movementY || false; 8538 } 8539 function setMouseMoving(event) { 8540 if (!hasMouseMovement(event)) return; 8541 mouseMoving = true; 8542 } 8543 function resetMouseMoving() { 8544 mouseMoving = false; 8545 } 8546 8547 // node_modules/@ariakit/react-core/esm/__chunks/GWSL6KNJ.js 8548 var React24 = __toESM(require_react(), 1); 8549 var import_jsx_runtime66 = __toESM(require_jsx_runtime(), 1); 8550 function forwardRef25(render4) { 8551 const Role = React24.forwardRef( 8552 // @ts-ignore Incompatible with React 19 types. Ignore for now. 8553 (props, ref) => render4({ ...props, ref }) 8554 ); 8555 Role.displayName = render4.displayName || render4.name; 8556 return Role; 8557 } 8558 function memo22(Component, propsAreEqual) { 8559 return React24.memo(Component, propsAreEqual); 8560 } 8561 function createElement3(Type, props) { 8562 const { wrapElement, render: render4, ...rest } = props; 8563 const mergedRef = useMergeRefs(props.ref, getRefProperty(render4)); 8564 let element; 8565 if (React24.isValidElement(render4)) { 8566 const renderProps = { 8567 // @ts-ignore Incompatible with React 19 types. Ignore for now. 8568 ...render4.props, 8569 ref: mergedRef 8570 }; 8571 element = React24.cloneElement(render4, mergeProps2(rest, renderProps)); 8572 } else if (render4) { 8573 element = render4(rest); 8574 } else { 8575 element = /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Type, { ...rest }); 8576 } 8577 if (wrapElement) { 8578 return wrapElement(element); 8579 } 8580 return element; 8581 } 8582 function createHook(useProps) { 8583 const useRole = (props = {}) => { 8584 return useProps(props); 8585 }; 8586 useRole.displayName = useProps.name; 8587 return useRole; 8588 } 8589 function createStoreContext(providers = [], scopedProviders = []) { 8590 const context = React24.createContext(void 0); 8591 const scopedContext = React24.createContext(void 0); 8592 const useContext210 = () => React24.useContext(context); 8593 const useScopedContext = (onlyScoped = false) => { 8594 const scoped = React24.useContext(scopedContext); 8595 const store2 = useContext210(); 8596 if (onlyScoped) return scoped; 8597 return scoped || store2; 8598 }; 8599 const useProviderContext = () => { 8600 const scoped = React24.useContext(scopedContext); 8601 const store2 = useContext210(); 8602 if (scoped && scoped === store2) return; 8603 return store2; 8604 }; 8605 const ContextProvider = (props) => { 8606 return providers.reduceRight( 8607 (children, Provider) => /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Provider, { ...props, children }), 8608 /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(context.Provider, { ...props }) 8609 ); 8610 }; 8611 const ScopedContextProvider = (props) => { 8612 return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(ContextProvider, { ...props, children: scopedProviders.reduceRight( 8613 (children, Provider) => /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Provider, { ...props, children }), 8614 /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(scopedContext.Provider, { ...props }) 8615 ) }); 8616 }; 8617 return { 8618 context, 8619 scopedContext, 8620 useContext: useContext210, 8621 useScopedContext, 8622 useProviderContext, 8623 ContextProvider, 8624 ScopedContextProvider 8625 }; 8626 } 8627 8628 // node_modules/@ariakit/react-core/esm/__chunks/SMPCIMZM.js 8629 var ctx = createStoreContext(); 8630 var useCollectionContext = ctx.useContext; 8631 var useCollectionScopedContext = ctx.useScopedContext; 8632 var useCollectionProviderContext = ctx.useProviderContext; 8633 var CollectionContextProvider = ctx.ContextProvider; 8634 var CollectionScopedContextProvider = ctx.ScopedContextProvider; 8635 8636 // node_modules/@ariakit/react-core/esm/__chunks/AVVXDJMZ.js 8637 var import_react12 = __toESM(require_react(), 1); 8638 var ctx2 = createStoreContext( 8639 [CollectionContextProvider], 8640 [CollectionScopedContextProvider] 8641 ); 8642 var useCompositeContext = ctx2.useContext; 8643 var useCompositeScopedContext = ctx2.useScopedContext; 8644 var useCompositeProviderContext = ctx2.useProviderContext; 8645 var CompositeContextProvider = ctx2.ContextProvider; 8646 var CompositeScopedContextProvider = ctx2.ScopedContextProvider; 8647 var CompositeItemContext = (0, import_react12.createContext)( 8648 void 0 8649 ); 8650 var CompositeRowContext = (0, import_react12.createContext)( 8651 void 0 8652 ); 8653 8654 // node_modules/@ariakit/react-core/esm/__chunks/5VQZOHHZ.js 8655 function findFirstEnabledItem(items, excludeId) { 8656 return items.find((item) => { 8657 if (excludeId) { 8658 return !item.disabled && item.id !== excludeId; 8659 } 8660 return !item.disabled; 8661 }); 8662 } 8663 function getEnabledItem(store2, id) { 8664 if (!id) return null; 8665 return store2.item(id) || null; 8666 } 8667 function groupItemsByRows(items) { 8668 const rows = []; 8669 for (const item of items) { 8670 const row = rows.find((currentRow) => { 8671 var _a; 8672 return ((_a = currentRow[0]) == null ? void 0 : _a.rowId) === item.rowId; 8673 }); 8674 if (row) { 8675 row.push(item); 8676 } else { 8677 rows.push([item]); 8678 } 8679 } 8680 return rows; 8681 } 8682 function selectTextField(element, collapseToEnd = false) { 8683 if (isTextField(element)) { 8684 element.setSelectionRange( 8685 collapseToEnd ? element.value.length : 0, 8686 element.value.length 8687 ); 8688 } else if (element.isContentEditable) { 8689 const selection = getDocument(element).getSelection(); 8690 selection == null ? void 0 : selection.selectAllChildren(element); 8691 if (collapseToEnd) { 8692 selection == null ? void 0 : selection.collapseToEnd(); 8693 } 8694 } 8695 } 8696 var FOCUS_SILENTLY = /* @__PURE__ */ Symbol("FOCUS_SILENTLY"); 8697 function focusSilently(element) { 8698 element[FOCUS_SILENTLY] = true; 8699 element.focus({ preventScroll: true }); 8700 } 8701 function silentlyFocused(element) { 8702 const isSilentlyFocused = element[FOCUS_SILENTLY]; 8703 delete element[FOCUS_SILENTLY]; 8704 return isSilentlyFocused; 8705 } 8706 function isItem(store2, element, exclude) { 8707 if (!element) return false; 8708 if (element === exclude) return false; 8709 const item = store2.item(element.id); 8710 if (!item) return false; 8711 if (exclude && item.element === exclude) return false; 8712 return true; 8713 } 8714 8715 // node_modules/@ariakit/react-core/esm/__chunks/Z2O3VLAQ.js 8716 var import_react13 = __toESM(require_react(), 1); 8717 var TagName = "div"; 8718 var useCollectionItem = createHook( 8719 function useCollectionItem2({ 8720 store: store2, 8721 shouldRegisterItem = true, 8722 getItem = identity, 8723 // @ts-expect-error This prop may come from a collection renderer. 8724 element, 8725 ...props 8726 }) { 8727 const context = useCollectionContext(); 8728 store2 = store2 || context; 8729 const id = useId5(props.id); 8730 const ref = (0, import_react13.useRef)(element); 8731 (0, import_react13.useEffect)(() => { 8732 const element2 = ref.current; 8733 if (!id) return; 8734 if (!element2) return; 8735 if (!shouldRegisterItem) return; 8736 const item = getItem({ id, element: element2 }); 8737 return store2 == null ? void 0 : store2.renderItem(item); 8738 }, [id, shouldRegisterItem, getItem, store2]); 8739 props = { 8740 ...props, 8741 ref: useMergeRefs(ref, props.ref) 8742 }; 8743 return removeUndefinedValues(props); 8744 } 8745 ); 8746 var CollectionItem = forwardRef25(function CollectionItem2(props) { 8747 const htmlProps = useCollectionItem(props); 8748 return createElement3(TagName, htmlProps); 8749 }); 8750 8751 // node_modules/@ariakit/react-core/esm/__chunks/SWN3JYXT.js 8752 var import_react14 = __toESM(require_react(), 1); 8753 var FocusableContext = (0, import_react14.createContext)(true); 8754 8755 // node_modules/@ariakit/core/esm/utils/focus.js 8756 var selector = "input:not([type='hidden']):not([disabled]), select:not([disabled]), textarea:not([disabled]), a[href], button:not([disabled]), [tabindex], summary, iframe, object, embed, area[href], audio[controls], video[controls], [contenteditable]:not([contenteditable='false'])"; 8757 function isFocusable(element) { 8758 if (!element.matches(selector)) return false; 8759 if (!isVisible(element)) return false; 8760 if (element.closest("[inert]")) return false; 8761 return true; 8762 } 8763 function getClosestFocusable(element) { 8764 while (element && !isFocusable(element)) { 8765 element = element.closest(selector); 8766 } 8767 return element || null; 8768 } 8769 function hasFocus(element) { 8770 const activeElement = getActiveElement(element); 8771 if (!activeElement) return false; 8772 if (activeElement === element) return true; 8773 const activeDescendant = activeElement.getAttribute("aria-activedescendant"); 8774 if (!activeDescendant) return false; 8775 return activeDescendant === element.id; 8776 } 8777 function hasFocusWithin(element) { 8778 const activeElement = getActiveElement(element); 8779 if (!activeElement) return false; 8780 if (contains(element, activeElement)) return true; 8781 const activeDescendant = activeElement.getAttribute("aria-activedescendant"); 8782 if (!activeDescendant) return false; 8783 if (!("id" in element)) return false; 8784 if (activeDescendant === element.id) return true; 8785 return !!element.querySelector(`#$CSS.escape(activeDescendant)}`); 8786 } 8787 function focusIfNeeded(element) { 8788 if (!hasFocusWithin(element) && isFocusable(element)) { 8789 element.focus(); 8790 } 8791 } 8792 function focusIntoView(element, options) { 8793 if (!("scrollIntoView" in element)) { 8794 element.focus(); 8795 } else { 8796 element.focus({ preventScroll: true }); 8797 element.scrollIntoView({ block: "nearest", inline: "nearest", ...options }); 8798 } 8799 } 8800 8801 // node_modules/@ariakit/react-core/esm/__chunks/U6HHPQDW.js 8802 var import_react15 = __toESM(require_react(), 1); 8803 var TagName2 = "div"; 8804 var isSafariBrowser = isSafari(); 8805 var alwaysFocusVisibleInputTypes = [ 8806 "text", 8807 "search", 8808 "url", 8809 "tel", 8810 "email", 8811 "password", 8812 "number", 8813 "date", 8814 "month", 8815 "week", 8816 "time", 8817 "datetime", 8818 "datetime-local" 8819 ]; 8820 var safariFocusAncestorSymbol = /* @__PURE__ */ Symbol("safariFocusAncestor"); 8821 function markSafariFocusAncestor(element, value) { 8822 if (!element) return; 8823 element[safariFocusAncestorSymbol] = value; 8824 } 8825 function isAlwaysFocusVisible(element) { 8826 const { tagName, readOnly, type } = element; 8827 if (tagName === "TEXTAREA" && !readOnly) return true; 8828 if (tagName === "SELECT" && !readOnly) return true; 8829 if (tagName === "INPUT" && !readOnly) { 8830 return alwaysFocusVisibleInputTypes.includes(type); 8831 } 8832 if (element.isContentEditable) return true; 8833 const role = element.getAttribute("role"); 8834 if (role === "combobox" && element.dataset.name) { 8835 return true; 8836 } 8837 return false; 8838 } 8839 function getLabels(element) { 8840 if ("labels" in element) { 8841 return element.labels; 8842 } 8843 return null; 8844 } 8845 function isNativeCheckboxOrRadio(element) { 8846 const tagName = element.tagName.toLowerCase(); 8847 if (tagName === "input" && element.type) { 8848 return element.type === "radio" || element.type === "checkbox"; 8849 } 8850 return false; 8851 } 8852 function isNativeTabbable(tagName) { 8853 if (!tagName) return true; 8854 return tagName === "button" || tagName === "summary" || tagName === "input" || tagName === "select" || tagName === "textarea" || tagName === "a"; 8855 } 8856 function supportsDisabledAttribute(tagName) { 8857 if (!tagName) return true; 8858 return tagName === "button" || tagName === "input" || tagName === "select" || tagName === "textarea"; 8859 } 8860 function getTabIndex(focusable, trulyDisabled, nativeTabbable, supportsDisabled, tabIndexProp) { 8861 if (!focusable) { 8862 return tabIndexProp; 8863 } 8864 if (trulyDisabled) { 8865 if (nativeTabbable && !supportsDisabled) { 8866 return -1; 8867 } 8868 return; 8869 } 8870 if (nativeTabbable) { 8871 return tabIndexProp; 8872 } 8873 return tabIndexProp || 0; 8874 } 8875 function useDisableEvent(onEvent, disabled2) { 8876 return useEvent((event) => { 8877 onEvent == null ? void 0 : onEvent(event); 8878 if (event.defaultPrevented) return; 8879 if (disabled2) { 8880 event.stopPropagation(); 8881 event.preventDefault(); 8882 } 8883 }); 8884 } 8885 var hasInstalledGlobalEventListeners2 = false; 8886 var isKeyboardModality = true; 8887 function onGlobalMouseDown(event) { 8888 const target = event.target; 8889 if (target && "hasAttribute" in target) { 8890 if (!target.hasAttribute("data-focus-visible")) { 8891 isKeyboardModality = false; 8892 } 8893 } 8894 } 8895 function onGlobalKeyDown(event) { 8896 if (event.metaKey) return; 8897 if (event.ctrlKey) return; 8898 if (event.altKey) return; 8899 isKeyboardModality = true; 8900 } 8901 var useFocusable = createHook( 8902 function useFocusable2({ 8903 focusable = true, 8904 accessibleWhenDisabled, 8905 autoFocus, 8906 onFocusVisible, 8907 ...props 8908 }) { 8909 const ref = (0, import_react15.useRef)(null); 8910 (0, import_react15.useEffect)(() => { 8911 if (!focusable) return; 8912 if (hasInstalledGlobalEventListeners2) return; 8913 addGlobalEventListener("mousedown", onGlobalMouseDown, true); 8914 addGlobalEventListener("keydown", onGlobalKeyDown, true); 8915 hasInstalledGlobalEventListeners2 = true; 8916 }, [focusable]); 8917 if (isSafariBrowser) { 8918 (0, import_react15.useEffect)(() => { 8919 if (!focusable) return; 8920 const element = ref.current; 8921 if (!element) return; 8922 if (!isNativeCheckboxOrRadio(element)) return; 8923 const labels = getLabels(element); 8924 if (!labels) return; 8925 const onMouseUp = () => queueMicrotask(() => element.focus()); 8926 for (const label of labels) { 8927 label.addEventListener("mouseup", onMouseUp); 8928 } 8929 return () => { 8930 for (const label of labels) { 8931 label.removeEventListener("mouseup", onMouseUp); 8932 } 8933 }; 8934 }, [focusable]); 8935 } 8936 const disabled2 = focusable && disabledFromProps(props); 8937 const trulyDisabled = !!disabled2 && !accessibleWhenDisabled; 8938 const [focusVisible, setFocusVisible] = (0, import_react15.useState)(false); 8939 (0, import_react15.useEffect)(() => { 8940 if (!focusable) return; 8941 if (trulyDisabled && focusVisible) { 8942 setFocusVisible(false); 8943 } 8944 }, [focusable, trulyDisabled, focusVisible]); 8945 (0, import_react15.useEffect)(() => { 8946 if (!focusable) return; 8947 if (!focusVisible) return; 8948 const element = ref.current; 8949 if (!element) return; 8950 if (typeof IntersectionObserver === "undefined") return; 8951 const observer = new IntersectionObserver(() => { 8952 if (!isFocusable(element)) { 8953 setFocusVisible(false); 8954 } 8955 }); 8956 observer.observe(element); 8957 return () => observer.disconnect(); 8958 }, [focusable, focusVisible]); 8959 const onKeyPressCapture = useDisableEvent( 8960 props.onKeyPressCapture, 8961 disabled2 8962 ); 8963 const onMouseDownCapture = useDisableEvent( 8964 props.onMouseDownCapture, 8965 disabled2 8966 ); 8967 const onClickCapture = useDisableEvent(props.onClickCapture, disabled2); 8968 const onMouseDownProp = props.onMouseDown; 8969 const onMouseDown = useEvent((event) => { 8970 onMouseDownProp == null ? void 0 : onMouseDownProp(event); 8971 if (event.defaultPrevented) return; 8972 if (!focusable) return; 8973 const element = event.currentTarget; 8974 if (!isSafariBrowser) return; 8975 if (isPortalEvent(event)) return; 8976 if (!isButton(element) && !isNativeCheckboxOrRadio(element)) return; 8977 let receivedFocus = false; 8978 const onFocus = () => { 8979 receivedFocus = true; 8980 }; 8981 const options = { capture: true, once: true }; 8982 element.addEventListener("focusin", onFocus, options); 8983 const focusableContainer = getClosestFocusable(element.parentElement); 8984 markSafariFocusAncestor(focusableContainer, true); 8985 queueBeforeEvent(element, "mouseup", () => { 8986 element.removeEventListener("focusin", onFocus, true); 8987 markSafariFocusAncestor(focusableContainer, false); 8988 if (receivedFocus) return; 8989 focusIfNeeded(element); 8990 }); 8991 }); 8992 const handleFocusVisible = (event, currentTarget) => { 8993 if (currentTarget) { 8994 event.currentTarget = currentTarget; 8995 } 8996 if (!focusable) return; 8997 const element = event.currentTarget; 8998 if (!element) return; 8999 if (!hasFocus(element)) return; 9000 onFocusVisible == null ? void 0 : onFocusVisible(event); 9001 if (event.defaultPrevented) return; 9002 element.dataset.focusVisible = "true"; 9003 setFocusVisible(true); 9004 }; 9005 const onKeyDownCaptureProp = props.onKeyDownCapture; 9006 const onKeyDownCapture = useEvent((event) => { 9007 onKeyDownCaptureProp == null ? void 0 : onKeyDownCaptureProp(event); 9008 if (event.defaultPrevented) return; 9009 if (!focusable) return; 9010 if (focusVisible) return; 9011 if (event.metaKey) return; 9012 if (event.altKey) return; 9013 if (event.ctrlKey) return; 9014 if (!isSelfTarget(event)) return; 9015 const element = event.currentTarget; 9016 const applyFocusVisible = () => handleFocusVisible(event, element); 9017 queueBeforeEvent(element, "focusout", applyFocusVisible); 9018 }); 9019 const onFocusCaptureProp = props.onFocusCapture; 9020 const onFocusCapture = useEvent((event) => { 9021 onFocusCaptureProp == null ? void 0 : onFocusCaptureProp(event); 9022 if (event.defaultPrevented) return; 9023 if (!focusable) return; 9024 if (!isSelfTarget(event)) { 9025 setFocusVisible(false); 9026 return; 9027 } 9028 const element = event.currentTarget; 9029 const applyFocusVisible = () => handleFocusVisible(event, element); 9030 if (isKeyboardModality || isAlwaysFocusVisible(event.target)) { 9031 queueBeforeEvent(event.target, "focusout", applyFocusVisible); 9032 } else { 9033 setFocusVisible(false); 9034 } 9035 }); 9036 const onBlurProp = props.onBlur; 9037 const onBlur = useEvent((event) => { 9038 onBlurProp == null ? void 0 : onBlurProp(event); 9039 if (!focusable) return; 9040 if (!isFocusEventOutside(event)) return; 9041 event.currentTarget.removeAttribute("data-focus-visible"); 9042 setFocusVisible(false); 9043 }); 9044 const autoFocusOnShow = (0, import_react15.useContext)(FocusableContext); 9045 const autoFocusRef = useEvent((element) => { 9046 if (!focusable) return; 9047 if (!autoFocus) return; 9048 if (!element) return; 9049 if (!autoFocusOnShow) return; 9050 queueMicrotask(() => { 9051 if (hasFocus(element)) return; 9052 if (!isFocusable(element)) return; 9053 element.focus(); 9054 }); 9055 }); 9056 const tagName = useTagName(ref); 9057 const nativeTabbable = focusable && isNativeTabbable(tagName); 9058 const supportsDisabled = focusable && supportsDisabledAttribute(tagName); 9059 const styleProp = props.style; 9060 const style = (0, import_react15.useMemo)(() => { 9061 if (trulyDisabled) { 9062 return { pointerEvents: "none", ...styleProp }; 9063 } 9064 return styleProp; 9065 }, [trulyDisabled, styleProp]); 9066 props = { 9067 "data-focus-visible": focusable && focusVisible || void 0, 9068 "data-autofocus": autoFocus || void 0, 9069 "aria-disabled": disabled2 || void 0, 9070 ...props, 9071 ref: useMergeRefs(ref, autoFocusRef, props.ref), 9072 style, 9073 tabIndex: getTabIndex( 9074 focusable, 9075 trulyDisabled, 9076 nativeTabbable, 9077 supportsDisabled, 9078 props.tabIndex 9079 ), 9080 disabled: supportsDisabled && trulyDisabled ? true : void 0, 9081 // TODO: Test Focusable contentEditable. 9082 contentEditable: disabled2 ? void 0 : props.contentEditable, 9083 onKeyPressCapture, 9084 onClickCapture, 9085 onMouseDownCapture, 9086 onMouseDown, 9087 onKeyDownCapture, 9088 onFocusCapture, 9089 onBlur 9090 }; 9091 return removeUndefinedValues(props); 9092 } 9093 ); 9094 var Focusable = forwardRef25(function Focusable2(props) { 9095 const htmlProps = useFocusable(props); 9096 return createElement3(TagName2, htmlProps); 9097 }); 9098 9099 // node_modules/@ariakit/react-core/esm/__chunks/PZ3OL7I2.js 9100 var import_react16 = __toESM(require_react(), 1); 9101 var TagName3 = "button"; 9102 function isNativeClick(event) { 9103 if (!event.isTrusted) return false; 9104 const element = event.currentTarget; 9105 if (event.key === "Enter") { 9106 return isButton(element) || element.tagName === "SUMMARY" || element.tagName === "A"; 9107 } 9108 if (event.key === " ") { 9109 return isButton(element) || element.tagName === "SUMMARY" || element.tagName === "INPUT" || element.tagName === "SELECT"; 9110 } 9111 return false; 9112 } 9113 var symbol = /* @__PURE__ */ Symbol("command"); 9114 var useCommand = createHook( 9115 function useCommand2({ clickOnEnter = true, clickOnSpace = true, ...props }) { 9116 const ref = (0, import_react16.useRef)(null); 9117 const [isNativeButton, setIsNativeButton] = (0, import_react16.useState)(false); 9118 (0, import_react16.useEffect)(() => { 9119 if (!ref.current) return; 9120 setIsNativeButton(isButton(ref.current)); 9121 }, []); 9122 const [active, setActive] = (0, import_react16.useState)(false); 9123 const activeRef = (0, import_react16.useRef)(false); 9124 const disabled2 = disabledFromProps(props); 9125 const [isDuplicate, metadataProps] = useMetadataProps(props, symbol, true); 9126 const onKeyDownProp = props.onKeyDown; 9127 const onKeyDown = useEvent((event) => { 9128 onKeyDownProp == null ? void 0 : onKeyDownProp(event); 9129 const element = event.currentTarget; 9130 if (event.defaultPrevented) return; 9131 if (isDuplicate) return; 9132 if (disabled2) return; 9133 if (!isSelfTarget(event)) return; 9134 if (isTextField(element)) return; 9135 if (element.isContentEditable) return; 9136 const isEnter = clickOnEnter && event.key === "Enter"; 9137 const isSpace = clickOnSpace && event.key === " "; 9138 const shouldPreventEnter = event.key === "Enter" && !clickOnEnter; 9139 const shouldPreventSpace = event.key === " " && !clickOnSpace; 9140 if (shouldPreventEnter || shouldPreventSpace) { 9141 event.preventDefault(); 9142 return; 9143 } 9144 if (isEnter || isSpace) { 9145 const nativeClick = isNativeClick(event); 9146 if (isEnter) { 9147 if (!nativeClick) { 9148 event.preventDefault(); 9149 const { view, ...eventInit } = event; 9150 const click = () => fireClickEvent(element, eventInit); 9151 if (isFirefox()) { 9152 queueBeforeEvent(element, "keyup", click); 9153 } else { 9154 queueMicrotask(click); 9155 } 9156 } 9157 } else if (isSpace) { 9158 activeRef.current = true; 9159 if (!nativeClick) { 9160 event.preventDefault(); 9161 setActive(true); 9162 } 9163 } 9164 } 9165 }); 9166 const onKeyUpProp = props.onKeyUp; 9167 const onKeyUp = useEvent((event) => { 9168 onKeyUpProp == null ? void 0 : onKeyUpProp(event); 9169 if (event.defaultPrevented) return; 9170 if (isDuplicate) return; 9171 if (disabled2) return; 9172 if (event.metaKey) return; 9173 const isSpace = clickOnSpace && event.key === " "; 9174 if (activeRef.current && isSpace) { 9175 activeRef.current = false; 9176 if (!isNativeClick(event)) { 9177 event.preventDefault(); 9178 setActive(false); 9179 const element = event.currentTarget; 9180 const { view, ...eventInit } = event; 9181 queueMicrotask(() => fireClickEvent(element, eventInit)); 9182 } 9183 } 9184 }); 9185 props = { 9186 "data-active": active || void 0, 9187 type: isNativeButton ? "button" : void 0, 9188 ...metadataProps, 9189 ...props, 9190 ref: useMergeRefs(ref, props.ref), 9191 onKeyDown, 9192 onKeyUp 9193 }; 9194 props = useFocusable(props); 9195 return props; 9196 } 9197 ); 9198 var Command = forwardRef25(function Command2(props) { 9199 const htmlProps = useCommand(props); 9200 return createElement3(TagName3, htmlProps); 9201 }); 9202 9203 // node_modules/@ariakit/core/esm/__chunks/SXKM4CGU.js 9204 function getInternal(store2, key) { 9205 const internals = store2.__unstableInternals; 9206 invariant(internals, "Invalid store"); 9207 return internals[key]; 9208 } 9209 function createStore(initialState, ...stores) { 9210 let state = initialState; 9211 let prevStateBatch = state; 9212 let lastUpdate = /* @__PURE__ */ Symbol(); 9213 let destroy = noop2; 9214 const instances = /* @__PURE__ */ new Set(); 9215 const updatedKeys = /* @__PURE__ */ new Set(); 9216 const setups = /* @__PURE__ */ new Set(); 9217 const listeners = /* @__PURE__ */ new Set(); 9218 const batchListeners = /* @__PURE__ */ new Set(); 9219 const disposables = /* @__PURE__ */ new WeakMap(); 9220 const listenerKeys = /* @__PURE__ */ new WeakMap(); 9221 const storeSetup = (callback) => { 9222 setups.add(callback); 9223 return () => setups.delete(callback); 9224 }; 9225 const storeInit = () => { 9226 const initialized = instances.size; 9227 const instance = /* @__PURE__ */ Symbol(); 9228 instances.add(instance); 9229 const maybeDestroy = () => { 9230 instances.delete(instance); 9231 if (instances.size) return; 9232 destroy(); 9233 }; 9234 if (initialized) return maybeDestroy; 9235 const desyncs = getKeys(state).map( 9236 (key) => chain( 9237 ...stores.map((store2) => { 9238 var _a; 9239 const storeState = (_a = store2 == null ? void 0 : store2.getState) == null ? void 0 : _a.call(store2); 9240 if (!storeState) return; 9241 if (!hasOwnProperty(storeState, key)) return; 9242 return sync(store2, [key], (state2) => { 9243 setState( 9244 key, 9245 state2[key], 9246 // @ts-expect-error - Not public API. This is just to prevent 9247 // infinite loops. 9248 true 9249 ); 9250 }); 9251 }) 9252 ) 9253 ); 9254 const teardowns = []; 9255 for (const setup2 of setups) { 9256 teardowns.push(setup2()); 9257 } 9258 const cleanups = stores.map(init); 9259 destroy = chain(...desyncs, ...teardowns, ...cleanups); 9260 return maybeDestroy; 9261 }; 9262 const sub = (keys, listener, set3 = listeners) => { 9263 set3.add(listener); 9264 listenerKeys.set(listener, keys); 9265 return () => { 9266 var _a; 9267 (_a = disposables.get(listener)) == null ? void 0 : _a(); 9268 disposables.delete(listener); 9269 listenerKeys.delete(listener); 9270 set3.delete(listener); 9271 }; 9272 }; 9273 const storeSubscribe = (keys, listener) => sub(keys, listener); 9274 const storeSync = (keys, listener) => { 9275 disposables.set(listener, listener(state, state)); 9276 return sub(keys, listener); 9277 }; 9278 const storeBatch = (keys, listener) => { 9279 disposables.set(listener, listener(state, prevStateBatch)); 9280 return sub(keys, listener, batchListeners); 9281 }; 9282 const storePick = (keys) => createStore(pick(state, keys), finalStore); 9283 const storeOmit = (keys) => createStore(omit(state, keys), finalStore); 9284 const getState = () => state; 9285 const setState = (key, value, fromStores = false) => { 9286 var _a; 9287 if (!hasOwnProperty(state, key)) return; 9288 const nextValue = applyState(value, state[key]); 9289 if (nextValue === state[key]) return; 9290 if (!fromStores) { 9291 for (const store2 of stores) { 9292 (_a = store2 == null ? void 0 : store2.setState) == null ? void 0 : _a.call(store2, key, nextValue); 9293 } 9294 } 9295 const prevState = state; 9296 state = { ...state, [key]: nextValue }; 9297 const thisUpdate = /* @__PURE__ */ Symbol(); 9298 lastUpdate = thisUpdate; 9299 updatedKeys.add(key); 9300 const run = (listener, prev, uKeys) => { 9301 var _a2; 9302 const keys = listenerKeys.get(listener); 9303 const updated = (k) => uKeys ? uKeys.has(k) : k === key; 9304 if (!keys || keys.some(updated)) { 9305 (_a2 = disposables.get(listener)) == null ? void 0 : _a2(); 9306 disposables.set(listener, listener(state, prev)); 9307 } 9308 }; 9309 for (const listener of listeners) { 9310 run(listener, prevState); 9311 } 9312 queueMicrotask(() => { 9313 if (lastUpdate !== thisUpdate) return; 9314 const snapshot = state; 9315 for (const listener of batchListeners) { 9316 run(listener, prevStateBatch, updatedKeys); 9317 } 9318 prevStateBatch = snapshot; 9319 updatedKeys.clear(); 9320 }); 9321 }; 9322 const finalStore = { 9323 getState, 9324 setState, 9325 __unstableInternals: { 9326 setup: storeSetup, 9327 init: storeInit, 9328 subscribe: storeSubscribe, 9329 sync: storeSync, 9330 batch: storeBatch, 9331 pick: storePick, 9332 omit: storeOmit 9333 } 9334 }; 9335 return finalStore; 9336 } 9337 function setup(store2, ...args) { 9338 if (!store2) return; 9339 return getInternal(store2, "setup")(...args); 9340 } 9341 function init(store2, ...args) { 9342 if (!store2) return; 9343 return getInternal(store2, "init")(...args); 9344 } 9345 function subscribe(store2, ...args) { 9346 if (!store2) return; 9347 return getInternal(store2, "subscribe")(...args); 9348 } 9349 function sync(store2, ...args) { 9350 if (!store2) return; 9351 return getInternal(store2, "sync")(...args); 9352 } 9353 function batch(store2, ...args) { 9354 if (!store2) return; 9355 return getInternal(store2, "batch")(...args); 9356 } 9357 function omit2(store2, ...args) { 9358 if (!store2) return; 9359 return getInternal(store2, "omit")(...args); 9360 } 9361 function pick2(store2, ...args) { 9362 if (!store2) return; 9363 return getInternal(store2, "pick")(...args); 9364 } 9365 function mergeStore(...stores) { 9366 var _a; 9367 const initialState = {}; 9368 for (const store22 of stores) { 9369 const nextState = (_a = store22 == null ? void 0 : store22.getState) == null ? void 0 : _a.call(store22); 9370 if (nextState) { 9371 Object.assign(initialState, nextState); 9372 } 9373 } 9374 const store2 = createStore(initialState, ...stores); 9375 return Object.assign({}, ...stores, store2); 9376 } 9377 function throwOnConflictingProps(props, store2) { 9378 if (false) return; 9379 if (!store2) return; 9380 const defaultKeys = Object.entries(props).filter(([key, value]) => key.startsWith("default") && value !== void 0).map(([key]) => { 9381 var _a; 9382 const stateKey = key.replace("default", ""); 9383 return `${((_a = stateKey[0]) == null ? void 0 : _a.toLowerCase()) || ""}$stateKey.slice(1)}`; 9384 }); 9385 if (!defaultKeys.length) return; 9386 const storeState = store2.getState(); 9387 const conflictingProps = defaultKeys.filter( 9388 (key) => hasOwnProperty(storeState, key) 9389 ); 9390 if (!conflictingProps.length) return; 9391 throw new Error( 9392 `Passing a store prop in conjunction with a default state is not supported. 9393 9394 const store = useSelectStore(); 9395 <SelectProvider store={store} defaultValue="Apple" /> 9396 ^ ^ 9397 9398 Instead, pass the default state to the topmost store: 9399 9400 const store = useSelectStore({ defaultValue: "Apple" }); 9401 <SelectProvider store={store} /> 9402 9403 See https://github.com/ariakit/ariakit/pull/2745 for more details. 9404 9405 If there's a particular need for this, please submit a feature request at https://github.com/ariakit/ariakit 9406 ` 9407 ); 9408 } 9409 9410 // node_modules/@ariakit/react-core/esm/__chunks/Q5W46E73.js 9411 var React25 = __toESM(require_react(), 1); 9412 var import_shim = __toESM(require_shim(), 1); 9413 var { useSyncExternalStore } = import_shim.default; 9414 var noopSubscribe = () => () => { 9415 }; 9416 function useStoreState(store2, keyOrSelector = identity) { 9417 const storeSubscribe = React25.useCallback( 9418 (callback) => { 9419 if (!store2) return noopSubscribe(); 9420 return subscribe(store2, null, callback); 9421 }, 9422 [store2] 9423 ); 9424 const getSnapshot = () => { 9425 const key = typeof keyOrSelector === "string" ? keyOrSelector : null; 9426 const selector2 = typeof keyOrSelector === "function" ? keyOrSelector : null; 9427 const state = store2 == null ? void 0 : store2.getState(); 9428 if (selector2) return selector2(state); 9429 if (!state) return; 9430 if (!key) return; 9431 if (!hasOwnProperty(state, key)) return; 9432 return state[key]; 9433 }; 9434 return useSyncExternalStore(storeSubscribe, getSnapshot, getSnapshot); 9435 } 9436 function useStoreStateObject(store2, object) { 9437 const objRef = React25.useRef( 9438 {} 9439 ); 9440 const storeSubscribe = React25.useCallback( 9441 (callback) => { 9442 if (!store2) return noopSubscribe(); 9443 return subscribe(store2, null, callback); 9444 }, 9445 [store2] 9446 ); 9447 const getSnapshot = () => { 9448 const state = store2 == null ? void 0 : store2.getState(); 9449 let updated = false; 9450 const obj = objRef.current; 9451 for (const prop in object) { 9452 const keyOrSelector = object[prop]; 9453 if (typeof keyOrSelector === "function") { 9454 const value = keyOrSelector(state); 9455 if (value !== obj[prop]) { 9456 obj[prop] = value; 9457 updated = true; 9458 } 9459 } 9460 if (typeof keyOrSelector === "string") { 9461 if (!state) continue; 9462 if (!hasOwnProperty(state, keyOrSelector)) continue; 9463 const value = state[keyOrSelector]; 9464 if (value !== obj[prop]) { 9465 obj[prop] = value; 9466 updated = true; 9467 } 9468 } 9469 } 9470 if (updated) { 9471 objRef.current = { ...obj }; 9472 } 9473 return objRef.current; 9474 }; 9475 return useSyncExternalStore(storeSubscribe, getSnapshot, getSnapshot); 9476 } 9477 function useStoreProps(store2, props, key, setKey) { 9478 const value = hasOwnProperty(props, key) ? props[key] : void 0; 9479 const setValue = setKey ? props[setKey] : void 0; 9480 const propsRef = useLiveRef({ value, setValue }); 9481 useSafeLayoutEffect(() => { 9482 return sync(store2, [key], (state, prev) => { 9483 const { value: value2, setValue: setValue2 } = propsRef.current; 9484 if (!setValue2) return; 9485 if (state[key] === prev[key]) return; 9486 if (state[key] === value2) return; 9487 setValue2(state[key]); 9488 }); 9489 }, [store2, key]); 9490 useSafeLayoutEffect(() => { 9491 if (value === void 0) return; 9492 store2.setState(key, value); 9493 return batch(store2, [key], () => { 9494 if (value === void 0) return; 9495 store2.setState(key, value); 9496 }); 9497 }); 9498 } 9499 function useStore(createStore2, props) { 9500 const [store2, setStore] = React25.useState(() => createStore2(props)); 9501 useSafeLayoutEffect(() => init(store2), [store2]); 9502 const useState210 = React25.useCallback( 9503 (keyOrSelector) => useStoreState(store2, keyOrSelector), 9504 [store2] 9505 ); 9506 const memoizedStore = React25.useMemo( 9507 () => ({ ...store2, useState: useState210 }), 9508 [store2, useState210] 9509 ); 9510 const updateStore = useEvent(() => { 9511 setStore((store22) => createStore2({ ...props, ...store22.getState() })); 9512 }); 9513 return [memoizedStore, updateStore]; 9514 } 9515 9516 // node_modules/@ariakit/react-core/esm/__chunks/WZWDIE3S.js 9517 var import_react17 = __toESM(require_react(), 1); 9518 var import_jsx_runtime67 = __toESM(require_jsx_runtime(), 1); 9519 var TagName4 = "button"; 9520 function isEditableElement(element) { 9521 if (isTextbox(element)) return true; 9522 return element.tagName === "INPUT" && !isButton(element); 9523 } 9524 function getNextPageOffset(scrollingElement, pageUp = false) { 9525 const height = scrollingElement.clientHeight; 9526 const { top } = scrollingElement.getBoundingClientRect(); 9527 const pageSize = Math.max(height * 0.875, height - 40) * 1.5; 9528 const pageOffset = pageUp ? height - pageSize + top : pageSize + top; 9529 if (scrollingElement.tagName === "HTML") { 9530 return pageOffset + scrollingElement.scrollTop; 9531 } 9532 return pageOffset; 9533 } 9534 function getItemOffset(itemElement, pageUp = false) { 9535 const { top } = itemElement.getBoundingClientRect(); 9536 if (pageUp) { 9537 return top + itemElement.clientHeight; 9538 } 9539 return top; 9540 } 9541 function findNextPageItemId(element, store2, next, pageUp = false) { 9542 var _a; 9543 if (!store2) return; 9544 if (!next) return; 9545 const { renderedItems } = store2.getState(); 9546 const scrollingElement = getScrollingElement(element); 9547 if (!scrollingElement) return; 9548 const nextPageOffset = getNextPageOffset(scrollingElement, pageUp); 9549 let id; 9550 let prevDifference; 9551 for (let i2 = 0; i2 < renderedItems.length; i2 += 1) { 9552 const previousId = id; 9553 id = next(i2); 9554 if (!id) break; 9555 if (id === previousId) continue; 9556 const itemElement = (_a = getEnabledItem(store2, id)) == null ? void 0 : _a.element; 9557 if (!itemElement) continue; 9558 const itemOffset = getItemOffset(itemElement, pageUp); 9559 const difference = itemOffset - nextPageOffset; 9560 const absDifference = Math.abs(difference); 9561 if (pageUp && difference <= 0 || !pageUp && difference >= 0) { 9562 if (prevDifference !== void 0 && prevDifference < absDifference) { 9563 id = previousId; 9564 } 9565 break; 9566 } 9567 prevDifference = absDifference; 9568 } 9569 return id; 9570 } 9571 function targetIsAnotherItem(event, store2) { 9572 if (isSelfTarget(event)) return false; 9573 return isItem(store2, event.target); 9574 } 9575 var useCompositeItem = createHook( 9576 function useCompositeItem2({ 9577 store: store2, 9578 rowId: rowIdProp, 9579 preventScrollOnKeyDown = false, 9580 moveOnKeyPress = true, 9581 tabbable = false, 9582 getItem: getItemProp, 9583 "aria-setsize": ariaSetSizeProp, 9584 "aria-posinset": ariaPosInSetProp, 9585 ...props 9586 }) { 9587 const context = useCompositeContext(); 9588 store2 = store2 || context; 9589 const id = useId5(props.id); 9590 const ref = (0, import_react17.useRef)(null); 9591 const row = (0, import_react17.useContext)(CompositeRowContext); 9592 const disabled2 = disabledFromProps(props); 9593 const trulyDisabled = disabled2 && !props.accessibleWhenDisabled; 9594 const { 9595 rowId, 9596 baseElement, 9597 isActiveItem, 9598 ariaSetSize, 9599 ariaPosInSet, 9600 isTabbable 9601 } = useStoreStateObject(store2, { 9602 rowId(state) { 9603 if (rowIdProp) return rowIdProp; 9604 if (!state) return; 9605 if (!(row == null ? void 0 : row.baseElement)) return; 9606 if (row.baseElement !== state.baseElement) return; 9607 return row.id; 9608 }, 9609 baseElement(state) { 9610 return (state == null ? void 0 : state.baseElement) || void 0; 9611 }, 9612 isActiveItem(state) { 9613 return !!state && state.activeId === id; 9614 }, 9615 ariaSetSize(state) { 9616 if (ariaSetSizeProp != null) return ariaSetSizeProp; 9617 if (!state) return; 9618 if (!(row == null ? void 0 : row.ariaSetSize)) return; 9619 if (row.baseElement !== state.baseElement) return; 9620 return row.ariaSetSize; 9621 }, 9622 ariaPosInSet(state) { 9623 if (ariaPosInSetProp != null) return ariaPosInSetProp; 9624 if (!state) return; 9625 if (!(row == null ? void 0 : row.ariaPosInSet)) return; 9626 if (row.baseElement !== state.baseElement) return; 9627 const itemsInRow = state.renderedItems.filter( 9628 (item) => item.rowId === rowId 9629 ); 9630 return row.ariaPosInSet + itemsInRow.findIndex((item) => item.id === id); 9631 }, 9632 isTabbable(state) { 9633 if (!(state == null ? void 0 : state.renderedItems.length)) return true; 9634 if (state.virtualFocus) return false; 9635 if (tabbable) return true; 9636 if (state.activeId === null) return false; 9637 const item = store2 == null ? void 0 : store2.item(state.activeId); 9638 if (item == null ? void 0 : item.disabled) return true; 9639 if (!(item == null ? void 0 : item.element)) return true; 9640 return state.activeId === id; 9641 } 9642 }); 9643 const getItem = (0, import_react17.useCallback)( 9644 (item) => { 9645 var _a; 9646 const nextItem = { 9647 ...item, 9648 id: id || item.id, 9649 rowId, 9650 disabled: !!trulyDisabled, 9651 children: (_a = item.element) == null ? void 0 : _a.textContent 9652 }; 9653 if (getItemProp) { 9654 return getItemProp(nextItem); 9655 } 9656 return nextItem; 9657 }, 9658 [id, rowId, trulyDisabled, getItemProp] 9659 ); 9660 const onFocusProp = props.onFocus; 9661 const hasFocusedComposite = (0, import_react17.useRef)(false); 9662 const onFocus = useEvent((event) => { 9663 onFocusProp == null ? void 0 : onFocusProp(event); 9664 if (event.defaultPrevented) return; 9665 if (isPortalEvent(event)) return; 9666 if (!id) return; 9667 if (!store2) return; 9668 if (targetIsAnotherItem(event, store2)) return; 9669 const { virtualFocus, baseElement: baseElement2 } = store2.getState(); 9670 store2.setActiveId(id); 9671 if (isTextbox(event.currentTarget)) { 9672 selectTextField(event.currentTarget); 9673 } 9674 if (!virtualFocus) return; 9675 if (!isSelfTarget(event)) return; 9676 if (isEditableElement(event.currentTarget)) return; 9677 if (!(baseElement2 == null ? void 0 : baseElement2.isConnected)) return; 9678 if (isSafari() && event.currentTarget.hasAttribute("data-autofocus")) { 9679 event.currentTarget.scrollIntoView({ 9680 block: "nearest", 9681 inline: "nearest" 9682 }); 9683 } 9684 hasFocusedComposite.current = true; 9685 const fromComposite = event.relatedTarget === baseElement2 || isItem(store2, event.relatedTarget); 9686 if (fromComposite) { 9687 focusSilently(baseElement2); 9688 } else { 9689 baseElement2.focus(); 9690 } 9691 }); 9692 const onBlurCaptureProp = props.onBlurCapture; 9693 const onBlurCapture = useEvent((event) => { 9694 onBlurCaptureProp == null ? void 0 : onBlurCaptureProp(event); 9695 if (event.defaultPrevented) return; 9696 const state = store2 == null ? void 0 : store2.getState(); 9697 if ((state == null ? void 0 : state.virtualFocus) && hasFocusedComposite.current) { 9698 hasFocusedComposite.current = false; 9699 event.preventDefault(); 9700 event.stopPropagation(); 9701 } 9702 }); 9703 const onKeyDownProp = props.onKeyDown; 9704 const preventScrollOnKeyDownProp = useBooleanEvent(preventScrollOnKeyDown); 9705 const moveOnKeyPressProp = useBooleanEvent(moveOnKeyPress); 9706 const onKeyDown = useEvent((event) => { 9707 onKeyDownProp == null ? void 0 : onKeyDownProp(event); 9708 if (event.defaultPrevented) return; 9709 if (!isSelfTarget(event)) return; 9710 if (!store2) return; 9711 const { currentTarget } = event; 9712 const state = store2.getState(); 9713 const item = store2.item(id); 9714 const isGrid2 = !!(item == null ? void 0 : item.rowId); 9715 const isVertical = state.orientation !== "horizontal"; 9716 const isHorizontal = state.orientation !== "vertical"; 9717 const canHomeEnd = () => { 9718 if (isGrid2) return true; 9719 if (isHorizontal) return true; 9720 if (!state.baseElement) return true; 9721 if (!isTextField(state.baseElement)) return true; 9722 return false; 9723 }; 9724 const keyMap = { 9725 ArrowUp: (isGrid2 || isVertical) && store2.up, 9726 ArrowRight: (isGrid2 || isHorizontal) && store2.next, 9727 ArrowDown: (isGrid2 || isVertical) && store2.down, 9728 ArrowLeft: (isGrid2 || isHorizontal) && store2.previous, 9729 Home: () => { 9730 if (!canHomeEnd()) return; 9731 if (!isGrid2 || event.ctrlKey) { 9732 return store2 == null ? void 0 : store2.first(); 9733 } 9734 return store2 == null ? void 0 : store2.previous(-1); 9735 }, 9736 End: () => { 9737 if (!canHomeEnd()) return; 9738 if (!isGrid2 || event.ctrlKey) { 9739 return store2 == null ? void 0 : store2.last(); 9740 } 9741 return store2 == null ? void 0 : store2.next(-1); 9742 }, 9743 PageUp: () => { 9744 return findNextPageItemId(currentTarget, store2, store2 == null ? void 0 : store2.up, true); 9745 }, 9746 PageDown: () => { 9747 return findNextPageItemId(currentTarget, store2, store2 == null ? void 0 : store2.down); 9748 } 9749 }; 9750 const action = keyMap[event.key]; 9751 if (action) { 9752 if (isTextbox(currentTarget)) { 9753 const selection = getTextboxSelection(currentTarget); 9754 const isLeft = isHorizontal && event.key === "ArrowLeft"; 9755 const isRight = isHorizontal && event.key === "ArrowRight"; 9756 const isUp = isVertical && event.key === "ArrowUp"; 9757 const isDown = isVertical && event.key === "ArrowDown"; 9758 if (isRight || isDown) { 9759 const { length: valueLength } = getTextboxValue(currentTarget); 9760 if (selection.end !== valueLength) return; 9761 } else if ((isLeft || isUp) && selection.start !== 0) return; 9762 } 9763 const nextId = action(); 9764 if (preventScrollOnKeyDownProp(event) || nextId !== void 0) { 9765 if (!moveOnKeyPressProp(event)) return; 9766 event.preventDefault(); 9767 store2.move(nextId); 9768 } 9769 } 9770 }); 9771 const providerValue = (0, import_react17.useMemo)( 9772 () => ({ id, baseElement }), 9773 [id, baseElement] 9774 ); 9775 props = useWrapElement( 9776 props, 9777 (element) => /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(CompositeItemContext.Provider, { value: providerValue, children: element }), 9778 [providerValue] 9779 ); 9780 props = { 9781 id, 9782 "data-active-item": isActiveItem || void 0, 9783 ...props, 9784 ref: useMergeRefs(ref, props.ref), 9785 tabIndex: isTabbable ? props.tabIndex : -1, 9786 onFocus, 9787 onBlurCapture, 9788 onKeyDown 9789 }; 9790 props = useCommand(props); 9791 props = useCollectionItem({ 9792 store: store2, 9793 ...props, 9794 getItem, 9795 shouldRegisterItem: id ? props.shouldRegisterItem : false 9796 }); 9797 return removeUndefinedValues({ 9798 ...props, 9799 "aria-setsize": ariaSetSize, 9800 "aria-posinset": ariaPosInSet 9801 }); 9802 } 9803 ); 9804 var CompositeItem = memo22( 9805 forwardRef25(function CompositeItem2(props) { 9806 const htmlProps = useCompositeItem(props); 9807 return createElement3(TagName4, htmlProps); 9808 }) 9809 ); 9810 9811 // node_modules/@ariakit/core/esm/__chunks/7PRQYBBV.js 9812 function toArray(arg) { 9813 if (Array.isArray(arg)) { 9814 return arg; 9815 } 9816 return typeof arg !== "undefined" ? [arg] : []; 9817 } 9818 function flatten2DArray(array) { 9819 const flattened = []; 9820 for (const row of array) { 9821 flattened.push(...row); 9822 } 9823 return flattened; 9824 } 9825 function reverseArray(array) { 9826 return array.slice().reverse(); 9827 } 9828 9829 // node_modules/@ariakit/react-core/esm/__chunks/ZMWF7ASR.js 9830 var import_react18 = __toESM(require_react(), 1); 9831 var import_jsx_runtime68 = __toESM(require_jsx_runtime(), 1); 9832 var TagName5 = "div"; 9833 function isGrid(items) { 9834 return items.some((item) => !!item.rowId); 9835 } 9836 function isPrintableKey(event) { 9837 const target = event.target; 9838 if (target && !isTextField(target)) return false; 9839 return event.key.length === 1 && !event.ctrlKey && !event.metaKey; 9840 } 9841 function isModifierKey(event) { 9842 return event.key === "Shift" || event.key === "Control" || event.key === "Alt" || event.key === "Meta"; 9843 } 9844 function useKeyboardEventProxy(store2, onKeyboardEvent, previousElementRef) { 9845 return useEvent((event) => { 9846 var _a; 9847 onKeyboardEvent == null ? void 0 : onKeyboardEvent(event); 9848 if (event.defaultPrevented) return; 9849 if (event.isPropagationStopped()) return; 9850 if (!isSelfTarget(event)) return; 9851 if (isModifierKey(event)) return; 9852 if (isPrintableKey(event)) return; 9853 const state = store2.getState(); 9854 const activeElement = (_a = getEnabledItem(store2, state.activeId)) == null ? void 0 : _a.element; 9855 if (!activeElement) return; 9856 const { view, ...eventInit } = event; 9857 const previousElement = previousElementRef == null ? void 0 : previousElementRef.current; 9858 if (activeElement !== previousElement) { 9859 activeElement.focus(); 9860 } 9861 if (!fireKeyboardEvent(activeElement, event.type, eventInit)) { 9862 event.preventDefault(); 9863 } 9864 if (event.currentTarget.contains(activeElement)) { 9865 event.stopPropagation(); 9866 } 9867 }); 9868 } 9869 function findFirstEnabledItemInTheLastRow(items) { 9870 return findFirstEnabledItem( 9871 flatten2DArray(reverseArray(groupItemsByRows(items))) 9872 ); 9873 } 9874 function useScheduleFocus(store2) { 9875 const [scheduled, setScheduled] = (0, import_react18.useState)(false); 9876 const schedule = (0, import_react18.useCallback)(() => setScheduled(true), []); 9877 const activeItem = store2.useState( 9878 (state) => getEnabledItem(store2, state.activeId) 9879 ); 9880 (0, import_react18.useEffect)(() => { 9881 const activeElement = activeItem == null ? void 0 : activeItem.element; 9882 if (!scheduled) return; 9883 if (!activeElement) return; 9884 setScheduled(false); 9885 activeElement.focus({ preventScroll: true }); 9886 }, [activeItem, scheduled]); 9887 return schedule; 9888 } 9889 var useComposite = createHook( 9890 function useComposite2({ 9891 store: store2, 9892 composite = true, 9893 focusOnMove = composite, 9894 moveOnKeyPress = true, 9895 ...props 9896 }) { 9897 const context = useCompositeProviderContext(); 9898 store2 = store2 || context; 9899 invariant( 9900 store2, 9901 "Composite must receive a `store` prop or be wrapped in a CompositeProvider component." 9902 ); 9903 const ref = (0, import_react18.useRef)(null); 9904 const previousElementRef = (0, import_react18.useRef)(null); 9905 const scheduleFocus = useScheduleFocus(store2); 9906 const moves = store2.useState("moves"); 9907 const [, setBaseElement] = useTransactionState( 9908 composite ? store2.setBaseElement : null 9909 ); 9910 (0, import_react18.useEffect)(() => { 9911 var _a; 9912 if (!store2) return; 9913 if (!moves) return; 9914 if (!composite) return; 9915 if (!focusOnMove) return; 9916 const { activeId: activeId2 } = store2.getState(); 9917 const itemElement = (_a = getEnabledItem(store2, activeId2)) == null ? void 0 : _a.element; 9918 if (!itemElement) return; 9919 focusIntoView(itemElement); 9920 }, [store2, moves, composite, focusOnMove]); 9921 useSafeLayoutEffect(() => { 9922 if (!store2) return; 9923 if (!moves) return; 9924 if (!composite) return; 9925 const { baseElement, activeId: activeId2 } = store2.getState(); 9926 const isSelfAcive = activeId2 === null; 9927 if (!isSelfAcive) return; 9928 if (!baseElement) return; 9929 const previousElement = previousElementRef.current; 9930 previousElementRef.current = null; 9931 if (previousElement) { 9932 fireBlurEvent(previousElement, { relatedTarget: baseElement }); 9933 } 9934 if (!hasFocus(baseElement)) { 9935 baseElement.focus(); 9936 } 9937 }, [store2, moves, composite]); 9938 const activeId = store2.useState("activeId"); 9939 const virtualFocus = store2.useState("virtualFocus"); 9940 useSafeLayoutEffect(() => { 9941 var _a; 9942 if (!store2) return; 9943 if (!composite) return; 9944 if (!virtualFocus) return; 9945 const previousElement = previousElementRef.current; 9946 previousElementRef.current = null; 9947 if (!previousElement) return; 9948 const activeElement = (_a = getEnabledItem(store2, activeId)) == null ? void 0 : _a.element; 9949 const relatedTarget = activeElement || getActiveElement(previousElement); 9950 if (relatedTarget === previousElement) return; 9951 fireBlurEvent(previousElement, { relatedTarget }); 9952 }, [store2, activeId, virtualFocus, composite]); 9953 const onKeyDownCapture = useKeyboardEventProxy( 9954 store2, 9955 props.onKeyDownCapture, 9956 previousElementRef 9957 ); 9958 const onKeyUpCapture = useKeyboardEventProxy( 9959 store2, 9960 props.onKeyUpCapture, 9961 previousElementRef 9962 ); 9963 const onFocusCaptureProp = props.onFocusCapture; 9964 const onFocusCapture = useEvent((event) => { 9965 onFocusCaptureProp == null ? void 0 : onFocusCaptureProp(event); 9966 if (event.defaultPrevented) return; 9967 if (!store2) return; 9968 const { virtualFocus: virtualFocus2 } = store2.getState(); 9969 if (!virtualFocus2) return; 9970 const previousActiveElement = event.relatedTarget; 9971 const isSilentlyFocused = silentlyFocused(event.currentTarget); 9972 if (isSelfTarget(event) && isSilentlyFocused) { 9973 event.stopPropagation(); 9974 previousElementRef.current = previousActiveElement; 9975 } 9976 }); 9977 const onFocusProp = props.onFocus; 9978 const onFocus = useEvent((event) => { 9979 onFocusProp == null ? void 0 : onFocusProp(event); 9980 if (event.defaultPrevented) return; 9981 if (!composite) return; 9982 if (!store2) return; 9983 const { relatedTarget } = event; 9984 const { virtualFocus: virtualFocus2 } = store2.getState(); 9985 if (virtualFocus2) { 9986 if (isSelfTarget(event) && !isItem(store2, relatedTarget)) { 9987 queueMicrotask(scheduleFocus); 9988 } 9989 } else if (isSelfTarget(event)) { 9990 store2.setActiveId(null); 9991 } 9992 }); 9993 const onBlurCaptureProp = props.onBlurCapture; 9994 const onBlurCapture = useEvent((event) => { 9995 var _a; 9996 onBlurCaptureProp == null ? void 0 : onBlurCaptureProp(event); 9997 if (event.defaultPrevented) return; 9998 if (!store2) return; 9999 const { virtualFocus: virtualFocus2, activeId: activeId2 } = store2.getState(); 10000 if (!virtualFocus2) return; 10001 const activeElement = (_a = getEnabledItem(store2, activeId2)) == null ? void 0 : _a.element; 10002 const nextActiveElement = event.relatedTarget; 10003 const nextActiveElementIsItem = isItem(store2, nextActiveElement); 10004 const previousElement = previousElementRef.current; 10005 previousElementRef.current = null; 10006 if (isSelfTarget(event) && nextActiveElementIsItem) { 10007 if (nextActiveElement === activeElement) { 10008 if (previousElement && previousElement !== nextActiveElement) { 10009 fireBlurEvent(previousElement, event); 10010 } 10011 } else if (activeElement) { 10012 fireBlurEvent(activeElement, event); 10013 } else if (previousElement) { 10014 fireBlurEvent(previousElement, event); 10015 } 10016 event.stopPropagation(); 10017 } else { 10018 const targetIsItem = isItem(store2, event.target); 10019 if (!targetIsItem && activeElement) { 10020 fireBlurEvent(activeElement, event); 10021 } 10022 } 10023 }); 10024 const onKeyDownProp = props.onKeyDown; 10025 const moveOnKeyPressProp = useBooleanEvent(moveOnKeyPress); 10026 const onKeyDown = useEvent((event) => { 10027 var _a; 10028 onKeyDownProp == null ? void 0 : onKeyDownProp(event); 10029 if (event.nativeEvent.isComposing) return; 10030 if (event.defaultPrevented) return; 10031 if (!store2) return; 10032 if (!isSelfTarget(event)) return; 10033 const { orientation, renderedItems, activeId: activeId2 } = store2.getState(); 10034 const activeItem = getEnabledItem(store2, activeId2); 10035 if ((_a = activeItem == null ? void 0 : activeItem.element) == null ? void 0 : _a.isConnected) return; 10036 const isVertical = orientation !== "horizontal"; 10037 const isHorizontal = orientation !== "vertical"; 10038 const grid = isGrid(renderedItems); 10039 const isHorizontalKey = event.key === "ArrowLeft" || event.key === "ArrowRight" || event.key === "Home" || event.key === "End"; 10040 if (isHorizontalKey && isTextField(event.currentTarget)) return; 10041 const up = () => { 10042 if (grid) { 10043 const item = findFirstEnabledItemInTheLastRow(renderedItems); 10044 return item == null ? void 0 : item.id; 10045 } 10046 return store2 == null ? void 0 : store2.last(); 10047 }; 10048 const keyMap = { 10049 ArrowUp: (grid || isVertical) && up, 10050 ArrowRight: (grid || isHorizontal) && store2.first, 10051 ArrowDown: (grid || isVertical) && store2.first, 10052 ArrowLeft: (grid || isHorizontal) && store2.last, 10053 Home: store2.first, 10054 End: store2.last, 10055 PageUp: store2.first, 10056 PageDown: store2.last 10057 }; 10058 const action = keyMap[event.key]; 10059 if (action) { 10060 const id = action(); 10061 if (id !== void 0) { 10062 if (!moveOnKeyPressProp(event)) return; 10063 event.preventDefault(); 10064 store2.move(id); 10065 } 10066 } 10067 }); 10068 props = useWrapElement( 10069 props, 10070 (element) => /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(CompositeContextProvider, { value: store2, children: element }), 10071 [store2] 10072 ); 10073 const activeDescendant = store2.useState((state) => { 10074 var _a; 10075 if (!store2) return; 10076 if (!composite) return; 10077 if (!state.virtualFocus) return; 10078 return (_a = getEnabledItem(store2, state.activeId)) == null ? void 0 : _a.id; 10079 }); 10080 props = { 10081 "aria-activedescendant": activeDescendant, 10082 ...props, 10083 ref: useMergeRefs(ref, setBaseElement, props.ref), 10084 onKeyDownCapture, 10085 onKeyUpCapture, 10086 onFocusCapture, 10087 onFocus, 10088 onBlurCapture, 10089 onKeyDown 10090 }; 10091 const focusable = store2.useState( 10092 (state) => composite && (state.virtualFocus || state.activeId === null) 10093 ); 10094 props = useFocusable({ focusable, ...props }); 10095 return props; 10096 } 10097 ); 10098 var Composite5 = forwardRef25(function Composite22(props) { 10099 const htmlProps = useComposite(props); 10100 return createElement3(TagName5, htmlProps); 10101 }); 10102 10103 // node_modules/@ariakit/react-core/esm/__chunks/LVDQFHCH.js 10104 var ctx3 = createStoreContext(); 10105 var useDisclosureContext = ctx3.useContext; 10106 var useDisclosureScopedContext = ctx3.useScopedContext; 10107 var useDisclosureProviderContext = ctx3.useProviderContext; 10108 var DisclosureContextProvider = ctx3.ContextProvider; 10109 var DisclosureScopedContextProvider = ctx3.ScopedContextProvider; 10110 10111 // node_modules/@ariakit/react-core/esm/__chunks/A62MDFCW.js 10112 var import_react19 = __toESM(require_react(), 1); 10113 var ctx4 = createStoreContext( 10114 [DisclosureContextProvider], 10115 [DisclosureScopedContextProvider] 10116 ); 10117 var useDialogContext = ctx4.useContext; 10118 var useDialogScopedContext = ctx4.useScopedContext; 10119 var useDialogProviderContext = ctx4.useProviderContext; 10120 var DialogContextProvider = ctx4.ContextProvider; 10121 var DialogScopedContextProvider = ctx4.ScopedContextProvider; 10122 var DialogHeadingContext = (0, import_react19.createContext)(void 0); 10123 var DialogDescriptionContext = (0, import_react19.createContext)(void 0); 10124 10125 // node_modules/@ariakit/react-core/esm/__chunks/6B3RXHKP.js 10126 var import_react20 = __toESM(require_react(), 1); 10127 var import_react_dom = __toESM(require_react_dom(), 1); 10128 var import_jsx_runtime69 = __toESM(require_jsx_runtime(), 1); 10129 var TagName6 = "div"; 10130 function afterTimeout(timeoutMs, cb) { 10131 const timeoutId = setTimeout(cb, timeoutMs); 10132 return () => clearTimeout(timeoutId); 10133 } 10134 function afterPaint2(cb) { 10135 let raf = requestAnimationFrame(() => { 10136 raf = requestAnimationFrame(cb); 10137 }); 10138 return () => cancelAnimationFrame(raf); 10139 } 10140 function parseCSSTime(...times) { 10141 return times.join(", ").split(", ").reduce((longestTime, currentTimeString) => { 10142 const multiplier = currentTimeString.endsWith("ms") ? 1 : 1e3; 10143 const currentTime = Number.parseFloat(currentTimeString || "0s") * multiplier; 10144 if (currentTime > longestTime) return currentTime; 10145 return longestTime; 10146 }, 0); 10147 } 10148 function isHidden(mounted, hidden, alwaysVisible) { 10149 return !alwaysVisible && hidden !== false && (!mounted || !!hidden); 10150 } 10151 var useDisclosureContent = createHook(function useDisclosureContent2({ store: store2, alwaysVisible, ...props }) { 10152 const context = useDisclosureProviderContext(); 10153 store2 = store2 || context; 10154 invariant( 10155 store2, 10156 "DisclosureContent must receive a `store` prop or be wrapped in a DisclosureProvider component." 10157 ); 10158 const ref = (0, import_react20.useRef)(null); 10159 const id = useId5(props.id); 10160 const [transition, setTransition] = (0, import_react20.useState)(null); 10161 const open = store2.useState("open"); 10162 const mounted = store2.useState("mounted"); 10163 const animated = store2.useState("animated"); 10164 const contentElement = store2.useState("contentElement"); 10165 const otherElement = useStoreState(store2.disclosure, "contentElement"); 10166 useSafeLayoutEffect(() => { 10167 if (!ref.current) return; 10168 store2 == null ? void 0 : store2.setContentElement(ref.current); 10169 }, [store2]); 10170 useSafeLayoutEffect(() => { 10171 let previousAnimated; 10172 store2 == null ? void 0 : store2.setState("animated", (animated2) => { 10173 previousAnimated = animated2; 10174 return true; 10175 }); 10176 return () => { 10177 if (previousAnimated === void 0) return; 10178 store2 == null ? void 0 : store2.setState("animated", previousAnimated); 10179 }; 10180 }, [store2]); 10181 useSafeLayoutEffect(() => { 10182 if (!animated) return; 10183 if (!(contentElement == null ? void 0 : contentElement.isConnected)) { 10184 setTransition(null); 10185 return; 10186 } 10187 return afterPaint2(() => { 10188 setTransition(open ? "enter" : mounted ? "leave" : null); 10189 }); 10190 }, [animated, contentElement, open, mounted]); 10191 useSafeLayoutEffect(() => { 10192 if (!store2) return; 10193 if (!animated) return; 10194 if (!transition) return; 10195 if (!contentElement) return; 10196 const stopAnimation = () => store2 == null ? void 0 : store2.setState("animating", false); 10197 const stopAnimationSync = () => (0, import_react_dom.flushSync)(stopAnimation); 10198 if (transition === "leave" && open) return; 10199 if (transition === "enter" && !open) return; 10200 if (typeof animated === "number") { 10201 const timeout2 = animated; 10202 return afterTimeout(timeout2, stopAnimationSync); 10203 } 10204 const { 10205 transitionDuration, 10206 animationDuration, 10207 transitionDelay, 10208 animationDelay 10209 } = getComputedStyle(contentElement); 10210 const { 10211 transitionDuration: transitionDuration2 = "0", 10212 animationDuration: animationDuration2 = "0", 10213 transitionDelay: transitionDelay2 = "0", 10214 animationDelay: animationDelay2 = "0" 10215 } = otherElement ? getComputedStyle(otherElement) : {}; 10216 const delay = parseCSSTime( 10217 transitionDelay, 10218 animationDelay, 10219 transitionDelay2, 10220 animationDelay2 10221 ); 10222 const duration = parseCSSTime( 10223 transitionDuration, 10224 animationDuration, 10225 transitionDuration2, 10226 animationDuration2 10227 ); 10228 const timeout = delay + duration; 10229 if (!timeout) { 10230 if (transition === "enter") { 10231 store2.setState("animated", false); 10232 } 10233 stopAnimation(); 10234 return; 10235 } 10236 const frameRate = 1e3 / 60; 10237 const maxTimeout = Math.max(timeout - frameRate, 0); 10238 return afterTimeout(maxTimeout, stopAnimationSync); 10239 }, [store2, animated, contentElement, otherElement, open, transition]); 10240 props = useWrapElement( 10241 props, 10242 (element) => /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(DialogScopedContextProvider, { value: store2, children: element }), 10243 [store2] 10244 ); 10245 const hidden = isHidden(mounted, props.hidden, alwaysVisible); 10246 const styleProp = props.style; 10247 const style = (0, import_react20.useMemo)(() => { 10248 if (hidden) { 10249 return { ...styleProp, display: "none" }; 10250 } 10251 return styleProp; 10252 }, [hidden, styleProp]); 10253 props = { 10254 id, 10255 "data-open": open || void 0, 10256 "data-enter": transition === "enter" || void 0, 10257 "data-leave": transition === "leave" || void 0, 10258 hidden, 10259 ...props, 10260 ref: useMergeRefs(id ? store2.setContentElement : null, ref, props.ref), 10261 style 10262 }; 10263 return removeUndefinedValues(props); 10264 }); 10265 var DisclosureContentImpl = forwardRef25(function DisclosureContentImpl2(props) { 10266 const htmlProps = useDisclosureContent(props); 10267 return createElement3(TagName6, htmlProps); 10268 }); 10269 var DisclosureContent = forwardRef25(function DisclosureContent2({ 10270 unmountOnHide, 10271 ...props 10272 }) { 10273 const context = useDisclosureProviderContext(); 10274 const store2 = props.store || context; 10275 const mounted = useStoreState( 10276 store2, 10277 (state) => !unmountOnHide || (state == null ? void 0 : state.mounted) 10278 ); 10279 if (mounted === false) return null; 10280 return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(DisclosureContentImpl, { ...props }); 10281 }); 10282 10283 // node_modules/@ariakit/core/esm/__chunks/75BJEVSH.js 10284 function createDisclosureStore(props = {}) { 10285 const store2 = mergeStore( 10286 props.store, 10287 omit2(props.disclosure, ["contentElement", "disclosureElement"]) 10288 ); 10289 throwOnConflictingProps(props, store2); 10290 const syncState = store2 == null ? void 0 : store2.getState(); 10291 const open = defaultValue( 10292 props.open, 10293 syncState == null ? void 0 : syncState.open, 10294 props.defaultOpen, 10295 false 10296 ); 10297 const animated = defaultValue(props.animated, syncState == null ? void 0 : syncState.animated, false); 10298 const initialState = { 10299 open, 10300 animated, 10301 animating: !!animated && open, 10302 mounted: open, 10303 contentElement: defaultValue(syncState == null ? void 0 : syncState.contentElement, null), 10304 disclosureElement: defaultValue(syncState == null ? void 0 : syncState.disclosureElement, null) 10305 }; 10306 const disclosure = createStore(initialState, store2); 10307 setup( 10308 disclosure, 10309 () => sync(disclosure, ["animated", "animating"], (state) => { 10310 if (state.animated) return; 10311 disclosure.setState("animating", false); 10312 }) 10313 ); 10314 setup( 10315 disclosure, 10316 () => subscribe(disclosure, ["open"], () => { 10317 if (!disclosure.getState().animated) return; 10318 disclosure.setState("animating", true); 10319 }) 10320 ); 10321 setup( 10322 disclosure, 10323 () => sync(disclosure, ["open", "animating"], (state) => { 10324 disclosure.setState("mounted", state.open || state.animating); 10325 }) 10326 ); 10327 return { 10328 ...disclosure, 10329 disclosure: props.disclosure, 10330 setOpen: (value) => disclosure.setState("open", value), 10331 show: () => disclosure.setState("open", true), 10332 hide: () => disclosure.setState("open", false), 10333 toggle: () => disclosure.setState("open", (open2) => !open2), 10334 stopAnimation: () => disclosure.setState("animating", false), 10335 setContentElement: (value) => disclosure.setState("contentElement", value), 10336 setDisclosureElement: (value) => disclosure.setState("disclosureElement", value) 10337 }; 10338 } 10339 10340 // node_modules/@ariakit/react-core/esm/__chunks/WLZ6H5FH.js 10341 function useDisclosureStoreProps(store2, update2, props) { 10342 useUpdateEffect(update2, [props.store, props.disclosure]); 10343 useStoreProps(store2, props, "open", "setOpen"); 10344 useStoreProps(store2, props, "mounted", "setMounted"); 10345 useStoreProps(store2, props, "animated"); 10346 return Object.assign(store2, { disclosure: props.disclosure }); 10347 } 10348 10349 // node_modules/@ariakit/react-core/esm/__chunks/JMU4N4M5.js 10350 var ctx5 = createStoreContext( 10351 [DialogContextProvider], 10352 [DialogScopedContextProvider] 10353 ); 10354 var usePopoverContext = ctx5.useContext; 10355 var usePopoverScopedContext = ctx5.useScopedContext; 10356 var usePopoverProviderContext = ctx5.useProviderContext; 10357 var PopoverContextProvider = ctx5.ContextProvider; 10358 var PopoverScopedContextProvider = ctx5.ScopedContextProvider; 10359 10360 // node_modules/@ariakit/core/esm/__chunks/N5XGANPW.js 10361 function getCommonParent(items) { 10362 var _a; 10363 const firstItem = items.find((item) => !!item.element); 10364 const lastItem = [...items].reverse().find((item) => !!item.element); 10365 let parentElement = (_a = firstItem == null ? void 0 : firstItem.element) == null ? void 0 : _a.parentElement; 10366 while (parentElement && (lastItem == null ? void 0 : lastItem.element)) { 10367 const parent = parentElement; 10368 if (lastItem && parent.contains(lastItem.element)) { 10369 return parentElement; 10370 } 10371 parentElement = parentElement.parentElement; 10372 } 10373 return getDocument(parentElement).body; 10374 } 10375 function getPrivateStore(store2) { 10376 return store2 == null ? void 0 : store2.__unstablePrivateStore; 10377 } 10378 function createCollectionStore(props = {}) { 10379 var _a; 10380 throwOnConflictingProps(props, props.store); 10381 const syncState = (_a = props.store) == null ? void 0 : _a.getState(); 10382 const items = defaultValue( 10383 props.items, 10384 syncState == null ? void 0 : syncState.items, 10385 props.defaultItems, 10386 [] 10387 ); 10388 const itemsMap = new Map(items.map((item) => [item.id, item])); 10389 const initialState = { 10390 items, 10391 renderedItems: defaultValue(syncState == null ? void 0 : syncState.renderedItems, []) 10392 }; 10393 const syncPrivateStore = getPrivateStore(props.store); 10394 const privateStore = createStore( 10395 { items, renderedItems: initialState.renderedItems }, 10396 syncPrivateStore 10397 ); 10398 const collection = createStore(initialState, props.store); 10399 const sortItems = (renderedItems) => { 10400 const sortedItems = sortBasedOnDOMPosition(renderedItems, (i2) => i2.element); 10401 privateStore.setState("renderedItems", sortedItems); 10402 collection.setState("renderedItems", sortedItems); 10403 }; 10404 setup(collection, () => init(privateStore)); 10405 setup(privateStore, () => { 10406 return batch(privateStore, ["items"], (state) => { 10407 collection.setState("items", state.items); 10408 }); 10409 }); 10410 setup(privateStore, () => { 10411 return batch(privateStore, ["renderedItems"], (state) => { 10412 let firstRun = true; 10413 let raf = requestAnimationFrame(() => { 10414 const { renderedItems } = collection.getState(); 10415 if (state.renderedItems === renderedItems) return; 10416 sortItems(state.renderedItems); 10417 }); 10418 if (typeof IntersectionObserver !== "function") { 10419 return () => cancelAnimationFrame(raf); 10420 } 10421 const ioCallback = () => { 10422 if (firstRun) { 10423 firstRun = false; 10424 return; 10425 } 10426 cancelAnimationFrame(raf); 10427 raf = requestAnimationFrame(() => sortItems(state.renderedItems)); 10428 }; 10429 const root = getCommonParent(state.renderedItems); 10430 const observer = new IntersectionObserver(ioCallback, { root }); 10431 for (const item of state.renderedItems) { 10432 if (!item.element) continue; 10433 observer.observe(item.element); 10434 } 10435 return () => { 10436 cancelAnimationFrame(raf); 10437 observer.disconnect(); 10438 }; 10439 }); 10440 }); 10441 const mergeItem = (item, setItems, canDeleteFromMap = false) => { 10442 let prevItem; 10443 setItems((items2) => { 10444 const index = items2.findIndex(({ id }) => id === item.id); 10445 const nextItems = items2.slice(); 10446 if (index !== -1) { 10447 prevItem = items2[index]; 10448 const nextItem = { ...prevItem, ...item }; 10449 nextItems[index] = nextItem; 10450 itemsMap.set(item.id, nextItem); 10451 } else { 10452 nextItems.push(item); 10453 itemsMap.set(item.id, item); 10454 } 10455 return nextItems; 10456 }); 10457 const unmergeItem = () => { 10458 setItems((items2) => { 10459 if (!prevItem) { 10460 if (canDeleteFromMap) { 10461 itemsMap.delete(item.id); 10462 } 10463 return items2.filter(({ id }) => id !== item.id); 10464 } 10465 const index = items2.findIndex(({ id }) => id === item.id); 10466 if (index === -1) return items2; 10467 const nextItems = items2.slice(); 10468 nextItems[index] = prevItem; 10469 itemsMap.set(item.id, prevItem); 10470 return nextItems; 10471 }); 10472 }; 10473 return unmergeItem; 10474 }; 10475 const registerItem = (item) => mergeItem( 10476 item, 10477 (getItems) => privateStore.setState("items", getItems), 10478 true 10479 ); 10480 return { 10481 ...collection, 10482 registerItem, 10483 renderItem: (item) => chain( 10484 registerItem(item), 10485 mergeItem( 10486 item, 10487 (getItems) => privateStore.setState("renderedItems", getItems) 10488 ) 10489 ), 10490 item: (id) => { 10491 if (!id) return null; 10492 let item = itemsMap.get(id); 10493 if (!item) { 10494 const { items: items2 } = privateStore.getState(); 10495 item = items2.find((item2) => item2.id === id); 10496 if (item) { 10497 itemsMap.set(id, item); 10498 } 10499 } 10500 return item || null; 10501 }, 10502 // @ts-expect-error Internal 10503 __unstablePrivateStore: privateStore 10504 }; 10505 } 10506 10507 // node_modules/@ariakit/react-core/esm/__chunks/GVAFFF2B.js 10508 function useCollectionStoreProps(store2, update2, props) { 10509 useUpdateEffect(update2, [props.store]); 10510 useStoreProps(store2, props, "items", "setItems"); 10511 return store2; 10512 } 10513 10514 // node_modules/@ariakit/core/esm/__chunks/RVTIKFRL.js 10515 var NULL_ITEM = { id: null }; 10516 function findFirstEnabledItem2(items, excludeId) { 10517 return items.find((item) => { 10518 if (excludeId) { 10519 return !item.disabled && item.id !== excludeId; 10520 } 10521 return !item.disabled; 10522 }); 10523 } 10524 function getEnabledItems(items, excludeId) { 10525 return items.filter((item) => { 10526 if (excludeId) { 10527 return !item.disabled && item.id !== excludeId; 10528 } 10529 return !item.disabled; 10530 }); 10531 } 10532 function getItemsInRow(items, rowId) { 10533 return items.filter((item) => item.rowId === rowId); 10534 } 10535 function flipItems(items, activeId, shouldInsertNullItem = false) { 10536 const index = items.findIndex((item) => item.id === activeId); 10537 return [ 10538 ...items.slice(index + 1), 10539 ...shouldInsertNullItem ? [NULL_ITEM] : [], 10540 ...items.slice(0, index) 10541 ]; 10542 } 10543 function groupItemsByRows2(items) { 10544 const rows = []; 10545 for (const item of items) { 10546 const row = rows.find((currentRow) => { 10547 var _a; 10548 return ((_a = currentRow[0]) == null ? void 0 : _a.rowId) === item.rowId; 10549 }); 10550 if (row) { 10551 row.push(item); 10552 } else { 10553 rows.push([item]); 10554 } 10555 } 10556 return rows; 10557 } 10558 function getMaxRowLength(array) { 10559 let maxLength = 0; 10560 for (const { length } of array) { 10561 if (length > maxLength) { 10562 maxLength = length; 10563 } 10564 } 10565 return maxLength; 10566 } 10567 function createEmptyItem(rowId) { 10568 return { 10569 id: "__EMPTY_ITEM__", 10570 disabled: true, 10571 rowId 10572 }; 10573 } 10574 function normalizeRows(rows, activeId, focusShift) { 10575 const maxLength = getMaxRowLength(rows); 10576 for (const row of rows) { 10577 for (let i2 = 0; i2 < maxLength; i2 += 1) { 10578 const item = row[i2]; 10579 if (!item || focusShift && item.disabled) { 10580 const isFirst = i2 === 0; 10581 const previousItem = isFirst && focusShift ? findFirstEnabledItem2(row) : row[i2 - 1]; 10582 row[i2] = previousItem && activeId !== previousItem.id && focusShift ? previousItem : createEmptyItem(previousItem == null ? void 0 : previousItem.rowId); 10583 } 10584 } 10585 } 10586 return rows; 10587 } 10588 function verticalizeItems(items) { 10589 const rows = groupItemsByRows2(items); 10590 const maxLength = getMaxRowLength(rows); 10591 const verticalized = []; 10592 for (let i2 = 0; i2 < maxLength; i2 += 1) { 10593 for (const row of rows) { 10594 const item = row[i2]; 10595 if (item) { 10596 verticalized.push({ 10597 ...item, 10598 // If there's no rowId, it means that it's not a grid composite, but 10599 // a single row instead. So, instead of verticalizing it, that is, 10600 // assigning a different rowId based on the column index, we keep it 10601 // undefined so they will be part of the same row. This is useful 10602 // when using up/down on one-dimensional composites. 10603 rowId: item.rowId ? `$i2}` : void 0 10604 }); 10605 } 10606 } 10607 } 10608 return verticalized; 10609 } 10610 function createCompositeStore(props = {}) { 10611 var _a; 10612 const syncState = (_a = props.store) == null ? void 0 : _a.getState(); 10613 const collection = createCollectionStore(props); 10614 const activeId = defaultValue( 10615 props.activeId, 10616 syncState == null ? void 0 : syncState.activeId, 10617 props.defaultActiveId 10618 ); 10619 const initialState = { 10620 ...collection.getState(), 10621 id: defaultValue( 10622 props.id, 10623 syncState == null ? void 0 : syncState.id, 10624 `id-$Math.random().toString(36).slice(2, 8)}` 10625 ), 10626 activeId, 10627 baseElement: defaultValue(syncState == null ? void 0 : syncState.baseElement, null), 10628 includesBaseElement: defaultValue( 10629 props.includesBaseElement, 10630 syncState == null ? void 0 : syncState.includesBaseElement, 10631 activeId === null 10632 ), 10633 moves: defaultValue(syncState == null ? void 0 : syncState.moves, 0), 10634 orientation: defaultValue( 10635 props.orientation, 10636 syncState == null ? void 0 : syncState.orientation, 10637 "both" 10638 ), 10639 rtl: defaultValue(props.rtl, syncState == null ? void 0 : syncState.rtl, false), 10640 virtualFocus: defaultValue( 10641 props.virtualFocus, 10642 syncState == null ? void 0 : syncState.virtualFocus, 10643 false 10644 ), 10645 focusLoop: defaultValue(props.focusLoop, syncState == null ? void 0 : syncState.focusLoop, false), 10646 focusWrap: defaultValue(props.focusWrap, syncState == null ? void 0 : syncState.focusWrap, false), 10647 focusShift: defaultValue(props.focusShift, syncState == null ? void 0 : syncState.focusShift, false) 10648 }; 10649 const composite = createStore(initialState, collection, props.store); 10650 setup( 10651 composite, 10652 () => sync(composite, ["renderedItems", "activeId"], (state) => { 10653 composite.setState("activeId", (activeId2) => { 10654 var _a2; 10655 if (activeId2 !== void 0) return activeId2; 10656 return (_a2 = findFirstEnabledItem2(state.renderedItems)) == null ? void 0 : _a2.id; 10657 }); 10658 }) 10659 ); 10660 const getNextId = (direction = "next", options = {}) => { 10661 var _a2, _b; 10662 const defaultState = composite.getState(); 10663 const { 10664 skip = 0, 10665 activeId: activeId2 = defaultState.activeId, 10666 focusShift = defaultState.focusShift, 10667 focusLoop = defaultState.focusLoop, 10668 focusWrap = defaultState.focusWrap, 10669 includesBaseElement = defaultState.includesBaseElement, 10670 renderedItems = defaultState.renderedItems, 10671 rtl = defaultState.rtl 10672 } = options; 10673 const isVerticalDirection = direction === "up" || direction === "down"; 10674 const isNextDirection = direction === "next" || direction === "down"; 10675 const canReverse = isNextDirection ? rtl && !isVerticalDirection : !rtl || isVerticalDirection; 10676 const canShift = focusShift && !skip; 10677 let items = !isVerticalDirection ? renderedItems : flatten2DArray( 10678 normalizeRows(groupItemsByRows2(renderedItems), activeId2, canShift) 10679 ); 10680 items = canReverse ? reverseArray(items) : items; 10681 items = isVerticalDirection ? verticalizeItems(items) : items; 10682 if (activeId2 == null) { 10683 return (_a2 = findFirstEnabledItem2(items)) == null ? void 0 : _a2.id; 10684 } 10685 const activeItem = items.find((item) => item.id === activeId2); 10686 if (!activeItem) { 10687 return (_b = findFirstEnabledItem2(items)) == null ? void 0 : _b.id; 10688 } 10689 const isGrid2 = items.some((item) => item.rowId); 10690 const activeIndex = items.indexOf(activeItem); 10691 const nextItems = items.slice(activeIndex + 1); 10692 const nextItemsInRow = getItemsInRow(nextItems, activeItem.rowId); 10693 if (skip) { 10694 const nextEnabledItemsInRow = getEnabledItems(nextItemsInRow, activeId2); 10695 const nextItem2 = nextEnabledItemsInRow.slice(skip)[0] || // If we can't find an item, just return the last one. 10696 nextEnabledItemsInRow[nextEnabledItemsInRow.length - 1]; 10697 return nextItem2 == null ? void 0 : nextItem2.id; 10698 } 10699 const canLoop = focusLoop && (isVerticalDirection ? focusLoop !== "horizontal" : focusLoop !== "vertical"); 10700 const canWrap = isGrid2 && focusWrap && (isVerticalDirection ? focusWrap !== "horizontal" : focusWrap !== "vertical"); 10701 const hasNullItem = isNextDirection ? (!isGrid2 || isVerticalDirection) && canLoop && includesBaseElement : isVerticalDirection ? includesBaseElement : false; 10702 if (canLoop) { 10703 const loopItems = canWrap && !hasNullItem ? items : getItemsInRow(items, activeItem.rowId); 10704 const sortedItems = flipItems(loopItems, activeId2, hasNullItem); 10705 const nextItem2 = findFirstEnabledItem2(sortedItems, activeId2); 10706 return nextItem2 == null ? void 0 : nextItem2.id; 10707 } 10708 if (canWrap) { 10709 const nextItem2 = findFirstEnabledItem2( 10710 // We can use nextItems, which contains all the next items, including 10711 // items from other rows, to wrap between rows. However, if there is a 10712 // null item (the composite container), we'll only use the next items in 10713 // the row. So moving next from the last item will focus on the 10714 // composite container. On grid composites, horizontal navigation never 10715 // focuses on the composite container, only vertical. 10716 hasNullItem ? nextItemsInRow : nextItems, 10717 activeId2 10718 ); 10719 const nextId = hasNullItem ? (nextItem2 == null ? void 0 : nextItem2.id) || null : nextItem2 == null ? void 0 : nextItem2.id; 10720 return nextId; 10721 } 10722 const nextItem = findFirstEnabledItem2(nextItemsInRow, activeId2); 10723 if (!nextItem && hasNullItem) { 10724 return null; 10725 } 10726 return nextItem == null ? void 0 : nextItem.id; 10727 }; 10728 return { 10729 ...collection, 10730 ...composite, 10731 setBaseElement: (element) => composite.setState("baseElement", element), 10732 setActiveId: (id) => composite.setState("activeId", id), 10733 move: (id) => { 10734 if (id === void 0) return; 10735 composite.setState("activeId", id); 10736 composite.setState("moves", (moves) => moves + 1); 10737 }, 10738 first: () => { 10739 var _a2; 10740 return (_a2 = findFirstEnabledItem2(composite.getState().renderedItems)) == null ? void 0 : _a2.id; 10741 }, 10742 last: () => { 10743 var _a2; 10744 return (_a2 = findFirstEnabledItem2(reverseArray(composite.getState().renderedItems))) == null ? void 0 : _a2.id; 10745 }, 10746 next: (options) => { 10747 if (options !== void 0 && typeof options === "number") { 10748 options = { skip: options }; 10749 } 10750 return getNextId("next", options); 10751 }, 10752 previous: (options) => { 10753 if (options !== void 0 && typeof options === "number") { 10754 options = { skip: options }; 10755 } 10756 return getNextId("previous", options); 10757 }, 10758 down: (options) => { 10759 if (options !== void 0 && typeof options === "number") { 10760 options = { skip: options }; 10761 } 10762 return getNextId("down", options); 10763 }, 10764 up: (options) => { 10765 if (options !== void 0 && typeof options === "number") { 10766 options = { skip: options }; 10767 } 10768 return getNextId("up", options); 10769 } 10770 }; 10771 } 10772 10773 // node_modules/@ariakit/react-core/esm/__chunks/IQYAUKXT.js 10774 function useCompositeStoreOptions(props) { 10775 const id = useId5(props.id); 10776 return { id, ...props }; 10777 } 10778 function useCompositeStoreProps(store2, update2, props) { 10779 store2 = useCollectionStoreProps(store2, update2, props); 10780 useStoreProps(store2, props, "activeId", "setActiveId"); 10781 useStoreProps(store2, props, "includesBaseElement"); 10782 useStoreProps(store2, props, "virtualFocus"); 10783 useStoreProps(store2, props, "orientation"); 10784 useStoreProps(store2, props, "rtl"); 10785 useStoreProps(store2, props, "focusLoop"); 10786 useStoreProps(store2, props, "focusWrap"); 10787 useStoreProps(store2, props, "focusShift"); 10788 return store2; 10789 } 10790 10791 // node_modules/@ariakit/react-core/esm/__chunks/CVCFNOHX.js 10792 var import_react21 = __toESM(require_react(), 1); 10793 var ComboboxListRoleContext = (0, import_react21.createContext)( 10794 void 0 10795 ); 10796 var ctx6 = createStoreContext( 10797 [PopoverContextProvider, CompositeContextProvider], 10798 [PopoverScopedContextProvider, CompositeScopedContextProvider] 10799 ); 10800 var useComboboxContext = ctx6.useContext; 10801 var useComboboxScopedContext = ctx6.useScopedContext; 10802 var useComboboxProviderContext = ctx6.useProviderContext; 10803 var ComboboxContextProvider = ctx6.ContextProvider; 10804 var ComboboxScopedContextProvider = ctx6.ScopedContextProvider; 10805 var ComboboxItemValueContext = (0, import_react21.createContext)( 10806 void 0 10807 ); 10808 var ComboboxItemCheckedContext = (0, import_react21.createContext)(false); 10809 10810 // node_modules/@ariakit/core/esm/__chunks/KMAUV3TY.js 10811 function createDialogStore(props = {}) { 10812 return createDisclosureStore(props); 10813 } 10814 10815 // node_modules/@ariakit/react-core/esm/__chunks/4NYSH4UO.js 10816 function useDialogStoreProps(store2, update2, props) { 10817 return useDisclosureStoreProps(store2, update2, props); 10818 } 10819 10820 // node_modules/@ariakit/core/esm/__chunks/BFGNM53A.js 10821 function createPopoverStore({ 10822 popover: otherPopover, 10823 ...props 10824 } = {}) { 10825 const store2 = mergeStore( 10826 props.store, 10827 omit2(otherPopover, [ 10828 "arrowElement", 10829 "anchorElement", 10830 "contentElement", 10831 "popoverElement", 10832 "disclosureElement" 10833 ]) 10834 ); 10835 throwOnConflictingProps(props, store2); 10836 const syncState = store2 == null ? void 0 : store2.getState(); 10837 const dialog = createDialogStore({ ...props, store: store2 }); 10838 const placement = defaultValue( 10839 props.placement, 10840 syncState == null ? void 0 : syncState.placement, 10841 "bottom" 10842 ); 10843 const initialState = { 10844 ...dialog.getState(), 10845 placement, 10846 currentPlacement: placement, 10847 anchorElement: defaultValue(syncState == null ? void 0 : syncState.anchorElement, null), 10848 popoverElement: defaultValue(syncState == null ? void 0 : syncState.popoverElement, null), 10849 arrowElement: defaultValue(syncState == null ? void 0 : syncState.arrowElement, null), 10850 rendered: /* @__PURE__ */ Symbol("rendered") 10851 }; 10852 const popover = createStore(initialState, dialog, store2); 10853 return { 10854 ...dialog, 10855 ...popover, 10856 setAnchorElement: (element) => popover.setState("anchorElement", element), 10857 setPopoverElement: (element) => popover.setState("popoverElement", element), 10858 setArrowElement: (element) => popover.setState("arrowElement", element), 10859 render: () => popover.setState("rendered", /* @__PURE__ */ Symbol("rendered")) 10860 }; 10861 } 10862 10863 // node_modules/@ariakit/react-core/esm/__chunks/B6FLPFJM.js 10864 function usePopoverStoreProps(store2, update2, props) { 10865 useUpdateEffect(update2, [props.popover]); 10866 useStoreProps(store2, props, "placement"); 10867 return useDialogStoreProps(store2, update2, props); 10868 } 10869 10870 // node_modules/@ariakit/react-core/esm/__chunks/4POTBZ2J.js 10871 var TagName7 = "div"; 10872 var usePopoverAnchor = createHook( 10873 function usePopoverAnchor2({ store: store2, ...props }) { 10874 const context = usePopoverProviderContext(); 10875 store2 = store2 || context; 10876 props = { 10877 ...props, 10878 ref: useMergeRefs(store2 == null ? void 0 : store2.setAnchorElement, props.ref) 10879 }; 10880 return props; 10881 } 10882 ); 10883 var PopoverAnchor = forwardRef25(function PopoverAnchor2(props) { 10884 const htmlProps = usePopoverAnchor(props); 10885 return createElement3(TagName7, htmlProps); 10886 }); 10887 10888 // node_modules/@ariakit/react-core/esm/__chunks/X6LNAU2F.js 10889 var import_react22 = __toESM(require_react(), 1); 10890 var TagName8 = "div"; 10891 function getMouseDestination(event) { 10892 const relatedTarget = event.relatedTarget; 10893 if ((relatedTarget == null ? void 0 : relatedTarget.nodeType) === Node.ELEMENT_NODE) { 10894 return relatedTarget; 10895 } 10896 return null; 10897 } 10898 function hoveringInside(event) { 10899 const nextElement = getMouseDestination(event); 10900 if (!nextElement) return false; 10901 return contains(event.currentTarget, nextElement); 10902 } 10903 var symbol2 = /* @__PURE__ */ Symbol("composite-hover"); 10904 function movingToAnotherItem(event) { 10905 let dest = getMouseDestination(event); 10906 if (!dest) return false; 10907 do { 10908 if (hasOwnProperty(dest, symbol2) && dest[symbol2]) return true; 10909 dest = dest.parentElement; 10910 } while (dest); 10911 return false; 10912 } 10913 var useCompositeHover = createHook( 10914 function useCompositeHover2({ 10915 store: store2, 10916 focusOnHover = true, 10917 blurOnHoverEnd = !!focusOnHover, 10918 ...props 10919 }) { 10920 const context = useCompositeContext(); 10921 store2 = store2 || context; 10922 invariant( 10923 store2, 10924 "CompositeHover must be wrapped in a Composite component." 10925 ); 10926 const isMouseMoving = useIsMouseMoving(); 10927 const onMouseMoveProp = props.onMouseMove; 10928 const focusOnHoverProp = useBooleanEvent(focusOnHover); 10929 const onMouseMove = useEvent((event) => { 10930 onMouseMoveProp == null ? void 0 : onMouseMoveProp(event); 10931 if (event.defaultPrevented) return; 10932 if (!isMouseMoving()) return; 10933 if (!focusOnHoverProp(event)) return; 10934 if (!hasFocusWithin(event.currentTarget)) { 10935 const baseElement = store2 == null ? void 0 : store2.getState().baseElement; 10936 if (baseElement && !hasFocus(baseElement)) { 10937 baseElement.focus(); 10938 } 10939 } 10940 store2 == null ? void 0 : store2.setActiveId(event.currentTarget.id); 10941 }); 10942 const onMouseLeaveProp = props.onMouseLeave; 10943 const blurOnHoverEndProp = useBooleanEvent(blurOnHoverEnd); 10944 const onMouseLeave = useEvent((event) => { 10945 var _a; 10946 onMouseLeaveProp == null ? void 0 : onMouseLeaveProp(event); 10947 if (event.defaultPrevented) return; 10948 if (!isMouseMoving()) return; 10949 if (hoveringInside(event)) return; 10950 if (movingToAnotherItem(event)) return; 10951 if (!focusOnHoverProp(event)) return; 10952 if (!blurOnHoverEndProp(event)) return; 10953 store2 == null ? void 0 : store2.setActiveId(null); 10954 (_a = store2 == null ? void 0 : store2.getState().baseElement) == null ? void 0 : _a.focus(); 10955 }); 10956 const ref = (0, import_react22.useCallback)((element) => { 10957 if (!element) return; 10958 element[symbol2] = true; 10959 }, []); 10960 props = { 10961 ...props, 10962 ref: useMergeRefs(ref, props.ref), 10963 onMouseMove, 10964 onMouseLeave 10965 }; 10966 return removeUndefinedValues(props); 10967 } 10968 ); 10969 var CompositeHover = memo22( 10970 forwardRef25(function CompositeHover2(props) { 10971 const htmlProps = useCompositeHover(props); 10972 return createElement3(TagName8, htmlProps); 10973 }) 10974 ); 10975 10976 // node_modules/@ariakit/react-core/esm/combobox/combobox.js 10977 var import_react23 = __toESM(require_react(), 1); 10978 var TagName9 = "input"; 10979 function isFirstItemAutoSelected(items, activeValue, autoSelect) { 10980 if (!autoSelect) return false; 10981 const firstItem = items.find((item) => !item.disabled && item.value); 10982 return (firstItem == null ? void 0 : firstItem.value) === activeValue; 10983 } 10984 function hasCompletionString(value, activeValue) { 10985 if (!activeValue) return false; 10986 if (value == null) return false; 10987 value = normalizeString(value); 10988 return activeValue.length > value.length && activeValue.toLowerCase().indexOf(value.toLowerCase()) === 0; 10989 } 10990 function isInputEvent(event) { 10991 return event.type === "input"; 10992 } 10993 function isAriaAutoCompleteValue(value) { 10994 return value === "inline" || value === "list" || value === "both" || value === "none"; 10995 } 10996 function getDefaultAutoSelectId(items) { 10997 const item = items.find((item2) => { 10998 var _a; 10999 if (item2.disabled) return false; 11000 return ((_a = item2.element) == null ? void 0 : _a.getAttribute("role")) !== "tab"; 11001 }); 11002 return item == null ? void 0 : item.id; 11003 } 11004 var useCombobox = createHook( 11005 function useCombobox2({ 11006 store: store2, 11007 focusable = true, 11008 autoSelect: autoSelectProp = false, 11009 getAutoSelectId, 11010 setValueOnChange, 11011 showMinLength = 0, 11012 showOnChange, 11013 showOnMouseDown, 11014 showOnClick = showOnMouseDown, 11015 showOnKeyDown, 11016 showOnKeyPress = showOnKeyDown, 11017 blurActiveItemOnClick, 11018 setValueOnClick = true, 11019 moveOnKeyPress = true, 11020 autoComplete = "list", 11021 ...props 11022 }) { 11023 const context = useComboboxProviderContext(); 11024 store2 = store2 || context; 11025 invariant( 11026 store2, 11027 "Combobox must receive a `store` prop or be wrapped in a ComboboxProvider component." 11028 ); 11029 const ref = (0, import_react23.useRef)(null); 11030 const [valueUpdated, forceValueUpdate] = useForceUpdate(); 11031 const canAutoSelectRef = (0, import_react23.useRef)(false); 11032 const composingRef = (0, import_react23.useRef)(false); 11033 const autoSelect = store2.useState( 11034 (state) => state.virtualFocus && autoSelectProp 11035 ); 11036 const inline = autoComplete === "inline" || autoComplete === "both"; 11037 const [canInline, setCanInline] = (0, import_react23.useState)(inline); 11038 useUpdateLayoutEffect(() => { 11039 if (!inline) return; 11040 setCanInline(true); 11041 }, [inline]); 11042 const storeValue = store2.useState("value"); 11043 const prevSelectedValueRef = (0, import_react23.useRef)(void 0); 11044 (0, import_react23.useEffect)(() => { 11045 return sync(store2, ["selectedValue", "activeId"], (_, prev) => { 11046 prevSelectedValueRef.current = prev.selectedValue; 11047 }); 11048 }, []); 11049 const inlineActiveValue = store2.useState((state) => { 11050 var _a; 11051 if (!inline) return; 11052 if (!canInline) return; 11053 if (state.activeValue && Array.isArray(state.selectedValue)) { 11054 if (state.selectedValue.includes(state.activeValue)) return; 11055 if ((_a = prevSelectedValueRef.current) == null ? void 0 : _a.includes(state.activeValue)) return; 11056 } 11057 return state.activeValue; 11058 }); 11059 const items = store2.useState("renderedItems"); 11060 const open = store2.useState("open"); 11061 const contentElement = store2.useState("contentElement"); 11062 const value = (0, import_react23.useMemo)(() => { 11063 if (!inline) return storeValue; 11064 if (!canInline) return storeValue; 11065 const firstItemAutoSelected = isFirstItemAutoSelected( 11066 items, 11067 inlineActiveValue, 11068 autoSelect 11069 ); 11070 if (firstItemAutoSelected) { 11071 if (hasCompletionString(storeValue, inlineActiveValue)) { 11072 const slice = (inlineActiveValue == null ? void 0 : inlineActiveValue.slice(storeValue.length)) || ""; 11073 return storeValue + slice; 11074 } 11075 return storeValue; 11076 } 11077 return inlineActiveValue || storeValue; 11078 }, [inline, canInline, items, inlineActiveValue, autoSelect, storeValue]); 11079 (0, import_react23.useEffect)(() => { 11080 const element = ref.current; 11081 if (!element) return; 11082 const onCompositeItemMove = () => setCanInline(true); 11083 element.addEventListener("combobox-item-move", onCompositeItemMove); 11084 return () => { 11085 element.removeEventListener("combobox-item-move", onCompositeItemMove); 11086 }; 11087 }, []); 11088 (0, import_react23.useEffect)(() => { 11089 if (!inline) return; 11090 if (!canInline) return; 11091 if (!inlineActiveValue) return; 11092 const firstItemAutoSelected = isFirstItemAutoSelected( 11093 items, 11094 inlineActiveValue, 11095 autoSelect 11096 ); 11097 if (!firstItemAutoSelected) return; 11098 if (!hasCompletionString(storeValue, inlineActiveValue)) return; 11099 let cleanup = noop2; 11100 queueMicrotask(() => { 11101 const element = ref.current; 11102 if (!element) return; 11103 const { start: prevStart, end: prevEnd } = getTextboxSelection(element); 11104 const nextStart = storeValue.length; 11105 const nextEnd = inlineActiveValue.length; 11106 setSelectionRange(element, nextStart, nextEnd); 11107 cleanup = () => { 11108 if (!hasFocus(element)) return; 11109 const { start, end } = getTextboxSelection(element); 11110 if (start !== nextStart) return; 11111 if (end !== nextEnd) return; 11112 setSelectionRange(element, prevStart, prevEnd); 11113 }; 11114 }); 11115 return () => cleanup(); 11116 }, [ 11117 valueUpdated, 11118 inline, 11119 canInline, 11120 inlineActiveValue, 11121 items, 11122 autoSelect, 11123 storeValue 11124 ]); 11125 const scrollingElementRef = (0, import_react23.useRef)(null); 11126 const getAutoSelectIdProp = useEvent(getAutoSelectId); 11127 const autoSelectIdRef = (0, import_react23.useRef)(null); 11128 (0, import_react23.useEffect)(() => { 11129 if (!open) return; 11130 if (!contentElement) return; 11131 const scrollingElement = getScrollingElement(contentElement); 11132 if (!scrollingElement) return; 11133 scrollingElementRef.current = scrollingElement; 11134 const onUserScroll = () => { 11135 canAutoSelectRef.current = false; 11136 }; 11137 const onScroll = () => { 11138 if (!store2) return; 11139 if (!canAutoSelectRef.current) return; 11140 const { activeId } = store2.getState(); 11141 if (activeId === null) return; 11142 if (activeId === autoSelectIdRef.current) return; 11143 canAutoSelectRef.current = false; 11144 }; 11145 const options = { passive: true, capture: true }; 11146 scrollingElement.addEventListener("wheel", onUserScroll, options); 11147 scrollingElement.addEventListener("touchmove", onUserScroll, options); 11148 scrollingElement.addEventListener("scroll", onScroll, options); 11149 return () => { 11150 scrollingElement.removeEventListener("wheel", onUserScroll, true); 11151 scrollingElement.removeEventListener("touchmove", onUserScroll, true); 11152 scrollingElement.removeEventListener("scroll", onScroll, true); 11153 }; 11154 }, [open, contentElement, store2]); 11155 useSafeLayoutEffect(() => { 11156 if (!storeValue) return; 11157 if (composingRef.current) return; 11158 canAutoSelectRef.current = true; 11159 }, [storeValue]); 11160 useSafeLayoutEffect(() => { 11161 if (autoSelect !== "always" && open) return; 11162 canAutoSelectRef.current = open; 11163 }, [autoSelect, open]); 11164 const resetValueOnSelect = store2.useState("resetValueOnSelect"); 11165 useUpdateEffect(() => { 11166 var _a, _b; 11167 const canAutoSelect = canAutoSelectRef.current; 11168 if (!store2) return; 11169 if (!open) return; 11170 if (!canAutoSelect && !resetValueOnSelect) return; 11171 const { baseElement, contentElement: contentElement2, activeId } = store2.getState(); 11172 if (baseElement && !hasFocus(baseElement)) return; 11173 if (contentElement2 == null ? void 0 : contentElement2.hasAttribute("data-placing")) { 11174 const observer = new MutationObserver(forceValueUpdate); 11175 observer.observe(contentElement2, { attributeFilter: ["data-placing"] }); 11176 return () => observer.disconnect(); 11177 } 11178 if (autoSelect && canAutoSelect) { 11179 const userAutoSelectId = getAutoSelectIdProp(items); 11180 const autoSelectId = userAutoSelectId !== void 0 ? userAutoSelectId : (_a = getDefaultAutoSelectId(items)) != null ? _a : store2.first(); 11181 autoSelectIdRef.current = autoSelectId; 11182 store2.move(autoSelectId != null ? autoSelectId : null); 11183 } else { 11184 const element = (_b = store2.item(activeId || store2.first())) == null ? void 0 : _b.element; 11185 if (element && "scrollIntoView" in element) { 11186 element.scrollIntoView({ block: "nearest", inline: "nearest" }); 11187 } 11188 } 11189 return; 11190 }, [ 11191 store2, 11192 open, 11193 valueUpdated, 11194 storeValue, 11195 autoSelect, 11196 resetValueOnSelect, 11197 getAutoSelectIdProp, 11198 items 11199 ]); 11200 (0, import_react23.useEffect)(() => { 11201 if (!inline) return; 11202 const combobox = ref.current; 11203 if (!combobox) return; 11204 const elements = [combobox, contentElement].filter( 11205 (value2) => !!value2 11206 ); 11207 const onBlur2 = (event) => { 11208 if (elements.every((el) => isFocusEventOutside(event, el))) { 11209 store2 == null ? void 0 : store2.setValue(value); 11210 } 11211 }; 11212 for (const element of elements) { 11213 element.addEventListener("focusout", onBlur2); 11214 } 11215 return () => { 11216 for (const element of elements) { 11217 element.removeEventListener("focusout", onBlur2); 11218 } 11219 }; 11220 }, [inline, contentElement, store2, value]); 11221 const canShow = (event) => { 11222 const currentTarget = event.currentTarget; 11223 return currentTarget.value.length >= showMinLength; 11224 }; 11225 const onChangeProp = props.onChange; 11226 const showOnChangeProp = useBooleanEvent(showOnChange != null ? showOnChange : canShow); 11227 const setValueOnChangeProp = useBooleanEvent( 11228 // If the combobox is combined with tags, the value will be set by the tag 11229 // input component. 11230 setValueOnChange != null ? setValueOnChange : !store2.tag 11231 ); 11232 const onChange = useEvent((event) => { 11233 onChangeProp == null ? void 0 : onChangeProp(event); 11234 if (event.defaultPrevented) return; 11235 if (!store2) return; 11236 const currentTarget = event.currentTarget; 11237 const { value: value2, selectionStart, selectionEnd } = currentTarget; 11238 const nativeEvent = event.nativeEvent; 11239 canAutoSelectRef.current = true; 11240 if (isInputEvent(nativeEvent)) { 11241 if (nativeEvent.isComposing) { 11242 canAutoSelectRef.current = false; 11243 composingRef.current = true; 11244 } 11245 if (inline) { 11246 const textInserted = nativeEvent.inputType === "insertText" || nativeEvent.inputType === "insertCompositionText"; 11247 const caretAtEnd = selectionStart === value2.length; 11248 setCanInline(textInserted && caretAtEnd); 11249 } 11250 } 11251 if (setValueOnChangeProp(event)) { 11252 const isSameValue = value2 === store2.getState().value; 11253 store2.setValue(value2); 11254 queueMicrotask(() => { 11255 setSelectionRange(currentTarget, selectionStart, selectionEnd); 11256 }); 11257 if (inline && autoSelect && isSameValue) { 11258 forceValueUpdate(); 11259 } 11260 } 11261 if (showOnChangeProp(event)) { 11262 store2.show(); 11263 } 11264 if (!autoSelect || !canAutoSelectRef.current) { 11265 store2.setActiveId(null); 11266 } 11267 }); 11268 const onCompositionEndProp = props.onCompositionEnd; 11269 const onCompositionEnd = useEvent((event) => { 11270 canAutoSelectRef.current = true; 11271 composingRef.current = false; 11272 onCompositionEndProp == null ? void 0 : onCompositionEndProp(event); 11273 if (event.defaultPrevented) return; 11274 if (!autoSelect) return; 11275 forceValueUpdate(); 11276 }); 11277 const onMouseDownProp = props.onMouseDown; 11278 const blurActiveItemOnClickProp = useBooleanEvent( 11279 blurActiveItemOnClick != null ? blurActiveItemOnClick : (() => !!(store2 == null ? void 0 : store2.getState().includesBaseElement)) 11280 ); 11281 const setValueOnClickProp = useBooleanEvent(setValueOnClick); 11282 const showOnClickProp = useBooleanEvent(showOnClick != null ? showOnClick : canShow); 11283 const onMouseDown = useEvent((event) => { 11284 onMouseDownProp == null ? void 0 : onMouseDownProp(event); 11285 if (event.defaultPrevented) return; 11286 if (event.button) return; 11287 if (event.ctrlKey) return; 11288 if (!store2) return; 11289 if (blurActiveItemOnClickProp(event)) { 11290 store2.setActiveId(null); 11291 } 11292 if (setValueOnClickProp(event)) { 11293 store2.setValue(value); 11294 } 11295 if (showOnClickProp(event)) { 11296 queueBeforeEvent(event.currentTarget, "mouseup", store2.show); 11297 } 11298 }); 11299 const onKeyDownProp = props.onKeyDown; 11300 const showOnKeyPressProp = useBooleanEvent(showOnKeyPress != null ? showOnKeyPress : canShow); 11301 const onKeyDown = useEvent((event) => { 11302 onKeyDownProp == null ? void 0 : onKeyDownProp(event); 11303 if (!event.repeat) { 11304 canAutoSelectRef.current = false; 11305 } 11306 if (event.defaultPrevented) return; 11307 if (event.ctrlKey) return; 11308 if (event.altKey) return; 11309 if (event.shiftKey) return; 11310 if (event.metaKey) return; 11311 if (!store2) return; 11312 const { open: open2 } = store2.getState(); 11313 if (open2) return; 11314 if (event.key === "ArrowUp" || event.key === "ArrowDown") { 11315 if (showOnKeyPressProp(event)) { 11316 event.preventDefault(); 11317 store2.show(); 11318 } 11319 } 11320 }); 11321 const onBlurProp = props.onBlur; 11322 const onBlur = useEvent((event) => { 11323 canAutoSelectRef.current = false; 11324 onBlurProp == null ? void 0 : onBlurProp(event); 11325 if (event.defaultPrevented) return; 11326 }); 11327 const id = useId5(props.id); 11328 const ariaAutoComplete = isAriaAutoCompleteValue(autoComplete) ? autoComplete : void 0; 11329 const isActiveItem = store2.useState((state) => state.activeId === null); 11330 props = { 11331 id, 11332 role: "combobox", 11333 "aria-autocomplete": ariaAutoComplete, 11334 "aria-haspopup": getPopupRole(contentElement, "listbox"), 11335 "aria-expanded": open, 11336 "aria-controls": contentElement == null ? void 0 : contentElement.id, 11337 "data-active-item": isActiveItem || void 0, 11338 value, 11339 ...props, 11340 ref: useMergeRefs(ref, props.ref), 11341 onChange, 11342 onCompositionEnd, 11343 onMouseDown, 11344 onKeyDown, 11345 onBlur 11346 }; 11347 props = useComposite({ 11348 store: store2, 11349 focusable, 11350 ...props, 11351 // Enable inline autocomplete when the user moves from the combobox input 11352 // to an item. 11353 moveOnKeyPress: (event) => { 11354 if (isFalsyBooleanCallback(moveOnKeyPress, event)) return false; 11355 if (inline) setCanInline(true); 11356 return true; 11357 } 11358 }); 11359 props = usePopoverAnchor({ store: store2, ...props }); 11360 return { autoComplete: "off", ...props }; 11361 } 11362 ); 11363 var Combobox = forwardRef25(function Combobox2(props) { 11364 const htmlProps = useCombobox(props); 11365 return createElement3(TagName9, htmlProps); 11366 }); 11367 11368 // node_modules/@ariakit/react-core/esm/__chunks/IBXZ2LQC.js 11369 var import_react24 = __toESM(require_react(), 1); 11370 var import_jsx_runtime70 = __toESM(require_jsx_runtime(), 1); 11371 var TagName10 = "div"; 11372 function isSelected(storeValue, itemValue) { 11373 if (itemValue == null) return; 11374 if (storeValue == null) return false; 11375 if (Array.isArray(storeValue)) { 11376 return storeValue.includes(itemValue); 11377 } 11378 return storeValue === itemValue; 11379 } 11380 function getItemRole(popupRole) { 11381 var _a; 11382 const itemRoleByPopupRole = { 11383 menu: "menuitem", 11384 listbox: "option", 11385 tree: "treeitem" 11386 }; 11387 const key = popupRole; 11388 return (_a = itemRoleByPopupRole[key]) != null ? _a : "option"; 11389 } 11390 var useComboboxItem = createHook( 11391 function useComboboxItem2({ 11392 store: store2, 11393 value, 11394 hideOnClick, 11395 setValueOnClick, 11396 selectValueOnClick = true, 11397 resetValueOnSelect, 11398 focusOnHover = false, 11399 moveOnKeyPress = true, 11400 getItem: getItemProp, 11401 ...props 11402 }) { 11403 var _a; 11404 const context = useComboboxScopedContext(); 11405 store2 = store2 || context; 11406 invariant( 11407 store2, 11408 "ComboboxItem must be wrapped in a ComboboxList or ComboboxPopover component." 11409 ); 11410 const { resetValueOnSelectState, multiSelectable, selected } = useStoreStateObject(store2, { 11411 resetValueOnSelectState: "resetValueOnSelect", 11412 multiSelectable(state) { 11413 return Array.isArray(state.selectedValue); 11414 }, 11415 selected(state) { 11416 return isSelected(state.selectedValue, value); 11417 } 11418 }); 11419 const getItem = (0, import_react24.useCallback)( 11420 (item) => { 11421 const nextItem = { ...item, value }; 11422 if (getItemProp) { 11423 return getItemProp(nextItem); 11424 } 11425 return nextItem; 11426 }, 11427 [value, getItemProp] 11428 ); 11429 setValueOnClick = setValueOnClick != null ? setValueOnClick : !multiSelectable; 11430 hideOnClick = hideOnClick != null ? hideOnClick : value != null && !multiSelectable; 11431 const onClickProp = props.onClick; 11432 const setValueOnClickProp = useBooleanEvent(setValueOnClick); 11433 const selectValueOnClickProp = useBooleanEvent(selectValueOnClick); 11434 const resetValueOnSelectProp = useBooleanEvent( 11435 (_a = resetValueOnSelect != null ? resetValueOnSelect : resetValueOnSelectState) != null ? _a : multiSelectable 11436 ); 11437 const hideOnClickProp = useBooleanEvent(hideOnClick); 11438 const onClick = useEvent((event) => { 11439 onClickProp == null ? void 0 : onClickProp(event); 11440 if (event.defaultPrevented) return; 11441 if (isDownloading(event)) return; 11442 if (isOpeningInNewTab(event)) return; 11443 if (value != null) { 11444 if (selectValueOnClickProp(event)) { 11445 if (resetValueOnSelectProp(event)) { 11446 store2 == null ? void 0 : store2.resetValue(); 11447 } 11448 store2 == null ? void 0 : store2.setSelectedValue((prevValue) => { 11449 if (!Array.isArray(prevValue)) return value; 11450 if (prevValue.includes(value)) { 11451 return prevValue.filter((v2) => v2 !== value); 11452 } 11453 return [...prevValue, value]; 11454 }); 11455 } 11456 if (setValueOnClickProp(event)) { 11457 store2 == null ? void 0 : store2.setValue(value); 11458 } 11459 } 11460 if (hideOnClickProp(event)) { 11461 store2 == null ? void 0 : store2.hide(); 11462 } 11463 }); 11464 const onKeyDownProp = props.onKeyDown; 11465 const onKeyDown = useEvent((event) => { 11466 onKeyDownProp == null ? void 0 : onKeyDownProp(event); 11467 if (event.defaultPrevented) return; 11468 const baseElement = store2 == null ? void 0 : store2.getState().baseElement; 11469 if (!baseElement) return; 11470 if (hasFocus(baseElement)) return; 11471 const printable = event.key.length === 1; 11472 if (printable || event.key === "Backspace" || event.key === "Delete") { 11473 queueMicrotask(() => baseElement.focus()); 11474 if (isTextField(baseElement)) { 11475 store2 == null ? void 0 : store2.setValue(baseElement.value); 11476 } 11477 } 11478 }); 11479 if (multiSelectable && selected != null) { 11480 props = { 11481 "aria-selected": selected, 11482 ...props 11483 }; 11484 } 11485 props = useWrapElement( 11486 props, 11487 (element) => /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(ComboboxItemValueContext.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(ComboboxItemCheckedContext.Provider, { value: selected != null ? selected : false, children: element }) }), 11488 [value, selected] 11489 ); 11490 const popupRole = (0, import_react24.useContext)(ComboboxListRoleContext); 11491 props = { 11492 role: getItemRole(popupRole), 11493 children: value, 11494 ...props, 11495 onClick, 11496 onKeyDown 11497 }; 11498 const moveOnKeyPressProp = useBooleanEvent(moveOnKeyPress); 11499 props = useCompositeItem({ 11500 store: store2, 11501 ...props, 11502 getItem, 11503 // Dispatch a custom event on the combobox input when moving to an item 11504 // with the keyboard so the Combobox component can enable inline 11505 // autocompletion. 11506 moveOnKeyPress: (event) => { 11507 if (!moveOnKeyPressProp(event)) return false; 11508 const moveEvent = new Event("combobox-item-move"); 11509 const baseElement = store2 == null ? void 0 : store2.getState().baseElement; 11510 baseElement == null ? void 0 : baseElement.dispatchEvent(moveEvent); 11511 return true; 11512 } 11513 }); 11514 props = useCompositeHover({ store: store2, focusOnHover, ...props }); 11515 return props; 11516 } 11517 ); 11518 var ComboboxItem = memo22( 11519 forwardRef25(function ComboboxItem2(props) { 11520 const htmlProps = useComboboxItem(props); 11521 return createElement3(TagName10, htmlProps); 11522 }) 11523 ); 11524 11525 // node_modules/@ariakit/react-core/esm/combobox/combobox-item-value.js 11526 var import_react25 = __toESM(require_react(), 1); 11527 var import_jsx_runtime71 = __toESM(require_jsx_runtime(), 1); 11528 var TagName11 = "span"; 11529 function normalizeValue(value) { 11530 return normalizeString(value).toLowerCase(); 11531 } 11532 function getOffsets(string, values) { 11533 const offsets = []; 11534 for (const value of values) { 11535 let pos = 0; 11536 const length = value.length; 11537 while (string.indexOf(value, pos) !== -1) { 11538 const index = string.indexOf(value, pos); 11539 if (index !== -1) { 11540 offsets.push([index, length]); 11541 } 11542 pos = index + 1; 11543 } 11544 } 11545 return offsets; 11546 } 11547 function filterOverlappingOffsets(offsets) { 11548 return offsets.filter(([offset, length], i2, arr) => { 11549 return !arr.some( 11550 ([o2, l2], j2) => j2 !== i2 && o2 <= offset && o2 + l2 >= offset + length 11551 ); 11552 }); 11553 } 11554 function sortOffsets(offsets) { 11555 return offsets.sort(([a2], [b2]) => a2 - b2); 11556 } 11557 function splitValue(itemValue, userValue) { 11558 if (!itemValue) return itemValue; 11559 if (!userValue) return itemValue; 11560 const userValues = toArray(userValue).filter(Boolean).map(normalizeValue); 11561 const parts = []; 11562 const span = (value, autocomplete = false) => /* @__PURE__ */ (0, import_jsx_runtime71.jsx)( 11563 "span", 11564 { 11565 "data-autocomplete-value": autocomplete ? "" : void 0, 11566 "data-user-value": autocomplete ? void 0 : "", 11567 children: value 11568 }, 11569 parts.length 11570 ); 11571 const offsets = sortOffsets( 11572 filterOverlappingOffsets( 11573 // Convert userValues into a set to avoid duplicates 11574 getOffsets(normalizeValue(itemValue), new Set(userValues)) 11575 ) 11576 ); 11577 if (!offsets.length) { 11578 parts.push(span(itemValue, true)); 11579 return parts; 11580 } 11581 const [firstOffset] = offsets[0]; 11582 const values = [ 11583 itemValue.slice(0, firstOffset), 11584 ...offsets.flatMap(([offset, length], i2) => { 11585 var _a; 11586 const value = itemValue.slice(offset, offset + length); 11587 const nextOffset = (_a = offsets[i2 + 1]) == null ? void 0 : _a[0]; 11588 const nextValue = itemValue.slice(offset + length, nextOffset); 11589 return [value, nextValue]; 11590 }) 11591 ]; 11592 values.forEach((value, i2) => { 11593 if (!value) return; 11594 parts.push(span(value, i2 % 2 === 0)); 11595 }); 11596 return parts; 11597 } 11598 var useComboboxItemValue = createHook(function useComboboxItemValue2({ store: store2, value, userValue, ...props }) { 11599 const context = useComboboxScopedContext(); 11600 store2 = store2 || context; 11601 const itemContext = (0, import_react25.useContext)(ComboboxItemValueContext); 11602 const itemValue = value != null ? value : itemContext; 11603 const inputValue = useStoreState(store2, (state) => userValue != null ? userValue : state == null ? void 0 : state.value); 11604 const children = (0, import_react25.useMemo)(() => { 11605 if (!itemValue) return; 11606 if (!inputValue) return itemValue; 11607 return splitValue(itemValue, inputValue); 11608 }, [itemValue, inputValue]); 11609 props = { 11610 children, 11611 ...props 11612 }; 11613 return removeUndefinedValues(props); 11614 }); 11615 var ComboboxItemValue = forwardRef25(function ComboboxItemValue2(props) { 11616 const htmlProps = useComboboxItemValue(props); 11617 return createElement3(TagName11, htmlProps); 11618 }); 11619 11620 // node_modules/@ariakit/react-core/esm/combobox/combobox-label.js 11621 var TagName12 = "label"; 11622 var useComboboxLabel = createHook( 11623 function useComboboxLabel2({ store: store2, ...props }) { 11624 const context = useComboboxProviderContext(); 11625 store2 = store2 || context; 11626 invariant( 11627 store2, 11628 "ComboboxLabel must receive a `store` prop or be wrapped in a ComboboxProvider component." 11629 ); 11630 const comboboxId = store2.useState((state) => { 11631 var _a; 11632 return (_a = state.baseElement) == null ? void 0 : _a.id; 11633 }); 11634 props = { 11635 htmlFor: comboboxId, 11636 ...props 11637 }; 11638 return removeUndefinedValues(props); 11639 } 11640 ); 11641 var ComboboxLabel = memo22( 11642 forwardRef25(function ComboboxLabel2(props) { 11643 const htmlProps = useComboboxLabel(props); 11644 return createElement3(TagName12, htmlProps); 11645 }) 11646 ); 11647 11648 // node_modules/@ariakit/react-core/esm/__chunks/2G6YEJT4.js 11649 var import_react26 = __toESM(require_react(), 1); 11650 var import_jsx_runtime72 = __toESM(require_jsx_runtime(), 1); 11651 var TagName13 = "div"; 11652 var useComboboxList = createHook( 11653 function useComboboxList2({ store: store2, alwaysVisible, ...props }) { 11654 const scopedContext = useComboboxScopedContext(true); 11655 const context = useComboboxContext(); 11656 store2 = store2 || context; 11657 const scopedContextSameStore = !!store2 && store2 === scopedContext; 11658 invariant( 11659 store2, 11660 "ComboboxList must receive a `store` prop or be wrapped in a ComboboxProvider component." 11661 ); 11662 const ref = (0, import_react26.useRef)(null); 11663 const id = useId5(props.id); 11664 const mounted = store2.useState("mounted"); 11665 const hidden = isHidden(mounted, props.hidden, alwaysVisible); 11666 const style = hidden ? { ...props.style, display: "none" } : props.style; 11667 const multiSelectable = store2.useState( 11668 (state) => Array.isArray(state.selectedValue) 11669 ); 11670 const role = useAttribute(ref, "role", props.role); 11671 const isCompositeRole = role === "listbox" || role === "tree" || role === "grid"; 11672 const ariaMultiSelectable = isCompositeRole ? multiSelectable || void 0 : void 0; 11673 const [hasListboxInside, setHasListboxInside] = (0, import_react26.useState)(false); 11674 const contentElement = store2.useState("contentElement"); 11675 useSafeLayoutEffect(() => { 11676 if (!mounted) return; 11677 const element = ref.current; 11678 if (!element) return; 11679 if (contentElement !== element) return; 11680 const callback = () => { 11681 setHasListboxInside(!!element.querySelector("[role='listbox']")); 11682 }; 11683 const observer = new MutationObserver(callback); 11684 observer.observe(element, { 11685 subtree: true, 11686 childList: true, 11687 attributeFilter: ["role"] 11688 }); 11689 callback(); 11690 return () => observer.disconnect(); 11691 }, [mounted, contentElement]); 11692 if (!hasListboxInside) { 11693 props = { 11694 role: "listbox", 11695 "aria-multiselectable": ariaMultiSelectable, 11696 ...props 11697 }; 11698 } 11699 props = useWrapElement( 11700 props, 11701 (element) => /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(ComboboxScopedContextProvider, { value: store2, children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(ComboboxListRoleContext.Provider, { value: role, children: element }) }), 11702 [store2, role] 11703 ); 11704 const setContentElement = id && (!scopedContext || !scopedContextSameStore) ? store2.setContentElement : null; 11705 props = { 11706 id, 11707 hidden, 11708 ...props, 11709 ref: useMergeRefs(setContentElement, ref, props.ref), 11710 style 11711 }; 11712 return removeUndefinedValues(props); 11713 } 11714 ); 11715 var ComboboxList = forwardRef25(function ComboboxList2(props) { 11716 const htmlProps = useComboboxList(props); 11717 return createElement3(TagName13, htmlProps); 11718 }); 11719 11720 // node_modules/@ariakit/react-core/esm/__chunks/XSIEPKGA.js 11721 var import_react27 = __toESM(require_react(), 1); 11722 var TagValueContext = (0, import_react27.createContext)(null); 11723 var TagRemoveIdContext = (0, import_react27.createContext)( 11724 null 11725 ); 11726 var ctx7 = createStoreContext( 11727 [CompositeContextProvider], 11728 [CompositeScopedContextProvider] 11729 ); 11730 var useTagContext = ctx7.useContext; 11731 var useTagScopedContext = ctx7.useScopedContext; 11732 var useTagProviderContext = ctx7.useProviderContext; 11733 var TagContextProvider = ctx7.ContextProvider; 11734 var TagScopedContextProvider = ctx7.ScopedContextProvider; 11735 11736 // node_modules/@ariakit/core/esm/combobox/combobox-store.js 11737 var isTouchSafari = isSafari() && isTouchDevice(); 11738 function createComboboxStore({ 11739 tag, 11740 ...props 11741 } = {}) { 11742 const store2 = mergeStore(props.store, pick2(tag, ["value", "rtl"])); 11743 throwOnConflictingProps(props, store2); 11744 const tagState = tag == null ? void 0 : tag.getState(); 11745 const syncState = store2 == null ? void 0 : store2.getState(); 11746 const activeId = defaultValue( 11747 props.activeId, 11748 syncState == null ? void 0 : syncState.activeId, 11749 props.defaultActiveId, 11750 null 11751 ); 11752 const composite = createCompositeStore({ 11753 ...props, 11754 activeId, 11755 includesBaseElement: defaultValue( 11756 props.includesBaseElement, 11757 syncState == null ? void 0 : syncState.includesBaseElement, 11758 true 11759 ), 11760 orientation: defaultValue( 11761 props.orientation, 11762 syncState == null ? void 0 : syncState.orientation, 11763 "vertical" 11764 ), 11765 focusLoop: defaultValue(props.focusLoop, syncState == null ? void 0 : syncState.focusLoop, true), 11766 focusWrap: defaultValue(props.focusWrap, syncState == null ? void 0 : syncState.focusWrap, true), 11767 virtualFocus: defaultValue( 11768 props.virtualFocus, 11769 syncState == null ? void 0 : syncState.virtualFocus, 11770 true 11771 ) 11772 }); 11773 const popover = createPopoverStore({ 11774 ...props, 11775 placement: defaultValue( 11776 props.placement, 11777 syncState == null ? void 0 : syncState.placement, 11778 "bottom-start" 11779 ) 11780 }); 11781 const value = defaultValue( 11782 props.value, 11783 syncState == null ? void 0 : syncState.value, 11784 props.defaultValue, 11785 "" 11786 ); 11787 const selectedValue = defaultValue( 11788 props.selectedValue, 11789 syncState == null ? void 0 : syncState.selectedValue, 11790 tagState == null ? void 0 : tagState.values, 11791 props.defaultSelectedValue, 11792 "" 11793 ); 11794 const multiSelectable = Array.isArray(selectedValue); 11795 const initialState = { 11796 ...composite.getState(), 11797 ...popover.getState(), 11798 value, 11799 selectedValue, 11800 resetValueOnSelect: defaultValue( 11801 props.resetValueOnSelect, 11802 syncState == null ? void 0 : syncState.resetValueOnSelect, 11803 multiSelectable 11804 ), 11805 resetValueOnHide: defaultValue( 11806 props.resetValueOnHide, 11807 syncState == null ? void 0 : syncState.resetValueOnHide, 11808 multiSelectable && !tag 11809 ), 11810 activeValue: syncState == null ? void 0 : syncState.activeValue 11811 }; 11812 const combobox = createStore(initialState, composite, popover, store2); 11813 if (isTouchSafari) { 11814 setup( 11815 combobox, 11816 () => sync(combobox, ["virtualFocus"], () => { 11817 combobox.setState("virtualFocus", false); 11818 }) 11819 ); 11820 } 11821 setup(combobox, () => { 11822 if (!tag) return; 11823 return chain( 11824 sync(combobox, ["selectedValue"], (state) => { 11825 if (!Array.isArray(state.selectedValue)) return; 11826 tag.setValues(state.selectedValue); 11827 }), 11828 sync(tag, ["values"], (state) => { 11829 combobox.setState("selectedValue", state.values); 11830 }) 11831 ); 11832 }); 11833 setup( 11834 combobox, 11835 () => sync(combobox, ["resetValueOnHide", "mounted"], (state) => { 11836 if (!state.resetValueOnHide) return; 11837 if (state.mounted) return; 11838 combobox.setState("value", value); 11839 }) 11840 ); 11841 setup( 11842 combobox, 11843 () => sync(combobox, ["open"], (state) => { 11844 if (state.open) return; 11845 combobox.setState("activeId", activeId); 11846 combobox.setState("moves", 0); 11847 }) 11848 ); 11849 setup( 11850 combobox, 11851 () => sync(combobox, ["moves", "activeId"], (state, prevState) => { 11852 if (state.moves === prevState.moves) { 11853 combobox.setState("activeValue", void 0); 11854 } 11855 }) 11856 ); 11857 setup( 11858 combobox, 11859 () => batch(combobox, ["moves", "renderedItems"], (state, prev) => { 11860 if (state.moves === prev.moves) return; 11861 const { activeId: activeId2 } = combobox.getState(); 11862 const activeItem = composite.item(activeId2); 11863 combobox.setState("activeValue", activeItem == null ? void 0 : activeItem.value); 11864 }) 11865 ); 11866 return { 11867 ...popover, 11868 ...composite, 11869 ...combobox, 11870 tag, 11871 setValue: (value2) => combobox.setState("value", value2), 11872 resetValue: () => combobox.setState("value", initialState.value), 11873 setSelectedValue: (selectedValue2) => combobox.setState("selectedValue", selectedValue2) 11874 }; 11875 } 11876 11877 // node_modules/@ariakit/react-core/esm/__chunks/SVN33SY6.js 11878 function useComboboxStoreOptions(props) { 11879 const tag = useTagContext(); 11880 props = { 11881 ...props, 11882 tag: props.tag !== void 0 ? props.tag : tag 11883 }; 11884 return useCompositeStoreOptions(props); 11885 } 11886 function useComboboxStoreProps(store2, update2, props) { 11887 useUpdateEffect(update2, [props.tag]); 11888 useStoreProps(store2, props, "value", "setValue"); 11889 useStoreProps(store2, props, "selectedValue", "setSelectedValue"); 11890 useStoreProps(store2, props, "resetValueOnHide"); 11891 useStoreProps(store2, props, "resetValueOnSelect"); 11892 return Object.assign( 11893 useCompositeStoreProps( 11894 usePopoverStoreProps(store2, update2, props), 11895 update2, 11896 props 11897 ), 11898 { tag: props.tag } 11899 ); 11900 } 11901 function useComboboxStore(props = {}) { 11902 props = useComboboxStoreOptions(props); 11903 const [store2, update2] = useStore(createComboboxStore, props); 11904 return useComboboxStoreProps(store2, update2, props); 11905 } 11906 11907 // node_modules/@ariakit/react-core/esm/combobox/combobox-provider.js 11908 var import_jsx_runtime73 = __toESM(require_jsx_runtime(), 1); 11909 function ComboboxProvider(props = {}) { 11910 const store2 = useComboboxStore(props); 11911 return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(ComboboxContextProvider, { value: store2, children: props.children }); 11912 } 11913 11914 // packages/dataviews/build-module/components/dataviews-filters/search-widget.mjs 11915 var import_remove_accents = __toESM(require_remove_accents(), 1); 11916 var import_compose7 = __toESM(require_compose(), 1); 11917 var import_i18n23 = __toESM(require_i18n(), 1); 11918 var import_element43 = __toESM(require_element(), 1); 11919 var import_components21 = __toESM(require_components(), 1); 11920 11921 // packages/dataviews/build-module/components/dataviews-filters/utils.mjs 11922 var EMPTY_ARRAY3 = []; 11923 var getCurrentValue = (filterDefinition, currentFilter) => { 11924 if (filterDefinition.singleSelection) { 11925 return currentFilter?.value; 11926 } 11927 if (Array.isArray(currentFilter?.value)) { 11928 return currentFilter.value; 11929 } 11930 if (!Array.isArray(currentFilter?.value) && !!currentFilter?.value) { 11931 return [currentFilter.value]; 11932 } 11933 return EMPTY_ARRAY3; 11934 }; 11935 11936 // packages/dataviews/build-module/hooks/use-elements.mjs 11937 var import_element42 = __toESM(require_element(), 1); 11938 var EMPTY_ARRAY4 = []; 11939 function useElements({ 11940 elements, 11941 getElements 11942 }) { 11943 const staticElements = Array.isArray(elements) && elements.length > 0 ? elements : EMPTY_ARRAY4; 11944 const [records, setRecords] = (0, import_element42.useState)(staticElements); 11945 const [isLoading, setIsLoading] = (0, import_element42.useState)(false); 11946 (0, import_element42.useEffect)(() => { 11947 if (!getElements) { 11948 setRecords(staticElements); 11949 return; 11950 } 11951 let cancelled = false; 11952 setIsLoading(true); 11953 getElements().then((fetchedElements) => { 11954 if (!cancelled) { 11955 const dynamicElements = Array.isArray(fetchedElements) && fetchedElements.length > 0 ? fetchedElements : staticElements; 11956 setRecords(dynamicElements); 11957 } 11958 }).catch(() => { 11959 if (!cancelled) { 11960 setRecords(staticElements); 11961 } 11962 }).finally(() => { 11963 if (!cancelled) { 11964 setIsLoading(false); 11965 } 11966 }); 11967 return () => { 11968 cancelled = true; 11969 }; 11970 }, [getElements, staticElements]); 11971 return { 11972 elements: records, 11973 isLoading 11974 }; 11975 } 11976 11977 // packages/dataviews/build-module/components/dataviews-filters/search-widget.mjs 11978 var import_jsx_runtime74 = __toESM(require_jsx_runtime(), 1); 11979 function normalizeSearchInput(input = "") { 11980 return (0, import_remove_accents.default)(input.trim().toLowerCase()); 11981 } 11982 var getNewValue = (filterDefinition, currentFilter, value) => { 11983 if (filterDefinition.singleSelection) { 11984 return value; 11985 } 11986 if (Array.isArray(currentFilter?.value)) { 11987 return currentFilter.value.includes(value) ? currentFilter.value.filter((v2) => v2 !== value) : [...currentFilter.value, value]; 11988 } 11989 return [value]; 11990 }; 11991 function generateFilterElementCompositeItemId(prefix, filterElementValue) { 11992 return `$prefix}-$filterElementValue}`; 11993 } 11994 var MultiSelectionOption = ({ selected }) => { 11995 return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)( 11996 "span", 11997 { 11998 className: clsx_default( 11999 "dataviews-filters__search-widget-listitem-multi-selection", 12000 { "is-selected": selected } 12001 ), 12002 children: selected && /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(import_components21.Icon, { icon: check_default }) 12003 } 12004 ); 12005 }; 12006 var SingleSelectionOption = ({ selected }) => { 12007 return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)( 12008 "span", 12009 { 12010 className: clsx_default( 12011 "dataviews-filters__search-widget-listitem-single-selection", 12012 { "is-selected": selected } 12013 ) 12014 } 12015 ); 12016 }; 12017 function ListBox({ view, filter, onChangeView }) { 12018 const baseId = (0, import_compose7.useInstanceId)(ListBox, "dataviews-filter-list-box"); 12019 const [activeCompositeId, setActiveCompositeId] = (0, import_element43.useState)( 12020 // When there are one or less operators, the first item is set as active 12021 // (by setting the initial `activeId` to `undefined`). 12022 // With 2 or more operators, the focus is moved on the operators control 12023 // (by setting the initial `activeId` to `null`), meaning that there won't 12024 // be an active item initially. Focus is then managed via the 12025 // `onFocusVisible` callback. 12026 filter.operators?.length === 1 ? void 0 : null 12027 ); 12028 const currentFilter = view.filters?.find( 12029 (f2) => f2.field === filter.field 12030 ); 12031 const currentValue = getCurrentValue(filter, currentFilter); 12032 return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)( 12033 import_components21.Composite, 12034 { 12035 virtualFocus: true, 12036 focusLoop: true, 12037 activeId: activeCompositeId, 12038 setActiveId: setActiveCompositeId, 12039 role: "listbox", 12040 className: "dataviews-filters__search-widget-listbox", 12041 "aria-label": (0, import_i18n23.sprintf)( 12042 /* translators: List of items for a filter. 1: Filter name. e.g.: "List of: Author". */ 12043 (0, import_i18n23.__)("List of: %1$s"), 12044 filter.name 12045 ), 12046 onFocusVisible: () => { 12047 if (!activeCompositeId && filter.elements.length) { 12048 setActiveCompositeId( 12049 generateFilterElementCompositeItemId( 12050 baseId, 12051 filter.elements[0].value 12052 ) 12053 ); 12054 } 12055 }, 12056 render: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(import_components21.Composite.Typeahead, {}), 12057 children: filter.elements.map((element) => /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)( 12058 import_components21.Composite.Hover, 12059 { 12060 render: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)( 12061 import_components21.Composite.Item, 12062 { 12063 id: generateFilterElementCompositeItemId( 12064 baseId, 12065 element.value 12066 ), 12067 render: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)( 12068 "div", 12069 { 12070 "aria-label": element.label, 12071 role: "option", 12072 className: "dataviews-filters__search-widget-listitem" 12073 } 12074 ), 12075 onClick: () => { 12076 const newFilters = currentFilter ? [ 12077 ...(view.filters ?? []).map( 12078 (_filter) => { 12079 if (_filter.field === filter.field) { 12080 return { 12081 ..._filter, 12082 operator: currentFilter.operator || filter.operators[0], 12083 value: getNewValue( 12084 filter, 12085 currentFilter, 12086 element.value 12087 ) 12088 }; 12089 } 12090 return _filter; 12091 } 12092 ) 12093 ] : [ 12094 ...view.filters ?? [], 12095 { 12096 field: filter.field, 12097 operator: filter.operators[0], 12098 value: getNewValue( 12099 filter, 12100 currentFilter, 12101 element.value 12102 ) 12103 } 12104 ]; 12105 onChangeView({ 12106 ...view, 12107 page: 1, 12108 filters: newFilters 12109 }); 12110 } 12111 } 12112 ), 12113 children: [ 12114 filter.singleSelection && /* @__PURE__ */ (0, import_jsx_runtime74.jsx)( 12115 SingleSelectionOption, 12116 { 12117 selected: currentValue === element.value 12118 } 12119 ), 12120 !filter.singleSelection && /* @__PURE__ */ (0, import_jsx_runtime74.jsx)( 12121 MultiSelectionOption, 12122 { 12123 selected: currentValue.includes(element.value) 12124 } 12125 ), 12126 /* @__PURE__ */ (0, import_jsx_runtime74.jsx)( 12127 "span", 12128 { 12129 className: "dataviews-filters__search-widget-listitem-value", 12130 title: element.label, 12131 children: element.label 12132 } 12133 ) 12134 ] 12135 }, 12136 element.value 12137 )) 12138 } 12139 ); 12140 } 12141 function ComboboxList22({ view, filter, onChangeView }) { 12142 const [searchValue, setSearchValue] = (0, import_element43.useState)(""); 12143 const deferredSearchValue = (0, import_element43.useDeferredValue)(searchValue); 12144 const currentFilter = view.filters?.find( 12145 (_filter) => _filter.field === filter.field 12146 ); 12147 const currentValue = getCurrentValue(filter, currentFilter); 12148 const matches = (0, import_element43.useMemo)(() => { 12149 const normalizedSearch = normalizeSearchInput(deferredSearchValue); 12150 return filter.elements.filter( 12151 (item) => normalizeSearchInput(item.label).includes(normalizedSearch) 12152 ); 12153 }, [filter.elements, deferredSearchValue]); 12154 return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)( 12155 ComboboxProvider, 12156 { 12157 selectedValue: currentValue, 12158 setSelectedValue: (value) => { 12159 const newFilters = currentFilter ? [ 12160 ...(view.filters ?? []).map((_filter) => { 12161 if (_filter.field === filter.field) { 12162 return { 12163 ..._filter, 12164 operator: currentFilter.operator || filter.operators[0], 12165 value 12166 }; 12167 } 12168 return _filter; 12169 }) 12170 ] : [ 12171 ...view.filters ?? [], 12172 { 12173 field: filter.field, 12174 operator: filter.operators[0], 12175 value 12176 } 12177 ]; 12178 onChangeView({ 12179 ...view, 12180 page: 1, 12181 filters: newFilters 12182 }); 12183 }, 12184 setValue: setSearchValue, 12185 children: [ 12186 /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: "dataviews-filters__search-widget-filter-combobox__wrapper", children: [ 12187 /* @__PURE__ */ (0, import_jsx_runtime74.jsx)( 12188 ComboboxLabel, 12189 { 12190 render: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(import_components21.VisuallyHidden, { children: (0, import_i18n23.__)("Search items") }), 12191 children: (0, import_i18n23.__)("Search items") 12192 } 12193 ), 12194 /* @__PURE__ */ (0, import_jsx_runtime74.jsx)( 12195 Combobox, 12196 { 12197 autoSelect: "always", 12198 placeholder: (0, import_i18n23.__)("Search"), 12199 className: "dataviews-filters__search-widget-filter-combobox__input" 12200 } 12201 ), 12202 /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: "dataviews-filters__search-widget-filter-combobox__icon", children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(import_components21.Icon, { icon: search_default }) }) 12203 ] }), 12204 /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)( 12205 ComboboxList, 12206 { 12207 className: "dataviews-filters__search-widget-filter-combobox-list", 12208 alwaysVisible: true, 12209 children: [ 12210 matches.map((element) => { 12211 return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)( 12212 ComboboxItem, 12213 { 12214 resetValueOnSelect: false, 12215 value: element.value, 12216 className: "dataviews-filters__search-widget-listitem", 12217 hideOnClick: false, 12218 setValueOnClick: false, 12219 focusOnHover: true, 12220 children: [ 12221 filter.singleSelection && /* @__PURE__ */ (0, import_jsx_runtime74.jsx)( 12222 SingleSelectionOption, 12223 { 12224 selected: currentValue === element.value 12225 } 12226 ), 12227 !filter.singleSelection && /* @__PURE__ */ (0, import_jsx_runtime74.jsx)( 12228 MultiSelectionOption, 12229 { 12230 selected: currentValue.includes( 12231 element.value 12232 ) 12233 } 12234 ), 12235 /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)( 12236 "span", 12237 { 12238 className: "dataviews-filters__search-widget-listitem-value", 12239 title: element.label, 12240 children: [ 12241 /* @__PURE__ */ (0, import_jsx_runtime74.jsx)( 12242 ComboboxItemValue, 12243 { 12244 className: "dataviews-filters__search-widget-filter-combobox-item-value", 12245 value: element.label 12246 } 12247 ), 12248 !!element.description && /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("span", { className: "dataviews-filters__search-widget-listitem-description", children: element.description }) 12249 ] 12250 } 12251 ) 12252 ] 12253 }, 12254 element.value 12255 ); 12256 }), 12257 !matches.length && /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("p", { children: (0, import_i18n23.__)("No results found") }) 12258 ] 12259 } 12260 ) 12261 ] 12262 } 12263 ); 12264 } 12265 function SearchWidget(props) { 12266 const { elements, isLoading } = useElements({ 12267 elements: props.filter.elements, 12268 getElements: props.filter.getElements 12269 }); 12270 if (isLoading) { 12271 return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: "dataviews-filters__search-widget-no-elements", children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(import_components21.Spinner, {}) }); 12272 } 12273 if (elements.length === 0) { 12274 return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: "dataviews-filters__search-widget-no-elements", children: (0, import_i18n23.__)("No elements found") }); 12275 } 12276 const Widget = elements.length > 10 ? ComboboxList22 : ListBox; 12277 return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(Widget, { ...props, filter: { ...props.filter, elements } }); 12278 } 12279 12280 // packages/dataviews/build-module/components/dataviews-filters/input-widget.mjs 12281 var import_es6 = __toESM(require_es6(), 1); 12282 var import_compose8 = __toESM(require_compose(), 1); 12283 var import_element44 = __toESM(require_element(), 1); 12284 var import_components22 = __toESM(require_components(), 1); 12285 var import_jsx_runtime75 = __toESM(require_jsx_runtime(), 1); 12286 function InputWidget({ 12287 filter, 12288 view, 12289 onChangeView, 12290 fields: fields2 12291 }) { 12292 const currentFilter = view.filters?.find( 12293 (f2) => f2.field === filter.field 12294 ); 12295 const currentValue = getCurrentValue(filter, currentFilter); 12296 const field = (0, import_element44.useMemo)(() => { 12297 const currentField = fields2.find((f2) => f2.id === filter.field); 12298 if (currentField) { 12299 return { 12300 ...currentField, 12301 // Deactivate validation for filters. 12302 isValid: {}, 12303 // Configure getValue/setValue as if Item was a plain object. 12304 getValue: ({ item }) => item[currentField.id], 12305 setValue: ({ value }) => ({ 12306 [currentField.id]: value 12307 }) 12308 }; 12309 } 12310 return currentField; 12311 }, [fields2, filter.field]); 12312 const data = (0, import_element44.useMemo)(() => { 12313 return (view.filters ?? []).reduce( 12314 (acc, activeFilter) => { 12315 acc[activeFilter.field] = activeFilter.value; 12316 return acc; 12317 }, 12318 {} 12319 ); 12320 }, [view.filters]); 12321 const handleChange = (0, import_compose8.useEvent)((updatedData) => { 12322 if (!field || !currentFilter) { 12323 return; 12324 } 12325 const nextValue = field.getValue({ item: updatedData }); 12326 if ((0, import_es6.default)(nextValue, currentValue)) { 12327 return; 12328 } 12329 onChangeView({ 12330 ...view, 12331 filters: (view.filters ?? []).map( 12332 (_filter) => _filter.field === filter.field ? { 12333 ..._filter, 12334 operator: currentFilter.operator || filter.operators[0], 12335 // Consider empty strings as undefined: 12336 // 12337 // - undefined as value means the filter is unset: the filter widget displays no value and the search returns all records 12338 // - empty string as value means "search empty string": returns only the records that have an empty string as value 12339 // 12340 // In practice, this means the filter will not be able to find an empty string as the value. 12341 value: nextValue === "" ? void 0 : nextValue 12342 } : _filter 12343 ) 12344 }); 12345 }); 12346 if (!field || !field.Edit || !currentFilter) { 12347 return null; 12348 } 12349 return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)( 12350 import_components22.Flex, 12351 { 12352 className: "dataviews-filters__user-input-widget", 12353 gap: 2.5, 12354 direction: "column", 12355 children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)( 12356 field.Edit, 12357 { 12358 hideLabelFromVision: true, 12359 data, 12360 field, 12361 operator: currentFilter.operator, 12362 onChange: handleChange 12363 } 12364 ) 12365 } 12366 ); 12367 } 12368 12369 // packages/dataviews/node_modules/date-fns/constants.js 12370 var daysInYear = 365.2425; 12371 var maxTime = Math.pow(10, 8) * 24 * 60 * 60 * 1e3; 12372 var minTime = -maxTime; 12373 var millisecondsInWeek = 6048e5; 12374 var millisecondsInDay = 864e5; 12375 var secondsInHour = 3600; 12376 var secondsInDay = secondsInHour * 24; 12377 var secondsInWeek = secondsInDay * 7; 12378 var secondsInYear = secondsInDay * daysInYear; 12379 var secondsInMonth = secondsInYear / 12; 12380 var secondsInQuarter = secondsInMonth * 3; 12381 var constructFromSymbol = /* @__PURE__ */ Symbol.for("constructDateFrom"); 12382 12383 // packages/dataviews/node_modules/date-fns/constructFrom.js 12384 function constructFrom(date, value) { 12385 if (typeof date === "function") return date(value); 12386 if (date && typeof date === "object" && constructFromSymbol in date) 12387 return date[constructFromSymbol](value); 12388 if (date instanceof Date) return new date.constructor(value); 12389 return new Date(value); 12390 } 12391 12392 // packages/dataviews/node_modules/date-fns/toDate.js 12393 function toDate(argument, context) { 12394 return constructFrom(context || argument, argument); 12395 } 12396 12397 // packages/dataviews/node_modules/date-fns/addDays.js 12398 function addDays(date, amount, options) { 12399 const _date = toDate(date, options?.in); 12400 if (isNaN(amount)) return constructFrom(options?.in || date, NaN); 12401 if (!amount) return _date; 12402 _date.setDate(_date.getDate() + amount); 12403 return _date; 12404 } 12405 12406 // packages/dataviews/node_modules/date-fns/addMonths.js 12407 function addMonths(date, amount, options) { 12408 const _date = toDate(date, options?.in); 12409 if (isNaN(amount)) return constructFrom(options?.in || date, NaN); 12410 if (!amount) { 12411 return _date; 12412 } 12413 const dayOfMonth = _date.getDate(); 12414 const endOfDesiredMonth = constructFrom(options?.in || date, _date.getTime()); 12415 endOfDesiredMonth.setMonth(_date.getMonth() + amount + 1, 0); 12416 const daysInMonth = endOfDesiredMonth.getDate(); 12417 if (dayOfMonth >= daysInMonth) { 12418 return endOfDesiredMonth; 12419 } else { 12420 _date.setFullYear( 12421 endOfDesiredMonth.getFullYear(), 12422 endOfDesiredMonth.getMonth(), 12423 dayOfMonth 12424 ); 12425 return _date; 12426 } 12427 } 12428 12429 // packages/dataviews/node_modules/date-fns/_lib/defaultOptions.js 12430 var defaultOptions = {}; 12431 function getDefaultOptions() { 12432 return defaultOptions; 12433 } 12434 12435 // packages/dataviews/node_modules/date-fns/startOfWeek.js 12436 function startOfWeek(date, options) { 12437 const defaultOptions2 = getDefaultOptions(); 12438 const weekStartsOn = options?.weekStartsOn ?? options?.locale?.options?.weekStartsOn ?? defaultOptions2.weekStartsOn ?? defaultOptions2.locale?.options?.weekStartsOn ?? 0; 12439 const _date = toDate(date, options?.in); 12440 const day = _date.getDay(); 12441 const diff = (day < weekStartsOn ? 7 : 0) + day - weekStartsOn; 12442 _date.setDate(_date.getDate() - diff); 12443 _date.setHours(0, 0, 0, 0); 12444 return _date; 12445 } 12446 12447 // packages/dataviews/node_modules/date-fns/startOfISOWeek.js 12448 function startOfISOWeek(date, options) { 12449 return startOfWeek(date, { ...options, weekStartsOn: 1 }); 12450 } 12451 12452 // packages/dataviews/node_modules/date-fns/getISOWeekYear.js 12453 function getISOWeekYear(date, options) { 12454 const _date = toDate(date, options?.in); 12455 const year = _date.getFullYear(); 12456 const fourthOfJanuaryOfNextYear = constructFrom(_date, 0); 12457 fourthOfJanuaryOfNextYear.setFullYear(year + 1, 0, 4); 12458 fourthOfJanuaryOfNextYear.setHours(0, 0, 0, 0); 12459 const startOfNextYear = startOfISOWeek(fourthOfJanuaryOfNextYear); 12460 const fourthOfJanuaryOfThisYear = constructFrom(_date, 0); 12461 fourthOfJanuaryOfThisYear.setFullYear(year, 0, 4); 12462 fourthOfJanuaryOfThisYear.setHours(0, 0, 0, 0); 12463 const startOfThisYear = startOfISOWeek(fourthOfJanuaryOfThisYear); 12464 if (_date.getTime() >= startOfNextYear.getTime()) { 12465 return year + 1; 12466 } else if (_date.getTime() >= startOfThisYear.getTime()) { 12467 return year; 12468 } else { 12469 return year - 1; 12470 } 12471 } 12472 12473 // packages/dataviews/node_modules/date-fns/_lib/getTimezoneOffsetInMilliseconds.js 12474 function getTimezoneOffsetInMilliseconds(date) { 12475 const _date = toDate(date); 12476 const utcDate = new Date( 12477 Date.UTC( 12478 _date.getFullYear(), 12479 _date.getMonth(), 12480 _date.getDate(), 12481 _date.getHours(), 12482 _date.getMinutes(), 12483 _date.getSeconds(), 12484 _date.getMilliseconds() 12485 ) 12486 ); 12487 utcDate.setUTCFullYear(_date.getFullYear()); 12488 return +date - +utcDate; 12489 } 12490 12491 // packages/dataviews/node_modules/date-fns/_lib/normalizeDates.js 12492 function normalizeDates(context, ...dates) { 12493 const normalize = constructFrom.bind( 12494 null, 12495 context || dates.find((date) => typeof date === "object") 12496 ); 12497 return dates.map(normalize); 12498 } 12499 12500 // packages/dataviews/node_modules/date-fns/startOfDay.js 12501 function startOfDay(date, options) { 12502 const _date = toDate(date, options?.in); 12503 _date.setHours(0, 0, 0, 0); 12504 return _date; 12505 } 12506 12507 // packages/dataviews/node_modules/date-fns/differenceInCalendarDays.js 12508 function differenceInCalendarDays(laterDate, earlierDate, options) { 12509 const [laterDate_, earlierDate_] = normalizeDates( 12510 options?.in, 12511 laterDate, 12512 earlierDate 12513 ); 12514 const laterStartOfDay = startOfDay(laterDate_); 12515 const earlierStartOfDay = startOfDay(earlierDate_); 12516 const laterTimestamp = +laterStartOfDay - getTimezoneOffsetInMilliseconds(laterStartOfDay); 12517 const earlierTimestamp = +earlierStartOfDay - getTimezoneOffsetInMilliseconds(earlierStartOfDay); 12518 return Math.round((laterTimestamp - earlierTimestamp) / millisecondsInDay); 12519 } 12520 12521 // packages/dataviews/node_modules/date-fns/startOfISOWeekYear.js 12522 function startOfISOWeekYear(date, options) { 12523 const year = getISOWeekYear(date, options); 12524 const fourthOfJanuary = constructFrom(options?.in || date, 0); 12525 fourthOfJanuary.setFullYear(year, 0, 4); 12526 fourthOfJanuary.setHours(0, 0, 0, 0); 12527 return startOfISOWeek(fourthOfJanuary); 12528 } 12529 12530 // packages/dataviews/node_modules/date-fns/addWeeks.js 12531 function addWeeks(date, amount, options) { 12532 return addDays(date, amount * 7, options); 12533 } 12534 12535 // packages/dataviews/node_modules/date-fns/addYears.js 12536 function addYears(date, amount, options) { 12537 return addMonths(date, amount * 12, options); 12538 } 12539 12540 // packages/dataviews/node_modules/date-fns/isDate.js 12541 function isDate(value) { 12542 return value instanceof Date || typeof value === "object" && Object.prototype.toString.call(value) === "[object Date]"; 12543 } 12544 12545 // packages/dataviews/node_modules/date-fns/isValid.js 12546 function isValid(date) { 12547 return !(!isDate(date) && typeof date !== "number" || isNaN(+toDate(date))); 12548 } 12549 12550 // packages/dataviews/node_modules/date-fns/startOfMonth.js 12551 function startOfMonth(date, options) { 12552 const _date = toDate(date, options?.in); 12553 _date.setDate(1); 12554 _date.setHours(0, 0, 0, 0); 12555 return _date; 12556 } 12557 12558 // packages/dataviews/node_modules/date-fns/startOfYear.js 12559 function startOfYear(date, options) { 12560 const date_ = toDate(date, options?.in); 12561 date_.setFullYear(date_.getFullYear(), 0, 1); 12562 date_.setHours(0, 0, 0, 0); 12563 return date_; 12564 } 12565 12566 // packages/dataviews/node_modules/date-fns/locale/en-US/_lib/formatDistance.js 12567 var formatDistanceLocale = { 12568 lessThanXSeconds: { 12569 one: "less than a second", 12570 other: "less than {{count}} seconds" 12571 }, 12572 xSeconds: { 12573 one: "1 second", 12574 other: "{{count}} seconds" 12575 }, 12576 halfAMinute: "half a minute", 12577 lessThanXMinutes: { 12578 one: "less than a minute", 12579 other: "less than {{count}} minutes" 12580 }, 12581 xMinutes: { 12582 one: "1 minute", 12583 other: "{{count}} minutes" 12584 }, 12585 aboutXHours: { 12586 one: "about 1 hour", 12587 other: "about {{count}} hours" 12588 }, 12589 xHours: { 12590 one: "1 hour", 12591 other: "{{count}} hours" 12592 }, 12593 xDays: { 12594 one: "1 day", 12595 other: "{{count}} days" 12596 }, 12597 aboutXWeeks: { 12598 one: "about 1 week", 12599 other: "about {{count}} weeks" 12600 }, 12601 xWeeks: { 12602 one: "1 week", 12603 other: "{{count}} weeks" 12604 }, 12605 aboutXMonths: { 12606 one: "about 1 month", 12607 other: "about {{count}} months" 12608 }, 12609 xMonths: { 12610 one: "1 month", 12611 other: "{{count}} months" 12612 }, 12613 aboutXYears: { 12614 one: "about 1 year", 12615 other: "about {{count}} years" 12616 }, 12617 xYears: { 12618 one: "1 year", 12619 other: "{{count}} years" 12620 }, 12621 overXYears: { 12622 one: "over 1 year", 12623 other: "over {{count}} years" 12624 }, 12625 almostXYears: { 12626 one: "almost 1 year", 12627 other: "almost {{count}} years" 12628 } 12629 }; 12630 var formatDistance = (token, count, options) => { 12631 let result; 12632 const tokenValue = formatDistanceLocale[token]; 12633 if (typeof tokenValue === "string") { 12634 result = tokenValue; 12635 } else if (count === 1) { 12636 result = tokenValue.one; 12637 } else { 12638 result = tokenValue.other.replace("{{count}}", count.toString()); 12639 } 12640 if (options?.addSuffix) { 12641 if (options.comparison && options.comparison > 0) { 12642 return "in " + result; 12643 } else { 12644 return result + " ago"; 12645 } 12646 } 12647 return result; 12648 }; 12649 12650 // packages/dataviews/node_modules/date-fns/locale/_lib/buildFormatLongFn.js 12651 function buildFormatLongFn(args) { 12652 return (options = {}) => { 12653 const width = options.width ? String(options.width) : args.defaultWidth; 12654 const format6 = args.formats[width] || args.formats[args.defaultWidth]; 12655 return format6; 12656 }; 12657 } 12658 12659 // packages/dataviews/node_modules/date-fns/locale/en-US/_lib/formatLong.js 12660 var dateFormats = { 12661 full: "EEEE, MMMM do, y", 12662 long: "MMMM do, y", 12663 medium: "MMM d, y", 12664 short: "MM/dd/yyyy" 12665 }; 12666 var timeFormats = { 12667 full: "h:mm:ss a zzzz", 12668 long: "h:mm:ss a z", 12669 medium: "h:mm:ss a", 12670 short: "h:mm a" 12671 }; 12672 var dateTimeFormats = { 12673 full: "{{date}} 'at' {{time}}", 12674 long: "{{date}} 'at' {{time}}", 12675 medium: "{{date}}, {{time}}", 12676 short: "{{date}}, {{time}}" 12677 }; 12678 var formatLong = { 12679 date: buildFormatLongFn({ 12680 formats: dateFormats, 12681 defaultWidth: "full" 12682 }), 12683 time: buildFormatLongFn({ 12684 formats: timeFormats, 12685 defaultWidth: "full" 12686 }), 12687 dateTime: buildFormatLongFn({ 12688 formats: dateTimeFormats, 12689 defaultWidth: "full" 12690 }) 12691 }; 12692 12693 // packages/dataviews/node_modules/date-fns/locale/en-US/_lib/formatRelative.js 12694 var formatRelativeLocale = { 12695 lastWeek: "'last' eeee 'at' p", 12696 yesterday: "'yesterday at' p", 12697 today: "'today at' p", 12698 tomorrow: "'tomorrow at' p", 12699 nextWeek: "eeee 'at' p", 12700 other: "P" 12701 }; 12702 var formatRelative = (token, _date, _baseDate, _options) => formatRelativeLocale[token]; 12703 12704 // packages/dataviews/node_modules/date-fns/locale/_lib/buildLocalizeFn.js 12705 function buildLocalizeFn(args) { 12706 return (value, options) => { 12707 const context = options?.context ? String(options.context) : "standalone"; 12708 let valuesArray; 12709 if (context === "formatting" && args.formattingValues) { 12710 const defaultWidth = args.defaultFormattingWidth || args.defaultWidth; 12711 const width = options?.width ? String(options.width) : defaultWidth; 12712 valuesArray = args.formattingValues[width] || args.formattingValues[defaultWidth]; 12713 } else { 12714 const defaultWidth = args.defaultWidth; 12715 const width = options?.width ? String(options.width) : args.defaultWidth; 12716 valuesArray = args.values[width] || args.values[defaultWidth]; 12717 } 12718 const index = args.argumentCallback ? args.argumentCallback(value) : value; 12719 return valuesArray[index]; 12720 }; 12721 } 12722 12723 // packages/dataviews/node_modules/date-fns/locale/en-US/_lib/localize.js 12724 var eraValues = { 12725 narrow: ["B", "A"], 12726 abbreviated: ["BC", "AD"], 12727 wide: ["Before Christ", "Anno Domini"] 12728 }; 12729 var quarterValues = { 12730 narrow: ["1", "2", "3", "4"], 12731 abbreviated: ["Q1", "Q2", "Q3", "Q4"], 12732 wide: ["1st quarter", "2nd quarter", "3rd quarter", "4th quarter"] 12733 }; 12734 var monthValues = { 12735 narrow: ["J", "F", "M", "A", "M", "J", "J", "A", "S", "O", "N", "D"], 12736 abbreviated: [ 12737 "Jan", 12738 "Feb", 12739 "Mar", 12740 "Apr", 12741 "May", 12742 "Jun", 12743 "Jul", 12744 "Aug", 12745 "Sep", 12746 "Oct", 12747 "Nov", 12748 "Dec" 12749 ], 12750 wide: [ 12751 "January", 12752 "February", 12753 "March", 12754 "April", 12755 "May", 12756 "June", 12757 "July", 12758 "August", 12759 "September", 12760 "October", 12761 "November", 12762 "December" 12763 ] 12764 }; 12765 var dayValues = { 12766 narrow: ["S", "M", "T", "W", "T", "F", "S"], 12767 short: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"], 12768 abbreviated: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"], 12769 wide: [ 12770 "Sunday", 12771 "Monday", 12772 "Tuesday", 12773 "Wednesday", 12774 "Thursday", 12775 "Friday", 12776 "Saturday" 12777 ] 12778 }; 12779 var dayPeriodValues = { 12780 narrow: { 12781 am: "a", 12782 pm: "p", 12783 midnight: "mi", 12784 noon: "n", 12785 morning: "morning", 12786 afternoon: "afternoon", 12787 evening: "evening", 12788 night: "night" 12789 }, 12790 abbreviated: { 12791 am: "AM", 12792 pm: "PM", 12793 midnight: "midnight", 12794 noon: "noon", 12795 morning: "morning", 12796 afternoon: "afternoon", 12797 evening: "evening", 12798 night: "night" 12799 }, 12800 wide: { 12801 am: "a.m.", 12802 pm: "p.m.", 12803 midnight: "midnight", 12804 noon: "noon", 12805 morning: "morning", 12806 afternoon: "afternoon", 12807 evening: "evening", 12808 night: "night" 12809 } 12810 }; 12811 var formattingDayPeriodValues = { 12812 narrow: { 12813 am: "a", 12814 pm: "p", 12815 midnight: "mi", 12816 noon: "n", 12817 morning: "in the morning", 12818 afternoon: "in the afternoon", 12819 evening: "in the evening", 12820 night: "at night" 12821 }, 12822 abbreviated: { 12823 am: "AM", 12824 pm: "PM", 12825 midnight: "midnight", 12826 noon: "noon", 12827 morning: "in the morning", 12828 afternoon: "in the afternoon", 12829 evening: "in the evening", 12830 night: "at night" 12831 }, 12832 wide: { 12833 am: "a.m.", 12834 pm: "p.m.", 12835 midnight: "midnight", 12836 noon: "noon", 12837 morning: "in the morning", 12838 afternoon: "in the afternoon", 12839 evening: "in the evening", 12840 night: "at night" 12841 } 12842 }; 12843 var ordinalNumber = (dirtyNumber, _options) => { 12844 const number = Number(dirtyNumber); 12845 const rem100 = number % 100; 12846 if (rem100 > 20 || rem100 < 10) { 12847 switch (rem100 % 10) { 12848 case 1: 12849 return number + "st"; 12850 case 2: 12851 return number + "nd"; 12852 case 3: 12853 return number + "rd"; 12854 } 12855 } 12856 return number + "th"; 12857 }; 12858 var localize = { 12859 ordinalNumber, 12860 era: buildLocalizeFn({ 12861 values: eraValues, 12862 defaultWidth: "wide" 12863 }), 12864 quarter: buildLocalizeFn({ 12865 values: quarterValues, 12866 defaultWidth: "wide", 12867 argumentCallback: (quarter) => quarter - 1 12868 }), 12869 month: buildLocalizeFn({ 12870 values: monthValues, 12871 defaultWidth: "wide" 12872 }), 12873 day: buildLocalizeFn({ 12874 values: dayValues, 12875 defaultWidth: "wide" 12876 }), 12877 dayPeriod: buildLocalizeFn({ 12878 values: dayPeriodValues, 12879 defaultWidth: "wide", 12880 formattingValues: formattingDayPeriodValues, 12881 defaultFormattingWidth: "wide" 12882 }) 12883 }; 12884 12885 // packages/dataviews/node_modules/date-fns/locale/_lib/buildMatchFn.js 12886 function buildMatchFn(args) { 12887 return (string, options = {}) => { 12888 const width = options.width; 12889 const matchPattern = width && args.matchPatterns[width] || args.matchPatterns[args.defaultMatchWidth]; 12890 const matchResult = string.match(matchPattern); 12891 if (!matchResult) { 12892 return null; 12893 } 12894 const matchedString = matchResult[0]; 12895 const parsePatterns = width && args.parsePatterns[width] || args.parsePatterns[args.defaultParseWidth]; 12896 const key = Array.isArray(parsePatterns) ? findIndex(parsePatterns, (pattern) => pattern.test(matchedString)) : ( 12897 // [TODO] -- I challenge you to fix the type 12898 findKey(parsePatterns, (pattern) => pattern.test(matchedString)) 12899 ); 12900 let value; 12901 value = args.valueCallback ? args.valueCallback(key) : key; 12902 value = options.valueCallback ? ( 12903 // [TODO] -- I challenge you to fix the type 12904 options.valueCallback(value) 12905 ) : value; 12906 const rest = string.slice(matchedString.length); 12907 return { value, rest }; 12908 }; 12909 } 12910 function findKey(object, predicate) { 12911 for (const key in object) { 12912 if (Object.prototype.hasOwnProperty.call(object, key) && predicate(object[key])) { 12913 return key; 12914 } 12915 } 12916 return void 0; 12917 } 12918 function findIndex(array, predicate) { 12919 for (let key = 0; key < array.length; key++) { 12920 if (predicate(array[key])) { 12921 return key; 12922 } 12923 } 12924 return void 0; 12925 } 12926 12927 // packages/dataviews/node_modules/date-fns/locale/_lib/buildMatchPatternFn.js 12928 function buildMatchPatternFn(args) { 12929 return (string, options = {}) => { 12930 const matchResult = string.match(args.matchPattern); 12931 if (!matchResult) return null; 12932 const matchedString = matchResult[0]; 12933 const parseResult = string.match(args.parsePattern); 12934 if (!parseResult) return null; 12935 let value = args.valueCallback ? args.valueCallback(parseResult[0]) : parseResult[0]; 12936 value = options.valueCallback ? options.valueCallback(value) : value; 12937 const rest = string.slice(matchedString.length); 12938 return { value, rest }; 12939 }; 12940 } 12941 12942 // packages/dataviews/node_modules/date-fns/locale/en-US/_lib/match.js 12943 var matchOrdinalNumberPattern = /^(\d+)(th|st|nd|rd)?/i; 12944 var parseOrdinalNumberPattern = /\d+/i; 12945 var matchEraPatterns = { 12946 narrow: /^(b|a)/i, 12947 abbreviated: /^(b\.?\s?c\.?|b\.?\s?c\.?\s?e\.?|a\.?\s?d\.?|c\.?\s?e\.?)/i, 12948 wide: /^(before christ|before common era|anno domini|common era)/i 12949 }; 12950 var parseEraPatterns = { 12951 any: [/^b/i, /^(a|c)/i] 12952 }; 12953 var matchQuarterPatterns = { 12954 narrow: /^[1234]/i, 12955 abbreviated: /^q[1234]/i, 12956 wide: /^[1234](th|st|nd|rd)? quarter/i 12957 }; 12958 var parseQuarterPatterns = { 12959 any: [/1/i, /2/i, /3/i, /4/i] 12960 }; 12961 var matchMonthPatterns = { 12962 narrow: /^[jfmasond]/i, 12963 abbreviated: /^(jan|feb|mar|apr|may|jun|jul|aug|sep|oct|nov|dec)/i, 12964 wide: /^(january|february|march|april|may|june|july|august|september|october|november|december)/i 12965 }; 12966 var parseMonthPatterns = { 12967 narrow: [ 12968 /^j/i, 12969 /^f/i, 12970 /^m/i, 12971 /^a/i, 12972 /^m/i, 12973 /^j/i, 12974 /^j/i, 12975 /^a/i, 12976 /^s/i, 12977 /^o/i, 12978 /^n/i, 12979 /^d/i 12980 ], 12981 any: [ 12982 /^ja/i, 12983 /^f/i, 12984 /^mar/i, 12985 /^ap/i, 12986 /^may/i, 12987 /^jun/i, 12988 /^jul/i, 12989 /^au/i, 12990 /^s/i, 12991 /^o/i, 12992 /^n/i, 12993 /^d/i 12994 ] 12995 }; 12996 var matchDayPatterns = { 12997 narrow: /^[smtwf]/i, 12998 short: /^(su|mo|tu|we|th|fr|sa)/i, 12999 abbreviated: /^(sun|mon|tue|wed|thu|fri|sat)/i, 13000 wide: /^(sunday|monday|tuesday|wednesday|thursday|friday|saturday)/i 13001 }; 13002 var parseDayPatterns = { 13003 narrow: [/^s/i, /^m/i, /^t/i, /^w/i, /^t/i, /^f/i, /^s/i], 13004 any: [/^su/i, /^m/i, /^tu/i, /^w/i, /^th/i, /^f/i, /^sa/i] 13005 }; 13006 var matchDayPeriodPatterns = { 13007 narrow: /^(a|p|mi|n|(in the|at) (morning|afternoon|evening|night))/i, 13008 any: /^([ap]\.?\s?m\.?|midnight|noon|(in the|at) (morning|afternoon|evening|night))/i 13009 }; 13010 var parseDayPeriodPatterns = { 13011 any: { 13012 am: /^a/i, 13013 pm: /^p/i, 13014 midnight: /^mi/i, 13015 noon: /^no/i, 13016 morning: /morning/i, 13017 afternoon: /afternoon/i, 13018 evening: /evening/i, 13019 night: /night/i 13020 } 13021 }; 13022 var match = { 13023 ordinalNumber: buildMatchPatternFn({ 13024 matchPattern: matchOrdinalNumberPattern, 13025 parsePattern: parseOrdinalNumberPattern, 13026 valueCallback: (value) => parseInt(value, 10) 13027 }), 13028 era: buildMatchFn({ 13029 matchPatterns: matchEraPatterns, 13030 defaultMatchWidth: "wide", 13031 parsePatterns: parseEraPatterns, 13032 defaultParseWidth: "any" 13033 }), 13034 quarter: buildMatchFn({ 13035 matchPatterns: matchQuarterPatterns, 13036 defaultMatchWidth: "wide", 13037 parsePatterns: parseQuarterPatterns, 13038 defaultParseWidth: "any", 13039 valueCallback: (index) => index + 1 13040 }), 13041 month: buildMatchFn({ 13042 matchPatterns: matchMonthPatterns, 13043 defaultMatchWidth: "wide", 13044 parsePatterns: parseMonthPatterns, 13045 defaultParseWidth: "any" 13046 }), 13047 day: buildMatchFn({ 13048 matchPatterns: matchDayPatterns, 13049 defaultMatchWidth: "wide", 13050 parsePatterns: parseDayPatterns, 13051 defaultParseWidth: "any" 13052 }), 13053 dayPeriod: buildMatchFn({ 13054 matchPatterns: matchDayPeriodPatterns, 13055 defaultMatchWidth: "any", 13056 parsePatterns: parseDayPeriodPatterns, 13057 defaultParseWidth: "any" 13058 }) 13059 }; 13060 13061 // packages/dataviews/node_modules/date-fns/locale/en-US.js 13062 var enUS = { 13063 code: "en-US", 13064 formatDistance, 13065 formatLong, 13066 formatRelative, 13067 localize, 13068 match, 13069 options: { 13070 weekStartsOn: 0, 13071 firstWeekContainsDate: 1 13072 } 13073 }; 13074 13075 // packages/dataviews/node_modules/date-fns/getDayOfYear.js 13076 function getDayOfYear(date, options) { 13077 const _date = toDate(date, options?.in); 13078 const diff = differenceInCalendarDays(_date, startOfYear(_date)); 13079 const dayOfYear = diff + 1; 13080 return dayOfYear; 13081 } 13082 13083 // packages/dataviews/node_modules/date-fns/getISOWeek.js 13084 function getISOWeek(date, options) { 13085 const _date = toDate(date, options?.in); 13086 const diff = +startOfISOWeek(_date) - +startOfISOWeekYear(_date); 13087 return Math.round(diff / millisecondsInWeek) + 1; 13088 } 13089 13090 // packages/dataviews/node_modules/date-fns/getWeekYear.js 13091 function getWeekYear(date, options) { 13092 const _date = toDate(date, options?.in); 13093 const year = _date.getFullYear(); 13094 const defaultOptions2 = getDefaultOptions(); 13095 const firstWeekContainsDate = options?.firstWeekContainsDate ?? options?.locale?.options?.firstWeekContainsDate ?? defaultOptions2.firstWeekContainsDate ?? defaultOptions2.locale?.options?.firstWeekContainsDate ?? 1; 13096 const firstWeekOfNextYear = constructFrom(options?.in || date, 0); 13097 firstWeekOfNextYear.setFullYear(year + 1, 0, firstWeekContainsDate); 13098 firstWeekOfNextYear.setHours(0, 0, 0, 0); 13099 const startOfNextYear = startOfWeek(firstWeekOfNextYear, options); 13100 const firstWeekOfThisYear = constructFrom(options?.in || date, 0); 13101 firstWeekOfThisYear.setFullYear(year, 0, firstWeekContainsDate); 13102 firstWeekOfThisYear.setHours(0, 0, 0, 0); 13103 const startOfThisYear = startOfWeek(firstWeekOfThisYear, options); 13104 if (+_date >= +startOfNextYear) { 13105 return year + 1; 13106 } else if (+_date >= +startOfThisYear) { 13107 return year; 13108 } else { 13109 return year - 1; 13110 } 13111 } 13112 13113 // packages/dataviews/node_modules/date-fns/startOfWeekYear.js 13114 function startOfWeekYear(date, options) { 13115 const defaultOptions2 = getDefaultOptions(); 13116 const firstWeekContainsDate = options?.firstWeekContainsDate ?? options?.locale?.options?.firstWeekContainsDate ?? defaultOptions2.firstWeekContainsDate ?? defaultOptions2.locale?.options?.firstWeekContainsDate ?? 1; 13117 const year = getWeekYear(date, options); 13118 const firstWeek = constructFrom(options?.in || date, 0); 13119 firstWeek.setFullYear(year, 0, firstWeekContainsDate); 13120 firstWeek.setHours(0, 0, 0, 0); 13121 const _date = startOfWeek(firstWeek, options); 13122 return _date; 13123 } 13124 13125 // packages/dataviews/node_modules/date-fns/getWeek.js 13126 function getWeek(date, options) { 13127 const _date = toDate(date, options?.in); 13128 const diff = +startOfWeek(_date, options) - +startOfWeekYear(_date, options); 13129 return Math.round(diff / millisecondsInWeek) + 1; 13130 } 13131 13132 // packages/dataviews/node_modules/date-fns/_lib/addLeadingZeros.js 13133 function addLeadingZeros(number, targetLength) { 13134 const sign = number < 0 ? "-" : ""; 13135 const output = Math.abs(number).toString().padStart(targetLength, "0"); 13136 return sign + output; 13137 } 13138 13139 // packages/dataviews/node_modules/date-fns/_lib/format/lightFormatters.js 13140 var lightFormatters = { 13141 // Year 13142 y(date, token) { 13143 const signedYear = date.getFullYear(); 13144 const year = signedYear > 0 ? signedYear : 1 - signedYear; 13145 return addLeadingZeros(token === "yy" ? year % 100 : year, token.length); 13146 }, 13147 // Month 13148 M(date, token) { 13149 const month = date.getMonth(); 13150 return token === "M" ? String(month + 1) : addLeadingZeros(month + 1, 2); 13151 }, 13152 // Day of the month 13153 d(date, token) { 13154 return addLeadingZeros(date.getDate(), token.length); 13155 }, 13156 // AM or PM 13157 a(date, token) { 13158 const dayPeriodEnumValue = date.getHours() / 12 >= 1 ? "pm" : "am"; 13159 switch (token) { 13160 case "a": 13161 case "aa": 13162 return dayPeriodEnumValue.toUpperCase(); 13163 case "aaa": 13164 return dayPeriodEnumValue; 13165 case "aaaaa": 13166 return dayPeriodEnumValue[0]; 13167 case "aaaa": 13168 default: 13169 return dayPeriodEnumValue === "am" ? "a.m." : "p.m."; 13170 } 13171 }, 13172 // Hour [1-12] 13173 h(date, token) { 13174 return addLeadingZeros(date.getHours() % 12 || 12, token.length); 13175 }, 13176 // Hour [0-23] 13177 H(date, token) { 13178 return addLeadingZeros(date.getHours(), token.length); 13179 }, 13180 // Minute 13181 m(date, token) { 13182 return addLeadingZeros(date.getMinutes(), token.length); 13183 }, 13184 // Second 13185 s(date, token) { 13186 return addLeadingZeros(date.getSeconds(), token.length); 13187 }, 13188 // Fraction of second 13189 S(date, token) { 13190 const numberOfDigits = token.length; 13191 const milliseconds = date.getMilliseconds(); 13192 const fractionalSeconds = Math.trunc( 13193 milliseconds * Math.pow(10, numberOfDigits - 3) 13194 ); 13195 return addLeadingZeros(fractionalSeconds, token.length); 13196 } 13197 }; 13198 13199 // packages/dataviews/node_modules/date-fns/_lib/format/formatters.js 13200 var dayPeriodEnum = { 13201 am: "am", 13202 pm: "pm", 13203 midnight: "midnight", 13204 noon: "noon", 13205 morning: "morning", 13206 afternoon: "afternoon", 13207 evening: "evening", 13208 night: "night" 13209 }; 13210 var formatters = { 13211 // Era 13212 G: function(date, token, localize2) { 13213 const era = date.getFullYear() > 0 ? 1 : 0; 13214 switch (token) { 13215 // AD, BC 13216 case "G": 13217 case "GG": 13218 case "GGG": 13219 return localize2.era(era, { width: "abbreviated" }); 13220 // A, B 13221 case "GGGGG": 13222 return localize2.era(era, { width: "narrow" }); 13223 // Anno Domini, Before Christ 13224 case "GGGG": 13225 default: 13226 return localize2.era(era, { width: "wide" }); 13227 } 13228 }, 13229 // Year 13230 y: function(date, token, localize2) { 13231 if (token === "yo") { 13232 const signedYear = date.getFullYear(); 13233 const year = signedYear > 0 ? signedYear : 1 - signedYear; 13234 return localize2.ordinalNumber(year, { unit: "year" }); 13235 } 13236 return lightFormatters.y(date, token); 13237 }, 13238 // Local week-numbering year 13239 Y: function(date, token, localize2, options) { 13240 const signedWeekYear = getWeekYear(date, options); 13241 const weekYear = signedWeekYear > 0 ? signedWeekYear : 1 - signedWeekYear; 13242 if (token === "YY") { 13243 const twoDigitYear = weekYear % 100; 13244 return addLeadingZeros(twoDigitYear, 2); 13245 } 13246 if (token === "Yo") { 13247 return localize2.ordinalNumber(weekYear, { unit: "year" }); 13248 } 13249 return addLeadingZeros(weekYear, token.length); 13250 }, 13251 // ISO week-numbering year 13252 R: function(date, token) { 13253 const isoWeekYear = getISOWeekYear(date); 13254 return addLeadingZeros(isoWeekYear, token.length); 13255 }, 13256 // Extended year. This is a single number designating the year of this calendar system. 13257 // The main difference between `y` and `u` localizers are B.C. years: 13258 // | Year | `y` | `u` | 13259 // |------|-----|-----| 13260 // | AC 1 | 1 | 1 | 13261 // | BC 1 | 1 | 0 | 13262 // | BC 2 | 2 | -1 | 13263 // Also `yy` always returns the last two digits of a year, 13264 // while `uu` pads single digit years to 2 characters and returns other years unchanged. 13265 u: function(date, token) { 13266 const year = date.getFullYear(); 13267 return addLeadingZeros(year, token.length); 13268 }, 13269 // Quarter 13270 Q: function(date, token, localize2) { 13271 const quarter = Math.ceil((date.getMonth() + 1) / 3); 13272 switch (token) { 13273 // 1, 2, 3, 4 13274 case "Q": 13275 return String(quarter); 13276 // 01, 02, 03, 04 13277 case "QQ": 13278 return addLeadingZeros(quarter, 2); 13279 // 1st, 2nd, 3rd, 4th 13280 case "Qo": 13281 return localize2.ordinalNumber(quarter, { unit: "quarter" }); 13282 // Q1, Q2, Q3, Q4 13283 case "QQQ": 13284 return localize2.quarter(quarter, { 13285 width: "abbreviated", 13286 context: "formatting" 13287 }); 13288 // 1, 2, 3, 4 (narrow quarter; could be not numerical) 13289 case "QQQQQ": 13290 return localize2.quarter(quarter, { 13291 width: "narrow", 13292 context: "formatting" 13293 }); 13294 // 1st quarter, 2nd quarter, ... 13295 case "QQQQ": 13296 default: 13297 return localize2.quarter(quarter, { 13298 width: "wide", 13299 context: "formatting" 13300 }); 13301 } 13302 }, 13303 // Stand-alone quarter 13304 q: function(date, token, localize2) { 13305 const quarter = Math.ceil((date.getMonth() + 1) / 3); 13306 switch (token) { 13307 // 1, 2, 3, 4 13308 case "q": 13309 return String(quarter); 13310 // 01, 02, 03, 04 13311 case "qq": 13312 return addLeadingZeros(quarter, 2); 13313 // 1st, 2nd, 3rd, 4th 13314 case "qo": 13315 return localize2.ordinalNumber(quarter, { unit: "quarter" }); 13316 // Q1, Q2, Q3, Q4 13317 case "qqq": 13318 return localize2.quarter(quarter, { 13319 width: "abbreviated", 13320 context: "standalone" 13321 }); 13322 // 1, 2, 3, 4 (narrow quarter; could be not numerical) 13323 case "qqqqq": 13324 return localize2.quarter(quarter, { 13325 width: "narrow", 13326 context: "standalone" 13327 }); 13328 // 1st quarter, 2nd quarter, ... 13329 case "qqqq": 13330 default: 13331 return localize2.quarter(quarter, { 13332 width: "wide", 13333 context: "standalone" 13334 }); 13335 } 13336 }, 13337 // Month 13338 M: function(date, token, localize2) { 13339 const month = date.getMonth(); 13340 switch (token) { 13341 case "M": 13342 case "MM": 13343 return lightFormatters.M(date, token); 13344 // 1st, 2nd, ..., 12th 13345 case "Mo": 13346 return localize2.ordinalNumber(month + 1, { unit: "month" }); 13347 // Jan, Feb, ..., Dec 13348 case "MMM": 13349 return localize2.month(month, { 13350 width: "abbreviated", 13351 context: "formatting" 13352 }); 13353 // J, F, ..., D 13354 case "MMMMM": 13355 return localize2.month(month, { 13356 width: "narrow", 13357 context: "formatting" 13358 }); 13359 // January, February, ..., December 13360 case "MMMM": 13361 default: 13362 return localize2.month(month, { width: "wide", context: "formatting" }); 13363 } 13364 }, 13365 // Stand-alone month 13366 L: function(date, token, localize2) { 13367 const month = date.getMonth(); 13368 switch (token) { 13369 // 1, 2, ..., 12 13370 case "L": 13371 return String(month + 1); 13372 // 01, 02, ..., 12 13373 case "LL": 13374 return addLeadingZeros(month + 1, 2); 13375 // 1st, 2nd, ..., 12th 13376 case "Lo": 13377 return localize2.ordinalNumber(month + 1, { unit: "month" }); 13378 // Jan, Feb, ..., Dec 13379 case "LLL": 13380 return localize2.month(month, { 13381 width: "abbreviated", 13382 context: "standalone" 13383 }); 13384 // J, F, ..., D 13385 case "LLLLL": 13386 return localize2.month(month, { 13387 width: "narrow", 13388 context: "standalone" 13389 }); 13390 // January, February, ..., December 13391 case "LLLL": 13392 default: 13393 return localize2.month(month, { width: "wide", context: "standalone" }); 13394 } 13395 }, 13396 // Local week of year 13397 w: function(date, token, localize2, options) { 13398 const week = getWeek(date, options); 13399 if (token === "wo") { 13400 return localize2.ordinalNumber(week, { unit: "week" }); 13401 } 13402 return addLeadingZeros(week, token.length); 13403 }, 13404 // ISO week of year 13405 I: function(date, token, localize2) { 13406 const isoWeek = getISOWeek(date); 13407 if (token === "Io") { 13408 return localize2.ordinalNumber(isoWeek, { unit: "week" }); 13409 } 13410 return addLeadingZeros(isoWeek, token.length); 13411 }, 13412 // Day of the month 13413 d: function(date, token, localize2) { 13414 if (token === "do") { 13415 return localize2.ordinalNumber(date.getDate(), { unit: "date" }); 13416 } 13417 return lightFormatters.d(date, token); 13418 }, 13419 // Day of year 13420 D: function(date, token, localize2) { 13421 const dayOfYear = getDayOfYear(date); 13422 if (token === "Do") { 13423 return localize2.ordinalNumber(dayOfYear, { unit: "dayOfYear" }); 13424 } 13425 return addLeadingZeros(dayOfYear, token.length); 13426 }, 13427 // Day of week 13428 E: function(date, token, localize2) { 13429 const dayOfWeek = date.getDay(); 13430 switch (token) { 13431 // Tue 13432 case "E": 13433 case "EE": 13434 case "EEE": 13435 return localize2.day(dayOfWeek, { 13436 width: "abbreviated", 13437 context: "formatting" 13438 }); 13439 // T 13440 case "EEEEE": 13441 return localize2.day(dayOfWeek, { 13442 width: "narrow", 13443 context: "formatting" 13444 }); 13445 // Tu 13446 case "EEEEEE": 13447 return localize2.day(dayOfWeek, { 13448 width: "short", 13449 context: "formatting" 13450 }); 13451 // Tuesday 13452 case "EEEE": 13453 default: 13454 return localize2.day(dayOfWeek, { 13455 width: "wide", 13456 context: "formatting" 13457 }); 13458 } 13459 }, 13460 // Local day of week 13461 e: function(date, token, localize2, options) { 13462 const dayOfWeek = date.getDay(); 13463 const localDayOfWeek = (dayOfWeek - options.weekStartsOn + 8) % 7 || 7; 13464 switch (token) { 13465 // Numerical value (Nth day of week with current locale or weekStartsOn) 13466 case "e": 13467 return String(localDayOfWeek); 13468 // Padded numerical value 13469 case "ee": 13470 return addLeadingZeros(localDayOfWeek, 2); 13471 // 1st, 2nd, ..., 7th 13472 case "eo": 13473 return localize2.ordinalNumber(localDayOfWeek, { unit: "day" }); 13474 case "eee": 13475 return localize2.day(dayOfWeek, { 13476 width: "abbreviated", 13477 context: "formatting" 13478 }); 13479 // T 13480 case "eeeee": 13481 return localize2.day(dayOfWeek, { 13482 width: "narrow", 13483 context: "formatting" 13484 }); 13485 // Tu 13486 case "eeeeee": 13487 return localize2.day(dayOfWeek, { 13488 width: "short", 13489 context: "formatting" 13490 }); 13491 // Tuesday 13492 case "eeee": 13493 default: 13494 return localize2.day(dayOfWeek, { 13495 width: "wide", 13496 context: "formatting" 13497 }); 13498 } 13499 }, 13500 // Stand-alone local day of week 13501 c: function(date, token, localize2, options) { 13502 const dayOfWeek = date.getDay(); 13503 const localDayOfWeek = (dayOfWeek - options.weekStartsOn + 8) % 7 || 7; 13504 switch (token) { 13505 // Numerical value (same as in `e`) 13506 case "c": 13507 return String(localDayOfWeek); 13508 // Padded numerical value 13509 case "cc": 13510 return addLeadingZeros(localDayOfWeek, token.length); 13511 // 1st, 2nd, ..., 7th 13512 case "co": 13513 return localize2.ordinalNumber(localDayOfWeek, { unit: "day" }); 13514 case "ccc": 13515 return localize2.day(dayOfWeek, { 13516 width: "abbreviated", 13517 context: "standalone" 13518 }); 13519 // T 13520 case "ccccc": 13521 return localize2.day(dayOfWeek, { 13522 width: "narrow", 13523 context: "standalone" 13524 }); 13525 // Tu 13526 case "cccccc": 13527 return localize2.day(dayOfWeek, { 13528 width: "short", 13529 context: "standalone" 13530 }); 13531 // Tuesday 13532 case "cccc": 13533 default: 13534 return localize2.day(dayOfWeek, { 13535 width: "wide", 13536 context: "standalone" 13537 }); 13538 } 13539 }, 13540 // ISO day of week 13541 i: function(date, token, localize2) { 13542 const dayOfWeek = date.getDay(); 13543 const isoDayOfWeek = dayOfWeek === 0 ? 7 : dayOfWeek; 13544 switch (token) { 13545 // 2 13546 case "i": 13547 return String(isoDayOfWeek); 13548 // 02 13549 case "ii": 13550 return addLeadingZeros(isoDayOfWeek, token.length); 13551 // 2nd 13552 case "io": 13553 return localize2.ordinalNumber(isoDayOfWeek, { unit: "day" }); 13554 // Tue 13555 case "iii": 13556 return localize2.day(dayOfWeek, { 13557 width: "abbreviated", 13558 context: "formatting" 13559 }); 13560 // T 13561 case "iiiii": 13562 return localize2.day(dayOfWeek, { 13563 width: "narrow", 13564 context: "formatting" 13565 }); 13566 // Tu 13567 case "iiiiii": 13568 return localize2.day(dayOfWeek, { 13569 width: "short", 13570 context: "formatting" 13571 }); 13572 // Tuesday 13573 case "iiii": 13574 default: 13575 return localize2.day(dayOfWeek, { 13576 width: "wide", 13577 context: "formatting" 13578 }); 13579 } 13580 }, 13581 // AM or PM 13582 a: function(date, token, localize2) { 13583 const hours = date.getHours(); 13584 const dayPeriodEnumValue = hours / 12 >= 1 ? "pm" : "am"; 13585 switch (token) { 13586 case "a": 13587 case "aa": 13588 return localize2.dayPeriod(dayPeriodEnumValue, { 13589 width: "abbreviated", 13590 context: "formatting" 13591 }); 13592 case "aaa": 13593 return localize2.dayPeriod(dayPeriodEnumValue, { 13594 width: "abbreviated", 13595 context: "formatting" 13596 }).toLowerCase(); 13597 case "aaaaa": 13598 return localize2.dayPeriod(dayPeriodEnumValue, { 13599 width: "narrow", 13600 context: "formatting" 13601 }); 13602 case "aaaa": 13603 default: 13604 return localize2.dayPeriod(dayPeriodEnumValue, { 13605 width: "wide", 13606 context: "formatting" 13607 }); 13608 } 13609 }, 13610 // AM, PM, midnight, noon 13611 b: function(date, token, localize2) { 13612 const hours = date.getHours(); 13613 let dayPeriodEnumValue; 13614 if (hours === 12) { 13615 dayPeriodEnumValue = dayPeriodEnum.noon; 13616 } else if (hours === 0) { 13617 dayPeriodEnumValue = dayPeriodEnum.midnight; 13618 } else { 13619 dayPeriodEnumValue = hours / 12 >= 1 ? "pm" : "am"; 13620 } 13621 switch (token) { 13622 case "b": 13623 case "bb": 13624 return localize2.dayPeriod(dayPeriodEnumValue, { 13625 width: "abbreviated", 13626 context: "formatting" 13627 }); 13628 case "bbb": 13629 return localize2.dayPeriod(dayPeriodEnumValue, { 13630 width: "abbreviated", 13631 context: "formatting" 13632 }).toLowerCase(); 13633 case "bbbbb": 13634 return localize2.dayPeriod(dayPeriodEnumValue, { 13635 width: "narrow", 13636 context: "formatting" 13637 }); 13638 case "bbbb": 13639 default: 13640 return localize2.dayPeriod(dayPeriodEnumValue, { 13641 width: "wide", 13642 context: "formatting" 13643 }); 13644 } 13645 }, 13646 // in the morning, in the afternoon, in the evening, at night 13647 B: function(date, token, localize2) { 13648 const hours = date.getHours(); 13649 let dayPeriodEnumValue; 13650 if (hours >= 17) { 13651 dayPeriodEnumValue = dayPeriodEnum.evening; 13652 } else if (hours >= 12) { 13653 dayPeriodEnumValue = dayPeriodEnum.afternoon; 13654 } else if (hours >= 4) { 13655 dayPeriodEnumValue = dayPeriodEnum.morning; 13656 } else { 13657 dayPeriodEnumValue = dayPeriodEnum.night; 13658 } 13659 switch (token) { 13660 case "B": 13661 case "BB": 13662 case "BBB": 13663 return localize2.dayPeriod(dayPeriodEnumValue, { 13664 width: "abbreviated", 13665 context: "formatting" 13666 }); 13667 case "BBBBB": 13668 return localize2.dayPeriod(dayPeriodEnumValue, { 13669 width: "narrow", 13670 context: "formatting" 13671 }); 13672 case "BBBB": 13673 default: 13674 return localize2.dayPeriod(dayPeriodEnumValue, { 13675 width: "wide", 13676 context: "formatting" 13677 }); 13678 } 13679 }, 13680 // Hour [1-12] 13681 h: function(date, token, localize2) { 13682 if (token === "ho") { 13683 let hours = date.getHours() % 12; 13684 if (hours === 0) hours = 12; 13685 return localize2.ordinalNumber(hours, { unit: "hour" }); 13686 } 13687 return lightFormatters.h(date, token); 13688 }, 13689 // Hour [0-23] 13690 H: function(date, token, localize2) { 13691 if (token === "Ho") { 13692 return localize2.ordinalNumber(date.getHours(), { unit: "hour" }); 13693 } 13694 return lightFormatters.H(date, token); 13695 }, 13696 // Hour [0-11] 13697 K: function(date, token, localize2) { 13698 const hours = date.getHours() % 12; 13699 if (token === "Ko") { 13700 return localize2.ordinalNumber(hours, { unit: "hour" }); 13701 } 13702 return addLeadingZeros(hours, token.length); 13703 }, 13704 // Hour [1-24] 13705 k: function(date, token, localize2) { 13706 let hours = date.getHours(); 13707 if (hours === 0) hours = 24; 13708 if (token === "ko") { 13709 return localize2.ordinalNumber(hours, { unit: "hour" }); 13710 } 13711 return addLeadingZeros(hours, token.length); 13712 }, 13713 // Minute 13714 m: function(date, token, localize2) { 13715 if (token === "mo") { 13716 return localize2.ordinalNumber(date.getMinutes(), { unit: "minute" }); 13717 } 13718 return lightFormatters.m(date, token); 13719 }, 13720 // Second 13721 s: function(date, token, localize2) { 13722 if (token === "so") { 13723 return localize2.ordinalNumber(date.getSeconds(), { unit: "second" }); 13724 } 13725 return lightFormatters.s(date, token); 13726 }, 13727 // Fraction of second 13728 S: function(date, token) { 13729 return lightFormatters.S(date, token); 13730 }, 13731 // Timezone (ISO-8601. If offset is 0, output is always `'Z'`) 13732 X: function(date, token, _localize) { 13733 const timezoneOffset = date.getTimezoneOffset(); 13734 if (timezoneOffset === 0) { 13735 return "Z"; 13736 } 13737 switch (token) { 13738 // Hours and optional minutes 13739 case "X": 13740 return formatTimezoneWithOptionalMinutes(timezoneOffset); 13741 // Hours, minutes and optional seconds without `:` delimiter 13742 // Note: neither ISO-8601 nor JavaScript supports seconds in timezone offsets 13743 // so this token always has the same output as `XX` 13744 case "XXXX": 13745 case "XX": 13746 return formatTimezone(timezoneOffset); 13747 // Hours, minutes and optional seconds with `:` delimiter 13748 // Note: neither ISO-8601 nor JavaScript supports seconds in timezone offsets 13749 // so this token always has the same output as `XXX` 13750 case "XXXXX": 13751 case "XXX": 13752 // Hours and minutes with `:` delimiter 13753 default: 13754 return formatTimezone(timezoneOffset, ":"); 13755 } 13756 }, 13757 // Timezone (ISO-8601. If offset is 0, output is `'+00:00'` or equivalent) 13758 x: function(date, token, _localize) { 13759 const timezoneOffset = date.getTimezoneOffset(); 13760 switch (token) { 13761 // Hours and optional minutes 13762 case "x": 13763 return formatTimezoneWithOptionalMinutes(timezoneOffset); 13764 // Hours, minutes and optional seconds without `:` delimiter 13765 // Note: neither ISO-8601 nor JavaScript supports seconds in timezone offsets 13766 // so this token always has the same output as `xx` 13767 case "xxxx": 13768 case "xx": 13769 return formatTimezone(timezoneOffset); 13770 // Hours, minutes and optional seconds with `:` delimiter 13771 // Note: neither ISO-8601 nor JavaScript supports seconds in timezone offsets 13772 // so this token always has the same output as `xxx` 13773 case "xxxxx": 13774 case "xxx": 13775 // Hours and minutes with `:` delimiter 13776 default: 13777 return formatTimezone(timezoneOffset, ":"); 13778 } 13779 }, 13780 // Timezone (GMT) 13781 O: function(date, token, _localize) { 13782 const timezoneOffset = date.getTimezoneOffset(); 13783 switch (token) { 13784 // Short 13785 case "O": 13786 case "OO": 13787 case "OOO": 13788 return "GMT" + formatTimezoneShort(timezoneOffset, ":"); 13789 // Long 13790 case "OOOO": 13791 default: 13792 return "GMT" + formatTimezone(timezoneOffset, ":"); 13793 } 13794 }, 13795 // Timezone (specific non-location) 13796 z: function(date, token, _localize) { 13797 const timezoneOffset = date.getTimezoneOffset(); 13798 switch (token) { 13799 // Short 13800 case "z": 13801 case "zz": 13802 case "zzz": 13803 return "GMT" + formatTimezoneShort(timezoneOffset, ":"); 13804 // Long 13805 case "zzzz": 13806 default: 13807 return "GMT" + formatTimezone(timezoneOffset, ":"); 13808 } 13809 }, 13810 // Seconds timestamp 13811 t: function(date, token, _localize) { 13812 const timestamp = Math.trunc(+date / 1e3); 13813 return addLeadingZeros(timestamp, token.length); 13814 }, 13815 // Milliseconds timestamp 13816 T: function(date, token, _localize) { 13817 return addLeadingZeros(+date, token.length); 13818 } 13819 }; 13820 function formatTimezoneShort(offset, delimiter = "") { 13821 const sign = offset > 0 ? "-" : "+"; 13822 const absOffset = Math.abs(offset); 13823 const hours = Math.trunc(absOffset / 60); 13824 const minutes = absOffset % 60; 13825 if (minutes === 0) { 13826 return sign + String(hours); 13827 } 13828 return sign + String(hours) + delimiter + addLeadingZeros(minutes, 2); 13829 } 13830 function formatTimezoneWithOptionalMinutes(offset, delimiter) { 13831 if (offset % 60 === 0) { 13832 const sign = offset > 0 ? "-" : "+"; 13833 return sign + addLeadingZeros(Math.abs(offset) / 60, 2); 13834 } 13835 return formatTimezone(offset, delimiter); 13836 } 13837 function formatTimezone(offset, delimiter = "") { 13838 const sign = offset > 0 ? "-" : "+"; 13839 const absOffset = Math.abs(offset); 13840 const hours = addLeadingZeros(Math.trunc(absOffset / 60), 2); 13841 const minutes = addLeadingZeros(absOffset % 60, 2); 13842 return sign + hours + delimiter + minutes; 13843 } 13844 13845 // packages/dataviews/node_modules/date-fns/_lib/format/longFormatters.js 13846 var dateLongFormatter = (pattern, formatLong2) => { 13847 switch (pattern) { 13848 case "P": 13849 return formatLong2.date({ width: "short" }); 13850 case "PP": 13851 return formatLong2.date({ width: "medium" }); 13852 case "PPP": 13853 return formatLong2.date({ width: "long" }); 13854 case "PPPP": 13855 default: 13856 return formatLong2.date({ width: "full" }); 13857 } 13858 }; 13859 var timeLongFormatter = (pattern, formatLong2) => { 13860 switch (pattern) { 13861 case "p": 13862 return formatLong2.time({ width: "short" }); 13863 case "pp": 13864 return formatLong2.time({ width: "medium" }); 13865 case "ppp": 13866 return formatLong2.time({ width: "long" }); 13867 case "pppp": 13868 default: 13869 return formatLong2.time({ width: "full" }); 13870 } 13871 }; 13872 var dateTimeLongFormatter = (pattern, formatLong2) => { 13873 const matchResult = pattern.match(/(P+)(p+)?/) || []; 13874 const datePattern = matchResult[1]; 13875 const timePattern = matchResult[2]; 13876 if (!timePattern) { 13877 return dateLongFormatter(pattern, formatLong2); 13878 } 13879 let dateTimeFormat; 13880 switch (datePattern) { 13881 case "P": 13882 dateTimeFormat = formatLong2.dateTime({ width: "short" }); 13883 break; 13884 case "PP": 13885 dateTimeFormat = formatLong2.dateTime({ width: "medium" }); 13886 break; 13887 case "PPP": 13888 dateTimeFormat = formatLong2.dateTime({ width: "long" }); 13889 break; 13890 case "PPPP": 13891 default: 13892 dateTimeFormat = formatLong2.dateTime({ width: "full" }); 13893 break; 13894 } 13895 return dateTimeFormat.replace("{{date}}", dateLongFormatter(datePattern, formatLong2)).replace("{{time}}", timeLongFormatter(timePattern, formatLong2)); 13896 }; 13897 var longFormatters = { 13898 p: timeLongFormatter, 13899 P: dateTimeLongFormatter 13900 }; 13901 13902 // packages/dataviews/node_modules/date-fns/_lib/protectedTokens.js 13903 var dayOfYearTokenRE = /^D+$/; 13904 var weekYearTokenRE = /^Y+$/; 13905 var throwTokens = ["D", "DD", "YY", "YYYY"]; 13906 function isProtectedDayOfYearToken(token) { 13907 return dayOfYearTokenRE.test(token); 13908 } 13909 function isProtectedWeekYearToken(token) { 13910 return weekYearTokenRE.test(token); 13911 } 13912 function warnOrThrowProtectedError(token, format6, input) { 13913 const _message = message(token, format6, input); 13914 console.warn(_message); 13915 if (throwTokens.includes(token)) throw new RangeError(_message); 13916 } 13917 function message(token, format6, input) { 13918 const subject = token[0] === "Y" ? "years" : "days of the month"; 13919 return `Use \`$token.toLowerCase()}\` instead of \`$token}\` (in \`$format6}\`) for formatting $subject} to the input \`$input}\`; see: https://github.com/date-fns/date-fns/blob/master/docs/unicodeTokens.md`; 13920 } 13921 13922 // packages/dataviews/node_modules/date-fns/format.js 13923 var formattingTokensRegExp = /[yYQqMLwIdDecihHKkms]o|(\w)\1*|''|'(''|[^'])+('|$)|./g; 13924 var longFormattingTokensRegExp = /P+p+|P+|p+|''|'(''|[^'])+('|$)|./g; 13925 var escapedStringRegExp = /^'([^]*?)'?$/; 13926 var doubleQuoteRegExp = /''/g; 13927 var unescapedLatinCharacterRegExp = /[a-zA-Z]/; 13928 function format(date, formatStr, options) { 13929 const defaultOptions2 = getDefaultOptions(); 13930 const locale = options?.locale ?? defaultOptions2.locale ?? enUS; 13931 const firstWeekContainsDate = options?.firstWeekContainsDate ?? options?.locale?.options?.firstWeekContainsDate ?? defaultOptions2.firstWeekContainsDate ?? defaultOptions2.locale?.options?.firstWeekContainsDate ?? 1; 13932 const weekStartsOn = options?.weekStartsOn ?? options?.locale?.options?.weekStartsOn ?? defaultOptions2.weekStartsOn ?? defaultOptions2.locale?.options?.weekStartsOn ?? 0; 13933 const originalDate = toDate(date, options?.in); 13934 if (!isValid(originalDate)) { 13935 throw new RangeError("Invalid time value"); 13936 } 13937 let parts = formatStr.match(longFormattingTokensRegExp).map((substring) => { 13938 const firstCharacter = substring[0]; 13939 if (firstCharacter === "p" || firstCharacter === "P") { 13940 const longFormatter = longFormatters[firstCharacter]; 13941 return longFormatter(substring, locale.formatLong); 13942 } 13943 return substring; 13944 }).join("").match(formattingTokensRegExp).map((substring) => { 13945 if (substring === "''") { 13946 return { isToken: false, value: "'" }; 13947 } 13948 const firstCharacter = substring[0]; 13949 if (firstCharacter === "'") { 13950 return { isToken: false, value: cleanEscapedString(substring) }; 13951 } 13952 if (formatters[firstCharacter]) { 13953 return { isToken: true, value: substring }; 13954 } 13955 if (firstCharacter.match(unescapedLatinCharacterRegExp)) { 13956 throw new RangeError( 13957 "Format string contains an unescaped latin alphabet character `" + firstCharacter + "`" 13958 ); 13959 } 13960 return { isToken: false, value: substring }; 13961 }); 13962 if (locale.localize.preprocessor) { 13963 parts = locale.localize.preprocessor(originalDate, parts); 13964 } 13965 const formatterOptions = { 13966 firstWeekContainsDate, 13967 weekStartsOn, 13968 locale 13969 }; 13970 return parts.map((part) => { 13971 if (!part.isToken) return part.value; 13972 const token = part.value; 13973 if (!options?.useAdditionalWeekYearTokens && isProtectedWeekYearToken(token) || !options?.useAdditionalDayOfYearTokens && isProtectedDayOfYearToken(token)) { 13974 warnOrThrowProtectedError(token, formatStr, String(date)); 13975 } 13976 const formatter = formatters[token[0]]; 13977 return formatter(originalDate, token, locale.localize, formatterOptions); 13978 }).join(""); 13979 } 13980 function cleanEscapedString(input) { 13981 const matched = input.match(escapedStringRegExp); 13982 if (!matched) { 13983 return input; 13984 } 13985 return matched[1].replace(doubleQuoteRegExp, "'"); 13986 } 13987 13988 // packages/dataviews/node_modules/date-fns/subDays.js 13989 function subDays(date, amount, options) { 13990 return addDays(date, -amount, options); 13991 } 13992 13993 // packages/dataviews/node_modules/date-fns/subMonths.js 13994 function subMonths(date, amount, options) { 13995 return addMonths(date, -amount, options); 13996 } 13997 13998 // packages/dataviews/node_modules/date-fns/subWeeks.js 13999 function subWeeks(date, amount, options) { 14000 return addWeeks(date, -amount, options); 14001 } 14002 14003 // packages/dataviews/node_modules/date-fns/subYears.js 14004 function subYears(date, amount, options) { 14005 return addYears(date, -amount, options); 14006 } 14007 14008 // packages/dataviews/build-module/utils/operators.mjs 14009 var import_i18n24 = __toESM(require_i18n(), 1); 14010 var import_element45 = __toESM(require_element(), 1); 14011 var import_date = __toESM(require_date(), 1); 14012 var import_jsx_runtime76 = __toESM(require_jsx_runtime(), 1); 14013 var filterTextWrappers = { 14014 Name: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("span", { className: "dataviews-filters__summary-filter-text-name" }), 14015 Value: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("span", { className: "dataviews-filters__summary-filter-text-value" }) 14016 }; 14017 function getRelativeDate(value, unit) { 14018 switch (unit) { 14019 case "days": 14020 return subDays(/* @__PURE__ */ new Date(), value); 14021 case "weeks": 14022 return subWeeks(/* @__PURE__ */ new Date(), value); 14023 case "months": 14024 return subMonths(/* @__PURE__ */ new Date(), value); 14025 case "years": 14026 return subYears(/* @__PURE__ */ new Date(), value); 14027 default: 14028 return /* @__PURE__ */ new Date(); 14029 } 14030 } 14031 var isNoneOperatorDefinition = { 14032 /* translators: DataViews operator name */ 14033 label: (0, import_i18n24.__)("Is none of"), 14034 filterText: (filter, activeElements) => (0, import_element45.createInterpolateElement)( 14035 (0, import_i18n24.sprintf)( 14036 /* translators: 1: Filter name (e.g. "Author"). 2: Filter value (e.g. "Admin"): "Author is none of: Admin, Editor". */ 14037 (0, import_i18n24.__)("<Name>%1$s is none of: </Name><Value>%2$s</Value>"), 14038 filter.name, 14039 activeElements.map((element) => element.label).join(", ") 14040 ), 14041 filterTextWrappers 14042 ), 14043 filter: ((item, field, filterValue) => { 14044 if (!filterValue?.length) { 14045 return true; 14046 } 14047 const fieldValue = field.getValue({ item }); 14048 if (Array.isArray(fieldValue)) { 14049 return !filterValue.some( 14050 (fv) => fieldValue.includes(fv) 14051 ); 14052 } else if (typeof fieldValue === "string") { 14053 return !filterValue.includes(fieldValue); 14054 } 14055 return false; 14056 }), 14057 selection: "multi" 14058 }; 14059 var OPERATORS = [ 14060 { 14061 name: OPERATOR_IS_ANY, 14062 /* translators: DataViews operator name */ 14063 label: (0, import_i18n24.__)("Includes"), 14064 filterText: (filter, activeElements) => (0, import_element45.createInterpolateElement)( 14065 (0, import_i18n24.sprintf)( 14066 /* translators: 1: Filter name (e.g. "Author"). 2: Filter value (e.g. "Admin"): "Author is any: Admin, Editor". */ 14067 (0, import_i18n24.__)("<Name>%1$s includes: </Name><Value>%2$s</Value>"), 14068 filter.name, 14069 activeElements.map((element) => element.label).join(", ") 14070 ), 14071 filterTextWrappers 14072 ), 14073 filter(item, field, filterValue) { 14074 if (!filterValue?.length) { 14075 return true; 14076 } 14077 const fieldValue = field.getValue({ item }); 14078 if (Array.isArray(fieldValue)) { 14079 return filterValue.some( 14080 (fv) => fieldValue.includes(fv) 14081 ); 14082 } else if (typeof fieldValue === "string") { 14083 return filterValue.includes(fieldValue); 14084 } 14085 return false; 14086 }, 14087 selection: "multi" 14088 }, 14089 { 14090 name: OPERATOR_IS_NONE, 14091 ...isNoneOperatorDefinition 14092 }, 14093 { 14094 name: OPERATOR_IS_ALL, 14095 /* translators: DataViews operator name */ 14096 label: (0, import_i18n24.__)("Includes all"), 14097 filterText: (filter, activeElements) => (0, import_element45.createInterpolateElement)( 14098 (0, import_i18n24.sprintf)( 14099 /* translators: 1: Filter name (e.g. "Author"). 2: Filter value (e.g. "Admin"): "Author includes all: Admin, Editor". */ 14100 (0, import_i18n24.__)("<Name>%1$s includes all: </Name><Value>%2$s</Value>"), 14101 filter.name, 14102 activeElements.map((element) => element.label).join(", ") 14103 ), 14104 filterTextWrappers 14105 ), 14106 filter(item, field, filterValue) { 14107 if (!filterValue?.length) { 14108 return true; 14109 } 14110 return filterValue.every((value) => { 14111 return field.getValue({ item })?.includes(value); 14112 }); 14113 }, 14114 selection: "multi" 14115 }, 14116 { 14117 name: OPERATOR_IS_NOT_ALL, 14118 ...isNoneOperatorDefinition 14119 }, 14120 { 14121 name: OPERATOR_BETWEEN, 14122 /* translators: DataViews operator name */ 14123 label: (0, import_i18n24.__)("Between (inc)"), 14124 filterText: (filter, activeElements) => (0, import_element45.createInterpolateElement)( 14125 (0, import_i18n24.sprintf)( 14126 /* translators: 1: Filter name (e.g. "Item count"). 2: Filter value min. 3: Filter value max. e.g.: "Item count between (inc): 10 and 180". */ 14127 (0, import_i18n24.__)( 14128 "<Name>%1$s between (inc): </Name><Value>%2$s and %3$s</Value>" 14129 ), 14130 filter.name, 14131 activeElements[0].label[0], 14132 activeElements[0].label[1] 14133 ), 14134 filterTextWrappers 14135 ), 14136 filter(item, field, filterValue) { 14137 if (!Array.isArray(filterValue) || filterValue.length !== 2 || filterValue[0] === void 0 || filterValue[1] === void 0) { 14138 return true; 14139 } 14140 const fieldValue = field.getValue({ item }); 14141 if (typeof fieldValue === "number" || fieldValue instanceof Date || typeof fieldValue === "string") { 14142 return fieldValue >= filterValue[0] && fieldValue <= filterValue[1]; 14143 } 14144 return false; 14145 }, 14146 selection: "custom" 14147 }, 14148 { 14149 name: OPERATOR_IN_THE_PAST, 14150 /* translators: DataViews operator name */ 14151 label: (0, import_i18n24.__)("In the past"), 14152 filterText: (filter, activeElements) => (0, import_element45.createInterpolateElement)( 14153 (0, import_i18n24.sprintf)( 14154 /* translators: 1: Filter name (e.g. "Date"). 2: Filter value (e.g. "7 days"): "Date is in the past: 7 days". */ 14155 (0, import_i18n24.__)( 14156 "<Name>%1$s is in the past: </Name><Value>%2$s</Value>" 14157 ), 14158 filter.name, 14159 `$activeElements[0].value.value} $activeElements[0].value.unit}` 14160 ), 14161 filterTextWrappers 14162 ), 14163 filter(item, field, filterValue) { 14164 if (filterValue?.value === void 0 || filterValue?.unit === void 0) { 14165 return true; 14166 } 14167 const targetDate = getRelativeDate( 14168 filterValue.value, 14169 filterValue.unit 14170 ); 14171 const fieldValue = (0, import_date.getDate)(field.getValue({ item })); 14172 return fieldValue >= targetDate && fieldValue <= /* @__PURE__ */ new Date(); 14173 }, 14174 selection: "custom" 14175 }, 14176 { 14177 name: OPERATOR_OVER, 14178 /* translators: DataViews operator name */ 14179 label: (0, import_i18n24.__)("Over"), 14180 filterText: (filter, activeElements) => (0, import_element45.createInterpolateElement)( 14181 (0, import_i18n24.sprintf)( 14182 /* translators: 1: Filter name (e.g. "Date"). 2: Filter value (e.g. "7 days"): "Date is over: 7 days". */ 14183 (0, import_i18n24.__)("<Name>%1$s is over: </Name><Value>%2$s</Value>"), 14184 filter.name, 14185 `$activeElements[0].value.value} $activeElements[0].value.unit}` 14186 ), 14187 filterTextWrappers 14188 ), 14189 filter(item, field, filterValue) { 14190 if (filterValue?.value === void 0 || filterValue?.unit === void 0) { 14191 return true; 14192 } 14193 const targetDate = getRelativeDate( 14194 filterValue.value, 14195 filterValue.unit 14196 ); 14197 const fieldValue = (0, import_date.getDate)(field.getValue({ item })); 14198 return fieldValue < targetDate; 14199 }, 14200 selection: "custom" 14201 }, 14202 { 14203 name: OPERATOR_IS, 14204 /* translators: DataViews operator name */ 14205 label: (0, import_i18n24.__)("Is"), 14206 filterText: (filter, activeElements) => (0, import_element45.createInterpolateElement)( 14207 (0, import_i18n24.sprintf)( 14208 /* translators: 1: Filter name (e.g. "Author"). 2: Filter value (e.g. "Admin"): "Author is: Admin". */ 14209 (0, import_i18n24.__)("<Name>%1$s is: </Name><Value>%2$s</Value>"), 14210 filter.name, 14211 activeElements[0].label 14212 ), 14213 filterTextWrappers 14214 ), 14215 filter(item, field, filterValue) { 14216 return filterValue === field.getValue({ item }) || filterValue === void 0; 14217 }, 14218 selection: "single" 14219 }, 14220 { 14221 name: OPERATOR_IS_NOT, 14222 /* translators: DataViews operator name */ 14223 label: (0, import_i18n24.__)("Is not"), 14224 filterText: (filter, activeElements) => (0, import_element45.createInterpolateElement)( 14225 (0, import_i18n24.sprintf)( 14226 /* translators: 1: Filter name (e.g. "Author"). 2: Filter value (e.g. "Admin"): "Author is not: Admin". */ 14227 (0, import_i18n24.__)("<Name>%1$s is not: </Name><Value>%2$s</Value>"), 14228 filter.name, 14229 activeElements[0].label 14230 ), 14231 filterTextWrappers 14232 ), 14233 filter(item, field, filterValue) { 14234 return filterValue !== field.getValue({ item }); 14235 }, 14236 selection: "single" 14237 }, 14238 { 14239 name: OPERATOR_LESS_THAN, 14240 /* translators: DataViews operator name */ 14241 label: (0, import_i18n24.__)("Less than"), 14242 filterText: (filter, activeElements) => (0, import_element45.createInterpolateElement)( 14243 (0, import_i18n24.sprintf)( 14244 /* translators: 1: Filter name (e.g. "Count"). 2: Filter value (e.g. "10"): "Count is less than: 10". */ 14245 (0, import_i18n24.__)("<Name>%1$s is less than: </Name><Value>%2$s</Value>"), 14246 filter.name, 14247 activeElements[0].label 14248 ), 14249 filterTextWrappers 14250 ), 14251 filter(item, field, filterValue) { 14252 if (filterValue === void 0) { 14253 return true; 14254 } 14255 const fieldValue = field.getValue({ item }); 14256 return fieldValue < filterValue; 14257 }, 14258 selection: "single" 14259 }, 14260 { 14261 name: OPERATOR_GREATER_THAN, 14262 /* translators: DataViews operator name */ 14263 label: (0, import_i18n24.__)("Greater than"), 14264 filterText: (filter, activeElements) => (0, import_element45.createInterpolateElement)( 14265 (0, import_i18n24.sprintf)( 14266 /* translators: 1: Filter name (e.g. "Count"). 2: Filter value (e.g. "10"): "Count is greater than: 10". */ 14267 (0, import_i18n24.__)( 14268 "<Name>%1$s is greater than: </Name><Value>%2$s</Value>" 14269 ), 14270 filter.name, 14271 activeElements[0].label 14272 ), 14273 filterTextWrappers 14274 ), 14275 filter(item, field, filterValue) { 14276 if (filterValue === void 0) { 14277 return true; 14278 } 14279 const fieldValue = field.getValue({ item }); 14280 return fieldValue > filterValue; 14281 }, 14282 selection: "single" 14283 }, 14284 { 14285 name: OPERATOR_LESS_THAN_OR_EQUAL, 14286 /* translators: DataViews operator name */ 14287 label: (0, import_i18n24.__)("Less than or equal"), 14288 filterText: (filter, activeElements) => (0, import_element45.createInterpolateElement)( 14289 (0, import_i18n24.sprintf)( 14290 /* translators: 1: Filter name (e.g. "Count"). 2: Filter value (e.g. "10"): "Count is less than or equal to: 10". */ 14291 (0, import_i18n24.__)( 14292 "<Name>%1$s is less than or equal to: </Name><Value>%2$s</Value>" 14293 ), 14294 filter.name, 14295 activeElements[0].label 14296 ), 14297 filterTextWrappers 14298 ), 14299 filter(item, field, filterValue) { 14300 if (filterValue === void 0) { 14301 return true; 14302 } 14303 const fieldValue = field.getValue({ item }); 14304 return fieldValue <= filterValue; 14305 }, 14306 selection: "single" 14307 }, 14308 { 14309 name: OPERATOR_GREATER_THAN_OR_EQUAL, 14310 /* translators: DataViews operator name */ 14311 label: (0, import_i18n24.__)("Greater than or equal"), 14312 filterText: (filter, activeElements) => (0, import_element45.createInterpolateElement)( 14313 (0, import_i18n24.sprintf)( 14314 /* translators: 1: Filter name (e.g. "Count"). 2: Filter value (e.g. "10"): "Count is greater than or equal to: 10". */ 14315 (0, import_i18n24.__)( 14316 "<Name>%1$s is greater than or equal to: </Name><Value>%2$s</Value>" 14317 ), 14318 filter.name, 14319 activeElements[0].label 14320 ), 14321 filterTextWrappers 14322 ), 14323 filter(item, field, filterValue) { 14324 if (filterValue === void 0) { 14325 return true; 14326 } 14327 const fieldValue = field.getValue({ item }); 14328 return fieldValue >= filterValue; 14329 }, 14330 selection: "single" 14331 }, 14332 { 14333 name: OPERATOR_BEFORE, 14334 /* translators: DataViews operator name */ 14335 label: (0, import_i18n24.__)("Before"), 14336 filterText: (filter, activeElements) => (0, import_element45.createInterpolateElement)( 14337 (0, import_i18n24.sprintf)( 14338 /* translators: 1: Filter name (e.g. "Date"). 2: Filter value (e.g. "2024-01-01"): "Date is before: 2024-01-01". */ 14339 (0, import_i18n24.__)("<Name>%1$s is before: </Name><Value>%2$s</Value>"), 14340 filter.name, 14341 activeElements[0].label 14342 ), 14343 filterTextWrappers 14344 ), 14345 filter(item, field, filterValue) { 14346 if (filterValue === void 0) { 14347 return true; 14348 } 14349 const filterDate = (0, import_date.getDate)(filterValue); 14350 const fieldDate = (0, import_date.getDate)(field.getValue({ item })); 14351 return fieldDate < filterDate; 14352 }, 14353 selection: "single" 14354 }, 14355 { 14356 name: OPERATOR_AFTER, 14357 /* translators: DataViews operator name */ 14358 label: (0, import_i18n24.__)("After"), 14359 filterText: (filter, activeElements) => (0, import_element45.createInterpolateElement)( 14360 (0, import_i18n24.sprintf)( 14361 /* translators: 1: Filter name (e.g. "Date"). 2: Filter value (e.g. "2024-01-01"): "Date is after: 2024-01-01". */ 14362 (0, import_i18n24.__)("<Name>%1$s is after: </Name><Value>%2$s</Value>"), 14363 filter.name, 14364 activeElements[0].label 14365 ), 14366 filterTextWrappers 14367 ), 14368 filter(item, field, filterValue) { 14369 if (filterValue === void 0) { 14370 return true; 14371 } 14372 const filterDate = (0, import_date.getDate)(filterValue); 14373 const fieldDate = (0, import_date.getDate)(field.getValue({ item })); 14374 return fieldDate > filterDate; 14375 }, 14376 selection: "single" 14377 }, 14378 { 14379 name: OPERATOR_BEFORE_INC, 14380 /* translators: DataViews operator name */ 14381 label: (0, import_i18n24.__)("Before (inc)"), 14382 filterText: (filter, activeElements) => (0, import_element45.createInterpolateElement)( 14383 (0, import_i18n24.sprintf)( 14384 /* translators: 1: Filter name (e.g. "Date"). 2: Filter value (e.g. "2024-01-01"): "Date is on or before: 2024-01-01". */ 14385 (0, import_i18n24.__)( 14386 "<Name>%1$s is on or before: </Name><Value>%2$s</Value>" 14387 ), 14388 filter.name, 14389 activeElements[0].label 14390 ), 14391 filterTextWrappers 14392 ), 14393 filter(item, field, filterValue) { 14394 if (filterValue === void 0) { 14395 return true; 14396 } 14397 const filterDate = (0, import_date.getDate)(filterValue); 14398 const fieldDate = (0, import_date.getDate)(field.getValue({ item })); 14399 return fieldDate <= filterDate; 14400 }, 14401 selection: "single" 14402 }, 14403 { 14404 name: OPERATOR_AFTER_INC, 14405 /* translators: DataViews operator name */ 14406 label: (0, import_i18n24.__)("After (inc)"), 14407 filterText: (filter, activeElements) => (0, import_element45.createInterpolateElement)( 14408 (0, import_i18n24.sprintf)( 14409 /* translators: 1: Filter name (e.g. "Date"). 2: Filter value (e.g. "2024-01-01"): "Date is on or after: 2024-01-01". */ 14410 (0, import_i18n24.__)( 14411 "<Name>%1$s is on or after: </Name><Value>%2$s</Value>" 14412 ), 14413 filter.name, 14414 activeElements[0].label 14415 ), 14416 filterTextWrappers 14417 ), 14418 filter(item, field, filterValue) { 14419 if (filterValue === void 0) { 14420 return true; 14421 } 14422 const filterDate = (0, import_date.getDate)(filterValue); 14423 const fieldDate = (0, import_date.getDate)(field.getValue({ item })); 14424 return fieldDate >= filterDate; 14425 }, 14426 selection: "single" 14427 }, 14428 { 14429 name: OPERATOR_CONTAINS, 14430 /* translators: DataViews operator name */ 14431 label: (0, import_i18n24.__)("Contains"), 14432 filterText: (filter, activeElements) => (0, import_element45.createInterpolateElement)( 14433 (0, import_i18n24.sprintf)( 14434 /* translators: 1: Filter name (e.g. "Title"). 2: Filter value (e.g. "Hello"): "Title contains: Hello". */ 14435 (0, import_i18n24.__)("<Name>%1$s contains: </Name><Value>%2$s</Value>"), 14436 filter.name, 14437 activeElements[0].label 14438 ), 14439 filterTextWrappers 14440 ), 14441 filter(item, field, filterValue) { 14442 if (filterValue === void 0) { 14443 return true; 14444 } 14445 const fieldValue = field.getValue({ item }); 14446 return typeof fieldValue === "string" && filterValue && fieldValue.toLowerCase().includes(String(filterValue).toLowerCase()); 14447 }, 14448 selection: "single" 14449 }, 14450 { 14451 name: OPERATOR_NOT_CONTAINS, 14452 /* translators: DataViews operator name */ 14453 label: (0, import_i18n24.__)("Doesn't contain"), 14454 filterText: (filter, activeElements) => (0, import_element45.createInterpolateElement)( 14455 (0, import_i18n24.sprintf)( 14456 /* translators: 1: Filter name (e.g. "Title"). 2: Filter value (e.g. "Hello"): "Title doesn't contain: Hello". */ 14457 (0, import_i18n24.__)( 14458 "<Name>%1$s doesn't contain: </Name><Value>%2$s</Value>" 14459 ), 14460 filter.name, 14461 activeElements[0].label 14462 ), 14463 filterTextWrappers 14464 ), 14465 filter(item, field, filterValue) { 14466 if (filterValue === void 0) { 14467 return true; 14468 } 14469 const fieldValue = field.getValue({ item }); 14470 return typeof fieldValue === "string" && filterValue && !fieldValue.toLowerCase().includes(String(filterValue).toLowerCase()); 14471 }, 14472 selection: "single" 14473 }, 14474 { 14475 name: OPERATOR_STARTS_WITH, 14476 /* translators: DataViews operator name */ 14477 label: (0, import_i18n24.__)("Starts with"), 14478 filterText: (filter, activeElements) => (0, import_element45.createInterpolateElement)( 14479 (0, import_i18n24.sprintf)( 14480 /* translators: 1: Filter name (e.g. "Title"). 2: Filter value (e.g. "Hello"): "Title starts with: Hello". */ 14481 (0, import_i18n24.__)("<Name>%1$s starts with: </Name><Value>%2$s</Value>"), 14482 filter.name, 14483 activeElements[0].label 14484 ), 14485 filterTextWrappers 14486 ), 14487 filter(item, field, filterValue) { 14488 if (filterValue === void 0) { 14489 return true; 14490 } 14491 const fieldValue = field.getValue({ item }); 14492 return typeof fieldValue === "string" && filterValue && fieldValue.toLowerCase().startsWith(String(filterValue).toLowerCase()); 14493 }, 14494 selection: "single" 14495 }, 14496 { 14497 name: OPERATOR_ON, 14498 /* translators: DataViews operator name */ 14499 label: (0, import_i18n24.__)("On"), 14500 filterText: (filter, activeElements) => (0, import_element45.createInterpolateElement)( 14501 (0, import_i18n24.sprintf)( 14502 /* translators: 1: Filter name (e.g. "Date"). 2: Filter value (e.g. "2024-01-01"): "Date is: 2024-01-01". */ 14503 (0, import_i18n24.__)("<Name>%1$s is: </Name><Value>%2$s</Value>"), 14504 filter.name, 14505 activeElements[0].label 14506 ), 14507 filterTextWrappers 14508 ), 14509 filter(item, field, filterValue) { 14510 if (filterValue === void 0) { 14511 return true; 14512 } 14513 const filterDate = (0, import_date.getDate)(filterValue); 14514 const fieldDate = (0, import_date.getDate)(field.getValue({ item })); 14515 return filterDate.getTime() === fieldDate.getTime(); 14516 }, 14517 selection: "single" 14518 }, 14519 { 14520 name: OPERATOR_NOT_ON, 14521 /* translators: DataViews operator name */ 14522 label: (0, import_i18n24.__)("Not on"), 14523 filterText: (filter, activeElements) => (0, import_element45.createInterpolateElement)( 14524 (0, import_i18n24.sprintf)( 14525 /* translators: 1: Filter name (e.g. "Date"). 2: Filter value (e.g. "2024-01-01"): "Date is not: 2024-01-01". */ 14526 (0, import_i18n24.__)("<Name>%1$s is not: </Name><Value>%2$s</Value>"), 14527 filter.name, 14528 activeElements[0].label 14529 ), 14530 filterTextWrappers 14531 ), 14532 filter(item, field, filterValue) { 14533 if (filterValue === void 0) { 14534 return true; 14535 } 14536 const filterDate = (0, import_date.getDate)(filterValue); 14537 const fieldDate = (0, import_date.getDate)(field.getValue({ item })); 14538 return filterDate.getTime() !== fieldDate.getTime(); 14539 }, 14540 selection: "single" 14541 } 14542 ]; 14543 var getOperatorByName = (name) => OPERATORS.find((op) => op.name === name); 14544 var getAllOperatorNames = () => OPERATORS.map((op) => op.name); 14545 var isSingleSelectionOperator = (name) => OPERATORS.filter((op) => op.selection === "single").some( 14546 (op) => op.name === name 14547 ); 14548 var isRegisteredOperator = (name) => OPERATORS.some((op) => op.name === name); 14549 14550 // packages/dataviews/build-module/components/dataviews-filters/filter.mjs 14551 var import_jsx_runtime77 = __toESM(require_jsx_runtime(), 1); 14552 var ENTER = "Enter"; 14553 var SPACE = " "; 14554 var FilterText = ({ 14555 activeElements, 14556 filterInView, 14557 filter 14558 }) => { 14559 if (activeElements === void 0 || activeElements.length === 0) { 14560 return filter.name; 14561 } 14562 const operator = getOperatorByName(filterInView?.operator); 14563 if (operator !== void 0) { 14564 return operator.filterText(filter, activeElements); 14565 } 14566 return (0, import_i18n25.sprintf)( 14567 /* translators: 1: Filter name e.g.: "Unknown status for Author". */ 14568 (0, import_i18n25.__)("Unknown status for %1$s"), 14569 filter.name 14570 ); 14571 }; 14572 function OperatorSelector({ 14573 filter, 14574 view, 14575 onChangeView 14576 }) { 14577 const operatorOptions = filter.operators?.map((operator) => ({ 14578 value: operator, 14579 label: getOperatorByName(operator)?.label || operator 14580 })); 14581 const currentFilter = view.filters?.find( 14582 (_filter) => _filter.field === filter.field 14583 ); 14584 const value = currentFilter?.operator || filter.operators[0]; 14585 return operatorOptions.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)( 14586 Stack, 14587 { 14588 direction: "row", 14589 gap: "sm", 14590 justify: "flex-start", 14591 className: "dataviews-filters__summary-operators-container", 14592 align: "center", 14593 children: [ 14594 /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(import_components23.FlexItem, { className: "dataviews-filters__summary-operators-filter-name", children: filter.name }), 14595 /* @__PURE__ */ (0, import_jsx_runtime77.jsx)( 14596 import_components23.SelectControl, 14597 { 14598 className: "dataviews-filters__summary-operators-filter-select", 14599 label: (0, import_i18n25.__)("Conditions"), 14600 value, 14601 options: operatorOptions, 14602 onChange: (newValue) => { 14603 const newOperator = newValue; 14604 const currentOperator = currentFilter?.operator; 14605 const newFilters = currentFilter ? [ 14606 ...(view.filters ?? []).map( 14607 (_filter) => { 14608 if (_filter.field === filter.field) { 14609 const currentOpSelectionModel = getOperatorByName( 14610 currentOperator 14611 )?.selection; 14612 const newOpSelectionModel = getOperatorByName( 14613 newOperator 14614 )?.selection; 14615 const shouldResetValue = currentOpSelectionModel !== newOpSelectionModel || [ 14616 currentOpSelectionModel, 14617 newOpSelectionModel 14618 ].includes("custom"); 14619 return { 14620 ..._filter, 14621 value: shouldResetValue ? void 0 : _filter.value, 14622 operator: newOperator 14623 }; 14624 } 14625 return _filter; 14626 } 14627 ) 14628 ] : [ 14629 ...view.filters ?? [], 14630 { 14631 field: filter.field, 14632 operator: newOperator, 14633 value: void 0 14634 } 14635 ]; 14636 onChangeView({ 14637 ...view, 14638 page: 1, 14639 filters: newFilters 14640 }); 14641 }, 14642 size: "small", 14643 variant: "minimal", 14644 hideLabelFromVision: true 14645 } 14646 ) 14647 ] 14648 } 14649 ); 14650 } 14651 function Filter({ 14652 addFilterRef, 14653 openedFilter, 14654 fields: fields2, 14655 ...commonProps 14656 }) { 14657 const toggleRef = (0, import_element46.useRef)(null); 14658 const { filter, view, onChangeView } = commonProps; 14659 const filterInView = view.filters?.find( 14660 (f2) => f2.field === filter.field 14661 ); 14662 let activeElements = []; 14663 const field = (0, import_element46.useMemo)(() => { 14664 const currentField = fields2.find((f2) => f2.id === filter.field); 14665 if (currentField) { 14666 return { 14667 ...currentField, 14668 // Configure getValue as if Item was a plain object. 14669 // See related input-widget.tsx 14670 getValue: ({ item }) => item[currentField.id] 14671 }; 14672 } 14673 return currentField; 14674 }, [fields2, filter.field]); 14675 const { elements } = useElements({ 14676 elements: filter.elements, 14677 getElements: filter.getElements 14678 }); 14679 if (elements.length > 0) { 14680 activeElements = elements.filter((element) => { 14681 if (filter.singleSelection) { 14682 return element.value === filterInView?.value; 14683 } 14684 return filterInView?.value?.includes(element.value); 14685 }); 14686 } else if (Array.isArray(filterInView?.value)) { 14687 const label = filterInView.value.map((v2) => { 14688 const formattedValue = field?.getValueFormatted({ 14689 item: { [field.id]: v2 }, 14690 field 14691 }); 14692 return formattedValue || String(v2); 14693 }); 14694 activeElements = [ 14695 { 14696 value: filterInView.value, 14697 // @ts-ignore 14698 label 14699 } 14700 ]; 14701 } else if (typeof filterInView?.value === "object") { 14702 activeElements = [ 14703 { value: filterInView.value, label: filterInView.value } 14704 ]; 14705 } else if (filterInView?.value !== void 0) { 14706 const label = field !== void 0 ? field.getValueFormatted({ 14707 item: { [field.id]: filterInView.value }, 14708 field 14709 }) : String(filterInView.value); 14710 activeElements = [ 14711 { 14712 value: filterInView.value, 14713 label 14714 } 14715 ]; 14716 } 14717 const isPrimary = filter.isPrimary; 14718 const isLocked = filterInView?.isLocked; 14719 const hasValues = !isLocked && filterInView?.value !== void 0; 14720 const canResetOrRemove = !isLocked && (!isPrimary || hasValues); 14721 return /* @__PURE__ */ (0, import_jsx_runtime77.jsx)( 14722 import_components23.Dropdown, 14723 { 14724 defaultOpen: openedFilter === filter.field, 14725 contentClassName: "dataviews-filters__summary-popover", 14726 popoverProps: { placement: "bottom-start", role: "dialog" }, 14727 onClose: () => { 14728 toggleRef.current?.focus(); 14729 }, 14730 renderToggle: ({ isOpen, onToggle }) => /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("div", { className: "dataviews-filters__summary-chip-container", children: [ 14731 /* @__PURE__ */ (0, import_jsx_runtime77.jsx)( 14732 import_components23.Tooltip, 14733 { 14734 text: (0, import_i18n25.sprintf)( 14735 /* translators: 1: Filter name. */ 14736 (0, import_i18n25.__)("Filter by: %1$s"), 14737 filter.name.toLowerCase() 14738 ), 14739 placement: "top", 14740 children: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)( 14741 "div", 14742 { 14743 className: clsx_default( 14744 "dataviews-filters__summary-chip", 14745 { 14746 "has-reset": canResetOrRemove, 14747 "has-values": hasValues, 14748 "is-not-clickable": isLocked 14749 } 14750 ), 14751 role: "button", 14752 tabIndex: isLocked ? -1 : 0, 14753 onClick: () => { 14754 if (!isLocked) { 14755 onToggle(); 14756 } 14757 }, 14758 onKeyDown: (event) => { 14759 if (!isLocked && [ENTER, SPACE].includes(event.key)) { 14760 onToggle(); 14761 event.preventDefault(); 14762 } 14763 }, 14764 "aria-disabled": isLocked, 14765 "aria-pressed": isOpen, 14766 "aria-expanded": isOpen, 14767 ref: toggleRef, 14768 children: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)( 14769 FilterText, 14770 { 14771 activeElements, 14772 filterInView, 14773 filter 14774 } 14775 ) 14776 } 14777 ) 14778 } 14779 ), 14780 canResetOrRemove && /* @__PURE__ */ (0, import_jsx_runtime77.jsx)( 14781 import_components23.Tooltip, 14782 { 14783 text: isPrimary ? (0, import_i18n25.__)("Reset") : (0, import_i18n25.__)("Remove"), 14784 placement: "top", 14785 children: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)( 14786 "button", 14787 { 14788 className: clsx_default( 14789 "dataviews-filters__summary-chip-remove", 14790 { "has-values": hasValues } 14791 ), 14792 onClick: () => { 14793 onChangeView({ 14794 ...view, 14795 page: 1, 14796 filters: view.filters?.filter( 14797 (_filter) => _filter.field !== filter.field 14798 ) 14799 }); 14800 if (!isPrimary) { 14801 addFilterRef.current?.focus(); 14802 } else { 14803 toggleRef.current?.focus(); 14804 } 14805 }, 14806 children: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(import_components23.Icon, { icon: close_small_default }) 14807 } 14808 ) 14809 } 14810 ) 14811 ] }), 14812 renderContent: () => { 14813 return /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)(Stack, { direction: "column", justify: "flex-start", children: [ 14814 /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(OperatorSelector, { ...commonProps }), 14815 commonProps.filter.hasElements ? /* @__PURE__ */ (0, import_jsx_runtime77.jsx)( 14816 SearchWidget, 14817 { 14818 ...commonProps, 14819 filter: { 14820 ...commonProps.filter, 14821 elements 14822 } 14823 } 14824 ) : /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(InputWidget, { ...commonProps, fields: fields2 }) 14825 ] }); 14826 } 14827 } 14828 ); 14829 } 14830 14831 // packages/dataviews/build-module/components/dataviews-filters/add-filter.mjs 14832 var import_components24 = __toESM(require_components(), 1); 14833 var import_i18n26 = __toESM(require_i18n(), 1); 14834 var import_element47 = __toESM(require_element(), 1); 14835 var import_jsx_runtime78 = __toESM(require_jsx_runtime(), 1); 14836 var { Menu: Menu4 } = unlock(import_components24.privateApis); 14837 function AddFilterMenu({ 14838 filters, 14839 view, 14840 onChangeView, 14841 setOpenedFilter, 14842 triggerProps 14843 }) { 14844 const inactiveFilters = filters.filter((filter) => !filter.isVisible); 14845 return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(Menu4, { children: [ 14846 /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(Menu4.TriggerButton, { ...triggerProps }), 14847 /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(Menu4.Popover, { children: inactiveFilters.map((filter) => { 14848 return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)( 14849 Menu4.Item, 14850 { 14851 onClick: () => { 14852 setOpenedFilter(filter.field); 14853 onChangeView({ 14854 ...view, 14855 page: 1, 14856 filters: [ 14857 ...view.filters || [], 14858 { 14859 field: filter.field, 14860 value: void 0, 14861 operator: filter.operators[0] 14862 } 14863 ] 14864 }); 14865 }, 14866 children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(Menu4.ItemLabel, { children: filter.name }) 14867 }, 14868 filter.field 14869 ); 14870 }) }) 14871 ] }); 14872 } 14873 function AddFilter({ filters, view, onChangeView, setOpenedFilter }, ref) { 14874 if (!filters.length || filters.every(({ isPrimary }) => isPrimary)) { 14875 return null; 14876 } 14877 const inactiveFilters = filters.filter((filter) => !filter.isVisible); 14878 return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)( 14879 AddFilterMenu, 14880 { 14881 triggerProps: { 14882 render: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)( 14883 import_components24.Button, 14884 { 14885 accessibleWhenDisabled: true, 14886 size: "compact", 14887 className: "dataviews-filters-button", 14888 variant: "tertiary", 14889 disabled: !inactiveFilters.length, 14890 ref 14891 } 14892 ), 14893 children: (0, import_i18n26.__)("Add filter") 14894 }, 14895 ...{ filters, view, onChangeView, setOpenedFilter } 14896 } 14897 ); 14898 } 14899 var add_filter_default = (0, import_element47.forwardRef)(AddFilter); 14900 14901 // packages/dataviews/build-module/components/dataviews-filters/reset-filters.mjs 14902 var import_components25 = __toESM(require_components(), 1); 14903 var import_i18n27 = __toESM(require_i18n(), 1); 14904 var import_jsx_runtime79 = __toESM(require_jsx_runtime(), 1); 14905 function ResetFilter({ 14906 filters, 14907 view, 14908 onChangeView 14909 }) { 14910 const isPrimary = (field) => filters.some( 14911 (_filter) => _filter.field === field && _filter.isPrimary 14912 ); 14913 const isDisabled = !view.search && !view.filters?.some( 14914 (_filter) => !_filter.isLocked && (_filter.value !== void 0 || !isPrimary(_filter.field)) 14915 ); 14916 return /* @__PURE__ */ (0, import_jsx_runtime79.jsx)( 14917 import_components25.Button, 14918 { 14919 disabled: isDisabled, 14920 accessibleWhenDisabled: true, 14921 size: "compact", 14922 variant: "tertiary", 14923 className: "dataviews-filters__reset-button", 14924 onClick: () => { 14925 onChangeView({ 14926 ...view, 14927 page: 1, 14928 search: "", 14929 filters: view.filters?.filter((f2) => !!f2.isLocked) || [] 14930 }); 14931 }, 14932 children: (0, import_i18n27.__)("Reset") 14933 } 14934 ); 14935 } 14936 14937 // packages/dataviews/build-module/components/dataviews-filters/use-filters.mjs 14938 var import_element48 = __toESM(require_element(), 1); 14939 function useFilters(fields2, view) { 14940 return (0, import_element48.useMemo)(() => { 14941 const filters = []; 14942 fields2.forEach((field) => { 14943 if (field.filterBy === false || !field.hasElements && !field.Edit) { 14944 return; 14945 } 14946 const operators = field.filterBy.operators; 14947 const isPrimary = !!field.filterBy?.isPrimary; 14948 const isLocked = view.filters?.some( 14949 (f2) => f2.field === field.id && !!f2.isLocked 14950 ) ?? false; 14951 filters.push({ 14952 field: field.id, 14953 name: field.label, 14954 elements: field.elements, 14955 getElements: field.getElements, 14956 hasElements: field.hasElements, 14957 singleSelection: operators.some( 14958 (op) => isSingleSelectionOperator(op) 14959 ), 14960 operators, 14961 isVisible: isLocked || isPrimary || !!view.filters?.some( 14962 (f2) => f2.field === field.id && isRegisteredOperator(f2.operator) 14963 ), 14964 isPrimary, 14965 isLocked 14966 }); 14967 }); 14968 filters.sort((a2, b2) => { 14969 if (a2.isLocked && !b2.isLocked) { 14970 return -1; 14971 } 14972 if (!a2.isLocked && b2.isLocked) { 14973 return 1; 14974 } 14975 if (a2.isPrimary && !b2.isPrimary) { 14976 return -1; 14977 } 14978 if (!a2.isPrimary && b2.isPrimary) { 14979 return 1; 14980 } 14981 return a2.name.localeCompare(b2.name); 14982 }); 14983 return filters; 14984 }, [fields2, view]); 14985 } 14986 var use_filters_default = useFilters; 14987 14988 // packages/dataviews/build-module/components/dataviews-filters/filters.mjs 14989 var import_jsx_runtime80 = __toESM(require_jsx_runtime(), 1); 14990 function Filters({ className }) { 14991 const { fields: fields2, view, onChangeView, openedFilter, setOpenedFilter } = (0, import_element49.useContext)(dataviews_context_default); 14992 const addFilterRef = (0, import_element49.useRef)(null); 14993 const filters = use_filters_default(fields2, view); 14994 const addFilter = /* @__PURE__ */ (0, import_jsx_runtime80.jsx)( 14995 add_filter_default, 14996 { 14997 filters, 14998 view, 14999 onChangeView, 15000 ref: addFilterRef, 15001 setOpenedFilter 15002 }, 15003 "add-filter" 15004 ); 15005 const visibleFilters = filters.filter((filter) => filter.isVisible); 15006 if (visibleFilters.length === 0) { 15007 return null; 15008 } 15009 const filterComponents = [ 15010 ...visibleFilters.map((filter) => { 15011 return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)( 15012 Filter, 15013 { 15014 filter, 15015 view, 15016 fields: fields2, 15017 onChangeView, 15018 addFilterRef, 15019 openedFilter 15020 }, 15021 filter.field 15022 ); 15023 }), 15024 addFilter 15025 ]; 15026 filterComponents.push( 15027 /* @__PURE__ */ (0, import_jsx_runtime80.jsx)( 15028 ResetFilter, 15029 { 15030 filters, 15031 view, 15032 onChangeView 15033 }, 15034 "reset-filters" 15035 ) 15036 ); 15037 return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)( 15038 Stack, 15039 { 15040 direction: "row", 15041 justify: "flex-start", 15042 gap: "sm", 15043 style: { width: "fit-content" }, 15044 wrap: "wrap", 15045 className, 15046 children: filterComponents 15047 } 15048 ); 15049 } 15050 var filters_default = (0, import_element49.memo)(Filters); 15051 15052 // packages/dataviews/build-module/components/dataviews-filters/toggle.mjs 15053 var import_element50 = __toESM(require_element(), 1); 15054 var import_components26 = __toESM(require_components(), 1); 15055 var import_i18n28 = __toESM(require_i18n(), 1); 15056 var import_jsx_runtime81 = __toESM(require_jsx_runtime(), 1); 15057 function FiltersToggle() { 15058 const { 15059 filters, 15060 view, 15061 onChangeView, 15062 setOpenedFilter, 15063 isShowingFilter, 15064 setIsShowingFilter 15065 } = (0, import_element50.useContext)(dataviews_context_default); 15066 const buttonRef = (0, import_element50.useRef)(null); 15067 const onChangeViewWithFilterVisibility = (0, import_element50.useCallback)( 15068 (_view) => { 15069 onChangeView(_view); 15070 setIsShowingFilter(true); 15071 }, 15072 [onChangeView, setIsShowingFilter] 15073 ); 15074 if (filters.length === 0) { 15075 return null; 15076 } 15077 const hasVisibleFilters = filters.some((filter) => filter.isVisible); 15078 const addFilterButtonProps = { 15079 label: (0, import_i18n28.__)("Add filter"), 15080 "aria-expanded": false, 15081 isPressed: false 15082 }; 15083 const toggleFiltersButtonProps = { 15084 label: (0, import_i18n28._x)("Filter", "verb"), 15085 "aria-expanded": isShowingFilter, 15086 isPressed: isShowingFilter, 15087 onClick: () => { 15088 if (!isShowingFilter) { 15089 setOpenedFilter(null); 15090 } 15091 setIsShowingFilter(!isShowingFilter); 15092 } 15093 }; 15094 const hasPrimaryOrLockedFilters = filters.some( 15095 (filter) => filter.isPrimary || filter.isLocked 15096 ); 15097 const buttonComponent = /* @__PURE__ */ (0, import_jsx_runtime81.jsx)( 15098 import_components26.Button, 15099 { 15100 ref: buttonRef, 15101 className: "dataviews-filters__visibility-toggle", 15102 size: "compact", 15103 icon: funnel_default, 15104 disabled: hasPrimaryOrLockedFilters, 15105 accessibleWhenDisabled: true, 15106 ...hasVisibleFilters ? toggleFiltersButtonProps : addFilterButtonProps 15107 } 15108 ); 15109 return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { className: "dataviews-filters__container-visibility-toggle", children: !hasVisibleFilters ? /* @__PURE__ */ (0, import_jsx_runtime81.jsx)( 15110 AddFilterMenu, 15111 { 15112 filters, 15113 view, 15114 onChangeView: onChangeViewWithFilterVisibility, 15115 setOpenedFilter, 15116 triggerProps: { render: buttonComponent } 15117 } 15118 ) : /* @__PURE__ */ (0, import_jsx_runtime81.jsx)( 15119 FilterVisibilityToggle, 15120 { 15121 buttonRef, 15122 filtersCount: view.filters?.length, 15123 children: buttonComponent 15124 } 15125 ) }); 15126 } 15127 function FilterVisibilityToggle({ 15128 buttonRef, 15129 filtersCount, 15130 children 15131 }) { 15132 (0, import_element50.useEffect)( 15133 () => () => { 15134 buttonRef.current?.focus(); 15135 }, 15136 [buttonRef] 15137 ); 15138 return /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(import_jsx_runtime81.Fragment, { children: [ 15139 children, 15140 !!filtersCount && /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("span", { className: "dataviews-filters-toggle__count", children: filtersCount }) 15141 ] }); 15142 } 15143 var toggle_default = FiltersToggle; 15144 15145 // packages/dataviews/build-module/components/dataviews-filters/filters-toggled.mjs 15146 var import_element51 = __toESM(require_element(), 1); 15147 var import_jsx_runtime82 = __toESM(require_jsx_runtime(), 1); 15148 function FiltersToggled(props) { 15149 const { isShowingFilter } = (0, import_element51.useContext)(dataviews_context_default); 15150 if (!isShowingFilter) { 15151 return null; 15152 } 15153 return /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(filters_default, { ...props }); 15154 } 15155 var filters_toggled_default = FiltersToggled; 15156 15157 // packages/dataviews/build-module/components/dataviews-layout/index.mjs 15158 var import_element52 = __toESM(require_element(), 1); 15159 var import_components27 = __toESM(require_components(), 1); 15160 var import_i18n29 = __toESM(require_i18n(), 1); 15161 var import_jsx_runtime83 = __toESM(require_jsx_runtime(), 1); 15162 function DataViewsLayout({ className }) { 15163 const { 15164 actions: actions2 = [], 15165 data, 15166 fields: fields2, 15167 getItemId, 15168 getItemLevel, 15169 hasInitiallyLoaded, 15170 isLoading, 15171 view, 15172 onChangeView, 15173 selection, 15174 onChangeSelection, 15175 setOpenedFilter, 15176 onClickItem, 15177 isItemClickable, 15178 renderItemLink, 15179 defaultLayouts, 15180 containerRef, 15181 empty = /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("p", { children: (0, import_i18n29.__)("No results") }) 15182 } = (0, import_element52.useContext)(dataviews_context_default); 15183 const isDelayedInitialLoading = useDelayedLoading(!hasInitiallyLoaded, { 15184 delay: 200 15185 }); 15186 if (!hasInitiallyLoaded) { 15187 if (!isDelayedInitialLoading) { 15188 return null; 15189 } 15190 return /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { className: "dataviews-loading", children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("p", { children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(import_components27.Spinner, {}) }) }); 15191 } 15192 const ViewComponent = VIEW_LAYOUTS.find( 15193 (v2) => v2.type === view.type && defaultLayouts[v2.type] 15194 )?.component; 15195 return /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("div", { className: "dataviews-layout__container", ref: containerRef, children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)( 15196 ViewComponent, 15197 { 15198 className, 15199 actions: actions2, 15200 data, 15201 fields: fields2, 15202 getItemId, 15203 getItemLevel, 15204 isLoading, 15205 onChangeView, 15206 onChangeSelection, 15207 selection, 15208 setOpenedFilter, 15209 onClickItem, 15210 renderItemLink, 15211 isItemClickable, 15212 view, 15213 empty 15214 } 15215 ) }); 15216 } 15217 15218 // packages/dataviews/build-module/components/dataviews-footer/index.mjs 15219 var import_element53 = __toESM(require_element(), 1); 15220 var import_jsx_runtime84 = __toESM(require_jsx_runtime(), 1); 15221 var EMPTY_ARRAY5 = []; 15222 function DataViewsFooter() { 15223 const { 15224 view, 15225 paginationInfo: { totalItems = 0, totalPages }, 15226 data, 15227 actions: actions2 = EMPTY_ARRAY5, 15228 isLoading, 15229 hasInitiallyLoaded 15230 } = (0, import_element53.useContext)(dataviews_context_default); 15231 const isRefreshing = !!isLoading && hasInitiallyLoaded && !!data?.length; 15232 const isDelayedRefreshing = useDelayedLoading(!!isRefreshing); 15233 const hasBulkActions = useSomeItemHasAPossibleBulkAction(actions2, data) && [LAYOUT_TABLE, LAYOUT_GRID].includes(view.type); 15234 if (!isRefreshing && (!totalItems || !totalPages || totalPages <= 1 && !hasBulkActions)) { 15235 return null; 15236 } 15237 return (!!totalItems || isRefreshing) && /* @__PURE__ */ (0, import_jsx_runtime84.jsx)( 15238 "div", 15239 { 15240 className: "dataviews-footer", 15241 inert: isRefreshing ? "true" : void 0, 15242 children: /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)( 15243 Stack, 15244 { 15245 direction: "row", 15246 justify: "end", 15247 align: "center", 15248 className: clsx_default("dataviews-footer__content", { 15249 "is-refreshing": isDelayedRefreshing 15250 }), 15251 gap: "sm", 15252 children: [ 15253 hasBulkActions && /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(BulkActionsFooter, {}), 15254 /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(dataviews_pagination_default, {}) 15255 ] 15256 } 15257 ) 15258 } 15259 ); 15260 } 15261 15262 // packages/dataviews/build-module/components/dataviews-search/index.mjs 15263 var import_i18n30 = __toESM(require_i18n(), 1); 15264 var import_element54 = __toESM(require_element(), 1); 15265 var import_components28 = __toESM(require_components(), 1); 15266 var import_compose9 = __toESM(require_compose(), 1); 15267 var import_jsx_runtime85 = __toESM(require_jsx_runtime(), 1); 15268 var DataViewsSearch = (0, import_element54.memo)(function Search({ label }) { 15269 const { view, onChangeView } = (0, import_element54.useContext)(dataviews_context_default); 15270 const [search, setSearch, debouncedSearch] = (0, import_compose9.useDebouncedInput)( 15271 view.search 15272 ); 15273 (0, import_element54.useEffect)(() => { 15274 if (view.search !== debouncedSearch) { 15275 setSearch(view.search ?? ""); 15276 } 15277 }, [view.search, setSearch]); 15278 const onChangeViewRef = (0, import_element54.useRef)(onChangeView); 15279 const viewRef = (0, import_element54.useRef)(view); 15280 (0, import_element54.useEffect)(() => { 15281 onChangeViewRef.current = onChangeView; 15282 viewRef.current = view; 15283 }, [onChangeView, view]); 15284 (0, import_element54.useEffect)(() => { 15285 if (debouncedSearch !== viewRef.current?.search) { 15286 onChangeViewRef.current({ 15287 ...viewRef.current, 15288 page: view.page ? 1 : void 0, 15289 startPosition: view.startPosition ? 1 : void 0, 15290 search: debouncedSearch 15291 }); 15292 } 15293 }, [debouncedSearch]); 15294 const searchLabel = label || (0, import_i18n30.__)("Search"); 15295 return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)( 15296 import_components28.SearchControl, 15297 { 15298 className: "dataviews-search", 15299 onChange: setSearch, 15300 value: search, 15301 label: searchLabel, 15302 placeholder: searchLabel, 15303 size: "compact" 15304 } 15305 ); 15306 }); 15307 var dataviews_search_default = DataViewsSearch; 15308 15309 // packages/dataviews/build-module/components/dataviews-view-config/index.mjs 15310 var import_components29 = __toESM(require_components(), 1); 15311 var import_i18n31 = __toESM(require_i18n(), 1); 15312 var import_element55 = __toESM(require_element(), 1); 15313 var import_warning = __toESM(require_warning(), 1); 15314 var import_compose10 = __toESM(require_compose(), 1); 15315 var import_jsx_runtime86 = __toESM(require_jsx_runtime(), 1); 15316 var { Menu: Menu5 } = unlock(import_components29.privateApis); 15317 var DATAVIEWS_CONFIG_POPOVER_PROPS = { 15318 className: "dataviews-config__popover", 15319 placement: "bottom-end", 15320 offset: 9 15321 }; 15322 function ViewTypeMenu() { 15323 const { view, onChangeView, defaultLayouts } = (0, import_element55.useContext)(dataviews_context_default); 15324 const availableLayouts = Object.keys(defaultLayouts); 15325 if (availableLayouts.length <= 1) { 15326 return null; 15327 } 15328 const activeView = VIEW_LAYOUTS.find((v2) => view.type === v2.type); 15329 return /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(Menu5, { children: [ 15330 /* @__PURE__ */ (0, import_jsx_runtime86.jsx)( 15331 Menu5.TriggerButton, 15332 { 15333 render: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)( 15334 import_components29.Button, 15335 { 15336 size: "compact", 15337 icon: activeView?.icon, 15338 label: (0, import_i18n31.__)("Layout") 15339 } 15340 ) 15341 } 15342 ), 15343 /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(Menu5.Popover, { children: availableLayouts.map((layout) => { 15344 const config = VIEW_LAYOUTS.find( 15345 (v2) => v2.type === layout 15346 ); 15347 if (!config) { 15348 return null; 15349 } 15350 return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)( 15351 Menu5.RadioItem, 15352 { 15353 value: layout, 15354 name: "view-actions-available-view", 15355 checked: layout === view.type, 15356 hideOnClick: true, 15357 onChange: (e2) => { 15358 switch (e2.target.value) { 15359 case "list": 15360 case "grid": 15361 case "table": 15362 case "pickerGrid": 15363 case "pickerTable": 15364 case "activity": 15365 const viewWithoutLayout = { ...view }; 15366 if ("layout" in viewWithoutLayout) { 15367 delete viewWithoutLayout.layout; 15368 } 15369 return onChangeView({ 15370 ...viewWithoutLayout, 15371 type: e2.target.value, 15372 ...defaultLayouts[e2.target.value] 15373 }); 15374 } 15375 (0, import_warning.default)("Invalid dataview"); 15376 }, 15377 children: /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(Menu5.ItemLabel, { children: config.label }) 15378 }, 15379 layout 15380 ); 15381 }) }) 15382 ] }); 15383 } 15384 function SortFieldControl() { 15385 const { view, fields: fields2, onChangeView } = (0, import_element55.useContext)(dataviews_context_default); 15386 const orderOptions = (0, import_element55.useMemo)(() => { 15387 const sortableFields = fields2.filter( 15388 (field) => field.enableSorting !== false 15389 ); 15390 return sortableFields.map((field) => { 15391 return { 15392 label: field.label, 15393 value: field.id 15394 }; 15395 }); 15396 }, [fields2]); 15397 return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)( 15398 import_components29.SelectControl, 15399 { 15400 __next40pxDefaultSize: true, 15401 label: (0, import_i18n31.__)("Sort by"), 15402 value: view.sort?.field, 15403 options: orderOptions, 15404 onChange: (value) => { 15405 onChangeView({ 15406 ...view, 15407 sort: { 15408 direction: view?.sort?.direction || "desc", 15409 field: value 15410 }, 15411 showLevels: false 15412 }); 15413 } 15414 } 15415 ); 15416 } 15417 function SortDirectionControl() { 15418 const { view, fields: fields2, onChangeView } = (0, import_element55.useContext)(dataviews_context_default); 15419 const sortableFields = fields2.filter( 15420 (field) => field.enableSorting !== false 15421 ); 15422 if (sortableFields.length === 0) { 15423 return null; 15424 } 15425 let value = view.sort?.direction; 15426 if (!value && view.sort?.field) { 15427 value = "desc"; 15428 } 15429 return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)( 15430 import_components29.__experimentalToggleGroupControl, 15431 { 15432 className: "dataviews-view-config__sort-direction", 15433 __next40pxDefaultSize: true, 15434 isBlock: true, 15435 label: (0, import_i18n31.__)("Order"), 15436 value, 15437 onChange: (newDirection) => { 15438 if (newDirection === "asc" || newDirection === "desc") { 15439 onChangeView({ 15440 ...view, 15441 sort: { 15442 direction: newDirection, 15443 field: view.sort?.field || // If there is no field assigned as the sorting field assign the first sortable field. 15444 fields2.find( 15445 (field) => field.enableSorting !== false 15446 )?.id || "" 15447 }, 15448 showLevels: false 15449 }); 15450 return; 15451 } 15452 (0, import_warning.default)("Invalid direction"); 15453 }, 15454 children: SORTING_DIRECTIONS.map((direction) => { 15455 return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)( 15456 import_components29.__experimentalToggleGroupControlOptionIcon, 15457 { 15458 value: direction, 15459 icon: sortIcons[direction], 15460 label: sortLabels[direction] 15461 }, 15462 direction 15463 ); 15464 }) 15465 } 15466 ); 15467 } 15468 function ItemsPerPageControl() { 15469 const { view, config, onChangeView } = (0, import_element55.useContext)(dataviews_context_default); 15470 const { infiniteScrollEnabled } = view; 15471 if (!config || !config.perPageSizes || config.perPageSizes.length < 2 || config.perPageSizes.length > 6 || infiniteScrollEnabled) { 15472 return null; 15473 } 15474 return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)( 15475 import_components29.__experimentalToggleGroupControl, 15476 { 15477 __next40pxDefaultSize: true, 15478 isBlock: true, 15479 label: (0, import_i18n31.__)("Items per page"), 15480 value: view.perPage || 10, 15481 disabled: !view?.sort?.field, 15482 onChange: (newItemsPerPage) => { 15483 const newItemsPerPageNumber = typeof newItemsPerPage === "number" || newItemsPerPage === void 0 ? newItemsPerPage : parseInt(newItemsPerPage, 10); 15484 onChangeView({ 15485 ...view, 15486 perPage: newItemsPerPageNumber, 15487 page: 1 15488 }); 15489 }, 15490 children: config.perPageSizes.map((value) => { 15491 return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)( 15492 import_components29.__experimentalToggleGroupControlOption, 15493 { 15494 value, 15495 label: value.toString() 15496 }, 15497 value 15498 ); 15499 }) 15500 } 15501 ); 15502 } 15503 function ResetViewButton() { 15504 const { onReset } = (0, import_element55.useContext)(dataviews_context_default); 15505 if (onReset === void 0) { 15506 return null; 15507 } 15508 const isDisabled = onReset === false; 15509 return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)( 15510 import_components29.Button, 15511 { 15512 variant: "tertiary", 15513 size: "compact", 15514 disabled: isDisabled, 15515 accessibleWhenDisabled: true, 15516 className: "dataviews-view-config__reset-button", 15517 onClick: () => { 15518 if (typeof onReset === "function") { 15519 onReset(); 15520 } 15521 }, 15522 children: (0, import_i18n31.__)("Reset view") 15523 } 15524 ); 15525 } 15526 function DataviewsViewConfigDropdown() { 15527 const { view, onReset } = (0, import_element55.useContext)(dataviews_context_default); 15528 const popoverId = (0, import_compose10.useInstanceId)( 15529 _DataViewsViewConfig, 15530 "dataviews-view-config-dropdown" 15531 ); 15532 const activeLayout = VIEW_LAYOUTS.find( 15533 (layout) => layout.type === view.type 15534 ); 15535 const isModified = typeof onReset === "function"; 15536 return /* @__PURE__ */ (0, import_jsx_runtime86.jsx)( 15537 import_components29.Dropdown, 15538 { 15539 expandOnMobile: true, 15540 popoverProps: { 15541 ...DATAVIEWS_CONFIG_POPOVER_PROPS, 15542 id: popoverId 15543 }, 15544 renderToggle: ({ onToggle, isOpen }) => { 15545 return /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)("div", { className: "dataviews-view-config__toggle-wrapper", children: [ 15546 /* @__PURE__ */ (0, import_jsx_runtime86.jsx)( 15547 import_components29.Button, 15548 { 15549 size: "compact", 15550 icon: cog_default, 15551 label: (0, import_i18n31._x)( 15552 "View options", 15553 "View is used as a noun" 15554 ), 15555 onClick: onToggle, 15556 "aria-expanded": isOpen ? "true" : "false", 15557 "aria-controls": popoverId 15558 } 15559 ), 15560 isModified && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)("span", { className: "dataviews-view-config__modified-indicator" }) 15561 ] }); 15562 }, 15563 renderContent: () => /* @__PURE__ */ (0, import_jsx_runtime86.jsx)( 15564 import_components29.__experimentalDropdownContentWrapper, 15565 { 15566 paddingSize: "medium", 15567 className: "dataviews-config__popover-content-wrapper", 15568 children: /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)( 15569 Stack, 15570 { 15571 direction: "column", 15572 className: "dataviews-view-config", 15573 gap: "xl", 15574 children: [ 15575 /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)( 15576 Stack, 15577 { 15578 direction: "row", 15579 justify: "space-between", 15580 align: "center", 15581 className: "dataviews-view-config__header", 15582 children: [ 15583 /* @__PURE__ */ (0, import_jsx_runtime86.jsx)( 15584 import_components29.__experimentalHeading, 15585 { 15586 level: 2, 15587 className: "dataviews-settings-section__title", 15588 children: (0, import_i18n31.__)("Appearance") 15589 } 15590 ), 15591 /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(ResetViewButton, {}) 15592 ] 15593 } 15594 ), 15595 /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(Stack, { direction: "column", gap: "lg", children: [ 15596 /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)( 15597 Stack, 15598 { 15599 direction: "row", 15600 gap: "sm", 15601 className: "dataviews-view-config__sort-controls", 15602 children: [ 15603 /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(SortFieldControl, {}), 15604 /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(SortDirectionControl, {}) 15605 ] 15606 } 15607 ), 15608 !!activeLayout?.viewConfigOptions && /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(activeLayout.viewConfigOptions, {}), 15609 /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(ItemsPerPageControl, {}), 15610 /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(PropertiesSection, {}) 15611 ] }) 15612 ] 15613 } 15614 ) 15615 } 15616 ) 15617 } 15618 ); 15619 } 15620 function _DataViewsViewConfig() { 15621 return /* @__PURE__ */ (0, import_jsx_runtime86.jsxs)(import_jsx_runtime86.Fragment, { children: [ 15622 /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(ViewTypeMenu, {}), 15623 /* @__PURE__ */ (0, import_jsx_runtime86.jsx)(DataviewsViewConfigDropdown, {}) 15624 ] }); 15625 } 15626 var DataViewsViewConfig = (0, import_element55.memo)(_DataViewsViewConfig); 15627 var dataviews_view_config_default = DataViewsViewConfig; 15628 15629 // packages/dataviews/build-module/components/dataform-controls/checkbox.mjs 15630 var import_components30 = __toESM(require_components(), 1); 15631 var import_element56 = __toESM(require_element(), 1); 15632 15633 // packages/dataviews/build-module/components/dataform-controls/utils/get-custom-validity.mjs 15634 function getCustomValidity(isValid2, validity) { 15635 let customValidity; 15636 if (isValid2?.required && validity?.required) { 15637 customValidity = validity?.required?.message ? validity.required : void 0; 15638 } else if (isValid2?.pattern && validity?.pattern) { 15639 customValidity = validity.pattern; 15640 } else if (isValid2?.min && validity?.min) { 15641 customValidity = validity.min; 15642 } else if (isValid2?.max && validity?.max) { 15643 customValidity = validity.max; 15644 } else if (isValid2?.minLength && validity?.minLength) { 15645 customValidity = validity.minLength; 15646 } else if (isValid2?.maxLength && validity?.maxLength) { 15647 customValidity = validity.maxLength; 15648 } else if (isValid2?.elements && validity?.elements) { 15649 customValidity = validity.elements; 15650 } else if (validity?.custom) { 15651 customValidity = validity.custom; 15652 } 15653 return customValidity; 15654 } 15655 15656 // packages/dataviews/build-module/components/dataform-controls/checkbox.mjs 15657 var import_jsx_runtime87 = __toESM(require_jsx_runtime(), 1); 15658 var { ValidatedCheckboxControl } = unlock(import_components30.privateApis); 15659 function Checkbox({ 15660 field, 15661 onChange, 15662 data, 15663 hideLabelFromVision, 15664 markWhenOptional, 15665 validity 15666 }) { 15667 const { getValue, setValue, label, description, isValid: isValid2 } = field; 15668 const onChangeControl = (0, import_element56.useCallback)(() => { 15669 onChange( 15670 setValue({ item: data, value: !getValue({ item: data }) }) 15671 ); 15672 }, [data, getValue, onChange, setValue]); 15673 return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)( 15674 ValidatedCheckboxControl, 15675 { 15676 required: !!field.isValid?.required, 15677 markWhenOptional, 15678 customValidity: getCustomValidity(isValid2, validity), 15679 hidden: hideLabelFromVision, 15680 label, 15681 help: description, 15682 checked: getValue({ item: data }), 15683 onChange: onChangeControl 15684 } 15685 ); 15686 } 15687 15688 // packages/dataviews/build-module/components/dataform-controls/combobox.mjs 15689 var import_components31 = __toESM(require_components(), 1); 15690 var import_element57 = __toESM(require_element(), 1); 15691 var import_jsx_runtime88 = __toESM(require_jsx_runtime(), 1); 15692 var { ValidatedComboboxControl } = unlock(import_components31.privateApis); 15693 function Combobox3({ 15694 data, 15695 field, 15696 onChange, 15697 hideLabelFromVision, 15698 validity 15699 }) { 15700 const { label, description, placeholder, getValue, setValue, isValid: isValid2 } = field; 15701 const value = getValue({ item: data }) ?? ""; 15702 const onChangeControl = (0, import_element57.useCallback)( 15703 (newValue) => onChange(setValue({ item: data, value: newValue ?? "" })), 15704 [data, onChange, setValue] 15705 ); 15706 const { elements, isLoading } = useElements({ 15707 elements: field.elements, 15708 getElements: field.getElements 15709 }); 15710 if (isLoading) { 15711 return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)(import_components31.Spinner, {}); 15712 } 15713 return /* @__PURE__ */ (0, import_jsx_runtime88.jsx)( 15714 ValidatedComboboxControl, 15715 { 15716 required: !!field.isValid?.required, 15717 customValidity: getCustomValidity(isValid2, validity), 15718 label, 15719 value, 15720 help: description, 15721 placeholder, 15722 options: elements, 15723 onChange: onChangeControl, 15724 hideLabelFromVision, 15725 allowReset: true, 15726 expandOnFocus: true 15727 } 15728 ); 15729 } 15730 15731 // packages/dataviews/build-module/components/dataform-controls/datetime.mjs 15732 var import_components33 = __toESM(require_components(), 1); 15733 var import_element59 = __toESM(require_element(), 1); 15734 var import_i18n33 = __toESM(require_i18n(), 1); 15735 var import_date3 = __toESM(require_date(), 1); 15736 15737 // packages/dataviews/build-module/components/dataform-controls/utils/relative-date-control.mjs 15738 var import_components32 = __toESM(require_components(), 1); 15739 var import_element58 = __toESM(require_element(), 1); 15740 var import_i18n32 = __toESM(require_i18n(), 1); 15741 var import_jsx_runtime89 = __toESM(require_jsx_runtime(), 1); 15742 var TIME_UNITS_OPTIONS = { 15743 [OPERATOR_IN_THE_PAST]: [ 15744 { value: "days", label: (0, import_i18n32.__)("Days") }, 15745 { value: "weeks", label: (0, import_i18n32.__)("Weeks") }, 15746 { value: "months", label: (0, import_i18n32.__)("Months") }, 15747 { value: "years", label: (0, import_i18n32.__)("Years") } 15748 ], 15749 [OPERATOR_OVER]: [ 15750 { value: "days", label: (0, import_i18n32.__)("Days ago") }, 15751 { value: "weeks", label: (0, import_i18n32.__)("Weeks ago") }, 15752 { value: "months", label: (0, import_i18n32.__)("Months ago") }, 15753 { value: "years", label: (0, import_i18n32.__)("Years ago") } 15754 ] 15755 }; 15756 function RelativeDateControl({ 15757 className, 15758 data, 15759 field, 15760 onChange, 15761 hideLabelFromVision, 15762 operator 15763 }) { 15764 const options = TIME_UNITS_OPTIONS[operator === OPERATOR_IN_THE_PAST ? "inThePast" : "over"]; 15765 const { id, label, description, getValue, setValue } = field; 15766 const fieldValue = getValue({ item: data }); 15767 const { value: relValue = "", unit = options[0].value } = fieldValue && typeof fieldValue === "object" ? fieldValue : {}; 15768 const onChangeValue = (0, import_element58.useCallback)( 15769 (newValue) => onChange( 15770 setValue({ 15771 item: data, 15772 value: { value: Number(newValue), unit } 15773 }) 15774 ), 15775 [onChange, setValue, data, unit] 15776 ); 15777 const onChangeUnit = (0, import_element58.useCallback)( 15778 (newUnit) => onChange( 15779 setValue({ 15780 item: data, 15781 value: { value: relValue, unit: newUnit } 15782 }) 15783 ), 15784 [onChange, setValue, data, relValue] 15785 ); 15786 return /* @__PURE__ */ (0, import_jsx_runtime89.jsx)( 15787 import_components32.BaseControl, 15788 { 15789 id, 15790 className: clsx_default(className, "dataviews-controls__relative-date"), 15791 label, 15792 hideLabelFromVision, 15793 help: description, 15794 children: /* @__PURE__ */ (0, import_jsx_runtime89.jsxs)(Stack, { direction: "row", gap: "sm", children: [ 15795 /* @__PURE__ */ (0, import_jsx_runtime89.jsx)( 15796 import_components32.__experimentalNumberControl, 15797 { 15798 __next40pxDefaultSize: true, 15799 className: "dataviews-controls__relative-date-number", 15800 spinControls: "none", 15801 min: 1, 15802 step: 1, 15803 value: relValue, 15804 onChange: onChangeValue 15805 } 15806 ), 15807 /* @__PURE__ */ (0, import_jsx_runtime89.jsx)( 15808 import_components32.SelectControl, 15809 { 15810 className: "dataviews-controls__relative-date-unit", 15811 __next40pxDefaultSize: true, 15812 label: (0, import_i18n32.__)("Unit"), 15813 value: unit, 15814 options, 15815 onChange: onChangeUnit, 15816 hideLabelFromVision: true 15817 } 15818 ) 15819 ] }) 15820 } 15821 ); 15822 } 15823 15824 // packages/dataviews/build-module/field-types/utils/parse-date-time.mjs 15825 var import_date2 = __toESM(require_date(), 1); 15826 function parseDateTime(dateTimeString) { 15827 if (!dateTimeString) { 15828 return null; 15829 } 15830 const parsed = (0, import_date2.getDate)(dateTimeString); 15831 return parsed && isValid(parsed) ? parsed : null; 15832 } 15833 15834 // packages/dataviews/build-module/components/dataform-controls/datetime.mjs 15835 var import_jsx_runtime90 = __toESM(require_jsx_runtime(), 1); 15836 var { DateCalendar, ValidatedInputControl } = unlock(import_components33.privateApis); 15837 var formatDateTime = (value) => { 15838 if (!value) { 15839 return ""; 15840 } 15841 return (0, import_date3.dateI18n)("Y-m-d\\TH:i", (0, import_date3.getDate)(value)); 15842 }; 15843 function CalendarDateTimeControl({ 15844 data, 15845 field, 15846 onChange, 15847 hideLabelFromVision, 15848 markWhenOptional, 15849 validity, 15850 config 15851 }) { 15852 const { compact } = config || {}; 15853 const { id, label, description, setValue, getValue, isValid: isValid2 } = field; 15854 const fieldValue = getValue({ item: data }); 15855 const value = typeof fieldValue === "string" ? fieldValue : void 0; 15856 const [calendarMonth, setCalendarMonth] = (0, import_element59.useState)(() => { 15857 const parsedDate = parseDateTime(value); 15858 return parsedDate || /* @__PURE__ */ new Date(); 15859 }); 15860 const inputControlRef = (0, import_element59.useRef)(null); 15861 const validationTimeoutRef = (0, import_element59.useRef)(void 0); 15862 const previousFocusRef = (0, import_element59.useRef)(null); 15863 const onChangeCallback = (0, import_element59.useCallback)( 15864 (newValue) => onChange(setValue({ item: data, value: newValue })), 15865 [data, onChange, setValue] 15866 ); 15867 (0, import_element59.useEffect)(() => { 15868 return () => { 15869 if (validationTimeoutRef.current) { 15870 clearTimeout(validationTimeoutRef.current); 15871 } 15872 }; 15873 }, []); 15874 const onSelectDate = (0, import_element59.useCallback)( 15875 (newDate) => { 15876 let dateTimeValue; 15877 if (newDate) { 15878 const wpDate = (0, import_date3.dateI18n)("Y-m-d", newDate); 15879 let wpTime; 15880 if (value) { 15881 wpTime = (0, import_date3.dateI18n)("H:i", (0, import_date3.getDate)(value)); 15882 } else { 15883 wpTime = (0, import_date3.dateI18n)("H:i", newDate); 15884 } 15885 const finalDateTime = (0, import_date3.getDate)(`$wpDate}T$wpTime}`); 15886 dateTimeValue = finalDateTime.toISOString(); 15887 onChangeCallback(dateTimeValue); 15888 if (validationTimeoutRef.current) { 15889 clearTimeout(validationTimeoutRef.current); 15890 } 15891 } else { 15892 onChangeCallback(void 0); 15893 } 15894 previousFocusRef.current = inputControlRef.current && inputControlRef.current.ownerDocument.activeElement; 15895 validationTimeoutRef.current = setTimeout(() => { 15896 if (inputControlRef.current) { 15897 inputControlRef.current.focus(); 15898 inputControlRef.current.blur(); 15899 onChangeCallback(dateTimeValue); 15900 if (previousFocusRef.current && previousFocusRef.current instanceof HTMLElement) { 15901 previousFocusRef.current.focus(); 15902 } 15903 } 15904 }, 0); 15905 }, 15906 [onChangeCallback, value] 15907 ); 15908 const handleManualDateTimeChange = (0, import_element59.useCallback)( 15909 (newValue) => { 15910 if (newValue) { 15911 const dateTime = (0, import_date3.getDate)(newValue); 15912 onChangeCallback(dateTime.toISOString()); 15913 const parsedDate = parseDateTime(dateTime.toISOString()); 15914 if (parsedDate) { 15915 setCalendarMonth(parsedDate); 15916 } 15917 } else { 15918 onChangeCallback(void 0); 15919 } 15920 }, 15921 [onChangeCallback] 15922 ); 15923 const { format: fieldFormat } = field; 15924 const weekStartsOn = fieldFormat.weekStartsOn ?? (0, import_date3.getSettings)().l10n.startOfWeek; 15925 const { 15926 timezone: { string: timezoneString } 15927 } = (0, import_date3.getSettings)(); 15928 let displayLabel = label; 15929 if (isValid2?.required && !markWhenOptional && !hideLabelFromVision) { 15930 displayLabel = `$label} (${(0, import_i18n33.__)("Required")})`; 15931 } else if (!isValid2?.required && markWhenOptional && !hideLabelFromVision) { 15932 displayLabel = `$label} (${(0, import_i18n33.__)("Optional")})`; 15933 } 15934 return /* @__PURE__ */ (0, import_jsx_runtime90.jsx)( 15935 import_components33.BaseControl, 15936 { 15937 id, 15938 label: displayLabel, 15939 help: description, 15940 hideLabelFromVision, 15941 children: /* @__PURE__ */ (0, import_jsx_runtime90.jsxs)(Stack, { direction: "column", gap: "lg", children: [ 15942 /* @__PURE__ */ (0, import_jsx_runtime90.jsx)( 15943 ValidatedInputControl, 15944 { 15945 ref: inputControlRef, 15946 __next40pxDefaultSize: true, 15947 required: !!isValid2?.required, 15948 customValidity: getCustomValidity(isValid2, validity), 15949 type: "datetime-local", 15950 label: (0, import_i18n33.__)("Date time"), 15951 hideLabelFromVision: true, 15952 value: formatDateTime(value), 15953 onChange: handleManualDateTimeChange 15954 } 15955 ), 15956 !compact && /* @__PURE__ */ (0, import_jsx_runtime90.jsx)( 15957 DateCalendar, 15958 { 15959 style: { width: "100%" }, 15960 selected: value ? parseDateTime(value) || void 0 : void 0, 15961 onSelect: onSelectDate, 15962 month: calendarMonth, 15963 onMonthChange: setCalendarMonth, 15964 timeZone: timezoneString || void 0, 15965 weekStartsOn 15966 } 15967 ) 15968 ] }) 15969 } 15970 ); 15971 } 15972 function DateTime({ 15973 data, 15974 field, 15975 onChange, 15976 hideLabelFromVision, 15977 markWhenOptional, 15978 operator, 15979 validity, 15980 config 15981 }) { 15982 if (operator === OPERATOR_IN_THE_PAST || operator === OPERATOR_OVER) { 15983 return /* @__PURE__ */ (0, import_jsx_runtime90.jsx)( 15984 RelativeDateControl, 15985 { 15986 className: "dataviews-controls__datetime", 15987 data, 15988 field, 15989 onChange, 15990 hideLabelFromVision, 15991 operator 15992 } 15993 ); 15994 } 15995 return /* @__PURE__ */ (0, import_jsx_runtime90.jsx)( 15996 CalendarDateTimeControl, 15997 { 15998 data, 15999 field, 16000 onChange, 16001 hideLabelFromVision, 16002 markWhenOptional, 16003 validity, 16004 config 16005 } 16006 ); 16007 } 16008 16009 // packages/dataviews/build-module/components/dataform-controls/date.mjs 16010 var import_components34 = __toESM(require_components(), 1); 16011 var import_element60 = __toESM(require_element(), 1); 16012 var import_i18n34 = __toESM(require_i18n(), 1); 16013 var import_date4 = __toESM(require_date(), 1); 16014 var import_jsx_runtime91 = __toESM(require_jsx_runtime(), 1); 16015 var { DateCalendar: DateCalendar2, DateRangeCalendar } = unlock(import_components34.privateApis); 16016 var DATE_PRESETS = [ 16017 { 16018 id: "today", 16019 label: (0, import_i18n34.__)("Today"), 16020 getValue: () => (0, import_date4.getDate)(null) 16021 }, 16022 { 16023 id: "yesterday", 16024 label: (0, import_i18n34.__)("Yesterday"), 16025 getValue: () => { 16026 const today = (0, import_date4.getDate)(null); 16027 return subDays(today, 1); 16028 } 16029 }, 16030 { 16031 id: "past-week", 16032 label: (0, import_i18n34.__)("Past week"), 16033 getValue: () => { 16034 const today = (0, import_date4.getDate)(null); 16035 return subDays(today, 7); 16036 } 16037 }, 16038 { 16039 id: "past-month", 16040 label: (0, import_i18n34.__)("Past month"), 16041 getValue: () => { 16042 const today = (0, import_date4.getDate)(null); 16043 return subMonths(today, 1); 16044 } 16045 } 16046 ]; 16047 var DATE_RANGE_PRESETS = [ 16048 { 16049 id: "last-7-days", 16050 label: (0, import_i18n34.__)("Last 7 days"), 16051 getValue: () => { 16052 const today = (0, import_date4.getDate)(null); 16053 return [subDays(today, 7), today]; 16054 } 16055 }, 16056 { 16057 id: "last-30-days", 16058 label: (0, import_i18n34.__)("Last 30 days"), 16059 getValue: () => { 16060 const today = (0, import_date4.getDate)(null); 16061 return [subDays(today, 30), today]; 16062 } 16063 }, 16064 { 16065 id: "month-to-date", 16066 label: (0, import_i18n34.__)("Month to date"), 16067 getValue: () => { 16068 const today = (0, import_date4.getDate)(null); 16069 return [startOfMonth(today), today]; 16070 } 16071 }, 16072 { 16073 id: "last-year", 16074 label: (0, import_i18n34.__)("Last year"), 16075 getValue: () => { 16076 const today = (0, import_date4.getDate)(null); 16077 return [subYears(today, 1), today]; 16078 } 16079 }, 16080 { 16081 id: "year-to-date", 16082 label: (0, import_i18n34.__)("Year to date"), 16083 getValue: () => { 16084 const today = (0, import_date4.getDate)(null); 16085 return [startOfYear(today), today]; 16086 } 16087 } 16088 ]; 16089 var parseDate = (dateString) => { 16090 if (!dateString) { 16091 return null; 16092 } 16093 const parsed = (0, import_date4.getDate)(dateString); 16094 return parsed && isValid(parsed) ? parsed : null; 16095 }; 16096 var formatDate = (date) => { 16097 if (!date) { 16098 return ""; 16099 } 16100 return typeof date === "string" ? date : format(date, "yyyy-MM-dd"); 16101 }; 16102 function ValidatedDateControl({ 16103 field, 16104 validity, 16105 inputRefs, 16106 isTouched, 16107 setIsTouched, 16108 children 16109 }) { 16110 const { isValid: isValid2 } = field; 16111 const [customValidity, setCustomValidity] = (0, import_element60.useState)(void 0); 16112 const validateRefs = (0, import_element60.useCallback)(() => { 16113 const refs = Array.isArray(inputRefs) ? inputRefs : [inputRefs]; 16114 for (const ref of refs) { 16115 const input = ref.current; 16116 if (input && !input.validity.valid) { 16117 setCustomValidity({ 16118 type: "invalid", 16119 message: input.validationMessage 16120 }); 16121 return; 16122 } 16123 } 16124 setCustomValidity(void 0); 16125 }, [inputRefs]); 16126 (0, import_element60.useEffect)(() => { 16127 const refs = Array.isArray(inputRefs) ? inputRefs : [inputRefs]; 16128 const result = validity ? getCustomValidity(isValid2, validity) : void 0; 16129 for (const ref of refs) { 16130 const input = ref.current; 16131 if (input) { 16132 input.setCustomValidity( 16133 result?.type === "invalid" && result.message ? result.message : "" 16134 ); 16135 } 16136 } 16137 }, [inputRefs, isValid2, validity]); 16138 (0, import_element60.useEffect)(() => { 16139 const refs = Array.isArray(inputRefs) ? inputRefs : [inputRefs]; 16140 const handleInvalid = (event) => { 16141 event.preventDefault(); 16142 setIsTouched(true); 16143 }; 16144 for (const ref of refs) { 16145 ref.current?.addEventListener("invalid", handleInvalid); 16146 } 16147 return () => { 16148 for (const ref of refs) { 16149 ref.current?.removeEventListener("invalid", handleInvalid); 16150 } 16151 }; 16152 }, [inputRefs, setIsTouched]); 16153 (0, import_element60.useEffect)(() => { 16154 if (!isTouched) { 16155 return; 16156 } 16157 const result = validity ? getCustomValidity(isValid2, validity) : void 0; 16158 if (result) { 16159 setCustomValidity(result); 16160 } else { 16161 validateRefs(); 16162 } 16163 }, [isTouched, isValid2, validity, validateRefs]); 16164 const onBlur = (event) => { 16165 if (isTouched) { 16166 return; 16167 } 16168 if (!event.relatedTarget || !event.currentTarget.contains(event.relatedTarget)) { 16169 setIsTouched(true); 16170 } 16171 }; 16172 return /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("div", { onBlur, children: [ 16173 children, 16174 /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("div", { "aria-live": "polite", children: customValidity && /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)( 16175 "p", 16176 { 16177 className: clsx_default( 16178 "components-validated-control__indicator", 16179 customValidity.type === "invalid" ? "is-invalid" : void 0 16180 ), 16181 children: [ 16182 /* @__PURE__ */ (0, import_jsx_runtime91.jsx)( 16183 import_components34.Icon, 16184 { 16185 className: "components-validated-control__indicator-icon", 16186 icon: error_default, 16187 size: 16, 16188 fill: "currentColor" 16189 } 16190 ), 16191 customValidity.message 16192 ] 16193 } 16194 ) }) 16195 ] }); 16196 } 16197 function CalendarDateControl({ 16198 data, 16199 field, 16200 onChange, 16201 hideLabelFromVision, 16202 markWhenOptional, 16203 validity 16204 }) { 16205 const { 16206 id, 16207 label, 16208 description, 16209 setValue, 16210 getValue, 16211 isValid: isValid2, 16212 format: fieldFormat 16213 } = field; 16214 const [selectedPresetId, setSelectedPresetId] = (0, import_element60.useState)( 16215 null 16216 ); 16217 const weekStartsOn = fieldFormat.weekStartsOn ?? (0, import_date4.getSettings)().l10n.startOfWeek; 16218 const fieldValue = getValue({ item: data }); 16219 const value = typeof fieldValue === "string" ? fieldValue : void 0; 16220 const [calendarMonth, setCalendarMonth] = (0, import_element60.useState)(() => { 16221 const parsedDate = parseDate(value); 16222 return parsedDate || /* @__PURE__ */ new Date(); 16223 }); 16224 const [isTouched, setIsTouched] = (0, import_element60.useState)(false); 16225 const validityTargetRef = (0, import_element60.useRef)(null); 16226 const onChangeCallback = (0, import_element60.useCallback)( 16227 (newValue) => onChange(setValue({ item: data, value: newValue })), 16228 [data, onChange, setValue] 16229 ); 16230 const onSelectDate = (0, import_element60.useCallback)( 16231 (newDate) => { 16232 const dateValue = newDate ? format(newDate, "yyyy-MM-dd") : void 0; 16233 onChangeCallback(dateValue); 16234 setSelectedPresetId(null); 16235 setIsTouched(true); 16236 }, 16237 [onChangeCallback] 16238 ); 16239 const handlePresetClick = (0, import_element60.useCallback)( 16240 (preset) => { 16241 const presetDate = preset.getValue(); 16242 const dateValue = formatDate(presetDate); 16243 setCalendarMonth(presetDate); 16244 onChangeCallback(dateValue); 16245 setSelectedPresetId(preset.id); 16246 setIsTouched(true); 16247 }, 16248 [onChangeCallback] 16249 ); 16250 const handleManualDateChange = (0, import_element60.useCallback)( 16251 (newValue) => { 16252 onChangeCallback(newValue); 16253 if (newValue) { 16254 const parsedDate = parseDate(newValue); 16255 if (parsedDate) { 16256 setCalendarMonth(parsedDate); 16257 } 16258 } 16259 setSelectedPresetId(null); 16260 setIsTouched(true); 16261 }, 16262 [onChangeCallback] 16263 ); 16264 const { 16265 timezone: { string: timezoneString } 16266 } = (0, import_date4.getSettings)(); 16267 let displayLabel = label; 16268 if (isValid2?.required && !markWhenOptional) { 16269 displayLabel = `$label} (${(0, import_i18n34.__)("Required")})`; 16270 } else if (!isValid2?.required && markWhenOptional) { 16271 displayLabel = `$label} (${(0, import_i18n34.__)("Optional")})`; 16272 } 16273 return /* @__PURE__ */ (0, import_jsx_runtime91.jsx)( 16274 ValidatedDateControl, 16275 { 16276 field, 16277 validity, 16278 inputRefs: validityTargetRef, 16279 isTouched, 16280 setIsTouched, 16281 children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)( 16282 import_components34.BaseControl, 16283 { 16284 id, 16285 className: "dataviews-controls__date", 16286 label: displayLabel, 16287 help: description, 16288 hideLabelFromVision, 16289 children: /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(Stack, { direction: "column", gap: "lg", children: [ 16290 /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)( 16291 Stack, 16292 { 16293 direction: "row", 16294 gap: "sm", 16295 wrap: "wrap", 16296 justify: "flex-start", 16297 children: [ 16298 DATE_PRESETS.map((preset) => { 16299 const isSelected2 = selectedPresetId === preset.id; 16300 return /* @__PURE__ */ (0, import_jsx_runtime91.jsx)( 16301 import_components34.Button, 16302 { 16303 className: "dataviews-controls__date-preset", 16304 variant: "tertiary", 16305 isPressed: isSelected2, 16306 size: "small", 16307 onClick: () => handlePresetClick(preset), 16308 children: preset.label 16309 }, 16310 preset.id 16311 ); 16312 }), 16313 /* @__PURE__ */ (0, import_jsx_runtime91.jsx)( 16314 import_components34.Button, 16315 { 16316 className: "dataviews-controls__date-preset", 16317 variant: "tertiary", 16318 isPressed: !selectedPresetId, 16319 size: "small", 16320 disabled: !!selectedPresetId, 16321 accessibleWhenDisabled: false, 16322 children: (0, import_i18n34.__)("Custom") 16323 } 16324 ) 16325 ] 16326 } 16327 ), 16328 /* @__PURE__ */ (0, import_jsx_runtime91.jsx)( 16329 import_components34.__experimentalInputControl, 16330 { 16331 __next40pxDefaultSize: true, 16332 ref: validityTargetRef, 16333 type: "date", 16334 label: (0, import_i18n34.__)("Date"), 16335 hideLabelFromVision: true, 16336 value, 16337 onChange: handleManualDateChange, 16338 required: !!field.isValid?.required 16339 } 16340 ), 16341 /* @__PURE__ */ (0, import_jsx_runtime91.jsx)( 16342 DateCalendar2, 16343 { 16344 style: { width: "100%" }, 16345 selected: value ? parseDate(value) || void 0 : void 0, 16346 onSelect: onSelectDate, 16347 month: calendarMonth, 16348 onMonthChange: setCalendarMonth, 16349 timeZone: timezoneString || void 0, 16350 weekStartsOn 16351 } 16352 ) 16353 ] }) 16354 } 16355 ) 16356 } 16357 ); 16358 } 16359 function CalendarDateRangeControl({ 16360 data, 16361 field, 16362 onChange, 16363 hideLabelFromVision, 16364 markWhenOptional, 16365 validity 16366 }) { 16367 const { 16368 id, 16369 label, 16370 description, 16371 getValue, 16372 setValue, 16373 format: fieldFormat 16374 } = field; 16375 let value; 16376 const fieldValue = getValue({ item: data }); 16377 if (Array.isArray(fieldValue) && fieldValue.length === 2 && fieldValue.every((date) => typeof date === "string")) { 16378 value = fieldValue; 16379 } 16380 const weekStartsOn = fieldFormat.weekStartsOn ?? (0, import_date4.getSettings)().l10n.startOfWeek; 16381 const onChangeCallback = (0, import_element60.useCallback)( 16382 (newValue) => { 16383 onChange( 16384 setValue({ 16385 item: data, 16386 value: newValue 16387 }) 16388 ); 16389 }, 16390 [data, onChange, setValue] 16391 ); 16392 const [selectedPresetId, setSelectedPresetId] = (0, import_element60.useState)( 16393 null 16394 ); 16395 const selectedRange = (0, import_element60.useMemo)(() => { 16396 if (!value) { 16397 return { from: void 0, to: void 0 }; 16398 } 16399 const [from, to] = value; 16400 return { 16401 from: parseDate(from) || void 0, 16402 to: parseDate(to) || void 0 16403 }; 16404 }, [value]); 16405 const [calendarMonth, setCalendarMonth] = (0, import_element60.useState)(() => { 16406 return selectedRange.from || /* @__PURE__ */ new Date(); 16407 }); 16408 const [isTouched, setIsTouched] = (0, import_element60.useState)(false); 16409 const fromInputRef = (0, import_element60.useRef)(null); 16410 const toInputRef = (0, import_element60.useRef)(null); 16411 const updateDateRange = (0, import_element60.useCallback)( 16412 (fromDate, toDate2) => { 16413 if (fromDate && toDate2) { 16414 onChangeCallback([ 16415 formatDate(fromDate), 16416 formatDate(toDate2) 16417 ]); 16418 } else if (!fromDate && !toDate2) { 16419 onChangeCallback(void 0); 16420 } 16421 }, 16422 [onChangeCallback] 16423 ); 16424 const onSelectCalendarRange = (0, import_element60.useCallback)( 16425 (newRange) => { 16426 updateDateRange(newRange?.from, newRange?.to); 16427 setSelectedPresetId(null); 16428 setIsTouched(true); 16429 }, 16430 [updateDateRange] 16431 ); 16432 const handlePresetClick = (0, import_element60.useCallback)( 16433 (preset) => { 16434 const [startDate, endDate] = preset.getValue(); 16435 setCalendarMonth(startDate); 16436 updateDateRange(startDate, endDate); 16437 setSelectedPresetId(preset.id); 16438 setIsTouched(true); 16439 }, 16440 [updateDateRange] 16441 ); 16442 const handleManualDateChange = (0, import_element60.useCallback)( 16443 (fromOrTo, newValue) => { 16444 const [currentFrom, currentTo] = value || [ 16445 void 0, 16446 void 0 16447 ]; 16448 const updatedFrom = fromOrTo === "from" ? newValue : currentFrom; 16449 const updatedTo = fromOrTo === "to" ? newValue : currentTo; 16450 updateDateRange(updatedFrom, updatedTo); 16451 if (newValue) { 16452 const parsedDate = parseDate(newValue); 16453 if (parsedDate) { 16454 setCalendarMonth(parsedDate); 16455 } 16456 } 16457 setSelectedPresetId(null); 16458 setIsTouched(true); 16459 }, 16460 [value, updateDateRange] 16461 ); 16462 const { timezone } = (0, import_date4.getSettings)(); 16463 let displayLabel = label; 16464 if (field.isValid?.required && !markWhenOptional) { 16465 displayLabel = `$label} (${(0, import_i18n34.__)("Required")})`; 16466 } else if (!field.isValid?.required && markWhenOptional) { 16467 displayLabel = `$label} (${(0, import_i18n34.__)("Optional")})`; 16468 } 16469 return /* @__PURE__ */ (0, import_jsx_runtime91.jsx)( 16470 ValidatedDateControl, 16471 { 16472 field, 16473 validity, 16474 inputRefs: [fromInputRef, toInputRef], 16475 isTouched, 16476 setIsTouched, 16477 children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)( 16478 import_components34.BaseControl, 16479 { 16480 id, 16481 className: "dataviews-controls__date", 16482 label: displayLabel, 16483 help: description, 16484 hideLabelFromVision, 16485 children: /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(Stack, { direction: "column", gap: "lg", children: [ 16486 /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)( 16487 Stack, 16488 { 16489 direction: "row", 16490 gap: "sm", 16491 wrap: "wrap", 16492 justify: "flex-start", 16493 children: [ 16494 DATE_RANGE_PRESETS.map((preset) => { 16495 const isSelected2 = selectedPresetId === preset.id; 16496 return /* @__PURE__ */ (0, import_jsx_runtime91.jsx)( 16497 import_components34.Button, 16498 { 16499 className: "dataviews-controls__date-preset", 16500 variant: "tertiary", 16501 isPressed: isSelected2, 16502 size: "small", 16503 onClick: () => handlePresetClick(preset), 16504 children: preset.label 16505 }, 16506 preset.id 16507 ); 16508 }), 16509 /* @__PURE__ */ (0, import_jsx_runtime91.jsx)( 16510 import_components34.Button, 16511 { 16512 className: "dataviews-controls__date-preset", 16513 variant: "tertiary", 16514 isPressed: !selectedPresetId, 16515 size: "small", 16516 accessibleWhenDisabled: false, 16517 disabled: !!selectedPresetId, 16518 children: (0, import_i18n34.__)("Custom") 16519 } 16520 ) 16521 ] 16522 } 16523 ), 16524 /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)( 16525 Stack, 16526 { 16527 direction: "row", 16528 gap: "sm", 16529 justify: "space-between", 16530 className: "dataviews-controls__date-range-inputs", 16531 children: [ 16532 /* @__PURE__ */ (0, import_jsx_runtime91.jsx)( 16533 import_components34.__experimentalInputControl, 16534 { 16535 __next40pxDefaultSize: true, 16536 ref: fromInputRef, 16537 type: "date", 16538 label: (0, import_i18n34.__)("From"), 16539 hideLabelFromVision: true, 16540 value: value?.[0], 16541 onChange: (newValue) => handleManualDateChange("from", newValue), 16542 required: !!field.isValid?.required 16543 } 16544 ), 16545 /* @__PURE__ */ (0, import_jsx_runtime91.jsx)( 16546 import_components34.__experimentalInputControl, 16547 { 16548 __next40pxDefaultSize: true, 16549 ref: toInputRef, 16550 type: "date", 16551 label: (0, import_i18n34.__)("To"), 16552 hideLabelFromVision: true, 16553 value: value?.[1], 16554 onChange: (newValue) => handleManualDateChange("to", newValue), 16555 required: !!field.isValid?.required 16556 } 16557 ) 16558 ] 16559 } 16560 ), 16561 /* @__PURE__ */ (0, import_jsx_runtime91.jsx)( 16562 DateRangeCalendar, 16563 { 16564 style: { width: "100%" }, 16565 selected: selectedRange, 16566 onSelect: onSelectCalendarRange, 16567 month: calendarMonth, 16568 onMonthChange: setCalendarMonth, 16569 timeZone: timezone.string || void 0, 16570 weekStartsOn 16571 } 16572 ) 16573 ] }) 16574 } 16575 ) 16576 } 16577 ); 16578 } 16579 function DateControl({ 16580 data, 16581 field, 16582 onChange, 16583 hideLabelFromVision, 16584 markWhenOptional, 16585 operator, 16586 validity 16587 }) { 16588 if (operator === OPERATOR_IN_THE_PAST || operator === OPERATOR_OVER) { 16589 return /* @__PURE__ */ (0, import_jsx_runtime91.jsx)( 16590 RelativeDateControl, 16591 { 16592 className: "dataviews-controls__date", 16593 data, 16594 field, 16595 onChange, 16596 hideLabelFromVision, 16597 operator 16598 } 16599 ); 16600 } 16601 if (operator === OPERATOR_BETWEEN) { 16602 return /* @__PURE__ */ (0, import_jsx_runtime91.jsx)( 16603 CalendarDateRangeControl, 16604 { 16605 data, 16606 field, 16607 onChange, 16608 hideLabelFromVision, 16609 markWhenOptional, 16610 validity 16611 } 16612 ); 16613 } 16614 return /* @__PURE__ */ (0, import_jsx_runtime91.jsx)( 16615 CalendarDateControl, 16616 { 16617 data, 16618 field, 16619 onChange, 16620 hideLabelFromVision, 16621 markWhenOptional, 16622 validity 16623 } 16624 ); 16625 } 16626 16627 // packages/dataviews/build-module/components/dataform-controls/select.mjs 16628 var import_components35 = __toESM(require_components(), 1); 16629 var import_element61 = __toESM(require_element(), 1); 16630 var import_jsx_runtime92 = __toESM(require_jsx_runtime(), 1); 16631 var { ValidatedSelectControl } = unlock(import_components35.privateApis); 16632 function Select({ 16633 data, 16634 field, 16635 onChange, 16636 hideLabelFromVision, 16637 markWhenOptional, 16638 validity 16639 }) { 16640 const { type, label, description, getValue, setValue, isValid: isValid2 } = field; 16641 const isMultiple = type === "array"; 16642 const value = getValue({ item: data }) ?? (isMultiple ? [] : ""); 16643 const onChangeControl = (0, import_element61.useCallback)( 16644 (newValue) => onChange(setValue({ item: data, value: newValue })), 16645 [data, onChange, setValue] 16646 ); 16647 const { elements, isLoading } = useElements({ 16648 elements: field.elements, 16649 getElements: field.getElements 16650 }); 16651 if (isLoading) { 16652 return /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(import_components35.Spinner, {}); 16653 } 16654 return /* @__PURE__ */ (0, import_jsx_runtime92.jsx)( 16655 ValidatedSelectControl, 16656 { 16657 required: !!field.isValid?.required, 16658 markWhenOptional, 16659 customValidity: getCustomValidity(isValid2, validity), 16660 label, 16661 value, 16662 help: description, 16663 options: elements, 16664 onChange: onChangeControl, 16665 __next40pxDefaultSize: true, 16666 hideLabelFromVision, 16667 multiple: isMultiple 16668 } 16669 ); 16670 } 16671 16672 // packages/dataviews/build-module/components/dataform-controls/adaptive-select.mjs 16673 var import_jsx_runtime93 = __toESM(require_jsx_runtime(), 1); 16674 var ELEMENTS_THRESHOLD = 10; 16675 function AdaptiveSelect(props) { 16676 const { field } = props; 16677 const { elements } = useElements({ 16678 elements: field.elements, 16679 getElements: field.getElements 16680 }); 16681 if (elements.length >= ELEMENTS_THRESHOLD) { 16682 return /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(Combobox3, { ...props }); 16683 } 16684 return /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(Select, { ...props }); 16685 } 16686 16687 // packages/dataviews/build-module/components/dataform-controls/email.mjs 16688 var import_components37 = __toESM(require_components(), 1); 16689 16690 // packages/dataviews/build-module/components/dataform-controls/utils/validated-input.mjs 16691 var import_components36 = __toESM(require_components(), 1); 16692 var import_element62 = __toESM(require_element(), 1); 16693 var import_jsx_runtime94 = __toESM(require_jsx_runtime(), 1); 16694 var { ValidatedInputControl: ValidatedInputControl2 } = unlock(import_components36.privateApis); 16695 function ValidatedText({ 16696 data, 16697 field, 16698 onChange, 16699 hideLabelFromVision, 16700 markWhenOptional, 16701 type, 16702 prefix, 16703 suffix, 16704 validity 16705 }) { 16706 const { label, placeholder, description, getValue, setValue, isValid: isValid2 } = field; 16707 const value = getValue({ item: data }); 16708 const onChangeControl = (0, import_element62.useCallback)( 16709 (newValue) => onChange( 16710 setValue({ 16711 item: data, 16712 value: newValue 16713 }) 16714 ), 16715 [data, setValue, onChange] 16716 ); 16717 return /* @__PURE__ */ (0, import_jsx_runtime94.jsx)( 16718 ValidatedInputControl2, 16719 { 16720 required: !!isValid2.required, 16721 markWhenOptional, 16722 customValidity: getCustomValidity(isValid2, validity), 16723 label, 16724 placeholder, 16725 value: value ?? "", 16726 help: description, 16727 onChange: onChangeControl, 16728 hideLabelFromVision, 16729 type, 16730 prefix, 16731 suffix, 16732 pattern: isValid2.pattern ? isValid2.pattern.constraint : void 0, 16733 minLength: isValid2.minLength ? isValid2.minLength.constraint : void 0, 16734 maxLength: isValid2.maxLength ? isValid2.maxLength.constraint : void 0, 16735 __next40pxDefaultSize: true 16736 } 16737 ); 16738 } 16739 16740 // packages/dataviews/build-module/components/dataform-controls/email.mjs 16741 var import_jsx_runtime95 = __toESM(require_jsx_runtime(), 1); 16742 function Email({ 16743 data, 16744 field, 16745 onChange, 16746 hideLabelFromVision, 16747 markWhenOptional, 16748 validity 16749 }) { 16750 return /* @__PURE__ */ (0, import_jsx_runtime95.jsx)( 16751 ValidatedText, 16752 { 16753 ...{ 16754 data, 16755 field, 16756 onChange, 16757 hideLabelFromVision, 16758 markWhenOptional, 16759 validity, 16760 type: "email", 16761 prefix: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(import_components37.__experimentalInputControlPrefixWrapper, { variant: "icon", children: /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(import_components37.Icon, { icon: envelope_default }) }) 16762 } 16763 } 16764 ); 16765 } 16766 16767 // packages/dataviews/build-module/components/dataform-controls/telephone.mjs 16768 var import_components38 = __toESM(require_components(), 1); 16769 var import_jsx_runtime96 = __toESM(require_jsx_runtime(), 1); 16770 function Telephone({ 16771 data, 16772 field, 16773 onChange, 16774 hideLabelFromVision, 16775 markWhenOptional, 16776 validity 16777 }) { 16778 return /* @__PURE__ */ (0, import_jsx_runtime96.jsx)( 16779 ValidatedText, 16780 { 16781 ...{ 16782 data, 16783 field, 16784 onChange, 16785 hideLabelFromVision, 16786 markWhenOptional, 16787 validity, 16788 type: "tel", 16789 prefix: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(import_components38.__experimentalInputControlPrefixWrapper, { variant: "icon", children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(import_components38.Icon, { icon: mobile_default }) }) 16790 } 16791 } 16792 ); 16793 } 16794 16795 // packages/dataviews/build-module/components/dataform-controls/url.mjs 16796 var import_components39 = __toESM(require_components(), 1); 16797 var import_jsx_runtime97 = __toESM(require_jsx_runtime(), 1); 16798 function Url({ 16799 data, 16800 field, 16801 onChange, 16802 hideLabelFromVision, 16803 markWhenOptional, 16804 validity 16805 }) { 16806 return /* @__PURE__ */ (0, import_jsx_runtime97.jsx)( 16807 ValidatedText, 16808 { 16809 ...{ 16810 data, 16811 field, 16812 onChange, 16813 hideLabelFromVision, 16814 markWhenOptional, 16815 validity, 16816 type: "url", 16817 prefix: /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(import_components39.__experimentalInputControlPrefixWrapper, { variant: "icon", children: /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(import_components39.Icon, { icon: link_default }) }) 16818 } 16819 } 16820 ); 16821 } 16822 16823 // packages/dataviews/build-module/components/dataform-controls/utils/validated-number.mjs 16824 var import_components40 = __toESM(require_components(), 1); 16825 var import_element63 = __toESM(require_element(), 1); 16826 var import_i18n35 = __toESM(require_i18n(), 1); 16827 var import_jsx_runtime98 = __toESM(require_jsx_runtime(), 1); 16828 var { ValidatedNumberControl } = unlock(import_components40.privateApis); 16829 function toNumberOrEmpty(value) { 16830 if (value === "" || value === void 0) { 16831 return ""; 16832 } 16833 const number = Number(value); 16834 return Number.isFinite(number) ? number : ""; 16835 } 16836 function BetweenControls({ 16837 value, 16838 onChange, 16839 hideLabelFromVision, 16840 step 16841 }) { 16842 const [min = "", max = ""] = value; 16843 const onChangeMin = (0, import_element63.useCallback)( 16844 (newValue) => onChange([toNumberOrEmpty(newValue), max]), 16845 [onChange, max] 16846 ); 16847 const onChangeMax = (0, import_element63.useCallback)( 16848 (newValue) => onChange([min, toNumberOrEmpty(newValue)]), 16849 [onChange, min] 16850 ); 16851 return /* @__PURE__ */ (0, import_jsx_runtime98.jsx)( 16852 import_components40.BaseControl, 16853 { 16854 help: (0, import_i18n35.__)("The max. value must be greater than the min. value."), 16855 children: /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)(import_components40.Flex, { direction: "row", gap: 4, children: [ 16856 /* @__PURE__ */ (0, import_jsx_runtime98.jsx)( 16857 import_components40.__experimentalNumberControl, 16858 { 16859 label: (0, import_i18n35.__)("Min."), 16860 value: min, 16861 max: max ? Number(max) - step : void 0, 16862 onChange: onChangeMin, 16863 __next40pxDefaultSize: true, 16864 hideLabelFromVision, 16865 step 16866 } 16867 ), 16868 /* @__PURE__ */ (0, import_jsx_runtime98.jsx)( 16869 import_components40.__experimentalNumberControl, 16870 { 16871 label: (0, import_i18n35.__)("Max."), 16872 value: max, 16873 min: min ? Number(min) + step : void 0, 16874 onChange: onChangeMax, 16875 __next40pxDefaultSize: true, 16876 hideLabelFromVision, 16877 step 16878 } 16879 ) 16880 ] }) 16881 } 16882 ); 16883 } 16884 function ValidatedNumber({ 16885 data, 16886 field, 16887 onChange, 16888 hideLabelFromVision, 16889 markWhenOptional, 16890 operator, 16891 validity 16892 }) { 16893 const decimals = field.format?.decimals ?? 0; 16894 const step = Math.pow(10, Math.abs(decimals) * -1); 16895 const { label, description, getValue, setValue, isValid: isValid2 } = field; 16896 const value = getValue({ item: data }) ?? ""; 16897 const onChangeControl = (0, import_element63.useCallback)( 16898 (newValue) => { 16899 onChange( 16900 setValue({ 16901 item: data, 16902 // Do not convert an empty string or undefined to a number, 16903 // otherwise there's a mismatch between the UI control (empty) 16904 // and the data relied by onChange (0). 16905 value: ["", void 0].includes(newValue) ? void 0 : Number(newValue) 16906 }) 16907 ); 16908 }, 16909 [data, onChange, setValue] 16910 ); 16911 const onChangeBetweenControls = (0, import_element63.useCallback)( 16912 (newValue) => { 16913 onChange( 16914 setValue({ 16915 item: data, 16916 value: newValue 16917 }) 16918 ); 16919 }, 16920 [data, onChange, setValue] 16921 ); 16922 if (operator === OPERATOR_BETWEEN) { 16923 let valueBetween = ["", ""]; 16924 if (Array.isArray(value) && value.length === 2 && value.every( 16925 (element) => typeof element === "number" || element === "" 16926 )) { 16927 valueBetween = value; 16928 } 16929 return /* @__PURE__ */ (0, import_jsx_runtime98.jsx)( 16930 BetweenControls, 16931 { 16932 value: valueBetween, 16933 onChange: onChangeBetweenControls, 16934 hideLabelFromVision, 16935 step 16936 } 16937 ); 16938 } 16939 return /* @__PURE__ */ (0, import_jsx_runtime98.jsx)( 16940 ValidatedNumberControl, 16941 { 16942 required: !!isValid2.required, 16943 markWhenOptional, 16944 customValidity: getCustomValidity(isValid2, validity), 16945 label, 16946 help: description, 16947 value, 16948 onChange: onChangeControl, 16949 __next40pxDefaultSize: true, 16950 hideLabelFromVision, 16951 step, 16952 min: isValid2.min ? isValid2.min.constraint : void 0, 16953 max: isValid2.max ? isValid2.max.constraint : void 0 16954 } 16955 ); 16956 } 16957 16958 // packages/dataviews/build-module/components/dataform-controls/integer.mjs 16959 var import_jsx_runtime99 = __toESM(require_jsx_runtime(), 1); 16960 function Integer(props) { 16961 return /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(ValidatedNumber, { ...props }); 16962 } 16963 16964 // packages/dataviews/build-module/components/dataform-controls/number.mjs 16965 var import_jsx_runtime100 = __toESM(require_jsx_runtime(), 1); 16966 function Number2(props) { 16967 return /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(ValidatedNumber, { ...props }); 16968 } 16969 16970 // packages/dataviews/build-module/components/dataform-controls/radio.mjs 16971 var import_components41 = __toESM(require_components(), 1); 16972 var import_element64 = __toESM(require_element(), 1); 16973 var import_jsx_runtime101 = __toESM(require_jsx_runtime(), 1); 16974 var { ValidatedRadioControl } = unlock(import_components41.privateApis); 16975 function Radio({ 16976 data, 16977 field, 16978 onChange, 16979 hideLabelFromVision, 16980 markWhenOptional, 16981 validity 16982 }) { 16983 const { label, description, getValue, setValue, isValid: isValid2 } = field; 16984 const { elements, isLoading } = useElements({ 16985 elements: field.elements, 16986 getElements: field.getElements 16987 }); 16988 const value = getValue({ item: data }); 16989 const onChangeControl = (0, import_element64.useCallback)( 16990 (newValue) => onChange(setValue({ item: data, value: newValue })), 16991 [data, onChange, setValue] 16992 ); 16993 if (isLoading) { 16994 return /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(import_components41.Spinner, {}); 16995 } 16996 return /* @__PURE__ */ (0, import_jsx_runtime101.jsx)( 16997 ValidatedRadioControl, 16998 { 16999 required: !!field.isValid?.required, 17000 markWhenOptional, 17001 customValidity: getCustomValidity(isValid2, validity), 17002 label, 17003 help: description, 17004 onChange: onChangeControl, 17005 options: elements, 17006 selected: value, 17007 hideLabelFromVision 17008 } 17009 ); 17010 } 17011 17012 // packages/dataviews/build-module/components/dataform-controls/text.mjs 17013 var import_element65 = __toESM(require_element(), 1); 17014 var import_jsx_runtime102 = __toESM(require_jsx_runtime(), 1); 17015 function Text4({ 17016 data, 17017 field, 17018 onChange, 17019 hideLabelFromVision, 17020 markWhenOptional, 17021 config, 17022 validity 17023 }) { 17024 const { prefix, suffix } = config || {}; 17025 return /* @__PURE__ */ (0, import_jsx_runtime102.jsx)( 17026 ValidatedText, 17027 { 17028 ...{ 17029 data, 17030 field, 17031 onChange, 17032 hideLabelFromVision, 17033 markWhenOptional, 17034 validity, 17035 prefix: prefix ? (0, import_element65.createElement)(prefix) : void 0, 17036 suffix: suffix ? (0, import_element65.createElement)(suffix) : void 0 17037 } 17038 } 17039 ); 17040 } 17041 17042 // packages/dataviews/build-module/components/dataform-controls/toggle.mjs 17043 var import_components42 = __toESM(require_components(), 1); 17044 var import_element66 = __toESM(require_element(), 1); 17045 var import_jsx_runtime103 = __toESM(require_jsx_runtime(), 1); 17046 var { ValidatedToggleControl } = unlock(import_components42.privateApis); 17047 function Toggle({ 17048 field, 17049 onChange, 17050 data, 17051 hideLabelFromVision, 17052 markWhenOptional, 17053 validity 17054 }) { 17055 const { label, description, getValue, setValue, isValid: isValid2 } = field; 17056 const onChangeControl = (0, import_element66.useCallback)(() => { 17057 onChange( 17058 setValue({ item: data, value: !getValue({ item: data }) }) 17059 ); 17060 }, [onChange, setValue, data, getValue]); 17061 return /* @__PURE__ */ (0, import_jsx_runtime103.jsx)( 17062 ValidatedToggleControl, 17063 { 17064 required: !!isValid2.required, 17065 markWhenOptional, 17066 customValidity: getCustomValidity(isValid2, validity), 17067 hidden: hideLabelFromVision, 17068 label, 17069 help: description, 17070 checked: getValue({ item: data }), 17071 onChange: onChangeControl 17072 } 17073 ); 17074 } 17075 17076 // packages/dataviews/build-module/components/dataform-controls/textarea.mjs 17077 var import_components43 = __toESM(require_components(), 1); 17078 var import_element67 = __toESM(require_element(), 1); 17079 var import_jsx_runtime104 = __toESM(require_jsx_runtime(), 1); 17080 var { ValidatedTextareaControl } = unlock(import_components43.privateApis); 17081 function Textarea({ 17082 data, 17083 field, 17084 onChange, 17085 hideLabelFromVision, 17086 markWhenOptional, 17087 config, 17088 validity 17089 }) { 17090 const { rows = 4 } = config || {}; 17091 const { label, placeholder, description, setValue, isValid: isValid2 } = field; 17092 const value = field.getValue({ item: data }); 17093 const onChangeControl = (0, import_element67.useCallback)( 17094 (newValue) => onChange(setValue({ item: data, value: newValue })), 17095 [data, onChange, setValue] 17096 ); 17097 return /* @__PURE__ */ (0, import_jsx_runtime104.jsx)( 17098 ValidatedTextareaControl, 17099 { 17100 required: !!isValid2.required, 17101 markWhenOptional, 17102 customValidity: getCustomValidity(isValid2, validity), 17103 label, 17104 placeholder, 17105 value: value ?? "", 17106 help: description, 17107 onChange: onChangeControl, 17108 rows, 17109 minLength: isValid2.minLength ? isValid2.minLength.constraint : void 0, 17110 maxLength: isValid2.maxLength ? isValid2.maxLength.constraint : void 0, 17111 __next40pxDefaultSize: true, 17112 hideLabelFromVision 17113 } 17114 ); 17115 } 17116 17117 // packages/dataviews/build-module/components/dataform-controls/toggle-group.mjs 17118 var import_components44 = __toESM(require_components(), 1); 17119 var import_element68 = __toESM(require_element(), 1); 17120 var import_jsx_runtime105 = __toESM(require_jsx_runtime(), 1); 17121 var { ValidatedToggleGroupControl } = unlock(import_components44.privateApis); 17122 function ToggleGroup({ 17123 data, 17124 field, 17125 onChange, 17126 hideLabelFromVision, 17127 markWhenOptional, 17128 validity 17129 }) { 17130 const { getValue, setValue, isValid: isValid2 } = field; 17131 const value = getValue({ item: data }); 17132 const onChangeControl = (0, import_element68.useCallback)( 17133 (newValue) => onChange(setValue({ item: data, value: newValue })), 17134 [data, onChange, setValue] 17135 ); 17136 const { elements, isLoading } = useElements({ 17137 elements: field.elements, 17138 getElements: field.getElements 17139 }); 17140 if (isLoading) { 17141 return /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(import_components44.Spinner, {}); 17142 } 17143 if (elements.length === 0) { 17144 return null; 17145 } 17146 const selectedOption = elements.find((el) => el.value === value); 17147 return /* @__PURE__ */ (0, import_jsx_runtime105.jsx)( 17148 ValidatedToggleGroupControl, 17149 { 17150 required: !!field.isValid?.required, 17151 markWhenOptional, 17152 customValidity: getCustomValidity(isValid2, validity), 17153 __next40pxDefaultSize: true, 17154 isBlock: true, 17155 label: field.label, 17156 help: selectedOption?.description || field.description, 17157 onChange: onChangeControl, 17158 value, 17159 hideLabelFromVision, 17160 children: elements.map((el) => /* @__PURE__ */ (0, import_jsx_runtime105.jsx)( 17161 import_components44.__experimentalToggleGroupControlOption, 17162 { 17163 label: el.label, 17164 value: el.value 17165 }, 17166 el.value 17167 )) 17168 } 17169 ); 17170 } 17171 17172 // packages/dataviews/build-module/components/dataform-controls/array.mjs 17173 var import_components45 = __toESM(require_components(), 1); 17174 var import_element69 = __toESM(require_element(), 1); 17175 var import_jsx_runtime106 = __toESM(require_jsx_runtime(), 1); 17176 var { ValidatedFormTokenField } = unlock(import_components45.privateApis); 17177 function ArrayControl({ 17178 data, 17179 field, 17180 onChange, 17181 hideLabelFromVision, 17182 markWhenOptional, 17183 validity 17184 }) { 17185 const { label, placeholder, getValue, setValue, isValid: isValid2 } = field; 17186 const value = getValue({ item: data }); 17187 const { elements, isLoading } = useElements({ 17188 elements: field.elements, 17189 getElements: field.getElements 17190 }); 17191 const arrayValueAsElements = (0, import_element69.useMemo)( 17192 () => Array.isArray(value) ? value.map((token) => { 17193 const element = elements?.find( 17194 (suggestion) => suggestion.value === token 17195 ); 17196 return element || { value: token, label: token }; 17197 }) : [], 17198 [value, elements] 17199 ); 17200 const onChangeControl = (0, import_element69.useCallback)( 17201 (tokens) => { 17202 const valueTokens = tokens.map((token) => { 17203 if (typeof token === "object" && "value" in token) { 17204 return token.value; 17205 } 17206 return token; 17207 }); 17208 onChange(setValue({ item: data, value: valueTokens })); 17209 }, 17210 [onChange, setValue, data] 17211 ); 17212 if (isLoading) { 17213 return /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(import_components45.Spinner, {}); 17214 } 17215 return /* @__PURE__ */ (0, import_jsx_runtime106.jsx)( 17216 ValidatedFormTokenField, 17217 { 17218 required: !!isValid2?.required, 17219 markWhenOptional, 17220 customValidity: getCustomValidity(isValid2, validity), 17221 label: hideLabelFromVision ? void 0 : label, 17222 value: arrayValueAsElements, 17223 onChange: onChangeControl, 17224 placeholder, 17225 suggestions: elements?.map((element) => element.value), 17226 __experimentalValidateInput: (token) => { 17227 if (field.isValid?.elements && elements) { 17228 return elements.some( 17229 (element) => element.value === token || element.label === token 17230 ); 17231 } 17232 return true; 17233 }, 17234 __experimentalExpandOnFocus: elements && elements.length > 0, 17235 __experimentalShowHowTo: !field.isValid?.elements, 17236 displayTransform: (token) => { 17237 if (typeof token === "object" && "label" in token) { 17238 return token.label; 17239 } 17240 if (typeof token === "string" && elements) { 17241 const element = elements.find( 17242 (el) => el.value === token 17243 ); 17244 return element?.label || token; 17245 } 17246 return token; 17247 }, 17248 __experimentalRenderItem: ({ item }) => { 17249 if (typeof item === "string" && elements) { 17250 const element = elements.find( 17251 (el) => el.value === item 17252 ); 17253 return /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("span", { children: element?.label || item }); 17254 } 17255 return /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("span", { children: item }); 17256 } 17257 } 17258 ); 17259 } 17260 17261 // node_modules/colord/index.mjs 17262 var r2 = { grad: 0.9, turn: 360, rad: 360 / (2 * Math.PI) }; 17263 var t = function(r3) { 17264 return "string" == typeof r3 ? r3.length > 0 : "number" == typeof r3; 17265 }; 17266 var n = function(r3, t2, n2) { 17267 return void 0 === t2 && (t2 = 0), void 0 === n2 && (n2 = Math.pow(10, t2)), Math.round(n2 * r3) / n2 + 0; 17268 }; 17269 var e = function(r3, t2, n2) { 17270 return void 0 === t2 && (t2 = 0), void 0 === n2 && (n2 = 1), r3 > n2 ? n2 : r3 > t2 ? r3 : t2; 17271 }; 17272 var u = function(r3) { 17273 return (r3 = isFinite(r3) ? r3 % 360 : 0) > 0 ? r3 : r3 + 360; 17274 }; 17275 var a = function(r3) { 17276 return { r: e(r3.r, 0, 255), g: e(r3.g, 0, 255), b: e(r3.b, 0, 255), a: e(r3.a) }; 17277 }; 17278 var o = function(r3) { 17279 return { r: n(r3.r), g: n(r3.g), b: n(r3.b), a: n(r3.a, 3) }; 17280 }; 17281 var i = /^#([0-9a-f]{3,8})$/i; 17282 var s = function(r3) { 17283 var t2 = r3.toString(16); 17284 return t2.length < 2 ? "0" + t2 : t2; 17285 }; 17286 var h = function(r3) { 17287 var t2 = r3.r, n2 = r3.g, e2 = r3.b, u2 = r3.a, a2 = Math.max(t2, n2, e2), o2 = a2 - Math.min(t2, n2, e2), i2 = o2 ? a2 === t2 ? (n2 - e2) / o2 : a2 === n2 ? 2 + (e2 - t2) / o2 : 4 + (t2 - n2) / o2 : 0; 17288 return { h: 60 * (i2 < 0 ? i2 + 6 : i2), s: a2 ? o2 / a2 * 100 : 0, v: a2 / 255 * 100, a: u2 }; 17289 }; 17290 var b = function(r3) { 17291 var t2 = r3.h, n2 = r3.s, e2 = r3.v, u2 = r3.a; 17292 t2 = t2 / 360 * 6, n2 /= 100, e2 /= 100; 17293 var a2 = Math.floor(t2), o2 = e2 * (1 - n2), i2 = e2 * (1 - (t2 - a2) * n2), s2 = e2 * (1 - (1 - t2 + a2) * n2), h2 = a2 % 6; 17294 return { r: 255 * [e2, i2, o2, o2, s2, e2][h2], g: 255 * [s2, e2, e2, i2, o2, o2][h2], b: 255 * [o2, o2, s2, e2, e2, i2][h2], a: u2 }; 17295 }; 17296 var g = function(r3) { 17297 return { h: u(r3.h), s: e(r3.s, 0, 100), l: e(r3.l, 0, 100), a: e(r3.a) }; 17298 }; 17299 var d = function(r3) { 17300 return { h: n(r3.h), s: n(r3.s), l: n(r3.l), a: n(r3.a, 3) }; 17301 }; 17302 var f = function(r3) { 17303 return b((n2 = (t2 = r3).s, { h: t2.h, s: (n2 *= ((e2 = t2.l) < 50 ? e2 : 100 - e2) / 100) > 0 ? 2 * n2 / (e2 + n2) * 100 : 0, v: e2 + n2, a: t2.a })); 17304 var t2, n2, e2; 17305 }; 17306 var c = function(r3) { 17307 return { h: (t2 = h(r3)).h, s: (u2 = (200 - (n2 = t2.s)) * (e2 = t2.v) / 100) > 0 && u2 < 200 ? n2 * e2 / 100 / (u2 <= 100 ? u2 : 200 - u2) * 100 : 0, l: u2 / 2, a: t2.a }; 17308 var t2, n2, e2, u2; 17309 }; 17310 var l = /^hsla?\(\s*([+-]?\d*\.?\d+)(deg|rad|grad|turn)?\s*,\s*([+-]?\d*\.?\d+)%\s*,\s*([+-]?\d*\.?\d+)%\s*(?:,\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i; 17311 var p = /^hsla?\(\s*([+-]?\d*\.?\d+)(deg|rad|grad|turn)?\s+([+-]?\d*\.?\d+)%\s+([+-]?\d*\.?\d+)%\s*(?:\/\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i; 17312 var v = /^rgba?\(\s*([+-]?\d*\.?\d+)(%)?\s*,\s*([+-]?\d*\.?\d+)(%)?\s*,\s*([+-]?\d*\.?\d+)(%)?\s*(?:,\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i; 17313 var m = /^rgba?\(\s*([+-]?\d*\.?\d+)(%)?\s+([+-]?\d*\.?\d+)(%)?\s+([+-]?\d*\.?\d+)(%)?\s*(?:\/\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i; 17314 var y = { string: [[function(r3) { 17315 var t2 = i.exec(r3); 17316 return t2 ? (r3 = t2[1]).length <= 4 ? { r: parseInt(r3[0] + r3[0], 16), g: parseInt(r3[1] + r3[1], 16), b: parseInt(r3[2] + r3[2], 16), a: 4 === r3.length ? n(parseInt(r3[3] + r3[3], 16) / 255, 2) : 1 } : 6 === r3.length || 8 === r3.length ? { r: parseInt(r3.substr(0, 2), 16), g: parseInt(r3.substr(2, 2), 16), b: parseInt(r3.substr(4, 2), 16), a: 8 === r3.length ? n(parseInt(r3.substr(6, 2), 16) / 255, 2) : 1 } : null : null; 17317 }, "hex"], [function(r3) { 17318 var t2 = v.exec(r3) || m.exec(r3); 17319 return t2 ? t2[2] !== t2[4] || t2[4] !== t2[6] ? null : a({ r: Number(t2[1]) / (t2[2] ? 100 / 255 : 1), g: Number(t2[3]) / (t2[4] ? 100 / 255 : 1), b: Number(t2[5]) / (t2[6] ? 100 / 255 : 1), a: void 0 === t2[7] ? 1 : Number(t2[7]) / (t2[8] ? 100 : 1) }) : null; 17320 }, "rgb"], [function(t2) { 17321 var n2 = l.exec(t2) || p.exec(t2); 17322 if (!n2) return null; 17323 var e2, u2, a2 = g({ h: (e2 = n2[1], u2 = n2[2], void 0 === u2 && (u2 = "deg"), Number(e2) * (r2[u2] || 1)), s: Number(n2[3]), l: Number(n2[4]), a: void 0 === n2[5] ? 1 : Number(n2[5]) / (n2[6] ? 100 : 1) }); 17324 return f(a2); 17325 }, "hsl"]], object: [[function(r3) { 17326 var n2 = r3.r, e2 = r3.g, u2 = r3.b, o2 = r3.a, i2 = void 0 === o2 ? 1 : o2; 17327 return t(n2) && t(e2) && t(u2) ? a({ r: Number(n2), g: Number(e2), b: Number(u2), a: Number(i2) }) : null; 17328 }, "rgb"], [function(r3) { 17329 var n2 = r3.h, e2 = r3.s, u2 = r3.l, a2 = r3.a, o2 = void 0 === a2 ? 1 : a2; 17330 if (!t(n2) || !t(e2) || !t(u2)) return null; 17331 var i2 = g({ h: Number(n2), s: Number(e2), l: Number(u2), a: Number(o2) }); 17332 return f(i2); 17333 }, "hsl"], [function(r3) { 17334 var n2 = r3.h, a2 = r3.s, o2 = r3.v, i2 = r3.a, s2 = void 0 === i2 ? 1 : i2; 17335 if (!t(n2) || !t(a2) || !t(o2)) return null; 17336 var h2 = (function(r4) { 17337 return { h: u(r4.h), s: e(r4.s, 0, 100), v: e(r4.v, 0, 100), a: e(r4.a) }; 17338 })({ h: Number(n2), s: Number(a2), v: Number(o2), a: Number(s2) }); 17339 return b(h2); 17340 }, "hsv"]] }; 17341 var N = function(r3, t2) { 17342 for (var n2 = 0; n2 < t2.length; n2++) { 17343 var e2 = t2[n2][0](r3); 17344 if (e2) return [e2, t2[n2][1]]; 17345 } 17346 return [null, void 0]; 17347 }; 17348 var x = function(r3) { 17349 return "string" == typeof r3 ? N(r3.trim(), y.string) : "object" == typeof r3 && null !== r3 ? N(r3, y.object) : [null, void 0]; 17350 }; 17351 var M = function(r3, t2) { 17352 var n2 = c(r3); 17353 return { h: n2.h, s: e(n2.s + 100 * t2, 0, 100), l: n2.l, a: n2.a }; 17354 }; 17355 var H = function(r3) { 17356 return (299 * r3.r + 587 * r3.g + 114 * r3.b) / 1e3 / 255; 17357 }; 17358 var $ = function(r3, t2) { 17359 var n2 = c(r3); 17360 return { h: n2.h, s: n2.s, l: e(n2.l + 100 * t2, 0, 100), a: n2.a }; 17361 }; 17362 var j = (function() { 17363 function r3(r4) { 17364 this.parsed = x(r4)[0], this.rgba = this.parsed || { r: 0, g: 0, b: 0, a: 1 }; 17365 } 17366 return r3.prototype.isValid = function() { 17367 return null !== this.parsed; 17368 }, r3.prototype.brightness = function() { 17369 return n(H(this.rgba), 2); 17370 }, r3.prototype.isDark = function() { 17371 return H(this.rgba) < 0.5; 17372 }, r3.prototype.isLight = function() { 17373 return H(this.rgba) >= 0.5; 17374 }, r3.prototype.toHex = function() { 17375 return r4 = o(this.rgba), t2 = r4.r, e2 = r4.g, u2 = r4.b, i2 = (a2 = r4.a) < 1 ? s(n(255 * a2)) : "", "#" + s(t2) + s(e2) + s(u2) + i2; 17376 var r4, t2, e2, u2, a2, i2; 17377 }, r3.prototype.toRgb = function() { 17378 return o(this.rgba); 17379 }, r3.prototype.toRgbString = function() { 17380 return r4 = o(this.rgba), t2 = r4.r, n2 = r4.g, e2 = r4.b, (u2 = r4.a) < 1 ? "rgba(" + t2 + ", " + n2 + ", " + e2 + ", " + u2 + ")" : "rgb(" + t2 + ", " + n2 + ", " + e2 + ")"; 17381 var r4, t2, n2, e2, u2; 17382 }, r3.prototype.toHsl = function() { 17383 return d(c(this.rgba)); 17384 }, r3.prototype.toHslString = function() { 17385 return r4 = d(c(this.rgba)), t2 = r4.h, n2 = r4.s, e2 = r4.l, (u2 = r4.a) < 1 ? "hsla(" + t2 + ", " + n2 + "%, " + e2 + "%, " + u2 + ")" : "hsl(" + t2 + ", " + n2 + "%, " + e2 + "%)"; 17386 var r4, t2, n2, e2, u2; 17387 }, r3.prototype.toHsv = function() { 17388 return r4 = h(this.rgba), { h: n(r4.h), s: n(r4.s), v: n(r4.v), a: n(r4.a, 3) }; 17389 var r4; 17390 }, r3.prototype.invert = function() { 17391 return w({ r: 255 - (r4 = this.rgba).r, g: 255 - r4.g, b: 255 - r4.b, a: r4.a }); 17392 var r4; 17393 }, r3.prototype.saturate = function(r4) { 17394 return void 0 === r4 && (r4 = 0.1), w(M(this.rgba, r4)); 17395 }, r3.prototype.desaturate = function(r4) { 17396 return void 0 === r4 && (r4 = 0.1), w(M(this.rgba, -r4)); 17397 }, r3.prototype.grayscale = function() { 17398 return w(M(this.rgba, -1)); 17399 }, r3.prototype.lighten = function(r4) { 17400 return void 0 === r4 && (r4 = 0.1), w($(this.rgba, r4)); 17401 }, r3.prototype.darken = function(r4) { 17402 return void 0 === r4 && (r4 = 0.1), w($(this.rgba, -r4)); 17403 }, r3.prototype.rotate = function(r4) { 17404 return void 0 === r4 && (r4 = 15), this.hue(this.hue() + r4); 17405 }, r3.prototype.alpha = function(r4) { 17406 return "number" == typeof r4 ? w({ r: (t2 = this.rgba).r, g: t2.g, b: t2.b, a: r4 }) : n(this.rgba.a, 3); 17407 var t2; 17408 }, r3.prototype.hue = function(r4) { 17409 var t2 = c(this.rgba); 17410 return "number" == typeof r4 ? w({ h: r4, s: t2.s, l: t2.l, a: t2.a }) : n(t2.h); 17411 }, r3.prototype.isEqual = function(r4) { 17412 return this.toHex() === w(r4).toHex(); 17413 }, r3; 17414 })(); 17415 var w = function(r3) { 17416 return r3 instanceof j ? r3 : new j(r3); 17417 }; 17418 17419 // packages/dataviews/build-module/components/dataform-controls/color.mjs 17420 var import_components46 = __toESM(require_components(), 1); 17421 var import_element70 = __toESM(require_element(), 1); 17422 var import_i18n36 = __toESM(require_i18n(), 1); 17423 var import_jsx_runtime107 = __toESM(require_jsx_runtime(), 1); 17424 var { ValidatedInputControl: ValidatedInputControl3 } = unlock(import_components46.privateApis); 17425 var ColorPickerDropdown = ({ 17426 color, 17427 onColorChange 17428 }) => { 17429 const validColor = color && w(color).isValid() ? color : "#ffffff"; 17430 return /* @__PURE__ */ (0, import_jsx_runtime107.jsx)( 17431 import_components46.Dropdown, 17432 { 17433 className: "dataviews-controls__color-picker-dropdown", 17434 popoverProps: { resize: false }, 17435 renderToggle: ({ onToggle }) => /* @__PURE__ */ (0, import_jsx_runtime107.jsx)( 17436 import_components46.Button, 17437 { 17438 onClick: onToggle, 17439 "aria-label": (0, import_i18n36.__)("Open color picker"), 17440 size: "small", 17441 icon: () => /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(import_components46.ColorIndicator, { colorValue: validColor }) 17442 } 17443 ), 17444 renderContent: () => /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(import_components46.__experimentalDropdownContentWrapper, { paddingSize: "none", children: /* @__PURE__ */ (0, import_jsx_runtime107.jsx)( 17445 import_components46.ColorPicker, 17446 { 17447 color: validColor, 17448 onChange: onColorChange, 17449 enableAlpha: true 17450 } 17451 ) }) 17452 } 17453 ); 17454 }; 17455 function Color({ 17456 data, 17457 field, 17458 onChange, 17459 hideLabelFromVision, 17460 markWhenOptional, 17461 validity 17462 }) { 17463 const { label, placeholder, description, setValue, isValid: isValid2 } = field; 17464 const value = field.getValue({ item: data }) || ""; 17465 const handleColorChange = (0, import_element70.useCallback)( 17466 (newColor) => { 17467 onChange(setValue({ item: data, value: newColor })); 17468 }, 17469 [data, onChange, setValue] 17470 ); 17471 const handleInputChange = (0, import_element70.useCallback)( 17472 (newValue) => { 17473 onChange(setValue({ item: data, value: newValue || "" })); 17474 }, 17475 [data, onChange, setValue] 17476 ); 17477 return /* @__PURE__ */ (0, import_jsx_runtime107.jsx)( 17478 ValidatedInputControl3, 17479 { 17480 required: !!field.isValid?.required, 17481 markWhenOptional, 17482 customValidity: getCustomValidity(isValid2, validity), 17483 label, 17484 placeholder, 17485 value, 17486 help: description, 17487 onChange: handleInputChange, 17488 hideLabelFromVision, 17489 type: "text", 17490 prefix: /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(import_components46.__experimentalInputControlPrefixWrapper, { variant: "control", children: /* @__PURE__ */ (0, import_jsx_runtime107.jsx)( 17491 ColorPickerDropdown, 17492 { 17493 color: value, 17494 onColorChange: handleColorChange 17495 } 17496 ) }) 17497 } 17498 ); 17499 } 17500 17501 // packages/dataviews/build-module/components/dataform-controls/password.mjs 17502 var import_components47 = __toESM(require_components(), 1); 17503 var import_element71 = __toESM(require_element(), 1); 17504 var import_i18n37 = __toESM(require_i18n(), 1); 17505 var import_jsx_runtime108 = __toESM(require_jsx_runtime(), 1); 17506 function Password({ 17507 data, 17508 field, 17509 onChange, 17510 hideLabelFromVision, 17511 markWhenOptional, 17512 validity 17513 }) { 17514 const [isVisible2, setIsVisible] = (0, import_element71.useState)(false); 17515 const toggleVisibility = (0, import_element71.useCallback)(() => { 17516 setIsVisible((prev) => !prev); 17517 }, []); 17518 return /* @__PURE__ */ (0, import_jsx_runtime108.jsx)( 17519 ValidatedText, 17520 { 17521 ...{ 17522 data, 17523 field, 17524 onChange, 17525 hideLabelFromVision, 17526 markWhenOptional, 17527 validity, 17528 type: isVisible2 ? "text" : "password", 17529 suffix: /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(import_components47.__experimentalInputControlSuffixWrapper, { variant: "control", children: /* @__PURE__ */ (0, import_jsx_runtime108.jsx)( 17530 import_components47.Button, 17531 { 17532 icon: isVisible2 ? unseen_default : seen_default, 17533 onClick: toggleVisibility, 17534 size: "small", 17535 label: isVisible2 ? (0, import_i18n37.__)("Hide password") : (0, import_i18n37.__)("Show password") 17536 } 17537 ) }) 17538 } 17539 } 17540 ); 17541 } 17542 17543 // packages/dataviews/build-module/field-types/utils/has-elements.mjs 17544 function hasElements(field) { 17545 return Array.isArray(field.elements) && field.elements.length > 0 || typeof field.getElements === "function"; 17546 } 17547 17548 // packages/dataviews/build-module/components/dataform-controls/index.mjs 17549 var import_jsx_runtime109 = __toESM(require_jsx_runtime(), 1); 17550 var FORM_CONTROLS = { 17551 adaptiveSelect: AdaptiveSelect, 17552 array: ArrayControl, 17553 checkbox: Checkbox, 17554 color: Color, 17555 combobox: Combobox3, 17556 datetime: DateTime, 17557 date: DateControl, 17558 email: Email, 17559 telephone: Telephone, 17560 url: Url, 17561 integer: Integer, 17562 number: Number2, 17563 password: Password, 17564 radio: Radio, 17565 select: Select, 17566 text: Text4, 17567 toggle: Toggle, 17568 textarea: Textarea, 17569 toggleGroup: ToggleGroup 17570 }; 17571 function isEditConfig(value) { 17572 return value && typeof value === "object" && typeof value.control === "string"; 17573 } 17574 function createConfiguredControl(config) { 17575 const { control, ...controlConfig } = config; 17576 const BaseControlType = getControlByType(control); 17577 if (BaseControlType === null) { 17578 return null; 17579 } 17580 return function ConfiguredControl(props) { 17581 return /* @__PURE__ */ (0, import_jsx_runtime109.jsx)(BaseControlType, { ...props, config: controlConfig }); 17582 }; 17583 } 17584 function getControl(field, fallback) { 17585 if (typeof field.Edit === "function") { 17586 return field.Edit; 17587 } 17588 if (typeof field.Edit === "string") { 17589 return getControlByType(field.Edit); 17590 } 17591 if (isEditConfig(field.Edit)) { 17592 return createConfiguredControl(field.Edit); 17593 } 17594 if (hasElements(field) && field.type !== "array") { 17595 return getControlByType("adaptiveSelect"); 17596 } 17597 if (fallback === null) { 17598 return null; 17599 } 17600 return getControlByType(fallback); 17601 } 17602 function getControlByType(type) { 17603 if (Object.keys(FORM_CONTROLS).includes(type)) { 17604 return FORM_CONTROLS[type]; 17605 } 17606 return null; 17607 } 17608 17609 // packages/dataviews/build-module/field-types/utils/get-filter-by.mjs 17610 function getFilterBy(field, defaultOperators, validOperators) { 17611 if (field.filterBy === false) { 17612 return false; 17613 } 17614 const operators = field.filterBy?.operators?.filter( 17615 (op) => validOperators.includes(op) 17616 ) ?? defaultOperators; 17617 if (operators.length === 0) { 17618 return false; 17619 } 17620 return { 17621 isPrimary: !!field.filterBy?.isPrimary, 17622 operators 17623 }; 17624 } 17625 var get_filter_by_default = getFilterBy; 17626 17627 // packages/dataviews/build-module/field-types/utils/get-value-from-id.mjs 17628 var getValueFromId = (id) => ({ item }) => { 17629 const path = id.split("."); 17630 let value = item; 17631 for (const segment of path) { 17632 if (value.hasOwnProperty(segment)) { 17633 value = value[segment]; 17634 } else { 17635 value = void 0; 17636 } 17637 } 17638 return value; 17639 }; 17640 var get_value_from_id_default = getValueFromId; 17641 17642 // packages/dataviews/build-module/field-types/utils/set-value-from-id.mjs 17643 var setValueFromId = (id) => ({ value }) => { 17644 const path = id.split("."); 17645 const result = {}; 17646 let current = result; 17647 for (const segment of path.slice(0, -1)) { 17648 current[segment] = {}; 17649 current = current[segment]; 17650 } 17651 current[path.at(-1)] = value; 17652 return result; 17653 }; 17654 var set_value_from_id_default = setValueFromId; 17655 17656 // packages/dataviews/build-module/field-types/email.mjs 17657 var import_i18n38 = __toESM(require_i18n(), 1); 17658 17659 // packages/dataviews/build-module/field-types/utils/render-from-elements.mjs 17660 function RenderFromElements({ 17661 item, 17662 field 17663 }) { 17664 const { elements, isLoading } = useElements({ 17665 elements: field.elements, 17666 getElements: field.getElements 17667 }); 17668 const value = field.getValue({ item }); 17669 if (isLoading) { 17670 return value; 17671 } 17672 if (elements.length === 0) { 17673 return value; 17674 } 17675 return elements?.find((element) => element.value === value)?.label || field.getValue({ item }); 17676 } 17677 17678 // packages/dataviews/build-module/field-types/utils/render-default.mjs 17679 var import_jsx_runtime110 = __toESM(require_jsx_runtime(), 1); 17680 function render({ 17681 item, 17682 field 17683 }) { 17684 if (field.hasElements) { 17685 return /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(RenderFromElements, { item, field }); 17686 } 17687 return field.getValueFormatted({ item, field }); 17688 } 17689 17690 // packages/dataviews/build-module/field-types/utils/sort-text.mjs 17691 var sort_text_default = (a2, b2, direction) => { 17692 return direction === "asc" ? a2.localeCompare(b2) : b2.localeCompare(a2); 17693 }; 17694 17695 // packages/dataviews/build-module/field-types/utils/is-valid-required.mjs 17696 function isValidRequired(item, field) { 17697 const value = field.getValue({ item }); 17698 return ![void 0, "", null].includes(value); 17699 } 17700 17701 // packages/dataviews/build-module/field-types/utils/is-valid-min-length.mjs 17702 function isValidMinLength(item, field) { 17703 if (typeof field.isValid.minLength?.constraint !== "number") { 17704 return false; 17705 } 17706 const value = field.getValue({ item }); 17707 if ([void 0, "", null].includes(value)) { 17708 return true; 17709 } 17710 return String(value).length >= field.isValid.minLength.constraint; 17711 } 17712 17713 // packages/dataviews/build-module/field-types/utils/is-valid-max-length.mjs 17714 function isValidMaxLength(item, field) { 17715 if (typeof field.isValid.maxLength?.constraint !== "number") { 17716 return false; 17717 } 17718 const value = field.getValue({ item }); 17719 if ([void 0, "", null].includes(value)) { 17720 return true; 17721 } 17722 return String(value).length <= field.isValid.maxLength.constraint; 17723 } 17724 17725 // packages/dataviews/build-module/field-types/utils/is-valid-pattern.mjs 17726 function isValidPattern(item, field) { 17727 if (field.isValid.pattern?.constraint === void 0) { 17728 return true; 17729 } 17730 try { 17731 const regexp = new RegExp(field.isValid.pattern.constraint); 17732 const value = field.getValue({ item }); 17733 if ([void 0, "", null].includes(value)) { 17734 return true; 17735 } 17736 return regexp.test(String(value)); 17737 } catch { 17738 return false; 17739 } 17740 } 17741 17742 // packages/dataviews/build-module/field-types/utils/is-valid-elements.mjs 17743 function isValidElements(item, field) { 17744 const elements = field.elements ?? []; 17745 const validValues = elements.map((el) => el.value); 17746 if (validValues.length === 0) { 17747 return true; 17748 } 17749 const value = field.getValue({ item }); 17750 return [].concat(value).every((v2) => validValues.includes(v2)); 17751 } 17752 17753 // packages/dataviews/build-module/field-types/utils/get-value-formatted-default.mjs 17754 function getValueFormatted({ 17755 item, 17756 field 17757 }) { 17758 return field.getValue({ item }); 17759 } 17760 var get_value_formatted_default_default = getValueFormatted; 17761 17762 // packages/dataviews/build-module/field-types/email.mjs 17763 var emailRegex = /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/; 17764 function isValidCustom(item, field) { 17765 const value = field.getValue({ item }); 17766 if (![void 0, "", null].includes(value) && !emailRegex.test(value)) { 17767 return (0, import_i18n38.__)("Value must be a valid email address."); 17768 } 17769 return null; 17770 } 17771 var email_default = { 17772 type: "email", 17773 render, 17774 Edit: "email", 17775 sort: sort_text_default, 17776 enableSorting: true, 17777 enableGlobalSearch: false, 17778 defaultOperators: [OPERATOR_IS_ANY, OPERATOR_IS_NONE], 17779 validOperators: [ 17780 OPERATOR_IS, 17781 OPERATOR_IS_NOT, 17782 OPERATOR_CONTAINS, 17783 OPERATOR_NOT_CONTAINS, 17784 OPERATOR_STARTS_WITH, 17785 // Multiple selection 17786 OPERATOR_IS_ANY, 17787 OPERATOR_IS_NONE, 17788 OPERATOR_IS_ALL, 17789 OPERATOR_IS_NOT_ALL 17790 ], 17791 format: {}, 17792 getValueFormatted: get_value_formatted_default_default, 17793 validate: { 17794 required: isValidRequired, 17795 pattern: isValidPattern, 17796 minLength: isValidMinLength, 17797 maxLength: isValidMaxLength, 17798 elements: isValidElements, 17799 custom: isValidCustom 17800 } 17801 }; 17802 17803 // packages/dataviews/build-module/field-types/integer.mjs 17804 var import_i18n39 = __toESM(require_i18n(), 1); 17805 17806 // packages/dataviews/build-module/field-types/utils/sort-number.mjs 17807 var sort_number_default = (a2, b2, direction) => { 17808 return direction === "asc" ? a2 - b2 : b2 - a2; 17809 }; 17810 17811 // packages/dataviews/build-module/field-types/utils/is-valid-min.mjs 17812 function isValidMin(item, field) { 17813 if (typeof field.isValid.min?.constraint !== "number") { 17814 return false; 17815 } 17816 const value = field.getValue({ item }); 17817 if ([void 0, "", null].includes(value)) { 17818 return true; 17819 } 17820 return Number(value) >= field.isValid.min.constraint; 17821 } 17822 17823 // packages/dataviews/build-module/field-types/utils/is-valid-max.mjs 17824 function isValidMax(item, field) { 17825 if (typeof field.isValid.max?.constraint !== "number") { 17826 return false; 17827 } 17828 const value = field.getValue({ item }); 17829 if ([void 0, "", null].includes(value)) { 17830 return true; 17831 } 17832 return Number(value) <= field.isValid.max.constraint; 17833 } 17834 17835 // packages/dataviews/build-module/field-types/integer.mjs 17836 var format2 = { 17837 separatorThousand: "," 17838 }; 17839 function getValueFormatted2({ 17840 item, 17841 field 17842 }) { 17843 let value = field.getValue({ item }); 17844 if (value === null || value === void 0) { 17845 return ""; 17846 } 17847 value = Number(value); 17848 if (!Number.isFinite(value)) { 17849 return String(value); 17850 } 17851 let formatInteger; 17852 if (field.type !== "integer") { 17853 formatInteger = format2; 17854 } else { 17855 formatInteger = field.format; 17856 } 17857 const { separatorThousand } = formatInteger; 17858 const integerValue = Math.trunc(value); 17859 if (!separatorThousand) { 17860 return String(integerValue); 17861 } 17862 return String(integerValue).replace( 17863 /\B(?=(\d{3})+(?!\d))/g, 17864 separatorThousand 17865 ); 17866 } 17867 function isValidCustom2(item, field) { 17868 const value = field.getValue({ item }); 17869 if (![void 0, "", null].includes(value) && !Number.isInteger(value)) { 17870 return (0, import_i18n39.__)("Value must be an integer."); 17871 } 17872 return null; 17873 } 17874 var integer_default = { 17875 type: "integer", 17876 render, 17877 Edit: "integer", 17878 sort: sort_number_default, 17879 enableSorting: true, 17880 enableGlobalSearch: false, 17881 defaultOperators: [ 17882 OPERATOR_IS, 17883 OPERATOR_IS_NOT, 17884 OPERATOR_LESS_THAN, 17885 OPERATOR_GREATER_THAN, 17886 OPERATOR_LESS_THAN_OR_EQUAL, 17887 OPERATOR_GREATER_THAN_OR_EQUAL, 17888 OPERATOR_BETWEEN 17889 ], 17890 validOperators: [ 17891 // Single-selection 17892 OPERATOR_IS, 17893 OPERATOR_IS_NOT, 17894 OPERATOR_LESS_THAN, 17895 OPERATOR_GREATER_THAN, 17896 OPERATOR_LESS_THAN_OR_EQUAL, 17897 OPERATOR_GREATER_THAN_OR_EQUAL, 17898 OPERATOR_BETWEEN, 17899 // Multiple-selection 17900 OPERATOR_IS_ANY, 17901 OPERATOR_IS_NONE, 17902 OPERATOR_IS_ALL, 17903 OPERATOR_IS_NOT_ALL 17904 ], 17905 format: format2, 17906 getValueFormatted: getValueFormatted2, 17907 validate: { 17908 required: isValidRequired, 17909 min: isValidMin, 17910 max: isValidMax, 17911 elements: isValidElements, 17912 custom: isValidCustom2 17913 } 17914 }; 17915 17916 // packages/dataviews/build-module/field-types/number.mjs 17917 var import_i18n40 = __toESM(require_i18n(), 1); 17918 var format3 = { 17919 separatorThousand: ",", 17920 separatorDecimal: ".", 17921 decimals: 2 17922 }; 17923 function getValueFormatted3({ 17924 item, 17925 field 17926 }) { 17927 let value = field.getValue({ item }); 17928 if (value === null || value === void 0) { 17929 return ""; 17930 } 17931 value = Number(value); 17932 if (!Number.isFinite(value)) { 17933 return String(value); 17934 } 17935 let formatNumber; 17936 if (field.type !== "number") { 17937 formatNumber = format3; 17938 } else { 17939 formatNumber = field.format; 17940 } 17941 const { separatorThousand, separatorDecimal, decimals } = formatNumber; 17942 const fixedValue = value.toFixed(decimals); 17943 const [integerPart, decimalPart] = fixedValue.split("."); 17944 const formattedInteger = separatorThousand ? integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, separatorThousand) : integerPart; 17945 return decimals === 0 ? formattedInteger : formattedInteger + separatorDecimal + decimalPart; 17946 } 17947 function isEmpty2(value) { 17948 return value === "" || value === void 0 || value === null; 17949 } 17950 function isValidCustom3(item, field) { 17951 const value = field.getValue({ item }); 17952 if (!isEmpty2(value) && !Number.isFinite(value)) { 17953 return (0, import_i18n40.__)("Value must be a number."); 17954 } 17955 return null; 17956 } 17957 var number_default = { 17958 type: "number", 17959 render, 17960 Edit: "number", 17961 sort: sort_number_default, 17962 enableSorting: true, 17963 enableGlobalSearch: false, 17964 defaultOperators: [ 17965 OPERATOR_IS, 17966 OPERATOR_IS_NOT, 17967 OPERATOR_LESS_THAN, 17968 OPERATOR_GREATER_THAN, 17969 OPERATOR_LESS_THAN_OR_EQUAL, 17970 OPERATOR_GREATER_THAN_OR_EQUAL, 17971 OPERATOR_BETWEEN 17972 ], 17973 validOperators: [ 17974 // Single-selection 17975 OPERATOR_IS, 17976 OPERATOR_IS_NOT, 17977 OPERATOR_LESS_THAN, 17978 OPERATOR_GREATER_THAN, 17979 OPERATOR_LESS_THAN_OR_EQUAL, 17980 OPERATOR_GREATER_THAN_OR_EQUAL, 17981 OPERATOR_BETWEEN, 17982 // Multiple-selection 17983 OPERATOR_IS_ANY, 17984 OPERATOR_IS_NONE, 17985 OPERATOR_IS_ALL, 17986 OPERATOR_IS_NOT_ALL 17987 ], 17988 format: format3, 17989 getValueFormatted: getValueFormatted3, 17990 validate: { 17991 required: isValidRequired, 17992 min: isValidMin, 17993 max: isValidMax, 17994 elements: isValidElements, 17995 custom: isValidCustom3 17996 } 17997 }; 17998 17999 // packages/dataviews/build-module/field-types/text.mjs 18000 var text_default = { 18001 type: "text", 18002 render, 18003 Edit: "text", 18004 sort: sort_text_default, 18005 enableSorting: true, 18006 enableGlobalSearch: false, 18007 defaultOperators: [OPERATOR_IS_ANY, OPERATOR_IS_NONE], 18008 validOperators: [ 18009 // Single selection 18010 OPERATOR_IS, 18011 OPERATOR_IS_NOT, 18012 OPERATOR_CONTAINS, 18013 OPERATOR_NOT_CONTAINS, 18014 OPERATOR_STARTS_WITH, 18015 // Multiple selection 18016 OPERATOR_IS_ANY, 18017 OPERATOR_IS_NONE, 18018 OPERATOR_IS_ALL, 18019 OPERATOR_IS_NOT_ALL 18020 ], 18021 format: {}, 18022 getValueFormatted: get_value_formatted_default_default, 18023 validate: { 18024 required: isValidRequired, 18025 pattern: isValidPattern, 18026 minLength: isValidMinLength, 18027 maxLength: isValidMaxLength, 18028 elements: isValidElements 18029 } 18030 }; 18031 18032 // packages/dataviews/build-module/field-types/datetime.mjs 18033 var import_date6 = __toESM(require_date(), 1); 18034 var format4 = { 18035 datetime: (0, import_date6.getSettings)().formats.datetime, 18036 weekStartsOn: (0, import_date6.getSettings)().l10n.startOfWeek 18037 }; 18038 function getValueFormatted4({ 18039 item, 18040 field 18041 }) { 18042 const value = field.getValue({ item }); 18043 if (["", void 0, null].includes(value)) { 18044 return ""; 18045 } 18046 let formatDatetime; 18047 if (field.type !== "datetime") { 18048 formatDatetime = format4; 18049 } else { 18050 formatDatetime = field.format; 18051 } 18052 return (0, import_date6.dateI18n)(formatDatetime.datetime, (0, import_date6.getDate)(value)); 18053 } 18054 var sort = (a2, b2, direction) => { 18055 const timeA = new Date(a2).getTime(); 18056 const timeB = new Date(b2).getTime(); 18057 return direction === "asc" ? timeA - timeB : timeB - timeA; 18058 }; 18059 var datetime_default = { 18060 type: "datetime", 18061 render, 18062 Edit: "datetime", 18063 sort, 18064 enableSorting: true, 18065 enableGlobalSearch: false, 18066 defaultOperators: [ 18067 OPERATOR_ON, 18068 OPERATOR_NOT_ON, 18069 OPERATOR_BEFORE, 18070 OPERATOR_AFTER, 18071 OPERATOR_BEFORE_INC, 18072 OPERATOR_AFTER_INC, 18073 OPERATOR_IN_THE_PAST, 18074 OPERATOR_OVER 18075 ], 18076 validOperators: [ 18077 OPERATOR_ON, 18078 OPERATOR_NOT_ON, 18079 OPERATOR_BEFORE, 18080 OPERATOR_AFTER, 18081 OPERATOR_BEFORE_INC, 18082 OPERATOR_AFTER_INC, 18083 OPERATOR_IN_THE_PAST, 18084 OPERATOR_OVER 18085 ], 18086 format: format4, 18087 getValueFormatted: getValueFormatted4, 18088 validate: { 18089 required: isValidRequired, 18090 elements: isValidElements 18091 } 18092 }; 18093 18094 // packages/dataviews/build-module/field-types/date.mjs 18095 var import_date7 = __toESM(require_date(), 1); 18096 var format5 = { 18097 date: (0, import_date7.getSettings)().formats.date, 18098 weekStartsOn: (0, import_date7.getSettings)().l10n.startOfWeek 18099 }; 18100 function getValueFormatted5({ 18101 item, 18102 field 18103 }) { 18104 const value = field.getValue({ item }); 18105 if (["", void 0, null].includes(value)) { 18106 return ""; 18107 } 18108 let formatDate2; 18109 if (field.type !== "date") { 18110 formatDate2 = format5; 18111 } else { 18112 formatDate2 = field.format; 18113 } 18114 return (0, import_date7.dateI18n)(formatDate2.date, (0, import_date7.getDate)(value)); 18115 } 18116 var sort2 = (a2, b2, direction) => { 18117 const timeA = new Date(a2).getTime(); 18118 const timeB = new Date(b2).getTime(); 18119 return direction === "asc" ? timeA - timeB : timeB - timeA; 18120 }; 18121 var date_default = { 18122 type: "date", 18123 render, 18124 Edit: "date", 18125 sort: sort2, 18126 enableSorting: true, 18127 enableGlobalSearch: false, 18128 defaultOperators: [ 18129 OPERATOR_ON, 18130 OPERATOR_NOT_ON, 18131 OPERATOR_BEFORE, 18132 OPERATOR_AFTER, 18133 OPERATOR_BEFORE_INC, 18134 OPERATOR_AFTER_INC, 18135 OPERATOR_IN_THE_PAST, 18136 OPERATOR_OVER, 18137 OPERATOR_BETWEEN 18138 ], 18139 validOperators: [ 18140 OPERATOR_ON, 18141 OPERATOR_NOT_ON, 18142 OPERATOR_BEFORE, 18143 OPERATOR_AFTER, 18144 OPERATOR_BEFORE_INC, 18145 OPERATOR_AFTER_INC, 18146 OPERATOR_IN_THE_PAST, 18147 OPERATOR_OVER, 18148 OPERATOR_BETWEEN 18149 ], 18150 format: format5, 18151 getValueFormatted: getValueFormatted5, 18152 validate: { 18153 required: isValidRequired, 18154 elements: isValidElements 18155 } 18156 }; 18157 18158 // packages/dataviews/build-module/field-types/boolean.mjs 18159 var import_i18n41 = __toESM(require_i18n(), 1); 18160 18161 // packages/dataviews/build-module/field-types/utils/is-valid-required-for-bool.mjs 18162 function isValidRequiredForBool(item, field) { 18163 const value = field.getValue({ item }); 18164 return value === true; 18165 } 18166 18167 // packages/dataviews/build-module/field-types/boolean.mjs 18168 function getValueFormatted6({ 18169 item, 18170 field 18171 }) { 18172 const value = field.getValue({ item }); 18173 if (value === true) { 18174 return (0, import_i18n41.__)("True"); 18175 } 18176 if (value === false) { 18177 return (0, import_i18n41.__)("False"); 18178 } 18179 return ""; 18180 } 18181 function isValidCustom4(item, field) { 18182 const value = field.getValue({ item }); 18183 if (![void 0, "", null].includes(value) && ![true, false].includes(value)) { 18184 return (0, import_i18n41.__)("Value must be true, false, or undefined"); 18185 } 18186 return null; 18187 } 18188 var sort3 = (a2, b2, direction) => { 18189 const boolA = Boolean(a2); 18190 const boolB = Boolean(b2); 18191 if (boolA === boolB) { 18192 return 0; 18193 } 18194 if (direction === "asc") { 18195 return boolA ? 1 : -1; 18196 } 18197 return boolA ? -1 : 1; 18198 }; 18199 var boolean_default = { 18200 type: "boolean", 18201 render, 18202 Edit: "checkbox", 18203 sort: sort3, 18204 validate: { 18205 required: isValidRequiredForBool, 18206 elements: isValidElements, 18207 custom: isValidCustom4 18208 }, 18209 enableSorting: true, 18210 enableGlobalSearch: false, 18211 defaultOperators: [OPERATOR_IS, OPERATOR_IS_NOT], 18212 validOperators: [OPERATOR_IS, OPERATOR_IS_NOT], 18213 format: {}, 18214 getValueFormatted: getValueFormatted6 18215 }; 18216 18217 // packages/dataviews/build-module/field-types/media.mjs 18218 var media_default = { 18219 type: "media", 18220 render: () => null, 18221 Edit: null, 18222 sort: () => 0, 18223 enableSorting: false, 18224 enableGlobalSearch: false, 18225 defaultOperators: [], 18226 validOperators: [], 18227 format: {}, 18228 getValueFormatted: get_value_formatted_default_default, 18229 // cannot validate any constraint, so 18230 // the only available validation for the field author 18231 // would be providing a custom validator. 18232 validate: {} 18233 }; 18234 18235 // packages/dataviews/build-module/field-types/array.mjs 18236 var import_i18n42 = __toESM(require_i18n(), 1); 18237 18238 // packages/dataviews/build-module/field-types/utils/is-valid-required-for-array.mjs 18239 function isValidRequiredForArray(item, field) { 18240 const value = field.getValue({ item }); 18241 return Array.isArray(value) && value.length > 0 && value.every( 18242 (element) => ![void 0, "", null].includes(element) 18243 ); 18244 } 18245 18246 // packages/dataviews/build-module/field-types/array.mjs 18247 function getValueFormatted7({ 18248 item, 18249 field 18250 }) { 18251 const value = field.getValue({ item }); 18252 const arr = Array.isArray(value) ? value : []; 18253 return arr.join(", "); 18254 } 18255 function render2({ item, field }) { 18256 return getValueFormatted7({ item, field }); 18257 } 18258 function isValidCustom5(item, field) { 18259 const value = field.getValue({ item }); 18260 if (![void 0, "", null].includes(value) && !Array.isArray(value)) { 18261 return (0, import_i18n42.__)("Value must be an array."); 18262 } 18263 if (!value.every((v2) => typeof v2 === "string")) { 18264 return (0, import_i18n42.__)("Every value must be a string."); 18265 } 18266 return null; 18267 } 18268 var sort4 = (a2, b2, direction) => { 18269 const arrA = Array.isArray(a2) ? a2 : []; 18270 const arrB = Array.isArray(b2) ? b2 : []; 18271 if (arrA.length !== arrB.length) { 18272 return direction === "asc" ? arrA.length - arrB.length : arrB.length - arrA.length; 18273 } 18274 const joinedA = arrA.join(","); 18275 const joinedB = arrB.join(","); 18276 return direction === "asc" ? joinedA.localeCompare(joinedB) : joinedB.localeCompare(joinedA); 18277 }; 18278 var array_default = { 18279 type: "array", 18280 render: render2, 18281 Edit: "array", 18282 sort: sort4, 18283 enableSorting: true, 18284 enableGlobalSearch: false, 18285 defaultOperators: [OPERATOR_IS_ANY, OPERATOR_IS_NONE], 18286 validOperators: [ 18287 OPERATOR_IS_ANY, 18288 OPERATOR_IS_NONE, 18289 OPERATOR_IS_ALL, 18290 OPERATOR_IS_NOT_ALL 18291 ], 18292 format: {}, 18293 getValueFormatted: getValueFormatted7, 18294 validate: { 18295 required: isValidRequiredForArray, 18296 elements: isValidElements, 18297 custom: isValidCustom5 18298 } 18299 }; 18300 18301 // packages/dataviews/build-module/field-types/password.mjs 18302 function getValueFormatted8({ 18303 item, 18304 field 18305 }) { 18306 return field.getValue({ item }) ? "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022" : ""; 18307 } 18308 var password_default = { 18309 type: "password", 18310 render, 18311 Edit: "password", 18312 sort: () => 0, 18313 // Passwords should not be sortable for security reasons 18314 enableSorting: false, 18315 enableGlobalSearch: false, 18316 defaultOperators: [], 18317 validOperators: [], 18318 format: {}, 18319 getValueFormatted: getValueFormatted8, 18320 validate: { 18321 required: isValidRequired, 18322 pattern: isValidPattern, 18323 minLength: isValidMinLength, 18324 maxLength: isValidMaxLength, 18325 elements: isValidElements 18326 } 18327 }; 18328 18329 // packages/dataviews/build-module/field-types/telephone.mjs 18330 var telephone_default = { 18331 type: "telephone", 18332 render, 18333 Edit: "telephone", 18334 sort: sort_text_default, 18335 enableSorting: true, 18336 enableGlobalSearch: false, 18337 defaultOperators: [OPERATOR_IS_ANY, OPERATOR_IS_NONE], 18338 validOperators: [ 18339 OPERATOR_IS, 18340 OPERATOR_IS_NOT, 18341 OPERATOR_CONTAINS, 18342 OPERATOR_NOT_CONTAINS, 18343 OPERATOR_STARTS_WITH, 18344 // Multiple selection 18345 OPERATOR_IS_ANY, 18346 OPERATOR_IS_NONE, 18347 OPERATOR_IS_ALL, 18348 OPERATOR_IS_NOT_ALL 18349 ], 18350 format: {}, 18351 getValueFormatted: get_value_formatted_default_default, 18352 validate: { 18353 required: isValidRequired, 18354 pattern: isValidPattern, 18355 minLength: isValidMinLength, 18356 maxLength: isValidMaxLength, 18357 elements: isValidElements 18358 } 18359 }; 18360 18361 // packages/dataviews/build-module/field-types/color.mjs 18362 var import_i18n43 = __toESM(require_i18n(), 1); 18363 var import_jsx_runtime111 = __toESM(require_jsx_runtime(), 1); 18364 function render3({ item, field }) { 18365 if (field.hasElements) { 18366 return /* @__PURE__ */ (0, import_jsx_runtime111.jsx)(RenderFromElements, { item, field }); 18367 } 18368 const value = get_value_formatted_default_default({ item, field }); 18369 if (!value || !w(value).isValid()) { 18370 return value; 18371 } 18372 return /* @__PURE__ */ (0, import_jsx_runtime111.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [ 18373 /* @__PURE__ */ (0, import_jsx_runtime111.jsx)( 18374 "div", 18375 { 18376 style: { 18377 width: "16px", 18378 height: "16px", 18379 borderRadius: "50%", 18380 backgroundColor: value, 18381 border: "1px solid #ddd", 18382 flexShrink: 0 18383 } 18384 } 18385 ), 18386 /* @__PURE__ */ (0, import_jsx_runtime111.jsx)("span", { children: value }) 18387 ] }); 18388 } 18389 function isValidCustom6(item, field) { 18390 const value = field.getValue({ item }); 18391 if (![void 0, "", null].includes(value) && !w(value).isValid()) { 18392 return (0, import_i18n43.__)("Value must be a valid color."); 18393 } 18394 return null; 18395 } 18396 var sort5 = (a2, b2, direction) => { 18397 const colorA = w(a2); 18398 const colorB = w(b2); 18399 if (!colorA.isValid() && !colorB.isValid()) { 18400 return 0; 18401 } 18402 if (!colorA.isValid()) { 18403 return direction === "asc" ? 1 : -1; 18404 } 18405 if (!colorB.isValid()) { 18406 return direction === "asc" ? -1 : 1; 18407 } 18408 const hslA = colorA.toHsl(); 18409 const hslB = colorB.toHsl(); 18410 if (hslA.h !== hslB.h) { 18411 return direction === "asc" ? hslA.h - hslB.h : hslB.h - hslA.h; 18412 } 18413 if (hslA.s !== hslB.s) { 18414 return direction === "asc" ? hslA.s - hslB.s : hslB.s - hslA.s; 18415 } 18416 return direction === "asc" ? hslA.l - hslB.l : hslB.l - hslA.l; 18417 }; 18418 var color_default = { 18419 type: "color", 18420 render: render3, 18421 Edit: "color", 18422 sort: sort5, 18423 enableSorting: true, 18424 enableGlobalSearch: false, 18425 defaultOperators: [OPERATOR_IS_ANY, OPERATOR_IS_NONE], 18426 validOperators: [ 18427 OPERATOR_IS, 18428 OPERATOR_IS_NOT, 18429 OPERATOR_IS_ANY, 18430 OPERATOR_IS_NONE 18431 ], 18432 format: {}, 18433 getValueFormatted: get_value_formatted_default_default, 18434 validate: { 18435 required: isValidRequired, 18436 elements: isValidElements, 18437 custom: isValidCustom6 18438 } 18439 }; 18440 18441 // packages/dataviews/build-module/field-types/url.mjs 18442 var url_default = { 18443 type: "url", 18444 render, 18445 Edit: "url", 18446 sort: sort_text_default, 18447 enableSorting: true, 18448 enableGlobalSearch: false, 18449 defaultOperators: [OPERATOR_IS_ANY, OPERATOR_IS_NONE], 18450 validOperators: [ 18451 OPERATOR_IS, 18452 OPERATOR_IS_NOT, 18453 OPERATOR_CONTAINS, 18454 OPERATOR_NOT_CONTAINS, 18455 OPERATOR_STARTS_WITH, 18456 // Multiple selection 18457 OPERATOR_IS_ANY, 18458 OPERATOR_IS_NONE, 18459 OPERATOR_IS_ALL, 18460 OPERATOR_IS_NOT_ALL 18461 ], 18462 format: {}, 18463 getValueFormatted: get_value_formatted_default_default, 18464 validate: { 18465 required: isValidRequired, 18466 pattern: isValidPattern, 18467 minLength: isValidMinLength, 18468 maxLength: isValidMaxLength, 18469 elements: isValidElements 18470 } 18471 }; 18472 18473 // packages/dataviews/build-module/field-types/no-type.mjs 18474 var sort6 = (a2, b2, direction) => { 18475 if (typeof a2 === "number" && typeof b2 === "number") { 18476 return sort_number_default(a2, b2, direction); 18477 } 18478 return sort_text_default(a2, b2, direction); 18479 }; 18480 var no_type_default = { 18481 // type: no type for this one 18482 render, 18483 Edit: null, 18484 sort: sort6, 18485 enableSorting: true, 18486 enableGlobalSearch: false, 18487 defaultOperators: [OPERATOR_IS, OPERATOR_IS_NOT], 18488 validOperators: getAllOperatorNames(), 18489 format: {}, 18490 getValueFormatted: get_value_formatted_default_default, 18491 validate: { 18492 required: isValidRequired, 18493 elements: isValidElements 18494 } 18495 }; 18496 18497 // packages/dataviews/build-module/field-types/utils/get-is-valid.mjs 18498 function getIsValid(field, fieldType) { 18499 let required; 18500 if (field.isValid?.required === true && fieldType.validate.required !== void 0) { 18501 required = { 18502 constraint: true, 18503 validate: fieldType.validate.required 18504 }; 18505 } 18506 let elements; 18507 if ((field.isValid?.elements === true || // elements is enabled unless the field opts-out 18508 field.isValid?.elements === void 0 && (!!field.elements || !!field.getElements)) && fieldType.validate.elements !== void 0) { 18509 elements = { 18510 constraint: true, 18511 validate: fieldType.validate.elements 18512 }; 18513 } 18514 let min; 18515 if (typeof field.isValid?.min === "number" && fieldType.validate.min !== void 0) { 18516 min = { 18517 constraint: field.isValid.min, 18518 validate: fieldType.validate.min 18519 }; 18520 } 18521 let max; 18522 if (typeof field.isValid?.max === "number" && fieldType.validate.max !== void 0) { 18523 max = { 18524 constraint: field.isValid.max, 18525 validate: fieldType.validate.max 18526 }; 18527 } 18528 let minLength; 18529 if (typeof field.isValid?.minLength === "number" && fieldType.validate.minLength !== void 0) { 18530 minLength = { 18531 constraint: field.isValid.minLength, 18532 validate: fieldType.validate.minLength 18533 }; 18534 } 18535 let maxLength; 18536 if (typeof field.isValid?.maxLength === "number" && fieldType.validate.maxLength !== void 0) { 18537 maxLength = { 18538 constraint: field.isValid.maxLength, 18539 validate: fieldType.validate.maxLength 18540 }; 18541 } 18542 let pattern; 18543 if (field.isValid?.pattern !== void 0 && fieldType.validate.pattern !== void 0) { 18544 pattern = { 18545 constraint: field.isValid?.pattern, 18546 validate: fieldType.validate.pattern 18547 }; 18548 } 18549 const custom = field.isValid?.custom ?? fieldType.validate.custom; 18550 return { 18551 required, 18552 elements, 18553 min, 18554 max, 18555 minLength, 18556 maxLength, 18557 pattern, 18558 custom 18559 }; 18560 } 18561 18562 // packages/dataviews/build-module/field-types/utils/get-filter.mjs 18563 function getFilter(fieldType) { 18564 return fieldType.validOperators.reduce((accumulator, operator) => { 18565 const operatorObj = getOperatorByName(operator); 18566 if (operatorObj?.filter) { 18567 accumulator[operator] = operatorObj.filter; 18568 } 18569 return accumulator; 18570 }, {}); 18571 } 18572 18573 // packages/dataviews/build-module/field-types/utils/get-format.mjs 18574 function getFormat(field, fieldType) { 18575 return { 18576 ...fieldType.format, 18577 ...field.format 18578 }; 18579 } 18580 var get_format_default = getFormat; 18581 18582 // packages/dataviews/build-module/field-types/index.mjs 18583 function getFieldTypeByName(type) { 18584 const found = [ 18585 email_default, 18586 integer_default, 18587 number_default, 18588 text_default, 18589 datetime_default, 18590 date_default, 18591 boolean_default, 18592 media_default, 18593 array_default, 18594 password_default, 18595 telephone_default, 18596 color_default, 18597 url_default 18598 ].find((fieldType) => fieldType?.type === type); 18599 if (!!found) { 18600 return found; 18601 } 18602 return no_type_default; 18603 } 18604 function normalizeFields(fields2) { 18605 return fields2.map((field) => { 18606 const fieldType = getFieldTypeByName(field.type); 18607 const getValue = field.getValue || get_value_from_id_default(field.id); 18608 const sort7 = function(a2, b2, direction) { 18609 const aValue = getValue({ item: a2 }); 18610 const bValue = getValue({ item: b2 }); 18611 return field.sort ? field.sort(aValue, bValue, direction) : fieldType.sort(aValue, bValue, direction); 18612 }; 18613 return { 18614 id: field.id, 18615 label: field.label || field.id, 18616 header: field.header || field.label || field.id, 18617 description: field.description, 18618 placeholder: field.placeholder, 18619 getValue, 18620 setValue: field.setValue || set_value_from_id_default(field.id), 18621 elements: field.elements, 18622 getElements: field.getElements, 18623 hasElements: hasElements(field), 18624 isVisible: field.isVisible, 18625 enableHiding: field.enableHiding ?? true, 18626 readOnly: field.readOnly ?? false, 18627 // The type provides defaults for the following props 18628 type: fieldType.type, 18629 render: field.render ?? fieldType.render, 18630 Edit: getControl(field, fieldType.Edit), 18631 sort: sort7, 18632 enableSorting: field.enableSorting ?? fieldType.enableSorting, 18633 enableGlobalSearch: field.enableGlobalSearch ?? fieldType.enableGlobalSearch, 18634 isValid: getIsValid(field, fieldType), 18635 filterBy: get_filter_by_default( 18636 field, 18637 fieldType.defaultOperators, 18638 fieldType.validOperators 18639 ), 18640 filter: getFilter(fieldType), 18641 format: get_format_default(field, fieldType), 18642 getValueFormatted: field.getValueFormatted ?? fieldType.getValueFormatted 18643 }; 18644 }); 18645 } 18646 18647 // packages/dataviews/build-module/hooks/use-data.mjs 18648 var import_element72 = __toESM(require_element(), 1); 18649 function useData({ 18650 view, 18651 data: shownData, 18652 getItemId, 18653 isLoading, 18654 paginationInfo, 18655 selection 18656 }) { 18657 const isInfiniteScrollEnabled = view.infiniteScrollEnabled; 18658 const [hasInitiallyLoaded, setHasInitiallyLoaded] = (0, import_element72.useState)( 18659 !isLoading 18660 ); 18661 (0, import_element72.useEffect)(() => { 18662 if (!isLoading) { 18663 setHasInitiallyLoaded(true); 18664 } 18665 }, [isLoading]); 18666 const previousDataRef = (0, import_element72.useRef)(shownData); 18667 const previousPaginationInfoRef = (0, import_element72.useRef)(paginationInfo); 18668 (0, import_element72.useEffect)(() => { 18669 if (!isLoading) { 18670 previousDataRef.current = shownData; 18671 previousPaginationInfoRef.current = paginationInfo; 18672 } 18673 }, [shownData, isLoading, paginationInfo]); 18674 const [visibleEntries, setVisibleEntries] = (0, import_element72.useState)([]); 18675 const positionMapRef = (0, import_element72.useRef)(/* @__PURE__ */ new Map()); 18676 const allLoadedRecordsRef = (0, import_element72.useRef)([]); 18677 const prevViewParamsRef = (0, import_element72.useRef)({ 18678 search: void 0, 18679 filters: void 0, 18680 perPage: void 0 18681 }); 18682 const scrollDirectionRef = (0, import_element72.useRef)(void 0); 18683 const prevStartPositionRef = (0, import_element72.useRef)(void 0); 18684 const hasInitializedRef = (0, import_element72.useRef)(false); 18685 const allLoadedRecords = (0, import_element72.useMemo)(() => { 18686 if (view.startPosition !== void 0 && prevStartPositionRef.current !== void 0) { 18687 if (view.startPosition < prevStartPositionRef.current) { 18688 scrollDirectionRef.current = "up"; 18689 } else if (view.startPosition > prevStartPositionRef.current) { 18690 scrollDirectionRef.current = "down"; 18691 } 18692 } 18693 prevStartPositionRef.current = view.startPosition; 18694 const currentFiltersKey = JSON.stringify(view.filters ?? []); 18695 const prevFiltersKey = prevViewParamsRef.current.filters; 18696 const shouldReset = !hasInitializedRef.current || !view.infiniteScrollEnabled || view.search !== prevViewParamsRef.current.search || currentFiltersKey !== prevFiltersKey || view.perPage !== prevViewParamsRef.current.perPage; 18697 hasInitializedRef.current = true; 18698 prevViewParamsRef.current = { 18699 search: view.search, 18700 filters: currentFiltersKey, 18701 perPage: view.perPage 18702 }; 18703 if (shouldReset) { 18704 positionMapRef.current.clear(); 18705 scrollDirectionRef.current = void 0; 18706 const startPosition = view.search ? 1 : view.startPosition ?? 1; 18707 const records = shownData.map((record, index) => { 18708 const position = startPosition + index; 18709 positionMapRef.current.set(getItemId(record), position); 18710 return { 18711 ...record, 18712 position 18713 }; 18714 }); 18715 allLoadedRecordsRef.current = records; 18716 return records; 18717 } 18718 const prev = allLoadedRecordsRef.current; 18719 const shownDataIds = new Set(shownData.map(getItemId)); 18720 const scrollDirection = scrollDirectionRef.current; 18721 const basePosition = view.search ? 1 : view.startPosition ?? 1; 18722 const newRecords = shownData.map((record, index) => { 18723 const itemId = getItemId(record); 18724 const position = view.infiniteScrollEnabled ? basePosition + index : void 0; 18725 if (position !== void 0) { 18726 positionMapRef.current.set(itemId, position); 18727 } 18728 return { 18729 ...record, 18730 position 18731 }; 18732 }); 18733 if (newRecords.length === 0) { 18734 return prev; 18735 } 18736 const prevWithoutDuplicates = prev.filter( 18737 (record) => !shownDataIds.has(getItemId(record)) 18738 ); 18739 const allRecords = scrollDirection === "up" ? [...newRecords, ...prevWithoutDuplicates] : [...prevWithoutDuplicates, ...newRecords]; 18740 allRecords.sort((a2, b2) => { 18741 const posA = a2.position; 18742 const posB = b2.position; 18743 return posA - posB; 18744 }); 18745 let result = allRecords; 18746 if (visibleEntries.length > 0) { 18747 const visibleMin = Math.min(...visibleEntries); 18748 const visibleMax = Math.max(...visibleEntries); 18749 const buffer = 20; 18750 const recordPositions = allRecords.map( 18751 (r3) => r3.position 18752 ); 18753 const minRecordPos = Math.min(...recordPositions); 18754 const maxRecordPos = Math.max(...recordPositions); 18755 const hasOverlap = !(maxRecordPos < visibleMin - buffer || minRecordPos > visibleMax + buffer); 18756 if (hasOverlap) { 18757 result = allRecords.filter((record) => { 18758 const itemId = getItemId(record); 18759 const isSelected2 = selection?.includes(itemId); 18760 if (isSelected2) { 18761 return true; 18762 } 18763 const itemPosition = record.position; 18764 if (scrollDirection === "up") { 18765 return itemPosition <= visibleMax + buffer; 18766 } else if (scrollDirection === "down") { 18767 return itemPosition >= visibleMin - buffer; 18768 } 18769 return itemPosition >= visibleMin - buffer && itemPosition <= visibleMax + buffer; 18770 }); 18771 } 18772 } 18773 allLoadedRecordsRef.current = result; 18774 return result; 18775 }, [ 18776 shownData, 18777 view.search, 18778 view.filters, 18779 view.perPage, 18780 view.startPosition, 18781 view.infiniteScrollEnabled, 18782 visibleEntries, 18783 selection, 18784 getItemId 18785 ]); 18786 if (!isInfiniteScrollEnabled) { 18787 const dataToReturn = isLoading && previousDataRef.current?.length ? previousDataRef.current : shownData; 18788 return { 18789 data: dataToReturn.map((item) => ({ 18790 ...item, 18791 position: void 0 18792 })), 18793 paginationInfo: isLoading && previousDataRef.current?.length ? previousPaginationInfoRef.current : paginationInfo, 18794 hasInitiallyLoaded, 18795 setVisibleEntries: void 0 18796 }; 18797 } 18798 return { 18799 data: allLoadedRecords, 18800 paginationInfo, 18801 hasInitiallyLoaded, 18802 setVisibleEntries 18803 }; 18804 } 18805 18806 // packages/dataviews/build-module/hooks/use-infinite-scroll.mjs 18807 var import_element73 = __toESM(require_element(), 1); 18808 var import_compose11 = __toESM(require_compose(), 1); 18809 function captureAnchorElement(container, anchorElementRef, direction) { 18810 const containerRect = container.getBoundingClientRect(); 18811 const centerY = containerRect.top + containerRect.height / 2; 18812 const items = Array.from(container.querySelectorAll("[aria-posinset]")); 18813 if (items.length === 0) { 18814 return false; 18815 } 18816 const bestAnchor = items.reduce((best, item) => { 18817 const itemRect = item.getBoundingClientRect(); 18818 const itemCenterY = itemRect.top + itemRect.height / 2; 18819 const distance = Math.abs(itemCenterY - centerY); 18820 const bestRect = best.getBoundingClientRect(); 18821 const bestCenterY = bestRect.top + bestRect.height / 2; 18822 const bestDistance = Math.abs(bestCenterY - centerY); 18823 return distance < bestDistance ? item : best; 18824 }); 18825 const posinset = Number(bestAnchor.getAttribute("aria-posinset")); 18826 const anchorRect = bestAnchor.getBoundingClientRect(); 18827 anchorElementRef.current = { 18828 posinset, 18829 viewportOffset: anchorRect.top - containerRect.top, 18830 direction 18831 }; 18832 return true; 18833 } 18834 function useInfiniteScroll({ 18835 view, 18836 onChangeView, 18837 isLoading, 18838 paginationInfo, 18839 containerRef, 18840 setVisibleEntries 18841 }) { 18842 const anchorElementRef = (0, import_element73.useRef)(null); 18843 const viewRef = (0, import_element73.useRef)(view); 18844 const isLoadingRef = (0, import_element73.useRef)(isLoading); 18845 const onChangeViewRef = (0, import_element73.useRef)(onChangeView); 18846 const totalItemsRef = (0, import_element73.useRef)(paginationInfo.totalItems); 18847 (0, import_element73.useLayoutEffect)(() => { 18848 viewRef.current = view; 18849 isLoadingRef.current = isLoading; 18850 onChangeViewRef.current = onChangeView; 18851 totalItemsRef.current = paginationInfo.totalItems; 18852 }, [view, isLoading, onChangeView, paginationInfo.totalItems]); 18853 const intersectionObserverCallback = (0, import_element73.useCallback)( 18854 (entries) => { 18855 if (!setVisibleEntries) { 18856 return; 18857 } 18858 setVisibleEntries((prev) => { 18859 const newVisibleEntries = new Set(prev); 18860 let hasChanged = false; 18861 entries.forEach((entry) => { 18862 const posInSet = Number( 18863 entry.target?.attributes?.getNamedItem( 18864 "aria-posinset" 18865 )?.value 18866 ); 18867 if (isNaN(posInSet)) { 18868 return; 18869 } 18870 if (entry.isIntersecting) { 18871 if (!newVisibleEntries.has(posInSet)) { 18872 newVisibleEntries.add(posInSet); 18873 hasChanged = true; 18874 } 18875 } else if (newVisibleEntries.has(posInSet)) { 18876 newVisibleEntries.delete(posInSet); 18877 hasChanged = true; 18878 } 18879 }); 18880 return hasChanged ? Array.from(newVisibleEntries).sort() : prev; 18881 }); 18882 }, 18883 [setVisibleEntries] 18884 ); 18885 (0, import_element73.useLayoutEffect)(() => { 18886 const container = containerRef.current; 18887 const anchor = anchorElementRef.current; 18888 if (!container || !view.infiniteScrollEnabled || !anchor || isLoading) { 18889 return; 18890 } 18891 const anchorElement = container.querySelector( 18892 `[aria-posinset="$anchor.posinset}"]` 18893 ); 18894 if (anchorElement) { 18895 const containerRect = container.getBoundingClientRect(); 18896 const anchorRect = anchorElement.getBoundingClientRect(); 18897 const currentOffset = anchorRect.top - containerRect.top; 18898 const scrollAdjustment = currentOffset - anchor.viewportOffset; 18899 if (Math.abs(scrollAdjustment) > 1) { 18900 container.scrollTop += scrollAdjustment; 18901 } 18902 } 18903 anchorElementRef.current = null; 18904 }, [containerRef, isLoading, view.infiniteScrollEnabled]); 18905 const intersectionObserverRef = (0, import_element73.useRef)( 18906 null 18907 ); 18908 (0, import_element73.useEffect)(() => { 18909 if (!view.infiniteScrollEnabled || !intersectionObserverCallback) { 18910 if (intersectionObserverRef.current) { 18911 intersectionObserverRef.current.disconnect(); 18912 intersectionObserverRef.current = null; 18913 } 18914 return; 18915 } 18916 intersectionObserverRef.current = new IntersectionObserver( 18917 intersectionObserverCallback, 18918 { root: null, rootMargin: "0px", threshold: 0.1 } 18919 ); 18920 return () => { 18921 if (intersectionObserverRef.current) { 18922 intersectionObserverRef.current.disconnect(); 18923 intersectionObserverRef.current = null; 18924 } 18925 }; 18926 }, [view.infiniteScrollEnabled, intersectionObserverCallback]); 18927 (0, import_element73.useEffect)(() => { 18928 if (!view.infiniteScrollEnabled || !containerRef.current) { 18929 return; 18930 } 18931 let lastScrollTop = 0; 18932 const BOTTOM_THRESHOLD = 600; 18933 const TOP_THRESHOLD = 800; 18934 const handleScroll = (0, import_compose11.throttle)((event) => { 18935 const currentView = viewRef.current; 18936 const totalItems = totalItemsRef.current; 18937 const target = event.target; 18938 const scrollTop = target.scrollTop; 18939 const scrollHeight = target.scrollHeight; 18940 const clientHeight = target.clientHeight; 18941 const scrollDirection = scrollTop > lastScrollTop ? "down" : "up"; 18942 lastScrollTop = scrollTop; 18943 if (isLoadingRef.current) { 18944 return; 18945 } 18946 const currentStartPosition = currentView.startPosition || 1; 18947 const batchSize = currentView.perPage || 10; 18948 const currentEndPosition = Math.min( 18949 currentStartPosition + batchSize, 18950 totalItems 18951 ); 18952 if (scrollDirection === "down" && scrollTop + clientHeight >= scrollHeight - BOTTOM_THRESHOLD) { 18953 if (currentEndPosition < totalItems) { 18954 const newStartPosition = currentEndPosition; 18955 captureAnchorElement(target, anchorElementRef, "down"); 18956 onChangeViewRef.current({ 18957 ...currentView, 18958 startPosition: newStartPosition 18959 }); 18960 } 18961 } 18962 if (scrollDirection === "up" && scrollTop <= TOP_THRESHOLD) { 18963 if (currentStartPosition > 1) { 18964 const calculatedStartPosition = currentStartPosition - batchSize; 18965 const newStartPosition = calculatedStartPosition < 6 ? 1 : calculatedStartPosition; 18966 captureAnchorElement(target, anchorElementRef, "up"); 18967 onChangeViewRef.current({ 18968 ...currentView, 18969 startPosition: newStartPosition 18970 }); 18971 } 18972 } 18973 }, 50); 18974 const container = containerRef.current; 18975 container.addEventListener("scroll", handleScroll); 18976 return () => { 18977 container.removeEventListener("scroll", handleScroll); 18978 handleScroll.cancel(); 18979 }; 18980 }, [containerRef, view.infiniteScrollEnabled]); 18981 return { 18982 intersectionObserver: intersectionObserverRef.current 18983 }; 18984 } 18985 18986 // packages/dataviews/build-module/dataviews/index.mjs 18987 var import_jsx_runtime112 = __toESM(require_jsx_runtime(), 1); 18988 var defaultGetItemId = (item) => item.id; 18989 var defaultIsItemClickable = () => true; 18990 var EMPTY_ARRAY6 = []; 18991 var dataViewsLayouts = VIEW_LAYOUTS.filter( 18992 (viewLayout) => !viewLayout.isPicker 18993 ); 18994 function DefaultUI({ 18995 header, 18996 search = true, 18997 searchLabel = void 0 18998 }) { 18999 const { view } = (0, import_element74.useContext)(dataviews_context_default); 19000 const isInfiniteScroll = view.infiniteScrollEnabled; 19001 return /* @__PURE__ */ (0, import_jsx_runtime112.jsxs)(import_jsx_runtime112.Fragment, { children: [ 19002 /* @__PURE__ */ (0, import_jsx_runtime112.jsxs)( 19003 Stack, 19004 { 19005 direction: "row", 19006 align: "top", 19007 justify: "space-between", 19008 className: clsx_default("dataviews__view-actions", { 19009 "dataviews__view-actions--infinite-scroll": isInfiniteScroll 19010 }), 19011 gap: "xs", 19012 children: [ 19013 /* @__PURE__ */ (0, import_jsx_runtime112.jsxs)( 19014 Stack, 19015 { 19016 direction: "row", 19017 justify: "start", 19018 gap: "sm", 19019 className: "dataviews__search", 19020 children: [ 19021 search && /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(dataviews_search_default, { label: searchLabel }), 19022 /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(toggle_default, {}) 19023 ] 19024 } 19025 ), 19026 /* @__PURE__ */ (0, import_jsx_runtime112.jsxs)(Stack, { direction: "row", gap: "xs", style: { flexShrink: 0 }, children: [ 19027 /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(dataviews_view_config_default, {}), 19028 header 19029 ] }) 19030 ] 19031 } 19032 ), 19033 /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(filters_toggled_default, { className: "dataviews-filters__container" }), 19034 /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(DataViewsLayout, {}), 19035 /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(DataViewsFooter, {}) 19036 ] }); 19037 } 19038 function DataViews({ 19039 view, 19040 onChangeView, 19041 fields: fields2, 19042 search = true, 19043 searchLabel = void 0, 19044 actions: actions2 = EMPTY_ARRAY6, 19045 data, 19046 getItemId = defaultGetItemId, 19047 getItemLevel, 19048 isLoading = false, 19049 paginationInfo, 19050 defaultLayouts: defaultLayoutsProperty, 19051 selection: selectionProperty, 19052 onChangeSelection, 19053 onClickItem, 19054 renderItemLink, 19055 isItemClickable = defaultIsItemClickable, 19056 header, 19057 children, 19058 config = { perPageSizes: [10, 20, 50, 100] }, 19059 empty, 19060 onReset 19061 }) { 19062 const [selectionState, setSelectionState] = (0, import_element74.useState)([]); 19063 const isUncontrolled = selectionProperty === void 0 || onChangeSelection === void 0; 19064 const selection = isUncontrolled ? selectionState : selectionProperty; 19065 const { 19066 data: displayData, 19067 paginationInfo: displayPaginationInfo, 19068 hasInitiallyLoaded, 19069 setVisibleEntries 19070 } = useData({ 19071 view, 19072 data, 19073 getItemId, 19074 isLoading, 19075 selection, 19076 paginationInfo 19077 }); 19078 const containerRef = (0, import_element74.useRef)(null); 19079 const [containerWidth, setContainerWidth] = (0, import_element74.useState)(0); 19080 const resizeObserverRef = (0, import_compose12.useResizeObserver)( 19081 (resizeObserverEntries) => { 19082 setContainerWidth( 19083 resizeObserverEntries[0].borderBoxSize[0].inlineSize 19084 ); 19085 }, 19086 { box: "border-box" } 19087 ); 19088 const [openedFilter, setOpenedFilter] = (0, import_element74.useState)(null); 19089 function setSelectionWithChange(value) { 19090 const newValue = typeof value === "function" ? value(selection) : value; 19091 if (isUncontrolled) { 19092 setSelectionState(newValue); 19093 } 19094 if (onChangeSelection) { 19095 onChangeSelection(newValue); 19096 } 19097 } 19098 const _fields = (0, import_element74.useMemo)(() => normalizeFields(fields2), [fields2]); 19099 const _selection = (0, import_element74.useMemo)(() => { 19100 if (view.infiniteScrollEnabled) { 19101 return selection; 19102 } 19103 return selection.filter( 19104 (id) => data.some((item) => getItemId(item) === id) 19105 ); 19106 }, [selection, data, getItemId, view.infiniteScrollEnabled]); 19107 const filters = use_filters_default(_fields, view); 19108 const hasPrimaryOrLockedFilters = (0, import_element74.useMemo)( 19109 () => (filters || []).some( 19110 (filter) => filter.isPrimary || filter.isLocked 19111 ), 19112 [filters] 19113 ); 19114 const [isShowingFilter, setIsShowingFilter] = (0, import_element74.useState)( 19115 hasPrimaryOrLockedFilters 19116 ); 19117 const { intersectionObserver } = useInfiniteScroll({ 19118 view, 19119 onChangeView, 19120 isLoading, 19121 paginationInfo, 19122 containerRef, 19123 setVisibleEntries 19124 }); 19125 (0, import_element74.useEffect)(() => { 19126 if (hasPrimaryOrLockedFilters && !isShowingFilter) { 19127 setIsShowingFilter(true); 19128 } 19129 }, [hasPrimaryOrLockedFilters, isShowingFilter]); 19130 const defaultLayouts = (0, import_element74.useMemo)( 19131 () => Object.fromEntries( 19132 Object.entries(defaultLayoutsProperty).filter( 19133 ([layoutType]) => { 19134 return dataViewsLayouts.some( 19135 (viewLayout) => viewLayout.type === layoutType 19136 ); 19137 } 19138 ) 19139 ), 19140 [defaultLayoutsProperty] 19141 ); 19142 if (!defaultLayouts[view.type]) { 19143 return null; 19144 } 19145 return /* @__PURE__ */ (0, import_jsx_runtime112.jsx)( 19146 dataviews_context_default.Provider, 19147 { 19148 value: { 19149 view, 19150 onChangeView, 19151 fields: _fields, 19152 actions: actions2, 19153 data: displayData, 19154 isLoading, 19155 paginationInfo: displayPaginationInfo, 19156 selection: _selection, 19157 onChangeSelection: setSelectionWithChange, 19158 openedFilter, 19159 setOpenedFilter, 19160 getItemId, 19161 getItemLevel, 19162 isItemClickable, 19163 onClickItem, 19164 renderItemLink, 19165 containerWidth, 19166 containerRef, 19167 resizeObserverRef, 19168 defaultLayouts, 19169 filters, 19170 isShowingFilter, 19171 setIsShowingFilter, 19172 config, 19173 empty, 19174 hasInitiallyLoaded, 19175 onReset, 19176 intersectionObserver 19177 }, 19178 children: /* @__PURE__ */ (0, import_jsx_runtime112.jsx)("div", { className: "dataviews-wrapper", children: children ?? /* @__PURE__ */ (0, import_jsx_runtime112.jsx)( 19179 DefaultUI, 19180 { 19181 header, 19182 search, 19183 searchLabel 19184 } 19185 ) }) 19186 } 19187 ); 19188 } 19189 var DataViewsSubComponents = DataViews; 19190 DataViewsSubComponents.BulkActionToolbar = BulkActionsFooter; 19191 DataViewsSubComponents.Filters = filters_default; 19192 DataViewsSubComponents.FiltersToggled = filters_toggled_default; 19193 DataViewsSubComponents.FiltersToggle = toggle_default; 19194 DataViewsSubComponents.Layout = DataViewsLayout; 19195 DataViewsSubComponents.LayoutSwitcher = ViewTypeMenu; 19196 DataViewsSubComponents.Pagination = DataViewsPagination; 19197 DataViewsSubComponents.Search = dataviews_search_default; 19198 DataViewsSubComponents.ViewConfig = DataviewsViewConfigDropdown; 19199 DataViewsSubComponents.Footer = DataViewsFooter; 19200 var dataviews_default = DataViewsSubComponents; 19201 19202 // packages/dataviews/build-module/dataform/index.mjs 19203 var import_element86 = __toESM(require_element(), 1); 19204 19205 // packages/dataviews/build-module/components/dataform-context/index.mjs 19206 var import_element75 = __toESM(require_element(), 1); 19207 var import_jsx_runtime113 = __toESM(require_jsx_runtime(), 1); 19208 var DataFormContext = (0, import_element75.createContext)({ 19209 fields: [] 19210 }); 19211 DataFormContext.displayName = "DataFormContext"; 19212 function DataFormProvider({ 19213 fields: fields2, 19214 children 19215 }) { 19216 return /* @__PURE__ */ (0, import_jsx_runtime113.jsx)(DataFormContext.Provider, { value: { fields: fields2 }, children }); 19217 } 19218 var dataform_context_default = DataFormContext; 19219 19220 // packages/dataviews/build-module/components/dataform-layouts/data-form-layout.mjs 19221 var import_element85 = __toESM(require_element(), 1); 19222 19223 // packages/dataviews/build-module/components/dataform-layouts/regular/index.mjs 19224 var import_element76 = __toESM(require_element(), 1); 19225 var import_components48 = __toESM(require_components(), 1); 19226 19227 // packages/dataviews/build-module/components/dataform-layouts/normalize-form.mjs 19228 var import_i18n44 = __toESM(require_i18n(), 1); 19229 var DEFAULT_LAYOUT = { 19230 type: "regular", 19231 labelPosition: "top" 19232 }; 19233 var normalizeCardSummaryField = (sum) => { 19234 if (typeof sum === "string") { 19235 return [{ id: sum, visibility: "when-collapsed" }]; 19236 } 19237 return sum.map((item) => { 19238 if (typeof item === "string") { 19239 return { id: item, visibility: "when-collapsed" }; 19240 } 19241 return { id: item.id, visibility: item.visibility }; 19242 }); 19243 }; 19244 function normalizeLayout(layout) { 19245 let normalizedLayout = DEFAULT_LAYOUT; 19246 if (layout?.type === "regular") { 19247 normalizedLayout = { 19248 type: "regular", 19249 labelPosition: layout?.labelPosition ?? "top" 19250 }; 19251 } else if (layout?.type === "panel") { 19252 const summary = layout.summary ?? []; 19253 const normalizedSummary = Array.isArray(summary) ? summary : [summary]; 19254 const openAs = layout?.openAs; 19255 let normalizedOpenAs; 19256 if (typeof openAs === "object" && openAs.type === "modal") { 19257 normalizedOpenAs = { 19258 type: "modal", 19259 applyLabel: openAs.applyLabel?.trim() || (0, import_i18n44.__)("Apply"), 19260 cancelLabel: openAs.cancelLabel?.trim() || (0, import_i18n44.__)("Cancel") 19261 }; 19262 } else if (openAs === "modal") { 19263 normalizedOpenAs = { 19264 type: "modal", 19265 applyLabel: (0, import_i18n44.__)("Apply"), 19266 cancelLabel: (0, import_i18n44.__)("Cancel") 19267 }; 19268 } else { 19269 normalizedOpenAs = { type: "dropdown" }; 19270 } 19271 normalizedLayout = { 19272 type: "panel", 19273 labelPosition: layout?.labelPosition ?? "side", 19274 openAs: normalizedOpenAs, 19275 summary: normalizedSummary, 19276 editVisibility: layout?.editVisibility ?? "on-hover" 19277 }; 19278 } else if (layout?.type === "card") { 19279 if (layout.withHeader === false) { 19280 normalizedLayout = { 19281 type: "card", 19282 withHeader: false, 19283 isOpened: true, 19284 summary: [], 19285 isCollapsible: false 19286 }; 19287 } else { 19288 const summary = layout.summary ?? []; 19289 normalizedLayout = { 19290 type: "card", 19291 withHeader: true, 19292 isOpened: typeof layout.isOpened === "boolean" ? layout.isOpened : true, 19293 summary: normalizeCardSummaryField(summary), 19294 isCollapsible: layout.isCollapsible === void 0 ? true : layout.isCollapsible 19295 }; 19296 } 19297 } else if (layout?.type === "row") { 19298 normalizedLayout = { 19299 type: "row", 19300 alignment: layout?.alignment ?? "center", 19301 styles: layout?.styles ?? {} 19302 }; 19303 } else if (layout?.type === "details") { 19304 normalizedLayout = { 19305 type: "details", 19306 summary: layout?.summary ?? "" 19307 }; 19308 } 19309 return normalizedLayout; 19310 } 19311 function normalizeForm(form) { 19312 const normalizedFormLayout = normalizeLayout(form?.layout); 19313 const normalizedFields = (form.fields ?? []).map( 19314 (field) => { 19315 if (typeof field === "string") { 19316 return { 19317 id: field, 19318 layout: normalizedFormLayout 19319 }; 19320 } 19321 const fieldLayout = field.layout ? normalizeLayout(field.layout) : normalizedFormLayout; 19322 return { 19323 id: field.id, 19324 layout: fieldLayout, 19325 ...!!field.label && { label: field.label }, 19326 ...!!field.description && { 19327 description: field.description 19328 }, 19329 ..."children" in field && Array.isArray(field.children) && { 19330 children: normalizeForm({ 19331 fields: field.children, 19332 layout: DEFAULT_LAYOUT 19333 }).fields 19334 } 19335 }; 19336 } 19337 ); 19338 return { 19339 layout: normalizedFormLayout, 19340 fields: normalizedFields 19341 }; 19342 } 19343 var normalize_form_default = normalizeForm; 19344 19345 // packages/dataviews/build-module/components/dataform-layouts/regular/index.mjs 19346 var import_jsx_runtime114 = __toESM(require_jsx_runtime(), 1); 19347 function Header4({ title }) { 19348 return /* @__PURE__ */ (0, import_jsx_runtime114.jsx)( 19349 Stack, 19350 { 19351 direction: "column", 19352 className: "dataforms-layouts-regular__header", 19353 gap: "lg", 19354 children: /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(Stack, { direction: "row", align: "center", children: /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(import_components48.__experimentalHeading, { level: 2, size: 13, children: title }) }) 19355 } 19356 ); 19357 } 19358 function FormRegularField({ 19359 data, 19360 field, 19361 onChange, 19362 hideLabelFromVision, 19363 markWhenOptional, 19364 validity 19365 }) { 19366 const { fields: fields2 } = (0, import_element76.useContext)(dataform_context_default); 19367 const layout = field.layout; 19368 const form = (0, import_element76.useMemo)( 19369 () => ({ 19370 layout: DEFAULT_LAYOUT, 19371 fields: !!field.children ? field.children : [] 19372 }), 19373 [field] 19374 ); 19375 if (!!field.children) { 19376 return /* @__PURE__ */ (0, import_jsx_runtime114.jsxs)(import_jsx_runtime114.Fragment, { children: [ 19377 !hideLabelFromVision && field.label && /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(Header4, { title: field.label }), 19378 /* @__PURE__ */ (0, import_jsx_runtime114.jsx)( 19379 DataFormLayout, 19380 { 19381 data, 19382 form, 19383 onChange, 19384 validity: validity?.children 19385 } 19386 ) 19387 ] }); 19388 } 19389 const labelPosition = layout.labelPosition; 19390 const fieldDefinition = fields2.find( 19391 (fieldDef) => fieldDef.id === field.id 19392 ); 19393 if (!fieldDefinition || !fieldDefinition.Edit) { 19394 return null; 19395 } 19396 if (labelPosition === "side") { 19397 return /* @__PURE__ */ (0, import_jsx_runtime114.jsxs)( 19398 Stack, 19399 { 19400 direction: "row", 19401 className: "dataforms-layouts-regular__field", 19402 gap: "sm", 19403 children: [ 19404 /* @__PURE__ */ (0, import_jsx_runtime114.jsx)( 19405 "div", 19406 { 19407 className: clsx_default( 19408 "dataforms-layouts-regular__field-label", 19409 `dataforms-layouts-regular__field-label--label-position-$labelPosition}` 19410 ), 19411 children: /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(import_components48.BaseControl.VisualLabel, { children: fieldDefinition.label }) 19412 } 19413 ), 19414 /* @__PURE__ */ (0, import_jsx_runtime114.jsx)("div", { className: "dataforms-layouts-regular__field-control", children: fieldDefinition.readOnly === true ? /* @__PURE__ */ (0, import_jsx_runtime114.jsx)( 19415 fieldDefinition.render, 19416 { 19417 item: data, 19418 field: fieldDefinition 19419 } 19420 ) : /* @__PURE__ */ (0, import_jsx_runtime114.jsx)( 19421 fieldDefinition.Edit, 19422 { 19423 data, 19424 field: fieldDefinition, 19425 onChange, 19426 hideLabelFromVision: true, 19427 markWhenOptional, 19428 validity 19429 }, 19430 fieldDefinition.id 19431 ) }) 19432 ] 19433 } 19434 ); 19435 } 19436 return /* @__PURE__ */ (0, import_jsx_runtime114.jsx)("div", { className: "dataforms-layouts-regular__field", children: fieldDefinition.readOnly === true ? /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(import_jsx_runtime114.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime114.jsxs)(import_jsx_runtime114.Fragment, { children: [ 19437 !hideLabelFromVision && labelPosition !== "none" && /* @__PURE__ */ (0, import_jsx_runtime114.jsx)(import_components48.BaseControl.VisualLabel, { children: fieldDefinition.label }), 19438 /* @__PURE__ */ (0, import_jsx_runtime114.jsx)( 19439 fieldDefinition.render, 19440 { 19441 item: data, 19442 field: fieldDefinition 19443 } 19444 ) 19445 ] }) }) : /* @__PURE__ */ (0, import_jsx_runtime114.jsx)( 19446 fieldDefinition.Edit, 19447 { 19448 data, 19449 field: fieldDefinition, 19450 onChange, 19451 hideLabelFromVision: labelPosition === "none" ? true : hideLabelFromVision, 19452 markWhenOptional, 19453 validity 19454 } 19455 ) }); 19456 } 19457 19458 // packages/dataviews/build-module/components/dataform-layouts/panel/modal.mjs 19459 var import_deepmerge2 = __toESM(require_cjs(), 1); 19460 var import_components51 = __toESM(require_components(), 1); 19461 var import_element81 = __toESM(require_element(), 1); 19462 var import_compose14 = __toESM(require_compose(), 1); 19463 19464 // packages/dataviews/build-module/components/dataform-layouts/panel/summary-button.mjs 19465 var import_components50 = __toESM(require_components(), 1); 19466 var import_i18n45 = __toESM(require_i18n(), 1); 19467 var import_compose13 = __toESM(require_compose(), 1); 19468 var import_element77 = __toESM(require_element(), 1); 19469 19470 // packages/dataviews/build-module/components/dataform-layouts/panel/utils/get-label-classname.mjs 19471 function getLabelClassName(labelPosition, showError) { 19472 return clsx_default( 19473 "dataforms-layouts-panel__field-label", 19474 `dataforms-layouts-panel__field-label--label-position-$labelPosition}`, 19475 { "has-error": showError } 19476 ); 19477 } 19478 var get_label_classname_default = getLabelClassName; 19479 19480 // packages/dataviews/build-module/components/dataform-layouts/panel/utils/get-label-content.mjs 19481 var import_components49 = __toESM(require_components(), 1); 19482 var import_jsx_runtime115 = __toESM(require_jsx_runtime(), 1); 19483 function getLabelContent(showError, errorMessage, fieldLabel) { 19484 return showError ? /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_components49.Tooltip, { text: errorMessage, placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime115.jsxs)("span", { className: "dataforms-layouts-panel__field-label-error-content", children: [ 19485 /* @__PURE__ */ (0, import_jsx_runtime115.jsx)(import_components49.Icon, { icon: error_default, size: 16 }), 19486 fieldLabel 19487 ] }) }) : fieldLabel; 19488 } 19489 var get_label_content_default = getLabelContent; 19490 19491 // packages/dataviews/build-module/components/dataform-layouts/panel/utils/get-first-validation-error.mjs 19492 function getFirstValidationError(validity) { 19493 if (!validity) { 19494 return void 0; 19495 } 19496 const validityRules = Object.keys(validity).filter( 19497 (key) => key !== "children" 19498 ); 19499 for (const key of validityRules) { 19500 const rule = validity[key]; 19501 if (rule === void 0) { 19502 continue; 19503 } 19504 if (rule.type === "invalid") { 19505 if (rule.message) { 19506 return rule.message; 19507 } 19508 if (key === "required") { 19509 return "A required field is empty"; 19510 } 19511 return "Unidentified validation error"; 19512 } 19513 } 19514 if (validity.children) { 19515 for (const childValidity of Object.values(validity.children)) { 19516 const childError = getFirstValidationError(childValidity); 19517 if (childError) { 19518 return childError; 19519 } 19520 } 19521 } 19522 return void 0; 19523 } 19524 var get_first_validation_error_default = getFirstValidationError; 19525 19526 // packages/dataviews/build-module/components/dataform-layouts/panel/summary-button.mjs 19527 var import_jsx_runtime116 = __toESM(require_jsx_runtime(), 1); 19528 function SummaryButton({ 19529 data, 19530 field, 19531 fieldLabel, 19532 summaryFields, 19533 validity, 19534 touched, 19535 disabled: disabled2, 19536 onClick, 19537 "aria-expanded": ariaExpanded 19538 }) { 19539 const { labelPosition, editVisibility } = field.layout; 19540 const errorMessage = get_first_validation_error_default(validity); 19541 const showError = touched && !!errorMessage; 19542 const labelClassName = get_label_classname_default(labelPosition, showError); 19543 const labelContent = get_label_content_default(showError, errorMessage, fieldLabel); 19544 const className = clsx_default( 19545 "dataforms-layouts-panel__field-trigger", 19546 `dataforms-layouts-panel__field-trigger--label-$labelPosition}`, 19547 { 19548 "is-disabled": disabled2, 19549 "dataforms-layouts-panel__field-trigger--edit-always": editVisibility === "always" 19550 } 19551 ); 19552 const controlId = (0, import_compose13.useInstanceId)( 19553 SummaryButton, 19554 "dataforms-layouts-panel__field-control" 19555 ); 19556 const ariaLabel = showError ? (0, import_i18n45.sprintf)( 19557 // translators: %s: Field name. 19558 (0, import_i18n45._x)("Edit %s (has errors)", "field"), 19559 fieldLabel || "" 19560 ) : (0, import_i18n45.sprintf)( 19561 // translators: %s: Field name. 19562 (0, import_i18n45._x)("Edit %s", "field"), 19563 fieldLabel || "" 19564 ); 19565 const rowRef = (0, import_element77.useRef)(null); 19566 const handleRowClick = () => { 19567 const selection = rowRef.current?.ownerDocument.defaultView?.getSelection(); 19568 if (selection && selection.toString().length > 0) { 19569 return; 19570 } 19571 onClick(); 19572 }; 19573 const handleKeyDown = (event) => { 19574 if (event.target === event.currentTarget && (event.key === "Enter" || event.key === " ")) { 19575 event.preventDefault(); 19576 onClick(); 19577 } 19578 }; 19579 return /* @__PURE__ */ (0, import_jsx_runtime116.jsxs)( 19580 "div", 19581 { 19582 ref: rowRef, 19583 className, 19584 onClick: !disabled2 ? handleRowClick : void 0, 19585 onKeyDown: !disabled2 ? handleKeyDown : void 0, 19586 children: [ 19587 labelPosition !== "none" && /* @__PURE__ */ (0, import_jsx_runtime116.jsx)("span", { className: labelClassName, children: labelContent }), 19588 labelPosition === "none" && showError && /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(import_components50.Tooltip, { text: errorMessage, placement: "top", children: /* @__PURE__ */ (0, import_jsx_runtime116.jsx)("span", { className: "dataforms-layouts-panel__field-label-error-content", children: /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(import_components50.Icon, { icon: error_default, size: 16 }) }) }), 19589 /* @__PURE__ */ (0, import_jsx_runtime116.jsx)( 19590 "span", 19591 { 19592 id: `$controlId}`, 19593 className: "dataforms-layouts-panel__field-control", 19594 children: summaryFields.length > 1 ? /* @__PURE__ */ (0, import_jsx_runtime116.jsx)( 19595 "span", 19596 { 19597 style: { 19598 display: "flex", 19599 flexDirection: "column", 19600 alignItems: "flex-start", 19601 width: "100%", 19602 gap: "2px" 19603 }, 19604 children: summaryFields.map((summaryField) => /* @__PURE__ */ (0, import_jsx_runtime116.jsx)( 19605 "span", 19606 { 19607 style: { width: "100%" }, 19608 children: /* @__PURE__ */ (0, import_jsx_runtime116.jsx)( 19609 summaryField.render, 19610 { 19611 item: data, 19612 field: summaryField 19613 } 19614 ) 19615 }, 19616 summaryField.id 19617 )) 19618 } 19619 ) : summaryFields.map((summaryField) => /* @__PURE__ */ (0, import_jsx_runtime116.jsx)( 19620 summaryField.render, 19621 { 19622 item: data, 19623 field: summaryField 19624 }, 19625 summaryField.id 19626 )) 19627 } 19628 ), 19629 !disabled2 && /* @__PURE__ */ (0, import_jsx_runtime116.jsx)( 19630 import_components50.Button, 19631 { 19632 className: "dataforms-layouts-panel__field-trigger-icon", 19633 label: ariaLabel, 19634 showTooltip: false, 19635 icon: pencil_default, 19636 size: "small", 19637 "aria-expanded": ariaExpanded, 19638 "aria-haspopup": "dialog", 19639 "aria-describedby": `$controlId}` 19640 } 19641 ) 19642 ] 19643 } 19644 ); 19645 } 19646 19647 // packages/dataviews/build-module/hooks/use-form-validity.mjs 19648 var import_deepmerge = __toESM(require_cjs(), 1); 19649 var import_es62 = __toESM(require_es6(), 1); 19650 var import_element78 = __toESM(require_element(), 1); 19651 var import_i18n46 = __toESM(require_i18n(), 1); 19652 function isFormValid(formValidity) { 19653 if (!formValidity) { 19654 return true; 19655 } 19656 return Object.values(formValidity).every((fieldValidation) => { 19657 return Object.entries(fieldValidation).every( 19658 ([key, validation]) => { 19659 if (key === "children" && validation && typeof validation === "object") { 19660 return isFormValid(validation); 19661 } 19662 return validation.type !== "invalid" && validation.type !== "validating"; 19663 } 19664 ); 19665 }); 19666 } 19667 function getFormFieldsToValidate(form, fields2) { 19668 const normalizedForm = normalize_form_default(form); 19669 if (normalizedForm.fields.length === 0) { 19670 return []; 19671 } 19672 const fieldsMap = /* @__PURE__ */ new Map(); 19673 fields2.forEach((field) => { 19674 fieldsMap.set(field.id, field); 19675 }); 19676 function processFormField(formField) { 19677 if ("children" in formField && Array.isArray(formField.children)) { 19678 const processedChildren = formField.children.map(processFormField).filter((child) => child !== null); 19679 if (processedChildren.length === 0) { 19680 return null; 19681 } 19682 const fieldDef2 = fieldsMap.get(formField.id); 19683 if (fieldDef2) { 19684 const [normalizedField2] = normalizeFields([ 19685 fieldDef2 19686 ]); 19687 return { 19688 id: formField.id, 19689 children: processedChildren, 19690 field: normalizedField2 19691 }; 19692 } 19693 return { 19694 id: formField.id, 19695 children: processedChildren 19696 }; 19697 } 19698 const fieldDef = fieldsMap.get(formField.id); 19699 if (!fieldDef) { 19700 return null; 19701 } 19702 const [normalizedField] = normalizeFields([fieldDef]); 19703 return { 19704 id: formField.id, 19705 children: [], 19706 field: normalizedField 19707 }; 19708 } 19709 const toValidate = normalizedForm.fields.map(processFormField).filter((field) => field !== null); 19710 return toValidate; 19711 } 19712 function setValidityAtPath(formValidity, fieldValidity, path) { 19713 if (!formValidity) { 19714 formValidity = {}; 19715 } 19716 if (path.length === 0) { 19717 return formValidity; 19718 } 19719 const result = { ...formValidity }; 19720 let current = result; 19721 for (let i2 = 0; i2 < path.length - 1; i2++) { 19722 const segment = path[i2]; 19723 if (!current[segment]) { 19724 current[segment] = {}; 19725 } 19726 current[segment] = { ...current[segment] }; 19727 current = current[segment]; 19728 } 19729 const finalKey = path[path.length - 1]; 19730 current[finalKey] = { 19731 ...current[finalKey] || {}, 19732 ...fieldValidity 19733 }; 19734 return result; 19735 } 19736 function removeValidationProperty(formValidity, path, property) { 19737 if (!formValidity || path.length === 0) { 19738 return formValidity; 19739 } 19740 const result = { ...formValidity }; 19741 let current = result; 19742 for (let i2 = 0; i2 < path.length - 1; i2++) { 19743 const segment = path[i2]; 19744 if (!current[segment]) { 19745 return formValidity; 19746 } 19747 current[segment] = { ...current[segment] }; 19748 current = current[segment]; 19749 } 19750 const finalKey = path[path.length - 1]; 19751 if (!current[finalKey]) { 19752 return formValidity; 19753 } 19754 const fieldValidity = { ...current[finalKey] }; 19755 delete fieldValidity[property]; 19756 if (Object.keys(fieldValidity).length === 0) { 19757 delete current[finalKey]; 19758 } else { 19759 current[finalKey] = fieldValidity; 19760 } 19761 if (Object.keys(result).length === 0) { 19762 return void 0; 19763 } 19764 return result; 19765 } 19766 function handleElementsValidationAsync(promise, formField, promiseHandler) { 19767 const { elementsCounterRef, setFormValidity, path, item } = promiseHandler; 19768 const currentToken = (elementsCounterRef.current[formField.id] || 0) + 1; 19769 elementsCounterRef.current[formField.id] = currentToken; 19770 promise.then((result) => { 19771 if (currentToken !== elementsCounterRef.current[formField.id]) { 19772 return; 19773 } 19774 if (!Array.isArray(result)) { 19775 setFormValidity((prev) => { 19776 const newFormValidity = setValidityAtPath( 19777 prev, 19778 { 19779 elements: { 19780 type: "invalid", 19781 message: (0, import_i18n46.__)("Could not validate elements.") 19782 } 19783 }, 19784 [...path, formField.id] 19785 ); 19786 return newFormValidity; 19787 }); 19788 return; 19789 } 19790 if (formField.field?.isValid.elements && !formField.field.isValid.elements.validate(item, { 19791 ...formField.field, 19792 elements: result 19793 })) { 19794 setFormValidity((prev) => { 19795 const newFormValidity = setValidityAtPath( 19796 prev, 19797 { 19798 elements: { 19799 type: "invalid", 19800 message: (0, import_i18n46.__)( 19801 "Value must be one of the elements." 19802 ) 19803 } 19804 }, 19805 [...path, formField.id] 19806 ); 19807 return newFormValidity; 19808 }); 19809 } else { 19810 setFormValidity((prev) => { 19811 return removeValidationProperty( 19812 prev, 19813 [...path, formField.id], 19814 "elements" 19815 ); 19816 }); 19817 } 19818 }).catch((error2) => { 19819 if (currentToken !== elementsCounterRef.current[formField.id]) { 19820 return; 19821 } 19822 let errorMessage; 19823 if (error2 instanceof Error) { 19824 errorMessage = error2.message; 19825 } else { 19826 errorMessage = String(error2) || (0, import_i18n46.__)( 19827 "Unknown error when running elements validation asynchronously." 19828 ); 19829 } 19830 setFormValidity((prev) => { 19831 const newFormValidity = setValidityAtPath( 19832 prev, 19833 { 19834 elements: { 19835 type: "invalid", 19836 message: errorMessage 19837 } 19838 }, 19839 [...path, formField.id] 19840 ); 19841 return newFormValidity; 19842 }); 19843 }); 19844 } 19845 function handleCustomValidationAsync(promise, formField, promiseHandler) { 19846 const { customCounterRef, setFormValidity, path } = promiseHandler; 19847 const currentToken = (customCounterRef.current[formField.id] || 0) + 1; 19848 customCounterRef.current[formField.id] = currentToken; 19849 promise.then((result) => { 19850 if (currentToken !== customCounterRef.current[formField.id]) { 19851 return; 19852 } 19853 if (result === null) { 19854 setFormValidity((prev) => { 19855 return removeValidationProperty( 19856 prev, 19857 [...path, formField.id], 19858 "custom" 19859 ); 19860 }); 19861 return; 19862 } 19863 if (typeof result === "string") { 19864 setFormValidity((prev) => { 19865 const newFormValidity = setValidityAtPath( 19866 prev, 19867 { 19868 custom: { 19869 type: "invalid", 19870 message: result 19871 } 19872 }, 19873 [...path, formField.id] 19874 ); 19875 return newFormValidity; 19876 }); 19877 return; 19878 } 19879 setFormValidity((prev) => { 19880 const newFormValidity = setValidityAtPath( 19881 prev, 19882 { 19883 custom: { 19884 type: "invalid", 19885 message: (0, import_i18n46.__)("Validation could not be processed.") 19886 } 19887 }, 19888 [...path, formField.id] 19889 ); 19890 return newFormValidity; 19891 }); 19892 }).catch((error2) => { 19893 if (currentToken !== customCounterRef.current[formField.id]) { 19894 return; 19895 } 19896 let errorMessage; 19897 if (error2 instanceof Error) { 19898 errorMessage = error2.message; 19899 } else { 19900 errorMessage = String(error2) || (0, import_i18n46.__)( 19901 "Unknown error when running custom validation asynchronously." 19902 ); 19903 } 19904 setFormValidity((prev) => { 19905 const newFormValidity = setValidityAtPath( 19906 prev, 19907 { 19908 custom: { 19909 type: "invalid", 19910 message: errorMessage 19911 } 19912 }, 19913 [...path, formField.id] 19914 ); 19915 return newFormValidity; 19916 }); 19917 }); 19918 } 19919 function validateFormField(item, formField, promiseHandler) { 19920 if (formField.field?.isValid.required && !formField.field.isValid.required.validate(item, formField.field)) { 19921 return { 19922 required: { type: "invalid" } 19923 }; 19924 } 19925 if (formField.field?.isValid.pattern && !formField.field.isValid.pattern.validate(item, formField.field)) { 19926 return { 19927 pattern: { 19928 type: "invalid", 19929 message: (0, import_i18n46.__)("Value does not match the required pattern.") 19930 } 19931 }; 19932 } 19933 if (formField.field?.isValid.min && !formField.field.isValid.min.validate(item, formField.field)) { 19934 return { 19935 min: { 19936 type: "invalid", 19937 message: (0, import_i18n46.__)("Value is below the minimum.") 19938 } 19939 }; 19940 } 19941 if (formField.field?.isValid.max && !formField.field.isValid.max.validate(item, formField.field)) { 19942 return { 19943 max: { 19944 type: "invalid", 19945 message: (0, import_i18n46.__)("Value is above the maximum.") 19946 } 19947 }; 19948 } 19949 if (formField.field?.isValid.minLength && !formField.field.isValid.minLength.validate(item, formField.field)) { 19950 return { 19951 minLength: { 19952 type: "invalid", 19953 message: (0, import_i18n46.__)("Value is too short.") 19954 } 19955 }; 19956 } 19957 if (formField.field?.isValid.maxLength && !formField.field.isValid.maxLength.validate(item, formField.field)) { 19958 return { 19959 maxLength: { 19960 type: "invalid", 19961 message: (0, import_i18n46.__)("Value is too long.") 19962 } 19963 }; 19964 } 19965 if (formField.field?.isValid.elements && formField.field.hasElements && !formField.field.getElements && Array.isArray(formField.field.elements) && !formField.field.isValid.elements.validate(item, formField.field)) { 19966 return { 19967 elements: { 19968 type: "invalid", 19969 message: (0, import_i18n46.__)("Value must be one of the elements.") 19970 } 19971 }; 19972 } 19973 let customError; 19974 if (!!formField.field && formField.field.isValid.custom) { 19975 try { 19976 const value = formField.field.getValue({ item }); 19977 customError = formField.field.isValid.custom( 19978 (0, import_deepmerge.default)( 19979 item, 19980 formField.field.setValue({ 19981 item, 19982 value 19983 }) 19984 ), 19985 formField.field 19986 ); 19987 } catch (error2) { 19988 let errorMessage; 19989 if (error2 instanceof Error) { 19990 errorMessage = error2.message; 19991 } else { 19992 errorMessage = String(error2) || (0, import_i18n46.__)("Unknown error when running custom validation."); 19993 } 19994 return { 19995 custom: { 19996 type: "invalid", 19997 message: errorMessage 19998 } 19999 }; 20000 } 20001 } 20002 if (typeof customError === "string") { 20003 return { 20004 custom: { 20005 type: "invalid", 20006 message: customError 20007 } 20008 }; 20009 } 20010 const fieldValidity = {}; 20011 if (!!formField.field && formField.field.isValid.elements && formField.field.hasElements && typeof formField.field.getElements === "function") { 20012 handleElementsValidationAsync( 20013 formField.field.getElements(), 20014 formField, 20015 promiseHandler 20016 ); 20017 fieldValidity.elements = { 20018 type: "validating", 20019 message: (0, import_i18n46.__)("Validating\u2026") 20020 }; 20021 } 20022 if (customError instanceof Promise) { 20023 handleCustomValidationAsync(customError, formField, promiseHandler); 20024 fieldValidity.custom = { 20025 type: "validating", 20026 message: (0, import_i18n46.__)("Validating\u2026") 20027 }; 20028 } 20029 if (Object.keys(fieldValidity).length > 0) { 20030 return fieldValidity; 20031 } 20032 if (formField.children.length > 0) { 20033 const result = {}; 20034 formField.children.forEach((child) => { 20035 result[child.id] = validateFormField(item, child, { 20036 ...promiseHandler, 20037 path: [...promiseHandler.path, formField.id, "children"] 20038 }); 20039 }); 20040 const filteredResult = {}; 20041 Object.entries(result).forEach(([key, value]) => { 20042 if (value !== void 0) { 20043 filteredResult[key] = value; 20044 } 20045 }); 20046 if (Object.keys(filteredResult).length === 0) { 20047 return void 0; 20048 } 20049 return { 20050 children: filteredResult 20051 }; 20052 } 20053 return void 0; 20054 } 20055 function getFormFieldValue(formField, item) { 20056 const fieldValue = formField?.field?.getValue({ item }); 20057 if (formField.children.length === 0) { 20058 return fieldValue; 20059 } 20060 const childrenValues = formField.children.map( 20061 (child) => getFormFieldValue(child, item) 20062 ); 20063 if (!childrenValues) { 20064 return fieldValue; 20065 } 20066 return { 20067 value: fieldValue, 20068 children: childrenValues 20069 }; 20070 } 20071 function useFormValidity(item, fields2, form) { 20072 const [formValidity, setFormValidity] = (0, import_element78.useState)(); 20073 const customCounterRef = (0, import_element78.useRef)({}); 20074 const elementsCounterRef = (0, import_element78.useRef)({}); 20075 const previousValuesRef = (0, import_element78.useRef)({}); 20076 const validate = (0, import_element78.useCallback)(() => { 20077 const promiseHandler = { 20078 customCounterRef, 20079 elementsCounterRef, 20080 setFormValidity, 20081 path: [], 20082 item 20083 }; 20084 const formFieldsToValidate = getFormFieldsToValidate(form, fields2); 20085 if (formFieldsToValidate.length === 0) { 20086 setFormValidity(void 0); 20087 return; 20088 } 20089 const newFormValidity = {}; 20090 const untouchedFields = []; 20091 formFieldsToValidate.forEach((formField) => { 20092 const value = getFormFieldValue(formField, item); 20093 if (previousValuesRef.current.hasOwnProperty(formField.id) && (0, import_es62.default)( 20094 previousValuesRef.current[formField.id], 20095 value 20096 )) { 20097 untouchedFields.push(formField.id); 20098 return; 20099 } 20100 previousValuesRef.current[formField.id] = value; 20101 const fieldValidity = validateFormField( 20102 item, 20103 formField, 20104 promiseHandler 20105 ); 20106 if (fieldValidity !== void 0) { 20107 newFormValidity[formField.id] = fieldValidity; 20108 } 20109 }); 20110 setFormValidity((existingFormValidity) => { 20111 let validity = { 20112 ...existingFormValidity, 20113 ...newFormValidity 20114 }; 20115 const fieldsToKeep = [ 20116 ...untouchedFields, 20117 ...Object.keys(newFormValidity) 20118 ]; 20119 Object.keys(validity).forEach((key) => { 20120 if (validity && !fieldsToKeep.includes(key)) { 20121 delete validity[key]; 20122 } 20123 }); 20124 if (Object.keys(validity).length === 0) { 20125 validity = void 0; 20126 } 20127 const areEqual = (0, import_es62.default)(existingFormValidity, validity); 20128 if (areEqual) { 20129 return existingFormValidity; 20130 } 20131 return validity; 20132 }); 20133 }, [item, fields2, form]); 20134 (0, import_element78.useEffect)(() => { 20135 validate(); 20136 }, [validate]); 20137 return { 20138 validity: formValidity, 20139 isValid: isFormValid(formValidity) 20140 }; 20141 } 20142 var use_form_validity_default = useFormValidity; 20143 20144 // packages/dataviews/build-module/hooks/use-report-validity.mjs 20145 var import_element79 = __toESM(require_element(), 1); 20146 function useReportValidity(ref, shouldReport) { 20147 (0, import_element79.useEffect)(() => { 20148 if (shouldReport && ref.current) { 20149 const inputs = ref.current.querySelectorAll( 20150 "input, textarea, select" 20151 ); 20152 inputs.forEach((input) => { 20153 input.reportValidity(); 20154 }); 20155 } 20156 }, [shouldReport, ref]); 20157 } 20158 20159 // packages/dataviews/build-module/components/dataform-layouts/panel/utils/use-field-from-form-field.mjs 20160 var import_element80 = __toESM(require_element(), 1); 20161 20162 // packages/dataviews/build-module/components/dataform-layouts/get-summary-fields.mjs 20163 function extractSummaryIds(summary) { 20164 if (Array.isArray(summary)) { 20165 return summary.map( 20166 (item) => typeof item === "string" ? item : item.id 20167 ); 20168 } 20169 return []; 20170 } 20171 var getSummaryFields = (summaryField, fields2) => { 20172 if (Array.isArray(summaryField) && summaryField.length > 0) { 20173 const summaryIds = extractSummaryIds(summaryField); 20174 return summaryIds.map( 20175 (summaryId) => fields2.find((_field) => _field.id === summaryId) 20176 ).filter((_field) => _field !== void 0); 20177 } 20178 return []; 20179 }; 20180 20181 // packages/dataviews/build-module/components/dataform-layouts/panel/utils/use-field-from-form-field.mjs 20182 var getFieldDefinition = (field, fields2) => { 20183 const fieldDefinition = fields2.find((_field) => _field.id === field.id); 20184 if (!fieldDefinition) { 20185 return fields2.find((_field) => { 20186 if (!!field.children) { 20187 const simpleChildren = field.children.filter( 20188 (child) => !child.children 20189 ); 20190 if (simpleChildren.length === 0) { 20191 return false; 20192 } 20193 return _field.id === simpleChildren[0].id; 20194 } 20195 return _field.id === field.id; 20196 }); 20197 } 20198 return fieldDefinition; 20199 }; 20200 function useFieldFromFormField(field) { 20201 const { fields: fields2 } = (0, import_element80.useContext)(dataform_context_default); 20202 const layout = field.layout; 20203 const summaryFields = getSummaryFields(layout.summary, fields2); 20204 const fieldDefinition = getFieldDefinition(field, fields2); 20205 const fieldLabel = !!field.children ? field.label : fieldDefinition?.label; 20206 if (summaryFields.length === 0) { 20207 return { 20208 summaryFields: fieldDefinition ? [fieldDefinition] : [], 20209 fieldDefinition, 20210 fieldLabel 20211 }; 20212 } 20213 return { 20214 summaryFields, 20215 fieldDefinition, 20216 fieldLabel 20217 }; 20218 } 20219 var use_field_from_form_field_default = useFieldFromFormField; 20220 20221 // packages/dataviews/build-module/components/dataform-layouts/panel/modal.mjs 20222 var import_jsx_runtime117 = __toESM(require_jsx_runtime(), 1); 20223 function ModalContent({ 20224 data, 20225 field, 20226 onChange, 20227 fieldLabel, 20228 onClose, 20229 touched 20230 }) { 20231 const { openAs } = field.layout; 20232 const { applyLabel, cancelLabel } = openAs; 20233 const { fields: fields2 } = (0, import_element81.useContext)(dataform_context_default); 20234 const [changes, setChanges] = (0, import_element81.useState)({}); 20235 const modalData = (0, import_element81.useMemo)(() => { 20236 return (0, import_deepmerge2.default)(data, changes, { 20237 arrayMerge: (target, source) => source 20238 }); 20239 }, [data, changes]); 20240 const form = (0, import_element81.useMemo)( 20241 () => ({ 20242 layout: DEFAULT_LAYOUT, 20243 fields: !!field.children ? field.children : ( 20244 // If not explicit children return the field id itself. 20245 [{ id: field.id, layout: DEFAULT_LAYOUT }] 20246 ) 20247 }), 20248 [field] 20249 ); 20250 const fieldsAsFieldType = fields2.map((f2) => ({ 20251 ...f2, 20252 Edit: f2.Edit === null ? void 0 : f2.Edit, 20253 isValid: { 20254 required: f2.isValid.required?.constraint, 20255 elements: f2.isValid.elements?.constraint, 20256 min: f2.isValid.min?.constraint, 20257 max: f2.isValid.max?.constraint, 20258 pattern: f2.isValid.pattern?.constraint, 20259 minLength: f2.isValid.minLength?.constraint, 20260 maxLength: f2.isValid.maxLength?.constraint 20261 } 20262 })); 20263 const { validity } = use_form_validity_default(modalData, fieldsAsFieldType, form); 20264 const onApply = () => { 20265 onChange(changes); 20266 onClose(); 20267 }; 20268 const handleOnChange = (newValue) => { 20269 setChanges( 20270 (prev) => (0, import_deepmerge2.default)(prev, newValue, { 20271 arrayMerge: (target, source) => source 20272 }) 20273 ); 20274 }; 20275 const focusOnMountRef = (0, import_compose14.useFocusOnMount)("firstInputElement"); 20276 const contentRef = (0, import_element81.useRef)(null); 20277 const mergedRef = (0, import_compose14.useMergeRefs)([focusOnMountRef, contentRef]); 20278 useReportValidity(contentRef, touched); 20279 return /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)( 20280 import_components51.Modal, 20281 { 20282 className: "dataforms-layouts-panel__modal", 20283 onRequestClose: onClose, 20284 isFullScreen: false, 20285 title: fieldLabel, 20286 size: "medium", 20287 children: [ 20288 /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("div", { ref: mergedRef, children: /* @__PURE__ */ (0, import_jsx_runtime117.jsx)( 20289 DataFormLayout, 20290 { 20291 data: modalData, 20292 form, 20293 onChange: handleOnChange, 20294 validity, 20295 children: (FieldLayout, childField, childFieldValidity, markWhenOptional) => /* @__PURE__ */ (0, import_jsx_runtime117.jsx)( 20296 FieldLayout, 20297 { 20298 data: modalData, 20299 field: childField, 20300 onChange: handleOnChange, 20301 hideLabelFromVision: form.fields.length < 2, 20302 markWhenOptional, 20303 validity: childFieldValidity 20304 }, 20305 childField.id 20306 ) 20307 } 20308 ) }), 20309 /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)( 20310 Stack, 20311 { 20312 direction: "row", 20313 className: "dataforms-layouts-panel__modal-footer", 20314 gap: "md", 20315 children: [ 20316 /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(import_components51.__experimentalSpacer, { style: { flex: 1 } }), 20317 /* @__PURE__ */ (0, import_jsx_runtime117.jsx)( 20318 import_components51.Button, 20319 { 20320 variant: "tertiary", 20321 onClick: onClose, 20322 __next40pxDefaultSize: true, 20323 children: cancelLabel 20324 } 20325 ), 20326 /* @__PURE__ */ (0, import_jsx_runtime117.jsx)( 20327 import_components51.Button, 20328 { 20329 variant: "primary", 20330 onClick: onApply, 20331 __next40pxDefaultSize: true, 20332 children: applyLabel 20333 } 20334 ) 20335 ] 20336 } 20337 ) 20338 ] 20339 } 20340 ); 20341 } 20342 function PanelModal({ 20343 data, 20344 field, 20345 onChange, 20346 validity 20347 }) { 20348 const [touched, setTouched] = (0, import_element81.useState)(false); 20349 const [isOpen, setIsOpen] = (0, import_element81.useState)(false); 20350 const { fieldDefinition, fieldLabel, summaryFields } = use_field_from_form_field_default(field); 20351 if (!fieldDefinition) { 20352 return null; 20353 } 20354 const handleClose = () => { 20355 setIsOpen(false); 20356 setTouched(true); 20357 }; 20358 return /* @__PURE__ */ (0, import_jsx_runtime117.jsxs)(import_jsx_runtime117.Fragment, { children: [ 20359 /* @__PURE__ */ (0, import_jsx_runtime117.jsx)( 20360 SummaryButton, 20361 { 20362 data, 20363 field, 20364 fieldLabel, 20365 summaryFields, 20366 validity, 20367 touched, 20368 disabled: fieldDefinition.readOnly === true, 20369 onClick: () => setIsOpen(true), 20370 "aria-expanded": isOpen 20371 } 20372 ), 20373 isOpen && /* @__PURE__ */ (0, import_jsx_runtime117.jsx)( 20374 ModalContent, 20375 { 20376 data, 20377 field, 20378 onChange, 20379 fieldLabel: fieldLabel ?? "", 20380 onClose: handleClose, 20381 touched 20382 } 20383 ) 20384 ] }); 20385 } 20386 var modal_default = PanelModal; 20387 20388 // packages/dataviews/build-module/components/dataform-layouts/panel/dropdown.mjs 20389 var import_components52 = __toESM(require_components(), 1); 20390 var import_i18n47 = __toESM(require_i18n(), 1); 20391 var import_element82 = __toESM(require_element(), 1); 20392 var import_compose15 = __toESM(require_compose(), 1); 20393 var import_jsx_runtime118 = __toESM(require_jsx_runtime(), 1); 20394 function DropdownHeader({ 20395 title, 20396 onClose 20397 }) { 20398 return /* @__PURE__ */ (0, import_jsx_runtime118.jsx)( 20399 Stack, 20400 { 20401 direction: "column", 20402 className: "dataforms-layouts-panel__dropdown-header", 20403 gap: "lg", 20404 children: /* @__PURE__ */ (0, import_jsx_runtime118.jsxs)(Stack, { direction: "row", gap: "sm", align: "center", children: [ 20405 title && /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(import_components52.__experimentalHeading, { level: 2, size: 13, children: title }), 20406 /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(import_components52.__experimentalSpacer, { style: { flex: 1 } }), 20407 onClose && /* @__PURE__ */ (0, import_jsx_runtime118.jsx)( 20408 import_components52.Button, 20409 { 20410 label: (0, import_i18n47.__)("Close"), 20411 icon: close_small_default, 20412 onClick: onClose, 20413 size: "small" 20414 } 20415 ) 20416 ] }) 20417 } 20418 ); 20419 } 20420 function DropdownContentWithValidation({ 20421 touched, 20422 children 20423 }) { 20424 const ref = (0, import_element82.useRef)(null); 20425 useReportValidity(ref, touched); 20426 return /* @__PURE__ */ (0, import_jsx_runtime118.jsx)("div", { ref, children }); 20427 } 20428 function PanelDropdown({ 20429 data, 20430 field, 20431 onChange, 20432 validity 20433 }) { 20434 const [touched, setTouched] = (0, import_element82.useState)(false); 20435 const [popoverAnchor, setPopoverAnchor] = (0, import_element82.useState)( 20436 null 20437 ); 20438 const popoverProps = (0, import_element82.useMemo)( 20439 () => ({ 20440 // Anchor the popover to the middle of the entire row so that it doesn't 20441 // move around when the label changes. 20442 anchor: popoverAnchor, 20443 placement: "left-start", 20444 offset: 36, 20445 shift: true 20446 }), 20447 [popoverAnchor] 20448 ); 20449 const [dialogRef, dialogProps] = (0, import_compose15.__experimentalUseDialog)({ 20450 focusOnMount: "firstInputElement" 20451 }); 20452 const form = (0, import_element82.useMemo)( 20453 () => ({ 20454 layout: DEFAULT_LAYOUT, 20455 fields: !!field.children ? field.children : ( 20456 // If not explicit children return the field id itself. 20457 [{ id: field.id, layout: DEFAULT_LAYOUT }] 20458 ) 20459 }), 20460 [field] 20461 ); 20462 const formValidity = (0, import_element82.useMemo)(() => { 20463 if (validity === void 0) { 20464 return void 0; 20465 } 20466 if (!!field.children) { 20467 return validity?.children; 20468 } 20469 return { [field.id]: validity }; 20470 }, [validity, field]); 20471 const { fieldDefinition, fieldLabel, summaryFields } = use_field_from_form_field_default(field); 20472 if (!fieldDefinition) { 20473 return null; 20474 } 20475 return /* @__PURE__ */ (0, import_jsx_runtime118.jsx)( 20476 "div", 20477 { 20478 ref: setPopoverAnchor, 20479 className: "dataforms-layouts-panel__field-dropdown-anchor", 20480 children: /* @__PURE__ */ (0, import_jsx_runtime118.jsx)( 20481 import_components52.Dropdown, 20482 { 20483 contentClassName: "dataforms-layouts-panel__field-dropdown", 20484 popoverProps, 20485 focusOnMount: false, 20486 onToggle: (willOpen) => { 20487 if (!willOpen) { 20488 setTouched(true); 20489 } 20490 }, 20491 renderToggle: ({ isOpen, onToggle }) => /* @__PURE__ */ (0, import_jsx_runtime118.jsx)( 20492 SummaryButton, 20493 { 20494 data, 20495 field, 20496 fieldLabel, 20497 summaryFields, 20498 validity, 20499 touched, 20500 disabled: fieldDefinition.readOnly === true, 20501 onClick: onToggle, 20502 "aria-expanded": isOpen 20503 } 20504 ), 20505 renderContent: ({ onClose }) => /* @__PURE__ */ (0, import_jsx_runtime118.jsx)(DropdownContentWithValidation, { touched, children: /* @__PURE__ */ (0, import_jsx_runtime118.jsxs)("div", { ref: dialogRef, ...dialogProps, children: [ 20506 /* @__PURE__ */ (0, import_jsx_runtime118.jsx)( 20507 DropdownHeader, 20508 { 20509 title: fieldLabel, 20510 onClose 20511 } 20512 ), 20513 /* @__PURE__ */ (0, import_jsx_runtime118.jsx)( 20514 DataFormLayout, 20515 { 20516 data, 20517 form, 20518 onChange, 20519 validity: formValidity, 20520 children: (FieldLayout, childField, childFieldValidity, markWhenOptional) => /* @__PURE__ */ (0, import_jsx_runtime118.jsx)( 20521 FieldLayout, 20522 { 20523 data, 20524 field: childField, 20525 onChange, 20526 hideLabelFromVision: (form?.fields ?? []).length < 2, 20527 markWhenOptional, 20528 validity: childFieldValidity 20529 }, 20530 childField.id 20531 ) 20532 } 20533 ) 20534 ] }) }) 20535 } 20536 ) 20537 } 20538 ); 20539 } 20540 var dropdown_default = PanelDropdown; 20541 20542 // packages/dataviews/build-module/components/dataform-layouts/panel/index.mjs 20543 var import_jsx_runtime119 = __toESM(require_jsx_runtime(), 1); 20544 function FormPanelField({ 20545 data, 20546 field, 20547 onChange, 20548 validity 20549 }) { 20550 const layout = field.layout; 20551 if (layout.openAs.type === "modal") { 20552 return /* @__PURE__ */ (0, import_jsx_runtime119.jsx)( 20553 modal_default, 20554 { 20555 data, 20556 field, 20557 onChange, 20558 validity 20559 } 20560 ); 20561 } 20562 return /* @__PURE__ */ (0, import_jsx_runtime119.jsx)( 20563 dropdown_default, 20564 { 20565 data, 20566 field, 20567 onChange, 20568 validity 20569 } 20570 ); 20571 } 20572 20573 // packages/dataviews/build-module/components/dataform-layouts/card/index.mjs 20574 var import_element83 = __toESM(require_element(), 1); 20575 20576 // packages/dataviews/build-module/components/dataform-layouts/validation-badge.mjs 20577 var import_i18n48 = __toESM(require_i18n(), 1); 20578 var import_jsx_runtime120 = __toESM(require_jsx_runtime(), 1); 20579 function countInvalidFields(validity) { 20580 if (!validity) { 20581 return 0; 20582 } 20583 let count = 0; 20584 const validityRules = Object.keys(validity).filter( 20585 (key) => key !== "children" 20586 ); 20587 for (const key of validityRules) { 20588 const rule = validity[key]; 20589 if (rule?.type === "invalid") { 20590 count++; 20591 } 20592 } 20593 if (validity.children) { 20594 for (const childValidity of Object.values(validity.children)) { 20595 count += countInvalidFields(childValidity); 20596 } 20597 } 20598 return count; 20599 } 20600 function ValidationBadge({ 20601 validity 20602 }) { 20603 const invalidCount = countInvalidFields(validity); 20604 if (invalidCount === 0) { 20605 return null; 20606 } 20607 return /* @__PURE__ */ (0, import_jsx_runtime120.jsx)(Badge, { intent: "high", children: (0, import_i18n48.sprintf)( 20608 /* translators: %d: Number of fields that need attention */ 20609 (0, import_i18n48._n)( 20610 "%d field needs attention", 20611 "%d fields need attention", 20612 invalidCount 20613 ), 20614 invalidCount 20615 ) }); 20616 } 20617 20618 // packages/dataviews/build-module/components/dataform-layouts/card/index.mjs 20619 var import_jsx_runtime121 = __toESM(require_jsx_runtime(), 1); 20620 function isSummaryFieldVisible(summaryField, summaryConfig, isOpen) { 20621 if (!summaryConfig || Array.isArray(summaryConfig) && summaryConfig.length === 0) { 20622 return false; 20623 } 20624 const summaryConfigArray = Array.isArray(summaryConfig) ? summaryConfig : [summaryConfig]; 20625 const fieldConfig = summaryConfigArray.find((config) => { 20626 if (typeof config === "string") { 20627 return config === summaryField.id; 20628 } 20629 if (typeof config === "object" && "id" in config) { 20630 return config.id === summaryField.id; 20631 } 20632 return false; 20633 }); 20634 if (!fieldConfig) { 20635 return false; 20636 } 20637 if (typeof fieldConfig === "string") { 20638 return true; 20639 } 20640 if (typeof fieldConfig === "object" && "visibility" in fieldConfig) { 20641 return fieldConfig.visibility === "always" || fieldConfig.visibility === "when-collapsed" && !isOpen; 20642 } 20643 return true; 20644 } 20645 function HeaderContent({ 20646 data, 20647 fields: fields2, 20648 label, 20649 layout, 20650 isOpen, 20651 touched, 20652 validity 20653 }) { 20654 const summaryFields = getSummaryFields(layout.summary, fields2); 20655 const visibleSummaryFields = summaryFields.filter( 20656 (summaryField) => isSummaryFieldVisible(summaryField, layout.summary, isOpen) 20657 ); 20658 const hasBadge = touched && layout.isCollapsible; 20659 const hasSummary = visibleSummaryFields.length > 0 && layout.withHeader; 20660 return /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)( 20661 Stack, 20662 { 20663 align: "center", 20664 justify: "space-between", 20665 className: "dataforms-layouts-card__field-header-content", 20666 children: [ 20667 /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(card_exports.Title, { children: label }), 20668 (hasBadge || hasSummary) && /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)(collapsible_card_exports.HeaderDescription, { className: "dataforms-layouts-card__field-header-content-description", children: [ 20669 hasBadge && /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(ValidationBadge, { validity }), 20670 hasSummary && /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("div", { className: "dataforms-layouts-card__field-summary", children: visibleSummaryFields.map((summaryField) => /* @__PURE__ */ (0, import_jsx_runtime121.jsx)( 20671 summaryField.render, 20672 { 20673 item: data, 20674 field: summaryField 20675 }, 20676 summaryField.id 20677 )) }) 20678 ] }) 20679 ] 20680 } 20681 ); 20682 } 20683 function BodyContent({ 20684 data, 20685 field, 20686 form, 20687 onChange, 20688 hideLabelFromVision, 20689 markWhenOptional, 20690 validity, 20691 withHeader 20692 }) { 20693 if (field.children) { 20694 return /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)(import_jsx_runtime121.Fragment, { children: [ 20695 field.description && /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("div", { className: "dataforms-layouts-card__field-description", children: field.description }), 20696 /* @__PURE__ */ (0, import_jsx_runtime121.jsx)( 20697 DataFormLayout, 20698 { 20699 data, 20700 form, 20701 onChange, 20702 validity: validity?.children 20703 } 20704 ) 20705 ] }); 20706 } 20707 const SingleFieldLayout = getFormFieldLayout("regular")?.component; 20708 if (!SingleFieldLayout) { 20709 return null; 20710 } 20711 return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)( 20712 SingleFieldLayout, 20713 { 20714 data, 20715 field, 20716 onChange, 20717 hideLabelFromVision: hideLabelFromVision || withHeader, 20718 markWhenOptional, 20719 validity 20720 } 20721 ); 20722 } 20723 function FormCardField({ 20724 data, 20725 field, 20726 onChange, 20727 hideLabelFromVision, 20728 markWhenOptional, 20729 validity 20730 }) { 20731 const { fields: fields2 } = (0, import_element83.useContext)(dataform_context_default); 20732 const layout = field.layout; 20733 const contentRef = (0, import_element83.useRef)(null); 20734 const form = (0, import_element83.useMemo)( 20735 () => ({ 20736 layout: DEFAULT_LAYOUT, 20737 fields: field.children ?? [] 20738 }), 20739 [field] 20740 ); 20741 const { isOpened, isCollapsible } = layout; 20742 const [isOpen, setIsOpen] = (0, import_element83.useState)(isOpened); 20743 const [touched, setTouched] = (0, import_element83.useState)(false); 20744 (0, import_element83.useEffect)(() => { 20745 setIsOpen(isOpened); 20746 }, [isOpened]); 20747 const handleOpenChange = (0, import_element83.useCallback)((open) => { 20748 if (!open) { 20749 setTouched(true); 20750 } 20751 setIsOpen(open); 20752 }, []); 20753 const handleBlur = (0, import_element83.useCallback)(() => { 20754 setTouched(true); 20755 }, []); 20756 useReportValidity( 20757 contentRef, 20758 (isCollapsible ? isOpen : true) && touched 20759 ); 20760 let label = field.label; 20761 let withHeader; 20762 if (field.children) { 20763 withHeader = !!label && layout.withHeader; 20764 } else { 20765 const fieldDefinition = fields2.find( 20766 (fieldDef) => fieldDef.id === field.id 20767 ); 20768 if (!fieldDefinition || !fieldDefinition.Edit) { 20769 return null; 20770 } 20771 label = fieldDefinition.label; 20772 withHeader = !!label && layout.withHeader; 20773 } 20774 const bodyContent = /* @__PURE__ */ (0, import_jsx_runtime121.jsx)( 20775 BodyContent, 20776 { 20777 data, 20778 field, 20779 form, 20780 onChange, 20781 hideLabelFromVision, 20782 markWhenOptional, 20783 validity, 20784 withHeader 20785 } 20786 ); 20787 const headerContent = /* @__PURE__ */ (0, import_jsx_runtime121.jsx)( 20788 HeaderContent, 20789 { 20790 data, 20791 fields: fields2, 20792 label, 20793 layout, 20794 isOpen: isCollapsible ? !!isOpen : true, 20795 touched, 20796 validity 20797 } 20798 ); 20799 if (withHeader && isCollapsible) { 20800 return /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)( 20801 collapsible_card_exports.Root, 20802 { 20803 className: "dataforms-layouts-card__field", 20804 open: isOpen, 20805 onOpenChange: handleOpenChange, 20806 children: [ 20807 /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(collapsible_card_exports.Header, { children: headerContent }), 20808 /* @__PURE__ */ (0, import_jsx_runtime121.jsx)( 20809 collapsible_card_exports.Content, 20810 { 20811 ref: contentRef, 20812 onBlur: handleBlur, 20813 children: bodyContent 20814 } 20815 ) 20816 ] 20817 } 20818 ); 20819 } 20820 return /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)(card_exports.Root, { className: "dataforms-layouts-card__field", children: [ 20821 withHeader && /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(card_exports.Header, { children: headerContent }), 20822 /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(card_exports.Content, { ref: contentRef, onBlur: handleBlur, children: bodyContent }) 20823 ] }); 20824 } 20825 20826 // packages/dataviews/build-module/components/dataform-layouts/row/index.mjs 20827 var import_components53 = __toESM(require_components(), 1); 20828 var import_jsx_runtime122 = __toESM(require_jsx_runtime(), 1); 20829 function Header5({ title }) { 20830 return /* @__PURE__ */ (0, import_jsx_runtime122.jsx)( 20831 Stack, 20832 { 20833 direction: "column", 20834 className: "dataforms-layouts-row__header", 20835 gap: "lg", 20836 children: /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(Stack, { direction: "row", align: "center", children: /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(import_components53.__experimentalHeading, { level: 2, size: 13, children: title }) }) 20837 } 20838 ); 20839 } 20840 var EMPTY_WRAPPER = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(import_jsx_runtime122.Fragment, { children }); 20841 function FormRowField({ 20842 data, 20843 field, 20844 onChange, 20845 hideLabelFromVision, 20846 markWhenOptional, 20847 validity 20848 }) { 20849 const layout = field.layout; 20850 if (!!field.children) { 20851 const form = { 20852 layout: DEFAULT_LAYOUT, 20853 fields: field.children 20854 }; 20855 return /* @__PURE__ */ (0, import_jsx_runtime122.jsxs)("div", { className: "dataforms-layouts-row__field", children: [ 20856 !hideLabelFromVision && field.label && /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(Header5, { title: field.label }), 20857 /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(Stack, { direction: "row", align: layout.alignment, gap: "lg", children: /* @__PURE__ */ (0, import_jsx_runtime122.jsx)( 20858 DataFormLayout, 20859 { 20860 data, 20861 form, 20862 onChange, 20863 validity: validity?.children, 20864 as: EMPTY_WRAPPER, 20865 children: (FieldLayout, childField, childFieldValidity) => /* @__PURE__ */ (0, import_jsx_runtime122.jsx)( 20866 "div", 20867 { 20868 className: "dataforms-layouts-row__field-control", 20869 style: layout.styles[childField.id], 20870 children: /* @__PURE__ */ (0, import_jsx_runtime122.jsx)( 20871 FieldLayout, 20872 { 20873 data, 20874 field: childField, 20875 onChange, 20876 hideLabelFromVision, 20877 markWhenOptional, 20878 validity: childFieldValidity 20879 } 20880 ) 20881 }, 20882 childField.id 20883 ) 20884 } 20885 ) }) 20886 ] }); 20887 } 20888 const RegularLayout = getFormFieldLayout("regular")?.component; 20889 if (!RegularLayout) { 20890 return null; 20891 } 20892 return /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(import_jsx_runtime122.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime122.jsx)("div", { className: "dataforms-layouts-row__field-control", children: /* @__PURE__ */ (0, import_jsx_runtime122.jsx)( 20893 RegularLayout, 20894 { 20895 data, 20896 field, 20897 onChange, 20898 markWhenOptional, 20899 validity 20900 } 20901 ) }) }); 20902 } 20903 20904 // packages/dataviews/build-module/components/dataform-layouts/details/index.mjs 20905 var import_element84 = __toESM(require_element(), 1); 20906 var import_i18n49 = __toESM(require_i18n(), 1); 20907 var import_jsx_runtime123 = __toESM(require_jsx_runtime(), 1); 20908 function FormDetailsField({ 20909 data, 20910 field, 20911 onChange, 20912 validity 20913 }) { 20914 const { fields: fields2 } = (0, import_element84.useContext)(dataform_context_default); 20915 const detailsRef = (0, import_element84.useRef)(null); 20916 const contentRef = (0, import_element84.useRef)(null); 20917 const [touched, setTouched] = (0, import_element84.useState)(false); 20918 const [isOpen, setIsOpen] = (0, import_element84.useState)(false); 20919 const form = (0, import_element84.useMemo)( 20920 () => ({ 20921 layout: DEFAULT_LAYOUT, 20922 fields: field.children ?? [] 20923 }), 20924 [field] 20925 ); 20926 (0, import_element84.useEffect)(() => { 20927 const details = detailsRef.current; 20928 if (!details) { 20929 return; 20930 } 20931 const handleToggle = () => { 20932 const nowOpen = details.open; 20933 if (!nowOpen) { 20934 setTouched(true); 20935 } 20936 setIsOpen(nowOpen); 20937 }; 20938 details.addEventListener("toggle", handleToggle); 20939 return () => { 20940 details.removeEventListener("toggle", handleToggle); 20941 }; 20942 }, []); 20943 useReportValidity(contentRef, isOpen && touched); 20944 const handleBlur = (0, import_element84.useCallback)(() => { 20945 setTouched(true); 20946 }, []); 20947 if (!field.children) { 20948 return null; 20949 } 20950 const summaryFieldId = field.layout.summary ?? ""; 20951 const summaryField = summaryFieldId ? fields2.find((fieldDef) => fieldDef.id === summaryFieldId) : void 0; 20952 let summaryContent; 20953 if (summaryField && summaryField.render) { 20954 summaryContent = /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(summaryField.render, { item: data, field: summaryField }); 20955 } else { 20956 summaryContent = field.label || (0, import_i18n49.__)("More details"); 20957 } 20958 return /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)( 20959 "details", 20960 { 20961 ref: detailsRef, 20962 className: "dataforms-layouts-details__details", 20963 children: [ 20964 /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("summary", { className: "dataforms-layouts-details__summary", children: /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)( 20965 Stack, 20966 { 20967 direction: "row", 20968 align: "center", 20969 gap: "md", 20970 className: "dataforms-layouts-details__summary-content", 20971 children: [ 20972 summaryContent, 20973 touched && /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(ValidationBadge, { validity }) 20974 ] 20975 } 20976 ) }), 20977 /* @__PURE__ */ (0, import_jsx_runtime123.jsx)( 20978 "div", 20979 { 20980 ref: contentRef, 20981 className: "dataforms-layouts-details__content", 20982 onBlur: handleBlur, 20983 children: /* @__PURE__ */ (0, import_jsx_runtime123.jsx)( 20984 DataFormLayout, 20985 { 20986 data, 20987 form, 20988 onChange, 20989 validity: validity?.children 20990 } 20991 ) 20992 } 20993 ) 20994 ] 20995 } 20996 ); 20997 } 20998 20999 // packages/dataviews/build-module/components/dataform-layouts/index.mjs 21000 var import_jsx_runtime124 = __toESM(require_jsx_runtime(), 1); 21001 var FORM_FIELD_LAYOUTS = [ 21002 { 21003 type: "regular", 21004 component: FormRegularField, 21005 wrapper: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime124.jsx)( 21006 Stack, 21007 { 21008 direction: "column", 21009 className: "dataforms-layouts__wrapper", 21010 gap: "lg", 21011 children 21012 } 21013 ) 21014 }, 21015 { 21016 type: "panel", 21017 component: FormPanelField, 21018 wrapper: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime124.jsx)( 21019 Stack, 21020 { 21021 direction: "column", 21022 className: "dataforms-layouts__wrapper", 21023 gap: "md", 21024 children 21025 } 21026 ) 21027 }, 21028 { 21029 type: "card", 21030 component: FormCardField, 21031 wrapper: ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime124.jsx)( 21032 Stack, 21033 { 21034 direction: "column", 21035 className: "dataforms-layouts__wrapper", 21036 gap: "xl", 21037 children 21038 } 21039 ) 21040 }, 21041 { 21042 type: "row", 21043 component: FormRowField, 21044 wrapper: ({ 21045 children, 21046 layout 21047 }) => /* @__PURE__ */ (0, import_jsx_runtime124.jsx)( 21048 Stack, 21049 { 21050 direction: "column", 21051 className: "dataforms-layouts__wrapper", 21052 gap: "lg", 21053 children: /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("div", { className: "dataforms-layouts-row__field", children: /* @__PURE__ */ (0, import_jsx_runtime124.jsx)( 21054 Stack, 21055 { 21056 direction: "row", 21057 gap: "lg", 21058 align: layout.alignment, 21059 children 21060 } 21061 ) }) 21062 } 21063 ) 21064 }, 21065 { 21066 type: "details", 21067 component: FormDetailsField 21068 } 21069 ]; 21070 function getFormFieldLayout(type) { 21071 return FORM_FIELD_LAYOUTS.find((layout) => layout.type === type); 21072 } 21073 21074 // packages/dataviews/build-module/components/dataform-layouts/data-form-layout.mjs 21075 var import_jsx_runtime125 = __toESM(require_jsx_runtime(), 1); 21076 var DEFAULT_WRAPPER = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(Stack, { direction: "column", className: "dataforms-layouts__wrapper", gap: "lg", children }); 21077 function DataFormLayout({ 21078 data, 21079 form, 21080 onChange, 21081 validity, 21082 children, 21083 as 21084 }) { 21085 const { fields: fieldDefinitions } = (0, import_element85.useContext)(dataform_context_default); 21086 const markWhenOptional = (0, import_element85.useMemo)(() => { 21087 const requiredCount = fieldDefinitions.filter( 21088 (f2) => !!f2.isValid?.required 21089 ).length; 21090 const optionalCount = fieldDefinitions.length - requiredCount; 21091 return requiredCount > optionalCount; 21092 }, [fieldDefinitions]); 21093 function getFieldDefinition2(field) { 21094 return fieldDefinitions.find( 21095 (fieldDefinition) => fieldDefinition.id === field.id 21096 ); 21097 } 21098 const Wrapper = as ?? getFormFieldLayout(form.layout.type)?.wrapper ?? DEFAULT_WRAPPER; 21099 return /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(Wrapper, { layout: form.layout, children: form.fields.map((formField) => { 21100 const FieldLayout = getFormFieldLayout(formField.layout.type)?.component; 21101 if (!FieldLayout) { 21102 return null; 21103 } 21104 const fieldDefinition = !formField.children ? getFieldDefinition2(formField) : void 0; 21105 if (fieldDefinition && fieldDefinition.isVisible && !fieldDefinition.isVisible(data)) { 21106 return null; 21107 } 21108 if (children) { 21109 return children( 21110 FieldLayout, 21111 formField, 21112 validity?.[formField.id], 21113 markWhenOptional 21114 ); 21115 } 21116 return /* @__PURE__ */ (0, import_jsx_runtime125.jsx)( 21117 FieldLayout, 21118 { 21119 data, 21120 field: formField, 21121 onChange, 21122 markWhenOptional, 21123 validity: validity?.[formField.id] 21124 }, 21125 formField.id 21126 ); 21127 }) }); 21128 } 21129 21130 // packages/dataviews/build-module/dataform/index.mjs 21131 var import_jsx_runtime126 = __toESM(require_jsx_runtime(), 1); 21132 function DataForm({ 21133 data, 21134 form, 21135 fields: fields2, 21136 onChange, 21137 validity 21138 }) { 21139 const normalizedForm = (0, import_element86.useMemo)(() => normalize_form_default(form), [form]); 21140 const normalizedFields = (0, import_element86.useMemo)( 21141 () => normalizeFields(fields2), 21142 [fields2] 21143 ); 21144 if (!form.fields) { 21145 return null; 21146 } 21147 return /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(DataFormProvider, { fields: normalizedFields, children: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)( 21148 DataFormLayout, 21149 { 21150 data, 21151 form: normalizedForm, 21152 onChange, 21153 validity 21154 } 21155 ) }); 21156 } 21157 21158 // packages/dataviews/build-module/utils/filter-sort-and-paginate.mjs 21159 var import_remove_accents2 = __toESM(require_remove_accents(), 1); 21160 var import_deprecated = __toESM(require_deprecated(), 1); 21161 function normalizeSearchInput2(input = "") { 21162 return (0, import_remove_accents2.default)(input.trim().toLowerCase()); 21163 } 21164 var EMPTY_ARRAY7 = []; 21165 function filterSortAndPaginate(data, view, fields2) { 21166 if (!data) { 21167 return { 21168 data: EMPTY_ARRAY7, 21169 paginationInfo: { totalItems: 0, totalPages: 0 } 21170 }; 21171 } 21172 const _fields = normalizeFields(fields2); 21173 let filteredData = [...data]; 21174 if (view.search) { 21175 const normalizedSearch = normalizeSearchInput2(view.search); 21176 filteredData = filteredData.filter((item) => { 21177 return _fields.filter((field) => field.enableGlobalSearch).some((field) => { 21178 const fieldValue = field.getValue({ item }); 21179 const values = Array.isArray(fieldValue) ? fieldValue : [fieldValue]; 21180 return values.some( 21181 (value) => normalizeSearchInput2(String(value)).includes( 21182 normalizedSearch 21183 ) 21184 ); 21185 }); 21186 }); 21187 } 21188 if (view.filters && view.filters?.length > 0) { 21189 view.filters.forEach((filter) => { 21190 const field = _fields.find( 21191 (_field) => _field.id === filter.field 21192 ); 21193 if (field) { 21194 if (filter.operator === OPERATOR_IS_NOT_ALL) { 21195 (0, import_deprecated.default)("The 'isNotAll' filter operator", { 21196 since: "7.0", 21197 alternative: "'isNone'" 21198 }); 21199 } 21200 const handler = field.filter[filter.operator]; 21201 if (handler) { 21202 filteredData = filteredData.filter( 21203 (item) => handler(item, field, filter.value) 21204 ); 21205 } 21206 } 21207 }); 21208 } 21209 const sortByField = view.sort?.field ? _fields.find((field) => { 21210 return field.enableSorting !== false && field.id === view.sort?.field; 21211 }) : null; 21212 const groupByField = view.groupBy?.field ? _fields.find((field) => { 21213 return field.enableSorting !== false && field.id === view.groupBy?.field; 21214 }) : null; 21215 if (sortByField || groupByField) { 21216 filteredData.sort((a2, b2) => { 21217 if (groupByField) { 21218 const groupCompare = groupByField.sort( 21219 a2, 21220 b2, 21221 view.groupBy?.direction ?? "asc" 21222 ); 21223 if (groupCompare !== 0) { 21224 return groupCompare; 21225 } 21226 } 21227 if (sortByField) { 21228 return sortByField.sort(a2, b2, view.sort?.direction ?? "desc"); 21229 } 21230 return 0; 21231 }); 21232 } 21233 let totalItems = filteredData.length; 21234 let totalPages = 1; 21235 if (view.infiniteScrollEnabled && view.startPosition !== void 0 && view.perPage !== void 0) { 21236 const start = view.startPosition - 1; 21237 const end = Math.min(start + view.perPage, totalItems); 21238 filteredData = filteredData?.slice(start, end); 21239 } else if (view.page !== void 0 && view.perPage !== void 0) { 21240 const start = (view.page - 1) * view.perPage; 21241 totalItems = filteredData?.length || 0; 21242 totalPages = Math.ceil(totalItems / view.perPage); 21243 filteredData = filteredData?.slice(start, start + view.perPage); 21244 } 21245 return { 21246 data: filteredData, 21247 paginationInfo: { 21248 totalItems, 21249 totalPages 21250 } 21251 }; 21252 } 21253 21254 // routes/content-guidelines/components/guideline-accordion-form.tsx 21255 var import_i18n51 = __toESM(require_i18n()); 21256 var import_element87 = __toESM(require_element()); 21257 var import_data8 = __toESM(require_data()); 21258 var import_notices2 = __toESM(require_notices()); 21259 21260 // routes/content-guidelines/store.ts 21261 var import_data6 = __toESM(require_data()); 21262 var STORE_NAME = "core/content-guidelines"; 21263 var DEFAULT_STATE = { 21264 id: null, 21265 status: null, 21266 categories: { 21267 site: "", 21268 copy: "", 21269 images: "", 21270 additional: "", 21271 blocks: {} 21272 } 21273 }; 21274 var CATEGORIES = ["site", "copy", "images", "additional", "blocks"]; 21275 var actions = { 21276 setFromResponse(response) { 21277 return { 21278 type: "SET_FROM_RESPONSE", 21279 response 21280 }; 21281 }, 21282 setGuideline(category, value) { 21283 return { 21284 type: "SET_GUIDELINE", 21285 category, 21286 value 21287 }; 21288 }, 21289 setBlockGuideline(blockName, value) { 21290 return { 21291 type: "SET_BLOCK_GUIDELINE", 21292 blockName, 21293 value 21294 }; 21295 } 21296 }; 21297 function parseResponse(response) { 21298 if (!response || typeof response !== "object") { 21299 return {}; 21300 } 21301 const categoriesFromResponse = response.guideline_categories ?? {}; 21302 const result = { 21303 id: response.id ?? null, 21304 status: response.status ?? null, 21305 categories: { 21306 site: "", 21307 copy: "", 21308 images: "", 21309 additional: "", 21310 blocks: {} 21311 } 21312 }; 21313 CATEGORIES.forEach((category) => { 21314 const guidelines = categoriesFromResponse?.[category]?.guidelines; 21315 if (typeof guidelines === "string") { 21316 result.categories[category] = guidelines; 21317 } else if (category === "blocks") { 21318 const blocks = categoriesFromResponse?.blocks ?? {}; 21319 for (const [blockName, blockData] of Object.entries(blocks)) { 21320 result.categories.blocks[blockName] = blockData?.guidelines; 21321 } 21322 } 21323 }); 21324 return result; 21325 } 21326 function reducer(state = DEFAULT_STATE, action) { 21327 switch (action.type) { 21328 case "SET_FROM_RESPONSE": 21329 return { 21330 ...state, 21331 ...parseResponse(action.response) 21332 }; 21333 case "SET_GUIDELINE": 21334 return { 21335 ...state, 21336 categories: { 21337 ...state.categories, 21338 [action.category]: action.value 21339 } 21340 }; 21341 case "SET_BLOCK_GUIDELINE": { 21342 const blocks = { 21343 ...state.categories.blocks, 21344 [action.blockName]: action.value 21345 }; 21346 if (action.value === void 0) { 21347 delete blocks[action.blockName]; 21348 } 21349 return { 21350 ...state, 21351 categories: { 21352 ...state.categories, 21353 blocks 21354 } 21355 }; 21356 } 21357 default: 21358 return state; 21359 } 21360 } 21361 var selectors = { 21362 getGuideline(state, category) { 21363 return state.categories[category]; 21364 }, 21365 getAllGuidelines(state) { 21366 return state.categories; 21367 }, 21368 getBlockGuidelines(state) { 21369 return state.categories.blocks; 21370 }, 21371 getBlockGuideline(state, blockName) { 21372 return state.categories.blocks[blockName] ?? ""; 21373 }, 21374 getId(state) { 21375 return state.id; 21376 }, 21377 getStatus(state) { 21378 return state.status; 21379 } 21380 }; 21381 var store = (0, import_data6.createReduxStore)(STORE_NAME, { 21382 reducer, 21383 actions, 21384 selectors 21385 }); 21386 (0, import_data6.register)(store); 21387 21388 // routes/content-guidelines/api.ts 21389 var import_api_fetch = __toESM(require_api_fetch()); 21390 var import_blob = __toESM(require_blob()); 21391 var import_data7 = __toESM(require_data()); 21392 var import_i18n50 = __toESM(require_i18n()); 21393 var import_notices = __toESM(require_notices()); 21394 var FLAT_CATEGORIES = ["site", "copy", "images", "additional"]; 21395 function isValidGuidelinesImport(data) { 21396 return !!data && typeof data === "object" && "guideline_categories" in data && typeof data.guideline_categories === "object" && data.guideline_categories !== null; 21397 } 21398 async function fetchContentGuidelines() { 21399 const { setFromResponse } = (0, import_data7.dispatch)(store); 21400 const response = await (0, import_api_fetch.default)({ 21401 path: "/wp/v2/content-guidelines?context=edit" 21402 }); 21403 setFromResponse(response); 21404 return response; 21405 } 21406 async function saveContentGuidelines() { 21407 const { setFromResponse } = (0, import_data7.dispatch)(store); 21408 const guidelinesStore = (0, import_data7.select)(store); 21409 const id = guidelinesStore.getId(); 21410 const status = guidelinesStore.getStatus() || "draft"; 21411 const categories = guidelinesStore.getAllGuidelines(); 21412 const blockGuidelines = guidelinesStore.getBlockGuidelines(); 21413 const data = { 21414 id, 21415 status, 21416 guideline_categories: { 21417 site: { 21418 guidelines: categories.site 21419 }, 21420 copy: { 21421 guidelines: categories.copy 21422 }, 21423 images: { 21424 guidelines: categories.images 21425 }, 21426 additional: { 21427 guidelines: categories.additional 21428 }, 21429 blocks: Object.fromEntries( 21430 Object.entries(blockGuidelines).map( 21431 ([blockName, guidelines]) => [ 21432 blockName, 21433 { guidelines } 21434 ] 21435 ) 21436 ) 21437 } 21438 }; 21439 const path = id ? `/wp/v2/content-guidelines/$id}` : "/wp/v2/content-guidelines"; 21440 const method = id ? "PUT" : "POST"; 21441 const response = await (0, import_api_fetch.default)({ 21442 path, 21443 method, 21444 data 21445 }); 21446 setFromResponse(response); 21447 return response; 21448 } 21449 async function importContentGuidelines(file) { 21450 const { setGuideline, setBlockGuideline } = (0, import_data7.dispatch)( 21451 store 21452 ); 21453 const { createSuccessNotice } = (0, import_data7.dispatch)(import_notices.store); 21454 const parsed = JSON.parse(await file.text()); 21455 if (!isValidGuidelinesImport(parsed)) { 21456 throw new Error( 21457 (0, import_i18n50.__)( 21458 "Check that your file contains valid JSON markup and try again." 21459 ) 21460 ); 21461 } 21462 const guidelinesStore = (0, import_data7.select)(store); 21463 const previousCategories = guidelinesStore.getAllGuidelines(); 21464 const previousBlocks = { ...guidelinesStore.getBlockGuidelines() }; 21465 const { guideline_categories: contentGuidelinesCategories } = parsed; 21466 FLAT_CATEGORIES.forEach((guidelineCategory) => { 21467 const guidelines = contentGuidelinesCategories[guidelineCategory]?.guidelines; 21468 if (typeof guidelines === "string") { 21469 setGuideline(guidelineCategory, guidelines); 21470 } 21471 }); 21472 const blocksData = contentGuidelinesCategories.blocks; 21473 if (blocksData && typeof blocksData === "object") { 21474 Object.entries(blocksData).forEach(([blockName, blockData]) => { 21475 if (blockData && typeof blockData.guidelines === "string") { 21476 setBlockGuideline(blockName, blockData.guidelines); 21477 } 21478 }); 21479 } 21480 try { 21481 await saveContentGuidelines(); 21482 createSuccessNotice((0, import_i18n50.__)("Guidelines imported."), { 21483 type: "snackbar" 21484 }); 21485 } catch (error2) { 21486 FLAT_CATEGORIES.forEach((cat) => { 21487 setGuideline(cat, previousCategories[cat] ?? ""); 21488 }); 21489 const currentBlocks = guidelinesStore.getBlockGuidelines(); 21490 Object.keys(currentBlocks).forEach( 21491 (blockName) => setBlockGuideline(blockName, "") 21492 ); 21493 Object.entries(previousBlocks).forEach( 21494 ([blockName, value]) => setBlockGuideline(blockName, value) 21495 ); 21496 throw error2; 21497 } 21498 } 21499 function exportContentGuidelines() { 21500 const { createSuccessNotice } = (0, import_data7.dispatch)(import_notices.store); 21501 const guidelinesStore = (0, import_data7.select)(store); 21502 const contentGuidelinesCategories = guidelinesStore.getAllGuidelines(); 21503 const blockGuidelines = guidelinesStore.getBlockGuidelines(); 21504 const data = { 21505 guideline_categories: { 21506 ...Object.fromEntries( 21507 FLAT_CATEGORIES.map((guidelineCategory) => [ 21508 guidelineCategory, 21509 { 21510 guidelines: contentGuidelinesCategories[guidelineCategory] ?? "" 21511 } 21512 ]) 21513 ), 21514 blocks: Object.fromEntries( 21515 Object.entries(blockGuidelines).map( 21516 ([blockName, guidelines]) => [ 21517 blockName, 21518 { guidelines } 21519 ] 21520 ) 21521 ) 21522 } 21523 }; 21524 (0, import_blob.downloadBlob)( 21525 "guidelines.json", 21526 JSON.stringify(data, null, 2), 21527 "application/json" 21528 ); 21529 createSuccessNotice((0, import_i18n50.__)("Guidelines exported."), { 21530 type: "snackbar" 21531 }); 21532 } 21533 async function fetchContentGuidelinesRevisions({ 21534 guidelinesId, 21535 page = 1, 21536 perPage = 10, 21537 search 21538 }) { 21539 const params = new URLSearchParams({ 21540 page: String(page), 21541 per_page: String(perPage), 21542 _embed: "author", 21543 ...search ? { search } : {} 21544 }); 21545 const response = await (0, import_api_fetch.default)({ 21546 path: `/wp/v2/content-guidelines/$guidelinesId}/revisions?$params}`, 21547 parse: false 21548 }); 21549 const revisions = await response.json(); 21550 const total = parseInt(response.headers.get("X-WP-Total") ?? "0", 10); 21551 const totalPages = parseInt( 21552 response.headers.get("X-WP-TotalPages") ?? "0", 21553 10 21554 ); 21555 return { revisions, total, totalPages }; 21556 } 21557 async function restoreContentGuidelinesRevision(guidelinesId, revisionId) { 21558 return await (0, import_api_fetch.default)({ 21559 path: `/wp/v2/content-guidelines/$guidelinesId}/revisions/$revisionId}/restore`, 21560 method: "POST" 21561 }); 21562 } 21563 21564 // routes/content-guidelines/components/guideline-accordion-form.tsx 21565 var import_jsx_runtime127 = __toESM(require_jsx_runtime()); 21566 function GuidelineAccordionForm({ 21567 slug, 21568 contentId, 21569 headingId, 21570 descriptionId 21571 }) { 21572 const { setGuideline } = (0, import_data8.useDispatch)(store); 21573 const { createSuccessNotice } = (0, import_data8.useDispatch)(import_notices2.store); 21574 const [loading, setLoading] = (0, import_element87.useState)(false); 21575 const [error2, setError] = (0, import_element87.useState)(null); 21576 const [showClearConfirmation, setShowClearConfirmation] = (0, import_element87.useState)(false); 21577 const { value } = (0, import_data8.useSelect)( 21578 (select2) => ({ 21579 value: select2(store).getGuideline(slug) 21580 }), 21581 [slug] 21582 ); 21583 const [draft, setDraft] = (0, import_element87.useState)(value); 21584 (0, import_element87.useEffect)(() => setDraft(value), [value]); 21585 const data = (0, import_element87.useMemo)(() => ({ guidelines: draft }), [draft]); 21586 const fields2 = (0, import_element87.useMemo)( 21587 () => [ 21588 { 21589 id: "guidelines", 21590 label: (0, import_i18n51.sprintf)( 21591 /* translators: %s: Guideline category. */ 21592 (0, import_i18n51.__)("%s guidelines"), 21593 slug 21594 ), 21595 type: "text", 21596 Edit: "textarea" 21597 } 21598 ], 21599 [slug] 21600 ); 21601 const form = (0, import_element87.useMemo)( 21602 () => ({ 21603 layout: { type: "regular", labelPosition: "none" }, 21604 fields: ["guidelines"] 21605 }), 21606 [] 21607 ); 21608 const handleSave = (event) => { 21609 event.preventDefault(); 21610 setGuideline(slug, draft); 21611 setLoading(true); 21612 saveContentGuidelines().then(() => { 21613 setError(null); 21614 createSuccessNotice((0, import_i18n51.__)("Guidelines saved."), { 21615 type: "snackbar" 21616 }); 21617 }).catch( 21618 (e2) => setError( 21619 (0, import_i18n51.sprintf)( 21620 /* translators: %s: Error message. */ 21621 (0, import_i18n51.__)("Error saving guidelines: %s"), 21622 e2.message 21623 ) 21624 ) 21625 ).finally(() => setLoading(false)); 21626 }; 21627 const handleClearClick = () => setShowClearConfirmation(true); 21628 const handleClearConfirm = () => { 21629 const oldValue = draft; 21630 setGuideline(slug, ""); 21631 setLoading(true); 21632 saveContentGuidelines().then(() => { 21633 setError(null); 21634 createSuccessNotice((0, import_i18n51.__)("Guidelines cleared."), { 21635 type: "snackbar" 21636 }); 21637 }).catch((e2) => { 21638 setError( 21639 (0, import_i18n51.sprintf)( 21640 /* translators: %s: Error message. */ 21641 (0, import_i18n51.__)("Error clearing guidelines: %s"), 21642 e2.message 21643 ) 21644 ); 21645 setGuideline(slug, oldValue); 21646 }).finally(() => { 21647 setLoading(false); 21648 setShowClearConfirmation(false); 21649 }); 21650 }; 21651 return /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)( 21652 "form", 21653 { 21654 id: contentId, 21655 "aria-labelledby": headingId, 21656 "aria-describedby": descriptionId, 21657 onSubmit: handleSave, 21658 className: "content-guidelines__accordion-form", 21659 children: [ 21660 /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(import_components54.__experimentalVStack, { spacing: 4, children: [ 21661 /* @__PURE__ */ (0, import_jsx_runtime127.jsx)( 21662 DataForm, 21663 { 21664 data, 21665 fields: fields2, 21666 form, 21667 onChange: (edits) => setDraft(edits.guidelines ?? draft) 21668 } 21669 ), 21670 error2 && /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(import_components54.Notice, { status: "error", onRemove: () => setError(null), children: error2 }), 21671 /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(import_components54.__experimentalHStack, { spacing: 4, alignment: "left", children: [ 21672 /* @__PURE__ */ (0, import_jsx_runtime127.jsx)( 21673 import_components54.Button, 21674 { 21675 variant: "primary", 21676 type: "submit", 21677 className: "save-button", 21678 disabled: loading || !draft, 21679 accessibleWhenDisabled: true, 21680 isBusy: loading, 21681 children: (0, import_i18n51.__)("Save guidelines") 21682 } 21683 ), 21684 /* @__PURE__ */ (0, import_jsx_runtime127.jsx)( 21685 import_components54.Button, 21686 { 21687 variant: "tertiary", 21688 type: "button", 21689 disabled: loading || !value, 21690 accessibleWhenDisabled: true, 21691 isBusy: loading, 21692 onClick: handleClearClick, 21693 children: (0, import_i18n51.__)("Clear guidelines") 21694 } 21695 ) 21696 ] }) 21697 ] }), 21698 /* @__PURE__ */ (0, import_jsx_runtime127.jsx)( 21699 import_components54.__experimentalConfirmDialog, 21700 { 21701 isOpen: showClearConfirmation, 21702 title: (0, import_i18n51.sprintf)( 21703 /* translators: %s: Guideline category. */ 21704 (0, import_i18n51.__)("Clear %s guidelines"), 21705 slug 21706 ), 21707 __experimentalHideHeader: false, 21708 onConfirm: handleClearConfirm, 21709 onCancel: () => setShowClearConfirmation(false), 21710 confirmButtonText: (0, import_i18n51.__)("Clear guidelines"), 21711 isBusy: loading, 21712 size: "small", 21713 children: (0, import_i18n51.sprintf)( 21714 /* translators: %s: Guideline category slug. */ 21715 (0, import_i18n51.__)( 21716 "You are about to clear the %s guidelines. This can be undone from revision history." 21717 ), 21718 slug 21719 ) 21720 } 21721 ) 21722 ] 21723 } 21724 ); 21725 } 21726 21727 // routes/content-guidelines/components/block-guidelines.tsx 21728 var import_components56 = __toESM(require_components()); 21729 var import_i18n53 = __toESM(require_i18n()); 21730 var import_element89 = __toESM(require_element()); 21731 var import_data10 = __toESM(require_data()); 21732 var import_blocks2 = __toESM(require_blocks()); 21733 var import_notices4 = __toESM(require_notices()); 21734 21735 // routes/content-guidelines/components/block-guideline-modal.tsx 21736 var import_components55 = __toESM(require_components()); 21737 var import_i18n52 = __toESM(require_i18n()); 21738 var import_element88 = __toESM(require_element()); 21739 var import_data9 = __toESM(require_data()); 21740 var import_blocks = __toESM(require_blocks()); 21741 var import_notices3 = __toESM(require_notices()); 21742 21743 // routes/lock-unlock.ts 21744 var import_private_apis2 = __toESM(require_private_apis()); 21745 var { lock: lock2, unlock: unlock2 } = (0, import_private_apis2.__dangerousOptInToUnstableAPIsOnlyForCoreModules)( 21746 "I acknowledge private features are not for use in themes or plugins and doing so will break in the next version of WordPress.", 21747 "@wordpress/routes" 21748 ); 21749 21750 // routes/content-guidelines/components/block-guideline-modal.scss 21751 if (typeof document !== "undefined" && true && !document.head.querySelector("style[data-wp-hash='7c0ecac6c9']")) { 21752 const style = document.createElement("style"); 21753 style.setAttribute("data-wp-hash", "7c0ecac6c9"); 21754 style.appendChild(document.createTextNode(".block-guideline-modal{width:min(100%,660px)}.block-guideline-modal__actions{margin-top:8px}")); 21755 document.head.appendChild(style); 21756 } 21757 21758 // routes/content-guidelines/components/block-guideline-modal.tsx 21759 var import_jsx_runtime128 = __toESM(require_jsx_runtime()); 21760 var { isContentBlock } = unlock2(import_blocks.privateApis); 21761 function BlockGuidelineModal({ 21762 closeModal, 21763 initialBlock 21764 }) { 21765 const [selectedBlock, setSelectedBlock] = (0, import_element88.useState)( 21766 initialBlock 21767 ); 21768 const [isSaving, setIsSaving] = (0, import_element88.useState)(false); 21769 const [error2, setError] = (0, import_element88.useState)(null); 21770 const [showRemoveConfirmation, setShowRemoveConfirmation] = (0, import_element88.useState)(false); 21771 const blockGuidelines = (0, import_data9.useSelect)( 21772 (select2) => select2(store).getBlockGuidelines(), 21773 [] 21774 ); 21775 const isEditing = !!initialBlock; 21776 const currentGuideline = blockGuidelines[selectedBlock] ?? ""; 21777 const [guidelineText, setGuidelineText] = (0, import_element88.useState)(currentGuideline); 21778 const blockOptions = (0, import_data9.useSelect)( 21779 // @ts-ignore 21780 (select2) => select2(import_blocks.store).getBlockTypes(), 21781 [] 21782 ); 21783 const availableBlockOptions = (0, import_element88.useMemo)(() => { 21784 const set3 = new Set(Object.keys(blockGuidelines)); 21785 if (initialBlock) { 21786 set3.delete(initialBlock); 21787 } 21788 if (selectedBlock) { 21789 set3.delete(selectedBlock); 21790 } 21791 return blockOptions.filter( 21792 (block) => isContentBlock(block.name) && !set3.has(block.name) 21793 ).map((block) => ({ 21794 value: block.name, 21795 label: block.title 21796 })); 21797 }, [blockGuidelines, blockOptions, initialBlock, selectedBlock]); 21798 const selectedBlockLabel = (0, import_element88.useMemo)( 21799 () => blockOptions.find((block) => block.name === selectedBlock)?.title || "", 21800 [blockOptions, selectedBlock] 21801 ); 21802 const { setBlockGuideline } = (0, import_data9.useDispatch)(store); 21803 const { createSuccessNotice } = (0, import_data9.useDispatch)(import_notices3.store); 21804 const handleSave = (value) => { 21805 value = value.trim(); 21806 if (!selectedBlock) { 21807 return; 21808 } 21809 setIsSaving(true); 21810 const oldValue = blockGuidelines[selectedBlock]; 21811 setBlockGuideline(selectedBlock, value); 21812 saveContentGuidelines().then(() => { 21813 setError(null); 21814 createSuccessNotice( 21815 value ? (0, import_i18n52.__)("Guidelines saved.") : (0, import_i18n52.__)("Guidelines removed."), 21816 { type: "snackbar" } 21817 ); 21818 closeModal(); 21819 }).catch((e2) => { 21820 setError(e2.message); 21821 setBlockGuideline(selectedBlock, oldValue); 21822 }).finally(() => setIsSaving(false)); 21823 }; 21824 const canSubmit = selectedBlock && guidelineText.trim().length > 0; 21825 let submitButtonLabel = (0, import_i18n52.__)("Save guidelines"); 21826 if (isSaving) { 21827 submitButtonLabel = (0, import_i18n52.__)("Saving\u2026"); 21828 } 21829 return /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)( 21830 import_components55.Modal, 21831 { 21832 className: "block-guideline-modal", 21833 title: isEditing ? (0, import_i18n52.__)("Edit guidelines") : (0, import_i18n52.__)("Add guidelines"), 21834 onRequestClose: closeModal, 21835 children: [ 21836 /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)(import_components55.__experimentalVStack, { spacing: 4, children: [ 21837 isEditing ? /* @__PURE__ */ (0, import_jsx_runtime128.jsx)( 21838 import_components55.TextControl, 21839 { 21840 __next40pxDefaultSize: true, 21841 label: (0, import_i18n52.__)("Block"), 21842 value: selectedBlockLabel, 21843 onChange: () => { 21844 }, 21845 disabled: true 21846 } 21847 ) : /* @__PURE__ */ (0, import_jsx_runtime128.jsx)( 21848 import_components55.ComboboxControl, 21849 { 21850 __next40pxDefaultSize: true, 21851 label: (0, import_i18n52.__)("Block"), 21852 options: availableBlockOptions, 21853 value: selectedBlock, 21854 onChange: (value) => setSelectedBlock(value ?? void 0), 21855 placeholder: (0, import_i18n52.__)("Search for a block\u2026") 21856 } 21857 ), 21858 /* @__PURE__ */ (0, import_jsx_runtime128.jsx)( 21859 import_components55.TextareaControl, 21860 { 21861 label: (0, import_i18n52.__)("Guideline text"), 21862 value: guidelineText, 21863 onChange: setGuidelineText, 21864 placeholder: (0, import_i18n52.__)( 21865 "Enter guidelines for how this block should be used\u2026" 21866 ), 21867 rows: 6 21868 } 21869 ), 21870 error2 && /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(import_components55.Notice, { status: "error", onRemove: () => setError(null), children: (0, import_i18n52.sprintf)( 21871 /* translators: %s: Error message. */ 21872 (0, import_i18n52.__)("Error: %s"), 21873 error2 21874 ) }), 21875 /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)( 21876 import_components55.__experimentalHStack, 21877 { 21878 justify: "flex-end", 21879 spacing: 2, 21880 className: "block-guideline-modal__actions", 21881 children: [ 21882 isEditing && /* @__PURE__ */ (0, import_jsx_runtime128.jsx)( 21883 import_components55.Button, 21884 { 21885 variant: "tertiary", 21886 isDestructive: true, 21887 onClick: () => setShowRemoveConfirmation(true), 21888 disabled: isSaving, 21889 accessibleWhenDisabled: true, 21890 type: "button", 21891 children: (0, import_i18n52.__)("Remove") 21892 } 21893 ), 21894 /* @__PURE__ */ (0, import_jsx_runtime128.jsx)( 21895 import_components55.Button, 21896 { 21897 variant: "primary", 21898 onClick: () => handleSave(guidelineText), 21899 disabled: !canSubmit || isSaving, 21900 isBusy: isSaving, 21901 accessibleWhenDisabled: true, 21902 children: submitButtonLabel 21903 } 21904 ) 21905 ] 21906 } 21907 ) 21908 ] }), 21909 /* @__PURE__ */ (0, import_jsx_runtime128.jsx)( 21910 import_components55.__experimentalConfirmDialog, 21911 { 21912 isOpen: showRemoveConfirmation, 21913 title: (0, import_i18n52.__)("Remove block guidelines"), 21914 __experimentalHideHeader: false, 21915 onConfirm: () => { 21916 handleSave(""); 21917 setShowRemoveConfirmation(false); 21918 }, 21919 onCancel: () => setShowRemoveConfirmation(false), 21920 confirmButtonText: (0, import_i18n52.__)("Remove"), 21921 isBusy: isSaving, 21922 size: "small", 21923 children: (0, import_i18n52.sprintf)( 21924 /* translators: %s: Block name. */ 21925 (0, import_i18n52.__)( 21926 "You are about to remove the block guidelines for the %s block. This can be undone from revision history." 21927 ), 21928 selectedBlockLabel 21929 ) 21930 } 21931 ) 21932 ] 21933 } 21934 ); 21935 } 21936 21937 // routes/content-guidelines/components/block-guidelines.scss 21938 if (typeof document !== "undefined" && true && !document.head.querySelector("style[data-wp-hash='ac1d1fe86c']")) { 21939 const style = document.createElement("style"); 21940 style.setAttribute("data-wp-hash", "ac1d1fe86c"); 21941 style.appendChild(document.createTextNode(".block-guidelines{margin-top:24px}.block-guidelines .block-guidelines__icon{align-items:center;display:flex;height:100%;justify-content:center;width:100%}.block-guidelines .dataviews-view-list__field-wrapper{display:flex;justify-content:center}.block-guidelines .dataviews-wrapper{margin-left:-24px;margin-right:-24px}.block-guidelines .dataviews-search{margin-left:24px;margin-right:24px}")); 21942 document.head.appendChild(style); 21943 } 21944 21945 // routes/content-guidelines/components/block-guidelines.tsx 21946 var import_jsx_runtime129 = __toESM(require_jsx_runtime()); 21947 var PER_PAGE = 5; 21948 var initialView = { 21949 type: "list", 21950 search: "", 21951 page: 1, 21952 perPage: PER_PAGE, 21953 filters: [], 21954 mediaField: "icon", 21955 showMedia: true, 21956 titleField: "label", 21957 layout: { 21958 density: "compact" 21959 } 21960 }; 21961 var fields = [ 21962 { 21963 id: "icon", 21964 label: (0, import_i18n53.__)("Icon"), 21965 type: "media", 21966 render: ({ item }) => /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("div", { className: "block-guidelines__icon", children: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(import_components56.Icon, { icon: item.icon ?? block_default_default, size: 16 }) }) 21967 }, 21968 { 21969 id: "label", 21970 label: (0, import_i18n53.__)("Label"), 21971 type: "text", 21972 enableGlobalSearch: true, 21973 getValue: ({ item }) => item.label, 21974 render: ({ item }) => item.label 21975 } 21976 ]; 21977 function BlockGuidelines() { 21978 const [isOpen, setIsOpen] = (0, import_element89.useState)(false); 21979 const [view, setView] = (0, import_element89.useState)(initialView); 21980 const [selectedItem, setSelectedItem] = (0, import_element89.useState)(); 21981 const [error2, setError] = (0, import_element89.useState)(null); 21982 const [busy, setBusy] = (0, import_element89.useState)(false); 21983 const [itemToDelete, setItemToDelete] = (0, import_element89.useState)( 21984 null 21985 ); 21986 const { createSuccessNotice } = (0, import_data10.useDispatch)(import_notices4.store); 21987 const blockGuidelines = (0, import_data10.useSelect)( 21988 (select2) => select2(store).getBlockGuidelines(), 21989 [] 21990 ); 21991 const blockTypes = (0, import_data10.useSelect)( 21992 // @ts-ignore 21993 (select2) => select2(import_blocks2.store).getBlockTypes(), 21994 [] 21995 ); 21996 const rows = (0, import_element89.useMemo)( 21997 () => blockTypes.filter((blockType) => blockGuidelines[blockType.name]).map((blockType) => ({ 21998 id: blockType.name, 21999 label: blockType.title, 22000 guidelines: blockGuidelines[blockType.name] ?? "", 22001 icon: blockType.icon?.src 22002 })), 22003 [blockGuidelines, blockTypes] 22004 ); 22005 const { setBlockGuideline } = (0, import_data10.useDispatch)(store); 22006 const handleRowClick = (id) => { 22007 setSelectedItem(id); 22008 setIsOpen(true); 22009 }; 22010 const actions2 = (0, import_element89.useMemo)( 22011 () => [ 22012 { 22013 id: "edit", 22014 label: (0, import_i18n53.__)("Edit"), 22015 callback: (items) => { 22016 const item = items[0]; 22017 handleRowClick(item.id); 22018 } 22019 }, 22020 { 22021 id: "remove", 22022 label: (0, import_i18n53.__)("Remove"), 22023 callback: (items) => { 22024 const item = items[0]; 22025 setItemToDelete(item); 22026 } 22027 } 22028 ], 22029 [setItemToDelete] 22030 ); 22031 const handleDelete = () => { 22032 if (!itemToDelete) { 22033 return; 22034 } 22035 const oldValue = blockGuidelines[itemToDelete.id]; 22036 setBlockGuideline(itemToDelete.id, ""); 22037 setBusy(true); 22038 saveContentGuidelines().then(() => { 22039 setError(null); 22040 createSuccessNotice((0, import_i18n53.__)("Guidelines removed."), { 22041 type: "snackbar" 22042 }); 22043 }).catch((e2) => { 22044 setError(e2.message); 22045 setBlockGuideline(itemToDelete.id, oldValue); 22046 }).finally(() => { 22047 setBusy(false); 22048 setItemToDelete(null); 22049 }); 22050 }; 22051 const { data: processedData, paginationInfo } = (0, import_element89.useMemo)( 22052 () => filterSortAndPaginate(rows, view, fields), 22053 [rows, view] 22054 ); 22055 (0, import_element89.useEffect)(() => { 22056 const lastPage = Math.max(paginationInfo.totalPages, 1); 22057 if (view.page && view.page > lastPage) { 22058 setView( 22059 (currentView) => currentView.page && currentView.page > lastPage ? { 22060 ...currentView, 22061 page: lastPage 22062 } : currentView 22063 ); 22064 } 22065 }, [paginationInfo.totalPages, view.page]); 22066 const closeModal = () => { 22067 setIsOpen(false); 22068 setSelectedItem(void 0); 22069 }; 22070 const openModal = () => { 22071 setSelectedItem(void 0); 22072 setIsOpen(true); 22073 }; 22074 const shouldShowDataViewControls = rows.length > PER_PAGE; 22075 return /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)(import_components56.__experimentalVStack, { spacing: 4, className: "block-guidelines", children: [ 22076 error2 && /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(import_components56.Notice, { status: "error", onRemove: () => setError(null), children: (0, import_i18n53.sprintf)( 22077 /* translators: %s: Error message. */ 22078 (0, import_i18n53.__)("Error: %s"), 22079 error2 22080 ) }), 22081 rows.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime129.jsx)( 22082 dataviews_default, 22083 { 22084 paginationInfo, 22085 data: processedData, 22086 view, 22087 onChangeView: setView, 22088 fields, 22089 actions: actions2, 22090 config: { perPageSizes: [PER_PAGE] }, 22091 onChangeSelection: (items) => { 22092 const id = items[0]; 22093 handleRowClick(id); 22094 }, 22095 defaultLayouts: { 22096 list: {} 22097 }, 22098 children: /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)(import_components56.__experimentalVStack, { spacing: 4, children: [ 22099 shouldShowDataViewControls && /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(dataviews_default.Search, { label: (0, import_i18n53.__)("Search blocks") }), 22100 /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(dataviews_default.Layout, {}), 22101 shouldShowDataViewControls && /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(dataviews_default.Footer, {}) 22102 ] }) 22103 } 22104 ), 22105 /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(import_components56.__experimentalHStack, { children: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(import_components56.Button, { variant: "primary", onClick: openModal, children: (0, import_i18n53.__)("Add guidelines") }) }), 22106 isOpen && /* @__PURE__ */ (0, import_jsx_runtime129.jsx)( 22107 BlockGuidelineModal, 22108 { 22109 closeModal, 22110 initialBlock: selectedItem 22111 } 22112 ), 22113 /* @__PURE__ */ (0, import_jsx_runtime129.jsx)( 22114 import_components56.__experimentalConfirmDialog, 22115 { 22116 isOpen: !!itemToDelete, 22117 title: (0, import_i18n53.__)("Remove block guidelines"), 22118 __experimentalHideHeader: false, 22119 onConfirm: handleDelete, 22120 onCancel: () => setItemToDelete(null), 22121 confirmButtonText: (0, import_i18n53.__)("Remove"), 22122 isBusy: busy, 22123 size: "small", 22124 children: (0, import_i18n53.sprintf)( 22125 /* translators: %s: Block name. */ 22126 (0, import_i18n53.__)( 22127 "You are about to remove the block guidelines for the %s block. This can be undone from revision history." 22128 ), 22129 itemToDelete?.label ?? "" 22130 ) 22131 } 22132 ) 22133 ] }); 22134 } 22135 22136 // routes/content-guidelines/components/actions-section.tsx 22137 var import_components58 = __toESM(require_components()); 22138 var import_i18n54 = __toESM(require_i18n()); 22139 var import_element90 = __toESM(require_element()); 22140 22141 // routes/content-guidelines/components/action-item.tsx 22142 var import_components57 = __toESM(require_components()); 22143 function ActionItem({ 22144 slug, 22145 title, 22146 description, 22147 buttonLabel, 22148 ariaLabel, 22149 onClick, 22150 disabled: disabled2, 22151 isBusy 22152 }) { 22153 const descriptionId = `content-guidelines-action-$slug}-description`; 22154 return /* @__PURE__ */ React.createElement("li", { className: "content-guidelines__action-list-item" }, /* @__PURE__ */ React.createElement( 22155 import_components57.__experimentalHStack, 22156 { 22157 justify: "space-between", 22158 className: "content-guidelines__action-row" 22159 }, 22160 /* @__PURE__ */ React.createElement(import_components57.__experimentalVStack, { spacing: 1 }, /* @__PURE__ */ React.createElement( 22161 import_components57.__experimentalHeading, 22162 { 22163 level: 3, 22164 size: 13, 22165 weight: 400, 22166 className: "content-guidelines__action-title" 22167 }, 22168 title 22169 ), /* @__PURE__ */ React.createElement( 22170 import_components57.__experimentalText, 22171 { 22172 id: descriptionId, 22173 size: 13, 22174 weight: 400, 22175 variant: "muted", 22176 className: "content-guidelines__action-description" 22177 }, 22178 description 22179 )), 22180 /* @__PURE__ */ React.createElement( 22181 import_components57.Button, 22182 { 22183 size: "compact", 22184 variant: "secondary", 22185 className: "content-guidelines__action-button", 22186 "aria-label": ariaLabel, 22187 "aria-describedby": descriptionId, 22188 onClick, 22189 isBusy, 22190 disabled: disabled2 22191 }, 22192 buttonLabel 22193 ) 22194 )); 22195 } 22196 22197 // routes/content-guidelines/components/actions-section.tsx 22198 var import_jsx_runtime130 = __toESM(require_jsx_runtime()); 22199 function getErrorMessage(error2) { 22200 if (error2 instanceof Error) { 22201 return error2.message; 22202 } 22203 if (typeof error2 === "object" && error2 !== null && "message" in error2) { 22204 return String(error2.message); 22205 } 22206 return (0, import_i18n54.__)("Unknown error."); 22207 } 22208 function ActionsSection() { 22209 const { goTo } = (0, import_components58.useNavigator)(); 22210 const fileInputRef = (0, import_element90.useRef)(null); 22211 const [isImporting, setIsImporting] = (0, import_element90.useState)(false); 22212 const [error2, setError] = (0, import_element90.useState)(null); 22213 const [pendingImport, setPendingImport] = (0, import_element90.useState)(null); 22214 function handleImportClick() { 22215 fileInputRef.current?.click(); 22216 } 22217 function handleFileChange(event) { 22218 const file = event.target.files?.[0]; 22219 event.target.value = ""; 22220 if (!file) { 22221 return; 22222 } 22223 setPendingImport(file); 22224 } 22225 async function handleModalContinue() { 22226 if (!pendingImport) { 22227 return; 22228 } 22229 const file = pendingImport; 22230 setPendingImport(null); 22231 setIsImporting(true); 22232 try { 22233 await importContentGuidelines(file); 22234 setError(null); 22235 } catch (importError) { 22236 setError( 22237 (0, import_i18n54.sprintf)( 22238 /* translators: %s: Error message. */ 22239 (0, import_i18n54.__)("We ran into a problem importing your guidelines. %s"), 22240 getErrorMessage(importError) 22241 ) 22242 ); 22243 } finally { 22244 setIsImporting(false); 22245 } 22246 } 22247 async function handleExportClick() { 22248 try { 22249 exportContentGuidelines(); 22250 setError(null); 22251 } catch (exportError) { 22252 setError( 22253 (0, import_i18n54.sprintf)( 22254 /* translators: %s: Error message. */ 22255 (0, import_i18n54.__)("We ran into a problem exporting your guidelines: %s"), 22256 getErrorMessage(exportError) 22257 ) 22258 ); 22259 } 22260 } 22261 const ACTIONS = [ 22262 { 22263 slug: "import", 22264 title: (0, import_i18n54.__)("Import"), 22265 description: (0, import_i18n54.__)("Upload a JSON file to import your guidelines."), 22266 buttonLabel: (0, import_i18n54.__)("Upload"), 22267 ariaLabel: (0, import_i18n54.__)("Import guidelines"), 22268 onClick: handleImportClick, 22269 isBusy: isImporting, 22270 disabled: isImporting || !!pendingImport 22271 }, 22272 { 22273 slug: "export", 22274 title: (0, import_i18n54.__)("Export"), 22275 description: (0, import_i18n54.__)("Export your guidelines to a JSON file."), 22276 buttonLabel: (0, import_i18n54.__)("Download"), 22277 ariaLabel: (0, import_i18n54.__)("Export guidelines"), 22278 onClick: handleExportClick 22279 }, 22280 { 22281 slug: "revert", 22282 title: (0, import_i18n54.__)("Revert"), 22283 description: (0, import_i18n54.__)("Use a previous version of your guidelines."), 22284 buttonLabel: (0, import_i18n54.__)("View history"), 22285 ariaLabel: (0, import_i18n54.__)("View history of guidelines"), 22286 onClick: () => goTo("/revision-history") 22287 } 22288 ]; 22289 return /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(import_components58.__experimentalVStack, { spacing: 4, className: "content-guidelines__actions", children: [ 22290 /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_components58.__experimentalHeading, { level: 3, size: 15, weight: 500, children: (0, import_i18n54.__)("Actions") }), 22291 /* @__PURE__ */ (0, import_jsx_runtime130.jsx)( 22292 "input", 22293 { 22294 type: "file", 22295 accept: ".json", 22296 ref: fileInputRef, 22297 onChange: handleFileChange, 22298 style: { display: "none" } 22299 } 22300 ), 22301 error2 && /* @__PURE__ */ (0, import_jsx_runtime130.jsx)( 22302 import_components58.Notice, 22303 { 22304 status: "error", 22305 onRemove: () => setError(null), 22306 isDismissible: true, 22307 children: error2 22308 } 22309 ), 22310 /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_components58.Card, { className: "content-guidelines__actions-card", children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("ul", { role: "list", className: "content-guidelines__actions-list", children: ACTIONS.map((action) => /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(ActionItem, { ...action }, action.slug)) }) }), 22311 pendingImport && /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)( 22312 import_components58.Modal, 22313 { 22314 title: (0, import_i18n54.__)("Import guidelines"), 22315 onRequestClose: () => setPendingImport(null), 22316 size: "medium", 22317 children: [ 22318 /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(import_components58.__experimentalVStack, { spacing: 4, children: [ 22319 /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_components58.__experimentalText, { size: 13, weight: 400, children: (0, import_i18n54.__)( 22320 "Importing new guidelines will replace your current guidelines." 22321 ) }), 22322 /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(import_components58.__experimentalText, { size: 13, weight: 400, children: (0, import_i18n54.__)( 22323 "This can be undone from revision history." 22324 ) }) 22325 ] }), 22326 /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)( 22327 import_components58.__experimentalHStack, 22328 { 22329 justify: "flex-end", 22330 className: "content-guidelines__import-modal-actions", 22331 children: [ 22332 /* @__PURE__ */ (0, import_jsx_runtime130.jsx)( 22333 import_components58.Button, 22334 { 22335 variant: "tertiary", 22336 onClick: () => setPendingImport(null), 22337 children: (0, import_i18n54.__)("Cancel") 22338 } 22339 ), 22340 /* @__PURE__ */ (0, import_jsx_runtime130.jsx)( 22341 import_components58.Button, 22342 { 22343 variant: "primary", 22344 onClick: handleModalContinue, 22345 __next40pxDefaultSize: true, 22346 children: (0, import_i18n54.__)("Continue") 22347 } 22348 ) 22349 ] 22350 } 22351 ) 22352 ] 22353 } 22354 ) 22355 ] }); 22356 } 22357 22358 // routes/content-guidelines/components/revision-history.tsx 22359 var import_components59 = __toESM(require_components()); 22360 var import_i18n55 = __toESM(require_i18n()); 22361 var import_element91 = __toESM(require_element()); 22362 var import_data11 = __toESM(require_data()); 22363 var import_date9 = __toESM(require_date()); 22364 var import_notices5 = __toESM(require_notices()); 22365 var DEFAULT_VIEW = { 22366 type: "table", 22367 fields: ["date", "author"], 22368 page: 1, 22369 perPage: 10, 22370 layout: { 22371 enableMoving: false, 22372 styles: { 22373 author: { align: "end" } 22374 } 22375 } 22376 }; 22377 function RevisionHistory() { 22378 const [view, setView] = (0, import_element91.useState)(DEFAULT_VIEW); 22379 const [revisions, setRevisions] = (0, import_element91.useState)( 22380 [] 22381 ); 22382 const [isLoading, setIsLoading] = (0, import_element91.useState)(false); 22383 const [revisionToRestore, setRevisionToRestore] = (0, import_element91.useState)(null); 22384 const [isRestoring, setIsRestoring] = (0, import_element91.useState)(false); 22385 const [refetchKey, setRefetchKey] = (0, import_element91.useState)(0); 22386 const { createSuccessNotice, createErrorNotice } = (0, import_data11.useDispatch)(import_notices5.store); 22387 const guidelinesId = (0, import_data11.useSelect)( 22388 (select2) => select2(store).getId(), 22389 [] 22390 ); 22391 (0, import_element91.useEffect)(() => { 22392 if (!guidelinesId) { 22393 return; 22394 } 22395 async function loadRevisions() { 22396 setIsLoading(true); 22397 try { 22398 const result = await fetchContentGuidelinesRevisions({ 22399 guidelinesId, 22400 perPage: 100 22401 }); 22402 setRevisions(result.revisions); 22403 } catch { 22404 createErrorNotice( 22405 (0, import_i18n55.__)("Could not load revision history. Please try again."), 22406 { type: "snackbar" } 22407 ); 22408 } finally { 22409 setIsLoading(false); 22410 } 22411 } 22412 loadRevisions(); 22413 }, [guidelinesId, refetchKey, createErrorNotice]); 22414 const authorElements = (0, import_element91.useMemo)(() => { 22415 return [ 22416 ...new Set( 22417 revisions.map( 22418 (r3) => r3._embedded?.author?.[0]?.name ?? (0, import_i18n55.__)("Unknown") 22419 ) 22420 ) 22421 ].map((name) => ({ value: name, label: name })); 22422 }, [revisions]); 22423 const fields2 = (0, import_element91.useMemo)( 22424 () => [ 22425 { 22426 id: "date", 22427 type: "date", 22428 label: (0, import_i18n55.__)("Date"), 22429 getValue: ({ item }) => item.date, 22430 render: ({ item }) => /* @__PURE__ */ React.createElement("time", { dateTime: item.date }, (0, import_date9.dateI18n)( 22431 (0, import_date9.getSettings)().formats.datetimeAbbreviated, 22432 (0, import_date9.getDate)(item.date) 22433 )), 22434 enableSorting: false, 22435 enableHiding: false, 22436 filterBy: { 22437 operators: ["before", "after", "between", "inThePast"] 22438 } 22439 }, 22440 { 22441 id: "author", 22442 label: (0, import_i18n55.__)("User"), 22443 getValue: ({ item }) => item._embedded?.author?.[0]?.name ?? (0, import_i18n55.__)("Unknown"), 22444 render: ({ item }) => /* @__PURE__ */ React.createElement("span", null, item._embedded?.author?.[0]?.name ?? (0, import_i18n55.__)("Unknown")), 22445 enableSorting: false, 22446 enableHiding: false, 22447 enableGlobalSearch: true, 22448 elements: authorElements, 22449 filterBy: { 22450 operators: ["isAny", "isNone"] 22451 } 22452 } 22453 ], 22454 [authorElements] 22455 ); 22456 const { data: displayedRevisions, paginationInfo } = (0, import_element91.useMemo)( 22457 () => filterSortAndPaginate(revisions, view, fields2), 22458 [revisions, view, fields2] 22459 ); 22460 const actions2 = (0, import_element91.useMemo)( 22461 () => [ 22462 { 22463 id: "restore-revision", 22464 label: (0, import_i18n55.__)("Restore"), 22465 callback: (items) => setRevisionToRestore(items[0]) 22466 } 22467 ], 22468 [setRevisionToRestore] 22469 ); 22470 async function handleRestore() { 22471 if (!guidelinesId || !revisionToRestore) { 22472 return; 22473 } 22474 setIsRestoring(true); 22475 try { 22476 await restoreContentGuidelinesRevision( 22477 guidelinesId, 22478 revisionToRestore.id 22479 ); 22480 await fetchContentGuidelines(); 22481 setRevisionToRestore(null); 22482 setRefetchKey((k) => k + 1); 22483 createSuccessNotice((0, import_i18n55.__)("Revision restored."), { 22484 type: "snackbar" 22485 }); 22486 } catch { 22487 createErrorNotice( 22488 (0, import_i18n55.__)("Could not restore revision. Please try again."), 22489 { type: "snackbar" } 22490 ); 22491 } finally { 22492 setIsRestoring(false); 22493 } 22494 } 22495 return /* @__PURE__ */ React.createElement("div", { className: "content-guidelines__revision-history" }, /* @__PURE__ */ React.createElement( 22496 import_components59.Navigator.BackButton, 22497 { 22498 icon: (0, import_i18n55.isRTL)() ? chevron_right_default : chevron_left_default, 22499 className: "content-guidelines__revision-history-back" 22500 }, 22501 (0, import_i18n55.__)("Revision history") 22502 ), /* @__PURE__ */ React.createElement( 22503 import_components59.__experimentalText, 22504 { 22505 size: 13, 22506 weight: 400, 22507 variant: "muted", 22508 className: "content-guidelines__revision-description" 22509 }, 22510 (0, import_i18n55.__)("Use a previous version of your guidelines.") 22511 ), /* @__PURE__ */ React.createElement( 22512 dataviews_default, 22513 { 22514 data: displayedRevisions, 22515 fields: fields2, 22516 view, 22517 onChangeView: setView, 22518 actions: actions2, 22519 isLoading, 22520 paginationInfo, 22521 defaultLayouts: { table: {} }, 22522 getItemId: (item) => String(item.id) 22523 } 22524 ), revisionToRestore && /* @__PURE__ */ React.createElement( 22525 import_components59.Modal, 22526 { 22527 title: (0, import_i18n55.__)("Restore guidelines"), 22528 onRequestClose: () => setRevisionToRestore(null), 22529 size: "medium" 22530 }, 22531 /* @__PURE__ */ React.createElement(import_components59.__experimentalVStack, { spacing: 4 }, /* @__PURE__ */ React.createElement(import_components59.__experimentalText, { size: 13, weight: 400 }, (0, import_i18n55.sprintf)( 22532 /* translators: %s: formatted revision date */ 22533 (0, import_i18n55.__)( 22534 "You are about to restore the guidelines from %s." 22535 ), 22536 (0, import_date9.dateI18n)( 22537 (0, import_date9.getSettings)().formats.datetimeAbbreviated, 22538 (0, import_date9.getDate)(revisionToRestore.date) 22539 ) 22540 )), /* @__PURE__ */ React.createElement(import_components59.__experimentalText, { size: 13, weight: 400 }, (0, import_i18n55.__)( 22541 "You can undo this anytime from revision history." 22542 ))), 22543 /* @__PURE__ */ React.createElement( 22544 import_components59.__experimentalHStack, 22545 { 22546 justify: "flex-end", 22547 className: "content-guidelines__restore-modal-actions" 22548 }, 22549 /* @__PURE__ */ React.createElement( 22550 import_components59.Button, 22551 { 22552 variant: "tertiary", 22553 onClick: () => setRevisionToRestore(null) 22554 }, 22555 (0, import_i18n55.__)("Cancel") 22556 ), 22557 /* @__PURE__ */ React.createElement( 22558 import_components59.Button, 22559 { 22560 variant: "primary", 22561 onClick: handleRestore, 22562 isBusy: isRestoring, 22563 disabled: isRestoring, 22564 __next40pxDefaultSize: true 22565 }, 22566 (0, import_i18n55.__)("Restore") 22567 ) 22568 ) 22569 )); 22570 } 22571 22572 // routes/content-guidelines/stage.tsx 22573 var import_jsx_runtime131 = __toESM(require_jsx_runtime()); 22574 var GUIDELINE_ITEMS = [ 22575 { 22576 title: (0, import_i18n56.__)("Site"), 22577 description: (0, import_i18n56.__)( 22578 "Describe your site's purpose, goals, and primary audience." 22579 ), 22580 slug: "site" 22581 }, 22582 { 22583 title: (0, import_i18n56.__)("Copy"), 22584 description: (0, import_i18n56.__)( 22585 "Set your writing standards for tone, voice, style, and formatting." 22586 ), 22587 slug: "copy" 22588 }, 22589 { 22590 title: (0, import_i18n56.__)("Images"), 22591 description: (0, import_i18n56.__)( 22592 "Outline your style, dimensions, formats, mood and aesthetic preferences." 22593 ), 22594 slug: "images" 22595 }, 22596 { 22597 title: (0, import_i18n56.__)("Blocks"), 22598 description: (0, import_i18n56.__)( 22599 "Create tailored guidelines for specific block types." 22600 ), 22601 slug: "blocks" 22602 }, 22603 { 22604 title: (0, import_i18n56.__)("Additional"), 22605 description: (0, import_i18n56.__)("Add additional guidelines for your team."), 22606 slug: "additional" 22607 } 22608 ]; 22609 function ContentGuidelinesPage() { 22610 const [loading, setLoading] = (0, import_element92.useState)(true); 22611 const [error2, setError] = (0, import_element92.useState)(null); 22612 (0, import_element92.useEffect)(() => { 22613 fetchContentGuidelines().then(() => setError(null)).catch((e2) => setError(e2.message)).finally(() => setLoading(false)); 22614 }, []); 22615 return /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)( 22616 page_default, 22617 { 22618 title: (0, import_i18n56.__)("Guidelines"), 22619 subTitle: (0, import_i18n56.__)( 22620 "Set content standards that guide your team, inform plugins, and help AI tools generate content that matches your site's voice and requirements." 22621 ), 22622 children: [ 22623 error2 && /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("div", { className: "content-guidelines__content", children: /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(import_components60.Notice, { status: "error", isDismissible: false, children: [ 22624 /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("strong", { children: (0, import_i18n56.sprintf)( 22625 /* translators: %s: Error message. */ 22626 (0, import_i18n56.__)("Error loading guidelines: %s"), 22627 error2 22628 ) }), 22629 /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("p", { className: "content-guidelines__error-description", children: (0, import_i18n56.__)( 22630 "Please try again. If the problem persists, contact support." 22631 ) }) 22632 ] }) }), 22633 loading ? /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("div", { className: "content-guidelines__loading", children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_components60.Spinner, {}) }) : !error2 && /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(import_components60.Navigator, { initialPath: "/", children: [ 22634 /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_components60.Navigator.Screen, { path: "/", children: /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(import_components60.__experimentalVStack, { className: "content-guidelines__content", children: [ 22635 /* @__PURE__ */ (0, import_jsx_runtime131.jsx)( 22636 "ul", 22637 { 22638 role: "list", 22639 className: "content-guidelines__list", 22640 children: GUIDELINE_ITEMS.map((item) => { 22641 const contentId = `content-guidelines-$item.slug}`; 22642 const headingId = `content-guidelines-$item.slug}-heading`; 22643 const descriptionId = `content-guidelines-$item.slug}-description`; 22644 return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)( 22645 "li", 22646 { 22647 className: "content-guidelines__list-item", 22648 children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("div", { className: "content-guidelines__accordion-item", children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)( 22649 GuidelineAccordion, 22650 { 22651 title: item.title, 22652 description: item.description, 22653 contentId, 22654 headingId, 22655 descriptionId, 22656 children: item.slug === "blocks" ? /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(BlockGuidelines, {}) : /* @__PURE__ */ (0, import_jsx_runtime131.jsx)( 22657 GuidelineAccordionForm, 22658 { 22659 slug: item.slug, 22660 contentId, 22661 headingId, 22662 descriptionId 22663 } 22664 ) 22665 } 22666 ) }) 22667 }, 22668 item.slug 22669 ); 22670 }) 22671 } 22672 ), 22673 /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(ActionsSection, {}) 22674 ] }) }), 22675 /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(import_components60.Navigator.Screen, { path: "/revision-history", children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(RevisionHistory, {}) }) 22676 ] }) 22677 ] 22678 } 22679 ); 22680 } 22681 var stage = ContentGuidelinesPage; 22682 export { 22683 stage 22684 }; 22685 /*! Bundled license information: 22686 22687 use-sync-external-store/cjs/use-sync-external-store-shim.development.js: 22688 (** 22689 * @license React 22690 * use-sync-external-store-shim.development.js 22691 * 22692 * Copyright (c) Meta Platforms, Inc. and affiliates. 22693 * 22694 * This source code is licensed under the MIT license found in the 22695 * LICENSE file in the root directory of this source tree. 22696 *) 22697 */
title
Description
Body
title
Description
Body
title
Description
Body
title
Body
| Generated : Tue Jun 30 08:20:12 2026 | Cross-referenced by PHPXref |