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

package/cmp/tab/TabContainerModel.ts

@@ -4,10 +4,14 @@
  *
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
+import {
+    TabSwitcherConfig,
+    IDynamicTabSwitcherModel,
+    TabContainerModelPersistOptions
+} from '@xh/hoist/cmp/tab/Types';
 import {
     HoistModel,
     managed,
-    Persistable,
     PersistableState,
     PersistenceProvider,
     PersistOptions,
@@ -16,14 +20,14 @@ import {
     RenderMode,
     XH
 } from '@xh/hoist/core';
+import {DynamicTabSwitcherModel} from '@xh/hoist/desktop/cmp/tab/dynamic/DynamicTabSwitcherModel';
 import {action, makeObservable, observable} from '@xh/hoist/mobx';
 import {wait} from '@xh/hoist/promise';
 import {isOmitted} from '@xh/hoist/utils/impl';
 import {ensureUniqueBy, throwIf} from '@xh/hoist/utils/js';
-import {difference, find, findLast, isString, without} from 'lodash';
+import {difference, find, findLast, isObject, isString, without} from 'lodash';
 import {ReactNode} from 'react';
 import {TabConfig, TabModel} from './TabModel';
-import {TabSwitcherProps} from './TabSwitcherProps';
 
 export interface TabContainerConfig {
     /** Tabs to be displayed. */
@@ -42,11 +46,10 @@ export interface TabContainerConfig {
     route?: string;
 
     /**
-     * Indicates whether to include a default switcher docked within this component. Specify as a
-     * boolean or an object containing props for a TabSwitcher component. Set to false to not
-     * include a switcher. Defaults to true.
+     * Specification for type of switcher. Specify `dynamic` or config for user-configurable tabs.
+     * Default `{mode: 'static'}` for simple, static switcher.
      */
-    switcher?: boolean | TabSwitcherProps;
+    switcher?: TabSwitcherConfig;
 
     /**
      * True to enable activity tracking of tab views (default false).  Viewing of each tab will
@@ -87,7 +90,7 @@ export interface TabContainerConfig {
  *
  * Note: Routing is currently enabled for desktop applications only.
  */
-export class TabContainerModel extends HoistModel implements Persistable<{activeTabId: string}> {
+export class TabContainerModel extends HoistModel {
     declare config: TabContainerConfig;
 
     @managed
@@ -97,42 +100,47 @@ export class TabContainerModel extends HoistModel implements Persistable<{active
     @observable
     activeTabId: string;
 
+    depth: number; // Depth in hierarchy of nested TabContainerModels
     route: string;
     defaultTabId: string;
-    switcher: TabSwitcherProps;
     track: boolean;
     renderMode: RenderMode;
     refreshMode: RefreshMode;
     emptyText: ReactNode;
+    switcherConfig: TabSwitcherConfig;
 
     @managed
     refreshContextModel: RefreshContextModel;
 
+    @managed
+    dynamicTabSwitcherModel: IDynamicTabSwitcherModel;
+
     protected lastActiveTabId: string;
 
-    constructor({
-        tabs = [],
-        defaultTabId = null,
-        route = null,
-        switcher = true,
-        track = false,
-        renderMode = 'lazy',
-        refreshMode = 'onShowLazy',
-        persistWith,
-        emptyText = 'No tabs to display.',
-        xhImpl = false
-    }: TabContainerConfig) {
+    /**
+     * @param config - TabContainer configuration.
+     * @param [depth] - Depth in hierarchy of nested TabContainerModels. Not for application use.
+     */
+    constructor(
+        {
+            tabs = [],
+            defaultTabId = null,
+            route = null,
+            track = false,
+            renderMode = 'lazy',
+            refreshMode = 'onShowLazy',
+            persistWith,
+            emptyText = 'No tabs to display.',
+            xhImpl = false,
+            switcher = {mode: 'static'}
+        }: TabContainerConfig,
+        depth = 0
+    ) {
         super();
         makeObservable(this);
         this.xhImpl = xhImpl;
 
-        throwIf(route && persistWith, '"persistWith" and "route" cannot both be specified.');
-
-        // Create default switcher props
-        if (switcher === true) switcher = {orientation: XH.isMobileApp ? 'bottom' : 'top'};
-        if (switcher === false) switcher = null;
-
-        this.switcher = switcher as TabSwitcherProps;
+        this.depth = depth;
         this.renderMode = renderMode;
         this.refreshMode = refreshMode;
         this.defaultTabId = defaultTabId;
@@ -142,6 +150,8 @@ export class TabContainerModel extends HoistModel implements Persistable<{active
         this.setTabs(tabs);
         this.refreshContextModel = new RefreshContextModel();
         this.refreshContextModel.xhImpl = xhImpl;
+        this.switcherConfig = switcher;
+        this.dynamicTabSwitcherModel = this.parseSwitcher(switcher);
 
         if (route) {
             if (XH.isMobileApp) {
@@ -156,17 +166,10 @@ export class TabContainerModel extends HoistModel implements Persistable<{active
             wait().then(() => this.syncWithRouter());
 
             this.forwardRouterToTab(this.activeTabId);
-        } else if (persistWith) {
-            ((this.persistWith = {
-                path: 'tabContainer',
-                ...persistWith
-            }),
-                PersistenceProvider.create({
-                    persistOptions: this.persistWith,
-                    target: this
-                }));
         }
 
+        if (persistWith) this.initPersist(persistWith);
+
         if (track) {
             this.addReaction({
                 track: () => this.activeTab,
@@ -269,16 +272,18 @@ export class TabContainerModel extends HoistModel implements Persistable<{active
         return this.findTab(this.activeTabId);
     }
 
-    /** The tab immediately before the active tab in the model's tab list. */
+    /** The visitable tab immediately before the active tab in the model's tab list. */
     get prevTab(): TabModel {
-        const activeTabIdx = this.tabs.indexOf(this.activeTab);
-        return activeTabIdx > 0 ? this.tabs[activeTabIdx - 1] : null;
+        const tabs = this.tabs.filter(t => !t.disabled || t === this.activeTab),
+            activeTabIdx = tabs.indexOf(this.activeTab);
+        return activeTabIdx > 0 ? tabs[activeTabIdx - 1] : null;
     }
 
-    /** The tab immediately after the active tab in the model's tab list. */
+    /** The visitable tab immediately after the active tab in the model's tab list. */
     get nextTab(): TabModel {
-        const activeTabIdx = this.tabs.indexOf(this.activeTab);
-        return activeTabIdx < this.tabs.length - 1 ? this.tabs[activeTabIdx + 1] : null;
+        const tabs = this.tabs.filter(t => !t.disabled || t === this.activeTab),
+            activeTabIdx = tabs.indexOf(this.activeTab);
+        return activeTabIdx < tabs.length - 1 ? tabs[activeTabIdx + 1] : null;
     }
 
     /**
@@ -330,17 +335,6 @@ export class TabContainerModel extends HoistModel implements Persistable<{active
         if (target) this.activateTab(target);
     }
 
-    //-------------------------
-    // Persistable Interface
-    //-------------------------
-    getPersistableState(): PersistableState<{activeTabId: string}> {
-        return new PersistableState({activeTabId: this.activeTabId});
-    }
-
-    setPersistableState(state: PersistableState<{activeTabId: string}>): void {
-        this.activateTab(state.value.activeTabId);
-    }
-
     //-------------------------
     // Implementation
     //-------------------------
@@ -395,6 +389,71 @@ export class TabContainerModel extends HoistModel implements Persistable<{active
 
         return null;
     }
+
+    private parseSwitcher(switcher: TabContainerConfig['switcher']): IDynamicTabSwitcherModel {
+        if (!switcher || switcher.mode === 'static') return null;
+        throwIf(XH.isMobileApp, 'DynamicTabSwitcherModel not supported for mobile TabContainer.');
+
+        return this.markManaged(new DynamicTabSwitcherModel(switcher, this));
+    }
+
+    private initPersist({
+        persistActiveTabId = !this.route,
+        persistFavoriteTabIds = !!this.dynamicTabSwitcherModel,
+        path = 'tabContainer',
+        ...rootPersistWith
+    }: TabContainerModelPersistOptions) {
+        if (persistActiveTabId) {
+            if (this.route) {
+                this.logWarn('persistActiveTabId and route cannot both be specified.');
+            } else {
+                const persistWith = isObject(persistActiveTabId)
+                    ? PersistenceProvider.mergePersistOptions(rootPersistWith, persistActiveTabId)
+                    : rootPersistWith;
+                PersistenceProvider.create({
+                    persistOptions: {
+                        path: `${path}.activeTabId`,
+                        ...persistWith
+                    },
+                    target: {
+                        getPersistableState: () => new PersistableState(this.activeTabId),
+                        setPersistableState: ({value}) => this.activateTab(value)
+                    },
+                    owner: this
+                });
+            }
+        }
+
+        if (persistFavoriteTabIds) {
+            const {dynamicTabSwitcherModel} = this;
+            if (!dynamicTabSwitcherModel) {
+                this.logWarn(
+                    'persistFavoriteTabIds is set but no DynamicTabSwitcherModel is present.'
+                );
+            } else {
+                const persistWith = isObject(persistFavoriteTabIds)
+                    ? PersistenceProvider.mergePersistOptions(
+                          rootPersistWith,
+                          persistFavoriteTabIds
+                      )
+                    : rootPersistWith;
+                PersistenceProvider.create({
+                    persistOptions: {
+                        path: `${path}.favoriteTabIds`,
+                        ...persistWith
+                    },
+                    target: {
+                        getPersistableState: () =>
+                            new PersistableState(dynamicTabSwitcherModel.favoriteTabIds),
+                        setPersistableState: ({value}) => {
+                            dynamicTabSwitcherModel.setFavoriteTabIds(value);
+                        }
+                    },
+                    owner: this
+                });
+            }
+        }
+    }
 }
 
 export interface AddTabOptions {

package/cmp/tab/TabModel.ts

@@ -196,7 +196,6 @@ export class TabModel extends HoistModel {
             renderMode: parent.renderMode,
             refreshMode: parent.refreshMode,
             emptyText: parent.emptyText,
-            switcher: parent.switcher,
             track: parent.track,
             ...childConfig
         };
@@ -211,7 +210,7 @@ export class TabModel extends HoistModel {
             };
         }
 
-        this.childContainerModel = new TabContainerModel(childConfig);
+        this.childContainerModel = new TabContainerModel(childConfig, parent.depth + 1);
         return tabContainer({model: this.childContainerModel});
     }
 }

package/cmp/tab/Types.ts

@@ -0,0 +1,80 @@
+import {TabContainerModel} from '@xh/hoist/cmp/tab/TabContainerModel';
+import {TabModel} from '@xh/hoist/cmp/tab/TabModel';
+import {
+    BoxProps,
+    HoistModel,
+    HoistProps,
+    MenuContext,
+    MenuItemLike,
+    MenuToken,
+    PersistOptions,
+    Side
+} from '@xh/hoist/core';
+
+export interface TabSwitcherProps extends HoistProps<TabContainerModel>, BoxProps {
+    /** Relative position within the parent TabContainer. Defaults to 'top'. */
+    orientation?: Side;
+
+    /**
+     * True to animate the indicator when switching tabs. False (default) to change instantly.
+     * Not supported by DynamicTabSwitcher.
+     */
+    animate?: boolean;
+
+    /**
+     * Enable scrolling and place tabs that overflow into a menu. Default to false.
+     * Not supported by DynamicTabSwitcher.
+     */
+    enableOverflow?: boolean;
+
+    /** Width (in px) to render tabs. Only applies to horizontal orientations */
+    tabWidth?: number;
+
+    /** Minimum width (in px) to render tabs. Only applies to horizontal orientations */
+    tabMinWidth?: number;
+
+    /** Maximum width (in px) to render tabs. Only applies to horizontal orientations */
+    tabMaxWidth?: number;
+}
+
+export interface TabSwitcherConfig {
+    /** Specification for type of switcher. Specify `dynamic`for user-configurable tabs */
+    mode: 'static' | 'dynamic';
+    /** Additional menu items to include in tab context menus. Only supported on desktop */
+    extraMenuItems?: Array<MenuItemLike<MenuToken, TabSwitcherMenuContext>>;
+    /** IDs of favorite tabs to display by default (in order). Only for `dynamic` switchers */
+    initialFavorites?: string[];
+}
+
+export interface TabContainerModelPersistOptions extends PersistOptions {
+    /** True (default) to persist the active tab ID or provide custom PersistOptions. */
+    persistActiveTabId?: boolean;
+    /** True (default) to persist favorite tab IDs or provide custom PersistOptions. */
+    persistFavoriteTabIds?: boolean;
+}
+
+export interface TabSwitcherMenuContext extends MenuContext {
+    tab: TabModel;
+}
+
+/** Cross-platform interface for desktop and mobile (TBA) DynamicTabSwitcherModels. */
+export interface IDynamicTabSwitcherModel extends HoistModel {
+    /** IDs of favorite tabs, in order. */
+    get favoriteTabIds(): string[];
+    /** Tabs displayed in switcher, in order. */
+    get visibleTabs(): TabModel[];
+    /** Enabled tabs displayed in switcher, in order. */
+    get enabledVisibleTabs(): TabModel[];
+    /** Whether the specified tab is currently active in the TabContainer. */
+    isTabActive(tabId: string): boolean;
+    /** Whether the specified tab is currently marked as a favorite. */
+    isTabFavorite(tabId: string): boolean;
+    /** Toggle the favorite status of the specified tab. */
+    toggleTabFavorite(tabId: string): void;
+    /** Activate the specified tab in the TabContainer. */
+    activate(tabId: string): void;
+    /** Remove the specified tab from the switcher. */
+    hide(tabId: string): void;
+    /** Set the IDs of all favorite tabs, in order. */
+    setFavoriteTabIds(tabIds: string[]): void;
+}

package/cmp/tab/index.ts

@@ -1,4 +1,4 @@
 export * from './TabModel';
 export * from './TabContainer';
 export * from './TabContainerModel';
-export * from './TabSwitcherProps';
+export * from './Types';

package/data/RecordAction.ts

@@ -33,7 +33,10 @@ export interface RecordActionSpec extends TestSupportProps {
     /** Function called on action execution. */
     actionFn?: (data: ActionFnData) => void;
 
-    /** Function called prior to showing this item. */
+    /**
+     * Function called to append / override display properties prior to each render. This function
+     * allows dynamic control over display properties.
+     * */
     displayFn?: (data: ActionFnData) => RecordActionSpec;
 
     /** Sub-actions for this action. */

package/desktop/appcontainer/AppContainer.ts

@@ -25,7 +25,7 @@ import {storeFilterFieldImpl} from '@xh/hoist/desktop/cmp/store/impl/StoreFilter
 import {tabContainerImpl} from '@xh/hoist/desktop/cmp/tab/impl/TabContainer';
 import {zoneMapperDialog as zoneMapper} from '@xh/hoist/desktop/cmp/zoneGrid/impl/ZoneMapperDialog';
 import {useContextMenu, useHotkeys} from '@xh/hoist/desktop/hooks';
-import {installDesktopImpls} from '@xh/hoist/dynamics/desktop';
+import {DynamicTabSwitcherModel, installDesktopImpls} from '@xh/hoist/dynamics/desktop';
 import {inspectorPanel} from '@xh/hoist/inspector/InspectorPanel';
 import {blueprintProvider} from '@xh/hoist/kit/blueprint';
 import {consumeEvent} from '@xh/hoist/utils/js';
@@ -59,7 +59,8 @@ installDesktopImpls({
     useContextMenu,
     ModalSupportModel,
     errorMessageImpl,
-    maskImpl
+    maskImpl,
+    DynamicTabSwitcherModel
 });
 /**
  * Top-level wrapper for Desktop applications.

package/desktop/cmp/grid/impl/filter/headerfilter/HeaderFilter.ts

@@ -31,7 +31,7 @@ export const headerFilter = hoistCmp.factory({
             onClick: stopPropagation,
             onDoubleClick: stopPropagation,
             headerItems: [switcher()],
-            item: tabContainer(),
+            item: tabContainer({switcher: false}),
             bbar: bbar(),
             hotkeys: [
                 {

package/desktop/cmp/grid/impl/filter/headerfilter/HeaderFilterModel.ts

@@ -116,7 +116,6 @@ export class HeaderFilterModel extends HoistModel {
         this.valuesTabModel = enableValues ? new ValuesTabModel(this) : null;
         this.customTabModel = new CustomTabModel(this);
         this.tabContainerModel = new TabContainerModel({
-            switcher: false,
             tabs: [
                 {
                     id: 'valuesFilter',

package/desktop/cmp/tab/TabSwitcher.ts

@@ -6,15 +6,19 @@
  */
 import composeRefs from '@seznam/compose-react-refs';
 import {box, div, hframe, span} from '@xh/hoist/cmp/layout';
-import {TabContainerModel, TabSwitcherProps} from '@xh/hoist/cmp/tab';
+import {TabContainerModel} from '@xh/hoist/cmp/tab';
+import {TabSwitcherProps} from '@xh/hoist/cmp/tab/Types';
 import {hoistCmp, HoistModel, useLocalModel, uses} from '@xh/hoist/core';
 import {button} from '@xh/hoist/desktop/cmp/button';
 import '@xh/hoist/desktop/register';
+import {contextMenu} from '@xh/hoist/desktop/cmp/contextmenu';
+import {getContextMenuItem} from '@xh/hoist/desktop/cmp/tab/impl/TabContextMenuItems';
 import {Icon} from '@xh/hoist/icon';
 import {
     menu,
     menuItem,
     popover,
+    showContextMenu,
     tab as bpTab,
     tabs as bpTabs,
     tooltip as bpTooltip
@@ -67,7 +71,7 @@ export const [TabSwitcher, tabSwitcher] = hoistCmp.withFactory<TabSwitcherProps>
             'Unsupported value for orientation.'
         );
 
-        const {tabs, activeTabId} = model,
+        const {tabs, activeTabId, switcherConfig} = model,
             layoutProps = getLayoutProps(props),
             vertical = ['left', 'right'].includes(orientation),
             impl = useLocalModel(() => new TabSwitcherLocalModel(model, enableOverflow, vertical));
@@ -119,7 +123,18 @@ export const [TabSwitcher, tabSwitcher] = hoistCmp.withFactory<TabSwitcherProps>
                             })
                         ]
                     })
-                })
+                }),
+                onContextMenu: e => {
+                    const domRect = e.currentTarget.getBoundingClientRect(),
+                        menuItems = (switcherConfig.extraMenuItems ?? []).map(it =>
+                            getContextMenuItem(it, {contextMenuEvent: e, tab})
+                        );
+                    if (isEmpty(menuItems)) return;
+                    showContextMenu(contextMenu({menuItems}), {
+                        left: orientation === 'left' ? domRect.right : domRect.left,
+                        top: orientation === 'top' ? domRect.bottom : domRect.top
+                    });
+                }
             });
         });
 

package/desktop/cmp/tab/Tabs.scss

@@ -67,6 +67,7 @@
     align-items: baseline;
     font-family: var(--xh-tab-font-family);
     font-size: var(--xh-tab-font-size-px);
+    user-select: none;
 
     & > svg:first-child {
       margin: 0 0.4em 0 0;

package/desktop/cmp/tab/dynamic/DynamicTabSwitcher.scss

@@ -0,0 +1,53 @@
+.xh-dynamic-tab-switcher {
+  &:not(&--vertical) &__tabs {
+    overflow-x: auto;
+
+    .bp5-tab-list {
+      column-gap: var(--xh-pad-double-px);
+    }
+  }
+
+  &--vertical &__tabs {
+    overflow-y: auto;
+  }
+
+  &__tabs {
+    display: flex;
+    flex-direction: row;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+
+    &__tab {
+      align-items: center;
+      user-select: none;
+
+      .xh-dynamic-tab-switcher--vertical & {
+        min-height: fit-content;
+        width: 100%;
+      }
+
+      &:not(&--active) {
+        cursor: pointer;
+      }
+
+      &--dragging {
+        background-color: var(--xh-menu-item-highlight-bg);
+      }
+
+      &__icon {
+        margin-right: 3px;
+      }
+
+      &__close-button {
+        align-self: center;
+        padding: 0 !important;
+        margin-left: 3px;
+        min-height: 15px;
+        min-width: 15px;
+        border-radius: 100% !important;
+      }
+    }
+  }
+}