xmlui 0.10.15 → 0.10.16

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/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

@@ -118,10 +118,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);
     }
+    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), 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) }));
 });