@yakad/ui 1.3.157 → 1.3.159

package/dist/ActiveOnVisible/ActiveOnVisible.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { StackProps } from "..";
 export interface ActiveOnVisibleProps extends StackProps {
+    onVisibilityChange?: (visible: boolean) => void;
 }
 export declare const ActiveOnVisible: import("react").ForwardRefExoticComponent<ActiveOnVisibleProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/ActiveOnVisible/ActiveOnVisible.js

@@ -11,23 +11,25 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Activity, forwardRef, useImperativeHandle, useRef, useState, } from "react";
-import { WithInteractions } from "..";
+import { forwardRef, useImperativeHandle, useRef, useState } from "react";
+import { Stack, useOnVisibilityChange } from "..";
 export const ActiveOnVisible = forwardRef(function ActiveOnVisible(_a, forwardedRef) {
-    var { style, children } = _a, restProps = __rest(_a, ["style", "children"]);
+    var { onVisibilityChange, style, children } = _a, restProps = __rest(_a, ["onVisibilityChange", "style", "children"]);
     const localRef = useRef(null);
+    const [boxHeight, setBoxHeight] = useState(0);
+    // const isVisible = boxHeight === 0;
     // Let the parent access our DOM node
     useImperativeHandle(forwardedRef, () => localRef.current);
-    const [boxHeight, setBoxHeight] = useState(0);
-    const isVisible = boxHeight === 0;
-    const handleOnVisible = () => {
-        setBoxHeight(0);
-    };
-    const handleOnHidden = () => {
-        if (localRef.current) {
-            const boxRect = localRef.current.getBoundingClientRect();
+    useOnVisibilityChange((visible) => {
+        var _a;
+        onVisibilityChange === null || onVisibilityChange === void 0 ? void 0 : onVisibilityChange(visible);
+        if (visible) {
+            setBoxHeight(0);
+        }
+        else {
+            const boxRect = (_a = localRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
             setBoxHeight(boxRect.height);
         }
-    };
-    return (_jsx(WithInteractions, Object.assign({ ref: localRef }, restProps, { style: Object.assign({ height: boxHeight || "auto" }, style), onVisible: handleOnVisible, onHidden: handleOnHidden, children: _jsx(Activity, { mode: isVisible ? "visible" : "hidden", children: children }) })));
+    }, localRef);
+    return (_jsx(Stack, Object.assign({ ref: localRef }, restProps, { style: Object.assign({ height: boxHeight || "auto" }, style), children: children })));
 });

package/dist/Dropdown/Dropdown.js

@@ -13,7 +13,7 @@ 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, forwardRef, useImperativeHandle, } from "react";
 import classNames from "classnames";
-import { Card, WithInteractions } from "..";
+import { Card, useOnOutsideClick } from "..";
 import styles from "./Dropdown.module.css";
 export const Dropdown = forwardRef(function Dropdown(_a, forwardedRef) {
     var { fullWidthOnParentDemand = false, // Def in Card is True
@@ -72,7 +72,10 @@ export const Dropdown = forwardRef(function Dropdown(_a, forwardedRef) {
             setIsPlaced(true);
         }
     }, [children, placementTargetRef]);
-    return (_jsxs(_Fragment, { children: [!triggerref && _jsx("div", { ref: fallbackTriggerRef }), _jsx(WithInteractions, { onOutsideClick: onClose, children: _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, {
+    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, {
                     [styles.isPlacedAbove]: isPlacedAbove,
                 }, { [styles.blur]: blur }), style: {
                     top: arrowPosition.top,

package/dist/Popup/Popup.js

@@ -11,12 +11,16 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from "react";
+import { forwardRef, useImperativeHandle } from "react";
 import classNames from "classnames";
 import { Symbol } from "@yakad/symbols";
-import { Button, Card, Row, Screen, Spacer, Stack, Text, WithInteractions, } from "..";
+import { Button, Card, Row, Screen, Spacer, Stack, Text, useOnOutsideClick, } from "..";
 import styles from "./Popup.module.css";
-export const Popup = forwardRef(function Popup(_a, ref) {
+export const Popup = forwardRef(function Popup(_a, forwardedRef) {
     var { align, onClose, heading, className, children } = _a, restProps = __rest(_a, ["align", "onClose", "heading", "className", "children"]);
-    return (_jsx(Screen, { align: "center", className: styles.popupscreen, children: _jsx(WithInteractions, { align: "center", onOutsideClick: onClose, children: _jsxs(Card, Object.assign({ ref: ref }, 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 localRef = useOnOutsideClick(() => {
+        onClose === null || onClose === void 0 ? void 0 : onClose();
+    });
+    useImperativeHandle(forwardedRef, () => 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 })] })) }));
 });

package/dist/RenderByScroll/RenderByScroll.js

@@ -12,8 +12,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { forwardRef, useEffect, useRef, useState } from "react";
-import { Stack, WithInteractions } from "..";
-const data = Array.from({ length: 78 });
+import { ActiveOnVisible, Stack, useOnVisibilityChange } from "..";
 export const RenderByScroll = forwardRef(function RenderByScroll(_a, ref) {
     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"]);
@@ -44,7 +43,7 @@ export const RenderByScroll = forwardRef(function RenderByScroll(_a, ref) {
     useEffect(() => {
         const isPriorityBYHighSide = overRenderedOnHighSide < 1 ||
             overRenderedOnHighSide - 1 <= overRenderedOnLowSide;
-        const isHighSideNewRenderRemains = rendered.highest < data.length - 1;
+        const isHighSideNewRenderRemains = rendered.highest < childrenArray.length - 1;
         const isLowSideNewRenderRemains = rendered.lowest > 0;
         if (!stopNewRenders) {
             if (isPriorityBYHighSide &&
@@ -81,12 +80,17 @@ export const RenderByScroll = forwardRef(function RenderByScroll(_a, ref) {
         return () => clearTimeout(timeout);
         // eslint-disable-next-line
     }, [jumpToIndex]);
-    return (_jsxs(Stack, Object.assign({ ref: ref }, restProps, { style: Object.assign({ minHeight: "100vh" }, style), children: [rendered.lowest > 0 && (_jsx(WithInteractions, { style: {
+    const onvisibRef = useOnVisibilityChange((visible) => {
+        setIsVisibleLowSideLimitSensor(visible);
+    });
+    return (_jsxs(Stack, Object.assign({ ref: ref }, restProps, { style: Object.assign({ minHeight: "100vh" }, style), children: [rendered.lowest > 0 && (_jsx("div", { ref: onvisibRef, style: {
                     marginBottom: `${scrollMarginTop}rem`,
-                }, onVisibilityChange: (v) => setIsVisibleLowSideLimitSensor(v) })), childrenArray.map((child, i) => i >= rendered.lowest &&
-                i <= rendered.highest && (_jsx(WithInteractions, { ref: (el) => {
+                } })), childrenArray.map((child, i) => i >= rendered.lowest &&
+                i <= rendered.highest && (_jsx(ActiveOnVisible, { ref: (el) => {
                     childRefs.current[i] = el;
                 }, style: {
                     scrollMarginTop: `${scrollMarginTop}rem`,
-                }, onVisible: () => handleOnVisible(i), children: child }, i)))] })));
+                }, onVisibilityChange: (visible) => {
+                    visible && handleOnVisible(i);
+                }, children: child }, i)))] })));
 });

package/dist/Text/Text.d.ts

@@ -1,29 +1,17 @@
 /// <reference types="react" />
 type TextVariant = "heading1" | "heading2" | "heading3" | "heading4" | "heading5" | "heading6" | "body1" | "body2" | "body3" | "body4" | "body5" | "body6" | "caption" | "span";
-export interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
+export interface TextProps<T> extends React.HTMLAttributes<T> {
     variant?: TextVariant;
     color?: "onSurfaceColor" | "onSurfaceVariantColor";
     children?: React.ReactNode;
 }
-export declare const H1: import("react").ForwardRefExoticComponent<HeadingProps & import("react").RefAttributes<HTMLHeadingElement>>;
-export declare const H2: import("react").ForwardRefExoticComponent<HeadingProps & import("react").RefAttributes<HTMLHeadingElement>>;
-export declare const H3: import("react").ForwardRefExoticComponent<HeadingProps & import("react").RefAttributes<HTMLHeadingElement>>;
-export declare const H4: import("react").ForwardRefExoticComponent<HeadingProps & import("react").RefAttributes<HTMLHeadingElement>>;
-export declare const H5: import("react").ForwardRefExoticComponent<HeadingProps & import("react").RefAttributes<HTMLHeadingElement>>;
-export declare const H6: import("react").ForwardRefExoticComponent<HeadingProps & import("react").RefAttributes<HTMLHeadingElement>>;
-export interface ParagraphProps extends React.HTMLAttributes<HTMLParagraphElement> {
-    variant?: TextVariant;
-    children?: React.ReactNode;
-}
-export declare const P: import("react").ForwardRefExoticComponent<ParagraphProps & import("react").RefAttributes<HTMLParagraphElement>>;
-export interface SpanProps extends React.HTMLAttributes<HTMLSpanElement> {
-    variant?: TextVariant;
-    children?: React.ReactNode;
-}
-export declare const Span: import("react").ForwardRefExoticComponent<SpanProps & import("react").RefAttributes<HTMLSpanElement>>;
-export interface TextProps extends React.HTMLAttributes<HTMLDivElement> {
-    variant?: TextVariant;
-    children?: React.ReactNode;
-}
-export declare const Text: import("react").ForwardRefExoticComponent<TextProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const H1: import("react").ForwardRefExoticComponent<TextProps<HTMLHeadingElement> & import("react").RefAttributes<HTMLHeadingElement>>;
+export declare const H2: import("react").ForwardRefExoticComponent<TextProps<HTMLHeadingElement> & import("react").RefAttributes<HTMLHeadingElement>>;
+export declare const H3: import("react").ForwardRefExoticComponent<TextProps<HTMLHeadingElement> & import("react").RefAttributes<HTMLHeadingElement>>;
+export declare const H4: import("react").ForwardRefExoticComponent<TextProps<HTMLHeadingElement> & import("react").RefAttributes<HTMLHeadingElement>>;
+export declare const H5: import("react").ForwardRefExoticComponent<TextProps<HTMLHeadingElement> & import("react").RefAttributes<HTMLHeadingElement>>;
+export declare const H6: import("react").ForwardRefExoticComponent<TextProps<HTMLHeadingElement> & import("react").RefAttributes<HTMLHeadingElement>>;
+export declare const P: import("react").ForwardRefExoticComponent<TextProps<HTMLParagraphElement> & import("react").RefAttributes<HTMLParagraphElement>>;
+export declare const Span: import("react").ForwardRefExoticComponent<TextProps<HTMLSpanElement> & import("react").RefAttributes<HTMLSpanElement>>;
+export declare const Text: import("react").ForwardRefExoticComponent<TextProps<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
 export {};

package/dist/WithOverlay/WithOverlay.d.ts

@@ -1,11 +1,11 @@
 import { RefObject } from "react";
-import { Dropdown, DropdownProps, Popup, PopupProps, WithInteractionsProps } from "..";
+import { Dropdown, DropdownProps, Popup, PopupProps, StackProps } from "..";
 export interface OverlayProps {
     triggerref?: RefObject<HTMLElement | null>;
     onClose?: () => void;
 }
 type AllowedOverlays = React.ReactElement<PopupProps, typeof Popup> | React.ReactElement<DropdownProps, typeof Dropdown>;
-export interface WithOverlayProps extends WithInteractionsProps {
+export interface WithOverlayProps extends StackProps {
     trigger?: "onClick" | "onRightClick";
     overlay?: AllowedOverlays;
     children?: React.ReactElement;

package/dist/WithOverlay/WithOverlay.js

@@ -13,14 +13,21 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, cloneElement, useEffect, useRef, forwardRef, useImperativeHandle, } from "react";
 import { createPortal } from "react-dom";
-import { WithInteractions, } from "..";
+import { Stack, useOnRightClick, } from "..";
 export const WithOverlay = forwardRef(function WithOverlay(_a, forwardedRef) {
-    var { trigger = "onClick", overlay, children, onRightClick, onClick } = _a, restProps = __rest(_a, ["trigger", "overlay", "children", "onRightClick", "onClick"]);
+    var { trigger = "onClick", overlay, children, onClick } = _a, restProps = __rest(_a, ["trigger", "overlay", "children", "onClick"]);
     // Get Triggers ref and send to Overlay
-    const triggerRef = useRef(null);
-    // Let the parent access our DOM node
-    useImperativeHandle(forwardedRef, () => triggerRef.current);
+    const localRef = useRef(null);
     const [showOverlay, setShowOverlay] = useState(false);
+    useOnRightClick(() => {
+        setShowOverlay(true);
+    }, localRef);
+    const onClickHandler = (e) => {
+        trigger === "onClick" && setShowOverlay((prev) => !prev);
+        onClick === null || onClick === void 0 ? void 0 : onClick(e);
+    };
+    // Let the parent access our DOM node
+    useImperativeHandle(forwardedRef, () => localRef.current);
     // Disable Body Scroll on showOverlay
     useEffect(() => {
         document.body.style.overflow = showOverlay ? "hidden" : "initial";
@@ -33,18 +40,12 @@ export const WithOverlay = forwardRef(function WithOverlay(_a, forwardedRef) {
     const teleport = overlay &&
         portalRoot &&
         createPortal(cloneElement(overlay, {
-            triggerref: triggerRef,
+            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(WithInteractions, Object.assign({ ref: triggerRef }, restProps, { onRightClick: (e) => {
-                    trigger === "onRightClick" && setShowOverlay(true);
-                    onRightClick === null || onRightClick === void 0 ? void 0 : onRightClick(e);
-                }, onClick: (e) => {
-                    trigger === "onClick" && setShowOverlay(true);
-                    onClick === null || onClick === void 0 ? void 0 : onClick(e);
-                }, children: children })), showOverlay && teleport] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Stack, Object.assign({ ref: localRef }, restProps, { onClick: onClickHandler, children: children })), showOverlay && teleport] }));
 });

package/dist/index.d.ts

@@ -29,7 +29,6 @@ export * from "./RadioButton/RadioButton";
 export * from "./CodeBox/CodeBox";
 export * from "./Display/Display";
 export * from "./WithOverlay/WithOverlay";
-export * from "./WithInteractions/WithInteractions";
 export * from "./RenderByScroll/RenderByScroll";
 export * from "./ActiveOnVisible/ActiveOnVisible";
 export * from "./Dropdown/Dropdown";
@@ -41,7 +40,7 @@ export * from "./interactionHooks/useOnDoubleTap";
 export * from "./interactionHooks/useOnSwipe";
 export * from "./interactionHooks/useOnPinch";
 export * from "./interactionHooks/useOnRotate";
-export * from "./interactionHooks/useOnResizeObserver";
-export * from "./interactionHooks/useOnVisibilityObserver";
+export * from "./interactionHooks/useOnResizeChange";
+export * from "./interactionHooks/useOnVisibilityChange";
 export * from "./interactionHooks/useOnHoverChange";
 export * from "./interactionHooks/useOnScroll";

package/dist/index.js

@@ -34,7 +34,6 @@ export * from "./CodeBox/CodeBox";
 // Utilities
 export * from "./Display/Display"; // Stack Based
 export * from "./WithOverlay/WithOverlay";
-export * from "./WithInteractions/WithInteractions"; // Stack Based
 export * from "./RenderByScroll/RenderByScroll"; // Stack Based
 export * from "./ActiveOnVisible/ActiveOnVisible"; // Stack Based
 // Overlays
@@ -47,7 +46,7 @@ export * from "./interactionHooks/useOnDoubleTap";
 export * from "./interactionHooks/useOnSwipe";
 export * from "./interactionHooks/useOnPinch";
 export * from "./interactionHooks/useOnRotate";
-export * from "./interactionHooks/useOnResizeObserver";
-export * from "./interactionHooks/useOnVisibilityObserver";
+export * from "./interactionHooks/useOnResizeChange";
+export * from "./interactionHooks/useOnVisibilityChange";
 export * from "./interactionHooks/useOnHoverChange";
 export * from "./interactionHooks/useOnScroll";

package/dist/interactionHooks/useOnDoubleTap.d.ts

@@ -1,2 +1,2 @@
 import { RefObject } from "react";
-export declare function useOnDoubleTap<T extends HTMLElement = HTMLElement>(callback: (e: TouchEvent) => void): RefObject<T | null>;
+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,6 +1,7 @@
 import { useCallback, useEffect, useRef, useState } from "react";
-export function useOnDoubleTap(callback) {
-    const ref = useRef(null);
+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();
@@ -10,13 +11,13 @@ export function useOnDoubleTap(callback) {
         setLastTap(now);
     }, [callback, lastTap]);
     useEffect(() => {
-        const element = ref.current;
+        const element = targetRef.current;
         if (!element)
             return;
         element.addEventListener("touchend", handleDoubleTap);
         return () => {
             element.removeEventListener("touchend", handleDoubleTap);
         };
-    }, [handleDoubleTap]);
-    return ref;
+    }, [handleDoubleTap, targetRef]);
+    return targetRef;
 }

package/dist/interactionHooks/useOnHoverChange.d.ts

@@ -1,2 +1,2 @@
 import { RefObject } from "react";
-export declare function useOnHoverChange<T extends HTMLElement = HTMLElement>(callback: (e: MouseEvent, change: "leave" | "enter") => void): RefObject<T | null>;
+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,14 +1,15 @@
 import { useCallback, useEffect, useRef } from "react";
-export function useOnHoverChange(callback) {
-    const ref = useRef(null);
+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, "enter");
+        window.matchMedia("(pointer: fine)").matches && callback(e, true);
     }, [callback]);
     const handleMouseLeave = useCallback((e) => {
-        window.matchMedia("(pointer: fine)").matches && callback(e, "leave");
+        window.matchMedia("(pointer: fine)").matches && callback(e, false);
     }, [callback]);
     useEffect(() => {
-        const element = ref.current;
+        const element = targetRef.current;
         if (!element)
             return;
         element.addEventListener("mouseenter", handleMouseEnter);
@@ -17,6 +18,6 @@ export function useOnHoverChange(callback) {
             element.removeEventListener("mouseenter", handleMouseEnter);
             element.removeEventListener("mouseleave", handleMouseLeave);
         };
-    }, [handleMouseEnter, handleMouseLeave]);
-    return ref;
+    }, [handleMouseEnter, handleMouseLeave, targetRef]);
+    return targetRef;
 }

package/dist/interactionHooks/useOnOutsideClick.d.ts

@@ -1,2 +1,2 @@
 import { RefObject } from "react";
-export declare function useOnOutsideClick<T extends HTMLElement = HTMLElement>(callback: (e: MouseEvent) => void): RefObject<T | null>;
+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,20 +1,21 @@
 import { useCallback, useEffect, useRef } from "react";
-export function useOnOutsideClick(callback) {
-    const ref = useRef(null);
+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 = ref.current;
+        const element = targetRef.current;
         if (!element)
             return;
         if (!element.contains(e.target)) {
             callback(e);
         }
-    }, [callback]);
+    }, [callback, targetRef]);
     useEffect(() => {
         document.addEventListener("click", handleClick);
         return () => {
             document.removeEventListener("click", handleClick);
         };
     }, [handleClick]);
-    return ref;
+    return targetRef;
 }

package/dist/interactionHooks/useOnPinch.d.ts

@@ -1,2 +1,2 @@
 import { RefObject } from "react";
-export declare function useOnPinch<T extends HTMLElement = HTMLElement>(callback: (e: TouchEvent, action: "in" | "out") => void): RefObject<T | null>;
+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,6 +1,7 @@
 import { useCallback, useEffect, useRef, useState } from "react";
-export function useOnPinch(callback) {
-    const ref = useRef(null);
+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) => {
@@ -20,7 +21,7 @@ export function useOnPinch(callback) {
         }
     }, [callback, startDistance]);
     useEffect(() => {
-        const element = ref.current;
+        const element = targetRef.current;
         if (!element)
             return;
         element.addEventListener("touchstart", handleStart);
@@ -29,6 +30,6 @@ export function useOnPinch(callback) {
             element.removeEventListener("touchstart", handleStart);
             element.removeEventListener("touchmove", handleMove);
         };
-    }, [handleMove, handleStart]);
-    return ref;
+    }, [handleMove, handleStart, targetRef]);
+    return targetRef;
 }

package/dist/interactionHooks/useOnResizeChange.d.ts

@@ -0,0 +1,2 @@
+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/{useOnResizeObserver.js → useOnResizeChange.js}

@@ -1,11 +1,12 @@
 import { useCallback, useEffect, useRef } from "react";
-export function useOnResizeObserver(callback) {
-    const ref = useRef(null);
+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 = ref.current;
+        const element = targetRef.current;
         if (!element)
             return;
         const resizeObserver = new ResizeObserver((entries) => {
@@ -17,6 +18,6 @@ export function useOnResizeObserver(callback) {
         return () => {
             resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect();
         };
-    }, [handleResize]);
-    return ref;
+    }, [handleResize, targetRef]);
+    return targetRef;
 }

package/dist/interactionHooks/useOnRightClick.d.ts

@@ -1,2 +1,2 @@
 import { RefObject } from "react";
-export declare function useOnRightClick<T extends HTMLElement = HTMLElement>(callback: (e: MouseEvent) => void): RefObject<T | null>;
+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,18 +1,19 @@
 import { useCallback, useEffect, useRef } from "react";
-export function useOnRightClick(callback) {
-    const ref = useRef(null);
+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 = ref.current;
+        const element = targetRef.current;
         if (!element)
             return;
         element.addEventListener("contextmenu", handleContextMenu);
         return () => {
             element.removeEventListener("contextmenu", handleContextMenu);
         };
-    }, [handleContextMenu]);
-    return ref;
+    }, [handleContextMenu, targetRef]);
+    return targetRef;
 }

