xmlui 0.4.0

package/dist/scripts/src/components/Form/Form.js

@@ -0,0 +1,320 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.formComponentRenderer = exports.getByPath = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("react");
+const Form_module_scss_1 = __importDefault(require("./Form.module.scss"));
+const renderers_1 = require("@components-core/renderers");
+const themeVars_1 = require("@components-core/theming/themeVars");
+const immer_1 = __importDefault(require("immer"));
+const FormContext_1 = require("./FormContext");
+const Button_1 = require("@components/Button/Button");
+const constants_1 = require("@components-core/constants");
+const ValidationSummary_1 = require("@components/ValidationSummary/ValidationSummary");
+const misc_1 = require("@components-core/utils/misc");
+const Validations_1 = require("@components/FormItem/Validations");
+const formActions_1 = require("@components/Form/formActions");
+const ModalDialog_1 = require("@components/ModalDialog/ModalDialog");
+const Text_1 = require("@components/Text/Text");
+const Stack_1 = require("@components/Stack/Stack");
+const descriptorHelper_1 = require("@components-core/descriptorHelper");
+const setByPath = (obj, path, val) => {
+    const keys = path.split(".");
+    for (let i = 0; i < keys.length; i++) {
+        const currentKey = keys[i];
+        const nextKey = keys[i + 1];
+        if (typeof nextKey !== "undefined") {
+            obj[currentKey] = obj[currentKey] ? obj[currentKey] : {};
+        }
+        else {
+            obj[currentKey] = val;
+        }
+        obj = obj[currentKey];
+    }
+};
+const getByPath = (obj, path) => {
+    const keys = path.split(".");
+    let ret = obj;
+    for (let i = 0; i < keys.length; i++) {
+        ret = ret === null || ret === void 0 ? void 0 : ret[keys[i]];
+    }
+    return ret;
+};
+exports.getByPath = getByPath;
+const formReducer = (0, immer_1.default)((state, action) => {
+    var _a, _b, _c, _d;
+    const { uid } = action.payload;
+    if (uid !== undefined && !state.interactionFlags[uid]) {
+        state.interactionFlags[uid] = {
+            isDirty: false,
+            invalidToValid: false,
+            isValidOnFocus: false,
+            isValidLostFocus: false,
+            focused: false,
+            forceShowValidationResult: false,
+        };
+    }
+    switch (action.type) {
+        case formActions_1.FormActionKind.FIELD_INITIALIZED: {
+            setByPath(state.subject, uid, action.payload.value);
+            state.interactionFlags[uid].isDirty = false;
+            break;
+        }
+        case formActions_1.FormActionKind.FIELD_VALUE_CHANGED: {
+            setByPath(state.subject, uid, action.payload.value);
+            state.interactionFlags[uid].isDirty = true;
+            state.interactionFlags[uid].forceShowValidationResult = false;
+            break;
+        }
+        case formActions_1.FormActionKind.FIELD_VALIDATED: {
+            // it means no validation happened, ignore it
+            if (action.payload.validationResult.validations.length === 0) {
+                delete state.validationResults[uid];
+                break;
+            }
+            const prevValid = (_a = state.validationResults[uid]) === null || _a === void 0 ? void 0 : _a.isValid;
+            //if it's a partial validation (without the async stuff), we leave the previous async validations there as a stale placeholder
+            if (action.payload.validationResult.partial) {
+                const mergedValidations = [
+                    ...action.payload.validationResult.validations,
+                    ...(((_b = state.validationResults[uid]) === null || _b === void 0 ? void 0 : _b.validations.filter((val) => val.async)) || []).map((val) => (Object.assign(Object.assign({}, val), { stale: true }))),
+                ];
+                state.validationResults[uid] = Object.assign(Object.assign({}, action.payload.validationResult), { isValid: mergedValidations.find((val) => !val.isValid) === undefined, validations: mergedValidations });
+            }
+            else {
+                state.validationResults[uid] = action.payload.validationResult;
+            }
+            state.interactionFlags[uid].invalidToValid = !prevValid && state.validationResults[uid].isValid;
+            break;
+        }
+        case formActions_1.FormActionKind.FIELD_FOCUSED: {
+            state.interactionFlags[uid].isValidOnFocus = !!((_c = state.validationResults[uid]) === null || _c === void 0 ? void 0 : _c.isValid);
+            state.interactionFlags[uid].focused = true;
+            break;
+        }
+        case formActions_1.FormActionKind.FIELD_LOST_FOCUS: {
+            state.interactionFlags[uid].isValidLostFocus = !!((_d = state.validationResults[uid]) === null || _d === void 0 ? void 0 : _d.isValid);
+            state.interactionFlags[uid].focused = false;
+            break;
+        }
+        case formActions_1.FormActionKind.TRIED_TO_SUBMIT: {
+            Object.keys(state.interactionFlags).forEach((key) => {
+                state.interactionFlags[key].forceShowValidationResult = true;
+            });
+            break;
+        }
+        case formActions_1.FormActionKind.SUBMITTED: {
+            state.generalValidationResults = [];
+            state.interactionFlags = {};
+            Object.keys(state.validationResults).forEach((key) => {
+                var _a;
+                state.validationResults[key].validations = (_a = state.validationResults[key].validations) === null || _a === void 0 ? void 0 : _a.filter((validation) => !validation.fromBackend);
+                state.validationResults[key].isValid =
+                    state.validationResults[key].validations.find((val) => !val.isValid) === undefined;
+            });
+            break;
+        }
+        case formActions_1.FormActionKind.BACKEND_VALIDATION_ARRIVED: {
+            state.generalValidationResults = action.payload.generalValidationResults;
+            Object.keys(state.validationResults).forEach((key) => {
+                var _a;
+                state.validationResults[key].validations = (_a = state.validationResults[key].validations) === null || _a === void 0 ? void 0 : _a.filter((validation) => !validation.fromBackend);
+            });
+            Object.entries(action.payload.fieldValidationResults).forEach(([field, singleValidationResults]) => {
+                var _a;
+                state.validationResults[field].validations = [
+                    ...(((_a = state.validationResults[field]) === null || _a === void 0 ? void 0 : _a.validations) || []),
+                    ...(singleValidationResults || []),
+                ];
+                state.validationResults[field].isValid =
+                    state.validationResults[field].validations.find((val) => !val.isValid) === undefined;
+            });
+            break;
+        }
+        default:
+    }
+});
+const initialState = {
+    subject: {},
+    validationResults: {},
+    generalValidationResults: [],
+    interactionFlags: {},
+};
+const Form = (0, react_2.forwardRef)(function ({ formState, dispatch, initialValue = constants_1.EMPTY_OBJECT, children, style, enabled = true, cancelLabel = "Cancel", saveLabel = "Save", swapCancelAndSave, onSubmit, onCancel, onReset, buttonRow, id, registerComponentApi, itemLabelBreak = true, itemLabelWidth, itemLabelPosition = "top", }, ref) {
+    const [confirmSubmitModalVisible, setConfirmSubmitModalVisible] = (0, react_2.useState)(false);
+    const formContextValue = (0, react_2.useMemo)(() => {
+        return {
+            itemLabelBreak,
+            itemLabelWidth,
+            itemLabelPosition,
+            subject: formState.subject,
+            originalSubject: initialValue,
+            validationResults: formState.validationResults,
+            interactionFlags: formState.interactionFlags,
+            dispatch,
+        };
+    }, [
+        dispatch,
+        formState.interactionFlags,
+        formState.subject,
+        formState.validationResults,
+        initialValue,
+        itemLabelBreak,
+        itemLabelPosition,
+        itemLabelWidth,
+    ]);
+    const doSubmit = (0, misc_1.useEvent)((event) => __awaiter(this, void 0, void 0, function* () {
+        var _a;
+        event === null || event === void 0 ? void 0 : event.preventDefault();
+        if (!enabled) {
+            return;
+        }
+        setConfirmSubmitModalVisible(false);
+        dispatch((0, formActions_1.triedToSubmit)());
+        const { error, warning } = (0, Validations_1.groupInvalidValidationResultsBySeverity)(Object.values(formState.validationResults));
+        if (error.length) {
+            return;
+        }
+        if (warning.length && !confirmSubmitModalVisible) {
+            setConfirmSubmitModalVisible(true);
+            return;
+        }
+        try {
+            yield (onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(formState.subject, {
+                passAsDefaultBody: true,
+            }));
+            dispatch((0, formActions_1.formSubmitted)());
+        }
+        catch (e) {
+            const generalValidationResults = [];
+            const fieldValidationResults = {};
+            if (e instanceof Error &&
+                "errorCategory" in e &&
+                e.errorCategory === "GenericBackendError" &&
+                ((_a = e.details) === null || _a === void 0 ? void 0 : _a.issues) &&
+                Array.isArray(e.details.issues)) {
+                e.details.issues.forEach((issue) => {
+                    const validationResult = {
+                        isValid: false,
+                        invalidMessage: issue.message,
+                        severity: issue.severity || "error",
+                        fromBackend: true,
+                    };
+                    if (issue.field !== undefined) {
+                        fieldValidationResults[issue.field] = fieldValidationResults[issue.field] || [];
+                        fieldValidationResults[issue.field].push(validationResult);
+                    }
+                    else {
+                        generalValidationResults.push(validationResult);
+                    }
+                });
+            }
+            else {
+                generalValidationResults.push({
+                    isValid: false,
+                    invalidMessage: e.message || "Couldn't save the form.",
+                    severity: "error",
+                    fromBackend: true,
+                });
+            }
+            dispatch((0, formActions_1.backendValidationArrived)({
+                generalValidationResults,
+                fieldValidationResults,
+            }));
+        }
+    }));
+    const [key, setKey] = (0, react_2.useState)(1);
+    const doReset = (0, misc_1.useEvent)(() => {
+        setKey((prev) => prev + 1);
+        onReset === null || onReset === void 0 ? void 0 : onReset();
+    });
+    const cancelButton = ((0, jsx_runtime_1.jsx)(Button_1.Button, { type: "button", themeColor: "secondary", variant: "ghost", onClick: onCancel, children: cancelLabel }, "cancel"));
+    const submitButton = ((0, jsx_runtime_1.jsx)(Button_1.Button, { type: "submit", children: saveLabel }, "submit"));
+    (0, react_1.useEffect)(() => {
+        registerComponentApi === null || registerComponentApi === void 0 ? void 0 : registerComponentApi({
+            reset: doReset,
+        });
+    }, [doReset, registerComponentApi]);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("form", { style: style, className: Form_module_scss_1.default.wrapper, onSubmit: doSubmit, onReset: doReset, id: id, ref: ref, children: [(0, jsx_runtime_1.jsx)(ValidationSummary_1.ValidationSummary, { generalValidationResults: formState.generalValidationResults }), (0, jsx_runtime_1.jsx)(FormContext_1.FormContext.Provider, { value: formContextValue, children: children }), buttonRow || ((0, jsx_runtime_1.jsxs)("div", { className: Form_module_scss_1.default.buttonRow, children: [swapCancelAndSave && [submitButton, cancelButton], !swapCancelAndSave && [cancelButton, submitButton]] }))] }, key), confirmSubmitModalVisible && ((0, jsx_runtime_1.jsx)(ModalDialog_1.ModalDialog, { onClose: () => setConfirmSubmitModalVisible(false), isInitiallyOpen: true, title: "Are you sure want to move forward?", children: (0, jsx_runtime_1.jsxs)(Stack_1.Stack, { orientation: "vertical", layout: { gap: "0.5rem" }, children: [(0, jsx_runtime_1.jsx)(Text_1.Text, { children: "The following warnings were found during validation. Please make sure you are willing to move forward despite these issues." }), (0, jsx_runtime_1.jsx)(ValidationSummary_1.ValidationSummary, { generalValidationResults: formState.generalValidationResults, fieldValidationResults: formState.validationResults }), (0, jsx_runtime_1.jsxs)(Stack_1.Stack, { orientation: "horizontal", horizontalAlignment: "end", layout: { gap: "1em" }, children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "ghost", themeColor: "secondary", onClick: () => setConfirmSubmitModalVisible(false), children: "No" }), (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: () => doSubmit(), autoFocus: true, children: "Yes, proceed" })] })] }) }))] }));
+});
+Form.displayName = "Form";
+const metadata = {
+    displayName: "Form",
+    description: "Manages editing, validating and saving compound data in the UI",
+    props: {
+        buttonRowTemplate: {
+            description: "The template encapsulating form buttons",
+            valueType: "ComponentDef",
+        },
+        subject: (0, descriptorHelper_1.desc)("The data structure managed by the form"),
+        swapCancelAndSave: (0, descriptorHelper_1.desc)("Swap the Cancel and Save buttons?"),
+        cancelLabel: (0, descriptorHelper_1.desc)("The label of the Cancel button"),
+        saveLabel: (0, descriptorHelper_1.desc)("The label of the Save button"),
+    },
+    events: {
+        submit: (0, descriptorHelper_1.desc)("Triggers when the form data is about to save"),
+        reset: (0, descriptorHelper_1.desc)("Triggers when the form data is about to reset"),
+    },
+    themeVars: (0, themeVars_1.parseScssVar)(Form_module_scss_1.default.themeVars),
+    defaultThemeVars: {
+        "gap-Form": "$space-4",
+        "gap-buttonRow-Form": "$space-4",
+        light: {
+            "color-bg-ValidationDisplay-error": "$color-danger-100",
+            "color-bg-ValidationDisplay-warning": "$color-warn-100",
+            "color-bg-ValidationDisplay-info": "$color-primary-100",
+            "color-bg-ValidationDisplay-valid": "$color-success-100",
+            "color-accent-ValidationDisplay-error": "$color-error",
+            "color-accent-ValidationDisplay-warning": "$color-warning",
+            "color-accent-ValidationDisplay-info": "$color-info",
+            "color-accent-ValidationDisplay-valid": "$color-valid",
+            "color-text-ValidationDisplay-error": "$color-error",
+            "color-text-ValidationDisplay-warning": "$color-warning",
+            "color-text-ValidationDisplay-info": "$color-info",
+            "color-text-ValidationDisplay-valid": "$color-valid",
+        },
+        dark: {
+            "color-bg-ValidationDisplay-error": "$color-danger-900",
+            "color-bg-ValidationDisplay-warning": "$color-warn-900",
+            "color-bg-ValidationDisplay-info": "$color-secondary-800",
+            "color-bg-ValidationDisplay-valid": "$color-success-900",
+            "color-accent-ValidationDisplay-error": "$color-danger-500",
+            "color-accent-ValidationDisplay-warning": "$color-warn-700",
+            "color-accent-ValidationDisplay-info": "$color-surface-200",
+            "color-accent-ValidationDisplay-valid": "$color-success-600",
+            "color-text-ValidationDisplay-error": "$color-danger-500",
+            "color-text-ValidationDisplay-warning": "$color-warn-700",
+            "color-text-ValidationDisplay-info": "$color-secondary-200",
+            "color-text-ValidationDisplay-valid": "$color-success-600",
+        },
+    },
+};
+function FormWithContextVar({ node, renderChild, extractValue, layoutCss, lookupEventHandler, registerComponentApi, }) {
+    const [formState, dispatch] = (0, react_2.useReducer)(formReducer, initialState);
+    const nodeWithItem = (0, react_2.useMemo)(() => {
+        return {
+            type: "Fragment",
+            vars: {
+                $subject: formState.subject,
+            },
+            children: node.children,
+        };
+    }, [formState.subject, node.children]);
+    return ((0, jsx_runtime_1.jsx)(Form, { itemLabelPosition: extractValue.asOptionalString(node.props.itemLabelPosition), itemLabelBreak: extractValue.asOptionalBoolean(node.props.itemLabelBreak), itemLabelWidth: extractValue.asOptionalString(node.props.itemLabelWidth), formState: formState, dispatch: dispatch, id: node.uid, style: layoutCss, cancelLabel: extractValue(node.props.cancelLabel), saveLabel: extractValue(node.props.saveLabel), swapCancelAndSave: extractValue.asOptionalBoolean(node.props.swapCancelAndSave, false), onSubmit: lookupEventHandler("submit"), onCancel: lookupEventHandler("cancel"), onReset: lookupEventHandler("reset"), initialValue: extractValue(node.props.subject), buttonRow: renderChild(node.props.buttonRowTemplate), registerComponentApi: registerComponentApi, children: renderChild(nodeWithItem) }));
+}
+exports.formComponentRenderer = (0, renderers_1.createComponentRenderer)("Form", ({ node, renderChild, extractValue, layoutCss, lookupEventHandler, registerComponentApi }) => {
+    return ((0, jsx_runtime_1.jsx)(FormWithContextVar, { node: node, renderChild: renderChild, extractValue: extractValue, lookupEventHandler: lookupEventHandler, layoutCss: layoutCss, registerComponentApi: registerComponentApi }));
+}, metadata);

