@yakad/ui 1.3.139 → 1.3.140

package/dist/ActiveOnVisible/ActiveOnVisible.d.ts

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

package/dist/ActiveOnVisible/ActiveOnVisible.js

@@ -0,0 +1,20 @@
+"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 { Activity, forwardRef, 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 }) })));
+});

package/dist/RenderByVisibility/RenderByVisibility.d.ts

@@ -1,5 +1,7 @@
 import React from "react";
-export interface RenderByVisibilityProps {
+import { StackProps } from "..";
+export interface RenderByVisibilityProps extends StackProps {
+    scrollMarginTop?: number;
     extraRender?: number;
     jumpToIndex?: number;
     stopNewRenders?: boolean;

package/dist/RenderByVisibility/RenderByVisibility.js

@@ -12,19 +12,20 @@ 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 { Card, LoadingIcon, Stack, WithInteractions } from "..";
+import { Stack, WithInteractions } from "..";
 const data = Array.from({ length: 78 });
 export const RenderByVisibility = forwardRef(function RenderByVisibility(_a, ref) {
-    var { extraRender = 5, jumpToIndex = 0, stopNewRenders, newChildRendered, children } = _a, restProps = __rest(_a, ["extraRender", "jumpToIndex", "stopNewRenders", "newChildRendered", "children"]);
+    var { scrollMarginTop = 2, 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({});
-    const scrollTo = (i) => {
+    const scrollTo = (i, smooth) => {
         var _a;
         return (_a = childRefs.current[i]) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
-            behavior: "smooth",
+            behavior: smooth ? "smooth" : "auto",
         });
     };
-    const childrenArray = React.Children.toArray(children);
-    // Collect Visibility Status
+    // Collect Visibled Childs
     const [visibled, setVisibled] = useState({ lowest: jumpToIndex, highest: jumpToIndex });
     const handleOnVisible = (i) => {
         if (i < visibled.lowest)
@@ -32,11 +33,12 @@ export const RenderByVisibility = forwardRef(function RenderByVisibility(_a, ref
         if (i > visibled.highest)
             setVisibled(Object.assign(Object.assign({}, visibled), { highest: i }));
     };
-    // Collect Rendered Childs Status
+    // Collect Rendered Childs
     const [rendered, setRendered] = useState({ lowest: jumpToIndex, highest: jumpToIndex });
-    // Calculate Over Screen Renders
     const overRenderedOnLowSide = visibled.lowest - rendered.lowest;
     const overRenderedOnHighSide = rendered.highest - visibled.highest;
+    // Is Visible Loading Box
+    const [isVisibleLowSideLoadingBox, setIsVisibleLowSideLoadingBox] = useState(false);
     // Render new Childs if needed
     useEffect(() => {
         if (!stopNewRenders) {
@@ -50,26 +52,36 @@ export const RenderByVisibility = forwardRef(function RenderByVisibility(_a, ref
             else {
                 if (rendered.lowest > 0 &&
                     overRenderedOnLowSide < extraRender) {
+                    if (isVisibleLowSideLoadingBox) {
+                        scrollTo(rendered.lowest);
+                    }
                     setRendered(Object.assign(Object.assign({}, rendered), { lowest: rendered.lowest - 1 }));
                     newChildRendered === null || newChildRendered === void 0 ? void 0 : newChildRendered(rendered.lowest - 1);
-                    if (overRenderedOnLowSide === 0)
-                        scrollTo(visibled.lowest);
                 }
             }
         }
-    }, [visibled, rendered, stopNewRenders]);
+        // eslint-disable-next-line
+    }, [visibled, rendered, extraRender, stopNewRenders]);
     // Scroll to jumpToIndex
     useEffect(() => {
-        var _a;
-        (_a = childRefs.current[jumpToIndex]) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ behavior: "smooth" });
-        console.log("SCROLL TO JUMPToIndex:", jumpToIndex);
+        const isJumpToIndexOutOfRenderedRange = jumpToIndex < rendered.lowest || jumpToIndex > rendered.highest;
+        if (isJumpToIndexOutOfRenderedRange) {
+            setVisibled({ lowest: jumpToIndex, highest: jumpToIndex });
+            setRendered({ lowest: jumpToIndex, highest: jumpToIndex });
+        }
+        const timeout = setTimeout(() => {
+            scrollTo(jumpToIndex, true);
+        }, 300);
+        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: { minHeight: "100vh" }, children: [rendered.lowest > 0 && _jsx(LoadingBox, {}), childrenArray.map((child, i) => i >= rendered.lowest &&
+    return (_jsxs(Stack, Object.assign({ ref: ref }, restProps, { style: Object.assign({ minHeight: "100vh" }, style), children: [rendered.lowest > 0 && (_jsx(WithInteractions, { style: {
+                    marginBottom: `${scrollMarginTop}rem`,
+                }, onVisibilityChange: (v) => setIsVisibleLowSideLoadingBox(v) })), childrenArray.map((child, i) => i >= rendered.lowest &&
                 i <= rendered.highest && (_jsx(WithInteractions, { ref: (el) => {
                     childRefs.current[i] = el;
-                }, onVisible: () => handleOnVisible(i), children: child }, i))), rendered.highest < data.length && _jsx(LoadingBox, {})] })));
+                }, onVisible: () => handleOnVisible(i), style: { scrollMarginTop: `${scrollMarginTop}rem` }, children: child }, i)))] })));
 });
