@particle-network/ui-react 0.6.1 → 0.7.0-beta.1

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

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

package/dist/components/UXSimplePopover/index.js

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

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

@@ -0,0 +1,25 @@
+import React from 'react';
+export type SimplePopoverPlacement = 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end' | 'right-start' | 'right-end';
+export type SimplePopoverTriggerType = 'click' | 'hover';
+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) */
+    triggerType?: SimplePopoverTriggerType;
+    /** Placement relative to trigger; uses CSS Anchor Positioning when supported */
+    placement?: SimplePopoverPlacement;
+    /** Hover only: delay before opening (ms) */
+    delay?: number;
+    /** Hover only: delay before closing (ms) */
+    closeDelay?: number;
+    /** ClassName for the trigger wrapper (when cloning a single child, applied to that child) */
+    classNames?: {
+        trigger?: string;
+        content?: string;
+    };
+    /** popovertargetaction when triggerType is click: 'toggle' | 'show' | 'hide' */
+    popoverTargetAction?: 'toggle' | 'show' | 'hide';
+}
+export declare const UXSimplePopover: React.FC<UXSimplePopoverProps>;

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

@@ -0,0 +1,116 @@
+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', delay = 300, closeDelay = 100, classNames = {
+        trigger: '',
+        content: ''
+    }, popoverTargetAction = 'toggle' } = 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);
+    }, [
+        delay,
+        clearCloseTimer
+    ]);
+    const hidePopover = useCallback(()=>{
+        clearOpenTimer();
+        closeTimerRef.current = setTimeout(()=>{
+            closeTimerRef.current = null;
+            popoverRef.current?.hidePopover();
+        }, closeDelay);
+    }, [
+        closeDelay,
+        clearOpenTimer
+    ]);
+    react.useEffect(()=>()=>{
+            clearOpenTimer();
+            clearCloseTimer();
+        }, [
+        clearOpenTimer,
+        clearCloseTimer
+    ]);
+    const triggerAnchorStyle = {
+        anchorName
+    };
+    const popoverAnchorStyle = {
+        positionAnchor: anchorName,
+        positionArea: placement
+    };
+    const isClick = 'click' === triggerType;
+    const trigger = isClick ? /*#__PURE__*/ jsx("button", {
+        type: "button",
+        popovertarget: popoverId,
+        popovertargetaction: popoverTargetAction,
+        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
+            }
+        }) : /*#__PURE__*/ jsx("span", {
+            className: classNames.trigger,
+            style: triggerAnchorStyle,
+            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 wrap-break-word rounded-medium max-w-[300px] break-words p-2.5 antialiased', classNames.content),
+                style: popoverAnchorStyle,
+                children: content
+            })
+        ]
+    });
+};
+UXSimplePopover.displayName = 'UXSimplePopover';
+export { UXSimplePopover };

package/dist/components/index.d.ts

@@ -23,6 +23,7 @@ export * from './UXPopover';
 export * from './UXRadio';
 export * from './UXRangeInput';
 export * from './UXSelect';
+export * from './UXSimplePopover';
 export * from './UXSlider';
 export * from './UXSpinner';
 export * from './UXSwitch';

package/dist/components/index.js

@@ -23,6 +23,7 @@ export * from "./UXPopover/index.js";
 export * from "./UXRadio/index.js";
 export * from "./UXRangeInput/index.js";
 export * from "./UXSelect/index.js";
+export * from "./UXSimplePopover/index.js";
 export * from "./UXSlider/index.js";
 export * from "./UXSpinner/index.js";
 export * from "./UXSwitch/index.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@particle-network/ui-react",
-  "version": "0.6.1",
+  "version": "0.7.0-beta.1",
   "type": "module",
   "exports": {
     ".": {