← All changes | build/scripts/compose/index.js +102 -93 23.7.2 → trunk View file →

		@@ -1,4 +1,5 @@
	1	+(function() {
1	2	"use strict";
2	3	var wp;
3	4	(wp ||= {}).compose = (() => {
4	5	var __create = Object.create;
		@@ -1156,9 +1157,9 @@
1156	1157	);
1157	1158	}
1158	1159	render() {
1159	1160	return (
1160		- // @ts-ignore
	1161	+ // @ts-expect-error `LibraryManagedAttributes` cannot see the injected timeout props.
1161	1162	/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
1162	1163	OriginalComponent,
1163	1164	{
1164	1165	...this.props,
		@@ -1531,8 +1532,9 @@
1531	1532	);
1532	1533	if (ignoreForRelatedTarget && event.relatedTarget?.closest(ignoreForRelatedTarget)) {
1533	1534	return;
1534	1535	}
	1536	+ clearTimeout(blurCheckTimeoutIdRef.current);
1535	1537	blurCheckTimeoutIdRef.current = setTimeout(() => {
1536	1538	if (!document.hasFocus()) {
1537	1539	event.preventDefault();
1538	1540	return;
		@@ -2030,9 +2032,9 @@
2030	2032	var ViewportMatchWidthContext = (0, import_element21.createContext)(null);
2031	2033	ViewportMatchWidthContext.displayName = "ViewportMatchWidthContext";
2032	2034	var useViewportMatch = (breakpoint, operator = ">=", view = typeof window !== "undefined" ? window : void 0) => {
2033	2035	const simulatedWidth = (0, import_element21.useContext)(ViewportMatchWidthContext);
2034		- const mediaQuery = !simulatedWidth && `(${CONDITIONS[operator]}: ${BREAKPOINTS[breakpoint]}px)`;
	2036	+ const mediaQuery = !simulatedWidth && `screen and (${CONDITIONS[operator]}: ${BREAKPOINTS[breakpoint]}px)`;
2035	2037	const mediaQueryResult = useMediaQuery(mediaQuery || void 0, view);
2036	2038	if (simulatedWidth) {
2037	2039	return OPERATOR_EVALUATORS[operator](
2038	2040	BREAKPOINTS[breakpoint],
		@@ -2049,8 +2051,17 @@
2049	2051	function useResizeObserver(callback, resizeObserverOptions = {}) {
2050	2052	const callbackEvent = useEvent(callback);
2051	2053	const observedElementRef = (0, import_element22.useRef)(null);
2052	2054	const resizeObserverRef = (0, import_element22.useRef)(void 0);
	2055	+ (0, import_element22.useEffect)(() => {
	2056	+ if (observedElementRef.current) {
	2057	+ resizeObserverRef.current?.observe(
	2058	+ observedElementRef.current,
	2059	+ resizeObserverOptions
	2060	+ );
	2061	+ }
	2062	+ return () => resizeObserverRef.current?.disconnect();
	2063	+ }, []);
2053	2064	return useEvent((element) => {
2054	2065	if (element === observedElementRef.current) {
2055	2066	return;
2056	2067	}
		@@ -2400,10 +2411,14 @@
2400	2411	var import_dom3 = __toESM(require_dom(), 1);
2401	2412	var import_keycodes2 = __toESM(require_keycodes(), 1);
2402	2413	var DEFAULT_INIT_WINDOW_SIZE = 30;
2403	2414	function useFixedWindowList(elementRef, itemHeight, totalItems, options) {
2404		- const initWindowSize = options?.initWindowSize ?? DEFAULT_INIT_WINDOW_SIZE;
2405		- const useWindowing = options?.useWindowing ?? true;
	2415	+ const {
	2416	+ windowOverscan,
	2417	+ useWindowing = true,
	2418	+ initWindowSize = DEFAULT_INIT_WINDOW_SIZE,
	2419	+ expandedState
	2420	+ } = options ?? {};
2406	2421	const [fixedListWindow, setFixedListWindow] = (0, import_element28.useState)(
2407	2422	{
2408	2423	visibleItems: initWindowSize,
2409	2424	start: 0,
		@@ -2412,119 +2427,111 @@
2412	2427	return index >= 0 && index <= initWindowSize;
2413	2428	}
2414	2429	}
2415	2430	);
2416		- (0, import_element28.useLayoutEffect)(() => {
2417		- if (!useWindowing) {
	2431	+ const visibleItemsRef = (0, import_element28.useRef)(initWindowSize);
	2432	+ const isFirstMeasurementRef = (0, import_element28.useRef)(true);
	2433	+ const measureWindow = useEvent((initRender) => {
	2434	+ const scrollContainer = (0, import_dom3.getScrollContainer)(elementRef.current);
	2435	+ if (!scrollContainer) {
2418	2436	return;
2419	2437	}
2420		- const scrollContainer = (0, import_dom3.getScrollContainer)(elementRef.current);
2421		- const measureWindow = (initRender) => {
2422		- if (!scrollContainer) {
2423		- return;
	2438	+ const visibleItems = Math.ceil(
	2439	+ scrollContainer.clientHeight / itemHeight
	2440	+ );
	2441	+ visibleItemsRef.current = visibleItems;
	2442	+ const isFirstMeasurement = isFirstMeasurementRef.current;
	2443	+ isFirstMeasurementRef.current = false;
	2444	+ const overscan = initRender ? visibleItems : windowOverscan ?? visibleItems;
	2445	+ const firstViewableIndex = Math.floor(
	2446	+ scrollContainer.scrollTop / itemHeight
	2447	+ );
	2448	+ const start = Math.max(0, firstViewableIndex - overscan);
	2449	+ const end = Math.min(
	2450	+ totalItems - 1,
	2451	+ firstViewableIndex + visibleItems + overscan
	2452	+ );
	2453	+ setFixedListWindow((lastWindow) => {
	2454	+ if (lastWindow.start <= start && lastWindow.end >= end) {
	2455	+ return lastWindow;
2424	2456	}
2425		- const visibleItems = Math.ceil(
2426		- scrollContainer.clientHeight / itemHeight
2427		- );
2428		- const windowOverscan = initRender ? visibleItems : options?.windowOverscan ?? visibleItems;
2429		- const firstViewableIndex = Math.floor(
2430		- scrollContainer.scrollTop / itemHeight
2431		- );
2432		- const start = Math.max(0, firstViewableIndex - windowOverscan);
2433		- const end = Math.min(
2434		- totalItems - 1,
2435		- firstViewableIndex + visibleItems + windowOverscan
2436		- );
2437		- setFixedListWindow((lastWindow) => {
2438		- const nextWindow = {
2439		- visibleItems,
2440		- start,
2441		- end,
2442		- itemInView: (index) => {
2443		- return start <= index && index <= end;
2444		- }
2445		- };
2446		- if (lastWindow.start !== nextWindow.start || lastWindow.end !== nextWindow.end || lastWindow.visibleItems !== nextWindow.visibleItems) {
2447		- return nextWindow;
	2457	+ if (isFirstMeasurement && lastWindow.start <= firstViewableIndex && lastWindow.end >= firstViewableIndex + visibleItems) {
	2458	+ return lastWindow;
	2459	+ }
	2460	+ return {
	2461	+ visibleItems,
	2462	+ start,
	2463	+ end,
	2464	+ itemInView: (index) => {
	2465	+ return start <= index && index <= end;
2448	2466	}
2449		- return lastWindow;
2450		- });
2451		- };
2452		- measureWindow(true);
2453		- const debounceMeasureList = debounce(() => {
2454		- measureWindow();
2455		- }, 16);
2456		- scrollContainer?.addEventListener("scroll", debounceMeasureList);
2457		- scrollContainer?.ownerDocument?.defaultView?.addEventListener(
2458		- "resize",
2459		- debounceMeasureList
2460		- );
2461		- scrollContainer?.ownerDocument?.defaultView?.addEventListener(
2462		- "resize",
2463		- debounceMeasureList
2464		- );
2465		- return () => {
2466		- scrollContainer?.removeEventListener(
2467		- "scroll",
2468		- debounceMeasureList
2469		- );
2470		- scrollContainer?.ownerDocument?.defaultView?.removeEventListener(
2471		- "resize",
2472		- debounceMeasureList
2473		- );
2474		- };
2475		- }, [
2476		- itemHeight,
2477		- elementRef,
2478		- totalItems,
2479		- options?.expandedState,
2480		- options?.windowOverscan,
2481		- useWindowing
2482		- ]);
2483		- (0, import_element28.useLayoutEffect)(() => {
2484		- if (!useWindowing) {
2485		- return;
2486		- }
2487		- const scrollContainer = (0, import_dom3.getScrollContainer)(elementRef.current);
2488		- const handleKeyDown = (event) => {
	2467	+ };
	2468	+ });
	2469	+ });
	2470	+ const handleKeyDown = useEvent(
	2471	+ (event, scrollContainer) => {
2489	2472	switch (event.keyCode) {
2490	2473	case import_keycodes2.HOME: {
2491		- return scrollContainer?.scrollTo({ top: 0 });
	2474	+ return scrollContainer.scrollTo({ top: 0 });
2492	2475	}
2493	2476	case import_keycodes2.END: {
2494		- return scrollContainer?.scrollTo({
	2477	+ return scrollContainer.scrollTo({
2495	2478	top: totalItems * itemHeight
2496	2479	});
2497	2480	}
2498	2481	case import_keycodes2.PAGEUP: {
2499		- return scrollContainer?.scrollTo({
2500		- top: scrollContainer.scrollTop - fixedListWindow.visibleItems * itemHeight
	2482	+ return scrollContainer.scrollTo({
	2483	+ top: scrollContainer.scrollTop - visibleItemsRef.current * itemHeight
2501	2484	});
2502	2485	}
2503	2486	case import_keycodes2.PAGEDOWN: {
2504		- return scrollContainer?.scrollTo({
2505		- top: scrollContainer.scrollTop + fixedListWindow.visibleItems * itemHeight
	2487	+ return scrollContainer.scrollTo({
	2488	+ top: scrollContainer.scrollTop + visibleItemsRef.current * itemHeight
2506	2489	});
2507	2490	}
2508	2491	}
2509		- };
2510		- scrollContainer?.ownerDocument?.defaultView?.addEventListener(
2511		- "keydown",
2512		- handleKeyDown
2513		- );
	2492	+ }
	2493	+ );
	2494	+ (0, import_element28.useLayoutEffect)(() => {
	2495	+ if (!useWindowing) {
	2496	+ return;
	2497	+ }
	2498	+ measureWindow(true);
	2499	+ }, [
	2500	+ useWindowing,
	2501	+ measureWindow,
	2502	+ itemHeight,
	2503	+ totalItems,
	2504	+ windowOverscan,
	2505	+ expandedState
	2506	+ ]);
	2507	+ (0, import_element28.useLayoutEffect)(() => {
	2508	+ if (!useWindowing) {
	2509	+ return;
	2510	+ }
	2511	+ const scrollContainer = (0, import_dom3.getScrollContainer)(elementRef.current);
	2512	+ if (!scrollContainer) {
	2513	+ return;
	2514	+ }
	2515	+ const { defaultView } = scrollContainer.ownerDocument;
	2516	+ const onMeasure = () => measureWindow();
	2517	+ const onKeyDown = (event) => handleKeyDown(event, scrollContainer);
	2518	+ scrollContainer.addEventListener("scroll", onMeasure);
	2519	+ defaultView?.addEventListener("resize", onMeasure);
	2520	+ defaultView?.addEventListener("keydown", onKeyDown);
2514	2521	return () => {
2515		- scrollContainer?.ownerDocument?.defaultView?.removeEventListener(
2516		- "keydown",
2517		- handleKeyDown
2518		- );
	2522	+ scrollContainer.removeEventListener("scroll", onMeasure);
	2523	+ defaultView?.removeEventListener("resize", onMeasure);
	2524	+ defaultView?.removeEventListener("keydown", onKeyDown);
2519	2525	};
2520	2526	}, [
	2527	+ useWindowing,
	2528	+ elementRef,
	2529	+ itemHeight,
2521	2530	totalItems,
2522		- itemHeight,
2523		- elementRef,
2524		- fixedListWindow.visibleItems,
2525		- useWindowing,
2526		- options?.expandedState
	2531	+ expandedState,
	2532	+ measureWindow,
	2533	+ handleKeyDown
2527	2534	]);
2528	2535	return [fixedListWindow, setFixedListWindow];
2529	2536	}
2530	2537
		@@ -2540,6 +2547,8 @@
2540	2547	);
2541	2548	return (0, import_element29.useSyncExternalStore)(subscribe, getValue, getValue);
2542	2549	}
2543	2550	return __toCommonJS(index_exports);
	2551	+})();
	2552	+(window.wp ||= {}).compose = wp.compose;
2544	2553	})();
2545	2554	//# sourceMappingURL=index.js.map