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

package/src/components/layout/RightPane.js

@@ -1,370 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import React, { useEffect, useRef, useState, useMemo } from 'react';
-import { TabComponent, TabItemDirective, TabItemsDirective } from '@syncfusion/ej2-react-navigations';
-import { PropertyGroupRenderer } from '../../utils/PropertyRenderer';
-import { useLocalization } from '../../context/LocalizationContext';
-import { FormSettingsPanel } from '../../utils/FormSettingsPanel';
-import { useFormSchema } from '../../context/FormSchemaContext';
-import { ConditionsEditor } from '../../utils/ConditionsEditor';
-import { collectAvailableFieldNames, extractAllDescendantIds } from '../../../Common/utils';
-/**
- * Extract all form field names from components recursively
- *
- * Traverses the form schema and extracts all data field names (excluding layout containers).
- * Used to populate the field list for conditional rule authoring.
- *
- * @spec CONDITIONAL-VALIDATION.md - PropertyDialog integration
- * @requirement Task 7.3-7.5: Extract all form field names recursively
- *
- * @param components - Array of FormComponent from schema
- * @returns Array of FormComponent objects representing data fields only
- */
-function extractAllFormFieldNames(components) {
-    const fields = [];
-    // Layout component types to exclude (non-data fields)
-    const layoutTypes = ['panel', 'table', 'tabs', 'button', 'message'];
-    function traverse(comps) {
-        for (const comp of comps) {
-            // Skip layout containers and non-data components
-            if (!layoutTypes.includes(comp.type)) {
-                fields.push(comp);
-            }
-            // Recursively traverse nested structures
-            if (comp.children && Array.isArray(comp.children)) {
-                traverse(comp.children);
-            }
-            // Handle table cells (3D array: [rows][columns][components])
-            if (comp.tableCells && Array.isArray(comp.tableCells)) {
-                comp.tableCells.forEach((row) => {
-                    if (Array.isArray(row)) {
-                        row.forEach((cell) => {
-                            if (Array.isArray(cell)) {
-                                traverse(cell);
-                            }
-                        });
-                    }
-                });
-            }
-            // Handle tab items
-            if (comp.tabItems && Array.isArray(comp.tabItems)) {
-                comp.tabItems.forEach((tabItem) => {
-                    if (tabItem.content && Array.isArray(tabItem.content)) {
-                        traverse(tabItem.content);
-                    }
-                });
-            }
-        }
-    }
-    traverse(components);
-    return fields;
-}
-const shouldShowPropertyInMode = (property, currentMode) => {
-    // If property requires developer mode and we're in Simple mode, hide it
-    if (property.mode === 'developer' && currentMode === 'Simple') {
-        return false;
-    }
-    return true;
-};
-/**
- * RightPane Component
- */
-export const RightPane = ({ mode, componentType, configData, formSettingsConfig, existingValues = {}, formSettings, onSave, onPropertyChanged, onClose, builderMode }) => {
-    // Store ALL values in refs - ZERO state in this component
-    const propertyValuesRef = useRef({});
-    const initializedRef = useRef(false);
-    const savedButtonsGroupsRef = useRef(null);
-    const allowMultipleValueRef = useRef(undefined);
-    const columnsValueRef = useRef(null);
-    const { l10n } = useLocalization();
-    // Get form schema for extracting all field names (for Conditions tab)
-    const { formSchema } = useFormSchema();
-    // State to force re-render when needed (minimal)
-    const [, forceUpdate] = useState({});
-    // Get the component definition from the config
-    const componentDefinition = configData[componentType];
-    // Helper function to find current component in schema
-    const findCurrentComponent = (comps) => {
-        for (const comp of comps) {
-            if (comp.id === existingValues?.id)
-                return comp;
-            if (comp.children) {
-                const found = findCurrentComponent(comp.children);
-                if (found)
-                    return found;
-            }
-            if (comp.tableCells) {
-                for (const row of comp.tableCells) {
-                    for (const cell of row) {
-                        const found = findCurrentComponent(cell);
-                        if (found)
-                            return found;
-                    }
-                }
-            }
-            if (comp.tabItems) {
-                for (const tab of comp.tabItems) {
-                    if (tab.content) {
-                        const found = findCurrentComponent(tab.content);
-                        if (found)
-                            return found;
-                    }
-                }
-            }
-        }
-        return null;
-    };
-    // Get current component and its child IDs for conditions editor
-    const currentComponent = useMemo(() => findCurrentComponent(formSchema.components), [formSchema.components, existingValues?.id]);
-    const excludeChildIds = useMemo(() => currentComponent ? extractAllDescendantIds(currentComponent) : [], [currentComponent]);
-    // Initialize property values with defaults - only when sidebar opens
-    useEffect(() => {
-        if (componentDefinition) {
-            const values = {};
-            componentDefinition.groups.forEach((group) => {
-                group.properties.forEach((property) => {
-                    let value = property.default;
-                    // Handle Validation group properties
-                    if (group.name === 'Validation') {
-                        if (existingValues?.[property.key] !== undefined) {
-                            value = existingValues[property.key];
-                        }
-                        else {
-                            value = property.default;
-                        }
-                    }
-                    // Handle Layout group properties
-                    else if (group.name === 'Layout') {
-                        if (existingValues.layout?.[property.key] !== undefined) {
-                            value = existingValues.layout[property.key];
-                        }
-                        else if (existingValues[property.key] !== undefined) {
-                            value = existingValues[property.key];
-                        }
-                        else {
-                            value = property.default;
-                        }
-                    }
-                    // Handle all other groups
-                    else {
-                        if (existingValues[property.key] !== undefined) {
-                            value = existingValues[property.key];
-                        }
-                        else if (property.key === 'value' && existingValues.defaultValue !== undefined) {
-                            value = existingValues.defaultValue;
-                        }
-                        else if (property.key === 'rows' && existingValues.textareaRows !== undefined) {
-                            value = existingValues.textareaRows;
-                        }
-                        else {
-                            value = property.default;
-                        }
-                    }
-                    values[property.key] = value;
-                });
-            });
-            // Store in refs only (NO state)
-            propertyValuesRef.current = values;
-            initializedRef.current = true;
-            // Initialize allowMultiple state for button component
-            if (componentType === 'button') {
-                const initialAllowMultiple = values.allowMultiple ?? false;
-                allowMultipleValueRef.current = initialAllowMultiple;
-                savedButtonsGroupsRef.current = values.buttonsGroups || [];
-            }
-        }
-    }, [componentType, componentDefinition, existingValues]);
-    // Determine which properties should be visible based on allowMultiple flag
-    const shouldShowProperty = (propKey, allowMultiple) => {
-        if (allowMultiple) {
-            const visibleKeys = ['allowMultiple', 'name', 'buttonsGroups', 'gap', 'cssClass', 'width', 'position', 'size', 'conditions'];
-            return visibleKeys.includes(propKey);
-        }
-        else {
-            const visibleKeys = ['allowMultiple', 'name', 'buttonType', 'cssClass', 'disabled', 'iconCss', 'iconPosition', 'label', 'position', 'style', 'size', 'conditions'];
-            return visibleKeys.includes(propKey);
-        }
-    };
-    // Filter groups and properties based on visibility rules
-    const getFilteredGroups = (groups, allowMultiple) => {
-        return groups.map(group => ({
-            ...group,
-            properties: group.properties.filter(prop => shouldShowProperty(prop.key, allowMultiple))
-        })).filter(group => group.properties.length > 0);
-    };
-    const applyModeFiltering = (groups) => {
-        return groups.map(group => ({
-            ...group,
-            properties: group.properties.filter(prop => shouldShowPropertyInMode(prop, builderMode))
-        })).filter(group => group.properties.length > 0);
-    };
-    /**
-     * Filter lookup properties based on displayFormat selection
-     * When displayFormat is Radio or CheckboxGroup, remove specific properties
-     */
-    const getFilteredLookupGroups = (groups, displayFormat) => {
-        const isRadioOrCheckbox = ['Radio', 'Checkbox', 'CheckboxGroup'].includes(displayFormat);
-        if (!isRadioOrCheckbox) {
-            return groups; // No filtering needed for Dropdown and MultiSelect
-        }
-        // Properties to remove for Radio/CheckboxGroup
-        const removeFromDisplay = ['placeholder', 'showClearButton', 'readOnly', 'enableVirtualization', 'floatLabelType', 'popupHeight', 'popupWidth'];
-        const removeFromValidation = ['validateOn'];
-        return groups.map(group => {
-            let filteredProps = group.properties;
-            if (group.name === 'Display') {
-                filteredProps = filteredProps.filter(prop => !removeFromDisplay.includes(prop.key));
-            }
-            else if (group.name === 'Validation') {
-                filteredProps = filteredProps.filter(prop => !removeFromValidation.includes(prop.key));
-            }
-            else if (group.name === 'Conditions') {
-                // For Conditions, keep only conditionalReadonly if it exists
-                filteredProps = filteredProps.map(prop => {
-                    if (prop.key === 'conditions') {
-                        return {
-                            ...prop,
-                            supportedConditions: [
-                                "visibleWhen",
-                                "hideWhen",
-                                "requiredWhen",
-                                "setValueWhen",
-                                "disabledWhen"
-                            ]
-                        };
-                    }
-                    return prop;
-                });
-            }
-            return {
-                ...group,
-                properties: filteredProps
-            };
-        }).filter(group => group.properties.length > 0);
-    };
-    // Real-time property change - saves immediately on change
-    const handlePropertyChange = (key, value) => {
-        // Update ref immediately
-        propertyValuesRef.current = {
-            ...propertyValuesRef.current,
-            [key]: value,
-        };
-        // Handle allowMultiple toggle for button component
-        if (key === 'allowMultiple' && componentType === 'button') {
-            const prevAllowMultiple = allowMultipleValueRef.current;
-            allowMultipleValueRef.current = value;
-            if (value === false) {
-                savedButtonsGroupsRef.current = propertyValuesRef.current.buttonsGroups;
-                propertyValuesRef.current.buttonsGroups = [];
-            }
-            else {
-                propertyValuesRef.current.buttonsGroups = savedButtonsGroupsRef.current || [];
-            }
-            // Only re-render if visibility actually changed
-            if (prevAllowMultiple !== value) {
-                forceUpdate({});
-            }
-        }
-        // Track buttonsGroups changes when allowMultiple is true
-        if (key === 'buttonsGroups' && componentType === 'button' && allowMultipleValueRef.current === true) {
-            savedButtonsGroupsRef.current = value;
-        }
-        // Handle columns change for table component
-        if (key === 'columns' && componentType === 'table') {
-            const prevColumns = columnsValueRef.current;
-            columnsValueRef.current = value;
-            propertyValuesRef.current.columns = value;
-            // Only re-render if columns actually changed
-            if (prevColumns !== value) {
-                forceUpdate({});
-            }
-        }
-        const propertyDef = componentDefinition?.groups
-            .flatMap(g => g.properties)
-            .find(p => p.key === key);
-        const fieldLabel = propertyDef?.label || key;
-        const label = propertyValuesRef.current.label || '';
-        // FIRE the property changed event
-        if (onPropertyChanged) {
-            onPropertyChanged({
-                field: label,
-                property: fieldLabel,
-                value,
-                name: existingValues?.name
-            });
-        }
-        // AUTO-SAVE: Save to parent immediately on every change
-        // This triggers real-time updates to the form schema
-        const valuesToSave = { ...propertyValuesRef.current };
-        onSave(valuesToSave);
-    };
-    /**
-     * Handle conditions change from ConditionsEditor
-     *
-     * @spec CONDITIONAL-VALIDATION.md - PropertyDialog integration
-     * @requirement Task 7.10-7.11: Store condition changes and call preview callback
-     */
-    const handleConditionsChange = (conditions) => {
-        // Store conditions in the ref first
-        propertyValuesRef.current = {
-            ...propertyValuesRef.current,
-            conditions,
-        };
-        onSave(propertyValuesRef.current);
-    };
-    const handleClose = () => {
-        propertyValuesRef.current = {};
-        initializedRef.current = false;
-        savedButtonsGroupsRef.current = null;
-        allowMultipleValueRef.current = false;
-        columnsValueRef.current = null;
-        onClose();
-    };
-    // If component definition doesn't exist, show error
-    if (!componentDefinition && mode === 'component') {
-        return (_jsxs("div", { className: "right-sidebar-content", children: [_jsxs("div", { className: "sidebar-header", children: [_jsx("h3", { children: "Error" }), _jsx("button", { "aria-label": "Close panel", className: "close-btn", onClick: handleClose, title: "Close (Esc)", children: "\u2715" })] }), _jsx("div", { className: "sidebar-body", children: _jsxs("p", { style: { color: 'var(--sf-error-color, red)', padding: '1rem' }, children: ["Component definition not found for: ", componentType] }) })] }));
-    }
-    if (mode === 'formSettings') {
-        return (_jsx(FormSettingsPanel, { settings: formSettings, formSettingsConfig: formSettingsConfig, onSave: onSave }));
-    }
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "sidebar-header", children: [_jsx("h3", { children: l10n.getConstant('fieldSettings') }), _jsx("button", { "aria-label": "Close panel", className: "close-btn", onClick: handleClose, title: "Close (Esc)", children: "\u2715" })] }), _jsx("div", { className: `rightpane-property-content single-view`, role: "region", "aria-labelledby": "field-settings-heading", children: _jsx("div", { className: "properties-section", "aria-label": l10n.getConstant('fieldSettings'), children: _jsx("div", { className: "property-tabs-wrapper", children: _jsx(TabComponent, { className: "property-tabs", heightAdjustMode: "Auto", "aria-label": l10n.getConstant('fieldSettings'), animation: { previous: { effect: 'None' }, next: { effect: 'None' } }, children: _jsx(TabItemsDirective, { children: useMemo(() => {
-                                    let groupsToRender = componentDefinition.groups;
-                                    // Filter for button component based on allowMultiple
-                                    if (componentType === 'button') {
-                                        groupsToRender = getFilteredGroups(componentDefinition.groups, (allowMultipleValueRef.current || existingValues?.allowMultiple));
-                                    }
-                                    // Filter for lookup component based on displayFormat
-                                    else if (componentType === 'lookup') {
-                                        const displayFormat = propertyValuesRef.current?.lookUpConfig?.displayFormat || 'Dropdown';
-                                        groupsToRender = getFilteredLookupGroups(componentDefinition.groups, displayFormat);
-                                    }
-                                    groupsToRender = applyModeFiltering(groupsToRender);
-                                    return groupsToRender.map((group, index) => (_jsx(TabItemDirective, { header: { text: l10n.getConstant(group.name.toLowerCase()) }, content: () => {
-                                            // Special handling for Conditions group
-                                            if (group.name === 'Conditions') {
-                                                // Extract all form fields dynamically
-                                                const allFormFields = extractAllFormFieldNames(formSchema.components);
-                                                const conditionsProperty = group.properties.find(p => p.key === 'conditions');
-                                                const supportedConditions = conditionsProperty?.supportedConditions ||
-                                                    ['visibleWhen', 'readOnlyWhen', 'disabledWhen'];
-                                                return (_jsxs("div", { children: [_jsx(ConditionsEditor, { componentFields: allFormFields, excludeFieldId: existingValues?.id, componentForEdit: currentComponent || undefined, excludeChildIds: excludeChildIds, existingConditions: existingValues?.conditions, onChange: handleConditionsChange, supportedConditions: supportedConditions, builderMode: builderMode }, currentComponent?.options?.length), _jsx("input", { style: { opacity: 0, pointerEvents: 'none', width: 0, height: 0 }, "aria-hidden": "true", tabIndex: 0, onFocus: (e) => {
-                                                                const input = e.currentTarget;
-                                                                // Only forward focus the first time, then remove from tab order
-                                                                if (input.dataset.forwarded === 'true') {
-                                                                    return;
-                                                                }
-                                                                input.dataset.forwarded = 'true';
-                                                                input.tabIndex = -1;
-                                                                const btn = input.parentElement?.querySelector('.conditions-editor-wrapper button, .conditions-editor-wrapper [role="button"]');
-                                                                if (btn) {
-                                                                    btn.focus();
-                                                                }
-                                                            }, type: "text" })] }));
-                                            }
-                                            // Default: render PropertyGroupRenderer
-                                            return (_jsx(PropertyGroupRenderer, { groupName: group.name, properties: group.properties, existingValues: existingValues, initialValues: { ...propertyValuesRef.current,
-                                                    availableFields: collectAvailableFieldNames(formSchema.components)
-                                                }, onChange: handlePropertyChange, mode: builderMode }));
-                                        } }, `tab-${componentType}-${index}`)));
-                                }, [componentType, allowMultipleValueRef.current, propertyValuesRef.current?.lookUpConfig?.displayFormat, componentDefinition.groups]) }) }, `tabs-${componentType}-${columnsValueRef.current}-${propertyValuesRef.current}`) }) }) })] }));
-};
-export default React.memo(RightPane);

