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

package/src/utils/ClipboardHelper.js

@@ -1,83 +0,0 @@
-/**
- * System clipboard helper for copying/pasting form field configurations
- * Uses navigator.clipboard API for cross-tab and external tool integration
- */
-export class ClipboardHelper {
-    static CLIPBOARD_PREFIX = 'FORMBUILDER_FIELD:';
-    /**
-     * Copy field configuration to system clipboard as JSON
-     */
-    static async copyToClipboard(field) {
-        try {
-            const jsonString = JSON.stringify(field, null, 2);
-            const clipboardData = `${this.CLIPBOARD_PREFIX}${jsonString}`;
-            await navigator.clipboard.writeText(clipboardData);
-            //console.log('Field copied to clipboard:', field.id);
-        }
-        catch (error) {
-            console.error('Failed to copy to clipboard:', error);
-            throw new Error(`Unable to copy field: ${error}`);
-        }
-    }
-    /**
-     * Read field configuration from system clipboard
-     * Returns null if clipboard doesn't contain valid field data
-     */
-    static async readFromClipboard() {
-        try {
-            const clipboardText = await navigator.clipboard.readText();
-            // Check if clipboard contains our prefixed data
-            if (!clipboardText.startsWith(this.CLIPBOARD_PREFIX)) {
-                console.warn('Clipboard does not contain form field data');
-                return null;
-            }
-            // Remove prefix and parse JSON
-            const jsonString = clipboardText.substring(this.CLIPBOARD_PREFIX.length);
-            const field = JSON.parse(jsonString);
-            //console.log('Field read from clipboard:', field.id);
-            return field;
-        }
-        catch (error) {
-            console.error('Failed to read from clipboard:', error);
-            return null;
-        }
-    }
-    /**
-     * Check if clipboard contains valid form field data
-     */
-    static async hasClipboardData() {
-        try {
-            const clipboardText = await navigator.clipboard.readText();
-            return clipboardText.startsWith(this.CLIPBOARD_PREFIX);
-        }
-        catch (error) {
-            // Silently return false when document is not focused (expected behavior)
-            // or clipboard permissions are denied
-            return false;
-        }
-    }
-    /**
-     * Generate new unique field with modified ID and name
-     */
-    static createUniqueField(sourceField) {
-        const timestamp = Date.now();
-        const random = Math.floor(Math.random() * 1000);
-        return {
-            ...sourceField,
-            id: `${sourceField.type}_${timestamp}_${random}`
-        };
-    }
-    static async clearData() {
-        // Overwrite the system clipboard with empty text unconditionally.
-        //NOTE: We deliberately do NOT call navigator.clipboard.readText() here
-        // because doing so triggers the browser's native paste UI prompt in
-        // Firefox on first invocation. Writing alone is sufficient to clear
-        // any form-builder data we previously wrote.
-        try {
-            await navigator.clipboard.writeText('');
-        }
-        catch (error) {
-            // Silently ignore failures (e.g. document not focused)
-        }
-    }
-}

package/src/utils/ColumnBuilder.d.ts

@@ -1,11 +0,0 @@
-import React from 'react';
-import type { GridColumn } from '../types/FormSchema';
-interface ColumnBuilderProps {
-    columns: GridColumn[];
-    onChange: (columns: GridColumn[]) => void;
-    name?: any;
-    isConditionData?: boolean;
-    label?: string;
-}
-export declare const ColumnBuilder: React.FC<ColumnBuilderProps>;
-export {};

package/src/utils/ColumnBuilder.js

