xmlui 0.7.14 → 0.7.16

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

@@ -0,0 +1,157 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormItem = void 0;
+exports.CustomFormItem = CustomFormItem;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const FormContext_1 = require("@components/Form/FormContext");
+const TextBoxNative_1 = require("@components/TextBox/TextBoxNative");
+const Toggle_1 = require("@components/Toggle/Toggle");
+const FileInputNative_1 = require("@components/FileInput/FileInputNative");
+const NumberBoxNative_1 = require("@components/NumberBox/NumberBoxNative");
+const SelectNative_1 = require("@components/Select/SelectNative");
+const RadioGroupNative_1 = require("@components/RadioGroup/RadioGroupNative");
+const HelperText_1 = require("@components/FormItem/HelperText");
+const react_2 = require("@formkit/auto-animate/react");
+const Validations_1 = require("./Validations");
+const formActions_1 = require("@components/Form/formActions");
+const TextAreaNative_1 = require("@components/TextArea/TextAreaNative");
+const misc_1 = require("@components-core/utils/misc");
+const ItemWithLabel_1 = require("./ItemWithLabel");
+const DatePickerNative_1 = require("@components/DatePicker/DatePickerNative");
+const FormNative_1 = require("@components/Form/FormNative");
+const valueExtractor_1 = require("@components-core/container/valueExtractor");
+const AutoCompleteNative_1 = require("@components/AutoComplete/AutoCompleteNative");
+const DEFAULT_LABEL_POSITIONS = {
+    checkbox: "end",
+};
+exports.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, maxTextLength } = _a, rest = __rest(_a, ["style", "bindTo", "type", "label", "enabled", "labelPosition", "labelWidth", "labelBreak", "children", "validations", "onValidate", "customValidationsDebounce", "validationMode", "registerComponentApi", "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, FormNative_1.getByPath)(value.originalSubject, bindTo));
+    const initialValue = initialValueFromSubject === undefined ? rest.initialValue : initialValueFromSubject;
+    const value = (0, FormContext_1.useFormContextPart)((value) => (0, FormNative_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 formEnabled = (0, FormContext_1.useFormContextPart)((value) => value.enabled);
+    const isEnabled = enabled && formEnabled;
+    (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 }, options) => {
+        //we already handled the initial value in the useEffect with fieldInitialized(...);
+        if (!(options === null || options === void 0 ? void 0 : options.initial)) {
+            dispatch((0, formActions_1.fieldChanged)(bindTo, value));
+        }
+    }, [bindTo, dispatch]);
+    (0, react_1.useEffect)(() => {
+        return () => {
+            dispatch((0, formActions_1.fieldRemoved)(bindTo));
+        };
+    }, [bindTo, dispatch]);
+    const { validationStatus, isHelperTextShown } = (0, Validations_1.useValidationDisplay)(bindTo, value, validationResult, validationMode);
+    let formControl = null;
+    switch (type) {
+        case "select": {
+            formControl = ((0, jsx_runtime_1.jsx)(SelectNative_1.Select, Object.assign({}, rest, { value: value, updateState: onStateChange, registerComponentApi: registerComponentApi, enabled: isEnabled, validationStatus: validationStatus, children: children })));
+            break;
+        }
+        case "autocomplete": {
+            formControl = ((0, jsx_runtime_1.jsx)(AutoCompleteNative_1.AutoComplete, Object.assign({}, rest, { value: value, updateState: onStateChange, registerComponentApi: registerComponentApi, enabled: isEnabled, validationStatus: validationStatus, children: children })));
+            break;
+        }
+        case "datePicker": {
+            formControl = ((0, jsx_runtime_1.jsx)(DatePickerNative_1.DatePicker, Object.assign({}, rest, { value: value, updateState: onStateChange, 
+                // registerComponentApi={registerComponentApi}
+                enabled: isEnabled, validationStatus: validationStatus })));
+            break;
+        }
+        case "radioGroup": {
+            formControl = ((0, jsx_runtime_1.jsx)(RadioGroupNative_1.RadioGroup, Object.assign({}, rest, { value: value, updateState: onStateChange, 
+                // registerComponentApi={registerComponentApi}
+                enabled: isEnabled, validationStatus: validationStatus, children: children })));
+            break;
+        }
+        case "number":
+        case "integer": {
+            formControl = ((0, jsx_runtime_1.jsx)(NumberBoxNative_1.NumberBox, Object.assign({}, rest, { value: value, updateState: onStateChange, registerComponentApi: registerComponentApi, enabled: isEnabled, integersOnly: type === "integer", validationStatus: validationStatus, min: validations.minValue, max: validations.maxValue, maxLength: maxTextLength !== null && maxTextLength !== void 0 ? maxTextLength : validations === null || validations === void 0 ? void 0 : validations.maxLength })));
+            break;
+        }
+        case "switch":
+        case "checkbox": {
+            formControl = ((0, jsx_runtime_1.jsx)(Toggle_1.Toggle, Object.assign({}, rest, { value: value, updateState: onStateChange, 
+                // registerComponentApi={registerComponentApi}
+                enabled: isEnabled, validationStatus: validationStatus, variant: type })));
+            break;
+        }
+        case "file": {
+            formControl = ((0, jsx_runtime_1.jsx)(FileInputNative_1.FileInput, Object.assign({}, rest, { value: value, updateState: onStateChange, registerComponentApi: registerComponentApi, enabled: isEnabled, validationStatus: validationStatus, multiple: (0, valueExtractor_1.asOptionalBoolean)(rest.multiple, false) })));
+            break;
+        }
+        case "text": {
+            formControl = ((0, jsx_runtime_1.jsx)(TextBoxNative_1.TextBox, Object.assign({}, rest, { value: value, updateState: onStateChange, registerComponentApi: registerComponentApi, enabled: isEnabled, validationStatus: validationStatus, maxLength: maxTextLength !== null && maxTextLength !== void 0 ? maxTextLength : validations === null || validations === void 0 ? void 0 : validations.maxLength })));
+            break;
+        }
+        case "password": {
+            formControl = ((0, jsx_runtime_1.jsx)(TextBoxNative_1.TextBox, Object.assign({}, rest, { type: "password", value: value, updateState: onStateChange, registerComponentApi: registerComponentApi, enabled: isEnabled, validationStatus: validationStatus, maxLength: maxTextLength !== null && maxTextLength !== void 0 ? maxTextLength : validations === null || validations === void 0 ? void 0 : validations.maxLength })));
+            break;
+        }
+        case "textarea": {
+            formControl = ((0, jsx_runtime_1.jsx)(TextAreaNative_1.TextArea, Object.assign({}, rest, { value: value, updateState: onStateChange, registerComponentApi: registerComponentApi, enabled: isEnabled, validationStatus: validationStatus, maxLength: maxTextLength !== null && maxTextLength !== void 0 ? maxTextLength : validations === null || validations === void 0 ? void 0 : validations.maxLength })));
+            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)(ItemWithLabel_1.ItemWithLabel, { labelPosition: labelPositionValue, label: label, labelWidth: labelWidthValue, labelBreak: labelBreakValue, enabled: isEnabled, 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, FormNative_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) });
+}

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;

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

@@ -0,0 +1,40 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ItemWithLabel = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const react_2 = require("react");
+const classnames_1 = __importDefault(require("@components-core/utils/classnames"));
+const FormItem_module_scss_1 = __importDefault(require("./FormItem.module.scss"));
+const SpinnerNative_1 = require("@components/Spinner/SpinnerNative");
+const react_slot_1 = require("@radix-ui/react-slot");
+const numberRegex = /^[0-9]+$/;
+exports.ItemWithLabel = (0, react_1.forwardRef)(function ItemWithLabel({ id, labelPosition = "top", style, label, labelBreak = true, labelWidth, enabled = true, required = false, children, validationInProgress = false, shrinkToLabel = false, onFocus, onBlur, labelStyle, validationResult, }, ref) {
+    const generatedId = (0, react_2.useId)();
+    const inputId = id || generatedId;
+    if (label === undefined) {
+        return ((0, jsx_runtime_1.jsx)(react_slot_1.Slot, { style: style, id: inputId, onFocus: onFocus, onBlur: onBlur, ref: ref, children: children }));
+        // return cloneElement(children as ReactElement, {
+        //   ...mergeProps((children as ReactElement).props, {
+        //     style,
+        //     id: inputId,
+        //     onFocus: onFocus,
+        //     onBlur: onBlur
+        //   }),
+        // });
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { style: style, ref: ref, children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(FormItem_module_scss_1.default.container, {
+                    [FormItem_module_scss_1.default.top]: labelPosition === "top",
+                    [FormItem_module_scss_1.default.bottom]: labelPosition === "bottom",
+                    [FormItem_module_scss_1.default.start]: labelPosition === "start",
+                    [FormItem_module_scss_1.default.end]: labelPosition === "end",
+                    [FormItem_module_scss_1.default.shrinkToLabel]: shrinkToLabel,
+                }), onFocus: onFocus, onBlur: onBlur, children: [label && ((0, jsx_runtime_1.jsxs)("label", { htmlFor: inputId, onClick: () => document.getElementById(inputId).focus(), style: Object.assign(Object.assign({}, labelStyle), { width: labelWidth && numberRegex.test(labelWidth) ? `${labelWidth}px` : labelWidth, flexShrink: labelWidth !== undefined ? 0 : undefined }), className: (0, classnames_1.default)(FormItem_module_scss_1.default.inputLabel, {
+                            [FormItem_module_scss_1.default.required]: required,
+                            [FormItem_module_scss_1.default.disabled]: !enabled,
+                            [FormItem_module_scss_1.default.labelBreak]: labelBreak,
+                        }), children: [label, " ", required && (0, jsx_runtime_1.jsx)("span", { className: FormItem_module_scss_1.default.requiredMark, children: "*" }), validationInProgress && ((0, jsx_runtime_1.jsx)(SpinnerNative_1.Spinner, { style: { height: "1em", width: "1em", marginLeft: "1em", alignSelf: "center" } }))] })), react_2.Children.only((0, jsx_runtime_1.jsx)(react_slot_1.Slot, { id: inputId, children: children }))] }), validationResult] }));
+});

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

