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

package/src/components/layout/LeftPane.js

@@ -0,0 +1,310 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState, useMemo, useCallback } from 'react';
+import { Draggable } from '@syncfusion/react-base';
+import { AccordionComponent, AccordionItemsDirective, AccordionItemDirective } from '@syncfusion/ej2-react-navigations';
+import { ComponentCategory } from '../../types/FormSchema';
+import { defaultPalette } from '../../defaultPalette';
+import { generateId, generateName } from '../../../Common/json-converter';
+import { TextBoxIcon, TextAreaIcon, NumericIcon, EmailIcon, UrlIcon, PhoneIcon, PasswordIcon, CheckboxIcon, CheckboxGroupIcon, RadioIcon, DropdownIcon, MultiSelectIcon, ButtonIcon, DatePickerIcon, DateTimePickerIcon, TimePickerIcon, DateRangeIcon, SwitchIcon, SignatureIcon, RatingIcon, ImageEditorIcon, FileUploadIcon, RangeSliderIcon, ColorPickerIcon, InputMaskIcon, MessageIcon, PanelIcon, TableIcon, DataGridIcon, TabsIcon, TemplateIcon, CardIcon, SplitButtonIcon, RichTextEditorIcon, StaticHtmlIcon, LookupIcon, OrderNumberIcon } from '../icons/ComponentIcons';
+import { useLocalization } from '../../context/LocalizationContext';
+export const floatFocus = (args) => {
+    args.target.parentElement.classList.add("e-input-focus");
+};
+export const floatBlur = (args) => {
+    args.target.parentElement.classList.remove('e-input-focus');
+};
+export const getIconComponent = (type) => {
+    switch (type) {
+        case 'textbox':
+            return _jsx(TextBoxIcon, { className: "palette-item-icon-svg" });
+        case 'textarea':
+            return _jsx(TextAreaIcon, { className: "palette-item-icon-svg" });
+        case 'number':
+            return _jsx(NumericIcon, { className: "palette-item-icon-svg" });
+        case 'email':
+            return _jsx(EmailIcon, { className: "palette-item-icon-svg" });
+        case 'url':
+            return _jsx(UrlIcon, { className: "palette-item-icon-svg" });
+        case 'phone':
+            return _jsx(PhoneIcon, { className: "palette-item-icon-svg" });
+        case 'password':
+            return _jsx(PasswordIcon, { className: "palette-item-icon-svg" });
+        case 'checkbox':
+            return _jsx(CheckboxIcon, { className: "palette-item-icon-svg" });
+        case 'checkboxGroup':
+            return _jsx(CheckboxGroupIcon, { className: "palette-item-icon-svg" });
+        case 'radio':
+            return _jsx(RadioIcon, { className: "palette-item-icon-svg" });
+        case 'dropdown':
+            return _jsx(DropdownIcon, { className: "palette-item-icon-svg" });
+        case 'multiselect':
+            return _jsx(MultiSelectIcon, { className: "palette-item-icon-svg" });
+        case 'button':
+            return _jsx(ButtonIcon, { className: "palette-item-icon-svg" });
+        case 'date':
+            return _jsx(DatePickerIcon, { className: "palette-item-icon-svg" });
+        case 'dateTime':
+            return _jsx(DateTimePickerIcon, { className: "palette-item-icon-svg" });
+        case 'time':
+            return _jsx(TimePickerIcon, { className: "palette-item-icon-svg" });
+        case 'dateRange':
+            return _jsx(DateRangeIcon, { className: "palette-item-icon-svg" });
+        case 'switch':
+            return _jsx(SwitchIcon, { className: "palette-item-icon-svg" });
+        case 'signature':
+            return _jsx(SignatureIcon, { className: "palette-item-icon-svg" });
+        case 'rating':
+            return _jsx(RatingIcon, { className: "palette-item-icon-svg" });
+        case 'imageEditor':
+            return _jsx(ImageEditorIcon, { className: "palette-item-icon-svg" });
+        case 'fileUpload':
+            return _jsx(FileUploadIcon, { className: "palette-item-icon-svg" });
+        case 'rangeSlider':
+            return _jsx(RangeSliderIcon, { className: "palette-item-icon-svg" });
+        case 'colorPicker':
+            return _jsx(ColorPickerIcon, { className: "palette-item-icon-svg" });
+        case 'inputMask':
+            return _jsx(InputMaskIcon, { className: "palette-item-icon-svg" });
+        case 'message':
+            return _jsx(MessageIcon, { className: "palette-item-icon-svg" });
+        case 'panel':
+            return _jsx(PanelIcon, { className: "palette-item-icon-svg" });
+        case 'table':
+            return _jsx(TableIcon, { className: "palette-item-icon-svg" });
+        case 'dataGrid':
+            return _jsx(DataGridIcon, { className: "palette-item-icon-svg" });
+        case 'tabs':
+            return _jsx(TabsIcon, { className: "palette-item-icon-svg" });
+        case 'card':
+            return _jsx(CardIcon, { className: "palette-item-icon-svg" });
+        case 'splitButton':
+            return _jsx(SplitButtonIcon, { className: "palette-item-icon-svg" });
+        case 'richTextEditor':
+            return _jsx(RichTextEditorIcon, { className: "palette-item-icon-svg" });
+        case 'lookup':
+            return _jsx(LookupIcon, { className: "palette-item-icon-svg" });
+        case 'staticHtml':
+            return _jsx(StaticHtmlIcon, { className: "palette-item-icon-svg" });
+        case 'autoNumber':
+            return _jsx(OrderNumberIcon, { className: "palette-item-icon-svg" });
+        default:
+            return null;
+    }
+};
+export const simpleModeHiddenTypes = new Set([
+    'splitButton',
+    'imageEditor',
+    'dataGrid',
+    'richTextEditor',
+    'lookup',
+    'autoNumber',
+    'colorPicker',
+    'signature'
+]);
+const LeftPane = ({ className, templates = [], paletteConfig, onFieldDragStarted, mode = 'Simple', onDrop, containerWidth = 1024 }) => {
+    const cloneHelperRef = useRef(null);
+    const draggedComponentRef = useRef(null);
+    const { l10n } = useLocalization();
+    const [searchInput, setSearchInput] = useState('');
+    const [showSplitView, setShowSplitView] = useState(false);
+    const [templateSearchInput, setTemplateSearchInput] = useState('');
+    const isMobile = containerWidth <= 820;
+    // Initialize palette with user config or defaults, resolve labels internally from l10n
+    const palette = useMemo(() => {
+        const merged = { ...defaultPalette };
+        if (paletteConfig) {
+            Object.entries(paletteConfig).forEach(([category, components]) => {
+                if (components) {
+                    merged[category] = components;
+                }
+            });
+        }
+        // Filter out advanced components when in Simple mode
+        if (mode === 'Simple' && merged[ComponentCategory.ADVANCED]) {
+            merged[ComponentCategory.ADVANCED] = merged[ComponentCategory.ADVANCED].filter(comp => !simpleModeHiddenTypes.has(comp.type));
+        }
+        // Resolve labels internally from l10n for all components
+        const withLabels = {};
+        Object.entries(merged).forEach(([category, components]) => {
+            withLabels[category] = (components || []).map(comp => ({
+                ...comp,
+                label: comp.label || l10n.getConstant(comp.type) || comp.type
+            }));
+        });
+        return withLabels;
+    }, [paletteConfig, l10n, mode, simpleModeHiddenTypes]); // ADD mode dependencies
+    // Get label from component or resolve from l10n
+    const getComponentLabel = (component) => {
+        if (component.label)
+            return component.label;
+        return l10n.getConstant(component.type) || component.type;
+    };
+    // Mobile click-to-add handler: builds a FormComponent and drops it at the bottom of the canvas
+    const handlePaletteItemClick = useCallback((component) => {
+        if (!isMobile || !onDrop)
+            return;
+        const newComponent = {
+            id: generateId(component.type),
+            type: component.type,
+            label: component.label || '',
+            name: generateName(component.type),
+        };
+        // Append to bottom of canvas (default behavior, smart submit-button handling is applied downstream)
+        onDrop(newComponent);
+    }, [isMobile, onDrop]);
+    // Mobile keydown handler: builds a FormComponent and drops it at the bottom of the canvas
+    const handlePaletteItemKeyDown = useCallback((e, component) => {
+        if (!onDrop || e.code !== 'Enter')
+            return;
+        const newComponent = {
+            id: generateId(component.type),
+            type: component.type,
+            label: component.label || '',
+            name: generateName(component.type),
+        };
+        // Append to bottom of canvas (default behavior, smart submit-button handling is applied downstream)
+        onDrop(newComponent);
+    }, [onDrop]);
+    // Extract components from palette (labels already resolved)
+    const basicComponents = useMemo(() => palette[ComponentCategory.BASIC] || [], [palette]);
+    const isBlockedInSimpleMode = (type) => {
+        return mode === 'Simple' && [
+            'splitButton', 'imageEditor', 'dataGrid', 'richTextEditor',
+            'lookup', 'autoNumber', 'colorPicker', 'signature'
+        ].includes(type);
+    };
+    const advancedComponents = useMemo(() => (palette[ComponentCategory.ADVANCED] || []).filter(c => !isBlockedInSimpleMode(c.type)), [palette, mode]);
+    const layoutComponents = useMemo(() => palette[ComponentCategory.LAYOUT] || [], [palette]);
+    const allComponents = useMemo(() => [
+        ...basicComponents,
+        ...advancedComponents,
+        ...layoutComponents
+    ], [basicComponents, advancedComponents, layoutComponents]);
+    const filteredComponents = useMemo(() => {
+        if (!searchInput.trim()) {
+            return [];
+        }
+        const lowerSearch = searchInput.toLowerCase();
+        return allComponents.filter(component => component.label?.toLowerCase().includes(lowerSearch) ||
+            component.type.toLowerCase().includes(lowerSearch));
+    }, [searchInput, allComponents]);
+    const filteredTemplates = useMemo(() => {
+        if (!templateSearchInput.trim()) {
+            return templates;
+        }
+        const lowerSearch = templateSearchInput.toLowerCase();
+        return templates.filter(t => (l10n.getConstant(t.id) || t.title)?.toLowerCase().includes(lowerSearch) ||
+            t.id.toLowerCase().includes(lowerSearch));
+    }, [templateSearchInput, templates, l10n]);
+    // Syncfusion Draggable handlers
+    const helper = (args) => {
+        const paletteItem = (args.sender?.target).closest('.palette-item');
+        if (!paletteItem)
+            return null;
+        const templateId = paletteItem.getAttribute('data-template-id');
+        if (templateId && templates.length) {
+            const tpl = templates.find(t => t.id === templateId);
+            if (tpl) {
+                draggedComponentRef.current = { type: 'template', label: (l10n.getConstant(tpl.id) || tpl.title), isTemplate: true, templateData: tpl };
+                return cloneHelperRef.current;
+            }
+        }
+        const componentType = paletteItem.getAttribute('data-component-type');
+        const component = allComponents.find(c => c.type === componentType);
+        if (component) {
+            draggedComponentRef.current = component;
+        }
+        return cloneHelperRef.current;
+    };
+    const syncDragStart = (args) => {
+        if (isMobile) {
+            args.cancel = true;
+            return;
+        }
+        if (cloneHelperRef.current && draggedComponentRef.current) {
+            cloneHelperRef.current.style.display = 'flex';
+            // If dragging a template, serialize template JSON into the clone as `data-template-json`
+            if (draggedComponentRef.current.isTemplate) {
+                const tpl = draggedComponentRef.current.templateData;
+                try {
+                    cloneHelperRef.current.setAttribute('data-template-json', JSON.stringify(tpl));
+                }
+                catch (e) {
+                }
+                cloneHelperRef.current.removeAttribute('data-component-json');
+            }
+            else {
+                cloneHelperRef.current.setAttribute('data-component-json', JSON.stringify(draggedComponentRef.current));
+            }
+            const iconSpan = cloneHelperRef.current.querySelector('.palette-item-icon');
+            if (draggedComponentRef.current.isTemplate && iconSpan) {
+                iconSpan.innerHTML = '';
+            }
+            const labelSpan = cloneHelperRef.current.querySelector('.clone-label');
+            const paletteItem = document.querySelector(`.palette-item[data-component-type="${draggedComponentRef.current.type}"]`);
+            if (iconSpan && paletteItem) {
+                const sourceIcon = paletteItem.querySelector('.palette-item-icon');
+                if (sourceIcon) {
+                    iconSpan.innerHTML = sourceIcon.innerHTML;
+                }
+            }
+            if (labelSpan) {
+                labelSpan.textContent = draggedComponentRef.current.label;
+            }
+            // Trigger onFieldDragStarted event for palette drags
+            if (onFieldDragStarted && draggedComponentRef.current) {
+                const isTemplate = !!draggedComponentRef.current.isTemplate;
+                onFieldDragStarted({
+                    componentName: null, // Palette items don't have IDs yet
+                    componentType: isTemplate ? 'template' : draggedComponentRef.current.type,
+                    sourceContainerId: 'palette',
+                    isNested: false
+                });
+            }
+        }
+    };
+    const syncDrag = () => {
+        if (cloneHelperRef.current) {
+            cloneHelperRef.current.style.opacity = '0.97';
+        }
+    };
+    const syncDragStop = () => {
+        setTimeout(() => {
+            if (cloneHelperRef.current) {
+                cloneHelperRef.current.style.display = 'none';
+                cloneHelperRef.current.style.opacity = '0';
+                cloneHelperRef.current.removeAttribute('data-component-json');
+                cloneHelperRef.current.removeAttribute('data-template-json');
+            }
+        }, 100);
+        draggedComponentRef.current = null;
+    };
+    const handleTabKeyDown = useCallback((e, showTemplates) => {
+        if (e.code === 'Enter') {
+            e.preventDefault();
+            setShowSplitView(showTemplates);
+        }
+    }, []);
+    return (_jsxs("aside", { "aria-label": l10n.getConstant('fields'), role: "navigation", className: `left-pane ${className || ''}`, style: containerWidth <= 820 ? { position: 'absolute', zIndex: 1000 } : {}, children: [_jsx("div", { className: "sidebar-header", children: _jsxs("div", { style: { display: 'flex', gap: '30px' }, role: "tablist", "aria-label": "Builder Navigation", children: [_jsx("div", { role: "tab", "aria-selected": !showSplitView, "aria-labelledby": "fields-panel", className: `tab ${!showSplitView && mode === 'Developer' ? 'active' : ''}`, style: { cursor: 'pointer' }, onClick: () => setShowSplitView(false), onKeyDown: (e) => handleTabKeyDown(e, false), tabIndex: 0, children: _jsx("p", { children: l10n.getConstant('fields') }) }), mode === 'Developer' && !isMobile &&
+                            _jsx("div", { className: `tab ${showSplitView ? 'active' : ''}`, style: { cursor: 'pointer' }, onClick: () => setShowSplitView(true), onKeyDown: (e) => handleTabKeyDown(e, true), tabIndex: 0, role: "tab", "aria-selected": showSplitView, "aria-labelledby": "templates-panel", children: _jsx("p", { children: l10n.getConstant('templates') }) })] }) }), _jsxs("div", { className: "palette-container fb-scrollbar", children: [_jsxs("div", { className: "e-input-group", style: { marginBottom: "10px" }, children: [_jsx("input", { className: "e-input", type: "text", "aria-label": l10n.getConstant('search'), placeholder: l10n.getConstant('search'), value: showSplitView ? templateSearchInput : searchInput, onFocus: floatFocus, onBlur: floatBlur, onChange: (e) => showSplitView ? setTemplateSearchInput(e.target.value) : setSearchInput(e.target.value) }), _jsx("span", { "aria-hidden": "true", className: "e-input-group-icon e-icons e-search" })] }), !showSplitView && (_jsx(Draggable, { scope: 'new-field', clone: true, enableTailMode: true, helper: helper, isPreventSelect: true, onDragStart: syncDragStart, onDrag: syncDrag, onDragStop: syncDragStop, children: searchInput.trim() ? (
+                        // Render filtered field items when search is active
+                        _jsx("div", { role: "tabpanel", "aria-labelledby": "fields-tab", className: "palette-items", style: { paddingTop: '8px' }, children: filteredComponents.length > 0 ? (filteredComponents.map((component) => (_jsxs("div", { className: "palette-item", tabIndex: 0, "data-component-type": component.type, style: { userSelect: 'none', WebkitUserSelect: 'none' }, onClick: () => handlePaletteItemClick(component), onKeyDown: (e) => handlePaletteItemKeyDown(e, component), "aria-label": getComponentLabel(component), children: [_jsx("span", { "aria-hidden": "true", className: "palette-item-icon", children: getIconComponent(component.type) }), _jsx("span", { className: "palette-item-label", children: getComponentLabel(component) })] }, component.type)))) : (_jsx("div", { role: "status", "aria-live": "polite", style: { padding: '16px', textAlign: 'center', color: 'var(--sf-text-secondary)' }, children: "No results found" })) })) : (
+                        // Render accordion when search is empty
+                        _jsx(AccordionComponent, { expandMode: "Single", children: _jsxs(AccordionItemsDirective, { children: [_jsx(AccordionItemDirective, { header: l10n.getConstant('basic'), content: "#leftpane-basic", expanded: true }), _jsx(AccordionItemDirective, { header: l10n.getConstant('advanced'), content: "#leftpane-advanced" }), _jsx(AccordionItemDirective, { header: l10n.getConstant('layout'), content: "#leftpane-layout" })] }) })) })), showSplitView && (_jsx(Draggable, { scope: 'new-field', clone: true, enableTailMode: true, helper: helper, isPreventSelect: true, onDragStart: syncDragStart, onDrag: syncDrag, onDragStop: syncDragStop, children: _jsx("div", { role: "tabpanel", "aria-labelledby": "templates-tab", className: "palette-items", style: { paddingTop: '8px' }, children: filteredTemplates.length > 0 ? (filteredTemplates.map(t => (_jsxs("div", { tabIndex: 0, className: "palette-item template-item", "data-template-id": t.id, style: { userSelect: 'none', WebkitUserSelect: 'none' }, children: [_jsx("span", { className: "palette-item-icon", children: _jsx(TemplateIcon, { className: "palette-item-icon-svg" }) }), _jsx("span", { className: "palette-item-label", children: (l10n.getConstant(t.id) || t.title) })] }, t.id)))) : (_jsx("div", { role: "status", "aria-live": "polite", style: { padding: '16px', textAlign: 'center', color: 'var(--sf-text-secondary)' }, children: "No templates found" })) }) })), _jsxs("div", { style: { display: 'none' }, "aria-hidden": true, children: [_jsx("div", { id: "leftpane-basic", children: _jsx("div", { className: "palette-items", children: basicComponents.map((component) => (_jsxs("div", { tabIndex: 0, className: "palette-item", "data-component-type": component.type, style: { userSelect: 'none', WebkitUserSelect: 'none' }, onClick: () => handlePaletteItemClick(component), onKeyDown: (e) => handlePaletteItemKeyDown(e, component), "aria-label": getComponentLabel(component), children: [_jsx("span", { "aria-hidden": "true", className: "palette-item-icon", children: getIconComponent(component.type) }), _jsx("span", { className: "palette-item-label", children: getComponentLabel(component) })] }, component.type))) }) }), _jsx("div", { id: "leftpane-advanced", children: _jsx("div", { className: "palette-items", children: advancedComponents.map((component) => (_jsxs("div", { tabIndex: 0, className: "palette-item", "data-component-type": component.type, style: { userSelect: 'none', WebkitUserSelect: 'none' }, onClick: () => handlePaletteItemClick(component), onKeyDown: (e) => handlePaletteItemKeyDown(e, component), "aria-label": getComponentLabel(component), children: [_jsx("span", { "aria-hidden": "true", className: "palette-item-icon", children: getIconComponent(component.type) }), _jsx("span", { className: "palette-item-label", children: getComponentLabel(component) })] }, component.type))) }) }), _jsx("div", { id: "leftpane-layout", children: _jsx("div", { className: "palette-items", children: layoutComponents.map((component) => (_jsxs("div", { tabIndex: 0, className: "palette-item", "data-component-type": component.type, style: { userSelect: 'none', WebkitUserSelect: 'none' }, onClick: () => handlePaletteItemClick(component), onKeyDown: (e) => handlePaletteItemKeyDown(e, component), "aria-label": getComponentLabel(component), children: [_jsx("span", { "aria-hidden": "true", className: "palette-item-icon", children: getIconComponent(component.type) }), _jsx("span", { className: "palette-item-label", children: getComponentLabel(component) })] }, component.type))) }) })] }), _jsxs("div", { ref: cloneHelperRef, className: "palette-item-clone", "aria-hidden": "true", style: {
+                            opacity: '0',
+                            padding: '8px 12px',
+                            zIndex: '10000',
+                            display: 'none',
+                            justifyContent: 'center',
+                            alignItems: 'center',
+                            gap: '8px',
+                            height: '37px',
+                            minWidth: '120px',
+                            backgroundColor: 'rgb(var(--sf-drag-clone))',
+                            border: '2px solid var(--sf-color-primary)',
+                            borderRadius: '8px',
+                            boxShadow: '0 4px 12px rgba(0,0,0,0.2)',
+                            pointerEvents: 'none',
+                        }, children: [_jsx("span", { "aria-hidden": "true", className: "palette-item-icon", style: { fontSize: '16px' } }), _jsx("span", { className: "clone-label", style: { fontSize: '14px', fontWeight: '500' } })] })] })] }));
+};
+export default LeftPane;

