@yakad/ui 1.3.130 → 1.3.132

package/dist/Button/Button.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    fullWidth?: boolean;
     size?: "small" | "medium" | "large";
     variant?: "text" | "outlined" | "filled" | "filledtonal" | "tonal" | "elevated" | "link" | "fab";
     borderStyle?: "none" | "semi" | "squircle" | "rounded";

package/dist/Button/Button.js

@@ -15,10 +15,10 @@ import classNames from "classnames";
 import { LoadingIcon } from "..";
 import styles from "./Button.module.css";
 export const Button = forwardRef(function Button(_a, ref) {
-    var { size = "medium", variant = "text", borderStyle = "rounded", icon, iconPosition = "start", loadingPosition = "auto", loadingVariant, className, children } = _a, restProps = __rest(_a, ["size", "variant", "borderStyle", "icon", "iconPosition", "loadingPosition", "loadingVariant", "className", "children"]);
+    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 joinedClassNames = classNames(styles.button, styles[variant], { [styles.loading]: loadingVariant }, { [styles.loadingPositionCenter]: isloadingPositionCenter }, styles[size], styles[borderStyle], { [styles.iconButton]: !children && icon }, className);
+    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,
                 }), children: _jsx(LoadingIcon, { size: size, variant: loadingVariant }) })), icon, !childrenFirst && children] })));

package/dist/DisplayOnVisible/DisplayOnVisible.d.ts

@@ -2,6 +2,7 @@
 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;

package/dist/DisplayOnVisible/DisplayOnVisible.js