package/dist/scripts/src/components/Form/FormContext.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormContext = void 0;
+exports.useFormContextPart = useFormContextPart;
+const use_context_selector_1 = require("use-context-selector");
+exports.FormContext = (0, use_context_selector_1.createContext)(undefined);
+function useFormContextPart(selector) {
+    return (0, use_context_selector_1.useContextSelector)(exports.FormContext, selector);
+}

package/dist/scripts/src/components/Form/formActions.js

@@ -0,0 +1,86 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormActionKind = void 0;
+exports.fieldInitialized = fieldInitialized;
+exports.fieldChanged = fieldChanged;
+exports.fieldFocused = fieldFocused;
+exports.fieldLostFocus = fieldLostFocus;
+exports.fieldValidated = fieldValidated;
+exports.triedToSubmit = triedToSubmit;
+exports.formSubmitted = formSubmitted;
+exports.backendValidationArrived = backendValidationArrived;
+var FormActionKind;
+(function (FormActionKind) {
+    FormActionKind["FIELD_LOST_FOCUS"] = "FormActionKind:FIELD_LOST_FOCUS";
+    FormActionKind["FIELD_VALUE_CHANGED"] = "FormActionKind:FIELD_VALUE_CHANGED";
+    FormActionKind["FIELD_FOCUSED"] = "FormActionKind:FIELD_FOCUSED";
+    FormActionKind["FIELD_VALIDATED"] = "FormActionKind:FIELD_VALIDATED";
+    FormActionKind["FIELD_INITIALIZED"] = "FormActionKind:FIELD_INITIALIZED";
+    FormActionKind["TRIED_TO_SUBMIT"] = "FormActionKind:TRIED_TO_SUBMIT";
+    FormActionKind["BACKEND_VALIDATION_ARRIVED"] = "FormActionKind:BACKEND_VALIDATION_ARRIVED";
+    FormActionKind["SUBMITTED"] = "FormActionKind:SUBMITTED";
+})(FormActionKind || (exports.FormActionKind = FormActionKind = {}));
+function fieldInitialized(uid, value) {
+    return {
+        type: FormActionKind.FIELD_INITIALIZED,
+        payload: {
+            uid,
+            value,
+        },
+    };
+}
+function fieldChanged(uid, value) {
+    return {
+        type: FormActionKind.FIELD_VALUE_CHANGED,
+        payload: {
+            uid,
+            value,
+        },
+    };
+}
+function fieldFocused(uid) {
+    return {
+        type: FormActionKind.FIELD_FOCUSED,
+        payload: {
+            uid,
+        },
+    };
+}
+function fieldLostFocus(uid) {
+    return {
+        type: FormActionKind.FIELD_LOST_FOCUS,
+        payload: {
+            uid,
+        },
+    };
+}
+function fieldValidated(uid, validationResult) {
+    return {
+        type: FormActionKind.FIELD_VALIDATED,
+        payload: {
+            uid,
+            validationResult,
+        },
+    };
+}
+function triedToSubmit() {
+    return {
+        type: FormActionKind.TRIED_TO_SUBMIT,
+        payload: {},
+    };
+}
+function formSubmitted() {
+    return {
+        type: FormActionKind.SUBMITTED,
+        payload: {},
+    };
+}
+function backendValidationArrived({ generalValidationResults = [], fieldValidationResults = {} }) {
+    return {
+        type: FormActionKind.BACKEND_VALIDATION_ARRIVED,
+        payload: {
+            generalValidationResults,
+            fieldValidationResults
+        },
+    };
+}

