xmlui 0.10.20 → 0.10.22

package/dist/scripts/package.json

@@ -1,6 +1,6 @@
 {
     "name": "xmlui",
-    "version": "0.10.20",
+    "version": "0.10.22",
     "sideEffects": false,
     "scripts": {
         "start-test-bed": "cd src/testing/infrastructure && xmlui start",
@@ -54,7 +54,7 @@
         "@types/color": "3.0.6",
         "@vitejs/plugin-react": "4.3.0",
         "adm-zip": "0.5.10",
-        "axios": "1.8.2",
+        "axios": "1.12.0",
         "chroma-js": "^3.1.2",
         "classnames": "2.5.1",
         "cmdk": "^1.0.4",
@@ -95,8 +95,6 @@
         "react-sticky-el": "^2.1.1",
         "react-textarea-autosize": "8.5.3",
         "react-time-picker": "^8.0.2",
-        "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",
@@ -106,7 +104,7 @@
         "turndown": "^7.2.0",
         "unist-util-visit": "^5.0.0",
         "use-context-selector": "1.4.1",
-        "virtua": "0.40.0",
+        "virtua": "^0.40.0",
         "vite-plugin-lib-inject-css": "1.3.0",
         "vite-plugin-svgr": "4.2.0",
         "vscode-languageserver": "^9.0.1",
@@ -131,7 +129,6 @@
         "@types/react-datepicker": "4.19.5",
         "@types/react-dom": "18.2.8",
         "@types/react-measure": "^2.0.8",
-        "@types/react-window": "1.8.8",
         "@types/yargs": "17.0.31",
         "@typescript-eslint/eslint-plugin": "8.15.0",
         "@typescript-eslint/parser": "8.15.0",

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

@@ -121,7 +121,7 @@ exports.AppMd = (0, metadata_helpers_1.createMetadata)({
         },
     },
 });
