@openzeppelin/ui-components 2.2.0 → 2.3.1

package/dist/index.cjs

@@ -38,7 +38,7 @@ let sonner = require("sonner");
 let next_themes = require("next-themes");
 
 //#region src/version.ts
-const VERSION = "2.2.0";
+const VERSION = "2.3.1";
 
 //#endregion
 //#region src/components/ui/accordion.tsx
@@ -190,15 +190,19 @@ function usePrefersHover() {
 *
 * // Inline variant (no chip background) — useful inside wallet bars
 * <AddressDisplay address="0x742d35Cc..." variant="inline" showTooltip showCopyButton />
+*
+* // Truncate only when an alias/label is present (full address when unlabeled)
+* <AddressDisplay address="G..." truncateWhenLabeled />
 * ```
 */
-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 }) {
+function AddressDisplay({ address, truncate: truncateProp, truncateWhenLabeled = false, 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 effectiveTruncate = truncateProp !== void 0 ? truncateProp : truncateWhenLabeled ? Boolean(resolvedLabel) : true;
 	const contextEditHandler = react.useCallback(() => {
 		resolver?.onEditLabel?.(address, networkId);
 	}, [
@@ -207,10 +211,10 @@ function AddressDisplay({ address, truncate = true, untruncateOnHover = false, s
 		networkId
 	]);
 	const editHandler = disableLabel ? void 0 : onLabelEditProp ?? (resolver?.onEditLabel ? contextEditHandler : void 0);
-	const canUntruncate = untruncateOnHover && truncate && !showTooltip;
-	const showFullAddress = !truncate || canUntruncate && isHovered;
+	const canUntruncate = untruncateOnHover && effectiveTruncate && !showTooltip;
+	const showFullAddress = !effectiveTruncate || 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 addressTextClassName = (0, _openzeppelin_ui_utils.cn)(!showFullAddress && "truncate", (showFullAddress || !effectiveTruncate) && "break-all");
 	const expandInteractionClassName = canUntruncate && !prefersHover ? "cursor-pointer" : void 0;
 	const handlePointerEnter = (e) => {
 		if (canUntruncate && prefersHover) setIsHovered(true);
@@ -272,7 +276,7 @@ function AddressDisplay({ address, truncate = true, untruncateOnHover = false, s
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Pencil, { className: "h-3.5 w-3.5" })
 		})
 	] });
-	const shouldShowTooltip = showTooltip && truncate;
+	const shouldShowTooltip = showTooltip && effectiveTruncate;
 	const wrapWithTooltip = (content) => {
 		if (!shouldShowTooltip) return content;
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipProvider, {
@@ -2314,6 +2318,12 @@ function isScrollableNavigationKey(event) {
 function PagedLayout({ steps, currentStepIndex, furthestStepIndex: furthestStepIndexProp, onStepChange, onComplete, onLastStepPrimary, onCancel, nextLabel, lastStepLabel, onLastStepSecondary, lastStepSecondaryLabel, lastStepSecondaryDisabled, hideLastStepPrimary, navActions, header, variant, className }) {
 	const safeIndex = getSafeStepIndex(steps.length, currentStepIndex);
 	const resolvedFurthestStepIndex = useFurthestStepIndex(safeIndex, furthestStepIndexProp);
+	const stepBodyScrollRef = (0, react.useRef)(null);
+	(0, react.useLayoutEffect)(() => {
+		const el = stepBodyScrollRef.current;
+		if (!el) return;
+		el.scrollTop = 0;
+	}, [safeIndex]);
 	if (steps.length === 0) return null;
 	const isFirstStep = safeIndex === 0;
 	const isLastStep = safeIndex === steps.length - 1;
@@ -2367,6 +2377,7 @@ function PagedLayout({ steps, currentStepIndex, furthestStepIndex: furthestStepI
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "flex min-w-0 flex-1 flex-col overflow-hidden",
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				ref: stepBodyScrollRef,
 				className: "flex-1 overflow-y-auto p-8",
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: "mx-auto max-w-5xl",
@@ -2389,6 +2400,7 @@ function PagedLayout({ steps, currentStepIndex, furthestStepIndex: furthestStepI
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "flex min-w-0 flex-1 flex-col overflow-hidden",
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				ref: stepBodyScrollRef,
 				className: "flex-1 overflow-y-auto p-8",
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: "mx-auto max-w-5xl",