package/src/components/layout/ListBoxPane.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import { type PaletteComponent, type PaletteConfig } from '../../types/FormSchema';
+interface ListBoxPaneProps {
+    isOpen: boolean;
+    onClose: () => void;
+    onSelect: (component: PaletteComponent) => void;
+    paletteConfig?: PaletteConfig;
+    mode?: 'Simple' | 'Developer';
+}
+/**
+ * ListBoxPane - Syncfusion ListBox grouped list popup for quick field addition
+ *
+ * Features:
+ * - Syncfusion ListBox with native grouping
+ * - Searchable via filter
+ * - Click outside to close
+ * - Escape key to close
+ * - Component selection triggers onSelect callback
+ *
+ * @param props - Component props
+ * @returns Popup component with Syncfusion ListBox
+ */
+declare const ListBoxPane: React.FC<ListBoxPaneProps>;
+export default ListBoxPane;

package/src/components/layout/ListBoxPane.js

@@ -0,0 +1,94 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useMemo, useCallback } from 'react';
+import { ListBoxComponent } from '@syncfusion/ej2-react-dropdowns';
+import { defaultPalette } from '../../defaultPalette';
+import { useLocalization } from '../../context/LocalizationContext';
+import { getIconComponent, simpleModeHiddenTypes } from './LeftPane';
+import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
+/**
+ * ListBoxPane - Syncfusion ListBox grouped list popup for quick field addition
+ *
+ * Features:
+ * - Syncfusion ListBox with native grouping
+ * - Searchable via filter
+ * - Click outside to close
+ * - Escape key to close
+ * - Component selection triggers onSelect callback
+ *
+ * @param props - Component props
+ * @returns Popup component with Syncfusion ListBox
+ */
+const ListBoxPane = ({ isOpen, onClose, onSelect, paletteConfig, mode }) => {
+    const popupRef = useRef(null);
+    const listboxRef = useRef(null);
+    const { l10n } = useLocalization();
+    const palette = useMemo(() => {
+        const merged = { ...defaultPalette };
+        if (paletteConfig) {
+            Object.entries(paletteConfig).forEach(([category, components]) => {
+                if (components) {
+                    merged[category] = components;
+                }
+            });
+        }
+        // Resolve labels from l10n and flatten with group info
+        const items = [];
+        Object.entries(merged).forEach(([category, components]) => {
+            (components || []).forEach((comp) => {
+                // Filter out advanced components in Simple mode
+                if (mode === 'Simple' && simpleModeHiddenTypes.has(comp.type)) {
+                    return;
+                }
+                items.push({
+                    ...comp,
+                    label: comp.label || l10n.getConstant(comp.type) || comp.type,
+                    group: category
+                });
+            });
+        });
+        return items;
+    }, [paletteConfig, l10n, mode, simpleModeHiddenTypes]);
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const handleClickOutside = (event) => {
+            if (popupRef.current && !popupRef.current.contains(event.target)) {
+                onClose();
+            }
+        };
+        // Handle Escape key
+        const handleKeyDown = (event) => {
+            if (event.key === 'Escape') {
+                onClose();
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        document.addEventListener('keydown', handleKeyDown);
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+            document.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [isOpen, onClose]);
+    const handleSelect = useCallback((args) => {
+        if (!args.event.isTrusted) {
+            return;
+        }
+        const dataType = args.elements[0].getAttribute('data-value');
+        const selectedComponent = palette.find((p) => p.type === dataType);
+        if (selectedComponent) {
+            onSelect({
+                type: selectedComponent.type,
+                label: selectedComponent.label
+            });
+            onClose();
+        }
+    }, [palette, onSelect, onClose]);
+    if (!isOpen)
+        return null;
+    return (_jsx("div", { className: "listbox-pane-wrapper", "aria-modal": "true", tabIndex: -1, role: 'dialog', "aria-label": "Component Selection", onClick: (e) => {
+            if (e.target === e.currentTarget) {
+                onClose();
+            }
+        }, children: _jsx("div", { className: "listbox-pane-popup", ref: popupRef, "aria-label": "Available Components", children: _jsx(ListBoxComponent, { ref: listboxRef, dataSource: palette, tabIndex: 0, fields: { groupBy: 'group', text: 'label', value: 'type' }, change: handleSelect, allowFiltering: true, filterBarPlaceholder: "Search", height: "400px", "aria-label": "Available Components", itemTemplate: (props) => (_jsxs(ButtonComponent, { cssClass: 'e-flat', style: { display: 'flex', justifyContent: 'flex-start', padding: 0, fontWeight: 500, backgroundColor: 'transparent', border: 'none' }, "data-type": props.type, className: "listbox-item-with-icon", "aria-label": props.label, children: [_jsx("div", { "aria-hidden": true, className: "listbox-item-icon", children: getIconComponent(props.type) }), _jsx("span", { className: "listbox-item-label", children: props.label })] })) }) }) }));
+};
+export default ListBoxPane;

package/src/components/layout/MainSection.d.ts

@@ -0,0 +1,39 @@
+import { type FormSchema, type FormComponent } from '../../types/FormSchema';
+import { type FieldDragStartedEventArgs, type FieldDraggingOverEventArgs, type FieldDroppedEventArgs } from '../../FormBuilder';
+import React from 'react';
+interface MainSectionProps {
+    formSchema: FormSchema;
+    enablePreview?: boolean;
+    activeFieldId?: string;
+    className?: string;
+    mode?: 'Simple' | 'Developer';
+    paletteConfig?: any;
+    onDrop: (component: FormComponent, dropTargetIndex?: number | null, dropPosition?: 'before' | 'after' | null) => void;
+    onNestedDrop: (parentId: string, component: FormComponent, cellInfo?: {
+        row: number;
+        col: number;
+        tabIndex?: number;
+    }, parentPath?: string, dropTargetIndex?: number | null, dropPosition?: 'before' | 'after' | null) => void;
+    onReorder: (newComponents: FormComponent[]) => void;
+    onNestedReorder: (parentId: string, parentPath: string, newChildren: FormComponent[], cellInfo?: {
+        row?: number;
+        col?: number;
+        tabIndex?: number;
+    }) => void;
+    onDelete: (fieldId: string, isReordering?: boolean) => void;
+    onEdit: (fieldId: string) => void;
+    onCopy: (field: FormComponent) => void;
+    onPaste: (targetFieldId: string) => void;
+    onDeleteAction: (fieldId: string) => void;
+    onSwitchWidget?: (fieldId: string, newWidgetTypePascal: string) => void;
+    hasClipboardData?: boolean;
+    onFieldDragStarted?: (args: FieldDragStartedEventArgs) => void;
+    onFieldDraggingOver?: (args: FieldDraggingOverEventArgs) => void;
+    onFieldDropped?: (args: FieldDroppedEventArgs) => void;
+}
+export declare const isDefaultFormSchema: (schema: FormSchema) => boolean;
+export interface MainSectionRef {
+    getGridRefs: () => Record<string, React.RefObject<any>>;
+}
+declare const MainSection: React.ForwardRefExoticComponent<MainSectionProps & React.RefAttributes<MainSectionRef>>;
+export default MainSection;