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

package/src/components/Database/ConnectionForm.d.ts

@@ -1,8 +0,0 @@
-import React from 'react';
-import { type ConnectionConfig } from '../../types/connection';
-export interface ConnectionFormProps {
-    value?: ConnectionConfig;
-    onChange?: (c: ConnectionConfig) => void;
-}
-declare const ConnectionForm: React.FC<ConnectionFormProps>;
-export default ConnectionForm;

package/src/components/Database/ConnectionForm.js

@@ -1,28 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { defaultConnection } from '../../types/connection';
-import { TextBoxComponent, NumericTextBoxComponent } from '@syncfusion/ej2-react-inputs';
-import { CheckBoxComponent } from '@syncfusion/ej2-react-buttons';
-import { DropDownListComponent } from '@syncfusion/ej2-react-dropdowns';
-const ConnectionForm = ({ value = defaultConnection, onChange }) => {
-    const cfg = { ...defaultConnection, ...value };
-    const isSqlite = (cfg.type || '').toLowerCase() === 'sqlite';
-    function update(partial) {
-        const merged = { ...cfg, ...partial };
-        onChange?.(merged);
-    }
-    return (_jsx("div", { style: { marginTop: 8 }, children: _jsxs("div", { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }, children: [_jsxs("div", { children: [_jsx("label", { style: { display: 'block', marginBottom: 6 }, children: "Connection Name" }), _jsx(TextBoxComponent, { style: { width: '100%' }, value: cfg.name || '', placeholder: "Optional name", change: (e) => update({ name: e.value }) })] }), _jsxs("div", { children: [_jsx("label", { style: { display: 'block', marginBottom: 6 }, children: "Database Type" }), _jsx(DropDownListComponent, { style: { width: '100%' }, dataSource: [
-                                { value: 'postgres', text: 'PostgreSQL' },
-                                { value: 'mysql', text: 'MySQL' },
-                                { value: 'mssql', text: 'MSSQL' },
-                                { value: 'sqlite', text: 'SQLite (file)' },
-                                { value: 'mongodb', text: 'MongoDB' },
-                            ], fields: { value: 'value', text: 'text' }, value: cfg.type, change: (e) => update({ type: e.value }) })] }), _jsxs("div", { children: [_jsx("label", { style: { display: 'block', marginBottom: 6 }, children: "Host" }), _jsx(TextBoxComponent, { style: { width: '100%' }, value: cfg.host, placeholder: "hostname, IP or sqlite file path", change: (e) => {
-                                const host = e.value;
-                                // If sqlite, mirror host into database field to simplify input
-                                if (isSqlite)
-                                    update({ host, database: host });
-                                else
-                                    update({ host });
-                            } })] }), _jsxs("div", { children: [_jsx("label", { style: { display: 'block', marginBottom: 6 }, children: "Port" }), _jsx(NumericTextBoxComponent, { style: { width: '100%' }, value: cfg.port || 5432, min: 1, max: 65535, step: 1, format: "n0", enabled: !isSqlite })] }), _jsxs("div", { children: [_jsx("label", { style: { display: 'block', marginBottom: 6 }, children: "Database" }), _jsx(TextBoxComponent, { style: { width: '100%' }, value: cfg.database, placeholder: "database name or sqlite file", change: (e) => update({ database: e.value }), enabled: !isSqlite })] }), _jsx("div", { style: { alignSelf: 'center' }, children: _jsx(CheckBoxComponent, { checked: !!cfg.ssl?.require, label: "Require SSL", change: (e) => update({ ssl: { ...(cfg.ssl || {}), require: e.checked } }), disabled: isSqlite }) }), _jsxs("div", { children: [_jsx("label", { style: { display: 'block', marginBottom: 6 }, children: "Username" }), _jsx(TextBoxComponent, { style: { width: '100%' }, value: cfg.auth?.username || '', htmlAttributes: { autocomplete: 'username' }, placeholder: "username", change: (e) => update({ auth: { ...(cfg.auth || {}), username: e.value } }), enabled: !isSqlite })] }), _jsxs("div", { children: [_jsx("label", { style: { display: 'block', marginBottom: 6 }, children: "Password" }), _jsx(TextBoxComponent, { style: { width: '100%' }, value: cfg.auth?.password || '', htmlAttributes: { type: 'password', autocomplete: 'current-password' }, placeholder: "password", change: (e) => update({ auth: { ...(cfg.auth || {}), password: e.value } }), enabled: !isSqlite })] }), _jsx("div", { style: { gridColumn: '1 / -1' }, children: _jsx(CheckBoxComponent, { checked: !!cfg.auth?.saveCredentials, label: "Save credentials securely", change: (e) => update({ auth: { ...(cfg.auth || {}), saveCredentials: e.checked } }), disabled: isSqlite }) })] }) }));
-};
-export default ConnectionForm;

package/src/components/TopBar.d.ts

@@ -1,10 +0,0 @@
-import { type JSX } from 'react';
-import type { ThemeMode, ThemeVariant } from './theme/theme-constant';
-interface TopBarProps {
-    themeMode: ThemeMode;
-    currentTheme: ThemeVariant;
-    setMode: (mode: ThemeMode) => void;
-    setTheme: (variant: ThemeVariant) => void;
-}
-export default function TopBar({ themeMode, setMode }: TopBarProps): JSX.Element;
-export {};

package/src/components/TopBar.js

@@ -1,7 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
-import { AppBarComponent } from '@syncfusion/ej2-react-navigations';
-import { DarkModeIcon } from './icons/ComponentIcons';
-export default function TopBar({ themeMode, setMode }) {
-    return (_jsx("div", { id: "layoutroot", className: themeMode, children: _jsx("div", { className: "topbar", children: _jsxs(AppBarComponent, { colorMode: 'Primary', children: [_jsxs("div", { style: { display: 'flex', gap: "10px", marginLeft: "10px" }, children: [_jsx("span", { className: 'e-icons e-edit' }), _jsx("span", { children: "Form Builder" })] }), _jsx("div", { className: "e-appbar-spacer" }), themeMode === 'dark' && (_jsx(ButtonComponent, { iconCss: 'e-icons e-brightness', style: { borderRadius: '50px' }, onClick: () => setMode('light'), cssClass: `icon-botton e-primary`, "aria-label": "Light mode" })), themeMode === 'light' && (_jsx(ButtonComponent, { onClick: () => setMode('dark'), cssClass: 'icon-button e-primary', "aria-label": "Dark mode", children: _jsx(DarkModeIcon, {}) }))] }) }) }));
-}

