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

package/src/FormRenderer.js

@@ -6,14 +6,17 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useState, useEffect, useRef, useCallback } from 'react';
 import { Form, FormField } from './FormValidator';
 import { enableRipple } from '@syncfusion/ej2-base';
-import { renderFormField } from './renderFormField';
+import { RenderFormField } from './renderFormField';
 import { CustomTabComponent } from './CustomTabComponent';
-import { mergeSchema, convertComponentsToDataSchema, generateUIPropertiesFromData, generateLayoutFromData, generateDataSchemaFromUI } from './json-converter';
+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 { splitWidths } from './utils';
+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)
@@ -24,153 +27,60 @@ export const FormLayout = {
     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, onSubmit, onChange, onButtonClick, className = '', layout = FormLayout.SingleColumn, created, ...restProps }, ref) => {
+export const FormRenderer = React.forwardRef(({ schema, 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`);
+            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 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;
+            const isUnifiedSchema = parsedInput && typeof parsedInput === 'object' &&
+                parsedInput.properties && Array.isArray(parsedInput.layout);
+            if (isUnifiedSchema) {
+                return mergeSchema(parsedInput);
             }
-            // 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`);
+            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: [] };
                 }
-                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: '1.0.0-beta', theme: 'tailwind3', components: [] };
         }
         catch (error) {
             console.error('FormRenderer schema processing error:', error);
-            return { version: '1.0.0-beta', theme: 'tailwind3', components: [] };
+            return { version: '1.0.0', components: [] };
         }
