xmlui 0.9.21 → 0.9.25

package/dist/scripts/package.json

@@ -0,0 +1,252 @@
+{
+    "name": "xmlui",
+    "version": "0.9.25",
+    "sideEffects": false,
+    "scripts": {
+        "start-test-bed": "cd src/testing/infrastructure && xmlui start",
+        "build:test-bed": "cd src/testing/infrastructure && xmlui build --build-mode=INLINE_ALL --withHostingMetaFiles --withMock",
+        "build:bin": "tsc -p tsconfig.bin.json",
+        "build:xmlui": "vite build --mode lib",
+        "build:xmlui-standalone": "vite build --mode standalone",
+        "build:xmlui-metadata": "vite build --mode metadata",
+        "build:ext-meta": "node scripts/build-extension-packages/build-extension-packages.mjs",
+        "build": "rimraf dist && tsc && npm run build:bin && npm run build:xmlui-metadata && npm run build:xmlui && npm run build:xmlui-standalone",
+        "build:extensions": "cd ../packages/xmlui-animations && npm run build && cd ../xmlui-charts && npm run build && cd ../xmlui-pdf && npm run build && cd ../xmlui-spreadsheet && cd ../xmlui-devtools && npm run build && npm run build",
+        "test": "npm run test:unit",
+        "test:unit": "vitest run",
+        "test:e2e": "playwright test",
+        "test:e2e-smoke": "playwright test --project smoke",
+        "test:e2e-ui": "npm run test:e2e -- --ui",
+        "lint": "eslint --ignore-path .gitignore --cache --cache-location ./node_modules/.cache/eslint .",
+        "prepublishOnly": "clean-package && npm run build",
+        "cleanPackage": "clean-package",
+        "postpublish": "clean-package restore",
+        "generate-docs": "node scripts/generate-docs/get-docs.mjs",
+        "prepare-docs-data": "npm run build:xmlui-metadata",
+        "generate-all-docs": "npm run build:xmlui-metadata && npm run build:ext-meta && npm run generate-docs",
+        "export-themes": "npm run prepare-docs-data && node scripts/generate-docs/create-theme-files.mjs",
+        "generate-langserver-metadata": "node scripts/get-langserver-metadata.mjs > src/language-server/xmlui-metadata-generated.mjs"
+    },
+    "dependencies": {
+        "@eslint-community/regexpp": "4.10.0",
+        "@formkit/auto-animate": "0.7.0",
+        "@internationalized/number": "^3.6.0",
+        "@modyfi/vite-plugin-yaml": "1.1.0",
+        "@monaco-editor/loader": "^1.5.0",
+        "@popperjs/core": "2.11.6",
+        "@radix-ui/react-accordion": "^1.2.0",
+        "@radix-ui/react-alert-dialog": "^1.1.2",
+        "@radix-ui/react-dialog": "1.0.5",
+        "@radix-ui/react-dropdown-menu": "2.0.6",
+        "@radix-ui/react-hover-card": "1.0.7",
+        "@radix-ui/react-popover": "^1.1.2",
+        "@radix-ui/react-radio-group": "1.1.3",
+        "@radix-ui/react-select": "^2.1.2",
+        "@radix-ui/react-slider": "^1.2.3",
+        "@radix-ui/react-tabs": "1.1.0",
+        "@radix-ui/react-tooltip": "^1.2.4",
+        "@radix-ui/react-visually-hidden": "1.0.3",
+        "@remix-run/react": "2.9.1",
+        "@tanstack/react-query": "^4.36.1",
+        "@tanstack/react-query-devtools": "^4.36.1",
+        "@tanstack/react-table": "8.17.3",
+        "@tanstack/react-virtual": "3.10.8",
+        "@types/chroma-js": "^3.1.1",
+        "@types/color": "3.0.6",
+        "@vitejs/plugin-react": "4.3.0",
+        "adm-zip": "0.5.10",
+        "axios": "1.7.7",
+        "chroma-js": "^3.1.2",
+        "classnames": "2.5.1",
+        "cmdk": "^1.0.4",
+        "color": "4.2.3",
+        "date-fns": "2.30.0",
+        "dexie": "3.2.4",
+        "dotenv": "16.3.1",
+        "embla-carousel-autoplay": "^8.3.0",
+        "embla-carousel-react": "^8.3.0",
+        "emoji-picker-react": "4.4.10",
+        "glob": "7.2.0",
+        "immer": "9.0.16",
+        "lodash-es": "4.17.21",
+        "memoize-one": "6.0.0",
+        "msw": "2.0.1",
+        "oidc-client-ts": "2.1.0",
+        "papaparse": "^5.5.2",
+        "react": "18.2.0",
+        "react-currency-input-field": "3.6.9",
+        "react-datepicker": "4.25.0",
+        "react-day-picker": "9.6.7",
+        "react-dom": "18.2.0",
+        "react-dropzone": "14.2.3",
+        "react-helmet-async": "1.3.0",
+        "react-hot-toast": "2.4.1",
+        "react-icons": "4.12.0",
+        "react-imask": "7.1.3",
+        "react-markdown": "^9.0.1",
+        "react-measure": "2.5.2",
+        "react-popper": "2.3.0",
+        "react-resizable-panels": "2.0.19",
+        "react-rnd": "^10.5.2",
+        "react-router-dom": "6.23.0",
+        "react-select": "5.7.4",
+        "react-sticky-el": "^2.1.1",
+        "react-textarea-autosize": "8.5.3",
+        "react-virtualized-auto-sizer": "1.0.24",
+        "react-window": "1.8.10",
+        "recharts": "^2.15.1",
+        "rehype-raw": "^7.0.0",
+        "remark-gfm": "^4.0.1",
+        "sass": "1.55.0",
+        "scroll-into-view-if-needed": "^3.1.0",
+        "shiki": "^1.14.1",
+        "ts-node": "10.9.1",
+        "unist-util-visit": "^5.0.0",
+        "use-context-selector": "1.4.1",
+        "virtua": "0.40.0",
+        "vite-plugin-lib-inject-css": "1.3.0",
+        "vite-plugin-svgr": "4.2.0",
+        "vscode-languageserver": "^9.0.1",
+        "vscode-languageserver-textdocument": "^1.0.11",
+        "yargs": "17.7.2"
+    },
+    "devDependencies": {
+        "@babel/core": "7.19.6",
+        "@babel/preset-env": "7.19.4",
+        "@babel/preset-typescript": "7.18.6",
+        "@playwright/test": "1.50.1",
+        "@rollup/pluginutils": "5.1.0",
+        "@types/adm-zip": "0.5.4",
+        "@types/glob": "7.2.0",
+        "@types/lodash-es": "4.17.6",
+        "@types/node": "18.11.5",
+        "@types/react": "18.2.23",
+        "@types/react-datepicker": "4.19.5",
+        "@types/react-dom": "18.2.8",
+        "@types/react-measure": "^2.0.8",
+        "@types/react-pdf": "5.7.2",
+        "@types/react-window": "1.8.8",
+        "@types/yargs": "17.0.31",
+        "@typescript-eslint/eslint-plugin": "8.15.0",
+        "@typescript-eslint/parser": "8.15.0",
+        "babel-loader": "8.2.5",
+        "clean-package": "2.2.0",
+        "eslint": "^8.57.0",
+        "eslint-import-resolver-typescript": "3.6.1",
+        "eslint-plugin-import": "2.28.1",
+        "eslint-plugin-jsx-a11y": "6.7.1",
+        "eslint-plugin-react": "^7.37.4",
+        "eslint-plugin-react-hooks": "^5.2.0",
+        "prettier": "^3.3.3",
+        "rimraf": "6.0.1",
+        "rollup-plugin-visualizer": "5.8.3",
+        "serve": "14.2.0",
+        "typescript": "5.7.3",
+        "vite": "5.4.9",
+        "vite-plugin-dts": "4.5.0",
+        "vitest": "^3.0.3"
+    },
+    "optionalDependencies": {
+        "@esbuild/linux-x64": "0.25.2",
+        "@rollup/rollup-linux-x64-gnu": "4.20.0",
+        "@rollup/rollup-win32-x64-msvc": "4.20.0"
+    },
+    "files": [
+        "dist",
+        "src/styles"
+    ],
+    "bin": {
+        "xmlui": "dist/scripts/bin/bootstrap.js"
+    },
+    "clean-package": {
+        "replace": {
+            "bin": {
+                "xmlui": "dist/scripts/bin/bootstrap.js"
+            },
+            "main": "./dist/xmlui.umd.js",
+            "module": "./dist/xmlui.mjs",
+            "types": "./dist/xmlui.d.ts",
+            "exports": {
+                ".": {
+                    "import": "./dist/xmlui.mjs",
+                    "require": "./dist/xmlui.umd.js"
+                },
+                "./language-server": {
+                    "import": "./dist/language-server.mjs",
+                    "require": "./dist/language-server.mjs"
+                },
+                "./language-server-web-worker": {
+                    "import": "./dist/language-server-web-worker.mjs",
+                    "require": "./dist/language-server-web-worker.mjs"
+                },
+                "./parser": {
+                    "import": "./dist/xmlui-parser.mjs",
+                    "require": "./dist/xmlui-parser.mjs"
+                },
+                "./*.css": {
+                    "import": "./dist/*.css",
+                    "require": "./dist/*.css"
+                },
+                "./index.scss": {
+                    "import": "./src/index.scss",
+                    "require": "./src/index.scss"
+                },
+                "./vite-xmlui-plugin": {
+                    "import": "./dist/scripts/bin/vite-xmlui-plugin.js",
+                    "require": "./dist/scripts/bin/vite-xmlui-plugin.js"
+                }
+            }
+        }
+    },
+    "main": "./dist/xmlui.umd.js",
+    "exports": {
+        ".": {
+            "import": "./dist/xmlui.mjs",
+            "require": "./dist/xmlui.umd.js"
+        },
+        "./language-server": {
+            "import": "./dist/language-server.mjs",
+            "require": "./dist/language-server.mjs"
+        },
+        "./language-server-web-worker": {
+            "import": "./dist/language-server-web-worker.mjs",
+            "require": "./dist/language-server-web-worker.mjs"
+        },
+        "./parser": {
+            "import": "./dist/xmlui-parser.mjs",
+            "require": "./dist/xmlui-parser.mjs"
+        },
+        "./*.css": {
+            "import": "./dist/*.css",
+            "require": "./dist/*.css"
+        },
+        "./index.scss": {
+            "import": "./src/index.scss",
+            "require": "./src/index.scss"
+        },
+        "./vite-xmlui-plugin": {
+            "import": "./dist/scripts/bin/vite-xmlui-plugin.js",
+            "require": "./dist/scripts/bin/vite-xmlui-plugin.js"
+        }
+    },
+    "browserslist": {
+        "production": [
+            ">0.2%",
+            "not dead",
+            "not op_mini all"
+        ],
+        "development": [
+            "last 1 chrome version",
+            "last 1 firefox version",
+            "last 1 safari version"
+        ]
+    },
+    "repository": {
+        "url": "https://github.com/xmlui-com/xmlui.git"
+    },
+    "msw": {
+        "workerDirectory": "src/testing/infrastructure/public"
+    },
+    "module": "./dist/xmlui.mjs",
+    "types": "./dist/xmlui.d.ts"
+}

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

