@envive-ai/react-toolkit-v3 0.3.6 → 0.3.8

package/dist/FloatingChat/components/ModalSheet.cjs

@@ -0,0 +1,184 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_useSnapControl = require('../hooks/useSnapControl.cjs');
+const require_usePreventScroll = require('../hooks/usePreventScroll.cjs');
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+let framer_motion = require("framer-motion");
+
+//#region src/components/FloatingChat/components/ModalSheet.tsx
+const BOTTOM_OFFSET = 100;
+const ModalSheet = ({ animationKey, children, open, height, unit, snaps = [], initSnap = 0, handler, animation = {
+	type: "spring",
+	stiffness: 300,
+	damping: 30
+}, controlRef, onClose, onSnap, disableDrag = false }) => {
+	const [layerRef] = (0, framer_motion.useAnimate)();
+	const [containerRef] = (0, framer_motion.useAnimate)();
+	const { gestureRef, isScrollableArea, getScrollParent, getGestureDirection, getScrollDirections } = require_usePreventScroll.usePreventScroll();
+	const onSnapComplete = (currentSnap$1, nextSnap, collapsed) => {
+		if (collapsed) {
+			onClose?.();
+			return;
+		}
+		if (currentSnap$1 !== nextSnap) onSnap?.(nextSnap);
+	};
+	const { scope, animatedY, swipeviewHeightPx, initSnapInPixels, contentHeight, currentSnap, displayOverlay, opacityOverlay, jumpTo, defineNextSnapByPosition, resetControls, getSnapToPixel } = require_useSnapControl.useSnapControl({
+		animationKey,
+		animation,
+		height,
+		unit,
+		snaps,
+		initSnap,
+		overlayOpacity: .5,
+		onSnapComplete
+	});
+	(0, react.useImperativeHandle)(controlRef, () => ({ jumpToSnap: (snapIndex) => {
+		jumpTo(getSnapToPixel(snaps[snapIndex]));
+	} }));
+	const expandToFullView = () => {
+		if (snaps.indexOf(currentSnap) === 1) jumpTo(getSnapToPixel(2));
+	};
+	const notifySnapChanges = (isModalOpen) => {
+		if (isModalOpen) {
+			onSnap?.(currentSnap);
+			return;
+		}
+		const snap = resetControls();
+		onSnap?.(snap);
+	};
+	(0, react.useEffect)(() => {
+		const preventDefault = (event) => event.preventDefault();
+		layerRef?.current?.addEventListener("touchmove", preventDefault, { passive: false });
+		return () => {
+			layerRef?.current?.removeEventListener("touchmove", preventDefault);
+		};
+	}, [layerRef?.current]);
+	(0, react.useEffect)(() => {
+		const preventScroll = (event) => {
+			if (!isScrollableArea(getGestureDirection(event.touches[0].clientX, event.touches[0].clientY))) {
+				event.preventDefault();
+				event.stopPropagation();
+			}
+		};
+		containerRef?.current?.addEventListener("touchmove", preventScroll, { passive: false });
+		notifySnapChanges(open);
+		return () => {
+			containerRef?.current?.removeEventListener("touchmove", preventScroll);
+		};
+	}, [open]);
+	const handleDragEnd = () => {
+		jumpTo(defineNextSnapByPosition());
+	};
+	const handleTouchStart = (event) => {
+		const scrollableElement = getScrollParent(event.target);
+		const scrollableDirections = getScrollDirections(scrollableElement);
+		const parentScrollableElement = getScrollParent(scrollableElement, true);
+		const parentScrollableDirections = getScrollDirections(parentScrollableElement);
+		const grandparentScrollableElement = getScrollParent(parentScrollableElement, true);
+		const grandparentScrollableDirections = getScrollDirections(grandparentScrollableElement);
+		gestureRef.current = {
+			event: event.touches?.[0],
+			scrollableElements: [
+				{
+					element: scrollableElement,
+					scrollableDirections
+				},
+				{
+					element: parentScrollableElement,
+					scrollableDirections: parentScrollableDirections
+				},
+				{
+					element: grandparentScrollableElement,
+					scrollableDirections: grandparentScrollableDirections
+				}
+			]
+		};
+	};
+	const handleTouchEnd = () => {
+		handleDragEnd();
+		gestureRef.current = {
+			scrollableElements: [],
+			event: null
+		};
+	};
+	const handleContentGesture = (fingerX, fingerY) => {
+		if (!gestureRef.current?.event) return;
+		const pointerDistance = (gestureRef.current?.event?.clientY || 0) - fingerY;
+		const distanceToTravel = getSnapToPixel(currentSnap) - pointerDistance;
+		const gestureDirection = getGestureDirection(fingerX, fingerY);
+		if (!(isScrollableArea(gestureDirection) || gestureDirection !== "down" && currentSnap === 100)) animatedY.set(distanceToTravel);
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.AnimatePresence, { children: open && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.div, {
+			ref: layerRef,
+			style: {
+				display: displayOverlay,
+				position: "fixed",
+				top: 0,
+				left: 0,
+				right: 0,
+				bottom: 0,
+				opacity: opacityOverlay,
+				background: "black"
+			}
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.div, {
+			ref: scope,
+			drag: "y",
+			dragConstraints: {
+				top: 0,
+				bottom: swipeviewHeightPx
+			},
+			initial: { y: swipeviewHeightPx },
+			animate: { y: initSnapInPixels },
+			exit: { y: swipeviewHeightPx + BOTTOM_OFFSET },
+			transition: animation,
+			onDragEnd: handleDragEnd,
+			onClick: expandToFullView,
+			style: {
+				y: animatedY,
+				bottom: swipeviewHeightPx,
+				right: 0,
+				position: "fixed",
+				width: "100%",
+				zIndex: 2147483647
+			},
+			children: handler
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.div, {
+			ref: scope,
+			onTouchStart: handleTouchStart,
+			onTouchEnd: handleTouchEnd,
+			onTouchMove: (event) => handleContentGesture(event.touches[0].clientX, event.touches[0].clientY),
+			onPointerMove: disableDrag ? void 0 : (event) => handleContentGesture(event.clientX, event.clientY),
+			initial: { y: swipeviewHeightPx + BOTTOM_OFFSET },
+			animate: { y: initSnapInPixels },
+			exit: { y: swipeviewHeightPx + BOTTOM_OFFSET },
+			transition: animation,
+			style: {
+				y: animatedY,
+				width: "100%",
+				height: swipeviewHeightPx + BOTTOM_OFFSET,
+				position: "fixed",
+				bottom: -BOTTOM_OFFSET + 2,
+				right: 0,
+				boxSizing: "content-box",
+				zIndex: 2147483646
+			},
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(framer_motion.motion.div, {
+				ref: containerRef,
+				initial: { height: 0 },
+				style: {
+					width: "100%",
+					height: contentHeight,
+					userSelect: "none"
+				},
+				children
+			})
+		})
+	] }) });
+};
+
+//#endregion
+exports.ModalSheet = ModalSheet;

