@genesislcap/foundation-forms 14.496.2-alpha-da9ccbd.0 → 14.497.0

package/dist/dts/review.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"review.d.ts","sourceRoot":"","sources":["../../src/review.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,WAAW,EAAwB,MAAM,yBAAyB,CAAC;AAGjG,OAAO,EAAwB,KAAK,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAEhF;;;;GAIG;AACH,qBAMa,MAAO,SAAQ,WAAW;IACQ,MAAM,EAAE,MAAM,CAAW;IAEtE;;;OAGG;IACG,OAAO,EAAE,MAAM,CAAY;IAEjC;;;OAGG;IAC+B,QAAQ,EAAE,MAAM,CAAC;IAEnD;;;OAGG;IACS,QAAQ,EAAE,aAAa,EAAE,CAAM;IAE3C;;;;OAIG;IACS,UAAU,EAAE,MAAM,CAAM;IAEpC,gBAAgB;IAChB,IACI,gBAAgB,IAAI,aAAa,EAAE,CAEtC;CACF"}

package/dist/dts/review.styles.d.ts

@@ -0,0 +1,3 @@
+/** @internal */
+export declare const foundationFormReviewStyles: import("@microsoft/fast-element").ElementStyles;
+//# sourceMappingURL=review.styles.d.ts.map

package/dist/dts/review.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"review.styles.d.ts","sourceRoot":"","sources":["../../src/review.styles.ts"],"names":[],"mappings":"AAKA,gBAAgB;AAChB,eAAO,MAAM,0BAA0B,iDAyFtC,CAAC"}

package/dist/dts/review.template.d.ts

@@ -0,0 +1,6 @@
+import type { Review } from './review';
+/** @internal */
+export declare const getPrefixedReview: (prefix: any) => import("@microsoft/fast-element").ViewTemplate<Review, any>;
+/** @internal */
+export declare const foundationFormReviewTemplate: import("@microsoft/fast-element").ViewTemplate<Review, any>;
+//# sourceMappingURL=review.template.d.ts.map

package/dist/dts/review.template.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"review.template.d.ts","sourceRoot":"","sources":["../../src/review.template.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAGvC,gBAAgB;AAChB,eAAO,MAAM,iBAAiB,GAAI,WAAM,gEA2CvC,CAAC;AAEF,gBAAgB;AAChB,eAAO,MAAM,4BAA4B,6DAExC,CAAC"}

package/dist/dts/utils/index.d.ts

@@ -1,4 +1,5 @@
 export * from './csv-parser';
+export * from './review-utils';
 export * from './filters';
 export * from './logger';
 export * from './translation';

package/dist/dts/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC"}

package/dist/dts/utils/review-utils.d.ts

