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

package/src/utils/ConditionsEditor.js

@@ -0,0 +1,571 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useEffect, useState, useCallback } from 'react';
+import { QueryBuilderComponent } from '@syncfusion/ej2-react-querybuilder';
+import { getComponent } from '@syncfusion/ej2-base';
+import { DataManager, Query } from '@syncfusion/ej2-data';
+import { useLocalization } from '../context/LocalizationContext';
+import ValueRenderer from './ValueRenderer';
+import { extractDataFromPath, getAdaptorInstance } from '../../Common/utils';
+import { ConditionDataEditor } from './ConditionDataEditor';
+import { ChoiceBasedFieldEditor } from './ChoiceBasedFieldEditor';
+import { inferFieldType, isArrayField, hasSelectableOptions, createColumnTemplate } from './ConditionalEditorUtils';
+import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
+import { DialogComponent } from '@syncfusion/ej2-react-popups';
+import { ListBoxComponent } from '@syncfusion/ej2-react-dropdowns';
+export const ConditionsEditor = ({ componentFields, componentForEdit, excludeFieldId, excludeChildIds = [], existingConditions, onChange, builderMode, supportedConditions: supportedConditionsProp = ['visibleWhen', 'hideWhen', 'readOnlyWhen', 'disabledWhen', 'requiredWhen', 'setValueWhen', 'choiceBasedField'] }) => {
+    // In Simple builder mode, only allow a subset of condition types
+    const supportedConditions = builderMode === 'Simple'
+        ? supportedConditionsProp.filter(c => c === 'visibleWhen' || c === 'disabledWhen' || c === 'readOnlyWhen')
+        : supportedConditionsProp;
+    // Use ref instead of state to avoid re-renders on condition updates
+    // Only notify parent when conditions change via onChange callback
+    const conditionsRef = useRef({
+        visibleWhen: existingConditions?.visibleWhen,
+        hideWhen: existingConditions?.hideWhen,
+        readOnlyWhen: existingConditions?.readOnlyWhen,
+        disabledWhen: existingConditions?.disabledWhen,
+        requiredWhen: existingConditions?.requiredWhen,
+        setValueWhen: existingConditions?.setValueWhen,
+        choiceBasedField: existingConditions?.choiceBasedField
+    });
+    const { l10n } = useLocalization();
+    // Track fetched options for components with URL-based options
+    const [fetchedOptions, setFetchedOptions] = useState({});
+    const fetchAbortControllers = useRef({});
+    const [isDialogOpen, setIsDialogOpen] = useState(false);
+    const [activeConditionType, setActiveConditionType] = useState('visibleWhen');
+    const [savedConditions, setSavedConditions] = useState([]);
+    const [showStyles, setShowStyles] = useState(false);
+    // Initialize savedConditions based on existingConditions
+    useEffect(() => {
+        const conditions = [];
+        if (existingConditions?.visibleWhen)
+            conditions.push('visibleWhen');
+        if (existingConditions?.hideWhen)
+            conditions.push('hideWhen');
+        if (existingConditions?.readOnlyWhen)
+            conditions.push('readOnlyWhen');
+        if (existingConditions?.disabledWhen)
+            conditions.push('disabledWhen');
+        if (existingConditions?.requiredWhen)
+            conditions.push('requiredWhen');
+        if (existingConditions?.setValueWhen)
+            conditions.push('setValueWhen');
+        if (existingConditions?.choiceBasedField)
+            conditions.push('choiceBasedField');
+        if (existingConditions?.conditionalData)
+            conditions.push('conditionalData');
+        setSavedConditions(conditions);
+    }, [existingConditions]);
+    // Fetch options for components that have URL-based options
+    useEffect(() => {
+        const newFetchedOptions = {};
+        const newAbortControllers = {};
+        componentFields.forEach(component => {
+            if (component.options && typeof component.options === 'object' && !Array.isArray(component.options)) {
+                const options = component.options;
+                if (options.type === 'url' && options.url) {
+                    newAbortControllers[component.id] = new AbortController();
+                    try {
+                        const headers = {};
+                        if (options.headers && Array.isArray(options.headers)) {
+                            options.headers.forEach((h) => {
+                                if (h.key?.trim()) {
+                                    headers[h.key] = h.value;
+                                }
+                            });
+                        }
+                        const dataManager = new DataManager({
+                            url: options.url,
+                            adaptor: getAdaptorInstance(options.adaptorType),
+                            headers: Object.keys(headers).length ? headers : undefined
+                        });
+                        let query = new Query();
+                        // Apply search query
+                        if (options.search && options.search.enabled && options.search.fields && options.search.fields.length > 0) {
+                            const searchKey = options.search.key || 'search';
+                            // Add search as a query parameter (will need search term at runtime or use generic placeholder)
+                            query = query.addParams(searchKey, '*');
+                        }
+                        // Apply sort query
+                        if (options.sort && options.sort.enabled && options.sort.field) {
+                            const sortDirection = options.sort.direction === 'descending' ? 'descending' : 'ascending';
+                            query = query.sortBy(options.sort.field, sortDirection);
+                        }
+                        // Apply filter queries
+                        if (options.filters && Array.isArray(options.filters) && options.filters.length > 0) {
+                            options.filters.forEach((f) => {
+                                if (f.field && f.operator && f.value) {
+                                    query = query.where(f.field, f.operator, f.value);
+                                }
+                            });
+                        }
+                        // Apply query params (kept for backward compatibility)
+                        if (options.queryParams) {
+                            Object.keys(options.queryParams).forEach(key => {
+                                query = query.addParams(key, options.queryParams[key]);
+                            });
+                        }
+                        // Example: paging
+                        if (options.skip)
+                            query = query.skip(options.skip);
+                        if (options.take)
+                            query = query.take(options.take);
+                        dataManager.executeQuery(query).then((res) => {
+                            let data = res.result;
+                            if (options.dataPath) {
+                                data = extractDataFromPath(data, options.dataPath);
+                            }
+                            if (Array.isArray(data)) {
+                                newFetchedOptions[component.id] = data;
+                            }
+                            else if (typeof data === 'string') {
+                                newFetchedOptions[component.id] = [data];
+                            }
+                            setFetchedOptions(prev => ({ ...prev, [component.id]: newFetchedOptions[component.id] }));
+                            // Refresh any existing dropdowns with this component ID
+                            refreshComponentDropdowns(component.id, data);
+                        }).catch((err) => {
+                            console.error(`DataManager fetch error for ${component.id}:`, err);
+                            newFetchedOptions[component.id] = [];
+                        });
+                    }
+                    catch (err) {
+                        console.error(`Setup error for ${component.id}:`, err);
+                        newFetchedOptions[component.id] = [];
+                    }
+                }
+            }
+        });
+        fetchAbortControllers.current = newAbortControllers;
+        // Cleanup on unmount
+        return () => {
+            Object.values(newAbortControllers).forEach(controller => controller.abort());
+        };
+    }, [componentFields]);
+    // Helper function to refresh dropdowns when data is fetched
+    const refreshComponentDropdowns = (componentId, data) => {
+        setTimeout(() => {
+            // Find all dropdown instances with this component ID
+            const dropdownElements = document.querySelectorAll(`input[data-component-id="${componentId}"]`);
+            dropdownElements.forEach(element => {
+                const dropdown = getComponent(element, 'dropdownlist');
+                if (dropdown) {
+                    try {
+                        const transformedData = (Array.isArray(data) ? data : [data]).map(opt => {
+                            if (typeof opt === 'string') {
+                                return { text: opt, value: opt };
+                            }
+                            else if (opt && typeof opt === 'object' && 'value' in opt) {
+                                return {
+                                    text: opt.label || opt.text || opt.value,
+                                    value: opt.value
+                                };
+                            }
+                            return { text: String(opt), value: String(opt) };
+                        });
+                        dropdown.dataSource = transformedData;
+                        dropdown.refresh();
+                    }
+                    catch (err) {
+                        console.error(`Error refreshing dropdown for ${componentId}:`, err);
+                    }
+                }
+            });
+        }, 0);
+    };
+    const qbRefs = {
+        visible: useRef(null),
+        hidden: useRef(null),
+        readOnly: useRef(null),
+        disabled: useRef(null),
+        required: useRef(null),
+        setValue: useRef(null)
+    };
+    const buildColumnsForQueryBuilder = (qbRef) => {
+        return componentFields
+            .filter(c => {
+            // Exclude current component to prevent self-reference
+            if (excludeFieldId && c.id === excludeFieldId) {
+                return false;
+            }
+            // Exclude child components to prevent circular dependencies
+            if (excludeChildIds.includes(c.id)) {
+                return false;
+            }
+            // Exclude non-data component types (layout, display-only, action components)
+            const excludedTypes = [
+                'imageeditor',
+                'richtexteditor',
+                'datagrid',
+                'splitbutton',
+                'button',
+                'message',
+                'panel',
+                'table',
+                'tabs',
+                'card',
+                'statichtml',
+                'signature',
+                'fileupload'
+            ];
+            // Case-insensitive comparison
+            return !excludedTypes.includes(c.type.toLowerCase());
+        })
+            .map((component) => {
+            const fieldType = inferFieldType(component);
+            const isArray = isArrayField(component);
+            // Define operators based on field type
+            let operators = [];
+            // Special handling for array-like fields (multiselect, checkboxGroup)
+            if (isArray) {
+                operators = [
+                    { key: 'Is Empty', value: 'isempty' },
+                    { key: 'Is Not Empty', value: 'isnotempty' },
+                    { key: 'Contains', value: 'contains' },
+                    { key: 'Not Contains', value: 'notcontains' }
+                ];
+            }
+            else {
+                // Standard operators for non-array fields
+                switch (fieldType) {
+                    case 'number':
+                        operators = [
+                            { key: 'Equal', value: 'equal' },
+                            { key: 'Not Equal', value: 'notequal' },
+                            { key: 'Greater than', value: 'greaterthan' },
+                            { key: 'Less than', value: 'lessthan' },
+                            { key: 'Greater than or equal', value: 'greaterthanorequal' },
+                            { key: 'Less than or equal', value: 'lessthanorequal' }
+                        ];
+                        break;
+                    case 'date':
+                        operators = [
+                            { key: 'Is Empty', value: 'isempty' },
+                            { key: 'Is Not Empty', value: 'isnotempty' },
+                            { key: 'Equal', value: 'equal' },
+                            { key: 'Not Equal', value: 'notequal' },
+                            { key: 'Greater than', value: 'dategreaterthan' },
+                            { key: 'Less than', value: 'datelessthan' }
+                        ];
+                        break;
+                    case 'boolean':
+                        operators = [
+                            { key: 'Equal', value: 'equal' },
+                            { key: 'Not Equal', value: 'notequal' }
+                        ];
+                        break;
+                    default: // 'string'
+                        if (component.type === 'time') {
+                            operators = [
+                                { key: 'Is Empty', value: 'isempty' },
+                                { key: 'Is Not Empty', value: 'isnotempty' },
+                                { key: 'Equal', value: 'equal' },
+                                { key: 'Not Equal', value: 'notequal' },
+                                { key: 'Greater than', value: 'timegreaterthan' },
+                                { key: 'Less than', value: 'timelessthan' }
+                            ];
+                        }
+                        else if (component.type === 'dateTime') {
+                            operators = [
+                                { key: 'Is Empty', value: 'isempty' },
+                                { key: 'Is Not Empty', value: 'isnotempty' },
+                                { key: 'Equal', value: 'equal' },
+                                { key: 'Not Equal', value: 'notequal' },
+                                { key: 'Greater than', value: 'datetimegreaterthan' },
+                                { key: 'Less than', value: 'datetimelessthan' }
+                            ];
+                        }
+                        else {
+                            // Standard string operators
+                            operators = [
+                                { key: 'Is Empty', value: 'isempty' },
+                                { key: 'Is Not Empty', value: 'isnotempty' },
+                                { key: 'Equal', value: 'equal' },
+                                { key: 'Not Equal', value: 'notequal' },
+                                { key: 'Starts With', value: 'startswith' },
+                                { key: 'Not Starts With', value: 'doesnotstartswith' },
+                                { key: 'Contains', value: 'contains' },
+                                { key: 'Not Contains', value: 'notcontains' },
+                            ];
+                        }
+                }
+            }
+            // Build column configuration
+            const column = {
+                field: component.id,
+                label: component.label || component.id,
+                type: fieldType,
+                format: fieldType === 'date' ? 'MM/dd/yyyy' : undefined,
+                operators
+            };
+            // Determine if component should use column template
+            const usesTemplate = hasSelectableOptions(component)
+                || component.type === 'date'
+                || component.type === 'time'
+                || component.type === 'dateTime'
+                || component.type === 'dateRange';
+            // For fields with options or date/time types, add column template for custom input widget
+            if (usesTemplate) {
+                column.template = createColumnTemplate(component, qbRef, fetchedOptions);
+            }
+            // For array fields with options not using template, provide values for dropdown selection
+            else if (isArray && component.options && Array.isArray(component.options)) {
+                // Transform options to format QueryBuilder expects
+                const values = component.options.map(opt => {
+                    if (typeof opt === 'string') {
+                        return opt;
+                    }
+                    else if (opt && typeof opt === 'object' && 'value' in opt) {
+                        return opt.value;
+                    }
+                    return String(opt);
+                });
+                column.values = values;
+            }
+            return column;
+        });
+    };
+    const handleAddRule = () => {
+        setActiveConditionType('visibleWhen');
+        setIsDialogOpen(true);
+    };
+    const handleDialogClose = () => {
+        setIsDialogOpen(false);
+    };
+    const handleSaveConditions = () => {
+        const updatedConditions = [];
+        const state = conditionsRef.current;
+        if (state.visibleWhen?.rules?.length > 0)
+            updatedConditions.push('visibleWhen');
+        if (state.hideWhen?.rules?.length > 0)
+            updatedConditions.push('hideWhen');
+        if (state.readOnlyWhen?.rules?.length > 0)
+            updatedConditions.push('readOnlyWhen');
+        if (state.disabledWhen?.rules?.length > 0)
+            updatedConditions.push('disabledWhen');
+        if (state.requiredWhen?.rules?.length > 0)
+            updatedConditions.push('requiredWhen');
+        if (state.setValueWhen?.condition?.rules?.length > 0)
+            updatedConditions.push('setValueWhen');
+        if (state.choiceBasedField)
+            updatedConditions.push('choiceBasedField');
+        if (state.conditionalData && Array.isArray(state.conditionalData) && state.conditionalData.length > 0)
+            updatedConditions.push('conditionalData');
+        setSavedConditions(updatedConditions);
+        setIsDialogOpen(false);
+        notifyParent(conditionsRef.current);
+    };
+    const handleEditCondition = (conditionType) => {
+        setActiveConditionType(conditionType);
+        setIsDialogOpen(true);
+    };
+    const handleDeleteCondition = (conditionType) => {
+        const type = conditionType;
+        updateCondition(type, type === 'setValueWhen' ? { value: undefined } : undefined);
+        setSavedConditions(savedConditions.filter(c => c !== conditionType));
+        handleSaveConditions();
+    };
+    const getConditionLabel = (type) => {
+        const labels = {
+            visibleWhen: l10n.getConstant('conditionalVisibility') || 'Conditional Visibility',
+            hideWhen: l10n.getConstant('conditionalHide') || 'Conditional Hide',
+            readOnlyWhen: l10n.getConstant('conditionalReadOnly') || 'Conditional Read-Only',
+            disabledWhen: l10n.getConstant('conditionalDisable') || 'Conditional Disable',
+            requiredWhen: l10n.getConstant('conditionalRequired') || 'Conditional Required',
+            setValueWhen: l10n.getConstant('conditionalSetValue') || 'Set Value When',
+            choiceBasedField: l10n.getConstant('choiceBasedField') || 'Choice-Based Field',
+            conditionalData: l10n.getConstant('conditionalData') || 'Conditional Data'
+        };
+        return labels[type] || type;
+    };
+    const conditionListData = supportedConditions
+        .filter(c => {
+        if (c === 'conditionalData') {
+            return componentForEdit?.type === 'dataGrid';
+        }
+        return true;
+    })
+        .map(type => ({
+        text: getConditionLabel(type),
+        id: type
+    }));
+    const handleVisibilityRuleChange = (_args) => {
+        if (qbRefs.visible.current) {
+            const rule = qbRefs.visible.current.getValidRules(qbRefs.visible.current.rule);
+            updateCondition('visibleWhen', rule);
+        }
+    };
+    const handleHideRuleChange = (_args) => {
+        if (qbRefs.hidden.current) {
+            const rule = qbRefs.hidden.current.getValidRules(qbRefs.hidden.current.rule);
+            updateCondition('hideWhen', rule);
+        }
+    };
+    const handleReadOnlyRuleChange = (_args) => {
+        if (qbRefs.readOnly.current) {
+            const rule = qbRefs.readOnly.current.getValidRules(qbRefs.readOnly.current.rule);
+            updateCondition('readOnlyWhen', rule);
+        }
+    };
+    const handleDisabledRuleChange = (_args) => {
+        if (qbRefs.disabled.current) {
+            const rule = qbRefs.disabled.current.getValidRules(qbRefs.disabled.current.rule);
+            updateCondition('disabledWhen', rule);
+        }
+    };
+    const handleRequiredRuleChange = (_args) => {
+        if (qbRefs.required.current) {
+            const rule = qbRefs.required.current.getValidRules(qbRefs.required.current.rule);
+            updateCondition('requiredWhen', rule);
+        }
+    };
+    const handleSetValueRuleChange = (_args) => {
+        if (qbRefs.setValue.current) {
+            const rule = qbRefs.setValue.current.getValidRules(qbRefs.setValue.current.rule);
+            updateCondition('setValueWhen', { ...conditionsRef.current.setValueWhen, condition: rule });
+        }
+    };
+    const handleSetValueValueChange = (e) => {
+        // Handle Syncfusion component events (which pass value via event object)
+        const newValue = e.target?.value !== undefined ? e.target.value : (e.value !== undefined ? e.value : '');
+        updateCondition('setValueWhen', { ...conditionsRef.current.setValueWhen, value: newValue });
+    };
+    const handleChoiceBasedFieldChange = (rule) => {
+        updateCondition('choiceBasedField', rule);
+    };
+    const updateCondition = (type, rule) => {
+        conditionsRef.current = { ...conditionsRef.current, [type]: rule };
+    };
+    const notifyParent = (cond) => {
+        const finalConditions = {};
+        // Only include supported conditions that have rules defined
+        if (supportedConditions.includes('visibleWhen') &&
+            cond.visibleWhen && cond.visibleWhen.rules && cond.visibleWhen.rules.length > 0) {
+            finalConditions.visibleWhen = cond.visibleWhen;
+        }
+        if (supportedConditions.includes('hideWhen') &&
+            cond.hideWhen && cond.hideWhen.rules && cond.hideWhen.rules.length > 0) {
+            finalConditions.hideWhen = cond.hideWhen;
+        }
+        if (supportedConditions.includes('readOnlyWhen') &&
+            cond.readOnlyWhen && cond.readOnlyWhen.rules && cond.readOnlyWhen.rules.length > 0) {
+            finalConditions.readOnlyWhen = cond.readOnlyWhen;
+        }
+        if (supportedConditions.includes('disabledWhen') &&
+            cond.disabledWhen && cond.disabledWhen.rules && cond.disabledWhen.rules.length > 0) {
+            finalConditions.disabledWhen = cond.disabledWhen;
+        }
+        if (supportedConditions.includes('requiredWhen') &&
+            cond.requiredWhen && cond.requiredWhen.rules && cond.requiredWhen.rules.length > 0) {
+            finalConditions.requiredWhen = cond.requiredWhen;
+        }
+        if (supportedConditions.includes('setValueWhen') &&
+            cond.setValueWhen && cond.setValueWhen.condition && cond.setValueWhen.condition.rules && cond.setValueWhen.condition.rules.length > 0 && cond.setValueWhen.value !== undefined && cond.setValueWhen.value !== '') {
+            finalConditions.setValueWhen = {
+                condition: cond.setValueWhen.condition,
+                value: cond.setValueWhen.value
+            };
+        }
+        if (supportedConditions.includes('choiceBasedField') && cond.choiceBasedField) {
+            finalConditions.choiceBasedField = cond.choiceBasedField;
+        }
+        if (supportedConditions.includes('conditionalData') &&
+            cond.conditionalData && Array.isArray(cond.conditionalData) &&
+            cond.conditionalData.length > 0) {
+            // Only include rules with valid conditions
+            const validRules = cond.conditionalData.filter(rule => {
+                if (!rule.condition || !rule.dataSource) {
+                    return false;
+                }
+                // Check if condition is composite (has rules array) or simple (has field)
+                const hasRules = 'rules' in rule.condition && Array.isArray(rule.condition.rules) && rule.condition.rules.length > 0;
+                const isSimple = 'field' in rule.condition;
+                return hasRules || isSimple;
+            });
+            if (validRules.length > 0) {
+                finalConditions.conditionalData = validRules;
+            }
+        }
+        onChange(finalConditions);
+    };
+    // Update internal ref when existingConditions prop changes
+    useEffect(() => {
+        conditionsRef.current = {
+            visibleWhen: existingConditions?.visibleWhen,
+            hideWhen: existingConditions?.hideWhen,
+            readOnlyWhen: existingConditions?.readOnlyWhen,
+            disabledWhen: existingConditions?.disabledWhen,
+            requiredWhen: existingConditions?.requiredWhen,
+            setValueWhen: existingConditions?.setValueWhen,
+            choiceBasedField: existingConditions?.choiceBasedField,
+            conditionalData: existingConditions?.conditionalData
+        };
+    }, [existingConditions]);
+    const visibleColumns = buildColumnsForQueryBuilder(qbRefs.visible);
+    const hiddenColumns = buildColumnsForQueryBuilder(qbRefs.hidden);
+    const readOnlyColumns = buildColumnsForQueryBuilder(qbRefs.readOnly);
+    const disabledColumns = buildColumnsForQueryBuilder(qbRefs.disabled);
+    const requiredColumns = buildColumnsForQueryBuilder(qbRefs.required);
+    const setValueColumns = buildColumnsForQueryBuilder(qbRefs.setValue);
+    useEffect(() => {
+        if (isDialogOpen) {
+            setShowStyles(true);
+        }
+        else {
+            const timer = setTimeout(() => {
+                setShowStyles(false);
+            }, 400); // Remove styles after 300ms
+            return () => clearTimeout(timer);
+        }
+    }, [isDialogOpen]);
+    const footerTemplate = useCallback(() => {
+        return (_jsxs("div", { className: "import-dialog-footer", children: [_jsx(ButtonComponent, { cssClass: "e-flat", onClick: handleDialogClose, "aria-label": l10n.getConstant('cancel'), children: l10n.getConstant('cancel') }), _jsx(ButtonComponent, { cssClass: "e-primary import-btn", onClick: handleSaveConditions, "aria-label": l10n.getConstant('save'), children: l10n.getConstant('save') })] }));
+    }, [handleDialogClose, handleSaveConditions]);
+    return (_jsxs("div", { className: "conditions-editor-wrapper", "aria-label": l10n.getConstant('conditions'), children: [savedConditions.length === 0 ? (_jsxs("div", { style: { padding: '0.75rem 1rem' }, children: [_jsx("p", { style: { fontSize: '13px', color: 'rgb(var(--sf-color-on-surface-variant))', margin: '0 0 12px 0' }, children: l10n.getConstant('conditionsEditorLabel') }), _jsx(ButtonComponent, { onClick: handleAddRule, cssClass: "e-outline", style: { width: '100%' }, iconCss: "e-icons e-plus", content: l10n.getConstant('addRule'), "aria-label": l10n.getConstant('addRule') })] })) : (
+            // Display saved conditions with Edit/Delete buttons
+            _jsxs("div", { style: { padding: '0.75rem 1.2rem' }, className: "conditions-editor-dialog", role: "region", "aria-label": l10n.getConstant('conditions'), children: [_jsxs("div", { style: { marginBottom: '12px' }, children: [_jsx("p", { id: "conditions-editor-description", style: { fontSize: '13px', color: 'rgb(var(--sf-color-on-surface-variant))', margin: '0 0 12px 0' }, children: l10n.getConstant('conditionsEditorLabel') }), _jsx(ButtonComponent, { onClick: handleAddRule, cssClass: "e-outline", style: { width: '100%' }, iconCss: "e-icons e-plus", content: l10n.getConstant('addRule'), "aria-label": l10n.getConstant('addRule') })] }), _jsx(ListBoxComponent, { dataSource: savedConditions.map(c => ({ text: getConditionLabel(c), id: c })), fields: { text: 'text', value: 'id' }, selectionSettings: { mode: 'Single' }, value: [], itemTemplate: (props) => (_jsxs("div", { style: {
+                                display: 'flex',
+                                alignItems: 'center',
+                                justifyContent: 'space-between',
+                                padding: '10px 12px',
+                                borderRadius: '4px',
+                                fontSize: '14px'
+                            }, children: [_jsx("div", { style: { display: 'flex', alignItems: 'center', gap: '8px' }, children: _jsx("span", { children: props.text }) }), _jsxs("div", { style: { display: 'flex', gap: '8px' }, children: [_jsx(ButtonComponent, { onClick: (e) => {
+                                                e.stopPropagation();
+                                                handleEditCondition(props.id);
+                                            }, cssClass: 'e-flat', iconCss: "e-icons e-edit", title: "Edit", "aria-label": `${l10n.getConstant('edit')} ${props.text}` }), _jsx(ButtonComponent, { onClick: (e) => {
+                                                e.stopPropagation();
+                                                handleDeleteCondition(props.id);
+                                            }, cssClass: 'e-flat', iconCss: "e-icons e-trash", title: "Delete", "aria-label": `${l10n.getConstant('delete')} ${props.text}` })] })] })) })] })), _jsx("div", { id: "targetElement", "aria-hidden": !isDialogOpen, style: showStyles ? {
+                    position: 'fixed',
+                    top: '48px',
+                    left: 0,
+                    height: '100dvh',
+                    width: '100dvw'
+                } : {}, children: _jsx(DialogComponent, { className: "conditions-editor-dialog", isModal: true, visible: isDialogOpen, close: handleDialogClose, showCloseIcon: true, target: '#targetElement', closeOnEscape: true, header: "Conditions", width: "990px", height: "80vh", footerTemplate: footerTemplate, animationSettings: { effect: 'FadeZoom' }, children: _jsxs("div", { style: { display: 'flex', height: '100%' }, children: [_jsx("div", { role: "navigation", "aria-label": l10n.getConstant('conditions'), style: {
+                                    width: '280px',
+                                    borderRight: '1px solid #e0e0e0',
+                                    overflowY: 'auto',
+                                    maxHeight: '60vh',
+                                    padding: '20px 10px 0 0'
+                                }, children: _jsx(ListBoxComponent, { dataSource: conditionListData, fields: { text: 'text', value: 'id' }, change: (e) => {
+                                        if (e.value) {
+                                            setActiveConditionType(e.value[0]);
+                                        }
+                                    }, value: [activeConditionType], selectionSettings: { mode: 'Single' }, itemTemplate: (props) => (_jsx("div", { style: {
+                                            padding: '12px 16px',
+                                            cursor: 'pointer',
+                                            fontSize: '14px',
+                                            borderRadius: '6px',
+                                            transition: 'all 0.2s ease',
+                                            marginBottom: '4px'
+                                        }, children: props.text })) }) }), _jsxs("div", { style: {
+                                    flex: 1,
+                                    padding: '16px',
+                                    overflowY: 'auto',
+                                    maxHeight: '60vh'
+                                }, role: "region", "aria-live": "polite", "aria-label": activeConditionType, children: [activeConditionType === 'visibleWhen' && supportedConditions.includes('visibleWhen') && (_jsxs("div", { children: [_jsx("h4", { style: { marginTop: 0, marginBottom: '12px' }, children: l10n.getConstant('conditionalVisibility') }), _jsx("p", { style: { fontSize: '13px', color: 'rgb(var(--sf-color-on-surface-variant))', marginBottom: '12px' }, children: l10n.getConstant('conditionalVisibilityDescription') }), _jsx("div", { tabIndex: -1, "aria-describedby": "conditional-visibility-description", "aria-label": l10n.getConstant('conditionalVisibility'), children: _jsx(QueryBuilderComponent, { ref: qbRefs.visible, dataSource: [], columns: visibleColumns, rule: conditionsRef.current.visibleWhen, ruleChange: handleVisibilityRuleChange }) })] })), activeConditionType === 'hideWhen' && supportedConditions.includes('hideWhen') && (_jsxs("div", { children: [_jsx("h4", { style: { marginTop: 0, marginBottom: '12px' }, children: l10n.getConstant('conditionalHide') }), _jsx("p", { style: { fontSize: '13px', color: 'rgb(var(--sf-color-on-surface-variant))', marginBottom: '12px' }, children: l10n.getConstant('conditionalHideDescription') }), _jsx("div", { tabIndex: -1, "aria-describedby": "conditional-readonly-description", "aria-label": l10n.getConstant('conditionalHideDescription'), children: _jsx(QueryBuilderComponent, { ref: qbRefs.hidden, dataSource: [], columns: hiddenColumns, rule: conditionsRef.current.hideWhen, ruleChange: handleHideRuleChange }) })] })), activeConditionType === 'readOnlyWhen' && supportedConditions.includes('readOnlyWhen') && (_jsxs("div", { children: [_jsx("h4", { style: { marginTop: 0, marginBottom: '12px' }, children: l10n.getConstant('conditionalReadOnly') }), _jsx("p", { style: { fontSize: '13px', color: 'rgb(var(--sf-color-on-surface-variant))', marginBottom: '12px' }, children: l10n.getConstant('conditionalReadOnlyDescription') }), _jsx("div", { tabIndex: -1, "aria-describedby": "conditional-readonly-description", "aria-label": l10n.getConstant('conditionalReadOnlyDescription'), children: _jsx(QueryBuilderComponent, { ref: qbRefs.readOnly, dataSource: [], columns: readOnlyColumns, rule: conditionsRef.current.readOnlyWhen, ruleChange: handleReadOnlyRuleChange }) })] })), activeConditionType === 'disabledWhen' && supportedConditions.includes('disabledWhen') && (_jsxs("div", { children: [_jsx("h4", { style: { marginTop: 0, marginBottom: '12px' }, children: l10n.getConstant('conditionalDisable') }), _jsx("p", { style: { fontSize: '13px', color: 'rgb(var(--sf-color-on-surface-variant))', marginBottom: '12px' }, children: l10n.getConstant('conditionalDisableDescription') }), _jsx("div", { tabIndex: -1, "aria-describedby": "conditional-readonly-description", "aria-label": l10n.getConstant('conditionalDisableDescription'), children: _jsx(QueryBuilderComponent, { ref: qbRefs.disabled, dataSource: [], columns: disabledColumns, rule: conditionsRef.current.disabledWhen, ruleChange: handleDisabledRuleChange }) })] })), activeConditionType === 'requiredWhen' && supportedConditions.includes('requiredWhen') && (_jsxs("div", { children: [_jsx("h4", { style: { marginTop: 0, marginBottom: '12px' }, children: l10n.getConstant('conditionalRequired') }), _jsx("p", { style: { fontSize: '13px', color: 'rgb(var(--sf-color-on-surface-variant))', marginBottom: '12px' }, children: l10n.getConstant('conditionalRequiredDescription') }), _jsx("div", { tabIndex: -1, "aria-describedby": "conditional-readonly-description", "aria-label": l10n.getConstant('conditionalRequiredDescription'), children: _jsx(QueryBuilderComponent, { ref: qbRefs.required, dataSource: [], columns: requiredColumns, rule: conditionsRef.current.requiredWhen, ruleChange: handleRequiredRuleChange }) })] })), activeConditionType === 'setValueWhen' && supportedConditions.includes('setValueWhen') && (_jsxs("div", { children: [_jsx("h4", { style: { marginTop: 0, marginBottom: '12px' }, children: l10n.getConstant('conditionalSetValue') }), _jsx("p", { style: { fontSize: '13px', color: 'rgb(var(--sf-color-on-surface-variant))', marginBottom: '12px' }, children: l10n.getConstant('conditionalSetValueDescription') }), _jsx("div", { tabIndex: -1, "aria-describedby": "conditional-readonly-description", "aria-label": l10n.getConstant('conditionalSetValueDescription'), children: _jsx(QueryBuilderComponent, { ref: qbRefs.setValue, dataSource: [], columns: setValueColumns, rule: conditionsRef.current.setValueWhen?.condition, ruleChange: handleSetValueRuleChange }) }), _jsx("div", { style: { marginTop: '16px' }, children: _jsx(ValueRenderer, { componentForEdit: componentForEdit, conditionsRef: conditionsRef, handleSetValueValueChange: handleSetValueValueChange }) })] })), activeConditionType === 'choiceBasedField' && supportedConditions.includes('choiceBasedField') && (_jsxs("div", { children: [_jsx("h4", { style: { marginTop: 0, marginBottom: '12px' }, children: l10n.getConstant('choiceBasedField') }), _jsx("p", { style: { fontSize: '13px', color: 'rgb(var(--sf-color-on-surface-variant))', marginBottom: '12px' }, children: l10n.getConstant('choiceBasedFieldDescription') }), componentForEdit && (componentForEdit.type === 'dropdown' || componentForEdit.type === 'multiselect') ? (_jsx(ChoiceBasedFieldEditor, { componentForEdit: componentForEdit, componentFields: componentFields, existingRule: conditionsRef.current.choiceBasedField, onChange: handleChoiceBasedFieldChange })) : (_jsx("div", { className: "e-info", style: { padding: '10px', backgroundColor: '#e7f3ff', border: '1px solid #0066cc', borderRadius: '4px' }, role: "alert", "aria-live": "polite", children: l10n.getConstant('choiceBasedOnlyForDropdown') || 'Choice-Based Field Rules apply only to Dropdown and MultiSelect components' }))] })), activeConditionType === 'conditionalData' && supportedConditions.includes('conditionalData') && componentForEdit?.type === 'dataGrid' && (_jsxs("div", { role: "group", "aria-labelledby": "conditional-data-heading", "aria-describedby": "conditional-data-description", children: [_jsx("h4", { style: { marginTop: 0, marginBottom: '12px' }, children: l10n.getConstant('conditionalData') }), _jsx("p", { style: { fontSize: '13px', color: 'rgb(var(--sf-color-on-surface-variant))', marginBottom: '12px' }, children: l10n.getConstant('conditionalDataDescription') }), _jsx(ConditionDataEditor, { componentFields: componentFields, componentForEdit: componentForEdit, excludeFieldId: excludeFieldId, existingRules: conditionsRef.current.conditionalData || componentForEdit?.conditions?.conditionalData, onChange: (rules) => {
+                                                    updateCondition('conditionalData', rules);
+                                                } })] }))] }, savedConditions.join(','))] }) }) })] }));
+};

