@openzeppelin/ui-components 2.1.0 → 2.3.0

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.1.0";
+const VERSION = "2.3.0";
 
 //#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, {
@@ -2042,8 +2046,9 @@ function WizardStepper(props) {
 * @param props - The props for the WizardNavigation component.
 * @returns A React node representing the navigation component.
 */
-function WizardNavigation({ isFirstStep, isLastStep, canProceed = true, onPrevious, onNext, onCancel, extraActions, nextLabel = "Next", lastStepLabel = "Finish", showLastStepPrimary = true, className }) {
+function WizardNavigation({ isFirstStep, isLastStep, canProceed = true, onPrevious, onNext, onCancel, extraActions, nextLabel = "Next", lastStepLabel = "Finish", onLastStepSecondary, lastStepSecondaryLabel, lastStepSecondaryDisabled, showLastStepPrimary = true, className }) {
 	const showPrimary = !isLastStep || showLastStepPrimary;
+	const showSecondary = isLastStep && lastStepSecondaryLabel != null && lastStepSecondaryLabel !== "" && onLastStepSecondary != null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: (0, _openzeppelin_ui_utils.cn)("flex items-center justify-between", className),
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -2063,13 +2068,24 @@ function WizardNavigation({ isFirstStep, isLastStep, canProceed = true, onPrevio
 			})]
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "flex gap-2",
-			children: [extraActions, showPrimary && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Button, {
-				type: "button",
-				onClick: onNext,
-				disabled: !canProceed,
-				className: "gap-2",
-				children: [isLastStep ? lastStepLabel : nextLabel, !isLastStep && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronRight, { className: "size-4" })]
-			})]
+			children: [
+				extraActions,
+				showSecondary && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
+					type: "button",
+					variant: "outline",
+					onClick: onLastStepSecondary,
+					disabled: lastStepSecondaryDisabled ?? false,
+					className: "gap-2",
+					children: lastStepSecondaryLabel
+				}),
+				showPrimary && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Button, {
+					type: "button",
+					onClick: onNext,
+					disabled: !canProceed,
+					className: "gap-2",
+					children: [isLastStep ? lastStepLabel : nextLabel, !isLastStep && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.ChevronRight, { className: "size-4" })]
+				})
+			]
 		})]
 	});
 }
@@ -2299,7 +2315,7 @@ function isScrollableNavigationKey(event) {
 
 //#endregion
 //#region src/components/ui/wizard/WizardLayout.tsx
-function PagedLayout({ steps, currentStepIndex, furthestStepIndex: furthestStepIndexProp, onStepChange, onComplete, onLastStepPrimary, onCancel, nextLabel, lastStepLabel, hideLastStepPrimary, navActions, header, variant, className }) {
+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);
 	if (steps.length === 0) return null;
@@ -2333,6 +2349,9 @@ function PagedLayout({ steps, currentStepIndex, furthestStepIndex: furthestStepI
 				extraActions: navActions,
 				nextLabel,
 				lastStepLabel,
+				onLastStepSecondary,
+				lastStepSecondaryLabel,
+				lastStepSecondaryDisabled,
 				showLastStepPrimary: !hideLastStepPrimary
 			})
 		})
@@ -2383,7 +2402,7 @@ function PagedLayout({ steps, currentStepIndex, furthestStepIndex: furthestStepI
 		})]
 	});
 }
-function ScrollableLayout({ steps, currentStepIndex, onStepChange, header, onComplete, hideScrollableCompleteButton, scrollableCompleteLabel, scrollPadding, className }) {
+function ScrollableLayout({ steps, currentStepIndex, onStepChange, header, onComplete, hideScrollableCompleteButton, scrollableCompleteLabel, onScrollableSecondary, scrollableSecondaryLabel, scrollableSecondaryDisabled, scrollPadding, className }) {
 	const instanceId = (0, react.useId)();
 	const scrollRef = (0, react.useRef)(null);
 	const sectionId = (0, react.useCallback)((stepId) => `wizard-section-${instanceId}-${stepId}`, [instanceId]);
@@ -2397,6 +2416,9 @@ function ScrollableLayout({ steps, currentStepIndex, onStepChange, header, onCom
 	});
 	if (steps.length === 0) return null;
 	const stepDefs = toStepDefs(steps, activeIndex);
+	const showScrollableSecondary = onScrollableSecondary != null && scrollableSecondaryLabel != null && scrollableSecondaryLabel !== "";
+	const showScrollablePrimary = onComplete != null && !hideScrollableCompleteButton;
+	const showScrollableFooter = showScrollableSecondary || showScrollablePrimary;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: (0, _openzeppelin_ui_utils.cn)("flex h-full gap-6", className),
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -2422,13 +2444,19 @@ function ScrollableLayout({ steps, currentStepIndex, onStepChange, header, onCom
 						children: step.component
 					}, step.id))
 				}),
-				onComplete && !hideScrollableCompleteButton && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: "flex justify-end pt-8",
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
+				showScrollableFooter && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "flex justify-end gap-2 pt-8",
+					children: [showScrollableSecondary && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
+						type: "button",
+						variant: "outline",
+						onClick: onScrollableSecondary,
+						disabled: scrollableSecondaryDisabled ?? false,
+						children: scrollableSecondaryLabel
+					}), showScrollablePrimary && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
 						type: "button",
 						onClick: onComplete,
 						children: scrollableCompleteLabel ?? "Finish"
-					})
+					})]
 				})
 			]
 		})]
@@ -2462,6 +2490,9 @@ function WizardLayout(props) {
 		onComplete: rest.onComplete,
 		hideScrollableCompleteButton: rest.hideScrollableCompleteButton,
 		scrollableCompleteLabel: rest.scrollableCompleteLabel,
+		onScrollableSecondary: rest.onScrollableSecondary,
+		scrollableSecondaryLabel: rest.scrollableSecondaryLabel,
+		scrollableSecondaryDisabled: rest.scrollableSecondaryDisabled,
 		scrollPadding: rest.scrollPadding,
 		className: rest.className
 	});