@pixelated-tech/components 3.2.13 → 3.3.0

package/dist/components/{pagebuilder → sitebuilder}/form/form.css

@@ -59,43 +59,68 @@ form span {
 	vertical-align: middle;
 }
 
-.tooltip {
-	display: inline;
-	margin-right: 10px;
+
+/* ========================================
+==============    TOOLTIP    ==============
+======================================== */
+   
+.tooltip-container {
+	display: inline-block;
 	position: relative;
+	margin-left: 5px;
+	vertical-align: middle;
 }
 
-.tooltipIcon {
-  	/* display: inline;
-	color: white !important;
-    background-color: #369;
-    border-radius: 20px;
-    padding: 0 3px; */
-    vertical-align: middle;
+.tooltip-icon {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	font-size: 1.0rem;
+	font-weight: bold;
+	cursor: pointer;
+	padding: 0 3px;
+	line-height: 1;
+	color: #00F;
 }
 
-.tooltipIcon img {
-  	width: 20px;
-	margin: 5px 0 0 -10px;
-	background-color: #DDD;
-    border-radius: 5px;
+.tooltip-icon-validate {
+	color: #d00;
 }
 
-.tooltipText {
-  	display: none;
+.tooltip-text {
 	position: absolute;
-	top: -25px;
-    left: 25px;
-	width: 200px;
-	padding: 3px 8px;
-	color: #fff;
-	text-align: center;
-	background-color: #666;
-    border: 1px solid white;
-    border-radius: 4px;
-    box-shadow: -3px 0 10px #369, 0 3px 10px #369, 3px 0 10px #369, 0 -3px 10px #369;
+	top: -15px;
+	left: 35px;
+	min-width: 200px;
+	max-width: 300px;
+	padding: 8px 12px;
+	background-color: #333;
+	color: white;
+	border-radius: 4px;
+	box-shadow: 0 2px 8px rgba(0,0,0,0.3);
+	z-index: 1000;
+	font-size: 0.9em;
+	white-space: normal;
 }
-.tooltip a {
-	/* pointer-events: none; */
-	text-decoration: none;
+
+.tooltip-text::before {
+	content: '';
+	position: absolute;
+	top: 50%;
+	left: -8px;
+	transform: translateY(-50%);
+	width: 0;
+	height: 0;
+	border-top: 8px solid transparent;
+	border-bottom: 8px solid transparent;
+	border-right: 8px solid #333;
+	z-index: 1001;
+}
+
+.tooltip-text-item {
+	margin-bottom: 4px;
+}
+
+.tooltip-text-item:last-child {
+	margin-bottom: 0;
 }

package/dist/components/sitebuilder/form/formbuilder.js

@@ -0,0 +1,106 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import PropTypes from 'prop-types';
+import * as FC from './formcomponents';
+import { mapTypeToComponent, generateTypeField, debug } from './formutils';
+import { FormEngine } from './formengine';
+/* =====  FORM BUILDER =====
+Display all the components for a Form Builder -
+Element Buttons, Element Details, and the Form */
+export function FormBuilder() {
+    const [formData, setFormData] = useState({ fields: [] });
+    const [fieldFormData, setFieldFormData] = useState({ fields: [] });
+    function appendFormData(event) {
+        // APPEND JSON FOR NEW FIELD TO EXISTING JSON CONFIG OBJECT - EXPOSED EXTERNAL
+        if (debug)
+            console.log("Appending form Data...");
+        const props = {};
+        const target = event.target;
+        for (const prop in target) {
+            const thisProp = target[prop];
+            if (thisProp && thisProp.value && (thisProp.value !== Object(thisProp.value))) {
+                props[thisProp.name] = thisProp.value;
+            }
+        }
+        const field = {};
+        field.props = props;
+        field.component = mapTypeToComponent(field.props.type);
+        let fields = [];
+        if (Object.keys(formData).length > 0) {
+            fields = JSON.parse(JSON.stringify(formData.fields));
+        }
+        fields[fields.length] = field;
+        setFormData({ fields: fields });
+        setFieldFormData({ fields: [] });
+        return (field);
+    }
+    /* function getCircularReplacer() {
+        const seen = new WeakSet();
+        return (key, value) => {
+            if (typeof value === 'object' && value !== null) {
+                if (seen.has(value)) {
+                    return ; // return undefined ;
+                }
+                seen.add(value);
+            }
+            return value;
+        };
+    } */
+    return (_jsxs("div", { className: "section-container", children: [_jsxs("div", { style: { display: 'inline-block', verticalAlign: 'top' }, children: [_jsx(FormBuild, { setFormData: setFieldFormData }), _jsx("div", {}), _jsx(FormEngine, { name: "field_props", id: "field_props", onSubmitHandler: appendFormData, formData: fieldFormData })] }), _jsx("div", { style: { display: 'inline-block', verticalAlign: 'top' }, children: _jsx("pre", { style: { width: '100%' }, children: JSON.stringify(formData, null, 2) }) }), _jsxs("div", { children: [_jsx("br", {}), _jsx("br", {}), _jsx("hr", {}), _jsx("br", {}), _jsx("br", {})] }), _jsx("div", { style: { display: 'block', verticalAlign: 'top' }, children: _jsx(FormEngine, { formData: formData || {} }) })] }));
+}
+/*
+===== FORM BUILD =====
+Dynamically generate, component by component, and prop by prop,
+the JSON to create a form via FormEngine
+*/
+FormBuild.propTypes = {
+    setFormData: PropTypes.func.isRequired,
+};
+export function FormBuild(props) {
+    function generateFieldJSON(component, type) {
+        // GENERATE THE JSON TO DISPLAY A FORM TO ADD A FIELD - INTERNAL
+        if (debug)
+            console.log("Generating Form JSON for ", component, " Type : ", type);
+        const form = { fields: [] };
+        let i = 0;
+        for (const prop in FC[component].propTypes) {
+            const field = {};
+            field.component = 'FormInput';
+            const props = {};
+            props.label = prop;
+            props.name = prop;
+            props.id = prop;
+            props.type = 'text';
+            if (prop === 'type') {
+                props.disabled = true;
+                props.value = type;
+                props.list = 'inputTypes';
+            }
+            field.props = props;
+            form.fields[i] = field;
+            i++;
+        }
+        const addButton = {
+            component: 'FormButton',
+            props: {
+                label: 'Add ' + component,
+                type: 'submit',
+                id: 'Add ' + component,
+                text: 'Add ' + component
+            }
+        };
+        form.fields[i] = addButton;
+        return (form);
+    }
+    function handlePhaseOneSubmit(event) {
+        // GENERATE THE JSON TO DISPLAY A FORM TO ADD A FIELD - EXTERNAL
+        const target = event.target;
+        const typeElement = target.elements.namedItem('type');
+        const myType = typeElement ? typeElement.value : '';
+        const myComponent = mapTypeToComponent(myType);
+        const fieldJSON = generateFieldJSON(myComponent, myType);
+        props.setFormData(fieldJSON);
+        return true;
+    }
+    return (_jsx(_Fragment, { children: _jsx(FormEngine, { formData: generateTypeField(), onSubmitHandler: event => { handlePhaseOneSubmit(event); }, name: "build", id: "build", method: "post" }) }));
+}

package/dist/components/sitebuilder/form/formcomponents.js

@@ -0,0 +1,356 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import { validateField } from "./formvalidator";
+import { useFormValidation } from "./formvalidator";
+import * as FVF from "./formfieldvalidations";
+import "./form.css";
+/*
+InferProps to generate Types
+https://amanhimself.dev/blog/prop-types-in-react-and-typescript/#inferring-proptypes-in-typescript
+*/
+// Shared helper to setup input props for form components
+const setupInputProps = (props, display) => {
+    // Clone props efficiently using destructuring instead of JSON.parse/stringify
+    let inputProps = { ...props };
+    // Remove props that shouldn't go to DOM
+    inputProps = Object.fromEntries(Object.entries(inputProps).filter(([key]) => !['display', 'label', 'listItems', 'validate', 'options', 'parent', 'text', 'checked'].includes(key)));
+    // Set className based on display mode
+    inputProps["className"] = (display == "vertical") ? "displayVertical" : "";
+    // Handle controlled vs uncontrolled inputs properly
+    // If value is provided, use it for controlled behavior
+    // Otherwise, use defaultValue for uncontrolled behavior
+    if (props.value !== undefined) {
+        inputProps["value"] = props.value;
+        // Remove defaultValue if value is present to avoid conflicts
+        delete inputProps["defaultValue"];
+    }
+    else if (props.defaultValue !== undefined) {
+        inputProps["defaultValue"] = props.defaultValue;
+    }
+    // For radio buttons, prioritize defaultChecked over checked to let browser handle state
+    // This prevents React's "both checked and defaultChecked" error
+    if (props.type === 'radio' || (props.parent && props.parent.type === 'radio')) {
+        if (props.checked !== undefined) {
+            delete inputProps["checked"];
+        }
+    }
+    return inputProps;
+};
+// Custom hook for common form component logic
+const useFormComponent = (props) => {
+    const [validationState, setValidationState] = useState({ isValid: true, errors: [] });
+    const { validateField: validateFormField } = useFormValidation();
+    // Handle onChange for immediate feedback
+    const handleChange = (event) => {
+        // Determine the value (checkbox vs other)
+        const value = event.target.type === 'checkbox' ? (event.target.checked ? event.target.value : '') : event.target.value;
+        // Call custom onChange handler synchronously so controlled inputs update immediately
+        const customOnChange = props.onChange || (props.parent && props.parent.onChange);
+        if (customOnChange) {
+            try {
+                customOnChange(value);
+            }
+            catch {
+                // swallow handler errors to avoid breaking validation flow
+            }
+        }
+    };
+    // Handle onBlur for full validation
+    const handleBlur = (event) => {
+        validateField(props, event).then(result => {
+            setValidationState(result);
+            if (props.id) {
+                validateFormField(props.id, result.isValid, result.errors);
+            }
+        });
+    };
+    const formValidate = _jsx(FormTooltip, { id: `${props.id}-validate`, mode: "validate", text: validationState.errors });
+    const inputProps = setupInputProps(props, props.display);
+    // Add validation event handlers
+    inputProps["onChange"] = handleChange;
+    inputProps["onBlur"] = handleBlur;
+    inputProps["onInput"] = handleChange; // Also handle onInput for tests
+    return { validationState, formValidate, inputProps, handleChange, handleBlur };
+};
+// Helper function for generating options (used by FormSelect, FormRadio, FormCheckbox)
+const generateOptions = (options, parentProps, prefix, optionComponent) => {
+    let result = [];
+    for (let option in options) {
+        let key = option;
+        let thisOption = options[key];
+        // Create parent object without options to avoid circular references
+        const parentWithoutOptions = Object.fromEntries(Object.entries(parentProps).filter(([key]) => key !== 'options'));
+        thisOption.parent = { ...parentWithoutOptions };
+        let thisKey = prefix + "-" + parentProps.id + "-" + thisOption.value;
+        let newOption = React.createElement(optionComponent, { key: thisKey, ...thisOption });
+        result.push(newOption);
+    }
+    return result;
+};
+FormLabel.propTypes = {
+    id: PropTypes.string.isRequired,
+    label: PropTypes.string,
+    tooltip: PropTypes.string,
+    className: PropTypes.string,
+};
+FormLabel.defaultProps = {
+    id: "",
+    label: "",
+    tooltip: "",
+};
+function FormLabel(props) {
+    return (_jsxs(_Fragment, { children: [props.label && props.id
+                ? _jsx("label", { className: props.className || '', id: `lbl-${props.id}`, htmlFor: props.id, children: props.label })
+                : "", props.tooltip
+                ? _jsx(FormTooltip, { id: props.id, text: [props.tooltip] })
+                : ""] }));
+}
+FormTooltip.propTypes = {
+    id: PropTypes.string,
+    text: PropTypes.arrayOf(PropTypes.string).isRequired,
+    className: PropTypes.string,
+    mode: PropTypes.oneOf(['tooltip', 'validate']),
+};
+FormTooltip.defaultProps = {
+    id: "",
+    mode: 'tooltip',
+};
+function FormTooltip(props) {
+    const mode = props.mode || 'tooltip';
+    if (mode === 'validate' && props.text.length <= 0) {
+        return null;
+    }
+    const [showTooltip, setShowTooltip] = useState(false);
+    const content = props.text.map((item, index) => (_jsx("div", { className: "tooltip-text-item", children: item }, index)));
+    const toggleTooltip = () => setShowTooltip(!showTooltip);
+    const handleKeyDown = (event) => {
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            toggleTooltip();
+        }
+    };
+    const modeIcons = {
+        tooltip: 'ⓘ', // U+24D8
+        validate: '❌' // U+274C
+    };
+    let icon = modeIcons[mode];
+    let mouseEvents = {
+        onMouseEnter: () => setShowTooltip(true),
+        onMouseLeave: () => setShowTooltip(false),
+    };
+    let clickHandler = toggleTooltip;
+    return (_jsx(_Fragment, { children: _jsxs("div", { id: mode + "-" + props.id, className: `tooltip-container ${props.className || ''}`, children: [_jsx("span", { className: "tooltip-icon tooltip-icon-" + mode, ...mouseEvents, onClick: clickHandler, onKeyDown: handleKeyDown, "aria-label": "Show more info", "aria-expanded": showTooltip, "aria-describedby": showTooltip ? `${props.id}-tooltip` : undefined, tabIndex: 0, role: "button", children: icon }), showTooltip && _jsx("div", { className: "tooltip-text", role: "tooltip", id: `${props.id}-tooltip`, children: content })] }) }));
+}
+FormInput.propTypes = {
+    type: PropTypes.string,
+    id: PropTypes.string.isRequired,
+    name: PropTypes.string,
+    defaultValue: PropTypes.string,
+    value: PropTypes.string,
+    list: PropTypes.string,
+    listItems: PropTypes.string, /* this one is mine */
+    size: PropTypes.string,
+    maxLength: PropTypes.string,
+    placeholder: PropTypes.string,
+    autoComplete: PropTypes.string,
+    "aria-label": PropTypes.string,
+    min: PropTypes.string,
+    max: PropTypes.string,
+    step: PropTypes.string,
+    // flag attributes
+    autoFocus: PropTypes.string,
+    disabled: PropTypes.string,
+    readOnly: PropTypes.string,
+    required: PropTypes.string,
+    // className, 
+    // data-mapping, data-component-endpoint, data-testid
+    // aria-invalid, aria-describedby, 
+    // ----- for calculations
+    display: PropTypes.string,
+    label: PropTypes.string,
+    tooltip: PropTypes.string,
+    className: PropTypes.string,
+    validate: PropTypes.string,
+    onChange: PropTypes.func,
+};
+export function FormInput(props) {
+    const { formValidate, inputProps } = useFormComponent(props);
+    let formDataList = props.list && props.list in FVF
+        ? FVF[props.list]
+        : props.list && props.listItems
+            ? props.listItems.split(',')
+            : undefined;
+    return (_jsxs("div", { children: [props.type == "checkbox" ? _jsx("input", { ...inputProps }) : "", _jsx(FormLabel, { id: props.id, label: props.label }, "label-" + props.id), props.tooltip ? _jsx(FormTooltip, { id: props.id, text: [props.tooltip] }) : "", props.display == "vertical" ? formValidate : "", props.type != "checkbox" ? _jsx("input", { ...inputProps }) : "", formDataList && Array.isArray(formDataList) ? _jsx(FormDataList, { id: props.list ?? '', items: formDataList }) : "", props.display != "vertical" ? formValidate : ""] }));
+}
+FormSelect.propTypes = {
+    id: PropTypes.string.isRequired,
+    name: PropTypes.string,
+    size: PropTypes.string,
+    autoComplete: PropTypes.string,
+    defaultValue: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.array
+    ]),
+    // flag attributes
+    autoFocus: PropTypes.string,
+    disabled: PropTypes.string,
+    multiple: PropTypes.string,
+    readOnly: PropTypes.string,
+    required: PropTypes.string,
+    // selected: PropTypes.string, // not used
+    // ----- for calculations
+    options: PropTypes.array,
+    display: PropTypes.string,
+    label: PropTypes.string,
+    tooltip: PropTypes.string,
+    className: PropTypes.string,
+    validate: PropTypes.string,
+    onChange: PropTypes.func,
+};
+export function FormSelect(props) {
+    const { formValidate, inputProps } = useFormComponent(props);
+    const options = generateOptions(props.options || [], props, "select", FormSelectOption);
+    return (_jsxs("div", { children: [_jsx(FormLabel, { id: props.id, label: props.label }, "label-" + props.id), props.tooltip ? _jsx(FormTooltip, { id: props.id, text: [props.tooltip] }) : "", props.display == "vertical" ? formValidate : "", _jsx("select", { ...inputProps, suppressHydrationWarning: true, children: options }), props.display != "vertical" ? formValidate : ""] }));
+}
+FormSelectOption.propTypes = {
+    text: PropTypes.string,
+    value: PropTypes.string,
+    // flag attributes
+    disabled: PropTypes.bool,
+    // selected : PropTypes.string
+};
+function FormSelectOption(props) {
+    const { text, disabled, value, ...otherProps } = props;
+    const inputProps = {
+        ...otherProps,
+        ...(disabled !== null && disabled !== undefined ? { disabled } : {}),
+        ...(value !== null && value !== undefined ? { value } : {})
+    };
+    return (_jsx("option", { ...inputProps, children: text }));
+}
+FormTextarea.propTypes = {
+    id: PropTypes.string.isRequired,
+    name: PropTypes.string,
+    rows: PropTypes.string,
+    cols: PropTypes.string,
+    defaultValue: PropTypes.string,
+    maxLength: PropTypes.number,
+    placeholder: PropTypes.string,
+    autoComplete: PropTypes.string,
+    // flag attributes
+    autoFocus: PropTypes.string,
+    disabled: PropTypes.string,
+    readOnly: PropTypes.string,
+    required: PropTypes.string,
+    // ----- for calculations
+    display: PropTypes.string,
+    label: PropTypes.string,
+    tooltip: PropTypes.string,
+    className: PropTypes.string,
+    validate: PropTypes.string,
+    onChange: PropTypes.func,
+};
+export function FormTextarea(props) {
+    const { formValidate, inputProps } = useFormComponent(props);
+    return (_jsxs("div", { children: [_jsx(FormLabel, { id: props.id, label: props.label }, "label-" + props.id), props.tooltip ? _jsx(FormTooltip, { id: props.id, text: [props.tooltip] }) : "", props.display == "vertical" ? formValidate : "", _jsx("textarea", { ...inputProps }), props.display != "vertical" ? formValidate : ""] }));
+}
+FormRadio.propTypes = {
+    id: PropTypes.string.isRequired, // not using?
+    name: PropTypes.string.isRequired,
+    options: PropTypes.array,
+    // flag attributes
+    autoFocus: PropTypes.string,
+    disabled: PropTypes.string,
+    readOnly: PropTypes.string,
+    required: PropTypes.string,
+    // ? selected: PropTypes.string,
+    // ----- for calculations
+    display: PropTypes.string,
+    label: PropTypes.string,
+    tooltip: PropTypes.string,
+    validate: PropTypes.string,
+    onChange: PropTypes.func,
+};
+export function FormRadio(props) {
+    const { formValidate } = useFormComponent(props);
+    const options = generateOptions(props.options || [], props, "radio", FormRadioOption);
+    return (_jsxs("div", { children: [_jsx(FormLabel, { id: props.name, label: props.label }, "label-" + props.id), props.tooltip ? _jsx(FormTooltip, { id: props.id, text: [props.tooltip] }) : "", props.display == "vertical" ? formValidate : "", options, props.display != "vertical" ? formValidate : ""] }));
+}
+FormRadioOption.propTypes = {
+    name: PropTypes.string,
+    text: PropTypes.string,
+    value: PropTypes.string.isRequired,
+    // flag attributes
+    checked: PropTypes.string,
+    // ----- for calculations
+    parent: PropTypes.any,
+};
+function FormRadioOption(props) {
+    const inputProps = setupInputProps(props);
+    return (_jsxs("span", { className: props.parent.display == "vertical" ? "displayVertical" : "", children: [_jsx("input", { type: "radio", id: `${props.parent.name}-${props.value}`, name: props.parent.name, value: props.value, 
+                // defaultChecked={!!props.checked}
+                defaultChecked: props.checked, required: !!props.parent.required, ...inputProps }), _jsx("label", { htmlFor: `${props.parent.name}-${props.value}`, children: props.text })] }));
+}
+FormCheckbox.propTypes = {
+    id: PropTypes.string.isRequired,
+    name: PropTypes.string.isRequired,
+    options: PropTypes.array,
+    // flag attributes
+    autoFocus: PropTypes.string,
+    disabled: PropTypes.string,
+    readOnly: PropTypes.string,
+    // ----- for calculations
+    display: PropTypes.string,
+    label: PropTypes.string,
+    tooltip: PropTypes.string,
+    className: PropTypes.string,
+    validate: PropTypes.string,
+    onChange: PropTypes.func,
+};
+export function FormCheckbox(props) {
+    const { formValidate } = useFormComponent(props);
+    const options = generateOptions(props.options || [], props, "checkbox", FormCheckboxOption);
+    return (_jsxs("div", { children: [_jsx(FormLabel, { id: props.name, label: props.label }, "label-" + props.id), props.tooltip ? _jsx(FormTooltip, { id: props.id, text: [props.tooltip] }) : "", props.display == "vertical" ? formValidate : "", options, props.display != "vertical" ? formValidate : ""] }));
+}
+FormCheckboxOption.propTypes = {
+    text: PropTypes.string.isRequired,
+    value: PropTypes.string.isRequired,
+    // flag attributes
+    selected: PropTypes.string,
+    // ----- for calculations
+    parent: PropTypes.any,
+};
+function FormCheckboxOption(props) {
+    const inputProps = setupInputProps(props);
+    return (_jsxs("span", { className: props.parent.display == "vertical" ? "displayVertical" : "", children: [_jsx("input", { type: "checkbox", id: props.parent.name + "_" + props.text, name: props.text, value: props.value, ...inputProps }), _jsx("label", { htmlFor: props.text, children: props.text })] }));
+}
+FormButton.propTypes = {
+    type: PropTypes.string,
+    id: PropTypes.string.isRequired,
+    text: PropTypes.string,
+    // ----- for calculations
+    className: PropTypes.string,
+    onClick: PropTypes.func.isRequired
+};
+export function FormButton(props) {
+    return (_jsx("div", { children: _jsx("button", { type: props.type, id: props.id, className: props.className || "", onClick: props.onClick, children: props.text }) }));
+}
+FormDataList.propTypes = {
+    id: PropTypes.string.isRequired,
+    items: PropTypes.array,
+};
+export function FormDataList(props) {
+    const options = [];
+    for (const item in props.items) {
+        let key = item;
+        const thisItem = props.items[key];
+        const newOption = _jsx("option", { value: thisItem }, props.id + '-' + thisItem);
+        options.push(newOption);
+    }
+    return (_jsx("datalist", { id: props.id, children: options }));
+}
+FormFieldset.propTypes = {};
+export function FormFieldset() {
+    return (_jsx(_Fragment, {}));
+}

package/dist/components/sitebuilder/form/formengine.js

@@ -0,0 +1,82 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import PropTypes from 'prop-types';
+import * as FC from './formcomponents';
+import { generateKey } from './formutils';
+import { FormValidationProvider, useFormValidation } from './formvalidator';
+const debug = false;
+/* ===== FORM ENGINE =====
+Generate all the elements to display a form */
+FormEngine.propTypes = {
+    name: PropTypes.string,
+    id: PropTypes.string,
+    method: PropTypes.string,
+    onSubmitHandler: PropTypes.func,
+    formData: PropTypes.object.isRequired
+};
+function FormEngineInner(props) {
+    const { validateAllFields } = useFormValidation();
+    function generateFormProps(props) {
+        // GENERATE PROPS TO RENDER THE FORM CONTAINER, INTERNAL FUNCTION
+        if (debug)
+            console.log("Generating Form Props");
+        const formProps = JSON.parse(JSON.stringify(props));
+        ['formData', 'onSubmitHandler'].forEach(e => delete formProps[e]);
+        return formProps;
+    }
+    generateNewFields.propTypes = {
+        formData: PropTypes.any.isRequired,
+    };
+    function generateNewFields(props) {
+        // CORE OF THE FORM ENGINE - CONVERT JSON TO COMPONENTS - INTERNAL
+        if (debug)
+            console.log("Generating Form Fields");
+        const newFields = [];
+        const formFields = props.formData.fields;
+        if (props.formData && formFields) {
+            // const thisFields = formFields;
+            for (let field = 0; field < formFields.length; field++) {
+                const thisField = formFields[field];
+                // Shallow clone props to preserve function handlers (JSON stringify drops functions)
+                const newProps = { ...thisField.props };
+                newProps.key = thisField.props.id || generateKey();
+                // Convert string numeric props to numbers where needed
+                const numericProps = ['maxLength', 'minLength', 'rows', 'cols', 'size', 'step'];
+                numericProps.forEach(prop => {
+                    if (newProps[prop] !== undefined &&
+                        newProps[prop] !== null &&
+                        newProps[prop] !== '') {
+                        // Only convert if the value is not already a number
+                        if (typeof newProps[prop] === 'string') {
+                            const num = Number(newProps[prop]);
+                            if (!isNaN(num)) {
+                                newProps[prop] = num;
+                            }
+                        }
+                    }
+                });
+                const componentName = thisField.component;
+                const newElementType = FC[componentName];
+                const newElement = React.createElement(newElementType, newProps);
+                newFields.push(newElement);
+            }
+        }
+        return newFields;
+    }
+    function handleSubmit(event) {
+        // HANDLES THE FORM ACTION / FORM SUBMIT - EXPOSED EXTERNAL
+        event.preventDefault();
+        // Check if form is valid before submission
+        if (!validateAllFields()) {
+            // Form has validation errors, don't submit
+            return false;
+        }
+        if (props.onSubmitHandler)
+            props.onSubmitHandler(event);
+        return true;
+    }
+    return (_jsx("form", { ...generateFormProps(props), onSubmit: (event) => { handleSubmit(event); }, suppressHydrationWarning: true, children: generateNewFields(props) }));
+}
+export function FormEngine(props) {
+    return (_jsx(FormValidationProvider, { children: _jsx(FormEngineInner, { ...props }) }));
+}