@@ -1,153 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState, useEffect, useRef } from 'react';
-import { ButtonComponent, CheckBoxComponent } from '@syncfusion/ej2-react-buttons';
-import { AutoCompleteComponent, DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
-import { NumericTextBoxComponent, TextBoxComponent } from '@syncfusion/ej2-react-inputs';
-import { DatePickerComponent } from '@syncfusion/ej2-react-calendars';
-import { useLocalization } from '../context/LocalizationContext';
-import { useFetchOptions } from '../../Common/utils';
-import { useFormSchema } from '../context/FormSchemaContext';
-import { ColumnExpressionEditor } from './ExpressionEditor';
-import { CustomValidationEditor } from './CustomValidationEditor';
-import { AccordionWrapper } from './CustomAccordion';
-export const ColumnBuilder = ({ columns, onChange, name, isConditionData, label }) => {
-    const [rows, setRows] = useState([]);
-    const [expandedId, setExpandedId] = useState(null);
-    const nextIdRef = useRef(0);
-    const { l10n, locale } = useLocalization();
-    const { formSchema } = useFormSchema();
-    const componentForEdit = formSchema.components.find(comp => comp.name === name);
-    const dataSource = componentForEdit?.dataSource || [];
-    const fetchedData = useFetchOptions(dataSource);
-    const extractDataSourceKeys = (dataSource) => {
-        if (Array.isArray(dataSource) && dataSource.length > 0) {
-            return Object.keys(dataSource[0]);
-        }
-        return [];
-    };
-    const dataSourceKeys = extractDataSourceKeys(Array.isArray(dataSource) ? dataSource : fetchedData);
-    const columnsWithKeys = columns.map(col => col.field).filter(field => field);
-    const mapTypeToEditType = (type) => {
-        switch (type) {
-            case 'number':
-                return 'numericedit';
-            case 'date':
-                return 'datepickeredit';
-            case 'boolean':
-                return 'booleanedit';
-            default:
-                return 'textbox';
-        }
-    };
-    // Initialize rows from columns
-    useEffect(() => {
-        const initialRows = (columns || []).map((col, idx) => {
-            const id = idx;
-            if (id >= nextIdRef.current) {
-                nextIdRef.current = id + 1;
-            }
-            return {
-                id,
-                index: idx + 1,
-                ...col,
-                allowEditing: col.allowEditing !== undefined ? col.allowEditing : true // Add this line
-            };
-        });
-        setRows(initialRows);
-    }, []);
-    // Update parent when columns change
-    const updateColumns = (newRows) => {
-        const updatedColumns = newRows.map(({ id, index, ...col }) => col);
-        onChange(updatedColumns);
-    };
-    const handleAddColumn = () => {
-        const newId = nextIdRef.current++;
-        const newIndex = rows.length + 1;
-        const newColumn = {
-            id: newId,
-            index: newIndex,
-            field: `column_${Date.now()}`,
-            headerText: `${l10n.getConstant('column')} ${newIndex}`,
-            type: 'string',
-            editType: mapTypeToEditType('string'),
-            width: '120',
-            allowEditing: true,
-            validationRules: {}
-        };
-        const newRows = [...rows, newColumn];
-        setRows(newRows);
-        updateColumns(newRows);
-    };
-    const handleDeleteColumn = (id) => {
-        const newRows = rows.filter(row => row.id !== id).map((row, idx) => ({
-            ...row,
-            index: idx + 1
-        }));
-        setRows(newRows);
-        updateColumns(newRows);
-    };
-    const handleColumnUpdate = (id, updates) => {
-        const newRows = rows.map(row => row.id === id ? { ...row, ...updates } : row);
-        setRows(newRows);
-        updateColumns(newRows);
-    };
-    const handleValidationRuleChange = (id, ruleName, value) => {
-        const newRows = rows.map(row => {
-            if (row.id === id) {
-                const newValidationRules = { ...row.validationRules };
-                if (value === undefined || value === '' || value === null) {
-                    delete newValidationRules[ruleName];
-                }
-                else {
-                    newValidationRules[ruleName] = value;
-                }
-                return { ...row, validationRules: newValidationRules };
-            }
-            return row;
-        });
-        setRows(newRows);
-        updateColumns(newRows);
-    };
-    const handlePrimaryKeyChange = (id, checked) => {
-        const newRows = rows.map(row => {
-            if (row.id === id) {
-                // Set this column as primary key
-                return { ...row, isPrimaryKey: checked };
-            }
-            else if (checked) {
-                // Clear primary key from all other columns when setting a new one
-                return { ...row, isPrimaryKey: false };
-            }
-            return row;
-        });
-        setRows(newRows);
-        updateColumns(newRows);
-    };
-    const hasOtherPrimaryKey = (currentId) => {
-        return rows.some(row => row.id !== currentId && row.isPrimaryKey === true);
-    };
-    return (_jsx(AccordionWrapper, { title: l10n.getConstant(label), children: _jsxs("div", { className: "column-builder", children: [_jsx("div", { className: "column-list", style: rows.length ? undefined : { display: 'none' }, children: rows.map((col) => (_jsxs("div", { className: "column-item", children: [_jsxs("div", { className: `column-header ${isConditionData ? 'no-border-radius' : ''}`, children: [_jsx("span", { className: "column-field", children: col.headerText }), _jsxs("div", { style: { display: 'flex', gap: '8px' }, children: [_jsx(ButtonComponent, { onClick: () => setExpandedId(expandedId === col.id ? null : col.id), cssClass: 'e-flat', iconCss: "e-icons e-edit", title: l10n.getConstant('edit'), "aria-label": l10n.getConstant('edit') }), _jsx(ButtonComponent, { onClick: (e) => {
-                                                    e.stopPropagation();
-                                                    handleDeleteColumn(col.id);
-                                                }, cssClass: 'e-flat', iconCss: "e-icons e-trash", title: l10n.getConstant('delete'), "aria-label": l10n.getConstant('delete') })] })] }), expandedId === col.id && (_jsxs("div", { className: !isConditionData ? 'right-sidebar-column' : 'conditional-column', children: [!isConditionData &&
-                                        _jsxs("div", { className: "column-sidebar-header", children: [_jsx("h3", { children: l10n.getConstant('columnSettings') }), _jsx("button", { className: "close-btn", onClick: () => setExpandedId(expandedId === col.id ? null : col.id), title: "Close (Esc)", "aria-label": l10n.getConstant('close'), children: "\u2715" })] }, 'column settings'), _jsxs("div", { className: 'column-details', children: [_jsxs("div", { className: "form-group", children: [_jsx("label", { className: 'property-label', style: { fontWeight: 600, marginBottom: '0.5rem', fontSize: '14px' }, children: l10n.getConstant('basic') }), _jsx("label", { htmlFor: `col-field-${col.id}`, children: l10n.getConstant('fieldName') }), dataSourceKeys.length > 0 ? (_jsx(AutoCompleteComponent, { dataSource: dataSourceKeys.map(key => ({ text: key, value: key })), fields: { text: 'text', value: 'value' }, value: col.field, change: (e) => handleColumnUpdate(col.id, { field: e.value }), htmlAttributes: { 'aria-label': l10n.getConstant('fieldName') } })) : (_jsx(TextBoxComponent, { type: "text", value: col.field, onChange: (e) => handleColumnUpdate(col.id, { field: e.value }), htmlAttributes: { 'aria-label': l10n.getConstant('fieldName') } }))] }), _jsxs("div", { className: "form-group", children: [_jsx("label", { htmlFor: `col-header-${col.id}`, children: l10n.getConstant('headerText') }), _jsx(TextBoxComponent, { type: "text", value: col.headerText, onChange: (e) => handleColumnUpdate(col.id, { headerText: e.value }), placeholder: l10n.getConstant('columnHeaderDisplay'), className: "e-input-group e-control-wrapper e-textbox ", htmlAttributes: { 'aria-label': l10n.getConstant('headerText') } })] }), _jsxs("div", { className: "form-group", children: [_jsx("label", { htmlFor: `col-type-${col.id}`, children: l10n.getConstant('type') }), _jsx(DropDownListComponent, { dataSource: [
-                                                            { text: l10n.getConstant('string'), value: 'string' },
-                                                            { text: l10n.getConstant('number'), value: 'number' },
-                                                            { text: l10n.getConstant('date'), value: 'date' },
-                                                            { text: l10n.getConstant('boolean'), value: 'boolean' }
-                                                        ], fields: { text: 'text', value: 'value' }, value: col.type || 'string', change: (e) => {
-                                                            const newType = e.value || 'string';
-                                                            handleColumnUpdate(col.id, {
-                                                                type: newType,
-                                                                editType: mapTypeToEditType(newType),
-                                                                validationRules: {}
-                                                            });
-                                                        }, placeholder: l10n.getConstant('selectType'), cssClass: "e-textbox", htmlAttributes: { 'aria-label': l10n.getConstant('type') } })] }), _jsxs("div", { className: "form-group", children: [_jsx("label", { htmlFor: `col-width-${col.id}`, children: l10n.getConstant('width') }), _jsx(TextBoxComponent, { type: "text", value: `${col.width}` || '120', onChange: (e) => handleColumnUpdate(col.id, { width: e.value }), placeholder: l10n.getConstant('columnWidthPlaceholder'), className: "e-textbox", htmlAttributes: { 'aria-label': l10n.getConstant('width') } })] }), _jsxs("div", { className: "form-group", children: [_jsx("label", { htmlFor: `col-format-${col.id}`, children: l10n.getConstant('format') }), _jsx(TextBoxComponent, { type: "text", value: col.format || '', onChange: (e) => handleColumnUpdate(col.id, { format: e.value }), className: "e-textbox", htmlAttributes: { 'aria-label': l10n.getConstant('format') } })] }), _jsx("div", { style: { height: '0.5px', borderBottom: '0.5px solid rgb(var(--sf-color-line-color))' } }), _jsxs("div", { className: "form-group checkbox-group", children: [_jsx("label", { className: 'property-label', style: { fontWeight: 600, marginBottom: '0.5rem', fontSize: '14px' }, children: l10n.getConstant('behaviour') }), _jsxs("label", { children: [_jsx(CheckBoxComponent, { type: "checkbox", checked: col.isPrimaryKey || false, disabled: !col.isPrimaryKey && hasOtherPrimaryKey(col.id), change: (e) => handlePrimaryKeyChange(col.id, e.checked || false), htmlAttributes: { 'aria-label': l10n.getConstant('primaryKey') } }), l10n.getConstant('primaryKey'), !col.isPrimaryKey &&
-                                                                hasOtherPrimaryKey(col.id) &&
-                                                                ` (${l10n.getConstant('anotherPrimaryKeySet')})`] })] }), _jsx("div", { className: "form-group checkbox-group", children: _jsxs("label", { children: [_jsx(CheckBoxComponent, { type: "checkbox", checked: col.allowEditing !== false, change: (e) => handleColumnUpdate(col.id, { allowEditing: e.checked || false }), htmlAttributes: { 'aria-label': l10n.getConstant('allowEditing') || 'Allow Editing' } }), l10n.getConstant('allowEditing') || 'Allow Editing'] }) }), _jsx("div", { style: { height: '0.5px', borderBottom: '0.5px solid rgb(var(--sf-color-line-color))' } }), _jsx("div", { children: _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '1rem' }, children: [_jsx("label", { style: { fontWeight: 600, fontSize: '14px' }, id: `validation-rules-label-${col.id}`, children: l10n.getConstant('validationRulesFor') }), _jsx("div", { className: "form-group checkbox-group", children: _jsxs("label", { children: [_jsx(CheckBoxComponent, { type: "checkbox", checked: col.validationRules?.required || false, change: (e) => handleValidationRuleChange(col.id, 'required', e.checked || undefined), htmlAttributes: { 'aria-label': l10n.getConstant('required') } }), l10n.getConstant('required')] }) }), col.type === 'string' && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "form-group", children: [_jsx("label", { htmlFor: `col-minLength-${col.id}`, children: l10n.getConstant('minLength') }), _jsx(NumericTextBoxComponent, { value: col.validationRules?.minLength ?? undefined, locale: locale, change: (e) => handleValidationRuleChange(col.id, 'minLength', e.value !== null && e.value !== undefined ? e.value : undefined), placeholder: l10n.getConstant('minimumCharacters'), cssClass: "e-textbox", htmlAttributes: { 'aria-label': l10n.getConstant('minLength') } })] }), _jsxs("div", { className: "form-group", children: [_jsx("label", { htmlFor: `col-maxLength-${col.id}`, children: l10n.getConstant('maxLength') }), _jsx(NumericTextBoxComponent, { value: col.validationRules?.maxLength ?? undefined, locale: locale, change: (e) => handleValidationRuleChange(col.id, 'maxLength', e.value !== null && e.value !== undefined ? e.value : undefined), placeholder: l10n.getConstant('maximumCharacters'), cssClass: "e-textbox", htmlAttributes: { 'aria-label': l10n.getConstant('maxLength') } })] })] })), col.type === 'number' && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "form-group", children: [_jsx("label", { htmlFor: `col-minValue-${col.id}`, children: l10n.getConstant('minValue') }), _jsx(NumericTextBoxComponent, { locale: locale, value: col.validationRules?.min ?? undefined, change: (e) => handleValidationRuleChange(col.id, 'min', e.value !== null && e.value !== undefined ? e.value : undefined), placeholder: l10n.getConstant('minimumValue'), cssClass: "e-textbox", htmlAttributes: { 'aria-label': l10n.getConstant('minValue') } })] }), _jsxs("div", { className: "form-group", children: [_jsx("label", { htmlFor: `col-maxValue-${col.id}`, children: l10n.getConstant('maxValue') }), _jsx(NumericTextBoxComponent, { value: col.validationRules?.max ?? undefined, locale: locale, change: (e) => handleValidationRuleChange(col.id, 'max', e.value !== null && e.value !== undefined ? e.value : undefined), placeholder: l10n.getConstant('maximumValue'), cssClass: "e-textbox", htmlAttributes: { 'aria-label': l10n.getConstant('maxValue') } })] })] })), col.type === 'date' && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "form-group", children: [_jsx("label", { htmlFor: `col-minDate-${col.id}`, children: l10n.getConstant('minDate') }), _jsx(DatePickerComponent, { locale: locale, value: col.validationRules?.min ? new Date(col.validationRules.min) : undefined, change: (e) => handleValidationRuleChange(col.id, 'min', e.value ? e.value.toISOString().slice(0, 10) : undefined), cssClass: "e-textbox", htmlAttributes: { 'aria-label': l10n.getConstant('minDate') } })] }), _jsxs("div", { className: "form-group", children: [_jsx("label", { htmlFor: `col-maxDate-${col.id}`, children: l10n.getConstant('maxDate') }), _jsx(DatePickerComponent, { locale: locale, value: col.validationRules?.max ? new Date(col.validationRules.max) : undefined, change: (e) => handleValidationRuleChange(col.id, 'max', e.value ? e.value.toISOString().slice(0, 10) : undefined), cssClass: "e-textbox", htmlAttributes: { 'aria-label': l10n.getConstant('maxDate') } })] })] }))] }) }), _jsx("div", { style: { height: '0.5px', borderBottom: '0.5px solid rgb(var(--sf-color-line-color))' } }), _jsxs("div", { className: "form-group", children: [_jsx("label", { style: { fontWeight: 600, marginBottom: '0.5rem', fontSize: '14px' }, htmlFor: `col-expression-${col.id}`, children: l10n.getConstant('expression') }), _jsxs("div", { className: "expression-editor-wrapper", children: [_jsx(ColumnExpressionEditor, { expression: col.expression || '', availableFields: columnsWithKeys, onExpressionChange: (expr) => handleColumnUpdate(col.id, { expression: expr }) }), col.expression && col.expression.trim() && (_jsx("small", { style: { color: '#666', marginTop: '8px', display: 'block' }, children: "Column is read-only (if calculated)." }))] })] }), _jsx("div", { style: { height: '0.5px', borderBottom: '0.5px solid rgb(var(--sf-color-line-color))' } }), _jsx("div", { className: "form-group", children: _jsx("div", { className: "custom-validation-section", children: _jsx(CustomValidationEditor, { componentFields: rows.map((r, _idx) => ({
-                                                            id: `${r.id}`,
-                                                            name: r.field,
-                                                            type: r.type || 'string',
-                                                            label: r.headerText
-                                                        })), excludeFieldId: col.field, existingRules: col.customValidation || [], values: { "label": "customValidation" }, onChange: (rules) => handleColumnUpdate(col.id, { customValidation: rules }) }) }) })] })] }))] }, col.id))) }), _jsx("div", { className: "", style: { width: '100%' }, children: _jsx(ButtonComponent, { style: { width: '100%' }, cssClass: "e-outline", onClick: handleAddColumn, type: "button", "aria-label": l10n.getConstant('addColumn'), children: l10n.getConstant('addColumn') }) })] }) }));
-};

