@openzeppelin/ui-components 1.5.0 → 1.7.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,11 +21,14 @@ 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";
 
+//#region src/version.ts
+const VERSION = "1.7.0";
+
+//#endregion
 //#region src/components/ui/accordion.tsx
 const accordionItemVariants = cva("", {
 	variants: { variant: {
@@ -102,6 +106,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 +131,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 +169,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 +195,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 +229,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 +242,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 +260,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 +1878,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
 /**
@@ -6260,5 +6329,5 @@ const Toaster = ({ ...props }) => {
 };
 
 //#endregion
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, AddressDisplay, AddressField, AddressLabelProvider, AddressSuggestionProvider, Alert, AlertDescription, AlertTitle, AmountField, ArrayField, ArrayObjectField, Banner, BaseField, BigIntField, BooleanField, Button, BytesField, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, DateRangePicker, DateTimeField, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EcosystemDropdown, EcosystemIcon, EmptyState, EnumField, ErrorMessage, ExternalLink, FileUploadField, Footer, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, Header, INTEGER_HTML_PATTERN, INTEGER_INPUT_PATTERN, INTEGER_PATTERN, Input, Label, LoadingButton, MapEntryRow, MapField, MidnightIcon, NetworkErrorNotificationProvider, NetworkIcon, NetworkSelector, NetworkServiceErrorBanner, NetworkStatusBadge, NumberField, ObjectField, OverflowMenu, PasswordField, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, RadioField, RadioGroup, RadioGroupItem, RelayerDetailsCard, Select, SelectContent, SelectField, SelectGroup, SelectGroupedField, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SidebarButton, SidebarGroup, SidebarLayout, SidebarSection, Tabs, TabsContent, TabsList, TabsTrigger, TextAreaField, TextField, Textarea, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UrlField, ViewContractStateButton, WizardLayout, WizardNavigation, WizardStepper, buttonVariants, computeChildTouched, createFocusManager, createValidationResult, formatValidationError, getAccessibilityProps, getDescribedById, getErrorMessage, getValidationStateClasses, getWidthClasses, handleEscapeKey, handleKeyboardEvent, handleNumericKeys, handleToggleKeys, handleValidationError, hasFieldError, isDuplicateMapKey, useAddressLabel, useAddressSuggestions, useDuplicateKeyIndexes, useMapFieldSync, useNetworkErrorAwareAdapter, useNetworkErrorReporter, useNetworkErrors, validateField, validateMapEntries, validateMapStructure };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, AddressDisplay, AddressField, AddressLabelProvider, AddressSuggestionProvider, Alert, AlertDescription, AlertTitle, AmountField, ArrayField, ArrayObjectField, Banner, BaseField, BigIntField, BooleanField, Button, BytesField, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, DateRangePicker, DateTimeField, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EcosystemDropdown, EcosystemIcon, EmptyState, EnumField, ErrorMessage, ExternalLink, FileUploadField, Footer, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, Header, INTEGER_HTML_PATTERN, INTEGER_INPUT_PATTERN, INTEGER_PATTERN, Input, Label, LoadingButton, MapEntryRow, MapField, MidnightIcon, NetworkErrorNotificationProvider, NetworkIcon, NetworkSelector, NetworkServiceErrorBanner, NetworkStatusBadge, NumberField, ObjectField, OverflowMenu, PasswordField, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, RadioField, RadioGroup, RadioGroupItem, RelayerDetailsCard, Select, SelectContent, SelectField, SelectGroup, SelectGroupedField, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SidebarButton, SidebarGroup, SidebarLayout, SidebarSection, Tabs, TabsContent, TabsList, TabsTrigger, TextAreaField, TextField, Textarea, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, UrlField, VERSION, ViewContractStateButton, WizardLayout, WizardNavigation, WizardStepper, buttonVariants, computeChildTouched, createFocusManager, createValidationResult, formatValidationError, getAccessibilityProps, getDescribedById, getErrorMessage, getValidationStateClasses, getWidthClasses, handleEscapeKey, handleKeyboardEvent, handleNumericKeys, handleToggleKeys, handleValidationError, hasFieldError, isDuplicateMapKey, useAddressLabel, useAddressSuggestions, useDuplicateKeyIndexes, useMapFieldSync, useNetworkErrorAwareAdapter, useNetworkErrorReporter, useNetworkErrors, validateField, validateMapEntries, validateMapStructure };
 //# sourceMappingURL=index.mjs.map