@form-engine-ts/react 4.2.0 → 4.3.1

package/README.md

@@ -168,8 +168,15 @@ state. Text controls forward schema `minLength`, `maxLength`, and `pattern` cons
 `renderCharacterCount` can replace the default count. Guard evaluation, confirmation, receipt persistence, and provider
 submission share an in-flight lock so rapid clicks cannot submit twice.
 
+Set `submissionConfirmation={{ enabled: true, renderMode: "replace" }}` to show a standard answer review before
+submission even when no submission guard is configured. The default `inline` mode keeps the form visible; `replace` and
+`dialog` provide alternate presentations. The standard review lists visible answers with their resolved labels and
+formatted display values. `renderSubmissionConfirmation` receives these as `visibleItems`; guard confirmations continue
+to receive their findings, while generic confirmations provide an empty findings array.
+
 The Builder basic-settings section edits source `title` and `description` through the same policy-aware action pipeline.
-Submission confirmation slots receive the effective message, localized schema, and visible answers. An `onSubmit` result
+Submission confirmation slots receive the effective message, localized schema, visible answers, and formatted
+`visibleItems`. An `onSubmit` result
 may provide `submissionId` and `submittedAt`, which Renderer copies into its receipt. Receipt stores support `getBatch`,
 and `useSubmissionReceipts` loads multiple form/version receipts for list and dashboard surfaces.
 

package/dist/index.cjs

