@yakad/ui 1.3.140 → 1.3.142

package/dist/ActiveOnVisible/ActiveOnVisible.js

@@ -11,10 +11,23 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Activity, forwardRef, useState } from "react";
+import { Activity, forwardRef, useImperativeHandle, useRef, useState, } from "react";
 import { WithInteractions } from "..";
-export const ActiveOnVisible = forwardRef(function ActiveOnVisible(_a, ref) {
-    var { children } = _a, restProps = __rest(_a, ["children"]);
-    const [isVisible, setIsVisible] = useState(true);
-    return (_jsx(WithInteractions, Object.assign({ ref: ref }, restProps, { onVisibilityChange: (v) => setIsVisible(v), children: _jsx(Activity, { mode: isVisible ? "visible" : "hidden", children: children }) })));
+export const ActiveOnVisible = forwardRef(function ActiveOnVisible(_a, forwardedRef) {
+    var { style, children } = _a, restProps = __rest(_a, ["style", "children"]);
+    const localRef = useRef(null);
+    // 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();
+            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 }) })));
 });

package/dist/Button/Button.js

@@ -16,8 +16,8 @@ import { LoadingIcon } from "..";
 import styles from "./Button.module.css";
 export const Button = forwardRef(function Button(_a, ref) {
     var { fullWidth = false, size = "medium", variant = "text", borderStyle = "rounded", icon, iconPosition = "start", loadingPosition = "auto", loadingVariant, className, children } = _a, restProps = __rest(_a, ["fullWidth", "size", "variant", "borderStyle", "icon", "iconPosition", "loadingPosition", "loadingVariant", "className", "children"]);
-    const childrenFirst = Boolean(iconPosition === "end");
-    const isloadingPositionCenter = Boolean(!icon || loadingPosition === "center");
+    const childrenFirst = iconPosition === "end";
+    const isloadingPositionCenter = !icon || loadingPosition === "center";
     const joinedClassNames = classNames({ fullWidth: fullWidth }, styles.button, styles[variant], { [styles.loading]: loadingVariant }, { [styles.loadingPositionCenter]: isloadingPositionCenter }, styles[size], styles[borderStyle], { [styles.iconButton]: !children && icon }, className);
     return (_jsxs("button", Object.assign({ ref: ref, className: joinedClassNames }, restProps, { children: [childrenFirst && children, loadingVariant && (_jsx("div", { className: classNames(styles.displayOnDisabled, {
                     [styles.positionCenter]: isloadingPositionCenter,

package/dist/LoadingIcon/LoadingIcon.js

@@ -14,7 +14,7 @@ import { forwardRef } from "react";
 import classNames from "classnames";
 import styles from "./LoadingIcon.module.css";
 export const LoadingIcon = forwardRef(function LoadingIcon(_a, ref) {
-    var { size = "medium", variant = "spinner", className } = _a, restProps = __rest(_a, ["size", "variant", "className"]);
+    var { size = "medium", variant = "dots", className } = _a, restProps = __rest(_a, ["size", "variant", "className"]);
     const joinedClassNames = classNames(styles.loadingIcon, styles[size], styles[variant], className);
     return (_jsx("div", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, children: _jsx("div", {}) })));
 });

package/dist/{RenderByVisibility/RenderByVisibility.d.ts → RenderByScroll/RenderByScroll.d.ts}

@@ -1,6 +1,6 @@
 import React from "react";
 import { StackProps } from "..";
-export interface RenderByVisibilityProps extends StackProps {
+export interface RenderByScrollProps extends StackProps {
     scrollMarginTop?: number;
     extraRender?: number;
     jumpToIndex?: number;
@@ -8,4 +8,4 @@ export interface RenderByVisibilityProps extends StackProps {
     newChildRendered?: (index: number) => void;
     children?: React.ReactNode;
 }
-export declare const RenderByVisibility: React.ForwardRefExoticComponent<RenderByVisibilityProps & React.RefAttributes<HTMLDivElement>>;
+export declare const RenderByScroll: React.ForwardRefExoticComponent<RenderByScrollProps & React.RefAttributes<HTMLDivElement>>;

package/dist/{RenderByVisibility/RenderByVisibility.js → RenderByScroll/RenderByScroll.js}

@@ -14,8 +14,9 @@ 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 });
-export const RenderByVisibility = forwardRef(function RenderByVisibility(_a, ref) {
-    var { scrollMarginTop = 2, extraRender = 5, jumpToIndex = 0, stopNewRenders, newChildRendered, style, children } = _a, restProps = __rest(_a, ["scrollMarginTop", "extraRender", "jumpToIndex", "stopNewRenders", "newChildRendered", "style", "children"]);
+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"]);
     const childrenArray = React.Children.toArray(children);
     // Scroll Zone
     const childRefs = useRef({});
@@ -38,25 +39,28 @@ export const RenderByVisibility = forwardRef(function RenderByVisibility(_a, ref
     const overRenderedOnLowSide = visibled.lowest - rendered.lowest;
     const overRenderedOnHighSide = rendered.highest - visibled.highest;
     // Is Visible Loading Box
-    const [isVisibleLowSideLoadingBox, setIsVisibleLowSideLoadingBox] = useState(false);
+    const [isVisibleLowSideLimitBox, setIsVisibleLowSideLimitBox] = useState(false);
     // Render new Childs if needed
     useEffect(() => {
         if (!stopNewRenders) {
-            if (overRenderedOnHighSide <= overRenderedOnLowSide) {
+            if (overRenderedOnHighSide < 1 ||
+                overRenderedOnHighSide - 1 <= overRenderedOnLowSide) {
                 if (rendered.highest < data.length &&
                     overRenderedOnHighSide < extraRender) {
-                    setRendered(Object.assign(Object.assign({}, rendered), { highest: rendered.highest + 1 }));
-                    newChildRendered === null || newChildRendered === void 0 ? void 0 : newChildRendered(rendered.highest + 1);
+                    const newHigh = rendered.highest + 1;
+                    setRendered(Object.assign(Object.assign({}, rendered), { highest: newHigh }));
+                    newChildRendered === null || newChildRendered === void 0 ? void 0 : newChildRendered(newHigh);
                 }
             }
             else {
                 if (rendered.lowest > 0 &&
                     overRenderedOnLowSide < extraRender) {
-                    if (isVisibleLowSideLoadingBox) {
+                    if (isVisibleLowSideLimitBox) {
                         scrollTo(rendered.lowest);
                     }
-                    setRendered(Object.assign(Object.assign({}, rendered), { lowest: rendered.lowest - 1 }));
-                    newChildRendered === null || newChildRendered === void 0 ? void 0 : newChildRendered(rendered.lowest - 1);
+                    const newLow = rendered.lowest - 1;
+                    setRendered(Object.assign(Object.assign({}, rendered), { lowest: newLow }));
+                    newChildRendered === null || newChildRendered === void 0 ? void 0 : newChildRendered(newLow);
                 }
             }
         }
@@ -71,17 +75,18 @@ export const RenderByVisibility = forwardRef(function RenderByVisibility(_a, ref
         }
         const timeout = setTimeout(() => {
             scrollTo(jumpToIndex, true);
-        }, 300);
+        }, 100);
         return () => clearTimeout(timeout);
         // eslint-disable-next-line
     }, [jumpToIndex]);
-    // console.log("visibled", visibled);
-    // console.log("rendered", rendered);
-    // console.log("stopNewRenders", stopNewRenders);
     return (_jsxs(Stack, Object.assign({ ref: ref }, restProps, { style: Object.assign({ minHeight: "100vh" }, style), children: [rendered.lowest > 0 && (_jsx(WithInteractions, { style: {
+                    height: "1px",
+                    backgroundColor: "red",
                     marginBottom: `${scrollMarginTop}rem`,
-                }, onVisibilityChange: (v) => setIsVisibleLowSideLoadingBox(v) })), childrenArray.map((child, i) => i >= rendered.lowest &&
+                }, onVisibilityChange: (v) => setIsVisibleLowSideLimitBox(v) })), childrenArray.map((child, i) => i >= rendered.lowest &&
                 i <= rendered.highest && (_jsx(WithInteractions, { ref: (el) => {
                     childRefs.current[i] = el;
-                }, onVisible: () => handleOnVisible(i), style: { scrollMarginTop: `${scrollMarginTop}rem` }, children: child }, i)))] })));
+                }, onVisible: () => handleOnVisible(i), style: {
+                    scrollMarginTop: `${scrollMarginTop}rem`,
+                }, children: child }, i)))] })));
 });