-const LoadingBox = () => (_jsx(Card, { style: { height: "15rem" }, children: _jsx(LoadingIcon, { variant: "dots", size: "extraLarge" }) }));

package/dist/Stack/Stack.d.ts

@@ -1,7 +1,6 @@
 /// <reference types="react" />
 export interface StackProps extends React.HTMLAttributes<HTMLDivElement> {
     align?: "start" | "space" | "center" | "end";
-    fullWidth?: boolean;
     children?: React.ReactNode;
 }
 export declare const Stack: import("react").ForwardRefExoticComponent<StackProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/Stack/Stack.js

@@ -15,7 +15,7 @@ import classNames from "classnames";
 import boxingStyles from "../boxing.module.css";
 import styles from "./Stack.module.css";
 export const Stack = forwardRef(function Stack(_a, ref) {
-    var { align, fullWidth = true, className, children } = _a, restProps = __rest(_a, ["align", "fullWidth", "className", "children"]);
-    const joinedClassNames = classNames(boxingStyles.flexColumnBox, { [boxingStyles[align]]: align }, { fullWidth: fullWidth }, styles.stack, className);
+    var { align, className, children } = _a, restProps = __rest(_a, ["align", "className", "children"]);
+    const joinedClassNames = classNames(boxingStyles.flexColumnBox, { [boxingStyles[align]]: align }, { fullWidthLover: true }, styles.stack, className);
     return (_jsx("div", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, children: children })));
 });

package/dist/WithInteractions/WithInteractions.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
-export interface WithInteractionsProps {
+import { StackProps } from "../Stack/Stack";
+export interface WithInteractionsProps extends StackProps {
     onRightClick?: (e: MouseEvent) => void;
     onTap?: (e: TouchEvent) => void;
     onDoubleTap?: (e: TouchEvent) => void;

package/dist/WithInteractions/WithInteractions.js

@@ -11,10 +11,9 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { mergeRefs } from "@yakad/lib";
-import { cloneElement, forwardRef, isValidElement, useEffect, useImperativeHandle, useRef, } from "react";
+import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";
+import { Stack } from "../Stack/Stack";
 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, 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
@@ -215,11 +214,5 @@ export const WithInteractions = forwardRef(function WithInteractions(_a, forward
         onMouseHoverStart,
         onMouseHoverLeave,
     ]);
-    if (!isValidElement(children))
-        return null;
-    return _jsx("div", { ref: localRef, children: children });
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    return cloneElement(children, Object.assign(Object.assign({}, restProps), { ref: mergeRefs(localRef, forwardedRef, 
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        (_b = children.props) === null || _b === void 0 ? void 0 : _b.ref) }));
+    return (_jsx(Stack, Object.assign({ ref: localRef }, restProps, { children: children })));
 });