package/src/components/theme/ThemeSwitcher.d.ts

@@ -1,14 +0,0 @@
-/**
- * ThemeSwitcher - Dropdown component for selecting Syncfusion theme variants
- */
-import React from 'react';
-import type { ThemeVariant } from './theme-constant';
-interface ThemeSwitcherProps {
-    currentTheme: ThemeVariant;
-    setTheme: (variant: ThemeVariant) => void;
-}
-/**
- * ThemeSwitcher component renders a DropDownButton for theme selection
- */
-export declare function ThemeSwitcher({ currentTheme, setTheme }: ThemeSwitcherProps): React.JSX.Element;
-export {};

package/src/components/theme/ThemeSwitcher.js

@@ -1,24 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { DropDownButtonComponent } from '@syncfusion/ej2-react-splitbuttons';
-import { AVAILABLE_THEMES } from './theme-constant';
-/**
- * ThemeSwitcher component renders a DropDownButton for theme selection
- */
-export function ThemeSwitcher({ currentTheme, setTheme }) {
-    // Convert theme options to DropDownButton items
-    const items = AVAILABLE_THEMES.map(theme => ({
-        id: theme.id,
-        text: theme.text,
-        iconCss: currentTheme === theme.id ? 'e-icons e-check' : ''
-    }));
-    /**
-     * Handle theme selection from dropdown
-     */
-    const handleSelect = (args) => {
-        const selectedTheme = AVAILABLE_THEMES.find(t => t.id === args.item.id);
-        if (selectedTheme) {
-            setTheme(selectedTheme.id);
-        }
-    };
-    return (_jsx("div", { className: "theme-switcher", style: { display: 'inline-block', marginRight: '10px' }, children: _jsx(DropDownButtonComponent, { cssClass: "action-btn theme-dropdown", items: items, select: handleSelect, content: "Choose Theme", title: "Choose theme" }) }));
-}

