xmlui 0.8.6 → 0.9.1

package/dist/scripts/bin/build.js

@@ -111,11 +111,11 @@ const build = (_a) => __awaiter(void 0, [_a], void 0, function* ({ buildMode = "
         withHostingMetaFiles,
         withRelativeRoot,
     });
-    yield (0, vite_1.build)(Object.assign(Object.assign({}, (0, viteConfig_1.getViteConfig)({
+    yield (0, vite_1.build)(Object.assign(Object.assign({}, (yield (0, viteConfig_1.getViteConfig)({
         flatDist,
         withRelativeRoot,
         flatDistUiPrefix,
-    })), { define: {
+    }))), { define: {
             "process.env.VITE_BUILD_MODE": JSON.stringify(buildMode),
             "process.env.VITE_DEV_MODE": false,
             "process.env.VITE_MOCK_ENABLED": withMock,

package/dist/scripts/bin/start.js

@@ -33,17 +33,11 @@ const start = (_a) => __awaiter(void 0, [_a], void 0, function* ({ port, withMoc
         }
     }
     try {
-        const server = yield (0, vite_1.createServer)(Object.assign(Object.assign({}, (0, viteConfig_1.getViteConfig)({})), { server: {
+        let viteConfig = yield (0, viteConfig_1.getViteConfig)({});
+        const server = yield (0, vite_1.createServer)(Object.assign(Object.assign({}, viteConfig), { server: {
                 port,
                 proxy: proxyDef,
-            }, define: {
-                "process.env.VITE_BUILD_MODE": JSON.stringify("ALL"),
-                "process.env.VITE_DEV_MODE": true,
-                "process.env.VITE_STANDALONE": process.env.VITE_STANDALONE,
-                "process.env.VITE_MOCK_ENABLED": withMock,
-                "process.env.VITE_INCLUDE_ALL_COMPONENTS": JSON.stringify("true"),
-                "process.env.VITE_USER_COMPONENTS_Inspect": JSON.stringify("true"),
-            } }));
+            }, define: Object.assign(Object.assign({}, viteConfig.define), { "process.env.VITE_BUILD_MODE": JSON.stringify("ALL"), "process.env.VITE_DEV_MODE": true, "process.env.VITE_STANDALONE": process.env.VITE_STANDALONE, "process.env.VITE_MOCK_ENABLED": withMock, "process.env.VITE_INCLUDE_ALL_COMPONENTS": JSON.stringify("true"), "process.env.VITE_USER_COMPONENTS_Inspect": JSON.stringify("true") }) }));
         // server.
         if (!server.httpServer) {
             throw new Error("HTTP server not available");

package/dist/scripts/bin/vite-xmlui-plugin.js

@@ -44,7 +44,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = viteXmluiPlugin;
 const pluginutils_1 = require("@rollup/pluginutils");
-const code_behind_collect_1 = require("../src/parsers/scripting/code-behind-collect");
+const code_behind_collect_1 = require("../src/parsers/scripting-exp/code-behind-collect");
 const fileExtensions_1 = require("../src/parsers/xmlui-parser/fileExtensions");
 const Parser_1 = require("../src/parsers/scripting/Parser");
 const fs = __importStar(require("fs"));
@@ -109,7 +109,7 @@ function viteXmluiPlugin(pluginOptions = {}) {
                     const moduleName = hasXmluiScriptExtension
                         ? id.substring(0, id.length - (fileExtensions_1.codeBehindFileExtension.length + 1))
                         : id.substring(0, id.length - (fileExtensions_1.moduleFileExtension.length + 1));
-                    const codeBehind = (0, code_behind_collect_1.collectCodeBehindFromSource)(moduleNameResolver(moduleName), code, moduleResolver, moduleNameResolver);
+                    const codeBehind = (0, code_behind_collect_1.collectCodeBehindFromSource)(moduleNameResolver(moduleName), code);
                     (0, code_behind_collect_1.removeCodeBehindTokensFromTree)(codeBehind);
                     // TODO: Add error handling.
                     // Check, if codeBehind.moduleErrors is not empty (Record<string, ModuleErrors[]>); each module

package/dist/scripts/bin/viteConfig.js

@@ -32,6 +32,15 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -43,72 +52,89 @@ const vite_plugin_svgr_1 = __importDefault(require("vite-plugin-svgr"));
 const vite_plugin_yaml_1 = __importDefault(require("@modyfi/vite-plugin-yaml"));
 const vite_xmlui_plugin_1 = __importDefault(require("./vite-xmlui-plugin"));
 const path = __importStar(require("path"));
-function getViteConfig({ flatDist = false, withRelativeRoot = false, flatDistUiPrefix = "", } = {}) {
-    return (0, vite_1.defineConfig)({
-        plugins: [(0, plugin_react_1.default)(), (0, vite_plugin_svgr_1.default)(), (0, vite_plugin_yaml_1.default)(), (0, vite_xmlui_plugin_1.default)({})],
-        base: withRelativeRoot ? "" : undefined,
-        // experimental: {
-        //   renderBuiltUrl: (filename, {type, hostType, hostId}) =>{
-        //     if (type === 'asset') {
-        //       // return { runtime: `window.__toCdnUrl(${JSON.stringify(filename)})` }
-        //       return 'https://static.themohoz.com/xmlui/v0.31/' + filename
-        //     } else {
-        //       return { relative: true }
-        //     }
-        //   }
-        // },
-        build: {
-            rollupOptions: {
-                input: path.resolve(process.cwd(), "index.html"),
-                output: {
-                    assetFileNames: (assetInfo) => {
-                        var _a;
-                        const extType = (_a = assetInfo.name) === null || _a === void 0 ? void 0 : _a.split(".").pop();
-                        if (/png|jpe?g|svg|gif|tiff|bmp|ico/i.test(extType)) {
-                            return flatDist
-                                ? `${flatDistUiPrefix}internal_img_[name].[hash][extname]`
-                                : `internal/img/[name].[hash][extname]`;
-                        }
-                        if (assetInfo.name === "index.css") {
+function getViteConfig() {
+    return __awaiter(this, arguments, void 0, function* ({ flatDist = false, withRelativeRoot = false, flatDistUiPrefix = "", } = {}) {
+        var _a;
+        //TODO finish this (merge smart)
+        let overrides = {};
+        try {
+            const configOverrides = yield Promise.resolve(`${process.cwd() + `/vite.config-overrides`}`).then(s => __importStar(require(s)));
+            overrides = configOverrides.default || {};
+        }
+        catch (e) { }
+        return (0, vite_1.defineConfig)({
+            plugins: [(0, plugin_react_1.default)(), (0, vite_plugin_svgr_1.default)(), (0, vite_plugin_yaml_1.default)(), (0, vite_xmlui_plugin_1.default)({}), ...(overrides.plugins || [])],
+            base: withRelativeRoot ? "" : undefined,
+            // experimental: {
+            //   renderBuiltUrl: (filename, {type, hostType, hostId}) =>{
+            //     if (type === 'asset') {
+            //       // return { runtime: `window.__toCdnUrl(${JSON.stringify(filename)})` }
+            //       return 'https://static.themohoz.com/xmlui/v0.31/' + filename
+            //     } else {
+            //       return { relative: true }
+            //     }
+            //   }
+            // },
+            define: overrides.define,
+            resolve: {
+                alias: (_a = overrides.resolve) === null || _a === void 0 ? void 0 : _a.alias,
+            },
+            css: overrides.css,
+            build: {
+                rollupOptions: {
+                    input: path.resolve(process.cwd(), "index.html"),
+                    output: {
+                        assetFileNames: (assetInfo) => {
+                            var _a;
+                            const extType = (_a = assetInfo.name) === null || _a === void 0 ? void 0 : _a.split(".").pop();
+                            if (/png|jpe?g|svg|gif|tiff|bmp|ico/i.test(extType)) {
+                                return flatDist
+                                    ? `${flatDistUiPrefix}internal_img_[name].[hash][extname]`
+                                    : `internal/img/[name].[hash][extname]`;
+                            }
+                            if (assetInfo.name === "index.css") {
+                                return flatDist
+                                    ? `${flatDistUiPrefix}internal_[name].[hash][extname]`
+                                    : `internal/[name].[hash][extname]`;
+                            }
                             return flatDist
-                                ? `${flatDistUiPrefix}internal_[name].[hash][extname]`
-                                : `internal/[name].[hash][extname]`;
-                        }
-                        return flatDist
-                            ? `${flatDistUiPrefix}internal_chunks_[name].[hash][extname]`
-                            : `internal/chunks/[name].[hash][extname]`;
+                                ? `${flatDistUiPrefix}internal_chunks_[name].[hash][extname]`
+                                : `internal/chunks/[name].[hash][extname]`;
+                        },
+                        chunkFileNames: flatDist
+                            ? `${flatDistUiPrefix}internal_chunks_[name].[hash].js`
+                            : "internal/chunks/[name].[hash].js",
+                        entryFileNames: flatDist
+                            ? `${flatDistUiPrefix}internal_[name].[hash].js`
+                            : "internal/[name].[hash].js",
                     },
-                    chunkFileNames: flatDist
-                        ? `${flatDistUiPrefix}internal_chunks_[name].[hash].js`
-                        : "internal/chunks/[name].[hash].js",
-                    entryFileNames: flatDist ? `${flatDistUiPrefix}internal_[name].[hash].js` : "internal/[name].[hash].js",
+                    // treeshake: {
+                    //   preset: "recommended",
+                    //   moduleSideEffects: (id: string, external: boolean)=>{
+                    //     if(id.includes(path.resolve(process.cwd(), 'index.html'))){   //otherwise tree shaking doesn't work
+                    //       return true;
+                    //     }
+                    //     if(id.includes(path.resolve(process.cwd(), "src", 'main.tsx'))){   //otherwise tree shaking doesn't work
+                    //       return true;
+                    //     }
+                    //     return false;
+                    //   }
+                    // }
+                    //   assetFileNames: (assetInfo) => {
+                    //     let extType = assetInfo.name?.split(".").pop();
+                    //     if (/png|jpe?g|svg|gif|tiff|bmp|ico/i.test(extType!)) {
+                    //       return `img/[name][extname]`;
+                    //     }
+                    //     if (assetInfo.name === "index.css") {
+                    //       return `[name][extname]`;
+                    //     }
+                    //     return `chunks/[name][extname]`;
+                    //   },
+                    //   chunkFileNames: "chunks/[name].js",
+                    //   entryFileNames: "[name].js",
+                    // },
                 },
-                // treeshake: {
-                //   preset: "recommended",
-                //   moduleSideEffects: (id: string, external: boolean)=>{
-                //     if(id.includes(path.resolve(process.cwd(), 'index.html'))){   //otherwise tree shaking doesn't work
-                //       return true;
-                //     }
-                //     if(id.includes(path.resolve(process.cwd(), "src", 'main.tsx'))){   //otherwise tree shaking doesn't work
-                //       return true;
-                //     }
-                //     return false;
-                //   }
-                // }
-                //   assetFileNames: (assetInfo) => {
-                //     let extType = assetInfo.name?.split(".").pop();
-                //     if (/png|jpe?g|svg|gif|tiff|bmp|ico/i.test(extType!)) {
-                //       return `img/[name][extname]`;
-                //     }
-                //     if (assetInfo.name === "index.css") {
-                //       return `[name][extname]`;
-                //     }
-                //     return `chunks/[name][extname]`;
-                //   },
-                //   chunkFileNames: "chunks/[name].js",
-                //   entryFileNames: "[name].js",
-                // },
             },
-        },
+        });
     });
 }

package/dist/scripts/src/abstractions/scripting/ScriptingSourceTreeExp.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.T_SWITCH_CASE = exports.T_OBJECT_DESTRUCTURE = exports.T_ARRAY_DESTRUCTURE = exports.T_DESTRUCTURE = exports.T_VAR_DECLARATION = exports.T_REACTIVE_VAR_DECLARATION = exports.T_POSTFIX_OP_EXPRESSION = exports.T_PREFIX_OP_EXPRESSION = exports.T_ARROW_EXPRESSION = exports.T_NO_ARG_EXPRESSION = exports.T_ASSIGNMENT_EXPRESSION = exports.T_SPREAD_EXPRESSION = exports.T_OBJECT_LITERAL = exports.T_ARRAY_LITERAL = exports.T_LITERAL = exports.T_TEMPLATE_LITERAL_EXPRESSION = exports.T_IDENTIFIER = exports.T_CALCULATED_MEMBER_ACCESS_EXPRESSION = exports.T_MEMBER_ACCESS_EXPRESSION = exports.T_FUNCTION_INVOCATION_EXPRESSION = exports.T_CONDITIONAL_EXPRESSION = exports.T_SEQUENCE_EXPRESSION = exports.T_BINARY_EXPRESSION = exports.T_UNARY_EXPRESSION = exports.T_IMPORT_DECLARATION = exports.T_FUNCTION_DECLARATION = exports.T_SWITCH_STATEMENT = exports.T_TRY_STATEMENT = exports.T_THROW_STATEMENT = exports.T_FOR_OF_STATEMENT = exports.T_FOR_IN_STATEMENT = exports.T_FOR_STATEMENT = exports.T_DO_WHILE_STATEMENT = exports.T_WHILE_STATEMENT = exports.T_CONTINUE_STATEMENT = exports.T_BREAK_STATEMENT = exports.T_RETURN_STATEMENT = exports.T_IF_STATEMENT = exports.T_VAR_STATEMENT = exports.T_CONST_STATEMENT = exports.T_LET_STATEMENT = exports.T_ARROW_EXPRESSION_STATEMENT = exports.T_EXPRESSION_STATEMENT = exports.T_EMPTY_STATEMENT = exports.T_BLOCK_STATEMENT = void 0;
+exports.T_SWITCH_CASE = exports.T_OBJECT_DESTRUCTURE = exports.T_ARRAY_DESTRUCTURE = exports.T_DESTRUCTURE = exports.T_VAR_DECLARATION = exports.T_REACTIVE_VAR_DECLARATION = exports.T_POSTFIX_OP_EXPRESSION = exports.T_PREFIX_OP_EXPRESSION = exports.T_ARROW_EXPRESSION = exports.T_NO_ARG_EXPRESSION = exports.T_ASSIGNMENT_EXPRESSION = exports.T_SPREAD_EXPRESSION = exports.T_OBJECT_LITERAL = exports.T_ARRAY_LITERAL = exports.T_LITERAL = exports.T_TEMPLATE_LITERAL_EXPRESSION = exports.T_IDENTIFIER = exports.T_CALCULATED_MEMBER_ACCESS_EXPRESSION = exports.T_MEMBER_ACCESS_EXPRESSION = exports.T_FUNCTION_INVOCATION_EXPRESSION = exports.T_CONDITIONAL_EXPRESSION = exports.T_SEQUENCE_EXPRESSION = exports.T_BINARY_EXPRESSION = exports.T_UNARY_EXPRESSION = exports.T_FUNCTION_DECLARATION = exports.T_SWITCH_STATEMENT = exports.T_TRY_STATEMENT = exports.T_THROW_STATEMENT = exports.T_FOR_OF_STATEMENT = exports.T_FOR_IN_STATEMENT = exports.T_FOR_STATEMENT = exports.T_DO_WHILE_STATEMENT = exports.T_WHILE_STATEMENT = exports.T_CONTINUE_STATEMENT = exports.T_BREAK_STATEMENT = exports.T_RETURN_STATEMENT = exports.T_IF_STATEMENT = exports.T_VAR_STATEMENT = exports.T_CONST_STATEMENT = exports.T_LET_STATEMENT = exports.T_ARROW_EXPRESSION_STATEMENT = exports.T_EXPRESSION_STATEMENT = exports.T_EMPTY_STATEMENT = exports.T_BLOCK_STATEMENT = void 0;
 // --- Statement node type values
 exports.T_BLOCK_STATEMENT = 1;
 exports.T_EMPTY_STATEMENT = 2;
@@ -22,7 +22,6 @@ exports.T_THROW_STATEMENT = 17;
 exports.T_TRY_STATEMENT = 18;
 exports.T_SWITCH_STATEMENT = 19;
 exports.T_FUNCTION_DECLARATION = 20;
-exports.T_IMPORT_DECLARATION = 21;
 // --- Expression node type values
 exports.T_UNARY_EXPRESSION = 100;
 exports.T_BINARY_EXPRESSION = 101;

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

@@ -70,22 +70,12 @@ exports.AccordionMd = (0, ComponentDefs_1.createMetadata)({
         [`border-${COMP}`]: "0px solid $borderColor",
         [`width-icon-${COMP}`]: "",
         [`height-icon-${COMP}`]: "",
-        light: {
-            [`backgroundColor-header-${COMP}`]: "$color-primary-500",
-            [`backgroundColor-header-${COMP}-hover`]: "$color-primary-400",
-            [`color-header-${COMP}`]: "$color-surface-50",
-            [`color-content-${COMP}`]: "$textColor-primary",
-            [`backgroundColor-content-${COMP}`]: "transparent",
-            [`color-icon-${COMP}`]: "$color-surface-50",
-        },
-        dark: {
-            [`backgroundColor-header-${COMP}`]: "$color-primary-500",
-            [`backgroundColor-header-${COMP}-hover`]: "$color-primary-600",
-            [`color-header-${COMP}`]: "$color-surface-50",
-            [`color-content-${COMP}`]: "$textColor-primary",
-            [`backgroundColor-content-${COMP}`]: "transparent",
-            [`color-icon-${COMP}`]: "$color-surface-50",
-        },
+        [`backgroundColor-header-${COMP}`]: "$color-primary-500",
+        [`backgroundColor-header-${COMP}-hover`]: "$color-primary-400",
+        [`color-header-${COMP}`]: "$color-surface-50",
+        [`color-content-${COMP}`]: "$textColor-primary",
+        [`backgroundColor-content-${COMP}`]: "transparent",
+        [`color-icon-${COMP}`]: "$color-surface-50",
     },
 });
 exports.accordionComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.AccordionMd, ({ node, renderChild, extractValue, lookupEventHandler, registerComponentApi, layoutCss }) => {

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

@@ -113,6 +113,10 @@ function App({ children, style, layout, loggedInUser, scrollWholePage, noScrollb
             behavior: "instant", // Optional if you want to skip the scrolling animation
         });
     }, [location.pathname]);
+    const [subNavPanelSlot, setSubNavPanelSlot] = (0, react_1.useState)(null);
+    const registerSubNavPanelSlot = (0, react_1.useCallback)((element) => {
+        setSubNavPanelSlot(element);
+    }, []);
     const layoutContextValue = (0, react_1.useMemo)(() => {
         return {
             hasRegisteredNavPanel,
@@ -132,6 +136,8 @@ function App({ children, style, layout, loggedInUser, scrollWholePage, noScrollb
             toggleDrawer,
             navPanelDef,
             logoContentDef,
+            registerSubNavPanelSlot,
+            subNavPanelSlot,
         };
     }, [
         hasRegisteredNavPanel,
@@ -145,6 +151,8 @@ function App({ children, style, layout, loggedInUser, scrollWholePage, noScrollb
         toggleDrawer,
         navPanelDef,
         logoContentDef,
+        registerSubNavPanelSlot,
+        subNavPanelSlot,
     ]);
     (0, react_1.useEffect)(() => {
         if (navPanelVisible) {

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

@@ -39,11 +39,7 @@ exports.AppHeaderMd = (0, ComponentDefs_1.createMetadata)({
             "`padding` variants, such as `paddingLeft-logo-AppHeader` and others).",
         [`width‑logo‑${COMP}`]: "Sets the width of the displayed logo",
     },
-    defaultThemeVars: Object.assign(Object.assign(Object.assign({ [`height-${COMP}`]: "$space-14", [`maxWidth-content-${COMP}`]: "$maxWidth-content-App", [`borderBottom-${COMP}`]: "1px solid $borderColor" }, (0, base_utils_1.paddingSubject)(`logo-${COMP}`, { horizontal: "$space-0", vertical: "$space-4" })), (0, base_utils_1.paddingSubject)(COMP, { horizontal: "$space-4", vertical: "$space-0" })), { [`borderRadius-${COMP}`]: "0px", light: {
-            [`backgroundColor-${COMP}`]: "white",
-        }, dark: {
-            [`backgroundColor-${COMP}`]: "$color-surface-900",
-        } }),
+    defaultThemeVars: Object.assign(Object.assign(Object.assign({ [`height-${COMP}`]: "$space-14", [`maxWidth-content-${COMP}`]: "$maxWidth-content-App", [`borderBottom-${COMP}`]: "1px solid $borderColor" }, (0, base_utils_1.paddingSubject)(`logo-${COMP}`, { horizontal: "$space-0", vertical: "$space-4" })), (0, base_utils_1.paddingSubject)(COMP, { horizontal: "$space-4", vertical: "$space-0" })), { [`borderRadius-${COMP}`]: "0px", [`backgroundColor-${COMP}`]: "$color-surface-raised" }),
 });
 exports.appHeaderComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.AppHeaderMd, ({ node, renderChild, layoutCss, layoutContext, extractValue }) => {
     var _a, _b;

package/dist/scripts/src/components/AppHeader/AppHeaderNative.js

@@ -7,6 +7,7 @@ exports.AppHeader = void 0;
 exports.useLogoUrl = useLogoUrl;
 exports.AppContextAwareAppHeader = AppContextAwareAppHeader;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const classnames_1 = __importDefault(require("classnames"));
 const AppHeader_module_scss_1 = __importDefault(require("./AppHeader.module.scss"));
 const ThemeContext_1 = require("../../components-core/theming/ThemeContext");
@@ -17,6 +18,7 @@ const LogoNative_1 = require("../../components/Logo/LogoNative");
 const AppLayoutContext_1 = require("../../components/App/AppLayoutContext");
 const ButtonNative_1 = require("../../components/Button/ButtonNative");
 const NavLinkNative_1 = require("../../components/NavLink/NavLinkNative");
+const hooks_1 = require("../../components-core/utils/hooks");
 function tryLoadImage(url, onLoaded, onError) {
     const img = new Image();
     img.src = url;
@@ -38,21 +40,25 @@ function useLogoUrl() {
     const toneLogoUrl = (0, ThemeContext_1.useResourceUrl)(`resource:logo-${activeThemeTone}`) || logoUrlByTone[activeThemeTone];
     return toneLogoUrl || baseLogoUrl;
 }
-const AppHeader = ({ children, profileMenu, style = constants_1.EMPTY_OBJECT, logoContent, className, canRestrictContentWidth, navPanelVisible = true, toggleDrawer, showLogo, hasRegisteredNavPanel, title, titleContent, }) => {
+const AppHeader = ({ children, profileMenu, style = constants_1.EMPTY_OBJECT, logoContent, className, canRestrictContentWidth, navPanelVisible = true, toggleDrawer, showLogo, hasRegisteredNavPanel, title, titleContent, registerSubNavPanelSlot, }) => {
     const { mediaSize } = (0, AppContext_1.useAppContext)();
     const logoUrl = useLogoUrl();
+    const subNavPanelSlot = (0, react_1.useRef)(null);
     const safeLogoTitle = mediaSize.sizeIndex < 2 ? null : !titleContent && title ? ((0, jsx_runtime_1.jsx)(NavLinkNative_1.NavLink, { to: "/", displayActive: false, style: { paddingLeft: 0 }, children: title })) : (titleContent);
+    (0, hooks_1.useIsomorphicLayoutEffect)(() => {
+        registerSubNavPanelSlot === null || registerSubNavPanelSlot === void 0 ? void 0 : registerSubNavPanelSlot(subNavPanelSlot.current);
+    }, []);
     return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(AppHeader_module_scss_1.default.header, className), style: style, children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(AppHeader_module_scss_1.default.headerInner, {
                 [AppHeader_module_scss_1.default.full]: !canRestrictContentWidth,
             }), children: [!navPanelVisible && hasRegisteredNavPanel && ((0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { onClick: toggleDrawer, icon: (0, jsx_runtime_1.jsx)(IconNative_1.Icon, { name: "hamburger" }), variant: "ghost", style: { color: "inherit", flexShrink: 0 } })), (0, jsx_runtime_1.jsx)("div", { className: AppHeader_module_scss_1.default.logoAndTitle, children: (showLogo || !navPanelVisible) &&
-                        (logoContent ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: AppHeader_module_scss_1.default.customLogoContainer, children: logoContent }), safeLogoTitle] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!!logoUrl && ((0, jsx_runtime_1.jsx)("div", { className: AppHeader_module_scss_1.default.logoContainer, children: (0, jsx_runtime_1.jsx)(NavLinkNative_1.NavLink, { to: "/", displayActive: false, style: { padding: 0, height: "100%" }, children: (0, jsx_runtime_1.jsx)(LogoNative_1.Logo, {}) }) })), safeLogoTitle] }))) }), (0, jsx_runtime_1.jsx)("div", { className: AppHeader_module_scss_1.default.childrenWrapper, children: children }), profileMenu && (0, jsx_runtime_1.jsx)("div", { className: AppHeader_module_scss_1.default.rightItems, children: profileMenu })] }) }));
+                        (logoContent ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: AppHeader_module_scss_1.default.customLogoContainer, children: logoContent }), safeLogoTitle] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!!logoUrl && ((0, jsx_runtime_1.jsx)("div", { className: AppHeader_module_scss_1.default.logoContainer, children: (0, jsx_runtime_1.jsx)(NavLinkNative_1.NavLink, { to: "/", displayActive: false, style: { padding: 0, height: "100%" }, children: (0, jsx_runtime_1.jsx)(LogoNative_1.Logo, {}) }) })), safeLogoTitle] }))) }), (0, jsx_runtime_1.jsx)("div", { ref: subNavPanelSlot, className: AppHeader_module_scss_1.default.subNavPanelSlot }), (0, jsx_runtime_1.jsx)("div", { className: AppHeader_module_scss_1.default.childrenWrapper, children: children }), profileMenu && (0, jsx_runtime_1.jsx)("div", { className: AppHeader_module_scss_1.default.rightItems, children: profileMenu })] }) }));
 };
 exports.AppHeader = AppHeader;
 function AppContextAwareAppHeader({ children, logoContent, profileMenu, style, className, title, titleContent, showLogo = true, renderChild, }) {
     const appLayoutContext = (0, AppLayoutContext_1.useAppLayoutContext)();
-    const { navPanelVisible, toggleDrawer, layout, hasRegisteredNavPanel, navPanelDef, logoContentDef, } = appLayoutContext || {};
+    const { navPanelVisible, toggleDrawer, layout, hasRegisteredNavPanel, navPanelDef, logoContentDef, registerSubNavPanelSlot, } = appLayoutContext || {};
     // console.log("APP LAYOUT CONTEXT", appLayoutContext);
     const displayLogo = layout !== "vertical" && layout !== "vertical-sticky" && showLogo;
     const canRestrictContentWidth = layout !== "vertical-full-header";
-    return ((0, jsx_runtime_1.jsxs)(exports.AppHeader, { hasRegisteredNavPanel: hasRegisteredNavPanel, navPanelVisible: navPanelVisible, toggleDrawer: toggleDrawer, canRestrictContentWidth: canRestrictContentWidth, showLogo: displayLogo, logoContent: logoContent || renderChild(logoContentDef), profileMenu: profileMenu, style: style, className: className, title: title, titleContent: titleContent, children: [(layout === null || layout === void 0 ? void 0 : layout.startsWith("condensed")) && navPanelVisible && ((0, jsx_runtime_1.jsx)("div", { style: { minWidth: 0 }, children: renderChild(navPanelDef) })), children] }));
+    return ((0, jsx_runtime_1.jsxs)(exports.AppHeader, { hasRegisteredNavPanel: hasRegisteredNavPanel, navPanelVisible: navPanelVisible, toggleDrawer: toggleDrawer, canRestrictContentWidth: canRestrictContentWidth, showLogo: displayLogo, logoContent: logoContent || renderChild(logoContentDef), profileMenu: profileMenu, style: style, className: className, title: title, titleContent: titleContent, registerSubNavPanelSlot: registerSubNavPanelSlot, children: [(layout === null || layout === void 0 ? void 0 : layout.startsWith("condensed")) && navPanelVisible && ((0, jsx_runtime_1.jsx)("div", { style: { minWidth: 0 }, children: renderChild(navPanelDef) })), children] }));
 }

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

