@yakad/ui 1.3.164 → 1.3.165

package/dist/ActiveOnVisible/ActiveOnVisible.js

@@ -12,7 +12,8 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useImperativeHandle, useRef, useState } from "react";
-import { Stack, useOnVisibilityChange } from "..";
+import { Stack } from "..";
+import { useOnVisibilityChange } from "@yakad/use-interactions";
 export function ActiveOnVisible(_a) {
     var { onVisibilityChange, style, children, ref } = _a, restProps = __rest(_a, ["onVisibilityChange", "style", "children", "ref"]);
     const localRef = useRef(null);

package/dist/Dropdown/Dropdown.d.ts

@@ -1,7 +1,8 @@
 /// <reference types="react" />
 import { CardProps, OverlayProps } from "..";
 export interface DropdownProps extends CardProps, OverlayProps {
+    teleport?: boolean;
     ref?: React.Ref<HTMLDivElement>;
 }
 export declare function Dropdown({ fullWidthOnParentDemand, // Def in Card is True
-blur, level, triggerref, onClose, className, style, children, ref, ...restProps }: DropdownProps): import("react/jsx-runtime").JSX.Element;
+blur, level, triggerref, onClose, className, style, children, teleport, ref, ...restProps }: DropdownProps): import("react/jsx-runtime").JSX.Element;

package/dist/Dropdown/Dropdown.js

@@ -13,11 +13,13 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef, useState, useEffect, useImperativeHandle } from "react";
 import classNames from "classnames";
-import { Card, useOnOutsideClick } from "..";
+import { Card } from "..";
 import styles from "./Dropdown.module.css";
+import { createPortal } from "react-dom";
+import { useOnOutsideClick } from "@yakad/use-interactions";
 export function Dropdown(_a) {
     var { fullWidthOnParentDemand = false, // Def in Card is True
-    blur, level = "high", triggerref, onClose, className, style, children, ref } = _a, restProps = __rest(_a, ["fullWidthOnParentDemand", "blur", "level", "triggerref", "onClose", "className", "style", "children", "ref"]);
+    blur, level = "high", triggerref, onClose, className, style, children, teleport = false, ref } = _a, restProps = __rest(_a, ["fullWidthOnParentDemand", "blur", "level", "triggerref", "onClose", "className", "style", "children", "teleport", "ref"]);
     const fallbackTriggerRef = useRef(null);
     const dropdownRef = useRef(null);
     const placementTargetRef = triggerref || fallbackTriggerRef;
@@ -33,6 +35,17 @@ export function Dropdown(_a) {
     });
     const [isPlacedAbove, setIsPlacedAbove] = useState(false);
     const [isPlaced, setIsPlaced] = useState(false);