package/src/utils/ColumnSpanEditor.d.ts

@@ -1,8 +0,0 @@
-import React from 'react';
-interface ColumnSpanEditorProps {
-    columnCount: number;
-    initialWidths?: number[];
-    onChange: (widths: (number | null)[]) => void;
-}
-export declare const ColumnSpanEditor: React.FC<ColumnSpanEditorProps>;
-export {};

package/src/utils/ColumnSpanEditor.js

@@ -1,98 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useEffect, useRef } from 'react';
-import { GridComponent, ColumnsDirective, ColumnDirective, Inject, Page } from '@syncfusion/ej2-react-grids';
-import { splitWidths } from '../../Common/utils';
-import { useLocalization } from '../context/LocalizationContext';
-import { floatFocus } from '../components/layout/LeftPane';
-export const ColumnSpanEditor = ({ columnCount, initialWidths, onChange, }) => {
-    const [rows, setRows] = useState([]);
-    const [maxValues, setMaxValues] = useState({});
-    const gridRef = useRef(null);
-    const { l10n } = useLocalization();
-    const getInitialSplitWidths = (columnCount, initialWidths) => {
-        const normalized = Array.from({ length: columnCount }, (_, i) => initialWidths && initialWidths[i] != null ? initialWidths[i] : null);
-        return splitWidths(normalized);
-    };
-    // Initialize rows based on column count and initial widths
-    useEffect(() => {
-        if (columnCount < 1 || columnCount > 12) {
-            console.warn(`Invalid column count: ${columnCount}`);
-            return;
-        }
-        const resolvedWidths = getInitialSplitWidths(columnCount, initialWidths);
-        // Create grid rows - no auto-fill, just use provided values or empty strings
-        const newRows = Array(columnCount)
-            .fill(null)
-            .map((_, idx) => ({
-            id: idx,
-            columnName: `${idx + 1}`,
-            width: ((initialWidths && !initialWidths.every((w) => w === null))) ? (initialWidths[idx] ? String(initialWidths[idx]) : '') : resolvedWidths[idx] ? String(resolvedWidths[idx]) : '',
-        }));
-        setRows(newRows);
-        calculateMaxValues(newRows);
-    }, [columnCount, initialWidths]);
-    // Calculate max value for each field (100 - sum of all other fields)
-    const calculateMaxValues = (rowsData) => {
-        const filledValues = rowsData
-            .map((row) => (row.width ? parseFloat(row.width) : 0))
-            .filter((val) => val > 0);
-        const totalFilled = filledValues.reduce((sum, val) => sum + val, 0);
-        const newMaxValues = {};
-        rowsData.forEach((row) => {
-            const currentValue = row.width ? parseFloat(row.width) : 0;
-            const othersFilled = totalFilled - currentValue;
-            newMaxValues[row.id] = Math.max(0, 100 - othersFilled);
-        });
-        setMaxValues(newMaxValues);
-    };
-    // Handle width change in grid
-    const handleWidthChange = (id, newValue) => {
-        // Allow empty string or valid numeric values
-        if (newValue === '' || newValue.trim() === '') {
-            const updatedRows = rows.map((row) => row.id === id ? { ...row, width: '' } : row);
-            setRows(updatedRows);
-            calculateMaxValues(updatedRows);
-            triggerChange(updatedRows);
-            return;
-        }
-        let parsedWidth = parseFloat(newValue);
-        // Validate: must be positive number
-        if (isNaN(parsedWidth) || parsedWidth <= 0) {
-            return;
-        }
-        // Auto-correct if exceeds max - set to max value
-        const maxForField = (maxValues[id] != undefined) ? maxValues[id] : 100;
-        if (parsedWidth > maxForField) {
-            parsedWidth = maxForField;
-        }
-        const updatedRows = rows.map((row) => row.id === id ? { ...row, width: String(parsedWidth) } : row);
-        setRows(updatedRows);
-        calculateMaxValues(updatedRows);
-        triggerChange(updatedRows);
-    };
-    // Trigger onChange callback with widths array (null for empty values)
-    const triggerChange = (rowsData) => {
-        const widths = rowsData.map((row) => row.width ? parseFloat(row.width) : null);
-        onChange(widths);
-    };
-    // Width input template - text field with dynamic max value
-    const widthTemplate = (props) => {
-        const maxForField = maxValues[props.id] || 100;
-        return (_jsx("div", { className: "e-input-group", children: _jsx("input", { type: 'number', defaultValue: props.width, max: maxForField, onFocus: floatFocus, "aria-label": "Span percentage", onKeyDown: (e) => {
-                    if (e.ctrlKey && e.key === 'a') {
-                        e.preventDefault();
-                        e.currentTarget.select();
-                    }
-                }, onBlur: (e) => handleWidthChange(props.id, e.target.value), placeholder: "Width %", className: "e-input" }) }));
-    };
-    // Calculate grid height based on number of rows
-    const calculateHeight = (rowCount) => {
-        const baseHeight = 58; // Header + 1 row
-        const rowHeight = 42;
-        return baseHeight + rowCount * rowHeight;
-    };
-    if (columnCount < 1 || columnCount > 12) {
-        return (_jsx("div", { className: "column-span-editor-error", children: _jsxs("span", { children: ["\u26A0\uFE0F Invalid column count: ", columnCount] }) }));
-    }
-    return (_jsx("div", { className: "options-editor", children: _jsxs(GridComponent, { ref: gridRef, dataSource: rows, allowPaging: false, height: calculateHeight(rows.length), allowSelection: false, cssClass: "options-grid table-col", children: [_jsxs(ColumnsDirective, { children: [_jsx(ColumnDirective, { field: "columnName", headerText: l10n.getConstant('columns') || "Columns", width: "80", textAlign: "Left", allowSorting: false, allowResizing: false }), _jsx(ColumnDirective, { field: "width", headerText: `${l10n.getConstant('width') || 'Width'} (%)`, width: "auto", template: widthTemplate, allowSorting: false, allowResizing: false })] }), _jsx(Inject, { services: [Page] })] }) }));
-};

