xmlui 0.9.51 → 0.9.53

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

@@ -23,14 +23,17 @@ const AppRoot_1 = require("../../components-core/rendering/AppRoot");
 const lia_1 = require("react-icons/lia");
 const rx_1 = require("react-icons/rx");
 const xmlui_parser_1 = require("../../components-core/xmlui-parser");
+const ApiInterceptorProvider_1 = require("../../components-core/interception/ApiInterceptorProvider");
 const ErrorBoundary_1 = require("../../components-core/rendering/ErrorBoundary");
 const Tooltip_1 = require("./Tooltip");
 const ThemeContext_1 = require("../../components-core/theming/ThemeContext");
-const constants_1 = require("../../components-core/constants");
 const utils_1 = require("./utils");
 const AppContext_1 = require("../../components-core/AppContext");
 const ComponentRegistryContext_1 = require("../ComponentRegistryContext");
 const IndexerContext_1 = require("../App/IndexerContext");
+const useApiInterceptorContext_1 = require("../../components-core/interception/useApiInterceptorContext");
+const constants_1 = require("../../components-core/constants");
+const defaultProps_1 = require("./defaultProps");
 function LazyNestedApp(props) {
     const [shouldRender, setShouldRender] = (0, react_1.useState)(false);
     (0, react_1.useEffect)(() => {
@@ -50,7 +53,7 @@ function IndexAwareNestedApp(props) {
     }
     return (0, jsx_runtime_1.jsx)(LazyNestedApp, Object.assign({}, props));
 }
-function NestedApp({ api, app, components = constants_1.EMPTY_ARRAY, config, activeTheme, activeTone, title, height, allowPlaygroundPopup = true, withFrame = true, }) {
+function NestedApp({ api, app, components = constants_1.EMPTY_ARRAY, config, activeTheme, activeTone, title, height, allowPlaygroundPopup = defaultProps_1.defaultProps.allowPlaygroundPopup, withFrame = defaultProps_1.defaultProps.withFrame, playgroundId, }) {
     const rootRef = (0, react_1.useRef)(null);
     const shadowRef = (0, react_1.useRef)(null);
     const contentRootRef = (0, react_1.useRef)(null);
@@ -60,30 +63,28 @@ function NestedApp({ api, app, components = constants_1.EMPTY_ARRAY, config, act
     const toneToApply = activeTone || (config === null || config === void 0 ? void 0 : config.defaultTone) || (theme === null || theme === void 0 ? void 0 : theme.activeThemeTone);
     const { appGlobals } = (0, AppContext_1.useAppContext)();
     const componentRegistry = (0, ComponentRegistryContext_1.useComponentRegistry)();
-    // const [apiWorker, setApiWorker] = useState(undefined);
-    // useEffect(() => {
-    //   let worker;
-    //   (async function () {
-    //     const { setupWorker } = await import("msw/browser");
-    //     worker = setupWorker();
-    //     worker.start({
-    //       onUnhandledRequest: "bypass",
-    //       quiet: true,
-    //     });
-    //     setApiWorker(worker);
-    //   })();
-    //   return () => worker?.stop();
-    // }, []);
-    // console.log("apiWorker", apiWorker);
-    // const mock = useMemo(() => {
-    //   return api
-    //     ? {
-    //         type: "in-memory",
-    //         ...api,
-    //         apiUrl: "/api",
-    //       }
-    //     : undefined;
-    // }, [api]);
+    const { interceptorWorker } = (0, useApiInterceptorContext_1.useApiInterceptorContext)();
+    //TODO illesg: we should come up with something to make sure that nestedApps doesn't overwrite each other's mocked api endpoints
+    //   disabled for now, as it messes up the paths of not mocked APIs (e.g. resources/{staticJsonfiles})
+    //const safeId = playgroundId || nestedAppId;
+    //const apiUrl = api ? `/${safeId.replaceAll(":", "")}` : '';
+    const apiUrl = '';
+    const mock = (0, react_1.useMemo)(() => {
+        if (!api) {
+            return undefined;
+        }
+        let apiObject = api;
+        if (typeof api === "string") {
+            try {
+                apiObject = JSON.parse(api.replaceAll("\n", " "));
+            }
+            catch (e) {
+                console.error("Failed to parse API definition", e);
+                return undefined;
+            }
+        }
+        return Object.assign(Object.assign({}, apiObject), { type: "in-memory" });
+    }, [api]);
     //console.log("mock", mock);
     const useHashBasedRouting = (appGlobals === null || appGlobals === void 0 ? void 0 : appGlobals.useHashBasedRouting) || true;
     const openPlayground = (0, react_1.useCallback)(() => __awaiter(this, void 0, void 0, function* () {
@@ -96,6 +97,7 @@ function NestedApp({ api, app, components = constants_1.EMPTY_ARRAY, config, act
                     themes: [],
                     defaultTheme: activeTheme,
                 },
+                api: api,
             },
             options: {
                 fixedTheme: false,
@@ -109,7 +111,7 @@ function NestedApp({ api, app, components = constants_1.EMPTY_ARRAY, config, act
         };
         const appQueryString = yield (0, utils_1.createQueryString)(JSON.stringify(data));
         window.open(useHashBasedRouting ? `/#/playground#${appQueryString}` : `/playground#${appQueryString}`, "_blank");
-    }), [app, components, title, activeTheme, activeTone, useHashBasedRouting]);
+    }), [app, components, title, activeTheme, api, activeTone, useHashBasedRouting]);
     (0, react_1.useEffect)(() => {
         var _a;
         if (!shadowRef.current && rootRef.current) {
@@ -141,16 +143,16 @@ function NestedApp({ api, app, components = constants_1.EMPTY_ARRAY, config, act
             }
             return component;
         });
-        let globalProps = Object.assign(Object.assign({ name: config === null || config === void 0 ? void 0 : config.name }, ((config === null || config === void 0 ? void 0 : config.appGlobals) || {})), { apiUrl: "" });
+        let globalProps = Object.assign(Object.assign({ name: config === null || config === void 0 ? void 0 : config.name }, ((config === null || config === void 0 ? void 0 : config.appGlobals) || {})), { apiUrl });
         // css variables are leaking into to shadow dom, so we reset them here
         const themeVarReset = {};
         Object.keys(theme.themeStyles).forEach((key) => {
             themeVarReset[key] = "initial";
         });
-        let nestedAppRoot = ((0, jsx_runtime_1.jsx)("div", { style: Object.assign({ height }, themeVarReset), children: (0, jsx_runtime_1.jsx)(AppRoot_1.AppRoot, { previewMode: true, standalone: true, trackContainerHeight: height ? "fixed" : "auto", node: component, globalProps: globalProps, defaultTheme: activeTheme || (config === null || config === void 0 ? void 0 : config.defaultTheme), defaultTone: toneToApply, contributes: {
-                    compoundComponents,
-                    themes: config === null || config === void 0 ? void 0 : config.themes,
-                }, resources: config === null || config === void 0 ? void 0 : config.resources, extensionManager: componentRegistry.getExtensionManager() }, `app-${nestedAppId}-${refreshVersion}`) }));
+        let nestedAppRoot = ((0, jsx_runtime_1.jsx)(ApiInterceptorProvider_1.ApiInterceptorProvider, { interceptor: mock, apiWorker: interceptorWorker, children: (0, jsx_runtime_1.jsx)("div", { style: Object.assign({ height }, themeVarReset), children: (0, jsx_runtime_1.jsx)(AppRoot_1.AppRoot, { previewMode: true, standalone: true, trackContainerHeight: height ? "fixed" : "auto", node: component, globalProps: globalProps, defaultTheme: activeTheme || (config === null || config === void 0 ? void 0 : config.defaultTheme), defaultTone: toneToApply, contributes: {
+                        compoundComponents,
+                        themes: config === null || config === void 0 ? void 0 : config.themes,
+                    }, resources: config === null || config === void 0 ? void 0 : config.resources, extensionManager: componentRegistry.getExtensionManager() }, `app-${nestedAppId}-${refreshVersion}`) }) }));
         (_a = contentRootRef.current) === null || _a === void 0 ? void 0 : _a.render((0, jsx_runtime_1.jsx)(ErrorBoundary_1.ErrorBoundary, { node: component, children: withFrame ? ((0, jsx_runtime_1.jsxs)("div", { className: NestedApp_module_scss_1.default.nestedAppContainer, children: [(0, jsx_runtime_1.jsxs)("div", { className: NestedApp_module_scss_1.default.header, children: [(0, jsx_runtime_1.jsx)("span", { className: NestedApp_module_scss_1.default.headerText, children: title }), (0, jsx_runtime_1.jsx)("div", { className: NestedApp_module_scss_1.default.spacer }), allowPlaygroundPopup && ((0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { trigger: (0, jsx_runtime_1.jsx)("button", { className: NestedApp_module_scss_1.default.headerButton, onClick: () => {
                                         openPlayground();
                                     }, children: (0, jsx_runtime_1.jsx)(rx_1.RxOpenInNewWindow, {}) }), label: "Edit code in new window" })), (0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { trigger: (0, jsx_runtime_1.jsx)("button", { className: NestedApp_module_scss_1.default.headerButton, onClick: () => {
@@ -159,7 +161,7 @@ function NestedApp({ api, app, components = constants_1.EMPTY_ARRAY, config, act
     }, [
         activeTheme,
         allowPlaygroundPopup,
-        // apiWorker,
+        interceptorWorker,
         app,
         componentRegistry,
         components,
@@ -169,7 +171,7 @@ function NestedApp({ api, app, components = constants_1.EMPTY_ARRAY, config, act
         config === null || config === void 0 ? void 0 : config.resources,
         config === null || config === void 0 ? void 0 : config.themes,
         height,
-        // mock,
+        mock,
         nestedAppId,
         openPlayground,
         refreshVersion,
@@ -177,6 +179,7 @@ function NestedApp({ api, app, components = constants_1.EMPTY_ARRAY, config, act
         title,
         toneToApply,
         withFrame,
+        apiUrl,
     ]);
     const mountedRef = (0, react_1.useRef)(false);
     (0, react_1.useEffect)(() => {

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

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultProps = void 0;
+// Default props for NestedApp component
+const constants_1 = require("../../components-core/constants");
+exports.defaultProps = {
+    allowPlaygroundPopup: true,
+    withFrame: true,
+    components: constants_1.EMPTY_ARRAY
+};

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

@@ -17,11 +17,15 @@ exports.NoResultMd = (0, ComponentDefs_1.createMetadata)({
         `resulted in no (zero) items.`,
     props: {
         label: (0, metadata_helpers_1.dLabel)(),
-        icon: (0, ComponentDefs_1.d)(`This property defines the icon to display with the component.`),
+        icon: {
+            description: `This property defines the icon to display with the component.`,
+            valueType: "string",
+            defaultValue: NoResultNative_1.defaultProps.icon,
+        },
         hideIcon: {
             description: `This boolean property indicates if the icon should be hidden.`,
             valueType: "boolean",
-            defaultValue: "false",
+            defaultValue: NoResultNative_1.defaultProps.hideIcon,
         },
     },
     themeVars: (0, themeVars_1.parseScssVar)(NoResult_module_scss_1.default.themeVars),

package/dist/scripts/src/components/NoResult/NoResultNative.js

@@ -3,11 +3,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.NoResult = void 0;
+exports.NoResult = exports.defaultProps = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const NoResult_module_scss_1 = __importDefault(require("./NoResult.module.scss"));
 const IconNative_1 = require("../Icon/IconNative");
-exports.NoResult = (0, react_1.forwardRef)(function NoResult({ label, icon, hideIcon = false, style }, forwardedRef) {
-    return ((0, jsx_runtime_1.jsxs)("div", { className: NoResult_module_scss_1.default.wrapper, style: style, ref: forwardedRef, children: [!hideIcon && (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: icon !== null && icon !== void 0 ? icon : "noresult", className: NoResult_module_scss_1.default.icon }), label] }));
+// Default props for the NoResult component
+exports.defaultProps = {
+    hideIcon: false,
+    icon: "noresult"
+};
+exports.NoResult = (0, react_1.forwardRef)(function NoResult({ label, icon = exports.defaultProps.icon, hideIcon = exports.defaultProps.hideIcon, style }, forwardedRef) {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: NoResult_module_scss_1.default.wrapper, style: style, ref: forwardedRef, children: [!hideIcon && (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: icon, className: NoResult_module_scss_1.default.icon }), label] }));
 });

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

@@ -41,10 +41,10 @@ exports.NumberBoxMd = (0, ComponentDefs_1.createMetadata)({
             valueType: "boolean",
             defaultValue: true,
         },
-        spinnerUpIcon: (0, ComponentDefs_1.d)(`Allows setting the icon displayed in the ${COMP} spinner for incrementing values. You can change ` +
+        spinnerUpIcon: (0, ComponentDefs_1.d)(`Allows setting an alternate icon displayed in the ${COMP} spinner for incrementing values. You can change ` +
             `the default icon for all ${COMP} instances with the "icon.spinnerUp:NumberBox" declaration in the ` +
             `app configuration file.`),
-        spinnerDownIcon: (0, ComponentDefs_1.d)(`Allows setting the icon displayed in the ${COMP} spinner for decrementing values. You can change ` +
+        spinnerDownIcon: (0, ComponentDefs_1.d)(`Allows setting an alternate icon displayed in the ${COMP} spinner for decrementing values. You can change ` +
             `the default icon for all ${COMP} instances with the "icon.spinnerDown:NumberBox" declaration in the ` +
             `app configuration file.`),
         step: {
@@ -64,10 +64,12 @@ exports.NumberBoxMd = (0, ComponentDefs_1.createMetadata)({
             valueType: "boolean",
             defaultValue: false,
         },
-        minValue: (0, ComponentDefs_1.d)(`The minimum value the input field allows. Can be a float or an integer if ` +
-            `[\`integersOnly\`](#integersonly) is set to \`false\`, otherwise it can only be an integer.`),
-        maxValue: (0, ComponentDefs_1.d)(`The maximum value the input field allows. Can be a float or an integer if ` +
-            `[\`integersOnly\`](#integersonly) is set to \`false\`, otherwise it can only be an integer.`),
+        minValue: (0, ComponentDefs_1.d)("The minimum value the input field allows. Can be a float or an integer if " +
+            "[\`integersOnly\`](#integersonly) is set to \`false\`, otherwise it can only be an integer." +
+            "If not set, no minimum value check is done."),
+        maxValue: (0, ComponentDefs_1.d)("The maximum value the input field allows. Can be a float or an integer if " +
+            "[\`integersOnly\`](#integersonly) is set to \`false\`, otherwise it can only be an integer." +
+            "If not set, no maximum value check is done."),
     },
     events: {
         gotFocus: (0, metadata_helpers_1.dGotFocus)(COMP),

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

@@ -20,7 +20,7 @@ exports.NumberBoxMd2 = (0, ComponentDefs_1.createMetadata)({
         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"),
+        labelPosition: (0, metadata_helpers_1.dLabelPosition)(NumberBox2Native_1.defaultProps.labelPosition),
         labelWidth: (0, metadata_helpers_1.dLabelWidth)(COMP),
         labelBreak: (0, metadata_helpers_1.dLabelBreak)(COMP),
         maxLength: (0, metadata_helpers_1.dMaxLength)(),
@@ -36,7 +36,7 @@ exports.NumberBoxMd2 = (0, ComponentDefs_1.createMetadata)({
         hasSpinBox: {
             description: `This boolean prop shows (\`true\`) or hides (\`false\`) the spinner buttons for the input field.`,
             valueType: "boolean",
-            defaultValue: true,
+            defaultValue: NumberBox2Native_1.defaultProps.hasSpinBox,
         },
         spinnerUpIcon: (0, ComponentDefs_1.d)(`Allows setting the icon displayed in the ${COMP} spinner for incrementing values. You can change ` +
             `the default icon for all ${COMP} instances with the "icon.spinnerUp:NumberBox" declaration in the ` +
@@ -47,25 +47,25 @@ exports.NumberBoxMd2 = (0, ComponentDefs_1.createMetadata)({
         step: {
             description: `This prop governs how big the step when clicking on the spinner of the field.`,
             valueType: "number",
-            defaultValue: 1,
+            defaultValue: NumberBox2Native_1.defaultProps.step,
         },
         integersOnly: {
             description: `This boolean property signs whether the input field accepts integers only (\`true\`) ` +
                 `or not (\`false\`).`,
             valueType: "boolean",
-            defaultValue: false,
+            defaultValue: NumberBox2Native_1.defaultProps.integersOnly,
         },
         maxFractionDigits: {
             description: `This prop sets the maximum number of decimal places allowed in the input field. ` +
                 `If the number of decimal places is greater than this value, the value will be truncated to the maximum allowed decimal places. `,
             valueType: "number",
-            defaultValue: 3,
+            defaultValue: NumberBox2Native_1.defaultProps.maxFractionDigits,
         },
         zeroOrPositive: {
             description: `This boolean property determines whether the input value can only be 0 or positive numbers ` +
                 `(\`true\`) or also negative (\`false\`).`,
             valueType: "boolean",
-            defaultValue: false,
+            defaultValue: NumberBox2Native_1.defaultProps.zeroOrPositive,
         },
         minValue: (0, ComponentDefs_1.d)(`The minimum value the input field allows. Can be a float or an integer if ` +
             `[\`integersOnly\`](#integersonly) is set to \`false\`, otherwise it can only be an integer.`),

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

@@ -36,7 +36,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.NumberBox2 = void 0;
+exports.NumberBox2 = exports.defaultProps = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
@@ -50,7 +50,20 @@ const ButtonNative_1 = require("../Button/ButtonNative");
 const ItemWithLabel_1 = require("../FormItem/ItemWithLabel");
 const lodash_es_1 = require("lodash-es");
 const number_1 = require("@internationalized/number");
-exports.NumberBox2 = (0, react_1.forwardRef)(function NumberBox2({ id, style, value, initialValue, zeroOrPositive = false, min = zeroOrPositive ? 0 : -numberbox_abstractions_1.NUMBERBOX_MAX_VALUE, max = numberbox_abstractions_1.NUMBERBOX_MAX_VALUE, maxFractionDigits = 3, enabled = true, placeholder, step, integersOnly = false, validationStatus = "none", hasSpinBox = true, updateState = constants_1.noop, onDidChange = constants_1.noop, onFocus = constants_1.noop, onBlur = constants_1.noop, registerComponentApi, startText, startIcon, endText, endIcon, spinnerUpIcon, spinnerDownIcon, autoFocus, readOnly, required, label, labelPosition, labelWidth, labelBreak, }, forwardedRef) {
+// Default props for NumberBox2 component
+exports.defaultProps = {
+    zeroOrPositive: false,
+    min: -numberbox_abstractions_1.NUMBERBOX_MAX_VALUE,
+    max: numberbox_abstractions_1.NUMBERBOX_MAX_VALUE,
+    maxFractionDigits: 3,
+    enabled: true,
+    integersOnly: false,
+    validationStatus: "none",
+    hasSpinBox: true,
+    step: 1,
+    labelPosition: "top",
+};
+exports.NumberBox2 = (0, react_1.forwardRef)(function NumberBox2({ id, style, value, initialValue, zeroOrPositive = exports.defaultProps.zeroOrPositive, min = zeroOrPositive ? 0 : exports.defaultProps.min, max = exports.defaultProps.max, maxFractionDigits = exports.defaultProps.maxFractionDigits, enabled = exports.defaultProps.enabled, placeholder, step = exports.defaultProps.step, integersOnly = exports.defaultProps.integersOnly, validationStatus = exports.defaultProps.validationStatus, hasSpinBox = exports.defaultProps.hasSpinBox, updateState = constants_1.noop, onDidChange = constants_1.noop, onFocus = constants_1.noop, onBlur = constants_1.noop, registerComponentApi, startText, startIcon, endText, endIcon, spinnerUpIcon, spinnerDownIcon, autoFocus, readOnly, required, label, labelPosition, labelWidth, labelBreak, }, forwardedRef) {
     var _a, _b, _c;
     const inputRef = (0, react_1.useRef)(null);
     const upButton = (0, react_1.useRef)(null);

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

@@ -36,7 +36,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.NumberBox = void 0;
+exports.NumberBox = exports.defaultProps = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
@@ -48,7 +48,21 @@ const IconNative_1 = require("../Icon/IconNative");
 const InputAdornment_1 = require("../Input/InputAdornment");
 const ButtonNative_1 = require("../Button/ButtonNative");
 const ItemWithLabel_1 = require("../FormItem/ItemWithLabel");
-exports.NumberBox = (0, react_1.forwardRef)(function NumberBox({ id, value, initialValue, style, enabled = true, placeholder, validationStatus = "none", hasSpinBox = true, step, integersOnly = false, zeroOrPositive = false, min = zeroOrPositive ? 0 : -numberbox_abstractions_1.NUMBERBOX_MAX_VALUE, max = numberbox_abstractions_1.NUMBERBOX_MAX_VALUE, maxLength, updateState = constants_1.noop, onDidChange = constants_1.noop, onFocus = constants_1.noop, onBlur = constants_1.noop, registerComponentApi, startText, startIcon, endText, endIcon, gap, spinnerUpIcon, spinnerDownIcon, autoFocus, readOnly, required, label, labelPosition, labelWidth, labelBreak, }, forwardedRef) {
+// Default props for NumberBox component
+exports.defaultProps = {
+    enabled: true,
+    validationStatus: "none",
+    hasSpinBox: true,
+    integersOnly: false,
+    zeroOrPositive: false,
+    min: -numberbox_abstractions_1.NUMBERBOX_MAX_VALUE,
+    max: numberbox_abstractions_1.NUMBERBOX_MAX_VALUE,
+    updateState: constants_1.noop,
+    onDidChange: constants_1.noop,
+    onFocus: constants_1.noop,
+    onBlur: constants_1.noop,
+};
+exports.NumberBox = (0, react_1.forwardRef)(function NumberBox({ id, value, initialValue, style, enabled = exports.defaultProps.enabled, placeholder, validationStatus = exports.defaultProps.validationStatus, hasSpinBox = exports.defaultProps.hasSpinBox, step, integersOnly = exports.defaultProps.integersOnly, zeroOrPositive = exports.defaultProps.zeroOrPositive, min = zeroOrPositive ? 0 : exports.defaultProps.min, max = exports.defaultProps.max, maxLength, updateState = exports.defaultProps.updateState, onDidChange = exports.defaultProps.onDidChange, onFocus = exports.defaultProps.onFocus, onBlur = exports.defaultProps.onBlur, registerComponentApi, startText, startIcon, endText, endIcon, gap, spinnerUpIcon, spinnerDownIcon, autoFocus, readOnly, required, label, labelPosition, labelWidth, labelBreak, }, forwardedRef) {
     var _a;
     // Ensure the provided minimum is not smaller than the 0 if zeroOrPositive is set to true
     min = Math.max(zeroOrPositive ? 0 : -numberbox_abstractions_1.NUMBERBOX_MAX_VALUE, min);

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

@@ -2,12 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.optionComponentRenderer = exports.OptionMd = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
 const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
 const renderers_1 = require("../../components-core/renderers");
-const metadata_helpers_1 = require("../metadata-helpers");
-const OptionTypeProvider_1 = require("./OptionTypeProvider");
 const container_helpers_1 = require("../container-helpers");
+const OptionNative_1 = require("./OptionNative");
 const COMP = "Option";
 exports.OptionMd = (0, ComponentDefs_1.createMetadata)({
     description: `\`${COMP}\` is a non-visual component describing a selection option. Other components ` +
@@ -16,24 +14,21 @@ exports.OptionMd = (0, ComponentDefs_1.createMetadata)({
     props: {
         label: (0, ComponentDefs_1.d)(`This property defines the text to display for the option. If \`label\` is not defined, ` +
             `\`Option\` will use the \`value\` as the label.`),
-        value: (0, ComponentDefs_1.d)(`This property defines the value of the option. If \`value\` is not defined, ` +
-            `\`Option\` will use the \`label\` as the value.`),
-        enabled: (0, metadata_helpers_1.dEnabled)(),
+        value: (0, ComponentDefs_1.d)("This property defines the value of the option. If \`value\` is not defined, " +
+            "\`Option\` will use the \`label\` as the value. If neither is defined, " +
+            "the option is not displayed."),
+        enabled: {
+            description: "This boolean property indicates whether the option is enabled or disabled.",
+            valueType: "boolean",
+            defaultValue: OptionNative_1.defaultProps.enabled,
+        },
         optionTemplate: (0, ComponentDefs_1.d)("This property is used to define a custom option template"),
     },
     childrenAsTemplate: "optionTemplate",
 });
-const OptionNative = (0, react_1.memo)((props) => {
-    const OptionType = (0, OptionTypeProvider_1.useOptionType)();
-    if (!OptionType) {
-        return null;
-    }
-    return (0, jsx_runtime_1.jsx)(OptionType, Object.assign({}, props));
-});
-OptionNative.displayName = "OptionNative";
 exports.optionComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.OptionMd, ({ node, extractValue, layoutCss, renderChild, layoutContext }) => {
     const optionTemplate = node.props.optionTemplate;
-    return ((0, jsx_runtime_1.jsx)(OptionNative, { optionRenderer: optionTemplate
+    return ((0, jsx_runtime_1.jsx)(OptionNative_1.OptionNative, { optionRenderer: optionTemplate
             ? (contextVars) => ((0, jsx_runtime_1.jsx)(container_helpers_1.MemoizedItem, { node: optionTemplate, renderChild: renderChild, contextVars: contextVars, layoutContext: layoutContext }))
             : undefined, value: extractValue(node.props.value), label: extractValue.asOptionalString(node.props.label) || extractValue(node.props.value), enabled: extractValue.asOptionalBoolean(node.props.enabled), style: layoutCss }));
 });

package/dist/scripts/src/components/Option/OptionNative.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OptionNative = exports.defaultProps = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const OptionTypeProvider_1 = require("./OptionTypeProvider");
+// Default props for Option component
+exports.defaultProps = {
+    enabled: true
+};
+exports.OptionNative = (0, react_1.memo)((props) => {
+    const OptionType = (0, OptionTypeProvider_1.useOptionType)();
+    if (!OptionType) {
+        return null;
+    }
+    return (0, jsx_runtime_1.jsx)(OptionType, Object.assign({}, props));
+});
+exports.OptionNative.displayName = "OptionNative";

package/dist/scripts/src/components/PageMetaTitle/PageMetaTilteNative.js

@@ -1,9 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PageMetaTitle = void 0;
+exports.PageMetaTitle = exports.defaultProps = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_helmet_async_1 = require("react-helmet-async");
-const PageMetaTitle = ({ title }) => {
+// Default props for PageMetaTitle component
+exports.defaultProps = {
+    title: "XMLUI Application"
+};
+const PageMetaTitle = ({ title = exports.defaultProps.title }) => {
     return (0, jsx_runtime_1.jsx)(react_helmet_async_1.Helmet, { title: title });
 };
 exports.PageMetaTitle = PageMetaTitle;

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

@@ -10,7 +10,10 @@ exports.PageMetaTitleMd = (0, ComponentDefs_1.createMetadata)({
     description: `A PageMetaTitle component allows setting up (or changing) the app title to display with the ` +
         `current browser tab.`,
     props: {
-        value: (0, ComponentDefs_1.d)(`This property sets the page's title to display in the browser tab.`),
+        value: {
+            description: `This property sets the page's title to display in the browser tab.`,
+            defaultValue: PageMetaTilteNative_1.defaultProps.title,
+        },
     },
 });
 exports.pageMetaTitleComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.PageMetaTitleMd, ({ node, extractValue, renderChild }) => {

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

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
 const renderers_1 = require("../../components-core/renderers");
 const TableOfContentsContext_1 = require("../../components-core/TableOfContentsContext");
+const metadata_helpers_1 = require("../metadata-helpers");
 const PagesNative_1 = require("./PagesNative");
 const PAGE = "Page";
 exports.PageMd = (0, ComponentDefs_1.createMetadata)({
@@ -14,8 +15,8 @@ exports.PageMd = (0, ComponentDefs_1.createMetadata)({
         `to a particular URL that is associated with the page.`,
     props: {
         //TODO illesg rename to path
-        url: (0, ComponentDefs_1.d)(`The URL of the route associated with the content.`),
-        navLabel: (0, ComponentDefs_1.d)("The label of the page that is displayed in the navigation panel. If provided, the " +
+        url: (0, ComponentDefs_1.d)(`The URL of the route associated with the content. If not set, the page is not available.`),
+        navLabel: (0, metadata_helpers_1.dInternal)("The label of the page that is displayed in the navigation panel. If provided, the " +
             "a new entry will be added to the navigation panel."),
     },
 });
@@ -27,7 +28,10 @@ exports.PagesMd = (0, ComponentDefs_1.createMetadata)({
     description: `The \`${COMP}\` component is used as a container for [\`Page\`](/components/Page) components ` +
         `within an [\`App\`](/components/App).`,
     props: {
-        defaultRoute: (0, ComponentDefs_1.d)(`The default route when displaying the app`),
+        defaultRoute: {
+            description: `The default route when displaying the app`,
+            defaultValue: PagesNative_1.defaultProps.defaultRoute,
+        },
     },
 });
 exports.pagesRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.PagesMd, ({ node, extractValue, renderChild }) => {

package/dist/scripts/src/components/Pages/PagesNative.js

@@ -14,6 +14,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultProps = void 0;
 exports.RouteWrapper = RouteWrapper;
 exports.Pages = Pages;
 const jsx_runtime_1 = require("react/jsx-runtime");
@@ -22,6 +23,10 @@ const react_2 = require("@remix-run/react");
 const classnames_1 = __importDefault(require("classnames"));
 const constants_1 = require("../../components-core/constants");
 const Pages_module_scss_1 = __importDefault(require("./Pages.module.scss"));
+// Default props for Pages component
+exports.defaultProps = {
+    defaultRoute: "/"
+};
 function RouteWrapper({ childRoute = constants_1.EMPTY_ARRAY, renderChild, layoutContext, style, uid, }) {
     const params = (0, react_2.useParams)();
     //we need to wrap the child route in a container to make sure the route params are available.

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

@@ -17,7 +17,7 @@ exports.ProgressBarMd = (0, ComponentDefs_1.createMetadata)({
         value: {
             description: `This property defines the progress value with a number between 0 and 1.`,
             valueType: "number",
-            defaultValue: 0,
+            defaultValue: ProgressBarNative_1.defaultProps.value,
         },
     },
     themeVars: (0, themeVars_1.parseScssVar)(ProgressBar_module_scss_1.default.themeVars),

package/dist/scripts/src/components/ProgressBar/ProgressBarNative.js

@@ -3,10 +3,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ProgressBar = void 0;
+exports.ProgressBar = exports.defaultProps = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const ProgressBar_module_scss_1 = __importDefault(require("./ProgressBar.module.scss"));
-exports.ProgressBar = (0, react_1.forwardRef)(function ProgressBar({ value = 0, style }, forwardedRef) {
+exports.defaultProps = {
+    value: 0,
+};
+exports.ProgressBar = (0, react_1.forwardRef)(function ProgressBar({ value = exports.defaultProps.value, style }, forwardedRef) {
     return ((0, jsx_runtime_1.jsx)("div", { className: ProgressBar_module_scss_1.default.wrapper, style: style, ref: forwardedRef, children: (0, jsx_runtime_1.jsx)("div", { style: { width: `${value * 100}%` }, className: ProgressBar_module_scss_1.default.bar }) }));
 });

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

@@ -11,12 +11,17 @@ exports.QueueMd = (0, ComponentDefs_1.createMetadata)({
     description: `The \`Queue\` component provides an API to enqueue elements and defines events to process ` +
         `queued elements in a FIFO order.`,
     props: {
-        progressFeedback: (0, ComponentDefs_1.d)(`This property defines the component template of the UI that displays ` +
-            `progress information whenever, the queue's \`progressReport\` function in invoked.`),
-        resultFeedback: (0, ComponentDefs_1.d)(`This property defines the component template of the UI that displays result ` +
-            `information when the queue becomes empty after processing all queued items.`),
-        clearAfterFinish: (0, ComponentDefs_1.d)(`This property indicates the completed items (successful or error) should ` +
-            `be removed from the queue after completion.`),
+        progressFeedback: (0, ComponentDefs_1.d)("This property defines the component template of the UI that displays " +
+            "progress information whenever, the queue's \`progressReport\` function " +
+            "in invoked. If not set, no progress feedback is displayed."),
+        resultFeedback: (0, ComponentDefs_1.d)("This property defines the component template of the UI that displays result " +
+            "information when the queue becomes empty after processing all queued items. If not set, " +
+            "no result feedback is displayed."),
+        clearAfterFinish: {
+            description: `This property indicates the completed items (successful or error) should ` +
+                `be removed from the queue after completion.`,
+            defaultValue: QueueNative_1.defaultProps.clearAfterFinish,
+        },
     },
     nonVisual: true,
     events: {

package/dist/scripts/src/components/Queue/QueueNative.js

@@ -12,6 +12,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultProps = void 0;
 exports.Queue = Queue;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
@@ -22,6 +23,11 @@ const hooks_1 = require("../../components-core/utils/hooks");
 const misc_1 = require("../../components-core/utils/misc");
 const AppContext_1 = require("../../components-core/AppContext");
 const queueActions_1 = require("../Queue/queueActions");
+// =====================================================================================================================
+// React Queue component implementation
+exports.defaultProps = {
+    clearAfterFinish: false,
+};
 const queueReducer = (0, immer_1.default)((state, action) => {
     switch (action.type) {
         case queueActions_1.QueueActionKind.ACTION_QUEUE_INITIALIZED: {
@@ -100,7 +106,7 @@ const INITIAL_STATE = {
 };
 function Queue({ registerComponentApi, willProcessItem, processItem, didProcessItem, processItemError, onComplete, 
 //progressFeedback,
-renderProgressFeedback, renderResultFeedback, clearAfterFinish = true, }) {
+renderProgressFeedback, renderResultFeedback, clearAfterFinish = exports.defaultProps.clearAfterFinish, }) {
     const runningActionItemRef = (0, react_1.useRef)(new Set());
     const [queueState, dispatch] = (0, react_1.useReducer)(queueReducer, INITIAL_STATE);
     let appContext = (0, AppContext_1.useAppContext)();

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

@@ -18,13 +18,13 @@ exports.RadioGroupMd = (0, ComponentDefs_1.createMetadata)({
         `([\`RadioGroupOption\`](./RadioGroupOption.mdx) components) that allow users to select ` +
         `only one option from the group at a time.`,
     props: {
-        initialValue: (0, metadata_helpers_1.dInitialValue)(),
+        initialValue: Object.assign(Object.assign({}, (0, metadata_helpers_1.dInitialValue)()), { defaultValue: RadioGroupNative_1.defaultProps.initialValue }),
         autoFocus: (0, metadata_helpers_1.dAutoFocus)(),
-        required: (0, metadata_helpers_1.dRequired)(),
+        required: Object.assign(Object.assign({}, (0, metadata_helpers_1.dRequired)()), { defaultValue: RadioGroupNative_1.defaultProps.required }),
         readOnly: (0, metadata_helpers_1.dReadonly)(),
-        enabled: (0, metadata_helpers_1.dEnabled)(),
-        validationStatus: (0, metadata_helpers_1.dValidationStatus)(),
-        orientation: (0, ComponentDefs_1.d)(`(*** NOT IMPLEMENTED YET ***) This property sets the orientation of the ` +
+        enabled: Object.assign(Object.assign({}, (0, metadata_helpers_1.dEnabled)()), { defaultValue: RadioGroupNative_1.defaultProps.enabled }),
+        validationStatus: Object.assign(Object.assign({}, (0, metadata_helpers_1.dValidationStatus)()), { defaultValue: RadioGroupNative_1.defaultProps.validationStatus }),
+        orientation: (0, metadata_helpers_1.dInternal)(`(*** NOT IMPLEMENTED YET ***) This property sets the orientation of the ` +
             `options within the radio group.`),
         label: (0, metadata_helpers_1.dLabel)(),
         labelPosition: (0, metadata_helpers_1.dLabelPosition)("top"),