@openzeppelin/ui-components 2.0.1 → 2.1.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.0.1";
+const VERSION = "2.1.0";
 
 //#endregion
 //#region src/components/ui/accordion.tsx
@@ -2042,7 +2042,8 @@ 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", showLastStepPrimary = true, className }) {
+	const showPrimary = !isLastStep || showLastStepPrimary;
 	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", {
@@ -2062,7 +2063,7 @@ function WizardNavigation({ isFirstStep, isLastStep, canProceed = true, onPrevio
 			})]
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: "flex gap-2",
-			children: [extraActions, /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Button, {
+			children: [extraActions, showPrimary && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Button, {
 				type: "button",
 				onClick: onNext,
 				disabled: !canProceed,
@@ -2298,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, hideLastStepPrimary, navActions, header, variant, className }) {
 	const safeIndex = getSafeStepIndex(steps.length, currentStepIndex);
 	const resolvedFurthestStepIndex = useFurthestStepIndex(safeIndex, furthestStepIndexProp);
 	if (steps.length === 0) return null;
@@ -2308,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);
@@ -2328,7 +2330,10 @@ function PagedLayout({ steps, currentStepIndex, furthestStepIndex: furthestStepI
 				onPrevious: handlePrevious,
 				onNext: handleNext,
 				onCancel,
-				extraActions: navActions
+				extraActions: navActions,
+				nextLabel,
+				lastStepLabel,
+				showLastStepPrimary: !hideLastStepPrimary
 			})
 		})
 	});
@@ -2378,7 +2383,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, scrollPadding, className }) {
 	const instanceId = (0, react.useId)();
 	const scrollRef = (0, react.useRef)(null);
 	const sectionId = (0, react.useCallback)((stepId) => `wizard-section-${instanceId}-${stepId}`, [instanceId]);
@@ -2417,12 +2422,12 @@ function ScrollableLayout({ steps, currentStepIndex, onStepChange, header, onCom
 						children: step.component
 					}, step.id))
 				}),
-				onComplete && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				onComplete && !hideScrollableCompleteButton && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					className: "flex justify-end pt-8",
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
 						type: "button",
 						onClick: onComplete,
-						children: "Finish"
+						children: scrollableCompleteLabel ?? "Finish"
 					})
 				})
 			]
@@ -2455,6 +2460,8 @@ function WizardLayout(props) {
 		onStepChange: rest.onStepChange,
 		header: rest.header,
 		onComplete: rest.onComplete,
+		hideScrollableCompleteButton: rest.hideScrollableCompleteButton,
+		scrollableCompleteLabel: rest.scrollableCompleteLabel,
 		scrollPadding: rest.scrollPadding,
 		className: rest.className
 	});