@syncfusion/ej2-react-form-builder 0.1.0-beta

package/src/utils/renderComponent.js

@@ -0,0 +1,300 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { TextBoxComponent, NumericTextBoxComponent, TextAreaComponent, MaskedTextBoxComponent } from '@syncfusion/ej2-react-inputs';
+import { CheckBoxComponent, ButtonComponent, RadioButtonComponent, SwitchComponent } from '@syncfusion/ej2-react-buttons';
+import { SplitButtonComponent } from '@syncfusion/ej2-react-splitbuttons';
+import { DatePickerComponent, DateRangePickerComponent, DateTimePickerComponent, Inject as DRPInject, Islamic, TimePickerComponent } from '@syncfusion/ej2-react-calendars';
+import { CheckBoxSelection, DropDownListComponent, MultiSelectComponent, VirtualScroll, Inject } from '@syncfusion/ej2-react-dropdowns';
+import { SignatureComponent } from '@syncfusion/ej2-react-inputs';
+import { RatingComponent } from '@syncfusion/ej2-react-inputs';
+import { UploaderComponent } from '@syncfusion/ej2-react-inputs';
+import { SliderComponent } from '@syncfusion/ej2-react-inputs';
+import { ColorPickerComponent } from '@syncfusion/ej2-react-inputs';
+import { MessageComponent } from '@syncfusion/ej2-react-notifications';
+import { ImageEditorComponent } from '@syncfusion/ej2-react-image-editor';
+import { RichTextEditorComponent, Toolbar, HtmlEditor, Inject as RTEInject, Link, QuickToolbar, Image as RTEImage, Count, Table, EmojiPicker, PasteCleanup, SlashMenu, CodeBlock, ClipBoardCleanup, AutoFormat } from '@syncfusion/ej2-react-richtexteditor';
+import { DataGridComponent } from '../../Common/DataGridComponent';
+import { mapButtonStyleToClass, mapPositionToJustifyContent, resolveButtonType, resolveOptions, useFetchLookupOptions, useFetchOptions } from '../../Common/utils';
+import CheckboxGroup from '../../Common/CheckboxGroup';
+/**
+ * Converts htmlAttributes from array format to object format
+ * Array format: [{key: "data-test", value: "ms-1"}, ...]
+ * Object format: {"data-test": "ms-1", ...}
+ */
+const showAttributes = (attributes) => {
+    if (!attributes)
+        return {};
+    if (Array.isArray(attributes)) {
+        return attributes.reduce((acc, item) => {
+            if (item.key && item.value !== undefined) {
+                acc[item.key] = item.value;
+            }
+            return acc;
+        }, {});
+    }
+    return attributes;
+};
+/**
+ * Shared component rendering utility used by both MainSection and ComponentPreview
+ * Renders a FormComponent with all properties applied consistently
+ */
+export const RenderComponent = ({ component, formState, gridRefs, l10n, locale, formSettings }) => {
+    const fetchedOptions = useFetchOptions(component.options);
+    const fetchedDataSource = useFetchOptions(component.dataSource);
+    const commonProps = {
+        floatLabelType: 'Never',
+        placeholder: component.placeholder || '',
+        enabled: !component.disabled,
+    };
+    const fetchedLookupDataSource = useFetchLookupOptions(component.dataSource?.type === 'lookup' ? component.dataSource?.formName : undefined);
+    const lookupComponent = component.type === 'lookup'
+        ? component
+        : undefined;
+    const lookupOptions = useFetchLookupOptions(lookupComponent?.lookUpConfig?.formName, lookupComponent?.lookUpConfig?.field);
+    let value = formState?.values[component.id];
+    const currentValue = formState?.values[component.id];
+    if (formState && component.defaultValue !== undefined && component.defaultValue !== '' && component.defaultValue !== null) {
+        const isEmpty = currentValue === '' || currentValue === undefined || currentValue === null;
+        if (currentValue !== component.defaultValue && !isEmpty) {
+            formState.onChange(component.id, { value: component.defaultValue });
+            formState.values[component.id] = component.defaultValue;
+        }
+    }
+    const resolvedOptions = resolveOptions(component.options, fetchedOptions);
+    const resolvedDataSource = resolveOptions(component.dataSource, fetchedDataSource, fetchedLookupDataSource);
+    const isDefaultOptions = component.options?.length === 1 && component.options[0] === 'defaultOptionValue';
+    const sizeCSSClass = formSettings?.size === 'Small' || component.size === 'Small' ? ' e-small' : component.size === 'Bigger' ? ' e-bigger' : '';
+    const createValidationHandlers = (getValue) => {
+        const validateOn = component?.validateOn || 'Blur';
+        const handlers = {};
+        // If validateOn is 'Change' or undefined, add change and blur handlers
+        if (!validateOn || validateOn === 'Change') {
+            handlers.onChange = (args) => formState?.onChange(component.id, { value: getValue(args) });
+            handlers.onBlur = () => formState?.onBlur(component.id);
+        }
+        // If validateOn is 'Blur', add change and blur handlers
+        if (validateOn === 'Blur') {
+            handlers.change = (args) => formState?.onChange(component.id, { value: getValue(args) });
+            handlers.blur = () => formState?.onBlur(component.id);
+        }
+        return handlers;
+    };
+    switch (component.type) {
+        case 'textbox':
+            const textboxErrorClass = formState?.errors[component.id] ? 'e-error' : '';
+            const textboxCssClass = [component.cssClass || '', textboxErrorClass].filter(Boolean).join(' ') || undefined;
+            const textboxAttrs = formState?.values.htmlAttributes ? showAttributes(formState.values.htmlAttributes) : showAttributes(component.htmlAttributes);
+            return (_jsx(TextBoxComponent, { id: component.id, name: component.id, locale: locale, type: component.multiline ? 'hidden' : component.textboxType ? component.textboxType : 'text', ...commonProps, value: value !== undefined ? value : (component.defaultValue || ''), floatLabelType: component.floatLabelType || 'Never', multiline: component.multiline, appendTemplate: component.suffix, prependTemplate: component.prefix, showClearButton: component.showClearButton, autocomplete: component.autocomplete === false ? 'off' : 'on', readOnly: component.readOnly || false, cssClass: `${textboxCssClass}${sizeCSSClass}`, htmlAttributes: textboxAttrs, ...createValidationHandlers((args) => args.value || '') }, `form-${component.type}-${component.multiline}-${component.suffix}-${component.prefix}-${component.showClearButton}-${component.mask}-${JSON.stringify(component.defaultValue)}`));
+        case 'textarea':
+            const textareaErrorClass = formState?.errors[component.id] ? 'e-error' : '';
+            const textareaCssClass = [component.cssClass || '', textareaErrorClass].filter(Boolean).join(' ') || undefined;
+            const textareaAttrs = formState?.values.htmlAttributes ? showAttributes(formState.values.htmlAttributes) : showAttributes(component.htmlAttributes);
+            return (_jsx(TextAreaComponent, { id: component.id, locale: locale, name: component.id, ...commonProps, value: value !== undefined ? value : (component.defaultValue || ''), floatLabelType: component.floatLabelType || 'Never', showClearButton: component.showClearButton || false, readOnly: component.readOnly || false, cols: component.cols || 200, rows: component.textareaRows || 4, maxLength: component?.maxLength || 255, cssClass: `${textareaCssClass}${sizeCSSClass}`, htmlAttributes: textareaAttrs, appendTemplate: component.suffix, prependTemplate: component.prefix, resizeMode: 'Vertical', ...createValidationHandlers((args) => args.value || '') }, `form-${component.type}-${component.multiline}-${component.showClearButton}-${component.mask}-${JSON.stringify(component.defaultValue)}`));
+        case 'number':
+            const numericErrorClass = formState?.errors[component.id] ? 'e-error' : '';
+            const numericCssClass = [component.cssClass || '', numericErrorClass].filter(Boolean).join(' ') || undefined;
+            const numericAttrs = formState?.values.htmlAttributes ? showAttributes(formState.values.htmlAttributes) : showAttributes(component.htmlAttributes);
+            value = value === "" ? undefined : value;
+            return (_jsx(NumericTextBoxComponent, { id: component.id, name: component.id, ...commonProps, locale: locale, 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, max: component?.maxValue, readOnly: component.readOnly || false, showClearButton: component.showClearButton || false, floatLabelType: component.floatLabelType || 'Never', cssClass: `${numericCssClass}${sizeCSSClass}`, htmlAttributes: numericAttrs, appendTemplate: component.suffix, prependTemplate: component.prefix, ...createValidationHandlers((args) => args.value || '') }, `form-${component.type}-${component.showClearButton}-${component.decimals}-${JSON.stringify(component.defaultValue)}`));
+        case 'checkbox':
+            const checkboxErrorClass = formState?.errors[component.id] ? 'e-error' : '';
+            const checkboxCssClass = [component.cssClass || '', checkboxErrorClass].filter(Boolean).join(' ') || undefined;
+            const checkboxAttrs = formState?.values.htmlAttributes ? showAttributes(formState.values.htmlAttributes) : showAttributes(component.htmlAttributes);
+            const componentLabel = component.label && component?.required ? `${component.label} *` : component.label;
+            return (_jsx(CheckBoxComponent, { id: component.id, name: component.id, label: componentLabel, locale: locale, labelPosition: component.checkboxLabelPosition || 'After', checked: (formState?.values[component.id] ?? component.checked ?? component.defaultValue), indeterminate: component.indeterminate || false, disabled: component.disabled, cssClass: `${checkboxCssClass}${sizeCSSClass}`, htmlAttributes: checkboxAttrs, title: component.tooltip, change: (args) => formState?.onChange(component.id, { value: args.checked }) }, `form-${component.type}-${component.showClearButton}-${JSON.stringify(component.defaultValue)}-${component.checkboxLabelPosition}`));
+        case 'checkboxGroup':
+            component.options = isDefaultOptions ? [l10n.getConstant('defaultOptionValue')] : component.options || ['Option 1'];
+            const checkboxGroupOptions = isDefaultOptions ? [l10n.getConstant('defaultOptionValue')] : resolvedOptions || ['Option 1'];
+            return (_jsx(CheckboxGroup, { component: { ...component, options: checkboxGroupOptions }, formState: formState }, `form-${component.type}-${component.id}-${component.checkboxLabelPosition}`));
+        case 'radio':
+            const radioErrorClass = formState?.errors[component.id] ? 'e-error' : '';
+            const radioCssClass = [component.cssClass || '', radioErrorClass].filter(Boolean).join(' ') || undefined;
+            const radioAttrs = formState?.values.htmlAttributes ? showAttributes(formState.values.htmlAttributes) : showAttributes(component.htmlAttributes);
+            component.options = isDefaultOptions ? [l10n.getConstant('defaultOptionValue')] : Array.isArray(component.options) ? component.options : ['Option 1'];
+            return (_jsx("div", { id: "radiogroup", className: radioCssClass, title: component.tooltip, children: component.options?.map((option, index) => (_jsx(RadioButtonComponent, { name: component.id, label: option, locale: locale, value: option, checked: component.defaultValue === option, disabled: component.disabled, cssClass: `${radioCssClass}${sizeCSSClass}`, htmlAttributes: radioAttrs, labelPosition: component.fieldLabelPosition, change: (args) => formState?.onChange(component.id, { value: args.value }) }, `${component.id}_${index}`))) }, component.id));
+        case 'dropdown':
+            const dropdownErrorClass = formState?.errors[component.id] ? 'e-error' : '';
+            const dropdownCssClass = [component.cssClass || '', dropdownErrorClass].filter(Boolean).join(' ') || undefined;
+            const dropdownAttrs = formState?.values.htmlAttributes ? showAttributes(formState.values.htmlAttributes) : showAttributes(component.htmlAttributes);
+            component.options = isDefaultOptions ? [l10n.getConstant('defaultOptionValue')] : component.options || ['Option 1'];
+            const dropdownOptions = isDefaultOptions ? [l10n.getConstant('defaultOptionValue')] : resolvedOptions || ['Option 1'];
+            return (_jsx(DropDownListComponent, { id: component.id, name: component.id, locale: locale, ...commonProps, cssClass: `${dropdownCssClass}${sizeCSSClass}`, dataSource: dropdownOptions, value: value !== undefined ? value : (component.defaultValue ?? null), floatLabelType: component.floatLabelType || 'Never', showClearButton: component.showClearButton || false, readonly: component.readOnly || false, enableVirtualization: component.enableVirtualization || false, popupHeight: component.popupHeight || '300px', popupWidth: component.popupWidth || '100%', htmlAttributes: dropdownAttrs, ...createValidationHandlers((args) => args.value || ''), children: _jsx(DRPInject, { services: [VirtualScroll] }) }, `form-${component.type}-${component.showClearButton}-${component.options}`));
+        case 'multiselect':
+            const multiSelectErrorClass = formState?.errors[component.id] ? 'e-error' : '';
+            const multiSelectCssClass = [component.cssClass || '', multiSelectErrorClass].filter(Boolean).join(' ') || undefined;
+            const multiSelectAttrs = formState?.values.htmlAttributes ? showAttributes(formState.values.htmlAttributes) : showAttributes(component.htmlAttributes);
+            component.options = isDefaultOptions ? [l10n.getConstant('defaultOptionValue')] : component.options || ['Option 1'];
+            const multiSelectOptions = isDefaultOptions ? [l10n.getConstant('defaultOptionValue')] : resolvedOptions || ['Option 1'];
+            return (_jsx(MultiSelectComponent, { id: component.id, locale: locale, name: component.id, value: value !== undefined ? value : (component.defaultValue ?? null), floatLabelType: component.floatLabelType || 'Never', placeholder: component.placeholder || '', enabled: !component.disabled, dataSource: multiSelectOptions, 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' : component.visualMode ? component.visualMode : undefined, selectAllText: component.selectAllText, unSelectAllText: component.unSelectAllText, showDropDownIcon: component.showDropDownIcon !== false, enableVirtualization: component.enableVirtualization || false, popupHeight: component.popupHeight || '300px', popupWidth: component.popupWidth || '100%', cssClass: `${multiSelectCssClass}${sizeCSSClass}`, htmlAttributes: multiSelectAttrs, ...createValidationHandlers((args) => args.value || ''), children: _jsx(DRPInject, { services: [CheckBoxSelection, VirtualScroll] }) }, `form-${component.type}-${component.showClearButton}-${component.id}-${JSON.stringify(component.defaultValue)}-${component.options}`));
+        case 'date':
+            const datePickerErrorClass = formState?.errors[component.id] ? 'e-error' : '';
+            const datePickerCssClass = [component.cssClass || '', datePickerErrorClass].filter(Boolean).join(' ') || undefined;
+            const datePickerAttrs = formState?.values.htmlAttributes ? showAttributes(formState.values.htmlAttributes) : showAttributes(component.htmlAttributes);
+            return (_jsx(DatePickerComponent, { ...commonProps, id: component.id, locale: locale, name: component.id, cssClass: `${datePickerCssClass}${sizeCSSClass}`, 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 === undefined ? false : component.showClearButton, 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, htmlAttributes: datePickerAttrs, ...createValidationHandlers((args) => args.value || ''), children: _jsx(Inject, { services: [Islamic] }) }, `form-${component.type}-${component.showClearButton}-${component.id}`));
+        case 'dateTime':
+            const dateTimePickerErrorClass = formState?.errors[component.id] ? 'e-error' : '';
+            const dateTimePickerCssClass = [component.cssClass || '', dateTimePickerErrorClass].filter(Boolean).join(' ') || undefined;
+            const dateTimePickerAttrs = formState?.values.htmlAttributes ? showAttributes(formState.values.htmlAttributes) : showAttributes(component.htmlAttributes);
+            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 === undefined ? false : component.showClearButton, showTodayButton: component.showTodayButton !== false ? true : false, depth: component.depth || 'Month', start: component.start || 'Month', step: component.step || 1, locale: locale, readonly: component.readOnly || false, cssClass: `${dateTimePickerCssClass}${sizeCSSClass}`, htmlAttributes: dateTimePickerAttrs, 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, ...createValidationHandlers((args) => args.value || ''), children: _jsx(Inject, { services: [Islamic] }) }, `form-${component.type}-${component.showClearButton}-${component.id}`));
+        case 'time':
+            const timePickerErrorClass = formState?.errors[component.id] ? 'e-error' : '';
+            const timePickerCssClass = [component.cssClass || '', timePickerErrorClass].filter(Boolean).join(' ') || undefined;
+            const timePickerAttrs = formState?.values.htmlAttributes ? showAttributes(formState.values.htmlAttributes) : showAttributes(component.htmlAttributes);
+            return (_jsx(TimePickerComponent, { id: component.id, name: component.id, floatLabelType: component.floatLabelType || 'Never', placeholder: component.placeholder || '', enabled: !component.disabled, locale: locale, value: value !== undefined ? value : (component.defaultValue ?? null), format: component.format || 'hh:mm a', showClearButton: component.showClearButton === undefined ? false : component.showClearButton, step: component.step || 30, readonly: component.readOnly || false, cssClass: `${timePickerCssClass}${sizeCSSClass}`, htmlAttributes: timePickerAttrs, min: component?.minTime ? new Date(`2000-01-01 ${component.minTime}`) : undefined, max: component?.maxTime ? new Date(`2000-01-01 ${component.maxTime}`) : undefined, enableMask: false, ...createValidationHandlers((args) => args.value || '') }, `form-${component.type}-${component.showClearButton}-${component.id}`));
+        case 'dateRange':
+            const dateRangeErrorClass = formState?.errors[component.id] ? 'e-error' : '';
+            const dateRangeCssClass = [component.cssClass || '', dateRangeErrorClass].filter(Boolean).join(' ') || undefined;
+            const dateRangeAttrs = formState?.values.htmlAttributes ? showAttributes(formState.values.htmlAttributes) : showAttributes(component.htmlAttributes);
+            return (_jsx(DateRangePickerComponent, { id: component.id, name: component.id, floatLabelType: component.floatLabelType || 'Never', dayHeaderFormat: component.dayHeaderFormat || 'Short', placeholder: component.placeholder || '', locale: locale, 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 === undefined ? false : component.showClearButton, readonly: component.readOnly || false, cssClass: `${dateRangeCssClass}${sizeCSSClass}`, htmlAttributes: dateRangeAttrs, ...createValidationHandlers((args) => args.value || '') }, `form-${component.type}-${component.showClearButton}-${component.id}`));
+        case 'switch':
+            const switchErrorClass = formState?.errors[component.id] ? 'e-error' : '';
+            const switchCssClass = [component.cssClass || '', switchErrorClass].filter(Boolean).join(' ') || undefined;
+            const switchAttrs = formState?.values.htmlAttributes ? showAttributes(formState.values.htmlAttributes) : showAttributes(component.htmlAttributes);
+            return (_jsx(SwitchComponent, { id: component.id, name: component.id, value: component.defaultValue, cssClass: `${switchCssClass}${sizeCSSClass}`, locale: locale, checked: component.checked, disabled: component.disabled, offLabel: component.offLabel || '', onLabel: component.onLabel || '', htmlAttributes: switchAttrs, change: (args) => formState?.onChange(component.id, { value: args.checked }) }, `form-${component.type}-${component.showClearButton}-${JSON.stringify(component.defaultValue)}`));
+        case 'button':
+            // If buttonsGroups is provided, render a button group in-place of a single button
+            const groupButtons = (component.buttonsGroups || component.buttons || []);
+            if (groupButtons && groupButtons.length > 0) {
+                const styleObj = {
+                    display: 'flex',
+                    flexWrap: 'wrap',
+                    alignItems: 'center',
+                    gap: component.gap || '8px',
+                    justifyContent: mapPositionToJustifyContent(component.position),
+                    width: component.width || undefined
+                };
+                return (_jsx("div", { id: component.id, role: "group", "aria-label": 'Button Group', className: component.cssClass, style: styleObj, children: groupButtons.map((btn, idx) => {
+                        const btnId = `${component.id}_${idx}`;
+                        const btnCssClass = [
+                            mapButtonStyleToClass(btn.style)
+                        ].filter(Boolean).join(' ');
+                        return (_jsx(ButtonComponent, { id: String(btnId), locale: locale, name: String(btnId), type: resolveButtonType(btn.type), cssClass: `${btnCssClass}${sizeCSSClass}`, disabled: btn.disabled || false, content: btn.label || `Button ${idx + 1}`, iconCss: btn.iconCss, iconPosition: btn.iconPosition }, String(btnId)));
+                    }) }, `form-${component.type}-${component.id}`));
+            }
+            // Fallback: render a single ButtonComponent when no group is configured
+            const buttonErrorClass = formState?.errors[component.id] ? 'e-error' : '';
+            const buttonCssClass = [
+                mapButtonStyleToClass(component.style),
+                component.buttonType === 'submit' ? 'submit-btn' : '',
+                component.cssClass || '',
+                buttonErrorClass
+            ].filter(Boolean).join(' ') || 'e-primary';
+            const buttonContainerStyle = {
+                display: 'flex',
+                justifyContent: mapPositionToJustifyContent(component.position)
+            };
+            return (_jsx("div", { id: `${component.id}-container`, "aria-label": 'Button', style: buttonContainerStyle, children: _jsx(ButtonComponent, { id: component.id, name: component.id, content: component.label, cssClass: `${buttonCssClass}${sizeCSSClass}`, locale: locale, disabled: component.disabled || false, iconCss: component.iconCss, iconPosition: component.iconPosition, type: resolveButtonType(component.buttonType) }) }, `form-${component.type}-${component.id}`));
+        case 'splitButton':
+            const splitButtonErrorClass = formState?.errors[component.id] ? 'e-error' : '';
+            const splitButtonCssClassList = [
+                component.style === 'primary' ? 'e-primary' : '',
+                component.style === 'flat' ? '' : '',
+                component.style === 'information' ? 'e-info' : '',
+                component.style === 'error' ? 'e-danger' : '',
+                component.style === 'success' ? 'e-success' : '',
+                component.style === 'warning' ? 'e-warning' : '',
+                component.cssClass || '',
+                splitButtonErrorClass
+            ].filter(Boolean).join(' ') || undefined;
+            const splitButtonContainerStyle = {
+                display: 'flex',
+                justifyContent: mapPositionToJustifyContent(component.position)
+            };
+            component.options = isDefaultOptions ? [l10n.getConstant('defaultOptionValue')] : component.options || ['Option 1'];
+            return (_jsx("div", { id: `${component.id}-container`, "aria-label": 'Splitbutton', style: splitButtonContainerStyle, children: _jsx(SplitButtonComponent, { id: component.id, name: 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}${sizeCSSClass}`, disabled: component.disabled || false, iconCss: component.iconCss, iconPosition: component.iconPosition || 'Left' }, component.id) }, `form-${component.type}-${component.id}`));
+        case 'signature':
+            return (_jsx(SignatureComponent, { id: component.id, locale: locale, name: component.id, className: `${component.cssClass}${sizeCSSClass}`, backgroundColor: component.backgroundColor || '', strokeColor: component.strokeColor || '', maxStrokeWidth: component?.maxValue, minStrokeWidth: component?.minValue, velocity: component.velocity, disabled: component.disabled }, `form-${component.type}-${component.showRatingLabel}`));
+        case 'rating':
+            return (_jsx(RatingComponent, { id: component.id, locale: locale, name: component.id, value: value !== undefined ? value : (component.defaultValue || 0), disabled: component.disabled, cssClass: `${component.cssClass}${sizeCSSClass}`, 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 }, `form-${component.type}-${component.showRatingLabel}-${component.showRatingTooltip}-${component.allowReset}`));
+        case 'imageEditor':
+            return (_jsx(ImageEditorComponent, { locale: locale, id: component.id, name: component.id, disabled: component.disabled, cssClass: `${component.cssClass}${sizeCSSClass}`, height: (component.height || '350px').toString(), width: (component.width || '100%').toString() }, `form-${component.type}`));
+        case 'fileUpload':
+            const uploaderAttrs = formState?.values.htmlAttributes ? showAttributes(formState.values.htmlAttributes) : showAttributes(component.htmlAttributes);
+            return (_jsx(UploaderComponent, { id: component.id, name: component.id, type: 'file', locale: locale, cssClass: `${component.cssClass}${sizeCSSClass}`, 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: uploaderAttrs }));
+        case 'rangeSlider':
+            return (_jsx(SliderComponent, { id: component.id, locale: locale, name: component.id, cssClass: `${component.cssClass}${sizeCSSClass}`, min: component.minValue || 0, max: component.maxValue || 100, readonly: component.readOnly, showButtons: component.showButtons, step: component.step || 1, value: value !== undefined ? value : (component.defaultValue ?? 0), enabled: !component.disabled }, `form-${component.type}-${component.showButtons}`));
+        case 'colorPicker':
+            return (_jsx(ColorPickerComponent, { cssClass: `${component.cssClass}${sizeCSSClass}`, id: component.id, locale: locale, name: component.id, enableOpacity: component.enableOpacity, showButtons: component.showButtons, showRecentColors: component.showRecentColors, noColor: component.showNoColor, value: value !== undefined ? value : (component.defaultValue || ''), disabled: component.disabled }, `form-${component.type}-${component.showButtons}-${component.showRecentColors}-${component.showNoColor}`));
+        case 'inputMask':
+            const maskedTextBoxErrorClass = formState?.errors[component.id] ? 'e-error' : '';
+            const maskedTextBoxCssClass = [component.cssClass || '', maskedTextBoxErrorClass].filter(Boolean).join(' ') || undefined;
+            const maskedTextBoxAttrs = formState?.values.htmlAttributes ? showAttributes(formState.values.htmlAttributes) : showAttributes(component.htmlAttributes);
+            return (_jsx(MaskedTextBoxComponent, { id: component.id, name: component.id, 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, cssClass: `${maskedTextBoxCssClass}${sizeCSSClass}`, htmlAttributes: maskedTextBoxAttrs, appendTemplate: component.suffix, prependTemplate: component.prefix, ...createValidationHandlers((args) => args.value || '') }, `form-${component.type}-${component.showClearButton}-${component.id}`));
+        case 'message':
+            return (_jsx(MessageComponent, { id: component.id, locale: locale, name: component.id, severity: component.severity || 'info', content: l10n.getConstant(component.content || component.label) || component.content || l10n.getConstant('message'), disabled: component.disabled, cssClass: `${component.cssClass}${sizeCSSClass}`, showCloseIcon: component.showCloseIcon, showIcon: (component.showIcon === undefined ? false : component.showIcon) || false, variant: component.variant }, `form-${component.type}-${component.showCloseIcon}-${component.showIcon}`));
+        case 'dataGrid':
+            // Ensure gridRefs map exists and has a ref for this component
+            if (gridRefs && !gridRefs[component.id]) {
+                gridRefs[component.id] = React.createRef();
+            }
+            return (_jsx(DataGridComponent, { ref: gridRefs?.[component.id] || undefined, locale: locale, cssClass: `${component.cssClass}${sizeCSSClass}`, ...component, dataSource: resolvedDataSource }, `form-${component.type}-${component.id}-${resolvedDataSource}`));
+        case 'lookup': {
+            const lookupComponent = component;
+            if (!lookupComponent.lookUpConfig?.formName || !lookupComponent.lookUpConfig?.field) {
+                return (_jsxs("div", { className: "e-input-group", children: [_jsx("input", { className: "e-input", type: "text", disabled: true }), _jsx("span", { className: "e-input-group-icon e-icons e-chevron-down" })] }));
+            }
+            const lookupErrorClass = formState?.errors[component.id] ? 'e-error' : '';
+            const lookupCssClass = [component.cssClass || '', lookupErrorClass].filter(Boolean).join(' ') || undefined;
+            const displayFormat = lookupComponent.lookUpConfig?.displayFormat || 'Dropdown';
+            // Radio Button Group - for Single selection
+            if (displayFormat === 'Radio') {
+                component.options = Array.isArray(lookupOptions) ? lookupOptions : ['Option 1'];
+                return (_jsx("div", { id: "radiogroup", className: lookupCssClass, title: component.tooltip, children: component.options?.map((option, index) => (_jsx(RadioButtonComponent, { name: component.id, label: option, locale: locale, value: option, checked: component.defaultValue === option, disabled: component.disabled, cssClass: `${lookupCssClass}${sizeCSSClass}`, htmlAttributes: component.htmlAttributes, change: (args) => formState?.onChange(component.id, { value: args.value }) }, `${component.id}_${index}`))) }, `form-${component.type}-${component.id}`));
+            }
+            // CheckboxGroup - for Multiple selection
+            if (displayFormat === 'Checkbox' || displayFormat === 'CheckboxGroup') {
+                component.options = Array.isArray(lookupOptions) ? lookupOptions : ['Option 1'];
+                return (_jsx(CheckboxGroup, { component: {
+                        ...component,
+                        options: component.options,
+                        id: component.id,
+                        disabled: component.disabled,
+                        cssClass: lookupCssClass
+                    }, formState: formState }, `form-${component.type}-${component.id}-${lookupOptions}`));
+            }
+            if (displayFormat === 'MultiSelect') {
+                value = [];
+                return (_jsx(MultiSelectComponent, { id: component.id, name: component.id, locale: locale, ...commonProps, cssClass: `${lookupCssClass}${sizeCSSClass}`, dataSource: lookupOptions, value: value !== undefined ? value : (component.defaultValue ?? null), floatLabelType: component.floatLabelType || 'Never', showDropDownIcon: true, showClearButton: component.showClearButton || false, readonly: component.readOnly || false, popupHeight: component.popupHeight || '300px', popupWidth: component.popupWidth || '100%', htmlAttributes: component.htmlAttributes, ...createValidationHandlers((args) => args.value || '') }, `form-${component.type}-${component.id}-lookup-${lookupComponent.lookUpConfig.field}`));
+            }
+            // Default: Dropdown - for Single selection
+            return (_jsx(DropDownListComponent, { id: component.id, name: component.id, locale: locale, ...commonProps, cssClass: `${lookupCssClass}${sizeCSSClass}`, dataSource: lookupOptions, value: value !== undefined ? value : (component.defaultValue ?? null), floatLabelType: component.floatLabelType || 'Never', showClearButton: component.showClearButton || false, readonly: component.readOnly || false, popupHeight: component.popupHeight || '300px', popupWidth: component.popupWidth || '100%', htmlAttributes: component.htmlAttributes, ...createValidationHandlers((args) => args.value || '') }, `form-${component.type}-${component.id}-lookup-${lookupComponent.lookUpConfig.field}`));
+        }
+        case 'richTextEditor':
+            const richTextErrorClass = formState?.errors[component.id] ? 'e-error' : '';
+            const richTextCssClass = [component.cssClass || '', richTextErrorClass].filter(Boolean).join(' ') || undefined;
+            const richTextAttrs = formState?.values.htmlAttributes ? showAttributes(formState.values.htmlAttributes) : showAttributes(component.htmlAttributes);
+            const toolbarSettings = {
+                items: ['Undo', 'Redo', '|', 'Bold', 'Italic', 'Underline', 'StrikeThrough', 'InlineCode', '|', 'CreateLink', 'Image', 'CreateTable', 'CodeBlock',
+                    'HorizontalLine', 'Blockquote', 'EmojiPicker', '|', 'LineHeight', 'Formats', 'Alignments', '|', 'BulletFormatList', 'NumberFormatList', 'Checklist', '|', 'Outdent', 'Indent', '|',
+                    'FontColor', 'BackgroundColor', 'FontName', 'FontSize', '|', 'LowerCase', 'UpperCase', 'SuperScript', 'SubScript', '|', 'SourceCode', '|']
+            };
+            if (component?.enableImportFromWord?.enabled) {
+                toolbarSettings.items.push('ImportWord');
+            }
+            if (component?.enableExportToWord?.enabled) {
+                toolbarSettings.items.push('ExportWord');
+            }
+            if (component?.enableExportToPdf?.enabled) {
+                toolbarSettings.items.push('ExportPdf');
+            }
+            toolbarSettings.items.push('Print');
+            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: `${richTextCssClass}${sizeCSSClass}`, height: component.height || '300px', width: component.width || '100%', htmlAttributes: richTextAttrs, ...createValidationHandlers((args) => args.value || ''), children: _jsx(RTEInject, { services: [Toolbar, Link, HtmlEditor, QuickToolbar, RTEImage, Count, Table, EmojiPicker, PasteCleanup, SlashMenu, CodeBlock, ClipBoardCleanup, AutoFormat] }) }, `form-${component.type}-${component.id}-${component.width}`));
+        case 'autoNumber':
+            // Calculate formatted auto number value
+            const getAutoNumberValue = () => {
+                const currentIndex = formState?.values[component.id] || component.startIndex || 0;
+                const formatted = `${component.prefix || ''}${currentIndex}${component.suffix || ''}`;
+                return formatted;
+            };
+            return (_jsx(TextBoxComponent, { id: component.id, name: component.id, locale: locale, type: "text", ...commonProps, value: getAutoNumberValue(), floatLabelType: "Never", readOnly: true, disabled: true, cssClass: `${sizeCSSClass}` }, `form-${component.type}-${component.startIndex}-${component.prefix}-${component.suffix}`));
+        default:
+            return (_jsx("div", { className: "unsupported-component", children: _jsxs("p", { children: ["Unsupported component type: ", component.type] }) }, component.id));
+    }
+};

package/styles/tailwind3.css

@@ -0,0 +1,67 @@
+/* Syncfusion Essential JS 2 - Default Theme (Tailwind 3) */
+/* This provides a fallback theme. The ThemeContext will override this dynamically. */
+
+/* Base Components */
+@import "./themes/index.css";
+@import '@syncfusion/ej2-base/styles/tailwind3.css';
+
+/* Form Components */
+@import '@syncfusion/ej2-buttons/styles/tailwind3.css';
+@import '@syncfusion/ej2-inputs/styles/tailwind3.css';
+
+/* Dropdown & Selection Components */
+@import '@syncfusion/ej2-dropdowns/styles/tailwind3.css';
+
+/* Calendar & Date/Time Components */
+@import '@syncfusion/ej2-calendars/styles/tailwind3.css';
+@import '@syncfusion/ej2-react-calendars/styles/tailwind3.css';
+
+/* Layout & Container Components */
+@import '@syncfusion/ej2-navigations/styles/tailwind3.css';
+@import '@syncfusion/ej2-notifications/styles/tailwind3.css';
+
+/* Supporting Components */
+@import '@syncfusion/ej2-popups/styles/tailwind3.css';
+@import '@syncfusion/ej2-lists/styles/tailwind3.css';
+@import '@syncfusion/ej2-splitbuttons/styles/tailwind3.css';
+@import "@syncfusion/ej2-react-popups/styles/tailwind3.css";
+@import "@syncfusion/ej2-react-grids/styles/tailwind3.css";
+@import "@syncfusion/ej2-react-inplace-editor/styles/tailwind3.css";
+@import "@syncfusion/ej2-splitbuttons/styles/tailwind3.css";
+@import "@syncfusion/ej2-image-editor/styles/tailwind3.css";
+@import "@syncfusion/ej2-layouts/styles/tailwind3.css";
+@import '@syncfusion/ej2-richtexteditor/styles/tailwind3.css';
+@import "@syncfusion/ej2-querybuilder/styles/tailwind3.css";
+
+
+.e-menu-icon.e-icons.e-repeat {
+    margin-top: -3px !important;
+}
+
+.e-menu-item:has(.e-menu-icon.e-icons.e-repeat) {
+    padding-left: 0;
+    height: 28px !important;
+}
+
+.e-menu-item.e-focused:has(.e-menu-icon.e-icons.e-repeat) {
+    background: var(--color-sf-secondary-bg-color-hover);
+    border-color: var(--color-sf-secondary-border-color-hover);
+}
+
+.e-menu-item:has(.e-menu-icon.e-icons.e-repeat) .e-icons.e-caret {
+    display: none;
+}
+
+.e-menu-item:has(.e-menu-icon.e-icons.e-repeat) .e-icons.e-repeat {
+    font-size: 14px;
+    margin-left: 7px;
+}
+
+.e-menu-wrapper ul {
+    width: 28px;
+    height: 100%;
+}
+
+.e-menu-parent.e-ul {
+    min-width: 130px;
+}

package/styles/themes/action-buttons.css

@@ -0,0 +1,110 @@
+/* Form Field Wrapper - Container for fields with action buttons */
+.form-field-wrapper {
+  position: relative;
+  transition: box-shadow 0.15s ease;
+  z-index: 1; /* Base layer for form fields per FR-026 */
+}
+
+/* Prevent nested wrappers from showing parent buttons */
+.form-field-wrapper .form-field-wrapper {
+  z-index: 2; /* Nested wrappers appear above parent */
+}
+
+/* Action Button Wrapper */
+.action-button-wrapper {
+  position: absolute;
+  top: -2.9rem;
+  right: 0.5rem;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  visibility: hidden;  
+  pointer-events: none;
+  transition: opacity 0.15s ease;
+  z-index: 1000; /* Buttons layer above fields per FR-026 */
+}
+
+.draggable-fields-container > .form-field-wrapper:first-child > .action-button-wrapper {
+  top: -1.5rem;
+}
+.panel-children > .form-field-wrapper:first-child > .action-button-wrapper {
+  top: -1.5rem;
+}
+.nested-components > .form-field-wrapper:first-child > .action-button-wrapper {
+  top: -1.5rem;
+}
+.tab-children > .form-field-wrapper:first-child > .action-button-wrapper {
+  top: -1.5rem;
+}
+
+/* Action Buttons Container */
+.action-buttons {
+  display: flex;
+  gap: 0.25rem;
+  opacity: 1;
+  pointer-events: auto;
+  background: var(--color-sf-content-bg-color-alt1);
+  padding: 0.25rem;
+  border-radius: 4px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+/* Button Visibility - Show on hover or focus (only direct child, not nested) */
+.form-preview-area:not(.dragging-over):not(.is-reordering):not(.is-nesteditemreordering):not(:has(.dragging-over)) .form-field-wrapper:hover > .action-button-wrapper {
+  visibility: visible;
+  pointer-events: auto;
+}
+
+.small-screen .form-preview-area:not(.dragging-over):not(.is-reordering):not(.is-nesteditemreordering):not(:has(.dragging-over)) .form-field-wrapper.is-active > .action-button-wrapper {
+  visibility: visible;;
+  pointer-events: auto;
+}
+
+/* Hide parent action buttons when hovering over nested children */
+.form-preview-area:not(.dragging-over):not(.is-reordering):not(.is-nesteditemreordering):not(:has(.dragging-over)) .form-field-wrapper:has(.form-field-wrapper:hover) > .action-button-wrapper {
+  visibility: hidden;
+  pointer-events: none;
+}
+
+.form-field-wrapper.is-active .change-component {
+  display: block !important;
+}
+
+/* Individual Action Button Sizing */
+.action-btn {
+  min-width: 28px !important;
+  height: 28px !important;
+  padding: 4px !important;
+}
+
+.mode-button {
+  height: 28px;
+  padding-top: 4px !important;
+  padding-bottom: 4px !important;
+}
+
+.action-btn .e-icons {
+  font-size: 16px;
+}
+
+/* Visual Feedback for Pasted Fields */
+@keyframes field-inserted {
+  0% {
+    border: 2px solid var(--primary-color, #007bff);
+    background-color: var(--primary-color-light, rgba(0, 123, 255, 0.1));
+  }
+  100% {
+    border: 1px solid transparent;
+    background-color: transparent;
+  }
+}
+
+.field-inserted {
+  animation: field-inserted 2s ease-out forwards;
+}
+
+/* Dark Theme Adjustments */
+[data-theme="dark"] .action-buttons {
+  background: var(--surface-color, #2d2d2d);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+}