@@ -7,7 +7,6 @@ const appLayoutNames = [
     "vertical",
     "vertical-sticky",
     "vertical-full-header",
-    "vertical-constrained-width",
     "condensed",
     "condensed-sticky",
     "horizontal",

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

@@ -37,7 +37,7 @@ function App({ children, style, layout, loggedInUser, scrollWholePage, noScrollb
     const mounted = (0, react_1.useRef)(false);
     const layoutWithDefaultValue = layout || getThemeVar("layout-App") || "condensed-sticky";
     const safeLayout = layoutWithDefaultValue === null || layoutWithDefaultValue === void 0 ? void 0 : layoutWithDefaultValue.trim().replace(/[\u2013\u2014\u2011]/g, "-"); //It replaces all – (–) and — (—) and non-breaking hyphen '‑' symbols with simple dashes (-).
-    const { setLoggedInUser, mediaSize } = (0, AppContext_1.useAppContext)();
+    const { setLoggedInUser, mediaSize, forceRefreshAnchorScroll } = (0, AppContext_1.useAppContext)();
     const hasRegisteredHeader = header !== undefined;
     const hasRegisteredNavPanel = navPanelDef !== undefined;
     const pagesWrapperInnerStyle = (0, react_1.useMemo)(() => {
@@ -93,13 +93,23 @@ function App({ children, style, layout, loggedInUser, scrollWholePage, noScrollb
     }, []));
     const styleWithHelpers = (0, react_1.useMemo)(() => {
         return {
-            "--header-height": !scrollWholePage ? 0 : headerHeight + "px",
-            "--footer-height": !scrollWholePage ? 0 : footerHeight + "px",
+            "--header-height": !scrollWholePage ||
+                safeLayout === "vertical" ||
+                safeLayout === "horizontal" ||
+                safeLayout === "condensed"
+                ? "0px"
+                : headerHeight + "px",
+            "--footer-height": !scrollWholePage ||
+                safeLayout === "vertical" ||
+                safeLayout === "horizontal" ||
+                safeLayout === "condensed"
+                ? "0px"
+                : footerHeight + "px",
             "--header-abs-height": headerHeight + "px",
             "--footer-abs-height": footerHeight + "px",
-            "--scrollbar-width": noScrollbarGutters ? 0 : scrollbarWidth + "px",
+            "--scrollbar-width": noScrollbarGutters ? "0px" : scrollbarWidth + "px",
         };
-    }, [footerHeight, headerHeight, noScrollbarGutters, scrollWholePage, scrollbarWidth]);
+    }, [footerHeight, headerHeight, noScrollbarGutters, safeLayout, scrollWholePage, scrollbarWidth]);
     const [drawerVisible, setDrawerVisible] = (0, react_1.useState)(false);
     const location = (0, react_2.useLocation)();
     const toggleDrawer = (0, react_1.useCallback)(() => {
@@ -113,6 +123,12 @@ function App({ children, style, layout, loggedInUser, scrollWholePage, noScrollb
             behavior: "instant", // Optional if you want to skip the scrolling animation
         });
     }, [location.pathname]);
+    (0, react_1.useEffect)(() => {
+        requestAnimationFrame(() => {
+            // we have to force refresh the anchor scroll to pos, because it depends on the header height (scroll-margin-top on anchors)
+            forceRefreshAnchorScroll();
+        });
+    }, [forceRefreshAnchorScroll]);
     const [subNavPanelSlot, setSubNavPanelSlot] = (0, react_1.useState)(null);
     const registerSubNavPanelSlot = (0, react_1.useCallback)((element) => {
         setSubNavPanelSlot(element);
@@ -185,9 +201,6 @@ function App({ children, style, layout, loggedInUser, scrollWholePage, noScrollb
         case "vertical-full-header":
             content = ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(wrapperBaseClasses, App_module_scss_1.default.verticalFullHeader), style: styleWithHelpers, ref: scrollPageContainerRef, children: [(0, jsx_runtime_1.jsx)("header", { className: (0, classnames_1.default)(App_module_scss_1.default.headerWrapper, App_module_scss_1.default.sticky), ref: headerRefCallback, children: header }), (0, jsx_runtime_1.jsxs)("div", { className: App_module_scss_1.default.content, children: [navPanelVisible && (0, jsx_runtime_1.jsx)("aside", { className: App_module_scss_1.default.navPanelWrapper, children: navPanel }), (0, jsx_runtime_1.jsx)("main", { className: App_module_scss_1.default.contentWrapper, children: (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.PagesWrapper, ref: noScrollPageContainerRef, children: (0, jsx_runtime_1.jsx)(ScrollContext_1.ScrollContext.Provider, { value: scrollContainerRef, children: (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.PagesWrapperInner, style: pagesWrapperInnerStyle, children: children }) }) }) })] }), (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.footerWrapper, ref: footerRefCallback, children: footer })] }));
             break;
