@envive-ai/react-widgets 0.1.2-arthur-3 → 0.1.3

package/dist/SuggestionButtonContainer-CZhOkZaJ.js

@@ -1,167 +0,0 @@
-import { useEffect, useMemo, useRef } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useReducedMotionConfig } from "framer-motion";
-import { SpiffyWidgets } from "@envive-ai/react-hooks/application/models";
-import { SUGGESTION_BAR_BUTTON_TESTID } from "@envive-ai/react-hooks/config";
-import { useIsSmallScreen } from "@envive-ai/react-hooks/hooks/IsSmallScreen";
-import { useTrackComponentVisibleEvent } from "@envive-ai/react-hooks/hooks/TrackComponentVisibleEvent";
-import { SuggestionButton } from "@envive-ai/react-toolkit/SuggestionButton";
-
-//#region src/util/useReducedMotionWithOverride.ts
-const useReducedMotionWithOverride = () => {
-	const reducedMotionConfig = useReducedMotionConfig();
-	return useMemo(() => {
-		if (window?._spiffy?.reducedMotionOverride) return window?._spiffy?.reducedMotionOverride;
-		return reducedMotionConfig;
-	}, [reducedMotionConfig]);
-};
-
-//#endregion
-//#region src/util/useHorizontalScrollAnimation.ts
-function useHorizontalScrollAnimation({ scrollContainerRef, animationSpeed = "standard" }) {
-	const reducedMotion = useReducedMotionWithOverride();
-	const resumeTimeoutRef = useRef(null);
-	const scrollAnimationRef = useRef(null);
-	const pauseOnHover = true;
-	let PIXELS_PER_SECOND = 40;
-	switch (animationSpeed) {
-		case "standard":
-			PIXELS_PER_SECOND = 40;
-			break;
-		case "slow":
-			PIXELS_PER_SECOND = 25;
-			break;
-		case "none":
-			PIXELS_PER_SECOND = 0;
-			break;
-		default: PIXELS_PER_SECOND = 40;
-	}
-	const RESUME_DELAY_MS = 2e3;
-	const isAnimated = animationSpeed !== "none";
-	useEffect(() => {
-		if (!isAnimated || reducedMotion || !scrollContainerRef) return () => {};
-		const container = scrollContainerRef.current;
-		if (!container) return () => {};
-		if (container.scrollWidth <= container.clientWidth) return () => {};
-		let isPaused = false;
-		let lastTimestamp = null;
-		let accumulatedScroll = 0;
-		const step = (timestamp) => {
-			if (lastTimestamp === null) lastTimestamp = timestamp;
-			if (!isPaused) {
-				const delta = timestamp - lastTimestamp;
-				lastTimestamp = timestamp;
-				accumulatedScroll += PIXELS_PER_SECOND * (delta / 1e3);
-				const pixelsToScroll = Math.floor(accumulatedScroll);
-				if (pixelsToScroll > 0) {
-					container.scrollLeft += pixelsToScroll;
-					accumulatedScroll -= pixelsToScroll;
-					if (Math.ceil(container.scrollLeft) >= container.scrollWidth - container.clientWidth) {
-						container.scrollLeft = 0;
-						accumulatedScroll = 0;
-					}
-				}
-			}
-			scrollAnimationRef.current = requestAnimationFrame(step);
-		};
-		scrollAnimationRef.current = requestAnimationFrame(step);
-		const pauseAnimation = () => {
-			isPaused = true;
-			if (resumeTimeoutRef.current) {
-				clearTimeout(resumeTimeoutRef.current);
-				resumeTimeoutRef.current = null;
-			}
-		};
-		const scheduleResumeAnimation = () => {
-			resumeTimeoutRef.current = setTimeout(() => {
-				isPaused = false;
-				lastTimestamp = null;
-			}, RESUME_DELAY_MS);
-		};
-		container.addEventListener("mouseenter", pauseAnimation);
-		container.addEventListener("mouseleave", scheduleResumeAnimation);
-		container.addEventListener("touchstart", pauseAnimation);
-		container.addEventListener("touchend", scheduleResumeAnimation);
-		return function cleanup() {
-			if (scrollAnimationRef.current) cancelAnimationFrame(scrollAnimationRef.current);
-			container.removeEventListener("mouseenter", pauseAnimation);
-			container.removeEventListener("mouseleave", scheduleResumeAnimation);
-			container.removeEventListener("touchstart", pauseAnimation);
-			container.removeEventListener("touchend", scheduleResumeAnimation);
-			if (resumeTimeoutRef.current) clearTimeout(resumeTimeoutRef.current);
-		};
-	}, [
-		isAnimated,
-		reducedMotion,
-		PIXELS_PER_SECOND,
-		pauseOnHover,
-		scrollContainerRef
-	]);
-}
-
-//#endregion
-//#region src/SuggestionButtonContainer/SuggestionButtonContainer.tsx
-function ButtonContainer({ children }) {
-	return /* @__PURE__ */ jsx("div", {
-		className: "spiffy-tw-flex \n      spiffy-tw-flex-row\n      spiffy-tw-items-center\n      spiffy-tw-space-x-2\n      spiffy-tw-h-full\n      spiffy-tw-pl-0",
-		children
-	});
-}
-const SuggestionButtonContainer = ({ buttonVariation, hoverButtonVariation, buttonTexts, boldFirstButton = false, twoRowsOnMobile = false, animationSpeed = "none", buttonBorderRadius = "lg", scrollContainerRef, onButtonClick }) => {
-	const componentVisibleTriggerRef = useRef(null);
-	useHorizontalScrollAnimation({
-		scrollContainerRef,
-		animationSpeed
-	});
-	const isSmallScreen = useIsSmallScreen();
-	const isAnimated = animationSpeed !== "none";
-	useTrackComponentVisibleEvent(SpiffyWidgets.SuggestionBar, componentVisibleTriggerRef, { animated: isAnimated });
-	const visibleButtonsFirstRow = buttonTexts.slice(0, twoRowsOnMobile && isSmallScreen ? Math.ceil((buttonTexts.length + 1) / 2) : void 0);
-	const visibleButtonsSecondRow = buttonTexts.slice(Math.ceil((buttonTexts.length + 1) / 2), buttonTexts.length);
-	return /* @__PURE__ */ jsxs("div", {
-		className: "spiffy-tw-overflow-x-scroll spiffy-tw-no-scrollbar spiffy-tw-w-full spiffy-tw-whitespace-nowrap",
-		children: [/* @__PURE__ */ jsxs(ButtonContainer, { children: [visibleButtonsFirstRow.map((suggestion, i) => /* @__PURE__ */ jsx(SuggestionButton, {
-			variant: buttonVariation,
-			hoverVariant: hoverButtonVariation,
-			isDisabled: false,
-			content: suggestion,
-			boldText: boldFirstButton && i === 0,
-			borderRadius: buttonBorderRadius,
-			onClick: () => onButtonClick(suggestion),
-			dataTestId: SUGGESTION_BAR_BUTTON_TESTID
-		}, i)), isAnimated && buttonTexts.map((suggestion, i) => /* @__PURE__ */ jsx(SuggestionButton, {
-			variant: buttonVariation,
-			hoverVariant: hoverButtonVariation,
-			isDisabled: false,
-			content: suggestion,
-			boldText: boldFirstButton && i === 0,
-			borderRadius: buttonBorderRadius,
-			onClick: () => onButtonClick(suggestion),
-			dataTestId: SUGGESTION_BAR_BUTTON_TESTID
-		}, `animation-dupe-${i}`))] }), twoRowsOnMobile && isSmallScreen && /* @__PURE__ */ jsx("div", {
-			className: "spiffy-tw-mt-1.5",
-			children: /* @__PURE__ */ jsxs(ButtonContainer, { children: [visibleButtonsSecondRow.map((suggestion, i) => /* @__PURE__ */ jsx(SuggestionButton, {
-				variant: buttonVariation,
-				hoverVariant: hoverButtonVariation,
-				isDisabled: false,
-				content: suggestion,
-				boldText: boldFirstButton && i === 0,
-				borderRadius: buttonBorderRadius,
-				onClick: () => onButtonClick(suggestion),
-				dataTestId: SUGGESTION_BAR_BUTTON_TESTID
-			}, i)), isAnimated && visibleButtonsSecondRow.map((suggestion, i) => /* @__PURE__ */ jsx(SuggestionButton, {
-				variant: buttonVariation,
-				hoverVariant: hoverButtonVariation,
-				isDisabled: false,
-				content: suggestion,
-				boldText: boldFirstButton && i === 0,
-				borderRadius: buttonBorderRadius,
-				onClick: () => onButtonClick(suggestion),
-				dataTestId: SUGGESTION_BAR_BUTTON_TESTID
-			}, `animation-dupe-${i}`))] })
-		})]
-	});
-};
-
-//#endregion
-export { SuggestionButtonContainer as t };