package/dist/interactionHooks/useOnRotate.d.ts

@@ -1,2 +1,2 @@
 import { RefObject } from "react";
-export declare function useOnRotate<T extends HTMLElement = HTMLElement>(callback: (e: TouchEvent, deltaAngle: number) => void): RefObject<T | null>;
+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,6 +1,7 @@
 import { useCallback, useEffect, useRef, useState } from "react";
-export function useOnRotate(callback) {
-    const ref = useRef(null);
+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);
@@ -21,7 +22,7 @@ export function useOnRotate(callback) {
         }
     }, [callback, startAngle]);
     useEffect(() => {
-        const element = ref.current;
+        const element = targetRef.current;
         if (!element)
             return;
         element.addEventListener("touchstart", handleStart);
@@ -30,6 +31,6 @@ export function useOnRotate(callback) {
             element.removeEventListener("touchstart", handleStart);
             element.removeEventListener("touchmove", handleMove);
         };
-    }, [handleMove, handleStart]);
-    return ref;
+    }, [handleMove, handleStart, targetRef]);
+    return targetRef;
 }

package/dist/interactionHooks/useOnScroll.d.ts

@@ -1,2 +1,2 @@
 import { RefObject } from "react";
-export declare function useOnScroll<T extends HTMLElement = HTMLElement>(callback: (action: "start" | "stop") => void): RefObject<T | null>;
+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,22 +1,22 @@
 import { useCallback, useEffect, useRef } from "react";
