← All changes | build/scripts/compose/index.js +118 -115 23.5.0 → 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;
		@@ -1573,42 +1575,36 @@
1573	1575	}
1574	1576	}
1575	1577	function useMergeRefs(refs) {
1576	1578	const elementRef = (0, import_element12.useRef)(null);
1577		- const isAttachedRef = (0, import_element12.useRef)(false);
1578		- const didElementChangeRef = (0, import_element12.useRef)(false);
1579		- const previousRefsRef = (0, import_element12.useRef)([]);
	1579	+ const attachedRefsRef = (0, import_element12.useRef)([]);
1580	1580	const currentRefsRef = (0, import_element12.useRef)(refs);
1581	1581	const cleanupsRef = (0, import_element12.useRef)([]);
1582	1582	currentRefsRef.current = refs;
1583	1583	(0, import_element12.useLayoutEffect)(() => {
1584		- if (didElementChangeRef.current === false && isAttachedRef.current === true) {
1585		- refs.forEach((ref, index) => {
1586		- const previousRef = previousRefsRef.current[index];
1587		- if (ref !== previousRef) {
1588		- detachRef(previousRef, index, cleanupsRef.current);
1589		- cleanupsRef.current[index] = assignRef(
1590		- ref,
1591		- elementRef.current
1592		- );
1593		- }
1594		- });
	1584	+ const element = elementRef.current;
	1585	+ if (element === null) {
	1586	+ return;
1595	1587	}
1596		- previousRefsRef.current = refs;
	1588	+ refs.forEach((ref, index) => {
	1589	+ const attachedRef = attachedRefsRef.current[index];
	1590	+ if (ref !== attachedRef) {
	1591	+ detachRef(attachedRef, index, cleanupsRef.current);
	1592	+ cleanupsRef.current[index] = assignRef(ref, element);
	1593	+ }
	1594	+ });
	1595	+ attachedRefsRef.current = refs;
1597	1596	}, refs);
1598		- (0, import_element12.useLayoutEffect)(() => {
1599		- didElementChangeRef.current = false;
1600		- });
1601	1597	return (0, import_element12.useCallback)((value) => {
1602	1598	elementRef.current = value;
1603		- didElementChangeRef.current = true;
1604		- isAttachedRef.current = value !== null;
1605	1599	if (value === null) {
1606		- previousRefsRef.current.forEach((ref, index) => {
	1600	+ attachedRefsRef.current.forEach((ref, index) => {
1607	1601	detachRef(ref, index, cleanupsRef.current);
1608	1602	});
	1603	+ attachedRefsRef.current = [];
1609	1604	} else {
1610		- currentRefsRef.current.forEach((ref, index) => {
	1605	+ attachedRefsRef.current = currentRefsRef.current;
	1606	+ attachedRefsRef.current.forEach((ref, index) => {
1611	1607	cleanupsRef.current[index] = assignRef(ref, value);
1612	1608	});
1613	1609	}
1614	1610	}, []);
		@@ -2036,9 +2032,9 @@
2036	2032	var ViewportMatchWidthContext = (0, import_element21.createContext)(null);
2037	2033	ViewportMatchWidthContext.displayName = "ViewportMatchWidthContext";
2038	2034	var useViewportMatch = (breakpoint, operator = ">=", view = typeof window !== "undefined" ? window : void 0) => {
2039	2035	const simulatedWidth = (0, import_element21.useContext)(ViewportMatchWidthContext);
2040		- const mediaQuery = !simulatedWidth && `(${CONDITIONS[operator]}: ${BREAKPOINTS[breakpoint]}px)`;
	2036	+ const mediaQuery = !simulatedWidth && `screen and (${CONDITIONS[operator]}: ${BREAKPOINTS[breakpoint]}px)`;
2041	2037	const mediaQueryResult = useMediaQuery(mediaQuery || void 0, view);
2042	2038	if (simulatedWidth) {
2043	2039	return OPERATOR_EVALUATORS[operator](
2044	2040	BREAKPOINTS[breakpoint],
		@@ -2055,8 +2051,17 @@
2055	2051	function useResizeObserver(callback, resizeObserverOptions = {}) {
2056	2052	const callbackEvent = useEvent(callback);
2057	2053	const observedElementRef = (0, import_element22.useRef)(null);
2058	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	+ }, []);
2059	2064	return useEvent((element) => {
2060	2065	if (element === observedElementRef.current) {
2061	2066	return;
2062	2067	}
		@@ -2406,10 +2411,14 @@
2406	2411	var import_dom3 = __toESM(require_dom(), 1);
2407	2412	var import_keycodes2 = __toESM(require_keycodes(), 1);
2408	2413	var DEFAULT_INIT_WINDOW_SIZE = 30;
2409	2414	function useFixedWindowList(elementRef, itemHeight, totalItems, options) {
2410		- const initWindowSize = options?.initWindowSize ?? DEFAULT_INIT_WINDOW_SIZE;
2411		- const useWindowing = options?.useWindowing ?? true;
	2415	+ const {
	2416	+ windowOverscan,
	2417	+ useWindowing = true,
	2418	+ initWindowSize = DEFAULT_INIT_WINDOW_SIZE,
	2419	+ expandedState
	2420	+ } = options ?? {};
2412	2421	const [fixedListWindow, setFixedListWindow] = (0, import_element28.useState)(
2413	2422	{
2414	2423	visibleItems: initWindowSize,
2415	2424	start: 0,
		@@ -2418,119 +2427,111 @@
2418	2427	return index >= 0 && index <= initWindowSize;
2419	2428	}
2420	2429	}
2421	2430	);
2422		- (0, import_element28.useLayoutEffect)(() => {
2423		- 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) {
2424	2436	return;
2425	2437	}
2426		- const scrollContainer = (0, import_dom3.getScrollContainer)(elementRef.current);
2427		- const measureWindow = (initRender) => {
2428		- if (!scrollContainer) {
2429		- 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;
2430	2456	}
2431		- const visibleItems = Math.ceil(
2432		- scrollContainer.clientHeight / itemHeight
2433		- );
2434		- const windowOverscan = initRender ? visibleItems : options?.windowOverscan ?? visibleItems;
2435		- const firstViewableIndex = Math.floor(
2436		- scrollContainer.scrollTop / itemHeight
2437		- );
2438		- const start = Math.max(0, firstViewableIndex - windowOverscan);
2439		- const end = Math.min(
2440		- totalItems - 1,
2441		- firstViewableIndex + visibleItems + windowOverscan
2442		- );
2443		- setFixedListWindow((lastWindow) => {
2444		- const nextWindow = {
2445		- visibleItems,
2446		- start,
2447		- end,
2448		- itemInView: (index) => {
2449		- return start <= index && index <= end;
2450		- }
2451		- };
2452		- if (lastWindow.start !== nextWindow.start || lastWindow.end !== nextWindow.end || lastWindow.visibleItems !== nextWindow.visibleItems) {
2453		- 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;
2454	2466	}
2455		- return lastWindow;
2456		- });
2457		- };
2458		- measureWindow(true);
2459		- const debounceMeasureList = debounce(() => {
2460		- measureWindow();
2461		- }, 16);
2462		- scrollContainer?.addEventListener("scroll", debounceMeasureList);
2463		- scrollContainer?.ownerDocument?.defaultView?.addEventListener(
2464		- "resize",
2465		- debounceMeasureList
2466		- );
2467		- scrollContainer?.ownerDocument?.defaultView?.addEventListener(
2468		- "resize",
2469		- debounceMeasureList
2470		- );
2471		- return () => {
2472		- scrollContainer?.removeEventListener(
2473		- "scroll",
2474		- debounceMeasureList
2475		- );
2476		- scrollContainer?.ownerDocument?.defaultView?.removeEventListener(
2477		- "resize",
2478		- debounceMeasureList
2479		- );
2480		- };
2481		- }, [
2482		- itemHeight,
2483		- elementRef,
2484		- totalItems,
2485		- options?.expandedState,
2486		- options?.windowOverscan,
2487		- useWindowing
2488		- ]);
2489		- (0, import_element28.useLayoutEffect)(() => {
2490		- if (!useWindowing) {
2491		- return;
2492		- }
2493		- const scrollContainer = (0, import_dom3.getScrollContainer)(elementRef.current);
2494		- const handleKeyDown = (event) => {
	2467	+ };
	2468	+ });
	2469	+ });
	2470	+ const handleKeyDown = useEvent(
	2471	+ (event, scrollContainer) => {
2495	2472	switch (event.keyCode) {
2496	2473	case import_keycodes2.HOME: {
2497		- return scrollContainer?.scrollTo({ top: 0 });
	2474	+ return scrollContainer.scrollTo({ top: 0 });
2498	2475	}
2499	2476	case import_keycodes2.END: {
2500		- return scrollContainer?.scrollTo({
	2477	+ return scrollContainer.scrollTo({
2501	2478	top: totalItems * itemHeight
2502	2479	});
2503	2480	}
2504	2481	case import_keycodes2.PAGEUP: {
2505		- return scrollContainer?.scrollTo({
2506		- top: scrollContainer.scrollTop - fixedListWindow.visibleItems * itemHeight
	2482	+ return scrollContainer.scrollTo({
	2483	+ top: scrollContainer.scrollTop - visibleItemsRef.current * itemHeight
2507	2484	});
2508	2485	}
2509	2486	case import_keycodes2.PAGEDOWN: {
2510		- return scrollContainer?.scrollTo({
2511		- top: scrollContainer.scrollTop + fixedListWindow.visibleItems * itemHeight
	2487	+ return scrollContainer.scrollTo({
	2488	+ top: scrollContainer.scrollTop + visibleItemsRef.current * itemHeight
2512	2489	});
2513	2490	}
2514	2491	}
2515		- };
2516		- scrollContainer?.ownerDocument?.defaultView?.addEventListener(
2517		- "keydown",
2518		- handleKeyDown
2519		- );
	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);
2520	2521	return () => {
2521		- scrollContainer?.ownerDocument?.defaultView?.removeEventListener(
2522		- "keydown",
2523		- handleKeyDown
2524		- );
	2522	+ scrollContainer.removeEventListener("scroll", onMeasure);
	2523	+ defaultView?.removeEventListener("resize", onMeasure);
	2524	+ defaultView?.removeEventListener("keydown", onKeyDown);
2525	2525	};
2526	2526	}, [
	2527	+ useWindowing,
	2528	+ elementRef,
	2529	+ itemHeight,
2527	2530	totalItems,
2528		- itemHeight,
2529		- elementRef,
2530		- fixedListWindow.visibleItems,
2531		- useWindowing,
2532		- options?.expandedState
	2531	+ expandedState,
	2532	+ measureWindow,
	2533	+ handleKeyDown
2533	2534	]);
2534	2535	return [fixedListWindow, setFixedListWindow];
2535	2536	}
2536	2537
		@@ -2546,6 +2547,8 @@
2546	2547	);
2547	2548	return (0, import_element29.useSyncExternalStore)(subscribe, getValue, getValue);
2548	2549	}
2549	2550	return __toCommonJS(index_exports);
	2551	+})();
	2552	+(window.wp ||= {}).compose = wp.compose;
2550	2553	})();
2551	2554	//# sourceMappingURL=index.js.map