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