package/src/components/icons/ComponentIcons.d.ts

@@ -1,44 +0,0 @@
-import React from 'react';
-interface IconProps {
-    className?: string;
-}
-export declare const TextBoxIcon: React.FC<IconProps>;
-export declare const NumericIcon: React.FC<IconProps>;
-export declare const DateRangeIcon: React.FC<IconProps>;
-export declare const CheckboxIcon: React.FC<IconProps>;
-export declare const CheckboxGroupIcon: React.FC<IconProps>;
-export declare const TextAreaIcon: React.FC<IconProps>;
-export declare const EmailIcon: React.FC<IconProps>;
-export declare const PasswordIcon: React.FC<IconProps>;
-export declare const DropdownIcon: React.FC<IconProps>;
-export declare const DatePickerIcon: React.FC<IconProps>;
-export declare const RadioIcon: React.FC<IconProps>;
-export declare const ButtonIcon: React.FC<IconProps>;
-export declare const UrlIcon: React.FC<IconProps>;
-export declare const PhoneIcon: React.FC<IconProps>;
-export declare const MultiSelectIcon: React.FC<IconProps>;
-export declare const DateTimePickerIcon: React.FC<IconProps>;
-export declare const TimePickerIcon: React.FC<IconProps>;
-export declare const SwitchIcon: React.FC<IconProps>;
-export declare const SignatureIcon: React.FC<IconProps>;
-export declare const RatingIcon: React.FC<IconProps>;
-export declare const ImageEditorIcon: React.FC<IconProps>;
-export declare const FileUploadIcon: React.FC<IconProps>;
-export declare const RangeSliderIcon: React.FC<IconProps>;
-export declare const ColorPickerIcon: React.FC<IconProps>;
-export declare const InputMaskIcon: React.FC<IconProps>;
-export declare const MessageIcon: React.FC<IconProps>;
-export declare const PanelIcon: React.FC<IconProps>;
-export declare const TableIcon: React.FC<IconProps>;
-export declare const DataGridIcon: React.FC<IconProps>;
-export declare const TabsIcon: React.FC<IconProps>;
-export declare const SplitButtonIcon: React.FC<IconProps>;
-export declare const CardIcon: React.FC<IconProps>;
-export declare const RichTextEditorIcon: React.FC<IconProps>;
-export declare const TemplateIcon: React.FC<IconProps>;
-export declare const LookupIcon: React.FC<IconProps>;
-export declare const StaticHtmlIcon: React.FC<IconProps>;
-export declare const OrderNumberIcon: React.FC<IconProps>;
-export declare const DarkModeIcon: React.FC<IconProps>;
-export declare const FormDropZoneIcon: React.FC<IconProps>;
-export {};

package/src/components/icons/ComponentIcons.js

