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

package/desktop/cmp/tab/dynamic/DynamicTabSwitcherModel.ts

@@ -0,0 +1,167 @@
+import {TabContainerModel, TabModel} from '@xh/hoist/cmp/tab';
+import {
+    IDynamicTabSwitcherModel,
+    TabSwitcherConfig,
+    TabSwitcherMenuContext
+} from '@xh/hoist/cmp/tab/Types';
+import {HoistModel, MenuItemLike, MenuToken, ReactionSpec, XH} from '@xh/hoist/core';
+import {getContextMenuItem} from '@xh/hoist/desktop/cmp/tab/impl/TabContextMenuItems';
+import {Icon} from '@xh/hoist/icon';
+import {makeObservable} from '@xh/hoist/mobx';
+import {compact, find} from 'lodash';
+import {action, computed, observable, when} from 'mobx';
+import React from 'react';
+
+/**
+ * State management for the DynamicTabSwitcher component.
+ * @internal
+ */
+export class DynamicTabSwitcherModel extends HoistModel implements IDynamicTabSwitcherModel {
+    declare config: TabSwitcherConfig;
+
+    private readonly extraMenuItems: Array<MenuItemLike<MenuToken, TabSwitcherMenuContext>>;
+    private readonly tabContainerModel: TabContainerModel;
+    @observable.ref private visibleTabState: TabState[];
+
+    @computed
+    get favoriteTabIds(): string[] {
+        return this.visibleTabState.filter(it => it.isFavorite).map(it => it.tabId);
+    }
+
+    @computed
+    get visibleTabs(): TabModel[] {
+        return compact(this.visibleTabState.map(it => this.tabContainerModel.findTab(it.tabId)));
+    }
+
+    @computed
+    get enabledVisibleTabs(): TabModel[] {
+        return this.visibleTabs.filter(it => !it.disabled);
+    }
+
+    constructor(
+        {extraMenuItems = [], initialFavorites = []}: TabSwitcherConfig,
+        tabContainerModel: TabContainerModel
+    ) {
+        super();
+        makeObservable(this);
+
+        this.extraMenuItems = extraMenuItems;
+        this.tabContainerModel = tabContainerModel;
+        this.visibleTabState = this.getValidTabIds(initialFavorites).map(tabId => ({
+            tabId,
+            isFavorite: true
+        }));
+
+        // Wait for router to start before observing active tab
+        when(
+            () => XH.appIsRunning,
+            () => this.addReaction(this.activeTabReaction())
+        );
+    }
+
+    isTabActive(tabId: string): boolean {
+        return this.tabContainerModel.activeTabId === tabId;
+    }
+
+    isTabFavorite(tabId: string): boolean {
+        return !!find(this.visibleTabState, {tabId})?.isFavorite;
+    }
+
+    @action
+    toggleTabFavorite(tabId: string) {
+        this.visibleTabState = !this.isTabVisible(tabId)
+            ? [...this.visibleTabState, {tabId, isFavorite: true}]
+            : this.visibleTabState.map(it =>
+                  it.tabId === tabId ? {tabId, isFavorite: !this.isTabFavorite(tabId)} : it
+              );
+    }
+
+    activate(tabId: string) {
+        this.tabContainerModel.activateTab(tabId);
+    }
+
+    @action
+    hide(tabId: string) {
+        const {enabledVisibleTabs, tabContainerModel} = this;
+        if (tabContainerModel.activeTabId === tabId) {
+            const visitableTabs = enabledVisibleTabs.filter(tab => tab instanceof TabModel),
+                activeTabIdx = visitableTabs.findIndex(tab => tab.id === tabId),
+                toActivate =
+                    visitableTabs[
+                        activeTabIdx + (activeTabIdx === visitableTabs.length - 1 ? -1 : 1)
+                    ];
+            if (toActivate) tabContainerModel.activateTab(toActivate);
+        }
+        this.visibleTabState = this.visibleTabState.filter(it => it.tabId !== tabId);
+    }
+
+    getContextMenuItems(
+        e: React.MouseEvent<HTMLDivElement, MouseEvent>,
+        tab: TabModel
+    ): Array<MenuItemLike<MenuToken, TabSwitcherMenuContext>> {
+        const isFavorite = this.isTabFavorite(tab.id);
+        return [
+            {
+                icon: Icon.favorite({prefix: isFavorite ? 'fal' : 'fas'}),
+                text: isFavorite ? 'Remove from Favorites' : 'Add to Favorites',
+                actionFn: () => this.toggleTabFavorite(tab.id)
+            },
+            ...this.extraMenuItems.map(item => getContextMenuItem(item, {contextMenuEvent: e, tab}))
+        ];
+    }
+
+    @action
+    setFavoriteTabIds(tabIds: string[]) {
+        const visibleTabState = this.getValidTabIds(tabIds).map(tabId => ({
+                tabId,
+                isFavorite: true
+            })),
+            {activeTab} = this.tabContainerModel;
+        if (activeTab && !activeTab.excludeFromSwitcher && !tabIds.includes(activeTab.id)) {
+            visibleTabState.push({tabId: activeTab.id, isFavorite: false});
+        }
+        this.visibleTabState = visibleTabState;
+    }
+
+    @action
+    onDragEnd(result) {
+        if (!result.destination) return;
+        const visibleTabState = [...this.visibleTabState],
+            [removed] = visibleTabState.splice(result.source.index, 1);
+        visibleTabState.splice(result.destination.index, 0, removed);
+        this.visibleTabState = visibleTabState;
+    }
+
+    // -------------------------------
+    // Implementation
+    // -------------------------------
+    private activeTabReaction(): ReactionSpec<TabModel> {
+        return {
+            track: () => this.tabContainerModel.activeTab,
+            run: ({id: tabId, excludeFromSwitcher}) => {
+                if (!excludeFromSwitcher && !this.isTabVisible(tabId)) {
+                    this.visibleTabState = [...this.visibleTabState, {tabId, isFavorite: false}];
+                }
+            },
+            fireImmediately: true
+        };
+    }
+
+    private getValidTabIds(tabIds: string[]): string[] {
+        return tabIds.filter(id => this.isValidTabId(id));
+    }
+
+    private isValidTabId(tabId: string): boolean {
+        const tabModel = this.tabContainerModel.findTab(tabId);
+        return !!(tabModel && !tabModel.excludeFromSwitcher);
+    }
+
+    private isTabVisible(tabId: string): boolean {
+        return this.visibleTabState.some(it => it.tabId === tabId);
+    }
+}
+
+interface TabState {
+    tabId: string;
+    isFavorite: boolean;
+}

