@particle-network/ui-react 0.7.0-beta.16 → 0.7.0-beta.18

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

@@ -19,7 +19,7 @@ export interface UXSimplePopoverProps {
     closeDelay?: number;
     /** Distance between popover and trigger (px) */
     offset?: number;
-    /** ClassName for the trigger wrapper and popover content */
+    /** ClassName for the trigger element and popover content */
     classNames?: {
         trigger?: string;
         content?: string;

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

@@ -1,12 +1,31 @@
 import { jsx } from "react/jsx-runtime";
-import { useCallback, useRef } from "react";
+import react, { useCallback, useRef } from "react";
+import { cn } from "../../utils/index.js";
 import { useSimplePopoverContext } from "./provider.js";
 const warnedRef = {
     current: false
 };
+const warnedChildRef = {
+    current: false
+};
+function composeEventHandlers(original, next) {
+    return (event)=>{
+        original?.(event);
+        if (!event.defaultPrevented) next?.(event);
+    };
+}
+function isIntrinsicInteractiveElement(element) {
+    return 'string' == typeof element.type && [
+        'button',
+        'a',
+        'input',
+        'select',
+        'textarea',
+        'summary'
+    ].includes(element.type);
+}
 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({
@@ -26,8 +45,8 @@ const UXSimplePopover = ({ content, children, triggerType = 'hover', placement =
         contentClassName: classNames?.content
     };
     const isClick = 'click' === triggerType;
-    const handleEnter = useCallback(()=>{
-        if (ref.current && ctx && !isClick) ctx.show(ref.current, contentRef.current, optionsRef.current);
+    const handleEnter = useCallback((e)=>{
+        if (ctx && !isClick) ctx.show(e.currentTarget, contentRef.current, optionsRef.current);
     }, [
         ctx,
         isClick
@@ -38,14 +57,17 @@ const UXSimplePopover = ({ content, children, triggerType = 'hover', placement =
         ctx,
         isClick
     ]);
-    const handlePointerDown = useCallback(()=>{
-        if (ref.current && ctx && isClick) ctx.prepare(ref.current, contentRef.current, optionsRef.current);
+    const handlePointerDown = useCallback((e)=>{
+        if (ctx && isClick) ctx.prepare(e.currentTarget, contentRef.current, optionsRef.current);
     }, [
         ctx,
         isClick
     ]);
-    const handleClick = useCallback(()=>{
-        if (ctx && isClick) ctx.toggle();
+    const handleClick = useCallback((e)=>{
+        if (ctx && isClick) {
+            ctx.prepare(e.currentTarget, contentRef.current, optionsRef.current);
+            ctx.toggle();
+        }
     }, [
         ctx,
         isClick
@@ -53,8 +75,8 @@ const UXSimplePopover = ({ content, children, triggerType = 'hover', placement =
     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);
+            if (ctx) {
+                ctx.prepare(e.currentTarget, contentRef.current, optionsRef.current);
                 ctx.toggle();
             }
         }
@@ -66,16 +88,35 @@ const UXSimplePopover = ({ content, children, triggerType = 'hover', placement =
         warnedRef.current = true;
         console.warn('[UXSimplePopover] must be used inside <UXSimplePopoverProvider>. Popover will not work.');
     }
+    if (/*#__PURE__*/ react.isValidElement(children) && children.type !== react.Fragment) {
+        const child = children;
+        const interactiveElement = isIntrinsicInteractiveElement(child);
+        return /*#__PURE__*/ react.cloneElement(child, {
+            className: cn(child.props.className, classNames?.trigger),
+            onMouseEnter: composeEventHandlers(child.props.onMouseEnter, handleEnter),
+            onMouseLeave: composeEventHandlers(child.props.onMouseLeave, handleLeave),
+            ...isClick ? {
+                role: child.props.role ?? (interactiveElement ? void 0 : 'button'),
+                tabIndex: child.props.tabIndex ?? (interactiveElement ? void 0 : 0),
+                onPointerDown: composeEventHandlers(child.props.onPointerDown, handlePointerDown),
+                onClick: composeEventHandlers(child.props.onClick, handleClick),
+                onKeyDown: composeEventHandlers(child.props.onKeyDown, handleKeyDown)
+            } : {}
+        });
+    }
+    if (!warnedChildRef.current) {
+        warnedChildRef.current = true;
+        console.warn('[UXSimplePopover] children should be a single React element to avoid the fallback <span> wrapper.');
+    }
     return /*#__PURE__*/ jsx("span", {
-        ref: ref,
         className: classNames?.trigger,
         onMouseEnter: handleEnter,
         onMouseLeave: handleLeave,
         ...isClick ? {
             role: 'button',
             tabIndex: 0,
-            onPointerDownCapture: handlePointerDown,
-            onClickCapture: handleClick,
+            onPointerDown: handlePointerDown,
+            onClick: handleClick,
             onKeyDown: handleKeyDown
         } : {},
         children: children

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

@@ -5,7 +5,10 @@ export type UXToastType = 'success' | 'error' | 'loading' | 'info';
 export type UXToastProps = Partial<ToastProps> & {
     type: UXToastType;
 };
-export declare const UXToastProvider: () => import("react/jsx-runtime").JSX.Element;
+export interface UXToastProviderProps {
+    placement?: ToastProps['placement'];
+}
+export declare const UXToastProvider: ({ placement }: UXToastProviderProps) => import("react/jsx-runtime").JSX.Element;
 export declare const toast: {
     info: (message: ReactNode, props?: Partial<ToastProps>) => string | null;
     success: (message: ReactNode, props?: Partial<ToastProps>) => string | null;

package/dist/components/UXToast/index.js

@@ -6,9 +6,9 @@ import CloseIcon from "@particle-network/icons/web/CloseIcon";
 import { hasLongWord } from "../../utils/index.js";
 import { UXSpinner } from "../UXSpinner/index.js";
 import { WrapText } from "../WrapText/index.js";
-const UXToastProvider = ()=>/*#__PURE__*/ jsx(ToastProvider, {
+const UXToastProvider = ({ placement = 'top-center' })=>/*#__PURE__*/ jsx(ToastProvider, {
         disableAnimation: true,
-        placement: "top-center",
+        placement: placement,
         maxVisibleToasts: 4,
         toastProps: {
             timeout: 4000

package/dist/components/layout/Box/box-theme.d.ts

@@ -737,7 +737,7 @@ export declare const boxVariants: import("tailwind-variants").TVReturnType<{
         center: string;
         right: string;
     };
-}, undefined, "ux-box-base", {
+}, undefined, "", {
     position: {
         static: string;
         relative: string;
@@ -2209,5 +2209,5 @@ export declare const boxVariants: import("tailwind-variants").TVReturnType<{
         center: string;
         right: string;
     };
-}, undefined, "ux-box-base", unknown, unknown, undefined>>;
+}, undefined, "", unknown, unknown, undefined>>;
 export type BoxVariants = VariantProps<typeof boxVariants>;

package/dist/components/layout/Box/box-theme.js

@@ -123,7 +123,7 @@ const roundedClasses = {
     full: 'rounded-full'
 };
 const boxVariants = tv({
-    base: 'ux-box-base',
+    base: '',
     variants: {
         position: {
             static: 'static',

package/dist/components/typography/text-theme.d.ts

@@ -57,7 +57,7 @@ export declare const textVariants: import("tailwind-variants").TVReturnType<{
         '1': string;
         '1.4': string;
     };
-}, undefined, "ux-text-base", {
+}, undefined, "", {
     variant: {
         h1: string;
         h2: string;
@@ -175,4 +175,4 @@ export declare const textVariants: import("tailwind-variants").TVReturnType<{
         '1': string;
         '1.4': string;
     };
-}, undefined, "ux-text-base", unknown, unknown, undefined>>;
+}, undefined, "", unknown, unknown, undefined>>;

package/dist/components/typography/text-theme.js

@@ -11,7 +11,7 @@ const body3 = 'text-[0.6875rem] leading-[1rem] font-normal';
 const caption1Bold = 'text-[0.625rem] leading-[0.875rem] font-medium';
 const caption1 = 'text-[0.625rem] leading-[0.875rem] font-normal';
 const textVariants = tv({
-    base: 'ux-text-base',
+    base: '',
     variants: {
         variant: {
             h1,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@particle-network/ui-react",
-  "version": "0.7.0-beta.16",
+  "version": "0.7.0-beta.18",
   "type": "module",
   "exports": {
     ".": {
@@ -58,8 +58,8 @@
     "tailwind-variants": "^3.2.2",
     "values.js": "^2.1.1",
     "zustand": "^5.0.8",
-    "@particle-network/ui-shared": "0.6.0-beta.0",
-    "@particle-network/icons": "0.7.0-beta.6"
+    "@particle-network/icons": "0.7.0-beta.6",
+    "@particle-network/ui-shared": "0.6.0-beta.0"
   },
   "scripts": {
     "build": "rslib build",