@particle-network/ui-react 0.7.0-beta.14 → 0.7.0-beta.15

package/dist/components/UXSimplePopover/index.d.ts

@@ -1 +1,2 @@
+export * from './provider';
 export * from './simple-popover';

package/dist/components/UXSimplePopover/index.js

@@ -1 +1,2 @@
+export * from "./provider.js";
 export * from "./simple-popover.js";

package/dist/components/UXSimplePopover/provider.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import type { SimplePopoverPlacement, SimplePopoverSize } from './simple-popover';
+export interface TriggerOptions {
+    placement?: SimplePopoverPlacement;
+    size?: SimplePopoverSize;
+    offset?: number;
+    delay?: number;
+    closeDelay?: number;
+    contentClassName?: string;
+}
+interface SimplePopoverCtx {
+    show: (anchor: HTMLElement, content: React.ReactNode, options?: TriggerOptions) => void;
+    hide: (closeDelay?: number) => void;
+    prepare: (anchor: HTMLElement, content: React.ReactNode, options?: TriggerOptions) => void;
+    toggle: () => void;
+}
+export declare function useSimplePopoverContext(): SimplePopoverCtx | null;
+export interface UXSimplePopoverProviderProps {
+    children: React.ReactNode;
+}
+export declare const UXSimplePopoverProvider: React.FC<UXSimplePopoverProviderProps>;
+export {};

package/dist/components/UXSimplePopover/provider.js