-export function useOnScroll(callback) {
-    const ref = useRef(null);
+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(() => {
-        console.log("bb123");
         if (!scrollingRef.current) {
             scrollingRef.current = true;
-            callback("start");
+            callback(true);
         }
         clearTimeout(scrollTimeoutRef.current);
         scrollTimeoutRef.current = setTimeout(() => {
             scrollingRef.current = false;
-            callback("stop");
+            callback(false);
         }, 150);
     }, [callback]);
     useEffect(() => {
-        const element = ref.current;
+        const element = targetRef.current;
         if (!element)
             return;
         element.addEventListener("scroll", handleScroll);
@@ -24,6 +24,6 @@ export function useOnScroll(callback) {
             element.removeEventListener("scroll", handleScroll);
             clearTimeout(scrollTimeoutRef.current);
         };
-    }, [handleScroll]);
-    return ref;
+    }, [handleScroll, targetRef]);
+    return targetRef;
 }

package/dist/interactionHooks/useOnSwipe.d.ts

@@ -1,2 +1,2 @@
 import { RefObject } from "react";
-export declare function useOnSwipe<T extends HTMLElement = HTMLElement>(callback: (e: TouchEvent, direction: "left" | "right" | "up" | "down") => void): RefObject<T | null>;
+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,6 +1,7 @@
 import { useCallback, useEffect, useRef, useState } from "react";
