xmlui 0.9.67 → 0.9.69

package/dist/scripts/package.json

@@ -1,6 +1,6 @@
 {
     "name": "xmlui",
-    "version": "0.9.67",
+    "version": "0.9.69",
     "sideEffects": false,
     "scripts": {
         "start-test-bed": "cd src/testing/infrastructure && xmlui start",
@@ -18,7 +18,7 @@
         "postpublish": "clean-package restore",
         "generate-docs-summaries": "node scripts/generate-docs/generate-summary-files.mjs",
         "generate-docs": "node scripts/generate-docs/get-docs.mjs",
-        "generate-all-docs": "npm run build:xmlui-metadata && npm run build:ext-meta && npm run generate-docs && npm run generate-docs-summaries",
+        "generate-all-docs": "npm run build:xmlui-metadata && npm run generate-docs && npm run generate-docs-summaries",
         "export-themes": "npm run build:xmlui-metadata && node scripts/generate-docs/create-theme-files.mjs",
         "generate-docs-with-refresh": "npm run build:xmlui-metadata && npm run generate-docs && npm run generate-docs-summaries",
         "gen:langserver-metadata": "node scripts/get-langserver-metadata.mjs > src/language-server/xmlui-metadata-generated.mjs"

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

@@ -94,7 +94,7 @@ exports.AppMd = (0, metadata_helpers_1.createMetadata)({
             "with one of the vertical layouts.",
     },
     defaultThemeVars: {
-        "maxWidth-Drawer": "20rem",
+        "maxWidth-Drawer": "100%",
         [`width-navPanel-${COMP}`]: "$space-64",
         [`backgroundColor-navPanel-${COMP}`]: "$backgroundColor",
         [`maxWidth-content-${COMP}`]: "$maxWidth-content",

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

@@ -5,7 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.checkboxComponentRenderer = exports.CheckboxMd = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const Toggle_module_scss_1 = __importDefault(require("../Toggle/Toggle.module.scss"));
+const Checkbox_module_scss_1 = __importDefault(require("./Checkbox.module.scss"));
 const renderers_1 = require("../../components-core/renderers");
 const themeVars_1 = require("../../components-core/theming/themeVars");
 const metadata_helpers_1 = require("../../components/metadata-helpers");
@@ -43,7 +43,7 @@ exports.CheckboxMd = (0, metadata_helpers_1.createMetadata)({
         value: (0, metadata_helpers_1.dValueApi)(),
         setValue: (0, metadata_helpers_1.dSetValueApi)(),
     },
-    themeVars: (0, themeVars_1.parseScssVar)(Toggle_module_scss_1.default.themeVars),
+    themeVars: (0, themeVars_1.parseScssVar)(Checkbox_module_scss_1.default.themeVars),
     limitThemeVarsToComponent: true,
     defaultThemeVars: {
         [`borderColor-checked-${COMP}-error`]: `$borderColor-${COMP}-error`,
@@ -60,7 +60,12 @@ exports.CheckboxMd = (0, metadata_helpers_1.createMetadata)({
 });
 exports.checkboxComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.CheckboxMd, ({ node, extractValue, layoutCss, updateState, lookupEventHandler, state, registerComponentApi, renderChild, layoutContext, }) => {
     const inputTemplate = node.props.inputTemplate;
+    const validationStatus = extractValue(node.props.validationStatus);
     return ((0, jsx_runtime_1.jsx)(Toggle_1.Toggle, { inputRenderer: inputTemplate
             ? (contextVars) => ((0, jsx_runtime_1.jsx)(container_helpers_1.MemoizedItem, { contextVars: contextVars, node: inputTemplate, renderChild: renderChild, layoutContext: layoutContext }))
-            : undefined, enabled: extractValue.asOptionalBoolean(node.props.enabled), style: layoutCss, initialValue: extractValue.asOptionalBoolean(node.props.initialValue, Toggle_1.defaultProps.initialValue), value: state === null || state === void 0 ? void 0 : state.value, readOnly: extractValue.asOptionalBoolean(node.props.readOnly), validationStatus: extractValue(node.props.validationStatus), updateState: updateState, onDidChange: lookupEventHandler("didChange"), onFocus: lookupEventHandler("gotFocus"), onBlur: lookupEventHandler("lostFocus"), 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), indeterminate: extractValue.asOptionalBoolean(node.props.indeterminate), registerComponentApi: registerComponentApi }));
+            : undefined, enabled: extractValue.asOptionalBoolean(node.props.enabled), autoFocus: extractValue.asOptionalBoolean(node.props.autoFocus), style: layoutCss, initialValue: extractValue.asOptionalBoolean(node.props.initialValue, Toggle_1.defaultProps.initialValue), variantClassName: Checkbox_module_scss_1.default.checkbox, statusClasses: {
+            [Checkbox_module_scss_1.default.error]: validationStatus === "error",
+            [Checkbox_module_scss_1.default.warning]: validationStatus === "warning",
+            [Checkbox_module_scss_1.default.valid]: validationStatus === "valid",
+        }, value: state === null || state === void 0 ? void 0 : state.value, readOnly: extractValue.asOptionalBoolean(node.props.readOnly), validationStatus: validationStatus, updateState: updateState, onDidChange: lookupEventHandler("didChange"), onFocus: lookupEventHandler("gotFocus"), onBlur: lookupEventHandler("lostFocus"), 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), indeterminate: extractValue.asOptionalBoolean(node.props.indeterminate), registerComponentApi: registerComponentApi }));
 });

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