@@ -17,7 +17,7 @@ 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, onVisible, onHidden, className, style, children } = _a, restProps = __rest(_a, ["align", "fullWidth", "onVisible", "onHidden", "className", "style", "children"]);
+    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);
@@ -25,6 +25,7 @@ export const DisplayOnVisible = forwardRef(function DisplayOnVisible(_a, forward
     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 = () => {
@@ -32,6 +33,7 @@ export const DisplayOnVisible = forwardRef(function DisplayOnVisible(_a, forward
             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);

package/dist/Dropdown/Dropdown.js

@@ -16,10 +16,10 @@ import classNames from "classnames";
 import { Card, WithInteractions } from "..";
 import styles from "./Dropdown.module.css";
 export const Dropdown = forwardRef(function Dropdown(_a, forwardedRef) {
-    var { fullWidth = false, blur, level = "high", triggerRef, onClose, className, style, children } = _a, restProps = __rest(_a, ["fullWidth", "blur", "level", "triggerRef", "onClose", "className", "style", "children"]);
+    var { fullWidth = false, blur, level = "high", triggerref, onClose, className, style, children } = _a, restProps = __rest(_a, ["fullWidth", "blur", "level", "triggerref", "onClose", "className", "style", "children"]);
     const fallbackTriggerRef = useRef(null);
     const dropdownRef = useRef(null);
-    const placementTargetRef = triggerRef || fallbackTriggerRef;
+    const placementTargetRef = triggerref || fallbackTriggerRef;
     // Let the parent access our DOM node
     useImperativeHandle(forwardedRef, () => dropdownRef.current);
     const [arrowPosition, setArrowPosition] = useState({
@@ -71,7 +71,7 @@ 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, fullWidth: fullWidth, 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, {
+    return (_jsxs(_Fragment, { children: [!triggerref && _jsx("div", { ref: fallbackTriggerRef }), _jsx(WithInteractions, { onOutsideClick: onClose, children: _jsx(Card, Object.assign({ ref: dropdownRef, fullWidth: fullWidth, 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/LoadingControl/LoadingControl.d.ts

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

package/dist/LoadingControl/LoadingControl.js

@@ -15,38 +15,80 @@ import React, { forwardRef, useEffect, useState } from "react";
 import classNames from "classnames";
 import boxingStyles from "../boxing.module.css";
 import { DisplayOnVisible } from "..";
-export const LoadingControl = forwardRef(function LoadingControl(_a, ref) {
-    var { align, fullWidth = true, loadingLimit = 20, className, children } = _a, restProps = __rest(_a, ["align", "fullWidth", "loadingLimit", "className", "children"]);
-    const [maxLoadedItem, setMaxLoadedItem] = useState(0);
-    const [maxVisibledItem, setMaxVisibledItem] = useState(0);
+export const LoadingControlV2 = forwardRef(function LoadingControlV2(_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;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const [loadedItems, setLoadedItems] = useState([
         React.cloneElement(children, {
             index: 0,
         }),
     ]);
-    const handleOnVisible = (i) => {
-        if (i && maxVisibledItem < i)
-            setMaxVisibledItem(i);
+    const [visibilityStatus, setVisibilityStatus] = useState({});
+    const handleOnVisibilityChange = (visible, i) => {
+        if (i !== undefined && 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 lowestLoadedItemIndex = loadedItems[0].props.index;
+    const highestLoadedItemIndex = loadedItems[loadedItems.length - 1].props.index;
     useEffect(() => {
-        if (maxLoadedItem < maxVisibledItem + 5) {
-            const prevIndex = maxLoadedItem;
-            setMaxLoadedItem(prevIndex + 1);
+        if (highestLoadedItemIndex < loadingLimit &&
+            highestLoadedItemIndex < highestVisibleItemIndex + extraLoading) {
             setLoadedItems([
                 ...loadedItems,
                 React.cloneElement(children, {
-                    index: prevIndex + 1,
+                    index: highestLoadedItemIndex + 1,
                 }),
-            ].slice(loadedItems.length >= loadingLimit ? 1 : 0));
+            ].slice(
+            // Slice from start
+            lowestVisibleItemIndex - lowestLoadedItemIndex >
+                extraLoading
+                ? 1
+                : 0));
+            console.log(">>>>>>>>>>>>>>>>>>>>>>>> ++++ Item ", highestLoadedItemIndex + 1, " Added to end");
         }
-    }, [
-        children,
-        loadingLimit,
-        loadedItems,
-        maxLoadedItem,
-        maxVisibledItem,
-    ]);
-    console.log("loadedItems.length", loadedItems.length, "maxLoadedItem", maxLoadedItem, "maxVisibledItem", maxVisibledItem);
+        if (lowestLoadedItemIndex > 0 &&
+            lowestLoadedItemIndex > lowestVisibleItemIndex - extraLoading) {
+            setLoadedItems([
+                React.cloneElement(children, {
+                    index: lowestLoadedItemIndex - 1,
+                }),
+                ...loadedItems,
+            ].slice(
+            // Slice from end
+            0, highestLoadedItemIndex - highestVisibleItemIndex >
+                extraLoading
+                ? -1
+                : undefined));
+            console.log(">>>>>>>>>>>> ---- Item ", lowestLoadedItemIndex - 1, " Added to start");
+        }
+        if (visibleCount > maxTotalVisibledItems) {
+            setMaxTotalVisibledItems(visibleCount);
+        }
+        // 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("visibilityStatus", visibilityStatus);
+    // console.log(
+    //     "loadedItems",
+    //     loadedItems.map((item) => item.props.index)
+    // );
+    // 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: loadedItems.map((item) => (_jsxs(DisplayOnVisible, { onVisible: () => handleOnVisible(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) => (_jsxs(DisplayOnVisible, { onVisibilityChange: (visible) => handleOnVisibilityChange(visible, item.props.index), children: [_jsx("h1", { children: item.props.index }), item] }, item.props.index))) })));
 });

package/dist/RenderOnVisible/RenderOnVisible.d.ts

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

@@ -0,0 +1,40 @@
+"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 })) }));
+});

package/dist/WithOverlay/WithOverlay.d.ts

@@ -1,7 +1,7 @@
 import { RefObject } from "react";
 import { Dropdown, DropdownProps, Popup, PopupProps } from "..";
 export interface OverlayProps {
-    triggerRef?: RefObject<HTMLElement | null>;
+    triggerref?: RefObject<HTMLElement | null>;
     onClose?: () => void;
 }
 type AllowedOverlays = React.ReactElement<PopupProps, typeof Popup> | React.ReactElement<DropdownProps, typeof Dropdown>;

package/dist/WithOverlay/WithOverlay.js

@@ -27,7 +27,7 @@ export function WithOverlay({ trigger = "onClick", overlay, children, }) {
                     }) }), showOverlay &&
                 overlay &&
                 cloneElement(overlay, {
-                    triggerRef: triggerRef,
+                    triggerref: triggerRef,
                     onClose: () => {
                         var _a, _b;
                         (_b = (_a = overlay.props).onClose) === null || _b === void 0 ? void 0 : _b.call(_a);

package/dist/index.d.ts

@@ -28,9 +28,10 @@ export * from "./RadioGroup/RadioGroup";
 export * from "./RadioButton/RadioButton";
 export * from "./CodeBox/CodeBox";
 export * from "./Display/Display";
-export * from "./DisplayOnVisible/DisplayOnVisible";
 export * from "./WithInteractions/WithInteractions";
 export * from "./WithOverlay/WithOverlay";
 export * from "./Dropdown/Dropdown";
 export * from "./Popup/Popup";
 export * from "./LoadingControl/LoadingControl";
+export * from "./DisplayOnVisible/DisplayOnVisible";
+export * from "./RenderOnVisible/RenderOnVisible";

package/dist/index.js

@@ -33,10 +33,12 @@ export * from "./RadioButton/RadioButton";
 export * from "./CodeBox/CodeBox";
 // Utilities
 export * from "./Display/Display";
-export * from "./DisplayOnVisible/DisplayOnVisible";
 export * from "./WithInteractions/WithInteractions";
 export * from "./WithOverlay/WithOverlay";
 // Overlays
 export * from "./Dropdown/Dropdown";
 export * from "./Popup/Popup";
+// Loading Control
 export * from "./LoadingControl/LoadingControl";
+export * from "./DisplayOnVisible/DisplayOnVisible";
+export * from "./RenderOnVisible/RenderOnVisible";

package/package.json

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