-export function useOnSwipe(callback) {
-    const ref = useRef(null);
+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,
@@ -36,7 +37,7 @@ export function useOnSwipe(callback) {
         }
     }, [callback, swipeCoordinates.endX, swipeCoordinates.startX, swipeCoordinates.endY, swipeCoordinates.startY]);
     useEffect(() => {
-        const element = ref.current;
+        const element = targetRef.current;
         if (!element)
             return;
         element.addEventListener("touchstart", touchStart, { passive: true });
@@ -47,6 +48,6 @@ export function useOnSwipe(callback) {
             element.removeEventListener("touchmove", touchMove);
             element.removeEventListener("touchend", touchEnd);
         };
-    }, [touchStart, touchMove, touchEnd]);
-    return ref;
+    }, [touchStart, touchMove, touchEnd, targetRef]);
+    return targetRef;
 }

package/dist/interactionHooks/useOnVisibilityChange.d.ts

@@ -0,0 +1,2 @@
+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

@@ -0,0 +1,21 @@
+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;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@yakad/ui",
-    "version": "1.3.157",
+    "version": "1.3.159",
     "private": false,
     "author": "Natiq",
     "description": "UI components for NextJS/React",
@@ -33,7 +33,7 @@
     },
     "dependencies": {
         "@yakad/lib": "1.0.22",
-        "@yakad/symbols": "^1.0.28",
+        "@yakad/symbols": "1.0.28",
         "classnames": "2.5.1"
     },
     "peerDependencies": {
@@ -47,4 +47,4 @@
         "react": "^19.0.0",
         "react-dom": "^19.0.0"
     }