-function AppNode({ node, extractValue, renderChild, className, lookupEventHandler }) {
+function AppNode({ node, extractValue, renderChild, className, lookupEventHandler, registerComponentApi }) {
     // --- Use ref to track if we've already processed the navigation to avoid duplicates in strict mode
     const processedNavRef = (0, react_1.useRef)(false);
     // --- Memoize the layout type to avoid unnecessary re-extraction
@@ -330,7 +330,7 @@ function AppNode({ node, extractValue, renderChild, className, lookupEventHandle
     const renderedFooter = (0, react_1.useMemo)(() => renderChild(Footer), [Footer, renderChild]);
     const renderedNavPanel = (0, react_1.useMemo)(() => renderChild(NavPanel), [NavPanel, renderChild]);
     const renderedContent = (0, react_1.useMemo)(() => renderChild(restChildren), [restChildren, renderChild]);
-    return ((0, jsx_runtime_1.jsxs)(AppNative_1.App, Object.assign({}, appProps, { header: renderedHeader, footer: renderedFooter, navPanel: renderedNavPanel, navPanelDef: NavPanel, logoContentDef: node.props.logoTemplate, renderChild: renderChild, children: [renderedContent, (0, jsx_runtime_1.jsx)(SearchIndexCollector, { Pages: Pages, renderChild: renderChild })] })));
+    return ((0, jsx_runtime_1.jsxs)(AppNative_1.App, Object.assign({}, appProps, { header: renderedHeader, footer: renderedFooter, navPanel: renderedNavPanel, navPanelDef: NavPanel, logoContentDef: node.props.logoTemplate, renderChild: renderChild, registerComponentApi: registerComponentApi, children: [renderedContent, (0, jsx_runtime_1.jsx)(SearchIndexCollector, { Pages: Pages, renderChild: renderChild })] })));
 }
 const HIDDEN_STYLE = {
     position: "absolute",
@@ -457,8 +457,8 @@ function PageIndexer({ Page, renderChild, onIndexed, }) {
     // console.log(`PageIndexer (${pageUrl}): Rendering content for ref population.`);
     return (0, jsx_runtime_1.jsx)("div", { ref: contentRef, children: renderChild(Page.children) });
 }
-exports.appRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.AppMd, ({ node, extractValue, renderChild, className, lookupEventHandler }) => {
-    return ((0, jsx_runtime_1.jsx)(AppNode, { node: node, renderChild: renderChild, extractValue: extractValue, className: className, lookupEventHandler: lookupEventHandler }));
+exports.appRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.AppMd, ({ node, extractValue, renderChild, className, lookupEventHandler, registerComponentApi }) => {
+    return ((0, jsx_runtime_1.jsx)(AppNode, { node: node, renderChild: renderChild, extractValue: extractValue, className: className, lookupEventHandler: lookupEventHandler, registerComponentApi: registerComponentApi }));
 });
 // --- Process the entire navigation tree recursively and build hierarchy
 function processNavItems(items, parentHierarchy, extractValue) {

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

@@ -44,7 +44,7 @@ exports.defaultProps = {
     onMessageReceived: lodash_es_1.noop,
 };
 function App(_a) {
-    var { children, style = constants_1.EMPTY_OBJECT, layout, loggedInUser, scrollWholePage = exports.defaultProps.scrollWholePage, noScrollbarGutters = exports.defaultProps.noScrollbarGutters, onReady = exports.defaultProps.onReady, onMessageReceived = exports.defaultProps.onMessageReceived, header, navPanel, footer, navPanelDef, logoContentDef, logo, logoDark, logoLight, defaultTone, defaultTheme, autoDetectTone = exports.defaultProps.autoDetectTone, renderChild, name, className, applyDefaultContentPadding } = _a, rest = __rest(_a, ["children", "style", "layout", "loggedInUser", "scrollWholePage", "noScrollbarGutters", "onReady", "onMessageReceived", "header", "navPanel", "footer", "navPanelDef", "logoContentDef", "logo", "logoDark", "logoLight", "defaultTone", "defaultTheme", "autoDetectTone", "renderChild", "name", "className", "applyDefaultContentPadding"]);
+    var { children, style = constants_1.EMPTY_OBJECT, layout, loggedInUser, scrollWholePage = exports.defaultProps.scrollWholePage, noScrollbarGutters = exports.defaultProps.noScrollbarGutters, onReady = exports.defaultProps.onReady, onMessageReceived = exports.defaultProps.onMessageReceived, header, navPanel, footer, navPanelDef, logoContentDef, logo, logoDark, logoLight, defaultTone, defaultTheme, autoDetectTone = exports.defaultProps.autoDetectTone, renderChild, name, className, applyDefaultContentPadding, registerComponentApi } = _a, rest = __rest(_a, ["children", "style", "layout", "loggedInUser", "scrollWholePage", "noScrollbarGutters", "onReady", "onMessageReceived", "header", "navPanel", "footer", "navPanelDef", "logoContentDef", "logo", "logoDark", "logoLight", "defaultTone", "defaultTheme", "autoDetectTone", "renderChild", "name", "className", "applyDefaultContentPadding", "registerComponentApi"]);
     const { getThemeVar } = (0, ThemeContext_1.useTheme)();
     const { setActiveThemeTone, setActiveThemeId, themes } = (0, ThemeContext_1.useThemes)();
     const mounted = (0, react_1.useRef)(false);

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

@@ -74,6 +74,7 @@ const FileDownloadAction_1 = require("../components-core/action/FileDownloadActi
 const FileUploadAction_1 = require("../components-core/action/FileUploadAction");
 const NavigateAction_1 = require("../components-core/action/NavigateAction");
 const TimedAction_1 = require("../components-core/action/TimedAction");
+const CoreBehaviors_1 = require("../components-core/behaviors/CoreBehaviors");
 const ApiLoader_1 = require("../components-core/loader/ApiLoader");
 const ExternalDataLoader_1 = require("../components-core/loader/ExternalDataLoader");
 const MockLoaderRenderer_1 = require("../components-core/loader/MockLoaderRenderer");
@@ -149,7 +150,7 @@ class ComponentRegistry {
      * about component registrations
      */
     constructor(contributes = {}, extensionManager) {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         this.extensionManager = extensionManager;
         // --- The pool of available components
         this.pool = new Map(); // namespace -> name -> ComponentRegistryEntry;
@@ -162,6 +163,8 @@ class ComponentRegistry {
         this.actionFns = new Map();
         // --- The pool of available loader renderers
         this.loaders = new Map();
+        // --- The pool of available behaviors
+        this.behaviors = [];
         this.extensionRegistered = (extension) => {
             var _a;
             (_a = extension.components) === null || _a === void 0 ? void 0 : _a.forEach((c) => {
@@ -656,7 +659,14 @@ class ComponentRegistry {
         this.registerLoaderRenderer(ExternalDataLoader_1.externalDataLoaderRenderer);
         this.registerLoaderRenderer(MockLoaderRenderer_1.mockLoaderRenderer);
         this.registerLoaderRenderer(DataLoader_1.dataLoaderRenderer);
-        (_c = this.extensionManager) === null || _c === void 0 ? void 0 : _c.subscribeToRegistrations(this.extensionRegistered);
+        this.registerBehavior(CoreBehaviors_1.tooltipBehavior);
+        this.registerBehavior(CoreBehaviors_1.animationBehavior);
+        this.registerBehavior(CoreBehaviors_1.labelBehavior);
+        // Register external behaviors from contributes
+        (_c = contributes.behaviors) === null || _c === void 0 ? void 0 : _c.forEach((behavior) => {
+            this.registerBehavior(behavior);
+        });
+        (_d = this.extensionManager) === null || _d === void 0 ? void 0 : _d.subscribeToRegistrations(this.extensionRegistered);
     }
     /**
      * All theme variables used by the registered components.
@@ -761,6 +771,24 @@ class ComponentRegistry {
     registerActionFn({ actionName: functionName, actionFn }) {
         this.actionFns.set(functionName, actionFn);
     }
+    // --- Registers a behavior
+    registerBehavior(behavior, location = "after", position) {
+        // If position is specified, insert relative to that behavior
+        if (position) {
+            const targetIndex = this.behaviors.findIndex(b => b.name === position);
+            if (targetIndex !== -1) {
+                const insertIndex = location === "before" ? targetIndex : targetIndex + 1;
+                this.behaviors.splice(insertIndex, 0, behavior);
+                return;
+            }
+        }
+        // Default: append to the end
+        this.behaviors.push(behavior);
+    }
+    // --- Returns all registered behaviors
+    getBehaviors() {
+        return this.behaviors;
+    }
 }
 exports.ComponentRegistry = ComponentRegistry;
 /**

package/dist/scripts/src/components/DateInput/DateInputNative.js

@@ -419,7 +419,6 @@ exports.DateInput = (0, react_2.forwardRef)(function DateInputNative(_a, ref) {
         }
     }, [day, month, year]);
     // Component API registration
-    (0, react_2.useImperativeHandle)(ref, () => dateInputRef.current);
     (0, react_2.useEffect)(() => {
         if (registerComponentApi) {
             registerComponentApi({

package/dist/scripts/src/components/Form/FormNative.js

@@ -205,7 +205,6 @@ function cleanUpSubject(subject) {
 const Form = (0, react_2.forwardRef)(function (_a, ref) {
     var { formState, dispatch, initialValue = constants_1.EMPTY_OBJECT, children, style, className, enabled = true, cancelLabel = exports.defaultProps.cancelLabel, saveLabel = exports.defaultProps.saveLabel, saveInProgressLabel = exports.defaultProps.saveInProgressLabel, swapCancelAndSave, onSubmit, onCancel, onReset, onSuccess, buttonRow, id, registerComponentApi, itemLabelBreak = exports.defaultProps.itemLabelBreak, itemLabelWidth, itemLabelPosition = exports.defaultProps.itemLabelPosition, keepModalOpenOnSubmit = exports.defaultProps.keepModalOpenOnSubmit, hideButtonRowUntilDirty } = _a, rest = __rest(_a, ["formState", "dispatch", "initialValue", "children", "style", "className", "enabled", "cancelLabel", "saveLabel", "saveInProgressLabel", "swapCancelAndSave", "onSubmit", "onCancel", "onReset", "onSuccess", "buttonRow", "id", "registerComponentApi", "itemLabelBreak", "itemLabelWidth", "itemLabelPosition", "keepModalOpenOnSubmit", "hideButtonRowUntilDirty"]);
     const formRef = (0, react_2.useRef)(null);
-    (0, react_2.useImperativeHandle)(ref, () => formRef.current);
     const [confirmSubmitModalVisible, setConfirmSubmitModalVisible] = (0, react_2.useState)(false);
     const requestModalFormClose = (0, ModalVisibilityContext_1.useModalFormClose)();
     const isEnabled = enabled && !formState.submitInProgress;

package/dist/scripts/src/components/IFrame/IFrameNative.js

@@ -22,8 +22,6 @@ const IFrame_module_scss_1 = __importDefault(require("./IFrame.module.scss"));
 exports.IFrame = (0, react_1.memo)((0, react_1.forwardRef)(function IFrame(_a, ref) {
     var { src, srcdoc, allow, name, referrerPolicy, sandbox, style, className, onLoad, registerComponentApi } = _a, rest = __rest(_a, ["src", "srcdoc", "allow", "name", "referrerPolicy", "sandbox", "style", "className", "onLoad", "registerComponentApi"]);
     const iframeRef = (0, react_1.useRef)(null);
-    // Expose the iframe element to parent via ref
-    (0, react_1.useImperativeHandle)(ref, () => iframeRef.current, []);
     // Register component APIs
     (0, react_1.useEffect)(() => {
         registerComponentApi === null || registerComponentApi === void 0 ? void 0 : registerComponentApi({

package/dist/scripts/src/components/Tabs/TabContext.js

@@ -13,32 +13,41 @@ exports.TabContext = (0, react_1.createContext)({
     register: (tabItem) => { },
     unRegister: (innerId) => { },
     activeTabId: "",
+    getTabItems: () => [],
 });
 function useTabContextValue() {
     const [tabItems, setTabItems] = (0, react_1.useState)(constants_1.EMPTY_ARRAY);
+    const tabItemsRef = (0, react_1.useRef)(constants_1.EMPTY_ARRAY);
+    tabItemsRef.current = tabItems;
     const [activeTabId, setActiveTabId] = (0, react_1.useState)("");
+    const register = (0, react_1.useCallback)((tabItem) => {
+        setTabItems((0, immer_1.default)((draft) => {
+            const existing = draft.findIndex((col) => col.innerId === tabItem.innerId);
+            if (existing < 0) {
+                draft.push(tabItem);
+            }
+            else {
+                draft[existing] = tabItem;
+            }
+        }));
+    }, []);
+    const unRegister = (0, react_1.useCallback)((innerId) => {
+        setTabItems((0, immer_1.default)((draft) => {
+            return draft.filter((col) => col.innerId !== innerId);
+        }));
+    }, []);
+    const getTabItems = (0, react_1.useCallback)(() => {
+        return tabItemsRef.current;
+    }, []);
     const tabContextValue = (0, react_1.useMemo)(() => {
         return {
-            register: (tabItem) => {
-                setTabItems((0, immer_1.default)((draft) => {
-                    const existing = draft.findIndex((col) => col.innerId === tabItem.innerId);
-                    if (existing < 0) {
-                        draft.push(tabItem);
-                    }
-                    else {
-                        draft[existing] = tabItem;
-                    }
-                }));
-            },
-            unRegister: (innerId) => {
-                setTabItems((0, immer_1.default)((draft) => {
-                    return draft.filter((col) => col.innerId !== innerId);
-                }));
-            },
+            register,
+            unRegister,
             activeTabId,
             setActiveTabId,
+            getTabItems,
         };
-    }, [activeTabId]);
+    }, [register, unRegister, activeTabId, getTabItems]);
     return {
         tabItems,
         tabContextValue,

package/dist/scripts/src/components/Tabs/TabItemNative.js

@@ -21,9 +21,10 @@ const react_tabs_1 = require("@radix-ui/react-tabs");
 const Tabs_module_scss_1 = __importDefault(require("../Tabs/Tabs.module.scss"));
 const TabContext_1 = require("./TabContext");
 exports.TabItemComponent = (0, react_2.forwardRef)(function TabItemComponent(_a, forwardedRef) {
+    var _b;
     var { children, label, headerRenderer, style, id, activated } = _a, rest = __rest(_a, ["children", "label", "headerRenderer", "style", "id", "activated"]);
     const innerId = (0, react_2.useId)();
-    const { register, unRegister, activeTabId } = (0, TabContext_1.useTabContext)();
+    const { register, unRegister, activeTabId, getTabItems } = (0, TabContext_1.useTabContext)();
     (0, react_2.useEffect)(() => {
         register({
             label,
@@ -44,5 +45,9 @@ exports.TabItemComponent = (0, react_2.forwardRef)(function TabItemComponent(_a,
     }, [activeTabId, innerId, activated]);
     if (activeTabId !== innerId)
         return null;
-    return ((0, react_1.createElement)(react_tabs_1.Content, Object.assign({}, rest, { key: innerId, value: innerId, className: Tabs_module_scss_1.default.tabsContent, ref: forwardedRef, style: style }), children));
+    // Find the index of this tab for ordering
+    const tabItems = getTabItems();
+    const tabIndex = (_b = tabItems === null || tabItems === void 0 ? void 0 : tabItems.findIndex(item => item.innerId === innerId)) !== null && _b !== void 0 ? _b : 0;
+    const contentOrder = tabIndex * 2 + 1;
+    return ((0, react_1.createElement)(react_tabs_1.Content, Object.assign({}, rest, { key: innerId, value: innerId, className: Tabs_module_scss_1.default.tabsContent, ref: forwardedRef, style: Object.assign(Object.assign({}, style), { order: contentOrder }) }), children));
 });

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

@@ -24,11 +24,30 @@ exports.TabsMd = (0, metadata_helpers_1.createMetadata)({
         orientation: {
             description: `This property indicates the orientation of the component. In horizontal orientation, ` +
                 `the tab sections are laid out on the left side of the content panel, while in vertical ` +
-                `orientation, the buttons are at the top.`,
+                `orientation, the buttons are at the top. Note: This property is ignored when ` +
+                `accordionView is set to true.`,
             availableValues: ["horizontal", "vertical"],
             defaultValue: TabsNative_1.defaultProps.orientation,
             valueType: "string",
         },
+        tabAlignment: {
+            description: `This property controls how tabs are aligned within the tab header container in ` +
+                `horizontal orientation. Use 'start' to align tabs to the left, 'end' to align to the ` +
+                `right, 'center' to center the tabs, and 'stretch' to make tabs fill the full width ` +
+                `of the header. Note: This property is ignored when orientation is set to 'vertical' ` +
+                `or when accordionView is enabled.`,
+            availableValues: ["start", "end", "center", "stretch"],
+            defaultValue: TabsNative_1.defaultProps.tabAlignment,
+            valueType: "string",
+        },
+        accordionView: {
+            description: `When enabled, displays tabs in an accordion-like view where tab headers are stacked ` +
+                `vertically and only the active tab's content is visible. Each tab header remains visible ` +
+                `and clicking a header opens its content while closing others. When enabled, the ` +
+                `orientation property is ignored.`,
+            defaultValue: TabsNative_1.defaultProps.accordionView,
+            valueType: "boolean",
+        },
         headerTemplate: Object.assign({}, (0, metadata_helpers_1.dComponent)(`This property declares the template for the clickable tab area.`)),
     },
     events: {
@@ -67,10 +86,10 @@ exports.TabsMd = (0, metadata_helpers_1.createMetadata)({
     },
 });
 exports.tabsComponentRenderer = (0, renderers_1.createComponentRenderer)(COMP, exports.TabsMd, ({ extractValue, node, renderChild, className, registerComponentApi, lookupEventHandler }) => {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e;
     return ((0, jsx_runtime_1.jsx)(TabsNative_1.Tabs, { id: node === null || node === void 0 ? void 0 : node.uid, className: className, headerRenderer: ((_a = node === null || node === void 0 ? void 0 : node.props) === null || _a === void 0 ? void 0 : _a.headerTemplate)
             ? (item) => ((0, jsx_runtime_1.jsx)(container_helpers_1.MemoizedItem, { node: node.props.headerTemplate, itemKey: "$header", contextVars: {
                     $header: item,
                 }, renderChild: renderChild }))
-            : undefined, activeTab: extractValue((_b = node.props) === null || _b === void 0 ? void 0 : _b.activeTab), orientation: extractValue((_c = node.props) === null || _c === void 0 ? void 0 : _c.orientation), onDidChange: lookupEventHandler("didChange"), registerComponentApi: registerComponentApi, children: renderChild(node.children) }));
+            : undefined, activeTab: extractValue((_b = node.props) === null || _b === void 0 ? void 0 : _b.activeTab), orientation: extractValue((_c = node.props) === null || _c === void 0 ? void 0 : _c.orientation), tabAlignment: extractValue((_d = node.props) === null || _d === void 0 ? void 0 : _d.tabAlignment), accordionView: extractValue((_e = node.props) === null || _e === void 0 ? void 0 : _e.accordionView), onDidChange: lookupEventHandler("didChange"), registerComponentApi: registerComponentApi, children: renderChild(node.children) }));
 });