package/desktop/cmp/tab/dynamic/scroller/Scroller.ts

@@ -0,0 +1,69 @@
+import composeRefs from '@seznam/compose-react-refs';
+import {hbox, vbox} from '@xh/hoist/cmp/layout';
+import {BoxProps, creates, hoistCmp, HoistProps} from '@xh/hoist/core';
+import {button} from '@xh/hoist/desktop/cmp/button';
+import {ScrollerModel} from '@xh/hoist/desktop/cmp/tab/dynamic/scroller/ScrollerModel';
+import {Icon} from '@xh/hoist/icon';
+import {useOnResize} from '@xh/hoist/utils/react';
+import React, {Ref} from 'react';
+
+/**
+ * A scroller component that displays a content component with directional scroll buttons when the
+ * content overflows the viewport.
+ * @internal
+ */
+
+export interface ScrollerProps extends HoistProps<ScrollerModel>, Omit<BoxProps, 'content'> {
+    /** The content to be displayed within the scroller. */
+    content: React.FC<{ref: Ref<HTMLDivElement>}>;
+    /** Props to be passed to the content component. */
+    contentProps?: Record<string, any>;
+    /** Orientation of the scroller - horizontal (default) or vertical. */
+    orientation?: 'horizontal' | 'vertical';
+}
+
+export const [Scroller, scroller] = hoistCmp.withFactory<ScrollerProps>({
+    displayName: 'Scroller',
+    model: creates(ScrollerModel, {publishMode: 'limited'}),
+    render({className, content, contentProps, model, orientation, ...layoutProps}) {
+        const {contentRef, isHorizontal} = model,
+            container = isHorizontal ? hbox : vbox;
+        return container({
+            ...layoutProps,
+            className,
+            items: [
+                scrollButton({direction: 'backward', model}),
+                content({
+                    ...contentProps,
+                    ref: composeRefs(
+                        contentRef,
+                        useOnResize(() => model.onViewportEvent())
+                    )
+                }),
+                scrollButton({direction: 'forward', model})
+            ]
+        });
+    }
+});
+
+interface ScrollButtonProps extends HoistProps<ScrollerModel> {
+    direction: 'forward' | 'backward';
+}
+
+const scrollButton = hoistCmp.factory<ScrollButtonProps>(({direction, model}) => {
+    if (!model.showScrollButtons) return null;
+    return button({
+        icon:
+            direction === 'backward'
+                ? model.isHorizontal
+                    ? Icon.chevronLeft()
+                    : Icon.chevronUp()
+                : model.isHorizontal
+                  ? Icon.chevronRight()
+                  : Icon.chevronDown(),
+        disabled: direction === 'backward' ? model.isScrolledToStart : model.isScrolledToEnd,
+        onMouseDown: () => model.scroll(direction),
+        onMouseUp: () => model.stopScrolling(),
+        onMouseLeave: () => model.stopScrolling()
+    });
+});