-}
+}

package/dist/WithInteractions/WithInteractions.d.ts

@@ -1,25 +0,0 @@
-/// <reference types="react" />
-import { StackProps } from "../Stack/Stack";
-export interface WithInteractionsProps extends StackProps {
-    onRightClick?: (e: MouseEvent) => void;
-    onTap?: (e: TouchEvent) => void;
-    onDoubleTap?: (e: TouchEvent) => void;
-    onOutsideClick?: () => void;
-    onSwipeLeft?: () => void;
-    onSwipeRight?: () => void;
-    onSwipeUp?: () => void;
-    onSwipeDown?: () => void;
-    onPinchIn?: () => void;
-    onPinchOut?: () => void;
-    onRotate?: (angle: number) => void;
-    onScrollStart?: () => void;
-    onScrollStop?: () => void;
-    onResize?: (entry: ResizeObserverEntry) => void;
-    onVisibilityChange?: (visible: boolean) => void;
-    onVisible?: () => void;
-    onHidden?: () => void;
-    onMouseHoverChange?: (isHover: boolean, e: MouseEvent) => void;
-    onMouseHoverStart?: (e: MouseEvent) => void;
-    onMouseHoverLeave?: (e: MouseEvent) => void;
-}
-export declare const WithInteractions: import("react").ForwardRefExoticComponent<WithInteractionsProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/WithInteractions/WithInteractions.js

