@openzeppelin/ui-components 1.5.0 → 1.6.0

package/dist/index.mjs

@@ -6,6 +6,7 @@ import * as React$1 from "react";
 import React, { createContext, useCallback, useContext, useEffect, useId, useMemo, useRef, useState } from "react";
 import { cn, getDefaultValueForType, getInvalidUrlMessage, getServiceDisplayName, isValidUrl, truncateMiddle, validateBytesSimple } from "@openzeppelin/ui-utils";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import { Slot, Slottable } from "@radix-ui/react-slot";
 import { DayPicker } from "react-day-picker";
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
@@ -20,7 +21,6 @@ import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
 import * as SelectPrimitive from "@radix-ui/react-select";
 import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
 import * as TabsPrimitive from "@radix-ui/react-tabs";
-import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import { isMapEntryArray } from "@openzeppelin/ui-types";
 import { Toaster as Toaster$1, toast } from "sonner";
 import { useTheme } from "next-themes";
@@ -102,6 +102,19 @@ const AccordionContent = React$1.forwardRef(({ className, children, variant: var
 });
 AccordionContent.displayName = "AccordionContent";
 
+//#endregion
+//#region src/components/ui/tooltip.tsx
+const TooltipProvider = TooltipPrimitive.Provider;
+const Tooltip = TooltipPrimitive.Root;
+const TooltipTrigger = TooltipPrimitive.Trigger;
+const TooltipContent = React$1.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx(TooltipPrimitive.Content, {
+	ref,
+	sideOffset,
+	className: cn("bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 overflow-hidden rounded-md px-3 py-1.5 text-xs", className),
+	...props
+}) }));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
 //#endregion
 //#region src/components/ui/address-display/context.ts
 /**
@@ -114,8 +127,20 @@ const AddressLabelContext = createContext(null);
 //#endregion
 //#region src/components/ui/address-display/address-display.tsx
 /**
+* True when the primary input can hover (e.g. desktop with mouse).
+* Touch-first phones typically report false. SSR assumes hover-capable.
+*/
+function usePrefersHover() {
+	return React$1.useSyncExternalStore(React$1.useCallback((onStoreChange) => {
+		if (typeof window === "undefined" || typeof window.matchMedia === "undefined") return () => {};
+		const mq = window.matchMedia("(hover: hover)");
+		mq.addEventListener("change", onStoreChange);
+		return () => mq.removeEventListener("change", onStoreChange);
+	}, []), () => typeof window !== "undefined" && typeof window.matchMedia !== "undefined" ? window.matchMedia("(hover: hover)").matches : true, () => true);
+}
+/**
 * Displays a blockchain address with optional truncation, copy button,
-* explorer link, and human-readable label.
+* explorer link, tooltip, and human-readable label.
 *
 * Labels are resolved in priority order:
 * 1. Explicit `label` prop
@@ -140,11 +165,22 @@ const AddressLabelContext = createContext(null);
 *
 * // Suppress label resolution for a specific instance
 * <AddressDisplay address="0x742d35Cc..." disableLabel />
+*
+* // Reveal full address on hover (still truncated when idle)
+* <AddressDisplay address="0x742d35Cc..." untruncateOnHover />
+*
+* // Tooltip with full address on hover + copy icon on hover
+* <AddressDisplay address="0x742d35Cc..." showTooltip showCopyButton showCopyButtonOnHover />
+*
+* // Inline variant (no chip background) — useful inside wallet bars
+* <AddressDisplay address="0x742d35Cc..." variant="inline" showTooltip showCopyButton />
 * ```
 */
