@syncfusion/ej2-react-form-renderer 0.1.1-beta → 34.2.2

package/src/renderFormField.d.ts

@@ -1,20 +0,0 @@
-/**
- * Standalone Form Field Renderer
- * Renders individual form components based on FormComponent schema
- */
-import React from 'react';
-import { type FormComponent } from './types/FormSchema';
-export interface RenderFormFieldProps {
-    component: FormComponent;
-    value?: any;
-    onChange: (value: any) => void;
-    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, locale }: RenderFormFieldProps) => React.ReactNode;

package/src/renderFormField.js

@@ -1,203 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { TextBoxComponent, NumericTextBoxComponent, MaskedTextBoxComponent, UploaderComponent, TextAreaComponent } from '@syncfusion/ej2-react-inputs';
-import { CheckBoxComponent, RadioButtonComponent, SwitchComponent, ButtonComponent, } from '@syncfusion/ej2-react-buttons';
-import { SplitButtonComponent } from '@syncfusion/ej2-react-splitbuttons';
-import { CheckBoxSelection, DropDownListComponent, MultiSelectComponent, } from '@syncfusion/ej2-react-dropdowns';
-import { DatePickerComponent, DateTimePickerComponent, TimePickerComponent, DateRangePickerComponent, Inject, Islamic, } from '@syncfusion/ej2-react-calendars';
-import { SliderComponent } from '@syncfusion/ej2-react-inputs';
-import { ColorPickerComponent } from '@syncfusion/ej2-react-inputs';
-import { RatingComponent } from '@syncfusion/ej2-react-inputs';
-import { SignatureComponent } from '@syncfusion/ej2-react-inputs';
-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 CheckboxGroup from './CheckboxGroup';
-/**
- * Converts htmlAttributes from array format to object format
- */
-const normalizeAttributes = (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;
-};
-/**
- * Renders a single form field component
- */
-export const renderFormField = ({ component, value, onChange, onBlur, ref, hasError = false, onClick, locale }) => {
-    const commonProps = {
-        floatLabelType: (component.floatLabelType || 'Never'),
-        placeholder: component.placeholder || '',
-        enabled: !component.disabled,
-    };
-    const createValidationHandlers = (getValue) => {
-        const validateOn = component.validateOn || 'Change';
-        const handlers = {};
-        // If validateOn is 'Change' or undefined, add change and blur handlers
-        if (!validateOn || validateOn === 'Change') {
-            handlers.onChange = (args) => onChange(getValue(args));
-            handlers.onBlur = () => onBlur?.();
-        }
-        // If validateOn is 'Blur', add change and blur handlers
-        if (validateOn === 'Blur') {
-            handlers.change = (args) => onChange(getValue(args));
-            handlers.blur = () => onBlur?.();
-        }
-        return handlers;
-    };
-    const htmlAttrs = normalizeAttributes(component.htmlAttributes);
-    const errorClass = hasError ? 'e-error' : '';
-    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, 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, 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, locale: locale, ...commonProps, value: value !== undefined ? 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));
-        case 'checkbox':
-            const checkboxLabel = component.label && component.required
-                ? `${component.label} *`
-                : component.label;
-            return (_jsx(CheckBoxComponent, { id: component.id, locale: locale, 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));
-        case 'radio':
-            return (_jsx("div", { id: `${component.id}-group`, className: `e-radio-group ${errorClass}`, children: (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, locale: locale, disabled: component.disabled, value: optionValue, htmlAttributes: htmlAttrs, labelPosition: component.fieldLabelPosition, checked: component.defaultValue === 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, locale: locale, 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));
-        case 'multiselect':
-            return (_jsx(MultiSelectComponent, { id: component.id, name: component.id, locale: locale, ...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 '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));
-        case 'dateTime':
-            return (_jsx(DateTimePickerComponent, { ...commonProps, id: component.id, 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] }) }, component.id));
-        case 'time':
-            return (_jsx(TimePickerComponent, { id: component.id, 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, locale: locale, value: component.defaultValue, name: component.id, checked: component.defaultValue ?? (component.checked ?? 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 || []);
-            if (groupButtons && groupButtons.length > 0) {
-                const groupStyleObj = {
-                    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": 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), 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);
-                                }
-                            }, ref: (el) => {
-                                if (ref && typeof ref === 'function') {
-                                    ref(el, idx);
-                                }
-                            } }, String(btnId)));
-                    }) }, `form-${component.type}-${component.id}`));
-            }
-            // Fallback: render a single ButtonComponent when no group is configured
-            const resolvedButtonType = resolveButtonType(component.buttonType);
-            const buttonCssClassList = [
-                mapButtonStyleToClass(component.style),
-                resolvedButtonType === 'submit' ? 'submit-btn form-submit-type' : '',
-                resolvedButtonType === 'reset' ? 'form-reset-type' : '',
-                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, 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':
-            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 || ''
-            ].filter(Boolean).join(' ') || undefined;
-            const splitButtonContainerStyle = {
-                display: 'flex',
-                justifyContent: mapPositionToJustifyContent(component.position)
-            };
-            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) => {
-                        if (onClick) {
-                            onClick({ ...event, buttonId: component.id, buttonLabel: component.label });
-                        }
-                    }, select: (event) => {
-                        if (onClick) {
-                            onClick({ ...event, selectedItem: event.item?.properties?.text, buttonId: component.id, buttonLabel: component.label });
-                        }
-                    }, ref: ref }, component.id) }, `form-${component.type}-${component.id}`));
-        case 'signature':
-            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, 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, 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, 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', locale: locale, label: dg.label || '', name: dg.name || '', 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), 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, 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