@@ -0,0 +1,82 @@
+/** @public */
+export type ReviewField = {
+    label: string;
+    value: string;
+};
+/** @public */
+export type ReviewSection = {
+    title: string | null;
+    fields: ReviewField[];
+};
+/**
+ * Builds the review panel's fields grouped into sections by their nearest `Group` layout.
+ * Sections are formed from consecutive runs of the same group title as fields are
+ * encountered in the UI schema — not a global title lookup — so two fields that happen to
+ * share a title (including `null`, for ungrouped fields) don't get merged into one section
+ * unless they're actually adjacent. Otherwise an ungrouped field appearing after a Group
+ * would jump back up next to earlier ungrouped fields instead of staying where it sits in
+ * the form, and two distinct Groups with the same label would collapse into one. Falls back
+ * to a flat, single ungrouped section when no UI schema is available.
+ *
+ * Async because connected-select fields backed by `options.allOptionsResourceName` (rather
+ * than a static `options.data`) resolve their display label with a criteria-filtered fetch
+ * — see `resolveResourceOptionLabel`. The UI schema is walked synchronously to collect one
+ * value-resolution promise per field (preserving encounter order), then all promises settle
+ * in parallel via `Promise.all` before fields are added to their sections — so a slow fetch
+ * for one field can't reorder fields that resolved faster.
+ *
+ * This is the single walker of the UI schema for review purposes — `Form` calls it directly
+ * to populate `Review.sections`. Don't reimplement this traversal elsewhere; the two
+ * previously did drift (a since-removed `collectReviewFields` resolved labels via
+ * `resolveOptionLabel` / `resolveEnumLabel` only, silently skipping `resolveResourceOptionLabel`
+ * and showing raw ids for connected-select fields).
+ * @internal
+ */
+export declare function buildReviewSections(data: Record<string, any>, uiSchema: any, schema: any): Promise<ReviewSection[]>;
+/**
+ * Filters review sections down to fields whose label or value contains `query`
+ * (case-insensitive). Sections left with no matching fields are dropped entirely.
+ * Returns `sections` unchanged when `query` is blank.
+ * @internal
+ */
+export declare function filterReviewSections(sections: ReviewSection[], query: string): ReviewSection[];
+/**
+ * Looks up the display label for a raw value from `options.data` (used by segmented,
+ * radio group, connected-select, and enum-with-explicit-data renderers). Honors
+ * `options.valueField`/`options.labelField` when set, defaulting to `value`/`label`.
+ * Returns `null` when no match found.
+ * @internal
+ */
+export declare function resolveOptionLabel(raw: any, options: any): string | null;
+/**
+ * Resolves the display label for a connected-select field backed by
+ * `options.allOptionsResourceName` (a Data Server/Request Server resource) rather than a
+ * static `options.data` array — e.g. `ConnectedSelectControlRenderer` in async/remote mode.
+ * Fetches a single row via a criteria-filtered snapshot matching `valueField === raw`,
+ * then reads `labelField` off the returned row. Returns `null` when there's no resource
+ * to query, the resource can't be reached, or no row matches.
+ * @internal
+ */
+export declare function resolveResourceOptionLabel(raw: any, options: any): Promise<string | null>;
+/**
+ * For plain enum combobox fields (no options.data), applies the same `capitalCase`
+ * transform the renderer uses — e.g. `SEMI_ANNUAL` → `Semi Annual`.
+ * Navigates the JSON schema via the fieldName path to confirm the field is an enum
+ * before transforming. Returns `null` for non-enum fields.
+ * @internal
+ */
+export declare function resolveEnumLabel(raw: any, fieldName: string, schema: any): string | null;
+/**
+ * Navigates a `/properties/`-separated path in data to support nested object scopes
+ * such as `ADDRESS/properties/STREET` produced by Group layout UI schemas.
+ * @internal
+ */
+export declare function getDataValueAtPath(data: any, fieldName: string): any;
+/**
+ * Converts a raw field value to a display string for the review panel.
+ * Arrays of primitives are comma-joined; arrays of objects and plain objects
+ * are rendered as readable `key: value` lines.
+ * @internal
+ */
+export declare function formatValueForReview(value: any): string;
+//# sourceMappingURL=review-utils.d.ts.map

package/dist/dts/utils/review-utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"review-utils.d.ts","sourceRoot":"","sources":["../../../src/utils/review-utils.ts"],"names":[],"mappings":"AAIA,cAAc;AACd,MAAM,MAAM,WAAW,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAE3D,cAAc;AACd,MAAM,MAAM,aAAa,GAAG;IAAE,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAAC,MAAM,EAAE,WAAW,EAAE,CAAA;CAAE,CAAC;AAE5E;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAsB,mBAAmB,CACvC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EACzB,QAAQ,EAAE,GAAG,EACb,MAAM,EAAE,GAAG,GACV,OAAO,CAAC,aAAa,EAAE,CAAC,CAuE1B;AAED;;;;;GAKG;AACH,wBAAgB,oBAAoB,CAAC,QAAQ,EAAE,aAAa,EAAE,EAAE,KAAK,EAAE,MAAM,GAAG,aAAa,EAAE,CAc9F;AAED;;;;;;GAMG;AACH,wBAAgB,kBAAkB,CAAC,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,GAAG,GAAG,MAAM,GAAG,IAAI,CAMxE;AAED;;;;;;;;GAQG;AACH,wBAAsB,0BAA0B,CAAC,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,GAAG,GAAG,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,CA8B/F;AAED;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAAC,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,GAAG,MAAM,GAAG,IAAI,CAiBxF;AAED;;;;GAIG;AACH,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,GAAG,GAAG,CAEpE;AAYD;;;;;GAKG;AACH,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,GAAG,GAAG,MAAM,CAwBvD"}

