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

package/src/parser.js

@@ -91,7 +91,7 @@ export class UniversalJsonParser {
             });
         }
         const schema = {
-            version: input.version || "1.0.0-beta",
+            version: input.version || "0.1.0",
             components
         };
         const schemaValidation = validateFormSchema(schema);
@@ -253,7 +253,7 @@ export class UniversalJsonParser {
                 return { type: 'textbox', textboxType: 'url' };
             }
             if (/^\d{4}-\d{2}-\d{2}/.test(value)) {
-                return { type: 'datepicker' };
+                return { type: 'date' };
             }
             // For generic strings, check field name patterns
             const fieldNameMatch = this.matchFieldNamePattern(fieldName);
@@ -284,7 +284,7 @@ export class UniversalJsonParser {
         if (/email|mail|e-?mail/.test(normalized))
             return { type: 'textbox', textboxType: 'email' };
         if (/date|birth|birthday|dob|created|updated/.test(normalized))
-            return { type: 'datepicker' };
+            return { type: 'date' };
         if (/phone|tel|mobile|cell|cellphone|msisdn/.test(normalized))
             return { type: 'textbox', textboxType: 'number' };
         if (/url|link|uri|website/.test(normalized))
@@ -394,9 +394,10 @@ export class UniversalJsonParser {
             type: type,
             label: element.title || element.label || this.humanizeFieldName(element.name),
             defaultValue: element.defaultValue,
+            expressionValue: element.expressionValue,
             ...Object.keys(validation).length > 0 ? validation : undefined
         };
-        if (type === 'dropdown' || type === 'multiselect' || type === 'radio' || type === 'splitbutton') {
+        if (type === 'dropdown' || type === 'multiselect' || type === 'radio' || type === 'splitButton') {
             if (element.choices && Array.isArray(element.choices)) {
                 component.options = element.choices;
             }
@@ -437,7 +438,8 @@ export class UniversalJsonParser {
                 id: this.generateComponentId(typeInference.type),
                 type: typeInference.type,
                 label: this.humanizeFieldName(key),
-                defaultValue: value
+                defaultValue: value,
+                expressionValue: undefined
             };
             if (typeInference.textboxType) {
                 component.textboxType = typeInference.textboxType;
@@ -449,7 +451,7 @@ export class UniversalJsonParser {
                     component.regex = VALIDATION_REGEX['URL'];
                 }
             }
-            if (typeInference.type === 'datepicker' && component.defaultValue !== undefined && component.defaultValue !== null) {
+            if (typeInference.type === 'date' && component.defaultValue !== undefined && component.defaultValue !== null) {
                 const formatted = this.formatDateTimeValue(component.defaultValue);
                 if (formatted)
                     component.defaultValue = formatted;
@@ -487,9 +489,11 @@ export class UniversalJsonParser {
         }
         const component = {
             id: propDef.id || this.generateComponentId(typeInfo.type),
+            name: propDef.name,
             type: typeInfo.type,
             label: propDef.title || propDef.label || this.humanizeFieldName(fieldName),
             defaultValue: propDef.default || propDef.defaultValue || undefined,
+            expressionValue: propDef.expressionValue || undefined,
             content: propDef.content,
             buttonType: propDef.buttonType,
             textboxType: propDef.textboxType,
@@ -511,12 +515,12 @@ export class UniversalJsonParser {
                 }
             }
         }
-        if (typeInfo.type === 'datepicker' && component.defaultValue !== undefined && component.defaultValue !== null) {
+        if (typeInfo.type === 'date' && component.defaultValue !== undefined && component.defaultValue !== null) {
             const formatted = this.formatDateTimeValue(component.defaultValue);
             if (formatted)
                 component.defaultValue = formatted;
         }
-        if ((typeInfo.type === 'splitbutton' || typeInfo.type === 'dropdown' || typeInfo.type === 'multiselect' || typeInfo.type === 'radio') && (propDef.enum || propDef.options)) {
+        if ((typeInfo.type === 'splitButton' || typeInfo.type === 'dropdown' || typeInfo.type === 'multiselect' || typeInfo.type === 'radio') && (propDef.enum || propDef.options)) {
             component.options = propDef.enum || propDef.options;
         }
         return component;
@@ -586,7 +590,7 @@ export class UniversalJsonParser {
             if (/password|pwd|pass|security|secret|key/.test(fmt) || /password|pwd|pass|security|secret|key/.test(text))
                 return { type: 'textbox', textboxType: 'password' };
             if (fmt === 'date' || fmt === 'date-time' || /date|birthday|dob/.test(text))
-                return { type: 'datepicker' };
+                return { type: 'date' };
             if (propDef.enum)
                 return { type: 'dropdown' };
             if (propDef.options)
@@ -606,14 +610,14 @@ export class UniversalJsonParser {
             return { type: 'button' };
         if (schemaType === 'signature' || schemaType === 'sign')
             return { type: 'signature' };
-        if (schemaType === 'image' || schemaType === 'imageeditor')
-            return { type: 'imageeditor' };
-        if (schemaType === 'file' || schemaType === 'fileupload')
-            return { type: 'fileupload' };
-        if (schemaType === 'color' || schemaType === 'colorpicker')
-            return { type: 'colorpicker' };
-        if (schemaType === 'splitbutton')
-            return { type: 'splitbutton' };
+        if (schemaType === 'image' || schemaType === 'imageEditor')
+            return { type: 'imageEditor' };
+        if (schemaType === 'file' || schemaType === 'fileUpload')
+            return { type: 'fileUpload' };
+        if (schemaType === 'color' || schemaType === 'colorPicker')
+            return { type: 'colorPicker' };
+        if (schemaType === 'splitButton')
+            return { type: 'splitButton' };
         return { type: this.config.defaultTextType };
     }
     generateComponentId(type) {
@@ -716,7 +720,7 @@ export const validateFormSchema = (schema) => {
  */
 export const sanitizeFormSchema = (schema) => {
     const sanitized = {
-        version: schema.version || "1.0.0-beta",
+        version: schema.version || "0.1.0",
         components: schema.components || []
     };
     const sanitizeComponent = (comp) => {

package/src/renderFormField.d.ts

@@ -8,12 +8,14 @@ export interface RenderFormFieldProps {
     component: FormComponent;
     value?: any;
     onChange: (value: any) => void;
+    formState?: any;
     onBlur?: () => void;
     onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
     ref?: any;
     hasError?: boolean;
+    locale: string;
 }
 /**
  * Renders a single form field component
  */
-export declare const renderFormField: ({ component, value, onChange, onBlur, ref, hasError, onClick }: RenderFormFieldProps) => React.ReactNode;
+export declare const RenderFormField: ({ component, value, onChange, onBlur, ref, hasError, onClick, locale, formState }: RenderFormFieldProps) => React.ReactNode;

package/src/renderFormField.js

@@ -12,8 +12,9 @@ import { MessageComponent } from '@syncfusion/ej2-react-notifications';
 import { ImageEditorComponent } from '@syncfusion/ej2-react-image-editor';
 import { DataGridComponent } from './DataGridComponent';
 import { RichTextEditorComponent, Toolbar, HtmlEditor, Inject as RTEInject, Link, QuickToolbar } from '@syncfusion/ej2-react-richtexteditor';
-import { mapButtonStyleToClass, mapPositionToJustifyContent, resolveButtonType } from './utils';
+import { mapButtonStyleToClass, mapPositionToJustifyContent, resolveButtonType, resolveConditionalData, resolveOptions, useFetchOptions } from './utils';
 import CheckboxGroup from './CheckboxGroup';
+import { ConditionalRuleEngine } from './ConditionalRuleEngine';
 /**
  * Converts htmlAttributes from array format to object format
  */
@@ -33,14 +34,14 @@ const normalizeAttributes = (attributes) => {
 /**
  * Renders a single form field component
  */
-export const renderFormField = ({ component, value, onChange, onBlur, ref, hasError = false, onClick }) => {
+export const RenderFormField = ({ component, value, onChange, onBlur, ref, hasError = false, onClick, locale, formState }) => {
     const commonProps = {
         floatLabelType: (component.floatLabelType || 'Never'),
         placeholder: component.placeholder || '',
         enabled: !component.disabled,
     };
     const createValidationHandlers = (getValue) => {
-        const validateOn = component.validateOn || 'Blur';
+        const validateOn = component.validateOn || 'Change';
         const handlers = {};
         // If validateOn is 'Change' or undefined, add change and blur handlers
         if (!validateOn || validateOn === 'Change') {
@@ -56,45 +57,61 @@ export const renderFormField = ({ component, value, onChange, onBlur, ref, hasEr
     };
     const htmlAttrs = normalizeAttributes(component.htmlAttributes);
     const errorClass = hasError ? 'e-error' : '';
-    const cssClass = `${component.cssClass || ''} ${errorClass}`.trim();
+    const cssClass = `${component.cssClass || ''} ${errorClass} ${component.size === 'Small' ? ' e-small' : component.size === 'Bigger' ? ' e-bigger' : ''}`.trim();
     switch (component.type) {
         case 'textbox':
-            return (_jsx(TextBoxComponent, { id: component.id, type: component.multiline ? 'hidden' : component.textboxType ? component.textboxType : 'text', name: component.id, ...commonProps, value: value !== undefined ? value : (component.defaultValue || ''), multiline: component.multiline, showClearButton: component.showClearButton, autocomplete: component.autocomplete === false ? 'off' : 'on', readonly: component.readOnly || false, cssClass: cssClass, htmlAttributes: htmlAttrs, ...createValidationHandlers((args) => args.value || ''), ref: ref }, component.id));
+            return (_jsx(TextBoxComponent, { id: component.id, type: component.multiline ? 'hidden' : component.textboxType ? component.textboxType : 'text', name: component.id, locale: locale, ...commonProps, value: value !== undefined ? value : (component.defaultValue || ''), multiline: component.multiline, showClearButton: component.showClearButton, autocomplete: component.autocomplete === false ? 'off' : 'on', readonly: component.readOnly || false, cssClass: cssClass, htmlAttributes: htmlAttrs, appendTemplate: component.suffix, prependTemplate: component.prefix, ...createValidationHandlers((args) => args.value || ''), ref: ref }, component.id));
         case 'textarea':
-            return (_jsx(TextAreaComponent, { id: component.id, name: component.id, ...commonProps, value: value !== undefined ? value : (component.defaultValue || ''), cols: component.cols || 200, rows: component.textareaRows || 4, showClearButton: component.showClearButton || false, readonly: component.readOnly || false, maxLength: component?.maxLength || 255, cssClass: cssClass, htmlAttributes: htmlAttrs, ...createValidationHandlers((args) => args.value || ''), ref: ref }, component.id));
+            return (_jsx(TextAreaComponent, { id: component.id, name: component.id, locale: locale, ...commonProps, value: value !== undefined ? value : (component.defaultValue || ''), cols: component.cols || 200, rows: component.textareaRows || 4, showClearButton: component.showClearButton || false, readonly: component.readOnly || false, maxLength: component?.maxLength || 255, cssClass: cssClass, htmlAttributes: htmlAttrs, appendTemplate: component.suffix, prependTemplate: component.prefix, resizeMode: 'Vertical', ...createValidationHandlers((args) => args.value || ''), ref: ref }, component.id));
         case 'number':
-            return (_jsx(NumericTextBoxComponent, { id: component.id, name: component.id, ...commonProps, value: value !== undefined ? value : (component.defaultValue || 0), decimals: component.decimals || 2, currency: component.currency, format: component.format || 'n2', step: component.step || 1, min: component.minValue || undefined, max: component.maxValue || undefined, readonly: component.readOnly || false, showClearButton: component.showClearButton || false, cssClass: cssClass, htmlAttributes: htmlAttrs, ...createValidationHandlers((args) => args.value || ''), ref: ref }, component.id));
+            value = value === "" ? undefined : value;
+            return (_jsx(NumericTextBoxComponent, { id: component.id, name: component.id, locale: locale, ...commonProps, value: value !== undefined || value !== "" ? value : (component.defaultValue || 0), decimals: component.decimals || 2, currency: component.currency, format: component.numberFormat || 'n2', step: component.step || 1, min: component.minValue || undefined, max: component.maxValue || undefined, readonly: component.readOnly || false, showClearButton: component.showClearButton || false, cssClass: cssClass, htmlAttributes: htmlAttrs, appendTemplate: component.suffix, prependTemplate: component.prefix, ...createValidationHandlers((args) => args.value || ''), ref: ref }, `${component.id}-${component.minValue}-${component.maxValue}`));
         case 'checkbox':
             const checkboxLabel = component.label && component.required
                 ? `${component.label} *`
                 : component.label;
-            return (_jsx(CheckBoxComponent, { id: component.id, name: component.id, label: checkboxLabel, labelPosition: component.checkboxLabelPosition, checked: component.defaultValue ?? (component.checked ?? false), indeterminate: component.indeterminate || false, disabled: component.disabled, cssClass: cssClass, htmlAttributes: htmlAttrs, change: (args) => onChange(args.checked), ref: ref }, component.id));
-        case 'checkboxgroup':
-            return (_jsx(CheckboxGroup, { component: component, value: value, onChange: (v) => onChange(v), optionRef: ref }, component.id));
+            return (_jsx(CheckBoxComponent, { id: component.id, locale: locale, name: component.id, label: checkboxLabel, labelPosition: component.checkboxLabelPosition, checked: (component.checked ?? false) || (value ?? false), indeterminate: component.indeterminate || false, disabled: component.disabled, cssClass: cssClass, htmlAttributes: htmlAttrs, change: (args) => onChange(args.checked), ref: ref }, component.id));
+        case 'checkboxGroup':
+            const fetchedCheckboxOptions = useFetchOptions(component.options);
+            const resolvedCheckboxOptions = resolveOptions(component.options, fetchedCheckboxOptions);
+            const finalCheckboxOptions = resolvedCheckboxOptions.length > 0 ? resolvedCheckboxOptions : component.options || ['Option 1'];
+            return (_jsx(CheckboxGroup, { component: { ...component, options: finalCheckboxOptions }, value: value, onChange: (v) => onChange(v), optionRef: ref }, component.id));
         case 'radio':
-            return (_jsx("div", { id: `${component.id}-group`, className: `e-radio-group ${errorClass}`, children: (component.options || ['Option 1']).map((option, idx) => {
+            return (_jsx("div", { id: `${component.id}-group`, className: `e-radio-group ${errorClass}`, children: (Array.isArray(component.options) ? component.options : ['Option 1']).map((option, idx) => {
                     const optionValue = option;
                     const optionText = option;
-                    return (_jsx("div", { style: { marginBottom: '8px' }, children: _jsx(RadioButtonComponent, { id: `${component.id}_${idx}_${optionValue}`, name: component.id, label: optionText, disabled: component.disabled, value: optionValue, htmlAttributes: htmlAttrs, labelPosition: component.fieldLabelPosition, checked: component.defaultValue === optionValue, cssClass: component.cssClass, change: (args) => {
+                    return (_jsx("div", { style: { marginBottom: '8px' }, children: _jsx(RadioButtonComponent, { id: `${component.id}_${idx}_${optionValue}`, name: component.id, label: optionText, locale: locale, disabled: component.disabled, value: optionValue, htmlAttributes: htmlAttrs, labelPosition: component.fieldLabelPosition, checked: component.defaultValue === optionValue || value === optionValue, cssClass: cssClass, change: (args) => {
                                 if (args.value === optionValue) {
                                     onChange(optionValue);
                                 }
                             }, ref: ref ? (el) => ref(el, idx) : undefined }, component.id) }, idx));
                 }) }));
         case 'dropdown':
-            return (_jsx(DropDownListComponent, { id: component.id, name: component.id, ...commonProps, cssClass: cssClass, dataSource: component.options || ["Option 1"], value: value !== undefined ? value : (component.defaultValue ?? null), showClearButton: component.showClearButton || false, readonly: component.readOnly || false, enableVirtualization: component.enableVirtualization || false, popupHeight: component.popupHeight || '300px', popupWidth: component.popupWidth || '100%', htmlAttributes: htmlAttrs, ...createValidationHandlers((args) => args.value || ''), ref: ref }, component.id));
+            const fetchedDropdownOptions = useFetchOptions(component.options);
+            const resolvedDropdownOptions = resolveOptions(component.options, fetchedDropdownOptions);
+            let finalDropdownOptions = resolvedDropdownOptions.length > 0 ? resolvedDropdownOptions : component.options || ['Option 1'];
+            if (component.conditions?.choiceBasedField) {
+                finalDropdownOptions = ConditionalRuleEngine.getChoiceBasedOptions(component.conditions.choiceBasedField, finalDropdownOptions, formState?.values, component.conditions.choiceBasedField.primaryFieldId);
+                if (finalDropdownOptions.length > 0 && value != null && !finalDropdownOptions.includes(value)) {
+                    formState.onChange(component.id, { value: null });
+                }
+            }
+            return (_jsx(DropDownListComponent, { id: component.id, name: component.id, ...commonProps, locale: locale, cssClass: cssClass, dataSource: finalDropdownOptions, value: value !== undefined ? value : (component.defaultValue ?? null), showClearButton: component.showClearButton || false, readonly: component.readOnly || false, enableVirtualization: component.enableVirtualization || false, popupHeight: component.popupHeight || '300px', popupWidth: component.popupWidth || '100%', htmlAttributes: htmlAttrs, ...createValidationHandlers((args) => args.value || ''), ref: ref }, component.id));
         case 'multiselect':
-            return (_jsx(MultiSelectComponent, { id: component.id, name: component.id, ...commonProps, value: value !== undefined ? value : (component.defaultValue ?? null), placeholder: component.placeholder, dataSource: component.options || ["Option 1"], fields: { text: 'text', value: 'value' }, showClearButton: component.showClearButton || false, readonly: component.readOnly || false, allowCustomValue: component.allowCustomValue || false, addTagOnBlur: component.addTagOnBlur || false, delimiterChar: component.delimiterChar || ',', showSelectAll: component.showSelectAll || false, mode: component.showSelectAll ? 'CheckBox' : undefined, selectAllText: component.selectAllText, unSelectAllText: component.unSelectAllText, showDropDownIcon: component.showDropDownIcon !== false, enableVirtualization: component.enableVirtualization || false, popupHeight: component.popupHeight || '300px', popupWidth: component.popupWidth || '100%', cssClass: cssClass, htmlAttributes: htmlAttrs, ...createValidationHandlers((args) => args.value || ''), ref: ref, children: _jsx(Inject, { services: [CheckBoxSelection] }) }, component.id));
-        case 'datepicker':
-            return (_jsx(DatePickerComponent, { ...commonProps, id: component.id, name: component.id, value: value !== undefined ? value : (component.defaultValue ?? null), floatLabelType: component.floatLabelType || 'Never', format: component.format || 'MM/dd/yyyy', placeholder: component.placeholder || '', readOnly: component.readOnly || false, showClearButton: component.showClearButton !== false ? true : false, showTodayButton: component.showTodayButton !== false ? true : false, calendarMode: component.calendarMode || 'Gregorian', dayHeaderFormat: component.dayHeaderFormat || 'Short', depth: component.depth || 'Month', start: component.start || 'Month', firstDayOfWeek: component.firstDayOfWeek || 0, min: component?.minDate ? new Date(component.minDate) : undefined, max: component?.maxDate ? new Date(component.maxDate) : undefined, cssClass: cssClass, htmlAttributes: htmlAttrs, ...createValidationHandlers((args) => args.value || ''), ref: ref, children: _jsx(Inject, { services: [Islamic] }) }, component.id));
-        case 'datetimepicker':
-            return (_jsx(DateTimePickerComponent, { ...commonProps, id: component.id, name: component.id, floatLabelType: component.floatLabelType || 'Never', dayHeaderFormat: component.dayHeaderFormat || 'Short', value: value !== undefined ? value : (component.defaultValue ?? null), format: component.format || 'MM/dd/yyyy hh:mm a', showClearButton: component.showClearButton !== false, showTodayButton: component.showTodayButton || false, depth: component.depth || 'Month', start: component.start || 'Month', step: component.step || 1, readonly: component.readOnly || false, min: component?.minDate ? new Date(component.minDate) : undefined, max: component?.maxDate ? new Date(component.maxDate) : undefined, minTime: component?.minTime ? new Date(`2000-01-01 ${component.minTime}`) : undefined, maxTime: component?.maxTime ? new Date(`2000-01-01 ${component.maxTime}`) : undefined, enableMask: false, cssClass: cssClass, htmlAttributes: htmlAttrs, ...createValidationHandlers((args) => args.value || ''), ref: ref, children: _jsx(Inject, { services: [Islamic] }) }, component.id));
-        case 'timepicker':
-            return (_jsx(TimePickerComponent, { id: component.id, name: component.id, floatLabelType: component.floatLabelType || 'Never', placeholder: component.placeholder || '', enabled: !component.disabled, value: value !== undefined ? value : (component.defaultValue ?? null), format: component.format || 'hh:mm a', showClearButton: component.showClearButton !== false, step: component.step || 30, readonly: component.readOnly || false, min: component?.minTime ? new Date(`2000-01-01 ${component.minTime}`) : undefined, max: component?.maxTime ? new Date(`2000-01-01 ${component.maxTime}`) : undefined, enableMask: false, cssClass: cssClass, htmlAttributes: htmlAttrs, ...createValidationHandlers((args) => args.value || ''), ref: ref }, component.id));
-        case 'daterange':
-            return (_jsx(DateRangePickerComponent, { id: component.id, name: component.id, floatLabelType: component.floatLabelType || 'Never', dayHeaderFormat: component.dayHeaderFormat || 'Short', placeholder: component.placeholder || '', enabled: !component.disabled, value: value !== undefined ? value : (component.defaultValue ?? null), depth: component.depth || 'Month', start: component.start || 'Month', min: component?.minDate ? new Date(component.minDate) : undefined, max: component?.maxDate ? new Date(component.maxDate) : undefined, format: component.format || 'MM/dd/yyyy', separator: component.separator || ' - ', showClearButton: component.showClearButton !== false, readonly: component.readOnly || false, cssClass: cssClass, htmlAttributes: htmlAttrs, ...createValidationHandlers((args) => args.value || ''), ref: ref }, component.id));
+            const fetchedMultiSelectOptions = useFetchOptions(component.options);
+            const resolvedMultiSelectOptions = resolveOptions(component.options, fetchedMultiSelectOptions);
+            const finalMultiSelectOptions = resolvedMultiSelectOptions.length > 0 ? resolvedMultiSelectOptions : component.options || ['Option 1'];
+            return (_jsx(MultiSelectComponent, { id: component.id, name: component.id, locale: locale, ...commonProps, value: value !== undefined ? value : (component.defaultValue ?? null), placeholder: component.placeholder, dataSource: finalMultiSelectOptions, fields: { text: 'text', value: 'value' }, showClearButton: component.showClearButton || false, readonly: component.readOnly || false, allowCustomValue: component.allowCustomValue || false, addTagOnBlur: component.addTagOnBlur || false, delimiterChar: component.delimiterChar || ',', showSelectAll: component.showSelectAll || false, mode: component.showSelectAll ? 'CheckBox' : undefined, selectAllText: component.selectAllText, unSelectAllText: component.unSelectAllText, showDropDownIcon: component.showDropDownIcon !== false, enableVirtualization: component.enableVirtualization || false, popupHeight: component.popupHeight || '300px', popupWidth: component.popupWidth || '100%', cssClass: cssClass, htmlAttributes: htmlAttrs, ...createValidationHandlers((args) => args.value || ''), ref: ref, children: _jsx(Inject, { services: [CheckBoxSelection] }) }, component.id));
+        case 'date':
+            return (_jsx(DatePickerComponent, { ...commonProps, id: component.id, name: component.id, locale: locale, value: value !== undefined ? value : (component.defaultValue ?? null), floatLabelType: component.floatLabelType || 'Never', format: component.format || 'MM/dd/yyyy', placeholder: component.placeholder || '', readOnly: component.readOnly || false, showClearButton: component.showClearButton !== false ? true : false, showTodayButton: component.showTodayButton !== false ? true : false, calendarMode: component.calendarMode || 'Gregorian', dayHeaderFormat: component.dayHeaderFormat || 'Short', depth: component.depth || 'Month', start: component.start || 'Month', firstDayOfWeek: component.firstDayOfWeek || 0, min: component?.minDate ? new Date(component.minDate) : undefined, max: component?.maxDate ? new Date(component.maxDate) : undefined, cssClass: cssClass, htmlAttributes: htmlAttrs, ...createValidationHandlers((args) => args.value || ''), ref: ref, children: _jsx(Inject, { services: [Islamic] }) }, `${component.id}-${component.minDate}-${component.maxDate}`));
+        case 'dateTime':
+            return (_jsx(DateTimePickerComponent, { id: `${component.id}-${component.minTime}-${component.maxTime}-${component.minDate}-${component.maxDate}`, ...commonProps, locale: locale, name: component.id, floatLabelType: component.floatLabelType || 'Never', dayHeaderFormat: component.dayHeaderFormat || 'Short', value: value !== undefined ? value : (component.defaultValue ?? null), format: component.format || 'MM/dd/yyyy hh:mm a', showClearButton: component.showClearButton !== false, showTodayButton: component.showTodayButton !== false ? true : false, depth: component.depth || 'Month', start: component.start || 'Month', step: component.step || 1, readonly: component.readOnly || false, min: component?.minDate ? new Date(component.minDate) : undefined, max: component?.maxDate ? new Date(component.maxDate) : undefined, minTime: component?.minTime ? new Date(`2000-01-01 ${component.minTime}`) : undefined, maxTime: component?.maxTime ? new Date(`2000-01-01 ${component.maxTime}`) : undefined, enableMask: false, cssClass: cssClass, htmlAttributes: htmlAttrs, ...createValidationHandlers((args) => args.value || ''), ref: ref, children: _jsx(Inject, { services: [Islamic] }) }));
+        case 'time':
+            return (_jsx(TimePickerComponent, { id: `${component.id}-${component.minTime}-${component.maxTime}`, locale: locale, name: component.id, floatLabelType: component.floatLabelType || 'Never', placeholder: component.placeholder || '', enabled: !component.disabled, value: value !== undefined ? value : (component.defaultValue ?? null), format: component.format || 'hh:mm a', showClearButton: component.showClearButton !== false, step: component.step || 30, readonly: component.readOnly || false, min: component?.minTime ? new Date(`2000-01-01 ${component.minTime}`) : undefined, max: component?.maxTime ? new Date(`2000-01-01 ${component.maxTime}`) : undefined, enableMask: false, cssClass: cssClass, htmlAttributes: htmlAttrs, ...createValidationHandlers((args) => args.value || ''), ref: ref }, component.id));
+        case 'dateRange':
+            return (_jsx(DateRangePickerComponent, { id: component.id, locale: locale, name: component.id, floatLabelType: component.floatLabelType || 'Never', dayHeaderFormat: component.dayHeaderFormat || 'Short', placeholder: component.placeholder || '', enabled: !component.disabled, value: value !== undefined ? value : (component.defaultValue ?? null), depth: component.depth || 'Month', start: component.start || 'Month', min: component?.minDate ? new Date(component.minDate) : undefined, max: component?.maxDate ? new Date(component.maxDate) : undefined, format: component.format || 'MM/dd/yyyy', separator: component.separator || ' - ', showClearButton: component.showClearButton !== false, readonly: component.readOnly || false, cssClass: cssClass, htmlAttributes: htmlAttrs, ...createValidationHandlers((args) => args.value || ''), ref: ref }, component.id));
         case 'switch':
-            return (_jsx(SwitchComponent, { id: component.id, value: component.defaultValue, name: component.id, checked: component.checked, disabled: component.disabled, onLabel: component.onLabel || '', offLabel: component.offLabel || '', cssClass: cssClass, htmlAttributes: htmlAttrs, change: (args) => onChange(args.checked), ref: ref }, component.id));
+            return (_jsx(SwitchComponent, { id: component.id, locale: locale, value: component.defaultValue, name: component.id, checked: (component.checked ?? false) || (value ?? false), disabled: component.disabled, onLabel: component.onLabel || '', offLabel: component.offLabel || '', cssClass: cssClass, htmlAttributes: htmlAttrs, change: (args) => onChange(args.checked), ref: ref }, component.id));
         case 'button':
             // If buttonsGroups is provided, render a button group in-place of a single button
             const groupButtons = (component.buttonsGroups || component.buttons || []);
@@ -107,12 +124,12 @@ export const renderFormField = ({ component, value, onChange, onBlur, ref, hasEr
                     justifyContent: mapPositionToJustifyContent(component.position),
                     width: component.width || undefined,
                 };
-                return (_jsx("div", { id: component.id, role: "group", "aria-label": component.label || 'Button Group', className: component.cssClass, style: groupStyleObj, children: groupButtons.map((btn, idx) => {
+                return (_jsx("div", { id: component.id, role: "group", "aria-label": component.label || 'Button Group', className: cssClass, style: groupStyleObj, children: groupButtons.map((btn, idx) => {
                         const btnId = `${component.id}_${idx}`;
                         const btnCssClass = [
                             mapButtonStyleToClass(btn.style)
                         ].filter(Boolean).join(' ');
-                        return (_jsx(ButtonComponent, { id: String(btnId), name: String(btnId), type: resolveButtonType(btn.type), cssClass: btnCssClass, disabled: btn.disabled || false, content: btn.label || `Button ${idx + 1}`, iconCss: btn.iconCss, iconPosition: btn.iconPosition, onClick: (event) => {
+                        return (_jsx(ButtonComponent, { id: String(btnId), name: String(btnId), locale: locale, type: resolveButtonType(btn.type), cssClass: btnCssClass, disabled: btn.disabled || false, content: btn.label || `Button ${idx + 1}`, iconCss: btn.iconCss, iconPosition: btn.iconPosition, onClick: (event) => {
                                 if (onClick) {
                                     onClick(event);
                                 }
@@ -129,19 +146,20 @@ export const renderFormField = ({ component, value, onChange, onBlur, ref, hasEr
                 mapButtonStyleToClass(component.style),
                 resolvedButtonType === 'submit' ? 'submit-btn form-submit-type' : '',
                 resolvedButtonType === 'reset' ? 'form-reset-type' : '',
-                component.cssClass || 'e-primary'
+                component.cssClass || 'e-primary',
+                component.size === 'Small' ? ' e-small' : component.size === 'Bigger' ? ' e-bigger' : ''
             ].filter(Boolean).join(' ') || 'e-primary';
             const buttonContainerStyle = {
                 display: 'flex',
                 justifyContent: mapPositionToJustifyContent(component.position),
                 width: component.width || '100%',
             };
-            return (_jsx("div", { id: `${component.id}-container`, style: buttonContainerStyle, children: _jsx(ButtonComponent, { id: component.id, type: resolvedButtonType, cssClass: buttonCssClassList, disabled: component.disabled, iconCss: component.iconCss, iconPosition: component.iconPosition, onClick: (event) => {
+            return (_jsx("div", { id: `${component.id}-container`, style: buttonContainerStyle, children: _jsx(ButtonComponent, { id: component.id, type: resolvedButtonType, locale: locale, cssClass: buttonCssClassList, disabled: component.disabled, iconCss: component.iconCss, iconPosition: component.iconPosition, onClick: (event) => {
                         if (onClick) {
                             onClick(event);
                         }
                     }, ref: ref, children: component.label }, component.id) }, `form-${component.type}-${component.id}`));
-        case 'splitbutton':
+        case 'splitButton':
             const splitButtonCssClassList = [
                 component.style === 'primary' ? 'e-primary' : '',
                 component.style === 'flat' ? '' : '',
@@ -155,7 +173,7 @@ export const renderFormField = ({ component, value, onChange, onBlur, ref, hasEr
                 display: 'flex',
                 justifyContent: mapPositionToJustifyContent(component.position)
             };
-            return (_jsx("div", { id: `${component.id}-container`, "aria-label": 'Splitbutton', style: splitButtonContainerStyle, children: _jsx(SplitButtonComponent, { id: component.id, content: component.label || 'Split Button', items: component.options?.map((option, index) => ({
+            return (_jsx("div", { id: `${component.id}-container`, "aria-label": 'Splitbutton', style: splitButtonContainerStyle, children: _jsx(SplitButtonComponent, { id: component.id, locale: locale, content: component.label || 'Split Button', items: component.options?.map((option, index) => ({
                         text: option,
                         id: `${component.id}_option_${index}`
                     })) || [{ text: 'Option 1', id: `${component.id}_option_0` }], cssClass: splitButtonCssClassList, disabled: component.disabled, iconCss: component.iconCss, iconPosition: component.iconPosition || 'Left', onClick: (event) => {
@@ -168,34 +186,40 @@ export const renderFormField = ({ component, value, onChange, onBlur, ref, hasEr
                         }
                     }, ref: ref }, component.id) }, `form-${component.type}-${component.id}`));
         case 'signature':
-            return (_jsx(SignatureComponent, { id: component.id, backgroundColor: component.backgroundColor || '', strokeColor: component.strokeColor || '', maxStrokeWidth: component.maxValue, minStrokeWidth: component.minValue, velocity: component.velocity, disabled: component.disabled, change: (args) => onChange(args.value), ref: ref }, component.id));
+            return (_jsx(SignatureComponent, { id: component.id, className: cssClass, locale: locale, backgroundColor: component.backgroundColor || '', strokeColor: component.strokeColor || '', maxStrokeWidth: component.maxValue, minStrokeWidth: component.minValue, velocity: component.velocity, disabled: component.disabled, change: (args) => onChange(args.value), ref: ref }, component.id));
         case 'rating':
-            return (_jsx(RatingComponent, { id: component.id, name: component.id, value: value !== undefined ? value : (component.defaultValue || 0), disabled: component.disabled, cssClass: component.cssClass, allowReset: component.allowReset, itemsCount: component.itemsCount, min: component?.minValue, precision: component.precision, readOnly: component.readOnly, showTooltip: component.showRatingTooltip || false, showLabel: component.showRatingLabel, labelPosition: component.showRatingLabel ? component.ratingLabelPosition : undefined, valueChanged: (args) => onChange(args.value), ref: ref }, component.id));
-        case 'colorpicker':
-            return (_jsx(ColorPickerComponent, { id: component.id, value: value !== undefined ? value : (component.defaultValue || ''), disabled: component.disabled, enableOpacity: component.enableOpacity, showButtons: component.showButtons, showRecentColors: component.showRecentColors, noColor: component.showNoColor, cssClass: cssClass, change: (args) => onChange(args.value), ref: ref }, component.id));
-        case 'inputmask':
-            return (_jsx(MaskedTextBoxComponent, { id: component.id, name: component.id, ...commonProps, value: value !== undefined ? value : (component.defaultValue || ''), floatLabelType: component.floatLabelType || 'Never', placeholder: component.placeholder || '', enabled: !component.disabled, mask: component.mask || '000-000-0000', promptChar: component.promptChar || '_', customCharacters: component.customCharacters, readOnly: component.readOnly || false, showClearButton: component.showClearButton !== false, cssClass: cssClass, htmlAttributes: htmlAttrs, ...createValidationHandlers((args) => args.value || ''), ref: ref }, component.id));
-        case 'rangeslider':
-            return (_jsx(SliderComponent, { id: component.id, value: value !== undefined ? value : (component.defaultValue ?? 0), min: component.minValue || 0, max: component.maxValue || 100, step: component.step || 1, disabled: component.disabled, cssClass: cssClass, enabled: !component.disabled, showButtons: component.showButtons, change: (args) => onChange(args.value), ref: ref }, component.id));
-        case 'fileupload':
-            return (_jsx(UploaderComponent, { id: component.id, name: component.id, type: 'file', enabled: !component.disabled, allowedExtensions: component.allowExtensions, asyncSettings: { saveUrl: component.saveUrl, removeUrl: component.removeUrl }, buttons: component.buttons || {
+            return (_jsx(RatingComponent, { id: component.id, name: component.id, locale: locale, value: value !== undefined ? value : (component.defaultValue || 0), disabled: component.disabled, cssClass: cssClass, allowReset: component.allowReset, itemsCount: component.itemsCount, min: component?.minValue, precision: component.precision, readOnly: component.readOnly, showTooltip: component.showRatingTooltip || false, showLabel: component.showRatingLabel, labelPosition: component.showRatingLabel ? component.ratingLabelPosition : undefined, valueChanged: (args) => onChange(args.value), ref: ref }, component.id));
+        case 'colorPicker':
+            return (_jsx(ColorPickerComponent, { id: component.id, locale: locale, value: value !== undefined ? value : (component.defaultValue || ''), disabled: component.disabled, enableOpacity: component.enableOpacity, showButtons: component.showButtons, showRecentColors: component.showRecentColors, noColor: component.showNoColor, cssClass: cssClass, change: (args) => onChange(args.value), ref: ref }, component.id));
+        case 'inputMask':
+            return (_jsx(MaskedTextBoxComponent, { id: component.id, name: component.id, ...commonProps, locale: locale, value: value !== undefined ? value : (component.defaultValue || ''), floatLabelType: component.floatLabelType || 'Never', placeholder: component.placeholder || '', enabled: !component.disabled, mask: component.mask || '000-000-0000', promptChar: component.promptChar || '_', customCharacters: component.customCharacters, readOnly: component.readOnly || false, showClearButton: component.showClearButton !== false, cssClass: cssClass, htmlAttributes: htmlAttrs, appendTemplate: component.suffix, prependTemplate: component.prefix, ...createValidationHandlers((args) => args.value || ''), ref: ref }, component.id));
+        case 'rangeSlider':
+            return (_jsx(SliderComponent, { id: component.id, locale: locale, value: value !== undefined ? value : (component.defaultValue ?? 0), min: component.minValue || 0, max: component.maxValue || 100, step: component.step || 1, disabled: component.disabled, cssClass: cssClass, enabled: !component.disabled, showButtons: component.showButtons, change: (args) => onChange(args.value), ref: ref }, component.id));
+        case 'fileUpload':
+            return (_jsx(UploaderComponent, { id: component.id, name: component.id, locale: locale, type: 'file', enabled: !component.disabled, allowedExtensions: component.allowExtensions, asyncSettings: { saveUrl: component.saveUrl, removeUrl: component.removeUrl }, buttons: component.buttons || {
                     "browse": "Choose File",
                     "clear": "Clear All",
                     "upload": "Upload All"
                 }, maxFileSize: component?.maxValue, minFileSize: component?.minValue, multiple: component.allowMultiple, showFileList: component.showFileList, htmlAttributes: htmlAttrs, cssClass: cssClass, change: (args) => onChange(args.filesData), ref: ref }, component.id));
-        case 'imageeditor':
-            return (_jsx(ImageEditorComponent, { id: component.id, disabled: component.disabled, cssClass: component.cssClass, height: (component.height || '350px').toString(), width: (component.width || '100%').toString(), ref: ref }, component.id));
+        case 'imageEditor':
+            return (_jsx(ImageEditorComponent, { id: component.id, locale: locale, disabled: component.disabled, cssClass: cssClass, height: (component.height || '350px').toString(), width: (component.width || '100%').toString(), ref: ref }, component.id));
         case 'message':
-            return (_jsx(MessageComponent, { id: component.id, severity: component.severity || component.messageType || 'info', variant: component.variant, content: component.content || 'Message', showCloseIcon: component.showCloseIcon || false, showIcon: component.showIcon || false, disabled: component.disabled, cssClass: component.cssClass, ref: ref }, component.id));
-        case 'datagrid':
+            return (_jsx(MessageComponent, { id: component.id, locale: locale, severity: component.severity || component.messageType || 'info', variant: component.variant, content: component.content || 'Message', showCloseIcon: component.showCloseIcon, showIcon: (component.showIcon === undefined ? false : component.showIcon) || false, disabled: component.disabled, cssClass: cssClass, ref: ref }, component.id));
+        case 'dataGrid':
             const dg = component;
-            return (_jsx("div", { id: dg.id, className: dg.cssClass, children: _jsx(DataGridComponent, { id: dg.id, type: 'datagrid', label: dg.label || '', columns: dg.columns || [], dataSource: value !== undefined ? value : (dg.dataSource ?? dg.dataSource ?? []), height: dg.height || '200px', width: dg.width || '100%', pageSize: dg.pageSize || 6, allowPaging: dg.allowPaging !== false, allowAdding: dg.allowAdding !== false, allowEditing: dg.allowEditing !== false, allowDeleting: dg.allowDeleting !== false, onDataChange: (data) => onChange(data), ref: ref }) }, dg.id));
-        case 'richtexteditor':
+            const conditionalData = resolveConditionalData(dg.conditions, formState?.values || {})?.dataSource;
+            const conditionalColumns = resolveConditionalData(dg.conditions, formState?.values || {})?.columns;
+            const fetchedDataSource = conditionalData ? useFetchOptions(conditionalData) : useFetchOptions(dg.dataSource);
+            const resolvedDataSource = conditionalData ? resolveOptions(conditionalData, fetchedDataSource) : resolveOptions(dg.dataSource, fetchedDataSource);
+            const finalDataSource = resolvedDataSource.length > 0 ? resolvedDataSource : (dg.dataSource ?? []);
+            const finalColumns = conditionalColumns && conditionalColumns.length > 0 ? conditionalColumns : (dg.columns ?? []);
+            return (_jsx("div", { id: dg.id, className: dg.cssClass, children: _jsx(DataGridComponent, { id: dg.id, type: 'dataGrid', locale: locale, label: dg.label || '', name: dg.name || '', columns: finalColumns, dataSource: value !== undefined ? value : finalDataSource, height: dg.height || '200px', width: dg.width || '100%', pageSize: dg.pageSize || 6, allowPaging: dg.allowPaging !== false, allowFiltering: dg.allowFiltering, allowAdding: dg.allowAdding !== false, allowEditing: dg.allowEditing !== false, allowDeleting: dg.allowDeleting !== false, onDataChange: (data) => onChange(data), cssClass: cssClass, ref: ref }) }, dg.id));
+        case 'richTextEditor':
             const toolbarSettings = {
                 items: ['Undo', 'Redo', '|', 'Bold', 'Italic', 'Underline', 'StrikeThrough', 'InlineCode', '|', 'CreateLink', 'Blockquote', '|', 'BulletFormatList', 'NumberFormatList', '|', 'Formats', 'Alignments', '|', 'Outdent', 'Indent', '|',
                     'FontColor', 'BackgroundColor', 'FontName', 'FontSize', '|', 'LowerCase', 'UpperCase', '|', 'SourceCode']
             };
-            return (_jsx(RichTextEditorComponent, { id: component.id, name: component.id, toolbarSettings: toolbarSettings, value: value !== undefined ? value : (component.defaultValue || ''), placeholder: component.placeholder || '', enabled: !component.disabled, readonly: component.readOnly || false, maxLength: component.maxLength || 1000, cssClass: cssClass || undefined, height: component.height || '300px', width: component.width || '100%', htmlAttributes: htmlAttrs, ref: ref, children: _jsx(RTEInject, { services: [Toolbar, Link, HtmlEditor, QuickToolbar] }) }, `${component.id}`));
+            return (_jsx(RichTextEditorComponent, { id: component.id, locale: locale, name: component.id, toolbarSettings: toolbarSettings, value: value !== undefined ? value : (component.defaultValue || ''), placeholder: component.placeholder || '', enabled: !component.disabled, readonly: component.readOnly || false, maxLength: component.maxLength || 1000, cssClass: cssClass || undefined, height: component.height || '300px', width: component.width || '100%', htmlAttributes: htmlAttrs, ref: ref, children: _jsx(RTEInject, { services: [Toolbar, Link, HtmlEditor, QuickToolbar] }) }, `${component.id}`));
         default:
             return (_jsxs("div", { className: "unsupported-component", children: ["Unsupported component type: ", component.type] }));
     }

package/src/types/FormSchema.d.ts

@@ -8,17 +8,47 @@ export interface ButtonClickEventArgs {
     buttonLabel: string;
     event: React.MouseEvent<HTMLButtonElement>;
 }
+export type ConditionalOperator = 'equal' | 'notEqual' | 'greaterThan' | 'lessThan' | 'greaterThanOrEqual' | 'lessThanOrEqual' | 'in' | 'notIn' | 'contains' | 'notContains';
+export interface ConditionalRule {
+    field: string;
+    operator: ConditionalOperator;
+    value: any;
+}
+export interface CompositeConditionalRule {
+    condition: 'and' | 'or';
+    rules: (ConditionalRule | CompositeConditionalRule)[];
+}
+export type ConditionType = ConditionalRule | CompositeConditionalRule;
+export interface ChoiceBasedFieldRule {
+    primaryFieldId: string;
+    choiceMapping: Record<string, string[]>;
+    showAllWhenNotMapped?: boolean;
+}
+export interface FormComponentConditions {
+    visibleWhen?: ConditionType;
+    hideWhen?: ConditionType;
+    readOnlyWhen?: ConditionType;
+    disabledWhen?: ConditionType;
+    requiredWhen?: ConditionType;
+    setValueWhen?: {
+        condition: ConditionType;
+        value: any;
+    };
+    choiceBasedField?: ChoiceBasedFieldRule;
+}
 export interface FormSchema {
     version: string;
-    theme: string;
     components: FormComponent[];
 }
 export interface FormComponent {
     id: string;
-    type: 'textbox' | 'textarea' | 'number' | 'email' | 'url' | 'phone' | 'password' | 'checkbox' | 'checkboxgroup' | 'radio' | 'dropdown' | 'multiselect' | 'button' | 'datepicker' | 'datetimepicker' | 'timepicker' | 'daterange' | 'switch' | 'signature' | 'rating' | 'imageeditor' | 'fileupload' | 'rangeslider' | 'colorpicker' | 'inputmask' | 'message' | 'panel' | 'table' | 'tabs' | 'datagrid' | 'card' | 'splitbutton' | 'richtexteditor' | 'statichtml';
+    type: 'textbox' | 'textarea' | 'number' | 'email' | 'url' | 'phone' | 'password' | 'checkbox' | 'checkboxGroup' | 'radio' | 'dropdown' | 'multiselect' | 'button' | 'date' | 'dateTime' | 'time' | 'dateRange' | 'switch' | 'signature' | 'rating' | 'imageEditor' | 'fileUpload' | 'rangeSlider' | 'colorPicker' | 'inputMask' | 'message' | 'panel' | 'table' | 'tabs' | 'dataGrid' | 'card' | 'splitButton' | 'richTextEditor' | 'staticHtml';
     textboxType?: string;
     label: string;
     name: string;
+    description?: string | undefined;
+    prefix?: string | undefined;
+    suffix?: string | undefined;
     placeholder?: string;
     defaultValue?: any;
     disabled?: boolean;
@@ -59,6 +89,7 @@ export interface FormComponent {
     decimals?: number;
     currency?: string;
     format?: string;
+    numberFormat?: string;
     allowReset?: boolean;
     itemsCount?: number;
     precision?: number | string;
@@ -108,6 +139,7 @@ export interface FormComponent {
     showDropDownIcon?: boolean;
     validateOn?: 'Change' | 'Blur';
     pageSize?: number;
+    size?: string;
     allowPaging?: boolean;
     allowAdding?: boolean;
     allowEditing?: boolean;
@@ -153,6 +185,8 @@ export interface FormComponent {
     tableCells?: FormComponent[][][];
     parentPath?: string;
     properties?: Record<string, any>;
+    expressionValue?: string;
+    conditions?: FormComponentConditions;
     _configured?: boolean;
 }
 export interface ValidationRules {