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

package/src/components/layout/LeftPane.js

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

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

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

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