-    }, [dataSchema, uiSchema]);
+    }, [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)
@@ -256,7 +166,7 @@ export const FormRenderer = React.forwardRef(({ dataSchema, uiSchema, onSubmit,
         const map = {};
         const traverse = (comps) => {
             comps.forEach(comp => {
-                if (comp.label && !['panel', 'table', 'tabs', 'card', 'button', 'message', 'splitbutton'].includes(comp.type)) {
+                if (comp.label && !['panel', 'table', 'tabs', 'card', 'button', 'message', 'splitButton'].includes(comp.type)) {
                     map[comp.id] = comp.label;
                 }
                 if (comp.children)
@@ -282,20 +192,27 @@ export const FormRenderer = React.forwardRef(({ dataSchema, uiSchema, onSubmit,
      */
     const buildValidationRules = useCallback(() => {
         const rules = {};
+        const formValues = formState?.values || {};
         const collectRules = (components) => {
             components.forEach((component) => {
                 if (component) {
                     const componentRules = {};
-                    if (component.required && !component.disabled && !component.readOnly) {
+                    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 && !component.disabled && !component.readOnly) {
+                    if (component.minLength && !finalDisabled && !finalReadOnly) {
                         componentRules.minLength = [component.minLength, `Minimum ${component.minLength} characters required`];
                     }
-                    if (component.maxLength && !component.disabled && !component.readOnly) {
+                    if (component.maxLength && !finalDisabled && !finalReadOnly) {
                         componentRules.maxLength = [component.maxLength, `Maximum ${component.maxLength} characters allowed`];
                     }
-                    if (component?.type === 'textbox' && component?.textboxType && !component?.regex && !componentRules.regex && !component.disabled && !component.readOnly) {
+                    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'];
                         }
@@ -303,7 +220,7 @@ export const FormRenderer = React.forwardRef(({ dataSchema, uiSchema, onSubmit,
                             componentRules.regex = [VALIDATION_REGEX['URL'], component?.validationMessage || 'Invalid format'];
                         }
                     }
-                    if (component.regex && !component.disabled && !component.readOnly) {
+                    if (component.regex && !finalDisabled && !finalReadOnly) {
                         componentRules.regex = [component.regex, component.validationMessage || 'Invalid format'];
                     }
                     if (Object.keys(componentRules).length > 0) {
@@ -329,7 +246,7 @@ export const FormRenderer = React.forwardRef(({ dataSchema, uiSchema, onSubmit,
         };
         collectRules(processedSchema.components);
         return rules;
-    }, [processedSchema]);
+    }, [processedSchema, formState?.values]);
     const validationRules = buildValidationRules();
     /**
      * Build initial form values from component defaultValues
@@ -339,14 +256,23 @@ export const FormRenderer = React.forwardRef(({ dataSchema, uiSchema, onSubmit,
         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') {
+            // 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) {
@@ -355,7 +281,7 @@ export const FormRenderer = React.forwardRef(({ dataSchema, uiSchema, onSubmit,
             });
         }
         return values;
-    }, [processedSchema, collectAllComponents, dataSchema, uiSchema]);
+    }, [processedSchema, collectAllComponents, schema]);
     // Update the useEffect that sets default values
     useEffect(() => {
         if (formState && !isInitializedRef.current) {
@@ -370,21 +296,202 @@ export const FormRenderer = React.forwardRef(({ dataSchema, uiSchema, onSubmit,
             });
         }
     }, [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) => {
-        // Skip invisible components
-        if (component.visible === false)
-            return null;
+        const formValues = formState?.values || {};
         // Skip layout and button components (handled separately)
-        if (['panel', 'table', 'tabs', 'card', 'message', 'button', 'splitbutton', 'statichtml'].includes(component.type)) {
+        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)) {
+        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') {
@@ -399,51 +506,73 @@ export const FormRenderer = React.forwardRef(({ dataSchema, uiSchema, onSubmit,
                 }
             };
         }
-        const hasError = !!formState?.errors[component.id];
-        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 }), component?.required && _jsx("span", { className: "required-asterisk", children: "*" }), component.tooltip && (_jsx(TooltipComponent, { content: component.tooltip, children: _jsx("span", { className: "e-msg-icon", style: {
+        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,
-                                        value: formState?.values[component.id],
-                                        onChange: (value) => {
+                                        } }) }))] })), _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 });
                                             }
-                                        },
-                                        onBlur: () => formState?.onBlur(component.id),
-                                        ref: (el, idx) => setInputRef(el, idx),
-                                        hasError,
-                                    })
-                                    : renderFormField({
-                                        component,
-                                        value: formState?.values[component.id],
-                                        onChange: (value) => {
-                                            if (component.type !== 'datagrid' && component.type !== 'signature' && component.type !== 'richtexteditor') {
+                                        }, 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 });
                                                 }
                                             }
-                                        },
-                                        onBlur: () => { if (component.type !== 'datagrid' && component.type !== 'richtexteditor')
-                                            formState?.onBlur(component.id); },
-                                        ref: setInputRef,
-                                        hasError,
-                                    }), formState?.errors[component.id] && _jsx("div", { className: "e-error", children: formState.errors[component.id] })] })] }) }) }, component.id));
+                                        }, 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) => {
-        // Skip invisible components
-        if (component.visible === false)
+        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));
@@ -453,13 +582,15 @@ export const FormRenderer = React.forwardRef(({ dataSchema, uiSchema, onSubmit,
                 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: "table-row", children: Array.from({ length: tableCols }).map((_, colIndex) => {
+                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 cellStyle = colWidthValue ? { width: `${colWidthValue}%` } : {};
+                            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));
-                            return (_jsx("div", { className: `table-cell ${colWidthValue ? '' : allNullWidths ? `col-${cellSpan}` : ''}`, style: cellStyle, children: cellComponents.map(comp => renderComponent(comp)) }, `cell-${rowIndex}-${colIndex}`));
+                            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 => ({
@@ -468,15 +599,13 @@ export const FormRenderer = React.forwardRef(({ dataSchema, uiSchema, onSubmit,
                         })) || [], 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':
+            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,
-                        value: undefined,
-                        onChange: () => { },
-                    }) }, component.id));
+                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({
@@ -485,21 +614,17 @@ export const FormRenderer = React.forwardRef(({ dataSchema, uiSchema, onSubmit,
                         });
                     }
                 };
-                return (_jsx("div", { className: "form-group", children: renderFormField({
-                        component,
-                        value: undefined,
-                        onChange: () => { },
-                        onClick: (e) => { handleButtonClick(e); },
-                        ref: (el, idx) => {
+                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':
+                        } }) }, 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;
@@ -514,13 +639,7 @@ export const FormRenderer = React.forwardRef(({ dataSchema, uiSchema, onSubmit,
                         });
                     }
                 };
-                return (_jsx("div", { className: "form-group", children: renderFormField({
-                        component,
-                        value: undefined,
-                        onChange: () => { },
-                        onClick: (e) => { handleSplitButtonEvent(e); },
-                        ref: setInputRef
-                    }) }, component.id));
+                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);
         }
@@ -546,15 +665,36 @@ export const FormRenderer = React.forwardRef(({ dataSchema, uiSchema, onSubmit,
         },
     }), []);
     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 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', 'card', 'splitbutton', 'statichtml']);
+                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]) => {
-                    // Skip excluded components so they don't appear as submitted values
-                    if (excludedIds.has(id))
+                    if (excludedIds.has(id) || hiddenFieldIds.has(id) || disabledFieldIds.has(id))
                         return;
                     const label = idToLabel[id] || id;
                     transformedData[label] = val;