@@ -1,40 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const TextBoxIcon = ({ className = '' }) => (_jsxs("svg", { "aria-hidden": "true", className: className, width: "24", height: "24", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("rect", { x: "2", y: "5", width: "16", height: "10", rx: "1.5", stroke: "currentColor", strokeWidth: "1.5", fill: "none" }), _jsx("line", { x1: "5", y1: "8", x2: "11", y2: "8", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }), _jsx("line", { x1: "5", y1: "12", x2: "15", y2: "12", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })] }));
-export const NumericIcon = ({ className = '' }) => (_jsxs("svg", { "aria-hidden": "true", className: className, width: "24", height: "24", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("rect", { x: "2", y: "5", width: "16", height: "10", rx: "1.5", stroke: "currentColor", strokeWidth: "1.5", fill: "none" }), _jsx("text", { x: "10", y: "13", fontFamily: "Arial, sans-serif", fontSize: "8", fill: "currentColor", textAnchor: "middle", fontWeight: "600", children: "123" })] }));
-export const DateRangeIcon = ({ className = '' }) => (_jsxs("svg", { "aria-hidden": "true", className: className, width: "24", height: "24", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("rect", { x: "2", y: "4", width: "16", height: "13", rx: "1.5", stroke: "currentColor", strokeWidth: "1.5", fill: "none" }), _jsx("line", { x1: "2", y1: "8", x2: "18", y2: "8", stroke: "currentColor", strokeWidth: "1.5" }), _jsx("line", { x1: "6", y1: "2", x2: "6", y2: "6", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }), _jsx("line", { x1: "14", y1: "2", x2: "14", y2: "6", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }), _jsx("rect", { x: "5", y: "10.5", width: "2", height: "2", rx: "0.5", fill: "currentColor" }), _jsx("rect", { x: "9", y: "10.5", width: "2", height: "2", rx: "0.5", fill: "currentColor" }), _jsx("rect", { x: "13", y: "10.5", width: "2", height: "2", rx: "0.5", fill: "currentColor" })] }));
-export const CheckboxIcon = ({ className = '' }) => (_jsxs("svg", { "aria-hidden": "true", className: className, width: "24", height: "24", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("rect", { x: "3", y: "3", width: "14", height: "14", rx: "2", stroke: "currentColor", strokeWidth: "1.5", fill: "none" }), _jsx("path", { d: "M6 10L9 13L14 7", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] }));
-export const CheckboxGroupIcon = ({ className = '' }) => (_jsxs("svg", { "aria-hidden": "true", className: className, width: "24", height: "24", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("rect", { x: "3", y: "3", width: "14", height: "14", rx: "2", stroke: "currentColor", strokeWidth: "1.5", fill: "none" }), _jsx("path", { d: "M7 10h6", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round" }), _jsx("path", { d: "M10 7v6", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round" })] }));
-export const TextAreaIcon = ({ className = '' }) => (_jsxs("svg", { "aria-hidden": "true", className: className, width: "24", height: "24", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("rect", { x: "2", y: "3", width: "16", height: "14", rx: "1.5", stroke: "currentColor", strokeWidth: "1.5", fill: "none" }), _jsx("line", { x1: "5", y1: "6", x2: "11", y2: "6", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }), _jsx("line", { x1: "5", y1: "9", x2: "15", y2: "9", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }), _jsx("line", { x1: "5", y1: "12", x2: "13", y2: "12", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })] }));
-export const EmailIcon = ({ className = '' }) => (_jsxs("svg", { "aria-hidden": "true", className: className, width: "24", height: "24", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("rect", { x: "2", y: "5", width: "16", height: "10", rx: "1.5", stroke: "currentColor", strokeWidth: "1.5", fill: "none" }), _jsx("path", { d: "M2 7L10 11L18 7", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] }));
-export const PasswordIcon = ({ className = '' }) => (_jsxs("svg", { "aria-hidden": "true", className: className, width: "24", height: "24", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("rect", { x: "2", y: "8", width: "16", height: "9", rx: "1.5", stroke: "currentColor", strokeWidth: "1.5", fill: "none" }), _jsx("path", { d: "M5 8V6C5 3.79086 6.79086 2 9 2H11C13.2091 2 15 3.79086 15 6V8", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }), _jsx("circle", { cx: "10", cy: "12.5", r: "1.5", fill: "currentColor" })] }));
-export const DropdownIcon = ({ className = '' }) => (_jsxs("svg", { "aria-hidden": "true", className: className, width: "24", height: "24", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("rect", { x: "2", y: "5", width: "16", height: "10", rx: "1.5", stroke: "currentColor", strokeWidth: "1.5", fill: "none" }), _jsx("path", { d: "M14 9L10 12L6 9", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] }));
-export const DatePickerIcon = ({ className = '' }) => (_jsxs("svg", { "aria-hidden": "true", className: className, width: "24", height: "24", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("rect", { x: "2", y: "4", width: "16", height: "13", rx: "1.5", stroke: "currentColor", strokeWidth: "1.5", fill: "none" }), _jsx("line", { x1: "2", y1: "8", x2: "18", y2: "8", stroke: "currentColor", strokeWidth: "1.5" }), _jsx("line", { x1: "6", y1: "2", x2: "6", y2: "6", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }), _jsx("line", { x1: "14", y1: "2", x2: "14", y2: "6", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }), _jsx("circle", { cx: "7", cy: "12", r: "1", fill: "currentColor" }), _jsx("circle", { cx: "10", cy: "12", r: "1", fill: "currentColor" }), _jsx("circle", { cx: "13", cy: "12", r: "1", fill: "currentColor" })] }));
-export const RadioIcon = ({ className = '' }) => (_jsxs("svg", { "aria-hidden": "true", className: className, width: "24", height: "24", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("circle", { cx: "10", cy: "10", r: "7", stroke: "currentColor", strokeWidth: "1.5", fill: "none" }), _jsx("circle", { cx: "10", cy: "10", r: "4", fill: "currentColor" })] }));
-export const ButtonIcon = ({ className = '' }) => (_jsxs("svg", { "aria-hidden": "true", className: className, width: "24", height: "24", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("rect", { x: "3", y: "6", width: "14", height: "8", rx: "2", stroke: "currentColor", strokeWidth: "1.5", fill: "none" }), _jsx("text", { x: "10", y: "12.5", fontFamily: "Arial, sans-serif", fontSize: "6", fill: "currentColor", textAnchor: "middle", fontWeight: "600", children: "BTN" })] }));
-export const UrlIcon = ({ className = '' }) => (_jsxs("svg", { "aria-hidden": "true", className: className, width: "24", height: "24", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M8 10.5L12 10.5M6 13L8 11L6 9M14 7L12 9L14 11", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("rect", { x: "2", y: "5", width: "16", height: "10", rx: "1.5", stroke: "currentColor", strokeWidth: "1.5", fill: "none" })] }));
-export const PhoneIcon = ({ className = '' }) => (_jsxs("svg", { "aria-hidden": "true", className: className, width: "24", height: "24", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("rect", { x: "6", y: "2", width: "8", height: "16", rx: "1.5", stroke: "currentColor", strokeWidth: "1.5", fill: "none" }), _jsx("line", { x1: "9", y1: "15", x2: "11", y2: "15", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })] }));
-export const MultiSelectIcon = ({ className = '' }) => (_jsxs("svg", { "aria-hidden": "true", className: className, width: "24", height: "24", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("rect", { x: "2", y: "5", width: "16", height: "10", rx: "1.5", stroke: "currentColor", strokeWidth: "1.5", fill: "none" }), _jsx("rect", { x: "5", y: "8", width: "3", height: "1.5", rx: "0.5", fill: "currentColor" }), _jsx("rect", { x: "9", y: "8", width: "3", height: "1.5", rx: "0.5", fill: "currentColor" }), _jsx("path", { d: "M14 9L10 12L6 9", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] }));
-export const DateTimePickerIcon = ({ className = '' }) => (_jsxs("svg", { "aria-hidden": "true", className: className, width: "24", height: "24", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("rect", { x: "2", y: "4", width: "16", height: "13", rx: "1.5", stroke: "currentColor", strokeWidth: "1.5", fill: "none" }), _jsx("line", { x1: "2", y1: "8", x2: "18", y2: "8", stroke: "currentColor", strokeWidth: "1.5" }), _jsx("line", { x1: "6", y1: "2", x2: "6", y2: "6", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }), _jsx("line", { x1: "14", y1: "2", x2: "14", y2: "6", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }), _jsx("circle", { cx: "10", cy: "12", r: "2", stroke: "currentColor", strokeWidth: "1", fill: "none" }), _jsx("line", { x1: "10", y1: "12", x2: "10", y2: "10.5", stroke: "currentColor", strokeWidth: "1", strokeLinecap: "round" })] }));
-export const TimePickerIcon = ({ className = '' }) => (_jsxs("svg", { "aria-hidden": "true", className: className, width: "24", height: "24", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("circle", { cx: "10", cy: "10", r: "7", stroke: "currentColor", strokeWidth: "1.5", fill: "none" }), _jsx("path", { d: "M10 6V10L13 12", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] }));
-export const SwitchIcon = ({ className = '' }) => (_jsxs("svg", { "aria-hidden": "true", className: className, width: "24", height: "24", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("rect", { x: "3", y: "7", width: "14", height: "6", rx: "3", stroke: "currentColor", strokeWidth: "1.5", fill: "none" }), _jsx("circle", { cx: "13", cy: "10", r: "2", fill: "currentColor" })] }));
-export const SignatureIcon = ({ className = '' }) => (_jsxs("svg", { "aria-hidden": "true", className: className, width: "24", height: "24", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M3 15C3 15 4 11 6 10C8 9 9 11 10 11C11 11 11.5 9 13 9C14.5 9 15 11 16 11C17 11 18 8 18 8", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", fill: "none" }), _jsx("line", { x1: "2", y1: "17", x2: "18", y2: "17", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })] }));
-export const RatingIcon = ({ className = '' }) => (_jsx("svg", { "aria-hidden": "true", className: className, width: "24", height: "24", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M10 3L11.5 7.5H16L12.5 10.5L14 15L10 12L6 15L7.5 10.5L4 7.5H8.5L10 3Z", stroke: "currentColor", strokeWidth: "1.5", strokeLinejoin: "round", fill: "none" }) }));
-export const ImageEditorIcon = ({ className = '' }) => (_jsxs("svg", { "aria-hidden": "true", className: className, width: "24", height: "24", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("rect", { x: "2", y: "3", width: "16", height: "14", rx: "1.5", stroke: "currentColor", strokeWidth: "1.5", fill: "none" }), _jsx("circle", { cx: "7", cy: "8", r: "1.5", fill: "currentColor" }), _jsx("path", { d: "M2 14L6 10L9 13L13 9L18 14", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] }));
-export const FileUploadIcon = ({ className = '' }) => (_jsxs("svg", { "aria-hidden": "true", className: className, width: "24", height: "24", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M10 13V4M10 4L7 7M10 4L13 7", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M3 13V15C3 16.1046 3.89543 17 5 17H15C16.1046 17 17 16.1046 17 15V13", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })] }));
-export const RangeSliderIcon = ({ className = '' }) => (_jsxs("svg", { "aria-hidden": "true", className: className, width: "24", height: "24", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("line", { x1: "3", y1: "10", x2: "17", y2: "10", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }), _jsx("circle", { cx: "7", cy: "10", r: "2.5", stroke: "currentColor", strokeWidth: "1.5", fill: "none" }), _jsx("circle", { cx: "13", cy: "10", r: "2.5", stroke: "currentColor", strokeWidth: "1.5", fill: "none" })] }));
-export const ColorPickerIcon = ({ className = '' }) => (_jsxs("svg", { "aria-hidden": "true", className: className, width: "24", height: "24", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("circle", { cx: "10", cy: "10", r: "7", stroke: "currentColor", strokeWidth: "1.5", fill: "none" }), _jsx("path", { d: "M10 3 L10 10 L17 10", stroke: "currentColor", strokeWidth: "1.5", fill: "none" }), _jsx("circle", { cx: "10", cy: "10", r: "2", fill: "currentColor" })] }));
-export const InputMaskIcon = ({ className = '' }) => (_jsxs("svg", { "aria-hidden": "true", className: className, width: "24", height: "24", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("rect", { x: "2", y: "6", width: "16", height: "8", rx: "1.5", stroke: "currentColor", strokeWidth: "1.5", fill: "none" }), _jsx("text", { x: "5", y: "12", fontFamily: "monospace", fontSize: "6", fill: "currentColor", fontWeight: "600", children: "###" })] }));
-export const MessageIcon = ({ className = '' }) => (_jsxs("svg", { "aria-hidden": "true", className: className, width: "24", height: "24", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("rect", { x: "2", y: "5", width: "16", height: "10", rx: "1.5", stroke: "currentColor", strokeWidth: "1.5", fill: "none" }), _jsx("circle", { cx: "6", cy: "10", r: "0.75", fill: "currentColor" }), _jsx("line", { x1: "8.5", y1: "10", x2: "15", y2: "10", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })] }));
-export const PanelIcon = ({ className = '' }) => (_jsxs("svg", { "aria-hidden": "true", className: className, width: "24", height: "24", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("rect", { x: "2", y: "4", width: "16", height: "12", rx: "1.5", stroke: "currentColor", strokeWidth: "1.5", fill: "none" }), _jsx("line", { x1: "2", y1: "7.5", x2: "18", y2: "7.5", stroke: "currentColor", strokeWidth: "1.5" }), _jsx("rect", { x: "4", y: "9.5", width: "12", height: "5", rx: "0.5", stroke: "currentColor", strokeWidth: "1", strokeDasharray: "2 2", fill: "none" })] }));
-export const TableIcon = ({ className = '' }) => (_jsxs("svg", { "aria-hidden": "true", className: className, width: "24", height: "24", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("rect", { x: "2", y: "3", width: "16", height: "14", rx: "1.5", stroke: "currentColor", strokeWidth: "1.5", fill: "none" }), _jsx("line", { x1: "2", y1: "8", x2: "18", y2: "8", stroke: "currentColor", strokeWidth: "1.5" }), _jsx("line", { x1: "2", y1: "13", x2: "18", y2: "13", stroke: "currentColor", strokeWidth: "1.5" }), _jsx("line", { x1: "10", y1: "3", x2: "10", y2: "17", stroke: "currentColor", strokeWidth: "1.5" })] }));
-export const DataGridIcon = ({ className = '' }) => (_jsxs("svg", { "aria-hidden": "true", className: className, width: "24", height: "24", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("rect", { x: "2", y: "3", width: "16", height: "14", rx: "1.5", stroke: "currentColor", strokeWidth: "1.5", fill: "none" }), _jsx("line", { x1: "2", y1: "8", x2: "18", y2: "8", stroke: "currentColor", strokeWidth: "1" }), _jsx("line", { x1: "2", y1: "13", x2: "18", y2: "13", stroke: "currentColor", strokeWidth: "1" }), _jsx("line", { x1: "7", y1: "3", x2: "7", y2: "17", stroke: "currentColor", strokeWidth: "1" }), _jsx("line", { x1: "13", y1: "3", x2: "13", y2: "17", stroke: "currentColor", strokeWidth: "1" })] }));
-export const TabsIcon = ({ className = '' }) => (_jsxs("svg", { "aria-hidden": "true", className: className, width: "24", height: "24", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("rect", { x: "2", y: "6", width: "16", height: "11", rx: "1.5", stroke: "currentColor", strokeWidth: "1.5", fill: "none" }), _jsx("path", { d: "M2 6 C2 5.17 2.67 4.5 3.5 4.5 H6.5 C7.33 4.5 8 5.17 8 6", stroke: "currentColor", strokeWidth: "1.5", fill: "none" }), _jsx("path", { d: "M9 6 C9 5.17 9.67 4.5 10.5 4.5 H13.5 C14.33 4.5 15 5.17 15 6", stroke: "currentColor", strokeWidth: "1.5", fill: "none" }), _jsx("rect", { x: "4", y: "9", width: "12", height: "6", rx: "0.5", stroke: "currentColor", strokeWidth: "1", strokeDasharray: "2 2", fill: "none" })] }));
-export const SplitButtonIcon = ({ className = '' }) => (_jsxs("svg", { "aria-hidden": "true", className: className, width: "24", height: "24", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("rect", { x: "2", y: "5", width: "15", height: "10", rx: "1.5", stroke: "currentColor", strokeWidth: "1.5", fill: "none" }), _jsx("line", { x1: "13", y1: "5", x2: "13", y2: "15", stroke: "currentColor", strokeWidth: "1.5" })] }));
-export const CardIcon = ({ className = '' }) => (_jsxs("svg", { "aria-hidden": "true", className: className, width: "24", height: "24", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("rect", { x: "2", y: "3", width: "16", height: "14", rx: "1.5", stroke: "currentColor", strokeWidth: "1.5", fill: "none" }), _jsx("line", { x1: "2", y1: "8", x2: "18", y2: "8", stroke: "currentColor", strokeWidth: "1.5" }), _jsx("line", { x1: "5", y1: "11", x2: "15", y2: "11", stroke: "currentColor", strokeWidth: "1", strokeLinecap: "round" }), _jsx("line", { x1: "5", y1: "14", x2: "13", y2: "14", stroke: "currentColor", strokeWidth: "1", strokeLinecap: "round" })] }));
-export const RichTextEditorIcon = ({ className = '' }) => (_jsxs("svg", { "aria-hidden": "true", className: className, width: "24", height: "24", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("rect", { x: "2", y: "3", width: "16", height: "14", rx: "1.5", stroke: "currentColor", strokeWidth: "1.5", fill: "none" }), _jsx("line", { x1: "3", y1: "6.5", x2: "4", y2: "6.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }), _jsx("line", { x1: "5", y1: "6.5", x2: "6", y2: "6.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }), _jsx("line", { x1: "7", y1: "6.5", x2: "8", y2: "6.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }), _jsx("line", { x1: "9", y1: "6.5", x2: "10", y2: "6.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }), _jsx("line", { x1: "11", y1: "6.5", x2: "17", y2: "6.5", stroke: "currentColor", strokeWidth: "1", strokeLinecap: "round" }), _jsx("line", { x1: "3", y1: "9", x2: "17", y2: "9", stroke: "currentColor", strokeWidth: "1", strokeLinecap: "round" }), _jsx("line", { x1: "3", y1: "11.5", x2: "15", y2: "11.5", stroke: "currentColor", strokeWidth: "1", strokeLinecap: "round" }), _jsx("line", { x1: "3", y1: "14", x2: "13", y2: "14", stroke: "currentColor", strokeWidth: "1", strokeLinecap: "round" })] }));
-export const TemplateIcon = ({ className = '' }) => (_jsxs("svg", { "aria-hidden": "true", className: className, width: "24", height: "24", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("rect", { x: "3", y: "3", width: "14", height: "14", rx: "1.5", stroke: "currentColor", strokeWidth: "1.5", fill: "none" }), _jsx("path", { d: "M6 7H14", stroke: "currentColor", strokeWidth: "1.2", strokeLinecap: "round" }), _jsx("path", { d: "M6 10H14", stroke: "currentColor", strokeWidth: "1.2", strokeLinecap: "round" }), _jsx("path", { d: "M6 13H10", stroke: "currentColor", strokeWidth: "1.2", strokeLinecap: "round" })] }));
-export const LookupIcon = ({ className = '' }) => (_jsxs("svg", { "aria-hidden": "true", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: className, children: [_jsx("circle", { cx: "11", cy: "11", r: "8" }), _jsx("path", { d: "m21 21-4.35-4.35" }), _jsx("path", { d: "M8 7h6" }), _jsx("path", { d: "M8 11h4" }), _jsx("path", { d: "M8 15h6" })] }));
-export const StaticHtmlIcon = ({ className = '' }) => (_jsxs("svg", { "aria-hidden": "true", className: className, xmlns: "http://www.w3.org/2000/svg", role: "presentation", width: "24", height: "24", viewBox: "0 0 50 50", fill: "none", stroke: "currentColor", strokeWidth: "4", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("polyline", { points: "14 36 4 25 14 14" }), _jsx("polyline", { points: "36 14 46 25 36 36" }), _jsx("line", { x1: "30", y1: "10", x2: "20", y2: "40" })] }));
-export const OrderNumberIcon = ({ className = '' }) => (_jsxs("svg", { "aria-hidden": "true", className: className, width: "24", height: "24", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("rect", { x: "2", y: "3", width: "16", height: "14", rx: "1.5", stroke: "currentColor", strokeWidth: "1.5", fill: "none" }), _jsx("path", { d: "M6 7L8 10L6 13", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("line", { x1: "10", y1: "7", x2: "16", y2: "7", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }), _jsx("line", { x1: "10", y1: "10", x2: "16", y2: "10", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }), _jsx("line", { x1: "10", y1: "13", x2: "16", y2: "13", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })] }));
-export const DarkModeIcon = () => (_jsx("svg", { "aria-hidden": "true", xmlns: "http://www.w3.org/2000/svg", width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", children: _jsx("path", { d: "M3.54688 2.14062L3.29688 2.35938L3.0625 2.59375L2.84375 2.84375L2.625 3.09375L2.42188 3.35938L2.23438 3.64062L2.07812 3.9375L1.92188 4.23438L1.78125 4.54688L1.65625 4.85938L1.5625 5.1875L1.46875 5.51562L1.40625 5.85938L1.35938 6.20312L1.32812 6.5625L1.3125 6.92188L1.32812 7.23438L1.34375 7.54688L1.39062 7.85938L1.4375 8.17188L1.51562 8.46875L1.59375 8.76562L1.6875 9.04688L1.79688 9.32812L1.92188 9.60938L2.0625 9.875L2.21875 10.1406L2.375 10.3906L2.54688 10.625L2.73438 10.8594L2.92188 11.0938L3.125 11.3125L3.34375 11.5156L3.57812 11.7031L3.8125 11.8906L4.04688 12.0625L4.29688 12.2188L4.5625 12.375L4.82812 12.5156L5.10938 12.6406L5.39062 12.75L5.67188 12.8438L5.96875 12.9219L6.26562 13L6.57812 13.0469L6.89062 13.0938L7.20312 13.1094L7.51562 13.125L7.875 13.1094L8.23438 13.0781L8.57812 13.0312L8.92188 12.9688L9.25 12.875L9.57812 12.7812L9.89062 12.6562L10.2031 12.5156L10.5 12.3594L10.7969 12.2031L11.0781 12.0156L11.3438 11.8125L11.5938 11.5938L11.8438 11.375L12.0781 11.1406L12.2969 10.8906L11.9688 10.9375L11.6406 10.9688L11.2969 11H10.9531H10.5625L10.1875 10.9688L9.8125 10.9219L9.4375 10.8594L9.07812 10.7656L8.71875 10.6719L8.375 10.5469L8.03125 10.4062L7.6875 10.2656L7.375 10.0938L7.04688 9.92188L6.75 9.71875L6.45312 9.51562L6.17188 9.28125L5.89062 9.04688L5.64062 8.79688L5.39062 8.54688L5.15625 8.26562L4.92188 7.98438L4.71875 7.6875L4.51562 7.39062L4.34375 7.0625L4.17188 6.75L4.03125 6.40625L3.89062 6.0625L3.76562 5.71875L3.67188 5.35938L3.57812 5L3.51562 4.625L3.46875 4.25L3.4375 3.875V3.48438V3.14062L3.46875 2.79688L3.5 2.46875L3.54688 2.14062ZM4.71875 0L4.84375 0.015625L4.95312 0.046875L5.0625 0.109375L5.15625 0.1875L5.21875 0.265625L5.28125 0.359375L5.3125 0.4375L5.34375 0.53125V0.640625V0.734375L5.32812 0.828125L5.17188 1.21875L5.0625 1.53125L4.96875 1.84375L4.89062 2.15625L4.82812 2.48438L4.78125 2.8125L4.75 3.14062V3.48438V3.79688L4.78125 4.125L4.8125 4.42188L4.875 4.73438L4.9375 5.03125L5.03125 5.32812L5.125 5.625L5.23438 5.90625L5.35938 6.17188L5.5 6.4375L5.64062 6.70312L5.8125 6.95312L5.98438 7.20312L6.15625 7.4375L6.35938 7.65625L6.5625 7.875L6.78125 8.07812L7 8.28125L7.23438 8.45312L7.48438 8.625L7.73438 8.79688L8 8.9375L8.26562 9.07812L8.53125 9.20312L8.8125 9.3125L9.10938 9.40625L9.40625 9.5L9.70312 9.5625L10.0156 9.625L10.3125 9.65625L10.6406 9.6875H10.9531H11.2969L11.625 9.65625L11.9531 9.60938L12.2812 9.54688L12.5938 9.46875L12.9062 9.375L13.2188 9.26562L13.6094 9.10938L13.7031 9.09375L13.7969 9.07812L13.9062 9.09375L14 9.125L14.0781 9.15625L14.1719 9.21875L14.25 9.28125L14.3125 9.35938L14.3594 9.4375L14.4062 9.53125L14.4219 9.625L14.4375 9.71875V9.8125L14.4219 9.92188L14.375 10.0156L14.2656 10.25L14.1406 10.4844L14.0156 10.7188L13.875 10.9531L13.5781 11.3906L13.2344 11.7969L12.875 12.1875L12.5 12.5625L12.0938 12.8906L11.6562 13.2031L11.4219 13.3438L11.2031 13.4844L10.9688 13.6094L10.7188 13.7188L10.4844 13.8281L10.2344 13.9375L9.96875 14.0312L9.71875 14.1094L9.45312 14.1875L9.1875 14.25L8.92188 14.3125L8.64062 14.3594L8.375 14.3906L8.09375 14.4219L7.8125 14.4375H7.51562L7.14062 14.4219L6.75 14.4062L6.375 14.3438L6 14.2812L5.64062 14.2031L5.28125 14.0938L4.9375 13.9844L4.59375 13.8438L4.26562 13.7031L3.9375 13.5312L3.625 13.3438L3.3125 13.1562L3.01562 12.9375L2.73438 12.7188L2.46875 12.4844L2.20312 12.2344L1.95312 11.9688L1.71875 11.7031L1.5 11.4219L1.28125 11.125L1.09375 10.8125L0.90625 10.5L0.734375 10.1719L0.59375 9.84375L0.453125 9.5L0.34375 9.15625L0.234375 8.79688L0.15625 8.4375L0.09375 8.0625L0.03125 7.6875L0.015625 7.29688L0 6.92188V6.625L0.015625 6.34375L0.046875 6.0625L0.078125 5.79688L0.125 5.51562L0.1875 5.25L0.25 4.98438L0.328125 4.71875L0.40625 4.46875L0.5 4.20312L0.609375 3.95312L0.71875 3.71875L0.828125 3.46875L0.953125 3.23438L1.09375 3.01562L1.23438 2.78125L1.54688 2.34375L1.875 1.9375L2.25 1.5625L2.64062 1.20312L3.04688 0.875L3.48438 0.5625L3.71875 0.421875L3.95312 0.296875L4.1875 0.171875L4.42188 0.0625L4.5625 0.015625L4.71875 0Z", fill: "white" }) }));
-export const FormDropZoneIcon = () => (_jsxs("svg", { "aria-hidden": "true", xmlns: "http://www.w3.org/2000/svg", width: "96", height: "96", viewBox: "0 0 96 96", fill: "none", children: [_jsx("rect", { x: "52.4453", y: "19.8672", width: "8.53634", height: "45.4857", transform: "rotate(45 52.4453 19.8672)", fill: "#F2994A" }), _jsx("rect", { x: "54.4609", y: "17.8574", width: "21.3409", height: "2.84286", transform: "rotate(45 54.4609 17.8574)", fill: "black" }), _jsx("path", { d: "M58.4694 13.837C61.8 10.5064 67.2 10.5064 70.5306 13.837L73.5597 16.866C76.8903 20.1967 76.8903 25.5967 73.5596 28.9273L69.5392 32.9477L54.449 17.8574L58.4694 13.837Z", fill: "#F33131" }), _jsx("rect", { x: "58.4922", y: "25.9053", width: "12.8045", height: "45.4857", transform: "rotate(45 58.4922 25.9053)", fill: "#E7BB33" }), _jsx("path", { d: "M20.2812 52.0312L35.3715 67.1215L15.7652 71.6376L20.2812 52.0312Z", fill: "#8E8E8E" }), _jsx("path", { d: "M20.2812 52.0312L35.3715 67.1215L25.5683 69.3796L18.0232 61.8344L20.2812 52.0312Z", fill: "#D2D2D2" }), _jsx("path", { d: "M25.5 76C55.5 96 54 52.5 85.8438 79.9495", stroke: "#8E8E8E", strokeWidth: "5", strokeLinecap: "round" })] }));

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

@@ -1,41 +0,0 @@
-import React from 'react';
-import type { FormComponent } from '../../types/FormSchema';
-interface FormFieldWrapperProps {
-    component: FormComponent;
-    parentPath?: string;
-    onEdit: (fieldId: string) => void;
-    onCopy: (field: FormComponent) => void;
-    onPaste: (targetFieldId: string) => void;
-    onDelete: (fieldId: string) => void;
-    onMoveUp?: (fieldId: string) => void;
-    onMoveDown?: (fieldId: string) => void;
-    onNestedMoveUp?: (fieldId: string, parentId: string, parentPath: string, cellInfo?: {
-        row?: number;
-        col?: number;
-        tabIndex?: number;
-    }) => void;
-    onNestedMoveDown?: (fieldId: string, parentId: string, parentPath: string, cellInfo?: {
-        row?: number;
-        col?: number;
-        tabIndex?: number;
-    }) => void;
-    isNested?: boolean;
-    nestingContext?: {
-        parentId: string;
-        parentPath: string;
-        cellInfo?: {
-            row?: number;
-            col?: number;
-            tabIndex?: number;
-        };
-    };
-    onSwitchWidget?: (fieldId: string, newWidgetTypePascal: string) => void;
-    children: React.ReactNode;
-    isActive?: boolean;
-    index?: number;
-    totalCount?: number;
-    mode?: 'Simple' | 'Developer';
-    hasClipboardData?: boolean;
-}
-export declare const FormFieldWrapper: React.NamedExoticComponent<FormFieldWrapperProps>;
-export {};

package/src/components/layout/FormFieldWrapper.js

@@ -1,112 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useCallback } from 'react';
-import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
-import { TooltipComponent } from '@syncfusion/ej2-react-popups';
-import { ACTION_BUTTON_ICONS, ACTION_BUTTON_LABELS, ActionButtonType } from '../../types/ActionButtons';
-import { MenuComponent } from '@syncfusion/ej2-react-navigations';
-const UI_TYPE = {
-    'textbox': { type: 'string', diplayText: "Text Box" },
-    'textarea': { type: 'string', diplayText: "Text Area" },
-    'inputMask': { type: 'string', diplayText: "Input Mask" },
-    'number': { type: 'numeric', diplayText: "Number" },
-    'rangeSlider': { type: 'numeric', diplayText: "Range Slider" },
-    'rating': { type: 'numeric', diplayText: "Rating" },
-    'checkbox': { type: 'boolean', diplayText: "Checkbox" },
-    'switch': { type: 'boolean', diplayText: "Switch" },
-    'date': { type: 'date', diplayText: "Date" },
-    'dateTime': { type: 'date', diplayText: "Date / Time" },
-    'time': { type: 'date', diplayText: "Time" },
-    'dateRange': { type: 'date', diplayText: "Date Range" },
-    'multiselect': { type: 'array', diplayText: "Multi Select" },
-    'checkboxGroup': { type: 'array', diplayText: "Checkbox Group" },
-    'dropdown': { type: 'string', diplayText: "Dropdown List" },
-    'radio': { type: 'string', diplayText: "Radio Button" },
-    'colorPicker': { type: 'string', diplayText: "Color Picker" }
-};
-function generateWidgetMenuItems(currentWidgetType) {
-    const currentSemantic = UI_TYPE[currentWidgetType]?.type;
-    if (!currentSemantic) {
-        return { items: [], hasValidType: false };
-    }
-    const grouped = {};
-    Object.entries(UI_TYPE).forEach(([widget, mapping]) => {
-        if (mapping?.type) {
-            if (!grouped[mapping.type])
-                grouped[mapping.type] = [];
-            grouped[mapping.type].push(widget);
-        }
-    });
-    const items = [];
-    const matching = grouped[currentSemantic]
-        .filter(w => w !== currentWidgetType)
-        .map(w => ({ text: UI_TYPE[w]?.diplayText || w, data: w }));
-    items.push(...matching);
-    Object.keys(grouped)
-        .filter(k => k !== currentSemantic)
-        .sort()
-        .forEach(sem => {
-        const widgets = grouped[sem].map(w => ({ text: UI_TYPE[w]?.diplayText || w, data: w }));
-        items.push({
-            text: sem.charAt(0).toUpperCase() + sem.slice(1),
-            items: widgets
-        });
-    });
-    return { items, hasValidType: true };
-}
-export const FormFieldWrapper = React.memo(({ component, onEdit, onCopy, onPaste, onDelete, onSwitchWidget, onMoveUp, onMoveDown, onNestedMoveUp, onNestedMoveDown, isNested, nestingContext, children, isActive, index, totalCount, mode, hasClipboardData }) => {
-    const handleEdit = useCallback(() => onEdit(component.id), [onEdit, component.id]);
-    const handleCopy = useCallback(() => onCopy(component), [onCopy, component]);
-    const handlePaste = useCallback(() => onPaste(component.id), [onPaste, component.id]);
-    const handleDelete = useCallback(() => onDelete(component.id), [onDelete, component.id]);
-    const handleSwitchWidget = useCallback((args) => {
-        const widgetType = args?.item?.data || args?.item?.text || '';
-        if (onSwitchWidget && widgetType) {
-            onSwitchWidget(component.id, widgetType);
-        }
-    }, [onSwitchWidget, component.id]);
-    const handleMoveUp = useCallback(() => {
-        if (isNested && onNestedMoveUp && nestingContext) {
-            onNestedMoveUp(component.id, nestingContext.parentId, nestingContext.parentPath, nestingContext.cellInfo);
-        }
-        else if (!isNested && onMoveUp) {
-            onMoveUp(component.id);
-        }
-    }, [isNested, onMoveUp, onNestedMoveUp, component.id, nestingContext]);
-    const handleMoveDown = useCallback(() => {
-        if (isNested && onNestedMoveDown && nestingContext) {
-            onNestedMoveDown(component.id, nestingContext.parentId, nestingContext.parentPath, nestingContext.cellInfo);
-        }
-        else if (!isNested && onMoveDown) {
-            onMoveDown(component.id);
-        }
-    }, [isNested, onMoveDown, onNestedMoveDown, component.id, nestingContext]);
-    const { items: menuItemsContent, hasValidType } = generateWidgetMenuItems(component.type);
-    const menuItems = [
-        {
-            text: '',
-            cssClass: 'parent-menuitem',
-            iconCss: ACTION_BUTTON_ICONS[ActionButtonType.SWITCH_WIDGET],
-            items: menuItemsContent
-        }
-    ];
-    return (_jsxs("div", { "aria-label": `${component.label} ${component.type}`, "aria-pressed": isActive, tabIndex: 0, className: `form-field-wrapper${isActive ? ' is-active' : ''}`, style: { padding: "5px" }, "data-field-id": component.id, onClick: e => {
-            e.preventDefault();
-            if (e.target.closest('.action-buttons'))
-                return;
-            e.stopPropagation();
-            handleEdit();
-        }, onKeyDown: e => {
-            if (e.code === 'Enter') {
-                e.preventDefault();
-                if (e.target.closest('.action-buttons'))
-                    return;
-                e.stopPropagation();
-                handleEdit();
-            }
-        }, children: [_jsx("div", { className: "action-button-wrapper", children: _jsxs("div", { className: "action-buttons", role: "toolbar", "aria-label": "Field actions", children: [(index === undefined || index > 0) && (_jsx(ButtonComponent, { iconCss: 'e-icons e-arrow-up', cssClass: "e-small e-flat action-btn", type: 'button', "aria-label": "Move up", onClick: handleMoveUp })), (totalCount === undefined || index === undefined || index < totalCount - 1) && (_jsx(ButtonComponent, { iconCss: 'e-icons e-arrow-down', cssClass: "e-small e-flat action-btn", type: 'button', "aria-label": "Move down", onClick: handleMoveDown })), _jsx(ButtonComponent, { iconCss: ACTION_BUTTON_ICONS[ActionButtonType.PASTE], cssClass: "e-small e-flat action-btn", type: 'button', style: { display: hasClipboardData ? 'block' : 'none' }, "aria-label": ACTION_BUTTON_LABELS[ActionButtonType.PASTE], onClick: handlePaste }), onSwitchWidget && hasValidType && mode === 'Developer' && (_jsx(MenuComponent, { className: "change-component", style: { display: 'none', overflow: 'hidden' }, items: menuItems, showItemOnClick: true, select: handleSwitchWidget, "aria-label": ACTION_BUTTON_LABELS[ActionButtonType.SWITCH_WIDGET] }, component.id)), _jsx(ButtonComponent, { iconCss: ACTION_BUTTON_ICONS[ActionButtonType.COPY], cssClass: "e-small e-flat action-btn", type: 'button', "aria-label": ACTION_BUTTON_LABELS[ActionButtonType.COPY], onClick: handleCopy }), _jsx(ButtonComponent, { iconCss: ACTION_BUTTON_ICONS[ActionButtonType.DELETE], cssClass: "e-small e-flat action-btn", type: 'button', "aria-label": ACTION_BUTTON_LABELS[ActionButtonType.DELETE], onClick: handleDelete })] }) }), _jsx(TooltipComponent, { target: ".action-buttons .action-btn", position: "TopCenter", showTipPointer: true, opensOn: "Hover" }), children] }));
-}, (prev, next) => {
-    // Re-render if component changes (shallow comparison)
-    // This allows updates when component properties change
-    return prev.component === next.component && prev.children === next.children && prev.hasClipboardData === next.hasClipboardData;
-});
-FormFieldWrapper.displayName = 'FormFieldWrapper';

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

@@ -1,23 +0,0 @@
-import React from 'react';
-import { type PaletteComponent, type PaletteConfig, type FormComponent } from '../../types/FormSchema';
-import type { DefaultTemplates } from '../../types/FormSchema';
-import type { FieldDragStartedEventArgs } from '../../FormBuilder';
-interface LeftPaneProps {
-    className?: string;
-    onDragStart?: (component: PaletteComponent) => void;
-    templates?: DefaultTemplates[];
-    paletteConfig?: PaletteConfig;
-    onFieldDragStarted?: (args: FieldDragStartedEventArgs) => void;
-    mode?: 'Simple' | 'Developer';
-    /** Mobile breakpoint toggle - when true, palette items become click-to-add */
-    isMobile?: boolean;
-    /** Drop handler invoked when a palette item is clicked (mobile mode) */
-    onDrop?: (component: FormComponent, dropTargetIndex?: number | null, dropPosition?: 'before' | 'after' | null) => void;
-    containerWidth?: number;
-}
-export declare const floatFocus: (args: any) => void;
-export declare const floatBlur: (args: any) => void;
-export declare const getIconComponent: (type: string) => React.JSX.Element;
-export declare const simpleModeHiddenTypes: Set<string>;
-declare const LeftPane: React.FC<LeftPaneProps>;
-export default LeftPane;