package/dist/dts/utils/schema-utils.d.ts

@@ -1,3 +1,4 @@
+import { ErrorObject } from 'ajv';
 import type { UiSchema, UiSchemaElement } from '../types';
 /**
  * Extracted control info for grid layout rendering.
@@ -36,6 +37,17 @@ export declare function withGridView(uiSchema: UiSchema): UiSchema;
  * @internal
  */
 export declare function isBulkUiSchema(uischema: UiSchema): boolean;
+/**
+ * Converts AJV validation errors to the JSON Schema scope strings they correspond to
+ * (e.g. `#/properties/ADDRESS/properties/STREET`). Used to match errors back to UI
+ * schema controls for features like categorization-tab error indicators.
+ */
+export declare function extractErrorScopes(errors: ErrorObject[]): string[];
+/**
+ * Returns true when `uiSchema` (or any of its descendants) has a scope that appears
+ * in `errorScopes`. Walks both `elements` and `options.childElements`.
+ */
+export declare function uiSchemaHasAnyError(uiSchema: UiSchemaElement | UiSchema, errorScopes: string[]): boolean;
 /**
  * Generates a UI schema suitable for bulk insert mode with array control.
  * @param userProvidedUiSchema - Optional user-provided UI schema to use as childUiSchema

package/dist/dts/utils/schema-utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"schema-utils.d.ts","sourceRoot":"","sources":["../../../src/utils/schema-utils.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAE1D;;;GAGG;AACH,MAAM,WAAW,gBAAgB;IAC/B,iDAAiD;IACjD,QAAQ,EAAE,eAAe,CAAC;IAC1B,oCAAoC;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,2FAA2F;IAC3F,SAAS,EAAE,MAAM,CAAC;CACnB;AAaD;;;;;;;GAOG;AACH,wBAAgB,2BAA2B,CAAC,QAAQ,EAAE,QAAQ,GAAG,gBAAgB,EAAE,CA6ClF;AAED;;;;;;;GAOG;AACH,wBAAgB,YAAY,CAAC,QAAQ,EAAE,QAAQ,GAAG,QAAQ,CAiBzD;AAED;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,QAAQ,EAAE,QAAQ,GAAG,OAAO,CAK1D;AAED;;;;;GAKG;AACH,wBAAgB,oBAAoB,CAAC,oBAAoB,CAAC,EAAE,QAAQ,GAAG,IAAI,GAAG,QAAQ,CAoBrF"}
+{"version":3,"file":"schema-utils.d.ts","sourceRoot":"","sources":["../../../src/utils/schema-utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,KAAK,CAAC;AAClC,OAAO,KAAK,EAAiC,QAAQ,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAEzF;;;GAGG;AACH,MAAM,WAAW,gBAAgB;IAC/B,iDAAiD;IACjD,QAAQ,EAAE,eAAe,CAAC;IAC1B,oCAAoC;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,2FAA2F;IAC3F,SAAS,EAAE,MAAM,CAAC;CACnB;AAaD;;;;;;;GAOG;AACH,wBAAgB,2BAA2B,CAAC,QAAQ,EAAE,QAAQ,GAAG,gBAAgB,EAAE,CA6ClF;AAED;;;;;;;GAOG;AACH,wBAAgB,YAAY,CAAC,QAAQ,EAAE,QAAQ,GAAG,QAAQ,CAiBzD;AAED;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,QAAQ,EAAE,QAAQ,GAAG,OAAO,CAK1D;AAED;;;;GAIG;AACH,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,WAAW,EAAE,GAAG,MAAM,EAAE,CAelE;AAED;;;GAGG;AACH,wBAAgB,mBAAmB,CACjC,QAAQ,EAAE,eAAe,GAAG,QAAQ,EACpC,WAAW,EAAE,MAAM,EAAE,GACpB,OAAO,CAmBT;AAED;;;;;GAKG;AACH,wBAAgB,oBAAoB,CAAC,oBAAoB,CAAC,EAAE,QAAQ,GAAG,IAAI,GAAG,QAAQ,CAoBrF"}

package/dist/esm/form.js

@@ -2,7 +2,7 @@ import { __awaiter, __decorate, __rest } from "tslib";
 import { Connect } from '@genesislcap/foundation-comms';
 import { LifecycleMixin } from '@genesislcap/foundation-utils';
 import JsonSchemaDereferencer from '@json-schema-tools/dereferencer';
-import { isControl, isStringControl, mapStateToControlProps, rankWith } from '@jsonforms/core';
+import { isControl, isStringControl, mapStateToControlProps, rankWith, } from '@jsonforms/core';
 import { attr, customElement, DOM, observable, Observable, volatile, } from '@microsoft/fast-element';
 import { FoundationElement } from '@microsoft/fast-foundation';
 import { foundationFormStyles as styles } from './form.styles';
@@ -29,7 +29,7 @@ import { NumberControlRendererEntry } from './jsonforms/renderers/NumberControlR
 import { SegmentedControlRendererEntry } from './jsonforms/renderers/SegmentedControlRenderer';
 import { StringArrayEntry } from './jsonforms/renderers/StringArrayControlRenderer';
 import { StringControlRendererTemplate } from './jsonforms/renderers/StringControlRenderer';
-import { downloadCsvTemplate as downloadCsvFile, extractFieldsFromUiSchema, generateCsvTemplate, logger, mapCsvToSchema, mapGenesisFieldErrorsToAdditionalErrors, parseCsv, } from './utils';
+import { buildReviewSections, downloadCsvTemplate as downloadCsvFile, extractFieldsFromUiSchema, generateCsvTemplate, getDataValueAtPath, logger, mapCsvToSchema, mapGenesisFieldErrorsToAdditionalErrors, parseCsv, } from './utils';
 import { findModalParent, showConfirmationDialog } from './utils/confirmation-dialog-utils';
 import { removeDataPropertiesNotInSchema } from './utils/form-utils';
 import { generateBulkUiSchema, isBulkUiSchema } from './utils/schema-utils';
@@ -149,17 +149,55 @@ let Form = class Form extends LifecycleMixin(FoundationElement) {
          * @public
          */
         this.data = {};
