@envive-ai/react-widgets 0.1.2 → 0.3.0

package/dist/packages/icons/dist/node_modules/react/jsx-runtime.js

@@ -0,0 +1,13 @@
+import { __commonJS } from "../../_virtual/rolldown_runtime.js";
+import { require_react_jsx_runtime_production_min } from "./cjs/react-jsx-runtime.production.min.js";
+import { require_react_jsx_runtime_development } from "./cjs/react-jsx-runtime.development.js";
+
+//#region ../icons/dist/node_modules/react/jsx-runtime.js
+var require_jsx_runtime = /* @__PURE__ */ __commonJS({ "../../node_modules/react/jsx-runtime.js": ((exports, module) => {
+	if (process.env.NODE_ENV === "production") module.exports = require_react_jsx_runtime_production_min();
+	else module.exports = require_react_jsx_runtime_development();
+}) });
+var jsx_runtime_default = require_jsx_runtime();
+
+//#endregion
+export { require_jsx_runtime };

package/dist/util/useHorizontalScrollAnimation.cjs

@@ -0,0 +1,88 @@
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+const require_useReducedMotionWithOverride = require('./useReducedMotionWithOverride.cjs');
+let react = require("react");
+
+//#region src/util/useHorizontalScrollAnimation.ts
+function useHorizontalScrollAnimation({ scrollContainerRef, animationSpeed = "standard" }) {
+	const reducedMotion = require_useReducedMotionWithOverride.useReducedMotionWithOverride();
+	const resumeTimeoutRef = (0, react.useRef)(null);
+	const scrollAnimationRef = (0, react.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";
+	(0, react.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
+exports.useHorizontalScrollAnimation = useHorizontalScrollAnimation;

package/dist/util/useHorizontalScrollAnimation.js

@@ -0,0 +1,87 @@
+import { useReducedMotionWithOverride } from "./useReducedMotionWithOverride.js";
+import { useEffect, useRef } from "react";
+
+//#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
+export { useHorizontalScrollAnimation };

package/dist/util/useReducedMotionWithOverride.cjs

@@ -0,0 +1,15 @@
+const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
+let react = require("react");
+let framer_motion = require("framer-motion");
+
+//#region src/util/useReducedMotionWithOverride.ts
+const useReducedMotionWithOverride = () => {
+	const reducedMotionConfig = (0, framer_motion.useReducedMotionConfig)();
+	return (0, react.useMemo)(() => {
+		if (window?._spiffy?.reducedMotionOverride) return window?._spiffy?.reducedMotionOverride;
+		return reducedMotionConfig;
+	}, [reducedMotionConfig]);
+};
+
+//#endregion
+exports.useReducedMotionWithOverride = useReducedMotionWithOverride;

package/dist/util/useReducedMotionWithOverride.js

@@ -0,0 +1,14 @@
+import { useMemo } from "react";
+import { useReducedMotionConfig } from "framer-motion";
+
+//#region src/util/useReducedMotionWithOverride.ts
+const useReducedMotionWithOverride = () => {
+	const reducedMotionConfig = useReducedMotionConfig();
+	return useMemo(() => {
+		if (window?._spiffy?.reducedMotionOverride) return window?._spiffy?.reducedMotionOverride;
+		return reducedMotionConfig;
+	}, [reducedMotionConfig]);
+};
+
+//#endregion
+export { useReducedMotionWithOverride };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@envive-ai/react-widgets",
-  "version": "0.1.2",
+  "version": "0.3.0",
   "description": "React widget library for Envive services.",
   "keywords": [
     "react",
@@ -25,21 +25,21 @@
     "build:watch": "tsdown --watch",
     "dev": "npm run get-merchants && storybook dev -p 6006",
     "prepublish": "npm run build",
-    "build-storybook": "npm run get-merchants && storybook build",
-    "storybook": "npm run get-merchants && storybook dev -p 6006",
+    "storybook": "tsx ./.storybook/getMerchants.ts && storybook dev -p 6006",
+    "storybook:build": "npm run get-merchants && storybook build",
     "storybook:get-merchants": "tsx ./.storybook/getMerchants.ts",
     "typecheck": "tsc",
     "test": "vitest"
   },
   "dependencies": {
-    "@envive-ai/react-hooks": "0.2.9",
-    "@envive-ai/react-toolkit": "*",
     "@tailwindcss/typography": "^0.5.15",
     "classnames": "^2.5.1",
     "framer-motion": "^12.23.24",
     "jotai": "^2.15.1"
   },
   "peerDependencies": {
+    "@envive-ai/react-hooks": "*",
+    "@envive-ai/react-toolkit": "*",
     "react": ">=18.3.1",
     "react-dom": ">=18.3.1"
   },

package/src/SearchZeroState/SearchZeroState.tsx

@@ -202,7 +202,7 @@ export const SearchZeroState: React.FC<SearchZeroStateProps> = ({
             onKeyDown={onKeyDown}
             onAutocompleteSelect={onAutocompleteSelect}
             onSearchInputChange={searchChange}
-            onSearchSubmit={submitSearchString}
+            onSearchSubmit={() => submitSearchString}
             onSearchInputFocus={onSearchInputFocus}
             onSearchInputBlur={onSearchInputBlur}
           />

package/src/SuggestionBar/SuggestionBar.tsx

@@ -8,7 +8,6 @@ import { PerfMetricsEvents, logPerfMetricAtom } from '@envive-ai/react-hooks/ato
 import { SUGGESTION_BAR_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 { TestProps } from '@envive-ai/react-hooks/types';
 import { Message } from 'postcss';
 
 import { SuggestionButtonVariant } from '@envive-ai/react-hooks/contexts/types';
@@ -16,7 +15,7 @@ import { SuggestionBarLocationForMetrics } from './types';
 import { SuggestionButtonContainer } from '../SuggestionButtonContainer';
 
 // SuggestionBarV2 Props
-interface SuggestionBarProps extends TestProps {
+interface SuggestionBarProps {
   id: string;
   locationForMetrics: SuggestionBarLocationForMetrics;
   buttonTexts: string[];
@@ -27,6 +26,7 @@ interface SuggestionBarProps extends TestProps {
   twoRowsOnMobile?: boolean | undefined;
   animationSpeed?: 'standard' | 'slow' | 'none';
   buttonBorderRadius?: 'sm' | 'md' | 'lg';
+  dataTestId?: string;
 }
 
 // SuggestionBar functional component

package/dist/SearchResults/index-DCTxvwmv.d.cts

@@ -1,6 +0,0 @@
-import * as react_jsx_runtime1 from "react/jsx-runtime";
-
-//#region src/SearchResults/SearchResultsWidget.d.ts
-declare const SearchResultsWidget: () => react_jsx_runtime1.JSX.Element;
-//#endregion
-export { SearchResultsWidget };

package/dist/SearchZeroState/index-DSFtalZR.d.ts

@@ -1,27 +0,0 @@
-import React$1 from "react";
-import * as react_jsx_runtime1 from "react/jsx-runtime";
-import { SearchEntryPointWidgetConfig, SearchInputVariant } from "@envive-ai/react-hooks/contexts/types";
-
-//#region src/SearchZeroState/types.d.ts
-interface SearchZeroStateProps {
-  widgetConfig: SearchEntryPointWidgetConfig;
-  initialIsOpen?: boolean;
-  entryPointRef?: React.Ref<HTMLButtonElement>;
-}
-//#endregion
-//#region src/SearchZeroState/SearchZeroState.d.ts
-declare const SearchZeroState: React$1.FC<SearchZeroStateProps>;
-//#endregion
-//#region src/SearchZeroState/SearchZeroStateWidget.d.ts
-type SearchZeroStateWidgetProps = {
-  initialIsOpen: boolean;
-  widgetConfigId?: string;
-  entryPointRef: React.Ref<HTMLButtonElement>;
-};
-declare const SearchZeroStateWidget: ({
-  initialIsOpen,
-  widgetConfigId,
-  entryPointRef
-}: SearchZeroStateWidgetProps) => react_jsx_runtime1.JSX.Element;
-//#endregion
-export { type SearchEntryPointWidgetConfig, type SearchInputVariant, SearchZeroState, SearchZeroStateProps, SearchZeroStateWidget };

package/dist/SearchZeroState/index-bEcxYOSF.d.cts

@@ -1,27 +0,0 @@
-import * as react_jsx_runtime0 from "react/jsx-runtime";
-import { SearchEntryPointWidgetConfig, SearchInputVariant } from "@envive-ai/react-hooks/contexts/types";
-import React$1 from "react";
-
-//#region src/SearchZeroState/types.d.ts
-interface SearchZeroStateProps {
-  widgetConfig: SearchEntryPointWidgetConfig;
-  initialIsOpen?: boolean;
-  entryPointRef?: React.Ref<HTMLButtonElement>;
-}
-//#endregion
-//#region src/SearchZeroState/SearchZeroState.d.ts
-declare const SearchZeroState: React$1.FC<SearchZeroStateProps>;
-//#endregion
-//#region src/SearchZeroState/SearchZeroStateWidget.d.ts
-type SearchZeroStateWidgetProps = {
-  initialIsOpen: boolean;
-  widgetConfigId?: string;
-  entryPointRef: React.Ref<HTMLButtonElement>;
-};
-declare const SearchZeroStateWidget: ({
-  initialIsOpen,
-  widgetConfigId,
-  entryPointRef
-}: SearchZeroStateWidgetProps) => react_jsx_runtime0.JSX.Element;
-//#endregion
-export { type SearchEntryPointWidgetConfig, type SearchInputVariant, SearchZeroState, SearchZeroStateProps, SearchZeroStateWidget };