@@ -3567,7 +3567,8 @@ function ContextFormRenderer({
   beforeSubmit,
   onDraftSave,
   successRenderMode = "append",
-  submissionConfirmationRenderMode = "inline",
+  submissionConfirmation,
+  submissionConfirmationRenderMode,
   showHiddenFieldsInSummary = false,
   fieldsClassName,
   hideFormOnSuccess = false,
@@ -3603,6 +3604,12 @@ function ContextFormRenderer({
   const activeVisibleIndex = visiblePageIndexes.indexOf(currentPageIndex);
   const fieldIds = activePage === void 0 ? void 0 : new Set(activePage.questionIds);
   const visibleValues = (0, import_react5.useMemo)(() => (0, import_core4.selectVisibleAnswers)(form.schema, form.values), [form.schema, form.values]);
+  const visibleItems = (0, import_react5.useMemo)(
+    () => buildSubmittedItems(form.schema, form.values, form.visibility, (key) => form.translate(key), false),
+    [form.schema, form.translate, form.values, form.visibility]
+  );
+  const confirmationRenderMode = submissionConfirmation?.renderMode ?? submissionConfirmationRenderMode ?? "inline";
+  const confirmationEnabled = submissionConfirmation?.enabled === true;
   const submitState = confirmation === null && !guardsPending ? form.submitStatus : "confirming";
   const interactionLocked = submitState === "confirming" || submitState === "submitting";
   const isReplaceMode = successRenderMode === "replace" || hideFormOnSuccess;
@@ -3670,7 +3677,7 @@ function ContextFormRenderer({
     if (confirmation === null) return;
     const confirmButton = confirmationRef.current?.querySelector("[data-fe-confirm], button");
     confirmButton?.focus();
-    if (submissionConfirmationRenderMode !== "dialog") return;
+    if (confirmationRenderMode !== "dialog") return;
     const onKeyDown = (event) => {
       if (event.key === "Escape") {
         event.preventDefault();
@@ -3697,7 +3704,7 @@ function ContextFormRenderer({
     };
     globalThis.addEventListener("keydown", onKeyDown);
     return () => globalThis.removeEventListener("keydown", onKeyDown);
-  }, [confirmation, focusSubmitButton, submissionConfirmationRenderMode]);
+  }, [confirmation, confirmationRenderMode, focusSubmitButton]);
   (0, import_react5.useEffect)(() => {
     if (autoSaveKey === void 0 || typeof globalThis.localStorage === "undefined") return;
     const loadIdentity = `${autoSaveKey}:${form.schema.id}:${form.schema.version}`;
@@ -3768,21 +3775,29 @@ function ContextFormRenderer({
     }
     const validation = (0, import_core4.validateAnswers)(form.schema, form.values);
     const firstInvalidFieldId = validation.issues[0]?.fieldId;
-    if (validation.valid && !guardsConfirmed && submissionGuards.length > 0) {
+    if (validation.valid && !guardsConfirmed) {
       rendererSubmissionInFlight.current = true;
-      setGuardsPending(true);
+      setGuardsPending(submissionGuards.length > 0);
       try {
-        const guardResult = await runSubmissionGuards(submissionGuards);
-        if (guardResult.status === "block") {
-          setGuardMessage(guardResult.message ?? form.translate("form.submissionBlocked"));
-          return { status: "cancelled" };
+        if (submissionGuards.length > 0) {
+          const guardResult = await runSubmissionGuards(submissionGuards);
+          if (guardResult.status === "block") {
+            setGuardMessage(guardResult.message ?? form.translate("form.submissionBlocked"));
+            return { status: "cancelled" };
+          }
+          if (guardResult.status === "confirm") {
+            setGuardMessage(null);
+            setConfirmation({
+              findings: guardResult.findings,
+              generic: false,
+              ...guardResult.message === void 0 ? {} : { message: guardResult.message }
+            });
+            return { status: "cancelled" };
+          }
         }
-        if (guardResult.status === "confirm") {
+        if (confirmationEnabled) {
           setGuardMessage(null);
-          setConfirmation({
-            findings: guardResult.findings,
-            ...guardResult.message === void 0 ? {} : { message: guardResult.message }
-          });
+          setConfirmation({ findings: [], generic: true });
           return { status: "cancelled" };
         }
       } finally {
@@ -3945,17 +3960,18 @@ function ContextFormRenderer({
     {
       ref: confirmationRef,
       className: "fe-submission-confirmation",
-      role: submissionConfirmationRenderMode === "dialog" ? void 0 : "dialog",
+      role: confirmationRenderMode === "dialog" ? void 0 : "dialog",
       children: slots.renderSubmissionConfirmation?.({
         findings: confirmation?.findings ?? [],
-        message: confirmation?.message ?? resolveMessage("confirmSensitiveDataMessage", form.translate("form.confirmSensitiveData")),
+        message: confirmation?.message ?? (confirmation?.generic === true ? form.locale.toLowerCase().startsWith("ja") ? "\u56DE\u7B54\u5185\u5BB9\u3092\u3054\u78BA\u8A8D\u306E\u3046\u3048\u3001\u9001\u4FE1\u3057\u3066\u304F\u3060\u3055\u3044\u3002" : "Please review your answers before submitting." : resolveMessage("confirmSensitiveDataMessage", form.translate("form.confirmSensitiveData"))),
         schema: form.schema,
         visibleValues,
+        visibleItems,
         onConfirm: confirmSubmission,
         onCancel: cancelSubmission
       }) ?? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h2", { children: resolveMessage("confirmSensitiveDataTitle") }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { children: confirmation?.message ?? resolveMessage("confirmSensitiveDataMessage", form.translate("form.confirmSensitiveData")) }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h2", { children: confirmation?.generic === true ? form.locale.toLowerCase().startsWith("ja") ? "\u56DE\u7B54\u5185\u5BB9\u306E\u78BA\u8A8D" : "Review your answers" : resolveMessage("confirmSensitiveDataTitle") }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { children: confirmation?.message ?? (confirmation?.generic === true ? form.locale.toLowerCase().startsWith("ja") ? "\u56DE\u7B54\u5185\u5BB9\u3092\u3054\u78BA\u8A8D\u306E\u3046\u3048\u3001\u9001\u4FE1\u3057\u3066\u304F\u3060\u3055\u3044\u3002" : "Please review your answers before submitting." : resolveMessage("confirmSensitiveDataMessage", form.translate("form.confirmSensitiveData"))) }),
         (confirmation?.findings ?? []).length === 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("ul", { children: (confirmation?.findings ?? []).map((finding, index) => {
           const field = form.schema.fields.find((candidate) => candidate.id === finding.fieldId);
           const typeLabels = form.locale.toLowerCase().startsWith("ja") ? { email: "\u30E1\u30FC\u30EB\u30A2\u30C9\u30EC\u30B9", phone: "\u96FB\u8A71\u756A\u53F7", url: "URL", postal_code: "\u90F5\u4FBF\u756A\u53F7" } : { email: "Email address", phone: "Phone number", url: "URL", postal_code: "Postal code" };
@@ -3971,6 +3987,11 @@ function ContextFormRenderer({
             ] })
           ] }, `${finding.fieldId}-${finding.type}-${finding.start ?? index}`);
         }) }),
+        confirmation?.generic === true ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("ul", { className: "fe-submission-summary", children: visibleItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("li", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: item.title }),
+          ": ",
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: item.displayValue })
+        ] }, item.fieldId)) }) : null,
         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "button", "data-fe-confirm": "true", onClick: confirmSubmission, children: resolveMessage("confirmButton", form.translate("form.confirmSubmission")) }),
         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "button", onClick: cancelSubmission, children: resolveMessage("cancelButton", form.translate("form.cancelSubmission")) })
       ] })
@@ -3990,7 +4011,7 @@ function ContextFormRenderer({
   if (form.submitStatus === "success" && isReplaceMode) {
     return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: `fe-form ${className}`.trim(), children: completionRegion });
   }
