xmlui 0.11.3 → 0.11.6

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

@@ -1,255 +0,0 @@
-"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.FormItem = exports.defaultProps = void 0;
-exports.CustomFormItem = CustomFormItem;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const react_2 = require("@formkit/auto-animate/react");
-const valueExtractor_1 = require("../../components-core/rendering/valueExtractor");
-const FormContext_1 = require("../Form/FormContext");
-const TextBoxNative_1 = require("../TextBox/TextBoxNative");
-const Toggle_1 = require("../Toggle/Toggle");
-const FileInputNative_1 = require("../FileInput/FileInputNative");
-const NumberBoxNative_1 = require("../NumberBox/NumberBoxNative");
-const SelectNative_1 = require("../Select/SelectNative");
-const RadioGroupNative_1 = require("../RadioGroup/RadioGroupNative");
-const formActions_1 = require("../Form/formActions");
-const TextAreaNative_1 = require("../TextArea/TextAreaNative");
-const misc_1 = require("../../components-core/utils/misc");
-const DatePickerNative_1 = require("../DatePicker/DatePickerNative");
-const FormNative_1 = require("../Form/FormNative");
-const AutoCompleteNative_1 = require("../AutoComplete/AutoCompleteNative");
-const ItemWithLabel_1 = require("./ItemWithLabel");
-const Validations_1 = require("./Validations");
-const SliderNative_1 = require("../Slider/SliderNative");
-const ColorPickerNative_1 = require("../ColorPicker/ColorPickerNative");
-const HelperText_1 = require("./HelperText");
-const ItemsNative_1 = require("../Items/ItemsNative");
-const constants_1 = require("../../components-core/constants");
-const hooks_1 = require("../../components-core/utils/hooks");
-const FormItem_module_scss_1 = __importDefault(require("./FormItem.module.scss"));
-const DEFAULT_LABEL_POSITIONS = {
-    checkbox: "end",
-};
-exports.defaultProps = {
-    type: "text",
-    labelBreak: true,
-    enabled: true,
-    customValidationsDebounce: 0,
-    gap: "0",
-    noSubmit: false,
-};
-const FormItemContext = (0, react_1.createContext)({ parentFormItemId: null });
-function ArrayLikeFormItem({ children, formItemId, registerComponentApi, value = constants_1.EMPTY_ARRAY, updateState, }) {
-    const formContextValue = (0, react_1.useMemo)(() => {
-        return {
-            parentFormItemId: formItemId,
-        };
-    }, [formItemId]);
-    const addItem = (0, misc_1.useEvent)((item) => {
-        updateState({ value: [...value, item] });
-    });
-    const removeItem = (0, misc_1.useEvent)((index) => {
-        updateState({ value: value.filter((item, i) => i !== index) });
-    });
-    (0, react_1.useEffect)(() => {
-        registerComponentApi === null || registerComponentApi === void 0 ? void 0 : registerComponentApi({
-            addItem: addItem,
-            removeItem: removeItem,
-        });
-    }, [addItem, registerComponentApi, removeItem]);
-    return (0, jsx_runtime_1.jsx)(FormItemContext.Provider, { value: formContextValue, children: children });
-}
-exports.FormItem = (0, react_1.memo)(function FormItem(_a) {
-    var { 
-    // --- validation props
-    required, requiredInvalidMessage, minLength, maxLength, lengthInvalidMessage, lengthInvalidSeverity, minValue, maxValue, rangeInvalidMessage, rangeInvalidSeverity, pattern, patternInvalidMessage, patternInvalidSeverity, regex, regexInvalidMessage, regexInvalidSeverity, 
-    // ---
-    style, className, bindTo, type = exports.defaultProps.type, label, enabled = exports.defaultProps.enabled, labelPosition, labelWidth, labelBreak = exports.defaultProps.labelBreak, children, onValidate, customValidationsDebounce = exports.defaultProps.customValidationsDebounce, validationMode, registerComponentApi, maxTextLength, inputRenderer, itemIndex, initialValue: initialValueFromProps, gap, noSubmit = exports.defaultProps.noSubmit } = _a, rest = __rest(_a, ["required", "requiredInvalidMessage", "minLength", "maxLength", "lengthInvalidMessage", "lengthInvalidSeverity", "minValue", "maxValue", "rangeInvalidMessage", "rangeInvalidSeverity", "pattern", "patternInvalidMessage", "patternInvalidSeverity", "regex", "regexInvalidMessage", "regexInvalidSeverity", "style", "className", "bindTo", "type", "label", "enabled", "labelPosition", "labelWidth", "labelBreak", "children", "onValidate", "customValidationsDebounce", "validationMode", "registerComponentApi", "maxTextLength", "inputRenderer", "itemIndex", "initialValue", "gap", "noSubmit"]);
-    const validations = (0, hooks_1.useShallowCompareMemoize)({
-        required,
-        requiredInvalidMessage,
-        minLength,
-        maxLength,
-        lengthInvalidMessage,
-        lengthInvalidSeverity,
-        minValue,
-        maxValue,
-        rangeInvalidMessage,
-        rangeInvalidSeverity,
-        pattern,
-        patternInvalidMessage,
-        patternInvalidSeverity,
-        regex,
-        regexInvalidMessage,
-        regexInvalidSeverity,
-    });
-    const defaultId = (0, react_1.useId)();
-    const { parentFormItemId } = (0, react_1.useContext)(FormItemContext);
-    const formItemId = (0, react_1.useMemo)(() => {
-        const safeBindTo = bindTo || `${defaultId}${formActions_1.UNBOUND_FIELD_SUFFIX}`;
-        if (parentFormItemId) {
-            if (itemIndex !== undefined) {
-                let parentFieldReference = `${parentFormItemId}[${itemIndex}]`;
-                if (bindTo !== undefined && bindTo.trim() === "") {
-                    return parentFieldReference;
-                }
-                else {
-                    return `${parentFieldReference}.${safeBindTo}`;
-                }
-            }
-        }
-        else {
-            return safeBindTo;
-        }
-    }, [bindTo, defaultId, itemIndex, parentFormItemId]);
-    const labelWidthValue = (0, FormContext_1.useFormContextPart)((value) => labelWidth || (value === null || value === void 0 ? void 0 : value.itemLabelWidth));
-    const labelBreakValue = (0, FormContext_1.useFormContextPart)((value) => labelBreak !== undefined ? labelBreak : value === null || value === void 0 ? void 0 : value.itemLabelBreak);
-    const labelPositionValue = (0, FormContext_1.useFormContextPart)((value) => labelPosition || (value === null || value === void 0 ? void 0 : value.itemLabelPosition) || DEFAULT_LABEL_POSITIONS[type]);
-    const initialValueFromSubject = (0, FormContext_1.useFormContextPart)((value) => (0, FormNative_1.getByPath)(value === null || value === void 0 ? void 0 : value.originalSubject, formItemId));
-    const initialValue = initialValueFromSubject === undefined ? initialValueFromProps : initialValueFromSubject;
-    const value = (0, FormContext_1.useFormContextPart)((value) => (0, FormNative_1.getByPath)(value === null || value === void 0 ? void 0 : value.subject, formItemId));
-    const validationResult = (0, FormContext_1.useFormContextPart)((value) => value === null || value === void 0 ? void 0 : value.validationResults[formItemId]);
-    const dispatch = (0, FormContext_1.useFormContextPart)((value) => value === null || value === void 0 ? void 0 : value.dispatch);
-    const formEnabled = (0, FormContext_1.useFormContextPart)((value) => value === null || value === void 0 ? void 0 : value.enabled);
-    const isEnabled = enabled && formEnabled;
-    (0, react_1.useEffect)(() => {
-        // Always dispatch fieldInitialized to ensure noSubmit tracking
-        // Pass undefined as value when initialValue is undefined to avoid overwriting existing values
-        dispatch((0, formActions_1.fieldInitialized)(formItemId, initialValue, false, noSubmit));
-    }, [dispatch, formItemId, initialValue, noSubmit]);
-    (0, Validations_1.useValidation)(validations, onValidate, value, dispatch, formItemId, 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)(formItemId, value));
-        }
-    }, [formItemId, dispatch]);
-    (0, react_1.useEffect)(() => {
-        return () => {
-            dispatch((0, formActions_1.fieldRemoved)(formItemId));
-        };
-    }, [formItemId, dispatch]);
-    const { validationStatus, isHelperTextShown } = (0, Validations_1.useValidationDisplay)(formItemId, value, validationResult, validationMode);
-    const onFocus = (0, misc_1.useEvent)(() => {
-        dispatch((0, formActions_1.fieldFocused)(formItemId));
-    });
-    const onBlur = (0, misc_1.useEvent)(() => {
-        dispatch((0, formActions_1.fieldLostFocus)(formItemId));
-    });
-    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, onFocus: onFocus, onBlur: onBlur, 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, onFocus: onFocus, onBlur: onBlur, 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}
-                onFocus: onFocus, onBlur: onBlur, 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}
-                onFocus: onFocus, onBlur: onBlur, enabled: isEnabled, validationStatus: validationStatus, children: children })));
-            break;
-        }
-        case "number":
-        case "integer": {
-            formControl = ((0, jsx_runtime_1.jsx)(NumberBoxNative_1.NumberBox, Object.assign({}, rest, { initialValue: initialValue, value: value, updateState: onStateChange, registerComponentApi: registerComponentApi, onFocus: onFocus, onBlur: onBlur, 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, gap: gap })));
-            break;
-        }
-        case "switch":
-        case "checkbox": {
-            formControl = ((0, jsx_runtime_1.jsx)(Toggle_1.Toggle, Object.assign({}, rest, { value: value, updateState: onStateChange, registerComponentApi: registerComponentApi, onFocus: onFocus, onBlur: onBlur, enabled: isEnabled, validationStatus: validationStatus, variant: type, inputRenderer: inputRenderer })));
-            break;
-        }
-        case "file": {
-            formControl = ((0, jsx_runtime_1.jsx)(FileInputNative_1.FileInput, Object.assign({}, rest, { value: value, updateState: onStateChange, registerComponentApi: registerComponentApi, onFocus: onFocus, onBlur: onBlur, 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, onFocus: onFocus, onBlur: onBlur, enabled: isEnabled, validationStatus: validationStatus, maxLength: maxTextLength !== null && maxTextLength !== void 0 ? maxTextLength : validations === null || validations === void 0 ? void 0 : validations.maxLength, gap: gap })));
-            break;
-        }
-        case "password": {
-            formControl = ((0, jsx_runtime_1.jsx)(TextBoxNative_1.TextBox, Object.assign({}, rest, { type: "password", value: value, updateState: onStateChange, registerComponentApi: registerComponentApi, onFocus: onFocus, onBlur: onBlur, 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, onFocus: onFocus, onBlur: onBlur, enabled: isEnabled, validationStatus: validationStatus, maxLength: maxTextLength !== null && maxTextLength !== void 0 ? maxTextLength : validations === null || validations === void 0 ? void 0 : validations.maxLength })));
-            break;
-        }
-        case "slider": {
-            formControl = ((0, jsx_runtime_1.jsx)(SliderNative_1.Slider, Object.assign({}, rest, { value: value, updateState: onStateChange, registerComponentApi: registerComponentApi, onFocus: onFocus, onBlur: onBlur, enabled: isEnabled, validationStatus: validationStatus, min: validations.minValue, max: validations.maxValue })));
-            break;
-        }
-        case "colorpicker": {
-            formControl = ((0, jsx_runtime_1.jsx)(ColorPickerNative_1.ColorPicker, Object.assign({}, rest, { value: value, updateState: onStateChange, registerComponentApi: registerComponentApi, onFocus: onFocus, onBlur: onBlur, enabled: isEnabled, validationStatus: validationStatus })));
-            break;
-        }
-        case "items": {
-            formControl = ((0, jsx_runtime_1.jsx)(ArrayLikeFormItem, { formItemId: formItemId, registerComponentApi: registerComponentApi, updateState: onStateChange, value: value, children: (0, jsx_runtime_1.jsx)(ItemsNative_1.Items, { items: value, renderItem: inputRenderer }) }));
-            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 [animateContainerRef] = (0, react_2.useAutoAnimate)({ duration: 100 });
-    const isInsideForm = (0, FormContext_1.useIsInsideForm)();
-    if (!isInsideForm) {
-        throw new Error("FormItem must be used inside a Form");
-    }
-    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, className: className, validationResult: (0, jsx_runtime_1.jsx)("div", { ref: animateContainerRef, className: FormItem_module_scss_1.default.helperTextContainer, 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, }) {
-    // IMPORTANT NOTE:
-    //  why we use useFormContextPart, and not useFormContext?
-    //  because we want to avoid re-rendering the whole form when the form state changes.
-    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

@@ -1,27 +0,0 @@
-"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("classnames"));
-const HelperText_module_scss_1 = __importDefault(require("./HelperText.module.scss"));
-const WarningIcon_1 = require("../Icon/WarningIcon");
-const ErrorIcon_1 = require("../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", { "data-validation-status": status, 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

@@ -1,52 +0,0 @@
-"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.ItemWithLabel = exports.defaultProps = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const classnames_1 = __importDefault(require("classnames"));
-const react_slot_1 = require("@radix-ui/react-slot");
-const FormItem_module_scss_1 = __importDefault(require("./FormItem.module.scss"));
-const SpinnerNative_1 = require("../Spinner/SpinnerNative");
-const parts_1 = require("../../components-core/parts");
-exports.defaultProps = {
-    labelBreak: true,
-};
-const numberRegex = /^[0-9]+$/;
-exports.ItemWithLabel = (0, react_1.forwardRef)(function ItemWithLabel(_a, ref) {
-    var { id, labelPosition = "top", style = {}, className, label, labelBreak = exports.defaultProps.labelBreak, labelWidth, enabled = true, required = false, children, validationInProgress = false, shrinkToLabel = false, onFocus, onBlur, labelStyle, validationResult, isInputTemplateUsed = false, onLabelClick, layoutContext } = _a, rest = __rest(_a, ["id", "labelPosition", "style", "className", "label", "labelBreak", "labelWidth", "enabled", "required", "children", "validationInProgress", "shrinkToLabel", "onFocus", "onBlur", "labelStyle", "validationResult", "isInputTemplateUsed", "onLabelClick", "layoutContext"]);
-    const generatedId = (0, react_1.useId)();
-    const inputId = id || generatedId;
-    if (label === undefined && !validationResult) {
-        return ((0, jsx_runtime_1.jsx)(react_slot_1.Slot, Object.assign({}, rest, { "data-part-id": parts_1.PART_LABELED_ITEM, style: style, className: className, id: inputId, ref: ref, children: children })));
-    }
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, rest, { ref: ref, style: style, className: (0, classnames_1.default)(className, FormItem_module_scss_1.default.itemWithLabel), 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,
-                }), children: [label && ((0, jsx_runtime_1.jsxs)("label", { "data-part-id": parts_1.PART_LABEL, htmlFor: inputId, onClick: onLabelClick || (() => { var _a; return (_a = document.getElementById(inputId)) === null || _a === void 0 ? void 0 : _a.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" } }))] })), (0, react_1.cloneElement)(children, {
-                        id: !isInputTemplateUsed ? inputId : undefined,
-                        style: undefined,
-                        className: undefined,
-                        "data-part-id": parts_1.PART_LABELED_ITEM,
-                    })] }), validationResult] })));
-});