@bikiran/utils 2.3.5 → 2.3.7

package/dist/components/information-tooltip/InformationTooltip.d.ts

@@ -6,6 +6,10 @@ type TProps = {
     align?: "left" | "right" | "top" | "bottom";
     fillColor?: string;
     borderColor?: string;
+    trigger?: "hover" | "click";
+    disabled?: boolean;
+    delay?: number;
+    offset?: number;
 };
 declare const InformationTooltip: FC<TProps>;
 export default InformationTooltip;

package/dist/components/information-tooltip/InformationTooltip.js

@@ -1,27 +1,191 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useRef, useEffect, useCallback } from "react";
+import { createPortal } from "react-dom";
 import { IconArrow, IconInfo } from "./icons";
 import styles from "./style/InfoTooltip.module.css";
 import { cn } from "../../lib/utils/cn";
-const InformationTooltip = ({ children, content, className, align = "right", fillColor = "#FFF9DB", borderColor = "#FFE6BA", }) => {
-    const tooltipClass = cn(styles.tooltipContent, align === "top"
-        ? styles.topAlign
-        : align === "bottom"
-            ? styles.bottomAlign
-            : align === "left"
-                ? styles.leftAlign
-                : styles.rightAlign, className);
-    const arrowClass = cn(styles.arrow, align === "top"
-        ? styles.arrowTop
-        : align === "bottom"
-            ? styles.arrowBottom
-            : align === "left"
-                ? styles.arrowLeft
-                : styles.arrowRight);
-    return (_jsxs("div", { className: styles.wrapper, children: [children ? children : _jsx(IconInfo, {}), _jsx("div", { className: tooltipClass, style: {
-                    backgroundColor: fillColor,
-                    borderColor: borderColor,
-                    borderWidth: "1px",
-                    color: "var(--color-primary)", // if you have text-primary color in css vars
-                }, children: _jsx("span", { children: content }) }), _jsx("div", { className: arrowClass, children: _jsx(IconArrow, { fillColor: fillColor, borderColor: borderColor }) })] }));
+const InformationTooltip = ({ children, content, className, align = "right", fillColor = "#FFF9DB", borderColor = "#FFE6BA", trigger = "hover", disabled = false, delay = 200, offset = 12, }) => {
+    const [isVisible, setIsVisible] = useState(false);
+    const [position, setPosition] = useState({
+        top: 0,
+        left: 0,
+        finalAlign: align,
+    });
+    const triggerRef = useRef(null);
+    const tooltipRef = useRef(null);
+    const timeoutRef = useRef(null);
+    // Calculate optimal position based on viewport boundaries
+    const calculatePosition = useCallback(() => {
+        if (!triggerRef.current)
+            return { top: 0, left: 0, finalAlign: align };
+        const triggerRect = triggerRef.current.getBoundingClientRect();
+        const viewportWidth = window.innerWidth;
+        const viewportHeight = window.innerHeight;
+        const tooltipWidth = 224; // w-56 = 14rem = 224px
+        // Try to get actual tooltip height if available, otherwise use estimate
+        let tooltipHeight = 65; // default estimate
+        if (tooltipRef.current) {
+            const tooltipRect = tooltipRef.current.getBoundingClientRect();
+            if (tooltipRect.height > 0) {
+                tooltipHeight = tooltipRect.height;
+            }
+        }
+        let finalAlign = align;
+        let top = 0;
+        let left = 0;
+        // Calculate position based on preferred alignment
+        switch (align) {
+            case "right":
+                left = triggerRect.right + offset;
+                top = triggerRect.top + triggerRect.height / 2 - tooltipHeight / 2;
+                // Check if tooltip would overflow viewport
+                if (left + tooltipWidth > viewportWidth) {
+                    finalAlign = "left";
+                    left = triggerRect.left - tooltipWidth - offset;
+                }
+                break;
+            case "left":
+                left = triggerRect.left - tooltipWidth - offset;
+                top = triggerRect.top + triggerRect.height / 2 - tooltipHeight / 2;
+                if (left < 0) {
+                    finalAlign = "right";
+                    left = triggerRect.right + offset;
+                }
+                break;
+            case "top":
+                left = triggerRect.left + triggerRect.width / 2 - tooltipWidth / 2;
+                top = triggerRect.top - tooltipHeight + offset / 2; // Reduce gap for closer positioning
+                if (top < 0) {
+                    finalAlign = "bottom";
+                    top = triggerRect.bottom + offset;
+                }
+                break;
+            case "bottom":
+                left = triggerRect.left + triggerRect.width / 2 - tooltipWidth / 2;
+                top = triggerRect.bottom + offset;
+                if (top + tooltipHeight > viewportHeight) {
+                    finalAlign = "top";
+                    top = triggerRect.top - tooltipHeight - offset / 2; // Consistent closer positioning
+                }
+                break;
+        }
+        // Ensure tooltip doesn't overflow horizontally
+        if (left < 0)
+            left = 8;
+        if (left + tooltipWidth > viewportWidth)
+            left = viewportWidth - tooltipWidth - 8;
+        // Ensure tooltip doesn't overflow vertically
+        if (top < 0)
+            top = 8;
+        if (top + tooltipHeight > viewportHeight)
+            top = viewportHeight - tooltipHeight - 8;
+        return { top, left, finalAlign };
+    }, [align, offset]);
+    const showTooltip = useCallback(() => {
+        if (disabled)
+            return;
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+        }
+        timeoutRef.current = setTimeout(() => {
+            setPosition(calculatePosition());
+            setIsVisible(true);
+        }, trigger === "hover" ? delay : 0);
+    }, [disabled, calculatePosition, delay, trigger]);
+    const hideTooltip = useCallback(() => {
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+        }
+        if (trigger === "hover") {
+            timeoutRef.current = setTimeout(() => {
+                setIsVisible(false);
+            }, 100);
+        }
+        else {
+            setIsVisible(false);
+        }
+    }, [trigger]);
+    const handleClick = useCallback(() => {
+        if (disabled)
+            return;
+        if (trigger === "click") {
+            if (isVisible) {
+                hideTooltip();
+            }
+            else {
+                showTooltip();
+            }
+        }
+    }, [disabled, trigger, isVisible, showTooltip, hideTooltip]);
+    // Handle click outside
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (trigger === "click" &&
+                isVisible &&
+                triggerRef.current &&
+                tooltipRef.current &&
+                !triggerRef.current.contains(event.target) &&
+                !tooltipRef.current.contains(event.target)) {
+                hideTooltip();
+            }
+        };
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => document.removeEventListener("mousedown", handleClickOutside);
+    }, [trigger, isVisible, hideTooltip]);
+    // Handle escape key
+    useEffect(() => {
+        const handleEscape = (event) => {
+            if (event.key === "Escape" && isVisible) {
+                hideTooltip();
+            }
+        };
+        document.addEventListener("keydown", handleEscape);
+        return () => document.removeEventListener("keydown", handleEscape);
+    }, [isVisible, hideTooltip]);
+    // Recalculate position on scroll/resize
+    useEffect(() => {
+        const handleReposition = () => {
+            if (isVisible) {
+                setPosition(calculatePosition());
+            }
+        };
+        window.addEventListener("scroll", handleReposition, true);
+        window.addEventListener("resize", handleReposition);
+        return () => {
+            window.removeEventListener("scroll", handleReposition, true);
+            window.removeEventListener("resize", handleReposition);
+        };
+    }, [isVisible, calculatePosition]);
+    // Cleanup timeout on unmount
+    useEffect(() => {
+        return () => {
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+            }
+        };
+    }, []);
+    const tooltipClass = cn(styles.tooltipPortal, className);
+    const arrowClass = cn(styles.arrowPortal, styles[`arrow${position.finalAlign.charAt(0).toUpperCase() +
+        position.finalAlign.slice(1)}`]);
+    const triggerProps = Object.assign(Object.assign({}, (trigger === "hover" && {
+        onMouseEnter: showTooltip,
+        onMouseLeave: hideTooltip,
+        onFocus: showTooltip,
+        onBlur: hideTooltip,
+    })), (trigger === "click" && {
+        onClick: handleClick,
+    }));
+    return (_jsxs(_Fragment, { children: [_jsx("div", Object.assign({ ref: triggerRef, className: cn(styles.wrapper, disabled && styles.disabled) }, triggerProps, { tabIndex: trigger === "click" ? 0 : undefined, role: trigger === "click" ? "button" : undefined, "aria-describedby": isVisible ? "tooltip" : undefined, children: children ? children : _jsx(IconInfo, {}) })), isVisible &&
+                !disabled &&
+                createPortal(_jsxs("div", { ref: tooltipRef, id: "tooltip", role: "tooltip", className: tooltipClass, style: {
+                        position: "fixed",
+                        top: position.top,
+                        left: position.left,
+                        backgroundColor: fillColor,
+                        borderColor: borderColor,
+                        borderWidth: "1px",
+                        color: "var(--color-primary)",
+                        zIndex: 9999,
+                    }, onMouseEnter: trigger === "hover" ? showTooltip : undefined, onMouseLeave: trigger === "hover" ? hideTooltip : undefined, children: [_jsx("span", { children: content }), _jsx("div", { className: arrowClass, children: _jsx(IconArrow, { fillColor: fillColor, borderColor: borderColor }) })] }), document.body)] }));
 };
 export default InformationTooltip;