@@ -1,205 +0,0 @@
-/**
- * Form Schema Type Definitions
- * Copied from builder for standalone renderer
- */
-import type { visualMode } from "@syncfusion/ej2-react-dropdowns";
-export interface ButtonClickEventArgs {
-    buttonId: string;
-    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 FormComponentConditions {
-    visibleWhen?: ConditionType;
-    hideWhen?: ConditionType;
-    readOnlyWhen?: ConditionType;
-    disabledWhen?: ConditionType;
-    requiredWhen?: ConditionType;
-    setValueWhen?: {
-        condition: ConditionType;
-        value: any;
-    };
-}
-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' | '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;
-    visible?: boolean;
-    tooltip?: string;
-    hideBorders?: boolean;
-    hideLabel?: boolean;
-    cssClass?: string;
-    multiline?: boolean;
-    showClearButton?: boolean;
-    showCloseIcon?: boolean;
-    showIcon?: boolean;
-    variant?: string;
-    severity?: string;
-    content?: string;
-    showTodayButton?: boolean;
-    htmlAttributes?: Record<string, any>;
-    labelPosition?: 'Top' | 'Bottom' | 'Left' | 'Right';
-    position?: 'center' | 'left' | 'right';
-    fieldLabelPosition?: 'After' | 'Before';
-    labelWidth?: string;
-    floatLabelType?: 'Never' | 'Always' | 'Auto';
-    readOnly?: boolean;
-    autocomplete?: boolean;
-    cols?: number;
-    textareaRows?: number;
-    checked?: boolean;
-    indeterminate?: boolean;
-    offLabel?: string;
-    onLabel?: string;
-    buttonType?: 'button' | 'submit' | 'reset';
-    iconCss?: string;
-    iconPosition?: 'Left' | 'Right';
-    style?: string;
-    buttonsGroups?: ButtonDefinition[];
-    gap?: string;
-    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
-    decimals?: number;
-    currency?: string;
-    format?: string;
-    numberFormat?: string;
-    allowReset?: boolean;
-    itemsCount?: number;
-    precision?: number | string;
-    showRatingTooltip?: boolean;
-    showRatingLabel?: boolean;
-    ratingLabelPosition?: 'Top' | 'Bottom' | 'Left' | 'Right';
-    height?: number | null;
-    width?: number | null;
-    backgroundColor?: string;
-    strokeColor?: string;
-    maximumStrokeWidth?: number;
-    minimumStrokeWidth?: number;
-    velocity?: number;
-    enableOpacity?: boolean;
-    showNoColor?: boolean;
-    showButtons?: boolean;
-    showRecentColors?: boolean;
-    orientation?: 'Horizontal' | 'Vertical';
-    allowExtensions?: string;
-    saveUrl?: string;
-    removeUrl?: string;
-    buttons?: {};
-    allowMultiple?: boolean;
-    showFileList?: boolean;
-    calendarMode?: string;
-    dayHeaderFormat?: string;
-    depth?: string;
-    firstDayOfWeek?: number;
-    start?: string;
-    allowEdit?: boolean;
-    enabled?: boolean;
-    timeFormat?: string;
-    step?: number;
-    startDate?: string;
-    endDate?: string;
-    separator?: string;
-    mask?: string;
-    customCharacters?: Record<string, string>;
-    promptChar?: string;
-    allowCustomValue?: boolean;
-    addTagOnBlur?: boolean;
-    delimiterChar?: string;
-    visualMode?: visualMode;
-    showSelectAll?: boolean;
-    selectAllText?: string;
-    unSelectAllText?: string;
-    showDropDownIcon?: boolean;
-    validateOn?: 'Change' | 'Blur';
-    pageSize?: number;
-    size?: string;
-    allowPaging?: boolean;
-    allowAdding?: boolean;
-    allowEditing?: boolean;
-    allowDeleting?: boolean;
-    required?: boolean;
-    minLength?: number | null;
-    maxLength?: number | null;
-    min?: number | null;
-    minimum?: number | null;
-    max?: number | null;
-    minDate?: string;
-    maxDate?: string;
-    minValue?: number | null;
-    maxValue?: number | null;
-    minTime?: string;
-    maxTime?: string;
-    regex?: string;
-    validationMessage?: string;
-    options?: string[];
-    checkboxLabelPosition?: 'Before' | 'After';
-    layoutDirection?: 'row' | 'column';
-    enableHtmlSanitizer?: boolean;
-    fields?: Record<string, any>;
-    enableVirtualization?: boolean;
-    popupHeight?: string;
-    popupWidth?: string;
-    children?: FormComponent[];
-    rows?: number;
-    columns?: number;
-    messageType?: 'info' | 'success' | 'warning' | 'error';
-    messageContent?: string;
-    legend?: string;
-    cardTitle?: string;
-    cardSubtitle?: string;
-    columnWidths?: {
-        columns: number;
-        widths: number[];
-    };
-    tabItems?: Array<{
-        header: string;
-        content?: FormComponent[];
-    }>;
-    tableCells?: FormComponent[][][];
-    parentPath?: string;
-    properties?: Record<string, any>;
-    conditions?: FormComponentConditions;
-    _configured?: boolean;
-}
-export interface ValidationRules {
-    [fieldName: string]: {
-        required?: [boolean, string];
-        minLength?: [number, string];
-        maxLength?: [number, string];
-        min?: [number, string];
-        max?: [number, string];
-        regex?: [string, string];
-        date?: [string, string];
-        [key: string]: any;
-    };
-}
-export interface ButtonDefinition {
-    label: string;
-    type?: 'submit' | 'reset' | 'button';
-    style?: 'primary' | 'flat' | 'information' | 'error' | 'success' | 'warning';
-    iconCss?: string;
-    iconPosition?: 'Left' | 'Right';
-    disabled?: boolean;
-}

