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

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

@@ -0,0 +1,237 @@
+import composeRefs from '@seznam/compose-react-refs';
+import {box, div, hframe} from '@xh/hoist/cmp/layout';
+import {TabContainerModel, TabModel} from '@xh/hoist/cmp/tab';
+import {TabSwitcherProps} from '@xh/hoist/cmp/tab/Types';
+import {
+    hoistCmp,
+    HoistModel,
+    HoistProps,
+    Side,
+    useContextModel,
+    useLocalModel,
+    uses
+} from '@xh/hoist/core';
+import {button} from '@xh/hoist/desktop/cmp/button';
+import {contextMenu} from '@xh/hoist/desktop/cmp/contextmenu';
+import {scroller} from '@xh/hoist/desktop/cmp/tab/dynamic/scroller/Scroller';
+import {ScrollerModel} from '@xh/hoist/desktop/cmp/tab/dynamic/scroller/ScrollerModel';
+import {Icon} from '@xh/hoist/icon';
+import {showContextMenu, tooltip as bpTooltip} from '@xh/hoist/kit/blueprint';
+import {dragDropContext, draggable, droppable} from '@xh/hoist/kit/react-beautiful-dnd';
+import {wait} from '@xh/hoist/promise';
+import {consumeEvent} from '@xh/hoist/utils/js';
+import {getLayoutProps} from '@xh/hoist/utils/react';
+import classNames from 'classnames';
+import {first, isFinite, last} from 'lodash';
+import {computed} from 'mobx';
+import {CSSProperties, ReactElement, Ref, useEffect, useRef} from 'react';
+import {DynamicTabSwitcherModel} from './DynamicTabSwitcherModel';
+import './DynamicTabSwitcher.scss';
+
+/**
+ * A tab switcher that displays tabs as draggable items in a horizontal list.
+ * Tabs can be added, removed, reordered and favorited with persistence.
+ */
+export const [DynamicTabSwitcher, dynamicTabSwitcher] = hoistCmp.withFactory<TabSwitcherProps>({
+    className: 'xh-dynamic-tab-switcher',
+    displayName: 'DynamicTabSwitcher',
+    model: uses(TabContainerModel),
+    render({className, orientation, ...props}) {
+        const impl = useLocalModel(DynamicTabSwitcherLocalModel);
+        return scroller({
+            className: classNames(className, impl.isVertical && `${className}--vertical`),
+            content: tabs,
+            contentProps: {localModel: impl},
+            orientation: ['left', 'right'].includes(orientation) ? 'vertical' : 'horizontal',
+            ...getLayoutProps(props)
+        });
+    }
+});
+
+/**
+ * Minimal local model to avoid prop drilling.
+ */
+class DynamicTabSwitcherLocalModel extends HoistModel {
+    @computed
+    get isVertical(): boolean {
+        return ['left', 'right'].includes(this.props.orientation);
+    }
+
+    get props(): TabSwitcherProps {
+        const ret = this.componentProps as TabSwitcherProps;
+        return {
+            ...ret,
+            orientation: ret.orientation ?? 'top'
+        };
+    }
+}
+
+interface TabsProps extends HoistProps<DynamicTabSwitcherModel> {
+    localModel: DynamicTabSwitcherLocalModel;
+    ref: Ref<HTMLDivElement>;
+}
+
+const tabs = hoistCmp.factory<TabsProps>({
+    model: uses(DynamicTabSwitcherModel),
+    render({localModel, model}, ref) {
+        const {visibleTabs} = model,
+            {isVertical, props} = localModel,
+            layoutProps = getLayoutProps(props);
+        return dragDropContext({
+            onDragEnd: result => model.onDragEnd(result),
+            item: droppable({
+                droppableId: model.xhId,
+                direction: isVertical ? 'vertical' : 'horizontal',
+                children: provided =>
+                    box({
+                        ...layoutProps,
+                        className: `xh-dynamic-tab-switcher__tabs xh-tab-switcher xh-tab-switcher--${props.orientation}`,
+                        ref: composeRefs(provided.innerRef, ref),
+                        item: div({
+                            className: classNames('bp5-tabs', isVertical && 'bp5-vertical'),
+                            item: div({
+                                className: 'bp5-tab-list',
+                                items: [
+                                    visibleTabs.map((tab, index) =>
+                                        tabCmp({key: tab.id, localModel, tab, index})
+                                    ),
+                                    provided.placeholder
+                                ]
+                            })
+                        })
+                    })
+            })
+        });
+    }
+});
+
+interface TabProps extends HoistProps<DynamicTabSwitcherModel> {
+    tab: TabModel;
+    index: number;
+    localModel: DynamicTabSwitcherLocalModel;
+}
+
+const tabCmp = hoistCmp.factory<TabProps>(({tab, index, localModel, model}) => {
+    const isActive = model.isTabActive(tab.id),
+        isCloseable =
+            tab.disabled ||
+            model.enabledVisibleTabs.filter(it => it instanceof TabModel).length > 1,
+        tabRef = useRef<HTMLDivElement>(),
+        scrollerModel = useContextModel(ScrollerModel),
+        {showScrollButtons} = scrollerModel,
+        {disabled, icon, tooltip} = tab,
+        isFavorite = model.isTabFavorite(tab.id),
+        {isVertical, props} = localModel,
+        {tabWidth, tabMinWidth, tabMaxWidth} = props;
+
+    // Handle tab sizing props
+    const tabStyle: CSSProperties = {};
+    if (!isVertical && isFinite(tabWidth)) tabStyle.width = tabWidth + 'px';
+    if (!isVertical && isFinite(tabMinWidth)) tabStyle.minWidth = tabMinWidth + 'px';
+    if (!isVertical && isFinite(tabMaxWidth)) tabStyle.maxWidth = tabMaxWidth + 'px';
+
+    // Handle this at the component level rather than in the model since they are not "linked"
+    useEffect(() => {
+        if (isActive && showScrollButtons) {
+            // Wait a tick for scroll buttons to render, then scroll to the active tab
+            wait().then(() => tabRef.current.scrollIntoView({behavior: 'smooth'}));
+        }
+    }, [isActive, showScrollButtons]);
+
+    return draggable({
+        key: tab.id,
+        draggableId: tab.id,
+        index,
+        children: (provided, snapshot) =>
+            hframe({
+                className: classNames(
+                    'xh-dynamic-tab-switcher__tabs__tab',
+                    isActive && 'xh-dynamic-tab-switcher__tabs__tab--active',
+                    snapshot.isDragging && 'xh-dynamic-tab-switcher__tabs__tab--dragging'
+                ),
+                onClick: () => {
+                    if (!disabled) model.activate(tab.id);
+                },
+                onContextMenu: e => {
+                    const domRect = e.currentTarget.getBoundingClientRect();
+                    showContextMenu(
+                        contextMenu({
+                            menuItems: model.getContextMenuItems(e, tab)
+                        }),
+                        {
+                            left: props.orientation === 'left' ? domRect.right : domRect.left,
+                            top: props.orientation === 'top' ? domRect.bottom : domRect.top
+                        }
+                    );
+                },
+                ref: composeRefs(provided.innerRef, tabRef),
+                ...provided.draggableProps,
+                ...provided.dragHandleProps,
+                style: getStyles(isVertical, provided.draggableProps.style),
+                items: [
+                    div({
+                        'aria-selected': isActive,
+                        'aria-disabled': disabled,
+                        className: 'bp5-tab',
+                        item: bpTooltip({
+                            content: tooltip as ReactElement,
+                            disabled: !tooltip,
+                            hoverOpenDelay: 1000,
+                            position: flipOrientation(props.orientation),
+                            item: hframe({
+                                className: 'xh-tab-switcher__tab',
+                                style: tabStyle,
+                                tabIndex: -1,
+                                items: [
+                                    div({
+                                        className: 'xh-dynamic-tab-switcher__tabs__tab__icon',
+                                        item: icon,
+                                        omit: !icon
+                                    }),
+                                    tab.title,
+                                    button({
+                                        className:
+                                            'xh-dynamic-tab-switcher__tabs__tab__close-button',
+                                        icon: Icon.x({size: 'sm'}),
+                                        title: 'Remove Tab',
+                                        minimal: true,
+                                        onClick: e => {
+                                            consumeEvent(e);
+                                            model.hide(tab.id);
+                                        },
+                                        omit: isFavorite || !isCloseable
+                                    })
+                                ]
+                            })
+                        })
+                    })
+                ]
+            })
+    });
+});
+
+const getStyles = (isVertical: boolean, style: CSSProperties): CSSProperties => {
+    const {transform} = style;
+    if (!transform) return style;
+
+    return {
+        ...style,
+        // Only drag in one axis
+        transform: isVertical
+            ? `translate(0, ${last(transform.split(','))}`
+            : `${first(transform.split(','))}, 0)`
+    };
+};
+
+function flipOrientation(orientation: Side) {
+    switch (orientation) {
+        case 'top':
+            return 'bottom';
+        case 'bottom':
+            return 'top';
+        case 'left':
+            return 'right';
+        case 'right':
+            return 'left';
+    }
+}

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))
             })
         });
     }