-  if (confirmation !== null && submissionConfirmationRenderMode === "replace") {
+  if (confirmation !== null && confirmationRenderMode === "replace") {
     return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: `fe-form ${className}`.trim(), children: confirmationContent });
   }
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
@@ -4001,7 +4022,7 @@ function ContextFormRenderer({
         className: `fe-form ${className}`.trim(),
         noValidate: true,
         onSubmit: handleSubmit,
-        "aria-hidden": confirmation !== null && submissionConfirmationRenderMode === "dialog" ? true : void 0,
+        "aria-hidden": confirmation !== null && confirmationRenderMode === "dialog" ? true : void 0,
         children: [
           slots.renderHeader?.({
             title: form.schema.title,
@@ -4070,7 +4091,7 @@ function ContextFormRenderer({
             return slots.renderFields?.({ children: fieldChildren, className: fieldClassName }) ?? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: fieldClassName, children: fieldChildren });
           })(),
           guardMessage === null ? null : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { role: "alert", children: guardMessage }),
-          confirmation !== null && submissionConfirmationRenderMode === "inline" ? confirmationContent : null,
+          confirmation !== null && confirmationRenderMode === "inline" ? confirmationContent : null,
           validationIssues.length === 0 ? null : slots.renderValidationSummary?.({ issues: validationIssues }) ?? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "fe-validation-summary", role: "alert", children: [
             validationIssues.length,
             " validation error",
@@ -4125,7 +4146,7 @@ function ContextFormRenderer({
         ]
       }
     ),
-    confirmation !== null && submissionConfirmationRenderMode === "dialog" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "fe-confirmation-dialog-backdrop", role: "dialog", "aria-modal": "true", children: confirmationContent }) : null
+    confirmation !== null && confirmationRenderMode === "dialog" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "fe-confirmation-dialog-backdrop", role: "dialog", "aria-modal": "true", children: confirmationContent }) : null
   ] });
 }
 var RENDERER_MESSAGES = {

package/dist/index.d.cts

@@ -478,6 +478,10 @@ type SubmissionGuardResult = {
 type SubmissionGuard = (schema: FormSchema, values: Record<string, unknown>) => SubmissionGuardResult | Promise<SubmissionGuardResult>;
 type FormSuccessRenderMode = "append" | "replace";
 type SubmissionConfirmationRenderMode = "inline" | "replace" | "dialog";
+interface SubmissionConfirmationOptions {
+    readonly enabled?: boolean;
+    readonly renderMode?: SubmissionConfirmationRenderMode;
+}
 type FormSubmitStatus = "idle" | "submitting" | "confirming" | "success" | "error";
 /** @deprecated Use FormSubmitStatus instead. */
 type FormSubmitState = "idle" | "submitting" | "confirming" | "success" | "error";
@@ -488,10 +492,11 @@ interface RenderSubmitButtonProps {
     readonly onSubmit: () => void;
 }
 interface SubmissionConfirmationSlotProps {
-    readonly findings: readonly SensitiveDataFinding[];
+    readonly findings?: readonly SensitiveDataFinding[];
     readonly message?: string;
     readonly schema: FormSchema;
     readonly visibleValues: Record<string, unknown>;
+    readonly visibleItems?: readonly FormSubmittedAnswerItem[];
     readonly onConfirm: () => void;
     readonly onCancel: () => void;
 }
@@ -671,6 +676,8 @@ interface FormRendererPresentationProps extends SubmissionProtectionProps {
      * Defaults to "append" for backwards compatibility.
      */
     readonly successRenderMode?: FormSuccessRenderMode;
+    readonly submissionConfirmation?: SubmissionConfirmationOptions;
+    /** @deprecated Use submissionConfirmation.renderMode instead. */
     readonly submissionConfirmationRenderMode?: SubmissionConfirmationRenderMode;
     readonly showHiddenFieldsInSummary?: boolean;
     readonly fieldsClassName?: string;
@@ -697,4 +704,4 @@ interface StandaloneFormRendererProps extends FormRendererPresentationProps {
 type FormRendererProps = FormRendererPresentationProps | StandaloneFormRendererProps;
 declare function FormRenderer(props: FormRendererProps): react.JSX.Element;
 
-export { BUILDER_TRANSLATION_ALIASES, BUILDER_TRANSLATION_KEYS, type BeforeSubmit, type BuilderActionContext, type BuilderActionError, type BuilderActionIconType, type BuilderActionResult, type BuilderButtonProps, type BuilderCheckboxProps, type BuilderErrorMessageProps, type BuilderFactories, type BuilderFieldEditorSlotProps, type BuilderFieldsetProps, type BuilderIconButtonProps, type BuilderIdKind, type BuilderLocalizationSlotProps, type BuilderOptionEditorSlotProps, type BuilderPagesSlotProps, type BuilderPolicy, type BuilderSectionProps, type BuilderSelectOption, type BuilderSelectProps, type BuilderSlotActions, type BuilderTextAreaProps, type BuilderTextInputProps, type BuilderTextTarget, type BuilderToolbarSlotProps, type BuilderTranslationActionsSlotProps, type BuilderTranslationKey, type ComponentBaseProps, type FieldComponentProps, type FieldComponents, type FieldEditorControlsConfig, type FieldEditorHeaderSlotProps, type FieldPropertyControlMode, type FieldState, type FieldTypeSelectOptionsConfig, type FieldTypeSelectOptionsContext, type FieldTypeSelectOptionsSorter, type FieldTypeSelectOptionsTransformer, type FieldTypeSelectSlotProps, FormBuilder, type FormBuilderActions, type FormBuilderComponents, type FormBuilderFeatures, type FormBuilderOptions, type FormBuilderProps, type FormBuilderResult, type FormBuilderSectionName, type FormBuilderSlots, type FormCompletionSlotProps, type FormContextValue, type FormFieldsSlotProps, FormProvider, type FormProviderProps, FormRenderer, type FormRendererMessages, type FormRendererPresentationProps, type FormRendererProps, type FormRendererSlots, type FormServerErrorPayload, FormSubmissionError, type FormSubmitHandler, type FormSubmitState, type FormSubmitStatus, type FormSubmittedAnswerItem, type FormSuccessRenderMode, type IconButtonProps, type InputComponentProps, type LocalizationSummaryContext, type ManualTranslationContext, type ManualTranslationTarget, type RenderSubmitButtonProps, type SelectComponentProps, type StandaloneFormRendererProps, type SubmissionAttempt, type SubmissionAttemptStore, type SubmissionConfirmationRenderMode, type SubmissionConfirmationSlotProps, type SubmissionGuard, type SubmissionGuardResult, type SubmissionProtectionProps, type SubmissionReceipt, type SubmissionReceiptQuery, type SubmissionReceiptStore, type SubmitContext, type SubmitResponse, type SubmitResult, type SubmitStatus, type UseSubmissionReceiptsResult, createLocalStorageSubmissionAttemptStore, createLocalStorageSubmissionReceiptStore, isTranslationUnresolved, resolveFieldEditorControls, resolveFieldTypeSelectOptions, resolveInitialFieldType, resolveTranslation, submissionReceiptQueryKey, useField, useForm, useFormBuilder, useSubmissionReceipts };
+export { BUILDER_TRANSLATION_ALIASES, BUILDER_TRANSLATION_KEYS, type BeforeSubmit, type BuilderActionContext, type BuilderActionError, type BuilderActionIconType, type BuilderActionResult, type BuilderButtonProps, type BuilderCheckboxProps, type BuilderErrorMessageProps, type BuilderFactories, type BuilderFieldEditorSlotProps, type BuilderFieldsetProps, type BuilderIconButtonProps, type BuilderIdKind, type BuilderLocalizationSlotProps, type BuilderOptionEditorSlotProps, type BuilderPagesSlotProps, type BuilderPolicy, type BuilderSectionProps, type BuilderSelectOption, type BuilderSelectProps, type BuilderSlotActions, type BuilderTextAreaProps, type BuilderTextInputProps, type BuilderTextTarget, type BuilderToolbarSlotProps, type BuilderTranslationActionsSlotProps, type BuilderTranslationKey, type ComponentBaseProps, type FieldComponentProps, type FieldComponents, type FieldEditorControlsConfig, type FieldEditorHeaderSlotProps, type FieldPropertyControlMode, type FieldState, type FieldTypeSelectOptionsConfig, type FieldTypeSelectOptionsContext, type FieldTypeSelectOptionsSorter, type FieldTypeSelectOptionsTransformer, type FieldTypeSelectSlotProps, FormBuilder, type FormBuilderActions, type FormBuilderComponents, type FormBuilderFeatures, type FormBuilderOptions, type FormBuilderProps, type FormBuilderResult, type FormBuilderSectionName, type FormBuilderSlots, type FormCompletionSlotProps, type FormContextValue, type FormFieldsSlotProps, FormProvider, type FormProviderProps, FormRenderer, type FormRendererMessages, type FormRendererPresentationProps, type FormRendererProps, type FormRendererSlots, type FormServerErrorPayload, FormSubmissionError, type FormSubmitHandler, type FormSubmitState, type FormSubmitStatus, type FormSubmittedAnswerItem, type FormSuccessRenderMode, type IconButtonProps, type InputComponentProps, type LocalizationSummaryContext, type ManualTranslationContext, type ManualTranslationTarget, type RenderSubmitButtonProps, type SelectComponentProps, type StandaloneFormRendererProps, type SubmissionAttempt, type SubmissionAttemptStore, type SubmissionConfirmationOptions, type SubmissionConfirmationRenderMode, type SubmissionConfirmationSlotProps, type SubmissionGuard, type SubmissionGuardResult, type SubmissionProtectionProps, type SubmissionReceipt, type SubmissionReceiptQuery, type SubmissionReceiptStore, type SubmitContext, type SubmitResponse, type SubmitResult, type SubmitStatus, type UseSubmissionReceiptsResult, createLocalStorageSubmissionAttemptStore, createLocalStorageSubmissionReceiptStore, isTranslationUnresolved, resolveFieldEditorControls, resolveFieldTypeSelectOptions, resolveInitialFieldType, resolveTranslation, submissionReceiptQueryKey, useField, useForm, useFormBuilder, useSubmissionReceipts };

package/dist/index.d.ts

@@ -478,6 +478,10 @@ type SubmissionGuardResult = {
 type SubmissionGuard = (schema: FormSchema, values: Record<string, unknown>) => SubmissionGuardResult | Promise<SubmissionGuardResult>;
 type FormSuccessRenderMode = "append" | "replace";
 type SubmissionConfirmationRenderMode = "inline" | "replace" | "dialog";
+interface SubmissionConfirmationOptions {
+    readonly enabled?: boolean;
+    readonly renderMode?: SubmissionConfirmationRenderMode;
+}
 type FormSubmitStatus = "idle" | "submitting" | "confirming" | "success" | "error";
 /** @deprecated Use FormSubmitStatus instead. */
 type FormSubmitState = "idle" | "submitting" | "confirming" | "success" | "error";
@@ -488,10 +492,11 @@ interface RenderSubmitButtonProps {
     readonly onSubmit: () => void;
 }
 interface SubmissionConfirmationSlotProps {
-    readonly findings: readonly SensitiveDataFinding[];
+    readonly findings?: readonly SensitiveDataFinding[];
     readonly message?: string;
     readonly schema: FormSchema;
     readonly visibleValues: Record<string, unknown>;
+    readonly visibleItems?: readonly FormSubmittedAnswerItem[];
     readonly onConfirm: () => void;
     readonly onCancel: () => void;
 }
@@ -671,6 +676,8 @@ interface FormRendererPresentationProps extends SubmissionProtectionProps {
      * Defaults to "append" for backwards compatibility.
      */
     readonly successRenderMode?: FormSuccessRenderMode;
+    readonly submissionConfirmation?: SubmissionConfirmationOptions;
+    /** @deprecated Use submissionConfirmation.renderMode instead. */
     readonly submissionConfirmationRenderMode?: SubmissionConfirmationRenderMode;
     readonly showHiddenFieldsInSummary?: boolean;
     readonly fieldsClassName?: string;
@@ -697,4 +704,4 @@ interface StandaloneFormRendererProps extends FormRendererPresentationProps {
 type FormRendererProps = FormRendererPresentationProps | StandaloneFormRendererProps;
 declare function FormRenderer(props: FormRendererProps): react.JSX.Element;
 
-export { BUILDER_TRANSLATION_ALIASES, BUILDER_TRANSLATION_KEYS, type BeforeSubmit, type BuilderActionContext, type BuilderActionError, type BuilderActionIconType, type BuilderActionResult, type BuilderButtonProps, type BuilderCheckboxProps, type BuilderErrorMessageProps, type BuilderFactories, type BuilderFieldEditorSlotProps, type BuilderFieldsetProps, type BuilderIconButtonProps, type BuilderIdKind, type BuilderLocalizationSlotProps, type BuilderOptionEditorSlotProps, type BuilderPagesSlotProps, type BuilderPolicy, type BuilderSectionProps, type BuilderSelectOption, type BuilderSelectProps, type BuilderSlotActions, type BuilderTextAreaProps, type BuilderTextInputProps, type BuilderTextTarget, type BuilderToolbarSlotProps, type BuilderTranslationActionsSlotProps, type BuilderTranslationKey, type ComponentBaseProps, type FieldComponentProps, type FieldComponents, type FieldEditorControlsConfig, type FieldEditorHeaderSlotProps, type FieldPropertyControlMode, type FieldState, type FieldTypeSelectOptionsConfig, type FieldTypeSelectOptionsContext, type FieldTypeSelectOptionsSorter, type FieldTypeSelectOptionsTransformer, type FieldTypeSelectSlotProps, FormBuilder, type FormBuilderActions, type FormBuilderComponents, type FormBuilderFeatures, type FormBuilderOptions, type FormBuilderProps, type FormBuilderResult, type FormBuilderSectionName, type FormBuilderSlots, type FormCompletionSlotProps, type FormContextValue, type FormFieldsSlotProps, FormProvider, type FormProviderProps, FormRenderer, type FormRendererMessages, type FormRendererPresentationProps, type FormRendererProps, type FormRendererSlots, type FormServerErrorPayload, FormSubmissionError, type FormSubmitHandler, type FormSubmitState, type FormSubmitStatus, type FormSubmittedAnswerItem, type FormSuccessRenderMode, type IconButtonProps, type InputComponentProps, type LocalizationSummaryContext, type ManualTranslationContext, type ManualTranslationTarget, type RenderSubmitButtonProps, type SelectComponentProps, type StandaloneFormRendererProps, type SubmissionAttempt, type SubmissionAttemptStore, type SubmissionConfirmationRenderMode, type SubmissionConfirmationSlotProps, type SubmissionGuard, type SubmissionGuardResult, type SubmissionProtectionProps, type SubmissionReceipt, type SubmissionReceiptQuery, type SubmissionReceiptStore, type SubmitContext, type SubmitResponse, type SubmitResult, type SubmitStatus, type UseSubmissionReceiptsResult, createLocalStorageSubmissionAttemptStore, createLocalStorageSubmissionReceiptStore, isTranslationUnresolved, resolveFieldEditorControls, resolveFieldTypeSelectOptions, resolveInitialFieldType, resolveTranslation, submissionReceiptQueryKey, useField, useForm, useFormBuilder, useSubmissionReceipts };
+export { BUILDER_TRANSLATION_ALIASES, BUILDER_TRANSLATION_KEYS, type BeforeSubmit, type BuilderActionContext, type BuilderActionError, type BuilderActionIconType, type BuilderActionResult, type BuilderButtonProps, type BuilderCheckboxProps, type BuilderErrorMessageProps, type BuilderFactories, type BuilderFieldEditorSlotProps, type BuilderFieldsetProps, type BuilderIconButtonProps, type BuilderIdKind, type BuilderLocalizationSlotProps, type BuilderOptionEditorSlotProps, type BuilderPagesSlotProps, type BuilderPolicy, type BuilderSectionProps, type BuilderSelectOption, type BuilderSelectProps, type BuilderSlotActions, type BuilderTextAreaProps, type BuilderTextInputProps, type BuilderTextTarget, type BuilderToolbarSlotProps, type BuilderTranslationActionsSlotProps, type BuilderTranslationKey, type ComponentBaseProps, type FieldComponentProps, type FieldComponents, type FieldEditorControlsConfig, type FieldEditorHeaderSlotProps, type FieldPropertyControlMode, type FieldState, type FieldTypeSelectOptionsConfig, type FieldTypeSelectOptionsContext, type FieldTypeSelectOptionsSorter, type FieldTypeSelectOptionsTransformer, type FieldTypeSelectSlotProps, FormBuilder, type FormBuilderActions, type FormBuilderComponents, type FormBuilderFeatures, type FormBuilderOptions, type FormBuilderProps, type FormBuilderResult, type FormBuilderSectionName, type FormBuilderSlots, type FormCompletionSlotProps, type FormContextValue, type FormFieldsSlotProps, FormProvider, type FormProviderProps, FormRenderer, type FormRendererMessages, type FormRendererPresentationProps, type FormRendererProps, type FormRendererSlots, type FormServerErrorPayload, FormSubmissionError, type FormSubmitHandler, type FormSubmitState, type FormSubmitStatus, type FormSubmittedAnswerItem, type FormSuccessRenderMode, type IconButtonProps, type InputComponentProps, type LocalizationSummaryContext, type ManualTranslationContext, type ManualTranslationTarget, type RenderSubmitButtonProps, type SelectComponentProps, type StandaloneFormRendererProps, type SubmissionAttempt, type SubmissionAttemptStore, type SubmissionConfirmationOptions, type SubmissionConfirmationRenderMode, type SubmissionConfirmationSlotProps, type SubmissionGuard, type SubmissionGuardResult, type SubmissionProtectionProps, type SubmissionReceipt, type SubmissionReceiptQuery, type SubmissionReceiptStore, type SubmitContext, type SubmitResponse, type SubmitResult, type SubmitStatus, type UseSubmissionReceiptsResult, createLocalStorageSubmissionAttemptStore, createLocalStorageSubmissionReceiptStore, isTranslationUnresolved, resolveFieldEditorControls, resolveFieldTypeSelectOptions, resolveInitialFieldType, resolveTranslation, submissionReceiptQueryKey, useField, useForm, useFormBuilder, useSubmissionReceipts };

package/dist/index.js

@@ -3550,7 +3550,8 @@ function ContextFormRenderer({
   beforeSubmit,
   onDraftSave,
   successRenderMode = "append",
-  submissionConfirmationRenderMode = "inline",
+  submissionConfirmation,
+  submissionConfirmationRenderMode,
   showHiddenFieldsInSummary = false,
   fieldsClassName,
   hideFormOnSuccess = false,
@@ -3586,6 +3587,12 @@ function ContextFormRenderer({
   const activeVisibleIndex = visiblePageIndexes.indexOf(currentPageIndex);
   const fieldIds = activePage === void 0 ? void 0 : new Set(activePage.questionIds);
   const visibleValues = useMemo4(() => selectVisibleAnswers2(form.schema, form.values), [form.schema, form.values]);
+  const visibleItems = useMemo4(
+    () => buildSubmittedItems(form.schema, form.values, form.visibility, (key) => form.translate(key), false),
+    [form.schema, form.translate, form.values, form.visibility]
+  );
+  const confirmationRenderMode = submissionConfirmation?.renderMode ?? submissionConfirmationRenderMode ?? "inline";
+  const confirmationEnabled = submissionConfirmation?.enabled === true;
   const submitState = confirmation === null && !guardsPending ? form.submitStatus : "confirming";
   const interactionLocked = submitState === "confirming" || submitState === "submitting";
   const isReplaceMode = successRenderMode === "replace" || hideFormOnSuccess;
@@ -3653,7 +3660,7 @@ function ContextFormRenderer({
     if (confirmation === null) return;
     const confirmButton = confirmationRef.current?.querySelector("[data-fe-confirm], button");
     confirmButton?.focus();
-    if (submissionConfirmationRenderMode !== "dialog") return;
+    if (confirmationRenderMode !== "dialog") return;
     const onKeyDown = (event) => {
       if (event.key === "Escape") {
         event.preventDefault();
@@ -3680,7 +3687,7 @@ function ContextFormRenderer({
     };
     globalThis.addEventListener("keydown", onKeyDown);
     return () => globalThis.removeEventListener("keydown", onKeyDown);
-  }, [confirmation, focusSubmitButton, submissionConfirmationRenderMode]);
+  }, [confirmation, confirmationRenderMode, focusSubmitButton]);
   useEffect3(() => {
     if (autoSaveKey === void 0 || typeof globalThis.localStorage === "undefined") return;
     const loadIdentity = `${autoSaveKey}:${form.schema.id}:${form.schema.version}`;
@@ -3751,21 +3758,29 @@ function ContextFormRenderer({
     }
     const validation = validateAnswers2(form.schema, form.values);
     const firstInvalidFieldId = validation.issues[0]?.fieldId;
-    if (validation.valid && !guardsConfirmed && submissionGuards.length > 0) {
+    if (validation.valid && !guardsConfirmed) {
       rendererSubmissionInFlight.current = true;
-      setGuardsPending(true);
+      setGuardsPending(submissionGuards.length > 0);
       try {
-        const guardResult = await runSubmissionGuards(submissionGuards);
-        if (guardResult.status === "block") {
-          setGuardMessage(guardResult.message ?? form.translate("form.submissionBlocked"));
-          return { status: "cancelled" };
+        if (submissionGuards.length > 0) {
+          const guardResult = await runSubmissionGuards(submissionGuards);
+          if (guardResult.status === "block") {
+            setGuardMessage(guardResult.message ?? form.translate("form.submissionBlocked"));
+            return { status: "cancelled" };
+          }
+          if (guardResult.status === "confirm") {
+            setGuardMessage(null);
+            setConfirmation({
+              findings: guardResult.findings,
+              generic: false,
+              ...guardResult.message === void 0 ? {} : { message: guardResult.message }
+            });
+            return { status: "cancelled" };
+          }
         }
-        if (guardResult.status === "confirm") {
+        if (confirmationEnabled) {
           setGuardMessage(null);
-          setConfirmation({
-            findings: guardResult.findings,
-            ...guardResult.message === void 0 ? {} : { message: guardResult.message }
-          });
+          setConfirmation({ findings: [], generic: true });
           return { status: "cancelled" };
         }
       } finally {
@@ -3928,17 +3943,18 @@ function ContextFormRenderer({
     {
       ref: confirmationRef,
       className: "fe-submission-confirmation",
-      role: submissionConfirmationRenderMode === "dialog" ? void 0 : "dialog",
+      role: confirmationRenderMode === "dialog" ? void 0 : "dialog",
       children: slots.renderSubmissionConfirmation?.({
         findings: confirmation?.findings ?? [],
-        message: confirmation?.message ?? resolveMessage("confirmSensitiveDataMessage", form.translate("form.confirmSensitiveData")),
+        message: confirmation?.message ?? (confirmation?.generic === true ? form.locale.toLowerCase().startsWith("ja") ? "\u56DE\u7B54\u5185\u5BB9\u3092\u3054\u78BA\u8A8D\u306E\u3046\u3048\u3001\u9001\u4FE1\u3057\u3066\u304F\u3060\u3055\u3044\u3002" : "Please review your answers before submitting." : resolveMessage("confirmSensitiveDataMessage", form.translate("form.confirmSensitiveData"))),
         schema: form.schema,
         visibleValues,
+        visibleItems,
         onConfirm: confirmSubmission,
         onCancel: cancelSubmission
       }) ?? /* @__PURE__ */ jsxs2(Fragment3, { children: [
-        /* @__PURE__ */ jsx3("h2", { children: resolveMessage("confirmSensitiveDataTitle") }),
-        /* @__PURE__ */ jsx3("p", { children: confirmation?.message ?? resolveMessage("confirmSensitiveDataMessage", form.translate("form.confirmSensitiveData")) }),
+        /* @__PURE__ */ jsx3("h2", { children: confirmation?.generic === true ? form.locale.toLowerCase().startsWith("ja") ? "\u56DE\u7B54\u5185\u5BB9\u306E\u78BA\u8A8D" : "Review your answers" : resolveMessage("confirmSensitiveDataTitle") }),
+        /* @__PURE__ */ jsx3("p", { children: confirmation?.message ?? (confirmation?.generic === true ? form.locale.toLowerCase().startsWith("ja") ? "\u56DE\u7B54\u5185\u5BB9\u3092\u3054\u78BA\u8A8D\u306E\u3046\u3048\u3001\u9001\u4FE1\u3057\u3066\u304F\u3060\u3055\u3044\u3002" : "Please review your answers before submitting." : resolveMessage("confirmSensitiveDataMessage", form.translate("form.confirmSensitiveData"))) }),
         (confirmation?.findings ?? []).length === 0 ? null : /* @__PURE__ */ jsx3("ul", { children: (confirmation?.findings ?? []).map((finding, index) => {
           const field = form.schema.fields.find((candidate) => candidate.id === finding.fieldId);
           const typeLabels = form.locale.toLowerCase().startsWith("ja") ? { email: "\u30E1\u30FC\u30EB\u30A2\u30C9\u30EC\u30B9", phone: "\u96FB\u8A71\u756A\u53F7", url: "URL", postal_code: "\u90F5\u4FBF\u756A\u53F7" } : { email: "Email address", phone: "Phone number", url: "URL", postal_code: "Postal code" };
@@ -3954,6 +3970,11 @@ function ContextFormRenderer({
             ] })
           ] }, `${finding.fieldId}-${finding.type}-${finding.start ?? index}`);
         }) }),
+        confirmation?.generic === true ? /* @__PURE__ */ jsx3("ul", { className: "fe-submission-summary", children: visibleItems.map((item) => /* @__PURE__ */ jsxs2("li", { children: [
+          /* @__PURE__ */ jsx3("span", { children: item.title }),
+          ": ",
+          /* @__PURE__ */ jsx3("span", { children: item.displayValue })
+        ] }, item.fieldId)) }) : null,
         /* @__PURE__ */ jsx3("button", { type: "button", "data-fe-confirm": "true", onClick: confirmSubmission, children: resolveMessage("confirmButton", form.translate("form.confirmSubmission")) }),
         /* @__PURE__ */ jsx3("button", { type: "button", onClick: cancelSubmission, children: resolveMessage("cancelButton", form.translate("form.cancelSubmission")) })
       ] })
@@ -3973,7 +3994,7 @@ function ContextFormRenderer({
   if (form.submitStatus === "success" && isReplaceMode) {
     return /* @__PURE__ */ jsx3("div", { className: `fe-form ${className}`.trim(), children: completionRegion });
   }
-  if (confirmation !== null && submissionConfirmationRenderMode === "replace") {
+  if (confirmation !== null && confirmationRenderMode === "replace") {
     return /* @__PURE__ */ jsx3("div", { className: `fe-form ${className}`.trim(), children: confirmationContent });
   }
   return /* @__PURE__ */ jsxs2(Fragment3, { children: [
@@ -3984,7 +4005,7 @@ function ContextFormRenderer({
         className: `fe-form ${className}`.trim(),
         noValidate: true,
         onSubmit: handleSubmit,
-        "aria-hidden": confirmation !== null && submissionConfirmationRenderMode === "dialog" ? true : void 0,
+        "aria-hidden": confirmation !== null && confirmationRenderMode === "dialog" ? true : void 0,
         children: [
           slots.renderHeader?.({
             title: form.schema.title,
@@ -4053,7 +4074,7 @@ function ContextFormRenderer({
             return slots.renderFields?.({ children: fieldChildren, className: fieldClassName }) ?? /* @__PURE__ */ jsx3("div", { className: fieldClassName, children: fieldChildren });
           })(),
           guardMessage === null ? null : /* @__PURE__ */ jsx3("div", { role: "alert", children: guardMessage }),
-          confirmation !== null && submissionConfirmationRenderMode === "inline" ? confirmationContent : null,
+          confirmation !== null && confirmationRenderMode === "inline" ? confirmationContent : null,
           validationIssues.length === 0 ? null : slots.renderValidationSummary?.({ issues: validationIssues }) ?? /* @__PURE__ */ jsxs2("div", { className: "fe-validation-summary", role: "alert", children: [
             validationIssues.length,
             " validation error",
@@ -4108,7 +4129,7 @@ function ContextFormRenderer({
         ]
       }
     ),
-    confirmation !== null && submissionConfirmationRenderMode === "dialog" ? /* @__PURE__ */ jsx3("div", { className: "fe-confirmation-dialog-backdrop", role: "dialog", "aria-modal": "true", children: confirmationContent }) : null
+    confirmation !== null && confirmationRenderMode === "dialog" ? /* @__PURE__ */ jsx3("div", { className: "fe-confirmation-dialog-backdrop", role: "dialog", "aria-modal": "true", children: confirmationContent }) : null
   ] });
 }
 var RENDERER_MESSAGES = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@form-engine-ts/react",
-  "version": "4.2.0",
+  "version": "4.3.1",
   "publishConfig": {
     "access": "public"
   },
@@ -42,8 +42,8 @@
     "typescript"
   ],
   "dependencies": {
-    "@form-engine-ts/core": "4.2.0",
-    "@form-engine-ts/privacy": "4.2.0"
+    "@form-engine-ts/core": "4.3.1",
+    "@form-engine-ts/privacy": "4.3.1"
   },
   "peerDependencies": {
     "react": ">=18.2 <20",