package/dist/index.d.ts

@@ -4,8 +4,8 @@ export * from "./Main/Main";
 export * from "./Footer/Footer";
 export * from "./Navigation/Navigation";
 export * from "./Container/Container";
-export * from "./Stack/Stack";
 export * from "./Row/Row";
+export * from "./Stack/Stack";
 export * from "./GridContainer/GridContainer";
 export * from "./GridItem/GridItem";
 export * from "./Card/Card";
@@ -28,10 +28,9 @@ export * from "./RadioGroup/RadioGroup";
 export * from "./RadioButton/RadioButton";
 export * from "./CodeBox/CodeBox";
 export * from "./Display/Display";
-export * from "./WithInteractions/WithInteractions";
 export * from "./WithOverlay/WithOverlay";
+export * from "./WithInteractions/WithInteractions";
+export * from "./RenderByVisibility/RenderByVisibility";
+export * from "./ActiveOnVisible/ActiveOnVisible";
 export * from "./Dropdown/Dropdown";
 export * from "./Popup/Popup";
-export * from "./RenderByVisibility/RenderByVisibility";
-export * from "./DisplayOnVisible/DisplayOnVisible";
-export * from "./RenderOnVisible/RenderOnVisible";

package/dist/index.js

@@ -1,17 +1,17 @@
 // Layout & Structure
-export * from "./Screen/Screen";
+export * from "./Screen/Screen"; // Stack Based
 export * from "./AppBar/AppBar";
 export * from "./Main/Main";
 export * from "./Footer/Footer";
 export * from "./Navigation/Navigation";
-export * from "./Container/Container";
-export * from "./Stack/Stack";
+export * from "./Container/Container"; // Stack Based
 export * from "./Row/Row";
+export * from "./Stack/Stack";
 export * from "./GridContainer/GridContainer";
 export * from "./GridItem/GridItem";
-export * from "./Card/Card";
+export * from "./Card/Card"; // Stack Based
 // Theme & Styling
-export * from "./Theme/Theme";
+export * from "./Theme/Theme"; // Stack Based
 export * from "./Spacer/Spacer";
 export * from "./Hr/Hr";
 // UI Components
@@ -32,13 +32,11 @@ export * from "./RadioGroup/RadioGroup";
 export * from "./RadioButton/RadioButton";
 export * from "./CodeBox/CodeBox";
 // Utilities
-export * from "./Display/Display";
-export * from "./WithInteractions/WithInteractions";
+export * from "./Display/Display"; // Stack Based
 export * from "./WithOverlay/WithOverlay";
+export * from "./WithInteractions/WithInteractions"; // Stack Based
+export * from "./RenderByVisibility/RenderByVisibility"; // Stack Based
+export * from "./ActiveOnVisible/ActiveOnVisible"; // Stack Based
 // Overlays
-export * from "./Dropdown/Dropdown";
-export * from "./Popup/Popup";
-// Loading Control
-export * from "./RenderByVisibility/RenderByVisibility";
-export * from "./DisplayOnVisible/DisplayOnVisible";
-export * from "./RenderOnVisible/RenderOnVisible";
+export * from "./Dropdown/Dropdown"; // Card Based
+export * from "./Popup/Popup"; // Card Based

package/package.json

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

package/dist/DisplayOnVisible/DisplayOnVisible.d.ts

@@ -1,10 +0,0 @@
-/// <reference types="react" />
-export interface DisplayOnVisibleProps extends React.HTMLAttributes<HTMLDivElement> {
-    align?: "start" | "space" | "center" | "end";
-    fullWidth?: boolean;
-    onVisibilityChange?: (visible: boolean) => void;
-    onVisible?: () => void;
-    onHidden?: () => void;
-    children?: React.ReactNode;
-}
-export declare const DisplayOnVisible: import("react").ForwardRefExoticComponent<DisplayOnVisibleProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/DisplayOnVisible/DisplayOnVisible.js