-        case "vertical-constrained-width":
-            content = ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(wrapperBaseClasses, App_module_scss_1.default.verticalConstrained), style: styleWithHelpers, ref: scrollPageContainerRef, children: [(0, jsx_runtime_1.jsx)("header", { className: (0, classnames_1.default)(App_module_scss_1.default.headerWrapper, App_module_scss_1.default.sticky), ref: headerRefCallback, children: (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.header, style: { paddingInline: 0 }, children: header }) }), (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(App_module_scss_1.default.content, App_module_scss_1.default.verticalConstrained), children: [navPanelVisible && (0, jsx_runtime_1.jsx)("aside", { className: App_module_scss_1.default.navPanelWrapper, children: navPanel }), (0, jsx_runtime_1.jsx)("main", { className: App_module_scss_1.default.contentWrapper, children: (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.PagesWrapper, ref: noScrollPageContainerRef, children: (0, jsx_runtime_1.jsx)(ScrollContext_1.ScrollContext.Provider, { value: scrollContainerRef, children: (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.PagesWrapperInner, style: pagesWrapperInnerStyle, children: children }) }) }) })] }), (0, jsx_runtime_1.jsx)("div", { className: App_module_scss_1.default.footerWrapper, ref: footerRefCallback, children: footer })] }));
-            break;
         case "condensed":
         case "condensed-sticky":
             content = ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(wrapperBaseClasses, App_module_scss_1.default.horizontal, {
@@ -213,7 +226,6 @@ function getAppLayoutOrientation(appLayout) {
         case "vertical":
         case "vertical-sticky":
         case "vertical-full-header":
-        case "vertical-constrained-width":
             return "vertical";
         default:
             return "horizontal";

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

@@ -39,7 +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", [`backgroundColor-${COMP}`]: "$color-surface-raised" }),
+    defaultThemeVars: Object.assign(Object.assign(Object.assign({ [`height-${COMP}`]: "$space-14", [`maxWidth-content-${COMP}`]: "$maxWidth-content-App", [`maxWidth-${COMP}`]: "$maxWidth-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/AutoComplete/AutoComplete.js

@@ -26,6 +26,10 @@ exports.AutoCompleteMd = (0, ComponentDefs_1.createMetadata)({
         readOnly: (0, metadata_helpers_1.dReadonly)(),
         enabled: (0, metadata_helpers_1.dEnabled)(),
         validationStatus: (0, metadata_helpers_1.dValidationStatus)(),
+        label: (0, metadata_helpers_1.dLabel)(),
+        labelPosition: (0, metadata_helpers_1.dLabelPosition)("top"),
+        labelWidth: (0, metadata_helpers_1.dLabelWidth)(COMP),
+        labelBreak: (0, metadata_helpers_1.dLabelBreak)(COMP),
         dropdownHeight: (0, ComponentDefs_1.d)("This property sets the height of the dropdown list."),
         multi: (0, metadata_helpers_1.dMulti)(),
         optionTemplate: (0, metadata_helpers_1.dComponent)(`This property enables the customization of list items. To access the attributes of ` +
@@ -48,7 +52,6 @@ exports.AutoCompleteMd = (0, ComponentDefs_1.createMetadata)({
             "particular option."),
     },
     themeVars: (0, themeVars_1.parseScssVar)(AutoComplete_module_scss_1.default.themeVars),
-    themeVarDescriptions: {},
     defaultThemeVars: {
         [`backgroundColor-menu-${COMP}`]: "$backgroundColor-primary",
         [`boxShadow-menu-${COMP}`]: "$boxShadow-md",
@@ -70,7 +73,7 @@ exports.AutoCompleteMd = (0, ComponentDefs_1.createMetadata)({
     },
 });
 exports.autoCompleteComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.AutoCompleteMd, ({ node, state, updateState, extractValue, renderChild, lookupEventHandler, layoutCss, registerComponentApi, }) => {
-    return ((0, jsx_runtime_1.jsx)(AutoCompleteNative_1.AutoComplete, { multi: extractValue.asOptionalBoolean(node.props.multi), style: layoutCss, updateState: updateState, initialValue: extractValue(node.props.initialValue), value: state === null || state === void 0 ? void 0 : state.value, autoFocus: extractValue.asOptionalBoolean(node.props.autoFocus), enabled: extractValue.asOptionalBoolean(node.props.enabled), placeholder: extractValue.asOptionalString(node.props.placeholder), validationStatus: extractValue(node.props.validationStatus), onDidChange: lookupEventHandler("didChange"), onFocus: lookupEventHandler("gotFocus"), onBlur: lookupEventHandler("lostFocus"), registerComponentApi: registerComponentApi, emptyListTemplate: renderChild(node.props.emptyListTemplate), dropdownHeight: extractValue(node.props.dropdownHeight), optionRenderer: node.props.optionTemplate
+    return ((0, jsx_runtime_1.jsx)(AutoCompleteNative_1.AutoComplete, { multi: extractValue.asOptionalBoolean(node.props.multi), style: layoutCss, updateState: updateState, initialValue: extractValue(node.props.initialValue), value: state === null || state === void 0 ? void 0 : state.value, label: extractValue(node.props.label), labelPosition: extractValue(node.props.labelPosition), labelWidth: extractValue(node.props.labelWidth), labelBreak: extractValue.asOptionalBoolean(node.props.labelBreak), autoFocus: extractValue.asOptionalBoolean(node.props.autoFocus), enabled: extractValue.asOptionalBoolean(node.props.enabled), placeholder: extractValue.asOptionalString(node.props.placeholder), validationStatus: extractValue(node.props.validationStatus), onDidChange: lookupEventHandler("didChange"), onFocus: lookupEventHandler("gotFocus"), onBlur: lookupEventHandler("lostFocus"), registerComponentApi: registerComponentApi, emptyListTemplate: renderChild(node.props.emptyListTemplate), dropdownHeight: extractValue(node.props.dropdownHeight), optionRenderer: node.props.optionTemplate
             ? (item) => {
                 return ((0, jsx_runtime_1.jsx)(container_helpers_1.MemoizedItem, { node: node.props.optionTemplate, item: item, renderChild: renderChild }));
             }

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

@@ -35,6 +35,8 @@ exports.AutoComplete = (0, react_1.forwardRef)(function AutoComplete({ id, initi
     const { root } = (0, ThemeContext_1.useTheme)();
     const [width, setWidth] = (0, react_1.useState)(0);
     const observer = (0, react_1.useRef)();
+    const generatedId = (0, react_1.useId)();
+    const inputId = id || generatedId;
     // Set initial state based on the initialValue prop
     (0, react_1.useEffect)(() => {
         if (initialValue !== undefined) {
@@ -79,7 +81,8 @@ exports.AutoComplete = (0, react_1.forwardRef)(function AutoComplete({ id, initi
     (0, react_1.useEffect)(() => {
         var _a;
         if (!multi) {
-            setInputValue(((_a = Array.from(options).find((o) => o.value === value)) === null || _a === void 0 ? void 0 : _a.labelText) || "");
+            const label = (_a = Array.from(options).find((o) => o.value === value)) === null || _a === void 0 ? void 0 : _a.label;
+            setInputValue(label ? label + "" : "");
         }
     }, [multi, options, value]);
     // Clear selected value
@@ -154,17 +157,17 @@ exports.AutoComplete = (0, react_1.forwardRef)(function AutoComplete({ id, initi
             setOpen,
         };
     }, [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) => {
+    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, { id: inputId, 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()))
                                         return 1;
                                     return 0;
-                                }, children: [(0, jsx_runtime_1.jsx)(react_popover_1.PopoverTrigger, { style: { width: "100%" }, children: (0, jsx_runtime_1.jsxs)("div", { ref: setReferenceElement, onClick: () => {
-                                                var _a;
-                                                if (!enabled)
-                                                    return;
-                                                (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-                                            }, style: style, className: (0, classnames_1.default)(AutoComplete_module_scss_1.default.badgeListWrapper, AutoComplete_module_scss_1.default[validationStatus], {
+                                }, children: [(0, jsx_runtime_1.jsx)(react_popover_1.PopoverTrigger, { style: { width: "100%" }, id: inputId, onClick: () => {
+                                            var _a;
+                                            if (!enabled)
+                                                return;
+                                            (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                                        }, children: (0, jsx_runtime_1.jsxs)("div", { ref: setReferenceElement, style: style, className: (0, classnames_1.default)(AutoComplete_module_scss_1.default.badgeListWrapper, AutoComplete_module_scss_1.default[validationStatus], {
                                                 [AutoComplete_module_scss_1.default.disabled]: !enabled,
                                                 [AutoComplete_module_scss_1.default.focused]: document.activeElement === inputRef.current,
                                             }), children: [multi ? ((0, jsx_runtime_1.jsxs)("div", { className: AutoComplete_module_scss_1.default.badgeList, children: [Array.isArray(value) &&
@@ -192,10 +195,10 @@ exports.AutoComplete = (0, react_1.forwardRef)(function AutoComplete({ id, initi
                                                     }, onBlur: () => {
                                                         setOpen(false);
                                                         onBlur();
-                                                    }, placeholder: placeholder, className: AutoComplete_module_scss_1.default.commandInput })), (0, jsx_runtime_1.jsxs)("div", { className: AutoComplete_module_scss_1.default.actions, children: [(value === null || value === void 0 ? void 0 : value.length) > 0 && enabled && ((0, jsx_runtime_1.jsx)("button", { onClick: (event) => {
+                                                    }, placeholder: placeholder, className: AutoComplete_module_scss_1.default.commandInput })), (0, jsx_runtime_1.jsxs)("div", { className: AutoComplete_module_scss_1.default.actions, children: [(value === null || value === void 0 ? void 0 : value.length) > 0 && enabled && ((0, jsx_runtime_1.jsx)("span", { onClick: (event) => {
                                                                 event.stopPropagation();
                                                                 clearValue();
-                                                            }, children: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "close" }) })), (0, jsx_runtime_1.jsx)("button", { onClick: () => setOpen(true), children: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "chevrondown" }) })] })] }) }), open && ((0, jsx_runtime_1.jsx)(react_popover_1.Portal, { container: root, children: (0, jsx_runtime_1.jsx)(react_popover_1.PopoverContent, { asChild: true, style: { width, height: dropdownHeight }, className: AutoComplete_module_scss_1.default.popoverContent, align: "start", onOpenAutoFocus: (e) => e.preventDefault(), children: (0, jsx_runtime_1.jsxs)(cmdk_1.CommandList, { className: AutoComplete_module_scss_1.default.commandList, onMouseUp: () => {
+                                                            }, children: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "close" }) })), (0, jsx_runtime_1.jsx)("span", { onClick: () => setOpen(true), children: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "chevrondown" }) })] })] }) }), open && ((0, jsx_runtime_1.jsx)(react_popover_1.Portal, { container: root, children: (0, jsx_runtime_1.jsx)(react_popover_1.PopoverContent, { asChild: true, style: { width, height: dropdownHeight }, className: AutoComplete_module_scss_1.default.popoverContent, align: "start", onOpenAutoFocus: (e) => e.preventDefault(), children: (0, jsx_runtime_1.jsxs)(cmdk_1.CommandList, { className: AutoComplete_module_scss_1.default.commandList, onMouseUp: () => {
                                                     var _a;
                                                     (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
                                                 }, 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))) })] }) }) }))] }) }) })] }) }) }));

package/dist/scripts/src/components/Bookmark/BookmarkNative.js

@@ -1,9 +1,13 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Bookmark = exports.defaultProps = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const TableOfContentsContext_1 = require("../../components-core/TableOfContentsContext");
+const Bookmark_module_scss_1 = __importDefault(require("./Bookmark.module.scss"));
 exports.defaultProps = {
     level: 1,
     omitFromToc: false,
@@ -24,6 +28,6 @@ const Bookmark = ({ uid, level = exports.defaultProps.level, children, title, om
             });
         }
     }, [uid, observeIntersection, registerHeading, level, title, omitFromToc]);
-    return ((0, jsx_runtime_1.jsx)("span", { ref: elementRef, id: uid, "data-anchor": true, children: children }));
+    return ((0, jsx_runtime_1.jsx)("span", { ref: elementRef, id: uid, "data-anchor": true, className: Bookmark_module_scss_1.default.anchorRef, children: children }));
 };
 exports.Bookmark = Bookmark;

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

@@ -0,0 +1,31 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.codeBlockComponentRenderer = exports.CodeBlockMd = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const CodeBlock_module_scss_1 = __importDefault(require("./CodeBlock.module.scss"));
+const ComponentDefs_1 = require("../../abstractions/ComponentDefs");
+const renderers_1 = require("../../components-core/renderers");
+const themeVars_1 = require("../../components-core/theming/themeVars");
+const CodeBlockNative_1 = require("./CodeBlockNative");
+const COMP = "CodeBlock";
+exports.CodeBlockMd = (0, ComponentDefs_1.createMetadata)({
+    description: `The \`${COMP}\` component displays code with optional syntax highlighting and meta information.`,
+    props: {},
+    themeVars: (0, themeVars_1.parseScssVar)(CodeBlock_module_scss_1.default.themeVars),
+    defaultThemeVars: {
+        "backgroundColor-CodeBlock": "$color-surface-100",
+        "backgroundColor-CodeBlock-header": "$color-primary-100",
+        //"borderLeft-CodeBlock": "$color-surface-300 2px solid",
+        "marginTop-CodeBlock": "$space-5",
+        "marginBottom-CodeBlock": "$space-5",
+        dark: {
+            "backgroundColor-CodeBlock-header": "$color-primary-200",
+        }
+    },
+});
+exports.codeBlockComponentRenderer = (0, renderers_1.createComponentRenderer)("CodeBlock", exports.CodeBlockMd, ({ node, extractValue, renderChild, layoutCss }) => {
+    return ((0, jsx_runtime_1.jsx)(CodeBlockNative_1.CodeBlock, { style: layoutCss, children: renderChild(node.children) }));
+});

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

@@ -0,0 +1,82 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CodeBlock = CodeBlock;
+exports.markdownCodeBlockParser = markdownCodeBlockParser;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const CodeBlock_module_scss_1 = __importDefault(require("./CodeBlock.module.scss"));
+const TextNative_1 = require("../Text/TextNative");
+const highlight_code_1 = require("../Markdown/highlight-code");
+const ButtonNative_1 = require("../Button/ButtonNative");
+const IconNative_1 = __importDefault(require("../Icon/IconNative"));
+const react_hot_toast_1 = __importDefault(require("react-hot-toast"));
+const unist_util_visit_1 = require("unist-util-visit");
+function CodeBlock({ children, meta, textToCopy, style }) {
+    if (!meta) {
+        return (0, jsx_runtime_1.jsx)("div", { className: CodeBlock_module_scss_1.default.codeBlock, style: style, children: children });
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { className: CodeBlock_module_scss_1.default.codeBlock, style: style, children: [meta.filename && ((0, jsx_runtime_1.jsx)("div", { className: CodeBlock_module_scss_1.default.codeBlockHeader, children: (0, jsx_runtime_1.jsx)(TextNative_1.Text, { variant: "em", children: meta.filename }) })), (0, jsx_runtime_1.jsxs)("div", { className: CodeBlock_module_scss_1.default.codeBlockCopyWrapper, children: [children, (0, jsx_runtime_1.jsx)("div", { className: CodeBlock_module_scss_1.default.codeBlockCopyButton, children: (0, jsx_runtime_1.jsx)(ButtonNative_1.Button, { variant: "outlined", themeColor: "primary", size: "sm", icon: (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "copy", "aria-hidden": true }), onClick: () => {
+                                if (!textToCopy)
+                                    return;
+                                navigator.clipboard.writeText(textToCopy);
+                                react_hot_toast_1.default.success("Code copied!");
+                            } }) })] })] }));
+}
+function markdownCodeBlockParser() {
+    return function transformer(tree) {
+        (0, unist_util_visit_1.visit)(tree, "code", visitor);
+    };
+    function visitor(node, _, parent) {
+        var _a;
+        const { lang, meta } = node;
+        const nodeData = { hProperties: {} };
+        if (lang !== null) {
+            nodeData.hProperties["dataLanguage"] = lang;
+            node.data = nodeData;
+        }
+        if (!parent)
+            return;
+        if (!meta)
+            return;
+        const params = (_a = splitter(meta)) === null || _a === void 0 ? void 0 : _a.filter((s) => s !== "").map((s) => s.trim());
+        if (!params)
+            return;
+        if (params.length === 0)
+            return;
+        const parsedMeta = params.reduce((acc, item) => {
+            item = item.trim();
+            if (item === "")
+                return acc;
+            if (item.indexOf("=") === -1) {
+                if (item.startsWith("/") && item.endsWith("/")) {
+                    acc[highlight_code_1.CodeHighlighterMetaKeys.highlightSubstrings.data] = item.substring(1, item.length - 1);
+                }
+                if (item.startsWith("{") && item.endsWith("}")) {
+                    acc[highlight_code_1.CodeHighlighterMetaKeys.highlightRows.data] = item.substring(1, item.length - 1);
+                }
+                if (item === "copy") {
+                    acc[highlight_code_1.CodeHighlighterMetaKeys.copy.data] = "true";
+                }
+                if (item === "rowNumbers") {
+                    acc[highlight_code_1.CodeHighlighterMetaKeys.rowNumbers.data] = "true";
+                }
+                return acc;
+            }
+            const index = item.indexOf("=");
+            if (item.substring(0, index) !== "filename")
+                return acc;
+            acc["dataFilename"] = item
+                .substring(index + 1)
+                .replace(/"(.+)"/, "$1")
+                .replace(/'(.+)'/, "$1");
+            return acc;
+        }, {});
+        nodeData.hProperties = Object.assign(Object.assign({}, nodeData.hProperties), parsedMeta);
+        node.data = nodeData;
+    }
+    function splitter(str) {
+        return str.match(/(?:("|')[^"']*\1|\{[^{}]*\}|\/.*?\/|[^\s"'{}/])+/g);
+    }
+}

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

@@ -98,6 +98,8 @@ const HtmlTags_1 = require("./HtmlTags/HtmlTags");
 const ColorPicker_1 = require("./ColorPicker/ColorPicker");
 const RadioItem_1 = require("./RadioGroup/RadioItem");
 const InspectButton_1 = require("./InspectButton/InspectButton");
+const NestedApp_1 = require("./NestedApp/NestedApp");
+const CodeBlock_1 = require("./CodeBlock/CodeBlock");
 /**
  * The framework has a specialized component concept, the "property holder
  * component." These components only hold property values but do not render
@@ -376,6 +378,7 @@ class ComponentRegistry {
             this.registerCoreComponent(Bookmark_1.bookmarkComponentRenderer);
             this.registerCoreComponent(TableOfContents_1.tableOfContentsRenderer);
             this.registerCoreComponent(Breakout_1.breakoutComponentRenderer);
+            this.registerCoreComponent(CodeBlock_1.codeBlockComponentRenderer);
         }
         this.registerCoreComponent(Theme_1.themeComponentRenderer);
         this.registerCoreComponent(AppState_1.appStateComponentRenderer);
@@ -485,6 +488,8 @@ class ComponentRegistry {
         this.registerCoreComponent(HtmlTags_1.htmlVarTagRenderer);
         this.registerCoreComponent(HtmlTags_1.htmlVideoTagRenderer);
         this.registerCoreComponent(HtmlTags_1.htmlWbrTagRenderer);
+        // --- Nested app and related components
+        this.registerCoreComponent(NestedApp_1.nestedAppComponentRenderer);
         this.registerActionFn(APICall_1.apiAction);
         this.registerActionFn(FileDownloadAction_1.downloadAction);
         this.registerActionFn(FileUploadAction_1.uploadAction);

package/dist/scripts/src/components/DatePicker/DatePickerNative.js

@@ -49,6 +49,7 @@ const ThemeContext_1 = require("../../components-core/theming/ThemeContext");
 const constants_1 = require("../../components-core/constants");
 const misc_1 = require("../../components-core/utils/misc");
 const InputAdornment_1 = require("../Input/InputAdornment");
+require("react-day-picker/dist/style.css");
 exports.DatePickerModeValues = ["single", "range"];
 var WeekDays;
 (function (WeekDays) {