@@ -9,9 +9,9 @@ const AutoComplete_module_scss_1 = __importDefault(require("../../components/Aut
 const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
 const renderers_1 = require("../../components-core/renderers");
 const themeVars_1 = require("../../components-core/theming/themeVars");
-const container_helpers_1 = require("../../components/container-helpers");
-const metadata_helpers_1 = require("../../components/metadata-helpers");
-const AutoCompleteNative_1 = require("../../components/AutoComplete/AutoCompleteNative");
+const container_helpers_1 = require("../container-helpers");
+const metadata_helpers_1 = require("../metadata-helpers");
+const AutoCompleteNative_1 = require("./AutoCompleteNative");
 const COMP = "AutoComplete";
 exports.AutoCompleteMd = (0, ComponentDefs_1.createMetadata)({
     description: "This component is a dropdown with a list of options. According to the " +
@@ -53,26 +53,20 @@ exports.AutoCompleteMd = (0, ComponentDefs_1.createMetadata)({
         [`backgroundColor-menu-${COMP}`]: "$backgroundColor-primary",
         [`boxShadow-menu-${COMP}`]: "$boxShadow-md",
         [`borderRadius-menu-${COMP}`]: "$borderRadius",
+        [`borderWidth-menu-${COMP}`]: "1px",
+        [`borderColor-menu-${COMP}`]: "$borderColor",
         [`backgroundColor-item-${COMP}`]: "$backgroundColor-dropdown-item",
         [`backgroundColor-item-${COMP}--hover`]: "$backgroundColor-dropdown-item--active",
         [`backgroundColor-item-${COMP}--active`]: "$backgroundColor-dropdown-item--active",
         [`minHeight-Input`]: "39px",
-        [`backgroundColor-badge-${COMP}`]: "$color-primary-500",
-        [`fontSize-badge-${COMP}`]: "$fontSize-small",
-        [`paddingHorizontal-badge-${COMP}`]: "$space-1",
-        [`paddingVertical-badge-${COMP}`]: "$space-1",
-        light: {
-            [`backgroundColor-badge-${COMP}--hover`]: "$color-primary-400",
-            [`backgroundColor-badge-${COMP}--active`]: "$color-primary-500",
-            [`textColor-item-${COMP}--disabled`]: "$color-surface-200",
-            [`textColor-badge-${COMP}`]: "$color-surface-50",
-        },
-        dark: {
-            [`backgroundColor-badge${COMP}--hover`]: "$color-primary-600",
-            [`backgroundColor-badge${COMP}--active`]: "$color-primary-500",
-            [`textColor-badge-${COMP}`]: "$color-surface-50",
-            [`textColor-item-${COMP}--disabled`]: "$color-surface-800",
-        },
+        [`backgroundColor-${COMP}-badge`]: "$color-primary-500",
+        [`fontSize-${COMP}-badge`]: "$fontSize-small",
+        [`paddingHorizontal-${COMP}-badge`]: "$space-1",
+        [`paddingVertical-${COMP}-badge`]: "$space-1",
+        [`backgroundColor-${COMP}-badge--hover`]: "$color-primary-400",
+        [`backgroundColor-${COMP}-badge--active`]: "$color-primary-500",
+        [`textColor-item-${COMP}--disabled`]: "$color-surface-200",
+        [`textColor-${COMP}-badge`]: "$const-color-surface-50",
     },
 });
 exports.autoCompleteComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.AutoCompleteMd, ({ node, state, updateState, extractValue, renderChild, lookupEventHandler, layoutCss, registerComponentApi, }) => {

package/dist/scripts/src/components/AutoComplete/AutoCompleteContext.js

@@ -10,6 +10,8 @@ exports.AutoCompleteContext = (0, react_1.createContext)({
     optionRenderer: (option) => (0, jsx_runtime_1.jsx)("div", { children: option.label }),
     inputValue: "",
     options: new Set(),
+    open: false,
+    setOpen: (open) => { },
 });
 function useAutoComplete() {
     return (0, react_1.useContext)(exports.AutoCompleteContext);

package/dist/scripts/src/components/AutoComplete/AutoCompleteNative.js

@@ -150,8 +150,10 @@ exports.AutoComplete = (0, react_1.forwardRef)(function AutoComplete({ id, initi
             optionRenderer,
             options,
             inputValue,
+            open,
+            setOpen,
         };
-    }, [inputValue, multi, optionRenderer, options, toggleOption, value]);
+    }, [inputValue, multi, optionRenderer, options, toggleOption, value, open, setOpen]);
     return ((0, jsx_runtime_1.jsx)(AutoCompleteContext_1.AutoCompleteContext.Provider, { value: autoCompleteContextValue, children: (0, jsx_runtime_1.jsx)(OptionTypeProvider_1.default, { Component: SelectNative_1.HiddenOption, children: (0, jsx_runtime_1.jsxs)(OptionContext_1.OptionContext.Provider, { value: optionContextValue, children: [children, (0, jsx_runtime_1.jsx)(ItemWithLabel_1.ItemWithLabel, { ref: forwardedRef, labelPosition: labelPosition, label: label, labelWidth: labelWidth, labelBreak: labelBreak, required: required, enabled: enabled, onFocus: onFocus, onBlur: onBlur, style: style, children: (0, jsx_runtime_1.jsx)(react_popover_1.Popover, { open: open, children: (0, jsx_runtime_1.jsxs)(cmdk_1.Command, { ref: dropdownRef, className: AutoComplete_module_scss_1.default.command, filter: (value, search, keywords) => {
                                     const extendedValue = value + " " + keywords.join(" ");
                                     if (extendedValue.toLowerCase().includes(search.toLowerCase()))
@@ -199,7 +201,7 @@ exports.AutoComplete = (0, react_1.forwardRef)(function AutoComplete({ id, initi
                                                 }, style: { height: dropdownHeight }, children: [(0, jsx_runtime_1.jsx)(cmdk_1.CommandEmpty, { children: emptyListNode }), (0, jsx_runtime_1.jsx)(CreatableItem, {}), (0, jsx_runtime_1.jsx)(cmdk_1.CommandGroup, { children: Array.from(options).map(({ value, label, enabled, keywords, labelText }) => ((0, jsx_runtime_1.jsx)(AutoCompleteOption, { value: value, label: label, enabled: enabled, keywords: keywords, labelText: labelText }, value))) })] }) }) }))] }) }) })] }) }) }));
 });
 function CreatableItem() {
-    const { value, options, inputValue, onChange } = (0, AutoCompleteContext_1.useAutoComplete)();
+    const { value, options, inputValue, onChange, setOpen } = (0, AutoCompleteContext_1.useAutoComplete)();
     const { onOptionAdd } = (0, OptionContext_1.useOption)();
     if (isOptionsExist(options, [{ value: inputValue, label: inputValue }]) ||
         (Array.isArray(value) && (value === null || value === void 0 ? void 0 : value.find((s) => s === inputValue))) ||
@@ -213,6 +215,7 @@ function CreatableItem() {
             const newOption = { value, label: value, enabled: true, labelText: value };
             onOptionAdd(newOption);
             onChange(value);
+            setOpen(false);
         }, children: `Create "${inputValue}"` }));
     // For normal creatable
     if (inputValue.length > 0) {
@@ -222,12 +225,13 @@ function CreatableItem() {
 }
 function AutoCompleteOption({ value, label, enabled = true, keywords }) {
     const id = (0, react_1.useId)();
-    const { value: selectedValue, onChange, optionRenderer, multi } = (0, AutoCompleteContext_1.useAutoComplete)();
+    const { value: selectedValue, onChange, optionRenderer, multi, setOpen } = (0, AutoCompleteContext_1.useAutoComplete)();
     const selected = multi ? selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.includes(value) : selectedValue === value;
     return ((0, jsx_runtime_1.jsxs)(cmdk_1.CommandItem, { id: id, disabled: !enabled, value: `${value}`, className: AutoComplete_module_scss_1.default.autoCompleteOption, onMouseDown: (e) => {
             e.preventDefault();
             e.stopPropagation();
         }, onSelect: () => {
             onChange(value);
+            setOpen(false);
         }, "data-state": selected ? "checked" : undefined, keywords: keywords, children: [optionRenderer({ label, value }), selected && (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "checkmark" })] }, id));
 }

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