package/src/components/theme/theme-constant.d.ts

@@ -1,37 +0,0 @@
-/**
- * Theme configuration constants for Syncfusion EJ2 components
- */
-/**
- * Supported theme variants
- */
-export type ThemeVariant = 'material3' | 'tailwind3' | 'bootstrap5.3' | 'fluent2';
-/**
- * Theme mode (light or dark)
- */
-export type ThemeMode = 'light' | 'dark';
-/**
- * Complete theme configuration
- */
-export interface ThemeConfig {
-    variant: ThemeVariant;
-    mode: ThemeMode;
-}
-/**
- * Theme option for dropdown selection
- */
-export interface ThemeOption {
-    id: ThemeVariant;
-    text: string;
-}
-/**
- * Available theme options for theme switcher dropdown
- */
-export declare const AVAILABLE_THEMES: ThemeOption[];
-/**
- * Default theme configuration
- */
-export declare const DEFAULT_THEME: ThemeConfig;
-/**
- * LocalStorage key for theme persistence
- */
-export declare const THEME_STORAGE_KEY = "form-builder-theme";

package/src/components/theme/theme-constant.js

@@ -1,23 +0,0 @@
-/**
- * Theme configuration constants for Syncfusion EJ2 components
- */
-/**
- * Available theme options for theme switcher dropdown
- */
-export const AVAILABLE_THEMES = [
-    { id: 'material3', text: 'Material 3' },
-    { id: 'tailwind3', text: 'Tailwind 3' },
-    { id: 'bootstrap5.3', text: 'Bootstrap 5.3' },
-    { id: 'fluent2', text: 'Fluent 2' }
-];
-/**
- * Default theme configuration
- */
-export const DEFAULT_THEME = {
-    variant: 'tailwind3',
-    mode: 'light'
-};
-/**
- * LocalStorage key for theme persistence
- */
-export const THEME_STORAGE_KEY = 'form-builder-theme';