@@ -0,0 +1,197 @@
+'use client';
+import { jsx, jsxs } from "react/jsx-runtime";
+import react, { createContext, useCallback, useContext, useEffect, useId, useRef, useState } from "react";
+import { tv } from "@heroui/theme";
+import { cn } from "../../utils/index.js";
+const popoverVariants = tv({
+    base: 'bg-content1 text-foreground-300 shadow-box text-tiny leading-1.4 rounded-medium max-w-[300px] break-words wrap-break-word antialiased',
+    variants: {
+        size: {
+            sm: 'p-1.5',
+            md: 'p-2.5',
+            lg: 'p-3.5'
+        }
+    },
+    defaultVariants: {
+        size: 'md'
+    }
+});
+const PopoverContext = /*#__PURE__*/ createContext(null);
+function useSimplePopoverContext() {
+    return useContext(PopoverContext);
+}
+const OFFSET_MARGIN = {
+    top: {
+        marginBottom: 8
+    },
+    bottom: {
+        marginTop: 8
+    },
+    left: {
+        marginRight: 8
+    },
+    right: {
+        marginLeft: 8
+    }
+};
+const MARGIN_SIDE_MAP = {
+    top: 'Bottom',
+    bottom: 'Top',
+    left: 'Right',
+    right: 'Left'
+};
+const UXSimplePopoverProvider = ({ children })=>{
+    const uid = useId().replace(/:/g, '');
+    const popoverRef = useRef(null);
+    const openTimerRef = useRef(null);
+    const closeTimerRef = useRef(null);
+    const triggerModeRef = useRef('hover');
+    const currentAnchorRef = useRef(null);
+    const [content, setContent] = useState(null);
+    const [anchorStyle, setAnchorStyle] = useState({});
+    const [contentClassName, setContentClassName] = useState(void 0);
+    const [size, setSize] = useState('md');
+    const clearTimers = useCallback(()=>{
+        if (null !== openTimerRef.current) {
+            clearTimeout(openTimerRef.current);
+            openTimerRef.current = null;
+        }
+        if (null !== closeTimerRef.current) {
+            clearTimeout(closeTimerRef.current);
+            closeTimerRef.current = null;
+        }
+    }, []);
+    const resolveAnchorName = useCallback((anchor)=>{
+        if (!anchor.style.getPropertyValue('anchor-name')) anchor.style.setProperty('anchor-name', `--sp-${uid}-${Math.random().toString(36).slice(2, 8)}`);
+        return anchor.style.getPropertyValue('anchor-name');
+    }, [
+        uid
+    ]);
+    const computeAnchorStyle = useCallback((anchorName, options)=>{
+        const { placement = 'top', offset = 8 } = options;
+        const primarySide = placement.split('-')[0];
+        const marginSide = MARGIN_SIDE_MAP[primarySide] ?? 'Bottom';
+        const offsetStyle = 8 !== offset ? {
+            [`margin${marginSide}`]: offset
+        } : OFFSET_MARGIN[primarySide];
+        return {
+            positionAnchor: anchorName,
+            positionArea: placement.replace(/-/g, ' '),
+            positionTryFallbacks: 'flip-block, flip-inline, flip-block flip-inline',
+            ...offsetStyle
+        };
+    }, []);
+    const show = useCallback((anchor, node, options)=>{
+        const opts = options ?? {};
+        const delay = opts.delay ?? 300;
+        clearTimers();
+        triggerModeRef.current = 'hover';
+        const anchorName = resolveAnchorName(anchor);
+        setContent(node);
+        setContentClassName(opts.contentClassName);
+        setSize(opts.size ?? 'md');
+        setAnchorStyle(computeAnchorStyle(anchorName, opts));
+        openTimerRef.current = setTimeout(()=>{
+            openTimerRef.current = null;
+            popoverRef.current?.showPopover();
+        }, delay);
+    }, [
+        clearTimers,
+        resolveAnchorName,
+        computeAnchorStyle
+    ]);
+    const hide = useCallback((closeDelay)=>{
+        const cd = closeDelay ?? 100;
+        clearTimers();
+        closeTimerRef.current = setTimeout(()=>{
+            closeTimerRef.current = null;
+            popoverRef.current?.hidePopover();
+        }, cd);
+    }, [
+        clearTimers
+    ]);
+    const prepare = useCallback((anchor, node, options)=>{
+        const opts = options ?? {};
+        clearTimers();
+        triggerModeRef.current = 'click';
+        currentAnchorRef.current = anchor;
+        const anchorName = resolveAnchorName(anchor);
+        setContent(node);
+        setContentClassName(opts.contentClassName);
+        setSize(opts.size ?? 'md');
+        setAnchorStyle(computeAnchorStyle(anchorName, opts));
+    }, [
+        clearTimers,
+        resolveAnchorName,
+        computeAnchorStyle
+    ]);
+    const toggle = useCallback(()=>{
+        const el = popoverRef.current;
+        if (!el) return;
+        try {
+            if (el.matches(':popover-open')) el.hidePopover();
+            else el.showPopover();
+        } catch  {}
+    }, []);
+    useEffect(()=>{
+        const handlePointerDown = (e)=>{
+            const el = popoverRef.current;
+            if (!el || 'click' !== triggerModeRef.current) return;
+            try {
+                if (!el.matches(':popover-open')) return;
+            } catch  {
+                return;
+            }
+            const target = e.target;
+            if (!el.contains(target) && !currentAnchorRef.current?.contains(target)) el.hidePopover();
+        };
+        document.addEventListener('pointerdown', handlePointerDown);
+        return ()=>document.removeEventListener('pointerdown', handlePointerDown);
+    }, []);
+    useEffect(()=>()=>{
+            clearTimers();
+        }, [
+        clearTimers
+    ]);
+    const ctx = react.useMemo(()=>({
+            show,
+            hide,
+            prepare,
+            toggle
+        }), [
+        show,
+        hide,
+        prepare,
+        toggle
+    ]);
+    const handlePopoverMouseEnter = useCallback(()=>{
+        if ('hover' === triggerModeRef.current) clearTimers();
+    }, [
+        clearTimers
+    ]);
+    const handlePopoverMouseLeave = useCallback(()=>{
+        if ('hover' === triggerModeRef.current) hide();
+    }, [
+        hide
+    ]);
+    return /*#__PURE__*/ jsxs(PopoverContext.Provider, {
+        value: ctx,
+        children: [
+            children,
+            /*#__PURE__*/ jsx("div", {
+                ref: popoverRef,
+                id: `ux-sp-${uid}`,
+                popover: "manual",
+                className: cn(popoverVariants({
+                    size
+                }), contentClassName),
+                style: anchorStyle,
+                onMouseEnter: handlePopoverMouseEnter,
+                onMouseLeave: handlePopoverMouseLeave,
+                children: content
+            })
+        ]
+    });
+};
+UXSimplePopoverProvider.displayName = 'UX.SimplePopoverProvider';
+export { UXSimplePopoverProvider, useSimplePopoverContext };

package/dist/components/UXSimplePopover/simple-popover.d.ts

@@ -1,22 +1,25 @@
 import React from 'react';
 export type SimplePopoverPlacement = 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'left-top' | 'left-bottom' | 'right' | 'right-top' | 'right-bottom';
 export type SimplePopoverTriggerType = 'click' | 'hover';