package/src/types/FormSchema.js

@@ -1 +0,0 @@
-export {};

package/src/utils.js

@@ -1,146 +0,0 @@
-import { Internationalization } from '@syncfusion/ej2-base';
-/**
- * Maps button style to Syncfusion CSS classes
- * @param style - Button style ('primary' | 'flat' | 'information' | 'error' | 'success' | 'warning')
- * @returns Space-separated CSS class string
- */
-export const mapButtonStyleToClass = (style) => {
-    const styleMap = {
-        'primary': 'e-primary',
-        'flat': 'e-flat',
-        'information': 'e-info',
-        'error': 'e-danger',
-        'success': 'e-success',
-        'warning': 'e-warning'
-    };
-    return styleMap[style || 'primary'] || 'e-primary';
-};
-/**
- * Resolves button type to valid HTML button type
- * @param type - Button type ('submit' | 'reset' | 'button')
- * @returns Resolved button type
- */
-export const resolveButtonType = (type) => {
-    return (type === 'submit' || type === 'reset') ? type : 'button';
-};
-/**
- * Maps button position to CSS justifyContent value
- * @param position - Button position ('Left' | 'Right' | 'Center')
- * @returns CSS justifyContent value
- */
-export const mapPositionToJustifyContent = (position) => {
-    const positionMap = {
-        'Left': 'flex-start',
-        'Right': 'flex-end',
-        'Center': 'center'
-    };
-    return positionMap[position || 'Left'] || 'flex-start';
-};
-export function splitWidths(input) {
-    const result = input.map(v => (v === null ? NaN : Number(v)));
-    const sumKnown = result.reduce((s, v) => s + (isNaN(v) ? 0 : v), 0);
-    // If knowns already >= 100, unknowns become 0
-    const remainingInt = Math.max(0, Math.round(100 - sumKnown));
-    const unknownIndexes = result.map((v, i) => (isNaN(v) ? i : -1)).filter(i => i >= 0);
-    const k = unknownIndexes.length;
-    if (k === 0) {
-        // nothing to split; just clamp/round knowns so they sum to 100 if you prefer, but return as-is
-        return result.map(v => Math.round(v));
-    }
-    // Distribute integer percentage points to avoid fractional rounding problems
-    const base = Math.floor(remainingInt / k);
-    let remainder = remainingInt - base * k;
-    // Fill unknowns with base + 1 for first `remainder` items
-    unknownIndexes.forEach((idx) => {
-        const add = remainder > 0 ? base + 1 : base;
-        result[idx] = add;
-        remainder = Math.max(0, remainder - 1);
-    });
-    // Convert any NaN (shouldn't remain) to 0 and round knowns
-    return result.map(v => (isNaN(v) ? 0 : Math.round(v)));
-}
-export function extractAllDescendantIds(component) {
-    const childIds = [];
-    function traverse(comps) {
-        for (const comp of comps) {
-            childIds.push(comp.id);
-            // Recursively traverse nested structures
-            if (comp.children && Array.isArray(comp.children)) {
-                traverse(comp.children);
-            }
-            // Handle table cells
-            if (comp.tableCells && Array.isArray(comp.tableCells)) {
-                comp.tableCells.forEach((row) => {
-                    if (Array.isArray(row)) {
-                        row.forEach((cell) => {
-                            if (Array.isArray(cell)) {
-                                traverse(cell);
-                            }
-                        });
-                    }
-                });
-            }
-            // Handle tab items
-            if (comp.tabItems && Array.isArray(comp.tabItems)) {
-                comp.tabItems.forEach((tabItem) => {
-                    if (tabItem.content && Array.isArray(tabItem.content)) {
-                        traverse(tabItem.content);
-                    }
-                });
-            }
-        }
-    }
-    // Start with direct children
-    if (component.children && Array.isArray(component.children)) {
-        traverse(component.children);
-    }
-    // Handle table cells
-    if (component.tableCells && Array.isArray(component.tableCells)) {
-        component.tableCells.forEach((row) => {
-            if (Array.isArray(row)) {
-                row.forEach((cell) => {
-                    if (Array.isArray(cell)) {
-                        traverse(cell);
-                    }
-                });
-            }
-        });
-    }
-    // Handle tab items
-    if (component.tabItems && Array.isArray(component.tabItems)) {
-        component.tabItems.forEach((tabItem) => {
-            if (tabItem.content && Array.isArray(tabItem.content)) {
-                traverse(tabItem.content);
-            }
-        });
-    }
-    return childIds;
-}
-export function formatDateValues(component, value) {
-    let intl = new Internationalization();
-    let dFormatter = intl.getDateFormat({
-        format: 'MM/dd/yyyy',
-        type: 'date'
-    });
-    if (component.type === 'date') {
-        value = dFormatter(new Date(value));
-    }
-    if (component.type === 'time') {
-        dFormatter = intl.getDateFormat({
-            format: 'hh:mm a',
-            type: 'time'
-        });
-        value = dFormatter(new Date(value));
-    }
-    if (component.type === 'dateTime') {
-        dFormatter = intl.getDateFormat({
-            format: 'MM/dd/yyyy hh:mm a',
-            type: 'dateTime'
-        });
-        value = dFormatter(new Date(value));
-    }
-    if (component.type === 'dateRange' && Array.isArray(value)) {
-        value = value.map(date => date ? dFormatter(new Date(date)) : null);
-    }
-    return value;
-}

