@genesislcap/foundation-forms 14.397.2 → 14.398.0

package/dist/esm/jsonforms/json-forms.js

@@ -30,6 +30,16 @@ let JSONForms = class JSONForms extends FASTElement {
     constructor() {
         super(...arguments);
         this.ajv = createAjv({ useDefaults: true, $data: true });
+        /**
+         * Row submit statuses for bulk insert mode.
+         * Passed from the parent foundation-form.
+         */
+        this.rowSubmitStatuses = new Map();
+        /**
+         * Whether the form is in bulk insert mode.
+         * Passed from the parent foundation-form.
+         */
+        this.bulkInsert = false;
         this.dispatch = (action) => {
             this.jsonforms = Object.assign(Object.assign({}, this.jsonforms), { core: coreReducer(this.jsonforms.core, action) });
             this.$emit('data-change', {
@@ -113,6 +123,8 @@ let JSONForms = class JSONForms extends FASTElement {
             i18n: i18nReducer(this.i18n, Actions.updateI18n((_b = this.i18n) === null || _b === void 0 ? void 0 : _b.locale, (_c = this.i18n) === null || _c === void 0 ? void 0 : _c.translate, ((_d = this.i18n) === null || _d === void 0 ? void 0 : _d.translateError) || errorTranslator)),
             renderers: this.renderers,
             readonly: this.readonly,
+            rowSubmitStatuses: this.rowSubmitStatuses,
+            bulkInsert: this.bulkInsert,
         };
         const additionalErrors = this.validate(this.uichemaToUse);
         this.$emit('data-change', {
@@ -142,6 +154,18 @@ let JSONForms = class JSONForms extends FASTElement {
     configChanged() {
         this.schemaChanged();
     }
+    rowSubmitStatusesChanged() {
+        // Update the jsonforms object to trigger re-render in child renderers
+        if (this.jsonforms) {
+            this.jsonforms = Object.assign(Object.assign({}, this.jsonforms), { rowSubmitStatuses: this.rowSubmitStatuses });
+        }
+    }
+    bulkInsertChanged() {
+        // Update the jsonforms object to trigger re-render in child renderers
+        if (this.jsonforms) {
+            this.jsonforms = Object.assign(Object.assign({}, this.jsonforms), { bulkInsert: this.bulkInsert });
+        }
+    }
     get props() {
         var _a;
         if (!this.schema && !this.uischema) {
@@ -213,6 +237,12 @@ __decorate([
 __decorate([
     observable
 ], JSONForms.prototype, "config", void 0);
+__decorate([
+    observable
+], JSONForms.prototype, "rowSubmitStatuses", void 0);
+__decorate([
+    observable
+], JSONForms.prototype, "bulkInsert", void 0);
 JSONForms = __decorate([
     customElement({
         name: 'json-forms',

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

@@ -3,6 +3,13 @@ import { Generate, composePaths, createDefaultValue } from '@jsonforms/core';
 import { designUnit } from '@microsoft/fast-components';
 import { html, css, observable, customElement, FASTElement, repeat, } from '@microsoft/fast-element';
 import { logger } from '../../utils';
+const resolveRowUiSchema = (childUiSchema, index, rowData, formData, fallback) => {
+    if (typeof childUiSchema === 'function') {
+        const result = childUiSchema(index, rowData, formData);
+        return result !== null && result !== void 0 ? result : fallback;
+    }
+    return fallback;
+};
 const isDeleteButtonHidden = (ctx) => {
     var _a, _b, _c;
     const canDeleteFn = (_a = ctx.parent.control.uischema.options) === null || _a === void 0 ? void 0 : _a.canDelete;
@@ -13,33 +20,81 @@ const isDeleteButtonHidden = (ctx) => {
     const controlData = formData[ctx.parent.control.path] && formData[ctx.parent.control.path][ctx.index];
     return !canDeleteFn(controlData);
 };
+const getRowStatus = (ctx) => {
+    var _a;
+    const statuses = (_a = ctx.parent.form.jsonforms) === null || _a === void 0 ? void 0 : _a.rowSubmitStatuses;
+    return statuses === null || statuses === void 0 ? void 0 : statuses.get(ctx.index);
+};
+const isRowInStatus = (ctx, targetStatus) => {
+    const rowStatus = getRowStatus(ctx);
+    return (rowStatus === null || rowStatus === void 0 ? void 0 : rowStatus.status) === targetStatus;
+};
+const isRowDisabled = (ctx) => isRowInStatus(ctx, 'success');
+const isRowSubmitting = (ctx) => isRowInStatus(ctx, 'submitting');
 export const ArrayListWrapperRendererTemplate = (prefix = 'zero') => html `
   <template>
     ${repeat((x) => Array(x.control.data), html `
-        <div class="array-list">
+        <div class="array-list ${(x, ctx) => {
+    const rowStatus = getRowStatus(ctx);
+    return rowStatus ? `row-status-${rowStatus.status}` : '';
+}}"
+        data-row-index="${(x, ctx) => ctx.index}"
+        >
+          <div class="row-status-indicator">
+            <${prefix}-progress-ring class="status-spinner"></${prefix}-progress-ring>
+            <${prefix}-icon name="check-circle" class="status-icon status-success"></${prefix}-icon>
+            <${prefix}-icon
+              name="times-circle"
+              class="status-icon status-failed"
+              title="${(x, ctx) => {
+    var _a;
+    const rowStatus = getRowStatus(ctx);
+    return ((_a = rowStatus === null || rowStatus === void 0 ? void 0 : rowStatus.errors) === null || _a === void 0 ? void 0 : _a.map((e) => e.TEXT).join(', ')) || 'Failed';
+}}"
+            ></${prefix}-icon>
+          </div>
           <dispatch-renderer
             ?submitted=${(x, ctx) => ctx.parent.form.submitted}
             :dispatch=${(x, ctx) => ctx.parent.form.dispatch}
             :jsonforms=${(x, ctx) => ctx.parent.form.jsonforms}
             :prefix=${(x, ctx) => ctx.parent.form.prefix}
-            :props=${(x, ctx) => ({
-    uischema: ctx.parent.uiSchema,
-    schema: ctx.parent.schema,
-    renderers: ctx.parent.control.renderers,
-    path: composePaths(ctx.parent.control.path, `${ctx.index}`),
-    enabled: ctx.parent.control.enabled,
-})}
+            :props=${(x, ctx) => {
+    var _a, _b, _c, _d;
+    const childSchema = (_a = ctx.parent.control.uischema.options) === null || _a === void 0 ? void 0 : _a.childUiSchema;
+    const formData = (_c = (_b = ctx.parent.form.jsonforms) === null || _b === void 0 ? void 0 : _b.core) === null || _c === void 0 ? void 0 : _c.data;
+    const rowData = (_d = ctx.parent.control.data) === null || _d === void 0 ? void 0 : _d[ctx.index];
+    const uischema = resolveRowUiSchema(childSchema, ctx.index, rowData, formData, ctx.parent.uiSchema);
+    return {
+        uischema,
+        schema: ctx.parent.schema,
+        renderers: ctx.parent.control.renderers,
+        path: composePaths(ctx.parent.control.path, `${ctx.index}`),
+        enabled: ctx.parent.control.enabled && !isRowDisabled(ctx),
+    };
+}}
           ></dispatch-renderer>
-          <${prefix}-button
-            ?hidden=${(x, ctx) => isDeleteButtonHidden(ctx)}
-            appearance="lightweight"
-            class="item-control-btn"
-            data-test-id=${(x, ctx) => `${ctx.parent.control.path}-${ctx.index}-delete-item`}
-            @click=${(x, ctx) => ctx.parent.deleteItem(ctx.index)}
-          >
-            <${prefix}-icon name="trash"></${prefix}-icon>
-            ${(x, ctx) => { var _a; return ((_a = ctx.parent.control.uischema.options) === null || _a === void 0 ? void 0 : _a.deleteLabel) || ''; }}
-          </${prefix}-button>
+          <div class="button-group">
+            <${prefix}-button
+              ?hidden=${(x, ctx) => { var _a; return !((_a = ctx.parent.form.jsonforms) === null || _a === void 0 ? void 0 : _a.bulkInsert) || isRowDisabled(ctx); }}
+              ?disabled=${(x, ctx) => isRowSubmitting(ctx)}
+              appearance="accent"
+              class="item-control-btn row-submit-btn"
+              data-test-id=${(x, ctx) => `${ctx.parent.control.path}-${ctx.index}-submit-item`}
+              @click=${(x, ctx) => ctx.parent.submitRow(ctx.index)}
+            >
+              <${prefix}-icon name="paper-plane"></${prefix}-icon>
+            </${prefix}-button>
+            <${prefix}-button
+              ?hidden=${(x, ctx) => isDeleteButtonHidden(ctx) || isRowDisabled(ctx)}
+              appearance="stealth"
+              class="item-control-btn"
+              data-test-id=${(x, ctx) => `${ctx.parent.control.path}-${ctx.index}-delete-item`}
+              @click=${(x, ctx) => ctx.parent.deleteItem(ctx.index)}
+            >
+              <${prefix}-icon name="trash"></${prefix}-icon>
+              ${(x, ctx) => { var _a; return ((_a = ctx.parent.control.uischema.options) === null || _a === void 0 ? void 0 : _a.deleteLabel) || ''; }}
+            </${prefix}-button>
+          </div>
         </div>
       `, { positioning: true })}
     <${prefix}-button
@@ -56,27 +111,166 @@ export const ArrayListWrapperRendererTemplate = (prefix = 'zero') => html `
 const styles = css `
   :host {
     padding-left: calc(${designUnit} * 1px);
+    display: flex;
+    flex-direction: column;
+    gap: calc(${designUnit} * 3px);
+
+    /* Row status color tokens - can be overridden via CSS custom properties */
+    --row-status-success-color: var(--success-color, #28a745);
+    --row-status-failed-color: var(--error-color, #dc3545);
+    --row-status-submitting-color: var(--accent-fill-rest, #0078d4);
+
+    /* Array item card styling - industrial/utilitarian aesthetic */
+    --array-item-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 8px rgba(0, 0, 0, 0.06);
+    --array-item-shadow-hover: 0 2px 4px rgba(0, 0, 0, 0.06), 0 6px 12px rgba(0, 0, 0, 0.08);
+    --array-item-border: 1px solid var(--neutral-stroke-rest, rgba(0, 0, 0, 0.12));
+    --array-item-radius: calc(${designUnit} * 2px);
   }
 
   .array-list {
+    display: flex;
+    align-items: flex-start;
+    position: relative;
+    padding: calc(${designUnit} * 3px);
+    padding-left: calc(${designUnit} * 2px + 3px); /* Extra space for left accent bar */
+    margin: 0;
+    background-color: var(--neutral-layer-1, #fff);
+    border: var(--array-item-border);
+    border-radius: var(--array-item-radius);
+    box-shadow: var(--array-item-shadow);
+    transition:
+      background-color 0.15s ease-in-out,
+      box-shadow 0.2s ease,
+      border-color 0.15s ease;
+  }
+
+  .array-list:hover {
+    box-shadow: var(--array-item-shadow-hover);
+  }
+
+  /* Content area grows to fill space; min-width prevents flex overflow */
+  .array-list > dispatch-renderer {
+    flex: 1;
+    min-width: 0;
+  }
+
+  /* Left accent bar for visual hierarchy - industrial form-slot feel */
+  .array-list::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: 3px;
+    border-radius: var(--array-item-radius) 0 0 var(--array-item-radius);
+    background: var(--neutral-stroke-subtle, rgba(0, 0, 0, 0.06));
+    pointer-events: none;
+  }
+
+  .array-list.row-status-success::before {
+    background: var(--row-status-success-color);
+  }
+
+  .array-list.row-status-failed::before {
+    background: var(--row-status-failed-color);
+  }
+
+  .array-list.row-status-submitting::before {
+    background: var(--row-status-submitting-color);
+  }
+
+  .array-list.row-status-success {
+    background-color: color-mix(in srgb, var(--row-status-success-color), transparent 90%);
+  }
+
+  .array-list.row-status-failed {
+    background-color: color-mix(in srgb, var(--row-status-failed-color), transparent 90%);
+  }
+
+  .array-list.row-status-submitting {
+    background-color: color-mix(in srgb, var(--row-status-submitting-color), transparent 95%);
+  }
+
+  .row-status-indicator {
     display: flex;
     align-items: center;
+    justify-content: center;
+    min-width: calc(${designUnit} * 6px);
+    margin-right: calc(${designUnit} * 2px);
+  }
+
+  /* Hide all status indicators by default */
+  .row-status-indicator .status-spinner,
+  .row-status-indicator .status-success,
+  .row-status-indicator .status-failed {
+    display: none;
+  }
+
+  /* Show spinner when submitting */
+  .array-list.row-status-submitting .row-status-indicator .status-spinner {
+    display: flex;
+  }
+
+  /* Show success icon when successful */
+  .array-list.row-status-success .row-status-indicator .status-success {
+    display: flex;
+  }
+
+  /* Show failed icon when failed */
+  .array-list.row-status-failed .row-status-indicator .status-failed {
+    display: flex;
+  }
+
+  .status-icon {
+    width: calc(${designUnit} * 4px);
+    height: calc(${designUnit} * 4px);
+  }
+
+  .status-success {
+    color: var(--row-status-success-color);
+  }
+
+  .status-failed {
+    color: var(--row-status-failed-color);
+    cursor: help;
+  }
+
+  .status-spinner {
+    width: calc(${designUnit} * 4px);
+    height: calc(${designUnit} * 4px);
   }
 
   .item-control-btn {
-    color: rgb(135, 155, 166);
-    margin-left: 10px;
+    color: var(--neutral-foreground-hint, rgb(135, 155, 166));
+    margin-left: calc(${designUnit} * 3px);
   }
 
   .item-control-btn:hover {
     color: var(--accent-foreground-hover);
   }
+
+  .row-submit-btn {
+    min-width: calc(${designUnit} * 8px);
+  }
+
+  .row-submit-btn[disabled] {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+  .button-group {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
 `;
 let ArrayListWrapper = class ArrayListWrapper extends FASTElement {
     controlChanged() {
+        var _a;
         this.schema = this.control.schema;
-        if (this.control.uischema.options) {
-            this.uiSchema = this.control.uischema.options.childUiSchema;
+        const childUiSchema = (_a = this.control.uischema.options) === null || _a === void 0 ? void 0 : _a.childUiSchema;
+        // Only use static childUiSchema; when it's a function, resolve per-row in template
+        if (childUiSchema && typeof childUiSchema !== 'function') {
+            this.uiSchema = childUiSchema;
             return;
         }
         const arrayUiSchema = Generate.uiSchema(this.schema);
@@ -89,6 +283,13 @@ let ArrayListWrapper = class ArrayListWrapper extends FASTElement {
     deleteItem(index) {
         this.control.removeItems(this.control.path, [index])();
     }
+    /**
+     * Submits a single row by emitting an event that bubbles up to the foundation-form.
+     * @param index - The row index to submit
+     */
+    submitRow(index) {
+        this.$emit('submit-single-row', { index }, { bubbles: true, composed: true });
+    }
 };
 __decorate([
     observable

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

@@ -9,7 +9,6 @@ export const BooleanControlRendererTemplate = (prefix = 'zero') => html `
       :jsonForms=${(x) => x.jsonforms}
       :touched=${(x) => x.touched}
       ?submitted=${(x) => x.submitted}
-      hide-label
     >
       <${prefix}-checkbox
         ?checked=${(x) => x.control.data}
@@ -23,7 +22,7 @@ export const BooleanControlRendererTemplate = (prefix = 'zero') => html `
 }}
         id=${(x) => x.control.path}
         data-test-id=${(x) => x.control.path}
-      >${(x) => x.control.label}</${prefix}-checkbox>
+      ></${prefix}-checkbox>
     </control-wrapper>
   </template>
 `;

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

@@ -16,10 +16,21 @@ export const ConnectedMultiselectControlRendererTemplate = (prefix = 'zero') =>
       <${prefix}-multiselect
         style="width: 100%"
         async=${(x) => { var _a; return (_a = x.control.uischema.options) === null || _a === void 0 ? void 0 : _a.async; }}
-        :selectedOptions=${(x) => x.control.data || []}
+        ?disabled=${(x) => !x.control.enabled}
+        :selectedOptions=${(x) => {
+    var _a, _b, _c;
+    const selectedOptions = ((_a = x.control.uischema.options) === null || _a === void 0 ? void 0 : _a.delimiter)
+        ? (_b = x.control.data) === null || _b === void 0 ? void 0 : _b.split((_c = x.control.uischema.options) === null || _c === void 0 ? void 0 : _c.delimiter)
+        : x.control.data;
+    return selectedOptions || [];
+}}
         tabindex="${(x) => { var _a, _b; return (_b = (_a = x.control.uischema) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.tabIndex; }}"
         @selectionChange=${(x, c) => {
-    x.control.handleChange(x.control.path, c.event.detail);
+    var _a, _b, _c;
+    const value = !((_a = x.control.uischema.options) === null || _a === void 0 ? void 0 : _a.delimiter)
+        ? c.event.detail
+        : (_b = c.event.detail) === null || _b === void 0 ? void 0 : _b.join((_c = x.control.uischema.options) === null || _c === void 0 ? void 0 : _c.delimiter);
+    x.control.handleChange(x.control.path, value);
     x.$emit('change');
     x.onBlur();
 }}

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

@@ -13,13 +13,19 @@ export const ControlWrapperRendererTemplate = html `
 }}
           id=${(x) => x.control.path + '-wrapper'}
           data-test-id=${(x) => x.control.path + '-wrapper'}
+          role="group"
+          aria-labelledby=${(x) => (x.computedLabel ? x.control.path + '-label' : null)}
         >
-          ${when((x) => !x.hideLabel, html `
-              <div for="${(x) => x.control.path + '-wrapper'}" class="label">
+          ${when((x) => x.computedLabel, html `
+              <label
+                id="${(x) => x.control.path + '-label'}"
+                for="${(x) => x.control.path}"
+                class="${(x) => classNames('label', ['visually-hidden', x.hideLabel])}"
+              >
                 <span>
                   ${(x) => x.computedLabel}${when((x) => { var _a, _b; return (_b = (_a = x.control.uischema) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.tooltip; }, (x) => x.getPrefixedTooltip)}
                 </span>
-              </div>
+              </label>
             `)}
 
           <div class="wrapper">
@@ -39,6 +45,19 @@ export const ControlWrapperRendererTemplate = html `
   </template>
 `;
 const styles = css `
+  .visually-hidden {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+  }
+
   .wrapperRoot {
     margin-bottom: calc(var(--design-unit) * 4px);
   }
@@ -50,10 +69,12 @@ const styles = css `
 
   .label {
     color: var(--neutral-foreground-hint);
-    margin-bottom: calc(var(--design-unit) * 2px);
+    margin-bottom: var(--control-label-margin, calc(var(--design-unit) * 2px));
     display: flex;
     justify-content: space-between;
     font-weight: 700;
+    /* Reset label defaults to match former div appearance */
+    cursor: default;
   }
 
   .labelLeft .wrapper {

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

@@ -4,6 +4,7 @@ import { capitalCase } from 'change-case';
 import { comboboxRendererStyles } from '../../form.styles';
 import { isOneOfEnum } from '../testers/isOneOfEnum';
 import { ENUM_CONTROL_RANK } from './RenderersRanks';
+const getOptionLabel = (option, labelRowFormatter) => labelRowFormatter ? labelRowFormatter(option.label) : capitalCase(option.label);
 // overrides https://github.com/eclipsesource/jsonforms/blob/69441cdfc48f359850d87fa4b842856f1f139eb2/packages/core/src/util/renderer.ts#L515
 // to allow mapping of enums that come as oneOf
 export const mapStateToEnumControlProps = (state, ownProps) => {
@@ -16,12 +17,13 @@ export const mapStateToEnumControlProps = (state, ownProps) => {
     return Object.assign(Object.assign({}, props), { options });
 };
 const updateEnumData = (dispatchRenderer, data) => {
-    var _a;
-    dispatchRenderer.control.handleChange(dispatchRenderer.control.path, (_a = dispatchRenderer.control.options.find((option) => capitalCase(option.label) === data)) === null || _a === void 0 ? void 0 : _a.value);
+    var _a, _b, _c;
+    const formatter = (_b = (_a = dispatchRenderer.control.uischema) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.labelRowFormatter;
+    dispatchRenderer.control.handleChange(dispatchRenderer.control.path, (_c = dispatchRenderer.control.options.find((option) => getOptionLabel(option, formatter) === data)) === null || _c === void 0 ? void 0 : _c.value);
     dispatchRenderer.onBlur();
 };
 const displaySetOrDefaultData = (dispatchRenderer) => {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e;
     let data = dispatchRenderer.control.data;
     if (!data) {
         const enumDefault = (_c = (_b = (_a = dispatchRenderer.control.schema) === null || _a === void 0 ? void 0 : _a.oneOf) === null || _b === void 0 ? void 0 : _b.find((x) => x.hasOwnProperty('default'))) === null || _c === void 0 ? void 0 : _c.default;
@@ -30,7 +32,11 @@ const displaySetOrDefaultData = (dispatchRenderer) => {
             updateEnumData(dispatchRenderer, data);
         }
     }
-    return ((_d = dispatchRenderer.control.options.find((option) => option.value === data)) === null || _d === void 0 ? void 0 : _d.label) || '';
+    const option = dispatchRenderer.control.options.find((opt) => opt.value === data);
+    if (!option)
+        return '';
+    const formatter = (_e = (_d = dispatchRenderer.control.uischema) === null || _d === void 0 ? void 0 : _d.options) === null || _e === void 0 ? void 0 : _e.labelRowFormatter;
+    return getOptionLabel(option, formatter);
 };
 export const EnumControlRendererTemplate = (prefix = 'zero') => html `
   <template>
@@ -54,7 +60,10 @@ export const EnumControlRendererTemplate = (prefix = 'zero') => html `
         data-test-id=${(x) => x.control.path}
       >
         ${repeat((x) => x.control.options, html `
-            <${prefix}-option>${(x) => capitalCase(x.label)}</${prefix}-option>
+            <${prefix}-option>${(x, ctx) => {
+    var _a, _b, _c, _d;
+    return getOptionLabel(x, (_d = (_c = (_b = (_a = ctx.parent) === null || _a === void 0 ? void 0 : _a.control) === null || _b === void 0 ? void 0 : _b.uischema) === null || _c === void 0 ? void 0 : _c.options) === null || _d === void 0 ? void 0 : _d.labelRowFormatter);
+}}</${prefix}-option>
           `)}
       </${prefix}-combobox>
     </control-wrapper>

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

@@ -0,0 +1,39 @@
+import { mapStateToLayoutProps, rankWith } from '@jsonforms/core';
+import { html, repeat } from '@microsoft/fast-element';
+import { LayoutWrapper } from './LayoutRenderer';
+import { LAYOUT_FORM_GRID_RANK } from './RenderersRanks';
+LayoutWrapper;
+export const LayoutFormGridRendererTemplate = html `
+  <template>
+    <layout-wrapper :control=${(x) => x.control}>
+      <div
+        style="
+          display: grid;
+          grid-template-columns: repeat(4, 1fr);
+          gap: 8px;
+        "
+      >
+        ${repeat((x) => x.control.uischema.elements, html `
+            <dispatch-renderer
+              ?submitted=${(x, ctx) => ctx.parent.submitted}
+              :dispatch=${(x, ctx) => ctx.parent.dispatch}
+              :jsonforms=${(x, ctx) => ctx.parent.jsonforms}
+              :prefix=${(x, ctx) => ctx.parent.prefix}
+              :props=${(x, ctx) => ({
+    uischema: x,
+    schema: ctx.parent.control.schema,
+    renderers: ctx.parent.control.renderers,
+    path: ctx.parent.control.path,
+    enabled: ctx.parent.control.enabled,
+})}
+            ></dispatch-renderer>
+          `)}
+      </div>
+    </layout-wrapper>
+  </template>
+`;
+export const LayoutFormGridEntry = {
+    renderer: LayoutFormGridRendererTemplate,
+    tester: rankWith(LAYOUT_FORM_GRID_RANK, (uiSchema) => uiSchema.type === 'FormGridLayout'),
+    mapper: mapStateToLayoutProps,
+};

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

@@ -13,5 +13,6 @@ export const LAYOUT_GROUP_RANK = 2;
 export const LAYOUT_HORIZONTAL_RANK = 2;
 export const LAYOUT_STEPPER_RANK = 3;
 export const LAYOUT2COLUMNS_RANK = 2;
+export const LAYOUT_FORM_GRID_RANK = 2;
 export const INVISIBLE_CONTROL_RANK = 5;
 export const DIVIDER_CONTROL_RANK = 5;

package/dist/esm/jsonforms/testers/isOneOfOptionMultiselect.js

@@ -1,3 +1,3 @@
 import { and, hasType, or, schemaMatches } from '@jsonforms/core';
 import { optionIs } from './optionIs';
-export const isOneOfOptionMultiselect = and(or(optionIs('allOptionsResourceName'), optionIs('data')), or(schemaMatches((schema) => hasType(schema, 'array')), schemaMatches((schema) => schema.hasOwnProperty('oneOf') && schema.oneOf.some((s) => hasType(s, 'array')))));
+export const isOneOfOptionMultiselect = and(or(optionIs('allOptionsResourceName'), optionIs('data')), or(optionIs('delimiter'), schemaMatches((schema) => hasType(schema, 'array')), schemaMatches((schema) => schema.hasOwnProperty('oneOf') && schema.oneOf.some((s) => hasType(s, 'array')))));