-function AddressDisplay({ address, truncate = true, startChars = 6, endChars = 4, showCopyButton = false, showCopyButtonOnHover = false, explorerUrl, label: labelProp, onLabelEdit: onLabelEditProp, networkId, disableLabel = false, className, ...props }) {
+function AddressDisplay({ address, truncate = true, untruncateOnHover = false, startChars = 6, endChars = 4, showCopyButton = false, showCopyButtonOnHover = false, explorerUrl, label: labelProp, onLabelEdit: onLabelEditProp, networkId, disableLabel = false, showTooltip = false, variant = "chip", className, onPointerEnter, onPointerLeave, onMouseEnter, onMouseLeave, onClick, ...props }) {
 	const [copied, setCopied] = React$1.useState(false);
+	const [isHovered, setIsHovered] = React$1.useState(false);
 	const copyTimeoutRef = React$1.useRef(null);
+	const prefersHover = usePrefersHover();
 	const resolver = React$1.useContext(AddressLabelContext);
 	const resolvedLabel = disableLabel ? void 0 : labelProp ?? resolver?.resolveLabel(address, networkId);
 	const contextEditHandler = React$1.useCallback(() => {
@@ -155,7 +191,25 @@ function AddressDisplay({ address, truncate = true, startChars = 6, endChars = 4
 		networkId
 	]);
 	const editHandler = disableLabel ? void 0 : onLabelEditProp ?? (resolver?.onEditLabel ? contextEditHandler : void 0);
-	const displayAddress = truncate ? truncateMiddle(address, startChars, endChars) : address;
+	const canUntruncate = untruncateOnHover && truncate && !showTooltip;
+	const showFullAddress = !truncate || canUntruncate && isHovered;
+	const displayAddress = showFullAddress ? address : truncateMiddle(address, startChars, endChars);
+	const addressTextClassName = cn(!showFullAddress && "truncate", (showFullAddress || !truncate) && "break-all");
+	const expandInteractionClassName = canUntruncate && !prefersHover ? "cursor-pointer" : void 0;
+	const handlePointerEnter = (e) => {
+		if (canUntruncate && prefersHover) setIsHovered(true);
+		onPointerEnter?.(e);
+		onMouseEnter?.(e);
+	};
+	const handlePointerLeave = (e) => {
+		if (canUntruncate && prefersHover) setIsHovered(false);
+		onPointerLeave?.(e);
+		onMouseLeave?.(e);
+	};
+	const handleUntruncateClick = (e) => {
+		if (canUntruncate && !prefersHover) setIsHovered((open) => !open);
+		onClick?.(e);
+	};
 	const handleCopy = (e) => {
 		e.stopPropagation();
 		navigator.clipboard.writeText(address);
@@ -171,6 +225,7 @@ function AddressDisplay({ address, truncate = true, startChars = 6, endChars = 4
 			if (copyTimeoutRef.current) window.clearTimeout(copyTimeoutRef.current);
 		};
 	}, []);
+	const isChip = variant === "chip";
 	const actionButtons = /* @__PURE__ */ jsxs(Fragment, { children: [
 		showCopyButton && /* @__PURE__ */ jsx("button", {
 			type: "button",
@@ -183,6 +238,9 @@ function AddressDisplay({ address, truncate = true, startChars = 6, endChars = 4
 			href: explorerUrl,
 			target: "_blank",
 			rel: "noopener noreferrer",
+			onClick: (e) => {
+				e.stopPropagation();
+			},
 			className: "ml-1.5 shrink-0 text-slate-500 transition-colors hover:text-slate-700",
 			"aria-label": "View in explorer",
 			children: /* @__PURE__ */ jsx(ExternalLink$1, { className: "h-3.5 w-3.5" })
@@ -198,28 +256,48 @@ function AddressDisplay({ address, truncate = true, startChars = 6, endChars = 4
 			children: /* @__PURE__ */ jsx(Pencil, { className: "h-3.5 w-3.5" })
 		})
 	] });
-	if (resolvedLabel) return /* @__PURE__ */ jsxs("div", {
-		className: cn("group inline-flex max-w-full flex-col rounded-md bg-slate-100 px-2 py-1", "text-xs text-slate-700", className),
+	const shouldShowTooltip = showTooltip && truncate;
+	const wrapWithTooltip = (content) => {
+		if (!shouldShowTooltip) return content;
+		return /* @__PURE__ */ jsx(TooltipProvider, {
+			delayDuration: 300,
+			children: /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+				asChild: true,
+				children: content
+			}), /* @__PURE__ */ jsx(TooltipContent, {
+				className: "font-mono text-xs",
+				children: address
+			})] })
+		});
+	};
+	if (resolvedLabel) return wrapWithTooltip(/* @__PURE__ */ jsxs("div", {
+		className: cn("group inline-flex max-w-full min-w-0 flex-col", isChip && "rounded-md bg-slate-100 px-2 py-1", "text-xs text-slate-700", expandInteractionClassName, className),
+		onPointerEnter: handlePointerEnter,
+		onPointerLeave: handlePointerLeave,
+		onClick: handleUntruncateClick,
 		...props,
 		children: [/* @__PURE__ */ jsx("span", {
 			className: "truncate font-sans font-medium text-slate-900 leading-snug",
 			children: resolvedLabel
 		}), /* @__PURE__ */ jsxs("div", {
-			className: "flex items-center font-mono text-[10px] text-slate-400 leading-snug",
+			className: "flex min-w-0 items-center font-mono text-[10px] text-slate-400 leading-snug",
 			children: [/* @__PURE__ */ jsx("span", {
-				className: cn("truncate", truncate ? "" : "break-all"),
+				className: addressTextClassName,
 				children: displayAddress
 			}), actionButtons]
 		})]
-	});
-	return /* @__PURE__ */ jsxs("div", {
-		className: cn("group inline-flex max-w-full items-center rounded-md bg-slate-100 px-2 py-1", "text-xs font-mono text-slate-700", className),
+	}));
+	return wrapWithTooltip(/* @__PURE__ */ jsxs("div", {
+		className: cn("group inline-flex max-w-full min-w-0 items-center", isChip && "rounded-md bg-slate-100 px-2 py-1", "text-xs font-mono text-slate-700", expandInteractionClassName, className),
+		onPointerEnter: handlePointerEnter,
+		onPointerLeave: handlePointerLeave,
+		onClick: handleUntruncateClick,
 		...props,
 		children: [/* @__PURE__ */ jsx("span", {
-			className: cn("truncate", truncate ? "" : "break-all"),
+			className: addressTextClassName,
 			children: displayAddress
 		}), actionButtons]
-	});
+	}));
 }
 
 //#endregion
@@ -1796,19 +1874,6 @@ const Textarea = React$1.forwardRef(({ className, ...props }, ref) => {
 });
 Textarea.displayName = "Textarea";
 
-//#endregion
-//#region src/components/ui/tooltip.tsx
-const TooltipProvider = TooltipPrimitive.Provider;
-const Tooltip = TooltipPrimitive.Root;
-const TooltipTrigger = TooltipPrimitive.Trigger;
-const TooltipContent = React$1.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(TooltipPrimitive.Content, {
-	ref,
-	sideOffset,
-	className: cn("bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 overflow-hidden rounded-md px-3 py-1.5 text-xs", className),
-	...props
-}));
-TooltipContent.displayName = TooltipPrimitive.Content.displayName;
-
 //#endregion
 //#region src/components/ui/view-contract-state-button.tsx
 /**