| @@ -1,4 +1,5 @@ | ||
| 1 | +(function() { | |
| 1 | 2 | "use strict"; |
| 2 | 3 | var wp; |
| 3 | 4 | (wp ||= {}).compose = (() => { |
| 4 | 5 | var __create = Object.create; |
| @@ -31,8 +32,15 @@ | ||
| 31 | 32 | mod |
| 32 | 33 | )); |
| 33 | 34 | var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod); |
| 34 | 35 | |
| 36 | + // package-external:@wordpress/private-apis | |
| 37 | + var require_private_apis = __commonJS({ | |
| 38 | + "package-external:@wordpress/private-apis"(exports, module) { | |
| 39 | + module.exports = window.wp.privateApis; | |
| 40 | + } | |
| 41 | + }); | |
| 42 | + | |
| 35 | 43 | // vendor-external:react/jsx-runtime |
| 36 | 44 | var require_jsx_runtime = __commonJS({ |
| 37 | 45 | "vendor-external:react/jsx-runtime"(exports, module) { |
| 38 | 46 | module.exports = window.ReactJSXRuntime; |
| @@ -66,15 +74,8 @@ | ||
| 66 | 74 | module.exports = window.wp.dom; |
| 67 | 75 | } |
| 68 | 76 | }); |
| 69 | 77 | |
| 70 | - // package-external:@wordpress/keycodes | |
| 71 | - var require_keycodes = __commonJS({ | |
| 72 | - "package-external:@wordpress/keycodes"(exports, module) { | |
| 73 | - module.exports = window.wp.keycodes; | |
| 74 | - } | |
| 75 | - }); | |
| 76 | - | |
| 77 | 78 | // node_modules/mousetrap/mousetrap.js |
| 78 | 79 | var require_mousetrap = __commonJS({ |
| 79 | 80 | "node_modules/mousetrap/mousetrap.js"(exports, module) { |
| 80 | 81 | (function(window2, document2, undefined2) { |
| @@ -528,8 +529,15 @@ | ||
| 528 | 529 | })(typeof window !== "undefined" ? window : null, typeof window !== "undefined" ? document : null); |
| 529 | 530 | } |
| 530 | 531 | }); |
| 531 | 532 | |
| 533 | + // package-external:@wordpress/keycodes | |
| 534 | + var require_keycodes = __commonJS({ | |
| 535 | + "package-external:@wordpress/keycodes"(exports, module) { | |
| 536 | + module.exports = window.wp.keycodes; | |
| 537 | + } | |
| 538 | + }); | |
| 539 | + | |
| 532 | 540 | // package-external:@wordpress/undo-manager |
| 533 | 541 | var require_undo_manager = __commonJS({ |
| 534 | 542 | "package-external:@wordpress/undo-manager"(exports, module) { |
| 535 | 543 | module.exports = window.wp.undoManager; |
| @@ -563,8 +571,9 @@ | ||
| 563 | 571 | debounce: () => debounce, |
| 564 | 572 | ifCondition: () => if_condition_default, |
| 565 | 573 | observableMap: () => observableMap, |
| 566 | 574 | pipe: () => pipe_default, |
| 575 | + privateApis: () => privateApis, | |
| 567 | 576 | pure: () => pure_default, |
| 568 | 577 | throttle: () => throttle, |
| 569 | 578 | useAsyncList: () => use_async_list_default, |
| 570 | 579 | useConstrainedTabbing: () => use_constrained_tabbing_default, |
| @@ -838,8 +847,98 @@ | ||
| 838 | 847 | } |
| 839 | 848 | }; |
| 840 | 849 | } |
| 841 | 850 | |
| 851 | + // packages/compose/build-module/lock-unlock.mjs | |
| 852 | + var import_private_apis = __toESM(require_private_apis(), 1); | |
| 853 | + var { lock, unlock } = (0, import_private_apis.__dangerousOptInToUnstableAPIsOnlyForCoreModules)( | |
| 854 | + "I acknowledge private features are not for use in themes or plugins and doing so will break in the next version of WordPress.", | |
| 855 | + "@wordpress/compose" | |
| 856 | + ); | |
| 857 | + | |
| 858 | + // packages/compose/build-module/utils/subscribe-delegated-listener/index.mjs | |
| 859 | + var registries = /* @__PURE__ */ new WeakMap(); | |
| 860 | + function subscribeDelegatedListener(target, eventType, callback, capture = false) { | |
| 861 | + const ownerDoc = target.ownerDocument; | |
| 862 | + const root = ownerDoc ?? target; | |
| 863 | + const isWindow = ownerDoc === void 0; | |
| 864 | + let perRoot = registries.get(root); | |
| 865 | + if (!perRoot) { | |
| 866 | + perRoot = /* @__PURE__ */ new Map(); | |
| 867 | + registries.set(root, perRoot); | |
| 868 | + } | |
| 869 | + const key = capture ? `${eventType}:capture` : eventType; | |
| 870 | + let perEvent = perRoot.get(key); | |
| 871 | + if (!perEvent) { | |
| 872 | + perEvent = /* @__PURE__ */ new WeakMap(); | |
| 873 | + perRoot.set(key, perEvent); | |
| 874 | + const subscribers = perEvent; | |
| 875 | + root.addEventListener( | |
| 876 | + eventType, | |
| 877 | + (event) => { | |
| 878 | + if (isWindow) { | |
| 879 | + const set2 = subscribers.get(root); | |
| 880 | + if (set2) { | |
| 881 | + for (const cb of set2) { | |
| 882 | + cb(event); | |
| 883 | + } | |
| 884 | + } | |
| 885 | + return; | |
| 886 | + } | |
| 887 | + if (capture) { | |
| 888 | + const path = []; | |
| 889 | + let current = event.target; | |
| 890 | + while (current) { | |
| 891 | + path.push(current); | |
| 892 | + if (current === root) { | |
| 893 | + break; | |
| 894 | + } | |
| 895 | + current = current.parentNode; | |
| 896 | + } | |
| 897 | + for (let i = path.length - 1; i >= 0; i--) { | |
| 898 | + const set2 = subscribers.get(path[i]); | |
| 899 | + if (set2) { | |
| 900 | + for (const cb of set2) { | |
| 901 | + cb(event); | |
| 902 | + } | |
| 903 | + } | |
| 904 | + } | |
| 905 | + } else { | |
| 906 | + let current = event.target; | |
| 907 | + while (current) { | |
| 908 | + const set2 = subscribers.get(current); | |
| 909 | + if (set2) { | |
| 910 | + for (const cb of set2) { | |
| 911 | + cb(event); | |
| 912 | + } | |
| 913 | + } | |
| 914 | + if (current === root) { | |
| 915 | + break; | |
| 916 | + } | |
| 917 | + current = current.parentNode; | |
| 918 | + } | |
| 919 | + } | |
| 920 | + }, | |
| 921 | + capture | |
| 922 | + ); | |
| 923 | + } | |
| 924 | + let set = perEvent.get(target); | |
| 925 | + if (!set) { | |
| 926 | + set = /* @__PURE__ */ new Set(); | |
| 927 | + perEvent.set(target, set); | |
| 928 | + } | |
| 929 | + set.add(callback); | |
| 930 | + return () => { | |
| 931 | + set.delete(callback); | |
| 932 | + }; | |
| 933 | + } | |
| 934 | + | |
| 935 | + // packages/compose/build-module/private-apis.mjs | |
| 936 | + var privateApis = {}; | |
| 937 | + lock(privateApis, { | |
| 938 | + subscribeDelegatedListener | |
| 939 | + }); | |
| 940 | + | |
| 842 | 941 | // packages/compose/build-module/higher-order/pipe.mjs |
| 843 | 942 | var basePipe = (reverse = false) => (...funcs) => (...args) => { |
| 844 | 943 | const functions = funcs.flat(); |
| 845 | 944 | if (reverse) { |
| @@ -874,10 +973,15 @@ | ||
| 874 | 973 | |
| 875 | 974 | // packages/compose/build-module/higher-order/pure/index.mjs |
| 876 | 975 | var import_is_shallow_equal = __toESM(require_is_shallow_equal(), 1); |
| 877 | 976 | var import_element = __toESM(require_element(), 1); |
| 977 | + var import_deprecated = __toESM(require_deprecated(), 1); | |
| 878 | 978 | var import_jsx_runtime2 = __toESM(require_jsx_runtime(), 1); |
| 879 | 979 | var pure = createHigherOrderComponent(function(WrappedComponent) { |
| 980 | + (0, import_deprecated.default)("wp.compose.pure", { | |
| 981 | + since: "7.1", | |
| 982 | + alternative: "Use `memo` or `PureComponent` instead" | |
| 983 | + }); | |
| 880 | 984 | if (WrappedComponent.prototype instanceof import_element.Component) { |
| 881 | 985 | return class extends WrappedComponent { |
| 882 | 986 | shouldComponentUpdate(nextProps, nextState) { |
| 883 | 987 | return !(0, import_is_shallow_equal.isShallowEqual)(nextProps, this.props) || !(0, import_is_shallow_equal.isShallowEqual)(nextState, this.state); |
| @@ -896,9 +1000,9 @@ | ||
| 896 | 1000 | var pure_default = pure; |
| 897 | 1001 | |
| 898 | 1002 | // packages/compose/build-module/higher-order/with-global-events/index.mjs |
| 899 | 1003 | var import_element2 = __toESM(require_element(), 1); |
| 900 | - var import_deprecated = __toESM(require_deprecated(), 1); | |
| 1004 | + var import_deprecated2 = __toESM(require_deprecated(), 1); | |
| 901 | 1005 | |
| 902 | 1006 | // packages/compose/build-module/higher-order/with-global-events/listener.mjs |
| 903 | 1007 | var Listener = class { |
| 904 | 1008 | constructor() { |
| @@ -937,9 +1041,9 @@ | ||
| 937 | 1041 | // packages/compose/build-module/higher-order/with-global-events/index.mjs |
| 938 | 1042 | var import_jsx_runtime3 = __toESM(require_jsx_runtime(), 1); |
| 939 | 1043 | var listener = new listener_default(); |
| 940 | 1044 | function withGlobalEvents(eventTypesToHandlers) { |
| 941 | - (0, import_deprecated.default)("wp.compose.withGlobalEvents", { | |
| 1045 | + (0, import_deprecated2.default)("wp.compose.withGlobalEvents", { | |
| 942 | 1046 | since: "5.7", |
| 943 | 1047 | alternative: "useEffect" |
| 944 | 1048 | }); |
| 945 | 1049 | return createHigherOrderComponent((WrappedComponent) => { |
| @@ -1053,9 +1157,9 @@ | ||
| 1053 | 1157 | ); |
| 1054 | 1158 | } |
| 1055 | 1159 | render() { |
| 1056 | 1160 | return ( |
| 1057 | - // @ts-ignore | |
| 1161 | + // @ts-expect-error `LibraryManagedAttributes` cannot see the injected timeout props. | |
| 1058 | 1162 | /* @__PURE__ */ (0, import_jsx_runtime5.jsx)( |
| 1059 | 1163 | OriginalComponent, |
| 1060 | 1164 | { |
| 1061 | 1165 | ...this.props, |
| @@ -1072,12 +1176,12 @@ | ||
| 1072 | 1176 | var with_safe_timeout_default = withSafeTimeout; |
| 1073 | 1177 | |
| 1074 | 1178 | // packages/compose/build-module/higher-order/with-state/index.mjs |
| 1075 | 1179 | var import_element5 = __toESM(require_element(), 1); |
| 1076 | - var import_deprecated2 = __toESM(require_deprecated(), 1); | |
| 1180 | + var import_deprecated3 = __toESM(require_deprecated(), 1); | |
| 1077 | 1181 | var import_jsx_runtime6 = __toESM(require_jsx_runtime(), 1); |
| 1078 | 1182 | function withState(initialState = {}) { |
| 1079 | - (0, import_deprecated2.default)("wp.compose.withState", { | |
| 1183 | + (0, import_deprecated3.default)("wp.compose.withState", { | |
| 1080 | 1184 | since: "5.8", |
| 1081 | 1185 | alternative: "wp.element.useState" |
| 1082 | 1186 | }); |
| 1083 | 1187 | return createHigherOrderComponent((OriginalComponent) => { |
| @@ -1125,16 +1229,10 @@ | ||
| 1125 | 1229 | if (key !== "Tab") { |
| 1126 | 1230 | return; |
| 1127 | 1231 | } |
| 1128 | 1232 | const action = shiftKey ? "findPrevious" : "findNext"; |
| 1129 | - const nextElement = import_dom.focus.tabbable[action]( | |
| 1130 | - /** @type {HTMLElement} */ | |
| 1131 | - target | |
| 1132 | - ) || null; | |
| 1133 | - if ( | |
| 1134 | - /** @type {HTMLElement} */ | |
| 1135 | - target.contains(nextElement) | |
| 1136 | - ) { | |
| 1233 | + const nextElement = import_dom.focus.tabbable[action](target) || null; | |
| 1234 | + if (target.contains(nextElement)) { | |
| 1137 | 1235 | event.preventDefault(); |
| 1138 | 1236 | nextElement?.focus(); |
| 1139 | 1237 | return; |
| 1140 | 1238 | } |
| @@ -1158,9 +1256,9 @@ | ||
| 1158 | 1256 | var use_constrained_tabbing_default = useConstrainedTabbing; |
| 1159 | 1257 | |
| 1160 | 1258 | // packages/compose/build-module/hooks/use-copy-on-click/index.mjs |
| 1161 | 1259 | var import_element8 = __toESM(require_element(), 1); |
| 1162 | - var import_deprecated3 = __toESM(require_deprecated(), 1); | |
| 1260 | + var import_deprecated4 = __toESM(require_deprecated(), 1); | |
| 1163 | 1261 | |
| 1164 | 1262 | // packages/compose/build-module/hooks/use-copy-to-clipboard/index.mjs |
| 1165 | 1263 | var import_element7 = __toESM(require_element(), 1); |
| 1166 | 1264 | async function copyToClipboard(text, trigger) { |
| @@ -1191,13 +1289,12 @@ | ||
| 1191 | 1289 | } catch { |
| 1192 | 1290 | return false; |
| 1193 | 1291 | } |
| 1194 | 1292 | } |
| 1195 | - function clearSelection(trigger) { | |
| 1293 | + function restoreFocus(trigger) { | |
| 1196 | 1294 | if ("focus" in trigger && typeof trigger.focus === "function") { |
| 1197 | 1295 | trigger.focus(); |
| 1198 | 1296 | } |
| 1199 | - trigger.ownerDocument?.defaultView?.getSelection()?.removeAllRanges(); | |
| 1200 | 1297 | } |
| 1201 | 1298 | function useUpdatedRef(value) { |
| 1202 | 1299 | const ref = (0, import_element7.useRef)(value); |
| 1203 | 1300 | (0, import_element7.useLayoutEffect)(() => { |
| @@ -1212,13 +1309,12 @@ | ||
| 1212 | 1309 | let isActive = true; |
| 1213 | 1310 | const handleClick = async () => { |
| 1214 | 1311 | const textToCopy = typeof textRef.current === "function" ? textRef.current() : textRef.current || ""; |
| 1215 | 1312 | const success = await copyToClipboard(textToCopy, node); |
| 1216 | - if (!isActive) { | |
| 1217 | - return; | |
| 1218 | - } | |
| 1219 | 1313 | if (success) { |
| 1220 | - clearSelection(node); | |
| 1314 | + if (isActive) { | |
| 1315 | + restoreFocus(node); | |
| 1316 | + } | |
| 1221 | 1317 | if (onSuccessRef.current) { |
| 1222 | 1318 | onSuccessRef.current(); |
| 1223 | 1319 | } |
| 1224 | 1320 | } |
| @@ -1232,9 +1328,9 @@ | ||
| 1232 | 1328 | } |
| 1233 | 1329 | |
| 1234 | 1330 | // packages/compose/build-module/hooks/use-copy-on-click/index.mjs |
| 1235 | 1331 | function useCopyOnClick(ref, text, timeout = 4e3) { |
| 1236 | - (0, import_deprecated3.default)("wp.compose.useCopyOnClick", { | |
| 1332 | + (0, import_deprecated4.default)("wp.compose.useCopyOnClick", { | |
| 1237 | 1333 | since: "5.8", |
| 1238 | 1334 | alternative: "wp.compose.useCopyToClipboard" |
| 1239 | 1335 | }); |
| 1240 | 1336 | const [hasCopied, setHasCopied] = (0, import_element8.useState)(false); |
| @@ -1267,9 +1363,9 @@ | ||
| 1267 | 1363 | if (!isActive) { |
| 1268 | 1364 | return; |
| 1269 | 1365 | } |
| 1270 | 1366 | if (success) { |
| 1271 | - clearSelection(trigger); | |
| 1367 | + restoreFocus(trigger); | |
| 1272 | 1368 | if (timeout) { |
| 1273 | 1369 | setHasCopied(true); |
| 1274 | 1370 | clearTimeout(timeoutId); |
| 1275 | 1371 | timeoutId = setTimeout( |
| @@ -1294,9 +1390,8 @@ | ||
| 1294 | 1390 | } |
| 1295 | 1391 | |
| 1296 | 1392 | // packages/compose/build-module/hooks/use-dialog/index.mjs |
| 1297 | 1393 | var import_element13 = __toESM(require_element(), 1); |
| 1298 | - var import_keycodes = __toESM(require_keycodes(), 1); | |
| 1299 | 1394 | |
| 1300 | 1395 | // packages/compose/build-module/hooks/use-focus-on-mount/index.mjs |
| 1301 | 1396 | var import_dom2 = __toESM(require_dom(), 1); |
| 1302 | 1397 | var import_element9 = __toESM(require_element(), 1); |
| @@ -1349,10 +1444,12 @@ | ||
| 1349 | 1444 | var import_element10 = __toESM(require_element(), 1); |
| 1350 | 1445 | var origin = null; |
| 1351 | 1446 | function useFocusReturn(onFocusReturn) { |
| 1352 | 1447 | const ref = (0, import_element10.useRef)(null); |
| 1353 | - const focusedBeforeMount = (0, import_element10.useRef)(null); | |
| 1354 | - const onFocusReturnRef = (0, import_element10.useRef)(onFocusReturn); | |
| 1448 | + const focusedBeforeMountRef = (0, import_element10.useRef)(null); | |
| 1449 | + const onFocusReturnRef = (0, import_element10.useRef)( | |
| 1450 | + onFocusReturn | |
| 1451 | + ); | |
| 1355 | 1452 | (0, import_element10.useEffect)(() => { |
| 1356 | 1453 | onFocusReturnRef.current = onFocusReturn; |
| 1357 | 1454 | }, [onFocusReturn]); |
| 1358 | 1455 | return (0, import_element10.useCallback)((node) => { |
| @@ -1357,25 +1454,26 @@ | ||
| 1357 | 1454 | }, [onFocusReturn]); |
| 1358 | 1455 | return (0, import_element10.useCallback)((node) => { |
| 1359 | 1456 | if (node) { |
| 1360 | 1457 | ref.current = node; |
| 1361 | - if (focusedBeforeMount.current) { | |
| 1458 | + if (focusedBeforeMountRef.current) { | |
| 1362 | 1459 | return; |
| 1363 | 1460 | } |
| 1364 | 1461 | const activeDocument = node.ownerDocument.activeElement instanceof window.HTMLIFrameElement ? node.ownerDocument.activeElement.contentDocument : node.ownerDocument; |
| 1365 | - focusedBeforeMount.current = activeDocument?.activeElement ?? null; | |
| 1366 | - } else if (focusedBeforeMount.current) { | |
| 1462 | + focusedBeforeMountRef.current = activeDocument?.activeElement ?? null; | |
| 1463 | + } else if (focusedBeforeMountRef.current) { | |
| 1367 | 1464 | const isFocused = ref.current?.contains( |
| 1368 | - ref.current?.ownerDocument.activeElement | |
| 1465 | + ref.current?.ownerDocument.activeElement ?? null | |
| 1369 | 1466 | ); |
| 1370 | 1467 | if (ref.current?.isConnected && !isFocused) { |
| 1371 | - origin ??= focusedBeforeMount.current; | |
| 1468 | + origin ??= focusedBeforeMountRef.current; | |
| 1372 | 1469 | return; |
| 1373 | 1470 | } |
| 1374 | 1471 | if (onFocusReturnRef.current) { |
| 1375 | 1472 | onFocusReturnRef.current(); |
| 1376 | 1473 | } else { |
| 1377 | - (!focusedBeforeMount.current.isConnected ? origin : focusedBeforeMount.current)?.focus(); | |
| 1474 | + const elementToFocus = !focusedBeforeMountRef.current.isConnected ? origin : focusedBeforeMountRef.current; | |
| 1475 | + elementToFocus?.focus(); | |
| 1378 | 1476 | } |
| 1379 | 1477 | origin = null; |
| 1380 | 1478 | } |
| 1381 | 1479 | }, []); |
| @@ -1458,42 +1556,56 @@ | ||
| 1458 | 1556 | // packages/compose/build-module/hooks/use-merge-refs/index.mjs |
| 1459 | 1557 | var import_element12 = __toESM(require_element(), 1); |
| 1460 | 1558 | function assignRef(ref, value) { |
| 1461 | 1559 | if (typeof ref === "function") { |
| 1462 | - ref(value); | |
| 1560 | + const returned = ref(value); | |
| 1561 | + return typeof returned === "function" ? returned : void 0; | |
| 1463 | 1562 | } else if (ref && ref.hasOwnProperty("current")) { |
| 1464 | 1563 | ref.current = value; |
| 1465 | 1564 | } |
| 1565 | + return void 0; | |
| 1466 | 1566 | } |
| 1567 | + function detachRef(ref, index, cleanups) { | |
| 1568 | + const cleanup = cleanups[index]; | |
| 1569 | + if (cleanup) { | |
| 1570 | + cleanups[index] = void 0; | |
| 1571 | + cleanup(); | |
| 1572 | + } else { | |
| 1573 | + assignRef(ref, null); | |
| 1574 | + } | |
| 1575 | + } | |
| 1467 | 1576 | function useMergeRefs(refs) { |
| 1468 | - const element = (0, import_element12.useRef)(null); | |
| 1469 | - const isAttachedRef = (0, import_element12.useRef)(false); | |
| 1470 | - const didElementChangeRef = (0, import_element12.useRef)(false); | |
| 1471 | - const previousRefsRef = (0, import_element12.useRef)([]); | |
| 1577 | + const elementRef = (0, import_element12.useRef)(null); | |
| 1578 | + const attachedRefsRef = (0, import_element12.useRef)([]); | |
| 1472 | 1579 | const currentRefsRef = (0, import_element12.useRef)(refs); |
| 1580 | + const cleanupsRef = (0, import_element12.useRef)([]); | |
| 1473 | 1581 | currentRefsRef.current = refs; |
| 1474 | 1582 | (0, import_element12.useLayoutEffect)(() => { |
| 1475 | - if (didElementChangeRef.current === false && isAttachedRef.current === true) { | |
| 1476 | - refs.forEach((ref, index) => { | |
| 1477 | - const previousRef = previousRefsRef.current[index]; | |
| 1478 | - if (ref !== previousRef) { | |
| 1479 | - assignRef(previousRef, null); | |
| 1480 | - assignRef(ref, element.current); | |
| 1481 | - } | |
| 1482 | - }); | |
| 1583 | + const element = elementRef.current; | |
| 1584 | + if (element === null) { | |
| 1585 | + return; | |
| 1483 | 1586 | } |
| 1484 | - previousRefsRef.current = refs; | |
| 1587 | + refs.forEach((ref, index) => { | |
| 1588 | + const attachedRef = attachedRefsRef.current[index]; | |
| 1589 | + if (ref !== attachedRef) { | |
| 1590 | + detachRef(attachedRef, index, cleanupsRef.current); | |
| 1591 | + cleanupsRef.current[index] = assignRef(ref, element); | |
| 1592 | + } | |
| 1593 | + }); | |
| 1594 | + attachedRefsRef.current = refs; | |
| 1485 | 1595 | }, refs); |
| 1486 | - (0, import_element12.useLayoutEffect)(() => { | |
| 1487 | - didElementChangeRef.current = false; | |
| 1488 | - }); | |
| 1489 | 1596 | return (0, import_element12.useCallback)((value) => { |
| 1490 | - assignRef(element, value); | |
| 1491 | - didElementChangeRef.current = true; | |
| 1492 | - isAttachedRef.current = value !== null; | |
| 1493 | - const refsToAssign = value ? currentRefsRef.current : previousRefsRef.current; | |
| 1494 | - for (const ref of refsToAssign) { | |
| 1495 | - assignRef(ref, value); | |
| 1597 | + elementRef.current = value; | |
| 1598 | + if (value === null) { | |
| 1599 | + attachedRefsRef.current.forEach((ref, index) => { | |
| 1600 | + detachRef(ref, index, cleanupsRef.current); | |
| 1601 | + }); | |
| 1602 | + attachedRefsRef.current = []; | |
| 1603 | + } else { | |
| 1604 | + attachedRefsRef.current = currentRefsRef.current; | |
| 1605 | + attachedRefsRef.current.forEach((ref, index) => { | |
| 1606 | + cleanupsRef.current[index] = assignRef(ref, value); | |
| 1607 | + }); | |
| 1496 | 1608 | } |
| 1497 | 1609 | }, []); |
| 1498 | 1610 | } |
| 1499 | 1611 | |
| @@ -1513,29 +1625,25 @@ | ||
| 1513 | 1625 | } else if (currentOptions.current?.onClose) { |
| 1514 | 1626 | currentOptions.current.onClose(); |
| 1515 | 1627 | } |
| 1516 | 1628 | }); |
| 1517 | - const closeOnEscapeRef = (0, import_element13.useCallback)((node) => { | |
| 1518 | - if (!node) { | |
| 1519 | - return; | |
| 1629 | + const onKeyDown = (0, import_element13.useCallback)((event) => { | |
| 1630 | + currentOptions.current?.onKeyDown?.(event); | |
| 1631 | + if (event.key === "Escape" && !event.defaultPrevented && currentOptions.current?.onClose) { | |
| 1632 | + event.preventDefault(); | |
| 1633 | + event.stopPropagation(); | |
| 1634 | + currentOptions.current.onClose(); | |
| 1520 | 1635 | } |
| 1521 | - node.addEventListener("keydown", (event) => { | |
| 1522 | - if (event.keyCode === import_keycodes.ESCAPE && !event.defaultPrevented && currentOptions.current?.onClose) { | |
| 1523 | - event.preventDefault(); | |
| 1524 | - event.stopPropagation(); | |
| 1525 | - currentOptions.current.onClose(); | |
| 1526 | - } | |
| 1527 | - }); | |
| 1528 | 1636 | }, []); |
| 1529 | 1637 | return [ |
| 1530 | 1638 | useMergeRefs([ |
| 1531 | 1639 | constrainTabbing ? constrainedTabbingRef : null, |
| 1532 | 1640 | options.focusOnMount !== false ? focusReturnRef : null, |
| 1533 | - options.focusOnMount !== false ? focusOnMountRef : null, | |
| 1534 | - closeOnEscapeRef | |
| 1641 | + options.focusOnMount !== false ? focusOnMountRef : null | |
| 1535 | 1642 | ]), |
| 1536 | 1643 | { |
| 1537 | 1644 | ...focusOutsideProps, |
| 1645 | + onKeyDown, | |
| 1538 | 1646 | tabIndex: -1 |
| 1539 | 1647 | } |
| 1540 | 1648 | ]; |
| 1541 | 1649 | } |
| @@ -1613,9 +1721,13 @@ | ||
| 1613 | 1721 | var useIsomorphicLayoutEffect = typeof window !== "undefined" ? import_element15.useLayoutEffect : import_element15.useEffect; |
| 1614 | 1722 | var use_isomorphic_layout_effect_default = useIsomorphicLayoutEffect; |
| 1615 | 1723 | |
| 1616 | 1724 | // packages/compose/build-module/hooks/use-dragging/index.mjs |
| 1617 | - function useDragging({ onDragStart, onDragMove, onDragEnd }) { | |
| 1725 | + function useDragging({ | |
| 1726 | + onDragStart, | |
| 1727 | + onDragMove, | |
| 1728 | + onDragEnd | |
| 1729 | + }) { | |
| 1618 | 1730 | const [isDragging, setIsDragging] = (0, import_element16.useState)(false); |
| 1619 | 1731 | const eventsRef = (0, import_element16.useRef)({ |
| 1620 | 1732 | onDragStart, |
| 1621 | 1733 | onDragMove, |
| @@ -1625,28 +1737,29 @@ | ||
| 1625 | 1737 | eventsRef.current.onDragStart = onDragStart; |
| 1626 | 1738 | eventsRef.current.onDragMove = onDragMove; |
| 1627 | 1739 | eventsRef.current.onDragEnd = onDragEnd; |
| 1628 | 1740 | }, [onDragStart, onDragMove, onDragEnd]); |
| 1629 | - const onMouseMove = (0, import_element16.useCallback)( | |
| 1630 | - (event) => eventsRef.current.onDragMove && eventsRef.current.onDragMove(event), | |
| 1631 | - [] | |
| 1741 | + const onMouseMove = (0, import_element16.useCallback)((event) => { | |
| 1742 | + eventsRef.current.onDragMove?.(event); | |
| 1743 | + }, []); | |
| 1744 | + const endDrag = (0, import_element16.useCallback)( | |
| 1745 | + function endDrag2(event) { | |
| 1746 | + eventsRef.current.onDragEnd?.(event); | |
| 1747 | + document.removeEventListener("mousemove", onMouseMove); | |
| 1748 | + document.removeEventListener("mouseup", endDrag2); | |
| 1749 | + setIsDragging(false); | |
| 1750 | + }, | |
| 1751 | + [onMouseMove] | |
| 1632 | 1752 | ); |
| 1633 | - const endDrag = (0, import_element16.useCallback)((event) => { | |
| 1634 | - if (eventsRef.current.onDragEnd) { | |
| 1635 | - eventsRef.current.onDragEnd(event); | |
| 1636 | - } | |
| 1637 | - document.removeEventListener("mousemove", onMouseMove); | |
| 1638 | - document.removeEventListener("mouseup", endDrag); | |
| 1639 | - setIsDragging(false); | |
| 1640 | - }, []); | |
| 1641 | - const startDrag = (0, import_element16.useCallback)((event) => { | |
| 1642 | - if (eventsRef.current.onDragStart) { | |
| 1643 | - eventsRef.current.onDragStart(event); | |
| 1644 | - } | |
| 1645 | - document.addEventListener("mousemove", onMouseMove); | |
| 1646 | - document.addEventListener("mouseup", endDrag); | |
| 1647 | - setIsDragging(true); | |
| 1648 | - }, []); | |
| 1753 | + const startDrag = (0, import_element16.useCallback)( | |
| 1754 | + (event) => { | |
| 1755 | + eventsRef.current.onDragStart?.(event); | |
| 1756 | + document.addEventListener("mousemove", onMouseMove); | |
| 1757 | + document.addEventListener("mouseup", endDrag); | |
| 1758 | + setIsDragging(true); | |
| 1759 | + }, | |
| 1760 | + [onMouseMove, endDrag] | |
| 1761 | + ); | |
| 1649 | 1762 | (0, import_element16.useEffect)(() => { |
| 1650 | 1763 | return () => { |
| 1651 | 1764 | if (isDragging) { |
| 1652 | 1765 | document.removeEventListener("mousemove", onMouseMove); |
| @@ -1652,9 +1765,9 @@ | ||
| 1652 | 1765 | document.removeEventListener("mousemove", onMouseMove); |
| 1653 | 1766 | document.removeEventListener("mouseup", endDrag); |
| 1654 | 1767 | } |
| 1655 | 1768 | }; |
| 1656 | - }, [isDragging]); | |
| 1769 | + }, [isDragging, onMouseMove, endDrag]); | |
| 1657 | 1770 | return { |
| 1658 | 1771 | startDrag, |
| 1659 | 1772 | endDrag, |
| 1660 | 1773 | isDragging |
| @@ -1696,14 +1809,13 @@ | ||
| 1696 | 1809 | })(typeof Mousetrap !== "undefined" ? Mousetrap : void 0); |
| 1697 | 1810 | |
| 1698 | 1811 | // packages/compose/build-module/hooks/use-keyboard-shortcut/index.mjs |
| 1699 | 1812 | var import_element17 = __toESM(require_element(), 1); |
| 1700 | - var import_keycodes2 = __toESM(require_keycodes(), 1); | |
| 1813 | + var import_keycodes = __toESM(require_keycodes(), 1); | |
| 1701 | 1814 | function useKeyboardShortcut(shortcuts, callback, { |
| 1702 | 1815 | bindGlobal = false, |
| 1703 | 1816 | eventName = "keydown", |
| 1704 | 1817 | isDisabled = false, |
| 1705 | - // This is important for performance considerations. | |
| 1706 | 1818 | target |
| 1707 | 1819 | } = {}) { |
| 1708 | 1820 | const currentCallbackRef = (0, import_element17.useRef)(callback); |
| 1709 | 1821 | (0, import_element17.useEffect)(() => { |
| @@ -1717,10 +1829,8 @@ | ||
| 1717 | 1829 | target && target.current ? target.current : ( |
| 1718 | 1830 | // We were passing `document` here previously, so to successfully cast it to Element we must cast it first to `unknown`. |
| 1719 | 1831 | // Not sure if this is a mistake but it was the behavior previous to the addition of types so we're just doing what's |
| 1720 | 1832 | // necessary to maintain the existing behavior. |
| 1721 | - /** @type {Element} */ | |
| 1722 | - /** @type {unknown} */ | |
| 1723 | 1833 | document |
| 1724 | 1834 | ) |
| 1725 | 1835 | ); |
| 1726 | 1836 | const shortcutsArray = Array.isArray(shortcuts) ? shortcuts : [shortcuts]; |
| @@ -1730,9 +1840,9 @@ | ||
| 1730 | 1840 | keys.filter((value) => value.length > 1) |
| 1731 | 1841 | ); |
| 1732 | 1842 | const hasAlt = modifiers.has("alt"); |
| 1733 | 1843 | const hasShift = modifiers.has("shift"); |
| 1734 | - if ((0, import_keycodes2.isAppleOS)() && (modifiers.size === 1 && hasAlt || modifiers.size === 2 && hasAlt && hasShift)) { | |
| 1844 | + if ((0, import_keycodes.isAppleOS)() && (modifiers.size === 1 && hasAlt || modifiers.size === 2 && hasAlt && hasShift)) { | |
| 1735 | 1845 | throw new Error( |
| 1736 | 1846 | `Cannot bind ${shortcut}. Alt and Shift+Alt modifiers are reserved for character input.` |
| 1737 | 1847 | ); |
| 1738 | 1848 | } |
| @@ -1752,49 +1862,55 @@ | ||
| 1752 | 1862 | |
| 1753 | 1863 | // packages/compose/build-module/hooks/use-media-query/index.mjs |
| 1754 | 1864 | var import_element18 = __toESM(require_element(), 1); |
| 1755 | 1865 | var perWindowCache = /* @__PURE__ */ new WeakMap(); |
| 1756 | - function getMediaQueryList(view, query) { | |
| 1757 | - if (!query) { | |
| 1758 | - return null; | |
| 1866 | + var EMPTY_SUBSCRIBER = { | |
| 1867 | + subscribe: () => () => { | |
| 1868 | + }, | |
| 1869 | + getValue: () => false | |
| 1870 | + }; | |
| 1871 | + function getMQLSubscriber(view, query) { | |
| 1872 | + if (!view || !query || typeof view.matchMedia !== "function") { | |
| 1873 | + return EMPTY_SUBSCRIBER; | |
| 1759 | 1874 | } |
| 1760 | - const matchMediaCache = perWindowCache.get(view) ?? /* @__PURE__ */ new Map(); | |
| 1761 | - if (!perWindowCache.has(view)) { | |
| 1762 | - perWindowCache.set(view, matchMediaCache); | |
| 1875 | + let queryCache = perWindowCache.get(view); | |
| 1876 | + if (!queryCache) { | |
| 1877 | + queryCache = /* @__PURE__ */ new Map(); | |
| 1878 | + perWindowCache.set(view, queryCache); | |
| 1763 | 1879 | } |
| 1764 | - let match = matchMediaCache.get(query); | |
| 1765 | - if (match) { | |
| 1766 | - return match; | |
| 1880 | + const cached = queryCache.get(query); | |
| 1881 | + if (cached) { | |
| 1882 | + return cached; | |
| 1767 | 1883 | } |
| 1768 | - if (typeof view?.matchMedia === "function") { | |
| 1769 | - match = view.matchMedia(query); | |
| 1770 | - matchMediaCache.set(query, match); | |
| 1771 | - return match; | |
| 1772 | - } | |
| 1773 | - return null; | |
| 1884 | + const mediaQueryList = view.matchMedia(query); | |
| 1885 | + const listeners = /* @__PURE__ */ new Set(); | |
| 1886 | + const notify = () => { | |
| 1887 | + for (const listener2 of listeners) { | |
| 1888 | + listener2(); | |
| 1889 | + } | |
| 1890 | + }; | |
| 1891 | + const subscriber = { | |
| 1892 | + subscribe(onStoreChange) { | |
| 1893 | + if (listeners.size === 0) { | |
| 1894 | + mediaQueryList.addEventListener?.("change", notify); | |
| 1895 | + } | |
| 1896 | + listeners.add(onStoreChange); | |
| 1897 | + return () => { | |
| 1898 | + listeners.delete(onStoreChange); | |
| 1899 | + if (listeners.size === 0) { | |
| 1900 | + mediaQueryList.removeEventListener?.("change", notify); | |
| 1901 | + } | |
| 1902 | + }; | |
| 1903 | + }, | |
| 1904 | + getValue() { | |
| 1905 | + return mediaQueryList.matches; | |
| 1906 | + } | |
| 1907 | + }; | |
| 1908 | + queryCache.set(query, subscriber); | |
| 1909 | + return subscriber; | |
| 1774 | 1910 | } |
| 1775 | - function useMediaQuery(query, view = window) { | |
| 1776 | - const source = (0, import_element18.useMemo)(() => { | |
| 1777 | - const mediaQueryList = getMediaQueryList(view, query); | |
| 1778 | - return { | |
| 1779 | - subscribe(onStoreChange) { | |
| 1780 | - if (!mediaQueryList) { | |
| 1781 | - return () => { | |
| 1782 | - }; | |
| 1783 | - } | |
| 1784 | - mediaQueryList.addEventListener?.("change", onStoreChange); | |
| 1785 | - return () => { | |
| 1786 | - mediaQueryList.removeEventListener?.( | |
| 1787 | - "change", | |
| 1788 | - onStoreChange | |
| 1789 | - ); | |
| 1790 | - }; | |
| 1791 | - }, | |
| 1792 | - getValue() { | |
| 1793 | - return mediaQueryList?.matches ?? false; | |
| 1794 | - } | |
| 1795 | - }; | |
| 1796 | - }, [view, query]); | |
| 1911 | + function useMediaQuery(query, view = typeof window !== "undefined" ? window : void 0) { | |
| 1912 | + const source = getMQLSubscriber(view, query); | |
| 1797 | 1913 | return (0, import_element18.useSyncExternalStore)( |
| 1798 | 1914 | source.subscribe, |
| 1799 | 1915 | source.getValue, |
| 1800 | 1916 | () => false |
| @@ -1911,16 +2027,13 @@ | ||
| 1911 | 2027 | var OPERATOR_EVALUATORS = { |
| 1912 | 2028 | ">=": (breakpointValue, width) => width >= breakpointValue, |
| 1913 | 2029 | "<": (breakpointValue, width) => width < breakpointValue |
| 1914 | 2030 | }; |
| 1915 | - var ViewportMatchWidthContext = (0, import_element21.createContext)( | |
| 1916 | - /** @type {null | number} */ | |
| 1917 | - null | |
| 1918 | - ); | |
| 2031 | + var ViewportMatchWidthContext = (0, import_element21.createContext)(null); | |
| 1919 | 2032 | ViewportMatchWidthContext.displayName = "ViewportMatchWidthContext"; |
| 1920 | - var useViewportMatch = (breakpoint, operator = ">=", view = window) => { | |
| 2033 | + var useViewportMatch = (breakpoint, operator = ">=", view = typeof window !== "undefined" ? window : void 0) => { | |
| 1921 | 2034 | const simulatedWidth = (0, import_element21.useContext)(ViewportMatchWidthContext); |
| 1922 | - const mediaQuery = !simulatedWidth && `(${CONDITIONS[operator]}: ${BREAKPOINTS[breakpoint]}px)`; | |
| 2035 | + const mediaQuery = !simulatedWidth && `screen and (${CONDITIONS[operator]}: ${BREAKPOINTS[breakpoint]}px)`; | |
| 1923 | 2036 | const mediaQueryResult = useMediaQuery(mediaQuery || void 0, view); |
| 1924 | 2037 | if (simulatedWidth) { |
| 1925 | 2038 | return OPERATOR_EVALUATORS[operator]( |
| 1926 | 2039 | BREAKPOINTS[breakpoint], |
| @@ -1937,8 +2050,17 @@ | ||
| 1937 | 2050 | function useResizeObserver(callback, resizeObserverOptions = {}) { |
| 1938 | 2051 | const callbackEvent = useEvent(callback); |
| 1939 | 2052 | const observedElementRef = (0, import_element22.useRef)(null); |
| 1940 | 2053 | const resizeObserverRef = (0, import_element22.useRef)(void 0); |
| 2054 | + (0, import_element22.useEffect)(() => { | |
| 2055 | + if (observedElementRef.current) { | |
| 2056 | + resizeObserverRef.current?.observe( | |
| 2057 | + observedElementRef.current, | |
| 2058 | + resizeObserverOptions | |
| 2059 | + ); | |
| 2060 | + } | |
| 2061 | + return () => resizeObserverRef.current?.disconnect(); | |
| 2062 | + }, []); | |
| 1941 | 2063 | return useEvent((element) => { |
| 1942 | 2064 | if (element === observedElementRef.current) { |
| 1943 | 2065 | return; |
| 1944 | 2066 | } |
| @@ -2063,20 +2185,13 @@ | ||
| 2063 | 2185 | // packages/compose/build-module/hooks/use-warn-on-change/index.mjs |
| 2064 | 2186 | function useWarnOnChange(object, prefix = "Change detection") { |
| 2065 | 2187 | const previousValues = usePrevious(object); |
| 2066 | 2188 | Object.entries(previousValues ?? []).forEach(([key, value]) => { |
| 2067 | - if (value !== object[ | |
| 2068 | - /** @type {keyof typeof object} */ | |
| 2069 | - key | |
| 2070 | - ]) { | |
| 2189 | + if (value !== object[key]) { | |
| 2071 | 2190 | console.warn( |
| 2072 | 2191 | `${prefix}: ${key} key changed:`, |
| 2073 | 2192 | value, |
| 2074 | - object[ | |
| 2075 | - /** @type {keyof typeof object} */ | |
| 2076 | - key | |
| 2077 | - ] | |
| 2078 | - /* eslint-enable jsdoc/check-types */ | |
| 2193 | + object[key] | |
| 2079 | 2194 | ); |
| 2080 | 2195 | } |
| 2081 | 2196 | }); |
| 2082 | 2197 | } |
| @@ -2198,12 +2313,9 @@ | ||
| 2198 | 2313 | } |
| 2199 | 2314 | } |
| 2200 | 2315 | function onDragEnter(event) { |
| 2201 | 2316 | event.preventDefault(); |
| 2202 | - if (element.contains( | |
| 2203 | - /** @type {Node} */ | |
| 2204 | - event.relatedTarget | |
| 2205 | - )) { | |
| 2317 | + if (element.contains(event.relatedTarget)) { | |
| 2206 | 2318 | return; |
| 2207 | 2319 | } |
| 2208 | 2320 | if (_onDragEnter) { |
| 2209 | 2321 | onDragEnterEvent(event); |
| @@ -2295,87 +2407,102 @@ | ||
| 2295 | 2407 | |
| 2296 | 2408 | // packages/compose/build-module/hooks/use-fixed-window-list/index.mjs |
| 2297 | 2409 | var import_element28 = __toESM(require_element(), 1); |
| 2298 | 2410 | var import_dom3 = __toESM(require_dom(), 1); |
| 2299 | - var import_keycodes3 = __toESM(require_keycodes(), 1); | |
| 2411 | + var import_keycodes2 = __toESM(require_keycodes(), 1); | |
| 2300 | 2412 | var DEFAULT_INIT_WINDOW_SIZE = 30; |
| 2301 | 2413 | function useFixedWindowList(elementRef, itemHeight, totalItems, options) { |
| 2302 | - const initWindowSize = options?.initWindowSize ?? DEFAULT_INIT_WINDOW_SIZE; | |
| 2303 | - const useWindowing = options?.useWindowing ?? true; | |
| 2304 | - const [fixedListWindow, setFixedListWindow] = (0, import_element28.useState)({ | |
| 2305 | - visibleItems: initWindowSize, | |
| 2306 | - start: 0, | |
| 2307 | - end: initWindowSize, | |
| 2308 | - itemInView: (index) => { | |
| 2309 | - return index >= 0 && index <= initWindowSize; | |
| 2414 | + const { | |
| 2415 | + windowOverscan, | |
| 2416 | + useWindowing = true, | |
| 2417 | + initWindowSize = DEFAULT_INIT_WINDOW_SIZE, | |
| 2418 | + expandedState | |
| 2419 | + } = options ?? {}; | |
| 2420 | + const [fixedListWindow, setFixedListWindow] = (0, import_element28.useState)( | |
| 2421 | + { | |
| 2422 | + visibleItems: initWindowSize, | |
| 2423 | + start: 0, | |
| 2424 | + end: initWindowSize, | |
| 2425 | + itemInView: (index) => { | |
| 2426 | + return index >= 0 && index <= initWindowSize; | |
| 2427 | + } | |
| 2310 | 2428 | } |
| 2429 | + ); | |
| 2430 | + const visibleItemsRef = (0, import_element28.useRef)(initWindowSize); | |
| 2431 | + const isFirstMeasurementRef = (0, import_element28.useRef)(true); | |
| 2432 | + const measureWindow = useEvent((initRender) => { | |
| 2433 | + const scrollContainer = (0, import_dom3.getScrollContainer)(elementRef.current); | |
| 2434 | + if (!scrollContainer) { | |
| 2435 | + return; | |
| 2436 | + } | |
| 2437 | + const visibleItems = Math.ceil( | |
| 2438 | + scrollContainer.clientHeight / itemHeight | |
| 2439 | + ); | |
| 2440 | + visibleItemsRef.current = visibleItems; | |
| 2441 | + const isFirstMeasurement = isFirstMeasurementRef.current; | |
| 2442 | + isFirstMeasurementRef.current = false; | |
| 2443 | + const overscan = initRender ? visibleItems : windowOverscan ?? visibleItems; | |
| 2444 | + const firstViewableIndex = Math.floor( | |
| 2445 | + scrollContainer.scrollTop / itemHeight | |
| 2446 | + ); | |
| 2447 | + const start = Math.max(0, firstViewableIndex - overscan); | |
| 2448 | + const end = Math.min( | |
| 2449 | + totalItems - 1, | |
| 2450 | + firstViewableIndex + visibleItems + overscan | |
| 2451 | + ); | |
| 2452 | + setFixedListWindow((lastWindow) => { | |
| 2453 | + if (lastWindow.start <= start && lastWindow.end >= end) { | |
| 2454 | + return lastWindow; | |
| 2455 | + } | |
| 2456 | + if (isFirstMeasurement && lastWindow.start <= firstViewableIndex && lastWindow.end >= firstViewableIndex + visibleItems) { | |
| 2457 | + return lastWindow; | |
| 2458 | + } | |
| 2459 | + return { | |
| 2460 | + visibleItems, | |
| 2461 | + start, | |
| 2462 | + end, | |
| 2463 | + itemInView: (index) => { | |
| 2464 | + return start <= index && index <= end; | |
| 2465 | + } | |
| 2466 | + }; | |
| 2467 | + }); | |
| 2311 | 2468 | }); |
| 2469 | + const handleKeyDown = useEvent( | |
| 2470 | + (event, scrollContainer) => { | |
| 2471 | + switch (event.keyCode) { | |
| 2472 | + case import_keycodes2.HOME: { | |
| 2473 | + return scrollContainer.scrollTo({ top: 0 }); | |
| 2474 | + } | |
| 2475 | + case import_keycodes2.END: { | |
| 2476 | + return scrollContainer.scrollTo({ | |
| 2477 | + top: totalItems * itemHeight | |
| 2478 | + }); | |
| 2479 | + } | |
| 2480 | + case import_keycodes2.PAGEUP: { | |
| 2481 | + return scrollContainer.scrollTo({ | |
| 2482 | + top: scrollContainer.scrollTop - visibleItemsRef.current * itemHeight | |
| 2483 | + }); | |
| 2484 | + } | |
| 2485 | + case import_keycodes2.PAGEDOWN: { | |
| 2486 | + return scrollContainer.scrollTo({ | |
| 2487 | + top: scrollContainer.scrollTop + visibleItemsRef.current * itemHeight | |
| 2488 | + }); | |
| 2489 | + } | |
| 2490 | + } | |
| 2491 | + } | |
| 2492 | + ); | |
| 2312 | 2493 | (0, import_element28.useLayoutEffect)(() => { |
| 2313 | 2494 | if (!useWindowing) { |
| 2314 | 2495 | return; |
| 2315 | 2496 | } |
| 2316 | - const scrollContainer = (0, import_dom3.getScrollContainer)(elementRef.current); | |
| 2317 | - const measureWindow = (initRender) => { | |
| 2318 | - if (!scrollContainer) { | |
| 2319 | - return; | |
| 2320 | - } | |
| 2321 | - const visibleItems = Math.ceil( | |
| 2322 | - scrollContainer.clientHeight / itemHeight | |
| 2323 | - ); | |
| 2324 | - const windowOverscan = initRender ? visibleItems : options?.windowOverscan ?? visibleItems; | |
| 2325 | - const firstViewableIndex = Math.floor( | |
| 2326 | - scrollContainer.scrollTop / itemHeight | |
| 2327 | - ); | |
| 2328 | - const start = Math.max(0, firstViewableIndex - windowOverscan); | |
| 2329 | - const end = Math.min( | |
| 2330 | - totalItems - 1, | |
| 2331 | - firstViewableIndex + visibleItems + windowOverscan | |
| 2332 | - ); | |
| 2333 | - setFixedListWindow((lastWindow) => { | |
| 2334 | - const nextWindow = { | |
| 2335 | - visibleItems, | |
| 2336 | - start, | |
| 2337 | - end, | |
| 2338 | - itemInView: (index) => { | |
| 2339 | - return start <= index && index <= end; | |
| 2340 | - } | |
| 2341 | - }; | |
| 2342 | - if (lastWindow.start !== nextWindow.start || lastWindow.end !== nextWindow.end || lastWindow.visibleItems !== nextWindow.visibleItems) { | |
| 2343 | - return nextWindow; | |
| 2344 | - } | |
| 2345 | - return lastWindow; | |
| 2346 | - }); | |
| 2347 | - }; | |
| 2348 | 2497 | measureWindow(true); |
| 2349 | - const debounceMeasureList = debounce(() => { | |
| 2350 | - measureWindow(); | |
| 2351 | - }, 16); | |
| 2352 | - scrollContainer?.addEventListener("scroll", debounceMeasureList); | |
| 2353 | - scrollContainer?.ownerDocument?.defaultView?.addEventListener( | |
| 2354 | - "resize", | |
| 2355 | - debounceMeasureList | |
| 2356 | - ); | |
| 2357 | - scrollContainer?.ownerDocument?.defaultView?.addEventListener( | |
| 2358 | - "resize", | |
| 2359 | - debounceMeasureList | |
| 2360 | - ); | |
| 2361 | - return () => { | |
| 2362 | - scrollContainer?.removeEventListener( | |
| 2363 | - "scroll", | |
| 2364 | - debounceMeasureList | |
| 2365 | - ); | |
| 2366 | - scrollContainer?.ownerDocument?.defaultView?.removeEventListener( | |
| 2367 | - "resize", | |
| 2368 | - debounceMeasureList | |
| 2369 | - ); | |
| 2370 | - }; | |
| 2371 | 2498 | }, [ |
| 2499 | + useWindowing, | |
| 2500 | + measureWindow, | |
| 2372 | 2501 | itemHeight, |
| 2373 | - elementRef, | |
| 2374 | 2502 | totalItems, |
| 2375 | - options?.expandedState, | |
| 2376 | - options?.windowOverscan, | |
| 2377 | - useWindowing | |
| 2503 | + windowOverscan, | |
| 2504 | + expandedState | |
| 2378 | 2505 | ]); |
| 2379 | 2506 | (0, import_element28.useLayoutEffect)(() => { |
| 2380 | 2507 | if (!useWindowing) { |
| 2381 | 2508 | return; |
| @@ -2380,47 +2507,30 @@ | ||
| 2380 | 2507 | if (!useWindowing) { |
| 2381 | 2508 | return; |
| 2382 | 2509 | } |
| 2383 | 2510 | const scrollContainer = (0, import_dom3.getScrollContainer)(elementRef.current); |
| 2384 | - const handleKeyDown = (event) => { | |
| 2385 | - switch (event.keyCode) { | |
| 2386 | - case import_keycodes3.HOME: { | |
| 2387 | - return scrollContainer?.scrollTo({ top: 0 }); | |
| 2388 | - } | |
| 2389 | - case import_keycodes3.END: { | |
| 2390 | - return scrollContainer?.scrollTo({ | |
| 2391 | - top: totalItems * itemHeight | |
| 2392 | - }); | |
| 2393 | - } | |
| 2394 | - case import_keycodes3.PAGEUP: { | |
| 2395 | - return scrollContainer?.scrollTo({ | |
| 2396 | - top: scrollContainer.scrollTop - fixedListWindow.visibleItems * itemHeight | |
| 2397 | - }); | |
| 2398 | - } | |
| 2399 | - case import_keycodes3.PAGEDOWN: { | |
| 2400 | - return scrollContainer?.scrollTo({ | |
| 2401 | - top: scrollContainer.scrollTop + fixedListWindow.visibleItems * itemHeight | |
| 2402 | - }); | |
| 2403 | - } | |
| 2404 | - } | |
| 2405 | - }; | |
| 2406 | - scrollContainer?.ownerDocument?.defaultView?.addEventListener( | |
| 2407 | - "keydown", | |
| 2408 | - handleKeyDown | |
| 2409 | - ); | |
| 2511 | + if (!scrollContainer) { | |
| 2512 | + return; | |
| 2513 | + } | |
| 2514 | + const { defaultView } = scrollContainer.ownerDocument; | |
| 2515 | + const onMeasure = () => measureWindow(); | |
| 2516 | + const onKeyDown = (event) => handleKeyDown(event, scrollContainer); | |
| 2517 | + scrollContainer.addEventListener("scroll", onMeasure); | |
| 2518 | + defaultView?.addEventListener("resize", onMeasure); | |
| 2519 | + defaultView?.addEventListener("keydown", onKeyDown); | |
| 2410 | 2520 | return () => { |
| 2411 | - scrollContainer?.ownerDocument?.defaultView?.removeEventListener( | |
| 2412 | - "keydown", | |
| 2413 | - handleKeyDown | |
| 2414 | - ); | |
| 2521 | + scrollContainer.removeEventListener("scroll", onMeasure); | |
| 2522 | + defaultView?.removeEventListener("resize", onMeasure); | |
| 2523 | + defaultView?.removeEventListener("keydown", onKeyDown); | |
| 2415 | 2524 | }; |
| 2416 | 2525 | }, [ |
| 2526 | + useWindowing, | |
| 2527 | + elementRef, | |
| 2528 | + itemHeight, | |
| 2417 | 2529 | totalItems, |
| 2418 | - itemHeight, | |
| 2419 | - elementRef, | |
| 2420 | - fixedListWindow.visibleItems, | |
| 2421 | - useWindowing, | |
| 2422 | - options?.expandedState | |
| 2530 | + expandedState, | |
| 2531 | + measureWindow, | |
| 2532 | + handleKeyDown | |
| 2423 | 2533 | ]); |
| 2424 | 2534 | return [fixedListWindow, setFixedListWindow]; |
| 2425 | 2535 | } |
| 2426 | 2536 | |
| @@ -2436,6 +2546,8 @@ | ||
| 2436 | 2546 | ); |
| 2437 | 2547 | return (0, import_element29.useSyncExternalStore)(subscribe, getValue, getValue); |
| 2438 | 2548 | } |
| 2439 | 2549 | return __toCommonJS(index_exports); |
| 2550 | +})(); | |
| 2551 | +(window.wp ||= {}).compose = wp.compose; | |
| 2440 | 2552 | })(); |
| 2441 | 2553 | //# sourceMappingURL=index.js.map |