xmlui 0.10.15 → 0.10.18

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

@@ -140,62 +140,66 @@ exports.FormItem = (0, react_1.memo)(function FormItem(_a) {
         };
     }, [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, enabled: isEnabled, validationStatus: validationStatus, children: children })));
+            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, enabled: isEnabled, validationStatus: validationStatus, children: children })));
+            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}
-                enabled: isEnabled, validationStatus: validationStatus })));
+                //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}
-                enabled: isEnabled, validationStatus: validationStatus, children: children })));
+                //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, 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 })));
+            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}
-                enabled: isEnabled, validationStatus: validationStatus, variant: type, inputRenderer: inputRenderer })));
+            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, enabled: isEnabled, validationStatus: validationStatus, multiple: (0, valueExtractor_1.asOptionalBoolean)(rest.multiple, false) })));
+            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, enabled: isEnabled, validationStatus: validationStatus, maxLength: maxTextLength !== null && maxTextLength !== void 0 ? maxTextLength : validations === null || validations === void 0 ? void 0 : validations.maxLength, gap: gap })));
+            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, enabled: isEnabled, validationStatus: validationStatus, maxLength: maxTextLength !== null && maxTextLength !== void 0 ? maxTextLength : validations === null || validations === void 0 ? void 0 : validations.maxLength })));
+            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, enabled: isEnabled, validationStatus: validationStatus, maxLength: maxTextLength !== null && maxTextLength !== void 0 ? maxTextLength : validations === null || validations === void 0 ? void 0 : validations.maxLength })));
+            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, enabled: isEnabled, validationStatus: validationStatus, min: validations.minValue, max: validations.maxValue })));
+            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, enabled: isEnabled, validationStatus: validationStatus })));
+            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": {
@@ -212,12 +216,6 @@ exports.FormItem = (0, react_1.memo)(function FormItem(_a) {
             break;
         }
     }
-    const onFocus = (0, misc_1.useEvent)(() => {
-        dispatch((0, formActions_1.fieldFocused)(formItemId));
-    });
-    const onBlur = (0, misc_1.useEvent)(() => {
-        dispatch((0, formActions_1.fieldLostFocus)(formItemId));
-    });
     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, className: className, 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 }));

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

@@ -27,27 +27,13 @@ exports.defaultProps = {
 };
 const numberRegex = /^[0-9]+$/;
 exports.ItemWithLabel = (0, react_1.forwardRef)(function ItemWithLabel(_a, ref) {
-    var { id, testId, 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 } = _a, rest = __rest(_a, ["id", "testId", "labelPosition", "style", "className", "label", "labelBreak", "labelWidth", "enabled", "required", "children", "validationInProgress", "shrinkToLabel", "onFocus", "onBlur", "labelStyle", "validationResult", "isInputTemplateUsed", "onLabelClick"]);
-    // --- HACK: the "rest" may contain a "layoutContext" property that React doesn't recognize
-    // --- as a valid DOM attribute, which would issue a warning in React.
-    if (rest.layoutContext !== undefined) {
-        delete rest.layoutContext;
-    }
-    // --- END HACK
+    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 cloneElement(children as ReactElement, {
-        //   ...mergeProps((children as ReactElement).props, {
-        //     style,
-        //     id: inputId,
-        //     onFocus: onFocus,
-        //     onBlur: onBlur
-        //   }),
-        // });
     }
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({}, rest, { "data-testid": testId, 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, {
+    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",
@@ -57,5 +43,10 @@ exports.ItemWithLabel = (0, react_1.forwardRef)(function ItemWithLabel(_a, ref)
                             [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, jsx_runtime_1.jsx)(react_slot_1.Slot, { "data-part-id": parts_1.PART_LABELED_ITEM, id: !isInputTemplateUsed ? inputId : undefined, "data-testid": undefined, children: children })] }), validationResult] })));
+                        }), 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] })));
 });

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

