@yakad/ui 1.3.132 → 1.3.133

package/dist/LoadingControl/LoadingControl.js

@@ -10,7 +10,7 @@ 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";
@@ -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/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/package.json

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