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

package/src/utils/ClipboardHelper.js

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

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

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

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

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

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

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

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