package/desktop/cmp/tab/dynamic/scroller/ScrollerModel.ts

@@ -0,0 +1,92 @@
+import {HoistModel} from '@xh/hoist/core';
+import {makeObservable} from '@xh/hoist/mobx';
+import {isNil} from 'lodash';
+import {action, computed, observable} from 'mobx';
+import {createRef} from 'react';
+
+/**
+ * Internal model for the Scroller component. Used to manage the scroll state and provide
+ * scroll functionality. Uses animation frames to ensure smooth scrolling.
+ * @internal
+ */
+
+export class ScrollerModel extends HoistModel {
+    contentRef = createRef<HTMLDivElement>();
+
+    @observable private scrollStart: number;
+    @observable private scrollSize: number;
+    @observable private clientSize: number;
+
+    private animationFrameId: number;
+
+    @computed
+    get showScrollButtons(): boolean {
+        return this.scrollSize > this.clientSize;
+    }
+
+    @computed
+    get isScrolledToStart(): boolean {
+        return this.scrollStart === 0;
+    }
+
+    @computed
+    get isScrolledToEnd(): boolean {
+        // Allow for a 1px buffer to account for rounding errors
+        return this.scrollStart + this.clientSize >= this.scrollSize - 1;
+    }
+
+    get isHorizontal(): boolean {
+        return this.componentProps.orientation !== 'vertical';
+    }
+
+    constructor() {
+        super();
+        makeObservable(this);
+    }
+
+    override afterLinked() {
+        this.contentRef.current.addEventListener('scroll', () => this.onViewportEvent());
+    }
+
+    scroll(direction: 'forward' | 'backward') {
+        this.stopScrolling();
+        this.animationFrameId = window.requestAnimationFrame(() => {
+            const {current} = this.contentRef;
+            if (
+                !current ||
+                (direction === 'backward' && this.isScrolledToStart) ||
+                (direction === 'forward' && this.isScrolledToEnd)
+            ) {
+                this.stopScrolling();
+                return;
+            }
+            if (this.isHorizontal) {
+                current.scrollLeft += direction === 'backward' ? -10 : 10;
+            } else {
+                current.scrollTop += direction === 'backward' ? -10 : 10;
+            }
+            this.scroll(direction);
+        });
+    }
+
+    stopScrolling() {
+        if (!isNil(this.animationFrameId)) {
+            window.cancelAnimationFrame(this.animationFrameId);
+            this.animationFrameId = null;
+        }
+    }
+
+    @action
+    onViewportEvent() {
+        const {contentRef, isHorizontal} = this,
+            {current} = contentRef;
+        this.scrollStart = isHorizontal ? current.scrollLeft : current.scrollTop;
+        this.scrollSize = isHorizontal ? current.scrollWidth : current.scrollHeight;
+        this.clientSize = isHorizontal ? current.clientWidth : current.clientHeight;
+    }
+
+    override destroy() {
+        this.stopScrolling();
+        super.destroy();
+    }
+}

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

