@xh/hoist 79.0.0-SNAPSHOT.1766020485210 → 79.0.0-SNAPSHOT.1766094533168

package/desktop/cmp/tab/impl/TabContainer.ts

@@ -6,20 +6,29 @@
  */
 import {div, hbox, placeholder, vbox} from '@xh/hoist/cmp/layout';
 import {TabContainerModel, TabContainerProps} from '@xh/hoist/cmp/tab';
+import {TabSwitcherProps} from '@xh/hoist/cmp/tab/Types';
 import {getTestId} from '@xh/hoist/utils/js';
 import {getLayoutProps} from '@xh/hoist/utils/react';
-import {isEmpty} from 'lodash';
+import {isEmpty, isNull, isObject} from 'lodash';
 import '../Tabs.scss';
 import {tabSwitcher} from '../TabSwitcher';
+import {dynamicTabSwitcher} from '../dynamic/DynamicTabSwitcher';
 import {tab} from './Tab';
 
 /**
  * Desktop implementation of TabContainer.
  * @internal
  */
-export function tabContainerImpl({model, className, testId, ...props}: TabContainerProps) {
-    const layoutProps = getLayoutProps(props),
-        vertical = ['left', 'right'].includes(model.switcher?.orientation),
+export function tabContainerImpl({
+    model,
+    childContainerProps,
+    className,
+    testId,
+    ...props
+}: TabContainerProps) {
+    const switcherProps = getSwitcherProps(props),
+        layoutProps = getLayoutProps(props),
+        vertical = ['left', 'right'].includes(switcherProps?.orientation),
         container = vertical ? hbox : vbox;
 
     // Default flex = 'auto' if no dimensions / flex specified.
@@ -31,21 +40,33 @@ export function tabContainerImpl({model, className, testId, ...props}: TabContai
         ...layoutProps,
         className,
         testId,
-        item: getChildren(model, testId)
+        item: getChildren(model, switcherProps, testId, childContainerProps)
     });
 }
 
-function getChildren(model: TabContainerModel, testId: string) {
+function getSwitcherProps(tabContainerProps: TabContainerProps): TabSwitcherProps {
+    const {switcher} = tabContainerProps;
+    if (isObject(switcher)) return switcher;
+    return switcher === false || isNull(switcher) ? null : {orientation: 'top'};
+}
+
+function getChildren(
+    model: TabContainerModel,
+    switcher: TabSwitcherProps,
+    testId: string,
+    childContainerProps: TabContainerProps['childContainerProps']
+) {
     const {tabs} = model;
     if (isEmpty(tabs)) {
         return div({className: 'xh-tab-wrapper', item: placeholder(model.emptyText)});
     }
 
-    const {activeTabId, switcher} = model,
+    const {activeTabId, dynamicTabSwitcherModel} = model,
         switcherBefore = ['left', 'top'].includes(switcher?.orientation),
         switcherAfter = ['right', 'bottom'].includes(switcher?.orientation),
+        switcherImpl = dynamicTabSwitcherModel ? dynamicTabSwitcher : tabSwitcher,
         switcherCmp = switcher
-            ? tabSwitcher({key: 'switcher', testId: getTestId(testId, 'switcher'), ...switcher})
+            ? switcherImpl({key: 'switcher', testId: getTestId(testId, 'switcher'), ...switcher})
             : null;
 
     return [
@@ -58,7 +79,11 @@ function getChildren(model: TabContainerModel, testId: string) {
                 className: 'xh-tab-wrapper',
                 style,
                 key: tabId,
-                item: tab({model: tabModel, testId: getTestId(testId, tabId)})
+                item: tab({
+                    childContainerProps,
+                    model: tabModel,
+                    testId: getTestId(testId, tabId)
+                })
             });
         }),
         switcherAfter ? switcherCmp : null

package/desktop/cmp/tab/impl/TabContextMenuItems.ts

