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

package/src/FormRenderer.js

@@ -1,649 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * Form Renderer Component
- * Renders JSON-driven forms with React FormValidator
- */
-import React, { useState, useEffect, useRef, useCallback } from 'react';
-import { Form, FormField } from './FormValidator';
-import { enableRipple } from '@syncfusion/ej2-base';
-import { renderFormField } from './renderFormField';
-import { CustomTabComponent } from './CustomTabComponent';
-import { mergeSchema, convertComponentsToDataSchema, generateUIPropertiesFromData, generateLayoutFromData, generateDataSchemaFromUI } from './json-converter';
-import { UniversalJsonParser } from './parser';
-import { TooltipComponent } from '@syncfusion/ej2-react-popups';
-import { VALIDATION_REGEX } from './FormValidator';
-import StaticHtmlRenderer from './StaticHtmlRenderer';
-import { formatDateValues, splitWidths } from './utils';
-import { ConditionalRuleEngine } from './ConditionalRuleEngine';
-enableRipple(true);
-/**
- * Form layout options (only applies when UI schema is NOT provided)
- */
-export const FormLayout = {
-    SingleColumn: 'single',
-    TwoColumn: 'twocolumn',
-    ThreeColumn: 'threecolumn',
-    FourColumn: 'fourcolumn'
-};
-/**
- * Helper: Normalize DataSchema input
- * Converts any object to JSON string and parses with UniversalJsonParser
- * Handles FormSchema, DataSchema, or raw data - parser infers the format
- */
-function normalizeDataSchema(input) {
-    try {
-        // Convert object to JSON string
-        const jsonString = JSON.stringify(input);
-        const parser = new UniversalJsonParser();
-        const parseResult = parser.parse(jsonString);
-        if (parseResult.success && parseResult.schema) {
-            const dataSchema = convertComponentsToDataSchema(parseResult.schema.components);
-            // console.log(`✅ Parsed object as ${parseResult.metadata.detectedFormat} and converted to DataSchema`);
-            return dataSchema;
-        }
-        else {
-            console.error('❌ Failed to parse object:', parseResult.errors);
-            return null;
-        }
-    }
-    catch (error) {
-        console.error('❌ DataSchema normalization error:', error);
-        return null;
-    }
-}
-/**
- * Helper: Parse string input using UniversalJsonParser
- * Returns DataSchema if parseable, otherwise null
- * Validates that UI schema was not accidentally provided
- */
-function parseStringToDataSchema(input) {
-    try {
-        // First check if user accidentally pasted UI schema in data schema field
-        const testParse = JSON.parse(input);
-        if (testParse.layout || (testParse.theme && testParse.properties && testParse.layout)) {
-            console.error('The provided schema is a UI Schema in the data schema prop. Please provide a valid Data Schema with field definitions and validation rules.');
-            return null;
-        }
-        const parser = new UniversalJsonParser();
-        const parseResult = parser.parse(input);
-        if (parseResult.success && parseResult.schema) {
-            const dataSchema = convertComponentsToDataSchema(parseResult.schema.components);
-            return dataSchema;
-        }
-        else {
-            console.error('Failed to parse input:', parseResult.errors);
-            return null;
-        }
-    }
-    catch (error) {
-        console.error('Parser error:', error);
-        return null;
-    }
-}
-/**
- * Helper: Parse string input as UISchema
- * Validates JSON structure matches UISchema format
- * Detects if data schema was accidentally provided
- */
-function parseStringToUISchema(input) {
-    try {
-        const parsed = JSON.parse(input);
-        // Check if data schema was pasted in UI schema field
-        if (parsed.properties && !parsed.layout && !parsed.theme) {
-            const hasValidationProps = Object.values(parsed.properties).some((prop) => prop.required !== undefined || prop.minLength !== undefined || prop.maxLength !== undefined ||
-                prop.minValue !== undefined || prop.maxValue !== undefined || prop.pattern !== undefined);
-            if (hasValidationProps) {
-                console.error('The provided schema is a Data Schema in the UI schema prop. Please provide a valid UI Schema with theme, properties, and layout definitions.');
-                return null;
-            }
-        }
-        // Validate UISchema structure
-        if (!parsed.theme || !parsed.properties || !parsed.layout) {
-            console.error('Invalid UISchema: missing theme, properties, or layout');
-            return null;
-        }
-        return parsed;
-    }
-    catch (error) {
-        console.error('JSON parse error:', error);
-        return null;
-    }
-}
-// ForwardRef to expose public methods
-export const FormRenderer = React.forwardRef(({ dataSchema, uiSchema, locale, onSubmit, onChange, onButtonClick, className = '', layout = FormLayout.SingleColumn, created, ...restProps }, ref) => {
-    const processedSchema = React.useMemo(() => {
-        try {
-            // Parse and normalize data schema
-            let parsedDataSchema = dataSchema
-                ? ((typeof dataSchema === 'string'
-                    ? parseStringToDataSchema(dataSchema)
-                    : normalizeDataSchema(dataSchema)) || undefined)
-                : undefined;
-            // Parse and normalize UI schema
-            let parsedUISchema = uiSchema
-                ? (typeof uiSchema === 'string'
-                    ? parseStringToUISchema(uiSchema)
-                    : uiSchema) || undefined
-                : undefined;
-            // Scenario 1: Both dataSchema and uiSchema provided - full merge
-            if (parsedDataSchema && parsedUISchema) {
-                const uiFieldIds = new Set(Object.keys(parsedUISchema.properties));
-                const dataFieldIds = Object.keys(parsedDataSchema.properties);
-                const missingFields = dataFieldIds.filter(id => !uiFieldIds.has(id));
-                if (missingFields.length > 0) {
-                    console.warn(`⚠️ Found ${missingFields.length} fields in data schema missing from UI schema`);
-                }
-                const merged = mergeSchema({ dataSchema: parsedDataSchema, uiSchema: parsedUISchema });
-                return merged;
-            }
-            // Scenario 2: Only dataSchema provided - auto-generate UI schema
-            if (parsedDataSchema && !parsedUISchema) {
-                const autoUISchema = {
-                    properties: generateUIPropertiesFromData(parsedDataSchema),
-                    layout: generateLayoutFromData(parsedDataSchema)
-                };
-                const merged = mergeSchema({ dataSchema: parsedDataSchema, uiSchema: autoUISchema });
-                return merged;
-            }
-            // Scenario 3: Only uiSchema provided - auto-generate data schema
-            if (!parsedDataSchema && parsedUISchema) {
-                const autoDataSchema = generateDataSchemaFromUI(parsedUISchema);
-                const uiFieldIds = new Set(Object.keys(parsedUISchema.properties));
-                const dataFieldIds = Object.keys(autoDataSchema.properties);
-                const missingFields = dataFieldIds.filter(id => !uiFieldIds.has(id));
-                if (missingFields.length > 0) {
-                    console.warn(`Found ${missingFields.length} fields in auto-generated data schema missing from UI schema`);
-                }
-                const merged = mergeSchema({ dataSchema: autoDataSchema, uiSchema: parsedUISchema });
-                return merged;
-            }
-            // Scenario 4: Neither provided - return empty form
-            console.warn('FormRenderer: No schema provided (dataSchema or uiSchema)');
-            return { version: '0.1.0', theme: 'tailwind3', components: [] };
-        }
-        catch (error) {
-            console.error('FormRenderer schema processing error:', error);
-            return { version: '0.1.0', theme: 'tailwind3', components: [] };
-        }
-    }, [dataSchema, uiSchema]);
-    const [formState, setFormState] = useState(undefined);
-    const isInitializedRef = useRef(false);
-    const formLocale = locale || 'en-US';
-    // Attach ref to the input element for getComponent
-    let setInputRef;
-    // Store input component refs by name/id
-    const inputRefs = useRef({});
-    // Track which fields have active conditional values applied (to prevent re-applying while condition stays true)
-    const conditionalValueAppliedRef = useRef({});
-    // Check if UI schema has layout components (table, tabs, or panel)
-    const hasLayoutComponents = React.useMemo(() => {
-        if (!processedSchema.components)
-            return false;
-        const checkForLayoutTypes = (components) => {
-            for (const comp of components) {
-                if (['table', 'tabs', 'panel', 'card'].includes(comp.type)) {
-                    return true;
-                }
-                if (comp.children && checkForLayoutTypes(comp.children)) {
-                    return true;
-                }
-                if (comp.tableCells) {
-                    for (const row of comp.tableCells) {
-                        for (const cell of row) {
-                            if (checkForLayoutTypes(cell))
-                                return true;
-                        }
-                    }
-                }
-                if (comp.tabItems) {
-                    for (const tab of comp.tabItems) {
-                        if (tab.content && checkForLayoutTypes(tab.content))
-                            return true;
-                    }
-                }
-            }
-            return false;
-        };
-        return checkForLayoutTypes(processedSchema.components);
-    }, [processedSchema]);
-    // Determine layout class (only apply if UI schema does NOT have table/tabs/panels)
-    const layoutClass = React.useMemo(() => {
-        if (hasLayoutComponents)
-            return ''; // Ignore layout if UI schema has table/tabs/panels
-        // Map enum to CSS class names
-        switch (layout) {
-            case FormLayout.TwoColumn:
-                return 'twolayout';
-            case FormLayout.ThreeColumn:
-                return 'threelayout';
-            case FormLayout.FourColumn:
-                return 'fourlayout';
-            case FormLayout.SingleColumn:
-            default:
-                return ''; // Default single column (no class needed)
-        }
-    }, [layout, hasLayoutComponents]);
-    /**
-     * Recursively collect all components including nested ones
-     */
-    const collectAllComponents = useCallback((components) => {
-        const allComponents = [];
-        const traverse = (comps) => {
-            comps.forEach(comp => {
-                allComponents.push(comp);
-                // Handle nested components in panels
-                if (comp.children && comp.children.length > 0) {
-                    traverse(comp.children);
-                }
-                // Handle components in table cells
-                if (comp.tableCells) {
-                    comp.tableCells.forEach(row => {
-                        row.forEach(cell => {
-                            traverse(cell);
-                        });
-                    });
-                }
-                // Handle components in tabs
-                if (comp.tabItems) {
-                    comp.tabItems.forEach(tab => {
-                        if (tab.content) {
-                            traverse(tab.content);
-                        }
-                    });
-                }
-            });
-        };
-        traverse(components);
-        return allComponents;
-    }, []);
-    const idToLabel = React.useMemo(() => {
-        const map = {};
-        const traverse = (comps) => {
-            comps.forEach(comp => {
-                if (comp.label && !['panel', 'table', 'tabs', 'card', 'button', 'message', 'splitButton'].includes(comp.type)) {
-                    map[comp.id] = comp.label;
-                }
-                if (comp.children)
-                    traverse(comp.children);
-                if (comp.tableCells) {
-                    comp.tableCells.forEach(row => {
-                        row.forEach(cell => traverse(cell));
-                    });
-                }
-                if (comp.tabItems) {
-                    comp.tabItems.forEach(tab => {
-                        if (tab.content)
-                            traverse(tab.content);
-                    });
-                }
-            });
-        };
-        traverse(processedSchema.components);
-        return map;
-    }, [processedSchema]);
-    /**
-     * Build EJ2 FormValidator rules from schema
-     */
-    const buildValidationRules = useCallback(() => {
-        const rules = {};
-        const formValues = formState?.values || {};
-        const collectRules = (components) => {
-            components.forEach((component) => {
-                if (component) {
-                    const componentRules = {};
-                    const conditionalRequired = ConditionalRuleEngine.isFieldRequired(component.conditions, formValues);
-                    const conditionalDisabled = ConditionalRuleEngine.isFieldDisabled(component.conditions, formValues);
-                    const conditionalReadOnly = ConditionalRuleEngine.isFieldReadOnly(component.conditions, formValues);
-                    const finalRequired = component.required || conditionalRequired;
-                    const finalDisabled = component.disabled || conditionalDisabled;
-                    const finalReadOnly = component.readOnly || conditionalReadOnly;
-                    if (finalRequired && !finalDisabled && !finalReadOnly) {
-                        componentRules.required = [true, component.validationMessage || `${component.label} is required`];
-                    }
-                    if (component.minLength && !finalDisabled && !finalReadOnly) {
-                        componentRules.minLength = [component.minLength, `Minimum ${component.minLength} characters required`];
-                    }
-                    if (component.maxLength && !finalDisabled && !finalReadOnly) {
-                        componentRules.maxLength = [component.maxLength, `Maximum ${component.maxLength} characters allowed`];
-                    }
-                    if (component?.type === 'textbox' && component?.textboxType && !component?.regex && !componentRules.regex && !finalDisabled && !finalReadOnly) {
-                        if (component.textboxType === 'email') {
-                            componentRules.regex = [VALIDATION_REGEX['EMAIL'], component?.validationMessage || 'Invalid format'];
-                        }
-                        else if (component.textboxType === 'url') {
-                            componentRules.regex = [VALIDATION_REGEX['URL'], component?.validationMessage || 'Invalid format'];
-                        }
-                    }
-                    if (component.regex && !finalDisabled && !finalReadOnly) {
-                        componentRules.regex = [component.regex, component.validationMessage || 'Invalid format'];
-                    }
-                    if (Object.keys(componentRules).length > 0) {
-                        rules[component.id] = componentRules;
-                    }
-                }
-                // Recursively collect rules from nested components
-                if (component.children) {
-                    collectRules(component.children);
-                }
-                if (component.tableCells) {
-                    component.tableCells.forEach(row => {
-                        row.forEach(cell => collectRules(cell));
-                    });
-                }
-                if (component.tabItems) {
-                    component.tabItems.forEach(tab => {
-                        if (tab.content)
-                            collectRules(tab.content);
-                    });
-                }
-            });
-        };
-        collectRules(processedSchema.components);
-        return rules;
-    }, [processedSchema, formState?.values]);
-    const validationRules = buildValidationRules();
-    /**
-     * Build initial form values from component defaultValues
-     */
-    const initialValues = React.useMemo(() => {
-        const values = {};
-        const allComponents = collectAllComponents(processedSchema.components);
-        const componentIds = new Set();
-        allComponents.forEach(comp => {
-            // Do NOT store dataGrid data inside the form state; grids manage their own internal data.
-            if (comp.type === 'dataGrid' || comp.type === 'richTextEditor') {
-                componentIds.add(comp.id);
-                return;
-            }
-            if (comp.defaultValue !== undefined) {
-                values[comp.id] = comp.defaultValue;
-            }
-            else {
-                // Initialize with type-appropriate defaults
-                switch (comp.type) {
-                    case 'checkbox':
-                    case 'switch':
-                        values[comp.id] = false;
-                        break;
-                }
-            }
-            componentIds.add(comp.id);
-        });
-        if (formState) {
-            Object.keys(formState.values).filter(key => !componentIds.has(key)).forEach(key => {
-                delete formState.values[key];
-            });
-        }
-        return values;
-    }, [processedSchema, collectAllComponents, dataSchema, uiSchema]);
-    // Update the useEffect that sets default values
-    useEffect(() => {
-        if (formState && !isInitializedRef.current) {
-            isInitializedRef.current = true;
-        }
-        if (formState && initialValues) {
-            Object.keys(formState.values).filter(key => !(key in initialValues));
-            Object.entries(initialValues).forEach(([id, value]) => {
-                if (!formState.values[id]) {
-                    formState.values[id] = value;
-                }
-            });
-        }
-    }, [formState, processedSchema, initialValues]);
-    /**
-     * Render a single field with label and error
-     */
-    const renderField = (component) => {
-        const formValues = formState?.values || {};
-        // Skip layout and button components (handled separately)
-        if (['panel', 'table', 'tabs', 'card', 'message', 'button', 'splitButton', 'staticHtml'].includes(component.type)) {
-            return null;
-        }
-        const conditionalReadOnly = ConditionalRuleEngine.isFieldReadOnly(component.conditions, formValues);
-        const conditionalDisabled = ConditionalRuleEngine.isFieldDisabled(component.conditions, formValues);
-        const conditionalRequired = ConditionalRuleEngine.isFieldRequired(component.conditions, formValues);
-        const conditionalValue = ConditionalRuleEngine.getConditionalValue(component.conditions, formValues);
-        const computedReadOnly = component.readOnly || conditionalReadOnly;
-        const computedDisabled = component.disabled || conditionalDisabled;
-        const computedRequired = component.required || conditionalRequired;
-        const labelPos = component.labelPosition || 'top';
-        const labelWidth = component.labelWidth || 'auto';
-        const showLabel = !component.hideLabel && component.label && !['checkbox', 'button', 'staticHtml'].includes(component.type);
-        if ((component.type === 'radio' || component.type === 'checkboxGroup') && Array.isArray(component.options)) {
-            // For radio, store each option's ref with unique key
-            setInputRef = (el, idx) => {
-                if (el && typeof idx === 'number') {
-                    inputRefs.current[`${component.id}_${idx}`] = el;
-                }
-            };
-        }
-        else {
-            setInputRef = (el) => {
-                if (el) {
-                    inputRefs.current[component.id] = el;
-                }
-            };
-        }
-        const shouldShowError = !!formState?.errors[component.id];
-        const isRequiredError = shouldShowError && formState?.errors[component.id].includes('required');
-        const hasError = shouldShowError && !(isRequiredError && !computedRequired);
-        // Apply conditional value only when condition transitions from false to true (start of new cycle)
-        const conditionIsActive = conditionalValue !== undefined;
-        const wasConditionActive = conditionalValueAppliedRef.current[component.id] || false;
-        if (formState) {
-            if (conditionIsActive && !wasConditionActive) {
-                formState.onChange(component.id, { value: conditionalValue });
-                conditionalValueAppliedRef.current[component.id] = true;
-            }
-            else if (!conditionIsActive && wasConditionActive) {
-                // Condition just became inactive - clear tracking (ready for next cycle)
-                conditionalValueAppliedRef.current[component.id] = false;
-            }
-            // If condition stays active (wasConditionActive && conditionIsActive), do nothing - let user edit
-        }
-        return (_jsx(FormField, { name: component.id, children: _jsx("div", { className: "form-group", children: _jsxs("div", { className: `field-wrapper label-${labelPos.toLowerCase()}`, children: [showLabel && (_jsxs("label", { className: "field-label", htmlFor: component.id, style: { width: labelPos.toLowerCase() === 'left' ? `${labelWidth}%` : 'auto' }, children: [_jsx("span", { children: component.label }), computedRequired && _jsx("span", { className: "required-asterisk", children: "*" }), component.tooltip && (_jsx(TooltipComponent, { content: component.tooltip, children: _jsx("span", { className: "e-msg-icon", style: {
-                                            cursor: 'pointer',
-                                            display: 'flex',
-                                            alignItems: 'center',
-                                            justifyContent: 'center',
-                                            flexShrink: 0,
-                                        } }) }))] })), _jsxs("div", { className: "field-input", children: [(component.type === 'radio' || component.type === 'checkboxGroup') && Array.isArray(component.options)
-                                    ? renderFormField({
-                                        component: { ...component, readOnly: computedReadOnly, disabled: computedDisabled, required: computedRequired },
-                                        value: formState?.values[component.id],
-                                        onChange: (value) => {
-                                            formState?.onChange(component.id, { value });
-                                            if (onChange) {
-                                                onChange({ field: component.label || component.id, value });
-                                            }
-                                        },
-                                        locale: formLocale,
-                                        onBlur: () => formState?.onBlur(component.id),
-                                        ref: (el, idx) => setInputRef(el, idx),
-                                        hasError,
-                                    })
-                                    : renderFormField({
-                                        component: { ...component, readOnly: computedReadOnly, disabled: computedDisabled, required: computedRequired },
-                                        value: formState?.values[component.id],
-                                        onChange: (value) => {
-                                            if (component.type !== 'dataGrid' && component.type !== 'signature' && component.type !== 'richTextEditor') {
-                                                value = formatDateValues(component, value);
-                                                formState?.onChange(component.id, { value });
-                                                if (onChange) {
-                                                    onChange({ field: component.label || component.id, value });
-                                                }
-                                            }
-                                        },
-                                        locale: formLocale,
-                                        onBlur: () => { if (component.type !== 'dataGrid' && component.type !== 'richTextEditor')
-                                            formState?.onBlur(component.id); },
-                                        ref: setInputRef,
-                                        hasError,
-                                    }), hasError && _jsx("div", { className: "e-error", children: formState.errors[component.id] })] }), component.description && _jsx("div", { className: 'field-description', children: component.description })] }) }) }, component.id));
-    };
-    /**
-     * Render component (including layouts)
-     */
-    const renderComponent = (component) => {
-        const formValues = formState?.values || {};
-        const isVisible = component.visible === false
-            ? false
-            : ConditionalRuleEngine.isFieldVisible(component.conditions, formValues);
-        const isHidden = ConditionalRuleEngine.isFieldHidden(component.conditions, formValues);
-        if (!isVisible || isHidden) {
-            if (formState && formState.values[component.id] !== undefined && formState.values[component.id] !== null) {
-                formState.onChange(component.id, { value: null });
-            }
-            return null;
-        }
-        switch (component.type) {
-            case 'panel':
-                return (_jsxs("fieldset", { className: `form-panel-renderer ${component.cssClass}`, children: [(component.label && !component.hideLabel) && _jsx("legend", { className: `${!component.hideBorders ? 'panel-legend' : ''}`, children: component.label }), _jsx("div", { className: "panel-content", children: component.children?.map(child => renderComponent(child)) })] }, component.id));
-            case 'table':
-                const tableRows = component.rows || (component.tableCells ? component.tableCells.length : 2);
-                const tableCols = component.columns || (component.tableCells && component.tableCells[0] ? component.tableCells[0].length : 2);
-                const defaultColSpan = Math.floor(12 / tableCols);
-                const columnWidthsProp = component.columnWidths;
-                const splittedWidths = columnWidthsProp ? splitWidths(columnWidthsProp.widths) : [];
-                return (_jsx("div", { className: `form-table-renderer ${component.hideBorders ? '' : 'table-border'} ${component.cssClass}`, children: Array.from({ length: tableRows }).map((_, rowIndex) => (_jsx("div", { className: "e-form-table-row", style: component.hideBorders ? { display: 'flex', gap: '1.5rem' } : {}, children: Array.from({ length: tableCols }).map((_, colIndex) => {
-                            const cellComponents = component.tableCells?.[rowIndex]?.[colIndex] || [];
-                            const cellSpan = defaultColSpan;
-                            const colWidthValue = splittedWidths[colIndex];
-                            const isSingleColumn = tableCols === 1;
-                            const cellStyle = isSingleColumn ? { width: '100%' } : (colWidthValue ? { width: `${colWidthValue}%` } : {});
-                            const allNullWidths = !columnWidthsProp || (Array.isArray(columnWidthsProp.widths) && columnWidthsProp.widths.every((w) => w === null));
-                            const isFirstRow = rowIndex === 0;
-                            return (_jsx("div", { className: `e-form-table-cell ${colWidthValue ? '' : allNullWidths ? `col-${cellSpan}` : ''}`, style: component.hideBorders ? { ...cellStyle, padding: isFirstRow ? '0' : '12px 0 0 0' } : cellStyle, children: cellComponents.map(comp => renderComponent(comp)) }, `cell-${rowIndex}-${colIndex}`));
-                        }) }, `row-${rowIndex}`))) }, component.id));
-            case 'tabs':
-                return (_jsx("div", { className: `form-tabs-renderer ${component.cssClass || ''}`, children: _jsx(CustomTabComponent, { tabs: component.tabItems?.map(tab => ({
-                            header: tab.header,
-                            content: (_jsx("div", { className: "tab-content-renderer", children: tab.content?.map(comp => renderComponent(comp)) }))
-                        })) || [], className: component.cssClass }) }, component.id));
-            case 'card':
-                return (_jsxs("fieldset", { className: `e-card form-card-renderer ${component.cssClass}`, style: { padding: 0 }, children: [_jsx("div", { className: "e-card-header", children: _jsxs("div", { className: "e-card-header-caption", children: [_jsx("div", { className: "e-card-title", children: component.cardTitle || component.label || 'Card Title' }), component.cardSubtitle && (_jsx("div", { className: "e-card-sub-title", children: component.cardSubtitle }))] }) }), _jsx("div", { className: "e-card-content card-content", children: component.children?.map(child => renderComponent(child)) })] }, component.id));
-            case 'staticHtml':
-                return (_jsx(StaticHtmlRenderer, { id: component.id, content: component.defaultValue || '<p>HTML content</p>', enableHtmlSanitizer: component.enableHtmlSanitizer }, component.id));
-            case 'message':
-                return (_jsx("div", { className: "form-group", children: renderFormField({
-                        component,
-                        locale: formLocale,
-                        value: undefined,
-                        onChange: () => { },
-                    }) }, component.id));
-            case 'button':
-                const buttonlDisabled = ConditionalRuleEngine.isFieldDisabled(component.conditions, formValues);
-                const buttonComputed = component.disabled || buttonlDisabled;
-                const handleButtonClick = (event) => {
-                    if (onButtonClick) {
-                        onButtonClick({
-                            buttonId: component.id,
-                            buttonLabel: component.buttonsGroups ? event.target?.ej2_instances[0].content : component.label || '', event
-                        });
-                    }
-                };
-                return (_jsx("div", { className: "form-group", children: renderFormField({
-                        component: { ...component, disabled: buttonComputed },
-                        value: undefined,
-                        onChange: () => { },
-                        locale: formLocale,
-                        onClick: (e) => { handleButtonClick(e); },
-                        ref: (el, idx) => {
-                            if (idx !== undefined) {
-                                inputRefs.current[`${component.id}_${idx}`] = el;
-                            }
-                            else {
-                                inputRefs.current[component.id] = el;
-                            }
-                        }
-                    }) }, component.id));
-            case 'splitButton':
-                const splitButtonDisabled = ConditionalRuleEngine.isFieldDisabled(component.conditions, formValues);
-                const computedDisabled = component.disabled || splitButtonDisabled;
-                setInputRef = (el) => {
-                    if (el) {
-                        inputRefs.current[component.id] = el;
-                    }
-                };
-                const handleSplitButtonEvent = (event) => {
-                    if (onButtonClick) {
-                        onButtonClick({
-                            buttonId: component.id,
-                            buttonLabel: component.label || '',
-                            event
-                        });
-                    }
-                };
-                return (_jsx("div", { className: "form-group", children: renderFormField({
-                        component: { ...component, disabled: computedDisabled },
-                        value: undefined,
-                        locale: formLocale,
-                        onChange: () => { },
-                        onClick: (e) => { handleSplitButtonEvent(e); },
-                        ref: setInputRef
-                    }) }, component.id));
-            default:
-                return renderField(component);
-        }
-    };
-    // Notify when all form elements and refs are rendered
-    useEffect(() => {
-        if (created && formState) {
-            setTimeout(() => {
-                const hasInputs = Object.keys(inputRefs.current).length > 0;
-                if (hasInputs) {
-                    created();
-                }
-            }, 0);
-        }
-    }, [created, formState]);
-    // Expose getComponent as a public method
-    React.useImperativeHandle(ref, () => ({
-        /**
-         * Get the instance of the form input by name/id
-         */
-        getComponent: (name) => {
-            return inputRefs.current[name] || null;
-        },
-    }), []);
-    return (_jsx("div", { ...restProps, className: `form-renderer-container ${className}`, children: _jsx(Form, { rules: validationRules, initialValues: initialValues, onFormStateChange: (state) => setFormState(state), onSubmit: (data) => {
-                const isValid = (formState?.errors ? Object.keys(formState.errors).length === 0 : false);
-                const transformedData = {};
-                const formValues = formState?.values || {};
-                // Exclude non-data components (buttons, messages, and layout-only components)
-                const excludedTypes = new Set(['button', 'message', 'panel', 'table', 'tabs']);
-                const allComps = collectAllComponents(processedSchema.components || []);
-                const excludedIds = new Set(allComps.filter(c => excludedTypes.has(c.type)).map(c => c.id));
-                const hiddenFieldIds = new Set(allComps.filter(c => {
-                    if (c.visible === false)
-                        return true;
-                    if (c.conditions?.visibleWhen) {
-                        if (!ConditionalRuleEngine.isFieldVisible(c.conditions, formValues))
-                            return true;
-                    }
-                    if (c.conditions?.hideWhen) {
-                        if (ConditionalRuleEngine.isFieldHidden(c.conditions, formValues))
-                            return true;
-                    }
-                    return false;
-                }).map(c => c.id));
-                const disabledFieldIds = new Set(allComps.filter(c => {
-                    if (c.disabled)
-                        return true;
-                    if (c.conditions?.disabledWhen) {
-                        return ConditionalRuleEngine.isFieldDisabled(c.conditions, formValues);
-                    }
-                    return false;
-                }).map(c => c.id));
-                Object.entries(data).forEach(([id, val]) => {
-                    if (excludedIds.has(id) || hiddenFieldIds.has(id) || disabledFieldIds.has(id))
-                        return;
-                    const label = idToLabel[id] || id;
-                    transformedData[label] = val;
-                });
-                if (onSubmit) {
-                    onSubmit({ data: transformedData, isValid });
-                }
-            }, validateOnChange: true, className: `form-renderer ${layoutClass}`, children: processedSchema.components.map(component => renderComponent(component)) }) }));
-});
-export default FormRenderer;