@@ -0,0 +1,351 @@
+"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());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useValidation = useValidation;
+exports.useValidationDisplay = useValidationDisplay;
+exports.parseSeverity = parseSeverity;
+exports.groupInvalidValidationResultsBySeverity = groupInvalidValidationResultsBySeverity;
+const lodash_es_1 = require("lodash-es");
+const FormContext_1 = require("@components/Form/FormContext");
+const react_1 = require("react");
+const misc_1 = require("@components-core/utils/misc");
+const constants_1 = require("@components-core/constants");
+const formActions_1 = require("@components/Form/formActions");
+function isInputEmpty(value) {
+    if (value === undefined || value === null || value === "")
+        return true;
+    if (typeof value === "string")
+        return value.trim().length === 0;
+    return (0, lodash_es_1.isEmpty)(value);
+}
+function isMinLengthValid(value = "", boundary) {
+    if (typeof value === "string") {
+        return value.length >= boundary;
+    }
+    console.warn("minLength can only be used on strings");
+    return true;
+}
+function isMaxLengthValid(value = "", boundary) {
+    if (typeof value === "string") {
+        return value.length <= boundary;
+    }
+    console.warn("maxLength can only be used on strings");
+    return true;
+}
+function isMinValueValid(value = "", minValue) {
+    if (typeof value !== "string" && !(0, lodash_es_1.isNumber)(value)) {
+        console.warn("Range can only be used on strings and numbers");
+    }
+    return Number(value) >= minValue;
+}
+function isMaxValueValid(value = "", maxValue) {
+    if (typeof value !== "string" && !(0, lodash_es_1.isNumber)(value)) {
+        console.warn("Range can only be used on strings and numbers");
+    }
+    return Number(value) <= maxValue;
+}
+function isRegexValid(value = "", regex) {
+    if (typeof value === "string") {
+        const _value = stringToRegex(regex).test(value);
+        return _value;
+    }
+    console.warn("Regex can only be used on strings");
+    return true;
+    // Source: https://stackoverflow.com/questions/17250815/how-to-check-if-the-input-string-is-a-valid-regular-expression
+    function stringToRegex(s) {
+        const m = s.match(/^([/~@;%#'])(.*?)\1([gimsuy]*)$/);
+        return m ? new RegExp(m[2], m[3]) : new RegExp(s);
+    }
+}
+class FormItemValidator {
+    constructor(validations, onValidate, value) {
+        this.validations = validations;
+        this.onValidate = onValidate;
+        this.value = value;
+        this.preValidate = () => {
+            const requiredResult = this.validateRequired();
+            let validationResults = [requiredResult];
+            if (!requiredResult || requiredResult.isValid) {
+                validationResults.push(this.validateLength(), this.validateRange(), this.validatePattern(), this.validateRegex());
+            }
+            validationResults = validationResults.filter(result => result !== undefined);
+            return {
+                isValid: validationResults.find(result => !result.isValid) === undefined,
+                validatedValue: this.value,
+                partial: this.onValidate !== undefined,
+                validations: validationResults
+            };
+        };
+        this.validate = () => __awaiter(this, void 0, void 0, function* () {
+            const preValidateResult = this.preValidate();
+            const constValidationResult = (yield this.validateCustom()) || [];
+            preValidateResult.validations.push(...constValidationResult.map(res => (Object.assign(Object.assign({}, res), { async: true }))));
+            return {
+                isValid: preValidateResult.validations.find(result => !result.isValid) === undefined,
+                validatedValue: this.value,
+                partial: false,
+                validations: preValidateResult.validations
+            };
+        });
+    }
+    validateRequired() {
+        const { required, requiredInvalidMessage } = this.validations;
+        if (!required) {
+            return undefined;
+        }
+        return {
+            isValid: !isInputEmpty(this.value),
+            invalidMessage: requiredInvalidMessage || "This field is required",
+            severity: "error"
+        };
+    }
+    validateLength() {
+        const { minLength, maxLength, lengthInvalidMessage, lengthInvalidSeverity = "error" } = this.validations;
+        if (minLength === undefined && maxLength === undefined) {
+            return undefined;
+        }
+        if (minLength !== undefined && maxLength === undefined) {
+            return {
+                isValid: isMinLengthValid(this.value, minLength),
+                invalidMessage: lengthInvalidMessage || `Input should be at least ${minLength} ${pluralize(minLength, "character")}`,
+                severity: lengthInvalidSeverity
+            };
+        }
+        if (minLength === undefined && maxLength !== undefined) {
+            return {
+                isValid: isMaxLengthValid(this.value, maxLength),
+                invalidMessage: lengthInvalidMessage || `Input should be up to ${maxLength} ${pluralize(maxLength, "character")}`,
+                severity: lengthInvalidSeverity
+            };
+        }
+        return {
+            isValid: isMinLengthValid(this.value, minLength) && isMaxLengthValid(this.value, maxLength),
+            invalidMessage: lengthInvalidMessage || `Input length should be between ${minLength} and ${maxLength}`,
+            severity: lengthInvalidSeverity
+        };
+    }
+    validateRange() {
+        const { minValue, maxValue, rangeInvalidMessage, rangeInvalidSeverity = "error" } = this.validations;
+        if (minValue === undefined && maxValue === undefined) {
+            return undefined;
+        }
+        if (minValue !== undefined && maxValue === undefined) {
+            return {
+                isValid: isMinValueValid(this.value, minValue),
+                invalidMessage: rangeInvalidMessage || `Input should be bigger than ${minValue}`,
+                severity: rangeInvalidSeverity
+            };
+        }
+        if (minValue === undefined && maxValue !== undefined) {
+            return {
+                isValid: isMaxValueValid(this.value, maxValue),
+                invalidMessage: rangeInvalidMessage || `Input should be smaller than ${maxValue}`,
+                severity: rangeInvalidSeverity
+            };
+        }
+        return {
+            isValid: isMinValueValid(this.value, minValue) && isMaxValueValid(this.value, maxValue),
+            invalidMessage: rangeInvalidMessage || `Input should be between ${minValue} and ${maxValue}`,
+            severity: rangeInvalidSeverity
+        };
+    }
+    validatePattern() {
+        const { pattern, patternInvalidMessage, patternInvalidSeverity = "error" } = this.validations;
+        if (!pattern) {
+            return undefined;
+        }
+        switch (pattern.toLowerCase()) {
+            case "email":
+                return {
+                    isValid: /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/.test(this.value),
+                    invalidMessage: patternInvalidMessage || "Not a valid email address",
+                    severity: patternInvalidSeverity
+                };
+            case "phone":
+                return {
+                    isValid: /^[a-zA-Z0-9#*)(+.\-_&']+$/g.test(this.value),
+                    invalidMessage: patternInvalidMessage || "Not a valid phone number",
+                    severity: patternInvalidSeverity
+                };
+            case "url":
+                let url;
+                try {
+                    url = new URL(this.value);
+                }
+                catch (e) { }
+                if (!url || (url.protocol && !["http:", "https:"].includes(url.protocol))) {
+                    return {
+                        isValid: false,
+                        invalidMessage: "Not a valid URL",
+                        severity: patternInvalidSeverity
+                    };
+                }
+                return {
+                    isValid: true,
+                    severity: "valid"
+                };
+            default: {
+                console.warn("Unknown pattern provided");
+                return {
+                    isValid: true,
+                    severity: "valid"
+                };
+            }
+        }
+    }
+    validateRegex() {
+        const { regex, regexInvalidMessage, regexInvalidSeverity = "error" } = this.validations;
+        if (regex === undefined) {
+            return undefined;
+        }
+        return {
+            isValid: isRegexValid(this.value, regex),
+            invalidMessage: regexInvalidMessage || "Input is not in the correct format",
+            severity: regexInvalidSeverity
+        };
+    }
+    validateCustom() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (!this.onValidate) {
+                return undefined;
+            }
+            const validationFnResult = yield this.onValidate(this.value);
+            if (typeof validationFnResult === "boolean") {
+                return [
+                    {
+                        isValid: validationFnResult,
+                        invalidMessage: "Invalid input",
+                        severity: "error"
+                    }
+                ];
+            }
+            if (!(0, lodash_es_1.isArray)(validationFnResult)) {
+                return [validationFnResult];
+            }
+            return validationFnResult;
+        });
+    }
+}
+function asyncValidate(validations, onValidate, deferredValue) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const validator = new FormItemValidator(validations, onValidate, deferredValue);
+        // console.log("calling async validate with ", deferredValue);
+        return yield validator.validate();
+    });
+}
+function useValidation(validations, onValidate, value, dispatch, bindTo, throttleWaitInMs = 0) {
+    const deferredValue = (0, react_1.useDeferredValue)(value);
+    const throttledAsyncValidate = (0, react_1.useMemo)(() => {
+        if (throttleWaitInMs !== 0) {
+            return (0, misc_1.asyncThrottle)(asyncValidate, throttleWaitInMs, {
+                trailing: true,
+                leading: true
+            });
+        }
+        return asyncValidate;
+    }, [throttleWaitInMs]);
+    (0, react_1.useEffect)(function runAllValidations() {
+        const validator = new FormItemValidator(validations, onValidate, deferredValue);
+        let ignore = false;
+        const partialResult = validator.preValidate();
+        if (!ignore) {
+            dispatch((0, formActions_1.fieldValidated)(bindTo, partialResult));
+            if (partialResult.partial) {
+                (() => __awaiter(this, void 0, void 0, function* () {
+                    const result = yield throttledAsyncValidate(validations, onValidate, deferredValue);
+                    if (!ignore) {
+                        // console.log(`async validation result for ${bindTo}`, result);
+                        dispatch((0, formActions_1.fieldValidated)(bindTo, result));
+                    }
+                }))();
+            }
+        }
+        return () => {
+            ignore = true;
+        };
+    }, [bindTo, deferredValue, dispatch, onValidate, throttledAsyncValidate, validations]);
+}
+function useValidationDisplay(bindTo, value, validationResult, validationMode = "errorLate") {
+    const interactionFlags = (0, FormContext_1.useFormContextPart)(value => value.interactionFlags[bindTo]) || constants_1.EMPTY_OBJECT;
+    const forceShowValidationResult = interactionFlags.forceShowValidationResult;
+    const focused = interactionFlags.focused;
+    const isValidLostFocus = interactionFlags.isValidLostFocus;
+    const isValidOnFocus = interactionFlags.isValidOnFocus;
+    const invalidToValid = interactionFlags.invalidToValid;
+    const validationInProgress = !validationResult || validationResult.validatedValue !== value;
+    const isDirty = interactionFlags.isDirty;
+    const isValid = (validationResult === null || validationResult === void 0 ? void 0 : validationResult.isValid) === true;
+    let highestValidationSeverity = "none";
+    for (const val of (validationResult === null || validationResult === void 0 ? void 0 : validationResult.validations) || []) {
+        if (val.isValid) {
+            continue;
+        }
+        if (highestValidationSeverity !== "error" && val.severity === "warning") {
+            highestValidationSeverity = "warning";
+        }
+        if (val.severity === "error") {
+            highestValidationSeverity = "error";
+            break;
+        }
+    }
+    let isHelperTextShown = false;
+    switch (validationMode) {
+        case "errorLate":
+            isHelperTextShown = isDirty && (focused ? !invalidToValid && !isValidOnFocus : !isValidLostFocus);
+            break;
+        case "onChanged":
+            isHelperTextShown = isDirty;
+            break;
+        case "onLostFocus":
+            isHelperTextShown = isDirty && ((!focused && !isValid) || (!isValidLostFocus && !isValid));
+    }
+    isHelperTextShown = isHelperTextShown || forceShowValidationResult;
+    const [prevStableShown, setPrevStableShown] = (0, react_1.useState)(isHelperTextShown);
+    if (prevStableShown !== isHelperTextShown && !validationInProgress) {
+        setPrevStableShown(isHelperTextShown);
+    }
+    if (validationInProgress) {
+        isHelperTextShown = prevStableShown;
+    }
+    return {
+        isHelperTextShown,
+        validationStatus: isHelperTextShown ? highestValidationSeverity : "none"
+    };
+}
+function parseSeverity(severity) {
+    if (severity === undefined) {
+        return undefined;
+    }
+    if (severity === "error" || severity === "warning" || severity === "valid" || severity === "none") {
+        return severity;
+    }
+    return "none";
+}
+function groupInvalidValidationResultsBySeverity(validationResults) {
+    const ret = {
+        error: [],
+        warning: [],
+        valid: [],
+        none: []
+    };
+    Object.entries(validationResults).forEach(([field, validationResult]) => {
+        validationResult.validations.forEach(singleValidationResult => {
+            if (!singleValidationResult.isValid) {
+                ret[singleValidationResult.severity] = ret[singleValidationResult.severity] || [];
+                ret[singleValidationResult.severity].push(singleValidationResult);
+            }
+        });
+    });
+    return ret;
+}
+function pluralize(count, word) {
+    return count === 1 ? word : word + "s";
+}

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

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.formSectionRenderer = exports.FormSectionMd = void 0;
+const ComponentDefs_1 = require("@abstractions/ComponentDefs");
+const compound_utils_1 = require("@components-core/utils/compound-utils");
+// --- We cannot use this with nextra
+// import componentSource from "./FormSection.xmlui?raw";
+const COMP = "FormSection";
+exports.FormSectionMd = (0, ComponentDefs_1.createMetadata)({
+    status: "experimental",
+    description: `The \`${COMP}\` is a component that groups cohesive elements together within ` +
+        `a \`Form\`. This grouping is indicated visually: the child components of the \`${COMP}\` ` +
+        `are placed in a [\`FlowLayout\`](./FlowLayout.mdx) component.`,
+});
+const componentSource = `
+<Component name="FormSection">
+  <VStack paddingBottom="{$props.paddingBottom ?? '1rem'}" gap="0">
+    <Heading 
+      when="{!!$props.heading}"
+      marginBottom="$space-tight"
+      level="{$props.headingLevel ?? 'h3'}"
+      fontWeight="{$props.headingWeight ?? 'bold'}"
+      value="{$props.heading}" />
+    <Text
+      when="{!!$props.info}"
+      fontSize="{$props.infoFontSize ?? '0.8rem'}"
+      paddingBottom="$space-normal"
+      value="{$props.info}" />
+    <FlowLayout 
+      paddingTop="{$props.paddingTop ?? '$space-normal'}"
+      columnGap="{$props.columnGap ?? '3rem'}"
+      rowGap="{$props.rowGap ?? '$space-normal'}" >
+      <Slot />
+    </FlowLayout>
+  </VStack>
+</Component>
+`;
+exports.formSectionRenderer = {
+    compoundComponentDef: (0, compound_utils_1.compoundComponentDefFromSource)(COMP, componentSource),
+    metadata: exports.FormSectionMd,
+};