package/styles/bootstrap5.3-dark.css

@@ -1,26 +0,0 @@
-@import '@syncfusion/ej2-base/styles/bootstrap5.3.css';
-@import '@syncfusion/ej2-buttons/styles/bootstrap5.3.css';
-@import '@syncfusion/ej2-inputs/styles/bootstrap5.3.css';
-@import '@syncfusion/ej2-dropdowns/styles/bootstrap5.3.css';
-@import '@syncfusion/ej2-calendars/styles/bootstrap5.3.css';
-@import '@syncfusion/ej2-react-calendars/styles/bootstrap5.3.css';
-@import '@syncfusion/ej2-navigations/styles/bootstrap5.3.css';
-@import '@syncfusion/ej2-notifications/styles/bootstrap5.3.css';
-@import '@syncfusion/ej2-popups/styles/bootstrap5.3.css';
-@import '@syncfusion/ej2-lists/styles/bootstrap5.3.css';
-@import '@syncfusion/ej2-splitbuttons/styles/bootstrap5.3.css';
-@import "@syncfusion/ej2-react-popups/styles/bootstrap5.3.css";
-@import "@syncfusion/ej2-react-grids/styles/bootstrap5.3.css";
-@import "@syncfusion/ej2-splitbuttons/styles/bootstrap5.3.css";
-@import "@syncfusion/ej2-image-editor/styles/bootstrap5.3.css";
-@import "@syncfusion/ej2-layouts/styles/bootstrap5.3.css";
-@import '@syncfusion/ej2-richtexteditor/styles/bootstrap5.3.css';
-@import 'form-renderer.base.css';
-
-:root {
-  --sf-bg-color: #212529;
-  --sf-font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', arial, 'Noto Sans', 'Liberation Sans', sans-serif, 'apple color emoji', 'Segoe UI emoji', 'Segoe UI Symbol', 'Noto color emoji';
-  --sf-text-color: #dee2e6;
-  --sf-tooltip-text-color: #adb5bd;
-  --sf-layout-border-color: #495057;
-}

