@particle-network/ui-react 0.7.0-beta.11 → 0.7.0-beta.13

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,9 +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
+        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/dist/components/UXThemeSwitch/theme-switch.js

@@ -19,6 +19,7 @@ import { UXTooltip } from "../UXTooltip/index.js";
 import { CustomThemeConfig } from "./custom-theme-config.js";
 import { ThemeItem } from "./theme-item.js";
 import { useTheme } from "./use-theme.js";
+import { preloadFonts } from "./utils.js";
 const FONT_EXAMPLES = [
     {
         title: 'Manrope',
@@ -40,6 +41,11 @@ const UXThemeSwitchModal = ({ as = 'modal', omitThemes = [], backdrop, isOpen, o
     useEffect(()=>{
         initTheme();
     }, []);
+    useEffect(()=>{
+        if (isOpen) preloadFonts();
+    }, [
+        isOpen
+    ]);
     const Component = 'modal' === as ? UXModal : UXDrawer;
     const themes = useMemo(()=>themeData.filter((theme)=>!omitThemes.includes(theme.id)), [
         omitThemes

package/dist/components/UXThemeSwitch/use-theme.js

@@ -42,7 +42,7 @@ const useTheme = ()=>{
         wait: 300
     });
     const initTheme = ()=>{
-        preloadFonts();
+        if (theme.fontName || fontUrl) preloadFonts();
         applyTheme(theme);
         debouncedApplyFont(fontUrl, theme.fontName);
     };

package/package.json

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