@primer/react 38.31.0-rc.f96563b64 → 38.31.1-rc.43134a516

package/dist/UnderlineNav/UnderlineNav.js

@@ -6,91 +6,242 @@ import { ActionList } from "../ActionList/index.js";
 import { ActionMenu } from "../ActionMenu/ActionMenu.js";
 import { SkeletonText } from "../SkeletonText/SkeletonText.js";
 import { LoadingCounter, UnderlineItemList, UnderlineWrapper } from "../internal/components/UnderlineTabbedInterface.js";
+import { OverflowObserverProvider } from "../internal/components/OverflowObserverProvider.js";
 import UnderlineNav_module_css_default from "./UnderlineNav.module.css.js";
 import { UnderlineNavContext } from "./UnderlineNavContext.js";
 import { UnderlineNavItemsRegistry } from "./UnderlineNavItemsRegistry.js";
 import { getValidChildren, isCurrent } from "./utils.js";
+import { c } from "react-compiler-runtime";
 import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef, useMemo, useRef, useState } from "react";
+import { forwardRef, useRef, useState } from "react";
 //#region src/UnderlineNav/UnderlineNav.tsx
-const UnderlineNav = /*#__PURE__*/ forwardRef(({ as = "nav", "aria-label": ariaLabel, loadingCounters = false, variant = "inset", className, children }, forwardedRef) => {
-	var _registeredItems$entr;
+const UnderlineNav = /*#__PURE__*/ forwardRef((t0, forwardedRef) => {
+	const $ = c(52);
+	const { as: t1, "aria-label": ariaLabel, loadingCounters: t2, variant: t3, className, children } = t0;
+	const as = t1 === void 0 ? "nav" : t1;
+	const loadingCounters = t2 === void 0 ? false : t2;
+	const variant = t3 === void 0 ? "inset" : t3;
 	const backupRef = useRef(null);
 	const navRef = forwardedRef !== null && forwardedRef !== void 0 ? forwardedRef : backupRef;
 	const listRef = useRef(null);
-	/** Tracks whether any item has ever overflowed for the lifecycle of this component. Used to prevent flickering. */
 	const [hasEverOverflowed, setHasOverflowed] = useState(false);
 	const [registeredItems, setRegisteredItems] = UnderlineNavItemsRegistry.useRegistryState();
-	const overflowMenuItems = Array.from((_registeredItems$entr = registeredItems === null || registeredItems === void 0 ? void 0 : registeredItems.entries()) !== null && _registeredItems$entr !== void 0 ? _registeredItems$entr : []).filter((entry) => entry[1] !== null);
-	const isOverflowing = overflowMenuItems.length > 0;
-	if (isOverflowing && !hasEverOverflowed) setHasOverflowed(true);
-	const overflowingCurrentItem = overflowMenuItems.some(([, itemProps]) => isCurrent(itemProps));
-	const validChildren = getValidChildren(children);
-	useDevOnlyEffect(() => {
-		!(validChildren.filter((child) => isCurrent(child.props)).length <= 1) && invariant(false, "Only one current element is allowed");
-		!ariaLabel && invariant(false, "Use the `aria-label` prop to provide an accessible label for assistive technology");
-	}, [validChildren, ariaLabel]);
-	const contextValue = useMemo(() => ({ loadingCounters }), [loadingCounters]);
+	let isOverflowing;
+	let overflowMenuItems;
+	let t4;
+	if ($[0] !== hasEverOverflowed || $[1] !== registeredItems) {
+		var _registeredItems$entr;
+		overflowMenuItems = Array.from((_registeredItems$entr = registeredItems === null || registeredItems === void 0 ? void 0 : registeredItems.entries()) !== null && _registeredItems$entr !== void 0 ? _registeredItems$entr : []).filter(_temp);
+		isOverflowing = overflowMenuItems.length > 0;
+		if (isOverflowing && !hasEverOverflowed) setHasOverflowed(true);
+		t4 = overflowMenuItems.some(_temp2);
+		$[0] = hasEverOverflowed;
+		$[1] = registeredItems;
+		$[2] = isOverflowing;
+		$[3] = overflowMenuItems;
+		$[4] = t4;
+	} else {
+		isOverflowing = $[2];
+		overflowMenuItems = $[3];
+		t4 = $[4];
+	}
+	const overflowingCurrentItem = t4;
+	let t5;
+	if ($[5] !== children) {
+		t5 = getValidChildren(children);
+		$[5] = children;
+		$[6] = t5;
+	} else t5 = $[6];
+	const validChildren = t5;
+	let t6;
+	let t7;
+	if ($[7] !== ariaLabel || $[8] !== validChildren) {
+		t6 = () => {
+			!(validChildren.filter(_temp3).length <= 1) && invariant(false, "Only one current element is allowed");
+			!ariaLabel && invariant(false, "Use the `aria-label` prop to provide an accessible label for assistive technology");
+		};
+		t7 = [validChildren, ariaLabel];
+		$[7] = ariaLabel;
+		$[8] = validChildren;
+		$[9] = t6;
+		$[10] = t7;
+	} else {
+		t6 = $[9];
+		t7 = $[10];
+	}
+	useDevOnlyEffect(t6, t7);
+	let t8;
+	if ($[11] !== loadingCounters) {
+		t8 = { loadingCounters };
+		$[11] = loadingCounters;
+		$[12] = t8;
+	} else t8 = $[12];
+	const contextValue = t8;
 	const [menuOpen, setMenuOpen] = useState(false);
 	if (menuOpen && !isOverflowing) setMenuOpen(false);
-	return /*#__PURE__*/ jsxs(UnderlineNavContext.Provider, {
-		value: contextValue,
-		children: [ariaLabel && /*#__PURE__*/ jsx(VisuallyHidden, {
+	let t9;
+	if ($[13] !== ariaLabel) {
+		t9 = ariaLabel && /*#__PURE__*/ jsx(VisuallyHidden, {
 			as: "h2",
 			children: `${ariaLabel} navigation`
-		}), /*#__PURE__*/ jsxs(UnderlineWrapper, {
+		});
+		$[13] = ariaLabel;
+		$[14] = t9;
+	} else t9 = $[14];
+	let t10;
+	if ($[15] !== className) {
+		t10 = clsx(UnderlineNav_module_css_default.UnderlineWrapper, className);
+		$[15] = className;
+		$[16] = t10;
+	} else t10 = $[16];
+	const t11 = hasEverOverflowed ? "true" : void 0;
+	const t12 = isOverflowing ? "true" : void 0;
+	let t13;
+	if ($[17] !== children || $[18] !== setRegisteredItems) {
+		t13 = /*#__PURE__*/ jsx(UnderlineNavItemsRegistry.Provider, {
+			setRegistry: setRegisteredItems,
+			children
+		});
+		$[17] = children;
+		$[18] = setRegisteredItems;
+		$[19] = t13;
+	} else t13 = $[19];
+	let t14;
+	if ($[20] !== navRef || $[21] !== t13) {
+		t14 = /*#__PURE__*/ jsx(UnderlineItemList, {
+			ref: listRef,
+			role: "list",
+			className: UnderlineNav_module_css_default.ItemsList,
+			children: /*#__PURE__*/ jsx(OverflowObserverProvider, {
+				rootRef: navRef,
+				children: t13
+			})
+		});
+		$[20] = navRef;
+		$[21] = t13;
+		$[22] = t14;
+	} else t14 = $[22];
+	let t15;
+	if ($[23] === Symbol.for("react.memo_cache_sentinel")) {
+		t15 = /*#__PURE__*/ jsx("div", { className: UnderlineNav_module_css_default.MoreButtonDivider });
+		$[23] = t15;
+	} else t15 = $[23];
+	const t16 = overflowingCurrentItem ? "true" : void 0;
+	const t17 = overflowingCurrentItem ? "More items, including current item" : void 0;
+	let t18;
+	if ($[24] === Symbol.for("react.memo_cache_sentinel")) {
+		t18 = /*#__PURE__*/ jsxs("span", { children: ["More", /*#__PURE__*/ jsx(VisuallyHidden, {
+			as: "span",
+			children: " items"
+		})] });
+		$[24] = t18;
+	} else t18 = $[24];
+	let t19;
+	if ($[25] !== t16 || $[26] !== t17) {
+		t19 = /*#__PURE__*/ jsx(ActionMenu.Button, {
+			className: UnderlineNav_module_css_default.MoreButton,
+			variant: "invisible",
+			"data-component": "overflow-menu-button",
+			"data-current": t16,
+			"aria-label": t17,
+			children: t18
+		});
+		$[25] = t16;
+		$[26] = t17;
+		$[27] = t19;
+	} else t19 = $[27];
+	let t20;
+	if ($[28] !== loadingCounters || $[29] !== overflowMenuItems || $[30] !== registeredItems) {
+		t20 = registeredItems === void 0 ? /*#__PURE__*/ jsx(ActionList.Item, { children: /*#__PURE__*/ jsx(SkeletonText, {}) }) : overflowMenuItems.map((t21) => {
+			const [key, allProps] = t21;
+			const { children: menuItemChildren, counter, onSelect, ...menuItemProps } = allProps;
+			return /*#__PURE__*/ jsxs(ActionList.LinkItem, {
+				onClick: (event) => onSelect === null || onSelect === void 0 ? void 0 : onSelect(event),
+				...menuItemProps,
+				className: UnderlineNav_module_css_default.OverflowMenuItem,
+				children: [/*#__PURE__*/ jsx("span", {
+					className: UnderlineNav_module_css_default.OverflowMenuItemLabel,
+					children: menuItemChildren
+				}), loadingCounters ? /*#__PURE__*/ jsx(ActionList.TrailingVisual, { children: /*#__PURE__*/ jsx(LoadingCounter, {}) }) : counter !== void 0 && /*#__PURE__*/ jsx(ActionList.TrailingVisual, { children: /*#__PURE__*/ jsx("span", {
+					"data-component": "counter",
+					children: /*#__PURE__*/ jsx(CounterLabel, { children: counter })
+				}) })]
+			}, key);
+		});
+		$[28] = loadingCounters;
+		$[29] = overflowMenuItems;
+		$[30] = registeredItems;
+		$[31] = t20;
+	} else t20 = $[31];
+	let t21;
+	if ($[32] !== t20) {
+		t21 = /*#__PURE__*/ jsx(ActionMenu.Overlay, { children: /*#__PURE__*/ jsx(ActionList, { children: t20 }) });
+		$[32] = t20;
+		$[33] = t21;
+	} else t21 = $[33];
+	let t22;
+	if ($[34] !== menuOpen || $[35] !== t19 || $[36] !== t21) {
+		t22 = /*#__PURE__*/ jsxs("div", {
+			className: UnderlineNav_module_css_default.MoreButtonContainer,
+			children: [t15, /*#__PURE__*/ jsxs(ActionMenu, {
+				open: menuOpen,
+				onOpenChange: setMenuOpen,
+				children: [t19, t21]
+			})]
+		});
+		$[34] = menuOpen;
+		$[35] = t19;
+		$[36] = t21;
+		$[37] = t22;
+	} else t22 = $[37];
+	let t23;
+	if ($[38] !== ariaLabel || $[39] !== as || $[40] !== navRef || $[41] !== t10 || $[42] !== t11 || $[43] !== t12 || $[44] !== t14 || $[45] !== t22 || $[46] !== variant) {
+		t23 = /*#__PURE__*/ jsxs(UnderlineWrapper, {
 			as,
 			"aria-label": ariaLabel,
-			className: clsx(UnderlineNav_module_css_default.UnderlineWrapper, className),
+			className: t10,
 			ref: navRef,
 			"data-variant": variant,
 			"data-overflow-mode": "wrap",
-			"data-hide-icons": hasEverOverflowed ? "true" : void 0,
-			"data-has-overflow": isOverflowing ? "true" : void 0,
-			children: [/*#__PURE__*/ jsx(UnderlineItemList, {
-				ref: listRef,
-				role: "list",
-				className: UnderlineNav_module_css_default.ItemsList,
-				children: /*#__PURE__*/ jsx(UnderlineNavItemsRegistry.Provider, {
-					setRegistry: setRegisteredItems,
-					children
-				})
-			}), /*#__PURE__*/ jsxs("div", {
-				className: UnderlineNav_module_css_default.MoreButtonContainer,
-				children: [/*#__PURE__*/ jsx("div", { className: UnderlineNav_module_css_default.MoreButtonDivider }), /*#__PURE__*/ jsxs(ActionMenu, {
-					open: menuOpen,
-					onOpenChange: setMenuOpen,
-					children: [/*#__PURE__*/ jsx(ActionMenu.Button, {
-						className: UnderlineNav_module_css_default.MoreButton,
-						variant: "invisible",
-						"data-component": "overflow-menu-button",
-						"data-current": overflowingCurrentItem ? "true" : void 0,
-						"aria-label": overflowingCurrentItem ? `More items, including current item` : void 0,
-						children: /*#__PURE__*/ jsxs("span", { children: ["More", /*#__PURE__*/ jsx(VisuallyHidden, {
-							as: "span",
-							children: " items"
-						})] })
-					}), /*#__PURE__*/ jsx(ActionMenu.Overlay, { children: /*#__PURE__*/ jsx(ActionList, { children: registeredItems === void 0 ? /*#__PURE__*/ jsx(ActionList.Item, { children: /*#__PURE__*/ jsx(SkeletonText, {}) }) : overflowMenuItems.map(([key, allProps]) => {
-						const { children: menuItemChildren, counter, onSelect, ...menuItemProps } = allProps;
-						return /*#__PURE__*/ jsxs(ActionList.LinkItem, {
-							onClick: (event) => onSelect === null || onSelect === void 0 ? void 0 : onSelect(event),
-							...menuItemProps,
-							className: UnderlineNav_module_css_default.OverflowMenuItem,
-							children: [/*#__PURE__*/ jsx("span", {
-								className: UnderlineNav_module_css_default.OverflowMenuItemLabel,
-								children: menuItemChildren
-							}), loadingCounters ? /*#__PURE__*/ jsx(ActionList.TrailingVisual, { children: /*#__PURE__*/ jsx(LoadingCounter, {}) }) : counter !== void 0 && /*#__PURE__*/ jsx(ActionList.TrailingVisual, { children: /*#__PURE__*/ jsx("span", {
-								"data-component": "counter",
-								children: /*#__PURE__*/ jsx(CounterLabel, { children: counter })
-							}) })]
-						}, key);
-					}) }) })]
-				})]
-			})]
-		})]
-	});
+			"data-hide-icons": t11,
+			"data-has-overflow": t12,
+			children: [t14, t22]
+		});
+		$[38] = ariaLabel;
+		$[39] = as;
+		$[40] = navRef;
+		$[41] = t10;
+		$[42] = t11;
+		$[43] = t12;
+		$[44] = t14;
+		$[45] = t22;
+		$[46] = variant;
+		$[47] = t23;
+	} else t23 = $[47];
+	let t24;
+	if ($[48] !== contextValue || $[49] !== t23 || $[50] !== t9) {
+		t24 = /*#__PURE__*/ jsxs(UnderlineNavContext.Provider, {
+			value: contextValue,
+			children: [t9, t23]
+		});
+		$[48] = contextValue;
+		$[49] = t23;
+		$[50] = t9;
+		$[51] = t24;
+	} else t24 = $[51];
+	return t24;
 });
 UnderlineNav.displayName = "UnderlineNav";
+function _temp(entry) {
+	return entry[1] !== null;
+}
+function _temp2(t0) {
+	const [, itemProps] = t0;
+	return isCurrent(itemProps);
+}
+function _temp3(child) {
+	return isCurrent(child.props);
+}
 //#endregion
 export { UnderlineNav };

package/dist/UnderlineNav/UnderlineNavItem.js

@@ -1,31 +1,77 @@
 import { UnderlineItem } from "../internal/components/UnderlineTabbedInterface.js";
+import { useIsClipped } from "../internal/hooks/useOverflowObserver.js";
 import { UnderlineNavContext } from "./UnderlineNavContext.js";
 import { UnderlineNavItemsRegistry } from "./UnderlineNavItemsRegistry.js";
 import UnderlineNavItem_module_css_default from "./UnderlineNavItem.module.css.js";
+import { c } from "react-compiler-runtime";
 import { jsx } from "react/jsx-runtime";
-import React, { forwardRef, useCallback, useContext, useRef, useSyncExternalStore } from "react";
+import { forwardRef, useContext, useRef } from "react";
 //#region src/UnderlineNav/UnderlineNavItem.tsx
 const UnderlineNavItem = /*#__PURE__*/ forwardRef((allProps, forwardedRef) => {
-	const { as: Component = "a", href = "#", children, counter, onSelect, "aria-current": ariaCurrent, icon: Icon, leadingVisual, ...props } = allProps;
+	var _leadingVisual;
+	const $ = c(30);
+	let Icon;
+	let ariaCurrent;
+	let children;
+	let counter;
+	let leadingVisual;
+	let onSelect;
+	let props;
+	let t0;
+	let t1;
+	if ($[0] !== allProps) {
+		({as: t0, href: t1, children, counter, onSelect, "aria-current": ariaCurrent, icon: Icon, leadingVisual, ...props} = allProps);
+		$[0] = allProps;
+		$[1] = Icon;
+		$[2] = ariaCurrent;
+		$[3] = children;
+		$[4] = counter;
+		$[5] = leadingVisual;
+		$[6] = onSelect;
+		$[7] = props;
+		$[8] = t0;
+		$[9] = t1;
+	} else {
+		Icon = $[1];
+		ariaCurrent = $[2];
+		children = $[3];
+		counter = $[4];
+		leadingVisual = $[5];
+		onSelect = $[6];
+		props = $[7];
+		t0 = $[8];
+		t1 = $[9];
+	}
+	const Component = t0 === void 0 ? "a" : t0;
+	const href = t1 === void 0 ? "#" : t1;
 	const ref = useRef(null);
 	const { loadingCounters } = useContext(UnderlineNavContext);
-	const isOverflowing = useSyncExternalStore(useCallback((onChange) => {
-		const observer = new IntersectionObserver(() => onChange(), { threshold: 1 });
-		if (ref.current) observer.observe(ref.current);
-		return () => observer.disconnect();
-	}, [ref]), () => ref.current ? ref.current.offsetTop > 0 : false, () => false);
+	const isOverflowing = useIsClipped(ref);
 	UnderlineNavItemsRegistry.useRegisterDescendant(isOverflowing ? allProps : null);
-	const keyDownHandler = React.useCallback((event) => {
-		if ((event.key === " " || event.key === "Enter") && !event.defaultPrevented && typeof onSelect === "function") onSelect(event);
-	}, [onSelect]);
-	const clickHandler = React.useCallback((event) => {
-		if (!event.defaultPrevented && typeof onSelect === "function") onSelect(event);
-	}, [onSelect]);
-	return /*#__PURE__*/ jsx("li", {
-		className: UnderlineNavItem_module_css_default.UnderlineNavItem,
-		ref,
-		"aria-hidden": isOverflowing ? true : allProps["aria-hidden"],
-		children: /*#__PURE__*/ jsx(UnderlineItem, {
+	let t2;
+	if ($[10] !== onSelect) {
+		t2 = (event) => {
+			if ((event.key === " " || event.key === "Enter") && !event.defaultPrevented && typeof onSelect === "function") onSelect(event);
+		};
+		$[10] = onSelect;
+		$[11] = t2;
+	} else t2 = $[11];
+	const keyDownHandler = t2;
+	let t3;
+	if ($[12] !== onSelect) {
+		t3 = (event_0) => {
+			if (!event_0.defaultPrevented && typeof onSelect === "function") onSelect(event_0);
+		};
+		$[12] = onSelect;
+		$[13] = t3;
+	} else t3 = $[13];
+	const clickHandler = t3;
+	const t4 = isOverflowing ? true : allProps["aria-hidden"];
+	const t5 = (_leadingVisual = leadingVisual) !== null && _leadingVisual !== void 0 ? _leadingVisual : Icon;
+	const t6 = isOverflowing ? -1 : allProps.tabIndex;
+	let t7;
+	if ($[14] !== Component || $[15] !== ariaCurrent || $[16] !== children || $[17] !== clickHandler || $[18] !== counter || $[19] !== forwardedRef || $[20] !== href || $[21] !== keyDownHandler || $[22] !== loadingCounters || $[23] !== props || $[24] !== t5 || $[25] !== t6) {
+		t7 = /*#__PURE__*/ jsx(UnderlineItem, {
 			ref: forwardedRef,
 			as: Component,
 			href,
@@ -33,13 +79,39 @@ const UnderlineNavItem = /*#__PURE__*/ forwardRef((allProps, forwardedRef) => {
 			onKeyDown: keyDownHandler,
 			onClick: clickHandler,
 			counter,
-			icon: leadingVisual !== null && leadingVisual !== void 0 ? leadingVisual : Icon,
+			icon: t5,
 			loadingCounters,
 			...props,
-			tabIndex: isOverflowing ? -1 : allProps.tabIndex,
+			tabIndex: t6,
 			children
-		})
-	});
+		});
+		$[14] = Component;
+		$[15] = ariaCurrent;
+		$[16] = children;
+		$[17] = clickHandler;
+		$[18] = counter;
+		$[19] = forwardedRef;
+		$[20] = href;
+		$[21] = keyDownHandler;
+		$[22] = loadingCounters;
+		$[23] = props;
+		$[24] = t5;
+		$[25] = t6;
+		$[26] = t7;
+	} else t7 = $[26];
+	let t8;
+	if ($[27] !== t4 || $[28] !== t7) {
+		t8 = /*#__PURE__*/ jsx("li", {
+			className: UnderlineNavItem_module_css_default.UnderlineNavItem,
+			ref,
+			"aria-hidden": t4,
+			children: t7
+		});
+		$[27] = t4;
+		$[28] = t7;
+		$[29] = t8;
+	} else t8 = $[29];
+	return t8;
 });
 UnderlineNavItem.displayName = "UnderlineNavItem";
 //#endregion

package/dist/hooks/useMergedRefs.js

@@ -1,5 +1,6 @@
 import { isExperimentalReactVersion, reactMajorVersion } from "../utils/environment.js";
-import { useCallback } from "react";
+import { c } from "react-compiler-runtime";
+import "react";
 //#region src/hooks/useMergedRefs.ts
 /**
 * Cleanup functions for refs were introduced in React 19. For feature detection,
@@ -40,17 +41,25 @@ const supportsRefCleanup = reactMajorVersion >= 19 || isExperimentalReactVersion
 * }
 */
 function useMergedRefs(refA, refB) {
-	return useCallback((value) => {
-		const cleanupA = setRef(refA, value);
-		const cleanupB = setRef(refB, value);
-		if (!supportsRefCleanup) return;
-		return () => {
-			if (cleanupA) cleanupA();
-			else setRef(refA, null);
-			if (cleanupB) cleanupB();
-			else setRef(refB, null);
+	const $ = c(3);
+	let t0;
+	if ($[0] !== refA || $[1] !== refB) {
+		t0 = (value) => {
+			const cleanupA = setRef(refA, value);
+			const cleanupB = setRef(refB, value);
+			if (!supportsRefCleanup) return;
+			return () => {
+				if (cleanupA) cleanupA();
+				else setRef(refA, null);
+				if (cleanupB) cleanupB();
+				else setRef(refB, null);
+			};
 		};
-	}, [refA, refB]);
+		$[0] = refA;
+		$[1] = refB;
+		$[2] = t0;
+	} else t0 = $[2];
+	return t0;
 }
 /**
 * React 19 supports callback refs that can return a cleanup function. If a cleanup function is returned, the

package/dist/hooks/useScrollFlash.js

@@ -1,3 +1,4 @@
+import { c } from "react-compiler-runtime";
 import { useEffect } from "react";
 //#region src/hooks/useScrollFlash.ts
 /**
@@ -5,16 +6,29 @@ import { useEffect } from "react";
 * @param scrollContainerRef The ref of the scrollable content
 */
 function useScrollFlash(scrollContainerRef) {
-	useEffect(() => {
-		const scrollContainer = scrollContainerRef.current;
-		if (!scrollContainer) return;
-		const id = requestAnimationFrame(() => {
-			const currentScroll = scrollContainer.scrollTop;
-			scrollContainer.scrollTop = currentScroll < 1 ? currentScroll + 1 : currentScroll - 1;
-			scrollContainer.scrollTop = currentScroll;
-		});
-		return () => cancelAnimationFrame(id);
-	}, [scrollContainerRef]);
+	const $ = c(3);
+	let t0;
+	let t1;
+	if ($[0] !== scrollContainerRef) {
+		t0 = () => {
+			const scrollContainer = scrollContainerRef.current;
+			if (!scrollContainer) return;
+			const id = requestAnimationFrame(() => {
+				const currentScroll = scrollContainer.scrollTop;
+				scrollContainer.scrollTop = currentScroll < 1 ? currentScroll + 1 : currentScroll - 1;
+				scrollContainer.scrollTop = currentScroll;
+			});
+			return () => cancelAnimationFrame(id);
+		};
+		t1 = [scrollContainerRef];
+		$[0] = scrollContainerRef;
+		$[1] = t0;
+		$[2] = t1;
+	} else {
+		t0 = $[1];
+		t1 = $[2];
+	}
+	useEffect(t0, t1);
 }
 //#endregion
 export { useScrollFlash as default };