@@ -291,6 +291,7 @@ function useValidationDisplay(bindTo, value, validationResult, validationMode =
     const interactionFlags = (0, FormContext_1.useFormContextPart)((value) => value.interactionFlags[bindTo]) || constants_1.EMPTY_OBJECT;
     const forceShowValidationResult = interactionFlags.forceShowValidationResult;
     const focused = interactionFlags.focused;
+    const afterFirstDirtyBlur = interactionFlags.afterFirstDirtyBlur;
     const isValidLostFocus = interactionFlags.isValidLostFocus;
     const isValidOnFocus = interactionFlags.isValidOnFocus;
     const invalidToValid = interactionFlags.invalidToValid;
@@ -313,15 +314,33 @@ function useValidationDisplay(bindTo, value, validationResult, validationMode =
     }
     let isHelperTextShown = false;
     switch (validationMode) {
-        case "errorLate":
-            isHelperTextShown =
-                isDirty && (focused ? !invalidToValid && !isValidOnFocus : !isValidLostFocus);
+        // This validation model was inspired by https://medium.com/wdstack/inline-validation-in-forms-designing-the-experience-123fb34088ce
+        // The idea is to show validation errors as late as possible (on blur)
+        case "errorLate": {
+            // --- Don't fire if not dirty
+            if (!isDirty) {
+                isHelperTextShown = false;
+                break;
+            }
+            // --- Show if losing focus and invalid
+            if (!focused && !isValidLostFocus) {
+                isHelperTextShown = true;
+                break;
+            }
+            // --- Show if focused, after first meaningful blur, was not valid on last focus and not changed to valid while typing
+            if (focused && afterFirstDirtyBlur && !isValidOnFocus && !invalidToValid) {
+                isHelperTextShown = true;
+                break;
+            }
             break;
-        case "onChanged":
+        }
+        case "onChanged": {
             isHelperTextShown = isDirty;
             break;
-        case "onLostFocus":
-            isHelperTextShown = isDirty && ((!focused && !isValid) || (!isValidLostFocus && !isValid));
+        }
+        case "onLostFocus": {
+            isHelperTextShown = isDirty && !focused && !isValidLostFocus;
+        }
     }
     isHelperTextShown = isHelperTextShown || forceShowValidationResult;
     const [prevStableShown, setPrevStableShown] = (0, react_1.useState)(isHelperTextShown);

package/dist/scripts/src/components/Icon/IconNative.js

@@ -26,10 +26,10 @@ const StyleParser_1 = require("../../parsers/style-parser/StyleParser");
 exports.Icon = (0, react_1.forwardRef)(function Icon(_a, ref) {
     var _b;
     var { name, fallback, style, className, size, onClick, tabIndex, onKeyDown } = _a, restProps = __rest(_a, ["name", "fallback", "style", "className", "size", "onClick", "tabIndex", "onKeyDown"]);
-    const iconRenderer = useFindIconRenderer(name, fallback);
+    const { iconRenderer, iconName } = useFindIconRenderer(name, fallback);
     // Handle keyboard events for clickable icons
     const handleKeyDown = (event) => {
-        if (onClick && (event.key === 'Enter' || event.key === ' ')) {
+        if (onClick && (event.key === "Enter" || event.key === " ")) {
             event.preventDefault();
             onClick(event);
         }
@@ -40,7 +40,7 @@ exports.Icon = (0, react_1.forwardRef)(function Icon(_a, ref) {
     const height = computedSize || restProps.height;
     const computedProps = Object.assign(Object.assign({ 
         // className is needed to apply a default color to the icon, thus other component classes can override this one
-        className: (0, classnames_1.default)(Icon_module_scss_1.default.base, className, { [Icon_module_scss_1.default.clickable]: !!onClick }) }, restProps), { size: computedSize, width: width, height: height, style: Object.assign(Object.assign({}, style), { "--icon-width": width, "--icon-height": height }), onClick, onKeyDown: handleKeyDown, tabIndex: onClick ? (tabIndex !== null && tabIndex !== void 0 ? tabIndex : 0) : tabIndex });
+        className: (0, classnames_1.default)(Icon_module_scss_1.default.base, className, { [Icon_module_scss_1.default.clickable]: !!onClick }) }, restProps), { size: computedSize, width: width, height: height, style: Object.assign(Object.assign({}, style), { "--icon-width": width, "--icon-height": height }), "data-icon-name": iconName, onClick, onKeyDown: handleKeyDown, tabIndex: onClick ? (tabIndex !== null && tabIndex !== void 0 ? tabIndex : 0) : tabIndex });
     // ---
     const customIconUrl = useCustomIconUrl(name);
     if (customIconUrl) {
@@ -50,14 +50,14 @@ exports.Icon = (0, react_1.forwardRef)(function Icon(_a, ref) {
     if (!renderedIcon) {
         return null;
     }
-    return (0, jsx_runtime_1.jsx)("span", { ref: ref, style: { display: "inline-block" }, children: renderedIcon });
+    return ((0, jsx_runtime_1.jsx)("span", { ref: ref, style: { display: "inline-block" }, children: renderedIcon }));
 });
 const CustomIcon = (0, react_1.forwardRef)(function CustomIcon(props, ref) {
     var _a;
     const { url, width, height, name, style, className, onClick, onKeyDown, tabIndex } = props, rest = __rest(props, ["url", "width", "height", "name", "style", "className", "onClick", "onKeyDown", "tabIndex"]);
     // Handle keyboard events for clickable icons
     const handleKeyDown = (event) => {
-        if (onClick && (event.key === 'Enter' || event.key === ' ')) {
+        if (onClick && (event.key === "Enter" || event.key === " ")) {
             event.preventDefault();
             onClick(event);
         }
@@ -69,14 +69,14 @@ const CustomIcon = (0, react_1.forwardRef)(function CustomIcon(props, ref) {
     if (resourceUrl && isSvgIcon) {
         const renderedIcon = customSvgIconRenderer === null || customSvgIconRenderer === void 0 ? void 0 : customSvgIconRenderer(Object.assign({ style,
             className,
-            onClick, onKeyDown: handleKeyDown, tabIndex: onClick ? (tabIndex !== null && tabIndex !== void 0 ? tabIndex : 0) : tabIndex }, rest));
+            onClick, onKeyDown: handleKeyDown, tabIndex: onClick ? (tabIndex !== null && tabIndex !== void 0 ? tabIndex : 0) : tabIndex, "data-icon-name": name }, rest));
         if (!renderedIcon) {
             //to prevent layout shift
-            return ((0, jsx_runtime_1.jsx)("span", Object.assign({}, rest, { ref: ref, style: style, className: className, onClick: onClick, onKeyDown: handleKeyDown, tabIndex: onClick ? (tabIndex !== null && tabIndex !== void 0 ? tabIndex : 0) : tabIndex })));
+            return ((0, jsx_runtime_1.jsx)("span", Object.assign({}, rest, { "data-icon-name": name, ref: ref, style: style, className: className, onClick: onClick, onKeyDown: handleKeyDown, tabIndex: onClick ? (tabIndex !== null && tabIndex !== void 0 ? tabIndex : 0) : tabIndex })));
         }
         return renderedIcon;
     }
-    return ((0, jsx_runtime_1.jsx)("img", Object.assign({ ref: ref, src: resourceUrl, style: Object.assign({ width, height }, style), alt: name, onClick: onClick, onKeyDown: handleKeyDown, tabIndex: onClick ? (tabIndex !== null && tabIndex !== void 0 ? tabIndex : 0) : tabIndex }, rest)));
+    return ((0, jsx_runtime_1.jsx)("img", Object.assign({ ref: ref, src: resourceUrl, "data-icon-name": name, style: Object.assign({ width, height }, style), alt: name, onClick: onClick, onKeyDown: handleKeyDown, tabIndex: onClick ? (tabIndex !== null && tabIndex !== void 0 ? tabIndex : 0) : tabIndex }, rest)));
 });
 function useCustomIconUrl(iconName) {
     const { getResourceUrl } = (0, ThemeContext_1.useTheme)();
@@ -104,21 +104,24 @@ function useFindIconRenderer(name, fallback) {
         // Component specific icon
         if (parts.length > 1) {
             const iconRenderer = iconRegistry.lookupIconRenderer(`${parts[0].toLowerCase()}${separator}${parts[1]}`);
-            if (iconRenderer)
-                return iconRenderer;
+            if (iconRenderer) {
+                return { iconRenderer, iconName: name };
+            }
         }
         // General icon
         if (parts.length === 1) {
             const iconRenderer = iconRegistry.lookupIconRenderer(parts[0]);
-            if (iconRenderer)
-                return iconRenderer;
+            if (iconRenderer) {
+                return { iconRenderer, iconName: name };
+            }
         }
     }
     if (fallback && typeof fallback === "string") {
         const iconRenderer = iconRegistry.lookupIconRenderer(fallback.toLowerCase());
-        if (iconRenderer)
-            return iconRenderer;
+        if (iconRenderer) {
+            return { iconRenderer, iconName: fallback };
+        }
     }
-    return null;
+    return { iconRenderer: null, iconName: null };
 }
 exports.default = exports.Icon;

package/dist/scripts/src/components/Input/PartialInput.js

@@ -36,7 +36,7 @@ const PartialInput_module_scss_1 = __importDefault(require("./PartialInput.modul
  * @returns A configured input element with enhanced multi-field input behavior
  */
 function PartialInput(_a) {
-    var { value, placeholder, onChange, onBlur, onKeyDown, emptyCharacter, placeholderLength = 2, max, min, maxLength = 2, validateFn, onBeep, nextInputRef, nextButtonRef, name, ariaLabel, className, invalidClassName, disabled, readOnly, required, autoFocus, inputRef, step = 1, isInvalid = false } = _a, restProps = __rest(_a, ["value", "placeholder", "onChange", "onBlur", "onKeyDown", "emptyCharacter", "placeholderLength", "max", "min", "maxLength", "validateFn", "onBeep", "nextInputRef", "nextButtonRef", "name", "ariaLabel", "className", "invalidClassName", "disabled", "readOnly", "required", "autoFocus", "inputRef", "step", "isInvalid"]);
+    var { value, placeholder, onChange, onBlur, onKeyDown, emptyCharacter, placeholderLength = 2, max, min, maxLength = 2, validateFn, onBeep, nextInputRef, nextButtonRef, id, name, ariaLabel, className, invalidClassName, disabled, readOnly, required, autoFocus, inputRef, step = 1, isInvalid = false } = _a, restProps = __rest(_a, ["value", "placeholder", "onChange", "onBlur", "onKeyDown", "emptyCharacter", "placeholderLength", "max", "min", "maxLength", "validateFn", "onBeep", "nextInputRef", "nextButtonRef", "id", "name", "ariaLabel", "className", "invalidClassName", "disabled", "readOnly", "required", "autoFocus", "inputRef", "step", "isInvalid"]);
     /**
      * Process emptyCharacter according to requirements.
      * Handles null/empty values, multi-character strings, and unicode characters.
@@ -147,7 +147,7 @@ function PartialInput(_a) {
         // Call the original onKeyDown handler for other keys
         onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
     }, [onKeyDown]);
-    return ((0, jsx_runtime_1.jsx)("input", Object.assign({}, restProps, { "aria-label": ariaLabel, autoComplete: "off", 
+    return ((0, jsx_runtime_1.jsx)("input", Object.assign({}, restProps, { id: id, "aria-label": ariaLabel, autoComplete: "off", 
         // biome-ignore lint/a11y/noAutofocus: This is up to developers' decision
         autoFocus: autoFocus, className: (0, classnames_1.default)(PartialInput_module_scss_1.default.partialInput, className, {
             [invalidClassName]: isInvalid,

package/dist/scripts/src/components/NestedApp/AppWithCodeViewNative.js

@@ -36,7 +36,7 @@ function AppWithCodeViewNative({ markdown, splitView, withFrame = true, noHeader
     const appContext = (0, AppContext_1.useAppContext)();
     const [refreshVersion, setRefreshVersion] = (0, react_1.useState)(0);
     const { activeTheme: currentTheme, activeThemeTone, activeThemeId } = (0, ThemeContext_1.useTheme)();
-    const safePopOutUrl = (0, utils_1.withoutTrailingSlash)(popOutUrl || ((_a = appContext === null || appContext === void 0 ? void 0 : appContext.appGlobals) === null || _a === void 0 ? void 0 : _a.popOutUrl) || "https://docs.xmlui.org/#/playground");
+    const safePopOutUrl = (0, utils_1.withoutTrailingSlash)(popOutUrl || ((_a = appContext === null || appContext === void 0 ? void 0 : appContext.appGlobals) === null || _a === void 0 ? void 0 : _a.popOutUrl) || "https://playground.xmlui.org/#/playground");
     const openPlayground = (0, react_1.useCallback)(() => __awaiter(this, void 0, void 0, function* () {
         const data = {
             standalone: {

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

@@ -34,10 +34,6 @@ exports.NumberBoxMd = (0, metadata_helpers_1.createMetadata)({
     props: {
         placeholder: (0, metadata_helpers_1.dPlaceholder)(),
         initialValue: (0, metadata_helpers_1.dInitialValue)(),
-        label: (0, metadata_helpers_1.dLabel)(),
-        labelPosition: (0, metadata_helpers_1.dLabelPosition)("top"),
-        labelWidth: (0, metadata_helpers_1.dLabelWidth)(COMP),
-        labelBreak: (0, metadata_helpers_1.dLabelBreak)(COMP),
         maxLength: (0, metadata_helpers_1.dMaxLength)(),
         autoFocus: (0, metadata_helpers_1.dAutoFocus)(),
         required: (0, metadata_helpers_1.dRequired)(),
@@ -118,10 +114,10 @@ exports.NumberBoxMd = (0, metadata_helpers_1.createMetadata)({
     },
 });
 exports.numberBoxComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.NumberBoxMd, ({ node, state, updateState, lookupEventHandler, extractValue, className, registerComponentApi, }) => {
-    // --- Handle initial value as a number
-    let extractedInitialValue = extractValue(node.props.initialValue);
-    if (typeof extractedInitialValue === "string" && !isNaN(parseFloat(extractedInitialValue))) {
-        extractedInitialValue = Number(extractedInitialValue);
+    let extractedInitialValue;
+    try {
+        extractedInitialValue = extractValue.asOptionalNumber(node.props.initialValue);
     }
-    return ((0, jsx_runtime_1.jsx)(NumberBoxNative_1.NumberBox, { className: className, value: state === null || state === void 0 ? void 0 : state.value, initialValue: extractedInitialValue, step: extractValue(node.props.step), enabled: extractValue.asOptionalBoolean(node.props.enabled), placeholder: extractValue.asOptionalString(node.props.placeholder), validationStatus: extractValue(node.props.validationStatus), updateState: updateState, onDidChange: lookupEventHandler("didChange"), onFocus: lookupEventHandler("gotFocus"), onBlur: lookupEventHandler("lostFocus"), registerComponentApi: registerComponentApi, hasSpinBox: extractValue.asOptionalBoolean(node.props.hasSpinBox), integersOnly: extractValue.asOptionalBoolean(node.props.integersOnly), zeroOrPositive: extractValue.asOptionalBoolean(node.props.zeroOrPositive), min: extractValue.asOptionalNumber(node.props.minValue), max: extractValue.asOptionalNumber(node.props.maxValue), startText: extractValue.asOptionalString(node.props.startText), startIcon: extractValue.asOptionalString(node.props.startIcon), endText: extractValue.asOptionalString(node.props.endText), gap: extractValue.asOptionalString(node.props.gap), endIcon: extractValue.asOptionalString(node.props.endIcon), spinnerUpIcon: extractValue.asOptionalString(node.props.spinnerUpIcon), spinnerDownIcon: extractValue.asOptionalString(node.props.spinnerDownIcon), autoFocus: extractValue.asOptionalBoolean(node.props.autoFocus), readOnly: extractValue.asOptionalBoolean(node.props.readOnly), maxLength: extractValue(node.props.maxLength), label: extractValue(node.props.label), labelPosition: extractValue(node.props.labelPosition), labelWidth: extractValue(node.props.labelWidth), labelBreak: extractValue.asOptionalBoolean(node.props.labelBreak), required: extractValue.asOptionalBoolean(node.props.required) }));
+    catch (_a) { }
+    return ((0, jsx_runtime_1.jsx)(NumberBoxNative_1.NumberBox, { className: className, value: state === null || state === void 0 ? void 0 : state.value, initialValue: extractedInitialValue, step: extractValue(node.props.step), enabled: extractValue.asOptionalBoolean(node.props.enabled), placeholder: extractValue.asOptionalString(node.props.placeholder), validationStatus: extractValue(node.props.validationStatus), updateState: updateState, onDidChange: lookupEventHandler("didChange"), onFocus: lookupEventHandler("gotFocus"), onBlur: lookupEventHandler("lostFocus"), registerComponentApi: registerComponentApi, hasSpinBox: extractValue.asOptionalBoolean(node.props.hasSpinBox), integersOnly: extractValue.asOptionalBoolean(node.props.integersOnly), zeroOrPositive: extractValue.asOptionalBoolean(node.props.zeroOrPositive), min: extractValue.asOptionalNumber(node.props.minValue), max: extractValue.asOptionalNumber(node.props.maxValue), startText: extractValue.asOptionalString(node.props.startText), startIcon: extractValue.asOptionalString(node.props.startIcon), endText: extractValue.asOptionalString(node.props.endText), gap: extractValue.asOptionalString(node.props.gap), endIcon: extractValue.asOptionalString(node.props.endIcon), spinnerUpIcon: extractValue.asOptionalString(node.props.spinnerUpIcon), spinnerDownIcon: extractValue.asOptionalString(node.props.spinnerDownIcon), autoFocus: extractValue.asOptionalBoolean(node.props.autoFocus), readOnly: extractValue.asOptionalBoolean(node.props.readOnly), maxLength: extractValue(node.props.maxLength), required: extractValue.asOptionalBoolean(node.props.required), direction: extractValue(node.props.direction) }));
 });