package/src/utils/ConditionDataEditor.d.ts

@@ -1,29 +0,0 @@
-import React from 'react';
-import type { FormComponent, ConditionalDataRule } from '../types/FormSchema';
-export interface ConditionDataEditorProps {
-    /** Array of available form field names/components for condition rules */
-    componentFields: FormComponent[];
-    /** The DataGrid component being edited */
-    componentForEdit?: FormComponent;
-    /** ID of the DataGrid being edited - exclude from columns */
-    excludeFieldId?: string;
-    /** Existing conditional data rules to pre-populate */
-    existingRules?: ConditionalDataRule[];
-    /** Callback when conditions change */
-    onChange: (rules: ConditionalDataRule[]) => void;
-}
-/**
- * ConditionDataEditor Component
- *
- * Allows users to define conditional data sources for DataGrid components.
- * Users can create multiple conditions, each with its own QueryBuilder rule
- * and associated data source configuration.
- *
- * Features:
- * - Add/remove multiple conditional data rules
- * - QueryBuilder for condition definition
- * - DataSourceCollector for data source configuration
- * - Expandable UI (similar to ColumnBuilder pattern)
- * - Persists state to FormSchema
- */
-export declare const ConditionDataEditor: React.FC<ConditionDataEditorProps>;

package/src/utils/ConditionDataEditor.js