@@ -1,41 +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, useImperativeHandle, useRef, useState } from "react";
-import classNames from "classnames";
-import boxingStyles from "../boxing.module.css";
-import { WithInteractions } from "..";
-import styles from "./DisplayOnVisible.module.css";
-export const DisplayOnVisible = forwardRef(function DisplayOnVisible(_a, forwardedRef) {
-    var { align, fullWidth = true, onVisibilityChange, onVisible, onHidden, className, style, children } = _a, restProps = __rest(_a, ["align", "fullWidth", "onVisibilityChange", "onVisible", "onHidden", "className", "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);
-        onVisibilityChange === null || onVisibilityChange === void 0 ? void 0 : onVisibilityChange(true);
-        onVisible === null || onVisible === void 0 ? void 0 : onVisible();
-    };
-    const handleOnHidden = () => {
-        if (localRef.current) {
-            const boxRect = localRef.current.getBoundingClientRect();
-            setBoxHeight(boxRect.height);
-        }
-        onVisibilityChange === null || onVisibilityChange === void 0 ? void 0 : onVisibilityChange(false);
-        onHidden === null || onHidden === void 0 ? void 0 : onHidden();
-    };
-    const joinedClassNames = classNames(boxingStyles.flexColumnBox, { [boxingStyles[align]]: align }, { fullWidth: fullWidth }, { [styles.notVisible]: !isVisible }, className);
-    return (_jsx(WithInteractions, { onVisible: handleOnVisible, onHidden: handleOnHidden, children: _jsx("div", Object.assign({ ref: localRef }, restProps, { className: joinedClassNames, style: Object.assign({ height: boxHeight || "auto" }, style), children: children })) }));
-});

package/dist/DisplayOnVisible/DisplayOnVisible.module.css

@@ -1,3 +0,0 @@
-.notVisible > * {
-    display: none;
-}

package/dist/RenderOnVisible/RenderOnVisible.d.ts

@@ -1,10 +0,0 @@
-/// <reference types="react" />
-export interface RenderOnVisibleProps extends React.HTMLAttributes<HTMLDivElement> {
-    align?: "start" | "space" | "center" | "end";
-    fullWidth?: boolean;
-    onVisibilityChange?: (visible: boolean) => void;
-    onVisible?: () => void;
-    onHidden?: () => void;
-    children?: React.ReactNode;
-}
-export declare const RenderOnVisible: import("react").ForwardRefExoticComponent<RenderOnVisibleProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/RenderOnVisible/RenderOnVisible.js

@@ -1,40 +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, useImperativeHandle, useRef, useState } from "react";
-import classNames from "classnames";
-import boxingStyles from "../boxing.module.css";
-import { WithInteractions } from "..";
-export const RenderOnVisible = forwardRef(function RenderOnVisible(_a, forwardedRef) {
-    var { align, fullWidth = true, onVisibilityChange, onVisible, onHidden, className, style, children } = _a, restProps = __rest(_a, ["align", "fullWidth", "onVisibilityChange", "onVisible", "onHidden", "className", "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);
-        onVisibilityChange === null || onVisibilityChange === void 0 ? void 0 : onVisibilityChange(true);
-        onVisible === null || onVisible === void 0 ? void 0 : onVisible();
-    };
-    const handleOnHidden = () => {
-        if (localRef.current) {
-            const boxRect = localRef.current.getBoundingClientRect();
-            setBoxHeight(boxRect.height);
-        }
-        onVisibilityChange === null || onVisibilityChange === void 0 ? void 0 : onVisibilityChange(false);
-        onHidden === null || onHidden === void 0 ? void 0 : onHidden();
-    };
-    const joinedClassNames = classNames(boxingStyles.flexColumnBox, { [boxingStyles[align]]: align }, { fullWidth: fullWidth }, className);
-    return (_jsx(WithInteractions, { onVisible: handleOnVisible, onHidden: handleOnHidden, children: _jsx("div", Object.assign({ ref: localRef }, restProps, { className: joinedClassNames, style: Object.assign({ height: boxHeight || "auto" }, style), children: isVisible && children })) }));
-});