package/dist/scripts/src/components/FormItem/FormItem.js

@@ -0,0 +1,204 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.formItemComponentRenderer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const renderers_1 = require("@components-core/renderers");
+const themeVars_1 = require("@components-core/theming/themeVars");
+const FormItem_module_scss_1 = __importDefault(require("./FormItem.module.scss"));
+const FormContext_1 = require("@components/Form/FormContext");
+const TextBox_1 = require("@components/TextBox/TextBox");
+const Toggle_1 = require("@components/Toggle/Toggle");
+const FileInput_1 = require("@components/FileInput/FileInput");
+const NumberBox_1 = require("@components/NumberBox/NumberBox");
+const Select_1 = require("@components/Select/Select");
+const RadioGroup_1 = require("@components/RadioGroup/RadioGroup");
+const HelperText_1 = require("@components/FormItem/HelperText");
+const react_2 = require("@formkit/auto-animate/react");
+const Validations_1 = require("./Validations");
+const Combobox_1 = require("@components/Combobox/Combobox");
+const MultiCombobox_1 = require("@components/MultiCombobox/MultiCombobox");
+const formActions_1 = require("@components/Form/formActions");
+const TextArea_1 = require("@components/TextArea/TextArea");
+const misc_1 = require("@components-core/utils/misc");
+const MultiSelect_1 = require("@components/MultiSelect/MultiSelect");
+const ItemWithLabel_1 = require("./ItemWithLabel");
+const DatePicker_1 = require("@components/DatePicker/DatePicker");
+const Form_1 = require("@components/Form/Form");
+const valueExtractor_1 = require("@components-core/container/valueExtractor");
+const DEFAULT_LABEL_POSITIONS = {
+    checkbox: "right",
+};
+const FormItem = (0, react_1.memo)(function FormItem(_a) {
+    var { style, bindTo, type = "text", label, enabled = true, labelPosition, labelWidth, labelBreak = true, children, validations, onValidate, customValidationsDebounce, validationMode, registerComponentApi, syncToValidation = true, maxTextLength } = _a, rest = __rest(_a, ["style", "bindTo", "type", "label", "enabled", "labelPosition", "labelWidth", "labelBreak", "children", "validations", "onValidate", "customValidationsDebounce", "validationMode", "registerComponentApi", "syncToValidation", "maxTextLength"]);
+    const labelWidthValue = (0, FormContext_1.useFormContextPart)((value) => labelWidth || value.itemLabelWidth);
+    const labelBreakValue = (0, FormContext_1.useFormContextPart)((value) => (labelBreak !== undefined ? labelBreak : value.itemLabelBreak));
+    const labelPositionValue = (0, FormContext_1.useFormContextPart)((value) => labelPosition || value.itemLabelPosition || DEFAULT_LABEL_POSITIONS[type]);
+    const initialValueFromSubject = (0, FormContext_1.useFormContextPart)((value) => (0, Form_1.getByPath)(value.originalSubject, bindTo));
+    const initialValue = initialValueFromSubject === undefined ? rest.initialValue : initialValueFromSubject;
+    const value = (0, FormContext_1.useFormContextPart)((value) => (0, Form_1.getByPath)(value.subject, bindTo));
+    const validationResult = (0, FormContext_1.useFormContextPart)((value) => value.validationResults[bindTo]);
+    const dispatch = (0, FormContext_1.useFormContextPart)((value) => value.dispatch);
+    (0, react_1.useEffect)(() => {
+        dispatch((0, formActions_1.fieldInitialized)(bindTo, initialValue));
+    }, [bindTo, dispatch, initialValue]);
+    (0, Validations_1.useValidation)(validations, onValidate, value, dispatch, bindTo, customValidationsDebounce);
+    const onStateChange = (0, react_1.useCallback)(({ value }) => {
+        dispatch((0, formActions_1.fieldChanged)(bindTo, value));
+    }, [bindTo, dispatch]);
+    const { validationStatus, isHelperTextShown } = (0, Validations_1.useValidationDisplay)(bindTo, value, validationResult, validationMode);
+    let formControl = null;
+    switch (type) {
+        case "combobox": {
+            formControl = ((0, jsx_runtime_1.jsx)(Combobox_1.Combobox, Object.assign({}, rest, { value: value, updateState: onStateChange, enabled: enabled, validationStatus: validationStatus, registerComponentApi: registerComponentApi, children: children })));
+            break;
+        }
+        case "multiCombobox": {
+            formControl = ((0, jsx_runtime_1.jsx)(MultiCombobox_1.MultiCombobox, Object.assign({}, rest, { value: value, updateState: onStateChange, registerComponentApi: registerComponentApi, enabled: enabled, validationStatus: validationStatus, children: children })));
+            break;
+        }
+        case "select": {
+            formControl = ((0, jsx_runtime_1.jsx)(Select_1.Select, Object.assign({}, rest, { value: value, updateState: onStateChange, registerComponentApi: registerComponentApi, enabled: enabled, validationStatus: validationStatus, children: children })));
+            break;
+        }
+        case "multiSelect": {
+            formControl = ((0, jsx_runtime_1.jsx)(MultiSelect_1.MultiSelect, Object.assign({}, rest, { value: value, updateState: onStateChange, registerComponentApi: registerComponentApi, enabled: enabled, validationStatus: validationStatus, children: children })));
+            break;
+        }
+        case "datePicker": {
+            formControl = ((0, jsx_runtime_1.jsx)(DatePicker_1.DatePicker, Object.assign({}, rest, { value: value, updateState: onStateChange, 
+                // registerComponentApi={registerComponentApi}
+                enabled: enabled, validationStatus: validationStatus })));
+            break;
+        }
+        case "radioGroup": {
+            formControl = ((0, jsx_runtime_1.jsx)(RadioGroup_1.RadioGroup, Object.assign({}, rest, { value: value, updateState: onStateChange, 
+                // registerComponentApi={registerComponentApi}
+                enabled: enabled, validationStatus: validationStatus, children: children })));
+            break;
+        }
+        case "number":
+        case "integer": {
+            formControl = ((0, jsx_runtime_1.jsx)(NumberBox_1.NumberBox, Object.assign({}, rest, { value: value, updateState: onStateChange, registerComponentApi: registerComponentApi, enabled: enabled, integersOnly: type === "integer", validationStatus: validationStatus, min: syncToValidation ? validations.minValue : undefined, max: syncToValidation ? validations.maxValue : undefined, maxLength: maxTextLength !== null && maxTextLength !== void 0 ? maxTextLength : (syncToValidation ? validations === null || validations === void 0 ? void 0 : validations.maxLength : undefined) })));
+            break;
+        }
+        case "switch":
+        case "checkbox": {
+            formControl = ((0, jsx_runtime_1.jsx)(Toggle_1.Toggle, Object.assign({}, rest, { value: value, updateState: onStateChange, 
+                // registerComponentApi={registerComponentApi}
+                enabled: enabled, validationStatus: validationStatus, variant: type })));
+            break;
+        }
+        case "file": {
+            formControl = ((0, jsx_runtime_1.jsx)(FileInput_1.FileInput, Object.assign({}, rest, { value: value, updateState: onStateChange, registerComponentApi: registerComponentApi, enabled: enabled, validationStatus: validationStatus, multiple: (0, valueExtractor_1.asOptionalBoolean)(rest.multiple, false) })));
+            break;
+        }
+        case "text": {
+            formControl = ((0, jsx_runtime_1.jsx)(TextBox_1.TextBox, Object.assign({}, rest, { value: value, updateState: onStateChange, registerComponentApi: registerComponentApi, enabled: enabled, validationStatus: validationStatus, maxLength: maxTextLength !== null && maxTextLength !== void 0 ? maxTextLength : (syncToValidation ? validations === null || validations === void 0 ? void 0 : validations.maxLength : undefined) })));
+            break;
+        }
+        case "password": {
+            formControl = ((0, jsx_runtime_1.jsx)(TextBox_1.TextBox, Object.assign({}, rest, { type: "password", value: value, updateState: onStateChange, registerComponentApi: registerComponentApi, enabled: enabled, validationStatus: validationStatus, maxLength: maxTextLength !== null && maxTextLength !== void 0 ? maxTextLength : (syncToValidation ? validations === null || validations === void 0 ? void 0 : validations.maxLength : undefined) })));
+            break;
+        }
+        case "textarea": {
+            formControl = ((0, jsx_runtime_1.jsx)(TextArea_1.TextArea, Object.assign({}, rest, { value: value, updateState: onStateChange, registerComponentApi: registerComponentApi, enabled: enabled, validationStatus: validationStatus, maxLength: maxTextLength !== null && maxTextLength !== void 0 ? maxTextLength : (syncToValidation ? validations === null || validations === void 0 ? void 0 : validations.maxLength : undefined) })));
+            break;
+        }
+        case "custom": {
+            formControl = children;
+            break;
+        }
+        default: {
+            console.warn(`unknown form item type ${type}`);
+            formControl = (0, jsx_runtime_1.jsx)("div", { children: value });
+            break;
+        }
+    }
+    const onFocus = (0, misc_1.useEvent)(() => {
+        dispatch((0, formActions_1.fieldFocused)(bindTo));
+    });
+    const onBlur = (0, misc_1.useEvent)(() => {
+        dispatch((0, formActions_1.fieldLostFocus)(bindTo));
+    });
+    const [animateContainerRef] = (0, react_2.useAutoAnimate)({ duration: 100 });
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(ItemWithLabel_1.ItemWithLabel, { labelPosition: labelPositionValue, label: label, labelWidth: labelWidthValue, labelBreak: labelBreakValue, enabled: enabled, required: validations.required, validationInProgress: validationResult === null || validationResult === void 0 ? void 0 : validationResult.partial, onFocus: onFocus, onBlur: onBlur, style: style, validationResult: (0, jsx_runtime_1.jsx)("div", { ref: animateContainerRef, children: isHelperTextShown &&
+                    (validationResult === null || validationResult === void 0 ? void 0 : validationResult.validations.map((singleValidation, i) => ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [singleValidation.isValid && singleValidation.validMessage && ((0, jsx_runtime_1.jsx)(HelperText_1.HelperText, { text: singleValidation.validMessage, status: "valid", style: { opacity: singleValidation.stale ? 0.5 : undefined } })), !singleValidation.isValid && singleValidation.invalidMessage && ((0, jsx_runtime_1.jsx)(HelperText_1.HelperText, { text: singleValidation.invalidMessage, status: singleValidation.severity, style: { opacity: singleValidation.stale ? 0.5 : undefined } }))] }, i)))) }), children: formControl }) }));
+});
+function CustomFormItem({ renderChild, node, bindTo, }) {
+    const value = (0, FormContext_1.useFormContextPart)((value) => (0, Form_1.getByPath)(value.subject, bindTo));
+    const validationResult = (0, FormContext_1.useFormContextPart)((value) => value.validationResults[bindTo]);
+    const dispatch = (0, FormContext_1.useFormContextPart)((value) => value.dispatch);
+    const decoratedMetadata = (0, react_1.useMemo)(() => {
+        return {
+            type: "Container",
+            uid: "formFieldContainer - " + bindTo,
+            vars: node.vars,
+            contextVars: {
+                $value: value,
+                $setValue: (newValue) => {
+                    dispatch((0, formActions_1.fieldChanged)(bindTo, newValue));
+                },
+                $validationResult: validationResult,
+            },
+            children: node.children,
+        };
+    }, [bindTo, dispatch, node.children, node.vars, validationResult, value]);
+    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: renderChild(decoratedMetadata) });
+}
+const metadata = {
+    themeVars: (0, themeVars_1.parseScssVar)(FormItem_module_scss_1.default.themeVars),
+    defaultThemeVars: {
+        "color-text-FormItemLabel": "$color-text-primary",
+        "font-size-FormItemLabel": "$font-size-small",
+        "font-weight-FormItemLabel": "$font-weight-bold",
+        "font-style-FormItemLabel": "normal",
+        "text-transform-FormItemLabel": "none",
+        "color-text-FormItemLabel-requiredMark": "$color-danger-400",
+    },
+};
+exports.formItemComponentRenderer = (0, renderers_1.createComponentRenderer)("FormItem", ({ node, renderChild, extractValue, layoutCss, lookupEventHandler, lookupAction, registerComponentApi }) => {
+    const _a = node.props, { bindTo, autoFocus, label, labelPosition, labelWidth, labelBreak, enabled, required, type, requiredInvalidMessage, minLength, maxLength, lengthInvalidMessage, lengthInvalidSeverity, minValue, maxValue, rangeInvalidMessage, rangeInvalidSeverity, pattern, patternInvalidMessage, patternInvalidSeverity, regex, regexInvalidMessage, regexInvalidSeverity, customValidationsDebounce, validationMode, syncToValidation, maxTextLength } = _a, rest = __rest(_a, ["bindTo", "autoFocus", "label", "labelPosition", "labelWidth", "labelBreak", "enabled", "required", "type", "requiredInvalidMessage", "minLength", "maxLength", "lengthInvalidMessage", "lengthInvalidSeverity", "minValue", "maxValue", "rangeInvalidMessage", "rangeInvalidSeverity", "pattern", "patternInvalidMessage", "patternInvalidSeverity", "regex", "regexInvalidMessage", "regexInvalidSeverity", "customValidationsDebounce", "validationMode", "syncToValidation", "maxTextLength"]);
+    //extractValue works as a memoization mechanism too (if there's nothing to resolve, it won't produce a new object every time)
+    const resolvedValidationPropsAndEvents = extractValue({
+        required: extractValue.asOptionalBoolean(required),
+        requiredInvalidMessage: extractValue.asOptionalString(requiredInvalidMessage),
+        minLength: extractValue.asOptionalNumber(minLength),
+        maxLength: extractValue.asOptionalNumber(maxLength),
+        lengthInvalidMessage: extractValue.asOptionalString(lengthInvalidMessage),
+        lengthInvalidSeverity: (0, Validations_1.parseSeverity)(extractValue.asOptionalString(lengthInvalidSeverity)),
+        minValue: extractValue.asOptionalNumber(minValue),
+        maxValue: extractValue.asOptionalNumber(maxValue),
+        rangeInvalidMessage: extractValue.asOptionalString(rangeInvalidMessage),
+        rangeInvalidSeverity: (0, Validations_1.parseSeverity)(extractValue.asOptionalString(rangeInvalidSeverity)),
+        pattern: extractValue.asOptionalString(pattern),
+        patternInvalidMessage: extractValue.asOptionalString(patternInvalidMessage),
+        patternInvalidSeverity: (0, Validations_1.parseSeverity)(extractValue.asOptionalString(patternInvalidSeverity)),
+        regex: extractValue.asOptionalString(regex),
+        regexInvalidMessage: extractValue.asOptionalString(regexInvalidMessage),
+        regexInvalidSeverity: (0, Validations_1.parseSeverity)(extractValue.asOptionalString(regexInvalidSeverity)),
+    });
+    const nonLayoutCssProps = !layoutCss
+        ? rest
+        : Object.fromEntries(Object.entries(rest).filter(([key, _]) => {
+            return !(layoutCss === null || layoutCss === void 0 ? void 0 : layoutCss.hasOwnProperty(key));
+        }));
+    const resolvedRestProps = extractValue(nonLayoutCssProps);
+    const formItemType = extractValue.asOptionalString(type);
+    const isCustomFormItem = formItemType === undefined && !!node.children;
+    return ((0, jsx_runtime_1.jsx)(FormItem, Object.assign({ style: layoutCss, labelBreak: extractValue.asOptionalBoolean(labelBreak), labelWidth: extractValue.asOptionalString(labelWidth), bindTo: extractValue.asString(bindTo), autoFocus: extractValue.asOptionalBoolean(autoFocus), enabled: extractValue.asOptionalBoolean(enabled), label: extractValue.asOptionalString(label), labelPosition: extractValue.asOptionalString(labelPosition), type: isCustomFormItem ? "custom" : formItemType, validations: resolvedValidationPropsAndEvents, onValidate: lookupEventHandler("validate"), customValidationsDebounce: extractValue.asOptionalNumber(customValidationsDebounce), validationMode: extractValue.asOptionalString(validationMode), registerComponentApi: registerComponentApi, syncToValidation: extractValue.asOptionalBoolean(syncToValidation), maxTextLength: extractValue(maxTextLength) }, resolvedRestProps, { children: isCustomFormItem ? ((0, jsx_runtime_1.jsx)(CustomFormItem, { renderChild: renderChild, node: node, bindTo: extractValue.asString(bindTo) })) : (renderChild(node.children)) })));
+}, metadata);