@@ -39,15 +39,8 @@ exports.AvatarMd = (0, ComponentDefs_1.createMetadata)({
         [`boxShadow-${COMP}`]: "inset 0 0 0 1px rgba(4,32,69,0.1)",
         [`textColor-${COMP}`]: "$textColor-secondary",
         [`fontWeight-${COMP}`]: "$fontWeight-bold",
-        light: {
-            [`border-${COMP}`]: "0px solid $color-surface-400A80",
-            [`backgroundColor-${COMP}`]: "$color-surface-100",
-        },
-        dark: {
-            [`border-${COMP}`]: "0px solid $color-surface-700",
-            [`backgroundColor-${COMP}`]: "$color-surface-800",
-            [`borderColor-${COMP}`]: "$color-surface-700",
-        },
+        [`border-${COMP}`]: "0px solid $color-surface-400A80",
+        [`backgroundColor-${COMP}`]: "$color-surface-100",
     },
 });
 exports.avatarComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.AvatarMd, ({ node, extractValue, lookupEventHandler, layoutCss, extractResourceUrl }) => {

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

@@ -49,14 +49,8 @@ exports.BadgeMd = (0, ComponentDefs_1.createMetadata)({
         [`borderRadius-${COMP}`]: "4px",
         [`fontSize-${COMP}`]: "0.8em",
         [`fontSize-${COMP}-pill`]: "0.8em",
-        light: {
-            [`backgroundColor-${COMP}`]: "rgba($color-secondary-500-rgb, .6)",
-            [`textColor-${COMP}`]: "white",
-        },
-        dark: {
-            [`backgroundColor-${COMP}`]: "rgba($color-secondary-500-rgb, .6)",
-            [`textColor-${COMP}`]: "$color-surface-50",
-        },
+        [`backgroundColor-${COMP}`]: "rgba($color-secondary-500-rgb, .6)",
+        [`textColor-${COMP}`]: "$const-color-surface-0",
     },
 });
 exports.badgeComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.BadgeMd, ({ node, extractValue, renderChild, layoutCss }) => {