package/src/utils/CustomAccordion.d.ts

@@ -0,0 +1,13 @@
+import React, { type ReactNode } from 'react';
+interface AccordionWrapperProps {
+    title: string;
+    children: ReactNode;
+}
+/**
+ * Accordion Wrapper Component
+ * Wraps any content in a collapsible accordion with expand/collapse icon
+ * @param title - Accordion header title
+ * @param children - Content to display inside accordion
+ */
+export declare const AccordionWrapper: React.FC<AccordionWrapperProps>;
+export {};

package/src/utils/CustomAccordion.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+/**
+ * Accordion Wrapper Component
+ * Wraps any content in a collapsible accordion with expand/collapse icon
+ * @param title - Accordion header title
+ * @param children - Content to display inside accordion
+ */
+export const AccordionWrapper = ({ title, children }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    return (_jsxs("div", { className: 'custom-accordion', style: {
+            overflow: 'hidden'
+        }, children: [_jsxs("div", { onClick: () => setIsOpen(!isOpen), role: "button", className: 'custom-accordion-header', tabIndex: 0, "aria-expanded": isOpen, "aria-labelledby": `accordion-content-${title}`, "aria-label": title, onKeyDown: (e) => {
+                    if (e.key === 'Enter' || e.key === ' ') {
+                        e.preventDefault();
+                        setIsOpen(!isOpen);
+                    }
+                }, style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: '10px',
+                    height: '45px',
+                    cursor: 'pointer',
+                    userSelect: 'none',
+                    borderBottom: isOpen ? 'none' : '1px solid rgb(var(--sf-color-line-color))'
+                }, onMouseEnter: (e) => {
+                    e.currentTarget.style.backgroundColor = 'rgba(0, 0, 0, 0.04)';
+                }, onMouseLeave: (e) => {
+                    e.currentTarget.style.backgroundColor = 'rgb(var(--sf-color-surface))';
+                }, children: [_jsx("span", { style: { marginLeft: '10px' }, className: `e-icons ${isOpen ? 'e-chevron-down' : 'e-chevron-right'}`, "aria-hidden": "true" }), _jsx("span", { style: {
+                            fontWeight: 500,
+                            fontSize: '14px',
+                            color: 'var(--jsonview-text-color)'
+                        }, children: title })] }), isOpen && (_jsx("div", { id: `accordion-content-${title}`, role: "region", "aria-label": title, style: isOpen ? {
+                    padding: '0.5rem 1rem 1rem',
+                    borderBottom: '1px solid rgb(var(--sf-color-line-color))'
+                } : undefined, children: children }))] }));
+};

package/src/utils/CustomValidationEditor.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { type CustomValidationRule } from '../types/FormSchema';
+import { type FormComponent } from '../types/FormSchema';
+export interface CustomValidationEditorProps {
+    componentFields: FormComponent[];
+    excludeFieldId?: string;
+    existingRules?: CustomValidationRule[];
+    values?: any;
+    onChange: (rules: CustomValidationRule[]) => void;
+}
+export declare const CustomValidationEditor: React.FC<CustomValidationEditorProps>;