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

package/src/utils/renderComponent.js

@@ -1,300 +0,0 @@
-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

@@ -1,67 +0,0 @@
-/* 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

@@ -1,110 +0,0 @@
-/* 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);
-}