← All changes | build/scripts/compose/index.js +207 -192 23.3.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;
		@@ -972,10 +973,15 @@
972	973
973	974	// packages/compose/build-module/higher-order/pure/index.mjs
974	975	var import_is_shallow_equal = __toESM(require_is_shallow_equal(), 1);
975	976	var import_element = __toESM(require_element(), 1);
	977	+ var import_deprecated = __toESM(require_deprecated(), 1);
976	978	var import_jsx_runtime2 = __toESM(require_jsx_runtime(), 1);
977	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	+ });
978	984	if (WrappedComponent.prototype instanceof import_element.Component) {
979	985	return class extends WrappedComponent {
980	986	shouldComponentUpdate(nextProps, nextState) {
981	987	return !(0, import_is_shallow_equal.isShallowEqual)(nextProps, this.props) || !(0, import_is_shallow_equal.isShallowEqual)(nextState, this.state);
		@@ -994,9 +1000,9 @@
994	1000	var pure_default = pure;
995	1001
996	1002	// packages/compose/build-module/higher-order/with-global-events/index.mjs
997	1003	var import_element2 = __toESM(require_element(), 1);
998		- var import_deprecated = __toESM(require_deprecated(), 1);
	1004	+ var import_deprecated2 = __toESM(require_deprecated(), 1);
999	1005
1000	1006	// packages/compose/build-module/higher-order/with-global-events/listener.mjs
1001	1007	var Listener = class {
1002	1008	constructor() {
		@@ -1035,9 +1041,9 @@
1035	1041	// packages/compose/build-module/higher-order/with-global-events/index.mjs
1036	1042	var import_jsx_runtime3 = __toESM(require_jsx_runtime(), 1);
1037	1043	var listener = new listener_default();
1038	1044	function withGlobalEvents(eventTypesToHandlers) {
1039		- (0, import_deprecated.default)("wp.compose.withGlobalEvents", {
	1045	+ (0, import_deprecated2.default)("wp.compose.withGlobalEvents", {
1040	1046	since: "5.7",
1041	1047	alternative: "useEffect"
1042	1048	});
1043	1049	return createHigherOrderComponent((WrappedComponent) => {
		@@ -1151,9 +1157,9 @@
1151	1157	);
1152	1158	}
1153	1159	render() {
1154	1160	return (
1155		- // @ts-ignore
	1161	+ // @ts-expect-error `LibraryManagedAttributes` cannot see the injected timeout props.
1156	1162	/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
1157	1163	OriginalComponent,
1158	1164	{
1159	1165	...this.props,
		@@ -1170,12 +1176,12 @@
1170	1176	var with_safe_timeout_default = withSafeTimeout;
1171	1177
1172	1178	// packages/compose/build-module/higher-order/with-state/index.mjs
1173	1179	var import_element5 = __toESM(require_element(), 1);
1174		- var import_deprecated2 = __toESM(require_deprecated(), 1);
	1180	+ var import_deprecated3 = __toESM(require_deprecated(), 1);
1175	1181	var import_jsx_runtime6 = __toESM(require_jsx_runtime(), 1);
1176	1182	function withState(initialState = {}) {
1177		- (0, import_deprecated2.default)("wp.compose.withState", {
	1183	+ (0, import_deprecated3.default)("wp.compose.withState", {
1178	1184	since: "5.8",
1179	1185	alternative: "wp.element.useState"
1180	1186	});
1181	1187	return createHigherOrderComponent((OriginalComponent) => {
		@@ -1223,16 +1229,10 @@
1223	1229	if (key !== "Tab") {
1224	1230	return;
1225	1231	}
1226	1232	const action = shiftKey ? "findPrevious" : "findNext";
1227		- const nextElement = import_dom.focus.tabbable[action](
1228		- /** @type {HTMLElement} */
1229		- target
1230		- ) || null;
1231		- if (
1232		- /** @type {HTMLElement} */
1233		- target.contains(nextElement)
1234		- ) {
	1233	+ const nextElement = import_dom.focus.tabbable[action](target) || null;
	1234	+ if (target.contains(nextElement)) {
1235	1235	event.preventDefault();
1236	1236	nextElement?.focus();
1237	1237	return;
1238	1238	}
		@@ -1256,9 +1256,9 @@
1256	1256	var use_constrained_tabbing_default = useConstrainedTabbing;
1257	1257
1258	1258	// packages/compose/build-module/hooks/use-copy-on-click/index.mjs
1259	1259	var import_element8 = __toESM(require_element(), 1);
1260		- var import_deprecated3 = __toESM(require_deprecated(), 1);
	1260	+ var import_deprecated4 = __toESM(require_deprecated(), 1);
1261	1261
1262	1262	// packages/compose/build-module/hooks/use-copy-to-clipboard/index.mjs
1263	1263	var import_element7 = __toESM(require_element(), 1);
1264	1264	async function copyToClipboard(text, trigger) {
		@@ -1328,9 +1328,9 @@
1328	1328	}
1329	1329
1330	1330	// packages/compose/build-module/hooks/use-copy-on-click/index.mjs
1331	1331	function useCopyOnClick(ref, text, timeout = 4e3) {
1332		- (0, import_deprecated3.default)("wp.compose.useCopyOnClick", {
	1332	+ (0, import_deprecated4.default)("wp.compose.useCopyOnClick", {
1333	1333	since: "5.8",
1334	1334	alternative: "wp.compose.useCopyToClipboard"
1335	1335	});
1336	1336	const [hasCopied, setHasCopied] = (0, import_element8.useState)(false);
		@@ -1444,10 +1444,12 @@
1444	1444	var import_element10 = __toESM(require_element(), 1);
1445	1445	var origin = null;
1446	1446	function useFocusReturn(onFocusReturn) {
1447	1447	const ref = (0, import_element10.useRef)(null);
1448		- const focusedBeforeMount = (0, import_element10.useRef)(null);
1449		- 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	+ );
1450	1452	(0, import_element10.useEffect)(() => {
1451	1453	onFocusReturnRef.current = onFocusReturn;
1452	1454	}, [onFocusReturn]);
1453	1455	return (0, import_element10.useCallback)((node) => {
		@@ -1452,25 +1454,26 @@
1452	1454	}, [onFocusReturn]);
1453	1455	return (0, import_element10.useCallback)((node) => {
1454	1456	if (node) {
1455	1457	ref.current = node;
1456		- if (focusedBeforeMount.current) {
	1458	+ if (focusedBeforeMountRef.current) {
1457	1459	return;
1458	1460	}
1459	1461	const activeDocument = node.ownerDocument.activeElement instanceof window.HTMLIFrameElement ? node.ownerDocument.activeElement.contentDocument : node.ownerDocument;
1460		- focusedBeforeMount.current = activeDocument?.activeElement ?? null;
1461		- } else if (focusedBeforeMount.current) {
	1462	+ focusedBeforeMountRef.current = activeDocument?.activeElement ?? null;
	1463	+ } else if (focusedBeforeMountRef.current) {
1462	1464	const isFocused = ref.current?.contains(
1463		- ref.current?.ownerDocument.activeElement
	1465	+ ref.current?.ownerDocument.activeElement ?? null
1464	1466	);
1465	1467	if (ref.current?.isConnected && !isFocused) {
1466		- origin ??= focusedBeforeMount.current;
	1468	+ origin ??= focusedBeforeMountRef.current;
1467	1469	return;
1468	1470	}
1469	1471	if (onFocusReturnRef.current) {
1470	1472	onFocusReturnRef.current();
1471	1473	} else {
1472		- (!focusedBeforeMount.current.isConnected ? origin : focusedBeforeMount.current)?.focus();
	1474	+ const elementToFocus = !focusedBeforeMountRef.current.isConnected ? origin : focusedBeforeMountRef.current;
	1475	+ elementToFocus?.focus();
1473	1476	}
1474	1477	origin = null;
1475	1478	}
1476	1479	}, []);
		@@ -1529,8 +1532,9 @@
1529	1532	);
1530	1533	if (ignoreForRelatedTarget && event.relatedTarget?.closest(ignoreForRelatedTarget)) {
1531	1534	return;
1532	1535	}
	1536	+ clearTimeout(blurCheckTimeoutIdRef.current);
1533	1537	blurCheckTimeoutIdRef.current = setTimeout(() => {
1534	1538	if (!document.hasFocus()) {
1535	1539	event.preventDefault();
1536	1540	return;
		@@ -1553,42 +1557,56 @@
1553	1557	// packages/compose/build-module/hooks/use-merge-refs/index.mjs
1554	1558	var import_element12 = __toESM(require_element(), 1);
1555	1559	function assignRef(ref, value) {
1556	1560	if (typeof ref === "function") {
1557		- ref(value);
	1561	+ const returned = ref(value);
	1562	+ return typeof returned === "function" ? returned : void 0;
1558	1563	} else if (ref && ref.hasOwnProperty("current")) {
1559	1564	ref.current = value;
1560	1565	}
	1566	+ return void 0;
1561	1567	}
	1568	+ function detachRef(ref, index, cleanups) {
	1569	+ const cleanup = cleanups[index];
	1570	+ if (cleanup) {
	1571	+ cleanups[index] = void 0;
	1572	+ cleanup();
	1573	+ } else {
	1574	+ assignRef(ref, null);
	1575	+ }
	1576	+ }
1562	1577	function useMergeRefs(refs) {
1563		- const element = (0, import_element12.useRef)(null);
1564		- const isAttachedRef = (0, import_element12.useRef)(false);
1565		- const didElementChangeRef = (0, import_element12.useRef)(false);
1566		- const previousRefsRef = (0, import_element12.useRef)([]);
	1578	+ const elementRef = (0, import_element12.useRef)(null);
	1579	+ const attachedRefsRef = (0, import_element12.useRef)([]);
1567	1580	const currentRefsRef = (0, import_element12.useRef)(refs);
	1581	+ const cleanupsRef = (0, import_element12.useRef)([]);
1568	1582	currentRefsRef.current = refs;
1569	1583	(0, import_element12.useLayoutEffect)(() => {
1570		- if (didElementChangeRef.current === false && isAttachedRef.current === true) {
1571		- refs.forEach((ref, index) => {
1572		- const previousRef = previousRefsRef.current[index];
1573		- if (ref !== previousRef) {
1574		- assignRef(previousRef, null);
1575		- assignRef(ref, element.current);
1576		- }
1577		- });
	1584	+ const element = elementRef.current;
	1585	+ if (element === null) {
	1586	+ return;
1578	1587	}
1579		- 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;
1580	1596	}, refs);
1581		- (0, import_element12.useLayoutEffect)(() => {
1582		- didElementChangeRef.current = false;
1583		- });
1584	1597	return (0, import_element12.useCallback)((value) => {
1585		- assignRef(element, value);
1586		- didElementChangeRef.current = true;
1587		- isAttachedRef.current = value !== null;
1588		- const refsToAssign = value ? currentRefsRef.current : previousRefsRef.current;
1589		- for (const ref of refsToAssign) {
1590		- assignRef(ref, value);
	1598	+ elementRef.current = value;
	1599	+ if (value === null) {
	1600	+ attachedRefsRef.current.forEach((ref, index) => {
	1601	+ detachRef(ref, index, cleanupsRef.current);
	1602	+ });
	1603	+ attachedRefsRef.current = [];
	1604	+ } else {
	1605	+ attachedRefsRef.current = currentRefsRef.current;
	1606	+ attachedRefsRef.current.forEach((ref, index) => {
	1607	+ cleanupsRef.current[index] = assignRef(ref, value);
	1608	+ });
1591	1609	}
1592	1610	}, []);
1593	1611	}
1594	1612
		@@ -1650,10 +1668,10 @@
1650	1668	node.childNodes.forEach((child) => {
1651	1669	if (!(child instanceof defaultView.HTMLElement)) {
1652	1670	return;
1653	1671	}
1654		- if (!child.hasAttribute("inert")) {
1655		- child.setAttribute("inert", "");
	1672	+ if (!child.getAttribute("inert")) {
	1673	+ child.setAttribute("inert", "true");
1656	1674	updates.push(() => {
1657	1675	child.removeAttribute("inert");
1658	1676	});
1659	1677	}
		@@ -1704,9 +1722,13 @@
1704	1722	var useIsomorphicLayoutEffect = typeof window !== "undefined" ? import_element15.useLayoutEffect : import_element15.useEffect;
1705	1723	var use_isomorphic_layout_effect_default = useIsomorphicLayoutEffect;
1706	1724
1707	1725	// packages/compose/build-module/hooks/use-dragging/index.mjs
1708		- function useDragging({ onDragStart, onDragMove, onDragEnd }) {
	1726	+ function useDragging({
	1727	+ onDragStart,
	1728	+ onDragMove,
	1729	+ onDragEnd
	1730	+ }) {
1709	1731	const [isDragging, setIsDragging] = (0, import_element16.useState)(false);
1710	1732	const eventsRef = (0, import_element16.useRef)({
1711	1733	onDragStart,
1712	1734	onDragMove,
		@@ -1716,28 +1738,29 @@
1716	1738	eventsRef.current.onDragStart = onDragStart;
1717	1739	eventsRef.current.onDragMove = onDragMove;
1718	1740	eventsRef.current.onDragEnd = onDragEnd;
1719	1741	}, [onDragStart, onDragMove, onDragEnd]);
1720		- const onMouseMove = (0, import_element16.useCallback)(
1721		- (event) => eventsRef.current.onDragMove && eventsRef.current.onDragMove(event),
1722		- []
	1742	+ const onMouseMove = (0, import_element16.useCallback)((event) => {
	1743	+ eventsRef.current.onDragMove?.(event);
	1744	+ }, []);
	1745	+ const endDrag = (0, import_element16.useCallback)(
	1746	+ function endDrag2(event) {
	1747	+ eventsRef.current.onDragEnd?.(event);
	1748	+ document.removeEventListener("mousemove", onMouseMove);
	1749	+ document.removeEventListener("mouseup", endDrag2);
	1750	+ setIsDragging(false);
	1751	+ },
	1752	+ [onMouseMove]
1723	1753	);
1724		- const endDrag = (0, import_element16.useCallback)((event) => {
1725		- if (eventsRef.current.onDragEnd) {
1726		- eventsRef.current.onDragEnd(event);
1727		- }
1728		- document.removeEventListener("mousemove", onMouseMove);
1729		- document.removeEventListener("mouseup", endDrag);
1730		- setIsDragging(false);
1731		- }, []);
1732		- const startDrag = (0, import_element16.useCallback)((event) => {
1733		- if (eventsRef.current.onDragStart) {
1734		- eventsRef.current.onDragStart(event);
1735		- }
1736		- document.addEventListener("mousemove", onMouseMove);
1737		- document.addEventListener("mouseup", endDrag);
1738		- setIsDragging(true);
1739		- }, []);
	1754	+ const startDrag = (0, import_element16.useCallback)(
	1755	+ (event) => {
	1756	+ eventsRef.current.onDragStart?.(event);
	1757	+ document.addEventListener("mousemove", onMouseMove);
	1758	+ document.addEventListener("mouseup", endDrag);
	1759	+ setIsDragging(true);
	1760	+ },
	1761	+ [onMouseMove, endDrag]
	1762	+ );
1740	1763	(0, import_element16.useEffect)(() => {
1741	1764	return () => {
1742	1765	if (isDragging) {
1743	1766	document.removeEventListener("mousemove", onMouseMove);
		@@ -1743,9 +1766,9 @@
1743	1766	document.removeEventListener("mousemove", onMouseMove);
1744	1767	document.removeEventListener("mouseup", endDrag);
1745	1768	}
1746	1769	};
1747		- }, [isDragging]);
	1770	+ }, [isDragging, onMouseMove, endDrag]);
1748	1771	return {
1749	1772	startDrag,
1750	1773	endDrag,
1751	1774	isDragging
		@@ -1792,9 +1815,8 @@
1792	1815	function useKeyboardShortcut(shortcuts, callback, {
1793	1816	bindGlobal = false,
1794	1817	eventName = "keydown",
1795	1818	isDisabled = false,
1796		- // This is important for performance considerations.
1797	1819	target
1798	1820	} = {}) {
1799	1821	const currentCallbackRef = (0, import_element17.useRef)(callback);
1800	1822	(0, import_element17.useEffect)(() => {
		@@ -1808,10 +1830,8 @@
1808	1830	target && target.current ? target.current : (
1809	1831	// We were passing `document` here previously, so to successfully cast it to Element we must cast it first to `unknown`.
1810	1832	// 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
1811	1833	// necessary to maintain the existing behavior.
1812		- /** @type {Element} */
1813		- /** @type {unknown} */
1814	1834	document
1815	1835	)
1816	1836	);
1817	1837	const shortcutsArray = Array.isArray(shortcuts) ? shortcuts : [shortcuts];
		@@ -1849,9 +1869,9 @@
1849	1869	},
1850	1870	getValue: () => false
1851	1871	};
1852	1872	function getMQLSubscriber(view, query) {
1853		- if (!query || typeof view?.matchMedia !== "function") {
	1873	+ if (!view || !query || typeof view.matchMedia !== "function") {
1854	1874	return EMPTY_SUBSCRIBER;
1855	1875	}
1856	1876	let queryCache = perWindowCache.get(view);
1857	1877	if (!queryCache) {
		@@ -1888,9 +1908,9 @@
1888	1908	};
1889	1909	queryCache.set(query, subscriber);
1890	1910	return subscriber;
1891	1911	}
1892		- function useMediaQuery(query, view = window) {
	1912	+ function useMediaQuery(query, view = typeof window !== "undefined" ? window : void 0) {
1893	1913	const source = getMQLSubscriber(view, query);
1894	1914	return (0, import_element18.useSyncExternalStore)(
1895	1915	source.subscribe,
1896	1916	source.getValue,
		@@ -2008,16 +2028,13 @@
2008	2028	var OPERATOR_EVALUATORS = {
2009	2029	">=": (breakpointValue, width) => width >= breakpointValue,
2010	2030	"<": (breakpointValue, width) => width < breakpointValue
2011	2031	};
2012		- var ViewportMatchWidthContext = (0, import_element21.createContext)(
2013		- /** @type {null | number} */
2014		- null
2015		- );
	2032	+ var ViewportMatchWidthContext = (0, import_element21.createContext)(null);
2016	2033	ViewportMatchWidthContext.displayName = "ViewportMatchWidthContext";
2017		- var useViewportMatch = (breakpoint, operator = ">=", view = window) => {
	2034	+ var useViewportMatch = (breakpoint, operator = ">=", view = typeof window !== "undefined" ? window : void 0) => {
2018	2035	const simulatedWidth = (0, import_element21.useContext)(ViewportMatchWidthContext);
2019		- const mediaQuery = !simulatedWidth && `(${CONDITIONS[operator]}: ${BREAKPOINTS[breakpoint]}px)`;
	2036	+ const mediaQuery = !simulatedWidth && `screen and (${CONDITIONS[operator]}: ${BREAKPOINTS[breakpoint]}px)`;
2020	2037	const mediaQueryResult = useMediaQuery(mediaQuery || void 0, view);
2021	2038	if (simulatedWidth) {
2022	2039	return OPERATOR_EVALUATORS[operator](
2023	2040	BREAKPOINTS[breakpoint],
		@@ -2034,8 +2051,17 @@
2034	2051	function useResizeObserver(callback, resizeObserverOptions = {}) {
2035	2052	const callbackEvent = useEvent(callback);
2036	2053	const observedElementRef = (0, import_element22.useRef)(null);
2037	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	+ }, []);
2038	2064	return useEvent((element) => {
2039	2065	if (element === observedElementRef.current) {
2040	2066	return;
2041	2067	}
		@@ -2160,20 +2186,13 @@
2160	2186	// packages/compose/build-module/hooks/use-warn-on-change/index.mjs
2161	2187	function useWarnOnChange(object, prefix = "Change detection") {
2162	2188	const previousValues = usePrevious(object);
2163	2189	Object.entries(previousValues ?? []).forEach(([key, value]) => {
2164		- if (value !== object[
2165		- /** @type {keyof typeof object} */
2166		- key
2167		- ]) {
	2190	+ if (value !== object[key]) {
2168	2191	console.warn(
2169	2192	`${prefix}: ${key} key changed:`,
2170	2193	value,
2171		- object[
2172		- /** @type {keyof typeof object} */
2173		- key
2174		- ]
2175		- /* eslint-enable jsdoc/check-types */
	2194	+ object[key]
2176	2195	);
2177	2196	}
2178	2197	});
2179	2198	}
		@@ -2295,12 +2314,9 @@
2295	2314	}
2296	2315	}
2297	2316	function onDragEnter(event) {
2298	2317	event.preventDefault();
2299		- if (element.contains(
2300		- /** @type {Node} */
2301		- event.relatedTarget
2302		- )) {
	2318	+ if (element.contains(event.relatedTarget)) {
2303	2319	return;
2304	2320	}
2305	2321	if (_onDragEnter) {
2306	2322	onDragEnterEvent(event);
		@@ -2395,129 +2411,127 @@
2395	2411	var import_dom3 = __toESM(require_dom(), 1);
2396	2412	var import_keycodes2 = __toESM(require_keycodes(), 1);
2397	2413	var DEFAULT_INIT_WINDOW_SIZE = 30;
2398	2414	function useFixedWindowList(elementRef, itemHeight, totalItems, options) {
2399		- const initWindowSize = options?.initWindowSize ?? DEFAULT_INIT_WINDOW_SIZE;
2400		- const useWindowing = options?.useWindowing ?? true;
2401		- const [fixedListWindow, setFixedListWindow] = (0, import_element28.useState)({
2402		- visibleItems: initWindowSize,
2403		- start: 0,
2404		- end: initWindowSize,
2405		- itemInView: (index) => {
2406		- return index >= 0 && index <= initWindowSize;
	2415	+ const {
	2416	+ windowOverscan,
	2417	+ useWindowing = true,
	2418	+ initWindowSize = DEFAULT_INIT_WINDOW_SIZE,
	2419	+ expandedState
	2420	+ } = options ?? {};
	2421	+ const [fixedListWindow, setFixedListWindow] = (0, import_element28.useState)(
	2422	+ {
	2423	+ visibleItems: initWindowSize,
	2424	+ start: 0,
	2425	+ end: initWindowSize,
	2426	+ itemInView: (index) => {
	2427	+ return index >= 0 && index <= initWindowSize;
	2428	+ }
2407	2429	}
2408		- });
2409		- (0, import_element28.useLayoutEffect)(() => {
2410		- if (!useWindowing) {
	2430	+ );
	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) {
2411	2436	return;
2412	2437	}
2413		- const scrollContainer = (0, import_dom3.getScrollContainer)(elementRef.current);
2414		- const measureWindow = (initRender) => {
2415		- if (!scrollContainer) {
2416		- 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;
2417	2456	}
2418		- const visibleItems = Math.ceil(
2419		- scrollContainer.clientHeight / itemHeight
2420		- );
2421		- const windowOverscan = initRender ? visibleItems : options?.windowOverscan ?? visibleItems;
2422		- const firstViewableIndex = Math.floor(
2423		- scrollContainer.scrollTop / itemHeight
2424		- );
2425		- const start = Math.max(0, firstViewableIndex - windowOverscan);
2426		- const end = Math.min(
2427		- totalItems - 1,
2428		- firstViewableIndex + visibleItems + windowOverscan
2429		- );
2430		- setFixedListWindow((lastWindow) => {
2431		- const nextWindow = {
2432		- visibleItems,
2433		- start,
2434		- end,
2435		- itemInView: (index) => {
2436		- return start <= index && index <= end;
2437		- }
2438		- };
2439		- if (lastWindow.start !== nextWindow.start || lastWindow.end !== nextWindow.end || lastWindow.visibleItems !== nextWindow.visibleItems) {
2440		- 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;
2441	2466	}
2442		- return lastWindow;
2443		- });
2444		- };
2445		- measureWindow(true);
2446		- const debounceMeasureList = debounce(() => {
2447		- measureWindow();
2448		- }, 16);
2449		- scrollContainer?.addEventListener("scroll", debounceMeasureList);
2450		- scrollContainer?.ownerDocument?.defaultView?.addEventListener(
2451		- "resize",
2452		- debounceMeasureList
2453		- );
2454		- scrollContainer?.ownerDocument?.defaultView?.addEventListener(
2455		- "resize",
2456		- debounceMeasureList
2457		- );
2458		- return () => {
2459		- scrollContainer?.removeEventListener(
2460		- "scroll",
2461		- debounceMeasureList
2462		- );
2463		- scrollContainer?.ownerDocument?.defaultView?.removeEventListener(
2464		- "resize",
2465		- debounceMeasureList
2466		- );
2467		- };
2468		- }, [
2469		- itemHeight,
2470		- elementRef,
2471		- totalItems,
2472		- options?.expandedState,
2473		- options?.windowOverscan,
2474		- useWindowing
2475		- ]);
2476		- (0, import_element28.useLayoutEffect)(() => {
2477		- if (!useWindowing) {
2478		- return;
2479		- }
2480		- const scrollContainer = (0, import_dom3.getScrollContainer)(elementRef.current);
2481		- const handleKeyDown = (event) => {
	2467	+ };
	2468	+ });
	2469	+ });
	2470	+ const handleKeyDown = useEvent(
	2471	+ (event, scrollContainer) => {
2482	2472	switch (event.keyCode) {
2483	2473	case import_keycodes2.HOME: {
2484		- return scrollContainer?.scrollTo({ top: 0 });
	2474	+ return scrollContainer.scrollTo({ top: 0 });
2485	2475	}
2486	2476	case import_keycodes2.END: {
2487		- return scrollContainer?.scrollTo({
	2477	+ return scrollContainer.scrollTo({
2488	2478	top: totalItems * itemHeight
2489	2479	});
2490	2480	}
2491	2481	case import_keycodes2.PAGEUP: {
2492		- return scrollContainer?.scrollTo({
2493		- top: scrollContainer.scrollTop - fixedListWindow.visibleItems * itemHeight
	2482	+ return scrollContainer.scrollTo({
	2483	+ top: scrollContainer.scrollTop - visibleItemsRef.current * itemHeight
2494	2484	});
2495	2485	}
2496	2486	case import_keycodes2.PAGEDOWN: {
2497		- return scrollContainer?.scrollTo({
2498		- top: scrollContainer.scrollTop + fixedListWindow.visibleItems * itemHeight
	2487	+ return scrollContainer.scrollTo({
	2488	+ top: scrollContainer.scrollTop + visibleItemsRef.current * itemHeight
2499	2489	});
2500	2490	}
2501	2491	}
2502		- };
2503		- scrollContainer?.ownerDocument?.defaultView?.addEventListener(
2504		- "keydown",
2505		- handleKeyDown
2506		- );
	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);
2507	2521	return () => {
2508		- scrollContainer?.ownerDocument?.defaultView?.removeEventListener(
2509		- "keydown",
2510		- handleKeyDown
2511		- );
	2522	+ scrollContainer.removeEventListener("scroll", onMeasure);
	2523	+ defaultView?.removeEventListener("resize", onMeasure);
	2524	+ defaultView?.removeEventListener("keydown", onKeyDown);
2512	2525	};
2513	2526	}, [
	2527	+ useWindowing,
	2528	+ elementRef,
	2529	+ itemHeight,
2514	2530	totalItems,
2515		- itemHeight,
2516		- elementRef,
2517		- fixedListWindow.visibleItems,
2518		- useWindowing,
2519		- options?.expandedState
	2531	+ expandedState,
	2532	+ measureWindow,
	2533	+ handleKeyDown
2520	2534	]);
2521	2535	return [fixedListWindow, setFixedListWindow];
2522	2536	}
2523	2537
		@@ -2534,6 +2548,7 @@
2534	2548	return (0, import_element29.useSyncExternalStore)(subscribe, getValue, getValue);
2535	2549	}
2536	2550	return __toCommonJS(index_exports);
2537	2551	})();
2538		-if(wp.compose&&typeof wp.compose==='object'){wp.compose=Object.assign({},wp.compose);}
	2552	+(window.wp ||= {}).compose = wp.compose;
	2553	+})();
2539	2554	//# sourceMappingURL=index.js.map