@servicetitan/dte-pdf-editor 1.52.0 → 1.54.0

package/src/components/field-config-panel/field-config-panel.tsx

@@ -14,6 +14,7 @@ import {
     generateESignPath,
     generateFillablePath,
     getFieldFontSize,
+    parseFillablePathName,
     supportsFieldFontSize,
 } from '../../utils';
 import { DisplayCondition } from '../display-conditions/display-condition';
@@ -31,6 +32,10 @@ interface FieldConfigPanelProps {
     hideConditionalLogic?: boolean;
     onDeleteField(): void;
     onFieldConfigChange(updates: Partial<PdfField>): void;
+    onMatchingFieldsConfigChange?(
+        predicate: (field: PdfField) => boolean,
+        updates: Partial<PdfField>,
+    ): void;
     onRequestFormFields(formId: number): void;
 }
 
@@ -44,6 +49,7 @@ export const FieldConfigPanel: FC<FieldConfigPanelProps> = ({
     hideConditionalLogic = false,
     onDeleteField,
     onFieldConfigChange,
+    onMatchingFieldsConfigChange,
     onRequestFormFields,
     recipients = [],
 }) => {
@@ -61,20 +67,42 @@ export const FieldConfigPanel: FC<FieldConfigPanelProps> = ({
         [recipientOptions, field.recipient],
     );
 
+    const isRadioGroupSibling = (documentField: PdfField) =>
+        documentField.subType === 'radio' && documentField.path === field.path;
+
     const handleRecipientChange = (item: { id: string; name: string } | null) => {
-        if (item) {
-            let path = field.path;
-            if (field.type === FieldTypeEnum.eSign) {
-                path = generateESignPath(item.id, field.subType as ESignFieldType);
-            }
-            if (field.type === FieldTypeEnum.fillable) {
-                path = generateFillablePath(item.id, field.id);
-            }
-            onFieldConfigChange({
-                recipient: item.id,
-                path,
-            });
+        if (!item) {
+            return;
+        }
+
+        let path = field.path;
+        if (field.type === FieldTypeEnum.eSign) {
+            path = generateESignPath(item.id, field.subType as ESignFieldType);
+        }
+        if (field.type === FieldTypeEnum.fillable) {
+            const pathName =
+                field.subType === 'radio' && field.path
+                    ? parseFillablePathName(field.path)
+                    : field.id;
+            path = generateFillablePath(item.id, pathName);
+        }
+
+        const updates = {
+            recipient: item.id,
+            path,
+        };
+
+        if (
+            field.type === FieldTypeEnum.fillable &&
+            field.subType === 'radio' &&
+            field.path &&
+            onMatchingFieldsConfigChange
+        ) {
+            onMatchingFieldsConfigChange(isRadioGroupSibling, updates);
+            return;
         }
+
+        onFieldConfigChange(updates);
     };
 
     const selectedESignFieldType = useMemo(
@@ -104,6 +132,19 @@ export const FieldConfigPanel: FC<FieldConfigPanelProps> = ({
         }
     };
 
+    const handleRadioGroupNameChange = (groupName: string) => {
+        if (!field.path) {
+            return;
+        }
+
+        if (onMatchingFieldsConfigChange) {
+            onMatchingFieldsConfigChange(isRadioGroupSibling, { groupName });
+            return;
+        }
+
+        onFieldConfigChange({ groupName });
+    };
+
     return (
         <Flex direction="column" gap="4">
             {[
@@ -123,6 +164,14 @@ export const FieldConfigPanel: FC<FieldConfigPanelProps> = ({
                     }
                 />
             )}
+            {field.type === FieldTypeEnum.fillable && field.subType === 'radio' && (
+                <TextField
+                    required
+                    label="Radio Group Name"
+                    value={field.groupName!}
+                    onChange={e => handleRadioGroupNameChange(e.target.value)}
+                />
+            )}
             {(field.type === FieldTypeEnum.fillable || field.type === FieldTypeEnum.eSign) && (
                 <Combobox
                     items={recipientOptions}

package/src/components/pdf-editor/pdf-editor.tsx

@@ -87,6 +87,7 @@ export const PdfEditor: FC<PdfEditorProps> = ({
                     formulaLoadingFormId={formFields.formulaLoadingFormId}
                     selectedField={pdfFieldSelection.selectedField}
                     onFieldConfigChange={pdfFieldSelection.updateField}
+                    onMatchingFieldsConfigChange={pdfFieldSelection.updateMatchingFields}
                     onDeleteField={pdfFieldSelection.deleteSelectedField}
                     recipients={recipients}
                     onDeselectField={pdfFieldSelection.deselectField}

package/src/components/pdf-view/pdf-view-fillable.tsx

@@ -5,6 +5,7 @@ import { dateToUtcZero, getFieldPlaceholderText, toDateInputValue } from '../../
 interface PdfViewFillableProps {
     field: PdfField;
     data?: DataModelValues;
+    readOnly?: boolean;
     fillingBy?: string[];
     viewMode?: PdfViewMode;
     onDataChange?(changedData: DataChangePayload, field: PdfField): void;
@@ -14,6 +15,7 @@ interface FillableTextInputProps {
     field: PdfField;
     value: string;
     disabled: boolean;
+    readOnly?: boolean;
     onChange(value: string): void;
 }
 
@@ -29,10 +31,12 @@ export const FillableTextInput: FC<FillableTextInputProps> = ({
     disabled,
     field,
     onChange,
+    readOnly,
     value,
 }) => {
     return (
         <input
+            readOnly={readOnly}
             type="text"
             style={fillableTextStyles}
             disabled={disabled}
@@ -49,10 +53,12 @@ export const FillableTextareaInput: FC<FillableTextInputProps> = ({
     disabled,
     field,
     onChange,
+    readOnly,
     value,
 }) => {
     return (
         <textarea
+            readOnly={readOnly}
             style={{ ...fillableTextStyles, resize: 'none' }}
             disabled={disabled}
             id={field.path}
@@ -69,6 +75,7 @@ export const PdfViewFillable: FC<PdfViewFillableProps> = ({
     field,
     fillingBy,
     onDataChange,
+    readOnly,
     viewMode,
 }) => {
     const resolvedValue = data?.[field.path!];
@@ -76,7 +83,12 @@ export const PdfViewFillable: FC<PdfViewFillableProps> = ({
     const isFillable =
         viewMode === 'preview' ? true : viewMode === 'fill' ? false : isViewByCurrentRecipient;
 
+    const isInputDisabled = !isFillable || !!readOnly;
+
     const handleDataChange = (fieldValue: DataChangePayload[string]) => {
+        if (readOnly) {
+            return;
+        }
         const changedData = { [field.path!]: fieldValue };
         onDataChange?.(changedData, field);
     };
@@ -101,9 +113,9 @@ export const PdfViewFillable: FC<PdfViewFillableProps> = ({
                     }}
                     type="checkbox"
                     checked={resolvedValue ?? false}
-                    disabled={!isFillable}
+                    disabled={isInputDisabled}
                     name={field.path}
-                    onChange={e => handleDataChange?.(e!.target.checked)}
+                    onChange={e => handleDataChange(e.target.checked)}
                 />
                 {field.label}
             </div>
@@ -131,7 +143,7 @@ export const PdfViewFillable: FC<PdfViewFillableProps> = ({
                     type="radio"
                     value={field.id}
                     checked={resolvedValue === field.id}
-                    disabled={!isFillable}
+                    disabled={isInputDisabled}
                     name={field.path}
                     onChange={() => handleDataChange(field.id)}
                 />
@@ -144,6 +156,7 @@ export const PdfViewFillable: FC<PdfViewFillableProps> = ({
         const dateInputValue = toDateInputValue(resolvedValue);
         return (
             <input
+                readOnly={readOnly}
                 type="date"
                 style={{
                     background: 'inherit',
@@ -168,6 +181,7 @@ export const PdfViewFillable: FC<PdfViewFillableProps> = ({
     if (field.subType === 'number') {
         return (
             <input
+                readOnly={readOnly}
                 type="number"
                 style={{
                     background: 'inherit',
@@ -189,6 +203,7 @@ export const PdfViewFillable: FC<PdfViewFillableProps> = ({
     const TextComponent = field.multiline ? FillableTextareaInput : FillableTextInput;
     return (
         <TextComponent
+            readOnly={readOnly}
             field={field}
             value={resolvedValue ?? ''}
             disabled={!isFillable}

package/src/components/pdf-view/pdf-view.tsx

@@ -25,13 +25,18 @@ export interface PdfViewProps {
     data?: DataModelValues;
     pdfUrl: string;
     loading?: boolean;
+    /**
+     * If true, all fillable fields will be readonly.
+     * This is useful for previewing the form without allowing any changes.
+     */
+    makeFillableFieldsReadonly?: boolean;
     /**
      * UTC date strings (e.g. `'2026-03-17T00:00:00Z'`) treated as non-business days.
      * When provided, date-based calculated fields skip weekends and these holidays
      * when adding/subtracting days or computing date differences.
      */
     holidays?: string[];
-    /*
+    /**
      * fillingBy defines the list of recipient names
      * who are allowed to fill this field.
      * This restriction is enforced only in 'fill' mode
@@ -54,6 +59,7 @@ export const PdfView: FC<PdfViewProps> = ({
     holidays,
     loading = false,
     loadingPlaceholder,
+    makeFillableFieldsReadonly = false,
     onDataChange,
     onLoadSuccess,
     pdfUrl,
@@ -122,6 +128,7 @@ export const PdfView: FC<PdfViewProps> = ({
                                     <PdfViewFillable
                                         data={viewMode === 'preview' ? previewData : data}
                                         field={field}
+                                        readOnly={makeFillableFieldsReadonly}
                                         fillingBy={fillingBy}
                                         viewMode={viewMode}
                                         onDataChange={handleDataChange}

package/src/hooks/index.ts

@@ -1,6 +1,7 @@
 export * from './useFieldDrag';
 export * from './useFieldResize';
 export * from './useFormFields';
+export * from './useLookupOptions';
 export * from './useFormulaEditor';
 export * from './usePdfDocumentRenderer';
 export * from './usePdfFieldDnD';

package/src/hooks/useLookupOptions.ts

@@ -0,0 +1,86 @@
+import { useEffect, useRef, useState } from 'react';
+import {
+    createLookupRequestId,
+    emitLookupOptionsRequest,
+    isSearchableLookupSource,
+    type LookupOption,
+    onLookupOptionsResponse,
+} from '../interface/host-events';
+
+/**
+ * - `idle`     -> no lookup source (or a searchable source we skip for now): use free-text input.
+ * - `loading`  -> request in flight: show a disabled/loading value control.
+ * - `ready`    -> host returned options: render the dropdown.
+ * - `fallback` -> empty/error/timeout: fall back to free-text so the user is never blocked.
+ */
+export type LookupOptionsStatus = 'idle' | 'loading' | 'ready' | 'fallback';
+
+/** Time to wait for the host before falling back to free-text input. */
+const LOOKUP_OPTIONS_TIMEOUT_MS = 10_000;
+
+interface UseLookupOptionsResult {
+    status: LookupOptionsStatus;
+    options: LookupOption[];
+}
+
+/**
+ * Requests host-resolved dropdown options for a field's `fieldLookupSource` and exposes the
+ * resulting render state.
+ *
+ * Re-runs whenever `sourceKey` changes, ignores stale responses whose `requestId` does not match
+ * the latest request, and tears down its listener/timeout on unmount or source change. Falls back
+ * to free text for empty/searchable sources and on error/timeout so the user is never blocked.
+ */
+export const useLookupOptions = (sourceKey: string | undefined): UseLookupOptionsResult => {
+    const [status, setStatus] = useState<LookupOptionsStatus>('idle');
+    const [options, setOptions] = useState<LookupOption[]>([]);
+    const latestRequestIdRef = useRef<string | null>(null);
+
+    useEffect(() => {
+        const normalizedSourceKey = sourceKey?.trim();
+        // No source, or a searchable source we intentionally skip for now.
+        if (!normalizedSourceKey || isSearchableLookupSource(normalizedSourceKey)) {
+            latestRequestIdRef.current = null;
+            setStatus('idle');
+            setOptions([]);
+            return;
+        }
+
+        const requestId = createLookupRequestId();
+        latestRequestIdRef.current = requestId;
+        setStatus('loading');
+        setOptions([]);
+
+        const timeoutId = setTimeout(() => {
+            if (latestRequestIdRef.current !== requestId) {
+                return;
+            }
+            setStatus('fallback');
+            setOptions([]);
+        }, LOOKUP_OPTIONS_TIMEOUT_MS);
+
+        const unsubscribe = onLookupOptionsResponse(response => {
+            // Ignore stale responses (different request, or superseded selection).
+            if (response.requestId !== requestId || latestRequestIdRef.current !== requestId) {
+                return;
+            }
+            clearTimeout(timeoutId);
+            if (response.options.length > 0) {
+                setOptions(response.options);
+                setStatus('ready');
+            } else {
+                setOptions([]);
+                setStatus('fallback');
+            }
+        });
+
+        emitLookupOptionsRequest({ requestId, sourceKey: normalizedSourceKey });
+
+        return () => {
+            clearTimeout(timeoutId);
+            unsubscribe();
+        };
+    }, [sourceKey]);
+
+    return { status, options };
+};

package/src/hooks/usePdfFieldDnD.ts

@@ -43,6 +43,11 @@ const initializeDroppedFieldByType: Record<FieldTypeEnum, InitializeDroppedField
             recipient: recipientName,
             required: false,
             path: generateFillablePath(recipientName, uuidv4()),
+            ...(base.subType === 'radio'
+                ? {
+                      groupName: `Radio Group ${uuidv4()}`,
+                  }
+                : {}),
             ...(defaultSize && {
                 width: defaultSize.width,
                 height: defaultSize.height,

package/src/hooks/usePdfFieldSelection.ts

@@ -26,6 +26,13 @@ export const usePdfFieldSelection = (
         onFieldsChange(fields.map(f => (f.id === selectedFieldId ? { ...f, ...updates } : f)));
     };
 
+    const updateMatchingFields = (
+        predicate: (field: PdfField) => boolean,
+        updates: Partial<PdfField>,
+    ) => {
+        onFieldsChange(fields.map(f => (predicate(f) ? { ...f, ...updates } : f)));
+    };
+
     const deleteSelectedField = () => {
         if (!selectedFieldId) {
             return;
@@ -47,6 +54,7 @@ export const usePdfFieldSelection = (
         selectField,
         deselectField,
         updateField,
+        updateMatchingFields,
         deleteSelectedField,
         moveField,
         resizeField,

package/src/index.ts

@@ -1,2 +1,3 @@
 export * from './interface/types';
+export * from './interface/host-events';
 export * from './components';

package/src/interface/host-events.ts

@@ -0,0 +1,118 @@
+/**
+ * Host <-> editor contract for the "data-model lookup source" dropdown options (BYOD editor).
+ *
+ * A schema field can be tagged (in the template-type editor) with `options.fieldLookupSource`.
+ * When such a field is selected in the conditional-logic UI, the editor does NOT own the option
+ * data — it asks the HOST for it over the EventTarget bus below and renders whatever the host
+ * returns.
+ *
+ * Transport mirrors the unlayer `displayConditionController` / `lookupOptionsController` pattern: a
+ * module-scoped `EventTarget` shared by every consumer of this package (no global `window`
+ * pollution, no cross-instance leakage). The host imports `onLookupOptionsRequest` /
+ * `emitLookupOptionsResponse`; the editor uses `emitLookupOptionsRequest` / `onLookupOptionsResponse`.
+ *
+ * Event names (host <-> editor):
+ *   - "dte-byod-client-mfe:lookup-options-request"   (editor -> host)
+ *   - "dte-byod-client-mfe:lookup-options-response"  (host -> editor)
+ *
+ * The host-side resolver is implemented separately (it wires these events to the app's data
+ * providers, e.g. job types / states).
+ */
+
+/** A single selectable option for a lookup-backed condition value. */
+export interface LookupOption {
+    /** Human-readable text shown in the dropdown. */
+    label: string;
+    /** Value baked into the condition when the option is selected. */
+    key: string;
+}
+
+/** editor -> host: request the predefined options for a lookup source. */
+export interface LookupOptionsRequest {
+    /** Correlates a response to its originating request. */
+    requestId: string;
+    /** The field's `options.fieldLookupSource` value. */
+    sourceKey: string;
+    /** Reserved for searchable sources (e.g. "city"); omitted for full-list sources. */
+    query?: string;
+}
+
+/** host -> editor: the resolved options for a previously emitted request. */
+export interface LookupOptionsResponse {
+    /** Echoes {@link LookupOptionsRequest.requestId}; responses with a stale id are ignored. */
+    requestId: string;
+    options: LookupOption[];
+}
+
+/** editor -> host event name. */
+export const LOOKUP_OPTIONS_REQUEST_EVENT = 'dte-byod-client-mfe:lookup-options-request';
+/** host -> editor event name. */
+export const LOOKUP_OPTIONS_RESPONSE_EVENT = 'dte-byod-client-mfe:lookup-options-response';
+
+/**
+ * Lookup sources that require the host to search an API per typed query. These keep the free-text
+ * input for now (the editor only handles full-list, load-once sources).
+ */
+export const SEARCHABLE_LOOKUP_SOURCES = ['city'] as const;
+
+export type SearchableLookupSource = (typeof SEARCHABLE_LOOKUP_SOURCES)[number];
+
+/** True when a lookup source is searchable (host-side per-query search) rather than a full list. */
+export const isSearchableLookupSource = (sourceKey: string | undefined): boolean => {
+    return !!sourceKey && (SEARCHABLE_LOOKUP_SOURCES as readonly string[]).includes(sourceKey);
+};
+
+/** Generate a unique request id for correlating request/response pairs. */
+export const createLookupRequestId = (): string => {
+    return `lookup-${Date.now()}-${Math.random().toString(36).slice(2, 11)}`;
+};
+
+const lookupOptionsEvents = new EventTarget();
+
+/** editor -> host: ask the host to resolve options for a lookup source. */
+export const emitLookupOptionsRequest = (request: LookupOptionsRequest) => {
+    lookupOptionsEvents.dispatchEvent(
+        new CustomEvent<LookupOptionsRequest>(LOOKUP_OPTIONS_REQUEST_EVENT, { detail: request }),
+    );
+};
+
+/** host side: listen for editor requests. Returns an unsubscribe function. */
+export const onLookupOptionsRequest = (listener: (request: LookupOptionsRequest) => void) => {
+    const handler = (event: Event) => {
+        const detail = (event as CustomEvent<LookupOptionsRequest>).detail;
+        if (!detail) {
+            return;
+        }
+        listener(detail);
+    };
+
+    lookupOptionsEvents.addEventListener(LOOKUP_OPTIONS_REQUEST_EVENT, handler);
+
+    return () => {
+        lookupOptionsEvents.removeEventListener(LOOKUP_OPTIONS_REQUEST_EVENT, handler);
+    };
+};
+
+/** host -> editor: deliver resolved options back to the editor. */
+export const emitLookupOptionsResponse = (response: LookupOptionsResponse) => {
+    lookupOptionsEvents.dispatchEvent(
+        new CustomEvent<LookupOptionsResponse>(LOOKUP_OPTIONS_RESPONSE_EVENT, { detail: response }),
+    );
+};
+
+/** editor side: listen for host responses. Returns an unsubscribe function. */
+export const onLookupOptionsResponse = (listener: (response: LookupOptionsResponse) => void) => {
+    const handler = (event: Event) => {
+        const detail = (event as CustomEvent<LookupOptionsResponse>).detail;
+        if (!detail) {
+            return;
+        }
+        listener(detail);
+    };
+
+    lookupOptionsEvents.addEventListener(LOOKUP_OPTIONS_RESPONSE_EVENT, handler);
+
+    return () => {
+        lookupOptionsEvents.removeEventListener(LOOKUP_OPTIONS_RESPONSE_EVENT, handler);
+    };
+};

package/src/interface/types.ts

@@ -89,6 +89,7 @@ export interface PdfField {
     y: number;
     page: number;
     label: string;
+    groupName?: string;
     width: number;
     height: number;
     required?: boolean;
@@ -281,12 +282,26 @@ export type ConditionOperator =
     | (typeof STRING_OPERATORS)[number]['value']
     | (typeof NUMBER_OPERATORS)[number]['value'];
 
+/** Operators for radio-group fillable fields. */
+export const RADIO_OPERATORS = [
+    { label: 'Is equal to', value: 'is_equal_to' },
+    { label: 'Is not equal to', value: 'is_not_equal_to' },
+] as const;
+
 /** Operators that do not require a value (empty/is not empty) */
 export const VALUE_LESS_OPERATORS: ConditionOperator[] = ['is_empty', 'is_not_empty'];
 
+export interface RadioGroupOption {
+    id: string;
+    label: string;
+}
+
 export interface DataPointOption {
     fieldType: 'number' | 'string';
     fullKey: string;
     title: string;
     formSnapshot?: FormulaFieldFormSnapshot;
+    isRadioGroup?: boolean;
+    radioOptions?: RadioGroupOption[];
+    lookupSource?: string;
 }

package/src/utils/conditions/__tests__/schema-data-points.utils.test.ts

@@ -122,6 +122,41 @@ describe('getDocumentFieldsDataPointOptions', () => {
             { fieldType: 'string', fullKey: 'fillable_a_b', title: 'fillable_a_b' },
         ]);
     });
+
+    test('groups radio fields with the same path into a single option using groupName', () => {
+        const sharedPath = 'fillable_signer1_payment';
+        const fields = [
+            buildField({
+                id: 'radio-yes',
+                path: sharedPath,
+                subType: 'radio',
+                label: 'Yes',
+                groupName: 'Payment Method',
+            }),
+            buildField({
+                id: 'radio-no',
+                path: sharedPath,
+                subType: 'radio',
+                label: 'No',
+                groupName: 'Payment Method',
+            }),
+            buildField({ id: 'text-1', path: 'fillable_signer1_name', label: 'Name', subType: 'text' }),
+        ];
+
+        expect(subject(fields)).toEqual([
+            { fieldType: 'string', fullKey: 'fillable_signer1_name', title: 'Name' },
+            {
+                fieldType: 'string',
+                fullKey: sharedPath,
+                title: 'Payment Method',
+                isRadioGroup: true,
+                radioOptions: [
+                    { id: 'radio-no', label: 'No' },
+                    { id: 'radio-yes', label: 'Yes' },
+                ],
+            },
+        ]);
+    });
 });
 
 describe('getDataPointOptions', () => {

package/src/utils/conditions/schema-data-points.utils.ts

@@ -18,7 +18,7 @@ function isUseInConditionals(
 
 function isValueNode(
     node: SchemaNode,
-): node is { type: 'string' | 'number'; title?: string; options?: object } {
+): node is { type: 'string' | 'number'; title?: string; options?: { fieldLookupSource?: string } } {
     return node?.type === 'string' || node?.type === 'number';
 }
 
@@ -44,6 +44,7 @@ function walkSchema(
                 fieldType,
                 fullKey,
                 title: fullTitle || fullKey,
+                lookupSource: node.options?.fieldLookupSource?.trim(),
             });
         }
     }
@@ -58,6 +59,7 @@ export function getSchemaDataPointOptions(schema: SchemaObject | undefined): Dat
 /**
  * Data point options from document fields: fillable only (no calculated fields).
  * Uses field.path as fullKey so condition evaluation can read from the same data object.
+ * Radio buttons sharing the same path are grouped into a single option using groupName.
  */
 export function getDocumentFieldsDataPointOptions(
     fields: PdfField[] | undefined,
@@ -66,17 +68,47 @@ export function getDocumentFieldsDataPointOptions(
         return [];
     }
     const result: DataPointOption[] = [];
-    for (const f of fields) {
-        if (!f.path || f.type !== FieldTypeEnum.fillable) {
+    const radioGroupsByPath = new Map<string, PdfField[]>();
+
+    for (const field of fields) {
+        if (!field.path || field.type !== FieldTypeEnum.fillable) {
+            continue;
+        }
+        if (field.subType === 'radio') {
+            const group = radioGroupsByPath.get(field.path) ?? [];
+            group.push(field);
+            radioGroupsByPath.set(field.path, group);
             continue;
         }
-        const fieldType = f.subType === 'number' ? 'number' : 'string';
+        const fieldType = field.subType === 'number' ? 'number' : 'string';
         result.push({
             fieldType,
-            fullKey: f.path,
-            title: f.label || f.path,
+            fullKey: field.path,
+            title: field.label || field.path,
         });
     }
+
+    for (const [path, radioFields] of radioGroupsByPath) {
+        const sortedRadioFields = [...radioFields].sort((a, b) =>
+            (a.label || '').localeCompare(b.label || ''),
+        );
+        const groupName =
+            sortedRadioFields.find(radioField => radioField.groupName)?.groupName ??
+            sortedRadioFields[0]?.label ??
+            path;
+
+        result.push({
+            fieldType: 'string',
+            fullKey: path,
+            title: groupName,
+            isRadioGroup: true,
+            radioOptions: sortedRadioFields.map(radioField => ({
+                id: radioField.id,
+                label: radioField.label || radioField.id,
+            })),
+        });
+    }
+
     return result.sort((a, b) => a.title.localeCompare(b.title));
 }