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

package/src/utils/ConditionsEditor.js

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

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

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

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