@mcp-b/react-components 0.10.0 → 0.12.0

package/dist/components/useStickToBottom.js

@@ -1,107 +0,0 @@
-import * as React from "react";
-//#region src/components/useStickToBottom.ts
-const DEFAULT_STICK_SLACK_PX = 160;
-/**
-* Pin a scrollable viewport to the bottom as its content grows, unless the
-* user has scrolled up.
-*
-* @deprecated Use MessageScroller for chat transcripts. Keep this only for
-* standalone streaming panes that do not need transcript row anchoring,
-* history prepending, visibility tracking, or jump-to-message behavior.
-*/
-function useStickToBottom(options = {}) {
-	const slackPx = options.slackPx ?? DEFAULT_STICK_SLACK_PX;
-	const viewportElementRef = React.useRef(null);
-	const contentElementRef = React.useRef(null);
-	const [viewportElement, setViewportElement] = React.useState(null);
-	const [contentElement, setContentElement] = React.useState(null);
-	const [isAtBottom, setIsAtBottom] = React.useState(true);
-	const isAtBottomRef = React.useRef(true);
-	const didInitialScrollRef = React.useRef(false);
-	const viewportRef = React.useCallback((element) => {
-		viewportElementRef.current = element;
-		setViewportElement((prev) => prev === element ? prev : element);
-	}, []);
-	const contentRef = React.useCallback((element) => {
-		contentElementRef.current = element;
-		setContentElement((prev) => prev === element ? prev : element);
-	}, []);
-	React.useLayoutEffect(() => {
-		const el = viewportElement;
-		const observed = contentElement ?? el?.firstElementChild;
-		if (!el || !observed) return;
-		if (!didInitialScrollRef.current) {
-			el.scrollTo({
-				top: el.scrollHeight,
-				behavior: "auto"
-			});
-			didInitialScrollRef.current = true;
-		}
-		const readIsAtBottom = () => el.scrollHeight - el.scrollTop - el.clientHeight < slackPx;
-		let lastInteractionAt = 0;
-		const markInteraction = () => {
-			lastInteractionAt = Date.now();
-		};
-		const isUserResize = () => Date.now() - lastInteractionAt < 600;
-		const updateIsAtBottom = () => {
-			const next = readIsAtBottom();
-			if (isAtBottomRef.current === next) return;
-			isAtBottomRef.current = next;
-			setIsAtBottom(next);
-		};
-		let resizeFrameId = null;
-		const flushResize = () => {
-			resizeFrameId = null;
-			if (!isAtBottomRef.current || isUserResize()) {
-				updateIsAtBottom();
-				return;
-			}
-			el.scrollTo({
-				top: el.scrollHeight,
-				behavior: "auto"
-			});
-			updateIsAtBottom();
-		};
-		const scheduleResize = () => {
-			if (resizeFrameId !== null) return;
-			resizeFrameId = window.requestAnimationFrame(flushResize);
-		};
-		const handleScroll = () => {
-			updateIsAtBottom();
-		};
-		handleScroll();
-		el.addEventListener("scroll", handleScroll, { passive: true });
-		el.addEventListener("pointerdown", markInteraction, { passive: true });
-		el.addEventListener("keydown", markInteraction, { passive: true });
-		const observer = new ResizeObserver(() => {
-			scheduleResize();
-		});
-		observer.observe(observed);
-		return () => {
-			if (resizeFrameId !== null) window.cancelAnimationFrame(resizeFrameId);
-			el.removeEventListener("scroll", handleScroll);
-			el.removeEventListener("pointerdown", markInteraction);
-			el.removeEventListener("keydown", markInteraction);
-			observer.disconnect();
-		};
-	}, [
-		contentElement,
-		viewportElement,
-		slackPx
-	]);
-	return {
-		viewportRef,
-		contentRef,
-		isAtBottom,
-		scrollToBottom: React.useCallback((behavior = "smooth") => {
-			const el = viewportElementRef.current;
-			if (!el) return;
-			el.scrollTo({
-				top: el.scrollHeight,
-				behavior
-			});
-		}, [])
-	};
-}
-//#endregion
-export { useStickToBottom };