package/styles/fluent2-dark.css

@@ -1,26 +0,0 @@
-@import '@syncfusion/ej2-base/styles/fluent2.css';
-@import '@syncfusion/ej2-buttons/styles/fluent2.css';
-@import '@syncfusion/ej2-inputs/styles/fluent2.css';
-@import '@syncfusion/ej2-dropdowns/styles/fluent2.css';
-@import '@syncfusion/ej2-calendars/styles/fluent2.css';
-@import '@syncfusion/ej2-react-calendars/styles/fluent2.css';
-@import '@syncfusion/ej2-navigations/styles/fluent2.css';
-@import '@syncfusion/ej2-notifications/styles/fluent2.css';
-@import '@syncfusion/ej2-popups/styles/fluent2.css';
-@import '@syncfusion/ej2-lists/styles/fluent2.css';
-@import '@syncfusion/ej2-splitbuttons/styles/fluent2.css';
-@import "@syncfusion/ej2-react-popups/styles/fluent2.css";
-@import "@syncfusion/ej2-react-grids/styles/fluent2.css";
-@import "@syncfusion/ej2-splitbuttons/styles/fluent2.css";
-@import "@syncfusion/ej2-image-editor/styles/fluent2.css";
-@import "@syncfusion/ej2-layouts/styles/fluent2.css";
-@import '@syncfusion/ej2-richtexteditor/styles/fluent2.css';
-@import 'form-renderer.base.css';
-
-:root {
-  --sf-bg-color: #1f1f1f;
-  --sf-font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
-  --sf-text-color: #fff;
-  --sf-tooltip-text-color: #d6d6d6;
-  --sf-layout-border-color: #525252;
-}