package/dist/FloatingChat/components/ModalSheet.js

@@ -0,0 +1,182 @@
+import { useSnapControl } from "../hooks/useSnapControl.js";
+import { usePreventScroll } from "../hooks/usePreventScroll.js";
+import React, { useEffect, useImperativeHandle } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { AnimatePresence, motion, useAnimate } from "framer-motion";
+
+//#region src/components/FloatingChat/components/ModalSheet.tsx
+const BOTTOM_OFFSET = 100;
+const ModalSheet = ({ animationKey, children, open, height, unit, snaps = [], initSnap = 0, handler, animation = {
+	type: "spring",
+	stiffness: 300,
+	damping: 30
+}, controlRef, onClose, onSnap, disableDrag = false }) => {
+	const [layerRef] = useAnimate();
+	const [containerRef] = useAnimate();
+	const { gestureRef, isScrollableArea, getScrollParent, getGestureDirection, getScrollDirections } = usePreventScroll();
+	const onSnapComplete = (currentSnap$1, nextSnap, collapsed) => {
+		if (collapsed) {
+			onClose?.();
+			return;
+		}
+		if (currentSnap$1 !== nextSnap) onSnap?.(nextSnap);
+	};
+	const { scope, animatedY, swipeviewHeightPx, initSnapInPixels, contentHeight, currentSnap, displayOverlay, opacityOverlay, jumpTo, defineNextSnapByPosition, resetControls, getSnapToPixel } = useSnapControl({
+		animationKey,
+		animation,
+		height,
+		unit,
+		snaps,
+		initSnap,
+		overlayOpacity: .5,
+		onSnapComplete
+	});
+	useImperativeHandle(controlRef, () => ({ jumpToSnap: (snapIndex) => {
+		jumpTo(getSnapToPixel(snaps[snapIndex]));
+	} }));
+	const expandToFullView = () => {
+		if (snaps.indexOf(currentSnap) === 1) jumpTo(getSnapToPixel(2));
+	};
+	const notifySnapChanges = (isModalOpen) => {
+		if (isModalOpen) {
+			onSnap?.(currentSnap);
+			return;
+		}
+		const snap = resetControls();
+		onSnap?.(snap);
+	};
+	useEffect(() => {
+		const preventDefault = (event) => event.preventDefault();
+		layerRef?.current?.addEventListener("touchmove", preventDefault, { passive: false });
+		return () => {
+			layerRef?.current?.removeEventListener("touchmove", preventDefault);
+		};
+	}, [layerRef?.current]);
+	useEffect(() => {
+		const preventScroll = (event) => {
+			if (!isScrollableArea(getGestureDirection(event.touches[0].clientX, event.touches[0].clientY))) {
+				event.preventDefault();
+				event.stopPropagation();
+			}
+		};
+		containerRef?.current?.addEventListener("touchmove", preventScroll, { passive: false });
+		notifySnapChanges(open);
+		return () => {
+			containerRef?.current?.removeEventListener("touchmove", preventScroll);
+		};
+	}, [open]);
+	const handleDragEnd = () => {
+		jumpTo(defineNextSnapByPosition());
+	};
+	const handleTouchStart = (event) => {
+		const scrollableElement = getScrollParent(event.target);
+		const scrollableDirections = getScrollDirections(scrollableElement);
+		const parentScrollableElement = getScrollParent(scrollableElement, true);
+		const parentScrollableDirections = getScrollDirections(parentScrollableElement);
+		const grandparentScrollableElement = getScrollParent(parentScrollableElement, true);
+		const grandparentScrollableDirections = getScrollDirections(grandparentScrollableElement);
+		gestureRef.current = {
+			event: event.touches?.[0],
+			scrollableElements: [
+				{
+					element: scrollableElement,
+					scrollableDirections
+				},
+				{
+					element: parentScrollableElement,
+					scrollableDirections: parentScrollableDirections
+				},
+				{
+					element: grandparentScrollableElement,
+					scrollableDirections: grandparentScrollableDirections
+				}
+			]
+		};
+	};
+	const handleTouchEnd = () => {
+		handleDragEnd();
+		gestureRef.current = {
+			scrollableElements: [],
+			event: null
+		};
+	};
+	const handleContentGesture = (fingerX, fingerY) => {
+		if (!gestureRef.current?.event) return;
+		const pointerDistance = (gestureRef.current?.event?.clientY || 0) - fingerY;
+		const distanceToTravel = getSnapToPixel(currentSnap) - pointerDistance;
+		const gestureDirection = getGestureDirection(fingerX, fingerY);
+		if (!(isScrollableArea(gestureDirection) || gestureDirection !== "down" && currentSnap === 100)) animatedY.set(distanceToTravel);
+	};
+	return /* @__PURE__ */ jsx(AnimatePresence, { children: open && /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx(motion.div, {
+			ref: layerRef,
+			style: {
+				display: displayOverlay,
+				position: "fixed",
+				top: 0,
+				left: 0,
+				right: 0,
+				bottom: 0,
+				opacity: opacityOverlay,
+				background: "black"
+			}
+		}),
+		/* @__PURE__ */ jsx(motion.div, {
+			ref: scope,
+			drag: "y",
+			dragConstraints: {
+				top: 0,
+				bottom: swipeviewHeightPx
+			},
+			initial: { y: swipeviewHeightPx },
+			animate: { y: initSnapInPixels },
+			exit: { y: swipeviewHeightPx + BOTTOM_OFFSET },
+			transition: animation,
+			onDragEnd: handleDragEnd,
+			onClick: expandToFullView,
+			style: {
+				y: animatedY,
+				bottom: swipeviewHeightPx,
+				right: 0,
+				position: "fixed",
+				width: "100%",
+				zIndex: 2147483647
+			},
+			children: handler
+		}),
+		/* @__PURE__ */ jsx(motion.div, {
+			ref: scope,
+			onTouchStart: handleTouchStart,
+			onTouchEnd: handleTouchEnd,
+			onTouchMove: (event) => handleContentGesture(event.touches[0].clientX, event.touches[0].clientY),
+			onPointerMove: disableDrag ? void 0 : (event) => handleContentGesture(event.clientX, event.clientY),
+			initial: { y: swipeviewHeightPx + BOTTOM_OFFSET },
+			animate: { y: initSnapInPixels },
+			exit: { y: swipeviewHeightPx + BOTTOM_OFFSET },
+			transition: animation,
+			style: {
+				y: animatedY,
+				width: "100%",
+				height: swipeviewHeightPx + BOTTOM_OFFSET,
+				position: "fixed",
+				bottom: -BOTTOM_OFFSET + 2,
+				right: 0,
+				boxSizing: "content-box",
+				zIndex: 2147483646
+			},
+			children: /* @__PURE__ */ jsx(motion.div, {
+				ref: containerRef,
+				initial: { height: 0 },
+				style: {
+					width: "100%",
+					height: contentHeight,
+					userSelect: "none"
+				},
+				children
+			})
+		})
+	] }) });
+};
+
+//#endregion
+export { ModalSheet };