+        /**
+         * Text to appear on submit button
+         * @default Submit
+         * @public
+         */
+        this.submitButtonText = 'Submit';
+        /**
+         * Text to appear on submit button in bulk insert mode
+         * @default Submit AllS
+         * @public
+         */
+        this.bulkSubmitButtonText = 'Submit All';
+        /**
+         * Text to appear on reset button
+         * @default Submit
+         * @public
+         */
+        this.resetButtonText = 'Reset';
         /**
          * Minimum number of items required in bulk insert mode.
          * @public
          */
         this.bulkInsertMinItems = 1;
+        /**
+         * Text to appear on reset button
+         * @public
+         */
+        this.reviewButtonText = 'Review';
+        /**
+         * Heading shown at the top of the review panel.
+         * @public
+         */
+        this.reviewHeading = 'Review';
         /**
          * Tracks the submission status for each row in bulk insert mode.
          * Key is the row index, value is the status object.
          * @public
          */
         this.rowSubmitStatuses = new Map();
+        /**
+         * Whether the form is currently showing the submit-review preview panel.
+         * @internal
+         */
+        this.reviewMode = false;
+        /**
+         * Field label/value pairs rendered in the review panel, grouped into sections.
+         * @internal
+         */
+        this.reviewSections = [];
     }
     resourceNameChanged() {
         return __awaiter(this, void 0, void 0, function* () {
@@ -258,6 +296,17 @@ let Form = class Form extends LifecycleMixin(FoundationElement) {
         const { renderers: defaultRenderers = [], additionalRenderers = [] } = this;
         this.mergedRenderers = [...defaultRenderers, ...additionalRenderers];
     }
+    /**
+     * Value of `reviewIdField` resolved from the current form data, if set.
+     * @internal
+     */
+    get reviewRecordId() {
+        if (!this.reviewIdField) {
+            return undefined;
+        }
+        const value = getDataValueAtPath(this.data, this.reviewIdField);
+        return value === undefined || value === null ? undefined : String(value);
+    }
     /**
      * @internal
      */
@@ -287,11 +336,62 @@ let Form = class Form extends LifecycleMixin(FoundationElement) {
                 yield this._submitBulk();
                 return;
             }
+            // Show review preview if enabled and the form has no validation errors.
+            if (this.showSubmitReview && !this.hasValidationErrors()) {
+                this.reviewSections = yield buildReviewSections(this.data || {}, this.userProvidedUiSchema || this.uischema, this.originalDetailsSchema || this.jsonSchema);
+                this.reviewMode = true;
+                return;
+            }
+            yield this._performSubmit();
+        });
+    }
+    /**
+     * Called from the review panel to go back to the form.
+     * @internal
+     */
+    backFromReview() {
+        this.reviewMode = false;
+    }
+    /**
+     * Called from the review panel submit button to perform the actual submission.
+     * Intentionally skips `confirmationMessage` — that gate already ran once in `_submit()`
+     * before review mode was entered, and re-confirming here would ask the user twice.
+     * @internal
+     */
+    _submitFromReview() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.reviewMode = false;
+            yield this._performSubmit();
+        });
+    }
+    /**
+     * Whether the form currently has validation errors. Reads live errors directly from the
+     * json-forms element when it's mounted, so we always use the current validation state
+     * (this.errors can lag in edge cases such as required fields with empty-string values not
+     * yet reported via data-change). Falls back to this.errors when json-forms isn't mounted
+     * (e.g. while the read-only review panel is showing), which is safe since no interactive
+     * editing happens during review.
+     * @internal
+     */
+    hasValidationErrors() {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        const jfEl = this.jsonFormsEl;
+        return jfEl
+            ? ((_d = (_c = (_b = (_a = jfEl.jsonforms) === null || _a === void 0 ? void 0 : _a.core) === null || _b === void 0 ? void 0 : _b.errors) === null || _c === void 0 ? void 0 : _c.length) !== null && _d !== void 0 ? _d : 0) > 0 ||
+                ((_h = (_g = (_f = (_e = jfEl.jsonforms) === null || _e === void 0 ? void 0 : _e.core) === null || _f === void 0 ? void 0 : _f.additionalErrors) === null || _g === void 0 ? void 0 : _g.length) !== null && _h !== void 0 ? _h : 0) > 0
+            : this.errors.length > 0;
+    }
+    /**
+     * Performs the actual API submission after review (or directly when review is disabled).
+     * @internal
+     */
+    _performSubmit() {
+        return __awaiter(this, void 0, void 0, function* () {
             const payload = Object.assign({}, this.data);
             const commitPayload = this.buildCommitPayload(payload);
             logger.debug({ payload, errors: this.errors });
             this.$emit('submit', { payload, errors: this.errors });
-            if (Object.entries(payload).length !== 0 && !this.errors.length && this.resourceName) {
+            if (Object.entries(payload).length !== 0 && !this.hasValidationErrors() && this.resourceName) {
                 this.submitting = true;
                 const formSubmitReq = yield this.connect.commitEvent(this.resourceName, commitPayload);
                 this.submitting = false;
@@ -638,6 +738,8 @@ let Form = class Form extends LifecycleMixin(FoundationElement) {
      */
     reset(clearData = true) {
         this.submitted = false;
+        this.reviewMode = false;
+        this.reviewSections = [];
         this.clearRowSubmitStatuses();
         this.serverFieldErrors = [];
         if (clearData) {
@@ -902,6 +1004,15 @@ __decorate([
 __decorate([
     attr({ attribute: 'bulk-insert', mode: 'boolean' })
 ], Form.prototype, "bulkInsert", void 0);
+__decorate([
+    attr({ attribute: 'submit-button-text' })
+], Form.prototype, "submitButtonText", void 0);
+__decorate([
+    attr({ attribute: 'bulk-submit-button-text' })
+], Form.prototype, "bulkSubmitButtonText", void 0);
+__decorate([
+    attr({ attribute: 'reset-button-text' })
+], Form.prototype, "resetButtonText", void 0);
 __decorate([
     attr({
         attribute: 'bulk-insert-min-items',
@@ -920,9 +1031,27 @@ __decorate([
         },
     })
 ], Form.prototype, "bulkInsertMaxItems", void 0);
+__decorate([
+    attr({ attribute: 'show-submit-review', mode: 'boolean' })
+], Form.prototype, "showSubmitReview", void 0);
+__decorate([
+    attr({ attribute: 'review-button-text' })
+], Form.prototype, "reviewButtonText", void 0);
+__decorate([
+    attr({ attribute: 'review-heading' })
+], Form.prototype, "reviewHeading", void 0);
+__decorate([
+    attr({ attribute: 'review-id-field' })
+], Form.prototype, "reviewIdField", void 0);
 __decorate([
     observable
 ], Form.prototype, "rowSubmitStatuses", void 0);
+__decorate([
+    observable
+], Form.prototype, "reviewMode", void 0);
+__decorate([
+    observable
+], Form.prototype, "reviewSections", void 0);
 __decorate([
     volatile
 ], Form.prototype, "isSubmitHidden", null);

package/dist/esm/form.styles.js

@@ -22,10 +22,17 @@ export const foundationFormStyles = css `
     min-width: 64px;
     width: 100%;
     height: 100%;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    box-sizing: border-box;
+  }
+
+  foundation-form json-forms {
+    flex: 1;
     overflow-y: auto;
-    display: inline-block;
+    min-height: 0;
     scrollbar-color: var(--neutral-stroke-rest) transparent;
-    box-sizing: border-box;
   }
 
   foundation-form .actions {

package/dist/esm/form.template.js

@@ -6,11 +6,12 @@ import { CategorizationWrapper } from './jsonforms/renderers/CategorizationWrapp
 import { DispatchRenderer } from './jsonforms/renderers/dispatch-renderer';
 import { StepperWrapper } from './jsonforms/renderers/StepperWrapperRenderer';
 import { VerticalCategorizationWrapper } from './jsonforms/renderers/VerticalCategorizationWrapperRenderer';
-avoidTreeShaking(JSONForms, ArrayListWrapper, CategorizationWrapper, VerticalCategorizationWrapper, DispatchRenderer, StepperWrapper);
+import { Review } from './review';
+avoidTreeShaking(JSONForms, ArrayListWrapper, CategorizationWrapper, VerticalCategorizationWrapper, DispatchRenderer, StepperWrapper, Review);
 /** @internal */
 export const getPrefixedForm = (prefix) => html `
   <template>
-    ${when((x) => x.bulkInsert, html `
+    ${when((x) => !x.reviewMode && x.bulkInsert, html `
         <div class="csv-upload-section" part="csv-upload">
           <input
             type="file"
@@ -39,43 +40,80 @@ export const getPrefixedForm = (prefix) => html `
           </${prefix}-button>
         </div>
       `)}
-    <json-forms
-      @submit-button-clicked=${(x) => x._submit()}
-      @submit-part=${(x, c) => x.submitPart(c.event)}
-      @submit-single-row=${(x, c) => x.submitSingleRow(c.event.detail.index)}
-      @reset-form=${(x) => x.reset(false)}
-      ?readonly=${(x) => x.readonly}
-      :submitted=${(x) => x.submitted}
-      :renderers=${(x) => x.mergedRenderers}
-      :uischema=${(x) => x.uischema}
-      :schema=${(x) => x.jsonSchema}
-      :data=${(x) => x.data}
-      :serverFieldErrors=${(x) => x.serverFieldErrors}
-      :prefix=${(x) => x.prefix}
-      :rowSubmitStatuses=${(x) => x.rowSubmitStatuses}
-      :bulkInsert=${(x) => x.bulkInsert}
-      @data-change=${(x, c) => x.onChange(c.event)}
-    ></json-forms>
-    ${when((x) => x.isSubmitHidden || x.isResetVisible, html `
+    ${when((x) => !x.reviewMode, html `
+        <json-forms
+          ${ref('jsonFormsEl')}
+          @submit-button-clicked=${(x) => x._submit()}
+          @submit-part=${(x, c) => x.submitPart(c.event)}
+          @submit-single-row=${(x, c) => x.submitSingleRow(c.event.detail.index)}
+          @reset-form=${(x) => x.reset(false)}
+          ?readonly=${(x) => x.readonly}
+          :submitted=${(x) => x.submitted}
+          :renderers=${(x) => x.mergedRenderers}
+          :uischema=${(x) => x.uischema}
+          :schema=${(x) => x.jsonSchema}
+          :data=${(x) => x.data}
+          :serverFieldErrors=${(x) => x.serverFieldErrors}
+          :prefix=${(x) => x.prefix}
+          :rowSubmitStatuses=${(x) => x.rowSubmitStatuses}
+          :bulkInsert=${(x) => x.bulkInsert}
+          @data-change=${(x, c) => x.onChange(c.event)}
+        ></json-forms>
+      `)}
+    ${when((x) => x.reviewMode, html `
+        <foundation-form-review
+          part="review-panel"
+          design-system-prefix=${(x) => x.prefix}
+          heading=${(x) => x.reviewHeading}
+          :recordId=${(x) => x.reviewRecordId}
+          :sections=${(x) => x.reviewSections}
+        ></foundation-form-review>
+      `)}
+    ${when((x) => x.reviewMode || x.isSubmitHidden || x.isResetVisible, html `
         <slot name="userActions" part="userActions" class="actions">
-          ${when((x) => x.isResetVisible, html `
+          ${when((x) => !x.reviewMode && x.isResetVisible, html `
               <${prefix}-button
                 @click="${(x) => x.handleResetClicked()}"
                 class="reset-button"
                 appearance="neutral"
                 data-test-id="reset-button"
               >
-                Reset
+                ${(x) => x.resetButtonText}
+              </${prefix}-button>
+            `)}
+          ${when((x) => x.reviewMode, html `
+              <${prefix}-button
+                @click="${(x) => x.backFromReview()}"
+                class="reset-button"
+                appearance="neutral"
+                data-test-id="review-back-button"
+              >
+                Back
               </${prefix}-button>
             `)}
-          ${when((x) => x.isSubmitHidden, html `
+          ${when((x) => !x.reviewMode && x.isSubmitHidden, html `
               <${prefix}-button
                 @click="${(x) => x._submit()}"
-                ?disable=${(x) => !x.submitting}
+                ?disabled=${(x) => x.submitting}
+                class="submit-button"
+                appearance="accent"
+              >
+                ${(x) => x.showSubmitReview
+    ? x.reviewButtonText
+    : x.bulkInsert
+        ? x.bulkSubmitButtonText
+        : x.submitButtonText}
+              </${prefix}-button>
+            `)}
+          ${when((x) => x.reviewMode, html `
+              <${prefix}-button
+                @click="${(x) => x._submitFromReview()}"
+                ?disabled=${(x) => x.submitting}
                 class="submit-button"
                 appearance="accent"
+                data-test-id="review-submit-button"
               >
-                ${(x) => (x.bulkInsert ? 'Submit All' : 'Submit')}
+                ${(x) => (x.bulkInsert ? x.bulkSubmitButtonText : x.submitButtonText)}
               </${prefix}-button>
             `)}
         </slot>

package/dist/esm/index.js

@@ -2,6 +2,9 @@ export * from './filters';
 export * from './form';
 export * from './form.styles';
 export * from './form.template';
+export * from './review';
+export * from './review.styles';
+export * from './review.template';
 export { MulticolumnDropdownControlRendererEntry, MulticolumnDropdownControlRendererTemplate, } from './jsonforms/renderers/MulticolumnDropdownControlRenderer';
 export { LayoutVerticalCategorizationRendererEntry } from './jsonforms/renderers/LayoutVerticalCategorizationRenderer';
 export { controlWrapperTemplate, controlWrapperStyles, 

package/dist/esm/jsonforms/renderers/CategorizationWrapperRenderer.js

@@ -1,6 +1,7 @@
 import { __decorate } from "tslib";
 import { html, css, observable, customElement, FASTElement, repeat, when, } from '@microsoft/fast-element';
 import { classNames } from '@microsoft/fast-web-utilities';
+import { extractErrorScopes, uiSchemaHasAnyError } from '../../utils/schema-utils';
 /**
  * Resolves the `activeCategory` option (the zero-based index of the category
  * tab that should open on first render) to a valid tab index. Out-of-bounds or
@@ -160,48 +161,3 @@ CategorizationWrapper = __decorate([
     })
 ], CategorizationWrapper);
 export { CategorizationWrapper };
-function uiSchemaHasAnyError(uiSchema, errorScopes) {
-    // Direct scope match
-    if (typeof uiSchema.scope === 'string' &&
-        errorScopes.includes(uiSchema.scope)) {
-        return true;
-    }
-    // Check composite children via options.childElements
-    const options = uiSchema.options;
-    const childElements = options === null || options === void 0 ? void 0 : options.childElements;
-    if (Array.isArray(childElements)) {
-        for (const child of childElements) {
-            if (uiSchemaHasAnyError(child, errorScopes)) {
-                return true;
-            }
-        }
-    }
-    // Check layout children (elements)
-    if (Array.isArray(uiSchema.elements)) {
-        for (const el of uiSchema.elements) {
-            if (uiSchemaHasAnyError(el, errorScopes)) {
-                return true;
-            }
-        }
-    }
-    return false;
-}
-function extractErrorScopes(errors) {
-    var _a;
-    const scopes = new Set();
-    for (const error of errors) {
-        if (error.keyword === 'required' && ((_a = error.params) === null || _a === void 0 ? void 0 : _a.missingProperty)) {
-            const basePath = error.instancePath || '';
-            const prop = error.params.missingProperty;
-            // Normalize the base path
-            const fullPath = basePath === '' ? `#/properties/${prop}` : `#${basePath}/properties/${prop}`;
-            scopes.add(fullPath);
-        }
-        else if (error.instancePath) {
-            // Remove leading slash and convert to JSON Pointer path
-            const instancePath = `#${error.instancePath.replace(/\//g, '/properties/')}`;
-            scopes.add(instancePath);
-        }
-    }
-    return Array.from(scopes);
-}

package/dist/esm/review.js

@@ -0,0 +1,63 @@
+import { __decorate } from "tslib";
+import { attr, customElement, FASTElement, observable, volatile } from '@microsoft/fast-element';
+import { foundationFormReviewStyles as styles } from './review.styles';
+import { foundationFormReviewTemplate as template } from './review.template';
+import { filterReviewSections } from './utils/review-utils';
+/**
+ * Read-only preview panel shown by `<foundation-form>` when `show-submit-review` is enabled.
+ * Renders the reviewed data grouped into sections with a header and a filter field.
+ * @public
+ */
+let Review = class Review extends FASTElement {
+    constructor() {
+        super(...arguments);
+        this.prefix = 'rapid';
+        /**
+         * Title shown in the review header.
+         * @public
+         */
+        this.heading = 'Review';
+        /**
+         * Sections of label/value pairs to render, grouped by their nearest UI schema `Group`.
+         * @public
+         */
+        this.sections = [];
+        /**
+         * Free-text query filtering fields by label or value. Sections with no matching
+         * fields are hidden.
+         * @internal
+         */
+        this.filterText = '';
+    }
+    /** @internal */
+    get filteredSections() {
+        return filterReviewSections(this.sections, this.filterText);
+    }
+};
+__decorate([
+    attr({ attribute: 'design-system-prefix' })
+], Review.prototype, "prefix", void 0);
+__decorate([
+    attr
+], Review.prototype, "heading", void 0);
+__decorate([
+    attr({ attribute: 'record-id' })
+], Review.prototype, "recordId", void 0);
+__decorate([
+    observable
+], Review.prototype, "sections", void 0);
+__decorate([
+    observable
+], Review.prototype, "filterText", void 0);
+__decorate([
+    volatile
+], Review.prototype, "filteredSections", null);
+Review = __decorate([
+    customElement({
+        name: 'foundation-form-review',
+        template,
+        styles,
+        shadowOptions: null,
+    })
+], Review);
+export { Review };