+export type SimplePopoverSize = 'sm' | 'md' | 'lg';
 export interface UXSimplePopoverProps {
     /** Popover content */
     content: React.ReactNode;
     /** Trigger element(s) */
     children: React.ReactNode;
-    /** How to open: click (uses popovertarget) or hover (uses showPopover/hidePopover) */
+    /** How to open: click or hover */
     triggerType?: SimplePopoverTriggerType;
     /** Placement relative to trigger; uses CSS Anchor Positioning when supported */
     placement?: SimplePopoverPlacement;
+    /** Popover padding size */
+    size?: SimplePopoverSize;
     /** Hover only: delay before opening (ms) */
     delay?: number;
     /** Hover only: delay before closing (ms) */
     closeDelay?: number;
     /** Distance between popover and trigger (px) */
     offset?: number;
-    /** ClassName for the trigger wrapper (when cloning a single child, applied to that child) */
+    /** ClassName for the trigger wrapper and popover content */
     classNames?: {
         trigger?: string;
         content?: string;

package/dist/components/UXSimplePopover/simple-popover.js

@@ -1,132 +1,84 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import react, { cloneElement, isValidElement, useCallback, useId, useRef } from "react";
-import { cn } from "../../utils/index.js";
-const UXSimplePopover = (props)=>{
-    const { content, children, triggerType = 'hover', placement = 'top', offset = 8, delay = 300, closeDelay = 100, classNames = {
-        trigger: '',
-        content: ''
-    } } = props;
-    const id = useId().replace(/:/g, '');
-    const popoverId = `simple-popover-${id}`;
-    const anchorName = `--simple-popover-${id}`;
-    const popoverRef = useRef(null);
-    const openTimerRef = useRef(null);
-    const closeTimerRef = useRef(null);
-    const clearOpenTimer = useCallback(()=>{
-        if (null !== openTimerRef.current) {
-            clearTimeout(openTimerRef.current);
-            openTimerRef.current = null;
-        }
-    }, []);
-    const clearCloseTimer = useCallback(()=>{
-        if (null !== closeTimerRef.current) {
-            clearTimeout(closeTimerRef.current);
-            closeTimerRef.current = null;
-        }
-    }, []);
-    const showPopover = useCallback(()=>{
-        clearCloseTimer();
-        openTimerRef.current = setTimeout(()=>{
-            openTimerRef.current = null;
-            popoverRef.current?.showPopover();
-        }, delay);
-    }, [
+import { jsx } from "react/jsx-runtime";
+import { useCallback, useRef } from "react";
+import { useSimplePopoverContext } from "./provider.js";
+const warnedRef = {
+    current: false
+};
+const UXSimplePopover = ({ content, children, triggerType = 'hover', placement = 'top', size = 'md', offset = 8, delay = 300, closeDelay = 100, classNames })=>{
+    const ctx = useSimplePopoverContext();
+    const ref = useRef(null);
+    const contentRef = useRef(content);
+    contentRef.current = content;
+    const optionsRef = useRef({
+        placement,
+        size,
+        offset,
+        delay,
+        closeDelay,
+        contentClassName: classNames?.content
+    });
+    optionsRef.current = {
+        placement,
+        size,
+        offset,
         delay,
-        clearCloseTimer
+        closeDelay,
+        contentClassName: classNames?.content
+    };
+    const isClick = 'click' === triggerType;
+    const handleEnter = useCallback(()=>{
+        if (ref.current && ctx && !isClick) ctx.show(ref.current, contentRef.current, optionsRef.current);
+    }, [
+        ctx,
+        isClick
     ]);
-    const hidePopover = useCallback(()=>{
-        clearOpenTimer();
-        closeTimerRef.current = setTimeout(()=>{
-            closeTimerRef.current = null;
-            popoverRef.current?.hidePopover();
-        }, closeDelay);
+    const handleLeave = useCallback(()=>{
+        if (ctx && !isClick) ctx.hide(optionsRef.current.closeDelay);
     }, [
-        closeDelay,
-        clearOpenTimer
+        ctx,
+        isClick
     ]);
-    react.useEffect(()=>()=>{
-            clearOpenTimer();
-            clearCloseTimer();
-        }, [
-        clearOpenTimer,
-        clearCloseTimer
+    const handlePointerDown = useCallback(()=>{
+        if (ref.current && ctx && isClick) ctx.prepare(ref.current, contentRef.current, optionsRef.current);
+    }, [
+        ctx,
+        isClick
     ]);
-    const triggerAnchorStyle = {
-        anchorName
-    };
-    const offsetMargin = {
-        top: {
-            marginBottom: offset
-        },
-        bottom: {
-            marginTop: offset
-        },
-        left: {
-            marginRight: offset
-        },
-        right: {
-            marginLeft: offset
-        }
-    };
-    const primarySide = placement.split('-')[0];
-    const popoverAnchorStyle = {
-        positionAnchor: anchorName,
-        positionArea: placement.replace(/-/g, ' '),
-        positionTryFallbacks: 'flip-block, flip-inline, flip-block flip-inline',
-        ...offsetMargin[primarySide]
-    };
-    const isClick = 'click' === triggerType;
-    const trigger = isClick ? /*#__PURE__*/ jsx("button", {
-        type: "button",
-        popoverTarget: popoverId,
-        popoverTargetAction: "toggle",
-        className: classNames.trigger,
-        style: {
-            margin: 0,
-            padding: 0,
-            border: 'none',
-            font: 'inherit',
-            color: 'inherit',
-            backgroundColor: 'transparent',
-            cursor: 'pointer',
-            ...triggerAnchorStyle
-        },
-        children: children
-    }) : (()=>{
-        const childElement = /*#__PURE__*/ isValidElement(children) && 1 === react.Children.count(children) ? children : null;
-        return childElement ? /*#__PURE__*/ cloneElement(childElement, {
-            onMouseEnter: showPopover,
-            onMouseLeave: hidePopover,
-            className: [
-                classNames.trigger,
-                childElement.props?.className
-            ].filter(Boolean).join(' '),
-            style: {
-                ...childElement.props?.style,
-                ...triggerAnchorStyle
+    const handleClick = useCallback(()=>{
+        if (ctx && isClick) ctx.toggle();
+    }, [
+        ctx,
+        isClick
+    ]);
+    const handleKeyDown = useCallback((e)=>{
+        if (isClick && ('Enter' === e.key || ' ' === e.key)) {
+            e.preventDefault();
+            if (ref.current && ctx) {
+                ctx.prepare(ref.current, contentRef.current, optionsRef.current);
+                ctx.toggle();
             }
-        }) : /*#__PURE__*/ jsx("span", {
-            className: classNames.trigger,
-            style: triggerAnchorStyle,
-            role: "button",
+        }
+    }, [
+        ctx,
+        isClick
+    ]);
+    if (!ctx && !warnedRef.current) {
+        warnedRef.current = true;
+        console.warn('[UXSimplePopover] must be used inside <UXSimplePopoverProvider>. Popover will not work.');
+    }
+    return /*#__PURE__*/ jsx("span", {
+        ref: ref,
+        className: classNames?.trigger,
+        onMouseEnter: handleEnter,
+        onMouseLeave: handleLeave,
+        ...isClick ? {
+            role: 'button',
             tabIndex: 0,
-            onMouseEnter: showPopover,
-            onMouseLeave: hidePopover,
-            children: children
-        });
-    })();
-    return /*#__PURE__*/ jsxs(Fragment, {
-        children: [
-            trigger,
-            /*#__PURE__*/ jsx("div", {
-                ref: popoverRef,
-                id: popoverId,
-                popover: isClick ? 'auto' : 'manual',
-                className: cn('bg-content1 text-foreground-300 shadow-box text-tiny leading-1.4 rounded-medium max-w-[300px] p-2.5 break-words wrap-break-word antialiased', classNames.content),
-                style: popoverAnchorStyle,
-                children: content
-            })
-        ]
+            onPointerDownCapture: handlePointerDown,
+            onClickCapture: handleClick,
+            onKeyDown: handleKeyDown
+        } : {},
+        children: children
     });
 };
 UXSimplePopover.displayName = 'UXSimplePopover';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@particle-network/ui-react",
-  "version": "0.7.0-beta.14",
+  "version": "0.7.0-beta.15",
   "type": "module",
   "exports": {
     ".": {
@@ -37,8 +37,8 @@
     "@rslib/core": "^0.12.3",
     "@types/react": "^19.1.10",
     "react": "^19.1.0",
-    "@particle-network/lintstaged-config": "0.1.0",
-    "@particle-network/eslint-config": "0.3.0"
+    "@particle-network/eslint-config": "0.3.0",
+    "@particle-network/lintstaged-config": "0.1.0"
   },
   "peerDependencies": {
     "react": ">=16.9.0",