package/dist/FloatingChat/components/SalesAgentProductCardsCarousel.cjs

@@ -6,14 +6,15 @@ const require_SalesAgentProductCard = require('../../SalesAgentProductCard/Sales
 let react_jsx_runtime = require("react/jsx-runtime");
 
 //#region src/components/FloatingChat/components/SalesAgentProductCardsCarousel.tsx
-const SalesAgentProductCardsCarousel = ({ products, theme, hideNavigation = false, numberOfProducts }) => {
+const SalesAgentProductCardsCarousel = ({ products, theme, hideNavigation = false, numberOfProducts, variant = require_types.SalesAgentProductCardVariant.LARGE, isPartialView = false }) => {
 	const finalTheme = require_resolveTheme.resolveTheme(theme);
+	const finalVariant = isPartialView ? require_types.SalesAgentProductCardVariant.SMALL : variant;
 	const forceShowCurrentPriceSpace = products.some((product) => product.currentPrice && product.previousPrice !== product.currentPrice);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Carousel.Carousel, {
 		hideNavigation,
 		badgeLabel: numberOfProducts && numberOfProducts > 1 ? `${numberOfProducts} Products` : void 0,
 		elements: products.map((product) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SalesAgentProductCard.SalesAgentProductCard, {
-			variant: require_types.SalesAgentProductCardVariant.LARGE,
+			variant: finalVariant,
 			productName: product.productName,
 			currentPrice: product.currentPrice,
 			previousPrice: product.previousPrice,

package/dist/FloatingChat/components/SalesAgentProductCardsCarousel.js

@@ -5,14 +5,15 @@ import { SalesAgentProductCard } from "../../SalesAgentProductCard/SalesAgentPro
 import { jsx } from "react/jsx-runtime";
 
 //#region src/components/FloatingChat/components/SalesAgentProductCardsCarousel.tsx
-const SalesAgentProductCardsCarousel = ({ products, theme, hideNavigation = false, numberOfProducts }) => {
+const SalesAgentProductCardsCarousel = ({ products, theme, hideNavigation = false, numberOfProducts, variant = SalesAgentProductCardVariant.LARGE, isPartialView = false }) => {
 	const finalTheme = resolveTheme(theme);
+	const finalVariant = isPartialView ? SalesAgentProductCardVariant.SMALL : variant;
 	const forceShowCurrentPriceSpace = products.some((product) => product.currentPrice && product.previousPrice !== product.currentPrice);
 	return /* @__PURE__ */ jsx(Carousel, {
 		hideNavigation,
 		badgeLabel: numberOfProducts && numberOfProducts > 1 ? `${numberOfProducts} Products` : void 0,
 		elements: products.map((product) => /* @__PURE__ */ jsx(SalesAgentProductCard, {
-			variant: SalesAgentProductCardVariant.LARGE,
+			variant: finalVariant,
 			productName: product.productName,
 			currentPrice: product.currentPrice,
 			previousPrice: product.previousPrice,

package/dist/FloatingChat/components/index.cjs

@@ -8,6 +8,7 @@ const require_AgentMessage = require('./AgentMessage.cjs');
 const require_MessageDivider = require('./MessageDivider.cjs');
 const require_ChatMessages = require('./ChatMessages.cjs');
 const require_ScrollToBottomButton = require('./ScrollToBottomButton.cjs');
+const require_ModalSheet = require('./ModalSheet.cjs');
 
 //#region src/components/FloatingChat/components/index.ts
 const FloatingChatComponents = {

package/dist/FloatingChat/components/index.js

@@ -8,6 +8,7 @@ import { AgentMessage } from "./AgentMessage.js";
 import { MessageDivider } from "./MessageDivider.js";
 import { ChatMessages } from "./ChatMessages.js";
 import { ScrollToBottomButton } from "./ScrollToBottomButton.js";
+import { ModalSheet } from "./ModalSheet.js";
 
 //#region src/components/FloatingChat/components/index.ts
 const FloatingChatComponents = {

package/dist/FloatingChat/hooks/useChatSuggestions.cjs

@@ -0,0 +1,25 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+let react = require("react");
+
+//#region src/components/FloatingChat/hooks/useChatSuggestions.ts
+const useChatSuggestions = ({ suggestions, isPendingResponse, isResponseStreaming }) => {
+	const [answerSuggestions, setAnswerSuggestions] = (0, react.useState)([]);
+	const [generalSuggestions, setGeneralSuggestions] = (0, react.useState)([]);
+	const showAnswerSuggestions = answerSuggestions.length > 0 && !isPendingResponse && !isResponseStreaming;
+	(0, react.useEffect)(() => {
+		if (suggestions.length > 0) {
+			setAnswerSuggestions(suggestions.filter((suggestion) => suggestion.isAnswer).map((suggestion) => suggestion.content));
+			setGeneralSuggestions(suggestions.filter((suggestion) => !suggestion.isAnswer).map((suggestion) => suggestion.content));
+		}
+	}, [suggestions]);
+	return {
+		answerSuggestions,
+		generalSuggestions,
+		showAnswerSuggestions,
+		setAnswerSuggestions,
+		setGeneralSuggestions
+	};
+};
+
+//#endregion
+exports.useChatSuggestions = useChatSuggestions;

package/dist/FloatingChat/hooks/useChatSuggestions.js

@@ -0,0 +1,24 @@
+import { useEffect, useState } from "react";
+
+//#region src/components/FloatingChat/hooks/useChatSuggestions.ts
+const useChatSuggestions = ({ suggestions, isPendingResponse, isResponseStreaming }) => {
+	const [answerSuggestions, setAnswerSuggestions] = useState([]);
+	const [generalSuggestions, setGeneralSuggestions] = useState([]);
+	const showAnswerSuggestions = answerSuggestions.length > 0 && !isPendingResponse && !isResponseStreaming;
+	useEffect(() => {
+		if (suggestions.length > 0) {
+			setAnswerSuggestions(suggestions.filter((suggestion) => suggestion.isAnswer).map((suggestion) => suggestion.content));
+			setGeneralSuggestions(suggestions.filter((suggestion) => !suggestion.isAnswer).map((suggestion) => suggestion.content));
+		}
+	}, [suggestions]);
+	return {
+		answerSuggestions,
+		generalSuggestions,
+		showAnswerSuggestions,
+		setAnswerSuggestions,
+		setGeneralSuggestions
+	};
+};
+
+//#endregion
+export { useChatSuggestions };

package/dist/FloatingChat/hooks/useFilteredChatMessages.cjs

@@ -0,0 +1,24 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+let react = require("react");
+let __envive_ai_react_hooks_hooks_MessageFilter = require("@envive-ai/react-hooks/hooks/MessageFilter");
+
+//#region src/components/FloatingChat/hooks/useFilteredChatMessages.ts
+const useFilteredChatMessages = ({ messages, isMobile, currentSnapPercentage, modalSheetControl }) => {
+	const { getFilteredMessages } = (0, __envive_ai_react_hooks_hooks_MessageFilter.useMessageFilter)();
+	const keepMessagesExpanded = !isMobile || isMobile && currentSnapPercentage === 100;
+	const filteredMessages = (0, react.useMemo)(() => getFilteredMessages(messages, keepMessagesExpanded), [
+		getFilteredMessages,
+		messages,
+		keepMessagesExpanded
+	]);
+	const hasFilteredMessages = filteredMessages.length !== messages.length && isMobile;
+	const handlePreviousDiscussions = () => modalSheetControl.current?.jumpToSnap(2);
+	return {
+		filteredMessages,
+		hasFilteredMessages,
+		handlePreviousDiscussions
+	};
+};
+
+//#endregion
+exports.useFilteredChatMessages = useFilteredChatMessages;

package/dist/FloatingChat/hooks/useFilteredChatMessages.js

@@ -0,0 +1,23 @@
+import { useMemo } from "react";
+import { useMessageFilter } from "@envive-ai/react-hooks/hooks/MessageFilter";
+
+//#region src/components/FloatingChat/hooks/useFilteredChatMessages.ts
+const useFilteredChatMessages = ({ messages, isMobile, currentSnapPercentage, modalSheetControl }) => {
+	const { getFilteredMessages } = useMessageFilter();
+	const keepMessagesExpanded = !isMobile || isMobile && currentSnapPercentage === 100;
+	const filteredMessages = useMemo(() => getFilteredMessages(messages, keepMessagesExpanded), [
+		getFilteredMessages,
+		messages,
+		keepMessagesExpanded
+	]);
+	const hasFilteredMessages = filteredMessages.length !== messages.length && isMobile;
+	const handlePreviousDiscussions = () => modalSheetControl.current?.jumpToSnap(2);
+	return {
+		filteredMessages,
+		hasFilteredMessages,
+		handlePreviousDiscussions
+	};
+};
+
+//#endregion
+export { useFilteredChatMessages };

package/dist/FloatingChat/hooks/usePreventScroll.cjs

@@ -0,0 +1,117 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+let react = require("react");
+
+//#region src/components/FloatingChat/hooks/usePreventScroll.ts
+/**
+* Prevent the body element from scrolling when a modal (partial view) is open.
+*
+* @returns
+*/
+const usePreventScroll = () => {
+	const gestureRef = (0, react.useRef)(null);
+	/**
+	* Calculate the angle of a user gesture (grab/drop).
+	*
+	* @param startX
+	* @param startY
+	* @param endX
+	* @param endY
+	* @returns
+	*/
+	const calculateAngle = (startX, startY, endX, endY) => {
+		const deltaX = endX - startX;
+		const deltaY = endY - startY;
+		return (Math.atan2(deltaY, deltaX) * (180 / Math.PI) + 360) % 360;
+	};
+	/**
+	* Test if an element has scrollable capabilities.
+	*
+	* @param node
+	* @returns
+	*/
+	const isScrollable = (node) => {
+		const style = window.getComputedStyle(node);
+		return /(auto|scroll)/.test(style.overflow + style.overflowX + style.overflowY);
+	};
+	/**
+	* Find the parent node that has scrollable capabilities.
+	*
+	* @param node
+	* @returns
+	*/
+	const getScrollParent = (node, ignoreCurrentNode = false) => {
+		let parentNode = ignoreCurrentNode ? node?.parentElement : node;
+		if (!parentNode) return null;
+		if (isScrollable(parentNode)) return parentNode;
+		while (parentNode && !isScrollable(parentNode)) parentNode = parentNode.parentElement;
+		if (!parentNode && isScrollable(document.body)) return document.body;
+		return parentNode || document.scrollingElement || document.documentElement;
+	};
+	/**
+	* Get the scrollable directions an element can scroll.
+	*
+	* @returns
+	*/
+	const getScrollDirections = (scrollableElement) => {
+		const horizontalScroll = (scrollableElement?.scrollWidth || 0) > (scrollableElement?.clientWidth || 0);
+		const verticalScroll = (scrollableElement?.scrollHeight || 0) > (scrollableElement?.clientHeight || 0);
+		const scrollDirections = [];
+		if (horizontalScroll) scrollDirections.push("horizontal");
+		if (verticalScroll) scrollDirections.push("vertical");
+		return scrollDirections;
+	};
+	/**
+	* Determine the direction of a gesture event based on the angle of a grab/drop event.
+	*
+	* @param fingerX
+	* @param fingerY
+	* @returns
+	*/
+	const getGestureDirection = (fingerX, fingerY) => {
+		const directionAngle = calculateAngle(gestureRef?.current?.event?.clientX || 0, gestureRef?.current?.event?.clientY || 0, fingerX, fingerY);
+		if (directionAngle < 45 || directionAngle > 315) return "right";
+		if (directionAngle > 45 && directionAngle < 135) return "down";
+		if (directionAngle > 135 && directionAngle < 225) return "left";
+		return "up";
+	};
+	/**
+	* Determine whether the direction of the gesture can scroll the element in context.
+	*
+	* @param param0
+	* @param direction
+	* @returns
+	*/
+	const isScrollDirectionAllowed = ({ element, scrollableDirections }, direction) => {
+		if (element?.tagName === "BODY" || element?.tagName === "HTML" || scrollableDirections?.length === 0) return false;
+		const { clientHeight = 0, clientWidth = 0, scrollHeight = 0, scrollWidth = 0, scrollTop = 0, scrollLeft = 0 } = element || {};
+		const atTop = scrollTop === 0;
+		const atLeft = scrollLeft === 0;
+		const atBottom = 100 / scrollHeight * (scrollTop + clientHeight) > 99.9;
+		const atRight = 100 / scrollWidth * (scrollLeft + clientWidth) > 99.9;
+		const verticalScrollBlocked = atBottom && direction === "up" || atTop && direction === "down" || direction === "left" || direction === "right";
+		if (scrollableDirections?.includes("vertical") && verticalScrollBlocked) return false;
+		const horizontalScrollBlocked = atRight && direction === "left" || atLeft && direction === "right" || direction === "up" || direction === "down";
+		if (scrollableDirections?.includes("horizontal") && horizontalScrollBlocked) return false;
+		return true;
+	};
+	/**
+	* Test if the selected scrollable element can scroll in the direction of the grab/drop event.
+	*
+	* @param direction
+	* @returns
+	*/
+	const isScrollableArea = (direction) => {
+		const { scrollableElements } = gestureRef.current || {};
+		return scrollableElements?.some((el) => isScrollDirectionAllowed(el, direction));
+	};
+	return {
+		gestureRef,
+		getScrollParent,
+		isScrollableArea,
+		getGestureDirection,
+		getScrollDirections
+	};
+};
+
+//#endregion
+exports.usePreventScroll = usePreventScroll;