@@ -1,226 +0,0 @@
-"use client";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
-import { Stack } from "../Stack/Stack";
-export const WithInteractions = forwardRef(function WithInteractions(_a, forwardedRef) {
-    var { children, onRightClick, onTap, onDoubleTap, onOutsideClick, onSwipeLeft, onSwipeRight, onSwipeUp, onSwipeDown, onPinchIn, onPinchOut, onRotate, onScrollStart, onScrollStop, onResize, onVisibilityChange, onVisible, onHidden, onMouseHoverChange, onMouseHoverStart, onMouseHoverLeave } = _a, restProps = __rest(_a, ["children", "onRightClick", "onTap", "onDoubleTap", "onOutsideClick", "onSwipeLeft", "onSwipeRight", "onSwipeUp", "onSwipeDown", "onPinchIn", "onPinchOut", "onRotate", "onScrollStart", "onScrollStop", "onResize", "onVisibilityChange", "onVisible", "onHidden", "onMouseHoverChange", "onMouseHoverStart", "onMouseHoverLeave"]);
-    const localRef = useRef(null);
-    // Let the parent access our DOM node
-    useImperativeHandle(forwardedRef, () => localRef.current);
-    useEffect(() => {
-        const el = localRef.current;
-        if (!el)
-            return;
-        // Event cleanup store
-        const cleanupFns = [];
-        // === RIGHT CLICK ===
-        if (onRightClick) {
-            const handler = (e) => {
-                e.preventDefault();
-                onRightClick(e);
-            };
-            el.addEventListener("contextmenu", handler);
-            cleanupFns.push(() => el.removeEventListener("contextmenu", handler));
-        }
-        // === OUTSIDE CLICK ===
-        if (onOutsideClick) {
-            const handler = (e) => {
-                if (!el.contains(e.target)) {
-                    onOutsideClick();
-                }
-            };
-            document.addEventListener("click", handler);
-            cleanupFns.push(() => document.removeEventListener("click", handler));
-        }
-        // === TAP & DOUBLE TAP ===
-        if (onTap || onDoubleTap) {
-            let lastTap = 0;
-            const tapHandler = (e) => {
-                const now = Date.now();
-                if (now - lastTap < 300) {
-                    onDoubleTap === null || onDoubleTap === void 0 ? void 0 : onDoubleTap(e);
-                }
-                else {
-                    onTap === null || onTap === void 0 ? void 0 : onTap(e);
-                }
-                lastTap = now;
-            };
-            el.addEventListener("touchend", tapHandler);
-            cleanupFns.push(() => el.removeEventListener("touchend", tapHandler));
-        }
-        // === SWIPE ===
-        if (onSwipeLeft || onSwipeRight || onSwipeUp || onSwipeDown) {
-            let startX = 0, startY = 0, endX = 0, endY = 0;
-            const touchStart = (e) => {
-                const t = e.touches[0];
-                startX = t.clientX;
-                startY = t.clientY;
-                endX = startX;
-                endY = startY;
-            };
-            const touchMove = (e) => {
-                const t = e.touches[0];
-                endX = t.clientX;
-                endY = t.clientY;
-            };
-            const touchEnd = () => {
-                const dx = endX - startX;
-                const dy = endY - startY;
-                const absDx = Math.abs(dx);
-                const absDy = Math.abs(dy);
-                const threshold = 30;
-                if (absDx > absDy) {
-                    if (dx > threshold)
-                        onSwipeRight === null || onSwipeRight === void 0 ? void 0 : onSwipeRight();
-                    if (dx < -threshold)
-                        onSwipeLeft === null || onSwipeLeft === void 0 ? void 0 : onSwipeLeft();
-                }
-                else {
-                    if (dy > threshold)
-                        onSwipeDown === null || onSwipeDown === void 0 ? void 0 : onSwipeDown();
-                    if (dy < -threshold)
-                        onSwipeUp === null || onSwipeUp === void 0 ? void 0 : onSwipeUp();
-                }
-            };
-            el.addEventListener("touchstart", touchStart);
-            el.addEventListener("touchmove", touchMove);
-            el.addEventListener("touchend", touchEnd);
-            cleanupFns.push(() => {
-                el.removeEventListener("touchstart", touchStart);
-                el.removeEventListener("touchmove", touchMove);
-                el.removeEventListener("touchend", touchEnd);
-            });
-        }
-        // === PINCH & ROTATE ===
-        if (onPinchIn || onPinchOut || onRotate) {
-            let startDistance = 0;
-            let startAngle = 0;
-            const getDistance = (t1, t2) => Math.hypot(t2.clientX - t1.clientX, t2.clientY - t1.clientY);
-            const getAngle = (t1, t2) => Math.atan2(t2.clientY - t1.clientY, t2.clientX - t1.clientX) *
-                (180 / Math.PI);
-            const handleStart = (e) => {
-                if (e.touches.length === 2) {
-                    const [t1, t2] = e.touches;
-                    startDistance = getDistance(t1, t2);
-                    startAngle = getAngle(t1, t2);
-                }
-            };
-            const handleMove = (e) => {
-                if (e.touches.length === 2) {
-                    const [t1, t2] = e.touches;
-                    const dist = getDistance(t1, t2);
-                    const angle = getAngle(t1, t2);
-                    if (dist < startDistance - 20)
-                        onPinchIn === null || onPinchIn === void 0 ? void 0 : onPinchIn();
-                    if (dist > startDistance + 20)
-                        onPinchOut === null || onPinchOut === void 0 ? void 0 : onPinchOut();
-                    const deltaAngle = angle - startAngle;
-                    if (Math.abs(deltaAngle) > 15) {
-                        onRotate === null || onRotate === void 0 ? void 0 : onRotate(deltaAngle);
-                    }
-                }
-            };
-            el.addEventListener("touchstart", handleStart);
-            el.addEventListener("touchmove", handleMove);
-            cleanupFns.push(() => {
-                el.removeEventListener("touchstart", handleStart);
-                el.removeEventListener("touchmove", handleMove);
-            });
-        }
-        // === RESIZE OBSERVER ===
-        let resizeObserver = null;
-        if (onResize) {
-            resizeObserver = new ResizeObserver((entries) => {
-                for (const entry of entries) {
-                    onResize(entry);
-                }
-            });
-            resizeObserver.observe(el);
-            cleanupFns.push(() => resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect());
-        }
-        // === VISIBILITY OBSERVER ===
-        let intersectionObserver = null;
-        if (onVisibilityChange || onVisible || onHidden) {
-            intersectionObserver = new IntersectionObserver((entries) => {
-                entries[0].isIntersecting ? onVisible === null || onVisible === void 0 ? void 0 : onVisible() : onHidden === null || onHidden === void 0 ? void 0 : onHidden();
-                onVisibilityChange === null || onVisibilityChange === void 0 ? void 0 : onVisibilityChange(entries[0].isIntersecting);
-            });
-            intersectionObserver.observe(el);
-            cleanupFns.push(() => intersectionObserver === null || intersectionObserver === void 0 ? void 0 : intersectionObserver.disconnect());
-        }
-        // === On Hover Change ===
-        const hasFinePointer = window.matchMedia("(pointer: fine)").matches;
-        if (hasFinePointer &&
-            (onMouseHoverChange || onMouseHoverStart || onMouseHoverLeave)) {
-            const mouseEnter = (e) => {
-                onMouseHoverChange === null || onMouseHoverChange === void 0 ? void 0 : onMouseHoverChange(true, e);
-                onMouseHoverStart === null || onMouseHoverStart === void 0 ? void 0 : onMouseHoverStart(e);
-            };
-            const mouseLeave = (e) => {
-                onMouseHoverChange === null || onMouseHoverChange === void 0 ? void 0 : onMouseHoverChange(true, e);
-                onMouseHoverLeave === null || onMouseHoverLeave === void 0 ? void 0 : onMouseHoverLeave(e);
-            };
-            el.addEventListener("mouseenter", mouseEnter);
-            el.addEventListener("mouseleave", mouseLeave);
-            cleanupFns.push(() => {
-                el.removeEventListener("mouseenter", mouseEnter);
-                el.removeEventListener("mouseleave", mouseLeave);
-            });
-        }
-        // === SCROLL START/END ===
-        if (onScrollStart) {
-            let scrolling = false;
-            let scrollTimeout;
-            const scrollHandler = () => {
-                if (!scrolling) {
-                    scrolling = true;
-                    onScrollStart === null || onScrollStart === void 0 ? void 0 : onScrollStart();
-                }
-                clearTimeout(scrollTimeout);
-                scrollTimeout = setTimeout(() => {
-                    scrolling = false;
-                    onScrollStop === null || onScrollStop === void 0 ? void 0 : onScrollStop();
-                }, 150);
-            };
-            el.addEventListener("scroll", scrollHandler);
-            cleanupFns.push(() => el.removeEventListener("scroll", scrollHandler));
-        }
-        // Cleanup on unmount
-        return () => {
-            cleanupFns.forEach((fn) => fn());
-        };
-    }, [
-        onRightClick,
-        onTap,
-        onDoubleTap,
-        onOutsideClick,
-        onSwipeLeft,
-        onSwipeRight,
-        onSwipeUp,
-        onSwipeDown,
-        onPinchIn,
-        onPinchOut,
-        onRotate,
-        onScrollStart,
-        onScrollStop,
-        onResize,
-        onVisibilityChange,
-        onVisible,
-        onHidden,
-        onMouseHoverChange,
-        onMouseHoverStart,
-        onMouseHoverLeave,
-    ]);
-    return (_jsx(Stack, Object.assign({ ref: localRef }, restProps, { children: children })));
-});

package/dist/interactionHooks/useOnResizeObserver.d.ts

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

package/dist/interactionHooks/useOnVisibilityObserver.d.ts

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

package/dist/interactionHooks/useOnVisibilityObserver.js

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