package/dist/components/information-tooltip/style/InfoTooltip.module.css

@@ -4,6 +4,14 @@
   @apply relative inline-flex items-center cursor-pointer;
 }
 
+.wrapper:focus {
+  @apply outline-none;
+}
+
+.disabled {
+  @apply cursor-not-allowed opacity-50;
+}
+
 .tooltipContent {
   @apply absolute rounded-[15px] text-sm w-56 px-4 py-3 shadow-md hidden z-10 transition-all duration-300 ease-in-out;
 }
@@ -20,43 +28,29 @@
   @apply block;
 }
 
-/* Alignment positions for tooltipContent */
-.rightAlign {
-  left: calc(100% + 24%);
-  @apply top-1/2 transform -translate-y-1/2;
+/* Portal-based tooltip styles */
+.tooltipPortal {
+  @apply rounded-[15px] text-sm w-56 px-4 py-3 shadow-lg border border-solid transition-all duration-200 ease-in-out;
+  @apply opacity-100 visible relative;
 }
 
-.leftAlign {
-  right: calc(100% + 24%);
-  @apply top-1/2 transform -translate-y-1/2;
+.arrowPortal {
+  @apply absolute w-6 h-3;
 }
 
-.topAlign {
-  bottom: calc(100% + 19%);
-  @apply left-1/2 transform -translate-x-1/2;
-}
-
-.bottomAlign {
-  top: calc(100% + 20%);
-  @apply left-1/2 transform -translate-x-1/2;
-}
-
-/* Arrow positions */
+/* Arrow positions for portal tooltips */
 .arrowRight {
-  left: calc(100% - 26px);
-  @apply top-1/2 transform rotate-90 -translate-x-[100%];
+  @apply left-[-18px] top-1/2 transform -translate-y-1/2 rotate-90;
 }
 
 .arrowLeft {
-  right: calc(100% - 27px);
-
-  @apply top-1/2 transform rotate-90 translate-x-[100%];
+  @apply right-[-18px] top-1/2 transform -translate-y-1/2 rotate-[270deg];
 }
 
 .arrowTop {
-  @apply left-1/2 bottom-[5px] transform -translate-x-1/2 rotate-0;
+  @apply left-1/2 bottom-[-12px] transform -translate-x-1/2 rotate-0;
 }
 
 .arrowBottom {
-  @apply left-4 top-2 transform rotate-180 -translate-x-1/2;
+  @apply left-1/2 top-[-12px] transform -translate-x-1/2 rotate-180;
 }

package/dist/index.d.ts

@@ -30,10 +30,12 @@ export type { TInputChangeEvent, TTextAreaChangeEvent, TMouseEvent, TFormEvent,
 export type { TDomainProperty, TDomainDuration, TDomainInfo, } from "./lib/types/domain";
 export type { TApp } from "./lib/types/app";
 export type { TUser } from "./lib/types/user";
+export type { TAssets } from "./lib/types/assets";
 export type { TApiResponse, TPagination } from "./lib/types/response";
 export type { TInvoiceInfo, TAddressBilling, TAddressPayload, TAddressShipping, TInvoiceData, TInvoiceProduct, TPaymentIssue, TPaymentOption, } from "./lib/types/invoice";
 export { default as countries } from "./lib/utils/country.json";
 export { win, doc, storage } from "./lib/utils/dom";
+export { ASSET_KEYS } from "./lib/constants/index";
 export { setLocalStorage, getLocalStorage } from "./lib/utils/storage";
 export { mkQueryString, mkToken, mkStrongPassword, } from "./lib/utils/StringOperation";
 export { default as StatusColor } from "./lib/utils/statusColor";

package/dist/index.js

@@ -28,6 +28,7 @@ export { addOption, addOption2 } from "./lib/utils/option";
 export { getBikiranUrl, getAccountUrl, getApiUrl, getApi2Url, getApi3Url, getBaseDomain, getSupportUrl, generateAnyUrl, getAdManageUrl, getAppoceanUrl, getDBConnectionString, getDocsUrl, getDomainUrl, getHostingUrl, getSiteUrl, SUB_DOMAIN_NAMES, isDev, getMode, } from "./lib/utils/Env";
 export { default as countries } from "./lib/utils/country.json";
 export { win, doc, storage } from "./lib/utils/dom";
+export { ASSET_KEYS } from "./lib/constants/index";
 export { setLocalStorage, getLocalStorage } from "./lib/utils/storage";
 export { mkQueryString, mkToken, mkStrongPassword, } from "./lib/utils/StringOperation";
 // UI utilities

package/dist/index.ts

@@ -73,7 +73,8 @@ export type {
 export type { TApp } from "./lib/types/app";
 // User types
 export type { TUser } from "./lib/types/user";
-
+// Asset keys
+export type { TAssets } from "./lib/types/assets";
 // Response types
 export type { TApiResponse, TPagination } from "./lib/types/response";
 
@@ -90,6 +91,7 @@ export type {
 } from "./lib/types/invoice";
 export { default as countries } from "./lib/utils/country.json";
 export { win, doc, storage } from "./lib/utils/dom";
+export { ASSET_KEYS } from "./lib/constants/index";
 export { setLocalStorage, getLocalStorage } from "./lib/utils/storage";
 export {
   mkQueryString,

package/dist/lib/constants/index.d.ts

@@ -0,0 +1,2 @@
+import { TAssets } from "../types/assets";
+export declare const ASSET_KEYS: TAssets;

package/dist/lib/constants/index.js

@@ -0,0 +1,12 @@
+export const ASSET_KEYS = {
+    domain: "DOMAIN",
+    hosting: "HOSTING",
+    appOcean: "APPOCEAN",
+    proBackup: "PROBACKUP",
+    eduSoft: "EDUSOFT",
+    push: "PUSH",
+    email: "EMAIL",
+    founder: "FOUNDER",
+    account: "ACCOUNT",
+    project: "PROJECT",
+};

package/dist/lib/constants/index.ts

@@ -0,0 +1,14 @@
+import { TAssets } from "../types/assets";
+
+export const ASSET_KEYS: TAssets = {
+  domain: "DOMAIN",
+  hosting: "HOSTING",
+  appOcean: "APPOCEAN",
+  proBackup: "PROBACKUP",
+  eduSoft: "EDUSOFT",
+  push: "PUSH",
+  email: "EMAIL",
+  founder: "FOUNDER",
+  account: "ACCOUNT",
+  project: "PROJECT",
+} as const;

package/dist/lib/types/assets.d.ts

@@ -0,0 +1,12 @@
+export type TAssets = {
+    domain: "DOMAIN";
+    hosting: "HOSTING";
+    appOcean: "APPOCEAN";
+    proBackup: "PROBACKUP";
+    eduSoft: "EDUSOFT";
+    push: "PUSH";
+    email: "EMAIL";
+    founder: "FOUNDER";
+    account: "ACCOUNT";
+    project: "PROJECT";
+};

package/dist/lib/types/assets.js

@@ -0,0 +1 @@
+export {};

package/dist/lib/types/assets.ts

@@ -0,0 +1,12 @@
+export type TAssets = {
+  domain: "DOMAIN";
+  hosting: "HOSTING";
+  appOcean: "APPOCEAN";
+  proBackup: "PROBACKUP";
+  eduSoft: "EDUSOFT";
+  push: "PUSH";
+  email: "EMAIL";
+  founder: "FOUNDER";
+  account: "ACCOUNT";
+  project: "PROJECT";
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bikiran/utils",
-  "version": "2.3.5",
+  "version": "2.3.7",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [