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

package/dist/components/ProgressWrapper/index.js

@@ -5,36 +5,61 @@ import { radiusMap, useThemeColor } from "@particle-network/ui-shared";
 import { useSize } from "ahooks";
 import { cn } from "../../utils/index.js";
 import { Center } from "../layout/index.js";
+function createPathData(x, y, w, h, r) {
+    if (0 === r) return `
+      M ${x + w} ${y + h}
+      L ${x} ${y + h}
+      L ${x} ${y}
+      L ${x + w} ${y}
+      Z
+    `;
+    return `
+      M ${x + w - r} ${y + h}
+      L ${x + r} ${y + h}
+      Q ${x} ${y + h} ${x} ${y + h - r}
+      L ${x} ${y + r}
+      Q ${x} ${y} ${x + r} ${y}
+      L ${x + w - r} ${y}
+      Q ${x + w} ${y} ${x + w} ${y + r}
+      L ${x + w} ${y + h - r}
+      Q ${x + w} ${y + h} ${x + w - r} ${y + h}
+      Z
+    `;
+}
 const ProgressWrapper = ({ className, value = 0, width, height, radius = 'sm', strokeWidth = 1, color = 'primary', children, svgClassName, ...restProps })=>{
     const uxColors = useThemeColor();
     const autoLayout = !width && !height;
     const containerRef = useRef(null);
-    const { width: childWidth, height: childHeight } = useSize(containerRef) ?? {
-        width: 0,
-        height: 0
-    };
-    const widthValue = useMemo(()=>{
-        if (width) return width;
-        return childWidth + 2 * strokeWidth;
+    const size = useSize(autoLayout ? containerRef : void 0);
+    const childWidth = size?.width ?? 0;
+    const childHeight = size?.height ?? 0;
+    const radiusValue = 'number' == typeof radius ? radius : radiusMap[radius];
+    const { widthValue, heightValue, pathData, perimeter, strokeDashoffset } = useMemo(()=>{
+        const w = width ?? childWidth + 2 * strokeWidth;
+        const h = height ?? childHeight + 2 * strokeWidth;
+        const rectWidth = w - strokeWidth;
+        const rectHeight = h - strokeWidth;
+        const rectXY = strokeWidth / 2;
+        const p = 2 * (rectWidth + rectHeight);
+        const clamped = Math.max(0, Math.min(100, value));
+        const offset = p * (1 - clamped / 100);
+        const path = createPathData(rectXY, rectXY, rectWidth, rectHeight, radiusValue);
+        return {
+            widthValue: w,
+            heightValue: h,
+            pathData: path,
+            perimeter: p,
+            strokeDashoffset: offset
+        };
     }, [
+        width,
+        height,
         childWidth,
-        strokeWidth,
-        width
-    ]);
-    const heightValue = useMemo(()=>{
-        if (height) return height;
-        return childHeight + 2 * strokeWidth;
-    }, [
         childHeight,
         strokeWidth,
-        height
+        value,
+        radiusValue
     ]);
-    const clampedProgress = Math.max(0, Math.min(100, value));
-    const rectWidth = widthValue - strokeWidth;
-    const rectHeight = heightValue - strokeWidth;
-    const rectXY = strokeWidth / 2;
-    const perimeter = 2 * (rectWidth + rectHeight);
-    const strokeDashoffset = perimeter * (1 - clampedProgress / 100);
     const colorValue = useMemo(()=>{
         if ('transparent' === color) return 'transparent';
         if (color.startsWith('#')) return color;
@@ -50,29 +75,6 @@ const ProgressWrapper = ({ className, value = 0, width, height, radius = 'sm', s
         color,
         colorValue
     ]);
-    const radiusValue = 'number' == typeof radius ? radius : radiusMap[radius];
-    const createPathData = (x, y, w, h, r)=>{
-        if (0 === r) return `
-        M ${x + w} ${y + h}
-        L ${x} ${y + h}
-        L ${x} ${y}
-        L ${x + w} ${y}
-        Z
-      `;
-        return `
-        M ${x + w - r} ${y + h}
-        L ${x + r} ${y + h}
-        Q ${x} ${y + h} ${x} ${y + h - r}
-        L ${x} ${y + r}
-        Q ${x} ${y} ${x + r} ${y}
-        L ${x + w - r} ${y}
-        Q ${x + w} ${y} ${x + w} ${y + r}
-        L ${x + w} ${y + h - r}
-        Q ${x + w} ${y + h} ${x + w - r} ${y + h}
-        Z
-      `;
-    };
-    const pathData = createPathData(rectXY, rectXY, rectWidth, rectHeight, radiusValue);
     return /*#__PURE__*/ jsxs(Center, {
         style: {
             width: `${widthValue}px`,

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

@@ -1,8 +1,11 @@
 import React from 'react';
-import { type UXTooltipProps } from '..';
-export type UXHintProps = UXTooltipProps & {
+import { type SimplePopoverPlacement } from '..';
+export interface UXHintProps {
+    content?: React.ReactNode;
+    children?: React.ReactNode;
     triggerType?: 'hover' | 'click';
+    placement?: SimplePopoverPlacement;
     buttonClassName?: string;
     iconClassName?: string;
-};
+}
 export declare const UXHint: React.FC<UXHintProps>;

package/dist/components/UXHint/index.js

@@ -1,31 +1,21 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import "react";
 import CircleQuestionIcon from "@particle-network/icons/web/CircleQuestionIcon";
-import { Center, UXPopover, UXPopoverContent, UXPopoverTrigger, UXTooltip } from "../index.js";
+import { Center, UXSimplePopover } from "../index.js";
 import { cn } from "../../utils/index.js";
 const UXHint = (props)=>{
-    const { content, children, buttonClassName, iconClassName, triggerType = 'hover', ...restProps } = props;
-    const renderTriggerContent = ()=>/*#__PURE__*/ jsx(Center, {
+    const { content, children, buttonClassName, iconClassName, triggerType = 'hover', placement = 'top' } = props;
+    return /*#__PURE__*/ jsx(UXSimplePopover, {
+        content: content || children,
+        triggerType: triggerType,
+        placement: placement,
+        children: /*#__PURE__*/ jsx(Center, {
             className: cn('min-h-4 min-w-4 cursor-pointer', buttonClassName),
             children: /*#__PURE__*/ jsx(CircleQuestionIcon, {
                 size: 14,
                 className: iconClassName
             })
-        });
-    if ('hover' === triggerType) return /*#__PURE__*/ jsx(UXTooltip, {
-        content: content || children,
-        ...restProps,
-        children: renderTriggerContent()
-    });
-    return /*#__PURE__*/ jsxs(UXPopover, {
-        children: [
-            /*#__PURE__*/ jsx(UXPopoverTrigger, {
-                children: renderTriggerContent()
-            }),
-            /*#__PURE__*/ jsx(UXPopoverContent, {
-                children: content || children
-            })
-        ]
+        })
     });
 };
 UXHint.displayName = 'UX.Hint';

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

@@ -1,5 +1,5 @@
 import React from 'react';
-export type SimplePopoverPlacement = 'top' | 'bottom' | 'left' | 'right';
+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 interface UXSimplePopoverProps {
     /** Popover content */
@@ -14,6 +14,8 @@ export interface UXSimplePopoverProps {
     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) */
     classNames?: {
         trigger?: string;

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

@@ -2,7 +2,7 @@ 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 = {
+    const { content, children, triggerType = 'hover', placement = 'top', offset = 8, delay = 300, closeDelay = 100, classNames = {
         trigger: '',
         content: ''
     } } = props;
@@ -54,10 +54,26 @@ const UXSimplePopover = (props)=>{
     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,
-        positionTryFallbacks: 'flip-block, flip-inline, flip-block flip-inline'
+        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", {

package/package.json

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