@yakad/ui 1.3.132 → 1.3.134

package/dist/LoadingControl/LoadingControl.d.ts

@@ -1,12 +1,12 @@
 import React from "react";
-type LoadingControlV2Children = React.ReactElement<{
+type LoadingControlChildren = React.ReactElement<{
     index?: number;
 }>;
-export interface LoadingControlV2Props extends React.HTMLAttributes<HTMLDivElement> {
+export interface LoadingControlProps extends React.HTMLAttributes<HTMLDivElement> {
     align?: "start" | "space" | "center" | "end";
     fullWidth?: boolean;
     loadingLimit?: number;
-    children: LoadingControlV2Children;
+    children: LoadingControlChildren;
 }
-export declare const LoadingControlV2: React.ForwardRefExoticComponent<LoadingControlV2Props & React.RefAttributes<HTMLDivElement>>;
+export declare const LoadingControl: React.ForwardRefExoticComponent<LoadingControlProps & React.RefAttributes<HTMLDivElement>>;
 export {};

package/dist/LoadingControl/LoadingControl.js

@@ -10,12 +10,12 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import React, { forwardRef, useEffect, useState } from "react";
 import classNames from "classnames";
 import boxingStyles from "../boxing.module.css";
 import { DisplayOnVisible } from "..";
-export const LoadingControlV2 = forwardRef(function LoadingControlV2(_a, ref) {
+export const LoadingControl = forwardRef(function LoadingControl(_a, ref) {
     var { align, fullWidth = true, loadingLimit = 200, className, children } = _a, restProps = __rest(_a, ["align", "fullWidth", "loadingLimit", "className", "children"]);
     const [maxTotalVisibledItems, setMaxTotalVisibledItems] = useState(3); // Min: default
     const extraLoading = maxTotalVisibledItems * 2;
@@ -27,8 +27,9 @@ export const LoadingControlV2 = forwardRef(function LoadingControlV2(_a, ref) {
     ]);
     const [visibilityStatus, setVisibilityStatus] = useState({});
     const handleOnVisibilityChange = (visible, i) => {
-        if (i !== undefined && visibilityStatus[i] !== visible)
-            setVisibilityStatus((prev) => (Object.assign(Object.assign({}, prev), { [i]: visible })));
+        if (i !== undefined)
+            if (visibilityStatus[i] !== visible)
+                setVisibilityStatus((prev) => (Object.assign(Object.assign({}, prev), { [i]: visible })));
     };
     const visibleIndexes = Object.entries(visibilityStatus)
         // eslint-disable-next-line
@@ -79,7 +80,7 @@ export const LoadingControlV2 = forwardRef(function LoadingControlV2(_a, ref) {
         }
         // eslint-disable-next-line
     }, [visibilityStatus]);
-    console.log("###### ", "Total Loaded:", loadedItems.length, "visibleCount:", visibleCount, "extraLoading:", extraLoading, " ##### ", "L:", lowestLoadedItemIndex, "V:", lowestVisibleItemIndex, "D:", -(lowestLoadedItemIndex - lowestVisibleItemIndex), "|", "D:", highestLoadedItemIndex - highestVisibleItemIndex, "V:", highestVisibleItemIndex, "L:", highestLoadedItemIndex);
+    console.log("###### ", "Total Loaded:", loadedItems.length, "extraLoading:", extraLoading, " ##### ", "L:", lowestLoadedItemIndex, "V:", lowestVisibleItemIndex, "D:", -(lowestLoadedItemIndex - lowestVisibleItemIndex), "|", "V:", visibleCount, "|", "D:", highestLoadedItemIndex - highestVisibleItemIndex, "V:", highestVisibleItemIndex, "L:", highestLoadedItemIndex);
     // console.log("visibilityStatus", visibilityStatus);
     // console.log(
     //     "loadedItems",
@@ -90,5 +91,5 @@ export const LoadingControlV2 = forwardRef(function LoadingControlV2(_a, ref) {
     //     Object.keys(visibilityStatus).length
     // );
     const joinedClassNames = classNames(boxingStyles.flexColumnBox, { [boxingStyles[align]]: align }, { fullWidth: fullWidth }, className);
-    return (_jsx("div", Object.assign({ ref: ref, className: joinedClassNames }, restProps, { children: loadedItems.map((item) => (_jsxs(DisplayOnVisible, { onVisibilityChange: (visible) => handleOnVisibilityChange(visible, item.props.index), children: [_jsx("h1", { children: item.props.index }), item] }, item.props.index))) })));
+    return (_jsx("div", Object.assign({ ref: ref, className: joinedClassNames }, restProps, { children: loadedItems.map((item) => (_jsx(DisplayOnVisible, { onVisibilityChange: (visible) => handleOnVisibilityChange(visible, item.props.index), children: item }, item.props.index))) })));
 });

package/dist/LoadingControlV3/LoadingControlV3.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+type LoadingControlV3Children = React.ReactElement<{
+    index?: number;
+}>;
+export interface LoadingControlV3Props extends React.HTMLAttributes<HTMLDivElement> {
+    align?: "start" | "space" | "center" | "end";
+    fullWidth?: boolean;
+    loadingLimit?: number;
+    children: LoadingControlV3Children;
+}
+export declare const LoadingControlV3: React.ForwardRefExoticComponent<LoadingControlV3Props & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/LoadingControlV3/LoadingControlV3.js

@@ -0,0 +1,94 @@
+"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 React, { forwardRef, useEffect, useState } from "react";
+import classNames from "classnames";
+import boxingStyles from "../boxing.module.css";
+import { DisplayOnVisible } from "..";
+export const LoadingControlV3 = forwardRef(function LoadingControlV3(_a, ref) {
+    var { align, fullWidth = true, loadingLimit = 200, className, children } = _a, restProps = __rest(_a, ["align", "fullWidth", "loadingLimit", "className", "children"]);
+    const [maxTotalVisibledItems, setMaxTotalVisibledItems] = useState(3); // Min: default
+    const extraLoading = maxTotalVisibledItems * 2;
+    const [loadedItems, setLoadedItems] = useState({
+        0: React.cloneElement(children, {
+            index: 0,
+        }),
+    });
+    const [visibilityStatus, setVisibilityStatus] = useState({});
+    const handleOnVisibilityChange = (visible, i) => {
+        if (i !== undefined)
+            if (visibilityStatus[i] !== visible)
+                setVisibilityStatus((prev) => (Object.assign(Object.assign({}, prev), { [i]: visible })));
+    };
+    const visibleIndexes = Object.entries(visibilityStatus)
+        // eslint-disable-next-line
+        .filter(([_, isVisible]) => isVisible)
+        .map(([index]) => parseInt(index));
+    const visibleCount = Object.values(visibilityStatus).filter(Boolean).length;
+    const lowestVisibleItemIndex = visibleIndexes.length
+        ? Math.min(...visibleIndexes)
+        : 0;
+    const highestVisibleItemIndex = visibleIndexes.length
+        ? Math.max(...visibleIndexes)
+        : 0;
+    const loadedItemsLength = Object.values(loadedItems).length;
+    const lowestLoadedItemIndex = Number(Object.keys(loadedItems)[0]);
+    const highestLoadedItemIndex = Number(Object.keys(loadedItems)[loadedItemsLength - 1]);
+    useEffect(() => {
+        if (highestLoadedItemIndex < loadingLimit &&
+            highestLoadedItemIndex - highestVisibleItemIndex < extraLoading) {
+            setLoadedItems(Object.assign(Object.assign({}, loadedItems), { [highestLoadedItemIndex + 1]: React.cloneElement(children, {
+                    index: highestLoadedItemIndex + 1,
+                }) }));
+            console.log(">>>>>>>>>>>>>>>>>>>>>>>> ++++ Item ", highestLoadedItemIndex + 1, " Added to end");
+        }
+        if (lowestLoadedItemIndex > 0 &&
+            lowestVisibleItemIndex - lowestLoadedItemIndex < extraLoading) {
+            setLoadedItems(Object.assign({ [lowestLoadedItemIndex - 1]: React.cloneElement(children, {
+                    index: lowestLoadedItemIndex - 1,
+                }) }, loadedItems));
+            console.log(">>>>>>>>>>>> ---- Item ", lowestLoadedItemIndex - 1, " Added to start");
+        }
+        if (visibleCount > maxTotalVisibledItems) {
+            setMaxTotalVisibledItems(visibleCount);
+        }
+        // eslint-disable-next-line
+    }, [visibilityStatus]);
+    useEffect(() => {
+        const loadLimit = extraLoading + 2;
+        if (lowestVisibleItemIndex - lowestLoadedItemIndex > loadLimit) {
+            setLoadedItems(removeFromStart(loadedItems, lowestVisibleItemIndex - loadLimit));
+            console.log("$$$$$$$$$$$ Sliced $$$$$$$$$$$$$$$$$$$$$ from start smaller than:", lowestVisibleItemIndex - loadLimit);
+        }
+        if (highestLoadedItemIndex - highestVisibleItemIndex > loadLimit) {
+            setLoadedItems(removeFromEnd(loadedItems, highestVisibleItemIndex + loadLimit));
+            console.log("$$$$$$$$$$$ Sliced $$$$$$$$$$$$$$$$$$$$$ from end bigger than:", highestVisibleItemIndex + loadLimit);
+        }
+        // eslint-disable-next-line
+    }, [loadedItems, visibilityStatus]);
+    console.log("###### ", "Total Loaded:", loadedItemsLength, "extraLoading:", extraLoading, " ##### ", "L:", lowestLoadedItemIndex, "V:", lowestVisibleItemIndex, "D:", -(lowestLoadedItemIndex - lowestVisibleItemIndex), "|", "TV:", visibleCount, "|", "D:", highestLoadedItemIndex - highestVisibleItemIndex, "V:", highestVisibleItemIndex, "L:", highestLoadedItemIndex);
+    // console.log("visibilityStatus", visibilityStatus);
+    // console.log("loadedItems", loadedItems);
+    // console.log(
+    //     "visibilityStatus.length",
+    //     Object.keys(visibilityStatus).length
+    // );
+    const joinedClassNames = classNames(boxingStyles.flexColumnBox, { [boxingStyles[align]]: align }, { fullWidth: fullWidth }, className);
+    return (_jsx("div", Object.assign({ ref: ref, className: joinedClassNames }, restProps, { children: Object.entries(loadedItems).map(([key, value]) => (_jsx(DisplayOnVisible, { onVisibilityChange: (visible) => handleOnVisibilityChange(visible, Number(key)), children: value }, key))) })));
+});
+function removeFromStart(obj, start) {
+    return Object.fromEntries(Object.entries(obj).filter(([key]) => Number(key) >= start));
+}
+function removeFromEnd(obj, end) {
+    return Object.fromEntries(Object.entries(obj).filter(([key]) => Number(key) <= end));
+}

package/dist/WithInteractions/WithInteractions.d.ts

@@ -14,6 +14,7 @@ export interface WithInteractionsProps {
     onScrollStart?: () => void;
     onScrollStop?: () => void;
     onResize?: (entry: ResizeObserverEntry) => void;
+    onVisibilityChange?: (visible: boolean) => void;
     onVisible?: () => void;
     onHidden?: () => void;
     onMouseHoverStart?: (e: MouseEvent) => void;

package/dist/WithInteractions/WithInteractions.js

@@ -14,7 +14,7 @@ import { mergeRefs } from "@yakad/lib";
 import { cloneElement, forwardRef, isValidElement, useEffect, useImperativeHandle, useRef, } from "react";
 export const WithInteractions = forwardRef(function WithInteractions(_a, forwardedRef) {
     var _b;
-    var { children, onRightClick, onTap, onDoubleTap, onOutsideClick, onSwipeLeft, onSwipeRight, onSwipeUp, onSwipeDown, onPinchIn, onPinchOut, onRotate, onScrollStart, onScrollStop, onResize, onVisible, onHidden, onMouseHoverStart, onMouseHoverLeave } = _a, restProps = __rest(_a, ["children", "onRightClick", "onTap", "onDoubleTap", "onOutsideClick", "onSwipeLeft", "onSwipeRight", "onSwipeUp", "onSwipeDown", "onPinchIn", "onPinchOut", "onRotate", "onScrollStart", "onScrollStop", "onResize", "onVisible", "onHidden", "onMouseHoverStart", "onMouseHoverLeave"]);
+    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"]);
     const localRef = useRef(null);
     // Let the parent access our DOM node
     useImperativeHandle(forwardedRef, () => localRef.current);
@@ -151,9 +151,10 @@ export const WithInteractions = forwardRef(function WithInteractions(_a, forward
         }
         // === VISIBILITY OBSERVER ===
         let intersectionObserver = null;
-        if (onVisible || onHidden) {
+        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());
@@ -207,6 +208,7 @@ export const WithInteractions = forwardRef(function WithInteractions(_a, forward
         onScrollStart,
         onScrollStop,
         onResize,
+        onVisibilityChange,
         onVisible,
         onHidden,
         onMouseHoverStart,

package/dist/WithOverlay/WithOverlay.js

@@ -3,6 +3,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 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;
     const triggerRef = useRef(null);
@@ -26,12 +27,12 @@ export function WithOverlay({ trigger = "onClick", overlay, children, }) {
                         },
                     }) }), showOverlay &&
                 overlay &&
-                cloneElement(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.body)] }));
 }

package/dist/index.d.ts

@@ -33,5 +33,6 @@ export * from "./WithOverlay/WithOverlay";
 export * from "./Dropdown/Dropdown";
 export * from "./Popup/Popup";
 export * from "./LoadingControl/LoadingControl";
+export * from "./LoadingControlV3/LoadingControlV3";
 export * from "./DisplayOnVisible/DisplayOnVisible";
 export * from "./RenderOnVisible/RenderOnVisible";

package/dist/index.js

@@ -40,5 +40,6 @@ export * from "./Dropdown/Dropdown";
 export * from "./Popup/Popup";
 // Loading Control
 export * from "./LoadingControl/LoadingControl";
+export * from "./LoadingControlV3/LoadingControlV3";
 export * from "./DisplayOnVisible/DisplayOnVisible";
 export * from "./RenderOnVisible/RenderOnVisible";

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@yakad/ui",
-    "version": "1.3.132",
+    "version": "1.3.134",
     "private": false,
     "author": "Natiq",
     "description": "UI components for NextJS/React",