+    useEffect(() => {
+        document.body.style.overflow = "hidden";
+        return () => {
+            document.body.style.overflow = "initial";
+        };
+    }, []);
+    const doTeleport = () => {
+        const portalRoot = document.getElementsByClassName("portalRoot")[0] || document;
+        const t = portalRoot && createPortal(dropdown(), portalRoot);
+        return t;
+    };
     useEffect(() => {
         if ((placementTargetRef === null || placementTargetRef === void 0 ? void 0 : placementTargetRef.current) && dropdownRef.current) {
             const placementTarget = placementTargetRef.current.getBoundingClientRect();
@@ -75,11 +88,12 @@ export function Dropdown(_a) {
     useOnOutsideClick(() => {
         onClose === null || onClose === void 0 ? void 0 : onClose();
     }, dropdownRef);
-    return (_jsxs(_Fragment, { children: [!triggerref && _jsx("div", { ref: fallbackTriggerRef }), _jsx(Card, Object.assign({ ref: dropdownRef, fullWidthOnParentDemand: fullWidthOnParentDemand, blur: blur, level: level }, restProps, { className: classNames(styles.dropdownCard, { [styles.isPlacedAbove]: isPlacedAbove }, className), style: Object.assign({ top: dropdownPosition.top, left: dropdownPosition.left, visibility: isPlaced ? "visible" : "hidden" }, style), children: children })), _jsx("span", { className: classNames(styles.arrow, {
+    const dropdown = () => (_jsxs(_Fragment, { children: [!triggerref && _jsx("div", { ref: fallbackTriggerRef }), _jsx(Card, Object.assign({ ref: dropdownRef, fullWidthOnParentDemand: fullWidthOnParentDemand, blur: blur, level: level }, restProps, { className: classNames(styles.dropdownCard, { [styles.isPlacedAbove]: isPlacedAbove }, className), style: Object.assign({ top: dropdownPosition.top, left: dropdownPosition.left, visibility: isPlaced ? "visible" : "hidden" }, style), children: children })), _jsx("span", { className: classNames(styles.arrow, {
                     [styles.isPlacedAbove]: isPlacedAbove,
                 }, { [styles.blur]: blur }), style: {
                     top: arrowPosition.top,
                     left: arrowPosition.left,
                     visibility: isPlaced ? "visible" : "hidden",
                 } })] }));
+    return teleport ? doTeleport() : dropdown();
 }

package/dist/Popup/Popup.d.ts

@@ -2,6 +2,7 @@
 import { CardProps, OverlayProps } from "..";
 export interface PopupProps extends CardProps, OverlayProps {
     heading?: string;
+    teleport?: boolean;
     ref?: React.Ref<HTMLDivElement>;
 }
-export declare function Popup({ align, onClose, heading, className, children, ref, ...restProps }: PopupProps): import("react/jsx-runtime").JSX.Element;
+export declare function Popup({ align, onClose, heading, className, children, teleport, ref, ...restProps }: PopupProps): import("react/jsx-runtime").JSX.Element;

package/dist/Popup/Popup.js

@@ -11,16 +11,30 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useImperativeHandle } from "react";
+import { useEffect, useImperativeHandle } from "react";
 import classNames from "classnames";
 import { Symbol } from "@yakad/symbols";
-import { Button, Card, Row, Screen, Spacer, Stack, Text, useOnOutsideClick, } from "..";
+import { Button, Card, Row, Screen, Spacer, Stack, Text, } from "..";
 import styles from "./Popup.module.css";
+import { createPortal } from "react-dom";
+import { useOnOutsideClick } from "@yakad/use-interactions";
 export function Popup(_a) {
-    var { align, onClose, heading, className, children, ref } = _a, restProps = __rest(_a, ["align", "onClose", "heading", "className", "children", "ref"]);
+    var { align, onClose, heading, className, children, teleport = false, ref } = _a, restProps = __rest(_a, ["align", "onClose", "heading", "className", "children", "teleport", "ref"]);
     const localRef = useOnOutsideClick(() => {
         onClose === null || onClose === void 0 ? void 0 : onClose();
     });
+    const doTeleport = () => {
+        const portalRoot = document.getElementsByClassName("portalRoot")[0] || document;
+        const t = portalRoot && createPortal(popup(), portalRoot);
+        return t;
+    };
+    useEffect(() => {
+        document.body.style.overflow = "hidden";
+        return () => {
+            document.body.style.overflow = "initial";
+        };
+    }, []);
     useImperativeHandle(ref, () => localRef.current);
-    return (_jsx(Screen, { align: "center", className: styles.popupscreen, children: _jsxs(Card, Object.assign({ ref: localRef }, restProps, { className: classNames(styles.popup, className), children: [_jsxs(Row, { style: { marginBottom: "2rem" }, children: [_jsx(Text, { variant: "heading4", children: heading }), _jsx(Spacer, {}), _jsx(Button, { title: "Close", icon: _jsx(Symbol, { icon: "close" }), onClick: onClose })] }), _jsx(Stack, { align: align, style: { width: "100%", overflowY: "auto" }, children: children })] })) }));
+    const popup = () => (_jsx(Screen, { align: "center", className: styles.popupscreen, children: _jsxs(Card, Object.assign({ ref: localRef }, restProps, { className: classNames(styles.popup, className), children: [_jsxs(Row, { style: { marginBottom: "2rem" }, children: [_jsx(Text, { variant: "heading4", children: heading }), _jsx(Spacer, {}), _jsx(Button, { title: "Close", icon: _jsx(Symbol, { icon: "close" }), onClick: onClose })] }), _jsx(Stack, { align: align, style: { width: "100%", overflowY: "auto" }, children: children })] })) }));
+    return teleport ? doTeleport() : popup();
 }

package/dist/RenderByScroll/RenderByScroll.js

@@ -12,7 +12,8 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useEffect, useRef, useState } from "react";
-import { ActiveOnVisible, Stack, useOnVisibilityChange } from "..";
+import { ActiveOnVisible, Stack } from "..";
+import { useOnVisibilityChange } from "@yakad/use-interactions";
 export function RenderByScroll(_a) {
     var { scrollMarginTop = 8, // Sticky Header Height
     extraRender = 5, jumpToIndex = 0, stopNewRenders, newChildRendered, style, children } = _a, restProps = __rest(_a, ["scrollMarginTop", "extraRender", "jumpToIndex", "stopNewRenders", "newChildRendered", "style", "children"]);

package/dist/WithOverlay/WithOverlay.js

@@ -11,9 +11,9 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, cloneElement, useEffect, useRef, useImperativeHandle, } from "react";
-import { createPortal } from "react-dom";
-import { Stack, useOnRightClick, } from "..";
+import { useState, useRef, useImperativeHandle, cloneElement, } from "react";
+import { Stack, } from "..";
+import { useOnRightClick } from "@yakad/use-interactions";
 export function WithOverlay(_a) {
     var { trigger = "onClick", overlay, children, onClick, ref } = _a, restProps = __rest(_a, ["trigger", "overlay", "children", "onClick", "ref"]);
     // Get Triggers ref and send to Overlay
@@ -28,24 +28,13 @@ export function WithOverlay(_a) {
     };
     // Let the parent access our DOM node
     useImperativeHandle(ref, () => localRef.current);
-    // Disable Body Scroll on showOverlay
-    useEffect(() => {
-        document.body.style.overflow = showOverlay ? "hidden" : "initial";
-        return () => {
-            document.body.style.overflow = "initial";
-        };
-    }, [showOverlay]);
-    // Teleport Overlay to portalRoot or body
-    const portalRoot = document.getElementsByClassName("portalRoot")[0] || document;
-    const teleport = overlay &&
-        portalRoot &&
-        createPortal(cloneElement(overlay, {
-            triggerref: localRef,
-            onClose: () => {
-                var _a, _b;
-                (_b = (_a = overlay.props).onClose) === null || _b === void 0 ? void 0 : _b.call(_a);
-                setShowOverlay(false);
-            },
-        }), portalRoot);
-    return (_jsxs(_Fragment, { children: [_jsx(Stack, Object.assign({ ref: localRef }, restProps, { onClick: onClickHandler, children: children })), showOverlay && teleport] }));
+    const clonedOverlay = cloneElement(overlay, {
+        triggerref: localRef,
+        onClose: () => {
+            var _a, _b;
+            (_b = overlay === null || overlay === void 0 ? void 0 : (_a = overlay.props).onClose) === null || _b === void 0 ? void 0 : _b.call(_a);
+            setShowOverlay(false);
+        },
+    });
+    return (_jsxs(_Fragment, { children: [_jsx(Stack, Object.assign({ ref: localRef }, restProps, { onClick: onClickHandler, children: children })), showOverlay && clonedOverlay] }));
 }

package/dist/index.d.ts

@@ -34,13 +34,3 @@ export * from "./ActiveOnVisible/ActiveOnVisible";
 export * from "./Dropdown/Dropdown";
 export * from "./Popup/Popup";
 export * from "./Avatar/Avatar";
-export * from "./interactionHooks/useOnRightClick";
-export * from "./interactionHooks/useOnOutsideClick";
-export * from "./interactionHooks/useOnDoubleTap";
-export * from "./interactionHooks/useOnSwipe";
-export * from "./interactionHooks/useOnPinch";
-export * from "./interactionHooks/useOnRotate";
-export * from "./interactionHooks/useOnResizeChange";
-export * from "./interactionHooks/useOnVisibilityChange";
-export * from "./interactionHooks/useOnHoverChange";
-export * from "./interactionHooks/useOnScroll";

package/dist/index.js

@@ -40,13 +40,3 @@ export * from "./ActiveOnVisible/ActiveOnVisible"; // Stack Based
 export * from "./Dropdown/Dropdown"; // Card Based
 export * from "./Popup/Popup"; // Card Based
 export * from "./Avatar/Avatar";
-export * from "./interactionHooks/useOnRightClick";
-export * from "./interactionHooks/useOnOutsideClick";
-export * from "./interactionHooks/useOnDoubleTap";
-export * from "./interactionHooks/useOnSwipe";
-export * from "./interactionHooks/useOnPinch";
-export * from "./interactionHooks/useOnRotate";
-export * from "./interactionHooks/useOnResizeChange";
-export * from "./interactionHooks/useOnVisibilityChange";
-export * from "./interactionHooks/useOnHoverChange";
-export * from "./interactionHooks/useOnScroll";

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@yakad/ui",
-    "version": "1.3.164",
+    "version": "1.3.165",
     "private": false,
     "author": "Natiq",
     "description": "UI components for NextJS/React",
@@ -34,6 +34,7 @@
     "dependencies": {
         "@yakad/lib": "1.0.23",
         "@yakad/symbols": "1.0.29",
+        "@yakad/use-interactions": "1.0.0",
         "classnames": "2.5.1"
     },
     "peerDependencies": {

package/dist/interactionHooks/useOnDoubleTap.d.ts

@@ -1,2 +0,0 @@
-import { RefObject } from "react";
-export declare function useOnDoubleTap<T extends HTMLElement = HTMLElement>(callback: (e: TouchEvent) => void, ref?: RefObject<T | null> | undefined): RefObject<T | null>;

package/dist/interactionHooks/useOnDoubleTap.js

@@ -1,23 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from "react";
-export function useOnDoubleTap(callback, ref) {
-    const defaultRef = useRef(null);
-    const targetRef = ref !== null && ref !== void 0 ? ref : defaultRef;
-    const [lastTap, setLastTap] = useState(0);
-    const handleDoubleTap = useCallback((e) => {
-        const now = Date.now();
-        if (now - lastTap < 300) {
-            callback(e);
-        }
-        setLastTap(now);
-    }, [callback, lastTap]);
-    useEffect(() => {
-        const element = targetRef.current;
-        if (!element)
-            return;
-        element.addEventListener("touchend", handleDoubleTap);
-        return () => {
-            element.removeEventListener("touchend", handleDoubleTap);
-        };
-    }, [handleDoubleTap, targetRef]);
-    return targetRef;
-}

package/dist/interactionHooks/useOnHoverChange.d.ts

@@ -1,2 +0,0 @@
-import { RefObject } from "react";
-export declare function useOnHoverChange<T extends HTMLElement = HTMLElement>(callback: (e: MouseEvent, hover: boolean) => void, ref?: RefObject<T | null> | undefined): RefObject<T | null>;

package/dist/interactionHooks/useOnHoverChange.js

@@ -1,23 +0,0 @@
-import { useCallback, useEffect, useRef } from "react";
-export function useOnHoverChange(callback, ref) {
-    const defaultRef = useRef(null);
-    const targetRef = ref !== null && ref !== void 0 ? ref : defaultRef;
-    const handleMouseEnter = useCallback((e) => {
-        window.matchMedia("(pointer: fine)").matches && callback(e, true);
-    }, [callback]);
-    const handleMouseLeave = useCallback((e) => {
-        window.matchMedia("(pointer: fine)").matches && callback(e, false);
-    }, [callback]);
-    useEffect(() => {
-        const element = targetRef.current;
-        if (!element)
-            return;
-        element.addEventListener("mouseenter", handleMouseEnter);
-        element.addEventListener("mouseleave", handleMouseLeave);
-        return () => {
-            element.removeEventListener("mouseenter", handleMouseEnter);
-            element.removeEventListener("mouseleave", handleMouseLeave);
-        };
-    }, [handleMouseEnter, handleMouseLeave, targetRef]);
-    return targetRef;
-}

package/dist/interactionHooks/useOnOutsideClick.d.ts

@@ -1,2 +0,0 @@
-import { RefObject } from "react";
-export declare function useOnOutsideClick<T extends HTMLElement = HTMLElement>(callback: (e: MouseEvent) => void, ref?: RefObject<T | null> | undefined): RefObject<T | null>;

package/dist/interactionHooks/useOnOutsideClick.js

@@ -1,21 +0,0 @@
-import { useCallback, useEffect, useRef } from "react";
-export function useOnOutsideClick(callback, ref) {
-    const defaultRef = useRef(null);
-    const targetRef = ref !== null && ref !== void 0 ? ref : defaultRef;
-    const handleClick = useCallback((e) => {
-        e.preventDefault();
-        const element = targetRef.current;
-        if (!element)
-            return;
-        if (!element.contains(e.target)) {
-            callback(e);
-        }
-    }, [callback, targetRef]);
-    useEffect(() => {
-        document.addEventListener("click", handleClick);
-        return () => {
-            document.removeEventListener("click", handleClick);
-        };
-    }, [handleClick]);
-    return targetRef;
-}

package/dist/interactionHooks/useOnPinch.d.ts

@@ -1,2 +0,0 @@
-import { RefObject } from "react";
-export declare function useOnPinch<T extends HTMLElement = HTMLElement>(callback: (e: TouchEvent, action: "in" | "out") => void, ref?: RefObject<T | null> | undefined): RefObject<T | null>;

package/dist/interactionHooks/useOnPinch.js

@@ -1,35 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from "react";
-export function useOnPinch(callback, ref) {
-    const defaultRef = useRef(null);
-    const targetRef = ref !== null && ref !== void 0 ? ref : defaultRef;
-    const [startDistance, setStartDistance] = useState(0);
-    const getDistance = (t1, t2) => Math.hypot(t2.clientX - t1.clientX, t2.clientY - t1.clientY);
-    const handleStart = useCallback((e) => {
-        if (e.touches.length === 2) {
-            const [t1, t2] = e.touches;
-            setStartDistance(getDistance(t1, t2));
-        }
-    }, []);
-    const handleMove = useCallback((e) => {
-        if (e.touches.length === 2) {
-            const [t1, t2] = e.touches;
-            const dist = getDistance(t1, t2);
-            if (dist < startDistance - 20)
-                callback(e, "in");
-            if (dist > startDistance + 20)
-                callback(e, "out");
-        }
-    }, [callback, startDistance]);
-    useEffect(() => {
-        const element = targetRef.current;
-        if (!element)
-            return;
-        element.addEventListener("touchstart", handleStart);
-        element.addEventListener("touchmove", handleMove);
-        return () => {
-            element.removeEventListener("touchstart", handleStart);
-            element.removeEventListener("touchmove", handleMove);
-        };
-    }, [handleMove, handleStart, targetRef]);
-    return targetRef;
-}

package/dist/interactionHooks/useOnResizeChange.d.ts

@@ -1,2 +0,0 @@
-import { RefObject } from "react";
-export declare function useOnResizeChange<T extends HTMLElement = HTMLElement>(callback: (e: ResizeObserverEntry) => void, ref?: RefObject<T | null> | undefined): RefObject<T | null>;

package/dist/interactionHooks/useOnResizeChange.js

@@ -1,23 +0,0 @@
-import { useCallback, useEffect, useRef } from "react";
-export function useOnResizeChange(callback, ref) {
-    const defaultRef = useRef(null);
-    const targetRef = ref !== null && ref !== void 0 ? ref : defaultRef;
-    const handleResize = useCallback((e) => {
-        callback(e);
-    }, [callback]);
-    useEffect(() => {
-        const element = targetRef.current;
-        if (!element)
-            return;
-        const resizeObserver = new ResizeObserver((entries) => {
-            for (const entry of entries) {
-                handleResize(entry);
-            }
-        });
-        resizeObserver.observe(element);
-        return () => {
-            resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect();
-        };
-    }, [handleResize, targetRef]);
-    return targetRef;
-}

package/dist/interactionHooks/useOnRightClick.d.ts

@@ -1,2 +0,0 @@
-import { RefObject } from "react";
-export declare function useOnRightClick<T extends HTMLElement = HTMLElement>(callback: (e: MouseEvent) => void, ref?: RefObject<T | null> | undefined): RefObject<T | null>;

package/dist/interactionHooks/useOnRightClick.js

@@ -1,19 +0,0 @@
-import { useCallback, useEffect, useRef } from "react";
-export function useOnRightClick(callback, ref) {
-    const defaultRef = useRef(null);
-    const targetRef = ref !== null && ref !== void 0 ? ref : defaultRef;
-    const handleContextMenu = useCallback((e) => {
-        e.preventDefault();
-        callback(e);
-    }, [callback]);
-    useEffect(() => {
-        const element = targetRef.current;
-        if (!element)
-            return;
-        element.addEventListener("contextmenu", handleContextMenu);
-        return () => {
-            element.removeEventListener("contextmenu", handleContextMenu);
-        };
-    }, [handleContextMenu, targetRef]);
-    return targetRef;
-}

package/dist/interactionHooks/useOnRotate.d.ts

@@ -1,2 +0,0 @@
-import { RefObject } from "react";
-export declare function useOnRotate<T extends HTMLElement = HTMLElement>(callback: (e: TouchEvent, deltaAngle: number) => void, ref?: RefObject<T | null> | undefined): RefObject<T | null>;

package/dist/interactionHooks/useOnRotate.js

@@ -1,36 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from "react";
-export function useOnRotate(callback, ref) {
-    const defaultRef = useRef(null);
-    const targetRef = ref !== null && ref !== void 0 ? ref : defaultRef;
-    const [startAngle, setStartAngle] = useState(0);
-    const getAngle = (t1, t2) => Math.atan2(t2.clientY - t1.clientY, t2.clientX - t1.clientX) *
-        (180 / Math.PI);
-    const handleStart = useCallback((e) => {
-        if (e.touches.length === 2) {
-            const [t1, t2] = e.touches;
-            setStartAngle(getAngle(t1, t2));
-        }
-    }, []);
-    const handleMove = useCallback((e) => {
-        if (e.touches.length === 2) {
-            const [t1, t2] = e.touches;
-            const angle = getAngle(t1, t2);
-            const deltaAngle = angle - startAngle;
-            if (Math.abs(deltaAngle) > 15) {
-                callback(e, deltaAngle);
-            }
-        }
-    }, [callback, startAngle]);
-    useEffect(() => {
-        const element = targetRef.current;
-        if (!element)
-            return;
-        element.addEventListener("touchstart", handleStart);
-        element.addEventListener("touchmove", handleMove);
-        return () => {
-            element.removeEventListener("touchstart", handleStart);
-            element.removeEventListener("touchmove", handleMove);
-        };
-    }, [handleMove, handleStart, targetRef]);
-    return targetRef;
-}

package/dist/interactionHooks/useOnScroll.d.ts

@@ -1,2 +0,0 @@
-import { RefObject } from "react";
-export declare function useOnScroll<T extends HTMLElement = HTMLElement>(callback: (scrolling: boolean) => void, ref?: RefObject<T | null> | undefined): RefObject<T | null>;

package/dist/interactionHooks/useOnScroll.js

@@ -1,29 +0,0 @@
-import { useCallback, useEffect, useRef } from "react";
-export function useOnScroll(callback, ref) {
-    const defaultRef = useRef(null);
-    const targetRef = ref !== null && ref !== void 0 ? ref : defaultRef;
-    const scrollTimeoutRef = useRef(undefined);
-    const scrollingRef = useRef(false);
-    const handleScroll = useCallback(() => {
-        if (!scrollingRef.current) {
-            scrollingRef.current = true;
-            callback(true);
-        }
-        clearTimeout(scrollTimeoutRef.current);
-        scrollTimeoutRef.current = setTimeout(() => {
-            scrollingRef.current = false;
-            callback(false);
-        }, 150);
-    }, [callback]);
-    useEffect(() => {
-        const element = targetRef.current;
-        if (!element)
-            return;
-        element.addEventListener("scroll", handleScroll);
-        return () => {
-            element.removeEventListener("scroll", handleScroll);
-            clearTimeout(scrollTimeoutRef.current);
-        };
-    }, [handleScroll, targetRef]);
-    return targetRef;
-}

package/dist/interactionHooks/useOnSwipe.d.ts

@@ -1,2 +0,0 @@
-import { RefObject } from "react";
-export declare function useOnSwipe<T extends HTMLElement = HTMLElement>(callback: (e: TouchEvent, direction: "left" | "right" | "up" | "down") => void, ref?: RefObject<T | null> | undefined): RefObject<T | null>;

package/dist/interactionHooks/useOnSwipe.js

@@ -1,53 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from "react";
-export function useOnSwipe(callback, ref) {
-    const defaultRef = useRef(null);
-    const targetRef = ref !== null && ref !== void 0 ? ref : defaultRef;
-    const [swipeCoordinates, setSwipeCoordinates] = useState({
-        startX: 0,
-        startY: 0,
-        endX: 0,
-        endY: 0,
-    });
-    const touchStart = useCallback((e) => {
-        const t = e.touches[0];
-        setSwipeCoordinates(prev => (Object.assign(Object.assign({}, prev), { startX: t.clientX, startY: t.clientY, endX: t.clientX, endY: t.clientY })));
-    }, []);
-    const touchMove = useCallback((e) => {
-        const t = e.touches[0];
-        setSwipeCoordinates(prev => (Object.assign(Object.assign({}, prev), { endX: t.clientX, endY: t.clientY })));
-    }, []);
-    const touchEnd = useCallback((e) => {
-        // Could do unpacking of object but its not necessary
-        const dx = swipeCoordinates.endX - swipeCoordinates.startX;
-        const dy = swipeCoordinates.endY - swipeCoordinates.startY;
-        const absDx = Math.abs(dx);
-        const absDy = Math.abs(dy);
-        const threshold = 30;
-        if (absDx > absDy) {
-            if (dx > threshold)
-                callback(e, "right");
-            if (dx < -threshold)
-                callback(e, "left");
-        }
-        else {
-            if (dy > threshold)
-                callback(e, "down");
-            if (dy < -threshold)
-                callback(e, "up");
-        }
-    }, [callback, swipeCoordinates.endX, swipeCoordinates.startX, swipeCoordinates.endY, swipeCoordinates.startY]);
-    useEffect(() => {
-        const element = targetRef.current;
-        if (!element)
-            return;
-        element.addEventListener("touchstart", touchStart, { passive: true });
-        element.addEventListener("touchmove", touchMove, { passive: true });
-        element.addEventListener("touchend", touchEnd, { passive: true });
-        return () => {
-            element.removeEventListener("touchstart", touchStart);
-            element.removeEventListener("touchmove", touchMove);
-            element.removeEventListener("touchend", touchEnd);
-        };
-    }, [touchStart, touchMove, touchEnd, targetRef]);
-    return targetRef;
-}

package/dist/interactionHooks/useOnVisibilityChange.d.ts

@@ -1,2 +0,0 @@
-import { RefObject } from "react";
-export declare function useOnVisibilityChange<T extends HTMLElement = HTMLElement>(callback: (visible: boolean) => void, ref?: RefObject<T | null> | undefined): RefObject<T | null>;

package/dist/interactionHooks/useOnVisibilityChange.js

@@ -1,21 +0,0 @@
-import { useCallback, useEffect, useRef } from "react";
-export function useOnVisibilityChange(callback, ref) {
-    const defaultRef = useRef(null);
-    const targetRef = ref !== null && ref !== void 0 ? ref : defaultRef;
-    const handleVisibility = useCallback((visible) => {
-        callback(visible);
-    }, [callback]);
-    useEffect(() => {
-        const element = targetRef.current;
-        if (!element)
-            return;
-        const intersectionObserver = new IntersectionObserver((entries) => {
-            entries[0].isIntersecting ? handleVisibility(true) : handleVisibility(false);
-        });
-        intersectionObserver.observe(element);
-        return () => {
-            intersectionObserver === null || intersectionObserver === void 0 ? void 0 : intersectionObserver.disconnect();
-        };
-    }, [handleVisibility, targetRef]);
-    return targetRef;
-}