@@ -5,9 +5,17 @@
  * Copyright © 2025 Extremely Heavy Industries Inc.
  */
 import {frame} from '@xh/hoist/cmp/layout';
-import {TabModel} from '@xh/hoist/cmp/tab';
-import {hoistCmp, refreshContextView, uses} from '@xh/hoist/core';
+import {TabContainerProps, TabModel} from '@xh/hoist/cmp/tab';
+import {
+    hoistCmp,
+    HoistProps,
+    PlainObject,
+    refreshContextView,
+    TestSupportProps,
+    uses
+} from '@xh/hoist/core';
 import {elementFromContent} from '@xh/hoist/utils/react';
+import {isFunction} from 'lodash';
 import {useRef} from 'react';
 import {errorBoundary} from '@xh/hoist/cmp/error/ErrorBoundary';
 
@@ -21,13 +29,17 @@ import {errorBoundary} from '@xh/hoist/cmp/error/ErrorBoundary';
  *
  * @internal
  */
-export const tab = hoistCmp.factory({
+interface TabProps extends HoistProps<TabModel>, TestSupportProps {
+    childContainerProps?: TabContainerProps['childContainerProps'];
+}
+
+export const tab = hoistCmp.factory<TabProps>({
     displayName: 'Tab',
     className: 'xh-tab',
     model: uses(TabModel, {publishMode: 'limited'}),
 
-    render({model, className, testId}) {
-        const {content, isActive, renderMode, refreshContextModel} = model,
+    render({model, childContainerProps, className, testId}) {
+        const {childContainerModel, content, isActive, id, renderMode, refreshContextModel} = model,
             wasActivated = useRef(false);
 
         if (!wasActivated.current && isActive) wasActivated.current = true;
@@ -39,13 +51,25 @@ export const tab = hoistCmp.factory({
             return null;
         }
 
+        let contentProps: PlainObject = {flex: 1};
+        if (childContainerModel) {
+            if (isFunction(childContainerProps)) {
+                contentProps = {
+                    ...contentProps,
+                    ...childContainerProps({tabId: id, depth: childContainerModel.depth})
+                };
+            } else if (childContainerProps) {
+                contentProps = {...contentProps, ...childContainerProps};
+            }
+        }
+
         return frame({
             display: isActive ? 'flex' : 'none',
             className,
             testId,
             item: refreshContextView({
                 model: refreshContextModel,
-                item: errorBoundary(elementFromContent(content, {flex: 1}))
+                item: errorBoundary(elementFromContent(content, contentProps))
             })
         });
     }

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/panel/Panel.ts

@@ -29,7 +29,7 @@ import {logWarn} from '@xh/hoist/utils/js';
 
 export interface PanelProps extends HoistProps, Omit<BoxProps, 'title'> {
     /** A toolbar to be docked at the bottom of the panel. */
-    bbar?: Some<ReactNode>;
+    bbar?: ReactNode;
 
     /** CSS class name specific to the panel's header. */
     headerClassName?: string;
@@ -62,7 +62,7 @@ export interface PanelProps extends HoistProps, Omit<BoxProps, 'title'> {
     scrollable?: boolean;
 
     /** A toolbar to be docked at the top of the panel. */
-    tbar?: Some<ReactNode>;
+    tbar?: ReactNode;
 
     /** Title text added to the panel's header. */
     title?: ReactNode;

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.1766097863558",
   "description": "Hoist add-on for building and deploying React Applications.",
   "repository": "github:xh/hoist-react",
   "homepage": "https://xh.io",
@@ -67,7 +67,7 @@
     "react-beautiful-dnd": "~13.1.0",
     "react-dates": "~21.8.0",
     "react-dropzone": "~10.2.2",
-    "react-grid-layout": "1.5.0",
+    "react-grid-layout": "2.1.0",
     "react-markdown": "~10.1.0",
     "react-onsenui": "~1.13.2",
     "react-popper": "~2.3.0",
@@ -93,7 +93,6 @@
   "devDependencies": {
     "@types/react": "18.x",
     "@types/react-dom": "18.x",
-    "@types/react-grid-layout": "1.3.5",
     "@xh/hoist-dev-utils": "11.x",
     "ag-grid-community": "34.x",
     "ag-grid-react": "34.x",