@syncfusion/ej2-react-form-renderer 0.1.1-beta → 0.1.2-beta

package/src/renderFormField.js

@@ -12,8 +12,9 @@ import { MessageComponent } from '@syncfusion/ej2-react-notifications';
 import { ImageEditorComponent } from '@syncfusion/ej2-react-image-editor';
 import { DataGridComponent } from './DataGridComponent';
 import { RichTextEditorComponent, Toolbar, HtmlEditor, Inject as RTEInject, Link, QuickToolbar } from '@syncfusion/ej2-react-richtexteditor';
-import { mapButtonStyleToClass, mapPositionToJustifyContent, resolveButtonType } from './utils';
+import { mapButtonStyleToClass, mapPositionToJustifyContent, resolveButtonType, resolveConditionalData, resolveOptions, useFetchOptions } from './utils';
 import CheckboxGroup from './CheckboxGroup';
+import { ConditionalRuleEngine } from './ConditionalRuleEngine';
 /**
  * Converts htmlAttributes from array format to object format
  */
@@ -33,7 +34,7 @@ const normalizeAttributes = (attributes) => {
 /**
  * Renders a single form field component
  */
-export const renderFormField = ({ component, value, onChange, onBlur, ref, hasError = false, onClick, locale }) => {
+export const RenderFormField = ({ component, value, onChange, onBlur, ref, hasError = false, onClick, locale, formState }) => {
     const commonProps = {
         floatLabelType: (component.floatLabelType || 'Never'),
         placeholder: component.placeholder || '',
@@ -63,38 +64,54 @@ export const renderFormField = ({ component, value, onChange, onBlur, ref, hasEr
         case 'textarea':
             return (_jsx(TextAreaComponent, { id: component.id, name: component.id, locale: locale, ...commonProps, value: value !== undefined ? value : (component.defaultValue || ''), cols: component.cols || 200, rows: component.textareaRows || 4, showClearButton: component.showClearButton || false, readonly: component.readOnly || false, maxLength: component?.maxLength || 255, cssClass: cssClass, htmlAttributes: htmlAttrs, appendTemplate: component.suffix, prependTemplate: component.prefix, resizeMode: 'Vertical', ...createValidationHandlers((args) => args.value || ''), ref: ref }, component.id));
         case 'number':
-            return (_jsx(NumericTextBoxComponent, { id: component.id, name: component.id, locale: locale, ...commonProps, value: value !== undefined ? value : (component.defaultValue || 0), decimals: component.decimals || 2, currency: component.currency, format: component.numberFormat || 'n2', step: component.step || 1, min: component.minValue || undefined, max: component.maxValue || undefined, readonly: component.readOnly || false, showClearButton: component.showClearButton || false, cssClass: cssClass, htmlAttributes: htmlAttrs, appendTemplate: component.suffix, prependTemplate: component.prefix, ...createValidationHandlers((args) => args.value || ''), ref: ref }, component.id));
+            value = value === "" ? undefined : value;
+            return (_jsx(NumericTextBoxComponent, { id: component.id, name: component.id, locale: locale, ...commonProps, value: value !== undefined || value !== "" ? value : (component.defaultValue || 0), decimals: component.decimals || 2, currency: component.currency, format: component.numberFormat || 'n2', step: component.step || 1, min: component.minValue || undefined, max: component.maxValue || undefined, readonly: component.readOnly || false, showClearButton: component.showClearButton || false, cssClass: cssClass, htmlAttributes: htmlAttrs, appendTemplate: component.suffix, prependTemplate: component.prefix, ...createValidationHandlers((args) => args.value || ''), ref: ref }, `${component.id}-${component.minValue}-${component.maxValue}`));
         case 'checkbox':
             const checkboxLabel = component.label && component.required
                 ? `${component.label} *`
                 : component.label;
-            return (_jsx(CheckBoxComponent, { id: component.id, locale: locale, name: component.id, label: checkboxLabel, labelPosition: component.checkboxLabelPosition, checked: component.defaultValue ?? (component.checked ?? false), indeterminate: component.indeterminate || false, disabled: component.disabled, cssClass: cssClass, htmlAttributes: htmlAttrs, change: (args) => onChange(args.checked), ref: ref }, component.id));
+            return (_jsx(CheckBoxComponent, { id: component.id, locale: locale, name: component.id, label: checkboxLabel, labelPosition: component.checkboxLabelPosition, checked: (component.checked ?? false) || (value ?? false), indeterminate: component.indeterminate || false, disabled: component.disabled, cssClass: cssClass, htmlAttributes: htmlAttrs, change: (args) => onChange(args.checked), ref: ref }, component.id));
         case 'checkboxGroup':
-            return (_jsx(CheckboxGroup, { component: component, value: value, onChange: (v) => onChange(v), optionRef: ref }, component.id));
+            const fetchedCheckboxOptions = useFetchOptions(component.options);
+            const resolvedCheckboxOptions = resolveOptions(component.options, fetchedCheckboxOptions);
+            const finalCheckboxOptions = resolvedCheckboxOptions.length > 0 ? resolvedCheckboxOptions : component.options || ['Option 1'];
+            return (_jsx(CheckboxGroup, { component: { ...component, options: finalCheckboxOptions }, value: value, onChange: (v) => onChange(v), optionRef: ref }, component.id));
         case 'radio':
-            return (_jsx("div", { id: `${component.id}-group`, className: `e-radio-group ${errorClass}`, children: (component.options || ['Option 1']).map((option, idx) => {
+            return (_jsx("div", { id: `${component.id}-group`, className: `e-radio-group ${errorClass}`, children: (Array.isArray(component.options) ? component.options : ['Option 1']).map((option, idx) => {
                     const optionValue = option;
                     const optionText = option;
-                    return (_jsx("div", { style: { marginBottom: '8px' }, children: _jsx(RadioButtonComponent, { id: `${component.id}_${idx}_${optionValue}`, name: component.id, label: optionText, locale: locale, disabled: component.disabled, value: optionValue, htmlAttributes: htmlAttrs, labelPosition: component.fieldLabelPosition, checked: component.defaultValue === optionValue, cssClass: cssClass, change: (args) => {
+                    return (_jsx("div", { style: { marginBottom: '8px' }, children: _jsx(RadioButtonComponent, { id: `${component.id}_${idx}_${optionValue}`, name: component.id, label: optionText, locale: locale, disabled: component.disabled, value: optionValue, htmlAttributes: htmlAttrs, labelPosition: component.fieldLabelPosition, checked: component.defaultValue === optionValue || value === optionValue, cssClass: cssClass, change: (args) => {
                                 if (args.value === optionValue) {
                                     onChange(optionValue);
                                 }
                             }, ref: ref ? (el) => ref(el, idx) : undefined }, component.id) }, idx));
                 }) }));
         case 'dropdown':
-            return (_jsx(DropDownListComponent, { id: component.id, name: component.id, ...commonProps, locale: locale, cssClass: cssClass, dataSource: component.options || ["Option 1"], value: value !== undefined ? value : (component.defaultValue ?? null), showClearButton: component.showClearButton || false, readonly: component.readOnly || false, enableVirtualization: component.enableVirtualization || false, popupHeight: component.popupHeight || '300px', popupWidth: component.popupWidth || '100%', htmlAttributes: htmlAttrs, ...createValidationHandlers((args) => args.value || ''), ref: ref }, component.id));
+            const fetchedDropdownOptions = useFetchOptions(component.options);
+            const resolvedDropdownOptions = resolveOptions(component.options, fetchedDropdownOptions);
+            let finalDropdownOptions = resolvedDropdownOptions.length > 0 ? resolvedDropdownOptions : component.options || ['Option 1'];
+            if (component.conditions?.choiceBasedField) {
+                finalDropdownOptions = ConditionalRuleEngine.getChoiceBasedOptions(component.conditions.choiceBasedField, finalDropdownOptions, formState?.values, component.conditions.choiceBasedField.primaryFieldId);
+                if (finalDropdownOptions.length > 0 && value != null && !finalDropdownOptions.includes(value)) {
+                    formState.onChange(component.id, { value: null });
+                }
+            }
+            return (_jsx(DropDownListComponent, { id: component.id, name: component.id, ...commonProps, locale: locale, cssClass: cssClass, dataSource: finalDropdownOptions, value: value !== undefined ? value : (component.defaultValue ?? null), showClearButton: component.showClearButton || false, readonly: component.readOnly || false, enableVirtualization: component.enableVirtualization || false, popupHeight: component.popupHeight || '300px', popupWidth: component.popupWidth || '100%', htmlAttributes: htmlAttrs, ...createValidationHandlers((args) => args.value || ''), ref: ref }, component.id));
         case 'multiselect':
-            return (_jsx(MultiSelectComponent, { id: component.id, name: component.id, locale: locale, ...commonProps, value: value !== undefined ? value : (component.defaultValue ?? null), placeholder: component.placeholder, dataSource: component.options || ["Option 1"], fields: { text: 'text', value: 'value' }, showClearButton: component.showClearButton || false, readonly: component.readOnly || false, allowCustomValue: component.allowCustomValue || false, addTagOnBlur: component.addTagOnBlur || false, delimiterChar: component.delimiterChar || ',', showSelectAll: component.showSelectAll || false, mode: component.showSelectAll ? 'CheckBox' : undefined, selectAllText: component.selectAllText, unSelectAllText: component.unSelectAllText, showDropDownIcon: component.showDropDownIcon !== false, enableVirtualization: component.enableVirtualization || false, popupHeight: component.popupHeight || '300px', popupWidth: component.popupWidth || '100%', cssClass: cssClass, htmlAttributes: htmlAttrs, ...createValidationHandlers((args) => args.value || ''), ref: ref, children: _jsx(Inject, { services: [CheckBoxSelection] }) }, component.id));
+            const fetchedMultiSelectOptions = useFetchOptions(component.options);
+            const resolvedMultiSelectOptions = resolveOptions(component.options, fetchedMultiSelectOptions);
+            const finalMultiSelectOptions = resolvedMultiSelectOptions.length > 0 ? resolvedMultiSelectOptions : component.options || ['Option 1'];
+            return (_jsx(MultiSelectComponent, { id: component.id, name: component.id, locale: locale, ...commonProps, value: value !== undefined ? value : (component.defaultValue ?? null), placeholder: component.placeholder, dataSource: finalMultiSelectOptions, fields: { text: 'text', value: 'value' }, showClearButton: component.showClearButton || false, readonly: component.readOnly || false, allowCustomValue: component.allowCustomValue || false, addTagOnBlur: component.addTagOnBlur || false, delimiterChar: component.delimiterChar || ',', showSelectAll: component.showSelectAll || false, mode: component.showSelectAll ? 'CheckBox' : undefined, selectAllText: component.selectAllText, unSelectAllText: component.unSelectAllText, showDropDownIcon: component.showDropDownIcon !== false, enableVirtualization: component.enableVirtualization || false, popupHeight: component.popupHeight || '300px', popupWidth: component.popupWidth || '100%', cssClass: cssClass, htmlAttributes: htmlAttrs, ...createValidationHandlers((args) => args.value || ''), ref: ref, children: _jsx(Inject, { services: [CheckBoxSelection] }) }, component.id));
         case 'date':
-            return (_jsx(DatePickerComponent, { ...commonProps, id: component.id, name: component.id, locale: locale, value: value !== undefined ? value : (component.defaultValue ?? null), floatLabelType: component.floatLabelType || 'Never', format: component.format || 'MM/dd/yyyy', placeholder: component.placeholder || '', readOnly: component.readOnly || false, showClearButton: component.showClearButton !== false ? true : false, showTodayButton: component.showTodayButton !== false ? true : false, calendarMode: component.calendarMode || 'Gregorian', dayHeaderFormat: component.dayHeaderFormat || 'Short', depth: component.depth || 'Month', start: component.start || 'Month', firstDayOfWeek: component.firstDayOfWeek || 0, min: component?.minDate ? new Date(component.minDate) : undefined, max: component?.maxDate ? new Date(component.maxDate) : undefined, cssClass: cssClass, htmlAttributes: htmlAttrs, ...createValidationHandlers((args) => args.value || ''), ref: ref, children: _jsx(Inject, { services: [Islamic] }) }, component.id));
+            return (_jsx(DatePickerComponent, { ...commonProps, id: component.id, name: component.id, locale: locale, value: value !== undefined ? value : (component.defaultValue ?? null), floatLabelType: component.floatLabelType || 'Never', format: component.format || 'MM/dd/yyyy', placeholder: component.placeholder || '', readOnly: component.readOnly || false, showClearButton: component.showClearButton !== false ? true : false, showTodayButton: component.showTodayButton !== false ? true : false, calendarMode: component.calendarMode || 'Gregorian', dayHeaderFormat: component.dayHeaderFormat || 'Short', depth: component.depth || 'Month', start: component.start || 'Month', firstDayOfWeek: component.firstDayOfWeek || 0, min: component?.minDate ? new Date(component.minDate) : undefined, max: component?.maxDate ? new Date(component.maxDate) : undefined, cssClass: cssClass, htmlAttributes: htmlAttrs, ...createValidationHandlers((args) => args.value || ''), ref: ref, children: _jsx(Inject, { services: [Islamic] }) }, `${component.id}-${component.minDate}-${component.maxDate}`));
         case 'dateTime':
-            return (_jsx(DateTimePickerComponent, { ...commonProps, id: component.id, locale: locale, name: component.id, floatLabelType: component.floatLabelType || 'Never', dayHeaderFormat: component.dayHeaderFormat || 'Short', value: value !== undefined ? value : (component.defaultValue ?? null), format: component.format || 'MM/dd/yyyy hh:mm a', showClearButton: component.showClearButton !== false, showTodayButton: component.showTodayButton !== false ? true : false, depth: component.depth || 'Month', start: component.start || 'Month', step: component.step || 1, readonly: component.readOnly || false, min: component?.minDate ? new Date(component.minDate) : undefined, max: component?.maxDate ? new Date(component.maxDate) : undefined, minTime: component?.minTime ? new Date(`2000-01-01 ${component.minTime}`) : undefined, maxTime: component?.maxTime ? new Date(`2000-01-01 ${component.maxTime}`) : undefined, enableMask: false, cssClass: cssClass, htmlAttributes: htmlAttrs, ...createValidationHandlers((args) => args.value || ''), ref: ref, children: _jsx(Inject, { services: [Islamic] }) }, component.id));
+            return (_jsx(DateTimePickerComponent, { id: `${component.id}-${component.minTime}-${component.maxTime}-${component.minDate}-${component.maxDate}`, ...commonProps, locale: locale, name: component.id, floatLabelType: component.floatLabelType || 'Never', dayHeaderFormat: component.dayHeaderFormat || 'Short', value: value !== undefined ? value : (component.defaultValue ?? null), format: component.format || 'MM/dd/yyyy hh:mm a', showClearButton: component.showClearButton !== false, showTodayButton: component.showTodayButton !== false ? true : false, depth: component.depth || 'Month', start: component.start || 'Month', step: component.step || 1, readonly: component.readOnly || false, min: component?.minDate ? new Date(component.minDate) : undefined, max: component?.maxDate ? new Date(component.maxDate) : undefined, minTime: component?.minTime ? new Date(`2000-01-01 ${component.minTime}`) : undefined, maxTime: component?.maxTime ? new Date(`2000-01-01 ${component.maxTime}`) : undefined, enableMask: false, cssClass: cssClass, htmlAttributes: htmlAttrs, ...createValidationHandlers((args) => args.value || ''), ref: ref, children: _jsx(Inject, { services: [Islamic] }) }));
         case 'time':
-            return (_jsx(TimePickerComponent, { id: component.id, locale: locale, name: component.id, floatLabelType: component.floatLabelType || 'Never', placeholder: component.placeholder || '', enabled: !component.disabled, value: value !== undefined ? value : (component.defaultValue ?? null), format: component.format || 'hh:mm a', showClearButton: component.showClearButton !== false, step: component.step || 30, readonly: component.readOnly || false, min: component?.minTime ? new Date(`2000-01-01 ${component.minTime}`) : undefined, max: component?.maxTime ? new Date(`2000-01-01 ${component.maxTime}`) : undefined, enableMask: false, cssClass: cssClass, htmlAttributes: htmlAttrs, ...createValidationHandlers((args) => args.value || ''), ref: ref }, component.id));
+            return (_jsx(TimePickerComponent, { id: `${component.id}-${component.minTime}-${component.maxTime}`, locale: locale, name: component.id, floatLabelType: component.floatLabelType || 'Never', placeholder: component.placeholder || '', enabled: !component.disabled, value: value !== undefined ? value : (component.defaultValue ?? null), format: component.format || 'hh:mm a', showClearButton: component.showClearButton !== false, step: component.step || 30, readonly: component.readOnly || false, min: component?.minTime ? new Date(`2000-01-01 ${component.minTime}`) : undefined, max: component?.maxTime ? new Date(`2000-01-01 ${component.maxTime}`) : undefined, enableMask: false, cssClass: cssClass, htmlAttributes: htmlAttrs, ...createValidationHandlers((args) => args.value || ''), ref: ref }, component.id));
         case 'dateRange':
             return (_jsx(DateRangePickerComponent, { id: component.id, locale: locale, name: component.id, floatLabelType: component.floatLabelType || 'Never', dayHeaderFormat: component.dayHeaderFormat || 'Short', placeholder: component.placeholder || '', enabled: !component.disabled, value: value !== undefined ? value : (component.defaultValue ?? null), depth: component.depth || 'Month', start: component.start || 'Month', min: component?.minDate ? new Date(component.minDate) : undefined, max: component?.maxDate ? new Date(component.maxDate) : undefined, format: component.format || 'MM/dd/yyyy', separator: component.separator || ' - ', showClearButton: component.showClearButton !== false, readonly: component.readOnly || false, cssClass: cssClass, htmlAttributes: htmlAttrs, ...createValidationHandlers((args) => args.value || ''), ref: ref }, component.id));
         case 'switch':
-            return (_jsx(SwitchComponent, { id: component.id, locale: locale, value: component.defaultValue, name: component.id, checked: component.defaultValue ?? (component.checked ?? false), disabled: component.disabled, onLabel: component.onLabel || '', offLabel: component.offLabel || '', cssClass: cssClass, htmlAttributes: htmlAttrs, change: (args) => onChange(args.checked), ref: ref }, component.id));
+            return (_jsx(SwitchComponent, { id: component.id, locale: locale, value: component.defaultValue, name: component.id, checked: (component.checked ?? false) || (value ?? false), disabled: component.disabled, onLabel: component.onLabel || '', offLabel: component.offLabel || '', cssClass: cssClass, htmlAttributes: htmlAttrs, change: (args) => onChange(args.checked), ref: ref }, component.id));
         case 'button':
             // If buttonsGroups is provided, render a button group in-place of a single button
             const groupButtons = (component.buttonsGroups || component.buttons || []);
@@ -190,7 +207,13 @@ export const renderFormField = ({ component, value, onChange, onBlur, ref, hasEr
             return (_jsx(MessageComponent, { id: component.id, locale: locale, severity: component.severity || component.messageType || 'info', variant: component.variant, content: component.content || 'Message', showCloseIcon: component.showCloseIcon, showIcon: (component.showIcon === undefined ? false : component.showIcon) || false, disabled: component.disabled, cssClass: cssClass, ref: ref }, component.id));
         case 'dataGrid':
             const dg = component;
-            return (_jsx("div", { id: dg.id, className: dg.cssClass, children: _jsx(DataGridComponent, { id: dg.id, type: 'dataGrid', locale: locale, label: dg.label || '', name: dg.name || '', columns: dg.columns || [], dataSource: value !== undefined ? value : (dg.dataSource ?? dg.dataSource ?? []), height: dg.height || '200px', width: dg.width || '100%', pageSize: dg.pageSize || 6, allowPaging: dg.allowPaging !== false, allowAdding: dg.allowAdding !== false, allowEditing: dg.allowEditing !== false, allowDeleting: dg.allowDeleting !== false, onDataChange: (data) => onChange(data), cssClass: cssClass, ref: ref }) }, dg.id));
+            const conditionalData = resolveConditionalData(dg.conditions, formState?.values || {})?.dataSource;
+            const conditionalColumns = resolveConditionalData(dg.conditions, formState?.values || {})?.columns;
+            const fetchedDataSource = conditionalData ? useFetchOptions(conditionalData) : useFetchOptions(dg.dataSource);
+            const resolvedDataSource = conditionalData ? resolveOptions(conditionalData, fetchedDataSource) : resolveOptions(dg.dataSource, fetchedDataSource);
+            const finalDataSource = resolvedDataSource.length > 0 ? resolvedDataSource : (dg.dataSource ?? []);
+            const finalColumns = conditionalColumns && conditionalColumns.length > 0 ? conditionalColumns : (dg.columns ?? []);
+            return (_jsx("div", { id: dg.id, className: dg.cssClass, children: _jsx(DataGridComponent, { id: dg.id, type: 'dataGrid', locale: locale, label: dg.label || '', name: dg.name || '', columns: finalColumns, dataSource: value !== undefined ? value : finalDataSource, height: dg.height || '200px', width: dg.width || '100%', pageSize: dg.pageSize || 6, allowPaging: dg.allowPaging !== false, allowFiltering: dg.allowFiltering, allowAdding: dg.allowAdding !== false, allowEditing: dg.allowEditing !== false, allowDeleting: dg.allowDeleting !== false, onDataChange: (data) => onChange(data), cssClass: cssClass, ref: ref }) }, dg.id));
         case 'richTextEditor':
             const toolbarSettings = {
                 items: ['Undo', 'Redo', '|', 'Bold', 'Italic', 'Underline', 'StrikeThrough', 'InlineCode', '|', 'CreateLink', 'Blockquote', '|', 'BulletFormatList', 'NumberFormatList', '|', 'Formats', 'Alignments', '|', 'Outdent', 'Indent', '|',

package/src/types/FormSchema.d.ts

@@ -19,6 +19,11 @@ export interface CompositeConditionalRule {
     rules: (ConditionalRule | CompositeConditionalRule)[];
 }
 export type ConditionType = ConditionalRule | CompositeConditionalRule;
+export interface ChoiceBasedFieldRule {
+    primaryFieldId: string;
+    choiceMapping: Record<string, string[]>;
+    showAllWhenNotMapped?: boolean;
+}
 export interface FormComponentConditions {
     visibleWhen?: ConditionType;
     hideWhen?: ConditionType;
@@ -29,10 +34,10 @@ export interface FormComponentConditions {
         condition: ConditionType;
         value: any;
     };
+    choiceBasedField?: ChoiceBasedFieldRule;
 }
 export interface FormSchema {
     version: string;
-    theme: string;
     components: FormComponent[];
 }
 export interface FormComponent {
@@ -180,6 +185,7 @@ export interface FormComponent {
     tableCells?: FormComponent[][][];
     parentPath?: string;
     properties?: Record<string, any>;
+    expressionValue?: string;
     conditions?: FormComponentConditions;
     _configured?: boolean;
 }

package/src/utils.js

@@ -1,4 +1,8 @@
+import React from "react";
 import { Internationalization } from '@syncfusion/ej2-base';
+import { DataManager, Query, UrlAdaptor, WebApiAdaptor, ODataV4Adaptor } from '@syncfusion/ej2-data';
+import { ConditionalRuleEngine } from "./ConditionalRuleEngine";
+import { UI_TYPE_TO_SEMANTIC_TYPE } from './json-converter';
 /**
  * Maps button style to Syncfusion CSS classes
  * @param style - Button style ('primary' | 'flat' | 'information' | 'error' | 'success' | 'warning')
@@ -144,3 +148,261 @@ export function formatDateValues(component, value) {
     }
     return value;
 }
+export const getComponentFromSchema = (id, formSchema) => {
+    if (!id || !formSchema)
+        return null;
+    const findInComponents = (components) => {
+        for (const comp of components) {
+            if (comp.id === id || comp.name === id)
+                return comp;
+            if (comp.children) {
+                const found = findInComponents(comp.children);
+                if (found)
+                    return found;
+            }
+            if (comp.tableCells) {
+                for (const row of comp.tableCells) {
+                    for (const cell of row) {
+                        const found = findInComponents(cell);
+                        if (found)
+                            return found;
+                    }
+                }
+            }
+            if (comp.tabItems) {
+                for (const tab of comp.tabItems) {
+                    if (tab.content) {
+                        const found = findInComponents(tab.content);
+                        if (found)
+                            return found;
+                    }
+                }
+            }
+        }
+        return null;
+    };
+    return findInComponents(formSchema.components || []);
+};
+/**
+ * Helper function to get the appropriate adaptor instance
+ * @param adaptorType - Type of adaptor ('WebApiAdaptor' | 'UrlAdaptor' | 'ODataV4Adaptor')
+ * @returns Adaptor instance
+ */
+export const getAdaptorInstance = (adaptorType) => {
+    switch (adaptorType) {
+        case 'WebApiAdaptor':
+            return new WebApiAdaptor();
+        case 'ODataV4Adaptor':
+            return new ODataV4Adaptor();
+        case 'UrlAdaptor':
+        default:
+            return new UrlAdaptor();
+    }
+};
+/**
+ * Extracts data from a nested path using dot notation and array indices
+ * @param data - The data object or array
+ * @param path - Path to the data (e.g., 'results.items', '[0].data', 'response[0].values')
+ * @returns Extracted data or empty array
+ */
+export const extractDataFromPath = (data, path) => {
+    if (!path || data === null || data === undefined)
+        return data;
+    // Split by dots but preserve array indices
+    const parts = path.split(/\.(?![^\[]*\])/); // Split by dots not inside brackets
+    let current = data;
+    for (const part of parts) {
+        if (current === null || current === undefined) {
+            return null;
+        }
+        // Handle array index notation like [0] or results[0]
+        const arrayMatch = part.match(/^(\w*)\[(\d+)\]$/);
+        if (arrayMatch) {
+            const propName = arrayMatch[1];
+            const index = parseInt(arrayMatch[2]);
+            // If propName is empty, current should be an array
+            if (!propName) {
+                current = current[index];
+            }
+            else {
+                current = current[propName]?.[index];
+            }
+        }
+        else {
+            // Regular property access
+            current = current[part];
+        }
+    }
+    return current;
+};
+/**
+ * Custom hook to fetch options from URL with custom headers
+ * @param componentOptions - The component options object which may contain URL and headers
+ * @param adaptorType - Type of adaptor to use ('WebApiAdaptor' | 'UrlAdaptor' | 'ODataV4Adaptor')
+ * @returns Array of fetched options
+ */
+export const useFetchOptions = (componentOptions) => {
+    const [fetchedOptions, setFetchedOptions] = React.useState([]);
+    React.useEffect(() => {
+        const isUrlType = componentOptions &&
+            typeof componentOptions === 'object' &&
+            !Array.isArray(componentOptions) &&
+            componentOptions.type === 'url' &&
+            componentOptions.url;
+        if (isUrlType) {
+            const urlConfig = componentOptions;
+            try {
+                const headers = {};
+                if (urlConfig.headers && Array.isArray(urlConfig.headers)) {
+                    urlConfig.headers.forEach((h) => {
+                        if (h.key?.trim()) {
+                            headers[h.key] = h.value;
+                        }
+                    });
+                }
+                // ✅ Create DataManager with selected adaptor
+                const dataManager = new DataManager({
+                    url: urlConfig.url,
+                    adaptor: getAdaptorInstance(urlConfig.adaptorType),
+                    headers: Object.keys(headers).length ? headers : undefined
+                });
+                // ✅ Build Query (dynamic support)
+                let query = new Query();
+                if (urlConfig.search && urlConfig.search.enabled && urlConfig.search.fields && urlConfig.search.fields.length > 0) {
+                    const searchKey = urlConfig.search.key || 'search';
+                    query = query.search(searchKey, urlConfig.search.fields);
+                }
+                // Apply sort query
+                if (urlConfig.sort && urlConfig.sort.enabled && urlConfig.sort.field) {
+                    const sortDirection = urlConfig.sort.direction === 'descending' ? 'descending' : 'ascending';
+                    query = query.sortBy(urlConfig.sort.field, sortDirection);
+                }
+                // Apply filter queries
+                if (urlConfig.filters && Array.isArray(urlConfig.filters) && urlConfig.filters.length > 0) {
+                    urlConfig.filters.forEach((f) => {
+                        if (f.field && f.operator && f.value) {
+                            query = query.where(f.field, f.operator, f.value);
+                        }
+                    });
+                }
+                // Example: add params (query string)
+                if (urlConfig.queryParams) {
+                    Object.keys(urlConfig.queryParams).forEach(key => {
+                        query = query.addParams(key, urlConfig.queryParams[key]);
+                    });
+                }
+                // Example: paging
+                if (urlConfig.skip)
+                    query = query.skip(urlConfig.skip);
+                if (urlConfig.take)
+                    query = query.take(urlConfig.take);
+                // ✅ Execute query
+                dataManager.executeQuery(query).then((res) => {
+                    let data = res.result;
+                    if (urlConfig.dataPath) {
+                        data = extractDataFromPath(data, urlConfig.dataPath);
+                    }
+                    if (Array.isArray(data)) {
+                        setFetchedOptions(data);
+                    }
+                    else if (typeof data === 'string') {
+                        setFetchedOptions([data]);
+                    }
+                    else {
+                        setFetchedOptions([]);
+                    }
+                }).catch((err) => {
+                    console.error('DataManager fetch error:', err);
+                    setFetchedOptions([]);
+                });
+            }
+            catch (err) {
+                console.error('Setup error:', err);
+                setFetchedOptions([]);
+            }
+        }
+    }, [componentOptions]);
+    return fetchedOptions;
+};
+/**
+ * Resolves component options from various sources
+ * Handles array options, URL-fetched options, and raw data options
+ * @param options - Component options (can be array, URL config, or raw data config)
+ * @param fetchedOptions - Pre-fetched options from URL
+ * @returns Resolved array of options
+ */
+export const resolveOptions = (options, fetchedOptions) => {
+    // If URL type with fetched data, return fetched options
+    if (options && typeof options === 'object' && !Array.isArray(options) && options.type === 'url') {
+        return fetchedOptions.length > 0 ? fetchedOptions : [];
+    }
+    // If already an array, return as-is
+    if (Array.isArray(options)) {
+        return options;
+    }
+    // If it's raw data type
+    if (options && typeof options === 'object' && !Array.isArray(options) && options.type === 'raw') {
+        return Array.isArray(options.data) ? options.data : [];
+    }
+    return [];
+};
+export const collectAvailableFieldNames = (components) => {
+    const fieldNames = [];
+    const traverse = (comps) => {
+        comps.forEach(comp => {
+            // Only add fields that have a name and aren't layout components
+            if (comp.name && !['panel', 'table', 'tabs', 'card', 'message', 'button', 'splitButton', 'staticHtml'].includes(comp.type)) {
+                // Get semantic type mapping for this component
+                const semanticType = UI_TYPE_TO_SEMANTIC_TYPE[comp.type];
+                if (semanticType) {
+                    fieldNames.push({
+                        name: comp.name,
+                        type: semanticType.type,
+                        ...(semanticType.format && { format: semanticType.format })
+                    });
+                }
+            }
+            // Traverse nested components
+            if (comp.children)
+                traverse(comp.children);
+            if (comp.tabItems) {
+                comp.tabItems.forEach(tab => {
+                    if (tab.content)
+                        traverse(tab.content);
+                });
+            }
+            if (comp.tableCells) {
+                comp.tableCells.forEach(row => {
+                    row.forEach(cell => traverse(cell));
+                });
+            }
+        });
+    };
+    traverse(components);
+    return fieldNames;
+};
+/**
+ * Resolve conditional data for a DataGrid component
+ * Evaluates all conditionalData rules and applies the first matching one
+ * Returns both dataSource and custom columns if defined
+ *
+ * @param conditions - Component conditions including conditionalData rules
+ * @param formValues - Current form field values
+ * @returns Object with dataSource and columns, or undefined if no condition matches
+ */
+export const resolveConditionalData = (conditions, formValues) => {
+    if (!conditions?.conditionalData || !Array.isArray(conditions.conditionalData)) {
+        return undefined;
+    }
+    // Evaluate each conditional data rule in order
+    for (const rule of conditions.conditionalData) {
+        if (ConditionalRuleEngine.evaluateCondition(rule.condition, formValues)) {
+            // Condition is met - resolve and return both data source and columns
+            return {
+                dataSource: rule.dataSource,
+                columns: rule.includeColumns ? rule.columns : undefined
+            };
+        }
+    }
+    return undefined;
+};

package/styles/form-renderer.base.css

@@ -422,6 +422,16 @@
   line-height: 16px;
 }
 
+.form-title h1,
+.form-title h2,
+.form-title h3 {
+  margin-top: 0;
+}
+
+.form-title {
+  text-align: center;
+}
+
 .e-card .e-card-content {
   padding: 12px 18px 12px 18px;
 }