@openzeppelin/ui-components 1.5.0 → 1.6.0

package/dist/index.cjs

@@ -7,6 +7,8 @@ let react = require("react");
 react = require_ErrorMessage.__toESM(react);
 let _openzeppelin_ui_utils = require("@openzeppelin/ui-utils");
 let react_jsx_runtime = require("react/jsx-runtime");
+let _radix_ui_react_tooltip = require("@radix-ui/react-tooltip");
+_radix_ui_react_tooltip = require_ErrorMessage.__toESM(_radix_ui_react_tooltip);
 let _radix_ui_react_slot = require("@radix-ui/react-slot");
 let react_day_picker = require("react-day-picker");
 let _radix_ui_react_checkbox = require("@radix-ui/react-checkbox");
@@ -31,8 +33,6 @@ let _radix_ui_react_collapsible = require("@radix-ui/react-collapsible");
 _radix_ui_react_collapsible = require_ErrorMessage.__toESM(_radix_ui_react_collapsible);
 let _radix_ui_react_tabs = require("@radix-ui/react-tabs");
 _radix_ui_react_tabs = require_ErrorMessage.__toESM(_radix_ui_react_tabs);
-let _radix_ui_react_tooltip = require("@radix-ui/react-tooltip");
-_radix_ui_react_tooltip = require_ErrorMessage.__toESM(_radix_ui_react_tooltip);
 let _openzeppelin_ui_types = require("@openzeppelin/ui-types");
 let sonner = require("sonner");
 let next_themes = require("next-themes");
@@ -114,6 +114,19 @@ const AccordionContent = react.forwardRef(({ className, children, variant: varia
 });
 AccordionContent.displayName = "AccordionContent";
 
+//#endregion
+//#region src/components/ui/tooltip.tsx
+const TooltipProvider = _radix_ui_react_tooltip.Provider;
+const Tooltip = _radix_ui_react_tooltip.Root;
+const TooltipTrigger = _radix_ui_react_tooltip.Trigger;
+const TooltipContent = react.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_tooltip.Portal, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_tooltip.Content, {
+	ref,
+	sideOffset,
+	className: (0, _openzeppelin_ui_utils.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 = _radix_ui_react_tooltip.Content.displayName;
+
 //#endregion
 //#region src/components/ui/address-display/context.ts
 /**
@@ -126,8 +139,20 @@ const AddressLabelContext = (0, react.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.useSyncExternalStore(react.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
@@ -152,11 +177,22 @@ const AddressLabelContext = (0, react.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.useState(false);
+	const [isHovered, setIsHovered] = react.useState(false);
 	const copyTimeoutRef = react.useRef(null);
+	const prefersHover = usePrefersHover();
 	const resolver = react.useContext(AddressLabelContext);
 	const resolvedLabel = disableLabel ? void 0 : labelProp ?? resolver?.resolveLabel(address, networkId);
 	const contextEditHandler = react.useCallback(() => {
@@ -167,7 +203,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 ? (0, _openzeppelin_ui_utils.truncateMiddle)(address, startChars, endChars) : address;
+	const canUntruncate = untruncateOnHover && truncate && !showTooltip;
+	const showFullAddress = !truncate || canUntruncate && isHovered;
+	const displayAddress = showFullAddress ? address : (0, _openzeppelin_ui_utils.truncateMiddle)(address, startChars, endChars);
+	const addressTextClassName = (0, _openzeppelin_ui_utils.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);
@@ -183,6 +237,7 @@ function AddressDisplay({ address, truncate = true, startChars = 6, endChars = 4
 			if (copyTimeoutRef.current) window.clearTimeout(copyTimeoutRef.current);
 		};
 	}, []);
+	const isChip = variant === "chip";
 	const actionButtons = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
 		showCopyButton && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 			type: "button",
@@ -195,6 +250,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__ */ (0, react_jsx_runtime.jsx)(lucide_react.ExternalLink, { className: "h-3.5 w-3.5" })
@@ -210,28 +268,48 @@ function AddressDisplay({ address, truncate = true, startChars = 6, endChars = 4
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Pencil, { className: "h-3.5 w-3.5" })
 		})
 	] });
-	if (resolvedLabel) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: (0, _openzeppelin_ui_utils.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__ */ (0, react_jsx_runtime.jsx)(TooltipProvider, {
+			delayDuration: 300,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Tooltip, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipTrigger, {
+				asChild: true,
+				children: content
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipContent, {
+				className: "font-mono text-xs",
+				children: address
+			})] })
+		});
+	};
+	if (resolvedLabel) return wrapWithTooltip(/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: (0, _openzeppelin_ui_utils.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__ */ (0, react_jsx_runtime.jsx)("span", {
 			className: "truncate font-sans font-medium text-slate-900 leading-snug",
 			children: resolvedLabel
 		}), /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)("span", {
-				className: (0, _openzeppelin_ui_utils.cn)("truncate", truncate ? "" : "break-all"),
+				className: addressTextClassName,
 				children: displayAddress
 			}), actionButtons]
 		})]
-	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: (0, _openzeppelin_ui_utils.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__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: (0, _openzeppelin_ui_utils.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__ */ (0, react_jsx_runtime.jsx)("span", {
-			className: (0, _openzeppelin_ui_utils.cn)("truncate", truncate ? "" : "break-all"),
+			className: addressTextClassName,
 			children: displayAddress
 		}), actionButtons]
-	});
+	}));
 }
 
 //#endregion
@@ -1808,19 +1886,6 @@ const Textarea = react.forwardRef(({ className, ...props }, ref) => {
 });
 Textarea.displayName = "Textarea";
 
-//#endregion
-//#region src/components/ui/tooltip.tsx
-const TooltipProvider = _radix_ui_react_tooltip.Provider;
-const Tooltip = _radix_ui_react_tooltip.Root;
-const TooltipTrigger = _radix_ui_react_tooltip.Trigger;
-const TooltipContent = react.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_tooltip.Content, {
-	ref,
-	sideOffset,
-	className: (0, _openzeppelin_ui_utils.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 = _radix_ui_react_tooltip.Content.displayName;
-
 //#endregion
 //#region src/components/ui/view-contract-state-button.tsx
 /**