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

package/src/FormRenderer.js

@@ -1,707 +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 } 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';
-import { ExpressionEngine } from './expressions/ExpressionEngine';
-import { MinMaxRuleEngine } from './MinMaxRuleEngine';
-enableRipple(true);
-/**
- * Form layout options (only applies when UI schema is NOT provided)
- */
-export const FormLayout = {
-    SingleColumn: 'single',
-    TwoColumn: 'twocolumn',
-    ThreeColumn: 'threecolumn',
-    FourColumn: 'fourcolumn'
-};
-// ForwardRef to expose public methods
-export const FormRenderer = React.forwardRef(({ schema, locale, onSubmit, onChange, onButtonClick, className = '', layout = FormLayout.SingleColumn, created, ...restProps }, ref) => {
-    const processedSchema = React.useMemo(() => {
-        try {
-            if (!schema) {
-                return { version: '1.0.0', components: [] };
-            }
-            let parsedInput = schema;
-            if (typeof schema === 'string') {
-                try {
-                    parsedInput = JSON.parse(schema);
-                }
-                catch (err) {
-                    console.error('FormRenderer: Failed to parse schema string', err);
-                    return { version: '1.0.0', components: [] };
-                }
-            }
-            const isUnifiedSchema = parsedInput && typeof parsedInput === 'object' &&
-                parsedInput.properties && Array.isArray(parsedInput.layout);
-            if (isUnifiedSchema) {
-                return mergeSchema(parsedInput);
-            }
-            else {
-                const parser = new UniversalJsonParser();
-                const parseResult = parser.parse(typeof schema === 'string' ? schema : JSON.stringify(schema));
-                if (parseResult.success && parseResult.schema) {
-                    return parseResult.schema;
-                }
-                else {
-                    console.warn('FormRenderer: Failed to parse schema', parseResult.errors);
-                    return { version: '1.0.0', components: [] };
-                }
-            }
-        }
-        catch (error) {
-            console.error('FormRenderer schema processing error:', error);
-            return { version: '1.0.0', components: [] };
-        }
-    }, [schema]);
-    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({});
-    // Expression Engine initialization
-    const expressionEngineRef = useRef(null);
-    const expressionDependencyGraphRef = useRef({});
-    const expressionEvaluationInProgressRef = useRef(false);
-    const previousFormValuesRef = useRef({});
-    const computedFieldNamesRef = useRef(new Set());
-    // 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' || comp.type === 'staticHtml') {
-                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, schema]);
-    // 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]);
-    /**
-     * Initialize Expression Engine and build dependency graph
-     * Runs when schema changes
-     */
-    useEffect(() => {
-        if (!processedSchema.components || processedSchema.components.length === 0) {
-            return;
-        }
-        try {
-            // Initialize expression engine if not already done
-            if (!expressionEngineRef.current) {
-                expressionEngineRef.current = new ExpressionEngine();
-            }
-            const engine = expressionEngineRef.current;
-            const allComponents = collectAllComponents(processedSchema.components);
-            // Build dependency graph from all expressions
-            const graph = engine.buildDependencyGraph(allComponents);
-            // Check for circular dependencies
-            const cycles = engine.detectCircularDependencies(graph);
-            if (cycles.length > 0) {
-                //console.warn('⚠️ Circular dependencies detected in expressions:', cycles);
-            }
-            // Store dependency graph
-            expressionDependencyGraphRef.current = graph;
-            // Track which fields are computed by expressions
-            const computedFields = new Set();
-            allComponents.forEach(comp => {
-                if (comp.expressionValue) {
-                    computedFields.add(comp.id);
-                }
-            });
-            computedFieldNamesRef.current = computedFields;
-        }
-        catch (error) {
-            console.error('Error initializing expression engine:', error);
-        }
-    }, [processedSchema, collectAllComponents]);
-    /**
-     * Evaluate expressions when form values change
-     * Runs expressions in topological order to ensure dependencies are satisfied
-     */
-    useEffect(() => {
-        if (!formState || !expressionEngineRef.current) {
-            return;
-        }
-        // Prevent recursive evaluation loops
-        if (expressionEvaluationInProgressRef.current) {
-            return;
-        }
-        try {
-            expressionEvaluationInProgressRef.current = true;
-            const engine = expressionEngineRef.current;
-            const dependencyGraph = expressionDependencyGraphRef.current;
-            const formValues = formState.values || {};
-            const allComponents = collectAllComponents(processedSchema.components);
-            const previousValues = previousFormValuesRef.current;
-            const computedFieldNames = computedFieldNamesRef.current;
-            // Create a mapping of component id -> component name for context building
-            const idToNameMap = {};
-            allComponents.forEach(comp => {
-                if (comp.name) {
-                    idToNameMap[comp.id] = comp.name;
-                }
-            });
-            // Convert formValues from id-based keys to name-based keys for expression context
-            const contextValues = {};
-            Object.entries(formValues).forEach(([componentId, value]) => {
-                const fieldName = idToNameMap[componentId];
-                if (fieldName) {
-                    contextValues[fieldName] = value;
-                }
-            });
-            // Capture previous state before checking for changes
-            const previousContextValues = { ...previousValues };
-            // Update previous values immediately with current context for next cycle
-            // This ensures stale values don't affect the next evaluation cycle
-            Object.assign(previousValues, contextValues);
-            // Find which fields have changed (using captured previous state)
-            const changedFields = new Set();
-            Object.keys(contextValues).forEach(fieldName => {
-                const fieldId = Object.keys(idToNameMap).find(id => idToNameMap[id] === fieldName);
-                if (fieldId && contextValues[fieldName] !== previousContextValues[fieldName] && !computedFieldNames.has(fieldId)) {
-                    changedFields.add(fieldName);
-                }
-            });
-            // If no non-computed fields changed, skip evaluation
-            if (changedFields.size === 0) {
-                return;
-            }
-            // Get topological order for evaluation
-            const evaluationOrder = engine.getTopologicalOrder(dependencyGraph);
-            evaluationOrder.forEach(fieldName => {
-                // Find component with this name
-                const component = allComponents.find(c => c.name === fieldName);
-                if (component && component.expressionValue) {
-                    // Mark this field as computed
-                    computedFieldNames.add(component.id);
-                    try {
-                        // Only evaluate if field is visible and not read-only
-                        const isVisible = component.visible !== false
-                            ? ConditionalRuleEngine.isFieldVisible(component.conditions, formValues)
-                            : false;
-                        if (isVisible) {
-                            const currentValues = {};
-                            Object.entries(formValues).forEach(([componentId, value]) => {
-                                const fieldName = idToNameMap[componentId];
-                                if (fieldName) {
-                                    currentValues[fieldName] = value;
-                                }
-                            });
-                            // Use context values (name-based) for evaluation
-                            let result = engine.evaluate(component.expressionValue, currentValues);
-                            result = typeof (result) === 'string' && result.includes('undefined') ? result.replace(/undefined/g, '') : result;
-                            // Coerce result to appropriate type based on field type
-                            if (result !== null && result !== undefined && result !== '') {
-                                switch (component.type) {
-                                    case 'number':
-                                        // Ensure numeric fields return numbers (but preserve empty string)
-                                        const numResult = Number(result);
-                                        result = isNaN(numResult) ? 0 : numResult;
-                                        result = result === 0 ? "" : result;
-                                        break;
-                                    case 'checkbox':
-                                    case 'switch':
-                                        // Ensure boolean fields return booleans
-                                        result = Boolean(result);
-                                        break;
-                                    case 'textbox':
-                                    case 'textarea':
-                                        // Ensure text fields return strings
-                                        result = String(result);
-                                        break;
-                                    case 'dateRange':
-                                    case 'checkboxGroup':
-                                    case "multiselect":
-                                        break;
-                                    default:
-                                        // Other types use result as-is
-                                        result = String(result);
-                                        break;
-                                }
-                            }
-                            // Apply result if different from current value
-                            if (result !== null && result !== undefined && result !== formValues[component.id]) {
-                                formState.values[component.id] = result;
-                                formState.onChange(component.id, { value: result });
-                            }
-                        }
-                    }
-                    catch (error) {
-                        console.error(`Error evaluating expression for field "${fieldName}":`, error);
-                    }
-                }
-            });
-            // Update previous values for next comparison
-            Object.assign(previousValues, contextValues);
-        }
-        finally {
-            expressionEvaluationInProgressRef.current = false;
-        }
-    }, [formState?.values, processedSchema, collectAllComponents]);
-    /**
-     * 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;
-        // Calculate min/max constraints from minMaxRange
-        let minMaxConstraints = MinMaxRuleEngine.getConstraints(component.minMaxRange, formValues, component.type);
-        // For dateTime, also get date and time constraints separately
-        if (component.type === 'dateTime') {
-            const dateConstraints = MinMaxRuleEngine.getConstraints(component.minMaxRange, formValues, 'date');
-            const timeConstraints = MinMaxRuleEngine.getConstraints(component.minMaxTimeRange, formValues, 'time');
-            minMaxConstraints = {
-                minValue: undefined,
-                maxValue: undefined,
-                minDate: dateConstraints.minDate,
-                maxDate: dateConstraints.maxDate,
-                minTime: timeConstraints.minTime,
-                maxTime: timeConstraints.maxTime
-            };
-        }
-        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)
-                                    ? (_jsx(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: hasError }))
-                                    : (_jsx(RenderFormField, { component: {
-                                            ...component,
-                                            readOnly: computedReadOnly,
-                                            disabled: computedDisabled,
-                                            required: computedRequired,
-                                            ...(minMaxConstraints.minValue !== undefined && { minValue: minMaxConstraints.minValue }),
-                                            ...(minMaxConstraints.maxValue !== undefined && { maxValue: minMaxConstraints.maxValue }),
-                                            ...(minMaxConstraints.minDate !== undefined && { minDate: minMaxConstraints.minDate }),
-                                            ...(minMaxConstraints.maxDate !== undefined && { maxDate: minMaxConstraints.maxDate }),
-                                            ...(minMaxConstraints.minTime !== undefined && { minTime: minMaxConstraints.minTime }),
-                                            ...(minMaxConstraints.maxTime !== undefined && { maxTime: minMaxConstraints.maxTime })
-                                        }, formState: formState, value: formState?.values[component.id], onChange: (value) => {
-                                            if (component.type !== 'dataGrid' && component.type !== 'signature' && component.type !== 'richTextEditor' && component.type !== 'staticHtml') {
-                                                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' && component.type !== 'staticHtml')
-                                            formState?.onBlur(component.id); }, ref: setInputRef, hasError: 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: _jsx(RenderFormField, { component: 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: _jsx(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: _jsx(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;