@openzeppelin/ui-components 2.0.1 → 2.2.0

package/dist/index.mjs

@@ -26,7 +26,7 @@ import { Toaster as Toaster$1, toast } from "sonner";
 import { useTheme } from "next-themes";
 
 //#region src/version.ts
-const VERSION = "2.0.1";
+const VERSION = "2.2.0";
 
 //#endregion
 //#region src/components/ui/accordion.tsx
@@ -2030,7 +2030,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", 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__ */ jsxs("div", {
 		className: cn("flex items-center justify-between", className),
 		children: [/* @__PURE__ */ jsxs("div", {
@@ -2050,13 +2052,24 @@ function WizardNavigation({ isFirstStep, isLastStep, canProceed = true, onPrevio
 			})]
 		}), /* @__PURE__ */ jsxs("div", {
 			className: "flex gap-2",
-			children: [extraActions, /* @__PURE__ */ jsxs(Button, {
-				type: "button",
-				onClick: onNext,
-				disabled: !canProceed,
-				className: "gap-2",
-				children: [isLastStep ? lastStepLabel : nextLabel, !isLastStep && /* @__PURE__ */ jsx(ChevronRight, { className: "size-4" })]
-			})]
+			children: [
+				extraActions,
+				showSecondary && /* @__PURE__ */ jsx(Button, {
+					type: "button",
+					variant: "outline",
+					onClick: onLastStepSecondary,
+					disabled: lastStepSecondaryDisabled ?? false,
+					className: "gap-2",
+					children: lastStepSecondaryLabel
+				}),
+				showPrimary && /* @__PURE__ */ jsxs(Button, {
+					type: "button",
+					onClick: onNext,
+					disabled: !canProceed,
+					className: "gap-2",
+					children: [isLastStep ? lastStepLabel : nextLabel, !isLastStep && /* @__PURE__ */ jsx(ChevronRight, { className: "size-4" })]
+				})
+			]
 		})]
 	});
 }
@@ -2286,7 +2299,7 @@ function isScrollableNavigationKey(event) {
 
 //#endregion
 //#region src/components/ui/wizard/WizardLayout.tsx
-function PagedLayout({ steps, currentStepIndex, furthestStepIndex: furthestStepIndexProp, onStepChange, onComplete, onCancel, 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;
@@ -2296,7 +2309,8 @@ function PagedLayout({ steps, currentStepIndex, furthestStepIndex: furthestStepI
 	const canProceed = currentStep?.isValid !== false;
 	const handleNext = () => {
 		if (isLastStep) {
-			onComplete?.();
+			if (onLastStepPrimary) onLastStepPrimary();
+			else onComplete?.();
 			return;
 		}
 		onStepChange(safeIndex + 1);
@@ -2316,7 +2330,13 @@ function PagedLayout({ steps, currentStepIndex, furthestStepIndex: furthestStepI
 				onPrevious: handlePrevious,
 				onNext: handleNext,
 				onCancel,
-				extraActions: navActions
+				extraActions: navActions,
+				nextLabel,
+				lastStepLabel,
+				onLastStepSecondary,
+				lastStepSecondaryLabel,
+				lastStepSecondaryDisabled,
+				showLastStepPrimary: !hideLastStepPrimary
 			})
 		})
 	});
@@ -2366,7 +2386,7 @@ function PagedLayout({ steps, currentStepIndex, furthestStepIndex: furthestStepI
 		})]
 	});
 }
-function ScrollableLayout({ steps, currentStepIndex, onStepChange, header, onComplete, scrollPadding, className }) {
+function ScrollableLayout({ steps, currentStepIndex, onStepChange, header, onComplete, hideScrollableCompleteButton, scrollableCompleteLabel, onScrollableSecondary, scrollableSecondaryLabel, scrollableSecondaryDisabled, scrollPadding, className }) {
 	const instanceId = useId();
 	const scrollRef = useRef(null);
 	const sectionId = useCallback((stepId) => `wizard-section-${instanceId}-${stepId}`, [instanceId]);
@@ -2380,6 +2400,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__ */ jsxs("div", {
 		className: cn("flex h-full gap-6", className),
 		children: [/* @__PURE__ */ jsx("div", {
@@ -2405,13 +2428,19 @@ function ScrollableLayout({ steps, currentStepIndex, onStepChange, header, onCom
 						children: step.component
 					}, step.id))
 				}),
-				onComplete && /* @__PURE__ */ jsx("div", {
-					className: "flex justify-end pt-8",
-					children: /* @__PURE__ */ jsx(Button, {
+				showScrollableFooter && /* @__PURE__ */ jsxs("div", {
+					className: "flex justify-end gap-2 pt-8",
+					children: [showScrollableSecondary && /* @__PURE__ */ jsx(Button, {
+						type: "button",
+						variant: "outline",
+						onClick: onScrollableSecondary,
+						disabled: scrollableSecondaryDisabled ?? false,
+						children: scrollableSecondaryLabel
+					}), showScrollablePrimary && /* @__PURE__ */ jsx(Button, {
 						type: "button",
 						onClick: onComplete,
-						children: "Finish"
-					})
+						children: scrollableCompleteLabel ?? "Finish"
+					})]
 				})
 			]
 		})]
@@ -2443,6 +2472,11 @@ function WizardLayout(props) {
 		onStepChange: rest.onStepChange,
 		header: rest.header,
 		onComplete: rest.onComplete,
+		hideScrollableCompleteButton: rest.hideScrollableCompleteButton,
+		scrollableCompleteLabel: rest.scrollableCompleteLabel,
+		onScrollableSecondary: rest.onScrollableSecondary,
+		scrollableSecondaryLabel: rest.scrollableSecondaryLabel,
+		scrollableSecondaryDisabled: rest.scrollableSecondaryDisabled,
 		scrollPadding: rest.scrollPadding,
 		className: rest.className
 	});