xmlui 0.9.45 → 0.9.47

package/dist/scripts/package.json

@@ -1,6 +1,6 @@
 {
     "name": "xmlui",
-    "version": "0.9.45",
+    "version": "0.9.47",
     "sideEffects": false,
     "scripts": {
         "start-test-bed": "cd src/testing/infrastructure && xmlui start",

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

@@ -392,9 +392,10 @@ function PageIndexer({ Page, renderChild, onIndexed, }) {
                 const clone = currentContent.cloneNode(true);
                 const elementsToRemove = clone.querySelectorAll("style, script");
                 elementsToRemove.forEach((el) => el.remove());
-                const textContent = (clone.textContent || "").trim().replace(/\s+/g, " ");
-                const titleElement = currentContent.querySelector("h1");
+                const titleElement = clone.querySelector("h1");
                 const title = titleElement ? titleElement.innerText : (navLabel || pageUrl.split("/").pop() || pageUrl);
+                titleElement === null || titleElement === void 0 ? void 0 : titleElement.remove(); // Remove title element from clone to avoid duplication
+                const textContent = (clone.textContent || "").trim().replace(/\s+/g, " ");
                 const entry = {
                     title: title,
                     content: textContent,

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

@@ -228,7 +228,7 @@ function App({ children, style, layout, loggedInUser, scrollWholePage, noScrollb
     const handleOpenChange = (0, react_1.useCallback)((open) => {
         setDrawerVisible(open);
     }, []);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [memoizedHelmet, (0, jsx_runtime_1.jsxs)(AppLayoutContext_1.AppLayoutContext.Provider, { value: layoutContextValue, children: [(0, jsx_runtime_1.jsx)(Sheet_1.Sheet, { open: drawerVisible, onOpenChange: handleOpenChange, children: (0, jsx_runtime_1.jsx)(Sheet_1.SheetContent, { side: "left", children: memoizedNavPanelInDrawer }) }), (0, jsx_runtime_1.jsx)(SearchContext_1.SearchContextProvider, { children: content })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [memoizedHelmet, (0, jsx_runtime_1.jsx)(AppLayoutContext_1.AppLayoutContext.Provider, { value: layoutContextValue, children: (0, jsx_runtime_1.jsxs)(SearchContext_1.SearchContextProvider, { children: [(0, jsx_runtime_1.jsx)(Sheet_1.Sheet, { open: drawerVisible, onOpenChange: handleOpenChange, children: (0, jsx_runtime_1.jsx)(Sheet_1.SheetContent, { side: "left", children: memoizedNavPanelInDrawer }) }), content] }) })] }));
 }
 function getAppLayoutOrientation(appLayout) {
     switch (appLayout) {

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

@@ -26,7 +26,7 @@ const useSearchContextUpdater = () => {
 };
 exports.useSearchContextUpdater = useSearchContextUpdater;
 const useSearchContextContent = () => {
-    return (0, use_context_selector_1.useContextSelector)(SearchContext, (value) => value.content);
+    return (0, use_context_selector_1.useContextSelector)(SearchContext, (value) => value === null || value === void 0 ? void 0 : value.content);
 };
 exports.useSearchContextContent = useSearchContextContent;
 const useSearchContextSetIndexing = () => {

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", [`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" }),
+    defaultThemeVars: Object.assign(Object.assign(Object.assign({ [`padding-drawerToggle-${COMP}`]: "$space-0_5", [`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/ComponentProvider.js

@@ -10,6 +10,7 @@ const TextArea_1 = require("./TextArea/TextArea");
 const NavLink_1 = require("./NavLink/NavLink");
 const Link_1 = require("./Link/Link");
 const TreeComponent_1 = require("./Tree/TreeComponent");
+const TreeDisplay_1 = require("./TreeDisplay/TreeDisplay");
 const Button_1 = require("./Button/Button");
 const Heading_1 = require("./Heading/Heading");
 const Text_1 = require("./Text/Text");
@@ -112,6 +113,9 @@ const CodeBlock_1 = require("./CodeBlock/CodeBlock");
 const dataSourcePropHolder = (0, renderers_1.createPropHolderComponent)("DataSource");
 const textNodePropHolder = (0, renderers_1.createPropHolderComponent)("TextNode");
 const textNodeCDataPropHolder = (0, renderers_1.createPropHolderComponent)("TextNodeCData");
+const APP_NS = "#app-ns";
+const CORE_NS = "#xmlui-core-ns";
+const EXTENSIONS_NS = "XMLUIExtensions";
 /**
  * This class implements the registry that holds the components available
  * in xmlui. Any component in this registry can be used in the xmlui markup.
@@ -132,7 +136,8 @@ class ComponentRegistry {
         var _a, _b, _c;
         this.extensionManager = extensionManager;
         // --- The pool of available components
-        this.pool = new Map();
+        this.pool = new Map(); // namespace -> name -> ComponentRegistryEntry;
+        this.namePool = new Map();
         // --- The pool of available theme variable names
         this.themeVars = new Set();
         // --- Default theme variable values collected from the registered components
@@ -152,33 +157,34 @@ class ComponentRegistry {
         };
         // --- Registers a renderable component using its renderer function
         this.registerCoreComponent = (component) => {
-            const coreNamespaces = ["#xmlui-core-ns", ""];
             if ("compoundComponentDef" in component) {
-                this.registerCompoundComponentRenderer(component, ...coreNamespaces);
+                this.registerCompoundComponentRenderer(component, CORE_NS);
             }
             else {
-                this.registerComponentRenderer(component, ...coreNamespaces);
+                this.registerComponentRenderer(component, CORE_NS);
             }
         };
         this.registerAppComponent = (component) => {
-            const appNamespaces = ["#app-ns", ""];
             if ("compoundComponentDef" in component) {
-                this.registerCompoundComponentRenderer(component, ...appNamespaces);
+                this.registerCompoundComponentRenderer(component, APP_NS);
             }
             else {
-                this.registerComponentRenderer(component, ...appNamespaces);
+                this.registerComponentRenderer(component, APP_NS);
             }
         };
         // --- and metadata
-        this.registerComponentRenderer = ({ type, renderer, metadata, isCompoundComponent, }, ...namespaces) => {
+        this.registerComponentRenderer = ({ type, renderer, metadata, isCompoundComponent, }, namespace) => {
             const component = {
                 renderer,
                 descriptor: metadata,
                 isCompoundComponent,
             };
-            namespaces.forEach((ns) => {
-                this.pool.set((ns ? ns + "." : "") + type, component);
-            });
+            const fullName = `${namespace}.${type}`;
+            if (!this.pool.has(namespace)) {
+                this.pool.set(namespace, new Map());
+            }
+            this.pool.get(namespace).set(type, component);
+            this.namePool.set(fullName, { name: type, namespace });
             if (metadata === null || metadata === void 0 ? void 0 : metadata.themeVars) {
                 Object.keys(metadata.themeVars).forEach((key) => this.themeVars.add(key));
             }
@@ -236,6 +242,9 @@ class ComponentRegistry {
         if (process.env.VITE_USED_COMPONENTS_Tree !== "false") {
             this.registerCoreComponent(TreeComponent_1.treeComponentRenderer);
         }
+        if (process.env.VITE_USED_COMPONENTS_TreeDisplay !== "false") {
+            this.registerCoreComponent(TreeDisplay_1.treeDisplayComponentRenderer);
+        }
         if (process.env.VITE_USED_COMPONENTS_Button !== "false") {
             this.registerCoreComponent(Button_1.buttonComponentRenderer);
         }
@@ -390,106 +399,208 @@ class ComponentRegistry {
         this.registerCoreComponent(Theme_1.themeComponentRenderer);
         this.registerCoreComponent(AppState_1.appStateComponentRenderer);
         this.registerCoreComponent(APICall_2.apiCallRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlATagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlAbbrTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlAddressTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlAreaTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlArticleTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlAsideTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlAudioTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlBTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlBdiTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlBdoTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlBlockquoteTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlBrTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlButtonTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlCanvasTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlCaptionTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlCiteTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlCodeTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlColTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlColgroupTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlDataTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlDatalistTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlDdTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlDelTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlDetailsTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlDfnTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlDialogTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlDivTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlDlTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlDtTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlEMTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlEmbedTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlFieldsetTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlFigcaptionTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlFigureTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlFooterTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlFormTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlH1TagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlH2TagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlH3TagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlH4TagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlH5TagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlH6TagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlHeaderTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlHrTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlITagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlIframeTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlImgTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlInputTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlInsTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlKbdTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlLabelTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlLegendTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlLiTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlMainTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlMapTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlMarkTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlMenuTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlMeterTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlNavTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlObjectTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlOlTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlOptgroupTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlOptionTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlOutputTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlPTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlParamTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlPictureTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlPreTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlProgressTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlQTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlRpTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlRtTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlRubyTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlSTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlSampTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlSectionTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlSelectTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlSmallTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlSourceTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlSpanTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlStrongTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlSubTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlSummaryTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlSupTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlTableTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlTbodyTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlTdTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlTemplateTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlTextareaTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlTfootTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlThTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlTheadTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlTimeTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlTrTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlTrackTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlUTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlUlTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlVarTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlVideoTagRenderer);
-        this.registerCoreComponent(HtmlTags_1.htmlWbrTagRenderer);
+        if (process.env.VITE_INCLUDE_HTML_COMPONENTS !== "false") {
+            this.registerCoreComponent(HtmlTags_1.htmlATagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlAbbrTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlAddressTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlAreaTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlArticleTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlAsideTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlAudioTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlBTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlBdiTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlBdoTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlBlockquoteTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlBrTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlButtonTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlCanvasTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlCaptionTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlCiteTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlCodeTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlColTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlColgroupTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlDataTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlDatalistTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlDdTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlDelTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlDetailsTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlDfnTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlDialogTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlDivTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlDlTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlDtTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlEMTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlEmbedTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlFieldsetTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlFigcaptionTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlFigureTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlFooterTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlFormTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlH1TagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlH2TagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlH3TagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlH4TagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlH5TagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlH6TagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlHeaderTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlHrTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlITagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlIframeTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlImgTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlInputTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlInsTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlKbdTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlLabelTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlLegendTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlLiTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlMainTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlMapTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlMarkTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlMenuTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlMeterTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlNavTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlObjectTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlOlTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlOptgroupTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlOptionTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlOutputTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlPTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlParamTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlPictureTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlPreTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlProgressTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlQTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlRpTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlRtTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlRubyTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlSTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlSampTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlSectionTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlSelectTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlSmallTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlSourceTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlSpanTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlStrongTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlSubTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlSummaryTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlSupTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlTableTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlTbodyTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlTdTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlTemplateTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlTextareaTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlTfootTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlThTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlTheadTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlTimeTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlTrTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlTrackTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlUTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlUlTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlVarTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlVideoTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlWbrTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlATagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlAbbrTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlAddressTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlAreaTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlArticleTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlAsideTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlAudioTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlBTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlBdiTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlBdoTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlBlockquoteTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlBrTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlButtonTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlCanvasTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlCaptionTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlCiteTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlCodeTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlColTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlColgroupTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlDataTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlDatalistTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlDdTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlDelTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlDetailsTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlDfnTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlDialogTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlDivTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlDlTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlDtTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlEMTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlEmbedTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlFieldsetTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlFigcaptionTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlFigureTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlFooterTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlFormTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlH1TagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlH2TagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlH3TagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlH4TagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlH5TagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlH6TagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlHeaderTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlHrTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlITagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlIframeTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlImgTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlInputTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlInsTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlKbdTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlLabelTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlLegendTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlLiTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlMainTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlMapTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlMarkTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlMenuTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlMeterTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlNavTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlObjectTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlOlTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlOptgroupTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlOptionTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlOutputTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlPTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlParamTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlPictureTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlPreTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlProgressTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlQTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlRpTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlRtTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlRubyTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlSTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlSampTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlSectionTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlSelectTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlSmallTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlSourceTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlSpanTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlStrongTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlSubTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlSummaryTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlSupTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlTableTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlTbodyTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlTdTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlTemplateTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlTextareaTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlTfootTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlThTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlTheadTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlTimeTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlTrTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlTrackTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlUTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlUlTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlVarTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlVideoTagRenderer);
+            this.registerCoreComponent(HtmlTags_1.htmlWbrTagRenderer);
+        }
         this.registerActionFn(APICall_1.apiAction);
         this.registerActionFn(FileDownloadAction_1.downloadAction);
         this.registerActionFn(FileUploadAction_1.uploadAction);
@@ -519,12 +630,6 @@ class ComponentRegistry {
     get actionFunctions() {
         return this.actionFns;
     }
-    /**
-     * @returns The keys of all components registered in the component registry.
-     */
-    getRegisteredComponentKeys() {
-        return Array.from(this.pool.keys());
-    }
     /**
      * This method retrieves the registry entry of a component registered
      * with the specified key.
@@ -532,7 +637,22 @@ class ComponentRegistry {
      * @returns The component registry entry, if found; otherwise, undefined.
      */
     lookupComponentRenderer(componentName) {
-        return this.pool.get(componentName);
+        var _a, _b, _c, _d;
+        if (!componentName) {
+            return undefined;
+        }
+        // componentName without namespace, 1. core, 2. app, 3. XMLUIExtension
+        if (!componentName.includes(".")) {
+            return (((_a = this.pool.get(CORE_NS)) === null || _a === void 0 ? void 0 : _a.get(componentName)) ||
+                ((_b = this.pool.get(APP_NS)) === null || _b === void 0 ? void 0 : _b.get(componentName)) ||
+                ((_c = this.pool.get(EXTENSIONS_NS)) === null || _c === void 0 ? void 0 : _c.get(componentName)));
+        }
+        // order: componentName includes namespace, find in that pool
+        const nameInfo = this.namePool.get(componentName);
+        if (!nameInfo) {
+            return undefined;
+        }
+        return (_d = this.pool.get(nameInfo.namespace)) === null || _d === void 0 ? void 0 : _d.get(nameInfo.name);
     }
     /**
      * This method retrieves the registry entry of an action registered
@@ -579,9 +699,8 @@ class ComponentRegistry {
     getExtensionManager() {
         return this.extensionManager;
     }
-    ;
     // --- Registers a compound component using its definition and metadata
-    registerCompoundComponentRenderer({ compoundComponentDef, metadata }, ...namespaces) {
+    registerCompoundComponentRenderer({ compoundComponentDef, metadata }, namespace) {
         const component = {
             type: compoundComponentDef.name,
             renderer: (rendererContext) => {
@@ -590,7 +709,7 @@ class ComponentRegistry {
             isCompoundComponent: true,
             metadata,
         };
-        this.registerComponentRenderer(component, ...namespaces);
+        this.registerComponentRenderer(component, namespace);
     }
     // --- Registers an action function using its definition
     registerActionFn({ actionName: functionName, actionFn }) {

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

@@ -1,4 +1,15 @@
 "use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -17,6 +28,7 @@ const misc_1 = require("../../components-core/utils/misc");
 const InputAdornment_1 = require("../Input/InputAdornment");
 const ItemWithLabel_1 = require("../FormItem/ItemWithLabel");
 const react_popover_1 = require("@radix-ui/react-popover");
+const IconNative_1 = __importDefault(require("../Icon/IconNative"));
 exports.DatePickerModeValues = ["single", "range"];
 var WeekDays;
 (function (WeekDays) {
@@ -48,6 +60,22 @@ exports.defaultProps = {
     weekStartsOn: WeekDays.Sunday,
     disabledDates: [],
 };
+const Chevron = (_a) => {
+    var props = __rest(_a, []);
+    const { orientation = "left" } = props;
+    if (orientation === "up") {
+        return (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "chevronup", size: "sm" });
+    }
+    else if (orientation === "down") {
+        return (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "chevrondown", size: "sm" });
+    }
+    else if (orientation === "left") {
+        return (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "chevronleft", size: "lg" });
+    }
+    else if (orientation === "right") {
+        return (0, jsx_runtime_1.jsx)(IconNative_1.default, { name: "chevronright", size: "lg" });
+    }
+};
 exports.DatePicker = (0, react_2.forwardRef)(function DatePicker({ id, initialValue, value, mode = exports.defaultProps.mode, enabled = exports.defaultProps.enabled, placeholder, updateState = constants_1.noop, validationStatus = exports.defaultProps.validationStatus, onDidChange = constants_1.noop, onFocus = constants_1.noop, onBlur = constants_1.noop, dateFormat = exports.defaultProps.dateFormat, showWeekNumber = exports.defaultProps.showWeekNumber, weekStartsOn = exports.defaultProps.weekStartsOn, minValue, maxValue, disabledDates = exports.defaultProps.disabledDates, style, registerComponentApi, inline = exports.defaultProps.inline, startText, startIcon, endText, endIcon, label, labelPosition, labelWidth, labelBreak, readOnly = false, required, autoFocus = false, }, ref) {
     const _weekStartsOn = weekStartsOn >= 0 && weekStartsOn <= 6 ? weekStartsOn : WeekDays.Sunday;
     const [isButtonFocused, setIsButtonFocused] = (0, react_2.useState)(false);
@@ -147,12 +175,16 @@ exports.DatePicker = (0, react_2.forwardRef)(function DatePicker({ id, initialVa
             setOpen(false);
         }
     }, [onDidChange, updateState, mode, dateFormat]);
-    return ((0, jsx_runtime_1.jsx)(ItemWithLabel_1.ItemWithLabel, { id: inputId, labelPosition: labelPosition, label: label, labelWidth: labelWidth, labelBreak: labelBreak, required: required, enabled: enabled, onFocus: onFocus, onBlur: onBlur, style: style, ref: ref, children: inline ? ((0, jsx_runtime_1.jsx)("div", { className: DatePicker_module_scss_1.default.inlinePickerMenu, ref: (ref) => setReferenceElement(ref), children: (0, jsx_runtime_1.jsx)(react_day_picker_1.DayPicker, { id: inputId, required: undefined, captionLayout: "dropdown", fixedWeeks: true, startMonth: startDate, endMonth: endDate, disabled: disabled, weekStartsOn: _weekStartsOn, showWeekNumber: showWeekNumber, showOutsideDays: true, classNames: DatePicker_module_scss_1.default, mode: mode === "single" ? "single" : "range", selected: selected, onSelect: handleSelect, autoFocus: autoFocus, numberOfMonths: mode === "range" ? 2 : 1 }) })) : ((0, jsx_runtime_1.jsxs)(react_popover_1.Popover, { open: open, onOpenChange: setOpen, modal: false, children: [(0, jsx_runtime_1.jsxs)(react_popover_1.PopoverTrigger, { ref: setReferenceElement, id: inputId, "aria-haspopup": true, disabled: !enabled, style: style, "aria-expanded": open, className: (0, classnames_1.default)(DatePicker_module_scss_1.default.datePicker, {
+    return ((0, jsx_runtime_1.jsx)(ItemWithLabel_1.ItemWithLabel, { id: inputId, labelPosition: labelPosition, label: label, labelWidth: labelWidth, labelBreak: labelBreak, required: required, enabled: enabled, onFocus: onFocus, onBlur: onBlur, style: style, ref: ref, children: inline ? ((0, jsx_runtime_1.jsx)("div", { className: DatePicker_module_scss_1.default.inlinePickerMenu, ref: (ref) => setReferenceElement(ref), children: (0, jsx_runtime_1.jsx)(react_day_picker_1.DayPicker, { id: inputId, required: undefined, captionLayout: "dropdown", fixedWeeks: true, startMonth: startDate, endMonth: endDate, disabled: disabled, weekStartsOn: _weekStartsOn, showWeekNumber: showWeekNumber, showOutsideDays: true, classNames: DatePicker_module_scss_1.default, mode: mode === "single" ? "single" : "range", selected: selected, onSelect: handleSelect, autoFocus: autoFocus, numberOfMonths: mode === "range" ? 2 : 1, components: {
+                    Chevron,
+                } }) })) : ((0, jsx_runtime_1.jsxs)(react_popover_1.Popover, { open: open, onOpenChange: setOpen, modal: false, children: [(0, jsx_runtime_1.jsxs)(react_popover_1.PopoverTrigger, { ref: setReferenceElement, id: inputId, "aria-haspopup": true, disabled: !enabled, style: style, "aria-expanded": open, className: (0, classnames_1.default)(DatePicker_module_scss_1.default.datePicker, {
                         [DatePicker_module_scss_1.default.disabled]: !enabled,
                         [DatePicker_module_scss_1.default.error]: validationStatus === "error",
                         [DatePicker_module_scss_1.default.warning]: validationStatus === "warning",
                         [DatePicker_module_scss_1.default.valid]: validationStatus === "valid",
-                    }), autoFocus: autoFocus, onFocus: onFocus, onBlur: onBlur, children: [(0, jsx_runtime_1.jsx)(InputAdornment_1.Adornment, { text: startText, iconName: startIcon, className: DatePicker_module_scss_1.default.adornment }), (0, jsx_runtime_1.jsx)("div", { className: DatePicker_module_scss_1.default.datePickerValue, children: mode === "single" && selected ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, date_fns_1.format)(selected, dateFormat) })) : mode === "range" && typeof selected === "object" && selected.from ? (selected.to ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, date_fns_1.format)(selected.from, dateFormat), " - ", (0, date_fns_1.format)(selected.to, dateFormat)] })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, date_fns_1.format)(selected.from, dateFormat) }))) : placeholder ? ((0, jsx_runtime_1.jsx)("span", { className: DatePicker_module_scss_1.default.placeholder, placeholder: placeholder, children: placeholder })) : ((0, jsx_runtime_1.jsx)("span", { children: "\u00A0" })) }), (0, jsx_runtime_1.jsx)(InputAdornment_1.Adornment, { text: endText, iconName: endIcon, className: DatePicker_module_scss_1.default.adornment })] }), (0, jsx_runtime_1.jsx)(react_popover_1.PopoverPortal, { container: root, children: (0, jsx_runtime_1.jsx)(react_popover_1.PopoverContent, { role: "menu", align: "start", sideOffset: 5, className: DatePicker_module_scss_1.default.datePickerMenu, onFocus: handleOnMenuFocus, onBlur: handleOnMenuBlur, onInteractOutside: handleOnMenuBlur, children: (0, jsx_runtime_1.jsx)(react_day_picker_1.DayPicker, { required: undefined, animate: true, fixedWeeks: true, autoFocus: autoFocus, classNames: DatePicker_module_scss_1.default, captionLayout: "dropdown", startMonth: startDate, endMonth: endDate, disabled: disabled, weekStartsOn: _weekStartsOn, showWeekNumber: showWeekNumber, showOutsideDays: true, mode: mode === "single" ? "single" : "range", selected: selected, onSelect: handleSelect, numberOfMonths: mode === "range" ? 2 : 1 }) }) })] })) }));
+                    }), autoFocus: autoFocus, onFocus: onFocus, onBlur: onBlur, children: [(0, jsx_runtime_1.jsx)(InputAdornment_1.Adornment, { text: startText, iconName: startIcon, className: DatePicker_module_scss_1.default.adornment }), (0, jsx_runtime_1.jsx)("div", { className: DatePicker_module_scss_1.default.datePickerValue, children: mode === "single" && selected ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, date_fns_1.format)(selected, dateFormat) })) : mode === "range" && typeof selected === "object" && selected.from ? (selected.to ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, date_fns_1.format)(selected.from, dateFormat), " - ", (0, date_fns_1.format)(selected.to, dateFormat)] })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, date_fns_1.format)(selected.from, dateFormat) }))) : placeholder ? ((0, jsx_runtime_1.jsx)("span", { className: DatePicker_module_scss_1.default.placeholder, placeholder: placeholder, children: placeholder })) : ((0, jsx_runtime_1.jsx)("span", { children: "\u00A0" })) }), (0, jsx_runtime_1.jsx)(InputAdornment_1.Adornment, { text: endText, iconName: endIcon, className: DatePicker_module_scss_1.default.adornment })] }), (0, jsx_runtime_1.jsx)(react_popover_1.PopoverPortal, { container: root, children: (0, jsx_runtime_1.jsx)(react_popover_1.PopoverContent, { role: "menu", align: "start", sideOffset: 5, className: DatePicker_module_scss_1.default.datePickerMenu, onFocus: handleOnMenuFocus, onBlur: handleOnMenuBlur, onInteractOutside: handleOnMenuBlur, children: (0, jsx_runtime_1.jsx)(react_day_picker_1.DayPicker, { required: undefined, animate: true, fixedWeeks: true, autoFocus: autoFocus, classNames: DatePicker_module_scss_1.default, captionLayout: "dropdown", startMonth: startDate, endMonth: endDate, disabled: disabled, weekStartsOn: _weekStartsOn, showWeekNumber: showWeekNumber, showOutsideDays: true, mode: mode === "single" ? "single" : "range", selected: selected, onSelect: handleSelect, numberOfMonths: mode === "range" ? 2 : 1, components: {
+                                Chevron,
+                            } }) }) })] })) }));
 });
 const isoRegex = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}.\d{3}Z$/;
 const parseISODate = (dateString) => {

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

@@ -113,6 +113,15 @@ const TransformedMarkdown = ({ children, removeIndents, style, extractValue, cod
                     (0, utils_1.convertPlaygroundPatternToMarkdown)(nextPlayground[2]) +
                     resolvedMd.slice(nextPlayground[1]);
         }
+        while (true) {
+            const nextTreeDisplay = (0, utils_1.observeTreeDisplay)(resolvedMd);
+            if (!nextTreeDisplay)
+                break;
+            resolvedMd =
+                resolvedMd.slice(0, nextTreeDisplay[0]) +
+                    (0, utils_1.convertTreeDisplayToMarkdown)(nextTreeDisplay[2]) +
+                    resolvedMd.slice(nextTreeDisplay[1]);
+        }
         resolvedMd = (0, parse_binding_expr_1.parseBindingExpression)(resolvedMd, extractValue);
         return resolvedMd;
     }, [children, extractValue]);