@@ -26,7 +26,6 @@ exports.CodeBlockMd = (0, metadata_helpers_1.createMetadata)({
         "borderColor-CodeBlock-highlightString-emphasis": "$color-attention",
         "border-CodeBlock": "0.5px solid $borderColor",
         "borderRadius-CodeBlock": "$space-2",
-        "boxShadow-CodeBlock": "none",
         "height-CodeBlock": "fit-content",
         "paddingVertical-content-CodeBlock": "0",
         "paddingHorizontal-content-CodeBlock": "0",

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

@@ -42,9 +42,9 @@ exports.LinkMd = (0, metadata_helpers_1.createMetadata)({
     defaultThemeVars: {
         [`border-${COMP}`]: "0px solid $borderColor",
         [`textColor-${COMP}`]: "$color-primary-500",
-        [`textDecorationColor-${COMP}`]: "$color-primary-500",
+        [`textDecorationColor-${COMP}`]: `textDecorationColor-${COMP}`,
         [`textColor-${COMP}--hover`]: `$color-primary-400`,
-        [`textDecorationColor-${COMP}--hover`]: "$color-primary-400",
+        [`textDecorationColor-${COMP}--hover`]: `textColor-${COMP}--hover`,
         [`textColor-${COMP}--active`]: "$color-primary-400",
         [`textDecorationColor-${COMP}--active`]: "$color-primary-400",
         [`textColor-${COMP}--hover--active`]: `$textColor-${COMP}--active`,

package/dist/scripts/src/components/List/ListNative.js

@@ -392,7 +392,7 @@ exports.ListNative = (0, react_1.forwardRef)(function DynamicHeightList({ items
                                 const row = rows === null || rows === void 0 ? void 0 : rows[rowIndex];
                                 const key = row === null || row === void 0 ? void 0 : row[idKey];
                                 if (!row) {
-                                    return (0, jsx_runtime_1.jsx)("div", {}, rowIndex);
+                                    return null;
                                 }
                                 // --- End change
                                 switch (row._row_type) {

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

@@ -19,9 +19,13 @@ const NestedAppNative_1 = require("./NestedAppNative");
 const Markdown_1 = require("../Markdown/Markdown");
 const ButtonNative_1 = require("../Button/ButtonNative");
 const NestedApp_module_scss_1 = __importDefault(require("./NestedApp.module.scss"));
+const Tooltip_1 = require("./Tooltip");
+const rx_1 = require("react-icons/rx");
+const lia_1 = require("react-icons/lia");
 const utils_1 = require("./utils");
 const AppContext_1 = require("../../components-core/AppContext");
 const classnames_1 = __importDefault(require("classnames"));
+const logo_svg_react_1 = __importDefault(require("./logo.svg?react"));
 /**
  * A component that displays markdown content on the left and a NestedApp on the right
  */
@@ -58,11 +62,16 @@ function AppWithCodeViewNative({ markdown, splitView, withFrame = true, noHeader
             : `https://docs.xmlui.com/playground#${appQueryString}`, "_blank");
     }), [app, components, title, activeTheme, api, activeTone, useHashBasedRouting]);
     if (splitView) {
-        return ((0, jsx_runtime_1.jsxs)("div", { className: NestedApp_module_scss_1.default.nestedAppContainer, style: { height }, children: [(0, jsx_runtime_1.jsx)("div", { className: NestedApp_module_scss_1.default.header, children: (0, jsx_runtime_1.jsxs)("div", { className: NestedApp_module_scss_1.default.viewControls, children: [(0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { onClick: () => setShowCode(true), variant: showCode ? "solid" : "ghost", className: (0, classnames_1.default)(NestedApp_module_scss_1.default.splitViewButton), style: {
-                                    backgroundColor: !showCode ? "transparent" : "",
-                                }, children: "XML" }), (0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { onClick: () => setShowCode(false), variant: showCode ? "ghost" : "solid", className: (0, classnames_1.default)(NestedApp_module_scss_1.default.splitViewButton), style: {
-                                    backgroundColor: showCode ? "transparent" : "",
-                                }, children: "UI" })] }) }), (0, jsx_runtime_1.jsxs)("div", { className: NestedApp_module_scss_1.default.contentContainer, children: [showCode && (0, jsx_runtime_1.jsx)(Markdown_1.Markdown, { style: { height: "100%" }, children: markdown }), !showCode && ((0, jsx_runtime_1.jsx)(NestedAppNative_1.IndexAwareNestedApp, { height: "100%", refVersion: refreshVersion, app: app, api: api, components: components, config: config, activeTone: activeTone, activeTheme: activeTheme, title: title, allowPlaygroundPopup: allowPlaygroundPopup, withFrame: false, noHeader: false, popOutUrl: popOutUrl }))] })] }));
+        return ((0, jsx_runtime_1.jsxs)("div", { className: NestedApp_module_scss_1.default.nestedAppContainer, style: { height }, children: [(0, jsx_runtime_1.jsxs)("div", { className: NestedApp_module_scss_1.default.header, children: [(0, jsx_runtime_1.jsx)("div", { className: NestedApp_module_scss_1.default.wrapper, children: (0, jsx_runtime_1.jsx)(logo_svg_react_1.default, { className: NestedApp_module_scss_1.default.logo }) }), (0, jsx_runtime_1.jsxs)("div", { className: NestedApp_module_scss_1.default.viewControls, children: [(0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { onClick: () => setShowCode(true), variant: showCode ? "solid" : "ghost", className: (0, classnames_1.default)(NestedApp_module_scss_1.default.splitViewButton, {
+                                        [NestedApp_module_scss_1.default.active]: showCode,
+                                    }), children: "XML" }), (0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { onClick: () => setShowCode(false), variant: showCode ? "ghost" : "solid", className: (0, classnames_1.default)(NestedApp_module_scss_1.default.splitViewButton, {
+                                        [NestedApp_module_scss_1.default.active]: !showCode,
+                                    }), children: "UI" })] }), (0, jsx_runtime_1.jsxs)("div", { className: NestedApp_module_scss_1.default.wrapper, children: [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: "View and edit in new full-width window" })), (0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { trigger: (0, jsx_runtime_1.jsx)("button", { className: NestedApp_module_scss_1.default.headerButton, onClick: () => {
+                                            setShowCode(false);
+                                            setRefreshVersion(refreshVersion + 1);
+                                        }, children: (0, jsx_runtime_1.jsx)(lia_1.LiaUndoAltSolid, {}) }), label: "Reset the app" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: NestedApp_module_scss_1.default.contentContainer, children: [showCode && (0, jsx_runtime_1.jsx)(Markdown_1.Markdown, { style: { height: "100%" }, children: markdown }), !showCode && ((0, jsx_runtime_1.jsx)(NestedAppNative_1.IndexAwareNestedApp, { height: "100%", refVersion: refreshVersion, app: app, api: api, components: components, config: config, activeTone: activeTone, activeTheme: activeTheme, title: title, allowPlaygroundPopup: allowPlaygroundPopup, withFrame: false, noHeader: false, popOutUrl: popOutUrl }))] })] }));
     }
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(Markdown_1.Markdown, { children: markdown }) }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(NestedAppNative_1.IndexAwareNestedApp, { app: app, api: api, components: components, config: config, activeTone: activeTone, activeTheme: activeTheme, title: title, height: height, allowPlaygroundPopup: allowPlaygroundPopup, withFrame: withFrame, noHeader: noHeader, popOutUrl: popOutUrl }) })] }));
 }

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

@@ -66,7 +66,7 @@ exports.NestedAppMd = (0, metadata_helpers_1.createMetadata)({
         [`backgroundColor-frame-${COMP}`]: "$color-primary-50",
         [`gap-frame-${COMP}`]: "0",
         [`fontWeight-header-${COMP}`]: "$fontWeight-bold",
-        [`boxShadow-${COMP}`]: "$boxShadow-md",
+        [`boxShadow-${COMP}`]: "0px 0px 32px 0px rgba(0, 0, 0, 0.05)",
         [`backgroundColor-viewControls-${COMP}`]: "$color-primary-100",
         [`borderRadius-viewControls-${COMP}`]: "5px",
         [`padding-viewControls-${COMP}`]: "$space-0_5",
@@ -76,7 +76,7 @@ exports.NestedAppMd = (0, metadata_helpers_1.createMetadata)({
         [`width-button-splitView-${COMP}`]: "60px",
         [`width-logo-splitView-${COMP}`]: "2rem",
         [`height-logo-splitView-${COMP}`]: "2rem",
-        [`width-controls-${COMP}`]: "76px",
+        [`width-controls-${COMP}`]: "80px",
     },
 });
 exports.nestedAppComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.NestedAppMd, ({ node, extractValue, layoutCss }) => {

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

@@ -64,11 +64,11 @@ 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 { interceptorWorker } = (0, useApiInterceptorContext_1.useApiInterceptorContext)();
+    const { interceptorWorker, initialized, forceInitialize } = (0, useApiInterceptorContext_1.useApiInterceptorContext)();
     (0, react_1.useEffect)(() => {
         setRefreshVersion(refVersion);
     }, [refVersion]);
-    //TODO illesg: we should come up with something to make sure that nestedApps doesn't overwrite each other's mocked api endpoints
+    //TODO illesg: we should come up with something to make sure that nestedApps don'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(":", "")}` : '';
@@ -116,7 +116,7 @@ function NestedApp({ api, app, components = constants_1.EMPTY_ARRAY, config, act
         window.open(useHashBasedRouting
             ? `${popOutUrl !== null && popOutUrl !== void 0 ? popOutUrl : ""}/#/playground#${appQueryString}`
             : `${popOutUrl !== null && popOutUrl !== void 0 ? popOutUrl : ""}/playground#${appQueryString}`, "_blank");
-    }), [app, components, title, activeTheme, api, activeTone, useHashBasedRouting]);
+    }), [app, components, title, activeTheme, api, activeTone, useHashBasedRouting, popOutUrl]);
     (0, react_1.useEffect)(() => {
         var _a;
         if (!shadowRef.current && rootRef.current) {
@@ -154,7 +154,13 @@ function NestedApp({ api, app, components = constants_1.EMPTY_ARRAY, config, act
         Object.keys(theme.themeStyles).forEach((key) => {
             themeVarReset[key] = "initial";
         });
-        let nestedAppRoot = ((0, jsx_runtime_1.jsx)(ApiInterceptorProvider_1.ApiInterceptorProvider, { interceptor: mock, apiWorker: interceptorWorker, children: (0, jsx_runtime_1.jsx)("div", { style: Object.assign(Object.assign({ height }, style), themeVarReset), children: (0, jsx_runtime_1.jsx)(AppRoot_1.AppRoot, { isNested: true, 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: {
+        let shouldForceInit = mock && initialized && !interceptorWorker;
+        if (shouldForceInit) {
+            // in this case we need to force initialize the interceptor worker
+            // to make sure that the mock is applied (this could be the case when the 'root' app is not using any mocks)
+            forceInitialize();
+        }
+        let nestedAppRoot = mock && !interceptorWorker ? null : ((0, jsx_runtime_1.jsx)(ApiInterceptorProvider_1.ApiInterceptorProvider, { interceptor: mock, apiWorker: interceptorWorker, children: (0, jsx_runtime_1.jsx)("div", { style: Object.assign(Object.assign({ height }, style), themeVarReset), children: (0, jsx_runtime_1.jsx)(AppRoot_1.AppRoot, { isNested: true, 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}`) }) }));
@@ -186,6 +192,9 @@ function NestedApp({ api, app, components = constants_1.EMPTY_ARRAY, config, act
         withFrame,
         noHeader,
         apiUrl,
+        initialized,
+        style,
+        forceInitialize,
     ]);
     const mountedRef = (0, react_1.useRef)(false);
     (0, react_1.useEffect)(() => {

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

@@ -31,7 +31,12 @@ exports.OptionMd = (0, metadata_helpers_1.createMetadata)({
 });
 exports.optionComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.OptionMd, ({ node, extractValue, layoutCss, renderChild, layoutContext }) => {
     const optionTemplate = node.props.optionTemplate;
+    const label = extractValue.asOptionalString(node.props.label) || extractValue(node.props.value);
+    const value = extractValue.asOptionalString(node.props.value) || extractValue(node.props.label);
+    if (label === undefined) {
+        return null;
+    }
     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 }));
+            : undefined, label: label, value: value, enabled: extractValue.asOptionalBoolean(node.props.enabled), style: layoutCss }));
 });

package/dist/scripts/src/components/Select/HiddenOption.js

@@ -11,7 +11,7 @@ function HiddenOption(option) {
     const opt = (0, react_1.useMemo)(() => {
         var _a, _b;
         return Object.assign(Object.assign({}, option), { label: (_a = label !== null && label !== void 0 ? label : node === null || node === void 0 ? void 0 : node.textContent) !== null && _a !== void 0 ? _a : "", keywords: [(_b = label !== null && label !== void 0 ? label : node === null || node === void 0 ? void 0 : node.textContent) !== null && _b !== void 0 ? _b : ""] });
-    }, [option, node]);
+    }, [option, node, label]);
     (0, react_1.useEffect)(() => {
         onOptionAdd(opt);
         return () => onOptionRemove(opt);

package/dist/scripts/src/components/Select/SelectNative.js

@@ -83,7 +83,7 @@ const SimpleSelect = (0, react_1.forwardRef)(function SimpleSelect(props, forwar
         }
         const match = Array.from(options).find((o) => `${o.value}` === val);
         onValueChange((_a = match === null || match === void 0 ? void 0 : match.value) !== null && _a !== void 0 ? _a : val);
-    }, [onValueChange, options]);
+    }, [onValueChange, options, readOnly]);
     return ((0, jsx_runtime_1.jsxs)(react_select_1.Root, { value: stringValue, onValueChange: onValChange, children: [(0, jsx_runtime_1.jsxs)(react_select_1.Trigger, { id: id, "aria-haspopup": "listbox", style: style, onFocus: onFocus, onBlur: onBlur, disabled: !enabled, className: (0, classnames_1.default)(Select_module_scss_1.default.selectTrigger, {
                     [Select_module_scss_1.default.error]: validationStatus === "error",
                     [Select_module_scss_1.default.warning]: validationStatus === "warning",
@@ -204,16 +204,16 @@ exports.Select = (0, react_1.forwardRef)(function Select({ id, initialValue, val
                                                 }) }) })) : ((0, jsx_runtime_1.jsx)("span", { placeholder: placeholder, className: Select_module_scss_1.default.placeholder, children: placeholder }))) : value !== undefined && value !== null ? ((0, jsx_runtime_1.jsx)("div", { children: (_a = Array.from(options).find((o) => o.value === value)) === null || _a === void 0 ? void 0 : _a.label })) : ((0, jsx_runtime_1.jsx)("span", { "aria-placeholder": placeholder, className: Select_module_scss_1.default.placeholder, children: placeholder || "" })), (0, jsx_runtime_1.jsxs)("div", { className: Select_module_scss_1.default.actions, children: [multiSelect && Array.isArray(value) && value.length > 0 && ((0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "close", onClick: (event) => {
                                                         event.stopPropagation();
                                                         clearValue();
-                                                    } })), (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "chevrondown" })] })] }), open && ((0, jsx_runtime_1.jsx)(react_select_1.Portal, { container: root, children: (0, jsx_runtime_1.jsx)(react_focus_scope_1.FocusScope, { asChild: true, loop: true, trapped: true, children: (0, jsx_runtime_1.jsx)(react_popover_1.PopoverContent, { style: { width, height: dropdownHeight }, className: Select_module_scss_1.default.selectContent, children: (0, jsx_runtime_1.jsxs)(cmdk_1.Command, { className: Select_module_scss_1.default.command, shouldFilter: searchable, filter: (value, search, keywords) => {
-                                                    const extendedValue = value + " " + keywords.join(" ");
-                                                    if (extendedValue.toLowerCase().includes(search.toLowerCase()))
-                                                        return 1;
+                                                    } })), (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "chevrondown" })] })] }), open && ((0, jsx_runtime_1.jsx)(react_select_1.Portal, { container: root, children: (0, jsx_runtime_1.jsx)(react_focus_scope_1.FocusScope, { asChild: true, loop: true, trapped: true, children: (0, jsx_runtime_1.jsx)(react_popover_1.PopoverContent, { style: { width, height: dropdownHeight }, className: Select_module_scss_1.default.selectContent, children: (0, jsx_runtime_1.jsxs)(cmdk_1.Command, { className: Select_module_scss_1.default.command, shouldFilter: searchable, filter: (_, search, keywords) => {
+                                                    const lowSearch = search.toLowerCase();
+                                                    for (const kw of keywords) {
+                                                        if (kw.toLowerCase().includes(lowSearch))
+                                                            return 1;
+                                                    }
                                                     return 0;
                                                 }, children: [searchable ? ((0, jsx_runtime_1.jsxs)("div", { className: Select_module_scss_1.default.commandInputContainer, children: [(0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "search" }), (0, jsx_runtime_1.jsx)(cmdk_1.CommandInput, { className: (0, classnames_1.default)(Select_module_scss_1.default.commandInput), placeholder: "Search..." })] })) : (
                                                     // https://github.com/pacocoursey/cmdk/issues/322#issuecomment-2444703817
-                                                    (0, jsx_runtime_1.jsx)("button", { autoFocus: true, "aria-hidden": "true", className: Select_module_scss_1.default.srOnly })), (0, jsx_runtime_1.jsxs)(cmdk_1.CommandList, { className: Select_module_scss_1.default.commandList, children: [inProgress && ((0, jsx_runtime_1.jsx)("div", { className: Select_module_scss_1.default.loading, children: inProgressNotificationMessage })), Array.from(options).map(({ value, label, enabled, keywords }) => ((0, jsx_runtime_1.jsx)(exports.ComboboxOption, { readOnly: readOnly, value: value, label: label, enabled: enabled, keywords: keywords }, value))), !inProgress && (0, jsx_runtime_1.jsx)(cmdk_1.CommandEmpty, { children: emptyListNode })] })] }) }) }) }))] })) : ((0, jsx_runtime_1.jsx)(SimpleSelect, { readOnly: !!readOnly, ref: ref, value: value, options: options, onValueChange: toggleOption, id: inputId, style: style, onFocus: onFocus, onBlur: onBlur, enabled: enabled, validationStatus: validationStatus, triggerRef: setReferenceElement, autoFocus: autoFocus, placeholder: placeholder, height: dropdownHeight, children: options.size > 0
-                                ? Array.from(options).map((option, idx) => ((0, jsx_runtime_1.jsx)(SelectOption, { value: option.value, label: option.label, enabled: option.enabled }, `${option.value}-${idx}`)))
-                                : emptyListNode })) }), children] }) }) }));
+                                                    (0, jsx_runtime_1.jsx)("button", { autoFocus: true, "aria-hidden": "true", className: Select_module_scss_1.default.srOnly })), (0, jsx_runtime_1.jsxs)(cmdk_1.CommandList, { className: Select_module_scss_1.default.commandList, children: [inProgress && ((0, jsx_runtime_1.jsx)("div", { className: Select_module_scss_1.default.loading, children: inProgressNotificationMessage })), Array.from(options).map(({ value, label, enabled, keywords }) => ((0, jsx_runtime_1.jsx)(exports.ComboboxOption, { readOnly: readOnly, value: value, label: label, enabled: enabled, keywords: keywords }, value))), !inProgress && (0, jsx_runtime_1.jsx)(cmdk_1.CommandEmpty, { children: emptyListNode })] })] }) }) }) }))] })) : ((0, jsx_runtime_1.jsx)(SimpleSelect, { readOnly: !!readOnly, ref: ref, value: value, options: options, onValueChange: toggleOption, id: inputId, style: style, onFocus: onFocus, onBlur: onBlur, enabled: enabled, validationStatus: validationStatus, triggerRef: setReferenceElement, autoFocus: autoFocus, placeholder: placeholder, height: dropdownHeight, children: renderOptionsOrDefault(options, emptyListNode) })) }), children] }) }) }));
 });
 exports.ComboboxOption = (0, react_1.forwardRef)(function Combobox(option, forwardedRef) {
     const id = (0, react_1.useId)();
@@ -230,7 +230,7 @@ exports.ComboboxOption = (0, react_1.forwardRef)(function Combobox(option, forwa
                 return;
             }
             onChange(value);
-        }, "data-state": selected ? "checked" : undefined, keywords: keywords, children: (0, jsx_runtime_1.jsx)("div", { className: Select_module_scss_1.default.multiComboboxOptionContent, children: optionRenderer ? (optionRenderer({ label, value, enabled, keywords }, selectedValue, false)) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [optionLabelRenderer ? optionLabelRenderer({ label, value }) : label, selected && (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "checkmark" })] })) }) }, id));
+        }, "data-state": selected ? "checked" : undefined, keywords: [...keywords, label], children: (0, jsx_runtime_1.jsx)("div", { className: Select_module_scss_1.default.multiComboboxOptionContent, children: optionRenderer ? (optionRenderer({ label, value, enabled, keywords }, selectedValue, false)) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [optionLabelRenderer ? optionLabelRenderer({ label, value }) : label, selected && (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "checkmark" })] })) }) }, id));
 });
 const SelectOption = react_1.default.forwardRef((option, ref) => {
     const { value, label, enabled = true } = option;
@@ -242,3 +242,9 @@ const SelectOption = react_1.default.forwardRef((option, ref) => {
             }, selectedValue, false)) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(react_select_1.ItemText, { className: Select_module_scss_1.default.selectItemContent, children: optionLabelRenderer ? optionLabelRenderer({ value, label }) : label }), selectedValue === value && ((0, jsx_runtime_1.jsx)("span", { className: Select_module_scss_1.default.selectItemIndicator, children: (0, jsx_runtime_1.jsx)(react_select_1.ItemIndicator, { children: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "checkmark" }) }) }))] })) }) }));
 });
 SelectOption.displayName = "SelectOption";
+function renderOptionsOrDefault(options, default_) {
+    if (options.size === 0) {
+        return default_;
+    }
+    return Array.from(options).map((option) => ((0, jsx_runtime_1.jsx)(SelectOption, { value: option.value, label: option.label, enabled: option.enabled }, option.value)));
+}

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

@@ -5,7 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.switchComponentRenderer = exports.SwitchMd = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const Toggle_module_scss_1 = __importDefault(require("../Toggle/Toggle.module.scss"));
+const Switch_module_scss_1 = __importDefault(require("./Switch.module.scss"));
 const renderers_1 = require("../../components-core/renderers");
 const themeVars_1 = require("../../components-core/theming/themeVars");
 const metadata_helpers_1 = require("../metadata-helpers");
@@ -38,7 +38,7 @@ exports.SwitchMd = (0, metadata_helpers_1.createMetadata)({
         value: (0, metadata_helpers_1.dValueApi)(),
         setValue: (0, metadata_helpers_1.dSetValueApi)(),
     },
-    themeVars: (0, themeVars_1.parseScssVar)(Toggle_module_scss_1.default.themeVars),
+    themeVars: (0, themeVars_1.parseScssVar)(Switch_module_scss_1.default.themeVars),
     limitThemeVarsToComponent: true,
     defaultThemeVars: {
         [`borderColor-checked-${COMP}-error`]: `$borderColor-${COMP}-error`,

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

@@ -97,8 +97,8 @@ exports.TextMd = (0, metadata_helpers_1.createMetadata)({
         [`letterSpacing-${COMP}-caption`]: "0.05rem",
         [`fontSize-${COMP}-placeholder`]: "$fontSize-smaller",
         [`fontFamily-${COMP}-codefence`]: "$fontFamily-monospace",
-        [`paddingHorizontal-${COMP}-codefence`]: "$space-3",
-        [`paddingVertical-${COMP}-codefence`]: "$space-2",
+        [`paddingHorizontal-${COMP}-codefence`]: "$space-4",
+        [`paddingVertical-${COMP}-codefence`]: "$space-3",
         [`paddingVertical-${COMP}-paragraph`]: "$space-1",
         [`fontSize-${COMP}-subheading`]: "$fontSize-H6",
         [`fontWeight-${COMP}-subheading`]: "$fontWeight-bold",
@@ -111,6 +111,8 @@ exports.TextMd = (0, metadata_helpers_1.createMetadata)({
         [`fontWeight-${COMP}-tableheading`]: "$fontWeight-bold",
         [`marginTop-${COMP}-markdown`]: "$space-3",
         [`marginBottom-${COMP}-markdown`]: "$space-6",
+        [`fontSize-${COMP}-markdown`]: `fontSize-${COMP}`,
+        [`fontWeight-${COMP}-markdown`]: `fontWeight-${COMP}`,
         [`backgroundColor-${COMP}-code`]: "rgb(from $color-surface-100 r g b / 0.4)",
         [`borderColor-${COMP}-code`]: "$color-surface-100",
         [`backgroundColor-${COMP}-keyboard`]: "rgb(from $color-surface-100 r g b / 0.4)",

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

@@ -53,10 +53,18 @@ exports.defaultProps = {
     validationStatus: "none",
     indeterminate: false,
 };
-exports.Toggle = (0, react_3.forwardRef)(function Toggle({ id, initialValue = exports.defaultProps.initialValue, value = exports.defaultProps.value, enabled = exports.defaultProps.enabled, style, readOnly, validationStatus = exports.defaultProps.validationStatus, updateState = constants_1.noop, onDidChange = constants_1.noop, onFocus = constants_1.noop, onBlur = constants_1.noop, variant = "checkbox", indeterminate = exports.defaultProps.indeterminate, className, label, labelPosition = "end", labelWidth, labelBreak, required, registerComponentApi, inputRenderer, }, forwardedRef) {
+exports.Toggle = (0, react_3.forwardRef)(function Toggle({ id, initialValue = exports.defaultProps.initialValue, value = exports.defaultProps.value, enabled = exports.defaultProps.enabled, style, readOnly, validationStatus = exports.defaultProps.validationStatus, updateState = constants_1.noop, onDidChange = constants_1.noop, onFocus = constants_1.noop, onBlur = constants_1.noop, variant = "checkbox", indeterminate = exports.defaultProps.indeterminate, className, variantClassName, statusClasses = {}, label, labelPosition = "end", labelWidth, labelBreak, required, registerComponentApi, inputRenderer, autoFocus = false, }, forwardedRef) {
     const generatedId = (0, react_1.useId)();
     const inputId = id || generatedId;
     const innerRef = react_3.default.useRef(null);
+    (0, react_3.useEffect)(() => {
+        if (autoFocus) {
+            setTimeout(() => {
+                var _a;
+                (_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+            }, 0);
+        }
+    }, [autoFocus]);
     (0, react_3.useEffect)(() => {
         updateState({ value: initialValue }, { initial: true });
     }, [initialValue, updateState]);
@@ -98,13 +106,7 @@ exports.Toggle = (0, react_3.forwardRef)(function Toggle({ id, initialValue = ex
             setValue,
         });
     }, [focus, registerComponentApi, setValue]);
-    const input = (0, react_2.useMemo)(() => ((0, jsx_runtime_1.jsx)("input", { id: inputId, ref: innerRef, type: "checkbox", role: variant, checked: value, disabled: !enabled, required: required, readOnly: readOnly, "aria-readonly": readOnly, "aria-checked": value, onChange: onInputChange, onFocus: handleOnFocus, onBlur: handleOnBlur, className: (0, classnames_1.default)(Toggle_module_scss_1.default.resetAppearance, className, {
-            [Toggle_module_scss_1.default.checkbox]: variant === "checkbox",
-            [Toggle_module_scss_1.default.switch]: variant === "switch",
-            [Toggle_module_scss_1.default.error]: validationStatus === "error",
-            [Toggle_module_scss_1.default.warning]: validationStatus === "warning",
-            [Toggle_module_scss_1.default.valid]: validationStatus === "valid",
-        }) })), [
+    const input = (0, react_2.useMemo)(() => ((0, jsx_runtime_1.jsx)("input", { id: inputId, ref: innerRef, type: "checkbox", role: variant, checked: value, disabled: !enabled, required: required, readOnly: readOnly, "aria-readonly": readOnly, "aria-checked": indeterminate ? "mixed" : value, "aria-required": required, "aria-disabled": !enabled, onChange: onInputChange, onFocus: handleOnFocus, onBlur: handleOnBlur, className: (0, classnames_1.default)(Toggle_module_scss_1.default.resetAppearance, className, variantClassName, statusClasses) })), [
         inputId,
         className,
         enabled,
@@ -116,6 +118,7 @@ exports.Toggle = (0, react_3.forwardRef)(function Toggle({ id, initialValue = ex
         validationStatus,
         value,
         variant,
+        indeterminate,
     ]);
     return ((0, jsx_runtime_1.jsx)(ItemWithLabel_1.ItemWithLabel, { ref: forwardedRef, id: inputId, label: label, style: style, labelPosition: labelPosition, labelWidth: labelWidth, labelBreak: labelBreak, required: required, enabled: enabled, isInputTemplateUsed: !!inputRenderer, shrinkToLabel: true, labelStyle: { pointerEvents: readOnly ? "none" : undefined }, children: inputRenderer ? ((0, jsx_runtime_1.jsxs)("label", { className: Toggle_module_scss_1.default.label, children: [(0, jsx_runtime_1.jsx)("div", { className: Toggle_module_scss_1.default.inputContainer, children: input }), inputRenderer({
                     $checked: value,

package/dist/scripts/src/components-core/interception/ApiInterceptorProvider.js

@@ -48,12 +48,13 @@ const react_1 = require("react");
 const misc_1 = require("../utils/misc");
 const useApiInterceptorContext_1 = require("./useApiInterceptorContext");
 // This React component injects the API interceptor into the application's context
-function ApiInterceptorProvider({ interceptor, children, apiWorker, useHashBasedRouting, waitForApiInterceptor = false }) {
+function ApiInterceptorProvider({ interceptor, children, apiWorker, useHashBasedRouting, waitForApiInterceptor = false, }) {
+    const [forceInitialize, setForceInitialize] = (0, react_1.useState)(false);
     const [initialized, setInitialized] = (0, react_1.useState)(!interceptor);
     const [interceptorWorker, setInterceptorWorker] = (0, react_1.useState)(null);
     // --- Whenever the interceptor changes, update the provider accordingly
     (0, react_1.useEffect)(() => {
-        if (interceptor) {
+        if (interceptor || forceInitialize) {
             setInitialized(false);
             // --- We use "msw" to manage the API interception
             let interceptorWorker;
@@ -61,8 +62,8 @@ function ApiInterceptorProvider({ interceptor, children, apiWorker, useHashBased
                 // --- Create the worker on the fly
                 if (process.env.VITE_MOCK_ENABLED) {
                     const { createApiInterceptorWorker } = yield Promise.resolve().then(() => __importStar(require("./apiInterceptorWorker")));
-                    if (interceptor) {
-                        interceptorWorker = yield createApiInterceptorWorker(interceptor, apiWorker);
+                    if (interceptor || forceInitialize) {
+                        interceptorWorker = yield createApiInterceptorWorker(interceptor || {}, apiWorker);
                         setInterceptorWorker(interceptorWorker);
                         // if the apiWorker comes from the outside, we don't handle the lifecycle here
                         if (!apiWorker) {
@@ -86,13 +87,18 @@ function ApiInterceptorProvider({ interceptor, children, apiWorker, useHashBased
                 }
             };
         }
-    }, [apiWorker, interceptor, useHashBasedRouting]);
+    }, [apiWorker, forceInitialize, interceptor, useHashBasedRouting]);
+    const doForceInitialize = (0, react_1.useCallback)(() => {
+        setForceInitialize(true);
+    }, []);
+    const isMocked = (0, react_1.useCallback)((url) => interceptor !== undefined && !!process.env.VITE_MOCK_ENABLED, [interceptor]);
     const contextValue = (0, react_1.useMemo)(() => {
         return {
             interceptorWorker,
             initialized: initialized,
-            isMocked: (url) => interceptor !== undefined && !!process.env.VITE_MOCK_ENABLED,
+            forceInitialize: doForceInitialize,
+            isMocked: isMocked,
         };
-    }, [interceptorWorker, initialized, interceptor]);
+    }, [interceptorWorker, initialized, doForceInitialize, isMocked]);
     return ((0, jsx_runtime_1.jsx)(useApiInterceptorContext_1.ApiInterceptorContext.Provider, { value: contextValue, children: waitForApiInterceptor && !initialized ? null : children }));
 }

package/dist/scripts/src/components-core/rendering/AppContent.js

@@ -164,6 +164,15 @@ function AppContent({ rootContainer, routerBaseName, globalProps, standalone, tr
     const location = (0, react_2.useLocation)();
     const lastHash = (0, react_1.useRef)("");
     const [scrollForceRefresh, setScrollForceRefresh] = (0, react_1.useState)(0);
+    // useEffect(()=>{
+    //   if(isWindowFocused){
+    //     if ("serviceWorker" in navigator) {
+    //       // Manually Activate the MSW again
+    //       // console.log("REACTIVATE MSW");
+    //       navigator.serviceWorker.controller?.postMessage("MOCK_ACTIVATE");
+    //     }
+    //   }
+    // }, [isWindowFocused]);
     // --- Listen to location change using useEffect with location as dependency
     // https://jasonwatmore.com/react-router-v6-listen-to-location-route-change-without-history-listen
     // https://dev.to/mindactuate/scroll-to-anchor-element-with-react-router-v6-38op

package/dist/scripts/src/components-core/theming/themes/root.js

@@ -160,7 +160,7 @@ exports.RootThemeDefinition = {
         "fontSize-medium": "1.25rem",
         "fontSize-normal": "1rem",
         "fontSize-small": "0.875rem",
-        "fontSize-code": "0.75rem",
+        "fontSize-code": "0.85rem",
         "fontSize-smaller": "0.75rem",
         "fontSize-tiny": "0.625rem",
         // --- The default font size

package/dist/standalone/xmlui-standalone.es.d.ts

@@ -47,7 +47,7 @@ declare type ApiInterceptorDefinition = {
     auth?: AuthDefinition;
 };
 
-declare function ApiInterceptorProvider({ interceptor, children, apiWorker, useHashBasedRouting, waitForApiInterceptor }: {
+declare function ApiInterceptorProvider({ interceptor, children, apiWorker, useHashBasedRouting, waitForApiInterceptor, }: {
     interceptor?: ApiInterceptorDefinition;
     children: ReactNode;
     apiWorker?: SetupWorker;
@@ -739,6 +739,7 @@ declare type GlobalProps = Record<string, any>;
 declare interface IApiInterceptorContext {
     isMocked: (url: string) => boolean;
     initialized: boolean;
+    forceInitialize: () => void;
     interceptorWorker: SetupWorker | null;
 }