package/dist/WithInteractions/WithInteractions.d.ts

@@ -18,6 +18,7 @@ export interface WithInteractionsProps extends StackProps {
     onVisibilityChange?: (visible: boolean) => void;
     onVisible?: () => void;
     onHidden?: () => void;
+    onMouseHoverChange?: (isHover: boolean, e: MouseEvent) => void;
     onMouseHoverStart?: (e: MouseEvent) => void;
     onMouseHoverLeave?: (e: MouseEvent) => void;
     children?: React.ReactNode;

package/dist/WithInteractions/WithInteractions.js

@@ -14,7 +14,7 @@ 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, onMouseHoverStart, onMouseHoverLeave } = _a, restProps = __rest(_a, ["children", "onRightClick", "onTap", "onDoubleTap", "onOutsideClick", "onSwipeLeft", "onSwipeRight", "onSwipeUp", "onSwipeDown", "onPinchIn", "onPinchOut", "onRotate", "onScrollStart", "onScrollStop", "onResize", "onVisibilityChange", "onVisible", "onHidden", "onMouseHoverStart", "onMouseHoverLeave"]);
+    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);
@@ -161,9 +161,16 @@ export const WithInteractions = forwardRef(function WithInteractions(_a, forward
         }
         // === On Hover Change ===
         const hasFinePointer = window.matchMedia("(pointer: fine)").matches;
-        if (hasFinePointer && (onMouseHoverStart || onMouseHoverLeave)) {
-            const mouseEnter = (e) => onMouseHoverStart === null || onMouseHoverStart === void 0 ? void 0 : onMouseHoverStart(e);
-            const mouseLeave = (e) => onMouseHoverLeave === null || onMouseHoverLeave === void 0 ? void 0 : onMouseHoverLeave(e);
+        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(() => {
@@ -211,6 +218,7 @@ export const WithInteractions = forwardRef(function WithInteractions(_a, forward
         onVisibilityChange,
         onVisible,
         onHidden,
+        onMouseHoverChange,
         onMouseHoverStart,
         onMouseHoverLeave,
     ]);

package/dist/WithOverlay/WithOverlay.d.ts

@@ -8,9 +8,7 @@ type AllowedOverlays = React.ReactElement<PopupProps, typeof Popup> | React.Reac
 export interface WithOverlayProps {
     trigger?: "onClick" | "onRightClick";
     overlay?: AllowedOverlays;
-    children?: React.ReactElement<{
-        onClick?: (e: React.MouseEvent<HTMLElement>) => void;
-    }>;
+    children?: React.ReactElement;
 }
 export declare function WithOverlay({ trigger, overlay, children, }: WithOverlayProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/WithOverlay/WithOverlay.js

@@ -2,38 +2,27 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, cloneElement, useEffect, useRef } from "react";
 import { WithInteractions, } from "..";
-import { mergeRefs } from "@yakad/lib";
 import { createPortal } from "react-dom";
 export function WithOverlay({ trigger = "onClick", overlay, children, }) {
-    var _a;
+    // Get Triggers ref and send to Overlay
     const triggerRef = useRef(null);
     const [showOverlay, setShowOverlay] = useState(false);
+    // Disable Body Scroll on showOverlay
     useEffect(() => {
         document.body.style.overflow = showOverlay ? "hidden" : "initial";
         return () => {
             document.body.style.overflow = "initial";
         };
     }, [showOverlay]);
-    return (_jsxs(_Fragment, { children: [_jsx(WithInteractions, { onRightClick: () => trigger === "onRightClick" && setShowOverlay(true), children: children &&
-                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                    cloneElement(children, {
-                        ref: mergeRefs(triggerRef, 
-                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                        (_a = children.props) === null || _a === void 0 ? void 0 : _a.ref),
-                        onClick: (e) => {
-                            var _a, _b;
-                            (_b = (_a = children.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, e);
-                            trigger === "onClick" && setShowOverlay(true);
-                        },
-                    }) }), showOverlay &&
-                overlay &&
-                createPortal(cloneElement(overlay, {
-                    triggerref: triggerRef,
-                    onClose: () => {
-                        var _a, _b;
-                        (_b = (_a = overlay.props).onClose) === null || _b === void 0 ? void 0 : _b.call(_a);
-                        setShowOverlay(false);
-                    },
-                }), document.getElementsByClassName("portalRoot")[0] ||
-                    document.body)] }));
+    // Teleport Overlay to portalRoot or body
+    const teleport = overlay &&
+        createPortal(cloneElement(overlay, {
+            triggerref: triggerRef,
+            onClose: () => {
+                var _a, _b;
+                (_b = (_a = overlay.props).onClose) === null || _b === void 0 ? void 0 : _b.call(_a);
+                setShowOverlay(false);
+            },
+        }), document.getElementsByClassName("portalRoot")[0] || document.body);
+    return (_jsxs(_Fragment, { children: [_jsx(WithInteractions, { ref: triggerRef, onRightClick: () => trigger === "onRightClick" && setShowOverlay(true), onClick: () => trigger === "onClick" && setShowOverlay(true), children: children }), showOverlay && teleport] }));
 }

package/dist/index.d.ts

@@ -30,7 +30,7 @@ export * from "./CodeBox/CodeBox";
 export * from "./Display/Display";
 export * from "./WithOverlay/WithOverlay";
 export * from "./WithInteractions/WithInteractions";
-export * from "./RenderByVisibility/RenderByVisibility";
+export * from "./RenderByScroll/RenderByScroll";
 export * from "./ActiveOnVisible/ActiveOnVisible";
 export * from "./Dropdown/Dropdown";
 export * from "./Popup/Popup";

package/dist/index.js

@@ -35,7 +35,7 @@ export * from "./CodeBox/CodeBox";
 export * from "./Display/Display"; // Stack Based
 export * from "./WithOverlay/WithOverlay";
 export * from "./WithInteractions/WithInteractions"; // Stack Based
-export * from "./RenderByVisibility/RenderByVisibility"; // Stack Based
+export * from "./RenderByScroll/RenderByScroll"; // Stack Based
 export * from "./ActiveOnVisible/ActiveOnVisible"; // Stack Based
 // Overlays
 export * from "./Dropdown/Dropdown"; // Card Based

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@yakad/ui",
-    "version": "1.3.140",
+    "version": "1.3.142",
     "private": false,
     "author": "Natiq",
     "description": "UI components for NextJS/React",
@@ -36,8 +36,8 @@
         "classnames": "2.5.1"
     },
     "peerDependencies": {
-        "react": "^18.0.0 || ^19.0.0",
-        "react-dom": "^18.0.0 || ^19.0.0"
+        "react": "^19.2.0",
+        "react-dom": "^19.2.0"
     },
     "devDependencies": {
         "@types/css-modules": "1.0.5",