@@ -0,0 +1,21 @@
+/*
+ * This file belongs to Hoist, an application development toolkit
+ * developed by Extremely Heavy Industries (www.xh.io | info@xh.io)
+ *
+ * Copyright © 2025 Extremely Heavy Industries Inc.
+ */
+import {TabSwitcherMenuContext} from '@xh/hoist/cmp/tab';
+import {isMenuItem, type MenuItemLike, MenuToken} from '@xh/hoist/core';
+
+/** @internal */
+export function getContextMenuItem(
+    item: MenuItemLike<MenuToken, TabSwitcherMenuContext>,
+    context: TabSwitcherMenuContext
+): MenuItemLike<MenuToken, TabSwitcherMenuContext> {
+    if (!isMenuItem(item)) return item;
+    const ret = {...item};
+    if (item.actionFn) ret.actionFn = e => item.actionFn(e, context);
+    if (item.prepareFn) ret.prepareFn = e => item.prepareFn(e, context);
+    if (item.items) ret.items = item.items.map(it => this.buildMenuItem(it, context));
+    return ret;
+}

package/desktop/cmp/tab/index.ts

@@ -5,3 +5,4 @@
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
 export * from './TabSwitcher';
+export * from './dynamic/DynamicTabSwitcher';

package/dynamics/desktop.ts

@@ -29,6 +29,7 @@ export let tabContainerImpl = null;
 export let useContextMenu = null;
 export let errorMessageImpl = null;
 export let maskImpl = null;
+export let DynamicTabSwitcherModel = null;
 
 /**
  * Provide implementations of functions and classes exported in this file.
@@ -50,4 +51,5 @@ export function installDesktopImpls(impls) {
     useContextMenu = impls.useContextMenu;
     errorMessageImpl = impls.errorMessageImpl;
     maskImpl = impls.maskImpl;
+    DynamicTabSwitcherModel = impls.DynamicTabSwitcherModel;
 }

package/mobile/cmp/tab/impl/TabContainer.ts

@@ -10,23 +10,24 @@ import {page, tab as onsenTab, tabbar as onsenTabbar} from '@xh/hoist/kit/onsen'
 import '@xh/hoist/mobile/register';
 import {debounced, throwIf} from '@xh/hoist/utils/js';
 import classNames from 'classnames';
-import {isEmpty} from 'lodash';
+import {isEmpty, isNull, isObject} from 'lodash';
 import {tab} from './Tab';
 import './Tabs.scss';
-import {TabContainerProps, TabModel} from '@xh/hoist/cmp/tab';
+import {TabContainerProps, TabModel, TabSwitcherProps} from '@xh/hoist/cmp/tab';
 
 /**
  * Mobile Implementation of TabContainer.
  *
  * @internal
  */
-export function tabContainerImpl({model, className}: TabContainerProps) {
-    const {activeTab, switcher} = model,
+export function tabContainerImpl({model, className, ...props}: TabContainerProps) {
+    const switcherProps = getSwitcherProps(props),
+        {activeTab} = model,
         tabs = model.tabs.filter(it => !it.excludeFromSwitcher),
         impl = useLocalModel(TabContainerLocalModel);
 
     throwIf(
-        switcher && !['top', 'bottom'].includes(switcher.orientation),
+        switcherProps && !['top', 'bottom'].includes(switcherProps.orientation),
         "Mobile TabContainer tab switcher orientation must be 'top', or 'bottom'"
     );
 
@@ -38,19 +39,25 @@ export function tabContainerImpl({model, className}: TabContainerProps) {
     }
 
     return onsenTabbar({
-        className: classNames(className, `xh-tab-container--${switcher?.orientation}`),
-        position: switcher?.orientation,
+        className: classNames(className, `xh-tab-container--${switcherProps?.orientation}`),
+        position: switcherProps?.orientation,
         activeIndex: activeTab ? tabs.indexOf(activeTab) : 0,
         renderTabs: (idx, ref) => {
             impl.setSwiper(ref);
             return tabs.map(renderTabModel);
         },
         onPreChange: e => model.activateTab(tabs[e.index].id),
-        hideTabs: !switcher,
-        ...switcher
+        hideTabs: !switcherProps,
+        ...switcherProps
     });
 }
 
+function getSwitcherProps(tabContainerProps: TabContainerProps): TabSwitcherProps {
+    const {switcher} = tabContainerProps;
+    if (isObject(switcher)) return switcher;
+    return switcher === false || isNull(switcher) ? null : {orientation: 'bottom'};
+}
+
 function renderTabModel(tabModel: TabModel) {
     const {id, title, icon} = tabModel;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xh/hoist",
-  "version": "79.0.0-SNAPSHOT.1766020485210",
+  "version": "79.0.0-SNAPSHOT.1766094533168",
   "description": "Hoist add-on for building and deploying React Applications.",
   "repository": "github:xh/hoist-react",
   "homepage": "https://xh.io",