package/dist/scripts/src/components/FormItem/HelperText.js

@@ -0,0 +1,27 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HelperText = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("@components-core/utils/classnames"));
+const HelperText_module_scss_1 = __importDefault(require("./HelperText.module.scss"));
+const WarningIcon_1 = require("@components/Icon/WarningIcon");
+const ErrorIcon_1 = require("@components/Icon/ErrorIcon");
+const HelperText = ({ text = "", status, style }) => {
+    const renderStatusIcon = () => {
+        if (status === "warning") {
+            return (0, jsx_runtime_1.jsx)(WarningIcon_1.WarningIcon, { color: "var(--xmlui-color-warning)" });
+        }
+        else if (status === "error") {
+            return (0, jsx_runtime_1.jsx)(ErrorIcon_1.ErrorIcon, { color: "var(--xmlui-color-error)" });
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { style: style, className: (0, classnames_1.default)(HelperText_module_scss_1.default.helper, {
+            [HelperText_module_scss_1.default.valid]: status === "valid",
+            [HelperText_module_scss_1.default.warning]: status === "warning",
+            [HelperText_module_scss_1.default.error]: status === "error",
+        }), children: [status && (0, jsx_runtime_1.jsx)("div", { style: { flexShrink: 0 }, children: renderStatusIcon() }), text && (0, jsx_runtime_1.jsx)("div", { className: HelperText_module_scss_1.default.helperText, children: text })] }));
+};
+exports.HelperText = HelperText;