@@ -1,177 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useRef, useEffect, useState } from 'react';
-import { QueryBuilderComponent } from '@syncfusion/ej2-react-querybuilder';
-import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
-import { useLocalization } from '../context/LocalizationContext';
-import { DataSourceCollector } from './DataSourceCollector';
-import { ColumnBuilder } from './ColumnBuilder';
-import { createColumnTemplate } from './ConditionalEditorUtils';
-import { AccordionWrapper } from './CustomAccordion';
-/**
- * ConditionDataEditor Component
- *
- * Allows users to define conditional data sources for DataGrid components.
- * Users can create multiple conditions, each with its own QueryBuilder rule
- * and associated data source configuration.
- *
- * Features:
- * - Add/remove multiple conditional data rules
- * - QueryBuilder for condition definition
- * - DataSourceCollector for data source configuration
- * - Expandable UI (similar to ColumnBuilder pattern)
- * - Persists state to FormSchema
- */
-export const ConditionDataEditor = ({ componentFields, excludeFieldId, existingRules = [], onChange }) => {
-    const { l10n } = useLocalization();
-    const stateRef = useRef({
-        rules: existingRules,
-        expandedRuleId: null,
-        nextRuleId: existingRules.length
-    });
-    const qbRefs = useRef({});
-    const [, forceRender] = useState({});
-    // Initialize QueryBuilder refs for each rule
-    useEffect(() => {
-        stateRef.current.rules.forEach((_, idx) => {
-            if (!qbRefs.current[idx]) {
-                qbRefs.current[idx] = React.createRef();
-            }
-        });
-    }, [stateRef.current.rules.length]);
-    /**
-     * Build columns for QueryBuilder - excludes the current DataGrid field
-     * to prevent self-referential conditions
-     * Includes templates for different field types (dropdown, date, time, etc.)
-     */
-    const buildColumnsForQueryBuilder = (qbRef) => {
-        return componentFields
-            .filter(component => component.id !== excludeFieldId)
-            .map(component => {
-            const fieldType = inferFieldType(component);
-            const operators = [
-                { key: 'Is Empty', value: 'isempty' },
-                { key: 'Is Not Empty', value: 'isnotempty' },
-                { key: 'Equal', value: 'equal' },
-                { key: 'Not Equal', value: 'notequal' },
-                ...(fieldType === 'number' || fieldType === 'date'
-                    ? [
-                        { key: 'Greater than', value: 'greaterthan' },
-                        { key: 'Less than', value: 'lessthan' },
-                        { key: 'Greater than or equal', value: 'greaterthanorequal' },
-                        { key: 'Less than or equal', value: 'lessthanorequal' }
-                    ]
-                    : []),
-                ...(fieldType === 'string'
-                    ? [
-                        { key: 'Starts With', value: 'startswith' },
-                        { key: 'Contains', value: 'contains' },
-                        { key: 'Not Contains', value: 'notcontains' }
-                    ]
-                    : [])
-            ];
-            return {
-                field: component.id,
-                label: component.label || component.id,
-                type: fieldType,
-                format: fieldType === 'date' ? 'MM/dd/yyyy' : undefined,
-                operators,
-                template: createColumnTemplate(component, qbRef)
-            };
-        });
-    };
-    /**
-     * Infer field type from component type
-     * Used for QueryBuilder column configuration
-     */
-    const inferFieldType = (component) => {
-        const type = component.type;
-        if (type === 'number' || type === 'rangeSlider' || type === 'rating')
-            return 'number';
-        if (type === 'date')
-            return 'date';
-        if (type === 'checkbox' || type === 'switch')
-            return 'boolean';
-        return 'string';
-    };
-    /**
-     * Handle rule condition change from QueryBuilder
-     */
-    const handleRuleConditionChange = (ruleIndex) => {
-        const qbRef = qbRefs.current[ruleIndex];
-        if (qbRef?.current) {
-            const rule = qbRef.current.getValidRules(qbRef.current.rule);
-            stateRef.current.rules[ruleIndex] = {
-                ...stateRef.current.rules[ruleIndex],
-                condition: rule
-            };
-            onChange(stateRef.current.rules);
-        }
-    };
-    /**
-     * Handle data source change from DataSourceCollector
-     */
-    const handleDataSourceChange = (ruleIndex, dataSource) => {
-        stateRef.current.rules[ruleIndex] = {
-            ...stateRef.current.rules[ruleIndex],
-            dataSource
-        };
-        onChange(stateRef.current.rules);
-        forceRender({});
-    };
-    /**
-     * Handle columns change from ColumnBuilder
-     */
-    const handleColumnsChange = (ruleIndex, columns) => {
-        stateRef.current.rules[ruleIndex] = {
-            ...stateRef.current.rules[ruleIndex],
-            columns
-        };
-        onChange(stateRef.current.rules);
-        forceRender({});
-    };
-    /**
-     * Add new conditional data rule
-     */
-    const handleAddRule = () => {
-        const newRuleId = stateRef.current.nextRuleId;
-        const newRule = {
-            condition: { condition: 'and', rules: [] },
-            dataSource: []
-        };
-        stateRef.current.rules.push(newRule);
-        stateRef.current.expandedRuleId = newRuleId;
-        stateRef.current.nextRuleId = newRuleId + 1;
-        qbRefs.current[newRuleId] = React.createRef();
-        onChange(stateRef.current.rules);
-        forceRender({});
-    };
-    /**
-     * Delete conditional data rule
-     */
-    const handleDeleteRule = (ruleIndex) => {
-        stateRef.current.rules.splice(ruleIndex, 1);
-        // Clean up refs
-        delete qbRefs.current[ruleIndex];
-        stateRef.current.expandedRuleId = null;
-        onChange(stateRef.current.rules);
-        forceRender({});
-    };
-    return (_jsxs("div", { className: "condition-data-editor", children: [_jsx("div", { className: "rules-list", children: stateRef.current.rules.map((rule, idx) => {
-                    const ruleColumns = buildColumnsForQueryBuilder(qbRefs.current[idx]);
-                    return (_jsxs("div", { className: "rule-item", children: [_jsxs("div", { className: "rule-header", tabIndex: 0, id: `condition-header-${idx}`, "aria-expanded": stateRef.current.expandedRuleId === idx, "aria-labelledby": `condition-panel-${idx}`, "aria-label": `${l10n.getConstant('condition')} ${idx + 1}`, onClick: () => {
-                                    stateRef.current.expandedRuleId =
-                                        stateRef.current.expandedRuleId === idx ? null : idx;
-                                    forceRender({});
-                                }, onKeyDown: (e) => {
-                                    if (e.key === 'Enter' || e.key === ' ') {
-                                        e.preventDefault();
-                                        stateRef.current.expandedRuleId =
-                                            stateRef.current.expandedRuleId === idx ? null : idx;
-                                        forceRender({});
-                                    }
-                                }, children: [_jsx("h4", { className: "rule-title", children: l10n.getConstant('condition') + ` ${idx + 1}` }), _jsx(ButtonComponent, { onClick: (e) => {
-                                            e.stopPropagation();
-                                            handleDeleteRule(idx);
-                                        }, cssClass: "e-flat", iconCss: "e-icons e-trash", type: "button", title: l10n.getConstant('delete'), "aria-label": `${l10n.getConstant('delete')} ${l10n.getConstant('condition')} ${idx + 1}` })] }), stateRef.current.expandedRuleId === idx && (_jsxs("div", { className: "rule-details", id: `condition-panel-${idx}`, role: "region", "aria-labelledby": `condition-header-${idx}`, children: [_jsx(AccordionWrapper, { title: l10n.getConstant('condition'), children: _jsxs("div", { className: "form-group", role: "group", "aria-label": l10n.getConstant('condition'), children: [_jsx("p", { className: "property-description", id: `condition-description-${idx}`, children: l10n.getConstant('conditionalDataConditionDescription') }), _jsx("div", { onBlur: () => { }, tabIndex: -1, "aria-describedby": `condition-description-${idx}`, "aria-label": l10n.getConstant('condition'), children: _jsx(QueryBuilderComponent, { ref: qbRefs.current[idx], dataSource: [], columns: ruleColumns, rule: rule.condition, ruleChange: () => handleRuleConditionChange(idx) }) })] }) }), _jsx("div", { className: "form-group", role: "group", "aria-label": l10n.getConstant('dataSource'), children: _jsx(DataSourceCollector, { datakey: 'Conditionaldata', value: rule.dataSource, onChange: (dataSource) => handleDataSourceChange(idx, dataSource), type: "grid", isAccordion: true }) }), _jsx("div", { className: "form-group", role: "group", "aria-label": l10n.getConstant('columns'), children: _jsx(ColumnBuilder, { columns: rule.columns || [], onChange: (columns) => handleColumnsChange(idx, columns), isConditionData: true, label: 'columns' }) })] }, 'Condionaldata'))] }, idx));
-                }) }), _jsx("div", { className: "rule-actions", role: "group", "aria-label": l10n.getConstant('conditionActions'), children: _jsx(ButtonComponent, { cssClass: "e-outline", onClick: handleAddRule, type: "button", "aria-label": l10n.getConstant('addCondition'), children: l10n.getConstant('addCondition') }) })] }));
-};

package/src/utils/ConditionalEditorUtils.d.ts

@@ -1,27 +0,0 @@
-/**
- * ConditionalEditorUtils - Shared utility functions for Conditional and ConditionalData editors
- * Exports field type inference, column templates, and helper functions
- */
-import type { QueryBuilderComponent } from '@syncfusion/ej2-react-querybuilder';
-import type { FormComponent } from '../types/FormSchema';
-/**
- * Infer field type from component type for QueryBuilder
- */
-export declare function inferFieldType(component: FormComponent): 'string' | 'number' | 'date' | 'boolean' | 'time';
-/**
- * Check if component is an array field type
- */
-export declare function isArrayField(component: FormComponent): boolean;
-/**
- * Check if component has selectable options
- */
-export declare function hasSelectableOptions(component: FormComponent): boolean;
-/**
- * Create column template for QueryBuilder with custom input widgets
- * Supports date, time, multiselect, dropdown, and other input types
- */
-export declare function createColumnTemplate(component: FormComponent, qbRef: React.RefObject<QueryBuilderComponent | null>, fetchedOptions?: Record<string, any[]>): {
-    create: () => HTMLInputElement;
-    destroy: (args: any) => void;
-    write: (args: any) => void;
-};